/* ============================================================================= Sooq — the design system. tokens.css and shop.css were deleted and written again. Nothing here is inherited from the previous storefront. THE PALETTE IS DESIGNED, NOT GENERATED. Every value below was chosen and measured. Nothing is computed from a runtime variable, and nothing shifts hue per shop — a palette that rearranges itself around whatever hex a shopkeeper typed into Settings is not a palette, it is a filter, and it is why several earlier attempts came out as a white page with one coloured button on it. THE SCHEME: a near-black field, an electric blue signal, near-white paper. It replaces souq indigo, unbleached paper and saffron. What carried over is the STRUCTURE rather than the hues, because the structure is what the rest of the stylesheet depends on: - the page still opens and closes in one saturated ground and is paper in between; - the accent still has a value per JOB rather than one value used everywhere — a colour legible on the field is not legible on the page, and a colour that can be a fill cannot always be small text on itself; - every ink still has a ground it is allowed on, and that rule lives in the stylesheet rather than in somebody's memory; - nothing is computed from a runtime variable, and nothing shifts hue per shop. A palette that rearranges itself around whatever hex a shopkeeper typed into Settings is not a palette, it is a filter. EVERY VALUE BELOW IS MEASURED, and three of them are DERIVED rather than given: --signal-lit, --success-ink and --warning-ink. Each exists because the value it comes from has no legal ground for small text — see the comments at each. The tables are exact, not estimated: the habit comes from an earlier comment in CLAUDE.md that claimed a muted grey was 4.6:1 when it was 3.72:1, on the one value carrying every count, caption and breadcrumb. THE SHOP'S OWN COLOUR still arrives at runtime and still has a JOB rather than a licence: the current section's marker and the basket count. Two places. It says whose shop this is; it does not redecorate. --------------------------------------------------------------------------- THE CONSOLE NEEDS EXACTLY SEVEN NAMES FROM THIS FILE: --accent-ink --accent-rgb --ease-out --ease-spring --font-ui --t-base --t-fast console.css defines everything else it uses itself. Those seven must never leave this file. A missing custom property does not warn — it silently invalidates the declaration that used it. Deleting --font-ui once dropped `font: 400 14px/1.5 var(--font-ui)` out of every console screen and fell the whole application back to a serif, with nothing in any log to say why. ============================================================================= */ /* ONE FAMILY, AND IT IS A GROTESK. Archivo, variable on width as well as weight, across the whole range. It sets the wordmark, every heading, every price, every control and every line of body copy — and the register is carried by WEIGHT, WIDTH AND TRACKING rather than by a second typeface. The serif is gone. Fraunces was on the wordmark and on every price, and a serif price is the single loudest period signal a shop can put on a screen: it says letterpress, not retail. Dropping it also drops a second font request and about 60KB. Display sizes run heavy (800) and tight (-.03em) at a slightly expanded width; text sits at 400-500 and normal width. That gap is what a second family used to be for. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..900&family=Bebas+Neue&display=swap'); :root { color-scheme: light; /* ========================================================================== ROYAL BLUE, WHITE PAPER, NEAR-BLACK BANDS. SAMPLED FROM THE REFERENCE, NOT GUESSED. templatekit.jegtheme.com/noiz was captured at 1440 and the values below are the pixels out of that capture — eyeballing a blue off a screenshot gets you a blue that is nearly right, and nearly right is exactly what makes a copy look like a copy. #0035B9 the accent: Sale badges, prices, fills #152859 the navy of the hero band and the promo panels #0A0A0A the footer #F2F2F2 the alternating section band #95969A the struck-through price THE ACCENT IS UNUSUALLY GOOD. #0035B9 is 9.50:1 on white as TEXT and 9.50:1 carrying WHITE as a fill — one value doing both jobs, which no palette this project has had before could manage. The champagne needed two (a bright fill and an antique text value) and the indigo before it needed four. This replaces champagne on warm stone, which replaced champagne on black, which replaced electric blue on cool grey. What carries over every time is the structure: the page opens and closes in --field, the accent has a value per job, every ink has a ground it is allowed on, and a card must lift off the page by a measured step. ========================================================================== */ --paper: #FFFFFF; /* the page */ --paper-2: #F2F2F2; /* the alternating section band, and a recessed well */ --paper-3: #E4E4E4; /* the deepest neutral ground */ --ink: #141414; /* headings, prices, anything read first */ --ink-2: #4A4A4A; /* body copy, secondary lines */ --ink-3: #6A6B6E; /* counts and specifications — SEE THE GROUND RULE */ --surface: #FFFFFF; /* a card, an input, a picker */ /* The ground a product photograph sits on. White, because they are contained rather than cropped and nearly all are shot on a white sweep. It equalled --surface on the warm theme too and was a LIT panel on the black one; the name is the ground's job, which is why both were expressible. */ --plate: #FFFFFF; /* DECLARED AND READ BY NOTHING — earlier palettes' shelf grounds. */ --card: #EDF1FF; --line: #E2E2E2; /* a hairline between things of equal weight */ --line-2: #CFCFCF; /* a rule doing structural work */ /* MEASURED, on every ground each ink is actually set on. --paper --paper-2 --paper-3 --ink 18.42 16.46 14.02 --ink-2 8.59 7.68 6.54 --ink-3 5.33 4.76 4.06! --signal 9.50 8.49 7.23 THE STRUCK-THROUGH PRICE is the reference's #95969A and is 2.95:1 on white, which is a fail — and it is kept, because it is the one piece of text on the page that is DECORATIVE: it has a line through it, the live price sits beside it in the accent, and nobody is asked to read it. It is --ink-3 anywhere it is not struck. ========================================================================== */ /* ========================================================================== THE FIELD — the near-black of the footer and the editorial bands, and the NAVY of the hero, which is a second dark ground and a new name. The reference runs two darks on purpose: a navy hero at the top, a near-black band in the middle and a near-black footer. The navy is what stops the page opening and closing in the same colour. ========================================================================== */ --field: #0A0A0A; --field-rgb: 10, 10, 10; --field-2: #141414; /* the editorial band, a step up from the footer */ --field-line: #2A2A2A; /* a rule on the field */ --field-ink: #FFFFFF; /* primary text on the field — 19.80:1 */ /* NEARLY WHITE, NOT A MID GREY, and this file has learned it three times now. --field-fg is set on the STAGE BAND as well as on the solid field, and the band is GLASS — its real ground is nothing like --field. The auditor measures it on the live page; a mid grey passes against --field and fails where it is actually painted. */ --field-fg: #E4E4E4; /* THE BAND BLUE, AND IT IS THE SIGNAL. The reference runs ONE blue: its masthead, its page headers and its hero are all #0035B8, the same value as its accent. This was #152859 for several passes and that was a sampling error worth recording. The home hero's section carries an
— a dark layer over the blue — and I counted the pixels underneath it and took the result for the brand colour. The cart and the product page have no overlay and both read #0035B8 straight. Nothing that was tuned for a near-black ground may be set on this: white is 9.50:1 here, and --signal-lit, which was solved against the field, is about 2.6:1. The band's hierarchy is white at two weights. */ --band: #0036B9; --band-rgb: 0, 54, 185; /* ========================================================================== THE SIGNAL — royal blue, and for once one value does most of the jobs. ========================================================================== */ --signal: #0035B9; /* the fill AND text on paper — 9.50:1 both ways */ --signal-rgb: 0, 53, 185; --signal-ink: #0035B9; /* text on paper — the same value */ /* SOLVED AGAINST THE GLASS BAND'S WORST CASE, which is a white photograph — ground rgb(43,58,97), where this reads 4.64:1. The value before it was picked to clear the solid navy and never checked against the band, where it read 4.13:1. */ --signal-lit: #90A7E0; --signal-press: #002A94; /* the pressed fill — white on it is 12.0:1 */ /* WHAT GOES ON A SIGNAL FILL. White, at 9.50:1 — and the name is the job rather than the colour, which is why the champagne theme's --on-gold could become this without a single rule changing. */ --on-signal: #FFFFFF; /* Kept as an alias for one release: the champagne theme wrote --on-gold into eight rules and a stale name fails SILENTLY, painting nothing. */ --on-gold: var(--on-signal); /* DECLARED AND READ BY NOTHING — earlier palettes' caption grounds. */ --well-1: #E8ECFF; --well-2: #FFEDE5; --well-3: #FFE4E0; --well-4: #E4F5EC; /* ========================================================================== SIGNALS — fixed, and outside the palette on purpose. A reduction has to read as a reduction whatever else is on the page. The -ink pair are the same hues darkened until they clear 4.75:1 on --paper-2, the harder light ground. ========================================================================== */ --danger: #D02121; /* fills, rules, and text on --paper or --paper-2 */ --success: #059669; /* a fill: the meter, the confirmed button */ --warning: #D97706; /* a fill: the meter's middle step */ --success-ink: #047250; --warning-ink: #96530A; /* Semantic names for the same three. `--sale` and `--error` are what shop.css has always called them and what reads correctly at the point of use. */ /* WORDS ON A TINT. --danger's own comment one line up says it is for "text on --paper or --paper-2", and `.stat--off` sets it on --well-3 (#FFE4E0) — a deeper tint, where it measures 4.44:1 against a 4.5 floor. That is the rule this file already states being broken: every ink has a ground it is allowed on. Third of its kind, beside --signal-ink and --success-ink, and derived the same way: the same hue darkened until it clears. on --well-3 #FFE4E0 4.75:1 on the console alert 5.25:1 on --paper 5.72:1 */ --danger-ink: #C81F1F; --sale: var(--danger); --error: var(--danger); /* ========================================================================== THE SHOP'S OWN COLOUR Overwritten at runtime by Sooq.paintAccent. It marks the section you are in and the basket count, and nothing else. The values here are what a page painted before /api/config answers gets, and what a console sign-in gets. ========================================================================== */ --brand: #0E6B3F; --brand-rgb: 14, 107, 63; --brand-ink: #FFFFFF; --brand-h: 150; /* The console reads these names for the same three values. */ --accent: var(--brand); --accent-rgb: var(--brand-rgb); --accent-ink: var(--brand-ink); --accent-h: var(--brand-h); /* ========================================================================== TYPE ========================================================================== */ --font-ui: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* BEBAS NEUE, and it is the one thing on this site that is not Archivo. It is a display face in the strict sense: one weight, capitals only, no lower case at all. That is why it needs its own name — anything set in it is uppercase whether the markup says so or not, so it may only ever carry a heading, never a sentence. The fallbacks are the narrow faces every platform has, because a condensed headline falling back to a normal-width one reflows the whole band. */ --font-display: "Bebas Neue", Impact, "Haettenschweiler", "Arial Narrow", sans-serif; /* TWO PIXELS AT 52px. Bebas is drawn to be spaced out and closes up when set solid; the reference tracks its headings at 2px and its hero at 5px. */ --track-display: .038em; /* The two registers, as variation settings rather than as two families. */ --sign: 'wdth' 104; /* headings and the wordmark */ --sign-lg: 'wdth' 108; /* the largest display sizes */ /* THE STATEMENT SHARES THE FOLD WITH THE GOODS NOW. At 104px it was the only thing above it, which is a poster rather than a shop — the products started 1,250px down the page. */ --fs-cover: clamp(32px, 4.2vw, 62px); --fs-h1: clamp(30px, 3.4vw, 50px); --fs-h2: clamp(24px, 2.4vw, 34px); --fs-h3: 21px; --fs-h4: 17px; /* ONE STEP UP ACROSS THE SMALL END. 15/13.5/12 was a comfortable reading size for somebody who designed it and a squint for everybody else, and 16px is the base every accessibility guide starts from. The scale keeps its shape; it just stops at 13 instead of 12. */ --fs-body: 16px; --fs-small: 14.5px; --fs-tiny: 13px; --fs-name: 15px; /* a product's name on the shelf */ --fs-price: 22px; /* a price on the shelf, in the display face */ --fs-price-lg: clamp(30px, 3vw, 44px); --fs-label: 13px; --fs-button: 15px; --lh-tight: 1.02; --lh-head: 1.2; --lh-body: 1.6; /* ========================================================================== SPACE — 4px base. Nothing between these values. ========================================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ========================================================================== SHAPE — a scale, and photographs are at the top of it. 3px on everything was the previous rule, and square corners on media is the single most dating thing left on the page: nothing made in the last decade has 0px on a photograph. This is not the rounded-card kit either — the point of a scale is that the radius says what KIND of thing something is: --r-chip a count, a swatch, a tag --r-ctl buttons, inputs, selects, the quantity stepper --r-tile a product tile and any photograph inside one --r-lg the mobile sheet --r-pill the search field and the basket, which are capsules The stage is the one image with no radius, because it is full-bleed and a rounded full-bleed image is a card pretending to be a background. ========================================================================== */ --r-chip: 6px; --r-ctl: 10px; --r-tile: 14px; --r: var(--r-ctl); /* The CONSOLE's scale. shop.css does not touch it. */ --r-xs: 3px; --r-sm: 6px; --r-md: 8px; --r-lg: 14px; --r-pill: 999px; /* ========================================================================== DEPTH — AT REST THERE IS NONE, and under the pointer there is some. Nothing on this page floats by default: separation is space and a change of ground. But a tile that lifts when you point at it is how a screen says "this is pressable", and a page where nothing answers the pointer reads as a printed page rather than as an interface. So exactly one shadow exists for the storefront and it only ever appears on :hover / :focus-within, on things that are genuinely links. --el-* is the console's, which has real dialogs. ========================================================================== */ /* AT REST, and it is the only thing in the file that is on at rest. The brief rules out "the same soft grey shadow under every box", and this is deliberately not that: two tight layers, tinted with the field's own blue rather than neutral grey, and carried by ONE element — the product tile, which is genuinely a raised object on a page. A white card on near-white paper needs it: --surface and --paper are four thousandths apart in luminance, so without it the only thing separating a tile from the page is a hairline, and fifteen hairlined boxes is a wireframe rather than a shelf. */ --lift-rest: 0 1px 2px rgba(16, 20, 44, .05), 0 8px 20px -12px rgba(16, 20, 44, .20); --lift: 0 2px 4px rgba(16, 20, 44, .06), 0 12px 28px -8px rgba(16, 20, 44, .22); --sheet-shadow: 0 -10px 44px rgba(20, 22, 28, .22); --el-1: 0 1px 2px rgba(20, 22, 28, .06), 0 2px 6px rgba(20, 22, 28, .04); --el-2: 0 8px 24px rgba(20, 22, 28, .12), 0 2px 6px rgba(20, 22, 28, .06); --el-sheet: var(--sheet-shadow); /* ========================================================================== LAYOUT ========================================================================== */ --measure: 1520px; /* the storefront: a catalogue uses the page */ --container: 1280px; /* the console's narrower measure */ --gutter: clamp(18px, 4vw, 44px); --sticky: 108px; /* the masthead once it has compressed */ /* ========================================================================== CONTROLS ========================================================================== */ --btn-h-sm: 36px; --btn-h: 46px; --btn-h-lg: 54px; --input-h: 46px; /* ========================================================================== MOTION — short, and only where something has changed. Nothing is linear; linear is the one thing no physical object does. ========================================================================== */ --ease: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(.2, 0, 0, 1); /* console reads this name */ --ease-spring: cubic-bezier(.22, 1, .36, 1); /* CONTROLS ARE FAST AND ENTRANCES ARE SLOW, and they are different scales. A button that takes half a second to acknowledge a press feels broken, so --t-fast and --t-base stay where they are: they are hovers, presses and colour changes, and their job is to be felt rather than watched. --t-slow was doing both jobs and was too quick for the second. It carried the drawer sliding in and the hero arriving — motion that is meant to be SEEN — at 320ms, which is a control's timing wearing an entrance's name. */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --t-zoom: 620ms; /* a photograph, deliberately slower than a control */ /* THE PAGE-LOAD SEQUENCE AND THE DRAWER. Its own name so the two can diverge later without one of them dragging the other along. */ --t-enter: 520ms; /* ========================================================================== BREAKPOINTS — here because a media query cannot read a custom property. Change one and you change it in shop.css by hand. 640px large phone — the shelf is two columns below this 900px tablet — three columns 1180px laptop — four columns ========================================================================== */ } /* Motion is decoration. When it is unwelcome, remove it rather than shorten it — a 0.01s animation still moves. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }