/* Digital Cartel Talk Portal: design system. Plain CSS, no build step. Fonts, tokens, base, layout, components, utilities. Copy patterns from /design (admin). Markup contracts for tables, filter bars, stats and the attention strip are written above each component below. Themes: one token set, two values each through light-dark(). The page follows the system unless the person picked Light or Dark, which partials/head.blade.php writes to before first paint. Never write a raw colour below the tokens: add a token instead, so both themes stay in step. */ /* Fonts: Geist and Geist Mono, self-hosted (SIL OFL, public/fonts/Geist-OFL.txt). One variable file each. Geist Fallback is Arial scaled to Geist's metrics, so the swap does not re-wrap headings. */ @font-face { font-family: 'Geist'; src: url('../fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Geist Fallback'; src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica'); size-adjust: 104.8%; ascent-override: 95.9%; descent-override: 28.15%; line-gap-override: 0%; } /* Tokens */ :root { color-scheme: light dark; /* Surfaces, back to front */ --bg: light-dark(#f7f8fa, #0b0c0f); --bg-side: light-dark(#f1f2f5, #08090b); --raised: light-dark(#f4f5f7, #0f1013); /* recessed wells: agreement, summaries, choice cards */ --card: light-dark(#ffffff, #131418); --elevated: light-dark(#ffffff, #1a1c21); /* secondary buttons, dialogs */ --input: light-dark(#ffffff, #0f1013); --stage: light-dark(#e9ebef, #050506); /* behind a client site in the studio */ --text: light-dark(#14161b, #e6e8ec); --text-strong: light-dark(#0a0b0e, #f7f8f8); --text-2: light-dark(#4b5159, #a3a8b1); --text-3: light-dark(#62676f, #868b95); /* 4.5:1 on card, raised, stage and the switch track */ --placeholder: light-dark(#6b7078, #7b808a); --line: light-dark(#e6e8ec, rgb(255 255 255 / .085)); --line-strong: light-dark(#d9dce2, rgb(255 255 255 / .12)); --line-hover: light-dark(#b9bec6, rgb(255 255 255 / .2)); --line-control: light-dark(#8e949c, rgb(255 255 255 / .36)); /* input and checkbox edges: 3:1 on their field */ --line-control-hover: light-dark(#6b7078, rgb(255 255 255 / .5)); --hover: light-dark(rgb(15 17 21 / .04), rgb(255 255 255 / .045)); --hover-strong: light-dark(rgb(15 17 21 / .07), rgb(255 255 255 / .08)); --track: light-dark(#eceef1, rgb(255 255 255 / .07)); --edge: light-dark(rgb(255 255 255 / 0), rgb(255 255 255 / .035)); --scrim: light-dark(rgb(15 17 21 / .34), rgb(0 0 0 / .62)); --glass: light-dark(rgb(247 248 250 / .86), rgb(11 12 15 / .86)); /* Accent: teal acts, violet only inside the brand mark. Light teal is darker so text on white passes AA. */ --teal: light-dark(#0f766e, #14b8a6); --teal-hover: light-dark(#115e59, #2dd4bf); --teal-soft: light-dark(rgb(15 118 110 / .09), rgb(20 184 166 / .12)); --teal-line: light-dark(rgb(15 118 110 / .32), rgb(20 184 166 / .4)); --teal-glow: light-dark(rgb(15 118 110 / .55), rgb(20 184 166 / 0)); /* the primary button's glow: light only */ --text-on-accent: light-dark(#ffffff, #04201d); --violet: light-dark(#7c3aed, #8b5cf6); --brand: linear-gradient(135deg, #14b8a6, #8b5cf6); --success: light-dark(#047857, #34d399); --warning: light-dark(#a3480a, #fbbf24); --danger: light-dark(#b91c1c, #f87171); --danger-text: light-dark(#b91c1c, #fca5a5); --info: light-dark(#1d4ed8, #60a5fa); --progress: light-dark(#6d28d9, #a78bfa); --neutral: light-dark(#5b616a, rgb(255 255 255 / .62)); --whatsapp: light-dark(#166534, #4ade80); --shadow-c: light-dark(rgb(15 17 21 / .06), rgb(0 0 0 / .5)); --shadow-c2: light-dark(rgb(15 17 21 / .12), rgb(0 0 0 / .85)); --font-head: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* identifiers only */ /* Type scale */ --fs-2xs: .6875rem; /* 11 bottom nav and studio side labels only */ --fs-xs: .75rem; /* 12 meta, table heads */ --fs-sm: .8125rem; /* 13 labels, secondary */ --fs-ui: .875rem; /* 14 nav, buttons, tables, lists, dialogs */ --fs-md: .9375rem; /* 15 body */ --fs-lg: 1.0625rem; /* 17 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.75rem; /* 28 page title, stat figures */ --fs-3xl: 2.5rem; /* 40 */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --radius-xs: 6px; /* badges, small keys */ --radius-sm: 8px; /* buttons, inputs, nav items */ --radius: 10px; /* wells, theme switch */ --radius-md: 12px; /* flashes, toasts, choice cards, list rows */ --radius-lg: 14px; /* cards, strips */ --radius-xl: 18px; /* dialogs, voice demo */ --shadow: inset 0 1px 0 var(--edge), 0 1px 2px var(--shadow-c), 0 4px 12px -6px var(--shadow-c); --shadow-pop: 0 0 0 1px var(--line), 0 24px 56px -20px var(--shadow-c2), 0 4px 12px -4px var(--shadow-c); --ease: cubic-bezier(.16, 1, .3, 1); --tap: 44px; --sidebar: 256px; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* Base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--fs-md); line-height: 1.6; font-feature-settings: 'ss01', 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; caret-color: var(--teal); } ::selection { background: color-mix(in srgb, var(--teal) 28%, transparent); color: var(--text-strong); } * { scrollbar-width: thin; scrollbar-color: var(--line-hover) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius); border: 2px solid var(--bg); } ::-webkit-scrollbar-track { background: transparent; } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; margin: 0; text-wrap: balance; color: var(--text-strong); } h1 { font-size: var(--fs-2xl); letter-spacing: -.03em; line-height: 1.15; } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); letter-spacing: -.015em; } h4 { font-size: var(--fs-md); letter-spacing: -.01em; } p { margin: 0; text-wrap: pretty; } a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--teal-hover); } img, svg { display: block; max-width: 100%; } /* Mono is for identifiers only: invoice numbers, references, links, keys. Figures use .num (sans, tabular). */ code, kbd, pre, .mono { font-family: var(--font-mono); font-size: .9em; font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-8) 0; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } a:not([class]):focus-visible { border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--teal); color: var(--text-on-accent); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; } .skip-link:focus { top: 12px; } .icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .icon--sm { width: 16px; height: 16px; } .icon--lg { width: 22px; height: 22px; } /* Disclosure: every
summary gets a chevron that turns when open. Summaries styled as buttons opt out. */ details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } details > summary:not(.btn) { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; border-radius: var(--radius-xs); } details > summary:not(.btn):hover { color: var(--text); } details > summary:not(.btn)::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .2s var(--ease); } details[open] > summary:not(.btn)::after { transform: rotate(180deg); } @media (pointer: coarse) { details > summary:not(.btn) { min-height: var(--tap); } } /* Shell */ .shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100dvh; } .sidebar { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; background: var(--bg-side); border-right: 1px solid var(--line); padding: var(--space-5) var(--space-3) var(--space-4); } .brand { display: flex; align-items: center; gap: 11px; padding: 4px 10px 20px; color: var(--text); text-decoration: none; } .brand:hover { color: var(--text-strong); } @media (pointer: coarse) { .topbar .brand, .auth__mobile-brand { min-height: var(--tap); } } /* Partner dashboard trial name (pa.css styles the row): a 44px tap without moving the line. */ @media (pointer: coarse) { .trial-row__top > a { display: inline-block; padding-block: 10px; margin-block: -10px; } } /* Prospect header website link: a 44px tap on touch. */ @media (pointer: coarse) { .prospect-site { display: inline-block; padding-block: 12px; margin-block: -12px; } } .brand__mark { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--brand); display: grid; place-items: center; color: #fff; flex: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), 0 4px 12px -6px rgb(109 40 217 / .55); } .brand__mark .icon { width: 17px; height: 17px; stroke-width: 2; } .brand__text { display: flex; flex-direction: column; line-height: 1.2; gap: 1px; } .brand__name { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-ui); letter-spacing: -.01em; color: var(--text-strong); } .brand__area { font-size: var(--fs-xs); color: var(--text-3); } .nav { display: flex; flex-direction: column; gap: 1px; } /* The nav scrolls on short screens; the theme switch and Sign Out stay pinned under it. */ .sidebar > .nav { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px 12px; } .nav__section { font-size: var(--fs-xs); color: var(--text-3); padding: 14px 10px 5px; font-weight: 500; letter-spacing: .01em; } .nav__link { display: flex; align-items: center; gap: 11px; min-height: 36px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: var(--fs-ui); font-weight: 500; border: 1px solid transparent; transition: background-color .15s var(--ease), color .15s var(--ease); } .nav__link .icon { width: 17px; height: 17px; color: var(--text-3); transition: color .15s var(--ease); } .nav__link:hover { color: var(--text); background: var(--hover); } .nav__link:hover .icon { color: var(--text-2); } .nav__link[aria-current="page"] { color: var(--text-strong); background: var(--card); border-color: var(--line); box-shadow: 0 1px 2px var(--shadow-c); } .nav__link[aria-current="page"] .icon { color: var(--teal); } .nav__link:focus-visible { outline-offset: -2px; } .sidebar__foot { flex: none; padding-top: var(--space-4); border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); } /* minmax: a long email truncates instead of widening the foot past the sidebar and clipping the theme switch */ .sidebar__user { display: flex; align-items: center; gap: 10px; padding-inline: 6px; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--elevated); border: 1px solid var(--line-strong); display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 600; color: var(--text); flex: none; font-family: var(--font-body); text-transform: uppercase; } button.avatar { cursor: pointer; padding: 0; } .who { min-width: 0; flex: 1; line-height: 1.35; } .who__name { font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); } .who__email { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Theme switch: System, Light, Dark. portal.js stores the choice. */ .theme-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--radius); background: var(--hover); border: 1px solid var(--line); } .theme-switch__opt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-xs); background: transparent; color: var(--text-3); font: 500 var(--fs-xs)/1 var(--font-body); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); } .theme-switch__opt .icon { width: 14px; height: 14px; } .theme-switch__opt:hover { color: var(--text); } .theme-switch__opt[aria-pressed="true"] { background: var(--card); color: var(--text-strong); border-color: var(--line); box-shadow: 0 1px 2px var(--shadow-c); } .theme-switch__opt:focus-visible { outline-offset: -1px; } .theme-switch--icons { display: inline-grid; } .theme-switch--icons .theme-switch__opt { width: 34px; padding: 0; } @media (pointer: coarse) { .theme-switch__opt { min-height: var(--tap); } .theme-switch--icons .theme-switch__opt { width: var(--tap); } } .main { min-width: 0; padding: var(--space-12) clamp(24px, 4.2vw, 64px) var(--space-16); } .container { max-width: 1200px; margin: 0 auto; } .topbar { display: none; } .bottom-nav { display: none; } @media (max-width: 899px) { .shell { grid-template-columns: minmax(0, 1fr); } .sidebar { display: none; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: sticky; top: 0; z-index: 30; padding: 8px var(--space-4); padding-top: calc(8px + env(safe-area-inset-top)); background: var(--glass); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); } .topbar .brand { padding: 0; } .topbar button.avatar { width: 40px; height: 40px; } .main { padding: var(--space-6) var(--space-5) calc(104px + env(safe-area-inset-bottom)); } .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--glass); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid var(--line-strong); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); } .bottom-nav__item { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; border-radius: var(--radius); color: var(--text-3); text-decoration: none; font: 500 var(--fs-2xs)/1.2 var(--font-body); background: none; border: 0; cursor: pointer; padding: 0 2px; } .bottom-nav__item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bottom-nav__item[aria-current="page"] { color: var(--teal); } .bottom-nav__item .icon { width: 22px; height: 22px; } .bottom-nav__item:focus-visible { outline-offset: -2px; } } @media (max-width: 899px) and (pointer: coarse) { .topbar button.avatar { width: var(--tap); height: var(--tap); } } /* Page header. Actions sit on the title's line at 900px and up (top aligned), and go full width below. */ .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-10); } .page-header__text { flex: 1; min-width: 0; max-width: 70ch; } .page-header__sub { color: var(--text-2); margin-top: 10px; font-size: var(--fs-md); } .page-header__actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: -4px; } .page-header:has(.page-header__back) .page-header__actions { margin-top: 38px; } .page-header__back { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--text-3); text-decoration: none; margin: 0 0 14px -4px; min-height: 28px; padding-right: 6px; border-radius: var(--radius-xs); } .page-header__back:hover { color: var(--text); } @media (pointer: coarse) { .page-header__back { min-height: var(--tap); margin-bottom: 0; } .page-header:has(.page-header__back) .page-header__actions { margin-top: 40px; } } @media (max-width: 899px) { h1, .page-header h1 { font-size: 1.5rem; } .page-header { flex-wrap: wrap; margin-bottom: var(--space-8); gap: var(--space-4); } .page-header__sub { margin-top: 6px; } .page-header__actions, .page-header:has(.page-header__back) .page-header__actions { width: 100%; margin-top: 0; justify-content: flex-start; } .page-header__actions > .btn, .page-header__actions > form > .btn { flex: 1; } } /* Buttons. Heights: 40 (md), 32 (sm), 44 in filter bars and on touch, so a button beside an input matches it. */ .btn { --btn-bg: var(--elevated); --btn-fg: var(--text); --btn-bd: var(--line-strong); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-sm); background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); box-shadow: 0 1px 2px var(--shadow-c); font: 500 var(--fs-ui)/1 var(--font-body); letter-spacing: -.005em; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), transform .1s var(--ease), box-shadow .15s var(--ease); } .btn:hover { color: var(--btn-fg); border-color: var(--line-hover); } .btn:active { transform: translateY(1px); } .btn--primary { --btn-bg: var(--teal); --btn-fg: var(--text-on-accent); --btn-bd: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px var(--shadow-c), 0 4px 12px -6px var(--teal-glow); } .btn--primary:hover { --btn-bg: var(--teal-hover); border-color: transparent; } .btn--secondary:hover { --btn-bg: color-mix(in srgb, var(--elevated) 92%, var(--text)); } .btn--ghost { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--text-2); box-shadow: none; } .btn--ghost:hover { --btn-bg: var(--hover-strong); --btn-fg: var(--text); border-color: transparent; } .btn--danger { --btn-bg: color-mix(in srgb, var(--danger) 8%, var(--card)); --btn-fg: var(--danger-text); --btn-bd: color-mix(in srgb, var(--danger) 28%, transparent); box-shadow: none; } .btn--danger:hover { --btn-bg: color-mix(in srgb, var(--danger) 14%, var(--card)); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .btn--sm { min-height: 32px; padding: 0 11px; font-size: var(--fs-sm); border-radius: var(--radius-sm); } .btn--lg { min-height: 50px; padding: 0 24px; font-size: var(--fs-md); border-radius: var(--radius); } .btn--block { width: 100%; } .btn--icon { padding: 0; width: 40px; } .btn--icon.btn--sm { width: 32px; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; pointer-events: none; } .btn[aria-busy="true"] { color: transparent !important; pointer-events: none; } .btn[aria-busy="true"] > * { visibility: hidden; } .btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--btn-fg); border-right-color: transparent; animation: spin .7s linear infinite; } @media (pointer: coarse) { .btn { min-height: var(--tap); } .btn--sm { min-height: var(--tap); } .btn--icon, .btn--icon.btn--sm { width: var(--tap); } } @keyframes spin { to { transform: rotate(360deg); } } /* Forms */ .form { display: grid; gap: var(--space-6); } /* align start: a hint under one field must not stretch the input beside it */ .form-row { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; } .field { display: grid; gap: 8px; min-width: 0; align-content: start; } .field__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); } .field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .field__label .req { color: var(--text-3); font-weight: 400; } .field__hint { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; } .field__error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--danger-text); } .field__error .icon { width: 15px; height: 15px; } .form-section + .form-section { border-top: 1px solid var(--line); padding-top: var(--space-6); } .form-section__title { font-size: var(--fs-md); margin-bottom: var(--space-4); } .input, .select, .textarea { width: 100%; min-height: var(--tap); padding: 10px 14px; background: var(--input); color: var(--text); border: 1px solid var(--line-control); border-radius: var(--radius-sm); box-shadow: 0 1px 2px var(--shadow-c); font: 400 var(--fs-md)/1.4 var(--font-body); transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--placeholder); } /* A unit inside the input, before the value: . */ .affix { position: relative; } .affix__text { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: var(--fs-md); pointer-events: none; } .affix > .input { padding-left: 32px; font-variant-numeric: tabular-nums; } .input:hover, .select:hover, .textarea:hover { border-color: var(--line-control-hover); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 22%, transparent); } .input[disabled], .select[disabled], .textarea[disabled] { opacity: .55; cursor: not-allowed; background: var(--raised); } /* Grows with its content (where supported) instead of clipping text mid-line. */ .textarea { min-height: 120px; max-height: 320px; resize: vertical; line-height: 1.55; field-sizing: content; } .select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23868b95' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; } .select option { background: var(--elevated); color: var(--text); } .field--error .input, .field--error .select, .field--error .textarea { border-color: color-mix(in srgb, var(--danger) 60%, transparent); } .field--error .input:focus, .field--error .select:focus, .field--error .textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent); } input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px var(--input) inset; -webkit-text-fill-color: var(--text); } .check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); } .check input { appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 1px solid var(--line-control); background: var(--input); display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color .15s, border-color .15s; } .check input::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--text-on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } .check input:checked { background: var(--teal); border-color: var(--teal); } .check input:checked::after { opacity: 1; } .check input:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* Cards */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); min-width: 0; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--line); min-height: 64px; } .card__title { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 600; letter-spacing: -.012em; color: var(--text-strong); } .card__sub { font-size: var(--fs-sm); color: var(--text-3); margin-top: 3px; } .card__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; } .card__head > .card__actions:only-child { flex: 1; } .card__body { padding: var(--space-6); } .card__foot { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--text-2); } .card--flush > .card__body { padding: 0; } /* Flush cards clip their contents to the rounded corners (a shaded table head or row hover would square them). clip, not hidden: it makes no scroll container, so sticky headers and footers inside still stick. */ .card--flush { overflow: clip; } /* Danger zone: one card at the end of the main column holding the destructive actions. */ .card--danger { border-color: color-mix(in srgb, var(--danger) 26%, var(--line)); } .card--danger > .card__head .card__title { color: var(--danger-text); } .danger-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); } .danger-row:first-child { padding-top: 0; } .danger-row:last-child { padding-bottom: 0; border-bottom: 0; } .danger-row__text { min-width: 0; flex: 1 1 260px; } .danger-row__title { font-size: var(--fs-ui); font-weight: 500; color: var(--text); } .danger-row__desc { font-size: var(--fs-sm); color: var(--text-3); margin-top: 2px; } @media (max-width: 699px) { .card__head { padding: var(--space-4) var(--space-5); min-height: 58px; } .card__body { padding: var(--space-5); } .card__foot { padding: var(--space-3) var(--space-5); } } .grid { display: grid; gap: var(--space-6); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Side columns hold their natural height instead of stretching every card to the tallest column. */ .grid--main { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: start; } .grid--main > .stack { align-content: start; } @media (max-width: 1099px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 699px) { .grid, .stack { gap: var(--space-5); } .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } } .stack { display: grid; gap: var(--space-6); } .stack--sm { gap: var(--space-3); } .stack--lg { gap: var(--space-8); } .section + .section { margin-top: var(--space-10); } /* Stats: one ruled strip, not a row of boxes. figures are Geist with tabular numerals (not mono). Words (a plan name, a date) use the text variant; a unit ("of 36") sits smaller and quieter after the figure. Short strips (one or two cells) sit left, not stretched. */ .stats { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: var(--space-10); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .stats:not(:has(> :nth-child(3))) { grid-template-columns: repeat(auto-fit, minmax(200px, 300px)); width: fit-content; max-width: 100%; } .stat { position: relative; display: block; padding: 20px 24px 22px; color: var(--text); text-decoration: none; min-width: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); transition: background-color .15s var(--ease); } a.stat:hover { background: var(--hover); color: var(--text); } /* The strip clips overflow, so focus is drawn inside the cell. */ .stat:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; border-radius: var(--radius-lg); } .stat__label { font-size: var(--fs-sm); color: var(--text-2); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .stat__label .icon { color: var(--text-3); } .stat__value { font-family: var(--font-body); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.035em; margin-top: 10px; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); } .stat__value--text { letter-spacing: -.025em; } .stat__unit { font-size: .6em; font-weight: 500; letter-spacing: -.01em; color: var(--text-3); margin-left: .2em; } .stat__hint { font-size: var(--fs-xs); color: var(--text-3); margin-top: 6px; } .stats--in-stack { margin-bottom: 0; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } @media (max-width: 699px) { .stats, .stats:not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; margin-bottom: var(--space-8); } .stats > :last-child:nth-child(odd) { grid-column: 1 / -1; } .stat { padding: 16px 16px 18px; } .stat__value { font-size: 1.4375rem; margin-top: 8px; } } /* Attention strip: what needs a person, as one ruled neutral strip. Tone (danger, warning, info, success, progress) colours only the dot and the count. Zero items are muted. */ .attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: var(--space-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; } .attention__item { --tone: var(--neutral); --count: var(--text-strong); position: relative; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 14px 18px 14px 20px; color: var(--text); text-decoration: none; min-width: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); transition: background-color .15s var(--ease); } .attention__item::before { content: ""; order: 0; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--tone); } a.attention__item:hover { background: var(--hover); color: var(--text); } .attention__item:focus-visible { outline: 2px solid var(--teal); outline-offset: -3px; border-radius: var(--radius-lg); } .attention__label { order: 1; flex: 1; min-width: 0; font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; } .attention__hint { display: block; font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; overflow-wrap: anywhere; text-wrap: pretty; } .attention__count { order: 2; flex: none; font: 600 var(--fs-lg)/1 var(--font-body); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--count); white-space: nowrap; } .attention__item > .icon { order: 3; color: var(--text-3); margin-right: -4px; } .attention__item[data-tone="danger"], .attention__item--danger { --tone: var(--danger); --count: var(--danger-text); } .attention__item[data-tone="warning"], .attention__item--warning { --tone: var(--warning); --count: var(--warning); } .attention__item[data-tone="info"], .attention__item--info { --tone: var(--info); --count: var(--info); } .attention__item[data-tone="success"], .attention__item--success { --tone: var(--success); --count: var(--success); } .attention__item[data-tone="progress"], .attention__item--progress { --tone: var(--progress); --count: var(--progress); } .attention__item--hot { --count: var(--tone); } /* legacy: --tone set inline */ .attention__item--zero { --tone: var(--line-hover); --count: var(--text-3); color: var(--text-3); } .attention__item--zero > .icon { display: none; } @media (max-width: 699px) { .attention { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-5); } .attention__item { min-height: var(--tap); padding: 10px 14px 10px 16px; } } /* Meter */ .meter { display: grid; gap: 10px; } .meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-sm); } .meter__value { font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); white-space: nowrap; } .meter__track { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .meter__fill { height: 100%; border-radius: inherit; background: var(--teal); } .meter--warn .meter__fill { background: var(--warning); } .meter--full .meter__fill { background: var(--danger); } /* Badges: the fill is mixed into card (opaque) so the label holds AA on any surface. */ .badge { --tone: var(--neutral); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 7px; border-radius: var(--radius-xs); font-size: var(--fs-xs); font-weight: 500; line-height: 1; white-space: nowrap; color: var(--tone); background: color-mix(in srgb, var(--tone) 10%, var(--card)); border: 1px solid color-mix(in srgb, var(--tone) 20%, transparent); } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .badge--plain::before { display: none; } .badge--neutral { --tone: var(--neutral); } .badge--progress { --tone: var(--progress); } .badge--progress::before { animation: pulse 1.8s ease-in-out infinite; } .badge--info { --tone: var(--info); } .badge--success { --tone: var(--success); } .badge--warning { --tone: var(--warning); } .badge--danger { --tone: var(--danger); } .badge--accent { --tone: var(--teal); } @keyframes pulse { 50% { opacity: .35; } } /* Tables. Desktop: 44 to 52px rows, figures right-aligned in sans tabular, dates and figures never wrap, links in cells are plain text until hovered. A row with an a.row-link is clickable as a whole (the link's ::after covers the row). Phone (under 720px, .table--stack, the default for ): each row becomes a compact two-line row on one surface, no card-in-card. Tag cells with data attributes: data-primary line 1, left: the title (usually holds the a.row-link). Required once per row. data-trail line 1, right: the one figure or status that matters (amount, badge). data-meta line 2, inline, spaced apart, no label. data-meta="label" prefixes the column label. data-phone="hide" dropped on phones. Untagged cells degrade to line 2 with their data-label as a prefix, so nothing is lost before a view is tagged. Without data-primary, the first cell acts as the title. */ .table-wrap { width: 100%; overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); } .table th { text-align: left; font-weight: 500; font-size: var(--fs-xs); color: var(--text-3); padding: 10px var(--space-6); border-bottom: 1px solid var(--line); white-space: nowrap; background: color-mix(in srgb, var(--bg) 55%, var(--card)); letter-spacing: .01em; } .table td { padding: 12px var(--space-6); border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.4; } /* Inner columns sit 16px apart so wide ledgers fit a 1280 laptop; the outer edges keep the card's 24px. */ @media (min-width: 720px) { .table th, .table td { padding-inline: var(--space-4); } .table th:first-child, .table td:first-child { padding-left: var(--space-6); } .table th:last-child, .table td:last-child { padding-right: var(--space-6); } } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr { position: relative; transition: background-color .12s; } .table tbody tr:has(.row-link):hover { background: var(--hover); cursor: pointer; } .table .num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table td.date, .table .cell-date { white-space: nowrap; font-variant-numeric: tabular-nums; } .table td a { color: inherit; text-decoration: none; } .table td a:hover { color: var(--teal); text-decoration: underline; } .table a.row-link { color: var(--text-strong); font-weight: 500; text-decoration: none; } .table a.row-link::after { content: ""; position: absolute; inset: 0; } .table a.row-link:hover { color: var(--teal); text-decoration: none; } .table a.row-link:focus-visible { outline: none; } .table tbody tr:has(a.row-link:focus-visible) { outline: 2px solid var(--teal); outline-offset: -2px; } /* Other controls in a clickable row stay clickable above the row link. */ .table td a:not(.row-link), .table td button, .table td form, .table td input, .table td select, .table td label { position: relative; z-index: 1; } .table .badge { vertical-align: middle; } .cell-sub { display: block; font-size: var(--fs-xs); color: var(--text-3); margin-top: 2px; } .cell-wide { min-width: 200px; } .cell-error { max-width: 64ch; line-height: 1.45; } .cell-chevron { width: 1%; padding-left: 0 !important; color: var(--text-3); } /* Audit details: field label, then old to new. Words, not code; the old value quieter than the new. */ .audit-meta { display: grid; gap: 2px; font-size: var(--fs-xs); color: var(--text-2); max-width: 52ch; } .audit-meta__key { color: var(--text-3); } .audit-meta__old { color: var(--text-3); } .audit-meta__new { color: var(--text); font-weight: 500; } /* Phone widths: every list link (row titles included, though their ::after already covers the row) and inline link is at least 24px tall, padded without moving the text. Touch screens get the full 44px below. */ @media (max-width: 719px) { .table a.row-link, .plist__name, .table td a:not(.row-link), .plist__row a:not(.plist__name), .plist__note a, .dl dd a, .card__foot > a:not(.btn), .empty a:not(.btn) { display: inline-block; padding-block: 4px; margin-block: -4px; } } /* Inline links in table cells, detail lists, card feet, list notes and empty states reach 44px on touch without moving the text. */ @media (pointer: coarse) { .table td a:not(.row-link), .dl dd a, .card__foot > a:not(.btn), .plist__note a, .empty a:not(.btn) { display: inline-block; padding-block: 12px; margin-block: -12px; } /* A truncated value truncates inside its own link, so the row does not clip the link's tap area. */ .dl dd.truncate:has(> a) { overflow: visible; } .dl dd.truncate > a { display: block; overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 719px) { .table--stack thead { display: none; } .table--stack, .table--stack tbody { display: block; width: 100%; } .table--stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px; padding: 12px var(--space-5); border-bottom: 1px solid var(--line); } .table--stack tbody tr:last-child { border-bottom: 0; } /* The line break between line 1 (title, trail) and line 2 (meta). */ .table--stack tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; } .table--stack td { display: block; padding: 0; border: 0; min-width: 0; text-align: left; line-height: 1.4; } .table--stack td[data-primary] { order: 0; flex: 1 1 0; font-size: var(--fs-md); font-weight: 500; color: var(--text-strong); } .table--stack td[data-primary] .cell-sub { font-weight: 400; } .table--stack td[data-trail] { order: 1; flex: none; margin-left: auto; padding-left: var(--space-3); text-align: right; font-weight: 500; color: var(--text-strong); } .table--stack td:not([data-primary], [data-trail], [data-phone="hide"]) { order: 3; flex: 0 1 auto; font-size: var(--fs-xs); color: var(--text-2); font-weight: 400; } .table--stack td:not([data-primary], [data-trail], [data-phone="hide"]) .cell-sub { display: inline; margin: 0 0 0 4px; } .table--stack td:not([data-primary], [data-trail], [data-phone="hide"]) .badge { height: 20px; } /* Line 2 items sit apart on a 14px gap, not dot separators, so a wrapped line never starts with a dot. Labels are always the body font. */ .table--stack td:not([data-primary], [data-trail], [data-meta], [data-phone="hide"])[data-label]::before, .table--stack td[data-meta="label"][data-label]::before { content: attr(data-label) "\00a0"; color: var(--text-3); font-family: var(--font-body); letter-spacing: 0; margin: 0; } .table--stack td[data-phone="hide"] { display: none; } .table--stack .num { text-align: left; } .table--stack td[data-trail].num, .table--stack td[data-trail] .num { text-align: right; } } /* Lists */ .list { list-style: none; margin: 0; padding: 0; } .list__item { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-6); border-bottom: 1px solid var(--line); min-height: 56px; } .list__item:last-child { border-bottom: 0; } .list__item--top { align-items: flex-start; } .list__main { min-width: 0; flex: 1; } .list__title { font-size: var(--fs-ui); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .list__meta { font-size: var(--fs-xs); color: var(--text-3); margin-top: 1px; } .dl { display: grid; grid-template-columns: max-content 1fr; gap: 12px var(--space-6); margin: 0; font-size: var(--fs-ui); align-items: baseline; } .dl dt { color: var(--text-3); } .dl dd { margin: 0; text-align: right; min-width: 0; font-variant-numeric: tabular-nums; } .dl .mono { font-size: var(--fs-sm); line-height: inherit; } @media (max-width: 699px) { .list__item { padding: 12px var(--space-5); } } /* Funnel bars (pipeline by status): one teal fill on the neutral track; the status tone is only the dot. */ .bars { display: grid; gap: 10px; } .bar { display: grid; grid-template-columns: 132px minmax(0, 1fr) 36px; align-items: center; gap: 14px; font-size: var(--fs-sm); } .bar__label { display: flex; align-items: center; gap: 8px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .bar__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--tone, var(--neutral)); } .bar__track { height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .bar__track, .bar__fill { display: block; } .bar__fill { height: 100%; border-radius: inherit; background: var(--teal); } .bar__fill[style*="width: 0%"], .bar__fill[style*="width:0%"] { display: none; } .bar:has(.bar__fill[style*="width: 0%"]) .bar__label, .bar:has(.bar__fill[style*="width: 0%"]) .bar__value { color: var(--text-3); } .bar__value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--text); } .bars--links { gap: 0; } .bars--links .bar { min-height: 32px; text-decoration: none; color: inherit; border-radius: var(--radius-sm); margin: 0 -8px; padding: 0 8px; } .bars--links .bar:hover { background: var(--hover); } .bars--links .bar:hover .bar__label { color: var(--text); } .bars--links .bar:focus-visible { outline-offset: -2px; } @media (pointer: coarse) { .bars--links .bar { min-height: 40px; } } /* Empty state. Default: a quiet centred block. compact: one muted line inside a subordinate panel. */ .empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-12) var(--space-6); gap: var(--space-2); } .empty__icon { color: var(--text-3); margin-bottom: var(--space-1); } .empty__icon .icon { width: 24px; height: 24px; stroke-width: 1.5; } .empty__title { font-family: var(--font-head); font-size: var(--fs-md); font-weight: 600; letter-spacing: -.012em; color: var(--text-strong); } .empty__body { color: var(--text-2); max-width: 46ch; font-size: var(--fs-ui); } .empty__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-3); } .empty--compact { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; text-align: left; gap: 4px 8px; padding: var(--space-5) var(--space-6); font-size: var(--fs-ui); color: var(--text-3); } .empty--compact .empty__icon { margin: 0; } .empty--compact .empty__icon .icon { width: 16px; height: 16px; } .empty--compact .empty__title { font: inherit; color: var(--text-2); letter-spacing: 0; } .empty--compact .empty__body { color: var(--text-3); font-size: inherit; } .empty--compact .empty__actions { margin: 0 0 0 auto; } .card__body:not(.card--flush > .card__body) > .empty--compact { padding: 0; } @media (max-width: 699px) { .empty--compact { padding: var(--space-4) var(--space-5); } } /* Flash messages and callouts */ .flash-stack { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); } .flash { --tone: var(--info); display: flex; align-items: flex-start; gap: 12px; padding: 13px 12px 13px 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--tone) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--tone) 24%, transparent); font-size: var(--fs-ui); color: var(--text); animation: flash-in .35s var(--ease) both; } .flash > .icon { color: var(--tone); margin-top: 1px; } .flash__body { flex: 1; min-width: 0; padding-top: 1px; } .flash__title { font-weight: 600; color: var(--text-strong); } .flash__close { margin: -6px -4px -6px 0; color: var(--text-3); } .flash--success { --tone: var(--success); } .flash--error { --tone: var(--danger); } .flash--warning { --tone: var(--warning); } .flash--info { --tone: var(--info); } .flash ul { margin: 4px 0 0; padding-left: 18px; } @keyframes flash-in { from { opacity: 0; transform: translateY(-4px); } } .callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); justify-content: space-between; padding: var(--space-6); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--teal) 6%, var(--card)); border: 1px solid var(--teal-line); box-shadow: var(--shadow); margin-bottom: var(--space-8); } .callout__text { max-width: 60ch; } .callout__text p { color: var(--text-2); margin-top: 4px; font-size: var(--fs-ui); } /* Filter chips: wrap on desktop, scroll sideways with a fade on phones. Counts always shown when known. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 var(--space-4); } .chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; background: var(--card); transition: border-color .15s var(--ease), color .15s var(--ease), background-color .15s var(--ease); } .chip:hover { color: var(--text); border-color: var(--line-hover); } .chip[aria-current]:not([aria-current="false"]) { color: var(--text-strong); background: var(--teal-soft); border-color: var(--teal-line); } .chip__count { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } .chip[aria-current]:not([aria-current="false"]) .chip__count { color: var(--teal); } @media (pointer: coarse) { .chip { min-height: var(--tap); } } @media (max-width: 719px) { .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--space-5) * -1) var(--space-4); padding: 2px var(--space-5); padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); } .chips::-webkit-scrollbar { display: none; } } /* Filter bar: . One row of search plus filters above a list; every control is 44px tall. Selects submit on change (portal.js). On phones the filters fold behind a "Filters" button; search stays out. */ .filter-bar { display: grid; gap: var(--space-3); margin-bottom: var(--space-5); } .filter-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .filter-bar__fields { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; } .filter-bar .search { flex: 1 1 260px; max-width: 420px; } .filter-bar .btn { min-height: var(--tap); } .filter-bar__toggle { display: none; } .filter-bar__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--teal); color: var(--text-on-accent); font-size: var(--fs-2xs); font-weight: 600; font-variant-numeric: tabular-nums; } .filter { position: relative; flex: 0 1 190px; min-width: 0; } .filter--date { display: flex; align-items: center; flex: 0 1 200px; } .filter__prefix { position: absolute; left: 14px; font-size: var(--fs-sm); color: var(--text-3); pointer-events: none; } .filter--date .input { padding-left: 52px; } .filter-bar__clear { flex: none; } .js .filter-bar__submit { display: none; } @media (max-width: 719px) { .filter-bar .search { flex: 1 1 0; max-width: none; } .js .filter-bar__toggle { display: inline-flex; flex: none; } .js .filter-bar:not([data-open]) .filter-bar__fields { display: none; } .filter-bar__fields { flex-basis: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } .filter-bar__fields > * { grid-column: 1 / -1; flex: none; } .filter-bar__fields > .filter--date { grid-column: auto; } .filter-bar__fields > .filter--date .input { padding-left: 14px; padding-top: 18px; padding-bottom: 2px; } .filter-bar__fields > .filter--date .filter__prefix { top: 5px; left: 14px; font-size: var(--fs-2xs); } .filter-bar__fields .btn { width: 100%; } } /* Search input with a leading icon */ .search { position: relative; flex: 1 1 220px; min-width: 0; } .search .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .search .input { padding-left: 40px; } /* Legacy filter rows (.toolbar in admin views, .filters in billing views) until they move to . */ .toolbar, .filters { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-bottom: var(--space-5); } .toolbar .field, .filters > .field { flex: 1 1 170px; min-width: 0; margin: 0; } .toolbar .btn, .filters .btn { flex: none; min-height: var(--tap); } .filters > .form-actions { flex: 0 0 auto; } /* Settings: one column of groups beside a sticky rail (portal.js marks the group in view). */ .settings { display: grid; grid-template-columns: 188px minmax(0, 760px); gap: var(--space-10); align-items: start; } .settings__rail { position: sticky; top: var(--space-6); display: grid; gap: 1px; } .settings__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 0 10px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: var(--fs-ui); font-weight: 500; } .settings__link .icon { color: var(--text-3); } .settings__link:hover { color: var(--text); background: var(--hover); } .settings__link[aria-current="true"] { color: var(--text-strong); background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 1px 2px var(--shadow-c); } .settings__link:focus-visible { outline-offset: -2px; } .settings__rail-sep { height: 1px; background: var(--line); margin: var(--space-3) 10px; } .settings__groups { display: grid; gap: var(--space-6); min-width: 0; } .settings__group { scroll-margin-top: var(--space-6); } .settings__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); align-items: start; } .settings__form > * { grid-column: 1 / -1; } .settings__form > .settings__half { grid-column: auto; } /* AI Providers card and the image model checklist (Settings) */ .providers { display: grid; } .provider { display: grid; gap: var(--space-3); padding: var(--space-5) 0; border-top: 1px solid var(--line); } .provider:first-child { padding-top: 0; border-top: 0; } .provider:last-child { padding-bottom: 0; } .provider__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; } .provider__name { margin: 0; font: 600 var(--fs-md)/1.3 var(--font-head); color: var(--text-strong); } .provider__meta { margin: 0; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.5; max-width: 60ch; } .provider__test { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.45; background: var(--hover); color: var(--text-2); } .provider__test .icon { flex: none; margin-top: 2px; } .provider__test--ok .icon { color: var(--success); } .provider__test--bad .icon { color: var(--danger-text); } .provider__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: end; } .provider__form .field { margin: 0; } .provider__actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .provider__actions form { display: contents; } .models { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; } .models legend { padding: 0; margin-bottom: var(--space-2); } .model-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s, background-color .15s; } .model-option:hover { border-color: var(--line-hover); background: var(--hover); } .model-option:has(input:checked) { border-color: var(--teal-line); background: var(--teal-soft); } .model-option input { appearance: none; width: 18px; height: 18px; margin: 0; border-radius: 5px; border: 1px solid var(--line-control); background: var(--input); display: grid; place-items: center; cursor: pointer; transition: background-color .15s, border-color .15s; } .model-option input::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--text-on-accent); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; } .model-option input:checked { background: var(--teal); border-color: var(--teal); } .model-option input:checked::after { opacity: 1; } .model-option__text { display: grid; gap: 2px; min-width: 0; } .model-option__name { font-size: var(--fs-sm); font-weight: 500; color: var(--text); } .model-option__note { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.45; } .model-option__price { font-size: var(--fs-sm); color: var(--text); white-space: nowrap; } .photo-cell { display: flex; align-items: flex-start; gap: 12px; min-width: 0; } .photo-cell__thumb { flex: none; display: block; width: 56px; height: 42px; border-radius: var(--radius-xs); overflow: hidden; background: var(--hover); } .photo-cell__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-cell__text { display: grid; gap: 2px; min-width: 0; } @media (max-width: 560px) { .provider__form { grid-template-columns: 1fr; } .provider__form .btn { justify-self: start; } .model-option { grid-template-columns: auto minmax(0, 1fr); } .model-option__price { grid-column: 2; } } @media (max-width: 559px) { .settings__form > .settings__half { grid-column: 1 / -1; } } @media (max-width: 1099px) { .settings { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .settings__rail { position: static; display: flex; overflow-x: auto; scrollbar-width: none; gap: 4px; margin: 0 calc(var(--space-5) * -1); padding: 0 var(--space-5); } .settings__rail::-webkit-scrollbar { display: none; } .settings__link { flex: none; min-height: 36px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 14px; font-size: var(--fs-sm); } .settings__link[aria-current="true"] { box-shadow: none; } .settings__rail-sep { display: none; } .settings__group { scroll-margin-top: 72px; } } @media (pointer: coarse) { .settings__link { min-height: var(--tap); } } /* Dialog and sheet */ .dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 0; margin: auto; background: var(--elevated); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-pop); } .dialog:focus, .dialog:focus-visible { outline: none; } .dialog[open] { animation: dialog-in .25s var(--ease) both; } .dialog::backdrop { background: var(--scrim); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 12px 12px 24px; } .dialog__title { font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.015em; color: var(--text-strong); } .dialog__body { padding: 0 24px 24px; color: var(--text-2); font-size: var(--fs-ui); overflow-y: auto; } .dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: 14px 24px; border-top: 1px solid var(--line); background: var(--raised); border-radius: 0 0 var(--radius-xl) var(--radius-xl); } @keyframes dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } .sheet { width: 100%; max-width: 100%; max-height: 86dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom); } .sheet .dialog__head { padding-top: 12px; } .sheet .dialog__foot { border-radius: 0; } .sheet[open] { animation: sheet-in .3s var(--ease) both; } .sheet__grip { width: 40px; height: 4px; border-radius: 4px; background: var(--line-hover); margin: 10px auto 0; } .sheet .nav { padding: 0 12px 12px; } .sheet .nav__link { min-height: var(--tap); font-size: var(--fs-md); } .sheet .theme-switch { margin: 4px 0 14px; } .sheet__sub { font-size: var(--fs-xs); color: var(--text-3); margin: -10px 0 12px; } @keyframes sheet-in { from { transform: translateY(100%); } } /* Pagination */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-top: 1px solid var(--line); } .pagination__info { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; } .pagination__pages { display: flex; gap: 4px; flex-wrap: wrap; } .page-link { min-width: 36px; height: 36px; padding: 0 10px; display: inline-grid; place-items: center; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; border: 1px solid transparent; } .page-link:hover { background: var(--hover-strong); color: var(--text); } .page-link[aria-current="page"] { background: var(--card); color: var(--text-strong); border-color: var(--line-strong); box-shadow: 0 1px 2px var(--shadow-c); } .page-link[aria-disabled="true"] { opacity: .35; pointer-events: none; } @media (pointer: coarse) { .page-link { min-width: var(--tap); height: var(--tap); } } /* Auth screens. The form's heading sits on a fixed line (not centred), so it does not move between sign in, reset and error states. On phones the form comes first, then a compact product panel below it. */ .auth { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .auth__aside { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-10) clamp(32px, 5vw, 80px); background: var(--bg-side); border-right: 1px solid var(--line); isolation: isolate; } /* A faint dot grid fading out from the voice demo: the one texture in the product. */ .auth__aside::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(var(--line-strong) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 75%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 75%, #000 10%, transparent 75%); } /* The teal glow is a dark-theme effect only. */ .auth__aside::after { content: ""; position: absolute; inset: auto auto -30% -20%; width: 75%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, light-dark(transparent, color-mix(in srgb, var(--teal) 14%, transparent)), transparent 70%); pointer-events: none; } .auth__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); } .auth__top .brand { padding: 0; } .auth__story { display: grid; gap: var(--space-10); margin-top: clamp(40px, 12vh, 136px); width: min(440px, 100%); margin-inline: auto; } .auth__headline { font-family: var(--font-head); color: var(--text-strong); font-size: clamp(2.25rem, 3.6vw, 3.25rem); letter-spacing: -.04em; line-height: 1.02; max-width: 13ch; font-weight: 600; text-wrap: balance; } .auth__pitch p:not(.auth__headline) { color: var(--text-2); max-width: 42ch; margin-top: var(--space-5); font-size: var(--fs-lg); line-height: 1.55; } .auth__foot { font-size: var(--fs-xs); color: var(--text-3); margin-top: auto; } /* Top padding = aside padding + brand row + gap + story offset, so "Sign In" shares a line with the headline. */ .auth__main { position: relative; display: flex; flex-direction: column; align-items: center; padding: calc(110px + clamp(40px, 12vh, 136px)) var(--space-6) var(--space-12); background: var(--bg); } .auth__theme { position: absolute; top: var(--space-5); right: var(--space-5); } .auth__panel { width: min(400px, 100%); } .auth__panel h1 { font-size: 1.875rem; letter-spacing: -.035em; } .auth__lede { color: var(--text-2); margin: 10px 0 var(--space-8); } .auth__panel .flash-stack { margin: calc(var(--space-8) * -1 + var(--space-5)) 0 var(--space-6); } @media (pointer: fine) { .auth__panel .check { min-height: 32px; } } .auth__mobile-brand { display: none; } .auth__alt { margin-top: var(--space-8); font-size: var(--fs-sm); color: var(--text-3); text-align: left; } .link-quiet { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--text-2); text-decoration: none; border-radius: var(--radius-xs); min-height: 24px; } .link-quiet:hover { color: var(--teal); text-decoration: underline; } @media (pointer: coarse) { .link-quiet { min-height: var(--tap); } } .voice-demo { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-xl); padding: var(--space-6); max-width: 440px; box-shadow: var(--shadow-pop); } .voice-demo__row { display: flex; gap: 14px; align-items: flex-start; } .voice-demo__row + .voice-demo__row { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); } .voice-demo__who { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--raised); border: 1px solid var(--line-strong); color: var(--text-2); } .voice-demo__who--sage { background: var(--brand); border: 0; color: #fff; } .voice-demo__label { font-size: var(--fs-xs); color: var(--text-3); margin-bottom: 4px; display: flex; gap: 8px; align-items: center; } .voice-demo__text { font-size: var(--fs-md); line-height: 1.5; color: var(--text); } .wave { display: flex; align-items: center; gap: 3px; height: 20px; margin-top: 10px; } .wave i { display: block; width: 3px; border-radius: 2px; background: var(--teal); height: 30%; animation: wave 1.2s ease-in-out infinite; } .wave i:nth-child(2n) { animation-delay: -.3s; } .wave i:nth-child(3n) { animation-delay: -.6s; } .wave i:nth-child(5n) { animation-delay: -.9s; } @keyframes wave { 50% { height: 100%; } } @media (max-width: 899px) { .auth { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; } .auth__main { order: 1; align-items: stretch; padding: calc(var(--space-5) + env(safe-area-inset-top)) var(--space-5) var(--space-8); } .auth__panel { margin: 0 auto; } .auth__theme { position: static; order: 2; align-self: center; margin-top: var(--space-8); } .auth__mobile-brand { display: flex; margin: 0 0 var(--space-10); padding: 0; } /* The product panel follows the form: headline and the voice demo, no brand row, no paragraph. */ .auth__aside { order: 2; border-right: 0; border-top: 1px solid var(--line); padding: var(--space-8) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom)); gap: var(--space-6); } .auth__aside .auth__top { display: none; } .auth__story { margin-top: 0; gap: var(--space-5); width: min(400px, 100%); margin-inline: auto; } .auth__headline { font-size: 1.75rem; letter-spacing: -.03em; } .auth__pitch p:not(.auth__headline) { display: none; } .voice-demo { max-width: none; padding: var(--space-5); box-shadow: 0 0 0 1px var(--line); } .auth__foot { width: min(400px, 100%); margin-inline: auto; } } /* Error pages: layouts/error.blade.php */ .error-page { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; padding: var(--space-6) clamp(20px, 5vw, 64px) var(--space-10); } .error-page__top { display: flex; align-items: center; justify-content: space-between; } .error-page__top .brand { padding: 0; } .error-page__main { align-self: start; width: min(520px, 100%); margin: clamp(64px, 18vh, 180px) auto 0; } .error-page__code { font-family: var(--font-mono); font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1; color: var(--text-3); } .error-page h1 { margin-top: var(--space-5); } .error-page__text { color: var(--text-2); margin-top: var(--space-3); max-width: 46ch; } .error-page__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-8); } /* Design page */ .swatches { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .swatch { border: 1px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; font-size: var(--fs-xs); } .swatch__chip { height: 56px; border-bottom: 1px solid var(--line); } .swatch__meta { padding: 8px 10px; background: var(--card); } .swatch__meta code { color: var(--text-3); display: block; } .demo-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .demo-row--tight { gap: 6px; flex: 1; } .demo-label-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); } .demo-label-row > .xs { width: 110px; flex: none; } .form--demo { max-width: 640px; } .snippet--flush { margin: 0; } .callout--flush { margin: 0; } .callout__title { font-size: var(--fs-lg); } .snippet { background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; overflow-x: auto; font-size: var(--fs-xs); color: var(--text-2); margin: var(--space-4) 0 0; white-space: pre; } .type-sample { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); } .type-sample code { color: var(--text-3); font-size: var(--fs-xs); } .icon-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } .icon-grid div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-2xs); color: var(--text-3); } /* Utilities */ .muted { color: var(--text-2); } .faint { color: var(--text-3); } .danger-text { color: var(--danger-text); } .small { font-size: var(--fs-sm); } .xs { font-size: var(--fs-xs); } .row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .row--between { justify-content: space-between; } .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } .actions--end { justify-content: flex-end; } .inline-form { display: inline; } .mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .truncate > a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .text-right { text-align: right; } /* Switching themes should not animate every border on the page. */ .theme-switching, .theme-switching * { transition: none !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }