/* * Purpose: Reset and element defaults. Every value here is a token. */ *, *::before, *::after { box-sizing: border-box; } /* * The hidden attribute must win. * * Its default is display:none at the very bottom of the cascade, so any * component rule with its own display - and nearly every component here has one * - silently beats it. That has bitten this project repeatedly: the wizard * showed "Continue" and "Submit for review" at the same time, and the help * panel rendered all three of its panes at once, in both cases while the script * was setting hidden perfectly correctly. * * There are a dozen one-off `.thing[hidden] { display: none }` patches around * the stylesheets, each one somebody hitting this and fixing it locally. This * is that fix, once. !important is deliberate: the whole point is to outrank a * component's own display declaration. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); font-weight: var(--fw-regular); /* * Body copy is the softer ink; headings keep the full brand dark. Setting the * hard black on meant every paragraph, label and caption inherited it. */ color: var(--rh-text-body); background-color: var(--rh-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Nothing may cause horizontal scroll at 320px. */ overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); color: var(--rh-text-primary); text-wrap: balance; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: var(--fw-semibold); } h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: var(--fw-semibold); } p { margin: 0; text-wrap: pretty; } a { color: var(--rh-teal); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--rh-teal-hover); text-decoration: underline; } /* * A visible focus ring on every interactive element. Never remove this without * providing an equally clear replacement. */ :focus-visible { outline: 2px solid var(--rh-focus); outline-offset: 3px; border-radius: var(--r-input); } img, picture, video, svg { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: var(--fs-body); color: var(--rh-text-primary); } table { border-collapse: collapse; width: 100%; } hr { border: 0; border-top: 1px solid var(--rh-border); margin: var(--space-32) 0; } /* Skip link - first focusable element in the document. */ .rh-skip-link { position: absolute; top: var(--space-8); left: var(--space-8); z-index: var(--z-toast); padding: var(--space-12) var(--space-20); background: var(--rh-dark); color: var(--rh-text-inverse); border-radius: var(--r-button); font-weight: var(--fw-semibold); transform: translateY(-200%); transition: transform var(--dur-fast) var(--ease-out); } .rh-skip-link:focus { transform: translateY(0); color: var(--rh-text-inverse); text-decoration: none; } /* Visually hidden, but available to screen readers. */ .rh-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Prevent background scrolling while a drawer or modal is open. */ body.rh-scroll-locked { overflow: hidden; } /* Editorial content produced by the WYSIWYG editor. */ .rh-prose > * + * { margin-top: var(--space-16); } /* * Editor content is the one place the theme does not control the markup, so it * is also the likeliest source of horizontal overflow at 320px. A wide table or * a preformatted block scrolls inside its own box rather than widening the page, * and a long unbroken string - a URL pasted into a paragraph - wraps instead of * pushing the layout out. */ .rh-prose table, .rh-prose pre { display: block; max-width: 100%; overflow-x: auto; } .rh-prose p, .rh-prose li, .rh-prose h2, .rh-prose h3 { overflow-wrap: anywhere; } .rh-prose h2 { margin-top: var(--space-40); font-size: var(--fs-h3); } .rh-prose h3 { margin-top: var(--space-32); font-size: var(--fs-h4); } .rh-prose p, .rh-prose li { color: var(--rh-text-secondary); font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); } .rh-prose ul, .rh-prose ol { padding-left: var(--space-24); } .rh-prose ul li { list-style: disc; } .rh-prose ol li { list-style: decimal; } .rh-prose strong { color: var(--rh-text-primary); font-weight: var(--fw-semibold); } .rh-prose a { text-decoration: underline; } /* Prose following a heading in the same block, rather than opening a section. */ .rh-prose--spaced { margin-top: var(--space-24); }