/* Self-hosted Geist variable fonts (sans 100-900, mono 100-900) */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/Geist-Variable.woff2') format('woff2-variations'); } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/GeistMono-Variable.woff2') format('woff2-variations'); } /* Theme tokens */ :root[data-theme="dark"] { --bg: #0F0E0C; --surface: #1A1815; --surface-2: #15130F; --fg: #F5F2ED; --muted: #A3A097; --border: #2A2724; --accent: #F97A4A; --accent-hover: #E8633A; --accent-fg: #1A0E08; --dot: rgba(245, 242, 237, 0.04); --scrim: rgba(0, 0, 0, 0.55); } :root[data-theme="light"] { --bg: #FAFAF7; --surface: #FFFFFF; --surface-2: #F4F2EC; --fg: #1A1A1A; --muted: #525252; --border: #E8E5E0; --accent: #E8633A; --accent-hover: #D14E25; --accent-fg: #FFFFFF; --dot: rgba(26, 26, 26, 0.06); --scrim: rgba(20, 18, 14, 0.4); } * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--fg); margin: 0; padding: 0; overflow-x: hidden; } /* Desktop / tall viewports: lock the page to viewport height, no scroll. Mobile / short viewports: let content flow and scroll normally. */ @media (min-width: 769px) and (min-height: 601px) { html, body { height: 100%; overflow-y: hidden; } } /* When an overlay (chat panel, Cal modal) is open, lock scroll on both html and body. Mobile's scroll container is , not , so the class lives on . */ html.sif-no-scroll, html.sif-no-scroll body { overflow: hidden !important; touch-action: none; } body { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px); background-size: 24px 24px; background-attachment: fixed; min-height: 100dvh; position: relative; isolation: isolate; } /* Ambient drifting accent glows */ .ambient { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .ambient::before, .ambient::after { content: ""; position: absolute; border-radius: 9999px; filter: blur(90px); will-change: transform; } .ambient::before { width: 70vmax; height: 70vmax; top: -25vmax; right: -20vmax; background: radial-gradient(circle at center, var(--accent) 0%, color-mix(in oklab, var(--accent) 55%, transparent) 30%, transparent 65%); opacity: 0.45; animation: drift-a 14s ease-in-out infinite alternate; } .ambient::after { width: 60vmax; height: 60vmax; bottom: -25vmax; left: -20vmax; background: radial-gradient(circle at center, var(--accent) 0%, color-mix(in oklab, var(--accent) 45%, transparent) 35%, transparent 70%); opacity: 0.32; animation: drift-b 18s ease-in-out infinite alternate; } :root[data-theme="light"] .ambient::before { opacity: 0.10; } :root[data-theme="light"] .ambient::after { opacity: 0.08; } @keyframes drift-a { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-15vmax, 10vmax, 0) scale(1.15); } 100% { transform: translate3d(8vmax, -8vmax, 0) scale(0.92); } } @keyframes drift-b { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(15vmax, -10vmax, 0) scale(1.18); } 100% { transform: translate3d(-10vmax, 8vmax, 0) scale(0.9); } } /* Faint grain — softens flat surfaces */ .grain { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.18; mix-blend-mode: screen; background-image: url("data:image/svg+xml;utf8,"); background-size: 220px 220px; } :root[data-theme="light"] .grain { opacity: 0.05; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } /* Stack order: ambient (0) < grain (1) < main+footer+chat (2) < header (40+). Header z-index is explicit so the theme toggle stays clickable above main. */ main, .footer-cluster, .chat-fab, .fab-label, .chat-panel, .chat-scrim, .modal-backdrop { position: relative; z-index: 2; } header { position: fixed; z-index: 40; background: transparent; border-bottom: 1px solid transparent; transition: background 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease; } header.scrolled { background: color-mix(in oklab, var(--bg) 78%, transparent); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-bottom-color: color-mix(in oklab, var(--border) 60%, transparent); } .footer-cluster, .chat-fab, .fab-label, .chat-panel, .chat-scrim, .modal-backdrop { position: fixed; } .font-mono { font-family: 'Geist Mono', ui-monospace, monospace; } /* Type scale */ .headline { font-family: 'Geist', sans-serif; font-size: clamp(36px, 6vw, 64px); font-weight: 600; line-height: 1.05; letter-spacing: -0.02em; color: var(--fg); text-wrap: balance; margin: 0; } @media (max-height: 700px) { .headline { font-size: clamp(32px, 4.5vw, 48px); } } .subhead { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.5; color: var(--muted); max-width: 58ch; margin: 20px 0 0; } .eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; letter-spacing: 0.02em; color: var(--fg); } .trust { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: var(--muted); letter-spacing: 0.01em; } /* Logo lockup */ .lockup { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 18px; color: var(--fg); letter-spacing: -0.01em; text-decoration: none; display: inline-flex; align-items: baseline; gap: 6px; } .lockup .tilde { color: var(--accent); font-size: 0.92em; } /* Pulsing accent dot */ @keyframes pulseDot { 0%, 100% { opacity: 0.6; } 50% { opacity: 1.0; } } .accent-dot { width: 8px; height: 8px; border-radius: 9999px; background: var(--accent); flex-shrink: 0; animation: pulseDot 2s ease-in-out infinite; display: inline-block; } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 10px; font-family: 'Geist', sans-serif; font-size: 16px; font-weight: 500; line-height: 1; border: 1px solid transparent; transition: background 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms ease; cursor: pointer; white-space: nowrap; text-decoration: none; } .btn:hover { transform: scale(1.02); } .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .btn-primary { background: var(--accent); color: var(--accent-fg); } .btn-primary:hover { background: var(--accent-hover); } .btn-ghost { background: transparent; color: var(--fg); border-color: var(--border); height: 52px; padding: 0 20px; } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } /* Inline icon sizing */ .icon { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; } .icon-sm { width: 16px; height: 16px; } .icon-lg { width: 24px; height: 24px; } /* Top bar icon button */ .icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); background: transparent; border: 0; cursor: pointer; transition: color 200ms ease, background 200ms ease, transform 200ms ease; } .icon-btn:hover { color: var(--fg); transform: scale(1.05); } .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Footer cluster */ .footer-cluster { position: fixed; left: 24px; bottom: 24px; z-index: 30; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 12px; color: var(--muted); line-height: 1.7; } .footer-cluster a { color: inherit; text-decoration: none; } .footer-cluster a:hover { color: var(--fg); } /* Cal modal */ .modal-backdrop { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; z-index: 70; padding: 24px; opacity: 0; transition: opacity 200ms ease; } .modal-backdrop.open { display: flex; opacity: 1; } .modal-card { width: min(760px, 100%); height: min(80vh, 720px); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transform: scale(0.97); transition: transform 200ms ease; } .modal-backdrop.open .modal-card { transform: scale(1); } .modal-head { height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; border-bottom: 1px solid var(--border); font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; color: var(--fg); } .modal-head .tilde { color: var(--accent); } .modal-iframe { flex: 1; width: 100%; border: 0; background: var(--surface); } @media (max-width: 768px) { .modal-backdrop { padding: 0; } .modal-card { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; } } /* Chat FAB */ .chat-fab { position: fixed; right: 24px; bottom: 24px; width: 56px; height: 56px; border-radius: 9999px; background: var(--accent); color: var(--accent-fg); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--accent-hover); cursor: pointer; z-index: 50; transition: background 200ms ease, transform 200ms ease; } .chat-fab:hover { background: var(--accent-hover); transform: scale(1.05); } .chat-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .chat-fab.hidden { display: none; } /* FAB label pill */ .fab-label { position: fixed; right: 96px; bottom: 36px; z-index: 49; background: var(--surface); color: var(--fg); border: 1px solid var(--border); border-radius: 9999px; padding: 10px 16px; font-family: 'Geist', sans-serif; font-size: 14px; line-height: 1; pointer-events: none; opacity: 0; transform: translateX(8px); transition: opacity 300ms ease, transform 300ms ease; white-space: nowrap; } .fab-label.show { opacity: 1; transform: translateX(0); } /* Chat panel — shell around the Deep Chat web component. The internal message list / input area are styled inside the shadow DOM (see app.js). */ .chat-panel { position: fixed; right: 24px; bottom: 24px; width: 380px; height: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; z-index: 60; display: none; flex-direction: column; overflow: hidden; box-shadow: 0 24px 48px -16px rgba(0,0,0,0.35); transform-origin: bottom right; opacity: 0; transform: scale(0.97); transition: opacity 200ms ease, transform 200ms ease; } .chat-panel.open { display: flex; opacity: 1; transform: scale(1); } .chat-scrim { display: none; } @media (max-width: 768px) { .chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 85dvh; border-radius: 16px 16px 0 0; transform-origin: bottom center; transform: translateY(8px); } .chat-panel.open { transform: translateY(0); } .chat-scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 55; opacity: 0; transition: opacity 200ms ease; pointer-events: none; } .chat-scrim.open { display: block; opacity: 1; pointer-events: auto; } } .chat-head { padding: 14px 16px 6px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; } .chat-head-row { display: flex; align-items: center; justify-content: space-between; } .chat-title { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 14px; color: var(--fg); } .chat-title .tilde { color: var(--accent); } .chat-disclaimer { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: var(--muted); margin: 2px 0 8px; letter-spacing: 0.02em; } .chat-handle { width: 36px; height: 4px; border-radius: 9999px; background: var(--border); margin: 6px auto 0; display: none; } @media (max-width: 768px) { .chat-handle { display: block; } } /* Mobile layout for content */ @media (max-width: 768px) { main { padding-top: 72px !important; padding-bottom: 32px !important; min-height: auto !important; align-items: flex-start !important; } .footer-cluster { position: static; margin: 48px 0 0; padding: 0 24px 96px; } .actions-row { flex-direction: column; align-items: stretch; } .actions-row .btn { width: 100%; justify-content: center; } .headline { font-size: clamp(30px, 8vw, 40px) !important; } .subhead { font-size: 16px !important; } } /* Accessibility: reduced motion */ @media (prefers-reduced-motion: reduce) { .accent-dot { animation: none; opacity: 0.95; } .ambient::before, .ambient::after { animation: none; } .btn:hover, .icon-btn:hover, .chat-fab:hover { transform: none; } .modal-backdrop, .modal-card, .chat-panel, .fab-label { transition: opacity 200ms ease; } } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }