/* ============================================================================= WithMedia Portal — Shared CSS · Liquid Glass design system Used by: portal.html (login) · admin.html · team.html · client.html ============================================================================= */ /* Inter (UI) + Plus Jakarta Sans (display headings) — corporate, highly readable */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap'); *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* ---- Neutral-slate canvas (garnet/slate V2 — no warm/crimson undertone) ---- */ --bg: #0a0b0d; --bg-warm: #0d0e11; --canvas-tint: transparent; /* ---- Solid content surfaces (flat — the "content" half of the hybrid) ---- */ --surface-1: #101216; --surface-2: #15171c; --surface-3: #1b1e24; --surface-strong:#22262e; --surface: #15171c; /* ---- Glass tokens repurposed as SOLID content surfaces, so every existing var(--glass-*) content reference flattens automatically ---- */ --glass-1: #101216; --glass-2: #15171c; --glass-3: #1b1e24; --glass-strong: #22262e; --glass-border: rgba(255,255,255,0.07); --glass-edge: rgba(255,255,255,0.12); --glass-shadow: 0 1px 2px rgba(0,0,0,0.28), 0 6px 20px rgba(0,0,0,0.30); --glass-shadow-hover: 0 2px 4px rgba(0,0,0,0.34), 0 14px 34px rgba(0,0,0,0.44); /* ---- True glass — ONLY overlays (modal / ⌘K / sidebar / toast / dropdown) ---- */ --overlay-1: rgba(18,20,25,0.72); --overlay-2: rgba(22,25,31,0.80); --overlay-strong: rgba(26,29,36,0.88); --overlay-border: rgba(255,255,255,0.10); --overlay-blur: blur(28px) saturate(180%); /* ---- Brand accent — refined garnet/rose (calmer than the old crimson) ---- */ --accent: #d6304f; --accent-hover: #b3203c; --accent-soft: rgba(214,48,79,0.14); --accent-glow: rgba(214,48,79,0.24); --accent-tint: rgba(214,48,79,0.09); /* ---- Text — cool neutral ---- */ --text: #f3f4f6; --text-secondary: #b9bdc7; --text-muted: #7e838f; --text-dim: #565b65; /* ---- Status — pure red reserved for real errors; distinct from accent ---- */ --success: #22c55e; --danger: #ef4444; --warning: #f59e0b; /* ---- Compat aliases — names preserved; now point at solid surfaces ---- */ --card: var(--surface-2); --card-bg: var(--surface-2); --card-hover: var(--surface-3); --border: var(--glass-border); --border-subtle: rgba(255,255,255,0.045); --border-strong: rgba(255,255,255,0.12); --radius: 16px; --shadow: var(--glass-shadow); } /* ============================================================ LIGHT THEME — opt-in via (ux.js) */ :root.light{ --bg: #fafafa; --bg-warm: #f4f4f5; --canvas-tint: rgba(214,48,79,0.04); --glass-1: rgba(0,0,0,0.025); --glass-2: rgba(255,255,255,0.65); --glass-3: rgba(255,255,255,0.80); --glass-strong: rgba(255,255,255,0.92); --glass-border: rgba(0,0,0,0.08); --glass-edge: rgba(0,0,0,0.14); --glass-shadow: 0 8px 32px rgba(15,15,20,0.08), 0 1px 0 rgba(255,255,255,0.6) inset; --glass-shadow-hover: 0 12px 40px rgba(15,15,20,0.12), 0 1px 0 rgba(255,255,255,0.8) inset, 0 0 0 1px rgba(0,0,0,0.04); --text: #18181b; --text-secondary: #3f3f46; --text-muted: #71717a; --text-dim: #a1a1aa; --border-subtle: rgba(0,0,0,0.05); } :root.light body{background:var(--bg)} :root.light body::before{ background: radial-gradient(45% 35% at 12% 18%, rgba(214,48,79,0.08), transparent 60%), radial-gradient(40% 32% at 88% 22%, rgba(214,48,79,0.05), transparent 65%), radial-gradient(50% 40% at 75% 88%, rgba(99,102,241,0.05), transparent 60%), radial-gradient(35% 30% at 18% 90%, rgba(234,88,12,0.04), transparent 60%); filter:saturate(105%); } :root.light body::after{background:linear-gradient(180deg, transparent 0%, rgba(250,250,250,0.55) 100%)} :root.light .sidebar{background:rgba(250,250,250,0.65)} :root.light .login-field{background:rgba(255,255,255,0.6)} :root.light .login-field:focus{background:rgba(255,255,255,0.85)} :root.light thead th{background:rgba(245,245,247,0.85);color:var(--text-muted)} :root.light .save-bar{background:rgba(250,250,250,0.85)} :root.light select option{background:#fff;color:var(--text)} :root.light ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.10)} :root.light ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.18)} :root.light .switch .slider{background:rgba(212,212,216,0.9)} :root.light .switch .slider:before{background:#fff} :root.light .heatmap-cell.empty{background:rgba(228,228,231,0.6)} :root.light .heatmap-cell.level-0{background:rgba(228,228,231,0.9);color:var(--text-muted)} /* Smooth theme transition (skipped under prefers-reduced-motion) */ html.theme-anim, html.theme-anim *{ transition:background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important; } /* ============================================================ CMDK / KBD HELP MODAL */ .cmdk-overlay{ position:fixed;inset:0;z-index:10001; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex;align-items:flex-start;justify-content:center; padding-top:12vh; animation:cmdkFade .15s ease; } :root.light .cmdk-overlay{background:rgba(20,20,25,0.30)} @keyframes cmdkFade{from{opacity:0}to{opacity:1}} .cmdk-modal{ width:600px;max-width:92vw; background:var(--glass-strong); backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%); border:1px solid var(--glass-edge); border-radius:16px; box-shadow:var(--glass-shadow-hover); overflow:hidden; display:flex;flex-direction:column; max-height:70vh; } .cmdk-input-wrap{ display:flex;align-items:center;gap:10px; padding:14px 18px;border-bottom:1px solid var(--border-subtle); } .cmdk-input-wrap svg{width:18px;height:18px;color:var(--text-muted);flex-shrink:0} .cmdk-input{ flex:1;background:transparent;border:none;outline:none; color:var(--text);font-size:15px;font-family:inherit; } .cmdk-input::placeholder{color:var(--text-muted)} .cmdk-hint{font-size:11px;color:var(--text-muted);font-family:'JetBrains Mono','SF Mono',monospace} .cmdk-results{flex:1;overflow-y:auto;padding:6px 0} .cmdk-group{padding:8px 0} .cmdk-group-label{ font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase; color:var(--text-dim);padding:8px 18px 4px; } .cmdk-item{ display:flex;align-items:center;gap:12px; padding:10px 18px;cursor:pointer; transition:background .12s; border-left:2px solid transparent; } .cmdk-item:hover, .cmdk-item.active{ background:var(--glass-2); border-left-color:var(--accent); } .cmdk-item-icon{ width:28px;height:28px;flex-shrink:0; display:flex;align-items:center;justify-content:center; background:var(--glass-1);border-radius:6px; font-size:14px; } .cmdk-item-icon svg{width:15px;height:15px;color:var(--text-secondary)} .cmdk-item-body{flex:1;min-width:0} .cmdk-item-title{font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cmdk-item-crumb{font-size:11px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cmdk-item-shortcut{font-size:10px;color:var(--text-dim);font-family:'JetBrains Mono','SF Mono',monospace;letter-spacing:.5px} .cmdk-empty{padding:32px 18px;text-align:center;color:var(--text-muted);font-size:13px} /* Theme toggle button (lives in sidebar footer, beside Sign Out) */ .theme-toggle-btn{ margin-top:10px;width:100%;padding:8px 12px; display:flex;align-items:center;justify-content:center;gap:8px; background:transparent;border:1px solid var(--glass-border);border-radius:8px; color:var(--text-secondary);font-size:12px;font-weight:500;cursor:pointer; font-family:inherit; transition:all .2s; } .theme-toggle-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} .theme-toggle-btn svg{width:14px;height:14px} /* Floating "Press ?" hint at the bottom of every page */ .kbd-hint{ position:fixed;bottom:14px;left:14px;z-index:50; display:inline-flex;align-items:center;gap:6px; padding:6px 10px; background:var(--glass-2); backdrop-filter:blur(14px) saturate(180%); -webkit-backdrop-filter:blur(14px) saturate(180%); border:1px solid var(--glass-border);border-radius:8px; font-size:11px;color:var(--text-muted); user-select:none; transition:opacity .2s; } .kbd-hint kbd{ display:inline-block;padding:1px 6px; background:var(--glass-3);border:1px solid var(--glass-border); border-radius:4px;font-size:10px;color:var(--text-secondary); font-family:'JetBrains Mono','SF Mono',monospace; } .kbd-hint .kbd-dismiss{ margin-left:4px;background:none;border:none;cursor:pointer; color:var(--text-dim);font-size:14px;line-height:1;padding:0 2px; } .kbd-hint .kbd-dismiss:hover{color:var(--text)} /* Keyboard help modal table */ .kbd-help-list{display:grid;gap:8px;padding:6px 0} .kbd-help-row{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 4px;border-bottom:1px solid var(--border-subtle);font-size:13px; } .kbd-help-row:last-child{border-bottom:none} .kbd-help-row .kbd-keys{display:flex;gap:4px} .kbd-help-row kbd{ display:inline-block;padding:2px 7px; background:var(--glass-2);border:1px solid var(--glass-border); border-radius:5px;font-size:11px;color:var(--text); font-family:'JetBrains Mono','SF Mono',monospace; box-shadow:0 1px 0 var(--glass-border); } .kbd-sound-row{ display:flex;align-items:center;gap:8px; padding:12px 4px;margin-top:6px; border-top:1px solid var(--border-subtle);font-size:13px;color:var(--text); } .kbd-sound-row input{accent-color:var(--accent);cursor:pointer} .kbd-sound-row label{cursor:pointer;user-select:none} /* ============================================================ DRAG-AND-DROP REORDER (data-draggable-list) */ [data-draggable-list]{position:relative} [data-draggable-list] [data-draggable]{ cursor:grab; transition:transform .15s ease, opacity .15s ease, box-shadow .2s ease; } [data-draggable-list] [data-draggable]:active{cursor:grabbing} [data-draggable-list] [data-draggable].dragging{ opacity:.4; transform:scale(.98); } [data-draggable-list] [data-draggable].drag-over-top{ box-shadow:0 -2px 0 0 var(--accent); } [data-draggable-list] [data-draggable].drag-over-bottom{ box-shadow:0 2px 0 0 var(--accent); } [data-draggable-list] [data-draggable] .drag-handle{ display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;color:var(--text-dim);cursor:grab; margin-right:8px;flex-shrink:0;opacity:.6;transition:opacity .15s; } [data-draggable-list] [data-draggable]:hover .drag-handle{opacity:1;color:var(--text-muted)} @media (prefers-reduced-motion: reduce){ [data-draggable-list] [data-draggable]{transition:none !important} .cmdk-overlay{animation:none} html.theme-anim, html.theme-anim *{transition:none !important} } html{font-size:14px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} body{ font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; line-height:1.55; font-feature-settings:'cv11','ss01','ss03'; letter-spacing:-0.005em; } /* Calm, static depth — a single faint garnet glow at the top, no animation. (The old animated rainbow mesh was removed for the minimal V2 look.) */ body::before{ content:''; position:fixed; inset:0; pointer-events:none; z-index:-2; background: radial-gradient(70% 55% at 50% -15%, rgba(214,48,79,0.05), transparent 62%), radial-gradient(45% 45% at 100% 0%, rgba(255,255,255,0.018), transparent 55%); } body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; background:linear-gradient(180deg, transparent 0%, rgba(7,8,10,0.45) 100%); } @keyframes meshDrift{ 0% {transform:translate(0,0) scale(1);} 50% {transform:translate(2%,-1%) scale(1.05);} 100% {transform:translate(-2%,1%) scale(1.02);} } a{color:var(--accent);text-decoration:none;transition:color .15s} a:hover{color:var(--accent-hover)} h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-weight:700;letter-spacing:-0.025em;line-height:1.2;color:var(--text)} h1{font-size:30px;font-weight:800} h2{font-size:22px} h3{font-size:15px} h4{font-size:13px} strong{font-weight:600} code,kbd,pre{font-family:'JetBrains Mono','SF Mono',Consolas,monospace;font-size:.92em} /* ============================================================ SCROLLBAR */ ::-webkit-scrollbar{width:6px;height:6px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.06);border-radius:3px;transition:background .2s} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.12)} /* ============================================================ LOGIN */ #loginScreen{ position:fixed;inset:0;background:transparent;z-index:10000; display:flex;align-items:center;justify-content:center;flex-direction:column; transition:opacity .5s ease;opacity:1; } #loginScreen.hidden{opacity:0;pointer-events:none} .login-logo{text-align:center;margin-bottom:40px;user-select:none} .login-logo img{width:160px;height:auto} .login-box{ width:380px;max-width:90vw;padding:34px 30px; background:var(--glass-2); backdrop-filter:blur(40px) saturate(180%); -webkit-backdrop-filter:blur(40px) saturate(180%); border:1px solid var(--glass-border); border-radius:20px; box-shadow:var(--glass-shadow); } .login-field{ width:100%;padding:13px 16px; background:rgba(0,0,0,0.25); border:1px solid var(--glass-border); border-radius:10px; color:var(--text);font-size:14px;outline:none;font-family:inherit; transition:border-color .2s, box-shadow .2s, background .2s; margin-bottom:12px; } .login-field:focus{ border-color:var(--accent); background:rgba(0,0,0,0.35); box-shadow:0 0 0 4px var(--accent-soft); } .login-field::placeholder{color:var(--text-muted)} .login-btn{ width:100%;padding:13px; background:linear-gradient(180deg,var(--accent),var(--accent-hover)); color:#fff;border:none;border-radius:10px; font-size:14px;font-weight:600;cursor:pointer; transition:transform .12s, box-shadow .2s; margin-top:6px; box-shadow:0 4px 14px rgba(214,48,79,0.30), 0 1px 0 rgba(255,255,255,0.15) inset; } .login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(214,48,79,0.40), 0 1px 0 rgba(255,255,255,0.20) inset} .login-btn:active{transform:scale(.98)} .login-error{color:var(--danger);font-size:13px;min-height:20px;text-align:center;margin-top:12px} .login-hint{color:var(--text-muted);font-size:12px;text-align:center;margin-top:18px;line-height:1.55} /* ============================================================ APP LAYOUT */ .app{display:flex;min-height:100vh;opacity:0;transition:opacity .5s ease} .app.visible{opacity:1} /* ============================================================ SIDEBAR — frosted, narrow, calm */ .sidebar{ width:248px; background:rgba(8,8,10,0.55); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); border-right:1px solid var(--glass-border); display:flex;flex-direction:column; position:fixed;top:0;left:0;bottom:0;z-index:100; transition:transform .3s cubic-bezier(.2,.8,.2,1); } .sidebar-header{padding:22px 22px 16px;border-bottom:1px solid var(--border-subtle)} .sidebar-header img{width:108px;height:auto} .sidebar-role{ font-size:10px;color:var(--text-muted);margin-top:8px; text-transform:uppercase;letter-spacing:1.6px;font-weight:600; } .sidebar-nav{flex:1;padding:8px 0 16px;overflow-y:auto;overflow-x:hidden} /* Nav items — calm, glass-friendly */ .nav-item{ position:relative; display:flex;align-items:center;gap:11px; padding:9px 22px; cursor:pointer; color:var(--text-secondary); font-size:13px;font-weight:500; transition:color .15s, background .15s; border-left:3px solid transparent; margin:1px 0; } .nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.7;transition:opacity .15s} .nav-item span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nav-item:not(.nav-disabled):hover{ color:var(--text); background:linear-gradient(90deg, rgba(255,255,255,0.04), transparent 80%); } .nav-item:not(.nav-disabled):hover svg{opacity:1} .nav-item.active{ color:#fff; background:linear-gradient(90deg, var(--accent-soft), transparent 75%); border-left-color:var(--accent); font-weight:600; } .nav-item.active svg{opacity:1;color:var(--accent)} .nav-item.nav-disabled{color:var(--text-dim);cursor:not-allowed;opacity:.4} .nav-item.nav-disabled:hover{background:transparent} .nav-divider{ padding:18px 22px 6px; font-size:9.5px;font-weight:700;letter-spacing:2px; text-transform:uppercase;color:var(--text-dim); font-family:'Plus Jakarta Sans','Inter',sans-serif; } .nav-divider:first-of-type{padding-top:6px} .sidebar-footer{padding:16px 22px;border-top:1px solid var(--border-subtle);font-size:11px;color:var(--text-muted)} .signout-btn{ margin-top:10px;width:100%;padding:8px 12px; background:transparent; border:1px solid var(--glass-border); border-radius:8px;color:var(--text-secondary); font-size:12px;font-weight:500;cursor:pointer; transition:all .2s; } .signout-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)} /* ============================================================ HAMBURGER */ .hamburger{ display:none;position:fixed;top:14px;left:14px;z-index:200; background:var(--glass-2); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid var(--glass-border);border-radius:10px; padding:9px;cursor:pointer;color:var(--text); } .hamburger svg{width:20px;height:20px} /* ============================================================ MAIN */ .main{flex:1;margin-left:248px;padding:32px 40px;min-height:100vh;max-width:100%} /* padding-right reserves a band on the right edge of every section header so inline right-aligned content (e.g. the Tasks page's ClickUp/Notion/ Refresh/+New buttons) can't sit underneath the top-right floating cluster: notif bell (right:24) + 40w → ends at viewport-right - 24 error bell (right:76) + 40w → ends at viewport-right - 76 ⌘K search (right:128) + 40w → ends at viewport-right - 128 customize (right:180) + 40w → ends at viewport-right - 180 (Dashboard/Wudio only) The leftmost (Customize) extends to viewport-right - 220. With .main's own padding-right of 40 already subtracting, .main-header needs 220 - 40 + 20 = 200px to leave a 20px gap. We use 240px to be defensive in case a 5th button ever lands in the cluster. */ /* !important guards against rogue inline styles / other stylesheets that previously won the specificity battle and left the user staring at the floating top-right cluster overlapping the inline +New Task / Refresh / Customize buttons. With this, the right-edge band is reserved unconditionally. */ .main-header{margin-bottom:28px !important;padding-bottom:18px !important;padding-right:240px !important;border-bottom:1px solid var(--border-subtle)} .main-header h2{font-size:24px;letter-spacing:-0.02em;font-weight:700} .main-header p{color:var(--text-secondary);margin-top:4px;font-size:13.5px;font-weight:400;line-height:1.5} /* ============================================================ SECTIONS */ .section{display:none} .section.active{display:block;animation:fadeUp .35s cubic-bezier(.2,.8,.2,1)} @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ============================================================ CARDS — liquid glass */ .card{ position:relative; background:var(--glass-2); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border:1px solid var(--glass-border); border-radius:16px; padding:22px 24px; margin-bottom:18px; box-shadow:var(--glass-shadow); transition:border-color .2s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; } .card:hover{border-color:var(--glass-edge)} .card h3{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-size:14px;font-weight:700; margin-bottom:16px; display:flex;align-items:center;gap:10px; color:var(--text); letter-spacing:-0.005em; padding-bottom:12px; border-bottom:1px solid var(--border-subtle); } /* ============================================================ STATS — glassy pill cards */ .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:22px} .stat-card{ position:relative;overflow:hidden; background:var(--glass-2); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border:1px solid var(--glass-border); border-radius:16px; padding:22px; transition:all .25s cubic-bezier(.2,.8,.2,1); box-shadow:var(--glass-shadow); } .stat-card:hover{ border-color:var(--glass-edge); transform:translateY(-2px); box-shadow:var(--glass-shadow-hover); } .stat-card::before{ content:'';position:absolute;inset:0;border-radius:inherit; background:linear-gradient(135deg, rgba(214,48,79,0.06), transparent 50%); opacity:0;transition:opacity .25s; pointer-events:none; } .stat-card:hover::before{opacity:1} .stat-card .stat-value{font-family:'Plus Jakarta Sans','Inter',sans-serif;font-size:34px;font-weight:800;letter-spacing:-0.03em;line-height:1;color:var(--text)} .stat-card .stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;margin-top:8px;font-weight:600} .stat-card .stat-change{font-size:11px;margin-top:8px;display:inline-block;padding:3px 9px;border-radius:99px;font-weight:600} .stat-card .stat-change.up{background:rgba(34,197,94,.14);color:var(--success)} .stat-card .stat-change.down{background:rgba(239,68,68,.14);color:var(--danger)} /* ============================================================ STATUS DOT */ .status-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px} .status-dot.green{background:var(--success);box-shadow:0 0 12px rgba(34,197,94,.6);animation:pulse 2s infinite} .status-dot.red{background:var(--danger);box-shadow:0 0 12px rgba(239,68,68,.6)} /* ============================================================ TOGGLES & SWITCHES */ .toggle-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-subtle)} .toggle-row:last-child{border-bottom:none} .toggle-label{font-size:13.5px;font-weight:500;color:var(--text)} .toggle-desc{font-size:11px;color:var(--text-muted);margin-top:2px} .switch{position:relative;width:42px;height:24px;flex-shrink:0;display:inline-block} .switch input{opacity:0;width:0;height:0;position:absolute} .switch .slider{position:absolute;inset:0;background:rgba(63,63,70,0.6);border:1px solid var(--glass-border);border-radius:24px;cursor:pointer;transition:.25s} .switch .slider:before{content:'';position:absolute;width:18px;height:18px;left:2px;bottom:2px;background:#e4e4e7;border-radius:50%;transition:.25s;box-shadow:0 1px 3px rgba(0,0,0,.4)} .switch input:checked+.slider{background:var(--accent);border-color:var(--accent-hover)} .switch input:checked+.slider:before{transform:translateX(18px);background:#fff} .feature-group{margin-bottom:24px} .feature-group-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)} /* ============================================================ TABLES */ .table-wrapper{overflow-x:auto;border-radius:12px} table{width:100%;border-collapse:collapse;font-size:13px} thead th{ background:rgba(8,8,10,0.6);backdrop-filter:blur(12px); padding:11px 16px;text-align:left;font-weight:600; font-size:11px;text-transform:uppercase;letter-spacing:.6px; color:var(--text-muted);cursor:pointer;user-select:none;white-space:nowrap; border-bottom:1px solid var(--glass-border);position:sticky;top:0; } thead th:hover{color:var(--text)} thead th .sort-arrow{margin-left:4px;font-size:10px;opacity:.5} tbody tr{border-bottom:1px solid var(--border-subtle);transition:background .15s} tbody tr:hover{background:rgba(255,255,255,.025)} tbody td{padding:11px 16px;white-space:nowrap} /* ============================================================ BADGES */ .badge{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:600;letter-spacing:.2px} .badge.green {background:rgba(34,197,94,.14);color:var(--success)} .badge.red {background:rgba(239,68,68,.14);color:var(--danger)} .badge.yellow{background:rgba(245,158,11,.14);color:var(--warning)} .badge.orange{background:rgba(249,115,22,.14);color:#fb923c} .badge.purple{background:rgba(139,92,246,.14);color:#a78bfa} .badge.gray {background:rgba(255,255,255,.10);color:var(--text-secondary);border:1px solid var(--glass-border)} /* ============================================================ TOOLBAR */ .toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center} .toolbar input,.toolbar select{ background:var(--glass-1); backdrop-filter:blur(10px); border:1px solid var(--glass-border);border-radius:10px; padding:9px 13px;color:var(--text);font-size:13px; outline:none;transition:border .2s,box-shadow .2s,background .2s; } .toolbar input:focus,.toolbar select:focus{border-color:var(--accent);background:var(--glass-2);box-shadow:0 0 0 3px var(--accent-soft)} .toolbar input{flex:1;min-width:200px} .toolbar select{min-width:140px} /* ============================================================ BUTTONS */ .btn{ display:inline-flex;align-items:center;gap:6px; padding:9px 18px;border:none;border-radius:10px; font-size:13px;font-weight:600;letter-spacing:-0.005em; cursor:pointer;font-family:inherit; transition:transform .12s, box-shadow .2s, background .2s; } .btn-primary{background:linear-gradient(180deg,var(--accent),var(--accent-hover));color:#fff;box-shadow:0 4px 14px rgba(214,48,79,0.25), 0 1px 0 rgba(255,255,255,0.12) inset} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(214,48,79,0.40), 0 1px 0 rgba(255,255,255,0.18) inset} .btn-primary:active{transform:translateY(0);box-shadow:0 2px 6px rgba(214,48,79,0.30) inset} .btn-success{background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px 14px rgba(34,197,94,0.25), 0 1px 0 rgba(255,255,255,0.12) inset} .btn-success:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,197,94,0.40), 0 1px 0 rgba(255,255,255,0.18) inset} .btn-secondary{ background:var(--glass-2); backdrop-filter:blur(10px); border:1px solid var(--glass-border); color:var(--text); } .btn-secondary:hover{background:var(--glass-3);border-color:var(--glass-edge)} .btn-sm{padding:6px 12px;font-size:12px} .btn.task-status-btn{background:var(--glass-1) !important;border:1px solid var(--glass-border) !important;color:var(--text-muted)} .btn.task-status-btn.active{background:var(--accent) !important;color:#fff;border-color:var(--accent) !important;box-shadow:0 2px 8px var(--accent-glow)} .btn.leave-mode-btn.active{background:#22c55e !important;border-color:#22c55e !important;color:#fff !important} /* ============================================================ QUICK ACTIONS */ .quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px} /* ============================================================ BAR CHART */ .bar-chart{display:flex;align-items:flex-end;gap:8px;height:200px;padding:0 8px} .bar-col{display:flex;flex-direction:column;align-items:center;flex:1;gap:6px;min-width:0} .bar{width:100%;border-radius:5px 5px 0 0;transition:height .6s cubic-bezier(.2,.8,.2,1);position:relative;min-height:2px} .bar.red{background:linear-gradient(180deg,var(--accent),var(--accent-hover))} .bar.green{background:linear-gradient(180deg,var(--success),#16a34a)} .bar-label{font-size:10px;color:var(--text-muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .bar-value{font-size:10px;color:var(--text-secondary);font-weight:600} /* ============================================================ HEATMAP Compact GitHub-style cells. Default ~32px tall via aspect-ratio at 260px max-width. Per-editor admin view wraps in .heatmap-grid (auto-fill) so multiple fit per row. */ .heatmap{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;max-width:260px} .heatmap-cell{aspect-ratio:1;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:500;transition:transform .15s} .heatmap-cell:hover{transform:scale(1.2);z-index:2;position:relative} .heatmap-cell.empty{background:rgba(24,24,27,0.5)} .heatmap-cell.level-0{background:rgba(63,63,70,0.4);color:var(--text-muted)} .heatmap-cell.level-1{background:rgba(214,48,79,.18);color:var(--accent)} .heatmap-cell.level-2{background:rgba(34,197,94,.3);color:#fff} .heatmap-cell.level-3{background:rgba(34,197,94,.55);color:#fff} .heatmap-cell.level-future{background:rgba(63,63,70,.2);color:var(--text-muted);opacity:.4} .heatmap-header{font-size:10px;color:var(--text-muted);text-align:center;font-weight:600} .heatmap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px 24px;align-items:start} .heatmap-grid > div{margin-bottom:0 !important} /* ============================================================ SETTINGS TABS */ .stabs{display:flex;gap:4px;margin-bottom:24px;border-bottom:1px solid var(--glass-border);padding-bottom:0;overflow-x:auto} .stab{padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-secondary);border-bottom:2px solid transparent;transition:.2s;white-space:nowrap;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit} .stab:hover{color:var(--text)} .stab.active{color:var(--accent);border-bottom-color:var(--accent)} /* ============================================================ SETTINGS ROWS */ .s-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--border-subtle)} .s-row:last-child{border-bottom:none} .s-label{font-size:13.5px;font-weight:500;color:var(--text)} .s-desc{font-size:12px;color:var(--text-muted);margin-top:3px;max-width:520px;line-height:1.5} .s-input,.s-input-mono,.s-select{ background:var(--glass-1);backdrop-filter:blur(10px); border:1px solid var(--glass-border);border-radius:10px; padding:9px 14px;color:var(--text);font-size:13px; outline:none;width:280px; transition:border .2s,box-shadow .2s,background .2s; font-family:inherit; } .s-input-mono{font-family:'JetBrains Mono','SF Mono',Monaco,monospace} .s-select{min-width:200px;cursor:pointer} .s-input:focus,.s-input-mono:focus,.s-select:focus{border-color:var(--accent);background:var(--glass-2);box-shadow:0 0 0 3px var(--accent-soft)} /* ============================================================ SETTINGS MISC */ .reveal-btn{background:var(--glass-1);border:1px solid var(--glass-border);color:var(--text-secondary);padding:6px 12px;border-radius:8px;font-size:12px;cursor:pointer;transition:all .2s} .reveal-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--glass-2)} .day-check{display:inline-flex;align-items:center;gap:4px;margin-right:12px;font-size:13px;cursor:pointer;color:var(--text-secondary)} .day-check input{accent-color:var(--success)} .danger-card{border-color:rgba(239,68,68,0.4) !important} .danger-card h3{color:var(--danger)} .save-bar{ position:sticky;bottom:0; background:rgba(8,8,10,0.85); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); padding:14px 0;border-top:1px solid var(--glass-border); display:flex;justify-content:flex-end;gap:10px;z-index:10; } /* ============================================================ SCHEDULER */ .job-card{display:flex;align-items:center;gap:14px;padding:14px;background:var(--glass-1);backdrop-filter:blur(10px);border-radius:10px;margin-bottom:8px;border:1px solid var(--glass-border);transition:border-color .2s} .job-card:hover{border-color:var(--glass-edge)} .job-info{flex:1} .job-name{font-weight:600;font-size:14px} .job-time{font-size:12px;color:var(--text-secondary);margin-top:2px;font-family:'JetBrains Mono','SF Mono',Monaco,monospace} .job-next{font-size:11px;color:var(--text-muted);margin-top:2px} /* ============================================================ FINANCE */ .finance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} /* ============================================================ INLINE FORM */ .inline-form{display:flex;gap:10px;margin-bottom:14px} .inline-form input{flex:1;background:var(--glass-1);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:10px;padding:9px 14px;color:var(--text);font-size:13px;outline:none;transition:border .2s,box-shadow .2s,background .2s;font-family:inherit} .inline-form input:focus{border-color:var(--accent);background:var(--glass-2);box-shadow:0 0 0 3px var(--accent-soft)} /* ============================================================ FILTER TABS */ .filter-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap} .filter-tab{padding:7px 14px;border-radius:99px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s;color:var(--text-secondary);background:var(--glass-1);border:1px solid var(--glass-border)} .filter-tab:hover{color:var(--text);border-color:var(--glass-edge);background:var(--glass-2)} .filter-tab.active{color:#fff;background:var(--accent);border-color:var(--accent);box-shadow:0 2px 10px var(--accent-glow)} /* ============================================================ MONTH SECTIONS */ .month-section{margin-bottom:14px} .month-header{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--glass-1);backdrop-filter:blur(10px);border-radius:10px;cursor:pointer;margin-bottom:8px;border:1px solid var(--glass-border);transition:all .2s} .month-header:hover{border-color:var(--glass-edge)} .month-header h4{font-size:14px;font-weight:600} .month-header .count{font-size:12px;color:var(--text-secondary)} .month-header .chevron{transition:transform .2s;color:var(--text-muted)} .month-header.collapsed .chevron{transform:rotate(-90deg)} .month-content{overflow:hidden;transition:max-height .3s ease} .month-content.collapsed{max-height:0 !important;overflow:hidden} /* ============================================================ PROFILE */ .profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .profile-field{padding:14px 0;border-bottom:1px solid var(--border-subtle)} .profile-field:last-child{border-bottom:none} .profile-field-label{font-size:10.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:6px;display:block;font-weight:600} .profile-field-value{font-size:14.5px;font-weight:500} .form-input{background:var(--glass-1);backdrop-filter:blur(10px);border:1px solid var(--glass-border);border-radius:10px;padding:9px 14px;color:var(--text);font-size:13px;outline:none;width:100%;box-sizing:border-box;transition:border .2s,box-shadow .2s,background .2s;font-family:inherit} .form-input:focus{border-color:var(--accent);background:var(--glass-2);box-shadow:0 0 0 3px var(--accent-soft)} select option{background:#0d0d10;color:var(--text)} /* ============================================================ WELCOME CARD */ .welcome-card{ background:linear-gradient(135deg, rgba(214,48,79,0.10) 0%, rgba(255,255,255,0.04) 50%, rgba(99,102,241,0.05) 100%); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); border:1px solid var(--glass-border); border-radius:18px; padding:30px 32px; margin-bottom:22px; box-shadow:var(--glass-shadow); } .welcome-card h2{font-size:26px;margin-bottom:6px;font-weight:700} .welcome-card p{color:var(--text-secondary);font-size:13.5px} /* ============================================================ STREAK */ .streak-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:600} .streak-badge.streak-zero{background:rgba(113,113,122,.14);color:var(--text-muted)} .streak-badge.streak-active{background:rgba(34,197,94,.14);color:#22c55e} /* ============================================================ TOAST — glassy notification */ .toast{ position:fixed;bottom:24px;right:24px; background:var(--glass-strong); backdrop-filter:blur(28px) saturate(180%); -webkit-backdrop-filter:blur(28px) saturate(180%); border:1px solid var(--glass-edge); border-radius:14px; padding:14px 44px 14px 22px; font-size:13px;font-weight:500;z-index:9999; transform:translateY(100px);opacity:0; transition:all .3s cubic-bezier(.2,.8,.2,1); box-shadow:var(--glass-shadow-hover); color:var(--text); } .toast.show{transform:translateY(0);opacity:1} .toast.success{border-left:3px solid var(--success)} .toast.error{border-left:3px solid var(--danger)} .toast-close{position:absolute;top:8px;right:10px;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 6px} .toast-close:hover{color:var(--text)} /* ============================================================ ANIMATIONS */ @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* ============================================================ TOOL ASSIGNMENTS GRID */ .assign-grid{display:grid;grid-template-columns:200px 1fr;gap:1px;background:var(--glass-border);border-radius:12px;overflow:hidden;border:1px solid var(--glass-border)} .assign-grid > div{background:rgba(8,8,10,0.5);backdrop-filter:blur(10px);padding:12px 16px;font-size:13px} .assign-grid .assign-head{background:rgba(8,8,10,0.7);font-weight:700;color:var(--text-muted);text-transform:uppercase;font-size:11px;letter-spacing:.6px} .assign-tools{display:flex;gap:14px;flex-wrap:wrap} .assign-tools label{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--text-secondary);font-size:12px} .assign-tools input{accent-color:var(--accent);cursor:pointer} /* ============================================================ HOME (deprecated card grid) — keep hidden */ #homeScreen{display:none !important} /* ============================================================ RESPONSIVE */ @media(max-width:1024px){ .main{padding:24px 28px} } @media(max-width:768px){ .sidebar{transform:translateX(-100%)} .sidebar.open{transform:translateX(0)} .hamburger{display:block} .main{margin-left:0;padding:18px 16px;padding-top:62px} .stats-grid{grid-template-columns:1fr 1fr;gap:10px} .toolbar{flex-direction:column} .toolbar input,.toolbar select{width:100%} .s-row{flex-direction:column;align-items:flex-start;gap:10px} .s-input,.s-input-mono,.s-select{width:100%} .finance-grid{grid-template-columns:1fr} .profile-grid{grid-template-columns:1fr} .stabs{flex-wrap:nowrap} body::before{filter:saturate(100%);opacity:.5} /* lighter background on mobile = faster */ } @media(max-width:480px){ .stats-grid{grid-template-columns:1fr} .stat-card .stat-value{font-size:28px} .main-header h2{font-size:20px} } /* ============================================================ ACCESSIBILITY — reduce motion if user prefers */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} body::before{animation:none} } /* ============================================================ MOTION SYSTEM — fluid, seamless animations across the portal. Adds consistent durations, easings, entry/exit animations, hover/press feedback. Designed to layer on top of existing transitions without breaking them. Reduced-motion media query above already neuters all of this for users who opt out. ============================================================ */ :root { --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-page: 400ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* gentle deceleration — for entries */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* balanced — for state changes */ --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1); /* slight overshoot — for satisfying hovers */ } /* --- Layered transforms only. Don't override the 39 existing transition declarations. We add a transform/opacity transition specifically scoped to elements that get new transform/opacity behavior below. This composes with whatever transitions are already set on those elements. --- */ .nav-item, .btn, .btn-sm, .btn-secondary, .btn-success, .btn-danger, .stab, .filter-tab, .wm-pm-tab, .stat-card, .card { transition-property: transform, opacity, box-shadow, background, border-color; transition-duration: var(--motion-base); transition-timing-function: var(--ease-in-out); } /* Sidebar nav: gentle slide-in on hover */ .sidebar .nav-item:hover { transform: translateX(2px); } .sidebar .nav-item.active { transform: translateX(0); } /* Stats + cards: subtle lift on hover (where the card is interactive) */ .stat-card:hover { transform: translateY(-2px); } .card[onclick]:hover, .card.clickable:hover { transform: translateY(-2px); } /* Buttons: press feedback. Limited to actual interactive buttons. */ .btn:active, .btn-sm:active, .btn-secondary:active, .btn-success:active, .btn-danger:active, .stab:active, .filter-tab:active, .wm-pm-tab:active { transform: scale(0.97); } /* Inputs: smoother focus ring */ input:focus, select:focus, textarea:focus, .form-input:focus, .s-input:focus, .s-select:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); border-color: var(--accent); } /* --- Section switching: cross-fade + slight rise of incoming content --- */ .section { opacity: 0; pointer-events: none; } .section.active { opacity: 1; pointer-events: auto; animation: wmSectionEnter var(--motion-page) var(--ease-out); } @keyframes wmSectionEnter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* --- Modals + overlays: fade-and-rise --- */ .modal, .modal-overlay, .modal-backdrop, .wm-pagepicker-overlay, .wm-modal-backdrop, #wmClientModal { animation: wmFade var(--motion-base) var(--ease-out); } .modal-content, .wm-pagepicker-card, .wm-modal { animation: wmModalRise var(--motion-slow) var(--ease-out); } @keyframes wmFade { from { opacity: 0; } to { opacity: 1; } } @keyframes wmModalRise { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --- Notification panel + dropdowns: pop in from above --- */ #notifPanel, .dropdown-menu { animation: wmDropIn var(--motion-base) var(--ease-out); transform-origin: top right; } @keyframes wmDropIn { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* --- Toasts: slide-in from the bottom-right with bounce --- */ .toast.show { animation: wmToastIn var(--motion-slow) var(--ease-spring); } @keyframes wmToastIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* --- Tabs (.stabs / .filter-tabs): smooth indicator slide via underline border --- */ .stab, .filter-tab, .wm-pm-tab { position: relative; } .stab::after, .filter-tab::after, .wm-pm-tab::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform var(--motion-base) var(--ease-in-out); border-radius: 1px; pointer-events: none; } .stab.active::after, .filter-tab.active::after, .wm-pm-tab.active::after { transform: scaleX(1); } /* --- Switches: smoother knob slide + colour --- */ .switch .slider { transition: background var(--motion-base) var(--ease-in-out); } .switch .slider::before { transition: transform var(--motion-base) var(--ease-spring) !important; } /* --- Badges: gentle entrance when newly inserted (one-shot, doesn't loop) --- */ .badge { animation: wmBadgePop var(--motion-base) var(--ease-spring); } @keyframes wmBadgePop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } /* --- Sidebar group dividers: subtle fade so the new layout settles in cleanly --- */ .nav-divider { transition: color var(--motion-base) var(--ease-in-out); } /* --- Loading state: a calm pulse instead of jarring spinners (where used) --- */ @keyframes wmPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .is-loading, [data-loading="true"] { animation: wmPulse 1.6s var(--ease-in-out) infinite; } /* --- Skeleton shimmer: ensure the existing wmShimmer keyframes have consistent timing --- */ [class*="skel"], .wm-skel, [class*="-skel"] { background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.10), rgba(255,255,255,0.04)); background-size: 200% 100%; animation: wmShimmerStandard 1.4s linear infinite; } @keyframes wmShimmerStandard { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================ SIDEBAR COLLAPSE / EXPAND Button in sidebar header (top-right of header) hides sidebar off-screen. A floating "show sidebar" button appears at the top-left edge so the user can bring it back. ============================================================ */ .wm-sidebar-toggle{ position:absolute;top:14px;right:10px;z-index:5; width:28px;height:28px;border-radius:7px;border:1px solid var(--glass-border,rgba(255,255,255,0.08)); background:transparent;color:var(--text-muted);cursor:pointer; display:flex;align-items:center;justify-content:center;padding:0; transition:background var(--motion-base,200ms) var(--ease-in-out,ease),color var(--motion-base,200ms) var(--ease-in-out,ease),transform var(--motion-fast,120ms) var(--ease-spring,ease); } .wm-sidebar-toggle:hover{background:rgba(255,255,255,0.06);color:var(--text);} .wm-sidebar-toggle svg{width:14px;height:14px;} /* Collapsed state: slide sidebar off-screen, expand main, leave clearance for the floating hamburger */ body.wm-sidebar-collapsed .sidebar{transform:translateX(-100%);box-shadow:none;} body.wm-sidebar-collapsed .main{margin-left:0 !important;padding-left:72px !important;} @media(max-width:640px){ body.wm-sidebar-collapsed .main{padding-left:64px !important;} } .sidebar{transition:transform .3s cubic-bezier(.2,.8,.2,1),width .25s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease;} /* Explicit override so the dashboard "Customize" button is never truncated by inherited overflow rules */ #wmCustomizeDashboardBtn{white-space:nowrap !important;flex-shrink:0 !important;overflow:visible !important;text-overflow:clip !important;min-width:max-content !important;} /* Floating "show sidebar" button (only visible when collapsed) */ .wm-sidebar-show{ display:none;position:fixed;top:18px;left:14px;z-index:300; width:38px;height:38px;border-radius:10px; background:var(--glass-2,rgba(255,255,255,0.05)); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid var(--glass-border,rgba(255,255,255,0.08)); color:var(--text);cursor:pointer; align-items:center;justify-content:center;padding:0; box-shadow:var(--glass-shadow,0 4px 16px rgba(0,0,0,0.18)); transition:transform var(--motion-fast,120ms) var(--ease-spring,ease); } .wm-sidebar-show:hover{transform:scale(1.06);} .wm-sidebar-show svg{width:16px;height:16px;} body.wm-sidebar-collapsed .wm-sidebar-show{display:flex;} /* When sidebar is collapsed, top-right floating buttons (notif bell, error bell) shift left to use the freed space */ body.wm-sidebar-collapsed #notifBellBtn, body.wm-sidebar-collapsed #wmErrorBellBtn{ /* keep their right-edge anchor; nothing to do */ } /* ============================================================ ROUND 8 — AGENT V — MOBILE POLISH + LIGHT MODE Single-file pass. Append-only. Does not redefine prior rules. Mobile: bigger tap targets, full-screen modals, stacked header, contained tables, full-width cards, iOS-zoom-free inputs. Light mode: opt-in via — token overrides plus hard-coded-color escape hatches. Coexists with the existing :root.light theme used by ux.js. ============================================================ */ /* ---------- LIGHT MODE — body.wm-light-mode token overrides ---------- */ /* Brief specifies a JS-free, instant-toggle hook. The existing :root.light theme already covers most of the work but uses a different selector (html.light). We define the parallel body.wm-light-mode hook so HTML that opts-in via Just Works. Both selectors set the same custom-property values, so the cascade stays predictable. */ body.wm-light-mode{ --bg: #fafafa; --bg-warm: #f4f4f5; --canvas-tint: rgba(214,48,79,0.04); --glass-1: rgba(0,0,0,0.025); --glass-2: rgba(255,255,255,0.65); --glass-3: rgba(255,255,255,0.80); --glass-strong: rgba(255,255,255,0.92); --glass-border: rgba(0,0,0,0.08); --glass-edge: rgba(0,0,0,0.14); --glass-shadow: 0 8px 32px rgba(15,15,20,0.08), 0 1px 0 rgba(255,255,255,0.6) inset; --glass-shadow-hover: 0 12px 40px rgba(15,15,20,0.12), 0 1px 0 rgba(255,255,255,0.8) inset, 0 0 0 1px rgba(0,0,0,0.04); --text: #18181b; --text-secondary: #3f3f46; --text-muted: #71717a; --text-dim: #a1a1aa; --border: rgba(0,0,0,0.08); --border-subtle: rgba(0,0,0,0.04); /* Accent + status colours stay the same — they read well on both palettes. */ --accent: #e11d2a; --accent-hover: #b91c2a; --accent-soft: rgba(225,29,42,0.14); --accent-glow: rgba(225,29,42,0.20); } /* Body background + atmosphere — the dark version is hard-coded in body::before and body::after, so we need to override those layers under light mode. */ body.wm-light-mode{background:var(--bg);color:var(--text);} body.wm-light-mode::before{ background: radial-gradient(45% 35% at 12% 18%, rgba(214,48,79,0.08), transparent 60%), radial-gradient(40% 32% at 88% 22%, rgba(214,48,79,0.05), transparent 65%), radial-gradient(50% 40% at 75% 88%, rgba(99,102,241,0.05), transparent 60%), radial-gradient(35% 30% at 18% 90%, rgba(234,88,12,0.04), transparent 60%); filter:saturate(105%); } body.wm-light-mode::after{background:linear-gradient(180deg, transparent 0%, rgba(250,250,250,0.55) 100%);} /* Sidebar / surfaces that hard-code dark rgba */ body.wm-light-mode .sidebar{background:rgba(250,250,250,0.65);} body.wm-light-mode thead th{background:rgba(245,245,247,0.85);color:var(--text-muted);} body.wm-light-mode tbody tr:hover{background:rgba(0,0,0,0.03);} body.wm-light-mode .save-bar{background:rgba(250,250,250,0.85);} body.wm-light-mode .login-field{background:rgba(255,255,255,0.6);} body.wm-light-mode .login-field:focus{background:rgba(255,255,255,0.85);} body.wm-light-mode select option{background:#fff;color:var(--text);} body.wm-light-mode .switch .slider{background:rgba(212,212,216,0.9);} body.wm-light-mode .switch .slider:before{background:#fff;} body.wm-light-mode .heatmap-cell.empty{background:rgba(228,228,231,0.6);} body.wm-light-mode .heatmap-cell.level-0{background:rgba(228,228,231,0.9);color:var(--text-muted);} body.wm-light-mode .assign-grid > div{background:rgba(255,255,255,0.78);} body.wm-light-mode .assign-grid .assign-head{background:rgba(245,245,247,0.92);} /* Scrollbar thumb on light surfaces */ body.wm-light-mode ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.10);} body.wm-light-mode ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,0.20);} /* Skeleton shimmer — dark gradient is invisible on light bg */ body.wm-light-mode [class*="skel"], body.wm-light-mode .wm-skel, body.wm-light-mode [class*="-skel"]{ background:linear-gradient(90deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10), rgba(0,0,0,0.04)); background-size:200% 100%; } /* ---------- MOBILE — base breakpoint (<=768px) ---------- */ @media (max-width: 768px){ /* Headers stack on phones — title above, action buttons below, both full-width */ .main-header{padding-right:16px;} .main-header > *{max-width:100%;} .main-header h2{font-size:20px;line-height:1.25;} .main-header p{font-size:13px;} /* Cards — let them breathe edge-to-edge */ .card,.stat-card,.welcome-card{ border-radius:14px; padding:18px 16px; max-width:100%; } .welcome-card{padding:22px 18px;} /* Tables — keep horizontal scroll inside their wrapper, never break layout */ .table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px; margin:0 -4px; /* lean slightly into edges so columns can be wider */ } table{min-width:100%;} thead th,tbody td{padding:9px 12px;font-size:12.5px;} /* Buttons — Apple HIG-compliant tap targets */ .btn,.btn-secondary,.btn-success,.btn-primary,.signout-btn,.theme-toggle-btn,.reveal-btn,.login-btn{ min-height:44px; padding:11px 18px; font-size:14px; } .btn-sm{min-height:36px;padding:8px 14px;font-size:12.5px;} .stab,.filter-tab,.wm-pm-tab{min-height:40px;} /* Inputs — min-height + >=16px font so iOS doesn't zoom on focus */ input,select,textarea, .form-input,.s-input,.s-input-mono,.s-select,.login-field, .toolbar input,.toolbar select,.inline-form input,.cmdk-input{ min-height:44px; font-size:16px; /* iOS Safari skips zoom when >=16px */ padding:11px 14px; } /* Toolbars — already stacks via existing rule; widen the inputs */ .toolbar input,.toolbar select{min-width:0;width:100%;} .inline-form{flex-direction:column;} .inline-form input{width:100%;} /* Quick actions — wrap and stretch */ .quick-actions{gap:8px;} .quick-actions .btn{flex:1 1 auto;justify-content:center;} /* Modals — go fullscreen on phones for one-handed reach. Targets known portal modal classes; gentle fallbacks. */ .modal-content,.wm-pagepicker-card,.wm-modal{ width:100vw !important; max-width:100vw !important; height:100vh !important; max-height:100vh !important; border-radius:0 !important; margin:0 !important; padding:18px 16px !important; overflow-y:auto !important; } .modal,.modal-overlay,.modal-backdrop, .wm-pagepicker-overlay,.wm-modal-backdrop,#wmClientModal{ padding:0 !important; } /* Cmd-k keeps a touch of breathing room */ .cmdk-overlay{padding-top:6vh;} .cmdk-modal{width:96vw;max-height:80vh;} /* Sidebar — when open on mobile, ensure it's full width and gets a backdrop */ .sidebar{width:280px;max-width:86vw;box-shadow:0 12px 40px rgba(0,0,0,0.45);} /* Hamburger - bigger tap target on phones */ .hamburger{min-width:44px;min-height:44px;padding:11px;} /* Floating "show sidebar" button — match tap target */ .wm-sidebar-show{width:44px;height:44px;} /* Heatmaps — drop the max-width clamp so the weekly grid uses full width */ .heatmap{max-width:100%;} .heatmap-grid{grid-template-columns:1fr;} /* Toasts — span the full width so messages stay readable */ .toast{ left:12px;right:12px;bottom:12px; padding:14px 40px 14px 18px; border-radius:12px; } /* Cmd-k & kbd-hint - keep the hint off-screen on mobile (clutter) */ .kbd-hint{display:none;} /* Stats — tighter values on mobile cards */ .stat-card{padding:18px 16px;} .stat-card .stat-value{font-size:30px;} /* Settings rows already stack; just ensure widths are full */ .s-input,.s-input-mono,.s-select{width:100%;} .stabs{padding-bottom:0;} /* Job cards (scheduler) wrap nicely */ .job-card{flex-wrap:wrap;gap:10px;} /* Bar charts shrink for narrow screens */ .bar-chart{height:160px;gap:5px;padding:0 4px;} .bar-label{font-size:9px;} } /* ---------- MOBILE — narrow phones (<=480px) ---------- */ @media (max-width: 480px){ .main{padding:14px 12px;padding-top:60px;} .main-header h2{font-size:18px;} .stat-card .stat-value{font-size:26px;} .card,.stat-card,.welcome-card{padding:16px 14px;} .welcome-card h2{font-size:22px;} /* Stack toolbars vertically; full-width filter pills */ .filter-tabs{gap:6px;} .filter-tab{flex:1 1 calc(50% - 4px);text-align:center;justify-content:center;} /* Tables get even tighter cells */ thead th,tbody td{padding:8px 10px;font-size:12px;} /* Sidebar slightly smaller on tiny phones */ .sidebar{width:260px;} /* Cmd-k modal full-bleed on tiny phones */ .cmdk-modal{width:100vw;max-width:100vw;max-height:90vh;border-radius:0;} .cmdk-overlay{padding-top:0;} /* Stat-grid stays 1fr (already set above 480 in existing rule) — reinforce */ .stats-grid{grid-template-columns:1fr;gap:10px;} /* Buttons in toolbars stack full-width */ .toolbar > .btn,.toolbar .quick-actions .btn{width:100%;} } /* ============================================================================ V2 — FLAT + GLASS HYBRID · garnet / neutral-slate Append-only refinement layer (later source order wins). Flattens content surfaces, keeps true frosted glass for overlays only, modernizes the sidebar nav into floating pills, and widens the spacing rhythm. Reverting = delete this block + restore the original :root values. ============================================================================ */ /* ---- Overlays keep real frosted glass (the "glass" half of the hybrid) ---- */ .sidebar{ background:var(--overlay-2); -webkit-backdrop-filter:var(--overlay-blur); backdrop-filter:var(--overlay-blur); border-right:1px solid var(--overlay-border); } .cmdk-modal, .toast{ background:var(--overlay-strong); } .login-box, .hamburger, .kbd-hint, .wm-sidebar-show{ background:var(--overlay-2); } .save-bar{ background:var(--overlay-strong); } #notifPanel, .dropdown-menu, .modal-content, .wm-modal, .wm-pagepicker-card{ background:var(--overlay-strong); -webkit-backdrop-filter:var(--overlay-blur); backdrop-filter:var(--overlay-blur); border:1px solid var(--overlay-border); } /* ---- Content surfaces go crisp + flat (no backdrop blur) ---- */ .card, .stat-card{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--surface-2); border-color:var(--border); padding:24px 26px; } .card:hover, .stat-card:hover{ border-color:var(--border-strong); } .stat-card::before{ background:linear-gradient(135deg, var(--accent-tint), transparent 55%); } thead th{ background:var(--surface-1); -webkit-backdrop-filter:none; backdrop-filter:none; } .toolbar input, .toolbar select, .s-input, .s-input-mono, .s-select, .form-input, .inline-form input, .job-card, .month-header, .filter-tab, .reveal-btn, .btn-secondary{ -webkit-backdrop-filter:none; backdrop-filter:none; } .toolbar input, .toolbar select, .s-input, .s-input-mono, .s-select, .form-input, .inline-form input, .job-card, .month-header{ background:var(--surface-1); } /* ---- Sidebar nav → floating rounded pills (the modern "product" look) ---- */ .nav-item{ margin:2px 10px; padding:9px 12px; border-radius:10px; border-left:none !important; } .nav-item:not(.nav-disabled):hover{ background:var(--surface-2); } .sidebar .nav-item:hover{ transform:none; } /* pills shouldn't slide */ .nav-item.active{ background:var(--accent); color:#fff; border-left:none !important; box-shadow:0 6px 16px var(--accent-glow); } .nav-item.active svg{ color:#fff; opacity:1; } /* ---- Hero / welcome card → neutral garnet wash, flat ---- */ .welcome-card{ background:linear-gradient(135deg, var(--accent-tint) 0%, var(--surface-2) 55%); -webkit-backdrop-filter:none; backdrop-filter:none; border-color:var(--border); } /* ---- Spacing rhythm: a touch more air ---- */ .stats-grid{ gap:16px; margin-bottom:24px; } /* ---- Light themes: garnet accent + LIGHT values for the new V2 tokens. The dark defaults for the surface and overlay tokens do not auto-flip in light mode (the light theme predates them); these overrides restore it so cards/inputs/overlays go white on a light canvas. ---- */ :root.light, body.wm-light-mode{ --accent:#d6304f; --accent-hover:#b3203c; --accent-soft:rgba(214,48,79,0.14); --accent-glow:rgba(214,48,79,0.20); --accent-tint:rgba(214,48,79,0.07); --surface-1:#f3f4f6; --surface-2:#ffffff; --surface-3:#f6f7f9; --surface-strong:#ffffff; --surface:#ffffff; --glass-1:#f3f4f6; --glass-2:#ffffff; --glass-3:#f6f7f9; --glass-strong:#ffffff; --border-strong:rgba(0,0,0,0.12); --overlay-1:rgba(255,255,255,0.82); --overlay-2:rgba(255,255,255,0.86); --overlay-strong:rgba(255,255,255,0.93); --overlay-border:rgba(0,0,0,0.10); --glass-shadow:0 1px 2px rgba(15,15,20,0.06), 0 6px 20px rgba(15,15,20,0.08); --glass-shadow-hover:0 2px 4px rgba(15,15,20,0.10), 0 14px 34px rgba(15,15,20,0.12); } /* ============================================================================ V2 — MOTIVATING DASHBOARD HERO (.wm-hero) A living, time-aware greeting + today's focus + streak. Token-driven, so it adapts to light/dark. One data-widget child, so customize/drag still works. ============================================================================ */ .wm-hero{ position:relative; overflow:hidden; display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap; padding:28px 30px; margin-bottom:20px; border-radius:20px; border:1px solid var(--border); background: radial-gradient(130% 150% at 100% 0%, var(--accent-soft), transparent 55%), linear-gradient(135deg, var(--accent-tint), var(--surface-2) 58%); box-shadow:var(--glass-shadow); } .wm-hero::after{ content:''; position:absolute; right:-70px; top:-70px; width:260px; height:260px; background:radial-gradient(circle, var(--accent-glow), transparent 70%); opacity:.45; pointer-events:none; } .wm-hero-main{ position:relative; z-index:1; min-width:240px; flex:1 1 320px; } .wm-hero-greet{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-size:28px; font-weight:800; letter-spacing:-0.02em; line-height:1.15; color:var(--text); } .wm-hero-wave{ display:inline-block; transform-origin:70% 70%; animation:wmWave 2.6s ease-in-out infinite; } @keyframes wmWave{ 0%,55%,100%{transform:rotate(0)} 10%{transform:rotate(14deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(14deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} } .wm-hero-sub{ margin-top:8px; font-size:14.5px; color:var(--text-secondary); max-width:54ch; line-height:1.5; } .wm-hero-focus{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; } .wm-focus-chip{ display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:11px; background:var(--surface-1); border:1px solid var(--border); font-size:12.5px; color:var(--text-secondary); font-weight:500; } .wm-focus-chip b{ color:var(--text); font-weight:800; font-size:14px; } .wm-focus-chip.is-hot{ background:var(--accent-soft); border-color:transparent; color:var(--accent); } .wm-focus-chip.is-hot b{ color:var(--accent); } .wm-hero-aside{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:10px; } .wm-streak{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:118px; height:118px; border-radius:50%; background:var(--surface-1); border:1px solid var(--border); transition:box-shadow .3s var(--ease-out), border-color .3s; } .wm-streak.is-on{ border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft), 0 10px 30px var(--accent-glow); } .wm-streak-flame{ font-size:24px; line-height:1; } .wm-streak-num{ font-family:'Plus Jakarta Sans','Inter',sans-serif; font-size:30px; font-weight:800; line-height:1; color:var(--text); margin-top:2px; } .wm-streak.is-on .wm-streak-num{ color:var(--accent); } .wm-streak-label{ font-size:10px; text-transform:uppercase; letter-spacing:1.2px; color:var(--text-muted); margin-top:3px; font-weight:600; } .wm-hero-login{ font-size:11.5px; font-weight:600; color:var(--text-muted); padding:4px 12px; border-radius:99px; background:var(--surface-1); border:1px solid var(--border); } .wm-hero-login.is-in{ color:var(--success); background:rgba(34,197,94,.12); border-color:transparent; } @media(max-width:620px){ .wm-hero{ padding:22px 20px; gap:16px; } .wm-hero-greet{ font-size:23px; } .wm-hero-aside{ flex-direction:row; width:100%; justify-content:space-between; align-items:center; } .wm-streak{ width:96px; height:96px; } } @media (prefers-reduced-motion: reduce){ .wm-hero-wave{ animation:none; } }