/* ===================================================================== KEEL — design system Built on the meks visual language (Poppins, warm-neutral editorial base), with a calmer "grounding" accent chosen for an executive-function audience. Product name lives in one place: assets/js/config.js (APP.name). ===================================================================== */ :root { /* --- meks neutrals --- */ --ink: #15171C; /* primary text / headings */ --graphite: #3D424D; /* secondary text */ --mist: #8A909C; /* muted / captions */ --line: #E6E2D8; /* hairlines */ --line-soft: #F0EEE7; /* faint fills */ --paper: #F4F1EA; /* warm canvas */ --card: #FFFFFF; /* surfaces */ /* --- accent: calm grounding green (swap to restyle the whole app) --- */ --accent: #1E6F5A; --accent-ink: #124435; --accent-soft: #E4F0EB; --accent-mid: #57A78F; /* --- semantic (kept muted — low visual stimulation on purpose) --- */ --flag: #C6603D; /* priority flag */ --flag-soft: #F6E7DF; --win: #C79A2E; /* quick win */ --win-soft: #F6EFD8; --ok: #1E6F5A; --danger: #B23B3B; --danger-soft: #F5E2E1; /* --- block category colours (diary) — muted, distinguishable --- */ --cat-planning: #4C6EF5; --cat-actioning: #1E6F5A; --cat-email: #7A5AF0; --cat-sleep: #3A4A63; --cat-morning: #E0A23C; --cat-evening: #6C63A6; --cat-meals: #C6603D; --cat-work: #2D6E8A; --cat-exercise: #2E9E7B; --cat-social: #D06A9A; --cat-downtime: #8A909C; --cat-travel: #B08A5A; --cat-custom: #5B6470; /* type scale (meks) — expressed in rem for a screen app */ --fs-display: 2.15rem; --fs-h1: 1.35rem; --fs-h2: 1.05rem; --fs-h3: 0.9rem; --fs-body: 0.9rem; --fs-cap: 0.72rem; --radius: 12px; --radius-sm: 8px; --radius-lg: 18px; --shadow: 0 14px 40px rgba(21,23,28,.07); --shadow-sm: 0 4px 14px rgba(21,23,28,.05); --nav-w: 236px; --maxw: 1080px; --ease: cubic-bezier(.4,0,.2,1); --dur: .18s; /* density tokens (Comfortable default; overridden by [data-density]) */ --card-pad-y: 20px; --card-pad-x: 22px; --stack-gap: 14px; --grid-gap: 16px; --gap-block: 26px; /* space between sections (add box / filters / list) */ --gap-item: 12px; /* space between rows/tasks */ } /* accessibility toggles set data-* on */ html[data-large-text="on"] { font-size: 18.5px; } html[data-contrast="on"] { --mist: #5b616c; --graphite: #24272e; --line: #cfc9ba; } html[data-reduce-motion="on"] * { animation-duration: .001ms !important; transition-duration: .001ms !important; } /* density: structural air stays generous, inter-item gap tightens */ html[data-density="cosy"] { --card-pad-y: 15px; --card-pad-x: 18px; --stack-gap: 11px; --grid-gap: 13px; --gap-block: 20px; --gap-item: 8px; } html[data-density="compact"] { --card-pad-y: 11px; --card-pad-x: 14px; --stack-gap: 8px; --grid-gap: 11px; --gap-block: 16px; --gap-item: 5px; --fs-body: 0.86rem; --radius: 9px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--paper); color: var(--ink); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; min-height: 100vh; } h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.2px; } p { margin: 0 0 .8em; } a { color: var(--accent-ink); } .muted { color: var(--mist); } .small { font-size: var(--fs-cap); } .center { text-align: center; } .hidden { display: none !important; } /* ---------- app shell ---------- */ .app { display: grid; grid-template-columns: var(--nav-w) 1fr; min-height: 100vh; } .nav { background: var(--card); border-right: 1px solid var(--line); padding: 22px 16px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 20px; } .brand .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1rem; position: relative; } .brand .mark::after { content:""; position:absolute; left:6px; bottom:6px; width:8px; height:8px; border-radius:50%; background:var(--accent); } .brand .name { font-weight: 700; font-size: 1.15rem; letter-spacing: -.5px; } .brand .name .dot { color: var(--accent); } .nav-group-label { font-size: .62rem; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mist); padding: 14px 10px 6px; } .nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius-sm); color: var(--graphite); text-decoration: none; font-weight: 500; font-size: .86rem; cursor: pointer; border: 1px solid transparent; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; } .nav-item:hover { background: var(--line-soft); color: var(--ink); } .nav-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; } .nav-item .ico { width: 18px; height: 18px; flex: none; opacity: .9; } .nav-item.active .ico { opacity: 1; } .nav-spacer { flex: 1; } .nav-foot { font-size: var(--fs-cap); color: var(--mist); padding: 12px 10px 4px; border-top: 1px solid var(--line); } /* ---------- main ---------- */ .main { min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; border-bottom: 1px solid var(--line); background: rgba(244,241,234,.85); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20; } .topbar .greeting { font-size: var(--fs-cap); color: var(--mist); } .topbar .page-title { font-size: 1.15rem; font-weight: 600; letter-spacing: -.3px; } .topbar-actions { display: flex; gap: 10px; align-items: center; } .view { padding: 28px 32px 80px; max-width: var(--maxw); } .view.wide { max-width: 100%; } .view-head { margin-bottom: 22px; } .view-head h1 { font-size: var(--fs-h1); } .view-head .sub { color: var(--mist); margin-top: 4px; max-width: 62ch; } /* nav toggle: mobile = drawer, desktop = collapse sidebar */ .hamburger { display: inline-grid; } .mobile-only { display: none; } @media (min-width: 901px) { .app.nav-collapsed { grid-template-columns: 1fr; } .app.nav-collapsed .nav { display: none; } } /* ---------- cards ---------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .card.pad { padding: var(--card-pad-y) var(--card-pad-x); } .grid { display: grid; gap: var(--grid-gap); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .stack { display: flex; flex-direction: column; gap: var(--stack-gap); } .row { display: flex; gap: 10px; align-items: center; } .row.wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .section-title { font-size: var(--fs-cap); font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; } /* ---------- buttons ---------- */ .btn { font-family: inherit; font-size: .84rem; font-weight: 600; border-radius: var(--radius-sm); padding: 9px 16px; border: 1px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; line-height: 1.2; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-ink); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #000; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { background: var(--line-soft); } .btn-soft { background: var(--accent-soft); color: var(--accent-ink); } .btn-soft:hover { background: #d6e8e1; } .btn-danger { background: var(--danger-soft); color: var(--danger); } .btn-sm { padding: 6px 11px; font-size: .76rem; border-radius: 7px; } .btn-lg { padding: 12px 22px; font-size: .95rem; } .btn-icon { padding: 8px; border-radius: 8px; } .btn .ico { width: 16px; height: 16px; } .btn:disabled { opacity: .5; cursor: not-allowed; } /* ---------- inputs ---------- */ input[type="text"], input[type="number"], input[type="date"], input[type="time"], textarea, select { font-family: inherit; font-size: .88rem; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; width: 100%; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { resize: vertical; min-height: 90px; line-height: 1.55; } label.field { display: block; } label.field > span { display: block; font-size: var(--fs-cap); font-weight: 600; color: var(--graphite); margin-bottom: 6px; letter-spacing: .2px; } .input-inline { display: flex; gap: 8px; align-items: center; } /* ---------- pills / tags ---------- */ .pill { font-size: var(--fs-cap); font-weight: 600; letter-spacing: .3px; padding: 4px 11px; border-radius: 999px; background: var(--line-soft); color: var(--graphite); display: inline-flex; align-items: center; gap: 6px; } .pill.accent { background: var(--accent-soft); color: var(--accent-ink); } .pill.flag { background: var(--flag-soft); color: var(--flag); } .pill.win { background: var(--win-soft); color: #8a6a15; } .pill .dotc { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .chip { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 500; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; background: var(--card); color: var(--graphite); transition: all var(--dur) var(--ease); } .chip svg { width: 15px; height: 15px; flex: none; } .chip:hover { border-color: var(--accent-mid); } .chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); } /* ---------- KPI / stat ---------- */ .kpi { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; background: var(--card); } .kpi .v { font-size: 1.9rem; font-weight: 700; letter-spacing: -1px; line-height: 1; } .kpi .l { font-size: var(--fs-cap); color: var(--mist); margin-top: 8px; text-transform: uppercase; letter-spacing: 1px; } .kpi .d { font-size: var(--fs-cap); font-weight: 600; color: var(--accent); margin-top: 6px; } /* ---------- callout ---------- */ .callout { display: flex; gap: 13px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; background: var(--card); } .callout .k { font-weight: 600; color: var(--accent-ink); } .callout.warn { border-left-color: var(--flag); } .callout.warn .k { color: var(--flag); } /* ---------- task list ---------- */ .task { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: 12px 14px; transition: box-shadow var(--dur) var(--ease); } .task:hover { box-shadow: var(--shadow-sm); } .task.done { opacity: .55; } .task.done .task-title { text-decoration: line-through; } .task-head { display: flex; align-items: flex-start; gap: 11px; } .task-title { font-weight: 500; flex: 1; } .task-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; } .checkbox { width: 20px; height: 20px; border: 2px solid var(--line); border-radius: 6px; flex: none; cursor: pointer; display: grid; place-items: center; transition: all var(--dur) var(--ease); background: var(--card); margin-top: 1px; } .checkbox:hover { border-color: var(--accent-mid); } .checkbox.checked { background: var(--accent); border-color: var(--accent); } .checkbox.checked::after { content: ""; width: 6px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-1px); } .steps { margin-top: 12px; padding-left: 31px; display: flex; flex-direction: column; gap: 7px; } .step { display: flex; align-items: center; gap: 9px; font-size: .84rem; } .step .checkbox { width: 16px; height: 16px; } .step.done span { text-decoration: line-through; color: var(--mist); } .step .mins { font-size: var(--fs-cap); color: var(--mist); margin-left: auto; white-space: nowrap; } /* compact task detail (description + dates) */ .task-detail { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .task-detail .field > span { margin-bottom: 3px; font-size: .66rem; letter-spacing: .3px; } .task-detail .td-desc { flex: 1 1 240px; } .task-detail .td-desc textarea { min-height: 66px; padding: 8px 10px; line-height: 1.4; } .task-detail .td-dates { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; } .task-detail .td-date { display: flex; align-items: center; gap: 9px; } .task-detail .td-date > span { margin-bottom: 0; width: 30px; text-align: right; } /* native calendar date input — compact, sits inline next to its label */ .task-detail .td-date .dp-input { width: auto; padding: 7px 9px; } /* inline-editable step text */ .step-text { flex: 1; min-width: 0; font-family: inherit; font-size: .84rem; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; } .step-text:focus { outline: none; background: var(--card); border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-soft); } .step.done .step-text { text-decoration: line-through; color: var(--mist); } /* inline-editable task title (shown when a task is expanded) */ .task-title-input { width: 100%; font-family: inherit; font-size: var(--fs-body); font-weight: 500; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 5px 7px; } .task-title-input:focus { outline: none; background: var(--card); border-color: var(--accent-mid); box-shadow: 0 0 0 3px var(--accent-soft); } .task.done .task-title-input { text-decoration: line-through; color: var(--mist); } /* pill icons: keep small + consistent everywhere */ .pill svg { width: 12px; height: 12px; flex: none; } /* priority shows as a left stripe so it never changes row height */ .task.priority { border-left: 3px solid var(--flag); } /* front-of-row priority + quick-win toggles */ .task-front { display: flex; align-items: center; gap: 2px; flex: none; } .front-toggle { position: relative; } .icon-toggle { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--mist); display: grid; place-items: center; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .icon-toggle:hover { background: var(--line-soft); color: var(--graphite); } .icon-toggle svg { width: 16px; height: 16px; } .icon-toggle.on.flag { color: var(--flag); } .icon-toggle.on.win { color: var(--win); } /* first-run coachmark */ .coachmark { position: absolute; top: calc(100% + 9px); left: -4px; z-index: 40; width: 220px; background: var(--ink); color: #fff; border-radius: 10px; padding: 13px 14px 12px; box-shadow: var(--shadow); animation: pop .18s var(--ease); } .coachmark::before { content: ""; position: absolute; top: -5px; left: 16px; width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; } .coachmark h5 { font-size: .82rem; margin: 0 0 4px; font-weight: 600; } .coachmark p { font-size: .76rem; color: #cfd3da; line-height: 1.45; margin: 0 0 9px; } .coachmark .cm-x { position: absolute; top: 7px; right: 8px; cursor: pointer; color: rgba(255,255,255,.55); display: inline-flex; } .coachmark .cm-x:hover { color: #fff; } .coachmark .cm-x svg { width: 14px; height: 14px; } .coachmark .btn { padding: 5px 13px; } /* ---------- drag-to-reorder ---------- */ .drag-grip { cursor: grab; color: var(--mist); display: inline-flex; flex: none; padding: 1px; touch-action: none; } .drag-grip:hover { color: var(--graphite); } .drag-grip:active { cursor: grabbing; } .drag-grip svg { width: 16px; height: 16px; } /* Dump All meta rail (right end of a task row) */ .task-rail { display: flex; align-items: center; gap: 8px; flex: none; margin-left: 6px; } .task-rail .icon-toggle { width: 28px; height: 28px; } .rail-date { font-size: .72rem; font-weight: 600; color: var(--graphite); background: var(--line-soft); border-radius: 999px; padding: 3px 9px; cursor: pointer; white-space: nowrap; } .rail-date:hover { background: var(--flag-soft); color: var(--flag); } .rail-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: transparent; cursor: pointer; padding: 0; flex: none; } .rail-dot:hover { border-color: var(--flag); } .rail-dot.on { background: var(--flag); border-color: var(--flag); } .task.sortable .order-num { width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; flex: none; } .task.dragging { opacity: .5; box-shadow: var(--shadow); } .anchor-item { cursor: default; } .anchor-item .drag-grip { color: rgba(255,255,255,.32); cursor: grab; display: inline-flex; flex: none; } .anchor-item .drag-grip:active { cursor: grabbing; } .anchor-item.dragging { opacity: .45; } /* ---------- diary grid ---------- */ .diary-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); } .diary { display: grid; grid-template-columns: 64px repeat(7, minmax(96px, 1fr)); min-width: 760px; user-select: none; } .diary .dh { position: sticky; top: 0; z-index: 5; background: var(--card); border-bottom: 1px solid var(--line); } .diary .col-head { padding: 10px 6px; text-align: center; font-weight: 600; font-size: .8rem; border-left: 1px solid var(--line); } .diary .col-head .dow { display: block; } .diary .col-head .dnum { display: block; font-size: var(--fs-cap); color: var(--mist); font-weight: 500; margin-top: 2px; } .diary .col-head.today { background: var(--accent-soft); } .diary .col-head.today .dow { color: var(--accent-ink); font-weight: 700; } .diary .col-head.today .dnum { color: var(--accent-ink); font-weight: 600; } .diary .col-head .today-tag { display: inline-block; margin-top: 4px; font-size: .54rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 7px; } .diary .corner { border-bottom: 1px solid var(--line); } .diary .time-label { font-size: .64rem; color: var(--mist); text-align: right; padding: 0 6px; height: 26px; line-height: 26px; border-top: 1px solid var(--line-soft); } .diary .slot { height: 26px; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line); cursor: pointer; position: relative; font-size: .62rem; overflow: hidden; transition: background .1s; } .diary .slot.hour { border-top: 1px solid var(--line); } .diary .slot:hover { outline: 2px solid var(--accent-mid); outline-offset: -2px; z-index: 2; } .diary .slot .slot-label { position: absolute; left: 3px; right: 3px; top: 1px; color: #fff; font-weight: 600; font-size: .6rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .diary .slot.filled { color: #fff; } .diary .slot.cont .slot-label { display: none; } .diary .slot.override-cancel { opacity: .35; background-image: repeating-linear-gradient(45deg, transparent, transparent 4px, rgba(0,0,0,.18) 4px, rgba(0,0,0,.18) 6px); } .palette { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .pal-chip { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .76rem; font-weight: 600; min-width: 116px; padding: 7px 12px; border-radius: 999px; cursor: pointer; border: 2px solid transparent; color: #fff; } .pal-chip svg { width: 14px; height: 14px; flex: none; } .pal-chip.selected { box-shadow: 0 0 0 3px rgba(21,23,28,.15); outline: 2px solid var(--ink); outline-offset: 1px; } .pal-chip.erase { background: var(--card); color: var(--graphite); border-color: var(--line); } /* ---------- visual anchor board ---------- */ .anchor-board { background: #1c1f26; color: #fff; border-radius: var(--radius-lg); padding: 34px 38px; box-shadow: var(--shadow); background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.05) 1px, transparent 0); background-size: 22px 22px; } .anchor-board .board-kicker { font-size: var(--fs-cap); letter-spacing: 2px; text-transform: uppercase; color: var(--accent-mid); margin-bottom: 6px; } .anchor-board .board-date { font-size: 1.1rem; font-weight: 600; margin-bottom: 22px; color: #cfd3da; } .anchor-item { display: flex; align-items: center; gap: 16px; padding: 16px 4px; border-top: 1px dashed rgba(255,255,255,.14); font-size: 1.5rem; font-weight: 600; letter-spacing: -.3px; cursor: pointer; } .anchor-item:first-of-type { border-top: 0; } .anchor-item.done { color: #6a6f7a; text-decoration: line-through; } .anchor-item .abox { width: 26px; height: 26px; border: 2px solid rgba(255,255,255,.4); border-radius: 7px; flex: none; display: grid; place-items: center; } .anchor-item.done .abox { background: var(--accent-mid); border-color: var(--accent-mid); } .anchor-empty { color: #8a8f99; font-size: 1.1rem; padding: 20px 0; } /* ---------- stepper (onboarding / override) ---------- */ .stepper { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; } .stepper .st { flex: 1; min-width: 120px; height: 5px; border-radius: 3px; background: var(--line); } .stepper .st.on { background: var(--accent); } .stepper .st.done { background: var(--accent-mid); } .wizard-card { max-width: 680px; margin: 0 auto; } .stage-badge { font-size: var(--fs-cap); font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); } .stage-time { font-size: var(--fs-cap); color: var(--mist); } /* override step display */ .override-stage { text-align: center; padding: 12px 0; } .override-stage .num { width: 54px; height: 54px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 1.4rem; display: grid; place-items: center; margin: 0 auto 16px; } .override-stage h2 { font-size: 1.4rem; margin-bottom: 10px; } .override-stage .say { font-size: 1.25rem; font-weight: 600; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius); padding: 16px 20px; margin: 16px auto; max-width: 460px; } /* ---------- timer ---------- */ .timer-face { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -1px; font-size: 3rem; line-height: 1; } .timer-ring { display: grid; place-items: center; } .progress-bar { height: 8px; border-radius: 5px; background: var(--line); overflow: hidden; } .progress-bar > i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); } /* ---------- modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(21,23,28,.42); display: grid; place-items: center; z-index: 100; padding: 20px; animation: fade .16s var(--ease); } .modal { background: var(--card); border-radius: var(--radius-lg); box-shadow: var(--shadow); width: 100%; max-width: 540px; max-height: 90vh; overflow: auto; animation: pop .18s var(--ease); } .modal.lg { max-width: 760px; } .modal-head { padding: 20px 24px 0; display: flex; justify-content: space-between; align-items: start; } .modal-head h2 { font-size: var(--fs-h2); } .modal-body { padding: 16px 24px; } .modal-foot { padding: 14px 24px 22px; display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } @keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } /* ---------- toast ---------- */ .toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; } .toast { background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px; font-size: .82rem; font-weight: 500; box-shadow: var(--shadow); animation: pop .18s var(--ease); display: flex; align-items: center; gap: 9px; } .toast .ico { width: 15px; height: 15px; } /* ---------- empty state ---------- */ .empty { text-align: center; padding: 46px 20px; color: var(--mist); } .empty .ico { width: 40px; height: 40px; margin: 0 auto 14px; opacity: .5; } .empty h3 { color: var(--graphite); font-weight: 600; margin-bottom: 6px; } /* ---------- misc ---------- */ .divider { height: 1px; background: var(--line); margin: 18px 0; } .badge-count { background: var(--accent); color: #fff; font-size: .62rem; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-left: auto; } .fab { position: fixed; right: 26px; bottom: 26px; z-index: 40; width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: #fff; border: none; cursor: pointer; box-shadow: var(--shadow); display: grid; place-items: center; } .fab .ico { width: 24px; height: 24px; } kbd { font-family: inherit; font-size: .7rem; background: var(--line-soft); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } /* ---------- onboarding full-screen ---------- */ .app.onboarding-mode { grid-template-columns: 1fr; } .onboard { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; background: radial-gradient(1200px 500px at 100% -10%, var(--accent-soft), transparent), var(--paper); } .onboard-card { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 34px 36px; } .onboard-card .obrand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; } .onboard-card .obrand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); position: relative; } .onboard-card .obrand .mark::after { content:""; position:absolute; left:7px; bottom:7px; width:9px; height:9px; border-radius:50%; background:var(--accent); } .onboard-card .obrand b { font-size: 1.2rem; letter-spacing: -.4px; } .onboard-card h1 { font-size: 1.5rem; margin-bottom: 10px; letter-spacing: -.5px; } .onboard-card .obody { color: var(--graphite); margin-bottom: 22px; } .medium-opt { display: flex; gap: 13px; align-items: flex-start; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; cursor: pointer; margin-bottom: 10px; transition: all var(--dur) var(--ease); } .medium-opt:hover { border-color: var(--accent-mid); } .medium-opt.sel { border-color: var(--accent); background: var(--accent-soft); } .medium-opt .mo-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; margin-top: 2px; display: grid; place-items: center; } .medium-opt.sel .mo-radio { border-color: var(--accent); } .medium-opt.sel .mo-radio::after { content:""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .medium-opt .mo-t b { display: block; } .medium-opt .mo-t span { font-size: var(--fs-cap); color: var(--mist); } .onboard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; } /* ---------- responsive ---------- */ @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .nav { position: fixed; left: 0; top: 0; z-index: 60; width: 260px; transform: translateX(-100%); transition: transform var(--dur) var(--ease); } .nav.open { transform: none; box-shadow: var(--shadow); } .hamburger { display: inline-grid; } .mobile-only { display: inline-flex; } .nav-scrim { position: fixed; inset: 0; background: rgba(21,23,28,.35); z-index: 55; } .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .view, .topbar { padding-left: 18px; padding-right: 18px; } } @media (max-width: 560px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .anchor-item { font-size: 1.2rem; } .anchor-board { padding: 22px 20px; } }