/* AUTO-GENERATED from css/landing-skin.tmpl.css by build-landing-skins.mjs. DO NOT EDIT THIS FILE. Edit the template or the recipe, then re-run the builder. Colour: MIDNIGHT NAVY (the owner console rail — #3C4A78 / #212B47 / #0E1322) */ /* ============================================================================ LANDING COLOUR-SKIN MASTER TEMPLATE · DO NOT EDIT THE GENERATED FILES. ---------------------------------------------------------------------------- This is the SINGLE source of truth for every landing colour option. `build-landing-skins.mjs` stamps this out once per colour recipe into css/landing-.css. Change a spot HERE, re-run the builder, and EVERY colour updates together — nothing can get left out. GREEN is NOT built from this file. Green = the untouched base index.html CSS (all override sheets disabled). Never themed here. Caleb's revert baseline. Tokens (filled per recipe): MIDNIGHT NAVY (the owner console rail — #3C4A78 / #212B47 / #0E1322) #3C4A78=primary #212B47=deep/hover #5C74B8=light #9FB0DC=lighter #EAF0FB=soft-bg 60,74,120=primary r,g,b 33,43,71=deep r,g,b #f4f6fc#edf1fa#e3e9f7=reassure band #4E6FB5#3C4A78#212B47=hero gradient stops #5C80C8#47568A#2B3760=hero hover stops #E7ECF9=light-button bg #26325A=light-button text. KEPT constant across all colours: logo, gold booklet dot + gold pulse flash, Ch3/Ch4 orange-coral accents + donut arcs, navy ink #123b42, semantic red/amber. ============================================================================ */ /* ── 1. HERO — coral CTA button → theme (base; premium gradient below) ─────── */ .hero__btn { background:#3C4A78 !important; color:#fff !important; } .hero__btn:hover { background:#212B47 !important; } /* ── 2. OUR SERVICES — bold phrase, checkmark, dots, "Learn more" buttons ──── */ #pm-services .pmsvc-note b { color:#3C4A78 !important; } #pm-services .pmsvc-note svg { stroke:#3C4A78 !important; } #pm-services .pmsvc-dots button.is-on { background:#3C4A78 !important; } #pm-services .pmsvc-card__btn { background:#3C4A78 !important; } #pm-services .pmsvc-card__btn:hover { background:#212B47 !important; } /* ── 2b. "Your kid's pretty great." band — pale mint bg → pale theme (desktop) */ @media (min-width:701px){ .reassure { background:linear-gradient(180deg,#f4f6fc 0%,#edf1fa 55%,#e3e9f7 100%) !important; } } /* ── 3. THE BRIEF (booklet) — every teal accent → theme, keep orange/coral ─── */ #pm-book { --teal:#3C4A78 !important; --teal-2:#5C74B8 !important; --teal-3:#9FB0DC !important; --teal-soft:#EAF0FB !important; } .pm-book__chapter[data-chapter="1"], .pm-book__page[data-page="1"] { --chapter-color:#3C4A78 !important; } .pm-book__chapter[data-chapter="2"], .pm-book__page[data-page="2"] { --chapter-color:#5C74B8 !important; } .pm-book__chapter[data-chapter="5"], .pm-book__page[data-page="5"] { --chapter-color:#3C4A78 !important; } .pm-book__chapter:hover { background:rgba(60,74,120,0.08) !important; color:rgba(18,59,66,0.95) !important; } .pm-book__chapter.is-active { color:#123b42 !important; background:radial-gradient(ellipse at 50% 100%, rgba(60,74,120,0.22) 0%, rgba(60,74,120,0.10) 38%, transparent 75%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,1), inset 0 -2.5px 0 rgba(60,74,120,0.75) !important; } .pm-book__chapter:hover .pm-book__chapter-num, .pm-book__chapter.is-active .pm-book__chapter-num { color:#3C4A78 !important; } .pm-book__chapter:focus-visible { box-shadow:inset 0 0 0 2px rgba(60,74,120,0.55) !important; } .pm-book__chapter + .pm-book__chapter::after { background:linear-gradient(180deg, transparent, rgba(18,59,66,0.16), rgba(60,74,120,0.45), rgba(18,59,66,0.16), transparent) !important; } .pm-book__chapter.is-active::before { box-shadow:0 0 0 3px rgba(60,74,120,0.26), 0 0 14px rgba(60,74,120,0.55) !important; } @keyframes pmBookPulse { 0%,100%{ box-shadow:0 0 0 3px rgba(60,74,120,0.26), 0 0 14px rgba(60,74,120,0.55);} 50%{ box-shadow:0 0 0 5px rgba(60,74,120,0.16), 0 0 24px rgba(245,215,130,1);} } .pm-book__chapters { box-shadow: 0 0 0 1px rgba(18,59,66,0.28), 0 0 0 2px #ffffff, 0 0 0 3px rgba(60,74,120,0.28), inset 0 1px 0 rgba(255,255,255,1), 0 30px 60px -28px rgba(20,20,30,0.18), 0 8px 18px -8px rgba(20,20,30,0.10) !important; } .pm-book-scroll__progress { background:rgba(60,74,120,0.10) !important; } .pm-book-scroll__progress-fill { background:linear-gradient(90deg,#3C4A78,#5C74B8,#3C4A78) !important; background-size:200% 100%; } #pm-book .pm-ed__donut svg circle[stroke="#0E7C82"] { stroke:#3C4A78 !important; } /* ── 3b. THE BRIEF — PHONE DECK (`.pm-hww__*`, ≤760px) ───────────────────── Caleb 2026-08-04: the desktop booklet above has been themed since day one, but the PHONE deck that REPLACES it (`.pm-book-scroll` is display:none ≤760px) was never touched — chapter cards, the swipe hint, the dots and the two arrows all still wore base teal. Mirrors the desktop chapter map EXACTLY: Ch1 + Ch5 = primary, Ch2 = light, **Ch3 orange + Ch4 coral stay put** (same constant the desktop `--chapter-color` rules keep). Every card is covered. `--cc` is an INLINE style on each
, so these need !important to win — that is what repaints the head band, roman numeral, eyebrow, folio, row icons/numbers, card border and dashed foot in one go. */ .pm-hww__card[data-page="1"] { --cc:#3C4A78 !important; } .pm-hww__card[data-page="2"] { --cc:#5C74B8 !important; } .pm-hww__card[data-page="5"] { --cc:#3C4A78 !important; } .pm-hww__h2 em { color:#3C4A78 !important; } /* "One contract." */ .pm-hww__note b { color:#3C4A78 !important; } /* "Swipe through the five chapters" */ .pm-hww__note svg { stroke:#3C4A78 !important; } /* its tick — inline stroke attr */ .pm-hww__dots button.is-on { background:#3C4A78 !important; } .pm-hww__arrow { border-color:rgba(60,74,120,.40) !important; color:#3C4A78 !important; } .pm-hww__arrow:not([disabled]):active { background:rgba(60,74,120,.06) !important; border-color:#3C4A78 !important; } .pm-book__page-body .pm-ed__donut::after { background-image: radial-gradient(circle at 14% 20%, rgba(60,74,120,0.85) 0px, transparent 1.6px), radial-gradient(circle at 86% 22%, rgba(230,138,61,0.85) 0px, transparent 1.4px), radial-gradient(circle at 88% 80%, rgba(221,84,64,0.85) 0px, transparent 1.5px), radial-gradient(circle at 12% 78%, rgba(255,255,255,0.9) 0px, transparent 1.2px), radial-gradient(circle at 50% 6%, rgba(255,255,255,0.7) 0px, transparent 1px), radial-gradient(circle at 50% 96%, rgba(255,255,255,0.7) 0px, transparent 1px) !important; } #pm-book .pm-ed__area[style*="#0E7C82"] { --area-color:#3C4A78 !important; } #pm-book .pm-ed__step[style*="#0E7C82"] { --step-color:#3C4A78 !important; } #pm-book .pm-ed__step[style*="#36A6A4"] { --step-color:#5C74B8 !important; } #pm-book .pm-ed__journey::before { background:linear-gradient(to right, #3C4A78 0%, #5C74B8 30%, #E68A3D 65%, #DD5440 100%) !important; } #pm-book .pm-ed__bar-fill[style*="#0E7C82"] { --bar-1:#3C4A78 !important; --bar-2:#5C74B8 !important; } #pm-book .pm-ed__plan-letter { box-shadow:0 0 0 1px rgba(14,23,33,0.06), 0 5px 14px -3px rgba(60,74,120,0.4) !important; } #pm-book .pm-ed__scene-icon { background:linear-gradient(135deg, rgba(60,74,120,0.14) 0%, rgba(60,74,120,0.04) 100%) !important; border-color:rgba(60,74,120,0.22) !important; } #pm-book .pm-ed__pillar:hover { box-shadow:0 24px 48px -16px rgba(60,74,120,0.45) !important; } /* ── 4. "The waiting list is open." — pill, numbers, dots, trust icons + button */ .wlb__pill { color:#3C4A78 !important; border-color:rgba(60,74,120,.32) !important; } .wlb-spot__count b { color:#3C4A78 !important; } .wlb-spot__pips i.is-taken { background:linear-gradient(90deg,#3C4A78,#5C74B8) !important; box-shadow:0 1px 4px -1px rgba(60,74,120,.5) !important; } .wlb-spot__pips i.is-next { background:rgba(60,74,120,.22) !important; } .wlb__facts svg { stroke:#3C4A78 !important; } .wlb__row:focus-within { border-color:#3C4A78 !important; box-shadow:0 0 0 3px rgba(60,74,120,.12) !important; } @media (max-width:720px){ .wlb__row input:focus { border-color:#3C4A78 !important; box-shadow:0 0 0 4px rgba(60,74,120,.14) !important; } } .wlb__go { background:#3C4A78 !important; } .wlb__go:hover { background:#212B47 !important; } /* ── 5. WHO THIS FITS + LIMITLESS + its CTA + the tab/card greens ─────────── */ .pmfc-eyebrow { color:#3C4A78 !important; } .pmfc-title em { color:#3C4A78 !important; } .ckfs-title em { color:#3C4A78 !important; } @media (max-width:600px){ .ckfs-title em { color:#3C4A78 !important; } } .ckf-close__hire a { color:#3C4A78 !important; border-bottom-color:rgba(60,74,120,.35) !important; } /* PHONES (Caleb 2026-08-04): under 601px that same link is rendered as a full- width SOLID BUTTON (see index.html @media max-width:600.98px). It was still wearing the base coral #e56a45 while the rule above painted its label theme- coloured — theme text on orange. Give it the whole button: theme fill, white label, theme-tinted lift. Breakpoint must stay matched to index.html's. */ @media (max-width:600.98px){ .ckf-close__hire a { background:linear-gradient(135deg,#4E6FB5 0%,#3C4A78 52%,#212B47 100%) !important; color:#fff !important; box-shadow:0 16px 34px -16px rgba(60,74,120,.62), 0 2px 6px -2px rgba(33,43,71,.34), inset 0 1px 0 rgba(255,255,255,.28) !important; } .ckf-close__hire a:active { background:linear-gradient(135deg,#5C80C8 0%,#47568A 52%,#2B3760 100%) !important; } } .pmfc-tab.is-on { border-color:#3C4A78 !important; background:#3C4A78 !important; } .pmfc-card[style*="#0E7C82"] { --pc:#3C4A78 !important; } .pmfc-card[style*="#36A6A4"] { --pc:#5C74B8 !important; } .pmfc-chip { background:rgba(60,74,120,.12) !important; color:#3C4A78 !important; } /* ── 6. FEATURES — "Try every tool" explorer (js/landing-tools.js) ────────── */ /* section headline italic — "Our featured *education* tool." on phones / "Yours also gets *the platform.*" on desktop. Base is teal #0E7C82, set inside the STYLE string that landing-tools.js injects into , so it needs the override here (Caleb 2026-08-04). */ .pmts-title em { color:#3C4A78 !important; } .pmts-rail__item.is-active { background:#3C4A78 !important; box-shadow:0 12px 26px -12px rgba(60,74,120,.55) !important; } .pmts-panel__chip { color:#3C4A78 !important; background:rgba(60,74,120,.07) !important; border-color:rgba(60,74,120,.16) !important; } .pmts-panel__demo { color:#3C4A78 !important; border-bottom-color:rgba(60,74,120,.3) !important; } .pmts-pv-asn__count { color:#3C4A78 !important; background:rgba(60,74,120,.08) !important; } .pmts-pv-asn__blank { border-bottom-color:rgba(60,74,120,.4) !important; color:#3C4A78 !important; } .pmts-pv-asn__caret { background:#3C4A78 !important; } .pmts-pv-asn__opt.is-picked { border-color:rgba(60,74,120,.55) !important; background:rgba(60,74,120,.05) !important; } .pmts-pv-asn__opt.is-picked .pmts-pv-asn__radio { border-color:#3C4A78 !important; } .pmts-pv-asn__opt.is-picked .pmts-pv-asn__radio::after { background:#3C4A78 !important; } .pmts-pv-asn__save { color:#3C4A78 !important; border-color:rgba(60,74,120,.25) !important; } /* ── PREMIUM BUTTONS ── hero = theme gradient + soft glow; "Learn more" + waitlist = LIGHT theme by default, fill to solid on hover; service card border. */ .hero__btn { background:linear-gradient(135deg,#4E6FB5 0%,#3C4A78 52%,#212B47 100%) !important; color:#fff !important; box-shadow:0 12px 28px -8px rgba(60,74,120,.55), 0 2px 6px -2px rgba(33,43,71,.40), inset 0 1px 0 rgba(255,255,255,.30) !important; } .hero__btn:hover { background:linear-gradient(135deg,#5C80C8 0%,#47568A 52%,#2B3760 100%) !important; color:#fff !important; box-shadow:0 18px 40px -10px rgba(60,74,120,.70), inset 0 1px 0 rgba(255,255,255,.36) !important; } #pm-services .pmsvc-card__btn, .wlb__go { background:#E7ECF9 !important; color:#26325A !important; } #pm-services .pmsvc-card__btn:hover, .wlb__go:hover { background:#3C4A78 !important; color:#fff !important; box-shadow:0 10px 24px -8px rgba(60,74,120,.55) !important; } #pm-services .pmsvc-card { border-color:rgba(60,74,120,.45) !important; } #pm-services .pmsvc-card:hover { border-color:#3C4A78 !important; box-shadow:0 26px 54px -26px rgba(60,74,120,.38) !important; } /* ── 7. CONNECTED REFINEMENTS (Caleb 2026-08-01) — leaks the old per-colour files missed; now defined once so ALL colours share them. ──────────────── */ /* (a) Who-This-Fits carousel: arrow circles + < > chevrons → theme; the dot you're ON → theme (others stay grey); white fill; soft hover. */ .pmfc-arrow { border-color:rgba(60,74,120,.40) !important; color:#3C4A78 !important; background:#fff !important; } .pmfc-arrow:hover { border-color:#3C4A78 !important; background:rgba(60,74,120,.06) !important; } .pmfc-dots button.is-on { background:#3C4A78 !important; } /* (b) closing line → theme. Caleb 2026-08-04: the WHOLE sentence is theme now, not just the italic tail — "One trusted adult who carries it with you" was still navy while "— not five strangers." went colour, which read as two different thoughts. One line, one colour; the italic keeps the emphasis. */ .pmwhat-close { color:#3C4A78 !important; } .pmwhat-close em { color:#3C4A78 !important; } /* (b2) the phone-only "One thread through it all" band under the hero — its eyebrow and the "Education, life skills, childcare & personal support" line both read `var(--teal)` (#178A62, a green) off the section root, so with the thread graphic gone this was the last green left in an otherwise themed phone page. One token, both lines. (Caleb 2026-08-04 — NOT specifically asked for; flagged to him. Revert = delete this rule.) */ .pmot-thread { --teal:#3C4A78 !important; } /* (c) italic accents "in your home." / "themselves." / "as they do." (base green #2F7D46) → theme. */ .ckfs-ct em { color:#3C4A78 !important; } /* (d) FEATURES explorer mint stage/rails → soft theme blush. */ .pmts-explorer { background:linear-gradient(180deg, rgba(60,74,120,.04) 0%, rgba(60,74,120,.07) 100%) !important; border-color:rgba(60,74,120,.12) !important; } .pmts-panel__prev { background:linear-gradient(165deg, rgba(60,74,120,.05) 0%, rgba(60,74,120,.08) 60%, rgba(60,74,120,.11) 100%) !important; } .pmts-rail { background:linear-gradient(180deg, rgba(60,74,120,.04) 0%, rgba(60,74,120,.07) 100%) !important; } /* (e) the two BASE-coloured buttons that used to ignore the theme: the nav "Waiting List" pill (a.nav-cta beats shared.css) + the food-section "Get started" (.ckfs-cta). */ a.nav-cta { background:#3C4A78 !important; box-shadow:0 4px 14px rgba(60,74,120,.30) !important; } a.nav-cta:hover { box-shadow:0 6px 20px rgba(60,74,120,.40) !important; } .ckfs-cta { background:#3C4A78 !important; box-shadow:0 14px 30px -16px rgba(60,74,120,.55) !important; } .ckfs-cta:hover { background:#212B47 !important; } /* ── 8. "What your Assistant actually does" (#pm-what · .pmws accordion) — had its OWN hard-coded pink; RE-DESIGNED to use the theme with real hierarchy: NAVY titles anchor each card · theme carries the subtitle · closed rows stay calm with a faintly-tinted + · the OPEN row is the focal "moment" (soft theme wash + themed label + filled × + theme shadow). Colour with depth, not flat. */ .pmwhat-title em { color:#3C4A78 !important; } /* "actually" — italic accent, like the page's other headings */ .pmws__card { border-color:rgba(60,74,120,.30) !important; } .pmws__ctitle { color:#123b42 !important; } /* strong navy anchor */ .pmws__csub { color:#3C4A78 !important; } /* theme accent line */ /* timeline variant bits (mobile) stay themed */ .pmws__no { color:#3C4A78 !important; } .pmws__dot { border-color:#3C4A78 !important; box-shadow:0 0 0 3px rgba(60,74,120,.14) !important; } .pmws__tl::before { background:#3C4A78 !important; } .pmws__arrow { border-color:rgba(60,74,120,.40) !important; color:#3C4A78 !important; } .pmws__dots button.is-on { background:#3C4A78 !important; } .pmws__head:focus-visible { outline-color:#3C4A78 !important; } /* PHONE CATEGORY TABS (Caleb 2026-08-04) — ≤720px the two cards collapse behind an "In the Session" / "The Off-Duty Strategy" switcher, and it was the one bit of this section still hard-navy while everything under it went theme. Desktop hides .pmws__tabs entirely, so these need no media query. The ACTIVE tab is the mobile stand-in for the desktop .pmws__csub accent — same theme colour. */ .pmws__tab { border-color:rgba(60,74,120,.26) !important; color:#123b42 !important; } .pmws__tab[aria-pressed="true"] { background:linear-gradient(135deg,#4E6FB5 0%,#3C4A78 52%,#212B47 100%) !important; border-color:#3C4A78 !important; color:#fff !important; box-shadow:0 12px 24px -12px rgba(60,74,120,.58), inset 0 1px 0 rgba(255,255,255,.26) !important; } /* CLOSED rows — calm: whisper outline + a faintly-tinted + circle. Hover lifts with a soft theme wash, deeper border, and the + turns theme. */ .pmws__head { border-color:rgba(60,74,120,.20) !important; } .pmws__head:hover { border-color:rgba(60,74,120,.50) !important; background:rgba(60,74,120,.04) !important; } .pmws__plus { border-color:rgba(60,74,120,.34) !important; background:rgba(60,74,120,.045) !important; } .pmws__head:hover .pmws__plus { border-color:#3C4A78 !important; } .pmws__head:hover .pmws__plus::before, .pmws__head:hover .pmws__plus::after { background:#3C4A78 !important; } /* OPEN row — the theme moment: soft wash, themed label + filled ×, theme shadow. */ .pmws__node.is-open { border-color:rgba(60,74,120,.30) !important; background:linear-gradient(180deg, rgba(60,74,120,.06) 0%, rgba(60,74,120,.02) 100%) !important; box-shadow:0 26px 50px -30px rgba(60,74,120,.38) !important; } .pmws__node.is-open .pmws__head { border-color:transparent !important; background:transparent !important; } .pmws__node.is-open .pmws__name { color:#3C4A78 !important; } .pmws__node.is-open .pmws__plus { border-color:#3C4A78 !important; background:rgba(60,74,120,.10) !important; } .pmws__node.is-open .pmws__plus::before, .pmws__node.is-open .pmws__plus::after { background:#3C4A78 !important; } /* ── 9. "An assistant for every use case" (.apx monday-style section) — the one themed accent in that otherwise-neutral light section: the "We don't play games" lead-in of the subtitle. ─────────────────────────────────────────── */ .apx__sub-a { color:#3C4A78 !important; } /* premium theme-connected .apx (2026-08-02): the category pills, open item, main card glow, CTA + dots all follow the theme colour. Base (green) = teal in index.html. */ .apx__item { border-color:rgba(60,74,120,.26) !important; } .apx__item:hover:not(.is-open) { background:rgba(60,74,120,.05) !important; border-color:#3C4A78 !important; box-shadow:0 6px 15px -8px rgba(60,74,120,.24) !important; } .apx__item.is-open { border-color:rgba(60,74,120,.30) !important; background:linear-gradient(180deg,#fff 0%, rgba(60,74,120,.05) 100%) !important; box-shadow:0 16px 38px -18px rgba(60,74,120,.30) !important; } .apx__item.is-open .apx__head-t { color:#3C4A78 !important; } .apx__card.is-c .apx__inner { box-shadow:0 30px 56px -26px rgba(60,74,120,.26) !important; border-color:rgba(60,74,120,.14) !important; } .apx__cta--card { color:#3C4A78 !important; border-color:#3C4A78 !important; } .apx__cta--card:hover { background:#3C4A78 !important; color:#fff !important; box-shadow:0 12px 24px -12px rgba(60,74,120,.5) !important; } .apx__dot.is-on { background:#3C4A78 !important; } /* ── 10. "Watch your kids do the work." — Homework Recorder showcase (.hx) ─── The section's BASE look in index.html is the original monday purple and is left alone (green = untouched baseline, Caleb's revert point). Everything coloured in it reads from 5 vars on `.hx`, so overriding those recolours the right-hand preview panel, the selector card's input-box border, the little "family assistant" heart and the card/frame shadows; the section wash, the left rail tint + its two edge fades and the stage shadow are re-tinted just below (their base values are literal purple greys). ────────────────────── */ .hx { --hx-p:#3C4A78 !important; --hx-d:#212B47 !important; --hx-l:#5C74B8 !important; --hx-rgb:60,74,120 !important; --hx-drgb:33,43,71 !important; } .hx { background:linear-gradient(0deg,rgba(60,74,120,.045),rgba(60,74,120,.045)),#fff !important; } .hx-stage { box-shadow:0 44px 100px -44px rgba(33,43,71,.42),0 4px 18px -6px rgba(30,34,72,.12) !important; } /* rail tint + fades: the fade layers the same tint over a white fade, so it lands on the rail's exact colour without a per-colour opaque token. */ .hx-left { background:linear-gradient(0deg,rgba(60,74,120,.075),rgba(60,74,120,.075)),#fff !important; } .hx-left::before { background:linear-gradient(180deg,rgba(60,74,120,.075),rgba(60,74,120,0)),linear-gradient(180deg,#fff,rgba(255,255,255,0)) !important; } .hx-left::after { background:linear-gradient(0deg,rgba(60,74,120,.075),rgba(60,74,120,0)),linear-gradient(0deg,#fff,rgba(255,255,255,0)) !important; } /* ── §11. CLOSING CTA (#pmFinalCta) — the "Join the Waiting List" button under the arc of faces. Base (green) keeps its original orange; every colour skin gives it the same gradient + glow treatment as the hero button. ────────── */ .pm-final-cta__btn { background:linear-gradient(135deg,#4E6FB5 0%,#3C4A78 52%,#212B47 100%) !important; color:#fff !important; box-shadow:0 12px 28px -8px rgba(60,74,120,.55), 0 2px 6px -2px rgba(33,43,71,.40), inset 0 1px 0 rgba(255,255,255,.30) !important; } .pm-final-cta__btn:hover { background:linear-gradient(135deg,#5C80C8 0%,#47568A 52%,#2B3760 100%) !important; color:#fff !important; box-shadow:0 18px 40px -10px rgba(60,74,120,.70), inset 0 1px 0 rgba(255,255,255,.36) !important; } /* ── §12. FAQ (#faq) — everything EXCEPT the "Frequently Asked Questions" heading, which stays ink on every colour: the small FAQ kicker, the numbered badge (rest / hover / open), the question text, the + that twists, and a whisper-thin wash on the open row. ─────────────────────────────────────── */ #faq .faq-eyebrow { color:#3C4A78 !important; } .faq-badge { background:rgba(60,74,120,.07) !important; color:#212B47 !important; } .faq-btn:hover .faq-badge { background:rgba(60,74,120,.16) !important; color:#3C4A78 !important; box-shadow:0 8px 18px -10px rgba(60,74,120,.55) !important; } .faq-btn:hover .faq-question { color:#3C4A78 !important; } .faq-btn:hover .faq-toggle svg { stroke:#3C4A78 !important; } .faq-row.open .faq-badge { background:linear-gradient(135deg,#5C74B8 0%,#3C4A78 55%,#212B47 100%) !important; color:#fff !important; box-shadow:0 12px 26px -12px rgba(60,74,120,.60) !important; } .faq-row.open .faq-question { color:#3C4A78 !important; } .faq-row.open .faq-toggle svg { stroke:#3C4A78 !important; } .faq-row.open { background:linear-gradient(90deg,rgba(60,74,120,.05),rgba(60,74,120,0) 62%) !important; } .faq-row:hover { background:linear-gradient(90deg,rgba(60,74,120,.03),rgba(60,74,120,0) 62%) !important; } /* 2026-08-03 — "Show all questions" expander (only 5 questions show at rest). Caleb asked for it clean, thin and light, with the ring "connected to the colour": so the border carries a soft tint of the theme AT REST (not only on hover), the count is plain theme-coloured type rather than a filled chip, and the label stays quiet ink at weight 500. No shadow, no lift — thin ring only. */ .faq-more { border-color:rgba(60,74,120,.26) !important; } .faq-more:hover { border-color:rgba(60,74,120,.55) !important; background:rgba(60,74,120,.028) !important; } .faq-more__n { color:#3C4A78 !important; } .faq-more:hover .faq-more__chev { color:#3C4A78 !important; } .faq-more:focus-visible { outline-color:#3C4A78 !important; } /* ── §12b. "Skip gallery" pill (#sp-skip, the Real Moments gallery) ───────── 2026-08-03 — was a white ghost button on a white card and nobody saw it. It is now a solid pill in the theme's hero-button gradient, with the attention halo tinted to match. Motion + shape live in index.html next to the button; only colour is themed here. ─────────────────────────────────────────────── */ #sp-skip { background:linear-gradient(135deg,#4E6FB5 0%,#3C4A78 52%,#212B47 100%) !important; box-shadow:0 10px 26px -10px rgba(60,74,120,.70), 0 2px 6px -2px rgba(33,43,71,.30), inset 0 1px 0 rgba(255,255,255,.28) !important; } #sp-skip:hover { box-shadow:0 16px 34px -12px rgba(60,74,120,.85), inset 0 1px 0 rgba(255,255,255,.34) !important; } #sp-skip::after { border-color:rgba(60,74,120,.55) !important; } /* ── §13. FAMILY JOURNEY MAP (#pmFamilyMap) — the chrome AROUND the map only. The pins and the category dots keep their fixed meanings (orange = activities, blue = educational, green = support, red HOME, teal ASSISTANT); recolouring those would break the legend. Themed: the section kicker, the mode toggle's active pill, the three headline numbers, the family avatar tile, the search focus ring and the zoom control's hover. ─────────────────────────────────── */ #pmFamilyMap .lm-eyebrow { color:#3C4A78 !important; } #pmFamilyMap .lm-toggle__btn.is-active { background:#3C4A78 !important; color:#fff !important; box-shadow:0 2px 10px rgba(60,74,120,.34) !important; } #pmFamilyMap .lm-ostats b { color:#3C4A78 !important; } #pmFamilyMap .lm-fam__av { background:linear-gradient(135deg,#5C74B8,#212B47) !important; } #pmFamilyMap .lm-search:focus { border-color:#3C4A78 !important; box-shadow:0 0 0 3px rgba(60,74,120,.14) !important; } #pmFamilyMap .leaflet-control-zoom a:hover { color:#3C4A78 !important; } /* ── §14. INTERACTIVE DEMO (#pmInteractiveDemo) — the section's own chrome, not the dashboard inside it. The replica is meant to read as the REAL product, so its sidebar, badges and status colours stay exactly as the app ships; only the parts that belong to the landing page follow the picker: the eyebrow's gradient wordmark and the "open the dashboard" button (fill + glow). ─────── */ #pmInteractiveDemo .pmdemo-head__eyebrow { background:linear-gradient(90deg,#5C74B8 0%,#3C4A78 55%,#212B47 100%) !important; -webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important; } #pmInteractiveDemo .pmdemo-cta__button { background:linear-gradient(135deg,#5C74B8 0%,#3C4A78 60%,#212B47 100%) !important; box-shadow:0 1px 2px rgba(15,23,42,.05),0 16px 36px -10px rgba(60,74,120,.65),0 0 0 6px rgba(255,255,255,.18),inset 0 1px 0 rgba(255,255,255,.30) !important; } #pmInteractiveDemo .pmdemo-cta__button:hover { box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 56px -10px rgba(60,74,120,.75),0 0 0 6px rgba(255,255,255,.24),inset 0 1px 0 rgba(255,255,255,.34) !important; } #pmInteractiveDemo .pmdemo-viewpick__opt.is-active { background:#3C4A78 !important; color:#fff !important; box-shadow:0 2px 10px rgba(60,74,120,.34) !important; } /* the signature ring + halo around the preview frame follows the picker too */ #pmInteractiveDemo .pmdemo-stage:not(.is-focused) .pmdemo-frame { box-shadow:0 0 0 1.5px #3C4A78, 0 0 0 2.5px rgba(60,74,120,.50), 0 0 20px rgba(60,74,120,.32), 0 0 56px rgba(60,74,120,.18), 0 1px 2px rgba(15,23,42,.04), 0 30px 80px -24px rgba(15,23,42,.30), 0 0 0 1px rgba(255,255,255,.55) inset !important; } /* ── FOOTER — link colour follows the picker (Caleb 2026-08-06) ───────────── One variable, set once. css/footer.css reads `var(--pm-footer-accent, var(--brand, #2563EB))` for every hover colour and for the wipe-in rule under each link, so this single line themes the whole footer — the four link columns and the legal row — without restating a rule. Deliberately NOT themed: the tagline and the © line stay quiet grey, and the "Soon" entries stay muted with no hover at all. A footer where everything lights up reads cheap; the restraint is what makes the accent land. ─────── */ footer { --pm-footer-accent: #3C4A78 !important; /* hover / underline */ --pm-footer-soft: #EAF0FB !important; /* hairline + wash */ } /* ============================================================================ MIDNIGHT NAVY — THE SPARKLE LAYER (Caleb 2026-08-16) ---------------------------------------------------------------------------- THIS FILE IS HAND-EDITED. It is the ONE per-colour exception to the shared template: build-landing-skins.mjs stamps it with the same recipe tokens and APPENDS it to css/landing-midnight.css, which is only ever enabled while the visitor has Midnight Navy selected. No other colour can see any of it, and the base (green) page is untouched. THE BRIEF: "this doesn't mean going absolutely wild and making the landing page dark — it means placing it at key places where it'll look good and feel good scrolling." So this is NOT a page-wide effect. It is FIVE moments, in scroll order, each chosen because the surface was ALREADY dark or already a colour panel, so nothing on the page gets darker than it is today: 1. THE HERO PHOTO — the arrival. A real drifting starfield over the photo. `mix-blend-mode:screen` means each speck is invisible over faces and bright sky and only shows in the shadows and the vignette — the picture and the headline stay the hero, the night sits behind. 2. THE CTA BUTTONS — a slow starlight sweep across the navy gradient plus one four-point sparkle on the trailing edge. Hero button, closing button, waiting-list Go, and the phone "hire" button — one shared look. 3. THE .hx NIGHT PANEL — mid-page, "Watch your kids do the work". That big right-hand panel is ALREADY a solid colour block; on Midnight it becomes deep navy, so it turns into the page's night sky with two crisp sparkles. 4. THE WAITING LIST — the taken spots shimmer once every few seconds. Tiny, but it is the one place on the page where movement means something: seats going. 5. THE CLOSING CTA — a soft navy aura and a faint constellation ABOVE the arc of faces, fading out before it reaches them, so the last thing you scroll into settles. + the picker's own swatch twinkles while Midnight is the live colour. PERFORMANCE (the landing page has a scroll-jank history — see the image-weight note): every animation here is transform-only or opacity-only, i.e. compositor work, never layout or paint. No filters, no animated blurs, no animated box-shadows, nothing behind a scroll listener. The starfields are ONE element each with a repeating background tile, translated by exactly one tile height so the loop is seamless. Everything is pointer-events:none and aria-hidden by nature (pseudo-elements). All of it stops dead under prefers-reduced-motion. ============================================================================ */ /* the "Be one of the first." wordmark is a fixed green→blue gradient in the base page; on Midnight it becomes the console's own navy→blue lift so the closing line matches the button right under it. */ .pm-final-cta__title .grad{ background:linear-gradient(96deg,#5C74B8 0%,#3C4A78 46%,#212B47 100%) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color:transparent !important; } /* ── 2026-09-04 — PAGE-WIDE SPARKLE INK ────────────────────────────────────── css/landing-sparkle.css draws the starfield and sparkles for EVERY colour now. It needs this palette's hue outside the .hx section too — the --hx-* tokens are scoped to `.hx`, so the waiting-list pill and the closing CTA were resolving to nothing and their sparkles rendered invisible. These are the same values as --hx-p / --hx-l, just published at :root where the whole page can read them. */ :root{ --pm-spark-ink:#3C4A78 !important; --pm-spark-rgb:60,74,120 !important; --pm-spark-lift:#5C74B8 !important; }