/* Theme Name: Still Worth Starting (Kadence child) Theme URI: https://stillworthstarting.com/ Description: Child theme of Kadence carrying the Still Worth Starting design layer. GENERATED FILE -- do not edit. The design lives in sites/site3-outdoor-power/assets/kadence-additional.css; edit that and re-run sites/site3-outdoor-power/themes/build-child-theme.py. Author: Still Worth Starting Template: kadence Version: 1.1.50383 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sws-kadence-child */ /* Bundled type (builder-added; the files are in this theme's fonts/). */ @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap;src:url("fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");} /* ------------------------------------------------------------------ Everything below this line is sites/site3-outdoor-power/assets/kadence-additional.css copied verbatim by build-child-theme.py. Do not edit it here. ------------------------------------------------------------------ */ /* ============================================================ Still Worth Starting — design layer (Site 3. This file BEGAN byte-identical to Site 1's copy. It is not any more and the claim that it was is why nobody looked: Site 1's grew to 398 lines while this one stayed at 109, so every fix made there after 2026-08-18 - including the subpage left-edge fix below - was silently absent here. Diff the two files; do not trust this header to tell you they agree.) Grounded in: HomeGuide (cost content, 2 images, 44px H1, card grids) and NerdWallet (52px H1, short value prop, trust strip). A data site earns hierarchy from type + cards, not photography. ============================================================ */ :root{ --sw-ink:#122620; --sw-muted:#56645E; /* 5.0:1 on sand */ --sw-accent:#0A6B73; /* links: 5.8:1 on cream */ --sw-accent-dark:#084F55; --sw-tint:#F2E6D2; /* sand */ --sw-line:#E4DAC8; /* Palette v2, 2026-09-17 -- see PART 3 at the end of this file. */ --sw-forest:#0F3B31; --sw-forest-line:#2E5A4F; --sw-on-forest:#C4D6CE; --sw-mint-text:#9BE0BD; --sw-copper:#B8500F; /* white text 5.0:1 */ --sw-copper-dark:#8A3B0B; --sw-cream:#FAF6EE; --sw-zebra:#FFFDF8; --sw-mint:#DFF1E6; --sw-section:#0F3B31; /* overridden per cluster by body.sw-cluster-* */ --sw-section-ink:#0F3B31; --sw-section-wash:#F2E6D2; --sw-serif:"Source Serif 4","Source Serif Pro",Georgia,"Times New Roman",serif; --sw-sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --sw-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* --- Playbook §4: elements that do not reflow (item 12g) --- */ pre { overflow-x: auto; -webkit-overflow-scrolling: touch; } .entry-content table { display: block; overflow-x: auto; } /* --- ONE LEFT EDGE ON SUBPAGES (rewritten 2026-09-06, run 203) --- This section used to widen tables OUT of Kadence's 640px container. That produced THREE left edges on every non-home page, measured on a Kadence render of this site's own markup at 1280px: tables 93, prose and headings 369, H1 442 - a 349px spread. A hub is mostly tables, so its headings read as floating in the middle of the page beside full-width data. It is geometry, not styling. Why it survived 202 runs: every checker in .claude/skills/ reads markdown, and design is a property of a rendered document. Nothing had ever rendered a page of this site. Found by pointing run 218's renderpage.py at Site 3 for the first time - the same tool-inherits- its-author's-scope failure livedrift.py had here on 2026-08-19. The fix inverts the approach and follows what this file's own homepage section already does: widen the CONTAINER, hold prose with max-width, let tables fill it. TWO THINGS DIFFER FROM SITE 1'S COPY OF THIS FIX, both measured on this site's DOM rather than assumed: 1. Site 1's subpage title band is full-bleed, so it re-creates the content inset with its own padding. This site has no such band - the H1 sits inside .hero-container.site-container - so the hero container is widened alongside .content-container instead. 2. Kadence centres the H1 here via `display:flex; align-items:center` on .entry-header, which is why it sat at 442 rather than at its container edge. Padding alone does not move it; align-items does. The +32px is Kadence's own .entry-content-wrap padding at >=768 (24px below it), which .hero-container does not carry - the same omission that put this site's homepage H1 32px out. Measured, not chosen. Verified on a local Kadence render of index, hub-a, A1, B1 and about at 1440 / 1280 / 768 / 375: left-edge spread 0 at all four widths on all five archetypes, zero horizontal page overflow, table overflow-x still auto at 375. */ body:not(.home) .content-container.site-container, body:not(.home) .hero-container.site-container{ max-width:min(1080px,94vw)!important; } body:not(.home) .entry-content{ max-width:100%!important; } /* Prose keeps the article measure; it just starts at the container edge now instead of being centred in a 640px shell. */ body:not(.home) .entry-content > p, body:not(.home) .entry-content > ul, body:not(.home) .entry-content > ol, body:not(.home) .entry-content > blockquote{ max-width:34rem; margin-left:0!important; } body:not(.home) .entry-content > h2{ max-width:32ch; margin-left:0!important; } body:not(.home) .entry-content > h3{ max-width:40ch; margin-left:0!important; } /* Data and the calculator fill the widened container rather than breaking out of a narrow one. */ body:not(.home) .entry-content > figure.wp-block-table, body:not(.home) .entry-content > iframe{ max-width:100%!important; width:100%!important; margin-left:0!important; } /* H1 onto the content edge: un-centre Kadence's flex header, then add the .entry-content-wrap inset .hero-container does not carry. */ body:not(.home) .entry-header.page-title{ align-items:flex-start!important; text-align:left!important; padding-left:var(--global-content-boxed-padding)!important; padding-right:var(--global-content-boxed-padding)!important; } body:not(.home) .entry-header.page-title .entry-title{ margin-left:0!important; margin-right:auto!important; /* Title scale, ported 2026-09-11 (design audit) from Site 1's `.entry-header.page-title .entry-title`. Measured here before it: the interior H1 was Kadence's flat 32px at EVERY width, with line-height 1.50, and the body H2 is clamp(1.5rem..2rem) - so at 1280 the page title and a section heading were both 32px/700 and the page had no top of its hierarchy. Site 1 measured 36.8px / 27.2px, lh 1.18. */ font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem)!important; line-height:1.18; letter-spacing:-.018em; max-width:28ch; } @media (max-width:767px){ /* 8px, not 24. Measured on this DOM at 375 and 600: the inset from .content-container's box to .entry-content is 56px at >=768 and 32px below it, and .hero-container already contributes 24 of that at both. A first cut used 24 here by symmetry with the >=768 case and put the H1 16px right of the prose at 375 - the same class of omitted-inset error as the two defects this section fixes. */ body:not(.home) .entry-header.page-title{ padding-left:calc(var(--global-content-boxed-padding) - 1rem)!important; padding-right:calc(var(--global-content-boxed-padding) - 1rem)!important; } } /* --- Typography scale (SITEWIDE - reaches every page, not just the homepage: all 30 posts and 12 pages. Verify an article page after touching this.) --- */ .entry-content h2{ font-size:clamp(1.5rem,1.15rem + 1.3vw,2rem); line-height:1.25; letter-spacing:-.01em; margin-top:2.4em; } .entry-content h3{ font-size:clamp(1.15rem,1.05rem + .5vw,1.35rem); line-height:1.3; margin-top:1.8em; } .entry-content a{ color:var(--sw-accent); text-underline-offset:3px; text-decoration-thickness:1px; } .entry-content a:hover{ color:var(--sw-accent-dark); } /* ============================================================ HOMEPAGE ============================================================ */ /* Hero — full-bleed tinted band, big left-aligned H1 */ body.home .entry-header.page-title{ background:var(--sw-tint); border-bottom:1px solid var(--sw-line); margin:0 calc(50% - 50vw) 2.5rem; padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(2.5rem,6vw,4.5rem); text-align:left!important; } /* The homepage band is wider because its container is 1120, not 640. Corrected 2026-09-06 (run 203): the horizontal padding was `max(1.5rem, calc(50vw - 536px))`, i.e. the container edge plus its own 24px padding - but it left out .entry-content-wrap's 32px, so the homepage H1 sat exactly 32px LEFT of every heading, table and card beneath it (measured: H1 97, everything else 129, at 1280). Below 1120px the container is full-viewport-width, so the offset is a constant there rather than a function of the viewport; the `max(0px, ...)` is what makes one expression cover both regimes. */ /* The band is full-bleed via `margin:0 calc(50% - 50vw)`, and that expression mixes units: 50vw counts the scrollbar, 50% does not, so the band starts half a scrollbar (7.5px here) left of the page box. A `max(0px,(100vw - 1120px)/2) + 56px` padding carries a matching vw term and cancels that error ABOVE 1120px - but the term goes to zero below it, leaving the H1 7px left of the content at 768. Measured on both this site and Site 1's copy, which shares the defect. `calc(50vw - 50% + 32px)` cancels it in both regimes instead, because the same mixed pair appears on both sides. It only works if the H1's own container matches the content's, so the hero container is widened to the homepage's 1120 first - Kadence leaves it at 640, which is why no single constant could have worked before. */ /* Width unified with every other page on 2026-09-17 (was 1120px): the homepage sat 20px left of the subpages, so the page frame jumped on every click. */ body.home .hero-container.site-container{ max-width:min(1080px,94vw)!important; } body.home .entry-header.page-title{ padding-left:calc(50vw - 50% + var(--global-content-boxed-padding)); padding-right:calc(50vw - 50% + var(--global-content-boxed-padding)); } @media (max-width:767px){ /* Same 56 -> 32 inset step the subpage rule documents; the hero container already carries 24 of it, so the addend drops 32 -> 8. */ body.home .entry-header.page-title{ padding-left:calc(50vw - 50% + var(--global-content-boxed-padding) - 1rem); padding-right:calc(50vw - 50% + var(--global-content-boxed-padding) - 1rem); } } body.home .entry-header.page-title .entry-title{ font-size:clamp(2rem,1.4rem + 2.6vw,2.9rem)!important; /* ~44-46px desktop */ line-height:1.12; letter-spacing:-.022em; max-width:24ch; margin-left:0!important; margin-right:auto!important; /* Kadence centers it with auto margins */ } /* Homepage is a router, not an article: widen Kadence's own container (.content-container carries content_narrow_width; .entry-content does not) */ /* Width unified with every other page on 2026-09-17 (was 1120px): the homepage sat 20px left of the subpages, so the page frame jumped on every click. */ body.home .content-container.site-container{ max-width:min(1080px,94vw)!important; } body.home .entry-content{ max-width:100%!important; } /* Prose stays at the article measure (33rem = 528px). Longest full rendered line measured 71 on this homepage and 74 on /editorial-policy/ (2026-09-05); ragged lines run shorter. Cards and the calculator use the full 1120 shell. */ body.home .entry-content > p, body.home .entry-content > ul, body.home .entry-content > ol{ max-width:33rem; } body.home .entry-content > h2{ max-width:30ch; } /* 22ch wrapped a 36-char heading onto 2 lines */ /* Lede — the first paragraph reads bigger */ body.home .entry-content > p:first-of-type{ font-size:1.16em; line-height:1.6; color:var(--sw-ink); max-width:36rem; /* 30rem measured only 56 chars */ } /* Router table -> card grid */ body.home .entry-content > figure.wp-block-table{ margin-left:0!important; width:100%!important; max-width:100%!important; } body.home .entry-content table{ border:0; display:grid!important; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); /* min(): the column is 245px at 375 since the homepage width was unified */ gap:.9rem; overflow:visible!important; } body.home .entry-content thead{ display:none; } body.home .entry-content tbody{ display:contents; } body.home .entry-content tbody tr{ display:flex; flex-direction:column; gap:.5rem; border:1px solid var(--sw-line); border-radius:12px; background:#fff; padding:1.15rem 1.2rem; transition:box-shadow .16s ease, border-color .16s ease, transform .16s ease; } body.home .entry-content tbody tr:hover{ border-color:var(--sw-accent); box-shadow:0 6px 20px rgba(15,118,110,.10); transform:translateY(-2px); } body.home .entry-content tbody td{ border:0!important; padding:0!important; } body.home .entry-content tbody td:first-child{ font-weight:600; color:var(--sw-ink); line-height:1.4; } body.home .entry-content tbody td:last-child a{ font-weight:600; text-decoration:none; } body.home .entry-content tbody td:last-child a::after{ content:" \2192"; } /* The whole card is the tap target, not only the link inside it. Ported 2026-09-11 (design audit) from Site 1. The card already LOOKS clickable on this site - the `tr:hover` rule above lifts it 2px and turns its border accent - but only the ~20px link text inside it was, so the hover promised a target the card did not have. The overlay stretches the link across the card; ::after already carries the arrow, so the overlay goes on ::before. `:not(:only-child)` keeps it to two-cell router rows: a single-cell card carrying several links would otherwise let its last link capture it. */ body.home .entry-content tbody tr{ position:relative; } body.home .entry-content tbody td:last-child:not(:only-child) a::before{ content:""; position:absolute; inset:0; border-radius:12px; } body.home .entry-content tbody tr:focus-within{ border-color:var(--sw-accent); box-shadow:0 0 0 3px rgba(15,118,110,.28); } /* The five sections — accent-rule entries instead of a flat list */ body.home .entry-content h3{ border-left:3px solid var(--sw-accent); padding-left:.75rem; margin-bottom:.35rem; margin-top:2rem; } body.home .entry-content h3 + p{ padding-left:.75rem; border-left:3px solid var(--sw-line); margin-top:0; color:var(--sw-muted); } /* Calculator CTA as a real button */ body.home .entry-content p > strong > a[href*="calculator"]{ display:inline-block; background:var(--sw-accent); color:#fff!important; text-decoration:none; padding:.8rem 1.4rem; border-radius:9px; font-weight:600; } body.home .entry-content p > strong > a[href*="calculator"]:hover{ background:var(--sw-accent-dark); color:#fff!important; } /* Quieter separators */ .entry-content hr.wp-block-separator{ border:0; border-top:1px solid var(--sw-line); margin:3rem 0; max-width:100%; } /* ============================================================ Tap targets and scroll affordance — added 2026-09-08, ported from Site 1 at WJ's instruction after measuring THIS site's own archetypes at 375 and 1280 rather than assuming the sibling's numbers transfer. That header warning at the top of this file is why: Site 1's layer ran to ~460 lines against this one's 213, and its post-2026-08-18 fixes were silently absent here. ============================================================ */ /* --- WCAG 2.5.8: the homepage cluster cards are the primary route in ------ Measured here at both 375 and 1280: 5 of the 6 standalone links on the homepage were 20px, and all five are the cluster card links. 2.5.8 exempts a link sitting inline in a sentence, so PROSE LINKS ARE UNTOUCHED. The markup is TABLE>TBODY>TR>TD>A, the same card-grid shape as Site 1, so the sibling's selector transfers unchanged — which was checked, not assumed. */ body.home .entry-content tbody td > a:only-child, body.home .entry-content tbody td > strong:first-child > a{ display:flex; align-items:center; min-height:44px; } body.home .entry-content tbody td > strong:first-child{ display:block; } /* The hub and post archetypes measured clean here (min 74px on the hub, no standalone links on A1/B1/about), so no rule is written for them. Site 1 needed an extra `li > strong > a` rule for its hubs; this site's hubs do not carry that shape, and adding it speculatively would be a rule with no measurement behind it. */ /* --- A table that scrolls has to say it scrolls -------------------------- Line 25 above already makes data tables display:block + overflow-x:auto, and they do scroll — verified. What they do not do is admit it: macOS and iOS draw overlay scrollbars that fade out. A styled scrollbar is painted by the browser ONLY when the content actually overflows, so nothing appears on a table that already fits. Scoped away from .home, whose tables are a display:grid card layout with overflow:visible. */ body:not(.home) .entry-content table{ scrollbar-width:thin; scrollbar-color:var(--sw-line) transparent; } body:not(.home) .entry-content table::-webkit-scrollbar{ height:10px; } body:not(.home) .entry-content table::-webkit-scrollbar-track{ background:transparent; } body:not(.home) .entry-content table::-webkit-scrollbar-thumb{ background:var(--sw-line); border-radius:5px; } body:not(.home) .entry-content table::-webkit-scrollbar-thumb:hover{ background:var(--sw-muted); } /* ============================================================ INFORMATION DESIGN — ported from Site 1 on 2026-09-08 at WJ's instruction, closing the divergence this file's own header warns about ("Site 1's grew to 398 lines while this one stayed at 109, so every fix made there after 2026-08-18 ... was silently absent here"). WHY THESE SEVEN SECTIONS AND NOT THE OTHER THREE. The gap was 42 selectors. Ported are the ones that style CONTENT, and each was checked to occur in this corpus before its rule was brought over: 94 tables, 183 inline code spans, 87 italic-only provenance lines, 350 list items, 44 ordered-list items, 22 blockquotes. The data tables in particular were inheriting Kadence's defaults here -- no zebra, no header weight, no row hover -- on a site whose whole value is its tables. DELIBERATELY NOT PORTED, because they are written against Site 1's DOM and this site's differs: - the .entry-header.page-title header band (Site 1 has a full-bleed title band; this site does not, which is the divergence the header at the top of this file records) - the .swf-rrc-slot inline-calculator slot (Site 1 renders the widget from a plugin shortcode; this site embeds an iframe) - the "one left edge on subpages" rewrite (measured here on all five archetypes at 375 and 1280: spread is already 0px, so importing another site's geometry fix could only break it) - the li > strong > a hub rule (this site's hubs measured 74px) Section 8 was checked for blast radius rather than assumed: exactly ONE link in the whole corpus matches p > strong > a[href^="/"] -- the calculator CTA -- which this file already styles as a button on the homepage. (True of the MARKDOWN, as a whole-paragraph shape. The CSS selector could not see text and matched 14 on the rendered site, 13 of them hub titles, until 2026-09-11 - see section 8.) Porting it makes that same link look the same on the pages where it also appears. ============================================================ */ /* --- 2. Section rhythm --- No wrappers exist to alternate background bands, so rhythm has to come from the heading itself. A hairline above each H2 turns a scroll of uniform paragraphs into visible sections. */ .entry-content h2{ border-top:1px solid var(--sw-line); padding-top:1.5rem; } .entry-content h2:first-child{ border-top:0; padding-top:0; } /* An H2 immediately after a separator would draw two rules. */ .entry-content hr.wp-block-separator + h2{ border-top:0; padding-top:0; } /* --- 3. Data tables — the reason this site exists --- 30 posts are built around sourced tables (B1 alone has 45 rows) and until now they inherited Kadence's default: hairlines, no zebra, no header weight. These rules are deliberately NOT applied on the homepage, whose one table is the router card grid above. */ .entry-content figure.wp-block-table{ margin-bottom:2rem; } /* The border and the rounded corners live on the FIGURE, never on the table. Putting `overflow:hidden` on the table to clip its own radius overrides the sitewide `overflow-x:auto` above it and silently kills horizontal scrolling: measured at 375px on B1, that left an 8-column table 425px wide inside a 333px box with 92px of data unreachable and no way to scroll to it. The figure clips; the table scrolls inside it. */ body:not(.home) .entry-content figure.wp-block-table{ border:1px solid var(--sw-line); border-radius:10px; overflow:hidden; } body:not(.home) .entry-content table{ border-collapse:collapse; width:100%; font-size:.94rem; line-height:1.45; border:0; display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; } body:not(.home) .entry-content thead th{ background:var(--sw-tint); color:var(--sw-ink); font-weight:650; text-align:left; padding:.7rem .8rem; border-bottom:2px solid var(--sw-line); vertical-align:bottom; } body:not(.home) .entry-content tbody td{ padding:.62rem .8rem; border-top:1px solid var(--sw-line); vertical-align:top; } body:not(.home) .entry-content tbody tr:nth-child(even){ background:var(--sw-zebra); } body:not(.home) .entry-content tbody tr:hover{ background:var(--sw-tint); } /* First column is the row's identity on nearly every table here. */ body:not(.home) .entry-content tbody td:first-child{ font-weight:600; color:var(--sw-ink); } /* --- 4. The provenance line --- Every page on this site closes dated claims with an italic-only paragraph ("Costs, specs and error codes ... are dated on every page"). It is the site's central trust signal and it currently renders as ordinary italic body text. SELECTOR CHANGED 2026-09-11 (both sites, one pass, at WJ's instruction). This was `p:has(> em:only-child)`. `:only-child` counts elements and ignores text, so it also boxed every paragraph that merely CONTAINED one italic phrase: 32 body paragraphs on this site, conclusions among them. md2wp.py now marks a paragraph that is entirely one italic span with `sw-provenance`, and only that class is styled. A page pasted before this change carries no class, so its provenance line reads as plain italic until it is re-pasted - graceful, and never the wrong way round. */ .entry-content p.sw-provenance{ background:var(--sw-tint); border-left:3px solid var(--sw-accent); border-radius:0 8px 8px 0; padding:.85rem 1.1rem; font-style:normal; color:var(--sw-muted); font-size:.94rem; } .entry-content p.sw-provenance em{ font-style:normal; } /* --- 5. Lists get air and a real marker --- */ .entry-content ul:not(.wp-block-page-list) > li, .entry-content ol > li{ margin-bottom:.6rem; padding-left:.2rem; } .entry-content ul:not(.wp-block-page-list){ list-style:none; padding-left:1.35rem; } .entry-content ul:not(.wp-block-page-list) > li{ position:relative; } .entry-content ul:not(.wp-block-page-list) > li::before{ content:""; position:absolute; left:-1.05rem; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--sw-accent); } /* --- 6. Blockquotes — used for verbatim manufacturer quotes --- */ .entry-content blockquote{ border-left:3px solid var(--sw-line); background:var(--sw-zebra); margin:1.8rem 0; padding:1rem 1.2rem; border-radius:0 8px 8px 0; } .entry-content blockquote p{ margin:0 0 .5rem; } .entry-content blockquote p:last-child{ margin-bottom:0; } .entry-content blockquote cite{ color:var(--sw-muted); font-size:.9rem; font-style:normal; } /* --- 7. Inline code and part numbers --- */ .entry-content code{ background:var(--sw-tint); border:1px solid var(--sw-line); border-radius:5px; padding:.1em .38em; font-size:.9em; color:var(--sw-accent-dark); } /* --- 8. Any in-body link that is the page's next step --- Generalizes the homepage's calculator-button rule to the same markup shape (a bolded standalone link) wherever it appears. SELECTOR CHANGED 2026-09-11 with the provenance rule above: this was `p > strong > a[href^="/"]:only-child`, which also caught every hub entry shaped **Title** - description and made each one a button. It now targets `sw-next-step`, which md2wp.py puts only on a paragraph that is nothing but one bold internal link. */ .entry-content p.sw-next-step > strong > a{ display:inline-block; background:var(--sw-accent); color:#fff!important; text-decoration:none; padding:.75rem 1.3rem; border-radius:9px; font-weight:600; } .entry-content p.sw-next-step > strong > a:hover{ background:var(--sw-accent-dark); color:#fff!important; } /* --- Standalone links inside a DATA table: 24px, not 44 ------------------ Ported 2026-09-08 and it applies MORE here than on Site 1: this corpus has 100 table cells whose entire content is a link (Site 1 has 62), nearly all of them manufacturer product pages in spec tables. They measured 18px. 24, not 44, and the distinction is a real one: WCAG 2.5.8 Target Size (Minimum) is Level AA and asks 24x24; 44x44 is 2.5.5 Target Size (Enhanced), Level AAA. docs/DESIGN-QA-PROPOSAL.md conflates the two. Row height is load-bearing on a spec table, so 44 would add ~26px to every row of a long comparison for no AA benefit. The homepage cluster cards above get 44 because they are the primary navigation and have the room. */ body:not(.home) .entry-content td > a:only-child{ display:inline-block; min-height:24px; padding-block:3px; } /* --- The mobile menu button is the primary navigation on a phone --------- Ported 2026-09-11 (design audit) from Site 1, where run 312 found it the same day. Measured on this site too: Kadence's header toggle, the ONLY route to the menu below the desktop breakpoint, rendered 37x31 at 375px. The 44px policy above was written by measuring .entry-content, and the header sits outside it. Min sizes only - padding, color and icon are the theme's. */ .mobile-toggle-open-container .menu-toggle-open{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* --- Wide tables on a phone: keep the row's name in view ----------------- Added 2026-09-11 (design audit). Measured at 375px across all 30 posts and 6 pages: 62 of 83 tables scroll sideways, and on 41 the LAST column starts off-screen - "Price", "Typical bracket", "List price", "Share of a new machine", i.e. usually the column the table exists to answer. The scroll gate in docs/DESIGN-SPEC.md passes all of them, correctly: the data is reachable. What it cannot see is that the columns squeeze to one or two words per line first (hub C's rows ran to 326px, one D2 row to 1,046px), and that once you swipe to the answer, the row it belongs to is gone. Two rules, both scoped to tables of 4+ columns - the 21 tables of 2-3 columns that already fit are left exactly as they are (checked: none of the 21 has 4+ columns). 16 more 2-3 column tables still scroll and get no pin - on those a pinned column would take a third of the width: - a floor on cell width, so text wraps in phrases rather than words; - the first column pinned, since it names the row on nearly every table here (the rule above already bolds it for that reason). Measured with both applied: table height -18 to -28% (hub C 1,329 -> 958px, B3 1,426 -> 1,068, A1 1,257 -> 1,017), tallest hub C row 326 -> 217px, no page overflow. The pinned cell needs an opaque background or the scrolled cells show through it; zebra rows repeat their own tint. The -2px shadow is not decoration: under border-collapse the pinned cell's background stops short of the shared left border, and a 1px sliver of the scrolled link column showed through it (seen on hub C). */ @media (max-width:767px){ body:not(.home) .entry-content table:has(tr > :nth-child(4)) :is(td,th){ min-width:8.5rem; } body:not(.home) .entry-content table:has(tr > :nth-child(4)) :is(td,th):first-child{ position:sticky; left:0; z-index:1; min-width:7rem; max-width:8.5rem; background:#fff; box-shadow:1px 0 0 var(--sw-line), -2px 0 0 #fff; } body:not(.home) .entry-content table:has(tr > :nth-child(4)) thead th:first-child{ background:var(--sw-tint); box-shadow:1px 0 0 var(--sw-line), -2px 0 0 var(--sw-tint); z-index:2; } body:not(.home) .entry-content table:has(tr > :nth-child(4)) tbody tr:nth-child(even) td:first-child{ background:var(--sw-zebra); box-shadow:1px 0 0 var(--sw-line), -2px 0 0 var(--sw-zebra); } } /* --- "On this page" ------------------------------------------------------- Added 2026-09-11 at WJ's instruction, from the design audit: posts run 2,676-8,837 words with runs of up to 2,004 words between headings, and not one had a contents list. md2wp.py builds it (site switch: md2wp.json) as a core/details block before the first H2, with an id on every H2. Phone: collapsed to one 44px row, since an open 9-item list of long headings would push the lede's table a full screen down. Desktop: shown open, in two columns across the full column like the tables, via ::details-content. That pseudo-element is new (Chrome 131, Safari 18.4), so it sits behind @supports; a browser without it keeps the one-tap box, which is the phone behavior and still works. NOT a sticky sidebar. The design audit first proposed one in the "empty" space beside the 544px prose column, but every table here spans the full 968px, so a sticky list would slide over each of them. */ body:not(.home) .entry-content > details.sw-toc{ max-width:34rem; margin:1.6rem 0 2.2rem!important; border:1px solid var(--sw-line); border-radius:10px; background:#fff; } .entry-content details.sw-toc > summary{ list-style:none; cursor:pointer; box-sizing:border-box; min-height:44px; padding:.6rem .9rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-weight:650; line-height:1.35; color:var(--sw-ink); /* The label and the count are two spans, and the count is small and muted. As one string, "On this page · 9 sections" wrapped to two lines in the 289px phone column (measured: a 65px row out of a 44px one), and shrinking it to .95rem still wrapped. */ } .entry-content details.sw-toc .sw-toc-count{ margin-left:auto; font-weight:400; font-size:.85rem; color:var(--sw-muted); white-space:nowrap; } .entry-content details.sw-toc > summary::-webkit-details-marker{ display:none; } .entry-content details.sw-toc > summary::after{ content:""; flex:none; width:.55rem; height:.55rem; margin-right:.2rem; border-right:2px solid var(--sw-accent); border-bottom:2px solid var(--sw-accent); transform:translateY(-25%) rotate(45deg); transition:transform .15s ease; } .entry-content details.sw-toc[open] > summary::after{ transform:translateY(25%) rotate(-135deg); } .entry-content details.sw-toc > summary:focus-visible{ outline:3px solid var(--sw-accent); outline-offset:2px; border-radius:8px; } .entry-content details.sw-toc ol{ margin:0; padding:.1rem 1rem 1rem 2.3rem; font-size:.95rem; line-height:1.4; } .entry-content details.sw-toc ol > li{ margin:0; padding:0; break-inside:avoid; } .entry-content details.sw-toc ol > li::marker{ color:var(--sw-muted); font-variant-numeric:tabular-nums; } .entry-content details.sw-toc a{ display:block; padding:.22rem 0; text-decoration:none; } .entry-content details.sw-toc a:hover{ text-decoration:underline; } /* A jump should not land flush against the viewport edge. */ .entry-content h2[id]{ scroll-margin-top:1.25rem; } @media (prefers-reduced-motion:reduce){ .entry-content details.sw-toc > summary::after{ transition:none; } } @media (min-width:1000px){ @supports selector(::details-content){ body:not(.home) .entry-content > details.sw-toc{ max-width:100%; } .entry-content details.sw-toc::details-content{ content-visibility:visible; height:auto; } .entry-content details.sw-toc > summary{ pointer-events:none; cursor:default; min-height:0; padding-bottom:.35rem; } .entry-content details.sw-toc > summary::after{ display:none; } .entry-content details.sw-toc ol:has(> li:nth-child(6)){ columns:2; column-gap:2.5rem; } } } /* ============================================================ PART 3 — PALETTE V2 AND SITE CHROME Added 2026-09-17 at WJ's instruction, from the approved redesign canvas ("Still Worth Fixing — Redesign", palette v2). WJ's brief: the overall color read too flat. Applied to BOTH sites in one pass. WHAT THIS SECTION CHANGES: color, type and surface only. It does NOT touch a width, a max-width, a left margin or a container, so every geometry rule above -- and the gates in docs/DESIGN-SPEC.md that they were measured against -- is untouched. Where a rule below restates a border, it changes the border's color or top width, never a side that moves a left edge. THE PALETTE. Every text pair below was checked at 4.5:1 or better: forest #0F3B31 structure: header rule, section bar, footer, table heads copper #B8500F action: buttons (white on copper 5.0:1) teal #0A6B73 links (5.8:1 on cream) cream #FAF6EE page ground; sand #F2E6D2 bands and tints ink #122620 text; muted #56645E (5.0:1 on sand) Section colors, one per cluster, set by the body class the child theme adds (sw-cluster-a ... sw-cluster-e): A green #1A7F52 · B copper #B8500F · C blue #1F5FBF D plum #7B3F8C · E teal #0A6B73 Each has a darker ink for small text on its own tint. THE CHROME (.sw-topbar, .sw-sectionnav, .sw-footer-panel) is markup the child theme's functions.php prints through Kadence's own hooks (kadence_before_header, kadence_after_header, kadence_before_footer, verified in Kadence 1.5.2's header.php and footer.php). It exists only when the child theme is active. Pasted into Additional CSS alone, those rules match nothing and do no harm. FONTS. Source Serif 4 (headings, reading text), IBM Plex Sans (interface), IBM Plex Mono (dates, labels, table heads). The @font-face rules are NOT in this file: the builder prepends them to the theme's style.css, because the font files ship inside the theme and a relative url() only resolves from there. Everything below names a fallback, so this file degrades to Georgia / system fonts wherever the theme is not active -- including renderpage.py, which inlines this file and so measures layout on the fallback faces. ============================================================ */ /* Palette tokens live in the :root block at the top of this file. */ /* Kadence reads its whole chrome from these nine variables. Its defaults are a stock blue (#2B6CB0) and cool grays, which is most of why the site read flat. `:root:root` outranks the `:root` block Kadence prints inline. */ :root:root{ --global-palette1:#0A6B73; --global-palette2:#084F55; --global-palette3:#122620; --global-palette4:#1F2E29; --global-palette5:#2B3A35; --global-palette6:#56645E; --global-palette7:#E4DAC8; --global-palette8:#FAF6EE; --global-palette9:#FFFFFF; } body.sw-cluster-a{ --sw-section:#1A7F52; --sw-section-ink:#125C3B; --sw-section-wash:#DFF1E6; } body.sw-cluster-b{ --sw-section:#B8500F; --sw-section-ink:#8A3B0B; --sw-section-wash:#FBE7D9; } body.sw-cluster-c{ --sw-section:#1F5FBF; --sw-section-ink:#1F5FBF; --sw-section-wash:#E3ECFA; } body.sw-cluster-d{ --sw-section:#7B3F8C; --sw-section-ink:#7B3F8C; --sw-section-wash:#F1E5F4; } body.sw-cluster-e{ --sw-section:#0A6B73; --sw-section-ink:#0A6B73; --sw-section-wash:#DDF0F1; } /* --- Type --------------------------------------------------------------- */ body{ font-family:var(--sw-sans); color:var(--sw-ink); background:var(--sw-cream); } .entry-title, .entry-content h2, .entry-content h3, .site-branding .site-title{ font-family:var(--sw-serif); color:var(--sw-ink); } .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content blockquote{ font-family:var(--sw-serif); } .entry-content h2{ font-weight:700; } /* --- Header ------------------------------------------------------------- */ #masthead .site-header-row-container-inner{ background:var(--sw-cream); } #masthead{ border-bottom:4px solid var(--sw-forest); } .site-branding .site-title{ font-weight:700; letter-spacing:-.01em; } .header-navigation .menu > li > a{ color:var(--sw-ink); font-weight:500; } .header-navigation .menu > li > a:hover, .header-navigation .menu > li.current-menu-item > a{ color:var(--sw-accent); } /* Top strip (functions.php, kadence_before_header). */ .sw-topbar{ background:var(--sw-forest); color:var(--sw-mint-text); font:500 .72rem/1.4 var(--sw-mono); letter-spacing:.05em; text-transform:uppercase; padding:.55rem 1.5rem; text-align:center; } /* Section bar (functions.php, kadence_after_header). One row that scrolls sideways inside itself on a phone, so it can never widen the page; the document-overflow gate stays at 0. Links are 44px tall: this is primary navigation, the same policy as the homepage router cards. */ .sw-sectionnav{ background:#fff; border-bottom:1px solid var(--sw-line); } /* Same box as Kadence's header row (.site-header .site-container), so the first section link sits under the site title rather than on a third edge. */ .sw-sectionnav ul{ list-style:none; margin:0 auto; padding:0 var(--global-content-edge-padding,1.5rem); max-width:var(--global-content-width,1290px); box-sizing:border-box; display:flex; align-items:center; gap:.25rem; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .sw-sectionnav ul::-webkit-scrollbar{ display:none; } .sw-sectionnav li{ flex:none; margin:0; } .sw-sectionnav li:first-child a{ padding-left:0; } .sw-sectionnav a{ display:flex; align-items:center; min-height:44px; padding:0 .8rem; font:600 .9rem/1 var(--sw-sans); color:var(--sw-ink); text-decoration:none; border-bottom:3px solid transparent; white-space:nowrap; } .sw-sectionnav a:hover{ color:var(--sw-accent); } .sw-sectionnav .sw-dot{ width:.55rem; height:.55rem; border-radius:50%; margin-right:.5rem; flex:none; } .sw-sectionnav .sw-sec-a .sw-dot{ background:#1A7F52; } .sw-sectionnav .sw-sec-b .sw-dot{ background:#B8500F; } .sw-sectionnav .sw-sec-c .sw-dot{ background:#1F5FBF; } .sw-sectionnav .sw-sec-d .sw-dot{ background:#7B3F8C; } .sw-sectionnav .sw-sec-e .sw-dot{ background:#0A6B73; } .sw-sectionnav a[aria-current]{ border-bottom-color:var(--sw-section); } .sw-sectionnav li.sw-tool{ margin-left:auto; } .sw-sectionnav li.sw-tool a{ min-height:36px; margin:.25rem 0; padding:0 1rem; border-radius:6px; border-bottom:0; background:var(--sw-copper); color:#fff; box-shadow:0 2px 0 var(--sw-copper-dark); } .sw-sectionnav li.sw-tool a:hover{ background:var(--sw-copper-dark); color:#fff; } .sw-sectionnav a:focus-visible{ outline:3px solid var(--sw-accent); outline-offset:-3px; } /* --- Footer ------------------------------------------------------------- */ .sw-footer-panel{ background:var(--sw-forest); color:var(--sw-on-forest); } .sw-footer-panel .sw-fp-inner{ max-width:var(--global-content-width,1290px); margin:0 auto; box-sizing:border-box; padding:2.75rem var(--global-content-edge-padding,1.5rem) 2rem; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr); gap:2rem; } @media (max-width:767px){ .sw-footer-panel .sw-fp-inner{ grid-template-columns:minmax(0,1fr); gap:1.5rem; padding:2rem 1.25rem 1.5rem; } } .sw-footer-panel .sw-fp-name{ font:700 1.35rem/1.2 var(--sw-serif); color:#fff; margin:0 0 .25rem; } .sw-footer-panel .sw-fp-tag{ font:500 .75rem/1.4 var(--sw-mono); color:var(--sw-mint-text); margin:0 0 .9rem; } .sw-footer-panel p{ margin:0; font-size:.9rem; line-height:1.6; } .sw-footer-panel h2{ font:500 .72rem/1.4 var(--sw-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--sw-mint-text); margin:0 0 .5rem; border:0; padding:0; } .sw-footer-panel ul{ list-style:none; margin:0; padding:0; } .sw-footer-panel li{ margin:0; } .sw-footer-panel a{ display:flex; align-items:center; min-height:32px; color:var(--sw-on-forest); text-decoration:none; font-size:.92rem; } .sw-footer-panel a:hover{ color:#fff; text-decoration:underline; } .site-footer .site-footer-row-container-inner{ background:var(--sw-forest); border-top:1px solid var(--sw-forest-line); } .site-footer, .site-footer .footer-html{ color:var(--sw-on-forest); } .site-footer a{ color:#fff; } .site-footer a:hover{ color:var(--sw-mint-text); } /* --- Page title band and section identity -------------------------------- */ .entry-header.page-title{ border-bottom:4px solid var(--sw-section); } body.sw-cluster .entry-header.page-title .entry-title::before{ display:block; width:max-content; margin-bottom:.8rem; padding:.3rem .55rem; border-radius:4px; font:500 .72rem/1.3 var(--sw-mono); letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--sw-section); } /* The label is decorative: the empty alt text after the slash keeps it out of the heading's accessible name where the browser supports that syntax; the first declaration is the fallback for one that does not. */ body.sw-cluster-a .entry-header.page-title .entry-title::before{ content:"Section A \00B7 Repair or replace"; content:"Section A \00B7 Repair or replace" / ""; } body.sw-cluster-b .entry-header.page-title .entry-title::before{ content:"Section B \00B7 Repair costs"; content:"Section B \00B7 Repair costs" / ""; } body.sw-cluster-c .entry-header.page-title .entry-title::before{ content:"Section C \00B7 Symptoms"; content:"Section C \00B7 Symptoms" / ""; } body.sw-cluster-d .entry-header.page-title .entry-title::before{ content:"Section D \00B7 Engines & brands"; content:"Section D \00B7 Engines & brands" / ""; } body.sw-cluster-e .entry-header.page-title .entry-title::before{ content:"Section E \00B7 Buying & seasonal"; content:"Section E \00B7 Buying & seasonal" / ""; } /* Vertical room in the subpage title band (Site 3 only, 2026-09-17). Measured live on /symptoms/: Kadence gives .entry-header a 200px min-height and centers its content, but the section label plus a two-line title came to 230px, so the header grew past the minimum with zero padding and the label sat flush against the top of the band. Site 1 does not need this: its band is full-bleed and carries its own clamp() padding. Top and bottom only -- the left/right padding above is the measured left-edge fix and is untouched. */ body:not(.home) .entry-hero .entry-header.page-title{ padding-top:clamp(1.75rem,4vw,2.75rem)!important; padding-bottom:clamp(1.5rem,3.5vw,2.25rem)!important; } /* --- Section rhythm: the H2 rule takes the section color ---------------- */ .entry-content h2{ border-top:3px solid var(--sw-section); } .entry-content h2:first-child, .entry-content hr.wp-block-separator + h2{ border-top:0; } .entry-content hr.wp-block-separator{ border-top-color:var(--sw-line); } /* --- Content boxes ------------------------------------------------------ */ .content-bg, body.content-style-boxed .site .entry-content-wrap{ box-shadow:0 1px 0 var(--sw-line), 0 16px 36px -24px rgba(15,59,49,.35); } /* --- Buttons ------------------------------------------------------------ */ .entry-content p.sw-next-step > strong > a, body.home .entry-content p > strong > a[href*="calculator"], .wp-block-button__link, .button, button[type="submit"], input[type="submit"]{ background:var(--sw-copper)!important; color:#fff!important; border-color:var(--sw-copper)!important; box-shadow:0 2px 0 var(--sw-copper-dark); } .entry-content p.sw-next-step > strong > a:hover, body.home .entry-content p > strong > a[href*="calculator"]:hover, .wp-block-button__link:hover, .button:hover, button[type="submit"]:hover, input[type="submit"]:hover{ background:var(--sw-copper-dark)!important; color:#fff!important; } /* --- Data tables: forest head, warm zebra ------------------------------- */ body:not(.home) .entry-content thead th{ background:var(--sw-forest); color:#fff; border-bottom:0; font-family:var(--sw-mono); font-weight:500; font-size:.8rem; letter-spacing:.02em; } body:not(.home) .entry-content thead th a{ color:var(--sw-mint-text); } body:not(.home) .entry-content figure.wp-block-table{ background:#fff; box-shadow:0 12px 28px -20px rgba(15,59,49,.35); } body:not(.home) .entry-content tbody tr:nth-child(even){ background:var(--sw-zebra); } body:not(.home) .entry-content tbody tr:hover{ background:var(--sw-mint); } body:not(.home) .entry-content figure.wp-block-table figcaption{ font:.82rem/1.5 var(--sw-mono); color:var(--sw-muted); } /* --- The provenance line becomes a stamp -------------------------------- */ .entry-content p.sw-provenance{ background:var(--sw-tint); border-left:4px solid var(--sw-section); color:var(--sw-ink); font-family:var(--sw-mono); font-size:.8rem; line-height:1.55; } /* --- Verbatim quotes ---------------------------------------------------- */ .entry-content blockquote{ background:#fff; border-left:4px solid var(--sw-copper); box-shadow:0 1px 0 var(--sw-line); } .entry-content blockquote cite{ font-family:var(--sw-mono); } /* --- Code and part numbers ---------------------------------------------- */ .entry-content code{ font-family:var(--sw-mono); background:var(--sw-tint); border-color:var(--sw-line); color:var(--sw-ink); } /* --- List markers take the section color -------------------------------- */ .entry-content ul:not(.wp-block-page-list) > li::before{ background:var(--sw-section); } /* --- Homepage ----------------------------------------------------------- */ body.home .entry-header.page-title{ background:var(--sw-tint); border-bottom:4px solid var(--sw-forest); } body.home .entry-content tbody tr{ box-shadow:0 12px 28px -20px rgba(15,59,49,.35); } body.home .entry-content tbody tr:hover{ border-color:var(--sw-forest); box-shadow:0 20px 36px -18px rgba(15,59,49,.45); } body.home .entry-content tbody tr:focus-within{ border-color:var(--sw-forest); box-shadow:0 0 0 3px rgba(15,59,49,.3); } /* Router rows get their accent as an INSET shadow, not a wider border, so the card's content does not move 3px right of every other left edge. */ body.home .entry-content tbody tr:not(:has(td:only-child)){ box-shadow:inset 4px 0 0 var(--sw-forest), 0 12px 28px -20px rgba(15,59,49,.35); } body.home .entry-content tbody tr:not(:has(td:only-child)):hover{ box-shadow:inset 4px 0 0 var(--sw-forest), 0 20px 36px -18px rgba(15,59,49,.45); } body.home .entry-content h3{ border-left-color:var(--sw-copper); } /* The five section cards are rows 1-5 of a single-column table, in cluster order A-E (index.md). A colored top edge ties each card to its section's color everywhere else on the site. */ body.home .entry-content tbody tr:has(td:only-child){ border-top-width:6px; } body.home .entry-content tbody tr:has(td:only-child):nth-child(1){ border-top-color:#1A7F52; } body.home .entry-content tbody tr:has(td:only-child):nth-child(2){ border-top-color:#B8500F; } body.home .entry-content tbody tr:has(td:only-child):nth-child(3){ border-top-color:#1F5FBF; } body.home .entry-content tbody tr:has(td:only-child):nth-child(4){ border-top-color:#7B3F8C; } body.home .entry-content tbody tr:has(td:only-child):nth-child(5){ border-top-color:#0A6B73; } /* --- Pinned first column on phone tables (Site 3's rule; harmless where absent): the pinned head cell must match the new forest head. --- */ @media (max-width:767px){ body:not(.home) .entry-content table:has(tr > :nth-child(4)) thead th:first-child{ background:var(--sw-forest); box-shadow:1px 0 0 var(--sw-forest-line), -2px 0 0 var(--sw-forest); } } /* Buttons use the interface face, not the serif of the paragraph they sit in. */ .entry-content p.sw-next-step > strong > a, body.home .entry-content p > strong > a[href*="calculator"]{ font-family:var(--sw-sans); } /* The router link is display:flex, which collapses the leading space in the arrow's content string; restore the gap. */ body.home .entry-content tbody td:last-child:not(:only-child) a::after{ margin-left:.35em; } /* --- The "On this page" box --------------------------------------------- */ .entry-content details.sw-toc{ border-top:4px solid var(--sw-section)!important; } .entry-content details.sw-toc > summary::after{ border-color:var(--sw-section); } /* ============================================================ PART 4 — ONE PAGE FRAME ON EVERY PAGE (2026-09-17, WJ) WJ reported the homepage and the subpages did not look like one site. Measured live at 1280 on both sites before this change: - homepage content box 1048px wide at x=114, subpages 1008px at x=134, so the column jumped 20px between the homepage and every other page (fixed above by giving the homepage the same width); - the band behind the title was two different colors: the homepage band is sand (--sw-tint), but on subpages Kadence's own hero background (--global-palette7, #E4DAC8) showed through. The band background now comes from one rule for every page. ============================================================ */ .entry-hero-container-inner{ background:var(--sw-tint); } /* Site 3 only: the subpage title sits inside .hero-container, not in a full-bleed band like the homepage's, so the section-colored rule stopped at the header box (1008px) while the homepage rule ran edge to edge. Move the rule to the full-width hero wrapper so both span the viewport. */ body:not(.home) .entry-hero-container-inner{ border-bottom:4px solid var(--sw-section); } body:not(.home) .entry-hero .entry-header.page-title{ border-bottom:0; } /* ROOT-FONT-SIZE SAFE (2026-09-17). The title-band offsets above used to be fixed pixels (32px, 8px, 56px) copied from Kadence's paddings at a 16px root. Kadence sets those paddings in rem (--global-content-edge-padding 1.5rem, --global-content-boxed-padding 2rem, 1.5rem below 768), so in any browser with a larger default font size the title and the text parted company: measured live at a 24px root, 16px apart on Site 3 and 28px on Site 1's subpages, with the homepage and subpages disagreeing by 12px. The offsets now use Kadence's own variables ("- 1rem" reproduces the old +8px/+32px phone values), and were measured at 16px and 24px roots on the homepage and /about/ at 1440, 1280, 1000, 768, 767 and 375: title and text share one left edge in all 24 cases. */