/* File: themes/craftysales/assets/theme.css * File Version: 39 * History: * V39 20261030 V0.6.230: American English, the owner's word of 2026-10-30 * V38 20261015 An upload's "or drop it here" line, in the hint's voice (F-545) * V37 20261014 The currencies row at the foot of the page, styled as the languages' (docs/22 Later 11) * V36 20261012 A video with no still chosen is a plain tile the size of its picture (F-528) * V35 20261009 The row of languages, on the footer's deep ground (docs/22 Later 12) * V34 20261006 A row somebody arranged, drawn on the shop: a tinted one is a band, a plain * one the page's own ground (F-492) * V33 20261006 The error pages and the page of a shop that is down, now that they load this * sheet: its banner is a notice and its own words are not a refusal's (F-481) * V32 20261006 The launch page: a panel of the theme's paper over the picture the shop chose, and on * a phone under it. Until now no page loaded this sheet's rules for it (F-479) * V31 20261004 Small words in the brand or the accent wear brand-text and accent-text: a theme * whose own color is too light to read as words names a deeper one (F-445); * the chosen gallery chip's count is read on its dark ground (F-450); the * hero's shade is whole under its words, and on a phone its photograph * is above them (F-456) * V30 20261004 A box to tick in a field keeps a focus ring (F-444); a product's tags * rule no longer draws a second pill round a category's links (F-446); * on a phone a month is its initial, not its name cut to a width (F-447) * V29 20261004 The quick look's quantity and buttons, the shop's sort box and the consent * prompt's choices, drawn: each was the browser's own (F-440) * V28 20261003 The lookup page's registration form, set off from the record above it * (docs/22 Later 9) * V27 20261003 Products side by side, the catalog's way, and its picker (docs/22 Later 8) * V26 20261001 The account screens, drawn: the menu, the tables, the forms (F-372) * V25 20261001 The shop's transfer details on the order page, kept as typed (F-340) * V24 20260930 A field's control is never wider than its field (F-359) * V23 20260930 Find us: the places to come in person, a card each -- address, how to find it, * hours with their seasons, and closed days (docs/22 Later 3) * V22 20260930 Sold by weight: the estimate's note on the rail, an option, a tile, the * featured block, a basket line and the checkout; on a phone an option's * pieces wrap whole, never inside a figure (docs/22 Later 2) * V21 20260929 Seats held for an order's payment: said plainly, not as a problem (F-250); * a door reference breaks across lines on a phone rather than running * off its card (F-285) * V20 20260928 A share's monthly offer under the button, in the rail's small print (R10) * V19 20260928 The events band's picture keeps to its column beside the words: its * aspect ratio sized it from the stretched row and ran it over them * (F-265); a panel's tags wrap in their cell (F-267); a long name gives * way on a phone instead of pushing the tools to a second row (F-268); * a composed page's body is the page's width, so its full-bleed bands * center on the window (F-269); a story's picture goes on the side * chosen for it (F-270) -- all five found by R9's captures * V18 20260927 The approved boards (R8): the cream page and paper cards, the header, * the phone's full-screen menu, the deep-green footer, the hero over its * photograph, promises, the featured card, the shelf and its tile, the * events band with its visit card, and the journal * V17 20260927 The scheduler: the booking board and a shopper's own visit (R7) * V16 20260927 Merchandising: the struck price and the price per unit (R6) * V15 20260927 Records and documents: the record panel, document lists, a line's * record on the receipt, and the lookup page (R5) * V14 20260927 A scale's words sit on the bars' middle line (R4) * V13 20260927 The product type's panel: scale bars, chips, one-per-line lists, * a pass mark, sub-headings, the year strip, the rail and the shut * placements (R4) * V12 20260927 The save button on the tile and the product page, the search * results page, and the phone menu (R2: F-219, F-220) * V11 20260920 The badge modifiers take the presenter's names, so the card can * draw whatever it decided rather than re-deriving two cases * of it (ruling 71, F-208) * V10 20260918 Core's journal card gained a category and a rail; both sit inside the inset (ruling 65) * V9 20260918 The class prefix is cs-, not cf- (ruling 64) * V8 20260917 craftyfarm renamed craftysales - the theme takes the platform's name (ruling 62) * V7 20260917 The per-axis picker's pills, swatches and combination note (ruling 60) * V6 20260917 Section 9: the other twelve pages in the theme's own DOM (ruling 55, second half) * V5 20260917 Section 8: the commerce path in the theme's own DOM (ruling 55) * V4 20260917 The downloads panel on the order page, and the refused page (ruling 57) * V3 20260913 Two gift-card panels join the shared fieldset rule * V2 20260903 The Hollowfield design. Same classes, same wiring, new skin. * V1 20260901 Initial - the default theme gets a skin (F-98) * * The default theme's stylesheet. * * **V2 is a reskin, not a rewrite of the contract.** The design arrived as a * Claude Design artboard -- one page, every rule an inline `style=""`. What was * absorbed is the *appearance*: the palette, the two radii, the serif display * face, the dark bands, the card and pill treatments. **No function came from * it.** Every class below is one the product already emits and * `docs/20_theme_authoring.md` already documents; the artboard's `` and * `{{ }}` placeholders are Claude Design's own and have no counterpart here. * * THE PALETTE WAS ALREADY OURS. Eight of the design's eleven colors are the * craftysales tokens unchanged -- ink #22261f, brand #3a6b45, accent #b4762a, * surface #fdfdfb, muted #f2f0e9, border #ddd9cd. Three were new and are now * tokens: a deeper brand hover, a lifted accent for dark grounds, and a muted * ink for dark grounds. So this is a reskin of a theme, not a fork of one. * * THE RULES IT IS WRITTEN UNDER, unchanged from V1: * * 1. Every color is a token. `check_stylesheet` refuses a literal. * 2. Every spacing value is a token. 1px is exempt -- a hairline is not * spacing -- and so is a border width. * 3. No layout that needs JavaScript, and none that breaks without it. * 4. Mobile first. `bin/check_mobile_overflow.py` is the gate. * 5. Nothing assumes a photograph exists. `.cs-ph` is the placeholder and it * has to look deliberate rather than broken. * * WHAT THE DESIGN ADDED TO THOSE. Two radii and only two: a pill for anything * you press, a soft rectangle for anything that holds content. A dark band * (`--cs-color-surface-inverse`) for the announcement, the traceability * section and the footer, so the page has three grounds rather than one. */ /* ------------------------------------------------------------------ * * 0 · The display face * * Self-hosted, latin and latin-ext only -- four files, 460 KB. The other eight * subsets in the design's bundle (cyrillic, greek, vietnamese) are about 1.1 MB * of coverage a US farm shop will not use, and every merchant would download * them. `font-display: swap` so a slow font never blanks the headline. * OFL 1.1; see NOTICES.md. * ------------------------------------------------------------------ */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/source-serif-4-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/source-serif-4-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/source-serif-4-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/source-serif-4-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ------------------------------------------------------------------ * * 1 · Foundations * ------------------------------------------------------------------ */ body { font-family: var(--cs-font-body); font-size: var(--cs-size-text-md); line-height: 1.6; color: var(--cs-color-ink); /* R8: the page is the boards' cream, and cards and panels are the paper laid on it. `surface-page` is `surface` by default, so a theme that draws both on one ground loses nothing. */ background: var(--cs-color-surface-page); /* The two full-bleed bands below are `100vw` wide, and `100vw` counts the scrollbar. Without this, every page on a desktop browser with a classic scrollbar scrolls sideways by the scrollbar's width. */ overflow-x: hidden; /* `core.css` puts a 24px gutter on `body`. That is the right default for an unthemed page, and it is a *second* gutter here: this theme's shell, sections and bands all carry their own, so below 79rem the page's contents sat at 48px while the bands re-imposed 24 and the two stopped lining up. Measured at 1024 and 375. */ padding: 0; } h1, h2, h3, h4 { font-family: var(--cs-font-heading); font-weight: 600; line-height: 1.15; letter-spacing: -0.01em; color: var(--cs-color-ink); text-wrap: balance; } /* The headline scales with the viewport rather than stepping at a breakpoint: it is the one element on the page big enough for the difference to show. */ h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); line-height: 1.04; letter-spacing: -0.015em; } h2 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); } h3 { font-size: 1.2rem; line-height: 1.25; } h4 { font-size: 1.05rem; } /* An italic clause inside a headline is the design's one typographic move -- "A working farm that *shows its work*" -- and it is why the italic subset is worth its 240 KB. */ h1 em, h2 em { font-style: italic; color: var(--cs-color-brand); } p { max-width: 68ch; } .lede { font-size: var(--cs-size-text-lg); color: var(--cs-color-ink-muted); line-height: 1.5; } .hint, .field-hint, .field-note, .fine-print, .notice { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .fine-print { max-width: 68ch; } .notice { border: var(--cs-border-default); border-left: var(--cs-space-px-3) solid var(--cs-color-accent); background: var(--cs-color-surface-muted); padding: var(--cs-space-3) var(--cs-space-4); border-radius: 0 var(--cs-radius-sm) var(--cs-radius-sm) 0; } .visually-hidden, .honeypot, .hp-field, .enquiry-honeypot, .coming-soon__hp { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .breadcrumb { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); margin-bottom: var(--cs-space-4); } .breadcrumb a { color: var(--cs-color-ink-muted); } /* ---- the eyebrow ---- * A mono, letter-spaced, uppercase label with a small brand dot. The design * uses it above the hero and above the traceability band, and it is what makes * a section read as a record rather than a headline. */ .eyebrow, .traceability-eyebrow, .data-strip-link-label, .ugc-verified, .gallery-tile-handle, .cs-footer-heading { font-family: var(--cs-font-mono); font-size: var(--cs-size-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cs-color-accent); font-weight: 600; } /* ---- buttons ---- * Pills. Primary is the brand green; secondary is a hairline outline on the * paper. On a dark ground the primary lifts to the inverse accent, because * green on #22261f reads as a hole. */ .button, .button-primary, .button-secondary, .checkout-place, .coming-soon__submit { display: inline-block; font: inherit; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; padding: var(--cs-space-3) var(--cs-space-6); border-radius: var(--cs-radius-control); border: 1px solid var(--cs-color-border); background: var(--cs-color-surface); color: var(--cs-color-ink); cursor: pointer; transition: background 130ms ease, border-color 130ms ease, color 130ms ease; } .button-primary, .checkout-place, .coming-soon__submit { background: var(--cs-color-brand); border-color: var(--cs-color-brand); color: var(--cs-color-brand-contrast); } .button-primary:hover, .checkout-place:hover, .coming-soon__submit:hover { background: var(--cs-color-brand-hover); border-color: var(--cs-color-brand-hover); } .button:hover, .button-secondary:hover { border-color: var(--cs-color-ink); } .block-traceability .button-primary { background: var(--cs-color-accent-on-inverse); border-color: var(--cs-color-accent-on-inverse); color: var(--cs-color-surface-inverse); } .button:focus-visible, .button-primary:focus-visible, .button-secondary:focus-visible, .checkout-place:focus-visible { outline: var(--cs-space-px-2) solid var(--cs-color-accent); outline-offset: var(--cs-space-px-2); } .button[disabled], .button-primary[disabled] { opacity: 0.55; cursor: not-allowed; } /* ---- form fields ---- * Pill inputs on paper with a drawn edge (R8). They sat on the muted ground * with no edge until the page itself became that ground -- then a field on * the page was invisible, as the sign-in page's password box was. The boards * draw every field as paper with a line round it. */ .field { display: flex; flex-direction: column; gap: var(--cs-space-1); margin-bottom: var(--cs-space-4); max-width: 34rem; /* A field inside a flex or grid form may shrink below its control's own width (F-359): without this the receipt form's file control held its field, and the field its panel, wider than a phone. */ min-width: 0; } .field label { font-weight: 600; font-size: var(--cs-size-text-sm); } .field input, .field select, .field textarea, .enquiry-field input, .enquiry-field textarea, .gallery-search input, .cs-browse__row select { font: inherit; font-size: var(--cs-size-text-sm); color: var(--cs-color-ink); background: var(--cs-color-surface); border: var(--cs-border-strong); border-radius: var(--cs-radius-control); padding: var(--cs-space-2) var(--cs-space-4); min-height: var(--cs-space-px-44); /* Never wider than its field (F-359). */ min-width: 0; max-width: 100%; } /* A checkbox or a radio in a field is a box to tick, not a text pill: the rule above made the sign-in page's "stay signed in" a 44px square. */ .field input[type="checkbox"], .field input[type="radio"] { min-height: 0; width: var(--cs-space-px-20); height: var(--cs-space-px-20); padding: 0; margin: 0; accent-color: var(--cs-color-brand); } .field-check { flex-direction: row; align-items: center; gap: var(--cs-space-px-10); } /* The account screens' forms end on a bare submit button; it is the page's primary action, so it is drawn as one. */ .site-main form button[type="submit"]:not([class]) { font: inherit; font-weight: 600; min-height: var(--cs-space-px-48); padding: var(--cs-space-px-12) var(--cs-space-px-28); border: 1px solid var(--cs-color-brand); border-radius: var(--cs-radius-control); background: var(--cs-color-brand); color: var(--cs-color-brand-contrast); cursor: pointer; } .site-main form button[type="submit"]:not([class]):hover { background: var(--cs-color-brand-hover); } .site-main form button[type="submit"]:not([class]):focus-visible { outline: var(--cs-space-px-2) solid var(--cs-color-accent); outline-offset: var(--cs-space-px-2); } .field textarea { border-radius: var(--cs-radius-md); } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .enquiry-field input:focus-visible, .enquiry-field textarea:focus-visible, .gallery-search input:focus-visible, .cs-browse__row select:focus-visible { border-color: var(--cs-color-accent); background: var(--cs-color-surface); outline: none; } /* A box to tick has no edge to color, so the rule above left it with nothing: tabbed to, the sign-in page's "stay signed in" showed no focus at all (F-444). It keeps a ring, the buttons' own. */ .field input[type="checkbox"]:focus-visible, .field input[type="radio"]:focus-visible { outline: var(--cs-space-px-2) solid var(--cs-color-accent); outline-offset: var(--cs-space-px-2); } .field-error, .booking-problem, .cart-line-problem, .checkout-line-problem, .coming-soon__error { color: var(--cs-color-danger); font-size: var(--cs-size-text-sm); } .enquiry-field { display: flex; flex-direction: column; gap: var(--cs-space-1); margin-bottom: var(--cs-space-4); } /* ---- flashes ---- */ .flashes { list-style: none; margin: 0 0 var(--cs-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--cs-space-2); } .flash, .error-banner { padding: var(--cs-space-3) var(--cs-space-5); border-radius: var(--cs-radius-md); border: var(--cs-border-default); background: var(--cs-color-brand-tint); border-color: var(--cs-color-brand-tint-border); font-size: var(--cs-size-text-sm); } /* R8: an ordinary notice is paper on the cream, not the default scale's blue. */ .flash-info { background: var(--cs-color-surface); border-color: var(--cs-color-border); } .flash-warning { background: var(--cs-color-accent-tint); border-color: var(--cs-color-accent-tint-border); } /* Something that did not work -- a code refused, two-factor not switched off (F-372). */ .flash-error { background: var(--cs-color-danger-tint); border-color: var(--cs-color-danger); } /* ---- a page that is not there, and a shop that is down ---- No page loaded these until V0.6.134: an error page linked core's sheet alone (F-481). Seen for the first time, the banner was a red box round "orders already placed are unaffected" and the shop's own words were small and red, as a refused field's are. The banner is a notice, and the words are words. */ .error-page { text-align: center; } .error-shop { font-family: var(--cs-font-heading); font-size: var(--cs-size-text-lg); } .error-status, .error-detail, .error-actions { color: var(--cs-color-ink-muted); } .error-countdown { font-variant-numeric: tabular-nums; } .error-channels { justify-content: center; } /* ---- image placeholders ---- * The design draws every unphotographed thing as a soft diagonal weave rather * than a gray box, with the note in the corner. Half the products in a new shop * have no picture for weeks, so this is the state a merchant actually lives in * and it has to look deliberate. */ .cs-ph { display: block; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--cs-radius-sm); background: repeating-linear-gradient( 45deg, var(--cs-color-placeholder-cool) 0 var(--cs-space-px-14), var(--cs-color-surface-muted) var(--cs-space-px-14) var(--cs-space-px-28) ); } .cs-ph--warm { background: repeating-linear-gradient( 45deg, var(--cs-color-placeholder-warm) 0 var(--cs-space-px-14), var(--cs-color-surface-muted) var(--cs-space-px-14) var(--cs-space-px-28) ); } /* ---- the section rhythm ---- * Every block on a page is one of these. The design runs a 79rem measure with * a 24px gutter and lets the sections breathe rather than boxing them, so the * container is the only thing holding the page together horizontally and the * heading rule is the only thing dividing it vertically. */ /* THE MEASURE IS ON `.site-main`, AND ONLY THERE. This carried its own `max-width: 79rem` and its own 24px gutter as well, which stacked on top of the ones `.site-main` already applies -- so every section heading sat 24px further in than the two full-bleed bands, on every page. Measured, not noticed: `.block-heading` at x=136 against `.data-strip-cell` at x=112. */ .block { margin: 0 0 var(--cs-space-7); } .block:last-child { margin-bottom: var(--cs-space-px-72); } /* The section heading is the design's loudest voice: large, serif, tight, and sitting on a hairline that runs the width of the section. It is set with clamp() so the 38px it was drawn at does not overrun a phone. */ .block-heading { font-family: var(--cs-font-heading); font-size: clamp(var(--cs-size-px-24), 4vw, var(--cs-size-px-38)); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 var(--cs-space-px-28); padding-bottom: var(--cs-space-px-14); border-bottom: var(--cs-border-default); } /* ---- the shop's own name, and the away notice (F-112) ---- * `storefront/index.html` in this theme draws the shop's name above whatever * the merchant composed, and an away notice when the shop is in vacation mode. * **All three of these classes had no rule at all** and had not had one since * the theme got a stylesheet -- so on every shipped shop the name rendered at * the browser's default h1 and the away notice rendered as a bare paragraph * with nothing marking it as a notice. * * The gate could not see them: it scanned `app/templates` only, and these are * emitted by a theme template. Scanning both trees is the fix; these rules are * what the first run of the widened gate turned up. */ /* No measure and no gutter of its own: `.site-main` carries both. Giving this its own stacked a second 24px on top and put the shop's name 24px right of every heading under it -- the same mistake `.block` had. */ .farm-hero { padding-block: var(--cs-space-px-56) var(--cs-space-px-22); } /* The shop's name, not a headline the merchant wrote -- so it is set below the hero block's own heading, which is the thing that should be loudest. */ .farm-hero-title { font-family: var(--cs-font-heading); font-size: clamp(var(--cs-size-px-26), 4vw, var(--cs-size-px-38)); font-weight: 600; letter-spacing: -0.01em; margin: 0; } /* Vacation mode is the single most important thing a visitor can be told, and it was drawing as an ordinary paragraph. The accent tint rather than the danger tint: the shop is away, not broken. */ .farm-vacation { margin: var(--cs-space-4) 0 0; padding: var(--cs-space-3) var(--cs-space-4); border-radius: var(--cs-radius-md); background: var(--cs-color-accent-tint); border: 1px solid var(--cs-color-accent-tint-border); color: var(--cs-color-accent-deep); font-weight: 500; max-width: 68ch; } /* ---- hero ---- * * R8, the approved Home board: the words over the photograph. A rounded card * the width of the page, the picture filling it, a shade over its left side so * white words read on whatever the merchant uploaded, and the words at the * lower left. With no photograph the card is the deep green itself. * * The source order is words first (a screen reader meets the

before a * decorative picture); the picture is laid underneath by position, not order. */ .cs-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: clamp(26rem, 46vw, 41rem); margin: var(--cs-space-px-24) 0 var(--cs-space-px-40); padding: clamp(var(--cs-space-px-24), 5vw, var(--cs-space-px-72)); border-radius: var(--cs-radius-xl); overflow: hidden; background: var(--cs-color-surface-inverse); color: var(--cs-color-ink-inverse); } .cs-hero__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } /* The shade: the theme's dark color over the photograph, **whole under the whole of the words** and thinning only past them. The words keep to 55% of the card (the rule below) and the shade holds to 58% of it. * * Until V0.6.118 the shade thinned from the card's left edge -- 78% there, 42% * by the middle -- under words that reached the middle on a desk and the far * edge on a phone, so the end of every line lay on the bare photograph. * Weighed against the pixels really behind them, with each example shop's own * picture: the heading's second sentence at 2.3:1 or worse in every shop that * has one (F-456). The board draws this over a dark greenhouse, where any shade * reads. * * 80% is not a taste. Over a white photograph, the hardest there is for light * words, it leaves the sentence under the heading at 6.3:1 or better and the * heading's second line at 3.6:1 or better in every theme that ships, and * `tests/test_words_can_be_read.py` works that out from each palette. Mixed * from the token rather than written as a color, so a recoloured shop shades * in its own ink. */ .cs-hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 90deg, color-mix(in srgb, var(--cs-color-surface-inverse) 86%, transparent) 0%, color-mix(in srgb, var(--cs-color-surface-inverse) 80%, transparent) 58%, color-mix(in srgb, var(--cs-color-surface-inverse) 8%, transparent) 78% ), linear-gradient( 0deg, color-mix(in srgb, var(--cs-color-surface-inverse) 45%, transparent) 0%, transparent 45% ); } .cs-hero__words { max-width: 38rem; } /* Over a photograph the words keep to the shaded side of the card, however narrow the card is: a long line wraps sooner rather than running out over the picture. */ .cs-hero--photo .cs-hero__words { max-width: min(38rem, 55%); } /* The board's chip: a dot and a short fact, on a glassy pill. */ .cs-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--cs-space-px-8); margin: 0 0 var(--cs-space-px-24); padding: var(--cs-space-px-6) var(--cs-space-px-14); border: 1px solid var(--cs-color-border-inverse); border-radius: var(--cs-radius-pill); background: color-mix(in srgb, var(--cs-color-surface-inverse) 55%, transparent); font-size: var(--cs-size-px-14); font-weight: 600; } .cs-hero__eyebrow::before { content: ""; width: var(--cs-space-px-8); height: var(--cs-space-px-8); border-radius: var(--cs-radius-circle); background: var(--cs-color-brand-on-inverse); } /* The one place the theme shouts. The second sentence is italic, on its own line, in the light green -- the board's two-tone headline. */ .cs-hero__heading { font-family: var(--cs-font-heading); font-size: clamp(2.6rem, 6.2vw, 5rem); font-weight: 450; line-height: 1; letter-spacing: -0.025em; color: var(--cs-color-ink-inverse); margin: 0 0 var(--cs-space-px-24); text-wrap: balance; } .cs-hero__heading em { font-style: italic; font-weight: 400; color: var(--cs-color-brand-on-inverse); } .cs-hero__lede { font-size: clamp(var(--cs-size-px-17), 1.6vw, var(--cs-size-px-20)); line-height: 1.5; color: var(--cs-color-ink-inverse); max-width: 32rem; margin: 0 0 var(--cs-space-px-36); text-wrap: pretty; } .cs-hero__actions { display: flex; flex-wrap: wrap; gap: var(--cs-space-px-12); } .cs-hero__cta { display: inline-flex; align-items: center; gap: var(--cs-space-px-10); min-height: var(--cs-space-px-52); padding: var(--cs-space-px-12) var(--cs-space-px-28); border-radius: var(--cs-radius-pill); border: 1px solid var(--cs-color-surface); background: var(--cs-color-surface); color: var(--cs-color-ink); font-weight: 600; font-size: var(--cs-size-px-16); text-decoration: none; transition: background 130ms ease, border-color 130ms ease, color 130ms ease; } .cs-hero__cta:hover { background: var(--cs-color-brand-tint); border-color: var(--cs-color-brand-tint); } .cs-hero__cta--quiet { background: color-mix(in srgb, var(--cs-color-surface-inverse) 35%, transparent); border-color: var(--cs-color-ink-inverse-muted); color: var(--cs-color-ink-inverse); } .cs-hero__cta--quiet:hover { background: var(--cs-color-border-inverse); border-color: var(--cs-color-ink-inverse); } .cs-hero__cta:focus-visible { outline: var(--cs-space-px-2) solid var(--cs-color-accent-on-inverse); outline-offset: var(--cs-space-px-2); } @media (max-width: 47.99rem) { .cs-hero { min-height: 34rem; margin-top: var(--cs-space-px-12); border-radius: var(--cs-radius-lg); } .cs-hero__actions { flex-direction: column; align-items: stretch; } .cs-hero__cta { justify-content: center; } /* On a phone the words are as wide as the card: there is no side of the photograph to keep clear for them, and a shade strong enough to read on hides the picture altogether. So the photograph goes above, whole and unshaded, and the words below it on the card's own dark ground (F-456). The page's order is unchanged -- the words first, for a screen reader. */ .cs-hero--photo { display: flex; flex-direction: column; min-height: 0; padding: 0; } .cs-hero--photo::after { content: none; } .cs-hero--photo .cs-hero__image { position: static; order: -1; height: auto; aspect-ratio: 4 / 3; } .cs-hero--photo .cs-hero__words { max-width: none; padding: var(--cs-space-px-24); } } /* ---- product grid ---- * * `auto-fill` rather than `auto-fit`: a shop with two products in a category * should show two cards at card width, not two cards stretched across the * whole viewport. A new shop is mostly small categories. */ .product-grid, .event-cards, .post-list, .channel-grid, .document-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--cs-space-5); list-style: none; margin: 0; padding: 0; } /* The photograph runs to the card's own edge rather than sitting inside a padded box -- `overflow: hidden` on the card and no padding on the card itself, with the words in their own padded body. It is the single change that makes a grid of farm produce look photographed rather than cataloged. */ .product-card, .event-card, .post-card, .channel-card { display: flex; flex-direction: column; background: var(--cs-color-surface); border: var(--cs-border-default); border-radius: var(--cs-radius-md); overflow: hidden; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } /* The card rises rather than glowing. 4px is enough to read as a lift on a trackpad and small enough that a grid of twelve does not ripple. */ .product-card:hover, .event-card:hover, .post-card:hover { transform: translateY(-4px); border-color: var(--cs-color-border-strong); box-shadow: var(--cs-shadow-lg); } @media (prefers-reduced-motion: reduce) { .product-card, .event-card, .post-card, .channel-card { transition: none; } .product-card:hover, .event-card:hover, .post-card:hover { transform: none; } } /* 4:3 and cropped: a merchant photographing on a phone gets portrait, landscape and square in the same grid, and a row of cards that do not line up reads as a broken page rather than as variety. */ .product-card img, .event-card-image img, .post-card img, .product-card .cs-ph, .post-card .cs-ph { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; } /* Everything below the photograph. The theme's own `blocks/product_grid.html` wraps the price and the sold-out pill in `.product-card-body`; the title still lives inside the card's link, so it is padded on its own. The card kinds core draws without a body wrapper -- events, posts, channels -- are padded per child, which is what the product card did before the override. */ .product-card-body { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cs-space-2); padding: 0 var(--cs-space-px-18) var(--cs-space-px-18); } .product-card-title, .event-card-summary, .event-card-when, .event-card-price, .event-card-soldout, .post-card-title, .post-card-meta, .post-card-category, .post-card > .post-products, .channel-name, .channel-note { margin-inline: var(--cs-space-px-18); } /* Core's card leads with its category since V0.6.14; the padded-children rule * above is what keeps it inside the card's inset. */ .post-card-category { margin-top: var(--cs-space-px-16); } .product-card-title, .event-card-summary, .post-card-title, .channel-name { display: block; margin-top: var(--cs-space-px-16); margin-bottom: var(--cs-space-1); } .event-card > :last-child, .post-card > :last-child, .channel-card > :last-child { margin-bottom: var(--cs-space-px-18); } /* Inside the body wrapper the two children are already padded by it. */ .product-card-body > .product-card-price, .product-card-body > .product-card-badge { margin-inline: 0; margin-top: 0; } .product-card-title, .event-card-summary, .post-card-title, .channel-name { font-family: var(--cs-font-heading); font-size: var(--cs-size-px-19); font-weight: 600; line-height: 1.25; } /* THE ANCHOR WRAPS THE TITLE, NOT THE OTHER WAY ROUND. Core's card markup is * ``, so `.product-card-title a` * -- which is what V0.5.144 and this file's first draft both wrote -- matches * nothing at all, and every card title on the shipped theme rendered as an * underlined brand-green link. Found by looking at a rendered page; the markup * gate cannot see this, because the class *is* styled, just not by a selector * that reaches it. * * The whole card is the click target and the lift is its hover state, so the * title inside it is ink and undecorated. */ .product-card > a, .post-card > a, .event-card > a { text-decoration: none; color: inherit; display: flex; flex-direction: column; } .product-card-title, .post-card-title { color: var(--cs-color-ink); } .product-card > a:hover .product-card-title, .post-card > a:hover .post-card-title { color: var(--cs-color-brand-text); } /* Keyboard focus still has to be visible: the card does not lift on focus, so without this a keyboard user has no idea which card they are on. */ .product-card > a:focus-visible, .post-card > a:focus-visible, .event-card > a:focus-visible { outline: var(--cs-space-px-2) solid var(--cs-color-accent); outline-offset: calc(var(--cs-space-px-2) * -1); border-radius: var(--cs-radius-md); } /* The price is set in the display face, not the body face. It is the number the buyer came for and the design gives it the same weight as the name. */ .product-card-price, .event-card-price, .gallery-tile-price { font-family: var(--cs-font-heading); font-size: var(--cs-size-px-20); font-weight: 700; font-variant-numeric: tabular-nums; margin-top: var(--cs-space-2); } .event-card-when, .post-card-meta, .channel-note, .gallery-tile-note { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); line-height: 1.45; margin-top: var(--cs-space-1); } /* **One pill for whatever the card has to say.** Sold out, out of season and a full CSA season are the states a farm shop is in most of the year, and they are quiet rather than alarming: the product is still worth looking at. The card used to carry two classes for two of those states and the template chose between them, which is how a full season came out reading "Sold out" (F-208). The presenter decides the words now and this draws them, whatever they are. */ .product-card-badge, .event-card-soldout, .product-sold-out, .product-out-of-season { align-self: flex-start; font-family: var(--cs-font-mono); font-size: var(--cs-size-px-11); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: var(--cs-space-px-5) var(--cs-space-px-10); border-radius: var(--cs-radius-pill); background: var(--cs-color-surface-muted); color: var(--cs-color-ink-muted); margin-top: var(--cs-space-2); } .product-out-of-season { background: var(--cs-color-accent-tint); color: var(--cs-color-accent-deep); } /* ---- farm story, newsletter ---- */ .block-farm-story { display: grid; gap: var(--cs-space-5); } .farm-story-words { max-width: 40rem; } .farm-story-image { width: 100%; height: auto; border-radius: var(--cs-radius-lg); } @media (min-width: 48rem) { .block-farm-story { grid-template-columns: 1fr 1fr; align-items: center; } .block-farm-story.block-image-left .farm-story-image { order: -1; } /* The picture is first in the markup, so "left" needed nothing and "right" * needed this -- without it every story's picture sat on the left, whichever * side the merchant chose (F-270). */ .block-farm-story.block-image-right .farm-story-image { order: 1; } } .block-newsletter, .block-enquiry { background: var(--cs-color-surface-muted); border-radius: var(--cs-radius-lg); padding: var(--cs-space-6) var(--cs-space-5); } .newsletter-blurb, .enquiry-blurb, .ugc-blurb, .rates-blurb, .traceability-body { color: var(--cs-color-ink-muted); max-width: 52ch; } .newsletter-contact { margin-top: var(--cs-space-3); } /* ---- data strip ---- * * The row of live figures under a hero: soil temperature, current lot, median * time to the door. Tabular numerals because the whole point is that they are * measurements, and measurements that jiggle as they update read as decoration. */ /* Full-bleed and dark. The figures are the first thing under the hero and the design treats them as instrumentation rather than as marketing: a band of ink with the numbers set in the mono face, each cell fenced off by a hairline on its left the way a column on a printed record sheet is. */ .block-data-strip { max-width: none; padding-inline: 0; padding-block: var(--cs-space-px-22); background: var(--cs-color-surface-inverse); color: var(--cs-color-ink-inverse); border-block: none; } .data-strip-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--cs-space-px-24); list-style: none; margin-inline: auto; max-width: 79rem; padding-inline: var(--cs-space-px-24); } .data-strip-cell { display: flex; flex-direction: column; gap: var(--cs-space-px-3); font-family: var(--cs-font-mono); font-variant-numeric: tabular-nums; border-left: 1px solid var(--cs-color-ink-inverse-muted); padding-left: var(--cs-space-px-18); } /* The label is the accent lifted for the dark ground; the value is the loud part; the note is the quiet part. All three in the mono face, because the whole band is a reading off an instrument. */ .data-strip-cell dt { font-size: var(--cs-size-px-10-5); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cs-color-accent-on-inverse); } .data-strip-cell dd { font-size: var(--cs-size-px-18); font-weight: 600; margin: 0; display: flex; flex-direction: column; gap: var(--cs-space-px-3); } .data-strip-cell dd a { color: var(--cs-color-ink-inverse); } .traceability-eyebrow, .ugc-verified, .gallery-tile-handle { font-family: var(--cs-font-mono); font-size: var(--cs-size-text-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-color-ink-muted); } .data-strip-link-label { font-size: var(--cs-size-px-11); letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-color-ink-inverse-muted); } .data-strip-note { font-size: var(--cs-size-px-11); font-weight: 400; color: var(--cs-color-ink-inverse-muted); } /* ---- traceability, buyer photographs, rates, documents ---- */ /* The second dark band, and the loudest argument the page makes. Full-bleed ink, the words at 1.1fr and the record panel at 0.9fr, and a heading second in size only to the hero's. The design's "not marketing -- records" reading is carried by the ground, not by an adjective. */ .block-traceability { max-width: none; padding-inline: 0; background: var(--cs-color-surface-inverse); color: var(--cs-color-ink-inverse); border-radius: 0; display: grid; gap: var(--cs-space-px-18) var(--cs-space-px-56); padding-block: var(--cs-space-px-80); margin-block: var(--cs-space-px-80); } /* The theme's own `blocks/traceability_band.html` wraps the words, so this is two real columns rather than the explicit child placement V0.5.144 needed to do the same job against core's flat child list. * * THE GUTTER IS PADDING, NOT A TRACK, AND IT IS MEASURED IN `vw`. * * Two measurements, both taken in a browser rather than reasoned about: * * 1. The first attempt made the gutter two extra `minmax(24px, 1fr)` tracks * either side. Those divide as an equal `fr` share, so on a 1440px window * each "24px gutter" came out **318px** wide and the band's contents sat * in the middle half of the band. * 2. The second used `calc(50% - 39.5rem)`. A percentage in `padding` resolves * against the **containing block's** width, not the element's own -- and * this element is `100vw` while its container is the 79rem main column. So * the calc went negative, `max()` took the 24px floor, and the words sat * hard against the window edge, 88px left of every other section on the * page. Caught by measuring `.traceability-words` against `.data-strip-cell` * and finding them at x=24 and x=112. * * `50vw` is the element's own half-width because the element is `100vw`. The * `+ 24px` is the same gutter `.block` carries inside its 79rem measure, so the * band's first word lines up with the section headings above and below it. */ .block-traceability { padding-inline: max( var(--cs-space-px-24), calc(50vw - 39.5rem + var(--cs-space-px-24)) ); } .traceability-words { max-width: 52ch; } @media (min-width: 48rem) { .block-traceability { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; column-gap: var(--cs-space-px-56); } /* No panel, no second column. A merchant who leaves the record out should get a full-width band, not a half-width one beside a hole. */ .block-traceability:not(:has(.traceability-figure)) { grid-template-columns: minmax(0, 1fr); } } .block-traceability h2 { font-size: clamp(var(--cs-size-px-26), 3.6vw, var(--cs-size-px-38)); line-height: 1.1; text-wrap: balance; color: var(--cs-color-ink-inverse); margin: 0 0 var(--cs-space-px-18); } .block-traceability p { color: var(--cs-color-ink-inverse-muted); } .block-traceability .traceability-eyebrow { color: var(--cs-color-accent-on-inverse); } /* On a dark ground the green brand button disappears. The design swaps it for the lifted accent with ink text -- the one button on the page that reads as a lamp rather than as a leaf. */ .block-traceability .button-primary { background: var(--cs-color-accent-on-inverse); color: var(--cs-color-surface-inverse); box-shadow: none; } .block-traceability .button-primary:hover { background: var(--cs-color-accent); color: var(--cs-color-brand-contrast); } /* The record panel. A pane of slightly-lifted ink with a hairline, set in the mono face at a generous line height: the design draws it as a terminal because a terminal is what a record looks like when nobody has dressed it. A merchant who uploads a photograph instead gets the photograph, framed the same way -- the panel is a container, not a picture frame with opinions. */ .traceability-figure { margin: 0; border: 1px solid var(--cs-color-ink-inverse-muted); border-radius: var(--cs-radius-lg); font-family: var(--cs-font-mono); font-size: var(--cs-size-text-sm); line-height: 2; overflow: hidden; } .traceability-figure img { display: block; width: 100%; height: auto; } .traceability-cta { margin-top: var(--cs-space-4); } .traceability-hint { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-inverse-muted); } /* Buyer photographs are the one part of a farm shop the merchant does not art-direct, and the design leans into that: a tight mosaic on a fixed row height rather than a tidy grid of equal cards. Every tile is cropped to the cell, so a mix of phone portraits and flat-lays still reads as a wall. */ .ugc-list, .gallery-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--cs-space-px-14); list-style: none; margin: 0; padding: 0; } .ugc-item { position: relative; display: flex; flex-direction: column; gap: var(--cs-space-1); border-radius: var(--cs-radius-sm); overflow: hidden; transition: box-shadow 160ms ease; } .ugc-item:hover { box-shadow: var(--cs-shadow-md); } @media (prefers-reduced-motion: reduce) { .ugc-item { transition: none; } } .ugc-item img, .ugc-item .cs-ph { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; } /* The caption sits under the tile rather than over it: text laid on a stranger's photograph is unreadable about a third of the time and there is no way to know which third in advance. */ .ugc-by, .ugc-title { font-size: var(--cs-size-text-sm); padding-inline: var(--cs-space-2); } .ugc-title { font-family: var(--cs-font-heading); } .ugc-by { color: var(--cs-color-ink-muted); padding-bottom: var(--cs-space-2); } .ugc-blurb { max-width: 56ch; } .ugc-more { margin-top: var(--cs-space-px-26); display: inline-block; font-weight: 600; } .rates-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .rates-table th, .rates-table td { text-align: left; padding: var(--cs-space-2) var(--cs-space-3); border-bottom: var(--cs-border-hairline); } .rates-table th { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); font-weight: 600; } .rates-footnote { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .document { display: flex; flex-direction: column; gap: var(--cs-space-1); padding: var(--cs-space-3); border: var(--cs-border-default); border-radius: var(--cs-radius-md); } .document-category { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } /* ------------------------------------------------------------------ * * 3 · The product page * ------------------------------------------------------------------ */ .product { display: grid; gap: var(--cs-space-6); max-width: 72rem; margin: 0 auto var(--cs-space-7); padding-inline: var(--cs-space-4); } @media (min-width: 52rem) { .product { grid-template-columns: 1.1fr 1fr; align-items: start; } } .product-images { display: flex; flex-direction: column; gap: var(--cs-space-3); } .product-images img { width: 100%; height: auto; border-radius: var(--cs-radius-md); } .product-video { width: 100%; border-radius: var(--cs-radius-md); } .product-subtitle { font-size: var(--cs-size-text-lg); color: var(--cs-color-ink-muted); margin: 0 0 var(--cs-space-4); } .product-price { font-size: var(--cs-size-text-lg); font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 var(--cs-space-4); } .product-sale-ends, .stock-note, .delivery-estimate, .booking-note, .calendar-note { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .product-description, .product-materials, .post-body, .page, .legal-section { max-width: 68ch; } .product-description :is(h2, h3) { margin-top: var(--cs-space-5); } /* The buy form is the one control on the page that must never be ambiguous: quantity, variant, personalization and the button read as a single unit. */ .buy-form { display: flex; flex-direction: column; gap: var(--cs-space-3); padding: var(--cs-space-5); background: var(--cs-color-surface-muted); border-radius: var(--cs-radius-lg); margin-block: var(--cs-space-5); } .buy-form .field { margin-bottom: 0; } /* ------------------------------------------------------------------ * * 4 · Basket, checkout and the order * ------------------------------------------------------------------ */ .cart-lines, .checkout-lines, .order-lines, .bookings, .order-bookings { list-style: none; margin: 0 0 var(--cs-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--cs-space-4); } .cart-lines > li, .checkout-lines > li, .order-lines > li, .bookings > li { display: grid; gap: var(--cs-space-3); padding-bottom: var(--cs-space-4); border-bottom: var(--cs-border-hairline); } @media (min-width: 40rem) { .cart-lines > li { grid-template-columns: var(--cs-space-px-80) 1fr auto; align-items: start; } } .cart-line-image img { width: 100%; height: auto; border-radius: var(--cs-radius-sm); } .cart-line-variant, .cart-line-personalization, .cart-line-seats, .checkout-line-personalization, .order-line-personalization, .order-line-sku { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .cart-line-total, .cart-subtotal, .checkout-line-total, .checkout-grand-total, .order-line-total, .order-grand-total, .expedite-price, .delivery-price, .ticket-price, .ticket-deposit { font-variant-numeric: tabular-nums; } .cart-subtotal, .checkout-grand-total, .order-grand-total { font-size: var(--cs-size-text-lg); font-weight: 600; } .cart-subtotal-note { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } /* The way out of the core basket (F-195). Core's own page, dressed here for a shop whose theme overrides nothing. */ .cart-checkout { margin: var(--cs-space-4) 0; } .cart-line-form { display: flex; gap: var(--cs-space-2); align-items: center; } .cart-line-form input[type="number"] { width: var(--cs-space-px-72); } .checkout-form { display: grid; gap: var(--cs-space-6); max-width: 72rem; margin: 0 auto; padding-inline: var(--cs-space-4); } @media (min-width: 56rem) { .checkout-form { grid-template-columns: 1.3fr 1fr; align-items: start; } .checkout-summary { position: sticky; top: var(--cs-space-4); } } .checkout-contact, .checkout-address, .checkout-delivery, .checkout-payment, .checkout-discount, .checkout-gift-card, .checkout-expedite, .checkout-summary, .order-gift-cards, .order-downloads, .download-refused, .order-address, .order-delivery, .order-pickup, .order-status, .privacy-cookies, .privacy-purposes, .privacy-history { border: var(--cs-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-5); background: var(--cs-color-surface); margin-bottom: var(--cs-space-5); } .checkout-summary { background: var(--cs-color-surface-muted); } .checkout-totals, .order-totals { display: flex; flex-direction: column; gap: var(--cs-space-2); padding-top: var(--cs-space-3); border-top: var(--cs-border-default); font-variant-numeric: tabular-nums; } .delivery-option, .payment-option { display: flex; gap: var(--cs-space-3); align-items: flex-start; padding: var(--cs-space-3); border: var(--cs-border-default); border-radius: var(--cs-radius-md); margin-bottom: var(--cs-space-2); cursor: pointer; } .delivery-option:hover, .payment-option:hover { border-color: var(--cs-color-border-strong); } .delivery-window, .delivery-note, .delivery-pickup, .expedite-promise, .order-note, .order-claim, .order-claimed, .order-keep-link { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .checkout-place { width: 100%; margin-top: var(--cs-space-4); } .order-document { display: inline-block; margin-top: var(--cs-space-3); } .order-line-title, .checkout-line-title { font-weight: 600; } .order-line-quantity, .checkout-line-quantity { font-variant-numeric: tabular-nums; color: var(--cs-color-ink-muted); } /* ------------------------------------------------------------------ * * 5 · Events and bookings * ------------------------------------------------------------------ */ .event, .post, .legal, .page { max-width: 72rem; margin: 0 auto var(--cs-space-7); padding-inline: var(--cs-space-4); } .event-hero img { width: 100%; height: auto; border-radius: var(--cs-radius-lg); } .event-body { max-width: 68ch; } .event-where, .event-age, .event-policy, .event-instructions, .occurrence-when, .occurrence-seats, .ticket-seats, .booking-seats { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .event-dates, .occurrences, .ticket-types, .event-tickets { list-style: none; margin: 0 0 var(--cs-space-5); padding: 0; display: flex; flex-direction: column; gap: var(--cs-space-3); } .ticket-type, .occurrences > li { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); align-items: baseline; justify-content: space-between; padding: var(--cs-space-3); border: var(--cs-border-default); border-radius: var(--cs-radius-md); } .occurrence-closed { opacity: 0.6; } .ticket-name { font-weight: 600; } .booking-form { display: flex; flex-direction: column; gap: var(--cs-space-3); padding: var(--cs-space-5); background: var(--cs-color-surface-muted); border-radius: var(--cs-radius-lg); } .booking-title { margin-top: 0; } .booking-reference { font-family: var(--cs-font-mono); font-size: var(--cs-size-text-lg); letter-spacing: 0.04em; word-break: break-all; } .booking-reference-label { font-size: var(--cs-size-text-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--cs-color-ink-muted); } .booking-held { font-weight: 600; } .add-to-calendar, .calendar-subscribe { display: inline-block; margin-top: var(--cs-space-3); } .calendar-options { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); } /* ------------------------------------------------------------------ * * 6 · Articles, pages and the legal shelf * ------------------------------------------------------------------ */ .post-body :is(h2, h3) { margin-top: var(--cs-space-6); } .post-body img { max-width: 100%; height: auto; border-radius: var(--cs-radius-md); } .post-meta, .post-card-excerpt, .legal-updated, .privacy-version, .privacy-generated { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .legal-toc { list-style: none; margin: 0 0 var(--cs-space-6); padding: var(--cs-space-4); background: var(--cs-color-surface-muted); border-radius: var(--cs-radius-md); display: flex; flex-direction: column; gap: var(--cs-space-2); } .legal-section { margin-bottom: var(--cs-space-6); } /* The generated half of the privacy page -- what the software stores, as opposed to what the merchant wrote. Visibly separate on purpose: a reader should be able to tell the farm's promise from the machine's inventory. */ .privacy-generated { border-top: var(--cs-border-default); margin-top: var(--cs-space-6); padding-top: var(--cs-space-5); } .page-privacy table, .page-do-not-sell table { width: 100%; border-collapse: collapse; } .page-privacy th, .page-privacy td, .page-do-not-sell th, .page-do-not-sell td { text-align: left; padding: var(--cs-space-2) var(--cs-space-3); border-bottom: var(--cs-border-hairline); font-size: var(--cs-size-text-sm); } /* ------------------------------------------------------------------ * * 7 · The buyer-photograph gallery and quick view * ------------------------------------------------------------------ */ .gallery-search, .gallery-sort { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); align-items: center; margin-bottom: var(--cs-space-5); } .gallery-count { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .gallery-chips a { display: inline-block; padding: var(--cs-space-1) var(--cs-space-3); border: var(--cs-border-default); border-radius: var(--cs-radius-pill); font-size: var(--cs-size-text-sm); text-decoration: none; } .gallery-tile-title { font-weight: 600; } .gallery-tile-product, .gallery-tile-rating { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } /* "Verified buyer" is a factual claim about a purchase record, so it is drawn as a fact and not as a badge to be proud of. */ .gallery-tile-tick, .gallery-tile-flag { font-size: var(--cs-size-text-xs); color: var(--cs-color-success); } .gallery-tile-flag { color: var(--cs-color-ink-muted); } .gallery-pager { display: flex; gap: var(--cs-space-3); justify-content: center; margin-top: var(--cs-space-6); } .cs-quick { display: grid; gap: var(--cs-space-4); background: var(--cs-color-surface); border: var(--cs-border-default); border-radius: var(--cs-radius-lg); padding: var(--cs-space-5); box-shadow: var(--cs-shadow-overlay); } @media (min-width: 40rem) { .cs-quick { grid-template-columns: 1fr 1fr; align-items: start; } } .cs-quick__media img { width: 100%; height: auto; border-radius: var(--cs-radius-md); } .cs-quick__title { font-family: var(--cs-font-heading); margin: 0 0 var(--cs-space-2); } .cs-quick__price { font-weight: 600; font-variant-numeric: tabular-nums; } .cs-quick__sub, .cs-quick__note, .cs-quick__rating, .cs-quick__blurb { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .cs-quick__body { display: flex; flex-direction: column; gap: var(--cs-space-3); } .cs-quick__options, .cs-quick__links { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); } /* How many and the button on one line, as the product page draws them. Both were written with no name and were the browser's own (F-440). */ .cs-quick__buy { display: flex; align-items: stretch; gap: var(--cs-space-px-12); margin-top: var(--cs-space-2); } .cs-quick__buy .button-primary { flex: 1 1 auto; padding-inline: var(--cs-space-3); } .cs-quick__links { align-items: center; } .cs-quick__links form { margin: 0; } .cs-quick__go { text-decoration: underline; } /* ---- the upload dropzone (buyer photographs) ---- */ .dropzone { border: var(--cs-space-px-2) dashed var(--cs-color-border-strong); border-radius: var(--cs-radius-lg); padding: var(--cs-space-6); text-align: center; background: var(--cs-color-surface-muted); } .dropzone__prompt { font-weight: 600; } .dropzone__hint, .dropzone__drop, .dropzone__file { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .dropzone__browse { text-decoration: underline; cursor: pointer; } /* ------------------------------------------------------------------ * * 8 · Consent, coming-soon and the channel list * * The consent banner is the one element on the site that must not be prettier * on one choice than the other. Accepting and declining are the same size, the * same weight and the same distance from the thumb -- a design that makes * "Accept" the easy one is a dark pattern whatever the copy says. * ------------------------------------------------------------------ */ .consent-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: var(--cs-color-surface); border-top: var(--cs-border-strong); box-shadow: var(--cs-shadow-lg); padding: var(--cs-space-4); } .consent-intro { max-width: 60ch; font-size: var(--cs-size-text-sm); } .consent-actions, .consent-choices { display: flex; flex-wrap: wrap; gap: var(--cs-space-3); margin-top: var(--cs-space-3); } /* Equal shares of the row whatever each says: sized from its words, the longer label made the wider button (measured 612 and 624, F-440). Too narrow for two, they stack whole. */ .consent-actions .button, .consent-actions .button-primary, .consent-actions .button-secondary { flex: 1 1 0; min-width: 12rem; } /* Boxes to tick, not a bulleted list of them (F-440). */ .consent-choices { list-style: none; padding: 0; } .consent-links { font-size: var(--cs-size-text-sm); margin-top: var(--cs-space-2); } /* ---- the launch page (F-479) ---- * What a shop that has not opened shows the public: one panel of the theme's * paper in the middle of the window, and the picture the shop chose filling * the window behind it. No words are laid on the photograph, so how well they * read does not depend on what was uploaded. On a phone the picture is a band * above the panel. * * Until V0.6.130 no page loaded these: the launch page linked core's sheet and * nothing else, and its box and button were the browser's own. */ .coming-soon__main { max-width: none; margin: 0; padding: 0; } .coming-soon__stage { position: relative; min-height: 100vh; display: grid; place-items: center; padding: var(--cs-space-6) var(--cs-space-4); } .coming-soon__picture { position: absolute; inset: 0; overflow: hidden; } .coming-soon__picture img { width: 100%; height: 100%; max-height: none; object-fit: cover; } .coming-soon__panel { position: relative; box-sizing: border-box; width: 100%; max-width: 34rem; padding: var(--cs-space-7) var(--cs-space-6); background: var(--cs-color-surface); border: var(--cs-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-lg); text-align: center; } .coming-soon__shop { display: flex; align-items: center; justify-content: center; gap: var(--cs-space-2); margin: 0 0 var(--cs-space-5); font-family: var(--cs-font-heading); font-size: var(--cs-size-text-lg); font-weight: 600; } .coming-soon__logo { max-height: var(--cs-space-px-56); } .coming-soon__mark { height: var(--cs-space-px-28); max-height: none; } .coming-soon__eyebrow { color: var(--cs-color-brand-text); font-weight: 600; } .coming-soon__title { margin: var(--cs-space-2) 0 var(--cs-space-5); font-family: var(--cs-font-heading); font-size: clamp(var(--cs-size-px-28), 5vw, var(--cs-size-px-38)); line-height: 1.15; } .coming-soon__countdown { justify-content: center; gap: var(--cs-space-5); margin-block-end: var(--cs-space-6); } .coming-soon__unit > [data-countdown-part] { font-family: var(--cs-font-heading); font-size: var(--cs-size-px-38); line-height: 1.1; } .coming-soon__label { color: var(--cs-color-ink-muted); letter-spacing: 0.08em; } /* The box takes the row and the button keeps its words; too narrow for both, they stack whole. */ .coming-soon__form { align-items: flex-end; gap: var(--cs-space-3); text-align: start; } .coming-soon__field { flex: 1 1 14rem; max-width: none; margin: 0; } .coming-soon__field input { width: 100%; } .coming-soon__note, .coming-soon__done { margin: var(--cs-space-4) 0 0; color: var(--cs-color-ink-muted); font-size: var(--cs-size-text-sm); } @media (max-width: 47.99rem) { .coming-soon__stage { display: block; min-height: 0; padding: 0; } .coming-soon__picture { position: static; aspect-ratio: 16 / 10; } /* The page itself, not a card laid on it: nothing under the panel to be a second color at the foot of a phone. */ .coming-soon__panel { max-width: none; padding: var(--cs-space-6) var(--cs-space-4); background: transparent; border: 0; border-radius: 0; box-shadow: var(--cs-shadow-none); } .coming-soon__submit { width: 100%; } } .channel-detail { font-size: var(--cs-size-text-sm); color: var(--cs-color-ink-muted); } .category-children { display: flex; flex-wrap: wrap; gap: var(--cs-space-2); list-style: none; margin: 0 0 var(--cs-space-5); padding: 0; } .category-children a { display: inline-block; padding: var(--cs-space-1) var(--cs-space-3); border: var(--cs-border-default); border-radius: var(--cs-radius-pill); font-size: var(--cs-size-text-sm); text-decoration: none; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ------------------------------------------------------------------ * * 9 · The shell: width, header, navigation, footer * * THE WIDTH IS THE IMPORTANT PART OF THIS SECTION. `app/static/css/core.css` * sets `--measure: 38rem` and applies it to `.site-header`, `.site-main` and * `.site-footer`. 38rem is a *reading* measure and it is the right default for * a stylesheet whose job is to make an unthemed page legible -- but it means * the whole shop renders in a 608px column on any screen, which is why a * four-across product grid came out two-across and why the page looked like a * document rather than a storefront. * * Widening it is a theme's decision, not core's: core cannot know whether the * next theme is a shop or a newsletter. So the shell widens here and prose * keeps its own measure -- `p`, `.product-description`, `.post-body` and the * legal sections are all capped at 68ch above, independently of the container. * ------------------------------------------------------------------ */ /* THE HOLLOWFIELD CHANGE TO THIS: the header and the footer lose their * container, `.site-main` keeps its. * * The design runs three full-bleed grounds through the page -- the announcement * bar, the footer, and two dark bands inside the content -- and a ground cannot * bleed out of a centered container. The header and the footer are safe to * unconstrain because their contents are the theme's own markup and each inner * row re-imposes the measure itself. * * `.site-main` is NOT unconstrained, and that is the important half. Only the * block-built pages put everything inside a `.block`; the product page, the * basket, checkout, the order pages and every account screen render straight * into `.site-main` with no wrapper of their own, so taking the measure off it * would have set the whole shop edge to edge and left one line in a diff to * explain it. The two bands that need the full width break out of it instead, * below. */ .site-main { max-width: 79rem; width: 100%; padding-inline: var(--cs-space-px-24); } .site-header, .site-footer { max-width: none; width: 100%; padding-inline: 0; } /* The two bands that bleed. `calc(50% - 50vw)` is the width the centered parent is inset by, so a negative margin of exactly that much puts the band's edges on the window's edges without knowing the container's width. * * `100vw` counts the scrollbar and `100%` does not, which is the whole reason * `body` carries `overflow-x: hidden` -- without it every page on a desktop * browser with a classic scrollbar scrolls sideways by about 15px. The mobile * overflow gate is what would have caught that; it is cheaper to say so here. */ .block-data-strip, .block-traceability { width: 100vw; margin-inline: calc(50% - 50vw); } /* The header keeps no rule under it and no padding of its own: the announcement bar bleeds to the window edges and `.cs-header` inside it carries the measure and the padding. The division under the header is the hero's own ground change, not a line. */ .site-header { border-bottom: none; padding-block: 0; margin-bottom: 0; } /* The footer is a different ground, not a ruled-off part of the same sheet: R8 closes the page on the deep green the boards open it with. */ .site-footer { border-top: none; background: var(--cs-color-surface-inverse); margin-top: var(--cs-space-px-72); padding-block: var(--cs-space-px-64) var(--cs-space-px-28); color: var(--cs-color-ink-inverse-muted); } .site-footer > * { max-width: 79rem; margin-inline: auto; padding-inline: var(--cs-space-px-24); } /* ---- announcement ---- */ /* The inverse ground, which R8's palette makes the boards' deep green: the bar every board opens with. */ .cs-announce { background: var(--cs-color-surface-inverse); color: var(--cs-color-ink-inverse); text-align: center; padding: var(--cs-space-px-10) var(--cs-space-px-44); font-size: var(--cs-size-px-13-5); font-weight: 500; letter-spacing: 0.01em; position: relative; } .cs-announce a { color: var(--cs-color-accent-on-inverse); } .cs-announce__close { position: absolute; right: var(--cs-space-3); top: var(--cs-space-px-7); color: var(--cs-color-ink-inverse); text-decoration: none; } /* ---- header ---- */ /* R8, the approved boards: the header sits on the page's own cream with a hairline under it, and the row is the Home board's -- the shop's mark and name, the menu, then the search box, two round marked buttons and the basket pill at the far end. */ .site-header { border-bottom: var(--cs-border-hairline); } .cs-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cs-space-px-24); max-width: 79rem; margin-inline: auto; padding: var(--cs-space-px-20) var(--cs-space-px-24); border-bottom: none; margin-bottom: 0; } .cs-brand { text-decoration: none; display: flex; align-items: center; gap: var(--cs-space-px-12); margin-right: var(--cs-space-px-16); color: var(--cs-color-ink); } .cs-brand__mark { display: block; height: var(--cs-space-px-32); width: auto; } .cs-brand__name { font-family: var(--cs-font-heading); font-size: var(--cs-size-px-28); font-weight: 500; letter-spacing: -0.015em; line-height: 1; color: var(--cs-color-ink); } .cs-brand__logo { max-height: var(--cs-space-px-44); width: auto; display: block; } /* ---- navigation ---- * The dropdown opens on hover AND on keyboard focus, in CSS, with no script. * `:focus-within` is what makes it keyboard-reachable; without it the children * are tab-focusable but invisible, which is worse than not having them. */ .cs-nav__list, .cs-nav__panel, .cs-footer-list { list-style: none; margin: 0; padding: 0; } /* The `