/** * Harvest — Base (reset, structural tokens, typography, layout container). * * Loaded first of the component kit, after the palette + derived tokens. Sets * the warm, organic food-&-grocery baseline the Harvest comps use: Karla body, * Bricolage Grotesque headings, an 1280px content container with 32px gutters, * and the radius/spacing scale every other component references (--hrv-radius * etc.) so a card here and a card there never drift. * * Structural tokens live here (not in _derived.css) because they are geometry, * not colour — they are palette-neutral and shared by every palette. */ :root, [data-hrv-palette] { /* Geometry scale — measured from the Harvest comps (design/store-theme/03-harvest-food/pages/*.dc.html: 18px and 14px dominate, 12px for small chips, 999px pills, 50% avatars). Noticeably rounder than the technical themes: "rounded and friendly" is the vertical's whole language, so these values ARE the design, not a default. */ --hrv-radius: 18px; /* cards, panels, hero */ --hrv-radius-md: 14px; /* buttons, inputs */ --hrv-radius-sm: 12px; /* badges, chips */ --hrv-radius-pill: 999px; /* filter pills, dot nav */ --hrv-radius-circle: 50%; /* avatars, icon buttons, dots */ --hrv-gap: 16px; /* default grid gap */ --hrv-page-pad: 32px; /* horizontal page gutter (desktop) */ /* N-3 — the theme rendered ~10% narrower than the artboards, theme-wide. This token was 1280px. It is the OUTER cap (border-box), so with the 32px gutter it produced a 1216px content column, against the artboards' 1376px measured at a 1440 viewport: 11.6% narrower, on every page. MEASURED, NOT READ. The artboards declare no container cap at all — grepping them for a width finds only `max-width: 44ch` prose measures, and grepping for the gutter as a literal `padding: 0 32px` matches ZERO times in all 48 files even though the computed value is 32px. The number below comes from rendering four artboards through this same rig at the same viewport (`--file`), which is also why that mode exists: comparing a rendered width against a declared one is not a comparison. Home 32px gutter -> 1376 T10 Product Detail -> 1376 T16 Cart -> 1376 T2 Home Editorial 40px gutter -> 1360 1440 outer - 2x32 gutter = 1376 content, so the cap is the viewport width itself. AND THE 1280 WAS OURS. Blank's `styles-l.css` also sets `.page-main { max-width: 1280px }` at the identical (0,1,0), so the computed 1280px was consistent with either winning. The tie goes to source order and this file loads at sheet index 13 against Blank's 4 — so Harvest's rule won and Harvest's token was the 1280. A defect that looks inherited and is not is the easiest kind to fix in the wrong file. One token, because header, footer, breadcrumbs, .hrv-container and .page-main all read it — which is what "not page-scoped" should mean in practice. */ --hrv-container: 1440px; /* outer cap; with --hrv-page-pad this gives the artboards' 1376px content */ /* Softer, more diffuse than a technical theme's tight shadow — warm surfaces sit on the bg rather than snapping to it. */ --hrv-shadow-card: 0 6px 20px var(--hrv-shadow-tint); } /* ---- Reset / normalisation (scoped to storefront pages, not core widgets) ---- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--hrv-font-body); font-size: 14px; line-height: 1.6; color: var(--hrv-text); background: var(--hrv-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Typography — Bricolage Grotesque display, friendly near-neutral tracking. ---- */ h1, h2, h3, h4, h5, h6, .hrv-h1, .hrv-h2, .hrv-h3 { font-family: var(--hrv-font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.15; color: var(--hrv-text); margin: 0 0 0.5em; text-wrap: balance; } h1, .hrv-h1 { font-size: 32px; } h2, .hrv-h2 { font-size: 26px; } h3, .hrv-h3 { font-size: 20px; } p { margin: 0 0 1em; } /* * LINK TEXT USES THE AA-SAFE ACCENT, NOT THE RAW ONE, AND THE THEME ALREADY DECIDED THIS. * tokens/_derived.css measured every mix across all five palettes against both --hrv-surface and * --hrv-bg: the raw accent is not even a candidate for text, accent @85% (--hrv-accent-hover) * bottoms out at 4.21 and FAILS on wheat, and accent @75% (--hrv-accent-strong) is 5.58 worst case * and passes everywhere. That token exists for exactly this and this rule was not using it. * * MEASURED ON THE DEPLOYED PAGE, not argued: Home at 375px produced 21 AA failures under wheat, * 5 under basil and 1 under tomato, every one of them the raw accent as TEXT - on the page * background, and on the Luma greys #E8E8E8 / #F5F5F5 that core's mobile nav strip paints and the * theme does not own. Worst was 2.48:1 against a 4.5 floor. * * :hover KEEPS --hrv-accent-hover deliberately. _derived.css states the reason: hover is a state * the resting colour has already had to clear, and lowering the hover mix would flatten the * distinction between the two states. */ a { color: var(--hrv-accent-strong); text-decoration: none; } a:hover { color: var(--hrv-accent-hover); } a:focus-visible, button:focus-visible { outline: 2px solid var(--hrv-focus-ring); outline-offset: 2px; } img { max-width: 100%; height: auto; display: block; } /* Uppercase kicker / eyebrow label used across the comps. */ .hrv-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hrv-accent-2); } /* ---- Layout container + main column ---- */ .hrv-container, .page-main, .columns .column.main { width: 100%; } .hrv-container { max-width: var(--hrv-container); margin-inline: auto; padding-inline: var(--hrv-page-pad); } /* Magento core page frame: give the main content area the Harvest gutter so real catalog/CMS pages (which render inside .page-main) line up with our header/footer instead of hugging the viewport edge. */ .page-main { max-width: var(--hrv-container); margin-inline: auto; padding-inline: var(--hrv-page-pad); box-sizing: border-box; } /* Surface panel primitive (bordered card used by many sections). */ .hrv-panel { background: var(--hrv-surface); border: 1px solid var(--hrv-border); border-radius: var(--hrv-radius); } /* Accessible visually-hidden helper (labels for icon-only controls). The native selectors below are core-rendered elements we cannot add a class to (table captions core prints for a11y, native qty/rating labels). They are kept in the DOM for screen readers and hidden visually per the comp, so they share this one recipe instead of re-declaring it per page. Add further native selectors here rather than pasting the block again. NOTE: only UNCONDITIONAL sr-only cases belong here. The `@media`-scoped `thead` hides in _expressreview/_multishipping/_returns are responsive card-stack behaviour (mobile only) and must stay in their page files. */ .hrv-visually-hidden, .paypal-express-review .data.table > caption, .paypal-review .data.table > caption, .sales-guest-view .column.main .table-order-items > caption, body[class*="multishipping-checkout"] .data.table > caption, body[class*="multishipping-checkout"] .data.table .field.qty .label, .account .column.main .data.table > caption, .customer-review .rating-summary .label, .review-customer-view .rating-summary .label, .catalog-category-view .modes .modes-mode span, .hrv-page-returns .hrv-returns__list .table-caption { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- Striped placeholder primitive ---- `.hrv-ph` is the theme's OWN class (it appears only in Harvest's own .phtml, never in core markup), so it needs no body-class scope. It was previously re-declared byte-identically under 11 different page scopes; it lives here once now. Pages that need a variant override it on top (e.g. _cart.css uses --hrv-radius-md), which still wins on specificity since this file loads first. Swapped for a real as media gets wired — a page may also style `.hrv-ph img` locally. */ .hrv-ph { display: grid; place-items: center; overflow: hidden; border-radius: var(--hrv-radius); background: repeating-linear-gradient( 45deg, color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-surface)), color-mix(in oklab, var(--hrv-accent) 10%, var(--hrv-surface)) 12px, color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-surface)) 12px, color-mix(in oklab, var(--hrv-accent) 4%, var(--hrv-surface)) 24px ); } .hrv-ph > span { font-family: var(--hrv-font-mono); font-size: 11px; color: var(--hrv-text-subtle); text-align: center; padding: 0 10px; } /* ---- Responsive gutters ---- */ @media (max-width: 1023px) { :root, [data-hrv-palette] { --hrv-page-pad: 24px; } } @media (max-width: 767px) { /* Magento's stock "Enable Cookies" page lists four browser links (Chrome, Internet Explorer, Safari, Firefox) at 38x17 to 106x17. Not a Harvest artboard page, but it IS a page of this store that a shopper can land on, and a list of links is a list of links. */ /* Magento's stock privacy page carries "List of cookies we collect" INSIDE A PARAGRAPH - the same shape as the legal note in _t33.css, and it gets the same treatment for the same reason: padding grows a real 44px hit area, an equal negative margin leaves the line box alone, so the paragraph is unchanged and the link is genuinely easier to hit. Claiming the WCAG 2.5.8 inline exemption here would have marked the page clean and left the link exactly as small. */ .privacy-policy p a { display: inline-block; padding-block: 14px; margin-block: -14px; } .enable-cookies ul a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* PDP controls that missed the 44px bar, measured on three product routes: the tab switches at 343x40 (four pixels), "Be the first to review this product" at 213x17 and "Add to Wish List" at 106x24. The tab switch is scoped exactly as the rule it joins at :316 - through `.product.data.items > .item.title >` - because `.data` on its own is a SHARED Magento class and a loose match here reaches the account and cart data tables. */ .catalog-product-view .product.data.items > .item.title > .switch { min-height: 44px; display: flex; align-items: center; } .catalog-product-view .reviews-actions > .action, .catalog-product-view .product-addto-links > .action { min-height: 44px; display: inline-flex; align-items: center; } /* TAP TARGETS >= 44px (the mobile task's DoD number), measured at 375 rather than assumed. min-height with a flex centre is used instead of height so a label that wraps still grows the box rather than overflowing a fixed one. inline-flex keeps these inline where the layout expects inline. */ .hrv-promobar-link { min-height: 44px; display: inline-flex; align-items: center; } :root, [data-hrv-palette] { --hrv-page-pad: 16px; } h1, .hrv-h1 { font-size: 26px; } h2, .hrv-h2 { font-size: 22px; } } /* ── Site-wide promo strip (chrome, above the header) ────────────────────────── Lives in the component kit, not in a page file: the artboards show this strip on every page above the header (Home.dc.html offset 894), and it is emitted by Magento_Theme/layout/default.xml, so scoping it to .cms-index-index would have left it unstyled everywhere else. */ /* --hrv-band, NOT --hrv-accent (M3-1). Every artboard draws this strip with `background: var(--band); color: #fff`. We match the BACKGROUND exactly and ship --hrv-band-text (= --hrv-bg, #FBF6EC on Wheat) for the label rather than a raw #fff, because token discipline forbids the hex; both clear AA comfortably (12.31:1 vs 13.27:1). Saying so rather than implying we matched both halves (m4-5) — Wheat #3A2E17 dark-brown, and the same inline style appears on Home and T2, so it is the band across the whole design, not a T3 quirk. The theme was rendering gold-on-dark instead. The galling part: cycle 2 moved --hrv-band OUT of _derived.css and into the per-palette files precisely BECAUSE it is a real artboard value — and then the one band element in the entire theme carried on ignoring it. Verified against the comp directly rather than taken from the review. */ .hrv-promobar { background: var(--hrv-band); color: var(--hrv-band-text); text-align: center; font-size: 13px; font-weight: 700; padding: 9px 16px; } /* Promo strip link — the artboard makes only the campaign phrase clickable. Target is now the real T3 Campaign Landing page (/harvest-days). This previously read "points at the equivalent search until T3 lands"; T3 has landed and its CMS page is seeded, so the stand-in was retired rather than left to rot. A stand-in whose stated expiry condition has been met and is still in place is no longer a declared deferral — it is an undeclared defect. */ .hrv-promobar-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .hrv-promobar-link:hover { text-decoration: none; } /* Trust tiles gained the artboard's icon, so the tile is now a two-column flex row. */ .hrv-home-trust-item { display: flex; gap: 12px; align-items: center; } .hrv-home-trust-icon { font-size: 22px; line-height: 1; flex: 0 0 auto; } /* Label kept for screen readers — the artboard shows only the placeholder. */ .hrv-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Heading item-count span, emitted by Magento_Theme::html/title-count.phtml. HERE, NOT IN A PAGE STYLESHEET, because the template is page-agnostic: T15's wishlist and T16's cart both attach it, and any later page may. It first shipped scoped to `.hrv-page-wishlist` in `_wishlist.css`, which loads only on /wishlist/ — so the cart's span matched no rule at all and inherited the h1 (32px/600, h1 colour) against the comp's 15px muted. Both artboards draw the identical span, so one shared rule is the correct shape. Deliberately NOT scoped to a page class: scoping it again would reproduce the same defect for whichever page attaches the template next. The class is emitted by exactly one template, so it cannot collide. Comp values transcribed, not invented: `font-size: 15px`, and the colour is the text token mixed 50% toward the background — token form rather than hex, so gate B stays at zero and the muting tracks the palette instead of assuming a light ground. */ .page-title .hrv-title-count { margin-left: 8px; font-size: 15px; font-weight: 400; /* USE THE TOKEN, NOT A COPY OF ITS RECIPE. This rule inlined the same 50% mix that --hrv-text-subtle used to be, so raising that token to its AA floor (60%) left this one behind at 3.65:1 - the wishlist count "(3)" was the only AA failure on that page after the token fix. Fixing the token and leaving a duplicate of its arithmetic is the same mistake as deleting a fabricated array while the same claim survives in prose three lines away. */ color: var(--hrv-text-subtle); } /* --------------------------------------------------------------------------- LUMA'S #7D7D7D ON THE PDP, REPLACED WITH THE AA-SAFE MUTED TOKEN. Magento's styles-m.css paints the product-tab labels (.product.data.items > .item.title > .switch, on its own #F0F0F0 chip) and the SKU label and value with #7D7D7D, and the theme had never overridden either. MEASURED on the deployed PDP: 3.61:1 for the tab label and 3.73:1 for the SKU pair, against a 4.5 floor - and IDENTICAL under wheat and tomato, so this is a palette-independent defect rather than anything a colourway introduced. --hrv-text-muted is the theme's AA-corrected grey and clears both grounds in every palette (wheat 4.78 on --hrv-bg and 4.51 on Luma's #F0F0F0; tomato 4.84 and 4.69). Scoped to .catalog-product-view rather than to an hrv-page-tN class so it covers every PDP variant - T10, T11 and T12 each carry their own page class but all share this markup. :visited is listed explicitly because Luma sets it separately; omitting it would leave a visited tab label at the failing grey. --------------------------------------------------------------------------- */ .catalog-product-view .product.data.items > .item.title > .switch, .catalog-product-view .product.data.items > .item.title > .switch:visited, .catalog-product-view .product.attribute.sku .type, .catalog-product-view .product.attribute.sku .value { color: var(--hrv-text-muted); }