/* ============================================================ AURUM — Estética Automotiva Adapted from the Emalhe Design System (purple → graphite/gold). Type scale, spacing, radii and shadow philosophy preserved; the entire accent universe recolored to champagne gold and driven by a single --accent var so it can be tweaked live. ============================================================ */ /* Fonts loaded via Google Fonts in the HTML : Plus Jakarta Sans (200–800 + italic) + JetBrains Mono (400/500). */ :root { /* ---------- ACCENT (tweakable) ---------- */ --accent: #CFA23A; /* champagne gold */ --accent-bright: color-mix(in srgb, var(--accent) 70%, #fff); --accent-deep: color-mix(in srgb, var(--accent) 78%, #000); --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-line: color-mix(in srgb, var(--accent) 32%, transparent); /* ---------- SURFACE / GRAPHITE SCALE ---------- */ --bg-0: #08090B; --bg-1: #0E0F12; --bg-2: #15171B; --bg-3: #1D2026; --bg-4: #262A31; /* glass surface */ --glass: rgba(18, 20, 24, 0.62); --glass-strong: rgba(14, 15, 18, 0.82); /* ---------- FOREGROUND ---------- */ --fg-1: #FFFFFF; --fg-2: #E6E7EA; --fg-3: #A7ABB3; --fg-4: #6E737D; --fg-5: #3A3E46; /* ---------- BORDERS / HAIRLINES ---------- */ --hair: rgba(255,255,255,0.07); --hair-strong: rgba(255,255,255,0.13); --border-accent: color-mix(in srgb, var(--accent) 45%, transparent); /* ---------- GLOWS (gold aura) ---------- */ --glow-sm: 0 0 24px color-mix(in srgb, var(--accent) 24%, transparent); --glow-md: 0 0 48px color-mix(in srgb, var(--accent) 30%, transparent); --glow-lg: 0 0 90px color-mix(in srgb, var(--accent) 36%, transparent); /* ---------- SHADOWS ---------- */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.4); --shadow-md: 0 12px 32px rgba(0,0,0,0.5); --shadow-lg: 0 28px 70px rgba(0,0,0,0.6); --shadow-hero: 0 40px 110px rgba(0,0,0,0.66), 0 0 120px color-mix(in srgb, var(--accent) 22%, transparent); /* ---------- RADII ---------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; --radius-full: 9999px; /* ---------- SPACING ---------- */ --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px; --space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px; --space-20:80px;--space-24:96px;--space-32:128px; /* ---------- TYPE ---------- */ --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-body: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display: clamp(48px, 6.6vw, 92px); --fs-h1: clamp(38px, 5vw, 60px); --fs-h2: clamp(30px, 3.8vw, 46px); --fs-h3: 26px; --fs-h4: 21px; --fs-body-lg: 18px; --fs-body: 16px; --fs-body-sm: 14px; --fs-eyebrow: 12px; --lh-tight: 1.04; --lh-snug: 1.18; --lh-normal: 1.6; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --dur: 240ms; --container: 1240px; --gutter: clamp(20px, 4vw, 48px); } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } html, body { margin: 0; background: var(--bg-1); color: var(--fg-1); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: var(--accent); color: #0b0b0b; } /* page texture: faint vertical grain + subtle top vignette */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(110% 60% at 50% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%), radial-gradient(80% 50% at 100% 0%, rgba(255,255,255,0.025), transparent 55%); pointer-events: none; z-index: 0; } /* ---------- LAYOUT ---------- */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); position: relative; z-index: 1; } section { position: relative; } .section-pad { padding-block: calc(clamp(48px, 7vw, 96px) * var(--pad-scale, 1)); } /* ---------- TYPE HELPERS ---------- */ .display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; font-weight: 700; margin: 0; } .h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.025em; font-weight: 700; margin: 0; } .h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.02em; font-weight: 700; margin: 0; } .h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: -0.015em; font-weight: 600; margin: 0; } .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; margin: 0; } .lead { font-size: var(--fs-body-lg); color: var(--fg-3); line-height: var(--lh-normal); } .muted { color: var(--fg-3); } .dim { color: var(--fg-4); } .eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--accent); display: inline-block; } .eyebrow.center::before { display: none; } .text-gold { background: linear-gradient(140deg, var(--accent-bright) 0%, var(--accent) 55%, var(--accent-deep) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; font-size: 15px; padding: 15px 26px; border-radius: var(--radius-full); border: 1px solid transparent; transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur), border-color var(--dur), color var(--dur), filter var(--dur); white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn-primary { background: linear-gradient(135deg, var(--accent-bright), var(--accent)); color: #15120A; box-shadow: var(--glow-sm), inset 0 1px 0 rgba(255,255,255,0.35); } .btn-primary:hover { filter: brightness(1.06); box-shadow: var(--glow-md), inset 0 1px 0 rgba(255,255,255,0.35); } .btn-primary:active { transform: translateY(1px); } .btn-ghost { background: rgba(255,255,255,0.03); color: var(--fg-1); border-color: var(--hair-strong); backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: var(--border-accent); color: var(--accent-bright); } .btn-wa { background: #1FAE54; color: #fff; box-shadow: 0 0 24px rgba(31,174,84,0.32); } .btn-wa:hover { filter: brightness(1.07); box-shadow: 0 0 40px rgba(31,174,84,0.45); } .btn-wa:active { transform: translateY(1px); } .btn-lg { padding: 18px 34px; font-size: 16px; } .btn-block { width: 100%; } /* ---------- CHIP / BADGE ---------- */ .chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--fg-3); padding: 7px 14px; border: 1px solid var(--hair); border-radius: var(--radius-full); background: rgba(255,255,255,0.02); } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); } /* ---------- CARD ---------- */ .card { background: linear-gradient(180deg, var(--bg-2), color-mix(in srgb, var(--bg-2) 70%, var(--bg-1))); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: var(--space-8); transition: transform var(--dur) var(--ease-out), border-color var(--dur), box-shadow var(--dur), background var(--dur); position: relative; overflow: hidden; } .card:hover { border-color: var(--border-accent); transform: translateY(-3px); box-shadow: var(--shadow-md), var(--glow-sm); } .card-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--accent-soft); border: 1px solid var(--border-accent); color: var(--accent-bright); margin-bottom: var(--space-5); } .card-icon svg { width: 26px; height: 26px; } /* glow blob */ .glow-blob { position: absolute; width: 560px; height: 560px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 0%, transparent 66%); filter: blur(46px); pointer-events: none; z-index: 0; } /* diamond / carbon pattern */ .pattern { position: absolute; inset: 0; background-image: linear-gradient(45deg, rgba(255,255,255,0.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(255,255,255,0.025) 25%, transparent 25%); background-size: 42px 42px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, #000 12%, transparent 68%); } /* hairline divider */ .hr { height: 1px; background: var(--hair); border: 0; margin: 0; } /* section intro */ .intro { max-width: 640px; } .intro.center { margin-inline: auto; text-align: center; } .intro .h2 { margin-top: var(--space-4); } .intro .lead { margin-top: var(--space-4); } /* grid helpers */ .grid { display: grid; gap: var(--space-6); } @media (min-width: 700px){ .grid-2 { grid-template-columns: repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} } @media (min-width: 980px){ .grid-3-lg { grid-template-columns: repeat(3,1fr);} } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } } /* image-slot defaults */ image-slot { --is-bg: var(--bg-3); background: var(--bg-3); border: 1px dashed var(--hair-strong); } /* ============================================================ COMPONENTS ============================================================ */ /* ---------- Wordmark ---------- */ .wordmark { display: inline-flex; align-items: center; gap: 12px; } .wordmark-mark { display: grid; place-items: center; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 40%, transparent)); } .wordmark-text { display: flex; flex-direction: column; line-height: 1; } .wordmark-text strong { font-size: 19px; font-weight: 700; letter-spacing: 0.22em; } .wordmark-text em { font-family: var(--font-mono); font-style: normal; font-size: 9px; letter-spacing: 0.34em; color: var(--fg-4); margin-top: 4px; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background var(--dur), border-color var(--dur), backdrop-filter var(--dur); border-bottom: 1px solid transparent; } .nav-scrolled { background: var(--glass-strong); backdrop-filter: blur(14px); border-bottom-color: var(--hair); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .nav-links { display: none; gap: 30px; } .nav-link { font-size: 14.5px; color: var(--fg-3); transition: color var(--dur); } .nav-link:hover { color: var(--accent-bright); } .nav-cta { display: none; } .nav-toggle { display: grid; place-items: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--hair); border-radius: var(--radius-md); color: var(--fg-1); } .nav-mobile { display: none; flex-direction: column; gap: 6px; padding: 12px var(--gutter) 22px; background: var(--glass-strong); backdrop-filter: blur(14px); border-bottom: 1px solid var(--hair); } .nav-mobile.open { display: flex; } .nav-mobile-link { padding: 12px 4px; color: var(--fg-2); border-bottom: 1px solid var(--hair); } .nav-mobile .btn { margin-top: 10px; } @media (min-width: 940px){ .nav-links { display: flex; } .nav-cta { display: block; } .nav-toggle { display: none; } } /* ---------- Hero ---------- */ .hero { padding-top: clamp(120px, 16vw, 180px); overflow: hidden; } .hero-glow { left: 46%; top: -6%; opacity: 0.85; } .hero-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; } .hero-title { margin-top: 22px; max-width: 14ch; } .hero-lead { margin-top: 24px; max-width: 52ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-trust { display: flex; flex-wrap: wrap; gap: clamp(24px, 5vw, 56px); margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--hair); } .trust-item { display: flex; flex-direction: column; gap: 4px; } .trust-num { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; display: inline-flex; align-items: center; } .trust-label { font-size: 13px; color: var(--fg-4); font-family: var(--font-mono); letter-spacing: 0.02em; } .hero-media { position: relative; } .hero-frame { position: relative; border-radius: var(--radius-xl); padding: 10px; background: linear-gradient(160deg, var(--bg-3), var(--bg-1)); border: 1px solid var(--hair-strong); box-shadow: var(--shadow-hero); transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); } .hero-slot { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); } .hero-grain { position: absolute; inset: 10px; border-radius: var(--radius-lg); pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.4; mix-blend-mode: overlay; } .hero-chip { position: absolute; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--hair-strong); box-shadow: var(--shadow-md); } .hero-chip .chip-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-bright); border: 1px solid var(--border-accent); } .hero-chip strong { display: block; font-size: 14px; } .hero-chip span { display: block; font-size: 12px; color: var(--fg-4); font-family: var(--font-mono); } .hero-chip-1 { left: -16px; top: 18%; } .hero-chip-2 { right: -12px; bottom: 14%; } @media (min-width: 940px){ .hero-grid { grid-template-columns: 1.05fr 0.95fr; } } @media (max-width: 560px){ .hero-chip-1 { left: 4px; top: 10px; } .hero-chip-2 { right: 4px; bottom: 10px; } } /* ---------- Benefits / Services grids ---------- */ .benefits-grid, .services-grid { margin-top: clamp(40px, 6vw, 64px); } .service-card { text-align: left; cursor: pointer; background-clip: padding-box; font: inherit; color: inherit; display: flex; flex-direction: column; } .service-card .muted { margin: 8px 0 18px; flex: 1; } .service-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-bright); font-size: 14px; font-weight: 600; transition: gap var(--dur); } .service-card:hover .service-link { gap: 11px; } .services { overflow: hidden; } /* ---------- Antes & Depois ---------- */ .ba { position: relative; margin: clamp(36px,5vw,56px) auto 0; max-width: 1000px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hair-strong); box-shadow: var(--shadow-lg), var(--glow-sm); cursor: ew-resize; touch-action: none; user-select: none; } .ba-layer { position: absolute; inset: 0; } .ba-slot { display: block; width: 100%; height: 100%; border-radius: 0; border: 0; } .ba-before { z-index: 2; } .ba-tag { position: absolute; bottom: 16px; z-index: 4; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; padding: 6px 12px; border-radius: var(--radius-full); background: var(--glass-strong); backdrop-filter: blur(8px); border: 1px solid var(--hair-strong); } .ba-tag-before { left: 16px; color: var(--accent-bright); border-color: var(--border-accent); } .ba-tag-after { right: 16px; color: var(--fg-3); } .ba-handle { position: absolute; top: 0; bottom: 0; z-index: 5; transform: translateX(-50%); display: grid; place-items: center; } .ba-line { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--accent-bright), var(--accent)); box-shadow: 0 0 14px var(--accent); } .ba-grip { position: relative; display: grid; grid-auto-flow: column; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--glass-strong); backdrop-filter: blur(8px); border: 1px solid var(--accent); color: var(--accent-bright); box-shadow: var(--glow-sm); } .ba-handle:focus-visible { outline: none; } .ba-handle:focus-visible .ba-grip { outline: 2px solid var(--accent-bright); outline-offset: 3px; } .ba-hint { text-align: center; margin-top: 16px; font-size: 13px; font-family: var(--font-mono); } /* ---------- Testimonials ---------- */ .testimonials-grid { margin-top: clamp(36px,5vw,56px); } .testimonial { display: flex; flex-direction: column; gap: 18px; } .testimonial blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--fg-2); } .stars { display: inline-flex; gap: 3px; color: var(--accent); } .testimonial-by { display: flex; align-items: center; gap: 14px; margin-top: auto; } .avatar { display: block; width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; } .testimonial-by strong { display: block; font-size: 14.5px; } .testimonial-by span { display: block; font-size: 13px; font-family: var(--font-mono); } /* ---------- Process ---------- */ .process { position: relative; margin-top: clamp(40px,6vw,64px); display: grid; gap: 28px; } .process-line { display: none; } .process-step { position: relative; padding-left: 4px; } .process-num { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--accent-bright); width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-accent); background: var(--accent-soft); margin-bottom: 18px; } .process-step .h4 { margin-bottom: 8px; } @media (min-width: 860px){ .process { grid-template-columns: repeat(4,1fr); gap: 24px; } .process-line { display: block; position: absolute; top: 28px; left: 28px; right: 28px; height: 1px; background: linear-gradient(90deg, var(--border-accent), var(--hair)); z-index: 0; } } /* ---------- Differentials ---------- */ .differentials { overflow: hidden; } .diff-grid { display: grid; gap: clamp(36px,5vw,64px); align-items: start; } .diff-aside .h2 { margin-top: 18px; } .diff-aside .lead { margin-top: 16px; margin-bottom: 8px; } .diff-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .diff-item { display: flex; gap: 18px; align-items: flex-start; padding: 20px; border-radius: var(--radius-md); background: var(--bg-2); border: 1px solid var(--hair); transition: border-color var(--dur), background var(--dur); } .diff-item:hover { border-color: var(--border-accent); background: var(--bg-3); } .diff-ic { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-bright); border: 1px solid var(--border-accent); } .diff-item strong { display: block; font-size: 16px; } .diff-item .muted { margin: 5px 0 0; font-size: 14.5px; } @media (min-width: 900px){ .diff-grid { grid-template-columns: 0.92fr 1.08fr; } .diff-aside { position: sticky; top: 110px; } } /* ---------- Final CTA ---------- */ .cta-card { position: relative; overflow: hidden; text-align: center; padding: clamp(40px,7vw,80px) clamp(24px,5vw,64px); border-radius: var(--radius-xl); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--border-accent); box-shadow: var(--shadow-lg), var(--glow-md); } .cta-card .chip { margin-inline: auto; } .cta-title { margin-top: 22px; max-width: 18ch; margin-inline: auto; } .cta-card .lead { margin-top: 18px; max-width: 56ch; margin-inline: auto; } .cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 34px; position: relative; z-index: 1; } /* ---------- Footer ---------- */ .footer { padding-bottom: 40px; position: relative; z-index: 1; } .footer-grid { display: grid; gap: 40px; padding-top: clamp(48px,7vw,80px); } .footer-tag { margin: 18px 0; max-width: 34ch; font-size: 14.5px; } .footer-social { display: flex; gap: 10px; } .social { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-md); border: 1px solid var(--hair); color: var(--fg-3); transition: color var(--dur), border-color var(--dur); } .social:hover { color: var(--accent-bright); border-color: var(--border-accent); } .footer-h { font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-4); margin: 0 0 18px; font-weight: 500; } .footer-col { display: flex; flex-direction: column; gap: 12px; } .footer-line { display: flex; align-items: center; gap: 10px; color: var(--fg-3); font-size: 14.5px; } .footer-line svg { color: var(--accent); flex-shrink: 0; } .footer-link { color: var(--fg-3); font-size: 14.5px; transition: color var(--dur); } .footer-link:hover { color: var(--accent-bright); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 13px; font-family: var(--font-mono); } @media (min-width: 820px){ .footer-grid { grid-template-columns: 2fr 1.3fr 1fr; } } /* ---------- WhatsApp float ---------- */ .wa-float { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 60px; height: 60px; border-radius: 50%; border: none; background: #1FAE54; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 0 0 rgba(31,174,84,0.5); transition: transform var(--dur), filter var(--dur); } .wa-float:hover { filter: brightness(1.08); transform: translateY(-2px); } .wa-float-pulse { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(31,174,84,0.5); animation: waPulse 2.6s infinite; } @keyframes waPulse { 0%{ box-shadow: 0 0 0 0 rgba(31,174,84,0.45);} 70%{ box-shadow: 0 0 0 18px rgba(31,174,84,0);} 100%{ box-shadow: 0 0 0 0 rgba(31,174,84,0);} } @media (prefers-reduced-motion: reduce){ .wa-float-pulse { animation: none; } } /* ---------- Modal ---------- */ .modal-overlay[hidden] { display: none; } .modal-overlay { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(6,7,9,0.74); backdrop-filter: blur(6px); animation: fade .2s var(--ease-out); } .modal { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--border-accent); border-radius: var(--radius-xl); padding: clamp(26px,4vw,40px); box-shadow: var(--shadow-lg), var(--glow-md); animation: pop .28s var(--ease-spring); } .modal-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: var(--radius-md); background: transparent; border: 1px solid var(--hair); color: var(--fg-2); display: grid; place-items: center; transition: border-color var(--dur); } .modal-close:hover { border-color: var(--border-accent); color: var(--accent-bright); } .lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { display: flex; flex-direction: column; gap: 7px; } .field > span { font-size: 13px; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: 0.02em; } .field-full { grid-column: 1 / -1; } .input { width: 100%; padding: 13px 15px; font-family: inherit; font-size: 15px; color: var(--fg-1); background: var(--bg-4); border: 1px solid var(--hair-strong); border-radius: var(--radius-md); transition: border-color var(--dur), box-shadow var(--dur); } .input::placeholder { color: var(--fg-4); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .input-err { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, #C9402F 22%, transparent); } select.input { appearance: none; cursor: pointer; } textarea.input { resize: vertical; } @media (max-width: 520px){ .lead-form { grid-template-columns: 1fr; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } } /* ============================================================ TWEAKS PANEL (vanilla) ============================================================ */ .twk-panel { position: fixed; right: 16px; bottom: 16px; z-index: 2147483646; width: 256px; display: none; flex-direction: column; background: rgba(250,249,247,0.82); color: #1d1c1a; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); border: .5px solid rgba(255,255,255,.6); border-radius: 14px; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 12px 40px rgba(0,0,0,.28); font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, sans-serif; overflow: hidden; } .twk-panel.open { display: flex; } .twk-hd { display: flex; align-items: center; justify-content: space-between; padding: 11px 9px 11px 14px; cursor: move; user-select: none; } .twk-hd b { font-size: 12.5px; font-weight: 600; } .twk-x { appearance: none; border: 0; background: transparent; color: rgba(29,28,26,.55); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-size: 13px; } .twk-x:hover { background: rgba(0,0,0,.06); color: #1d1c1a; } .twk-body { padding: 2px 14px 16px; display: flex; flex-direction: column; gap: 12px; } .twk-sect { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(29,28,26,.45); padding-top: 6px; } .twk-sect:first-child { padding-top: 0; } .twk-lbl { font-weight: 500; color: rgba(29,28,26,.72); margin-bottom: 7px; } .twk-chips { display: flex; gap: 6px; } .twk-chip { position: relative; appearance: none; flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; border-radius: 7px; cursor: pointer; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06); transition: transform .12s var(--ease-out), box-shadow .12s; } .twk-chip:hover { transform: translateY(-1px); box-shadow: 0 0 0 .5px rgba(0,0,0,.18), 0 4px 10px rgba(0,0,0,.12); } .twk-chip[data-on="1"] { box-shadow: 0 0 0 2px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.15); } .twk-chip svg { position: absolute; top: 50%; left: 50%; width: 15px; height: 15px; transform: translate(-50%,-50%); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); } .twk-seg { position: relative; display: flex; padding: 2px; border-radius: 8px; background: rgba(0,0,0,.07); user-select: none; } .twk-seg-thumb { position: absolute; top: 2px; bottom: 2px; border-radius: 6px; background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(0,0,0,.12); transition: left .15s var(--ease-out); } .twk-seg button { appearance: none; position: relative; z-index: 1; flex: 1; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 500; min-height: 24px; border-radius: 6px; cursor: pointer; text-transform: capitalize; } .twk-seg button[data-on="1"] { color: #1d1c1a; } .twk-seg button:not([data-on="1"]) { color: rgba(29,28,26,.5); } /* ---------- icon sizing (group-level, since data-icon renders 24px svgs) ---------- */ .stars svg { width: 16px; height: 16px; } .trust-num svg { width: 15px; height: 15px; } .hero-chip .chip-ic svg { width: 18px; height: 18px; } .service-link svg { width: 16px; height: 16px; } .footer-line svg { width: 16px; height: 16px; } .social svg { width: 18px; height: 18px; } .diff-ic svg { width: 22px; height: 22px; } .ba-grip svg { width: 16px; height: 16px; } .wa-float svg { width: 27px; height: 27px; } .modal-close svg { width: 20px; height: 20px; } .nav-toggle svg { width: 22px; height: 22px; } .btn svg { width: 18px; height: 18px; } .card-icon svg { width: 26px; height: 26px; }