/* ========================================================================== T34 — Blog THREE ROUTES, ONE STYLESHEET: /blog (blog_index_index), /blog/post/view/url_key/ (blog_post_view) and /blog/category/view/url_key/ (blog_category_view). Registered on the shared base handle `harvest_t34_blog`, which all three route handles pull in with ``, so nothing here can reach another page. THE ROUTE ALREADY EXISTED AND IS NOT A CMS PAGE — the full argument is in EcommPaaS_Blog/layout/harvest_t34_blog.xml. In one line: `route-census.js` enumerates 27 cms_page rows and none is a blog, yet /blog is HTTP 200, served by EcommPaaS_Blog, a native module route the census structurally cannot see and says so in its own scope block. ------------------------------------------------------------------------------------------ EVERY RULE IS SCOPED TO `.hrv-page-t34`, AND THE LIVE className WAS READ VERBATIM OFF THE POD RATHER THAN DERIVED BY ANALOGY. On /blog before this file existed: pt-layout--wide pt-header--type-1 pt-tabs--horizontal pt-sidebar--left pt-sticky-header pt-sticky-logo pt-mobile-sticky pt-blog-page blog-index-index page-layout-2columns-right i.e. SEVEN ThemeConfig `pt-*` classes, then the MODULE's own `pt-blog-page`, then the route class. Two traps in that one string. Anyone taking the quoted trio `pt-blog-page blog-index-index page-layout-2columns-right` as a selector prefix writes dead CSS (the body-class-by-analogy trap, register #91 one step earlier). And anyone scoping to `blog-index-index` writes rules that are LIVE but reach only one of the three routes. `pt-blog-page` CANNOT BE REMOVED. A theme layout file merges with the module's and `` accumulates — there is no retraction. So a Harvest food store's blog carries Porto's body class permanently, and `porto-body-class-is-still-present` in wheat-T34.json asserts exactly that so the constraint is executable rather than a comment. ------------------------------------------------------------------------------------------ REGISTER #98 — THE CONTAINER. `max-width: 1140px` HERE WOULD RENDER 1092 OF CONTENT. The artboard's wrapper (line 29) is `max-width: 1140px; margin: 0 auto; padding: 44px 24px 0` on a `box-sizing: content-box` document — 1140 of CONTENT, 1188 of border box. `components/_base.css:63` sets `* { box-sizing: border-box }` theme-wide, so transcribing the declaration literally makes 1140 the OUTER width and leaves 1092 of content — 48px (2x24 padding) short — while `getBoundingClientRect().width` still reads a reassuring 1140. Invisible in markup, invisible in review, invisible to any check that measures the outer box. MEASURED ON THE LIVE POD AT ALL SIX GATE WIDTHS, both transcriptions injected into the real `.column.main` BEFORE this file existed (outer / content): viewport .column.main literal 1140 (WRONG) border-box 1188 content-box 1140 375 343 343 / 295 343 / 295 343 / 295 768 720 720 / 672 720 / 672 720 / 672 1024 960 960 / 912 960 / 912 960 / 912 1251 1187 1140 / 1092 1187 / 1139 1187 / 1139 1252 1188 1140 / 1092 1188 / 1140 1188 / 1140 1440 1376 1140 / 1092 1188 / 1140 1188 / 1140 THE TWO REMEDIES ARE INDISTINGUISHABLE IN OUTPUT — every row of the last two columns agrees. `max-width: 1188px` is the one shipped, and the reason is legibility rather than geometry: `box-sizing: content-box` would opt this one element out of the theme-wide reset, so the next person to touch its padding would silently move its outer width, and a reader seeing `max-width: 1140px` would believe the box is 1140 wide when it is 1188 — which is the exact confusion #98 is about, re-created by the fix for it. One number with its arithmetic stated (1140 content + 2x24 padding = 1188) cannot leak. 1139 AT 1251 IS NOT A ROUNDING ERROR AND NOT A DEFECT. `.column.main` is 1187 there, so a 1188 box is clamped to 1187 and yields 1139. Both remedies agree on it. THE CAP FIRST BINDS AT EXACTLY 1252, which is the only reason 1251 and 1252 are both gate widths — measured at the edge. Note what the other widths cannot do: at 375, 768 and 1024 the WRONG transcription and the right one produce the SAME number, so a gate stopping at 375/768/1024 would look thorough and be blind to #98 at three of its four sub-1252 widths. THE POST ARTICLE IS A DELIBERATE NON-INSTANCE OF #98, and that is worth stating because blanket-applying the correction is the obvious way to get it wrong. Artboard line 40 declares `max-width: 720px; margin: 26px auto 0` with NO horizontal padding, so its content box and its border box are the same 720 under border-box sizing. Adding 48px "for consistency" would have made the column 768 and the reasoning would have looked identical to the wrap's. Measured at every width >= 768: 720 / 720. ------------------------------------------------------------------------------------------ NINE DECLARED DELTAS FROM THE ARTBOARD. Stated here rather than left for a reviewer to find by diffing the comp. (a) THE CONTENT IS NOT THE COMP'S, AND IT IS THE LARGEST DELTA ON THE PAGE. The comp is a blog, so its placeholder copy is written to read as real journalism about real goods: three dated posts with titles, an editorial body, a pull quote, a live pricing claim, cook-time and serving counts, and a shoppable six-SKU bundle at a stated total. None of it ships. Full list with artboard line numbers in the two templates' docblocks and in `wheat-T34.json -> content_refusals`; three of the refusals are asserted as absences in the gate. Titles, dates and categories are read from `ecommpaas_blog_post`. (b) THE COMP'S SIX CONTROLS ARE ALL DEAD AND SHIP LIVE. Four filter pills (line 31), the featured card and both post cards (lines 32, 37) are `href="#"` or `href="#post"`; the three share pills (line 47) are `href="#"`. Transcribing them faithfully would have added six entries to a family this repo keeps re-shipping — claue-v2's href="#" promo tiles (still open) and Voltage's Quick View (dead through 434 structural reviews). The pills are wired to real `blog/category/view` routes, the cards to `blog/post/view`, and share to a real tweet intent plus a real mailto. Six `everyHrefIsReal` rows assert it, and the verb treats a selector matching NOTHING as a failure rather than a vacuous truth. (c) INSTAGRAM IS DROPPED FROM THE SHARE ROW rather than shipped dead. Instagram has no share-URL scheme, so that pill could only ever have been inert. (d) NO IMAGES ARE EMITTED FOR THEME-RELATIVE featured_image VALUES. All six posts on this store carry `blog/postN.jpg`, the module resolves those with `getViewFileUrl('images/' . $featuredImage)`, and the files exist only under `porto/` and `porto-v2/` — harvest has no `web/images/blog/` at all. Measured: every one is HTTP 404, so /blog serves EIGHT broken images today at HTTP 200 (five cards plus three sidebar thumbnails). The comp's own striped placeholder is rendered instead, which reads as a placeholder to a human; an absolute http(s) or /-rooted value still gets a real , so a merchant with real images is unaffected. The DATA is not repointed — that is a content decision for the user, filed in the manifest. (e) PAGINATION IS ADDED. The comp has none, because a static board shows three posts and stops. Following it would strand every post past the fifth (POSTS_PER_PAGE is 5 and there are 6) with no route to it from anywhere on the site. (f) THE SIDEBAR IS REMOVED. The module's handles declare `2columns-right` with a Sidebar block; the comp has no rail at any width. This also removes three of the eight broken images. (g) TWO BREAKPOINTS, NOT ONE, AND THEY DIFFER ON PURPOSE. The comp is a desktop board with no tablet or mobile state, so both are declared deltas. The CARD GRID goes 2-up from 768: two 324px cards read fine in a 672px content box. The LEAD CARD stays stacked until 1024, because its `1.3fr 1fr` split leaves the text column ~374px inside 672 — about forty characters per line beside a large image. Same reasoning, different answer, which is why they are separate media queries rather than one shared one. (h) THE POST BODY IS FULL-CONTRAST TEXT, NOT THE COMP'S 75% MIX. Artboard line 44 softens long-form body copy to `color-mix(in oklab, var(--tx) 75%, var(--bg))`. Body copy is the one thing on this page a reader spends minutes inside, and it ships as `var(--hrv-text)` so it carries maximum contrast headroom in all five palettes including Noir-like dark ones. The softened mixes are kept for the META line and the EXCERPT, which are glances. (i) THE PILL BORDER IS `--hrv-border-strong`, NOT THE COMP'S 22% MIX. The comp uses `color-mix(in oklab, var(--tx) 22%, var(--bg))`; the theme's token ladder offers 10% (`--hrv-border`) and 35% (`--hrv-border-strong`) and nothing between. 35% is chosen because a filter pill is a control and its edge is its only affordance when inactive. Using a token rather than a fourth hand-mixed value is what keeps the palette switcher working — see below. ------------------------------------------------------------------------------------------ NO HARDCODED HEX ANYWHERE IN THIS FILE. Every colour is `var(--hrv-*)` or a `color-mix()` of one, so all five palettes (Wheat, Basil, Tomato, Plum, Honey) switch without touching it. That is fidelity gate B, and it is also why AA contrast is swept by `palette-sweep.js` across all five rather than asserted per-palette here. ONE MEASURED COLOUR FACT WORTH CARRYING, because it is this page's contrast-instrument calibration: `--hrv-accent-2` computes to `rgb(76, 122, 63)` while `--hrv-text-muted` computes to `oklab(0.496167 0.00272757 0.0179238)`. The palette files hold plain hex; only the `color-mix(in oklab, ...)` DERIVED tokens compute to oklab(). So one theme serves BOTH notations, and any contrast checker reading colours off this page with an rgb() regex silently misreads half the palette — which is how two agents on this project reported ~21:1 for everything. The first draft of the gate's `lead-meta-uses-accent-2` row typed an oklab triple for accent-2 by assuming otherwise, and was wrong. ========================================================================== */ /* ── Shared wrap (index + category) ───────────────────────────────────────── */ .hrv-page-t34 .hrv-t34 { /* 1140 of content + 2x24 padding = 1188. See the #98 block above; do not "simplify" this to 1140 and do not add box-sizing: content-box. */ max-width: 1188px; margin: 0 auto; padding: 44px 24px 0; } .hrv-page-t34 .hrv-t34__title { font-family: var(--hrv-font-display); font-weight: 700; font-size: 34px; line-height: 1.12; margin: 0; text-wrap: balance; } /* ── Filter pills ─────────────────────────────────────────────────────────── */ .hrv-page-t34 .hrv-t34-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .hrv-page-t34 .hrv-t34-filters__pill { /* * REGISTER #106 — 44px, DEFENDED, NOT INHERITED FROM TEXT FLOW. The comp's pill is * `padding: 8px 16px` on 13px text, which lays out at roughly 35px. T32 shipped six accordion * summaries at 24px and the three that PASSED did so by accident of English string length — * their questions happened to wrap to two lines at 375. A pill label is one or two words in * every locale, so no copy length could ever rescue it. * * min-height + inline-flex + align-items, NOT extra padding: padding on the would work, but * the T32 case is precisely a control whose padding lived on the WRONG element (the
, * outside the ), so the 60px band it implied was unpressable. Pinning the height of * the pressable element itself cannot be defeated that way. `pill-tap-target-375` measures * EVERY pill (`all: true`), which is the distinction that let three of T32's six pass. */ display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--hrv-text-subtle); border-radius: 999px; font-size: 13px; color: var(--hrv-text); background: transparent; text-decoration: none; } .hrv-page-t34 .hrv-t34-filters__pill:hover { border-color: var(--hrv-text); color: var(--hrv-text); } .hrv-page-t34 .hrv-t34-filters__pill--active { background: var(--hrv-text); border-color: var(--hrv-text); color: var(--hrv-bg); } /* * NO `outline: none` ANYWHERE IN THIS FILE, and that absence is asserted. * `components/_base.css:95` gives every `a:focus-visible` a `2px solid var(--hrv-focus-ring)` * ring, and this page is almost entirely links — pills, a lead card, post cards, pagination, * share targets, a back link — so suppressing it "for looks" would disable keyboard navigation * across the whole feature. `pill-focus-ring-paints` + `pill-focus-ring-width` assert the ring * survives. * * A MEASURED SCOPE CORRECTION TO REGISTER #105, because applying it blindly here would have been * wasted work. #105 says a focusable must reach (0,2,0) or its ring will not paint, since Luma's * `._keyfocus *:focus` at (0,2,0) beats `_base.css:95` at (0,1,1). Measured live, the actual rule * is `._keyfocus :focus, input:not([disabled]):focus, ...` and it declares BOX-SHADOW ONLY * (box-shadow: rgb(104,168,224) 0 0 3px 1px). It therefore does not compete with an OUTLINE: an * injected focused with _keyfocus forced computes `outline: 2px solid` AND that * box-shadow, together. The mechanism #105 describes is real and anything declaring a * BOX-SHADOW ring on this theme still needs (0,2,0); the blanket form is too broad for an * outline-based ring. * * THE SHARPER HALF OF THE SAME MEASUREMENT, which is a trap for any focus assertion on this repo: * `outline-width` computes to a NON-ZERO value while `outline-style` is none. At rest that same * reports width 3px / style none / box-shadow none. So a row asserting * `focusStyle.outlineWidth atLeast 2` PASSES ON AN ELEMENT WITH NO RING AT ALL. Style is the * property that distinguishes; the gate asserts outlineStyle and reads width only alongside it. */ /* ── Meta kicker (shared by lead, cards and the post header) ──────────────── */ .hrv-page-t34 .hrv-t34-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; /* * AA FIX, AND THE FIRST VERSION OF THIS RULE SHIPPED A REAL FAILURE. It used the artboard's * var(--ac2) directly as var(--hrv-accent-2), justified by a contrast figure measured on WHEAT * ALONE (5.04 on surface). Swept across all five palettes it measures: * * palette accent-2 on surface / on bg accent-2-strong on surface / on bg * wheat 5.04 / 4.68 10.07 / 9.35 * basil 3.04 / 2.78 <- FAILS 4.5 6.01 / 5.50 * tomato 5.04 / 4.57 10.07 / 9.13 * plum 3.04 / 2.73 <- FAILS 4.5 6.01 / 5.39 * honey 5.87 / 5.41 11.11 / 10.24 * * This kicker is 12px uppercase, so it is NOT large text and the threshold is 4.5, not 3.0. * On basil and plum --hrv-accent-2 resolves to the gold that wheat uses as its PRIMARY accent, * which is a light hue on a light background — the palette swap is precisely what breaks it, and * measuring one palette is precisely what hides it. */ color: var(--hrv-accent-2-strong); } /* The comp's separator is a middot between category and date. Generated rather than written into the template so it is not a translatable string, and generated on the DATE rather than the category so it never appears when a post has no category. Adjacent-sibling, so it requires the two to be element-adjacent — which they are; intervening whitespace text nodes do not break `+`. */ .hrv-page-t34 .hrv-t34-meta__cat + .hrv-t34-meta__date::before { content: "· "; } /* ── Featured / card / hero placeholder ───────────────────────────────────── */ .hrv-page-t34 .hrv-t34-ph { /* * The comp's own striped fill (artboard line 33), which reads as a placeholder to a human * rather than as a failed photograph. See delta (d): it stands in for eight images that are * HTTP 404 on this store today. * * `display: block` and a pinned aspect-ratio are both load-bearing: a with no content * and no ratio collapses to zero height, and a zero-height placeholder is INVISIBLE rather * than obviously broken — the failure mode that looks like a clean page. */ display: block; width: 100%; border-radius: 14px; overflow: hidden; 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 ); } /* Three different ratios on one board — 16/10 featured, 16/9 cards, 21/10 post hero (artboard lines 33, 37, 43). Pinned separately because a "looks right" review normalises them to one. */ .hrv-page-t34 .hrv-t34-lead__ph { aspect-ratio: 16 / 10; } .hrv-page-t34 .hrv-t34-card__ph { aspect-ratio: 16 / 9; } .hrv-page-t34 .hrv-t34-post__ph { aspect-ratio: 21 / 10; } /* When a real image IS present it occupies the same box, so the ratio still governs and the stripes never show through a transparent PNG. */ .hrv-page-t34 .hrv-t34-lead__img, .hrv-page-t34 .hrv-t34-card__img, .hrv-page-t34 .hrv-t34-post__img { object-fit: cover; height: 100%; background: var(--hrv-surface); } /* ── Featured (lead) card ─────────────────────────────────────────────────── */ .hrv-page-t34 .hrv-t34-lead { /* Stacked by default; 1.3fr 1fr from 1024 — see delta (g). */ display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 26px; background: var(--hrv-surface); border: 1px solid var(--hrv-border); border-radius: 18px; overflow: hidden; color: var(--hrv-text); text-decoration: none; } .hrv-page-t34 .hrv-t34-lead__media { padding: 18px; } .hrv-page-t34 .hrv-t34-lead__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 0 18px 18px; } .hrv-page-t34 .hrv-t34-lead__title { font-family: var(--hrv-font-display); font-weight: 700; font-size: 26px; line-height: 1.12; margin: 0; text-wrap: balance; } .hrv-page-t34 .hrv-t34-lead__excerpt { margin: 0; font-size: 14px; line-height: 1.7; color: var(--hrv-text-muted); } .hrv-page-t34 .hrv-t34-lead__more { font-size: 14px; font-weight: 700; /* * --hrv-accent-STRONG, not --hrv-accent-hover, and the difference is measured rather than * inherited. The first version used --hrv-accent-hover and cited T33's "6.10-10.77" for it. THAT * NUMBER WAS BORROWED FROM A DIFFERENT PAIRING: swept here, --hrv-accent-hover measures 4.54 on * surface and 4.21 on --hrv-bg under wheat, so the back link and the empty-state link (both on * bg) FAILED 4.5. Quoting a contrast figure from another page's context is the same class of * error as quoting a body class by analogy. --hrv-accent-strong is 5.58 at worst across all five * palettes and both backgrounds. */ color: var(--hrv-accent-strong); } /* The arrow is generated, not written into the template: it is not a translatable string, and a de_DE or pl_PL CSV row containing an arrow glyph is a row someone eventually "fixes". */ .hrv-page-t34 .hrv-t34-lead__more::after { content: " \2192"; } /* ── Card grid ────────────────────────────────────────────────────────────── */ .hrv-page-t34 .hrv-t34-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 20px; } .hrv-page-t34 .hrv-t34-card { display: flex; flex-direction: column; background: var(--hrv-surface); border: 1px solid var(--hrv-border); border-radius: 18px; overflow: hidden; color: var(--hrv-text); text-decoration: none; } .hrv-page-t34 .hrv-t34-card__media { padding: 14px 14px 0; } .hrv-page-t34 .hrv-t34-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px; } .hrv-page-t34 .hrv-t34-card__title { font-family: var(--hrv-font-display); font-weight: 700; /* 19px against _base.css:89's h3 at 20px. A 1px delta survives every visual review, which is the only argument for pinning it. */ font-size: 19px; line-height: 1.12; margin: 0; text-wrap: balance; } /* --hrv-accent-hover is correct HERE and nowhere else on this page: card and lead titles sit on --hrv-surface, where it measures 4.54 / 7.14 / 7.08 / 10.15 / 6.29 across wheat, basil, tomato, plum and honey — all clear of 4.5. It is the pairings against --hrv-bg that failed, which is why the resting links use --hrv-accent-strong instead. */ .hrv-page-t34 .hrv-t34-lead:hover .hrv-t34-lead__title, .hrv-page-t34 .hrv-t34-card:hover .hrv-t34-card__title { color: var(--hrv-accent-hover); } /* ── Pagination (delta (e)) ───────────────────────────────────────────────── */ .hrv-page-t34 .hrv-t34-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 40px; } .hrv-page-t34 .hrv-t34-pager__link { /* * 44px on BOTH axes. Register #106's worst case: the label is a single digit, so unlike T32's * accordion there is no string length that could ever rescue the height by wrapping — the * accident that saved three of those six rows is structurally unavailable here. min-width * matters as much as min-height for a one-character target. */ display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--hrv-text-subtle); border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--hrv-text); text-decoration: none; } .hrv-page-t34 .hrv-t34-pager__link--current { background: var(--hrv-text); border-color: var(--hrv-text); color: var(--hrv-bg); } /* ── Empty / not-found state ──────────────────────────────────────────────── */ .hrv-page-t34 .hrv-t34-empty { margin: 40px auto 0; max-width: 520px; padding: 32px 24px; text-align: center; background: var(--hrv-surface); border: 1px solid var(--hrv-border); border-radius: 18px; } .hrv-page-t34 .hrv-t34-empty__text { margin: 0 0 12px; font-size: 15px; color: var(--hrv-text); } .hrv-page-t34 .hrv-t34-empty__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; /* On --hrv-bg, where --hrv-accent-hover measures 4.21 under wheat. See .hrv-t34-lead__more. */ color: var(--hrv-accent-strong); } /* ── Post view ────────────────────────────────────────────────────────────── */ .hrv-page-t34--post .hrv-t34-post { /* * 720 with NO horizontal padding — see the closing paragraph of the #98 block. Vertical padding * only, so content.width and rect.width are both 720. At 375 the theme's own --hrv-page-pad * (16px under 768) already provides the gutter via .column.main, so the article correctly fills * the 343px column rather than needing an inset of its own. */ max-width: 720px; margin: 26px auto 0; padding: 44px 0 0; } .hrv-page-t34--post .hrv-t34-post__meta { justify-content: center; } .hrv-page-t34--post .hrv-t34-post__title { font-family: var(--hrv-font-display); font-weight: 700; font-size: 36px; line-height: 1.12; margin: 12px 0 0; text-align: center; text-wrap: balance; } .hrv-page-t34--post .hrv-t34-post__hero { margin-top: 26px; } .hrv-page-t34--post .hrv-t34-post__body { margin-top: 26px; font-size: 15.5px; /* Delta (h): full-contrast text for the one region a reader spends minutes inside. */ color: var(--hrv-text); line-height: 1.9; } .hrv-page-t34--post .hrv-t34-post__body > :first-child { margin-top: 0; } /* * THE PULL-QUOTE RULE SHIPS; THE COMP'S QUOTE DOES NOT. "Cook the glut. It is the season * shouting." (artboard line 45) is invented editorial and is refused with the rest. But a post * body is stored HTML, so a merchant's own
has to land somewhere — hence the rule * without the content. `post-blockquote-is-styled` asserts it via `ruleMatches` rather than a * computed style, because no post on this store contains a blockquote and there is therefore no * element to measure: asserting the RULE exists is the honest form of the claim. */ .hrv-page-t34--post .hrv-t34-post__body blockquote { margin: 26px 0 0; padding: 6px 0 6px 22px; border-left: 3px solid var(--hrv-accent); font-family: var(--hrv-font-display); font-size: 20px; line-height: 1.5; } .hrv-page-t34--post .hrv-t34-post__body img { border-radius: 14px; margin: 26px 0 0; } .hrv-page-t34--post .hrv-t34-post__share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; } .hrv-page-t34--post .hrv-t34-post__share-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hrv-text-muted); } .hrv-page-t34--post .hrv-t34-post__share-link { /* 44px again — two share targets, both real (delta (b)/(c)). */ display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--hrv-text-subtle); border-radius: 999px; font-size: 12.5px; color: var(--hrv-text); text-decoration: none; } .hrv-page-t34--post .hrv-t34-post__back-wrap { margin: 30px 0 0; } .hrv-page-t34--post .hrv-t34-post__back { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 700; /* On --hrv-bg. This is the link the 4.21 failure was measured on. */ color: var(--hrv-accent-strong); } .hrv-page-t34--post .hrv-t34-post__back::before { content: "\2190 "; } /* ── Breakpoints (delta (g)) ──────────────────────────────────────────────── */ @media (min-width: 768px) { /* The card grid goes 2-up here; the lead card waits for 1024. */ .hrv-page-t34 .hrv-t34-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .hrv-page-t34 .hrv-t34-lead { grid-template-columns: 1.3fr 1fr; } .hrv-page-t34 .hrv-t34-lead__body { padding: 34px 34px 34px 6px; } } @media (max-width: 767px) { /* * MOBILE TYPE SCALE, AND THIS MEDIA QUERY IS LOAD-BEARING RATHER THAN COSMETIC. * `.hrv-page-t34 .hrv-t34__title` is (0,2,0) and `_base.css:205`'s mobile `h1, .hrv-h1 { * font-size: 26px }` is (0,0,1) EVEN INSIDE ITS OWN MEDIA QUERY — a media query contributes no * specificity. So without these two rules the 34px and 36px declarations above would win at * 375 as well, putting a 34px three-word title into a 295px content box. * * This is T32's `h1-font-size` defect avoided rather than repeated: that row asserted one size * at `widths: "all"` while the theme shipped a different size under 768, and gate-lint records * it as one of the three defects it cannot catch because the answer lives in the stylesheet. * `h1-font-size-desktop` and `h1-font-size-mobile` are two rows for that reason. * * 26px is the theme's own mobile scale, adopted rather than a third invented number. The comp * has no mobile state, so this is a declared delta. */ .hrv-page-t34 .hrv-t34__title { font-size: 26px; } .hrv-page-t34--post .hrv-t34-post__title { font-size: 26px; } .hrv-page-t34 .hrv-t34 { padding-top: 28px; } }