/* ────────────────────────────────────────────────────────────────────────── theme.css — ScreenComply "Editorial" theme (feature-flagged) --------------------------------------------------------------------------- The whole site is token-driven: every page defines a :root block with the same custom-property names (--accent, --bg, --surface, --text, --navy, …) and nav.css / the page styles read those tokens. This file re-maps those token VALUES to the editorial palette (deep forest green + warm cream + a sage rule motif + a serif display face) so the entire product reskins without touching any page's own markup or its :root. It only activates under — which the server stamps per request. With no attribute (or data-sc-theme="classic") nothing here applies and the original theme is untouched. The attribute selector out-specifies each page's bare :root, so the remap always wins. ────────────────────────────────────────────────────────────────────────── */ :root[data-sc-theme="editorial"] { /* Brand / accent — deep forest green replaces the old teal-green. */ --accent: #0d3b2b; --accent2: #0a2c20; --accent-ink: #0a2c20; --accent-bright: #14513a; /* --accent-g is a PALE tint used as a chip/badge background under dark-green text (never a solid fill), so it must stay light or text vanishes. */ --accent-g: rgba(13, 59, 43, 0.10); --accent-soft: #e6efe8; --brand-green: #0d3b2b; --brand-teal: #0a2c20; --green: #0d3b2b; --good: #0d3b2b; --good-bg: #e6efe8; --ok: #0d3b2b; --ok-bg: #e6efe8; /* Surfaces — warm parchment instead of cool slate. Cards stay white so dense data tables keep their contrast. */ --bg: #f2efe6; --bg-app: #f2efe6; --surface: #f2efe6; --surface-2: #e9e4d6; --bg-soft: #ece7db; --card: #ffffff; --bg-card: #ffffff; --card-h: #fbfaf5; --card-elev: #ffffff; --code-bg: #12291f; /* Ink — very dark green-black reads warmer than slate navy. */ --navy: #123024; --text: #16261e; --text1: #16261e; --ink: #16261e; --text2: #3a4a42; --text3: #6b7a70; --muted: #6b7a70; --muted2: #8a978d; --faint: #8a978d; --note: #3a4a42; /* Hairlines — warm tan. */ --border: #e2ddcd; --border-h: #d3cdb9; --border-strong: #c8c1ab; --line: #e2ddcd; --line-strong: #d3cdb9; /* Status palette (one colour per state, used across every page). */ --mint: #cfe8d6; /* accent rule, selected states, positive pills */ --amber: #b7791f; /* awaiting review, warnings */ --red: #a23b2c; /* high risk, restricted, delete */ --mint-bg: #e6efe8; /* positive pill background */ --amber-bg: #fbf1de; /* amber pill background */ --red-bg: #f6e7e3; /* red pill background */ /* Named aliases the cosmetic pass references directly. */ --rule: #e3ded2; --ink-2: #6b726e; /* Editorial-only helpers (not read by the pages; used by the rules below). */ --sc-sage: #9fc5ac; --sc-serif: 'Lora', 'Newsreader', Georgia, 'Times New Roman', serif; --sc-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ── UI face: DM Sans replaces Inter across body, nav, tables and controls ── Pages hard-code font-family:'Inter' on body and on form controls, so the remap has to name both (controls don't inherit body font). The attribute selector out-specifies each page's bare body/element rules. */ :root[data-sc-theme="editorial"] body, :root[data-sc-theme="editorial"] button, :root[data-sc-theme="editorial"] input, :root[data-sc-theme="editorial"] select, :root[data-sc-theme="editorial"] textarea { font-family: var(--sc-sans); } /* Tabular figures for numeric UI so counts and scores don't jitter. */ :root[data-sc-theme="editorial"] .stat-card .val, :root[data-sc-theme="editorial"] .stat-card .num, :root[data-sc-theme="editorial"] .dash-kpi .k-value, :root[data-sc-theme="editorial"] .score-ring, :root[data-sc-theme="editorial"] .score-badge { font-variant-numeric: tabular-nums; } /* ── Serif display face on the brand + page headings ───────────────────────── Body copy and dense UI stay on Inter for legibility; only the headline layer turns serif, matching the reference brand. */ :root[data-sc-theme="editorial"] .app-logo, :root[data-sc-theme="editorial"] .page-title, :root[data-sc-theme="editorial"] .dashboard-wrap > h1, :root[data-sc-theme="editorial"] .hero h1, :root[data-sc-theme="editorial"] h1.hero-title, :root[data-sc-theme="editorial"] .lander h1 { font-family: var(--sc-serif); font-weight: 500; letter-spacing: -0.005em; } /* The short sage rule that sits above headings in the brand layouts. */ :root[data-sc-theme="editorial"] .page-title::before, :root[data-sc-theme="editorial"] .dashboard-wrap > h1::before { content: ""; display: block; width: 38px; height: 3px; border-radius: 2px; background: var(--mint); margin: 0 0 14px; } /* ── Top navigation — warm translucent bar with a sage top rule ───────────── nav.css hard-codes a white translucent header, so re-skin it explicitly (tokens can't reach a hard-coded rgba). */ :root[data-sc-theme="editorial"] .app-header { background: rgba(242, 239, 230, 0.90); border-top: 3px solid var(--sc-sage); border-bottom: 1px solid var(--border); } :root[data-sc-theme="editorial"] .app-logo span { color: var(--accent); } /* Active nav pills read as forest-on-sage. */ :root[data-sc-theme="editorial"] .topnav .nav-link.active, :root[data-sc-theme="editorial"] .topnav .nav-admin-item.active { color: var(--accent2); background: var(--accent-soft); } /* Footer picks up the warm ground instead of the cool near-white. */ :root[data-sc-theme="editorial"] .app-footer { background: #efeadd; border-top-color: var(--border); } /* Admin avatar chip uses the forest gradient. */ :root[data-sc-theme="editorial"] .acct-avatar.admin { background: linear-gradient(135deg, #0d3b2b 0%, #14513a 100%); } /* The hero eyebrow pill reads as a filled forest-green badge with white text in editorial (on brand), instead of the pale classic chip. */ :root[data-sc-theme="editorial"] .hero-eyebrow { color: #ffffff; background: var(--accent); border-color: rgba(159, 197, 172, 0.40); }