/* ============================================= wazer.ai — main.css Single source of truth for design tokens. Loaded by every page including chat.html. chat.css inherits all tokens from here. ============================================= */ /* -------- 1. Tokens -------- */ :root { /* Backgrounds & surfaces */ --bg-1: #F8F7F5; --bg-2: #F1F0EC; --bg-3: #E9E7E2; --surface: #FDFCFA; --surface-warm: #F5F3EE; --sidebar-bg: rgba(248, 247, 245, 0.55); --nav-bg: rgba(248, 247, 245, 0.82); /* Frosted floating discs (saved-files / notes / private toggles over canvas). */ --floating-disc-bg: rgba(255, 255, 255, 0.55); --floating-disc-icon: var(--ink-faint); /* Ink (text colours) */ --ink: #1A1612; --ink-soft: #5C5249; --ink-faint: #918578; --ink-ghost: #C9C0AE; /* Borders */ --border: rgba(26, 22, 18, 0.07); --border-strong: rgba(26, 22, 18, 0.14); --border-divider: rgba(26, 22, 18, 0.10); /* Accent — fountain pen blue. --accent : functional UI (links, focus, hover) --accent-bright : BRAND-MARK ONLY (wordmark + monogram) */ --accent: #1E3A5F; --accent-deep: #142940; --accent-bright: #2E5184; --accent-soft: rgba(30, 58, 95, 0.10); --accent-softer: rgba(30, 58, 95, 0.05); /* Chat bubbles — used by the landing hero demo (and any chat preview). User message is a filled accent pill; AI message is plain ink text. */ --bubble-user: var(--accent); --bubble-user-text: #fff; --bubble-ai-text: var(--ink); /* Semantic — calibrated to the warm palette. Each : main (dots/icons), -soft (bg @ 10% alpha), -text (darker for text on -soft). */ --success: #5A7A52; --success-soft: rgba(90, 122, 82, 0.10); --success-text: #3F5638; --error: #A8453F; --error-soft: rgba(168, 69, 63, 0.10); --error-text: #7A3530; --warning: #B87C1D; --warning-soft: rgba(184, 124, 29, 0.10); --warning-text: #8A5A14; /* Shadows */ --shadow-xs: 0 1px 2px rgba(26, 22, 18, 0.03); --shadow-sm: 0 1px 3px rgba(26, 22, 18, 0.05); --shadow-md: 0 4px 18px rgba(26, 22, 18, 0.06); --shadow-lg: 0 12px 40px rgba(26, 22, 18, 0.08); --shadow-panel: -4px 0 24px rgba(26, 22, 18, 0.06); --shadow-focus: 0 0 0 3px var(--accent-soft); /* Radius */ --radius-sm: 4px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* Typography — three roles, three families. */ --font-display: "Newsreader", Georgia, serif; --font-ui: "DM Sans", -apple-system, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Layout */ --nav-height: 64px; --content-max: 1200px; --content-narrow: 720px; color-scheme: light; } /* -------- 1b. Dark theme -------- Warm dark, not pure black — espresso/charcoal backgrounds keep the editorial, paper-brand feel; ink inverts to a warm off-white; the fountain-pen blue is brightened so it stays legible on dark. Applied via data-theme on (set by an inline init script in each page , so there's no flash). Every page reads these tokens, so this one block themes the whole app. */ :root[data-theme="dark"] { /* Backgrounds & surfaces — surfaces LIFT above the page (slightly lighter). */ --bg-1: #1B1714; --bg-2: #211C18; --bg-3: #17130F; --surface: #242019; --surface-warm: #2A251D; --sidebar-bg: rgba(33, 28, 24, 0.60); --nav-bg: rgba(27, 23, 20, 0.82); /* Frosted floating discs — dark surface so the icon doesn't vanish; brighter icon tone (the light default blended to a mid-grey that swallowed it). */ --floating-disc-bg: rgba(36, 32, 25, 0.62); --floating-disc-icon: var(--ink-soft); /* Ink — warm off-white scale. */ --ink: #ECE6DC; --ink-soft: #B3A899; --ink-faint: #897E70; --ink-ghost: #574E44; /* Borders — now light-on-dark. */ --border: rgba(236, 230, 220, 0.08); --border-strong: rgba(236, 230, 220, 0.16); --border-divider: rgba(236, 230, 220, 0.11); /* Accent — brightened blue for contrast on dark. */ --accent: #6F9BD1; --accent-deep: #5580B5; --accent-bright: #84ABDD; --accent-soft: rgba(111, 155, 209, 0.16); --accent-softer: rgba(111, 155, 209, 0.08); --bubble-user: var(--accent); --bubble-user-text: #14110D; --bubble-ai-text: var(--ink); /* Semantic — lifted for legibility; -text variants now lighter (text sits on a dark-tinted -soft background, the inverse of light mode). */ --success: #84A878; --success-soft: rgba(132, 168, 120, 0.14); --success-text: #A6C79B; --error: #D8807A; --error-soft: rgba(216, 128, 122, 0.14); --error-text: #E6A7A2; --warning: #D7A445; --warning-soft: rgba(215, 164, 69, 0.14); --warning-text: #E6C078; /* Shadows — deeper on dark (black, not warm ink). */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45); --shadow-panel: -4px 0 24px rgba(0, 0, 0, 0.40); color-scheme: dark; } /* -------- 2. Reset & base -------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 60%, var(--bg-3) 100%); background-attachment: fixed; color: var(--ink); font-family: var(--font-ui); } /* background-attachment: fixed jumps/flickers on mobile: as the URL bar shows and hides during scroll, the fixed gradient re-anchors to a changing viewport and the tone visibly shifts. Let it scroll with the page on small screens. */ @media (max-width: 768px) { body { background-attachment: scroll; } } body { font-weight: 400; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; } input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; } /* -------- 3. Layout -------- */ .container { max-width: var(--content-max); margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: var(--content-narrow); margin: 0 auto; padding: 0 32px; } .page { min-height: 100vh; display: flex; flex-direction: column; } .page-main { flex: 1 0 auto; padding: 120px 0 80px; } .page-main--tight { padding: 100px 0 60px; } /* -------- 4. Typography -------- */ h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 18px; } h1 { font-size: clamp(36px, 4.5vw, 56px); font-variation-settings: "opsz" 60; } h2 { font-size: clamp(28px, 3vw, 36px); font-variation-settings: "opsz" 36; } h3 { font-size: clamp(20px, 2.2vw, 26px); font-variation-settings: "opsz" 24; } p { margin: 0 0 16px; } em, i { font-family: var(--font-display); font-style: italic; font-variation-settings: "opsz" 14; } .eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-faint); } .muted { color: var(--ink-soft); } .faint { color: var(--ink-faint); } .ghost { color: var(--ink-ghost); } .mono { font-family: var(--font-mono); } /* -------- 5. Logo -------- */ .logo { font-family: var(--font-display); font-weight: 500; font-variation-settings: "opsz" 36; font-size: 30px; letter-spacing: -0.025em; color: var(--accent); text-decoration: none; display: inline-block; } /* View Transitions — persistent chrome elements get named so the browser treats them as the same element across page navigations. The nav logo, credit badge, and avatar share names with their chat-shell counterparts (.wordmark, .credits-pill, .avatar). Footer .logo is intentionally excluded — it would conflict with nav .logo on the same page. Targets any .logo inside #nav: works for both logged-out nav-strip and logged-in floating chrome. */ #nav .logo { view-transition-name: wazer-wordmark; } .credit-badge { view-transition-name: wazer-credits; } .user-menu-trigger { view-transition-name: wazer-avatar; } /* Enable cross-document view transitions site-wide. Modern browsers (Chrome 126+, Safari 18+, Edge 126+) animate page navigations with a smooth crossfade by default. Unsupported browsers navigate instantly — nothing breaks, the polish just doesn't render. */ @view-transition { navigation: auto; } /* -------- 6. Chrome (logged-in: floating; logged-out: nav strip) -------- */ /* Chrome fades in once auth state is known. During the brief auth check (~50ms) the body has .chrome-loading and #nav is invisible — prevents the flash of logged-out skeleton before showing logged-in chrome. */ #nav { transition: opacity 0.18s ease; } body.chrome-loading #nav { opacity: 0; } /* Footer is the cross-navigation fallback for logged-out users (since they don't have an avatar dropdown). For authenticated users, the dropdown covers Models / Pricing / Help / Wallet — footer becomes redundant noise and is hidden. */ body.is-authenticated .site-footer { display: none; } /* Logged-in floating chrome — rendered by nav.js when authenticated. Two fixed-positioned elements, no