/* Self-hosted variable fonts (SIL OFL 1.1, see web/fonts/LICENSE-*.txt). */
@font-face {
font-family: "Geologica";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/static/fonts/geologica-cyrillic.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Geologica";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/static/fonts/geologica-latin-ext.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Geologica";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/static/fonts/geologica-latin.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("/static/fonts/golos-text-cyrillic.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("/static/fonts/golos-text-latin-ext.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Golos Text";
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url("/static/fonts/golos-text-latin.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter: the admin's typeface. */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/static/fonts/inter-cyrillic.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/static/fonts/inter-latin-ext.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("/static/fonts/inter-latin.woff2?v=fcc480fd5afe") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/*
* Design tokens, "Precision".
* Four primitives come from /theme.css (editable in the admin): --accent-base, --ink-base,
* --paper-base and --radius-base. Every color, neutral and radius below derives from them, for
* the light and the dark theme alike. Components never use literal colors, sizes or durations.
*/
:root {
--accent-base: #1f4fe0;
--ink-base: #111214;
--paper-base: #fbfbfa;
--radius-base: 12px;
color-scheme: light dark;
/* Neutrals: light mixes ink into paper, dark mixes paper into ink. */
--bg: light-dark(var(--paper-base), color-mix(in oklab, var(--ink-base) 85%, black));
--surface: light-dark(#ffffff, color-mix(in oklab, var(--ink-base) 97.5%, var(--paper-base)));
--chrome: light-dark(color-mix(in oklab, var(--ink-base) 3%, var(--paper-base)), color-mix(in oklab, var(--ink-base) 94.5%, var(--paper-base)));
--chrome-2: light-dark(color-mix(in oklab, var(--ink-base) 6%, var(--paper-base)), color-mix(in oklab, var(--ink-base) 91%, var(--paper-base)));
--ink: light-dark(var(--ink-base), color-mix(in oklab, var(--paper-base) 96.5%, var(--ink-base)));
--ink-2: light-dark(color-mix(in oklab, var(--ink-base) 72%, var(--paper-base)), color-mix(in oklab, var(--paper-base) 65%, var(--ink-base)));
/* ink-3 is the quietest text; it still reads at 4.5:1 on every background (tests/tokens_contrast.rs). */
--ink-3: light-dark(color-mix(in oklab, var(--ink-base) 61%, var(--paper-base)), color-mix(in oklab, var(--paper-base) 58%, var(--ink-base)));
--line: light-dark(color-mix(in oklab, var(--ink-base) 9%, var(--paper-base)), color-mix(in oklab, var(--ink-base) 90%, var(--paper-base)));
--line-strong: light-dark(color-mix(in oklab, var(--ink-base) 19%, var(--paper-base)), color-mix(in oklab, var(--ink-base) 80%, var(--paper-base)));
/* A field's fill barely differs from the page, so its border is what shows where it is: 3:1 (palette.rs). */
--field-line: light-dark(color-mix(in oklab, var(--ink-base) 45%, var(--paper-base)), color-mix(in oklab, var(--ink-base) 53%, var(--paper-base)));
--inverse: var(--ink);
--on-inverse: var(--bg);
/* WebKit (Safari) crashes the page on a color-mix() whose two colors are both color-mix(), and in the dark theme
--bg and --ink are. So the shades mixed from the two are written out there, for the default primitives: the
band's quieter texts (--on-inverse 72% and 55% into --inverse) and a dark button under the pointer (--ink 86%
into --bg). */
--on-inverse-2: light-dark(color-mix(in srgb, var(--paper-base) 72%, var(--ink-base)), #4c4c4d);
--on-inverse-3: light-dark(color-mix(in srgb, var(--paper-base) 55%, var(--ink-base)), #737374);
--ink-hover: light-dark(color-mix(in oklab, var(--ink-base) 86%, var(--paper-base)), #cccdcc);
/* Accent: the dark theme lifts lightness and keeps the hue. */
--accent-dark: color-mix(in srgb, var(--accent-base) 62%, white);
--accent: light-dark(var(--accent-base), var(--accent-dark));
--accent-hover: light-dark(color-mix(in srgb, var(--accent-base) 82%, black), color-mix(in srgb, var(--accent-dark) 85%, white));
/* Dark: --accent 15% into --surface, its ink and paper mixed in one at a time, so that no color-mix() gets two
color-mix() colors (see --on-inverse-2): --accent is one where the browser lacks relative colors. */
--accent-soft: light-dark(color-mix(in oklab, var(--accent) 9%, var(--surface)), color-mix(in oklab, color-mix(in oklab, var(--accent) 15.3257%, var(--ink-base)) 97.875%, var(--paper-base)));
--accent-ink: light-dark(var(--accent-base), var(--accent-dark));
--on-accent: light-dark(#ffffff, color-mix(in oklab, var(--ink-base) 85%, black));
--ring-color: light-dark(color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent) 30%, transparent));
--ring: 0 0 0 4px var(--ring-color);
/* Status colors stay fixed: they mean something regardless of the brand. */
--success: light-dark(#2b7146, #6cc28e);
--warning: light-dark(#8c5a0b, #e0a54a);
--danger: light-dark(#c0362c, #f07a70);
--info: var(--accent);
/* What the assistant made by itself, such as a folder of chats. */
--ai: light-dark(#6b3fc4, #b89cff);
--success-soft: light-dark(color-mix(in oklab, var(--success) 10%, var(--surface)), color-mix(in oklab, var(--success) 16%, var(--surface)));
--warning-soft: light-dark(color-mix(in oklab, var(--warning) 11%, var(--surface)), color-mix(in oklab, var(--warning) 16%, var(--surface)));
--danger-soft: light-dark(color-mix(in oklab, var(--danger) 9%, var(--surface)), color-mix(in oklab, var(--danger) 16%, var(--surface)));
--info-soft: var(--accent-soft);
--on-danger: light-dark(#ffffff, #111214);
/* Fixed in both themes: a switch knob stays white, a device frame stays near-black. */
--knob: #ffffff;
--device: #111214;
--device-edge: rgb(255 255 255 / 0.12);
/* Type */
--font-display: "Geologica", "Golos Text", system-ui, sans-serif;
--font-body: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-system: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
--fs-2xs: 0.75rem;
--fs-xs: 0.8125rem;
--fs-sm: 0.875rem;
--fs-md: 1rem;
--fs-lg: 1.125rem;
--fs-xl: 1.25rem;
--fs-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
--fs-3xl: clamp(2rem, 1.45rem + 2.2vw, 2.75rem);
--fs-4xl: clamp(2.5rem, 1.25rem + 5vw, 4.5rem);
--lh-display: 1.02;
--lh-tight: 1.08;
--lh-snug: 1.3;
--lh-body: 1.6;
--tracking-display: -0.045em;
--tracking-title: -0.03em;
--tracking-snug: -0.015em;
--tracking-caps: 0.08em;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Space: a 4px grid */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.25rem;
--s-6: 1.5rem;
--s-7: 2rem;
--s-8: 2.5rem;
--s-9: 3rem;
--s-10: 4rem;
--s-11: 5rem;
--s-12: 6rem;
--s-13: 8rem;
--s-14: 9rem;
--section-y: clamp(4rem, 2.4rem + 6.4vw, 9rem);
/* Shape */
--control-h: 3rem;
--control-h-sm: 2.5rem;
--r-xs: calc(var(--radius-base) / 3);
--r-sm: calc(var(--radius-base) * 2 / 3);
--r-md: var(--radius-base);
--r-lg: calc(var(--radius-base) * 5 / 3);
--r-xl: calc(var(--radius-base) * 7 / 3);
--r-pill: 999px;
/* The one long shadow, for raised things and showcase frames only. */
--shadow: 0 40px 80px -40px light-dark(rgb(17 18 20 / 0.35), rgb(0 0 0 / 0.8));
--shadow-knob: 0 1px 2px light-dark(rgb(17 18 20 / 0.24), rgb(0 0 0 / 0.5));
/* A selected thing lifted off its rail: the admin's active area. */
--lift: 0 1px 2px light-dark(rgb(17 18 20 / 0.06), rgb(0 0 0 / 0.4)), 0 8px 24px -8px light-dark(rgb(17 18 20 / 0.14), rgb(0 0 0 / 0.6));
/* Motion */
--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dur-1: 150ms;
--dur-2: 200ms;
--dur-3: 260ms;
/* Layout */
--container: 1200px;
--container-wide: 1360px;
--container-narrow: 760px;
--gutter: max(16px, min(4vw, 40px));
--header-h: 64px;
/* The cabinet's bottom bar on phones, without the safe area under it. */
--cab-nav-h: 56px;
/* The way the line runs: 1 left to right, -1 right to left. A move along the line is multiplied by it. */
--dir: 1;
--z-header: 50;
--z-banner: 60;
--z-overlay: 80;
--z-toast: 90;
--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 3v3M17 3v3M4 9h16M6 5h12a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[dir="rtl"] {
--dir: -1;
}
[dir="ltr"] {
--dir: 1;
}
@supports (color: oklch(from red l c h)) {
:root {
--accent-dark: oklch(from var(--accent-base) calc(l + 0.16) calc(c * 0.86) calc(h + 4));
}
}
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
}
/* The admin's fixed palette, the same whatever the site's theme; admin.css builds the rest of its
tokens on these. Only admin pages have body.admin. */
body.admin {
--bg: light-dark(#ffffff, #18191b);
--chrome: light-dark(#efefef, #242528);
--chrome-2: light-dark(#e2e2e2, #2e2f33);
--line: light-dark(#e9e9e9, #2a2b2e);
--line-strong: light-dark(#e2e2e2, #37393d);
--ink: light-dark(#111111, #ececed);
--ink-2: light-dark(#5f5f5f, #8a8c91);
--ink-3: light-dark(#8e8e8e, #62646a);
/* The side menu: white like the page in the light theme, a step lighter than it in the dark one. */
--nav-bg: light-dark(#ffffff, #1f2023);
--dot-muted: light-dark(#bdbdbd, #3f4146);
--accent: light-dark(#e60023, #d9213a);
--accent-hover: light-dark(#ad081b, #b01a2f);
--on-accent: #ffffff;
--danger: light-dark(#c0362c, #ff8c99);
--scrim: light-dark(color-mix(in srgb, var(--ink-base) 40%, transparent), rgb(0 0 0 / 0.6));
/* The built-in mark on the sign-in screens (admin/guest_brand.html): its tile and its lines. */
--logo: light-dark(#111214, #ececed);
--logo-on: light-dark(#fbfbfa, #18191b);
}
/* The theme sample in the admin settings shows the site's colours: the tokens with a fixed white,
built as above; admin.css builds the rest. */
.theme-sample {
--surface: light-dark(#ffffff, color-mix(in oklab, var(--ink-base) 97.5%, var(--paper-base)));
--on-accent: light-dark(#ffffff, color-mix(in oklab, var(--ink-base) 85%, black));
}
/* The assistant settings' own shades, the approved mockup's; admin.css ("assistant settings", "Admin kit" and
the menu's "Menu badges") uses them. */
.aset,
.aset-dlg,
.aset-bar,
.admin-main:has(.aset) .admin-topbar,
.admin-main:has(.kit),
.side,
.kit-pane,
.kit-pane-b {
--aset-pn: light-dark(#f5f5f5, #1f2023);
--aset-sf: light-dark(#efefef, #26272a);
--aset-ln2: light-dark(#dcdcdc, #37393d);
--aset-ok: light-dark(#1a7f45, #2e9e5b);
--aset-warn: light-dark(#b25e00, #e0a040);
--aset-erb: light-dark(#fff1f2, #2b181b);
--aset-erl: light-dark(#f6c5cd, #552329);
--aset-ert: light-dark(#b0001b, #ff8c99);
}
/* The analytics page's own shades, the approved mockup's («Analytics B» in admin.css): the calendar's four
steps and the numbers on the dark ones, the donut's two data shades, the soft green and red behind a
change, and the blue of a search engine's letter. */
.kit.an {
--an-h1: light-dark(#ececed, #26272a);
--an-h2: light-dark(#cfd0d3, #3d3f44);
--an-h3: light-dark(#6b6d73, #8f9197);
--an-h4: light-dark(#2a2b2f, #e4e5e7);
--an-on: light-dark(#ffffff, #111214);
--an-data: light-dark(#2f3034, #d6d7da);
--an-data2: light-dark(#b9babe, #5c5e64);
--an-ok-soft: light-dark(#e7f4ec, #1c2a22);
--an-bad-soft: light-dark(#fbeceb, #2b181b);
--an-search: #4285f4;
}
/* The assistant's own shades, the approved mockup's («Assistant: «About the chat»» in admin.css): each tag's
colour and its ground, and a photo's name, white over the dark shade at its foot whatever the theme. */
.chat-pane {
--as-t-blue: light-dark(#1a56c4, #8fb4ff);
--as-t-blue-b: light-dark(#e8f0fe, #1b2840);
--as-t-amber: light-dark(#8a5300, #e8b65a);
--as-t-amber-b: light-dark(#fcf0d9, #33280f);
--as-t-violet: light-dark(#6b3fc4, #b89cff);
--as-t-violet-b: light-dark(#f1eafe, #2a2140);
--as-t-teal: light-dark(#126b55, #6fd1b2);
--as-t-teal-b: light-dark(#e0f4ee, #14302a);
--as-t-rose: light-dark(#b4232c, #ff8c99);
--as-t-rose-b: light-dark(#fdeaea, #3a1a1d);
--as-t-gray: light-dark(#5f5f5f, #a3a5aa);
--as-t-gray-b: light-dark(#efefef, #2a2b2e);
--as-ph-on: #ffffff;
--as-ph-shade: rgb(0 0 0 / 55%);
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: calc(var(--header-h) + var(--s-4));
}
body {
margin: 0;
min-height: 100dvh;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-md);
line-height: var(--lh-body);
font-weight: var(--fw-regular);
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
h1,
h2,
h3,
h4 {
margin: 0;
font-family: var(--font-display);
font-weight: var(--fw-semibold);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-title);
text-wrap: balance;
}
h3,
h4 {
line-height: var(--lh-snug);
letter-spacing: var(--tracking-snug);
}
p {
margin: 0;
text-wrap: pretty;
}
a {
color: inherit;
text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease);
}
a:hover {
text-decoration-color: currentColor;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
::selection {
background: var(--ring-color);
color: var(--ink);
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
fieldset {
min-inline-size: 0;
margin: 0;
padding: 0;
border: 0;
}
fieldset > legend {
margin-block-end: var(--s-2);
padding: 0;
}
hr {
border: 0;
border-top: 1px solid var(--line);
margin: var(--s-7) 0;
}
table {
font-variant-numeric: tabular-nums;
}
.sr-only,
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
inset-inline-start: var(--s-4);
top: calc(-1 * var(--s-10));
z-index: var(--z-toast);
padding: var(--s-2) var(--s-4);
background: var(--ink);
color: var(--bg);
border-radius: var(--r-pill);
}
.skip-link:focus {
top: var(--s-3);
}
[hidden] {
display: none !important;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Layout primitives */
.container {
width: min(100% - max(var(--gutter), env(safe-area-inset-left)) - max(var(--gutter), env(safe-area-inset-right)), var(--container));
margin-inline: auto;
}
.container-wide {
width: min(100% - max(var(--gutter), env(safe-area-inset-left)) - max(var(--gutter), env(safe-area-inset-right)), var(--container-wide));
}
.container-narrow {
width: min(100% - max(var(--gutter), env(safe-area-inset-left)) - max(var(--gutter), env(safe-area-inset-right)), var(--container-narrow));
}
.stack {
display: grid;
gap: var(--s-4);
align-content: start;
}
/* A wide table inside scrolls in its own frame instead of stretching every card past the screen */
.stack > * {
min-width: 0;
}
.cluster {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-3);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
gap: var(--s-4);
}
/* Text */
.display {
font-family: var(--font-display);
font-size: var(--fs-4xl);
font-weight: var(--fw-semibold);
line-height: var(--lh-display);
letter-spacing: var(--tracking-display);
}
.eyebrow {
margin: 0;
color: var(--ink-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
}
.lead {
color: var(--ink-2);
font-size: var(--fs-lg);
line-height: 1.55;
max-width: 38em;
}
.muted {
color: var(--ink-2);
}
/* The second thought of a headline: "Сайт, который продаёт. Каждый день." */
.thought {
color: var(--ink-3);
}
.num,
.price {
font-variant-numeric: tabular-nums;
}
.icon {
width: 1.15em;
height: 1.15em;
flex: none;
stroke: currentColor;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* In a right-to-left language the icons that point along the line point the other way. */
[dir="rtl"] .icon:has(use[href$="#arrow-left"], use[href$="#arrow-right"], use[href$="#arrow-up-right"], use[href$="#chevron-right"], use[href$="#external"], use[href$="#list"], use[href$="#send"], use[href$="#undo"], use[href$="#logout"]) {
scale: -1 1;
}
/* Buttons: pills, 48px and 40px. One primary per screen. */
.btn {
--btn-h: var(--control-h);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-2);
min-height: var(--btn-h);
padding: 0 var(--s-6);
border: 1px solid var(--line-strong);
border-radius: var(--r-pill);
background: var(--surface);
color: var(--ink);
font-size: var(--fs-md);
font-weight: var(--fw-medium);
line-height: 1.2;
letter-spacing: -0.005em;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover {
border-color: var(--ink-3);
}
.btn:active {
transform: scale(0.98);
}
.btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.45;
pointer-events: none;
}
.btn .icon {
width: 1.125rem;
height: 1.125rem;
}
.btn-primary {
border-color: transparent;
background: var(--accent);
color: var(--on-accent);
}
.btn-primary:hover {
border-color: transparent;
background: var(--accent-hover);
}
.btn-ink {
border-color: transparent;
background: var(--ink);
color: var(--bg);
}
.btn-ink:hover {
border-color: transparent;
background: var(--ink-hover);
}
.btn-ghost {
border-color: transparent;
background: transparent;
}
.btn-ghost:hover {
border-color: transparent;
background: var(--chrome);
}
.btn-danger {
border-color: color-mix(in oklab, var(--danger) 35%, var(--line));
color: var(--danger);
}
.btn-danger:hover {
border-color: var(--danger);
background: var(--danger-soft);
}
/* Delete in a row or a save bar (ui::confirm_delete): red words without a frame until hovered. */
.btn-danger-quiet {
border-color: transparent;
background: transparent;
color: var(--danger);
}
.btn-danger-quiet:hover {
border-color: transparent;
background: var(--danger-soft);
}
.btn-danger-quiet:focus-visible {
outline-color: var(--danger);
}
/* ui::confirm_delete without JavaScript: the button opens the question with the real Delete.
.ask-box is the same question in place with or without JavaScript (retry a failed letter). */
.confirm-delete,
.ask-box {
display: inline-block;
}
.confirm-delete > summary,
.ask-box > summary {
list-style: none;
}
.confirm-delete > summary::-webkit-details-marker,
.ask-box > summary::-webkit-details-marker {
display: none;
}
.confirm-delete-ask {
display: grid;
justify-items: start;
gap: var(--s-2);
margin-top: var(--s-2);
}
.btn-link {
min-height: 0;
padding: 0;
border: 0;
border-radius: var(--r-xs);
background: none;
color: var(--accent-ink);
}
.btn-link:hover {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.btn-link .icon,
.more-link .icon {
transition: translate var(--dur-2) var(--ease);
}
.btn-link:hover .icon,
.more-link:hover .icon {
translate: calc(3px * var(--dir));
}
.btn-sm {
--btn-h: var(--control-h-sm);
padding: 0 var(--s-4);
font-size: var(--fs-sm);
}
.btn-icon {
width: var(--btn-h);
padding: 0;
}
.btn.is-busy {
cursor: progress;
opacity: 0.7;
}
.more-link {
display: inline-flex;
align-items: center;
gap: var(--s-1);
color: var(--accent-ink);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
text-decoration: none;
}
.link-button {
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in oklab, currentColor 30%, transparent);
text-underline-offset: 0.2em;
cursor: pointer;
}
/* Fields: 48px like buttons, so rows align to the pixel. */
.field {
display: grid;
gap: var(--s-2);
align-content: start;
}
.field-label {
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
color: var(--ink);
}
.field-optional {
margin-inline-start: var(--s-1);
color: var(--ink-2);
font-weight: var(--fw-regular);
}
.field-hint {
margin: 0;
color: var(--ink-2);
font-size: var(--fs-xs);
}
/* ui::checkbox and ui::radio: the box before its label, the whole row clickable. */
.check {
display: flex;
align-items: flex-start;
gap: var(--s-3);
font-size: var(--fs-sm);
cursor: pointer;
}
/* The box sits on the middle of the label's first line, however many lines the label wraps to. */
.check > .checkbox,
.check > .radio {
margin-block-start: calc((1lh - 1.25rem) / 2);
}
.os-apple .check > .checkbox,
.os-apple .check > .radio {
margin-block-start: calc((1lh - 1.125rem) / 2);
}
@media (pointer: coarse) {
.check {
padding-block: calc((2.75rem - 1lh) / 2);
}
.check-group-items {
gap: 0;
}
}
/* The label of a checkbox, radio or switch, with its hint on the line below. */
.check-text {
display: grid;
gap: var(--s-1);
min-width: 0;
overflow-wrap: anywhere;
}
.check-text small {
color: var(--ink-2);
font-size: var(--fs-xs);
}
/* ui::check_group: a legend over its checkboxes, one per line or side by side. */
.check-group > legend {
margin-bottom: 0;
}
.check-group-items {
display: grid;
gap: var(--s-2);
}
.check-group-inline .check-group-items {
display: flex;
flex-wrap: wrap;
gap: var(--s-2) var(--s-5);
}
.field-error {
display: flex;
gap: var(--s-2);
margin: 0;
color: var(--danger);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
}
.input,
.select,
.textarea {
width: 100%;
min-height: var(--control-h);
padding: 0 var(--s-4);
border: 1px solid var(--field-line);
border-radius: var(--r-md);
background: var(--surface);
color: var(--ink);
font-size: var(--fs-md);
line-height: 1.4;
transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.textarea {
min-height: 8rem;
padding: var(--s-3) var(--s-4);
resize: vertical;
line-height: var(--lh-body);
}
/* What is typed keeps its own direction on a right to left page: a Russian company name keeps its
quotes in place. A phone or an email always reads left to right. */
.input,
.textarea {
unicode-bidi: plaintext;
}
input:is([type="tel"], [type="email"]) {
direction: ltr;
}
.select {
padding-inline-end: var(--s-10);
appearance: none;
background-image: var(--icon-chevron-tinted);
background-repeat: no-repeat;
background-position: right var(--s-4) center;
background-size: 1rem;
cursor: pointer;
--icon-chevron-tinted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%237c7e84' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
[dir="rtl"] .select {
background-position: left var(--s-4) center;
}
/* The select controls.js draws on Windows, Linux and Android: the field is a combobox, the
options open in a listbox kept inside the screen and its safe areas. */
.select-native {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
div.select {
position: relative;
display: flex;
align-items: center;
background-image: none;
user-select: none;
}
div.select > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.select::after {
content: "";
position: absolute;
top: 50%;
inset-inline-end: var(--s-4);
width: 1rem;
height: 1rem;
background: var(--ink-3);
mask: var(--icon-chevron) center / contain no-repeat;
translate: 0 -50%;
transition: rotate var(--dur-1) var(--ease);
}
div.select[aria-expanded="true"] {
border-color: var(--ink);
box-shadow: var(--ring);
}
div.select[aria-expanded="true"]::after {
rotate: 180deg;
}
div.select[aria-disabled] {
background: var(--chrome);
color: var(--ink-2);
cursor: not-allowed;
}
.listbox {
position: fixed;
inset: auto;
z-index: var(--z-overlay);
max-width: calc(100vw - 2 * var(--s-2) - env(safe-area-inset-left) - env(safe-area-inset-right));
max-height: min(20rem, calc(var(--listbox-room) - env(safe-area-inset-bottom)));
margin: 0;
padding: var(--s-1);
overflow-y: auto;
overscroll-behavior: contain;
list-style: none;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow);
font-size: var(--fs-md);
animation: rise var(--dur-2) var(--ease-out);
}
.listbox.is-up {
max-height: min(20rem, calc(var(--listbox-room) - env(safe-area-inset-top)));
}
.listbox [role="option"] {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: var(--control-h-sm);
padding: 0 var(--s-3);
border-radius: var(--r-sm);
cursor: pointer;
}
.listbox .is-active {
background: var(--chrome);
}
.listbox [aria-selected="true"] {
font-weight: var(--fw-semibold);
}
.listbox [aria-selected="true"]::after {
content: "";
flex: none;
width: 0.875rem;
height: 0.875rem;
background: var(--ink);
mask: var(--icon-check) center / contain no-repeat;
}
.listbox [aria-disabled="true"] {
color: var(--ink-3);
cursor: default;
}
@media (pointer: coarse) {
.listbox [role="option"] {
min-height: 44px;
}
}
.input:hover,
.select:hover,
.textarea:hover {
border-color: var(--ink-3);
}
.input:focus,
.select:focus,
.textarea:focus {
outline: none;
border-color: var(--ink);
box-shadow: var(--ring);
}
/* The browser's own autofill tint ignores the palette and, in some browsers, the dark theme. */
.input:autofill,
.textarea:autofill {
box-shadow: inset 0 0 0 100vmax var(--accent-soft);
-webkit-text-fill-color: var(--ink);
caret-color: var(--ink);
}
.input:autofill:focus,
.textarea:autofill:focus {
box-shadow: var(--ring), inset 0 0 0 100vmax var(--accent-soft);
}
.input::placeholder,
.textarea::placeholder {
color: var(--ink-3);
opacity: 1;
}
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"],
.has-error .input,
.has-error .select,
.has-error .textarea {
border-color: var(--danger);
}
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus,
.has-error .input:focus,
.has-error .textarea:focus {
box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 16%, transparent);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
background: var(--chrome);
color: var(--ink-2);
cursor: not-allowed;
}
/* A fixed prefix inside the field, e.g. +373 for Moldovan phones. */
.input-affix {
display: flex;
align-items: center;
border: 1px solid var(--field-line);
border-radius: var(--r-md);
background: var(--surface);
transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input-affix > span {
padding-inline-start: var(--s-4);
color: var(--ink-2);
font-variant-numeric: tabular-nums;
}
.input-affix > .input {
min-height: calc(var(--control-h) - 2px);
padding-inline-start: var(--s-2);
border: 0;
background: none;
box-shadow: none;
font-variant-numeric: tabular-nums;
}
.input-affix:hover {
border-color: var(--ink-3);
}
.input-affix:focus-within {
border-color: var(--ink);
box-shadow: var(--ring);
}
.has-error .input-affix {
border-color: var(--danger);
}
/* Dates and numbers off Apple systems: the calendar button takes the field's ink, a number gets
− and + buttons from controls.js (the keyboard keeps the arrow keys). */
:root:not(.os-apple) .input:is([type="date"], [type="datetime-local"])::-webkit-calendar-picker-indicator {
width: 1.25rem;
height: 1.25rem;
margin-inline-start: var(--s-2);
padding: 0;
background: var(--ink-3);
mask: var(--icon-calendar) center / contain no-repeat;
opacity: 1;
cursor: pointer;
}
:root:not(.os-apple) .input:is([type="date"], [type="datetime-local"])::-webkit-calendar-picker-indicator:hover {
background: var(--ink);
}
.input:is([type="date"], [type="datetime-local"], [type="number"]) {
font-variant-numeric: tabular-nums;
}
.number-field > .input {
min-width: 0;
max-width: none;
padding: 0 var(--s-1);
text-align: center;
appearance: textfield;
}
.number-field > .input::-webkit-inner-spin-button,
.number-field > .input::-webkit-outer-spin-button {
margin: 0;
appearance: none;
}
.number-field > button {
flex: none;
align-self: stretch;
width: var(--control-h-sm);
margin: 0;
padding: 0;
border: 0;
border-radius: var(--r-md);
background: none;
color: var(--ink-2);
font: inherit;
font-size: var(--fs-lg);
line-height: 1;
cursor: pointer;
}
.number-field > button:hover {
background: var(--chrome);
color: var(--ink);
}
.number-field:has(.input:disabled) {
background: var(--chrome);
}
.number-field:has(.input:disabled) > button {
color: var(--ink-3);
cursor: not-allowed;
}
/* Files (ui::file_input): the site's own button in the page's language over a transparent native
input, which takes the click, the drop and the keyboard; controls.js writes the chosen names. */
.file-field {
position: relative;
display: flex;
align-items: center;
gap: var(--s-3);
padding-inline-start: var(--s-2);
cursor: pointer;
}
.file-native {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file-button {
position: relative;
}
.file-button:has(.file-native:focus-visible) {
box-shadow: var(--ring);
}
.file-field > .btn {
flex: none;
pointer-events: none;
}
.file-field:hover > .btn {
border-color: var(--ink-3);
}
.file-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-field.is-empty > .file-name {
color: var(--ink-2);
}
.file-field:focus-within {
border-color: var(--ink);
box-shadow: var(--ring);
}
.file-field:has([aria-invalid="true"]) {
border-color: var(--danger);
}
.file-field:has(:disabled) {
background: var(--chrome);
cursor: not-allowed;
}
/* Colour: off Apple systems the swatch fills the control with the field's rounding. */
.input[type="color"] {
width: var(--control-h);
padding: var(--s-1);
cursor: pointer;
}
:root:not(.os-apple) input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
:root:not(.os-apple) input[type="color"]::-webkit-color-swatch {
border: 0;
border-radius: var(--r-sm);
}
:root:not(.os-apple) input[type="color"]::-moz-color-swatch {
border: 0;
border-radius: var(--r-sm);
}
/* Checkbox, radio, switch: monochrome, ink when on. */
.checkbox,
.radio {
flex: none;
display: inline-grid;
place-content: center;
width: 1.25rem;
height: 1.25rem;
margin: 0;
border: 1.5px solid var(--field-line);
background: var(--surface);
appearance: none;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.checkbox {
border-radius: var(--r-xs);
}
.radio {
border-radius: 50%;
}
.checkbox::before {
content: "";
width: 0.875rem;
height: 0.875rem;
background: var(--bg);
mask: var(--icon-check) center / contain no-repeat;
transform: scale(0);
transition: transform var(--dur-1) var(--ease-out);
}
.checkbox:hover,
.radio:hover {
border-color: var(--ink-3);
}
.checkbox:checked {
border-color: var(--ink);
background: var(--ink);
}
.checkbox:checked::before {
transform: scale(1);
}
.radio:checked {
border-color: var(--ink);
box-shadow: inset 0 0 0 4.5px var(--ink);
}
.checkbox:focus-visible,
.radio:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--ink);
}
.has-error .checkbox {
border-color: var(--danger);
}
/* Apple systems keep the native checkbox and radio, tinted with the accent. */
.os-apple .checkbox,
.os-apple .radio,
.os-apple .checkbox:checked,
.os-apple .radio:checked,
.os-apple .checkbox:focus-visible,
.os-apple .radio:focus-visible {
width: 1.125rem;
height: 1.125rem;
border: 0;
background: none;
box-shadow: none;
appearance: auto;
accent-color: var(--accent);
}
.os-apple .checkbox::before {
content: none;
}
.checkbox-row {
display: flex;
align-items: flex-start;
gap: var(--s-3);
font-size: var(--fs-sm);
color: var(--ink-2);
cursor: pointer;
}
.checkbox-row .checkbox,
.checkbox-row .radio {
margin-top: 0.1rem;
}
.switch {
position: relative;
display: inline-flex;
flex: none;
}
.switch input {
position: absolute;
inset: 0;
margin: 0;
opacity: 0;
cursor: pointer;
}
.switch span {
width: 2.75rem;
height: 1.625rem;
padding: 3px;
border-radius: var(--r-pill);
background: var(--field-line);
transition: background-color var(--dur-2) var(--ease);
}
.switch span::after {
content: "";
display: block;
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: var(--knob);
box-shadow: var(--shadow-knob);
transition: translate var(--dur-2) var(--ease-out);
}
.switch input:checked + span {
background: var(--ink);
}
.switch input:checked + span::after {
translate: calc(1.125rem * var(--dir));
background: var(--bg);
}
.switch input:disabled {
cursor: not-allowed;
}
.switch input:disabled + span {
opacity: 0.5;
}
.switch input:focus-visible + span {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Chips: tags, and as a checkbox group (). */
.chip-list {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.chip {
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-height: 1.75rem;
padding: 0 var(--s-3);
border: 1px solid var(--line);
border-radius: var(--r-pill);
color: var(--ink-2);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
white-space: nowrap;
}
.chip-check {
position: relative;
display: inline-flex;
}
.chip-check input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.chip-check span {
display: inline-flex;
align-items: center;
min-height: var(--control-h-sm);
padding: 0 var(--s-4);
border: 1px solid var(--field-line);
border-radius: var(--r-pill);
background: var(--surface);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.chip-check span:hover {
border-color: var(--ink-3);
}
.chip-check input:checked + span {
border-color: var(--ink);
background: var(--ink);
color: var(--bg);
}
.chip-check input:focus-visible + span {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Phones get the 44px tap height even where the browser reports a fine pointer. */
@media (pointer: coarse), (max-width: 599px) {
.chip-check span {
min-height: 44px;
}
}
/* Badges */
.badge {
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-height: 1.5rem;
padding: 0 var(--s-2);
border-radius: var(--r-pill);
background: var(--chrome);
color: var(--ink-2);
font-size: var(--fs-2xs);
font-weight: var(--fw-medium);
line-height: 1;
white-space: nowrap;
}
.badge::before {
content: "";
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
background: currentColor;
}
.badge-plain::before {
content: none;
}
.badge-accent {
background: var(--accent-soft);
color: var(--accent-ink);
}
.badge-ok {
background: var(--success-soft);
color: var(--success);
}
.badge-warn {
background: var(--warning-soft);
color: var(--warning);
}
.badge-danger {
background: var(--danger-soft);
color: var(--danger);
}
/* Files in a list: rows wrap and never run wider than their column. */
.file-list {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
}
.file-list > li {
min-width: 0;
max-width: 100%;
}
/* A file in a list (cabinet/file_link.html): the icon on the left across both lines; the name on top, cut with an ellipsis; type and size below. */
.file-link {
display: grid;
min-height: 44px;
max-width: 100%;
grid-template-columns: auto auto minmax(0, 1fr);
grid-template-areas:
"icon name name"
"icon type size";
align-content: center;
padding-block: var(--s-1);
line-height: 1.3;
text-decoration: none;
}
.file-link > .icon {
grid-area: icon;
align-self: center;
width: 1.5rem;
height: 1.5rem;
margin-inline-end: var(--s-2);
}
.file-link > span {
grid-area: name;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: underline 1px color-mix(in oklab, currentColor 30%, transparent);
}
.file-link:hover > span {
text-decoration-color: currentColor;
}
.file-type {
grid-area: type;
margin-inline-end: 0.3em;
color: var(--ink-2);
}
.file-link > .muted {
grid-area: size;
white-space: nowrap;
}
.file-type,
.file-link > .muted {
font-size: var(--fs-xs);
}
/* Cards: a hairline and a 20px radius, never a shadow. */
.card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s-3);
padding: var(--s-7);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
}
/* ui::card: an icon and a heading on top, a link to the full list on the right. */
.card-head {
display: flex;
align-items: center;
gap: var(--s-3);
min-width: 0;
}
.card-head > div:not(.card-actions) {
flex: 1 1 14rem;
min-width: 0;
}
.card-head h2 {
font-size: var(--fs-lg);
letter-spacing: var(--tracking-snug);
}
.card-head p {
margin-top: var(--s-1);
color: var(--ink-2);
font-size: var(--fs-sm);
}
.card-head p:first-child {
margin-top: 0;
}
.card-icon {
display: grid;
flex: none;
align-self: flex-start;
place-items: center;
width: 2.25rem;
height: 2.25rem;
border-radius: var(--r-sm);
background: var(--chrome);
color: var(--ink-2);
}
/* Lists and tables run edge to edge; the head keeps its padding over a hairline. */
.card.card-flush {
gap: 0;
padding: 0;
}
.card-flush > .card-head {
padding: var(--s-5) var(--s-6);
border-bottom: 1px solid var(--line);
}
.card-narrow {
max-width: 45rem;
}
/* ui::card_head: buttons on the right; a long one wraps instead of widening the card on a phone. */
.card-actions {
display: flex;
flex: none;
flex-wrap: wrap;
gap: var(--s-2);
max-width: 100%;
}
.card-actions .btn {
max-width: 100%;
white-space: normal;
}
.card-flush .table-wrap {
border: 0;
border-radius: 0;
background: none;
}
/* Name and value pairs are not a list: they keep the head's padding, as the sales «Today» card on the home page. */
.card-flush > .kv {
padding: var(--s-5) var(--s-6);
}
.card-flush > .pager {
padding: var(--s-3) var(--s-5);
border-top: 1px solid var(--line);
}
.card-head + .module-row {
border-top: 0;
}
/* ui::empty_state: what goes here and the first step, in the middle of its card. */
.empty {
display: grid;
justify-items: center;
gap: var(--s-3);
padding: var(--s-8) var(--s-6);
text-align: center;
}
.empty-illo {
display: grid;
place-items: center;
width: 4rem;
height: 4rem;
margin-bottom: var(--s-1);
border-radius: 50%;
background: var(--accent-soft);
color: var(--accent);
}
.empty-illo :is(.icon, .sym) {
width: 1.75rem;
height: 1.75rem;
}
/* Illustrations: illo-inbox, illo-pages, illo-cases, illo-list, illo-files, illo-people,
illo-search, illo-generic in img/icons.svg, drawn on 64×64. Shapes without their own fill take
the soft accent. */
.empty-art {
width: 6rem;
height: 6rem;
background: none;
color: var(--ink-3);
}
.empty-art .icon {
width: 100%;
height: 100%;
fill: var(--accent-soft);
stroke-width: 1.8;
}
.empty :is(h2, h3) {
font-size: var(--fs-lg);
letter-spacing: var(--tracking-snug);
}
.empty p {
max-width: 46ch;
color: var(--ink-2);
}
.empty-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-2);
margin-top: var(--s-2);
}
.empty-actions:empty {
display: none;
}
/* ui::gate_head: sign-in, codes, recovery, dead links and errors share one centred head, in a
narrow card in the middle (ui::card(gate = true), .cab-card.card-gate) with a full-width button. */
.card-gate {
width: min(100%, 28rem);
margin-inline: auto;
}
.card-gate > .btn {
width: 100%;
}
.gate-head {
display: grid;
justify-items: center;
gap: var(--s-2);
text-align: center;
}
.gate-head .empty-illo {
margin-bottom: var(--s-2);
}
.gate-head p {
max-width: 40ch;
color: var(--ink-2);
}
.card-link {
transition: border-color var(--dur-2) var(--ease);
}
.card-link:hover {
border-color: var(--line-strong);
}
.card-link .stretched {
text-decoration: none;
}
.card-link .stretched::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
}
.card-link:has(.stretched:focus-visible) {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.card-link .stretched:focus-visible {
outline: none;
}
@media (max-width: 560px) {
.card {
padding: var(--s-6);
}
.card-head {
flex-wrap: wrap;
}
}
/* Dashboard: ui::kpi tiles in a .kpis row (.stat-grid/.stat-tile are the same), the
.activity feed (who, what, when; one link per row takes the row), .progress, and
.panel-grid for cards that wrap into columns. */
.panel-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
align-items: start;
gap: var(--s-5);
}
.truncate {
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.stat-grid,
.kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: var(--s-4);
}
/* Tiles that keep their width when there are only one or two (a list of pages). */
.kpis-fill {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.stat-tile,
.kpi {
display: grid;
align-content: start;
gap: var(--s-2);
padding: var(--s-5);
border: 1px solid var(--line);
border-radius: var(--r-lg);
background: var(--surface);
color: var(--ink);
text-decoration: none;
transition: border-color var(--dur-2) var(--ease);
container-type: inline-size;
}
a.stat-tile:hover,
a.kpi:hover {
border-color: var(--line-strong);
}
.stat-label,
.kpi-label {
display: flex;
align-items: center;
gap: var(--s-2);
color: var(--ink-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
}
.stat-label .icon,
.kpi-label .icon {
width: 1rem;
height: 1rem;
}
.stat-value,
.kpi-value {
font-family: var(--font-display);
font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
letter-spacing: var(--tracking-title);
line-height: 1;
}
.stat-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--s-2) var(--s-3);
}
.stat-delta {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--ink-2);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
}
.stat-delta.is-up {
color: var(--success);
}
.stat-delta.is-down {
color: var(--danger);
}
.stat-delta.is-up::before {
content: "↑";
}
.stat-delta.is-down::before {
content: "↓";
}
.stat-hint,
.kpi-hint,
.kpi > .muted {
color: var(--ink-2);
font-size: var(--fs-xs);
}
.kpi-hot {
border-color: color-mix(in oklab, var(--accent) 35%, var(--line));
}
.kpi-hot .kpi-value,
.kpi-hot .kpi-label .icon {
color: var(--accent-ink);
}
/* A phone keeps two tiles a row: the label wraps, and only a strip too narrow for two drops to one. */
@media (max-width: 40rem) {
.stat-grid,
.kpis {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
gap: var(--s-3);
}
.stat-tile,
.kpi {
padding: var(--s-4);
}
/* A long number shrinks to the tile instead of breaking onto two lines. */
.stat-value,
.kpi-value {
font-size: min(2rem, 22cqi);
}
}
.activity {
display: grid;
margin: 0;
padding: 0;
list-style: none;
}
.activity li {
display: flex;
align-items: baseline;
gap: var(--s-3);
min-width: 0;
padding: var(--s-3) var(--s-6);
border-top: 1px solid var(--line);
font-size: var(--fs-sm);
}
.activity li:first-child {
border-top: 0;
}
.activity li > a {
flex: none;
text-decoration: none;
}
/* The one link in a row takes the whole row as its target. */
.activity li:has(> a) {
position: relative;
}
.activity li > a::after {
content: "";
position: absolute;
inset: 0;
}
.activity li > a:hover {
text-decoration: underline;
}
.activity li > .truncate {
flex: 1;
}
.activity li > span:not(.truncate) {
flex: 1;
min-width: 0;
}
.activity time {
flex: none;
margin-inline-start: auto;
color: var(--ink-2);
font-size: var(--fs-xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 719px) {
.activity li {
flex-wrap: wrap;
gap: var(--s-1) var(--s-3);
padding-inline: var(--s-5);
}
.activity li > .truncate {
order: 3;
flex-basis: 100%;
}
}
.progress {
width: 100%;
height: 0.375rem;
border: 0;
border-radius: var(--r-pill);
background: var(--chrome-2);
overflow: hidden;
appearance: none;
}
.progress::-webkit-progress-bar {
background: var(--chrome-2);
}
.progress::-webkit-progress-value {
border-radius: var(--r-pill);
background: var(--success);
}
.progress::-moz-progress-bar {
border-radius: var(--r-pill);
background: var(--success);
}
/* Showcase frames: real work shown as a product. */
.frame-browser {
margin: 0;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: var(--shadow);
}
.frame-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 2.25rem;
padding: 0 var(--s-3);
border-bottom: 1px solid var(--line);
background: var(--chrome);
}
.frame-dots {
display: flex;
gap: 6px;
}
.frame-dots i {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--line-strong);
}
.frame-url {
display: inline-flex;
align-items: center;
gap: var(--s-1);
min-width: 0;
max-width: 100%;
padding: 0 var(--s-4);
height: 1.5rem;
border-radius: var(--r-pill);
background: var(--surface);
color: var(--ink-2);
font-size: var(--fs-2xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.frame-url .icon {
width: 0.75rem;
height: 0.75rem;
}
.frame-browser img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top;
}
.frame-phone {
--bezel: clamp(5px, 0.55vw, 9px);
margin: 0;
padding: var(--bezel);
border-radius: clamp(28px, 3.2vw, 48px);
background: var(--device);
box-shadow: var(--shadow), inset 0 0 0 1px var(--device-edge);
}
.frame-phone .frame-screen {
position: relative;
overflow: hidden;
border-radius: calc(clamp(28px, 3.2vw, 48px) - var(--bezel));
background: var(--surface);
}
.frame-phone .frame-screen::before {
content: "";
position: absolute;
top: 3%;
left: 50%; /* physical: centred by translateX(-50%), the same on both sides */
z-index: 1;
width: 30%;
height: 3.6%;
border-radius: var(--r-pill);
background: var(--device);
transform: translateX(-50%);
}
.frame-phone img {
width: 100%;
aspect-ratio: 9 / 19.5;
object-fit: cover;
object-position: top;
}
/* Tabs: a segmented control. */
.tabs {
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: var(--r-pill);
background: var(--chrome);
}
.tab {
min-height: calc(var(--control-h-sm) - 6px);
padding: 0 var(--s-4);
border: 0;
border-radius: var(--r-pill);
background: none;
color: var(--ink-2);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
text-decoration: none;
display: inline-flex;
align-items: center;
cursor: pointer;
transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tab:hover {
color: var(--ink);
}
.tab[aria-selected="true"],
.tab[aria-current] {
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-knob);
}
/* Breadcrumbs */
.breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--s-2);
margin: 0;
padding: 0;
list-style: none;
color: var(--ink-2);
font-size: var(--fs-sm);
}
.breadcrumbs li {
display: inline-flex;
align-items: center;
gap: var(--s-2);
}
.breadcrumbs li + li::before {
content: "/";
color: var(--line-strong);
}
/* The current page stays on one line, cut short if needed: its full title is the heading below. */
.breadcrumbs li:last-child {
display: block;
flex: 1 1 0;
min-inline-size: 6rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumbs li:last-child::before {
margin-inline-end: var(--s-2);
}
.breadcrumbs a {
text-decoration: none;
}
.breadcrumbs a:hover {
color: var(--ink);
}
.breadcrumbs [aria-current] {
color: var(--ink);
}
/* Menus (details/summary) */
.menu {
position: relative;
}
.menu > summary {
list-style: none;
cursor: pointer;
}
.menu > summary::-webkit-details-marker {
display: none;
}
.menu-panel {
position: absolute;
inset-inline-end: 0;
top: calc(100% + var(--s-2));
z-index: var(--z-overlay);
min-width: 12rem;
max-inline-size: calc(100vw - 2 * var(--gutter));
margin: 0;
padding: var(--s-1);
list-style: none;
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: var(--shadow);
animation: rise var(--dur-2) var(--ease-out);
}
.menu-panel a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-4);
min-height: var(--control-h-sm);
padding: 0 var(--s-3);
border-radius: var(--r-sm);
font-size: var(--fs-sm);
text-decoration: none;
}
.menu-panel a:hover {
background: var(--chrome);
}
.menu-panel a[aria-current="true"] {
font-weight: var(--fw-semibold);
}
.menu-panel a[aria-current="true"]::after {
content: "";
width: 0.875rem;
height: 0.875rem;
background: var(--ink);
mask: var(--icon-check) center / contain no-repeat;
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(4px);
}
}
/* Notices */
.notice {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: var(--s-3);
margin: 0;
padding: var(--s-4);
border-radius: var(--r-md);
background: var(--chrome);
color: var(--ink);
font-size: var(--fs-sm);
}
.notice .icon {
margin-top: 0.15em;
}
.notice > p {
flex: 1 1 16rem;
min-width: 0;
}
.notice > .btn {
max-width: 100%;
white-space: normal;
}
.notice-ok {
background: var(--success-soft);
color: var(--success);
}
.notice-danger {
background: var(--danger-soft);
color: var(--danger);
}
/* Toasts: quiet confirmation, bottom center. */
.toast-region {
position: fixed;
left: 50%; /* physical: centred by translateX(-50%), the same on both sides */
bottom: calc(var(--banner-h, 0px) + max(var(--s-6), env(safe-area-inset-bottom)));
z-index: var(--z-toast);
display: grid;
justify-items: center;
gap: var(--s-2);
width: min(100% - 2 * var(--s-4), 28rem);
transform: translateX(-50%);
pointer-events: none;
}
.toast {
display: inline-flex;
align-items: center;
gap: var(--s-2);
min-height: var(--control-h);
padding: 0 var(--s-5);
border-radius: var(--r-pill);
background: var(--inverse);
color: var(--on-inverse);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
box-shadow: var(--shadow);
pointer-events: auto;
animation: rise var(--dur-3) var(--ease-out);
}
.toast-danger {
background: var(--danger);
color: var(--on-danger);
}
/* Dialog (native