/* ========================================================================== Yard template - design tokens First run: A. Wherry Container Sales Every colour, font, space and radius used anywhere on this site is declared here. Nothing is hardcoded in any other stylesheet. This block is what makes the twenty minute reskin work: change these values, change the whole site. THE CONTRAST RULES FOR THIS TEMPLATE The brand breaks them on its own sign, where red on grey measures 1.01:1. 1. Red never sits on a grey. --red goes on --ink, --paper or --surface, at display sizes only. It fails on --ink-2 (2.88:1), so never there. 2. Yellow is never type on a light surface: on paper it measures 1.32:1. It is a fill carrying --ink type, or it is type on --ink and --ink-2. A yellow button on a light surface carries a 2px --ink border, so the edge of the control can be found. 3. Light type (--on-dark, --mist) only on --ink, --ink-2 and --red-text. 4. Red TEXT on a light surface is --red-text, never --red. Audited by scripts/check_contrast.py, which reads this file directly. ========================================================================== */ :root { /* --- Colour: "Skinners Bottom" ------------------------------------------ Sampled from the sign and hoodie photos in lead/, then moved until every pairing passed. scripts/check_contrast.py reads these values straight out of this file, so the table below cannot drift from what the site renders. ink on paper 14.89:1 AAA body copy ink on paper-2 13.63:1 AAA tinted sections ink on surface 15.85:1 AAA cards, the form panel ink on yellow 11.32:1 AAA buttons, the closing band ink on yellow-deep 8.76:1 AAA button hover and press on-dark on ink 14.89:1 AAA copy on the dark bands on-dark on ink-2 12.11:1 AAA copy on raised dark surfaces mist on ink 10.25:1 AAA secondary copy on dark mist on ink-2 8.33:1 AAA yellow on ink 11.32:1 AAA highlights, step numerals yellow on ink-2 9.20:1 AAA steel on paper 5.62:1 AA secondary copy on light steel on paper-2 5.14:1 AA steel on surface 5.98:1 AA red-text on paper 5.35:1 AA links and red copy on light red-text on paper-2 4.89:1 AA red-text on surface 5.69:1 AA red-press on paper 6.68:1 AA link hover on-dark on red-text 5.35:1 AA the rare red fill red on ink 3.54:1 LARGE ONLY the name, display type red on paper 4.21:1 LARGE ONLY red on surface 4.48:1 LARGE ONLY field on surface 3.67:1 UI input borders field on paper 3.45:1 UI For the record, the pairings the sign uses: red on the sign grey 1.01:1 fails yellow on the sign grey 3.89:1 fails for body copy -------------------------------------------------------------------- */ --ink: #1C2023; /* Charcoal. The sign's grey taken right down. Header, hero, the dark band, footer, and ALL type on light surfaces. */ --ink-2: #2B3034; /* Raised surface on dark: plates, the fixed bar, the not sure tile. Never carries --red. */ --ink-press: #121517; /* Pressed state on an --ink fill. */ --on-dark: #F5F4EF; /* Type on --ink and --ink-2. Nowhere else. */ --mist: #C9CDD0; /* Secondary type on dark. */ --steel: #5C6266; /* Secondary type on light. The sign's grey, a shade darker so it clears AA. */ --paper: #F5F4EF; /* Page background. */ --paper-2: #ECEAE3; /* The alternate light section. */ --surface: #FCFBF8; /* Cards and the form panel. Tinted, never #fff: a flat pure white fill is on the ban list. */ --red: #D8373C; /* The sign red. The name and display type only. LARGE TYPE ONLY: 24px, or 18.66px bold. */ --red-text: #C22329; /* Red for links and copy on light surfaces. */ --red-press: #A81C22; /* Link hover and press on light surfaces. */ --yellow: #FFD21F; /* THE action colour. Button fills, the closing band, highlights on dark. --ink type on it, always. Never used as type on a light surface. */ --yellow-deep: #E6B800; /* Hover and press on any --yellow fill. Darker is safe here: --ink has 8.76:1 to spare. */ /* Hairlines. Decoration only, never the edge of a control. */ --rule: #D9D7D0; --rule-on-dark: rgba(245, 244, 239, 0.16); /* A control boundary is a UI component and has to clear 3:1 on its own. */ --field: #7D8489; --invalid: #C22329; /* Focus rings. Yellow on the dark bands, ink on the light ones. */ --focus-on-dark: #FFD21F; --focus-on-light: #1C2023; /* The ribbed steel texture, the wider ribs on the photo plates and the grain overlay were all removed on 19 September. Three layers of texture stacked on one page, plus condensed capitals on every product fact, read as busy rather than as industrial. The dark bands are flat --ink now. Ben's call, and the git history has the gradients if they are ever wanted back. */ --plate-line: rgb(255 255 255 / 0.36); /* the cross and box on an empty photo slot */ /* --- Type -------------------------------------------------------------- Work Sans for everything, self hosted in assets/fonts/, SIL Open Font Licence. One variable file, 50KB. Sentence case throughout. Never Title Case, never all caps: the all-caps door markings came off with the condensed face. --------------------------------------------------------------------- */ --font-body: "Work Sans", "Work Sans fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* One family does everything now. Big Shoulders Display came off on 19 September: it was carrying the H1, the wordmark, the card names and every product fact, and at that volume a condensed face shouts. Size and weight do the hierarchy instead. The token stays, pointed at the body stack, because nineteen rules mean "this is display type" and may want their own weight or tracking later. It is not a second family. */ --font-display: var(--font-body); --w-body: 400; --w-medium: 600; --w-display: 800; --w-black: 900; /* Fluid scale from the Picsel design standard, 360px to 1280px. Every max is under 2.5x its min and every value is in rem, so text still reaches 200% on zoom (WCAG 1.4.4). Four steps per page at most. Brought down a whole rank on 19 September. The scale above it was cut for Big Shoulders, a condensed face: narrow letters need more point size to carry the same weight, so the display steps were set large on purpose. Work Sans then inherited those sizes and is not condensed, so a 5.5rem H1 that fitted became one that fills the screen and leaves nothing around it. The hero drops from 5.5rem to 3.25rem at full width. The body end moves least: it was always set for reading. */ Taken back up at the desktop end on 20 September, after Ben read all four pages at full width. Going down a rank on 19 September was right for the display steps and wrong for everything under them: at 1280px the body sat at 17px, the lead at 20px and an in-page H2 at 27px, which reads as a page that is frightened of itself. Every minimum below is untouched, because the phone was never the problem. Only the maxima move, so the change is invisible under about 700px. --step--1 is no longer fluid. It is 15px flat, everywhere, because Ben's floor is 15px and a clamp that starts at 13px breaks it on a phone. */ --step--1: 0.9375rem; /* 15px flat. The floor. Never smaller */ --step-0: clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem); /* body, 16px to 18px */ --step-1: clamp(1.125rem, 1.0027rem + 0.5435vw, 1.4375rem); /* lead, 18px to 23px */ --step-2: clamp(1.25rem, 1.0788rem + 0.7609vw, 1.6875rem); /* h3, 20px to 27px */ --step-3: clamp(1.4375rem, 1.1685rem + 1.1957vw, 2.125rem); /* in-page h2, 23px to 34px */ --step-4: clamp(1.625rem, 1.3315rem + 1.3043vw, 2.375rem); /* section h2, 26px to 38px */ --step-5: clamp(1.875rem, 1.337rem + 2.3913vw, 3.25rem); /* inner page h1, 30px to 52px */ --step-hero: clamp(2.125rem, 1.5381rem + 2.6087vw, 3.625rem); /* homepage h1, 34px to 58px */ --step-numeral: clamp(2.25rem, 1.7119rem + 2.3913vw, 3.625rem); /* buying steps */ /* A condensed face wants its lines packed tight. A normal width one does not, and set at 1.0 the H1 read as a solid block rather than as lines. */ --lh-display: 1.05; --lh-heading: 1.15; --lh-ui: 1.25; --lh-body: 1.6; --ls-display: -0.02em; --ls-heading: -0.01em; --ls-marking: 0.06em; /* kept for the wordmark, the last capitals left */ --measure-prose: 68ch; --measure-lead: 58ch; --measure-head: 20ch; /* --- Space --------------------------------------------------------------- Every step is at least 25% larger than the one before. Do not add new values; combine existing ones. --------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 7.5rem; /* 120px */ /* Opened up on 19 September. The type came down a rank first, and once it had, the old 56-120px was holding the bands closer together than the smaller text wanted. Air between sections is what makes a page feel easy to move around: this is the cheapest negative space on the site. */ /* 44px to 160px. The floor was 4.5rem until 21 September, which meant a phone got 72px above AND below every section: 144px of nothing between one block and the next, on the screen with the least room to spare. 9vw at 390px is 35px, so the clamp was pinned to its floor on every phone and the fluid middle never did anything there. Ben's screenshots, 21 September: the gaps were the first thing wrong on nearly every one. */ --section-padding: clamp(2.75rem, 9vw, 10rem); /* 44px to 160px */ --page-gutter: clamp(1rem, 5vw, 2rem); /* 16px to 32px */ /* Three widths, alternated on purpose. Never one width for everything. */ --container-prose: 42rem; /* 672px body copy */ --container-content: 64rem; /* 1024px the range grid, forms */ --container-wide: 80rem; /* 1280px hero, header, footer */ /* --- Shape --------------------------------------------------------------- Zero everywhere. Buttons, cards, inputs, photos. Containers have no round corners. --------------------------------------------------------------------- */ --radius: 0; --edge: 2px; /* the one border weight: card tops, the form panel */ /* --- Furniture ----------------------------------------------------------- */ /* Furniture came down with the type on 19 September. Controls sized for the old scale left the header and the buttons looking inflated beside it. */ --header-h: 5.25rem; /* 84px. Was 3.75rem until 25 October, when the logo grew; it now matches the header as drawn, so the sticky asides and anchor jumps clear it. Changes with the logo's scale, below and in components.css under .site-header .wordmark. */ --bar-h: 4rem; /* the fixed phone bar, under 8% of a phone screen */ --tap: 2.75rem; /* 44px minimum tap target. This one never moves. */ --picker-h: 3rem; /* 48px size picker buttons, clear of the 44px floor */ --card-btn-h: 3.25rem; /* every range card button, so a wrapped label still matches its neighbours */ --wordmark-mark: 7.5rem; /* 120px wide. Since 21 September the name is Ben's drawn wordmark, not type, so it is set by width and not by font size: it is one shape and it has no leading to reason about. 120px is about what "A. WHERRY" measured as the old way, so the header did not move. Contrast is not a question for a solid shape this size, but it is white on --red-text regardless, the same 5.35:1 as before. */ /* --wordmark-name was 22px, the font size of the name when it was set as type. Removed on 21 September when the name became a drawn mark and nothing referenced it any more. A token nothing uses is how a file starts lying about the build. */ --wordmark-line: 0.9375rem; /* 15px, same pairing. Was 12px, which sat under Ben's floor. "Container Sales" is the line that says what the business does, so it was the wrong thing to have as the smallest type on the page */ --shadow-header: 0 1px 0 rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.28); --z-header: 50; --z-bar: 60; --z-grain: 9999; /* --- Motion -------------------------------------------------------------- Header shadow on scroll, button press, fills changing. Nothing else. No reveal on scroll: every section is visible on load. --------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dur-instant: 100ms; --dur-fast: 150ms; --dur-base: 250ms; /* --- The action button ------------------------------------------------- Yellow on the light surfaces, white on the dark ones. Ben's call, 21 September: he asked to try a white border and background, scoped to the dark bands. Yellow is still THE action colour, and on paper it stays. It is only swapped where it does not have to work as hard: on charcoal a yellow button is the loudest thing in the first screen by a distance, and the hero already has a red plate, a white headline and a photograph in it. It is NOT swapped everywhere. On the paper background a white button is #FFFFFF on #F5F4EF, near enough the same colour as the page, and the edge of the control stops being findable. That is rule 4 of the contrast block at the top of this file in spirit and the 3:1 control boundary in fact. Overridden on .band--ink, .site-header and .menu__panel in base.css. ---------------------------------------------------------------------- */ --btn-fill: var(--yellow); --btn-edge: var(--ink); /* yellow on paper is 1.32:1, so the control needs a findable edge */ --btn-text: var(--ink); --btn-fill-press: var(--yellow-deep); --btn-edge-press: var(--yellow-deep); /* The whole box-shadow, not just its colour, because the dark bands need a different SHAPE of shadow and not merely a different tint. See base.css. On a light surface it is one solid slab: the hole the button came out of. */ --btn-shadow-lift: 0 var(--lift) 0 var(--shadow-hard); --btn-shadow-press: 0 0 0 var(--shadow-hard); --lift: 0.375rem; /* 6px. How far a button rises under the cursor, and therefore exactly how deep the shadow it leaves behind is. One number, because the shadow is the gap the button came out of: if the two ever disagree the button looks like it is floating rather than lifted. Was 4px on 21 September and too timid to notice; a hard shadow wants enough depth to read as a gap. */ --shadow-hard: #000; /* Sharp, no blur, no opacity. A container yard has hard light and hard edges; a soft 24px blur under a square yellow button belongs to a different kind of site. This is the value for light surfaces, where the shadow is the hole the button came out of and a hole is black. It is used on every surface, including the dark bands, where it is admittedly quiet: a hole in charcoal is darker than charcoal, and on #1C2023 black is very nearly nothing. White and a hollow outline were both tried there on 21 September and Ben preferred this. On the dark bands the white border carries the edge instead. */ } /* The header height at the logo's other two scales (components.css). */ @media (min-width: 56rem) and (max-width: 63.99rem) { :root { --header-h: 4.5rem; } /* 72px, logo at its old size */ } @media (min-width: 80rem) { :root { --header-h: 6.375rem; } /* 102px, logo at 1.6 */ }