/* ========================================================================== RUBRIK — RESET + BASE A deliberately small, modern reset. No normalize.css bulk. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; /* Native smooth scroll is the accessible baseline; Lenis enhances it. */ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* The blunt kill applies only while the interaction layer is absent (no data-rbs-motion-level on body). Once the studio kernel is live it owns reduced motion with a gentler contract — fewer and softer, keep opacity/color feedback, never zero — and this !important would override it. With JS off the attribute never appears, so the full kill still protects the static page. */ body:not([data-rbs-motion-level]) *, body:not([data-rbs-motion-level]) *::before, body:not([data-rbs-motion-level]) *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--rb-sys-bg-canvas); color: var(--rb-sys-fg-primary); font-family: var(--rb-sys-font-functional); font-size: var(--rb-sys-text-p1-size); line-height: var(--rb-sys-text-p1-leading); letter-spacing: var(--rb-sys-text-p1-tracking); font-weight: var(--rb-sys-text-p1-weight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-synthesis-weight: none; /* `clip`, not `hidden`: overflow-x:hidden turns into a scroll container, which silently breaks `position: sticky` on the header. `clip` trims the same overflow without creating one. */ overflow-x: clip; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul[class], ol[class] { list-style: none; margin: 0; padding: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--rb-sys-focus-ring-width) solid var(--rb-sys-focus-ring); outline-offset: var(--rb-sys-focus-ring-offset); border-radius: var(--rb-ref-radius-xs); } /* Never remove focus outright — only swap the non-keyboard case. */ :where(a, button, input, select, textarea, summary):focus:not(:focus-visible) { outline: none; } ::selection { background: var(--rb-ref-teal-500); color: var(--rb-ref-ink); } svg { fill: currentColor; } svg:not([fill]) { fill: currentColor; } /* Accessibility helpers ---------------------------------------------------- */ .rb-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .rb-skip-link { position: absolute; top: 0; left: 0; z-index: var(--rb-sys-z-modal); transform: translateY(-120%); padding: var(--rb-ref-space-3) var(--rb-ref-space-5); background: var(--rb-sys-bg-dark); color: var(--rb-sys-fg-on-dark); border-bottom-right-radius: var(--rb-ref-radius-sm); font-family: var(--rb-sys-font-label); font-size: var(--rb-sys-text-l1-size); letter-spacing: var(--rb-sys-text-l1-tracking); text-transform: uppercase; transition: transform var(--rb-sys-duration-2) var(--rb-sys-ease-out); } .rb-skip-link:focus-visible { transform: translateY(0); } [hidden] { display: none !important; }