. Visible on focus only. Spec item 9 (a11y lane law). ------------------------------------------------------------------ */ .pv-skip { position: absolute; left: var(--pv-s4); top: -100px; /* off-screen until focused */ z-index: 2000; /* above toast scale — momentary a11y affordance */ display: inline-flex; align-items: center; min-height: var(--pv-target-min); padding: var(--pv-s2) var(--pv-s6); border-radius: var(--pv-r-pill); background: var(--pv-red); color: var(--pv-on-red); /* near-black on red — white/ivory banned */ font-weight: 700; font-size: var(--pv-body-sm); text-decoration: none; transition: top var(--pv-t-fast) var(--pv-ease); } .pv-skip:focus-visible { top: var(--pv-s3); outline: var(--pv-focus-outline); outline-offset: 2px; } /* ------------------------------------------------------------------ Shell frame — spec item 3. .pv-shell outer cap 1440px, centered (ultrawide stays composed) .pv-content inner content measure 1280px .pv-full-bleed exemption hook — full-bleed heroes run edge to edge ------------------------------------------------------------------ */ .pv-shell { width: 100%; max-width: var(--pv-shell-max); /* 1440px */ margin-inline: auto; display: flex; flex-direction: column; flex: 1 0 auto; } .pv-content { width: 100%; max-width: var(--pv-content-max); /* 1280px */ margin-inline: auto; padding-inline: var(--pv-gutter); } @media (max-width: 767px) { .pv-content { padding-inline: var(--pv-gutter-sm); } } /* Full-bleed exemption: hero sections inside .pv-shell that must run edge to edge. Inner content still capped via .pv-content. */ .pv-full-bleed { width: 100%; max-width: none; margin-inline: 0; padding-inline: 0; } /* ------------------------------------------------------------------ Landmarks — spec item 9. header: sticky nav frame. main: grows to fill. footer: bottom. ------------------------------------------------------------------ */ .pv-site-header { position: sticky; top: 0; z-index: var(--pv-z-nav); background: var(--pv-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--pv-rule); } /* Header is pinned to the top on scroll, phone and desktop (spec item 1). */ .pv-main { flex: 1 0 auto; outline: none; /* focus ring is applied on :focus-visible only */ } .pv-main:focus-visible { outline: var(--pv-focus-outline); outline-offset: 2px; } .pv-site-footer { flex: 0 0 auto; border-top: 1px solid var(--pv-rule); } /* ------------------------------------------------------------------ Focus — spec item 9: 2px solid var(--pv-red) + 2px offset everywhere. On red fills: 2px solid var(--pv-ivory). ------------------------------------------------------------------ */ :focus-visible { outline: var(--pv-focus-outline); outline-offset: 2px; } .pv-on-red:focus-visible, a[style*="--pv-red"]:focus-visible { outline: 2px solid var(--pv-ivory); outline-offset: 2px; } /* ------------------------------------------------------------------ Page transitions — spec item 2: fast subtle fade (~150–200ms). - NO transition on initial load (JS adds .pv-transitions-on after first paint; before that the page renders fully visible). - Same fade on back/forward (bfcache restores get .pv-enter). - Disabled entirely under prefers-reduced-motion. ------------------------------------------------------------------ */ .pv-transitions-on .pv-shell { transition: opacity var(--pv-t-fast) var(--pv-ease); /* 0.18s */ } .pv-leaving .pv-shell { opacity: 0; } /* fade-out before nav */ .pv-enter .pv-shell { opacity: 0; animation: pv-fade-in var(--pv-t-fast) var(--pv-ease) forwards; } @keyframes pv-fade-in { to { opacity: 1; } } /* ------------------------------------------------------------------ Loading skeletons — spec item 5: content-shaped skeletons only. Never a splash, never a never-ending spinner (no-splash rule). aria-busy="true" + aria-hidden shimmer per spec item 9. ------------------------------------------------------------------ */ .pv-skeleton { border-radius: var(--pv-r-card-sm); background: linear-gradient(100deg, var(--pv-noir-2) 40%, var(--pv-noir-3) 50%, var(--pv-noir-2) 60%); background-size: 200% 100%; animation: pv-shimmer 1.4s linear infinite; min-height: 48px; } .pv-skeleton[aria-hidden="true"] { pointer-events: none; } @keyframes pv-shimmer { to { background-position: -200% 0; } } /* Honest static click-to-load embed placeholder (spec item 8, no-JS baseline). Never a spinner: a real