/* ============================================================ Human Match — landing styles Gold #E6B325 · Purple #8B5CF6 · deep cosmic background ============================================================ */ /* Self-hosted variable fonts. Replaces Google Fonts CDN which was falling back to system fonts on slow/blocked mobile networks. Simple format('woff2') has best browser support (iOS Safari 14+, Android Chrome 84+ recognize variable axes from a plain woff2). */ @font-face { font-family: 'Inter'; src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-latin-wght-normal.woff2') format('woff2'); font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Playfair Display'; src: url('/fonts/playfair-display-latin-wght-italic.woff2') format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; } :root { --gold: #E6B325; --gold-warm: #F5C24A; --gold-deep: #B8881A; --gold-soft: rgba(230, 179, 37, 0.12); --gold-line: rgba(230, 179, 37, 0.32); --purple: #8B5CF6; --purple-deep: #5C2091; --purple-soft: rgba(139, 92, 246, 0.18); --bg: #02040A; --bg-grade-1: #0E0820; --bg-grade-2: #050310; --surface: rgba(255, 255, 255, 0.04); --surface-strong: rgba(255, 255, 255, 0.07); --surface-deep: rgba(255, 255, 255, 0.025); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --text: #ffffff; --text-soft: rgba(255, 255, 255, 0.78); --text-muted: rgba(255, 255, 255, 0.52); --text-faint: rgba(255, 255, 255, 0.34); --header-h: 68px; --radius: 20px; --radius-lg: 28px; --radius-sm: 12px; --ease: cubic-bezier(.2, .8, .2, 1); --max: 1240px; } /* ── Base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; /* The ambient .glow / .particle layers are position:fixed and sit beyond the viewport edges by design. body's overflow-x:hidden can't clip them because a fixed box's containing block is the viewport, not the body — so some mobile browsers let the page drift a few px sideways and lose its centring. Clipping at the root reaches those fixed descendants. `hidden` is the universal fallback; `clip` (Safari 16+/Chrome 90+) does the same without turning into a scroll container. */ overflow-x: hidden; overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; animation-iteration-count: 1 !important; } } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; background: radial-gradient(ellipse at top, var(--bg-grade-1), var(--bg) 60%), var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; padding-top: var(--header-h); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } [id] { scroll-margin-top: calc(var(--header-h) + 24px); } img { max-width: 100%; display: block; } /* Accessible focus ring */ :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; } button:focus-visible, a:focus-visible { outline-offset: 4px; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 12px; background: var(--gold); color: #0A0716; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 13px; z-index: 99999; } .skip-link:focus { left: 12px; } /* ── Ambient glows ────────────────────────────────────────── */ .glow { position: fixed; border-radius: 50%; filter: blur(160px); z-index: -1; pointer-events: none; will-change: transform; } .glow-1 { top: -120px; right: -180px; width: 520px; height: 520px; background: rgba(230, 179, 37, 0.22); } .glow-2 { top: 35%; left: -260px; width: 600px; height: 600px; background: rgba(139, 92, 246, 0.18); } .glow-3 { top: 70%; right: -200px; width: 500px; height: 500px; background: rgba(92, 32, 145, 0.22); } .glow-4 { bottom: -200px; left: 10%; width: 700px; height: 700px; background: rgba(230, 179, 37, 0.10); } /* ── Header ───────────────────────────────────────────────── */ .site-header { height: var(--header-h); display: flex; align-items: center; justify-content: center; padding: 0 5%; position: fixed; top: 0; left: 0; right: 0; background: rgba(2, 4, 10, 0.72); backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px); z-index: 10000; border-bottom: 1px solid var(--border); transition: background .25s var(--ease), border-color .25s var(--ease); } .site-header.is-scrolled { background: rgba(2, 4, 10, 0.92); border-bottom-color: var(--border-strong); } .header-content { width: 100%; max-width: var(--max); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: inline-flex; align-items: center; text-decoration: none; color: white; font-weight: 800; flex-shrink: 0; letter-spacing: -0.01em; } /* Brand wordmark — the hexagon glyph is rendered as an inline SVG (no PNG, no background, no rounded square frame) so the two "a"s read as real letterforms borrowed from the app logo. Sized to match the x-height of the surrounding text. */ .brand-wordmark { display: inline-block; font-family: 'Inter', sans-serif; font-weight: 900; font-size: 19px; letter-spacing: -0.01em; color: white; line-height: 1; white-space: nowrap; } .brand-glyph { display: inline-block; height: 0.95em; width: 0.95em; /* SVG stroke colour comes from currentColor; we override the surrounding white text colour just for the glyph so the hexagon picks up the brand gold against either light or dark backgrounds. */ color: var(--gold); vertical-align: -0.18em; } .brand-wordmark--lg { font-size: 26px; } .nav-links { display: flex; gap: 4px; align-items: center; height: 100%; } .nav-item { color: var(--text-soft); text-decoration: none; font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; transition: color .2s var(--ease), background .2s var(--ease); font-weight: 700; padding: 8px 14px; border-radius: 10px; } .nav-item:hover { color: var(--gold); background: var(--gold-soft); } .header-tools { display: flex; align-items: center; gap: 12px; } .lang-toggle { display: inline-flex; gap: 4px; background: var(--surface); padding: 4px; border-radius: 10px; border: 1px solid var(--border); } .lang-toggle button { background: transparent; color: var(--text-muted); border: none; font-size: 11px; padding: 9px 12px; border-radius: 7px; cursor: pointer; font-weight: 700; letter-spacing: 1px; transition: background .15s var(--ease), color .15s var(--ease); font-family: inherit; } .lang-toggle button:hover { color: var(--text); } .lang-toggle button.active { background: var(--gold); color: #0A0716; } /* Mobile menu toggle */ .menu-toggle { display: none; background: var(--surface); border: 1px solid var(--border); color: var(--text); width: 44px; height: 44px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; transition: background .2s var(--ease), border-color .2s var(--ease); } .menu-toggle:hover { border-color: var(--gold-line); color: var(--gold); } .menu-toggle svg { width: 18px; height: 18px; } @media (max-width: 980px) { .nav-links { display: none; } .menu-toggle { display: inline-flex; } } /* Mobile drawer */ .mobile-drawer { position: fixed; inset: 0; background: linear-gradient(180deg, rgba(2,4,10,0.97), rgba(5,3,16,0.99)); backdrop-filter: blur(22px); z-index: 9999; display: none; flex-direction: column; padding: calc(var(--header-h) + 24px) 8% 40px; opacity: 0; transition: opacity .25s var(--ease); } .mobile-drawer.open { display: flex; opacity: 1; } .mobile-drawer a { color: var(--text); text-decoration: none; font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 800; padding: 18px 0; border-bottom: 1px solid var(--border); letter-spacing: -0.01em; transition: color .2s var(--ease), padding-left .2s var(--ease); } .mobile-drawer a:hover { color: var(--gold); padding-left: 8px; } .mobile-drawer .mobile-foot { margin-top: auto; color: var(--text-muted); font-size: 13px; display: flex; flex-direction: column; gap: 12px; } /* ── Reusable layout ──────────────────────────────────────── */ .module { padding: 100px 5%; max-width: var(--max); margin: 0 auto; width: 100%; position: relative; } @media (max-width: 600px) { .module { padding: 72px 5%; } } .section-header { text-align: center; margin-bottom: 56px; max-width: 760px; margin-left: auto; margin-right: auto; } .kicker { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 800; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; } .kicker::before { content: ''; width: 24px; height: 1px; background: var(--gold); } .section-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4.6vw, 52px); font-weight: 900; margin: 0 0 16px; letter-spacing: -0.022em; line-height: 1.08; } .section-header .grad, .hero h1 .grad, .cta-band h3 .grad, .finalcta-band h3 .grad { background: linear-gradient(120deg, var(--gold) 0%, var(--gold-warm) 35%, var(--purple) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; } .section-header p { color: var(--text-soft); font-size: 17px; margin: 0; font-weight: 300; line-height: 1.65; } /* ── Hero ─────────────────────────────────────────────────── */ .hero { position: relative; padding: 90px 5% 70px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; max-width: var(--max); margin: 0 auto; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: 48px; padding-top: 56px; text-align: center; } } .hero .eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); background: var(--gold-soft); padding: 7px 16px; border-radius: 999px; font-size: 11px; border: 1px solid var(--gold-line); font-weight: 800; letter-spacing: 1.6px; margin-bottom: 24px; text-transform: uppercase; } .hero .eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 12px var(--gold); } .hero h1 { font-family: 'Playfair Display', serif; /* Aligned with .section-header h2 so the hero reads at the same scale as the rest of the page (was clamp(40px, 6.4vw, 76px) — too dominant). */ font-size: clamp(32px, 4.6vw, 52px); margin: 0 0 18px; line-height: 1.08; font-weight: 900; letter-spacing: -0.022em; } .hero p.lede { max-width: 560px; /* Aligned with .section-header p (17px) for a consistent body size across all sections. */ font-size: 17px; color: var(--text-soft); margin: 0 0 32px; font-weight: 300; line-height: 1.65; } @media (max-width: 900px) { .hero p.lede { margin-left: auto; margin-right: auto; } } .btn-group { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } @media (max-width: 900px) { .btn-group { justify-content: center; } } .btn-download { transition: transform .2s var(--ease); display: inline-flex; align-items: center; } .btn-download:hover, .btn-download:focus-visible { transform: translateY(-2px); } .btn-download img { display: block; } /* Store badges — both buttons share the same outer box height; the Google badge asset ships with extra transparent padding baked into the PNG, so we slightly scale it up and clip with overflow:hidden to make its visible content (logo + text) read at the same scale as the Apple badge. Conservative 122% — bigger than 1:1 (where Google looked smaller) but well short of the original 138% that felt inflated. */ .store-badge { --badge-h: 44px; height: var(--badge-h); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 8px; } .store-badge img { display: block; height: 100%; width: auto; } .store-badge--google img { height: 122%; } .store-badge--sm { --badge-h: 38px; } /* Coming-soon state: dim the badge, block clicks, and pin a small status pill on the top-right corner. The wrapper exists so the pill isn't clipped by the badge's overflow:hidden. */ .store-badge-wrap { position: relative; display: inline-flex; } .store-badge-wrap.is-soon .store-badge { pointer-events: none; cursor: default; filter: grayscale(0.4); opacity: 0.62; } .soon-flag { position: absolute; top: -9px; right: -10px; z-index: 2; pointer-events: none; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #1a1206; background: linear-gradient(135deg, var(--gold-warm), var(--gold)); padding: 3px 9px; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(230, 179, 37, 0.5); white-space: nowrap; } .store-badge-wrap--sm { align-self: flex-start; } .store-badge-wrap--sm .soon-flag { top: -8px; right: -8px; font-size: 9px; padding: 2px 7px; } @media (max-width: 600px) { .store-badge-wrap--sm { align-self: center; } } .hero-meta { display: flex; gap: 28px; margin-top: 40px; flex-wrap: wrap; color: var(--text-muted); font-size: 12.5px; } @media (max-width: 900px) { .hero-meta { justify-content: center; } } .hero-meta span { display: inline-flex; align-items: center; gap: 7px; } .hero-meta span::before { content: ''; width: 5px; height: 5px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 8px rgba(230,179,37,0.6); } .hero-visual { position: relative; display: flex; justify-content: center; } .hero-visual::before { content: ''; position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(139, 92, 246, 0.32), transparent 60%); filter: blur(50px); } .hero-visual::after { /* Hexagonal frame nod to the app's hexagon */ content: ''; position: absolute; width: 460px; height: 460px; border: 1px solid var(--gold-line); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); opacity: 0.4; animation: hex-rotate 60s linear infinite; pointer-events: none; } @media (max-width: 600px) { .hero-visual::after { width: 360px; height: 360px; } } @keyframes hex-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .hero-visual img { max-width: 100%; width: 380px; border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px var(--border); position: relative; z-index: 1; } /* ── Section divider (subtle constellation line) ──────────── */ .divider { max-width: var(--max); margin: 0 auto; padding: 0 5%; } .divider svg { width: 100%; height: 1px; display: block; opacity: 0.5; } /* ── How it works (timeline) ──────────────────────────────── */ .how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; } /* Connector linking the three step nodes. Endpoints sit at the outer node centres (gap is 24px, so each centre is 16.667% - gap/3 in). */ .how-grid::before { content: ''; position: absolute; top: 62px; left: calc(16.667% - 8px); right: calc(16.667% - 8px); height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, var(--gold-line), var(--purple-soft) 50%, var(--gold-line)); z-index: 0; } @media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; gap: 18px; } .how-grid::before { display: none; } } .how-step { background: linear-gradient(160deg, var(--surface), var(--surface-deep)); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; position: relative; text-align: center; transition: transform .3s var(--ease), border-color .3s var(--ease); overflow: hidden; } .how-step::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top, var(--gold-soft), transparent 62%); opacity: 0; transition: opacity .3s var(--ease); } .how-step:hover { transform: translateY(-4px); border-color: var(--gold-line); } .how-step:hover::before { opacity: 1; } .how-step > * { position: relative; z-index: 1; } .step-node { width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--gold-warm), var(--purple)); box-shadow: 0 8px 26px rgba(139, 92, 246, 0.28), 0 0 0 6px rgba(230, 179, 37, 0.07); } .how-step .step-num { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 900; color: var(--bg); line-height: 1; letter-spacing: -0.01em; } .how-step h3 { font-family: 'Playfair Display', serif; font-size: 22px; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.015em; } .how-step p { color: var(--text-soft); font-size: 14.5px; line-height: 1.65; margin: 0 auto; font-weight: 300; max-width: 32ch; } /* ── Why Human Match (comparative) ────────────────────────── */ .compare-wrap { background: linear-gradient(160deg, rgba(230, 179, 37, 0.04) 0%, rgba(139, 92, 246, 0.04) 100%), var(--surface-deep); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 8px; overflow: hidden; } .compare-table { width: 100%; border-collapse: collapse; color: var(--text); } .compare-table thead th { padding: 24px 22px 22px; text-align: left; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.8px; color: var(--text-muted); border-bottom: 1px solid var(--border-strong); } .compare-table thead th.us { color: var(--gold); background: linear-gradient(180deg, var(--gold-soft), transparent); border-radius: var(--radius) var(--radius) 0 0; position: relative; } .compare-table thead th.us::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--gold), var(--gold-warm)); border-radius: 2px; } .compare-table tbody tr { border-bottom: 1px solid var(--border); } .compare-table tbody tr:last-child { border-bottom: none; } .compare-table td { padding: 22px; font-size: 14.5px; color: var(--text-soft); line-height: 1.55; vertical-align: top; } .compare-table td.axis { color: var(--text); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; width: 22%; } .compare-table td.us { color: var(--text); background: linear-gradient(90deg, rgba(230, 179, 37, 0.06), rgba(230, 179, 37, 0.02)); font-weight: 500; position: relative; } .compare-table td.us::before { content: '✦'; color: var(--gold); margin-right: 10px; font-size: 12px; } .compare-table tbody tr:last-child td.us { border-radius: 0 0 var(--radius) var(--radius); } /* Mobile compare: switch to cards */ @media (max-width: 760px) { .compare-table, .compare-table tbody, .compare-table thead, .compare-table tr, .compare-table td, .compare-table th { display: block; } .compare-table thead { display: none; } .compare-table tbody tr { margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; background: var(--surface-deep); } .compare-table td { padding: 14px 18px; border-bottom: 1px dashed var(--border); } .compare-table td:last-child { border-bottom: none; } .compare-table td.axis { width: auto; color: var(--gold); font-size: 11px; letter-spacing: 1.6px; padding-bottom: 4px; } .compare-table td.us { border-radius: 0; background: linear-gradient(90deg, rgba(230, 179, 37, 0.10), rgba(230, 179, 37, 0.02)); } .compare-table td.us::after { content: ' — Human Match'; color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-left: 6px; } .compare-table td.them::after { content: ' — apps tradicionais'; color: var(--text-faint); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-left: 6px; } body[data-lang="en"] .compare-table td.us::after { content: ' — Human Match'; } body[data-lang="en"] .compare-table td.them::after { content: ' — traditional apps'; } } /* ── DNA Categories tabs ──────────────────────────────────── */ .cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; } .cat-tab { background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); padding: 10px 18px; font-size: 11px; border-radius: 999px; cursor: pointer; transition: all .2s var(--ease); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; font-family: inherit; } .cat-tab:hover { color: var(--gold); border-color: var(--gold-line); } .cat-tab.active { background: linear-gradient(135deg, var(--gold), var(--gold-warm)); color: #0A0716; border-color: transparent; box-shadow: 0 6px 18px rgba(230, 179, 37, 0.3); } .cat-panel { display: none; } .cat-panel.active { display: block; animation: fadeUp .35s var(--ease); } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .cat-panel-intro { text-align: center; color: var(--text-soft); font-size: 15.5px; max-width: 720px; margin: 0 auto 36px; font-weight: 300; line-height: 1.65; } .area-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .area-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 22px; cursor: pointer; transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease); position: relative; text-align: left; font-family: inherit; color: inherit; width: 100%; } .area-card:hover { border-color: var(--gold-line); background: var(--surface-strong); } .area-card:focus-visible { border-color: var(--gold); } .area-card::after { content: '↗'; position: absolute; top: 18px; right: 20px; color: var(--text-faint); font-size: 18px; transition: color .2s var(--ease), transform .2s var(--ease); } .area-card:hover::after { color: var(--gold); transform: translate(2px, -2px); } .area-card .icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); margin-bottom: 14px; font-size: 18px; border: 1px solid var(--gold-line); } .area-card.purple .icon { background: var(--purple-soft); color: var(--purple); border-color: rgba(139, 92, 246, 0.32); } .area-card h4 { font-family: 'Playfair Display', serif; font-size: 18px; margin: 0 0 8px; font-weight: 800; letter-spacing: -0.015em; } .area-card p { color: var(--text-soft); font-size: 13px; line-height: 1.6; margin: 0; font-weight: 400; } /* ── Modal ────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(2, 4, 10, 0.82); backdrop-filter: blur(8px); display: none; z-index: 20000; align-items: center; justify-content: center; padding: 5%; } .modal-backdrop.open { display: flex; animation: fadeIn .25s var(--ease); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .modal { background: linear-gradient(160deg, #100A22 0%, #07050F 100%); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); max-width: 640px; width: 100%; max-height: 84vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); animation: modalIn .3s var(--ease); } @keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .modal-head { padding: 28px 28px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .modal-head h3 { font-family: 'Playfair Display', serif; font-size: 26px; margin: 0; font-weight: 900; letter-spacing: -0.02em; } .modal-head .modal-kicker { display: block; color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; } .modal-close { background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .2s var(--ease), color .2s var(--ease); } .modal-close:hover { background: var(--gold); color: #0A0716; } .modal-body { padding: 24px 28px 28px; overflow-y: auto; color: var(--text-soft); font-size: 14.5px; line-height: 1.7; } .modal-body p { margin: 0 0 14px; } .modal-body .example { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold); padding: 18px 20px; border-radius: 12px; margin-top: 18px; } .modal-body .example .ex-kicker { color: var(--gold); font-size: 10px; letter-spacing: 1.6px; font-weight: 800; text-transform: uppercase; margin-bottom: 8px; } .modal-body .example p { margin: 0; color: var(--text); font-size: 13.5px; } /* ── Card grid (community + privacy) ──────────────────────── */ .card-grid { display: grid; gap: 20px; } .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 980px) { .card-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .card-grid.cols-3 { grid-template-columns: 1fr; gap: 14px; } } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); backdrop-filter: blur(14px); } .card:hover { border-color: var(--gold-line); background: var(--surface-strong); } .card .icon { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold-soft); color: var(--gold); margin-bottom: 18px; font-size: 22px; border: 1px solid var(--gold-line); } .card.purple .icon { background: var(--purple-soft); color: var(--purple); border-color: rgba(139, 92, 246, 0.32); } .card h3 { font-family: 'Playfair Display', serif; font-size: 22px; margin: 0 0 12px; font-weight: 800; letter-spacing: -0.015em; } .card p { color: var(--text-soft); font-size: 14.5px; line-height: 1.65; margin: 0; font-weight: 400; } .card .meta { display: block; margin-top: 16px; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; } /* ── CTA band (final) ─────────────────────────────────────── */ .finalcta-band { margin: 0 auto; max-width: var(--max); background: radial-gradient(circle at 18% 30%, rgba(139, 92, 246, 0.28), transparent 50%), radial-gradient(circle at 82% 70%, rgba(230, 179, 37, 0.20), transparent 50%), linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 70px 40px; text-align: center; position: relative; overflow: hidden; } .finalcta-band::before { /* subtle hex stroke */ content: ''; position: absolute; width: 600px; height: 600px; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid var(--gold-line); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); opacity: 0.15; pointer-events: none; } .finalcta-band > * { position: relative; } .finalcta-band h3 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.8vw, 42px); margin: 0 0 16px; font-weight: 900; letter-spacing: -0.022em; line-height: 1.1; } .finalcta-band p { color: var(--text-soft); font-size: 17px; margin: 0 auto 32px; max-width: 580px; font-weight: 300; line-height: 1.6; } .finalcta-band .btn-group { justify-content: center; } /* ── Footer ───────────────────────────────────────────────── */ footer { margin-top: 100px; padding: 80px 5% 30px; background: linear-gradient(180deg, rgba(5, 2, 17, 0) 0%, #000 100%); border-top: 1px solid var(--border); color: var(--text-muted); } .footer-container { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 48px; align-items: start; } .footer-brand .footer-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: white; font-weight: 800; font-size: 19px; margin-bottom: 22px; } .footer-brand .footer-logo img { height: 40px; border-radius: 10px; } .footer-brand p { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); max-width: 360px; font-weight: 300; } .footer-column h4 { color: #fff; font-size: 13px; margin: 0 0 22px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.6px; } .footer-column ul { list-style: none; padding: 0; margin: 0; } .footer-column ul li { margin-bottom: 12px; } .footer-column ul li a { color: var(--text-muted); text-decoration: none; font-size: 14px; transition: color .2s var(--ease), transform .2s var(--ease); display: inline-block; } .footer-column ul li a:hover { color: var(--gold); transform: translateX(4px); } .footer-badges { display: flex; flex-direction: column; gap: 12px; } .footer-bottom { max-width: var(--max); margin: 60px auto 0; padding-top: 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-faint); } .social-links { display: flex; gap: 16px; } .social-links a { color: var(--text-muted); text-decoration: none; transition: color .2s var(--ease); font-size: 13px; } .social-links a:hover { color: var(--gold); } @media (max-width: 1024px) { .footer-container { grid-template-columns: 1fr 1fr; gap: 40px; } .footer-brand { grid-column: span 2; text-align: center; } .footer-brand .footer-logo { justify-content: center; } .footer-brand p { margin: 0 auto; } .footer-badges { align-items: center; } } @media (max-width: 600px) { footer { padding: 60px 6% 30px; } .footer-container { grid-template-columns: 1fr; text-align: center; gap: 32px; } .footer-brand { grid-column: span 1; } .footer-bottom { flex-direction: column; gap: 12px; text-align: center; } .footer-column ul li a:hover { transform: none; } } /* ── Privacy CTA link (single line) ───────────────────────── */ .privacy-readmore { text-align: center; margin-top: 32px; } .privacy-readmore a { color: var(--gold); text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--gold-line); transition: background .2s var(--ease), transform .2s var(--ease); display: inline-block; } .privacy-readmore a:hover { background: var(--gold-soft); transform: translateY(-2px); } /* ── Sibling i18n: hide elements with the non-current language ── The /categories/ pages mark every visible string with two sibling elements — <… data-lang="pt"> and <… data-lang="en"> — and rely on app.js to flip `hidden`. This CSS rule does the same hiding via the body's data-lang, so even if app.js fails to load or hasn't run yet, only one language is visible. The `:not(body)` exclusion stops the rule from hiding the `` element itself. */ body[data-lang="pt"] [data-lang]:not([data-lang="pt"]):not(body) { display: none !important; } body[data-lang="en"] [data-lang]:not([data-lang="en"]):not(body) { display: none !important; } body[data-lang="es"] [data-lang]:not([data-lang="es"]):not(body) { display: none !important; } body[data-lang="fr"] [data-lang]:not([data-lang="fr"]):not(body) { display: none !important; } /* ── Reveal-on-scroll ─────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } /* ============================================================ Categories pages — /categories/ hub + /categories// ============================================================ */ /* ── Hub ──────────────────────────────────────────────────── */ .page-categories-hub .hub-hero { padding-top: 96px; } .page-categories-hub .hub-cards { margin-top: 24px; } @media (max-width: 900px) { .page-categories-hub .hub-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .page-categories-hub .hub-cards { grid-template-columns: 1fr; } } .cat-hub-card { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); cursor: pointer; } .cat-hub-card:hover { border-color: var(--gold-line); background: var(--surface-strong); } .cat-hub-card .icon { width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-size: 26px; background: linear-gradient(135deg, var(--gold-soft), transparent); border: 1px solid var(--gold-line); color: var(--gold); } .cat-hub-card h3 { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 800; margin: 4px 0 0; letter-spacing: -0.01em; } .cat-hub-card p { color: var(--text-soft); font-size: 15px; font-weight: 300; margin: 0; line-height: 1.6; } .cat-hub-card .meta { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; margin-top: auto; padding-top: 12px; } /* ── Category page hero ───────────────────────────────────── */ .page-category .page-category-hero { padding-top: 96px; } .page-category .page-category-hero .section-header h1 { font-family: 'Playfair Display', serif; font-size: clamp(36px, 5.2vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: -0.022em; margin: 0 0 16px; } /* TOC under the hero */ .area-toc { max-width: 940px; margin: 32px auto 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .area-toc-item { display: inline-flex; align-items: center; padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-soft); text-decoration: none; font-size: 13px; font-weight: 600; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .area-toc-item:hover { color: var(--gold); border-color: var(--gold-line); background: var(--gold-soft); } /* ── Area article ─────────────────────────────────────────── */ .page-category-areas { display: flex; flex-direction: column; gap: 56px; padding-top: 24px; } .area-article { scroll-margin-top: calc(var(--header-h) + 24px); padding: 40px 36px; background: var(--surface-deep); border: 1px solid var(--border); border-radius: var(--radius-lg); max-width: 940px; margin: 0 auto; width: 100%; } @media (max-width: 700px) { .area-article { padding: 28px 22px; } } .area-article-head { border-bottom: 1px solid var(--border); padding-bottom: 20px; margin-bottom: 28px; } .area-article-head h3 { font-family: 'Playfair Display', serif; font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 8px; } .area-article-meta { margin: 0; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; } .area-article-section { margin-top: 28px; } .area-article-section:first-of-type { margin-top: 0; } .area-article-section h4 { font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 800; letter-spacing: 2.4px; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; } .area-article-section p { color: var(--text-soft); line-height: 1.7; margin: 0 0 12px; font-size: 16px; font-weight: 300; } .area-article-section p:last-child { margin-bottom: 0; } .area-article-section strong { color: var(--text); font-weight: 600; } .area-article-section em { color: var(--text); font-style: italic; } .area-outcome-list, .area-pair-list { margin: 0; padding: 0; list-style: none; } .area-outcome-list li { padding: 10px 0; border-bottom: 1px dashed var(--border); color: var(--text-soft); line-height: 1.6; font-size: 15px; font-weight: 300; } .area-outcome-list li:last-child { border-bottom: 0; } .area-outcome-list li strong { color: var(--text); font-weight: 600; margin-right: 6px; } .area-pair-list { display: grid; grid-template-columns: minmax(110px, 0.4fr) 1fr; gap: 6px 18px; } .area-pair-list dt { color: var(--text); font-weight: 700; font-size: 14px; padding: 6px 0; } .area-pair-list dd { margin: 0; color: var(--text-soft); padding: 6px 0; font-size: 15px; font-weight: 300; border-bottom: 1px dashed var(--border); } .area-pair-list dt + dd { border-bottom: 1px dashed var(--border); } .area-pair-list dt:last-of-type, .area-pair-list dd:last-of-type { border-bottom: 0; } .area-article--placeholder { background: transparent; border-style: dashed; text-align: center; color: var(--text-muted); } .area-article--placeholder .area-article-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .area-article--placeholder .area-article-meta { color: var(--text-muted); letter-spacing: 1.2px; } /* ── Category page footer block ───────────────────────────── */ .page-category-foot { padding-top: 32px; } .page-category-foot .btn { margin-top: 8px; } /* Generic button used on the category pages */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 999px; font-weight: 700; font-size: 14px; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; border: 1px solid transparent; transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); cursor: pointer; } .btn-primary { background: var(--gold); color: #0A0716; } .btn-primary:hover { transform: translateY(-2px); background: var(--gold-warm); } /* ── Breadcrumbs (categories pages) ───────────────────────── */ .breadcrumbs { max-width: var(--max); margin: 0 auto; padding: 24px 5% 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); } .breadcrumbs a { color: var(--text-soft); text-decoration: none; transition: color .2s var(--ease); } .breadcrumbs a:hover { color: var(--gold); } .breadcrumb-sep { color: var(--text-faint); margin: 0 4px; } .breadcrumb-current { color: var(--gold); font-weight: 600; } /* ── Active nav-item on category pages ────────────────────── */ .nav-current { color: var(--gold) !important; } /* ── Homepage category cards (link to /categories//) ── */ .cat-home-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; } .cat-home-card:hover .meta { color: var(--gold); } .cat-home-card .meta { transition: color .2s var(--ease); } .home-cat-grid { margin-top: 12px; } /* ============================================================ Premium polish — micro-animations, depth & hover effects ============================================================ */ @property --shimmer-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* 3D tilt + lift + cursor-follow inner glow on all interactive cards. The transform reads three CSS variables that JS updates on mousemove (--tilt-x, --tilt-y) and that CSS itself updates on :hover (--lift). Stacking both ways means hover lift kicks in even without JS, and the tilt is layered on top when the cursor moves over the card. */ .card, .cat-home-card, .cat-hub-card, .area-card { --tilt-x: 0deg; --tilt-y: 0deg; --lift: 0px; --cursor-x: 50%; --cursor-y: 50%; transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(var(--lift)); transform-style: preserve-3d; will-change: transform; position: relative; overflow: hidden; isolation: isolate; } .card:hover, .cat-home-card:hover, .cat-hub-card:hover, .area-card:hover { --lift: -6px; } /* Cursor-follow inner halo (radial gradient anchored to mouse position). ::before is z-index 0 so children sit above it via the rule further down. */ .card::before, .cat-home-card::before, .cat-hub-card::before, .area-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( 320px circle at var(--cursor-x) var(--cursor-y), rgba(230, 179, 37, 0.12), rgba(139, 92, 246, 0.06) 35%, transparent 60% ); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 0; } .card:hover::before, .cat-home-card:hover::before, .cat-hub-card:hover::before, .area-card:hover::before { opacity: 1; } .card > *, .cat-home-card > *, .cat-hub-card > *, .area-card > * { position: relative; z-index: 1; } /* Animated conic-gradient border that rotates on hover — adds a quiet premium "shimmer" around the category cards specifically. */ .cat-home-card::after, .cat-hub-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: conic-gradient( from var(--shimmer-angle), transparent 0deg, rgba(230, 179, 37, 0.55) 60deg, rgba(139, 92, 246, 0.45) 130deg, transparent 200deg, transparent 360deg ); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; z-index: 2; } .cat-home-card:hover::after, .cat-hub-card:hover::after { opacity: 1; animation: shimmer-rotate 4s linear infinite; } @keyframes shimmer-rotate { to { --shimmer-angle: 360deg; } } /* Card icon: subtle scale + rotate + dual-tone gradient on hover. */ .cat-hub-card .icon, .cat-home-card .icon, .area-card .icon { transition: transform .45s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease); } .cat-hub-card:hover .icon, .cat-home-card:hover .icon { transform: scale(1.08) rotate(-4deg); background: linear-gradient(135deg, var(--gold-soft), rgba(139, 92, 246, 0.18)); box-shadow: 0 6px 20px rgba(230, 179, 37, 0.18); } /* Animated brand gradient on title spans (.grad). A long, slow pan that never reads as "moving" but adds life when the eye catches it. */ .grad { background-size: 220% 100%; animation: grad-pan 11s ease-in-out infinite; } @keyframes grad-pan { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Floating ambient particles — gold motes drifting upward. Spawned by app.js (skipped under prefers-reduced-motion). */ .particle-field { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; } .particle { position: absolute; left: var(--x, 50%); bottom: -12px; width: var(--size, 2px); height: var(--size, 2px); background: var(--gold); border-radius: 50%; opacity: 0; box-shadow: 0 0 8px rgba(230, 179, 37, 0.55); animation: particle-rise var(--duration, 22s) linear var(--delay, 0s) infinite; } @keyframes particle-rise { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 14% { opacity: 0.55; } 86% { opacity: 0.2; } 100% { transform: translate3d(50px, -112vh, 0); opacity: 0; } } /* Staggered child reveal — drop `.reveal-stagger` on any container and its children appear in sequence the moment the container scrolls into view. Works alongside (or instead of) the per-element .reveal. */ .reveal-stagger > * { opacity: 0; transform: translateY(20px); } .reveal-stagger.is-visible > * { animation: stagger-in .65s var(--ease) forwards; } .reveal-stagger.is-visible > *:nth-child(1) { animation-delay: 0ms; } .reveal-stagger.is-visible > *:nth-child(2) { animation-delay: 70ms; } .reveal-stagger.is-visible > *:nth-child(3) { animation-delay: 140ms; } .reveal-stagger.is-visible > *:nth-child(4) { animation-delay: 210ms; } .reveal-stagger.is-visible > *:nth-child(5) { animation-delay: 280ms; } .reveal-stagger.is-visible > *:nth-child(6) { animation-delay: 350ms; } .reveal-stagger.is-visible > *:nth-child(7) { animation-delay: 420ms; } .reveal-stagger.is-visible > *:nth-child(8) { animation-delay: 490ms; } @keyframes stagger-in { to { opacity: 1; transform: translateY(0); } } /* Section module / area-article: gentle entrance from below as they enter the viewport, replacing the abrupt CSS-only fade. */ .module { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .module.is-in-view { opacity: 1; transform: translateY(0); } .area-article { opacity: 0; transform: translateY(28px) scale(0.99); transition: opacity .75s var(--ease), transform .75s var(--ease); } .area-article.is-in-view { opacity: 1; transform: translateY(0) scale(1); } /* Hero entrance (homepage only). Runs once on load. Hidden under reduced motion via the media query at the bottom. */ .hero { animation: hero-rise 1s var(--ease) .1s both; } @keyframes hero-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* Sticky TOC with active state on category pages. The TOC rides with scroll so the user always knows which area they're in; the active pill mirrors the section currently in view (driven by app.js ScrollSpy). */ .page-category .area-toc { position: sticky; top: calc(var(--header-h) + 10px); z-index: 50; padding: 10px 12px; background: rgba(2, 4, 10, 0.78); backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 30px rgba(0, 0, 0, 0.18); margin-top: 36px; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); } .page-category .area-toc:hover { border-color: var(--gold-line); box-shadow: 0 8px 32px rgba(230, 179, 37, 0.10); } .area-toc-item.toc-active { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 4px 14px rgba(230, 179, 37, 0.20); } /* Subtle eyebrow pulse on hero (the small "Matchmaking de essência" pill). */ .hero .eyebrow { position: relative; overflow: hidden; } .hero .eyebrow::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 40%, rgba(230, 179, 37, 0.18) 50%, transparent 60%); transform: translateX(-100%); animation: eyebrow-sheen 5s ease-in-out 1s infinite; pointer-events: none; } @keyframes eyebrow-sheen { 0%, 25%, 100% { transform: translateX(-100%); } 50%, 65% { transform: translateX(100%); } } /* Smooth scroll anchor compensation already lives on [id]; nothing to add. */ /* Respect prefers-reduced-motion: shut down all the optional motion. */ @media (prefers-reduced-motion: reduce) { .card, .cat-home-card, .cat-hub-card, .area-card { transform: none !important; } .card::before, .cat-home-card::before, .cat-hub-card::before, .area-card::before, .cat-home-card::after, .cat-hub-card::after, .hero .eyebrow::before { display: none; } .module, .area-article, .hero { opacity: 1; transform: none; animation: none; } .reveal-stagger > * { opacity: 1; transform: none; animation: none; } .particle, .grad, .cat-hub-card .icon, .cat-home-card .icon { animation: none !important; transform: none !important; } } /* ── Footer (lightweight, used on /categories/ pages) ─────── */ .site-footer { padding: 40px 5%; border-top: 1px solid var(--border); margin-top: 80px; background: rgba(0, 0, 0, 0.2); } .site-footer .footer-content { max-width: var(--max); margin: 0 auto; text-align: center; color: var(--text-muted); font-size: 13px; } .site-footer p { margin: 0; } /* ============================================================ Waitlist form + section + Instagram icon ============================================================ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Honeypot — must remain visually hidden but accessible to bots */ .waitlist-honey { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ── Hero inline form ─────────────────────────────────────── */ .hero-waitlist { margin: 20px 0 8px; max-width: 540px; } .hero-waitlist__note { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; letter-spacing: 0.01em; } /* ── Form shared shell ────────────────────────────────────── */ .waitlist-form { display: block; } .waitlist-form__row { display: flex; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px; transition: border-color .2s var(--ease), background .2s var(--ease); } .waitlist-form__row:focus-within { border-color: var(--gold-line); background: var(--surface-strong); } .waitlist-input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); font-family: inherit; font-size: 15px; padding: 10px 16px; outline: none; } .waitlist-input::placeholder { color: var(--text-faint); } .waitlist-submit { flex-shrink: 0; background: var(--gold); color: #0A0716; border: 0; border-radius: 999px; padding: 10px 22px; /* Keep the primary CTA at the 44px mobile tap-target standard (Apple HIG / WCAG 2.5.5) even in the compact hero variant. */ min-height: 44px; font-family: inherit; font-weight: 800; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: transform .15s var(--ease), background .2s var(--ease), opacity .2s var(--ease); } .waitlist-submit:hover:not(:disabled) { background: var(--gold-warm); transform: translateY(-1px); } .waitlist-submit:disabled { opacity: 0.55; cursor: progress; } /* Status line under the form */ .waitlist-status { margin: 10px 4px 0; font-size: 13px; min-height: 18px; line-height: 1.4; color: var(--text-muted); } .waitlist-status.is-success { color: var(--gold-warm); } .waitlist-status.is-error { color: #FF7A7A; } /* ── Section variant (block layout) ───────────────────────── */ .waitlist-band { max-width: var(--max); margin: 0 auto; padding: 56px 5%; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; background: linear-gradient(135deg, rgba(230, 179, 37, 0.06), rgba(139, 92, 246, 0.08)); border: 1px solid var(--gold-line); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .waitlist-band::before { content: ''; position: absolute; top: -120px; right: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(230, 179, 37, 0.18), transparent 70%); filter: blur(40px); pointer-events: none; } .waitlist-band::after { content: ''; position: absolute; bottom: -120px; left: -120px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(201, 122, 224, 0.18), transparent 70%); filter: blur(40px); pointer-events: none; } .waitlist-band__content, .waitlist-band__form { position: relative; z-index: 1; } .waitlist-band__content .kicker { margin-bottom: 10px; } .waitlist-band__content h2 { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 40px); font-weight: 800; line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.01em; } .waitlist-band__content > p { font-size: 16px; line-height: 1.6; color: var(--text-soft); margin: 0 0 20px; max-width: 460px; } .waitlist-perks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .waitlist-perks li { position: relative; padding-left: 26px; font-size: 14px; color: var(--text-soft); line-height: 1.45; } .waitlist-perks li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border: 2px solid var(--gold); border-radius: 4px; transform: rotate(45deg); } .waitlist-form--block { background: rgba(2, 4, 10, 0.45); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .waitlist-label { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-bottom: 10px; } .waitlist-input--lg { display: block; width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 15px; margin-bottom: 14px; transition: border-color .2s var(--ease), background .2s var(--ease); } .waitlist-input--lg:focus { border-color: var(--gold-line); background: rgba(255, 255, 255, 0.06); } .waitlist-submit--lg { width: 100%; padding: 14px 24px; font-size: 13px; } .waitlist-consent { margin: 14px 4px 0; font-size: 11px; color: var(--text-faint); line-height: 1.5; } .waitlist-consent a { color: var(--text-muted); text-decoration: underline; } .waitlist-consent a:hover { color: var(--gold); } .waitlist-social { margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--text-muted); flex-wrap: wrap; } @media (max-width: 900px) { .waitlist-band { grid-template-columns: 1fr; gap: 32px; padding: 44px 5%; } .waitlist-band__content > p { max-width: none; } } @media (max-width: 520px) { .waitlist-form__row { flex-direction: column; border-radius: 18px; padding: 10px; gap: 10px; } .waitlist-input { padding: 12px 14px; } .waitlist-submit { width: 100%; padding: 12px 22px; } .waitlist-form--block { padding: 22px; } } /* ── Instagram icon ────────────────────────────────────────── */ .ig-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--text-muted); border: 1px solid var(--border); transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease); text-decoration: none; } .ig-icon svg { width: 18px; height: 18px; display: block; } .ig-icon:hover { color: var(--gold); border-color: var(--gold-line); background: var(--gold-soft); transform: translateY(-1px); } .ig-icon--lg { width: 44px; height: 44px; } .ig-icon--lg svg { width: 22px; height: 22px; } .social-links { align-items: center; }