/* ============================================================================ SIGNAL DECK — FiduciarySignal dark design system (2026-06-22 redesign) Shared shell + atoms for Command Center, Change Predictor (RADAR), Report Card. Fonts (add in each template ): ============================================================================ */ :root { --bg:#FAF8F2; --panel:#FFFFFF; --panel-2:#FFFFFF; --panel-deep:#F6F4EE; --appbar:rgba(6,95,70,.96); --line:#E7E5DD; --line-2:#DCDAD0; --ink:#18261F; --muted:#5B6F66; --faint:#6E7C73; --faint-2:#7D8A82; /* darkened for WCAG 1.4.3 (were #8A988F/#A6B2AA) */ --gold:#D4A012; --gold-ink:#1a1405; --blue:#047857; --link:#047857; --blue-deep:#065f46; --live:#D4A012; --live-fill:#D4A012; --live-soft:#FBF2E2; --live-ink:#8A4108; --high:#C0362C; --high-soft:#FCEEEC; --high-ink:#9F1F18; --mod:#B45309; --mod-soft:#FBF2E2; --mod-ink:#8A4108; --low:#64748B; --low-ink:#556070; /* darker for WCAG 1.4.3 on the tint */ --sigchip:#C2410C; --sigchip-soft:#FFF3EA; --sigchip-ink:#9A3412; --green:#047857; --green-soft:#ECFDF5; --green-ink:#065F46; --st-todo:#64748B; --st-called:#2563EB; --st-vm:#B45309; --st-meeting:#047857; --st-nofit:#8A988F; --r-card:15px; --r-input:9px; --r-pill:999px; --sans:'DM Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --shadow:0 1px 2px rgba(20,40,30,.05),0 6px 22px rgba(20,40,30,.08); } * { box-sizing:border-box; } html,body { margin:0; } body.sd { background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:14.5px; line-height:1.5; -webkit-font-smoothing:antialiased; /* faint radial blue glow, top-right */ background-image:radial-gradient(70% 55% at 92% -10%, rgba(4,120,87,.05), transparent 70%); background-attachment:fixed; } .sd a { color:var(--link); text-decoration:none; } .sd a:hover { text-decoration:underline; } .mono { font-family:var(--mono); font-variant-numeric:tabular-nums; } .micro { font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:600; } .muted { color:var(--muted); } .faint { color:var(--faint); } /* ---- app bar ------------------------------------------------------------- */ .sd-bar { position:sticky; top:0; z-index:60; height:58px; display:flex; align-items:center; gap:18px; padding:0 22px; background:var(--appbar); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); } .sd-logo { display:flex; align-items:center; gap:10px; } .sd-logo .badge { display:flex; align-items:center; flex:none; } .sd-logo .name { font-weight:700; font-size:27px; letter-spacing:-.01em; } .sd-logo .sub { font-size:13px; color:var(--faint); margin-top:1px; } .sd-nav { display:flex; gap:4px; margin-left:6px; } .sd-nav a { font-size:19px; font-weight:500; color:var(--muted); padding:7px 12px; border-radius:8px; } .sd-nav a:hover { color:var(--ink); text-decoration:none; } .sd-nav a.active { color:var(--ink); background:rgba(255,255,255,.09); } .sd-nav a.sd-demo { color:#fff; border:1px solid rgba(255,255,255,.38); font-weight:700; } .sd-nav a.sd-demo:hover { background:rgba(255,255,255,.14); } .sd-bar .right { margin-left:auto; display:flex; align-items:center; gap:14px; } .sd-live { display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.06em; color:var(--live-ink); text-transform:uppercase; } .sd-avatar { width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; font-weight:600; color:var(--muted); border:1px solid var(--line); } /* ---- account menu (avatar dropdown: sign out / contact / disclaimers, Jeff 2026-07-05) ---------------------------------------------------- */ .acct-wrap { position:relative; } .acct-btn { display:flex; align-items:center; gap:8px; background:none; font:inherit; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:2px 10px 2px 2px; color:#fff; cursor:pointer; transition:border-color .15s; } .acct-btn:hover { border-color:rgba(255,255,255,.45); } .acct-btn .chev { font-size:10px; opacity:.75; } .acct-menu { position:absolute; right:0; top:calc(100% + 8px); min-width:230px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:6px; z-index:1200; } .acct-menu .acct-id { font-family:var(--mono); font-size:11px; color:var(--faint); padding:8px 12px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .acct-menu a, .acct-menu button { display:block; width:100%; text-align:left; background:none; border:none; font:inherit; font-size:13.5px; color:var(--ink); text-decoration:none; padding:9px 12px; border-radius:8px; cursor:pointer; } .acct-menu a:hover, .acct-menu button:hover { background:rgba(0,0,0,.045); text-decoration:none; } .acct-menu form { margin:4px 0 0; border-top:1px solid var(--line); padding-top:4px; } .acct-menu .signout-item { color:var(--high-ink); font-weight:600; } .acct-menu.hidden { display:none; } /* ---- panels / cards ------------------------------------------------------ */ .sd-panel { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-card); } .sd-deep { background:var(--panel-deep); border:1px solid var(--line); border-radius:11px; } /* ---- pulsing dots (live/new) -- no emoji, ever ---------------------------- */ .dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; } .dot-live { background:var(--live); box-shadow:0 0 0 0 rgba(183,155,245,.6); animation:pulseLive 2s infinite; } .dot-high { background:var(--sigchip); box-shadow:0 0 0 0 rgba(217,128,46,.6); animation:pulseHigh 2s infinite; } @keyframes pulseLive { 70%{box-shadow:0 0 0 7px rgba(183,155,245,0);} 100%{box-shadow:0 0 0 0 rgba(183,155,245,0);} } @keyframes pulseHigh { 70%{box-shadow:0 0 0 7px rgba(217,128,46,0);} 100%{box-shadow:0 0 0 0 rgba(217,128,46,0);} } @media (prefers-reduced-motion: reduce) { .dot-live,.dot-high{ animation:none; } } /* ---- tier pills + badges + chips ----------------------------------------- */ .tier { display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); } .tier[data-tier="Live"] { color:var(--live-ink); background:var(--live-soft); } .tier[data-tier="High"] { color:var(--high-ink); background:var(--high-soft); } .tier[data-tier="Moderate"] { color:var(--mod-ink); background:var(--mod-soft); } .tier[data-tier="Low"] { color:var(--low-ink); background:rgba(111,141,172,.12); } .tier[data-tier="Minimal"] { color:var(--faint); background:rgba(255,255,255,.05); } .badge-live { display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:var(--live-fill); padding:3px 8px; border-radius:var(--r-pill); } .badge-new { font-family:var(--mono); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--live-ink); background:var(--live-soft); border:1px solid rgba(162,135,240,.3); padding:2px 7px; border-radius:var(--r-pill); } .chip-signal { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--sigchip-ink); background:var(--sigchip-soft); padding:4px 10px; border-radius:8px; } .chip-driver { display:inline-block; font-size:12px; color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--line); padding:3px 9px; border-radius:7px; } .chip-date { display:inline-flex; align-items:center; font-family:var(--mono); font-size:11px; color:var(--faint); padding:4px 2px; white-space:nowrap; } .signal-locked-note { font-size:12.5px; color:var(--muted); background:rgba(244,196,48,.07); border:1px solid rgba(244,196,48,.25); border-radius:8px; padding:8px 12px; margin:0 0 12px; } /* ---- multiplier (the hero number) ---------------------------------------- */ .mult { font-family:var(--mono); font-weight:700; line-height:1; letter-spacing:-.02em; } .mult-sub { font-family:var(--mono); font-size:11px; color:var(--faint); margin-top:3px; } .t-Live, .t-High { color:var(--high-ink); } /* Live shows the underlying tier color for the number */ .t-Moderate { color:var(--mod-ink); } .t-Low { color:var(--low-ink); } .t-Minimal { color:var(--muted); } /* ---- prediction module (Report Card + cross-surface) --------------------- */ .predict { background:linear-gradient(180deg, rgba(123,95,208,.12), rgba(123,95,208,.05)); border:1px solid rgba(162,135,240,.25); border-radius:var(--r-card); padding:18px 20px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; } .predict .big { font-family:var(--mono); font-weight:700; font-size:46px; line-height:1; color:var(--high-ink); letter-spacing:-.03em; } .predict .lede { font-size:15px; font-weight:600; } .predict .meta { font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:4px; } /* ---- buttons + inputs ---------------------------------------------------- */ .btn { font-family:var(--sans); font-size:13px; font-weight:600; padding:9px 14px; border-radius:var(--r-input); border:1px solid var(--line-2); background:var(--panel-2); color:var(--ink); cursor:pointer; display:inline-flex; align-items:center; gap:7px; text-decoration:none; } .btn:hover { border-color:rgba(255,255,255,.18); } .btn-gold { background:var(--gold); color:var(--gold-ink); border-color:var(--gold); } .btn-gold:hover { filter:brightness(1.06); } .btn-ghost { background:transparent; } .btn-dashed { background:transparent; border:1px dashed var(--line-2); color:var(--faint); cursor:default; } .sd-input, .sd-select, .sd-textarea { font-family:var(--sans); font-size:13.5px; color:var(--ink); background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-input); padding:9px 11px; width:100%; } .sd-textarea { font-size:13px; resize:vertical; background:var(--panel-deep); line-height:1.45; } .sd-input:focus, .sd-select:focus, .sd-textarea:focus { border-color:var(--blue-deep); } /* WCAG 2.4.7: a 1px border-color change is not a visible focus indicator — real outlines on every interactive element (mirrors dashboard.html) */ .sd-input:focus-visible, .sd-select:focus-visible, .sd-textarea:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline:2px solid var(--blue-deep); outline-offset:1px; border-radius:4px; } .sd-select { appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%); background-position:calc(100% - 16px) 17px, calc(100% - 11px) 17px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; } /* call-status colored left bar + select tint */ .status-bar { width:3px; border-radius:3px; align-self:stretch; flex:none; } .sb-todo{background:var(--st-todo);} .sb-called{background:var(--st-called);} .sb-vm{background:var(--st-vm);} .sb-meeting{background:var(--st-meeting);} .sb-nofit{background:var(--st-nofit);} /* ---- light-rebrand: app bar is emerald, so its text/atoms go light ---- */ .sd-logo .name { color:#fff; } .sd-logo .sub { color:rgba(255,255,255,.72); } .sd-nav a { color:rgba(255,255,255,.8); } .sd-nav a:hover { color:#fff; } .sd-nav a.active { color:#fff; background:rgba(255,255,255,.16); } .sd-live { color:#F4C430; } .sd-avatar { color:#fff; background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.25); } .badge-live { color:var(--gold-ink); }