/* * Design tokens. Loaded on every page; custom properties only, so it styles * nothing by itself. * * Page rhythm is tokenised. Values internal to one component (the 2px under a * card title, the 6px beside a status dot) stay literals in that component's * file: a number used once for one visual detail is not a design decision. */ :root { /* Surfaces ----------------------------------------------------------- */ --shop-surface: #ffffff; /* A tinted ground for something white to sit on - the hero card on a phone, the head of an editorial table - or for content that sits one level under white, like an open navigation section's links. */ --shop-surface-subtle: #f3f1f9; /* The page behind the content on large screens (base.css, from 1440px): on a big monitor the white field was too bright (client request, 2026-09-30). Cards and panels keep their own white. */ --shop-page-background-wide: #f9f9f9; /* Text ---------------------------------------------------------------- Three levels. Card metadata is deliberately darker than filter labels and counters — that difference is visible in the reference and is what keeps a card readable at ~170px wide, so it is not collapsed. */ --shop-ink: #1e1b4b; --shop-text: #525252; --shop-text-soft: #6b7186; /* On dark surfaces ------------------------------------------------------ The footer's ground is the ink itself. Interactive styling adapts to the surface instead of forcing the accent purple onto it: on dark, links are the soft light neutral and turn white on hover, with an underline so the change is not colour alone; focus is the brand lime, which stands out on the ink at 9.3:1. Ratios are against --shop-ink. */ --shop-surface-dark: var(--shop-ink); --shop-on-dark: #fff; /* 16:1 headings, emphasis, hover */ --shop-on-dark-soft: #c7c4e0; /* 9.4:1 body text and links */ --shop-on-dark-rule: rgb(255 255 255 / 14%); --shop-on-dark-focus: var(--shop-lime); /* Accent -------------------------------------------------------------- */ --shop-accent: #5b21b6; --shop-accent-strong: #4c1d95; --shop-accent-soft: #ede9fe; --shop-accent-soft-hover: #e0d9fd; /* The 40x3 rule under a section heading. Same value as the soft hover, named separately because it is a different decision. */ --shop-divider-accent: #e0d9fd; /* Brand orange -------------------------------------------------------- One value for the hero button's fill and for the price on a card, so the two read as the same colour. This is the brand orange the rest of the site uses, chosen by the product owner after seeing the alternatives. KNOWN CONTRAST ISSUE, accepted deliberately: 2.44:1 both ways - white on the button, and the price on white - against the 4.5:1 WCAG AA asks for at the sizes used here. Anyone revisiting it should know the two halves have different escape routes: the button's label can be darkened (ink on this orange is 6.55:1) without touching the fill, while the price has to change colour, since orange on white does not reach 4.5:1 until roughly two thirds brightness. */ --shop-brand-orange: #ef8f02; --shop-brand-orange-hover: #d97f00; /* A vivid, redder orange for the SALE label, chosen by the product owner (2026-10-06) to pop. KNOWN CONTRAST ISSUE, accepted deliberately: white on it is 3.56:1, under the 4.5:1 AA asks for at the label's size (3:1 is met). The darkest that still reads orange and passes is about #b85602 (4.81:1). */ --shop-brand-orange-vivid: #e65c00; /* The deep red of the 100 x 100 cm label, chosen by the product owner (2026-10-10): distinct from both the SALE orange and the accent purple. White on it is 8.31:1, so it passes AA at the label's size. */ --shop-label-size: #981b2b; --shop-price: var(--shop-brand-orange); /* Brand lime: the navigation band, at every width. Inside the menus it is deliberately absent - the band is the brand's one lime surface. */ --shop-lime: #b2d315; /* Availability -------------------------------------------------------- */ --shop-stock-text: #4f6b10; --shop-stock-surface: #eef4dc; --shop-stock-dot: #9cc41e; /* A warning (components/notice.css). Ink 6.77:1 on the surface, 7.13:1 on white - not lighter than the field errors it summarises (8.02:1). The border is strong enough to carry the panel without a card behind it (the product page's calculator). */ --shop-warning-surface: #fff9e6; --shop-warning-border: #e9c65e; --shop-warning-text: #7a4f00; /* Something that went well (the paid state after checkout): a deep green on the lime the stock figure already uses, 7.10:1 - dark enough to sit beside the navy rather than shouting the way a bright green would. */ --shop-success-surface: #ecf5e8; --shop-success-text: #215c35; /* A field that needs correcting (components/form.css): a crimson with a cool cast, so it belongs beside the navy and the purple rather than shouting over them, and so it is not the amber a warning notice uses - the two say different things. Text 8.02:1 on white; the border is a shade lighter and still 6.5:1, far past the 3:1 a control's edge needs. */ --shop-error-text: #9f1239; --shop-error-border: #b3243b; /* Lines --------------------------------------------------------------- Three weights, because the filter panel's rhythm depends on its outline reading heavier than the rules between its sections. */ --shop-border: #e6e2ee; --shop-border-field: #dfe3ef; /* The edge of a form input where the edge is all that marks it (a text field, a checkbox): 3.04:1 on white, the 3:1 non-text contrast WCAG asks of a control's boundary. The filter panel's checkbox has used this value as a literal since before the token. */ --shop-border-input: #8d93b2; --shop-divider: #e7eaf3; /* Type ---------------------------------------------------------------- layout.html loads Source Sans Pro 400/600/700 only; a 300 renders as 400, so there is no Light. Adding 300 to the shared font request would lighten legacy `font-weight: 300` text on every page (Decision 6). */ --shop-font: 'Source Sans Pro', sans-serif; --shop-weight-semibold: 600; --shop-weight-bold: 700; --shop-text-2xs: 11px; --shop-text-xs: 12px; --shop-text-sm: 13px; --shop-text-md: 14px; /* Buttons, selects and text actions. The most-used size in the design. */ --shop-text-control: 15px; --shop-text-base: 16px; --shop-text-lg: 18px; --shop-text-xl: 22px; --shop-text-2xl: 26px; --shop-text-3xl: 34px; --shop-leading-display: 1.15; --shop-leading-tight: 1.2; --shop-leading-snug: 1.35; --shop-leading-normal: 1.5; /* Body copy: text someone is meant to read, as opposed to labels, metadata and controls. 16px is the floor for it on a phone - the editorial text, the hero's introduction and the stock header's subtitle all sit here. A role rather than a size, so a later page reaches for "body" instead of re-deciding what readable means. */ --shop-text-body: var(--shop-text-base); --shop-leading-body: var(--shop-leading-normal); /* Uppercase section headings and category names. */ --shop-tracking-caps: 0.5px; /* Small uppercase labels above content: the stock header's eyebrow. Wider than the headings' tracking because the type is smaller. */ --shop-tracking-eyebrow: 0.08em; /* Space ---------------------------------------------------------------- Section and page rhythm. Component internals are literals. */ /* The tight gutter the card grids and carousels share on small screens. Off the 4px scale on purpose: 12px is visibly loose two-up on a phone. */ --shop-gap-tight: 10px; --shop-space-1: 4px; --shop-space-2: 8px; --shop-space-3: 12px; --shop-space-4: 16px; --shop-space-5: 20px; --shop-space-6: 24px; --shop-space-8: 32px; --shop-space-10: 40px; --shop-space-12: 48px; --shop-space-14: 56px; /* Rhythm: the four relationships vertical space expresses, largest first. Layouts use these rather than raw steps, so the hierarchy is set here once and adapts per breakpoint below - not scaled down, re-chosen. section between independent sections of a page, and between the page and what is around it (the hero above, the footer) subsection before a new topic inside a long section - an h2 in the editorial text heading from a section's heading to the content it introduces; well under half a section gap, so the heading reads as belonging to what follows it flow paragraphs and lists (--shop-space-4) and a heading's own text (--shop-space-2); literals of the scale, since they do not change with the width */ --shop-rhythm-section: var(--shop-space-10); --shop-rhythm-subsection: var(--shop-space-8); --shop-rhythm-heading: var(--shop-space-4); /* Radii ---------------------------------------------------------------- */ --shop-radius-sm: 8px; /* Fields and buttons: the radius most of the design uses. */ --shop-radius-md: 10px; --shop-radius-lg: 12px; --shop-radius-panel: 14px; --shop-radius-sheet: 20px; --shop-shadow-card: 0 1px 3px rgb(0 0 0 / 6%); --shop-shadow-card-hover: 0 8px 24px rgb(0 0 0 / 10%); --shop-shadow-sheet: 0 -8px 30px rgb(30 27 75 / 18%); /* Motion --------------------------------------------------------------- base.css drops all of it under prefers-reduced-motion. */ --shop-duration: 250ms; --shop-duration-sheet: 300ms; --shop-ease: ease-out; /* Layering ------------------------------------------------------------- The Trusted Shops badge sits above this scale; overlays hide it, and the contact widget, instead of out-numbering them (layers.css). */ --shop-z-sticky: 1; --shop-z-scrim: 40; --shop-z-sheet: 50; /* The header's dropdowns - the market list and the navigation's panels: above the page, and above the filter sheet's scrim should both ever be open at once. */ --shop-z-dropdown: 60; /* How far fixed controls sit above the bottom of the screen. Anything floating there - the Filters button, the contact button - takes this, so their bottom edges line up without either knowing about the other. The safe-area term is zero until the page opts into viewport-fit=cover; it is there so nothing slides under a home indicator the day it does. */ --shop-fixed-bottom: calc(var(--shop-space-4) + env(safe-area-inset-bottom)); /* Layout --------------------------------------------------------------- 1000px and 15px are Foundation's .row max-width and .column padding, so migrated content shares a measure with the header bar and admin's Foundation rows. */ --shop-container: 1000px; --shop-gutter: 15px; /* Filter column on desktop. Chosen so four cards in the remaining space land near the reference's 174px rather than well under it. */ --shop-sidebar: 220px; --shop-sidebar-gap: 24px; /* The smallest comfortable touch target. */ --shop-tap: 44px; /* Icon sizes for the Phosphor SVGs in images/icons/, which are drawn on a 256 grid with a stroke of 16: at 24px that stroke is 1.5px, the weight the header and navigation icons share. Smaller sizes are for carets beside text. The header's cart and phone are sized by eye instead (see header-actions.css), because their drawings fill their canvas unequally. */ --shop-icon: 24px; --shop-icon-sm: 20px; --shop-icon-xs: 16px; } /* A tablet gets a little more air between sections and under headings; the desktop gets its full section gap, where the sections are also taller. */ @media (min-width: 640px) { :root { --shop-rhythm-section: var(--shop-space-12); --shop-rhythm-subsection: var(--shop-space-10); --shop-rhythm-heading: var(--shop-space-5); } } @media (min-width: 1024px) { :root { --shop-rhythm-section: var(--shop-space-14); } } /* * Breakpoints: 640px and 1024px, mobile-first (min-width). * * They are literals in every @media rule (a custom property cannot be used in * a media query, and there is no build step), so this says what they mean: * * 640px the product grid can hold a third column, and content type steps up * 1024px the filter sheet becomes a column, the grid takes a fourth, and the * navigation switches from drawer to bar * * max-width is used only for a phone-only form of a component whose base is * the wider layout: the navigation drawer (max-width: 1023.98px, also in * layout.html's matchMedia) and a few phone variants (max-width: 639px / * 639.98px). A few local, content-driven queries also exist (479px, 400px, * 650px, 768px, min-height gates for sticky summaries, and 1440px for the page * background behind the content). They are exceptions, not breakpoints; see * claude/frontend-design-system.md. * * Touch sizing is not a width: tap targets and the 16px fields that stop iOS * zooming use `@media (pointer: coarse)`. * * 360/390/768/1024/1440 are test widths, not breakpoints. */