/* ============================================================ FIREPLACE MART OPS — design system v7 "Brand edition" Matches the storefront (Shopify theme): Google Sans + Stack Sans Notch, paper #FAFAFA / ink #0C0C0C, Burnt Ember #E8590C splashes, minimal chrome. Three themes on : light — white, black type, hairlines (default) dark — monochrome black, white type glass — frosted translucent panels over a colour wash Customer-facing previews opt into .island-light (always a solid white storefront, whatever the app theme). ============================================================ */ /* brand fonts, inlined (an @import here forced a serial render-blocking fetch before first paint). Same pair as the storefront theme: Google Sans = body/UI text; Stack Sans Notch = --display, used on titles (h1-h4), b/strong, highlight numbers + progress UI. */ @font-face{ font-family:'Google Sans'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/google-sans-400-normal.woff2') format('woff2'); } @font-face{ font-family:'Google Sans'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/google-sans-500-normal.woff2') format('woff2'); } @font-face{ font-family:'Google Sans'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/google-sans-600-normal.woff2') format('woff2'); } @font-face{ font-family:'Google Sans'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/google-sans-700-normal.woff2') format('woff2'); } @font-face{ font-family:'Stack Sans Notch'; font-style:normal; font-weight:400; font-display:swap; src:url('../assets/fonts/stack-sans-notch-400-normal.woff2') format('woff2'); } @font-face{ font-family:'Stack Sans Notch'; font-style:normal; font-weight:500; font-display:swap; src:url('../assets/fonts/stack-sans-notch-500-normal.woff2') format('woff2'); } @font-face{ font-family:'Stack Sans Notch'; font-style:normal; font-weight:600; font-display:swap; src:url('../assets/fonts/stack-sans-notch-600-normal.woff2') format('woff2'); } @font-face{ font-family:'Stack Sans Notch'; font-style:normal; font-weight:700; font-display:swap; src:url('../assets/fonts/stack-sans-notch-700-normal.woff2') format('woff2'); } :root{ /* light — brand paper (Figma #FAFAFA / #0C0C0C) */ --bg: #FAFAFA; --paper: #FFFFFF; /* cards */ --paper-2: #F6F6F6; /* wells, inputs */ --paper-3: #EDEDED; /* raised / hover */ --ink: #0C0C0C; --ink-2: #3D3D3D; --mut: #6E6E6E; --mut-2: #8A8A8A; --line: rgba(12,12,12,.08); --line-2: rgba(12,12,12,.16); --solid: #0C0C0C; /* primary button / active pill */ --solid-fg: #FFFFFF; --coal: #0C0C0C; /* storefront black, theme-independent */ /* splashes — Burnt Ember, same as storefront */ --ember: #E8590C; --ember-2: #C94A08; --ember-bg: #FCEEE4; --ember-bg2:#F9DEC9; --blue: #E8590C; /* accent → brand orange, as on the storefront */ --ok: #34845C; --ok-deep: #276B4A; /* status hues (soft bg / deep text) */ --s-gray-bg:#F1F1F4; --s-gray:#6E6E73; --s-blue-bg:#EAF2FF; --s-blue:#0B63C4; --s-ind-bg: #EEEDFD; --s-ind: #4F46B8; --s-amber-bg:#FEF3DC; --s-amber:#9A6A15; --s-teal-bg:#E4F6F2; --s-teal:#0E7463; --s-green-bg:#E7F6EC; --s-green:#248A3D; --s-red-bg: #FDECEC; --s-red: #D70015; --s-pur-bg: #F5ECFC; --s-pur: #7D3AB8; --side-bg: rgba(250,250,250,.85); --top-bg: rgba(250,250,250,.78); --menu: #FFFFFF; /* dropdown/popover surfaces stay fully opaque */ --sans: 'Google Sans', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif; --display: 'Stack Sans Notch', 'Google Sans', -apple-system, sans-serif; --mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, monospace; --r: 14px; --r-sm: 10px; --r-pill: 980px; --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.05); --shadow-pop: 0 24px 70px -16px rgba(0,0,0,.25); --ease: cubic-bezier(.28,.11,.32,1); --sidebar-w: 250px; --panel-blur: none; } /* ---- dark: monochrome black & white ---- */ html[data-theme="dark"]{ --bg: #0C0C0C; /* brand coal */ --paper: #1A1A1A; /* brand coal-2 */ --paper-2: #111111; --paper-3: #262626; --ink: #FAFAFA; /* brand cream */ --ink-2: #D6D6D6; --mut: #A3A3A3; --mut-2: #7E7E7E; --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16); --solid: #FAFAFA; --solid-fg: #0C0C0C; --ember-bg: #2E160B; --ember-bg2:#452009; --blue: #F06A1E; /* ember, lifted for dark contrast */ --s-gray-bg:#26262A; --s-gray:#A8A8AF; --s-blue-bg:#16233F; --s-blue:#7FA8F0; --s-ind-bg: #1E1C3A; --s-ind: #A29BF0; --s-amber-bg:#2E2410; --s-amber:#E0B554; --s-teal-bg:#0E2622; --s-teal:#5AC8B0; --s-green-bg:#12291B; --s-green:#6FCF97; --s-red-bg: #331214; --s-red: #F08080; --s-pur-bg: #271534; --s-pur: #C79BF0; --side-bg: rgba(10,10,10,.85); --top-bg: rgba(12,12,12,.72); --menu: #1A1A1A; --shadow-card: 0 2px 12px rgba(0,0,0,.3); --shadow-pop: 0 24px 60px -18px rgba(0,0,0,.6); } /* ---- glass: frosted panels over a colour wash ---- */ html[data-theme="glass"]{ --bg: #F4F1EE; --paper: rgba(255,255,255,.62); --paper-2: rgba(255,255,255,.42); --paper-3: rgba(255,255,255,.72); --line: rgba(255,255,255,.55); --line-2: rgba(29,29,31,.14); --side-bg: rgba(255,255,255,.44); --top-bg: rgba(255,255,255,.38); --shadow-card: 0 1px 2px rgba(30,40,80,.05), 0 16px 44px rgba(30,40,80,.10); --panel-blur: blur(26px) saturate(1.7); } html[data-theme="glass"]::before{ content:''; position:fixed; inset:-22%; z-index:-1; pointer-events:none; background: radial-gradient(42% 52% at 14% 18%, rgba(232,89,12,.28), transparent 70%), radial-gradient(46% 56% at 86% 12%, rgba(255,178,120,.42), transparent 70%), radial-gradient(52% 62% at 78% 88%, rgba(232,89,12,.34), transparent 70%), radial-gradient(42% 52% at 22% 92%, rgba(201,74,8,.26), transparent 70%); filter:blur(44px); } html[data-theme="glass"] .card, html[data-theme="glass"] .modal, html[data-theme="glass"] .belldrop, html[data-theme="glass"] .searchdrop, html[data-theme="glass"] .ws-menu, html[data-theme="noir"] .card, html[data-theme="noir"] .modal, html[data-theme="noir"] .belldrop, html[data-theme="noir"] .searchdrop, html[data-theme="noir"] .ws-menu{ backdrop-filter:var(--panel-blur); -webkit-backdrop-filter:var(--panel-blur); } /* ---- noir: dark glass — smoked panels over embers in the dark ---- */ html[data-theme="noir"]{ --bg: #080807; --paper: rgba(24,22,20,.55); --paper-2: rgba(255,255,255,.05); --paper-3: rgba(255,255,255,.11); --ink: #FAFAFA; --ink-2: #D6D6D6; --mut: #A6A6A6; --mut-2: #838383; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.17); --solid: #FAFAFA; --solid-fg: #0C0C0C; --ember-bg: rgba(232,89,12,.16); --ember-bg2:rgba(232,89,12,.28); --blue: #F06A1E; --s-gray-bg:rgba(255,255,255,.08); --s-gray:#A8A8AF; --s-blue-bg:rgba(64,120,240,.18); --s-blue:#8FB4F5; --s-ind-bg: rgba(115,105,240,.18); --s-ind: #ADA6F2; --s-amber-bg:rgba(224,181,84,.15); --s-amber:#E6BE60; --s-teal-bg: rgba(90,200,176,.14); --s-teal:#66D3BA; --s-green-bg:rgba(111,207,151,.14); --s-green:#7DD6A1; --s-red-bg: rgba(240,128,128,.14); --s-red: #F09090; --s-pur-bg: rgba(199,155,240,.15); --s-pur: #CFA8F2; --side-bg: rgba(12,11,10,.55); --top-bg: rgba(10,9,8,.45); --menu: #1A1918; --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 18px 50px rgba(0,0,0,.45); --shadow-pop: 0 24px 70px -14px rgba(0,0,0,.8); --panel-blur: blur(28px) saturate(1.65); } html[data-theme="noir"]::before{ content:''; position:fixed; inset:-24%; z-index:-1; pointer-events:none; background: radial-gradient(48% 58% at 84% 92%, rgba(232,89,12,.55), transparent 72%), radial-gradient(46% 56% at 8% 10%, rgba(60,102,220,.48), transparent 72%), radial-gradient(42% 52% at 92% 6%, rgba(152,88,234,.36), transparent 72%), radial-gradient(40% 50% at 16% 90%, rgba(232,89,12,.30), transparent 72%), radial-gradient(30% 40% at 55% 60%, rgba(34,160,168,.18), transparent 75%), radial-gradient(34% 44% at 46% 26%, rgba(255,170,110,.08), transparent 74%); filter:blur(56px); } html[data-theme="dark"] .seg .seg-thumb, html[data-theme="noir"] .seg .seg-thumb{ background:#3A3A3F; } html[data-theme="noir"] .tbl th{ background:transparent; } html[data-theme="noir"] .kcol{ background:rgba(255,255,255,.04); } html[data-theme="noir"] .tb-search input:focus{ background:rgba(22,22,28,.85); } /* ---------------- base ---------------- */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ul,ol{ list-style:none; } ::selection{ background:var(--ink); color:var(--bg); } svg{ display:block; } h1,h2,h3,h4{ font-family:var(--display); font-weight:600; letter-spacing:-.022em; } b,strong{ font-family:var(--display); } /* ---------------- motion: page flips + load-in ---------------- Cross-page: the theme + ambient wash paint on from the very first frame (pages stamp data-theme in ), Chromium's paint holding keeps the old page up until then, and the gated fades in — so navigations fade through the themed backdrop, never black. (No @view-transition: its plus-lighter crossfade caused a visible brightness pulse over the dark washes.) In-page: content fades up as it renders, staggered; bars grow in; KPI numbers count up (app.js). */ @keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } } @keyframes growbar{ from{ width:0; } } @keyframes pageIn{ from{ opacity:0; } } /* auth gate: hide ONLY the data region. The shell (sidebar/topbar) and the themed wash paint on the first frame, so the browser releases the old page immediately instead of freezing on it while auth resolves. The reveal is an animation, not a transition — it always plays, even when a cached load removes the gate within the first frame. */ html.fm-gate .content{ opacity:0; } html:not(.fm-gate) .content{ animation:pageIn .28s var(--ease) both; } .content > *{ animation:fadeUp .5s var(--ease) backwards; } .content > *:nth-child(1){ animation-delay:.02s; } .content > *:nth-child(2){ animation-delay:.06s; } .content > *:nth-child(3){ animation-delay:.10s; } .content > *:nth-child(4){ animation-delay:.14s; } .content > *:nth-child(5){ animation-delay:.18s; } .content > *:nth-child(n+6){ animation-delay:.22s; } .grid > .card{ animation:fadeUp .55s var(--ease) backwards; } .grid > .card:nth-child(2){ animation-delay:.05s; } .grid > .card:nth-child(3){ animation-delay:.10s; } .grid > .card:nth-child(4){ animation-delay:.15s; } .grid > .card:nth-child(n+5){ animation-delay:.20s; } .tbl tbody tr{ animation:fadeUp .4s var(--ease) backwards; } .tbl tbody tr:nth-child(1){ animation-delay:.03s; } .tbl tbody tr:nth-child(2){ animation-delay:.06s; } .tbl tbody tr:nth-child(3){ animation-delay:.09s; } .tbl tbody tr:nth-child(4){ animation-delay:.12s; } .tbl tbody tr:nth-child(5){ animation-delay:.15s; } .tbl tbody tr:nth-child(6){ animation-delay:.18s; } .tbl tbody tr:nth-child(7){ animation-delay:.21s; } .tbl tbody tr:nth-child(8){ animation-delay:.24s; } .hbar .hb-fill, .funnel .f-bar{ animation:growbar .8s var(--ease) both .15s; } .timeline .tl-item{ animation:fadeUp .45s var(--ease) backwards; } .timeline .tl-item:nth-child(2){ animation-delay:.05s; } .timeline .tl-item:nth-child(3){ animation-delay:.10s; } .timeline .tl-item:nth-child(4){ animation-delay:.15s; } .timeline .tl-item:nth-child(n+5){ animation-delay:.20s; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none!important; transition:none!important; } } .eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mut); } /* light island: the customer-facing storefront previews stay solid white */ .island-light{ --paper: #FFFFFF; --paper-2: #FAFAFA; --paper-3: #EDEDED; --ink: #0C0C0C; --ink-2: #3D3D3D; --mut: #6E6E6E; --mut-2: #8A8A8A; --line: rgba(12,12,12,.08); --line-2: rgba(12,12,12,.16); --solid: #0C0C0C; --solid-fg: #FFFFFF; --ember-bg: #FCEEE4; --ember-bg2:#F9DEC9; --blue: #E8590C; --s-gray-bg:#F1F1F4; --s-gray:#6E6E73; --s-blue-bg:#EAF2FF; --s-blue:#0B63C4; --s-green-bg:#E7F6EC; --s-green:#248A3D; --s-amber-bg:#FEF3DC; --s-amber:#9A6A15; --s-red-bg: #FDECEC; --s-red: #D70015; --shadow-card: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06); background:#FFFFFF; color:var(--ink); backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* ---------------- app frame ---------------- */ .app{ display:flex; min-height:100vh; } .sidebar{ width:var(--sidebar-w); flex:0 0 var(--sidebar-w); background:var(--side-bg); border-right:1px solid var(--line-2); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5); position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; padding:20px 14px 16px; scrollbar-width:thin; scrollbar-color:var(--line-2) transparent; } .side-top{ display:flex; align-items:center; justify-content:space-between; padding:2px 8px 14px; } .side-wordmark{ font-family:var(--display); font-size:1.18rem; font-weight:700; letter-spacing:-.03em; color:var(--ink); line-height:1; } .side-collapse{ color:var(--mut-2); display:flex; } .side-collapse svg{ width:15px; height:15px; } /* workspace dropdown pill */ .side-ws{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--paper); border:1px solid var(--line-2); border-radius:14px; padding:8px 12px 8px 8px; margin-bottom:10px; position:relative; transition:border-color .15s; } .side-ws:hover{ border-color:var(--mut-2); } .side-ws .ws-avatar{ width:26px; height:26px; border-radius:8px; flex:0 0 26px; background:var(--solid); color:var(--solid-fg); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.72rem; font-weight:600; } .side-ws .ws-name{ font-family:var(--display); font-size:.82rem; color:var(--ink); letter-spacing:.02em; } .side-ws > svg{ width:14px; height:14px; flex:0 0 14px; margin-left:auto; color:var(--mut-2); transition:transform .18s var(--ease); } .side-ws.open > svg{ transform:rotate(180deg); } .ws-wrap{ position:relative; } .ws-menu{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:120; background:var(--menu); border:1px solid var(--line-2); border-radius:14px; box-shadow:var(--shadow-pop); padding:5px; display:none; } .ws-menu.open{ display:block; } .ws-menu button{ display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; text-align:left; font-family:var(--display); padding:8px 10px; border-radius:10px; font-size:.8rem; font-weight:500; } .ws-menu button:hover{ background:var(--paper-2); } .ws-menu button .wm-dot{ width:7px; height:7px; border-radius:50%; background:var(--line-2); flex:0 0 7px; } .ws-menu button.on .wm-dot{ background:var(--ok); } .ws-menu button .wm-soon{ margin-left:auto; font-size:.66rem; color:var(--mut-2); } /* nav */ .nav-group{ margin-top:4px; } .nav-group > label{ display:block; padding:16px 14px 7px; font-size:.62rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--mut-2); } .nav-item{ display:flex; align-items:center; gap:13px; padding:9px 13px; border-radius:12px; color:var(--mut); font-size:.9rem; font-weight:500; line-height:1.2; margin-bottom:3px; position:relative; transition:background .15s var(--ease), color .15s var(--ease); } .nav-item svg{ width:18px; height:18px; flex:0 0 18px; opacity:.85; } .nav-item:hover{ background:var(--paper-3); color:var(--ink); } .nav-item.active{ background:var(--solid); color:var(--solid-fg); font-weight:600; } .nav-item.active svg{ opacity:1; color:var(--solid-fg); } /* footer: theme slider, sign out, legal */ .side-foot{ margin-top:auto; padding:16px 0 0; } .side-foot .nav-item{ margin-bottom:2px; } .side-legal{ padding:10px 14px 2px; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; color:var(--mut-2); } /* sliding segmented control (the fun slider) */ .seg{ position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; background:var(--paper-2); border:1px solid var(--line); border-radius:99px; padding:3px; user-select:none; } .seg .seg-thumb{ position:absolute; top:3px; bottom:3px; left:3px; width:calc((100% - 6px) / var(--seg-n, 3)); background:var(--paper); border-radius:99px; box-shadow:0 1px 5px rgba(0,0,0,.15); transition:transform .22s var(--ease); pointer-events:none; } .seg button{ position:relative; z-index:1; padding:6px 2px; border-radius:99px; font-size:.72rem; font-weight:600; color:var(--mut); text-align:center; transition:color .18s; } .seg button.on{ color:var(--ink); } .theme-seg{ margin:0 2px 12px; } /* ---------------- main / topbar ---------------- */ .main{ flex:1; min-width:0; display:flex; flex-direction:column; } .topbar{ position:sticky; top:0; z-index:60; display:flex; align-items:center; gap:14px; background:var(--top-bg); backdrop-filter:blur(20px) saturate(1.6); -webkit-backdrop-filter:blur(20px) saturate(1.6); border-bottom:1px solid var(--line); padding:0 28px; height:56px; } .tb-crumb{ font-size:.9rem; display:flex; align-items:center; gap:8px; white-space:nowrap; } .tb-crumb span{ display:none; } .tb-crumb b{ color:var(--ink); font-weight:600; } .tb-search{ position:relative; margin-left:auto; width:min(400px, 34vw); } .tb-search input{ width:100%; height:36px; border:0; border-radius:99px; background:var(--paper-2); padding:0 14px 0 36px; font:inherit; font-size:.86rem; color:var(--ink); outline:none; transition:background .15s, box-shadow .15s; } .tb-search input::placeholder{ color:var(--mut-2); } .tb-search input:focus{ background:var(--paper); box-shadow:0 0 0 1.5px var(--line-2), var(--shadow-card); } .tb-search > svg{ position:absolute; left:12px; top:10px; width:16px; height:16px; color:var(--mut-2); pointer-events:none; } .searchdrop{ position:absolute; top:44px; left:0; right:0; background:var(--menu); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-pop); max-height:400px; overflow:auto; display:none; z-index:80; } .searchdrop.open{ display:block; } .searchdrop .sd-group{ padding:10px 14px 3px; font-size:.64rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--mut-2); } .searchdrop a{ display:flex; align-items:center; gap:10px; padding:9px 14px; font-size:.86rem; } .searchdrop a:hover{ background:var(--paper-2); } .searchdrop a b{ font-weight:600; } .searchdrop a span{ color:var(--mut); font-size:.78rem; margin-left:auto; white-space:nowrap; } .searchdrop .sd-empty{ padding:15px; font-size:.86rem; color:var(--mut); } .tb-btn{ position:relative; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--ink-2); transition:background .15s; } .tb-btn:hover{ background:var(--paper-3); } .tb-btn svg{ width:18px; height:18px; } .tb-btn .dot{ position:absolute; top:6px; right:6px; width:8px; height:8px; background:var(--ember); border-radius:50%; border:2px solid var(--bg); } .belldrop{ position:absolute; top:46px; right:0; width:380px; background:var(--menu); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-pop); display:none; z-index:80; overflow:hidden; } .belldrop.open{ display:block; } .belldrop header{ padding:13px 17px; border-bottom:1px solid var(--line); font-size:.88rem; font-weight:600; display:flex; justify-content:space-between; align-items:center; } .belldrop header button{ font-size:.76rem; color:var(--blue); font-weight:600; } .belldrop ul{ max-height:360px; overflow:auto; } .belldrop li{ display:flex; gap:10px; padding:12px 17px; border-bottom:1px solid var(--line); font-size:.84rem; } .belldrop li:last-child{ border-bottom:0; } .belldrop li .b-ico{ width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:var(--ember-bg); display:flex; align-items:center; justify-content:center; } .belldrop li .b-ico svg{ width:15px; height:15px; color:var(--ember); } .belldrop li b{ font-weight:600; } .belldrop li p{ color:var(--mut); font-size:.78rem; line-height:1.45; } .belldrop li time{ color:var(--mut-2); font-size:.7rem; white-space:nowrap; } .content{ padding:28px; max-width:1580px; width:100%; margin:0 auto; } /* ---------------- page head ---------------- */ .page-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; flex-wrap:wrap; } .page-head .ph-text{ min-width:0; } .page-head h1{ font-size:1.8rem; line-height:1.1; letter-spacing:-.03em; } .page-head .ph-sub{ color:var(--mut); font-size:.95rem; margin-top:4px; } .page-head .ph-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .explain-btn{ width:27px; height:27px; border-radius:50%; border:1.5px solid var(--line-2); color:var(--mut); font-size:.78rem; font-weight:600; flex:0 0 27px; margin-top:8px; transition:all .15s; } .explain-btn:hover{ background:var(--solid); color:var(--solid-fg); border-color:var(--solid); } .explain{ display:none; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:17px 20px; margin:-8px 0 22px; font-size:.88rem; color:var(--ink-2); box-shadow:var(--shadow-card); } .explain.open{ display:block; } .explain b{ font-weight:600; color:var(--ink); } .explain ul{ margin-top:9px; display:grid; gap:5px; } .explain ul li{ padding-left:18px; position:relative; } .explain ul li::before{ content:''; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--ember); } /* ---------------- buttons ---------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; background:var(--solid); color:var(--solid-fg); border-radius:var(--r-pill); padding:10px 18px; font-size:.86rem; font-weight:500; line-height:1; transition:opacity .15s, transform .1s; white-space:nowrap; } .btn:hover{ opacity:.85; } .btn:active{ transform:scale(.97); } .btn svg{ width:16px; height:16px; } .btn.ember{ background:var(--ember); color:#fff; } .btn.ember:hover{ opacity:1; background:var(--ember-2); } .btn.ghost{ background:transparent; color:var(--ink); } .btn.ghost:hover{ opacity:1; background:var(--paper-3); } .btn.sm{ padding:8px 14px; font-size:.8rem; } .btn.xs{ padding:6px 11px; font-size:.74rem; } .btn[disabled]{ opacity:.4; pointer-events:none; } /* ---------------- cards & grids ---------------- */ .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-card); } .card > .card-head{ padding:17px 20px 0; display:flex; align-items:center; gap:11px; flex-wrap:wrap; } .card > .card-head h3{ font-size:1rem; } .card > .card-head .ch-sub{ font-size:.86rem; color:var(--mut); width:100%; margin-top:2px; } .card > .card-head .ch-act{ margin-left:auto; display:flex; gap:8px; align-items:center; } .card > .card-body{ padding:16px 20px 20px; } .card > .card-body.flush{ padding:0; } .grid{ display:grid; gap:16px; } .g2{ grid-template-columns:repeat(2, minmax(0,1fr)); } .g3{ grid-template-columns:repeat(3, minmax(0,1fr)); } .g4{ grid-template-columns:repeat(4, minmax(0,1fr)); } .g23{ grid-template-columns:minmax(0,2fr) minmax(0,1fr); } .g32{ grid-template-columns:minmax(0,1fr) minmax(0,2fr); } .span2{ grid-column:span 2; } /* ---------------- KPI cards ---------------- */ .kpi{ padding:18px 20px; position:relative; overflow:hidden; } .kpi .k-label{ font-size:.83rem; font-weight:500; color:var(--mut); display:flex; align-items:center; gap:6px; } .kpi .k-label svg{ width:15px; height:15px; } .kpi .k-num{ font-family:var(--display); font-size:2.05rem; font-weight:600; letter-spacing:.01em; line-height:1.08; margin-top:7px; font-variant-numeric:tabular-nums; } .kpi .k-num small{ font-size:1.05rem; color:var(--mut); font-weight:500; } .kpi .k-delta{ font-size:.84rem; margin-top:5px; font-weight:500; color:var(--mut); } .kpi .k-delta.up{ color:var(--s-green); } .kpi .k-delta.down{ color:var(--s-red); } .kpi .k-spark{ position:absolute; right:16px; bottom:16px; opacity:.9; } /* accent KPI box — the one splash on the dashboard */ .card.kpi.ember{ background:var(--ember); border-color:var(--ember); } .card.kpi.ember .k-label{ color:rgba(255,255,255,.85); } .card.kpi.ember .k-num{ color:#fff; } .card.kpi.ember .k-delta{ color:rgba(255,255,255,.8); } /* ---------------- pills & badges ---------------- */ .pill{ display:inline-flex; align-items:center; gap:5px; font-size:.73rem; font-weight:600; line-height:1; padding:5px 10px; border-radius:99px; white-space:nowrap; } .pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; } .pill.bare::before{ display:none; } .pill.gray{ background:var(--s-gray-bg); color:var(--s-gray); } .pill.blue{ background:var(--s-blue-bg); color:var(--s-blue); } .pill.ind{ background:var(--s-ind-bg); color:var(--s-ind); } .pill.amber{ background:var(--s-amber-bg); color:var(--s-amber); } .pill.teal{ background:var(--s-teal-bg); color:var(--s-teal); } .pill.green{ background:var(--s-green-bg); color:var(--s-green); } .pill.red{ background:var(--s-red-bg); color:var(--s-red); } .pill.pur{ background:var(--s-pur-bg); color:var(--s-pur); } .pill.emberp{ background:var(--ember-bg); color:var(--ember-2); } .aging{ display:inline-block; width:8px; height:8px; border-radius:50%; flex:0 0 8px; } .aging.ok{ background:var(--line-2); } .aging.warn{ background:#E8A33D; } .aging.late{ background:var(--s-red); } .tag{ display:inline-flex; align-items:center; font-size:.71rem; font-weight:600; color:var(--mut); background:var(--paper-2); border:1px solid var(--line); padding:3px 10px; border-radius:99px; } /* ---------------- filter chips ---------------- */ .chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .chip{ font-size:.8rem; font-weight:500; color:var(--ink-2); border:0; border-radius:99px; padding:8px 15px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line-2); transition:all .15s; white-space:nowrap; } .chip:hover{ box-shadow:inset 0 0 0 1.5px var(--mut-2); color:var(--ink); } .chip.on{ background:var(--solid); color:var(--solid-fg); box-shadow:none; font-weight:600; } .chip .n{ opacity:.6; margin-left:4px; font-size:.72rem; } /* ---------------- tables ---------------- */ .tblwrap{ overflow-x:auto; border-radius:var(--r); } .tbl{ width:100%; border-collapse:collapse; font-size:.86rem; } .tbl th{ text-align:left; font-size:.68rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--mut-2); padding:12px 14px; border-bottom:1px solid var(--line-2); white-space:nowrap; background:var(--paper); position:sticky; top:0; } .tbl td{ padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:middle; } .tbl tbody tr{ transition:background .12s; } .tbl tbody tr:hover{ background:var(--paper-2); } .tbl tbody tr.rowlink{ cursor:pointer; } .tbl tbody tr:last-child td{ border-bottom:0; } .tbl .t-main{ font-weight:600; color:var(--ink); } .tbl .t-sub{ font-size:.8rem; color:var(--mut); display:block; margin-top:1px; } .tbl .t-num{ font-variant-numeric:tabular-nums; font-weight:500; } .tbl .t-right{ text-align:right; } .tbl .t-thumb{ width:42px; height:42px; border-radius:10px; object-fit:contain; background:#fff; border:1px solid var(--line); padding:2px; } .tbl-empty{ padding:44px; text-align:center; color:var(--mut); font-size:.9rem; } /* ---------------- stepper (order lifecycle) ---------------- */ .stepper{ display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:7px 0 3px; } .step{ flex:1; min-width:90px; position:relative; text-align:center; } .step::before{ content:''; position:absolute; top:12px; left:calc(-50% + 13px); right:calc(50% + 13px); height:2px; background:var(--line-2); border-radius:2px; } .step:first-child::before{ display:none; } .step.done::before{ background:var(--ink); } .step .s-dot{ width:24px; height:24px; border-radius:50%; margin:0 auto; border:2.5px solid var(--line-2); background:var(--paper); position:relative; z-index:1; display:flex; align-items:center; justify-content:center; } .step .s-dot svg{ width:12px; height:12px; color:var(--solid-fg); display:none; } .step.done .s-dot{ background:var(--ink); border-color:var(--ink); } .step.done .s-dot svg{ display:block; color:var(--bg); } .step.now .s-dot{ border-color:var(--ember); } .step.now .s-dot::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--ember); } .step label{ display:block; font-family:var(--display); font-size:.7rem; font-weight:600; color:var(--mut-2); margin-top:7px; line-height:1.3; } .step.done label, .step.now label{ color:var(--ink); } .step .s-date{ display:block; font-size:.64rem; color:var(--mut-2); font-weight:400; } /* ---------------- timeline ---------------- */ .timeline{ position:relative; padding-left:25px; display:grid; gap:16px; } .timeline::before{ content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line); border-radius:2px; } .tl-item{ position:relative; } .tl-item::before{ content:''; position:absolute; left:-25px; top:4px; width:13px; height:13px; border-radius:50%; background:var(--paper); border:3px solid var(--line-2); } .tl-item.hot::before{ border-color:var(--ember); } .tl-item.auto::before{ border-color:var(--s-blue); } .tl-item b{ font-size:.88rem; font-weight:600; display:block; } .tl-item p{ font-size:.85rem; color:var(--mut); margin-top:1px; } .tl-item time{ font-size:.73rem; color:var(--mut-2); } .tl-item .tl-tag{ font-size:.64rem; font-weight:600; color:var(--s-blue); background:var(--s-blue-bg); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:1px; } /* ---------------- kanban ---------------- */ .kanban{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(252px, 1fr); gap:13px; overflow-x:auto; padding-bottom:9px; align-items:start; } .kcol{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); min-height:210px; } .kcol.dragover{ border-color:var(--ember); background:var(--ember-bg); } .kcol-head{ padding:13px 15px 9px; display:flex; align-items:center; gap:8px; } .kcol-head b{ font-size:.82rem; font-weight:600; } .kcol-head .n{ font-size:.7rem; font-weight:600; color:var(--mut); background:var(--paper); border:1px solid var(--line); border-radius:99px; padding:1px 8px; } .kcol-body{ padding:4px 9px 11px; display:grid; gap:9px; } .kcard{ background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:12px 13px; cursor:grab; box-shadow:var(--shadow-card); transition:box-shadow .15s, transform .15s, border-color .15s; } .kcard:hover{ box-shadow:var(--shadow-pop); } .kcard.dragging{ opacity:.45; cursor:grabbing; border-color:var(--ember); } .kcard b{ font-size:.86rem; font-weight:600; display:block; line-height:1.3; } .kcard .k-sub{ font-size:.8rem; color:var(--mut); margin-top:2px; display:block; } .kcard .k-foot{ display:flex; align-items:center; gap:6px; margin-top:10px; flex-wrap:wrap; } .kcard .k-foot .sp{ margin-left:auto; } .kcard .k-due{ font-size:.7rem; color:var(--mut); font-weight:500; display:inline-flex; align-items:center; gap:4px; } .kcard .k-due svg{ width:12px; height:12px; } .kcard .k-due.late{ color:var(--s-red); } .kcard .k-price{ font-size:.78rem; font-weight:600; font-variant-numeric:tabular-nums; } .kcard .tag{ background:var(--paper-2); border-color:var(--line); } /* ---------------- calendar ---------------- */ .cal-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; } .cal-head h2{ font-size:1.05rem; min-width:150px; } .cal-nav{ display:flex; gap:4px; } .cal-nav button{ width:31px; height:31px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--paper-2); } .cal-nav button:hover{ background:var(--paper-3); } .cal-nav button svg{ width:14px; height:14px; } .cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); border-radius:0 0 var(--r) var(--r); overflow:hidden; } .cal-dow{ background:var(--paper-2); font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); padding:9px 11px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .cal-day{ background:var(--paper); min-height:112px; padding:7px 7px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.76rem; position:relative; } .cal-day .d-num{ font-size:.76rem; font-weight:600; color:var(--mut); display:inline-flex; width:23px; height:23px; align-items:center; justify-content:center; border-radius:50%; } .cal-day.today .d-num{ background:var(--ember); color:#fff; } .cal-day.dim{ background:var(--paper-2); } .cal-day.dim .d-num{ color:var(--mut-2); } .cal-ev{ display:block; margin-top:3px; padding:3px 7px; border-radius:6px; font-size:.7rem; font-weight:600; line-height:1.35; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cal-ev.install{ background:var(--s-teal-bg); color:var(--s-teal); } .cal-ev.survey{ background:var(--s-pur-bg); color:var(--s-pur); } .cal-ev.service{ background:var(--s-amber-bg); color:var(--s-amber); } .cal-ev.delivery{ background:var(--s-blue-bg); color:var(--s-blue); } .cal-ev.other{ background:var(--s-gray-bg); color:var(--s-gray); } /* ---------------- modal & drawer ---------------- */ .overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:200; display:none; align-items:flex-start; justify-content:center; padding:6vh 20px 20px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .overlay.open{ display:flex; } .modal{ background:var(--paper); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-pop); width:min(660px, 100%); max-height:86vh; overflow:auto; animation:pop .22s var(--ease); } @keyframes pop{ from{ transform:translateY(14px); opacity:0; } to{ transform:none; opacity:1; } } .modal-head{ padding:20px 24px 0; display:flex; align-items:flex-start; gap:12px; } .modal-head h3{ font-size:1.1rem; line-height:1.3; } .modal-head p{ font-size:.84rem; color:var(--mut); margin-top:3px; } .modal-head .x{ margin-left:auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--mut); flex:0 0 30px; background:var(--paper-2); } .modal-head .x:hover{ background:var(--paper-3); color:var(--ink); } .modal-head .x svg{ width:14px; height:14px; } .modal-body{ padding:16px 24px 24px; } .modal-foot{ padding:0 24px 22px; display:flex; gap:8px; justify-content:flex-end; } /* email preview inside modals */ .mailprev{ border:1px solid var(--line); border-radius:14px; overflow:hidden; font-size:.85rem; } .mailprev .mp-meta{ background:var(--paper-2); padding:13px 16px; display:grid; gap:3px; border-bottom:1px solid var(--line); } .mailprev .mp-meta div{ display:flex; gap:8px; } .mailprev .mp-meta label{ width:62px; flex:0 0 62px; color:var(--mut); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; padding-top:2px; } .mailprev .mp-meta span{ color:var(--ink-2); } .mailprev .mp-body{ padding:16px; white-space:pre-line; line-height:1.6; color:var(--ink-2); } .mailprev .mp-body b{ color:var(--ink); } /* ---------------- forms ---------------- */ .field{ display:grid; gap:5px; margin-bottom:13px; } .field label{ font-size:.78rem; font-weight:600; color:var(--ink-2); } .field input, .field select, .field textarea{ border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--paper); padding:10px 12px; font:inherit; font-size:.88rem; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s; } .field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 3px var(--line); } .field textarea{ min-height:84px; resize:vertical; } select.mini{ border:1px solid var(--line-2); border-radius:10px; background:var(--paper); padding:6px 9px; font:inherit; font-size:.79rem; color:var(--ink); outline:none; } select.mini:focus{ border-color:var(--ink); } /* iOS toggle */ .toggle{ position:relative; width:44px; height:26px; flex:0 0 44px; cursor:pointer; } .toggle input{ position:absolute; opacity:0; inset:0; cursor:pointer; } .toggle .tr{ position:absolute; inset:0; background:var(--paper-3); border-radius:99px; transition:background .18s; box-shadow:inset 0 0 0 1px var(--line); } .toggle .tr::after{ content:''; position:absolute; top:2px; left:2px; width:22px; height:22px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:transform .18s var(--ease); } .toggle input:checked + .tr{ background:var(--ok); box-shadow:none; } .toggle input:checked + .tr::after{ transform:translateX(18px); } /* ---------------- docs, notes, chat ---------------- */ .docrow{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); } .docrow:last-child{ border-bottom:0; } .docrow .d-ico{ width:35px; height:35px; flex:0 0 35px; border-radius:11px; background:var(--ember-bg); display:flex; align-items:center; justify-content:center; } .docrow .d-ico svg{ width:17px; height:17px; color:var(--ember); } .docrow b{ font-size:.85rem; font-weight:600; display:block; line-height:1.3; } .docrow span{ font-size:.78rem; color:var(--mut); } .docrow .d-act{ margin-left:auto; display:flex; gap:6px; } .note{ background:var(--s-amber-bg); border-radius:12px; padding:12px 15px; font-size:.84rem; margin-bottom:10px; } .note b{ font-size:.73rem; display:block; color:var(--s-amber); margin-bottom:2px; } .note time{ font-size:.68rem; color:var(--mut-2); display:block; margin-top:4px; } .chat{ display:grid; gap:10px; } .msg{ max-width:82%; } .msg .m-bub{ border-radius:16px; padding:10px 14px; font-size:.86rem; line-height:1.5; } .msg.in{ justify-self:start; } .msg.in .m-bub{ background:var(--paper-2); border-bottom-left-radius:5px; } .msg.out{ justify-self:end; text-align:right; } .msg.out .m-bub{ background:var(--blue); color:#fff; border-bottom-right-radius:5px; text-align:left; } .msg .m-meta{ font-size:.68rem; color:var(--mut-2); margin-top:3px; padding:0 4px; } .msg.sys{ justify-self:center; max-width:100%; } .msg.sys .m-bub{ background:transparent; border:0; color:var(--mut-2); font-size:.72rem; padding:2px; } /* ---------------- portal (customer tracker) ---------------- */ .ptrack{ position:relative; display:flex; justify-content:space-between; margin:28px 0 7px; } .ptrack::before{ content:''; position:absolute; top:15px; left:25px; right:25px; height:4px; background:var(--paper-3); border-radius:4px; } .ptrack .p-fill{ position:absolute; top:15px; left:25px; height:4px; background:var(--ok-deep); border-radius:4px; transition:width .4s var(--ease); } .pstep{ position:relative; z-index:1; text-align:center; width:80px; } .pstep .p-dot{ width:33px; height:33px; border-radius:50%; background:var(--paper); border:3px solid var(--paper-3); margin:0 auto; display:flex; align-items:center; justify-content:center; } .pstep .p-dot svg{ width:15px; height:15px; color:#fff; display:none; } .pstep.done .p-dot{ background:var(--ok-deep); border-color:var(--ok-deep); } .pstep.done .p-dot svg{ display:block; } .pstep.now .p-dot{ border-color:var(--ok-deep); } .pstep.now .p-dot::after{ content:''; width:13px; height:13px; border-radius:50%; background:var(--ok-deep); } .pstep label{ font-family:var(--display); font-size:.74rem; font-weight:600; display:block; margin-top:8px; color:var(--mut); line-height:1.3; } .pstep.done label, .pstep.now label{ color:var(--ink); } /* ---------------- charts ---------------- */ .chartbox{ width:100%; overflow:hidden; } .chartbox svg{ width:100%; height:auto; } .legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:11px; } .legend span{ font-size:.75rem; color:var(--mut); display:inline-flex; align-items:center; gap:6px; font-weight:500; } .legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; } .hbar{ display:grid; gap:10px; } .hbar .hb-row{ display:grid; grid-template-columns:140px 1fr 68px; align-items:center; gap:11px; font-size:.82rem; } .hbar .hb-row label{ color:var(--ink-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hbar .hb-track{ height:11px; background:var(--paper-3); border-radius:99px; overflow:hidden; } .hbar .hb-fill{ height:100%; border-radius:99px; background:var(--ink); } .hbar .hb-val{ text-align:right; font-family:var(--display); font-weight:600; font-variant-numeric:tabular-nums; font-size:.8rem; } .funnel{ display:grid; gap:6px; } .funnel .f-row{ display:flex; align-items:center; gap:12px; } .funnel .f-bar{ height:36px; border-radius:10px; background:var(--solid); color:var(--solid-fg); display:flex; align-items:center; padding:0 13px; font-family:var(--display); font-size:.79rem; font-weight:600; min-width:115px; white-space:nowrap; } .funnel .f-meta{ font-size:.79rem; color:var(--mut); white-space:nowrap; } /* ---------------- misc ---------------- */ .row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .stack{ display:grid; gap:16px; } .muted{ color:var(--mut); } .small{ font-size:.84rem; } .tiny{ font-size:.78rem; } .num{ font-variant-numeric:tabular-nums; } .right{ margin-left:auto; } .mt0{ margin-top:0!important; } .mt8{ margin-top:8px; } .mt12{ margin-top:12px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; } .mb8{ margin-bottom:8px; } .mb12{ margin-bottom:12px; } .mb16{ margin-bottom:16px; } .mb24{ margin-bottom:24px; } .hr{ border:0; border-top:1px solid var(--line); margin:16px 0; } .kv{ display:grid; gap:10px; font-size:.86rem; } .kv div{ display:flex; gap:12px; justify-content:space-between; align-items:baseline; } .kv label{ color:var(--mut); font-size:.84rem; flex:0 0 auto; } .kv b{ font-weight:600; text-align:right; } .kv a b{ color:var(--blue); } .pthumb{ width:54px; height:54px; border-radius:12px; object-fit:contain; background:#fff; border:1px solid var(--line); padding:3px; flex:0 0 54px; } .avatar{ width:31px; height:31px; border-radius:50%; flex:0 0 31px; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:600; color:#fff; background:#8E8E93; } .avatar.sm{ width:25px; height:25px; flex-basis:25px; font-size:.62rem; } .avatar.a2{ background:#5856D6; } .avatar.a3{ background:#00A28A; } .avatar.a4{ background:#C7811B; } .avatar.a5{ background:#D04437; } .empty{ text-align:center; padding:44px 20px; color:var(--mut); font-size:.9rem; } .empty svg{ width:30px; height:30px; margin:0 auto 10px; color:var(--line-2); } .demo-flag{ display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600; color:var(--mut); white-space:nowrap; } .demo-flag::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--ember); } .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(85px); background:var(--solid); color:var(--solid-fg); font-size:.86rem; font-weight:500; padding:12px 22px; border-radius:99px; box-shadow:var(--shadow-pop); z-index:400; transition:transform .25s var(--ease); pointer-events:none; display:flex; align-items:center; gap:8px; max-width:min(540px, 90vw); } .toast.show{ transform:translateX(-50%) translateY(0); } .toast svg{ width:14px; height:14px; color:var(--ember); flex:0 0 14px; } /* guide page prose */ .prose{ max-width:840px; font-size:.92rem; color:var(--ink-2); } .prose h2{ font-size:1.25rem; margin:34px 0 11px; color:var(--ink); } .prose h3{ font-size:1rem; margin:22px 0 8px; color:var(--ink); } .prose p{ margin-bottom:12px; } .prose ul{ margin:0 0 12px; display:grid; gap:6px; } .prose ul li{ padding-left:20px; position:relative; } .prose ul li::before{ content:''; position:absolute; left:4px; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--ember); } .prose b{ color:var(--ink); } .prose .callout{ background:var(--ember-bg); border-radius:12px; padding:15px 17px; margin:16px 0; font-size:.88rem; } /* ---------------- responsive ---------------- */ @media (max-width: 1180px){ .g4{ grid-template-columns:repeat(2, minmax(0,1fr)); } .g23, .g32{ grid-template-columns:1fr; } } @media (max-width: 900px){ .sidebar{ position:fixed; z-index:300; left:0; transform:translateX(-100%); transition:transform .25s var(--ease); box-shadow:var(--shadow-pop); } .sidebar.open{ transform:none; } .side-veil{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:290; display:none; } .side-veil.open{ display:block; } .tb-menu{ display:flex!important; } .content{ padding:18px 14px; } .g2, .g3{ grid-template-columns:1fr; } .tb-search{ width:min(300px, 42vw); } .page-head h1{ font-size:1.45rem; } } .tb-menu{ display:none; }