/* ------------------------------------------------------------------ Skin: "catalog" — modern-classified / mail-order catalogue (Paper · Ink · Spot Color). Activated by [data-skin="catalog"] on . It re-points the existing SEMANTIC --bb-* tokens and adds no new --bb-* names, so every existing component reskins without edits. The --cat-* entries below are a raw palette private to this file — never referenced by product code — exactly as capitalista.css keeps its --cap-* ramp. Composes with [data-theme="dark"], which swaps paper for neutral charcoal. The look: warm paper surfaces, ink text, cream hairlines, gently eased corners, and a restrained four-ink system in BOTH themes: press green for action, brick for trade, blue for information, and ochre for watch/pending. This is the DEFAULT skin everyone gets, so treat changes here as changes to the whole product. ------------------------------------------------------------------ */ [data-skin='catalog'] { /* Raw catalogue palette (also exposed as --cat-* for the skin's own gestures). The paper ramp sits at linen saturation, not pulp: the previous khaki stock (#e9dcbb) tinted every surface visibly yellow and the whole page read as one color. Warmth stays; the chroma drops so the inks carry the page. */ --cat-paper: #f3f0e9; /* page — mineral paper, warm without a yellow cast */ --cat-paper-2: #fbfaf6; /* raised surface — a clean sheet */ --cat-paper-3: #e9e5dc; /* sunken well */ --cat-ink: #25221d; /* graphite press ink */ --cat-ink-2: #625d54; /* body copy */ --cat-rule: #ded9cf; /* stone hairline between blocks */ /* The one accent — press green, lifted off the near-black it used to be (#0f5130 read as severe rather than inviting). 4.8:1 as text on the paper and 5.3:1 under paper-light text on fills, so it clears AA both ways with room. It now sits at success's (#2f6b3f) lightness and separates by CHROMA instead: the accent is the cleaner, more vivid green, success the duller sage — every AA-passing softer green lands at this lightness, so darkness is no longer the separator. */ --cat-green: #2d6b4e; /* Sea Green, the brand book's named action colour (#3C8259). It cannot carry text — 4.07 on the page, 3.49 on the charcoal — so it is not the resting ink; it is the LIVE one. Every primary action becomes exactly Sea Green the moment a pointer touches it, under pure white at 4.64. The resting --cat-green is that same hue pressed darker so it can also set type, which is the role the brand book leaves to be derived. */ --cat-green-hot: #3c8259; /* hover — the brand's Sea Green, AA under pure white */ --cat-green-press: #255a41; --cat-brick: #a45340; /* trade / swap ink — 4.7:1 on paper */ --cat-blue: #41697a; /* information ink — 5.2:1 on paper */ --cat-ochre: #7e5d22; /* watch / pending ink — 5.3:1 on paper */ /* --- Surfaces --- */ --bb-bg: var(--cat-paper); --bb-bg-elev: var(--cat-paper-2); --bb-bg-sunken: var(--cat-paper-3); --bb-bg-stamp: var(--cat-ink); /* --- Foreground --- */ --bb-fg: var(--cat-ink); --bb-fg-muted: var(--cat-ink-2); /* Subtle darkened to 5.0:1 on paper: it sets Cat. nos., specs, and the price-read — the smallest text on the page, so it must clear AA outright. */ --bb-fg-subtle: #6f695f; /* Faint stays lighter than subtle but reaches ~3:1: it marks "Photograph" plates and ticker separators — quiet, yet no longer invisible ink. */ --bb-fg-faint: #8a8378; --bb-fg-on-orange: var(--cat-paper-2); --bb-fg-on-ink: var(--cat-paper-2); /* Pure White (brand book 04), not the paper sheet. This ink is what makes Sea Green usable: on that fill paper-light measures 4.44 and misses AA, pure white measures 4.64 and clears it. The other on-accent inks stay paper-light, which is warmer and reads on brick. */ --bb-fg-on-highlight: #ffffff; --bb-fg-on-trade: var(--cat-paper-2); /* Danger drops to a deep press red (--bb-danger below), so its foreground must follow the fills to paper-light — the base #2B0A10 ink is tuned for the bright base reds and only clears ~2.2:1 on this dark red (fails AA). */ --bb-fg-on-danger: var(--cat-paper-2); /* --- Rules: hairline / strong / defined outline. A catalogue is ruled rather than shadowed, and these carry that structure everywhere except one place: the raised sheet in the light theme, where paper and card sit three L* apart and --bb-shadow-card draws the edge instead (see --bb-card-edge). Sections, rows, wells, inputs and overlays are still ruled. `--bb-border-ink` is the darkest of the three and draws the hard outlines across the product — coupons, focus rings, the folio head's rule. At full press black it drew each of them at maximum contrast, so every framed element competed with the type inside it. Held at 62% against the stock it still reads as the hard rule of the set — comfortably past the 3:1 a non-text outline (and the focus rings drawn in this token) needs — without cutting the page into cells. --- */ --bb-border: var(--cat-rule); --bb-border-strong: #c3bbae; --bb-border-ink: color-mix(in srgb, var(--cat-ink) 52%, var(--cat-paper)); /* --- Highlight: press green owns primary action. Fills carry paper-light text (--bb-fg-on-highlight), so the ramp runs dark, and hover LIFTS rather than deepens — the one gesture that stays legible in both directions. --- */ --bb-highlight: var(--cat-green); --bb-highlight-hover: var(--cat-green-hot); --bb-highlight-press: var(--cat-green-press); /* A wash, not a tint slab: green mixed into the sheet keeps it warm. */ --bb-highlight-soft: color-mix(in srgb, var(--cat-green) 12%, var(--cat-paper-2)); /* Spot inks keep product meanings stable instead of scattering decoration. */ --bb-cyan: var(--cat-blue); --bb-magenta: var(--cat-brick); --bb-accent-2: var(--cat-blue); --bb-trade: var(--cat-brick); --bb-trade-hover: #8f4435; --bb-trade-soft: color-mix(in srgb, var(--cat-brick) 8%, var(--cat-paper-2)); /* Status colors stay functional (green=gain, amber=watch, red=action) but drop to print-ink saturation so nothing glows on paper. */ --bb-success: #39704c; --bb-warn: var(--cat-ochre); --bb-danger: #9e120d; --bb-danger-ink: var(--bb-danger); --bb-info: var(--cat-blue); /* Tonal inks, solved rather than sampled. Each is its spot ink deepened toward the press ink by the smallest amount that clears 4.7:1 on its own wash AND 4.5:1 on all three paper surfaces — the extra two-tenths over the AA line is headroom, so a later nudge to a stock or a wash cannot quietly drop the pair under. Brick is deepened furthest (18%) because its wash is the opaque one and the ink has to hold on both the tinted sheet and the page. Danger already cleared at full strength and is left alone. They stay the same hue throughout: this is the ink pressed harder, not a second palette, so a lozenge still reads as its meaning. */ --bb-highlight-ink: #2c6349; --bb-trade-ink: #864738; --bb-info-ink: #3d5e6c; --bb-warn-ink: #725521; --bb-success-ink: #366344; /* The paper should be felt through tone and spacing, not a visible dot mat. */ --bb-grid: rgba(37, 34, 29, 0.022); /* --- Corners: eased, not flattened. The skin used to pin every radius to 2px, which made every surface a cut rectangle and read as unfinished rather than printed. A catalogue's structure comes from its RULES and its ink, not from square corners, so the radii climb again on a restrained ramp — softer than the base scale (4/9/13/20/26), firm enough that a card still reads as a printed block. Pills are pills again. --- */ --bb-radius-1: 3px; --bb-radius-2: 6px; /* inputs, small chips */ --bb-radius-3: 9px; /* buttons, small cards */ --bb-radius-4: 14px; /* cards */ --bb-radius-5: 18px; /* hero blocks */ --bb-radius-pill: 999px; /* --- Shadows: soft and shallow, warmed to the stock. The hard letterpress offset (`2px 2px 0 ink`) drew a second, sharp-edged copy of every element, so a hover read as a jump rather than a lift. These are low-contrast blurs in the paper's own ink — separation you feel, not a duplicate silhouette you see. --- */ --bb-shadow-1: 0 1px 2px rgba(31, 27, 20, 0.06); --bb-shadow-2: 0 2px 8px -3px rgba(31, 27, 20, 0.14); --bb-shadow-3: 0 8px 20px -10px rgba(31, 27, 20, 0.2); /* The card's elevation is TWO shadows, and the second one is the edge. A paper page and a raised sheet sit about three L* apart, so a card resting on a 5% blur read as a slightly different shade of the same paper rather than as a sheet lying on it; the hairline border was doing all the separating. The outer `0 0 1px` at 30% draws that hairline in the paper's own ink instead — a defined edge you read as the sheet's, not as a rule drawn around it — which is what lets the border go transparent. Hover lifts the drop without touching the edge, so the card rises rather than changing its outline. */ --bb-shadow-card: 0 1px 1px rgba(31, 27, 20, 0.16), 0 0 1px rgba(31, 27, 20, 0.3); --bb-shadow-card-hover: 0 4px 10px -2px rgba(31, 27, 20, 0.18), 0 0 1px rgba(31, 27, 20, 0.34); /* Stamps keep a hint of the press — one soft step off the sheet. */ --bb-shadow-stamp: 0 1px 3px rgba(31, 27, 20, 0.16); --bb-shadow-stamp-orange: 0 1px 3px color-mix(in srgb, var(--cat-green) 34%, transparent); /* Embossed controls, warmed to the stock: buttons are squared blocks lifted one shallow step, with the paper's light caught on the top inner edge. Press sinks into an inner shade in the same ink. */ --bb-shadow-emboss: var(--bb-shadow-1), inset 0 1px 0 rgba(255, 252, 246, 0.85); --bb-shadow-emboss-filled: var(--bb-shadow-1), inset 0 1px 0 rgba(255, 252, 246, 0.24); --bb-shadow-emboss-press: inset 0 1px 2px rgba(31, 27, 20, 0.3); --bb-radius-btn: var(--bb-radius-1); /* --- Type: the catalogue's display voice is IBM Plex Serif — the fourth member of the superfamily already setting the page. Sans, Mono and Serif share an x-height of exactly 0.516em and one skeleton, so the serif headline over sans body is the "humanist hand" the design language names, and it ships in the bundle (fonts.css), so the override is real rather than a name that falls through to Sora on every client. Sora stays the display face of every other skin. --- */ --bb-font-display: "IBM Plex Serif", "IBM Plex Serif Fallback", "Sora", "IBM Plex Sans", system-ui, serif; /* Paper has no scanlines and no glow. */ --bb-scan: transparent; --bb-glow: none; } /* A single press-green hairline under the shell reads as the catalogue's binding edge. The former second ink — a brick hairline across the very top of the viewport — read as a stray border at every width, not as print grammar, so the edge is one ink now. */ [data-skin='catalog'] .site-head, [data-skin='catalog'] .mobile-head, [data-skin='catalog'] .mobile-nav { box-shadow: none; } /* Dark mode under catalog: softened charcoal stock at night. The approved Soft-ledger surface ladder keeps wells from reading as black cut-outs, the ink ladder uses warm paper neutrals instead of glare-white, and the four spot inks stay at print saturation: green action, brick trade, blue info, ochre watch. */ [data-skin='catalog'][data-theme='dark'] { --bb-bg: #20211f; --bb-bg-elev: #292b28; --bb-bg-sunken: #181917; --bb-bg-stamp: #f0eee8; --bb-bg-screen: #121310; --bb-fg: #f0eee8; --bb-fg-muted: #b8b4aa; --bb-fg-subtle: #9d998f; --bb-fg-faint: #858176; --bb-fg-on-ink: #20211f; --bb-fg-on-highlight: #20211f; --bb-fg-on-trade: #20211f; --bb-fg-on-orange: #20211f; /* Dark rules clear WCAG 1.4.11 (~3:1) on page and raised charcoal. Default and strong (inputs) used to sit at 0.08–0.24 and failed; ink is the hardest outline for focus rings and cut edges. */ --bb-border: rgba(255, 255, 255, 0.36); --bb-border-strong: rgba(255, 255, 255, 0.48); --bb-border-ink: rgba(255, 255, 255, 0.56); /* Keep the primary-action ink green here too. Neutral fills made the signed-out money CTAs read as disabled even though their components used the right token. The green sits deeper than the old pastel so it reads as press ink on charcoal, not a UI accent on an app dark mode. */ --bb-highlight: #84ad8c; --bb-highlight-hover: #94bb9a; --bb-highlight-press: #739e7b; --bb-highlight-soft: color-mix(in srgb, var(--bb-highlight) 12%, transparent); --bb-screen-glyph: var(--bb-highlight); --bb-grid: rgba(255, 255, 255, 0.018); --bb-cyan: #86a9b8; --bb-magenta: #e2725b; --bb-accent-2: #86a9b8; /* Faded Rose exactly as the brand book names it (#E2725B). On paper it cannot carry text at any size — 2.72 on the page — but on the charcoal it clears AA on all three surfaces (5.23 / 4.62 / 5.71), so this is the one theme where the brand's own value is also the ink. Dark is the shipping default and "Tactile Dark-Mode" is a named brand aesthetic, so the colour lands where the brand actually lives. Light keeps its deeper brick. */ --bb-trade: #e2725b; --bb-trade-hover: #e88975; --bb-trade-soft: color-mix(in srgb, var(--bb-trade) 8%, transparent); --bb-success: #8cb596; --bb-warn: #c5a76a; --bb-danger: #e08d80; --bb-danger-ink: #e08d80; --bb-fg-on-danger: #20211f; --bb-info: #86a9b8; /* At night the spot inks are already the light half of the pair, so they clear AA on their own washes as they stand. Brick alone sits low enough to need a 6% lift toward paper. */ --bb-highlight-ink: var(--bb-highlight); --bb-trade-ink: #e58f7b; --bb-info-ink: var(--bb-info); --bb-warn-ink: var(--bb-warn); --bb-success-ink: var(--bb-success); /* Depth at night is a soft pool under the block, not a black notch. The compressed surface ladder needs less shadow opacity to separate. */ --bb-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.24); --bb-shadow-2: 0 2px 10px -4px rgba(0, 0, 0, 0.38); --bb-shadow-3: 0 8px 22px -10px rgba(0, 0, 0, 0.46); /* At night the surfaces already separate and a shadow barely reads on charcoal, so the rule keeps the edge (--bb-card-edge stays a hairline here) and the shadow only says how high. */ --bb-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.34); --bb-shadow-card-hover: 0 6px 14px -4px rgba(0, 0, 0, 0.52), 0 1px 2px rgba(0, 0, 0, 0.34); --bb-shadow-stamp: 0 1px 3px rgba(0, 0, 0, 0.3); /* Accent stamps follow the dark-mode action ink. */ --bb-shadow-stamp-orange: 0 1px 3px color-mix(in srgb, var(--bb-highlight) 40%, transparent); }