/* * assets/styles/tokens.css — the single stylesheet this Worker serves * (task 4.8; design.md Decision 7, Route/state contract accessibility * paragraph, and the Responsive contract). * * --------------------------------------------------------------------------- * PATH * --------------------------------------------------------------------------- * design.md Decision 7 and tasks.md 4.8 both name this file * `web/src/http/styles/tokens.css`. It lives at * `web/public/assets/styles/tokens.css` instead, because that is the only * place it can be served from: wrangler.jsonc's `assets.directory` is * `./public`, so a file under `src/` is never uploaded and never reachable at * the `/assets/styles/tokens.css` URL http/templates/layout.ts links to. * Keeping a second copy under `src/` was rejected outright — two copies of a * token set are two places for it to drift, which is precisely the failure * this task's own acceptance criterion (a structural diff against design.md) * exists to catch. * * --------------------------------------------------------------------------- * THE `:root` BLOCK IS A MECHANICAL COPY, NOT A TRANSCRIPTION * --------------------------------------------------------------------------- * Decision 7 states that the complete token set is written out in design.md * "so apply is pure transcription". The block below was EXTRACTED from that * fenced code block programmatically and inserted here byte-for-byte — * including its comments, its two-declarations-per-line spacing rows, and its * trailing-comment placement. Nothing in it was retyped, reordered, * reformatted, or "tidied", so hand-transcription drift is impossible by * construction rather than by care. `test/unit/http/tokens-css.test.ts` * re-derives both sides and fails on any divergence, so it stays that way. * * --------------------------------------------------------------------------- * FONTS: SELF-HOSTED, NO THIRD-PARTY REQUEST (task 4.9, DEC-133) * --------------------------------------------------------------------------- * Decision 7 requires Exo 2 self-hosted as a subsetted woff2. The owner * authorised the download and the build toolchain INV-19 had reserved, so the * face is now declared below and the file ships in this repository under * `web/public/assets/fonts/`, served through the Worker's `/assets/*` route * with the Route/state contract's immutable-cache and security headers. * * The `@font-face` src is a ROOT-RELATIVE path. There is no `@import`, no * absolute `https:` URL and no protocol-relative `//host` reference anywhere * in this file, which is what keeps INV-8 and Decision 7's "zero third-party * font/icon network request" true. * * `--font-display`/`--font-body` are unchanged and still carry Decision 7's * exact declared value, `'Exo 2', system-ui, sans-serif`. No token value moved * for this change; the face simply started resolving. `system-ui` remains the * fallback that paints while the font loads and that covers any character * outside the subset's `unicode-range`. * * The artifact is reproducible: `scripts/build-exo2-subset.mjs` pins the * upstream commit, the source digest, every subsetting flag and the resulting * digest, and refuses to run when any of them disagree. The SIL OFL 1.1 text * ships beside the binary at `/assets/fonts/OFL.txt`, as the licence requires. * * --------------------------------------------------------------------------- * SCOPE OF THE RULES BELOW THE TOKENS * --------------------------------------------------------------------------- * Every class defined below is one the task 4.7 templates actually render; * the set is closed and is pinned by `test/unit/http/tokens-css.test.ts` * against a list typed independently into that test. This file defines no * class no template uses, and no template class is left undefined. */ /* =========================================================================== * EXO 2 — ONE VARIABLE FACE (task 4.9, issue #131, DEC-133) * * ONE FILE, NOT FOUR. The rules below consume four weights (400, 600, 700, * 900). Four static subsets would cost roughly 60-100 KB across four requests; * this variable subset is 26 612 bytes in one, and every browser in charter * §4.6's support matrix has shipped variable-font support since 2018. * * `font-weight: 400 900` is the RANGE the shipped file actually carries, not a * wish: the `wght` axis was restricted to 400-900 before subsetting, which * saved 9 736 bytes against keeping the untouched 100-900 axis. The cost is * recorded rather than hidden — `--fw-light` (300) is declared in the token * set and consumed by zero rules; a rule that started consuming it would * render clamped to 400 until the axis is widened and the artifact rebuilt. * The descriptor above is not taken on trust: the stylesheet's test reads the * `wght` axis out of the woff2's own `fvar` table and requires this line to * equal it exactly, then checks every `--fw-*` the rules consume against THAT * axis rather than against this line. Widening the descriptor alone therefore * buys nothing, which is what makes the clamp impossible to introduce quietly. * * `unicode-range` IS NOT DERIVED FROM THE TEMPLATES. Product names, part codes * and category names come from D1 at run time, so a subset built from today's * markup stops covering the catalog the moment real data lands. What that * costs is worth stating precisely, because it is NOT tofu: Chromium's font * matching falls through PER CHARACTER, so a glyph missing from the subset is * drawn from the next family in the stack instead. Measured here with a * digits-only build of this same file: `7` rendered from Exo 2 while `a`, `á` * and `ñ` rendered at the fallback's exact advance widths, with no `.notdef` * box anywhere. The real defect is a MIXED TYPEFACE INSIDE ONE WORD — a part * code in Exo 2 beside a product name in the system face — which is a brand * failure on owner content, not a legibility failure, and is correspondingly * easy to miss in review. The range below is a general Spanish-Peru range — * Basic Latin, the whole Latin-1 Supplement (every accented letter in both * cases, plus ¿ ¡ ° º ª « » §), and the six General Punctuation marks the * approved copy uses. It is a SUPERSET of what the templates contain, which is * the direction that stays correct as the catalog grows. * * `font-display: swap` — text is readable from the first paint in `system-ui` * and is repainted in Exo 2 when the file arrives, so the font can never hide * content. The alternative considered was `optional`, which guarantees zero * layout shift by refusing a late font outright; it was rejected because it * would leave most first-time mobile visitors on the fallback face entirely, * which defeats the reason for self-hosting the brand typeface. The swap's * cost was measured rather than assumed: see DEC-133. * ======================================================================== */ @font-face { font-family: 'Exo 2'; src: url("/assets/fonts/exo2-variable-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2026; } :root { /* Color — navy ramp, calibrated on dark background #001430, hue ~213deg */ --navy-950: #001430; --navy-900: #001A3D; --navy-800: #01224b; --navy-700: #0A3266; --navy-600: #144684; --navy-300: #8FA6C4; --navy-100: #E3E9F2; /* Color — signal red; hover/darken pair */ --red-600: #E30613; --red-700: #B80510; /* Color — neutrals */ --gray-100: #F2F4F7; --white: #FFFFFF; --gray-300: #D4DAE3; --gray-500: #7E8899; --gray-700: #3F4A5C; /* Color — semantic layer (reference-defined) */ --text-heading: var(--navy-950); --text-body: var(--gray-700); --text-inverse: var(--white); --text-accent: var(--red-600); --text-muted: var(--gray-500); --surface-page: var(--white); --surface-subtle: var(--gray-100); --surface-dark: var(--navy-950); --surface-dark-raised: var(--navy-900); --surface-card: var(--white); --surface-brand: var(--navy-800); --border-default: var(--gray-300); /* card border: 1px solid var(--border-default) */ --border-strong: var(--navy-700); --border-on-dark: rgba(255, 255, 255, .14); --action-primary: var(--red-600); --action-primary-hover: var(--red-700); --action-secondary: var(--navy-800); --action-secondary-hover: var(--navy-700); --focus-ring: 0 0 0 3px rgba(1, 34, 75, .35); /* Color — status */ --ok: #1E8E3E; --warn: #B26A00; --danger: var(--red-600); /* Typography — Exo 2, self-hosted; weights and scale per reference */ --font-display: 'Exo 2', system-ui, sans-serif; --font-body: 'Exo 2', system-ui, sans-serif; --fw-light: 300; --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --fs-display: 48px; --fs-h1: 34px; --fs-h2: 26px; --fs-h3: 20px; --fs-body: 16px; --fs-small: 14px; --fs-caption: 12px; --lh-tight: 1.1; --lh-heading: 1.2; --lh-body: 1.55; --ls-caps: .14em; /* ALL-CAPS labels/slogans (reference value) */ --ls-wide: .06em; /* Spacing — reference: 4px base step */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; /* Radii — reference: controls 4-8px, cards 14px, pills for badges only */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px; /* Elevation */ --shadow-card: 0 2px 8px rgba(0, 20, 48, .10); --shadow-raised: 0 8px 24px rgba(0, 20, 48, .16); /* Motion — reference: 120-200ms, slide/fade from left, no bounces */ --speed-fast: 120ms; --speed-base: 200ms; --ease-brand: cubic-bezier(.2, .7, .3, 1); --skew: -14deg; /* Interaction — this design's own decision, absent from the reference's token files (DEC-131) */ --press-scale: 0.98; } /* =========================================================================== * USAGE RULES (Decision 7, "binding on templates/CSS") * * headings Bold/Black, often uppercase with --ls-caps * hover darkens: --red-600 -> --red-700, navy -> --navy-700 * press scales to --press-scale * red accent at most ONE per element cluster * page background white or --gray-100 * dark sections --navy-950 / --navy-800 * motion slide/fade FROM THE LEFT only, never a bounce, always * within --speed-fast/--speed-base and --ease-brand, and * fully disabled under prefers-reduced-motion * ======================================================================== */ /* --- Reset kept to the minimum the templates need ----------------------- */ *, *::before, *::after { box-sizing: border-box; } /* THE ONE PIECE OF THE FULL-BLEED MECHANISM THAT CANNOT LIVE ON `.band`. * * Landing 5a is a stack of bands whose BACKGROUNDS reach the viewport edges * while their CONTENT stays on a 1060px measure. `.band` (below) escapes the * content measure with `margin-inline: calc(50% - 50vw)`, which is the only * formula available: percentages resolve against the containing block, so a * child cannot ask for "the viewport" any other way. * * `50vw` is half the viewport INCLUDING the classic scrollbar, while the * layout width excludes it, so every full-bleed band is exactly one * scrollbar-width too wide — a real horizontal scrollbar on every desktop * page, measured at 15px before this rule existed. `clip` (not `hidden`) * removes that overflow without turning the root into a scroll container, * and — unlike `hidden` — it is defined as a non-scrollable clip, so nothing * about programmatic or anchor scrolling changes. * * `position: fixed` is unaffected: the floating WhatsApp affordance's * containing block is the viewport, not the root element's box, so root * clipping cannot reach it. Verified in a browser at 390/1024/1280 px. */ html { overflow-x: clip; } /* --- Document ----------------------------------------------------------- */ .page { margin: 0; background-color: var(--surface-page); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); /* Opt out of the mobile-Safari text-size adjustment that would otherwise override the type scale on rotation. */ -webkit-text-size-adjust: 100%; } /* Headings: Bold/Black per the usage rule. Uppercase + --ls-caps is applied to the label-like headings (section and handoff titles), not to the headings that carry product and category NAMES — uppercasing a raw approved product or category name would render owner content in a form the owner did not approve. The split is by what a heading CONTAINS, not by its level: home's `h1` is `.category-section__title`, since `Categorías` is interface copy. `.page-title` went with its last emitter, home's old `h1`, which repeated the brand link directly above it. */ /* `.category-page__title` LEFT THIS LIST in adopt-results-view: the category route renders the shared results composition now, whose `

` sits on the navy header band and carries its own rule. */ .product__name, .search-state__title, .error-page__title { margin: 0 0 var(--sp-4); color: var(--text-heading); font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-h1); line-height: var(--lh-heading); } /* `.pd-related__title` JOINED (adopt-product-detail Slice 3, design.md §8): the related-products heading opens a body of content exactly like `.category-section__title` and `.handoff__title` do, so it takes their shared treatment rather than a near-duplicate rule. The physical rule under it is `renderBandHeading`'s own shipped `.band-heading__rule` (`subrayado-titulo-l3.svg`), unchanged. */ .category-section__title, .handoff__title, .pd-related__title { margin: 0 0 var(--sp-4); color: var(--text-heading); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); text-transform: uppercase; letter-spacing: var(--ls-caps); } /* --- Visible focus (Route/state contract accessibility paragraph) -------- */ /* `:focus-visible`, not `:focus`: a mouse click on a button must not leave a ring behind, but every keyboard arrival must show one. The ring is drawn twice on purpose — an `outline` that survives forced-colors/high-contrast mode, plus the token `--focus-ring` shadow that gives it the brand halo. */ :focus-visible { outline: 3px solid var(--border-strong); outline-offset: 2px; box-shadow: var(--focus-ring); } /* `.on-dark` (design.md §1 Decision; task 2.3): a SURFACE rule, not a header/footer rule. Landing 5a inverts the chrome — the header is now the site's one white section, and the utility bar and footer (plus, from U3, the pillar and CTA bands) are the dark ones — so this is applied to each dark BAND rather than fixed to two selectors that would silently stop covering a third dark section someone adds later. A navy outline is invisible against navy, which is what every `.on-dark` band shares. */ .on-dark :focus-visible { outline-color: var(--white); } /* --- Touch targets: the two techniques, declared once -------------------- */ /* * design.md §5.5 ends with "Minimum touch target 44px throughout", and task * 4.2 repeats it. U2/U3/U4 met it on everything they built (category row 73px, * featured card 82px, CTA action 49px, mode label 46px); SIX chrome controls * from U1 did not, and — because the chrome is on every document — they missed * it on every route. This section states how they were raised, so the pattern * is read once instead of six times. * * WHAT WAS *NOT* DONE, AND WHY. The mock is authoritative on how these * controls LOOK: the utility bar's 16px social glyphs, the header's 36px * lockup and the footer's 40px social squares are the design's specified * VISUAL sizes. Scaling the artwork up to reach the floor would answer an * ergonomics requirement by changing the design, which is the owner's call and * not this unit's. Only the interactive area grows. * * TECHNIQUE A — `min-height` on the control itself. Used where the extra * height costs no layout movement, and it is this repository's existing idiom * (`.footer__link`, `.site-header__cta`, `.search-form__input`). Applied to * `.skip-link` (absolutely positioned, so it can never move anything) and * `.site-nav__link` (the header row is already 44px tall because * `.site-header__cta` floors it there, so the nav growing into that height * changes nothing above 900px). * * TECHNIQUE B — an absolutely positioned `::after` hit area. Used where * technique A WOULD move something: growing `.site-brand` or `.footer__brand` * in flow pushes their neighbours down, and growing `.footer__social-link` * enlarges a square whose translucent background is VISIBLE artwork rather * than an invisible hit box. An out-of-flow `::after` leaves the element's own * box — and therefore the layout and the artwork — untouched while the * activatable region reaches the floor. Generated content belongs to its * originating element, so a pointer inside it activates the same link; that is * asserted empirically by `test/e2e/accessibility.spec.ts`'s target-size guard * (`document.elementFromPoint`), never assumed from these rules. * * Each `::after` uses `inset` values derived from the control's own measured * size, and each one is written next to the control it belongs to rather than * as a shared utility class: the numbers differ per control and a shared class * would hide which control is how far from the floor. */ /* --- Skip link ---------------------------------------------------------- */ /* Off-screen until focused, never `display: none` — a hidden-by-display element is not focusable at all, which would silently delete the skip link for the keyboard users it exists for. Technique A: measured 244.8x40.8, so only the height was short. Absolutely positioned, so the reserved 44px box moves nothing. */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2; display: inline-flex; align-items: center; min-height: 44px; padding: var(--sp-2) var(--sp-4); background-color: var(--surface-page); color: var(--text-heading); font-weight: var(--fw-bold); border-radius: var(--radius-sm); text-decoration: underline; } .skip-link:focus { left: var(--sp-3); top: var(--sp-3); } /* --- Header (light section; design.md §1 inverts the OLD dark header) --- */ /* * Landing 5a's header is FOUR stacked bands, all inside the ONE * `
` landmark (see layout.ts's `renderDocument` * doc comment for why): the navy utility bar, the white brand/nav/Cotizar * row, the gray beta notice, and — temporarily, until task 2.2 moves it to * the hero — a navy wrapper around the pre-existing search form. `.site- * header` itself is a bare positioning context; each band paints its own * background so the visual banding costs nothing extra structurally. */ .site-header { position: relative; } /* Utility bar: navy, location left, DEC-149's three social icons right (design.md §2 "Utility bar"; task 2.1). `.on-dark` (task 2.3) keeps the focus ring visible against `--surface-brand`. */ .utility-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background-color: var(--surface-brand); color: var(--text-inverse); } .utility-bar__location { color: var(--navy-100); font-size: var(--fs-caption); } .utility-bar__social { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; } /* THE ONE CONTROL THAT DOES NOT REACH 44px, RECORDED RATHER THAN GLOSSED. Measured 16x16 glyphs on a 12px (`--sp-3`) pitch (28px centre-to-centre), inside a band whose whole RENDERED height is ~40.8px (~41). A 44px square target is still geometrically unavailable without a VISUAL change the mock does not authorise — widening the icon gap past 28px, or growing the band itself — neither of which is this unit's to make. * * OWNER DECISION D, 2026-08-13, SUPERSEDING U5's 24x24. The hit area now * uses the room that IS available without any visual change: the band's own * full height. Each glyph sits 10px below the bar's top edge and 14.8px * above its bottom edge (measured in a real browser, not assumed from the * padding math), so extending the hit area by exactly those amounts reaches * the bar's top and bottom edges precisely — no target spills outside the * bar. Widened 6px each side (16 + 2x6 = 28) at the unchanged 28px pitch, * neighbouring hit areas meet edge to edge with zero gap and no overlap. * The 16px glyph and the 12px visual gap between glyphs are UNCHANGED — only * the interactive area grows. `test/e2e/accessibility.spec.ts`'s target-size * guard measures the largest centred SQUARE that lands on the control, which * this rectangle's narrower (28px) dimension bounds; its exception table * carries the resulting measured floor, this exact reason, and fails if the * exception ever stops being load-bearing. */ .utility-bar__social-link { position: relative; display: inline-flex; color: var(--text-inverse); } /* Technique B, 28 wide (16 + 2x6) x ~40.8 tall (10px above the glyph + 16 + 14.8px below) — the utility bar's own full rendered height. */ .utility-bar__social-link::after { content: ""; position: absolute; inset-inline: -6px; inset-block-start: -10px; inset-block-end: -14.8px; } .utility-bar__social-link:hover { color: var(--text-accent); } /* The white brand/nav/Cotizar row. */ .site-header__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4); background-color: var(--surface-page); border-bottom: 1px solid var(--border-default); } .site-brand { position: relative; display: inline-flex; align-items: center; color: var(--text-heading); text-decoration: none; } /* Technique B, 36 + 2x4 = 44. `min-height` was rejected here: the lockup is 36px because README §2 says the header logo is 36px, and an in-flow 44px box around it would push the whole white row 8px taller at every width where the row is not already floored by `.site-header__cta`. The 4px of overflow lands in `.site-header__row`'s own 16px padding, so it reaches no neighbouring control. */ .site-brand::after { content: ""; position: absolute; inset-block: -4px; inset-inline: 0; } /* The LIGHT-surface lockup (design.md §1.1) draws its own full wordmark, so — unlike the old dark isotype-only mark — nothing else inside `.site-brand` repeats the brand name; `alt` on the `` itself is the link's whole accessible name (layout.ts's `BRAND_MARK_LIGHT_HREF` comment). A fixed 36px block-size (the design's own header-logo height, README §2) plus `inline-size: auto` holds the shipped file's real aspect ratio; no negative-margin crop is needed because — unlike the old dark mark — this file is not padded with empty canvas around the drawing. The header now draws `logo-lockup.svg`, the tagline-free mark (the owner dropped the strapline). Losing the tagline band changed the aspect ratio from 451:152 to 438:90, so the same 36px draws a 175px-wide mark where it used to draw a 107px one. Everything at 360px and up absorbs that: at 1280 the mark ends at x=215 against a nav starting at x=966, and at 390 it ends at x=191 inside a 390px viewport, with zero horizontal overflow at either. 320px does not — see the query below. */ .site-brand__mark { display: block; block-size: 36px; inline-size: auto; } /* THE 320px HEADER IS A BUDGET, AND THE WIDER MARK SPENDS IT (owner decision, 2026-08-13, guarded by `hero-overlay.spec.ts`'s "two rows with the nav on one of them"). Below 640px row 1 is `[brand ... Cotizar]` and the nav owns row 2. At 320px that row has 288px of content width and a 16px gap, and `Cotizar` measures 110.41px in Exo 2 and 113.75px in the `system-ui` fallback the `font-display: swap` first paint uses — so the mark may be at most 158.25px before the button wraps to a third row and the approved two-row header becomes three. The old 107px mark cleared that with 51px to spare; the 175px one misses it by 17px, which is a regression this change caused and not a pre-existing tightness. 36px is the design's header-logo height (README §2), so it is kept wherever it fits and given up only where it does not: 30px yields 146px, 12px inside the tighter fallback-face budget, and the margin is deliberately that wide because the two faces measure 3.34px apart and a 2px margin is how the nav's own CLS defect happened (see `--font-display`'s note at the 639.98px query). The mark is still BIGGER than what shipped before — 27.5px of drawn ink at 30px, against 19.5px inside the old 36px box, because the old file spent its bottom third on the tagline. The boundary is 360px and not 340: the 36px mark needs a 337px viewport in the fallback face, and picking the nearest real device width above that leaves the step at a width people actually use rather than mid-way through one. Scoped to `max-width` deliberately, like the two queries U7 added — it must not reach the approved wider compositions. */ @media (max-width: 359.98px) { .site-brand__mark { block-size: 30px; } } .site-brand:hover { color: var(--text-accent); } /* Section nav (design.md §2 "Header"; task 2.1). A SECOND `