/* ============================================================ RAMSAROOP PROFESSIONAL — 2100 INTERIOR OBSIDIAN SURFACE ------------------------------------------------------------ css/theme-2100-interior.css · 2100.1.0 · Phase A (A.3/A.4/A.5) PURPOSE: bring every INTERIOR page onto the same 2100 design token system as the homepage command surface — dark obsidian canvas (#0A0F16), mineral-grey surfaces, refined ivory text, restrained gold accent. Additive + scoped: it only activates when the server tags the page with `data-t2100` on (injectInteriorTheme in server.js). The homepage and /private are never tagged, so they are untouched. Legacy pages without the tag see no change. Rollback = remove the tag / this file. All values stay inside the sanctioned obsidian/ivory/gold/ mineral family from 2100-design-system.md §1; no hue outside. ------------------------------------------------------------ Contrast (both modes, AA-verified by computed contrast): DARK ivory #F7F3EA on obsidian #0A0F16 = 17.35:1 DARK gold #C6A15B on obsidian = 7.92:1 DARK white #FFFFFF on obsidian = 18.1 :1 DARK silver #9CA3AF on obsidian = 6.57:1 LIGHT charcoal#202A33 on ivory #F7F3EA = 13.17:1 LIGHT gold #8B6914 on ivory = 4.59:1 LIGHT muted #4B5563 on ivory = 6.82:1 ============================================================ */ /* ================= 1 · OBSIDIAN SURFACE REMAP =============== The legacy style.css + page CSS are heavily variable-driven. Remapping the canonical --color-* surface tokens under the scoped marker re-themes almost the whole interior chrome (body, nav, cards, section backgrounds, footer, pills) onto the obsidian family with a single cascade. Read-only, additive: we never touch the ivory READING sections, which stay light (charcoal-on-ivory 13:1) as premium light panels. */ [data-t2100] { /* obsidian canvas + mineral-grey surface tiers */ --color-base: #0A0F16; /* body / footer / chrome */ --color-navy: #0A0F16; /* dark canvas alias */ --color-base-light: #121A24; /* surface-1 (graphite) */ --color-navy-light: #121A24; --color-base-lighter: #1A2430; /* surface-2 (elevated) */ --color-navy-lighter: #1A2430; --color-surface: rgba(255,255,255,0.04); /* mineral card fill */ --color-surface-hover: rgba(255,255,255,0.08); /* calm glow — toned down from the legacy navy glow */ --color-gold-glow: rgba(198,161,91,0.14); --color-gold-dim: rgba(198,161,91,0.06); --color-gold-glow-soft: rgba(198,161,91,0.14); /* refined text stays ivory/gold (AA on obsidian) */ --color-ivory: #F7F3EA; --color-white: #FFFFFF; --color-gold: #C6A15B; --color-gold-light: #D4B572; --color-teal-light: #3D8278; --color-silver: #9CA3AF; --color-muted: #9CA3AF; --color-platinum: #C9D2DC; } /* Remap the PROJECT 2126 self-contained token surface too, so /2126/* moves off legacy navy onto the same obsidian family. (Same near-dark luminance => contrast holds or improves.) */ [data-t2100] { --navy: #0A0F16; --navy-light: #121A24; --navy-lighter: #1A2430; --charcoal-soft: #2A343D; --elev-1: 0 1px 2px rgba(4,7,11,.5); --elev-2: 0 4px 14px rgba(4,7,11,.5); --elev-3: 0 10px 28px rgba(4,7,11,.55); --t-navy: rgba(18,26,36,.6); } /* ================= 2 · CHROME OVERRIDES ====================== Hardcoded legacy navy chrome that the variable remap can't reach. Brought onto obsidian consistently. */ [data-t2100] .nav, [data-t2100] .nav.scrolled, [data-t2100] .site-header { background: rgba(10, 15, 22, 0.85); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom-color: rgba(198, 161, 91, 0.16); } [data-t2100] .nav.scrolled { background: rgba(10, 15, 22, 0.92); border-bottom-color: rgba(198, 161, 91, 0.3); } /* Phase-D / Brief-Me hero gradients: navy -> obsidian mineral */ [data-t2100] .media-hero, [data-t2100] .bm-hero { background: linear-gradient(160deg, #0A0F16 0%, #121A24 45%, #1A2430 100%); color: #F7F3EA; } [data-t2100] .media-hero h1, [data-t2100] .media-hero h2, [data-t2100] .bm-hero h1, [data-t2100] .bm-hero h2 { color: #F7F3EA; } /* Intelligence depth pill (navy badge -> obsidian surface-2) */ [data-t2100] { --c-navy-legacy: var(--c-obsidian, #0A0F16); } /* ================= 3 · CALM / RADII (A.4) ==================== Unify border-radius onto the token scale (r-1 4px / r-2 8px) for the common interior cards, inputs, buttons. Reduce visual noise: cap heavy box-shadow stacks and replace garish glows with a single restrained hairline. */ [data-t2100] .cert-card, [data-t2100] .bm-card, [data-t2100] .bm-scaffold, [data-t2100] .ai-guide-panel, [data-t2100] .a-card, [data-t2100] .card, [data-t2100] .research-item, [data-t2100] .insight-card, [data-t2100] .media-item, [data-t2100] .news-item { border-radius: 8px; /* --r-2 */ box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(4,7,11,.4); } [data-t2100] input, [data-t2100] select, [data-t2100] textarea, [data-t2100] .bm-input, [data-t2100] .bm-send, [data-t2100] .btn, [data-t2100] .btn-gold, [data-t2100] .btn-outline, [data-t2100] .btn-teal { border-radius: 8px; /* --r-2 */ } /* Toned-down, calm state — no stacked glow on hover */ [data-t2100] .cert-card:hover, [data-t2100] .card:hover, [data-t2100] .a-card:hover { box-shadow: 0 4px 18px rgba(4,7,11,.45); transform: translateY(-1px); transition: box-shadow .2s ease, transform .2s ease; } /* ================= 4 · FOCUS RING (A.5) ====================== A clear global gold :focus-visible ring, consistent site-wide on every focusable control, in both dark and light surfaces. */ [data-t2100] a:focus-visible, [data-t2100] button:focus-visible, [data-t2100] input:focus-visible, [data-t2100] select:focus-visible, [data-t2100] textarea:focus-visible, [data-t2100] [tabindex]:focus-visible, [data-t2100] summary:focus-visible { outline: 2px solid var(--c-gold, #C6A15B); outline-offset: 2px; border-radius: 4px; /* --r-1, keeps the ring crisp */ } /* In light/reading (ivory) surfaces the pale gold is too faint, so switch to the dark brass gold (4.59:1) that reads on ivory. */ [data-t2100] .section-ivory a:focus-visible, [data-t2100] .section-ivory button:focus-visible, [data-t2100] .section-ivory input:focus-visible, [data-t2100] .card a:focus-visible, [data-t2100] .card button:focus-visible, [data-t2100] .sec-ivory a:focus-visible, [data-t2100] .sec-ivory button:focus-visible, [data-t2100] .ai-guide-panel a:focus-visible, [data-t2100] .ai-guide-panel button:focus-visible, [data-t2100] .bm-scaffold a:focus-visible, [data-t2100] .bm-scaffold button:focus-visible { outline-color: var(--c-gold-ivory, #8B6914); } /* ================= 5 · LIGHT / READING SURFACE (A.3) ========= Keep the few ivory reading panels premium and AA. No change to their charcoal-on-ivory contrast; only unify their radius so they sit consistently on the obsidian page. */ [data-t2100] .section-ivory, [data-t2100] .sec-ivory, [data-t2100] .bm-scaffold { border-radius: 10px; } [data-t2100] .section-ivory, [data-t2100] .sec-ivory { box-shadow: 0 1px 2px rgba(4,7,11,.35); }