/* ============================================================
Ospaces — "Warm Editorial Calm" (loaded LAST, wins cascade ties)
------------------------------------------------------------
A calm, premium writing environment. Warm paper surfaces on a
warm-graphite frame; iris used sparingly as punctuation, a warm
gold as the secondary accent; big, quiet titles and airy space.
Organisation follows a SHARPER HIERARCHY: the everyday
destinations (Search · Home · Inbox · New page) sit strong at the
top; the long tool list below recedes into a quiet directory,
separated by hairlines and air. Nothing in the DOM moves — every
ID / class the app is wired to is preserved. Fully reversible:
delete this one and the app reverts.
Signature: the ORBIT brand mark (a placed point held in its
orbit) carried over from the prior pass — it matches
"every idea has a place" and retires the stray "S".
============================================================ */
/* ============================================================
1 · Tokens — the whole warm system defined once
============================================================ */
:root {
--font-display: "Space Grotesk", var(--font);
/* frame: warm graphite behind the floating pane + the rail */
--frame: #201e24;
--frame-deep: #16151a;
/* the writing surface = warm paper */
--bg: #fcfbf8;
--bg-hover: rgba(46, 40, 30, 0.05);
--bg-active: rgba(91, 91, 239, 0.08);
--bg-code: #f3f1ea;
--bg-callout:#f5f1e8;
--bg-modal: #fdfcfa;
--bg-input: #ffffff;
/* warm ink + warm greys */
--text: #2a2822;
--text-light: #6b6558;
--text-faint: #9c9788;
--text-placeholder: rgba(42, 40, 34, 0.34);
--border: #eae5db;
--border-strong: #d9d3c6;
/* iris = cool punctuation; gold = warm secondary */
--accent: #5b5bef;
--accent-hover: #4a49dd;
--accent-soft: #a6a3ff;
--accent-tint: rgba(91, 91, 239, 0.10);
--gold: #cf9526;
--gold-soft: #e7c079;
--star: #cf9526;
--danger: #d6544a;
/* warm, soft, layered elevation */
--shadow-popover: rgba(40,32,20,0.05) 0 0 0 1px, rgba(40,32,20,0.08) 0 6px 16px, rgba(28,22,12,0.14) 0 18px 44px;
--shadow-card: rgba(40,32,20,0.07) 0 0 0 1px, rgba(40,32,20,0.06) 0 3px 10px;
--shadow-pane: 0 1px 2px rgba(10,8,3,0.22), 0 22px 60px rgba(10,8,3,0.30);
/* editorial: softer corners, more air */
--radius-pane: 18px;
--radius-card: 12px;
--radius-ctl: 9px;
--sidebar-w: 268px;
--topbar-h: 50px;
--page-w: 720px;
--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}
html[data-theme="dark"] {
--frame: #131218;
--frame-deep: #0c0b10;
--bg: #1b1a20;
--bg-hover: rgba(240, 234, 220, 0.055);
--bg-active: rgba(129, 126, 246, 0.16);
--bg-code: #232128;
--bg-callout:#221f19;
--bg-modal: #1f1e25;
--bg-input: #26242d;
--text: #ece8e0;
--text-light: #a8a396;
--text-faint: #736e62;
--text-placeholder: rgba(236,232,224,0.3);
--border: #2b2933;
--border-strong: #3c3947;
--accent-soft: #a6a3ff;
--gold: #e0ab4e;
--gold-soft: #caa055;
--star: #e0ab4e;
--shadow-popover: rgba(180,150,90,0.06) 0 0 0 1px, rgba(0,0,0,0.44) 0 6px 16px, rgba(0,0,0,0.6) 0 18px 44px;
--shadow-card: rgba(180,150,90,0.06) 0 0 0 1px, rgba(0,0,0,0.34) 0 3px 10px;
--shadow-pane: 0 1px 2px rgba(0,0,0,0.5), 0 22px 60px rgba(0,0,0,0.5);
}
/* the frame is quiet, not flat: a barely-there warm top glow */
body {
background:
radial-gradient(125% 90% at 16% -12%, rgba(255, 236, 205, 0.06), transparent 55%),
var(--frame);
background-attachment: fixed;
}
#main { box-shadow: var(--shadow-pane), inset 0 1px 0 rgba(255,255,255,0.03); }
/* warm, unobtrusive scrollbars */
::-webkit-scrollbar-thumb { background: var(--border-strong); }
/* ============================================================
2 · Signature — the ORBIT brand mark (iris tile pops on warm)
============================================================ */
/* The orbit is an OVERLAY (::before), not a background layer — so it still
shows when app.js sets an inline background colour (workspace identity).
The iris gradient is the default fill; a custom workspace colour overrides
it. A custom workspace icon/letter flips on .sb-logo-custom (set in JS),
which reveals the glyph and hides the orbit. */
.sb-logo, .login-logo, .empty-logo, .login-logo-sm {
position: relative; overflow: hidden;
background: linear-gradient(150deg, #7c78ff 0%, #5b5bef 52%, #4a44cf 100%);
color: #fff; font-size: 0; /* default single letter stays hidden */
display: flex; align-items: center; justify-content: center;
}
.sb-logo::before, .login-logo::before, .empty-logo::before, .login-logo-sm::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='8.4' stroke='white' stroke-opacity='0.92' stroke-width='1.5'/%3E%3Ccircle cx='12' cy='12' r='2.9' fill='white'/%3E%3Ccircle cx='12' cy='3.6' r='1.75' fill='white'/%3E%3C/svg%3E")
center / 62% no-repeat;
}
.login-logo-sm::before { background-size: 74%; }
/* a customised workspace shows its own icon/letter instead of the orbit */
.sb-logo.sb-logo-custom { font-size: 13px; font-weight: 700; }
.sb-logo.sb-logo-custom::before { display: none; }
.sb-logo { box-shadow: 0 2px 10px rgba(75,73,221,0.45), inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 0 rgba(255,255,255,0.26); }
.login-logo { box-shadow: 0 10px 30px rgba(75,73,221,0.4), inset 0 0 0 1px rgba(255,255,255,0.16), inset 0 1px 0 rgba(255,255,255,0.3); }
.empty-logo { box-shadow: 0 16px 40px rgba(75,73,221,0.3), inset 0 0 0 1px rgba(255,255,255,0.14); }
/* ============================================================
3 · Sidebar — warm rail + a genuine reading hierarchy
============================================================ */
#sidebar {
padding-right: 6px;
/* warm the light-on-dark rail tokens */
--text: #f1eee5;
--text-light: #bcb7a7;
--text-faint: #877f6d;
--bg-hover: rgba(255, 250, 238, 0.06);
--bg-active: rgba(255, 250, 238, 0.10);
--border: rgba(255, 249, 235, 0.09);
--border-strong: rgba(255, 249, 235, 0.18);
}
.sb-header { padding: 13px 8px 9px; }
.sb-logo { width: 26px; height: 26px; border-radius: 8px; }
.sb-ws-name { font-size: 15.5px; letter-spacing: 0.2px; font-weight: 600; }
/* --- TIER 1: the everyday destinations, given real presence --- */
.sb-top-actions { padding: 2px 8px 12px; }
.sb-top-actions .sb-action {
font-size: 14px; font-weight: 500; color: var(--text);
min-height: 34px; border-radius: 9px; letter-spacing: 0.1px;
}
.sb-top-actions .sb-action .sb-action-icon { width: 19px; height: 19px; color: var(--text-light); }
#sidebar .sb-action { transition: background .14s var(--ease-out), color .14s; }
#sidebar .sb-action:hover .sb-action-icon { color: #d7d2c4; }
/* the single primary action — an iris chip (cool pop on the warm rail) */
.sb-action-primary {
margin: 8px 0 2px !important;
background: linear-gradient(180deg, #6d6cf3, var(--accent)) !important;
color: #fff !important; font-weight: 600;
box-shadow: 0 1px 2px rgba(6,7,20,0.3), 0 8px 20px rgba(75,73,221,0.42), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.sb-action-primary:hover { filter: brightness(1.05); box-shadow: 0 2px 4px rgba(6,7,20,0.3), 0 10px 26px rgba(75,73,221,0.52), inset 0 1px 0 rgba(255,255,255,0.26) !important; }
.sb-action-primary .sb-action-icon, .sb-action-primary:hover .sb-action-icon { color: rgba(255,255,255,0.95); }
/* --- TIER 2: the deep tool list recedes into a quiet directory --- */
.sb-scroll { padding: 4px 8px 14px; }
.sb-nav-section .sb-action,
#sb-tree .tree-item,
#sb-databases .tree-item,
#sb-teams .tree-item {
font-size: 13px; color: var(--text-light); min-height: 28px;
}
.sb-nav-section .sb-action .sb-action-icon { width: 16px; height: 16px; }
.sb-nav-section .sb-action:hover, #sb-tree .tree-item:hover { color: var(--text); }
/* --- section rhythm: air + hairline separators between clusters --- */
.sb-scroll > .sb-section { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border); }
.sb-scroll > .sb-section:first-child { border-top: none; padding-top: 6px; }
.sb-section-title {
font-size: 10.5px; letter-spacing: 1px; font-weight: 600; margin-bottom: 4px;
color: var(--text-faint);
}
.sb-sec-twist { color: rgba(255,250,238,0.4); }
.sb-kbd { background: rgba(255,250,238,0.05); border-color: rgba(255,250,238,0.13); box-shadow: inset 0 -1px 0 rgba(0,0,0,0.28); letter-spacing: 0.3px; }
/* active states share one calm iris seat */
#sidebar .sb-action.active {
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
color: #fff; box-shadow: inset 2px 0 0 var(--accent-soft);
}
#sidebar .sb-action.active .sb-action-icon { color: var(--accent-soft); }
.tree-item.active { box-shadow: inset 2px 0 0 var(--accent-soft); }
/* footer + user chip */
.sb-footer { padding: 8px 8px 8px; }
.sb-user { border-radius: 10px; padding: 9px 8px 4px; }
.sb-user-av { box-shadow: 0 1px 5px rgba(75,73,221,0.45); }
/* ============================================================
4 · Topbar — quiet, a touch taller, calmer controls
============================================================ */
#topbar { height: var(--topbar-h); padding: 0 14px; }
#breadcrumbs { font-size: 13.5px; }
.crumb:last-child { font-weight: 600; }
.topbar-btn, .icon-btn { transition: background .14s, color .14s, transform .08s var(--ease-out); }
.topbar-btn:active, .icon-btn:active { transform: scale(0.93); }
#btn-fav.faved { color: var(--gold); }
/* ============================================================
5 · The page — editorial: big quiet title, generous measure
============================================================ */
#page-body { max-width: var(--page-w); padding: 0 56px 30vh; }
#page-head { padding-top: 64px; }
#page-title {
font-size: 46px; font-weight: 700; letter-spacing: -1.1px; line-height: 1.12;
}
.block-content { font-size: 16.5px; line-height: 1.62; }
.b-h1 .block-content { font-size: 31px; letter-spacing: -0.6px; }
.b-h2 .block-content { font-size: 24px; }
/* bullets/numbers keep the iris punctuation, quieted a touch */
.b-bullet::before { color: var(--accent-soft); }
/* ============================================================
6 · Empty state — intentional and warm
============================================================ */
.empty-logo { width: 72px; height: 72px; border-radius: 22px; }
#empty-state .empty-inner p { color: var(--text-light); font-size: 15.5px; margin-top: 20px; }
#empty-state .login-btn.primary { margin-top: 20px; }
/* ============================================================
7 · Home hero + library — warm cards, a gold editorial rule
============================================================ */
.hh-hello { font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.8px; }
.hh-card { border-radius: 14px; }
.hh-card:hover { border-color: var(--gold-soft); box-shadow: 0 10px 24px rgba(40,32,20,0.1); }
.lib-title::after,
.hh-recents-label::before {
background: linear-gradient(90deg, var(--gold), var(--gold-soft)) !important;
}
.lib-item:hover { box-shadow: inset 2px 0 0 var(--gold-soft); }
/* ============================================================
8 · Inputs & primary buttons — one consistent, premium feel
============================================================ */
.login-input:focus, .qc-text:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.login-btn.primary, .qc-save {
background: linear-gradient(180deg, #6d6cf3, var(--accent));
box-shadow: 0 1px 2px rgba(6,7,20,0.14), 0 8px 22px rgba(91,91,239,0.3), inset 0 1px 0 rgba(255,255,255,0.24);
transition: filter .15s, box-shadow .2s, transform .08s var(--ease-out);
}
.login-btn.primary:hover, .qc-save:hover { filter: brightness(1.05); box-shadow: 0 2px 4px rgba(6,7,20,0.14), 0 10px 28px rgba(91,91,239,0.4), inset 0 1px 0 rgba(255,255,255,0.28); }
.login-btn.primary:active { transform: translateY(0) scale(0.99); }
/* login's left aside now lives on the graphite frame — see §17 */
/* ============================================================
9 · Icon presence + reduced-motion
============================================================ */
.sb-action-icon .ic { width: inherit; height: inherit; }
@media (prefers-reduced-motion: reduce) {
.topbar-btn:active, .icon-btn:active, .login-btn.primary:active { transform: none !important; }
body { background-attachment: scroll; }
}
/* ============================================================
10 · Content blocks — the document's editorial voice
============================================================ */
/* pull-quote: a warm gold rule + a real quoting voice */
.b-quote { border-left: 3px solid var(--gold); padding-left: 18px; margin: 12px 0; }
.b-quote .block-content { font-size: 18.5px; line-height: 1.55; color: var(--text-light); font-style: italic; letter-spacing: 0.1px; }
/* callout: a warm card with one quiet accent edge */
.b-callout {
padding: 14px 16px 14px 15px; border-radius: 12px; margin: 12px 0;
background: var(--bg-callout); border: 1px solid var(--border);
box-shadow: inset 3px 0 0 var(--gold-soft);
}
.callout-icon { font-size: 18px; }
/* code: an editorial code card */
.b-code {
border-radius: 12px; margin: 14px 0; padding: 32px 16px 16px;
background: var(--bg-code); border: 1px solid var(--border);
box-shadow: 0 1px 2px rgba(40,32,20,0.05);
}
.b-code .block-content { font-size: 13px; line-height: 1.68; }
.code-lang, .code-bar .code-lang { letter-spacing: 0.4px; }
/* inline code: warm terracotta reads better on paper than raspberry */
.block-content code { color: #b3572f; background: var(--bg-code); border: 1px solid var(--border); }
html[data-theme="dark"] .block-content code { color: #e79b6f; border-color: var(--border); }
/* divider: a hairline that fades at both ends */
.divider-line { height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 16%, var(--border-strong) 84%, transparent); }
/* tables: warm header, calm grid */
.t-cell { border-color: var(--border); }
.t-cell.t-head { background: var(--bg-callout); letter-spacing: 0.2px; }
/* todo: the check stays iris, the done row goes gently quiet */
.b-todo.checked .block-content { color: var(--text-faint); }
/* links keep the iris underline, warmed a touch */
.block-content a { text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
/* ============================================================
11 · Modals · command palette · menus · popovers
============================================================ */
#modal-layer {
background: rgba(22, 17, 9, 0.55);
-webkit-backdrop-filter: saturate(1.2) blur(5px); backdrop-filter: saturate(1.2) blur(5px);
}
.modal { border-radius: 18px; border: 1px solid var(--border); box-shadow: var(--shadow-popover); }
.popover { border-radius: 13px; border: 1px solid var(--border); box-shadow: var(--shadow-popover); padding: 5px; }
/* command palette: a bigger, editorial search field */
.modal-search-input { padding: 17px 20px; font-size: 17px; font-family: var(--font-display); letter-spacing: 0.1px; }
.modal-results { padding: 8px; }
.result-item { padding: 9px 12px; border-radius: 10px; transition: background .1s, box-shadow .1s; }
.result-item:hover, .result-item.selected {
background: var(--accent-tint); box-shadow: inset 2px 0 0 var(--accent);
}
.result-title { font-weight: 500; }
.result-snippet mark, .lib-snippet mark, .result-item mark { background: color-mix(in srgb, var(--gold) 30%, transparent); }
/* menu rows: calm, with an accent seat when keyboard-selected */
.menu-item { border-radius: 8px; }
.menu-item.selected { box-shadow: inset 2px 0 0 var(--accent-soft); }
.menu-section { letter-spacing: 0.8px; }
.menu-icon { border-radius: 7px; }
/* settings: warm stat cards + rounded nav */
.settings-modal { border-radius: 18px; }
.settings-stat { background: var(--bg-callout); border-radius: 12px; }
.settings-nav-item { border-radius: 8px; }
/* ============================================================
12 · Toast · badges · keys
============================================================ */
#toast { border-radius: 12px; box-shadow: 0 0 0 1px rgba(207,149,38,0.16), 0 16px 42px rgba(6,5,2,0.5); }
.toast-action { color: var(--gold-soft); }
#inbox-badge, .sb-badge, .sb-plan-badge {
background: var(--accent); color: #fff; border-radius: 999px;
font-size: 10.5px; font-weight: 600; line-height: 1; padding: 3px 6px; letter-spacing: 0.2px;
}
/* ============================================================
13 · Empty state — composed, with a quiet way forward
============================================================ */
#empty-state { display: flex; align-items: center; justify-content: center; }
#empty-state .empty-inner { text-align: center; max-width: 400px; }
#empty-state .empty-inner p {
font-family: var(--font-display); font-size: 18px; font-weight: 600;
color: var(--text); letter-spacing: -0.2px; margin-top: 22px;
}
#empty-state .empty-inner::after {
content: "Tip — press Ctrl P to jump to anything";
display: block; margin-top: 24px; font-size: 12.5px; color: var(--text-faint); letter-spacing: 0.2px;
}
/* ============================================================
14 · Secondary buttons — one consistent, warm system
============================================================ */
.login-btn:not(.primary) {
border-radius: 10px; border: 1px solid var(--border-strong);
transition: background .14s, border-color .14s, box-shadow .16s, transform .08s var(--ease-out);
}
.login-btn:not(.primary):hover { border-color: var(--accent-soft); background: var(--bg-hover); }
.login-btn:not(.primary):active { transform: scale(0.99); }
/* selection: a warm-neutral wash, not harsh iris */
::selection { background: color-mix(in srgb, var(--accent) 20%, transparent); }
/* ============================================================
15 · Sidebar — a deeper, more crafted rail
Search becomes a real field · the workspace name reads as a
switcher · active rows get a soft pill + rounded accent · the
account sits in its own card. All on the always-dark rail, so
the fixed light overlays are correct in both themes.
============================================================ */
/* quiet top-lit depth so the rail reads as its own panel */
#sidebar { background: linear-gradient(180deg, rgba(255,251,240,0.03), rgba(255,251,240,0) 44%); }
#sidebar .sb-scroll::-webkit-scrollbar { width: 8px; }
#sidebar .sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); border: 2px solid transparent; background-clip: content-box; }
#sidebar:hover .sb-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.16); }
/* --- workspace header → a switcher ("◉ Ospaces ⌄") --- */
.sb-header { padding: 12px 8px 9px; }
.sb-workspace {
cursor: pointer; padding: 5px 7px; border-radius: 10px; gap: 9px;
transition: background .14s var(--ease-out);
}
.sb-workspace:hover { background: rgba(255,250,238,0.07); }
.sb-workspace::after {
content: ""; width: 13px; height: 13px; flex: none; margin-left: -2px;
background: var(--text-faint);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4'/%3E%3Cpath d='M16 15l-4 4-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 9l4-4 4 4'/%3E%3Cpath d='M16 15l-4 4-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
transition: background .14s;
}
.sb-workspace:hover::after { background: var(--text-light); }
.sb-ws-name { flex: 0 1 auto; }
#btn-collapse { opacity: 0.4; }
.sb-header:hover #btn-collapse { opacity: 0.9; }
/* --- Search → an inviting field, not just a row --- */
#btn-search {
min-height: 36px; margin-bottom: 6px; border-radius: 10px;
color: var(--text-faint); font-weight: 500;
background: rgba(255,250,238,0.045);
box-shadow: inset 0 0 0 1px rgba(255,249,235,0.10);
transition: background .14s, box-shadow .14s, color .14s;
}
#btn-search:hover { background: rgba(255,250,238,0.08); box-shadow: inset 0 0 0 1px rgba(255,249,235,0.2); color: var(--text-light); }
#btn-search .sb-action-icon { color: var(--text-faint); }
#btn-search:hover .sb-action-icon { color: var(--text-light); }
#btn-search .sb-kbd { margin-left: auto; }
/* --- nav rows: soft pill hover + a rounded accent on active --- */
#sidebar .sb-action { position: relative; }
#sidebar .sb-action:hover { background: rgba(255,250,238,0.06); }
#sidebar .sb-action.active {
background: color-mix(in srgb, var(--accent) 22%, transparent);
color: #fff; box-shadow: none;
}
#sidebar .sb-action.active::before,
.tree-item.active::before {
content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
width: 3px; height: 15px; border-radius: 3px; background: var(--accent-soft);
}
.tree-item { position: relative; }
.tree-item.active { background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: none; }
#sidebar .sb-action.active .sb-action-icon { color: #fff; }
/* the create action stays the hero, just a touch more deliberate */
.sb-action-primary { letter-spacing: 0.2px; min-height: 36px !important; }
/* section headers + their reveal-on-hover add buttons */
.sb-section-add { border-radius: 6px; }
.sb-section-add:hover { background: rgba(255,250,238,0.12); }
/* --- footer: a proper account card + a tidy control row --- */
.sb-footer-row .sb-action { border-radius: 8px; }
.sb-footer-row .sb-action:hover { background: rgba(255,250,238,0.08); }
.sb-user {
margin-top: 8px; padding: 8px 10px; border-radius: 12px;
border: 1px solid rgba(255,249,235,0.09);
background: rgba(255,250,238,0.04);
transition: background .14s, border-color .14s;
}
.sb-user:hover { background: rgba(255,250,238,0.07); border-color: rgba(255,249,235,0.16); }
.sb-user-av { width: 27px; height: 27px; font-size: 12px; }
.sb-user-email { font-size: 12.5px; color: var(--text-light); }
.sb-user #btn-logout { opacity: 0.55; }
.sb-user:hover #btn-logout { opacity: 1; }
/* ============================================================
16 · Primary "New page" chip + the "Plan & guide" CTA
============================================================ */
/* New page — the one unmistakable primary: a crisp, dimensional iris chip */
.sb-action-primary {
min-height: 38px !important;
border-radius: 10px !important;
font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px;
color: #fff !important;
background: linear-gradient(180deg, #7a78f7 0%, #5b5bef 58%, #4f4ee6 100%) !important;
box-shadow:
0 1px 2px rgba(6,7,20,0.32),
0 10px 22px rgba(75,73,221,0.45),
inset 0 1px 0 rgba(255,255,255,0.30),
inset 0 0 0 1px rgba(255,255,255,0.07) !important;
transition: filter .14s, box-shadow .18s, transform .08s var(--ease-out);
}
.sb-action-primary:hover {
filter: brightness(1.06);
box-shadow:
0 2px 4px rgba(6,7,20,0.32),
0 13px 30px rgba(75,73,221,0.55),
inset 0 1px 0 rgba(255,255,255,0.34),
inset 0 0 0 1px rgba(255,255,255,0.10) !important;
}
.sb-action-primary:active { transform: scale(0.985); }
.sb-action-primary .sb-action-icon,
.sb-action-primary:hover .sb-action-icon { color: #fff; }
/* Plan & guide — a calm CTA; the tier badge carries the only accent */
#btn-plan { border-radius: 9px; font-weight: 500; }
#btn-plan .sb-action-icon { color: var(--text-faint); }
#btn-plan:hover .sb-action-icon { color: var(--text-light); }
/* #plan-badge is a wrapper that plans.js fills with a
using the raw tier accent (enterprise = a loud #7c3aed). Keep the wrapper
invisible and soften the inner pill so its colour tints the warm rail
instead of clashing — the plan's identity survives, quietly. */
.sb-plan-badge { margin-left: auto; background: none; border: none; padding: 0; }
#sidebar .plan-badge {
font-size: 10px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 8px; line-height: 1.5;
color: color-mix(in srgb, var(--pb, var(--accent)) 44%, #ffffff);
background: color-mix(in srgb, var(--pb, var(--accent)) 20%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pb, var(--accent)) 38%, transparent);
}
/* ============================================================
17 · Login — the airlock: the frame at full depth
------------------------------------------------------------
The split screen IS the product metaphor: warm graphite frame
on the left carrying the brand story + a living paper pane
(real microcopy, a to-do that completes itself, presence), the
warm paper panel with the form on the right. Purely additive:
every id and behavioural class the auth JS drives is untouched.
Matches the landing page (lp-*) vocabulary — lg-* is its
login-side dialect.
============================================================ */
/* ---- left: warm graphite with the app's top glow ---- */
.login-brand {
padding: 44px 56px 38px;
background:
radial-gradient(120% 85% at 16% -10%, rgba(255, 236, 205, 0.07), transparent 56%),
radial-gradient(90% 70% at 90% 110%, rgba(91, 91, 239, 0.10), transparent 62%),
var(--frame);
}
/* the old engineered dot-grid (polish.css) reads as the previous voice — retire it */
.login-brand::before { content: none; }
.login-brand-mark { font-size: 17px; gap: 9px; color: #f1eee5; }
.login-logo-sm {
width: 28px; height: 28px; border-radius: 9px;
background: linear-gradient(150deg, #7c78ff 0%, #5b5bef 52%, #4a44cf 100%);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}
.lg-mark {
display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
font-family: var(--font-mono); font-size: 11px; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase; color: #877f6d;
}
.lg-mark::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.login-brand-title {
font-weight: 500; letter-spacing: -0.03em; color: #f6f3ea;
font-size: clamp(36px, 3.6vw, 54px); line-height: 1.04; margin-bottom: 16px;
}
.lg-nowrap { white-space: nowrap; }
/* the orbit as the sentence's full stop (landing signature, dark variant) */
.lg-period { display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.07em; }
.lg-period svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lg-period .ring { fill: none; stroke: rgba(255, 255, 255, 0.94); stroke-width: 1.9; }
.lg-period .core { fill: rgba(255, 255, 255, 0.94); }
.lg-period .orb circle { fill: var(--accent-soft); }
.lg-period .orb {
transform-box: view-box; transform-origin: center;
animation: lg-orbit 3.4s cubic-bezier(0.3, 0.1, 0.22, 1) 0.8s both;
}
@keyframes lg-orbit {
0% { transform: rotate(-300deg); }
82% { transform: rotate(9deg); }
100% { transform: rotate(0deg); }
}
.login-brand-sub { color: #bcb7a7; font-size: 16px; line-height: 1.6; max-width: 420px; }
/* ---- the living pane (fixed light paper: a depiction of the product) ---- */
.lg-stage { position: relative; max-width: 470px; margin-top: 40px; animation: lg-rise 0.8s var(--ease-out) 0.15s both; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(18px); } }
.lg-pane {
background: #fcfbf8; border-radius: 14px; padding: 16px 18px;
box-shadow: 0 1px 2px rgba(10, 8, 3, 0.3), 0 26px 64px rgba(10, 8, 3, 0.44), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.lg-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.lg-crumb { font-size: 10.5px; color: #9c9788; }
.lg-avs { display: flex; }
.lg-avs .lg-av { margin-left: -5px; box-shadow: 0 0 0 2px #fcfbf8; }
.lg-avs .lg-av:first-child { margin-left: 0; }
.lg-av {
width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-size: 8.5px; font-weight: 700; font-family: var(--font-display);
}
.lg-title { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: #2a2822; display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.lg-callout { display: flex; gap: 8px; align-items: flex-start; background: #f3efe6; border-radius: 8px; padding: 8px 11px; margin-bottom: 9px; font-size: 12px; line-height: 1.5; color: #57524a; }
.lg-callout .em { font-size: 12.5px; }
.lg-todo { display: flex; align-items: center; gap: 8px; padding: 2.5px 0; font-size: 12.4px; color: #57524a; }
.lg-todo .tbox {
width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0;
border: 1.5px solid #d9d3c6; background: #fffefb;
display: inline-flex; align-items: center; justify-content: center;
}
.lg-todo .tbox svg { width: 9px; height: 9px; stroke: #fff; stroke-width: 3.2; fill: none; transform: scale(0); }
.lg-todo .tlabel { position: relative; }
.lg-todo-auto .tbox { animation: lg-boxfill 0.28s ease 1.9s forwards; }
.lg-todo-auto .tbox svg { animation: lg-checkpop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.4) 2s forwards; }
.lg-todo-auto .tlabel { animation: lg-fadeink 0.4s ease 2.1s forwards; }
.lg-todo-auto .tlabel::after {
content: ""; position: absolute; left: 0; top: 54%; height: 1.3px; width: 0; background: #9c9788;
animation: lg-strike 0.32s ease 2.15s forwards;
}
@keyframes lg-boxfill { to { background: #5b5bef; border-color: #5b5bef; } }
@keyframes lg-checkpop { to { transform: scale(1); } }
@keyframes lg-fadeink { to { color: #9c9788; } }
@keyframes lg-strike { to { width: 100%; } }
.lg-table { border: 1px solid #eae5db; border-radius: 9px; overflow: hidden; margin-top: 11px; background: #fffefb; }
.lg-tr { display: grid; grid-template-columns: 1.5fr 0.95fr 0.5fr; align-items: center; }
.lg-tr + .lg-tr { border-top: 1px solid #eae5db; }
.lg-th { background: #faf8f2; }
.lg-th .lg-td { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em; text-transform: uppercase; color: #9c9788; padding-top: 6px; padding-bottom: 6px; }
.lg-td { padding: 7px 11px; font-size: 12px; color: #57524a; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-td:first-child { color: #2a2822; }
.lg-chip { display: inline-flex; white-space: nowrap; font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; color: #6f6a5d; background: #efece3; }
.lg-chip.green { color: #2e7d4f; background: #e3f0e4; }
.lg-chip.amber { color: #96690f; background: #f6ecd2; }
/* presence card — announces the to-do that just completed */
.lg-float {
position: absolute; right: -18px; bottom: -20px; z-index: 2;
display: flex; align-items: center; gap: 10px;
background: #fffefb; border-radius: 12px; padding: 9px 13px;
box-shadow: rgba(40, 32, 20, 0.1) 0 0 0 1px, 0 16px 38px rgba(10, 8, 3, 0.5);
opacity: 0; transform: translateY(10px);
animation: lg-floatin 0.55s var(--ease-out) 2.6s forwards;
}
@keyframes lg-floatin { to { opacity: 1; transform: none; } }
.lg-float .lg-av { width: 24px; height: 24px; font-size: 10px; }
.lg-float-txt { font-size: 11.5px; color: #9c9788; }
.lg-float-txt b { color: #2a2822; display: block; font-size: 12px; font-weight: 600; }
/* AI aside chip — quiet, warm, gently bobbing */
.lg-chip-ai {
position: absolute; top: -16px; right: 22px; z-index: 2;
display: inline-flex; align-items: center; gap: 8px;
background: #2a2731; color: #e7dfcf; font-size: 11.5px; font-weight: 500;
border-radius: 999px; padding: 7px 13px;
box-shadow: inset 0 0 0 1px rgba(255, 249, 235, 0.14), 0 10px 26px rgba(10, 8, 3, 0.5);
animation: lg-bob 6.5s ease-in-out 0.5s infinite alternate;
}
.lg-chip-ai .spark { width: 13px; height: 13px; border-radius: 4px; background: linear-gradient(140deg, #e7c079, #cf9526); box-shadow: 0 0 0 3px rgba(207, 149, 38, 0.16); }
@keyframes lg-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
/* ---- foot: mono tag line replaces the pill row ---- */
.login-tags { gap: 6px 0; }
.login-tags span {
background: none; border: 0; box-shadow: none; padding: 0;
font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: #877f6d;
}
.login-tags span + span::before { content: "·"; margin: 0 10px; color: #57524a; }
.login-credit { color: #877f6d; }
/* ---- right: the form, warmed and steadied ---- */
.login-heading { font-weight: 600; font-size: 28px; letter-spacing: -0.02em; }
.login-sub { margin: 8px 0 26px; }
.login-logo { border-radius: 12px; margin-bottom: 20px; }
.login-label { font-size: 12px; }
.login-input { min-height: 44px; }
.login-divider span {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
.login-error, .login-note { border-radius: 10px; }
.login-legal { font-size: 11px; color: var(--text-faint); }
/* strength ramp in the warm palette */
.login-strength[data-level="1"] > .login-strength-bar > i { background: var(--danger); }
.login-strength[data-level="2"] > .login-strength-bar > i { background: var(--gold); }
.login-strength[data-level="3"] > .login-strength-bar > i { background: #5d9a63; }
.login-strength[data-level="4"] > .login-strength-bar > i { background: #2e7d4f; }
/* ---- short viewports: keep the story, shed the furniture ---- */
@media (max-height: 780px) {
.lg-callout, .lg-table { display: none; }
.lg-stage { margin-top: 28px; }
.login-brand-title { font-size: clamp(32px, 3vw, 44px); }
}
@media (prefers-reduced-motion: reduce) {
.lg-period .orb, .lg-stage, .lg-chip-ai { animation: none; }
.lg-todo-auto .tbox, .lg-todo-auto .tbox svg, .lg-todo-auto .tlabel, .lg-todo-auto .tlabel::after { animation: none; }
.lg-float { animation: none; opacity: 1; transform: none; }
}