/* ════════════════════════════════════════════════════════════════════ Webcoda Proposals — UNIFIED design system Consolidates the v1 warm/cool token split into one warm-neutral set. Coral = signature + CLIENT CTAs · Blue = ADMIN CTAs/links (per DS rule) ════════════════════════════════════════════════════════════════════ */ :root{ /* Brand */ --coral:#FF5E54; --coral-deep:#E63E33; --coral-soft:#FFEDEB; --teal:#2A3E43; --teal-soft:#3A565D; --teal-900:#1F2E32; --blue:#2A62D3; --blue-deep:#1F4FB0; --blue-soft:#EAF0FC; /* Ink */ --ink:#1C2A2E; /* headings (warm teal-ink) */ --ink-body:#2C3538; /* body text */ --muted:#6B7177; /* secondary text */ --faint:#969A9A; /* tertiary / meta */ /* Surfaces — single warm-neutral ramp */ --paper:#FAF9F5; /* app canvas */ --surface:#FFFFFF; /* cards */ --sunken:#F2F1EA; /* table headers, inset, alt rows */ --line:#E7E4DB; /* hairline borders */ --line-strong:#D6D3C8; /* stronger dividers / input rest */ /* Status */ --good:#2F7D54; --good-soft:#E7F3EC; --bad:#C8302E; --bad-soft:#FBEAE9; --warn:#A6680A; --warn-soft:#FAF0DA; --info:#1F5BC4; --info-soft:#EAF0FC; /* Radius */ --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:999px; /* Elevation (used sparingly — sticky/elevated only) */ --shadow-sm:0 1px 2px rgba(20,28,30,.05); --shadow:0 8px 28px rgba(20,28,30,.10); --shadow-pop:0 14px 40px rgba(20,28,30,.16); --font-display:"Poppins","Helvetica Neue",Arial,sans-serif; --font-body:"Open Sans","Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; --ease:cubic-bezier(.2,0,0,1); /* v2 layout system (REDESIGN-SPEC §1) */ --side-w:236px; /* sidebar, was 248 */ --side-w-mini:64px; /* icon rail */ --page-max:1600px; /* content cap on ultrawide */ --rail-w:332px; /* detail-page right rail */ --form-max:880px; /* settings/forms reading cap */ --gutter:clamp(20px, 2.6vw, 44px); color-scheme: light; } /* ── Dark theme — overrides the surface/ink/line ramp; brand teal/coral stay. Applied via [data-theme="dark"] on (set before paint in _Layout). ── */ [data-theme="dark"]{ color-scheme: dark; --ink:#EEF1F2; --ink-body:#D5DBDD; --muted:#9BA3A8; --faint:#7C858A; --paper:#13181A; --surface:#1B2225; --sunken:#232B2E; --line:#2E3739; --line-strong:#3D474A; /* Brand: keep coral; lift blue for contrast on dark surfaces. */ --blue:#5B8DEF; --blue-deep:#7AA3F2; --blue-soft:#1B2A47; --coral-soft:#3A211E; /* Status: lift text hues, darken soft backgrounds. */ --good:#56B888; --good-soft:#15301F; --bad:#F0736E; --bad-soft:#3A1D1C; --warn:#D7A23F; --warn-soft:#33290F; --info:#5B8DEF; --info-soft:#1B2A47; --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow:0 10px 30px rgba(0,0,0,.55); --shadow-pop:0 16px 44px rgba(0,0,0,.65); } /* Theme switch (3-way segmented control in the teal sidebar foot). */ .theme-seg{display:flex;gap:2px;background:rgba(255,255,255,.08);border-radius:var(--r-pill);padding:3px;margin-bottom:10px;} .theme-seg button{flex:1;display:grid;place-items:center;background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;border-radius:var(--r-pill);padding:6px 0;font:inherit;} .theme-seg button svg{width:15px;height:15px;} .theme-seg button:hover{color:#fff;} .theme-seg button[aria-pressed="true"]{background:rgba(255,255,255,.16);color:#fff;} .side-mini .theme-seg{display:none;} /* Straggler: the wizard brief card uses a hardcoded white gradient — give it a dark variant. */ [data-theme="dark"] .wz-brief-card{background:linear-gradient(180deg,var(--surface) 0%,var(--sunken) 100%);} /* Dark contrast fixes (the base colours below are brand teal, which stays dark in both themes — fine on light surfaces, illegible on dark ones). */ [data-theme="dark"] code, [data-theme="dark"] .mono{color:var(--ink-body);} [data-theme="dark"] .signin-brand span{color:var(--ink);} [data-theme="dark"] .note{color:var(--ink-body);border-color:var(--line-strong);} /* Auth backdrop ends in a hardcoded cream stop — swap for a dark surface in dark mode. */ [data-theme="dark"] .auth-bg-admin{background:radial-gradient(900px 460px at 22% 0%,rgba(255,94,84,.10),transparent 60%),linear-gradient(135deg,var(--paper),var(--sunken));} *{box-sizing:border-box;} .wc{ font-family:var(--font-body); color:var(--ink-body); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:14px; line-height:1.5; } .wc h1,.wc h2,.wc h3,.wc h4{font-family:var(--font-display);font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em;} /* ── Admin shell ───────────────────────────────────────────────── */ .shell{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh;background:var(--paper);transition:grid-template-columns .22s var(--ease);} .side{ background:var(--teal);color:#fff;display:flex;flex-direction:column; padding:18px 12px;gap:4px;position:relative; } .side::after{content:"";position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(0,0,0,.18);} .side-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 20px;overflow:hidden;} .side-brand img{display:block;flex:none;} .side-toggle{margin-left:auto;flex:none;width:26px;height:26px;border-radius:var(--r-sm);border:none;background:rgba(255,255,255,.07);color:rgba(255,255,255,.7);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s;} .side-toggle:hover{background:rgba(255,255,255,.14);color:#fff;} .side-mini .side-brand{justify-content:center;padding-left:0;padding-right:0;} .side-mini .side-toggle{position:absolute;top:18px;right:-13px;background:var(--teal);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.15);z-index:2;} .side-mini .nav-i{justify-content:center;padding:10px 0;} .side-mini .side-user{justify-content:center;padding-left:0;padding-right:0;} .side-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:700;padding:12px 10px 5px;} .nav-i{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm); color:rgba(255,255,255,.82);text-decoration:none;font-size:13px;font-weight:500; transition:background .15s var(--ease),color .15s var(--ease); } .nav-i svg{width:16px;height:16px;flex:none;opacity:.78;} .nav-i:hover{background:rgba(255,255,255,.07);color:#fff;} .nav-i.on{background:var(--teal-soft);color:#fff;} .nav-i.on svg{opacity:1;} .side-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.1);} .side-user{display:flex;align-items:center;gap:10px;padding:8px 10px;} .side-avatar{width:30px;height:30px;border-radius:var(--r-pill);background:var(--coral);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px;flex:none;} .side-user .nm{font-size:12.5px;font-weight:600;color:#fff;line-height:1.2;} .side-user .em{font-size:11px;color:rgba(255,255,255,.55);} .main{padding:26px var(--gutter) 56px;min-width:0;} .main-in{max-width:var(--page-max);margin:0 auto;min-width:0;} .page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;} .kicker{text-transform:uppercase;font-size:11px;letter-spacing:.13em;color:var(--faint);font-weight:700;margin-bottom:4px;} .main h1.title{font-size:26px;line-height:1.1;} .sub{color:var(--muted);font-size:13.5px;max-width:64ch;} /* Opt out of the 64ch measure. For a .sub that is a card's own explanatory blurb rather than a page subtitle: capped at 64ch inside a full-width card it wraps early and leaves a dead gutter. */ .sub-wide{max-width:none;} /* ── Buttons ───────────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body); font-weight:600;font-size:13.5px;border-radius:var(--r-sm);padding:9px 15px; border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1; transition:background .15s var(--ease),border-color .15s,color .15s;white-space:nowrap; } .btn svg{width:16px;height:16px;} .btn-blue{background:var(--blue);color:#fff;} .btn-blue:hover{background:var(--blue-deep);} .btn-coral{background:var(--coral);color:#fff;} .btn-coral:hover{background:var(--coral-deep);} .btn-outline{background:var(--surface);color:var(--ink);border-color:var(--line-strong);} .btn-outline:hover{border-color:var(--teal);background:var(--sunken);} .btn-ghost{background:transparent;color:var(--muted);padding:9px 11px;} .btn-ghost:hover{background:var(--sunken);color:var(--ink);} .btn-danger{background:var(--bad);color:#fff;border-color:var(--bad);} .btn-danger:hover{filter:brightness(0.92);} .btn-sm{padding:6px 11px;font-size:12.5px;} /* Batch-select action bar (e.g. Quotes list) */ .batchbar{display:flex;align-items:center;gap:10px;padding:9px 14px;margin-bottom:10px; background:var(--bad-soft);border:1px solid var(--line);border-radius:var(--r-md);} .batchbar[hidden]{display:none;} .batchbar-count{font-size:13px;color:var(--ink);} .lnk{color:var(--blue);font-weight:600;text-decoration:none;cursor:pointer;} /* link-styled