/* ============================================================ KitaBina Design System — shared tokens + core components Source of truth: kitabina-design-system.html (the bible). Adopt this in site/admin/member/book by -ing it, then reuse the classes below. App skin = default (cool); add class "skin-warm" on for the marketing storefront. ============================================================ */ :root{ /* brand (teal primary #0e8c84, mint #35c0a3 accent) */ --brand-900:#0a5d57; --brand-800:#0a6b65; --brand-700:#0e8c84; --brand-600:#13a394; --brand-500:#22b89c; --brand-400:#35c0a3; --btn-teal:#0c7d76; /* darker than brand-700 so solid buttons with white text clear WCAG AA 4.5:1 (this is 4.9:1). brand-700 stays for fills/accents. */ --brand-300:#7fdbc4; --brand-200:#a9e6d6; --brand-100:#d7f0ea; --brand-50:#e9f6f2; --wood-700:#8a5a2e; --wood-500:#b9824f; --wood-200:#e8d3ba; --wood-100:#f1e2cf; --wood-50:#f7efe3; --yellow:#f7d65a; --yellow-bg:#fdf3cf; --yellow-ink:#8a6a06; /* neutrals — app skin (cool) */ --bg:#f4f6f7; --surface:#ffffff; --surface-2:#f8fafa; --border:#e6eae9; --border-strong:#d6dcda; --ink:#1b2426; --text:#2c3338; --muted:#6b7572; --faint:#9aa6a2; --on-brand:#fff; /* marketing skin (warm) */ --warm-bg:#f4efe7; --warm-surface:#fffdf9; --warm-border:#e3dcd0; --warm-ink:#1c1a17; /* semantic */ --success:#2f8f5b; --success-bg:#e4f2e9; --warning:#9a6a00; --warning-bg:#fdf0d8; --danger:#c0392b; --danger-bg:#f7dcd7; --info:#1a4a9a; --info-bg:#e0eeff; --purple:#5c3d9e; --purple-bg:#ede8f5; --neutral:#6b6459; --neutral-bg:#f0ede7; /* data-viz */ --viz-1:#0e8c84; --viz-2:#35c0a3; --viz-3:#0a5d57; --viz-4:#a9e6d6; --viz-5:#b9824f; --viz-accent:#f7d65a; --viz-track:#eef2f0; /* type — big titles = Plus Jakarta (TeamHub-style), body = Inter, data = mono */ --disp:"Plus Jakarta Sans","Space Grotesk",system-ui,-apple-system,sans-serif; --body:"Inter",system-ui,"Helvetica Neue",Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* radius */ --r-xs:6px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-2xl:18px; --r-pill:999px; /* spacing (4px base) */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; /* elevation */ --e1:0 1px 2px rgba(20,28,26,.05); --e2:0 1px 3px rgba(20,28,26,.07),0 1px 2px rgba(20,28,26,.05); --e3:0 4px 14px rgba(20,28,26,.09); --e4:0 14px 38px rgba(20,28,26,.16); /* drop-shadow twin of --e3, for cut-out art where box-shadow would trace the box */ --e3-drop:drop-shadow(0 8px 16px rgba(20,28,26,.14)); /* motion — snappy S-curve by default */ --t-snap:150ms; --t-fast:120ms; --t:180ms; --t-slow:280ms; --ease:cubic-bezier(.2,.6,.2,1); --ease-snap:cubic-bezier(.65,0,.35,1); --ease-flow:cubic-bezier(.65,0,.35,1); } /* warm skin retired 2026-07-01: unified COLD skin sitewide. .skin-warm is now a no-op. */ .skin-warm{} /* base */ *{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--disp);color:var(--ink);margin:0;line-height:1.15;font-weight:700;letter-spacing:-.01em} a{color:var(--brand-700);text-decoration:none!important} code,kbd{font-family:var(--mono);font-size:.86em} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* buttons */ /* 44px, not 40: these are the conversion CTAs and 40 fails the touch minimum. Also matches .inp/.select-btn so a button next to a field lines up. */ .btn{font:inherit;font-size:13.5px;font-weight:600;height:44px;padding:0 18px;border-radius:var(--r-md);border:1.5px solid transparent;background:var(--surface);color:var(--text);display:inline-flex;align-items:center;gap:7px;cursor:pointer;transition:filter var(--t-fast),background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast)} .btn:active{transform:scale(.97)} /* Keyboard focus, site-wide: a solid dark-teal ring that clears WCAG 2.4.7 / 1.4.11 (3:1) on any background. Only shows for keyboard users (:focus-visible), never on mouse click. */ .btn:focus-visible,a:focus-visible,summary:focus-visible,[role="menuitem"]:focus-visible,[tabindex="0"]:focus-visible{outline:2.5px solid var(--brand-800);outline-offset:2px} .btn.primary{background:var(--btn-teal);color:#fff!important;border-color:var(--btn-teal)} .btn.primary:hover{background:var(--brand-800);box-shadow:var(--e2);transform:translateY(-1px)} .btn.secondary{border-color:var(--border-strong)} .btn.secondary:hover{border-color:var(--brand-400);color:var(--brand-800)} .btn.danger{border-color:#eecfca;color:var(--danger,#c0392b)} .btn.danger:hover{background:var(--danger,#c0392b);color:#fff!important;border-color:var(--danger,#c0392b)} .btn.danger-solid{background:var(--danger,#c0392b);color:#fff!important;border-color:var(--danger,#c0392b)} .btn.danger-solid:hover{filter:brightness(.92)} .btn.ghost{background:transparent;color:var(--muted)} .btn.ghost:hover{background:var(--surface-2);color:var(--text)} .btn.wood{background:var(--wood-500);color:#fff!important;border-color:var(--wood-500)} .btn.wood:hover{background:var(--wood-700)} .btn.sm{height:40px;padding:0 12px;font-size:12.5px;border-radius:var(--r-sm)} /* 32 was unhittable on a phone; 40 is the floor for a secondary control */ .btn.lg{height:48px;padding:0 26px;font-size:15px;border-radius:var(--r-lg)} .btn[disabled],.btn.dis{opacity:.45;cursor:not-allowed;pointer-events:none} /* pills */ .pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.2px;padding:3px 9px;border-radius:var(--r-pill);line-height:1.4} .pill.success{background:var(--success-bg);color:var(--success)} .pill.warn{background:var(--warning-bg);color:var(--warning)} .pill.danger{background:var(--danger-bg);color:var(--danger)} .pill.info{background:var(--info-bg);color:var(--info)} .pill.purple{background:var(--purple-bg);color:var(--purple)} .pill.neutral{background:var(--neutral-bg);color:var(--neutral)} .pill.brand{background:var(--brand-50);color:var(--brand-800)} .pill.wood{background:var(--wood-50);color:var(--wood-700)} /* card */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--e1)} /* inputs */ .inp{font:inherit;font-size:16px;height:44px;padding:0 13px;border:1.5px solid var(--border);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)} .inp::placeholder{color:var(--faint)} .inp:focus{outline:none;border-color:var(--brand-700);box-shadow:0 0 0 3px var(--brand-100)} /* empty state Illustration + heading + one line + at most one action. Art lives in /assets/empty/*.webp (transparent stickers, 512px square). Sizes: .sm inline inside a section · default inside a card · .lg a whole page. Copy rules: heading <= 5 words, body <= 14, never a dead end without a way out. Customer pages build it with kbEmpty() in nav.js; admin with emptyState(). */ /* grid-column so it centres across a results grid instead of sitting in cell one */ .kbe{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 24px;grid-column:1/-1} .kbe-art{width:152px;height:152px;margin-bottom:14px;filter:var(--e3-drop)} .kbe-art img{width:100%;height:100%;object-fit:contain;display:block} .kbe h3{font-family:var(--disp);font-size:16px;font-weight:700;color:var(--ink);margin:0} .kbe p{font-size:14px;color:var(--muted);max-width:38ch;margin:4px 0 0} .kbe .kbe-act{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center} .kbe.sm{padding:26px 18px} .kbe.sm .kbe-art{width:92px;height:92px;margin-bottom:10px} .kbe.sm h3{font-size:15px} .kbe.sm p{font-size:12.5px} /* the action is the only way out of an empty screen, so it keeps a full 44px tap target even at .sm, where .btn.sm would otherwise drop it to 40px. */ .kbe .kbe-act .btn{min-height:44px} .kbe.lg{padding:64px 24px} .kbe.lg .kbe-art{width:200px;height:200px;margin-bottom:20px} .kbe.lg h3{font-size:20px} .kbe.lg p{font-size:15px} @media(max-width:520px){ .kbe{padding:34px 18px} .kbe-art{width:124px;height:124px} .kbe.lg{padding:48px 20px} .kbe.lg .kbe-art{width:156px;height:156px} } /* motion golden rule: nothing appears out of nowhere */ @keyframes kbeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .kbe{animation:kbeIn var(--t-slow) var(--ease) both} .kbe .kbe-art{animation:kbeIn var(--t-slow) var(--ease) both;animation-delay:60ms} @media(prefers-reduced-motion:reduce){.kbe,.kbe .kbe-art{animation:none}} /* NOTE: full component set (dropdown, modal blur-in, toast, tabs, tables, KPI, wizard, calendar, charts, uploader, PIN) lives in the bible — lift each into components.css as you migrate a surface. */