/* Cooli design system. One file for cooli.ai, the demo, the operator workspace and the client portal. Tokens and components follow docs/DESIGN-SPEC-2026-09-14.md section 1. The canonical copy lives at cooli/public/theme.css; cooli-service/public/theme.css is a byte copy. Marketing pages default to dark, apps default to light: set data-theme="dark" or "light" on . No build step, no preprocessor. */ /* ---------- tokens ---------- */ :root { --font-display: "Bricolage Grotesque", system-ui, sans-serif; --font-body: "Instrument Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-h3: clamp(1.5rem, 2.5vw, 1.875rem); --text-h2: clamp(1.875rem, 4vw, 2.75rem); --text-h1: clamp(2.5rem, 6vw, 4rem); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --radius-control: 10px; --radius-card: 16px; --radius-sheet: 20px; --radius-pill: 999px; --shadow-card: none; --duration-fast: 120ms; --duration-normal: 180ms; --ease: cubic-bezier(.2, .8, .2, 1); --content-width: 1120px; --reading-width: 680px; --nav-height: 64px; --bottom-bar-height: 64px; --z-sticky: 20; --z-bar: 30; --z-backdrop: 40; --z-dialog: 50; --z-toast: 60; --gutter: 20px; } @media (min-width: 768px) { :root { --gutter: 32px; } } @media (min-width: 1200px) { :root { --gutter: 48px; } } :root, [data-theme="dark"] { color-scheme: dark; --bg: #0A0A0F; --surface: #111119; --surface-raised: #191922; --surface-hover: #20202B; --text: #F4F4F7; --text-muted: #B1B1C0; --text-subtle: #9292A5; --border: #343440; --border-control: #747486; --accent: #2DD4BF; --accent-hover: #7FF0E2; --on-accent: #06201D; --accent-soft: #10332F; --accent-text: #90EBDD; --warning: #FFBE78; --warning-soft: #362719; --danger: #FFA1A7; --danger-soft: #391F27; --success: #87DDA9; --success-soft: #173225; --focus: #7FF0E2; --overlay: rgba(0, 0, 0, .64); --shadow-overlay: 0 16px 48px rgba(0, 0, 0, .36); } [data-theme="light"] { color-scheme: light; --bg: #F7F8F6; --surface: #FFFFFF; --surface-raised: #EDF1EE; --surface-hover: #E5EBE7; --text: #172521; --text-muted: #52635B; --text-subtle: #65746C; --border: #CBD5CE; --border-control: #788A80; --accent: #087F70; --accent-hover: #06685C; --on-accent: #FFFFFF; --accent-soft: #DDF4ED; --accent-text: #075E52; --warning: #855000; --warning-soft: #FFF0D6; --danger: #B42335; --danger-soft: #FDE9EC; --success: #226A43; --success-soft: #E2F3E7; --focus: #075E52; --overlay: rgba(16, 30, 23, .44); --shadow-overlay: 0 16px 48px rgba(16, 30, 23, .16); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; margin: 0 0 var(--space-4); } h1 { font-size: var(--text-h1); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); } h4 { font-size: var(--text-xl); letter-spacing: -0.02em; } p { margin: 0 0 var(--space-4); } p:last-child { margin-bottom: 0; } a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--accent-soft); color: var(--text); } :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } .label, .eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.35; color: var(--text-subtle); } .lede { font-size: var(--text-lg); color: var(--text-muted); max-width: var(--reading-width); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .mono { font-family: var(--font-mono); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } time, .meta { font-size: 14px; color: var(--text-subtle); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ---------- layout ---------- */ .container { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); } .container--narrow { max-width: var(--reading-width); } .section { padding: var(--space-10) 0; } .section--tinted { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section__head { max-width: var(--reading-width); margin-bottom: var(--space-7); } .stack { display: flex; flex-direction: column; gap: var(--space-4); } .stack--tight { gap: var(--space-2); } .stack--loose { gap: var(--space-7); } .cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .split { display: grid; gap: var(--space-7); align-items: start; } .grid-2 { display: grid; gap: var(--space-5); } .grid-3 { display: grid; gap: var(--space-5); } @media (min-width: 768px) { .section { padding: var(--space-12) 0; } .split { grid-template-columns: 7fr 5fr; gap: var(--space-9); } .split--even { grid-template-columns: 1fr 1fr; } .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } } .app-section, .app .section { padding: var(--space-6) 0; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 var(--space-5); border-radius: var(--radius-control); font-weight: 600; font-size: var(--text-base); line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease); } .btn--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } .btn--secondary { background: transparent; color: var(--text); border-color: var(--border-control); } .btn--secondary:hover { background: var(--surface-hover); color: var(--text); } .btn--ghost { background: transparent; color: var(--accent-text); border-color: transparent; padding: 0 var(--space-3); } .btn--ghost:hover { background: var(--accent-soft); color: var(--accent-text); } .btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); } .btn--danger:hover { background: var(--danger-soft); color: var(--danger); } .btn--sm { min-height: 44px; padding: 0 var(--space-4); font-size: var(--text-sm); } .btn--lg { min-height: 52px; padding: 0 var(--space-6); font-size: var(--text-lg); } .btn--block { width: 100%; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; } .btn[aria-busy="true"] { position: relative; color: transparent; } .btn[aria-busy="true"]::after { content: attr(data-busy); position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-accent); } .btn--secondary[aria-busy="true"]::after, .btn--ghost[aria-busy="true"]::after { color: var(--text); } /* ---------- fields ---------- */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-weight: 600; font-size: var(--text-sm); } .field__hint { font-size: var(--text-sm); color: var(--text-subtle); } .field__error { font-size: var(--text-sm); color: var(--danger); } .input, .textarea, .select { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-4); background: var(--surface); color: var(--text); border: 1px solid var(--border-control); border-radius: var(--radius-control); font-size: 16px; line-height: 1.4; transition: border-color var(--duration-fast) var(--ease); } .textarea { min-height: 120px; resize: vertical; } .select { appearance: none; padding-right: var(--space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239292A5' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; } .input:hover, .textarea:hover, .select:hover { border-color: var(--text-subtle); } .input:focus-visible, .textarea:focus-visible, .select:focus-visible { border-color: var(--accent); outline-offset: 1px; } .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); } .input::placeholder, .textarea::placeholder { color: var(--text-subtle); } .checkbox { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); } .checkbox input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); flex: none; } .form-status { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-size: var(--text-sm); border: 1px solid var(--border); background: var(--surface-raised); } .form-status--error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } .form-status--success { border-color: var(--success); background: var(--success-soft); color: var(--success); } .form-status:empty { display: none; } .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ---------- chips, status, cards ---------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--border-control); background: transparent; color: var(--text); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease); } .chip:hover { background: var(--surface-hover); } .chip--selected, .chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); } .status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; line-height: 1.6; border: 1px solid transparent; } .status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status--neutral { background: var(--surface-raised); color: var(--text-muted); border-color: var(--border); } .status--success { background: var(--success-soft); color: var(--success); } .status--warning { background: var(--warning-soft); color: var(--warning); } .status--danger { background: var(--danger-soft); color: var(--danger); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .card__header { padding: var(--space-5) var(--space-5) 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); } .card__body { padding: var(--space-5); } .card__footer { padding: 0 var(--space-5) var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; } .card--raised { background: var(--surface-raised); } /* ---------- table ---------- */ .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); } .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); vertical-align: top; } .table th { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); font-weight: 500; } .table th button { all: unset; cursor: pointer; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-hover); } .table__numeric { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- tabs ---------- */ .tabs__list { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; } .tabs__tab { all: unset; cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tabs__tab:hover { color: var(--text); } .tabs__tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); } .tabs__tab:focus-visible { outline-offset: -3px; } .tabs__panel { padding-top: var(--space-5); } .tabs__panel[hidden] { display: none; } /* ---------- site nav (marketing) ---------- */ .site-nav { position: sticky; top: 0; z-index: var(--z-sticky); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .site-nav__inner { max-width: var(--content-width); margin: 0 auto; padding: 0 var(--gutter); height: var(--nav-height); display: flex; align-items: center; gap: var(--space-4); } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.03em; } .brand:hover { color: var(--text); } .brand img { width: 28px; height: 28px; } .site-nav__links { display: none; align-items: center; gap: var(--space-5); margin-left: auto; list-style: none; padding: 0; margin-top: 0; margin-bottom: 0; } .site-nav__links a { color: var(--text-muted); text-decoration: none; font-weight: 500; } .site-nav__links a:hover, .site-nav__links a[aria-current="page"] { color: var(--text); } .site-nav__cta { margin-left: auto; } .site-nav__menu { all: unset; cursor: pointer; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-control); color: var(--text); } .site-nav__menu:hover { background: var(--surface-hover); } .site-nav__panel { display: none; border-top: 1px solid var(--border); background: var(--bg); } .site-nav__panel[data-open="true"] { display: block; } .site-nav__panel ul { list-style: none; margin: 0; padding: var(--space-2) var(--gutter) var(--space-4); } .site-nav__panel a { display: block; padding: var(--space-3) 0; color: var(--text); text-decoration: none; font-size: var(--text-lg); font-weight: 500; border-bottom: 1px solid var(--border); } @media (min-width: 900px) { .site-nav__links { display: flex; } .site-nav__cta { margin-left: 0; } .site-nav__menu, .site-nav__panel { display: none !important; } .site-nav__try { display: none; } } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: var(--space-9) 0 calc(var(--space-9) + var(--bottom-bar-height)); color: var(--text-muted); font-size: var(--text-sm); } .site-footer__grid { display: grid; gap: var(--space-7); } .site-footer h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); font-weight: 500; margin-bottom: var(--space-3); } .site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .site-footer a { color: var(--text-muted); text-decoration: none; } .site-footer a:hover { color: var(--text); } .site-footer__bottom { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; color: var(--text-subtle); } @media (min-width: 768px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; } .site-footer { padding-bottom: var(--space-9); } } /* ---------- mobile bottom bar ---------- */ .bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bar); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--border); } .bottom-bar__item { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; border-radius: var(--radius-control); text-decoration: none; font-weight: 600; font-size: var(--text-sm); } .bottom-bar--marketing .bottom-bar__item { border: 1px solid var(--border-control); color: var(--text); } .bottom-bar--marketing .bottom-bar__item--primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .bottom-bar--app .bottom-bar__item { flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--text-muted); min-height: 52px; } .bottom-bar--app .bottom-bar__item[aria-current="page"] { color: var(--accent-text); } body:has(.bottom-bar) { padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom)); } body[data-bar-hidden="true"] .bottom-bar { display: none; } @media (min-width: 900px) { .bottom-bar--marketing { display: none; } body:has(.bottom-bar--marketing) { padding-bottom: 0; } } /* ---------- toast, modal, sheet ---------- */ .toast-stack { position: fixed; left: var(--space-4); right: var(--space-4); bottom: calc(var(--bottom-bar-height) + var(--space-4) + env(safe-area-inset-bottom)); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); pointer-events: none; } .toast { pointer-events: auto; margin: 0 auto; max-width: 480px; width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); font-size: var(--text-sm); box-shadow: var(--shadow-overlay); } .toast--error { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); } @media (min-width: 900px) { .toast-stack { bottom: var(--space-6); } } .modal { border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--text); padding: 0; width: min(560px, calc(100vw - 2 * var(--gutter))); box-shadow: var(--shadow-overlay); } .modal::backdrop { background: var(--overlay); } .modal__header { padding: var(--space-5) var(--space-5) 0; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); } .modal__header h3 { margin: 0; } .modal__body { padding: var(--space-5); } .modal__footer { padding: 0 var(--space-5) var(--space-5); display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; } .modal__close { all: unset; cursor: pointer; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--radius-control); color: var(--text-muted); } .modal__close:hover { background: var(--surface-hover); color: var(--text); } .sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dialog); max-height: 90dvh; overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: var(--shadow-overlay); padding: var(--space-2) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom)); margin: 0; width: 100%; } .sheet::backdrop { background: var(--overlay); } .sheet__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-control); margin: var(--space-2) auto var(--space-4); } @media (min-width: 768px) { .sheet { left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 2 * var(--gutter))); border-radius: var(--radius-card); border-bottom: 1px solid var(--border); padding: var(--space-5); } .sheet__handle { display: none; } } .backdrop { position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-backdrop); } /* ---------- empty state, skeleton ---------- */ .empty-state { text-align: center; padding: var(--space-9) var(--space-5); border: 1px dashed var(--border); border-radius: var(--radius-card); color: var(--text-muted); } .empty-state__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text); margin-bottom: var(--space-2); } .empty-state__body { max-width: 420px; margin: 0 auto var(--space-5); } .skeleton { background: var(--surface-raised); border-radius: 6px; } .skeleton--line { height: 14px; margin: 6px 0; } .skeleton--row { height: 48px; margin: var(--space-2) 0; } /* ---------- the thread ---------- */ .thread { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); display: flex; flex-direction: column; overflow: hidden; } .thread__header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); font-size: var(--text-sm); } .thread__title { font-weight: 600; display: inline-flex; align-items: center; gap: var(--space-2); } .thread__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .thread__meta { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; color: var(--text-subtle); text-transform: uppercase; display: inline-flex; gap: var(--space-2); align-items: center; } .thread__after-hours { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--warning-soft); color: var(--warning); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; } .thread__messages { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); } .thread__message { display: flex; flex-direction: column; max-width: 88%; gap: 4px; } .thread__message--customer { align-self: flex-start; align-items: flex-start; } .thread__message--assistant, .thread__message--human { align-self: flex-end; align-items: flex-end; } .thread__sender { font-size: var(--text-xs); color: var(--text-subtle); padding: 0 4px; } .thread__bubble { padding: 12px 14px; border-radius: 16px; font-size: 16px; line-height: 1.45; } .thread__message--customer .thread__bubble { background: var(--surface-raised); border-bottom-left-radius: 6px; } .thread__message--assistant .thread__bubble, .thread__message--human .thread__bubble { background: var(--accent-soft); color: var(--text); border-bottom-right-radius: 6px; } .thread__message--human .thread__bubble { border: 1px solid var(--accent); } .thread__stamp { font-size: var(--text-xs); color: var(--text-subtle); padding: 0 4px; } .thread__event { align-self: center; text-align: center; font-size: var(--text-sm); color: var(--text-subtle); padding: var(--space-1) 0; } .thread__composer { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); align-items: flex-end; } .thread__composer .textarea, .thread__composer .input { min-height: 48px; } .thread__footer { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-subtle); display: flex; justify-content: space-between; gap: var(--space-3); } /* ---------- app shell (workspace and portal) ---------- */ .app-shell { min-height: 100dvh; display: grid; grid-template-rows: var(--nav-height) 1fr; } .app-topbar { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-4); height: var(--nav-height); background: var(--surface); border-bottom: 1px solid var(--border); } .app-topbar .brand { font-size: 18px; } .app-topbar .brand img { width: 24px; height: 24px; } .app-topbar__spacer { flex: 1; } .app-sidebar { display: none; } .app-main { padding: var(--space-4) var(--space-4) calc(var(--space-6) + var(--bottom-bar-height)); min-width: 0; } .app-page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); } .app-page-header h1 { font-size: var(--text-h3); margin: 0; } .app-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); } .app-toolbar .input, .app-toolbar .select { min-height: 44px; width: auto; flex: 1 1 160px; } .save-bar { position: sticky; bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom)); z-index: var(--z-sticky); display: flex; justify-content: flex-end; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); margin-top: var(--space-5); } .app-nav__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); color: var(--text-muted); text-decoration: none; font-weight: 500; } .app-nav__link:hover { background: var(--surface-hover); color: var(--text); } .app-nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); } @media (min-width: 900px) { .app-shell { grid-template-columns: 224px 1fr; grid-template-rows: var(--nav-height) 1fr; } .app-topbar { grid-column: 1 / -1; } .app-sidebar { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--space-3); border-right: 1px solid var(--border); background: var(--surface); position: sticky; top: var(--nav-height); height: calc(100dvh - var(--nav-height)); overflow: auto; } .app-main { padding: var(--space-6); } .bottom-bar--app { display: none; } body:has(.bottom-bar--app) { padding-bottom: 0; } .save-bar { bottom: var(--space-4); } } .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); } .tile__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-subtle); } .tile__value { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: var(--space-1); font-variant-numeric: tabular-nums; } .tile__note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1); } .tiles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } /* ---------- marketing helpers ---------- */ .hero { padding: var(--space-8) 0 var(--space-10); } .hero h1 { font-size: clamp(2.5rem, 7vw, 4.25rem); max-width: 14ch; } .hero .lede { font-size: clamp(1.125rem, 2vw, 1.375rem); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-6) 0 var(--space-4); } .hero__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--text-subtle); } .proof { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent-text); letter-spacing: 0.02em; } .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .steps li { counter-increment: step; display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-4); row-gap: var(--space-2); padding: var(--space-5) 0; border-top: 1px solid var(--border); } .steps li > * { grid-column: 2; } .steps li::before { grid-column: 1; grid-row: 1; } .steps li:last-child { border-bottom: 1px solid var(--border); } .steps li::before { content: counter(step); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--accent-text); line-height: 1.2; } .steps h3 { font-size: var(--text-xl); margin-bottom: var(--space-2); } .faq details { border-top: 1px solid var(--border); } .faq details:last-child { border-bottom: 1px solid var(--border); } .faq summary { cursor: pointer; list-style: none; padding: var(--space-4) 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--text-subtle); flex: none; } .faq details[open] summary::after { content: "\2013"; } .faq details > p, .faq details > div { padding: 0 0 var(--space-4); color: var(--text-muted); max-width: var(--reading-width); } .price { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); } .price__amount { font-size: clamp(3rem, 8vw, 4.5rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; } .price__period { font-size: var(--text-lg); color: var(--text-muted); } .price__setup { font-size: var(--text-lg); color: var(--text-muted); margin-top: var(--space-2); } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .checklist li { display: grid; grid-template-columns: 20px 1fr; column-gap: var(--space-3); align-items: start; } .checklist li > * { grid-column: 2; } .checklist li::before { grid-column: 1; grid-row: 1; } .checklist li::before { content: "\2713"; color: var(--accent-text); font-weight: 700; } .segmented { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); } .segmented button { all: unset; cursor: pointer; padding: var(--space-2) var(--space-4); border-radius: 7px; font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); } .segmented button:hover { color: var(--text); } .segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); } .segmented button:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .notice { padding: var(--space-3) var(--space-4); border-left: 3px solid var(--accent); background: var(--surface-raised); border-radius: 0 var(--radius-control) var(--radius-control) 0; font-size: var(--text-sm); color: var(--text-muted); } .placeholder-note { padding: var(--space-3) var(--space-4); background: var(--warning-soft); color: var(--warning); border-radius: var(--radius-control); font-family: var(--font-mono); font-size: var(--text-sm); } .skip-link { position: absolute; left: var(--space-4); top: -60px; z-index: var(--z-toast); padding: var(--space-3) var(--space-4); background: var(--accent); color: var(--on-accent); border-radius: var(--radius-control); font-weight: 600; text-decoration: none; } .skip-link:focus { top: var(--space-4); } @media print { .site-nav, .bottom-bar, .site-footer, .toast-stack { display: none !important; } body { background: #fff; color: #000; } }