/* ============================================================================ TYPE SKIN — "SÖHNE STRIPE" · Stripe's typeface in NUNITO'S LAYOUT (Caleb 2026-09-11) ---------------------------------------------------------------------------- The brief, after a wrong turn: the FACE changes, the inks are Stripe's, the accent is the Page Colour's — and every size, position, alignment, case and margin is exactly the Nunito Console page's. Caleb: "I expect the text to be in the same spot on each section … laid out identical each letter and word." So this sheet touches ONE property: font-weight. Nothing else. (An earlier version restated sizes, alignment, buttons and spacing to copy stripe.com's layout — it moved text, and it was reverted the same night.) THE WEIGHT MAP — Nunito's numbers, translated so Söhne looks the way Nunito looks (the static Söhne files run heavy: its 500/600 at small sizes read "pudgy" to Caleb): titles, any size → 400, tracking 0 — Stripe's own title weight ("way less thick"; 600 read chunky, 500 still dense, measured side by side 2026-09-11) sub-titles 15–19px → 400 as well — hierarchy comes from size and ink, as on stripe.com emphasis b/strong → 500 buttons ≥ 16px → 500 buttons, tabs, chips < 16px → 400 ("thinner") everything small → 400 (eyebrows, labels, names, meta, facts, numbers, footer) body stays 400 — never 300 ("thin paper") — plus +.012em of air: Söhne's letters sit closer than Nunito's and the reading text felt "stacked" Colours: titles take Stripe's ink #061b31 through the Services standard (--pmm-ink); every other colour — leads, body, eyebrows, the title's second sentence — is the page's own, so the accent follows the Page Colour and the Nunito relationships hold. THE FILES ARE KLIM'S TEST FONTS — evaluation licence only (Caleb asked Klim and was told he may try them). fonts/soehne-test/ is gitignored and named in serve-mobile.py's LOCAL_ONLY_PREFIXES; it cannot ship. 69 glyphs (A–Z a–z 0–9 , - . Ö ö): apostrophes, dashes and accents fall to the phone's SF Pro until the licensed files land. TO GO LIVE: buy the Klim web licence — static styles used here are Buch 400, Kräftig 500, Halbfett 600 — or the variable web font if offered; put the files in fonts/soehne/, repoint the @font-face rows, delete the rest, drop the gitignore line and the server exception. Weight numbers below are for the STATIC files; a variable file may need them re-measured (Stripe's variable "300" renders like static 400 — see the memory notes). ============================================================================ */ @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Extraleicht.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-ExtraleichtKursiv.otf') format('opentype'); font-weight:200; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Leicht.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-LeichtKursiv.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Buch.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-BuchKursiv.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Kraftig.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-KraftigKursiv.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Halbfett.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-HalbfettKursiv.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Dreiviertelfett.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-DreiviertelfettKursiv.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Fett.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-FettKursiv.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-Extrafett.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; } @font-face{ font-family:'Soehne'; src:url('../fonts/soehne-test/TestSohne-ExtrafettKursiv.otf') format('opentype'); font-weight:900; font-style:italic; font-display:swap; } /* ── the four roles → Söhne. The fallback order matters: characters the test faces lack go to -apple-system (SF Pro on iPhone/Mac — Stripe's own fallback). --pmt-cjk stays second so Chinese still lands in its designed face. --pmt-app is NOT re-pointed: the product replicas follow the app, never the marketing skin. ── */ :root{ --pmt-display:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Display',system-ui,'Inter',sans-serif; --pmt-heading:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Display',system-ui,'Inter',sans-serif; --pmt-body:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Text',system-ui,'Inter',sans-serif; --pmt-ui:'Soehne',var(--pmt-cjk),-apple-system,'SF Pro Text',system-ui,'Inter',sans-serif; } /* ── DESKTOP — family only, plus the one number that keeps Söhne from going heavy where the base page says 700/800: display type at 600. Sizes untouched (desktop is out of scope, Caleb 2026-09-11). Wrapped in min-width so nothing here can leak onto phones. ── */ @media (min-width:761px){ .hero__title, .reassure__title, #pm-services .pmsvc-h2, .pm-ed__title, .pm-book__title, .pm-book__cover-title, .pm-book-hero__title, .pm-book__page-title, .pm-hww__h2, .wlb__title, .pmfc-title, .pmwhat-title, .ckf-head__title, .ckfs-title, .apx__title, .hx-title, .pmts-title, .pm-testi-light .pm-testi-h, #sp-sticky h2, .pm-final-cta__title{ font-weight:500 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ PHONE — WEIGHT ONLY, generated from the Nunito page's own emphasis map (549 elements measured in Nunito Console mode, 2026-09-11). Caleb: "look at the older one to see where those emphasis points are … in the middle of a text, through the title, the subtitle, in the information boxes … exactly like that." The rule, applied to every element: Nunito bold (600+) at 13px and up → Söhne 500 (titles, sub-titles, bold words, questions, names, buttons, eyebrows) Nunito bold under 15px, UI text → 400 (names, share pill, Learn more, tabs, chips, fine print — "so thick"; tiny labels: "FAMILY SPOTS", "Where kids start" — Caleb ruled these must stay light) Nunito 500 (barely-there) → 400 (waitlist facts, map rows, toggles) b / strong inside prose → 500, always everything else → 400 (body is never 300 — "thin paper") Two legibility exceptions stay 500: map pin numerals and the chapter chips (white on colour). Same size, same colour, same case, same spot as Nunito — this sheet changes weight only, plus the header signature on the left. ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width:760px){ :root{ --pmm-eyebrow-w:500; --pmm-hero-w:500; --pmm-hero-track:0; --pmm-title-w:500; --pmm-title-track:0; --pmm-title-em-w:500; --pmm-card-w:500; --pmm-card-track:0; } /* THE ONE LAYOUT EXCEPTION — the header signature sits LEFT under this face (Caleb 2026-09-11) */ html body #nav .nav-logo--swap{ left:20px !important; transform:translate(0,-50%) !important; } html body #nav.scrolled .nav-logo--swap, html body #nav.is-menu .nav-logo--swap{ left:18px !important; } /* Stripe's ink for titles, through the standard (index.html paintStandard → --pmm-ink) */ html body #pm-services .pmsvc-h2{ color:#061b31 !important; } /* reading text: +.012em of air (Caleb: "no breathing room … stacked full of text") */ html body :is(.pmsvc-sub,.pmsvc-card__body,.ckfs-sub,.ckfs-cd,.asx__desc,.hx-sub,.pmts-sub,.lm-sub,.pmdemo-head__sub,.pmdemo-sub-m, .pm-testi-sub,.wlb__sub,.pmfc-sub,.pmfc-desc,.pmfc-card__s,.reassure__sub,.faq-sub,.pm-final-cta__meta,.pm-hww__note,.pm-hww__note-rest, .pmsvc-note,.pmsvc-note__rest,.pmws__txt,.pm-testi-quote,.faq-answer,.pmts-mx__sr,.ckf-close__p,.ckf-close__hire,.pm-hww__cfoot,.pm-hww__rd, .pm-hww__csub,.hero__sub,.asx__foot,.lm-listnote,.pmdemo-phone__hint,.faq-fine), html body .reassure p, html body #pm-food .ckfs-menu__list li{ letter-spacing:.012em !important; } /* emphasis inside prose */ html body p b, html body p strong, html body li b, html body li strong{ font-weight:500 !important; } /* ── Nunito bold → 500 ── */ html body #asx-section .asx__eyebrow, html body #asx-section .asx__heading, html body #asx-section .asx__heading em, html body #asx-section .asx__title{ font-weight:500 !important; } html body #faq .faq-badge, html body #faq .faq-eyebrow, html body #faq .faq-fine a, html body #faq .faq-title{ font-weight:500 !important; } html body #faq .faq-title em, html body #pm-fit .pmfc-card__t, html body #pm-fit .pmfc-eyebrow, html body #pm-fit .pmfc-tab{ font-weight:500 !important; } html body #pm-fit .pmfc-title, html body #pm-fit .pmfc-title em, html body #pm-food .ckf-close__hire a, html body #pm-food .ckf-close__p b{ font-weight:500 !important; } html body #pm-food .ckfs-ct, html body #pm-food .ckfs-ct em, html body #pm-food .ckfs-cta, html body #pm-food .ckfs-menu__t{ font-weight:500 !important; } html body #pm-food .ckfs-title, html body #pm-food .ckfs-title em, html body #pm-grocers .pmgro-phrase, html body #pm-services .pmsvc-card__btn{ font-weight:500 !important; } html body #pm-services .pmsvc-card__title, html body #pm-services .pmsvc-eyebrow, html body #pm-services .pmsvc-h2, html body #pm-services .pmsvc-h2 em{ font-weight:500 !important; } html body #pm-services b, html body #pm-what .pmwhat-close, html body #pm-what .pmwhat-close__x em, html body #pm-what .pmwhat-eyebrow{ font-weight:500 !important; } html body #pm-what .pmwhat-title, html body #pm-what .pmwhat-title em, html body #pm-what .pmws__name, html body #pm-what .pmws__tab{ font-weight:500 !important; } html body #pmFamilyMap .lm-eyebrow, html body #pmFamilyMap .lm-gpin__num, html body #pmFamilyMap .lm-title, html body #pmFamilyMap .lm-title em{ font-weight:500 !important; } html body #pmFinalCta .grad, html body #pmFinalCta .pm-final-cta__btn, html body #pmFinalCta .pm-final-cta__eyebrow, html body #pmInteractiveDemo .pmdemo-cta__label{ font-weight:500 !important; } html body #pmInteractiveDemo .pmdemo-head__eyebrow, html body #pmInteractiveDemo .pmdemo-head__title, html body #pmInteractiveDemo .pmdemo-head__title em, html body #pmToolShowcase .hx-phone-veil__pill span{ font-weight:500 !important; } html body #pmToolShowcase .pmts-m em, html body #s-flow-editorial-v2 .pm-hww__ctitle, html body #s-flow-editorial-v2 .pm-hww__eyebrow, html body #s-flow-editorial-v2 .pm-hww__h2{ font-weight:500 !important; } html body #s-flow-editorial-v2 .pm-hww__h2 em, html body #s-flow-editorial-v2 .pm-hww__mix-num, html body #s-flow-editorial-v2 .pm-hww__mix-title, html body #s-flow-editorial-v2 .pm-hww__rn{ font-weight:500 !important; } html body #s-flow-editorial-v2 .pm-hww__roman, html body #s-flow-editorial-v2 .pm-hww__rpct span, html body #s-flow-editorial-v2 .pm-hww__rt strong, html body #s-flow-editorial-v2 b{ font-weight:500 !important; } html body #spotlight .sp-title, html body #spotlight .sp-title em, html body #spotlight h3, html body #testimonials .pm-testi-h{ font-weight:500 !important; } html body #testimonials .pm-testi-h em, html body #testimonials .pm-testi-name, html body #testimonials .pm-testi-share__btn span, html body #waitlist-band .wlb__go{ font-weight:500 !important; } html body #waitlist-band .wlb__title, html body .hero .hero__btn, html body .hero .hero__eyebrow, html body .hero .hero__title{ font-weight:500 !important; } html body .hx .hx-cta, html body .hx .hx-kicker, html body .hx .hx-phone-veil__pill span, html body .hx .hx-title{ font-weight:500 !important; } html body .hx .hx-title em, html body .reassure .k, html body .reassure .k em, html body .reassure .reassure__title{ font-weight:500 !important; } html body .reassure .reassure__title span, html body .reassure strong{ font-weight:500 !important; } /* ── Nunito 500, and bold under 13px → 400 ── */ html body #asx-section .asx__pill span, html body #faq .faq-answer, html body #pm-fit .pmfc-about, html body #pm-fit .pmfc-cue{ font-weight:400 !important; } html body #pm-food .ckfs-cap, html body #pm-food .ckfs-menu__age, html body #pm-food .ckfs-swipe, html body #pmFamilyMap .lm-cat{ font-weight:400 !important; } html body #pmFamilyMap .lm-fam__name, html body #pmFamilyMap .lm-group__h, html body #pmFamilyMap .lm-place__name, html body #pmFamilyMap .lm-toggle__btn{ font-weight:400 !important; } html body #pmFamilyMap span, html body #s-flow-editorial-v2 .pm-hww__folio, html body #s-flow-editorial-v2 .pm-hww__mix-lab, html body #spotlight .sp-archive-mark{ font-weight:400 !important; } html body #spotlight div, html body #waitlist-band .wlb-spot__count span, html body #waitlist-band .wlb-spot__label, html body #waitlist-band .wlb__fact--m{ font-weight:400 !important; } html body #waitlist-band .wlb__facts span, html body .hx .hx-cta em, html body .hx .hx-kicker span, html body footer .footer-brand p{ font-weight:400 !important; } html body footer .footer-col h4, html body footer .is-locked-link, html body footer .nav-lock-soon, html body footer a{ font-weight:400 !important; } /* ── hand-set: the three the generator could not decide ── */ html body #faq .faq-question{ font-weight:500 !important; } /* Nunito 600 questions (the "Read more" row rides along) */ html body #pm-what .pmws-acc .pmws__name, html body #pm-what .pmws-acc .pmws__node.is-open .pmws__name{ font-weight:500 !important; } /* §3 sets these by id */ html body #pmToolShowcase .pmts-eyebrow .pmts-m{ font-weight:500 !important; } /* the eyebrow span shares .pmts-m with its title */ /* ── hand-set 2 (Caleb, from his phone) ── */ /* the map card's numbers are tags but they are numerals, not bold words — Nunito has them at its barely-there 500, so they read light there; here they go to 400 with the rest of the card */ html body #pmFamilyMap .lm-ostats b, html body #pmFamilyMap .lm-place__stat b, html body #pmFamilyMap .lm-place b, html body #pmFamilyMap .lm-fam b{ font-weight:400 !important; } /* "If this is what you want in your home," — Söhne's narrower letters let "this" climb onto the bold line; end the lead-in's line so "this is exactly the kind of person we send." reads whole, as in Nunito */ html body #pm-food .ckf-close__p b{ display:block; } /* ── hand-set 3 (Caleb: "Share your experience … everything is just so thick") — small UI text under 15px keeps Nunito's shape but not its bold: names, the share pill, "Learn more", tabs, chips, fine print. Lead-in bold words and titles stay at 500. ── */ html body #testimonials .pm-testi-name, html body #testimonials .pm-testi-share__btn, html body #testimonials .pm-testi-share__btn span, html body #pm-services .pmsvc-card__btn, html body #pm-fit .pmfc-tab, html body #pm-what .pmws__tab, html body #pm-what .pmwhat-close, html body #pm-what .pmwhat-close em, html body .hx .hx-phone-veil__pill span, html body #pmToolShowcase .hx-phone-veil__pill span, html body #faq .faq-fine a{ font-weight:400 !important; } }