. Wrap any block of
running text that would otherwise fill a full-width column in .measure (or
use an existing text container: .prose, .wrap--narrow, .article-body).
It was on the
itself until the design's revision. That capped every
paragraph wherever it stood, which is why so much of blocks.css is a
paragraph being given `max-width: none` back: a converted line inside a flex
row, a bound score, a card's "Explore" - none of them running text, all of
them capped anyway. Ownership moves to whatever is actually a column of
reading, and the elements that never were one stop having to argue. */
.measure { max-width: var(--measure); }
.measure--tight { max-width: var(--measure-tight); }
.measure--center { margin-inline: auto; }
/* A column, not a measure. .measure caps a run of text in characters and is the
right tool inside a section that is already the width it should be; this caps
a whole page body - text, images, whatever the record holds - inside a full
.wrap, so that the body starts where the heading above it starts.
The alternative was .wrap--narrow, which is a narrower *band*: it centres
itself, so under a heading laid out on the full .wrap the body steps in ~200px
from it and the page reads as broken long before anyone works out that the
measure is fine. Left-aligned by default, as .measure is, and for the same
reason - a column that centres itself under a left-aligned heading is almost
never what was wanted. */
.column { max-width: var(--column); }
/* Section heading group */
.sec-head { margin-bottom: var(--sp-6); }
.sec-head > p { max-width: var(--measure); }
.sec-head--center { text-align: center; }
.sec-head--center p { margin-inline: auto; }
.sec-head--center .rule { margin-inline: auto; }
.sec-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
/* 4. Layout -------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--cream { background: var(--cream); }
.section--navy { background: var(--navy-800); color: #e8eaf4; }
.section--navy h2, .section--navy h3 { color: var(--white); }
.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
/* A row leading with an icon chip beside a block of text: the chip stays at
the top and the text is never pushed under it. The design writes these
three declarations inline on the booking page; an inline style is not
something an editor can keep hold of, so it is a modifier here. */
.row--top { align-items: flex-start; flex-wrap: nowrap; }
/* 5. Buttons ------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
min-height: 48px; padding: 0 var(--sp-4);
border: 1px solid transparent; border-radius: var(--radius-pill);
font-size: var(--step-0); font-weight: 600; line-height: 1;
text-decoration: none; cursor: pointer; white-space: nowrap;
transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--orange-500); color: var(--white); }
.btn--primary:hover { background: var(--orange-600); color: var(--white); }
.btn--ghost { background: transparent; color: var(--navy-800); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--navy-800); color: var(--navy-800); background: rgba(30, 37, 80, 0.03); }
.btn--onnavy { background: var(--orange-500); color: var(--white); }
.btn--sm { min-height: 42px; font-size: var(--step--1); padding: 0 var(--sp-3); }
.link-arrow {
display: inline-flex; align-items: center; gap: 8px;
font-weight: 600; font-size: var(--step-0); text-decoration: none; color: var(--navy-700);
}
.link-arrow::after { content: "→"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(4px); }
/* 6. Header / nav -------------------------------------------------------- */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--line);
}
.site-header__inner {
display: flex; align-items: center; gap: var(--sp-5);
min-height: var(--header-h);
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none; line-height: 1; color: var(--navy-800);
flex: 0 0 auto;
}
.brand:hover { color: var(--orange-600); }
.brand__icon, .brand__wordmark { display: block; width: auto; }
.brand__icon { height: 34px; }
.brand__wordmark { height: 54px; }
.brand__name { font-family: var(--font-display); font-size: 1.5rem; color: var(--navy-800); letter-spacing: -0.01em; }
.brand__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.brand__since {
font-size: 0.625rem; letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ink-muted); white-space: nowrap; margin-top: -6px; padding-left: 2px;
}
/* Primary nav — markup mirrors WordPress core/navigation exactly, so these
rules apply unchanged to a core/navigation block. Load this sheet AFTER
wp-block-library so these win over core's defaults. */
.site-nav { margin-inline: auto; }
/* The design's row never wraps: its
sets no flex-wrap, so it takes the
initial nowrap and the four items stay on one line all the way down to the
drawer. Core's navigation sheet writes `flex-wrap: var(--navigation-layout-
wrap, wrap)` onto the same list, which is what makes the block version drop
an item onto a second line - and it does so at EVERY width, because .wrap
caps the row at 1176px while brand + menu + actions measure ~1188px. Stated
here so the block row behaves as the design's does; the phone gets out of
the way in §11 to give it the width it needs. */
.site-nav .wp-block-navigation__container { flex-wrap: nowrap; }
.wp-block-navigation__container {
display: flex; align-items: center; gap: var(--sp-2);
list-style: none; margin: 0; padding: 0;
}
.wp-block-navigation-item { position: relative; display: flex; align-items: center; }
.wp-block-navigation-item__content {
display: inline-flex; align-items: center; gap: 4px;
min-height: 44px; padding-inline: 14px;
font-weight: 600; font-size: var(--step-0); white-space: nowrap;
color: var(--navy-800); text-decoration: none;
}
.wp-block-navigation-item__content:hover { color: var(--orange-600); }
/* A submenu heading is a button rather than a link - see inc/nav.php - and core
resets a button in that slot to inherited type and the browser's own padding
(button.wp-block-navigation-item__content), which outranks the rule above and
would leave the headings lighter and smaller than the links beside them. The
two declarations that reset restates, at a weight that wins. */
.site-nav button.wp-block-navigation-item__content {
font-weight: 600; font-size: var(--step-0); padding-block: 0;
}
.wp-block-navigation__submenu-icon {
display: grid; place-items: center; width: 20px; height: 44px;
margin-left: -10px; padding: 0; border: 0; background: none;
color: var(--ink-muted); cursor: pointer;
}
.wp-block-navigation__submenu-icon .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.header__actions { display: flex; align-items: center; gap: var(--sp-4); }
.header__tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; color: var(--navy-800); white-space: nowrap; }
.icon-btn {
display: grid; place-items: center; width: 44px; height: 44px;
border: 0; background: transparent; border-radius: var(--radius-pill); color: var(--ink-soft);
}
.icon-btn:hover { background: var(--cream-deep); color: var(--navy-800); }
/* Desktop dropdowns (hover / keyboard focus) */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.site-nav .nav-search,
.site-nav .nav-cta { display: none; }
.wp-block-navigation__submenu-container {
position: absolute; top: 100%; left: 0; z-index: 60;
min-width: 268px; margin: 0; padding: var(--sp-2) 0;
list-style: none; background: var(--white);
border: 1px solid var(--line); border-radius: var(--radius-lg);
box-shadow: 0 18px 44px -18px rgba(23, 28, 63, .32);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Two open states, and no third. The pointer has one; every other way in -
clicking or tapping a heading, Enter on it, focus arriving in the list from
the keyboard - runs through core's own submenu state and surfaces as
aria-expanded on one of the two toggles, so that is what is read here.
Focus alone is deliberately not one of them. :focus-within was, and it opened
this panel whenever anything inside the item took focus - including the
heading, which every click on it does. Core does not open a submenu on focus
in this mode (see :not(.open-on-hover-click) on its own :focus-within rule)
and so leaves the container at width/height 0 with overflow hidden, which is
an empty box the size of the padding: chrome with the items clipped out of
it. The geometry is restated below rather than left to core for the same
reason - a state the theme opens is a state the theme has to open fully. */
.has-child:hover > .wp-block-navigation__submenu-container,
.has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
opacity: 1; visibility: visible; transform: translateY(0);
width: auto; height: auto; overflow: visible;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item { display: block; }
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
display: block; min-height: 0; padding: 11px var(--sp-4);
font-size: var(--step-0); line-height: 1.4; white-space: normal;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
background: var(--cream); color: var(--orange-600);
}
.has-child:hover > .wp-block-navigation-item__content,
.has-child:focus-within > .wp-block-navigation-item__content {
background: var(--cream); border-radius: var(--radius-pill) 0 0 var(--radius-pill); color: var(--navy-800);
}
.has-child:hover > .wp-block-navigation__submenu-icon,
.has-child:focus-within > .wp-block-navigation__submenu-icon { background: var(--cream); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.skip-link {
position: absolute; left: 50%; top: 0; transform: translate(-50%, -110%);
z-index: 100; background: var(--navy-800); color: var(--white);
padding: 10px var(--sp-4); border-radius: 0 0 var(--radius) var(--radius); text-decoration: none;
}
.skip-link:focus { transform: translate(-50%, 0); color: var(--white); }
/* Announcement strip
*
* .announce is the paragraph itself, which is already the full-bleed bar - it
* needs no wrapper, and core's div.wp-block-template-part around it is not
* editor-styleable, so the paragraph is the only block a colour can attach to.
*
* Colour here is a default, not a rule. The bar's background, text and link
* colours are editor-settable on that paragraph, so every colour declaration is
* guarded by :not(.has-*) and drops out the moment someone picks a swatch.
* Without the guards the editor's choice still wins on the - core emits
* preset classes with !important - but the em and the link keep their hardcoded
* navy and orange and go unreadable on a dark background. */
.announce {
margin: 0;
max-width: none;
border-bottom: 1px solid var(--line);
text-align: center;
padding: var(--sp-2) var(--gutter);
font-size: var(--step-0);
}
.announce:not(.has-background) { background: var(--cream); }
.announce:not(.has-text-color) { color: var(--ink-soft); }
.announce em { font-family: var(--font-display); font-style: italic; }
.announce:not(.has-text-color) em { color: var(--navy-800); }
.announce a { font-weight: 600; text-decoration: none; }
.announce:not(.has-link-color) a { color: var(--orange-600); }
.announce a:hover { text-decoration: underline; }
/* A chosen background makes the fixed cream-on-cream hairline wrong; tie it to
* whatever the text colour ended up being instead. */
.announce.has-background {
border-bottom-color: rgba(0, 0, 0, 0.12);
border-bottom-color: color-mix(in srgb, currentColor 20%, transparent);
}
/* 7. Blocks -------------------------------------------------------------- */
/* Hero */
/* Responds to the HERO's own width, not the viewport, so it also collapses
correctly inside a narrow CMS content column. The two halves stack by
flex-wrap (intrinsic); the @container block below drops the copy's
right-aligned indent at the same point.
This is why it is a container query rather than the media query it replaces.
The hero is a pattern, and a pattern goes wherever it is inserted - including
the editor's own canvas, which is narrower than the viewport it sits in. A
viewport rule left the two columns side by side at 460px each inside an
800px canvas while the page around them was reported as 1400px wide. */
.hero { display: flex; flex-wrap: wrap; align-items: stretch; container-type: inline-size; }
.hero__copy-outer { display: flex; flex: 1 1 460px; min-width: 0; }
.hero__copy { padding: var(--sp-8) var(--sp-6) var(--sp-8) var(--gutter); max-width: calc(620px + var(--gutter)); margin-left: auto; }
.hero__meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; margin-top: var(--sp-5); font-size: var(--step--1); color: var(--ink-muted); }
.hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.hero__aside { position: relative; flex: 1 1 460px; min-width: 0; min-height: 560px; }
.hero__seal {
position: absolute; right: var(--sp-5); bottom: var(--sp-5);
width: 118px; height: 118px; border-radius: 50%;
background: var(--navy-800); color: var(--white);
display: grid; place-content: center; text-align: center; gap: 2px; padding: 6px;
}
.hero__seal small { font-size: 0.5625rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: .8; line-height: 1.3; }
.hero__seal b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; }
/* Hero, page-heading variant: same layout, smaller heading & shorter image */
.hero.page-heading h1 { font-size: var(--step-4); }
.hero.page-heading .hero__copy { padding-block: var(--sp-7); }
.hero.page-heading .lede { max-width: 46ch; }
.hero.page-heading .hero__aside { min-height: 440px; }
/* Stacked hero (narrow container): full-bleed copy on the left gutter. */
@container (max-width: 940px) {
.hero__copy { padding: var(--sp-7) var(--gutter); max-width: none; margin-left: 0; }
.hero__aside, .hero.page-heading .hero__aside { min-height: 380px; }
}
/* Image placeholder (swap for real naming a group of buttons, which no
may name. The design writes these two rules onto it inline; they are the same
two the design writes here for a real label, so they are stated once. */
.field > label, .field > .field__label-static { font-size: var(--step--1); font-weight: 700; color: var(--navy-800); }
.field > label span, .field > .field__label-static span { font-weight: 400; color: var(--ink-muted); }
.field__help { margin: 0; max-width: none; font-size: var(--step--1); color: var(--ink-muted); }
.field__error { margin: 0; max-width: none; font-size: var(--step--1); font-weight: 600; color: var(--orange-600); }
.input, .select, .textarea {
width: 100%; min-height: 50px; padding: 13px var(--sp-3);
background: var(--white); color: var(--ink);
border: 1px solid var(--line-strong); border-radius: var(--radius);
transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(38,47,99,.08); outline: none; }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--cream); color: var(--ink-muted); cursor: not-allowed; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--orange-600); }
.textarea, textarea.input { min-height: 172px; resize: vertical; line-height: 1.6; }
/* A box for an afterthought rather than an account. The design writes this as
an inline min-height on the last question of the free health advice form; a
value in a style attribute is one nobody can find and nobody can change
everywhere at once, so it is a second size of the control instead. */
.textarea--short { min-height: 120px; }
.select {
appearance: none; padding-right: var(--sp-6); cursor: pointer;
background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
background-position: calc(100% - 24px) 22px, calc(100% - 18px) 22px;
background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
/* Choice controls */
.choice { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--step--1); color: var(--ink-soft); cursor: pointer; }
.choice input { flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--orange-500); cursor: pointer; }
.choice-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.choice-group--row { flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
/* The honeypot's holder. Taken out of flow rather than hidden, for two reasons
at once: a crawler that skips display:none subtrees still fills this one, and
.form is a grid whose gap would otherwise leave a blank row where it sits.
See amclinic_core_render_enquiry_traps(). */
.enquiry-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn--block { width: 100%; }
.btn.is-busy { opacity: .7; cursor: progress; transform: none; }
.form__status { margin: 0; max-width: none; padding: 12px var(--sp-3); border-radius: var(--radius); font-size: var(--step--1); font-weight: 600; }
.form__status--error { background: #fdeee8; color: var(--orange-600); border: 1px solid #f6cbb9; }
.form__success {
display: flex; gap: var(--sp-3); margin-top: var(--sp-5);
padding: var(--sp-5); background: var(--cream); border-radius: var(--radius-lg);
}
.form__success h3 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 700; margin: 0 0 var(--sp-2); }
.form__success p { margin: 0; max-width: 46ch; color: var(--ink-soft); font-size: var(--step--1); }
.form__success .link-arrow { margin-top: var(--sp-3); padding: 0; border: 0; background: none; cursor: pointer; color: var(--orange-600); font-size: var(--step--1); }
/* Full-bleed map band */
.map-band { border-top: 1px solid var(--line); }
.map-band__canvas { min-height: 460px; height: 46vh; }
@media (max-width: 900px) {
.contact-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
.map-band__canvas { min-height: 320px; }
}
@media (max-width: 620px) {
.form__row { grid-template-columns: 1fr; }
}
/* Booking page ------------------------------------------------------------
design-assets/book.html and §13 of design-assets/css/site.css, with four
deliberate deltas noted where they occur:
- .callout is not ported. The design defines it twice - §"Callout card" makes
it a cream card, §13 a bordered note with an icon, both on the same class -
and the only thing that used the second was the herbal-medicine note under
the treatment question, which is not part of the form (2026-08-20, owner
decision). Nothing here needs the second definition, so the collision is
left in the design file rather than resolved into this one.
- .btn--navy, .summary and .payload are not ported. The first is unused; the
other two style the demo's submitted-payload dump, which does not ship -
see amclinic_core_enquiry_success_copy() for why the panel says the same
thing on both submission paths and therefore lists nothing back.
- The rail's step count is a container query on .wizard, and .wizard is the
block's own wrapper, so the query resolves against the card as the design
intends. See amclinic_core_render_enquiry_wizard().
- .opt-grid.is-invalid is kept but [data-group-error] is not: the choice's
error paragraph is a .field__error inside the .field wrapping the grid,
which is where every other error on the site lives and what forms.js
already knows how to write into. */
.booking { display: grid; grid-template-columns: 7fr 3fr; gap: var(--sp-5); align-items: start; }
.wizard { container-type: inline-size; padding: var(--sp-6) var(--sp-5); }
.wizard h2 { font-size: var(--step-3); margin: 0; outline: none; }
.wizard h2 em { font-style: normal; color: var(--ink-muted); font-size: .72em; }
.wizard__head { display: grid; gap: 6px; }
.wizard__intro { color: var(--ink-muted); margin: 0; max-width: 60ch; }
.wizard__steps { display: flex; align-items: center; list-style: none; margin: 0 0 var(--sp-6); padding: 0; gap: var(--sp-2); flex-wrap: nowrap; }
.wizard__steps li { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--step--1); color: var(--ink-muted); white-space: nowrap; }
.wizard__steps li:not(:last-child) { flex: 1 1 auto; }
.wizard__steps li::after { content: ""; flex: 1 1 auto; min-width: 8px; max-width: 34px; height: 1px; background: var(--line-strong); margin-left: var(--sp-2); }
.wizard__steps li:last-child::after { display: none; }
.wizard__steps b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cream-deep); color: var(--ink-muted); font-size: 0.8125rem; font-weight: 700; }
.wizard__steps i { font-style: normal; }
.wizard__steps .is-current { color: var(--navy-800); font-weight: 700; }
.wizard__steps .is-current b { background: var(--orange-500); color: var(--white); }
.wizard__steps .is-done b { background: var(--navy-800); color: var(--white); }
.wizard__steps .is-done b span { display: none; }
.wizard__steps .is-done b::before { content: "✓"; font-size: 0.8125rem; }
.opt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.opt {
position: relative; display: block; padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
background: var(--white); cursor: pointer;
transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.opt:hover { border-color: var(--ink-muted); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt b { display: block; font-weight: 600; color: var(--navy-800); }
.opt span { display: block; margin-top: 2px; font-size: var(--step--1); color: var(--ink-muted); }
.opt .opt__tick {
position: absolute; top: 50%; right: var(--sp-4); translate: 0 -50%;
display: none; place-items: center; margin: 0;
width: 22px; height: 22px; border-radius: 50%;
background: var(--navy-800); color: var(--white);
}
.opt .opt__tick .icon { width: 12px; height: 12px; stroke-width: 3; }
.opt:has(input:checked) { border-color: var(--navy-800); border-width: 2px; padding: calc(var(--sp-3) - 1px) calc(var(--sp-4) - 1px); background: #f6f7fc; }
.opt:has(input:checked) .opt__tick { display: grid; }
.opt b, .opt > span:not(.opt__tick) { padding-right: var(--sp-5); }
.opt:has(input:focus-visible) { outline: 2px solid var(--orange-500); outline-offset: 3px; }
.opt--compact { padding: 14px var(--sp-4); }
.opt--compact:has(input:checked) { padding: 13px calc(var(--sp-4) - 1px); }
.opt-grid.is-invalid .opt { border-color: var(--orange-600); }
.wizard__panel { padding: var(--sp-4); border-radius: var(--radius-lg); background: #f6f7fc; border: 1px solid #dfe3f2; }
.wizard__panel h3 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 700; margin: 0 0 4px; }
.wizard__panel p { margin: 0 0 var(--sp-3); font-size: var(--step--1); color: var(--ink-soft); max-width: none; }
.wizard__panel .row { gap: var(--sp-2); }
.wizard__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.wizard__nav-end { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; }
.btn-link { background: none; border: 0; padding: 0; color: var(--ink-muted); font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.btn-link:hover { color: var(--navy-800); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--cream-deep); color: var(--ink-muted); transform: none; }
.btn[aria-disabled="true"]:hover { background: var(--cream-deep); transform: none; }
.seg { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.seg__btn {
min-height: 44px; padding: 0 var(--sp-4); cursor: pointer;
border: 1px solid var(--line-strong); border-radius: var(--radius);
background: var(--white); color: var(--navy-800); font-size: var(--step--1); font-weight: 600;
}
.seg__btn:hover { border-color: var(--ink-muted); }
.seg__btn[aria-pressed="true"] { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.wizard__done { margin-top: 0; }
.aside-stack { display: flex; flex-direction: column; gap: var(--sp-4); }
.aside-card h3 { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 700; margin: 0 0 var(--sp-2); }
.aside-card p { margin: 0 0 var(--sp-3); font-size: var(--step--1); color: var(--ink-soft); }
/* The rule above out-specifies the global p:last-child, so the last line in a
card keeps a margin the card has no use for. The design zeroes it with an
inline style on the one card where it shows; restated here, where it holds
for every card rather than for the one somebody remembered. */
.aside-card p:last-child { margin-bottom: 0; }
/* Renamed from the design's .aside-card__meta, and the one rename in this port.
The design uses it once, inside one card on one page, so it named it for
where it sat; it is a strip of ways to reach the clinic and belongs in any
card, sidebar or panel that wants one. A pattern called "Clinic contact
lines" emitting class="aside-card__meta" would be a component telling you it
is a detail of something else. */
.contact-lines { display: flex; flex-direction: column; gap: 6px; font-size: var(--step--1); }
.contact-lines a, .contact-lines span { display: inline-flex; align-items: center; gap: 8px; color: var(--navy-800); text-decoration: none; font-weight: 600; }
.contact-lines .fine { font-weight: 400; color: var(--ink-muted); }
/* The strip set off from what it follows, for a card that has already said
something before it offers a telephone number. The design's
.aside-card__meta--top, renamed with the component it modifies. */
.contact-lines--top { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--cream-deep); }
/* Numbered guidance list — a step at a time, in a card or beside an article.
Not .steps, which is the patient journey's row of icon cards across a full
section, and not .timeline, which is a dated history down a rule. This is
three or four short things in order, in a column narrow enough to sit in a
sidebar, and the numbers are a counter so deleting one renumbers the rest. */
.numlist { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-4); counter-reset: numitem; }
.numlist li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.numlist li::before {
counter-increment: numitem; content: counter(numitem);
width: 28px; height: 28px; border-radius: 50%;
background: var(--navy-800); color: var(--white);
font-family: var(--font-sans); font-size: 13px; font-weight: 700;
display: grid; place-items: center;
}
.numlist li > :not(:first-child) { grid-column: 2; }
.numlist h3 { font-family: var(--font-sans); font-size: var(--step--1); font-weight: 700; margin: 4px 0 4px; }
.numlist p { margin: 0; max-width: none; font-size: var(--step--1); color: var(--ink-soft); line-height: 1.6; }
/* The card heading a step above .aside-card h3, for a card whose subject is the
thing beside the form rather than a note within it. */
.aside-card__h { font-size: var(--step-2); margin: 0; }
.aside-card .rule { margin: var(--sp-3) 0; }
.factbar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--cream); }
.factbar__grid { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; padding-block: var(--sp-4); }
.factbar__grid div + div { border-left: 1px solid var(--line); }
.factbar b { display: block; color: var(--navy-800); font-weight: 700; }
.factbar span { font-size: var(--step--1); color: var(--ink-muted); }
/* Labels drop whole (never truncate) once the card itself is too narrow for one line. */
@container (max-width: 620px) {
.wizard__steps i { display: none; }
.wizard__steps li::after { max-width: none; }
}
@media (max-width: 900px) {
.booking { grid-template-columns: 1fr; }
.opt-grid { grid-template-columns: 1fr; }
.factbar__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
.factbar__grid div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.wizard { padding: var(--sp-5) var(--sp-4); }
}
/* Explainer page ----------------------------------------------------------
design-assets/how-chinese-medicine-works.html and §14 of
design-assets/css/site.css, with one deliberate delta noted where it occurs:
the further-reading card, whose whole-card link no block can emit.
These are the shapes a page of explanation needs and the marketing sections
do not: a narrative column with a supporting column beside it, a card for a
term the reader has not met before, running text in two columns, and a row
of ways on at the end. */
/* Two-column reading layout: main narrative + supporting column */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-7); align-items: start; }
.doc-layout .prose p { font-size: var(--step-0); }
/* Supporting note cards (examples, research areas) */
.notes { display: grid; gap: var(--sp-3); }
.note {
background: var(--white); border: 1px solid var(--line);
border-left: 3px solid var(--orange-500);
border-radius: var(--radius); padding: var(--sp-3) var(--sp-4);
}
.note__title { font-family: var(--font-sans); font-size: var(--step-0); font-weight: 700; color: var(--navy-800); margin: 0 0 4px; }
.note p { margin: 0; font-size: var(--step--1); color: var(--ink-soft); max-width: none; line-height: 1.6; }
/* Concept card (Qi, Yin & Yang…) */
.concept { background: var(--cream); border-radius: var(--radius-lg); padding: var(--sp-4); }
.concept h3 { font-size: var(--step-1); margin-bottom: 2px; }
.concept__kicker { display: block; font-size: var(--step--1); font-weight: 600; color: var(--orange-600); margin-bottom: var(--sp-3); }
.concept p { font-size: var(--step--1); color: var(--ink-soft); line-height: 1.65; max-width: none; }
/* Two-column running text (used inside navy band) */
.text-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.text-cols p { max-width: none; }
.section--navy .text-cols p { color: #c3c9e4; font-size: var(--step--1); line-height: 1.7; }
/* Further-reading link cards
*
* The delta. The design draws each card as one wrapping the whole box, and
* no block can produce that: core/group takes any tagName but carries no href,
* and there is no core block that is a link around arbitrary content. So the
* card is a and the link sits on its title, stretched over the box by a
* pseudo-element. The box stays clickable edge to edge, and what a screen
* reader announces for the link is the title rather than the title plus the
* summary plus "Read more" - which is what the design's markup would have read
* out.
*
* Three declarations follow from that and are not in the design: the box needs
* a positioning context for the stretched pseudo-element; the title's anchor
* needs a colour and no underline, because a bare
otherwise takes the
* site's link colour and rule; and every hover state needs a :focus-within
* twin, because a card reached by keyboard has to show what a pointer is shown.
*/
.link-card {
position: relative;
display: flex; flex-direction: column; gap: var(--sp-2);
padding: var(--sp-4); background: var(--white);
border: 1px solid var(--line); border-radius: var(--radius-lg);
text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.link-card:hover, .link-card:focus-within { border-color: var(--navy-700); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.link-card__title { font-family: var(--font-display); font-size: var(--step-1); color: var(--navy-800); line-height: 1.3; }
.link-card__title a { color: inherit; text-decoration: none; }
.link-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.link-card p { font-size: var(--step--1); color: var(--ink-soft); max-width: none; line-height: 1.6; }
.link-card__more { margin-top: auto; font-size: var(--step--1); font-weight: 600; color: var(--orange-600); }
.link-card:hover .link-card__title, .link-card:focus-within .link-card__title { color: var(--navy-700); }
@media (max-width: 900px) {
.doc-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
.text-cols { grid-template-columns: 1fr; gap: var(--sp-3); }
}
/* Condition pages ---------------------------------------------------------
§12 of design-assets/css/site.css, shared by all ten What We Help With
pages. The page shape itself needs nothing new: it is the hero in its
page-heading cut over .svc-layout, both of which the service category page
already brought in. What is new is what goes inside that column - a
standfirst, a review strip, a grid of condition tiles, the approach block -
and the card the FAQ accordion sits in.
Ported verbatim except where noted. The blocks.css counterparts restate
these against the classes core's markup produces, as everywhere else in this
theme. */
/* The opening line, set larger than the body it introduces, so it reads as a
statement rather than a first paragraph. It was narrower too, at 46ch; the
design's revision took that off and lets it fill the column it stands in,
which on a concern page is .svc-layout's main cell. */
.standfirst {
font-family: var(--font-display); font-style: italic;
font-size: var(--step-2); line-height: 1.4; color: var(--navy-800);
margin: 0 0 var(--sp-5); text-wrap: pretty;
}
/* Patient review strip (quote + clinic stats) */
.review-strip {
background: var(--cream); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: var(--sp-5); margin-block: var(--sp-7);
}
.review-strip__quote p {
font-family: var(--font-display); font-style: italic;
font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 64ch;
}
.review-strip__meta {
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--line-strong); margin-top: var(--sp-4); padding-top: var(--sp-4);
}
.review-strip__stat { display: inline-flex; align-items: baseline; gap: 8px; font-size: var(--step--1); color: var(--ink-muted); }
.review-strip__stat b { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); color: var(--navy-800); }
.review-strip .stars { font-size: 0.8125rem; letter-spacing: 2px; }
/* Condition / area label grid */
.tag-grid { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.tag-grid li {
display: flex; align-items: center; min-height: 56px;
padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius);
background: var(--white); color: var(--navy-800);
font-size: var(--step--1); font-weight: 600; line-height: 1.35;
}
/* A tile for a concern whose conditions are not settled yet: named, but not
offered as a way through to anything. */
.tag-grid li.is-pending { color: var(--ink-muted); font-weight: 400; font-style: italic; }
/* A tile becomes interactive only when it holds a link */
.tag-grid a {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
width: 100%; color: inherit; text-decoration: none;
}
.tag-grid a::after {
content: "→"; color: var(--orange-600); opacity: 0;
transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease;
}
.tag-grid li:has(a) { transition: border-color .18s ease, box-shadow .18s ease; }
.tag-grid li:has(a):hover, .tag-grid li:focus-within { border-color: var(--navy-700); box-shadow: var(--shadow-md); }
.tag-grid li:has(a):hover a::after, .tag-grid li:focus-within a::after { opacity: 1; transform: translateX(0); }
/* Whole-person approach: intro beside divided principles */
.approach {
display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: var(--sp-6);
align-items: start; margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
.approach p { color: var(--ink-soft); }
.approach__list { display: grid; gap: var(--sp-4); }
.approach__item + .approach__item { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.approach__item h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.approach__item p { font-size: var(--step--1); line-height: 1.6; }
/* FAQ accordion held in a card (condition pages) */
.faq--card {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding-inline: var(--sp-5); max-width: 58rem; margin-inline: auto;
}
.faq--card > .faq__item:first-child { border-top: 0; }
.faq--card > .faq__item:last-child { border-bottom: 0; }
/* The same card, asked for by the section rather than by the group.
.faq--card is a class on the accordion, and the accordion lives inside a
synced record that stands on several pages - so a group carrying it is a
group that has decided how every page must present it. A concern page says
it here instead, on its own section, and the records it stacks stay plain
lists that read full width on the FAQ page and in a card here.
The card goes round .faq-group rather than .faq so that a group's heading
sits inside its own card; a page stacking three gets three. */
.faq-cards .faq-group {
background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
padding: var(--sp-4) var(--sp-5) var(--sp-2); max-width: 58rem; margin-inline: auto;
}
.faq-cards .faq-group + .faq-group { margin-top: var(--sp-4); }
.faq-cards .faq-group > .mt-5 { margin-top: 0; }
.faq-cards .faq > .faq__item:first-child { border-top: 0; }
.faq-cards .faq > .faq__item:last-child { border-bottom: 0; }
@media (max-width: 900px) {
.tag-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.approach { grid-template-columns: 1fr; gap: var(--sp-5); }
}
@media (max-width: 620px) {
.tag-grid { grid-template-columns: 1fr; }
.review-strip { padding: var(--sp-4); }
}