/* ============================================================================ BenefitDesk — Core Stylesheet v2 Driven by attributes on : data-theme = light | dark data-style = modern | classic | minimal data-accent = (optional hex set by Settings, applied via inline style) ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ---------- BRAND TOKENS ---------- */ :root { --brand-accent: #2353E8; --brand-accent-600: #1B44C4; --brand-gold: #C8922A; --green:#10B981; --amber:#F59E0B; --red:#EF4444; --font-display:'DM Serif Display', Georgia, serif; --font-serif: 'Fraunces', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', monospace; --sidebar-w: 248px; --topbar-h: 64px; /* motion tokens — overridden per style */ --ease: cubic-bezier(.2,.7,.2,1); --dur: .22s; --lift: -2px; /* hover lift distance */ --hover-scale: 1.0; } /* ---------- LIGHT ---------- */ :root, [data-theme="light"] { --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#F1F4FA; --surface-3:#E9EEF7; --ink:#0E1119; --text:#3C4258; --muted:#8790A4; --rule:#E4E9F2; --sidebar-bg:#FFFFFF; --sidebar-ink:#4A5169; --topbar-bg:rgba(255,255,255,.82); --accent:var(--brand-accent); --accent-soft:#EDF2FE; --accent-ink:#1B44C4; --shadow-sm:0 1px 2px rgba(14,17,25,.05); --shadow:0 1px 3px rgba(14,17,25,.05), 0 8px 24px rgba(14,17,25,.06); --shadow-lg:0 4px 12px rgba(14,17,25,.08), 0 24px 48px rgba(14,17,25,.10); --glow:0 0 0 4px var(--accent-soft); } /* ---------- DARK ---------- */ [data-theme="dark"] { --bg:#090B10; --surface:#12161F; --surface-2:#171C27; --surface-3:#1F2634; --ink:#F3F6FC; --text:#BFC6D6; --muted:#7A8399; --rule:#232A38; --sidebar-bg:#0C0F15; --sidebar-ink:#A9B2C6; --topbar-bg:rgba(12,15,21,.82); --accent:#5A85FF; --accent-soft:rgba(90,133,255,.13); --accent-ink:#9FBAFF; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5); --shadow-lg:0 8px 24px rgba(0,0,0,.5), 0 32px 64px rgba(0,0,0,.6); --glow:0 0 0 4px var(--accent-soft); } /* ---------- PER-STYLE PERSONALITY ---------- */ /* MODERN — smooth, soft, generous radius, lively hover */ [data-style="modern"] { --radius:18px; --radius-sm:12px; --radius-xs:8px; --dur:.24s; --lift:-3px; --hover-scale:1.0; --card-head-font:var(--font-body); --card-pad:22px; --card-border-w:1px; --card-shadow:var(--shadow); --h-weight:700; --h-spacing:-.02em; } /* MODERN — gradient accents, soft glow, generous rounded cards */ [data-style="modern"] .card, [data-style="modern"] .stat { background: linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%) border-box; border:1px solid transparent; } [data-style="modern"] .btn:not(.ghost):not(.danger) { background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #7c3aed)); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 32%, transparent); } [data-style="modern"] .stat { position:relative; overflow:hidden; } [data-style="modern"] .stat::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--accent), transparent); } /* CLASSIC — editorial, serif, ruled borders, ledger feel, NO motion */ [data-style="classic"] { --radius:3px; --radius-sm:2px; --radius-xs:2px; --dur:0s; --lift:0px; --hover-scale:1.0; --card-head-font:var(--font-serif); --card-pad:24px; --card-border-w:1.5px; --card-shadow:none; --h-weight:500; --h-spacing:0; } [data-style="classic"] .card, [data-style="classic"] .stat, [data-style="classic"] .tbl-wrap { box-shadow:none; border:1.5px solid var(--ink); } [data-style="classic"] .card { border-width:1px; border-color:var(--rule); border-top:3px solid var(--ink); } [data-style="classic"] .stat { border:1px solid var(--rule); border-left:3px solid var(--accent); } [data-style="classic"] h1,[data-style="classic"] h2,[data-style="classic"] h3, [data-style="classic"] .eyebrow { font-family:var(--font-serif); } [data-style="classic"] .btn:not(.ghost) { border-radius:2px; } [data-style="classic"] .eyebrow { letter-spacing:.12em; } /* MINIMAL — flat, monochrome, hairline rules, no shadows, no fills */ [data-style="minimal"] { --radius:6px; --radius-sm:5px; --radius-xs:4px; --dur:.12s; --lift:0px; --hover-scale:1.0; --shadow:none; --shadow-lg:none; --shadow-sm:none; --card-head-font:var(--font-body); --card-pad:18px; --card-border-w:1px; --card-shadow:none; --h-weight:600; --h-spacing:-.01em; } [data-style="minimal"] .card, [data-style="minimal"] .stat, [data-style="minimal"] .tbl-wrap { box-shadow:none !important; border:1px solid var(--rule); background:transparent; } [data-style="minimal"] .stat { border:none; border-top:2px solid var(--ink); border-radius:0; padding-left:0; padding-right:0; } [data-style="minimal"] .btn:not(.ghost):not(.danger) { background:var(--ink); color:var(--surface); box-shadow:none; } [data-style="minimal"] .st-ico, [data-style="minimal"] .stat .st-ico { opacity:.35; } [data-style="minimal"] .eyebrow { color:var(--muted); } /* headings honour per-style weight/spacing */ h1,h2,h3 { font-weight:var(--h-weight, 600); letter-spacing:var(--h-spacing, -.01em); } /* reduced motion always wins */ @media (prefers-reduced-motion: reduce) { * { transition:none !important; animation:none !important; } } /* ---------- RESET ---------- */ * { box-sizing:border-box; margin:0; padding:0; } html { -webkit-text-size-adjust:100%; } body { font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); } h1,h2,h3,h4 { color:var(--ink); font-weight:600; line-height:1.18; letter-spacing:-.01em; } [data-style="classic"] h1,[data-style="classic"] h2,[data-style="classic"] h3 { font-family:var(--font-serif); font-weight:500; letter-spacing:0; } a { color:var(--accent); text-decoration:none; } /* ---------- APP SHELL ---------- */ .app { display:flex; min-height:100vh; } /* SIDEBAR — flex column so practice block pins to bottom */ .sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar-bg); border-right:1px solid var(--rule); position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; padding:18px 14px 16px; z-index:40; transition:transform var(--dur) var(--ease); } .sidebar .logo { display:flex; align-items:center; gap:10px; padding:6px 8px 20px; font-family:var(--font-display); font-size:1.32rem; color:var(--ink); max-width:100%; overflow:hidden; } [data-style="classic"] .sidebar .logo { font-family:var(--font-serif); font-weight:600; } .sidebar .logo b { color:var(--accent); font-weight:400; } /* Uploaded logo — HARD constrained so any image fits the box and never overflows or breaks the sidebar layout, regardless of original size. */ .sidebar .logo .brand-logo { height:36px; width:auto; max-width:150px; max-height:36px; object-fit:contain; flex-shrink:0; display:block; } .sidebar .logo .brand-logo-lg { /* "logo only" mode — slightly larger */ height:44px; max-height:44px; max-width:170px; } .sidebar .logo span { /* practice name text — never pushes width */ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .logo .mark { width:32px; height:32px; border-radius:9px; flex-shrink:0; background:linear-gradient(145deg,#20B5EE,#0E76BA 58%,#174584); display:grid; place-items:center; color:#fff; font-weight:700; font-family:var(--font-serif, Georgia), serif; font-size:1rem; box-shadow:0 6px 16px rgba(0,151,222,.30), inset 0 1px 0 rgba(255,255,255,.25); } .nav-scroll { flex:1; overflow-y:auto; margin:0 -4px; padding:0 4px; } .nav-group { margin-bottom:16px; } .nav-group .label { font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.13em; color:var(--muted); padding:0 10px 6px; } .nav-item { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-sm); color:var(--sidebar-ink); font-size:.895rem; font-weight:500; margin-bottom:2px; position:relative; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); } .nav-item:hover { background:var(--surface-2); color:var(--ink); text-decoration:none; } [data-style="modern"] .nav-item:hover { transform:translateX(2px); } .nav-item.active { background:var(--accent); color:#fff; box-shadow:0 4px 12px rgba(35,83,232,.28); } [data-style="minimal"] .nav-item.active { box-shadow:none; } [data-style="classic"] .nav-item.active { box-shadow:none; } .nav-item.active svg { stroke:#fff; } .nav-item svg { width:17px; height:17px; stroke:var(--muted); flex-shrink:0; transition:stroke var(--dur) var(--ease); } .nav-item:hover svg { stroke:var(--accent); } .nav-item.active:hover svg { stroke:#fff; } /* PRACTICE — pinned to bottom */ .sidebar .practice { margin-top:14px; padding:13px 13px; border-radius:var(--radius-sm); background:var(--surface-2); border:1px solid var(--rule); } .sidebar .practice .pl { font-family:var(--font-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); } .sidebar .practice .pn { color:var(--ink); font-weight:600; font-size:.86rem; margin-top:3px; } .sidebar .practice .pf { color:var(--muted); font-size:.72rem; margin-top:1px; } /* ---------- MAIN ---------- */ .main { flex:1; margin-left:var(--sidebar-w); min-width:0; display:flex; flex-direction:column; } .topbar { height:var(--topbar-h); background:var(--topbar-bg); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:30; } .topbar .crumbs { font-size:.84rem; color:var(--muted); display:flex; align-items:center; gap:8px; } .topbar .tools { display:flex; align-items:center; gap:12px; } /* content: premium centered column that grows comfortably on wide screens */ .content { flex:1; width:100%; max-width:1360px; margin:0 auto; padding:30px 34px 40px; } @media (min-width:1700px){ .content { max-width:1480px; } } /* ---------- BUTTONS / ICONS ---------- */ .icon-btn { width:38px; height:38px; border-radius:var(--radius-sm); border:1px solid var(--rule); background:var(--surface); display:grid; place-items:center; cursor:pointer; color:var(--text); transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .icon-btn:hover { background:var(--surface-2); border-color:var(--accent); color:var(--accent); } [data-style="modern"] .icon-btn:hover { transform:translateY(-1px); } .icon-btn svg { width:18px; height:18px; } .avatar { width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-weight:600; font-size:.85rem; } .btn { display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm); padding:10px 17px; font-size:.88rem; font-weight:600; font-family:inherit; cursor:pointer; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur); } .btn:hover { text-decoration:none; } [data-style="modern"] .btn:hover { transform:translateY(var(--lift)); box-shadow:0 8px 20px rgba(35,83,232,.32); } [data-style="minimal"] .btn:hover { opacity:.9; } .btn:active { transform:translateY(0); } .btn svg { width:16px; height:16px; } .btn.ghost { background:transparent; border:1px solid var(--rule); color:var(--text); } .btn.ghost:hover { border-color:var(--accent); color:var(--accent); background:var(--surface-2); } .btn.danger { background:var(--red); } [data-style="modern"] .btn.danger:hover { box-shadow:0 8px 20px rgba(239,68,68,.3); } .btn.sm { padding:7px 11px; font-size:.8rem; } /* ---------- PAGE HEADER ---------- */ .page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:24px; flex-wrap:wrap; } .eyebrow { font-family:var(--font-mono); font-size:.65rem; text-transform:uppercase; letter-spacing:.13em; color:var(--brand-gold); margin-bottom:7px; } .page-head h1 { font-size:1.85rem; } [data-style="classic"] .page-head h1 { font-size:2.15rem; } .page-head p { color:var(--muted); font-size:.9rem; margin-top:5px; max-width:60ch; } /* ---------- CARDS ---------- */ .card { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .card-pad { padding:22px; } .card-hover:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--rule)); } [data-style="modern"] .card-hover:hover { transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); } /* ---------- STAT CARDS ---------- */ .stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin-bottom:24px; } .stat { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); padding:19px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } [data-style="modern"] .stat:hover { transform:translateY(var(--lift)); box-shadow:var(--shadow-lg); } .stat .st-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; } .stat .st-label { font-size:.78rem; color:var(--muted); } .stat .st-value { font-size:1.9rem; font-weight:700; color:var(--ink); letter-spacing:-.025em; } [data-style="classic"] .stat .st-value { font-family:var(--font-serif); font-weight:500; } .stat .st-sub { font-size:.76rem; color:var(--muted); margin-top:5px; } .stat .st-ico { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); } .stat .st-ico svg { width:18px; height:18px; } /* accent stat variants (used on dashboard/compliance) */ .stat.accent-red { background:var(--red); color:#fff; } .stat.accent-red .st-value, .stat.accent-red .st-label, .stat.accent-red .st-sub { color:#fff; } .stat.accent-green { background:var(--green); color:#fff; } .stat.accent-green .st-value, .stat.accent-green .st-label, .stat.accent-green .st-sub { color:#fff; } /* clickable stat cards (dashboard) */ a.stat { text-decoration:none; display:block; } a.stat:hover { text-decoration:none; } a.stat .st-arrow { position:absolute; top:15px; right:14px; opacity:0; transition:opacity var(--dur) var(--ease); color:var(--muted); } a.stat:hover .st-arrow { opacity:.55; } a.stat .st-arrow svg { width:15px; height:15px; } /* ---------- TABLE ---------- */ .tbl-wrap { background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; } table { width:100%; border-collapse:collapse; } thead th { text-align:left; font-family:var(--font-mono); font-size:.64rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:14px 18px; border-bottom:1px solid var(--rule); background:var(--surface-2); } tbody td { padding:15px 18px; border-bottom:1px solid var(--rule); font-size:.9rem; } tbody tr:last-child td { border-bottom:none; } tbody tr { transition:background var(--dur) var(--ease); } tbody tr:hover { background:var(--surface-2); } .cell-title { font-weight:600; color:var(--ink); } .cell-sub { font-size:.78rem; color:var(--muted); margin-top:2px; } /* ---------- BADGES ---------- */ .badge { display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:.63rem; text-transform:uppercase; letter-spacing:.04em; padding:4px 10px; border-radius:20px; font-weight:500; } [data-style="classic"] .badge { border-radius:3px; } .badge.active { background:rgba(16,185,129,.14); color:var(--green); } .badge.prospect { background:var(--accent-soft); color:var(--accent-ink); } .badge.lapsed { background:rgba(239,68,68,.14); color:var(--red); } /* ---------- FORMS ---------- */ .field { margin-bottom:16px; } .field label { display:block; font-size:.82rem; font-weight:600; color:var(--ink); margin-bottom:6px; } .field input,.field select,.field textarea { width:100%; padding:10px 13px; border:1px solid var(--rule); border-radius:var(--radius-sm); font-family:inherit; font-size:.9rem; background:var(--surface); color:var(--ink); transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--glow); } /* ---------- CUSTOM SELECT (app-wide, replaces ugly native dropdown) ---------- Removes the native arrow and draws our own so