/* utilities.css Small, single-purpose helper classes used across pages, plus the shared animation utilities defined by the Motion System (spec §6). This is NOT a utility-first framework — only the helpers the Design Specification actually calls for. Depends on tokens.css. */ /* ============================================================ LAYOUT HELPERS ============================================================ */ /* Main content container — centers content at --max-width-content with mobile-first horizontal padding. Used by every page's
or top-level section wrapper. */ .container { width: 100%; max-width: var(--max-width-content); margin-inline: auto; padding-inline: var(--page-padding-x-mobile); } @media (min-width: 768px) { .container { padding-inline: var(--page-padding-x); } } /* Constrains prose/readable text blocks (spec §5 --max-width-text) */ .text-measure { max-width: var(--max-width-text); } /* ============================================================ ACCESSIBILITY HELPERS ============================================================ */ /* Visually hides content while keeping it available to assistive technology (e.g. supplemental labels, status text alternatives). */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ TYPE HELPERS ============================================================ */ .u-mono { font-family: var(--font-mono); letter-spacing: var(--text-mono-tracking); } .u-uppercase-label { text-transform: uppercase; font-weight: var(--text-label-weight); letter-spacing: var(--text-label-tracking); } /* ============================================================ ANIMATION UTILITIES (spec §6 Motion System) Meaningful-only, CSS-first, respects prefers-reduced-motion (global override lives in base.css). ============================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes pageEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Applied on or top-level page wrapper on mount. */ .u-page-enter { animation: pageEnter var(--duration-base) var(--ease-out) both; } /* Scroll-reveal target state. scroll-reveal.js toggles the `.is-visible` class via IntersectionObserver; elements start hidden/offset and animate in once observed. */ .u-reveal { opacity: 0; transform: translateY(12px); } .u-reveal.is-visible { animation: fadeUp var(--duration-slow) var(--ease-out) both; } /* Stagger helper — scroll-reveal.js sets this custom property (e.g. index * 60ms) per sibling before adding .is-visible. */ .u-reveal { animation-delay: var(--reveal-delay, 0ms); }