/* Seabed.app — site styles * * Design language matches the app: navy palette in dark, cream-on-white in * light. Newsreader for display, system stack for body, SF Mono for technical. * * Theme is driven by [data-theme] on , set by theme.js. The CSS uses * prefers-color-scheme only as a tie-breaker before the script loads. */ /* ── Tokens ─────────────────────────────────────────────────────────── */ :root { --font-display: "Newsreader", "New York", "Iowan Old Style", Georgia, serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --accent: #2A4D78; --accent-soft: #4A6FA0; --accent-on: #F3ECD9; --max-w: 1120px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; } /* Dark = brand default. The hero in particular feels native here. */ :root, [data-theme="dark"] { --bg: #0A1730; --bg-elevated: #122440; --bg-card: #152C4F; --bg-soft: rgba(255, 255, 255, 0.04); --bg-soft-hover: rgba(255, 255, 255, 0.08); --bg-gradient: radial-gradient(120% 110% at 30% 0%, #2A4D78 0%, #15294A 55%, #0A1730 100%); --fg: #ECEAE0; --fg-2: rgba(236, 234, 224, 0.66); --fg-3: rgba(236, 234, 224, 0.42); --fg-4: rgba(236, 234, 224, 0.22); --hairline: rgba(255, 255, 255, 0.10); --hairline-strong: rgba(255, 255, 255, 0.18); --device-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(255, 255, 255, 0.10) inset; --device-bezel: rgba(255, 255, 255, 0.06); --cta-on-grad-bg: rgba(243, 236, 217, 0.95); --cta-on-grad-fg: #0A1730; } [data-theme="light"] { --bg: #F3F1EC; --bg-elevated: #FFFFFF; --bg-card: #FFFFFF; --bg-soft: rgba(20, 30, 60, 0.04); --bg-soft-hover: rgba(20, 30, 60, 0.07); --bg-gradient: radial-gradient(120% 110% at 30% 0%, #4A6FA0 0%, #2A4D78 55%, #15294A 100%); --fg: #15201F; --fg-2: rgba(21, 32, 31, 0.66); --fg-3: rgba(21, 32, 31, 0.46); --fg-4: rgba(21, 32, 31, 0.22); --hairline: rgba(20, 30, 35, 0.10); --hairline-strong: rgba(20, 30, 35, 0.20); --device-shadow: 0 30px 70px rgba(20, 30, 60, 0.20), 0 6px 18px rgba(20, 30, 60, 0.12), 0 0 0 0.5px rgba(20, 30, 60, 0.08) inset; --device-bezel: rgba(20, 30, 60, 0.10); --cta-on-grad-bg: rgba(243, 236, 217, 0.96); --cta-on-grad-fg: #0A1730; } /* prefers-color-scheme tie-breaker (only applies before theme.js sets data-theme) */ @media (prefers-color-scheme: light) { html:not([data-theme]) { --bg: #F3F1EC; --bg-elevated: #FFFFFF; --bg-card: #FFFFFF; --bg-soft: rgba(20, 30, 60, 0.04); --bg-soft-hover: rgba(20, 30, 60, 0.07); --bg-gradient: radial-gradient(120% 110% at 30% 0%, #4A6FA0 0%, #2A4D78 55%, #15294A 100%); --fg: #15201F; --fg-2: rgba(21, 32, 31, 0.66); --fg-3: rgba(21, 32, 31, 0.46); --fg-4: rgba(21, 32, 31, 0.22); --hairline: rgba(20, 30, 35, 0.10); --hairline-strong: rgba(20, 30, 35, 0.20); --device-shadow: 0 30px 70px rgba(20, 30, 60, 0.20), 0 6px 18px rgba(20, 30, 60, 0.12), 0 0 0 0.5px rgba(20, 30, 60, 0.08) inset; --device-bezel: rgba(20, 30, 60, 0.10); } } /* ── Base ─────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-soft); } ::selection { background: var(--accent); color: var(--accent-on); } /* ── Layout primitives ─────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); } section { padding-block: clamp(72px, 10vw, 128px); } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 16px; } h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; } h1 { font-size: clamp(44px, 6vw, 76px); line-height: 1.04; margin: 0; } h2 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.12; margin: 0 0 24px; } h3 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; font-weight: 500; } .lede { font-size: clamp(19px, 1.6vw, 22px); line-height: 1.55; color: var(--fg-2); max-width: 60ch; margin: 0; } /* ── Header ───────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); background: color-mix(in oklab, var(--bg) 70%, transparent); border-bottom: 1px solid var(--hairline); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.005em; } .brand-mark { width: 28px; height: 28px; border-radius: 7px; background: var(--bg-gradient); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.06); } .brand-mark svg { width: 20px; height: 20px; } .nav-links { display: flex; gap: 6px; align-items: center; } .nav-links a { font-size: 14px; padding: 8px 12px; border-radius: 8px; color: var(--fg-2); } .nav-links a:hover { background: var(--bg-soft); color: var(--fg); } .nav-links a.current { color: var(--fg); } .theme-toggle { appearance: none; border: 0; cursor: pointer; background: var(--bg-soft); color: var(--fg-2); width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; transition: background 120ms, color 120ms; margin-left: 6px; } .theme-toggle:hover { background: var(--bg-soft-hover); color: var(--fg); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .sun, .theme-toggle .moon { display: none; } [data-theme="dark"] .theme-toggle .sun { display: block; } [data-theme="light"] .theme-toggle .moon { display: block; } html:not([data-theme]) .theme-toggle .sun { display: block; } @media (prefers-color-scheme: light) { html:not([data-theme]) .theme-toggle .sun { display: none; } html:not([data-theme]) .theme-toggle .moon { display: block; } } /* ── Hero ─────────────────────────────────────────────────────────── */ .hero { position: relative; padding-block: clamp(80px, 12vw, 160px) clamp(40px, 6vw, 80px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: -1px 0 auto; height: 70%; background: radial-gradient(60% 80% at 70% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%), radial-gradient(40% 60% at 12% 20%, color-mix(in oklab, var(--accent-soft) 14%, transparent), transparent 70%); pointer-events: none; mask-image: linear-gradient(to bottom, #000, transparent); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); } .hero .wrap { position: relative; } .hero-copy { max-width: 720px; margin-inline: auto; text-align: center; } .hero h1 .accent { color: var(--accent-soft); } .hero .lede { margin-inline: auto; margin-block-start: 24px; } .hero-status { display: inline-flex; align-items: center; gap: 8px; margin-block-end: 28px; font-size: 13px; padding: 6px 12px; background: var(--bg-soft); border: 1px solid var(--hairline); border-radius: 999px; color: var(--fg-2); font-family: var(--font-body); } .hero-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent-soft) 25%, transparent); } /* Device stack */ .devices { position: relative; margin-block-start: clamp(56px, 8vw, 88px); display: flex; justify-content: center; align-items: flex-end; gap: clamp(-40px, -3vw, -20px); perspective: 1400px; } .device { position: relative; width: clamp(200px, 24vw, 280px); aspect-ratio: 390 / 844; border-radius: 38px; background: #000; padding: 8px; box-shadow: var(--device-shadow); border: 1px solid var(--device-bezel); flex-shrink: 0; transition: transform 400ms cubic-bezier(.2,.8,.2,1); } .device::after { /* Dynamic Island */ content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 32%; height: 22px; border-radius: 14px; background: #000; z-index: 2; } .device .screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--bg-gradient); position: relative; } .device .screen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .device.left { transform: translate(8%, 18px) rotate(-7deg); z-index: 1; } .device.right { transform: translate(-8%, 18px) rotate( 7deg); z-index: 1; } .device.center { z-index: 2; } @media (max-width: 720px) { .device.left { display: none; } .device.right { display: none; } .device.center { transform: none; width: 70vw; max-width: 320px; } } /* ── Generic section heading ─────────────────────────────────────── */ .section-head { max-width: 720px; } .section-head .lede { margin-block-start: 16px; } .center { text-align: center; margin-inline: auto; } /* ── Feature grid ────────────────────────────────────────────────── */ .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-block-start: 56px; } .feature { padding: 28px 24px; background: var(--bg-card); border: 1px solid var(--hairline); border-radius: var(--r-lg); transition: transform 240ms, border-color 240ms; } .feature:hover { transform: translateY(-2px); border-color: var(--hairline-strong); } .feature-icon { width: 40px; height: 40px; border-radius: 10px; background: color-mix(in oklab, var(--accent) 24%, transparent); color: var(--accent-soft); display: grid; place-items: center; margin-block-end: 18px; } .feature-icon svg { width: 22px; height: 22px; } .feature p { margin: 0; color: var(--fg-2); font-size: 15.5px; line-height: 1.55; } /* ── Personas ────────────────────────────────────────────────────── */ .personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; margin-block-start: 48px; } .persona { padding: 32px; border-radius: var(--r-lg); background: var(--bg-card); border: 1px solid var(--hairline); } .persona-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); margin-block-end: 14px; } .persona h3 { font-size: 24px; margin-block-end: 12px; letter-spacing: -0.012em; } .persona p { color: var(--fg-2); font-size: 16px; margin: 0; } /* ── Principles strip ───────────────────────────────────────────── */ .principles { background: var(--bg-gradient); color: var(--accent-on); padding: clamp(56px, 7vw, 96px) 0; position: relative; overflow: hidden; } .principles h2 { color: var(--accent-on); } .principles .lede { color: color-mix(in oklab, var(--accent-on) 78%, transparent); } .principles-list { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; } .principles-list li { font-family: var(--font-display); font-size: 22px; line-height: 1.35; font-style: italic; font-weight: 400; color: color-mix(in oklab, var(--accent-on) 90%, transparent); } .principles-list li::before { content: ""; display: block; width: 28px; height: 1px; background: color-mix(in oklab, var(--accent-on) 30%, transparent); margin-block-end: 18px; } /* ── Closing block ─────────────────────────────────────────────── */ .closing { text-align: center; border-top: 1px solid var(--hairline); } .closing-stamp { display: inline-block; margin-block-end: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); } .closing h2 { margin-block-end: 16px; } .closing .lede { margin-inline: auto; max-width: 50ch; } .closing-meta { margin-block-start: 32px; display: flex; gap: 20px; justify-content: center; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--fg-3); } .closing-meta .pip { width: 4px; height: 4px; border-radius: 50%; background: var(--fg-4); } /* ── Footer ────────────────────────────────────────────────────── */ .site-footer { padding: 32px 0 48px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--fg-3); } .site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .site-footer .footer-links { display: flex; gap: 18px; } .site-footer .footer-links a:hover { color: var(--fg); } /* ── Prose pages (Privacy, About) ──────────────────────────────── */ .prose-page { padding-block: clamp(56px, 8vw, 96px); } .prose { max-width: 660px; margin-inline: auto; } .prose h1 { font-size: clamp(36px, 4.4vw, 52px); margin-block-end: 16px; } .prose .meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); margin-block-end: 48px; } .prose h2 { font-size: 24px; margin-block: 40px 16px; letter-spacing: -0.005em; font-weight: 500; } .prose h3 { font-size: 18px; margin-block: 28px 8px; color: var(--fg); } .prose p, .prose li { font-size: 16.5px; line-height: 1.65; color: var(--fg-2); } .prose p strong { color: var(--fg); font-weight: 600; } .prose ul { padding-left: 1.1em; } .prose ul li { margin-block-end: 8px; } .prose a { color: var(--accent-soft); border-bottom: 1px solid color-mix(in oklab, var(--accent-soft) 40%, transparent); } .prose a:hover { color: var(--accent); border-bottom-color: var(--accent); } .prose code, .prose .mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-soft); padding: 1px 6px; border-radius: 4px; } .faq-item { border-top: 1px solid var(--hairline); padding-block: 22px; } .faq-item:last-child { border-bottom: 1px solid var(--hairline); } .faq-item h3 { margin: 0 0 8px; font-size: 17px; } .faq-item p { margin: 0; font-size: 16px; }