/* Theme Name: Still Worth Fixing (Kadence child) Theme URI: https://stillworthfixing.com/ Description: Child theme of Kadence carrying the Still Worth Fixing design layer. GENERATED FILE -- do not edit. The design lives in sites/site1-appliance/assets/kadence-additional.css; edit that and re-run sites/site1-appliance/themes/build-child-theme.py. Author: Still Worth Fixing Template: kadence Version: 1.1.46850 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: swf-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/site1-appliance/assets/kadence-additional.css copied verbatim by build-child-theme.py. Do not edit it here. ------------------------------------------------------------------ */ /* ============================================================ Still Worth Fixing — design layer 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; } /* --- Reading measure: prose 65-75ch; data + calculator break out --- */ .entry-content > figure.wp-block-table, .entry-content > iframe { max-width: min(1080px, 94vw) !important; width: min(1080px, 94vw) !important; margin-left: calc(50% - min(540px, 47vw)) !important; } @media (max-width: 782px){ .entry-content > figure.wp-block-table, .entry-content > iframe { max-width:100%!important; width:100%!important; margin-left:0!important; } } /* --- Typography scale (SITEWIDE - reaches all 41 pages, not just the homepage. 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; } 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; } /* The hero container must match, or the H1 and the content resolve their left edge against different boxes and no single padding constant can align them. Kadence leaves this at 640. See the band rule below. */ /* 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-content{ max-width:100%!important; } /* Prose stays at the article measure (33rem = 528px). Longest full rendered line measured 71-74 chars on all four pages the README names (2026-09-05); ragged lines run 53-74. 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:not(:only-child) a{ font-weight:600; text-decoration:none; } body.home .entry-content tbody td:last-child:not(:only-child) a::after{ content:" \2192"; } /* Make the whole card the tap target, not just the link inside it. Measured at 375px on the live homepage 2026-09-05: the card rows are 122px tall and the inside them was 20px, so four of the five primary navigation cards presented a large tappable-looking surface with a small actual hit area. The overlay stretches the link across the card; ::after already carries the arrow glyph, so the overlay goes on ::before. **`:not(:only-child)` restricts all three rules to the router table.** A section card is a single-cell row, so `td:last-child` also matches it -- without the guard, every deep link inside a section card would get a full-card overlay and the last one would capture the whole card. Those cards carry two or three destinations on purpose. */ 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); } /* --- The five section cards --- These come from a SINGLE-COLUMN markdown table in index.md, so each card is one with one and the grid rules above already lay them out. `td:only-child` is the discriminator: the router table above has two cells per row and its first cell never contains a link, so the two grids on this page cannot be confused for one another and neither selector depends on document order. Why a table and not
cards: linkcheck.py harvests links with `\]\(([^)\s]+)\)` — markdown syntax only. Hand-written cards would have removed all five hub links from the site's link graph with every checker still passing. */ body.home .entry-content tbody tr:has(td:only-child){ padding:1.3rem 1.4rem; gap:0; } body.home .entry-content tbody tr:has(td:only-child) td{ font-weight:400!important; color:var(--sw-muted); line-height:1.62; } /* The leading bold link is the card's title. */ body.home .entry-content tbody td:only-child > strong:first-child{ display:block; margin-bottom:.45rem; } body.home .entry-content tbody td:only-child > strong:first-child a{ font-size:1.12rem; font-weight:700; color:var(--sw-ink); text-decoration:none; letter-spacing:-.01em; } body.home .entry-content tbody tr:has(td:only-child):hover td:only-child > strong:first-child a{ color:var(--sw-accent); } body.home .entry-content tbody td:only-child > strong:first-child a::after{ content:" \2192"; color:var(--sw-accent); font-weight:600; } /* Deep links inside the description stay underlined so they do not read as part of the title. The whole card is NOT a single tap target here: each card carries two or three distinct destinations. */ body.home .entry-content tbody td:only-child a:not(strong a){ color:var(--sw-accent); text-decoration:underline; text-underline-offset:2px; } /* Two across on desktop — these cards carry far more text than the router's. */ @media (min-width:900px){ body.home .entry-content figure.wp-block-table:has(td:only-child) table{ grid-template-columns:repeat(2,1fr)!important; } } /* 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%; } /* ============================================================ PART 2 — EVERY PAGE THAT IS NOT THE HOMEPAGE Added 2026-09-05 (run 215) after WJ reported the main page and subpages read as stale. Everything above this line is scoped `body.home`. Measured live on 2026-09-05: /about/ renders 22 blocks — 16 paragraphs, 5 H2, one list — with ZERO images, ZERO tables, no header tint, and exactly one background color across the whole document (transparent). The homepage had the same single-background result across 38 blocks. That is the defect: the design layer styled the front door and nothing behind it, and the 30 posts queued for import are all "behind it". NOTE: none of Part 2 could be verified against a live article, because 0 of 30 posts are published. It was verified against a local render of B1 and of the live /about/ markup. Re-check one real post after item 12s imports. ============================================================ */ /* --- 1. The header band, on every page rather than just home --- Kadence prints .entry-header.page-title on singular pages. The homepage rule above already restyles it; this generalizes the band itself so a reader arriving on a post from search lands on a page that looks designed rather than on a bare 32px heading. */ .entry-header.page-title{ background:var(--sw-tint); border-bottom:1px solid var(--sw-line); margin:0 calc(50% - 50vw) 2.5rem; padding:clamp(1.75rem,4vw,3rem) max(1.5rem, calc(50vw - 320px)); text-align:left!important; } .entry-header.page-title .entry-title{ font-size:clamp(1.7rem,1.3rem + 1.6vw,2.3rem)!important; line-height:1.18; letter-spacing:-.018em; max-width:28ch; margin-left:0!important; margin-right:auto!important; } /* The homepage band is wider because its container is 1120, not 640. Corrected 2026-09-06 (run 218): this was `50vw - 536px`, i.e. the container edge plus its own 24px padding — but it left out .entry-content-wrap's padding, so the homepage H1 sat 32px LEFT of every heading, table and card beneath it. Below 1120px the homepage container is full-viewport-width, so the offset is a constant there rather than a function of the viewport; `max(0px, …)` is what makes the one expression cover both regimes. Verified on a Kadence render of the real homepage markup at 1440 / 1280 / 1000 / 768 / 375: left-edge spread 0 at all five. */ /* Rewritten 2026-09-06 by Site 3's run 203, at WJ's instruction, porting the expression that site arrived at. The previous pair read `max(0px,(100vw - 1120px)/2) + 56px` and was verified as spread 0 at 1440 / 1280 / 1000 / 768 / 375 — but that verification ran in a browser using OVERLAY scrollbars, where the error is identically zero. 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 left of the page box. The old padding carried a matching `vw` term that cancelled it ABOVE 1120px — but the term goes to zero below, leaving the H1 7.5px left of the content. Measured on a Kadence render of this homepage at 768 with a 15px reserved scrollbar: H1 48.5, content 56. With overlay scrollbars, 0. That regime is not exotic: it is the default for desktop Windows and for any Mac set to show scroll bars always. `calc(50vw - 50% + 32px)` puts the same mixed pair on both sides, so it cancels in BOTH regimes and at every width. It requires the hero container widened to 1120 above, since a percentage resolves against the parent and Kadence leaves that box at 640. Verified on renders of the homepage at 1440 / 1280 / 1000 / 768 / 600 / 375, each measured twice — once with overlay scrollbars and once with a forced 15px classic scrollbar: left-edge spread 0 in all twelve. */ 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){ /* The content inset steps 56 -> 32 below 768 and .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); } } /* --- 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: 48 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; } /* --- 8b. THE INLINE CALCULATOR (added 2026-09-06, run 218) --- The widget ships `.rr{max-width:780px;margin:0 auto}`, which is correct for the standalone document still served at /wp-content/uploads/…/repair-or-replace-calculator.html and wrong once the shortcode renders it INLINE: it centred the widget inside the content column, 114px right of every other element and 228px narrower, on all eight placements. Measured on a Kadence render of the homepage: slot 1008px at left 209, widget 780px at left 323. Fixed here rather than in the widget, deliberately — the widget is still served standalone at that URL, where the 780px measure and the auto margins are what should happen. Scoped to `.swf-rrc-slot` so it only applies where the shortcode put it. `!important` because the plugin enqueues its stylesheet and load order is not guaranteed against Additional CSS. */ .swf-rrc-slot .rr{ max-width:100%!important; margin-left:0!important; margin-right:0!important; } /* --- 9. ONE LEFT EDGE ON SUBPAGES (rewritten 2026-09-06, run 218) --- This section used to widen tables OUT of a narrow container. That produced three different left edges on every non-home page, measured on the live host at 1440px: H1 393, prose and headings 449, tables 173 — a 276px spread. A hub is mostly tables, so its headings read as floating in the middle of the page next to full-width data. That is the "subpages look stale" complaint, and it is geometry, not styling. Why it was invisible for so long: 0 of 30 posts and 0 of 5 hubs are published, and the five live pages are prose-only, so nothing with a table had ever been looked at on a real subpage. The fix inverts the approach and follows what the homepage already does: widen the CONTAINER, then hold prose to a reading measure with max-width. Tables then fill the container instead of escaping it, and everything shares one left edge. The +56px / +32px constants are Kadence's own insets, measured rather than guessed: .content-container padding 24px plus .entry-content-wrap padding, which is 32px at >=768 and 24px below it. The band is full-bleed via a negative margin, so its padding has to reproduce that sum to put the H1 on the same edge. Verified on the live Kadence host with a table injected into .entry-content, at 1440 / 1280 / 768 / 375: left-edge spread 0 at all four, zero horizontal page overflow, table overflow-x still auto. Supersedes the sitewide breakout at the top of this file for every non-home page; the homepage keeps its own rules in the HOMEPAGE section. */ body:not(.home) .content-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; } /* Title band: full-bleed background, H1 on the content edge. */ body:not(.home) .entry-header.page-title{ padding-left:max(1.5rem, calc(50vw - min(540px,47vw) + var(--global-content-edge-padding) + var(--global-content-boxed-padding)))!important; padding-right:max(1.5rem, calc(50vw - min(540px,47vw) + var(--global-content-edge-padding) + var(--global-content-boxed-padding)))!important; } @media (max-width:767px){ body:not(.home) .entry-header.page-title{ padding-left:max(1.25rem, calc(50vw - min(540px,47vw) + var(--global-content-edge-padding) + var(--global-content-boxed-padding) - 1rem))!important; padding-right:max(1.25rem, calc(50vw - min(540px,47vw) + var(--global-content-edge-padding) + var(--global-content-boxed-padding) - 1rem))!important; } } /* ============================================================ Tap targets and scroll affordance — added 2026-09-08, from the first multi-viewport measurement this design layer has had. ============================================================ */ /* --- WCAG 2.5.8: a router card title is a tap target, not a word --------- Measured at 375px: 9 of the 11 standalone links on the homepage were 20-21px tall, and five of them are the cluster card titles — the primary route into the site — with three more on A1. 2.5.8 exempts a link sitting inline in a sentence, so PROSE LINKS ARE DELIBERATELY UNTOUCHED; these are not that. Each of these links is either the whole of its card cell or that cell's leading title, both of which already render on their own line, so giving them a real block box grows the target without moving anything. */ 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; } /* --- A table that scrolls has to say it scrolls -------------------------- The tables above are display:block with overflow-x:auto and they do scroll correctly — that was verified, not assumed. What they do not do is admit it: macOS and iOS draw overlay scrollbars that fade out, so at 375px B1 hides up to 143px of columns behind no visible affordance at all, on the page whose entire value is its tables. A styled scrollbar is the honest fix because the browser paints it ONLY when the content actually overflows — no JavaScript, and nothing shown on a table that already fits. */ 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); } /* --- Standalone links inside a DATA table: 24px, not 44 ------------------ A correction to docs/DESIGN-QA-PROPOSAL.md, which lists the gate as "≥ 44px, WCAG 2.5.8". Those are two different success criteria: 2.5.8 Target Size (Minimum) is Level AA and asks 24x24; 44x44 is 2.5.5 Target Size (Enhanced), Level AAA. The distinction decides this rule. The router cards above get 44 because they are the primary navigation and have the room. These do not: they are appliance cross-links sitting in comparison tables, measured at 18px, and row height is load-bearing there — forcing 44 would add ~26px to every row of a twelve-row cost table and destroy the density that is the page's value. 24 clears AA and costs 6px. */ body:not(.home) .entry-content td > a:only-child{ display:inline-block; min-height:24px; padding-block:3px; } /* --- The hub's own cluster list is navigation too ------------------------ Found by measuring the HUB archetype rather than the homepage: a cluster hub lists its posts as `li > strong > a` followed by a description — the same title-plus-blurb shape as the homepage router cards, and the same job. They measured 20px. This is the whole reason `--all-archetypes` exists: the identical defect wears a different selector on each shape, so a rule written by looking at one page fixes exactly one page. Scoped with `:only-child` so a bolded link inside a sentence is never caught. */ .entry-content li > strong:first-child{ display:block; } .entry-content li > strong:first-child > a:only-child{ display:flex; align-items:center; min-height:44px; } /* --- The mobile menu button is the primary navigation on a phone --------- Added 2026-09-11 (run 312 design audit). The rules above give primary navigation 44px and were written by measuring .entry-content, so the one control outside it was never measured: Kadence's header toggle, which is the ONLY route to the menu below the desktop breakpoint, rendered 37x31 at 375px (theme default: 14px icon, 0.4em/0.6em padding). Same policy as the router cards, so the same 44. Min sizes only -- the theme's padding, color and border are left alone, and the icon stays centered. */ .mobile-toggle-open-container .menu-toggle-open{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; } /* ============================================================ 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 Error codes"; content:"Section C \00B7 Error codes" / ""; } body.sw-cluster-d .entry-header.page-title .entry-title::before{ content:"Section D \00B7 Brands"; content:"Section D \00B7 Brands" / ""; } body.sw-cluster-e .entry-header.page-title .entry-title::before{ content:"Section E \00B7 Buying guides"; content:"Section E \00B7 Buying guides" / ""; } /* --- 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); } /* --- The inline calculator joins the palette ----------------------------- The widget sets its colors as --rr-* on :root; declaring them on the slot wins by inheritance, so only the INLINE placements change -- the standalone document at /wp-content/uploads/... keeps its own look. The verdict colors (repair green, close amber, replace red) are meaning, not decoration, and are deliberately left alone. Checked: muted #56645E on surface-2 #F2E6D2 5.0:1. */ .swf-rrc-slot .rr{ --rr-accent:#0A6B73; --rr-text:#122620; --rr-muted:#56645E; --rr-surface:#FAF6EE; --rr-surface-2:#F2E6D2; --rr-border:#E4DAC8; --rr-border-strong:#C9BBA3; --rr-font:var(--sw-sans); } /* ============================================================ 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); } /* 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. */