/* =============================================================================
THE DARK EDITION — the override sheet
=============================================================================
One file. Scoped to an attribute on the root element. Loaded last.
Three properties follow from that shape, and they are the reason to use it:
* THE ORIGINAL IS NEVER EDITED, so the paper edition — which is the
canonical one — cannot regress from anything done here.
* LOAD ORDER DOES THE WORK, so this rarely needs to escalate specificity
and reads as a palette rather than as a fight.
* THE FILE IS INERT UNLESS THE HOOK IS PRESENT, so it can safely be linked
from a shared template. Every selector below begins html[data-dark]; not
one of them matches anything on index.html.
THE ONE RULE when adding to this file: if a declaration in site.css reads a
token, it needs nothing here — redefining the token has already answered it.
Only literals need answering, and the literals worth hunting are the ones
where white or #FAFAFA is a SURFACE rather than text. The list is:
grep -n '#fff\|255, *255, *255\|#FAFAFA\|rgba(30, *38, *43' assets/css/site.css
and the audit that catches what the grep misses is tools/audit.js, which
counts opaque surfaces by luminance rather than searching for a colour —
because a search for one shade of near-white finds one shade of near-white.
========================================================================== */
html[data-dark] {
/* --------------------------------------------------------- the ink ---- */
--ink: #FFFFFF;
--ink-77: rgba(255, 255, 255, .72);
/* Still the quieter of the two inks, and still over the body-text floor on
the deep ground. The paper edition needed .64 because .55 measured 3.6:1
on white; white at .58 on #0C1116 measures 9.9:1, so the number that was
wrong in one direction is right in the other. The name is kept. */
--ink-55: rgba(255, 255, 255, .58);
--line: rgba(255, 255, 255, .16);
--line-soft: rgba(255, 255, 255, .09);
/* --line-dark is the inverse token: it exists for hairlines drawn ON the
deep band while the page is light. With the page itself dark it has to
flip the other way or those rules draw white on white. It is used by
exactly one rule — the footer's top border — and that rule is why this
token exists at all. */
--line-dark: rgba(30, 38, 43, .22);
--muted: #8A9199; /* #717171 is 3.0:1 on the deep ground */
/* ------------------------------------------------------- the accent ---
#C2410C is a print red, chosen for white paper. On the deep ground it
goes muddy — a burnt red on black reads as brown — so it goes warmer,
which lands it back on the orange the original DomainChaos ran on. The
#ff8800 that build used is 2.1:1 on white and 10.7:1 here; this is the
one token in the whole system whose two values are genuinely different
colours rather than two ends of one. */
--accent: #F97316;
--accent-fill: #F97316;
--on-accent: #1A0E04;
/* -------------------------------------------------- the semantic hues --
R6, in the other direction. Every one of these moves about three steps
UP its scale: #15803D is 2.4:1 on this ground and #4ADE80 is 9.6:1, and
green still means free. The washes go with them, and they go from ink
washes to colour-at-low-alpha, which is what a tint is on a dark page. */
--free: #4ADE80;
--taken: #F87171;
--unsure: #FBBF24;
--info: #93C5FD;
--free-wash: rgba(74, 222, 128, .10);
--taken-wash: rgba(248, 113, 113, .10);
--unsure-wash: rgba(251, 191, 36, .10);
/* --------------------------------------------------- THE TONAL LADDER --
This is the part that is not a token flip, and it is the single most
visible thing to get wrong.
The paper page has three grounds, and the gaps between them are what
give the document its rhythm: #ffffff, then #FAFAFA for the quiet
alternating band, then #11161C for the deep band — a whisper and then a
full inversion. Flip each of those independently and all three collapse
onto the same near-black: every section boundary disappears and the page
reads as one undifferentiated column.
So the ladder is rebuilt rather than inverted. Same shape as the light
one — ground, a whisper above it, then a clear step — just travelling
upward in lightness instead of down:
--paper #0C1116 the page (was #ffffff)
.band--tint #0F151B the whisper (was #FAFAFA)
--deep #1A222C the step (was #11161C)
--deep is RAISED rather than lowered, because on a dark page the way to
make a band stand out is to lift it toward the light, not push it
further into the black where the type has nothing to sit on. */
--paper: #0C1116;
--deep: #1A222C;
--deep-soft: #212A35;
color-scheme: dark;
background: var(--paper);
}
html[data-dark] body { background: var(--paper); color: var(--ink-77); }
/* ------------------------------------------------------------------ bands --
The two literal light grounds. #FAFAFA on the tint band is the one a grep
finds; what a grep does not find is that it is the only one — which is only
knowable by counting surfaces, not by searching for a colour. */
html[data-dark] .band--tint { background: #0F151B; }
html[data-dark] { --tint: #0F151B; } /* recessed panel ground, added for Network Labs */
/* -------------------------------------------------------------------- nav --
rgba(255,255,255,.86) over a light page becomes its mirror. The blur stays:
it is what separates the bar from the type running under it. */
html[data-dark] .nav {
background: rgba(12, 17, 22, .86);
border-bottom-color: var(--line-soft);
}
/* The mark needs NOTHING here, and that is the point of having drawn it.
It is stroked in currentColor over `color: var(--ink)`, and --ink is
already redefined at the top of this sheet — so the wordmark goes white on
the dark ground without this sheet mentioning it. The rule that used to sit
here repainted a border on a raster logo; there is no border and no raster
now, so there is nothing to repaint. */
/* ------------------------------------------------- ink-as-a-background ----
Every place --ink is the FILL rather than the text colour. In each one the
text on it must be the GROUND colour, so on a dark page the fill goes white
and the label goes dark — the exact inverse of the paper edition, and the
thing that is invisible if you only look at the page rather than at what
each rule is doing.
The skip link is the easiest of them to miss, because it lives at
left:-9999px until a keyboard user focuses it. It is invisible to every
check that only looks at what is on screen, and it is the very first thing
that user reaches. background:var(--ink) + color:#fff was white on white. */
html[data-dark] .skip { background: var(--ink); color: var(--paper); }
html[data-dark] .btn { background: var(--ink); color: var(--paper); }
/* #000 on a near-black page is a button that disappears under the cursor. */
html[data-dark] .btn:hover { background: rgba(255, 255, 255, .86); color: var(--paper); }
html[data-dark] .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
html[data-dark] .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* .btn--outline is the hero's, already white-on-dark, and its hover fills
white with dark type. --ink now resolves to white, so the hover's colour has
to name the ground outright or it is white on white. */
html[data-dark] .btn--outline:hover { background: #fff; color: #11161C; border-color: #fff; }
/* ---------------------------------------------------------- the pill ------
The track is an ink wash on paper; here it is a white wash on ink. The thumb
keeps --ink as its fill, which is now white, so the lit glyph must go dark —
and it names a colour rather than reading --paper, because the thumb is
white at full strength and the glyph on it wants the deeper of the two
darks. */
html[data-dark] .mode-pill {
background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
border-color: var(--line);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
html[data-dark] .mode-pill__thumb {
background: var(--ink);
box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
}
html[data-dark] .mode-pill__seg { color: var(--ink-55); }
html[data-dark] .mode-pill__seg.is-on { color: #11161C; }
html[data-dark] .mode-pill:has(.mode-pill__seg:hover) .mode-pill__seg.is-on { color: var(--ink-55); }
html[data-dark] .mode-pill:has(.mode-pill__seg:hover) .mode-pill__seg:hover { color: #11161C; }
/* ------------------------------------------------------------------ menu --
The scrim is NOT re-polarised, and it is the one wash on the sheet that is
not. A scrim exists to dim what is behind it, and dimming is still dimming
on a dark page — a white scrim would be a flashbulb. The PANEL is a surface
and becomes the whisper ground; the two are the same rgba in the original
and they invert in opposite directions, which is R2's second half. */
html[data-dark] .menu__panel {
background: #0F151B;
border-left-color: var(--line);
box-shadow: -24px 0 60px rgba(0, 0, 0, .5);
}
html[data-dark] .menu__head,
html[data-dark] .menu__search,
html[data-dark] .menu__foot { background: #0F151B; }
html[data-dark] .menu__q {
background: rgba(255, 255, 255, .05);
border-color: rgba(255, 255, 255, .38);
color: var(--ink);
}
html[data-dark] .menu__q::placeholder { color: var(--ink-55); }
html[data-dark] .menu__q:focus { background: rgba(255, 255, 255, .08); border-color: var(--ink); }
html[data-dark] .menu__clear:hover { color: var(--ink); background: rgba(255, 255, 255, .08); }
html[data-dark] .menu__x:hover { border-color: var(--ink); color: var(--ink); }
/* =============================================================================
THE CONSOLE
R2 in full. On a dark ground a surface is built from WHITE AT LOW OPACITY —
a 5% lift, a 10% edge. Invert the page and those become white on white: not
wrong-coloured, ABSENT. They have to become ink washes at comparable
contrast, and the numbers do not transfer, because 5% white on black reads
far stronger than 5% black on white.
Going the other way, which is what this file does, the same asymmetry
applies in reverse: the paper panel is ink at 2.5%, and white at 2.5% on
#0C1116 is already a clearly visible lift. So these are not the light
alphas with a colour swapped — they are lower.
========================================================================== */
html[data-dark] .console {
--sur-1: rgba(255, 255, 255, .03);
--sur-2: rgba(255, 255, 255, .06);
}
html[data-dark] .console__head { background: var(--paper); border-bottom-color: var(--line); }
/* A text input is a box that has to announce itself, and on this ground the
50%-ink border of the paper edition is a black line on a black field. */
html[data-dark] .field {
background: rgba(255, 255, 255, .04);
border-color: rgba(255, 255, 255, .34);
color: var(--ink);
}
html[data-dark] .field::placeholder { color: var(--ink-55); }
html[data-dark] .field:focus {
border-color: var(--ink);
background: rgba(255, 255, 255, .07);
box-shadow: 0 0 0 3px rgba(255, 255, 255, .08);
}
html[data-dark] kbd { background: rgba(255, 255, 255, .05); color: var(--ink-77); }
/* ---------------------------------------------------------------- results */
html[data-dark] .out { background: var(--paper); border-top-color: var(--line); }
html[data-dark] .dom { background: rgba(255, 255, 255, .022); }
html[data-dark] .dom:hover { border-color: rgba(255, 255, 255, .34); }
html[data-dark] .rec { background: rgba(255, 255, 255, .035); border-color: var(--line); }
/* The accent wash under a pressed star. rgba(194,65,12,.06) is a print red at
6% and would be invisible here; the orange at 12% is the same weight of
signal on the other ground. */
html[data-dark] .ib[aria-pressed="true"] { background: rgba(249, 115, 22, .12); }
/* ------------------------------------------------------------------ misc --
The remaining literals, each one a wash that would otherwise land on its own
colour. None of these are visible failures on their own; together they are
the difference between a page that was inverted and one that was answered. */
html[data-dark] .seg__b:hover { border-color: var(--ink); color: var(--ink); }
html[data-dark] .buy:hover { border-color: var(--ink); color: var(--ink); }
html[data-dark] .tbtn:hover { border-color: var(--ink); color: var(--ink); }
html[data-dark] .foot { background: var(--deep); border-top-color: var(--line-dark); }
/* -------------------------------------------------------- R5, the icons ---
This sheet sets no font-weight rule anywhere, and this block is here to say
that deliberately rather than by omission. Font Awesome and its relatives
use font-weight to choose between the solid, regular and brand FACES of one
family, so any size-based weight rule added to a paper or dark override
sheet will catch an icon and silently swap it to a face that does not
contain the glyph — which renders as an empty box that is present, sized,
clickable, and passes a contrast audit.
This build carries no icon font: every glyph on the page is an inline SVG
with its dimensions on the tag. If one is ever added, the sheet ends with
the weights handed straight back:
html[data-dark] i.fas, html[data-dark] .fa-solid { font-weight: 900 !important }
html[data-dark] i.fab, html[data-dark] i.far { font-weight: 400 !important }
------------------------------------------------------------------------- */