/** * Component styles — Adapt Theme * * All component styles are grouped in this single file (Section 8.6, * amended v1.3.1 / Appendix A4-O1). v1.3's "one file per component" * instruction is withdrawn; this file is the only one for component CSS. * * Each component occupies its own commented block, in the order below, so * the file stays navigable as the library grows. The section headers were * created empty in Phase 2 so later phases had one place to add to, never * a second file. * * Section order: Buttons, Cards, Hero, FAQ Accordion, Navigation, Forms, * CTA Blocks, Trust/Evidence + Social Proof, Footer — Section 4.7's * component table — then "Page sections" for shared blocks that are not * components in that table. * * If a component appears twice, it has one source of truth (Section 8.6). * A corollary worth stating, because it was violated three times: where a * component is *rendered* has no bearing on which section *defines* it. */ /* =================================================================== * Buttons (Section 4.7) — Primary (Adapt Blue fill), Secondary * (outline), Tertiary (text/link). * * Targets core/button's own markup (.wp-block-button__link) rather than * a custom button element, since Section 9.8 restricts the editor to * core blocks only and core/button is one of the twelve allowed types. * Primary is the unstyled default so every button — including the * cta-booking pattern's, which carries no variant class of its own — * renders correctly with no editor action required. Secondary and * Tertiary are opt-in via an additional block class. * * Focus-visible styling is global (base.css) and not repeated here. * =================================================================== */ .wp-block-button__link { display: inline-block; padding: var(--space-xs) var(--space-md); border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: var(--font-weight-body-medium); font-size: var(--font-size-body); line-height: var(--line-height-body); text-decoration: none; border: 2px solid transparent; cursor: pointer; } /* Primary — default, no extra class required. */ .wp-block-button__link { background-color: var(--color-adapt-blue); color: var(--color-white); } .wp-block-button__link:hover { background-color: var(--color-deep-navy); } /* Secondary — outline. Add to the button block's "Additional CSS class(es)". */ .wp-block-button.adapt-button--secondary .wp-block-button__link { background-color: transparent; color: var(--color-adapt-blue); border-color: var(--color-adapt-blue); } .wp-block-button.adapt-button--secondary .wp-block-button__link:hover { background-color: var(--color-adapt-blue); color: var(--color-white); } /* Tertiary — text/link, no fill or border. */ .wp-block-button.adapt-button--tertiary .wp-block-button__link { background-color: transparent; color: var(--color-adapt-blue); padding-left: 0; padding-right: 0; text-decoration: underline; } .wp-block-button.adapt-button--tertiary .wp-block-button__link:hover { color: var(--color-deep-navy); } /* =================================================================== * Cards (Clinical Content Card, Blog Card) * * Blog Card (Standard) — built in Phase 6A Wave 1. Clinical Content Card * is Phase 6B (needs the hub and clinical single templates first). * * Also holds the blog-archive layout wrapper classes (Featured Articles * grid, Category Nav, Archive Header) — not independently named in * Section 4.7's component table, bundled here rather than in a new * section header since they exist only to lay out Blog Cards and are * used exclusively by home.php and archive.php. * =================================================================== */ .adapt-blog-card { display: flex; flex-direction: column; gap: var(--space-xs); transition: transform 280ms ease, box-shadow 280ms ease; } .adapt-blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -16px rgba(3, 17, 30, 0.28); } .adapt-blog-card__image img { /* * aspect-ratio matches the registered adapt-blog-featured crop * (1200x675, 16:9 -- inc/cleanup.php) exactly, so this is a visual * no-op against every image in use today: base.css's global * `img { height: auto }` already makes the box match a correctly * hard-cropped 16:9 source pixel-for-pixel, and object-fit has * nothing to crop when the box already equals the image's own * ratio. The pair only does something the day a differently-shaped * image reaches this slot (a placeholder, a manual upload at the * wrong size, a future registered-size change) -- fixing the box * to 16:9 and letting object-fit: cover crop into it, rather than * height: auto stretching the box to whatever ratio that image * happens to be. */ aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); } .adapt-blog-card__category { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-body); font-weight: var(--font-weight-body-medium); text-transform: uppercase; letter-spacing: 0.03em; } .adapt-blog-card__title { margin: 0; } .adapt-blog-card__title a { color: var(--color-text); text-decoration: none; } .adapt-blog-card__title a:hover { color: var(--color-adapt-blue); } .adapt-blog-card__excerpt { margin-top: var(--space-xs); color: var(--color-text-secondary); } .adapt-blog-listing, .adapt-featured-articles__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); margin-top: var(--space-lg); margin-bottom: var(--space-lg); } .adapt-featured-articles { margin-top: var(--space-xl); } .adapt-category-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-sm); list-style: none; margin: var(--space-md) 0; padding: 0; } .adapt-category-nav a { display: inline-block; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; } .adapt-category-nav a:hover { border-color: var(--color-adapt-blue); color: var(--color-adapt-blue); } .adapt-archive-header, .adapt-blog-header { margin-top: var(--space-xl); margin-bottom: var(--space-lg); } /* Clinical Content Card — Section 4.7 is explicit that this component uses no excessive icons or colour coding. The visual distinction between Services, Conditions and Assessments comes from the hub's group headings, not from per-type card styling. */ .adapt-clinical-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-background); transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease; } /* * Hover lift — Clinical Card and Blog Card only run this rule; the * homepage tiles that carry no destination (Why Adapt, treatment steps) * deliberately do not, so a lift never implies a click target that * isn't there. Kept to a 4px translate and a soft shadow rather than * scale, per the "premium, not playful" direction — no bounce, no * enlargement. The whole article lifts even though only the title/image * are links, matching the common card affordance of "this whole box is * one destination." */ .adapt-clinical-card:hover { transform: translateY(-4px); border-color: var(--color-border); box-shadow: 0 12px 24px -16px rgba(3, 17, 30, 0.28); } .adapt-clinical-card__image img { /* Same reasoning as .adapt-blog-card__image img above -- matches the registered adapt-card crop (800x600, 4:3) exactly, so this is a no-op with current imagery and only guards future images. */ aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); } .adapt-clinical-card__title { margin: 0; } .adapt-clinical-card__title a { color: var(--color-text); text-decoration: none; } .adapt-clinical-card__title a:hover { color: var(--color-adapt-blue); } .adapt-clinical-card__summary { margin: 0; margin-top: var(--space-xs); color: var(--color-text-secondary); } /* Hub layout — intro, type groups, card grid. */ .adapt-hub-intro { margin-top: var(--space-xl); margin-bottom: var(--space-lg); max-width: var(--content-reading-width); } .adapt-hub-group { margin-bottom: var(--space-2xl); } /* Sprint 1 (2026-08-20): body-region sub-headings inside the Conditions group only — Services and Assessments stay flat. Smaller than the group's own h2, indented under it rather than boxed/banded, matching this component's existing preference for hairlines over containers. */ .adapt-hub-subgroup { margin-top: var(--space-lg); } .adapt-hub-subgroup h3 { font-size: var(--font-size-body-large); color: var(--color-text-secondary); border-top: 1px solid var(--color-border); padding-top: var(--space-sm); } /* One card grid, three consumers: the hub's type groups, related-content blocks, and search results (Section 6.11, Wave 4). Search reuses this selector rather than getting its own identical rule — Section 8.6: if a component appears twice it has one source of truth. */ .adapt-hub-group__grid, .adapt-related__grid, .adapt-search-results__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); margin-top: var(--space-md); } /* * Single related item — auto-fit gives a lone card a 1fr track, which * on a clinical single (currently 1-2 related items sitewide) stretches * it to the full ~1216px content-container width: an oversized, mostly * empty box rather than an intentional card. :only-child needs no PHP * or ACF change and cannot affect the hub or search grids above (they * use different container classes), and it simply does not match once * a second related item exists, so ordinary multi-card auto-fit * behaviour is untouched — nothing here overrides it, this only ever * fires when there is exactly one card to lay out. * * Capped at --content-reading-width and centred so the single card * lines up with the clinical column above it (.adapt-clinical-body, * .adapt-clinical .adapt-faq) rather than sitting at an unrelated * width of its own. */ .adapt-related__grid .adapt-clinical-card:only-child, .adapt-related__grid .adapt-blog-card:only-child { max-width: var(--content-reading-width); margin-inline: auto; } /* * The group heading follows the lone card it labels (Phase A, item 5). * .adapt-related__grid's rule above centres the card, but its

is * a sibling one level up in .adapt-related__group's own markup * (related-content.php) — not something the grid's :only-child state * can style directly, since a card and its own group heading aren't in * the same parent/child relationship the rule above relies on. * Measured before fixing: heading left 145px, lone card left 338px — * the heading stayed at the container edge while the card it names * centred 193px away from it. * * :has() is the first use of it in this codebase. It's the only * CSS-only way to style a preceding sibling (the h2) based on a later * sibling's content (the grid's card count) — the alternative was a * PHP-added conditional class on .adapt-related__group, a template * change this fix doesn't need. Support is universal in every browser * this project targets. * * Same centring as the card: matching max-width and margin-inline:auto * inside the same containing block produces an identical centred * position, so the heading and the card it labels align without * duplicating a computed offset. */ .adapt-related__group:has(.adapt-related__grid > .adapt-clinical-card:only-child) > h2, .adapt-related__group:has(.adapt-related__grid > .adapt-blog-card:only-child) > h2 { max-width: var(--content-reading-width); margin-inline: auto; } /* * The same lone-card problem, in the two places outside the clinical * single where an auto-fit grid can receive exactly one card: the * homepage's Latest Articles section and the blog index's Featured * Articles / listing grids. Measured before fixing: a single blog card * rendered 1232px wide with a 1080px image on both, against 552px when * a second card exists. * * Same cap as the rule above and the same reason — but deliberately * NOT the same alignment, because each context already has its own * established treatment for reading-width content and this follows it * rather than imposing one: * * - Clinical single (rule above): CENTRED. .adapt-clinical-body and * .adapt-clinical .adapt-faq both sit centred at 750px within the * 1232px container, so a lone card centres onto that same column. * - Homepage: LEFT. .adapt-home-section__body is capped at the same * token with no auto margin, sitting flush with its section * heading. * - Blog index: LEFT. .search-form is capped the same way, flush * with the page's headings. * * Only ever fires at exactly one card, so multi-card layouts are * untouched — verified by measurement at 320/390/768/1440. */ .adapt-home-section__grid .adapt-blog-card:only-child, .adapt-featured-articles__grid .adapt-blog-card:only-child, .adapt-blog-listing .adapt-blog-card:only-child { max-width: var(--content-reading-width); } /* * Search results (Phase A, item 4) — the same auto-fit ballooning as * every rule above, on a grid that was previously named in this file's * comment as deliberately out of scope for the clinical-single fix * ("cannot affect the hub or search grids above, they use different * container classes"). Left unfixed since, not deliberately excluded * forever. * * search.php dispatches each result to either card component by post * type, so a lone result can be either — both are covered. LEFT- * aligned, matching search's own established precedent: its h1, * .search-form and results-count h2 are already flush-left at * --content-reading-width (no centring anywhere on this template), so * a lone card joins that same edge rather than the clinical single's * centred column. */ .adapt-search-results__grid .adapt-clinical-card:only-child, .adapt-search-results__grid .adapt-blog-card:only-child { max-width: var(--content-reading-width); } /* * About page media (page-about.php). * * .content-reading-width in the markup already caps and centres it on * the same 750px column as .adapt-about__body, so nothing here repeats * that. This adds only the vertical rhythm and the corner treatment * every other image in the theme carries. */ .adapt-about__media { margin-block: var(--space-2xl); } .adapt-about__media img { border-radius: var(--radius-md); } /* Breadcrumbs (Section 7.8) — theme-owned trail. */ .adapt-breadcrumbs { margin-top: var(--space-md); font-size: var(--font-size-body); } .adapt-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; } .adapt-breadcrumbs li + li::before { content: "/"; margin-right: var(--space-xs); color: var(--color-text-secondary); } .adapt-breadcrumbs [aria-current="page"] { color: var(--color-text-secondary); } /* * WCAG 2.2 SC 2.5.8: breadcrumb links rendered 43x19 and are standalone * navigation targets, so the "inline in a sentence" exception does not * cover them. * * padding-block on an INLINE element rather than a min-height on an * inline-flex one, deliberately. Padding grows the element's box — which * is what the success criterion measures — while leaving the line box * untouched, so the trail does not get 5px taller and nothing below it * moves. The alternative met the criterion by shifting the layout of * every page carrying a trail. */ .adapt-breadcrumbs a { padding-block: var(--space-2xs); } /* Editor-only notices (Section 8.4's missing-Clinical-Type fallback and the archive-header post-type guard). Deliberately conspicuous: these are only ever seen by logged-in editors and exist to be noticed. */ .adapt-editor-notice { margin: var(--space-md) 0; padding: var(--space-sm) var(--space-md); border-left: 4px solid var(--color-error); background-color: var(--color-background-alt); color: var(--color-text); font-weight: var(--font-weight-body-medium); } /* =================================================================== * Hero (Homepage Hero, Standard Clinical Hero) * =================================================================== */ /* Homepage Hero (Section 4.7) — the one hero permitted a secondary action alongside the booking CTA (A4-O7). */ /* Full-width background-image panel (current revision, supersedes the earlier split text/image layout). Deep Navy remains the fallback background — visible for an instant before the image paints, and permanently if neither a featured image nor a placeholder renders — so the surface this sits on is never anything but Section 4.3's Hero colour even in that edge case. Full-bleed as of Stage 2. The geometry that widens it lives in "Full-bleed section bands" below, alongside the three warm bands, so all four bleed by one shared mechanism. No padding shorthand: the inline padding is owned by the band rule, and a shorthand here would reset it. flex + min-height give the image a consistent, premium band height independent of how much hero copy is entered, rather than the image simply being as tall as the text. */ .adapt-home-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(26rem, 60vh, 40rem); margin-block: 0; background-color: var(--color-deep-navy); color: var(--color-white); } .adapt-home-hero__media { position: absolute; inset: 0; z-index: 0; } .adapt-home-hero__media .adapt-home-hero__image, .adapt-home-hero__media .adapt-placeholder { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; display: block; border-radius: 0; } /* * The scrim. One gradient, stronger behind the text column and easing * toward the image on the right, rather than a flat tint over the whole * photograph — the flat version is the "stock banner" look Section 4.1 * explicitly rules out. The left-side stop (0.82) is tuned so white text * holds WCAG AA (4.5:1) against a bright photograph at that opacity * against Deep Navy; it is deliberately not stronger than that. Mobile * below flattens the curve because the text column no longer occupies * only the left portion of the frame. */ .adapt-home-hero__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 100deg, rgba(3, 17, 30, 0.82) 0%, rgba(3, 17, 30, 0.7) 38%, rgba(3, 17, 30, 0.38) 70%, rgba(3, 17, 30, 0.18) 100% ); } @media (max-width: 767.98px) { .adapt-home-hero__overlay { background: linear-gradient( 180deg, rgba(3, 17, 30, 0.68) 0%, rgba(3, 17, 30, 0.82) 100% ); } } /* Scoped to the hero rather than raised in variables.css, because --font-size-h1 is theme.json's mirror and every h1 on the site reads from it. clamp() gives the hero its own fluid curve without touching that token or the responsive steps below it. */ .adapt-home-hero__heading { max-width: 18ch; margin-top: 0; margin-bottom: var(--space-sm); font-size: clamp(2rem, 4.5vw, 3.5rem); letter-spacing: -0.02em; color: var(--color-white); } /* * Warm Background, NOT Light Grey, and not the Slate this rule used * before the panel existed. Both alternatives are prohibited outright by * Section 4.3 — "Slate on Deep Navy" and "Light Grey as any text colour" * — so adding a navy background without changing this line would have * introduced a banned pairing rather than fixed one. Warm Background on * Deep Navy is ~17.5:1 and is the same treatment .site-footer__main * already uses for secondary copy on navy. */ .adapt-home-hero__subtext { max-width: 46ch; font-size: var(--font-size-body-large); color: var(--color-background-alt); } .adapt-home-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0 0; } /* The text stack sits above the media + overlay layers (position makes it a stacking context; without it, painting order would place the two absolutely-positioned layers above this static content instead of below it) and is capped short of the full band width, which is what keeps this reading as a hero with a photograph behind it rather than text stretched across a banner. */ .adapt-home-hero__content { position: relative; z-index: 2; max-width: 42rem; } /* * Buttons invert on the navy panel, and this is a contrast requirement * rather than a stylistic choice. The default primary is an Adapt Blue * fill; Adapt Blue against Deep Navy is ~1.8:1, which fails WCAG 1.4.11's * 3:1 floor for a control's boundary and is the exact pairing Section 4.3 * names as "the one a designer reaches for first". White fill against * navy is 18:1, and the label reads Deep Navy on White at the same ratio. */ .adapt-home-hero .wp-block-button__link { padding: var(--space-sm) var(--space-lg); background-color: var(--color-white); color: var(--color-deep-navy); border-color: var(--color-white); font-weight: var(--font-weight-body-bold); } .adapt-home-hero .wp-block-button__link:hover { background-color: var(--color-background-alt); border-color: var(--color-background-alt); color: var(--color-deep-navy); } /* * Secondary is the outline variant, restated here in white because the * shared .adapt-button--secondary is Adapt Blue on white and cannot serve * a dark surface. Equal specificity to the primary rule above and placed * after it, so source order decides — the anchor carries both classes. */ .adapt-home-hero .adapt-home-hero__secondary { background-color: transparent; color: var(--color-white); border-color: var(--color-white); } .adapt-home-hero .adapt-home-hero__secondary:hover { background-color: var(--color-white); color: var(--color-deep-navy); } /* * This block carried a phone-specific `margin-bottom` and a `padding` * shorthand until Stage 2. Both are gone rather than adjusted: * * - the margin was the last piece of the old margin-based separation, * and being inside a max-width query it outlived the rule it * belonged to, reappearing as a 64px white gap between the navy * hero band and Who We Help at phone widths only; * - the padding shorthand reset padding-inline, which the band rule * below now owns. It was already dead by source order, and leaving * a dead shorthand next to a live longhand is how the next person * reintroduces the bug. * * Vertical space is now the shared rhythm and inline space is the * band's, at every width. */ @media (max-width: 767.98px) { .adapt-home-hero__heading { max-width: none; } } /* Homepage content sections — one shared block serving Who We Help, Why Adapt, treatment steps, services preview, VALD, About preview and latest articles, so section spacing stays consistent down the page. */ /* * VERTICAL RHYTHM IS PADDING, NOT MARGIN (Stage 2). * * These sections separated themselves with margin-bottom, which was * adequate for exactly as long as every section was white: a margin * between two white boxes and a padding inside them look identical. * Once alternating grounds exist they stop being interchangeable — a * margin is dead space belonging to neither band, and a coloured band * with no padding collapses onto its own text. * * The hero joins the same rhythm so the opening band is not a special * case, and Section 4.6's "generous whitespace" still steps up at * tablet and above so the rhythm does not turn into scrolling on a * phone. * * Headings and paragraphs are `margin-top: 0` sitewide (base.css), so * introducing padding-top here cannot double up against a collapsed * child margin. The trailing margin of a last child would otherwise * add to padding-bottom and make every band bottom-heavy, which is * invisible on white and obvious on a colour — hence the :last-child * reset. */ .adapt-home-hero, .adapt-home-section { padding-block: var(--space-2xl); } @media (min-width: 768px) { .adapt-home-hero, .adapt-home-section { padding-block: var(--space-3xl); } } /* * A single hierarchy exception, desktop only (Phase A). * * Every section above reads at the same weight — same gap before a * closely-related section as before a genuine subject change. Who We * Help and Services & Conditions are one continuous argument (who this * is for, then what's offered for them), not two separate ideas, so * the gap between them steps down one token from the shared 3xl rhythm * to 2xl. padding-bottom is untouched, so Services stays symmetric * with the sections that read as separate subjects on its other side. * * Deliberately the only pair changed here. Mobile is unaffected — * that is Phase A's mobile-density item, not this one — and no other * relationship in the page is asserted strongly enough yet to earn the * same treatment. */ @media (min-width: 768px) { .adapt-home-section--services { padding-top: var(--space-2xl); } } .adapt-home-hero > :last-child, .adapt-home-section > :last-child { margin-bottom: 0; } /* ---- Full-bleed section bands (Stage 2) --------------------------- * * The homepage's sections sit inside
, * a 1280px centred box. A background applied to a section is therefore * a 1280px stripe with white margins either side, which reads as a wide * card rather than as a band. * * These two declarations widen the element to the viewport and then put * the container's own inset back as padding. Both calc()s resolve their * 50% against the same unchanged containing block — main's content box * — so the content edge lands exactly where it would have without the * bleed. That is what keeps every band's text aligned with the white * sections above and below it, which is the requirement that ruled out * simply letting the bands set their own inner padding. * * CSS-only and deliberately applied to the existing modifier classes: * no wrapper element, no template part touched, nothing for a future * section to forget to opt into. * * The 100vw / scrollbar overhang this creates is handled once, in * base.css, with overflow-x: clip. Read that comment before changing * anything here — `hidden` there would break the sticky header. */ .adapt-home-hero, .adapt-home-section--services, .adapt-home-section--about, .adapt-home-section--articles { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* * Warm Background on Services, About preview and Latest Articles, * leaving Who We Help, Why Adapt, Treatment Process and Find Us white. * The result alternates ground down the whole page without ever placing * two like-coloured sections next to each other. * * **WHICH SECTIONS ARE WARM IS DERIVED FROM THE SECTION ORDER, NOT * CHOSEN INDEPENDENTLY.** This list held Why Adapt rather than Services * until specification v1.3.13 (Appendix A4-O22) transposed the two in * Section 6.1. Under the new order the old list left white Who We Help * against white Services, and warm Why Adapt against warm About — two * adjacent pairs, and the rhythm collapses wherever that happens. Swap * these selectors whenever front-page.php's order changes; they are one * decision expressed in two files. * * A second Deep Navy band was considered and rejected: navy under the * Treatment Process would force the Adapt Blue step numerals to white * (Adapt Blue on Deep Navy is 1.87:1, prohibited by Section 4.3), and * those numerals are the page's one confident use of the brand colour. * The dark note at the end of the page is the footer's job. * * Why Adapt keeps its two-up grid floor and its Adapt Blue item rules, * which are set elsewhere and are not part of this band decision — only * its ground changes. */ .adapt-home-section--services, .adapt-home-section--about, .adapt-home-section--articles { background-color: var(--color-background-alt); } /* * Find Us and the homepage FAQ are shared parts — contact page and the * clinical templates render them too — so they carry their own margin * instead of .adapt-home-section's rhythm. On the homepage that margin * now disagrees with the bands above them, leaving the page to end on a * gap of the wrong size. * * Converted to the same padding rhythm and scoped to .home, so the * contact page and clinical singles keep the spacing they were built * and signed off with. */ .home .adapt-faq, .home .adapt-location:not(.adapt-location--compact) { margin-block: 0; padding-block: var(--space-2xl); } @media (min-width: 768px) { .home .adapt-faq, .home .adapt-location:not(.adapt-location--compact) { padding-block: var(--space-3xl); } } /* * Find Us is warm; the homepage FAQ stays white (Phase A, item 2). * * The alternation this page relies on — no two like-coloured sections * touching — held everywhere except the last two: Latest Articles * (warm) was followed by FAQ (white) and then Find Us (white), the * only run of two identical grounds on the page. Warming Find Us * continues the same zigzag Articles was already part of, rather than * inventing a new rule: Articles(warm) -> FAQ(white) -> FindUs(warm). * * A second Deep Navy band stays rejected for the reason recorded on * the Services/About/Articles rule above — this uses the one other * ground already in the palette, the same token every other warm band * on this page already uses. * * Scoped to .home and to the full (non-compact) variant only, so the * Contact page's identical markup and the footer's compact columns are * untouched — this is a homepage band decision, not a component * restyle. FAQ is deliberately not included: warming both would * recreate the adjacency this fixes, just one section earlier. */ .home .adapt-location:not(.adapt-location--compact) { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); background-color: var(--color-background-alt); } /* ---- Section image slots ------------------------------------------- * * Layout for the image areas the homepage sections reserve. Like the * split hero above, this is written for the real photography rather * than for the placeholders currently standing in it — the slot, its * position and its size do not change when a photograph replaces the * scaffolding inside it. * * __media is one image belonging to a whole section (Why Adapt, About * preview). __item-media is one image per row (the treatment steps), * where the point is the progression across the four, so each is small * and they read as a sequence rather than four separate features. */ /* * Capped at the reading width rather than left to fill the container. * At 1280px an unconstrained 16:9 slot resolves to 1232x693 — a single * environment shot two-thirds the height of the viewport, which reads * as a hero rather than as support for the copy beside it. The cap is * the same measure the body copy already uses, so the image lines up * with the text column instead of out-running it. * * Left-aligned, not centred: margin-inline-end auto only. */ .adapt-home-section__media { max-width: var(--content-reading-width); margin-top: var(--space-xl); margin-inline-end: auto; } .adapt-home-section__item-media { margin-bottom: var(--space-xs); } /* * Mobile density (Phase A, item 3). Treatment Process is the section * this matters for — four stacked item images, each with its own * gap to the heading below it. --space-sm was this rule's * unconditional value before; it is now the ≥768px value. */ @media (min-width: 768px) { .adapt-home-section__item-media { margin-bottom: var(--space-sm); } } /* * About preview goes two-column at desktop, portrait beside the copy. * * Explicit placement rather than source order: the media div is the * third of four children, so left to itself the grid would drop the * "More about Adapt" link into the second column under the portrait. * Everything except the portrait is pinned to column one, which also * keeps the copy left-aligned exactly as it is at mobile. */ @media (min-width: 1024px) { .adapt-home-section--about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.5fr); column-gap: var(--space-2xl); align-items: start; } .adapt-home-section--about > * { grid-column: 1; } .adapt-home-section--about > .adapt-home-section__media { grid-column: 2; grid-row: 1 / span 3; max-width: none; margin-top: 0; } } .adapt-home-section > h2 { margin-bottom: var(--space-sm); letter-spacing: -0.01em; } /* * Mobile density (Phase A, item 3): every homepage section's heading * gap steps down with the same mobile-first pattern as the grid gaps * above. --space-md was this rule's unconditional value before; it is * now the ≥768px value. */ @media (min-width: 768px) { .adapt-home-section > h2 { margin-bottom: var(--space-md); } } .adapt-home-section__lead { max-width: var(--content-reading-width); font-size: var(--font-size-body-large); color: var(--color-text-secondary); } .adapt-home-section__body { max-width: var(--content-reading-width); } .adapt-home-section__items, .adapt-home-section__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md); margin-top: var(--space-md); } /* * Mobile density (Phase A, item 3). Below 768px every one of these * grids collapses to one column — auto-fit has nowhere else to put a * 280px-floor track on a ~390px screen — so `gap` stops separating * columns and becomes the vertical space between stacked cards * instead. Restoring the wider gap only from tablet up, mobile-first, * matches the convention variables.css already states for component * rules. No new token: the same --space-lg this rule used * unconditionally before is now the ≥768px value. */ @media (min-width: 768px) { .adapt-home-section__items, .adapt-home-section__grid { gap: var(--space-lg); } } /* * Who We Help and Why Adapt carry four rows of 35-45 words each. At the * shared 280px floor that lands as four ~290px columns of small text at * 1280px — the "dense information blocks" Section 4.6 warns against. * A 420px floor resolves to two columns at desktop and one on a phone. * * min() rather than a bare 420px: a floor wider than the track would * overflow the grid on narrow viewports. * * The 280px default is left alone, because the services preview and * latest-articles grids hold cards rather than paragraphs and read * correctly three-up. */ .adapt-home-section--who-we-help .adapt-home-section__items, .adapt-home-section--why-adapt .adapt-home-section__items { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--space-lg); } /* * Same mobile-density reasoning as the default grid gap above, applied * to this pair's own wider gap. --space-xl was this rule's * unconditional value before Phase A; it is now the ≥768px value and * mobile steps down one token to --space-lg, matching what every * other homepage grid uses below 768px. */ @media (min-width: 768px) { .adapt-home-section--who-we-help .adapt-home-section__items, .adapt-home-section--why-adapt .adapt-home-section__items { gap: var(--space-xl); } } /* * Services preview was six items as of 2026-08-06 (up from three), and * auto-fit at the 280px floor above packs four columns at desktop * width — six cards then split 4-and-2, an unbalanced final row auto-fit * has no way to avoid, since it only knows the container width, not the * item count. The three-up read the comment above still promises is a * fixed column count, not auto-fit, from here up. */ @media (min-width: 1024px) { .adapt-home-section--services .adapt-home-section__grid { grid-template-columns: repeat(3, 1fr); } } /* * Treatment process is a fixed four steps, and auto-fit at the 280px * floor above packs three columns at intermediate desktop/tablet widths * — an unbalanced 3-and-1 final row. A fixed 2-column track from tablet * up gives a steady 2x2 at every width in that range instead, matching * the services grid's approach above of overriding auto-fit with a fixed * column count once item count is known. Mobile is untouched: below * 768px this still collapses to one column via the default grid rule. */ @media (min-width: 768px) { .adapt-home-section--treatment .adapt-home-section__items { grid-template-columns: repeat(2, 1fr); } } /* * A rule above each item rather than a box around it. Section 4.6 rejects * "every section placed inside a box" and "excessive cards"; a top border * gives the grid structure without turning four paragraphs into four * panels. * * Adapt Blue at 3px as of Stage 2, where this was 2px Light Grey. This * is the pass's one new use of the brand colour and it is placed rather * than sprinkled: it marks the two sections that carry the positioning * argument — who the clinic is for, and why them — and appears nowhere * else that did not already use blue. * * 3px matches .site-header's blue top border exactly, so the accent * reads as one repeated system mark rather than as a second, slightly * different blue line. On both grounds these rules sit against (White, * and Warm Background on Why Adapt) Adapt Blue clears 9.8:1, well past * the 3:1 floor a meaningful non-text mark needs. */ .adapt-home-section--who-we-help .adapt-home-section__item, .adapt-home-section--why-adapt .adapt-home-section__item { padding-top: var(--space-md); border-top: 3px solid var(--color-adapt-blue); } /* * Hover lift on Who We Help's tiles only — they are the one homepage * tile with a real destination (the pathway link above). Why Adapt's * tiles share the same border-top rule but carry no link, so they are * deliberately excluded here for the same reason cards above exclude * the unlinked homepage tiles. */ .adapt-home-section--who-we-help .adapt-home-section__item { transition: transform 280ms ease; } .adapt-home-section--who-we-help .adapt-home-section__item:hover { transform: translateY(-4px); } /* Treatment process renders as an ordered list; the counter is the design element, so the default marker is suppressed. */ ol.adapt-home-section__items { list-style: none; padding: 0; counter-reset: adapt-step; } ol.adapt-home-section__items > .adapt-home-section__item { counter-increment: adapt-step; } /* The numeral is the design element, so it is set as a block above the step title rather than run inline with it as "1. ". Adapt Blue on White is 10:1 (Section 4.3), and this is a deliberate, contained use of the brand colour rather than the "blue everywhere" Section 4.3 cautions against. */ ol.adapt-home-section__items > .adapt-home-section__item h3::before { content: counter( adapt-step ); display: block; margin-bottom: var(--space-2xs); font-family: var(--font-heading); font-size: var(--font-size-h2); font-weight: var(--font-weight-heading-bold); line-height: 1; color: var(--color-adapt-blue); } .adapt-home-section__item h3 { margin-bottom: var(--space-2xs); } /* * Treatment process steps only: slightly more room (≈8px) between each * stage heading and its paragraph than the 4px default above, requested * to make the step boundary read more clearly. Scoped to * --treatment so Who We Help and Why Adapt keep the tighter default. */ .adapt-home-section--treatment .adapt-home-section__item h3 { margin-bottom: var(--space-xs); } .adapt-home-section__image img { border-radius: var(--radius-md); } .adapt-home-section__more { margin-top: var(--space-md); } /* Same SC 2.5.8 correction as the breadcrumbs, and for the same reason: these are standalone "View all …" actions, not links inside prose. Rendered 227x19 and 134x19 before this. */ .adapt-home-section__more a { padding-block: var(--space-2xs); } /* * Who We Help's per-entry pathway link. Same SC 2.5.8 padding as * __more above, and for the same reason: these are standalone * destinations, not links inside prose. * * Deliberately quiet — no button treatment. Four buttons stacked down a * four-item grid would out-shout the hero's single booking CTA, which * Section 7.11 makes the page's primary action. This is a route, not a * conversion. */ .adapt-home-section__item-link { margin-top: var(--space-sm); margin-bottom: 0; } .adapt-home-section__item-link a { display: inline-block; padding-block: var(--space-2xs); font-weight: var(--font-weight-body-medium); } /* * Standard Clinical Hero — split text/image layout (Clinical Page * Design Specification, Section 1). Same grid mechanism as the * Homepage Hero — same column ratio, same 1024px breakpoint — but a * separately scoped rule: White ground, not full-bleed, no secondary * CTA or social-proof slot. Vertical rhythm is padding, the same * Stage 2 principle as the homepage bands: the hero owns its own * top/bottom space rather than leaning on a margin to the next band. */ .adapt-clinical-hero { margin-block: 0; padding-block: var(--space-2xl); } @media (min-width: 768px) { .adapt-clinical-hero { padding-block: var(--space-3xl); } } @media (min-width: 1024px) { .adapt-clinical-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); column-gap: var(--space-2xl); align-items: center; } } /* * Text panel is left-aligned (Stage 3 direction, current revision — * supersedes an earlier refinement that centred it to read as "a * clinical page title, not a marketing pattern"). Reversed because the * body copy directly below is already left-aligned (only the reading * column itself is centred, not its text — see .adapt-clinical-body * below), and a centred multi-line heading sitting above left-aligned * paragraphs was a seam of its own. Left alignment also scans faster * for long-form heading text, which is the more relevant concern for * clinical pages than for the homepage. The image panel is untouched — * only .adapt-clinical-hero__content's own text and the summary's * centring are affected, the grid's column split is unchanged. */ .adapt-clinical-hero__content { text-align: left; } /* * Below the 1024px grid breakpoint above, .adapt-clinical-hero__content * and .adapt-clinical-hero__image are two stacked block children with * no gap of their own — column-gap only exists once the grid does, so * the buttons sat flush against the image below them at every width up * to 1024px (reported 2026-08-07). Zeroed inside the grid breakpoint so * column-gap stays the only source of spacing there, matching the * "hero owns its own top/bottom space" rhythm noted above. */ .adapt-clinical-hero__content { margin-bottom: var(--space-xl); } @media (min-width: 1024px) { .adapt-clinical-hero__content { margin-bottom: 0; } } .adapt-clinical-hero__title { margin-bottom: var(--space-sm); } .adapt-clinical-hero__summary { max-width: var(--content-reading-width); margin-inline: 0; font-size: var(--font-size-body-large); color: var(--color-text-secondary); } .adapt-clinical-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin: var(--space-lg) 0 0; } /* Sprint 2 (2026-08-20): one plain-text logistics line under the hero CTA. Small and secondary, same tokens as the hero summary text one step up in the visual hierarchy — no box, no icon, no strip. */ .adapt-clinical-hero__logistics { margin: var(--space-sm) 0 0; font-size: var(--font-size-body); color: var(--color-text-secondary); } /* * "Call Us" as its own outline button (owner feedback, 2026-08-06), * matching the header's .site-header__call treatment and superseding * the "or call {number}" text-link version — same Secondary-button * tokens as the Buttons section up top, repeated here for the same * reason: this anchor does not carry core/button's wrapper markup. */ .adapt-clinical-hero__call { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-md); border: 2px solid var(--color-adapt-blue); border-radius: var(--radius-sm); color: var(--color-adapt-blue); font-weight: var(--font-weight-body-medium); text-decoration: none; } .adapt-clinical-hero__call:hover { background-color: var(--color-adapt-blue); color: var(--color-white); } .adapt-clinical-hero__image img { border-radius: var(--radius-md); } /* * Clinical review line — "Clinically reviewed by {name} on {date}". * * This is the strongest expertise signal on a clinical page: a named, * AHPRA-registered practitioner attesting to the content. It rendered * as Slate metadata spanning the full 1232px container while the * disclaimer it pairs with sat at 750px, so it read as a timestamp * rather than an attestation and lined up with nothing around it. * * Three restrained changes, no new values: * - Capped to --content-reading-width so it aligns with * .adapt-disclaimer directly below (measured: both now left 97, * 750px wide). The two are one closing governance pair. * - A top hairline in --color-border. This is the closing area's * existing recipe, not a new device: the standard-variant CTA rule * further down uses the same reading-width + border-top + * --color-border combination. * - Deep Navy instead of Slate, so the line reads as content rather * than as page furniture. * * **This deliberately does NOT re-create the treatment reverted * earlier.** What was rejected (see the closing-area note further down) * was merging review + disclaimer + CTA into one continuous FULL-BLEED * Warm strip, because that read like the homepage's marketing band. * Nothing here is full-bleed, banded, boxed, coloured or badged — it is * contained text with a hairline. The earlier note's "the review line * stays plain text" is superseded to that extent and only that extent; * the disclaimer's independent boxed treatment is untouched. */ .adapt-clinical-review { max-width: var(--content-reading-width); margin-top: var(--space-xl); margin-bottom: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--color-border); color: var(--color-text); font-size: var(--font-size-body); } /* * Clinical body and the template-rendered repeater sections. * * Centred as a column (margin-inline: auto) rather than left-flush * against the container — a deliberate editorial-column treatment * that reads as distinct from the homepage's left-flush, full-width * sections (Clinical Page Design Specification refinement, point 6). * Text inside stays left-aligned by default; only the column itself * is centred on the page, and only h2s (below) centre their own text. */ .adapt-clinical-body, .adapt-clinical-section { max-width: var(--content-reading-width); margin-inline: auto; margin-bottom: var(--space-xl); } /* * Clinical H2 headings centre (refinement point 2) — both the * narrative's own headings ("What is…", "Who It Helps"…) and each * repeater section's label ("Symptoms", "Causes and Risk Factors"…). * Paragraphs and list items are untouched and stay left-aligned * (refinement point 3) — this rule targets h2 only, never body text. * * Extra top spacing (refinement point 5) is body-only: the repeater * sections already separate from one another via the shared * margin-bottom above, so adding more here would double that gap. * Within a single Service/Assessment the_content() block, though, * "What is…", "Who It Helps", "Approach" and "Benefits" are siblings * with no spacing between them at all otherwise — this is pure * spacing, not a new card or box, per refinement point 5. */ .adapt-clinical-body h2, .adapt-clinical-section > h2 { text-align: center; } .adapt-clinical-body h2 { margin-top: var(--space-2xl); } .adapt-clinical-body h2:first-of-type { margin-top: 0; } /* * Left-border accent (Stage 3) — the same 3px Adapt Blue treatment the * homepage already uses on its Who We Help / Why Adapt tiles, reused * here as a border-left rather than border-top since these repeater * items stack as a vertical list rather than sitting in a grid. This is * the "spacing and hierarchy, not colour" lever for Condition's three * repeaters (Symptoms, Causes and Risk Factors, Return-to-Sport): a * structural marker per item, not a background fill, so a page with * several short items does not turn into a stack of boxes. Contrast * checked the same way as the homepage rule: Adapt Blue at 3px against * White clears the 3:1 floor a non-text UI mark needs by a wide margin. */ .adapt-clinical-section__item { padding-left: var(--space-md); margin-bottom: var(--space-lg); border-left: 3px solid var(--color-adapt-blue); } .adapt-clinical-section__item h3 { margin-bottom: var(--space-2xs); } /* * Body media break (Clinical Page Design Specification, Section 2/5) * — one placeholder-only slot shared by Service, Condition and * Assessment (clinical-media-break.php). Same reading-width cap and * left alignment as the homepage's own section media slots * (.adapt-home-section__media), so the page's one body image lines * up with its text column exactly as the homepage's do. */ .adapt-clinical-body__media { max-width: var(--content-reading-width); margin-inline: auto; margin-bottom: var(--space-xl); } /* * No image rule existed for this slot — every other image component in * the theme carries --radius-md (home hero, cards, post images), so a * real photograph landing here would be the one sharp-cornered image on * the page. This is also the single break in a long run of body text * (Clinical Page Design Specification Section 2/5 fixes it at one), so * it carries a little more presence than an inline content image — a * soft shadow, matching the lift shadow cards use elsewhere in this * file — rather than sitting flush with the text column. */ .adapt-clinical-body__media img { border-radius: var(--radius-md); box-shadow: 0 16px 32px -20px rgba(3, 17, 30, 0.32); } /* Related content. */ .adapt-related { padding-block: var(--space-2xl) 0; } @media (min-width: 768px) { .adapt-related { padding-block: var(--space-3xl) 0; } } .adapt-related__group { margin-bottom: var(--space-xl); } /* * Condition-only Warm panel (Stage 3), scoped via the type modifier * class rather than a second template — see single-clinical_content.php. * Not capped to --content-reading-width the way the FAQ/disclaimer * panels are: Related's card grid needs the container's full width to * lay out three cards per row, so reading-width would force an * artificially cramped grid inside the box. "Contained" here means * staying inside
, not matching the * narrower reading column. * * Service and Assessment keep the existing plain treatment — this was * scoped to Condition specifically per the approved Stage 3 direction, * not extended sitewide. */ .adapt-clinical--condition .adapt-related { margin-block: var(--space-xl); padding: var(--space-lg); background-color: var(--color-background-alt); border-radius: var(--radius-md); } @media (min-width: 768px) { .adapt-clinical--condition .adapt-related { padding: var(--space-xl); } } .adapt-clinical--condition .adapt-related__group:last-child { margin-bottom: 0; } .adapt-disclaimer { max-width: var(--content-reading-width); margin: var(--space-xl) 0; padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-background-alt); color: var(--color-text-secondary); font-size: var(--font-size-body); } /* * Assessment-expectation callout (current revision) — authored as a * Group block inside post_content with this additional CSS class, not * a template part: the content is page-specific prose, not a repeating * structural element, so it belongs in the block editor rather than in * a new template file or ACF field. No max-width/margin-inline here, * unlike .adapt-disclaimer above — this one is never called outside * .adapt-clinical-body, which already caps and centres the reading * column, so repeating that would be redundant rather than wrong. * Same Warm/bordered/boxed recipe as the disclaimer and FAQ panel, * reused rather than invented, per "reuse existing design patterns." */ .adapt-clinical-body .adapt-clinical-callout { margin-block: var(--space-lg); padding: var(--space-md); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-background-alt); color: var(--color-text); } .adapt-clinical-body .adapt-clinical-callout p { margin: 0; } /* * ---- Closing area — Clinical Review, Disclaimer, CTA ---------------- * * Deliberately NOT a merged full-bleed band. An earlier pass merged * these three into one continuous full-bleed Warm strip; reviewed * against the homepage it read as too close to that full-width * marketing-band device (Clinical Page Design Specification * refinement, points 4 and 6). Reverted: .adapt-disclaimer keeps its * original, independent, already-Warm treatment (background-color: * var(--color-background-alt) above) — contained, boxed, not * edge-to-edge. * * This note previously ended "and the review line stays plain text." * That is superseded, narrowly: .adapt-clinical-review now carries a * reading-width cap, a top hairline and Deep Navy text (see its own * block above). **The full-bleed band this paragraph rejects is still * rejected** — the review line's treatment is contained, unbanded and * unboxed, and it re-uses the same border-top recipe the CTA rule * below already uses in this area rather than reviving the merged * strip. * * The CTA itself had one further, separate refinement here (CTA * duplication review): a de-emphasis pass rather than removal, on the * reasoning that this closing CTA is the primary, contextual next step * while the footer band is the sitewide, ambient one. Stage 2 revisited * that call and removed the standard-variant CTA from * single-clinical_content.php entirely instead (see that file) — de- * emphasis alone was still reading as a duplicate. This rule stays, * doing nothing for Service/Condition today, as a defensive style for * any future standard-variant CTA rendered inside .adapt-clinical, and * because the performance variant it explicitly excludes is unaffected * either way. Contact page's identical .adapt-cta (page-contact.php) is * untouched by this scoping, and the button itself * (.wp-block-button__link) is not touched at all. */ .adapt-clinical .adapt-cta:not(.adapt-cta--performance) { max-width: var(--content-reading-width); margin-inline: auto; margin-block: var(--space-2xl); padding: var(--space-lg) 0 0; background-color: transparent; border-top: 1px solid var(--color-border); border-radius: 0; text-align: center; } /* =================================================================== * FAQ Accordion * * Native
/ — no JavaScript. Browsers provide keyboard * operation, focus handling and screen-reader semantics for free * (Section 4.7's accessibility requirement, Section 8.8's minimal-JS * preference). Motion is limited to Section 4.8's permitted set. * =================================================================== */ .adapt-faq { max-width: var(--content-reading-width); margin: var(--space-2xl) 0; } .adapt-faq__item { border-bottom: 1px solid var(--color-border); } /* * Flex row, question text against a trailing custom arrow (Clinical * Page Design Specification, Section 4). Text is summary's own * anonymous flex item; ::after below is the second — no wrapping * span needed. list-style/-webkit-details-marker suppress the * browser's native disclosure triangle, which previously had no * relationship to the design system at all (no brand colour, no * consistent shape across browsers). * * Padding raised from space-sm to space-md — Section 4.6's "generous * whitespace," and consistent with the touch-target discipline * .adapt-breadcrumbs a / .adapt-home-section__more a already use in * this file for the same WCAG 2.5.8 reason. */ .adapt-faq__question { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-block: var(--space-md); list-style: none; cursor: pointer; font-family: var(--font-heading); font-weight: var(--font-weight-heading-semibold); font-size: var(--font-size-h3); line-height: var(--line-height-heading); color: var(--color-text); } .adapt-faq__question::-webkit-details-marker { display: none; } .adapt-faq__question:hover { color: var(--color-adapt-blue); } /* * Same chevron shape and rotation as .primary-navigation__chevron, * reused rather than redrawn (Section 4.7: components must be * reusable) — implemented as ::after rather than a markup span * because this element has no child to attach a class to, and a * generated box is decorative by construction: it is never in the * accessibility tree, so no aria-hidden is needed. Rotation transition * is covered by base.css's global prefers-reduced-motion block; no * component-level reduced-motion rule is needed here. */ .adapt-faq__question::after { content: ""; flex-shrink: 0; width: 0.625rem; height: 0.625rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 150ms ease; } .adapt-faq__item[open] .adapt-faq__question::after { transform: rotate(-135deg); } .adapt-faq__answer { padding-bottom: var(--space-sm); color: var(--color-text-secondary); } /* * ---- FAQ panel on clinical singles (Band C) -------------------------- * * Clinical Page Design Specification, Sections 2 and 3, refined: * a contained Warm panel at the same reading width and centring as * the clinical body above it — not a full-bleed edge-to-edge band. * An earlier pass used the homepage's own full-bleed band mechanism * here; on review that read as too close to a homepage/marketing * section (refinement points 4 and 6), so this keeps the Warm * Background the spec calls for while staying contained, matching * the page's own column rather than the viewport. Scoped to * .adapt-clinical so the homepage's own FAQ (.home .adapt-faq, which * stays white and full-bleed by its own existing rule) is unaffected. */ .adapt-clinical .adapt-faq { max-width: var(--content-reading-width); margin-inline: auto; padding: var(--space-lg); background-color: var(--color-background-alt); border-radius: var(--radius-md); } /* Same responsive step-up as the homepage's own section rhythm (Section 4.6's "generous whitespace" scaling at tablet+), applied here rather than to the shared .adapt-faq base rule so the homepage FAQ's own, separately-set rhythm is untouched. */ @media (min-width: 768px) { .adapt-clinical .adapt-faq { margin-block: var(--space-3xl); } } /* * Heading only — the clinical body's h2s are centred (Clinical Page * Design Specification refinement, point 2) but this panel's own * "Frequently Asked Questions" heading was left out of that rule and * stayed left-aligned, which read as an unresolved seam right below a * page full of centred section headings. Questions and answers are * deliberately untouched: text-align is set on the h2 itself, not on * .adapt-clinical .adapt-faq, so it does not cascade to * .adapt-faq__question / .adapt-faq__answer, which stay left-aligned * for readability. Scoped the same way as the panel above, so the * homepage's own FAQ (.home .adapt-faq) is unaffected. */ .adapt-clinical .adapt-faq h2 { text-align: center; } /* =================================================================== * Navigation (desktop mega-menu, mobile slide-in, persistent Book CTA) * * Option 3, "Hybrid" — owner-approved 2026-08-02. White clinical bar on * a 3px Adapt Blue brand rule; Warm Background mega-menu; Adapt Blue * CTA. Blue is spent in exactly two places, which is what Section 4.3's * "use it confidently but avoid overuse" describes. Section 4.2's * hierarchy — healthcare first, performance second — is why the bar is * white rather than navy. * * Mobile-first, per the W5.2 responsive contract: base rules are the * drawer, and min-width queries add the desktop bar. The drawer covers * BOTH mobile and tablet, switching at 1024px, because hover is * unreliable on touch — the same boundary assets/js/main.js uses, and * they must not drift apart. * * The CTA is not restyled here. It carries .wp-block-button__link, so * the Buttons section above already gives it Adapt Blue fill, white * label and the hover to Deep Navy. Only nav-specific sizing is set * below — restating the colours would be the duplication Section 8.6 * exists to prevent. * * Focus rings are global (base.css) and are never overridden here. That * was the deciding factor against the dark-header option: Adapt Blue on * Deep Navy measures 1.87:1, so a navy bar would have needed a white * focus ring and a documented deviation from Section 4.3. * =================================================================== */ /* Sticky so the drawer's close control stays reachable. Without it, a visitor who scrolls and then opens the drawer has the hamburger off-screen behind a fixed panel, reachable only by Escape. */ .site-header { position: sticky; top: 0; z-index: 30; background-color: var(--color-background); border-top: 3px solid var(--color-adapt-blue); border-bottom: 1px solid var(--color-border); } .site-header__inner { display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-xs); padding-bottom: var(--space-xs); } /* Branding. No logo is uploaded yet, so the site name renders as text — styled as a deliberate wordmark rather than left looking like a fallback. Swaps cleanly once global_logo is populated. */ .site-branding { margin: 0; margin-right: auto; min-width: 0; } /* * Sized down on small screens. A text wordmark shares the bar with the * CTA and the hamburger, leaving it roughly 157px at 375px — and the * current site name is 38 characters, so it wraps. Measured, not * assumed: at the desktop size it took three lines and an 89px header. * * This is a placeholder problem more than a design one. Once global_logo * is uploaded the branding becomes an image and none of this applies; * until then the fallback still has to look deliberate, and a site name * is not something a theme may truncate to make its layout work. */ .site-branding__link { display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: var(--font-weight-heading-bold); font-size: var(--font-size-body); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-adapt-blue); text-decoration: none; text-wrap: balance; } .site-branding__logo { display: block; width: auto; max-height: 48px; } /* Hamburger. Three bars from one element: the span is the middle bar, its pseudo-elements the outer two. */ /* * flex-shrink: 0 is load-bearing, not tidiness. Without it the button is * a shrinkable flex item and the branding squeezes it to 22px wide — * measured on every page at 375px after W5.5 shipped, which is both a * WCAG 2.2 SC 2.5.8 failure (24px minimum) and genuinely awkward to hit. * The declared 44px is the Section 1 touch target and must survive * whatever the branding does. */ .site-header__toggle { order: 3; display: flex; flex: 0 0 44px; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-sm); background-color: transparent; color: var(--color-text); cursor: pointer; } .site-header__toggle-icon, .site-header__toggle-icon::before, .site-header__toggle-icon::after { display: block; width: 22px; height: 2px; border-radius: 2px; background-color: currentColor; transition: transform 150ms ease, opacity 150ms ease, background-color 150ms ease; } .site-header__toggle-icon { position: relative; } .site-header__toggle-icon::before, .site-header__toggle-icon::after { content: ""; position: absolute; left: 0; } .site-header__toggle-icon::before { top: -7px; } .site-header__toggle-icon::after { top: 7px; } /* * The toggle is the drawer's only close control (main.js's setDrawer() * already flips aria-expanded on click), but with three static bars it * never *read* as one — this morphs the icon to an X when expanded, * the same aria-expanded-driven technique the disclosure chevron above * already uses, so the drawer's close affordance is visible rather than * only functional. */ .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon { background-color: transparent; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before { top: 0; transform: rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after { top: 0; transform: rotate(-45deg); } /* Persistent CTA. Sits between branding and the hamburger on small screens and last on desktop — visible at every width, never inside the drawer. */ .site-header__action { display: flex; align-items: center; gap: var(--space-sm); order: 2; margin: 0; } .site-header__cta { white-space: nowrap; font-weight: var(--font-weight-body-bold); transition: background-color 150ms ease; } /* * Click-to-call beside the persistent nav CTA (audit item 6), styled as * the same Secondary/outline button defined above rather than as a * plain link (owner feedback, 2026-08-06) — a text link was too weak a * target beside a filled button, but making it a second filled button * would compete with Book Now for which action actually matters. Values * are the outline variant's own tokens, repeated rather than shared, * because that variant's selector expects core/button's wrapper markup * (.wp-block-button.adapt-button--secondary .wp-block-button__link), * which this template-generated anchor does not carry. * * Hidden below 768px: the header row is already tight between branding, * the Book Now button and the drawer toggle at phone widths, and a * phone number is one tap away on the Contact page and in the drawer's * footer once Wave 5's footer band is in view. */ .site-header__call { display: none; align-items: center; white-space: nowrap; padding: var(--space-xs) var(--space-md); border: 2px solid var(--color-adapt-blue); border-radius: var(--radius-sm); color: var(--color-adapt-blue); font-weight: var(--font-weight-body-medium); text-decoration: none; } .site-header__call:hover { background-color: var(--color-adapt-blue); color: var(--color-white); } @media (min-width: 768px) { .site-header__call { display: inline-flex; } } /* -------- Drawer: the default, up to 1023.98px -------------------- */ .primary-navigation { position: fixed; top: 0; right: 0; bottom: 0; z-index: 20; width: min(88%, 340px); padding-top: calc(var(--space-3xl) + var(--space-sm)); overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-background-alt); border-left: 1px solid var(--color-border); transform: translateX(0); visibility: visible; transition: transform 250ms ease, visibility 0s; } /* * The drawer's closed state. * * assets/js/main.js sets the `hidden` PROPERTY, whose user-agent style * is display:none — and a transform cannot animate on a display:none * element. Overriding that back to `display: block` and hiding with * `visibility` instead is what lets the panel slide, with no change to * the JavaScript. * * visibility:hidden is the correct substitute rather than opacity: it * removes the drawer from the accessibility tree AND the tab order, * which is exactly the contract main.js relies on. The `hidden` * attribute itself is untouched, so every attribute-based check in that * file still reads true. * * The delay is what makes the slide-out visible: visibility flips only * after the transform has finished. */ .primary-navigation[hidden] { display: block; transform: translateX(100%); visibility: hidden; transition: transform 250ms ease, visibility 0s linear 250ms; } /* * Under reduced motion the transform is neutralised by base.css, but its * !important applies to duration, not delay — leaving the drawer * technically visible off-screen for 250ms. Zeroing the delay here keeps * open and closed instantaneous, which is what the preference asks for. */ @media (prefers-reduced-motion: reduce) { .primary-navigation[hidden] { transition-delay: 0s; } } .primary-navigation__menu, .primary-navigation .sub-menu { margin: 0; padding: 0; list-style: none; } .primary-navigation__menu > .menu-item { border-bottom: 1px solid var(--color-border); } /* 48px minimum on every row (WCAG 2.2 SC 2.5.8 asks for 24; touch guidance and Section 4.6's spacing both argue for more). */ .primary-navigation__menu a, .primary-navigation__disclosure { display: flex; align-items: center; width: 100%; min-height: 48px; padding: var(--space-xs) var(--space-md); border: 0; background-color: transparent; font-family: var(--font-body); font-size: var(--font-size-body); font-weight: var(--font-weight-body-medium); line-height: var(--line-height-body); color: var(--color-text); text-align: left; text-decoration: none; cursor: pointer; } .primary-navigation__menu a:hover, .primary-navigation__disclosure:hover { color: var(--color-adapt-blue); } .primary-navigation__menu a[aria-current="page"] { color: var(--color-adapt-blue); font-weight: var(--font-weight-body-bold); } .primary-navigation__disclosure { justify-content: space-between; } .primary-navigation__chevron { flex: 0 0 auto; width: 8px; height: 8px; margin-left: var(--space-xs); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transform-origin: center; transition: transform 150ms ease; } .primary-navigation__disclosure[aria-expanded="true"] .primary-navigation__chevron, .primary-navigation__column-toggle[aria-expanded="true"] .primary-navigation__chevron { transform: rotate(-135deg); } /* * Column toggle — a second disclosure level nested inside a panel, so a * long Conditions drawer (five columns as of the Hip & Groin cluster) * opens collapsed rather than dumping every link into one scroll (audit * item 20). Button-reset to inherit nothing but what's set below; * flex/space-between lands the chevron at the same right edge the * top-level disclosure's does. */ .primary-navigation__column-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: var(--space-sm) var(--space-md) var(--space-2xs); border: 0; background-color: transparent; cursor: pointer; color: var(--color-adapt-blue); } .primary-navigation__column-label { font-family: var(--font-heading); font-size: 0.75rem; font-weight: var(--font-weight-heading-bold); letter-spacing: 0.11em; text-transform: uppercase; color: inherit; } /* * No CSS collapse rule here — main.js sets the `hidden` attribute on the *