/* ============================================================ Clariox — marketing site Near-monochrome system. Colour is functional only: it appears inside the product UI to mean something (risk, repeat request, external party), never as decoration. ============================================================ */ :root { /* tells the browser to render scrollbars, form controls and autofill in the matching theme — without it the dark page keeps light scrollbars */ color-scheme: light; --paper: #FFFFFF; --band: #FAFAFA; /* alternating section band */ --surface: #FFFFFF; /* raised panels */ --sunken: #F7F7F7; /* input side of the product UI */ --ink: #0A0A0A; --ink-2: #3B3B3D; --muted: #67686C; --faint: #96979B; --line: #E8E8E9; --line-2: #F0F0F1; --btn: #0A0A0A; --btn-ink: #FFFFFF; --btn-h: #262627; --warn: #8A5A05; --warn-bg: #FBF3E4; --risk: #A5322A; --risk-bg: #FBEFEE; --avatar: #EFEFF0; --shadow-sm: 0 1px 2px rgba(10,10,10,.05); --shadow: 0 1px 2px rgba(10,10,10,.04), 0 12px 28px -12px rgba(10,10,10,.16); --wrap: 1160px; --gut: clamp(20px, 5vw, 40px); --sec: clamp(76px, 8.5vw, 124px); --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --ease: cubic-bezier(.22,.68,.24,1); } /* ---------- dark theme ---------- Two selectors, one token set, on purpose. 1. The media query drives the theme from the OS with no JavaScript at all, so switching appearance in the OS repaints the page live — no event listener, no reload. It backs off the moment the visitor has explicitly chosen light. 2. The attribute selector is the visitor's explicit override, which has to win even when the OS says the opposite. Keep the two blocks byte-identical. `data-theme` is present on ONLY when the visitor has overridden the OS; absent means "follow the system". */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #08090A; --band: #0B0C0D; --surface: #101112; --sunken: #0D0E0F; --ink: #F7F8F8; --ink-2: #C9CCD1; --muted: #8A8F98; --faint: #63676E; --line: #1E2022; --line-2: #171819; --btn: #F7F8F8; --btn-ink: #08090A; --btn-h: #DCDEE0; --warn: #E0B063; --warn-bg: rgba(224,176,99,.11); --risk: #EF877F; --risk-bg: rgba(239,135,127,.11); --avatar: #1C1E20; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 36px -16px rgba(0,0,0,.8); } } :root[data-theme="dark"] { color-scheme: dark; --paper: #08090A; --band: #0B0C0D; --surface: #101112; --sunken: #0D0E0F; --ink: #F7F8F8; --ink-2: #C9CCD1; --muted: #8A8F98; --faint: #63676E; --line: #1E2022; --line-2: #171819; --btn: #F7F8F8; --btn-ink: #08090A; --btn-h: #DCDEE0; --warn: #E0B063; --warn-bg: rgba(224,176,99,.11); --risk: #EF877F; --risk-bg: rgba(239,135,127,.11); --avatar: #1C1E20; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 16px 36px -16px rgba(0,0,0,.8); } /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } /* Any author `display:` rule outranks the browser's own [hidden] styling, so a class like .tool__pending{display:flex} silently defeats the hidden attribute and the element shows anyway. It did exactly that: the loading row sat on the page before anything had been submitted. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: -.009em; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } button, input, textarea { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } h1, h2, h3 { margin: 0; font-weight: 560; letter-spacing: -.028em; line-height: 1.1; text-wrap: balance; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: var(--ink); color: var(--paper); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; } .skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 6px; } .skip:focus { top: 14px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .band { background: var(--band); border-block: 1px solid var(--line); } /* ---------- type ---------- */ h1 { font-size: clamp(36px, 4.4vw, 56px); letter-spacing: -.035em; line-height: 1.06; } h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -.032em; } h3 { font-size: 17px; font-weight: 550; letter-spacing: -.018em; line-height: 1.35; } .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; } .lede { font-size: clamp(16.5px, 1.25vw, 18px); color: var(--muted); line-height: 1.6; max-width: 52ch; } .body-lg { font-size: 17px; color: var(--muted); max-width: 44ch; line-height: 1.62; } .body { font-size: 16px; color: var(--muted); max-width: 42ch; } /* ---------- buttons ---------- */ .btn { --bh: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--bh); padding: 0 16px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 500; letter-spacing: -.008em; cursor: pointer; white-space: nowrap; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); } .btn--sm { --bh: 32px; padding: 0 12px; font-size: 13.5px; } .btn--xs { --bh: 28px; padding: 0 10px; font-size: 12.5px; border-radius: 6px; } .btn--full { width: 100%; } .btn--primary { background: var(--btn); color: var(--btn-ink); } .btn--primary:hover { background: var(--btn-h); } .btn--ghost, .btn--ghost-dark { border-color: var(--line); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm); } .btn--ghost:hover, .btn--ghost-dark:hover { border-color: var(--faint); } .btn--quiet { border-color: var(--line); color: var(--muted); } .btn[disabled] { opacity: .5; cursor: default; } .btn .arw { color: var(--faint); transition: transform .16s var(--ease); } .btn:hover .arw { transform: translateX(2px); } /* ---------- brand ---------- */ .brand { display: inline-flex; align-items: center; gap: 8px; } .brand__mark { width: 24px; height: 24px; } /* full mark's floor — below this use the 3-row variant */ .brand__mark .bm-tile { fill: var(--ink); } .brand__mark .bm-bars { fill: var(--paper); } .brand__mark .bm-arc { fill: none; stroke: var(--paper); } .brand__word { font-size: 16px; font-weight: 600; letter-spacing: -.03em; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background .25s var(--ease), border-color .25s var(--ease); } .nav__in { max-width: var(--wrap); margin-inline: auto; padding: 12px var(--gut); display: flex; align-items: center; gap: 24px; } .nav.is-stuck { background: color-mix(in srgb, var(--paper) 80%, transparent); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-color: var(--line); } .nav__links { display: flex; gap: 22px; margin-left: 16px; } .nav__links a { font-size: 13.5px; color: var(--muted); transition: color .15s var(--ease); } .nav__links a:hover { color: var(--ink); } .nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; } /* language switcher — two labels and a hairline, no boxes */ .langsw { display: flex; align-items: center; gap: 9px; font-size: 12.5px; letter-spacing: .01em; } .langsw i { width: 1px; height: 11px; background: var(--line); } .langsw [aria-current] { color: var(--ink); font-weight: 500; } .langsw a { color: var(--faint); transition: color .15s var(--ease); } .langsw a:hover { color: var(--ink); } .themetoggle { width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--faint); cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); } .themetoggle:hover { color: var(--ink); background: var(--band); } .themetoggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; } /* the icon shows the effective theme, so it has to follow the OS too */ .themetoggle .i-moon { display: none; } :root[data-theme="dark"] .themetoggle .i-sun { display: none; } :root[data-theme="dark"] .themetoggle .i-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themetoggle .i-sun { display: none; } :root:not([data-theme="light"]) .themetoggle .i-moon { display: block; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; } .hero__in { max-width: var(--wrap); margin-inline: auto; padding: clamp(56px, 7vw, 92px) 0 clamp(64px, 8vw, 104px) var(--gut); display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 62fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .hero__copy { max-width: 540px; padding-right: 8px; } .hero h1 { margin-bottom: 20px; } .hero .lede { max-width: 45ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; } .hero__trust { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); max-width: 40ch; } .hero__vis { position: relative; will-change: transform; } /* ============================================================ PRODUCT UI ============================================================ */ .app { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; min-width: 600px; } .app__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--band); } .app__crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; } .app__crumb i { color: var(--faint); font-style: normal; } .app__crumb span:first-child { color: var(--muted); font-weight: 450; } .app__meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); } .app__body { display: grid; grid-template-columns: 1fr 1.12fr; } .app__body .pane--in { border-right: 1px solid var(--line); } .pane { padding: 14px 16px 18px; min-width: 0; } .pane--in { background: var(--sunken); } .pane__h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .pane__label { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .pane__tag { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; background: var(--surface); } .pane__tag--ok { color: var(--ink); } .pane__export { font: 500 11.5px var(--sans); color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: border-color .14s var(--ease), color .14s var(--ease); } .pane__export:hover { border-color: var(--faint); color: var(--ink); } .raw { margin: 0; font-family: var(--mono); font-size: 11.6px; line-height: 1.75; color: var(--muted); white-space: pre-wrap; word-break: break-word; } .raw mark { background: var(--warn-bg); color: var(--warn); padding: 0 2px; border-radius: 2px; } .tasks { display: flex; flex-direction: column; } .task { display: flex; gap: 9px; padding: 10px 0; border-top: 1px solid var(--line-2); } .task:first-child { border-top: 0; padding-top: 0; } .tasks--tight .task { padding: 7px 0; } .task__check { flex: none; width: 14px; height: 14px; margin-top: 2px; border: 1.5px solid var(--line); border-radius: 4px; } .task__body { display: block; min-width: 0; } .task__title { display: block; font-size: 13.2px; line-height: 1.45; font-weight: 450; letter-spacing: -.011em; color: var(--ink); } .task__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 9px; margin-top: 5px; } .who { display: inline-flex; align-items: center; gap: 5px; font-size: 11.8px; color: var(--muted); } .who::before { content: attr(data-i); display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; background: var(--avatar); color: var(--muted); font-family: var(--mono); font-size: 8px; font-weight: 500; } .who--ext::before { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--faint); } .due { font-family: var(--mono); font-size: 11px; color: var(--faint); } .chip { font-size: 10.5px; font-weight: 500; padding: 1px 6px; border-radius: 4px; background: var(--band); color: var(--muted); border: 1px solid var(--line); } .chip--warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; } .chip--risk { background: var(--risk-bg); color: var(--risk); border-color: transparent; } .decision, .block { margin-top: 14px; padding: 11px 13px; border-radius: 8px; background: var(--band); border: 1px solid var(--line-2); } .decision { display: flex; flex-direction: column; gap: 4px; } .decision__k, .block__h { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); } .decision__v, .block__i { font-size: 12.8px; color: var(--ink-2); line-height: 1.5; } .block__i { margin-top: 6px; padding-left: 11px; border-left: 2px solid var(--line); } .block--q .block__i { border-left-color: var(--warn); } .draft { margin-top: 14px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .draft__h { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .draft__sub { font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; } .draft__b { font-size: 12.8px; line-height: 1.62; color: var(--muted); } .draft__act { display: flex; gap: 7px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line-2); } .detected { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .detected ul { margin-top: 9px; display: grid; gap: 7px; } .detected li { position: relative; padding-left: 16px; font-size: 12.2px; color: var(--muted); line-height: 1.45; } .detected li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 1px; background: var(--faint); } .detected li b { font-weight: 500; color: var(--ink-2); } .ownergroup + .ownergroup { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); } .ownergroup__h { margin-bottom: 7px; } .ownergroup__h .who { font-weight: 500; color: var(--ink); } /* ============================================================ PROBLEM ============================================================ */ .problem { padding-block: var(--sec); } .problem__grid { display: grid; grid-template-columns: minmax(0, 38fr) minmax(0, 56fr); gap: clamp(36px, 6vw, 96px); } .problem__left .sticky { position: sticky; top: 104px; } .problem h2 { margin-bottom: 20px; } .problem .body-lg { margin-bottom: 16px; } .timeline__cap, .after__cap { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; } .timeline { border-left: 1px solid var(--line); } .timeline li { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 0 0 24px 24px; } .timeline li::before { content: ""; position: absolute; left: -3.5px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); } .timeline li.is-late::before { background: var(--risk); } .timeline .t { font-family: var(--mono); font-size: 11.5px; color: var(--faint); padding-top: 3px; } .timeline .d { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; } .timeline li.is-late .d { color: var(--ink); } .after { margin-top: 6px; } .after__box { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; } .after__row { display: grid; grid-template-columns: 64px 1fr; align-items: baseline; gap: 10px; padding: 13px 18px; border-top: 1px solid var(--line-2); } .after__row:first-child { border-top: 0; } .after__k { font-family: var(--mono); font-size: 19px; font-weight: 500; color: var(--ink); letter-spacing: -.03em; } .after__v { font-size: 14.5px; color: var(--muted); } /* ============================================================ HOW ============================================================ */ .how { padding-block: var(--sec); } .how__head { max-width: 600px; margin-bottom: clamp(44px, 5vw, 68px); } .rail { position: relative; } .rail__line { position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: var(--line); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); } .step { position: relative; padding-top: 38px; } .step::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--band); } .step__n { position: absolute; top: 2px; left: 20px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); background: var(--band); padding-right: 8px; } .step h3 { margin-bottom: 8px; max-width: 24ch; font-size: 17.5px; } .step p { font-size: 14.8px; color: var(--muted); line-height: 1.6; } /* ============================================================ OUTPUT ============================================================ */ .output { padding-block: var(--sec); } .output__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40ch); gap: clamp(20px, 5vw, 72px); align-items: end; margin-bottom: 34px; } .output__note { font-size: 15px; color: var(--muted); } .tablist { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: -1px; position: relative; z-index: 1; } .tab { background: none; border: 1px solid transparent; border-bottom: 0; padding: 9px 14px; border-radius: 8px 8px 0 0; font-size: 13.5px; font-weight: 450; color: var(--muted); cursor: pointer; transition: color .15s var(--ease), background .15s var(--ease); } .tab:hover { color: var(--ink); } .tab.is-on { color: var(--ink); font-weight: 500; background: var(--surface); border-color: var(--line); } .panel { border: 1px solid var(--line); border-radius: 0 10px 10px 10px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow); } .panel[hidden] { display: none; } .panel.is-enter { animation: fade .26s var(--ease); } @keyframes fade { from { opacity: 0; transform: translateY(3px); } } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .split .pane--in { border-right: 1px solid var(--line); } .split .pane { padding: 20px clamp(16px, 2vw, 24px) 26px; } /* ============================================================ USE CASES ============================================================ */ .cases { padding-block: var(--sec); } .cases__head { max-width: 620px; margin-bottom: clamp(36px, 4.5vw, 56px); } .case__n { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 12px; } .case h3 { margin-bottom: 10px; } .case p { font-size: 15.5px; color: var(--muted); line-height: 1.62; } .case--wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(24px, 3vw, 40px); box-shadow: var(--shadow-sm); } .case--wide h3 { font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -.026em; max-width: 20ch; } .case--wide p { max-width: 50ch; } .minicard { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--band); } .minicard__row { display: grid; grid-template-columns: 88px 1fr; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-2); } .minicard__row:first-child { border-top: 0; } .minicard__t { font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding-top: 3px; } .minicard__d { font-size: 13.5px; color: var(--ink-2); } .minicard__row--on { background: var(--surface); } .minicard__row--on .minicard__t, .minicard__row--on .minicard__d { color: var(--ink); } .case__pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); margin-top: clamp(28px, 3.5vw, 48px); } .case--a { padding-right: clamp(0px, 3vw, 32px); } .case--b { padding-top: clamp(0px, 4vw, 48px); } .case--a h3, .case--b h3 { font-size: 19px; max-width: 22ch; } .case--strip { margin-top: clamp(32px, 4.5vw, 64px); padding-block: clamp(28px, 3.5vw, 44px); border-top: 1px solid var(--line); } .case--strip .wrap-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 4vw, 56px); align-items: start; } .case--strip .case__n, .case--strip h3 { grid-column: 1; } .case--strip h3 { font-size: 19px; max-width: 18ch; } .case--strip p { grid-column: 2; grid-row: 1 / span 3; max-width: 52ch; } /* ============================================================ WHY ============================================================ */ .why { padding-block: var(--sec); } .why__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .78fr); gap: clamp(36px, 5vw, 88px); } .why h2 { margin-bottom: 36px; } .outcome { padding: 20px 0; border-top: 1px solid var(--line); max-width: 50ch; } .outcome:last-child { border-bottom: 1px solid var(--line); } .outcome h3 { margin-bottom: 6px; } .outcome p { font-size: 15.5px; color: var(--muted); } .isnt { align-self: start; position: sticky; top: 104px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; box-shadow: var(--shadow-sm); } .isnt__col { padding: 20px 22px; } .isnt__col--no { border-top: 1px solid var(--line); background: var(--band); } .isnt__h { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; } .isnt__col--no .isnt__h { color: var(--faint); } .isnt ul { display: grid; gap: 10px; } .isnt li { position: relative; padding-left: 20px; font-size: 14.2px; color: var(--ink-2); line-height: 1.45; } .isnt li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 8px; height: 5px; border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(-45deg); } .isnt__col--no li { color: var(--muted); } .isnt__col--no li::before { width: 9px; height: 1.5px; background: var(--faint); border: 0; transform: none; top: 10px; } .isnt__foot { padding: 14px 22px 18px; border-top: 1px solid var(--line); font-size: 12.8px; color: var(--faint); line-height: 1.5; } /* ============================================================ PILOT ============================================================ */ .pilot { padding-block: var(--sec); } .pilot__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 80px); align-items: start; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: clamp(28px, 4vw, 56px); box-shadow: var(--shadow-sm); } .pilot h2 { margin-bottom: 18px; } .pilot__pts { margin-top: 26px; display: grid; gap: 10px; } .pilot__pts li { position: relative; padding-left: 20px; font-size: 14.8px; color: var(--muted); } .pilot__pts li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 1px; background: var(--faint); } .form { background: var(--band); border: 1px solid var(--line); border-radius: 10px; padding: clamp(18px, 2.2vw, 24px); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; } .opt { color: var(--faint); font-weight: 400; font-size: 12px; } .field input, .field textarea { width: 100%; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; padding: 9px 11px; font-size: 14.5px; resize: vertical; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .field input::placeholder, .field textarea::placeholder { color: var(--faint); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); } .field input[aria-invalid="true"] { border-color: var(--risk); } .err { margin-top: 5px; font-size: 12.5px; color: var(--risk); } /* honeypot — off-screen rather than display:none, which some bots skip */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__note { margin-top: 10px; font-size: 12.5px; color: var(--faint); text-align: center; } .form__ok { margin-top: 12px; padding: 10px 12px; border-radius: 7px; background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; } /* ============================================================ FAQ ============================================================ */ .faq { padding-block: var(--sec); } .faq__grid { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 88px); } .faq__head { position: sticky; top: 104px; align-self: start; } .faq__head h2 { max-width: 12ch; } .faq__list { border-top: 1px solid var(--line); } .qa { border-bottom: 1px solid var(--line); } .qa summary { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; letter-spacing: -.016em; line-height: 1.4; transition: color .15s var(--ease); } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--muted); } .qa summary::after { content: ""; flex: none; margin-left: auto; margin-top: 7px; width: 9px; height: 9px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s var(--ease); } .qa[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); } .qa__i { display: none; } .qa__a { padding: 0 48px 22px 0; } .qa__a p { font-size: 15.2px; color: var(--muted); line-height: 1.65; max-width: 62ch; } .qa[open] .qa__a { animation: fade .26s var(--ease); } /* ============================================================ INTENT SUBPAGES ============================================================ */ .sub-hero { padding-block: clamp(48px, 6vw, 84px) clamp(36px, 4.5vw, 60px); border-bottom: 1px solid var(--line); } .crumb { font-size: 12.5px; color: var(--faint); margin-bottom: 18px; } .crumb a { transition: color .15s var(--ease); } .crumb a:hover { color: var(--ink); } .sub-hero h1 { max-width: 15em; margin-bottom: 18px; } .sub-hero .lede { max-width: 62ch; } .sub-hero .hero__cta { margin-top: 26px; } /* keep the container at full wrap width so the text column starts on the same left edge as the hero, rather than floating in the middle of the page */ .prose { padding-block: clamp(44px, 5vw, 72px); } .prose > * { max-width: 680px; } .prose > h2 { font-size: clamp(21px, 2.3vw, 28px); letter-spacing: -.028em; margin: 44px 0 14px; } .prose > h2:first-child { margin-top: 0; } .prose h3 { margin: 26px 0 7px; } .prose p { color: var(--muted); font-size: 16.5px; line-height: 1.65; margin-bottom: 14px; } .prose strong { color: var(--ink); font-weight: 500; } .prose ul { display: grid; gap: 10px; margin: 16px 0 22px; } .prose li { position: relative; padding-left: 20px; color: var(--muted); font-size: 16px; line-height: 1.55; } .prose li::before { content: ""; position: absolute; left: 0; top: 11px; width: 9px; height: 1px; background: var(--faint); } .prose .note { margin: 22px 0; padding: 16px 18px; border-left: 2px solid var(--line); background: var(--band); border-radius: 0 8px 8px 0; } .prose .note p { margin: 0; font-size: 15.5px; } .demo { padding-block: clamp(36px, 4.5vw, 60px); } .demo__cap { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 16px; } .demo .app { min-width: 0; } .demo .app__body { grid-template-columns: 1fr 1.12fr; } @media (max-width: 860px) { .demo .app__body { grid-template-columns: 1fr; } .demo .app__body .pane--in { border-right: 0; border-bottom: 1px solid var(--line); } } /* ============================================================ APP (/app/) ============================================================ */ .tool { padding-block: clamp(40px, 5vw, 68px) clamp(56px, 7vw, 96px); max-width: 860px; } .tool__head { margin-bottom: 32px; } .tool__head h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; } .tool__form { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: clamp(16px, 2vw, 22px); box-shadow: var(--shadow-sm); } .tool__kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; } .kind input { position: absolute; opacity: 0; pointer-events: none; } .kind span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); font-size: 13px; color: var(--muted); cursor: pointer; transition: border-color .15s var(--ease), color .15s var(--ease); } .kind input:checked + span { border-color: var(--ink); color: var(--ink); font-weight: 500; } .kind input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; } .tool__form textarea { width: 100%; min-height: 260px; resize: vertical; background: var(--sunken); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; padding: 14px 15px; font-family: var(--mono); font-size: 12.8px; line-height: 1.7; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .tool__form textarea::placeholder { color: var(--faint); } .tool__form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 10%, transparent); } .tool__bar { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .tool__count { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-right: auto; } .tool__note { margin-top: 12px; font-size: 12.5px; color: var(--faint); } .tool__pending { display: flex; align-items: center; gap: 12px; margin-top: 24px; font-size: 15px; color: var(--muted); } .spin { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink); animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .tool__out { margin-top: 28px; } .tool__out .pane { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); padding: 20px 22px 24px; } .tool__out .task__title { font-size: 14.5px; } .tool__out .who, .tool__out .due { font-size: 12.5px; } .tool__out .draft__b { font-size: 14px; } @media (prefers-reduced-motion: reduce) { .spin { animation-duration: 3s; } } /* ============================================================ FINAL + FOOTER ============================================================ */ .final { padding-block: clamp(72px, 8vw, 112px); } .final__in { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; } .final h2 { max-width: 18ch; } .final__cta { display: flex; flex-wrap: wrap; gap: 10px; } .foot { border-top: 1px solid var(--line); padding-top: 40px; } .foot__in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-bottom: 36px; } .foot__brand p { margin-top: 10px; font-size: 13.5px; color: var(--muted); max-width: 30ch; } .foot__col { display: flex; flex-direction: column; gap: 8px; } .foot__col p { font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; } .foot__col a { font-size: 13.5px; color: var(--muted); transition: color .15s var(--ease); } .foot__col a:hover { color: var(--ink); } .foot__legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line-2); padding-block: 16px 24px; font-size: 12.5px; color: var(--faint); } .foot__legal a:hover { color: var(--ink); } /* ============================================================ MOTION ============================================================ */ .reveal { opacity: 0; transform: translateY(10px); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .48s var(--ease); transition-delay: var(--d, 0ms); } .no-js .reveal { opacity: 1; transform: none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .hero__in { grid-template-columns: 1fr; padding-right: var(--gut); } .hero__copy { max-width: 620px; } .hero__vis { margin-top: 4px; overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; } .app { min-width: 620px; } .why__grid, .pilot__grid { grid-template-columns: 1fr; } .isnt { position: static; } .output__head { grid-template-columns: 1fr; align-items: start; } } @media (max-width: 900px) { .problem__grid { grid-template-columns: 1fr; } .problem__left .sticky { position: static; } .steps { grid-template-columns: 1fr; gap: 30px; } .rail__line { display: none; } .step { padding-top: 0; padding-left: 24px; border-left: 1px solid var(--line); } .step::before { top: 6px; left: -4px; box-shadow: none; } .step__n { position: static; display: block; margin-bottom: 4px; padding: 0; background: none; } .case--wide, .case__pair, .case--strip .wrap-inner { grid-template-columns: 1fr; } .case--b { padding-top: 0; } .case--a { padding-right: 0; } .case--strip p { grid-column: 1; grid-row: auto; margin-top: 10px; } .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } .faq__grid { grid-template-columns: 1fr; } .faq__head { position: static; } .qa__a { padding-right: 0; } } @media (max-width: 860px) { .nav__links { display: none; } .split { grid-template-columns: 1fr; } .split .pane--in { border-right: 0; border-bottom: 1px solid var(--line); } .tablist { overflow-x: auto; scrollbar-width: none; } .tablist::-webkit-scrollbar { display: none; } .panel { border-radius: 10px; } } @media (max-width: 760px) { .br-lg { display: none; } } @media (max-width: 620px) { .app { min-width: 540px; } .timeline li { grid-template-columns: 1fr; gap: 3px; padding-left: 18px; } .after__row { grid-template-columns: 52px 1fr; } .foot__in { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } .hero__vis { transform: none !important; } } /* ── Sign-in ───────────────────────────────────────────────────────────── Deliberately plain: one field, one button. Nothing here should feel like a funnel — the account exists to hold the person's work, not to be sold. */ .auth { padding: clamp(56px, 12vh, 120px) 0 96px; } .auth__card { max-width: 428px; margin: 0 auto; padding: clamp(24px, 4vw, 34px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); } .auth__card h1 { font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -.018em; margin: 0 0 10px; } .auth__lede { color: var(--muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; } .auth__label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 7px; } .auth__input { width: 100%; height: 42px; padding: 0 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--sunken); border: 1px solid var(--line); border-radius: 8px; transition: border-color .16s var(--ease); } .auth__input:focus { outline: none; border-color: var(--ink-2); background: var(--paper); } .auth__input::placeholder { color: var(--faint); } .auth__submit { width: 100%; margin-top: 16px; justify-content: center; } .auth__err { margin: 10px 0 0; font-size: 13.5px; color: var(--risk); } .auth__notice { margin: 0 0 18px; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; color: var(--warn); background: var(--warn-bg); border-radius: 8px; } .auth__done h2 { font-size: 17px; margin: 0 0 8px; } .auth__done p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); margin: 0 0 10px; } .auth__hint { color: var(--muted); font-size: 13.5px !important; } .auth__foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 13px; line-height: 1.55; color: var(--faint); } /* ── App shell ─────────────────────────────────────────────────────────── Structure borrowed from a dashboard, palette deliberately not: no accent, no gradient, no colour except where a flag means something. The numbers and the hairlines carry the whole interface. */ .appbody { background: var(--band); } .appshell { display: grid; grid-template-columns: 246px minmax(0, 1fr); min-height: 100vh; } .side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; padding: 18px 14px 14px; background: var(--paper); border-right: 1px solid var(--line); } .side__brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 18px; text-decoration: none; color: var(--ink); } .side__brand .brand__mark { width: 26px; height: 26px; } .side__word { font-weight: 560; letter-spacing: -.012em; font-size: 15.5px; } .side__nav { display: flex; flex-direction: column; gap: 1px; } .side__cap { margin: 14px 8px 6px; font-size: 10.5px; font-weight: 560; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .side__cap:first-child { margin-top: 0; } .side__link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 7px; font-size: 14px; color: var(--ink-2); text-decoration: none; transition: background .14s var(--ease), color .14s var(--ease); } .side__link svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; } .side__link:hover { background: var(--band); color: var(--ink); } .side__link.is-on { background: var(--sunken); color: var(--ink); font-weight: 500; } .side__badge { margin-left: auto; min-width: 20px; padding: 0 5px; font: 500 11px/18px var(--mono); text-align: center; color: var(--muted); background: var(--band); border: 1px solid var(--line); border-radius: 999px; } .side__link.is-on .side__badge { background: var(--paper); } .side__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); } .side__me { display: flex; align-items: center; gap: 8px; padding: 0 8px 8px; min-width: 0; } .side__avatar { width: 24px; height: 24px; flex: none; display: grid; place-items: center; font: 500 11px var(--mono); color: var(--muted); background: var(--avatar); border-radius: 50%; } .side__email { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side__out { width: 100%; height: 30px; font: inherit; font-size: 12.5px; color: var(--muted); background: none; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; transition: border-color .14s var(--ease), color .14s var(--ease); } .side__out:hover { border-color: var(--faint); color: var(--ink); } .appmain { display: flex; flex-direction: column; min-width: 0; } .apptop { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 58px; padding: 0 clamp(18px, 3vw, 30px); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(160%) blur(8px); border-bottom: 1px solid var(--line); } .apptop__h { font-size: 16px; font-weight: 560; letter-spacing: -.01em; margin: 0; } .apptop__r { display: flex; align-items: center; gap: 12px; } .apptop__quota { font: 500 12px var(--mono); color: var(--warn); } .appbody__in { padding: clamp(20px, 3vw, 32px) clamp(18px, 3vw, 30px) 80px; max-width: 940px; } .view__lede { margin: 0 0 20px; max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); } /* stat row — the only "dashboard" element, and it holds real counts */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-bottom: 22px; } .stat { padding: 13px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; } .stat__k { margin: 0 0 6px; font-size: 12px; color: var(--muted); } .stat__v { margin: 0; font: 500 24px/1 var(--mono); letter-spacing: -.02em; color: var(--ink); } .stat__n { margin: 5px 0 0; font-size: 11.5px; color: var(--faint); } /* segmented filter */ .segs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; } .seg { height: 30px; padding: 0 11px; font: inherit; font-size: 13px; color: var(--muted); background: var(--paper); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; transition: border-color .14s var(--ease), color .14s var(--ease); } .seg:hover { border-color: var(--faint); color: var(--ink); } .seg.is-on { color: var(--ink); border-color: var(--ink-2); font-weight: 500; } /* actions grouped by the brief they came from */ .agroup { margin-bottom: 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .agroup__h { display: flex; align-items: baseline; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line-2); background: var(--band); } .agroup__t { font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink); background: none; border: 0; padding: 0; text-align: left; cursor: pointer; } .agroup__t:hover { text-decoration: underline; text-underline-offset: 2px; } .agroup__d { margin-left: auto; flex: none; font: 400 11.5px var(--mono); color: var(--faint); } .agroup .tasks { padding: 4px 14px 10px; } /* history rows */ .hrow { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 14px; margin-bottom: 8px; font: inherit; text-align: left; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .14s var(--ease); } .hrow:hover { border-color: var(--faint); } .hrow__t { flex: 1; min-width: 0; font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrow__m { display: flex; align-items: center; gap: 10px; flex: none; font: 400 11.5px var(--mono); color: var(--faint); } .hrow__kind { padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); } .histbrief { margin-top: 20px; } .histbrief__h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; } .histbrief__t { margin: 0; font-size: 15px; font-weight: 560; } .histbrief__d { font: 400 11.5px var(--mono); color: var(--faint); } .histbrief__h .btn { margin-left: auto; } .srcbox { margin-top: 14px; } .srcbox summary { font-size: 13px; color: var(--muted); cursor: pointer; } .srcbox__pre { margin: 10px 0 0; padding: 12px; font: 400 12.5px/1.6 var(--mono); color: var(--ink-2); background: var(--sunken); border: 1px solid var(--line-2); border-radius: 8px; white-space: pre-wrap; overflow-x: auto; } /* settings cards */ .card { margin-bottom: 12px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; } .card__h { margin: 0 0 12px; font-size: 13px; font-weight: 560; } .card__note { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 60ch; } .card__note + .btn { margin-top: 14px; } .onboard { background: var(--band); margin-bottom: 16px; } .onboard__act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; } .onboard__example { margin-top: 16px; } .onboard__example .pane { box-shadow: none; } .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; } .plan { padding: 18px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; } .plan--pro { border-color: var(--ink); } .plan__name { margin: 0; font-size: 14px; font-weight: 560; display: flex; align-items: center; gap: 8px; } .plan__badge { font-size: 10.5px; font-weight: 500; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); } .plan__price { margin: 12px 0 0; font-size: 26px; font-weight: 560; font-family: var(--mono); } .plan__price span { font-size: 13px; font-weight: 400; color: var(--muted); font-family: var(--sans); } .plan__note { margin: 10px 0 16px; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 44ch; } .plan__state { margin: 12px 0 0; font-size: 12.5px; font-weight: 500; color: var(--muted); } @media (max-width: 640px) { .plans { grid-template-columns: 1fr; } } .kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 16px; margin: 0; } .kv dt { font-size: 13px; color: var(--muted); } .kv dd { margin: 0; font-size: 13.5px; color: var(--ink); } .empty { padding: 34px 20px; text-align: center; background: var(--paper); border: 1px dashed var(--line); border-radius: 10px; } .empty__h { margin: 0; font-size: 14px; font-weight: 500; } .empty__n { margin: 6px 0 0; font-size: 13px; color: var(--muted); } .loading { font-size: 13px; color: var(--faint); } /* The app is a working surface, so the panel sits directly on the page rather than inside the marketing container. */ .appbody__in .tool__form { max-width: none; } .appbody__in textarea { width: 100%; padding: 14px; font: 400 14px/1.65 var(--mono); color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; resize: vertical; } .appbody__in textarea:focus { outline: none; border-color: var(--ink-2); } @media (max-width: 860px) { .appshell { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; align-items: center; gap: 14px; overflow-x: auto; padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--line); } .side__brand { padding: 0; } .side__word, .side__cap, .side__me { display: none; } .side__nav { flex-direction: row; gap: 4px; } .side__link { white-space: nowrap; } .side__foot { margin: 0 0 0 auto; padding: 0; border: 0; } .side__out { width: auto; padding: 0 10px; } } /* ── Sign-in demo ──────────────────────────────────────────────────────── A worked example next to the sign-up form. Same components as the product, so what is shown here is what arrives. */ .demo { max-width: 1080px; margin: clamp(48px, 8vh, 84px) auto 0; } .demo__head { max-width: 62ch; margin: 0 auto clamp(22px, 4vw, 34px); text-align: center; } .demo__head h2 { font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.015em; margin: 0 0 10px; } .demo__head p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); } .demo__cols { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 18px; align-items: start; } .demo__label { margin: 0 0 8px; font-size: 10.5px; font-weight: 560; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); } .demo__in .srcbox__pre { margin: 0; max-height: 520px; overflow: auto; } @media (max-width: 820px) { .demo__cols { grid-template-columns: minmax(0, 1fr); } .demo__in .srcbox__pre { max-height: 260px; } } /* ── Loading, checklist, placeholders ──────────────────────────────────── A spinner says "something is happening somewhere". The bar plus placeholder rows say "the answer is being built, and it will look like this". */ .load { margin-top: 22px; } .load__bar { height: 2px; overflow: hidden; background: var(--line); border-radius: 2px; } .load__bar span { display: block; width: 34%; height: 100%; background: var(--ink); border-radius: 2px; animation: slide 1.5s var(--ease) infinite; } @keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } } .load__t { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; font-size: 13.5px; color: var(--muted); } .load__s { margin-left: auto; font: 400 12px var(--mono); color: var(--faint); } /* placeholder rows — the shape of the answer before the answer */ .skel { pointer-events: none; } .skel__line { display: block; height: 11px; border-radius: 4px; /* The mid stop is lifted off --line: at hairline values the sweep is invisible in dark mode and the rows read as empty, not as loading. */ background: linear-gradient( 90deg, var(--line) 0%, color-mix(in srgb, var(--muted) 30%, var(--line)) 50%, var(--line) 100% ); background-size: 200% 100%; animation: sweep 1.4s linear infinite; } .skel__line + .skel__line { margin-top: 8px; } .skel__line--short { width: 42%; height: 9px; } @keyframes sweep { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } } /* a box you can actually tick */ .task__check--live { position: relative; /* the tick is drawn inside it */ padding: 0; cursor: pointer; background: none; transition: border-color .14s var(--ease), background .14s var(--ease); } .task__check--live:hover { border-color: var(--ink-2); } .task__check--live::after { content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 5px; border-left: 1.6px solid var(--btn-ink); border-bottom: 1.6px solid var(--btn-ink); transform: rotate(-45deg) scale(.6); opacity: 0; transition: opacity .12s var(--ease), transform .12s var(--ease); } .task.is-done .task__check--live { background: var(--ink); border-color: var(--ink); } .task.is-done .task__check--live::after { opacity: 1; transform: rotate(-45deg) scale(1); } .task.is-done .task__title { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; } .task.is-done .task__meta { opacity: .55; } .load + .tool__out { margin-top: 18px; } /* an exact date that has passed — the only date state worth colouring */ .due--late { color: var(--risk); } .task.is-done .due--late { color: var(--faint); } /* client name leading a group of commitments */ .agroup__c { flex: none; padding: 2px 7px; font: 500 11px var(--mono); color: var(--ink-2); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; } /* ── Entry ─────────────────────────────────────────────────────────────── The examples above are ours. This is the one place on the page whose only job is to hand the visitor the product instead of describing it. */ .nav__signin { font-size: 14px; color: var(--muted); transition: color .14s var(--ease); } .nav__signin:hover { color: var(--ink); } .entry { padding: clamp(56px, 7vw, 88px) 0; } .entry__in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 4vw, 40px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } .entry__in h2 { font-size: clamp(23px, 2.7vw, 32px); margin-bottom: 12px; } .entry__in .lede { max-width: 46ch; } .entry__act { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .entry__act .btn { width: 100%; justify-content: center; } .entry__note { font-size: 13px; line-height: 1.55; color: var(--faint); } @media (max-width: 860px) { .entry__in { grid-template-columns: minmax(0, 1fr); } } /* ── Toggle ────────────────────────────────────────────────────────────── Used for the one setting that sends mail, so it reads as a switch you own rather than a preference buried in a form. */ .toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; } .toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .toggle__box { position: relative; flex: none; width: 34px; height: 20px; margin-top: 1px; background: var(--line); border-radius: 999px; transition: background .16s var(--ease); } .toggle__box::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: var(--paper); border-radius: 50%; transition: transform .16s var(--ease); } .toggle input:checked + .toggle__box { background: var(--ink); } .toggle input:checked + .toggle__box::after { transform: translateX(14px); } .toggle input:focus-visible + .toggle__box { outline: 2px solid var(--ink); outline-offset: 2px; } .toggle__t { font-size: 13.5px; line-height: 1.5; color: var(--ink); } .toggle__n { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); } /* ── Sign-in: tabs, forms, links ─────────────────────────────────────────── */ .auth__tabs { display: flex; gap: 4px; margin-bottom: 20px; padding: 3px; background: var(--band); border: 1px solid var(--line); border-radius: 9px; } .auth__tab { flex: 1; height: 32px; font: inherit; font-size: 13px; font-weight: 500; color: var(--muted); background: none; border: 0; border-radius: 6px; cursor: pointer; transition: background .14s var(--ease), color .14s var(--ease); } .auth__tab:hover { color: var(--ink); } .auth__tab.is-on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); } .auth__label--sp { margin-top: 14px; } .auth__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--faint); } .auth__link { display: block; width: 100%; margin-top: 12px; padding: 0; font: inherit; font-size: 13px; color: var(--muted); text-align: center; background: none; border: 0; cursor: pointer; } .auth__link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .auth__done .auth__link { margin-top: 14px; } .demo__note { margin: 16px 0 0; font-size: 12px; color: var(--faint); text-align: center; } /* ── Password strength meter ───────────────────────────────────────────── A guide, not a gate — the bar's colour is the only thing that moves; the server-side rule stays a flat 8-character minimum regardless of what this shows. */ .auth__strength { display: flex; align-items: center; gap: 8px; margin-top: 7px; } .auth__strength_bar { flex: 1; height: 4px; border-radius: 2px; overflow: hidden; background: var(--line); } .auth__strength_bar span { display: block; height: 100%; border-radius: 2px; transition: width .16s var(--ease), background-color .16s var(--ease); } .auth__strength_bar span.is-weak { width: 25%; background: var(--risk); } .auth__strength_bar span.is-fair { width: 50%; background: var(--warn); } .auth__strength_bar span.is-good { width: 75%; background: var(--ink-2); } .auth__strength_bar span.is-strong { width: 100%; background: var(--ink); } .auth__strength_label { flex: none; font-size: 11.5px; color: var(--faint); min-width: 40px; text-align: right; }