with data-label cells on wide tables, and
rowcard--now / --today / --soon on the "how soon" cards.
Fayez's review of the first pass: the whole page centred; the reviewed-by line in a box; card
grids with no empty slots (4 tiles as 2x2); less space between sections; and no side-by-side
halves that leave a blank patch under the shorter one. So a guide is one centred reading
column, and every section stacks: heading, text, then its table, list or cards.
*/
/* One centred column: 760px of content, about 72 characters of body text. Breadcrumb, chapter
nav, intro, sections, callout, FAQ and related guides all sit in it. The hero keeps its own
centred block, and the closing booking band stays full width. */
.guide-v2 { --col: 760px; --gap: clamp(32px, 4vw, 56px); }
.guide-v2 main > .wrap,
.guide-v2 main > :not(.hero):not(.ctaband) .wrap { max-width: calc(var(--col) + 2 * var(--pad)); }
/* Every section stacks. The live split layouts put a short table or list beside long text
(or the reverse), leaving a blank patch under the shorter half. */
.guide-v2 .sec__split { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 28px); }
.guide-v2 .sec__split > * { min-width: 0; }
.guide-v2 .sec__copy { position: static; }
/* Headings take one line where they fit (Fayez): no character cap, the column is the limit, and
the site heading size (--fs-h2, 40px) so 146 of the 174 section headings fit (80 did). Longer
ones wrap into balanced lines. */
.guide-v2 :is(.sec .sec__h, .head__h) { max-width: none; font-size: var(--fs-h2); text-wrap: balance; }
.guide-v2 .sec__top { margin-bottom: clamp(20px, 2.4vw, 28px); }
.guide-v2 .sec__editorial .sec__h { margin-bottom: 16px; }
.guide-v2 .head { margin-bottom: clamp(18px, 2.2vw, 28px); }
/* The column is the measure, so text fills it rather than stopping short of its right edge. */
.guide-v2 :is(.sec p, .sec .list, .sec__body, .sec__after, .faqwrap > *, .faq__a, .intro__in > *) { max-width: none !important; }
/* Card grids: two across in the column, and an odd last card takes the whole row, so 4 cards
read 2x2 and no row ends in empty slots. Phones stay one column. */
.guide-v2 :is(.rowcards, .acts, .tris) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.guide-v2 :is(.rowcards, .acts, .tris) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* The reviewed-by line is a box, and the red flag stacks under it. */
.guide-v2 .intro .reviewed {
margin: 0; padding: 12px 16px; font-size: 14px;
border: 1px solid var(--line-strong); border-radius: var(--r-card);
}
.guide-v2 .intro .redflag { margin-top: 12px; }
/* The closing booking band is centred too, a bookend to the centred hero: mark, label, heading
and line, then the one column of buttons (section 6) with the review line under it. */
.guide-v2 .ctaband__in {
grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center;
max-width: calc(var(--col) + 2 * var(--pad));
}
.guide-v2 .ctaband .mark { margin-inline: auto; }
.guide-v2 .ctaband__in .label { justify-content: center; }
.guide-v2 .ctaband .label::after { display: none; }
.guide-v2 .ctaband .lede { margin-inline: auto; }
.guide-v2 .ctaband__actions { justify-self: center !important; }
/* Text links: section 10 (site-wide since 2026-09-28). */
/* The information disclaimer (section 8) sits inside the reviewed-by box as its second line,
aligned with the text beside the photo. */
.guide-v2 .intro .reviewed:has(+ .reviewed__note) {
border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 4px;
}
.guide-v2 .intro .reviewed + .reviewed__note {
margin: 0; padding: 0 16px 12px 72px;
border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card);
}
@media (max-width: 599px) { .guide-v2 .intro .reviewed + .reviewed__note { padding-left: 16px; } }
/* Type: the guides' larger sizes (Fayez's fourth review) are now the site's own scale, so they
live in the :root tokens and section 10, not here. */
/* The emergency advice pages' own parts: the numbered steps read at card size, and a figure in
the figures row ("8am–8pm") stays on one line in the column. */
.guide-v2 .num__n { white-space: nowrap; font-size: clamp(30px, 2.8vw, 40px); }
/* Short notices stack tightly: the live 22px margin on the callout doubled its band's padding. */
.guide-v2 .callout { margin: 0; }
/* Phones: button groups are one column of equal widths (Fayez's rule), in the hero and in the
"In pain now?" callout. */
@media (max-width: 599px) {
.guide-v2 .hero .hero__cta { flex-direction: column !important; align-items: stretch !important; width: 100%; max-width: 340px; }
.guide-v2 .hero .hero__cta .btn { width: 100%; justify-content: center; }
}
@media (max-width: 699px) {
.guide-v2 .callout .btns { flex-direction: column; align-items: stretch; }
.guide-v2 .callout .btns .btn { width: 100%; justify-content: center; }
}
/* The chapter nav fades at its right edge instead of cutting a title mid-word. */
.guide-v2 .secnav ol {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent);
}
/* "How soon" cards, graded like the site's own triage (.tri--now/--today/--soon): call today
taupe, same day green, A&E an alert-red panel like the red flag, because it is a warning. */
.guide-v2 :is(.rowcard--now, .rowcard--today, .rowcard--soon) { border-top: 3px solid var(--line-strong); }
.guide-v2 .rowcard--soon { border-top-color: var(--taupe); }
.guide-v2 .rowcard--today { border-top-color: var(--accent); }
.guide-v2 .rowcard--today .rowcard__t { color: var(--accent); }
.guide-v2 .rowcard--now, .guide-v2 .rowcard--now:hover {
background: #FCEDEA; border-color: #F1C9C0; border-top-color: #B8321F;
}
.guide-v2 .rowcard--now .rowcard__t { color: #9E2A18; }
.guide-v2 .rowcard--now .rowcard__b { color: #3A2622; }
/* Wide tables (three or more columns: comparisons, "what we find" grids). The live CSS sizes
every table for a fee list: the row heading takes 55% and the last column never wraps, so
these ran past the page edge (cut off on phones) or crushed the heading beside them. Every
column now wraps and the columns read with equal weight. Two-column fee tables are unchanged. */
.guide-v2 .table--wide tbody th { width: 24%; }
.guide-v2 .table--wide td:last-child { white-space: normal; font-weight: 400; color: var(--t2); }
.guide-v2 .table--wide thead td { border-top: 0; background: var(--blush); }
/* Phones: each row of a wide table becomes a card, its row heading first and each value under
its column's name. The header row stays in the markup for screen readers. */
@media (max-width: 699px) {
.guide-v2 .table--wide thead {
position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.guide-v2 .table--wide :is(tbody, tr, th, td) { display: block; width: auto; }
.guide-v2 .table--wide tbody tr { padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.guide-v2 .table--wide tbody tr:first-child { border-top: 0; }
.guide-v2 .table--wide tbody :is(th, td) { padding: 0; border: 0; }
.guide-v2 .table--wide tbody th { width: auto; font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.guide-v2 .table--wide tbody td { margin-top: 10px; font-size: 15px; color: var(--t2); }
.guide-v2 .table--wide tbody td::before {
content: attr(data-label); display: block; margin-bottom: 2px;
font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3);
}
}
/* ── 8. Information disclaimer, site-wide (Fayez 2026-09-27) ──── */
/*
"This page is for general information only. It does not replace an examination or treatment
by a dentist." On every health-information page: guides, treatment pages, the emergency hubs
and indexes (tools/disclaimer.py in the site repo owns the wording and the scope). It follows
the reviewed-by line as .reviewed__note, or sits in the intro band under the hero as .note
(the implant builder's own markup, which had no style).
*/
.reviewed__note, .intro .note {
margin: 8px 0 0; font-size: 14px; font-weight: 500; line-height: 1.55; color: var(--t2); max-width: 72ch;
}
/* "Medical disclaimer:" leads in bold ink (Fayez: "use Medical Disclaimer ... and make it bolder"). */
:is(.reviewed__note, .intro .note) strong { font-weight: 700; color: var(--ink); }
.reviewed__note { max-width: none; } /* under the reviewed-by line it takes that line's width */
/* ── 9. Buttons and header actions, site-wide (Fayez 2026-09-27) ─ */
/* A hover you can see. Live, the green deepened by one shade and the outline buttons tinted 4%
grey, which read as nothing. Solid green goes black; outline goes solid green; on dark bands
green goes light mint and outline goes white. Keyboard focus gets the same change. */
.btn:is(.btn--ink, .btn--accent, .btn--alert, .btn--blue, .btn--brass):is(:hover, :focus-visible) {
background: var(--ink); border-color: var(--ink); color: #fff;
}
:is(.band--ink, .band--ink2, .band--alert, .hero--ink, .ctaband) .btn:is(.btn--ink, .btn--accent, .btn--alert, .btn--blue, .btn--brass):is(:hover, :focus-visible) {
background: var(--accent-light); border-color: var(--accent-light); color: var(--ink);
}
.btn.btn--ghost:is(:hover, :focus-visible) { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.btn--ghost-ink:is(:hover, :focus-visible) { background: #fff; border-color: #fff; color: var(--ink); }
/* Header: the phone number is a boxed button and "Book online" a solid green one, so both read
as actions at a glance (Fayez). They were plain text and a thin grey outline. */
.header__tel{color:var(--accent)}
.header__tel:is(:hover, :focus-visible) { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.btn--ink.header__book{color:#fff}
.btn.btn--ink.header__book:is(:hover, :focus-visible) { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 599px) { .header__tel { padding: 7px 12px; font-size: 14px; } }
/* Between 1100px and 1340px the menu and the two boxed actions share a tight row, and "Dental
implants" wrapped onto two lines. Menu labels stay on one line, and the actions slim down. */
@media (min-width: 1100px) and (max-width: 1340px) {
.header__actions { gap: 10px; }
.header__tel { padding: 8px 12px; font-size: 14px; gap: 6px; }
.btn.btn--ink.header__book { padding: 11px 16px; font-size: 14px; }
}
/* The address line under the booking buttons: its pin icon sat apart from text that wrapped onto
two centred lines (Fayez: "alignment broken"). The icon now travels with the first word, and
in the centred bands the line may run wider than the buttons, so it stays on one line. */
.ctaband__actions > .fine { display: block; }
.ctaband__actions > .fine svg { display: inline-block; vertical-align: -2px; margin-right: 6px; }
:is(.lp-v2, .guide-v2) .ctaband__actions > .fine { width: max-content; max-width: calc(100vw - 2 * var(--pad)); align-self: center; }
/* ── 10. One type scale on every page (Fayez 2026-09-28) ─────── */
/*
Fayez: "the font size increase but there are font discrepancies among pages. stay consistent".
His fourth review enlarged the guides' type; every page now uses the same sizes. The :root
tokens carry most of it (--fs-body 19px, --fs-small 16px, --fs-h2 40px; one step smaller on
phones); the components below set their own sizes in site.css (14-15.5px), so they join here.
*/
:is(.rowcard__b, .act__b, .tri__b, .lcard__p, .jcard__b, .tcard__p, .panel p:not(.label), .step__b, .redflag) {
font-size: var(--fs-small); line-height: 1.6;
}
/* A panel's own label () is a label, not card text: .panel p here and site.css's
.panel p (14px) had set it at 16px beside the 11px labels everywhere else (the fees and offer
cards, contact, reviews, the team page). Section 1's label size, 2026-09-28. */
.panel p.label { font-size: 11px; letter-spacing: .24em; }
:is(.rowcard__t, .tri__t) { font-size: 18px; }
.faq__a, .faq__a p { font-size: 17px; line-height: 1.65; }
/* Smoother reading (Fayez: "font discrepancy ... make the font smoother and easier to read").
It is one typeface (Manrope) throughout, but the live CSS set it four ways in the same reading
flow: some paragraphs in full black and the next in 72% grey; a section's first paragraph in
the light weight (300) with tight tracking, or shrunk to 16px; headings in the light weight
squeezed by -4.5%. Running text now has one weight (400), normal letter-spacing and one soft
near-black (82% ink), at the body size; headings are regular weight with gentler tracking. */
main :is(.sec, .prose, .lp-prose, .intro, .faq__a, .callout, .lp-doc__in) :is(p, li):not([class]):not(.redflag > p) {
font-weight: 400; letter-spacing: normal; color: var(--t-body);
}
.sec__editorial .sec__body > p:first-child,
.sec__split--prose .sec__body > p:first-child {
font-size: var(--fs-body); font-weight: 400; letter-spacing: normal; line-height: 1.65; color: var(--t-body);
}
.h2, .head__h { font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
/* Every section heading looks the same: those inside a prose block (36px), a split layout (-4.5%
tracking) and the homepage statement (weight 200) were each a step off. The fees page's are
hard-coded inline at 24px by the agency, which only !important reaches. (Bio names on the team
page stay card-sized: they are card titles.) The landers have the same rule in section 6. */
:is(.prose, .split__c) .h2, .state__h { font-size: var(--fs-h2); font-weight: 400; letter-spacing: -.025em; line-height: 1.1; }
:is(.callout, .sec__body .callout) p.callout__t { font-weight: 400; letter-spacing: -.01em; font-size: clamp(19px, 1.5vw, 21px); }
/* one size and weight on every template; the :is() outranks site.css's first-paragraph rule, which caught the
callout inside implant pages' section bodies */
:is(.rowcard__t, .tri__t, .faq__q) { letter-spacing: -.01em; }
/* Links in text read as links on every page, as on the guides (Fayez's third review): the live
style left most of them in the body-text grey with a grey underline. Brand green, a green
underline, slightly heavier; the light mint on dark bands. Class-less links only, so buttons,
cards and chips keep their own look. */
main :is(p, li, td, dd) a:not([class]):not(nav a), .reviewed a {
color: var(--accent); font-weight: 500;
text-decoration: underline; text-decoration-color: rgba(15, 94, 75, .45);
text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
main :is(p, li, td, dd) a:not([class]):not(nav a):hover, .reviewed a:hover { color: var(--accent-2); text-decoration-color: currentColor; }
.reviewed a b { color: inherit; }
main :is(.band--ink, .band--ink2, .band--alert, .ctaband, .hero--ink, .panel--ink) :is(p, li, td, dd) a:not([class]) {
color: var(--accent-light); text-decoration-color: rgba(142, 209, 188, .5);
}
/* ── 11. Phone overflow guards, site-wide (2026-09-28) ────────── */
/*
Found checking the type scale on every page type: content ran past the right edge of a phone,
and the page clips it. It predates the larger type (same result with the old sizes). A grid
column grew to fit a wide table or a 270px button; the guards let it shrink, so a wide table
scrolls inside its own box instead of being cut off, and buttons fit their card. The map panel's
320px minimum made a 4:3 box too wide (the landers had the same fix in section 6).
*/
.sec__split > *, .grid2 > * { min-width: 0; }
@media (max-width: 599px) { .pricebox .btn { min-width: 0; } }
@media (max-width: 899px) { .mapcard__map { min-height: 0; } }
/* ── 12. T02 urgent hubs and T03 emergency indexes (plan step 6, Fayez 2026-09-28) ─── */
/*
The emergency pillar, the two roots (/emergency-dentist-deepcar/, /emergency/), the service hub
and the four emergency indexes share the guides' structure, so tools/guide-refine.py (site repo)
gives them body class guide-v2 and section 7 lays them out: the centred hero, one reading column,
stacked sections. This section covers what the guides don't have: a trust strip under the hero,
link-card grids, review cards, a row of town links and, on Deepcar, a map card and the practice
photo, which moved from the hero into "Finding us on Manchester Road" (Fayez).
*/
/* Trust strip: a strip under the hero, so it keeps the page grid and one line at desktop; in the
reading column it broke into two ragged lines. Phones: it wraps, as on the landers (section 6),
instead of running off the edge mid-word. */
.guide-v2 main > .trust > .wrap.trust__in { max-width: var(--max); }
@media (max-width: 760px) {
.guide-v2 .trust__in { flex-wrap: wrap; overflow-x: visible; gap: 8px 20px; }
}
/* Link cards and review cards: section 7's rule for the guides' grids. Two across in the column,
and an odd last card takes the whole row, so no row ends in empty slots (23 area cards were
4-4-4-4-4-3, 14 symptom cards 4-4-4-2, 5 cards 3-2, 3 reviews 2-1). A link grid of three is
already one full row, so it keeps it: the guides' "Related" rows (approved) and the pillar's
three doors. Phones stay one column. */
.guide-v2 :is(.lcards:has(> :nth-child(4)), .revs) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.guide-v2 :is(.lcards:has(> :nth-child(4)), .revs) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* "Read all patient reviews" is centred under the cards, as on the landers. */
.guide-v2 .band:has(.revs) .band__foot { justify-content: center; }
/* Town links start on the column's left edge, under their left-aligned heading (they were centred). */
.guide-v2 .pills { justify-content: flex-start; }
/* Map card: the details and the map sat side by side in the column, leaving a blank patch beside
the shorter half. They stack: heading, address and facts, drive times three across (six tiles,
no empty slot), the buttons, then the map across the column at 16:9. */
.guide-v2 .mapcard { grid-template-columns: minmax(0, 1fr); }
.guide-v2 .mapcard .dirs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .guide-v2 .mapcard .dirs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guide-v2 .mapcard__map { aspect-ratio: 16 / 9; min-height: 0; }
/* The practice-front photo, under the "Finding us" text it shows (guide-refine.py PHOTO). */
.guide-v2 .sec__photo { margin: clamp(20px, 2.4vw, 28px) 0 0; border-radius: var(--r-img); overflow: hidden; background: var(--stone); }
.guide-v2 .sec__photo img { display: block; width: 100%; height: auto; }
/* Headings take one line where they fit, measured against the page grid rather than the text column
(Fayez: "this should be in one single line"). The column stays 760px so running text keeps its
measure; a heading keeps the column's left edge but may run on to the grid's right edge (196px more
at 1440px, none on phones). 50 of the 65 headings that wrapped in the column now take one line; the
longest still wrap into two balanced lines. Size is unchanged (the site's 40px). */
.guide-v2 :is(.sec .sec__h, .head__h) {
margin-right: calc(-1 * max(0px, (min(100vw, var(--max)) - var(--col)) / 2 - var(--pad)));
}
/* The chapter nav: one row that walks with the reader (Fayez's review, 2026-09-28: "keep it in a
single line, when user browse it the section should walk with that. add an arrow"). It held 6-9
long titles in a row that never scrolled, so everything past the third stayed hidden. refine.js
now scrolls the row to the chapter being read, and adds arrow buttons at its ends that step
through the rest; each shows only when there is more that way, and the row fades under it rather
than cutting a title. Every page with a chapter nav gets this; on the guide pages the row also
spans the page grid, like the trust strip, so more chapters show at once. */
.guide-v2 main > .secnav > .wrap.secnav__in { max-width: var(--max); }
.secnav__arrow {
flex: none; display: none; place-items: center; width: 36px; height: 36px; padding: 0;
border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bone); color: var(--ink);
cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.secnav.has-prev .secnav__arrow--prev, .secnav.has-next .secnav__arrow--next { display: grid; }
.secnav__arrow:is(:hover, :focus-visible) { background: var(--accent); border-color: var(--accent); color: #fff; }
.secnav__arrow--prev { margin-right: -8px; }
.secnav__arrow--next { margin-left: -8px; }
.secnav.is-js ol { -webkit-mask-image: none; mask-image: none; }
.secnav.is-js.has-next ol {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.secnav.is-js.has-prev ol {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
mask-image: linear-gradient(90deg, transparent, #000 40px);
}
.secnav.is-js.has-prev.has-next ol {
-webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* The implant builder's reviewed-by line and disclaimer (.intro .note, on the /dental-implants/
location pages) sit in one box, like the guides' reviewed-by line (Fayez: the reviewed-by line
is boxed). */
.guide-v2 .intro > .wrap > .note {
margin: 0; padding: 0 16px; max-width: none;
border: 1px solid var(--line-strong); border-block: 0;
}
.guide-v2 .intro > .wrap > .note:first-child { padding-top: 12px; border-top: 1px solid var(--line-strong); border-radius: var(--r-card) var(--r-card) 0 0; }
.guide-v2 .intro > .wrap > .note:last-child { padding-bottom: 12px; border-bottom: 1px solid var(--line-strong); border-radius: 0 0 var(--r-card) var(--r-card); }
.guide-v2 .intro > .wrap > .note:only-child { border-radius: var(--r-card); }
/* ── 13. The implant cluster on the guide design (Fayez 2026-09-28) ─── */
/*
Every /dental-implants/ page is on guide-v2 since 2026-09-28 (tools/guide-refine.py: the hub, the
guide, the T04 implant guides and the T05 treatments joined the town pages). Fayez's review of the
implant town pages: "CTA box should not blend with the content box", "reduce the gap in between
blocks", and the plain "Finding us" section, which now carries the practice photo (section 12's
.sec__photo). Scoped to the implant pages: the builder sets body data-service="implants".
*/
/* Rhythm: 51px of band padding each side (about 116px from one block's last line to the next
heading at 1280px wide) comes down to 38px, and the last paragraph's 14px margin goes. */
.guide-v2[data-service="implants"] { --gap: clamp(26px, 3vw, 40px); }
.guide-v2[data-service="implants"] .sec__body > :last-child { margin-bottom: 0; }
/* The mid-content CTA box was a pale green panel (#E4EFEA) on pale green bands (#E6EDE8), so it read
as part of the section, and its 2px left border bent round the corner radius. It is a white card
now, lifted off whichever band it sits on, with the brand green as a straight bar down its edge
(inset from the corners, so it does not follow their curve). */
.guide-v2[data-service="implants"] .sec__body .callout {
position: relative;
margin-top: clamp(22px, 2.6vw, 30px);
background: var(--paper);
border: 1px solid var(--sage-line);
border-radius: var(--r-card);
box-shadow: 0 1px 2px rgba(14, 14, 14, .04), 0 14px 32px -20px rgba(15, 94, 75, .45);
padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.8vw, 32px) clamp(20px, 2.4vw, 28px) clamp(26px, 3vw, 36px);
}
.guide-v2[data-service="implants"] .sec__body .callout::before {
content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 4px;
border-radius: 0 4px 4px 0; background: var(--accent);
}
/* ── 14. T08 Money & access (plan step 6, Fayez 2026-09-28) ─── */
/*
/fees/, /finance/, /new-patient-offer/ and /referral/. Fayez: "Guide rules, keep the tools". The
pages take body class guide-v2, so sections 7 and 12 give them the centred hero, the one 760px
column and the card grids, and money-v2 for the parts only they have: the price cards, the fee
list, the calculator, the offer card, the referral pathways and form. The markup side is
tools/money-refine.py in the site repo (and compliance-fix.py's HOURS rules for the fee list).
*/
/* Halves stack. The live two-column bands (a checklist beside the offer card, two panels side by
side, a photo beside its text, three referral pathways across) left a blank patch under the
shorter side, or crushed both into the column. Each part now takes the column's full width. */
/* The standard treatment page (body class treat-v2, section 16) stacks its halves the same way. */
:is(.money-v2, .treat-v2) :is(.grid2, .grid3, .split) {
grid-template-columns: minmax(0, 1fr); align-items: start !important; gap: clamp(18px, 2.2vw, 24px);
}
/* Photos lower: Dr Ijaz under his introduction, in the photo's own 4:3 (the split cropped it to 4:5).
His text fills the column like the rest of the page, not the half-width measure it had. */
.money-v2 .split > .split__f { order: 2; aspect-ratio: 4 / 3; }
.money-v2 .split__c :is(.split__p, p) { max-width: none; }
/* /fees/: the new-patient and emergency cards side by side above the price list, equal heights.
The emergency card's inline 14px top margin was for stacking under the other. */
.money-v2 .pricecards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: 14px; margin-bottom: clamp(32px, 4vw, 48px);
}
.money-v2 .pricecards > * { margin: 0 !important; }
/* The £85 card's pointer to the £39 offer: one line under the card's copy, set apart by a rule. */
.money-v2 .pricebox__offer {
padding-top: 12px; border-top: 1px solid var(--on-ink-line);
font-size: var(--fs-small); color: var(--on-ink-2);
}
.money-v2 .pricebox__offer b { color: #fff; font-weight: 600; }
.money-v2 .pricebox__offer a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 3px; }
/* Tables fit the column on phones: section 15, for every page on the guide design. */
/* The Book button under an open price category sits centred under its table (Fayez, 2026-09-28). */
.money-v2 .fee__body .btns { justify-content: center; }
/* /finance/: the calculator stacks, the sliders and term buttons over the result, so both keep the
column's full width instead of two 360px halves. */
.money-v2 .calc { grid-template-columns: minmax(0, 1fr); }
/* Numbered steps (tools/money-refine.py gives them the site's steps--prose variant): the list sits
under its heading like any section content. */
.money-v2 .steps--prose { margin-top: 4px; }
.money-v2 .steps--prose .step:first-child { border-top: 0; }
/* ── 15. Tables fit phones on the guide design (2026-09-28) ─── */
/*
31 of the 67 guide-v2 pages with a table ran it past its box at 390px, so it scrolled sideways
inside the box: the live .table has a 420px minimum width, which also held section 7's phone card
layout for wide tables (the implant comparisons) at 420px, and its no-wrap last column held a
long note ("Prescribed privately; you pay the pharmacy") on one line, up to 671px. Every table on
the guide design now fits its column. A price still fits its line; only longer notes wrap.
*/
.guide-v2 .table { min-width: 0; }
.guide-v2 .table td:last-child { white-space: normal; }
/* ── 16. T05 Treatment, standard variant (plan step 6, 2026-09-28) ─── */
/*
/treatments/extractions-and-wisdom-teeth/ is the only built page of the standard treatment template
(the ~40 planned treatment pages will use it). tools/guide-refine.py gives it guide-v2 (sections 7
and 12: centred hero, one 760px column) and treat-v2 for its own parts. Its halves stack by section
14's rule. Stock photos are out of the markup (the "About" photo, the related-treatment cards).
*/
/* Step cards: two across in the column and an odd last card takes the row, as the guides' cards do
(three across, each card was 245px and wrapped every other word). */
.treat-v2 .jcards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.treat-v2 .jcards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* The figures row: a price range reads on one line ("£350–£450" had broken at the dash). */
.treat-v2 .fs__n { white-space: nowrap; font-size: clamp(24px, 2.4vw, 32px); }
/* ── 17. T06 Location, service-town pages (plan step 6, 2026-09-28) ─── */
/*
The 70 /treatments/// pages (composite bonding, general dentistry, teeth
straightening, teeth whitening, veneers and crowns, in 14 towns) share the emergency town pages'
structure, so tools/guide-refine.py gives them guide-v2 and sections 7 and 12 lay them out. Their
map card lists four drive times where the emergency pages list six: section 12's three across left
a row of 3 and a row of 1, so four tiles run 2 x 2 (no empty slots). Only these pages have four.
The Sheffield pages have three (guide-refine.py DIRS dropped "Sheffield centre", which repeated
"Sheffield"): one row at desktop, and on phones, two across, the third takes the row.
*/
.guide-v2 .mapcard .dirs:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 599px) { .guide-v2 .mapcard .dirs > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* ── 18. Town pages: the figures band (plan step 6, Fayez 2026-09-28) ─── */
/*
Every town page (T06, 118: the service, emergency and implant town pages) has no breadcrumb, no
chapter nav and no reviewed-by box since Fayez's review of the service-town pages, and its trust
strip is this band (tools/guide-refine.py TOWN). He picked it from three mockups: the homepage's
figures on ink, six of them, three by two ("make the block 3*2"). Two by three on phones. Under the
emergency pages' ink hero the band is one shade lighter (--ink-2), so the two read as two blocks.
Classes are .tfig*: site.css already owns .fig (white figure cards).
*/
.tfigs { background: var(--ink); color: #fff; padding: clamp(30px, 4vw, 48px) 0; }
.hero--ink + .tfigs { background: var(--ink-2); }
.tfigs .tfigs__in {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 1040px; margin: 0 auto; padding: 0; list-style: none;
}
.tfigs .tfig { margin: 0; padding: 22px 12px; text-align: center; }
.tfigs .tfig > svg { display: block; width: 22px; height: 22px; margin: 0 auto 10px; color: var(--accent-light); }
.tfigs .tfig__n {
margin: 0; font-size: clamp(30px, 2.8vw, 40px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05;
color: #fff; white-space: nowrap;
}
.tfigs .tfig__l { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--on-ink-2); }
@media (min-width: 761px) {
.tfigs .tfig:nth-child(-n+3) { border-bottom: 1px solid var(--on-ink-line); }
.tfigs .tfig:not(:nth-child(3n)) { border-right: 1px solid var(--on-ink-line); }
}
@media (max-width: 760px) {
.tfigs .tfigs__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tfigs .tfig { padding: 18px 8px; }
.tfigs .tfig:nth-child(-n+4) { border-bottom: 1px solid var(--on-ink-line); }
.tfigs .tfig:nth-child(odd) { border-right: 1px solid var(--on-ink-line); }
}
/* ── 19. T09 Practice & trust, T10 Contact (plan step 6, Fayez 2026-09-28) ─── */
/*
/about/, /meet-the-team/ and /contact/ take guide-v2 and practice-v2 (tools/practice-refine.py): the
centred hero, one reading column, stacked sections. /reviews/ takes practice-v2 only, so its review
grids keep the page width, three across. Fayez, from before/after mockups: "Yes, build it".
/booking-confirmed/ is untouched (it holds the ad click after a booking).
*/
/* Two-column bands (text beside a panel or the contact form) stack in the column. */
.guide-v2.practice-v2 .grid2 { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 2.4vw, 28px); }
/* A row of panels with one taken out (/contact/: the opening-hours card) leaves no empty slot. */
@media (min-width: 761px) { .practice-v2 .grid3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* /about/ and /meet-the-team/: the trust strip as the town pages' 3x2 figures band (section 18), in the
strip's own light sage instead of ink (Fayez: "use the trust strip with matching lightweight color in
2*3 block style"). Border colours follow the light ground. */
.tfigs--light { background: var(--sage); color: var(--ink); border-block: 1px solid var(--sage-line); }
.tfigs--light .tfig__n { color: var(--ink); }
.tfigs--light .tfig__l { color: var(--t2); }
.tfigs--light .tfig > svg { color: var(--accent); }
@media (min-width: 761px) {
.tfigs--light .tfig:nth-child(-n+3) { border-bottom-color: var(--sage-line); }
.tfigs--light .tfig:not(:nth-child(3n)) { border-right-color: var(--sage-line); }
}
@media (max-width: 760px) {
.tfigs--light .tfig:nth-child(-n+4) { border-bottom-color: var(--sage-line); }
.tfigs--light .tfig:nth-child(odd) { border-right-color: var(--sage-line); }
}
/* /reviews/: no review grid ends in an empty slot. Three across, a last row of two shares the row,
and a last card on its own takes it; two across on tablets, an odd last card full width. */
@media (min-width: 960px) {
.practice-v2:not(.guide-v2) .revs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.practice-v2:not(.guide-v2) .revs > * { grid-column: span 2; }
.practice-v2:not(.guide-v2) .revs > :nth-last-child(2):nth-child(3n+1),
.practice-v2:not(.guide-v2) .revs > :last-child:nth-child(3n+2) { grid-column: span 3; }
}
@media (min-width: 600px) and (max-width: 959px) {
.practice-v2:not(.guide-v2) .revs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* ── 20. T02 service hubs (plan step 6, Fayez 2026-09-28) ─── */
/*
The seven /treatments/ hubs (composite bonding, general dentistry, hygiene and gum health, sedation,
teeth straightening, teeth whitening, veneers and crowns) have the standard treatment page's
structure, so tools/hub-refine.py (site repo) gives them guide-v2 and treat-v2: sections 7, 12, 14
and 16 lay them out (the centred hero, one 760px column, stacked halves, step cards two across). As
on the town and practice pages there is no breadcrumb, and the trust strip is section 19's light
figures band. Fayez, from before/after mockups: "Yes, build it". hub-v2 covers what only they have.
*/
/* The price section's heading sits on the column's left edge like every other heading. Section 2
centres #prices for the homepage's price feature; in the reading column it sat off-centre (centred
across section 12's wider heading box) over left-aligned price rows. The extractions page, the same
template, had it too (Fayez: fix it there too). */
.treat-v2 #prices .head { text-align: left; }
.treat-v2 #prices .head .label { justify-content: flex-start; }
.treat-v2 #prices .head .label::before { display: none; }
.treat-v2 #prices .head .label::after { max-width: 64px; }
/* A price note ("Included in your new patient examination") wraps on phones instead of running past
the edge: site.css keeps .tier__p--sm on one line. A price still fits its line. */
@media (max-width: 599px) {
.treat-v2 .tier__p--sm { white-space: normal; max-width: 11em; text-align: right; }
}
/* Before-and-after cases: a single case takes the column's width (it sat at half width beside an
empty slot); two share the row. */
.hub-v2 .bas > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* The facts row (the hubs and the extractions page) in warm stone with the figures in brand green: on
the bone ground its boxes were bone on bone. Fayez picked it from three mockups (brand green, soft
mint, warm stone), 2026-09-28. */
.treat-v2 .fs { background: var(--blush); border-color: var(--stone); }
.treat-v2 .fs__n { color: var(--accent); }
.treat-v2 .fs__l { color: var(--t2); }
/* ── 21. The last pages: T04 decision guides, T03 indexes, T11 legal (plan step 6, Fayez 2026-09-28) ─── */
/*
The two decision guides (/treatments/dentures/, /treatments/root-canal-treatment/) are the hubs' template,
so tools/hub-refine.py gives them hub-v2 and section 20 covers them. /treatments/ and /blog/ take guide-v2
and index-v2 (tools/index-refine.py), and the four legal pages guide-v2 and legal-v2
(tools/legal-refine.py): the centred hero and one reading column. Fayez: "go", then "Yes, build it" from before/after mockups.
*/
/* Treatment cards two across in the column, and an odd last card takes the row: four across, the
Emergency group's one card sat at a quarter width beside three empty slots and Restore's three left one. */
.index-v2 .tcards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.index-v2 .tcards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Legal pages: the text takes the whole column the "On this page" rail left (it stayed in the rail's
250px track, so headings broke into three and four lines), and long web addresses given as link text
break at the column's edge on phones. */
.legal-v2 .guide.legal { grid-template-columns: minmax(0, 1fr); }
.legal-v2 .legal .prose { max-width: none; }
.legal-v2 .prose a { overflow-wrap: anywhere; }
/* Their bullet lists read at the body size, as the guides' lists do (section 1): 15px beside 19px
paragraphs read as two different fonts. */
.legal-v2 .prose .list li { font-size: var(--fs-body); }
/* btn--emergency: homepage hero Emergency booking (Setmore emergency service), 2026-10-10 */
.btn.btn--emergency{background:#C2412B;color:#fff;border-color:#C2412B}
.btn.btn--emergency:is(:hover,:focus-visible){background:#A3341F;border-color:#A3341F;color:#fff}