/* ========================================================================== Vertical Systems: theme tokens -------------------------------------------------------------------------- Five colour-and-type directions for the site revamp. Apply one with (or on any subtree). Every block defines the same tokens, so a component written once re-skins under any theme. Token contract --sc-* the scroll-craft engine contract (canvas, surface, ink, ink-soft, accent, accent-ink, font-display, font-text) --vs-* ours: hairlines, the three hero depth planes (back to front), the semantic success colour, the mono face, shadows Rules that shaped the values - no pure black or pure white; every neutral is tinted toward its world - one accent per theme; it owns the primary action and the active state - --vs-ok is reserved for "passed" states and is never decorative - ink on canvas >= 7:1, ink-soft on canvas >= 4.5:1, accent-ink on accent >= 4.5:1, accent on canvas >= 3:1 (measured in site/palettes/index.html with the WCAG formula) - fonts are Google Fonts, all OFL, none are Inter or Space Grotesk Type sizing, spacing and motion tokens live with the page (board.css or the engine's scrollcraft.css); this file is colour and type only. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Onest:wght@400;500;600&family=Archivo:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Sora:wght@400;500;600&family=Manrope:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Albert+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&family=Red+Hat+Display:wght@500;600;700&family=Red+Hat+Text:wght@400;500;600&family=Fira+Code:wght@400;500&family=Schibsted+Grotesk:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=Figtree:wght@400;500;600&display=swap'); /* Board order (light first): field, porcelain, drafting, glacier, labreport, industrial, then the dark three: signal, altitude, nightshift. Blocks below are in authoring order; order in this file has no effect. */ /* -------------------------------------------------------------------------- 1. SIGNAL (dark, keeps the red thread) Graphite ground, cool bone text, oxblood-to-signal red used as light. Precision instrument: Linear / Raycast calibre. The continuity option. -------------------------------------------------------------------------- */ [data-theme="signal"] { --sc-canvas: #0B0C0E; /* graphite ground */ --sc-surface: #15171B; /* raised panel */ --sc-ink: #E9EBE7; /* cool bone */ --sc-ink-soft: #9AA0A8; /* tinted cool grey, never flat */ --sc-accent: #C41E2A; /* signal red: the button, the active phase, the light */ --sc-accent-ink: #FBF6F4; /* bone on red */ --vs-line: rgba(233, 235, 231, 0.12); --vs-line-strong: rgba(233, 235, 231, 0.22); --vs-plate-1: #1E2127; /* far slab, hazed toward the light */ --vs-plate-2: #15181D; /* mid slab */ --vs-plate-3: #0D0E11; /* near slab, darkest, occludes the subject */ --vs-ok: #4FB56B; /* passed */ --vs-highlight: #4A1418; /* marker plate behind words (oxblood) */ --vs-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.5); --sc-font-display: "Geist", system-ui, sans-serif; --sc-font-text: "Onest", system-ui, sans-serif; --vs-font-mono: "Geist Mono", ui-monospace, monospace; --vs-display-weight: 600; --vs-display-track: -0.035em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: dark; } /* -------------------------------------------------------------------------- 2. FIELD MANUAL (light) Bone ground, near-black ink, drab olive and steel plates, one safety orange. Engineering manual meets contour map. Olive stays on plates, never on the ground: that is the line between a manual and a uniform. -------------------------------------------------------------------------- */ [data-theme="field"] { --sc-canvas: #EFEDE5; /* bone */ --sc-surface: #F8F7F2; /* paper */ --sc-ink: #161715; /* near-black, warm */ --sc-ink-soft: #5B5E56; /* drab tint */ --sc-accent: #DF5F0A; /* safety orange, darkened just enough to clear 3:1 on bone */ --sc-accent-ink: #161715; /* black on orange, as on a hazard label; white fails */ --vs-line: rgba(22, 23, 21, 0.14); --vs-line-strong: rgba(22, 23, 21, 0.28); --vs-plate-1: #DAD7CA; /* far plate, faded drab */ --vs-plate-2: #979B93; /* steel */ --vs-plate-3: #4E5446; /* olive, near */ --vs-ok: #2B7340; /* passed */ --vs-highlight: #F8D9BE; /* marker behind words (orange tint) */ --vs-shadow: 0 10px 28px -12px rgba(40, 42, 30, 0.28), 0 1px 3px -1px rgba(40, 42, 30, 0.18); --sc-font-display: "Archivo", system-ui, sans-serif; --sc-font-text: "IBM Plex Sans", system-ui, sans-serif; --vs-font-mono: "IBM Plex Mono", ui-monospace, monospace; --vs-display-weight: 600; --vs-display-track: -0.03em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: light; } /* -------------------------------------------------------------------------- 3. ALTITUDE (dark) "Vertical" as altitude. Night-prussian ground layered into ridgelines drawn as contour strata, glacier white text, alpenglow ember on the ridge. Not a mountain photo, not a blue sky gradient: a drawing. -------------------------------------------------------------------------- */ [data-theme="altitude"] { --sc-canvas: #0B1622; /* night prussian */ --sc-surface: #132231; /* raised strata */ --sc-ink: #EEF3F6; /* glacier white */ --sc-ink-soft: #9FB2C2; /* cold tint */ --sc-accent: #EE6A45; /* alpenglow ember */ --sc-accent-ink: #14100E; /* near-black on ember */ --vs-line: rgba(238, 243, 246, 0.12); --vs-line-strong: rgba(238, 243, 246, 0.22); --vs-plate-1: #24394D; /* far ridge, hazed */ --vs-plate-2: #172A3A; /* mid ridge */ --vs-plate-3: #0A1119; /* near ridge, darkest */ --vs-ok: #57C078; /* passed */ --vs-highlight: #3F2A24; /* marker plate behind words (ember, dimmed) */ --vs-shadow: 0 12px 32px -12px rgba(2, 8, 16, 0.75), 0 2px 6px -2px rgba(2, 8, 16, 0.5); --sc-font-display: "Sora", system-ui, sans-serif; --sc-font-text: "Manrope", system-ui, sans-serif; --vs-font-mono: "JetBrains Mono", ui-monospace, monospace; --vs-display-weight: 600; --vs-display-track: -0.03em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: dark; } /* -------------------------------------------------------------------------- 4. PORCELAIN (light, advisory) Cool porcelain ground, deep forest-green ink, one cobalt for the action. Private-bank calm. Serif display with a reason: this is the advisory voice, and it is the only direction that says consultancy first. -------------------------------------------------------------------------- */ [data-theme="porcelain"] { --sc-canvas: #F3F4F1; /* porcelain */ --sc-surface: #FBFBF9; /* glaze */ --sc-ink: #173A2D; /* forest */ --sc-ink-soft: #4E6359; /* forest tint */ --sc-accent: #2D4FA8; /* cobalt, restrained */ --sc-accent-ink: #F6F7FB; /* porcelain on cobalt */ --vs-line: rgba(23, 58, 45, 0.14); --vs-line-strong: rgba(23, 58, 45, 0.26); --vs-plate-1: #E3E7E3; /* far stone */ --vs-plate-2: #B7C3BC; /* sage stone */ --vs-plate-3: #1E3F32; /* forest, near */ --vs-ok: #257A4B; /* passed (brighter and greener than the ink) */ --vs-highlight: #D9E1F6; /* marker behind words (cobalt tint) */ --vs-shadow: 0 10px 28px -12px rgba(23, 58, 45, 0.22), 0 1px 3px -1px rgba(23, 58, 45, 0.14); --sc-font-display: "Newsreader", Georgia, serif; --sc-font-text: "Albert Sans", system-ui, sans-serif; --vs-font-mono: "DM Mono", ui-monospace, monospace; --vs-display-weight: 500; --vs-display-track: -0.015em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: light; } /* -------------------------------------------------------------------------- 5. NIGHT SHIFT (dark, warm) The build pipeline running at 4:30 AM. Warm near-black, warm paper text, phosphor amber for the active phase, a green reserved for "passed". Terminal-native without the hacker costume: no scanlines, no glow. -------------------------------------------------------------------------- */ [data-theme="nightshift"] { --sc-canvas: #141210; /* warm near-black */ --sc-surface: #1D1A17; /* warm raised */ --sc-ink: #EFE7DA; /* warm paper */ --sc-ink-soft: #A69C8D; /* warm tint */ --sc-accent: #F6B12D; /* phosphor amber */ --sc-accent-ink: #1A1408; /* near-black on amber */ --vs-line: rgba(239, 231, 218, 0.12); --vs-line-strong: rgba(239, 231, 218, 0.22); --vs-plate-1: #2B2622; /* far, lamp-lit */ --vs-plate-2: #1F1B18; /* mid */ --vs-plate-3: #0F0D0B; /* near, darkest */ --vs-ok: #5FBF7C; /* passed */ --vs-highlight: #4A3711; /* marker plate behind words (amber, dimmed) */ --vs-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.7), 0 2px 6px -2px rgba(0, 0, 0, 0.5); --sc-font-display: "Red Hat Display", system-ui, sans-serif; --sc-font-text: "Red Hat Text", system-ui, sans-serif; --vs-font-mono: "Fira Code", ui-monospace, monospace; --vs-display-weight: 600; --vs-display-track: -0.03em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: dark; } /* -------------------------------------------------------------------------- 6. DRAFTING VELLUM (light) An architect's drafting sheet: cool vellum, graphite ink, blueprint-blue plates, one red pencil for the action. Maps to the Architect role. -------------------------------------------------------------------------- */ [data-theme="drafting"] { --sc-canvas: #ECEFF1; /* vellum */ --sc-surface: #DFE4E8; /* second sheet */ --sc-ink: #1A1F26; /* graphite */ --sc-ink-soft: #56606B; /* graphite, lighter pressure */ --sc-accent: #B83227; /* red pencil */ --sc-accent-ink: #FBF7F6; /* white on red pencil */ --vs-line: rgba(26, 31, 38, 0.14); --vs-line-strong: rgba(26, 31, 38, 0.26); --vs-plate-1: #C9D3DC; /* far sheet */ --vs-plate-2: #9FB2C4; /* mid sheet */ --vs-plate-3: #2F5D8A; /* blueprint line, near */ --vs-ok: #2B7449; /* passed */ --vs-highlight: #F5D3CF; /* marker behind words (red pencil tint) */ --vs-shadow: 0 10px 28px -12px rgba(26, 31, 38, 0.24), 0 1px 3px -1px rgba(26, 31, 38, 0.14); --sc-font-display: "Schibsted Grotesk", system-ui, sans-serif; --sc-font-text: "Source Sans 3", system-ui, sans-serif; --vs-font-mono: "DM Mono", ui-monospace, monospace; --vs-display-weight: 600; --vs-display-track: -0.03em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: light; } /* -------------------------------------------------------------------------- 7. GLACIER (light) Altitude in daylight: ice-white ground, deep night ink, ridgelines in cold blue-greys, alpenglow held back to the one action. -------------------------------------------------------------------------- */ [data-theme="glacier"] { --sc-canvas: #EEF3F6; /* ice */ --sc-surface: #E1E9EE; /* firn */ --sc-ink: #0C1B2A; /* night */ --sc-ink-soft: #4F6275; /* cold tint */ --sc-accent: #B94E1C; /* alpenglow, deepened for daylight */ --sc-accent-ink: #FBF6F2; /* white on ember */ --vs-line: rgba(12, 27, 42, 0.14); --vs-line-strong: rgba(12, 27, 42, 0.26); --vs-plate-1: #D6E1E8; /* far ridge, hazed */ --vs-plate-2: #AFC3D1; /* mid ridge */ --vs-plate-3: #6F8BA3; /* near ridge */ --vs-ok: #2A7654; /* passed */ --vs-highlight: #F6D9CB; /* marker behind words (ember tint) */ --vs-shadow: 0 10px 28px -12px rgba(12, 27, 42, 0.24), 0 1px 3px -1px rgba(12, 27, 42, 0.14); --sc-font-display: "Sora", system-ui, sans-serif; --sc-font-text: "Figtree", system-ui, sans-serif; --vs-font-mono: "DM Mono", ui-monospace, monospace; --vs-display-weight: 600; --vs-display-track: -0.03em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: light; } /* -------------------------------------------------------------------------- 8. LAB REPORT (light) A security-lab evaluation document: report white, near-black ink, grey plates, cobalt for the action, and a real highlighter (--vs-highlight) that marks words as the reader scrolls. -------------------------------------------------------------------------- */ [data-theme="labreport"] { --sc-canvas: #F6F6F3; /* report stock */ --sc-surface: #ECECE7; /* appendix */ --sc-ink: #111315; /* toner */ --sc-ink-soft: #575B60; /* toner, light */ --sc-accent: #2446C7; /* cobalt */ --sc-accent-ink: #F7F8FD; /* white on cobalt */ --vs-line: rgba(17, 19, 21, 0.14); --vs-line-strong: rgba(17, 19, 21, 0.26); --vs-plate-1: #E4E4DE; /* far sheet */ --vs-plate-2: #C9CAC2; /* mid sheet */ --vs-plate-3: #8B8D86; /* near sheet */ --vs-ok: #2B7449; /* passed */ --vs-highlight: #F2DC5D; /* highlighter */ --vs-shadow: 0 10px 28px -12px rgba(17, 19, 21, 0.22), 0 1px 3px -1px rgba(17, 19, 21, 0.14); --sc-font-display: "IBM Plex Sans Condensed", system-ui, sans-serif; --sc-font-text: "IBM Plex Sans", system-ui, sans-serif; --vs-font-mono: "IBM Plex Mono", ui-monospace, monospace; --vs-display-weight: 600; --vs-display-track: -0.02em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: light; } /* -------------------------------------------------------------------------- 9. INDUSTRIAL PAPER (light) High-key monochrome with one signal red. Continuity with the current brand's red, without its black. Precise engineering, one family of type. -------------------------------------------------------------------------- */ [data-theme="industrial"] { --sc-canvas: #F5F5F4; /* paper */ --sc-surface: #EAEAE8; /* card stock */ --sc-ink: #0B0B0C; /* near-black */ --sc-ink-soft: #5E5E5B; /* warm grey */ --sc-accent: #C62A1F; /* signal red */ --sc-accent-ink: #FCF7F6; /* white on red */ --vs-line: rgba(11, 11, 12, 0.14); --vs-line-strong: rgba(11, 11, 12, 0.26); --vs-plate-1: #E2E2DF; /* far */ --vs-plate-2: #BDBDB8; /* mid */ --vs-plate-3: #3A3A38; /* near, dark inset panel */ --vs-ok: #2A7A4B; /* passed */ --vs-highlight: #F6D2CF; /* marker behind words (red tint) */ --vs-shadow: 0 10px 28px -12px rgba(11, 11, 12, 0.22), 0 1px 3px -1px rgba(11, 11, 12, 0.14); --sc-font-display: "Geist", system-ui, sans-serif; --sc-font-text: "Geist", system-ui, sans-serif; --vs-font-mono: "Geist Mono", ui-monospace, monospace; --vs-display-weight: 500; --vs-display-track: -0.04em; color: var(--sc-ink); background-color: var(--sc-canvas); color-scheme: light; } /* -------------------------------------------------------------------------- Aliases the scroll-craft engine reads. Kept here so a page that mounts the engine under any theme gets matching hairlines and mono without redefining them. -------------------------------------------------------------------------- */ [data-theme] { --sc-hairline: var(--vs-line); --sc-hairline-strong: var(--vs-line-strong); --sc-font-mono: var(--vs-font-mono); }