/* ============================================================ TOKENS Two layers, deliberately separated. HOUSE — Web-Bakery's rhythm. Client-agnostic. Copy this block unchanged into any project; it is the thing that makes work look like ours. SKIN — one client. The palette step fills it (house-rules.md, *Palette*): lifted from the client's live CSS or brand guidelines, or chosen by the user from tools/palettes.html when the client has none. Never a palette nobody chose. Swap this block per client; touch nothing above it. ============================================================ */ :root { /* ---------- HOUSE: spacing ---------- 8px base. Section padding is deliberately large — the approved renders keep coming out tighter than the house standard, so the number lives here instead of in prose. */ --sp-1: 8px; --sp-2: 12px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px; --sp-10:160px; --section-pad: var(--sp-10); /* vertical breathing per section */ --block-gap: var(--sp-6); /* headline -> body -> action */ /* ---------- HOUSE: type scale — "House refined" ---------- Chosen on 2026-09-10 in labs/scale-lab.html over the previous scale (17px body, h2 clamp(34px, 3.6vw, 60px)): body a step smaller, section headings larger. Headings are dominant elements, not labels: an h2 carries its section on its own, 3.6x the body, while staying just under the hero (0.92x the display size). Do not add sizes between these steps. The h2 curve is the largest that keeps a German compound ("Betriebsstrukturen.") inside the 42% split column at every width from 390 to 1920. That column is tightest at ~1024, hence the negative offset: small there, 58px at 1440, 70px on wide screens. Check the scale lab's heading-width chip before raising it. */ --fs-eyebrow: 12px; --fs-small: 14px; --fs-body: 16px; --fs-lead: 18px; --fs-h3: 21px; --fs-h2: clamp(32px, calc(4.6vw - 8px), 70px); --fs-display: clamp(40px, 4.4vw, 72px); --lh-tight: 1.08; --lh-head: 1.1; --lh-body: 1.6; --ls-eyebrow: 0.16em; --ls-display: -0.02em; /* ---------- HOUSE: controls and icons ---------- Part of "House refined": buttons and icons a step larger than the previous 46px / 30px. Inline icons sit beside body-size text (facts, contact lines); tile icons head a card. Stroke is in the 24-unit viewBox, so it thickens with the icon. */ --fs-nav: 14px; --btn-h: 52px; --btn-px: 28px; --fs-btn: 16px; --fw-btn: 700; --icon-tile: 36px; --icon-inline: 20px; --icon-stroke: 1.5; /* ---------- HOUSE: layout ---------- Full-width. There is deliberately no --container: pages run edge to edge and are held in by fluid side padding instead. Readability comes from --measure on the text element, never from narrowing the whole page. */ --gutter: clamp(24px, 5vw, 112px); --measure: 62ch; /* never let body text run wider */ /* ---------- HOUSE: image system ---------- Chosen on 2026-09-10 in labs/image-lab.html: S1b role ratios, S2c corner, S3a natural grade, S4d no captions, S5a calm density. The patterns that use them are in references/images.md. One ratio per role, so a generated image always has a known slot and every srcset candidate shares it (nothing shifts on load). Full-bleed photos (band, diptych, image CTA) are square-cornered. The grade depends on the ground, so it lives in SKIN (--img-filter). */ --ratio-inline: 3 / 2; /* a photo beside text; the overlap's detail */ --ratio-people: 3 / 4; /* portraits, team grid, trio, bleed, diptych */ --ratio-teaser: 16 / 9; /* card media; bands and the hero stage on phones */ --ratio-band: 3 / 1; /* the page's one band, hero stage, docked stats */ --img-radius: var(--radius-card); /* images share the card's corner */ --img-radius-sm: 6px; /* frames narrower than ~200px */ /* ---------- HOUSE: accent discipline ---------- Originally "one filled accent button per page". That held for a five-section page but breaks on a full one, which legitimately wants a primary CTA at both ends plus a sticky bar between them. Revised: At most ONE filled accent button in the viewport at any moment. Everything else is a text link or a ghost border. The revision is stricter than it looks — it is why the sticky CTA bar hides itself once the final CTA section scrolls into view. Supporting actions (header contact, secondary links) never take the accent. Since 2026-09-11 the sticky bar holds its action as a ghost button, so the hero's and the final CTA's are the page's only filled accents. */ --accent-in-viewport-max: 1; } /* ============================================================ SKIN — REPLACE EVERY VALUE BELOW, except typography: that block ships house preset A and changes only when the user picks preset B or a client face (references/typography.md). Lift them from the client's live CSS (grep the theme for hex values and font-family) or their brand guidelines. Delete this notice once the block is filled in. ============================================================ */ :root { --brand: #000000; /* primary accent, used sparingly */ --brand-dark: #000000; /* accent hover */ --brand-soft: rgba(0,0,0,.1); /* The accent as small text. Most brand colours are chosen to sit under a white logo, not to be read at 13px: BDG's red reaches 4.05:1 on its dark ground, and text needs 4.5:1. So the accent has a reading tone -- the same hue, lightened on a dark ground and darkened on a light one -- and every accent-coloured run of text below 24px takes it. Filled buttons, rules, borders and headings keep --brand. */ --brand-ink: var(--brand); /* Two grounds (2026-09-11, from the ERP v4 reference). Every site has a dark and a light palette, whatever its ground mode: the mode on (dark, light, dark-led, light-led) decides which ground the page sits on and which sections take the other (components.css, *grounds*). Inside a band these tokens are remapped to its palette, so no component needs a variant, and the header and the sticky bar take the palette of the band they are over. The values come from the palette step (house-rules.md, *Palette*): lifted from the client's CSS where the brand has colours, chosen by the user from the preview (tools/palettes.html) where it hasn't. A client with only one ground gets the other from its own neutrals, never a new hue. */ --dark-bg: #000000; /* ground */ --dark-bg-2: #000000; /* alternating band */ --dark-bg-3: #000000; /* card surface */ --dark-surface: #000000; /* raised surface */ --dark-fg: #ffffff; /* headings */ --dark-fg-muted: #ffffff; /* body text */ --dark-fg-dim: #ffffff; /* eyebrows, meta: a neutral grey, never a brand tint, at least 4.5:1 on -bg and -bg-2 */ --dark-hairline: rgba(255,255,255,.12); --dark-err: #ff6b78; /* form errors: 4.5:1 on the ground, so lifted on dark (the kit's #c4262e is 3.4:1 on BDG) */ --dark-field-edge: #646c7e; /* form field edge: 3:1 on -bg and -bg-2 (WCAG 1.4.11) */ --dark-img-filter: saturate(.85); /* S3a; no brightness knock-down (removed 2026-09-11, the user asked) */ --dark-bg-shade: color-mix(in oklab, var(--dark-bg), #000 15%); /* the shade band (data-band="shade"): on a dark ground a step DARKER, never lighter (the user, 2026-09-11); on a light one a step toward the ink. So a long argument doesn't sit on one flat colour (house-rules.md, *Grounds*). Derived, so every skin gets a visible step; set a colour only if the brand has one. */ --light-bg: #ffffff; --light-bg-2: #ffffff; --light-bg-3: #ffffff; --light-surface: #ffffff; --light-fg: #000000; --light-fg-muted: #000000; --light-fg-dim: #000000; /* on a light ground about as dark as -fg-muted */ --light-hairline: rgba(0,0,0,.12); --light-err: #c4262e; /* keep unless the brand defines one */ --light-field-edge: #858b96; --light-img-filter: saturate(.92); --light-bg-shade: color-mix(in oklab, var(--light-bg), var(--light-fg) 4%); /* The page's own ground when carries no data-ground (a project from before the ground modes). With a mode set, components.css points these at the right palette and this block is overruled; leave it. */ --bg: var(--light-bg); --bg-2: var(--light-bg-2); --bg-3: var(--light-bg-3); --surface: var(--light-surface); --bg-shade: var(--light-bg-shade); --fg: var(--light-fg); --fg-muted: var(--light-fg-muted); --fg-dim: var(--light-fg-dim); --hairline: var(--light-hairline); --err: var(--light-err); --field-edge: var(--light-field-edge); --img-filter: var(--light-img-filter); --on-brand: #ffffff; /* text on a filled accent button */ /* Typography — HOUSE PRESET A (canonical): Archivo × Bricolage Grotesque. Not placeholders: these ship as the house default. Per site the user picks A, B (Inter Tight × Instrument Serif) or the client's own face; references/typography.md has each preset's block and . Swap the block whole — tracking, width and accent scale are tuned as a set. Headings speak in two voices: --font-head carries the statement in --head-1; --font-accent carries the .accent phrase in --head-2. */ --font-head: 'Archivo', sans-serif; /* heading statement */ --font-accent: 'Bricolage Grotesque', sans-serif; /* .accent phrase in a heading */ --font-body: 'Archivo', sans-serif; /* paragraphs, UI, buttons */ --fw-head: 700; --fw-accent: 400; --accent-style: normal; /* italic | normal */ --accent-scale: 1.04; /* evens out x-height between the two faces */ --accent-case: none; --ls-head: -0.025em; /* tracking is per typeface */ --ls-accent: -0.02em; --head-stretch: 112%; /* Archivo's width axis: semi-expanded */ --head-case: none; /* uppercase for a poster-style h1/h2 */ /* Label voice — eyebrows, nav, buttons. Defaults to the body face; BSL sets it in a mono (IBM Plex Mono, uppercase, tracked). */ --font-label: var(--font-body); --label-case: none; --ls-label: normal; --head-1: var(--fg); /* heading colour: the statement */ --head-2: var(--brand); /* heading colour: the .accent phrase */ /* WebGL accent colours (references/webgl.md): the neon line's main tube and its fainter twin. --gl-2 takes a second brand colour only if the client has one; never invent one. */ --gl-1: var(--brand); --gl-2: var(--gl-1); /* Image grade — S3a natural (references/images.md). Applied in CSS, never baked into the files: --img-filter, set with the grounds above (--dark-img-filter, --light-img-filter), so a photo in a band takes that band's grade. */ --radius-card: 12px; --radius-btn: 8px; --header-h: 74px; }