/* ===================================================================== command-calm.css — the "Command Calm" design system for the tebIQ Growth (clinic-owner) and Director (residency) consoles. Source of truth: mockups/direction-1-command-calm.html (founder-chosen). Thesis: the console is an instrument panel — dense but serene, one calm glance, trust over delight. Two things live here: 1. THE DOOR — a reusable navy sign-in hero (.door / .signin), themed per-console via data-console on console-door.html. 2. THE REskin — token set + primitive overrides scoped to `.cmdcalm`. Adding class="cmdcalm" to a console container re-skins the shared ds.css primitives (.card/.pill/table/buttons) it already uses, WITHOUT rewriting any innerHTML. Nothing outside `.cmdcalm` and the standalone door page is affected. Fonts: self-hosted (Fraunces + Source Serif 4 from /static/assets/fonts). NO webfont CDN dependency. index.html already declares these; we repeat them here so tenant-admin.html and the door page get them too. Duplicate @font-face with identical family names is a no-op where already present. ===================================================================== */ @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap; src:url("/static/assets/fonts/source-serif-4-latin.woff2") format("woff2")} @font-face{font-family:"Fraunces";font-style:normal;font-weight:400 700;font-display:swap; src:url("/static/assets/fonts/fraunces-latin.woff2") format("woff2")} /* ---- token set (verbatim from the mockup :root) --------------------- */ .cmdcalm, .door{ /* door (always navy — the door is the brand moment) */ --navy:#071125; --navy-2:#0B1B36; --navy-3:#122747; --door-ink:#E9EFFB; --door-muted:#93A6C9; --door-line:rgba(122,162,255,.17); --cc-brand:#4A8CFF; --cc-brand-ink:#8FB4FF; --cc-brand-deep:#2F6FE0; --cc-gold:#C9A136; /* working surface — LIGHT default */ --cc-bg:#F5F6F9; --cc-panel:#FFFFFF; --cc-panel2:#EFF1F6; --cc-ink:#16233B; --cc-muted:#5D6B84; --cc-faint:#8B97AC; --cc-line:rgba(22,35,59,.10); --cc-line-strong:rgba(22,35,59,.18); --cc-accent:#2F6FE0; --cc-accent-soft:rgba(47,111,224,.10); --cc-ok:#1F7A4D; --cc-ok-soft:rgba(31,122,77,.12); --cc-warn:#8A6100; --cc-warn-soft:rgba(229,161,0,.14); --cc-danger:#C43C40; --cc-danger-soft:rgba(229,72,77,.10); --cc-shadow:0 10px 30px rgba(9,17,37,.08); --cc-display:"Fraunces",Georgia,"Times New Roman",serif; --cc-serif:"Source Serif 4",Georgia,serif; --cc-sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* explicit dark (app theme toggle stamps data-theme on ) */ html[data-theme="dark"] .cmdcalm, html[data-theme="dark"] .door{ --cc-bg:#0A1424; --cc-panel:#101E36; --cc-panel2:#0C1830; --cc-ink:#E4EBF8; --cc-muted:#9AAAC8; --cc-faint:#6C7C9C; --cc-line:rgba(148,180,255,.12); --cc-line-strong:rgba(148,180,255,.22); --cc-accent:#6FA2FF; --cc-accent-soft:rgba(111,162,255,.14); --cc-ok:#4CC38A; --cc-ok-soft:rgba(76,195,138,.14); --cc-warn:#E5B25B; --cc-warn-soft:rgba(229,178,91,.14); --cc-danger:#FF8A8D; --cc-danger-soft:rgba(255,138,141,.12); --cc-shadow:0 12px 34px rgba(0,0,0,.45); } /* system-preference dark (door page + tenant-admin honour OS when the host page has not stamped an explicit light theme) */ @media (prefers-color-scheme: dark){ html:not([data-theme="light"]) .cmdcalm, html:not([data-theme="light"]) .door{ --cc-bg:#0A1424; --cc-panel:#101E36; --cc-panel2:#0C1830; --cc-ink:#E4EBF8; --cc-muted:#9AAAC8; --cc-faint:#6C7C9C; --cc-line:rgba(148,180,255,.12); --cc-line-strong:rgba(148,180,255,.22); --cc-accent:#6FA2FF; --cc-accent-soft:rgba(111,162,255,.14); --cc-ok:#4CC38A; --cc-ok-soft:rgba(76,195,138,.14); --cc-warn:#E5B25B; --cc-warn-soft:rgba(229,178,91,.14); --cc-danger:#FF8A8D; --cc-danger-soft:rgba(255,138,141,.12); --cc-shadow:0 12px 34px rgba(0,0,0,.45); } } /* ===================================================================== REskin — scoped to .cmdcalm. Overrides ds.css primitives in place. ===================================================================== */ .cmdcalm{ color:var(--cc-ink); font-family:var(--cc-sans); } /* serif display headings — the "quiet command" voice */ .cmdcalm h1, .cmdcalm h2{ font-family:var(--cc-display); font-weight:700; letter-spacing:-.01em; color:var(--cc-ink); } .cmdcalm h1{ font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.1; } /* h3 = the small all-caps card kicker used across ds.css cards */ .cmdcalm h3{ font:600 12px/1 var(--cc-sans); letter-spacing:.1em; text-transform:uppercase; color:var(--cc-faint); margin:0 0 12px; } .cmdcalm p.sub, .cmdcalm .hint, .cmdcalm .muted{ color:var(--cc-muted); } /* card — panel with the serene shadow + hairline; gold section rule on top */ .cmdcalm .card{ background:var(--cc-panel); border:1px solid var(--cc-line); border-radius:14px; padding:18px; box-shadow:var(--cc-shadow); position:relative; } .cmdcalm .card::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:3px; border-radius:0 0 3px 3px; background:var(--cc-gold); opacity:.85; } /* tables — the instrument readout */ .cmdcalm table{ width:100%; border-collapse:collapse; font-size:13.5px; } .cmdcalm th{ font:600 11px/1 var(--cc-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--cc-faint); text-align:left; padding:6px 8px; border-bottom:1px solid var(--cc-line-strong); background:transparent; } .cmdcalm td{ padding:9px 8px; border-bottom:1px solid var(--cc-line); font-variant-numeric:tabular-nums; vertical-align:middle; color:var(--cc-ink); } .cmdcalm tr:last-child td{ border-bottom:0; } /* pills — carry the semantic accent set */ .cmdcalm .pill{ display:inline-block; padding:2px 9px; border-radius:999px; font:600 11.5px var(--cc-sans); border:1px solid transparent; color:var(--cc-accent); background:var(--cc-accent-soft); } /* buttons — quiet by default, brand-filled for primary */ .cmdcalm button:not(.ghost){ background:linear-gradient(120deg,var(--cc-brand),var(--cc-brand-deep)); color:#fff; border:0; border-radius:9px; font:600 13px var(--cc-sans); cursor:pointer; } .cmdcalm button.ghost{ border:1px solid var(--cc-line-strong); background:transparent; color:var(--cc-muted); border-radius:8px; font:600 12px var(--cc-sans); cursor:pointer; } .cmdcalm button.ghost:hover{ color:var(--cc-accent); border-color:var(--cc-accent); } /* KPI numerals (director overview / growth cards use big tabular figures) */ .cmdcalm .kpi .n, .cmdcalm .big-num, .cmdcalm .stat-n{ font:600 32px/1 var(--cc-sans); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } /* ===================================================================== THE DOOR — navy sign-in hero. Standalone (console-door.html). Themed per-console with data-console="growth|director". ===================================================================== */ .door{ background:var(--navy); color:var(--door-ink); position:relative; overflow:hidden; padding:64px 24px 72px; font-family:var(--cc-sans); min-height:100vh; box-sizing:border-box; } .door *{ box-sizing:border-box; } .door::before{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(58% 42% at 50% -6%, rgba(74,140,255,.26) 0%, rgba(74,140,255,.09) 45%, transparent 72%), radial-gradient(40% 30% at 84% 60%, rgba(47,111,224,.10) 0%, transparent 70%); } .door > *{ position:relative; } .door-grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; } @media(max-width:880px){ .door-grid{ grid-template-columns:1fr; gap:36px; } } .door .eyebrow{ font:700 12px/1 var(--cc-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--cc-brand-ink); display:inline-flex; align-items:center; gap:8px; } .door .eyebrow::before{ content:""; width:22px; height:1px; background:var(--cc-brand-ink); opacity:.6; } .door h1{ font-family:var(--cc-display); font-weight:700; letter-spacing:-.015em; font-size:clamp(2.3rem,5vw,3.6rem); line-height:1.05; margin:14px 0 0; color:#fff; text-shadow:0 0 42px rgba(74,140,255,.30); } .door h1 .thin{ color:#A9C7FF; font-weight:500; } .door .lede{ font-family:var(--cc-serif); font-size:1.13rem; line-height:1.55; color:var(--door-muted); max-width:34em; margin:16px 0 0; } .door .lede b{ color:var(--door-ink); font-weight:600; } .door-points{ margin:26px 0 0; padding:0; list-style:none; display:grid; gap:10px; font-size:14px; color:#C6D4EF; } .door-points li{ display:flex; gap:10px; align-items:baseline; } .door-points li::before{ content:"—"; color:var(--cc-brand); flex:0 0 auto; } .signin{ background:linear-gradient(180deg, rgba(18,39,71,.66), rgba(11,27,54,.92)); border:1px solid rgba(122,162,255,.28); border-radius:16px; padding:26px; box-shadow:0 14px 40px rgba(3,8,20,.5), 0 0 30px rgba(74,140,255,.10); } .signin h2{ font-family:var(--cc-display); font-size:1.25rem; color:#fff; font-weight:600; margin:0; } .signin p{ margin:6px 0 18px; font-size:13px; color:var(--door-muted); } .signin label{ display:block; font:600 11px/1 var(--cc-sans); letter-spacing:.1em; text-transform:uppercase; color:#AEC2E6; margin:14px 0 6px; } .signin input{ width:100%; padding:12px; border-radius:9px; border:1px solid rgba(122,162,255,.30); background:rgba(7,17,37,.55); color:#fff; font:15px var(--cc-sans); } .signin .cta{ margin-top:20px; width:100%; min-height:44px; padding:12px; border:0; border-radius:10px; cursor:pointer; background:linear-gradient(120deg,var(--cc-brand),var(--cc-brand-deep)); color:#fff; font:700 15px var(--cc-sans); box-shadow:0 6px 22px rgba(74,140,255,.35); } .signin .sso{ margin-top:10px; width:100%; min-height:44px; padding:11px; border-radius:10px; cursor:pointer; background:transparent; border:1px solid rgba(122,162,255,.30); color:#CFE1FF; font:600 14px var(--cc-sans); } .signin .fine{ margin:14px 0 0; font-size:11.5px; color:#7D90B4; text-align:center; } .door-foot{ max-width:1080px; margin:56px auto 0; padding-top:18px; border-top:1px solid var(--door-line); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; color:#7D90B4; } .door-foot b{ color:#AEC2E6; font-weight:600; }