/* ========================================================================== datetime.css — site-local additions, loaded after the four shared sheets. shared/styles/ is the design system and is not forked. This file exists for rules that are true of site-datetime's page shapes only, and it is loaded from src/templates/partials/head-extra.html, i.e. inside base.html's `head_extra` block, which renders after tokens/base/layout/calculator.css. Every custom property used here is declared in shared/styles/tokens.css. IT MUST NOT CHANGE ANY RESERVED AD GEOMETRY. --slot-h / --slot-w and the .ad-slot box model belong to layout.css; measured CLS is 0 and that is a constraint, not an outcome (Design-System.md section 5). Nothing below touches a slot's width, height or padding — only the space above one. ========================================================================== */ /* -------------------------------------------------------------------------- P3 — 96px minimum separation between a navigation control and an ad. Ad-Placement-Policy.md section 4; AdSense-Compliance.md finding R4. The 16 hand-built tool pages emit `ul.quick-links`, a centred row of accent-coloured pill links. Before this rule the result slot was its immediately following sibling and the gap from the bottom of a pill to the top of the "Advertisement" label was 24px (.quick-links has no bottom margin; .ad-slot--result has margin-block: var(--sp-6)). A user reaching for a link 24px above a 300x250 is the exact pattern Google's prohibition on ads "adjacent to navigational or other action items" is written about. calculator.html now emits the "Rebuilt ... conventions last checked" line between the two. This adds the hairline rule and the space: pill bottom + --sp-4 (16px) margin above the meta line + 1px hairline rule + --sp-4 (16px) padding below the rule + ~19px the meta line itself at --fs-xs + --sp-16 (64px) margin above the slot = ~116px to the top of the Advertisement label. The selector is deliberately chained: on a generated page there are no pills, so the meta line stays a plain date line and the slot keeps its normal --sp-6 margin. Only the pages with the adjacency problem pay for it. -------------------------------------------------------------------------- */ .quick-links + .page-head__meta { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: var(--bw) solid var(--border); } .quick-links + .page-head__meta + .ad-slot--result { margin-block-start: var(--sp-16); } /* -------------------------------------------------------------------------- FRESHNESS REFRESH — the reserved hero line box -------------------------------------------------------------------------- src/calculators/lib/freshness.js recomputes this page for the visitor's date when the build date has rolled over. Rewriting the hero's text can change how many lines it wraps to: measured at 375px, "Saturday, 19 September 2026" occupies two lines at 60.72px while "Saturday, 3 October 2026" fits on one at 30.36px, and that 30px collapse moves everything below the panel — including the reserved result ad box. .result__value--text carries min-height: 0 in shared/styles/calculator.css, so nothing stops it. Two lines at line-height 1.15 is 2.3em; reserving that makes the box height independent of the answer's length. IT IS SCOPED TWICE, on purpose: * to this sheet, so site-fitness and site-grades — which share calculator.css and contain the build date zero times — are untouched; * to [data-fresh-refresh="pending"], which the inline pre-paint script in partials/head-extra.html sets ONLY when the browser's date differs from the build date. On the overwhelmingly common no-rollover path the attribute is never set, this rule never matches, and the page's layout is byte-identical to what it is today. The reservation therefore costs a blank line to nobody except the visitor who is about to see the hero change, and for them it exists from first paint, so the change shifts nothing. -------------------------------------------------------------------------- */ [data-fresh-refresh="pending"] .result__value--text { min-height: 2.3em; } /* -------------------------------------------------------------------------- ...AND THE THREE OTHER BOXES A TEXT SWAP CAN RESIZE The hero reservation above was measured and it works — hero box height changed on 0 of 234 refreshing pages. It was also the ONLY reservation, and the hero is not the only thing that rewraps. Measured on a rolled-over build at 375px: .result__sub sits between the reserved hero and the result ad slot, inside the viewport, so a 1↔2 line flip here is a layout shift Chrome actually counts; the two long-date
rows of the working ("Wednesday, 19 August 2026" → "Thursday, 20 August 2026") gained or lost a line on 28 of 234 pages and moved the result ad slot by ±21.68px. Both are single-value boxes with a known worst case of two lines, so both can be reserved the same way the hero is: fix the line-height so the arithmetic is ours, then reserve two of them. The line box then holds whichever wrapping the answer needs and the box height stops depending on the answer's length. Only the two
s that carry a full weekday-and-date string are selected — the ISO, US and day-first rows are far too short to wrap at any width the site supports, and reserving a blank line under each of them would be whitespace bought for nothing. The cost is paid ONLY by a visitor whose date has rolled over, and only as at most one blank line under the hero and under two rows of the working. The alternative is those elements moving under an ad slot. NOT reserved: the prose paragraphs. Their line count is a function of the rendered text and no static value can stand in for it. Their reflow is handled by making the refresh land before first paint instead — see the blocking="render" note in partials/head-extra.html. -------------------------------------------------------------------------- */ [data-fresh-refresh="pending"] .result__sub, [data-fresh-refresh="pending"] .calc__breakdown dd[data-fresh-fmt="full"] { line-height: 1.45; min-height: 2.9em; /* two lines at the line-height set immediately above */ }