/* ───────────────────────────────────────────────────────────────────── Iter 25EB — "Slash" landing theme (midnight vault / gilded ledger). An OPT-IN alternative palette for the landing page. Every rule is scoped under html[data-lp-theme^="slash"], so this file is completely inert unless the server stamps that attribute on . With the attribute absent the page renders exactly as it always has — loading this stylesheet costs ~4KB and changes nothing. The attribute is set by _miSendPage() in server.js from either: - the global app_settings flag `landing_theme` (admin-controlled), or - a ?theme=... query override (per-browser preview). Specificity note: html[data-lp-theme^="slash"] .x is (0,2,1) against the base rules' (0,1,0), so this wins regardless of stylesheet order. Do NOT drop the html prefix — landing-hero.css loads after this file. Iter 25EB2: the selector is a PREFIX match (^=), not an exact match, so any theme whose name starts with "slash" inherits this palette and only has to describe its own differences. That is how 'slash-serif' reuses all 29 colour rules below while adding just the type/geometry layer in landing-theme-slash-serif.css. Name any future palette that should NOT inherit these colours with a different prefix. Palette: Refero style 7c38e84b. Obsidian canvas, Copper accent, Gilded gradient reserved for data-viz. ───────────────────────────────────────────────────────────────────── */ html[data-lp-theme^="slash"] { /* Surface stack — spec levels L0→L2. Note the inversion vs. the classic theme: Slash cards sit DEEPER than the canvas, not lighter. */ --lp-bg: #08080a; /* Obsidian — page canvas (L0 Void) */ --lp-bg-2: #040406; /* Onyx — secondary backdrop (L1) */ --lp-surface: #040406; /* Onyx — section bands (L1) */ --lp-card: #121317; /* Carbon — elevated panels (L2) */ --lp-border: #1c1d22; /* Graphite — hairline (L3) */ --lp-border-light: #2e3038; /* Slate — secondary border */ --lp-text: #e2e3e9; /* Bone — 16.0:1 on canvas */ --lp-text-muted: #9194a1; /* Fog — 6.6:1 */ --lp-text-dim: #777a88; /* Steel — 4.7:1, clears WCAG AA */ --lp-accent: #cc9166; /* Copper — the only chromatic colour */ --lp-accent-glow: rgba(204,145,102,0.35); /* Spec: the primary action is the white-fill inversion, not the accent. "Apply Copper only to category labels and editorial links — never to buttons." */ --lp-cta: #ffffff; /* Paper White */ --lp-cta-hover: #e2e3e9; /* Bone */ /* --lp-green / --lp-red are deliberately NOT overridden. They are gain/loss data semantics in the hero mock cards, not brand accent; recolouring them would misreport direction. */ } /* ── Hero ambient ──────────────────────────────────────────────────── */ /* Classic theme uses a mint + blue radial bloom. Slash is monochrome with warmth, so this drops to a faint copper wash. */ html[data-lp-theme^="slash"] .lp-hero::before { background: radial-gradient(ellipse 720px 480px at 25% 30%, rgba(204,145,102,0.10), transparent 60%), radial-gradient(ellipse 640px 480px at 80% 80%, rgba(174,147,87,0.06), transparent 60%); } /* ── Eyebrow — a "category eyebrow", so Copper is on-system here ────── */ html[data-lp-theme^="slash"] .lp-hero-eyebrow { border-color: rgba(204,145,102,0.30); background: rgba(204,145,102,0.05); } /* ── H1 accent word ────────────────────────────────────────────────── */ /* The spec forbids Copper on large text blocks and sets headings in Paper White, so the gradient word becomes white — emphasis comes from type, not colour. */ html[data-lp-theme^="slash"] .lp-hero h1 .accent { color: #ffffff; background: none; -webkit-text-fill-color: #ffffff; } /* ── Icons go monochrome ───────────────────────────────────────────── */ /* Spec: "Icons are monochrome with 1px strokes in #2e3038 or #777a88, never filled with brand color." */ html[data-lp-theme^="slash"] .lp-promise-check { background: transparent; border-color: #2e3038; } html[data-lp-theme^="slash"] .lp-promise-check svg { stroke: #777a88; } /* ── Buttons — white-fill primary, ghost-outline secondary ─────────── */ html[data-lp-theme^="slash"] .lp-btn-primary { background: #ffffff; color: #000000; box-shadow: none; } html[data-lp-theme^="slash"] .lp-btn-primary:hover { background: #e2e3e9; box-shadow: none; } html[data-lp-theme^="slash"] .lp-btn-primary svg { stroke: #000000; } html[data-lp-theme^="slash"] .lp-btn-secondary { background: transparent; color: #ffffff; border: 1px solid #ffffff; } html[data-lp-theme^="slash"] .lp-btn-secondary:hover { background: rgba(255,255,255,0.06); border-color: #ffffff; color: #ffffff; } /* ── Hero carousel cards ───────────────────────────────────────────── */ html[data-lp-theme^="slash"] .card { border-color: #1c1d22; background: #040406; } html[data-lp-theme^="slash"] .card.active-card { border-color: #2e3038; box-shadow: 0 16px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08); } html[data-lp-theme^="slash"] .card-pill .pulse { background: #cc9166; box-shadow: 0 0 6px rgba(204,145,102,0.85); } html[data-lp-theme^="slash"] .card-tag { color: #cc9166; } /* category label — on-spec Copper */ html[data-lp-theme^="slash"] .card-title { color: #e2e3e9; } html[data-lp-theme^="slash"] .card-desc { color: #9194a1; } html[data-lp-theme^="slash"] .card-link { color: #acafb9; } html[data-lp-theme^="slash"] .card-arrow { background: rgba(255,255,255,0.06); } html[data-lp-theme^="slash"] .card-arrow svg { stroke: #777a88; } /* ── Gilded gradient — reserved for data-viz accents only ──────────── */ html[data-lp-theme^="slash"] .brief-line { background: linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 40%, rgb(174,147,87) 70%, rgba(189,157,79,0)); } /* ── Carousel controls ─────────────────────────────────────────────── */ html[data-lp-theme^="slash"] .ctrl { border-color: #2e3038; background: transparent; color: #9194a1; } html[data-lp-theme^="slash"] .ctrl:hover { background: rgba(255,255,255,0.06); border-color: #777a88; } html[data-lp-theme^="slash"] .dot::before { background: #2e3038; } html[data-lp-theme^="slash"] .dot.active::before { background: #cc9166; } html[data-lp-theme^="slash"] .card-label { color: #9194a1; } /* ── Broker step numerals — teal gradient becomes gilded ───────────── */ html[data-lp-theme^="slash"] .lp-broker-step-num { background: linear-gradient(103deg, rgb(174,147,87), rgb(255,240,204) 40%, rgb(174,147,87) 70%); color: #08080a; box-shadow: none; } html[data-lp-theme^="slash"] .lp-broker-steps li:hover { border-color: rgba(204,145,102,0.45); } /* ── Pillar CTA — editorial link, never a copper fill ──────────────── */ /* The classic hover fills with --lp-accent and sets #fff text. Against Copper that is 2.7:1, below WCAG AA, so the Slash theme keeps it an outline instead. */ html[data-lp-theme^="slash"] .lp-pillar-cta:hover { background: rgba(204,145,102,0.10); color: #cc9166; border-color: #cc9166; }