pulls the content out of the root snapshot, so "root" is the background (plus anything unnamed) and can be timed separately. Browsers without support just navigate normally. */ /* @view-transition must sit at the top level: nesting it inside @media makes Chromium drop the whole block. Reduced-motion users get the plain navigation because the stage animations below are what create the effect. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { :root { --t-exit: 500ms; --t-blend: 900ms; --t-enter: 1200ms; } main { view-transition-name: content; } .sidebar { view-transition-name: nav; } .mobile-bar { view-transition-name: navbar; } html.menu-open .menu-sheet { view-transition-name: menu-sheet; } /* 1. content out */ ::view-transition-old(content) { animation: vt-fade-out var(--t-exit) ease both; } /* 2. backgrounds cross-fade, once the content has cleared */ ::view-transition-old(root) { animation: vt-fade-out var(--t-blend) ease-in-out var(--t-exit) both; } ::view-transition-new(root) { animation: vt-fade-in var(--t-blend) ease-in-out var(--t-exit) both; } /* 3. content in, after the new background is in place */ ::view-transition-new(content) { animation: vt-fade-in var(--t-enter) ease calc(var(--t-exit) + var(--t-blend)) both; } ::view-transition-group(content) { animation-duration: calc(var(--t-exit) + var(--t-blend) + var(--t-enter)); } /* Navigation: completely still. The leaving page's navigation stays on screen, fully opaque, and the arriving page's navigation is kept hidden behind it until its fonts have loaded (head.js holds .vt-hold on until then). Only then does the new one fade in on top. The two are identical apart from the highlighted link, so nothing moves: without the hold, the new navigation's first frames could be drawn before its fonts arrive and visibly jump. No size or position animation either. (Normal blending: the default plus-lighter would brighten two stacked opaque panels.) */ ::view-transition-group(nav), ::view-transition-group(navbar) { animation: none; } ::view-transition-old(nav), ::view-transition-old(navbar) { animation: none; mix-blend-mode: normal; } ::view-transition-new(nav), ::view-transition-new(navbar) { animation: vt-fade-in 300ms ease both; mix-blend-mode: normal; } html.vt-hold::view-transition-new(nav), html.vt-hold::view-transition-new(navbar) { animation: none; opacity: 0; } /* Leaving from the open mobile menu (site.js fades the menu's links out first, leaving the Onyx sheet, then navigates; head.js sets .vt-from-menu on the arriving page). The old page is already hidden by the sheet, so: Onyx fades into the new background, then content in. */ html.vt-from-menu::view-transition-old(root), html.vt-from-menu::view-transition-old(content) { display: none; } html.vt-from-menu::view-transition-new(root) { animation: none; } html.vt-from-menu::view-transition-old(menu-sheet) { animation: vt-fade-out var(--t-blend) ease-in-out both; } html.vt-from-menu::view-transition-new(content) { animation: vt-fade-in var(--t-enter) ease var(--t-blend) both; } html.vt-from-menu::view-transition-group(content) { animation-duration: calc(var(--t-blend) + var(--t-enter)); } @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } } } /* ---------- Grain: code-generated noise, seamless tile ---------- .grain on any element puts the noise above that element's own background and below its content, and grows with the element's height. The noise blends with the element's OWN background (the element is its own isolation group). On , give a background too, or the browser hands body's background to the canvas and the grain has nothing to blend with (it then just lightens the page). */ .grain { position: relative; isolation: isolate; } .grain::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 -.08 .33 .33 .33 0 -.08 .33 .33 .33 0 -.08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: var(--grain-size) var(--grain-size); opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend); } /* ---------- Pill buttons & chips: optical centering ---------- All pills set LT Sip caps with 0.2em tracking. Tracking adds a trailing gap after the last letter, and the caps sit high in the font's line box, so geometrically centered text reads left and high. text-indent matches the trailing gap; the top padding drops the caps onto the pill's center line. (body raises specificity over the page rules.) */ body :is(.btn-olive, .btn-granite, .rs-filters button, .ed-legend li) { text-indent: 0.2em; padding-top: 0.16em; } /* ---------- Scroll reveal ---------- site.js tags text in

with data-reveal (opacity only). data-reveal="up" = fade + rise (per-instance exceptions in the guidelines). Put data-reveal on a wrapper to animate a group as one unit; data-reveal="none" opts an element (and its children) out. */ .js [data-reveal]:not([data-reveal="none"]) { opacity: 0; /* This rule outranks each element's own transition, so it also carries the site-wide hover fade (buttons and links tagged for reveal would otherwise snap on hover). */ transition: opacity var(--reveal-dur) ease, transform var(--reveal-dur) ease, color var(--nav-hover-dur) ease, background-color var(--nav-hover-dur) ease, border-color var(--nav-hover-dur) ease, text-decoration-color var(--nav-hover-dur) ease; transition-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms), 0ms, 0ms, 0ms, 0ms; /* stagger the reveal only, never the hover */ } .js [data-reveal="up"] { transform: translateY(var(--reveal-shift)); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .mobile-menu, .menu-sheet, .menu-toggle span { transition: none !important; } }