1390 lines
25 KiB
CSS
1390 lines
25 KiB
CSS
/*
|
|
* CCN — shared stylesheet: design tokens, base styles, primitives, site header and footer.
|
|
*
|
|
* Tokens mirror the CCN design system; the dark theme only repoints them.
|
|
* The CSP blocks inline styles, so every rule lives in a stylesheet.
|
|
* Phone-first; layouts switch at 600px and 1024px.
|
|
*/
|
|
|
|
/* ==========================================================================
|
|
Fonts — self-hosted latin subsets. URLs stay unversioned to match the preload links.
|
|
========================================================================== */
|
|
|
|
@font-face {
|
|
font-family: "Anton";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("/font/anton-400.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Archivo";
|
|
font-style: normal;
|
|
font-weight: 400 700;
|
|
font-display: swap;
|
|
src: url("/font/archivo-variable.woff2") format("woff2");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "Oswald";
|
|
font-style: normal;
|
|
font-weight: 500 700;
|
|
font-display: swap;
|
|
src: url("/font/oswald-variable.woff2") format("woff2");
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Tokens
|
|
========================================================================== */
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
/* Colour — light theme */
|
|
--paper: #f5f3ee;
|
|
--card: #ffffff;
|
|
--tint: #edeae2;
|
|
--header: #191713;
|
|
--header-well: #24211b;
|
|
--ink: #191713;
|
|
--ink-soft: #3d3a33;
|
|
--muted: #56524a;
|
|
--faint: #a39d8f;
|
|
--placeholder: #8e8779;
|
|
--on-dark: #ffffff;
|
|
--on-dark-muted: #cfc9bc;
|
|
--on-dark-faint: #8e8779;
|
|
--on-dark-fill: #f5f3ee;
|
|
--on-dark-fill-text: #191713;
|
|
--line: #ddd8cd;
|
|
--rule: #c9c3b6;
|
|
--line-dark: #3a362e;
|
|
--accent: #b3271e;
|
|
--accent-hover: #8e1f18;
|
|
--gold: #e8b84b;
|
|
--good: #1f6f4a;
|
|
--good-bg: #e7f0ea;
|
|
--good-line: #bfd8c9;
|
|
--warn: #8a5a0a;
|
|
--warn-bg: #fbefd9;
|
|
--warn-line: #ead3a0;
|
|
--bad: #8e1f18;
|
|
--bad-bg: #f8e3e1;
|
|
--bad-line: #e9b8b3;
|
|
|
|
/* Placeholder cover grounds */
|
|
--cover-navy: #2b3a55;
|
|
--cover-wine: #5b2333;
|
|
--cover-forest: #1f3d33;
|
|
--cover-rust: #6b3a1f;
|
|
--cover-slate: #26363b;
|
|
--cover-plum: #43304f;
|
|
|
|
/* Type families */
|
|
--font-display: "Oswald", "Arial Narrow", "Helvetica Neue", sans-serif;
|
|
--font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
--font-lettering: "Anton", "Haettenschweiler", Impact, sans-serif;
|
|
|
|
/* Spacing — a 4px grid */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-7: 28px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-14: 56px;
|
|
|
|
/* Page gutter: 16 / 32 / 56 */
|
|
--gutter: 16px;
|
|
--content-max: 1328px;
|
|
|
|
/* Radius */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 3px;
|
|
--radius-sheet: 12px;
|
|
--radius-pill: 999px;
|
|
|
|
/* Shadow */
|
|
--shadow-cover: 0 24px 48px rgba(25, 23, 19, 0.22);
|
|
--shadow-cover-sm: 0 18px 40px rgba(25, 23, 19, 0.28);
|
|
--shadow-sheet: 0 8px 24px rgba(25, 23, 19, 0.1);
|
|
|
|
/* Control heights */
|
|
--control-xs: 32px;
|
|
--control-sm: 36px;
|
|
--control-md: 44px;
|
|
--control-lg: 48px;
|
|
--control-xl: 52px;
|
|
--header-height: 56px;
|
|
|
|
/* Card grid: 2 / 3 / 5 columns */
|
|
--grid-columns: 2;
|
|
--grid-gap: 14px;
|
|
--card-cover: 258px;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
:root {
|
|
--gutter: 32px;
|
|
--grid-columns: 3;
|
|
--grid-gap: 24px;
|
|
--card-cover: 330px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
:root {
|
|
--gutter: 56px;
|
|
--header-height: 64px;
|
|
--grid-columns: 5;
|
|
--card-cover: 370px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--paper: #1c1a15;
|
|
--card: #24211b;
|
|
--tint: #2c2922;
|
|
--header: #0f0e0b;
|
|
--header-well: #1c1a15;
|
|
--ink: #f5f3ee;
|
|
--ink-soft: #d9d3c6;
|
|
--muted: #b5ae9f;
|
|
--faint: #7d776a;
|
|
--placeholder: #7d776a;
|
|
--on-dark: #f5f3ee;
|
|
--on-dark-muted: #b5ae9f;
|
|
--on-dark-faint: #7d776a;
|
|
--line: #3a362e;
|
|
--rule: #4a453c;
|
|
--accent: #d9453a;
|
|
--accent-hover: #b3271e;
|
|
--good: #7fc79a;
|
|
--good-bg: #1f3328;
|
|
--good-line: #2f5a41;
|
|
--warn: #e8b84b;
|
|
--warn-bg: #3a2e12;
|
|
--warn-line: #6a5320;
|
|
--bad: #f0a099;
|
|
--bad-bg: #3a1a17;
|
|
--bad-line: #6a2f2a;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Base
|
|
========================================================================== */
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
min-height: 100dvh;
|
|
margin: 0;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: var(--font-body);
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
main {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
dd,
|
|
figure {
|
|
margin: 0;
|
|
}
|
|
|
|
ul,
|
|
ol {
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
img,
|
|
svg {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--accent-hover);
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font: inherit;
|
|
color: inherit;
|
|
}
|
|
|
|
fieldset {
|
|
border: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
}
|
|
|
|
hr {
|
|
height: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
input::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--placeholder);
|
|
opacity: 1;
|
|
}
|
|
|
|
input[type="checkbox"],
|
|
input[type="radio"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: 0;
|
|
accent-color: var(--ink);
|
|
}
|
|
|
|
::selection {
|
|
background: var(--gold);
|
|
color: #191713;
|
|
text-shadow: none;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Layout
|
|
========================================================================== */
|
|
|
|
/* The centred content column. */
|
|
.page {
|
|
width: 100%;
|
|
max-width: calc(var(--content-max) + 2 * var(--gutter));
|
|
margin: 0 auto;
|
|
padding: var(--space-6) var(--gutter) var(--space-14);
|
|
}
|
|
|
|
.stack {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-8);
|
|
}
|
|
|
|
.card-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
|
|
gap: var(--grid-gap);
|
|
}
|
|
|
|
.section-head {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
.skip-link {
|
|
position: absolute;
|
|
top: var(--space-2);
|
|
left: var(--space-2);
|
|
z-index: 10;
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--on-dark-fill);
|
|
color: var(--on-dark-fill-text);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
transform: translateY(-200%);
|
|
}
|
|
|
|
.skip-link:focus {
|
|
color: var(--on-dark-fill-text);
|
|
transform: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Type
|
|
========================================================================== */
|
|
|
|
.type-hero,
|
|
.type-h1,
|
|
.type-h2,
|
|
.type-panel,
|
|
.type-price,
|
|
.type-stat {
|
|
font-family: var(--font-display);
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.type-hero,
|
|
.type-h1 {
|
|
font-size: 36px;
|
|
line-height: 1.02;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.type-h2,
|
|
.type-panel {
|
|
font-size: 24px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.type-price {
|
|
font-size: 38px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.type-stat {
|
|
font-size: 36px;
|
|
line-height: 1;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.type-hero {
|
|
font-size: 64px;
|
|
}
|
|
|
|
.type-h1 {
|
|
font-size: 48px;
|
|
}
|
|
|
|
.type-h2 {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.type-price {
|
|
font-size: 44px;
|
|
}
|
|
}
|
|
|
|
.type-lead {
|
|
color: var(--ink-soft);
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.type-lead {
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
.type-body {
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.type-body-sm {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.type-caption {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.type-small {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.type-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.type-eyebrow {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.type-card-title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.type-price-card {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
/* A quiet, ink-coloured link. */
|
|
.link-ink {
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.link-ink:hover {
|
|
color: var(--accent);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Primitives
|
|
========================================================================== */
|
|
|
|
/* Buttons, and links styled as buttons. */
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
height: var(--control-md);
|
|
padding: 0 var(--space-5);
|
|
border: 1px solid var(--rule);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.button:hover {
|
|
border-color: var(--ink);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.button--primary {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.button--primary:hover {
|
|
border-color: var(--accent-hover);
|
|
background: var(--accent-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.button--dark {
|
|
border-color: var(--ink);
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
}
|
|
|
|
.button--dark:hover {
|
|
background: var(--ink-soft);
|
|
color: var(--paper);
|
|
}
|
|
|
|
.button--outline {
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
.button--sm {
|
|
height: var(--control-sm);
|
|
padding: 0 var(--space-4);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.button--lg {
|
|
height: var(--control-lg);
|
|
padding: 0 var(--space-6);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.button--block {
|
|
width: 100%;
|
|
}
|
|
|
|
.button:disabled,
|
|
.button[aria-disabled="true"] {
|
|
border-color: var(--line);
|
|
background: var(--tint);
|
|
color: var(--muted);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Chips: grade, status and format markers. */
|
|
.chip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
padding: 3px 7px;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-xs);
|
|
background: var(--tint);
|
|
color: var(--ink);
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.chip {
|
|
padding: var(--space-1) var(--space-2);
|
|
font-size: 11px;
|
|
}
|
|
}
|
|
|
|
.chip--good {
|
|
border-color: var(--good-line);
|
|
background: var(--good-bg);
|
|
color: var(--good);
|
|
}
|
|
|
|
.chip--warn {
|
|
border-color: var(--warn-line);
|
|
background: var(--warn-bg);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.chip--bad {
|
|
border-color: var(--bad-line);
|
|
background: var(--bad-bg);
|
|
color: var(--bad);
|
|
}
|
|
|
|
/* Pills: filter chips and quick replies. */
|
|
.pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: 40px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--rule);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pill:hover {
|
|
border-color: var(--ink);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.pill[aria-current],
|
|
.pill[aria-pressed="true"] {
|
|
border-color: var(--header);
|
|
background: var(--header);
|
|
color: var(--on-dark);
|
|
font-weight: 600;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.pill {
|
|
height: var(--control-xs);
|
|
}
|
|
}
|
|
|
|
/* Form fields */
|
|
.field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.field__label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.field__hint {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
height: var(--control-md);
|
|
padding: 0 var(--space-3);
|
|
border: 1px solid var(--rule);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
font-size: 14px;
|
|
}
|
|
|
|
textarea.input {
|
|
height: auto;
|
|
min-height: 96px;
|
|
padding: var(--space-3);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.input:hover {
|
|
border-color: var(--ink);
|
|
}
|
|
|
|
.input[aria-invalid="true"] {
|
|
border-color: var(--bad);
|
|
}
|
|
|
|
/* Surfaces */
|
|
.card {
|
|
padding: var(--space-4);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--card);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.card {
|
|
padding: var(--space-6);
|
|
}
|
|
}
|
|
|
|
/* Notices */
|
|
.notice {
|
|
padding: var(--space-3) var(--space-4);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--tint);
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.notice--good {
|
|
border-color: var(--good-line);
|
|
background: var(--good-bg);
|
|
color: var(--good);
|
|
}
|
|
|
|
.notice--warn {
|
|
border-color: var(--warn-line);
|
|
background: var(--warn-bg);
|
|
color: var(--warn);
|
|
}
|
|
|
|
.notice--bad {
|
|
border-color: var(--bad-line);
|
|
background: var(--bad-bg);
|
|
color: var(--bad);
|
|
}
|
|
|
|
/* Two-letter monograms */
|
|
.monogram {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--header);
|
|
color: var(--on-dark);
|
|
font-family: var(--font-lettering);
|
|
font-size: 15px;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1;
|
|
}
|
|
|
|
.icon {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Site header — one markup, rearranged per breakpoint through grid areas.
|
|
========================================================================== */
|
|
|
|
.site-header {
|
|
flex-shrink: 0;
|
|
/* On phone, the search and pills below the dark bar sit on paper. */
|
|
background: linear-gradient(var(--header) 0 var(--header-height), var(--paper) var(--header-height));
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
.site-header :focus-visible {
|
|
outline-color: var(--gold);
|
|
}
|
|
|
|
.site-header__inner {
|
|
display: grid;
|
|
grid-template-areas:
|
|
"brand actions"
|
|
"search search"
|
|
"nav nav";
|
|
grid-template-columns: auto 1fr;
|
|
grid-template-rows: var(--header-height) auto auto;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: calc(var(--content-max) + 2 * var(--gutter));
|
|
margin: 0 auto;
|
|
padding: 0 var(--gutter);
|
|
}
|
|
|
|
.site-header__brand {
|
|
grid-area: brand;
|
|
color: var(--on-dark);
|
|
font-family: var(--font-lettering);
|
|
font-size: 26px;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-header__brand:hover {
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
/* Search */
|
|
.site-search {
|
|
grid-area: search;
|
|
display: flex;
|
|
align-items: center;
|
|
min-width: 0;
|
|
padding-top: var(--space-4);
|
|
}
|
|
|
|
.site-search__input {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
height: var(--control-lg);
|
|
padding: 0 14px;
|
|
border: 1px solid var(--rule);
|
|
border-right: 0;
|
|
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
font-size: 15px;
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
.site-search__input:focus-visible {
|
|
outline-color: var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.site-search__submit {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 52px;
|
|
height: var(--control-lg);
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
|
background: var(--header);
|
|
color: var(--on-dark);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.site-search__submit:focus-visible {
|
|
outline-color: var(--accent);
|
|
}
|
|
|
|
/* Format navigation */
|
|
.site-nav {
|
|
grid-area: nav;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
margin: 0 calc(-1 * var(--gutter));
|
|
padding: var(--space-5) var(--gutter) var(--space-1);
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.site-nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.site-nav__link {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
height: 40px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--rule);
|
|
border-radius: var(--radius-pill);
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.site-nav__link:hover {
|
|
border-color: var(--ink);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.site-nav__link[aria-current] {
|
|
border-color: var(--header);
|
|
background: var(--header);
|
|
color: var(--on-dark);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.site-nav__link:focus-visible {
|
|
outline-color: var(--accent);
|
|
}
|
|
|
|
/* Tablet only. */
|
|
.site-nav__link--extra {
|
|
display: none;
|
|
}
|
|
|
|
/* Actions */
|
|
.site-header__actions {
|
|
grid-area: actions;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: var(--space-1);
|
|
}
|
|
|
|
.site-header__icon-link {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
.site-header__icon-link:hover {
|
|
color: var(--gold);
|
|
}
|
|
|
|
.site-header__badge {
|
|
position: absolute;
|
|
top: 6px;
|
|
right: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 var(--space-1);
|
|
border-radius: 8px;
|
|
background: var(--accent);
|
|
color: #ffffff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
.site-header__text-link {
|
|
color: var(--on-dark-muted);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-header__text-link:hover {
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
.site-header__text-link--strong {
|
|
color: var(--on-dark);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.site-header__sign-in {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
height: 40px;
|
|
padding: 0 14px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--accent);
|
|
color: #ffffff;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.site-header__sign-in:hover {
|
|
background: var(--accent-hover);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.site-header__account {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
height: 44px;
|
|
padding: 0 var(--space-2);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--on-dark);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-header__account:hover {
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
.site-header__avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--on-dark-fill);
|
|
color: var(--on-dark-fill-text);
|
|
font-family: var(--font-lettering);
|
|
font-size: 12px;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
/* Breakpoint visibility helpers */
|
|
.from-tablet,
|
|
.from-desktop {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.site-header {
|
|
background: var(--header);
|
|
}
|
|
|
|
.site-header__inner {
|
|
grid-template-areas:
|
|
"brand search actions"
|
|
"nav nav nav";
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
grid-template-rows: var(--header-height) 44px;
|
|
column-gap: var(--space-4);
|
|
}
|
|
|
|
.site-search {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.site-search__input {
|
|
height: 40px;
|
|
border-color: var(--line-dark);
|
|
background: var(--header-well);
|
|
color: var(--on-dark);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.site-search__input:focus-visible,
|
|
.site-search__submit:focus-visible,
|
|
.site-nav__link:focus-visible {
|
|
outline-color: var(--gold);
|
|
}
|
|
|
|
.site-search__submit {
|
|
width: 44px;
|
|
height: 40px;
|
|
background: var(--accent);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.site-search__submit:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.site-nav {
|
|
align-self: stretch;
|
|
gap: 22px;
|
|
padding: 0 var(--gutter);
|
|
border-top: 1px solid var(--line-dark);
|
|
}
|
|
|
|
.site-nav__link,
|
|
.site-nav__link[aria-current] {
|
|
height: auto;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: none;
|
|
}
|
|
|
|
.site-nav__link {
|
|
color: var(--on-dark-muted);
|
|
}
|
|
|
|
.site-nav__link:hover,
|
|
.site-nav__link[aria-current] {
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
.site-nav__link--extra {
|
|
display: inline-flex;
|
|
}
|
|
|
|
/* Push the extra links to the end of the row. */
|
|
.site-nav__link:not(.site-nav__link--extra) + .site-nav__link--extra {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.site-header__actions {
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
.site-header__sign-in {
|
|
height: 38px;
|
|
}
|
|
|
|
.from-tablet {
|
|
display: revert;
|
|
}
|
|
|
|
.phone-only {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.site-header__inner {
|
|
grid-template-areas: "brand nav search actions";
|
|
grid-template-columns: auto auto minmax(0, 440px) 1fr;
|
|
grid-template-rows: var(--header-height);
|
|
column-gap: var(--space-7);
|
|
}
|
|
|
|
.site-header__brand {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.site-search__input,
|
|
.site-search__submit {
|
|
height: 38px;
|
|
}
|
|
|
|
.site-search__input {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.site-nav {
|
|
align-self: center;
|
|
margin: 0;
|
|
padding: 0;
|
|
border-top: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.site-nav__link--extra {
|
|
display: none;
|
|
}
|
|
|
|
.site-header__actions {
|
|
gap: 18px;
|
|
}
|
|
|
|
.site-header__icon-link {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
.site-header__badge {
|
|
top: 4px;
|
|
right: 4px;
|
|
}
|
|
|
|
.site-header__sign-in {
|
|
gap: var(--space-2);
|
|
padding: 0 var(--space-4);
|
|
}
|
|
|
|
.site-header__account {
|
|
height: 38px;
|
|
padding: 0 6px 0 var(--space-3);
|
|
}
|
|
|
|
.from-desktop {
|
|
display: revert;
|
|
}
|
|
|
|
.until-desktop {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Site footer
|
|
========================================================================== */
|
|
|
|
.site-footer {
|
|
flex-shrink: 0;
|
|
background: var(--header);
|
|
color: var(--on-dark-muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.site-footer :focus-visible {
|
|
outline-color: var(--gold);
|
|
}
|
|
|
|
.site-footer__inner {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-8);
|
|
width: 100%;
|
|
max-width: calc(var(--content-max) + 2 * var(--gutter));
|
|
margin: 0 auto;
|
|
padding: var(--space-10) var(--gutter) var(--space-7);
|
|
}
|
|
|
|
.site-footer__columns {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-8) var(--space-6);
|
|
align-items: start;
|
|
}
|
|
|
|
.site-footer__about {
|
|
display: flex;
|
|
flex-direction: column;
|
|
grid-column: 1 / -1;
|
|
gap: 10px;
|
|
max-width: 420px;
|
|
}
|
|
|
|
.site-footer__wordmark {
|
|
color: var(--on-dark);
|
|
font-family: var(--font-lettering);
|
|
font-size: 28px;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.site-footer__column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.site-footer__heading {
|
|
color: var(--on-dark);
|
|
font-family: inherit;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.site-footer__links {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.site-footer a {
|
|
color: var(--on-dark-muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-footer a:hover {
|
|
color: var(--on-dark);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.site-footer__language {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.language-toggle {
|
|
display: inline-flex;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line-dark);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.language-toggle__option {
|
|
height: var(--control-sm);
|
|
padding: 0 14px;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--on-dark-muted);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.language-toggle__option[aria-pressed="true"] {
|
|
background: var(--on-dark-fill);
|
|
color: var(--on-dark-fill-text);
|
|
}
|
|
|
|
.language-toggle__option:focus-visible {
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.site-footer__note {
|
|
color: var(--on-dark-faint);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.site-footer__legal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
padding-top: var(--space-4);
|
|
border-top: 1px solid var(--line-dark);
|
|
color: var(--on-dark-faint);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.site-footer__legal-links {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
gap: var(--space-4);
|
|
}
|
|
|
|
@media (min-width: 600px) {
|
|
.site-footer__columns {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.site-footer__columns {
|
|
grid-template-columns: 300px auto auto auto 1fr;
|
|
column-gap: 64px;
|
|
}
|
|
|
|
.site-footer__about {
|
|
grid-column: auto;
|
|
}
|
|
|
|
.site-footer__language {
|
|
justify-self: end;
|
|
}
|
|
|
|
.site-footer__legal {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-8);
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Helpers
|
|
========================================================================== */
|
|
|
|
.hidden,
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hidden visually, still read out. */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 0;
|
|
clip-path: inset(50%);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Print
|
|
========================================================================== */
|
|
|
|
@media print {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
background: #fff !important;
|
|
box-shadow: none !important;
|
|
color: #000 !important;
|
|
text-shadow: none !important;
|
|
}
|
|
|
|
.site-header,
|
|
.site-footer,
|
|
.skip-link {
|
|
display: none !important;
|
|
}
|
|
|
|
a,
|
|
a:visited {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
tr,
|
|
img {
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
page-break-after: avoid;
|
|
}
|
|
}
|