/* Huntington Beach Chiropractic - main stylesheet. * * Hand-written CSS only. No framework, no build step, no preprocessor. * Written append-only in numbered sections so later work never overrides * earlier work by accident. * * SECTIONS * 01 Design tokens * 02 Base * 03 Shared utilities * 04 Site header * 05 Mobile menu * 06 Site footer * 07 Responsive * 08 Article feed (component) * 09 Homepage sections * * STAGE 1 - SKELETON ONLY. There are no page sections in this file and * there should not be until copy lands. Sections 08 onward are reserved. */ /* ================================================================== * 01 DESIGN TOKENS * * SOURCE OF TRUTH * Figma file wwL8CzZ1v3k04rJS9kaRnq (HB Chiropractic) * Frame 513:2393 * "(unverified) Homepage - Synthesis [ACTIVE - future * edits go here]" * Pulled 2026-08-19 * * Only that frame was read. The file holds nine other page frames and * an icon reference board; all were ignored on instruction. * * Every COLOUR below is an exact value - either a published Figma * variable (marked "Figma var") or a literal read out of the frame * (marked "read from"). Nothing here was eyeballed, sampled from an * image, or approximated. * * This block remains the ONLY place a colour or size value may live. * No hex code and no pixel number appears anywhere else in this * stylesheet or in any template. * ================================================================== */ :root { /* ---- 1.1 Colour - PUBLISHED FIGMA VARIABLES ---- * The file publishes eleven variables. These are them, one to one. * Figma's names are kept in the comments so the two sets can be * read against each other. */ --ink: #141413; /* Figma var: color/ink */ --ink-muted: #5c5b57; /* Figma var: color/ink-secondary */ --surface: #ffffff; /* Figma var: color/paper */ --surface-alt: #f5f4f1; /* Figma var: color/paper-alt */ --surface-invert: #141413; /* = color/ink, used as a ground */ --on-invert: #ffffff; /* Figma var: color/ink-inverse */ --rule: #dddbd6; /* Figma var: color/line */ /* ---- 1.2 Colour - THE ACCENT ---- * * AMBER, not the bronze placeholder this file used to carry. The * design leans on it hard: it is the fill and border of every * primary CTA, the "live" state in the process diagrams, and the * one warm note against an otherwise neutral page. * * !! --accent-contrast IS INK, NOT WHITE. Every amber button in the * frame sets its label to color/ink. White on this amber measures * about 1.9:1 and would fail contrast outright; the design never * does it. Do not "fix" this to white. * * !! AMBER IS A SURFACE COLOUR, NOT A TEXT COLOUR. In the frame it * is never used for text on a light ground - only as a fill, a * border, or a rule. See the note in section 02 about link and * hover states, which currently spend it as text and need a * decision. */ --accent: #fbb03c; /* Figma var: var(--color-amber) */ --accent-contrast: #141413; /* read from: every amber CTA label */ /* Glow beneath the primary CTA. Read from the canonical button * component (350:81): DROP_SHADOW rgba(255,139,0,0.35), offset * (0,4), blur 7.5. Its own colour, not a tint of --accent. */ --accent-glow: 0 4px 7.5px rgba(255, 139, 0, 0.35); /* ---- 1.2b THE GLASS-AMBER PILL ---- * * Figma describes the button component (362:2 / 350:81) as a * "glass-amber pill: shader gradient fill, glossy multi-stop * gradient border, GLASS blur effect". A shader fill has no CSS * equivalent and Figma exports only the flat amber, which is why * this shipped as a plain amber lozenge and read as one. * * These four values are the buildable reading of that description. * Each does one job: * * --accent-fill the body of the pill. Lighter at the top than * the bottom, which is what makes it look lit * from above rather than filled in. * --accent-gloss the highlight ACROSS THE TOP HALF only. This is * the "glossy" part - a second layer, not a * darker stop on the first, because a gradient * that both lightens and darkens reads as muddy. * --accent-rim the multi-stop border. NOT a simple top-down * fade: Figma calls it a "glossy multi-stop * gradient border", and what makes a ring read as * METAL rather than as a highlight is TWO * speculars with a darker band between them - a * bright top edge, a warm shadow through the * middle, and a second catch along the bottom. * One fade alone just looks like a lit edge. * --accent-lift the drop shadow plus the halo. The halo is what * the "GLASS blur" leaves behind once the blur * itself is gone. */ --accent-fill: linear-gradient(180deg, #fdc262 0%, #fbb03c 46%, #f0a02a 100%); --accent-gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 62%); --accent-rim: linear-gradient( 180deg, rgba(255, 255, 255, 0.95) 0%, /* top specular */ rgba(255, 243, 214, 0.70) 20%, rgba(166, 108, 16, 0.40) 54%, /* the darker band */ rgba(255, 238, 196, 0.60) 84%, rgba(255, 255, 255, 0.90) 100% /* the second catch, beneath */ ); --accent-lift: 0 4px 7.5px rgba(255, 139, 0, 0.35), 0 0 18px rgba(251, 176, 60, 0.45); /* ---- 1.3 Colour - NAVY ---- * The second brand colour. Carries the full-width "Button Card" * panels and the outline of the "How We Do It Differently" panel. * * The design paints those panels as a vertical gradient, so the * deep end is a real value the palette needs even though Figma * publishes only the light end as a variable. */ --navy: #205e96; /* Figma var: color/navy */ --navy-deep: #102c46; /* read from: Button Card gradient end 513:2700 */ --gradient-navy: linear-gradient(180deg, var(--navy), var(--navy-deep)); /* The STATEMENT PANEL's ground - the navy block on the Chiropractic * Adjustments page (553:18). Its own token because it is not the bar * gradient above and not the diagonal the Proof and Credentials * panels use: sampled at the eight edge points of the frame, it runs * LIGHTEST AT THE TOP RIGHT (#1f5c92, which is --navy almost * exactly) into near-black at the bottom right (#010204), with a * separate lighter blue lifting the BOTTOM LEFT corner (#243e7e). * * A top-right-to-bottom-left linear gradient cannot do that - the * corner it would make darkest is the one the design makes light - * so it is a radial lift over a linear base. Both layers are built * from --navy and --navy-deep; no third blue is introduced, which is * why the bottom-left corner is a shade cooler than the frame's. */ --gradient-navy-panel: radial-gradient(80% 110% at 0% 100%, rgba(32, 94, 150, 0.5) 0%, rgba(32, 94, 150, 0) 60%), linear-gradient(200deg, var(--navy) 0%, var(--navy-deep) 65%); /* Halo around the bordered navy panel. Read from 513:2535: * DROP_SHADOW rgba(96,171,238,0.33), offset (0,0), blur 50. The * colour is a lighter blue than --navy and is not derived from it. */ --navy-glow: 0 0 50px rgba(96, 171, 238, 0.33); /* The lit edge ON a navy ground. Read off Figma 876:93, the open-days * card on the contact page, which draws a 2px #69b8ff border against * --navy so the card reads as raised rather than as a flat block. * * !! IT IS NOT A TINT OF --navy AND IT IS NOT --navy-glow's COLOUR. * The glow is rgb(96,171,238) at 33% in a shadow; this is a solid * stroke three points brighter. Close enough to look like a mistake * if the two are ever collapsed, far enough apart that collapsing * them changes the card. Tokenised here because section 01 is the * only place a colour may live - the same call section 20 made about * the field fill rather than typing #f2f2f2 into a rule. */ --navy-lit: #69b8ff; /* ---- 1.4 Colour - DIAGRAM AND STATUS ---- * The process diagrams use a green "done" state and a red "problem" * eyebrow. Tokenised because they are real design values that would * otherwise be typed into a section by hand later. */ --success: #2e965f; /* Figma var: diagram/step-green */ --success-glow: 0 0 13.75px rgba(46, 150, 95, 0.55); /* read from 513:2572 */ --alert: #ff1a1a; /* read from: "THE PROBLEM" eyebrow 513:2497 */ /* ---- CARD NETWORK COLOURS ---- * * !! THESE ARE THE ONLY VALUES IN THIS BLOCK THAT DID NOT COME FROM * THE FIGMA FILE, AND THEY ARE NOT DESIGN DECISIONS. They are the * four card networks' own published brand colours, used by the * trust row on the checkout (section 21.4b) and nowhere else. They * live here rather than in the row's own rules for the reason * stated at the top of this section: this block is the only place * in the theme a colour is allowed to exist, and an exception for * "colours that are somebody else's" would be the end of that rule. * * Nothing else in the theme may use them. If a fifth network is * ever accepted, it gets a line here and a rule in 21.4b - not a * hex code next to the drawing. */ --brand-visa: #1434cb; /* Visa brand blue */ --brand-mastercard-a: #eb001b; /* Mastercard, left disc */ --brand-mastercard-b: #f79e1b; /* Mastercard, right disc */ --brand-mastercard-ab: #ff5f00; /* Mastercard, the overlap */ --brand-amex: #006fcf; /* American Express blue */ --brand-discover: #ff6000; /* Discover orange */ /* Neutral chip fill for inactive diagram steps. * Figma var "Fills/Primary", #78787833 - a 20% alpha grey. */ --fill-muted: rgba(120, 120, 120, 0.2); /* THE BRAND'S LIGHT TINT. A NAVY TINT, NOT A GREY. * * --surface-alt was tried first and is only about 2% off white - * technically a fill, visually nothing. This is dark enough to * register at a glance and tinted so it belongs to the brand rather * than looking like a disabled state. * * RENAMED from --fill-hover, and the rename is the point: it started * as the dropdown row's hover ground and is now also the RESTING fill * of the condition chips, which never hover at all. A name that says * "hover" on a static element is the small kind of lie that gets a * second, identical value typed in beside it six months later. */ --fill-tint: rgba(32, 94, 150, 0.10); /* The same tint, one step deeper, for a HOVER on something already * wearing --fill-tint at rest. Both are the same navy at two * alphas, so they can never drift into two different blues. */ --fill-tint-strong: rgba(32, 94, 150, 0.18); /* THE REVIEW CARD'S FILL. Sampled off the Reviews frame's own card * nodes (717:3 and its four siblings): a soft diagonal ramp from * near-white at the top left to a pale navy tint at the bottom * right. It is the one surface on this site that is neither * --surface nor --surface-alt, and it is what makes a review card * read as a quoted object rather than as another content tile. * * !! THE FRAME ALSO EXPORTS THIS AS A RASTER (media 167, * reviews-Review-Card-Background, 388x249 RGBA at max alpha 161) * AND THAT EXPORT IS DELIBERATELY NOT USED. The cards are three * different heights in the frame alone and a fourth on a phone, so * a fixed-size translucent PNG stretched to fit would band and * shift its ramp on every card. Two stops in CSS cost nothing and * scale exactly. Declining the export is the decision, not an * oversight - see 16.3. */ --gradient-review-card: linear-gradient(135deg, #f9f9f9 0%, #d5e4f1 100%); /* ---- 1.5 Colour - NOT DEFINED BY THE DESIGN ---- * Retained from the placeholder set. The frame contains no * equivalent, so these are the theme's own and are flagged as such. * If the designer supplies real values, they replace these. */ --ink-subtle: #8A8A8A; /* third ink step */ --rule-invert: rgba(255, 255, 255, 0.15); /* hairline on dark */ /* Secondary text on a dark ground. Unlike the two above this IS a * design value - the photo-strip subtext is drawn at exactly this * alpha (513:2480) - but the frame publishes no variable for it, so * it lives here with the theme's own. */ --on-invert-muted: rgba(255, 255, 255, 0.85); /* ---- 1.6 Elevation ---- * Figma effect variable "Shadow/Card": DROP_SHADOW #00000014, * offset (0,2), radius 12, spread 0. The 14 suffix is 8% alpha. * * Figma's blur radius maps 1:1 onto a CSS box-shadow blur, which is * how this is consumed. The frame's own CSS export confirms it - * the Button Cards read * shadow-[0px_2px_12px_0px_rgba(0,0,0,0.08)], exactly this. * * (A Tailwind `drop-shadow-` filter on the same node shows 6px * instead, because the CSS filter takes a standard deviation rather * than a blur radius. That is the filter's scale, not a second * design value - do not copy the 6.) */ --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08); /* The three process tiles sit on --surface-alt, not on white, and * Shadow/Card at 8% barely registers against a tinted ground - the * tiles read as flat cutouts. This is the same shadow given a * second, wider pass so the card lifts off the cream the way the * design draws it. Only the tiles use it. */ --shadow-tile: 0 1px 2px rgba(20, 20, 19, 0.06), 0 8px 24px rgba(20, 20, 19, 0.10); /* The photo cards in the strip carry a heavier lift than the panels * do. Read from 513:2476: DROP_SHADOW rgba(20,20,19,0.12), offset * (0,10), blur 15. Its own value, not a scale of --shadow-card. */ --shadow-photo: 0 10px 15px rgba(20, 20, 19, 0.12); /* The dark wash under the photo-strip captions. Read from 513:2478: * a linear gradient, transparent at the top to solid black at the * bottom. It is an elevation device rather than a colour - the * caption is legible because of it - so it lives with the shadows. */ --scrim-photo: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); /* ---- 1.7 Typography - FAMILY ---- * * TWO FAMILIES, not the frame's one. Inter was the design's choice * and it is a fine workhorse, but it carried none of this practice * in it - the page read as competent and anonymous. * * LEXEND body. Drawn for reading proficiency, and the face Gerek * already uses on his own sites. * SORA headings. Geometric like Lexend so the two agree, but * tighter and more angular, which is what gives a heading * its authority. It also sets narrower than Lexend, worth * real lines on an 83-character hero headline. * * Both are SIL Open Font License 1.1: free commercially, free to * self-host, no paid licence. Loaded from Google Fonts in * functions.php - and BOTH must be requested there or the heading * face silently falls back to the body face and nothing looks * broken enough to notice. * * The fallbacks are metric-adjacent grotesques so a failed webfont * load does not reflow the page into a different shape. */ --font-heading: "Sora", "Lexend", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --font-body: "Lexend", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* ---- 1.8 Typography - SIZE SCALE ---- * * ANCHORED ON A 20px BODY, NOT ON THE FIGMA FRAME. * * The frame is a guide, not a specification - the same call already * written into Peninsula's stylesheet, which labels its own frame * width "reference only". The frame's running copy sits between 16 * and 20 depending on the block; this file used to take the bottom * of that range for everything, which is too small to read * comfortably on a modern desktop. * * THE STANDING RULE, and it is a rule rather than a reading: * 22px running copy on desktop, laptop and tablet * 18px running copy on mobile (the <=767 step in 1.8b) * * 22 rather than 20 because that is what Peninsula already uses - * --type-body: var(--font-size-22) - and the two sites should not * disagree about what a paragraph looks like. * * The headings are then sized to hold their hierarchy AGAINST that * 20, not copied off the frame - a 36px H1 over 20px body is only * 1.8x and reads as a bold paragraph rather than a headline. The * scale below steps at roughly 1.27, so each level is clearly its * own rank at a glance. * * 50 H1 - hero headline, and the Button Card titles * 40 H2 - every section heading * 30 H3 - diagram panel titles * 26 H4 - sub-section headings, process step numbers * 23 H5 - process card titles * 24 body-lg - the Proof section's running copy * 22 body - default running copy <- THE RULE * 19 ui / small - CTA labels, card body * 17 detail - header CTA, footer address and links * 15 xs - Proof Bar stat labels * 13 eyebrow - the pill eyebrows * * H1 is 50 rather than the 52-58 the ratio would suggest: this * site's headline is 83 characters long, far longer than the pages * this scale came from, and anything bigger turns the hero into six * lines of type with no room for the photograph beside it. * * The ladder in 1.8b steps the headings at four breakpoints and * drops the body to 18 at the mobile one. */ --type-h1: 50px; /* The HERO headline runs smaller than every other H1 on the site. * It is 83 characters long - "Huntington Beach Chiropractic: * Chiropractic Adjustments Built On Data, Not Guesswork" - and at 50 * it needed five lines, which pushed the hero panel tall enough that * the photograph behind it had to scale up ~25% to keep covering. * The result was a close-up of Dr. Michael's shoulder. Sizing the * headline is what fixes the photograph. * * 42 -> 52 -> 46 -> 57, all on 2026-08-25, and the last jump was * bought by the COPY, not by CSS. The headline used to read * "Huntington Beach Chiropractic: Chiropractic Adjustments..." - the * word twice, and at any size that held four lines it started two of * them. Cutting the second "Chiropractic" took the line from 84 * characters to 71 and paid for eleven pixels of headline. * * !! 57 IS A MEASURED CEILING, NOT A PREFERENCE. Against the 740px * copy column it is the LARGEST size that still sets in four lines - * 58 goes to five. Found by stepping this property on the rendered * page and counting line boxes, not estimated. * * So it is tied to the H1's exact wording. CHANGE THE HEADLINE COPY * AND THIS NUMBER HAS TO BE RE-MEASURED - one longer word spills it. * Widening the column would buy more, but the copy already ends * around half the panel and any further runs into the subject of the * photograph. */ --type-h1-hero: 57px; /* The hero's opening line, one step above body. It is the only * sentence above the fold and at plain body size it read as a * caption under the headline rather than a statement beside it. */ --type-hero-lede: 26px; --type-h2: 40px; --type-h3: 30px; --type-h4: 26px; --type-h5: 23px; --type-brand: 24px; /* footer brand lockup (513:2748) */ --type-body-lg: 24px; /* Proof section running copy */ --type-body: 22px; --type-ui: 19px; --type-small: 19px; /* RENAMED from --type-eyebrow-lg. When the header and footer were * pulled, 14px turned out to carry the header CTA label, the footer * address, the footer phone and the footer links as well as the hero * eyebrow - a general small-text size, not an eyebrow variant. The * old name would have been wrong at four of its five uses. */ --type-detail: 17px; --type-xs: 15px; --type-eyebrow: 13px; /* NOT FOUND IN THE DESIGN. The frame has nothing smaller than 12px. * Retained because the footer legal line and the hamburger label * use it, and dropping it would push those onto a size the design * does use. Flagged for the designer. */ --type-micro: 11px; /* Header navigation size. DELIBERATELY ITS OWN TOKEN - the header * is chrome, not content, and should be re-scalable without moving * page type. Nothing outside section 04 may use it. * * The design's Nav Links row (513:2428) sets 15px Regular, and that * is what this was. 17 as of 2026-08-25: 15 was drawn for Inter and * the header now sets in Lexend, which runs optically smaller at the * same nominal size - the bar read undersized against a 220px logo * and a 17px phone number sitting either side of it. * * Checked for room before raising it: at 1500 the nav still clears * the phone by a wide margin. */ --type-header-nav: 17px; /* ---- 1.9 Typography - WEIGHT ---- * All four confirmed in use in the frame. Unchanged. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- 1.10 Typography - LEADING ---- * * The design sets line-height in ABSOLUTE PIXELS. These are those * values converted to unitless ratios, because the heading ladder * in 1.8b changes the font size at four breakpoints and a fixed * pixel leading would not move with it - headings would collide at * small sizes. * * The exact source figures, so the conversion can be checked: * H1 36 / 40 = 1.111 * H2 32 / 38 = 1.1875 * H5 card 19 / 24 = 1.263 * body 16 / 22 = 1.375 * body-lg 17 / 27 = 1.588 * small 15 / 23 = 1.533 * * H1 keeps its own token because 1.11 is visibly tighter than the * 1.19 the other headings use, and that tightness is the headline's * character. * * Card titles and small text land close enough to --leading-body * and --leading-body-lg that they are not given tokens of their * own; if the built page disagrees, add them rather than typing a * number into a component. */ --leading-h1: 1.11; --leading-heading: 1.19; --leading-body: 1.375; --leading-body-lg: 1.6; /* ---- 1.11 Typography - TRACKING ---- * * Kept in PIXELS because that is what the design specifies, and * both values are applied at a single size each. * * H1 -0.5px (36px hero headline; H2-H4 carry none) * eyebrow +1px (both the 12px pill and the 14px hero line) */ --tracking-h1: -0.5px; --tracking-heading: 0; --tracking-eyebrow: 1px; /* ---- 1.12 Radius ---- * * The design is far rounder than the placeholder set assumed. There * is no small radius in the frame at all - the smallest is 16px. * * 16 cards, media, Button Cards - the system radius * 24 large panels and the hero image * 999 pills: every primary CTA and every eyebrow chip * * 26px also appears once, on the hero's secondary "Call" button. On * a 53px-tall control that is a pill in all but name, so it is not * given a token; it resolves to --radius-pill when that button is * built. Recorded here rather than lost. */ --radius: 16px; --radius-md: 24px; --radius-pill: 999px; /* NOT FOUND IN THE DESIGN. Used only by the focus ring and the skip * link - browser affordances rather than design elements - so it is * retained at its placeholder value. */ --radius-sm: 2px; /* ---- 1.12a THE NESTED RADIUS ---- * * ALSO NOT IN THE DESIGN, AND THE HOLE IS THE POINT. The frame has * nothing below 16, because it never draws a rounded box INSIDE * another rounded box. The built site does - the dropdown rows sit * inside the dropdown panel - and that case has a rule of its own: * * NESTED CORNERS MUST GET LESS ROUND GOING INWARDS, NEVER MORE. * inner radius = outer inner-radius - the gap between them * * The panel is --radius (16) with a 1px border, so its inner edge * curves at 15; the rows are inset 8 from it; 15 - 8 = 7, and the * tie rule rounds up to 8. * * What it replaces: the rows were --radius-pill. A pill's end caps * are drawn at HALF ITS HEIGHT, so a 39px row curved at 19.5 and a * two-line 63px row at 31.5 - both ROUNDER than the 15px panel * holding them, with 5px of clearance, and the two rows a different * shape from each other. That is what read as off. * * Any future box nested in a --radius panel uses this, and if the * inset changes the value has to be re-derived rather than kept. */ --radius-nested: 8px; /* ---- 1.13 Layout ---- * * The frame is 1440 wide with 150px of padding on each side, so its * content column measures 1140. THE SITE DOES NOT USE THAT NUMBER. * * --container is 1400, matching Peninsula's --container-max and the * house standard. The frame width is reference only, exactly as * Peninsula's own stylesheet labels it. 1140 was never a decision * here - it was a measurement copied off a guide - and it is why * this page reads narrow on any modern desktop. * * !! --measure IS THE SECOND DIAL AND IT IS NOT OPTIONAL. * * A container and a reading width are different things. At the full * 1400 a paragraph runs about 150 characters a line, roughly twice * any comfortable maximum, so running text is capped separately * while photographs, cards and panels take the whole width. * Peninsula does the same thing, per component. * * !! THE RULE IS A CHARACTER COUNT, NOT A PIXEL WIDTH. * * --measure is 90 CHARACTERS PER LINE, expressed in px because this * block is where px values live. It is NOT tuned to any one * paragraph, and it must never be: every section carries a different * amount of copy, so a width chosen to make one block land on four * lines is wrong for the next block and for every page after this * one. * * Deriving it: Lexend at 22px measures 10.67px per character across * a representative English sample, so 90 characters is about 960px, * which is 69% of the 1400 container. * * IF THE BODY SIZE EVER CHANGES, RE-DERIVE FROM 90 CHARACTERS. Do * not scale this number, and do not re-measure it against a * paragraph. * * Why 90. The classic advice is 45-85 for sustained reading. These * are two-to-four sentence blocks that get scanned rather than read * through, so a modest overshoot is defensible; past roughly 90 the * eye starts losing its place on the return sweep, and that is a * real effect rather than a style preference. * * 760 (54%, 69 characters) was the previous value. Textbook, and too * cautious in practice - it made every section a narrow ribbon down * the middle of a wide page. * * --container is the CONTENT width. .container in section 03 adds * --container-pad on each side and widens its own max-width to * match, so the content box is a true 1400 at desktop rather than * 1400 minus padding. */ --frame: 1440px; /* design frame width, reference only */ --container: 1400px; /* content column - the house standard */ --measure: 960px; /* 90 characters at the 22px body */ /* Framed blocks - the step diagrams, the bordered panel - are not * prose and must not borrow --measure, but they are not full-width * either. The design draws them at roughly half to two-thirds of the * frame; at the full 1400 a four-step diagram stretches until the * steps stop reading as a sequence and start reading as four * separate things. 1040 is 74%: wider than the reading measure, * because a diagram is scanned across rather than read, and well * inside the container. */ --container-panel: 1040px; /* THE STATEMENT PANEL, WHERE A PAGE INSETS IT. * * .itv-panel takes the full content column by default, because that * is what 553:18 draws on Chiropractic Adjustments. The Magic Hug * frame insets its equivalent: 569:104 is x260 w920 inside a content * column that runs x150 to x1290. So the panel is 920 of 1140, or * 80.7%, inset 110 a side from the column's own edges. * * 1400 x 0.807 = 1129.8. The site's standing mapping is that the * design's 1140 content column IS our 1400 container (see 10.2), so * the proportion scales and the inset comes out at 135 a side rather * than the frame's 110. * * Gerek asked for "maybe indented by 100px on each side" from a * screenshot. 135 is the same instinct read off the frame instead of * off the eye - his 100 is almost exactly the frame's own 110, and * the extra 25 is only the container being wider than the column it * stands in for. */ --container-statement: 1130px; --container-pad: 24px; /* gutter inside .container */ --gutter: 150px; /* the frame's own inset, reference only */ /* NEW - THE HEADER AND FOOTER ARE WIDER THAN THE PAGE CONTENT. * * Sections pad 150px a side; the header pads 96px (513:2395). That * is not an inconsistency to normalise away - the chrome is meant to * reach further out than the copy, and the header needs the extra * room to fit six nav items plus a phone number and a CTA that the * design's five-item bar never had to carry. * * WAS 1248, the frame's own 1440 - (96 * 2). That made sense while * the content column was 1140. Now that --container is 1400 the old * number is INVERTED - the chrome ended up narrower than the content * it sits above, so the logo hung inside the hero panel's left edge * instead of lining up with it. * * Matched to --container so the header's logo, the hero panel and * every section below share one left edge and one right edge. The * footer panel uses this token too and gains the same alignment. */ --container-wide: 1400px; /* ---- 1.14 Spacing - THE APPROVED SCALE ---- * * THESE EIGHT VALUES ARE THE ONLY SPACING ALLOWED ON THIS SITE. * * 8 12 16 20 24 32 40 48 * * UNCHANGED BY THE DESIGN PULL, AND CONFIRMED BY IT: every one of * the eight appears in the frame - 8 and 16 on the eyebrow pills, * 12 inside the process cards, 20 and 24 on the section stacks, 32 * between the cards and inside the Button Cards, 40 on the Proof * Bar, 48 under the intro. * * !! WHAT THE DESIGN DOES THAT THIS SCALE DOES NOT. * Section VERTICAL padding in the frame runs 8, 40, 48, 57, 86 and * 120px, with inter-block gaps of 60, 64 and 70. Those are past the * 48px ceiling and follow no consistent step - they read as * hand-tuned per section rather than as a system. * * No tokens were invented for them. Section rhythm is a decision to * take when the sections are actually built, with the real page in * front of you; guessing a scale now would bake in numbers nobody * has agreed to. * * TIE RULE: a value landing exactly between two steps ROUNDS UP. * * !! NOT EVERYTHING THAT LOOKS LIKE SPACING IS SPACING. This scale * governs padding, margin and gap. Corner radii, animation offsets, * hairline widths and fixed component dimensions are their own * thing and must not be bent onto it. */ --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --space-72: 72px; /* ---- 1.14a SECTION RHYTHM ---- * The standing rule for every section on every page: 100px of air * above and below on desktop, 64 on mobile where 100 eats most of a * phone screen before any content appears. Deliberately NOT part of * the --space- scale above: that scale governs gaps inside a * component, this governs the distance between them, and bending * one onto the other is how sections end up drifting apart. * * Matches Peninsula's --section-space exactly, including its ladder: * 100 / 80 / 72 / 64 / 56 down the breakpoints in 1.8b. The step * lives on the token so no section rule has to know about it. */ --section-pad: 100px; /* ---- 1.15 Header metrics ---- * Not a fixed height - it is the padding that is fixed, and the logo * makes up the rest. The header scrolls away with the page as of * 2026-08-25, so nothing needs to offset against it. */ /* The design's Header/Nav is py-24 (513:2395). * * !! THIS TRADES AGAINST THE LOGO SIZE. The header's height is * padding + logo, and the brief is a bigger mark inside the SAME * bar. 190px of logo is 52 tall and took 24 of padding for a 100px * header; 220 is 60 tall and takes 20, for the same 100. Change one * of these two numbers and the other has to move with it. */ --header-pad-y: var(--space-20); } /* ---- 1.8b RESPONSIVE HEADING LADDER ---- * The four heading steps, and only those. Everything else is FLAT at * every width and deliberately absent from every block here. * * THE DESIGN IS DESKTOP ONLY - the frame is 1440px wide and there are * no other breakpoints in the file. This ladder is therefore the * theme's own work, not a design value: it takes the design's real * desktop sizes as the top step and walks them down by a fixed amount * so headings stay readable on a phone. * * Fixed decrement per breakpoint: H1 -3, H2 -3, H3 -2, H4 -1, H5 -1. * * 1440+ 1199 991 767 599 * H1 36 33 30 27 24 * H2 32 29 26 23 20 * H3 24 22 20 18 17 * H4 22 21 20 19 18 * H5 19 18 17 17 16 * * H1 steps by 3 rather than the 4 the placeholder ladder used, because * it starts 10px lower than the placeholder did and a -4 step would * have taken it under H2 by the last breakpoint. * * !! FLAGGED FOR THE DESIGNER. If mobile frames land later, this whole * block is replaced by their real values. * ================================================================== */ @media (max-width: 1199px) { :root { --type-h1: 46px; --type-h1-hero: 46px; --type-hero-lede: 24px; --type-h2: 37px; --type-h3: 28px; --type-h4: 25px; --type-h5: 22px; --section-pad: 80px; } } @media (max-width: 991px) { :root { --type-h1: 42px; --type-h1-hero: 41px; --type-hero-lede: 23px; --type-h2: 34px; --type-h3: 26px; --type-h4: 24px; --type-h5: 21px; --section-pad: 72px; } } @media (max-width: 767px) { /* !! THE BODY SIZE DOES NOT DROP HERE ANY MORE - SEE <=599. * * The rule is 22 on desktop, laptop AND tablet, 18 on mobile. This * breakpoint is where the LAYOUT stacks, and 767 is the right place * for that. It is the wrong place for the type: an iPad Mini in * portrait is 744 CSS pixels, so it was landing in this block and * being served 18px - phone type on a tablet, which is exactly what * Gerek saw and why it looked small. Measured at 744: body 18px. * * Layout stacks at 767, type shrinks at 599. They are different * questions and they now have different answers. */ :root { --type-h1: 35px; --type-h1-hero: 34px; --type-hero-lede: 20px; --type-h2: 29px; --type-h3: 24px; --type-h4: 22px; --type-h5: 20px; --section-pad: 64px; } } @media (max-width: 599px) { /* THE MOBILE BODY RULE LIVES HERE NOW. Everything that reads as * running copy is pegged to these tokens, so one step moves the lot, * and it only fires on genuine phone widths. */ :root { --type-h1: 31px; --type-h1-hero: 30px; --type-hero-lede: 19px; --type-h2: 26px; --type-h3: 22px; --type-h4: 21px; --type-h5: 19px; --type-body: 18px; --type-body-lg: 19px; --type-ui: 17px; --type-small: 17px; --type-detail: 16px; --section-pad: 56px; } } /* ================================================================== * 02 BASE * * Bare element fallbacks exist deliberately: every heading carries a * class OR the stylesheet provides element fallbacks. This build chose * fallbacks, so an unclassed heading can never silently render at body * size once copy arrives. * ================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-body); font-size: var(--type-body); font-weight: var(--weight-regular); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-16); font-family: var(--font-heading); font-weight: var(--weight-bold); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); color: var(--ink); } /* H1 carries its own leading and tracking. The design sets it tighter * than the other headings (1.11 against 1.19) and gives it the only * negative tracking in the frame; both are part of the headline's * character rather than a general heading rule. */ h1 { font-size: var(--type-h1); line-height: var(--leading-h1); letter-spacing: var(--tracking-h1); } h2 { font-size: var(--type-h2); } h3 { font-size: var(--type-h3); } h4 { font-size: var(--type-h4); } /* h5 has a real step in the design now - 19px, the process card title - * so it no longer borrows H4's. h6 has no design equivalent and shares * h5 rather than being given an invented size. */ h5, h6 { font-size: var(--type-h5); } p { margin: 0 0 var(--space-16); } /* Links are ink, not accent. The accent is "barely used" by direction, * and body links are the single highest-volume link surface on a site - * colouring them would spend the accent everywhere at once. Underline * carries the affordance instead. */ /* NAVY ON HOVER, NOT AMBER. * * Amber is a SURFACE colour in this design - a fill, a border, a rule. * It is never text on a light ground, and for good reason: #fbb03c on * white measures about 1.9:1, which is unreadable. Navy measures about * 5.7:1 and passes AA. * * This applies to every interactive text state on the site: base links, * the nav, the footer, the article cards, and the focus ring. */ a { color: var(--ink); text-underline-offset: 0.15em; } /* !! :not(.cta-button) IS LOAD-BEARING - THE THIRD TIME THIS EXACT * SPECIFICITY TRAP HAS BITTEN THIS THEME. * * "a:hover" scores one class-equivalent plus one element, which BEATS * the bare ".cta-button" rule in section 04. Without the exclusion the * amber pill's label turned NAVY on hover - 2.4:1 against its own * background, and not the design's behaviour either. Caught on a real * render, not in review. * * The button's hover affordance is the brightness filter in section 04, * not a colour change. Its label is always --accent-contrast. * * The same guard already exists on ".mobile-menu a" in section 05, for * the same reason. Any future rule that colours a bare "a" must exclude * this class too. */ a:not(.cta-button):hover { color: var(--navy); } /* Belt and braces: if a later rule does forget, this one is scoped * tightly enough to win the label back. */ .cta-button:hover { color: var(--accent-contrast); } img, svg { max-width: 100%; height: auto; } button { font: inherit; } address { font-style: normal; } /* Visible focus on everything interactive. Built in the first time, * never retrofitted. This is one of only two places the accent appears * in Stage 1. */ :focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; /* --radius-sm, not a typed-in 2px. This is a corner radius, so the * radius scale governs it - the SPACING scale is the one that does * not, which is what the old note here was getting at. Using the * token removes the last duplicated value outside section 01. */ border-radius: var(--radius-sm); } /* ================================================================== * 03 SHARED UTILITIES * ================================================================== */ /* --container is the CONTENT width the design draws (1140px). The * padding is added ON TOP of it rather than eaten out of it, so the * content box is a true 1140 at desktop instead of 1140 minus 48. Below * that width the padding becomes the screen-edge gutter as usual. */ .container { width: 100%; max-width: calc(var(--container) + (var(--container-pad) * 2)); margin-inline: auto; padding-inline: var(--container-pad); } .visually-hidden:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: var(--space-8); left: var(--space-8); z-index: 100; padding: var(--space-8) var(--space-16); background: var(--surface); color: var(--ink); border: 1px solid var(--ink); border-radius: var(--radius-sm); text-decoration: none; } .skip-link:not(:focus):not(:active) { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Page content needs air under the sticky header. * * Without this the H1 sat flush against the header's bottom hairline - * the Stage 1 shells had no content, so the gap never showed up until * the 3.6 copy landed. * * padding-top only. The footer already carries its own margin-top, so a * symmetrical padding-block would stack the two into a 96px gap at the * bottom and 48 at the top. * * min-height stays until every page has copy: a page that is still an * empty shell would otherwise collapse and put the footer directly under * the header. It costs nothing on a page that has content. */ .site-main { min-height: 40vh; padding-top: var(--space-48); } /* ================================================================== * 04 SITE HEADER * * VISUAL SOURCE: Figma 513:2395 "Header/Nav" - 96px side padding, * 24px vertical padding, 15px Regular nav at a 32px gap, and the amber * pill CTA on the right. * * !! STRUCTURE IS THE LOCKED SITE MAP, NOT THE DESIGN. * The design's bar shows five flat links including "Health Resources", * a deleted page. It was not built. The real menu is six Tier-1 items, * three of which are unlinked labels opening dropdowns, and it comes * from the WordPress 'primary' menu location - nothing here is * hardcoded. The design contributed the LOOK; the database owns the * STRUCTURE. * * TWO THINGS THE DESIGN DOES NOT HAVE, added deliberately: * 1. The phone number. Click-to-call is required at every breakpoint. * 2. A bottom hairline. The header is sticky, which a static 1440px * frame never had to account for; without it, content scrolls * under the bar with no edge. * ================================================================== */ /* NAVY, THE SAME GRADIENT AS THE STATS BAND. * * White-on-white was the wrong call and did not survive contact - a * scroll shadow separates the header from the page but does nothing for * the flatness of the thing, and above the fold the site read as white * on white on white. This uses --gradient-navy, the identical fill the * stats band in section 9.4 carries, so the two dark bands bracket the * hero and the page has somewhere to start. * * The HEIGHT is unchanged - it clones the band's colour, not its * proportions. * * Everything in here inverts with it: the lockup swaps to the white * horizontal one in header.php, the nav and phone go to --on-invert, * and hover becomes amber rather than navy, since navy on navy is * nothing. */ /* NOT STICKY. It scrolls away with the page, by decision on * 2026-08-25. * * The scroll-elevation shadow that used to live here went with it, and * so did the .is-stuck handler in main.js - both existed only to give a * pinned header an edge against the content sliding under it. With * nothing pinned there is nothing to separate, and leaving either * behind would have been a listener and a rule doing no work. * * z-index is kept: the dropdown panels are children of this element and * still have to open over the page below. */ .site-header { position: relative; z-index: 50; background: var(--gradient-navy); color: var(--on-invert); border-bottom: 0; } /* LOGO HARD LEFT, CTA HARD RIGHT, NAV IN THE SPACE BETWEEN. * * space-between does the pinning: with three children the first sits at * the start edge, the last at the end edge, and the nav takes what is * left. The alignment only reads as deliberate because the header now * shares its width with the content below it - see --container-wide. */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); max-width: calc(var(--container-wide) + (var(--container-pad) * 2)); margin-inline: auto; padding-inline: var(--container-pad); padding-block: var(--header-pad-y); } /* Neither end may be pushed off its edge by the nav growing. */ .site-header__inner > .site-header__logo, .site-header__inner > .site-header__actions { flex: 0 0 auto; } /* THE NAV SITS RIGHT, NOT CENTRED - but it does not touch the phone. * * margin-left:auto pushes the whole menu toward the actions group; the * margin-right is the guaranteed gap, so the last menu item and the * phone number can never end up reading as one run of text. Centred, * the bar had a lake of empty navy on the right and the three right- * hand elements looked unrelated to each other. */ .site-header__inner > .primary-nav { flex: 0 1 auto; margin-left: auto; margin-right: var(--space-40); } .site-header__logo { display: flex; flex-shrink: 0; text-decoration: none; color: inherit; } /* The header lockup. Sized on the IMG rather than a max-width so the * intrinsic width/height on the tag and the CSS agree and nothing * reflows while it loads. * * 220, up from 190 and originally 124. At 124 the word CHIROPRACTIC was * under 6px tall - the mark was present without being readable. * * The BAR IS THE SAME HEIGHT it was at 190: --header-pad-y dropped from * 24 to 20 to pay for the extra 8px of logo. 220 x (104/380) = 60.2, * plus 20 top and 20 bottom, is the same 100px the header has always * been. See --header-pad-y in 1.15. */ .site-header__logo img { display: block; width: 220px; height: auto; } /* The MOBILE MENU reuses this class on a white panel with the standard * dark lockup, so it must not inherit the header's larger size. */ /* 150 -> 260, about 75% up, which is what Gerek asked for. It only fits * because the Close pill was lifted out of this row - see * .mobile-menu__top. Shared with Close it overflowed by 22px at 375. */ .mobile-menu .site-header__logo img { width: 260px; } .site-header__actions { display: flex; align-items: center; gap: var(--space-20); flex-shrink: 0; } /* Click-to-call. Present at EVERY breakpoint - never hidden, never * reduced to an icon. Not in the design; required by the brief. */ .header-phone { display: inline-flex; align-items: center; gap: var(--space-8); font-size: var(--type-detail); font-weight: var(--weight-semibold); color: var(--on-invert); text-decoration: none; white-space: nowrap; } /* Optical, not mechanical: the handset glyph reads heavier than the * digits beside it at the same box size, so it is nudged down a step. */ .header-phone__icon { width: 17px; height: 17px; flex-shrink: 0; } .header-phone:hover { color: var(--accent); } /* The mobile menu no longer carries a phone link - see header.php - and * its panel is navy anyway, so the white-ground override that used to * live here is gone. */ /* The header CTA is a SMALLER pill than the ones in the page body. * Chrome, not a call to action in its own right: it sits on one line * with a logo, five nav items and a phone number, and at body size it * crowds all of them. Figma draws it at 33px tall against the 48px of * the in-page buttons. */ .site-header__actions .cta-button { padding: var(--space-8) var(--space-16); font-size: var(--type-detail); } /* THE AMBER PILL CTA. Figma 362:2 / 350:81. * * Label is "Book New Patient Appointment" - the locked wording. The * design's own label reads "Book Appointment" and the MENU item for the * same page reads "Book Now". Three different strings; this is the one * that ships. See hbchiropractic_cta_label(). * * !! THE DESIGN'S FILL CANNOT BE EXPORTED. Figma describes this * component as a "glass-amber pill (shader gradient fill, glossy * multi-stop gradient border, GLASS blur effect)". A shader fill has no * CSS equivalent, and Figma exports only the amber border and the drop * shadow. This is the faithful, buildable reading: a solid amber pill * carrying the design's real drop shadow. If the glass treatment * matters, it needs a decision and probably an exported asset. * * Text is INK on amber, per --accent-contrast. Never white. * * The HEADER's instance is deliberately smaller than the in-page ones - * see .site-header__actions .cta-button below. */ /* !! THE AMBER PILL'S LABEL IS INK, AND THIS RULE ENFORCES IT. * * Four separate rules in this file colour a bare "a" inside a dark * region - .site-footer, .hp-proof, .hp-final, .mobile-menu - and every * one of them outscores the plain .cta-button/.hp-btn-line declarations * because a class-plus-element beats a class. Each has been patched * with :not(.cta-button) as it was found, one at a time, and the audit * that followed the footer fix turned up yet another: .hp-btn-line a * inside .hp-proof, white on amber. * * Measured, not judged: white on #fbb03c is 1.85:1 against a 4.5:1 * minimum. Ink is 9.99:1. The note on --accent-contrast in 1.2 says * never to "fix" this to white. * * So rather than guard the next one after it ships, this states the * rule once at a specificity nothing casual will beat. Adding a new * dark region no longer means remembering the exclusion. */ .cta-button, .hp-cta-row a:first-of-type, .hp-btn-line a { color: var(--accent-contrast); } /* Three layers stacked in one element: the rim is painted on the * border-box, the fill on the padding-box, and the gloss sits over the * top half as a pseudo-element. isolate keeps that pseudo-element's * stacking to itself so it can never slide over a neighbouring pill. */ .cta-button { position: relative; isolation: isolate; display: inline-block; padding: var(--space-8) var(--space-20); background: var(--accent-fill) padding-box, var(--accent-rim) border-box; /* 2px, not 1: at a hairline the multi-stop ring averages out to a * pale outline and the metal is lost. */ border: 2px solid transparent; color: var(--accent-contrast); font-size: var(--type-detail); font-weight: var(--weight-semibold); line-height: 1.4; text-decoration: none; border-radius: var(--radius-pill); box-shadow: var(--accent-lift); white-space: nowrap; transition: box-shadow .18s ease, transform .18s ease; } /* The gloss. inset-block-end:50% is the whole trick - it covers the top * half and stops, so the highlight has an edge to it rather than fading * the entire pill out. */ .cta-button::before { content: ""; position: absolute; inset: 2px 2px 50%; z-index: -1; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: var(--accent-gloss); pointer-events: none; } .cta-button:hover { box-shadow: 0 6px 12px rgba(255, 139, 0, 0.42), 0 0 26px rgba(251, 176, 60, 0.55); transform: translateY(-1px); } /* !! RETURNING TO THE FLOOR IS NOT A PRESS STATE. This used to be only * `transform: translateY(0)` - so pressing a button undid the hover lift * and did nothing else, and on a button already sitting flat under a * finger on a touchscreen it did nothing at all. * * Gerek's report on Momma's, 2026-09-02, was "I barely could tell that * the button's even working". HB's hover is in better shape than * Momma's was - it has a real glow and a lift - but the press was the * same near-silence, and on checkout that invites a second click on a * payment form. * * A press now darkens and collapses the glow as well as dropping: three * changes at once, so it reads as a physical press rather than as the * hover merely stopping. */ .cta-button:active { transform: translateY(0); filter: brightness(.92); box-shadow: 0 1px 3px rgba(255, 139, 0, .35); } /* Keyboard users got no indication at all. :focus-visible so it appears * for tabbing without firing on a mouse click. */ .cta-button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .cta-button { transition: none; } /* !! ONLY THE MOVEMENT GOES. Somebody who asks for reduced motion * still needs to know their click landed, so the colour and shadow * changes stay - dropping the whole :active rule here would restore * exactly the silence this fix exists to end. */ .cta-button:hover, .cta-button:active { transform: none; } } .cta-button:hover { filter: brightness(1.06); } /* A CTA button standing alone as a list item drops its bullet. * * The booking form's field list ends with its submit control, so the * 3.6 document has "[Button: Continue to Next Step]" as the last item * of that list. Rendered as a real button it kept the disc marker, and * a bullet in front of a pill reads as a mistake. * * :only-child is deliberate - a list item that mixes a button with text * is still a list item and keeps its marker. */ li:has(> .cta-button:only-child) { list-style: none; margin-left: calc(var(--space-8) * -1); } /* ---- primary navigation ---- */ /* GAP PAYS FOR THE FONT SIZE, so the two move together. * * Raising the nav from 15 to 17 added about 56px across six items - * type scales, gaps do not. Dropping the gutter from 32 to 24 gives 40 * of that back, which keeps the bar close to the width it has always * been without setting the words at a size that reads small. * * The recovered width comes off the LEFT, not the right: the nav is * pinned by a fixed 40px margin against the actions group and floated * over by an auto margin on the other side, so narrowing it opens space * between the logo and the first menu item and leaves the 64px gap to * the phone number untouched. Verified at 1500. */ .primary-nav > ul { display: flex; align-items: center; gap: var(--space-24); margin: 0; padding: 0; list-style: none; } .primary-nav li { position: relative; } /* Tier 1 sits at full strength on the navy ground - not a muted grey. * The muted step is used inside the dropdowns instead, which fall on * white and keep their ink colours. */ .primary-nav > ul > li > a, .primary-nav > ul > li > span { display: block; padding-block: var(--space-8); color: var(--on-invert); font-size: var(--type-header-nav); font-weight: var(--weight-regular); text-decoration: none; white-space: nowrap; } /* AMBER ON HOVER, NOT NAVY. The old hover was --navy, which on a navy * header is an invisible state change. Amber is the accent the header * already carries in the lockup and the CTA, so the bar stays a * two-colour object. * * !! SCOPED TO TIER 1. The dropdown panels are white; amber text on * white measures about 1.9:1 and would fail outright. Their hover is * set separately below. */ .primary-nav > ul > li > a:hover, .primary-nav > ul > li.current-menu-item > a, .primary-nav > ul > li.current-menu-ancestor > a { color: var(--accent); } /* THE THREE UNLINKED LABELS. * * Services, New Patients and Resources have no page behind them and * render as , never - see Hbchiropractic_Nav_Walker. They are * styled to look identical to their linked siblings so the bar reads as * one row, but they are not links and never enter the tab order. */ .primary-nav > ul > li > span { cursor: default; } /* A caret marks the four items that open something, so a label-only * parent does not read as a dead link. Drawn in CSS rather than shipped * as an icon; the 5px box is a component dimension. */ .primary-nav .menu-item-has-children > a::after, .primary-nav .menu-item-has-children > span::after { content: ""; display: inline-block; width: 5px; height: 5px; margin-left: var(--space-8); border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); } /* The gutter is tighter than it looks because each row now carries its * own padding - see the hover row below. 4 here plus 8 inside each row * is the 12 the rows used to sit apart, so nothing moved. */ .primary-nav .sub-menu { position: absolute; top: 100%; left: 0; z-index: 60; display: grid; gap: 4px; min-width: 240px; margin: 0; padding: var(--space-16); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); list-style: none; opacity: 0; visibility: hidden; /* A literal: how far the panel slides while it fades in, not a gap * between elements. Animation distance is its own concern. */ transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .primary-nav li:hover > .sub-menu, .primary-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } /* A FILLED ROW ON HOVER, NOT JUST A COLOUR CHANGE. * * These rows used to go --ink-muted to --navy on hover and nothing * else. Both are dark colours on white, so the change measured as a * shift in hue rather than in brightness - you could tell something had * happened but not easily which row it was, and on a trackpad moving * fast that is no feedback at all. * * The row now takes a filled pill AND the colour change. The fill is * what the eye catches; the colour is what confirms it. Padding lives * on the anchor rather than the list item so the whole row is the hit * target, not just the words. * * NOT AMBER. Amber on white measures about 1.9:1 - it is a surface * colour in this palette, never a text colour on a light ground. The * tier-1 items in the navy bar hover amber because their ground is * navy; these do not, and that difference is deliberate. */ /* !! THE ROW IS NOT A PILL, AND --radius-nested EXPLAINS WHY. * * Short version: a pill inside a 16px panel curves harder than the * panel does, and a two-line row curves harder still than a one-line * one, so the highlighted row was a different shape from its * neighbours. Measured on the real menu: 19.5px caps on the 39px rows, * 31.5 on the 63px "Chiropractic Adjustments", inside a 15px panel with * 5px of clearance. * * The inset goes 5 -> 8 at the same time. 5px between a filled row and * the panel's own border is not clearance, it is a near-miss, and it is * half of why the row looked like it was bursting out of the box. * * !! THE TEXT DOES NOT MOVE. padding-inline and the negative margin are * the same number, so the label still starts exactly on the panel's * 16px padding edge and lines up with the tier-1 item above it. Change * one of the two and the label shifts; they are a pair. */ .primary-nav .sub-menu a { display: block; padding: var(--space-8); margin-inline: calc(var(--space-8) * -1); border-radius: var(--radius-nested); color: var(--ink-muted); font-size: var(--type-detail); text-decoration: none; white-space: normal; transition: background-color .12s ease, color .12s ease; } .primary-nav .sub-menu a:hover, .primary-nav .sub-menu a:focus-visible { background: var(--fill-tint); color: var(--navy); } /* The page you are already on is shown in the same row, held down. * Without it the current row is the only one that never lights up, and * that reads as broken rather than as "you are here". */ .primary-nav .sub-menu .current-menu-item > a { background: var(--fill-tint); color: var(--navy); font-weight: var(--weight-semibold); } @media (prefers-reduced-motion: reduce) { .primary-nav .sub-menu a { transition: none; } } /* ---- hamburger ---- */ /* !! THIS BUTTON SITS ON THE NAVY HEADER, NOT ON WHITE. * * It was built when the header was white: --rule for the border, * --ink for the label. On navy that rendered as a pale pill with dark * lettering - the one light-on-dark object in a bar of white-on-dark, * and the thing the eye went to first. * * Now it matches the nav beside it: transparent, white hairline, white * bars. The label is visually hidden - see the note in header.php - so * the button is square and the glyph is the whole content. */ .nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: none; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--radius-pill); color: var(--on-invert); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .nav-toggle:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--on-invert); } .nav-toggle__bars { display: grid; /* 5px is the bar gap inside a fixed 20px glyph - a component * dimension, not layout spacing. */ gap: 5px; width: 20px; } .nav-toggle__bars span { display: block; height: 2px; background: currentColor; } /* ================================================================== * 05 MOBILE MENU * * Carries the six Tier-1 items with Tier 2 as expandable sub-menus. * Hidden from assistive tech and from tab order while closed. * * No design exists for this - the Figma file is a single 1440px frame. * See section 07 for what was decided and why. * ================================================================== */ /* !! width:100% IS NOT REDUNDANT NEXT TO inset:0. * * A fixed element with left:0, right:0 and width:auto is shrink-to-fit * clamped at its own min-content, so content that cannot shrink makes * the box WIDER than the viewport rather than overflowing inside it. * This drawer's nav min-content is about 480px; at a 22px body it grew * to 528 on a 390px phone and gave the whole site a horizontal * scrollbar - the page itself was fine, the closed menu was dragging it * sideways. width:100% resolves the over-constraint to the viewport and * lets the nav wrap inside it instead. * * Found by measuring scrollWidth against clientWidth at 390px. Worth * re-running that check after any type-scale change, because this is * exactly the kind of failure a bigger font reintroduces. */ .mobile-menu { position: fixed; inset: 0; width: 100%; z-index: 90; display: grid; grid-template-rows: auto 1fr; /* NAVY, like the bar it opens from. It was --surface, which meant * tapping the menu turned the whole header white - the site changed * colour to show you a list. Everything inside inverts with it. */ background: linear-gradient(180deg, #1e3f70 0%, #16345a 60%, #102c46 100%); color: var(--on-invert); overflow-x: hidden; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s; } /* Grid children default to min-width:auto, which would hand the * min-content problem straight back. */ .mobile-menu > * { min-width: 0; } .mobile-menu[data-open="true"] { visibility: visible; opacity: 1; } /* !! CLOSE IS OUT OF FLOW. THE LOGO OWNS THIS ROW. DO NOT PUT THEM BACK * SIDE BY SIDE. * * This was space-between, and it worked while the logo was 150. At 260 * it does not: 260 logo + 16 gap + 97 pill + 48 of gutter is 421 against * a 375 panel, so Close was pushed 22px off the right edge - measured, * close.right 397 on a 375 viewport. The pill is the smaller element * but flex kept the img at its declared width and overflowed instead. * * So Close is absolute in the corner and the logo gets the full 327. * The logo stays LEFT rather than centred so its edge lines up with * "Home" and the rest of the nav directly beneath it - that shared edge * reads better here than centring the mark on its own would. */ .mobile-menu__top { position: relative; /* 84 not 72: the pill and the logo still overlap horizontally (the * pill starts at 254, the logo runs to 284), so they need real * vertical air between them. 72 left 9px and read as a near-miss. */ padding: 84px var(--container-pad) var(--space-16); } .mobile-menu__close { position: absolute; top: var(--space-16); right: var(--container-pad); padding: var(--space-12) var(--space-20); background: none; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: var(--radius-pill); color: var(--on-invert); font-size: var(--type-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } .mobile-menu__body { padding: var(--container-pad); } /* NO DIVIDERS. Six rules between six items turned a short menu into a * table; the spacing already separates them. */ .mobile-menu ul { margin: 0; padding: 0; list-style: none; } /* !! :not(.cta-button) IS LOAD-BEARING - DO NOT SIMPLIFY IT AWAY. * * ".mobile-menu a" scores one class plus one element, which BEATS the * bare ".cta-button" rule in section 04. Without this exclusion the * booking button was repainted to --ink text on its own background and * rendered invisible but still clickable. That bug shipped once and was * caught on a real phone-width render, not in review. * * The CTA is now amber rather than ink, so the failure would look * different - ink-on-amber is legible - but the rule would still be * stealing the button's font-size and padding. The exclusion stays. */ .mobile-menu a:not(.cta-button), .mobile-menu .menu-item > span { display: block; padding: var(--space-12) 0; color: var(--on-invert); font-size: var(--type-h4); text-decoration: none; } /* !! THE THREE UNLINKED PARENTS LOOK LIKE EVERY OTHER ITEM NOW. * * Services, New Patients and Resources have no page behind them and * render as rather than . They used to be styled as section * headings - smaller, uppercase, muted - to signal "not a link". In * practice that read as three different fonts in one list, and the * distinction it was drawing does not matter here: every one of them * opens a sub-menu on tap, so they all behave the same way. * * They keep cursor:default and stay out of the tab order, which is * where the real difference belongs. */ .mobile-menu .menu-item > span { cursor: default; } .mobile-menu .sub-menu { padding-left: var(--space-20); padding-bottom: var(--space-8); border-left: 1px solid rgba(255, 255, 255, 0.22); } .mobile-menu .sub-menu a { font-size: var(--type-ui); color: rgba(255, 255, 255, 0.82); } /* ---- expandable sub-menus ---- * * !! THE COLLAPSED STATE IS GATED BEHIND .has-js-submenus, which the * script adds. Without JavaScript no toggle is injected, so a rule that * hid sub-menus by default would hide fifteen links behind a control * that does not exist. Failing this way makes the menu longer; failing * the other way makes it unusable. */ .mobile-menu .has-submenu > a, .mobile-menu .has-submenu > span { grid-area: label; } .has-js-submenus .has-submenu { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label toggle" "sub sub"; align-items: center; } .has-js-submenus .has-submenu > .sub-menu { grid-area: sub; } .has-js-submenus .has-submenu > .submenu-toggle { grid-area: toggle; } .has-js-submenus .has-submenu > .sub-menu { display: none; } .has-js-submenus .has-submenu.is-open > .sub-menu { display: block; } .submenu-toggle { display: flex; align-items: center; justify-content: center; /* 44px is the minimum comfortable touch target. A component * dimension, not layout spacing. */ width: 44px; height: 44px; padding: 0; background: none; border: 0; color: var(--on-invert); cursor: pointer; } .submenu-toggle__icon { display: block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; } .has-submenu.is-open > .submenu-toggle .submenu-toggle__icon { transform: translateY(2px) rotate(-135deg); } .mobile-menu__actions { display: grid; gap: var(--space-16); margin-top: var(--space-32); justify-items: start; } .mobile-menu__actions .cta-button { text-align: center; width: 100%; } body.is-menu-open { overflow: hidden; } /* ---- 05b BACK TO TOP ---- * * The control itself is NOT in this theme. It is a must-use plugin, * wp-content/mu-plugins/itv-back-to-top.php, so it survives a theme * swap and a core update and cannot be switched off from wp-admin. It * is an and works with no JavaScript; the script only * decides when to show it. * * !! DO NOT ADD A SECOND ONE TO THIS THEME. If a theme ever ships its * own it must declare add_theme_support( 'itv-back-to-top' ) so the * plugin stands down - otherwise the page gets two arrows. This theme * deliberately does not: it recolours the plugin's instead, which is * what the three custom properties below exist for. Editing the plugin * file per client is the thing this mechanism is here to avoid. * * White surface with a navy chevron rather than the plugin's neutral * near-black. It has to work on all three of this page's grounds - * white, the cream of OUR SYSTEM, and the navy footer - and a white * pill is the only one of the three that never disappears into its * background. Amber was the other candidate and was rejected: it is the * booking button's colour, and a floating amber pill in the corner * competes with the thing the page actually wants pressed. * * !! DOUBLED CLASS, DELIBERATELY. The plugin prints its CSS inline on * wp_head, which lands AFTER this stylesheet's - measured at * char 2920 against 2716. A plain .to-top here is the same specificity * and therefore loses on order, which is exactly what happened on the * first attempt: the arrow rendered in the plugin's neutral near-black * with nothing in this file looking wrong. .to-top.to-top wins on * specificity instead, so it does not matter what order the two land * in. */ .to-top.to-top { --to-top-ink: var(--navy); --to-top-surface: rgba(255, 255, 255, 0.94); --to-top-border: rgba(32, 94, 150, 0.22); border-radius: var(--radius-pill); } /* ================================================================== * 06 SITE FOOTER * * VISUAL SOURCE: Figma 513:2740 - a rounded dark panel inset from the * page edge, brand lockup over the address and phone on the left, a * compact link block on the right, a hairline, then the legal line. * * The design paints that panel a translucent pale blue sitting on a * dark section. Standing alone on a white page it needs its own ground, * so it takes the navy gradient the design already uses for its * full-width Button Cards - the same dark navy treatment, from the same * file. * * !! LINKS ARE THE LOCKED FOUR, NOT THE DESIGN'S. * The design lists service pages and "Health Resources", a deleted * page. The real footer menu is Careers, Privacy Policy, Terms and * Accessibility - and those four appear in NO other menu. * * !! NO EMAIL ADDRESS. That is a decision, not an omission. * ================================================================== */ /* THE FOOTER IS THE WHOLE NAVY REGION, CTA INCLUDED. * * The design (513:2733) runs one dark section from "Ready to Find Out * ..." down to the copyright line, with the footer panel inset inside * it as a lighter blue-on-blue block. This used to be two things - a * homepage-only .hp-final and a global footer that started below it - * and the seam between two different navies showed on every page. * * Now: .site-footer paints the region, .site-footer__cta sits directly * on it, and .site-footer__panel is the lighter inset. The CTA is in * footer.php, so all 19 pages get it. */ /* !! ITS OWN GRADIENT, DARKER THAN --gradient-navy, AND THAT IS THE * WHOLE REASON THE PANEL READS. * * This used --gradient-navy, which starts at #205e96 - light. Measured * on the render: at the panel's top edge the section was rgb(25,73,116) * against a panel of rgb(36,70,115). One value apart in blue. The box * genuinely was invisible there, and only separated further down as the * section's gradient got dark enough to pull away. * * Both gradients ran the same direction, so they tracked each other. * The section is now dark end to end and the panel is uniformly * lighter, which is the relationship Figma has: a dark ground with a * lighter block sitting on it, not two similar blues crossing. * * NOT a change to --gradient-navy - the stats band and the link bars * use that token and are correct as they are. */ .site-footer { margin-top: 0; padding: var(--section-pad) var(--container-pad) var(--space-24); background: linear-gradient(180deg, #1e3f70 0%, #1a3560 55%, #142845 100%); color: var(--on-invert); } /* ---- the closing CTA ---- */ .site-footer__cta { max-width: calc(var(--measure) + (var(--container-pad) * 2)); margin-inline: auto; /* Half the standing rhythm. The CTA and the panel are two halves of * one closing region, not two sections, so the full 100 read as a * gap between unrelated things. */ padding-bottom: calc(var(--section-pad) / 2); text-align: center; } .site-footer__cta-heading { margin: 0 0 var(--space-16); font-size: var(--type-h2); color: var(--on-invert); } .site-footer__cta-sub { margin: 0 0 var(--space-32); font-size: var(--type-body-lg); color: var(--on-invert); } .site-footer__cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-20); margin: 0 0 var(--space-24); } /* The larger pill. The header's is chrome; this one is the last thing * on the page and is meant to be pressed. */ .cta-button--lg { padding: var(--space-16) var(--space-32); font-size: var(--type-small); } /* The outlined twin. Same size, no fill - two amber pills side by side * would give the eye nowhere to go. */ .footer-cta-call { display: inline-block; padding: var(--space-16) var(--space-32); font-size: var(--type-small); font-weight: var(--weight-semibold); color: var(--on-invert); border: 1px solid var(--on-invert); border-radius: var(--radius-pill); white-space: nowrap; } .site-footer .footer-cta-call:hover { background: var(--on-invert); color: var(--navy-deep); text-decoration: none; } .site-footer__cta-talk { margin: 0; font-size: var(--type-detail); color: var(--rule); } .site-footer__cta-talk a { color: var(--on-invert); } /* ---- the inset panel ---- * * A DIFFERENT BLUE, NOT A WHITE WASH. This was rgba(255,255,255,.06) * over the section, which is the obvious way to lift a panel and was * far too quiet - Gerek read it as blue on blue and he was right. * * Sampled off the design render instead of guessed. Outside the panel * the section is about rgb(29,56,106); inside it runs rgb(39,76,130) at * the top left to rgb(29,51,73) at the bottom right. So it is not the * same navy lightened - the blue channel lifts far more than the red - * and it carries its own gradient running the opposite way to the * section behind it. Both of those are why it separates. */ .site-footer__panel { max-width: var(--container-wide); margin-inline: auto; margin-bottom: var(--space-24); padding: var(--space-32) var(--space-40); /* Lighter than the section at EVERY point - that is the rule, not * the exact shade. The first attempt at this failed because both * gradients ran the same direction and crossed; the second * over-corrected into near-black against bright blue. * * These sit close to what Figma actually measures: the section * around rgb(26,53,96) and the panel around rgb(41,77,128), a step * of roughly +15/+24/+32. Enough to read as a box on a ground, * gentle enough that the panel still belongs to the same footer. */ background: linear-gradient(135deg, #2d5590 0%, #294d80 60%, #244470 100%); /* The hairline is belt and braces on purpose. A gradient can always * be re-tuned into invisibility by a later change; a 1px edge cannot, * so the box-in-box survives whatever happens to the two fills. */ border: 1px solid rgba(255, 255, 255, 0.16); color: var(--on-invert); border-radius: var(--radius-md); } /* !! :not(.cta-button) IS LOAD-BEARING - THE THIRD TIME IN THIS FILE. * * ".site-footer a" scores one class plus one element, which BEATS the * bare ".cta-button" rule in section 04. The footer's booking pill was * therefore being repainted white-on-amber. * * That is not a taste question. Measured on the rendered page: white on * #fbb03c is 1.85:1, against a 4.5:1 minimum. --accent-contrast (ink) * on the same amber is 9.99:1. The note on --accent-contrast in 1.2 * says exactly this and says never to "fix" it to white; the same trap * already bit .mobile-menu a and the bare a:hover rule, and both carry * the same guard. * * ANY future rule that colours a bare "a" inside a dark region has to * exclude this class. */ .site-footer a:not(.cta-button) { color: var(--on-invert); text-decoration: none; } /* The outlined Call pill is excluded from the hover underline: it * already answers by filling white with ink text, and an underline on * top of that reads as a link that happens to be in a box rather than * as a button. Underlines stay on the things that ARE links - the * footer menu, the directions link, the phone in the sentence. */ .site-footer a:not(.cta-button):not(.footer-cta-call):hover { text-decoration: underline; } /* THREE COLUMNS, AND A SHORT ONE. * * The brand column takes the most room, hours the least - hours are * label/value pairs and read better narrow. Aligned to the TOP, not * stretched: the logo has to start at the panel's top edge, which was * the other half of why it looked lost. */ /* HOURS LEFT, BRAND CENTRED, MAP RIGHT. * * The brand was in column one, which put the practice's name in the * corner and left the panel reading left-to-right as three unrelated * blocks. Centred, the panel is symmetrical - text one side, map the * other, the lockup holding the middle - and the logo lands on the * centre line of the page. * * The ORDER IS CSS, NOT MARKUP. The brand stays first in the document, * because that is the sensible reading order and because it is what * should come first when these stack on a phone. `order` moves it * visually and only at this breakpoint. * * !! THE OUTER TRACKS MUST BE EQUAL OR THE LOCKUP IS NOT CENTRED. * * This was 1.05fr / 0.9fr / 1fr, which reads as balanced and is not: * the outer tracks differed by 20px, so the middle column - and the * logo in it - sat 10px right of the panel's centre line. Measured, not * guessed: panel centre 750, logo centre 760. Gerek could see it and * could not name it, which is exactly what a 10px offset does. * * 1fr / fixed / 1fr guarantees it: the outer two are identical at any * panel width, so the middle is always dead centre. The centre track is * a fixed 380 rather than a fraction because the thing in it is a * fixed-width image - a fraction just re-introduces a number somebody * has to balance by hand. * * align-items:center, not start. The hours are the shortest column and * were hanging off the top with a gap beneath them; against the map's * height they now sit level with the middle of the panel. */ .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px) minmax(0, 1fr); align-items: center; gap: var(--space-40); } .site-footer__hours { order: 1; } .site-footer__brand { order: 2; } .site-footer__visit { order: 3; } /* ---- brand column ---- */ /* CENTRED, ALL OF IT. * * The lockup is wide enough to fill this column, so left-aligned it * still LOOKED centred - while the phone number and the icon row under * it sat hard left. Three elements, two different alignments, and the * column read as broken rather than as a choice. Centring the whole * thing is the cheaper fix than shrinking the logo to prove it is * left-aligned. */ .site-footer__brand { display: grid; gap: var(--space-12); justify-items: center; text-align: center; } /* The cropped lockup - see the note in footer.php. Bigger than the old * 200 AND it starts at the top of the panel now, because the 22% of * transparent margin that used to push it down is gone from the file. */ .site-footer__logo { margin: 0; } .site-footer__logo img { display: block; width: 260px; max-width: 100%; height: auto; } .site-footer address { font-style: normal; } .footer-phone { font-size: var(--type-h4); font-weight: var(--weight-semibold); white-space: nowrap; } /* ---- social ---- */ /* Bigger, and with room around them. The phone number that used to sit * between the lockup and this row is gone - it was the third printing * of the same number inside one navy region - so the row takes that * space as breathing room rather than closing the gap. */ .footer-social { display: flex; gap: var(--space-16); margin: var(--space-8) 0 0; padding: 0; list-style: none; } /* 40 -> 56 -> 46. 40 read as an afterthought beside a 260px lockup and * was under the 44px minimum a thumb wants; 56 overshot and started * competing with the lockup for the column. 46 clears the touch target * with two pixels to spare and still sits under the mark above it. */ .footer-social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.10); color: var(--on-invert); transition: background-color .15s ease, color .15s ease; } /* The glyph is sized here rather than on the SVG tag, so the row * resizes from one number. */ .footer-social a svg { width: 22px; height: 22px; display: block; } .footer-social a:hover { background: var(--accent); color: var(--accent-contrast); text-decoration: none; } /* ---- a column heading ---- */ .footer-heading { margin: 0 0 var(--space-16); font-family: var(--font-heading); font-size: var(--type-detail); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } /* ---- office hours ---- * A description list, so the days and their times stay associated for * a screen reader rather than being four unrelated runs of text. * * TWO COLUMNS, NOT EIGHT ROWS. Day and hours stacked made this the * tallest thing in the panel for four short facts. Side by side it is * four rows, which is half the height and reads like the opening hours * on a door. */ .site-footer__hours dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8) var(--space-16); margin: 0; font-size: var(--type-detail); } .site-footer__hours dt { font-weight: var(--weight-semibold); white-space: nowrap; } .site-footer__hours dd { margin: 0; color: rgba(255, 255, 255, 0.78); } /* !! A TIME RANGE NEVER BREAKS ACROSS LINES. * * "7:00am - 11:00am, 2:00pm - 6:00pm" wrapped wherever it ran out of * room, which left "6:00pm" stranded alone on line two - a half-range * that reads as a typo. Each range is its own nowrap span, so the only * place the line CAN break is at the comma between them. */ .site-footer__hours dd .hours-range { white-space: nowrap; } /* ---- visit us: map, address, route - one block ---- */ /* No heading on this column. "VISIT US" over a map that already says * so was a label for its own sake, and losing it lifts the whole column * up to sit level with the logo and the hours. */ .site-footer__visit { display: grid; gap: var(--space-8); justify-items: start; /* Capped and pushed to the far edge. Left to fill its column the map * became the widest thing in the panel, and Google answers a wider * frame by zooming OUT - so the practice's own pin got smaller as * the card got bigger. A card, not a panel. */ width: min(330px, 100%); justify-self: end; } .map-embed { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, 0.08); } /* The iframe carries width/height attributes for its own aspect; these * override them so it fills whatever the card is. */ .map-embed iframe { display: block; width: 100%; height: 100%; border: 0; } .site-footer__visit address { font-size: var(--type-detail); } .site-footer__directions { font-size: var(--type-detail); font-weight: var(--weight-semibold); } /* ---- the base row ---- * Links in ONE horizontal run, legal on the other side. They used to be * a 2x2 block of four legal pages sitting in the middle of the panel, * which gave four minor links the visual weight of a nav. */ .footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); margin: 0; padding: 0; list-style: none; } /* AMBER ON HOVER, like the header's tier-1 nav. Same reasoning: these * sit on the dark panel, amber is the accent the region already * carries, and white-underlining-white is a state change you have to * hunt for. The underline stays and takes the colour with it, since it * inherits currentColor. */ .footer-nav a { font-size: var(--type-detail); transition: color .15s ease; } .site-footer .footer-nav a:hover, .site-footer .footer-nav a:focus-visible { color: var(--accent); text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .footer-nav a { transition: none; } } /* ---- base ---- * Links on one side, legal on the other, both on one row at desktop. * This is the "pancake" half of the brief: the panel should be short * and wide, and stacking four legal links above two legal lines was * three rows doing the work of one. */ .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16) var(--space-40); margin-top: var(--space-24); padding-top: var(--space-20); border-top: 1px solid var(--rule-invert); font-size: var(--type-xs); } .site-footer__base p { margin: 0; } .site-footer__legal { display: grid; gap: 2px; text-align: right; color: rgba(255, 255, 255, 0.66); } /* THE LICENCE BLOCK. * * Kept visually distinct so nobody edits it casually, and kept in its * OWN paragraph so the licence number is never on the same line as the * business name. * * The licence belongs to Dr. Michael VanDerschelden, DC personally. * Huntington Beach Chiropractic does not hold one and must never appear * beside the number. See the note in footer.php. */ .footer-licence { margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-8); color: var(--on-invert); } .footer-licence strong { font-weight: var(--weight-semibold); } /* The name and the number sit side by side, separated by a rule rather * than by punctuation - close enough to read as one credential, far * enough that nobody mistakes them for a sentence containing the * business name. */ .footer-licence span { border-left: 1px solid var(--rule-invert); padding-left: var(--space-8); } /* !! THE BUILD CREDIT MUST NOT LOOK LIKE AN ADVERT. Gerek's brief was * "same font size, same everything else - make it look blended in", so * it inherits colour from the copyright line rather than taking a link * colour that would make the one commercial word on the page the * brightest thing in the footer. * * `color: inherit` rather than naming --on-invert, so it keeps matching * if that line is ever recoloured. It is still a link: it underlines on * hover and on keyboard focus, which is the whole of what tells somebody * it can be clicked. */ .footer-credit__link { color: inherit; text-decoration: none; } .footer-credit__link:hover, .footer-credit__link:focus-visible { text-decoration: underline; } /* !! ON TESTING THIS PAGE BELOW DESKTOP. * * Headless screenshots of this page at phone width are NOT reliable. * They come back with content clipped past the right edge - at both * tall and normal window heights - while a real browser at the same * width measures scrollWidth exactly equal to clientWidth and renders * correctly. Chasing that phantom overflow cost real time, and two * genuine faults (the missing cutout, the broken step diagram) were * only found afterwards by scrolling an actual viewport. * * Measure and screenshot in a real browser for tablet and phone. Use * headless for desktop stills, where it agrees. * ================================================================== */ /* ================================================================== * 07 RESPONSIVE * * !! THERE IS NO DESIGN BELOW 1440px. The Figma file is a single * desktop frame and none is coming. Everything in this section is a * judgement call, recorded here so it can be argued with rather than * discovered later. * * WHAT WAS DECIDED, AND WHY * * 1200+ DESKTOP - the design's layout. * logo | nav | phone | CTA, all on one row. * * 992-1199 TABLET LANDSCAPE - nav collapses, everything else stays. * The six Tier-1 items need roughly 525px of the row once the * 32px gaps are counted. Below 1200 the container starts * shrinking and the row cannot hold the logo, the nav, a phone * number and a 28-character button at once. The NAV is what * gives way - it is the only element with a complete * replacement one tap away. The phone and the CTA stay in the * bar, because a visitor on a tablet is as likely to call as * one on a desktop, and burying the number behind a hamburger * would break the click-to-call requirement. * * 768-991 TABLET PORTRAIT - same single row, tighter. * Still fits: the CTA loses padding rather than words. * * <768 PHONE - the header wraps to two rows. * Row 1: logo + hamburger. Row 2: phone + CTA, full width. * Everything stays present. The full "Book New Patient * Appointment" wording is never shortened and the number is * never reduced to an icon - both were explicit requirements, * and both are the reason for the second row rather than a * squeeze. * * <600 SMALL PHONE - only the boxes tighten, never the strings. * * THE FOOTER follows the same principle: the design's two-column * arrangement holds while it fits, then stacks. The link block keeps * its two columns down to 600 because four short items in two columns * read better than a four-item ladder; below that it becomes one. * ================================================================== */ /* Hamburger takeover. * * MEASURED, not guessed. At 1200px the header's content box is 1248 - * the design's own width - and the row needs roughly 1140 of it: a * 190px logo, ~525px of nav, ~120px of phone, ~215px of CTA, and three * 24px gaps. Below 1200 the container shrinks with the window and the * slack is gone. * * !! RE-MEASURE THIS IF THE MENU CHANGES. A seventh Tier-1 item, or a * longer label than "New Patients", pushes the takeover point up. */ @media (max-width: 1199px) { .primary-nav { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 991px) { .site-header__inner { gap: var(--space-16); } .site-header__actions { gap: var(--space-16); } .site-header__logo img { width: 114px; } } /* Two-row header. * * SCOPED WITH A CHILD COMBINATOR - deliberately, and this matters. * .site-header__logo is reused inside .mobile-menu__top for the * logo. Unscoped, "order: 1" applied there too, and because the * Close button keeps the default order of 0 it jumped ahead of the * logo - the panel header rendered Close-then-logo, mirrored from * its own markup. That bug shipped once and was caught on a real * phone-width render. Do not remove the "> ". */ @media (max-width: 767px) { .site-header__inner { flex-wrap: wrap; row-gap: var(--space-12); column-gap: var(--space-12); } .site-header__inner > .site-header__logo { order: 1; } .site-header__inner > .nav-toggle { order: 2; } /* PHONE AND CTA SHARE THE SECOND ROW, HALF EACH. * * They were space-between, which let the CTA size to its label and * left the row looking accidental, and below 600 the CTA took a * whole third row as a full-width slab. Two equal halves reads as * deliberate and gives the logo the top row to itself. */ .site-header__inner > .site-header__actions { order: 3; flex-basis: 100%; gap: var(--space-12); } .site-header__actions > * { flex: 1 1 0; } .site-header__actions .header-phone { justify-content: center; } .site-header__actions .cta-button { text-align: center; } /* The logo gets the room the hidden "Menu" label gave back. 170 -> * 195: the top row carries only the mark and a 46px button, so there * is space, and at 170 it still read small against a two-row header * that is 147px tall. 195 -> 215 on the same reasoning. */ .site-header__logo img { width: 215px; } .site-footer__panel { padding: var(--space-32) var(--space-24); } .site-footer__grid { gap: var(--space-32); } } @media (max-width: 599px) { /* Both strings stay in full. Only the boxes around them tighten. * * The CTA takes its own row here rather than shrinking further. At * a 22px body the header's two items no longer fit side by side on * a 390px phone without cutting the button's label down to * something no thumb wants to aim at - and "Book New Patient * Appointment" is the whole point of the header. Full width reads * as deliberate; 13px type squeezed against the edge does not. */ /* Still two halves at 390 - the CTA no longer takes its own row. * "Book Appointment" is short enough to fit one now that the header * label is gone and the phone is beside it rather than above it. */ /* 150 -> 175 -> 200. Measured at 390: the mark and the 46px toggle * come to 246 of 342 available, so the row still is not tight. This * is close to the practical ceiling - past about 210 the toggle * starts crowding the mark's right edge. */ .site-header__logo img { width: 200px; } .header-phone { font-size: var(--type-xs); } .site-header__actions .cta-button { padding: var(--space-12) var(--space-8); font-size: var(--type-xs); } .footer-nav ul { grid-template-columns: 1fr; } } /* ================================================================== * 08 ARTICLE CARD + GRID (component) * * !! THE ONLY COMPONENT ON THIS SITE THAT IS NOT PER-PAGE. Every other * layout here belongs to the page it was drawn for - that is what the * .ca-*, .mh-*, .ct-*, .wte-*, .ab-*, .rv-* and .ar-* prefixes are for. * Articles are different: one component in three places a reader moves * between - /articles/, every category archive, and the [article_feed] * shortcode - so it is adjusted once, here, and all three follow. * * !! REWRITTEN 2026-08-27, FROM A STACKED LIST CARD TO A GRID TILE. * * This section used to describe a horizontal preview - a 180px thumbnail * beside the text, cards separated by a bottom rule - with a stretched * ::after overlay around the title only. It was replaced, not amended, * when /articles/ became the posts page and gained a real index. * * NOTHING A READER HAS SEEN CHANGED. The markup that produced the old * card came from the [article_feed] shortcode, and that shortcode is on * ZERO pages and ZERO posts - checked across all 19 pages, 2026-08-27, * before this was touched. It was dead code. * * !! THE WHOLE TILE IS ONE ANCHOR, so there is no ::after overlay and no * :has() focus rule any more. A screen reader announces one link per * card instead of three, hover and focus move the whole object, and the * accessible name is just the title. See inc/article-card.php. * * WHITE WITH A HAIRLINE, NOT CREAM, AND THAT IS A DELIBERATE ECHO. The * Articles frame draws an empty-state box (577:160) as a white box with * a 1px --rule border on a 16px radius, sitting in the exact place these * cards appear. A reader watching the page fill up sees the same slot * gain contents. The six CATEGORY cards above it are --surface-alt with * a shadow, so the two card types on that white ground never blur. * ================================================================== */ /* THREE ACROSS, which is also HBCHIROPRACTIC_ARTICLES_PER_CATEGORY - so a * category feed always fills exactly one row and can never put a row * with a hole in it on the page. --4 exists for a wider full-width feed * and is not used today; it is one declaration and it keeps the grid * from being re-derived the first time somebody wants four. */ .article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); margin: var(--space-32) 0 0; padding: 0; list-style: none; } .article-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* The
  • is only a grid cell. Everything painted is on the anchor, so * the whole painted surface is the click target rather than a box with a * link inside it. */ .article-card { display: grid; } .article-card__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); text-decoration: none; /* Not verifiable in this environment - the pane's tab is backgrounded * so the compositor never ticks and getComputedStyle returns t=0 * forever. Both the resting and the hover state are real declarations * rather than animation, so the transition only softens a change that * is correct with or without it. */ transition: border-color 150ms ease, box-shadow 150ms ease; } /* !! THE HOVER IS A BORDER AND A LIFT, NOT A COLOUR CHANGE ON THE TEXT. * Section 02's `a:not(.cta-button):hover { color: var(--navy) }` already * reaches this anchor and would repaint every word in the tile - the * date and the excerpt included, which are deliberately --ink-subtle and * --ink-muted. Naming the colour back at the card keeps the hierarchy * inside the card and lets the title alone carry the state. */ .article-card__link:hover { color: var(--ink); border-color: var(--navy); box-shadow: var(--shadow-card); } .article-card__link:hover .article-card__title { color: var(--navy); } .article-card__link:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; } /* A post with no featured image renders with NO media block at all - the * body simply takes the whole tile. That matters on this site rather * than being defensive: the first articles arrive from the AEO Article * Creation Tool and may land before anyone has chosen a picture. */ .article-card__media { display: block; overflow: hidden; background: var(--surface-alt); } .article-card__img { display: block; width: 100%; /* A fixed ratio keeps a row of cards aligned regardless of what shape * the uploaded image happens to be. A component dimension, not * layout spacing. */ aspect-ratio: 16 / 9; object-fit: cover; } /* flex rather than grid, and `margin-top: auto` on the last child, so * "Read more" sits on the tile's bottom edge in every card in a row no * matter how long its excerpt is. Same problem the review cards solved * with grid-template-rows in 16.3; here the body is the flexible box * rather than the card, because the media above it is a fixed ratio. */ .article-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-8); padding: var(--space-24); } .article-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--type-h5); font-weight: var(--weight-semibold); transition: color 150ms ease; } .article-card__meta { font-size: var(--type-xs); color: var(--ink-subtle); } .article-card__excerpt { font-size: var(--type-small); color: var(--ink-muted); } .article-card__more { margin-top: auto; padding-top: var(--space-8); font-size: var(--type-detail); font-weight: var(--weight-semibold); color: var(--navy); } /* The shortcode's wrapper. It keeps its own class so a caller can target * "a feed placed in page copy" separately from the ones the templates * build - the one thing the shortcode can do that home.php cannot. The * cards inside it are the same cards. */ .article-feed { display: block; } /* ---- 08.1 PAGINATION ---- * * the_posts_pagination() on /articles/ and on every archive. It is the * ONE paginator on either page - see inc/articles.php for why several * feeds on one page cannot each have their own. * * WordPress emits the current page as * and the rest as anchors, so the two are styled together and the * current one is inverted. `.nav-links` is core's wrapper and is the * only thing that can be made the flex row. */ .pagination { margin-top: var(--space-48); } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--space-48); min-height: var(--space-48); padding: 0 var(--space-12); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-nested); color: var(--ink); font-size: var(--type-small); text-decoration: none; } /* 48px minimums above are a touch target, not a look: a paginator is the * one control on these pages a reader uses repeatedly on a phone. */ .pagination a.page-numbers:hover { color: var(--ink); border-color: var(--navy); } .pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: var(--on-invert); font-weight: var(--weight-semibold); } /* The ellipsis core prints between distant page numbers is not a * control and should not wear a box. */ .pagination .page-numbers.dots { min-width: 0; padding: 0 var(--space-8); background: none; border: 0; color: var(--ink-muted); } @media (max-width: 991px) { .article-grid, .article-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 599px) { .article-grid, .article-grid--4 { grid-template-columns: 1fr; } /* The tile keeps its own left edge. It is a heading, a date and a * running sentence in a box of its own - the same call 10b makes for * .ca-workup .hp-card and 16b makes for .rv-card. */ .article-card { text-align: left; } } /* ================================================================== * 09 HOMEPAGE SECTIONS * * VISUAL SOURCE: Figma 513:2393. Every colour, size and space below * comes from a token in section 01 - there is not a raw value in here. * * !! THE SECTION CLASSES ARE THE HOMEPAGE'S. THE COMPONENT CLASSES ARE * NOT, ANY MORE. * * This block used to say the .hp-* classes "only the homepage emits, so * nothing here can reach the other eighteen pages". That was true while * the homepage was the only built page and it is now half wrong, which * is worse than being wrong - it invites the next page to duplicate a * component rather than reuse it. * * As built: * .hp-hero .hp-intro .hp-stats .hp-photostrip .hp-problem * .hp-different .hp-system .hp-bars .hp-proof .hp-not-for-everyone * SECTIONS. Homepage only. They carry its rhythm and its grounds. * Do not reuse one on another page - give that page its own. * * .hp-media / .hp-frame .hp-eyebrow and its pill variants * .hp-cards / .hp-card .hp-stats__row / .hp-stat .hp-btn-line * COMPONENTS. Shared, and already used by section 10. A page that * needs one to look different states the difference ITSELF - * `.ca-workup .hp-card { ... }` - rather than adding a modifier * here. The component keeps one definition. * * !! THE COPY IS NOT STYLED INTO EXISTENCE. Headings and paragraphs * are the loaded 3.6 blocks; this section only arranges them. * * NO DESIGN EXISTS BELOW 1440px. The breakpoint behaviour at the end * of this section is the theme's own - see the note there. * ================================================================== */ /* ---- 9.0 image slots ---- * * Every photograph on this page sits in a slot whose SIZE comes from * the design. A slot is in one of two states: * * .hp-media FILLED - wraps a real * .hp-frame EMPTY - a dashed box naming what belongs there * * !! THE SIZE MODIFIERS BELONG TO BOTH. Every --hero-bg, --portrait, * --video, --icon and --cluster rule in this section is written against * `.hp-frame--x, .hp-media--x` so the two states occupy identical * space. Filling a slot is then a markup change and never a CSS one, * and an empty slot cannot quietly collapse the layout around it. * * Find the ones still empty with: grep "EMPTY FRAME" */ .hp-frame, .hp-media { border-radius: var(--radius-md); overflow: hidden; } .hp-frame { display: flex; align-items: center; justify-content: center; background: var(--surface-alt); border: 1px dashed var(--rule); color: var(--ink-subtle); } .hp-frame__label { font-size: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; padding: var(--space-8); text-align: center; } /* The filled state. The wrapper owns the slot's dimensions and the * is told to fill it outright - width AND height at 100% with * object-fit. `height: auto` here would let the image's own intrinsic * size decide, which is how a 1265px-wide photograph ends up bursting * a 508px column. */ /* !! MARGIN ZERO IS LOAD-BEARING. Every filled slot is a
    , * and the user-agent stylesheet gives that a 1em inline margin - which * would inset each photograph from its own column and push the hero * image out of alignment with the copy beside it. */ .hp-media { display: block; margin: 0; } /* !! THE BRANCH IS NOT OPTIONAL ONCE A SLOT ART-DIRECTS. * * A puts an element between the figure and the , so a * `.hp-media > img` selector silently stops matching and the photograph * reverts to its intrinsic size inside the slot - which is how a * 1265px-wide file bursts a 508px column, the exact failure the rule * below exists to prevent. Both paths, one rule. */ .hp-media > picture { display: block; } .hp-media > img, .hp-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Cut-outs and line art are drawn to fit, not cropped to fill. */ .hp-media--contain > img { object-fit: contain; } /* ---- 9.1 shared section furniture ---- * * !! display:contents ON THE INNER CONTAINER IS LOAD-BEARING. * * A wp:group block does not render as one element. WordPress wraps its * children in a .wp-block-group__inner-container, so .hp-hero had * exactly ONE child and every grid-template-columns in this section was * laying out a single item - the hero's photograph stacked above the * copy instead of sitting beside it. Caught on the real page. * * display:contents dissolves that wrapper for layout purposes, so the * real children become the grid items these rules expect. Scoped to * .hp-* so no other page is affected. */ [class*="hp-"] > .wp-block-group__inner-container { display: contents; } .hp-intro, .hp-stats, .hp-problem, .hp-different, .hp-system, .hp-bars, .hp-proof, .hp-not-for-everyone, .hp-photostrip { padding-inline: var(--container-pad); } /* .hp-hero is absent above too: the panel sets its own width and * margin, because inline padding would sit INSIDE it and push the * photograph away from its own edges. */ /* !! GRID ITEMS MUST BE ALLOWED TO SHRINK. * * min-width:auto is the default on a grid item, which means any fixed * width inside one becomes a floor the whole column cannot go below. * The homepage's grids all hold photographs at their design widths, so * without this every one of them is a potential horizontal scrollbar at * phone size. Set once here rather than hunted down per section. * * Targets the grandchildren: 9.1 gives WordPress's inner-container * display:contents, so the real grid items are one level further in. */ .hp-hero > .wp-block-group__inner-container > *, .hp-proof > .wp-block-group__inner-container > *, .hp-hero > *, .hp-proof > * { min-width: 0; } /* EVERY SECTION NOW CENTRES ITSELF. * * front-page.php hands the content straight to
    with no container * around it, because a container is what stopped the full-width * sections being full width. The consequence is that a section which * sets a max-width must also centre itself - inside the old wrapper * that was free, and out here it is not. Anything missing this would * silently pin itself to the left edge of a 1600px screen. */ .hp-hero, .hp-intro, .hp-problem, .hp-different, .hp-system, .hp-bars, .hp-not-for-everyone, .hp-photostrip { margin-inline: auto; } /* The sections that are SUPPOSED to reach both edges - the navy band, * the review ground and the final CTA - set no max-width at all, so * they fill whatever
    gives them. That is the whole point. */ /* ONE RHYTHM, NOT SIX. Every section gets the same 100px above and * below. This used to be four different values applied to four * different subsets, which is why the page read as a stack of unrelated * blocks rather than a document. The stats bar is the single exception * below - it is a thin band, not a section. */ /* .hp-hero is absent: it is a panel that sits close under the header * and carries its own, much smaller, top pad. Everything else takes the * standing 100. */ .hp-intro, .hp-problem, .hp-different, .hp-system, .hp-bars, .hp-proof, .hp-not-for-everyone, .hp-photostrip { padding-block: var(--section-pad); } /* !! TWO SECTIONS ON THE SAME GROUND SHARE ONE GAP. * * 100 above and 100 below is the rule, and at a colour change it is * exactly right - the eye reads the edge, not the distance. Where two * sections on the SAME white ground meet, the two pads stack into 200px * of nothing and the page looks like it has come apart. * * Halving both sides of that one boundary gives the standing 100 * between them without special-casing either section's own rhythm. The * navy band above the photo strip is untouched: it has an edge of its * own and needs the full pad. */ .hp-photostrip { padding-bottom: calc(var(--section-pad) / 2); } .hp-problem { padding-top: calc(var(--section-pad) / 2); } /* THE PROBLEM and HOW WE DO IT DIFFERENTLY are the same argument in two * halves - the same four steps, done two ways - and they sit on the * same white. Same treatment, for the same reason. * * .hp-different keeps its FULL bottom pad: that boundary is a real * colour change into the beige of OUR SYSTEM, and the bordered panel * needs the whole 100 under it. */ .hp-problem { padding-bottom: calc(var(--section-pad) / 2); } .hp-different { padding-top: calc(var(--section-pad) / 2); } /* A section heading is not a paragraph heading: it introduces several * blocks, not the next sentence, and the global 16px margin made the * first paragraph look like a subtitle attached to it. */ .hp-intro h2, .hp-problem h2, .hp-system h2, .hp-not-for-everyone h2, .hp-photostrip h2 { margin-bottom: var(--space-32); } /* RUNNING COPY IS CAPPED, THE CONTAINER IS NOT. See --measure in 1.13. * Scoped to p.wp-block-paragraph on purpose: that is the class * WordPress puts on a plain paragraph, so the CTA rows, button lines * and eyebrows - which carry their own classes and are not running * copy - keep the full width they need. */ .hp-intro p.wp-block-paragraph, .hp-problem p.wp-block-paragraph, .hp-system p.wp-block-paragraph, .hp-not-for-everyone p.wp-block-paragraph { max-width: var(--measure); margin-inline: auto; } /* The eyebrow, in its three forms: plain (hero), an outlined pill on * white, and an outlined pill on a dark ground. */ /* The pill and the heading it introduces are a pair, but they are not * the same line - 16px read as a stacked label rather than an * introduction. 32 gives the H2 room to land. */ .hp-eyebrow { margin: 0 0 var(--space-32); /* fall through to the sizes below */ font-size: var(--type-detail); font-weight: var(--weight-medium); letter-spacing: var(--tracking-eyebrow); color: var(--ink-muted); } /* The default pill is RED - this is the one THE PROBLEM uses, and the * design draws it in --alert (#ff1a1a) for both the outline and the * text. The other two eyebrows override the colour below. */ /* Bigger and heavier than the design draws it. At 13px Regular inside a * 1px hairline it was a label; these pills are the only thing marking * where one argument ends and the next begins, and on a page this wide * they have to carry that from across the room. 2px of border, a * semibold weight and wider tracking do it without adding a colour. */ .hp-eyebrow--pill { display: inline-block; align-self: center; padding: var(--space-12) var(--space-24); font-size: var(--type-small); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--alert); border-radius: var(--radius-pill); color: var(--alert); } .hp-eyebrow--ink { border-color: var(--ink); color: var(--ink); } .hp-eyebrow--invert { border-color: var(--on-invert); color: var(--on-invert); } /* ---- 9.2 HERO ---- * Copy column left, photograph right. The design's column is 584px * inside a 1140 container; the frame takes what is left. */ /* ONE PANEL WITH THE PHOTOGRAPH BEHIND EVERYTHING. * * The photograph is the GROUND for the whole row, not a column beside * the copy. It was built as a two-column split, which is why the shot * was cropped to a slot too narrow to hold its own subject and why the * hero read as a text block with a picture next to it rather than as * one image. * * The composition only works because the photograph is already lit for * it: the room's white wall fills the left half and Dr. Michael and the * patient sit in the right. The copy goes on the wall. The wash in * .hp-hero__bg::after is insurance for the crops where less wall is * showing, not the main event. * * SITS CLOSE UNDER THE HEADER on purpose - this section takes a much * smaller top pad than the 100px every other section gets, because the * panel's own top edge is the separation. */ .hp-hero { position: relative; isolation: isolate; display: grid; align-items: center; width: calc(100% - (var(--container-pad) * 2)); max-width: var(--container); min-height: 620px; /* 40 above, not 100: the gap to the header. The panel's own edge is * the separation, so the full rhythm would leave it stranded. */ margin: var(--space-40) auto 0; padding-block: var(--space-48); border-radius: var(--radius-md); overflow: hidden; } .hp-hero__col { position: relative; z-index: 1; /* WIDTH AND INDENT MOVE WITH --type-h1-hero, NOT INDEPENDENTLY. * * 740 wide with a 72px indent gives the headline about 620px to set * in, which is four lines at 52px. Narrow it without dropping the * headline size and it goes to five, the panel grows, and the * photograph behind it has to scale up to keep covering - the same * loop that produced a close-up of a shoulder at 660/42. * * The indent is ASYMMETRIC on purpose: 72 on the left so the copy * sits in from the panel edge rather than against it, 48 on the * right because that edge is a soft gradient into the photograph and * needs no matching margin. The block ends around 53% of the panel, * which is still inside the navy wash. */ width: min(740px, 100%); justify-self: start; padding-left: var(--space-72); padding-right: var(--space-48); } /* !! :not(.hp-cta-row) IS LOAD-BEARING. * * WordPress leaves wp-block-paragraph on a paragraph that also carries * its own class, so the CTA row matches p.wp-block-paragraph too. With- * out the exclusion the button row inherited the lede's 26px and both * pills grew. Same trap as the --measure rule in 9.1. */ .hp-hero__col > p.wp-block-paragraph:not(.hp-cta-row) { font-size: var(--type-hero-lede); } .hp-hero h1 { font-size: var(--type-h1-hero); } /* Everything in the copy column inverts onto the navy wash. The amber * pill is untouched - ink on amber stays ink, per --accent-contrast. */ .hp-hero__col, .hp-hero__col h1, .hp-hero__col p { color: var(--on-invert); } .hp-hero__col .hp-eyebrow { color: rgba(255, 255, 255, 0.78); } .hp-hero .hp-cta-row { color: rgba(255, 255, 255, 0.55); } .hp-hero .hp-cta-row a:last-of-type { color: var(--on-invert); } .hp-hero .hp-cta-row a:last-of-type:hover { background: var(--on-invert); color: var(--navy-deep); } /* The panel lifts off the page rather than sitting flush on it - the * other thing that was missing above the fold. */ .hp-hero { box-shadow: var(--shadow-photo); } /* The hero's two buttons sit SIDE BY SIDE, as the design draws them. * .hp-cta-row is already flex; the pair simply measured a few pixels * wider than the copy column and wrapped, costing the panel ~70px of * height - and the panel's height is what decides how hard the * photograph behind it gets scaled. Chrome sizing, so the 22px body * rule is untouched. * * !! MATCH :first-of-type / :last-of-type EXPLICITLY. * * The base rules in 9.11 are .hp-cta-row a:first-of-type, which scores * (0,2,1) - the same as a plain .hp-hero .hp-cta-row a, and they sit * later in the file, so the obvious override silently loses the tie. * Third time this file has caught me on specificity today; naming the * pseudo-class is what actually wins it. */ .hp-hero .hp-cta-row a:first-of-type, .hp-hero .hp-cta-row a:last-of-type { font-size: var(--type-detail); padding: var(--space-12) var(--space-20); } .hp-hero__col > *:last-child { margin-bottom: 0; } .hp-hero__bg { position: absolute; inset: 0; z-index: 0; display: flex; } /* NAVY, NOT WHITE. * * The first version washed the left of the photograph out to near-white * and set dark type on it. It was legible and completely flat: a white * header over a white wash over a white page, with a photograph of a * white room in the middle. Nothing above the fold had any weight. * * The wash is now the brand navy, the type on it is white, and the * amber CTA is the only warm thing in the frame - which is what makes * it read as the thing to press. It also ties the hero to the header * and the stats band, so the top of the page is one object rather than * three unrelated pale ones. * * The stops are deliberately uneven: solid to about a third, then a * fast fall to nothing by two-thirds. A linear fade would grey the * subject on the right, which is the half that has to stay a * photograph. */ .hp-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 100deg, rgba(16, 44, 70, 0.95) 0%, rgba(16, 44, 70, 0.88) 32%, rgba(16, 44, 70, 0.55) 52%, rgba(16, 44, 70, 0.10) 68%, rgba(16, 44, 70, 0) 80% ); } /* Fills the panel outright. The photograph is 1265x652 against a panel * about 1400x620, so it is scaled up slightly and cropped top and * bottom - which is where there is nothing but wall and floor. */ .hp-frame--hero-bg, .hp-media--hero-bg { flex: 1; } .hp-media--hero-bg, .hp-media--hero-bg > img { height: 100%; } /* min(), NOT a fixed 406 with max-width:100%. * * A grid item defaults to min-width:auto, so a 406px child sets the * column's minimum to 406 and max-width:100% then resolves against a * column the child itself is inflating - the two agree on 406 and the * hero refuses to go narrower. On a 390px phone that pushed the whole * document to 528 wide and gave the site a horizontal scrollbar; the * mobile menu looked like the culprit only because a fixed element * sizes off the overflowed page. min() takes the smaller outright and * has no circularity to resolve. */ .hp-frame--hero-video, .hp-media--hero-video { width: min(406px, 100%); max-width: 100%; aspect-ratio: 406 / 228; margin-block: var(--space-24); } /* THE CTA LINES. * * The document writes each CTA row as ONE line - "Book New Patient * Appointment → | Call (714) 794-2171" - so the page has one * paragraph carrying two links and a literal pipe between them. The * first link is painted as the amber pill and the second as the outlined * pill. * * The pipe between them is DOCUMENT NOTATION, not copy - it means "these * are two separate CTAs" the way the arrow meant "this is a link" - and * the builder strips it on the same rule. See cta_row(). */ .hp-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-16); align-items: center; color: var(--ink-subtle); } /* The in-page primary CTAs are the same component as .cta-button, at a * larger size. Same three layers - see the note on .cta-button in 04 - * so the two never drift apart visually. */ .hp-cta-row a:first-of-type { position: relative; isolation: isolate; display: inline-block; padding: var(--space-12) var(--space-24); background: var(--accent-fill) padding-box, var(--accent-rim) border-box; /* 2px, not 1: at a hairline the multi-stop ring averages out to a * pale outline and the metal is lost. */ border: 2px solid transparent; color: var(--accent-contrast); font-size: var(--type-small); font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-pill); box-shadow: var(--accent-lift); transition: box-shadow .18s ease, transform .18s ease; } .hp-cta-row a:first-of-type::before { content: ""; position: absolute; inset: 2px 2px 50%; z-index: -1; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: var(--accent-gloss); pointer-events: none; } .hp-cta-row a:first-of-type:hover { color: var(--accent-contrast); box-shadow: 0 6px 12px rgba(255, 139, 0, 0.42), 0 0 26px rgba(251, 176, 60, 0.55); transform: translateY(-1px); } .hp-cta-row a:last-of-type { display: inline-block; padding: var(--space-12) var(--space-24); font-size: var(--type-ui); font-weight: var(--weight-semibold); text-decoration: none; border: 1px solid currentColor; border-radius: var(--radius-pill); } /* On the navy panels the outlined pill and the pipe invert. */ /* The two rules that inverted .hp-final's CTA row on a dark ground * went with the rest of 9.11 - that block is footer.php's now. */ /* ---- 9.3 INTRO ---- */ .hp-intro { max-width: calc(var(--container) + (var(--container-pad) * 2)); text-align: center; } .hp-intro p { margin: 0; } /* ---- 9.4 STATS BAR ---- */ .hp-stats { background: var(--gradient-navy); color: var(--on-invert); padding-block: var(--space-40); padding-inline: 0; } /* The one section that does NOT take --section-pad: it is a band, and * 100px of air inside it would turn it into a section. */ /* The gutter drops to 16 because each stat now carries 16 of its own * padding for the hover ground - 16 + 16 + 16 is the 32 the columns * always sat apart, so nothing moved. */ .hp-stats__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); max-width: var(--container); margin: 0 auto; padding-inline: var(--container-pad); list-style: none; } /* Icon left, figure over label right. The icon spans both text rows so * it centres against the pair rather than sitting on the figure alone - * which is how 513:2787 draws it. A stat with no icon still lays out * correctly: with nothing in the first column it collapses to zero. */ .hp-stat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-8) var(--space-16); padding: var(--space-16); border-radius: var(--radius); transition: background-color .2s ease, transform .2s ease; } /* MOVEMENT ON HOVER, AND ONLY ON HOVER. * * These four are the page's proof, so they should answer when someone * points at them - but they are not links and nothing happens when you * click, so the movement has to read as "noticed" rather than as * "press me". A small lift and a barely-there ground do that; a scale, * a shadow or a colour change would all overpromise. * * The icon leads the lift slightly - 4px against the row's 3px - which * is what makes the pair feel like it is responding rather than * sliding. Nothing else in the row moves independently. * * :focus-within is included so a keyboard reaching the Google or Yelp * mark gets the same feedback a mouse does. */ .hp-stat:hover, .hp-stat:focus-within { background: rgba(255, 255, 255, 0.07); transform: translateY(-3px); } .hp-stat__icon { transition: transform .2s ease; } .hp-stat:hover .hp-stat__icon, .hp-stat:focus-within .hp-stat__icon { transform: translateY(-1px) scale(1.06); } @media (prefers-reduced-motion: reduce) { .hp-stat, .hp-stat__icon { transition: none; } .hp-stat:hover, .hp-stat:focus-within { transform: none; } .hp-stat:hover .hp-stat__icon, .hp-stat:focus-within .hp-stat__icon { transform: none; } } .hp-stat__icon { grid-row: span 2; display: block; width: 44px; height: 44px; } /* CONTAIN, NOT COVER. These are badges of different shapes - the * laurels are 44x37, the Yelp burst 34x44 - and cropping any of them to * a square would cut the mark. */ .hp-stat__icon > img { display: block; width: 100%; height: 100%; object-fit: contain; } .hp-stat__figure { font-family: var(--font-heading); font-size: var(--type-h2); font-weight: var(--weight-bold); line-height: 1.1; } .hp-stat__label { font-size: var(--type-xs); color: var(--rule); } /* ---- 9.4a INSIDE THE PRACTICE - the photo strip ---- * * VISUAL SOURCE: Figma 513:2473 "Section - Proof Photo Strip". * * Numbered 9.4a rather than 9.5 on purpose. The section sits between * the stats bar and THE PROBLEM in the design, and inserting it as a * whole number would have renumbered nine downstream blocks and every * comment that points at them - churn with no reading benefit. * * !! THE CARD IS THE CROP. Each photograph is larger than its 360x330 * card and the design slides it inside the frame - three of the four * are pulled UP so the subject sits above the caption. That is * reproduced with object-position rather than by shipping four * pre-cropped files, so re-cropping later is a one-line change and the * originals stay intact in the media library. * * !! THE CAPTION BOX *IS* THE SCRIM. Figma draws a separate 260px * gradient rectangle behind the text; here the caption carries the * gradient itself and is sized to the same 79% of the card. One * element instead of two, identical result, and the text can never * drift off its own backing. */ .hp-photostrip { max-width: calc(var(--container) + (var(--container-pad) * 2)); } .hp-photostrip h2 { margin: 0 0 var(--space-24); } .hp-photostrip__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-24); margin: 0; padding: 0; list-style: none; } .hp-photo { position: relative; aspect-ratio: 360 / 330; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-photo); } .hp-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* The one card the design does NOT pull up - its subject is already * centred in the frame (513:2487). */ .hp-photo--centred > img { object-position: center; } /* A card whose photograph does not exist yet. It keeps the caption - * that copy is real and comes from the design - but the picture area * becomes the same dashed box every other unbuilt slot on this page * uses, so it reads as unfinished rather than as a broken image. The * scrim is untouched: it is transparent at the top, where the label * sits, and solid at the bottom, where the caption does. */ .hp-photo--empty { background: var(--surface-alt); border: 1px dashed var(--rule); color: var(--ink-subtle); } .hp-photo--empty .hp-frame__label { position: absolute; inset-inline: 0; top: var(--space-24); text-align: center; } .hp-photo__caption { position: absolute; inset-inline: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-8); height: 79%; /* a 260px scrim in a 330px card */ padding: var(--space-24); background: var(--scrim-photo); } .hp-photo__title { margin: 0; font-family: var(--font-heading); font-size: var(--type-h5); font-weight: var(--weight-semibold); color: var(--on-invert); } .hp-photo__body { margin: 0; font-size: var(--type-detail); color: var(--on-invert-muted); } /* ---- 9.5 THE PROBLEM + 9.6 HOW WE DO IT DIFFERENTLY ---- */ .hp-problem, .hp-system, .hp-not-for-everyone { display: flex; flex-direction: column; align-items: center; text-align: center; } /* .hp-not-for-everyone is deliberately absent here: its ground runs * edge to edge, so the SECTION is full width and only the copy inside * it is held in. Same for .hp-system, whose monogram bleeds right. */ .hp-problem, .hp-different { max-width: calc(var(--container) + (var(--container-pad) * 2)); } /* !! THE CAP GOES ON THE GRANDCHILDREN, NOT THE CHILDREN. * * The only direct child of these sections is WordPress's * .wp-block-group__inner-container, and 9.1 gives that display:contents * - which means it generates no box at all, so a max-width on it is * silently ignored and the copy runs the full 1600. The real items are * one level further down. * * The absolutely-positioned art is excluded by name: it is not in the * flow and must keep the size its own rule gives it. */ /* !! EVERY p IS EXCLUDED, AND THAT IS THE POINT. * * This rule caps the things that are allowed to use the full 1400 - the * card grids, the lists, the diagram panels. Paragraphs are NOT among * them: they answer to --measure in 9.1 instead, and they can only do * that if this rule stays out of their way. * * The trap here cost a round trip. Each :not() adds a class to the * specificity, so an earlier version of this selector scored (0,4,0) * and quietly outranked the (0,2,1) --measure rule - the copy went back * to full width with nothing in the stylesheet looking wrong. Excluding * p outright is the fix; matching the specificity would have been a * race that the next :not() re-loses. * * .hp-eyebrow is excluded for a different reason: it is sized by its * own text, and width:100% turned it into a 1400px lozenge with two * words marooned in the middle. */ .hp-system > .wp-block-group__inner-container > *:not(.hp-media):not(.hp-eyebrow):not(p), .hp-not-for-everyone > .wp-block-group__inner-container > *:not(.hp-media):not(.hp-eyebrow):not(p), .hp-not-for-everyone .wp-block-list { width: 100%; max-width: calc(var(--container) + (var(--container-pad) * 2)); margin-inline: auto; } .hp-problem > *, .hp-system > *, .hp-not-for-everyone > * { max-width: 100%; } /* the four-step diagrams */ /* Capped, not full width. See --container-panel. The panel below uses * the same token so the two boxes line up as a pair - which is the * whole point of the section: the same four steps, done two ways. */ .hp-diagram { width: 100%; max-width: var(--container-panel); margin-block: var(--space-24); padding: var(--space-32); background: var(--surface-alt); border-radius: var(--radius-md); } .hp-diagram__title { margin: 0 0 var(--space-24); font-family: var(--font-heading); font-size: var(--type-h3); font-weight: var(--weight-bold); } .hp-steps { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; } .hp-step { --dot: 33px; position: relative; display: grid; justify-items: center; gap: var(--space-8); font-size: var(--type-xs); } /* The connector is drawn as a rule behind each step but the first, so * the row needs no extra elements between the circles. * * !! ITS top IS DERIVED FROM --dot. DO NOT HARD-CODE IT AGAIN. * * It used to be a literal 16px here and 34px on the green variant, each * hand-matched to a dot size declared somewhere else. That held until * the green dots dropped to 48 at <=599 and the line stayed at 34 - * 11.5px BELOW the circles' centres, measured, which is the off-centre * Gerek reported. Two numbers describing one thing will always drift * apart at the third breakpoint. Now --dot is the only place a circle's * size is written and both the dot and the rule read it. */ .hp-step + .hp-step::before { content: ""; position: absolute; top: calc((var(--dot) - 3px) / 2); right: 50%; left: -50%; height: 3px; background: var(--rule); } .hp-step__dot { position: relative; z-index: 1; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: var(--radius-pill); background: var(--fill-muted); color: var(--on-invert); font-weight: var(--weight-bold); font-size: var(--type-eyebrow); } .hp-step__x { position: absolute; top: -18px; color: var(--alert); font-size: var(--type-eyebrow); } .hp-step.is-active .hp-step__dot { background: var(--accent); } .hp-step.is-active + .hp-step.is-active::before, .hp-step.is-active::before { background: var(--accent); } .hp-steps--ours .hp-step__dot { background: var(--success); font-size: var(--type-h3); box-shadow: var(--success-glow); } /* No top here - the base rule derives it from --dot. Colour only. */ .hp-steps--ours .hp-step + .hp-step::before { background: var(--success); } .hp-steps--ours .hp-step { --dot: 70px; font-size: var(--type-ui); } /* the bordered "how we do it differently" panel */ /* !! padding-block IS DELIBERATELY ABSENT. * * It used to set --space-48 here, which quietly overrode the standing * 100px rhythm from 9.1 - this rule is later in the file and scores the * same - and left the bordered panel sitting 48px off the beige section * below it. It looked cramped because it was. The section now takes the * same rhythm as every other one. */ .hp-different { display: flex; flex-direction: column; align-items: center; max-width: calc(var(--container) + (var(--container-pad) * 2)); } .hp-different__title { margin: 0 0 var(--space-32); font-family: var(--font-heading); font-size: var(--type-h4); font-weight: var(--weight-bold); text-align: center; } .hp-panel { width: 100%; max-width: var(--container-panel); padding: var(--space-40); background: var(--surface); border: 2px solid var(--navy); border-radius: var(--radius-md); box-shadow: var(--navy-glow); text-align: center; } .hp-panel > p:last-child { margin-bottom: 0; } /* The lockup as a background rather than an : post content cannot * call the theme for a URL, and an absolute one would bake the staging * domain into the database. The stylesheet reaches it relatively. */ /* 396 x 74, which is what Figma draws (513:2537). It was 248 - small * enough that the panel read as a diagram with a logo stuck on top * rather than as the practice's own answer to the row above it. The * lockup is the point of this panel. */ .hp-panel__logo { width: min(396px, 100%); height: 74px; margin: 0 auto var(--space-32); background: url("../img/logo.png") no-repeat center / contain; } .hp-panel .hp-steps { margin-bottom: var(--space-32); } /* The monogram behind this section. It is brand furniture rather than * content - it carries no information and is marked aria-hidden - so it * is allowed to run off the right edge the way the design draws it. * Pinned to the right edge of the VIEWPORT, not the container, so it * bleeds at every width instead of only at 1400. */ .hp-system { position: relative; isolation: isolate; overflow: hidden; background: var(--surface-alt); } .hp-media--watermark { position: absolute; z-index: -1; top: 50%; right: 0; translate: 28% -50%; width: min(1080px, 78vw); margin: 0; border-radius: 0; pointer-events: none; } .hp-media--watermark > img { width: 100%; height: auto; object-fit: contain; } /* ---- 9.7 OUR SYSTEM cards ---- */ /* The tiles are a change of gear from the running copy above them, so * they get more room than a paragraph break. Uneven on purpose: more * above, where the reader is arriving at them, than below. */ .hp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-32); width: 100%; margin-block: var(--space-64) var(--space-48); padding: 0; list-style: none; text-align: left; } .hp-card { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-32); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-tile); } /* The EMPTY slot is a fixed box, because a dashed rectangle needs a * width to be one. The FILLED slot is not: the three icons are drawn * 79, 72 and 46 wide at a common height of 100, so height is the * binding dimension and the width follows the artwork - same reasoning * as the header logo. A fixed 78px box would centre the narrow icon in * whitespace and break the left edge the card's text sets. */ .hp-frame--icon { width: 78px; height: 100px; } .hp-media--icon { width: auto; height: 100px; justify-self: start; } .hp-media--icon > img { width: auto; } .hp-card__num { margin: 0; font-size: var(--type-h4); font-weight: var(--weight-semibold); color: var(--ink-muted); } .hp-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--type-h5); font-weight: var(--weight-semibold); } .hp-card__body { margin: 0; font-size: var(--type-small); color: var(--ink-muted); } /* ---- 9.8 THE THREE LINK BARS ---- */ /* !! THE CREAM DOES NOT STOP AT OUR SYSTEM. * * In the design, --surface-alt runs from the top of OUR SYSTEM all the * way down past these three bars and only gives way to white at PROOF, * NOT PROMISES. The bars are part of that region, not a separate white * strip after it - they are the section's own "and here is where to go * next", and cutting the ground out from under them broke the run into * two unrelated blocks. * * !! AND IT FADES RATHER THAN STOPPING. * * Sampled from the design render rather than guessed: the page is solid * --surface-alt from y2700 to y3650, then steps cream -> white over the * next 450px - 246, 247, 248, 249, 251, 252, 254, 255 - and is pure * white from y4100 on. The Button Cards sit at y3682-4026, which is * almost exactly that fade. The bars ARE the transition. * * So this is a gradient, not a flat fill. A hard edge here was the * thing that made the region look like it ended abruptly, and a flat * cream would only move the hard edge further down. * * PROOF, NOT PROMISES IS ON WHITE. It looks like the cream continues * because the fade ends just above it. */ .hp-bars { max-width: none; background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%); } .hp-bars__list { max-width: calc(var(--container) + (var(--container-pad) * 2)); margin-inline: auto; } .hp-system { padding-bottom: calc(var(--section-pad) / 2); } .hp-bars { padding-top: calc(var(--section-pad) / 2); } .hp-bars__list { display: grid; gap: var(--space-16); padding: 0; list-style: none; } .hp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-24) var(--space-32); background: var(--gradient-navy); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* h2, not h4. Measured off the design render: the label's cap height is * 27px, which puts the type around 37 - and at 40 the bar comes out at * the 96px height Figma draws the card, so the two agree. At h4 the * bars read as list rows; at h2 they read as the three doors they are. */ .hp-bar__label { font-family: var(--font-heading); font-size: var(--type-h2); font-weight: var(--weight-semibold); color: var(--on-invert); } /* A paragraph that is nothing but one CTA link becomes the design's * amber button. The copy is untouched - only the anchor is painted. */ .hp-btn-line { margin-block: var(--space-24); } .hp-btn-line a { position: relative; isolation: isolate; display: inline-block; padding: var(--space-12) var(--space-24); background: var(--accent-fill) padding-box, var(--accent-rim) border-box; /* 2px, not 1: at a hairline the multi-stop ring averages out to a * pale outline and the metal is lost. */ border: 2px solid transparent; color: var(--accent-contrast); font-size: var(--type-small); font-weight: var(--weight-semibold); text-decoration: none; border-radius: var(--radius-pill); box-shadow: var(--accent-lift); transition: box-shadow .18s ease, transform .18s ease; } .hp-btn-line a::before { content: ""; position: absolute; inset: 2px 2px 50%; z-index: -1; border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: var(--accent-gloss); pointer-events: none; } .hp-btn-line a:hover { color: var(--accent-contrast); box-shadow: 0 6px 12px rgba(255, 139, 0, 0.42), 0 0 26px rgba(251, 176, 60, 0.55); transform: translateY(-1px); } /* ---- 9.9 PROOF, NOT PROMISES ---- */ /* A ROUNDED PANEL, NOT A FULL-WIDTH SLAB. The design insets this one * and rounds it, which is what separates it from the stats band and the * final CTA above and below - all three are navy, and without the * inset they read as one enormous blue region. The gradient runs * diagonally for the same reason: it keeps the three apart. */ .hp-proof { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: var(--space-48); align-items: center; max-width: calc(var(--container) + (var(--container-pad) * 2)); background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: var(--on-invert); border-radius: var(--radius-md); /* The panel's own inset. This overrides BOTH the shared * padding-inline and the shared 100px rhythm from 9.1 - the air * around this section is margin, not padding, because padding would * sit inside the navy and push the panel's contents away from its * own edges. */ padding: var(--space-48); /* !! WIDTH, NOT JUST max-width. * * With only a max-width the panel filled the viewport edge to edge * at anything between 992 and 1448 - it kept its rounded corners and * lost the inset that makes it a panel at all, so on a 1024 tablet * it read as a full-bleed navy slab. The <=991 rule added a margin * back, which is why the fault sat in the gap between the two. * * A percentage width always leaves the gutter, at every size. */ width: calc(100% - (var(--container-pad) * 2)); margin: var(--section-pad) auto; } /* THE PORTRAIT IS BIGGER THAN THE PANEL, ON PURPOSE. * * Figma puts the cutout at x-62, y-48 against a 1140x739 panel and * makes it 784 tall - taller than the panel it sits in. His head breaks * the top edge and his shoulder runs past the left, and the cutout * stands ON the panel's bottom rather than inside its padding. That * overhang is the whole reason the section has any depth; boxed inside * the padding, as it was, he reads as a photograph in a slot. * * Absolutely positioned so the grid column still reserves its 440 and * the copy beside it is unaffected by the overflow. .hp-proof sets no * overflow, so the bleed is allowed. * * The three 48s in the height: one cancels the panel's bottom padding, * one cancels the top, and the third is the overhang above the panel's * own edge - which lands at the design's 48. */ .hp-proof__media { position: relative; align-self: stretch; } .hp-media--portrait { position: absolute; /* !! THE CUTOUT CARRIES 27px OF TRANSPARENT MARGIN ON ITS LEFT. * * Measured on the file: the PNG is 544 wide and the opaque pixels * start at x27. Rendered at about 490 that is ~24px of nothing down * the left side, which is why a 24px overhang looked like no * overhang at all - the box hung over the edge and the man did not. * * -96 is 48 to cancel the panel's padding and 48 of overhang, of * which the first ~24 is the file's own margin. So he actually * clears the panel edge by about 24, and at a 1500 viewport - 26px * of page gutter - his arm still lands on the page rather than * against the window. Both halves of that sum matter; changing the * image means re-measuring the margin. */ left: calc(var(--space-48) * -2); bottom: calc(var(--space-48) * -1); height: calc(100% + (var(--space-48) * 3)); width: auto; min-height: 0; flex: none; } .hp-media--portrait > img { width: auto; height: 100%; object-fit: contain; object-position: bottom left; } /* The empty state keeps the old in-flow behaviour - a dashed box cannot * meaningfully overhang anything. */ .hp-proof__media:has(.hp-frame--portrait) { display: flex; } .hp-frame--portrait { flex: 1; min-height: 460px; } .hp-proof__col > *:last-child { margin-bottom: 0; } .hp-proof h2, .hp-proof p { color: var(--on-invert); } /* THE WHITE-LINK RULE THAT USED TO LIVE HERE IS DELETED, NOT GUARDED. * * It read .hp-proof a:not(.cta-button) { color: var(--on-invert) } and * existed from when this panel had links in its running copy. It has * none now - the panel contains exactly ONE anchor, the amber button - * so the rule's entire remaining effect was to paint that button white * on amber at 1.85:1. * * Guarding it with another :not() would have been the fourth patch of * that shape in this file. Deleting it removes the competition instead * of out-ranking it, which is why the button is now simply ink. If * running-copy links ever return to this panel they need a rule that * names them, not one that catches every anchor. */ .hp-videos { display: flex; flex-wrap: wrap; gap: var(--space-20); margin-top: var(--space-24); } .hp-frame--video, .hp-media--video { width: 239px; aspect-ratio: 239 / 134; } /* ---- 9.10 THIS PRACTICE ISN'T FOR EVERYONE ---- */ /* THE GRAPHIC RUNS EDGE TO EDGE, BELOW THE COPY - NOT BEHIND IT. * * The design floats the copy ON the artwork, and that works there * because the design's version of this section is three short lines. * The built page carries three bullet panels as well, and laid over the * phone and the review cards they are unreadable - text on top of text. * * So the artwork takes the full width, which was the actual problem * with it, and sits under the copy rather than behind it. If the copy * is ever cut back to the three lines the design assumes, this becomes * a background again by moving it back into position:absolute - the * markup does not have to change for that. * * The image stays in the page content rather than becoming a CSS * background-image: an upload path hardcoded in the stylesheet would * break the moment the media is replaced, and it would be invisible to * anyone editing the page. */ /* WHITE, matching the section above it. The cream ends with the fade * across the link bars - see 9.8 - and everything from PROOF onwards is * white until the final CTA turns navy. */ .hp-not-for-everyone { background: var(--surface); } /* CAPPED AT THE DESIGN'S OWN FRAME, NOT THE VIEWPORT. * * The artwork is 1439x994 and the design draws it at exactly that, in a * 1440 frame. Left to fill the viewport it scaled past its own size on * any screen wider than 1440 - at 1900 it was a third bigger than * anything in Figma, which is why the phone and the review cards looked * oversized and loose rather than composed. * * --frame is 1440 and exists for precisely this: the design's width, * reference only, used where something must not grow past what was * drawn. Centred, and no crop - the composition is the point, so * contain rather than cover. */ /* THE ASSET IS TRIMMED, SO THE CSS NO LONGER CROPS ANYTHING. * * This used to display a sub-rectangle of a 1439x994 export whose real * composition was only ~950x726 - the rest was margin baked into the * file. Doing that in CSS took four interdependent percentages, and the * first attempt got them slightly wrong and clipped the outer review * cards on both sides. * * home-Review-Cluster.webp (ID 190) is that same artwork cleaned and * trimmed, 973x625, so the box is simply the image. Three things were * fixed making it: * * - the export's ground was #fefefe, not white, which showed as a * faint rectangle against the page * - the cards' drop shadows trailed as wide diffuse haze far below * them, reading as smudges on white. Everything within 9 of white * is lifted to pure white; the real contact shadows are darker than * that and are untouched * - one stray patch of ink sat 130px below the composition entirely, * with nothing above it. Cleared, then re-trimmed - which is what * took the height from 738 to 625 * * STILL NOT TRANSPARENT. The review cards are themselves near-white on * a near-white ground, so alpha cannot be keyed out after the fact * without eating them - that needs a re-export with alpha from the * source file. Flagged to Gerek for the designer. Until then this reads * correctly on white and would NOT survive being moved onto a tinted * section. */ /* 1200 against a 973px-native file - a 23% upscale. Visible only if you * go looking, on a composite this soft, and it is the practical * ceiling: past here the card text starts to go mushy. If it needs to * be larger again the answer is a higher-resolution export, not a * bigger max-width. * * The 100 above it is the gap Gerek asked for, and it is --section-pad * rather than a one-off: the artwork is the section's closing image and * deserves the same distance the page gives a section boundary. */ .hp-media--cluster { width: 100%; max-width: 1200px; margin: var(--section-pad) auto 0; border-radius: 0; aspect-ratio: 973 / 625; } .hp-media--cluster > img { width: 100%; height: 100%; object-fit: contain; } .hp-not-for-everyone .wp-block-list { display: grid; gap: var(--space-16); max-width: 760px; margin: var(--space-24) auto; padding: 0; list-style: none; text-align: left; } /* These were white cards on a cream ground, which is where their shape * came from. On white the fill does nothing and the 8% shadow is not * enough on its own - they flattened into three floating sentences. A * hairline gives them their edge back and the tile shadow lifts them; * the fill stays white so they still read as cards rather than as a * tinted list. */ /* CREAM, NOT WHITE-ON-WHITE. * * Three white cards on a white section had nothing to sit against - a * hairline gave them an edge but they still read as three floating * sentences. Inverting them onto --surface-alt is the answer the page * already contains: it is the ground OUR SYSTEM uses, so the section * reads as a deliberate echo rather than as a new colour, and it costs * the palette nothing. * * It also suits what these three actually are. They are the * disqualifiers - the "this is not for you if" list - so they should * read as set apart from the white they sit on rather than as more * cards like the ones above. * * No border and no shadow with it: on a tinted fill both would be * belt-and-braces, and the flat shape is calmer next to the artwork * below. */ .hp-not-for-everyone .wp-block-list li { padding: var(--space-24) var(--space-32); background: var(--surface-alt); border: 0; border-radius: var(--radius); box-shadow: none; font-size: var(--type-body); } .hp-frame--cluster, .hp-media--cluster { width: 100%; margin-top: var(--space-24); } .hp-frame--cluster { min-height: 320px; } /* A composed graphic, not a photograph to crop: it holds its own * proportions at every width so no review card is ever cut in half. */ .hp-media--cluster { aspect-ratio: 1439 / 994; } /* ---- 9.11 FINAL CTA - REMOVED, NOT MISSING ---- * * The homepage's closing CTA used to be a content section called * .hp-final. It is global furniture now: the block lives in footer.php * and is styled by .site-footer__cta in section 06, so every page gets * it rather than only the homepage. * * Every rule that styled it is deleted, including its entries in the * shared selector lists in 9.1 and its line in the <=767 block. Checked * before deleting: zero occurrences of "hp-final" in the rendered HTML * of any page on the site. * * The numbering keeps its gap on purpose - 9.10 to 9.12 with this note * between them is clearer than renumbering six comments that point at * each other. */ /* .hp-final's white-link rule is deleted for the same reason plus a * simpler one: .hp-final no longer exists. The closing CTA moved into * footer.php and the homepage no longer emits that block at all. The * rest of the 9.11 rules below are dead in the same way - left in place * for now rather than swept in a contrast fix, but they are dead. */ /* ================================================================== * 09b HOMEPAGE RESPONSIVE * * !! NO DESIGN EXISTS BELOW 1440px AND NONE IS COMING. Everything here * is a judgement call, written down so it can be argued with. * * WHAT WAS DECIDED * * 992-1199 The two side-by-side sections - the hero and Proof - keep * their split but the copy column stops being a fixed 584px * and starts sharing the row. The four-across stats bar and * the three system cards still fit. * * 768-991 The hero and Proof STACK: copy first, photograph after. * A photograph beside a paragraph stops being a layout and * starts being two cramped columns somewhere around here. * The stats bar goes 4 -> 2 across rather than shrinking the * figures. The system cards go 3 -> 2. * * <768 One column everywhere. The step diagrams turn VERTICAL - * four labelled circles side by side at phone width would put * "PostureRay Analysis" on three lines inside 80px. Turning * the row into a stack keeps every label on one line and the * connector becomes a vertical rule, which still reads as a * sequence. * * <600 The stats bar goes to a single column and the link bars * stack their label above the button. * ================================================================== */ @media (max-width: 1199px) { .hp-hero { grid-template-columns: 1fr 1fr; } .hp-proof { grid-template-columns: minmax(0, 360px) 1fr; } } @media (max-width: 991px) { /* Two columns: brand across the top, then hours and the map beneath * it. Back to document order, so the reordering above cannot leave * the lockup stranded in the middle of a stack. */ /* The monogram is decoration at desktop, where it bleeds off the * right of a 1400 column. At tablet it scales down onto the content * and runs a pale band straight through the OUR SYSTEM pill and its * heading. Hidden rather than faded: it carries no information, it * is aria-hidden already, and there is no width here where it reads * as background rather than as a smudge. */ .hp-media--watermark { display: none; } .site-footer__grid { grid-template-columns: 1fr 1fr; align-items: start; } .site-footer__brand { order: 0; grid-column: 1 / -1; } .site-footer__hours { order: 1; } .site-footer__visit { order: 2; } .site-footer__base { justify-content: flex-start; } .site-footer__legal { text-align: left; } .footer-licence { justify-content: flex-start; } .hp-hero, .hp-proof { grid-template-columns: 1fr; } /* margin-inline is not needed here any more: .hp-proof carries a * percentage width, so the gutter exists at every size. */ /* !! THE CUTOUT COMES BACK INTO THE FLOW. * * Its desktop position is absolute - bottom-left of the panel, * overhanging two edges - and that only means anything in the * two-column layout. At one column its containing row collapses to * nothing at the top of the panel, so Dr. Michael was not small or * clipped, he was ENTIRELY ABSENT from every tablet and phone * render. Caught by scrolling a real 390px viewport, not by reading * the CSS. * * In flow, centred, above the copy - which is how the hero handles * the same problem one section up. */ .hp-proof__media { position: static; display: flex; justify-content: center; } .hp-media--portrait { position: static; width: min(260px, 70%); height: auto; margin: 0; flex: none; } .hp-media--portrait > img { width: 100%; height: auto; } /* The pill, the copy and the videos all centre with everything else * on this breakpoint. .hp-proof__col is not a flex column, so the * align-self that centres pills elsewhere had nothing to act on * here - margin-inline is what actually moves it. */ .hp-proof__col { text-align: center; } .hp-proof__col .hp-eyebrow--pill { margin-inline: auto; } .hp-proof .hp-btn-line { text-align: center; } .hp-videos { justify-content: center; } /* !! THE WASH GOES FULL-COVERAGE ONCE THE HERO IS ONE COLUMN. * * The desktop wash fades out by two-thirds across, because the copy * only occupies the left half. At one column the copy spans the * whole panel, so its right-hand end - the second CTA - was sitting * on the bright part of the photograph and could not be read. * * A flat veil instead of a horizontal fade. The photograph still * reads through it; nothing on top of it does not. */ .hp-hero__bg::after { background: linear-gradient( 180deg, rgba(16, 44, 70, 0.82) 0%, rgba(16, 44, 70, 0.90) 100% ); } .hp-hero__bg { order: 0; } .hp-frame--hero-bg, .hp-media--hero-bg { min-height: 260px; } .hp-frame--portrait, .hp-media--portrait { min-height: 320px; } .hp-stats__row { grid-template-columns: repeat(2, 1fr); gap: var(--space-24); } .hp-cards { grid-template-columns: repeat(2, 1fr); } /* !! THE LABEL DROPS TWO STEPS HERE, NOT ONE. * * At h2 the longest of the three - "What Your First Visit Looks * Like" - measured 495px against 632 of usable bar, which left no * room for a 142px button and wrapped it onto its own line. The * other two fitted, so only one bar of three looked broken. * * Gerek's read was 4px. Measured, 4 is not enough: at 768 the label * still comes to 512 and the button still wraps. h3 is what actually * clears it with room to spare. */ .hp-bar__label { font-size: var(--type-h3); } /* Four across survives to here on a 1400 container - each card is * still ~330 wide. Below it they would drop under the caption's * comfortable width, so they go two-up. */ .hp-photostrip__row { grid-template-columns: repeat(2, 1fr); } .hp-panel { padding: var(--space-24); } } @media (max-width: 767px) { /* !! THE HOURS LIST WAS DRAGGING THE WHOLE PANEL OFF THE SCREEN. * * dl is auto/1fr with white-space:nowrap on both the day and the * time range - which is right on desktop and fatal here. Its * min-content came to 336px ("Monday - Thursday" + "By appointment * only", neither allowed to wrap) against a panel content box of * 294. A grid item cannot go below its min-content, so the single * column stretched to 336 and took the map, the address and the * hours 42px past the panel's right edge with it. * * That one measurement is items 6, 7 and 8 in Gerek's list: nothing * was individually mis-centred, the whole grid was too wide. * * Stacked and centred here. min-width:0 on the children stops any * future item doing the same thing silently. */ .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-32); justify-items: center; } .site-footer__grid > * { min-width: 0; max-width: 100%; } .site-footer__brand { grid-column: auto; } .site-footer__panel { padding: var(--space-32) var(--space-24); } /* !! THE DAY/VALUE PAIRS DO NOT STACK HERE - SEE <=599. * * They used to. Stacking is the phone fix for the min-content * problem described above, and it was written at this breakpoint * because this is where the footer goes single-column. But the * overflow it solves is a 294px panel problem: at 600 the panel * gives the list 504 and the two-column form needs 324, so from 600 * up there is nothing to fix and stacking only costs height. * * On a 744 iPad that put eight lines on screen where four would do, * with a day alone on one line and its hours alone on the next - * which is what Gerek was looking at. */ .site-footer__hours { justify-items: center; text-align: center; } .site-footer__visit { justify-items: center; text-align: center; width: min(300px, 100%); justify-self: center; } /* MORE ROOM, AND A COLOUR OF THEIR OWN. * * Four legal links in the same white as the four lines of legal text * directly beneath them read as one eight-line block of white on * blue. Amber separates them - it is the accent this footer already * uses on the button and in the lockup, so it costs the palette * nothing, and it matches what these links already do on hover at * desktop. The legal text stays muted white, which widens the gap * between the two further. */ .site-footer__base { justify-content: center; text-align: center; gap: var(--space-32); padding-top: var(--space-32); } /* !! SCOPED WITH .site-footer, OR IT LOSES. * * ".site-footer a:not(.cta-button)" is two classes plus an element * and beats a bare ".footer-nav a" - the fourth time that exact * shape has caught me in this file, and the reason the first version * of this rule rendered white with nothing looking wrong. */ .site-footer .footer-nav a { color: var(--accent); } .footer-nav ul { gap: var(--space-12) var(--space-24); } /* Stacked and centred, the rule that separates the name from the * licence number reads as a stray tick above the line rather than a * divider between two things. */ .footer-licence span { border-left: 0; padding-left: 0; } .site-footer__legal { text-align: center; } .footer-licence { justify-content: center; } .footer-nav ul { justify-content: center; } /* !! HE BREAKS THE TOP EDGE HERE TOO. * * In flow he was a polite 260px portrait sitting inside the padding * - correct, and completely without the presence the desktop version * has. Bigger, and pulled up by more than the panel's own top * padding so his head clears the edge, which is the whole point of * the cutout. overflow stays visible on .hp-proof, so nothing clips * him. * * The negative margin is on the MEDIA WRAPPER, not the image, so the * copy below simply starts where the wrapper ends and nothing * overlaps. */ .hp-proof { padding: var(--space-24); overflow: visible; } .hp-proof__media { margin-top: calc((var(--space-24) + var(--space-40)) * -1); } .hp-media--portrait { width: min(300px, 88%); } /* Slightly larger, and centred as a pair. At 239 wide in a 342 * column they read as thumbnails of thumbnails. */ .hp-frame--video, .hp-media--video { width: min(280px, 100%); } /* THE HERO STOPS BEING AN OVERLAY AT PHONE WIDTH. * * The desktop composition only works because the photograph has a * wall on the left to set type on. At 390 the panel is narrower than * that wall, so the copy would land on the subject - and a * horizontal wash cannot rescue it, because there is no horizontal * room left to fade across. Photograph on top, copy underneath, on a * solid ground. Same markup, no overlay to get wrong. */ /* !! NAVY, NOT --surface-alt. * * The copy inverts to white for the desktop overlay, and when this * breakpoint pulled it off the photograph onto a pale ground the * white type went with it - a whole headline rendered invisible. * Caught on a real 390px render, not in review. * * Giving the stacked panel the navy ground is the fix and the better * design: photograph on top, navy copy block under it, and the hero * reads the same way it does on desktop instead of becoming a * different component at 767px. */ .hp-hero { display: flex; flex-direction: column; min-height: 0; padding-block: 0; background: var(--gradient-navy); } /* !! THE COPY COMES FIRST, THE PHOTOGRAPH SECOND. * * The figure is first in the markup because at desktop it is the * panel's background and has to paint underneath. Stacked, that * order put a photograph between the header and the H1 - so the * first thing on the page was an image with no context, and the * headline was below the fold on a phone. `order` flips them for the * stacked layout only; the markup is unchanged, so the desktop * painting order is untouched. */ /* THE GAP IS TWO NUMBERS, WHICH IS WHY HALVING ONE DID NOT HALVE IT. * * .site-main carries padding-top: 48 for every page, and the hero * adds its own margin on top of that. Measured at 390: header bottom * 149, hero top 217 - a 68px gap, of which the hero only owned 20. * Trimming the hero alone could never get there. * * 28 + 20 = 48 total, which is the 20px reduction asked for. The * hero keeps its margin so the two numbers stay meaningful * separately: main's padding is what every page gets, the hero's * margin is this section's own. */ .site-main { padding-top: var(--space-32); } .hp-hero { margin-top: var(--space-16); } /* THE SUBJECT, NOT THE MIDDLE OF THE FILE. * * The photograph is 1265x652 with Dr. Michael and the patient in its * right-hand third. Cropped to 3:2 from the centre, the phone showed * a wall and half a plant. 76% puts the pair in the middle of what * is actually visible - the same reasoning as the desktop hero's * right-alignment, at a different crop. */ .hp-media--hero-bg > img { object-position: 76% center; } .hp-hero__col { order: 1; } /* INSET, NOT FLUSH. Stacked, the photograph filled the panel edge to * edge, so the navy stopped short of it and the two read as separate * blocks stuck together. A margin on all four sides lets the panel's * colour run round the picture, which is what makes it a card with a * photo in it rather than a colour block above a photo. */ .hp-hero__bg { order: 2; position: relative; inset: auto; width: auto; margin: 0 var(--space-12) var(--space-12); border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; } .hp-hero__bg::after { display: none; } .hp-hero__col { width: 100%; padding: var(--space-32) var(--space-24); } /* CENTRED, AND THE LABELS CENTRED INSIDE THEM. * * Both pills were left-aligned in a left-aligned row, and the long * one wrapped to two lines with its text jammed against the left * edge. On a phone a full-width pill with a centred label is the * expected shape and the easiest thing to aim at. */ .hp-hero .hp-cta-row { justify-content: center; } .hp-hero .hp-cta-row a:first-of-type, .hp-hero .hp-cta-row a:last-of-type { flex: 1 1 100%; text-align: center; } .hp-cards { grid-template-columns: 1fr; } /* The step diagrams become vertical. See the note above. */ .hp-steps { grid-template-columns: 1fr; gap: var(--space-20); justify-items: start; } .hp-step { grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: var(--space-16); } /* !! ONE CONTINUOUS LINE, NOT A SEGMENT PER STEP. * * The horizontal version draws a connector on each step but the * first, sized to the gap between them. Rotated vertical that * became a FIXED 20px stub - but a step box is taller than its dot * (the label can wrap, and the dot is centred in whatever height * results), so the real distance between two dot centres is much * more than the gap. The stubs hung below each circle reaching * nothing, and step 4 had one trailing off the bottom into empty * space. * * A single line behind the whole column solves it without needing to * know any step's height: it starts at the first dot's centre and * ends at the last one's, because top and bottom are each inset by * half a dot. The dots sit on top of it - they carry z-index 1 * already. * * The per-step segments are switched off rather than retuned; there * is no fixed height that is correct for a box that grows with its * label. */ .hp-step + .hp-step::before { content: none; } .hp-steps { position: relative; } .hp-steps::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 15px; width: 3px; background: var(--rule); } .hp-steps--ours::before { top: 24px; bottom: 24px; left: 23px; background: var(--success); } /* !! THE SECOND COLUMN HAS TO STOP BEING 1fr, OR CENTRING DOES * NOTHING. * * .hp-stat is auto/1fr, and 1fr eats every spare pixel - so the * track group already filled the row and justify-content:center had * no free space to distribute. The first attempt at this looked like * it had been ignored because, in effect, it had. * * auto/auto sizes both columns to their content, which leaves slack * for the centring to act on. The icon keeps its place beside the * text; the pair sits in the middle of the band. */ /* CENTRED AS A BLOCK, NOT FOUR TIMES INDEPENDENTLY. * * auto/auto centred each stat on its own, so four pairs of different * widths each found their own middle and the icons ended up at four * different x positions - centred, and ragged. * * A shared width centred in the row fixes both: every stat is the * same box, so the icons line up in a column and the text starts on * one edge, and the block as a whole sits in the middle of the band. * 280 is the longest label - "Google rating - 437 reviews" - plus * the icon and its gutter. */ .hp-stat { grid-template-columns: 44px 1fr; width: min(280px, 100%); justify-self: center; } /* !! THE CROSS STAYS ABSOLUTE. position:static made it a THIRD item * in a two-column grid, so it took column one, pushed the numbered * dot into column two and knocked the label onto a second row - the * two crossed-out steps rendered completely differently from the two * that are not crossed out. Caught on a real 390px render. * * Re-anchored rather than un-positioned: at desktop it sits above * the dot, here it rides the dot's top-right shoulder like a badge, * which is the same meaning in a vertical list. */ .hp-step__x { position: absolute; top: -4px; left: 22px; } .hp-steps--ours .hp-step__x { left: 56px; } /* The section copy reads better ranged left on a narrow screen, but * the diagram's own title is a heading over a centred object, not a * line of running copy - it stays centred with it. */ .hp-diagram, .hp-problem, .hp-system, .hp-not-for-everyone { text-align: left; } .hp-diagram__title, .hp-different__title { text-align: center; } /* The pills stay centred. They were pushed left with the rest of the * section's text, but a pill is an object rather than a line of * copy - left-aligned under centred headings it read as a stray * button. */ .hp-eyebrow--pill { align-self: center; } .hp-intro { text-align: left; } } @media (max-width: 599px) { .hp-stats__row { grid-template-columns: 1fr; } .hp-photostrip__row { grid-template-columns: 1fr; } /* Stacked, the label and its button were both ranged left in a * full-width navy bar, which left a long ragged edge down the middle * of three of them. Centred, each bar reads as one object. */ .hp-bar { flex-direction: column; align-items: center; text-align: center; } /* THE PHONE FIX, AT PHONE WIDTHS. dl is auto/1fr with nowrap on * both the day and the time range - right everywhere it fits, and * fatal at 390, where its min-content came to 336 against a 294 * panel and dragged the map and the address off the right edge with * it. A grid item cannot go below min-content, so the only cure is * to let the pairs break. */ .site-footer__hours dl { grid-template-columns: 1fr; gap: var(--space-4, 4px) 0; justify-items: center; } .site-footer__hours dt { white-space: normal; } .site-footer__hours dd { margin-bottom: var(--space-12); } .site-footer__hours .hours-range { white-space: normal; } /* --dot, not width/height: the connector's top is calculated from * it. Setting the size directly here is what broke the line. */ .hp-steps--ours .hp-step { --dot: 48px; } .hp-steps--ours .hp-step__dot { font-size: var(--type-h4); } } /* ================================================================== * 10 CHIROPRACTIC ADJUSTMENTS * * VISUAL SOURCE: Figma 551:15 "(unverified) Chiropractic Adjustments", * eleven section frames, 552:18 down to 551:56. Every colour, size and * space below comes from a token in section 01 - there is not a raw * value in here. * * !! SECTION 09'S COMPONENT CLASSES ARE SHARED, ITS SECTION CLASSES * ARE NOT. * * 09 was written when the homepage was the only built page and its * header says the .hp-* classes "only the homepage emits". Half of that * is still true and half of it is not, and the distinction matters: * * SHARED, and used by this page as-is - * .hp-media / .hp-frame the two-state image slot * .hp-eyebrow--pill and its --ink / --invert variants * .hp-cards / .hp-card the numbered process tile * .hp-stats__row / .hp-stat the icon-figure-label stat * .hp-btn-line a paragraph that is one link becomes the * amber pill * * HOMEPAGE ONLY - .hp-hero, .hp-intro, .hp-problem, .hp-different, * .hp-system, .hp-bars, .hp-proof, .hp-photostrip and * .hp-not-for-everyone. These are SECTIONS. They carry the * homepage's own rhythm and grounds and must not be reused. * * Where this page needs a shared component to look different, the * change is made BY THE SECTION - `.ca-workup .hp-card { ... }` - and * never by adding a modifier class to the shared component. The * component keeps one definition; the page states its own variation. * * !! THE TEMPLATE MATTERS. This page renders through page-sections.php, * not page.php, because page.php wraps the content in .container and a * container is what stops a full-width section being full width. The * page carries _wp_page_template = page-sections.php. * * NO DESIGN EXISTS BELOW 1440px. Section 10b at the end of this block * is the theme's own work. * ================================================================== */ /* ---- 10.1 shared page furniture ---- * * !! display:contents ON THE INNER CONTAINER IS LOAD-BEARING, for the * same reason it is in 9.1: a wp:group renders its children inside a * .wp-block-group__inner-container, so a section would otherwise have * exactly ONE child and every grid below would be laying out a single * item. Named explicitly rather than with an attribute selector - * [class*="ca-"] is one careless class name away from matching * something it should not. */ .itv-section > .wp-block-group__inner-container { display: contents; } /* !! THE TWO BANDS ARE THE EXCEPTION: THEIR WRAPPER IS KEPT AND MADE * THE CONTAINER. * * They were dissolved with display:contents like the rest, and that was * a real bug rather than a style choice. A band sets no max-width - it * has to reach both edges to paint its ground - so with the wrapper * gone, a child capped at the reading measure had nothing to align to * but the VIEWPORT. `margin-inline: 0` then pinned it to the window's * left edge instead of the content column's. * * It is invisible at 1400 and below, because there the container is * already flush with the window and both answers are x=24. At 1920 the * container starts at 260 and the band's headings and rows were still * at 0 and 24 - a quarter of the screen out of line with every other * section. Found by Gerek on a wide monitor, after a sweep that ran * 390 -> 1400 and stopped at exactly the width that hides it. * * ALWAYS TEST ABOVE --container, NOT JUST UP TO IT. * * Keeping the wrapper as a normal block gives the children a centred * 1400 box to lay out in, so `margin-inline: 0` means the container's * left edge - which is what it was always meant to mean. Nothing in * either band needs the section itself as a grid parent, so nothing is * lost. The watermark still positions against .ca-techniques, which is * the positioned ancestor either way. */ .itv-band > .wp-block-group__inner-container { display: block; width: 100%; max-width: calc(var(--container) + (var(--container-pad) * 2)); margin-inline: auto; padding-inline: var(--container-pad); } /* EVERY SECTION CENTRES ITSELF. page-sections.php hands the content * straight to
    with no wrapper, so a section that sets a * max-width must also centre it - out here that is not free. */ .itv-section { max-width: calc(var(--container) + (var(--container-pad) * 2)); margin-inline: auto; padding-inline: var(--container-pad); } /* A BAND IS THE ONE SECTION THAT MUST NOT BE CAPPED - it has to reach * both edges to paint its ground, so it hands the cap to the wrapper it * keeps (above) instead. */ .itv-section.itv-band { max-width: none; padding-inline: 0; background: var(--surface-alt); } /* THE RHYTHM IS 100px BETWEEN SECTIONS, NOT 100 ON EACH SIDE OF EVERY * ONE. Two sections on the same ground stack their pads into 200px of * nothing and the page comes apart; at a ground change the eye reads * the edge rather than the distance, so the full pad is right there. * The homepage arrived at the same rule one boundary at a time (9.1); * this page has ten sections in four runs, so it is written as a * default plus the four edges rather than as nine exceptions. * * .itv-panel is absent from the default because it is a PANEL: like * .itv-credentials, its air is margin rather than padding, since padding * would sit inside the navy and push its copy off its own edges. Both * pay half the rhythm and their neighbours pay the other half. * * hero intro [panel] split workup WHITE * --------------------------------------- ground change * techniques CREAM * --------------------------------------- ground change * situation credentials progress WHITE * --------------------------------------- ground change * not-for-everyone CREAM * --------------------------------------- ground change * the closing CTA and footer NAVY (footer.php) */ .itv-section { padding-block: calc(var(--section-pad) / 2); } /* A BAND IS ALWAYS A GROUND CHANGE, so it always takes the full pad on * both sides - true on every page, so it lives on the class rather than * being re-stated per page. */ .itv-section.itv-band { padding-block: var(--section-pad); } /* The remaining full pads are the page's own: the section BEFORE a band * and the section AFTER one each pay their half of that edge. */ .ca-workup { padding-bottom: var(--section-pad); } .ca-situation { padding-top: var(--section-pad); } .itv-prose { padding-bottom: var(--section-pad); } /* The hero opens the page, so it answers to the header rather than to * the rhythm. .site-main already pays 48; 24 more is the design's 72 * from the header's bottom edge to the breadcrumb. */ .itv-hero { padding-top: var(--space-24); } /* !! .itv-panel AND .itv-credentials DO NOT CARRY .itv-section. * * They are PANELS: their air is margin rather than padding, because * padding would sit inside the navy and push their own copy off their * own edges. Both set their own width, margin and padding below. The * inner container still needs dissolving, though, so they are named * here rather than inheriting it. */ .itv-panel > .wp-block-group__inner-container, .itv-credentials > .wp-block-group__inner-container { display: contents; } /* RUNNING COPY IS CAPPED AT THE READING MEASURE, THE SECTION IS NOT. * Same rule as 9.1 and the same reason: --measure is 90 characters, and * at the full 1400 a paragraph runs about 150. * * !! RANGED LEFT, NOT CENTRED - and that is a difference from the * homepage, not an oversight. The homepage centres its copy because its * sections are short centred statements around diagrams. This is a * long-form service page: ten sections of running argument, and a * centred 960px column inside a 1400px page gives every paragraph a * different left edge to find. Left-ranged, the H1, every H2, every * paragraph, the cards and the rows all start on one line down the * page. It centres at <=767, per the standing mobile rule. * * !! p.wp-block-paragraph IS NOT ENOUGH ON ITS OWN, AND 9.1 SAYS IT IS. * * 9.1's note claims that scoping to p.wp-block-paragraph leaves the * button lines alone "because they carry their own classes". They do, * and it does not help: WordPress APPENDS wp-block-paragraph to * whatever class the block already has, so a stored *

    renders as class="hp-btn-line * wp-block-paragraph" and matches this selector too. Checked against * the rendered homepage, not assumed. * * On the homepage that only ever centred a block around an inline-block * pill, which is invisible. Here it would have handed the amber buttons * a 32px bottom margin this page then tries to remove at a LOWER * specificity - so :not(.hp-btn-line) is the exclusion the comment in * 9.1 believes it already has. */ .itv-prose p.wp-block-paragraph:not(.hp-btn-line), .itv-notfor p.wp-block-paragraph:not(.hp-btn-line) { max-width: var(--measure); } /* A section heading introduces several blocks, not the next sentence. * 16px made the first paragraph read as a subtitle hung off it. */ .ca-workup h2, .ca-techniques h2, .ca-situation h2, .itv-prose h2, .itv-notfor h2 { margin: 0 0 var(--space-32); max-width: var(--measure); } /* GRID ITEMS MUST BE ALLOWED TO SHRINK. min-width:auto is the default, * which turns any fixed width inside a column into a floor the column * cannot go below - a horizontal scrollbar at phone size. The two * grids on this page both hold photographs at their design widths. * Targets the grandchildren, because the inner container above is * display:contents and the real items are one level further in. */ .itv-split > .wp-block-group__inner-container > *, .itv-credentials > .wp-block-group__inner-container > * { min-width: 0; } /* ---- 10.1a the two full-bleed bands ---- * * These two sections are the page's only colour changes and they run * edge to edge, so they set NO max-width. The container is their kept * wrapper, above - which means their children cap themselves against a * true 960 exactly like every other section's do, with no gutter * arithmetic and no `margin-inline: 0` pinning anything to the window. */ .itv-band > .wp-block-group__inner-container > p.wp-block-paragraph:not(.hp-btn-line), .itv-band > .wp-block-group__inner-container > h2, .itv-band > .wp-block-group__inner-container > h3 { max-width: var(--measure); } /* ---- 10.1b A SECTION WITH THE MONOGRAM BLEEDING OFF IT ---- * * PROMOTED OUT OF .ca-techniques 2026-08-26, when a second page needed * the same thing on a WHITE ground. Everything here was page-scoped and * none of it was ever about that page. * * !! THE CLASS DOES ONE THING THAT IS EASY TO MISS: IT MAKES THE * SECTION FULL-BLEED AND HANDS THE CONTAINER TO THE WRAPPER, EXACTLY * LIKE .itv-band. * * That is not decoration, it is the whole mechanism. The monogram is * absolutely positioned with `right: 0`, which resolves against the * nearest positioned ancestor - this section. A normal .itv-section is * capped at 1448 and centred, so `right: 0` would be the CONTAINER's * right edge and overflow:hidden would clip the mark 236px short of * the window at 1920. The mark has to reach the viewport, so the * section has to. .ca-techniques got this for free by being a band; * a white section does not. * * isolation + z-index:-1 (from 9.6) keep it behind the copy without * escaping into a neighbouring section's stacking context. */ .itv-watermark { position: relative; isolation: isolate; overflow: hidden; max-width: none; padding-inline: 0; } .itv-watermark > .wp-block-group__inner-container { display: block; width: 100%; max-width: calc(var(--container) + (var(--container-pad) * 2)); margin-inline: auto; padding-inline: var(--container-pad); } /* !! THE WATERMARK IS WRITTEN AT THE FULL PATH, NOT AS .itv-watermark * .hp-media--watermark, AND THAT IS THE POINT. * * It has to out-rank TWO rules at once: 9.6's own .hp-media--watermark * (0,1,0), which sets the homepage file's translate, and the band / * watermark centring rules above (0,2,0), which would otherwise cap it * at the container and pad it in from the edge - so it would not bleed * at all. This selector scores (0,3,0) and settles both without an * !important and without a race the next rule re-loses. * * Everything else it needs - position, z-index, top, right, margin, * radius, pointer-events - comes from 9.6 unchanged. * * !! THE WIDTH IS NOT HERE, IT IS PER PAGE. Each page's export is cut * to that page's own frame, so the visible rectangle is a different * number every time - 704 on Adjustments, 617 on Magic Hug. Sharing a * width would scale one of them. See 10.7 and 11.5. * * No translate, on either page. The homepage's file is the whole mark * and has to be pushed 28% off the edge to bleed; these are already cut * to the frame, so they sit flush against the right at their own size. * * It is absolutely positioned against the SECTION, not against the * wrapper it sits in - the wrapper is static - so `right: 0` from 9.6 * is the viewport's right edge and the bleed is unaffected by the * container above. */ .itv-section > .wp-block-group__inner-container > .hp-media--watermark { max-width: none; translate: 0 -50%; } /* ---- 10.1c A SPLIT INSIDE A BAND ---- * * The two combinations exist on different pages - Adjustments puts its * split on white, Magic Hug puts one on cream - and they FIGHT, which * is worth stating because neither symptom points at the cause. * * .itv-split puts the grid on the SECTION and relies on the inner * container being display:contents, so the real children become the * grid items. .itv-band does the opposite: it KEEPS that wrapper and * makes it the container, because a band sets no max-width and its * children would otherwise align to the window (see 10.1a). * * Together, the band wins the wrapper and the section is left laying * out exactly ONE item - the copy column and the photograph stack, at * full width, and nothing in the CSS looks wrong. * * The fix is to put the grid where the container already is. The * section goes back to being a plain block; the wrapper keeps its cap, * its centring and its gutter and gains the columns. */ .itv-band.itv-split { display: block; } .itv-band.itv-split > .wp-block-group__inner-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: var(--space-48); align-items: center; } /* Stacks with every other split. Restated at the wrapper for the same * reason as above - 10b's `.itv-split { grid-template-columns: 1fr }` * targets the section, which here is not the grid. */ @media (max-width: 991px) { .itv-band.itv-split > .wp-block-group__inner-container { grid-template-columns: 1fr; } } /* ---- 10.1d A RUNNING-COPY LINK ON A NAVY GROUND ---- * * !! THE KIT'S NAVY SURFACES COLOUR `h2` AND `p` AND HAVE NEVER * COLOURED `a`, SO AN INLINE LINK IN ONE COMES OUT BLACK. * * Found by Gerek on the built page 17, 2026-08-26: "If that is the * standard you want running your spine, SEE IF YOU ARE A CANDIDATE" is * an inline link inside .itv-credentials, and it rendered --ink * (#141413) with its underline, on the navy panel. Measured on the * live page, not reviewed: #141413 runs 2.72:1 against the gradient's * light end (#205e96) and 1.29:1 against its dark end (#102c46). White * is 6.77 and 14.28 on the same two. * * The cause is section 02's `a { color: var(--ink) }`. `color` does not * cascade into an anchor, because the anchor sets its own, so * `.itv-credentials p { color: var(--on-invert) }` never reached it. It * had gone unnoticed for four pages because page 17 is the FIRST to put * a running-copy link on a navy ground anywhere on this site - checked * on all five built pages, and every other anchor on navy is the amber * button, which is correctly --accent-contrast. * * !! HOVER IS THE HALF THAT IS WORSE, AND IT IS THE HALF A STATIC * REVIEW CANNOT SEE. Section 02's `a:not(.cta-button):hover { color: * var(--navy) }` takes an already-unreadable link to NAVY ON NAVY. * Both states are named below. * * !! NAMED, NOT BLANKET - which is 9.9's lesson, written after a * `.hp-proof a:not(.cta-button)` rule painted an amber button white at * 1.85:1 and got deleted rather than guarded a fourth time. "If * running-copy links ever return to this panel they need a rule that * names them, not one that catches every anchor." This is that rule: * it names a link inside a PARAGRAPH and excludes .hp-btn-line, so the * amber pill is untouchable by it rather than merely excluded from it. * * !! ALL THREE NAVY SURFACES, THOUGH ONLY ONE HAS A LINK TODAY. The * statement panel and the disqualifier rows are the same ground with * the same base rule underneath them and would fail the same way the * first time somebody puts a link in one - which 10.4 already flags as * a live possibility for .itv-panel. Closing the trap costs two * selectors; leaving it armed costs the next session a review cycle. * * The hover affordance is the underline getting heavier rather than a * colour change, for 1.2's reason: on navy the only other candidate is * --accent, and amber is a SURFACE colour on this site, not a text * colour. White on this gradient is about 5.7:1 and passes AA at both * states. */ .itv-credentials p:not(.hp-btn-line) > a, .itv-panel p:not(.hp-btn-line) > a, .itv-rows .itv-row a { color: var(--on-invert); text-decoration-line: underline; } .itv-credentials p:not(.hp-btn-line) > a:hover, .itv-panel p:not(.hp-btn-line) > a:hover, .itv-rows .itv-row a:hover { color: var(--on-invert); text-decoration-thickness: 2px; } /* ---- 10.2 PAGE HERO (552:18) ---- * Breadcrumb, H1, then one wide photograph across the content column. */ /* !! THERE IS NO VISIBLE BREADCRUMB, AND THE FRAME DRAWS ONE. * * Built as drawn, then removed on request 2026-08-26. The BreadcrumbList * JSON-LD at the foot of the page content STAYS - it is what search and * answer engines read, it was never the visible trail, and deleting it * would cost the page a rich result for no gain. If the trail ever comes * back it belongs in page-sections.php, derived from the title, rather * than hand-written into eighteen pages of post content. */ .itv-hero h1 { margin: 0 0 var(--space-40); max-width: var(--measure); } /* !! THE PHOTOGRAPH TAKES THE FULL CONTENT COLUMN, NOT THE VIEWPORT. * * The design draws it 1140 wide inside a 1440 frame with the section's * own rounded corners - it is the width of the copy above it, not a * bleed. On this site that column is 1400, so the file (1140x235) is * carried about 23% past its own width. That is a deliberate trade: at * its natural 1140 it would sit centred and narrower than the H1 above * it, and a photograph that does not share the heading's left edge * reads as a mistake far more loudly than a soft photograph does. * * !! IT WAS NARROWED TO 1040 x 250 ON 2026-08-26 AND PUT BACK THE SAME * DAY. Gerek asked for narrower and proportionally taller, saw it, and * withdrew the note - full width is the call. Recorded so nobody * re-proposes it: the trade it needs is 86px of crop off EACH SIDE of * the file, because there is no source larger than 1140x235 and * object-fit:cover buys height by scaling and throwing away width. The * budget before it starts taking subject is about 60 on the left (dark * cabinet edge) and 90 on the right (empty wall to Dr. Michael's * shoulder), measured on the file. * * The aspect ratio is the file's own, so the crop is the design's. */ .itv-hero .hp-media { aspect-ratio: 1140 / 235; } /* !! THE HERO IS ART-DIRECTED: TWO FILES, TWO SHAPES, ONE BREAKPOINT. * * The wide file is 1140x235 - 4.85:1 - and on a phone that is a 71px * strip under a three-line headline. It cannot be made taller by CSS: * cropping the sides to buy height takes 276px a side before it reads * as a photograph, and that takes Dr. Michael out of the frame. The * answer was a second file, not a second ruleset. * * 195 is 1000x1000, the same scene shot tight, and it is served ONLY * below 600 by a in the page content. * * !! THE 599 HERE AND THE 599 IN THE ARE ONE DECISION IN TWO * PLACES. They must move together. If the CSS switches to square and * the has not, object-fit:cover crops a 4.85:1 photograph into * a square box and shows a slice of somebody's shoulder; the other way * round letterboxes the square one. Nothing errors either way, which is * what makes it worth a warning rather than a comment. * * 599 and not 767 because that is where THIS SITE puts the phone - see * 1.8b: layout stacks at 767, type and the phone treatment start at * 599, and 600-991 is the tablet band, which keeps the wide file. */ @media (max-width: 599px) { .itv-hero .hp-media { aspect-ratio: 1 / 1; } } /* ---- 10.3 AEO INTRO (552:21) ---- * One dense credibility paragraph. It carries the licence number, the * years, and both review counts, and it is the block an answer engine * is most likely to lift, so it sits directly under the hero with * nothing between them. * * CENTRED, and it is the one running paragraph on the page that is. * The frame centres it, and it reads as the caption to the hero above * rather than as the start of the argument - which begins in the panel * below it, also centred. The two centred blocks are the page's * opening; everything from .itv-split down ranges left. */ .itv-intro p { max-width: var(--measure); margin: 0 auto; text-align: center; } /* ---- 10.4 THE STATEMENT PANEL (553:18) ---- * * "Dr. Michael Will Not Adjust a Spine He Has Not Seen" is a NAVY * PANEL WITH CENTRED WHITE COPY, not the plain white running-copy * section it was first built as. * * !! HOW THAT WAS MISSED, BECAUSE THE SAME MISTAKE IS ONE SAMPLE AWAY * ON EVERY REMAINING PAGE. * * The frame's section grounds were read by sampling the rendered PNG * down a single column at x=6 - the page gutter - which correctly * found the two cream bands and the navy footer. It cannot find a * PANEL, because every panel in this file is inset 150px and x=6 is * outside all of them. Re-sampled at x=203 the section reads navy from * y685 to y1086, which is exactly this frame. * * Sample INSIDE the inset as well as in the gutter. One column is not * a ground map. * * The air around it is margin, not padding, for the same reason as * .itv-credentials: padding would sit inside the navy. */ .itv-panel { width: calc(100% - (var(--container-pad) * 2)); max-width: calc(var(--container) + (var(--container-pad) * 2)); margin: calc(var(--section-pad) / 2) auto; padding: var(--space-48); background: var(--gradient-navy-panel); color: var(--on-invert); border-radius: var(--radius-md); text-align: center; } .itv-panel h2 { max-width: var(--measure); margin: 0 auto var(--space-24); color: var(--on-invert); } .itv-panel p { max-width: var(--measure); margin-inline: auto; color: var(--on-invert); } .itv-panel p:last-child { margin-bottom: 0; } /* THE FRAME GROUPS THE SIX LINES 2 / 1 / 2 / 1, and the grouping is the * argument: the two "here is what everyone else does" lines belong * together, and so do the two that answer them. A uniform paragraph * rhythm flattens that into six equal statements. The class closes the * gap under the first line of a pair; the standing 16px opens it * between pairs. */ .itv-panel__tight { margin-bottom: 0; } /* The frame underlines one clause - "The structure underneath never * changes" - inside an otherwise unemphasised sentence. Set as drawn * rather than converted to another bold, because it is doing a * different job from the three bold lines: those are conclusions, this * is the pivot inside a sentence. * * An underline normally reads as a link, and here it does not, for one * checked reason: this panel contains NO anchors at all. If a link ever * lands in it, this needs re-deciding rather than guarding. */ .itv-panel__mark { text-decoration: underline; text-underline-offset: 0.15em; } /* ---- 10.4a RUNNING-COPY SECTION (556:18) ---- * "How You Will Know It Is Working" is the page's one plain section - * a heading over short paragraphs on white, nothing else. */ .itv-prose p:last-child { margin-bottom: 0; } /* ---- 10.5 WHAT HAPPENS BEFORE YOUR FIRST ADJUSTMENT (553:26) ---- * Copy left, the X-ray review photograph right. * * The design's columns are 654 and 430 in a 1140 container. Only the * photograph's is fixed here: it is a real 430x420 file and should not * be carried past its own size, so the copy takes whatever is left - * 922 at a 1400 container, which is inside --measure and needs no * further cap. */ .itv-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); gap: var(--space-48); align-items: center; } .itv-split__col > h2 { margin: 0 0 var(--space-32); } .itv-split__col > p:last-child { margin-bottom: 0; } .itv-split .hp-media { aspect-ratio: 430 / 420; } /* ---- 10.6 THE WORKUP, STEP BY STEP (564:22) ---- * * FOUR of the homepage's process tiles, not three, and CREAM ON WHITE * rather than white on cream - this section sits on the page's white * ground and the design fills the tiles with --surface-alt to lift * them off it. Both differences are stated by the section; .hp-card * itself is untouched. * * --shadow-tile is the homepage's, and it exists because a tile on a * tinted ground needs a second, wider pass to register at all. On white * the plain --shadow-card is enough, and is what the design draws * (DROP_SHADOW #00000014, offset 0,2). */ .ca-workup .hp-cards { grid-template-columns: repeat(4, 1fr); margin-block: 0; text-align: left; } .ca-workup .hp-card { background: var(--surface-alt); box-shadow: var(--shadow-card); } /* STEP FOUR'S ICON IS TWO FILES AND A GLYPH. * * The design draws it as two spines with a short arrow between them * (619:451). The two spines exported as their own images - 22x100 and * 19x100, IDs 129 and 130 - and the arrow did not: it is a 16x5 vector * inside the group, which is a hairline nobody should be shipping as a * third image file. It is set as a text arrow in the accent instead, * which is the one place on this page amber is used as a mark. * * The wrapper is still .hp-media--icon, so the slot is the same 100px * tall auto-wide box the other three use and the four icons sit on one * baseline. */ .ca-icon-pair { display: flex; align-items: center; gap: var(--space-8); } .ca-icon-pair > img { width: auto; height: 100%; object-fit: contain; } .ca-icon-pair__arrow { color: var(--accent); font-size: var(--type-h5); line-height: 1; } /* ---- 10.7 WHERE IT HURTS IS NOT WHERE WE STOP LOOKING (554:18) ---- * The first cream band. Copy, a sub-heading, then two technique cards. */ /* The monogram behind this section is brand furniture - it carries no * information and is aria-hidden - so it is allowed to run off the * right edge the way the design draws it. * * The file IS the bleed. 122 is 704x808, which is exactly the visible * rectangle of the design's 1020x1006 group once the frame clips it: * the artwork is already cut at the right edge. So it is pinned to the * right at its own size with no translate - the homepage's watermark * needs one only because its file is the whole mark. * * !! THE CONTAINING BLOCK MOVED TO .itv-watermark ON 2026-08-26 and * this section's markup carries that class now. position, isolation * and overflow used to be declared here; a second page needed the same * three on a white ground and copying them would have been the third * time the same mechanism was written out. Only the width is still a * page's own business - see 10.1b. */ .ca-techniques > .wp-block-group__inner-container > .hp-media--watermark { width: min(704px, 50vw); } /* h3, and it is the only one on the page: "Two Adjustments You Will Not * Find at Most Practices" introduces the two cards, not the section. */ .ca-techniques h3 { margin: var(--space-40) 0 var(--space-24); } /* !! THE CARDS NEED AIR UNDER THEM, BECAUSE A PARAGRAPH FOLLOWS THEM. * * The frame ends this section with the two cards, so nothing there * needed a bottom margin. The 3.6 copy does not end there: it has one * more line - "Not every patient gets every technique. Your findings * decide." - which the frame simply does not place. Left at margin 0 * that line sat flush against the cards, reading as a caption stuck to * the left-hand one rather than as the qualifier on both. * * 40 rather than the 16 a paragraph would take from another paragraph: * this is a change of gear back out of the cards, the same call 9.7 * makes under the homepage's tiles. */ .ca-technique-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-32); margin: 0 0 var(--space-40); padding: 0; list-style: none; } .ca-technique { display: grid; gap: var(--space-12); align-content: start; padding: var(--space-32); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-card); } /* !! THE DESIGN DRAWS THIS LABEL IN AMBER AND IT IS NOT BUILT THAT WAY. * * #fbb03c on white measures about 1.9:1 against a 4.5:1 requirement. * Section 01 states the rule the whole theme runs on - amber is a * surface colour, never text on a light ground - and section 02 repeats * it for links. This is the same call, made once more rather than * quietly excepted: the clinical name is set in --ink-muted at the * eyebrow size, which is what .hp-eyebrow already does. */ .ca-technique__eyebrow { margin: 0; font-size: var(--type-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); } .ca-technique__title { margin: 0; font-family: var(--font-heading); font-size: var(--type-h4); font-weight: var(--weight-bold); } .ca-technique__body { margin: 0; font-size: var(--type-small); color: var(--ink-muted); } /* The pill sits at the bottom of the card and starts on the card's own * left edge. .hp-btn-line's own 24px margin-block would double the * grid's gap above it and hang 24 of nothing below it. */ .ca-technique .hp-btn-line { margin: var(--space-12) 0 0; justify-self: start; } /* ---- 10.8 FIND YOUR SITUATION (555:18) ---- * * THE ONE CENTRED SECTION ON THE PAGE, and deliberately so. It is an * interlude between two long arguments - a heading, one line, seven * chips and a door out to /conditions-treated/ - and it is the only * block here that is a set of objects rather than a column of copy. */ .ca-situation { text-align: center; } .ca-situation h2 { margin: 0 0 var(--space-16); margin-inline: auto; } .ca-situation p.wp-block-paragraph:not(.hp-btn-line) { max-width: var(--measure); margin: 0 auto var(--space-32); } /* !! CAPPED AT THE READING MEASURE, AND THE REASON IS THE WRAP. * * Seven chips of very different lengths in a centred flex row wrap * wherever the widths happen to land, and across the full 1400 column * they landed SIX AND ONE - a full row and one orphan, which reads as * a mistake rather than as a list. * * Measured at the 19px size, the chips run 127, 152, 232, 110, 208, * 310 and 390 wide with 12px gaps. Against 1352 the first six come to * 1199 and the seventh will not fit - hence 6 + 1. Against --measure * the first five come to 877, the sixth would take it past 960, so it * breaks there and the last two come to 712 on a line of their own: * FIVE AND TWO, which is what the frame draws (555:21 is 880 of 1440). * * It also puts the chips on the same width as the paragraph above * them, so the block has one edge rather than two. * * This is a wrap and not a grid, so it is width-dependent by nature. * The cap makes the DESKTOP case land where the design draws it and * lets the rest reflow; do not chase a count at every breakpoint. */ .ca-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); max-width: var(--measure); margin: 0 auto var(--space-32); padding: 0; list-style: none; } /* !! NOT PILLS, AND NOT WHITE. BOTH OF THEM WERE SAYING "BUTTON". * * These are the seven answers to "is this me?". Nothing happens when * you press one - the button underneath is the only thing in this * section that goes anywhere - and they were drawn as white outlined * pills sitting directly above an amber pill, so they read as a row of * controls that had been disabled. * * !! ON THIS SITE THE PILL RADIUS *IS* THE AFFORDANCE. Every 999 on * the page is pressable: both CTAs, the header button, the page * buttons. Nothing else uses it. Spending it on a static label is what * created the expectation, so the radius comes down to --radius, which * is what the cards and tiles use and what nobody tries to press. * * The fill is the other half. White on white is "technically a fill, * visually nothing" - the same finding that put --fill-tint in section * 01 in the first place - so the chips take that tint and drop the * outline, which a filled shape does not need. * * !! THEY ARE LINKS NOW - 2026-08-26, WHEN PAGE 16 WAS BUILT. * * They were deliberately not links while page 16's pain states were a * plain