1929 lines
35 KiB
CSS
1929 lines
35 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;
|
|
--cover-brick: #7a2e24;
|
|
--cover-olive: #4a4326;
|
|
--cover-ink: #1e3347;
|
|
|
|
/* 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--xl {
|
|
height: 56px;
|
|
gap: 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.button--block {
|
|
width: 100%;
|
|
}
|
|
|
|
.button--bare {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
}
|
|
|
|
.button--bare:hover {
|
|
border-color: transparent;
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* An applied filter: pressing it removes it. */
|
|
.pill--active {
|
|
gap: var(--space-1);
|
|
border-color: var(--header);
|
|
background: var(--header);
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
.pill--active:hover {
|
|
border-color: var(--accent);
|
|
background: var(--accent);
|
|
color: #ffffff;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.pill {
|
|
height: var(--control-xs);
|
|
padding: 0 var(--space-3);
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
/* 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__error {
|
|
color: var(--bad);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.input--lg {
|
|
height: 50px;
|
|
padding: 0 14px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.input--sm {
|
|
height: var(--control-sm);
|
|
padding: 0 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.monogram--lg {
|
|
width: 52px;
|
|
height: 52px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.monogram--xl {
|
|
width: 72px;
|
|
height: 72px;
|
|
font-size: 28px;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.monogram--xl {
|
|
width: 112px;
|
|
height: 112px;
|
|
font-size: 44px;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* The sign-out is a form, so it cannot be triggered by a link on another site. */
|
|
.site-header__sign-out {
|
|
display: flex;
|
|
margin: 0;
|
|
}
|
|
|
|
.site-header__sign-out button {
|
|
min-height: var(--control-md);
|
|
padding: 0 var(--space-1);
|
|
border: 0;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Catalogue components
|
|
========================================================================== */
|
|
|
|
/* Placeholder covers. The face scales with the cover's width through container units. */
|
|
.cover {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
aspect-ratio: 2 / 3;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--cover-ground, var(--cover-navy));
|
|
color: var(--cover-lettering, var(--gold));
|
|
container-type: inline-size;
|
|
}
|
|
|
|
.cover::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 42% -15% auto;
|
|
height: 22%;
|
|
background: rgba(255, 255, 255, 0.07);
|
|
transform: rotate(-8deg);
|
|
}
|
|
|
|
.cover__face {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 6.5cqw;
|
|
}
|
|
|
|
.cover__title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: var(--font-lettering);
|
|
font-size: 16cqw;
|
|
line-height: 0.9;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.cover__foot {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
gap: 4cqw;
|
|
}
|
|
|
|
.cover__imprint {
|
|
color: var(--cover-imprint, #c9d3e4);
|
|
font-size: max(9px, 4cqw);
|
|
font-weight: 600;
|
|
letter-spacing: 0.14em;
|
|
line-height: 1.2;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.cover__number {
|
|
color: #ffffff;
|
|
font-family: var(--font-lettering);
|
|
font-size: 16cqw;
|
|
line-height: 0.9;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.cover__number--text {
|
|
font-size: 12cqw;
|
|
}
|
|
|
|
.cover--navy { --cover-ground: var(--cover-navy); --cover-lettering: var(--gold); --cover-imprint: #c9d3e4; }
|
|
.cover--wine { --cover-ground: var(--cover-wine); --cover-lettering: #f0e3cf; --cover-imprint: #e4cfc0; }
|
|
.cover--forest { --cover-ground: var(--cover-forest); --cover-lettering: #e4c35c; --cover-imprint: #c6d8ce; }
|
|
.cover--rust { --cover-ground: var(--cover-rust); --cover-lettering: #f2d9a8; --cover-imprint: #e8d2b8; }
|
|
.cover--slate { --cover-ground: var(--cover-slate); --cover-lettering: #d9e6e4; --cover-imprint: #c5d6d4; }
|
|
.cover--plum { --cover-ground: var(--cover-plum); --cover-lettering: #f2c14e; --cover-imprint: #d8cce0; }
|
|
.cover--brick { --cover-ground: var(--cover-brick); --cover-lettering: #f5e7d3; --cover-imprint: #ecd3c4; }
|
|
.cover--olive { --cover-ground: var(--cover-olive); --cover-lettering: #efe4b8; --cover-imprint: #ddd3a8; }
|
|
.cover--ink { --cover-ground: var(--cover-ink); --cover-lettering: #c9d9e8; --cover-imprint: #b5c8da; }
|
|
|
|
/* Each tone carries its own motif. */
|
|
.cover--wine::before {
|
|
inset: auto -20% -14% auto;
|
|
width: 70%;
|
|
height: auto;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
transform: none;
|
|
}
|
|
|
|
.cover--forest::before,
|
|
.cover--olive::before {
|
|
inset: 0 0 auto;
|
|
height: 35%;
|
|
background: rgba(255, 255, 255, 0.06);
|
|
transform: none;
|
|
}
|
|
|
|
.cover--rust::before,
|
|
.cover--brick::before {
|
|
inset: auto -15% 12%;
|
|
height: 16%;
|
|
background: rgba(0, 0, 0, 0.14);
|
|
transform: rotate(6deg);
|
|
}
|
|
|
|
.cover--plum::before,
|
|
.cover--ink::before {
|
|
inset: 0 auto 0 0;
|
|
width: 10%;
|
|
height: auto;
|
|
background: rgba(0, 0, 0, 0.22);
|
|
transform: none;
|
|
}
|
|
|
|
.cover--plum .cover__face,
|
|
.cover--ink .cover__face {
|
|
padding-left: 16cqw;
|
|
}
|
|
|
|
/* Listing cards */
|
|
.listing-card {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
min-width: 0;
|
|
}
|
|
|
|
.listing-card__cover {
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.listing-card__save {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(245, 243, 238, 0.92);
|
|
color: #191713;
|
|
}
|
|
|
|
.listing-card__save:hover {
|
|
background: #ffffff;
|
|
color: #b3271e;
|
|
}
|
|
|
|
.listing-card__title {
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.listing-card__title:hover {
|
|
color: var(--ink);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.listing-card__meta,
|
|
.listing-card__shop {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.listing-card__meta {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.listing-card__row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.listing-card__shop {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.listing-card__shop:hover {
|
|
color: var(--ink);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.listing-card {
|
|
gap: 10px;
|
|
}
|
|
|
|
/* Beside the filter rail, the grid runs four across. */
|
|
.card-grid--search {
|
|
--grid-columns: 4;
|
|
}
|
|
}
|
|
|
|
/* Pagination */
|
|
.pagination {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding-top: var(--space-2);
|
|
}
|
|
|
|
.pagination__page,
|
|
.pagination__next {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: var(--control-md);
|
|
height: var(--control-md);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.pagination__page:hover {
|
|
background: var(--tint);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.pagination__page[aria-current] {
|
|
background: var(--header);
|
|
color: var(--on-dark);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pagination__next {
|
|
margin-left: 10px;
|
|
padding: 0 14px;
|
|
border: 1px solid var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.pagination__next:hover {
|
|
background: var(--ink);
|
|
color: var(--paper);
|
|
}
|
|
|
|
/* Breadcrumb */
|
|
.breadcrumb {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.breadcrumb a {
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.breadcrumb a:hover {
|
|
color: var(--ink);
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.breadcrumb__current {
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
overflow-x: auto;
|
|
border-bottom: 1px solid var(--line);
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.tabs::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.tabs__tab {
|
|
display: inline-flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
height: var(--control-md);
|
|
padding: 0 var(--space-4);
|
|
border-bottom: 3px solid transparent;
|
|
color: var(--muted);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tabs__tab:hover {
|
|
color: var(--ink);
|
|
}
|
|
|
|
.tabs__tab[aria-current] {
|
|
border-bottom-color: var(--ink);
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Select, and the sort control built on it */
|
|
.select {
|
|
height: 40px;
|
|
padding: 0 var(--space-3);
|
|
border: 1px solid var(--ink);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.sort {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.sort__label {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Checkbox rows */
|
|
.check {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-height: 24px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Segmented radio control */
|
|
.segmented {
|
|
display: flex;
|
|
overflow: hidden;
|
|
border: 1px solid var(--ink);
|
|
border-radius: var(--radius-sm);
|
|
}
|
|
|
|
.segmented__option {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.segmented__option + .segmented__option {
|
|
border-left: 1px solid var(--ink);
|
|
}
|
|
|
|
.segmented__option input {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.segmented__option span {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: var(--control-sm);
|
|
padding: 0 var(--space-2);
|
|
color: var(--ink);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.segmented__option input:checked + span {
|
|
background: var(--header);
|
|
color: var(--on-dark);
|
|
}
|
|
|
|
.segmented__option input:focus-visible + span {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
/* Empty states */
|
|
.empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
padding: var(--space-8) var(--space-6);
|
|
border: 1px dashed var(--rule);
|
|
border-radius: var(--radius-sm);
|
|
color: var(--ink-soft);
|
|
}
|
|
|
|
/* The gate note under gated actions */
|
|
.gate-note {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
padding: var(--space-3) 14px;
|
|
border-radius: var(--radius-sm);
|
|
background: var(--paper);
|
|
color: var(--ink-soft);
|
|
font-size: 13px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.gate-note .icon {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.gate-note__link {
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.verified {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
color: var(--good);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Helpers
|
|
========================================================================== */
|
|
|
|
.hidden,
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Hidden once scripts run: the submit buttons of forms that then submit themselves. */
|
|
.js .js-hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|