/* * The design tokens, the reset, then the elements' own styles and the * prose of database content. The first stylesheet the layout links. * * The cascade layers, lowest first. Every layered file repeats this * statement (CssLayersTest), so the order holds whichever file loads * first. For normal declarations a later layer beats an earlier one * whatever the selectors' specificity, and a declaration outside every * layer would beat them all (no file has one). !important reverses that: * an important declaration in an earlier layer beats one in a later * layer, which is why the reset's [hidden] is the only one. */ @layer reset, tokens, base, layout, components, pages, utilities; /* * Breakpoints (custom properties cannot be used in a media query, so they * are written out): mobile first, in range syntax, so no width matches two * of them. * (width >= 600px) wider phones and small tablets: the search forms go in a row * (width >= 768px) tablets: the 12-column grid * (width >= 1024px) desktop: the nav bar shows its links and search * A component that switches on its own width uses a container query. */ @layer tokens { :root { /* Light only for now (plan D17); the semantic names below let a dark scheme come later without touching the components. */ color-scheme: light; /* Palette ------------------------------------------------------ */ --color-white: #FFFFFF; --color-black: #000000; /* Greys, light to dark (twenty greys before, folded into ten). */ --gray-0: #f6f8fa; --gray-1: #eaecef; --gray-2: #e1e4e8; --gray-3: #d0d7de; --gray-4: #aaaaaa; --gray-5: #6a737d; --gray-6: #666666; --gray-7: #444444; --gray-8: #333333; --gray-9: #24292e; /* Navy: the nav bar, panels and text on the sky. */ --navy-50: #dff2fa; --navy-600: #0a5288; --navy-700: #004477; --navy-800: #003a66; --navy-900: #0a2b45; --navy-950: #00263f; /* Teal: the legacy pages' text (700 clears AA on white, 5.8:1). */ --teal-50: #e0faff; --teal-400: #30b6be; --teal-600: #0b837c; --teal-700: #12707a; --teal-800: #0d5c64; /* Greens and oranges of the brand. */ --green-400: #41ab88; --green-700: #005500; --green-800: #015234; --orange-600: #E65100; --orange-700: #C43E00; --red-700: #BB0000; --sky: #769BB6; /* Semantic ----------------------------------------------------- */ --color-primary: var(--navy-700); --color-secondary: var(--green-700); --color-error: var(--red-700); --color-forest-green: var(--green-800); /* The brand orange for small accents (plan D11): white text on it and it on white are both 5.2:1. */ --color-accent: var(--orange-700); /* The accent's old name (it was #E65100, 3.8:1 on white). */ --color-traffic-orange: var(--color-accent); --color-sky: var(--sky); /* Text on the sky background: navy, 4.9:1 (white was 2.9:1). */ --color-on-sky: var(--navy-900); --color-text-muted: var(--gray-6); --color-link: #0366d6; /* The keyboard focus ring: dark by default, white on a dark surface (which sets --focus-ring itself). */ --color-focus: var(--navy-900); --color-focus-on-dark: var(--color-white); /* Type: ten sizes (there were forty-one). */ --font-sans: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --text-2xs: 0.7rem; --text-xs: 0.8rem; --text-sm: 0.9rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.75rem; --text-3xl: 2rem; --text-4xl: 2.5rem; /* Space */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; /* Corners */ --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.625rem; --radius-pill: 999px; /* Shadows, navy-tinted, lowest first. */ --shadow-1: 0 1px 3px rgba(0, 28, 56, 0.1); --shadow-2: 0 2px 12px rgba(0, 28, 56, 0.1); --shadow-3: 0 4px 14px rgba(0, 28, 56, 0.16); --shadow-4: 0 6px 22px rgba(0, 20, 40, 0.35); --shadow-5: 0 10px 30px rgba(0, 20, 40, 0.45); /* Stacking, lowest first. */ --z-below: -1; --z-raised: 10; --z-dropdown: 999; --z-nav: 1000; --z-logo: 2000; --z-dialog: 2500; --z-skip-link: 3000; /* Motion: durations; under prefers-reduced-motion utilities.css makes every transition and animation take none, whatever these are. */ --duration-fast: 0.15s; --duration-base: 0.2s; --duration-slow: 0.3s; --duration-slide: 0.5s; --duration-fade: 2s; --size-header-height: 60px; /* Aliases */ --primary: var(--color-primary); --secondary: var(--color-secondary); --error: var(--color-error); --white: var(--color-white); --black: var(--color-black); --forest-green: var(--color-forest-green); --traffic-orange: var(--color-traffic-orange); --header-height: var(--size-header-height); } } @layer reset { /* The hidden attribute always hides, whatever display a class sets. */ [hidden] { display: none !important; } /* 1. Use a more-intuitive box-sizing model */ *, *::before, *::after { box-sizing: border-box; } /* 2. Remove default margin */ * { margin: 0; } /* 3. Enable keyword animations */ @media (prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } } body { /* 4. Add accessible line-height */ line-height: 1.5; /* 5. Improve text rendering */ -webkit-font-smoothing: antialiased; } /* 6. Improve media defaults */ img, picture, video, canvas, svg { display: block; max-width: 100%; } /* * An image's height follows its width, so the width and height * attributes reserve its space before it loads without fixing the * height when max-width shrinks it (which distorted it). */ img { height: auto; } /* 7. Inherit fonts for form controls */ input, button, textarea, select { font: inherit; } /* 8. Avoid text overflows */ p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /* 9. Improve line wrapping */ p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6 { text-wrap: stable; } /* * 10. The widgets' custom elements (scripts/*.js) are blocks, like the *
s they took over: the browser makes an element it has no * definition for inline. */ banner-carousel, cross-reference, video-carousel { display: block; } } @layer base { :root { color: var(--color-black); font-family: var(--font-sans); } /* * The keyboard focus ring, on everything focusable: navy, or white * where a surface sets --focus-ring (the nav bar, the banner). Either * is at least 3:1 against what it sits on. A component whose box clips * it (overflow: hidden) moves it inside with a negative outline-offset. */ :focus-visible { outline: 3px solid var(--focus-ring, var(--color-focus)); outline-offset: 2px; } html { overscroll-behavior: none; } ul { list-style-type: square; } /* * Classes the database content uses: {.description-accent} in a * manufacturer's markdown, and a product's
and