---------------------------------------------------------------------- */
.chart-columns {
display: flex;
align-items: flex-end;
gap: var(--gap, 6px);
block-size: var(--chart-h);
padding-block-end: 22px;
position: relative;
background:
repeating-linear-gradient(to top,
var(--chart-grid) 0 1px,
transparent 1px calc((100% - 22px) / 4));
background-position: 0 -22px;
background-size: 100% calc(100% - 22px);
background-repeat: no-repeat;
}
/* A column. Its height is calc(var(--value) * 1%), so rendering a chart is
writing numbers into style attributes. data-label and data-value are drawn
as generated content, which means they are for sighted readers only. */
.chart-col {
flex: 1 1 0;
min-inline-size: 6px;
block-size: calc(var(--value) * 1%);
background: var(--series, var(--c1));
border-radius: var(--r-xs) var(--r-xs) 2px 2px;
position: relative;
transform-origin: bottom;
animation: chart-rise var(--dur-3) var(--ease-out);
transition: filter var(--dur-1) var(--ease-out);
}
.chart-col:hover { filter: brightness(1.08) saturate(1.1); }
/* A label placed inside a bar gets ink chosen for that series rather than
the page's --text. contrast-color() is written directly on the elements
that carry the fill, not hoisted into a custom property: var() is
substituted where a property is declared, so a shared --text-on-series
token would read --series from .chart and get it wrong for the usual
markup, which puts .s1 .. .s6 on the bar itself.
Only inside @supports: with six hue-derived series there is no single
static answer, and guessing one would be worse than the inheritance it
replaced. Series colours are chosen for discriminability and some sit in
the 55-65% band, so this raises the floor rather than guaranteeing AA. */
@supports (color: contrast-color(red)) {
.chart-col, .chart-col-stack > span, .chart-bar-fill, .chart-meter > span {
color: contrast-color(var(--series, var(--c1)));
}
}
.chart-col[data-label]::after {
content: attr(data-label);
position: absolute;
inset-block-start: 100%;
inset-inline: 0;
padding-block-start: 6px;
text-align: center;
font-size: var(--text-2xs);
color: var(--text-faint);
white-space: nowrap;
}
.chart-col[data-value]::before {
content: attr(data-value);
position: absolute;
inset-block-end: calc(100% + 6px);
inset-inline-start: 50%;
translate: -50% 0;
padding: 3px 7px;
background: var(--ink-900);
color: var(--ink-50);
border-radius: var(--r-xs);
font-size: var(--text-2xs);
font-weight: 620;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-1) var(--ease-out);
z-index: 2;
}
.chart-col:hover::before { opacity: 1; }
@keyframes chart-rise { from { scale: 1 0; } }
/* Stacked columns: nest segments inside a .chart-col-stack */
.chart-col-stack {
flex: 1 1 0;
display: flex;
flex-direction: column-reverse;
block-size: calc(var(--value) * 1%);
border-radius: var(--r-xs) var(--r-xs) 2px 2px;
overflow: hidden;
position: relative;
animation: chart-rise var(--dur-3) var(--ease-out);
}
.chart-col-stack > span { block-size: calc(var(--part) * 1%); background: var(--series, var(--c1)); }
/* Grouped columns */
.chart-group { flex: 1 1 0; display: flex; align-items: flex-end; gap: 2px; block-size: 100%; position: relative; }
.chart-group > .chart-col { border-radius: 2px 2px 1px 1px; }
/* --- Bars (horizontal) --------------------------------------------------- */
.chart-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.chart-bar {
display: grid;
grid-template-columns: minmax(4.5rem, auto) 1fr auto;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
}
.chart-bar-label { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bar-track {
block-size: 10px;
border-radius: var(--r-full);
background: var(--bg-sunken);
overflow: hidden;
}
/* The filled part of a horizontal bar, sized from --value. It grows from
the starting edge, which needs transform-origin — a physical property —
flipped for RTL in 19-logical.css. */
.chart-bar-fill {
display: block;
block-size: 100%;
inline-size: calc(var(--value) * 1%);
border-radius: var(--r-full);
background: var(--series, var(--c1));
transform-origin: left;
animation: chart-grow var(--dur-3) var(--ease-out);
}
/* The value printed beside a bar rather than inside it. Prefer this over
text on the fill: contrast-color() raises the floor for text on a series
colour but does not guarantee AA. */
.chart-bar-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
@keyframes chart-grow { from { scale: 0 1; } }
/* --- Line and area (inline SVG) ------------------------------------------
under dir="rtl" on its own.
Due for deletion. If a vendor pseudo-element ever does need a logical
flip, it has to be its own rule -- grouping it will fail silently. */
[dir="rtl"] :is(.chart-bar-fill, .progress::-webkit-progress-value, .toast-timer) {
transform-origin: right center;
}
[dir="rtl"] .scroll-progress { transform-origin: right center; }
/* Breadcrumb separator */
[dir="rtl"] .breadcrumb li + li::before { content: "\\\\"; }
/* Timeline rail and dots */
[dir="rtl"] .timeline-item:not(:last-child)::before { inset-inline-start: 10px; }
/* Mixed-direction pages: a block that is LTR inside an RTL document */
[dir="ltr"] [dir="rtl"], [dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }
}
/* ==========================================================================
Deck — 20 Gradients
Every gradient here is built from the brand hue, so the hue slider retunes
them along with everything else. Interpolation is in oklab or oklch, which
avoids the grey dead zone you get when sRGB blends two saturated colors.
========================================================================== */
@layer deck.effects {
/* --- Surface washes ------------------------------------------------------
Quiet. These sit behind content and must never fight it.
---------------------------------------------------------------------- */
.g-surface {
background-image: linear-gradient(in oklab 180deg,
color-mix(in oklab, var(--brand-500) 7%, transparent),
transparent 60%);
}
.g-sunken {
background-image: linear-gradient(in oklab 180deg,
transparent,
color-mix(in oklab, var(--ink-900) 5%, transparent));
}
.g-brand {
background-image: linear-gradient(in oklab 135deg,
var(--brand-600), oklch(from var(--brand-600) l c calc(h + 34)));
color: var(--text-on-brand);
}
.g-brand-soft {
background-image: linear-gradient(in oklab 135deg,
var(--brand-soft), color-mix(in oklab, var(--brand-soft) 40%, var(--surface)));
}
.g-dark {
background-image: linear-gradient(in oklab 160deg, var(--ink-900), var(--ink-1000));
color: var(--ink-100);
}
/* --- Aurora / mesh -------------------------------------------------------
Three soft radial blooms. No image, no SVG filter, no blur — blur on a
large area is expensive and this reads the same.
---------------------------------------------------------------------- */
.g-mesh {
background-color: var(--bg);
background-image:
radial-gradient(closest-side at 18% 22%,
oklch(72% .14 var(--hue-brand) / .30), transparent),
radial-gradient(closest-side at 82% 12%,
oklch(76% .13 calc(var(--hue-brand) + 62) / .24), transparent),
radial-gradient(closest-side at 62% 88%,
oklch(70% .12 calc(var(--hue-brand) - 48) / .22), transparent);
background-size: 70% 70%, 60% 60%, 78% 78%;
background-repeat: no-repeat;
}
.g-mesh-warm {
--hue-brand: 34;
}
.g-mesh-subtle {
background-image:
radial-gradient(closest-side at 20% 0%, oklch(74% .10 var(--hue-brand) / .18), transparent),
radial-gradient(closest-side at 90% 30%, oklch(78% .09 calc(var(--hue-brand) + 70) / .14), transparent);
background-size: 80% 80%, 70% 70%;
background-repeat: no-repeat;
}
/* Slow drift for a hero. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
.g-mesh-drift {
animation: g-drift 22s var(--ease-in-out) infinite alternate;
}
@keyframes g-drift {
to { background-position: 8% 6%, -6% 10%, 4% -8%; }
}
}
/* --- Text gradients ------------------------------------------------------
background-clip on the text. Always keep a real color underneath so the
text is still readable if the clip fails.
---------------------------------------------------------------------- */
.g-text {
color: var(--brand-700);
background-image: linear-gradient(in oklab 92deg,
var(--brand-600), oklch(from var(--brand-500) l c calc(h + 52)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
/* keeps descenders from clipping in some engines */
padding-block-end: .06em;
}
.g-text-shine {
color: var(--text);
background-image: linear-gradient(in oklab 92deg,
var(--text) 0 40%, var(--brand-400) 50%, var(--text) 60% 100%);
background-size: 260% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
.g-text-shine { animation: g-shine 4.5s var(--ease-in-out) infinite; }
@keyframes g-shine { to { background-position: -160% 0; } }
}
/* --- Gradient borders ----------------------------------------------------
Two backgrounds with different clip boxes. Works with any border-radius,
unlike border-image, and leaves the inside a real surface color.
---------------------------------------------------------------------- */
.g-border {
--g-width: 1.5px;
border: var(--g-width) solid transparent;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
linear-gradient(in oklab var(--g-angle, 135deg),
var(--brand-500), oklch(from var(--brand-400) l c calc(h + 70))) border-box;
}
.g-border-soft {
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
linear-gradient(in oklab 160deg,
color-mix(in oklab, var(--brand-400) 60%, transparent),
transparent 70%) border-box;
}
/* The angle is a registered property, so it can animate */
@media (prefers-reduced-motion: no-preference) {
.g-border-spin { animation: g-spin 6s linear infinite; }
@keyframes g-spin { to { --g-angle: 495deg; } }
}
/* A single glowing hairline along the top edge — good for a nav or a modal */
.g-hairline {
position: relative;
}
.g-hairline::before {
content: "";
position: absolute;
inset-block-start: 0;
inset-inline: 0;
block-size: 1px;
background: linear-gradient(90deg, transparent,
color-mix(in oklab, var(--brand-400) 70%, transparent) 30% 70%, transparent);
}
/* --- Scrims ---------------------------------------------------------------
A caption over a photo needs a legible floor. A flat 50% black overlay
dulls the whole image; an eased scrim only darkens where the text sits.
---------------------------------------------------------------------- */
.g-scrim {
position: relative;
isolation: isolate;
}
.g-scrim::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--scrim);
pointer-events: none;
}
.g-scrim-top::after {
background: linear-gradient(to bottom,
oklch(12% .02 var(--hue-neutral) / .72), transparent 62%);
}
.g-scrim > * { position: relative; }
/* --- Fade masks ----------------------------------------------------------
Content that runs off the edge should fade, not be cut with a hard line.
---------------------------------------------------------------------- */
.g-fade-inline {
mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 4%),
#000 calc(100% - var(--fade, 4%)), transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 4%),
#000 calc(100% - var(--fade, 4%)), transparent);
}
.g-fade-end {
mask-image: linear-gradient(90deg, #000 70%, transparent);
-webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
}
.g-fade-block {
mask-image: linear-gradient(180deg, #000 60%, transparent);
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}
/* Long text that is collapsed: fade the bottom instead of a hard cut */
.g-fade-more {
max-block-size: var(--collapsed, 9rem);
overflow: hidden;
mask-image: linear-gradient(180deg, #000 65%, transparent);
-webkit-mask-image: linear-gradient(180deg, #000 65%, transparent);
}
.g-fade-more.is-open {
max-block-size: none;
mask-image: none;
-webkit-mask-image: none;
}
.scroller { mask-image: linear-gradient(90deg, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); }
/* --- Sheen ---------------------------------------------------------------
A highlight that sweeps across on hover. --sheen is registered, so it
animates as a real percentage instead of jumping.
---------------------------------------------------------------------- */
.g-sheen {
position: relative;
overflow: hidden;
isolation: isolate;
}
.g-sheen::after {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: var(--sheen);
inline-size: 40%;
background: linear-gradient(105deg, transparent,
oklch(100% 0 0 / .32) 45%, oklch(100% 0 0 / .32) 55%, transparent);
pointer-events: none;
transition: --sheen var(--dur-5) var(--ease-out);
}
@media (prefers-reduced-motion: no-preference) {
.g-sheen:hover::after { --sheen: 110%; }
}
/* --- Status gradients ----------------------------------------------------- */
.g-good { background-image: linear-gradient(in oklab 135deg, var(--good-600), oklch(from var(--good-600) l c calc(h - 26))); color: var(--text-on-good); }
.g-warn { background-image: linear-gradient(in oklab 135deg, var(--warn-500), oklch(from var(--warn-500) l c calc(h + 22))); color: var(--text-on-warn); }
.g-bad { background-image: linear-gradient(in oklab 135deg, var(--bad-600), oklch(from var(--bad-600) l c calc(h - 18))); color: var(--text-on-bad); }
/* --- Conic accents -------------------------------------------------------- */
.g-conic {
background-image: conic-gradient(from var(--g-angle, 0deg) in oklch longer hue,
oklch(70% .16 0), oklch(70% .16 360));
}
.g-ring {
--thickness: 3px;
border-radius: var(--r-full);
background: conic-gradient(from var(--g-angle, 0deg),
transparent, var(--brand-500), transparent 62%);
mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thickness)), #000 calc(100% - var(--thickness) + 1px));
}
@media (prefers-reduced-motion: no-preference) {
.g-ring-spin { animation: g-spin-360 1.6s linear infinite; }
@keyframes g-spin-360 { to { --g-angle: 360deg; } }
}
/* --- Structural patterns --------------------------------------------------
Not gradients as decoration — gradients standing in for an image. These
cost nothing to download and retint automatically.
---------------------------------------------------------------------- */
.g-grid-lines {
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: var(--cell, 24px) var(--cell, 24px);
}
.g-dots {
background-image: radial-gradient(var(--line-strong) 1px, transparent 1px);
background-size: var(--cell, 18px) var(--cell, 18px);
}
.g-stripes {
background-image: repeating-linear-gradient(45deg,
color-mix(in oklab, var(--ink-500) 8%, transparent) 0 6px,
transparent 6px 12px);
}
/* Hatching for a "pending" or "unavailable" block in a schedule */
.g-hatch {
background-image: repeating-linear-gradient(-45deg,
color-mix(in oklab, var(--warn-500) 22%, transparent) 0 5px,
transparent 5px 10px);
}
/* --- Skeleton and shimmer, unified with the palette ---------------------- */
.g-shimmer {
background-image: linear-gradient(100deg,
transparent 20%,
color-mix(in oklab, var(--brand-200) 55%, transparent) 45%,
transparent 70%);
background-size: 250% 100%;
background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
.g-shimmer { animation: dk-shimmer 1.6s var(--ease-in-out) infinite; }
}
/* --- Chart fills ---------------------------------------------------------
Area charts read better with a gradient falling off to nothing.
---------------------------------------------------------------------- */
.chart-area-g {
fill: url(#deck-area-gradient);
stroke: none;
}
.g-bar-fill {
background-image: linear-gradient(in oklab 180deg,
var(--series, var(--c1)),
color-mix(in oklab, var(--series, var(--c1)) 70%, var(--ink-900)));
}
/* --- Fallback ------------------------------------------------------------
Engines without oklch get the plain brand color rather than a broken
gradient. The declarations above simply do not apply.
---------------------------------------------------------------------- */
@supports not (color: oklch(50% .1 200)) {
.g-brand, .g-good, .g-warn, .g-bad { background-image: none; background-color: var(--brand-600); }
.g-text { -webkit-text-fill-color: currentColor; background-image: none; }
.g-mesh { background-image: none; }
}
}
/* ==========================================================================
Deck — 21 Space (3D transforms)
3D earns its place when depth carries meaning: a card that has two sides, a
stack you are working down through, a control that physically depresses.
It does not earn its place as decoration on a landing page.
Every transform here uses translate / rotate / scale as individual
properties rather than the transform shorthand, so two effects on the same
element compose instead of overwriting each other.
========================================================================== */
@layer deck.effects {
/* --- Scene ---------------------------------------------------------------
A scene establishes the vanishing point. Children need preserve-3d to
stay in the same space instead of being flattened.
---------------------------------------------------------------------- */
.scene {
perspective: var(--perspective, 1000px);
perspective-origin: var(--vanish, 50% 50%);
}
.scene-near { --perspective: 560px; }
.scene-far { --perspective: 2000px; }
.space { transform-style: preserve-3d; }
.flat { transform-style: flat; }
.backface-hidden { backface-visibility: hidden; }
/* --- Flip card -----------------------------------------------------------
Two faces, one footprint. Front and back are stacked in the same grid
cell so the card is exactly as tall as its taller side.
---------------------------------------------------------------------- */
.flip {
display: grid;
transform-style: preserve-3d;
transition: rotate var(--dur-4) var(--ease-spring);
}
.flip > .flip-front, .flip > .flip-back {
grid-area: 1 / 1;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.flip > .flip-back { rotate: y 180deg; }
.flip.is-flipped { rotate: y 180deg; }
.flip-x { transition: rotate var(--dur-4) var(--ease-spring); }
.flip-x > .flip-back { rotate: x 180deg; }
.flip-x.is-flipped { rotate: x 180deg; }
/* Hover flip for pointer devices only — on touch it needs a real tap */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.flip-hover:hover { rotate: y 180deg; }
}
/* --- Tilt ----------------------------------------------------------------
deck.js writes --tilt-x and --tilt-y from the pointer position. Both are
registered angles, so they interpolate smoothly back to rest.
---------------------------------------------------------------------- */
.tilt {
transform-style: preserve-3d;
rotate: var(--tilt-axis, 1 1 0) var(--tilt-amount, 0deg);
transition: rotate var(--dur-3) var(--ease-out), scale var(--dur-2) var(--ease-out);
will-change: auto;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.tilt.is-tilting { transition: rotate 80ms linear; }
.tilt:hover { scale: 1.015; }
/* Content that should float above the card face while it tilts */
.tilt .tilt-lift { transform: translateZ(var(--depth, 28px)); }
.tilt .tilt-lift-sm { transform: translateZ(12px); }
}
/* --- Depth stack ---------------------------------------------------------
A pile of records you are working through. The one on top is live, the
ones behind are context. --i is the child's own position, 0 for the top
card; deck.js parks a dismissed card at the end so the rest close up.
---------------------------------------------------------------------- */
@supports (animation-delay: calc(sibling-index() * 1ms)) {
.pile > * { --i: calc(sibling-index() - 1); }
}
@supports not (animation-delay: calc(sibling-index() * 1ms)) {
.pile > :nth-child(1) { --i: 0; }
.pile > :nth-child(2) { --i: 1; }
.pile > :nth-child(3) { --i: 2; }
.pile > :nth-child(4) { --i: 3; }
.pile > :nth-child(5) { --i: 4; }
.pile > :nth-child(6) { --i: 5; }
.pile > :nth-child(7) { --i: 6; }
.pile > :nth-child(8) { --i: 7; }
}
.pile {
display: grid;
transform-style: preserve-3d;
perspective: 1200px;
}
.pile > * {
grid-area: 1 / 1;
translate: 0 calc(var(--i, 0) * 10px);
scale: calc(1 - var(--i, 0) * .045);
z-index: calc(10 - var(--i, 0));
filter: brightness(calc(1 - var(--i, 0) * .04));
transition: translate var(--dur-3) var(--ease-out),
scale var(--dur-3) var(--ease-out),
rotate var(--dur-3) var(--ease-out),
opacity var(--dur-2) var(--ease-out);
}
.pile > :nth-child(n+4) { opacity: 0; pointer-events: none; }
/* Fan the pile out to see what is in it */
.pile.is-fanned > * {
translate: calc(var(--i, 0) * 14px) calc(var(--i, 0) * 22px);
rotate: calc(var(--i, 0) * 2.5deg);
scale: 1;
filter: none;
}
.pile.is-fanned > :nth-child(n+4):not(.is-dismissed) { opacity: 1; pointer-events: auto; }
/* Dismiss the top card away from the pile */
.pile > .is-dismissed {
translate: 120% -20px;
rotate: 14deg;
opacity: 0;
}
/* --- Coverflow -----------------------------------------------------------
A horizontal scroller where the off-center items rotate away. Uses scroll
snap for the mechanics and 3D only for the read.
---------------------------------------------------------------------- */
.coverflow {
display: flex;
gap: var(--space-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
perspective: 1200px;
padding-block: var(--space-6);
padding-inline: max(var(--space-gutter), 20%);
scrollbar-width: none;
overscroll-behavior-inline: contain;
}
.coverflow::-webkit-scrollbar { display: none; }
.coverflow > * {
flex: 0 0 auto;
scroll-snap-align: center;
transform-style: preserve-3d;
transition: rotate var(--dur-3) var(--ease-out), scale var(--dur-3) var(--ease-out);
}
/* deck.js marks the centered item; without JS everything simply sits flat */
.coverflow > .is-behind-start { rotate: y 32deg; scale: .88; }
.coverflow > .is-behind-end { rotate: y -32deg; scale: .88; }
.coverflow > .is-front { rotate: y 0deg; scale: 1; }
/* --- Cube ----------------------------------------------------------------
Six faces for a rotating status block or an empty-state illustration.
---------------------------------------------------------------------- */
.cube {
--size: 120px;
position: relative;
inline-size: var(--size);
block-size: var(--size);
transform-style: preserve-3d;
transition: rotate var(--dur-5) var(--ease-spring);
}
.cube > * {
position: absolute;
inset: 0;
display: grid;
place-items: center;
border: 1px solid var(--line);
background: color-mix(in oklab, var(--surface) 88%, transparent);
backface-visibility: visible;
}
.cube > .face-front { transform: translateZ(calc(var(--size) / 2)); }
.cube > .face-back { transform: rotateY(180deg) translateZ(calc(var(--size) / 2)); }
.cube > .face-end { transform: rotateY(90deg) translateZ(calc(var(--size) / 2)); }
.cube > .face-start { transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)); }
.cube > .face-top { transform: rotateX(90deg) translateZ(calc(var(--size) / 2)); }
.cube > .face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--size) / 2)); }
.cube[data-face="front"] { rotate: 0deg; }
.cube[data-face="end"] { rotate: y -90deg; }
.cube[data-face="back"] { rotate: y 180deg; }
.cube[data-face="start"] { rotate: y 90deg; }
.cube[data-face="top"] { rotate: x -90deg; }
.cube[data-face="bottom"] { rotate: x 90deg; }
@media (prefers-reduced-motion: no-preference) {
.cube-spin { animation: dk-cube 14s linear infinite; }
@keyframes dk-cube {
from { transform: rotateX(-18deg) rotateY(0deg); }
to { transform: rotateX(-18deg) rotateY(360deg); }
}
}
/* --- Depressible controls ------------------------------------------------
A button with real thickness. The face moves down into the shadow instead
of just changing color.
---------------------------------------------------------------------- */
.btn-3d {
--lift: 3px;
position: relative;
border: 0;
box-shadow:
0 var(--lift) 0 0 color-mix(in oklab, var(--brand-600) 62%, var(--ink-900)),
0 calc(var(--lift) + 3px) 8px oklch(20% .03 var(--hue-neutral) / .22);
translate: 0 0;
transition: translate 70ms var(--ease-out), box-shadow 70ms var(--ease-out);
}
.btn-3d:active {
translate: 0 var(--lift);
box-shadow: 0 0 0 0 color-mix(in oklab, var(--brand-600) 62%, var(--ink-900));
}
/* --- Parallax layers -----------------------------------------------------
True 3D parallax: layers sit at different Z depths inside a perspective
container, so the browser does the math on the compositor. No scroll
handler, no jank.
---------------------------------------------------------------------- */
.parallax {
block-size: 100%;
overflow-y: auto;
overflow-x: hidden;
perspective: 8px;
perspective-origin: 0 0;
}
.parallax-layer {
position: absolute;
inset: 0;
transform-origin: 0 0;
}
.parallax-back { transform: translateZ(-6px) scale(1.75); }
.parallax-mid { transform: translateZ(-3px) scale(1.375); }
.parallax-front { transform: translateZ(0); }
@media (prefers-reduced-motion: reduce) {
.parallax { perspective: none; }
.parallax-layer { transform: none; position: relative; }
}
/* --- Page turn -----------------------------------------------------------
For stepping through a multi-page form or a wizard. Pairs with
Deck.transition() so the DOM swap and the motion happen together.
---------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.turn-out { animation: dk-turn-out var(--dur-3) var(--ease-in) both; transform-origin: left center; }
.turn-in { animation: dk-turn-in var(--dur-4) var(--ease-out) both; transform-origin: left center; }
@keyframes dk-turn-out {
to { transform: perspective(1400px) rotateY(-22deg); opacity: 0; }
}
@keyframes dk-turn-in {
from { transform: perspective(1400px) rotateY(24deg); opacity: 0; }
}
[dir="rtl"] :is(.turn-out, .turn-in) { transform-origin: right center; }
}
/* --- Layered elevation ---------------------------------------------------
Lift an element toward the viewer inside a scene, rather than faking it
with a bigger shadow.
---------------------------------------------------------------------- */
.z-lift-1 { transform: translateZ(8px); }
.z-lift-2 { transform: translateZ(20px); }
.z-lift-3 { transform: translateZ(40px); }
.z-sink { transform: translateZ(-16px); }
/* --- Performance guard ---------------------------------------------------
3D forces layers onto the GPU. Promote only while something is actually
moving, and hand the memory back when it stops.
---------------------------------------------------------------------- */
.tilt.is-tilting, .flip.is-flipped, .pile.is-fanned > *,
.coverflow > *, .cube {
will-change: transform, rotate, scale;
}
.tilt:not(.is-tilting), .flip:not(.is-flipped) { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
.flip, .flip-x, .tilt, .cube, .pile > *, .coverflow > * {
transition-duration: 1ms;
rotate: none;
}
.flip.is-flipped, .flip-x.is-flipped { rotate: y 180deg; }
.coverflow > * { rotate: none; scale: 1; }
}
}
/* ==========================================================================
Deck — 22 Navigation and structure
========================================================================== */
@layer deck.components {
/* --- Carousel ------------------------------------------------------------
Scroll snap does the work. Arrows and dots are progressive enhancement,
so it still swipes correctly with JavaScript switched off.
---------------------------------------------------------------------- */
.carousel { position: relative; }
/* The scroll-snap container holding the slides. */
.carousel-track {
display: flex;
gap: var(--gap, var(--space-4));
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scrollbar-width: none;
border-radius: var(--r-md);
}
.carousel-track::-webkit-scrollbar { display: none; }
/* One slide. flex-basis: 100% by default; .carousel-peek makes it 86% so
the next one is partly visible, which is the only persistent cue that the
track scrolls once the scrollbar is hidden. */
.carousel-slide {
flex: 0 0 100%;
scroll-snap-align: center;
scroll-snap-stop: always;
min-inline-size: 0;
/* The slide is the containing block for its own .carousel-caption. Without
this the nearest positioned ancestor is .carousel, so every caption in
the track lands in the same place and they stack on top of each other. */
position: relative;
}
.carousel-peek .carousel-slide { flex-basis: 86%; }
.carousel-multi .carousel-slide { flex-basis: calc((100% - var(--space-4) * 2) / 3); }
@media (max-width: 48rem) {
.carousel-multi .carousel-slide { flex-basis: 78%; }
}
.carousel-slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* Previous and next. Hidden on a coarse pointer, where the reader swipes
instead — so do not also hide the dots. */
.carousel-arrow {
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
z-index: 2;
inline-size: 40px;
block-size: 40px;
display: grid;
place-items: center;
border-radius: var(--r-full);
background: color-mix(in oklab, var(--surface) 88%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--line);
box-shadow: var(--shadow-2);
color: var(--text);
cursor: pointer;
transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
.carousel-arrow:hover { scale: 1.06; }
.carousel-arrow[disabled] { opacity: 0; pointer-events: none; }
.carousel-prev { inset-inline-start: var(--space-3); }
.carousel-next { inset-inline-end: var(--space-3); }
@media (pointer: coarse) { .carousel-arrow { display: none; } }
.carousel-dots {
display: flex;
justify-content: center;
gap: var(--space-2);
padding-block-start: var(--space-3);
}
.carousel-dot {
inline-size: 7px;
block-size: 7px;
border-radius: var(--r-full);
background: var(--ink-300);
cursor: pointer;
padding: 0;
transition: inline-size var(--dur-2) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}
.carousel-dot[aria-current="true"] { inline-size: 22px; background: var(--brand-600); }
/* the tap target is bigger than the dot */
.carousel-dot::before { content: ""; position: absolute; inline-size: 32px; block-size: 32px; translate: -50% -50%; inset: 50% auto auto 50%; }
.carousel-dots > * { position: relative; }
/* --- Native carousel -----------------------------------------------------
::scroll-marker gives every slide its own dot and ::scroll-button gives the
track its arrows, with the active state, the disabled state, the click
handling and the arrow-key focus order all done by the browser.
Where these exist, deck-extras.js skips building and wiring the DIY ones
and .carousel-dots / .carousel-arrow simply step aside -- the markup stays
exactly as it was. The buttons take the logical keywords rather than left
and right, so an RTL carousel flips them without a rule in deck.rtl.
---------------------------------------------------------------------- */
@supports selector(::scroll-marker) {
.carousel-dots, .carousel-arrow { display: none; }
.carousel-track { scroll-marker-group: after; }
.carousel-track::scroll-marker-group {
display: flex;
justify-content: center;
gap: var(--space-2);
padding-block-start: var(--space-3);
}
.carousel-slide::scroll-marker {
content: "";
inline-size: 7px;
block-size: 7px;
border-radius: var(--r-full);
background: var(--ink-300);
cursor: pointer;
transition: inline-size var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out);
}
.carousel-slide::scroll-marker:target-current {
inline-size: 22px;
background: var(--brand-600);
}
.carousel-track::scroll-button(*) {
position: absolute;
inset-block-start: 50%;
translate: 0 -50%;
z-index: 2;
inline-size: 40px;
block-size: 40px;
display: grid;
place-items: center;
border-radius: var(--r-full);
background: color-mix(in oklab, var(--surface) 88%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--line);
box-shadow: var(--shadow-2);
color: var(--text);
font-size: var(--text-xl);
line-height: 1;
cursor: pointer;
transition: opacity var(--dur-2) var(--ease-out), scale var(--dur-1) var(--ease-out);
}
.carousel-track::scroll-button(*):hover { scale: 1.06; }
.carousel-track::scroll-button(*):disabled { opacity: 0; pointer-events: none; }
.carousel-track::scroll-button(inline-start) {
content: "\2039" / "Previous slide";
inset-inline-start: var(--space-3);
}
.carousel-track::scroll-button(inline-end) {
content: "\203A" / "Next slide";
inset-inline-end: var(--space-3);
}
@media (pointer: coarse) {
.carousel-track::scroll-button(*) { display: none; }
}
}
/* Text over a slide. The generous block-start padding is there to give the
scrim room to fade — without a background the near-white text sits
directly on the image and disappears over anything light. */
.carousel-caption {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
padding: var(--space-8) var(--space-5) var(--space-5);
color: oklch(98% 0 0);
background: var(--scrim);
pointer-events: none;
}
.carousel-caption :is(a, button) { pointer-events: auto; }
/* --- Drawer --------------------------------------------------------------
A side panel. The bottom sheet is in 08-mobile; this one comes in from an
edge and is the right shape for filters, settings, and a mobile nav.
---------------------------------------------------------------------- */
.drawer {
--drawer-size: min(22rem, 88vw);
position: fixed;
inset-block: 0;
inset-inline-start: 0;
inset-inline-end: auto;
margin: 0;
max-block-size: none;
block-size: 100dvh;
inline-size: var(--drawer-size);
max-inline-size: var(--drawer-size);
padding: 0;
border: 0;
border-inline-end: 1px solid var(--line);
background: var(--surface);
color: var(--text);
box-shadow: var(--shadow-4);
display: flex;
flex-direction: column;
translate: -100% 0;
transition: translate var(--dur-3) var(--ease-emphasized),
display var(--dur-3) allow-discrete,
overlay var(--dur-3) allow-discrete;
}
.drawer[open] { translate: 0; }
@starting-style { .drawer[open] { translate: -100% 0; } }
/* Pins the drawer to the ending edge instead of the starting one. The inset
is logical and mirrors for free; the translate is not, which is why this
rule declares its own. */
.drawer-end {
inset-inline: auto 0;
border-inline: 1px solid var(--line) 0;
border-inline-start: 1px solid var(--line);
border-inline-end: 0;
translate: 100% 0;
}
@starting-style { .drawer-end[open] { translate: 100% 0; } }
.drawer::backdrop {
background: oklch(18% .02 var(--hue-neutral) / .5);
opacity: 0;
transition: opacity var(--dur-3) var(--ease-out),
display var(--dur-3) allow-discrete,
overlay var(--dur-3) allow-discrete;
}
.drawer[open]::backdrop { opacity: 1; }
@starting-style { .drawer[open]::backdrop { opacity: 0; } }
/* The title row. Pads for a notch with max(--space-4, safe-area-inset-top). */
.drawer-header {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
padding-block-start: max(var(--space-4), env(safe-area-inset-top));
border-block-end: 1px solid var(--line);
flex: 0 0 auto;
}
/* The drawer's heading. Point aria-labelledby at it. */
.drawer-title { font-size: var(--text-md); font-weight: 640; }
/* The scrolling region. overscroll-behavior: contain stops a scroll that
reaches the end from chaining to the page behind. */
.drawer-body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* The action row, pinned to the bottom. Pads for the home indicator with
max(--space-4, safe-area-inset-bottom). */
.drawer-footer {
flex: 0 0 auto;
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
padding-block-end: max(var(--space-4), env(safe-area-inset-bottom));
border-block-start: 1px solid var(--line);
background: var(--surface-2);
}
.drawer-footer > .btn { flex: 1 1 auto; }
/* --- Mega menu -----------------------------------------------------------
A wide panel under a nav item. Built on the popover attribute, so escape
and outside-click are the browser's job.
---------------------------------------------------------------------- */
.mega {
position: absolute;
inset: auto;
margin: 0;
inline-size: min(64rem, calc(100vw - var(--space-8)));
padding: var(--space-5);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-4);
opacity: 0;
translate: 0 -8px;
transition: opacity var(--dur-2) var(--ease-out),
translate var(--dur-2) var(--ease-out),
overlay var(--dur-2) allow-discrete,
display var(--dur-2) allow-discrete;
}
.mega:popover-open { opacity: 1; translate: 0; }
@starting-style { .mega:popover-open { opacity: 0; translate: 0 -8px; } }
.mega::backdrop { background: transparent; }
.mega-grid {
display: grid;
gap: var(--space-5);
grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}
.mega-col { display: flex; flex-direction: column; gap: var(--space-1); }
.mega-heading {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text-faint);
padding: var(--space-2) var(--space-2) var(--space-1);
}
.mega-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-2);
border-radius: var(--r-sm);
color: var(--text);
text-decoration: none;
transition: background-color var(--dur-1) var(--ease-out);
}
.mega-item:hover { background: var(--surface-hover); }
.mega-item-title { font-weight: 560; font-size: var(--text-sm); }
.mega-item-note { font-size: var(--text-xs); color: var(--text-muted); }
.mega-feature {
grid-column: span 1;
padding: var(--space-4);
border-radius: var(--r-sm);
background: var(--brand-soft);
color: var(--brand-soft-text);
}
.mega-footer {
display: flex;
gap: var(--space-4);
flex-wrap: wrap;
margin-block-start: var(--space-5);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--line);
font-size: var(--text-sm);
}
/* --- Speed dial ----------------------------------------------------------
A FAB that fans out into related actions.
---------------------------------------------------------------------- */
.speed-dial {
position: fixed;
inset-block-end: calc(var(--space-5) + env(safe-area-inset-bottom));
inset-inline-end: var(--space-5);
z-index: var(--z-nav);
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: var(--space-3);
}
body:has(.tabbar) .speed-dial {
inset-block-end: calc(var(--space-4) + var(--tap) + var(--space-3) + env(safe-area-inset-bottom));
}
@media (min-width: 48rem) {
body:has(.tabbar) .speed-dial { inset-block-end: calc(var(--space-5) + env(safe-area-inset-bottom)); }
}
.speed-dial-actions {
display: flex;
flex-direction: column-reverse;
align-items: flex-end;
gap: var(--space-3);
}
@supports (animation-delay: calc(sibling-index() * 1ms)) {
.speed-dial-action { --i: calc(sibling-index() - 1); }
}
@supports not (animation-delay: calc(sibling-index() * 1ms)) {
.speed-dial-action:nth-child(1) { --i: 0; }
.speed-dial-action:nth-child(2) { --i: 1; }
.speed-dial-action:nth-child(3) { --i: 2; }
.speed-dial-action:nth-child(4) { --i: 3; }
.speed-dial-action:nth-child(5) { --i: 4; }
.speed-dial-action:nth-child(6) { --i: 5; }
.speed-dial-action:nth-child(7) { --i: 6; }
.speed-dial-action:nth-child(8) { --i: 7; }
}
.speed-dial-action {
display: flex;
align-items: center;
gap: var(--space-3);
opacity: 0;
translate: 0 12px;
scale: .85;
pointer-events: none;
transition: opacity var(--dur-2) var(--ease-out),
translate var(--dur-2) var(--ease-spring),
scale var(--dur-2) var(--ease-spring);
transition-delay: calc(var(--i, 0) * 35ms);
}
.speed-dial.is-open .speed-dial-action {
opacity: 1;
translate: 0;
scale: 1;
pointer-events: auto;
}
.speed-dial-label {
padding: var(--space-1) var(--space-3);
border-radius: var(--r-sm);
background: var(--ink-900);
color: var(--ink-50);
font-size: var(--text-xs);
font-weight: 560;
white-space: nowrap;
box-shadow: var(--shadow-2);
}
.speed-dial-button {
inline-size: 42px;
block-size: 42px;
border-radius: var(--r-full);
display: grid;
place-items: center;
background: var(--surface);
border: 1px solid var(--line);
color: var(--text);
box-shadow: var(--shadow-3);
cursor: pointer;
}
.speed-dial-button:hover { background: var(--surface-hover); }
.speed-dial > .fab { position: static; }
.speed-dial > .fab .icon { transition: rotate var(--dur-3) var(--ease-spring); }
.speed-dial.is-open > .fab .icon { rotate: 135deg; }
/* --- Back to top ---------------------------------------------------------
A link, not a button. #top is a real target at the head of the document,
so the browser moves focus there along with the scroll. A button calling
scrollTo() leaves a keyboard user parked at the bottom of the page while
looking at the top of it, which is the whole bug this component usually
ships with.
Showing and hiding is a scroll-driven animation, so there is no scroll
listener anywhere -- same mechanism as .scroll-progress in 16-motion.
visibility is in the keyframe on purpose: it takes the link out of the tab
order and out of the accessibility tree while it is off screen, which is
what aria-hidden reaches for and which CSS can actually do by itself.
deck.js only steps in where animation-timeline is missing, and it uses an
IntersectionObserver on a sentinel, not a scroll handler.
---------------------------------------------------------------------- */
.back-to-top {
position: fixed;
inset-block-end: calc(var(--space-5) + env(safe-area-inset-bottom));
inset-inline-end: var(--space-5);
/* One above the rest of the bottom chrome, so it stays clickable whatever
order the markup happens to be in. Same token, same band. */
z-index: calc(var(--z-nav) + 1);
inline-size: var(--tap);
block-size: var(--tap);
border-radius: var(--r-full);
display: grid;
place-items: center;
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
box-shadow: var(--shadow-3);
text-decoration: none;
transition: opacity var(--dur-2) var(--ease-out),
visibility var(--dur-2) var(--ease-out),
background-color var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
scale var(--dur-2) var(--ease-spring);
}
.back-to-top:hover {
background: var(--brand-600);
color: var(--text-on-brand);
border-color: transparent;
scale: 1.06;
}
.back-to-top:active { scale: .94; }
/* Stack above whatever else is parked in that corner. .fab and .speed-dial
both sit at inset-block-end: var(--space-5) and both already lift over a
tab bar, so back-to-top repeats their arithmetic one storey higher. 56px
is the FAB's own size from 05-buttons; it has no token, so neither does
this. Every branch keeps env(safe-area-inset-bottom) on the end. */
body:has(:is(.fab, .speed-dial)) .back-to-top {
inset-block-end: calc(var(--space-5) + 56px + var(--space-3) + env(safe-area-inset-bottom));
}
body:has(.tabbar) .back-to-top {
inset-block-end: calc(var(--space-4) + var(--tap) + var(--space-3) + env(safe-area-inset-bottom));
}
body:has(.tabbar):has(:is(.fab, .speed-dial)) .back-to-top {
inset-block-end: calc(var(--space-4) + var(--tap) + var(--space-3) + 56px + var(--space-3) + env(safe-area-inset-bottom));
}
@media (min-width: 48rem) {
/* The tab bar is display:none at this width, so the offsets collapse back */
body:has(.tabbar) .back-to-top {
inset-block-end: calc(var(--space-5) + env(safe-area-inset-bottom));
}
body:has(.tabbar):has(:is(.fab, .speed-dial)) .back-to-top {
inset-block-end: calc(var(--space-5) + 56px + var(--space-3) + env(safe-area-inset-bottom));
}
}
/* A speed dial fans out across the band the button sits in -- its collapsed
actions still take their layout space, so the corner is the dial's while it
is open. display is the one property the reveal animation does not touch,
so this wins the cascade without !important. */
body:has(.speed-dial.is-open) .back-to-top { display: none; }
@media (prefers-reduced-motion: no-preference) {
@supports (animation-timeline: scroll()) {
.back-to-top {
animation: dk-btt-in linear both;
animation-timeline: scroll(root block);
animation-range: 400px 520px;
}
}
/* No scroll timeline: deck.js marks the link with data-deck-btt and toggles
.is-visible from an IntersectionObserver on a sentinel at the top of the
page. Unmarked -- no JS -- the link simply stays visible and still works. */
@supports not (animation-timeline: scroll()) {
.back-to-top[data-deck-btt] { opacity: 0; visibility: hidden; }
.back-to-top[data-deck-btt].is-visible { opacity: 1; visibility: visible; }
}
}
/* Under prefers-reduced-motion: reduce neither branch above applies, so the
link is simply always there -- no entrance, and 02-reset has already put
html back to scroll-behavior: auto, so the jump is instant. */
@keyframes dk-btt-in {
from { opacity: 0; visibility: hidden; }
to { opacity: 1; visibility: visible; }
}
/* --- Stepper -------------------------------------------------------------
A wizard. The timeline in 07 records what happened; this one shows where
you are in a process you are actively moving through.
---------------------------------------------------------------------- */
.stepper {
display: flex;
gap: var(--space-2);
overflow-x: auto;
scrollbar-width: none;
counter-reset: step;
}
.stepper::-webkit-scrollbar { display: none; }
.step {
flex: 1 1 0;
min-inline-size: 7rem;
display: flex;
flex-direction: column;
gap: var(--space-2);
position: relative;
counter-increment: step;
}
.step-marker {
display: flex;
align-items: center;
gap: var(--space-2);
}
.step-marker::before {
content: counter(step);
inline-size: 26px;
block-size: 26px;
flex: 0 0 auto;
display: grid;
place-items: center;
border-radius: var(--r-full);
border: 1.5px solid var(--line-strong);
background: var(--surface);
font-size: var(--text-xs);
font-weight: 640;
color: var(--text-muted);
transition: background-color var(--dur-2) var(--ease-out),
border-color var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
.step-marker::after {
content: "";
flex: 1 1 auto;
block-size: 2px;
background: var(--line);
border-radius: var(--r-full);
}
.step:last-child .step-marker::after { display: none; }
.step-label { font-size: var(--text-sm); font-weight: 560; color: var(--text-muted); }
.step-note { font-size: var(--text-xs); color: var(--text-faint); }
.step.is-done .step-marker::before {
content: "";
background: var(--brand-600);
border-color: var(--brand-600);
background-image: linear-gradient(var(--text-on-brand), var(--text-on-brand));
background-size: 10px 10px;
background-position: center;
background-repeat: no-repeat;
-webkit-mask: none;
clip-path: none;
}
.step.is-done .step-marker::after { background: var(--brand-500); }
.step.is-done .step-label { color: var(--text); }
.step.is-current .step-marker::before {
border-color: var(--brand-600);
color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}
.step.is-current .step-label { color: var(--text); font-weight: 620; }
/* Vertical on a phone, where five steps side by side never fits */
.stepper-vertical { flex-direction: column; gap: var(--space-5); }
.stepper-vertical .step { flex-direction: row; gap: var(--space-3); min-inline-size: 0; }
.stepper-vertical .step-marker { flex-direction: column; align-self: stretch; }
.stepper-vertical .step-marker::after { inline-size: 2px; block-size: auto; flex: 1 1 auto; }
@media (max-width: 40rem) {
/* Horizontal where there is room, vertical below a breakpoint. Prefer this
over .stepper-vertical: four steps with notes do not fit across a phone,
and a horizontal stepper that squashes is unreadable. */
.stepper-auto { flex-direction: column; gap: var(--space-5); }
.stepper-auto .step { flex-direction: row; gap: var(--space-3); min-inline-size: 0; }
.stepper-auto .step-marker { flex-direction: column; align-self: stretch; }
.stepper-auto .step-marker::after { inline-size: 2px; block-size: auto; flex: 1 1 auto; }
}
/* --- Sticky banner -------------------------------------------------------
An announcement strip. Top or bottom, dismissible, out of the way.
---------------------------------------------------------------------- */
.banner {
position: sticky;
inset-block-start: 0;
z-index: calc(var(--z-nav) + 1);
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-gutter);
padding-block-start: max(var(--space-3), env(safe-area-inset-top));
background: var(--brand-soft);
color: var(--brand-soft-text);
border-block-end: 1px solid color-mix(in oklab, var(--brand-400) 30%, transparent);
font-size: var(--text-sm);
}
.banner-bottom {
inset-block: auto 0;
border-block: 1px solid color-mix(in oklab, var(--brand-400) 30%, transparent) 0;
border-block-start: 1px solid color-mix(in oklab, var(--brand-400) 30%, transparent);
border-block-end: 0;
padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
}
.banner-fixed { position: fixed; inset-inline: 0; }
.banner-dark { background: var(--ink-900); color: var(--ink-100); border-color: transparent; }
.banner-warn { background: var(--warn-100); color: var(--warn-700); border-color: transparent; }
.banner-close { margin-inline-start: auto; opacity: .7; cursor: pointer; flex: 0 0 auto; }
.banner-close:hover { opacity: 1; }
.banner[hidden] { display: none; }
/* --- Jumbotron -----------------------------------------------------------
A hero block. Kept deliberately plain so the content carries it.
---------------------------------------------------------------------- */
.jumbotron {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-section) var(--space-gutter);
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
text-align: start;
}
.jumbotron-center { text-align: center; align-items: center; }
.jumbotron-center .lede { margin-inline: auto; }
.jumbotron-media {
display: grid;
gap: var(--space-8);
align-items: center;
grid-template-columns: 1fr;
}
@media (min-width: 56rem) {
.jumbotron-media { grid-template-columns: 1.1fr .9fr; }
}
.jumbotron h1 { max-inline-size: 18ch; }
.jumbotron-center h1 { margin-inline: auto; }
.jumbotron-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 30rem) {
.jumbotron-actions > .btn { inline-size: 100%; }
}
/* --- Footer --------------------------------------------------------------
A real component rather than the demo's ad-hoc one.
---------------------------------------------------------------------- */
.footer {
border-block-start: 1px solid var(--line);
padding-block: var(--space-10) var(--space-8);
color: var(--text-muted);
font-size: var(--text-sm);
}
.footer-grid {
display: grid;
gap: var(--space-8);
grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
padding-block-end: var(--space-8);
}
.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); max-inline-size: 26ch; }
.footer-col { display: flex; flex-direction: column; gap: var(--space-2); }
.footer-heading {
font-size: var(--text-xs);
font-weight: 700;
color: var(--text);
margin-block-end: var(--space-1);
}
/* FINDINGS 65: this is the same token .footer sets on itself, and the
underline is removed -- so a link inside a SENTENCE in the footer has no
colour difference, no weight difference and no underline. Nothing marks it
until hover, which does not help a keyboard or touch user.
It is fine in a .footer-col, which is a stack of links and nothing else.
It is a WCAG 1.4.1 failure in prose. Scope the underline removal to the
link containers rather than to every descendant. */
.footer a { color: var(--text-muted); text-decoration: none; }
.footer a:hover { color: var(--brand); text-decoration: underline; }
.footer-bottom {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3);
padding-block-start: var(--space-5);
border-block-start: 1px solid var(--line);
font-size: var(--text-xs);
}
.footer-social { display: flex; gap: var(--space-1); margin-inline-start: auto; }
.footer-social a {
inline-size: 34px;
block-size: 34px;
display: grid;
place-items: center;
border-radius: var(--r-sm);
}
.footer-social a:hover { background: var(--surface-hover); }
/* --- Indicators ----------------------------------------------------------
Status dots, counts on an icon, and unread markers.
---------------------------------------------------------------------- */
.indicator {
display: inline-block;
inline-size: 8px;
block-size: 8px;
border-radius: var(--r-full);
background: var(--ink-400);
flex: 0 0 auto;
}
.indicator-good { background: var(--good-500); }
.indicator-warn { background: var(--warn-500); }
.indicator-bad { background: var(--bad-500); }
.indicator-brand { background: var(--brand-500); }
.indicator-lg { inline-size: 11px; block-size: 11px; }
.indicator-ring { box-shadow: 0 0 0 2px var(--surface); }
/* A count or dot anchored to a corner of something */
.with-indicator { position: relative; display: inline-flex; }
.with-indicator > .indicator-badge {
position: absolute;
inset-block-start: -4px;
inset-inline-end: -6px;
min-inline-size: 18px;
block-size: 18px;
padding-inline: 5px;
border-radius: var(--r-full);
background: var(--bad-600);
color: var(--text-on-bad);
font-size: var(--text-2xs);
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px var(--surface);
font-variant-numeric: tabular-nums;
}
.with-indicator > .indicator-badge-dot {
min-inline-size: 9px;
inline-size: 9px;
block-size: 9px;
padding: 0;
inset-block-start: -1px;
inset-inline-end: -1px;
}
.with-indicator > .indicator-badge-brand { background: var(--brand-600); color: var(--text-on-brand); }
/* Live status line: dot plus label, the pattern used in status pages */
.status-line { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.status-line .indicator { position: relative; }
}
/* ==========================================================================
Deck — 23 Inputs, extended
========================================================================== */
@layer deck.components {
/* --- Floating label ------------------------------------------------------
No JavaScript. :placeholder-shown tells us whether the field is empty, so
the label lifts on focus or on content and never gets out of sync.
The input needs placeholder=" " for the selector to work.
---------------------------------------------------------------------- */
/* Two things about the markup that this file cannot enforce and that fail
silently when they are wrong:
1. The label must come AFTER the control. Every lift selector below is
`~ label`, and the general sibling combinator only looks forward.
Label first and it simply never moves.
2. The control needs placeholder=" " (one space). Without a placeholder
attribute :placeholder-shown never matches, so the label sits lifted
over an empty field.
FINDINGS 61: .float.is-invalid only colours the label. .field.is-invalid
in 06-forms.css also reddens the control's border; there is no equivalent
rule here, so the same class name does two different amounts of work
depending on which wrapper it is on. :user-invalid is unaffected -- it
matches the control directly through the 06-forms.css rule. */
.float {
position: relative;
display: flex;
flex-direction: column;
}
.float > :is(.input, .textarea, .select) {
padding-block: var(--space-5) var(--space-2);
min-block-size: var(--control-h-lg);
}
.float > .textarea { padding-block-start: var(--space-6); }
.float > label {
position: absolute;
inset-block-start: 0;
inset-inline-start: var(--space-3);
padding-inline: 2px;
block-size: var(--control-h-lg);
display: flex;
align-items: center;
color: var(--text-faint);
font-size: var(--text-base);
pointer-events: none;
transform-origin: inline-start center;
transition: translate var(--dur-2) var(--ease-out),
scale var(--dur-2) var(--ease-out),
color var(--dur-2) var(--ease-out);
}
.float:focus-within > label,
.float > .input:not(:placeholder-shown) ~ label,
.float > .textarea:not(:placeholder-shown) ~ label,
.float > .select ~ label {
translate: 0 calc(var(--control-h-lg) * -.28);
scale: .78;
color: var(--text-muted);
}
.float:focus-within > label { color: var(--brand); }
.float.is-invalid > label,
.float > :user-invalid ~ label { color: var(--bad-700); }
/* Outlined variant, where the label sits in a notch in the border */
.float-outline > label {
background: var(--surface);
block-size: auto;
inset-block-start: 50%;
translate: 0 -50%;
padding-inline: var(--space-1);
}
.float-outline:focus-within > label,
.float-outline > .input:not(:placeholder-shown) ~ label,
.float-outline > .textarea:not(:placeholder-shown) ~ label,
.float-outline > .select ~ label {
translate: 0 calc(var(--control-h-lg) * -.5 - 50%);
scale: .8;
}
.float-outline > :is(.input, .textarea, .select) { padding-block: var(--space-3); }
/* --- Number input --------------------------------------------------------
Native spinners are tiny and inconsistent across browsers. These are real
buttons that clear the touch target.
---------------------------------------------------------------------- */
.number {
display: flex;
align-items: stretch;
inline-size: 100%;
max-inline-size: var(--number-width, 11rem);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.number:focus-within { border-color: var(--focus); box-shadow: var(--ring); }
.number > input {
flex: 1 1 auto;
min-inline-size: 0;
border: 0;
outline: none;
background: none;
text-align: center;
font-variant-numeric: tabular-nums;
font-size: var(--text-base);
color: inherit;
padding-inline: var(--space-1);
}
@media (pointer: coarse) { .number > input { font-size: 16px; } }
.number > input::-webkit-outer-spin-button,
.number > input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.number > input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.number > button {
inline-size: var(--control-h);
min-block-size: var(--control-h);
display: grid;
place-items: center;
background: var(--surface-2);
color: var(--text-muted);
cursor: pointer;
flex: 0 0 auto;
user-select: none;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.number > button:hover { background: var(--surface-hover); color: var(--text); }
.number > button:active { background: var(--brand-soft); color: var(--brand-soft-text); }
.number > button[disabled] { opacity: .4; pointer-events: none; }
.number > button:first-child { border-inline-end: 1px solid var(--line); }
.number > button:last-child { border-inline-start: 1px solid var(--line); }
.number-unit {
display: grid;
place-items: center;
padding-inline: var(--space-3);
background: var(--surface-2);
border-inline-start: 1px solid var(--line);
font-size: var(--text-sm);
color: var(--text-muted);
white-space: nowrap;
}
.number-sm { --number-width: 8.5rem; }
.number-sm > button { inline-size: var(--control-h-sm); min-block-size: var(--control-h-sm); }
/* --- Phone input ---------------------------------------------------------
Country select welded to the number. The number stays LTR even in an RTL
document, because a phone number always reads left to right.
---------------------------------------------------------------------- */
.phone {
display: flex;
align-items: stretch;
inline-size: 100%;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
box-shadow: var(--shadow-1);
overflow: hidden;
}
.phone:focus-within { border-color: var(--focus); box-shadow: var(--ring); }
.phone > .phone-country {
display: flex;
align-items: center;
gap: var(--space-2);
padding-inline: var(--space-3);
background: var(--surface-2);
border-inline-end: 1px solid var(--line);
cursor: pointer;
font-size: var(--text-sm);
color: var(--text-muted);
white-space: nowrap;
flex: 0 0 auto;
}
.phone > .phone-country:hover { background: var(--surface-hover); }
.phone > .phone-country select {
appearance: none;
border: 0;
background: none;
outline: none;
font: inherit;
color: inherit;
cursor: pointer;
max-inline-size: 4.5rem;
}
.phone-flag { font-size: 1.1em; line-height: 1; }
.phone-code { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 560; }
.phone > input {
flex: 1 1 auto;
min-inline-size: 0;
border: 0;
outline: none;
background: none;
padding: var(--space-2) var(--space-3);
font-size: var(--text-base);
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
color: inherit;
direction: ltr;
unicode-bidi: isolate;
text-align: start;
}
@media (pointer: coarse) { .phone > input { font-size: 16px; } }
.phone.is-valid { border-color: color-mix(in oklab, var(--good-500) 55%, transparent); }
.phone-status { display: grid; place-items: center; padding-inline: var(--space-3); flex: 0 0 auto; }
/* --- Rating --------------------------------------------------------------
Radio inputs underneath, so it posts a real value and works with the
keyboard. Reversed flex order makes the CSS-only hover fill work.
---------------------------------------------------------------------- */
/* The inputs are written HIGHEST value first -- 5, 4, 3, 2, 1 -- and
row-reverse draws them 1 to 5. That is not a quirk, it is the whole
mechanism: to light a star and everything below it, the selector has to
reach forward from the chosen one, and CSS has no previous-sibling
combinator. Reversing the row turns "everything below" into "everything
after".
Get the order wrong and it fails recognisably: the stars fill from the
wrong end and the posted value is the mirror of the one clicked.
:focus-visible + label uses the ADJACENT sibling, so each label must come
immediately after its own input. */
.rating {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
gap: 2px;
}
.rating > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.rating > label {
inline-size: var(--star, 26px);
block-size: var(--star, 26px);
display: grid;
place-items: center;
color: var(--ink-300);
cursor: pointer;
transition: color var(--dur-1) var(--ease-out), scale var(--dur-1) var(--ease-spring);
}
.rating > label .icon { inline-size: 100%; block-size: 100%; fill: currentColor; stroke: none; }
.rating > label:hover { scale: 1.14; }
/* the checked star and everything visually before it (after it in the DOM) */
.rating > input:checked ~ label,
.rating > label:hover,
.rating > label:hover ~ label {
color: var(--accent-500);
}
.rating > input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-xs); }
.rating-sm { --star: 18px; }
.rating-lg { --star: 36px; }
/* Read-only display: a fill percentage rather than whole stars */
.rating-static {
display: inline-flex;
gap: 2px;
color: var(--ink-300);
position: relative;
}
.rating-static > .rating-fill {
position: absolute;
inset-block: 0;
inset-inline-start: 0;
inline-size: calc(var(--value) * 1%);
overflow: hidden;
display: flex;
gap: 2px;
color: var(--accent-500);
white-space: nowrap;
}
.rating-static .icon { fill: currentColor; stroke: none; inline-size: var(--star, 18px); block-size: var(--star, 18px); flex: 0 0 auto; }
/* --- Range selector (two handles) ---------------------------------------
Two stacked native range inputs. Real inputs mean real keyboard support
and a real form post; the track between them is drawn from --lo and --hi.
---------------------------------------------------------------------- */
.range-pair {
position: relative;
display: grid;
block-size: var(--tap);
align-items: center;
}
.range-pair::before {
content: "";
grid-area: 1 / 1;
block-size: 6px;
border-radius: var(--r-full);
background: var(--ink-200);
}
.range-pair::after {
content: "";
grid-area: 1 / 1;
block-size: 6px;
border-radius: var(--r-full);
background: var(--brand-500);
margin-inline-start: calc(var(--lo, 0) * 1%);
inline-size: calc((var(--hi, 100) - var(--lo, 0)) * 1%);
}
.range-pair > input[type="range"] {
grid-area: 1 / 1;
inline-size: 100%;
background: none;
appearance: none;
block-size: var(--tap);
pointer-events: none;
margin: 0;
}
.range-pair > input[type="range"]::-webkit-slider-runnable-track { background: transparent; block-size: 6px; }
.range-pair > input[type="range"]::-moz-range-track { background: transparent; block-size: 6px; }
.range-pair > input[type="range"]::-webkit-slider-thumb {
appearance: none;
pointer-events: auto;
margin-block-start: -8px;
inline-size: 22px;
block-size: 22px;
border-radius: var(--r-full);
background: var(--brand-600);
border: 3px solid var(--ink-0);
box-shadow: var(--shadow-2);
cursor: grab;
}
.range-pair > input[type="range"]::-moz-range-thumb {
pointer-events: auto;
inline-size: 22px;
block-size: 22px;
border-radius: var(--r-full);
background: var(--brand-600);
border: 3px solid var(--ink-0);
box-shadow: var(--shadow-2);
cursor: grab;
}
.range-pair > input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The current value of a slider. Put it on an , which is an
implicit live region, so the value is announced as the slider moves. */
.range-readout {
display: flex;
justify-content: space-between;
font-size: var(--text-sm);
font-variant-numeric: tabular-nums;
color: var(--text-muted);
}
/* Ticks under a single or paired range */
.range-ticks {
display: flex;
justify-content: space-between;
font-size: var(--text-2xs);
color: var(--text-faint);
font-variant-numeric: tabular-nums;
padding-inline: 11px;
}
/* --- Copy to clipboard ----------------------------------------------------
The behaviour hangs off [data-deck-copy], not off .copy-btn. The class is
the look and nothing else, so a button with the class and no attribute
looks exactly right and does nothing at all -- the single most common way
to get this component wrong.
Whether a successful copy raises a toast depends on what is inside the
button: a .copy-done element swaps in place and no toast fires; without
one, deck-extras.js toasts instead. .copy-inline never toasts.
---------------------------------------------------------------------- */
.copy {
display: flex;
align-items: stretch;
inline-size: 100%;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface-2);
overflow: hidden;
}
.copy > code, .copy > .copy-value {
flex: 1 1 auto;
min-inline-size: 0;
padding: var(--space-2) var(--space-3);
background: none;
border: 0;
border-radius: 0;
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--text);
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
direction: ltr;
unicode-bidi: isolate;
display: flex;
align-items: center;
}
.copy > :is(code, .copy-value)::-webkit-scrollbar { display: none; }
.copy-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding-inline: var(--space-3);
min-inline-size: var(--tap);
background: var(--surface);
border-inline-start: 1px solid var(--line);
color: var(--text-muted);
font-size: var(--text-sm);
font-weight: 560;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.copy-btn:hover { background: var(--surface-hover); color: var(--text); }
.copy-btn.is-copied { color: var(--good-700); background: var(--good-100); }
.copy-btn .copy-done { display: none; }
.copy-btn.is-copied .copy-done { display: inline-flex; }
.copy-btn.is-copied .copy-idle { display: none; }
/* Inline icon-only variant, for an order number or an API key in a table */
.copy-inline {
display: inline-flex;
align-items: center;
gap: var(--space-1);
color: var(--text-faint);
cursor: pointer;
border-radius: var(--r-xs);
padding: 2px;
}
.copy-inline:hover { color: var(--brand); background: var(--surface-hover); }
.copy-inline.is-copied { color: var(--good-700); }
/* --- WYSIWYG editor -------------------------------------------------------
A toolbar over a contenteditable region. Deck styles the chrome; deck.js
wires the commands. The content area inherits .prose, so what you type
looks the way it will look when it is published.
---------------------------------------------------------------------- */
.editor {
display: flex;
flex-direction: column;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
background: var(--surface);
box-shadow: var(--shadow-1);
overflow: clip;
}
.editor:focus-within { border-color: var(--focus); box-shadow: var(--ring); }
/* The tool row. Pressed state is [aria-pressed="true"], which deck-extras.js
rewrites from queryCommandState after every command and selection change,
so the toolbar reflects the caret rather than the last button pressed. */
.editor-toolbar {
display: flex;
align-items: center;
gap: 2px;
flex-wrap: wrap;
padding: var(--space-1);
background: var(--surface-2);
border-block-end: 1px solid var(--line);
position: sticky;
inset-block-start: 0;
z-index: 1;
}
.editor-tool {
inline-size: 32px;
block-size: 32px;
display: grid;
place-items: center;
border-radius: var(--r-xs);
color: var(--text-muted);
cursor: pointer;
font-size: var(--text-sm);
font-weight: 620;
transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.editor-tool:hover { background: var(--surface-hover); color: var(--text); }
.editor-tool[aria-pressed="true"] { background: var(--brand-soft); color: var(--brand-soft-text); }
.editor-tool-wide { inline-size: auto; padding-inline: var(--space-2); }
.editor-sep { inline-size: 1px; block-size: 20px; background: var(--line); margin-inline: var(--space-1); }
.editor-select {
block-size: 32px;
padding-inline: var(--space-2);
border: 0;
border-radius: var(--r-xs);
background: none;
font-size: var(--text-sm);
color: var(--text-muted);
cursor: pointer;
}
.editor-select:hover { background: var(--surface-hover); }
/* The editable region. Its placeholder comes from data-placeholder through
:empty::before, so it needs no element and no script to hide it. */
.editor-content {
min-block-size: var(--editor-height, 12rem);
max-block-size: var(--editor-max, 30rem);
overflow-y: auto;
padding: var(--space-4);
outline: none;
line-height: var(--leading-normal);
}
.editor-content:empty::before {
content: attr(data-placeholder);
color: var(--text-faint);
pointer-events: none;
}
.editor-content > * + * { margin-block-start: var(--space-3); }
.editor-content :is(h1, h2, h3) { margin-block-start: var(--space-5); }
.editor-content :is(ul, ol) { padding-inline-start: var(--space-6); }
.editor-content ul { list-style: disc; }
.editor-content ol { list-style: decimal; }
.editor-content blockquote {
border-inline-start: 3px solid var(--brand-300);
padding-inline-start: var(--space-4);
color: var(--text-muted);
}
.editor-content a { color: var(--brand); }
.editor-content img { max-inline-size: 100%; border-radius: var(--r-sm); }
.editor-footer {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-block-start: 1px solid var(--line);
background: var(--surface-2);
font-size: var(--text-xs);
color: var(--text-faint);
}
/* The character count. .is-over turns it red past data-limit — a soft
limit, since silently refusing keystrokes reads as a broken keyboard. The
server has to enforce it, and role="status" makes it audible. */
.editor-count { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.editor-count.is-over { color: var(--bad-700); font-weight: 620; }
}
/* ==========================================================================
Deck — 24 Media and messaging
========================================================================== */
@layer deck.components {
/* --- Video ---------------------------------------------------------------
A responsive frame for a native video or an embed, plus styling for the
native controls where the browser allows it.
---------------------------------------------------------------------- */
.video {
position: relative;
inline-size: 100%;
aspect-ratio: var(--ratio, 16 / 9);
background: var(--ink-950);
border-radius: var(--r-md);
overflow: clip;
isolation: isolate;
}
.video > :is(video, iframe, embed, object) {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
border: 0;
object-fit: contain;
}
.video-cover > video { object-fit: cover; }
.video-square { --ratio: 1; }
.video-portrait { --ratio: 9 / 16; }
.video-wide { --ratio: 21 / 9; }
.video video::-webkit-media-controls-panel { background-image: none; }
.video video { accent-color: var(--brand-500); }
/* Poster overlay with a play button, for a click-to-load embed */
.video-poster {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-items: center;
cursor: pointer;
border: 0;
padding: 0;
background: none;
}
.video-poster img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.video-poster::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, oklch(12% .02 var(--hue-neutral) / .55), transparent 60%);
}
.video-play {
position: relative;
z-index: 1;
inline-size: 64px;
block-size: 64px;
border-radius: var(--r-full);
display: grid;
place-items: center;
background: color-mix(in oklab, var(--surface) 90%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: var(--text);
box-shadow: var(--shadow-3);
transition: scale var(--dur-2) var(--ease-spring), background-color var(--dur-1) var(--ease-out);
}
.video-poster:hover .video-play { scale: 1.08; background: var(--surface); }
.video-meta {
position: absolute;
inset-block-end: var(--space-3);
inset-inline-start: var(--space-3);
z-index: 2;
display: flex;
gap: var(--space-2);
color: oklch(98% 0 0);
font-size: var(--text-xs);
text-shadow: 0 1px 3px oklch(0% 0 0 / .6);
}
.video-duration {
padding: 2px 6px;
border-radius: var(--r-xs);
background: oklch(12% 0 0 / .72);
font-variant-numeric: tabular-nums;
}
/* --- Masonry gallery -----------------------------------------------------
Two implementations. Columns is universal and good for photos where the
reading order down each column is fine. Grid masonry is the real thing
and preserves row order; it is used automatically where supported.
---------------------------------------------------------------------- */
.masonry {
columns: var(--cols, 1);
column-gap: var(--gap, var(--space-3));
}
@media (min-width: 30rem) { .masonry { --cols: 2; } }
@media (min-width: 48rem) { .masonry { --cols: 3; } }
@media (min-width: 72rem) { .masonry { --cols: 4; } }
.masonry-2 { --cols: 2; }
.masonry-3 { --cols: 3; }
.masonry > * {
break-inside: avoid;
margin-block-end: var(--gap, var(--space-3));
border-radius: var(--r-md);
overflow: clip;
display: block;
}
.masonry img { inline-size: 100%; block-size: auto; display: block; }
@supports (grid-template-rows: masonry) {
.masonry {
columns: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
grid-template-rows: masonry;
gap: var(--gap, var(--space-3));
}
.masonry > * { margin-block-end: 0; }
}
/* A simple gallery grid, when equal tiles are wanted instead */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
gap: var(--space-2);
}
.gallery > * {
aspect-ratio: 1;
border-radius: var(--r-sm);
overflow: clip;
position: relative;
}
.gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--dur-3) var(--ease-out); }
.gallery a:hover img { scale: 1.05; }
/* Let one tile take a bigger cell */
.gallery .span-2 { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
.gallery .span-wide { grid-column: span 2; aspect-ratio: 2; }
/* --- Lazy loading --------------------------------------------------------
A placeholder that holds the space so nothing shifts, and fades the image
in once it decodes. Set the aspect ratio on the frame and the layout is
stable before a byte arrives.
---------------------------------------------------------------------- */
.lazy {
position: relative;
display: block;
background: var(--bg-sunken);
overflow: clip;
aspect-ratio: var(--ratio, 3 / 2);
}
.lazy > img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0;
transition: opacity var(--dur-3) var(--ease-out);
}
.lazy > img.is-loaded, .lazy > img[data-loaded] { opacity: 1; }
/* Two things about this shimmer are recorded in FINDINGS.md:
67: it runs the same dk-shimmer keyframes as .skeleton, for the same
purpose, but .lazy::after is NOT in 02-reset.css's reduced-motion
exemption list -- so it freezes where .skeleton slows to 2.4s. The
durations differ too (1.6s here, 1.4s there). One of the two is wrong.
66: deck-extras.js adds .is-error to the wrapper when an image fails to
load, and nothing in src/ styles that class. So the shimmer carries on
forever and a broken image is indistinguishable from a loading one. */
.lazy::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 20%,
color-mix(in oklab, var(--ink-300) 40%, transparent) 45%, transparent 70%);
background-size: 250% 100%;
background-repeat: no-repeat;
animation: dk-shimmer 1.6s var(--ease-in-out) infinite;
pointer-events: none;
}
.lazy:has(img.is-loaded)::after, .lazy:has(img[data-loaded])::after { display: none; }
/* A blurred low-res preview underneath, if you have one */
.lazy-blur { background-size: cover; background-position: center; }
.lazy-blur::before {
content: "";
position: absolute;
inset: -8px;
background: inherit;
filter: blur(14px);
transition: opacity var(--dur-3) var(--ease-out);
}
.lazy-blur:has(img.is-loaded)::before { opacity: 0; }
/* Generic content placeholder while a region streams in */
.lazy-block {
display: grid;
place-items: center;
min-block-size: 8rem;
border: 1px dashed var(--line);
border-radius: var(--r-md);
color: var(--text-faint);
gap: var(--space-2);
}
/* --- Chat bubbles --------------------------------------------------------
Conversation view. Consecutive messages from one side group together and
only the last one in a run gets the tail.
---------------------------------------------------------------------- */
.chat {
display: flex;
flex-direction: column;
gap: var(--space-1);
padding: var(--space-4);
overflow-y: auto;
overscroll-behavior: contain;
}
/* A centred date pill between days. Styling, not structure — a screen
reader hears ordinary text. */
.chat-day {
align-self: center;
margin-block: var(--space-4) var(--space-2);
padding: var(--space-1) var(--space-3);
border-radius: var(--r-full);
background: var(--surface-2);
color: var(--text-faint);
font-size: var(--text-xs);
font-weight: 560;
}
/* One message row. .msg-out flips it to the other edge and reverses the row
so the avatar swaps sides. The incoming/outgoing distinction is position
and colour only, so name the sender in text for anyone not seeing it. */
.msg {
display: flex;
gap: var(--space-2);
align-items: flex-end;
max-inline-size: min(80%, 34rem);
align-self: flex-start;
}
.msg-out { align-self: flex-end; flex-direction: row-reverse; }
/* The message body. Its corner radii are logical, which is what lets the
grouping flatten the correct side in either writing direction. */
.bubble {
position: relative;
padding: var(--space-2) var(--space-3);
border-radius: var(--r-md);
background: var(--surface-2);
border: 1px solid var(--line);
font-size: var(--text-sm);
line-height: 1.45;
overflow-wrap: anywhere;
border-end-start-radius: var(--r-xs);
}
.msg-out .bubble {
background: var(--brand-600);
color: var(--text-on-brand);
border-color: transparent;
border-end-start-radius: var(--r-md);
border-end-end-radius: var(--r-xs);
}
/* Grouping: only the last bubble of a run keeps its tail */
.msg:not(:last-of-type) + .msg .bubble { border-start-start-radius: var(--r-xs); }
.msg-out:not(:last-of-type) + .msg-out .bubble { border-start-end-radius: var(--r-xs); }
.bubble-meta {
display: flex;
align-items: center;
gap: var(--space-1);
margin-block-start: 2px;
font-size: var(--text-2xs);
opacity: .7;
justify-content: flex-end;
font-variant-numeric: tabular-nums;
}
.msg:not(.msg-out) .bubble-meta { justify-content: flex-start; }
.bubble-name { font-weight: 620; font-size: var(--text-xs); margin-block-end: 2px; color: var(--brand); }
.msg-out .bubble-name { color: inherit; }
.bubble-attachment {
margin: calc(var(--space-2) * -1) calc(var(--space-3) * -1) var(--space-2);
border-start-start-radius: var(--r-md);
border-start-end-radius: var(--r-md);
overflow: clip;
}
.bubble-attachment img { inline-size: 100%; display: block; }
.msg .avatar { --size: 28px; align-self: flex-end; margin-block-end: 2px; }
.msg:not(:last-of-type) + .msg .avatar { visibility: hidden; }
.bubble-system {
align-self: center;
background: none;
border: 0;
color: var(--text-faint);
font-size: var(--text-xs);
text-align: center;
max-inline-size: 42ch;
}
/* Typing indicator */
.bubble-typing { display: inline-flex; gap: 4px; padding-block: var(--space-3); }
.bubble-typing > span {
inline-size: 6px;
block-size: 6px;
border-radius: var(--r-full);
background: var(--text-faint);
}
@media (prefers-reduced-motion: no-preference) {
.bubble-typing > span { animation: dk-typing 1.2s var(--ease-in-out) infinite; }
.bubble-typing > span:nth-child(2) { animation-delay: .16s; }
.bubble-typing > span:nth-child(3) { animation-delay: .32s; }
@keyframes dk-typing {
0%, 60%, 100% { translate: 0 0; opacity: .45; }
30% { translate: 0 -4px; opacity: 1; }
}
}
/* Composer pinned to the bottom */
.chat-composer {
display: flex;
align-items: flex-end;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
padding-block-end: max(var(--space-3), env(safe-area-inset-bottom));
border-block-start: 1px solid var(--line);
background: var(--surface);
}
.chat-composer .textarea {
min-block-size: var(--control-h);
max-block-size: 8rem;
field-sizing: content;
border-radius: var(--r-lg);
resize: none;
}
/* --- QR code -------------------------------------------------------------
deck.js renders the modules into this frame. Kept square, with a quiet
zone, so it stays scannable at any size.
---------------------------------------------------------------------- */
.qr {
display: inline-grid;
place-items: center;
padding: var(--qr-quiet, 12px);
background: var(--qr-bg, #fff);
border-radius: var(--r-sm);
border: 1px solid var(--line);
inline-size: fit-content;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.qr svg { display: block; inline-size: var(--qr-size, 160px); block-size: var(--qr-size, 160px); }
.qr svg rect { fill: var(--qr-fg, #000); shape-rendering: crispEdges; }
.qr-lg { --qr-size: 240px; }
.qr-sm { --qr-size: 104px; }
/* A logo punched out of the middle. Only safe at error correction Q or H. */
.qr-logo {
position: relative;
}
.qr-logo > .qr-logo-mark {
position: absolute;
inset: 50%;
translate: -50% -50%;
inline-size: 22%;
block-size: 22%;
display: grid;
place-items: center;
background: var(--qr-bg, #fff);
border-radius: var(--r-xs);
padding: 4px;
}
.qr-caption {
margin-block-start: var(--space-2);
font-size: var(--text-xs);
color: var(--text-muted);
text-align: center;
max-inline-size: var(--qr-size, 160px);
overflow-wrap: anywhere;
}
}
@layer deck.print {
@media print {
/* A QR code is often the whole point of printing the page */
.qr { border: 0; break-inside: avoid; }
.video, .chat-composer, .carousel-arrow, .carousel-dots,
.speed-dial, .drawer, .mega, .banner { display: none !important; }
.masonry { columns: 2; }
.chat { overflow: visible; max-block-size: none; }
.msg { break-inside: avoid; }
.bubble { border: 1px solid #bbb !important; background: #fff !important; color: #000 !important; }
.msg-out .bubble { background: #f2f2f2 !important; }
.lazy::after { display: none !important; }
.editor-toolbar, .editor-footer { display: none !important; }
.editor-content { max-block-size: none !important; overflow: visible !important; }
}
}
/* ==========================================================================
Deck — 25 Anchor positioning
Every floating thing in Deck was positioned by hand with
getBoundingClientRect, which does not flip when it hits the bottom of the
window, does not shift back inside when it hits an edge, and does not
follow its anchor inside a scrolling container. Those are exactly the
problems Floating UI solves, and they are also exactly what CSS anchor
positioning solves natively — with no JavaScript, on the compositor, and
without a resize or scroll listener.
So Deck uses anchor positioning where the browser has it, and hands off to
Floating UI where it does not, if you have loaded it. Neither is required.
========================================================================== */
@layer deck.components {
@supports (anchor-name: --a) {
/* --- Naming an anchor --------------------------------------------------
Put .anchor on the trigger and --anchor on both trigger and panel.
Each pair needs a unique name, so generate it server-side in Keel:
---------------------------------------------------------------------- */
.anchor { anchor-name: var(--anchor); }
/* --- Menus and mega menus ---------------------------------------------- */
.menu, .mega, .datepicker {
position-anchor: var(--anchor);
position-area: block-end span-inline-end;
position-try-fallbacks:
block-end span-inline-start,
block-start span-inline-end,
block-start span-inline-start,
flip-block, flip-inline;
position-try-order: most-block-size;
margin-block: var(--space-2);
/* stay inside the viewport no matter which fallback wins */
max-block-size: calc(100dvh - var(--space-8));
max-inline-size: calc(100vw - var(--space-6));
inset: auto;
}
.menu { min-inline-size: max(12rem, anchor-size(inline)); }
.mega {
position-area: block-end;
justify-self: anchor-center;
}
/* A dropdown that should match the width of the field it belongs to */
.menu-match { inline-size: anchor-size(inline); min-inline-size: 0; }
/* --- Combobox list ------------------------------------------------------
The listbox is a sibling today, positioned with absolute. With anchor
positioning it can go in the top layer and escape overflow:hidden
ancestors, which is the bug that bites every combobox inside a modal.
---------------------------------------------------------------------- */
.combo-control { anchor-name: var(--anchor, --combo); }
.combo-list {
position-anchor: var(--anchor, --combo);
position-area: block-end;
position-try-fallbacks: flip-block;
inline-size: anchor-size(inline);
inset: auto;
margin-block: 4px;
}
.combo-list.is-above { inset: auto; }
/* --- Tooltips -----------------------------------------------------------
The ::after tooltip could never flip. This one can, and it can carry a
real arrow that stays pointed at the anchor.
---------------------------------------------------------------------- */
.tip {
position: fixed;
position-anchor: var(--anchor);
position-area: block-start;
position-try-fallbacks: flip-block, flip-inline;
justify-self: anchor-center;
margin: var(--space-2);
inline-size: max-content;
max-inline-size: 16rem;
padding: var(--space-2) var(--space-3);
border: 0;
border-radius: var(--r-xs);
background: var(--ink-900);
color: var(--ink-50);
font-size: var(--text-xs);
line-height: 1.4;
box-shadow: var(--shadow-3);
opacity: 0;
transition: opacity var(--dur-2) var(--ease-out),
overlay var(--dur-2) allow-discrete,
display var(--dur-2) allow-discrete;
}
.tip:popover-open { opacity: 1; }
@starting-style { .tip:popover-open { opacity: 0; } }
.tip::backdrop { background: transparent; }
/* The arrow on a .tip. background: inherit takes the tip's colour, and
justify-self: anchor-center keeps it pointed at the trigger whichever way
the tip has flipped. */
.tip-arrow {
position: absolute;
inline-size: 8px;
block-size: 8px;
rotate: 45deg;
background: inherit;
position-anchor: var(--anchor);
justify-self: anchor-center;
}
/* --- Popover card -------------------------------------------------------
A richer tooltip: a heading, body copy, and actions. Used for the
"what does this labor code mean" pattern.
---------------------------------------------------------------------- */
.pop {
position: fixed;
position-anchor: var(--anchor);
position-area: block-end;
position-try-fallbacks: flip-block, flip-inline, block-start span-inline-start;
justify-self: anchor-center;
margin: var(--space-2);
inline-size: min(20rem, calc(100vw - var(--space-6)));
padding: var(--space-4);
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-4);
opacity: 0;
translate: 0 -4px;
transition: opacity var(--dur-2) var(--ease-out),
translate var(--dur-2) var(--ease-out),
overlay var(--dur-2) allow-discrete,
display var(--dur-2) allow-discrete;
}
.pop:popover-open { opacity: 1; translate: 0; }
@starting-style { .pop:popover-open { opacity: 0; translate: 0 -4px; } }
.pop::backdrop { background: transparent; }
/* The heading inside a popover card. */
.pop-title { font-weight: 620; margin-block-end: var(--space-1); }
/* The explanatory text inside a popover card. */
.pop-body { font-size: var(--text-sm); color: var(--text-muted); }
/* The action row at the bottom of a popover card. A button here can close
the panel with popovertargetaction="hide" and no script. */
.pop-actions { display: flex; gap: var(--space-2); margin-block-start: var(--space-3); }
/* --- Hide the anchored element when its anchor scrolls out of view ------ */
.menu, .mega, .tip, .pop, .datepicker, .combo-list {
position-visibility: anchors-visible;
}
}
/* --- Floating UI handoff --------------------------------------------------
Where anchor positioning is missing, deck-adapters.js uses Floating UI if
it is on the page and falls back to Deck's own placement if it is not.
These rules just get out of the way so the adapter can set inset.
---------------------------------------------------------------------- */
@supports not (anchor-name: --a) {
.tip, .pop {
position: fixed;
inset: auto;
margin: 0;
inline-size: max-content;
max-inline-size: 16rem;
border: 0;
border-radius: var(--r-xs);
background: var(--ink-900);
color: var(--ink-50);
font-size: var(--text-xs);
padding: var(--space-2) var(--space-3);
box-shadow: var(--shadow-3);
opacity: 0;
transition: opacity var(--dur-2) var(--ease-out),
overlay var(--dur-2) allow-discrete,
display var(--dur-2) allow-discrete;
}
.pop {
inline-size: min(20rem, calc(100vw - var(--space-6)));
max-inline-size: none;
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
border-radius: var(--r-md);
box-shadow: var(--shadow-4);
padding: var(--space-4);
}
.tip:popover-open, .pop:popover-open { opacity: 1; }
@starting-style { .tip:popover-open, .pop:popover-open { opacity: 0; } }
.tip::backdrop, .pop::backdrop { background: transparent; }
.tip-arrow { position: absolute; inline-size: 8px; block-size: 8px; rotate: 45deg; background: inherit; }
}
}
/* ==========================================================================
Deck — 26 Performance and drag
The usual answer to a ten thousand row grid is a virtualization library:
measure the viewport, render a window of rows, absolutely position a
spacer, and reconcile on every scroll frame. It works, it costs about five
kilobytes, and it breaks find-in-page, printing, accessibility tree order,
and text selection across the boundary.
content-visibility does the same job in the engine. Off-screen subtrees are
skipped during layout, style, paint, and hit testing, but they stay in the
DOM, so Ctrl+F still finds them, the print stylesheet still prints them,
and a screen reader still reads them. It needs one line of CSS and no
JavaScript at all.
========================================================================== */
@layer deck.components {
/* --- Virtualized rows ----------------------------------------------------
contain-intrinsic-size is the placeholder height for a skipped row. Get it
roughly right and the scrollbar is stable; the `auto` keyword makes the
browser remember the real height once a row has been rendered once.
---------------------------------------------------------------------- */
.dg-virtual tbody tr {
content-visibility: auto;
contain-intrinsic-size: auto var(--dg-row-h, 44px);
}
.dg-virtual.dg-compact tbody tr { contain-intrinsic-size: auto 34px; }
.dg-virtual.dg-comfy tbody tr { contain-intrinsic-size: auto 56px; }
/* Skips layout, style and paint for offscreen rows with
content-visibility, using contain-intrinsic-size as the placeholder
height. One class, no windowing library. If your rows are not 56px,
override the intrinsic size or the scrollbar will jump. */
.list-virtual > .list-row {
content-visibility: auto;
contain-intrinsic-size: auto 56px;
}
/* Any long stack of cards: an activity feed, a chat log, search results */
.virtual > * {
content-visibility: auto;
contain-intrinsic-size: auto var(--item-size, 120px);
}
.virtual-sm > * { --item-size: 64px; }
.virtual-lg > * { --item-size: 220px; }
/* Whole sections below the fold. Cheap and safe on any page. */
.defer {
content-visibility: auto;
contain-intrinsic-size: auto 600px;
}
/* Printing must render everything, or half the report comes out blank */
@media print {
.dg-virtual tbody tr, .list-virtual > .list-row, .virtual > *, .defer {
content-visibility: visible !important;
contain-intrinsic-size: none !important;
}
}
/* --- Containment ---------------------------------------------------------
Tell the engine that a component's layout cannot affect anything outside
it. On a dashboard with twenty cards this is the difference between one
layout pass and twenty.
---------------------------------------------------------------------- */
.contain { contain: layout style; }
.contain-paint { contain: layout style paint; }
.card, .panel, .list, .dg-wrap, .chart { contain: layout style; }
/* --- Drag and drop -------------------------------------------------------
Deck styles the states; deck-adapters.js drives them with SortableJS when
it is present, or with the native HTML drag and drop API when it is not.
The class names are SortableJS's defaults, so no configuration is needed.
---------------------------------------------------------------------- */
.sortable { position: relative; }
.sortable [draggable="true"], .drag-handle { cursor: grab; touch-action: none; }
.sortable [draggable="true"]:active, .drag-handle:active { cursor: grabbing; }
.drag-handle {
display: grid;
place-items: center;
inline-size: 28px;
min-block-size: var(--tap);
color: var(--text-faint);
flex: 0 0 auto;
opacity: 0;
transition: opacity var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
:is(.list-row, .dg tbody tr, .kanban-card):is(:hover, :focus-within) .drag-handle { opacity: 1; }
.drag-handle:hover { color: var(--text); }
@media (pointer: coarse) { .drag-handle { opacity: 1; } }
/* The item being dragged, following the pointer */
.sortable-drag {
opacity: 1 !important;
box-shadow: var(--shadow-4);
rotate: 1.5deg;
scale: 1.02;
cursor: grabbing;
}
/* The gap left where the item will land */
.sortable-ghost {
opacity: .4;
background: var(--brand-soft) !important;
outline: 2px dashed var(--brand-400);
outline-offset: -2px;
}
.sortable-ghost > * { visibility: hidden; }
.sortable-chosen { background: var(--surface-hover); }
.sortable-fallback { opacity: .9; }
/* A list that is accepting a drop */
.drop-target {
outline: 2px dashed var(--brand-400);
outline-offset: 3px;
border-radius: var(--r-md);
background: color-mix(in oklab, var(--brand-soft) 55%, transparent);
}
.drop-reject { outline-color: var(--bad-500); background: color-mix(in oklab, var(--bad-100) 55%, transparent); }
/* --- Kanban --------------------------------------------------------------
The obvious thing to build once you have drag and drop. An issue queue by
status is the same shape as a board.
---------------------------------------------------------------------- */
.kanban {
display: flex;
gap: var(--space-4);
overflow-x: auto;
overscroll-behavior-inline: contain;
padding-block-end: var(--space-3);
align-items: flex-start;
scroll-snap-type: x proximity;
}
/* One column: a fixed width with a viewport cap so a phone still shows a
sliver of the next, capped in height by --kanban-height. */
.kanban-col {
flex: 0 0 min(19rem, 82vw);
scroll-snap-align: start;
display: flex;
flex-direction: column;
max-block-size: var(--kanban-height, 70dvh);
background: var(--bg-sunken);
border: 1px solid var(--line);
border-radius: var(--r-md);
}
/* The column title and count, outside the scrolling area so they stay
visible while cards scroll. */
.kanban-head {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-block-end: 1px solid var(--line);
font-size: var(--text-sm);
font-weight: 620;
position: sticky;
inset-block-start: 0;
background: inherit;
border-start-start-radius: var(--r-md);
border-start-end-radius: var(--r-md);
z-index: 1;
}
.kanban-count {
margin-inline-start: auto;
font-size: var(--text-xs);
font-weight: 600;
color: var(--text-muted);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-full);
padding: 1px 7px;
font-variant-numeric: tabular-nums;
}
/* The scrolling card region, with a 5rem floor so an empty column is still
something you can drop onto. */
.kanban-body {
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--space-3);
display: flex;
flex-direction: column;
gap: var(--space-3);
min-block-size: 5rem;
}
/* One card. .kanban-card-title is styling, not a heading — if the card
opens something, make the title a link. */
.kanban-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-sm);
padding: var(--space-3);
box-shadow: var(--shadow-1);
display: flex;
flex-direction: column;
gap: var(--space-2);
content-visibility: auto;
contain-intrinsic-size: auto 110px;
}
.kanban-card:hover { box-shadow: var(--shadow-2); }
.kanban-card-title { font-size: var(--text-sm); font-weight: 580; }
.kanban-card-meta {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
color: var(--text-muted);
}
/* Shown in an empty column and hidden by :has(.kanban-card) as soon as one
arrives, so nothing has to remember to toggle it. */
.kanban-empty {
border: 1px dashed var(--line-strong);
border-radius: var(--r-sm);
padding: var(--space-5);
text-align: center;
color: var(--text-faint);
font-size: var(--text-sm);
}
.kanban-col:has(.kanban-card) .kanban-empty { display: none; }
/* --- Reorderable list ----------------------------------------------------- */
.reorder .list-row { user-select: none; }
.reorder .list-row.is-lifted {
box-shadow: var(--shadow-3);
background: var(--surface);
border-radius: var(--r-sm);
z-index: 2;
position: relative;
}
@media (prefers-reduced-motion: reduce) {
.sortable-drag { rotate: none; scale: 1; }
}
}
/* ==========================================================================
Deck — 15 Print
Real work still gets printed. Invoices, packing slips, purchase orders, and
reports all end up on paper or in a PDF, so this is a real stylesheet and
not an afterthought.
========================================================================== */
@layer deck.print {
@page {
size: letter;
margin: 16mm 14mm;
}
@page :first { margin-block-start: 12mm; }
@media print {
/* --- Force the light palette. Dark mode is a screen idea. -------------- */
:root {
color-scheme: light only;
--bg: #fff;
--bg-sunken: #fff;
--surface: #fff;
--surface-2: #fff;
--surface-hover: #fff;
--text: #000;
--text-muted: #333;
--text-faint: #555;
--line: #bbb;
--line-strong: #888;
--shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-4: none;
--shadow-inset: none;
}
html, body {
background: #fff !important;
color: #000 !important;
font-size: 10.5pt;
line-height: 1.4;
}
body { padding-block-end: 0 !important; }
* {
box-shadow: none !important;
text-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
animation: none !important;
transition: none !important;
}
/* Keep intentional fills — badges, status chips, chart series */
.badge, .chip, .chart-col, .chart-col-stack > span, .chart-bar-fill,
.chart-meter > span, .donut, .icon-tile, .avatar, .chart-heat > * {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* --- Chrome that should never print ------------------------------------ */
.tabbar, .fab, .speed-dial, .back-to-top, .toast-region, .skip-link, .theme-dock,
.navbar-links, .sidebar, .datepicker, .combo-list, .menu,
.dg-toolbar, .dg-resize, .sheet-grip, .no-print,
.pagination, .segmented, .tabs, .scroller::-webkit-scrollbar {
display: none !important;
}
/* Dialogs print only if they are actually open, and then as a block */
dialog:not([open]) { display: none !important; }
dialog[open] {
position: static !important;
display: block !important;
max-block-size: none !important;
inline-size: auto !important;
border: 0 !important;
}
dialog::backdrop { display: none !important; }
/* --- Layout ------------------------------------------------------------ */
.container, .container-sm, .container-md, .container-lg, .container-xl {
max-inline-size: none !important;
padding-inline: 0 !important;
}
.section { padding-block: 0 0 8mm !important; }
.split { display: block !important; }
.grid { display: block !important; }
.grid > * + * { margin-block-start: 4mm; }
.sticky-top, .sticky, .form-actions-sticky { position: static !important; }
/* --- Surfaces ---------------------------------------------------------- */
.card, .panel, .list, .table-wrap, .dg-wrap, .alert, .fieldset {
border: 1px solid #bbb !important;
border-radius: 0 !important;
background: #fff !important;
break-inside: avoid;
max-block-size: none !important;
overflow: visible !important;
}
.card-footer, .list-header, .dg thead th, .table thead th {
background: #f2f2f2 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* --- Type -------------------------------------------------------------- */
h1, .h1 { font-size: 20pt; }
h2, .h2 { font-size: 15pt; }
h3, .h3 { font-size: 12.5pt; }
h4, .h4, h5, .h5, h6, .h6 { font-size: 11pt; }
.display { font-size: 22pt; }
.lede { font-size: 11pt; color: #333 !important; }
h1, h2, h3, h4, h5, h6 { break-after: avoid; page-break-after: avoid; }
p, blockquote, li, figure, .stat, .timeline-item { break-inside: avoid; }
.prose { max-inline-size: none; }
/* Show where a link actually goes, but not for anchors or JS handles */
a { color: #000 !important; text-decoration: underline; }
a[href^="http"]::after {
content: " (" attr(href) ")";
font-size: 8.5pt;
color: #555;
word-break: break-all;
}
a[href^="#"]::after, a[href^="javascript:"]::after, .btn::after, .no-print-url::after { content: ""; }
abbr[title]::after { content: " (" attr(title) ")"; font-size: 8.5pt; }
/* --- Tables ------------------------------------------------------------ */
.table, .dg { inline-size: 100% !important; font-size: 9.5pt; }
.table thead, .dg thead { display: table-header-group; }
.dg tfoot, .table tfoot { display: table-footer-group; }
.table tr, .dg tr { break-inside: avoid; page-break-inside: avoid; }
.dg :is(th, td) {
position: static !important;
block-size: auto !important;
padding: 4pt 6pt !important;
white-space: normal !important;
clip-path: none !important;
border-block-end: 1px solid #ddd !important;
}
.dg-wrap { max-block-size: none !important; overflow: visible !important; }
/* The mobile card fallbacks are a screen behaviour, not a paper one */
.table-stack thead, .dg-cards thead {
position: static !important;
inline-size: auto !important;
block-size: auto !important;
clip-path: none !important;
display: table-header-group !important;
overflow: visible !important;
}
.table-stack, .dg-cards { display: table !important; }
.table-stack tbody, .dg-cards tbody { display: table-row-group !important; }
.table-stack tr, .dg-cards tr { display: table-row !important; margin: 0 !important; border-radius: 0 !important; }
.table-stack td, .dg-cards td { display: table-cell !important; text-align: start !important; }
.table-stack td::before, .dg-cards td::before { content: none !important; }
/* --- Forms ------------------------------------------------------------- */
.input, .textarea, .select, .combo-control {
border: 1px solid #999 !important;
background: #fff !important;
min-block-size: auto !important;
}
.textarea { max-block-size: none !important; block-size: auto !important; }
.select { background-image: none !important; padding-inline-end: var(--space-3) !important; }
.btn, .form-actions { display: none !important; }
.btn.print-keep { display: inline-flex !important; border: 1px solid #999 !important; }
/* Checkboxes print as boxes with a mark, not as filled squares */
.check input[type="checkbox"], .check input[type="radio"] {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
border: 1px solid #000 !important;
background: #fff !important;
}
.check input:checked { background: #000 !important; border-color: #000 !important; }
.switch input { border: 1px solid #000 !important; }
/* --- Charts ------------------------------------------------------------ */
.chart, .chart-columns, .chart-svg { break-inside: avoid; }
.chart-col[data-value]::before { display: none !important; }
.chart-columns { background-image: none !important; border-block-end: 1px solid #999; }
/* --- Page break helpers ------------------------------------------------ */
.page-break { break-before: page; page-break-before: always; }
.page-break-after { break-after: page; page-break-after: always; }
.keep-together { break-inside: avoid; page-break-inside: avoid; }
.print-only { display: revert !important; }
/* Repeat a header on every page of a long report */
.print-header { position: fixed; inset-block-start: 0; inset-inline: 0; }
.print-footer { position: fixed; inset-block-end: 0; inset-inline: 0; font-size: 8.5pt; color: #555; }
}
/* Hidden on screen, shown on paper */
.print-only { display: none; }
}