/* ============================================================ CiteOwl — 2026 Redesign Egyptian palette: deep lapis chrome, papyrus document ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ---- Chrome (panels, sidebar, topbar) — deep warm charcoal ---- */ /* Dark + near-neutral: a hint of warmth, recedes hard so papyrus is hero. * Restraint + tonal (warm-on-warm) harmony with the papyrus reads premium. * Alt palette "deep lapis-ink" (Egyptian blue+gold identity) — to flip: * bg #12161e / bg2 #161b25 / surface #1b212d / hover #202736 / * active #28303f / border #2c3441 / panel #36404f, --chrome-bg-rgb 18,22,30, * text t1 #e6e7ea / t2 #99a2b0 / t3 #6b7380 / t4 #555d6b, gradient * linear-gradient(180deg,#161b25,#12161e 50%,#141821), glass base #12161e. */ --chrome-bg: #16140f; --chrome-bg2: #1c1812; --chrome-surface: #211d17; --chrome-hover: #28241d; --chrome-active: #302a21; --chrome-border: #332e26; --panel-border: #3d362c; --chrome-bg-rgb: 22,20,15; /* base for translucent modal/overlay surfaces */ /* ---- Document area (papyrus) ---- */ --doc-bg: #d4c9a8; --doc-surface: #ccc1a0; --doc-hover: rgba(0,0,0,0.04); --doc-border: rgba(0,0,0,0.10); --doc-border-strong: rgba(0,0,0,0.22); --doc-figure-bg: #fff; /* figure plate — matches baked-in white */ --doc-shadow: 0 1px 4px rgba(0,0,0,0.08); /* soft elevation on the light page */ /* ---- Text — high contrast everywhere ---- */ /* Panel: warm alabaster + warm-charcoal greys (no blue) */ --t1: #e8e2d6; --t2: #a39a8b; --t3: #7a7264; --t4: #615a4e; --btn-text: #fff; /* Document: dark ink on papyrus */ --td1: #10100a; --td2: #22201a; --td2b: #2e2a20; --td3: #5e5444; /* ---- Accent (honey amber, used sparingly) — pops on warm umber ---- */ --accent: #e0ad4e; --accent-rgb: 224,173,78; --accent-hover: #ecbb5e; --accent-dim: rgba(224,173,78,0.14); --accent-text: #e0ad4e; --accent-border: rgba(224,173,78,0.30); --accent-subtle: rgba(224,173,78,0.06); /* Document-context accent (red ochre on papyrus — scribe's ink) */ --doc-accent: #8b3a2a; --doc-accent-dim: rgba(139,58,42,0.12); --doc-accent-border: rgba(139,58,42,0.30); --doc-ochre: var(--doc-accent); --doc-ochre-dim: var(--doc-accent-dim); --doc-ochre-hover: #9a4433; /* ---- Semantic (Egyptian minerals) ---- */ --red: #d45840; --red-hover: #dc6248; --green: #4a8c5c; --red-bg: rgba(212,88,64,0.14); --green-bg: rgba(74,140,92,0.14); --red-border: rgba(212,88,64,0.40); --green-border: rgba(74,140,92,0.40); --warning: #b45309; /* ---- Overlay & chrome surfaces ---- */ --overlay-bg: rgba(0,0,0,0.60); --chrome-gradient: linear-gradient(180deg, #1c1812 0%, #16140f 50%, #19150f 100%); --chrome-border-subtle: rgba(255,255,255,0.06); /* ---- Document surface extras ---- */ --doc-bg-light: #dcd0b0; --doc-border-subtle: rgba(0,0,0,0.06); --doc-hover-subtle: rgba(0,0,0,0.02); /* ---- Diff layer backgrounds ---- Unified single-intensity diff system. Every diff wash (inline word spans, source cards, section blocks, figures, paragraph wraps, chat diff boxes) uses --green-bg / --red-bg at 14%. Faint/block aliases below kept as backwards-compat pointers — every legacy callsite resolves to the same canonical 14% color so the codebase reads consistently regardless of which token name was used. */ --diff-add-faint: var(--green-bg); /* deprecated alias → 14% */ --diff-del-faint: var(--red-bg); --diff-add-block: var(--green-bg); --diff-del-block: var(--red-bg); /* ---- Scrollbar ---- */ --scroll-thumb: rgba(160,130,80,0.18); --scroll-thumb-hover: rgba(160,130,80,0.35); --scroll-thumb-active: rgba(160,130,80,0.50); /* ---- Type — font families ---- */ --sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Menlo', monospace; /* ---- Type scale — one token per visual role ---- * * Never hardcode `font: 500 32px/1.2 var(--serif)` inline anywhere — * always pick the token that matches the role. If a new size feels * needed, that's a signal the role doesn't fit; talk it out before * adding another token. Every marketing heading/body token is a clamp() * whose floor is the phone size and ceiling the desktop size — let the * clamp do the responsive work, never re-pin a size per breakpoint. * * Roles: * --font-display Landing hero — the one place we go enormous. Floor * (31px) is the largest the long hero headline fits on * two lines at 390px. * --font-section Big serif marketing-block heading — landing section * headings AND interior page-hero titles (pricing, * blog index). Floor is phone-sized so page heroes that * don't carry their own mobile override don't overshoot. * --font-subhead Secondary serif heading — a label sitting over a card * grid (blog index sections, FAQ / Read-next labels). * One rank below --font-section, clearly above card titles. * --font-title Page / panel / modal titles — same serif family, sized * for a form panel (28-40px) not a marketing block. Also * the blog article headline (with a tighter line-height). * --font-body Paragraphs and long copy (fixed 17px, app chrome) * --font-lead Marketing prose — hero subtitles + section descriptions * across landing / pricing / blog. Clamps 15px→19px so it * scales smoothly instead of jumping at a breakpoint. * --font-ui Rows, labels, controls, buttons, nav — the chrome * --font-ui-sm Small chrome labels (pills, sidebar meta, chip text, * keyboard-shortcut hints). 12px sans, medium weight. * Replaces every `9-12px var(--sans)` one-off. * --font-eyebrow Small uppercase gold accent above sections (12px caps, * wide 0.32em letter-spacing — landing's section eyebrow) * --font-eyebrow-sm Smaller eyebrow variant — tier names, table column heads, * status badges. Pair with text-transform: uppercase and * a tighter letter-spacing (~0.18-0.22em). * --font-mono Code-style numeric / keyboard-shortcut text (12px mono) * --font-doc-serif Document body — the manuscript surface. Source Serif * at the size + leading academic prose needs. * --font-doc-title Document title (.doc-title-edit) + change/preview titles */ --font-display: 500 clamp(31px, 6vw, 88px)/1.18 var(--serif); --font-section: 500 clamp(30px, 5.2vw, 76px)/1.22 var(--serif); --font-subhead: 500 clamp(24px, 1.4vw + 16px, 30px)/1.3 var(--serif); --font-title: 500 clamp(28px, 3.2vw, 40px)/1.22 var(--serif); --font-body: 400 17px/1.6 var(--sans); --font-lead: 400 clamp(15px, 1vw + 9px, 19px)/1.6 var(--sans); --font-ui: 400 14px/1.5 var(--sans); --font-ui-sm: 500 12px/1.5 var(--sans); --font-eyebrow: 600 12px var(--sans); --font-eyebrow-sm: 500 11px var(--sans); --font-meta: 500 11px var(--sans); /* small supporting text (timestamps, counts, field meta) — same metrics as eyebrow-sm but NOT uppercase */ --font-mono: 400 12px var(--mono); --font-doc-serif: 400 16px/1.82 var(--serif); --font-doc-title: 300 clamp(32px, 4vw, 40px)/1.2 var(--serif); /* Letter-spacing shared by serif headings + eyebrows */ --track-heading: -0.022em; --track-eyebrow: 0.18em; /* canonical tracking for uppercase section labels */ /* ---- Layout ---- */ --sidebar-w: 240px; --chat-w: 380px; --doc-max-w: 88ch; --ease: cubic-bezier(.4,0,.2,1); --dur: 140ms; --dur-smooth: 240ms; /* deliberate, perceptible motion — height expand/collapse and hover fades; long enough to read as a glide, not a snap */ --radius: 8px; --radius-btn: 8px; /* canonical button radius — every button, one value */ --radius-2xs: 2px; --radius-xs: 3px; --radius-sm: 5px; --radius-lg: 12px; --radius-xl: 18px; /* canonical glass panel radius — pricing card, account modal */ /* ---- Canonical glass surface ---- * Reused by every translucent panel/card so they all read as the same * material. Used by .pricing-card on landing, #acct-panel on the account * modal, #chat-panel + #left-sidebar in the app shell, and any future * glass surface. */ --surface-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.022) 0%, rgba(255,255,255,0.004) 100%), #16140f; --surface-glass-border: 1px solid rgba(255,255,255,0.07); --surface-glass-blur: none; /* ---- Canonical gold pill gradient ---- * Single-sources the gold CTA gradient shared by .landing-btn-primary * (components.css) and re-used by the export download button, preview * restore, and landing CTAs. */ --grad-gold-pill: linear-gradient(180deg, #f0d68f 0%, var(--accent) 55%, #b58a30 100%); /* Papyrus plaque/seal cream — the brand lockup surface (matches the owl's * negative-space eyes). Shared by .site-brand, the footer plaque, and the * phone nav owl seal. */ --grad-papyrus: linear-gradient(180deg, #ddd1b0 0%, #cfc29c 100%); /* Ink color for text/icons sitting on a gold surface (pills, CTAs, spinners). */ --on-gold: #1a1208; /* Gold "Owl" wordmark gradient — the brand lockup treatment (hero, auth). */ --grad-gold-brand: linear-gradient(180deg, #f6d98a 0%, #dca33c 58%, #c0892a 100%); /* ---- Sibling button gradients ---- * Three canonical button looks share the gold pill's dimensional recipe: * green (accept), red (reject / destructive), and a raised neutral for * normal / secondary buttons. Single-sources what was inlined across * .btn-accept / .btn-reject / .btn-primary / .btn-danger / .acct-btn etc. */ --grad-green-pill: linear-gradient(180deg, #6fa67d 0%, var(--green) 55%, #2f5a3f 100%); --grad-red-pill: linear-gradient(180deg, #cf7866 0%, var(--red) 55%, #8a3020 100%); --grad-neutral-btn: linear-gradient(180deg, #2c2820 0%, #211d17 100%); /* ---- Font-size scale ---- */ --fs-xs: 11px; --fs-sm: 12px; --fs-base: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 20px; --fs-3xl: 23px; --fs-4xl: 26px; /* ---- Spacing scale ---- * One unified scale for every padding / margin / gap. Fine 2px steps in the * small range (where a 2px change is a big proportional change), 4px through * the mid range, then the structural band sizes. Marketing spacing resolves * to a step here; positioning offsets (top/left/right/bottom) and one-off * optical nudges stay raw. Renumbered 2026-06-18 from the old 4-48 scale — * the indices changed, so reference by token, never assume --space-N == 4N. */ --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 18px; --space-10: 20px; --space-11: 22px; --space-12: 24px; --space-13: 26px; --space-14: 28px; --space-15: 32px; --space-16: 36px; --space-17: 40px; --space-18: 44px; --space-19: 48px; --space-20: 56px; --space-21: 64px; --space-22: 72px; --space-23: 80px; --space-24: 88px; --space-25: 96px; --space-26: 120px; --space-27: 140px; /* ---- Z-index scale ---- */ --z-section: 1; --z-sticky: 10; --z-dropdown: 200; --z-tooltip: 1000; --z-modal: 2000; --z-overlay: 9999; /* ---- Elevation ---- */ --shadow-sm: 0 8px 24px rgba(0,0,0,0.40); --shadow-md: 0 12px 48px rgba(0,0,0,0.45); --shadow-lg: 0 24px 80px rgba(0,0,0,0.50); /* ---- Indicators (border-left for change/preview states) ---- */ --indicator-changed: 3px solid var(--accent); --indicator-added: 3px solid var(--green); --indicator-removed: 3px solid var(--red); /* ---- Diff token colors ---- */ --diff-add-color: #6cb87a; --diff-del-color: #d88070; --diff-add-body: #2d6b3a; --diff-del-body: #a84030; /* ---- macOS window-chrome dots (used by landing mockup) ---- */ --macos-red: #ff5f57; --macos-yellow: #febc2e; --macos-green: #28c840; /* ---- Charcoal backgrounds (landing page panels) — formerly lapis ---- */ --lapis-bg-deep: #100e0a; --lapis-bg-card: #1c1812; --lapis-bg-soft: #16140f; /* ---- Notice / warning banner (cream-on-warning) ---- */ --notice-bg: rgba(180,83,9,0.12); --notice-border: rgba(180,83,9,0.32); } html, body { height: 100%; background: var(--chrome-bg); color: var(--t1); font: 13px/1.5 var(--sans); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }