/* ===================================================================== dashofblum — the personal hub's own skin, loaded on top of the shared site.css it borrows from lightly-salted.com. Everything below is a lab notebook: a faint dot grid under the page, headings in the same mono as the nav, kickers written as code comments, and printer's crop marks on the photographs — the workbench and the print shop in one quiet skin. The studio's gold shifts to a print-developer rust so this reads as Matthew's own place rather than a second Lightly-Salted page. Three rules make that safe: 1. TOKENS GO ON body.site, NOT :root. site.css owns :root; overriding there would leak into carshowbingo/, which loads after this file and defines its own world. (It touches none of --accent/--paper/ --ink/--line/--surface — every token there is --csb- prefixed — so scoping to body.site keeps the bingo card exactly as it was.) The notebook itself goes one step further and skips both bingo games outright: every decorative rule is scoped to body.site:not(.site--bingo, .site--fairbingo). 2. SKINS HANG OFF EXISTING CLASSES. Every *skin* selector here hangs off a class the hub's page files already emit, so restyling never forces a page edit. The one exception is .wall-label at the bottom, a component that arrived with its own markup in archive-collection-item.php — keep new components down there, and keep the skin above honest. 3. TWO PLACES IN site.css HARDCODE THE GOLD (.btn's `color: #17130a` and .btn:hover's `#ecc154`). They can't inherit the new accent, so they're restated below. Grep for #ecc154 before adding a component. Reset, box-sizing, layout, .reveal and the lightbox all come from site.css — not repeated here. ===================================================================== */ /* ---- Hub tokens ----------------------------------------------------- */ body.site { /* Print-developer rust, off the studio gold. --accent-ink on --paper is 8.1:1; --btn-ink on --accent is 5.4:1. */ --accent: #c2703d; --accent-ink: #e59a63; --accent-hot: #d98a55; /* the lift .btn:hover used to get from #ecc154 */ --btn-ink: #1a0f07; /* dark text on the accent fill */ /* The notebook's two pencil colours. The grid is meant to be barely there — much past 8% it stops reading as paper and starts reading as a pattern. The marks sit over photographs, so they're brighter. */ --hub-grid: color-mix(in srgb, var(--ink) 7%, transparent); --hub-mark: color-mix(in srgb, var(--ink) 78%, transparent); } /* Two columns, not site.css's three: the "Elsewhere" column was retired when the Salt Line took over that job, and the grid was left holding an empty third. */ @media (min-width: 720px) { body.site .footer-grid { grid-template-columns: 1.4fr 1fr; } } /* ---- The page: dot-grid paper --------------------------------------- */ /* On body itself rather than a fixed layer, so it scrolls with the page and there's nothing sitting over the text. */ body.site:not(.site--bingo, .site--fairbingo) { background-image: radial-gradient(circle, var(--hub-grid) 1px, transparent 1.5px); background-size: 24px 24px; background-position: center top; } /* Bands stay a shade lighter but let the grid through. Their edges are this page's own signal trace (partials/signal-trace.php, passed in as --hub-trace on ) instead of plain rules. The trace is a mask over an accent fill, so it takes the page's accent, darkroom red included, and the bottom edge is the same capture mirrored. If the variable is missing, the fallback mask draws an ordinary 1px rule. */ body.site:not(.site--bingo, .site--fairbingo) .section--alt { position: relative; background: color-mix(in srgb, var(--paper-2) 80%, transparent); } body.site:not(.site--bingo, .site--fairbingo) .section--alt::before, body.site:not(.site--bingo, .site--fairbingo) .section--alt::after { content: ""; position: absolute; left: 0; right: 0; height: 18px; pointer-events: none; background: color-mix(in srgb, var(--accent) 60%, transparent); -webkit-mask: var(--hub-trace, linear-gradient(transparent 8px, #000 8px 9px, transparent 9px)) 0 0 / 600px 18px repeat-x; mask: var(--hub-trace, linear-gradient(transparent 8px, #000 8px 9px, transparent 9px)) 0 0 / 600px 18px repeat-x; } body.site:not(.site--bingo, .site--fairbingo) .section--alt::before { top: -9px; } body.site:not(.site--bingo, .site--fairbingo) .section--alt::after { bottom: -9px; transform: scaleX(-1); } /* hub.js swaps those still traces for live ones: a