/* * CalcSystems — Editorial Finance design language (Phase 1: tokens + base type) * * Every rule in this file is scoped under [data-theme="editorial"], which is * set on only when the build-time env var PUBLIC_THEME=editorial is * present. When the flag is absent, none of these rules match and the site * renders identically to the existing Tailwind-based design. * * Loaded AFTER Tailwind so its rules win the cascade where they intentionally * override Tailwind utilities on the same elements. * * Phase 1 scope: * - design tokens (colors, typography, spacing, radii) * - body + heading base type * - .serif / .mono / .tabnum helper classes * - selection styling * * Out of scope until later phases: * - masthead, footer, ticker (Phase 2) * - calculator template (Phase 3) * - sweep across calculators (Phase 4) * - homepage (Phase 5) */ /* ─── tokens ─────────────────────────────────────────── */ [data-theme="editorial"] { --serif: "Source Serif 4", ui-serif, Georgia, Cambria, serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; --accent: #7c0e1e; --accent-soft: #fbeae0; --accent-tint: #f5e4d9; --ink: #1a1614; --ink-2: #3a3431; --ink-3: #6d6661; --ink-4: #a39b95; --line: #e6dfd6; --line-2: #efe9df; --paper: #faf7f1; --paper-2: #f3eee4; --paper-3: #ffffff; --rad: 4px; --rad-lg: 6px; --pad-x: clamp(20px, 4vw, 80px); --max: 1280px; } /* ─── base typography ────────────────────────────────── */ /* * Override the existing body base styles set by Tailwind utilities * (`bg-white text-black font-sans antialiased`). Because this stylesheet * is loaded after Tailwind, the same-specificity selector here wins * tie-breaks via cascade order, but we use a slightly-more-specific * descendant selector for paint paranoia. */ [data-theme="editorial"] body { font-family: var(--sans); color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Headings inherit the serif by default in editorial mode. Individual * components can opt back to sans via the .sans helper or Tailwind utility. */ /* Headings get serif font + tighter letter-spacing in editorial mode. * We deliberately do NOT set `color` here. Color inherits from body * (--ink), so any explicit Tailwind utility on the heading — `text-white` * for headers on the maroon card bar, `text-gray-X` elsewhere — keeps * winning. Setting color here at [data-theme] scope (specificity 0,1,1) * would beat .text-white (0,1,0) and break headings on dark backgrounds. */ [data-theme="editorial"] h1, [data-theme="editorial"] h2, [data-theme="editorial"] h3 { font-family: var(--serif); letter-spacing: -0.012em; } [data-theme="editorial"] h1 { font-weight: 700; line-height: 1.04; } [data-theme="editorial"] h2 { font-weight: 700; line-height: 1.10; } [data-theme="editorial"] h3 { font-weight: 600; line-height: 1.20; } /* ─── helper classes ─────────────────────────────────── */ [data-theme="editorial"] .serif { font-family: var(--serif); } [data-theme="editorial"] .sans { font-family: var(--sans); } [data-theme="editorial"] .mono { font-family: var(--mono); } [data-theme="editorial"] .tabnum { font-variant-numeric: tabular-nums; } /* ─── selection ──────────────────────────────────────── */ [data-theme="editorial"] ::selection { background: var(--accent-soft); color: var(--ink); } /* ═══════════════════════════════════════════════════════════════════ PHASE 2 — chrome (masthead, footer, homepage cards). All selectors target classes/IDs/attributes that already exist in BaseLayout.astro and src/pages/index.astro. No DOM changes required. ═══════════════════════════════════════════════════════════════════ */ /* ─── masthead ───────────────────────────────────────── */ /* The existing header is `
`. Use the unique combination of `position: sticky` * + `top-0` (rendered as `top-0` Tailwind class) to target only the masthead, * not other sticky elements. */ [data-theme="editorial"] header.sticky.top-0 { background: var(--paper); border-bottom-color: var(--line); } /* Brand: with two spans (Calc + Systems) */ [data-theme="editorial"] a[aria-label="CalcSystems Home"] > span { font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; } /* "Calc" — first span — keeps accent color via existing text-maroon utility, * which we override to use the accent token. */ [data-theme="editorial"] a[aria-label="CalcSystems Home"] > span:first-child { color: var(--accent); } [data-theme="editorial"] a[aria-label="CalcSystems Home"] > span:last-child { color: var(--ink); } /* Top-level nav links (Calculators dropdown trigger, Embed Widgets, About, * Contact). They share `text-gray-600` via the parent .text-gray-600 wrapper. * Target the wrapper's children. */ [data-theme="editorial"] header.sticky nav > div.text-gray-600 > a, [data-theme="editorial"] #calc-nav-btn { color: var(--ink-2); font-family: var(--sans); font-size: 14px; font-weight: 400; transition: color 0.15s; } [data-theme="editorial"] header.sticky nav > div.text-gray-600 > a:hover, [data-theme="editorial"] #calc-nav-btn:hover { color: var(--accent); } /* Calculators dropdown panel — softer paper background, smaller radius. * Use literal hex values (not var()) for paint-critical properties so a * stray cascade or stale-cache state can't render the panel transparent. */ [data-theme="editorial"] #calc-nav-panel { background-color: #ffffff; border: 1px solid #e6dfd6; border-radius: 6px; box-shadow: 0 8px 32px rgba(26, 22, 20, 0.08); } /* Section eyebrows inside the dropdown (Payroll / Tax / Mortgage / Loan / * Personal Finance / Investment) — these use the exact class combo * `text-[10px] font-bold uppercase tracking-widest text-gray-500`. */ [data-theme="editorial"] #calc-nav-panel div.uppercase.tracking-widest { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink); font-weight: 500; } /* Dropdown links */ [data-theme="editorial"] #calc-nav-panel a[role="menuitem"] { color: var(--ink-2); font-family: var(--sans); } [data-theme="editorial"] #calc-nav-panel a[role="menuitem"]:hover { color: var(--accent); } /* ─── footer ─────────────────────────────────────────── */ /* Single