/** * --------------------------------------------------------------------------- * Healing Paths — HOME v4 (template-home-v4.php), modules H2…H16. * --------------------------------------------------------------------------- * The designer's homepage package, 2026-09-14. Source of truth for every * measurement here: * docs/design/2026-09-14-designer-homepage-template/ * CLASS-CONTRACT.md the binding markup contract (three hands: * template / this sheet / js/home-hero-v4.js) * HOMEPAGE-TEMPLATE.md module spec, palette, P5 + P8 card rules * HERO-CAROUSEL.md H2 geometry, motion table, slide-3 switch * Homepage-Template.dc.html the three artboards: 1a = 1440, * 1b = 1024 deltas, 1c = 390 * Where a rule carries a number, the number came from one of those artboards * and the comment says which. * * SCOPE. H0 (announce) and H1 (header) are NOT this sheet's: they live in the * HEADER V4 block at the end of css/site-chrome.css and are the header owner's. * This sheet styles H2 (hero carousel) through H16 (FAQ). * * BAND COLOUR IS THE EDITOR'S. Every module section already carries one of * .hp-bg-white / .hp-bg-petal-mist / .hp-bg-soft-cream / .hp-bg-berry, chosen * in the editor and printed by the template. NO rule in this sheet sets a * background on a `section.hp-module` — the two berry bands (H3 proof, H13 * membership) are styled from the INSIDE, via `.hp-bg-berry .hp-v4-…`. * The hero is the one section with no band class at all; its berry ground is * painted on `.hp-v4-hero__slides`, a div, for exactly this reason. * * VOCABULARY. Everything reusable is reused: .hp-module, .hp-container, * .hp-eyebrow, .hp-h2, .hp-h3, .hp-lede, .hp-btn, .hp-btn--on-berry, * .hp-vcard* (H14's article cards), .hp-pcard* (H11's practitioners), * .hp-faq* (H16), .hp-bg-*, and the roundel size tokens. Their type * scale is NOT re-cut here: .hp-h2 is 26px / 32px and the artboards draw * 25–34px, a difference not worth a second scale. The two things v4 does * change are scoped to v4 and stated where they happen: the module eyebrow is * Berry (the artboards use it on all fifteen modules, not the secondary plum), * and .hp-btn--ghost is given a definition, because its only definition in the * theme lives in css/healing-home.css — the SUPERSEDED v3 sheet, which the v4 * template does not load. * * MOBILE FIRST. Base rules are the 390 artboard. Two widening steps, in the * two query forms css/healing-paths.css already uses, byte for byte: * @media (min-width: 768px) and (max-width: 1023px) the 1024 artboard * @media (min-width: 1024px) the 1440 artboard * Every grid is one column at base, and every grid/flex child carries * min-width:0 (or minmax(0,1fr)), so a long unbroken word can never push the * page into a horizontal scrollbar. * * NO SOURCE-ORDER WINS. WP Rocket's RUCSS re-orders concatenated CSS * (css/site-chrome.css:138-139; lessons 2026-08-31), so a rule here never * beats another by coming later. The ladder: * base .hp-v4-x__y (0,1,0) * steps .hp-v4-x .hp-v4-x__y (0,2,0) * The step prefix is the module's OWN section class, not a body class. This * is the one place the sheet departs from healing-home.css's `.hp-home` * ladder, and deliberately: the v4 body class is the template author's to * choose and the contract does not publish it, so depending on it would put a * silent, invisible failure between two files written by two hands. Anything * that has to out-rank a healing-paths.css rule carries enough extra tokens to * win outright, and says which rule it is beating. * * TOKENS ONLY. No hex in this file. Two colours need an alpha and have no rgb * triplet token, so — following the contract's own instruction for the hero * scrim — they are declared locally as triplets below. The single literal * rgba(255,255,255,…) is H13's Gold box: a translucency over berry, not a * palette colour, and sanctioned by the contract for that one use. * * RADIUS 0 throughout (--gg-radius). Squares, per the direction. */ /* ========================================================================== * Local colour bases + the two shared additions * ========================================================================== */ /* The hero scrim base. NOT a site token (--gg-scrim is Hero B's, a different * berry-black), declared locally exactly as CLASS-CONTRACT.md §1 instructs. */ .hp-v4-hero { --hpv4-scrim: 42 15 30; } /* Round 10 (R10-4): the overlay is drawn by the shared HERO OVERLAY rule in * healing-paths.css; this hero only states its defaults. Phone: a wash rising * from the bottom, .90 → .72 at 42% → .20 at the top (unchanged values). */ .hp-v4-hero { --gg-ov-rgb: var(--hpv4-scrim); --gg-ov-a: .82; --gg-ov-phone-a: .9; --gg-ov-is-phone: 1; --gg-ov-angle: to top; --gg-ov-f1: .42; --gg-ov-k1: .8; --gg-ov-f2: .71; --gg-ov-k2: .5111; --gg-ov-f3: 1; --gg-ov-k3: .2222; } /* Fade to white: dark text, a slightly stronger default (the pillar's light values). */ .hp-v4-hero .gg-ov.is-overlay-dark { --gg-ov-a: .85; --gg-ov-phone-a: .88; } /* Gaia Berry as an rgb triplet, for the card-lift shadow — the only place v4 * needs Berry at an alpha, and there is no --gg-berry-rgb. Same literal * healing-paths.css already carries for its Berry hairlines; kept as a * property so the alpha is written once and read as "Berry at 10%". * The attribute selector scopes it to v4 modules and lets it inherit. */ [class*="hp-v4-"] { --hpv4-berry: 108 29 69; } /* Module eyebrow — Berry, not the secondary plum. Every eyebrow on all three * artboards is Berry; .hp-eyebrow's own colour is left alone for every other * template. (0,2,0) beats .hp-eyebrow (0,1,0) and .hp-bg-berry p (0,1,1) * outright, so it needs no help from source order. */ [class*="hp-v4-"] .hp-eyebrow { color: var(--gg-berry); } /* .hp-btn--ghost — the outlined secondary. Defined here because the theme's * only copy is in the superseded v3 sheet. Written as `.hp-btn.hp-btn--ghost` * (0,2,0 with the v4 scope: 0,3,0) on purpose: .hp-btn is (0,1,0) and a bare * modifier class would only beat it on source order. `color` carries its own * !important because .hp-btn's does too — specificity breaks the tie. * This is the LIGHT-ground variant; the berry-ground ones are with the hero * and H13, each at higher specificity so neither can lose a reorder. */ [class*="hp-v4-"] .hp-btn.hp-btn--ghost { background: transparent; color: var(--gg-berry) !important; border-color: var(--gg-berry); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } [class*="hp-v4-"] .hp-btn.hp-btn--ghost:hover, [class*="hp-v4-"] .hp-btn.hp-btn--ghost:focus-visible { background: var(--gg-berry); color: var(--gg-text-on-dark) !important; border-color: var(--gg-berry); } /* Centred module heads (H4, H6, H9, H11, H12, H16 on 1a) — the eyebrow, H2 * and lede centre, the module body does not. Targeting the three head * elements directly, rather than text-align on __inner, means no card or grid * below needs a reset. Left-aligned at 390 (1c), so this lives in the two * step blocks only. */ /* ========================================================================== * H2 — hero carousel. Three slides: one locked editorial slide plus two * campaign slots. js/home-hero-v4.js owns .is-active (on slides and bars), * .is-fullbleed (on the section) and the fill's inline width + transition; * everything else below is CSS-only, including the inactive-slide state, so * the hero is correct before a byte of JS runs and stays correct with JS off. * * The section itself paints nothing: .hp-v4-hero__slides carries the berry. * ========================================================================== */ .hp-module.hp-v4-hero { position: relative; height: 600px; /* 1c */ overflow: hidden; padding: 0; /* full-bleed: .hp-module's 48px would box it in */ color: var(--gg-text-on-dark); /* slide copy inherits white; see the bleed block for the h1 */ outline-offset: -2px; /* the region is tabbable; keep its ring inside the frame */ } .hp-v4-hero__slides { position: absolute; inset: 0; background: var(--gg-berry); /* a div, not the section — the band rule stands */ } /* Stacking, once, for the whole hero: media 1, curve 2, copy 3, controls 4. * The slide itself takes NO z-index on purpose — at opacity 1 it is not a * stacking context, so its media sits under the curve and its copy over it, * which is the whole point of the curve frame. */ .hp-v4-hero__slide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; /* inactive CTAs are neither clickable nor tabbable */ transition: opacity 900ms cubic-bezier(.22, 1, .36, 1); /* motion table: crossfade */ } .hp-v4-hero__slide.is-active { opacity: 1; pointer-events: auto; } /* 1c: slides 1–2 are a 240px photo band above the berry panel — no curve at * 390 at all. The media is in flow here and goes absolute at 768. */ .hp-v4-hero__media { position: relative; z-index: 1; flex: none; height: 240px; overflow: hidden; } .hp-v4-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; /* object-position is the editor's focal point, printed inline. Nothing here. */ } /* Rendered on every slide; invisible on curve slides, so the layout switch is * one opacity change and not a DOM change. 1c bottom-up wash. */ .hp-v4-hero__scrim { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 700ms cubic-bezier(.22, 1, .36, 1); /* the gradient itself: HERO OVERLAY, healing-paths.css (round 10) */ } .hp-v4-hero__copy { position: relative; z-index: 3; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 24px var(--gg-gutter) 0; /* 1c */ } .hp-v4-hero__eyebrow { font-family: var(--gg-font-heading); font-size: 0.65625rem; /* 10.5px, 1c */ letter-spacing: 0.18em; text-transform: uppercase; color: var(--gg-dawn-pink); margin: 0; } /* Slide 1 prints this as the page's one h1, slides 2–3 as an h2. Identical * styling, per the contract — which is why the campaign slides do not get * 1a's 52px: one scale, one outline. */ .hp-v4-hero .hp-v4-hero__title { font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.875rem; /* 30px, 1c */ line-height: 1.16; color: var(--gg-text-on-dark); margin: 0; } .hp-v4-hero__lead { font-size: 0.9375rem; /* 15px, 1c */ line-height: 1.5; color: var(--gg-dawn-pink); margin: 0; } .hp-v4-hero__kicker { font-family: var(--gg-font-heading); font-size: 0.9375rem; line-height: 1.45; color: var(--gg-cream); /* the kicker line is Cream on every artboard */ margin: 0; } /* Buttons on berry: the primary inverts to white, the ghost outlines in white. * Both out-rank .hp-btn (0,1,0) and the light-ground ghost above (0,2,0). */ .hp-v4-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 2px; } .hp-v4-hero__actions .hp-btn { display: block; text-align: center; background: var(--gg-white); color: var(--gg-berry) !important; border-color: var(--gg-white); } .hp-v4-hero__actions .hp-btn:hover, .hp-v4-hero__actions .hp-btn:focus-visible { background: var(--gg-dawn-pink); border-color: var(--gg-dawn-pink); } .hp-v4-hero .hp-btn.hp-btn--ghost { background: transparent; color: var(--gg-text-on-dark) !important; border-color: var(--gg-white); } .hp-v4-hero .hp-btn.hp-btn--ghost:hover, .hp-v4-hero .hp-btn.hp-btn--ghost:focus-visible { background: var(--gg-petal-mist); color: var(--gg-berry) !important; border-color: var(--gg-petal-mist); } /* DEPRECATED 2026-10-12 (round 10): curve unused since Maria's call; remove with the Own switch. */ /* The panel-sweep curve. Hidden at 390 (1c has no curve); it appears at 768. * The fill is set from CSS so the token wins over whatever fill attribute the * SVG carries — a CSS `fill` always beats a presentation attribute. */ .hp-v4-hero__curve { position: absolute; left: 0; top: 0; height: 100%; z-index: 2; display: none; transition: opacity 700ms cubic-bezier(.22, 1, .36, 1); /* motion table: dissolve */ } .hp-v4-hero__curve svg { display: block; width: 100%; height: 100%; } .hp-v4-hero__curve svg path { fill: var(--gg-berry); } /* JS toggles is-fullbleed on the SECTION when the active slide is slide 3. */ .hp-v4-hero.is-fullbleed .hp-v4-hero__curve { opacity: 0; } /* Slide 3 — the layout switch, keyed off the slide's own attribute so it is * right on first paint. Photo full-bleed, scrim on, copy on the image. */ .hp-v4-hero__slide[data-layout="fullbleed"] { display: block; } .hp-v4-hero__slide[data-layout="fullbleed"] .hp-v4-hero__media { position: absolute; inset: 0; height: auto; } .hp-v4-hero__slide[data-layout="fullbleed"] .hp-v4-hero__scrim { opacity: 1; } .hp-v4-hero__slide[data-layout="fullbleed"] .hp-v4-hero__copy { position: absolute; left: 0; right: 0; bottom: 0; flex: none; padding: 0 var(--gg-gutter) 76px; /* 1c; 76 clears the 44px bars at bottom 20 */ } /* Controls. At 390 the arrows are dropped and the three bars split the width — * swipe is the gesture there, the bars are the picker and the progress. */ .hp-v4-hero__controls { position: absolute; left: var(--gg-gutter); right: var(--gg-gutter); bottom: 20px; z-index: 4; display: flex; align-items: center; gap: 8px; } .hp-v4-hero__arrow { display: none; } .hp-v4-hero__bars { display: flex; flex: 1; min-width: 0; gap: 8px; } /* The bar is the track AND the hit area: 44px tall for the tap target, with * the 3px rule drawn by ::before so the contract's single child stays the * fill. The track is white at 32% — as an opacity on the pseudo-element, so * no literal alpha-white is needed and the fill above it is untouched. */ .hp-v4-hero__bar { position: relative; flex: 1; min-width: 0; height: var(--gg-tap-min); display: flex; align-items: center; padding: 0; margin: 0; border: 0; background: none; border-radius: var(--gg-radius); cursor: pointer; } .hp-v4-hero__bar::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--gg-text-on-dark); opacity: .32; } /* THE FILL. js/home-hero-v4.js writes style.width and style.transition on this * element and nothing else, so this rule declares width:0 and deliberately * declares NO transition, NO animation and NO will-change — anything here * would fight the inline pair the script depends on. It is also left out of * the reduced-motion block below for the same reason (the script already * pins past bars to 100%/0ms and future bars to 0%/0ms). */ .hp-v4-hero__fill { position: relative; z-index: 1; display: block; height: 3px; width: 0; background: var(--gg-text-on-dark); } /* ========================================================================== * H3 — proof strip. Locked to hp-bg-berry by the template: band 1 of 2. * A slim strip, not a section — 22px of padding on both artboards, against * .hp-module's 48/72. The doubled selector (0,2,0) beats .hp-module (0,1,0) * on specificity, so a RUCSS reorder cannot put the 48px back. * ========================================================================== */ .hp-module.hp-v4-proof { padding-top: 22px; padding-bottom: 22px; } .hp-v4-proof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2x2 at 390 */ gap: 18px 12px; text-align: center; } .hp-v4-proof__item { min-width: 0; } .hp-v4-proof__figure { display: block; font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.1875rem; /* 19px, 1c */ line-height: 1.2; color: var(--gg-text-on-dark); margin: 0; } /* Mulberry Haze is the palette's "muted type on berry"; 11.5px here is the * drawn size and the one label on the page under the 13px caption floor. */ .hp-v4-proof__label { display: block; font-size: 0.71875rem; /* 11.5px, 1c */ letter-spacing: 0.06em; text-transform: uppercase; color: var(--gg-mulberry-haze); margin: 0; } /* ========================================================================== * H4 — what do you need today. White band, five need cards, P5 3+2 centred. * * Child mapping, by elimination from the contract's four names against the * four elements on artboard 1a — the template author should confirm it: * __title the path name, small uppercase Mulberry label * __need the need sentence, the card's visual headline * __explore the "Explore breathwork, somatics…" line * __link the CTA * Note this is the inverse of H6, where __kicker is the small label and * __title the headline. The names are the contract's, not this sheet's. * ========================================================================== */ /* P5 — the mechanism, not a 3-column grid: cards wrap at the 3-col measure * and the row centres, so 4 renders 3+1 centred and 5 renders 3+2 centred and * the second row is never left-orphaned. One card per row at 390. */ .hp-v4-needs__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .hp-v4-needs__card { flex: 0 0 100%; box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; background: var(--gg-petal-mist); /* Tint A card on the white band */ padding: 22px; transition: transform 250ms cubic-bezier(.22, 1, .36, 1), box-shadow 250ms cubic-bezier(.22, 1, .36, 1); } .hp-v4-needs__card:hover, .hp-v4-needs__card:focus-within { transform: translateY(-4px); box-shadow: 0 10px 24px rgb(var(--hpv4-berry) / .10); } /* ROUND 6, 2026-09-17 — the path glyph on each H4 card (Diego: "each card, add * its corresponding icon…"). Round 6 drew it inverse to H6 (Berry artwork on a * white disc); ROUND 9 (Adiba via Diego, 5 Oct: "if we show a pillar icon, it * should always be in a gaia berry background") makes it the same as H6 and * every other pillar roundel: white glyph on a Berry disc. The colour is pinned * here rather than inherited: the disc lives inside the card's , so * currentColor would be the link colour and would move on hover. On hover the * card turns Mauve and the Berry disc stays Berry. */ .hp-v4-needs__roundel { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--gg-berry); color: var(--gg-text-on-dark); display: grid; place-items: center; margin: 0 0 14px; } .hp-v4-needs__roundel .hp-icon-mask, .hp-v4-needs__roundel svg { width: 50%; height: 50%; } .hp-v4-needs__roundel svg { fill: none; stroke: currentColor; } .hp-v4-needs__title { font-family: var(--gg-font-heading); font-size: 0.625rem; /* 10px */ letter-spacing: 0.16em; text-transform: uppercase; color: var(--gg-mulberry); margin: 0 0 10px; } .hp-v4-needs__need { font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.125rem; /* 18px at 390 */ line-height: 1.3; color: var(--gg-text); margin: 0; } .hp-v4-needs__explore { font-size: 0.875rem; /* 14px, 1c */ line-height: 1.5; color: var(--gg-text); margin: 8px 0 12px; } .hp-v4-needs__link { color: var(--gg-berry); text-decoration: underline; font-size: 0.875rem; font-weight: 500; margin-top: auto; /* one baseline across a row of cards */ display: inline-flex; align-items: center; min-height: var(--gg-tap-min); } /* The quiz line under the grid. Three siblings, no wrapper in the contract, so * the text pair and the button are placed explicitly — at 390 one column, at * the steps a text column plus a button column. * * NO FILL, A HAIRLINE (2026-09-17). This was a Soft Cream box. Diego retired * cream as a surface and asked what the banner becomes without it. It becomes * the same object the Healing Paths hub already uses for its own "Still Not * Sure Where to Begin?" panel (.hp-hb-quiz__panel): white, 1px Mulberry Haze, * berry heading, the filled berry button. One quiz prompt, one look, on both * pages — and on this white band the hairline is what makes it read as a * separate invitation rather than a sixth card. Same treatment he asked for on * H13's box ("lose the background… keep the border"). */ .hp-v4-needs__quiz { margin-top: 20px; background: var(--gg-white); border: 1px solid var(--gg-mulberry-haze); padding: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; align-items: center; } .hp-v4-needs__quiz-title { font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.125rem; /* 18px, 1c */ color: var(--gg-berry); margin: 0; } .hp-v4-needs__quiz-note { font-size: 0.8125rem; /* 13px — caption floor */ line-height: 1.45; color: var(--gg-text-muted); margin: 0; } .hp-v4-needs__quiz .hp-btn { justify-self: start; margin-top: 6px; } /* ========================================================================== * H5 — the Gaia difference. Square 50/50 split on Tint A: image left, prose * right, four white points in a 2x2 inside the prose. * * The section drops its own vertical padding so the band is exactly the split * — that is what 1a draws. It cannot go edge-to-edge horizontally: the * contract puts every module inside .hp-container, so the photo stops at the * container gutter and a strip of tint shows beside it. * ========================================================================== */ .hp-module.hp-v4-diff { padding-top: 0; padding-bottom: 0; } .hp-v4-diff__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .hp-v4-diff__media { min-width: 0; height: 260px; overflow: hidden; } /* 1c */ .hp-v4-diff__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .hp-v4-diff__body { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 28px 0 36px; /* 1c's 36/20/44, minus the sides the container supplies */ } .hp-v4-diff__points { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 6px; } .hp-v4-diff__point { min-width: 0; background: var(--gg-white); /* white points on the tint */ padding: 16px; } .hp-v4-diff__point-title { display: block; font-family: var(--gg-font-heading); font-weight: 400; font-size: 1rem; /* 16px, 1c */ color: var(--gg-berry); margin: 0; } .hp-v4-diff__point-text { display: block; font-size: 0.8125rem; line-height: 1.45; color: var(--gg-text-muted); margin: 0; } /* ========================================================================== * H6 — five Healing Paths. Tint B band, five WHITE cards, P5 3+2 centred, * berry roundel + white glyph. * * 390 is the one layout that is genuinely different, not just narrower: the * roundel moves BESIDE the title so the card stays under 200px tall (1c's own * note). The five children are flat siblings, so that is a two-column grid * with the roundel pinned to column 1 row 1 and every text child in column 2. * At the steps the card becomes a flex column — which is also what lets * margin-top:auto pin the link to one baseline across a row. * ========================================================================== */ .hp-v4-paths__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .hp-v4-paths__card { flex: 0 0 100%; box-sizing: border-box; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-content: start; background: var(--gg-white); padding: 22px; transition: transform 250ms cubic-bezier(.22, 1, .36, 1), box-shadow 250ms cubic-bezier(.22, 1, .36, 1); } .hp-v4-paths__card:hover, .hp-v4-paths__card:focus-within { transform: translateY(-4px); box-shadow: 0 10px 24px rgb(var(--hpv4-berry) / .10); } .hp-v4-paths__roundel { grid-column: 1; grid-row: 1; flex: none; width: var(--gg-roundel-hero-phone); /* 52px — the token already carries it */ height: var(--gg-roundel-hero-phone); border-radius: 50%; background: var(--gg-berry); color: var(--gg-text-on-dark); /* the glyph strokes currentColor */ display: grid; place-items: center; } .hp-v4-paths__roundel svg { display: block; width: 22px; /* 1c */ height: 22px; fill: none; stroke: currentColor; } .hp-v4-paths__kicker { grid-column: 2; grid-row: 1; font-family: var(--gg-font-heading); font-size: 0.625rem; /* 10px, 1c */ letter-spacing: 0.14em; text-transform: uppercase; color: var(--gg-mulberry); margin: 0; } .hp-v4-paths__title { grid-column: 2; font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.0625rem; /* 17px at 390 */ line-height: 1.3; color: var(--gg-text); margin: 6px 0 0; } .hp-v4-paths__text { grid-column: 2; font-size: 0.875rem; line-height: 1.5; color: var(--gg-text); margin: 8px 0 12px; } .hp-v4-paths__link { grid-column: 2; color: var(--gg-berry); text-decoration: underline; font-size: 0.875rem; font-weight: 500; margin-top: auto; display: inline-flex; align-items: center; min-height: var(--gg-tap-min); } /* Footer link/button under the grid, centred. width:fit-content keeps it * centred whether the template prints a .hp-btn or a bare text link. */ .hp-v4-paths__all { display: block; width: fit-content; margin: 20px auto 0; } /* ========================================================================== * H7 — start where you are. Three numbered steps on Tint B, white band. * The numeral is Rose Clay, the one place the palette uses it as type. * Each step carries its own button, pinned to the card bottom so a row of * three with uneven copy still shows its buttons on one line. * ========================================================================== */ .hp-v4-start__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .hp-v4-start__step { min-width: 0; display: flex; flex-direction: column; /* Was Soft Cream (retired 2026-09-17). White + the Mulberry Haze hairline, * the same card language as the quiz panel above and the H11 cards. */ background: var(--gg-white); border: 1px solid var(--gg-mulberry-haze); padding: 22px; } .hp-v4-start__num { display: block; font-family: var(--gg-font-heading); font-size: 1.875rem; /* 30px, 1c; 34px at 1440 */ line-height: 1; color: var(--gg-rose-clay); } .hp-v4-start__title { font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.125rem; /* 18px, 1c */ line-height: 1.3; color: var(--gg-text); margin: 6px 0 0; } .hp-v4-start__text { font-size: 0.875rem; line-height: 1.5; color: var(--gg-text); margin: 8px 0 16px; } /* Full-width inside the card at every breakpoint — that is how 1a and 1c both * draw it, and it keeps the tap target honest on a phone. */ .hp-v4-start__step .hp-btn { display: block; text-align: center; margin-top: auto; } /* ========================================================================== * H8 — the ecosystem. Four white cards on Tint A. 4-up at 1440, 2x2 at 1024 * and stacked at 390. min-height 230 at 1440 only: it is there to stop four * short cards reading as a strip, and at 2-up the copy already fills them. * ========================================================================== */ .hp-v4-eco__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .hp-v4-eco__card { min-width: 0; display: flex; flex-direction: column; background: var(--gg-white); padding: 22px; } .hp-v4-eco__title { font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.125rem; /* 18px, 1c */ line-height: 1.3; color: var(--gg-text); margin: 0; } .hp-v4-eco__text { font-size: 0.875rem; line-height: 1.5; color: var(--gg-text); margin: 8px 0 12px; } .hp-v4-eco__link { color: var(--gg-berry); text-decoration: underline; font-size: 0.875rem; font-weight: 500; margin-top: auto; display: inline-flex; align-items: center; min-height: var(--gg-tap-min); } /* ========================================================================== * H9 — ways to go deeper. Three image cards on Tint A, white band. * Thumb is a fixed height plus object-fit:cover rather than aspect-ratio: the * spec gives heights (230 desktop / 190 phone and tablet) and the 3:2 is a * requirement on the SOURCE file, not on the box. A card with no image still * renders — --empty keeps the same box so a row of three stays aligned. * ========================================================================== */ .hp-v4-deeper__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .hp-v4-deeper__card { min-width: 0; display: flex; flex-direction: column; background: var(--gg-petal-mist); transition: transform 250ms cubic-bezier(.22, 1, .36, 1), box-shadow 250ms cubic-bezier(.22, 1, .36, 1); } .hp-v4-deeper__card:hover, .hp-v4-deeper__card:focus-within { transform: translateY(-4px); box-shadow: 0 10px 24px rgb(var(--hpv4-berry) / .10); } .hp-v4-deeper__thumb { display: block; height: 230px; /* L4 26 Oct: was 190 (1c); one card-image height with H14 */ overflow: hidden; background: var(--gg-dawn-pink); /* shows while the image loads, and under --empty */ } .hp-v4-deeper__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .hp-v4-deeper__thumb--empty { background: var(--gg-mulberry-haze); } .hp-v4-deeper__body { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 20px; } .hp-v4-deeper__title { font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.125rem; line-height: 1.3; color: var(--gg-text); margin: 0; } .hp-v4-deeper__text { font-size: 0.875rem; line-height: 1.5; color: var(--gg-text); margin: 8px 0 12px; } .hp-v4-deeper__link { color: var(--gg-berry); text-decoration: underline; font-size: 0.875rem; font-weight: 500; margin-top: auto; display: inline-flex; align-items: center; min-height: var(--gg-tap-min); } /* ========================================================================== * H10 — meet Maria. Square split on Tint A, portrait left, prose right, with * a pull quote carrying a 3px Rose Clay left rule. Same padding treatment as * H5: the section gives up its vertical padding so the band is the split. * ========================================================================== */ .hp-module.hp-v4-maria { padding-top: 0; padding-bottom: 0; } .hp-v4-maria__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; } .hp-v4-maria__media { min-width: 0; height: 300px; overflow: hidden; } /* 1c */ .hp-v4-maria__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .hp-v4-maria__body { min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 28px 0 36px; } .hp-v4-maria__quote { font-family: var(--gg-font-heading); font-size: 1.1875rem; /* 19px, 1c */ line-height: 1.35; color: var(--gg-berry); border-left: 3px solid var(--gg-rose-clay); padding-left: 16px; margin: 0; } /* Works whether the template prints a wrapper or the anchor itself. */ .hp-v4-maria__cta { margin-top: 6px; align-self: flex-start; } /* ========================================================================== * H11 — practitioners. P8: ONE ROW OF N. The template sets --hpv4-n on the * row; N is 2, 3 or 4 and the row never wraps to a 2+1. * * 390 is the one sanctioned break — a row of four there would mean 80px * avatars — so the base rule is a hard 2x2 at 96px and the repeat(var(…)) * one-row rule lives in both step blocks. Children are the shared .hp-pcard; * every rule below is scoped to the row so the pillar/practice pages that * also render .hp-pcard are untouched. * ========================================================================== */ .hp-v4-prac__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } /* One or two practitioners (27 Oct, Diego): cards keep the width they have in a full row and the row * centres. The template adds --few for N <= 2; here that is the 2-up half width (12px = one gap). */ .hp-v4-prac__row--few { grid-template-columns: repeat(var(--hpv4-n, 2), calc((100% - 12px) / 2)); justify-content: center; } .hp-v4-prac__row .hp-pcard { min-width: 0; align-items: center; text-align: center; gap: 12px; background: var(--gg-white); border: 1px solid var(--gg-mulberry-haze); padding: 18px; } /* The 120px avatar token is the desktop size; 390 and 1024 step down, which * is why this overrides --gg-avatar-size here rather than reading it. */ .hp-v4-prac__row .hp-pcard__avatar { width: 96px; height: 96px; margin-bottom: 0; } .hp-v4-prac__row .hp-pcard__name { font-size: 1rem; line-height: 1.3; } .hp-v4-prac__row .hp-pcard__role { font-size: 0.78125rem; /* 12.5px, 1c */ line-height: 1.4; color: var(--gg-text-muted); margin: 5px 0 0; } .hp-v4-prac__row .hp-pcard__link { margin-top: auto; min-height: var(--gg-tap-min); display: inline-flex; align-items: center; } /* ADDED, not in the contract's H11 list: artboard 1a ends the module with a * "Meet Our Practitioners" link under the row. Reported. */ /* ROUND 6, 2026-09-17 — Diego: "Meet Our Practitioners →: that's the only arrow * that still shows underline." It was, and this block is why. Round 5 moved the * underline off every link and onto the .hp-v4-link-label span inside it, then * pinned the six links to `text-decoration: none !important` — but THIS * selector is the

AROUND the link, not the link, so it was not in that * list. A decoration drawn by an ancestor propagates down and cannot be removed * by a descendant: the `none !important` on .hp-v4-prac__link was powerless * against its own parent, and the round-5 browser check read the LINK's * computed text-decoration-line (correctly `none`) and passed. The paragraph * draws none now; the label span underlines, like the other five. */ .hp-v4-prac__all { display: block; width: fit-content; margin: 16px auto 0; color: var(--gg-berry); font-size: 0.875rem; font-weight: 500; } /* ========================================================================== * H12 — testimonials. Four white cards on Tint B, Tenor Sans quote, muted * disclaimer centred below. The quote is a

, so its margin is set * explicitly — the UA margin would break the card rhythm. * ========================================================================== */ .hp-v4-quotes__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .hp-v4-quotes__card { min-width: 0; display: flex; flex-direction: column; background: var(--gg-white); padding: 22px; } .hp-v4-quotes__tag { display: block; font-family: var(--gg-font-heading); font-size: 0.65625rem; /* 10.5px, 1c */ letter-spacing: 0.14em; text-transform: uppercase; color: var(--gg-mulberry); } .hp-v4-quotes__quote { font-family: var(--gg-font-heading); font-size: 1.125rem; /* 18px, 1c */ line-height: 1.35; color: var(--gg-berry); margin: 12px 0; } .hp-v4-quotes__who { font-size: 0.78125rem; line-height: 1.4; color: var(--gg-text-muted); margin-top: auto; /* attributions on one baseline across the row */ } .hp-v4-quotes__disclaimer { font-size: 0.8125rem; line-height: 1.45; color: var(--gg-text-muted); text-align: center; margin: 18px 0 0; } /* ========================================================================== * H13 — membership. Locked to hp-bg-berry by the template: band 2 of 2, and * the page's one big CTA. * * Everything inside is legible on berry: white heading (healing-paths already * flips .hp-h2 on .hp-bg-berry), Dawn body copy, Cream eyebrow and note. * The Gold box is the ONE literal rgba(255,255,255,…) in this sheet — a * translucency over berry, not a palette colour, exactly as the contract * sanctions. * * ROUND 5, 2026-09-17 — Diego: "Lose the background in the square with * bullets. Keep the border. For the primary CTA, it'll be light background * with high contrast now that there's no more cream color." So the Gold box is * a hairline only, and the primary button is WHITE with berry text (9.7:1). * What keeps it from reading as a second surface is that it is a filled * rectangle beside an outlined one — the ghost button next to it is the contrast. * ========================================================================== */ /* Beats .hp-bg-berry p (0,1,1) and the v4 module-eyebrow rule (0,2,0). */ .hp-bg-berry .hp-v4-member__inner .hp-eyebrow { color: var(--gg-cream); } .hp-v4-member__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; } .hp-v4-member__body { min-width: 0; display: flex; flex-direction: column; gap: 16px; } .hp-bg-berry .hp-v4-member__box { min-width: 0; background: transparent; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--gg-radius); padding: 22px; } .hp-v4-member__box-title { font-family: var(--gg-font-heading); font-weight: 400; font-size: 1.1875rem; /* 19px, 1c */ line-height: 1.3; color: var(--gg-text-on-dark); margin: 0 0 12px; } .hp-v4-member__list { list-style: disc; margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; } .hp-v4-member__list-item { min-width: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--gg-dawn-pink); /* Dawn is the palette's body copy on berry */ } .hp-v4-member__actions { display: flex; flex-direction: column; gap: 10px; } /* THE PRIMARY BUTTON ON BERRY — white, berry text (was Cream until * 2026-09-17). The :not()s keep the rule off whichever outlined secondary the * template prints beside it — the contract's selector alone would paint both * buttons, since the secondary also carries .hp-btn. */ .hp-bg-berry .hp-v4-member__actions .hp-btn:not(.hp-btn--on-berry):not(.hp-btn--ghost) { background: var(--gg-white); color: var(--gg-berry) !important; border-color: var(--gg-white); } .hp-bg-berry .hp-v4-member__actions .hp-btn:not(.hp-btn--on-berry):not(.hp-btn--ghost):hover, .hp-bg-berry .hp-v4-member__actions .hp-btn:not(.hp-btn--on-berry):not(.hp-btn--ghost):focus-visible { background: var(--gg-dawn-pink); border-color: var(--gg-dawn-pink); } /* …and the ghost variant, should the template use it here rather than * .hp-btn--on-berry. (0,4,0), so it cannot lose to the light-ground ghost. */ .hp-bg-berry .hp-v4-member__actions .hp-btn.hp-btn--ghost { background: transparent; color: var(--gg-text-on-dark) !important; border-color: var(--gg-white); } .hp-bg-berry .hp-v4-member__actions .hp-btn.hp-btn--ghost:hover, .hp-bg-berry .hp-v4-member__actions .hp-btn.hp-btn--ghost:focus-visible { background: var(--gg-petal-mist); color: var(--gg-berry) !important; border-color: var(--gg-petal-mist); } .hp-v4-member__note { font-family: var(--gg-font-heading); font-size: 1rem; line-height: 1.45; color: var(--gg-cream); margin: 4px 0 0; } /* ========================================================================== * H14 — editorial. Three article cards on Tint A, white band. * * The cards are the shared .hp-vcard from template-parts/healing/video-card.php * (CONTRACT CORRECTED 2026-09-14 — an earlier draft named .hp-card, which * nothing here emits). Its internals — __link, __thumb, __body, __eyebrow, * __title, __mins, __duration — are already styled in healing-paths.css and * are NOT restyled: v4 sets the grid, the head row, and the one thing the * designer specified differently, the thumb height (210 at 1440 / 180 at 390 * against the shared card's 16:9). .hp-bg-white .hp-vcard already tints the * card to Petal Mist on a white band, which is the artboard's Tint A fill. * ========================================================================== */ .hp-v4-editorial__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 18px; } .hp-v4-editorial__all { color: var(--gg-berry); text-decoration: underline; font-size: 0.875rem; font-weight: 500; display: inline-flex; align-items: center; min-height: var(--gg-tap-min); } .hp-v4-editorial__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .hp-v4-editorial__grid .hp-vcard { min-width: 0; } /* aspect-ratio off, then a height: the shared card is 16:9 and the designer * drew a shallower crop. (0,2,0) beats .hp-vcard__thumb (0,1,0). */ .hp-v4-editorial__grid .hp-vcard__thumb { aspect-ratio: auto; height: 230px; /* L4 26 Oct: was 180 (1c); same height as H9 */ } /* L4: blog featured images are square, so a landscape box crops top and bottom; * hold the crop high so heads stay in. */ .hp-v4-editorial__grid .hp-vcard__thumb img { object-position: 50% 30%; } /* Card eyebrows are Mulberry, not the module Berry — (0,3,0), so it beats the * v4 module-eyebrow rule (0,2,0) without relying on order. */ .hp-v4-editorial__grid .hp-vcard .hp-vcard__eyebrow { color: var(--gg-mulberry); } /* ========================================================================== * H15 — newsletter. Tint A band, square fields with a Rose Clay border and a * berry submit. Joined row at 1440, stacked full-width at 390. * When a shortcode is configured the template prints it inside __embed * instead — that container only gets a measure and an overflow floor, so it * does not fight whatever the plugin emits. * ========================================================================== */ .hp-module.hp-v4-news { padding-top: 40px; padding-bottom: 40px; } /* 1c */ .hp-v4-news__form { display: flex; flex-direction: column; gap: 10px; } .hp-v4-news__field { box-sizing: border-box; width: 100%; min-width: 0; border: 1px solid var(--gg-rose-clay); border-radius: var(--gg-radius); background: var(--gg-white); color: var(--gg-text); font-family: var(--gg-font-body); font-size: 0.9375rem; line-height: 1.4; padding: 14px 16px; min-height: var(--gg-tap-min); } .hp-v4-news__field:focus-visible { outline: var(--gg-focus-ring); outline-offset: 2px; } .hp-v4-news__submit { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; min-height: var(--gg-tap-min); background: var(--gg-berry); color: var(--gg-text-on-dark); font-family: var(--gg-font-heading); font-size: 0.875rem; letter-spacing: 0.04em; padding: 15px 20px; border: 1px solid var(--gg-berry); border-radius: var(--gg-radius); cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease; } .hp-v4-news__submit:hover, .hp-v4-news__submit:focus-visible { background: var(--gg-mulberry); border-color: var(--gg-mulberry); } .hp-v4-news__embed { min-width: 0; max-width: 660px; } /* ========================================================================== * H16 — FAQ. Rendered by the shared gg_hp_render_faq() into .hp-faq / * .hp-faq__item / .hp-faq__q / .hp-faq__a, all already styled in * healing-paths.css as native details/summary. v4 constrains the MEASURE and * nothing else — the panels are not restyled, per the contract. * (0,2,0) beats .hp-faq__inner's own max-width (0,1,0). * ========================================================================== */ .hp-v4-faq .hp-faq__inner { max-width: 900px; margin-left: auto; margin-right: auto; } /* ========================================================================== * STEP 1 — the 1024 artboard (1b). Same query form as healing-paths.css. * Modules in H-order. Only what the artboard actually changes: most modules * just drop columns here, and 1b says so in its own footnote. * ========================================================================== */ @media (min-width: 768px) and (max-width: 1023px) { /* Centred module heads — H4, H6, H9, H11, H12, H16. */ .hp-v4-needs__inner > .hp-eyebrow, .hp-v4-needs__inner > .hp-h2, .hp-v4-needs__inner > .hp-lede, .hp-v4-paths__inner > .hp-eyebrow, .hp-v4-paths__inner > .hp-h2, .hp-v4-paths__inner > .hp-lede, .hp-v4-deeper__inner > .hp-eyebrow, .hp-v4-deeper__inner > .hp-h2, .hp-v4-deeper__inner > .hp-lede, .hp-v4-prac__inner > .hp-eyebrow, .hp-v4-prac__inner > .hp-h2, .hp-v4-prac__inner > .hp-lede, .hp-v4-quotes__inner > .hp-eyebrow, .hp-v4-quotes__inner > .hp-h2, .hp-v4-quotes__inner > .hp-lede, .hp-v4-faq__inner > .hp-eyebrow, .hp-v4-faq__inner > .hp-h2, .hp-v4-faq__inner > .hp-lede { text-align: center; margin-left: auto; margin-right: auto; } /* H2 — hero. 520h, the curve appears and takes 66%, copy 420 at 64. */ .hp-module.hp-v4-hero { height: 520px; --hpv4-inset: 64px; } .hp-v4-hero .hp-v4-hero__curve { display: block; width: 66%; } .hp-v4-hero .hp-v4-hero__media { position: absolute; inset: 0; height: auto; } .hp-v4-hero .hp-v4-hero__copy { position: absolute; left: var(--hpv4-inset); right: auto; top: 50%; transform: translateY(-50%); width: 420px; max-width: calc(100% - var(--hpv4-inset) * 2); flex: none; gap: 16px; padding: 0; } .hp-module.hp-v4-hero .hp-v4-hero__title { font-size: 2.25rem; line-height: 1.15; } /* 36px */ .hp-v4-hero .hp-v4-hero__eyebrow { font-size: 0.6875rem; letter-spacing: 0.2em; } .hp-v4-hero .hp-v4-hero__lead { font-size: 0.96875rem; } /* 15.5px */ .hp-v4-hero .hp-v4-hero__actions { align-items: flex-start; } .hp-v4-hero .hp-v4-hero__actions .hp-btn { display: inline-block; } /* Slide 3: side scrim (100deg) under a 110px top wash, copy bottom-left. * top/transform are reset explicitly — the rule above is a lower * specificity but sets both, and this slide must not be vertically centred. */ /* Side scrim (100deg): .82 → .55 at 42% → .08 at 75% (unchanged values), * stated as overlay numbers; the 110px top wash stays this hero's own. */ .hp-v4-hero { --gg-ov-is-phone: 0; --gg-ov-angle: 100deg; --gg-ov-f1: .42; --gg-ov-k1: .6707; --gg-ov-f2: .585; --gg-ov-k2: .3841; --gg-ov-f3: .75; --gg-ov-k3: .0976; } .hp-v4-hero .hp-v4-hero__scrim::before { content: ""; position: absolute; inset: 0 0 auto; height: 110px; background: linear-gradient(rgb(var(--gg-ov-rgb) / .28), transparent); } .hp-v4-hero .hp-v4-hero__slide[data-layout="fullbleed"] .hp-v4-hero__copy { left: var(--hpv4-inset); right: auto; top: auto; transform: none; bottom: 96px; width: auto; max-width: 540px; gap: 14px; padding: 0; } .hp-v4-hero .hp-v4-hero__controls { left: var(--hpv4-inset); right: auto; bottom: 32px; gap: 12px; } .hp-v4-hero .hp-v4-hero__arrow { display: grid; } .hp-v4-hero .hp-v4-hero__bars { flex: none; gap: 8px; } .hp-v4-hero .hp-v4-hero__bar { flex: none; width: 62px; } /* H3 — proof: 4-up. */ .hp-v4-proof .hp-v4-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } /* H4 — P5 becomes 2+2+1, the fifth card centred, never left-orphaned. */ .hp-v4-needs .hp-v4-needs__grid { gap: 18px; } .hp-v4-needs .hp-v4-needs__card { flex: 0 0 calc(50% - 9px); padding: 24px; } .hp-v4-needs .hp-v4-needs__roundel { width: 48px; height: 48px; } .hp-v4-needs .hp-v4-needs__need { font-size: 1.1875rem; } .hp-v4-needs .hp-v4-needs__explore { font-size: 0.90625rem; margin: 10px 0 16px; } .hp-v4-needs .hp-v4-needs__quiz { grid-template-columns: minmax(0, 1fr) auto; padding: 22px 26px; } .hp-v4-needs .hp-v4-needs__quiz-title { grid-column: 1; grid-row: 1; } .hp-v4-needs .hp-v4-needs__quiz-note { grid-column: 1; grid-row: 2; } .hp-v4-needs .hp-v4-needs__quiz .hp-btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-top: 0; white-space: nowrap; } /* H5 — stays a 50/50 split; the points stay 2x2. */ .hp-v4-diff .hp-v4-diff__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hp-v4-diff .hp-v4-diff__media { height: auto; min-height: 480px; } .hp-v4-diff .hp-v4-diff__body { justify-content: center; padding: 40px 0 40px 32px; } .hp-v4-diff .hp-v4-diff__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* H6 — 3+2 becomes 2+2+1. The card turns into a column here: roundel * above the kicker, and margin-top:auto on the link gets a flex context * so a row of cards shows its links on one baseline. */ .hp-v4-paths .hp-v4-paths__grid { gap: 18px; } .hp-v4-paths .hp-v4-paths__card { flex: 0 0 calc(50% - 9px); display: flex; flex-direction: column; padding: 24px; } .hp-v4-paths .hp-v4-paths__roundel { width: 56px; height: 56px; margin-bottom: 14px; } .hp-v4-paths .hp-v4-paths__roundel svg { width: 23px; height: 23px; } .hp-v4-paths .hp-v4-paths__kicker { font-size: 0.6875rem; } .hp-v4-paths .hp-v4-paths__title { font-size: 1.1875rem; margin: 8px 0 0; } .hp-v4-paths .hp-v4-paths__text { font-size: 0.90625rem; margin: 10px 0 16px; } /* H7 — stays 3-up. */ .hp-v4-start .hp-v4-start__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .hp-v4-start .hp-v4-start__step { padding: 24px; } /* H8 — 4 becomes 2x2. */ .hp-v4-eco .hp-v4-eco__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .hp-v4-eco .hp-v4-eco__card { padding: 24px; } /* H9 — stays 3-up, thumb 190h (unchanged from base). */ .hp-v4-deeper .hp-v4-deeper__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .hp-v4-deeper .hp-v4-deeper__body { padding: 22px; } /* H10 — stays split at 1fr/1fr, portrait min 480. */ .hp-v4-maria .hp-v4-maria__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hp-v4-maria .hp-v4-maria__media { height: auto; min-height: 480px; } .hp-v4-maria .hp-v4-maria__body { justify-content: center; padding: 40px 0 40px 32px; gap: 16px; } /* H11 — P8 holds from here up: one row of N, avatar 104. */ .hp-v4-prac .hp-v4-prac__row { grid-template-columns: repeat(var(--hpv4-n, 4), minmax(0, 1fr)); gap: 16px; margin-top: 22px; } .hp-v4-prac .hp-v4-prac__row--few { grid-template-columns: repeat(var(--hpv4-n, 2), calc((100% - 48px) / 4)); justify-content: center; } /* 4-up width */ .hp-v4-prac .hp-pcard__avatar { width: 104px; height: 104px; } /* H12 — 4 becomes 2x2. */ .hp-v4-quotes .hp-v4-quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .hp-v4-quotes .hp-v4-quotes__card { padding: 24px; } /* H13 — stacks: prose first, Gold box second. The box list goes 2-col * here; it is a single column at both 390 and 1440. */ .hp-v4-member .hp-v4-member__grid { gap: 28px; } .hp-bg-berry .hp-v4-member .hp-v4-member__box { padding: 28px; } .hp-v4-member .hp-v4-member__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; padding-left: 20px; } .hp-v4-member .hp-v4-member__actions { flex-direction: row; flex-wrap: wrap; gap: 12px; } /* H14 — 3 becomes 2, third card full width (only when it IS the third and * last, so a 2-card or 4-card row is untouched). */ .hp-v4-editorial .hp-v4-editorial__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 24px; } .hp-v4-editorial .hp-v4-editorial__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .hp-v4-editorial .hp-v4-editorial__grid > :nth-child(3):last-child { grid-column: 1 / -1; } .hp-v4-editorial .hp-v4-editorial__all { white-space: nowrap; } /* H15 — module stacks, the field row joins and goes full width. */ .hp-module.hp-v4-news { padding-top: 44px; padding-bottom: 44px; } .hp-v4-news .hp-v4-news__form { flex-direction: row; align-items: stretch; gap: 0; max-width: 660px; } .hp-v4-news .hp-v4-news__field { width: auto; flex: 1 1 auto; } /* One hairline between joined fields instead of two. */ .hp-v4-news .hp-v4-news__field--email { border-left: 0; } .hp-v4-news .hp-v4-news__submit { width: auto; flex: none; padding: 0 22px; white-space: nowrap; } /* H16 — measure drops to 820. */ .hp-v4-faq .hp-faq__inner { max-width: 820px; } } /* ========================================================================== * STEP 2 — the 1440 artboard (1a), the reference drawing. Same query form as * healing-paths.css, so a real 1024-wide viewport gets these rules and the * block above is the 768–1023 band: that mapping is the house convention. * ========================================================================== */ @media (min-width: 1024px) { /* Centred module heads — H4, H6, H9, H11, H12, H16. */ .hp-v4-needs__inner > .hp-eyebrow, .hp-v4-needs__inner > .hp-h2, .hp-v4-needs__inner > .hp-lede, .hp-v4-paths__inner > .hp-eyebrow, .hp-v4-paths__inner > .hp-h2, .hp-v4-paths__inner > .hp-lede, .hp-v4-deeper__inner > .hp-eyebrow, .hp-v4-deeper__inner > .hp-h2, .hp-v4-deeper__inner > .hp-lede, .hp-v4-prac__inner > .hp-eyebrow, .hp-v4-prac__inner > .hp-h2, .hp-v4-prac__inner > .hp-lede, .hp-v4-quotes__inner > .hp-eyebrow, .hp-v4-quotes__inner > .hp-h2, .hp-v4-quotes__inner > .hp-lede, .hp-v4-faq__inner > .hp-eyebrow, .hp-v4-faq__inner > .hp-h2, .hp-v4-faq__inner > .hp-lede { text-align: center; margin-left: auto; margin-right: auto; } /* H2 — hero. 620h, curve back to 58%, copy 560. * The inset is NOT the artboard's flat 120px: 1a is a raw 1440 artboard * with no 1200 container, while on the real site every module's text edge * sits at the .hp-container edge — 140px at 1440. Aligning the hero copy * to that edge, with a 64px floor for narrower desktops, keeps the hero * and the module under it on one left margin at every width. */ .hp-module.hp-v4-hero { height: 620px; --hpv4-inset: max(64px, calc((100% - var(--gg-max-width)) / 2 + var(--gg-gutter))); } .hp-v4-hero .hp-v4-hero__curve { display: block; width: 58%; } .hp-v4-hero .hp-v4-hero__media { position: absolute; inset: 0; height: auto; } .hp-v4-hero .hp-v4-hero__copy { position: absolute; left: var(--hpv4-inset); right: auto; top: 50%; transform: translateY(-50%); width: 560px; max-width: calc(100% - var(--hpv4-inset) * 2); flex: none; gap: 20px; padding: 0; } .hp-module.hp-v4-hero .hp-v4-hero__title { font-size: 2.875rem; line-height: 1.14; } /* 46px */ .hp-v4-hero .hp-v4-hero__eyebrow { font-size: 0.75rem; letter-spacing: 0.22em; } .hp-v4-hero .hp-v4-hero__lead { font-size: 1.0625rem; max-width: 500px; } /* 17px */ .hp-v4-hero .hp-v4-hero__kicker { font-size: 1.0625rem; } .hp-v4-hero .hp-v4-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; } .hp-v4-hero .hp-v4-hero__actions .hp-btn { display: inline-block; } /* Side scrim (100deg): .82 → .55 at 42% → .08 at 75% (unchanged values), * stated as overlay numbers; the 110px top wash stays this hero's own. */ .hp-v4-hero { --gg-ov-is-phone: 0; --gg-ov-angle: 100deg; --gg-ov-f1: .42; --gg-ov-k1: .6707; --gg-ov-f2: .585; --gg-ov-k2: .3841; --gg-ov-f3: .75; --gg-ov-k3: .0976; } .hp-v4-hero .hp-v4-hero__scrim::before { content: ""; position: absolute; inset: 0 0 auto; height: 110px; background: linear-gradient(rgb(var(--gg-ov-rgb) / .28), transparent); } .hp-v4-hero .hp-v4-hero__slide[data-layout="fullbleed"] .hp-v4-hero__copy { left: var(--hpv4-inset); right: auto; top: auto; transform: none; bottom: 112px; width: auto; max-width: 620px; gap: 16px; padding: 0; } .hp-v4-hero .hp-v4-hero__controls { left: var(--hpv4-inset); right: auto; bottom: 40px; gap: 16px; } .hp-v4-hero .hp-v4-hero__arrow { display: grid; } .hp-v4-hero .hp-v4-hero__bars { flex: none; gap: 10px; margin-left: 6px; } .hp-v4-hero .hp-v4-hero__bar { flex: none; width: 76px; } /* H3 — proof. */ .hp-v4-proof .hp-v4-proof__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .hp-v4-proof .hp-v4-proof__figure { font-size: 1.4375rem; } /* 23px */ .hp-v4-proof .hp-v4-proof__label { font-size: 0.78125rem; letter-spacing: 0.08em; } /* 12.5px */ /* H4 — P5 at the 3-column measure: 5 cards render 3+2 centred. */ .hp-v4-needs .hp-v4-needs__grid { gap: 20px; } .hp-v4-needs .hp-v4-needs__card { flex: 0 0 calc(33.333% - 14px); padding: 26px; } .hp-v4-needs .hp-v4-needs__roundel { width: 52px; height: 52px; margin-bottom: 16px; } .hp-v4-needs .hp-v4-needs__need { font-size: 1.25rem; } /* 20px */ .hp-v4-needs .hp-v4-needs__explore { font-size: 0.90625rem; margin: 10px 0 16px; } .hp-v4-needs .hp-v4-needs__quiz { grid-template-columns: minmax(0, 1fr) auto; margin-top: 22px; padding: 22px 26px; } .hp-v4-needs .hp-v4-needs__quiz-title { grid-column: 1; grid-row: 1; font-size: 1.1875rem; } .hp-v4-needs .hp-v4-needs__quiz-note { grid-column: 1; grid-row: 2; } .hp-v4-needs .hp-v4-needs__quiz .hp-btn { grid-column: 2; grid-row: 1 / span 2; justify-self: end; margin-top: 0; white-space: nowrap; } /* H5 — image .95fr / prose 1.05fr. The prose takes only a left inset, so * its right edge stays on the container edge with every other module. */ .hp-v4-diff .hp-v4-diff__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } .hp-v4-diff .hp-v4-diff__media { height: auto; min-height: 560px; } .hp-v4-diff .hp-v4-diff__body { justify-content: center; gap: 18px; padding: 48px 0 48px 48px; } .hp-v4-diff .hp-v4-diff__points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .hp-v4-diff .hp-v4-diff__point { padding: 18px; } .hp-v4-diff .hp-v4-diff__point-title { font-size: 1.0625rem; } /* 17px */ /* H6 — five white cards, 3+2 centred, 64px roundel / 27px glyph. */ .hp-v4-paths .hp-v4-paths__grid { gap: 20px; } .hp-v4-paths .hp-v4-paths__card { flex: 0 0 calc(33.333% - 14px); display: flex; flex-direction: column; padding: 26px; } .hp-v4-paths .hp-v4-paths__roundel { width: var(--gg-roundel-hero-desktop); height: var(--gg-roundel-hero-desktop); margin-bottom: 16px; } .hp-v4-paths .hp-v4-paths__roundel svg { width: 27px; height: 27px; } .hp-v4-paths .hp-v4-paths__kicker { font-size: 0.6875rem; } .hp-v4-paths .hp-v4-paths__title { font-size: 1.25rem; margin: 8px 0 0; } .hp-v4-paths .hp-v4-paths__text { font-size: 0.90625rem; margin: 10px 0 16px; } .hp-v4-paths .hp-v4-paths__all { margin-top: 28px; } /* H7 — 3-up, Rose Clay numeral at 34. */ .hp-v4-start .hp-v4-start__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .hp-v4-start .hp-v4-start__step { padding: 28px; } .hp-v4-start .hp-v4-start__num { font-size: 2.125rem; } /* 34px */ .hp-v4-start .hp-v4-start__title { font-size: 1.25rem; margin: 8px 0 0; } .hp-v4-start .hp-v4-start__text { font-size: 0.9375rem; margin: 10px 0 20px; } /* H8 — 4-up. min-height 230 keeps four short cards from reading as a strip. */ .hp-v4-eco .hp-v4-eco__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .hp-v4-eco .hp-v4-eco__card { padding: 26px; min-height: 230px; } .hp-v4-eco .hp-v4-eco__title { font-size: 1.1875rem; } /* 19px */ .hp-v4-eco .hp-v4-eco__text { font-size: 0.90625rem; margin: 10px 0 18px; } /* H9 — 3-up, thumb 230h. */ .hp-v4-deeper .hp-v4-deeper__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .hp-v4-deeper .hp-v4-deeper__thumb { height: 260px; } /* L4: was 230 */ .hp-v4-deeper .hp-v4-deeper__body { padding: 24px; } .hp-v4-deeper .hp-v4-deeper__title { font-size: 1.25rem; } .hp-v4-deeper .hp-v4-deeper__text { font-size: 0.90625rem; margin: 10px 0 16px; } /* H10 — portrait .8fr / prose 1.2fr, portrait min 600. */ .hp-v4-maria .hp-v4-maria__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .hp-v4-maria .hp-v4-maria__media { height: auto; min-height: 600px; } .hp-v4-maria .hp-v4-maria__body { justify-content: center; gap: 18px; padding: 48px 0 48px 48px; } .hp-v4-maria .hp-v4-maria__quote { font-size: 1.3125rem; /* 21px */ padding-left: 20px; margin-top: 6px; } /* H11 — P8: one row of N, 120px avatar (the --gg-avatar-size token). */ .hp-v4-prac .hp-v4-prac__row { grid-template-columns: repeat(var(--hpv4-n, 4), minmax(0, 1fr)); gap: 20px; margin-top: 26px; } .hp-v4-prac .hp-v4-prac__row--few { grid-template-columns: repeat(var(--hpv4-n, 2), calc((100% - 60px) / 4)); justify-content: center; } /* 4-up width */ .hp-v4-prac .hp-pcard { padding: 24px; gap: 14px; } .hp-v4-prac .hp-pcard__avatar { width: var(--gg-avatar-size); height: var(--gg-avatar-size); } .hp-v4-prac .hp-pcard__name { font-size: 1.125rem; } /* 18px */ .hp-v4-prac .hp-pcard__role { font-size: 0.8125rem; line-height: 1.45; margin: 6px 0 0; } .hp-v4-prac .hp-v4-prac__all { margin-top: 24px; } /* H12 — 4-up, Tenor Sans quote at 19. */ .hp-v4-quotes .hp-v4-quotes__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .hp-v4-quotes .hp-v4-quotes__card { padding: 26px; } .hp-v4-quotes .hp-v4-quotes__tag { font-size: 0.6875rem; } .hp-v4-quotes .hp-v4-quotes__quote { font-size: 1.1875rem; margin: 14px 0; } .hp-v4-quotes .hp-v4-quotes__who { font-size: 0.8125rem; line-height: 1.45; } /* H13 — prose 1.1fr / Gold box .9fr. */ .hp-v4-member .hp-v4-member__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; } .hp-v4-member .hp-v4-member__body { gap: 18px; } .hp-bg-berry .hp-v4-member .hp-v4-member__box { padding: 32px; } .hp-v4-member .hp-v4-member__box-title { font-size: 1.375rem; margin-bottom: 16px; } /* 22px */ .hp-v4-member .hp-v4-member__list { gap: 10px; padding-left: 20px; } .hp-v4-member .hp-v4-member__list-item { font-size: 0.96875rem; } /* 15.5px */ .hp-v4-member .hp-v4-member__actions { flex-direction: row; flex-wrap: wrap; gap: 14px; margin-top: 4px; } .hp-v4-member .hp-v4-member__note { font-size: 1.0625rem; } /* 17px */ /* H14 — head row, three article cards, thumb 210h. */ .hp-v4-editorial .hp-v4-editorial__head { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 30px; margin-bottom: 28px; } .hp-v4-editorial .hp-v4-editorial__all { white-space: nowrap; } .hp-v4-editorial .hp-v4-editorial__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .hp-v4-editorial .hp-v4-editorial__grid .hp-vcard__thumb { height: 260px; } /* L4: was 210 */ /* H15 — copy left, joined field row right. The contract gives H15 no head * wrapper, so the form is placed explicitly in column 2 and the eyebrow / * H2 / lede flow down column 1. row-gap is 0 and the span is 3 — the most * head elements the shared shape allows — so when a module prints fewer, * the leftover implicit rows cost nothing. The text keeps its own margins. */ .hp-module.hp-v4-news { padding-top: 56px; padding-bottom: 56px; } .hp-v4-news .hp-v4-news__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; row-gap: 0; align-items: center; } .hp-v4-news__inner > .hp-eyebrow, .hp-v4-news__inner > .hp-h2, .hp-v4-news__inner > .hp-lede { grid-column: 1; } .hp-v4-news .hp-v4-news__form, .hp-v4-news .hp-v4-news__embed { grid-column: 2; grid-row: 1 / span 3; align-self: center; } .hp-v4-news .hp-v4-news__form { flex-direction: row; align-items: stretch; gap: 0; max-width: none; } .hp-v4-news .hp-v4-news__field { width: 230px; flex: none; } .hp-v4-news .hp-v4-news__field--name { width: 150px; } .hp-v4-news .hp-v4-news__field--email { border-left: 0; } .hp-v4-news .hp-v4-news__submit { width: auto; flex: none; padding: 0 26px; white-space: nowrap; } /* H16 — measure 900. (Base already sets it; repeated so the 820 in the * tablet block cannot leak upward through a reorder.) */ .hp-v4-faq .hp-faq__inner { max-width: 900px; } } /* ========================================================================== * Reduced motion. The hero keeps slide 3's LAYOUT — that is information, not * decoration — and loses only the transitions; js/home-hero-v4.js reads the * same query and drops auto-advance, so the bars become static indicators. * * .hp-v4-hero__fill is deliberately absent from this block. The script writes * its transition inline (0ms under reduced motion), and a rule here would be * one more thing fighting the two inline properties it owns. * ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hp-v4-hero__slide, .hp-v4-hero__scrim, .hp-v4-hero__curve, .hp-v4-hero__arrow, .hp-v4-news__submit, [class*="hp-v4-"] .hp-btn.hp-btn--ghost { transition: none; } .hp-v4-needs__card, .hp-v4-paths__card, .hp-v4-deeper__card { transition: none; } .hp-v4-needs__card:hover, .hp-v4-needs__card:focus-within, .hp-v4-paths__card:hover, .hp-v4-paths__card:focus-within, .hp-v4-deeper__card:hover, .hp-v4-deeper__card:focus-within { transform: none; } } /* ========================================================================== * Theme-bleed overrides — same reason as the two blocks of them in * healing-paths.css. The Elementor kit and BuddyBoss style bare * button/input/h1 selectors at body-level specificity * (`.elementor-kit-7 button { min-width: 227px; padding: 10px !important }`), * and a cascade-order tie does not survive RUCSS inlining. Anything the kit * also targets has to be pinned at body scope here. Each rule says what it is * beating. * ========================================================================== */ /* The hero H1 sits on berry. `body.hp-page .hp-main h1 { color: Berry }` * (0,2,2) is the rule to beat; this is (0,3,2). */ body.hp-page .hp-main .hp-v4-hero__title { color: var(--gg-text-on-dark); } /* Card headings are Soft Black, not the secondary plum — pinned because the * kit styles bare h3 at body level and healing-paths only counters .hp-h3. */ body.hp-page .hp-main .hp-v4-needs__need, body.hp-page .hp-main .hp-v4-paths__title, body.hp-page .hp-main .hp-v4-start__title, body.hp-page .hp-main .hp-v4-eco__title, body.hp-page .hp-main .hp-v4-deeper__title { color: var(--gg-text); } body.hp-page .hp-main .hp-v4-member__box-title { color: var(--gg-text-on-dark); } body.hp-page .hp-main .hp-v4-quotes__quote, body.hp-page .hp-main .hp-v4-maria__quote { color: var(--gg-berry); } /* Hero controls are real