/* ============================================================ Base — Resets, typography, body baseline ============================================================ */ /* --- Minimal reset --- */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; } img, video, svg { display: block; max-width: 100%; height: auto; } /* --- FOUT prevention --- Body fades in once the Font Loading API confirms Museo Sans is ready (adds .fonts-loaded to ). Cached fonts resolve instantly so repeat visitors see no delay. The transition makes the reveal smooth instead of a hard pop. A 2 s JS timeout guarantees text appears. */ body { opacity: 0; transition: opacity 0.15s ease-out; } html.fonts-loaded body { opacity: 1; } /* --- Body --- */ body { background: var(--bg-page); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- Headings --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--fg-display); font-weight: var(--w-bold); line-height: var(--lh-tight); } h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-h1); } h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-h2); } h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-h2); line-height: var(--lh-snug); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); } h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: var(--w-medium); } h6 { font-size: var(--fs-body); line-height: var(--lh-snug); font-weight: var(--w-bold); } /* --- Body text --- */ p { text-wrap: pretty; } p + p { margin-top: var(--space-4); } /* Signature mid-sentence "blue bold" emphasis */ strong { font-weight: var(--w-bold); color: var(--fg-emphasis); } /* --- Links --- */ a { color: var(--fg-link); text-decoration: none; transition: border-color var(--dur-base) var(--ease-out); } a:hover { text-decoration: underline; } /* In-content links must be underlined to meet WCAG 1.4.1 (not relying on color alone). */ .apoh-main p a:not(.apoh-btn), .apoh-main li a:not(.apoh-btn), .apoh-main td a:not(.apoh-btn) { text-decoration: underline; text-underline-offset: 2px; } /* --- Lists --- */ ul, ol { padding-left: 1.5em; } li { text-wrap: pretty; } li + li { margin-top: var(--space-2); } /* --- Semantic type classes (matches design reference) --- */ .apoh-display, .apoh-h1, .apoh-h2, .apoh-h3, .apoh-h4, .apoh-h5 { font-family: var(--font-sans); color: var(--fg-display); font-weight: var(--w-bold); line-height: var(--lh-tight); margin: 0; } .apoh-display { font-size: var(--fs-display); letter-spacing: var(--tracking-display); font-weight: var(--w-black); } .apoh-h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-h1); } .apoh-h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-h2); } .apoh-h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-h2); line-height: var(--lh-snug); } .apoh-h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); } .apoh-h5 { font-size: var(--fs-h5); line-height: var(--lh-snug); font-weight: var(--w-medium); } .apoh-body { font-size: var(--fs-body); font-weight: var(--w-regular); line-height: var(--lh-relaxed); color: var(--fg-1); } .apoh-body-lg { font-size: var(--fs-body-lg); font-weight: var(--w-light); line-height: var(--lh-relaxed); color: var(--fg-1); } .apoh-small { font-size: var(--fs-small); color: var(--fg-2); } .apoh-caption { font-size: var(--fs-caption); color: var(--fg-3); letter-spacing: var(--tracking-allcaps); text-transform: uppercase; } .apoh-slab { font-family: var(--font-slab); font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--fg-1); } .apoh-emphasis, .apoh-body strong, .apoh-body-lg strong { font-weight: var(--w-bold); color: var(--fg-emphasis); } /* --- Link class --- */ .apoh-link { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-base) var(--ease-out); } .apoh-link:hover { border-bottom-color: currentColor; text-decoration: none; } /* --- Screen reader only --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Skip link --- */ .skip-link { position: absolute; left: -9999px; top: auto; z-index: 10000; padding: 8px 16px; background: var(--apoh-blue); color: var(--fg-on-blue); font-weight: var(--w-bold); } .skip-link:focus { left: 8px; top: 8px; } /* --- Default page title --- */ .apoh-page-title { font-size: 48px; font-weight: 900; color: var(--fg-display); letter-spacing: -0.02em; line-height: 1.1; } /* --- Prose — long-form body content --- */ .apoh-prose h2 { font-size: 28px; font-weight: 900; color: #1F2A3D; margin: 40px 0 16px; } .apoh-prose h3 { font-size: 22px; font-weight: 800; color: #1F2A3D; margin: 32px 0 12px; } .apoh-prose h4 { font-size: 18px; font-weight: 800; color: #1F2A3D; margin: 24px 0 8px; } .apoh-prose p { margin: 0 0 16px; line-height: 1.7; } .apoh-prose ul, .apoh-prose ol { margin: 0 0 16px; } .apoh-prose li { margin-bottom: 6px; line-height: 1.6; } .apoh-prose strong { color: var(--fg-emphasis); } .apoh-prose h2:first-child { margin-top: 0; } /* Dark section prose — centred heading, white text */ .apoh-section--dark .apoh-prose h2 { color: #fff; margin: 0 0 0; text-align: center; } /* --- Link grid — compact card links for thank-you / landing pages --- */ .apoh-link-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 20px; } .apoh-link-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius-md); text-decoration: none; color: rgba(255, 255, 255, 0.7); transition: background var(--dur-base) var(--ease-out); position: relative; } .apoh-link-card:hover { background: rgba(255, 255, 255, 0.10); text-decoration: none; } .apoh-link-card strong { font-size: 16px; font-weight: 800; color: var(--apoh-green); display: flex; align-items: center; justify-content: space-between; } .apoh-link-card strong::after { content: '\2192'; font-size: 18px; opacity: 0.5; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .apoh-link-card:hover strong::after { opacity: 1; transform: translateX(3px); } .apoh-link-card span { font-size: 13px; line-height: 1.45; } @media (max-width: 768px) { .apoh-link-grid { grid-template-columns: repeat(2, 1fr); } }