/* Sapheron panel — design tokens carried over from sapheron.com so the marketing site and the product feel like one thing. Theme handling has THREE states, not two: an explicit choice stamps data-theme on , and the default "system" setting stamps nothing. So the bare :root holds the complete light palette, and dark is redefined both under prefers-color-scheme (guarded against an explicit light choice) and under [data-theme="dark"]. A colour whose only definition sits inside a media query never applies in the unstamped state. */ @font-face { font-family: "LT Saeada"; src: url("/static/fonts/LTSaeada-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; } @font-face { font-family: "LT Saeada"; src: url("/static/fonts/LTSaeada-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; } @font-face { font-family: "LT Saeada"; src: url("/static/fonts/LTSaeada-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; } :root { --sapheron-bg: #faf7ee; --sapheron-main: #31372b; --sapheron-sub: #bec092; --bg: var(--sapheron-bg); --bg-panel: #f5f2e8; --bg-input: #ffffff; --ink: var(--sapheron-main); /* NOT --sapheron-sub: that pale sage is 1.76:1 on cream. */ --ink-2: #5c6353; --ink-3: #6b7260; --accent: #6d7044; --border: rgba(49, 55, 43, .16); --border-strong: rgba(49, 55, 43, .30); --danger: #af473c; --ok: #4a7c59; --warn: #c9a66b; /* The brand panel is always the deep sage, in both themes — it is the constant the eye anchors on when the rest of the page flips. */ --brand-bg: #31372b; --brand-ink: #faf7ee; --brand-sub: rgba(250, 247, 238, .58); --font-display: "LT Saeada", system-ui, sans-serif; --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --radius: .6rem; --radius-lg: 1rem; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #262b21; --bg-panel: #2e342a; --bg-input: #31372b; --ink: #faf7ee; --ink-2: #cdd0a8; --ink-3: #a3a888; --accent: #d4d6a8; --border: rgba(250, 247, 238, .16); --border-strong: rgba(250, 247, 238, .30); --danger: #e08b80; --ok: #8fc0a0; --warn: #d8b87e; } } :root[data-theme="dark"] { --bg: #262b21; --bg-panel: #2e342a; --bg-input: #31372b; --ink: #faf7ee; --ink-2: #cdd0a8; --ink-3: #a3a888; --accent: #d4d6a8; --border: rgba(250, 247, 238, .16); --border-strong: rgba(250, 247, 238, .30); --danger: #e08b80; --ok: #8fc0a0; --warn: #d8b87e; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { /* 100dvh, never 100vh: mobile browser chrome makes vh overflow and cuts the bottom off a full-height layout. */ min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── split layout ─────────────────────────────────────────────────────── */ .auth { min-height: 100dvh; display: grid; grid-template-columns: 1fr; } @media (min-width: 960px) { .auth { grid-template-columns: 44% 1fr; } } /* ── brand side ───────────────────────────────────────────────────────── */ .brand { display: none; background: var(--brand-bg); color: var(--brand-ink); padding: 2.5rem 3rem; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } @media (min-width: 960px) { .brand { display: flex; } } /* A slow wash rather than a static gradient: it reads as a live product without asking for attention while someone is typing a password. */ .brand__wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 45% at 15% 12%, rgba(190,192,146,.16), transparent 70%), radial-gradient(50% 40% at 85% 85%, rgba(190,192,146,.10), transparent 70%); } /* A faint square grid — structure, no motif, nothing that competes with the form. Two repeating gradients rather than an SVG: fewer bytes, and it scales to any panel size without a viewBox. Kept at ~3.5% so it reads as texture rather than as lines you notice. */ .brand__grid { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, rgba(250,247,238,.035) 0 1px, transparent 1px 88px), repeating-linear-gradient(to bottom, rgba(250,247,238,.035) 0 1px, transparent 1px 88px); /* Fade it out toward the bottom so the grid never crowds the footer line. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%); mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%); } .brand > *:not(.brand__wash):not(.brand__grid) { position: relative; } .brand__mark { display: inline-flex; align-items: center; gap: 0; text-decoration: none; } .brand__mark img { height: 30px; width: auto; display: block; } .brand__mark span { font-family: var(--font-display); font-weight: 700; font-size: 2.15rem; letter-spacing: -.015em; line-height: 1; color: var(--brand-ink); } /* align-self keeps the lockup hard against the top of the panel rather than letting space-between centre it once the middle block grows. */ .brand__mark { align-self: flex-start; } .brand__lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 2.6vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; margin: 0; max-width: 20ch; text-wrap: balance; } .brand__lead em { font-style: normal; color: var(--sapheron-sub); } .brand__sub { margin: 1.1rem 0 0; max-width: 38ch; font-size: .93rem; line-height: 1.6; color: var(--brand-sub); } .pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.75rem 0 0; padding: 0; list-style: none; } .pill { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(250,247,238,.05); border: 1px solid rgba(250,247,238,.13); font-size: .74rem; color: rgba(250,247,238,.78); } .pill::before { content: ""; width: .3rem; height: .3rem; border-radius: 999px; background: var(--sapheron-sub); } .brand__foot { display: flex; align-items: center; gap: .5rem; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(250,247,238,.42); } .dot { width: .4rem; height: .4rem; border-radius: 999px; background: var(--ok); } /* ── form side ────────────────────────────────────────────────────────── */ .pane { display: flex; flex-direction: column; background: var(--bg); } .pane__top { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } @media (min-width: 960px) { .pane__top { border-bottom: 0; justify-content: flex-end; } } .pane__mark { display: inline-flex; align-items: center; gap: 0; text-decoration: none; } .pane__mark img { height: 20px; width: auto; } .pane__mark span { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; letter-spacing: -.01em; line-height: 1; color: var(--ink); } @media (min-width: 960px) { .pane__mark { display: none; } } .pane__body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1.25rem 3rem; } .form { width: 100%; max-width: 24rem; } .form__h { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .4rem; color: var(--ink); } .form__sub { margin: 0 0 1.75rem; font-size: .9rem; color: var(--ink-2); } .field { display: block; margin-bottom: 1rem; } .field__label { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-2); } .input { width: 100%; height: 2.85rem; padding: 0 .85rem; background: var(--bg-input); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); font-family: var(--font-ui); font-size: .95rem; transition: border-color .15s ease, box-shadow .15s ease; } .input::placeholder { color: var(--ink-3); } .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .input[aria-invalid="true"] { border-color: var(--danger); } .field--pw { position: relative; } .pw-toggle { position: absolute; right: .5rem; top: 1.85rem; height: 2rem; padding: 0 .55rem; border: 0; border-radius: .4rem; background: transparent; color: var(--ink-3); font-family: var(--font-ui); font-size: .76rem; font-weight: 600; cursor: pointer; } .pw-toggle:hover { color: var(--ink); } .row { display: flex; align-items: center; justify-content: space-between; margin: -.25rem 0 1.25rem; } .check { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--ink-2); cursor: pointer; } .check input { accent-color: var(--accent); width: .95rem; height: .95rem; } .link { color: var(--accent); font-size: .85rem; font-weight: 600; text-decoration: none; } .link:hover { text-decoration: underline; } .btn { width: 100%; height: 2.85rem; border-radius: var(--radius); border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font-family: var(--font-ui); font-size: .95rem; font-weight: 600; cursor: pointer; transition: opacity .15s ease; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; } .btn:hover { opacity: .88; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn--ghost:hover { background: var(--bg-panel); opacity: 1; } .oauth { display: grid; gap: .55rem; } .oauth .btn { justify-content: center; gap: .6rem; } .oauth .btn svg { flex-shrink: 0; } /* A disabled provider button still has to read as a real option, not as broken chrome, so it keeps full contrast and explains itself on hover. */ .btn--provider:disabled { opacity: .55; } .oauth__note { margin: .6rem 0 0; font-size: .74rem; line-height: 1.45; color: var(--ink-3); text-align: center; } .sep { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0; color: var(--ink-3); font-size: .76rem; } .sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--border); } .alert { display: flex; gap: .55rem; padding: .7rem .85rem; margin-bottom: 1.1rem; border-radius: var(--radius); font-size: .86rem; line-height: 1.45; background: color-mix(in srgb, var(--danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); color: var(--ink); } .alert--ok { background: color-mix(in srgb, var(--ok) 12%, transparent); border-color: color-mix(in srgb, var(--ok) 35%, transparent); } .foot { margin-top: 1.5rem; text-align: center; font-size: .88rem; color: var(--ink-2); } /* ── OTP step ─────────────────────────────────────────────────────────── */ .otp { display: flex; gap: .5rem; justify-content: space-between; margin-bottom: 1.1rem; } .otp input { width: 100%; aspect-ratio: 1 / 1.15; min-width: 0; text-align: center; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; background: var(--bg-input); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); /* Digits only, and they must line up. */ font-variant-numeric: tabular-nums; } .otp input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .theme-toggle { height: 2rem; width: 2rem; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--ink-2); cursor: pointer; } .theme-toggle:hover { color: var(--ink); border-color: var(--border-strong); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── authenticated shell ──────────────────────────────────────────────── */ .shell-body { background: var(--bg-panel); } .shell { min-height: 100dvh; display: grid; grid-template-columns: 1fr; } @media (min-width: 900px) { .shell { grid-template-columns: 15.5rem 1fr; } } .side { background: var(--brand-bg); color: var(--brand-ink); display: flex; flex-direction: column; gap: 1.25rem; padding: 1.4rem 1rem; /* Off-canvas below the breakpoint; the burger toggles .is-open. */ position: fixed; inset: 0 auto 0 0; width: 15.5rem; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; } .side.is-open { transform: none; } @media (min-width: 900px) { .side { position: sticky; top: 0; height: 100dvh; transform: none; } } .side__mark { display: inline-flex; align-items: center; gap: 0; text-decoration: none; padding: 0 .35rem; } .side__mark img { height: 22px; width: auto; } .side__mark span { font-family: var(--font-display); font-weight: 700; font-size: 1.55rem; letter-spacing: -.015em; line-height: 1; color: var(--brand-ink); } .side__ws { display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; border-radius: var(--radius); background: rgba(250,247,238,.06); border: 1px solid rgba(250,247,238,.10); } .side__ws-initial { width: 1.6rem; height: 1.6rem; flex-shrink: 0; border-radius: .4rem; display: grid; place-items: center; background: var(--sapheron-sub); color: #31372b; font-family: var(--font-display); font-weight: 700; font-size: .85rem; text-transform: uppercase; } .side__ws-name { font-size: .86rem; font-weight: 600; color: var(--brand-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav { display: flex; flex-direction: column; gap: .1rem; flex: 1; overflow-y: auto; } .nav__item { padding: .5rem .6rem; border-radius: var(--radius); font-size: .88rem; color: rgba(250,247,238,.72); text-decoration: none; } .nav__item:hover { background: rgba(250,247,238,.06); color: var(--brand-ink); } .nav__item.is-on { background: rgba(250,247,238,.10); color: var(--brand-ink); font-weight: 600; } /* Unbuilt sections are shown, not hidden: the shape of the product should be legible from day one. They are visibly inert rather than silently dead. */ .nav__item.is-soon { color: rgba(250,247,238,.34); cursor: default; } .nav__item.is-soon:hover { background: transparent; color: rgba(250,247,238,.34); } .nav__item.is-soon::after { content: " · soon"; font-size: .72rem; } .nav__label { margin: .9rem 0 .2rem; padding: 0 .6rem; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(250,247,238,.34); } .side__foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .9rem; border-top: 1px solid rgba(250,247,238,.10); } .who { display: flex; flex-direction: column; min-width: 0; } .who__name { font-size: .84rem; font-weight: 600; color: var(--brand-ink); } .who__role { font-size: .7rem; color: rgba(250,247,238,.45); text-transform: capitalize; } .linkbtn { background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--font-ui); font-size: .8rem; font-weight: 600; color: rgba(250,247,238,.62); } .linkbtn:hover { color: var(--brand-ink); text-decoration: underline; } .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .topbar__h { flex: 1; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink); } .burger { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; color: var(--ink-2); cursor: pointer; } @media (min-width: 900px) { .burger { display: none; } } .content { padding: 1.5rem 1.25rem 3rem; max-width: 68rem; width: 100%; } @media (min-width: 900px) { .content { padding: 2rem; } } .welcome__h { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.02em; margin: 0 0 .4rem; color: var(--ink); } .welcome__p { margin: 0 0 1.75rem; max-width: 56ch; color: var(--ink-2); } .cards { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); } .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.15rem; } .card__k { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem; } .card__v { margin: 0 0 .35rem; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--ink); text-transform: capitalize; } .card__n { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-2); } .next { margin-top: 2rem; } .next__h { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 .6rem; color: var(--ink); } .next__list { margin: 0; padding-left: 1.1rem; color: var(--ink-2); } .next__list li { margin-bottom: .3rem; font-size: .9rem; } /* ── account / settings panels ────────────────────────────────────────── */ .panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; } .panel__h { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin: 0 0 .6rem; color: var(--ink); } .panel__p { margin: 0 0 .5rem; font-size: .92rem; color: var(--ink); } .panel__n { margin: 0 0 .9rem; font-size: .82rem; line-height: 1.55; color: var(--ink-2); max-width: 60ch; } .tag { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600; letter-spacing: .02em; vertical-align: middle; } .tag--ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ink); } .tag--warn { background: color-mix(in srgb, var(--warn, #c9a66b) 22%, transparent); color: var(--ink); } .tag--bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--ink); } .btn--sm { width: auto; height: 2.35rem; padding: 0 1rem; font-size: .86rem; } .inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; } .inline-form .input { width: auto; flex: 1 1 14rem; } /* Digits must line up and read unambiguously — a code is copied, not read. */ .input--code { flex: 0 0 8.5rem; text-align: center; letter-spacing: .35em; font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-variant-numeric: tabular-nums; } /* Tables scroll inside their own container so the page body never scrolls sideways on a phone. */ .tablewrap { overflow-x: auto; margin-bottom: .9rem; } .table { width: 100%; border-collapse: collapse; font-size: .85rem; min-width: 30rem; } .table th { text-align: left; padding: .4rem .6rem .5rem; border-bottom: 1px solid var(--border); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border-subtle, var(--border)); color: var(--ink-2); } .table tr:last-child td { border-bottom: 0; } .table .num { font-variant-numeric: tabular-nums; white-space: nowrap; } .table .ua { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }