/* ========================================================================== IMS Services — reset and element defaults ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Header is sticky; anchor targets must clear it. */ scroll-padding-top: 6rem; /* * clip, NOT hidden, and on the root rather than on body. * * This used to be `overflow-x: hidden` on , which caused three bugs at * once. When one overflow axis is hidden and the other is visible, the * visible axis computes to auto, so that single declaration turned * into its own scroll container. That nested a second scrollport inside the * page (the gap below the footer), left the real horizontal overflow * scrolling at the root anyway (the strip beside the content on phones), and * broke position:sticky for every descendant, which the header and the page * aside both depend on. * * overflow-x: clip clips without establishing a scroll container, so * overflow-y stays visible and sticky keeps working. On the root element it * propagates to the viewport, which is where the clipping actually needs to * happen. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background-color: var(--ims-bg); color: var(--ims-text); font-family: var(--ims-font-body); font-size: var(--ims-fs-body); line-height: var(--ims-lh-relaxed); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* No overflow here. See the note on html above; setting it on body is what caused the nested scrollport and the sticky breakage. */ } h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--ims-font-display); font-weight: 600; line-height: var(--ims-lh-snug); letter-spacing: var(--ims-ls-heading); color: var(--ims-text); text-wrap: balance; } /* Display type is set on the wide end of Archivo's width axis. This is the single move that ties headings to the squared proportions of the wordmark. */ h1, .ims-h1 { font-size: var(--ims-fs-h1); font-stretch: var(--ims-display-stretch); line-height: var(--ims-lh-tight); letter-spacing: var(--ims-ls-display); font-weight: 700; } h2, .ims-h2 { font-size: var(--ims-fs-h2); font-stretch: var(--ims-display-stretch); font-weight: 600; } h3, .ims-h3 { font-size: var(--ims-fs-h3); } h4, .ims-h4 { font-size: var(--ims-fs-h4); } p, ul, ol, dl, blockquote, figure, pre, table { margin: 0 0 var(--ims-sp-5); } p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } /* Body copy caps its measure for readability. Long lines are the most common reason a text-heavy service page feels like hard work. */ p { max-width: 68ch; } a { color: var(--ims-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ims-dur-fast) var(--ims-ease); } a:hover { color: var(--ims-navy-700); } .ims-deep a { color: var(--ims-cyan-300); } .ims-deep a:hover { color: var(--ims-cyan-100); } /* One focus treatment everywhere. Visible, high contrast, never removed. */ :focus-visible { outline: 3px solid var(--ims-focus); outline-offset: 3px; border-radius: var(--ims-r-xs); } .ims-deep :focus-visible { outline-color: var(--ims-cyan-300); } img, picture, svg, video, canvas { max-width: 100%; height: auto; display: block; } /* * Inline SVG inherits the text colour, EXCEPT where the markup has explicitly * said otherwise. * * A bare `svg { fill: currentColor }` is a CSS declaration, and CSS outranks * SVG presentation attributes. It therefore beat the `fill="none"` on every * stroked icon in ims_icon(), filling outline marks solid. Scoping to * :not([fill]) lets the attribute win where it is present, while the logo and * the network graphic (neither of which sets a root fill) still inherit. */ svg:not([fill]) { fill: currentColor; } /* Default icon size. This lives in base.css, not components.css, ON PURPOSE. `.ims-icon` and `.ims-btn__icon` have identical specificity, so if this rule sat later in the cascade it would silently override every component's own icon sizing. Declaring it in an earlier file means component rules always win. */ .ims-icon { width: 1.15em; height: 1.15em; flex: none; } img { border-style: none; background-color: var(--ims-mist-100); } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { cursor: pointer; background: none; border: none; padding: 0; } ul, ol { padding-left: 1.35em; } li { margin-bottom: var(--ims-sp-2); } li:last-child { margin-bottom: 0; } hr { border: 0; height: 1px; background-color: var(--ims-border); margin: var(--ims-sp-8) 0; } strong, b { font-weight: 600; } small { font-size: var(--ims-fs-sm); } code, kbd, pre, samp { font-family: var(--ims-font-mono); font-size: 0.92em; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: var(--ims-sp-3) var(--ims-sp-4); border-bottom: 1px solid var(--ims-border); } th { font-family: var(--ims-font-mono); font-size: var(--ims-fs-label); letter-spacing: var(--ims-ls-label); text-transform: uppercase; color: var(--ims-text-mid); font-weight: 500; } blockquote { padding-left: var(--ims-sp-5); border-left: 2px solid var(--ims-accent); font-size: var(--ims-fs-lead); color: var(--ims-text-mid); } ::selection { background-color: var(--ims-cyan-200); color: var(--ims-navy-950); } /* Reduced motion: kill transitions and animations rather than shortening them, so nothing animates at all for someone who asked for stillness. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }