/* ============================================================================ OSCAR DS — TOKEN LAYER ONLY Excerpted from oscar-ds.css v1.0.0. Load BEFORE style.css. WHY THIS FILE EXISTS The full oscar-ds.css carries a base-element layer that restyles body, h1-h6, canvas, ul, p and the scrollbar track. Orbital Fence is an instrument, not a document: its `.panel h2` is a micro-label, and the DS base layer would push it to 1.74rem with a 27px margin and flatten the HUD. So this host takes the tokens, the focus/selection rings, the scrollbar colours and the reduced-motion block — and none of the `.ods-*` component layer. Everything here is a verbatim excerpt. Do not edit values in this file; re-excerpt from oscar-ds.css when the DS moves, and put host-specific additions in style.css instead. THEME Orbital Fence ships dark only. `` is pinned in the markup, so the `prefers-color-scheme` no-JS fallback from the source has no job here and is not carried over. The light `:root` block IS kept: it is what `[data-theme="dark"]` overrides, and dropping it would mean forking the token block rather than excerpting it. ========================================================================== */ :root { /* --- ratio constants (for calc(), and as documentation) --------------- */ --phi: 1.6180339887; --phi-inv: 0.6180339887; /* 1/phi — the "major" share of a split */ --phi-inv-2: 0.3819660113; /* 1/phi^2 — the "minor" share of a split */ /* --- surfaces --------------------------------------------------------- */ --bg-primary: #e4e4e4; /* page ground — intentionally not white */ --bg-secondary: #f0f0f0; /* raised surfaces: header, section cards */ --bg-tertiary: #0a0a0a; /* inverted chip / code block */ /* --- ink -------------------------------------------------------------- */ --text-primary: #2c2c2c; /* headings, strong copy */ --text-secondary: #4a4a4a; /* body copy — body is NOT primary */ --text-tertiary: #888888; /* meta, dates, captions, scrollbar */ /* --- lines ------------------------------------------------------------ */ --border-primary: #e0e0e0; --border-secondary: #d0d0d0; /* --- accent ----------------------------------------------------------- */ --link-color: #0066cc; --link-hover: #0052a3; --accent: var(--link-color); /* semantic alias — retheme via this */ --accent-hover: var(--link-hover); /* Curated secondary accents. Used sparingly, one per card, for category colour. Never as backgrounds — only as borders, hairlines and labels. */ --accent-red: #c74343; --accent-gold: #ad842b; --accent-green: #247a45; /* --- shadow inks ------------------------------------------------------ */ --shadow-light: rgba(0, 0, 0, 0.05); --shadow-medium: rgba(0, 0, 0, 0.08); --shadow-heavy: rgba(0, 0, 0, 0.15); /* --- shadow ladder ---------------------------------------------------- */ --shadow-header: 0 2px 4px var(--shadow-light); --shadow-sm: 0 2px 6px var(--shadow-light); --shadow-md: 0 4px 12px var(--shadow-medium); --shadow-lg: 0 8px 20px var(--shadow-medium); --shadow-card: 0 4px 12px var(--shadow-heavy); --shadow-card-hover: 0 8px 20px var(--shadow-heavy); /* --- radii ------------------------------------------------------------ */ --radius-sm: 4px; /* chips, buttons, segmented controls */ --radius-md: 8px; /* cards, media, panels — the default */ --radius-photo: 14.6%; /* 1/phi^4 — portraits and square artwork */ /* --- type ------------------------------------------------------------- */ /* Archia is the source typeface (commercial — see README before shipping the files). The stack degrades to a geometric-ish grotesque. */ --font-sans: 'Archia', 'Archia-Bold', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* phi^(1/4) ladder, anchored on 0.95rem body copy */ --fs-micro: 0.75rem; /* n = -2 legal, tiny labels */ --fs-caption: 0.84rem; /* n = -1 card descriptions, meta */ --fs-body: 0.95rem; /* n = 0 the anchor */ --fs-body-lg: 1.07rem; /* n = 1 lead paragraph */ --fs-h5: 1.21rem; /* n = 2 */ --fs-h4: 1.36rem; /* n = 3 */ --fs-h3: 1.54rem; /* n = 4 */ --fs-h2: 1.74rem; /* n = 5 the workhorse section heading */ --fs-h1: 1.96rem; /* n = 6 wordmark / page title */ --fs-display: 2.21rem; /* n = 7 route title only */ --lh-tight: 1.1; /* multi-line headings */ --lh-snug: 1.5; /* dense card copy */ --lh-body: 1.6; /* default */ --lh-prose: 1.75; /* long-form article columns */ --tracking-label: 0.08em; /* uppercase micro-labels get POSITIVE track */ /* --- space: phi^(1/2) ladder, anchored on 8px ------------------------- */ --space-1: 8px; --space-2: 10px; --space-3: 13px; --space-4: 16px; --space-5: 21px; /* the default gutter */ --space-6: 27px; --space-7: 34px; /* section rhythm */ --space-8: 43px; /* card padding, desktop */ --space-9: 55px; --space-10: 70px; /* between major page regions */ /* --- layout ----------------------------------------------------------- */ --measure: 720px; /* prose / home sections */ --measure-wide: 900px; /* project + documentation columns */ --measure-full: 1165px; /* 720 * phi — widest content shelf */ --header-height: 64px; --content-top: 120px; /* clearance under the fixed header */ --gutter: var(--space-5); /* --- motion ----------------------------------------------------------- */ /* The signature curve. Slow, symmetric, used for every colour change so theme swaps feel like one object turning over rather than N repaints. */ --ease-theme: cubic-bezier(0.45, 0, 0.15, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* entrances */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* small UI */ --dur-theme: 0.8s; --dur-hover: 0.25s; --dur-ui: 0.3s; --dur-reveal: 900ms; --lift-card: -5px; /* hover translateY for media cards */ --lift-tile: -4px; /* hover translateY for plain tiles */ /* Shorthand for the colour transition applied to nearly everything. */ --t-color: color var(--dur-theme) var(--ease-theme); --t-surface: background-color var(--dur-theme) var(--ease-theme), border-color var(--dur-theme) var(--ease-theme); --z-canvas: 0; --z-content: 1; --z-header: 100; --z-panel: 998; --z-overlay: 1000; } [data-theme="dark"] { --bg-primary: #1a1a1a; --bg-secondary: #000000dc; /* alpha on purpose: lets a canvas show */ --bg-tertiary: #f0f0f0; --text-primary: #e0e0e0; --text-secondary: #c0c0c0; --text-tertiary: #888888; --border-primary: #404040; --border-secondary: #505050; --link-color: #4d9fff; --link-hover: #6db0ff; --accent-red: #e06666; --accent-gold: #d4a843; --accent-green: #4caf72; --shadow-light: rgba(0, 0, 0, 0.3); --shadow-medium: rgba(0, 0, 0, 0.4); --shadow-heavy: rgba(0, 0, 0, 0.6); } /* ============================================================================ FOCUS + SELECTION The source site has no visible keyboard focus; the DS adds it. Keep it. ========================================================================== */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--accent); color: #fff; } /* ============================================================================ SCROLLBAR ========================================================================== */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-primary); } ::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); } * { scrollbar-color: var(--text-tertiary) var(--bg-primary); scrollbar-width: thin; } /* ============================================================================ REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }