/* ============================================================================ LANDING TYPE SYSTEM — THE ROLE MAP (Caleb 2026-08-16) ---------------------------------------------------------------------------- This file gives the landing page a TYPOGRAPHIC VOCABULARY. It changes nothing on its own: with no type skin enabled, every token below resolves to the same Poppins stack the page already had, so the default page is byte-for-byte the look it is today. It is the foundation the PAGE TYPE picker stands on. WHY THIS FILE EXISTS Before today the whole page was one line — #pm-site-font → body, body *{ font-family:'Poppins',… !important; } — a single hammer Caleb added 2026-07-17 ("I wanna see the desktop in this too") that flattened the page's original Fraunces / Inter / Archivo editorial system into ONE face. That was a deliberate call and it still is the default. But because everything is one family, ALL hierarchy has to come from size and weight alone, and that is exactly the difference Caleb spotted between this page and the owner console, which runs Nunito with real weight separation. So: same hammer, four nails instead of one. Everything still gets a family assigned from a single place — it is now assigned BY ROLE. --pmt-display the headline moments: the hero H1, every section H2, the big numerals and romans in the Brief. --pmt-heading card and row titles — the second level of the page. --pmt-body paragraphs, descriptions, and the catch-all for anything not claimed by another role. Most of the page. --pmt-ui eyebrows, labels, chips, tabs, buttons, nav — the small tracked type that frames the content. CASCADE `body, body *` is specificity (0,0,2) so every class-based role rule below beats it, and this file loads AFTER #pm-site-font so it wins the tie. Each skin then only has to re-point four variables — it never restates a selector. TWO THINGS ARE DELIBERATELY LOCKED AND NO SKIN CAN REACH THEM — see §5. REVERT: remove this file's and the page falls straight back to the #pm-site-font hammer, untouched, still in the file above it. ============================================================================ */ /* ── 0) THE TOKENS — defaults are TODAY'S PAGE, exactly ───────────────────── All four roles resolve to the same Poppins stack #pm-site-font already set, so this file is a no-op until a skin re-points them. */ :root{ --pmt-display:'Poppins','Inter',system-ui,-apple-system,sans-serif; --pmt-heading:'Poppins','Inter',system-ui,-apple-system,sans-serif; --pmt-body:'Poppins','Inter',system-ui,-apple-system,sans-serif; --pmt-ui:'Poppins','Inter',system-ui,-apple-system,sans-serif; /* the product replicas on this page follow the APP, never the marketing skin */ --pmt-app:'Poppins','Inter',system-ui,-apple-system,sans-serif; } /* ── 1) BODY — the catch-all ──────────────────────────────────────────────── Same selector and same weight as the rule it replaces, so nothing underneath it can surface unexpectedly. Everything is body type until a role claims it. */ body, body *{ font-family:var(--pmt-body) !important; } /* ── 2) DISPLAY — the headline moments ────────────────────────────────────── Every H1/H2-scale line on the page, section by section, plus the oversized numerals that are set as display type rather than data (the Brief's romans, the stat numbers, the donut centre). If it is the biggest thing in its section, it is here. */ .hero__title, .reassure__title, .reassure__title span, .pmot-line, #pm-services .pmsvc-h2, .pm-ed__title, .pm-ed__block-roman, .pm-ed__stat-num, .pm-ed__stat-num--small, .pm-ed__donut-center-num, .pm-ed__cta-title, .pm-ed__area-pct, .pm-book__title, .pm-book__cover-title, .pm-book-hero__title, .pm-book__page-title, .pm-book__page-roman, .pm-book-scroll .pm-book__page-head .pm-book__page-title, .pm-book-scroll .pm-book__page-head .pm-book__page-roman, .pm-hww__h2, .pm-hww__roman, .wlb__title, .pmfc-title, .pmwhat-title, #pm-grocers .pmgro-phrase, .ckf-head__title, .ckf-stage__txt h3, .ckf-treats h3, .ckf-menus__h, .ckfs-title, .ckfs-ct, .apx__title, .hx-title, .pmts-title, #sp-sticky h2, .pm-testi-light .pm-testi-h, #faq .faq-title, #faq h2, #pmFamilyMap .lm-title, #pmInteractiveDemo .pmdemo-head__title, .pm-final-cta__title, .pm-mp__price, .pm-calc-hero__cost-val{ font-family:var(--pmt-display) !important; } /* ── 3) HEADING — card and row titles, the second level ───────────────────── The titles INSIDE a section's cards, rows and panels. Kept separate from display on purpose: a face that carries a 64px hero often needs a different one at 22px, and this is the seam where a skin gets to make that call. */ #pm-services .pmsvc-card__title, .pm-ed__block-title, .pm-ed__step-title, .pm-ed__fit-title, .pm-ed__bars-title, .pm-ed__step-disc, .pm-book__page-body .pm-ed__block-title, .pm-book__page-body .pm-ed__step-title, .pm-book-hero__lede, .pm-hww__ctitle, .pmfc-card__t, .pmws__ctitle, .pmws__csub, .pmws__name, .pmws__no, .ckf-mcard__t, .ckfs-menu__t, .ckfs-card--menu .ckfs-menu__step, .apx__head-t, .apx__item.is-open .apx__head-t, .apx__name, .apx__name--r, .apx__sub, .apx__sub-a, .hx-msg__title, .hx-opt__label, #faq .faq-question, #pmFamilyMap .lm-ostats b, .pm-mp__title, .wlb-spot__label, .pm-final-cta__meta{ font-family:var(--pmt-heading) !important; } /* ── 4) UI — eyebrows, labels, chips, tabs, buttons, nav ──────────────────── The small tracked type that frames the content. Matched by PATTERN as well as by name: the page has ~74 uppercase-and-tracked labels and they are named with real discipline (`__eyebrow`, `__kicker`, `__label`, `__folio`), so the attribute selectors below catch the ones that exist today AND any added later. A skin that wants a different face for small caps changes one token. */ [class*="eyebrow"], [class*="kicker"], [class*="__label"], [class*="__folio"], .hero__eyebrow, .nav a, .nav-cta, a.nav-cta, .nav-lock-soon, .hero__btn, .pm-final-cta__btn, .wlb__go, #pm-services .pmsvc-card__btn, .apx__cta, .apx__cta--card, .hx-cta, .ckfs-cta, .ckf-close__hire a, #sp-skip, .pmfc-tab, .pmws__tab, .pmfc-cue, .pmfc-chip, .pmts-panel__chip, .pm-ed__chip, .ckfs-chip, .apx__tag, .apx__pill-t, .wlb__pill, .pm-book-hero__chip, .pm-book__pager-status, .pm-ed__meta, .pm-ed__block-count, .pm-ed__pillar-num, .pm-ed__scene-num, .pm-ed__stat-or, .pm-ed__step-stat, .pm-calc__field-label, .pm-calc__weekly-label, .pm-calc-block__group-label, .hx-msg__live, #pmFamilyMap .lm-toggle__btn, #pmInteractiveDemo .pmdemo-viewpick__opt, #pmInteractiveDemo .pmdemo-cta__button, .faq-more, .faq-badge, .pmvibe-solo .mv-vibe{ font-family:var(--pmt-ui) !important; } /* ── 5) LOCKED — two things no skin may ever touch ────────────────────────── (a) THE ORGANISATION AND SCHOOL WORDMARKS. `#pm-orgs` and `#pm-schools` do not use logo images — each one is a TYPE LOCKUP that recreates a real organisation's wordmark in live text (WorkBC and CLBC in a serif; Dunbar, Kerrisdale and York House in heavy tracked Archivo; West Point Grey in serif caps). Letting a page-wide font control repaint those would not just look wrong, it would put OUR typeface on somebody else's brand. They keep the families they were drawn with, permanently, on every skin. (b) THE PRODUCT REPLICAS. `.hxm` is the real recorder console rendered on the marketing page, and #pmInteractiveDemo frames the real dashboard. They are meant to read as THE PRODUCT, so they follow the app's own font (--pmt-app), exactly as the colour system already leaves the demo's insides alone. Their surrounding marketing chrome — the section title, the CTA — is themed above; only the replica itself is locked. (c) the scanner cards' ASCII art collapses in anything but monospace. */ #pm-orgs .pmorg-t-workbc, #pm-orgs .pmorg-t-clbc1, #pm-orgs .pmorg-t-clbc2, #pm-schools .pmsch-t-wpga1, #pm-schools .pmsch-t-wpga2{ font-family:'Fraunces',Georgia,'Times New Roman',serif !important; } #pm-orgs .pmorg-t-dunbar1, #pm-orgs .pmorg-t-kerr1, #pm-schools .pmsch-t-york{ font-family:'Archivo','Inter',system-ui,sans-serif !important; } .hxm, .hxm *{ font-family:var(--pmt-app) !important; } .scs-card-ascii pre{ font-family:'Courier New', ui-monospace, monospace !important; } /* ── 6) THE CONTROLS STAY PUT ─────────────────────────────────────────────── The PAGE COLOUR and PAGE TYPE pickers keep their own type on every skin. A control whose own label changes shape while you are using it to change type reads as a bug, not a feature — you lose the fixed point you are judging against. Same reason the colour picker is not tinted by the colour it sets. */ #pmThemeDock, #pmThemeDock *, #pmThemePhone, #pmThemePhoneMenu, #pmThemePhoneMenu *, #pmTypeDock, #pmTypeDock *, #pmTypePhone, #pmTypePhoneMenu, #pmTypePhoneMenu *{ font-family:'Poppins',Inter,system-ui,sans-serif !important; }