/* Blooming Prep — site-wide baseline. Loads before every other bp-* stylesheet.
Defaults only: low-specificity element selectors so Elementor atomic classes and
per-element styles always win. Page ground is WHITE — client decision, 19 Aug 2026
(supersedes the cream #FAF5EB ground; cream lives on as the band-tan band color).
Type ramp per DESIGN.md: Nunito 500 headings, Nunito 400 body. */
/* html body: one level of extra specificity so these defaults beat Hello Elementor's
reset.css/theme.css body rules regardless of stylesheet print order. */
html body{background-color:#FFFFFF;color:var(--body,#32281E);font-family:"Nunito",sans-serif;font-weight:400;font-size:16px;line-height:1.5;}
h1,h2,h3{font-family:Nunito, sans-serif;font-weight:500;color:var(--ink,#52815F);text-wrap:balance;}
p{text-wrap:pretty;}
h1{font-size:72px;line-height:1.1;letter-spacing:-.03em;}
h2{font-size:56px;line-height:1.15;letter-spacing:-.03em;}
h3{font-size:26px;line-height:1.2;}
@media (max-width:1024px){
h1{font-size:56px;}
h2{font-size:42px;}
}
@media (max-width:767px){
h1{font-size:clamp(40px, 3vw + 29px, 52px);}
h2{font-size:28px;letter-spacing:0;} /* -.03em reads cramped at 28px */
h3{font-size:26px;} /* declared H3 is 26px at every breakpoint */
/* nudge primary/secondary button touch target toward the 44px guideline on mobile
(measured ~42px with the desktop 10px padding); nav-burger is already a fixed 44px
circle at this breakpoint via bp-header.css, so it needs no change here. */
.btn-primary,.btn-secondary{padding-block:12px !important;}
}
/* Display tracking, 11 Sep 2026 (supersedes the 2026-08-17 "no negative tracking" rule, user).
Every atomic heading compiles its own letter-spacing:0 into a local .s-* class (0,2,0), so the
element defaults above never reach a builder heading — hence the override + !important. h3 and
mobile h2 (28px) stay at 0: -.03em reads cramped below ~40px. */
html body .elementor h1,html body .elementor h2{letter-spacing:-.03em !important;}
/* Same root cause, 15 Sep 2026: Elementor's atomic `.e-heading-base` (0,1,0) also outranks the
bare element selectors above, so a heading that declares no local size/family renders in
Nunito at the base size — the Founding Families form heading was the one live case.
Restating the declared ramp at (0,1,3) clears the base while staying under a local .s-*
class (0,2,0), so any heading with its own size still wins and nothing else moves. */
html body .elementor h1,html body .elementor h2,html body .elementor h3{font-family:Nunito, sans-serif;}
html body .elementor h3{font-size:26px;line-height:1.2;}
/* 14 Sep 2026 audit P1 #5: list-lead and card headings promoted from h3 to h2 so no page skips
H1->H3 (Programs age cards, program-page "will develop" leads, Contact locations, Founding
Families "Receive", BP Connect, Kindergarten "Families receive", Learning Framework entries).
They keep their 24-40px local sizes, so they keep h3 tracking too. */
html body .elementor h2[data-id$="-h3"],html body .elementor h2[data-id="ready-h1-car-join-h2"]{letter-spacing:0 !important;}
@media (max-width:767px){
html body .elementor h2{letter-spacing:0 !important;}
}
/* Icon colour families (4 Sep 2026, DESIGN.md components.icons). A tinted card carries its icon
in the card's own family: chip circle = Tint 4, glyph ink = Base (29 Sep 2026: no darker tints). Defined ONCE here; page
sheets only map an element to a family via --bp-icon-chip/--bp-icon-ink. Never restate hexes. */
:root{
--fam-coral-chip:#FFE1CC; --fam-coral-ink:#C85200;
--fam-tan-chip:#F5ECD8; --fam-tan-ink:#806952;
--fam-sage-chip:#DCE6DF; --fam-sage-ink:#52815F;
--fam-teal-chip:#DBE4EC; --fam-teal-ink:#4A769E;
}
/* Atomic form controls (14 Sep 2026 review #5, #6, #9). Elementor's .e-form-input-base:focus prints
outline-style:none after this sheet, so the sage ring needs !important; placeholder #9DA5AE measured
2.49:1 on white — Trunk is the lightest declared token that clears AA (11.6:1); phone entry controls
go to the 16px body size so iOS does not zoom and the mobile input baseline is met. */
html body .elementor :is(.e-form-input-base,.e-form-select-base,.e-form-textarea-base,.e-form-date-picker-base,.e-form-checkbox-base):focus-visible{outline:2px solid var(--accent,#52815F) !important;outline-offset:2px !important;}
html body .elementor :is(.e-form-input-base,.e-form-textarea-base)::placeholder{color:var(--muted,#76695C);opacity:1;}
/* Browser surfaces take the revised text palette (29 Sep 2026): selection is Card Sage under heading
ink, the caret is label green. */
html body ::selection{background:var(--card-sage,#DCE6DF);color:var(--ink,#211910);}
html body .elementor :is(.e-form-input-base,.e-form-textarea-base){caret-color:var(--label-green,#4B5F4F);}
/* 15 Sep 2026: Elementor's atomic base (base-desktop.css, .elementor .e-form-input-base)
ships a fixed height:36px that wins over every widget's own padding, sitting fields well
under the 50px DESIGN.md forms token and visibly shorter than the 50px pill buttons beside
them (footer sign-up flagged first, but it's every text field site-wide). */
html body .elementor :is(.e-form-input-base,.e-form-select-base,.e-form-date-picker-base){height:50px;}
/* 18 Sep 2026: native select arrow (appearance:auto) rendered ~8px off the right edge,
almost flush with the field border on all five forms. appearance:none + an inline
chevron (Deep Brown #604327, the body text colour) puts it 18px off the edge instead; a background
image can't take currentColor the way the nav caret/rail-arrow masks do, so the ink hex
is inlined directly, same fallback value already used elsewhere in this file. */
html body .elementor .e-form-select-base{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
padding-right:40px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23604327' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:right 18px center;background-size:10px 6px;
}
/* 14 Sep 2026 interface review, last open item: Hello's reset.css prints a black :focus
outline on a/button and prints after bp-*, so the plain sage rule in bp-home.css never
won — same !important + specificity treatment as the form controls above. Burger
(nav-burger) has no decorative focus indicator of its own, so this is its only ring. */
html body .elementor :is(a,button):focus-visible{outline:2px solid var(--accent,#52815F) !important;outline-offset:2px !important;}
/* Hello's reset.css paints EVERY bare button/[type=button]/[type=submit] #CC3366 on hover and
prints after the bp-* layer, so any button without its own hover ground goes pink (found on
the 404 "Go back" control, 17 Sep 2026). Scoped to buttons that carry NO component class of
their own: a blanket `:is(button,[type=button],[type=submit]):hover` computes to (0,2,2) --
:is() takes its highest-specificity argument -- which outranks `.btn-primary:hover` (0,2,0)
and would silently strip the hover ground from every form submit button on the site. */
html body button:not([class]):hover,
html body button:not([class]):focus{background-color:transparent;color:inherit;}
@media (max-width:767px){
html body .elementor :is(.e-form-input-base,.e-form-select-base,.e-form-textarea-base,.e-form-date-picker-base){font-size:16px !important;}
}
/* Nested radius - "inner = outer - padding" (92learns border-radius rules, 14 Sep 2026).
Every card publishes its own padding as --card-pad; nested frames, media and box
wrappers derive their radius from it, so corners stay concentric and a new card needs
one variable instead of a hand-picked value. Where the padding meets or exceeds the card
radius the subtraction bottoms out at 0 or goes negative - those cards fall back to half
the outer radius (14px on a 28px card) rather than squaring off, since a child inset that
far is not near the parent corner and the formula has nothing useful to say about it.
A child with no padding to clear takes no radius at all: it is flush, so the card's own
overflow:hidden clips it to exactly the right corners - and only the corners it actually
touches, which is what keeps a left-bleed photo square on its interior edge and re-rounds
the correct pair when the same card stacks to a column at a narrow breakpoint.
Controls are exempt by design: pill buttons, 42px fields and the 12px message chips are
hierarchy signals (DESIGN.md components.forms/buttons), not nesting cases. */
html body .elementor .card{--card-pad:32px;--card-radius:var(--radius-md,16px);}
html body .elementor .card-no-padding{--card-pad:0px;--card-radius:var(--radius-md,16px);}
/* Cards whose padding the builder overrides away from the 32px default. --card-pad has to
move with the padding or the derived radius is wrong; _build/tools/check-card-radius.js
flags any card where the two disagree. */
html body .elementor [data-id^="t-card-"]{--card-pad:0px;}
html body .elementor [data-id^="value-card-"]{--card-pad:36px;}
html body .elementor [data-id="ct-form-card"],
html body .elementor [data-id="ffp-form-card"]{--card-pad:40px;}
/* Home programs cards are card anatomy without the .card class (28px radius, 32px
padding, 20px at <=767) - opt them into the same derivation: 14px frames on desktop
(the subtraction bottoms out, so half the outer radius), 8px at <=767. */
html body .elementor .s-programs-grid > [data-id^="program-row-"]{--card-pad:32px;--card-radius:var(--radius-md,16px);}
@media (max-width:767px){
/* the builder shrinks these paddings on phones; the variable has to follow */
html body .elementor [data-id="vision-card"],
html body .elementor [data-id="mission-card"]{--card-pad:20px;}
html body .elementor [data-id^="value-card-"]{--card-pad:28px;}
html body .elementor .s-programs-grid > [data-id^="program-row-"]{--card-pad:20px;}
}
html body .elementor .card,
html body .elementor .card-no-padding,
html body .elementor .s-programs-grid > [data-id^="program-row-"]{
/* 0 when the child sits flush against the card (no padding to clear), 1 when inset */
--card-inset:max(0, sign(var(--card-pad)));
/* 1 while outer - padding is still positive, 0 once it bottoms out */
--card-fits:max(0, sign(var(--card-radius) - var(--card-pad)));
--card-inner:calc(var(--card-inset) * (
var(--card-fits) * (var(--card-radius) - var(--card-pad))
+ (1 - var(--card-fits)) * var(--radius-sm, 8px))); /* brand kit 2026: images inside cards are 8px */
}
html body .elementor .card .image-frame,
html body .elementor .card [data-id$="-img"],
html body .elementor .card [data-id*="-frame"],
html body .elementor .card [data-id*="-thumb"],
html body .elementor .s-programs-grid > [data-id^="program-row-"] [data-id$="-img"]{
/* first declaration is the no-sign() fallback: old engines square the corner */
border-radius:max(0px, calc(var(--card-radius) - var(--card-pad))) !important;
border-radius:var(--card-inner) !important;
}
/* 14 Sep 2026 audit P2 #10: inline links (footer columns, location e-mails, legal lines) sat
18-22px tall. Padding grows the hit box to >=24px; the negative margin hands the layout the
same line box it had. Buttons and pills already clear 44px and are excluded. */
html body .elementor p > a:not([class*="btn"]){display:inline-block;padding-block:3px;margin-block:-3px;}
/* ─────────────────────────────────────────────────────────────────────────────
Elevation & material — 18 Sep 2026 (user; DECISIONS 2026-09-18, DESIGN.md
§Elevation & Depth). Supersedes the former "no drop shadows anywhere" rule.
Two shadows only, built from ink #213426 at very low alpha so they tint to the
ground instead of greying it. They are resting values: nothing lifts on hover,
which keeps the quiet-hover split the motion layer depends on.
Every wash below is TRANSLUCENT, not a hex ramp. A two-stop opaque gradient
would have to know each element's ground, and would paint over the builder's
own background-color (and over .btn-primary's hover swap). A translucent value
shift is ground-agnostic: it reads as material on white, on Card Sage and on
Card Tan alike, and it disappears on its own where there is nothing to lift. */
:root{
--shadow-sm: 0 1px 2px rgba(33,52,38,.04), 0 4px 12px rgba(33,52,38,.05);
--shadow-md: 0 4px 10px rgba(33,52,38,.06), 0 16px 40px rgba(33,52,38,.08);
/* surface: barely-lit top, barely-settled bottom. Under a 3% value shift. */
--surface-grad: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 45%, rgba(33,52,38,.022) 100%);
/* cta: top-lit face only, so the sage hover ground still reads through it. The lift ends 8px
down, above the label (10px padding): the old 62% fade lightened the ground under the glyphs
and took white-on-green from 4.50:1 to ~3.9:1 (14 Oct 2026 a11y audit). */
--cta-grad: linear-gradient(180deg, rgba(255,255,255,.14) 0, rgba(255,255,255,0) 8px);
/* band: settles a tinted band into the white page ground; invisible on white */
--band-fade: linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.5) 100%);
}
/* Resting surfaces */
html body .elementor .card,
html body .elementor .card-no-padding,
html body .elementor .image-frame,
html body .elementor .s-programs-grid > [data-id^="program-row-"],
html body .elementor [data-id*="-accordion-item-"]{
box-shadow:var(--shadow-sm);
}
/* ...and the material wash on the box itself, not on media frames (a photo covers it) */
html body .elementor .card,
html body .elementor .card-no-padding,
html body .elementor .s-programs-grid > [data-id^="program-row-"],
html body .elementor [data-id*="-accordion-item-"]{
background-image:var(--surface-grad);
}
/* Primary CTA — top-lit face + the resting shadow. btn-secondary stays flat:
one conversion signal per view (DESIGN.md components.buttons). */
html body .elementor .btn-primary,
html body .elementor button.btn-primary{
background-image:var(--cta-grad);
box-shadow:var(--shadow-sm);
}
/* Tinted section bands settle into the white page ground instead of ending on a
hard edge. Self-scoping: the wash is white-on-white where the band is white. */
html body .elementor .section-band{
background-image:var(--band-fade);
}
/* Floating chrome */
html body .bp-team-modal-panel,
html body .bp-curriculum-dialog{
box-shadow:var(--shadow-md);
}
/* Revision plan (29 Sep 2026): the client struck the photo out of several intro-split bands
(Enrichment, BP Connect, Careers, Assessment, Summer Camp, Extended Day). A split with no
image left collapses to one column at a readable measure instead of leaving a 38% hole.
A stack of photos wrapped in `.intro-split-media` (Summer Camp, 30 Sep) counts as the image. */
html body .elementor .intro-split:not(:has(> .intro-split-img, > .intro-split-media)){grid-template-columns:minmax(0,1fr) !important;}
html body .elementor .intro-split:not(:has(> .intro-split-img, > .intro-split-media)) > .intro-split-copy{max-width:860px;}
/* Career form résumé upload (P2-09, 29 Sep 2026): the atomic file input ships at 36px and clips;
it takes the 50px field height and the browse control reads as the secondary pill. */
html body .elementor .e-form-file-upload-base{height:auto !important;min-height:50px;padding:8px 12px !important;font:400 15px/1.4 'Nunito',sans-serif;color:var(--body,#604327);display:flex;align-items:center;}
html body .elementor .e-form-file-upload-base::file-selector-button{margin-right:14px;padding:8px 16px;border:1px solid var(--border,#DFD9D4);border-radius:var(--radius-pill,50px);background:#fff;color:var(--ink,#52815F);font:600 15px 'Nunito',sans-serif;cursor:pointer;}
html body .elementor .e-form-file-upload-base::file-selector-button:hover{background:#F5ECD8;border-color:#BFB4A9;}
/* ─────────────────────────────────────────────────────────────────────────────
Brand kit 2026 layer — P2-02 (29 Sep 2026, "Blooming Prep Brand Guidelines 2026").
Colours arrive through the Elementor global variables (remapped ramp-for-ramp:
sage→Main Green, teal→Blue, coral→Orange, olive→Succulents, tan→Cream/Deep Brown,
trunk→Deep Brown); this block carries what variables cannot: the type scale, the
one-orange-action rule and the four-value radius system. */
/* Type — Nunito for headings and body; headlines Bold with slightly tight tracking,
subheads Semibold, always sentence case (copy stays verbatim; only CSS case transforms
go). Scale: Display 56/1.1/-2% (Home hero), H1 40/1.1/-1.5%, H2 32/1.15/-1%. */
html body{font-family:Nunito,sans-serif;}
html body .elementor :is(h1,h2,h3,h4,h5,h6){font-family:Nunito,sans-serif !important;text-transform:none !important;}
html body .elementor :is(h1,h2){text-wrap:balance;} /* keeps "(3–5 Years)" style ranges off a line break at 390px */
html body .elementor h1{font-size:40px !important;line-height:1.1 !important;letter-spacing:-0.015em !important;font-weight:700 !important;}
html body .elementor h2{font-size:32px !important;line-height:1.15 !important;letter-spacing:-0.01em !important;font-weight:700 !important;}
html body .elementor h3{font-size:22px !important;line-height:1.3 !important;letter-spacing:0 !important;font-weight:600 !important;}
html body .elementor [data-id*="accordion-question"]{font-family:Nunito,sans-serif !important;font-size:20px !important;font-weight:600 !important;letter-spacing:0 !important;}
html body .elementor :is(.btn-primary,.btn-secondary){font-size:17px;font-weight:600;}
@media (max-width:767px){
html body .elementor h1{font-size:32px !important;}
html body .elementor h2{font-size:26px !important;}
html body .elementor h3{font-size:20px !important;}
html body .elementor [data-id*="accordion-question"]{font-size:18px !important;}
}
/* Orange = the accent, "one key action per screen": Join Founding Families only. Client
29 Sep 2026: brighter #FF6900 with WHITE label, as in their mock. 14 Oct 2026 (user): the
orange is darkened to #C85200, the same hue and saturation at the lightness where white
reaches 4.50:1, so the label passes AA (DECISIONS 2026-10-14). The hover is still Orange
Tint 1 #FF8733 (white ~2.4:1, hover state only, like the green hover).
Form submits are matched by local class: component instances render hashed data-ids. */
html body .elementor a.btn-primary[href*="/founding-families"],
html body .elementor :is(.s-ff-submit,.s-ffp-form-submit,.s-footer-signup-submit){
background-color:var(--coral,#C85200) !important;color:#FFFFFF !important;
}
html body .elementor a.btn-primary[href*="/founding-families"]:hover,
html body .elementor :is(.s-ff-submit,.s-ffp-form-submit,.s-footer-signup-submit):hover{
background-color:var(--coral-tint-1,#FF8733) !important;color:#FFFFFF !important;
}
/* Announcement bar — client: "stand out more, pop of colour, bolder text" (P2-13). Ground is
set in Elementor (header 29, s-banner-strip: coral variable); only text colour lives here. */
html body .elementor [data-id="banner-strip"] :is(p,a){color:#FFFFFF !important;}
html body .elementor [data-id="banner-link"]{text-decoration:underline !important;text-underline-offset:3px;}
/* Radius — four values: 0 full-width, 8 in-card media/chips, 18 cards/panels, pill for
actions and inputs. Multi-line fields can't be pills, so they take the card radius. */
html body .elementor .e-form-textarea-base{border-radius:var(--radius-md,18px) !important;}
/* Hallmark audit, 6 Oct 2026 (user "apply the fixes").
1. Root clips sideways overflow too (body already clips); clip, not hidden, so sticky chrome keeps working.
2. Buttons name what they animate: the form submits inherited Elementor's transition:all. Durations unchanged. */
html{overflow-x:clip;}
html body .elementor :is(.btn-primary,button.btn-primary){transition-property:background-color,border-color,color;transition-duration:.3s;transition-timing-function:ease;}
@media (prefers-reduced-motion:reduce){html body .elementor .btn-primary{transition:none;}}
/* Green button hover, 6 Oct 2026 (user): one ramp step lighter, Sage Tint 2 #759A7F, instead of
Deep Brown. Overrides the btn-primary global class hover variant (accent-hover), which the
edit-global-class ability can't reach. Orange Founding Families buttons keep their own
!important Orange Tint 1 hover above. White on #759A7F is ~3.1:1 (below AA, hover only). */
html body .elementor .btn-primary:is(:hover,:focus-visible),
html body a.bp-404-btn-primary:is(:hover,:focus-visible){background-color:var(--sage-tint-2,#759A7F);}
/* Pattern 10 widen scrub, motion layout (6 Oct 2026). The band's vertical padding moves into
the panel (content-box, so the panel's builder height is unchanged and the band keeps its
total height); bp-motion.js then opens a clip-path from the text axis to full bleed. No
layout box changes on scroll. Static states (phone, reduced motion) keep the builder layout. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
html body .elementor .widen-scrub-band{padding-block:0 !important;}
html body .elementor .widen-scrub{--ws-pad:48px;max-width:none !important;border-radius:0 !important;box-sizing:content-box !important;padding-block:var(--ws-pad) !important;clip-path:inset(var(--ws-pad) 35px round var(--radius-lg,22px));}
}
@media (min-width:768px) and (max-width:1024px) and (prefers-reduced-motion:no-preference){
html body .elementor .widen-scrub{--ws-pad:36px;}
}
/* Screen-reader-only suffix on generic link labels: "Learn More" + about Infants
(14 Oct 2026 a11y audit, user). Elementor's escaped-html strips classes from the span, so it is
matched structurally; e-button labels are text-only, so a span inside one is always this suffix. */
html body .elementor .e-button-base > span{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;}
/* Headings promoted h3 -> h2 on 14 Oct 2026 (a11y audit: FAQ, Sample Menu, Curriculum, Summer
Camp skipped H1 -> H3). They keep their old h3 metrics; the global h2 rule would make them 32px/700. */
html body .elementor :is(h2[data-id="camp-why-h3"],h2[data-id="camp-overview-h3"],h2[data-id="curriculum-h1-car-join-h2"],h2[data-id="curriculum-h7-car-join-h2"],h2[data-id="curriculum-h15-car-join-h2"]){font-size:22px !important;line-height:1.3 !important;letter-spacing:normal !important;font-weight:600 !important;}
html body .elementor h2[data-id^="sept8faq-accordion-question-"]{font-size:20px !important;line-height:1.3 !important;letter-spacing:normal !important;font-weight:600 !important;}
html body .elementor h2[data-id^="fc-menu-"][data-id$="-h3"]{font-size:30px !important;line-height:1.3 !important;letter-spacing:normal !important;font-weight:600 !important;}
@media (max-width:767px){
html body .elementor :is(h2[data-id="camp-why-h3"],h2[data-id="camp-overview-h3"],h2[data-id="curriculum-h1-car-join-h2"],h2[data-id="curriculum-h7-car-join-h2"],h2[data-id="curriculum-h15-car-join-h2"]){font-size:20px !important;}
html body .elementor h2[data-id^="sept8faq-accordion-question-"]{font-size:18px !important;}
}
/* In-body internal links (15 Oct 2026): label green + underline, the bp-curriculum link treatment. Legal consent links keep their own rule. */
html body main p.e-paragraph-base a[href^="/"]:not([href*="/privacy"]):not([href*="/terms"]){color:var(--label-green,#4B5F4F);text-decoration:underline;text-underline-offset:3px;}
/* 16 Oct 2026 SEO round 3: four sentence-length / quotation headings are now (not H2) so the outline lists only real section titles.
Reproduces the h2 look they had (global `html body .elementor h2` 32px / 700, 26px at <=767, -.01em). */
html body .elementor div:is([data-id="fc-bpc-h2"],[data-id="founding-loc-h2"],[data-id="mont-quote-text"],[data-id="reg-quote-text"]){font-size:32px;font-weight:700;letter-spacing:-.01em;}
@media (max-width:767px){html body .elementor div:is([data-id="fc-bpc-h2"],[data-id="founding-loc-h2"],[data-id="mont-quote-text"],[data-id="reg-quote-text"]){font-size:26px;}}