/*
* One stylesheet, cached forever.
*
* Colours follow docs/DESIGN-SYSTEM.md with one deliberate change: brand-500 is
* the logo blue #003EC9, not the inherited #0052FF. White on #003EC9 measures
* 8.29:1 against 5.75:1 - the CTA button clears AAA instead of scraping AA.
*
* The site ships in two appearances. **Light is the default for every visitor**
* (operator decision 2026-08-07, issue #1342) - a system dark preference does
* NOT flip the first paint, because `prefers-color-scheme` is deliberately not
* consulted anywhere in this file. Dark stays opt-in through the switch at the
* top right of the header and persists in localStorage under `scs-theme`; the
* inline script in puts `dark` on before the first paint, so a
* returning visitor never sees a flash of the wrong appearance.
*
* How the two are built - never hardcode a colour per page:
*
* - `--ink` is a bare `r g b` triple: the colour everything is drawn IN. It
* flips per theme, so `rgb(var(--ink) / 0.62)` is body copy in both. Only
* alphas at or above 0.55 survive that flip with AA contrast on white -
* anything quieter goes through the `--txt-*` ramp, which is tuned per
* theme, because black loses contrast on white far faster than white loses
* it on near-black.
* - lines, washes and hovers have their own tokens (`--line*`, `--wash*`,
* `--hover*`) for the same reason.
* - three surfaces stay dark in BOTH appearances and are therefore written in
* literal white: the screenshot bezel (`.glass`, `.chrome`, `.card-shot` -
* every capture is a dark-mode capture, so the frame around it reads as a
* device bezel rather than a page surface), the blue closing band
* (`.ctaband`) and the blue primary button (`.btn-a`, `.tier-badge`).
* - the per-chapter accents arrive inline as `--acc`/`--acc2`, tuned for a
* dark page. `--acc-1`/`--acc-2` are the readable derivations - use those,
* never `--acc2` directly, unless the element sits on a capture.
*
* Composition rules the layout depends on:
* - headlines are set at display size and clamp with the viewport
* - one claim per section, separated by air rather than by rules
* - captures run wide; only the prose keeps a measure
*/
@font-face {
font-family: "Outfit";
src: url("/fonts/outfit.woff2") format("woff2");
font-weight: 400 800;
font-style: normal;
font-display: swap;
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: "DM Sans";
src: url("/fonts/dm-sans.woff2") format("woff2");
font-weight: 400 700;
font-style: normal;
font-display: swap;
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 {
/* ── Fixed: the brand palette and the geometry ───────────────────────── */
--brand-300: #6b8fe0;
--brand-400: #3868d5;
--brand-500: #003ec9;
--brand-600: #0032a1;
--r: 12px;
--r-lg: 18px;
--r-xl: 24px;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--measure: 1320px;
/* The capture bezel. Dark in both appearances - see the file header. */
--shot-bg: #0d0d11;
--shot-bg-2: #0a0a0d;
/* ── Light: the default appearance ───────────────────────────────────── */
color-scheme: light;
--ink: 24 24 27;
--surface: #ffffff;
--lift: #f7f8fa;
/* The text ramp. Light needs far more ink than dark needs light. */
--txt: rgb(var(--ink) / 1);
--txt-body: rgb(var(--ink) / 0.7);
--txt-sub: rgb(var(--ink) / 0.64);
--txt-mute: rgb(var(--ink) / 0.6);
--txt-soft: rgb(var(--ink) / 0.58);
--txt-cap: rgb(var(--ink) / 0.56);
--txt-ghost: rgb(var(--ink) / 0.42);
--line: rgb(var(--ink) / 0.1);
--line-2: rgb(var(--ink) / 0.13);
--line-3: rgb(var(--ink) / 0.18);
--wash: rgb(var(--ink) / 0.035);
--wash-faint: rgb(var(--ink) / 0.022);
--hover: rgb(var(--ink) / 0.06);
--hover-2: rgb(var(--ink) / 0.09);
/* The blue that carries a link or an accent on this surface.
Named --brand-accent and not --accent since #1981: apps/appointment-portal
declares --accent too, as the per-merchant colour a booking widget gets
handed at runtime (App.tsx sets it as an inline style). Two unrelated
things under one name - #0052ff there, this site's --brand-500 (#003ec9)
here. The marketing site keeps its own palette on purpose, so the way out
is an own NAME, not a shared value. Guarded by
scripts/completeness/belange/design-tokens.ts. */
--brand-accent: var(--brand-500);
--green: #0d7a32;
--green-soft: rgba(13, 122, 50, 0.1);
--green-line: rgba(13, 122, 50, 0.28);
--green-on-solid: #30d158;
/* Apple's system orange is unreadable on white (2.1:1); this is 5.9:1. */
--amber: #9a5600;
--amber-soft: rgba(154, 86, 0, 0.1);
--red: #c0271b;
--glow: linear-gradient(135deg, #003ec9, #8e2fd0);
/* The "opposite" button: dark on a light page, light on a dark one. */
--solid: #18181b;
--on-solid: #ffffff;
/* Chrome that floats over the page. */
--chrome-bg: rgba(255, 255, 255, 0.78);
--chrome-bg-solid: rgba(255, 255, 255, 0.94);
--subnav-bg: rgba(250, 250, 252, 0.88);
--panel-bg: rgba(255, 255, 255, 0.98);
--shadow-glass: rgba(24, 24, 27, 0.34);
--shadow-panel: rgba(24, 24, 27, 0.26);
--tier-glow: rgba(0, 62, 201, 0.3);
--card-hover-line: rgba(0, 62, 201, 0.38);
--num-bg: rgba(0, 62, 201, 0.1);
--sel-bg: rgba(0, 62, 201, 0.1);
--versus-bg: linear-gradient(135deg, rgba(0, 62, 201, 0.09), rgba(142, 47, 208, 0.05));
--versus-line: rgba(0, 62, 201, 0.26);
--hero-glow: 0.16;
}
/*
* Dark. Reached only by choice - the switch writes `scs-theme=dark` and the
* inline head script puts the class on . Nothing here is behind a media
* query, so a system preference cannot reach it.
*/
html.dark {
color-scheme: dark;
--ink: 255 255 255;
--surface: #09090b;
--lift: #0d0d11;
/*
* Text alphas: the same ladder apps/docs uses for its `html.dark` (#1551,
* MR !2321) - kept identical here so the two dark surfaces read as one
* system rather than two independently-tuned ones. Applied in THIS file's
* own rank order (body > sub > mute > soft > cap > ghost, per the values
* above), not by matching token names 1:1 across apps - the two files order
* their steps differently and copying by name would flatten or invert the
* hierarchy here instead of preserving it.
*
* White on #09090b is the higher-contrast direction, so an equal alpha
* lands strictly above its light-mode counterpart.
*
* These sit above CLAUDE.md's HIG ladder (/60 secondary, /35 tertiary, /18
* quaternary) on purpose, for the same reason #1551 gave: that ladder is
* calibrated for glanceable product chrome, and this is a marketing page's
* long-form reading surface. Its old /35 step (`--txt-cap`) carried the
* legal-page dt labels and the menu group headings at 3.13:1 - below WCAG
* AA - and `--txt-ghost` (chapter numerals, pain-point index) sat at
* 2.39:1. Where the two rules disagree, AA wins - the operator set
* "mindestens WCAG AA" as the acceptance criterion for #1551, and this MR
* applies the same bar here. __tests__/dark-contrast.test.ts holds the
* floor.
*/
--txt-body: rgb(var(--ink) / 0.72);
--txt-sub: rgb(var(--ink) / 0.68);
--txt-mute: rgb(var(--ink) / 0.64);
--txt-soft: rgb(var(--ink) / 0.6);
--txt-cap: rgb(var(--ink) / 0.56);
--txt-ghost: rgb(var(--ink) / 0.46);
--line: rgb(var(--ink) / 0.07);
--line-2: rgb(var(--ink) / 0.09);
--line-3: rgb(var(--ink) / 0.14);
--wash: rgb(var(--ink) / 0.03);
--wash-faint: rgb(var(--ink) / 0.018);
--hover: rgb(var(--ink) / 0.07);
--hover-2: rgb(var(--ink) / 0.09);
--brand-accent: var(--brand-300);
--green: #30d158;
--green-soft: rgba(48, 209, 88, 0.12);
--green-line: rgba(48, 209, 88, 0.25);
--green-on-solid: #0d7a32;
--amber: #ff9f0a;
--amber-soft: rgba(255, 159, 10, 0.14);
--red: #ff453a;
--glow: linear-gradient(135deg, #003ec9, #bf5af2);
--solid: #ffffff;
--on-solid: #09090b;
--chrome-bg: rgba(9, 9, 11, 0.72);
--chrome-bg-solid: rgba(9, 9, 11, 0.94);
--subnav-bg: rgba(11, 11, 14, 0.86);
--panel-bg: rgba(16, 16, 20, 0.97);
--shadow-glass: rgba(0, 0, 0, 0.95);
--shadow-panel: rgba(0, 0, 0, 0.95);
--tier-glow: rgba(0, 62, 201, 0.65);
--card-hover-line: rgba(107, 143, 224, 0.45);
--num-bg: rgba(0, 62, 201, 0.3);
--sel-bg: rgba(0, 62, 201, 0.24);
--versus-bg: linear-gradient(135deg, rgba(0, 62, 201, 0.22), rgba(191, 90, 242, 0.1));
--versus-line: rgba(107, 143, 224, 0.32);
--hero-glow: 0.18;
}
/*
* The per-chapter accents arrive inline on these three elements as
* `--acc`/`--acc2` and are chosen for a dark page: `--acc2` is the lighter tint
* of the pair, and a light tint on white is unreadable (#7ce89c measures 1.5:1).
* `--acc-1` is therefore the tint in dark and a darkened `--acc` in light,
* `--acc-2` the step above it. Everything that used to reach for `--acc2` uses
* `--acc-1` - except the tour highlight box, which sits ON the capture and
* stays on the dark scale.
*
* Declared here rather than on :root because a custom property resolves its own
* `var()` on the element that declares it, and `--acc` only exists further down.
*/
.bt,
.chapter,
.tour {
--acc-1: color-mix(in srgb, var(--acc) 58%, #000);
--acc-2: color-mix(in srgb, var(--acc) 80%, #000);
}
html.dark .bt,
html.dark .chapter,
html.dark .tour {
--acc-1: var(--acc2);
--acc-2: var(--acc);
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--surface);
color: var(--txt);
font:
16px/1.62 "DM Sans",
system-ui,
-apple-system,
sans-serif;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1,
h2,
h3 {
font-family: "Outfit", system-ui, sans-serif;
letter-spacing: -0.035em;
text-wrap: balance;
margin: 0;
}
a {
color: inherit;
text-decoration: none;
}
a:focus-visible,
button:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 4px;
border-radius: 8px;
}
p {
color: var(--txt-body);
margin: 0 0 12px;
max-width: 64ch;
}
/*
* Every capture today sits in a container that already sizes it (`.glass img`,
* `.card-shot img`, `.bt-shot img`). This is the floor under all of them, so a
* capture placed somewhere new cannot render at its intrinsic pixel width and
* push the document sideways before anyone notices.
*/
img,
picture,
svg {
max-width: 100%;
}
img {
height: auto;
}
.wrap {
max-width: var(--measure);
margin: 0 auto;
padding: 0 28px;
}
.cap {
color: var(--txt-cap);
font-size: 13.5px;
margin-top: 14px;
}
.cap.warn {
color: var(--red);
}
.skip {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
background: var(--solid);
color: var(--on-solid);
padding: 12px 20px;
border-radius: 0 0 var(--r) 0;
font-weight: 600;
}
.skip:focus {
left: 0;
}
/* ── Header ───────────────────────────────────────────────────────────── */
header {
position: sticky;
top: 0;
z-index: 50;
background: var(--chrome-bg);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--line);
}
.bar {
display: flex;
align-items: center;
gap: 10px;
min-height: 88px;
flex-wrap: wrap;
}
.logo {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
/*
* The lockup, matched to sellerlogic.com: the mark reads at 44 px tall, not 20.
*
* Two files, one request. `docs/brand/logo/` ships the Commerce Services lockup
* as a light-background original (black wordmark) - that one goes on the light
* page unchanged, and `brand.ts` derives the white-wordmark version for the dark
* one. It is set as a background rather than as two ` and native `` elements - the sign-in
* form's submit (the only `` on the whole site) is a
* ``, every other instance is an ``. Without `appearance: none`,
* an unstyled `` keeps the UA default `border: 2px outset` underneath
* whatever background colour these rules apply on top (verified via computed
* style: `border: 2px outset rgb(0, 0, 0)` before this reset, `0px none`
* after). An outset border draws a hard, unblurred bevel that does not clip
* cleanly against `border-radius: 99px`, which is what read as a broken,
* offset shadow poking out at the pill's rounded corner (issue #1626). ``
* never had this problem - anchors carry no native control chrome, so the
* reset is a no-op for them.
*/
.btn-a,
.btn-g,
.btn-w {
appearance: none;
border: none;
border-radius: 99px;
font: inherit;
font-weight: 600;
transition: 0.18s var(--ease);
display: inline-block;
cursor: pointer;
}
.btn-a {
background: var(--brand-500);
color: #fff;
padding: 14px 30px;
font-size: 15px;
}
.btn-a:hover {
background: var(--brand-600);
transform: translateY(-1px);
}
.btn-g {
border: 1px solid var(--line-3);
padding: 14px 28px;
font-size: 15px;
color: rgb(var(--ink) / 0.68);
}
.btn-g:hover {
background: var(--hover);
color: var(--txt);
}
/*
* `inline-flex` with a floor rather than more padding: the label stays where it
* is and the box grows around it, so the header pill and the one in the closing
* band both clear 44px without the copy moving.
*/
.btn-w {
background: var(--solid);
color: var(--on-solid);
padding: 9px 18px;
font-size: 13px;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
box-sizing: border-box;
}
/* Inside the blue closing band the surface is dark in both appearances. */
.ctaband .btn-w {
background: #fff;
color: #09090b;
}
.btn-w:hover {
transform: translateY(-1px);
}
/* ── Sections ─────────────────────────────────────────────────────────── */
section {
padding: clamp(96px, 11vw, 152px) 0;
}
.hero {
position: relative;
overflow: hidden;
padding: 108px 0 56px;
text-align: center;
}
.hero::before {
content: "";
position: absolute;
inset: -50% 10% auto -10%;
height: 640px;
background: var(--glow);
filter: blur(150px);
opacity: var(--hero-glow);
pointer-events: none;
}
.hero-copy {
position: relative;
}
/* The centred hero: one column, 980px, everything on the middle axis. */
.hero-solo .hero-copy {
max-width: 980px;
margin: 0 auto;
}
.hero-solo .hero-copy p {
margin-left: auto;
margin-right: auto;
}
/*
* ── The split hero: copy left, the working product right ────────────────
*
* The page that has something to show shows it immediately. The headline drops
* from display size to something that fits half the width, and the other half
* holds the product, running past the right edge of the viewport. The crop is
* the point: an element cut by the edge reads as a window onto something
* larger, and here it literally is one - the visible part is the live list and
* it answers a click without scrolling first.
*
* `clip` rather than the `hidden` the centred hero uses: the aside is wider
* than the page on purpose, and `hidden` would turn that into a scrollport the
* arrow keys could push sideways. See `.chapter` for the same reasoning.
*/
.hero-split {
text-align: left;
padding: 64px 0 32px;
overflow: clip;
}
.hero-grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
/* A tight row gap: the trust strip is the second row and must not be pushed
below the fold by the same air that separates the two columns. */
gap: 4px clamp(24px, 3.4vw, 56px);
align-items: center;
}
.hero-split h1 {
/* 72-80px against the centred hero's 100px: half the width, half the scale. */
font-size: clamp(38px, 5.4vw, 78px);
}
.hero-split .lead {
max-width: 46ch;
}
.hero-split .cta {
justify-content: flex-start;
}
/*
* The aside runs past its column and past the page edge. The width is the
* column plus the gutter the wrap keeps plus a deliberate overshoot, so the
* frame is always cut rather than merely tight - at any width, on purpose.
*/
.hero-live {
position: relative;
width: calc(100% + clamp(60px, 10vw, 160px));
min-width: 0;
}
/*
* The list gets a window, not the whole page.
*
* Thirteen rows at full height is what pushed the old block half a screen
* below the fold; fixing the window and letting the rows scroll inside it is
* both shorter and more truthful - it is exactly what the real screen does
* with a long list. Every row stays reachable, which a clipped list would not
* manage: modern browsers make a scroll container keyboard-focusable, and the
* search box above it reaches the rest either way.
*
* The height is fixed, not capped: a filter down to two rows must leave the
* frame exactly as tall as it was, or every click moves the page. `.demo-stage`
* turns `--stage-h` into that height; the empty state sits inside the same box
* and therefore fills it.
*/
.hero-live .demo-app .demo-scroll,
.hero-live .demo-app[data-view="cards"] .demo-scroll {
--stage-h: clamp(210px, 27vh, 300px);
/* Small box, sitting inside a hero the reader is still reading: a wheel that
runs off the end of thirteen rows must not carry on down the page. The
bigger stages further down do chain, or a phone would trap the swipe. */
overscroll-behavior: contain;
}
.hero-live .stage-cap {
max-width: 52ch;
text-align: left;
}
/* Full width, under both halves - three statements on one line need the room. */
.hero-split .trust {
grid-column: 1 / -1;
margin-top: 8px;
}
/*
* Two columns the list does not need in half a hero. They are the same two the
* narrow layout drops further down this file (position and access), chosen the
* same way: they carry the least per pixel, and the full record is one click
* away on every row. The alternative - letting six columns fight over 700px -
* makes the block look cramped, which is the opposite of the point.
*/
.hero-live .demo-app[data-view="list"] .demo-table th:nth-child(2),
.hero-live .demo-app[data-view="list"] .demo-table td:nth-child(2),
.hero-live .demo-app[data-view="list"] .demo-table th:nth-child(5),
.hero-live .demo-app[data-view="list"] .demo-table td:nth-child(5) {
display: none;
}
/*
* Stacked. Below the split width the copy goes back to the centre and the list
* moves under it - still cut by the right edge, because a frame that suddenly
* fits looks like a different component. `overflow: clip` on the section is
* what keeps that bleed off the document's scroll width at 390px.
*/
@media (max-width: 1000px) {
.hero-split {
text-align: center;
padding: 96px 0 44px;
}
.hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: clamp(30px, 5vw, 48px);
}
.hero-split .hero-copy {
max-width: 720px;
margin: 0 auto;
}
.hero-split .hero-copy p {
margin-left: auto;
margin-right: auto;
}
.hero-split .cta,
.hero-split .trust {
justify-content: center;
}
.hero-live {
width: calc(100% + clamp(40px, 16vw, 120px));
}
/*
* The caption is the one part of the block that is text rather than product,
* so it must not ride out past the edge with the frame. Same expression as
* the bleed above, taken back off the right - it stays inside the column the
* copy uses, whatever the viewport does.
*/
.hero-live .stage-cap {
text-align: center;
padding-right: clamp(40px, 16vw, 120px);
}
}
.eyebrow {
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--brand-accent);
font-weight: 700;
margin: 0 0 18px;
}
h1 {
font-size: clamp(44px, 7.6vw, 100px);
line-height: 0.99;
font-weight: 800;
margin: 0 0 22px;
}
h1 em {
font-style: normal;
background: var(--glow);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
h2 {
font-size: clamp(30px, 4.2vw, 52px);
line-height: 1.06;
font-weight: 700;
margin: 0 0 18px;
max-width: 20ch;
}
h2.big {
font-size: clamp(34px, 5.4vw, 68px);
max-width: 16ch;
}
h3 {
font-size: 20px;
line-height: 1.25;
font-weight: 600;
margin: 0 0 10px;
letter-spacing: -0.02em;
}
.lead {
font-size: clamp(17px, 1.5vw, 21px);
color: rgb(var(--ink) / 0.64);
max-width: 56ch;
margin: 0 0 30px;
}
.section-lead {
font-size: 18px;
max-width: 52ch;
margin-bottom: 0;
}
.cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
/*
* ── The trust strip: three checkable statements under the buttons ───────
*
* One quiet row, ruled off from the sales copy above it, so it reads as a
* statement of fact rather than a fourth selling point. Set at caption weight
* on purpose: whoever is looking for it will find it, and whoever is not is
* not slowed down by it. Every line is one somebody can verify - what is on it
* and what was rejected is argued out in `content/trust.ts`.
*/
.trust {
list-style: none;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px clamp(16px, 2.4vw, 32px);
margin: 26px 0 0;
padding: 16px 0 0;
border-top: 1px solid var(--line);
min-height: 64px;
}
.hero-solo .trust {
justify-content: center;
}
.trust-i {
display: flex;
align-items: center;
gap: 9px;
font-size: 13.5px;
line-height: 1.3;
color: var(--txt-cap);
text-align: left;
}
.trust-ic {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
flex: none;
border-radius: 8px;
border: 1px solid var(--line-2);
background: var(--wash);
color: var(--brand-accent);
}
.trust-ic svg {
width: 14px;
height: 14px;
}
/* ── The stage: a capture shown the way a product photo would be ──────── */
.stage-sec {
padding: 0 0 96px;
}
/* Media dominates: captures run wider than the text measure. */
.stage-sec .wrap,
.tour {
max-width: 1520px;
}
.stage {
text-align: center;
}
.glass {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--shot-bg);
border: 1px solid rgba(255, 255, 255, 0.09);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 60px 140px -50px rgba(0, 62, 201, 0.5),
0 40px 90px -40px var(--shadow-glass);
}
.glass::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(107, 143, 224, 0.4), transparent 42%);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.glass img {
display: block;
width: 100%;
height: auto;
}
/*
* The window chrome: three muted lights and the product name, centred. It is
* what turns a screenshot into a product photo. Purely decorative.
*/
.chrome {
position: relative;
display: flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 14px;
background: rgba(255, 255, 255, 0.035);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.chrome i {
width: 10px;
height: 10px;
border-radius: 99px;
background: rgba(255, 95, 87, 0.55);
}
.chrome i:nth-child(2) {
background: rgba(254, 188, 46, 0.55);
}
.chrome i:nth-child(3) {
background: rgba(40, 200, 64, 0.55);
}
.chrome b {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-family: "Outfit", system-ui, sans-serif;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.14em;
color: rgba(255, 255, 255, 0.3);
}
/* The image plus its highlight boxes; the chrome bar must not skew the math. */
.shot-body {
position: relative;
display: block;
}
.stage-cap {
color: var(--txt-sub);
font-size: 15px;
margin: 20px auto 0;
max-width: 52ch;
text-align: center;
}
/* ── The figure: one number doing the work of a paragraph ─────────────── */
.figure-sec {
padding: 104px 0;
text-align: center;
}
.figure {
max-width: 26ch;
margin: 0 auto;
}
.fig-value {
font-family: "Outfit", system-ui, sans-serif;
font-size: clamp(76px, 15vw, 190px);
line-height: 0.86;
font-weight: 800;
letter-spacing: -0.05em;
margin: 0;
max-width: none;
background: var(--glow);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.fig-unit {
display: block;
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 600;
letter-spacing: -0.02em;
margin-top: 14px;
-webkit-text-fill-color: var(--txt);
color: var(--txt);
}
.fig-note {
color: var(--txt-mute);
font-size: 16px;
margin: 20px auto 0;
max-width: 36ch;
}
/* ── Product strip ────────────────────────────────────────────────────── */
.strip-sec {
padding-bottom: 104px;
}
.strip {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(78vw, 420px);
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 40px max(28px, calc((100vw - var(--measure)) / 2 + 28px));
scrollbar-width: none;
}
.strip::-webkit-scrollbar {
display: none;
}
.prod-card {
scroll-snap-align: start;
background: var(--lift);
border: 1px solid var(--line);
border-radius: var(--r-xl);
overflow: hidden;
display: flex;
flex-direction: column;
transition:
border-color 0.22s var(--ease),
transform 0.22s var(--ease);
}
.prod-card:hover {
border-color: var(--card-hover-line);
transform: translateY(-4px);
}
.card-shot {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--shot-bg-2);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.card-shot img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: left top;
}
.prod-body {
padding: 26px;
display: flex;
flex-direction: column;
flex: 1;
gap: 8px;
}
.prod-body h3 {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.prod-body h3 i {
font-size: 14px;
}
.prod-body p {
flex: 1;
font-size: 15px;
}
.free {
align-self: flex-start;
font-size: 12.5px;
font-weight: 600;
color: var(--green);
background: var(--green-soft);
border: 1px solid var(--green-line);
padding: 5px 12px;
border-radius: 99px;
}
/* ── Switcher ─────────────────────────────────────────────────────────── */
.showcase {
padding-top: 0;
}
.tabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 26px;
}
.tabs button {
appearance: none;
border: 1px solid var(--line-3);
background: transparent;
color: rgb(var(--ink) / 0.6);
font: inherit;
font-size: 13.5px;
font-weight: 600;
padding: 9px 18px;
border-radius: 99px;
cursor: pointer;
transition: 0.18s var(--ease);
}
.tabs button:hover {
color: var(--txt);
background: var(--hover);
}
.tabs button[aria-selected="true"] {
background: var(--solid);
border-color: var(--solid);
color: var(--on-solid);
}
/* Panels are stacked until the script turns them into tabs. */
.panel + .panel {
margin-top: 40px;
}
.panel[hidden] {
display: none;
}
[data-switcher][data-live] .panel {
margin-top: 0;
animation: fade 0.42s var(--ease);
}
@keyframes fade {
from {
opacity: 0;
transform: scale(0.995);
}
}
/*
* ── The fixed stage ──────────────────────────────────────────────────────
*
* A switcher of captures may resize between tabs - one screenshot is taller
* than the next and nobody is surprised. A switcher of working screens may
* not: the reader is clicking inside it, and a box that grows under the
* cursor throws the rest of the page down the viewport. Every live block
* therefore marks its switcher `data-stage`, and this is what that buys.
*
* All panels share one grid cell, so the tallest of them sets the height
* once, at load, for good. The inactive ones are turned invisible instead of
* being taken out of flow - `display: none` would hand the height back to
* whichever panel is showing, which is the very thing being prevented.
*
* Gated on `[data-live]`, which the script sets: without it the panels are
* still a readable stack, one under the other, and must not be piled up.
*/
[data-switcher][data-stage][data-live] .panels {
display: grid;
}
[data-switcher][data-stage][data-live] .panels > .panel {
grid-area: 1 / 1;
min-width: 0;
/* The cross-fade replaces the entry animation: `display` no longer changes,
so a keyframe would have nothing to restart on. */
animation: none;
transition:
opacity 0.3s var(--ease),
visibility 0.3s var(--ease);
}
[data-switcher][data-stage][data-live] .panels > .panel[hidden] {
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
/*
* The window inside the frame.
*
* Whatever a live block does to its own content - filter it to nothing, open
* a record, unfold a tree, switch to cards - happens inside a box of fixed
* outer height, and the overflow scrolls. That is also what the real screen
* does with a long list, so the truthfulness of the demo goes up rather than
* down. `--stage-h` is the one number a block sets; `scrollbar-gutter` keeps
* the content from shifting sideways when the bar appears.
*/
.demo-stage {
height: var(--stage-h, 460px);
overflow-y: auto;
scrollbar-gutter: stable;
}
/* ── Features, steps, tables ──────────────────────────────────────────── */
.features {
display: grid;
gap: 40px 48px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
margin-top: 48px;
}
.feature-n {
display: block;
font-family: "Outfit", system-ui, sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
color: var(--brand-accent);
margin-bottom: 14px;
}
.feature h3 {
font-size: 22px;
}
.feature p {
font-size: 16px;
margin: 0;
}
.statement {
text-align: center;
background: linear-gradient(180deg, transparent, rgba(0, 62, 201, 0.09), transparent);
}
.statement h2 {
margin: 0 auto 20px;
}
.statement-p {
margin: 0 auto;
font-size: 18px;
max-width: 62ch;
}
.band {
background: var(--wash);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 34px;
}
.tblwrap {
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
min-width: 560px;
}
thead th {
text-align: left;
font-size: 10.5px;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--txt-cap);
font-weight: 700;
padding: 10px 14px;
border-bottom: 1px solid var(--line-3);
}
tbody th {
text-align: left;
font-weight: 600;
color: var(--txt);
}
td,
tbody th {
padding: 15px 14px;
border-bottom: 1px solid var(--line);
color: var(--txt-body);
vertical-align: top;
}
tbody tr:last-child td,
tbody tr:last-child th {
border-bottom: 0;
}
.ours {
color: var(--green);
font-weight: 600;
}
.steps {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
margin: 44px 0 0;
padding: 0;
list-style: none;
}
.step {
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 26px;
background: var(--lift);
}
.num {
width: 30px;
height: 30px;
border-radius: 99px;
background: var(--num-bg);
color: var(--brand-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 700;
margin-bottom: 14px;
}
.kb {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 40px;
align-items: center;
}
.kb a {
border: 1px solid var(--line-3);
border-radius: 8px;
padding: 9px 15px;
font-size: 13.5px;
color: var(--txt-body);
}
.kb a:hover {
background: var(--hover);
color: var(--txt);
}
.kb .cap {
margin: 0;
}
.cta-sec {
padding-bottom: 120px;
}
.ctaband {
background: linear-gradient(135deg, #0d1b3e, #003ec9);
border-radius: var(--r-xl);
padding: clamp(44px, 7vw, 88px);
text-align: center;
}
/*
* The band is deep blue in both appearances, so everything in it is written in
* literal white - the headline included. It inherits the page's text colour
* otherwise, which on a light page puts near-black on navy.
*/
.ctaband h2 {
margin: 0 auto 16px;
max-width: 18ch;
color: #fff;
}
.ctaband p {
margin: 0 auto 26px;
color: rgba(255, 255, 255, 0.8);
max-width: 52ch;
}
.ctaband .cap {
/*
* #1568: the gradient's blue end (#003ec9) is the tight constraint - 0.5
* only cleared 3.14:1 there (5.08:1 at the dark end, #0d1b3e). 0.7 clears
* WCAG AA (4.5:1) at both ends with margin; see dark-contrast.test.ts,
* ".ctaband .cap contrast (theme-independent)".
*/
color: rgba(255, 255, 255, 0.7);
margin-top: 18px;
}
/* ── FAQ: native disclosures, styled ──────────────────────────────────── */
.faq-list {
margin-top: 40px;
max-width: 820px;
}
.faq {
border-top: 1px solid var(--line-2);
}
.faq:last-child {
border-bottom: 1px solid var(--line-2);
}
.faq summary {
list-style: none;
cursor: pointer;
padding: 22px 40px 22px 0;
position: relative;
font-family: "Outfit", system-ui, sans-serif;
font-size: 17.5px;
font-weight: 600;
letter-spacing: -0.015em;
color: var(--txt);
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "";
position: absolute;
right: 8px;
top: 50%;
width: 9px;
height: 9px;
border-right: 1.5px solid var(--txt-soft);
border-bottom: 1.5px solid var(--txt-soft);
transform: translateY(-70%) rotate(45deg);
transition: transform 0.2s var(--ease);
}
.faq[open] summary::after {
transform: translateY(-30%) rotate(-135deg);
}
.faq p {
margin: 0 0 24px;
font-size: 15.5px;
max-width: 66ch;
}
/* ── Imprint ──────────────────────────────────────────────────────────── */
.legal {
margin: 0;
max-width: 64ch;
}
.legal-row {
display: grid;
grid-template-columns: minmax(0, 15rem) 1fr;
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.legal dt {
color: var(--txt-cap);
font-size: 13.5px;
}
.legal dd {
margin: 0;
color: rgb(var(--ink) / 0.85);
}
.legal dd a {
color: var(--brand-accent);
}
@media (max-width: 640px) {
.legal-row {
grid-template-columns: 1fr;
gap: 4px;
}
}
/* -- Legal documents: terms, privacy, data processing agreement --------- */
/*
* Long-form legal prose, not marketing copy. One column, held to a reading
* measure, and set a shade smaller than body copy - these pages are read in
* one sitting when they are read at all. The wording itself is taken over
* unchanged (see content/legal-*.ts), so everything that makes it legible is
* here rather than in the text.
*/
.legal-doc {
max-width: 72ch;
font-size: 15.5px;
line-height: 1.7;
color: rgb(var(--ink) / 0.85);
}
.legal-doc h2 {
font-size: 22px;
line-height: 1.3;
margin: 0 0 28px;
}
.legal-doc h3 {
font-size: 19px;
line-height: 1.35;
margin: 44px 0 12px;
}
.legal-doc h4 {
font-size: 16px;
margin: 28px 0 8px;
}
.legal-doc p {
margin: 0 0 16px;
}
.legal-doc ul,
.legal-doc ol {
margin: 0 0 16px;
padding-left: 22px;
}
.legal-doc li {
margin: 0 0 8px;
}
/* Underlined, not colour alone - the house rule holds inside legal text too. */
.legal-doc a {
color: var(--brand-accent);
text-decoration: underline;
text-underline-offset: 2px;
/* Contract text carries long targets (opt-out URLs); they wrap rather than
push the column sideways on a phone. */
overflow-wrap: anywhere;
}
.legal-version {
margin-top: 40px;
padding-top: 16px;
border-top: 1px solid var(--line);
}
/* ── Language root and footer ─────────────────────────────────────────── */
.langpick {
list-style: none;
padding: 0;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.langpick a {
border: 1px solid var(--line-3);
border-radius: var(--r);
padding: 15px 30px;
font-weight: 600;
display: inline-block;
}
.langpick a:hover {
background: var(--hover);
}
footer {
border-top: 1px solid var(--line);
padding: 48px 0;
}
.foot {
display: flex;
gap: 20px;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
}
.foot-legal {
color: rgb(var(--ink) / 0.6);
font-size: 13.5px;
margin: 0;
}
/*
* Four legal links since #1493 - imprint, terms, privacy, data processing.
* They wrap instead of overflowing: on a narrow phone they end up two per
* row, on a desktop they sit in one. The negative margin sits on the row,
* not on each link (it used to, back when there was exactly one link) -
* otherwise every neighbour would overlap its predecessor by 24px.
*/
.foot-nav {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -12px;
}
/* Padded to a 44px box - a touch target, not just a word. */
.foot-nav a {
color: rgb(var(--ink) / 0.6);
font-size: 13.5px;
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 99px;
}
.foot-nav a:hover {
color: var(--txt);
}
/* ── Product sub-navigation ───────────────────────────────────────────── */
/*
* The global header never changes. Each product carries its own row beneath it
* naming the parts of the page - including the price, which is what most people
* scroll for. It sticks under the header, so the way back to the price is one
* click from anywhere on the page.
*/
.subnav {
position: sticky;
top: 88px;
z-index: 45;
background: var(--subnav-bg);
backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid var(--line);
}
.subnav-inner {
display: flex;
align-items: center;
gap: 18px;
min-height: 52px;
flex-wrap: wrap;
}
.subnav-name {
display: flex;
align-items: baseline;
gap: 7px;
font-family: "Outfit", system-ui, sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--txt);
white-space: nowrap;
}
/* The bar is tight on a phone; the name alone carries it there. */
.subnav-name i {
font-size: 13px;
}
@media (max-width: 720px) {
.subnav-name i {
display: none;
}
}
.subnav nav {
margin-left: 0;
display: flex;
gap: 2px;
flex-wrap: wrap;
overflow-x: auto;
scrollbar-width: none;
}
.subnav nav::-webkit-scrollbar {
display: none;
}
.subnav nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 12px;
border-radius: 99px;
font-size: 13px;
font-weight: 500;
color: rgb(var(--ink) / 0.58);
white-space: nowrap;
transition: 0.18s var(--ease);
}
.subnav nav a:hover {
color: var(--txt);
background: var(--hover);
}
/* Set by the scroll spy - which part of the page you are actually in. */
.subnav nav a.here {
color: var(--txt);
background: var(--hover-2);
}
.subnav-cta {
margin-left: auto;
font-size: 13px;
font-weight: 600;
color: var(--brand-accent);
white-space: nowrap;
}
.subnav-cta:hover {
color: var(--txt);
}
/* Anchors must not land under the two sticky bars. */
[id="ueberblick"],
[id="ansehen"],
[id="vorteile"],
[id="umfang"],
[id="ablauf"],
[id="preis"] {
scroll-margin-top: 156px;
}
/*
* 860px, in step with the header: from there down the header can grow when the
* burger is open, so a bar stuck 88px below it would sit on top of the menu.
*/
@media (max-width: 860px) {
.subnav {
top: 0;
position: static;
}
.subnav-cta {
display: none;
}
}
/* ── Products menu ────────────────────────────────────────────────────── */
/*
* A `details` disclosure rather than a scripted dropdown: it opens on click and
* on Enter, it is announced correctly, and it costs no JavaScript.
*/
.menu {
position: relative;
}
.menu summary {
list-style: none;
cursor: pointer;
padding: 7px 14px;
border-radius: 99px;
font-size: 13px;
font-weight: 500;
color: var(--txt-body);
transition: 0.18s var(--ease);
user-select: none;
}
.menu summary::-webkit-details-marker {
display: none;
}
.menu summary::after {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-left: 8px;
vertical-align: 2px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition: transform 0.2s var(--ease);
}
.menu[open] summary::after {
transform: rotate(-135deg);
}
.menu summary:hover,
.menu summary.on {
background: var(--hover);
color: var(--txt);
}
.menu-panel {
position: absolute;
top: calc(100% + 12px);
/* Anchored to the right edge: two columns are wider than the trigger. */
right: -8px;
left: auto;
width: min(94vw, 720px);
background: var(--panel-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
padding: 8px;
box-shadow: 0 30px 70px -30px var(--shadow-panel);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 24px;
align-items: start;
}
/* The two families are peers, not a list - SCS left, Amazon right. */
.menu-col {
display: grid;
gap: 2px;
align-content: start;
}
.menu-col-amazon {
border-left: 1px solid var(--line-2);
padding-left: 20px;
}
.menu-panel a {
display: grid;
gap: 2px;
padding: 11px 13px;
border-radius: 10px;
color: inherit;
}
.menu-panel a strong {
display: flex;
align-items: baseline;
gap: 7px;
font-size: 14px;
font-weight: 600;
color: var(--txt);
}
/*
* The plain word beside the product name. "HR" is the name; "Personal" is what
* a visitor arrives knowing. Set quieter and lighter than the name so the name
* still reads as the name, and the gloss reads as a translation of it.
*/
.name-gloss,
.menu-panel a strong i,
.prod-body h3 i,
.subnav-name i {
font-style: normal;
font-weight: 500;
letter-spacing: 0;
color: var(--txt-soft);
}
.menu-panel a strong i {
font-size: 12px;
}
.menu-panel a span {
font-size: 12.5px;
line-height: 1.4;
color: var(--txt-mute);
}
.menu-panel a:hover {
background: var(--hover);
}
.menu-panel a[aria-current="page"] {
background: var(--sel-bg);
}
.menu-all {
font-size: 12px !important;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-accent) !important;
padding: 9px 13px !important;
border-bottom: 1px solid var(--line);
border-radius: 10px 10px 0 0 !important;
}
.menu-group {
margin: 12px 13px 6px;
font-size: 10.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
font-weight: 700;
color: var(--txt-cap);
}
.menu-group:first-child {
margin-top: 6px;
}
.menu-all {
border-bottom: 0;
border-top: 1px solid var(--line);
border-radius: 0 0 10px 10px !important;
margin-top: 8px;
grid-column: 1 / -1;
}
.login {
font-weight: 600 !important;
color: rgb(var(--ink) / 0.78) !important;
}
.menu-panel {
max-height: min(78vh, 660px);
overflow-y: auto;
}
/*
* Language switcher (#1625) - same .menu disclosure as the products menu
* above, a narrow single-column panel instead of the two-column one. The
* trigger keeps the small bordered-pill treatment the old direct link used
* to carry. Mirrors apps/docs's identical fix (#1590, MR !2357).
*/
.lang-menu {
margin-left: 8px;
}
.lang-menu summary {
border: 1px solid var(--line-3);
font-size: 11.5px;
font-weight: 600;
padding: 5px 10px;
}
.lang-panel {
position: absolute;
top: calc(100% + 8px);
right: -8px;
left: auto;
min-width: 9rem;
max-width: min(80vw, 14rem);
z-index: 60;
background: var(--panel-bg);
backdrop-filter: blur(20px);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
padding: 6px;
margin: 0;
list-style: none;
box-shadow: 0 30px 70px -30px var(--shadow-panel);
}
.lang-panel li + li {
margin-top: 2px;
}
.lang-panel a,
.lang-panel .lang-current {
display: flex;
align-items: center;
padding: 8px 11px;
border-radius: 10px;
font-size: 13px;
color: inherit;
}
.lang-panel a:hover {
background: var(--hover);
text-decoration: none;
}
.lang-panel .lang-current {
background: var(--sel-bg);
color: var(--brand-accent);
font-weight: 600;
}
/*
* Inside the burger the panel stops being a panel.
*
* `right: -8px` measures from the trigger's right edge, which on a stacked nav
* sits about 130px from the left of the screen - a 94vw-wide box anchored there
* renders almost entirely at negative X, and `body { overflow-x: hidden }` then
* silently clips it. Rather than re-anchor a floating box inside a column, the
* disclosure expands in place: the products become part of the menu list.
*
* The language switcher's own panel is exempt (`.menu:not(.lang-menu)`
* below): it is narrow enough (`min-width: 9rem`, `max-width: 14rem`) to stay
* a floating dropdown at any viewport width, same as apps/docs (#1590).
*/
@media (max-width: 860px) {
.menu:not(.lang-menu) {
position: static;
}
.lang-menu {
margin-left: 0;
}
.menu-panel {
position: static;
width: auto;
max-height: none;
overflow: visible;
padding: 4px 0 8px;
border: 0;
border-radius: 0;
background: transparent;
backdrop-filter: none;
box-shadow: none;
grid-template-columns: 1fr;
}
/*
* As a full-width list the entries need list rhythm, not floating panel
* tiles: a touch more air per row, a hairline between rows, and the
* description given room to breathe under the name instead of hugging it.
*/
.menu-panel a {
min-height: 44px;
/* Border-box came from the nav-wide rule before that rule was narrowed
* to direct children; restated here so the row height does not change. */
box-sizing: border-box;
align-content: center;
gap: 4px;
padding: 13px 10px;
border-radius: 8px;
}
.menu-col a + a {
position: relative;
}
.menu-col a + a::before {
content: "";
position: absolute;
top: 0;
left: 10px;
right: 10px;
border-top: 1px solid var(--line-2);
}
.menu-panel a strong {
font-size: 15px;
}
.menu-panel a strong i {
font-size: 12.5px;
}
.menu-panel a span {
font-size: 13px;
line-height: 1.45;
}
/* The group labels carry the sectioning, so give them shoulders. */
.menu-group {
padding: 2px 10px;
}
.menu-col-amazon {
border-left: 0;
padding-left: 0;
border-top: 1px solid var(--line-2);
padding-top: 12px;
margin-top: 10px;
}
.menu-all {
min-height: 44px;
display: flex;
align-items: center;
}
}
/* ── Tiers: freemium plus three plans ─────────────────────────────────── */
.tiers-wrap {
max-width: 1520px;
}
/*
* The billing switcher: two radios, zero script. The checked state decides
* which price line the cards below show. Without CSS both lines print, which
* still reads correctly: the monthly price with the annual offer beneath it.
*/
.bill {
display: flex;
justify-content: center;
margin-top: 40px;
}
.bill input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.bill-seg {
display: inline-flex;
gap: 4px;
padding: 4px;
border: 1px solid var(--line-3);
border-radius: 99px;
background: var(--wash);
}
.bill-seg label {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 9px 20px;
border-radius: 99px;
font-size: 14px;
font-weight: 600;
color: rgb(var(--ink) / 0.6);
cursor: pointer;
transition: 0.18s var(--ease);
}
.bill-seg label i {
font-style: normal;
font-size: 11px;
font-weight: 600;
color: var(--green);
}
#bill-m:checked ~ .bill-seg label[for="bill-m"],
#bill-y:checked ~ .bill-seg label[for="bill-y"] {
background: var(--solid);
color: var(--on-solid);
}
#bill-y:checked ~ .bill-seg label[for="bill-y"] i {
color: var(--green-on-solid);
}
#bill-m:focus-visible ~ .bill-seg label[for="bill-m"],
#bill-y:focus-visible ~ .bill-seg label[for="bill-y"] {
outline: 2px solid var(--brand-accent);
outline-offset: 3px;
}
/* Which price line shows. The switcher sits before the cards in the DOM. */
.tiers-wrap:has(#bill-m:checked) .bill-y,
.tiers-wrap:has(#bill-y:checked) .bill-m {
display: none;
}
.tiers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
gap: 16px;
margin-top: clamp(44px, 6vw, 72px);
align-items: stretch;
}
.tier {
position: relative;
display: flex;
flex-direction: column;
background: var(--lift);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 30px 28px 26px;
}
/* The recommended plan carries the site gradient as its rim and lifts a step. */
.tier-hot {
border-color: transparent;
background:
linear-gradient(var(--lift), var(--lift)) padding-box,
var(--glow) border-box;
box-shadow: 0 40px 90px -50px var(--tier-glow);
}
.tier-badge {
position: absolute;
top: -11px;
left: 26px;
background: var(--glow);
color: #fff;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 99px;
}
.tier h3 {
font-size: 16px;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: rgb(var(--ink) / 0.6);
margin-bottom: 16px;
}
.tier-price {
font-family: "Outfit", system-ui, sans-serif;
font-size: clamp(34px, 3.4vw, 46px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1;
color: var(--txt);
margin: 0;
}
.tier-unit {
margin: 8px 0 0;
font-size: 13px;
color: var(--txt-soft);
}
.tier-tag {
margin: 18px 0 0;
font-size: 14px;
color: rgb(var(--ink) / 0.72);
min-height: 42px;
}
.tier ul {
list-style: none;
margin: 18px 0 24px;
padding: 18px 0 0;
border-top: 1px solid var(--line-2);
display: grid;
gap: 10px;
flex: 1;
align-content: start;
}
.tier li {
color: var(--txt-body);
font-size: 13.5px;
line-height: 1.45;
padding-left: 20px;
position: relative;
}
.tier li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 10px;
height: 5px;
border-left: 1.5px solid var(--green);
border-bottom: 1.5px solid var(--green);
transform: rotate(-45deg);
opacity: 0.75;
}
.tier .btn-a,
.tier .btn-g {
text-align: center;
}
/* ── Price ────────────────────────────────────────────────────────────── */
.price {
margin-top: 44px;
padding: 38px 0 34px;
border-top: 1px solid var(--line-2);
border-bottom: 1px solid var(--line-2);
}
.price-amount {
font-family: "Outfit", system-ui, sans-serif;
font-size: clamp(46px, 6.4vw, 78px);
font-weight: 800;
letter-spacing: -0.04em;
line-height: 1;
color: var(--txt);
margin: 0;
max-width: none;
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.price-unit {
font-family: "DM Sans", system-ui, sans-serif;
font-size: 17px;
font-weight: 500;
letter-spacing: 0;
color: var(--txt-mute);
}
/* The free tier is a line, not a headline - it is not the reason to buy. */
.price-free {
margin: 16px 0 0;
font-size: 14.5px;
color: var(--green);
}
.extra {
margin-top: 30px;
background: var(--wash);
border: 1px solid var(--line-2);
border-radius: var(--r-lg);
padding: 28px;
}
.extra-head {
display: flex;
gap: 18px;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 12px;
}
.extra-head h3 {
margin: 0;
font-size: 19px;
}
.extra-amount {
font-family: "Outfit", system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--green);
white-space: nowrap;
}
.extra p {
margin: 0;
font-size: 15px;
}
.versus {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
margin-top: 34px;
}
.versus > div {
padding: 24px;
border-radius: var(--r-lg);
border: 1px solid var(--line);
}
.versus-them {
background: var(--wash);
}
.versus-us {
background: var(--versus-bg);
border-color: var(--versus-line);
}
.versus .cap {
margin: 0 0 10px;
display: block;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
}
.versus-us .cap {
color: var(--brand-accent);
}
.versus p {
margin: 0;
font-size: 15.5px;
}
.versus-us p {
color: rgb(var(--ink) / 0.86);
}
/* ── The problem ──────────────────────────────────────────────────────── */
.pain-sec {
background: linear-gradient(180deg, transparent, rgba(255, 69, 58, 0.035), transparent);
}
/*
* `minmax(min(100%, 320px), 1fr)` rather than `minmax(320px, 1fr)`: a bare 320px
* track floor is a hard minimum, so on a 375px phone - content width 319px once
* `.wrap` has taken its 28px each side - the track was one pixel wider than the
* column it sits in and pushed the whole document sideways. Capping the floor at
* the container's own width keeps the desktop wrapping identical and makes the
* track collapse instead of overflow.
*/
.pains {
display: grid;
gap: 22px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
margin-top: 52px;
}
.pain {
background: var(--wash);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 30px;
display: flex;
flex-direction: column;
}
.pain-n {
font-family: "Outfit", system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
color: var(--txt-ghost);
margin-bottom: 16px;
}
.pain h3 {
font-size: 21px;
line-height: 1.25;
margin-bottom: 14px;
}
.pain-cost {
font-size: 15px;
color: var(--txt-sub);
flex: 1;
margin: 0 0 22px;
}
/* The answer is set apart - it is the turn, not another sentence. */
.pain-answer {
margin: 0;
padding-top: 20px;
border-top: 1px solid var(--line-2);
font-size: 15px;
color: rgb(var(--ink) / 0.82);
}
.pain-answer .cap {
display: block;
margin: 0 0 8px;
font-size: 10.5px;
letter-spacing: 0.13em;
text-transform: uppercase;
font-weight: 700;
color: var(--brand-accent);
}
.punch {
margin: 52px auto 0;
max-width: 22ch;
text-align: center;
font-family: "Outfit", system-ui, sans-serif;
font-size: clamp(24px, 3.4vw, 40px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--txt);
text-wrap: balance;
}
[id="problem"] {
scroll-margin-top: 156px;
}
/* ── Scope: the full extent of a product, as a tile wall ──────────────── */
.scope-sec {
background: linear-gradient(180deg, transparent, var(--wash-faint), transparent);
}
/* The count is the headline: one honest number, set at figure scale. */
.bento-head {
text-align: center;
}
.bento-head .section-lead,
.bento-head .cap {
margin-left: auto;
margin-right: auto;
}
.bento-h {
max-width: none;
font-size: clamp(48px, 8vw, 120px);
line-height: 0.95;
font-weight: 800;
letter-spacing: -0.045em;
margin-bottom: 22px;
}
.bento-h .fig-value {
font-size: inherit;
display: inline;
}
/* The wall runs wider than the text measure - it is a media moment. */
.bento-wrap {
max-width: 1520px;
}
.bento {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
margin-top: clamp(44px, 6vw, 72px);
}
.bt {
grid-column: span var(--span, 2);
display: flex;
flex-direction: column;
background: var(--lift);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 28px 28px 24px;
overflow: hidden;
transition: border-color 0.22s var(--ease);
}
.bt:hover {
border-color: color-mix(in srgb, var(--acc-1) 45%, transparent);
}
.bt h3 {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--acc-1);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line-2);
}
.bt ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: 10px 28px;
flex: 1;
align-content: start;
}
.bt li {
color: rgb(var(--ink) / 0.68);
font-size: 14.5px;
line-height: 1.45;
padding-left: 22px;
position: relative;
}
.bt li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 11px;
height: 6px;
border-left: 1.5px solid var(--acc-1);
border-bottom: 1.5px solid var(--acc-1);
transform: rotate(-45deg);
opacity: 0.75;
}
/* A capture detail inside the tile - the product itself between the claims. */
.bt-shot {
margin: 20px -28px -24px;
border-top: 1px solid var(--line);
max-height: 240px;
overflow: hidden;
}
.bt-shot img {
display: block;
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(180deg, #000 62%, transparent);
mask-image: linear-gradient(180deg, #000 62%, transparent);
}
@media (max-width: 900px) {
.bento {
grid-template-columns: 1fr;
}
.bt {
grid-column: auto;
}
}
/* Tiles rise as they arrive, each on its own scroll timeline. */
@supports (animation-timeline: view()) {
.js .bento .bt.reveal {
opacity: 1;
transform: none;
transition: none;
animation: rise linear both;
animation-timeline: view();
animation-range: entry 0% cover 22%;
}
}
.scope {
display: grid;
gap: 32px 48px;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
margin-top: 52px;
}
.scope-group h3 {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brand-accent);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--line-2);
}
.scope-group ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 11px;
}
.scope-group li {
color: rgb(var(--ink) / 0.68);
font-size: 15px;
line-height: 1.45;
padding-left: 22px;
position: relative;
}
/* A tick rather than a bullet - these are things you get, not a shopping list. */
.scope-group li::before {
content: "";
position: absolute;
left: 0;
top: 0.42em;
width: 11px;
height: 6px;
border-left: 1.5px solid var(--green);
border-bottom: 1.5px solid var(--green);
transform: rotate(-45deg);
opacity: 0.75;
}
/* ── Chapters: the product told at launch-page scale ──────────────────── */
/*
* One idea per chapter, one accent per chapter, one number large enough to be
* the message. The accent arrives per chapter as `--acc`/`--acc2` inline, so
* the system is one set of rules and the colour is content.
*/
.story-sec {
padding: 0;
}
/*
* `clip`, not `hidden`.
*
* A chapter is only a clipping box - it never wants to be scrolled - and
* `hidden` makes every box it is applied to a scroll container. The ghost
* numeral used to hang 1.5vw past the right edge, so each of the seven
* chapters measured 22px wider inside than out at 1440px and could be nudged
* sideways with a trackpad or the arrow keys, on a page with nothing to scroll
* to. The numeral now stops at the edge (see `.ch-ghost`), which settles the
* measurement; `clip` settles the mechanism, so the next decoration that bleeds
* cannot reopen it. `hidden` stays as the first declaration for browsers
* without `clip`: they keep today's behaviour rather than losing the clip.
*/
.chapter {
position: relative;
padding: clamp(110px, 14vw, 208px) 0;
overflow: hidden;
overflow: clip;
}
/*
* A quiet pool of the chapter's colour behind its opening. Depth, not decor.
* A radial gradient is soft by itself - a blur filter here rasterises to the
* element's box and prints its edges as faint rectangles.
*/
.chapter::before {
content: "";
position: absolute;
top: -140px;
left: 50%;
width: min(1100px, 120vw);
height: 560px;
transform: translateX(-50%);
background: radial-gradient(closest-side, var(--acc), transparent 72%);
opacity: 0.1;
pointer-events: none;
}
.chapter + .chapter {
border-top: 1px solid var(--line);
}
/*
* The chapter's number as a ghost numeral: stroked, enormous, behind the
* statement. Editorial depth from typography alone - no asset, two rules.
*/
.ch-ghost {
position: absolute;
top: 10px;
/* Flush with the edge, not past it - the 22px it used to hang over were
invisible (the chapter clips) and cost the box a phantom scroll width. */
right: 0;
font-family: "Outfit", system-ui, sans-serif;
font-size: clamp(160px, 24vw, 380px);
line-height: 0.8;
font-weight: 800;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.5px var(--line);
pointer-events: none;
user-select: none;
}
.chapter .wrap {
position: relative;
}
/*
* Chapter heads are set centred, the way the flagship pages set them: the
* statement is the artwork, so it stands in the middle of the stage.
*/
.ch-head {
position: relative;
max-width: 920px;
margin: 0 auto;
text-align: center;
}
.ch-head .ch-body {
margin-left: auto;
margin-right: auto;
}
.ch-kicker {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-size: 12.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--acc-1);
margin: 0 0 28px;
}
.ch-index {
font-family: "Outfit", system-ui, sans-serif;
color: var(--txt-ghost);
letter-spacing: 0.08em;
}
/* Rules run out of the kicker on both sides, centring it like a chapter mark. */
.ch-kicker::before,
.ch-kicker::after {
content: "";
flex: 0 1 110px;
height: 1px;
opacity: 0.6;
}
.ch-kicker::before {
background: linear-gradient(270deg, var(--acc-2), transparent);
}
.ch-kicker::after {
background: linear-gradient(90deg, var(--acc-2), transparent);
}
.ch-h {
font-size: clamp(40px, 6.4vw, 88px);
line-height: 1;
font-weight: 800;
letter-spacing: -0.04em;
margin: 0 0 28px;
}
.ch-h em {
font-style: normal;
background: linear-gradient(100deg, var(--acc-2), var(--acc-1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.ch-body {
font-size: clamp(16.5px, 1.4vw, 19px);
line-height: 1.7;
color: rgb(var(--ink) / 0.66);
max-width: 66ch;
margin: 0;
}
/*
* Under the statement: the number as a full-width centred band, then the
* three points as columns - the specs-row composition of a launch page.
*/
.ch-grid {
display: grid;
gap: clamp(56px, 7vw, 96px);
margin-top: clamp(56px, 7vw, 88px);
}
.ch-stat {
text-align: center;
}
.ch-stat-value {
font-family: "Outfit", system-ui, sans-serif;
font-size: clamp(76px, 13vw, 200px);
line-height: 0.88;
font-weight: 800;
letter-spacing: -0.05em;
margin: 0;
max-width: none;
font-variant-numeric: tabular-nums;
background: linear-gradient(120deg, var(--acc-2), var(--acc-1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-wrap: balance;
}
.ch-stat-label {
margin: 20px auto 0;
font-size: 17px;
color: var(--txt-sub);
max-width: 40ch;
}
.ch-points {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 40px clamp(32px, 4vw, 56px);
max-width: 1100px;
margin: 0 auto;
width: 100%;
}
.ch-point {
border-top: 1px solid var(--line-2);
padding-top: 22px;
}
.ch-point h4 {
font-family: "Outfit", system-ui, sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
color: var(--txt);
margin: 0 0 8px;
}
.ch-point p {
margin: 0;
font-size: 15.5px;
color: rgb(var(--ink) / 0.58);
}
[id="details"] {
scroll-margin-top: 156px;
}
/* ── The pullback: a pinned camera move over one capture ───────────────── */
/*
* Base state (no scroll-timeline support): a normal, static stage - no dead
* scroll distance, no transform, captions hidden. The tall pinned version
* lives entirely inside the support gate further down.
*/
.zoom-sec {
padding: 0 0 96px;
}
.zoom-pin {
display: grid;
justify-items: center;
align-content: center;
row-gap: 26px;
}
/*
* Media dominates, but the full window must FIT the pinned viewport at the
* end of the pull - so the width is also capped by the viewport height via
* the capture's aspect ratio (1392:838, plus the chrome bar and the caption).
*/
.zoom-frame {
width: min(1520px, 96vw, calc((100vh - 240px) * 1.66));
}
.zoom-frame .glass {
overflow: hidden;
}
.zoom-caps {
position: relative;
min-height: 30px;
width: 100%;
text-align: center;
}
.zoom-cap {
margin: 0 auto;
font-family: "Outfit", system-ui, sans-serif;
font-size: clamp(18px, 2vw, 26px);
font-weight: 600;
letter-spacing: -0.02em;
color: rgb(var(--ink) / 0.85);
display: none;
}
.zoom-cap-3 {
display: block;
}
@supports (animation-timeline: view()) {
.zoom-sec {
/* The scroll distance that drives the pull-back. */
height: 260vh;
padding: 0;
view-timeline-name: --zoom;
}
.zoom-pin {
position: sticky;
top: 88px;
height: calc(100vh - 96px);
overflow: hidden;
}
/* Captions ride on the stage itself, above a soft scrim. */
.zoom-caps {
position: absolute;
left: 0;
right: 0;
bottom: 26px;
z-index: 2;
}
/* Here the caption lies ON the capture, which is dark in both appearances. */
.zoom-cap {
color: rgb(255 255 255 / 0.92);
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}
.zoom-frame .shot-body img {
transform-origin: var(--zx) var(--zy);
animation: pullback linear both;
animation-timeline: --zoom;
animation-range: cover 8% cover 62%;
}
@keyframes pullback {
from {
transform: scale(var(--zs));
}
to {
transform: scale(1);
}
}
/* The frame itself settles a touch late, like a camera easing to rest. */
.zoom-frame {
animation: frame-rest linear both;
animation-timeline: --zoom;
animation-range: cover 50% cover 75%;
}
@keyframes frame-rest {
from {
transform: scale(1.015);
}
to {
transform: none;
}
}
/* Captions take turns during the pull. */
.zoom-cap {
display: block;
position: absolute;
left: 0;
right: 0;
opacity: 0;
animation: cap linear both;
animation-timeline: --zoom;
}
.zoom-cap-1 {
animation-range: cover 6% cover 32%;
}
.zoom-cap-2 {
animation-range: cover 30% cover 56%;
}
.zoom-cap-3 {
animation-range: cover 56% cover 88%;
animation-name: cap-last;
}
@keyframes cap {
0% {
opacity: 0;
transform: translateY(10px);
}
22% {
opacity: 1;
transform: none;
}
78% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(-8px);
}
}
/* The last line stays. */
@keyframes cap-last {
0% {
opacity: 0;
transform: translateY(10px);
}
30% {
opacity: 1;
transform: none;
}
100% {
opacity: 1;
}
}
}
@media (prefers-reduced-motion: reduce) {
.zoom-sec {
height: auto !important;
}
.zoom-pin {
position: static;
height: auto;
}
.zoom-cap {
display: none;
}
.zoom-cap-3 {
display: block;
position: static;
opacity: 1;
}
}
/* ── Highlights: the page in five cards, right under the hero ──────────── */
.hi-sec {
padding-top: 0;
padding-bottom: 24px;
}
.hi-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(74vw, 330px);
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
padding: 34px max(28px, calc((100vw - var(--measure)) / 2 + 28px)) 10px;
scrollbar-width: none;
}
.hi-rail::-webkit-scrollbar {
display: none;
}
.hi-card {
scroll-snap-align: start;
position: relative;
display: flex;
flex-direction: column;
gap: 4px;
background: var(--lift);
border: 1px solid var(--line);
border-radius: var(--r-xl);
padding: 26px 26px 22px;
transition:
border-color 0.22s var(--ease),
transform 0.22s var(--ease);
}
.hi-card:hover {
border-color: var(--card-hover-line);
transform: translateY(-4px);
}
.hi-card h3 {
font-size: 19px;
}
.hi-card p {
margin: 0;
font-size: 14.5px;
flex: 1;
}
.hi-card .feature-n {
margin-bottom: 10px;
}
.hi-more {
margin-top: 14px;
color: var(--brand-accent);
font-size: 15px;
transition: transform 0.22s var(--ease);
}
.hi-card:hover .hi-more {
transform: translateX(4px);
}
/*
* From 1200px up the rail stops being a rail.
*
* Five cards fit the measure at that width, and a horizontal scroller with no
* visible affordance - no scrollbar, no arrows, no fade - simply parked card 05
* ("Der Preis") behind the right edge where nobody looked for it. A grid shows
* all five at once and needs no affordance at all, which is the better answer
* than drawing one. Below 1200px the snap rail stays: at that width five cards
* side by side would be five columns of two words, and a rail is then the
* honest control rather than a workaround.
*/
@media (min-width: 1200px) {
.hi-rail {
grid-auto-flow: row;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
overflow-x: visible;
scroll-snap-type: none;
}
.hi-card {
padding: 22px 20px 18px;
}
.hi-card h3 {
font-size: 17.5px;
}
.hi-card p {
font-size: 13.5px;
}
}
/* ── The guided tour: a pinned capture, read three ways ────────────────── */
.tour-sec {
padding-bottom: 40px;
}
.tour {
display: grid;
grid-template-columns: minmax(0, 58fr) minmax(280px, 42fr);
gap: 0 clamp(36px, 5vw, 72px);
align-items: start;
margin-top: 56px;
/* Hoists each step's view-timeline so the highlight boxes can hear it. */
timeline-scope: --tour-1, --tour-2, --tour-3, --tour-4;
}
.tour-stage {
position: sticky;
top: 172px;
}
/*
* A highlight box over the capture. Invisible by default and shown only by
* its step's scroll timeline - a browser without scroll-driven animations
* simply never sees one, which is correct: the steps read fine on their own.
*/
.hl {
position: absolute;
border: 1.5px solid var(--acc2);
border-radius: 10px;
box-shadow:
0 0 0 4px rgba(9, 9, 11, 0.55),
0 0 34px -4px var(--acc);
opacity: 0;
pointer-events: none;
}
.tour-steps {
display: grid;
}
.tour-step {
min-height: 58vh;
display: grid;
align-content: center;
gap: 2px;
}
.tour-step h3 {
font-size: 24px;
}
.tour-step p {
font-size: 16px;
max-width: 44ch;
}
.tour .feature-n {
color: var(--acc-1);
}
@supports (animation-timeline: view()) {
.tour-step:nth-child(1) {
view-timeline-name: --tour-1;
}
.tour-step:nth-child(2) {
view-timeline-name: --tour-2;
}
.tour-step:nth-child(3) {
view-timeline-name: --tour-3;
}
.tour-step:nth-child(4) {
view-timeline-name: --tour-4;
}
.hl {
animation: hl-show linear both;
animation-range: cover 10% cover 90%;
}
.hl-1 {
animation-timeline: --tour-1;
}
.hl-2 {
animation-timeline: --tour-2;
}
.hl-3 {
animation-timeline: --tour-3;
}
.hl-4 {
animation-timeline: --tour-4;
}
@keyframes hl-show {
0% {
opacity: 0;
transform: scale(1.03);
}
18% {
opacity: 1;
transform: none;
}
82% {
opacity: 1;
transform: none;
}
100% {
opacity: 0;
transform: scale(1.03);
}
}
}
@media (max-width: 960px) {
.tour {
grid-template-columns: 1fr;
gap: 32px;
}
.tour-stage {
position: static;
}
.tour-step {
min-height: 0;
padding: 22px 0;
}
}
/* ── The chapter's showing: capture beside its feature list ────────────── */
/*
* A chapter that owns a scope group proves it: the capture on one side, the
* group's items on the other, ticked in the chapter's accent. Chapters
* without a capture set their items in columns instead.
*/
.ch-show {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
gap: 40px clamp(36px, 5vw, 72px);
align-items: center;
width: 100%;
max-width: 1360px;
margin: 0 auto;
}
.ch-media .glass {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 40px 100px -45px color-mix(in srgb, var(--acc) 55%, transparent),
0 30px 70px -35px var(--shadow-glass);
}
.ch-media .stage-cap {
font-size: 13.5px;
margin-top: 14px;
}
.ch-items {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 12px;
align-content: center;
}
.ch-items li {
color: rgb(var(--ink) / 0.7);
font-size: 15px;
line-height: 1.5;
padding-left: 24px;
position: relative;
}
.ch-items li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 11px;
height: 6px;
border-left: 1.5px solid var(--acc-1);
border-bottom: 1.5px solid var(--acc-1);
transform: rotate(-45deg);
opacity: 0.8;
}
/* No capture: the list carries the stage alone, set in columns. */
.ch-show-bare {
display: block;
}
.ch-show-bare .ch-items {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 12px 40px;
max-width: 1100px;
margin: 0 auto;
}
/* The list cascades in, line by line, once the block arrives. */
.js .ch-show.reveal .ch-items li {
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.45s var(--ease),
transform 0.45s var(--ease);
}
.js .ch-show.reveal.in .ch-items li {
opacity: 1;
transform: none;
}
.js .ch-show.reveal.in .ch-items li:nth-child(2) {
transition-delay: 50ms;
}
.js .ch-show.reveal.in .ch-items li:nth-child(3) {
transition-delay: 100ms;
}
.js .ch-show.reveal.in .ch-items li:nth-child(4) {
transition-delay: 150ms;
}
.js .ch-show.reveal.in .ch-items li:nth-child(5) {
transition-delay: 200ms;
}
.js .ch-show.reveal.in .ch-items li:nth-child(6) {
transition-delay: 250ms;
}
.js .ch-show.reveal.in .ch-items li:nth-child(n + 7) {
transition-delay: 300ms;
}
.story-intro {
padding-top: clamp(96px, 11vw, 152px);
}
@media (max-width: 960px) {
.ch-show {
grid-template-columns: 1fr;
}
}
/* ── Scroll-driven motion ─────────────────────────────────────────────── */
/*
* The page moves with the scroll rather than on a timer. Where the browser
* supports scroll-driven animations these run entirely on the compositor with
* no script and no scroll listener; where it does not, the IntersectionObserver
* fade below still carries everything. Both are switched off wholesale under
* prefers-reduced-motion.
*/
/* Headline arrives word by word. */
.split .w {
display: inline-block;
will-change: transform, opacity;
}
.js .split .w {
opacity: 0;
transform: translateY(0.34em) rotate(1.2deg);
animation: word 0.62s var(--ease) forwards;
}
.js .split .w:nth-child(1) {
animation-delay: 0.02s;
}
.js .split .w:nth-child(2) {
animation-delay: 0.07s;
}
.js .split .w:nth-child(3) {
animation-delay: 0.12s;
}
.js .split .w:nth-child(4) {
animation-delay: 0.17s;
}
.js .split .w:nth-child(5) {
animation-delay: 0.22s;
}
.js .split .w:nth-child(6) {
animation-delay: 0.27s;
}
.js .split .w:nth-child(7) {
animation-delay: 0.32s;
}
.js .split .w:nth-child(8) {
animation-delay: 0.37s;
}
.js .split .w:nth-child(n + 9) {
animation-delay: 0.42s;
}
.split .w.em {
background: var(--glow);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@keyframes word {
to {
opacity: 1;
transform: none;
}
}
@supports (animation-timeline: view()) {
/*
* The capture settles into place as it enters - it arrives tilted back in
* perspective, then stands up, scales and lifts into position, all tied to
* the scroll. The flagship pages do this with a video scrub; a transform
* scrub reads the same and costs nothing.
*/
.stage .glass,
.lead-shot .glass {
animation: settle linear both;
animation-timeline: view();
animation-range: entry 0% cover 40%;
transform-origin: 50% 100%;
}
@keyframes settle {
from {
transform: perspective(1200px) rotateX(9deg) scale(0.9) translateY(46px);
opacity: 0.45;
}
to {
transform: perspective(1200px) rotateX(0deg) scale(1) translateY(0);
opacity: 1;
}
}
/*
* Highlight cards lift in sequence as the rail scrolls sideways - but only
* while there IS a sideways scroll. Above 1200px the rail is a five-column
* grid (see `.hi-rail`), so an inline view-timeline has no scrollport to
* hear and every card would sit frozen at the animation's `from` state.
* Dropping the override there lets the cards fall back to the ordinary
* vertical `rise` that `.js .reveal` gives everything else.
*/
@media (max-width: 1199px) {
.hi-rail .hi-card {
animation: card linear both;
animation-timeline: view(inline);
animation-range: entry 0% entry 70%;
}
}
/* The scope list cascades: each line rises a beat after the one before. */
.js .scope-group.reveal li {
opacity: 0;
transform: translateY(10px);
transition:
opacity 0.45s var(--ease),
transform 0.45s var(--ease);
}
.js .scope-group.reveal.in li {
opacity: 1;
transform: none;
}
.js .scope-group.reveal.in li:nth-child(2) {
transition-delay: 50ms;
}
.js .scope-group.reveal.in li:nth-child(3) {
transition-delay: 100ms;
}
.js .scope-group.reveal.in li:nth-child(4) {
transition-delay: 150ms;
}
.js .scope-group.reveal.in li:nth-child(5) {
transition-delay: 200ms;
}
.js .scope-group.reveal.in li:nth-child(6) {
transition-delay: 250ms;
}
.js .scope-group.reveal.in li:nth-child(n + 7) {
transition-delay: 300ms;
}
/* A sheen crosses the closing band as it passes - the page's final beat. */
.ctaband {
position: relative;
overflow: hidden;
}
.ctaband::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
transform: translateX(-100%);
animation: sheen linear both;
animation-timeline: view();
animation-range: entry 30% cover 85%;
pointer-events: none;
}
@keyframes sheen {
to {
transform: translateX(100%);
}
}
/* Sections rise as they come into view; the script class is then redundant. */
.js .reveal {
opacity: 1;
transform: none;
transition: none;
animation: rise linear both;
animation-timeline: view();
animation-range: entry 4% cover 26%;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(28px);
}
to {
opacity: 1;
transform: none;
}
}
/* The statement drifts slower than the page - depth without a parallax script. */
.statement h2 {
animation: drift linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes drift {
from {
transform: translateY(46px);
}
to {
transform: translateY(-46px);
}
}
/* Header condenses over the first stretch of scroll. */
header {
animation: condense linear both;
animation-timeline: scroll();
animation-range: 0 220px;
}
@keyframes condense {
to {
background: var(--chrome-bg-solid);
box-shadow: 0 1px 0 var(--line-2);
}
}
/* Product cards lift in sequence as the strip passes horizontally. */
.strip .prod-card {
animation: card linear both;
animation-timeline: view(inline);
animation-range: entry 0% entry 70%;
}
@keyframes card {
from {
opacity: 0.3;
transform: translateY(26px) scale(0.97);
}
to {
opacity: 1;
transform: none;
}
}
/*
* Chapters ride the scroll. The statement rises into place, its accent pool
* brightens as the chapter fills the viewport, and the big number lands with
* a slight overshoot of scale - all compositor work, no script.
*/
.js .ch-h.reveal {
opacity: 1;
transform: none;
transition: none;
animation: ch-arrive linear both;
animation-timeline: view();
animation-range: entry 0% cover 32%;
}
/* Transform and opacity only - a filter keyframe promotes the headline to a
composited layer that Chromium may back with opaque black, printing a box
over the chapter glow. */
@keyframes ch-arrive {
from {
opacity: 0;
transform: translateY(44px);
}
to {
opacity: 1;
transform: none;
}
}
.chapter::before {
animation: pool linear both;
animation-timeline: view();
animation-range: entry 0% cover 45%;
}
@keyframes pool {
from {
opacity: 0;
transform: translateX(-50%) scale(0.8);
}
to {
opacity: 0.1;
transform: translateX(-50%) scale(1);
}
}
.js .ch-stat.reveal {
opacity: 1;
transform: none;
transition: none;
}
.js .ch-stat.reveal .ch-stat-value {
animation: stat-land linear both;
animation-timeline: view();
animation-range: entry 0% entry 90%;
}
@keyframes stat-land {
from {
opacity: 0;
transform: scale(0.86) translateY(30px);
}
60% {
opacity: 1;
}
to {
opacity: 1;
transform: none;
}
}
/* Points draw their rule as they arrive: the border grows from the left. */
.js .ch-point.reveal {
opacity: 1;
transform: none;
transition: none;
border-image: linear-gradient(90deg, var(--line-2) var(--drawn, 100%), transparent 0) 1;
animation:
rise linear both,
draw linear both;
animation-timeline: view(), view();
animation-range:
entry 0% cover 24%,
entry 0% cover 40%;
}
@keyframes draw {
from {
--drawn: 0%;
}
to {
--drawn: 100%;
}
}
/*
* Reading progress under the product bar. The page already knows where you
* are (the scroll spy names the section); this names the distance.
*/
.subnav::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: linear-gradient(90deg, var(--brand-500), #bf5af2);
transform-origin: 0 50%;
transform: scaleX(0);
animation: progress linear both;
animation-timeline: scroll();
}
@keyframes progress {
to {
transform: scaleX(1);
}
}
}
/* The rule-drawing trick needs a registered property to interpolate. */
@property --drawn {
syntax: "";
inherits: false;
initial-value: 100%;
}
/* The figure counts up; the digits are in the markup either way. */
.fig-value[data-count] {
font-variant-numeric: tabular-nums;
}
/* ── Motion ───────────────────────────────────────────────────────────── */
/*
* Only applied when scripting is on (`html.js`), so a page without JavaScript
* shows everything immediately instead of a column of blank space.
*/
.js .reveal {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.7s var(--ease),
transform 0.7s var(--ease);
}
.js .reveal.in {
opacity: 1;
transform: none;
}
/* Cards in the same row arrive one after the other, not all at once. */
.js .strip .reveal.in:nth-child(2),
.js .features .reveal.in:nth-child(2),
.js .steps .reveal.in:nth-child(2) {
transition-delay: 90ms;
}
.js .strip .reveal.in:nth-child(3),
.js .features .reveal.in:nth-child(3),
.js .steps .reveal.in:nth-child(3) {
transition-delay: 180ms;
}
.js .strip .reveal.in:nth-child(4) {
transition-delay: 270ms;
}
.js .strip .reveal.in:nth-child(5) {
transition-delay: 360ms;
}
@media (prefers-reduced-motion: reduce) {
.js .reveal,
.js .reveal.in,
.js .split .w,
.stage .glass,
.lead-shot .glass,
.statement h2,
.strip .prod-card {
opacity: 1;
transform: none;
transition: none;
animation: none;
}
* {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
@media (max-width: 720px) {
section {
padding: 72px 0;
}
.hero {
padding: 72px 0 40px;
}
.figure-sec {
padding: 76px 0;
}
}
/*
* The pointer under the product strip to the Amazon family. One quiet line,
* links in the link blue - a signpost, not a second product grid.
*/
.amazon-line {
margin: 28px 0 0;
font-size: 16px;
color: rgb(var(--ink) / 0.6);
}
.amazon-line a {
color: var(--brand-accent);
text-decoration: none;
white-space: nowrap;
}
.amazon-line a:hover {
text-decoration: underline;
}
/* Four values read as a 2 x 2 field, not as three columns plus an orphan. */
.values-sec .features {
grid-template-columns: repeat(2, 1fr);
max-width: 980px;
}
@media (max-width: 700px) {
.values-sec .features {
grid-template-columns: 1fr;
}
}
/*
* Gradient text paints only inside its own box. The tight display
* line-heights (h1 0.99, .ch-h 1, .fig-value 0.86) leave descenders OUTSIDE
* that box, and with `color: transparent` the tail of a g or j simply
* vanished (the cut-off "geöffnet", 2026-07-28). The cure is bigger paint
* boxes that stay layout-neutral: vertical padding on inline spans costs no
* line height by definition; inline-blocks and blocks get the cancelling
* negative margin.
*/
h1 em,
.ch-h em {
padding: 0.22em 0.08em;
margin: 0 -0.08em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.split .w.em {
padding: 0.22em 0.08em 0.24em;
margin: -0.22em -0.08em -0.24em;
}
.fig-value,
.ch-stat-value {
padding-bottom: 0.16em;
margin-bottom: -0.16em;
}
/* Central sign-in: one field that completes the tenant address. */
.signin-form {
margin: 34px auto 0;
max-width: 560px;
text-align: left;
}
.signin-row {
display: flex;
align-items: center;
gap: 10px;
margin: 8px 0 18px;
}
.signin-row input {
flex: 1;
min-width: 0;
padding: 13px 16px;
border-radius: 12px;
border: 1px solid var(--line-3);
background: var(--wash);
color: var(--txt);
font-size: 17px;
}
.signin-row input:focus {
outline: 2px solid var(--brand-accent);
border-color: transparent;
}
.signin-suffix {
color: var(--txt-soft);
font-size: 15px;
white-space: nowrap;
}
.signin-note {
margin-top: 22px;
}
.signin-note a {
color: var(--brand-accent);
}
@media (max-width: 640px) {
.signin-suffix {
display: none;
}
}
/* ── Kontaktformular (#1599) ───────────────────────────────────────────────
*
* Eine Spalte, linksbündig, in der Breite begrenzt: ein Eingabefeld, das über
* die volle Textbreite läuft, sieht nach Formular-Generator aus und liest sich
* schlechter. Die Felder erben Farbe und Radius vom Anmeldefeld darüber
* (`.signin-row input`) - zwei verschiedene Eingabestile auf einer Seite wären
* ein Bruch ohne Grund.
*
* Zwei Dinge sind hier nicht Geschmack, sondern Bedienbarkeit:
* - der Fokusring ist ein sichtbarer, dicker Ring (`outline`), kein
* Farbwechsel des Rahmens. Wer per Tastatur bedient, muss sehen, wo er ist.
* - Fehler stehen UNTER dem Feld, nicht als Titel oder Platzhalter, und sind
* per `aria-describedby` mit ihm verbunden - ein Vorleser nennt sie beim
* Betreten des Feldes.
*/
.contact-form {
margin: 26px 0 0;
max-width: 620px;
text-align: left;
}
.contact-form .field {
margin: 0 0 18px;
}
.contact-form label {
display: block;
color: var(--txt-cap);
font-size: 13.5px;
margin: 0 0 7px;
}
.contact-form input,
.contact-form textarea {
display: block;
width: 100%;
padding: 13px 16px;
border-radius: 12px;
border: 1px solid var(--line-3);
background: var(--wash);
color: var(--txt);
font: inherit;
font-size: 17px;
}
.contact-form textarea {
resize: vertical;
min-height: 140px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 1px;
border-color: transparent;
}
.contact-form [aria-invalid="true"] {
border-color: var(--red);
}
.field-err {
display: none;
color: var(--red);
font-size: 13.5px;
margin-top: 6px;
}
.field-err:not(:empty) {
display: block;
}
/* Das Fallenfeld. Bewusst NICHT `display:none` und nicht `visibility:hidden` -
* ein Teil der Automaten überspringt genau diese beiden. Aus dem Blickfeld
* geschoben und auf null Höhe gelegt wirkt es für sie wie ein normales Feld,
* ist für einen Menschen aber nirgends zu sehen und per `tabindex="-1"` auch
* nicht anzuspringen. */
.trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-note {
margin: 0 0 18px;
padding: 13px 16px;
border-radius: 12px;
border: 1px solid var(--green-line);
background: var(--green-soft);
color: var(--green);
font-size: 15px;
}
.form-note-bad {
border-color: rgba(192, 39, 27, 0.32);
background: rgba(192, 39, 27, 0.08);
color: var(--red);
}
.form-note[hidden] {
display: none;
}
.form-privacy {
max-width: 620px;
}
.form-privacy a {
color: var(--brand-accent);
}
.contact-form button[disabled] {
opacity: 0.55;
cursor: progress;
}
/* ── The live employee list: the product itself, not a picture of it ────── */
/*
* The HR page opens with a working copy of the admin's employee list instead of
* the pinned capture (`render.ts` → `hrDemoSection`, data in
* `content/demo-hr.ts`).
*
* **It follows the page, unlike every capture on the site.** The "the bezel
* stays dark in both appearances" rule at the head of this file exists because
* the things inside those bezels are dark-mode PNGs - a light frame around a
* dark picture is a seam. This block is not a picture, it is markup, so it can
* simply be light when the page is light, and the rule does not apply to it
* (operator decision 2026-08-11).
*
* The mechanic is the one the rest of the site already uses and nothing else:
* every colour below goes through the `--ink`-derived token layer at the top of
* this file, which `html.dark` flips. There is no second theme switch, no media
* query and no `.demo-*` colour of its own. What that buys per appearance is
* exactly what docs/DESIGN-SYSTEM.md asks for:
*
* light `--txt` = surface-900, `--txt-body`/`--txt-cap` the quieter steps,
* `--brand-accent` = brand-500, hairlines `--line*`, fills `--wash*`
* dark `--txt` = white, 0.62 / 0.35 down the ramp, `--brand-accent` = brand-300
* (brand-500 on near-black is unreadable), lines white/0.07,
* washes white/0.03
*
* The three colours the ramp does not carry - the status greens, the leave
* amber - come from `--green*` and `--amber*`, which flip the same way.
*/
/*
* The framed block. It carries no placement of its own - the container it is
* dropped into decides where it sits and how wide it runs, which today is the
* hero's right half (`.hero-live`). The cap is the width beyond which the list
* stops looking like a window into an application and starts looking like a
* table on a page.
*/
.demo-frame {
max-width: 1240px;
}
/*
* The bezel. `.glass` is written for a capture and is dark in both appearances;
* the demo takes the same shape and lets the page decide the surface. In dark
* the values below resolve to what `.glass` already had, so the appearance the
* block shipped with is unchanged.
*/
.demo-glass {
background: var(--lift);
border-color: var(--line-3);
box-shadow:
0 1px 0 rgb(var(--ink) / 0.02) inset,
0 60px 140px -50px rgba(0, 62, 201, 0.22),
0 40px 90px -40px var(--shadow-glass);
}
html.dark .demo-glass {
background: var(--shot-bg);
/* Same value `--line-2` resolves to here - named instead of hand-rolled,
matching the token convention the rest of this stylesheet uses for
borders. */
border-color: var(--line-2);
box-shadow:
0 1px 0 rgb(var(--ink) / 0.06) inset,
0 60px 140px -50px rgba(0, 62, 201, 0.5),
0 40px 90px -40px var(--shadow-glass);
}
/* The sheen is a highlight on a dark device face; on a light one it is a smear. */
.demo-glass::after {
background: linear-gradient(160deg, rgb(var(--ink) / 0.06), transparent 42%);
}
html.dark .demo-glass::after {
background: linear-gradient(160deg, rgba(107, 143, 224, 0.4), transparent 42%);
}
.demo-glass .chrome {
background: var(--wash);
border-bottom-color: var(--line);
}
.demo-glass .chrome b {
color: var(--txt-ghost);
}
.vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* The "Demo" tag in the window bar - this is invented data and says so. */
.chrome-tag {
margin-left: auto;
font-family: "Outfit", system-ui, sans-serif;
font-style: normal;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--txt-soft);
border: 1px solid var(--line-3);
border-radius: 99px;
padding: 2px 8px;
}
.demo-app {
padding: 20px 20px 22px;
color: var(--txt);
font-family: "DM Sans", system-ui, sans-serif;
font-size: 14px;
line-height: 1.45;
text-align: left;
}
/*
* `hidden` has to beat the layout. Card mode sets `display: block` on the very
* elements the runtime hides, and a plain `[hidden]` from the UA stylesheet
* loses that fight - a filtered-out row would stay on screen in cards.
*/
.demo-app [hidden] {
display: none !important;
}
.demo-app :focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
border-radius: 8px;
}
/* ── Head ─────────────────────────────────────────────────────────────── */
.demo-head {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.demo-head-i {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border-radius: 11px;
/* A solid brand tile with a white glyph - the primary-button pair, unflipped. */
background: var(--brand-500);
color: #fff;
flex: none;
}
.demo-head-i svg {
width: 20px;
height: 20px;
}
.demo-title {
font-size: 21px;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--txt);
margin: 0;
max-width: none;
}
.demo-sub {
font-size: 12.5px;
color: var(--txt-body);
margin: 1px 0 0;
max-width: none;
}
/* The one line that tells the reader this thing answers a click. */
.demo-live {
margin-left: auto;
align-self: flex-start;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--brand-accent);
border: 1px solid var(--versus-line);
background: var(--sel-bg);
border-radius: 99px;
padding: 4px 11px;
white-space: nowrap;
}
/* ── The four counters. They count what is on screen, live. ───────────── */
.demo-kpis {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.demo-kpi {
border: 1px solid var(--line);
background: var(--wash);
border-radius: 12px;
padding: 10px 12px;
}
.demo-kpi-l {
display: flex;
align-items: center;
gap: 6px;
font-size: 10.5px;
color: var(--txt-body);
}
.demo-i {
display: inline-grid;
place-items: center;
flex: none;
}
.demo-i svg {
width: 14px;
height: 14px;
}
.demo-kpi-v {
font-family: "Outfit", system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
margin: 2px 0 0;
max-width: none;
font-variant-numeric: tabular-nums;
}
.demo-kpi-blue .demo-kpi-v,
.demo-kpi-blue .demo-i {
color: var(--brand-accent);
}
.demo-kpi-green .demo-kpi-v,
.demo-kpi-green .demo-i {
color: var(--green);
}
.demo-kpi-amber .demo-kpi-v,
.demo-kpi-amber .demo-i {
color: var(--amber);
}
/* ── Status chips, search, the two selects, the view toggle ───────────── */
.demo-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.demo-chip,
.demo-view,
.demo-reset {
font: inherit;
font-size: 12.5px;
color: var(--txt-body);
background: var(--wash);
border: 1px solid var(--line);
border-radius: 9px;
padding: 7px 13px;
cursor: pointer;
transition:
background 0.15s var(--ease),
color 0.15s var(--ease),
border-color 0.15s var(--ease);
}
.demo-chip:hover,
.demo-view:hover,
.demo-reset:hover {
background: var(--hover-2);
color: var(--txt);
}
.demo-chip.on {
color: var(--txt);
background: var(--sel-bg);
border-color: var(--brand-accent);
}
.demo-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
.demo-search {
position: relative;
display: flex;
align-items: center;
flex: 1 1 190px;
min-width: 0;
max-width: 260px;
}
.demo-search .demo-i {
position: absolute;
left: 10px;
color: var(--txt-cap);
pointer-events: none;
}
.demo-search input {
font: inherit;
font-size: 12.5px;
width: 100%;
min-width: 0;
color: var(--txt);
background: var(--wash);
border: 1px solid var(--line-2);
border-radius: 9px;
padding: 8px 12px 8px 32px;
}
.demo-search input::placeholder {
color: var(--txt-cap);
}
/*
* The popup is drawn by the OS. It needs no `color-scheme` of its own:
* the root declares one per appearance (light on `:root`, dark under
* `html.dark`) and it inherits down to here. Pinning it to `dark` - which this
* rule used to do - hangs a black menu off a light control.
*/
.demo-sel select {
font: inherit;
font-size: 12.5px;
color: var(--txt);
background: var(--wash);
border: 1px solid var(--line-2);
border-radius: 9px;
padding: 8px 10px;
cursor: pointer;
}
.demo-views {
display: flex;
align-items: center;
gap: 3px;
margin-left: auto;
border: 1px solid var(--line);
background: var(--wash);
border-radius: 10px;
padding: 3px;
}
.demo-view {
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
background: transparent;
padding: 5px 10px;
border-radius: 7px;
}
.demo-view.on {
color: var(--txt);
background: var(--hover-2);
}
/* ── The list ─────────────────────────────────────────────────────────── */
.demo-scroll {
overflow-x: auto;
border-top: 1px solid var(--line-2);
}
.demo-table {
width: 100%;
min-width: 0;
border-collapse: collapse;
font-size: 13px;
}
.demo-table thead th {
text-align: left;
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 700;
color: var(--txt-cap);
padding: 10px 12px;
border-bottom: 1px solid var(--line-2);
white-space: nowrap;
}
/* A sortable column is a button in the header, not a click target guessed at. */
.demo-sortb {
display: inline-flex;
align-items: center;
gap: 4px;
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-transform: inherit;
letter-spacing: inherit;
}
.demo-sortb:hover {
color: var(--txt);
}
.demo-caret {
display: inline-grid;
place-items: center;
opacity: 0;
transition:
opacity 0.15s var(--ease),
transform 0.15s var(--ease);
}
.demo-caret svg {
width: 12px;
height: 12px;
}
[aria-sort] .demo-sortb {
color: var(--brand-accent);
}
[aria-sort] .demo-caret {
opacity: 1;
}
[aria-sort="ascending"] .demo-caret {
transform: rotate(180deg);
}
.demo-row td {
padding: 9px 12px;
border-bottom: 1px solid var(--line);
color: var(--txt-body);
vertical-align: middle;
}
.demo-row:hover td {
background: var(--wash);
}
.demo-nowrap {
white-space: nowrap;
}
/* The name is the control: it opens the record, by click or by keyboard. */
.demo-name {
display: flex;
align-items: center;
gap: 9px;
font: inherit;
color: inherit;
background: none;
border: 0;
padding: 0;
cursor: pointer;
text-align: left;
width: 100%;
}
.demo-ava {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex: none;
border-radius: 9px;
background: var(--sel-bg);
color: var(--brand-accent);
font-family: "Outfit", system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
}
.demo-who {
min-width: 0;
}
.demo-who b {
display: block;
font-weight: 600;
font-size: 13.5px;
color: var(--txt);
}
.demo-name:hover .demo-who b {
text-decoration: underline;
}
.demo-who i {
display: block;
font-style: normal;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10.5px;
color: var(--txt-cap);
}
.demo-open {
margin-left: auto;
display: grid;
place-items: center;
color: var(--txt-cap);
transition: transform 0.18s var(--ease);
}
.demo-open svg {
width: 15px;
height: 15px;
}
.demo-name[aria-expanded="true"] .demo-open {
transform: rotate(180deg);
color: var(--brand-accent);
}
.demo-badge {
display: inline-block;
font-size: 10.5px;
font-weight: 600;
border-radius: 99px;
padding: 2px 8px;
white-space: nowrap;
}
.demo-badge-green,
.demo-st-active {
background: var(--green-soft);
color: var(--green);
}
.demo-badge-quiet {
background: var(--hover);
color: var(--txt-body);
}
.demo-st-on_leave {
background: var(--amber-soft);
color: var(--amber);
}
.demo-st-terminated {
background: var(--hover);
color: var(--txt-cap);
}
.demo-type {
font-size: 12px;
color: var(--txt-body);
}
/* ── The opened record ────────────────────────────────────────────────── */
.demo-detail > td {
padding: 4px 12px 16px;
border-bottom: 1px solid var(--line);
background: var(--wash-faint);
}
.demo-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
gap: 10px 18px;
margin: 8px 0 0;
}
.demo-fact dt {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--txt-cap);
}
.demo-fact dd {
margin: 2px 0 0;
font-size: 13px;
color: var(--txt);
}
.demo-detail-note {
margin: 14px 0 0;
font-size: 12px;
color: var(--txt-body);
max-width: 72ch;
}
/*
* The open record and the row it belongs to read as one thing. `:has()` is a
* progressive nicety - where it is missing the record still opens, it just
* loses the accent line.
*/
.demo-row:has(.demo-name[aria-expanded="true"]) td {
background: color-mix(in srgb, var(--brand-accent) 7%, transparent);
}
.demo-app[data-view="cards"] .demo-row:has(.demo-name[aria-expanded="true"]) {
border-color: color-mix(in srgb, var(--brand-accent) 55%, transparent);
}
.demo-detail > td {
box-shadow: inset 2px 0 0 var(--brand-accent);
}
/* ── Nothing matched ──────────────────────────────────────────────────── */
.demo-empty {
margin: 18px 0 0;
font-size: 13px;
color: var(--txt-body);
max-width: none;
text-align: center;
}
.demo-reset {
margin-left: 8px;
}
/*
* Without scripting the controls would be furniture: a filter that cannot
* filter is worse than no filter, the same reasoning that hides the appearance
* switch and the burger. `html.js` is set inline in , so this never
* flickers. What is left is the whole list, sorted newest first, plus the
* counters - the page is complete on arrival, it just does not answer a click.
*/
html:not(.js) .demo-chips,
html:not(.js) .demo-tools,
html:not(.js) .demo-live,
html:not(.js) .demo-open,
html:not(.js) .demo-caret,
html:not(.js) .demo-empty {
display: none;
}
html:not(.js) .demo-name {
pointer-events: none;
}
html:not(.js) .demo-sortb {
cursor: default;
}
/* ── Cards: the product's second view of the same rows ────────────────── */
.demo-app[data-view="cards"] .demo-scroll {
border-top: 0;
overflow: visible;
}
.demo-app[data-view="cards"] .demo-table,
.demo-app[data-view="cards"] .demo-table tbody,
.demo-app[data-view="cards"] .demo-row,
.demo-app[data-view="cards"] .demo-detail,
.demo-app[data-view="cards"] .demo-row td,
.demo-app[data-view="cards"] .demo-detail > td {
display: block;
}
.demo-app[data-view="cards"] .demo-table thead {
display: none;
}
.demo-app[data-view="cards"] .demo-table tbody {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
gap: 10px;
padding-top: 12px;
}
.demo-app[data-view="cards"] .demo-row {
border: 1px solid var(--line);
background: var(--wash);
border-radius: 14px;
padding: 12px 14px;
}
.demo-app[data-view="cards"] .demo-row td {
border: 0;
padding: 5px 0 0;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.demo-app[data-view="cards"] .demo-row:hover td {
background: none;
}
.demo-app[data-view="cards"] .demo-row td::before {
content: attr(data-label);
font-size: 10px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--txt-cap);
flex: none;
}
.demo-app[data-view="cards"] .demo-row td:first-child {
display: block;
padding: 0 0 8px;
border-bottom: 1px solid var(--line);
margin-bottom: 4px;
}
.demo-app[data-view="cards"] .demo-row td:first-child::before {
display: none;
}
.demo-app[data-view="cards"] .demo-detail {
grid-column: 1 / -1;
}
.demo-app[data-view="cards"] .demo-detail > td {
border: 1px solid var(--line);
border-radius: 14px;
padding: 12px 14px 16px;
}
/* ── Narrow: the columns that carry the least go first ────────────────── */
@media (max-width: 1000px) {
.demo-kpis {
grid-template-columns: repeat(2, 1fr);
}
.demo-app[data-view="list"] .demo-table th:nth-child(2),
.demo-app[data-view="list"] .demo-table td:nth-child(2),
.demo-app[data-view="list"] .demo-table th:nth-child(5),
.demo-app[data-view="list"] .demo-table td:nth-child(5) {
display: none;
}
}
@media (max-width: 720px) {
.demo-app {
padding: 16px 14px 18px;
}
.demo-live {
display: none;
}
.demo-views {
margin-left: 0;
}
.demo-search {
max-width: none;
}
.demo-app[data-view="list"] .demo-table th:nth-child(3),
.demo-app[data-view="list"] .demo-table td:nth-child(3),
.demo-app[data-view="list"] .demo-table th:nth-child(4),
.demo-app[data-view="list"] .demo-table td:nth-child(4) {
display: none;
}
/* Two columns in 390px: the name must still fit on one line. */
.demo-row td {
padding: 9px 6px;
}
.demo-ava {
width: 26px;
height: 26px;
border-radius: 8px;
font-size: 10px;
}
.demo-name {
gap: 7px;
}
.demo-who b {
font-size: 12.5px;
}
/* Shrink the status column to its content so the name keeps one line. */
.demo-app[data-view="list"] .demo-row td:last-child {
text-align: right;
width: 1%;
white-space: nowrap;
}
}
@media (prefers-reduced-motion: reduce) {
.demo-open,
.demo-caret,
.demo-chip,
.demo-view,
.demo-reset {
transition: none;
}
}
/*
* ── The four live HR screens ────────────────────────────────────────────────
*
* The carousel under the employee list: a month of absences, the same people
* grouped, the joining/leaving checklists and the org chart, all of them
* markup (`render.ts` → `hrShowcaseSection`).
*
* Same rule as the block above and for the same reason: not one colour here is
* written down. Everything goes through the `--ink` token layer at the top of
* this file, which `html.dark` flips, plus `--brand-accent`, `--green`, `--red` and
* `--amber` for the three things the ink ramp cannot say. The one colour that
* varies per element is `--k`, the absence type, and it is itself a token
* reference - so a type is blue on white and blue on near-black, at the two
* different blues the appearances need.
*/
.sc-wrap {
max-width: 1240px;
}
/*
* All four screens share one window height, and everything they do happens
* inside it: page the month, filter it, drag a request into another week,
* regroup the people, tick a task, unfold the whole tree. The window bar above
* stays put because it sits outside the scrolling box, which is exactly how a
* real application window behaves.
*
* Taller on a phone: at 390px the calendar and the list stack, so the same
* content needs more of the screen before the box stops being useful.
*/
.sc-sec .sc-app {
--stage-h: clamp(420px, 56vh, 600px);
}
@media (max-width: 900px) {
.sc-sec .sc-app {
--stage-h: clamp(400px, 60vh, 560px);
}
}
/*
* Captions run to one line under one tab and two under the next. Left alone
* that difference lands on the section height at every tab change - the panels
* are stacked in one cell, so the tallest caption would decide and the shorter
* ones would leave a hole. Two lines reserved, top-aligned, no hole.
*/
.sc-sec .panel > .stage-cap {
min-height: 2.9em;
}
/* The panels are frames, not captures - the caption sits under the frame. */
.sc-sec .panel > .glass {
margin-bottom: 14px;
}
.sc-pointer {
margin: 0 0 14px;
font-size: 12px;
color: var(--txt-body);
max-width: 78ch;
}
.sc-pointer a {
color: var(--brand-accent);
font-weight: 600;
white-space: nowrap;
}
.sc-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 14px;
}
/* ── Tab 1: the month ─────────────────────────────────────────────────── */
/* The three absence types. Tokens, so both appearances get a readable one. */
.cal-k-vacation {
--k: var(--brand-accent);
}
.cal-k-sick {
--k: var(--red);
}
.cal-k-remote {
--k: var(--green);
}
.cal-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.cal-nav {
display: flex;
align-items: center;
gap: 4px;
}
.cal-arrow {
display: grid;
place-items: center;
width: 32px;
height: 32px;
flex: none;
font: inherit;
color: var(--txt-body);
background: var(--wash);
border: 1px solid var(--line);
border-radius: 9px;
cursor: pointer;
}
.cal-arrow:hover:not(:disabled) {
background: var(--hover-2);
color: var(--txt);
}
.cal-arrow:disabled {
opacity: 0.35;
cursor: default;
}
.cal-arrow svg {
width: 16px;
height: 16px;
}
.cal-month {
margin: 0 4px;
min-width: 9em;
max-width: none;
text-align: center;
font-family: "Outfit", system-ui, sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--txt);
}
.cal-f {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-left: auto;
}
.cal-kinds {
margin-bottom: 0;
}
/*
* `minmax(0, …)` on both tracks, not `1fr` alone: a grid item's automatic
* minimum is its content's, and a seven-column table's min-content is wider
* than a phone. Left at `1fr` the month grew to 560px inside a 304px column
* and the bezel quietly clipped Thursday to Sunday away.
*/
.cal-body {
display: grid;
grid-template-columns: minmax(0, 1fr) 288px;
gap: 16px;
}
.cal-months,
.cal-side {
min-width: 0;
}
/*
* The month takes whatever height the column beside it needs: a four-row month
* next to a full request list would otherwise leave a hole the size of a week
* under the grid. The legend keeps its own height, the grid absorbs the rest.
*/
.cal-months {
display: flex;
flex-direction: column;
}
.cal-grid {
flex: 1 1 auto;
}
.cal-legend {
flex: none;
}
.cal-grid {
width: 100%;
/* `table` above carries a 560px floor for the comparison tables. A month
grid has seven columns and has to fit a 390px phone; same opt-out as
`.demo-table`. */
min-width: 0;
table-layout: fixed;
border-collapse: collapse;
}
.cal-grid + .cal-grid {
margin-top: 20px;
}
/* With script the month is named once, in the bar; without it, per grid. */
.cal-cap {
caption-side: top;
text-align: left;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--txt-cap);
padding-bottom: 6px;
}
html.js .cal-cap {
display: none;
}
.cal-grid th {
padding: 4px 2px 6px;
text-align: center;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--txt-cap);
}
.cal-day {
height: auto;
min-height: 66px;
vertical-align: top;
padding: 3px;
border: 1px solid var(--line);
}
.cal-pad {
border: 1px solid transparent;
}
.cal-day.is-weekend {
background: var(--wash);
}
.cal-day.is-holiday {
background: color-mix(in srgb, var(--red) 9%, transparent);
}
.cal-n {
font-size: 11px;
color: var(--txt-cap);
font-variant-numeric: tabular-nums;
}
.cal-hol {
display: block;
font-size: 9px;
line-height: 1.25;
color: var(--red);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cal-in {
/* The lane height. A spacer has to be exactly as tall as a bar, or the
lanes stop lining up the moment one day is empty. */
--chip-h: 17px;
display: block;
margin-top: 3px;
}
.cal-gap {
display: block;
height: var(--chip-h);
margin-bottom: 2px;
}
/*
* A request casts one bar per day. The first day is the control - it carries
* the name, takes focus and answers the arrow keys; the rest are decoration
* and are hidden from the accessibility tree, so a five-day request is one
* thing to a screen reader rather than five.
*/
.cal-chip {
display: block;
/* Not `auto`: the head of a span is a , and a button's automatic
width is fit-content, so it would be the width of the name on a wide
screen and zero on a narrow one where the label is set to 0px. The bleed
covers the cell's 3px padding on both sides. */
width: calc(100% + 8px);
margin: 0 -4px 2px;
padding: 2px 4px;
min-height: var(--chip-h);
font: inherit;
font-size: 10px;
font-weight: 600;
line-height: 1.3;
text-align: left;
border: 0;
color: var(--k);
background: color-mix(in srgb, var(--k) 20%, transparent);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* Horizontal drags are ours, vertical ones stay the page's. */
touch-action: pan-y;
}
.cal-chip.is-head {
cursor: grab;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
box-shadow: inset 2px 0 0 var(--k);
}
.cal-chip.is-end {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
/* Requested, not yet approved: outlined, the way the product draws it. */
.cal-chip.is-pending {
background: color-mix(in srgb, var(--k) 7%, transparent);
border: 1px dashed var(--k);
}
.cal-chip.is-pick {
background: color-mix(in srgb, var(--k) 34%, transparent);
color: var(--txt);
}
.cal.is-dragging {
user-select: none;
}
.cal.is-dragging .cal-chip.is-head {
cursor: grabbing;
}
.cal-legend {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin: 12px 0 0;
max-width: none;
font-size: 10.5px;
color: var(--txt-cap);
}
/*
* The neutral swatch colour sits on the row, not on the item: an item that
* also carries a `.cal-k-*` class must win, and two class selectors of equal
* weight are decided by source order - which would silently grey out the
* three absence types.
*/
.cal-legend {
--k: var(--txt-cap);
}
.cal-lg {
display: inline-flex;
align-items: center;
gap: 5px;
}
.cal-lg i {
width: 11px;
height: 11px;
border-radius: 3px;
border: 1px solid var(--k);
background: color-mix(in srgb, var(--k) 26%, transparent);
}
.cal-lg-pending i {
background: none;
border-style: dashed;
}
.cal-lg-we i {
border-color: var(--line-3);
background: var(--wash);
}
.cal-lg-hol {
--k: var(--red);
}
/* ── The panel beside the month: the record and the request list ──────── */
.cal-side {
display: grid;
gap: 12px;
}
.cal-detail,
.ppl-card {
border: 1px solid var(--line);
background: var(--wash);
border-radius: 12px;
padding: 12px;
}
.ppl-card {
margin-bottom: 14px;
}
.cal-idle {
margin: 0;
max-width: none;
font-size: 12px;
color: var(--txt-cap);
}
.cal-card-h {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 10px;
}
.cal-req-t {
min-width: 0;
flex: 1;
}
.cal-req-t b {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--txt);
overflow: hidden;
text-overflow: ellipsis;
}
.cal-req-t i {
display: block;
font-style: normal;
font-size: 11.5px;
color: var(--txt-body);
}
.cal-card .demo-facts {
gap: 8px 14px;
}
.cal-card-hint {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 12px 0 0;
max-width: none;
font-size: 11px;
line-height: 1.4;
color: var(--txt-cap);
}
.cal-list-h {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin: 0 0 6px;
max-width: none;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--txt-cap);
}
.cal-list-h span {
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
font-variant-numeric: tabular-nums;
}
.cal-reqs {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 3px;
max-height: 360px;
overflow-y: auto;
}
.cal-req-b {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
font: inherit;
text-align: left;
color: inherit;
background: none;
border: 1px solid transparent;
border-radius: 10px;
padding: 6px;
cursor: pointer;
}
.cal-req-b:hover {
background: var(--hover);
}
.cal-req.is-pick .cal-req-b {
background: var(--sel-bg);
border-color: var(--brand-accent);
}
.cal-req .demo-ava,
.cal-card-h .demo-ava {
width: 26px;
height: 26px;
border-radius: 8px;
font-size: 10px;
}
.cal-req .demo-ava {
background: color-mix(in srgb, var(--k) 16%, transparent);
color: var(--k);
}
.cal-none {
margin: 10px 0 0;
max-width: none;
font-size: 12px;
color: var(--txt-body);
}
/* ── Tab 2: the same people, grouped ──────────────────────────────────── */
/* A `section` on this site is a page section and carries ~120px of air. These
are groups inside one screen; the page rule would push each department a
screenful apart. */
.ppl-group {
padding: 0;
}
.ppl-group + .ppl-group {
margin-top: 16px;
}
.ppl-gh {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 8px;
margin: 0 0 8px;
padding-bottom: 5px;
border-bottom: 1px solid var(--line);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--txt-cap);
}
.ppl-gh span {
font-size: 11px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.ppl-tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
gap: 8px;
}
.ppl-tile {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
font: inherit;
text-align: left;
color: inherit;
background: var(--wash);
border: 1px solid var(--line);
border-radius: 12px;
padding: 9px 10px;
cursor: pointer;
transition:
background 0.15s var(--ease),
border-color 0.15s var(--ease);
}
.ppl-tile:hover {
background: var(--hover);
}
.ppl-tile[aria-pressed="true"] {
background: var(--sel-bg);
border-color: var(--brand-accent);
}
.ppl-t {
min-width: 0;
flex: 1;
}
.ppl-t b {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--txt);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ppl-t i {
display: block;
font-style: normal;
font-size: 11px;
color: var(--txt-body);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ── Tab 3: joining and leaving ───────────────────────────────────────── */
.life-who {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.life-now {
margin-left: auto;
}
.life-chain {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 0 0 14px;
padding: 0;
}
.life-stage {
display: flex;
align-items: center;
gap: 7px;
padding: 5px 12px;
border: 1px solid var(--line);
border-radius: 99px;
font-size: 11.5px;
}
.life-stage b {
font-weight: 600;
color: var(--txt);
}
.life-stage i {
font-style: normal;
font-size: 10.5px;
color: var(--txt-cap);
}
.life-dot {
width: 8px;
height: 8px;
flex: none;
border-radius: 99px;
background: var(--line-3);
}
.life-stage[data-state="done"] {
border-color: var(--green-line);
background: var(--green-soft);
}
.life-stage[data-state="done"] .life-dot {
background: var(--green);
}
.life-stage[data-state="done"] i {
color: var(--green);
}
.life-stage[data-state="now"] {
border-color: var(--brand-accent);
background: var(--sel-bg);
}
.life-stage[data-state="now"] .life-dot {
background: var(--brand-accent);
}
.life-stage[data-state="now"] i {
color: var(--brand-accent);
}
.life-meter {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.life-bar {
flex: 1;
height: 8px;
border-radius: 99px;
background: var(--hover-2);
overflow: hidden;
}
.life-bar span {
display: block;
height: 100%;
border-radius: 99px;
background: var(--brand-accent);
transition: width 0.3s var(--ease);
}
.life-count {
margin: 0;
max-width: none;
font-size: 11.5px;
color: var(--txt-body);
white-space: nowrap;
}
.life-tasks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 4px;
}
.life-task label {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid var(--line);
border-radius: 10px;
background: var(--wash);
font-size: 12.5px;
cursor: pointer;
}
.life-task label:hover {
background: var(--hover);
}
/* The box is drawn, the input stays a real focusable checkbox behind it. */
.life-task input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
}
.life-box {
display: grid;
place-items: center;
width: 19px;
height: 19px;
flex: none;
border: 1px solid var(--line-3);
border-radius: 6px;
color: transparent;
}
.life-box svg {
width: 13px;
height: 13px;
}
.life-task input:checked + .life-box {
background: var(--green);
border-color: var(--green);
color: var(--surface);
}
.life-task input:focus-visible + .life-box {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
}
.life-l {
flex: 1;
color: var(--txt);
}
.life-task input:checked ~ .life-l {
color: var(--txt-cap);
text-decoration: line-through;
}
/* ── Tab 4: the org chart ─────────────────────────────────────────────── */
.org-tree,
.org-kids {
list-style: none;
margin: 0;
padding: 0;
}
.org-kids {
margin-left: 16px;
padding-left: 14px;
border-left: 1px solid var(--line-2);
}
.org-li {
margin: 4px 0;
}
.org-row {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
font: inherit;
text-align: left;
color: inherit;
background: var(--wash);
border: 1px solid var(--line);
border-radius: 12px;
padding: 8px 10px;
cursor: pointer;
}
.org-sum {
list-style: none;
}
.org-sum::-webkit-details-marker {
display: none;
}
.org-row:hover {
background: var(--hover);
}
.org-row.is-pick {
background: var(--sel-bg);
border-color: var(--brand-accent);
}
.org-chev {
display: grid;
place-items: center;
flex: none;
color: var(--txt-cap);
transition: transform 0.18s var(--ease);
}
.org-chev svg {
width: 15px;
height: 15px;
}
.org-node[open] > .org-sum .org-chev {
transform: rotate(180deg);
}
.org-t {
min-width: 0;
flex: 1;
}
.org-t b {
display: block;
font-size: 13px;
font-weight: 600;
color: var(--txt);
overflow: hidden;
text-overflow: ellipsis;
}
.org-t i {
display: block;
font-style: normal;
font-size: 11px;
color: var(--txt-body);
overflow: hidden;
text-overflow: ellipsis;
}
.org-count {
flex: none;
font-size: 10.5px;
color: var(--txt-cap);
white-space: nowrap;
}
.org .demo-ava {
width: 28px;
height: 28px;
border-radius: 9px;
font-size: 10.5px;
}
/*
* ── Without scripting ────────────────────────────────────────────────────
*
* Same rule as the list above: a control that cannot work is not shown. What
* is left is everything that carries information - all three months one under
* the other with their names, every request, every tile in its department,
* both lifecycle cases with real checkboxes, and the tree fully open.
*/
html:not(.js) .cal-bar,
html:not(.js) .cal-detail,
html:not(.js) .ppl-card,
html:not(.js) .sc-tools,
html:not(.js) .cal-none {
display: none;
}
/*
* The tab strip too. Every panel below carries its own title, so with all four
* stacked the buttons would be four labels that repeat the headings and answer
* nothing. Scoped to this section: the picture switchers elsewhere have no
* headings of their own and keep theirs.
*/
html:not(.js) .sc-sec .tabs {
display: none;
}
html:not(.js) .cal-chip,
html:not(.js) .ppl-tile,
html:not(.js) .cal-req-b {
pointer-events: none;
}
/* ── Narrow ───────────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
.cal-body {
grid-template-columns: minmax(0, 1fr);
}
.cal-reqs {
max-height: none;
}
}
@media (max-width: 720px) {
/* Seven columns in 334px: the bars keep the shape, the list keeps the text. */
.cal-day {
height: auto;
min-height: 46px;
padding: 2px;
}
.cal-in {
--chip-h: 8px;
}
.cal-chip {
padding: 0;
font-size: 0;
border-radius: 3px;
}
.cal-chip.is-head {
box-shadow: inset 3px 0 0 var(--k);
}
.cal-hol {
display: none;
}
.cal-month {
min-width: 0;
font-size: 13.5px;
}
.cal-f {
margin-left: 0;
}
.cal-grid th {
font-size: 8.5px;
}
.ppl-tiles {
grid-template-columns: 1fr;
}
.org-kids {
margin-left: 6px;
padding-left: 8px;
}
.life-meter {
gap: 8px;
}
}
@media (prefers-reduced-motion: reduce) {
.cal-arrow,
.ppl-tile,
.org-chev,
.life-bar span,
/* The cross-fade between panels. It never moved anything - the stage holds
its size either way - but a reader who asked for less motion gets a plain
swap. */
[data-switcher][data-stage][data-live] .panels > .panel {
transition: none;
}
}