/* ============================================================ Agapone — landing styles Gold #E6B325 / #CA980B · Cosmic #3A5AA8 · 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; } /* Poppins 600 — the Agapone wordmark face (matches the app logo). */ @font-face { font-family: 'Poppins'; src: url('/fonts/poppins-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; 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); --cream: #FAF7F2; /* off-white — wordmark "one" / on-dark text */ --purple: #3A5AA8; /* cosmic blue — de-purpled (Agapone rebrand) */ --purple-deep: #16224E; --purple-soft: rgba(58, 90, 168, 0.18); --bg: #070D20; /* cosmic navy base — matched to app splash dark1 */ --bg-grade-1: #0C1430; /* cosmic top — matched to app splash dark0 */ --bg-grade-2: #0A1330; /* cosmic mid */ --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; } /* ── Light theme — applied via html[data-theme="light"]. A tiny inline script in sets data-theme from the saved choice or the OS preference (prefers-color-scheme) before paint; the header sun/moon button flips it. Scoping to the [data-theme] attribute gives these rules higher specificity than the bare element rules further down, so they win regardless of source order. Dark is the :root default. ── */ :root[data-theme="light"] { --gold: #B8870A; /* darker gold for contrast on cream */ --gold-warm: #CA980B; --gold-deep: #8C6708; --gold-soft: rgba(184, 135, 10, 0.12); --gold-line: rgba(184, 135, 10, 0.30); --purple: #3A5AA8; /* cosmic accent (de-purpled) */ --purple-deep: #16224E; --purple-soft: rgba(22, 34, 78, 0.12); --bg: #FAF7F2; /* cream */ --bg-grade-1: #FFFFFF; --bg-grade-2: #F1E9DF; --surface: rgba(22, 34, 78, 0.035); --surface-strong: rgba(22, 34, 78, 0.06); --surface-deep: rgba(22, 34, 78, 0.018); --border: rgba(22, 34, 78, 0.12); --border-strong: rgba(22, 34, 78, 0.20); --text: #16151C; --text-soft: rgba(22, 21, 28, 0.74); --text-muted: rgba(22, 21, 28, 0.56); --text-faint: rgba(22, 21, 28, 0.40); --cream: #16224E; /* wordmark "one" → cosmic on light (brand spec) */ } /* Ambient glows — soften so the cream stays clean. */ [data-theme="light"] .glow-1 { background: rgba(202, 152, 11, 0.16); } [data-theme="light"] .glow-2 { background: rgba(58, 90, 168, 0.12); } [data-theme="light"] .glow-3 { background: rgba(22, 34, 78, 0.10); } [data-theme="light"] .glow-4 { background: rgba(202, 152, 11, 0.08); } /* Header + sticky surfaces (were translucent dark). */ [data-theme="light"] .site-header { background: rgba(250, 247, 242, 0.85); border-bottom-color: rgba(22, 34, 78, 0.10); } [data-theme="light"] .site-header.is-scrolled { background: rgba(250, 247, 242, 0.94); border-bottom-color: rgba(22, 34, 78, 0.16); box-shadow: 0 6px 24px rgba(22, 34, 78, 0.06); } [data-theme="light"] .logo { color: var(--text); } [data-theme="light"] .mobile-drawer { background: linear-gradient(180deg, rgba(250, 247, 242, 0.98), rgba(241, 233, 223, 0.99)); } [data-theme="light"] .page-category .area-toc { background: rgba(250, 247, 242, 0.85); } /* Modal. */ [data-theme="light"] .modal-backdrop { background: rgba(22, 34, 78, 0.35); } [data-theme="light"] .modal { background: linear-gradient(160deg, #FFFFFF 0%, #F4EEE6 100%); } /* Footer — a white→cream surface so it separates from the page. */ [data-theme="light"] footer { background: linear-gradient(180deg, #FFFFFF 0%, #F1E9DF 100%); border-top-color: rgba(22, 34, 78, 0.10); } [data-theme="light"] .footer-brand .footer-logo { color: var(--text); } [data-theme="light"] .footer-column h4 { color: var(--text); } /* Surfaces that hardcoded white-on-dark. */ [data-theme="light"] .finalcta-band { background: radial-gradient(circle at 18% 30%, rgba(58, 90, 168, 0.14), transparent 50%), radial-gradient(circle at 82% 70%, rgba(202, 152, 11, 0.16), transparent 50%), linear-gradient(180deg, rgba(22, 34, 78, 0.04), rgba(22, 34, 78, 0.015)); } [data-theme="light"] .waitlist-form--block { background: rgba(255, 255, 255, 0.7); } [data-theme="light"] .waitlist-input--lg { background: rgba(22, 34, 78, 0.03); } [data-theme="light"] .waitlist-input--lg:focus { background: rgba(22, 34, 78, 0.05); } [data-theme="light"] .waitlist-status.is-error { color: #C0292A; } /* ── 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(58, 90, 168, 0.18); } .glow-3 { top: 70%; right: -200px; width: 500px; height: 500px; background: rgba(22, 34, 78, 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 — "Ag" + hexagon glyph (the stylised "a") + "p" + "one", mirroring assets/icon/icon-pack/wordmark-dark-bg.svg. Poppins 600 with "Ag"/"p" in brand gold, "one" in cream, hexagon glyph inline. */ .brand-wordmark { display: inline-block; font-family: 'Poppins', 'Inter', sans-serif; font-weight: 600; font-size: 21px; letter-spacing: -0.02em; color: var(--cream); line-height: 1; white-space: nowrap; } .bw-gold { color: #CA980B; } .bw-cream { color: var(--cream); } .brand-glyph { display: inline-block; height: 0.78em; width: 0.78em; /* hexagon colour comes from fill/stroke baked into the inline SVG */ color: #CA980B; vertical-align: -0.05em; } .brand-wordmark--lg { font-size: 28px; } .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, .lang-toggle a { 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; text-decoration: none; display: inline-block; line-height: 1; } .lang-toggle button:hover, .lang-toggle a:hover { color: var(--text); } .lang-toggle button.active, .lang-toggle a.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; color: var(--gold); font-weight: 800; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 18px; } .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-name-meaning { font-family: 'Playfair Display', serif; font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; font-style: italic; letter-spacing: -0.01em; line-height: 1.1; margin: 0 0 10px; } .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(58, 90, 168, 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(58, 90, 168, 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 Agapone (comparative) ────────────────────────────── */ .compare-wrap { background: linear-gradient(160deg, rgba(230, 179, 37, 0.04) 0%, rgba(58, 90, 168, 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: ' · Agapone'; 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: ' · Agapone'; } 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(58, 90, 168, 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(58, 90, 168, 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(58, 90, 168, 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-byline { font-size: 13px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.01em; margin: 0 0 8px; } .footer-byline strong { color: var(--gold); font-weight: 700; } .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(58, 90, 168, 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(58, 90, 168, 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(58, 90, 168, 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(58, 90, 168, 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(58, 90, 168, 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; } /* ── Theme toggle (sun/moon button in the header) ───────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--surface); border: 1px solid var(--border); color: var(--text-soft); border-radius: 10px; cursor: pointer; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .theme-toggle:hover { color: var(--gold); border-color: var(--gold-line); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Show the icon of the CURRENT theme: moon on dark, sun on light. */ .theme-ico-sun { display: none; } .theme-ico-moon { display: block; } [data-theme="light"] .theme-ico-moon { display: none; } [data-theme="light"] .theme-ico-sun { display: block; } /* ============================================================ Intro / opening animation (homepage, once per session) The "bird" opening (recreated from the Agapone 4:5 handoff): the golden agapornis hops in, pecks the crumbs, the words App + agape + one collide, the bird becomes the icon, "Agapone" is born and "by Human Match" fades in. Ends with a fade that reveals the site. Theme-aware via tokens; 1x/session, skippable, reduced-motion-safe. ============================================================ */ .intro-stage { position: fixed; inset: 0; z-index: 100000; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 78% 62% at 50% 44%, var(--bg-grade-1) 0%, var(--bg) 58%, var(--bg) 100%); font-family: 'Poppins', 'Inter', sans-serif; animation: introSafety .8s ease 9s forwards; } .intro-stage.intro-done { opacity: 0; pointer-events: none; transition: opacity 1.1s ease; } .intro-scene { position: relative; width: 432px; height: 540px; transform-origin: center center; } .intro-starfield { position: absolute; inset: 0; pointer-events: none; } .intro-st { position: absolute; border-radius: 50%; background: var(--cream); opacity: 0; transition: opacity .9s ease; } .intro-stage.play .intro-st { opacity: var(--o, .45); } .intro-glow { position: absolute; left: 50%; top: 38%; width: 72%; height: 38%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(230,179,37,0.20) 0%, rgba(230,179,37,0.05) 42%, transparent 68%); filter: blur(6px); opacity: 0; } .intro-stage.play .intro-glow { animation: introFadeIn 1s ease 3.9s both; } .intro-content { position: absolute; inset: 0; } .intro-words { position: absolute; left: 50%; top: 27%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 30px; font-weight: 600; letter-spacing: -0.012em; white-space: nowrap; } .intro-w-app { font-size: 30px; color: #CA980B; display: inline-flex; align-items: center; } .intro-row2 { display: inline-flex; align-items: center; gap: 54px; font-size: 30px; } .intro-w-agape { color: #CA980B; display: inline-flex; align-items: center; } .intro-w-one { color: var(--cream); display: inline-flex; align-items: center; } .intro-words .intro-lt { display: inline-block; opacity: 0; } .intro-caret { display: inline-block; width: 3px; height: .8em; background: var(--gold-warm); margin-left: 3px; opacity: 0; border-radius: 1px; } .intro-impact { position: absolute; left: 47%; top: calc(38% + 86px); width: 130px; height: 130px; transform: translate(-50%, -50%) scale(.3); border-radius: 50%; background: radial-gradient(circle, rgba(230,179,37,.55) 0%, rgba(230,179,37,.14) 38%, transparent 64%); opacity: 0; z-index: 5; pointer-events: none; } .intro-crumbs { position: absolute; left: 50%; top: 38%; width: 0; height: 0; z-index: 2; pointer-events: none; } .intro-crumb { position: absolute; left: 0; top: 0; border-radius: 1.5px; will-change: transform, opacity; } .intro-crumb.a { opacity: .9; } .intro-crumb.b { opacity: 0; } .intro-lock { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 4; display: inline-flex; align-items: center; font-weight: 600; letter-spacing: -0.018em; line-height: 1; font-size: 42px; opacity: 0; } .intro-ag, .intro-p { color: #CA980B; } .intro-one { color: var(--cream); margin-left: 0.06em; } .intro-ico-wrap { display: inline-flex; } .intro-ico { width: 0.96em; height: 0.96em; display: block; margin: 0 -0.045em 0 -0.040em; transform: translateY(0.04em); overflow: visible; } .intro-ico .intro-body { fill: none; stroke: #CA980B; stroke-width: 8.4; stroke-linejoin: round; stroke-linecap: round; } .intro-ico .intro-iris { fill: #CA980B; } .intro-eye { transform-box: fill-box; transform-origin: center; } .intro-glint { opacity: 0; } .intro-bird { position: absolute; left: 47%; top: calc(38% + 204px); width: 96px; height: 148px; transform: translate(-50%, -100%); z-index: 5; opacity: 0; } .intro-bird-move { width: 100%; height: 100%; transform-origin: 50% 100%; } .intro-birdsvg { width: 100%; height: 100%; display: block; } .intro-head-lift { transform-box: fill-box; transform-origin: 50% 90%; } .intro-byline { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; z-index: 6; opacity: 0; white-space: nowrap; } .intro-by { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 1.5px; color: var(--text-muted); text-transform: lowercase; } .intro-hmwm { font-weight: 700; font-size: 15px; color: var(--cream); display: inline-flex; align-items: center; letter-spacing: -0.01em; } .intro-hmx { width: 0.6em; height: 0.6em; display: inline-block; transform: translateY(0.02em); } .intro-flash { position: absolute; left: 50%; top: 38%; width: 84%; height: 52%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,247,230,0.55) 0%, rgba(230,179,37,0.12) 40%, transparent 70%); opacity: 0; z-index: 6; pointer-events: none; } @keyframes introFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes introSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } } .intro-stage.play .intro-bird { animation: introBirdShow .01s linear .3s forwards; } .intro-stage.play .intro-bird-move { animation: introHopIn 1.6s cubic-bezier(.32,.7,.4,1) .3s both, introPeckLean 1.7s ease 1.9s, introBirdGone .4s ease 3.5s forwards; } .intro-stage.play .intro-head-lift { animation: introHeadDip 1.7s ease 1.9s both; } .intro-stage.play .intro-w-app .intro-lt { animation: introLetterIn .1s ease both; animation-delay: calc(0.6s + var(--i) * .08s); } .intro-stage.play .intro-w-agape .intro-lt { animation: introLetterIn .1s ease both; animation-delay: calc(1.4s + var(--i) * .08s); } .intro-stage.play .intro-w-one .intro-lt { animation: introLetterIn .1s ease both; animation-delay: calc(2.2s + var(--i) * .08s); } .intro-stage.play .intro-caret-app { animation: introCblink .42s steps(1) 0.6s infinite, introChoff .01s linear 0.95s forwards; } .intro-stage.play .intro-caret-agape { animation: introCblink .42s steps(1) 1.4s infinite, introChoff .01s linear 2.05s forwards; } .intro-stage.play .intro-caret-one { animation: introCblink .42s steps(1) 2.2s infinite, introChoff .01s linear 2.8s forwards; } .intro-stage.play .intro-w-agape { animation: introCollideAgape .5s cubic-bezier(.55,0,.85,.5) 3.05s forwards; } .intro-stage.play .intro-w-one { animation: introCollideOne .5s cubic-bezier(.55,0,.85,.5) 3.05s forwards; } .intro-stage.play .intro-w-app { animation: introCollideApp .5s cubic-bezier(.55,0,.85,.5) 3.05s forwards; } .intro-stage.play .intro-impact { animation: introBurst .6s cubic-bezier(.2,.7,.3,1) 3.5s both; } .intro-stage.play .intro-crumb.b { animation: introCrumbFly 1.15s cubic-bezier(.3,.7,.35,1) calc(3.55s + var(--delay)) forwards; } .intro-stage.play .intro-lock { animation: introBorn .7s cubic-bezier(.3,1.2,.5,1) 3.8s forwards; } .intro-stage.play .intro-eye { animation: introEyeOpen .55s cubic-bezier(.2,.8,.25,1) 4.45s both, introEyeAlive 4.2s ease 5.0s infinite; } .intro-stage.play .intro-glint { animation: introFadeIn .5s ease 4.45s forwards; } .intro-stage.play .intro-byline { animation: introFadeIn .7s ease 4.8s both; } .intro-stage.play .intro-flash { animation: introFlash 1.1s ease 5.7s forwards; } @keyframes introLetterIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } @keyframes introCblink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes introChoff { to { opacity: 0; } } @keyframes introHopIn { 0% { transform: translateX(-200px) translateY(0); opacity: 0; } 12% { opacity: 1; } 30% { transform: translateX(-128px) translateY(-26px); } 48% { transform: translateX(-66px) translateY(0); } 66% { transform: translateX(-40px) translateY(-22px); } 84% { transform: translateX(-6px) translateY(0); } 100% { transform: translateX(0) translateY(0); } } @keyframes introPeckLean { 0% { transform: rotate(0deg) translateY(0); } 13% { transform: rotate(34deg) translateY(6px); } 22% { transform: rotate(0deg) translateY(0); } 40% { transform: rotate(34deg) translateY(6px); } 49% { transform: rotate(0deg) translateY(0); } 67% { transform: rotate(34deg) translateY(6px); } 76% { transform: rotate(0deg) translateY(0); } 100% { transform: rotate(0deg) translateY(0); } } @keyframes introHeadDip { 0% { transform: rotate(0deg); } 13% { transform: rotate(56deg); } 22% { transform: rotate(2deg); } 40% { transform: rotate(56deg); } 49% { transform: rotate(2deg); } 67% { transform: rotate(56deg); } 76% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } } @keyframes introBirdShow { to { opacity: 1; } } @keyframes introBirdGone { to { opacity: 0; transform: translateY(-6px) scale(.9); } } @keyframes introCollideApp { 0% { opacity: 1; transform: translate(0,0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(0,185px); } } @keyframes introCollideAgape { 0% { opacity: 1; transform: translate(0,0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(58px,116px); } } @keyframes introCollideOne { 0% { opacity: 1; transform: translate(0,0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-58px,116px); } } @keyframes introBurst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); } } @keyframes introCrumbFly { 0% { opacity: 0; transform: translate(0,0) scale(.3) rotate(0deg); } 14% { opacity: 1; transform: translate(var(--bx),var(--by)) scale(1.15) rotate(var(--r1)); } 72% { opacity: 1; } 100% { opacity: .9; transform: translate(var(--cx),var(--cy)) scale(1) rotate(var(--r2)); } } @keyframes introBorn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.84); } 55% { opacity: 1; } 70% { transform: translate(-50%,-50%) scale(1.05); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); } } @keyframes introEyeOpen { 0% { transform: scaleY(0); } 62% { transform: scaleY(1.22); } 100% { transform: scaleY(1); } } @keyframes introEyeAlive { 0%, 12% { transform: translateX(0) scaleY(1); } 16% { transform: translateX(0) scaleY(.07); } 20% { transform: translateX(0) scaleY(1); } 34% { transform: translateX(2.6px) scaleY(1); } 50% { transform: translateX(2.6px) scaleY(1); } 54% { transform: translateX(2.6px) scaleY(.07); } 58% { transform: translateX(2.6px) scaleY(1); } 72% { transform: translateX(0) scaleY(1); } 100% { transform: translateX(0) scaleY(1); } } @keyframes introFlash { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 40% { opacity: .85; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.5); } } @media (prefers-reduced-motion: reduce) { .intro-stage { display: none !important; } }