/* ============================================================================ PS TYPOGRAPHY — Direction A (Editorial Healthtech) ============================================================================ Phase 1: ADDITIVE only. Loads the new font stack and exposes opt-in utility classes. Does NOT change defaults on body / h1 / etc., so existing pages continue rendering with the legacy Manrope + Inter setup. To opt in (Phase 2 forward), add `class="ps-page"` to or use the `.ps-display`, `.ps-body` utilities directly. The fonts load via Google Fonts in each page's (see lib/head-snippet.html). ============================================================================ */ /* ── Display utility: Instrument Serif (italic, editorial) ── Used for hero headlines, prices, the brand mark, and decorative numerals. Italic by design — ascender + serif gives the warm-craft feel. */ .ps-display, .ps-display-italic { font-family: var(--ps-font-display, 'Instrument Serif', Georgia, serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; line-height: 1.05; color: var(--ps-ink, #0F1E1C); margin: 0; } /* ── Body utility: Inter ── Default for paragraphs, navigation, buttons, lists, anything functional. */ .ps-body { font-family: var(--ps-font-body, 'Inter', -apple-system, sans-serif); font-weight: 400; color: var(--ps-ink, #0F1E1C); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Eyebrow: small uppercase label with letterspacing ── Mirrors PSEyebrow component from shared.jsx. */ .ps-eyebrow { font-family: var(--ps-font-body, 'Inter', sans-serif); font-size: 12px; font-weight: 600; color: var(--ps-teal, #0E5D59); text-transform: uppercase; letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 8px; } .ps-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── Page-level opt-in ── Adding `class="ps-page"` to sets the new background + body font. Pages still in the legacy palette do NOT add this class and render unchanged. Phase 2 rebuilds opt in here. */ .ps-page { background: var(--ps-bg, #F6F5F1); color: var(--ps-ink, #0F1E1C); font-family: var(--ps-font-body, 'Inter', -apple-system, sans-serif); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Selection color tuned to mint, matches design source ── */ .ps-page ::selection { background: var(--ps-mint, #C9E8D8); color: var(--ps-ink, #0F1E1C); } /* ── Scrollbar styling (webkit/blink only — Firefox uses default) ── */ .ps-page ::-webkit-scrollbar { width: 8px; height: 8px; } .ps-page ::-webkit-scrollbar-thumb { background: rgba(15, 30, 28, 0.15); border-radius: 4px; } .ps-page ::-webkit-scrollbar-track { background: transparent; }