/* ═══════════════════════════════════════════════════════════════════════════ SERVICE PAGES — inherit the landing page's Page Colour + Page Type Added 2026-09-05. Caleb: "the writing is so much different than what is on the landing before I enter here." WHY A BRIDGE IS NEEDED, rather than just loading the skins: the landing skins (landing-purple.css etc.) are scoped almost entirely to landing selectors (#pm-book, .pm-*). Loading one on a service page changes almost nothing — it only sets three sparkle variables at :root. The service pages carry their own palette (--teal, --ink, --coral). So the skin choice is mapped onto THAT palette here, keyed off data-pm-skin, which the pre-paint snippet in each page's stamps on before first paint. TYPE is different: landing-type.css already sets body font from --pmt-body with !important, so loading the type sheets is enough for body copy. Only the headings need bridging, because the service pages hardcode Fraunces. ═══════════════════════════════════════════════════════════════════════════ */ /* ── PINNED TO THE ICON BLUE — the Page Colour no longer reaches these pages ── Caleb, 2026-09-06: "remove the color theme. i wanna try making all services cards following the blue icon colour … everything that is currently following the colour theme i want converted to this nice premium blue." EVERY accent path on the four service pages funnels through --pm-skin-accent, so pinning that one value converts all of them at once: --acc → 33 rules in pm-service.css (cards, bullets, waves, bands, hero wash, disclosure chevrons, hairlines, focus rings) --teal → the pages' own legacy inline rules (.efaq__ic, .free, …) .pmh__cta / .pmh__dcta → the header's Waiting List pill .ps-cta__btn → the page-bottom CTA and its glow The value comes from --ic in pm-service.css — the SAME token the category card icons use — so the bands, buttons and icons can never drift apart. TO REVERT: restore the five skin rows kept below, and drop this rule. Nothing else in this file changed. html[data-pm-skin="midnight"]{ --pm-skin-accent:#3C4A78; } html[data-pm-skin="purple"] { --pm-skin-accent:#6161F6; } html[data-pm-skin="rose"] { --pm-skin-accent:#E11D48; } html[data-pm-skin="gold"] { --pm-skin-accent:#B8860B; } html[data-pm-skin="teal"] { --pm-skin-accent:#0D9488; } TRADE-OFF, stated rather than absorbed: this also de-links the Waiting List pill from the landing page's Page Colour, which is the exact discontinuity the CTA section below was originally written to fix. Caleb asked for it explicitly; if the pill should keep following the theme, delete .pmh__cta and .pmh__dcta from the selector list at the bottom of this file. */ :root, html[data-pm-skin], html[data-pm-skin="midnight"], html[data-pm-skin="purple"], html[data-pm-skin="rose"], html[data-pm-skin="gold"], html[data-pm-skin="teal"]{ --pm-skin-accent: var(--type, #1E90DE); } /* the service pages' own legacy accent variable follows it too. Stated at both specificities so it holds whether or not a skin is stamped. */ :root{ --teal: var(--type, #1E90DE); } html[data-pm-skin]{ --teal: var(--pm-skin-accent); } /* ── Typography ───────────────────────────────────────────────────────────── landing-type.css line 58 is `body, body *{ font-family:var(--pmt-body) !important; }`, and the rules that restore the DISPLAY face target landing class names only (.pm-mp__price, .pm-final-cta__meta …). So on a service page that sheet flattens every element to one face — measured 2026-09-06: hero title, section titles, row titles and body all rendered Poppins, and the pages' Fraunces headings were gone. That is why !important is needed here: without it these rules lose to `body *` and do nothing at all. The split follows landing-type.css's own documented roles: --pmt-display hero H1 and section H2 — the headline moments --pmt-heading card and row titles — the second level --pmt-body everything else (already forced by the sheet above) So Editorial gives a service page Fraunces headlines over Inter body — the pairing these pages were designed with — while Modern renders Poppins throughout, exactly as the landing does. Hierarchy comes back wherever the chosen type provides it, and never fights the choice where it doesn't. */ html[data-pm-type] .ps-hero__title, html[data-pm-type] .ps-cta__title, html[data-pm-type] .home__title, html[data-pm-type] h1, html[data-pm-type] h2{ font-family: var(--pmt-display, 'Fraunces', Georgia, serif) !important; } html[data-pm-type] .row__title, html[data-pm-type] .cccat__t, html[data-pm-type] h3, html[data-pm-type] h4{ font-family: var(--pmt-heading, 'Inter', system-ui, sans-serif) !important; } /* ── Call-to-action buttons ───────────────────────────────────────────────── Caleb, 2026-09-06: "both waiting lists are blue are they not wired to the theme colour? i dont see it?" He was right, and the reason is worth keeping. The LANDING page DOES theme its Waiting List pill: every skin file carries `a.nav-cta { background:#… !important }`. The service pages never use that markup — they get the shared header injected by js/pm-header.js, whose pill is `.pmh__cta` with #007AFF hardcoded. So the pill genuinely changed colour the moment you left the landing page. Exactly the discontinuity he reported. Fixed HERE rather than in pm-header.js, because that header is on 15 pages and most have no skin stamped. --pm-skin-accent is defined only by this file, so those pages keep #007AFF through the fallback and stay untouched. Specificity, so this needs no !important and never fights the shared header: `html[data-pm-skin] .pmh__cta` is (0,2,1) and beats the (0,1,0) rule that pm-header.js injects, whichever order the two stylesheets happen to land in. ─────────────────────────────────────────────────────────────────────────── */ /* Caleb, 2026-09-06: "i want the button on the header and very bottom for waiting list to also be midnight navy." Navy, not the blue — these are the two things the page is asking you to DO, so they should not blend into the blue surfaces around them. */ /* The HEADER pill is a different component from the big button, on the landing page too — there it is `a.nav-cta`, flat navy with a soft drop, NOT the gradient. Matching it means copying that, not the hero treatment. */ html[data-pm-skin] .pmh__cta, html[data-pm-skin] .pmh__dcta{ background: var(--type, #3C4A78); box-shadow: 0 4px 14px color-mix(in srgb, var(--type) 30%, transparent); } html[data-pm-skin] .pmh__cta:hover{ background: color-mix(in srgb, var(--type) 88%, #000); } /* The page-bottom CTA. Before this, the four service pages disagreed with each other: education / life-skills / personal-support were on --coral (orange) and childcare on #007AFF (blue) — two different buttons, neither following the theme. All four now follow the chosen colour. The glow was `rgba(229,106,69,.7)` on ALL FOUR pages — an orange shadow left behind under childcare's blue button when it was recoloured. It is derived from the accent now, so it can never drift away from the button again. */ /* ── The closing "Join the Waiting List" button ───────────────────────────── Caleb, 2026-09-06: "this landing page waiting list button is WAY more premium and nicer — make all waiting list buttons on all service cards the exact same, even hover or click." These are the Midnight Navy recipe's exact values, copied from css/landing-midnight.css (.hero__btn / .pm-final-cta__btn). They are LITERALS on purpose, and this is the one place in this work I could not share a definition instead of copying it: · landing-midnight.css is AUTO-GENERATED from css/landing-skin.tmpl.css by build-landing-skins.mjs and says "DO NOT EDIT" — anything added there is destroyed on the next build; and · the service pages do not load a skin sheet at all (they are pinned to navy), so there is no shared rule to join, the way .ps-cta__btn could join the sparkle layer. IF THE MIDNIGHT RECIPE EVER CHANGES, mirror it here. The three stops are the recipe's hero-gradient tokens (#4E6FB5 #3C4A78 #212B47) and its hero-hover tokens (#5C80C8 #47568A #2B3760). Geometry is matched too — the service button was radius 11 / weight 700 against the landing's 10 / 600, which is small but is exactly the kind of near-miss that reads as "not quite the same button". */ /* Caleb, 2026-09-06: "the wait list can follow them, try that" — so the gradient is now derived from --type instead of the fixed navy literals. NOTE this is a deliberate step AWAY from "the exact same as the landing page", which was the previous instruction: only Education (blue) still lands near the Midnight recipe. The STRUCTURE is preserved exactly — light stop, type at 52%, deep stop, and a lighter gradient on hover — and the deep stop uses the recipe's own ratio (its #212B47 is #3C4A78 x 0.58). The light stop is mixed in oklab so it lifts without going chalky. */ html[data-pm-skin] .ps-cta__btn{ background: linear-gradient(135deg, color-mix(in oklab, var(--type) 80%, #FFFFFF) 0%, var(--type) 52%, color-mix(in srgb, var(--type) 58%, #000000) 100%); color:#fff; border-radius:10px; font-weight:600; box-shadow: 0 12px 28px -8px color-mix(in srgb, var(--type) 55%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--type) 28%, transparent), inset 0 1px 0 rgba(255,255,255,.30); transition: transform .15s ease, background .15s ease, box-shadow .15s ease; } html[data-pm-skin] .ps-cta__btn:hover{ background: linear-gradient(135deg, color-mix(in oklab, var(--type) 68%, #FFFFFF) 0%, color-mix(in oklab, var(--type) 88%, #FFFFFF) 52%, color-mix(in srgb, var(--type) 72%, #000000) 100%); box-shadow: 0 18px 40px -10px color-mix(in srgb, var(--type) 70%, transparent), inset 0 1px 0 rgba(255,255,255,.36); transform: translateY(-2px); } /* The landing button defines no :active — it goes straight back to the rest state on press. Matching that exactly means NOT inventing one here. */