/* GreateWay landing page. Color system, ninth round — back to two hues: a teal, the native app's actual brand color, returns as --primary for buttons and everything else that isn't the red kept from round 8. --accent-3/--accent-4 both alias --primary now (no more blue, no more purple) — the 4-slot rotation classes (.c2/.c3/.c4) still exist structurally but three of the four slots are the same teal, only .c1/default (red) stands apart. First pass used Spring Teal (#00FFCD), a neon decorative accent, not the app's real color — too bright. Second pass (#5B8F85) undershot the other way, more of a muted sage than the app's actual teal. #158078 is the exact native hex: dark/saturated enough that raw --primary clears ~4.8:1 on white by itself, so --primary-text only needs a light 10% black nudge for extra margin, and white text now reads better than dark text on a --primary fill (unlike the two lighter attempts before it, which both needed dark text on the button itself). As before, "-soft"/"-text" are color-mix() derivations of the raw hue, never separately chosen hex values. */ :root { --bg: #FFFFFF; --surface: #FBFBFD; --text: #121316; --text-secondary: #6B6E8D; --text-tertiary: #A6A5C2; --border: #E3E3E8; --border-hover: #B5B3C4; --primary: #158078; --primary-soft: color-mix(in srgb, var(--primary) 10%, var(--bg)); --primary-text: color-mix(in oklch, var(--primary) 90%, black); --accent: var(--primary); --accent-contrast: #FFFFFF; /* White text now reads better than dark on --primary fills (4.78:1 vs 4.39:1) — the opposite of the two lighter teals this palette went through before landing on the real native hex — so --primary-contrast aliases --accent-contrast instead of --text. Kept as its own token (not a straight swap to --accent-contrast everywhere) in case a future hue needs it again. */ --primary-contrast: var(--accent-contrast); --accent-2: #E5473E; --accent-2-soft: color-mix(in srgb, var(--accent-2) 12%, var(--bg)); /* Darkening red 60% toward black (the old formula every other accent still uses) came out looking terracotta/brick rather than a deeper red — dark, low-saturation red reads as brown to the eye almost no matter the mixing method, so the real fix isn't a better mixing algorithm, it's mixing in far less black (12%, not 60%) so the result stays close to the vivid brand red instead of sliding into brick territory. Still ~5.4:1 on white. */ --accent-2-text: color-mix(in oklch, var(--accent-2) 88%, black); --accent-3: var(--primary); --accent-3-soft: color-mix(in srgb, var(--accent-3) 12%, var(--bg)); --accent-3-text: var(--primary-text); --accent-4: var(--primary); --accent-4-soft: color-mix(in srgb, var(--accent-4) 12%, var(--bg)); --accent-4-text: var(--primary-text); --shadow: 0 2px 6px rgba(16, 17, 22, 0.05), 0 16px 32px rgba(16, 17, 22, 0.09); --radius-card: 18px; --radius-frame: 40px; --radius-pill: 980px; --radius-chip: 10px; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #0B0B10; --surface: #17171D; --text: #F5F5F7; --text-secondary: #98979F; --text-tertiary: #6E6D78; --border: #2A2A32; --border-hover: #3E3D48; /* Same shifted hues as light mode — only the neutral they mix against changes. Bright colors are already legible as text on a dark surface, so "-text" just reuses the raw value instead of darkening it toward black. */ --primary-soft: color-mix(in srgb, var(--primary) 20%, var(--bg)); --primary-text: var(--primary); --accent-2-soft: color-mix(in srgb, var(--accent-2) 20%, var(--bg)); --accent-2-text: color-mix(in oklch, var(--accent-2) 55%, white); --accent-3-soft: color-mix(in srgb, var(--accent-3) 20%, var(--bg)); --accent-3-text: var(--primary-text); --accent-4-soft: color-mix(in srgb, var(--accent-4) 20%, var(--bg)); --accent-4-text: var(--primary-text); --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 28px rgba(0, 0, 0, 0.35); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; line-height: 1.5; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .narrow { max-width: 680px; } .center { text-align: center; } h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; } h1 { font-size: clamp(40px, 6.4vw, 68px); line-height: 1.05; letter-spacing: -0.03em; } h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.025em; } h3 { font-size: 19px; margin-bottom: 6px; letter-spacing: -0.01em; } p { margin: 0 0 12px; color: var(--text-secondary); } a { color: inherit; } /* ---------- Announcement bar ---------- */ /* Sits above the sticky nav, not itself sticky — scrolls away normally, then the nav takes over the top:0 spot once it's scrolled past, same as most "beta / big update coming" banners. */ .announce-bar { background: var(--primary-soft); border-bottom: 1px solid var(--border); } .announce-inner { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 24px; text-align: center; } .announce-badge { flex-shrink: 0; display: inline-block; padding: 2px 10px; border-radius: var(--radius-pill); background: var(--accent-2); color: var(--accent-contrast); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .announce-text { font-size: 13px; color: var(--primary-text); } @media (max-width: 640px) { .announce-inner { flex-direction: column; gap: 4px; padding: 10px 20px; } } /* ---------- Nav ---------- */ /* No visible border line — separation from the page comes from the blur alone, the way apple.com's nav does; a hairline here would read as a leftover box, not a deliberate edge. */ .nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(20px) saturate(1.6); } /* Every gap in the row equal — brand↔link, link↔link, and the last link↔button — stretched across the full row width, not clustered on the left with the button pushed off on its own. That needs every word to be a direct flex child of the same row: .nav-links stays a