/* * PTI Library — design system * --------------------------- * Editorial-medical: the register of The Lancet, BMJ and Cochrane, not consumer * wellness. Restraint is the point — this site's proposition is trustworthiness, * and typography carries more of that than decoration does. * * Colour decisions (see BRAND-COLOUR-GUIDANCE.md for the measurements): * #0F4294 deep blue 9.43:1 on white — primary. Safe for text. * #0D1E30 navy 16.86:1 — deep text. * #C9A84C gold 2.29:1 — ACCENT ONLY. Never text. * #0EAEAB teal 2.74:1 — ACCENT ONLY, and reserved exclusively for * APARC elements. Teal on this site means "this leads to * APARC clinical services". That keeps the two brands * legible as separate things, which is the whole point. * * Self-contained: no webfonts, no CDN, no framework. ~7 KB. */ /* --------------------------------------------------------------- * 0. Sitewide correction * Astra's Customizer holds --ast-body-line-height: 2px — a unit mistake * (2 entered with "px" selected instead of unitless). Everything inherits it, * so any wrapping line collapses onto the next. Overriding here rather than in * the Customizer keeps the fix version-controlled and reversible. * ------------------------------------------------------------ */ :root, body { --ast-body-line-height: 1.7; } /* --------------------------------------------------------------- * 1. Tokens * ------------------------------------------------------------ */ :root { /* Brand */ --pti-blue: #0F4294; --pti-blue-700: #0B3475; --pti-blue-100: #E7EDF8; --pti-blue-50: #F4F7FC; --pti-navy: #0D1E30; --pti-gold: #C9A84C; --pti-gold-50: #FBF7EC; /* APARC signal — used ONLY on referral elements */ --pti-aparc: #0EAEAB; --pti-aparc-700: #067F7D; --pti-aparc-50: #E8F8F8; /* Neutrals */ --pti-ink: #14202E; --pti-ink-soft: #5A6675; --pti-rule: #DFE5ED; --pti-rule-soft: #EDF1F6; --pti-surface: #F7F9FC; --pti-white: #FFFFFF; /* Semantic */ --pti-alert: #C0342F; --pti-alert-bg: #FDF3F2; --pti-ok: #1F7A4D; /* System */ --pti-radius: 8px; --pti-radius-sm: 4px; --pti-shadow: 0 1px 2px rgba(13,30,48,.05), 0 4px 14px rgba(13,30,48,.05); --pti-shadow-lift: 0 2px 4px rgba(13,30,48,.07), 0 10px 26px rgba(13,30,48,.09); --pti-lede: 1.06rem; } @media (prefers-color-scheme: dark) { :root { --pti-blue-100: #16233A; --pti-blue-50: #121B2B; --pti-ink: #E8EDF4; --pti-ink-soft: #9FADBD; --pti-rule: #2C3646; --pti-rule-soft: #222B39; --pti-surface: #161E2A; --pti-white: #0F1620; --pti-alert-bg: #2A1A1A; --pti-gold-50: #241F12; --pti-aparc-50: #102A2A; --pti-shadow: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3); --pti-shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 10px 26px rgba(0,0,0,.4); } } /* Components never inherit a broken line-height. */ .pti-byline, .pti-byline *, .pti-urgent, .pti-urgent *, .pti-references, .pti-references *, .pti-download, .pti-download *, .pti-related, .pti-related *, .pti-hub, .pti-hub *, .pti-person, .pti-person *, .pti-library, .pti-library *, .pti-aparc-card, .pti-aparc-card *, .pti-footer-note, .pti-footer-note * { line-height: 1.65; } .pti-byline dt, .pti-hub__section-title, .pti-references__heading, .pti-download__heading, .pti-related__heading, .pti-urgent__heading, .pti-person__name, .pti-library__title, .pti-hub__title, .pti-library__result-title, .pti-aparc-card__heading { line-height: 1.25; } /* Shared section heading: a gold hairline under a blue title. Repeated consistently, this is what makes a library feel like one publication. */ .pti-hub__section-title, .pti-references__heading, .pti-download__heading, .pti-related__heading, .pti-person__authored h2 { color: var(--pti-blue); font-size: 1.08rem; font-weight: 700; letter-spacing: -.005em; margin: 0 0 .9rem; padding-bottom: .45rem; border-bottom: 2px solid var(--pti-gold); } /* --------------------------------------------------------------- * 2. Editorial byline — the credibility block * ------------------------------------------------------------ */ .pti-byline { border: 1px solid var(--pti-rule); border-left: 3px solid var(--pti-blue); border-radius: var(--pti-radius); background: linear-gradient(180deg, var(--pti-blue-50) 0%, var(--pti-surface) 100%); padding: 1.15rem 1.4rem; margin: 0 0 2.25rem; font-size: .92rem; box-shadow: var(--pti-shadow); } .pti-byline__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); gap: .9rem 1.75rem; margin: 0; } .pti-byline__item dt { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pti-ink-soft); margin: 0 0 .2rem; } .pti-byline__item dd { margin: 0; color: var(--pti-navy); font-weight: 600; } .pti-byline__note { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--pti-rule); color: var(--pti-ink-soft); font-size: .85rem; } .pti-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .02em; border: 1px solid currentColor; } .pti-badge--grade { color: var(--pti-blue); background: var(--pti-blue-100); border-color: transparent; } .pti-badge--warn { color: var(--pti-alert); margin-left: .45rem; } /* --------------------------------------------------------------- * 3. Urgent help — a safety component, styled to be unmissable * ------------------------------------------------------------ */ .pti-urgent { border: 1px solid var(--pti-alert); border-left-width: 4px; border-radius: var(--pti-radius); background: var(--pti-alert-bg); padding: 1.3rem 1.5rem; margin: 2.5rem 0; } .pti-urgent__heading { margin: 0 0 .6rem; font-size: 1.1rem; font-weight: 700; color: var(--pti-alert); } .pti-urgent__list { margin: .6rem 0 .85rem 1.15rem; } .pti-urgent__list li { margin-bottom: .4rem; } .pti-urgent__note { margin: 0; font-size: .85rem; color: var(--pti-ink-soft); } /* --------------------------------------------------------------- * 4. References — academic, numbered, quiet * ------------------------------------------------------------ */ .pti-references { margin: 2.75rem 0; } .pti-references__list { margin: 0 0 0 1.35rem; font-size: .9rem; } .pti-references__list li { margin-bottom: .55rem; color: var(--pti-ink-soft); } .pti-references__list li a { color: var(--pti-blue); text-decoration: underline; text-underline-offset: 2px; } .pti-references__note { margin-top: .85rem; font-size: .85rem; color: var(--pti-ink-soft); } /* --------------------------------------------------------------- * 5. Download — ungated, and looks it * ------------------------------------------------------------ */ .pti-download { margin: 2.5rem 0; } .pti-download__link { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1.25rem; border-radius: var(--pti-radius-sm); background: var(--pti-blue); color: #fff; font-weight: 600; text-decoration: none; box-shadow: var(--pti-shadow); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .pti-download__link:hover, .pti-download__link:focus-visible { background: var(--pti-blue-700); color: #fff; transform: translateY(-1px); box-shadow: var(--pti-shadow-lift); } .pti-download__meta { font-size: .7rem; font-weight: 700; letter-spacing: .05em; padding: .1rem .4rem; border-radius: 3px; background: rgba(255,255,255,.18); } .pti-download__note { margin: .65rem 0 0; font-size: .85rem; color: var(--pti-ink-soft); } /* --------------------------------------------------------------- * 6. Related resources — cards that lift * ------------------------------------------------------------ */ .pti-related { margin: 2.75rem 0; } .pti-related__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; } .pti-related__item { padding: .85rem 1rem; border: 1px solid var(--pti-rule); border-radius: var(--pti-radius-sm); background: var(--pti-white); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .pti-related__item:hover { border-color: var(--pti-blue); box-shadow: var(--pti-shadow); transform: translateY(-1px); } .pti-related__item a { color: var(--pti-navy); font-weight: 600; text-decoration: none; } .pti-related__item a:hover { color: var(--pti-blue); } .pti-related__type { display: block; margin-top: .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pti-ink-soft); } /* --------------------------------------------------------------- * 7. Pathway hubs — the library index * ------------------------------------------------------------ */ .pti-hub__header { margin-bottom: 1.25rem; } .pti-hub__title { color: var(--pti-navy); letter-spacing: -.02em; } .pti-hub__content { font-size: var(--pti-lede); color: var(--pti-ink-soft); max-width: 52rem; } .pti-hub__content strong { color: var(--pti-ink); } .pti-hub__section { margin: 2.75rem 0; } .pti-hub__section-title { font-size: 1.16rem; display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap; } .pti-hub__count { font-size: .68rem; font-weight: 700; letter-spacing: .03em; padding: .12rem .55rem; border-radius: 999px; background: var(--pti-blue-100); color: var(--pti-blue); border: none; } .pti-hub__section-desc { color: var(--pti-ink-soft); margin: 0 0 .9rem; } .pti-hub__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0 1.75rem; } .pti-hub__list li { padding: .5rem 0; border-bottom: 1px solid var(--pti-rule-soft); } .pti-hub__list li a { color: var(--pti-navy); text-decoration: none; } .pti-hub__list li a:hover { color: var(--pti-blue); text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------------- * 8. Person profile * ------------------------------------------------------------ */ .pti-person__header { display: flex; flex-wrap: wrap; gap: 1.75rem; align-items: flex-start; margin-bottom: 1.75rem; } .pti-person__photo img { max-width: 190px; height: auto; border-radius: var(--pti-radius); box-shadow: var(--pti-shadow); } .pti-person__name { margin: 0 0 .35rem; color: var(--pti-navy); letter-spacing: -.02em; } .pti-person__credentials { color: var(--pti-ink-soft); margin: 0; font-size: var(--pti-lede); } .pti-person__profiles { border: 1px solid var(--pti-rule); border-radius: var(--pti-radius); background: var(--pti-surface); padding: 1.1rem 1.35rem; margin-bottom: 2rem; } .pti-person__profiles-heading { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--pti-ink-soft); margin: 0 0 .65rem; } .pti-person__profiles-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .5rem; } .pti-person__profiles-list a { display: inline-block; padding: .3rem .75rem; border: 1px solid var(--pti-rule); border-radius: 999px; background: var(--pti-white); color: var(--pti-blue); font-size: .85rem; font-weight: 600; text-decoration: none; } .pti-person__profiles-list a:hover { border-color: var(--pti-blue); background: var(--pti-blue-100); } .pti-person__authored-list { margin-left: 1.15rem; } /* --------------------------------------------------------------- * 9. Library index * ------------------------------------------------------------ */ .pti-library__title { color: var(--pti-navy); letter-spacing: -.02em; } .pti-library__intro { font-size: var(--pti-lede); color: var(--pti-ink-soft); max-width: 52rem; } .pti-library__filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; padding: 1.1rem 1.35rem; border: 1px solid var(--pti-rule); border-radius: var(--pti-radius); background: var(--pti-surface); margin: 1.75rem 0; } .pti-library__filter { display: flex; flex-direction: column; gap: .3rem; font-size: .88rem; } .pti-library__filter span { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--pti-ink-soft); font-size: .68rem; } .pti-library__filter select { min-width: 12rem; border-radius: var(--pti-radius-sm); } .pti-library__submit { background: var(--pti-blue); color: #fff; border: none; padding: .55rem 1.2rem; border-radius: var(--pti-radius-sm); font-weight: 600; cursor: pointer; } .pti-library__submit:hover { background: var(--pti-blue-700); } .pti-library__reset { align-self: center; color: var(--pti-ink-soft); font-size: .85rem; } .pti-library__count { color: var(--pti-ink-soft); font-size: .88rem; } .pti-library__results { list-style: none; margin: 0; padding: 0; } .pti-library__result { padding: 1.2rem 0; border-bottom: 1px solid var(--pti-rule-soft); } .pti-library__result-title { font-size: 1.05rem; margin: 0 0 .3rem; } .pti-library__result-title a { color: var(--pti-navy); text-decoration: none; } .pti-library__result-title a:hover { color: var(--pti-blue); } .pti-library__result-meta { margin: 0 0 .4rem; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pti-ink-soft); } .pti-library__result-excerpt { margin: 0; color: var(--pti-ink-soft); } .pti-library__pagination { margin: 1.75rem 0; } /* --------------------------------------------------------------- * 10. APARC — the only place teal appears * ------------------------------------------------------------ */ .pti-aparc-card { border: 1px solid var(--pti-rule); border-left: 4px solid var(--pti-aparc); border-radius: var(--pti-radius); padding: 1.4rem 1.6rem; margin: 2.75rem 0; background: linear-gradient(180deg, var(--pti-aparc-50) 0%, var(--pti-surface) 100%); box-shadow: var(--pti-shadow); } .pti-aparc-card__heading { margin: 0 0 .5rem; font-size: 1.12rem; font-weight: 700; color: var(--pti-navy); } .pti-aparc-card__body { margin: 0 0 1.15rem; color: var(--pti-ink-soft); } .pti-aparc-card__cta { display: inline-block; padding: .7rem 1.3rem; border-radius: var(--pti-radius-sm); background: var(--pti-aparc-700); color: #fff; /* 700 shade: passes AA with white */ font-weight: 600; text-decoration: none; box-shadow: var(--pti-shadow); transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .pti-aparc-card__cta:hover, .pti-aparc-card__cta:focus-visible { background: #05635F; color: #fff; transform: translateY(-1px); box-shadow: var(--pti-shadow-lift); } .pti-aparc-card__coi { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--pti-rule); font-size: .82rem; color: var(--pti-ink-soft); } .pti-footer-note { padding: 1.4rem 1.35rem; font-size: .88rem; color: var(--pti-ink-soft); border-top: 1px solid var(--pti-rule); max-width: 72rem; margin: 0 auto; } .pti-footer-note a { color: var(--pti-aparc-700); font-weight: 600; } .pti-footer-note em { display: inline-block; margin-top: .4rem; font-size: .84rem; opacity: .9; } /* --------------------------------------------------------------- * 11. Responsive * ------------------------------------------------------------ */ @media (max-width: 700px) { .pti-byline, .pti-urgent, .pti-library__filters, .pti-aparc-card { padding: 1rem 1.1rem; } .pti-byline__grid { grid-template-columns: 1fr; gap: .7rem; } .pti-hub__list { grid-template-columns: 1fr; } .pti-library__filter, .pti-library__filter select { width: 100%; min-width: 0; } .pti-person__photo img { max-width: 130px; } } /* --------------------------------------------------------------- * 12. Accessibility & print * ------------------------------------------------------------ */ .pti-hub__list li a:focus-visible, .pti-related__item a:focus-visible, .pti-library__result-title a:focus-visible, .pti-aparc-card__cta:focus-visible, .pti-download__link:focus-visible { outline: 3px solid var(--pti-gold); outline-offset: 2px; border-radius: 2px; } @media (prefers-reduced-motion: reduce) { .pti-related__item, .pti-download__link, .pti-aparc-card__cta { transition: none; } .pti-related__item:hover, .pti-download__link:hover, .pti-aparc-card__cta:hover { transform: none; } } @media print { .pti-library__filters, .pti-related, .pti-download, .pti-aparc-card { display: none; } .pti-byline { border: 1px solid #000; background: none; box-shadow: none; } .pti-urgent { border: 2px solid #000; background: none; } } /* --------------------------------------------------------------------------- Legacy shell pages — suppress Astra's content-link underline on page chrome --------------------------------------------------------------------------- Astra's Customizer emits: .ast-single-post .entry-content a { underline } That is the right behaviour for prose: underlined links in article body text are an accessibility win, and we keep it. But ~170 legacy pages were built as self-contained HTML *inside* the post content — their header, top bar, desktop nav, dropdowns, "I AM A" tabs, buttons and footer are all `.entry-content a`. Astra therefore underlines the entire page chrome: phone number, email, every nav item, every button. :has() lets us target exactly that structural signature — a content area that contains a full