/* ==========================================================================
StrayBirds brand layer — v3 redesign (owner: foundation agent)
Source: design/project/DesignSystem.dc.html, V3Nav, V3Footer (+ MobileNav/MobileFooter).
Reference for page agents: design/notes/foundation.md
Public API (all classes are prefixed sb-; nothing here styles bare page markup except base type):
Tokens --sb-ink --sb-ink-2 --sb-paper --sb-sand --sb-line --sb-brick --sb-red --sb-flare --sb-white
--sb-muted --sb-rule --sb-focus (contextual, re-set by .sb-surface--*)
--sb-font-en --sb-font-zh, --sb-fs-* type scale, --sb-gutter --sb-max --sb-section-y
Layout .sb-wrap .sb-section .sb-surface--paper|sand|ink|brick|red .sb-grid(--2|--3|--4) .sb-stack .sb-cluster
.sb-bleed .sb-sr-only .sb-skip
Type .sb-h1 .sb-h2 .sb-h3 .sb-h1-zh .sb-h2-zh .sb-h3-zh .sb-dot .sb-label .sb-body .sb-body-zh .sb-lede
.sb-head (section header block) .sb-eyebrow + .sb-tag
Bilingual [lang|="zh"] inside body = Noto Sans SC, never italic. .sb-bi / .sb-bi--inline / .sb-copy swap
order + emphasis when .
Slant .sb-slab(--ink|--red|--paper)(--xl|--l|--m|--s|--sub) .sb-slabs (stack) .sb-chip(--ink|--brick|--red|--sand)
.sb-tag .sb-btn(--red|--ink|--paper|--sand)(--sm|--full|--auto) .sb-toggle[aria-pressed]
.sb-caption (slant tag on photos) .sb-sticker .sb-spec .sb-step .sb-filmstrip .sb-postcard
.sb-ticket (WeChat) .sb-swatch .sb-ticker (static band; motion layer animates its track)
Chrome .sb-nav … (design/partials/nav.html) .sb-footer … (design/partials/footer.html) .sb-lang
JS hooks brand.js: [data-sb-nav] [data-sb-menu-toggle] [data-sb-lang="en|zh"]; sets html[data-lang], html.sb-menu-open
========================================================================== */
/* Self-hosted Archivo (SIL OFL); Chinese uses the device’s native font. */
@font-face {
font-family: 'Archivo';
font-style: italic;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/archivo-italic-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 100 900;
font-stretch: 100%;
font-display: swap;
src: url(/assets/fonts/archivo-normal-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
/* Core colour (DesignSystem · COLOR) */
--sb-paper: #F3F5F7; /* 纸 page ground */
--sb-sand: #E5E9EF; /* 深纸 paper 2: alternate sections, chips */
--sb-ink: #10141C; /* 墨 text · FOLD pillar */
--sb-ink-2: #4B5668; /* 淡墨 Chinese secondary text (6.3:1 on paper, 5.7:1 on sand) */
--sb-line: #CAD1DC; /* 线 hairlines */
--sb-brick: #263856; /* 砖红 LIVE pillar (white text 5.1:1) */
--sb-red: #2454E6; /* 朱砂 CTA · TRAVEL pillar (white text 4.6:1). NOT for small text on paper (4.1:1) */
--sb-flare: #6D91FF; /* 亮朱 headline periods / large display only */
--sb-white: #FFFFFF;
--sb-ink-muted: #A9B7CA; /* secondary text on ink (8.1:1) */
--sb-ink-soft: #DAE2EE; /* body text on ink */
--sb-ink-line: #2D3747; /* hairline on ink */
--sb-shadow: 0 10px 24px rgba(30, 32, 29, .14);
/* Frame colours (swatches only) */
--sb-bike-black: #1F2220;
--sb-bike-white: #ECEBE4;
--sb-bike-blue: #A9D2CB;
--sb-bike-green: #8FAE8A;
--sb-bike-red: #B8353E;
--sb-bike-earth: linear-gradient(135deg, #D8C9A3 50%, #7F9A78 50%);
/* Contextual (re-set by .sb-surface--*) */
--sb-fg: var(--sb-ink);
--sb-bg: var(--sb-paper);
--sb-muted: var(--sb-ink-2);
--sb-rule: var(--sb-line);
--sb-focus: var(--sb-ink);
--sb-dot: var(--sb-flare);
/* Type */
--sb-font-en: "Archivo", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
--sb-font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
/* 390 → 1440 fluid scale (mobile value at 390px, desktop cap from the type board) */
--sb-fs-hero: clamp(3.25rem, 1.4rem + 8vw, 8rem); /* hero slab 54 → 128 */
--sb-fs-h1: clamp(2.875rem, 1.2rem + 7.3vw, 8rem); /* H1 46 → 128 */
--sb-fs-h2: clamp(2.125rem, .875rem + 5.14vw, 5.5rem); /* H2 34 → 88 */
--sb-fs-h3: clamp(1.25rem, 1.1rem + .4vw, 1.5rem); /* H3 20 → 24 */
--sb-fs-h1-zh: clamp(1.5rem, .95rem + 1.9vw, 2.75rem); /* CN H1 24 → 44 */
--sb-fs-h2-zh: clamp(1.1875rem, .95rem + 1.05vw, 1.875rem); /* CN H2 19 → 30 */
--sb-fs-h3-zh: .9375rem; /* CN H3 15 */
--sb-fs-spec: clamp(1.5rem, 1.3rem + .8vw, 2rem); /* spec value 24/26 → 32 */
--sb-fs-body: 1rem;
--sb-fs-body-zh: .875rem;
--sb-fs-label: .75rem;
/* Space & layout (DesignSystem · LAYOUT) */
--sb-gutter: 20px;
--sb-max: 1280px;
--sb-section-y: clamp(56px, 2.5rem + 3.8vw, 120px);
--sb-group: 24px;
--sb-nav-h: 64px;
--sb-cut: 14px; /* slant offset ≈ 0.27 × height (56px button → 14px) */
}
@media (min-width: 700px) { :root { --sb-gutter: 32px; } }
@media (min-width: 1024px) { :root { --sb-gutter: 48px; } }
@media (min-width: 1360px) { :root { --sb-gutter: 80px; } }
/* Bike-colour theme (app.js sets html[data-bike-theme] after an explicit colour pick / ?color= / stored choice; docs/bike-themes.md).
The v3 brand palette (ink, red, brick, flare) is fixed on purpose, so the theme only tints the paper ground and its
sand alternate with the six paper values from the original theme. Contrast is unchanged: every paper is within a
few points of the default. The theme-color meta follows --sb-paper (app.js). No attribute = default paper. */
html[data-bike-theme="black"] { --sb-paper: #f3f1ec; --sb-sand: #e9e4d7; }
html[data-bike-theme="white"] { --sb-paper: #f7f7f3; --sb-sand: #edeade; }
html[data-bike-theme="blue"] { --sb-paper: #f1f6f6; --sb-sand: #e7e9e1; }
html[data-bike-theme="green"] { --sb-paper: #f1f5ef; --sb-sand: #e7e8da; }
html[data-bike-theme="red"] { --sb-paper: #f7f2ee; --sb-sand: #ede5d9; }
html[data-bike-theme="earth"] { --sb-paper: #f5f2e9; --sb-sand: #ebe5d4; }
/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--sb-nav-h) + 16px); }
body {
margin: 0;
background: var(--sb-paper);
color: var(--sb-ink);
font-family: var(--sb-font-en);
font-size: var(--sb-fs-body);
line-height: 1.6;
overflow-x: clip;
-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
:where(h1, h2, h3, h4, p, figure, dl, dd, ol, ul) { margin: 0; }
:where(button) { font: inherit; }
/* Chinese is set in Noto Sans SC and never slanted, wherever it sits (incl. italic English contexts). */
body [lang|="zh"],
body .zh { font-family: var(--sb-font-zh); font-style: normal; }
/* script-built "English · 中文" buttons are flex containers: the text-node separator loses its spaces, so use a gap. */
.theme-reset:has(> .zh) { gap: .4em; }
body [lang="en"] { font-family: var(--sb-font-en); }
:focus-visible { outline: 3px solid var(--sb-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
.sb-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;
}
.sb-skip {
position: fixed; left: 12px; top: -80px; z-index: 100;
padding: 12px 16px; background: var(--sb-ink); color: var(--sb-paper);
font-weight: 700; text-decoration: none;
}
.sb-skip:focus { top: 10px; outline-color: var(--sb-flare); }
/* ---------- Surfaces (section colour + contextual tokens) ---------- */
.sb-surface--paper { --sb-bg: var(--sb-paper); background: var(--sb-paper); color: var(--sb-ink); }
.sb-surface--sand { --sb-bg: var(--sb-sand); background: var(--sb-sand); color: var(--sb-ink); }
.sb-surface--ink {
--sb-bg: var(--sb-ink); --sb-fg: var(--sb-paper); --sb-muted: var(--sb-ink-muted); --sb-rule: var(--sb-ink-line);
--sb-focus: var(--sb-paper); background: var(--sb-ink); color: var(--sb-paper);
}
.sb-surface--brick {
--sb-bg: var(--sb-brick); --sb-fg: var(--sb-white); --sb-muted: var(--sb-white); --sb-rule: rgba(255,255,255,.35);
--sb-focus: var(--sb-white); --sb-dot: var(--sb-paper); background: var(--sb-brick); color: var(--sb-white);
}
.sb-surface--red {
--sb-bg: var(--sb-red); --sb-fg: var(--sb-white); --sb-muted: var(--sb-white); --sb-rule: rgba(255,255,255,.4);
--sb-focus: var(--sb-ink); --sb-dot: var(--sb-ink); background: var(--sb-red); color: var(--sb-white);
}
/* ---------- Layout ---------- */
.sb-wrap {
width: 100%;
max-width: calc(var(--sb-max) + 2 * var(--sb-gutter));
margin-inline: auto;
padding-inline: var(--sb-gutter);
}
.sb-section { padding-block: var(--sb-section-y); }
.sb-bleed { margin-inline: calc(-1 * var(--sb-gutter)); } /* full-bleed child inside .sb-wrap (mobile photos) */
.sb-stack { display: flex; flex-direction: column; gap: var(--sb-stack-gap, var(--sb-group)); }
.sb-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sb-cluster-gap, 8px); }
.sb-grid { display: grid; gap: var(--sb-grid-gap, var(--sb-group)); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) {
.sb-grid--2, .sb-grid--3, .sb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.sb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-grid--split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
}
/* keep N columns even on phones (e.g. 2-up spec grid, 4-up filmstrip) */
.sb-grid--fixed-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-grid--fixed-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* ---------- Type ---------- */
.sb-display, .sb-h1, .sb-h2, .sb-h3 { font-family: var(--sb-font-en); font-style: italic; }
.sb-h1 {
font-weight: 900; font-size: var(--sb-fs-h1); line-height: .94; letter-spacing: -.015em; text-transform: uppercase;
}
.sb-h2 {
font-weight: 900; font-size: var(--sb-fs-h2); line-height: .98; letter-spacing: -.01em; text-transform: uppercase;
}
.sb-h3 { font-weight: 800; font-size: var(--sb-fs-h3); line-height: 1.2; }
.sb-h1-zh { font-family: var(--sb-font-zh); font-weight: 900; font-size: var(--sb-fs-h1-zh); line-height: 1.3; }
.sb-h2-zh { font-family: var(--sb-font-zh); font-weight: 900; font-size: var(--sb-fs-h2-zh); line-height: 1.35; }
.sb-h3-zh { font-family: var(--sb-font-zh); font-weight: 700; font-size: var(--sb-fs-h3-zh); line-height: 1.5; color: var(--sb-muted); }
.sb-dot { color: var(--sb-dot); } /* the red headline period: FOLD. */
.sb-label {
font-family: var(--sb-font-en); font-weight: 700; font-size: var(--sb-fs-label);
letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
}
.sb-label [lang|="zh"] { letter-spacing: .04em; }
.sb-body { font-size: var(--sb-fs-body); line-height: 1.6; }
.sb-body-zh { font-family: var(--sb-font-zh); font-size: var(--sb-fs-body-zh); line-height: 1.75; color: var(--sb-muted); }
.sb-lede { font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem); line-height: 1.5; font-weight: 500; }
.sb-measure { max-width: 40rem; }
/* Section header: */
.sb-head { display: flex; flex-direction: column; gap: 6px; }
.sb-head > .sb-eyebrow { margin-bottom: 10px; }
/* Eyebrow: slant number tag + tracked label ("01 · ONE MOVE · TWO STATES") */
.sb-eyebrow {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-weight: 700; font-size: var(--sb-fs-label); letter-spacing: .14em; text-transform: uppercase;
}
.sb-eyebrow [lang|="zh"] { letter-spacing: .04em; }
/* ---------- Bilingual emphasis (I10) ----------
Default (no JS, or data-lang="en"): English leads, Chinese follows smaller/muted.
: Chinese moves first and takes the lead size/colour; English becomes the small line.
Wrap each language in its own element: …….
Tune per use with --bi-lead-size, --bi-sub-size (em or rem), --bi-sub-color, --bi-gap. */
.sb-bi {
--_en-size: var(--bi-lead-size, 1em);
--_zh-size: var(--bi-sub-size, .8125em);
--_en-color: currentColor;
--_zh-color: var(--bi-sub-color, currentColor);
--_zh-weight: var(--bi-sub-weight, 500);
display: flex; flex-direction: column; gap: var(--bi-gap, 4px);
}
.sb-bi--inline { display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: .3em; row-gap: 0; }
.sb-bi > [lang="en"] { font-size: var(--_en-size); color: var(--_en-color); }
.sb-bi > [lang|="zh"] { font-size: var(--_zh-size); color: var(--_zh-color); font-weight: var(--_zh-weight); }
[data-lang="zh"] .sb-bi {
--_en-size: var(--bi-sub-size, .8125em);
--_zh-size: var(--bi-lead-size, 1em);
--_en-color: var(--bi-sub-color, currentColor);
--_zh-color: currentColor;
--_zh-weight: var(--bi-lead-weight-zh, 700);
}
[data-lang="zh"] .sb-bi > [lang|="zh"] { order: -1; }
/* Inline pairs get their "·" from CSS so it always sits between the two, whichever leads. Don't type it in the markup. */
.sb-bi--inline > [lang|="zh"]::before { content: "·\00a0"; content: "·\00a0" / ""; }
[data-lang="zh"] .sb-bi--inline > [lang|="zh"]::before { content: none; }
[data-lang="zh"] .sb-bi--inline > [lang="en"]::before { content: "·\00a0"; content: "·\00a0" / ""; }
/* Paragraph pair: */
.sb-copy { display: flex; flex-direction: column; gap: 4px; }
[data-lang="zh"] .sb-copy > [lang|="zh"] { order: -1; font-size: var(--sb-fs-body); color: inherit; }
[data-lang="zh"] .sb-copy > [lang="en"] { font-size: var(--sb-fs-body-zh); color: var(--sb-muted); }
/* Section header swap */
[data-lang="zh"] .sb-head > [lang|="zh"] { order: -1; }
[data-lang="zh"] .sb-head > .sb-eyebrow { order: -2; }
[data-lang="zh"] .sb-head > .sb-h2-zh { font-size: calc(var(--sb-fs-h2) * .62); line-height: 1.2; }
[data-lang="zh"] .sb-head > .sb-h1-zh { font-size: calc(var(--sb-fs-h1) * .6); line-height: 1.2; }
[data-lang="zh"] .sb-head > .sb-h2[lang="en"],
[data-lang="zh"] .sb-head > .sb-h1[lang="en"] { font-size: var(--sb-fs-h2-zh); line-height: 1.1; }
/* Inline Chinese inside italic English runs (buttons, chips, links): "Book a test ride · 预约试骑" */
.sb-zh-sub { font-family: var(--sb-font-zh); font-style: normal; font-weight: 500; font-size: .8125em; }
/* ---------- Slant primitives ---------- */
/* Slab: heavy headline block flush to the left edge, right side cut at 15°.
FOLD IN
A SECOND.
一秒折叠，随性出发。
--sb-slab-cut is exposed so the motion layer's wipe can end on the same shape. */
.sb-slabs { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; font-size: inherit; }
.sb-slab {
--sb-slab-fs: var(--sb-fs-h2);
--sb-slab-cut: 18px;
display: block; width: fit-content; max-width: 100%;
margin: 0;
padding: .16em calc(var(--sb-slab-cut) + .22em) .12em var(--sb-slab-pad-left, var(--sb-gutter));
background: var(--sb-slab-bg, var(--sb-ink)); color: var(--sb-slab-fg, var(--sb-white));
clip-path: polygon(0 0, 100% 0, calc(100% - var(--sb-slab-cut)) 100%, 0 100%);
font-family: var(--sb-font-en); font-style: italic; font-weight: 900; text-transform: uppercase;
font-size: var(--sb-slab-fs); line-height: .92; letter-spacing: -.01em;
overflow-wrap: anywhere;
}
.sb-slab--ink { --sb-slab-bg: var(--sb-ink); --sb-slab-fg: var(--sb-white); }
.sb-slab--red { --sb-slab-bg: var(--sb-red); --sb-slab-fg: var(--sb-white); --sb-dot: var(--sb-ink); }
.sb-slab--paper { --sb-slab-bg: var(--sb-paper); --sb-slab-fg: var(--sb-ink); }
.sb-slab--sand { --sb-slab-bg: var(--sb-sand); --sb-slab-fg: var(--sb-ink); }
.sb-slab--xl { --sb-slab-fs: var(--sb-fs-hero); }
.sb-slab--l { --sb-slab-fs: clamp(3.5rem, 1.9rem + 6.6vw, 8rem); line-height: .95; } /* 64 "FOLD." */
.sb-slab--m { --sb-slab-fs: clamp(1.875rem, 1.2rem + 2.8vw, 3.75rem); --sb-slab-cut: 16px; line-height: 1; } /* 30–38 */
.sb-slab--s { --sb-slab-fs: clamp(1.25rem, 1rem + 1vw, 1.75rem); --sb-slab-cut: 12px; line-height: 1.05; }
/* Chinese sub-banner under a slab (Noto 900, 18–20px) */
.sb-slab--sub {
--sb-slab-fs: clamp(1.125rem, .95rem + .75vw, 1.75rem); --sb-slab-cut: 12px;
font-family: var(--sb-font-zh); font-style: normal; text-transform: none; letter-spacing: 0; line-height: 1.3;
padding-block: .3em;
}
.sb-slab--inset { --sb-slab-pad-left: 20px; } /* when the slab does not start at the viewport edge */
[data-lang="zh"] .sb-slabs > [lang|="zh"] { order: -1; }
[data-lang="zh"] .sb-slabs > .sb-slab--sub[lang|="zh"] { font-size: max(1.5rem, calc(var(--sb-fs-h2) * .72)); line-height: 1.2; }
[data-lang="zh"] .sb-slabs > .sb-slab[lang="en"] { font-size: clamp(1.125rem, .95rem + .75vw, 1.75rem); line-height: 1; }
/* Chip / tag: small parallelogram labels */
.sb-chip {
--sb-chip-cut: 7px;
display: inline-flex; align-items: center; gap: 4px;
min-height: 28px; padding: 0 14px;
background: var(--sb-chip-bg, var(--sb-ink)); color: var(--sb-chip-fg, var(--sb-paper));
clip-path: polygon(var(--sb-chip-cut) 0, 100% 0, calc(100% - var(--sb-chip-cut)) 100%, 0 100%);
font-family: var(--sb-font-en); font-style: italic; font-weight: 800; font-size: .8125rem; line-height: 1.1;
text-transform: uppercase; white-space: nowrap;
}
.sb-chip [lang|="zh"] { font-size: .6875rem; font-weight: 500; text-transform: none; }
.sb-chip--ink { --sb-chip-bg: var(--sb-ink); --sb-chip-fg: var(--sb-paper); }
.sb-chip--brick { --sb-chip-bg: var(--sb-brick); --sb-chip-fg: var(--sb-white); }
.sb-chip--red { --sb-chip-bg: var(--sb-red); --sb-chip-fg: var(--sb-white); }
.sb-chip--sand { --sb-chip-bg: var(--sb-sand); --sb-chip-fg: var(--sb-ink); font-style: normal; font-weight: 500; text-transform: none; }
.sb-chip--paper { --sb-chip-bg: var(--sb-paper); --sb-chip-fg: var(--sb-ink); }
.sb-tag { /* numbered tag "01" (24px) */
display: inline-flex; align-items: center; justify-content: center;
min-height: 24px; padding: 0 12px;
background: var(--sb-tag-bg, var(--sb-ink)); color: var(--sb-tag-fg, var(--sb-paper));
clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
font-family: var(--sb-font-en); font-style: italic; font-weight: 800; font-size: .75rem; letter-spacing: 0; line-height: 1;
}
.sb-tag--red { --sb-tag-bg: var(--sb-red); --sb-tag-fg: var(--sb-white); }
.sb-surface--ink .sb-tag:not(.sb-tag--red) { --sb-tag-bg: var(--sb-paper); --sb-tag-fg: var(--sb-ink); }
/* Slant buttons. Background lives on ::before so clip-path never clips the focus ring.
Book a test ride · 预约试骑
For EN/中 emphasis swap use: …… */
.sb-btn {
--sb-btn-h: 56px;
--sb-btn-cut: 14px;
position: relative; isolation: isolate;
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; min-height: var(--sb-btn-h); padding: 8px calc(var(--sb-btn-cut) + 16px);
border: 0; background: transparent; color: var(--sb-btn-fg, var(--sb-white));
font-family: var(--sb-font-en); font-style: italic; font-weight: 800; font-size: 1rem; line-height: 1.2;
text-align: center; text-decoration: none; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.sb-btn::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--sb-btn-bg, var(--sb-red));
clip-path: polygon(var(--sb-btn-cut) 0, 100% 0, calc(100% - var(--sb-btn-cut)) 100%, 0 100%);
transition: background-color .2s ease, transform .2s ease;
}
.sb-btn [lang|="zh"], .sb-btn .sb-zh-sub { font-weight: 500; font-size: .8125rem; }
.sb-btn .sb-bi { --bi-sub-size: .8125rem; --bi-lead-size: 1rem; }
.sb-btn svg { flex: none; width: 18px; height: 18px; }
.sb-btn:hover::before { background: var(--sb-btn-bg-hover, var(--sb-btn-bg, var(--sb-red))); }
.sb-btn:active::before { transform: scale(.985); }
.sb-btn--red { --sb-btn-bg: var(--sb-red); --sb-btn-fg: var(--sb-white); --sb-btn-bg-hover: #1941C4; }
.sb-btn--ink { --sb-btn-bg: var(--sb-ink); --sb-btn-fg: var(--sb-paper); --sb-btn-bg-hover: #33362F; }
.sb-btn--paper { --sb-btn-bg: var(--sb-paper); --sb-btn-fg: var(--sb-ink); --sb-btn-bg-hover: var(--sb-white); }
.sb-btn--sand { --sb-btn-bg: var(--sb-sand); --sb-btn-fg: var(--sb-ink); --sb-btn-bg-hover: #E0D8C3; }
.sb-btn--sm { --sb-btn-h: 52px; --sb-btn-cut: 13px; font-size: .9375rem; }
@media (min-width: 700px) {
.sb-btn:not(.sb-btn--full) { display: inline-flex; width: auto; min-width: 280px; align-self: flex-start; }
}
.sb-btn--auto { display: inline-flex; width: auto; min-width: 0; }
/* Two-state toggle (Open / Folded). 48px tall, pressed = ink. */
.sb-toggles { display: grid; grid-template-columns: repeat(var(--sb-toggle-n, 2), minmax(0, 1fr)); gap: 6px; }
.sb-toggle {
position: relative; isolation: isolate;
display: flex; align-items: center; justify-content: center; gap: 6px;
min-height: 48px; padding: 6px 16px; border: 0; background: transparent; color: var(--sb-ink); cursor: pointer;
font-family: var(--sb-font-en); font-style: italic; font-weight: 800; font-size: .9375rem;
}
.sb-toggle::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sb-sand);
clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background-color .2s ease;
}
.sb-toggle [lang|="zh"] { font-size: .75rem; font-weight: 500; }
/* narrow toggles (3 across at 390px): the Chinese run drops below the English one instead of breaking inside a word */
.sb-toggle { flex-wrap: wrap; row-gap: 0; text-align: center; }
.sb-toggle > * { white-space: nowrap; }
.sb-toggle[aria-pressed="true"] { color: var(--sb-paper); }
.sb-toggle[aria-pressed="true"]::before { background: var(--sb-ink); }
/* Photo caption tag: ![]()
FRIENDS · 同行 */
.sb-figure { position: relative; margin: 0; overflow: hidden; }
.sb-figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-caption {
position: absolute; left: 0; bottom: 12px;
padding: 4px 16px 4px 10px; background: var(--sb-paper); color: var(--sb-ink);
clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
font-family: var(--sb-font-en); font-style: italic; font-weight: 800; font-size: .8125rem; line-height: 1.3;
text-transform: uppercase;
}
.sb-caption [lang|="zh"] { font-size: .6875rem; text-transform: none; }
.sb-caption--ink { background: var(--sb-ink); color: var(--sb-white); }
.sb-caption--top { top: 0; bottom: auto; }
/* Round rotated sticker ("LET'S GET LOST." · 一起去兜风). Static here; motion layer may spin it. */
.sb-sticker {
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
width: var(--sb-sticker-size, 92px); aspect-ratio: 1; border-radius: 999px;
background: var(--sb-ink); color: var(--sb-paper); transform: rotate(-12deg);
font-family: var(--sb-font-en); font-style: italic; font-weight: 900; font-size: calc(var(--sb-sticker-size, 92px) * .174);
line-height: .95; text-transform: uppercase;
}
.sb-sticker [lang|="zh"] { font-size: .625em; font-weight: 500; margin-top: 4px; text-transform: none; }
.sb-sticker--red { background: var(--sb-red); color: var(--sb-white); --sb-dot: var(--sb-ink); }
/* Spec grid: - WHEEL · 车轮
- 14 寸小轮
…
*/
.sb-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
@media (min-width: 1024px) { .sb-spec--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sb-spec > div { border-top: 2px solid currentColor; padding-top: 8px; min-width: 0; }
.sb-spec dt { font-weight: 700; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.sb-spec dt [lang|="zh"] { letter-spacing: .04em; }
.sb-spec dd { margin: 4px 0 0; font-family: var(--sb-font-zh); font-weight: 900; font-size: var(--sb-fs-spec); line-height: 1.25; }
/* Step row: 03 */
.sb-steps { list-style: none; margin: 0; padding: 0; }
.sb-step {
display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center;
padding: 12px 0; border-bottom: 1px solid var(--sb-rule);
}
.sb-step:first-child { border-top: 1px solid var(--sb-rule); }
.sb-step__num {
display: inline-flex; align-items: center; justify-content: center; height: 32px;
background: var(--sb-red); color: var(--sb-white);
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
font-style: italic; font-weight: 900; font-size: .9375rem;
}
/* Filmstrip: numbered photo cards in a row (RIDE / FOLD / PACK / AGAIN).
![]()
01RIDE
骑
*/
.sb-filmstrip {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(var(--sb-film-n, 4), minmax(0, 1fr)); gap: 4px;
}
.sb-film { display: flex; flex-direction: column; min-width: 0; }
.sb-film__img { position: relative; aspect-ratio: 94 / 128; overflow: hidden; background: var(--sb-sand); }
.sb-film__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sb-film__num {
position: absolute; left: 0; top: 0; padding: 3px 10px 3px 6px;
background: var(--sb-ink); color: var(--sb-white);
clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
font-style: italic; font-weight: 900; font-size: .75rem;
}
.sb-film__num--red { background: var(--sb-red); }
.sb-film__en { padding: 8px 4px 0; font-style: italic; font-weight: 900; font-size: .9375rem; text-transform: uppercase; }
.sb-film__zh { padding: 0 4px; font-family: var(--sb-font-zh); font-weight: 700; font-size: .8125rem; color: var(--sb-muted); }
/* Postcard (white-bordered photo, slight tilt) */
.sb-postcard {
margin: 0; background: var(--sb-white); padding: 8px 8px 10px; box-shadow: var(--sb-shadow);
transform: rotate(var(--sb-postcard-tilt, -1.5deg)); color: var(--sb-ink);
}
.sb-postcard img { display: block; width: 100%; aspect-ratio: 150 / 190; object-fit: cover; }
.sb-postcard figcaption { margin-top: 6px; font-weight: 700; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; }
.sb-postcard figcaption [lang|="zh"] { color: var(--sb-ink-2); letter-spacing: .04em; }
/* WeChat ticket (the only dashed line in the system). Keep app.js data-* hooks on the inner elements. */
.sb-ticket { background: var(--sb-paper); color: var(--sb-ink); border: 1.5px solid var(--sb-ink); display: flex; flex-direction: column; }
.sb-ticket__head { padding: 8px 12px; font-weight: 700; font-size: .6875rem; letter-spacing: .12em; border-bottom: 1.5px solid var(--sb-ink); display: flex; justify-content: space-between; gap: 8px; }
.sb-ticket__qr { display: block; width: min(100%, 200px); height: auto; aspect-ratio: 1; margin: 14px auto 10px; }
.sb-ticket__tear { border-top: 2px dashed var(--sb-ink); margin: 0 8px; }
.sb-ticket__foot { padding: 10px 12px; font-style: italic; font-weight: 900; font-size: .875rem; line-height: 1.35; }
/* Colour swatch (round, 44px target) */
.sb-swatches { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; max-width: 440px; }
.sb-swatch {
width: 44px; height: 44px; flex: none; border-radius: 999px; padding: 0; cursor: pointer;
border: 1.5px solid var(--sb-ink); background: var(--sb-swatch, var(--sb-bike-black));
/* Gradient swatches (earth) have a transparent background-color; app.js wash() reads it via getComputedStyle,
so keep a solid colour underneath. */
background-color: var(--sb-swatch-solid, var(--sb-bike-black));
}
.sb-swatch[aria-pressed="true"] { border-color: transparent; box-shadow: 0 0 0 3px var(--sb-white), 0 0 0 5px var(--sb-red); }
.sb-swatch--black { --sb-swatch: var(--sb-bike-black); --sb-swatch-solid: var(--sb-bike-black); }
.sb-swatch--white { --sb-swatch: var(--sb-bike-white); --sb-swatch-solid: var(--sb-bike-white); }
.sb-swatch--blue { --sb-swatch: var(--sb-bike-blue); --sb-swatch-solid: var(--sb-bike-blue); }
.sb-swatch--green { --sb-swatch: var(--sb-bike-green); --sb-swatch-solid: var(--sb-bike-green); }
.sb-swatch--red { --sb-swatch: var(--sb-bike-red); --sb-swatch-solid: var(--sb-bike-red); }
.sb-swatch--earth { --sb-swatch: var(--sb-bike-earth); --sb-swatch-solid: #D8C9A3; }
/* Ticker band (static; motion layer animates .sb-ticker__track). Duplicate content must be aria-hidden. */
.sb-ticker {
overflow: hidden; white-space: nowrap; padding: 10px 0;
background: var(--sb-ticker-bg, var(--sb-ink)); color: var(--sb-ticker-fg, var(--sb-paper));
}
.sb-ticker--red { --sb-ticker-bg: var(--sb-red); --sb-ticker-fg: var(--sb-white); }
.sb-ticker__track {
display: inline-flex; gap: 28px; width: max-content; padding-left: var(--sb-gutter);
font-style: italic; font-weight: 900; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); line-height: 1.2;
}
.sb-ticker__sep { color: var(--sb-flare); }
/* ==========================================================================
Language switch (EN / 中)
========================================================================== */
.sb-lang { display: flex; height: 32px; border: 1.5px solid currentColor; flex: none; }
.sb-lang button {
position: relative; width: 30px; height: 100%; border: 0; padding: 0; cursor: pointer;
background: transparent; color: inherit;
font-family: var(--sb-font-en), var(--sb-font-zh); font-style: normal; font-weight: 800; font-size: .75rem;
}
.sb-lang button::after { content: ""; position: absolute; inset: -7px 0; } /* 44px tall hit area */
.sb-lang button[lang|="zh"] { font-family: var(--sb-font-zh); }
.sb-lang button[aria-pressed="true"] { background: var(--sb-ink); color: var(--sb-paper); }
.sb-lang button:focus-visible { outline-offset: 2px; z-index: 1; }
html:not(.js) .sb-lang { display: none; } /* needs JS; no-JS reading is the bilingual EN-led default */
/* ==========================================================================
Nav (markup: design/partials/nav.html)
========================================================================== */
.sb-nav {
position: sticky; top: 0; z-index: 50;
background: var(--sb-paper); color: var(--sb-ink);
border-bottom: 1px solid var(--sb-line);
}
.sb-nav__bar {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
height: var(--sb-nav-h);
max-width: calc(var(--sb-max) + 2 * var(--sb-gutter)); margin-inline: auto;
padding: 0 max(12px, calc(var(--sb-gutter) - 8px)) 0 var(--sb-gutter);
}
.sb-nav__brand { display: flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; flex: none; }
.sb-logo { display: block; width: 128px; height: 11px; }
.sb-nav__brand-zh {
font-family: var(--sb-font-zh); font-weight: 900; font-size: .875rem; line-height: 1;
padding-left: 8px; border-left: 1.5px solid currentColor;
}
.sb-nav__tools { display: flex; align-items: center; gap: 6px; }
.sb-nav__toggle {
position: relative; isolation: isolate;
display: inline-flex; align-items: center; gap: 4px;
height: 44px; padding: 0 12px; border: 0; cursor: pointer; background: transparent; color: var(--sb-paper);
font-family: var(--sb-font-en); font-style: italic; font-weight: 800; font-size: .875rem; letter-spacing: .02em;
white-space: nowrap;
}
.sb-nav__toggle::before {
content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sb-ink);
clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.sb-nav__toggle .sb-bi { --bi-lead-size: .875rem; --bi-sub-size: .75rem; flex-wrap: nowrap; }
.sb-nav__toggle-close { display: none; }
.sb-nav__toggle[aria-expanded="true"] .sb-nav__toggle-open { display: none; }
.sb-nav__toggle[aria-expanded="true"] .sb-nav__toggle-close { display: inline-flex; }
html:not(.js) .sb-nav__toggle { display: none; }
/* Menu panel — mobile/tablet: ink sheet under the bar */
.sb-nav__panel {
background: var(--sb-ink); color: var(--sb-paper);
--sb-focus: var(--sb-paper);
padding: 8px var(--sb-gutter) 24px;
}
.js .sb-nav__panel {
display: none;
position: fixed; left: 0; right: 0; top: var(--sb-nav-top, var(--sb-nav-h)); bottom: 0;
overflow-y: auto; overscroll-behavior: contain;
}
.js .sb-nav[data-open] .sb-nav__panel { display: block; }
.sb-nav__list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--sb-max); }
.sb-nav__link {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--sb-ink-line);
color: var(--sb-paper); text-decoration: none;
}
.sb-nav__en {
font-family: var(--sb-font-en); font-style: italic; font-weight: 900; font-size: 1.75rem; line-height: 1;
text-transform: uppercase;
}
.sb-nav__zh { font-family: var(--sb-font-zh); font-weight: 700; font-size: .875rem; color: var(--sb-ink-muted); }
.sb-nav__link[aria-current="page"] .sb-nav__en { color: var(--sb-flare); } /* 28px/900 = large text, 4.4:1 */
.sb-nav__link[aria-current="page"] .sb-nav__zh { color: var(--sb-paper); }
.sb-nav__link:hover .sb-nav__en { color: var(--sb-flare); }
.sb-nav__cta { margin-top: 20px; }
.sb-nav__cta.sb-btn { width: 100%; display: flex; max-width: var(--sb-max); margin-inline: auto; }
[data-lang="zh"] .sb-nav__link { flex-direction: row-reverse; justify-content: space-between; }
[data-lang="zh"] .sb-nav__zh { font-size: 1.5rem; font-weight: 900; color: var(--sb-paper); }
[data-lang="zh"] .sb-nav__en { font-size: .9375rem; font-weight: 800; color: var(--sb-ink-muted); }
[data-lang="zh"] .sb-nav__link[aria-current="page"] .sb-nav__zh { color: var(--sb-flare); }
html.sb-menu-open { overflow: hidden; }
/* Narrow phones (<375px): smaller wordmark, menu button shows only the leading language */
@media (max-width: 374px) {
.sb-logo { width: 100px; height: 9px; }
.sb-nav__bar { padding-left: 16px; padding-right: 10px; }
.sb-nav__toggle { padding: 0 11px; }
html:not([data-lang="zh"]) .sb-nav__toggle [lang|="zh"],
[data-lang="zh"] .sb-nav__toggle [lang="en"] { display: none; }
}
/* No JS (phones/tablets): the menu is simply shown under the bar, in flow — nothing is hidden without JS. */
@media (max-width: 1099px) {
html:not(.js) .sb-nav { position: static; }
html:not(.js) .sb-nav__bar { flex-wrap: wrap; height: auto; min-height: var(--sb-nav-h); row-gap: 0; padding-bottom: 12px; }
html:not(.js) .sb-nav__brand { min-height: var(--sb-nav-h); }
html:not(.js) .sb-nav__panel { flex: 1 0 100%; padding: 4px 16px 20px; }
/* two columns + smaller type so the in-flow menu does not push the page's first heading below the fold */
html:not(.js) .sb-nav__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
html:not(.js) .sb-nav__link { min-height: 48px; padding: 8px 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
html:not(.js) .sb-nav__en { font-size: 1.125rem; }
html:not(.js) .sb-nav__cta { margin-top: 12px; }
}
/* Desktop: links inline in the bar, no menu button */
@media (min-width: 1100px) {
.sb-nav__bar { padding-right: var(--sb-gutter); gap: 24px; }
.sb-logo { width: 150px; height: 13px; }
.sb-nav__toggle { display: none; }
.sb-nav__panel, .js .sb-nav__panel {
display: flex; align-items: center; gap: 20px; order: 1;
position: static; overflow: visible; padding: 0; background: none; color: inherit; --sb-focus: var(--sb-ink);
margin-left: auto;
}
.sb-nav__tools { order: 2; }
.sb-nav__list { display: flex; align-items: center; gap: 4px; max-width: none; }
.sb-nav__link {
flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
min-height: 44px; padding: 4px 10px; border: 0; color: var(--sb-ink);
}
.sb-nav__en { font-size: .9375rem; font-weight: 800; }
.sb-nav__zh { font-size: .6875rem; font-weight: 500; color: var(--sb-ink-2); }
.sb-nav__link[aria-current="page"] .sb-nav__en,
.sb-nav__link:hover .sb-nav__en { color: var(--sb-ink); text-decoration: underline 3px var(--sb-flare); text-underline-offset: 5px; }
.sb-nav__link[aria-current="page"] .sb-nav__zh { color: var(--sb-ink-2); }
[data-lang="zh"] .sb-nav__link { flex-direction: column-reverse; align-items: flex-start; }
[data-lang="zh"] .sb-nav__zh { font-size: .9375rem; color: var(--sb-ink); }
[data-lang="zh"] .sb-nav__en { font-size: .6875rem; font-weight: 700; color: var(--sb-ink-2); }
[data-lang="zh"] .sb-nav__link[aria-current="page"] .sb-nav__zh { color: var(--sb-ink); text-decoration: underline 3px var(--sb-flare); text-underline-offset: 5px; }
.sb-nav__cta { margin-top: 0; }
.sb-nav__cta.sb-btn { --sb-btn-h: 44px; --sb-btn-cut: 11px; width: auto; min-width: 0; font-size: .875rem; padding-inline: 26px; margin: 0; }
html.sb-menu-open { overflow: visible; }
}
/* ==========================================================================
Footer (markup: design/partials/footer.html)
========================================================================== */
.sb-footer {
--sb-focus: var(--sb-paper); --sb-muted: var(--sb-ink-muted); --sb-rule: var(--sb-ink-line);
background: var(--sb-ink); color: var(--sb-paper);
padding-bottom: 28px;
}
.sb-footer .sb-ticker { margin-bottom: 20px; }
.sb-footer__main { display: grid; gap: 32px; }
.sb-footer__words {
font-family: var(--sb-font-en); font-style: italic; font-weight: 900; text-transform: uppercase;
font-size: clamp(3.25rem, 2rem + 5vw, 6.5rem); line-height: .92; letter-spacing: -.01em;
}
.sb-footer__words-zh { margin-top: 12px; font-family: var(--sb-font-zh); font-weight: 900; font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem); }
[data-lang="zh"] .sb-footer__lead { display: flex; flex-direction: column; }
[data-lang="zh"] .sb-footer__words-zh { order: -1; margin: 0 0 12px; font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); line-height: 1.15; }
[data-lang="zh"] .sb-footer__words { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); }
.sb-footer__cta { margin-top: 28px; }
.sb-footer__cols {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
padding-top: 20px; border-top: 1px solid var(--sb-ink-line);
}
.sb-footer__col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-footer__col-title { margin-bottom: 6px; font-weight: 700; font-size: .6875rem; letter-spacing: .14em; color: var(--sb-ink-muted); text-transform: uppercase; }
.sb-footer__col-title [lang|="zh"] { letter-spacing: .04em; }
.sb-footer__col ul { list-style: none; margin: 0; padding: 0; }
.sb-footer__link {
display: flex; align-items: center; flex-wrap: wrap; column-gap: 6px; min-height: 44px;
color: var(--sb-paper); text-decoration: none; font-size: .9375rem; font-weight: 600;
}
.sb-footer__link [lang|="zh"] { font-weight: 400; font-size: .75rem; color: var(--sb-ink-muted); }
.sb-footer__link:hover [lang="en"], .sb-footer__link[aria-current="page"] [lang="en"] { text-decoration: underline 2px var(--sb-flare); text-underline-offset: 4px; }
[data-lang="zh"] .sb-footer__link [lang|="zh"] { order: -1; font-size: .9375rem; font-weight: 700; color: var(--sb-paper); }
[data-lang="zh"] .sb-footer__link [lang="en"] { font-size: .75rem; font-weight: 400; color: var(--sb-ink-muted); }
.sb-footer__base { display: flex; flex-direction: column; gap: 10px; margin-top: 40px; }
.sb-footer__logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--sb-paper); align-self: flex-start; }
.sb-footer__logo .sb-logo { width: 150px; height: 13px; }
.sb-footer__meta { font-size: .75rem; line-height: 1.7; color: var(--sb-ink-muted); }
.sb-footer__meta a { color: var(--sb-paper); text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 32px; }
@media (min-width: 1024px) {
.sb-footer__main { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: end; padding-top: 40px; }
.sb-footer__cta.sb-btn { width: auto; }
.sb-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-footer__base { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--sb-ink-line); padding-top: 20px; }
}
/* ---------- Reduced motion: the brand layer itself only has hover transitions ---------- */
@media (prefers-reduced-motion: reduce) {
.sb-btn::before, .sb-toggle::before { transition: none; }
.sb-btn:active::before { transform: none; }
}
/* Shared editorial polish: quieter controls, generous touch targets. */
.sb-btn { font-style: normal; font-weight: 600; }
.sb-btn::before, .sb-nav__toggle::before { clip-path: none; border-radius: 999px; }
.sb-nav__toggle { font-style: normal; font-weight: 600; }
.sb-nav__en { font-style: normal; }
.sb-lang { height: 44px; border-radius: 999px; }
.sb-lang button:first-child { border-radius: 999px 0 0 999px; }
.sb-lang button:last-child { border-radius: 0 999px 999px 0; }
.sb-lang button { min-height: 44px; }
.sb-slab { font-style: normal; font-weight: 600; letter-spacing: -.04em; --sb-slab-cut: 0px; }
.sb-slab--sub { letter-spacing: 0; }
.sb-nav { border-bottom-color: transparent; }
html:not(.js) .sb-nav { position: relative; }
html:not(.js) .st-hero__slabs { top: 88px; bottom: auto; }
/* The same inset photo frame carries the opening into the secondary pages. */
:is(.pp-hero, .pg-hero, .st-hero, .jn-hero) { margin: 10px; border-radius: 18px; }
:is(.pp-hero, .pg-hero, .st-hero, .jn-hero) .sb-slab { border-radius: 0 10px 10px 0; }
@media (min-width: 700px) {
:is(.pp-hero, .pg-hero, .st-hero, .jn-hero) { margin: 16px; border-radius: 24px; }
}