/* =============================================================================
labs.llc/dina/ — LOGO LAB — THE DARK EDITION, the override sheet
=============================================================================
One file. Scoped to an attribute on the root element. Loaded last.
THE ONE RULE: 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:
grep -n '#fff\|255, *255, *255\|#FAFAFA\|rgba(30, *38, *43' assets/css/site.css
THE ARTBOARD IS EXEMPT AND THE EXEMPTION IS THE POINT. See the block at the
bottom of this file: the lab's grounds are the reader's choice and must not
move when the edition does.
========================================================================== */
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); }
/* .ll-btn--primary is the LAB's principal action and it rests on the same
inverted pair — background:var(--ink), color:var(--paper) — so site.css's
`:hover { background:#000 }` left #0C1116 type on #000000: 1.10:1, on
Generate, Export SVG, Save this direction and PNG at 3x. dark.css answered
.btn and missed its twin. */
html[data-dark] .ll-btn--primary:hover { background: rgba(255, 255, 255, .86); color: var(--paper); }
/* ---------------------------------------------------------- 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); }
/* =============================================================================
WHAT IS NOT HERE
This file used to answer a console, a text field, a results table, a domain
card, a pressed star and three hover borders — the furniture of the tool
page this shell was lifted from. None of it was ever on the legal page, and
site.css no longer carries any of it either. What is left below is the two
surfaces this page actually has: the footer, and the placeholder marker.
========================================================================== */
html[data-dark] .foot { background: var(--deep); border-top-color: var(--line-dark); }
/* THE PLACEHOLDER MARKER'S ANSWER went with the marker itself — clause 12 no
longer carries a bracketed value. If one returns, this file owes it one
line, kept verbatim in NOTES.md:
html[data-dark] .lg-todo { background: rgba(249, 115, 22, .10); }
rgba(194,65,12,.05) is the print red at 5% and is invisible on this ground;
the orange at 10% is the same weight of signal on the other. */
/* -------------------------------------------------------- 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 }
------------------------------------------------------------------------- */
/* =============================================================================
THE LOGO LAB, ON THE DARK GROUND
-----------------------------------------------------------------------------
Almost nothing. Every panel, bar, button, field and chip in the lab reads
--paper, --tint, --ink, --line or --accent, and all five were redefined at
the top of this file, so they arrived correct. What follows is the short
list of places the lab names a colour outright — and then the longer list of
places it names one ON PURPOSE, which is the part that matters to whoever
reads this next.
========================================================================== */
/* The two dark washes the lab draws over content. Both are already dark and
both are correct on a dark page: a scrim exists to dim, and dimming is still
dimming. Named here only so a grep for rgba(30, 38, 43 lands on a decision
rather than on silence. */
html[data-dark] .ll-stage__cap,
html[data-dark] .ll-cell__seed { background: rgba(0, 0, 0, .66); }
/* The knockout logotype's letters are holes, and its --p-ground is written by
the script from the ARTBOARD's ground, not from the page. Nothing to do. */
/* =============================================================================
WHAT IS DELIBERATELY NOT ANSWERED HERE
Six literal colours in site.css belong to the artboard, and the artboard is
the one surface on this site that must NOT follow the edition. A reader
judging a mark on white has asked for white; repainting it because they are
reading the dark edition would answer a question they did not ask, and the
exported PNG would no longer match what was on screen.
.ll-stage[data-ground="white"] #FFFFFF
.ll-stage[data-ground="black"] #000000
.ll-stage[data-ground="clear"] #FFFFFF + #D9DEE3 checker
.ll-size__box[data-ground=…] the same five grounds, per rung
.ll-pill--brand #FF6B00 → #EA580C on #000000
.ll-pill--knock.is-clear the checker again, clipped to the type
The two grounds that DO follow the edition are named "Page" and "Deep", and
they read var(--paper) and var(--deep) — they exist so a mark can be checked
against the site it will actually sit on, in whichever edition the reader is
using. That is the whole of the exemption.
========================================================================== */