/* ========================================================================== PTI — v2 visual layer (Phase 1 of the Oct 2026 layout redesign) WHAT THIS FILE IS A pure override layer. It loads LAST (after pti-core, pti-header-footer and pti-pages) and changes colour, type and header behaviour only. It adds no markup and edits no page content. Delete this file and its enqueue line and the site is exactly as it was. SPECIFICITY pti-pages.css scopes everything at (0,2,x) with '.ptipg .ptipg__x'. This file uses '.ptipg.ptipg …' (0,3,x) so it wins regardless of load order against both pti-pages and Elementor's kit (0,1,1). Keep the doubled class. CONTRAST (WCAG AA, measured) #17707F on #FFFFFF 5.74:1 · on #F4F7FB 5.34:1 · on #FAF8F4 5.41:1 #2A3644 body text on white 12.3:1 · #4A5868 muted on white 7.3:1 #8A6A1C gold ink on white 5.05:1 No dark-mode branch, by design (see pti-core.css header). ========================================================================== */ /* ---------- 1. Global tokens (header, footer, theme-drawn parts) ---------- */ :root { --pti-font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pti-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; --pti-font-eyebrow: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pti-teal: #17707F; --pti-teal-deep: #0F5560; --pti-paper: #FAF8F4; --pti-header-h: 68px; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Body text outside the page HTML (Elementor kit sets Poppins/Roboto at 0,1,0). */ html body.pti { font-family: var(--pti-font-body); } /* ---------- 2. Page design-system tokens ---------- */ .ptipg.ptipg { --fd: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* headings */ --fb: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* body */ --fu: var(--fb); /* UI labels */ --teal-text: #17707F; --body: #2A3644; --muted: #4A5868; --warm: #FAF8F4; font-family: var(--fb); font-size: 17.5px; color: var(--body); } /* Headings: serif, slightly tighter tracking than the old geometric sans. */ .ptipg.ptipg.ptipg h1, .ptipg.ptipg.ptipg h2, .ptipg.ptipg.ptipg h3, .ptipg.ptipg.ptipg h4 { font-family: var(--fd); font-weight: 700; letter-spacing: -.01em; line-height: 1.18; } .ptipg.ptipg.ptipg h3, .ptipg.ptipg.ptipg h4 { font-weight: 600; } /* Every small UI label that pti-pages set in --fd moves to the sans, so serif is reserved for headings. */ .ptipg.ptipg .ptipg__eyebrow, .ptipg.ptipg .ptipg__std span, .ptipg.ptipg .ptipg__std b, .ptipg.ptipg .ptipg__more, .ptipg.ptipg .ptipg__btn, .ptipg.ptipg .ptipg__notehead, .ptipg.ptipg .ptipg__chip, .ptipg.ptipg .ptipg__role b, .ptipg.ptipg .ptipg__person b, .ptipg.ptipg .ptipg__person em, .ptipg.ptipg .ptipg__initials, .ptipg.ptipg .ptipg__byline dt, .ptipg.ptipg .ptipg__grade, .ptipg.ptipg .ptipg__faq summary, .ptipg.ptipg .ptipg__refs li::before, .ptipg.ptipg .ptipg__reftag, .ptipg.ptipg .ptipg__figtitle, .ptipg.ptipg .ptipg__idxmeta, .ptipg.ptipg .ptipg__bloom, .ptipg.ptipg .ptipg__phlabel, .ptipg.ptipg .ptipg__prose th, .ptipg.ptipg .ptipg__prose ol li::before { font-family: var(--fu); } /* Eyebrows were 11px — too small to read. */ .ptipg.ptipg .ptipg__eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .12em; } .ptipg.ptipg .ptipg__hero .ptipg__eyebrow { color: #EBCE86; } /* Hero */ .ptipg.ptipg .ptipg__hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.06; } .ptipg.ptipg .ptipg__lede { font-size: 1.1875rem; line-height: 1.65; } /* Section heads */ .ptipg.ptipg .ptipg__head h2 { font-size: clamp(1.75rem, 3vw, 2.4rem); } .ptipg.ptipg .ptipg__sec--warm { background: var(--pti-paper); } /* ---------- 3. Long-form reading (topic pages, condition guides) ---------- */ .ptipg.ptipg .ptipg__prose { max-width: 46rem; } .ptipg.ptipg .ptipg__prose p, .ptipg.ptipg .ptipg__prose li { font-size: 1.15rem; line-height: 1.75; } .ptipg.ptipg .ptipg__prose h2 { font-size: clamp(1.6rem, 2.6vw, 2rem); margin: 2.2em 0 .55em; padding-top: 1.4em; scroll-margin-top: calc(var(--pti-header-h) + 24px); } .ptipg.ptipg .ptipg__prose h3 { font-size: 1.375rem; scroll-margin-top: calc(var(--pti-header-h) + 24px); } .ptipg.ptipg .ptipg__prose a { color: var(--teal-text); text-decoration-thickness: 1px; } .ptipg.ptipg .ptipg__prose a:hover { color: var(--pti-teal-deep); } /* Tables: readable header row, zebra striping, rounded frame. */ .ptipg.ptipg .ptipg__tablewrap { border: 1px solid var(--line); border-radius: 14px; background: #fff; } .ptipg.ptipg .ptipg__prose th { background: #EEF3F7; color: #1A3A5C; font-size: .75rem; letter-spacing: .08em; border-bottom: 1px solid var(--line); } .ptipg.ptipg .ptipg__prose tbody tr:nth-child(even) { background: #FAFBFC; } .ptipg.ptipg .ptipg__prose tbody tr:hover { background: #EEF3F7; } .ptipg.ptipg .ptipg__prose td { font-size: .975rem; } /* Figures */ .ptipg.ptipg .ptipg__fig figcaption { font-size: .875rem; color: var(--muted); } /* Callouts keep their meaning colours; tidy the radius and spacing only. */ .ptipg.ptipg .ptipg__note, .ptipg.ptipg .ptipg__summary, .ptipg.ptipg .ptipg__takeaways, .ptipg.ptipg .ptipg__osce, .ptipg.ptipg .ptipg__case { border-radius: 16px; } .ptipg.ptipg .ptipg__notehead { font-size: .75rem; } /* FAQ: larger tap target */ .ptipg.ptipg .ptipg__faq summary { font-size: 1.05rem; font-weight: 600; padding-top: 18px; padding-bottom: 18px; } /* Metric strip in chapter heroes */ .ptipg.ptipg .ptipg__metric b { font-family: var(--fd); font-weight: 700; } .ptipg.ptipg .ptipg__metric span { font-size: .75rem; } /* Subject index cards */ .ptipg.ptipg .ptipg__subj { transition: border-color .2s ease, box-shadow .2s ease; } .ptipg.ptipg .ptipg__subj:hover { border-color: #17707F; box-shadow: 0 10px 28px rgba(13,30,48,.08); } .ptipg.ptipg .ptipg__slink { font-size: .9375rem; } /* Buttons: the old navy/gold buttons stay; only the type changes (above). */ /* Keyboard focus — visible on every interactive element inside pages. */ .ptipg.ptipg a:focus-visible, .ptipg.ptipg summary:focus-visible, .ptipg.ptipg button:focus-visible { outline: 3px solid #17707F; outline-offset: 3px; border-radius: 4px; } /* ---------- 4. Header: slim, and genuinely sticky ---------- The masthead was 'position:sticky' inside a 'position:relative' header, so it could never stick past the header's own box. Making the whole header sticky fixes that. The strip's one link (editorial policy) is already in the footer and in the mobile drawer, so the strip is hidden to save 45px. */ .pti-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 200; font-family: var(--pti-font-body); box-shadow: 0 1px 0 var(--pti-rule), 0 6px 18px rgba(13, 30, 48, .06); } .pti-header .pti-strip { display: none; } .pti-masthead { position: static; border-bottom: 0; } .pti-masthead__inner { min-height: var(--pti-header-h); gap: 28px; } .pti-brand img { max-height: 50px; width: auto; } .pti-nav__list > li.menu-item > a, .pti-nav__list > li > a { font-family: var(--pti-font-body); font-size: 15px; font-weight: 600; } .pti-nav__list > li > a:hover { color: var(--pti-teal); } @media (max-width: 1023px) { :root { --pti-header-h: 62px; } .pti-masthead__inner { min-height: var(--pti-header-h); } .pti-brand img { max-height: 42px; } /* The drawer opens inside the sticky header, so cap it to the screen. */ .pti-drawer { max-height: calc(100vh - var(--pti-header-h)); overflow-y: auto; } } /* ---------- 5. Footer type ---------- */ .pti-footer { font-family: var(--pti-font-body); } .pti-footer .pti-footer__wordmark, .pti-footer .pti-footer__brand { font-family: var(--pti-font-display); } /* ---------- 6. Homepage (.ptihome — its own inline style block) ---------- The homepage HTML widget carries its own