/* Art Immortal Tattoo โ€” the Walk-In Board. * * Client-picked from six directions on 2026-09-05 (docs/design/ * art-immortal-tattoo/DESIGN.md is normative; DIRECTIONS.md ยงC is the * original). A THEME rather than a custom template, on the operator's * constraint: "a custom design that uses the new section builder". The * precedent is black-lantern / delamort / twitchicide โ€” palette, type and * shape carry the whole identity, over the SHARED section components. * * ๐Ÿšจ Every rule here targets the REAL section markup * (`[data-theme] .slot[data-section=...]`), never invented utility classes. * twitchicide's first cut shipped `.tw-halftone` and friends as standalone * classes that ZERO components applied, so its entire visual identity was * inert. A theme can restyle markup the shared sections already emit; it * cannot introduce markup. * * The idea: the board on the counter. A studio with three shops and sixteen * artists is answering one question all day โ€” who is working, and where โ€” * so the page moves at the tempo of a shop with the door open, not a gallery * with the lights low. Warm off-white ground, white nav and bands, ink * rules, heavy condensed capitals. * * ๐Ÿšจ THE GOLD IS SPLIT AND THE SPLIT IS THE RULE. --accent (#DCB96A) is a * SURFACE you could put your thumb on: chips, the lit board cell. It is * 1.9:1 on white and must never carry text. --accent-text (#856614) is the * same gold darkened for links and phone numbers. Gold under your finger, * dark gold in a sentence. * * ๐Ÿšจ --accent-text is checked against BOTH grounds, because this site has * two. It was #8A6A14 until 2026-09-14 on a docblock claim of "5.1:1" that * was measured on white ONLY: on the warm ground (#F0EFEB) the same colour is * 4.39:1, under the 4.5 floor, which check-theme-a11y had been reporting as * serious x50. #856614 clears both (white 5.37, warm 4.67) and is a barely * perceptible darkening. Any future edit to this token must be measured * against #FFFFFF *and* #F0EFEB โ€” the warm one is what fails first, and since * the 2026-09-18 swap it is the PAGE, not an occasional band, so a failure * there is now everywhere. Both are still on the page, so the pair of checks * is unchanged; only which is common has moved. Name the colours (--paper / * --warm), not the slots (--bg / --bg-mid), when recording a measurement. * * ๐Ÿšจ Motion budget, in full: ONE continuous loop (the utility-bar ticker, * pausable on hover), entrance motion that fires once, feedback under 150ms. * No parallax, no Ken Burns, no video, no second marquee โ€” the research * (MULTI-LOCATION-RESEARCH.md ยง3) found 1 of 10 studio sites honouring * reduced motion and none pausing a >5s loop, so this is where "tasteful" * is measurable rather than claimed. * * ๐Ÿšจ No `:has()` and no `color-mix()` anywhere in this file. browserslist * pins `safari 12` for the in-studio kiosk iPads; both would fail silently * there, and a black screen on a lobby iPad is how that pin was earned. */ @layer theme { [data-theme="art-immortal"] { /* ๐Ÿšจ TWO GROUNDS, named by WHAT THEY ARE rather than by which one is currently the page. They traded places on 2026-09-18 (operator: *"swap the background colors so the nav bar is the white and content off white"*) โ€” the nav and the alternating band now take the white, and the page itself takes the warm. The recipe in frameworks.css alternates --bg and --bg-mid, so swapping this pair moved every section at once. ๐Ÿšจ --bg / --bg-mid hold the LITERALS because tokens/themes.json is the registry for them and build-tokens --check compares the two; swap the values in BOTH or the guard fails. --paper / --warm are this file's own names for the same two colours, so a rule downstream can say which COLOUR it wants rather than which slot โ€” which is what kept the footer and the board hover unchanged through the swap. */ --bg: #F0EFEB; --bg-mid: #FFFFFF; /* Captured BY REFERENCE, which is what makes them usable inside the footer block below: a custom property substitutes its var() on the element that declares it, so these hold the ROOT's two grounds even after the footer re-points --bg at the ink. Same trick as --ink. No new literals โ€” these name the two colours already above, they do not restate them. */ --paper: var(--bg-mid); --warm: var(--bg); /* Captured by reference so the footer can swap them: a custom property resolves its var() on the element that declares it, so this inherits as the resolved ink, not as a live alias. */ --ink: var(--text); --text: #0B0B0B; --accent: #DCB96A; --accent-text: #856614; --muted: #4A4A4A; --rule: #0B0B0B; --font-display: 'Archivo Black', Impact, 'Arial Black', sans-serif; --font-body: 'Rubik', system-ui, sans-serif; /* Square, heavy, board lettering. Archivo Black has one weight and needs no tracking to shout; the button carries a little for legibility at small caps sizes. */ --btn-transform: uppercase; --btn-tracking: 0.06em; --btn-weight: 700; --btn-radius: 0; } /* Display: all-caps, tight, no tracking. A board's lettering, not a fashion logotype. `balance` keeps two-line headings from orphaning. */ [data-theme="art-immortal"] :is(h1, h2, h3) { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.95; text-wrap: balance; } /* Every rule on this site is ink, full strength โ€” no grey hairlines. The 4px rule under a section head is the board's own edge. ๐Ÿšจ DESCENDANT, not `>`. Each variant wraps its own head โ€” the roster's h2 sits at `.slot > .roster-square-ig > .roster-square-ig__head > h2` โ€” so a direct-child selector matches NOTHING and the theme ships inert. Verified against the real rendered markup, not assumed. */ [data-theme="art-immortal"] .slot[data-section] h2 { border-bottom: 4px solid var(--rule); padding-bottom: 0.4em; } /* The address ticker. ONE continuous motion on the page, and the only marquee: three shops' NAP as a single line, paused on hover so a reader can catch an address (WCAG 2.2.2 wants a stop for anything over 5s โ€” the visible control lives in the utility-bar variant's own markup). */ [data-theme="art-immortal"] .slot[data-section="utility-bar"] { background: var(--text); color: var(--bg); font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; } [data-theme="art-immortal"] .slot[data-section="utility-bar"] a { color: var(--bg); } /* Gallery: full density, captions ALWAYS on. The work is the point and a hover-revealed caption is a caption nobody reads. */ [data-theme="art-immortal"] .slot[data-section="gallery"] figcaption { background: var(--text); color: var(--bg); font-weight: 700; font-size: 0.8rem; opacity: 1; } /* The roster is the signature, and Roster J (the walk-in board) is the variant that carries it: rows separated by ink, the shop row by the same 4px rule the headings wear, and a hovered row taking the warm ground so the eye can track across to the shop columns. ๐Ÿšจ Every line here is a CUSTOM PROPERTY, not a restated declaration, and that is not a style preference. sections.css lives in `@layer section` โ€” the last layer โ€” so it outranks this file whatever the selector, and a theme rule that restates `border-bottom` or `width` on board markup is INERT. Measured 2026-09-06: an earlier cut of this block asked for a 4px head rule and a 16px mark and the page rendered 2px and 13px, with nothing failing to say so. That is the same class of silent nothing twitchicide shipped with `.tw-halftone`. The knobs are declared once by the shared block as `var(--board-*, fallback)` and never set there, so what is below is the only declaration in play and inherits straight down. */ [data-theme="art-immortal"] { --board-head-rule: 4px; --board-row-rule: 2px; --board-mark-size: 16px; --board-mark-rule: 2px; /* The hovered row lifts to the OTHER ground. That used to be the warm band on a white page; since the 2026-09-18 swap the page is the warm one, so the lift is to white. Pointed at --paper rather than --bg-mid so it says which colour it wants instead of which slot. */ --board-row-hover: var(--paper); /* Square faces and a squarer phone: no radius anywhere on this site. */ --board-face-radius: 0; --board-phone-radius: 4px; /* Shop pills in the utility bar: square and hard-ruled, same as every other chip on this site. */ --ubshops-radius: 0; --ubshops-rule: 2px; } /* Interior pages (artist profile, shop pages, image detail) are styled by interior.css, which is UNLAYERED โ€” it beats this file at any specificity, same as sections.css above. Knobs only. */ [data-theme="art-immortal"] { --ti-chip-radius: 0; /* no radius anywhere on this site */ --ti-facts-rule: 2px; --ti-shop-rule: 2px; } /* interior.css paints the primary button `background: var(--accent); color: var(--bg)` โ€” white on the surface gold, 1.9:1, which is exactly the pairing the split-gold rule forbids. Re-pointing --accent on the button itself makes it the ink block every other button on this site is, with the page's white text on it. */ [data-theme="art-immortal"] .ti-btn--primary { --accent: var(--text); } /* Buttons are square blocks of ink, or gold you could press. No radius anywhere on this site. */ [data-theme="art-immortal"] .btn-primary { background: var(--text); color: var(--bg); border: 0; } [data-theme="art-immortal"] .btn-secondary { background: var(--accent); color: var(--text); border: 0; } /* Links are the DARK gold, never the surface gold. */ [data-theme="art-immortal"] :is(p, li, address, dd) a { color: var(--accent-text); font-weight: 600; } /* Footer: reversed, the three shops side by side. */ [data-theme="art-immortal"] .slot[data-section="footer"] { /* Paper and ink swap places, and they swap as TOKENS, because every shared footer rule reads `var(--text)` / `var(--muted)` for its copy and links and those rules outrank this file. Measured 2026-09-06 with only `background`/`color` set here: the address and the "Also in" shop links rendered ink-on-ink, invisible but for their gold underline. Re-declared on the footer, the tokens inherit into every rule that reads them. --paper/--ink are held apart so the swap can reference the originals after they are overwritten. */ --text: var(--paper); /* The warm off-white, named directly: it was --bg-mid until the grounds swapped on 2026-09-18, and following that alias would have made the footer's muted copy BRIGHTER than its body copy. */ --muted: var(--warm); --bg: var(--ink); --rule: var(--paper); --accent-text: var(--accent); background: var(--ink); color: var(--paper); } /* Gold stays a SURFACE even here. On the ink footer the gold would in fact pass as text (10.5:1), but the platform's rule is that --accent never sits in a `color:` position (check-css-vocab, R-8b) โ€” and honouring it lands somewhere truer to this theme anyway: the link is the page's white, underlined in gold you could put your thumb on. */ [data-theme="art-immortal"] .slot[data-section="footer"] a { color: var(--bg); border-bottom: 2px solid var(--accent); text-decoration: none; padding-bottom: 1px; } /* Entrance motion fires ONCE and only from an already-visible state, so a reader who lands mid-page never meets an invisible section. Reduced motion removes it outright โ€” the page is complete without it. */ @media (prefers-reduced-motion: reduce) { [data-theme="art-immortal"] .slot[data-section] { animation: none !important; } } } /* ๐Ÿšจ UNLAYERED for the same reason as the page-header rule below: these headings are painted by sections.css, which lives in `@layer section` โ€” the LAST layer โ€” so it outranks `@layer theme` at any specificity and the `:is(h1, h2, h3)` block above cannot reach them. That is the inert-theme- rule trap this file documents twice. Unlayered beats every layer, so this needs no specificity games. WHY: Archivo Black ships ONE weight. Every heading asking for 500, 600 or 700 gets a browser-synthesized faux-bold โ€” a smear on a letterform that is already black, and thicker strokes on some headings than others for no reason a reader could name. Measured live on the home page before this: the gallery head rendered 600, the consult head 500 and the FAQ head 500, while the hero, roster and shops heads rendered a true 400. Scoped to h1-h3 to match the display rule above โ€” the range actually measured โ€” and to this theme, so no other tenant's headings move. */ [data-theme="art-immortal"] :is(h1, h2, h3) { font-weight: 400; } /* ๐Ÿšจ The top of an interior page, where TWO paddings were stacking. Measured live on /piercing at 1440px: from the breadcrumb to the first line of content was **144px of nothing**, and on /faq the same 144px. It is two separate reserves, neither of which knows about the other: 1. PageHeader's bannerless content padding, 88px top / 48px bottom. The 88px exists to clear a transparent nav that OVERLAYS the header. This theme's nav is solid and sits above it (the header starts at y=126, the nav's own height), so those 88px clear nothing. 2. The first section's own `--section-pad`, 96px top, applied directly under that. ๐Ÿšจ The section's padding is an INLINE style โ€” `padding: var(--section-pad, 40px 24px 64px)` written on the element โ€” so no stylesheet rule can beat it and no CSS guard in this repo can see it (the bypass family documented for app/area/[location]/page.tsx). But it READS A TOKEN, and the token is not inline: setting `--section-pad` on that same element from CSS is enough, because the inline declaration resolves its var() against whatever `--section-pad` has cascaded to there. Re-point the token, never try to out-specify the padding. Set on `.tn-page-header + section` so it reaches only the FIRST section, the one sitting under the header โ€” every later section keeps the page's 96px rhythm. Measured after: /piercing 144 -> 60px at 1440 and 128 -> 44px at 390; /faq 144 -> 60px. `/artists` and `/gallery` draw `.ti-title` instead of PageHeader and are untouched, which is the intent. */ /* ๐Ÿšจ The page header is CENTRED on the same column as the body, and this is the whitespace complaint that two rounds of vertical trimming could not touch (operator, 2026-09-18: "You see the extra weight space here, right???"). The gap was HORIZONTAL. Measured at 1684 there were THREE grids stacked on one page: the nav full-bleed with 56px of padding, the page header pinned LEFT at max-width 1200 with 88px of padding so its title began at x=88, and the body a 1040px CENTRED column beginning at x=322. A 234px step between a page's own title and everything under it, and 484px of dead space to the right of the header. Centring it โ€” and widening the piercing body to the same 1200 โ€” puts the eyebrow, the title, the breadcrumb and the reel on one left edge. 1248 is 1200 of column plus the 24px gutter, so the INNER text lands exactly where the body does, and below 1248 it degrades to full width with that gutter. */ [data-theme="art-immortal"] .tn-page-header:not([data-banner="1"]) .tn-page-header__content { padding-top: 18px; padding-bottom: 10px; padding-left: 24px; padding-right: 24px; max-width: 1248px; margin-left: auto; margin-right: auto; } /* ๐Ÿšจ Four separate reserves stack between the nav and the first section, and only shaving all four moves anything (operator, 2026-09-18, twice: "tighten up the white space", then "still whitespace"). Measured at 1676 before this: header padding 26 + eyebrow margin 16 + crumb margin 24 + a crumb ROW that is 52px tall + header padding 18 + section padding 16 = the reel starting at y=357 with ~180px of it being type. The crumb row is the surprising one: its