/* * Archetype landing page — visual language matched to Aquora's in-app * share card and Terms/Privacy page. * * Brand vocabulary: * • Tri-color background gradient (brand-bg → archetype tint → lighter bottom) * • Emoji with radial glow halo (mirrors share card's blur effect) * • Capsule code badge with archetype-tinted border * • Frosted-glass cards with hairline archetype-color borders * • SF Pro Rounded throughout, italic tagline with elegant pull-quotes * • CTA panel uses navy with an archetype-color glow bleed at the top * * Adaptive: light mode uses brand green as base, dark mode uses navy. * Mobile-first; desktop gets a centered narrow column. */ /* ============================================================ * Reset & root tokens * ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Aquora brand */ --aquora-green: #61A88A; --aquora-green-light: #6EB99E; --aquora-navy: #1D4354; --aquora-navy-light: #285569; --aquora-cream: #F8F4EC; /* Dark mode is the only mode on web — landing pages always render with * navy base + brand green accents, regardless of the visitor's system * `prefers-color-scheme`. Keeps the share-card → landing-page hand-off * visually consistent for every visitor. */ --bg-base: var(--aquora-navy); --bg-light: var(--aquora-navy-light); --text-main: var(--aquora-green); --text-secondary: rgba(97, 168, 138, 0.7); --text-faint: rgba(97, 168, 138, 0.45); --card-bg: rgba(255, 255, 255, 0.06); --card-bg-strong: rgba(255, 255, 255, 0.10); --card-border-rgb: 97, 168, 138; } html { -webkit-text-size-adjust: 100%; /* Tell the browser this page renders in a dark color scheme — affects * scrollbars, form elements, and the iOS Safari status-bar tint when * `theme-color` isn't honored. */ color-scheme: dark; } body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Display', system-ui, sans-serif; font-feature-settings: 'ss01', 'ss02'; color: var(--text-main); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; min-height: 100vh; /* Two stacked viewport-fixed background layers: * 1. Top halo of archetype color — `at 50% 0%` anchors the gradient peak * to the top of the viewport, so as the user scrolls the halo stays * pinned to the top of the screen. * 2. Tri-stop diagonal gradient (brand base → archetype color tint mid → * lighter base at bottom) mirrors the share card's mood. * * Both `fixed` (the keyword in `background-attachment`) so they paint * relative to the viewport, not the document. Combining into one * `background` shorthand with multiple layers — instead of the previous * body::before pseudo-element approach — sidesteps a known iOS Safari * rendering bug where pseudo-element + position:fixed + body * background-attachment:fixed could un-pin the pseudo-element during * rubber-band scroll. */ background: radial-gradient( ellipse 60% 40% at 50% 0%, color-mix(in srgb, var(--archetype-color) 22%, transparent) 0%, transparent 70% ) fixed, linear-gradient( 155deg, var(--bg-base) 0%, color-mix(in srgb, var(--archetype-color) 38%, var(--bg-base)) 50%, var(--bg-light) 100% ) fixed; /* Canvas base color — MUST come after the shorthand above (which resets * background-color to transparent). Both gradient layers are images, so * without an explicit color the canvas the browser propagates from * is transparent and falls back to the UA canvas — an * UNSPECIFIED color that merely happens to be black under * `color-scheme: dark`. Always set it explicitly. * * BLACK IS A DESIGN DECISION, not a bug — do not "fix" it. The black * status-bar / home-indicator strips frame the page like a cinema * letterbox and keep the eye on the content. Two alternatives were * SHIPPED, REVIEWED ON DEVICE, AND REJECTED (2026-07-03): * • plain navy (--bg-base): visibly cut the top halo off at the * viewport edge — the glow peaked at the page's top center and * died into a flat navy strip; * • per-archetype halo-peak tint (color-mix of the accent into * navy): technically "connected" the glow, but the soft blurred * boundary read as unfinished rather than seamless. * A hard black frame is unambiguous: it reads as intent. */ background-color: #000; } /* ============================================================ * Page container * ============================================================ */ .archetype-page { position: relative; z-index: 1; max-width: 580px; margin: 0 auto; padding: 28px 22px 72px; } /* ============================================================ * Brand header (logo + wordmark + eyebrow) * ============================================================ */ .brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 44px; } .brand-link { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-main); transition: opacity 0.15s ease; } .brand-link:hover { opacity: 0.78; } .brand-icon { flex-shrink: 0; } .brand-name { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .brand-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-secondary); margin-top: 3px; } /* ============================================================ * Hero: emoji glow + name + code + axes + tagline * ============================================================ */ .hero { text-align: center; margin-bottom: 56px; } .emoji-stage { position: relative; width: 132px; height: 132px; margin: 8px auto 22px; display: flex; align-items: center; justify-content: center; } .emoji-glow { position: absolute; inset: 12px; background: var(--archetype-color); border-radius: 50%; filter: blur(28px); opacity: 0.42; z-index: 0; } .emoji { position: relative; z-index: 1; font-size: 76px; line-height: 1; filter: drop-shadow(0 6px 18px rgba(29, 67, 84, 0.22)); } .archetype-name { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; color: var(--text-main); margin-bottom: 14px; line-height: 1.18; max-width: 18ch; margin-left: auto; margin-right: auto; } .archetype-code-row { margin-bottom: 14px; } .archetype-code { display: inline-flex; align-items: center; font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12px; font-weight: 800; letter-spacing: 0.32em; color: var(--archetype-color); background: color-mix(in srgb, var(--archetype-color) 14%, transparent); border: 1.5px solid color-mix(in srgb, var(--archetype-color) 40%, transparent); padding: 7px 14px 7px 20px; /* extra right pad balances tracking */ border-radius: 999px; text-transform: uppercase; } /* Axes chips — tightened so the longest combinations (e.g. NIGHT * AUTOPILOT ESCAPING BURSTY) still fit on a single line at 360px-wide * mobile content area. Capped at 360px max-width so when wrapping IS * unavoidable on tiny viewports it falls back to a clean 2+2 grid * rather than an ugly 3+1. */ .axes { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 360px; margin: 0 auto 26px; padding: 0; } .axes li { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--archetype-color); background: color-mix(in srgb, var(--archetype-color) 11%, transparent); border: 1px solid color-mix(in srgb, var(--archetype-color) 26%, transparent); padding: 5px 9px; border-radius: 6px; white-space: nowrap; } .tagline { position: relative; font-style: italic; font-size: 19px; line-height: 1.5; font-weight: 400; color: var(--text-main); max-width: 30ch; margin: 8px auto 0; padding: 4px 30px 12px; } /* Big elegant pull-quotes — Georgia gives them character without competing with the rounded body type. */ .tagline::before, .tagline::after { font-family: 'Georgia', 'Times New Roman', serif; font-style: normal; font-size: 56px; line-height: 1; position: absolute; color: var(--archetype-color); opacity: 0.35; } .tagline::before { content: "\201C"; /* left double quote */ top: -8px; left: 0; } .tagline::after { content: "\201D"; /* right double quote */ bottom: -22px; right: 0; } /* ============================================================ * Body cards — frosted glass with archetype-tinted hairline * ============================================================ */ .card { background: var(--card-bg); border: 1px solid color-mix(in srgb, var(--archetype-color) 18%, transparent); border-radius: 22px; padding: 24px 22px; margin-bottom: 14px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04); } .card.nudge { background: var(--card-bg-strong); border-color: color-mix(in srgb, var(--archetype-color) 30%, transparent); } .card-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--archetype-color); margin-bottom: 10px; } .card.description p { font-size: 17px; line-height: 1.65; color: var(--text-main); } .card.nudge p { font-size: 16px; line-height: 1.55; color: var(--text-main); font-style: italic; } .card.explainer p { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 12px; } .card.explainer p:last-child { margin-bottom: 0; } .card.explainer em { font-style: normal; font-weight: 600; color: var(--text-main); } .card.explainer strong { font-weight: 700; color: var(--text-main); } /* ============================================================ * CTA — navy panel with archetype-color glow bleeding from top * ============================================================ */ .cta { position: relative; text-align: center; margin-top: 36px; padding: 38px 26px 30px; background: var(--aquora-navy); color: var(--aquora-cream); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); } /* Soft archetype-color halo bleeding in from above — gives the CTA the same "lit from within" warmth as the share card. */ .cta::before { content: ""; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 320px; height: 220px; background: var(--archetype-color); opacity: 0.42; filter: blur(64px); border-radius: 50%; pointer-events: none; } .cta > * { position: relative; z-index: 1; } .cta-eyebrow { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(248, 244, 236, 0.65); margin-bottom: 10px; } .cta-headline { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.28; color: var(--aquora-cream); margin-bottom: 8px; max-width: 22ch; margin-left: auto; margin-right: auto; } .cta-sub { font-size: 13px; color: rgba(248, 244, 236, 0.6); margin-bottom: 24px; } .cta-button { display: inline-block; background: var(--archetype-color); color: #1D4354; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; text-decoration: none; padding: 15px 38px; border-radius: 14px; transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .cta-button:hover, .cta-button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .cta-button:active { transform: translateY(0); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18); } .cta-fineprint { font-size: 11.5px; color: rgba(248, 244, 236, 0.5); margin-top: 22px; max-width: 30ch; margin-left: auto; margin-right: auto; line-height: 1.55; } /* ============================================================ * Footer * ============================================================ */ .page-footer { margin-top: 32px; padding-top: 22px; text-align: center; border-top: 1px solid color-mix(in srgb, var(--text-main) 8%, transparent); } .footer-url { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 10.5px; color: var(--text-faint); margin-bottom: 8px; letter-spacing: 0.01em; word-break: break-all; } .footer-nav { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: 11px; } .footer-nav a { color: var(--text-secondary); text-decoration: none; font-weight: 600; transition: color 0.15s ease; } .footer-nav a:hover { color: var(--text-main); text-decoration: underline; text-underline-offset: 3px; } .footer-nav span { color: var(--text-faint); } /* ============================================================ * Larger viewports — center column, more generous spacing * ============================================================ */ @media (min-width: 720px) { .archetype-page { padding: 56px 32px 100px; max-width: 600px; } .brand { margin-bottom: 64px; } .emoji-stage { width: 156px; height: 156px; margin-bottom: 28px; } .emoji-glow { inset: 16px; filter: blur(36px); opacity: 0.45; } .emoji { font-size: 92px; } .archetype-name { font-size: 38px; margin-bottom: 18px; } .tagline { font-size: 21px; } .card { padding: 28px 26px; margin-bottom: 16px; border-radius: 24px; } .card.description p { font-size: 18px; } .cta { padding: 48px 32px 36px; border-radius: 24px; margin-top: 44px; } .cta-headline { font-size: 26px; } } /* ============================================================ * Reduced motion * ============================================================ */ @media (prefers-reduced-motion: reduce) { .cta-button, .brand-link, .footer-nav a { transition: none; } .cta-button:hover { transform: none; } } /* ============================================================ * Selection — match brand * ============================================================ */ ::selection { background: color-mix(in srgb, var(--archetype-color) 32%, transparent); color: var(--text-main); } /* ============================================================ * Language Switcher — top-right floating pill (EN / 中文). * Mirrors the Terms/Privacy page so the two surfaces feel like * one site. Uses archetype.css's own --text-main / --card-bg / * --bg-base vocabulary (archetype pages are always dark mode). * ============================================================ */ .lang-switcher { position: fixed; top: 16px; right: 16px; z-index: 10; display: flex; gap: 4px; /* --card-bg-strong matches index.html's dark-mode --card-surface * (rgba(255,255,255,0.10)) exactly, so the pill reads with the same * weight on the archetype pages as on the legal page. */ background: var(--card-bg-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 4px; border-radius: 999px; } .lang-btn { border: none; background: transparent; color: var(--text-main); font-family: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all 0.2s ease; opacity: 0.6; } .lang-btn.active { background: var(--text-main); color: var(--bg-base); opacity: 1; } .lang-btn:hover:not(.active) { opacity: 1; } /* Match index.html's mobile shrink (breakpoint + values) byte-for-byte * so the pill behaves identically across the two surfaces. */ @media (max-width: 600px) { .lang-switcher { top: 10px; right: 10px; padding: 3px; gap: 2px; } .lang-btn { font-size: 11px; padding: 4px 9px; } }