/* Thermii design system — palette + type scale
------------------------------------------------------------------
Presentation only. Load AFTER journey.css and thermii-spark.css:
Two jobs, both additive:
1. Retires the pre-Thermii accents that are still driving parts of the UI
2. Replaces ad-hoc font sizes with one scale
No calculator hooks, values, visibility rules or handlers live here. */
/* ══ 1. PALETTE ═══════════════════════════════════════════════════════════
tokens.css still carries the palette from before Thermii — #ff5b00 orange
and #8cc63f green — alongside the teal→magenta gradient. The orange drives
the summary Edit pills, which means the only orange in the journey sits on
the review screen and reads as a warning. Both are remapped here rather
than deleted, so anything still referencing them lands on brand. */
:root {
/* One green — THE BRAND GREEN, #8cc63f, everywhere (Loz, 2026-08-27). This
token shipped as a cooled #17a05c "to sit beside the gradient's teal", which
left the app running three green systems at once: #17a05c wherever the vars
reach, the skin's hard-coded #7ac043/#5d9c46, and the locked engine's
literal #8cc63f on the kit add-on cards. Loz picked the engine's green as
the one; everything var-driven lands on it from here. */
--thermii-recommend: #74b700;
/* A secondary-action ink for Edit and other quiet controls. */
--thermii-quiet: #5b6480;
/* Legacy tokens, remapped. */
--navy: #101735;
--accent: #7138ed;
--accent2: #149de8;
--green: var(--thermii-recommend);
--sel-bg: #f4f1ff;
--body-bg: #f4f6fb;
/* journey.css layer. */
--journey-green: var(--thermii-recommend);
--journey-orange: var(--thermii-quiet);
--journey-selected: #5117f7;
--thermii-success: var(--thermii-recommend);
}
@media screen {
/* Edit is a quiet secondary action, not an alert. */
body .eq-ans-edit {
border-color: #d3d8e6;
background: #fff;
color: var(--thermii-quiet);
}
body .eq-ans-edit:hover {
border-color: var(--journey-selected);
color: var(--journey-selected);
}
/* The kit total is the most important number in the product — put it on the
brand purple rather than a one-off #4e20f5. */
body #wKitTotal,
body #kitTotal {
color: var(--thermii-purple) !important;
}
/* Recommended state, harmonised. */
body .filter-option.is-recommended {
border-color: var(--thermii-recommend);
background: linear-gradient(135deg, #fff 0%, #f1faf5 100%);
}
body .fo-rec-badge { color: #128049; }
/* ── Question-tile icons: retire the orange rollover ──
thermii.css:594 tints these on hover with a hue-rotate filter chain that
lands on orange. Each icon is an , so a filter can only ever produce a
flat tint — there is no filter that paints a gradient.
Instead the icon is knocked down to a solid black silhouette and a gradient
panel is laid over it with mix-blend-mode:lighten. Against the card's white
hover background (journey.css:214-216) lighten resolves per channel: over
the black strokes the gradient is lighter and shows through, over the white
card white stays white. The gradient therefore lands on the artwork only,
with no mask and no change to the markup or the image sources.
Selected tiles are excluded: green still means "confirmed" there, and only
the rollover was orange. */
body .filter-option:not(.is-selected):hover .fo-icon {
position: relative;
}
body .filter-option:not(.is-selected):hover .fo-icon img {
filter: brightness(0);
}
body .filter-option:not(.is-selected):hover .fo-icon::after {
content: "";
position: absolute;
inset: 0;
background: var(--thermii-gradient);
mix-blend-mode: lighten;
pointer-events: none;
}
/* The same rollover drives the System tiles, which swap to an authored
"-selected" artwork on hover instead of being filtered — those are already
on brand, so they are deliberately left alone. */
@media (prefers-reduced-motion: reduce) {
body .filter-option:not(.is-selected):hover .fo-icon img {
transition: none;
}
}
}
/* ══ 2. TYPE SCALE ════════════════════════════════════════════════════════
Question headlines were clamp(34–42px) in one file, 30px in another and
24px in a third; body copy ran 13 / 13.5 / 14 / 15px across four files.
Six steps, mapped onto the classes that already exist.
Tracking is tied to size rather than applied flat: −.035em is right on a
42px Manrope headline and cramped at 24px. */
:root {
--t-display: clamp(30px, 3.1vw, 42px);
--t-h1: 30px;
--t-h2: 24px;
--t-h3: 19px;
--t-h4: 16px;
--t-body: 15px;
--t-small: 13px;
--t-micro: 11px;
--tt-display: -.035em;
--tt-h2: -.02em;
--tt-h3: -.012em;
--tt-body: 0;
--lh-display: 1.12;
--lh-heading: 1.25;
--lh-body: 1.6;
}
@media screen {
/* ── Display: the question itself ── */
body .thermii-version-body h1,
body .kb-section-title,
body .eq-summary-title,
body .eq-title {
font-family: var(--thermii-font-display);
font-size: var(--t-display);
font-weight: var(--thermii-font-weight-display);
letter-spacing: var(--tt-display);
line-height: var(--lh-display);
text-wrap: pretty;
}
/* ── Stage title ──
Sized to its column rather than to the scale, which is why this is a
literal and not var(--t-h2).
The title sits in the stage header's first grid column,
var(--journey-stage-col) — clamp(150px, …, 180px) — and since 2026-08-07
that column ends in a vertical rule. "Measurements" is the longest stage
name and is a single unbreakable word: at the old 24px it measured 177px
against a 150px column at narrow widths and ran straight through the rule.
Measured at 600 weight with the -0.02em tracking: 24px→177, 22px→162,
21px→155, 20px→148, 19px→140. 20px technically fits 150 but with 2px to
spare, which is inside font-rendering variance between platforms. 19px
clears it by 10px and still fits the widest case with room, so one size
serves every breakpoint — which is the point, every screen's title should
be the same.
--t-h2 is deliberately left alone: it is 24px and --t-h3 is already 19px,
so retuning the token would collapse two steps of the scale into one to
solve a layout problem in a single component. */
body .thermii-stage-title {
font-size: 19px;
letter-spacing: var(--tt-h2);
line-height: var(--lh-heading);
}
/* ── Tile labels ── */
body #systemTypeRow .so-label,
body .thermii-version-card h2 {
font-size: var(--t-h3);
letter-spacing: var(--tt-h3);
line-height: var(--lh-heading);
}
body .fo-label,
body .thermostat-name {
font-size: var(--t-h4);
letter-spacing: var(--tt-h3);
line-height: 1.3;
}
/* ── Body copy ── */
/* `.eq-subtext` was the one body style never wired into the scale. It took
15px/1.55 from journey.css:317 while its sibling .thermii-screen-intro
took var(--t-body)/var(--lh-body) from here — measured 23.25px against
24px leading on screens sitting side by side in the same journey. Adding
it to the group is the whole fix; the `body ` prefix these already carry
puts them at (0,1,1), which clears journey.css's (0,1,0) without needing
!important. It also closes a 701-900px hole where journey's hard-coded
15px held on while the token had already stepped down to 14px. */
body .thermii-version-subtitle,
body .thermii-screen-intro,
body .eq-subtext,
body .eq-note,
body .thermii-option-copy,
body .thermii-version-card p {
font-size: var(--t-body);
letter-spacing: var(--tt-body);
line-height: var(--lh-body);
}
/* ── Small: dense rows and tables ── */
body .eq-sum-row .eq-ans-q,
body .eq-sum-row .eq-ans-v,
body .kit-name,
body .thermii-side-copy,
body .thermii-guide-status {
font-size: var(--t-small);
line-height: 1.5;
}
body .kit-name {
font-size: var(--t-h4);
letter-spacing: var(--tt-h3);
}
/* ── Micro: uppercase labels and metadata ── */
/* `.kit-sku` AND `.kit-detail` LEFT THIS GROUP ON 2026-09-08, and the
grouping was the defect Loz spotted: "I want the subtext and SKU text in
the product kits to match the subtext in 'Need more tools'... in font
style, sizing, letter spacing."
Everything else about them already matched — measured, both are Sora
12px/400, line-height 16.8px, #6b7280 — because the 2026-09-07 rule below
unified size, line-height and colour with `.wopt-note`. The one property
it did not cover was TRACKING, and these two were sitting here at
**0.84px against the note's `normal`**, because they had been grouped with
the uppercase eyebrows. A SKU and a product description are neither
uppercase nor labels: 0.07em is right for `.fo-rec-badge` and
`.thermii-stage-kicker`, which are set in caps, and wrong for a sentence.
Their size and line-height come from that later rule, so nothing else
moves by leaving here. */
body .fo-rec-badge,
body .thermii-project-label,
body .thermii-stage-kicker {
font-size: var(--t-micro);
letter-spacing: .07em;
line-height: 1.4;
}
/* Prices stop shuffling as quantities change. */
body .kit-unit-price,
body .kit-line-price,
body #wKitTotal,
body #kitTotal,
body .eq-input {
font-variant-numeric: tabular-nums;
}
}
@media screen and (max-width: 900px) {
:root {
--t-display: clamp(24px, 5.4vw, 30px);
--t-h2: 20px;
--t-h3: 17px;
--t-h4: 15px;
--t-body: 14px;
}
/* --t-h4 previously had no mobile step, which left tile labels at the desktop
16px while h2, h3 and body all stepped down. journey.css tried to correct
that with `.fo-label{font-size:15px}` at 700px, but at (0,0,1,0) it was
outranked everywhere and never applied. The step belongs here, in the scale,
so .fo-label, .thermostat-name and .kit-name all move together. */
body .electric-covering-row:not(.room-tiles-grid) .fo-label {
/* thermii.css hard-codes 16px on these eleven rows at (0,0,3,0). It carries
no !important, so matching its specificity and adding `body` is enough to
hand the decision back to the token. The two ID-scoped exceptions in
journey.css — room tiles at 15px, the seven-tile floor-covering row at
14px — still outrank this and are left as the deliberate density choices
they are. */
font-size: var(--t-h4);
}
}
/* ── Reclaiming the display scale below 700px ─────────────────────────────
thermii.css pins two of the four display classes:
@media(max-width:700px){ .kb-section-title{font-size:20px!important}
.eq-title{font-size:20px!important} }
so below 700px the scale above was silently discarded and question headlines
dropped to 20px while .eq-summary-title still followed the scale at 24px —
the summary ended up larger than the question it summarised.
thermii.css is byte-locked to baseline/thermii.monolith.html by the parity
harness (tests/verify-parity.mjs asserts the two are equal), so those
declarations cannot be deleted at source. An !important declaration cannot be
beaten by specificity or by load order — only by another !important. This
block is therefore deliberate, and scoped as tightly as it can be: the two
selectors that are actually pinned, at the one breakpoint where the pin
applies.
Not included, on purpose: .eq-summary-title and .thermii-version-body h1 are
not pinned and already follow the scale, so they are left without !important;
and between 700px and 900px nothing is pinned, so no override is needed there.
Delete this block if thermii.css is ever unlocked and the two declarations are
removed at source. That is the real fix; this is the one that is available. */
@media screen and (max-width: 700px) {
body .eq-title,
body .kb-section-title {
font-size: var(--t-display) !important;
}
}
/* ---------------------------------------------------------------------------
Kit screen: sticky pricing sidebar
---------------------------------------------------------------------------
The kit screen is a long scroll — hero, room summary, heat requirement, then
a 12-item list — with the total and every call to action stranded at the
bottom. Moving them into a column that stays put means the price and the Add
to Cart button are on screen the whole way down.
The obstacle is that #kitPanelHeading / #kitPanel / #kitFooterCard /
#kitPrintRow are siblings of the WHOLE journey: their shared parent is
#electricPanel, which also holds every question step, the progress bar, the
summary and its CTA. Gridding that parent unconditionally would restructure
the entire journey. So the grid is scoped to the kit screen via the body
marker navigation.js already sets. On that screen every other child is
display:none, and display:none children are removed from grid flow entirely,
so only the four kit blocks get placed.
THE PDF IS NOT AFFECTED, which is worth stating because it is the usual trap
on this screen. legacy-core.js clones #kitPanel and #kitFooterCard THEMSELVES
into a fresh 760px #thermiiPdfRoot — not their parent — so no grid container
exists there and the grid-column declarations are inert. Only `position:
sticky` survives cloning, and it is explicitly reset at the end of this
block. Verified against the cloneInto() list in legacy-core.js:6034-6078.
WIDTH — the guard was 1181px and that was too low. Re-measured 2026-08-07:
viewport list, measured
1180 784 single column, full width
1181 391 sidebar appears — 393px lost to one pixel of viewport
1336 546
1920 650 the old 1400px shell cap, so this was the ceiling
The sidebar costs ~320px the moment it appears, and the old 1400px shell cap
meant the viewport could never hand that back: the kit list was NARROWER at
every desktop size than it was at 1180px, and worst of all in the 1181-1400
band where most laptops sit. Introducing a sidebar at a breakpoint always
costs its own width — that part is unavoidable — so the fix is to spend it
only where the list can still afford it.
At 1500 the list lands at ~714px and grows to ~974 against the new 1720px
shell cap, so it is never worse than the old ceiling and usually far better.
Below 1500 the layout simply stacks full width, which is what every screen
under 1181 already did.
A default .kit-row needs ~530px (78+220+74+86 plus gaps). The list now
clears that everywhere the sidebar exists, so the compressed 4-column
variant below is no longer strictly required — it is kept because its 1fr
name column absorbs the extra width harmlessly, and swapping row styles is
a visual change that belongs in its own commit, not this one. */
@media screen and (min-width: 1500px) {
/* `grid-template-rows` is not decoration. The sidebar has to span every left
column row to have anything to stick against, and `grid-row: 1 / -1` only
spans when rows are EXPLICIT — against an implicit grid, `-1` resolves back
to line 1, so the card silently occupies row 1 alone. Measured symptom:
its 1060px height inflated row 1 and pushed the kit list 1000px down the
page. Six rows is comfortably more than the four blocks this screen ever
shows; unused rows collapse to zero.
Which is also why row-gap is 0 — with a gap, every empty row would add one.
The blocks carry their own vertical margins already. */
body[data-thermii-screen="electric-kit"] #electricPanel,
body[data-thermii-screen="water-kit"] #waterPanel {
display: grid;
grid-template-rows: repeat(6, auto);
/* 360 SINCE 2026-09-04 (Loz), and the history matters because the number
has moved three times.
300 gave the summary's trust pairs 119px columns and wrapped them to
three lines. 330 still wrapped them to two. 500 was measured off the
design — its sidebar spans 1207-1711 of a 1738px page, ~30% of the
content width — and is the NARROWEST width at which the paired trust
block does not wrap at all. Loz then found 500 too wide on the live
site.
So the pairing was the thing forcing the width, not the width being
wrong: `.tks-trust` now STACKS (see journey.css) and nothing wraps at
360 either. The card grows ~90px taller, which is the trade he chose.
The list keeps ~1340px at his 1900, far past the ~530px a kit row
needs. */
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
align-items: start;
column-gap: 20px;
row-gap: 0;
}
body[data-thermii-screen="electric-kit"] #kitNav,
body[data-thermii-screen="electric-kit"] #kitPanelHeading,
body[data-thermii-screen="electric-kit"] #kitPanel,
body[data-thermii-screen="electric-kit"] #kitPrintRow,
body[data-thermii-screen="water-kit"] #wKitNav,
body[data-thermii-screen="water-kit"] #wKitPanelHeading,
body[data-thermii-screen="water-kit"] #wKitPanel,
body[data-thermii-screen="water-kit"] #wKitPrintRow {
grid-column: 1;
}
/* max-height keeps a tall card usable: without it a sidebar taller than the
viewport pins its top and buries the CTAs off the bottom edge.
`grid-template-columns: 1fr` because #kitFooterCard is ITSELF a two-column
grid — the green total block beside the "what next" panel, which is right
for a full-width footer and impossible at 300px. Left alone it overflowed
362px into 300 and crushed the panel to 46px wide. */
body[data-thermii-screen="electric-kit"] #kitFooterCard,
body[data-thermii-screen="water-kit"] #wKitFooterCard {
position: sticky;
/* CLEAR THE STICKY HEADER (Loz, 2026-09-23). `.kb-logo` is
`position: sticky; top: 0; z-index: 40` (thermii-skin.css) and measures a
stable 78px across the whole sidebar range (1500-1850px). At `top: 20px`
the card pinned 58px UNDER it, so scrolling down cropped the card's top —
the "Your Kit Summary" band was buried behind the header. 78 + a 20px gap
(the rhythm the card already had from the viewport top) = 98px, so the
card now stops just below the header's gradient line. If the header height
ever changes, this 98 and the max-height below move with it. */
top: 98px;
grid-row: 1 / -1;
grid-column: 2;
grid-template-columns: 1fr;
/* the header eats the top 78px and a 20px foot keeps the CTAs off the edge */
max-height: calc(100vh - 118px);
margin-top: 0;
overflow-y: auto;
}
/* FIVE COLUMNS, NOT FOUR — CORRECTED 2026-09-03. This reused the
narrow-screen variant on the premise that "the list column is narrow for
the same reason a phone is", and that premise does not hold: a .kit-row
has FIVE children (thumbnail, info, unit price, qty controls, line total)
and the four-column template gave the line total nowhere to go, so it
WRAPPED onto a second grid row underneath the thumbnail.
MEASURED at 1850px, which is the width Loz actually works at: columns
resolved to 68 / 1004 / 52 / 76 and the total sat at the row's left edge
on a second line. The info column alone had 1004px — there was never a
shortage of room, only a missing column. The comment three blocks up
already records that a row needs ~530px and that the list clears that
everywhere the sidebar exists; the narrow variant was simply the wrong
one to reach for.
Column widths follow the design's own header order — ITEM, QTY, UNIT
PRICE, TOTAL — with the thumbnail ahead of the item. `auto` for the
controls because the stepper and bin size themselves. */
body[data-thermii-screen="electric-kit"] .kit-row,
body[data-thermii-screen="water-kit"] .kit-row,
body[data-thermii-screen="electric-kit"] .thermii-kit-colhdr,
body[data-thermii-screen="water-kit"] .thermii-kit-colhdr {
/* A DEFINITE qty track, not `auto`: the row and the injected column
header are separate grids sharing a template, so `auto` resolved
to 126px in the row and 24px in the header and every label sat
right of its column. See the note in journey.css. */
grid-template-columns: 68px minmax(180px, 1fr) 76px 132px 84px;
}
/* Five CTA pills across a 300px column is unreadable; stack them. */
body[data-thermii-screen="electric-kit"] .kit-cta-grid,
body[data-thermii-screen="water-kit"] .kit-cta-grid {
grid-template-columns: 1fr;
}
}
/* The re-skin hid two things this layout wants back: the gradient hero
(journey.css:1344) and the kit list's category headers — Pipe, Manifold
Assembly, Controls & Temperature (journey.css:1364). Both with
`display: none !important`, so both need !important to undo.
Restoring the category headers also fixes a standing bug: they were absent
from the DOWNLOADED QUOTE too, because html2canvas rasterises screen CSS, so
customers received an undifferentiated wall of line items.
Scoped to the kit-screen body marker rather than applied globally, and that
is load-bearing. legacy-core.js writes `style.display = 'none'` on the hero
when you leave the kit screen (:1524, :1705); a global `display: block
!important` would beat that inline style and strand the banner across the
whole journey. Bounded by the marker, the rule simply stops applying and the
engine's own hiding works untouched. */
body[data-thermii-screen="electric-kit"] #kitPanelHeading,
body[data-thermii-screen="water-kit"] #wKitPanelHeading {
display: block !important;
}
/* FLEX, NOT BLOCK, ON SCREEN (corrected 2026-09-03). `block` was only ever
the value picked to UNDO the skin's `display: none` — it was not a choice of
block over flex, and it quietly broke the row the engine designed:
legacy-core.js writes `display:flex; align-items:center;
justify-content:space-between` inline (:1174 and :4578) so the label and
count sit left and the collapse chevron sits right. Restored as a block, the
children stacked and THE CHEVRON DROPPED ONTO ITS OWN LINE under the label —
visible in every screenshot of this screen and mistaken for the design's
own until the cascade was traced.
THE PDF CLONE KEEPS `block`, deliberately. Chrome cannot fragment flex
containers across printed pages — css/thermii.css's print block already
makes this screen's tall flex columns block-level for exactly that reason —
and while a one-line header is unlikely to be split, the printed quote is
not the place to find out. Screen gains the fix; paper stays byte-identical.
`.kit-category-header` also stays block: it is different markup and nothing
here has established that it was built as a flex row. */
body[data-thermii-screen="electric-kit"] .wkit-cat-hdr,
body[data-thermii-screen="water-kit"] .wkit-cat-hdr {
display: flex !important;
}
body[data-thermii-screen="electric-kit"] .kit-category-header,
body[data-thermii-screen="water-kit"] .kit-category-header,
#thermiiPdfRoot .wkit-cat-hdr,
#thermiiPdfRoot .kit-category-header {
display: block !important;
}
/* ---------------------------------------------------------------------------
Kit screen: bring the four panels onto the current palette
---------------------------------------------------------------------------
The kit screen still carried the pre-reskin styling — a peach room card with
an orange border, a green Add to Cart, an orange Save button and a red-
outlined Guides button. Everything here moves to the gradient/navy/neutral
set used by the rest of the journey.
!important is unavoidable on most of it, and it is worth being precise about
why rather than reaching for it by habit: the room card, the heat panel and
the CTA buttons are BUILT BY legacy-core.js with their colours written as
inline style attributes on the generated markup. That file is byte-locked,
and unlike index.html — where the parity contract ignores `style`, so the
hero's inline sizing was simply deleted — a locked script's output cannot be
edited at source. Inline beats every stylesheet, so !important is the only
instrument left. The hero rules below carry no !important precisely because
that markup lives in index.html and was stripped instead.
Scoped to the kit-screen marker throughout, so none of it can reach the
summary screens or leak into the rest of the journey. */
/* Hero ---------------------------------------------------------------------- */
/* !important here, unlike the title and subtitle below, because legacy-core.js
writes `background: transparent; border-radius: 0; padding: 28px 36px`
straight onto this element. The banner's colour was never CSS at all — it
came from the .banner-wave-bg SVG behind it, so hiding that wave without
putting a real gradient on the element leaves the hero completely blank.
The two must move together. */
body[data-thermii-screen$="-kit"] #kitPanelHeading,
body[data-thermii-screen$="-kit"] #wKitPanelHeading {
/* 26px, DOWN FROM 34 (Loz, 2026-09-08): "reduce the height of the overall
panel". The band's content is 80px tall — the 30px title line, its 2px
margin and the subtitle's two 24px lines — so 26px each side puts the
panel at 132px against the 171 he was looking at, a 39px cut WHILE the
subtitle gains a line. It is also shorter than the 124 it measured with a
one-line subtitle and no reference badge at all.
26 is this screen's own inner padding — `.thermii-heat-main` takes the
same — rather than a number picked to hit a height. The avatar is 52px and
the badge 34, so neither sets the band; the text does, which is why the
arithmetic above is the whole story. */
padding: 26px 38px !important;
border-radius: 16px !important;
background: var(--thermii-gradient) !important;
}
/* The wave was drawn for a full-bleed banner. In a rounded card at this width
it reads as an artefact rather than a flourish — and a flat gradient is what
the design calls for. */
body[data-thermii-screen$="-kit"] .banner-wave-bg {
display: none !important;
}
body[data-thermii-screen$="-kit"] .kit-hero-title {
font-size: 26px;
font-weight: var(--thermii-font-weight-display);
line-height: 1.25;
letter-spacing: -.01em;
}
body[data-thermii-screen$="-kit"] .kit-hero-sub {
font-size: 15px;
line-height: 1.55;
opacity: .94;
}
/* WHITE ON THE GRADIENT, BOTH JOURNEYS (Loz, 2026-09-24). The water hero is
rebuilt by the engine with its text white inline; electric's is static
markup (index.html:873) with no colour, so it read navy on the gradient.
The hero is hidden in print (css/thermii.css), so this never reaches paper. */
body[data-thermii-screen$="-kit"] .kit-hero-title,
body[data-thermii-screen$="-kit"] .kit-hero-sub {
color: #fff;
}
/* ── AND THE QUOTE REFERENCE READS A SIZE UP (Loz, 2026-09-08) ──────────────
"Increase the size of the Quote Ref box/text slightly."
15px IS THE SUBTITLE'S OWN SIZE, so the reference now reads at the same
weight of voice as the line beside it rather than being the smallest thing
on the panel — a relationship rather than a step picked by eye. The label
keeps its rank a size below at 13px (it was 12 against 13). The padding and
radius grow with the text: 8/16 and 10px against 7/14 and 9px.
HIS DESIGN GOES FURTHER and this deliberately does not follow it all the
way: attach4.jpg sets the reference as a small uppercase label ABOVE a
rounded capsule whose text solves to roughly 16-18px with tracking. He asked
for slightly bigger, not for the two-part treatment, so the box keeps its
shape. Restructuring it is a separate ask. */
body[data-thermii-screen$="-kit"] .trm-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
padding: 8px 16px;
border-radius: 10px;
background: rgba(255, 255, 255, .18);
font-size: 15px;
font-weight: 500;
}
body[data-thermii-screen$="-kit"] .trm-badge .trm-badge-label {
font-size: 13px;
}
/* ── THE QUOTE REFERENCE GOES TO THE FAR RIGHT (Loz, 2026-09-08) ────────────
"Move the Quote/Ref box over to the far right." His design has it there:
attach4.jpg puts the reference at the right-hand end of the band, vertically
centred against the text, where the app had it under the subtitle. Measured
on the design at 1:1 — its "QUOTE REF:" ink runs x 969..1061 of a band
ending at 1171, i.e. hard right.
js/thermii-kit-screen.js moves the node out of the text stack into the flex
row the engine emits, and marks that row — the badge cannot be pushed right
from inside a sibling. `margin-left: auto` then does it, with the row's own
`align-items: center` handling the vertical centring, so nothing needs
positioning and the badge can never overlap the text. Measured after: 38px
from the panel's right edge (its own padding) and 0px off the row's centre.
THE `margin-top` MUST GO WITH IT, or the 16px that spaced it from the
subtitle now offsets it from the row's centre line.
IT ALSO TAKES A ROW OUT OF THE STACK, which is most of the height Loz asked
to lose: the badge was 16px of margin plus a 34px box below two lines of
text, and it now costs nothing at all. */
body[data-thermii-screen$="-kit"] .thermii-kit-hero-row > .trm-badge {
flex-shrink: 0;
margin-top: 0;
margin-left: auto;
}
/* NARROW SCREENS WRAP RATHER THAN CRUSH. The row is `nowrap` as the engine
writes it, so at a phone width the badge would squeeze the text stack
instead of dropping below it; `min-width: 0` lets the stack shrink at all
(a flex item's floor is its content otherwise) and the wrap gives the badge
its own line. Measured: the badge stays on the row at 900px and drops below
it at 700, with no overflow at any width down to 375. */
body[data-thermii-screen$="-kit"] .thermii-kit-hero-row {
flex-wrap: wrap;
/* ── 36px, AND IT IS THE MASCOT'S HALO THAT SETS IT (Loz, 2026-09-08) ────
"Move the headline and subtext further away from the animated
avatar/mascot on this panel." The flex gap said 18px and the text still
looked crowded, because the gap is measured from the 52px avatar while
what a reader SEES is `.thermii-glow-ring` behind it: css/thermii.css:379
makes that an 80px disc — 14px proud of the avatar on each side — with
`filter: blur(10px)` on top, so the lit halo reaches about 24px past the
mark and was landing ON the headline. Measured before: the ring's box ran
to x=185 against a title starting at 189, i.e. 4px, with the blur over it.
36 = the ring's 14px overhang + its 10px blur + 12px of actual air. So the
visible mark now gets the clearance the old 18 appeared to promise.
THE ROW-GAP WAS INERT UNTIL TODAY and this is the correction: the engine's
inline `gap: 18px` sets BOTH axes and beat the 12px declared here for the
wrapped phone case. js/thermii-kit-screen.js strips that one property per
render now, so both values below are the ones that apply. Yesterday's note
claiming the phone gained a 12px row-gap was wrong on that detail; the
panel heights it quoted were measured live and stand. */
column-gap: 36px;
row-gap: 12px;
}
body[data-thermii-screen$="-kit"] .thermii-kit-hero-row > div:not(.trm-badge) {
min-width: 0;
}
/* ── AND THE FORCED BREAK STANDS DOWN ON A PHONE ────────────────────────────
Loz asked for the sentence to run onto a second line, which is a typographic
choice about the width he works at. At 375px the sentence already wraps
three times, so the forced break buys nothing there and costs a whole line:
MEASURED, the panel went 291px -> 295 at 375 and 251 -> 256 at 500, i.e. the
extra line outweighed the padding this change saved. Suppressing it hands
the phone the saving instead: measured 277px at 375 against 291 before
today, 14px shorter. Every one of this change's three parts then reduces or
holds the height at that width — 16px less padding, no forced line, and a
12px row-gap where the badge had a 16px margin.
`display: none` on a ` ` really does suppress the break; nothing else
about the line changes, and the copy is identical either way. */
@media screen and (max-width: 700px) {
body[data-thermii-screen$="-kit"] .kit-hero-sub br {
display: none;
}
}
/* ── THE DOCUMENTS GROUP SITS IN THE BULLETS' OWN BAND (Loz, 2026-09-08) ────
"Let's have the Documents & its 4 buttons in the same background/section
style/colour as the 4 bullets in the sidebar (#fafbfd). Keep the buttons
white, but have them go purple on mouseover."
#fafbfd IS THE SAME TINT AS THE TRUST BULLETS' BAND — the hex he gave on
2026-09-07 — so this screen still has ONE separator tint and the gate ties
the two rules together rather than letting a second value drift in.
FULL-BLEED THE WAY EVERY OTHER BAND ON THIS CARD DOES IT: a negative margin
against the CTA card's own inline padding (`12px 28px 16px`, index.html), so
-28px reaches its sides and -16px its foot. `.tks-head` and `.tks-trust`
both work exactly this way.
THE BOTTOM CORNERS ARE ROUNDED TO 11px, WHICH IS THE CARD'S OWN. The band
ends flush at the foot of a card that does NOT clip (no overflow), so square
corners would poke outside its radius — the mirror of `.tks-head`, which
rounds its TOP corners for the same reason at the other end. 11px is read
off the card's inline `border-radius:11px`, not invented.
THE LABEL'S TOP MARGIN GOES: it carries 20px for the white layout, which
would sit on top of the band's own padding and read as 38. */
/* The separator above the band, now that js/thermii-kit-screen.js marks it and
strips the engine's inline margin: this restates index.html's own value so
nothing moves at these widths, and the sidebar block below takes both it and
the band 2px further out. */
body[data-thermii-screen$="-kit"] .thermii-kit-docs-rule {
margin: 20px -28px 0;
}
body[data-thermii-screen$="-kit"] .thermii-kit-docs-band {
margin: 0 -28px -16px;
padding: 18px 28px 20px;
border-radius: 0 0 11px 11px;
background: #fafbfd;
}
body[data-thermii-screen$="-kit"] .thermii-kit-docs-band
.thermii-kit-docs-lbl {
margin-top: 0;
}
/* A MEDIA QUERY ADDS NO SPECIFICITY — so this block has to sit AFTER the base
rules above, not in the min-width:1500 block 300 lines earlier where it was
first written and where the base rule quietly beat it on source order.
Measured then: insets still 3/3/7 with the override in the CSSOM. This
project has shipped that defect once before, on the small print. */
@media screen and (min-width: 1500px) {
/* ── FLUSH TO THE SIDEBAR CARD (Loz, 2026-09-08) ─────────────────────────
"The new colour #fafbfd and horizontal line is not butt-up to the sides
and bottom of the sidebar container — there is white showing."
HE WAS SEEING THREE BOXES, NOT ONE. Measured at 1850px, the white frame
was 3px at each side and 7px at the foot, and it decomposes exactly:
sides 1px #wKitFooterCard's own border
2px .thermii-whatnext's inline `padding:2px`
foot 1px that border, again
4px the card's own `padding: 0 0 4px`
2px the wrapper's padding
The band's first bleed escaped only the INNER card's 28px/16px, which is
one level up; `.tks-head` and `.tks-trust` look flush with a single -24px
because `.kit-total-block` is a DIRECT child of the card with no wrapper
in its chain. This band sits two levels deeper, which is the whole
discrepancy. So: 28 + 2 = **30** at the sides, 16 + 2 + 4 = **22** at the
foot, landing the band's border box on the card's padding box to the
pixel. Measured after: 1px, 1px, 1px — the card's own border, exactly
what the trust band above it shows.
THE WRAPPER'S 2px COSTS NOTHING TO COVER, and that was checked rather
than assumed: `.thermii-whatnext` computes background-image `none`,
background-color transparent, radius 0 and no shadow — the "ONE CARD, NOT
TWO" work neutralised its gradient — and it holds exactly ONE child. So
those 2px were showing the card's white, not a brand element.
THE CARD'S 4px IS ESCAPED, NEVER EDITED. CLAUDE.md records that bottom
4px as deliberately kept when the top one went, so the negative margin is
the only legal route to it.
── THE PADDING GROWS WITH THE MARGIN, AND THIS IS THE PART THAT WOULD
HAVE SHIPPED WRONG. The band's `padding: 18px 28px 20px` is the exact
COUNTERWEIGHT to its -28px: it re-insets the Documents label and the 2x2
grid to the same 298px column the "Add Kit Items to Cart" and "Save"
buttons occupy, and those two are direct children of the CTA column, not
of the band. Moving the margin alone widens the band's content box to
302px, shifting the label 2px left and growing each button from 144 to
146 — a visible misalignment with the buttons directly above. 30 and 26
keep the content EXACTLY where it was: measured after, the grid is still
1440..1738, its buttons still 144px, still 0px off the primary's edges,
and still 39px from the card's foot. Only the tint and the line moved.
── 13px, NOT 14, AND THE .tks-head PRECEDENT IS BACKWARDS FOR A CLIPPED
BOX. An overflow clip runs at the PADDING edge with each radius reduced
by the border width, so on this 14px/1px card the clip curve is 13px. At
14 the band's own arc would sit outside that curve and the card's white
would show between the two; at 13 they coincide. (Below 1500 there is no
clip at all — `overflow: auto` lives in this very block — and 13 is also
the card's inner curve there, so one number serves both.)
── SCOPED TO THE SIDEBAR, DELIBERATELY. Between 701 and 1499px the footer
card is a two-column grid and the CTA column is capped at `max-width:
900px` and CENTRED, so a fixed -30px lands ~50px short of the card's edge
while the -22px would still carry the tint to its foot: flush on one axis
only, with a rounded tint corner floating mid-card. Measured at 1200px:
50px side insets against a 1px foot. Below 1500 the band therefore keeps
the inset look it has today, which is consistent on all four sides.
Loz's ask is the sidebar; the phone case is offered, not assumed. */
body[data-thermii-screen$="-kit"] .thermii-kit-docs-band {
margin: 0 -30px -22px;
padding: 18px 30px 26px;
border-radius: 0 0 13px 13px;
}
body[data-thermii-screen$="-kit"] .thermii-kit-docs-rule {
margin: 20px -30px 0;
}
}
/* Room card and heat panel -------------------------------------------------- */
body[data-thermii-screen$="-kit"] .wkit-room-card,
body[data-thermii-screen$="-kit"] .wkit-heat-panel {
border: 1px solid var(--journey-border) !important;
border-radius: 14px !important;
background: #fff !important;
}
body[data-thermii-screen$="-kit"] .kit-room-name,
body[data-thermii-screen$="-kit"] .wkit-heat-title {
color: var(--thermii-navy) !important;
font-weight: var(--thermii-font-weight-display) !important;
}
/* The insulation pills are class-less buttons whose SELECTED state exists only
as an inline `background:#ff5b00` written by legacy-core.js — there is no
is-selected class to hook, so the attribute substring is the only handle.
It is self-maintaining: the engine rewrites the same style attribute when
the choice changes, so the rule follows the selection rather than a fixed
position.
The design shows this as a white card with a purple border and a tick. That
is not reachable — the tick element does not exist in the generated markup
and cannot be added to it — so this takes the nearest honest equivalent: the
same filled-pill treatment on the journey's selected-purple instead of the
old orange.
Longhand `background-color`, not the `background` shorthand. Measured: the
shorthand carrying a var() failed to beat the element's inline `background:
#ff5b00` even with !important, while `border-color` from the same rule
applied. The longhand wins cleanly. */
body[data-thermii-screen$="-kit"] .wkit-heat-pillwrap > button[style*="#ff5b00"] {
border-color: var(--journey-selected) !important;
background-color: var(--journey-selected) !important;
background-image: none !important;
}
/* Room card interior: align the spec pairs -------------------------------- */
/* The pairs were laid out as `display:flex; flex-wrap:wrap` with each pair
content-sized, so no two rows shared a column and the labels started at a
different x on every line. That is what made the card read as jumbled — not
the amount of information, the absence of a grid under it.
They were also PILLS: `background:#fff; border-radius:20px`. On the original
peach card those white pills were the visible structure. Turning the card
white made them disappear and left the text floating with nothing holding
it — so the earlier palette change is what exposed this. Since the design
calls for no pills, they are dropped properly here and a real grid does the
work the pill outlines used to.
Everything is hooked by inline-style substring because none of this markup
carries a class — it is generated by legacy-core.js as bare divs and spans.
The substrings chosen are the structural ones (`flex-wrap:wrap` for a pair
row, the 0.6px tracking for a group heading), not colours, so they survive a
value change. */
/* `auto-fit` with a real minimum rather than a fixed column count, because the
right count depends on whether the sticky sidebar is present and a fixed
number gets it wrong on one side or the other. Measured the natural width of
every spec pair at its actual type sizes: the widest is "Pressure Drop:
≈12.1 kPa per loop" at 211px. Beside the sidebar the card has 588px inside,
where three columns would be 182px each and wrap every row; two give 284px.
Full width it has ~722px and fits three. 220px is that 211px measurement
plus a little headroom, and lets the browser pick. */
body[data-thermii-screen$="-kit"] .wkit-room-card div[style*="flex-wrap:wrap"] {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 9px 20px !important;
align-items: baseline;
}
/* Pairs: strip the pill, keep label and value on one line, let long values
wrap instead of forcing the column wider. */
body[data-thermii-screen$="-kit"] .wkit-room-card div[style*="flex-wrap:wrap"] > span {
display: flex !important;
align-items: baseline;
gap: 6px !important;
padding: 0 !important;
border-radius: 0 !important;
background: none !important;
white-space: normal !important;
}
body[data-thermii-screen$="-kit"] .wkit-room-card div[style*="flex-wrap:wrap"] > span > span:first-child {
flex: 0 0 auto;
color: var(--journey-muted, #596584) !important;
}
body[data-thermii-screen$="-kit"] .wkit-room-card div[style*="flex-wrap:wrap"] > span > span:last-child {
min-width: 0;
}
/* Group headings become real section rules. The first one has no divider —
nothing above it to separate from. */
body[data-thermii-screen$="-kit"] .wkit-room-card div[style*="letter-spacing:0.6px"] {
margin: 18px 0 10px !important;
padding-top: 14px;
border-top: 1px solid var(--journey-border);
color: var(--journey-muted, #596584) !important;
font-size: 11px !important;
}
body[data-thermii-screen$="-kit"] .wkit-room-card div[style*="letter-spacing:0.6px"]:first-of-type {
margin-top: 4px !important;
padding-top: 0;
border-top: 0;
}
/* Kit summary block (injected by js/thermii-kit-summary.js) ----------------- */
/* The generated .kit-total-block centres everything, which suits a lone total
but not a summary with aligned figures — so the injected parts opt out
rather than the block being re-centred, leaving the existing total markup
untouched. */
body[data-thermii-screen$="-kit"] .tks-head {
display: flex;
align-items: center;
gap: 10px;
margin: -28px -24px 18px;
padding: 16px 22px;
border-bottom: 1px solid var(--journey-border);
background: #f6f8fd;
/* 14px, NOT 12: the band now sits flush against the card's top, and the card
is `overflow: auto` with a 14px radius, so it CLIPS this band to its own
corners. A tighter radius here would leave two white slivers where the
band's corner falls inside the card's. Larger-or-equal is safe; the clip
decides the shape. */
border-radius: 14px 14px 0 0;
color: var(--thermii-navy);
font-size: 17px;
font-weight: var(--thermii-font-weight-display);
text-align: left;
}
body[data-thermii-screen$="-kit"] .tks-head svg {
width: 22px;
height: 22px;
flex: 0 0 22px;
color: var(--journey-selected);
}
body[data-thermii-screen$="-kit"] .tks-lines {
margin-bottom: 18px;
padding-bottom: 16px;
border-bottom: 1px solid var(--journey-border);
text-align: left;
}
/* ── THE PRODUCT LINES' SUBTEXT MATCHES THE TOOLS' (Loz, 2026-09-07) ────────
"Use the same style subtext that is on the 'Need More Tools' section for the
descriptions and SKUs on the kit summary products. Also remove the grey
border from the product thumbnails."
The reference is `.wopt-note` in the optional-tools list, which the engine
writes inline as **12px / #888 / line-height 1.4** — against these two lines
at 11px / #6f6f6f. So they step UP a size and take the quieter, roomier
setting.
ONE DEPARTURE FROM "the same", AND IT IS DELIBERATE: the grey is #6b7280,
not the tools' #888. #888 measures **3.54:1** on white, under WCAG 1.4.3
AA's 4.5:1, and #6f6f6f — what these lines have today — is 5.3:1, so
copying the colour literally would REGRESS the contrast of every product
description and SKU on the screen. #6b7280 is 4.83:1 and is the grey this
screen already uses for the room card's note, its column headings and the
heat disclaimer. **`.wopt-note` is brought to the same value in the same
breath**, so the two really are one style rather than two that merely look
alike — and that fixes the tools list's own failing contrast while it is
being used as the reference.
The thumbnail's `1px solid #e7eaf1` goes; the 9px radius stays, so the
product image keeps its shape without a box drawn round it. */
body[data-thermii-screen$="-kit"] .kit-detail,
body[data-thermii-screen$="-kit"] .kit-sku,
body[data-thermii-screen$="-kit"] .wopt-note {
font-size: 12px !important;
line-height: 1.4 !important;
/* TRACKING IS PART OF THE STYLE (Loz, 2026-09-08). The three were one style
in size, line-height and colour and still read differently, because
`.kit-sku`/`.kit-detail` were tracked 0.84px by the uppercase-label group
above while `.wopt-note` sat at `normal`. Declared here as well as
removed there, so "one style" is literally true of every property a
reader can see — and because letter-spacing INHERITS, which means an
ancestor gaining tracking later would otherwise split them again. */
letter-spacing: normal !important;
color: #6b7280 !important;
/* ONE WEIGHT, 400 (Loz, 2026-09-23). The manifold row's .kit-detail carries an
inline font-weight:500 from the engine (legacy-core.js:4615) that the rest
of this rule never overrode, so it read slightly bolder than every other
product subtext. Forcing 400 here levels it; the others were already 400. */
font-weight: 400 !important;
}
/* THE SKU IS A STEP LIGHTER THAN ITS DESCRIPTION (Loz, 2026-09-23). A product
code is reference metadata most customers skim past, so it sits below the
description grey (#6b7280, kept) rather than level with it: bold name ->
mid-grey description -> lighter-grey SKU. #868da0 is 3.32:1 on white, under
AA's 4.5 for 12px — accepted as incidental text, Loz's call after seeing the
number. Same specificity as the shared rule above, later in the file, so it
wins the SKU while leaving .wopt-note and .kit-detail at #6b7280. */
body[data-thermii-screen$="-kit"] .kit-sku {
color: #868da0 !important;
/* a touch more air above the SKU than the engine's inline 3px (Loz,
2026-09-23). Paper keeps 3px via the print reset below, so the PDF's
page-break model (which measures cloned kit-row heights) is unchanged. */
margin-top: 6px !important;
}
/* Paper keeps the engine's 3px. Same selector and !important as the screen rule
but LATER in this file, so it wins in native print; and legacy-core.js's
re-emitter scopes it to #thermiiPdfRoot for the clone (which renders screen
media), where the id makes it win there too. */
@media print {
body[data-thermii-screen$="-kit"] .kit-sku {
margin-top: 3px !important;
}
}
/* MANIFOLD A / B EYEBROW IN THE THERMII PURPLE (Loz, 2026-09-23) — was an
off-brand teal (#3eafd4, inline on manifest-locked legacy-core.js:4608), the
one label in the kit not in the app's purple eyebrow language. It is the only
bare