/* ========================================================================== v2 — BRAND TOKENS. ★ THIS IS THE FILE YOU EDIT ★ Load order: fonts.css → tokens.css → style.css -------------------------------------------------------------------------- Everything a site needs to look like a different business is in this one file: ten colours, two font names, and eight scrim strengths. You should never need to open style.css to rebrand a site. HOW TO RECOLOUR A SITE 1. Edit the ten values in BLOCK 1. Write them as three space-separated RGB channels — "20 32 31", not "#14201f" and not "20, 32, 31". The odd format is what lets the same colour be reused at any opacity further down, so scrims, shadows and tints all follow your brand instead of drifting off to some hardcoded grey. 2. Change --theme-color in the tag of each page to match --accent-rgb. That one lives in the HTML, not here. 3. Nothing else. BLOCK 5 rebuilds every colour in the system from what you set in BLOCK 1. Need a hex value converted? #14201f -> 20 32 31 is just the three pairs read as decimal (14=20, 20=32, 1f=31). ========================================================================== */ :root { /* ====================================================================== BLOCK 1 — THE PALETTE. Edit these ten lines and nothing else. ====================================================================== */ /* Body text, headings, the footer background, shadows and every scrim. */ --ink-rgb: 20 32 31; /* Secondary text: intros, captions, muted labels. Must stay readable on --bg-rgb and --surface-rgb (aim for 4.5:1 or better). */ --ink-soft-rgb: 74 92 89; /* The page background. */ --bg-rgb: 251 249 245; /* Cards, the header bar, the dropdown panel. Usually white. */ --surface-rgb: 255 255 255; /* The alternating section background that breaks up the page. */ --surface-alt-rgb: 242 239 232; /* Hairlines, borders, dividers. */ --line-rgb: 226 221 210; /* The brand colour: buttons, links, eyebrows, the current-page marker. */ --accent-rgb: 15 107 92; /* A darker version of the accent for hover and pressed states. Needs to read as "the same colour, pressed" — darken, do not change hue. */ --accent-dark-rgb: 10 79 67; /* A pale tint of the accent: icon chips, dropdown hover. */ --accent-soft-rgb: 220 236 232; /* Text and icons on top of dark surfaces. Usually white. */ --inverse-rgb: 255 255 255; /* ====================================================================== BLOCK 2 — SCRIM STRENGTH. Safe to raise. Think before lowering. ---------------------------------------------------------------------- A scrim is the tinted layer between a photo and the text on top of it. These numbers are opacities from 0 to 1, and they were not picked by eye: each was measured against the worst case, a pure white photograph. At the values below, and with the default --ink-rgb, text over imagery lands at roughly: --scrim 0.70 .......... 18px body copy ~5.4:1 (WCAG AA needs 4.5) --scrim-header 0.72/0.64 14px nav links ~5.5:1 --scrim-caption 0.92/0.72 14px captions ~6.6:1 Lowering them shows more of the photo and looks better over a dark image — and quietly fails on a bright one. An earlier version of this system used 0.48 here and the hero copy measured 2.8:1, which is not legible for a lot of people. If a site only ever uses dark imagery you can go lower, but re-check the contrast rather than trusting your eye: a scrim always looks fine to the person who chose the photo. ONE THING TO WATCH: the scrims are built from --ink-rgb, so a lighter ink makes every scrim weaker. The margins above assume an ink about as dark as the default. If you set a mid-grey or a pastel ink, raise these numbers until the contrast comes back, or the text over your hero will fail even though nothing here looks broken. ====================================================================== */ --scrim: 0.70; /* hero overlay, middle band */ --scrim-strong: 0.79; /* hero overlay, top and bottom edges */ --scrim-header-top: 0.72; /* transparent header, at the top */ --scrim-header-fade: 0.64; /* transparent header, where it fades out */ --scrim-caption-base: 0.92; /* caption inside an image, at the bottom */ --scrim-caption-mid: 0.72; /* caption inside an image, further up */ --scrim-light-top: 0.88; /* .site-header--light, at the top */ --scrim-light-fade: 0.72; /* .site-header--light, fading out */ /* ====================================================================== BLOCK 3 — LOGO & WORDMARK. Sizing caps for whatever goes in the header. ---------------------------------------------------------------------- The header is a fixed amount of space shared by the brand and the menu button. The rule this system follows is that the brand yields and the menu button does not — the menu is the only way into the navigation on a phone, so it can never be the thing that gets pushed off the screen. Sizes here are ceilings, not fixed dimensions. A small logo renders at its natural size; a large one is capped. That means dropping in a 600x200 logo cannot blow out the header, and swapping in a small one needs no CSS change at all. --brand-logo-height the rendered height of an . Width follows from the aspect ratio, so the logo is never distorted. Tied to the header height so the logo can never make the bar taller than it is meant to be. --brand-mark-size the round initials mark, when used instead of an image. --brand-wordmark-size the business name beside the logo. A clamp, so it scales smoothly with the viewport rather than jumping at a breakpoint. If the name is still too long for a phone it truncates with an ellipsis instead of shoving the menu button off the edge. ====================================================================== */ --brand-logo-height: calc(var(--header-height) - 1.25rem); /* Width ceiling for the logo, measured against the VIEWPORT rather than the header, so it can never depend on the thing it is sizing. The subtraction reserves the menu button plus the container padding and gap, which is why the button survives even a very wide logo on a 280px-wide phone. */ --brand-logo-max-width: calc(100vw - 9rem); --brand-mark-size: clamp(28px, 8vw, 34px); --brand-wordmark-size: clamp(0.9375rem, 0.85rem + 0.6vw, 1.125rem); /* ====================================================================== BLOCK 4 — TYPE. Swap the first name in each stack. ---------------------------------------------------------------------- Four families are self-hosted and ready to use: "Source Serif 4", "Source Sans 3", "EB Garamond", "Inter". Any of them can go in either slot. To use a family that is not in this list you must also add its @font-face rules and .woff2 files — see css/fonts.css. Always keep the system fallbacks at the end of the stack: they are what renders while the web font downloads, and if it ever 404s. ====================================================================== */ --font-heading: "Source Serif 4", Georgia, "Times New Roman", Times, serif; --font-body: "Source Sans 3", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ====================================================================== BLOCK 5 — DERIVED. Do not edit; these rebuild from BLOCK 1. ---------------------------------------------------------------------- style.css only ever refers to the names below, never to a raw colour. That is what makes BLOCK 1 the single point of change. ====================================================================== */ --color-ink: rgb(var(--ink-rgb)); --color-ink-soft: rgb(var(--ink-soft-rgb)); --color-bg: rgb(var(--bg-rgb)); --color-surface: rgb(var(--surface-rgb)); --color-surface-alt: rgb(var(--surface-alt-rgb)); --color-line: rgb(var(--line-rgb)); --color-accent: rgb(var(--accent-rgb)); --color-accent-dark: rgb(var(--accent-dark-rgb)); --color-accent-soft: rgb(var(--accent-soft-rgb)); --color-inverse: rgb(var(--inverse-rgb)); /* Scrims, built from the brand ink so they follow a recolour. */ --color-overlay: rgb(var(--ink-rgb) / var(--scrim)); --color-overlay-strong: rgb(var(--ink-rgb) / var(--scrim-strong)); /* Text on dark imagery. Slightly transparent so it settles into the photograph instead of sitting on top of it as pure white. */ --color-on-media: rgb(var(--inverse-rgb) / 0.92); --color-on-media-soft: rgb(var(--inverse-rgb) / 0.9); --color-on-dark: rgb(var(--inverse-rgb) / 0.85); --color-on-dark-soft: rgb(var(--inverse-rgb) / 0.75); --color-hairline-inverse: rgb(var(--inverse-rgb) / 0.16); --color-border-inverse: rgb(var(--inverse-rgb) / 0.7); }