/* ==================== Shared styles ==================== Used by the legal, open-in-app (/c, /g), 404, delete-account and SMS opt-in pages. The homepage has its own stylesheet (home.css). Inter and Instrument Serif are loaded via in each page's (preconnect + stylesheet) to avoid a render-blocking @import. */ /* ==================== CSS Variables ==================== */ :root { /* Colors */ --bg: #000000; --fg: #F6F7F8; --muted: #C7CBD1; --dim: #8B90A0; --accent: #A78BFA; --accent-hover: #8B5CF6; --accent-ghost: rgba(167, 139, 250, 0.08); --accent-glow: rgba(167, 139, 250, 0.15); /* Type — same families as the homepage */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --serif: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; /* Spacing */ --space-xxl: clamp(72px, 10vw, 160px); --space-xl: clamp(48px, 6vw, 120px); --space-lg: clamp(28px, 4vw, 64px); --space-md: 24px; --space-sm: 14px; /* Typography — rem-based so layout scales with the user's text-size preference */ --h1: clamp(2.5rem, 7vw, 4.5rem); --h2: clamp(1.75rem, 5vw, 3rem); --h3: clamp(1.25rem, 3.5vw, 1.75rem); --body: clamp(1rem, 1.6vw, 1.25rem); --small: clamp(0.8125rem, 1.4vw, 0.9375rem); /* Layout */ --max-width: 1200px; --container-padding: 24px; --radius: 12px; --radius-lg: 16px; /* Effects */ --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1); } /* ==================== Reset & Base ==================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--sans); font-weight: 400; background: radial-gradient(1400px 1400px at 50% -10%, var(--accent-ghost), transparent 65%), var(--bg); color: var(--fg); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } .container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ==================== Header ==================== */ .header { position: sticky; top: 0; z-index: 100; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); } /* Scroll-edge fade instead of a hard divider — content dissolves under the chrome */ .header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent); pointer-events: none; } .nav { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--container-padding); max-width: var(--max-width); margin: 0 auto; } .nav-brand { display: flex; align-items: center; text-decoration: none; } .logo-img { height: 64px; width: auto; display: block; transition: opacity var(--transition-fast); } .logo-img:hover { opacity: 0.85; } /* ==================== CTA Button (404) ==================== */ .cta-button { font-family: var(--sans); display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 32px; border-radius: 999px; background: var(--accent); color: var(--bg); border: none; cursor: pointer; font-weight: 600; font-size: var(--body); text-decoration: none; transition: all var(--transition); box-shadow: 0 0 0 0 var(--accent-glow); } .cta-button:hover { transform: translateY(-2px); box-shadow: 0 8px 40px var(--accent-glow); background: var(--accent-hover); } .cta-button:active { transform: scale(0.97); transition: transform 100ms ease-out; } /* ==================== Sections ==================== */ section { padding: var(--space-xxl) 0; } /* ==================== Footer ==================== */ .footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: var(--space-xl) 0 var(--space-lg); } .footer-content { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-lg); margin-bottom: var(--space-md); } .footer-brand strong { font-size: 16px; letter-spacing: 0.5px; } .footer-tagline { color: var(--dim); font-size: var(--small); margin-top: 6px; } .footer-links { display: flex; gap: 24px; flex-wrap: wrap; } .footer-links a { color: var(--dim); text-decoration: none; font-size: var(--small); transition: color var(--transition-fast); } .footer-links a:hover { color: var(--fg); } .footer-bottom { padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.05); text-align: center; } .footer-bottom small { color: var(--dim); font-size: 13px; letter-spacing: 0.01em; } /* ==================== Responsive Design ==================== */ @media (max-width: 768px) { :root { --container-padding: 20px; } .nav { padding: 16px var(--container-padding); } .logo-img { height: 52px; } .footer-content { flex-direction: column; align-items: center; text-align: center; } .footer-links { justify-content: center; } } @media (max-width: 480px) { :root { --container-padding: 16px; } .cta-button { width: 100%; padding: 14px 24px; } } /* ==================== Transparency & Contrast Preferences ==================== */ @media (prefers-reduced-transparency: reduce) { .header { background: rgba(0, 0, 0, 0.95); backdrop-filter: none; -webkit-backdrop-filter: none; } } @media (prefers-contrast: more) { :root { --muted: #E4E6EA; --dim: #B9BEC9; } .nav-back { border-color: rgba(255, 255, 255, 0.35); } }