/* ============================================================ THE VEIL — Foundations: color + type theveil.dev — the deeper, warm-dark research sibling of sarafova.ai ------------------------------------------------------------ Governing feel: calm, dark, smooth. Polished, plastic-grade finish. Luxury in material and restraint, not in ornament. Warm-dark, never cold. Never pure black, never neon, never a hacker-green terminal. The bridge to sarafova.ai is WARMTH. ONE signature accent (copper/amber) lives in the chrome. Color is allowed to be richer in FIGURES — the Navigator teal, Operator copper and bioluminescent node-glow are reserved for data and never used as UI accents. Fonts load from Google Fonts CDN (Cormorant Garamond + IBM Plex Mono), matching the source sites. See README "Font substitution". ============================================================ */ /* @import is for convenience; production pages should the two families in for faster paint. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap'); :root { /* --------------------------------------------------------- SURFACES — the descent. A vertical depth system: you enter at warm wet-stone (top) and the page darkens, cooling faintly toward a teal abyss as you scroll down. Layers = conceptual depth. --------------------------------------------------------- */ --veil-abyss: #0a0d0d; /* deepest — footers, behind everything */ --veil-base: #131613; /* DEFAULT page background — warm-dark wet stone */ --veil-surface: #1a1e1b; /* raised panel / card */ --veil-surface-2: #232824; /* hover / higher panel / inset wells */ --veil-threshold: #1d1a16; /* warmest stone — the entry band at top of page */ /* Hairlines — warm, low-alpha. Never a hard grey line. */ --veil-line: rgba(229, 214, 195, 0.09); --veil-line-strong: rgba(229, 214, 195, 0.17); /* --------------------------------------------------------- INK — warm off-whites. Never pure #fff. --------------------------------------------------------- */ --veil-ink: #ece3d6; /* primary text — warm paper-white */ --veil-ink-soft: #c2b8a9; /* secondary text */ --veil-ink-mute: #998f80; /* metadata, captions, muted labels — lifted 2026-06-10 for phone/daylight legibility */ --veil-ink-faint: #6e6759; /* faintest — rules, disabled, ghost — lifted 2026-06-10 */ /* --------------------------------------------------------- SIGNATURE ACCENT — copper/amber. The warm light. The ONLY accent in the chrome. Used sparingly, and only where it means something (the active path, the live value, the one link that matters on a page). --------------------------------------------------------- */ --veil-amber: #d68a4c; --veil-amber-bright: #ecab6e; /* hover / emphasis */ --veil-amber-dim: #9c6736; /* pressed / muted accent */ --veil-amber-wash: rgba(214, 138, 76, 0.14); /* tint fills, active bg */ --veil-amber-glow: rgba(214, 138, 76, 0.34); /* focus ring, signal bloom */ /* --------------------------------------------------------- FIGURE / DATA PALETTE — richer, for evidence only. Carried forward and brightened from the existing article: Navigator #4a6e64 · Operator #9b6b54 · node-glow blue. Cognitive postures, NOT moral categories. No winner/loser, no red-green coding. Both postures are valid. --------------------------------------------------------- */ --fig-navigator: #5fa394; /* high-agency, model-guiding posture (teal-green) */ --fig-operator: #c4895f; /* transactional, commissioning posture (copper) */ --fig-node: #4f9fd8; /* bioluminescent node-glow — features in graphs */ --fig-node-soft: #56cabb; /* secondary node / current / cable accent */ --fig-grid: rgba(229, 214, 195, 0.07); /* axis lines, plot framing */ /* --------------------------------------------------------- TYPE --------------------------------------------------------- */ --font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; /* Scale (px). Serif carries the argument; mono carries labels & IDs only. */ --t-display: 72px; /* page-defining title */ --t-h1: 44px; --t-h2: 30px; /* section heads — italic serif */ --t-dek: 24px; /* italic subtitle under a title */ --t-lede: 22px; /* italic opening line */ --t-body: 20px; /* long-form reading */ --t-body-sm: 17px; --t-meta: 12px; /* mono — dates, categories, captions */ --t-label: 11px; /* mono — eyebrows, IDs, figure metadata */ --lh-tight: 1.12; /* @kind font */ --lh-snug: 1.4; /* @kind font */ --lh-body: 1.78; /* @kind font */ /* Mono tracking — labels breathe; IDs sit tight. */ --track-label: 0.22em; --track-meta: 0.16em; /* --------------------------------------------------------- SPACE — 4px base rhythm --------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Reading measure */ --measure: 740px; /* the column for argument */ --measure-wide: 1040px; /* figures & evidence break out to here */ /* --------------------------------------------------------- RADII — soft but tight. Polished plastic, not pillowy. --------------------------------------------------------- */ --r-xs: 3px; --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* --------------------------------------------------------- ELEVATION — the plastic-grade finish. A soft dark drop shadow + a 1px warm top highlight (inset) gives surfaces a faint sheen, as if lit from above. --------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,244,228,0.04); --shadow-2: 0 10px 28px -10px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,244,228,0.055); --shadow-3: 0 24px 60px -18px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,244,228,0.06); --shadow-amber: 0 0 0 1px var(--veil-amber-glow), 0 0 26px -4px var(--veil-amber-glow); /* --------------------------------------------------------- MOTION — calm. Slow fades, gentle ease. No bounce. Descent, never snap. --------------------------------------------------------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-1: 200ms; /* @kind other */ --dur-2: 400ms; /* @kind other */ --dur-3: 700ms; /* @kind other */ } /* ============================================================ SEMANTIC ROLES — drop-in classes mirroring the var scale. Use these directly, or read the vars in your own components. ============================================================ */ .veil-display { font-family: var(--font-serif); font-weight: 500; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--veil-ink); } .veil-h1 { font-family: var(--font-serif); font-weight: 600; font-size: var(--t-h1); line-height: 1.14; letter-spacing: -0.02em; color: var(--veil-ink); } /* Section heads are italic serif — never bold. Carried from sarafova.ai. */ .veil-h2 { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.005em; color: var(--veil-ink-soft); } .veil-dek { font-family: var(--font-serif); font-weight: 400; font-style: italic; font-size: var(--t-dek); line-height: var(--lh-snug); color: var(--veil-ink-mute); } .veil-lede { font-family: var(--font-serif); font-style: italic; font-size: var(--t-lede); line-height: 1.6; color: var(--veil-ink-soft); } .veil-body { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); color: var(--veil-ink); } /* Mono is for the technical voice ONLY: labels, IDs, figure metadata, pair IDs, small data annotations. Never body copy. */ .veil-meta { font-family: var(--font-mono); font-size: var(--t-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--veil-ink-mute); } .veil-label { font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--veil-ink-mute); } /* Pair IDs / inline codes — mono, tight, never uppercased. */ .veil-id { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; color: var(--veil-ink-soft); } .veil-link { color: var(--veil-amber); text-decoration: none; border-bottom: 1px solid transparent; transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); } .veil-link:hover { color: var(--veil-amber-bright); border-bottom-color: var(--veil-amber-dim); }