/* =========================================================================== Choice One Rx — Base Reset, element defaults, layout primitives, motion, utilities. Consumes css/tokens.css. Declares no colors of its own. =========================================================================== */ /* ---- Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; /* clears the sticky header on anchor jumps */ /* The closed mobile drawer sits off-screen at translateX(100%) and, being position:fixed, still extends the document's scrollable width — 400px of phantom horizontal scroll on desktop. `clip` suppresses it without creating a scroll container (which `hidden` on would, breaking position:sticky on the header). */ overflow-x: clip; } body { background: var(--c1-bg); color: var(--c1-text); font-family: var(--c1-font-body); font-size: var(--c1-fs-base); line-height: var(--c1-lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis-weight: none; min-height: 100vh; overflow-x: hidden; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* ---- Typography -------------------------------------------------------- */ /* Display type is the serif; small headings drop back to Inter because a serif at 17px next to 13px Inter body just looks like a mistake. The face changes where the SIZE changes. */ h1, h2, h3 { font-family: var(--c1-font-display); font-weight: 400; line-height: var(--c1-lh-tight); letter-spacing: var(--c1-tracking-display); color: var(--c1-text); text-wrap: balance; font-optical-sizing: auto; } h1 { font-size: var(--c1-fs-3xl); } h2 { font-size: var(--c1-fs-2xl); } h3 { font-size: var(--c1-fs-xl); line-height: var(--c1-lh-snug); } h4, h5, h6 { font-family: var(--c1-font-body); font-weight: 600; line-height: var(--c1-lh-snug); letter-spacing: var(--c1-tracking-tight); color: var(--c1-text); } h4 { font-size: var(--c1-fs-md); } h5, h6 { font-size: var(--c1-fs-base); } /* Emphasis inside a serif headline: set the accent phrase in italic rather than bolding it. Bold serif at display size gets heavy and shouty. */ h1 em, h2 em { font-style: italic; color: var(--c1-teal-800); } p { text-wrap: pretty; } p + p { margin-top: var(--sp-4); } a { color: var(--c1-link); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: color var(--c1-dur-1) var(--c1-ease); } a:hover { color: var(--c1-link-hover); text-decoration-color: currentColor; } strong, b { font-weight: 650; } small { font-size: var(--c1-fs-sm); } hr { border: 0; border-top: 1px solid var(--c1-border); margin: var(--sp-6) 0; } ul, ol { padding-left: 1.25em; } li + li { margin-top: var(--sp-2); } code, kbd, samp { font-family: var(--c1-font-mono); font-size: 0.9em; } /* ---- Editorial primitives ---------------------------------------------- The vocabulary that does the heavy lifting: a letterspaced label, a rule, and a numeral. Used together they carry structure that would otherwise be faked with another row of icon cards. */ /* Label — small, wide-tracked, uppercase. Reads as a typographic rule rather than as a heading. */ .label-xs, .eyebrow { display: block; font-family: var(--c1-font-body); font-size: 0.6875rem; /* 11px */ font-weight: 600; letter-spacing: var(--c1-tracking-wide); text-transform: uppercase; color: var(--c1-text-subtle); line-height: 1.4; } .eyebrow { color: var(--c1-teal-800); margin-bottom: var(--sp-4); } /* Label sitting on a hairline — the section-opener pattern. */ .label-rule { display: flex; align-items: baseline; gap: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c1-ink-900); margin-bottom: var(--sp-6); } .label-rule .num { font-family: var(--c1-font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: var(--c1-tracking-wide); color: var(--c1-teal-700); font-variant-numeric: tabular-nums; } .on-dark .label-rule { border-top-color: rgba(255,255,255,.35); } .on-dark .label-rule .num { color: var(--c1-teal-300); } .on-dark .label-xs, .on-dark .eyebrow { color: rgba(255,255,255,.55); } /* Editorial numeral — the big 01 / 02 in a margin. */ .numeral { font-family: var(--c1-font-display); font-size: var(--c1-fs-xl); font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1; color: var(--c1-teal-700); } .rule { border: 0; border-top: 1px solid var(--c1-border); margin: 0; } .rule-strong { border-top-color: var(--c1-ink-900); } .lede { font-size: var(--c1-fs-lg); color: var(--c1-text-muted); line-height: 1.55; max-width: 56ch; } .prose { max-width: var(--c1-maxw-prose); } .prose > * + * { margin-top: var(--sp-4); } .prose h2 { margin-top: var(--sp-7); } .prose h3 { margin-top: var(--sp-6); } .prose ul, .prose ol { padding-left: 1.35em; } /* ---- Focus ------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--c1-border-focus); outline-offset: 2px; border-radius: var(--c1-r-sm); } :focus:not(:focus-visible) { outline: none; } .skip-link { position: absolute; left: var(--sp-4); top: var(--sp-4); transform: translateY(-200%); z-index: var(--c1-z-toast); background: var(--c1-teal-700); color: #fff; padding: var(--sp-3) var(--sp-4); border-radius: var(--c1-r-sm); font-weight: 600; text-decoration: none; transition: transform var(--c1-dur-2) var(--c1-ease-out); } .skip-link:focus { transform: translateY(0); color: #fff; } /* ---- Layout ------------------------------------------------------------ */ .wrap { width: 100%; max-width: var(--c1-maxw); margin-inline: auto; padding-inline: var(--c1-gutter); } .wrap-narrow { max-width: 860px; } .wrap-wide { max-width: 1400px; } .section { padding-block: var(--c1-section-y); } .section-sm { padding-block: clamp(40px, 5vw, 64px); } .section-subtle { background: var(--c1-bg-subtle); } .section-sunken { background: var(--c1-bg-sunken); } .stack > * + * { margin-top: var(--sp-4); } .stack-lg > * + * { margin-top: var(--sp-6); } .stack-sm > * + * { margin-top: var(--sp-2); } .grid { display: grid; gap: var(--sp-5); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; } .between { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; } .section-head { max-width: 760px; margin-bottom: var(--sp-7); } .section-head.center { margin-inline: auto; text-align: center; } .section-head p { margin-top: var(--sp-4); color: var(--c1-text-muted); font-size: var(--c1-fs-lg); } /* ---- Utilities --------------------------------------------------------- */ .center { text-align: center; } .muted { color: var(--c1-text-muted); } .subtle { color: var(--c1-text-subtle); } .nowrap { white-space: nowrap; } .mono { font-family: var(--c1-font-mono); font-variant-numeric: tabular-nums; } .tabular { font-variant-numeric: tabular-nums; } .hidden { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- Icons — CSS mask so they inherit currentColor ---------------------- */ .ico { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .ico-lg { width: 1.75em; height: 1.75em; } .ico-xl { width: 2.5em; height: 2.5em; } /* ---- Motion ------------------------------------------------------------ Reveal-on-scroll. Elements start displaced and are released by an IntersectionObserver adding .is-in (see js/motion.js). If JS never runs, the .no-js fallback below keeps everything visible. */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--c1-dur-4) var(--c1-ease-out), transform var(--c1-dur-4) var(--c1-ease-out); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; /* Failsafe — see note below */ animation: c1-reveal-failsafe 1ms linear 2.5s forwards; } .reveal.is-in { opacity: 1; transform: none; animation: none; } /* Staggered children — index set inline as --i */ .stagger > * { opacity: 0; transform: translateY(16px); transition: opacity var(--c1-dur-4) var(--c1-ease-out), transform var(--c1-dur-4) var(--c1-ease-out); transition-delay: calc(var(--i, 0) * 70ms); animation: c1-reveal-failsafe 1ms linear 2.5s forwards; } .stagger.is-in > * { opacity: 1; transform: none; animation: none; } /* ---- Reveal failsafe --------------------------------------------------- Content must NEVER be permanently invisible because a progressive enhancement failed. The reveal effect depends on JavaScript adding .is-in via IntersectionObserver; if that script fails to load, throws, is blocked, or the observer never fires, every .reveal element would stay at opacity 0 and the page would look empty. This animation runs purely in CSS and forces the final visible state after 2.5s regardless. When JS works normally, .is-in wins well before then and cancels it. This is a backstop, not part of the effect. */ @keyframes c1-reveal-failsafe { to { opacity: 1; transform: none; } } .lift { transition: transform var(--c1-dur-2) var(--c1-ease), box-shadow var(--c1-dur-2) var(--c1-ease); } .lift:hover { transform: var(--c1-lift); box-shadow: var(--c1-shadow-3); } /* ---- Skeletons --------------------------------------------------------- */ .skel { position: relative; overflow: hidden; background: var(--c1-bg-sunken); border-radius: var(--c1-r-sm); color: transparent !important; } .skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c1-surface) 70%, transparent), transparent); animation: c1-shimmer 1.4s infinite; } @keyframes c1-shimmer { 100% { transform: translateX(100%); } } .skel-line { height: 1em; margin-block: 0.25em; } .skel-line.w-60 { width: 60%; } .skel-line.w-40 { width: 40%; } .skel-line.w-80 { width: 80%; } /* ---- Reduced motion ---------------------------------------------------- Non-negotiable. Everything resolves to its final state instantly. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .stagger > * { opacity: 1 !important; transform: none !important; } .lift:hover { transform: none; } .skel::after { animation: none; } } /* ---- Print ------------------------------------------------------------- */ @media print { .site-header, .site-footer, .skip-link, .no-print { display: none !important; } body { background: #fff; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; } .section { padding-block: var(--sp-5); } }