/* ==========================================================================
concepts/concepts.css — the site art-direction layer, post-decision.
LEDGER IS THE SITE LANGUAGE: concepts/switcher.js stamps
synchronously before first paint (the only
exception is the undocumented ?concept= debug override, which renders a
retired direction's cx-* markup over the ledger dials). The [data-concept]
rules for the retired directions below are KEPT as debug-view machinery —
the shell/page rules themselves treat every concept as ledger. Everything
here keys off data-concept plus for per-page treatment. Engine dials
(hue, field, tilt) live in EVD_HOLO_PRESETS in concepts/switcher.js —
this file owns the CSS side only: backgrounds, ink, foil fallback tints,
visibility, and the structural hooks.
MONOCHROME LAW (CONCEPTS.md canon 1): every page is black, white, and
Tailwind Slate. Ink = slate-950/900, paper = white, grays = slate 50-950.
The ONLY color on any page comes from foil canvases and their CSS
fallbacks — the per-concept --hl-* tints at the bottom of this file are
foil, so they may carry subtle color; nothing else here may.
------------------------------------------------------------------------
CONVENTIONS FOR PAGE BUILDERS (the hooks your page CSS relies on)
------------------------------------------------------------------------
1. --page-bg / --page-ink
Your page's main wrapper uses:
background: var(--page-bg); color: var(--page-ink);
Defaults are white canvas / slate ink. The shipped page-shell matrix:
- Surface is a DARK page — slate-900 shell (Aaron: "just for fun";
rule below). Ink and derived tokens keep working: they color-mix
off --page-ink.
- Warranty is a white shell + dark closer band (.cx-dark-band),
from markup — no shell override here.
- everything else: white.
This file also paints body[data-holo-page] with the same pair so
overscroll matches. NEVER hardcode white/black page backgrounds in
page CSS — always go through these two variables.
2. .cx-dark-band
Section helper for a "dark inner band" moment — slate-950 background
with white ink in ALL FOUR concepts (dark closers, obsidian's home
hero band, Scan's 60-seconds beat). It re-points --page-bg/--page-ink
locally and sets isolation:isolate so inline foil pills (.hl,
z-index:-1) render. Add data-navtheme="ink-dark" in markup if the
band sits under the nav.
3. Concept-conditional decoration
.cx-only-sovereign / .cx-only-ledger / .cx-only-obsidian /
.cx-only-specimen → renders ONLY in that concept.
.cx-not-sovereign / .cx-not-ledger / .cx-not-obsidian /
.cx-not-specimen → renders in every concept EXCEPT that one.
TRANSITIONAL (one release): the v2 spellings .cx-only-filigrane /
.cx-not-filigrane still appear in page markup and are honored as
aliases of the -specimen helpers (comma selectors below). New markup
must use -specimen; the -filigrane branches are removed once every
page has migrated.
These only ever apply display:none — they never force a display
value, so your own display:flex/grid on the element survives when
visible. Use for decorative extras, never for core content. When
data-concept is absent (scripts blocked) the page behaves as
sovereign.
4. Structural hooks (defined here, placed by pages)
4a. .cx-toprule — the full-width product-pattern foil rule directly
below the nav. v3: no longer ledger-only — MULTIPLE concepts use
it (ledger on every page; obsidian as the "glowing top rule" on
dark pages; specimen as the sheet frame's top edge). So this
file now only POSITIONS the hook, for every concept; PRESENCE is
decided by the element's own gating classes (cx-only-* /
cx-not-*) and page CSS. Place ONE
``
as the first child of (or right after the nav host).
position:absolute (top of the document, under the sticky nav's
resting position) rather than fixed: the rule is printed on the
sheet and scrolls away with it. Pattern per page (canon 4):
home=logo tile, surface=logo tile (dots retired from page use),
scan=lines, reporting=guilloche, warranty=mix.
.cx-toprule--specimen is an optional modifier for specimen's
sheet-frame edition: slightly inset from the margins (clear of
the frame columns) and closer to a hairline.
4b. .cx-has-watermarks — the sheet-frame layout guard (v2's
filigrane hook, kept verbatim as an implementation detail).
Pages that place `.hl--watermark` margin columns add this class
to ; in specimen this file then pads on both sides
so content clears the columns. An explicit body class was chosen
over body:has(.hl--watermark) because it does not depend on
:has() support and is deterministic. (Watermark-column markup
itself carries .cx-only-specimen — transitional:
.cx-only-filigrane — since the tables ban it elsewhere.)
Under specimen the columns themselves run NARROWER than the
hl--watermark default: clamp(10px,1.2vw,18px) — frame furniture,
not a feature.
4c. .cx-sheet-bottom — specimen's sheet-frame bottom edge: a
hairline full-width foil rule pinned to the bottom of the
viewport (the frame is "always in view at the edges"). Pages
place ``; this file positions it under
[data-concept="specimen"] only.
4d. .cx-spotlight — obsidian's dark-hero helper: a monochrome radial
slate-900 → black vignette background (the "spotlight" the seal
and globe sit under). Pure slate — legal under the monochrome
law — so it is defined ungated; the tables recommend it only on
obsidian's dark heroes.
5. Foil tints
--hl-c1..c4 / --hl-s1..s2 (declared in assets/holo/holo-fallback.css)
get per-concept CSS-fallback overrides here; the engine retints live
surfaces at runtime from EVD_HOLO_PRESETS. Never touch them in page
CSS. These are the one sanctioned place color exists. Warranty's
emerald (a cold green→teal path, never flat green) comes from the
engine at runtime — never from page chrome.
========================================================================== */
/* ---------- 1. page background / ink hooks ---------- */
:root {
--page-bg: var(--canvas);
--page-ink: var(--ink);
/* the universal dark: slate-950 in ALL concepts (dark bands + dark pages).
Do NOT override per concept — .cx-dark-band must read identically
everywhere. */
--cx-dark-bg: var(--slate-950);
--cx-dark-ink: #fff;
/* the concept's page-shell black (dark PAGES may go deeper than bands) */
--cx-page-black: var(--slate-950);
/* resting height of the injected sticky nav (site.css .nav__in metrics) */
--cx-nav-h: 58px;
}
/* body carries the pair too, so overscroll/edges match the page wrapper */
body[data-holo-page] {
background: var(--page-bg);
color: var(--page-ink);
}
/* -- Surface is a dark page: SLATE-900 shell (Aaron: "just for fun" —
lighter than the slate-950 bands). No concept prefix, so it also
holds when data-concept is absent (scripts blocked) and in the debug
?concept= views. --cx-page-black is re-pointed at body scope so
descendants (e.g. .cx-spotlight) fall to the same shell tone. The
white mid-band ("the inverted plate") is page markup, not a shell
override. -- */
body[data-holo-page="surface"] {
--cx-page-black: var(--slate-900);
--page-bg: var(--cx-page-black);
--page-ink: var(--cx-dark-ink);
}
/* -- no other shell overrides: Warranty's dark treatment is the closer
band (.cx-dark-band), from markup. Debug ?concept= views inherit the
same ledger shells. -- */
/* ---------- 2. dark inner band (slate-950 / white in ALL concepts) ---------- */
.cx-dark-band {
--page-bg: var(--cx-dark-bg);
--page-ink: var(--cx-dark-ink);
background: var(--cx-dark-bg);
color: var(--cx-dark-ink);
isolation: isolate; /* inline foil pills (.hl, z-index:-1) need a local stacking context */
}
/* obsidian's spotlight: monochrome radial vignette for dark heroes —
slate-900 core falling to the page black (see header §4d) */
.cx-spotlight {
background: radial-gradient(
120% 100% at 50% 32%,
var(--slate-900) 0%,
var(--cx-page-black) 68%
);
}
/* ---------- 3. concept-conditional visibility helpers ----------
Show/hide only — never assign a positive display value. Missing
data-concept (scripts blocked) is treated as LEDGER — the site language.
The -sovereign / -obsidian / -specimen branches are debug-view machinery
for the retired directions (?concept= only); the -filigrane spellings
remain as legacy aliases of -specimen where old markup still carries
them. */
html:not([data-concept="sovereign"]) .cx-only-sovereign { display: none !important; }
html[data-concept]:not([data-concept="ledger"]) .cx-only-ledger { display: none !important; }
html:not([data-concept="obsidian"]) .cx-only-obsidian { display: none !important; }
html:not([data-concept="specimen"]) .cx-only-specimen,
html:not([data-concept="specimen"]) .cx-only-filigrane { display: none !important; }
[data-concept="sovereign"] .cx-not-sovereign { display: none !important; }
[data-concept="ledger"] .cx-not-ledger,
html:not([data-concept]) .cx-not-ledger { display: none !important; }
[data-concept="obsidian"] .cx-not-obsidian { display: none !important; }
[data-concept="specimen"] .cx-not-specimen,
[data-concept="specimen"] .cx-not-filigrane { display: none !important; }
/* ---------- 4. structural hooks ---------- */
/* 4a. the product-pattern top rule (see header §4a). v3: positioning is
UNIVERSAL — any concept that shows a .cx-toprule gets the same geometry;
presence is the markup gating's job (cx-only-* / cx-not-* on the element
itself), so there is no per-concept display rule here anymore. The
.hl.cx-toprule compound keeps specificity level with holo-fallback's
.hl.hl--rule.hl-gl geometry so this placement wins in both fallback and
engine states (this file loads after holo-fallback.css). z-index 40 sits
under the nav (50). */
.hl.cx-toprule,
.hl.cx-toprule.hl-gl {
display: block;
position: absolute;
top: var(--cx-nav-h);
left: 0;
right: 0;
width: auto;
height: 10px;
translate: none;
z-index: 40;
}
/* specimen's sheet-frame edition: inset clear of the frame columns and
nearer a hairline (optional — plain .cx-toprule is also legal there) */
.hl.cx-toprule.cx-toprule--specimen,
.hl.cx-toprule.cx-toprule--specimen.hl-gl {
left: clamp(10px, 1.2vw, 18px);
right: clamp(10px, 1.2vw, 18px);
height: 6px;
}
/* 4b. the sheet-frame margins (see header §4b). The padding guard keeps
the v2 clamp; the columns themselves narrow under specimen — frame
furniture, not a feature. */
[data-concept="specimen"] body.cx-has-watermarks main {
padding-left: clamp(32px, 4vw, 64px);
padding-right: clamp(32px, 4vw, 64px);
}
[data-concept="specimen"] .hl.hl--watermark,
[data-concept="specimen"] .hl.hl--watermark.hl-gl {
width: clamp(10px, 1.2vw, 18px);
}
/* 4c. the sheet-frame bottom edge (see header §4c): a hairline full-width
foil rule pinned to the viewport bottom under specimen. The element
carries .cx-only-specimen (transitional: .cx-only-filigrane), so it is
display:none'd elsewhere by §3 regardless. */
[data-concept="specimen"] .hl.cx-sheet-bottom,
[data-concept="specimen"] .hl.cx-sheet-bottom.hl-gl {
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: auto;
height: 2px;
translate: none;
z-index: 40;
pointer-events: none;
}
/* ---------- 5. per-concept foil fallback tints ----------
CSS-gradient fallback only; the engine retints live foil at runtime.
Foil is the ONE sanctioned home for color — these stay cold/drained and
monochrome-adjacent. LEDGER is the live block (the site language); the
sovereign debug view keeps the cold defaults from holo-fallback.css, and
the obsidian/specimen blocks below serve their debug views only. Emerald
(warranty) comes from the engine at runtime — never from page chrome. */
/* ledger — THE SITE TINTS: the cold family drained toward gray
(print-shop low sat) */
[data-concept="ledger"] {
--hl-c1: #e0e7ef; --hl-c2: #e2eee7; --hl-c3: #e0ece5; --hl-c4: #e1e8f1;
--hl-s1: #9fb4cd; --hl-s2: #a5c6b3;
}
/* obsidian: deeper, colder — reads as light against black */
[data-concept="obsidian"] {
--hl-c1: #c3d4ea; --hl-c2: #c6e6d3; --hl-c3: #c0e2cf; --hl-c4: #c5d8ec;
--hl-s1: #6e97cc; --hl-s2: #7dc297;
}
/* specimen: drained silver on white paper — official document furniture
(inherits v2 filigrane's tints; the identity moved from "quiet" to
"peripheral frame" but the foil voice is the same cold silver) */
[data-concept="specimen"] {
--hl-c1: #e7ecf2; --hl-c2: #e8f0ea; --hl-c3: #e5eee9; --hl-c4: #e8ebf3;
--hl-s1: #aab9cb; --hl-s2: #abc4b4;
}