/* ============================================================================ INSTINCTIVE HEALTHPASS — child-theme tokens & devices Deliverable §I.1. Load after Kadence + Elementor so these win on specificity. THREE DOCUMENTS DISAGREE. Resolutions, per the Directive's authority order (Directive → Brand Guidelines v2 → Copy Brief → Language Playbook for language): 1. COLOUR — Directive §C wins. Brand v2 §3 and its §13 token block still carry the retired v1 palette, which Directive D1 supersedes in favour of the live-measured brand customers already recognise. Every ratio below was recomputed, not copied. 2. GEOMETRY — Directive §C.3 wins where it and Brand v2 §4/§5 differ (D3 says so explicitly): card radius 20 not 18, pill 32 not 999, button padding 16x24 not 14x28, H2 38/58 not 32/1.2, body 16/26. Adopting the imported kit's own geometry means not fighting its templates widget by widget. 3. EVERYTHING ELSE — Brand v2 governs: the device library, motion tokens and choreography, component language, elevation as a three-step system. ONE ACCESSIBILITY CORRECTION, applied deliberately: Brand v2 §10/§11 specify a 2px TEAL focus ring. That held for the retired teal (3.7:1 on white). Under §C's teal (#00ABC8) it is 2.74:1 — below the 3:1 WCAG 2.1 SC 1.4.11 requires of a focus indicator. Focus rings therefore use TEAL-INK (#00758A, 5.37:1). This is the same class of fix as §C's hero-contrast rule: the palette moved and a rule written against the old one broke. ========================================================================= */ :root{ /* ---- Colour: Directive §C.1 (canonical) ------------------------------- */ --ihp-navy:#003B71; /* primary ink, headings, ACTION colour 11.27 on white */ --ihp-deep-navy:#00294F; /* dark surfaces; body text on teal 14.68 on white */ --ihp-teal:#00ABC8; /* accent SURFACES only — never text on light, never a button fill */ --ihp-teal-ink:#00758A; /* links, teal text on light, focus rings 5.37 on white */ --ihp-off-white:#F7FAFC; /* page background */ --ihp-white:#FFFFFF; --ihp-ink:#222222; /* body text */ --ihp-slate:#5B6B7A; /* secondary text 5.48 on white */ --ihp-mist:#D9E2E9; /* borders, dividers */ --ihp-amber:#D79A2B; /* CALLOUT BORDERS ONLY — never text, never a button */ --ihp-amber-ink:#8A5E12; /* honesty-notice text 5.69 on white */ --ihp-cream:#FFF6E8; --ihp-success:#1E7A46; --ihp-success-wash:#EAF6EF; --ihp-error:#B42318; --ihp-error-wash:#FCEEEC; --ihp-info:var(--ihp-teal-ink); --ihp-info-wash:#E6F6FA; --ihp-warning:var(--ihp-amber-ink); --ihp-warning-wash:var(--ihp-cream); /* Treatment only — never a standalone fill, never text (§C.1) */ --ihp-grad-hero:linear-gradient(160deg,#00294F 0%,#003B71 70%); --ihp-glow:radial-gradient(closest-side,rgba(0,171,200,.24),transparent 65%); /* ---- Type: Poppins (D2), Directive §C.3 scale ------------------------- */ --ihp-font:'Poppins','Segoe UI',system-ui,-apple-system,Arial,sans-serif; /* Brand v2's fluid clamps, retargeted to §C.3's sizes. The spaces around every "+" are load-bearing. CSS math requires whitespace around + and -, so clamp(2.25rem,1.5rem+2.6vw,3.5rem) is an INVALID declaration — it is dropped silently and the element inherits 16px. That is not a subtle regression: it killed the entire type scale, and the impact odometer, the one element the whole homepage is built around, rendered smaller than the caption beneath it. Found by looking at a browser render, not by reading the file. Do not close these up. */ --ihp-display:clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem); /* Home hero only, one per site */ --ihp-h1:clamp(1.875rem, 1.4rem + 1.7vw, 2.875rem); /* ~46px desktop per §C.3 */ --ihp-h2:clamp(1.625rem, 1.35rem + 1vw, 2.375rem); /* 38px per §C.3 */ --ihp-h3:1.25rem; /* 20/30 per §C.3 */ --ihp-lead:clamp(1.125rem, 1.05rem + .3vw, 1.25rem); --ihp-body:1rem; --ihp-body-lh:1.625; /* 16/26 per §C.3 */ /* One step down, and only one. Components kept reaching for .875rem (14px) for ordinary copy, which is below the §C.3 body size and is what made the pages read as too small. 15px is for metadata — addresses, captions, table cells — never for a sentence a visitor has to read. */ --ihp-body-sm:.9375rem; --ihp-body-sm-lh:1.6; --ihp-body-long:1.125rem; /* blog 18px */ /* ---- Space: Brand v2 §5, 4px base ------------------------------------ */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px; --s-12:48px; --s-16:64px; --s-24:96px; --s-32:128px; /* The 4px scale has gaps, and a gap is not a harmless omission: an undefined var() with no fallback makes the whole declaration invalid, so it is dropped silently. .ihp-sec{padding:var(--s-20) 0} was rendering with no vertical padding at all in every section template. */ --s-5:20px; --s-10:40px; --s-20:80px; --ihp-container:1200px; /* both documents agree */ --ihp-prose:720px; /* ---- Shape: §C.3 geometry -------------------------------------------- */ --r-pill:32px; /* kit value, not Brand v2's 999 */ --r-card:20px; /* kit value, not Brand v2's 18 */ --r-input:12px; --r-chip:8px; /* ---- Elevation ------------------------------------------------------- */ /* E1 is the kit's measured card shadow (§C.3). E2/E3 keep Brand v2's three-step system but re-tinted to the new deep navy — the old tint referenced a retired hex. */ --e1:0 4px 16px rgba(0,0,0,.06); --e2:0 8px 24px rgba(0,41,79,.10); --e3:0 16px 48px rgba(0,41,79,.16); /* ---- Motion: Brand v2 §7 -------------------------------------------- */ --t-fast:150ms; --t-base:250ms; --t-slow:400ms; --t-draw:500ms; --t-odometer:2200ms; --ease-decel:cubic-bezier(.16,1,.3,1); } /* --------------------------------------------------------------------------- Base ------------------------------------------------------------------------ */ body{ font-family:var(--ihp-font); font-size:var(--ihp-body); line-height:var(--ihp-body-lh); color:var(--ihp-ink); background:var(--ihp-off-white); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{font-family:var(--ihp-font);color:var(--ihp-navy);} /* Measure caps, not a hard ceiling. These were 20ch, which is my own addition and not in Directive §C.3 — and it was too tight: a normal section heading broke to three lines mid-phrase, and in Elementor a widget cannot easily undo an element-level max-width. 28ch keeps headings from running the full 1200 container while letting a real headline sit on two lines. Any heading that genuinely needs to be narrow gets .ihp-measure. */ h1{font-size:var(--ihp-h1);font-weight:600;letter-spacing:-.015em;line-height:1.15;max-width:28ch;} h2{font-size:var(--ihp-h2);font-weight:600;letter-spacing:-.01em;line-height:1.28;max-width:28ch;} /* 600, not 500. h3 carries card and feature titles, where 500 next to 16px body copy reads as unstyled rather than as a heading. */ h3{font-size:var(--ihp-h3);font-weight:600;line-height:1.45;} .ihp-measure{max-width:20ch;} h4{font-size:1.25rem;font-weight:600;line-height:1.35;} p{max-width:68ch;} .ihp-display{font-size:var(--ihp-display);font-weight:600;letter-spacing:-.02em;line-height:1.08;} .ihp-lead{font-size:var(--ihp-lead);line-height:1.55;} .ihp-prose{max-width:var(--ihp-prose);font-size:var(--ihp-body-long);} /* 700 is for one emphasised word inside a 600 heading — never a whole headline. */ h1 strong,h2 strong,h3 strong{font-weight:700;} a{color:var(--ihp-teal-ink);} /* --------------------------------------------------------------------------- Dark bands — max two per page on Home, one on interiors (Brand v2 §3) Inside a dark band the ratio inverts: navy field, white text, teal the only accent. ------------------------------------------------------------------------ */ .ihp-dark{background:var(--ihp-deep-navy);color:var(--ihp-white);position:relative;isolation:isolate;} .ihp-dark h1,.ihp-dark h2,.ihp-dark h3,.ihp-dark h4{color:var(--ihp-white);} .ihp-dark p{color:var(--ihp-mist);} .ihp-hero-depth{background:var(--ihp-grad-hero);} .ihp-dark .ihp-glow{position:absolute;inset:0;background:var(--ihp-glow);z-index:-1;pointer-events:none;} /* Nothing casts a shadow inside a dark band — glass borders do that work (Brand v2 §5). */ .ihp-dark .ihp-card,.ihp-dark .ihp-glass{box-shadow:none;} /* THE STANDING TEAL RULE (§C.1). On any teal surface, body text is DEEP NAVY (5.36:1). Navy on teal is 4.11 and is permitted only at >=18px/600. White on teal is 2.74 and is never permitted. */ .ihp-teal-surface{background:var(--ihp-teal);color:var(--ihp-deep-navy);} .ihp-teal-surface h1,.ihp-teal-surface h2, .ihp-teal-surface h3,.ihp-teal-surface p{color:var(--ihp-deep-navy);} .ihp-teal-surface .ihp-navy-lg{color:var(--ihp-navy);font-size:1.125rem;font-weight:600;} /* --------------------------------------------------------------------------- Signature devices (Brand v2 §6) — two to three per screen, maximum ------------------------------------------------------------------------ */ /* 6.1 Kicker */ .ihp-kicker{ font-size:.8125rem;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--ihp-teal-ink); margin:0 0 var(--s-3); } .ihp-dark .ihp-kicker{color:var(--ihp-teal);} /* teal as text is fine on a dark field */ /* 6.2 Drawn keyline — the brand's pulse */ .ihp-keyline{ width:48px;height:3px;background:var(--ihp-teal); transform:scaleX(0);transform-origin:left; transition:transform var(--t-draw) var(--ease-decel); margin-bottom:var(--s-3); } .in-view .ihp-keyline,.ihp-keyline.ihp-is-drawn{transform:scaleX(1);} /* 6.3 Amber callout — honesty moments only: eligibility limits, exclusions, not-insurance clarifiers. Never promotions, tips, or celebration. Amber's meaning is a compliance asset (Brand v2 §6.3 / Playbook). */ .ihp-callout{ background:var(--ihp-cream); border-left:3px solid var(--ihp-amber); border-radius:var(--r-input); padding:var(--s-4) var(--s-6); /* On the element, not only on a descendant p. /our-program/ puts its callout text directly inside this div with no paragraph around it, so a colour that lives on `.ihp-callout p` does not reach it — and the cream ground is fixed, so text inheriting a dark section's white would vanish. */ color:var(--ihp-ink); } .ihp-callout .ihp-callout-title{ color:var(--ihp-amber-ink);font-weight:600;font-size:.875rem;margin:0 0 var(--s-2); } .ihp-callout p{color:var(--ihp-ink);margin:0;} /* 6.4 Glass card — dark bands only */ .ihp-dark .ihp-glass{ background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.18); border-radius:var(--r-card);padding:var(--s-6); } /* 6.5 Dot grid — atmosphere, not pattern; masked so it never reaches an edge */ .ihp-dotgrid::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.04) 2px,transparent 2px); background-size:24px 24px; -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent 100%); mask-image:radial-gradient(closest-side,#000 55%,transparent 100%); } /* 6.6 Receipt rule — dashed, and ONLY inside itemised truth tables: what's included / what's not, pricing line items, calculator breakdowns. It is meaningful, so it stays scarce. Solid mist everywhere else. */ .ihp-receipt-rule{border:0;border-top:1px dashed var(--ihp-mist);margin:var(--s-3) 0;} hr{border:0;border-top:1px solid var(--ihp-mist);} /* 6.7 Impact odometer — flagship, Home only, one per page. Poppins ships proportional figures and no tabular table, so each digit needs a fixed-width cell or the number visibly wiggles as it rolls. */ .ihp-odometer{ font-size:var(--ihp-display);font-weight:600;color:var(--ihp-white); line-height:1.05;letter-spacing:-.02em; } .ihp-odometer .ihp-digit{display:inline-block;width:.62em;text-align:center;} .ihp-odometer .ihp-sep{display:inline-block;} /* $ and , are static */ .ihp-odometer-caption{font-size:.8125rem;color:var(--ihp-mist);margin-top:var(--s-2);} /* The footnote is part of the device and never separates from the number. */ .ihp-odometer-footnote{font-size:.8125rem;line-height:1.5;color:var(--ihp-mist);max-width:68ch;} /* =========================================================================== SECTION COMPONENTS (Healthca compositions, reskinned) Added for the Elementor section templates in wp/elementor-templates/. EVERY class here is `ihp-` prefixed, deliberately. The static mock uses short names — .wrap, .ihp-card, .grid, .stat, .label — which is safe in a standalone file and would be reckless here: this stylesheet loads alongside Kadence, Elementor and ElementsKit, and `.ihp-card`, `.grid`, `.center` and `.label` are exactly the names all three of them reach for. A collision would not error, it would silently restyle somebody else's widget. These are the compositions that give the kit its character, catalogued from a local render of the Healthca homepage rather than from memory: inset rounded panels, a nav inside the hero, a label bar overlapping a card image, one dark tile among light ones, arrow-suffixed buttons. ======================================================================== */ /* --- layout scaffolding ------------------------------------------------- */ .ihp-wrap{max-width:1200px;margin:0 auto;padding:0 24px;} .ihp-sec{padding:var(--s-20) 0;} .ihp-grid{display:grid;gap:var(--s-6);} /* minmax(0,1fr), never plain 1fr: `1fr` is `minmax(auto,1fr)`, so one long unbreakable string sets the column's floor and the track refuses to shrink. A 34-character email address in a footer column did exactly that and pushed 40px of horizontal scroll onto every page. */ .ihp-g2{grid-template-columns:repeat(2,minmax(0,1fr));} .ihp-g3{grid-template-columns:repeat(3,minmax(0,1fr));} .ihp-g4{grid-template-columns:repeat(4,minmax(0,1fr));} @media (max-width:900px){.ihp-g2,.ihp-g3,.ihp-g4{grid-template-columns:minmax(0,1fr);}} /* Centring text is not centring the box. The theme constrains p to 68ch and h1/h2 to 28ch, so a centred block with no auto margins sits flush left and centres its text inside that narrow box — hundreds of pixels off on a wide screen, and invisible on mobile where the box fills the viewport. Both, always. */ .ihp-center{text-align:center;} .ihp-center>p,.ihp-center>h2,.ihp-center>h3,.ihp-center>div{margin-left:auto;margin-right:auto;} /* Tinted sections are INSET ROUNDED BLOCKS on white, not full-bleed bands. This is most of why the kit reads as panelled rather than striped. */ .ihp-panel{background:var(--ihp-off-white);border-radius:28px;margin:0 20px; padding:var(--s-20) 0;} @media (max-width:700px){.ihp-panel{margin:0 8px;border-radius:18px;}} /* --- section headers ---------------------------------------------------- */ .ihp-eyebrow{font-size:.8125rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--ihp-teal-ink);text-align:center; margin:0 auto 10px;max-width:none;} .ihp-eyebrow--left{text-align:left;margin-left:0;margin-right:0;} .ihp-sec-title{text-align:center;margin:0 auto var(--s-6);max-width:26ch;} .ihp-sec-lead{text-align:center;max-width:70ch;margin:0 auto var(--s-12); font-size:var(--ihp-lead);line-height:1.6;color:var(--ihp-slate);} /* --- buttons ------------------------------------------------------------ */ /* Kit device: the trailing arrow. */ .ihp-btn.ihp-arrow::after{content:"\2192";margin-left:10px;font-weight:400;} /* Kit device: a circular icon button beside the primary CTA. */ .ihp-iconbtn{width:52px;height:52px;border-radius:50%;background:var(--ihp-teal); color:var(--ihp-deep-navy);display:grid;place-items:center;flex:0 0 auto;} .ihp-iconbtn svg{width:22px;height:22px;} .ihp-btnrow{display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center; margin-top:var(--s-6);} .ihp-btnrow--center{justify-content:center;} /* --- circular icon badge ------------------------------------------------ */ .ihp-badge{width:52px;height:52px;border-radius:50%;background:var(--ihp-navy); color:var(--ihp-white);display:grid;place-items:center;flex:0 0 auto; font-weight:700;font-size:1.125rem;} .ihp-badge svg{width:24px;height:24px;} .ihp-badge--teal{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);} /* --- card with a label bar overlapping the image ------------------------ */ /* Cards in a row must align internally, not merely share an outer height: flex column with the action pinned by margin-top:auto puts every "Learn more" on the same baseline whatever the copy above it does. */ .ihp-svc{background:var(--ihp-white);border:1px solid var(--ihp-mist); border-radius:var(--r-card);box-shadow:var(--e1);overflow:hidden; display:flex;flex-direction:column;} .ihp-svc__pic{position:relative;} .ihp-svc__pic img{width:100%;height:200px;object-fit:cover;display:block;} .ihp-svc__label{position:absolute;left:22px;right:22px;bottom:-22px; background:var(--ihp-navy);color:var(--ihp-white);border-radius:14px; padding:15px 18px;font-weight:600;font-size:1.0625rem;text-align:center; box-shadow:0 12px 28px rgba(0,41,79,.28);} .ihp-svc__body{padding:calc(var(--s-8) + 8px) var(--s-6) var(--s-6); text-align:center;display:flex;flex-direction:column;flex:1 1 auto;} .ihp-svc__body p{margin:0 0 var(--s-5);font-size:1rem;line-height:1.6; color:var(--ihp-slate);max-width:none;} .ihp-more{color:var(--ihp-teal-ink);font-weight:600;font-size:1rem; text-decoration:none;margin-top:auto;} .ihp-more::after{content:"\2192";margin-left:8px;} /* --- image with a floating card overlapping its lower edge -------------- */ .ihp-figcard{position:relative;} .ihp-figcard>img{border-radius:var(--r-card);width:100%;height:440px; object-fit:cover;display:block;} .ihp-figcard__badge{position:absolute;left:24px;right:24px;bottom:-28px; background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,250,252,.97)); border-radius:16px;box-shadow:0 18px 44px rgba(0,41,79,.18);padding:var(--s-5); display:flex;gap:var(--s-4);align-items:flex-start;} .ihp-figcard__badge h3{margin:0 0 5px;font-size:1.0625rem;color:var(--ihp-navy);} .ihp-figcard__badge p{margin:0;font-size:1rem;line-height:1.55; color:var(--ihp-slate);max-width:none;} /* --- stat tiles: one dark among light ---------------------------------- */ .ihp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-4);} @media (max-width:800px){.ihp-stats{grid-template-columns:minmax(0,1fr);}} .ihp-stat{border-radius:18px;padding:var(--s-6);background:var(--ihp-off-white); display:flex;flex-direction:column;} .ihp-stat__n{font-size:1.5rem;font-weight:700;color:var(--ihp-navy); line-height:1.2;margin:var(--s-4) 0 var(--s-3);max-width:none;} .ihp-stat__label{margin:0;font-size:1rem;line-height:1.5;color:var(--ihp-slate); max-width:none;} .ihp-stat--dark{background:var(--ihp-navy);} .ihp-stat--dark .ihp-stat__n{color:var(--ihp-white);} .ihp-stat--dark .ihp-stat__label{color:rgba(255,255,255,.86);} .ihp-stat--dark .ihp-badge{background:rgba(255,255,255,.14);} /* --- feature row -------------------------------------------------------- */ .ihp-feat{display:flex;gap:var(--s-4);align-items:flex-start;} .ihp-feat+.ihp-feat{margin-top:var(--s-6);} .ihp-feat h3{margin:0 0 6px;font-size:1.0625rem;} .ihp-feat p{margin:0;font-size:1rem;line-height:1.6;color:var(--ihp-slate); max-width:none;} /* Two feature columns flanking a centre image, inner edges aligned inward. */ .ihp-feat-col--right{text-align:right;} .ihp-feat-col--right .ihp-feat{flex-direction:row-reverse;} @media (max-width:1000px){ .ihp-feat-col--right{text-align:left;} .ihp-feat-col--right .ihp-feat{flex-direction:row;} } /* --- truth table (the Receipt Rule lives here, and only here) ----------- */ .ihp-truth{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6);} @media (max-width:900px){.ihp-truth{grid-template-columns:minmax(0,1fr);}} .ihp-truth ul{list-style:none;padding:0;margin:0;} .ihp-truth li{padding:11px 0;border-top:1px dashed var(--ihp-mist); font-size:1rem;display:flex;gap:10px;align-items:flex-start;} .ihp-truth li:first-child{border-top:0;} .ihp-truth .ihp-in::before{content:"\2713";color:var(--ihp-teal-ink); font-weight:700;flex:0 0 auto;} .ihp-truth .ihp-out::before{content:"\2014";color:var(--ihp-slate); font-weight:700;flex:0 0 auto;} /* --- status pill -------------------------------------------------------- */ .ihp-pill{display:inline-block;border-radius:var(--r-pill);padding:4px 13px; font-size:.75rem;font-weight:700;letter-spacing:.03em;} .ihp-pill--open{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);} .ihp-pill--planned{background:#FDF3E3;color:#8A5A00;} /* --- video facade (no third-party player until click) ------------------- */ .ihp-vid{position:relative;border-radius:var(--r-card);overflow:hidden; background:var(--ihp-deep-navy);} .ihp-vid img{height:186px;object-fit:cover;width:100%;opacity:.66;display:block;} .ihp-vid__play{position:absolute;top:0;left:0;right:0;height:186px; display:grid;place-items:center;} .ihp-vid__play span{width:58px;height:58px;border-radius:50%; background:rgba(255,255,255,.94);display:grid;place-items:center; color:var(--ihp-navy);font-size:18px;padding-left:4px;} .ihp-vid__cap{padding:var(--s-4) var(--s-5);color:var(--ihp-white); font-weight:600;font-size:1rem;margin:0;max-width:none;} /* --- CTA card overlapping the footer's top edge ------------------------- */ .ihp-ctacard{position:relative;z-index:2;margin:0 20px -110px;border-radius:24px; background:linear-gradient(120deg,#E8F6FA 0%,#F7FAFC 60%); padding:var(--s-10) clamp(24px,4vw,56px); box-shadow:0 26px 60px rgba(0,41,79,.16); display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:var(--s-8);align-items:center;} @media (max-width:900px){ .ihp-ctacard{grid-template-columns:minmax(0,1fr);margin:0 8px -120px;} .ihp-ctacard__art{display:none;} } .ihp-ctacard h2{margin:0 0 10px;} .ihp-ctacard__art{border-radius:18px;overflow:hidden;} .ihp-ctacard__art img{width:100%;height:210px;object-fit:cover;display:block;} /* The footer needs room for the card that overlaps it. */ .ihp-footer--overlapped{padding-top:calc(110px + var(--s-16));} /* --- utility strip above the hero -------------------------------------- */ .ihp-util{font-size:.8125rem;color:var(--ihp-navy);} .ihp-util .ihp-wrap{display:flex;gap:var(--s-6);align-items:center; justify-content:space-between;padding-top:14px;padding-bottom:14px; flex-wrap:wrap;} .ihp-util a{color:var(--ihp-navy);} .ihp-open247{display:inline-flex;align-items:center;gap:8px; color:var(--ihp-teal-ink);font-weight:700;} /* Inline SVG with no intrinsic size fills its container at the default 300x150 replaced-element box. Every icon needs an explicit one. */ .ihp-open247 svg{width:18px;height:18px;flex:0 0 auto;} /* --------------------------------------------------------------------------- Components (Brand v2 §10) ------------------------------------------------------------------------ */ .ihp-btn{ display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2); font-family:var(--ihp-font);font-size:1rem;font-weight:600;letter-spacing:.01em; padding:16px 24px; /* §C.3 */ border-radius:var(--r-pill);min-height:44px;border:0;cursor:pointer; text-decoration:none; transition:background var(--t-fast) ease-out,color var(--t-fast) ease-out; } /* Navy is the action colour. Teal is NEVER a button fill — white on teal is 2.74. */ .ihp-btn-primary{background:var(--ihp-navy);color:var(--ihp-white);} .ihp-btn-primary:hover{background:var(--ihp-teal-ink);color:var(--ihp-white);} .ihp-btn-primary:active{background:var(--ihp-deep-navy);} .ihp-btn-secondary{background:transparent;border:1.5px solid var(--ihp-navy);color:var(--ihp-navy);} .ihp-btn-secondary:hover{background:var(--ihp-navy);color:var(--ihp-white);} .ihp-dark .ihp-btn-primary{background:var(--ihp-white);color:var(--ihp-navy);} .ihp-dark .ihp-btn-primary:hover{background:var(--ihp-mist);} .ihp-btn:disabled,.ihp-btn[aria-disabled="true"]{background:var(--ihp-mist);color:var(--ihp-slate);} /* Focus: teal-ink, not teal — see the header note. */ :focus-visible{outline:2px solid var(--ihp-teal-ink);outline-offset:2px;} .ihp-dark :focus-visible{outline-color:var(--ihp-teal);} /* on dark, teal clears 3:1 */ .ihp-card{ /* display:block, because a card is a box. Without it an stays inline: the padding and border wrap around each text line instead of forming a rectangle, and any fixed-size child inside it — an icon badge — ignores its own width and blows out to the width of its content. That is what pushed the resources and locations card links 76px past the right edge of a 390px viewport. The cards on
s were fine, which is why it only showed on the linked ones. */ display:block; background:var(--ihp-white);border:1px solid var(--ihp-mist); border-radius:var(--r-card);box-shadow:var(--e1);padding:var(--s-6); transition:transform var(--t-fast) ease-out,box-shadow var(--t-fast) ease-out; } a.ihp-card:hover,.ihp-card--link:hover{transform:translateY(-2px);box-shadow:var(--e2);} .ihp-field{ width:100%;background:var(--ihp-white);border:1px solid var(--ihp-mist); border-radius:var(--r-input);padding:12px 16px;font:inherit;font-size:1rem; } .ihp-field:focus{ outline:0;border-color:var(--ihp-teal-ink); box-shadow:0 0 0 3px rgba(0,117,138,.18); } .ihp-label{display:block;font-size:.875rem;font-weight:500;margin-bottom:var(--s-2);color:var(--ihp-navy);} .ihp-helper{font-size:.8125rem;color:var(--ihp-slate);margin-top:var(--s-2);} .ihp-error{font-size:.8125rem;color:var(--ihp-error);margin-top:var(--s-2);} /* The enrolment acknowledgment box — 24px, never pre-checked. */ .ihp-checkbox{width:24px;height:24px;accent-color:var(--ihp-navy);} /* Badges carry words as well as colour — never meaning by colour alone (§11). */ .ihp-badge{display:inline-block;font-size:.8125rem;font-weight:600; padding:4px 12px;border-radius:var(--r-chip);} .ihp-badge-open{background:var(--ihp-success-wash);color:var(--ihp-success);} .ihp-badge-planned{background:var(--ihp-info-wash);color:var(--ihp-teal-ink);} /* FAQ accordion —
based, deep-linkable */ .ihp-faq details{border-top:1px solid var(--ihp-mist);padding:var(--s-4) 0;} .ihp-faq summary{ font-size:1.25rem;font-weight:600;color:var(--ihp-navy); cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s-4); } .ihp-faq summary::-webkit-details-marker{display:none;} .ihp-faq summary::after{content:"+";font-weight:400;transition:transform var(--t-base) ease-out;} .ihp-faq details[open] summary::after{content:"\2212";} /* Footer — the disclosure is visible, never behind a toggle (Playbook Rule 1) */ .ihp-footer{background:var(--ihp-deep-navy);color:var(--ihp-mist);} .ihp-footer h2,.ihp-footer h3{color:var(--ihp-white);} .ihp-footer a{color:var(--ihp-mist);} .ihp-footer a:hover{color:var(--ihp-white);} .ihp-disclosure{ font-size:.8125rem;line-height:1.6;color:var(--ihp-mist); border-top:1px solid rgba(255,255,255,.18); padding-top:var(--s-4);margin-top:var(--s-6); } /* --------------------------------------------------------------------------- Motion & choreography (Brand v2 §7) Order within a section: keyline draws -> kicker/heading fade-rise -> content staggers. ------------------------------------------------------------------------ */ .ihp-reveal{opacity:0;transform:translateY(16px); transition:opacity var(--t-slow) var(--ease-decel),transform var(--t-slow) var(--ease-decel);} .in-view .ihp-reveal,.ihp-reveal.ihp-is-in{opacity:1;transform:none;} .in-view .ihp-reveal:nth-child(2){transition-delay:60ms;} .in-view .ihp-reveal:nth-child(3){transition-delay:120ms;} .in-view .ihp-reveal:nth-child(4){transition-delay:180ms;} .in-view .ihp-reveal:nth-child(5){transition-delay:240ms;} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:150ms!important;scroll-behavior:auto!important;} .ihp-keyline{transform:scaleX(1);} /* appears drawn */ .ihp-reveal{opacity:1;transform:none;} .ihp-odometer .ihp-digit{transition:none;} /* renders its final value */ } /* --------------------------------------------------------------------------- Layout helpers ------------------------------------------------------------------------ */ .ihp-container{max-width:var(--ihp-container);margin-inline:auto;padding-inline:var(--s-6);} .ihp-section{padding-block:var(--s-24);} @media (max-width:767px){ .ihp-section{padding-block:var(--s-16);} } .ihp-stack-3{display:flex;flex-direction:column;gap:var(--s-3);} .ihp-stack-6{display:flex;flex-direction:column;gap:var(--s-6);} /* ----------------------------------------------------------------------------- * LEGAL & STATEMENT PAGES * Privacy Policy, Terms of Use, Membership Agreement, Accessibility Statement. * The built fragments carry no wrapper of their own — tools/load_pages.py wraps * them in .ihp-legal, so the measure and rhythm live here rather than being * repeated in four page bodies that would then drift apart. * -------------------------------------------------------------------------- */ .ihp-legal{max-width:76ch;margin:0 auto;font-size:1.0625rem;line-height:1.75;} .ihp-legal h2:first-of-type{margin-top:0;border-top:0;padding-top:0;} .ihp-legal h2{font-size:1.375rem;margin:var(--s-8) 0 var(--s-4);} .ihp-legal h3{font-size:1.125rem;margin:var(--s-6) 0 var(--s-3);} /* p{max-width:68ch} sitewide would double-constrain inside a 76ch column and leave the text measurably narrower than the headings above it. */ .ihp-legal p{max-width:none;margin:0 0 var(--s-4);} .ihp-legal ul{margin:0 0 var(--s-4);padding-left:1.35em;} .ihp-legal li{margin:0 0 10px;} .ihp-legal .ihp-legal__updated{font-size:var(--ihp-body-sm);color:var(--ihp-slate); margin:0 0 var(--s-8);} /* ----------------------------------------------------------------------------- * LOCATION DETAIL * Rendered by wp/ihp-locations/templates/single-ihp_location.php. Styles live * here rather than in the plugin so the whole design system stays in one file * and one cascade — a plugin shipping its own stylesheet is how a second, * competing set of tokens gets born. * -------------------------------------------------------------------------- */ .ihp-loc{padding:var(--s-16) 0 var(--s-24);} .ihp-loc__article{max-width:72ch;margin:0 auto;} .ihp-loc__name{margin:0 0 var(--s-3);} .ihp-loc__address{font-size:1.0625rem;color:var(--ihp-slate);margin:0 0 var(--s-3); max-width:none;} .ihp-loc__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3); margin:0 0 var(--s-8);max-width:none;} .ihp-loc__phone{font-weight:600;font-size:1.0625rem;} /* Text pills. NOT .ihp-badge — that is already a 52px circular icon badge, and reusing it here rendered "Open 24/7" as a circle with the text spilling out. Both colour pairs are measured against §C: 5.39:1 and 5.21:1, which clears AA at this size and weight (12px bold is not "large text", so 4.5:1 applies). */ .ihp-pill{display:inline-block;border-radius:var(--r-pill);padding:4px 13px; font-size:.75rem;font-weight:700;letter-spacing:.03em;} .ihp-pill--hours{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);} .ihp-pill--planned{background:#FDF3E3;color:#8A5A00;margin:0 0 var(--s-4);} .ihp-loc__intro{margin:0 0 var(--s-8);} .ihp-loc__h2{font-size:1.25rem;margin:var(--s-8) 0 var(--s-4);} .ihp-loc__services{margin:0 0 var(--s-8);padding-left:1.25em;} .ihp-loc__services li{margin:0 0 8px;} .ihp-loc__means{margin:0 0 var(--s-8);} .ihp-loc__means p{margin:0;max-width:none;} .ihp-loc__map{margin:0 0 var(--s-8);} .ihp-loc__map iframe{width:100%;min-height:320px;border:0;border-radius:12px; display:block;} .ihp-loc__back{margin:var(--s-8) 0 0;} /* A real timetable, listed rather than pilled. Body size, not pill size: these are the opening times a member reads before driving over. */ .ihp-loc__hours{list-style:none;margin:0 0 var(--s-8);padding:0; font-size:1rem;color:var(--ihp-deep-navy);} .ihp-loc__hours li{margin:0 0 4px;} /* ----------------------------------------------------------------------------- * LOCATIONS GRID * Rendered by [ihp_locations_grid] / the IHP Locations grid widget. * -------------------------------------------------------------------------- */ /* minmax(0,1fr), not 1fr: 1fr is minmax(auto,1fr), and a long facility name — "Fountain Hills Medical Center — Urgent Care & Primary Care Clinic" — sets a min-content floor that pushes the track wider than its share and overflows the row. This is the fourth place in this file that bug would have appeared. */ .ihp-locgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-6);} @media (max-width:1000px){.ihp-locgrid{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:640px){.ihp-locgrid{grid-template-columns:minmax(0,1fr);}} .ihp-loccard{background:var(--ihp-white);border:1px solid var(--ihp-mist); border-radius:var(--r-card);overflow:hidden;} .ihp-loccard__body{padding:var(--s-5);} .ihp-loccard__name{color:var(--ihp-navy);font-size:1.0625rem;margin:10px 0 6px; max-width:none;} .ihp-loccard__name a{color:inherit;text-decoration:none;} .ihp-loccard__name a:hover,.ihp-loccard__name a:focus-visible{text-decoration:underline;} .ihp-loccard__addr{font-size:var(--ihp-body-sm);color:var(--ihp-slate); margin:0 0 6px;max-width:none;} .ihp-loccard__meta{font-size:var(--ihp-body-sm);color:var(--ihp-ink);margin:0; max-width:none;} .ihp-loccard__note{font-size:.8125rem;color:var(--ihp-slate);margin:8px 0 0; max-width:none;} /* The planned cards: city eyebrow, then the facility's name, then when it opens. __city mirrors .ihp-eyebrow's treatment but stays left-aligned inside a card — .ihp-eyebrow centres itself and would sit the city over the middle of the card while the name below it sits left. */ .ihp-loccard__city{font-size:.75rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ihp-teal-ink);margin:0;} .ihp-loccard__when{font-size:.8125rem;font-weight:700;color:#8A6A16; margin:14px 0 0;} .ihp-pill--open{background:rgba(0,171,200,.16);color:var(--ihp-teal-ink);} /* Editors only — ihp_locations_grid() returns nothing at all to visitors when there is nothing to show, rather than an empty framed box. */ .ihp-locgrid__empty{border-left:4px solid var(--ihp-teal); background:rgba(0,171,200,.08);padding:var(--s-4);font-size:var(--ihp-body-sm); color:var(--ihp-deep-navy);max-width:none;} /* ----------------------------------------------------------------------------- * FAQ — the rest of it. Base
/ rules are above; these are the * page frame, the answer body, and the deep-link target state. * -------------------------------------------------------------------------- */ .ihp-faq{max-width:76ch;margin:0 auto;} .ihp-faq__section{font-size:1.25rem;letter-spacing:.02em;max-width:none; margin:var(--s-12) 0 var(--s-4);} .ihp-faq__section:first-child{margin-top:0;} .ihp-faq__a p{font-size:1rem;line-height:1.7;margin:var(--s-4) 0 0;max-width:72ch;} .ihp-faq__all{margin:var(--s-6) 0 0;font-weight:600;} .ihp-faq--micro{max-width:none;} /* Deep-link landing: a visible marker, because the browser scrolls the question into view and nothing else would tell you which one you were sent to. Left border rather than a background so it reads at any contrast setting. */ .ihp-faq__item:target{border-left:3px solid var(--ihp-teal); padding-left:var(--s-4);margin-left:calc(var(--s-4) * -1);} /* ----------------------------------------------------------------------------- * DISCLOSURE BAND * Printed by ihp_auto_footer_disclosure() on wp_footer, so it lands outside * .ihp-footer and has to carry its own dark surface. .ihp-disclosure itself * assumes a dark background — see the FOOTER block above. * -------------------------------------------------------------------------- */ .ihp-disclosure-band{background:var(--ihp-deep-navy);color:var(--ihp-mist); padding:var(--s-6) 0 var(--s-8);} /* No border-top or margin-top here: those exist on .ihp-disclosure to separate it from footer columns above it. In the band it is the only thing present, and the band's own padding does that job. */ .ihp-disclosure-band .ihp-disclosure{border-top:0;margin-top:0;padding-top:0;} /* ----------------------------------------------------------------------------- * PAGE-BODY COMPONENTS * Used by the authored bodies in wp/pages/bodies/. Added when tools/check_links * and a class audit showed the Home body referencing five classes that did not * exist — an undefined class is not an error anywhere, it is just unstyled * content, which is the same silent failure as an undefined var(). * -------------------------------------------------------------------------- */ /* Alternating tinted band, so consecutive sections separate without a rule. */ .ihp-sec--alt{background:var(--ihp-off-white);} /* The tagline lockup (Brand v2). "One membership. Endless care." — never the retired "One Fee. Endless Care.", which tools/sweep.py now blocks. */ .ihp-lockup{font-weight:600;letter-spacing:.01em;color:var(--ihp-teal); margin:var(--s-6) 0 0;} .ihp-dark .ihp-lockup{color:var(--ihp-white);} /* The §1.5 three steps. An
    , because they are a true sequence — the numbers carry meaning, so they are real list numbers rather than typed-in digits. */ .ihp-steps{list-style:none;counter-reset:ihp-step;padding:0;margin:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);} @media (max-width:900px){.ihp-steps{grid-template-columns:minmax(0,1fr);}} .ihp-steps > li{counter-increment:ihp-step;background:var(--ihp-white); border:1px solid var(--ihp-mist);border-radius:var(--r-card);padding:var(--s-6);} .ihp-steps > li::before{content:counter(ihp-step);display:grid;place-items:center; width:34px;height:34px;border-radius:50%;background:var(--ihp-navy); color:var(--ihp-white);font-weight:700;font-size:.9375rem; margin:0 0 var(--s-3);} .ihp-steps h3{margin:0 0 var(--s-2);font-size:1.0625rem;max-width:none;} .ihp-steps p{margin:0 0 var(--s-2);max-width:none;font-size:1rem;} .ihp-steps p:last-child{margin:0;} /* Truth-table markers. The glyph is decorative and the meaning is carried by the column heading above it, so it is a ::before rather than text a screen reader would read out as "check" before every line. */ .ihp-tick::before{content:"\2713";color:var(--ihp-teal-ink);font-weight:700; flex:0 0 auto;} .ihp-cross::before{content:"\2014";color:var(--ihp-slate);font-weight:700; flex:0 0 auto;} /* Third-party embed (the GoHighLevel booking widget). Aspect-ratio rather than a fixed height: the widget grows as a visitor moves through its steps, and a fixed height either clips the last step or leaves a gap on the first. */ .ihp-embed{position:relative;border:1px solid var(--ihp-mist); border-radius:var(--r-card);overflow:hidden;background:var(--ihp-white); margin:0 0 var(--s-4);} .ihp-embed iframe{width:100%;min-height:700px;border:0;display:block;} @media (max-width:640px){.ihp-embed iframe{min-height:820px;}} /* ----------------------------------------------------------------------------- * BLOCK B — the §1.3 clarifier * * Added late, and it was a live defect rather than a new component: the * [ihp_clarifier] shortcode has emitted

    since the theme * was written and nothing in this file defined it, so Block B — the one-line * clarifier the Playbook requires above the fold on the homepage and at first * mention of HealthPass anywhere — rendered as an unstyled paragraph on six pages. * * Nothing reported it. check_undefined_classes() only read markup files, and this * class is emitted from PHP. That check now reads the theme and plugin PHP too, * which is how this was found. * * Sits inside dark heroes as often as on light sections, so both surfaces are * covered here rather than left to whichever page notices first. * -------------------------------------------------------------------------- */ .ihp-clarifier{font-size:var(--ihp-body-sm);line-height:var(--ihp-body-sm-lh); color:var(--ihp-navy);max-width:64ch;margin:var(--s-4) 0 0;} .ihp-clarifier strong{color:var(--ihp-navy);} /* On a dark band the navy disappears into the gradient. White at .8125rem on #00294F is 14.7:1, so the smaller size costs nothing in contrast. */ .ihp-dark .ihp-clarifier,.ihp-dark .ihp-clarifier strong{color:var(--ihp-white);} .ihp-hero .ihp-clarifier{margin-top:var(--s-6);} /* ----------------------------------------------------------------------------- * BLOCK EM — the employer clarity band (/employers/ only) * * Deliberately NOT the amber callout. Amber means an honesty limit — an * eligibility exclusion, something a member cannot have — and its meaning is a * compliance asset precisely because it is scarce (Brand v2 §6.3). Block EM is not * a limit on the reader; it is the mandate sentence, and it has to read as * institutional rather than cautionary. So: navy rule, off-white ground, navy ink * at 11.27:1. * * Full-width band with its own padding rather than a card inside a section, * because it sits directly between the hero and the first content section and a * card there reads as an aside. This is not an aside. * -------------------------------------------------------------------------- */ .ihp-em{background:var(--ihp-off-white);border-top:1px solid var(--ihp-mist); border-bottom:1px solid var(--ihp-mist); border-left:4px solid var(--ihp-navy);padding:var(--s-6) var(--s-8); margin:0 0 var(--s-4);border-radius:0 var(--r-input) var(--r-input) 0;} .ihp-em__text{margin:0;max-width:88ch;color:var(--ihp-navy); font-size:var(--ihp-body-sm);line-height:var(--ihp-body-sm-lh);} .ihp-em__text strong{color:var(--ihp-navy);} @media (max-width:700px){.ihp-em{padding:var(--s-5) var(--s-5);}} /* Query-string variant of the amber callout on /request-a-consultation/, shown by [ihp_consult_intent] for ?type=employer. A modifier only — the callout's own rules carry the appearance — so it exists just to separate the block from the heading it sits above, which is the booking section's own. */ .ihp-consult-intent{margin:0 0 var(--s-6);text-align:left;} /* ----------------------------------------------------------------------------- * FACT LIST * * The "what you're buying, plainly" pattern: a bold lead clause, then the * qualification. Not .ihp-truth, which is a two-column in/out comparison and * carries the Receipt Rule; not .ihp-steps, which is an ordered sequence with * counters. This is an unordered list of independent statements, and the dashed * rule between them is what stops six of them reading as one paragraph. * -------------------------------------------------------------------------- */ .ihp-facts{list-style:none;padding:0;margin:0 0 var(--s-6);max-width:78ch;} .ihp-facts li{padding:var(--s-3) 0;border-top:1px dashed var(--ihp-mist); font-size:1rem;line-height:var(--ihp-body-lh);} .ihp-facts li:first-child{border-top:0;} .ihp-facts strong{color:var(--ihp-navy);} .ihp-dark .ihp-facts li{border-top-color:rgba(255,255,255,.18);} .ihp-dark .ihp-facts strong{color:var(--ihp-white);} /* The clarity-band strip under the /employers/ hero. A section, so the shortcodes inside it sit within block-level markup — wpautop runs before do_shortcode, and a shortcode alone on a line comes back as a

    inside a

    . Its own padding is tighter than .ihp-sec's: these two paragraphs belong to the hero above them, not to the content below. */ .ihp-sec--bands{padding:var(--s-6) 0 var(--s-8);} .ihp-sec--bands .ihp-clarifier{margin-top:var(--s-4);} /* ----------------------------------------------------------------------------- * HOST-THEME SUPPRESSION AND CHROME REPAIR * * The child theme now prints its own utility strip, hero nav and footer, from the * approved design. Kadence's equivalents have to go, or the page carries two * navigation landmarks, two footers, and a grey band reading "Home" above the hero. * * ihp_stand_down_theme_chrome() removes them at the hook level, which is the real * fix. This is the second layer, for the case where a theme renders its header * outside those hooks — and it is display:none rather than visibility, so the * hidden markup leaves the accessibility tree too rather than lingering as a * duplicate landmark a screen reader still announces. * -------------------------------------------------------------------------- */ .site-header, #masthead, .site-footer, #colophon, .entry-hero, .page-title, .kadence-breadcrumbs, .site-branding + .site-footer-wrap { display: none !important; } /* Kadence's SINGLE-POST header, which is a different element from the page-title hero above and sits inside .entry-content-wrap rather than .entry-hero — so hiding the hero never touched it. * * On the first published post it produced: our navy masthead with the title, then * the featured image again, then a category link, then the SAME title as a second *

    . Two h1 elements on one page, and the article's own heading appearing twice * within one screen. * * .entry-taxonomies goes for a second reason as well as duplication: with one * category, that link points at /blog/category/uncategorized/ — which is a source * row in the redirect ledger, so every post would have carried a link through a * 301. When real categories exist (the calendar's five pillars are the obvious * ones) this rule is what to revisit. * * The thumbnail goes because the image already has two jobs — the card on the index * and the Open Graph image — and Kadence positions it "behind" a title we have * replaced, so where it lands is not something we control. */ .single-post .entry-header.post-title, .single-post .entry-taxonomies, .single-post .entry-meta, .single-post .post-thumbnail.article-post-thumbnail { display: none !important; } /* ----------------------------------------------------------------------------- * THE ARTICLE BODY * * A post is prose, and prose needs a measure. The host-suppression block above * releases .entry-content from Kadence's max-width — correct for the design pages, * whose heroes and grids are full-bleed by intention — but a post inherited that * release and set 400 words of body copy across the whole window. * * 68ch is about 75 characters a line, which is the readable range. Centred, with * the same inset the hero panel uses so the column lines up with the masthead * above it rather than floating independently of it. * -------------------------------------------------------------------------- */ html .ihp-post { max-width: 68ch; margin: var(--s-12) auto var(--s-16); padding: 0 clamp(20px, 3.4vw, 52px); } html .ihp-post h2 { margin: var(--s-10) 0 var(--s-4); font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--ihp-navy); } html .ihp-post h2:first-child { margin-top: 0; } html .ihp-post p { margin: 0 0 var(--s-5); font-size: 1.0625rem; line-height: 1.7; color: var(--ihp-ink); } html .ihp-post .ihp-btnrow { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--ihp-mist); } /* The byline the Playbook's SOP actually asks for, printed by ihp_page_masthead(). Kadence's .entry-meta above printed "By admin" — the WordPress account name — and two dates. An account name is not an author, and a displayed date on an evergreen post makes a correct answer look stale a year later. For a YMYL site the byline is worth having rather than suppressing: it is the E-E-A-T signal, and the accountable name is the team's. */ html .ihp-byline { color: rgba(255, 255, 255, .78); font-size: .875rem; margin: 0 0 var(--s-6); } /* Kadence boxes the content column and adds its own vertical rhythm. The design is full-bleed with inset rounded panels, so the column has to be released — the hero's own `margin:0 20px` is what creates the inset, and a parent max-width turns that into a narrow strip with white gutters either side. */ .content-area, .site-main, .entry-content, .content-container, .site-container, .entry-content-wrap { max-width: none !important; width: auto !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .site-main > .content-container { padding: 0 !important; } .entry-content > *:first-child { margin-top: 0; } /* Kadence gives the single-entry wrapper a card: background, border, radius and shadow. Under a full-bleed design that reads as a floating panel around the whole page. */ .entry-content-wrap, .single .entry, .page .entry, article.entry { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; /* margin, not just padding. Kadence pulls its content card 16px outwards on narrow viewports to make it full-bleed — margin:-16px on article.entry. Under a design that is already full-bleed that made the article 422px wide inside a 390px viewport and shifted every section 16px left of the screen edge, so the hero's inset panel sat off-centre and the whole page read as misaligned. Zeroing padding alone left the negative margin in place. */ margin: 0 !important; } /* The brand lockup when the Media Library has no logo-lockup attachment: a text wordmark rather than an empty , which is an invisible link to the home page. */ .ihp-brandtext { color: var(--ihp-white); font-weight: 700; font-size: 1.0625rem; text-decoration: none; letter-spacing: -.01em; } .ihp-brandlink { display: inline-flex; align-items: center; text-decoration: none; } /* Block A inside the design's footer. .ihp-disclosure already assumes a dark ground and brings its own top rule; the wrapper only needs to give it room. */ .ihp-disclosure-wrap { margin: var(--s-8) 0 0; } /* ----------------------------------------------------------------------------- * SECONDARY BUTTON ON A DARK GROUND * * .ihp-btn-secondary is a navy border with navy text — correct on white, invisible * on the navy hero. It rendered as unreadable ghost text on the Home hero, the * /our-program/ hero and every dark closing band: "Talk it through" and "Talk to a * Program Specialist" both looked like a broken element rather than a button. * * Also a real contrast failure, not just an aesthetic one: navy #003B71 on the * hero gradient's #00294F is 1.35:1, against the 3:1 WCAG 2.1 SC 1.4.11 requires * of a control's boundary and the 4.5:1 its label needs. * * White at 1.5px on that ground is 14.7:1 for the label and clears 1.4.11 for the * border, and the hover fills white with navy text at the same ratio inverted. * -------------------------------------------------------------------------- */ .ihp-dark .ihp-btn-secondary, .ihp-hero .ihp-btn-secondary, .ihp-impact .ihp-btn-secondary { background: transparent; border-color: rgba(255, 255, 255, .72); color: var(--ihp-white); } .ihp-dark .ihp-btn-secondary:hover, .ihp-hero .ihp-btn-secondary:hover, .ihp-impact .ihp-btn-secondary:hover, .ihp-dark .ihp-btn-secondary:focus-visible, .ihp-hero .ihp-btn-secondary:focus-visible { background: var(--ihp-white); border-color: var(--ihp-white); color: var(--ihp-navy); } /* The blog index's closing card. The mock carried its layout in inline styles on the element; [ihp_blog_state] emits the markup now, so the layout lives here instead of being re-inlined in PHP where nothing could check it. */ html .ihp-blog-card { margin: var(--s-12) auto 0; max-width: 78ch; } html .ihp-blog-card h3 { margin: var(--s-4) 0 var(--s-3); } html .ihp-blog-card p { margin: 0 0 var(--s-5); } html .ihp-blog-card .ihp-btnrow { margin-top: 0; } /* ----------------------------------------------------------------------------- * BLOG CARDS WITH A REAL POST IN THEM * * The design layer gives .ihp-ph its 200px height under .ihp-blog-slot, which is * the placeholder card. [ihp_post_list]'s populated branch correctly does NOT * carry that class — the cards are real, not dimmed — and so lost the height with * it: a post with no featured image rendered as a navy sliver two pixels tall, * with the date badge clipped away underneath it. Thirteen cards of that, which is * what the blog index would have launched as. * * So the height belongs to the card, and .ihp-blog-slot only changes its fill. * That also means a post somebody publishes later without a featured image * degrades to a clean tinted block instead of breaking the row. * * Two classes deep, matching `html .ihp-blog-slot .ihp-ph` so neither wins by * accident — the design layer loads second, so its rule still sets the gradient. * -------------------------------------------------------------------------- */ html .ihp-svc .ihp-ph { height: 200px; background: linear-gradient(100deg, #E7EEF3, #F2F7FA, #E7EEF3); } /* The card's heading is a link to the post. Left to the default it arrives underlined and in link teal, which reads as unstyled next to every other card on the site. */ html .ihp-svc .ihp-body h3 { margin: 0 0 var(--s-3); } html .ihp-svc .ihp-body h3 a { color: var(--ihp-navy); text-decoration: none; } html .ihp-svc .ihp-body h3 a:hover, html .ihp-svc .ihp-body h3 a:focus-visible { text-decoration: underline; } /* ----------------------------------------------------------------------------- * THE COMPACT MASTHEAD * * For the four legal pages, which have no hero of their own — see * ihp_page_masthead(). Same panel and same nav as every other page; the hero's * tall two-column body padding is what has to go, because there is nothing below * the nav here but a title. * -------------------------------------------------------------------------- */ html .ihp-hero--compact { margin-bottom: var(--s-10); } /* One column, not the hero's two: there is no figure and no lead paragraph beside the title. And a fraction of the vertical padding, which on a full hero is reserving room for a lead, a button row and a floating card. */ html .ihp-hero--compact .ihp-hero-body { grid-template-columns: minmax(0, 1fr); padding: var(--s-10) 0; } @media (max-width: 700px) { html .ihp-hero--compact .ihp-hero-body { padding: var(--s-8) 0; } } /* ----------------------------------------------------------------------------- * HERO FACTS * * Two short facts that used to live in a full-width white strip above the hero. * That strip was the mock's utility bar, and on the built site it had nothing * left to carry: Member Login moved into the nav, so what remained was a bare * white band holding two disconnected phrases and an edge between the top of the * window and the headline. They now sit inside the navy panel, on the hairline * under the nav, printed by [ihp_hero_nav] — see ihp_hero_facts(). * * The mock still has the strip and tools/port_design.py still uses it as the * anchor it cuts page bodies from, so .ihp-util above stays; it styles the mock * only and no longer reaches a WordPress page. * * Light on navy, because [ihp_hero_nav] renders inside .ihp-hero on all fourteen * bodies and nowhere else. White at 82% over the hero gradient's #00294F is * 10.2:1, which 13px text needs 4.5:1 of; the teal icon is 5.35:1 against the * same ground, clearing the 3:1 of SC 1.4.11 even though the icons are * aria-hidden and the text carries the meaning on its own. * * `html ` prefixed to reach (0,1,1): the shortcode output is inside the post * content, so Kadence's .single-content p — margins and colour — is a specificity * tie broken by load order, and the child theme loads after the parent. * -------------------------------------------------------------------------- */ html .ihp-herofacts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 12px 0 0; font-size: .8125rem; line-height: 1.4; color: rgba(255, 255, 255, .82); } html .ihp-herofact { display: inline-flex; align-items: center; gap: 8px; } /* An inline SVG with no intrinsic size fills its container: without an explicit box these render at the 300x150 default and push the nav off the panel. */ html .ihp-herofact svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--ihp-teal); } @media (max-width: 700px) { html .ihp-herofacts { gap: 6px 18px; font-size: .75rem; padding-top: 10px; } } /* ----------------------------------------------------------------------------- * THE EXPLAINER VIDEO PLAYER * * The design layer styles .ihp-vid for the mock's version of the card: a photograph * at a fixed 186px with a play triangle drawn on top, dimmed to .66 so the triangle * reads. That is a picture of a player. Once [ihp_video] renders a real