/* Glass tokens are per-theme on purpose. A light palette needs a white tint and a light-catching edge; the dark recipe applied to a light background produces grey mud. See --glass-bg / --glass-edge / --glass-blur below. */ /* Theme variants - swapped via [data-theme] on . Light is the default (no attribute needed), matching the app's default-light requirement. */ :root, :root[data-theme="light"]{ --bg:#f5f7fb; --bg-alt:#eaeef5; --surface:#ffffff; --surface-2:#f2f5f9; --border:#dde3ee; --text:#101623; --text-dim:#4c5769; --text-faint:#828da0; --accent:#0f9d70; --accent-dim:#0c7d59; --accent-2:#2f6fe0; --warn:#a5670a; --danger:#c73349; --radius:14px; --ink-mark:#0d1117; --surface-blur:none; --body-gradient: radial-gradient(ellipse 70% 50% at 12% -8%, rgba(15,157,112,.10), transparent 60%), radial-gradient(ellipse 60% 45% at 92% 8%, rgba(47,111,224,.09), transparent 60%); --shadow:0 10px 30px rgba(20,30,60,.08); --glass-bg:rgba(255,255,255,.72); --glass-edge:rgba(255,255,255,.95); --glass-blur:blur(18px) saturate(140%); --glass-shadow:0 8px 28px rgba(20,30,60,.10); } :root[data-theme="dark"]{ --bg:#070b12; --bg-alt:#0c121c; --surface:#111827; --surface-2:#161f30; --border:#232d40; --text:#eef2f7; --text-dim:#9aa7bd; --text-faint:#5f6b82; --accent:#33d6a6; --accent-dim:#1f9d7a; --accent-2:#4f8cff; --warn:#f2b84b; --danger:#ef5f6b; --radius:14px; --ink-mark:#0d1117; --surface-blur:none; --body-gradient: radial-gradient(ellipse 75% 55% at 10% -10%, rgba(51,214,166,.13), transparent 58%), radial-gradient(ellipse 65% 50% at 95% 5%, rgba(90,184,255,.10), transparent 58%); --shadow:0 10px 40px rgba(0,0,0,.35); --glass-bg:rgba(23,32,50,.62); --glass-edge:rgba(255,255,255,.10); --glass-blur:blur(20px) saturate(150%); --glass-shadow:0 10px 34px rgba(0,0,0,.42); } :root[data-theme="night"]{ --bg:#050a1a; --bg-alt:#080f24; --surface:#0d1730; --surface-2:#122048; --border:#1e2b52; --text:#e7ecfb; --text-dim:#93a3cf; --text-faint:#5b6a99; --accent:#5b8cff; --accent-dim:#3f6bdb; --accent-2:#33d6a6; --warn:#f2b84b; --danger:#ff6b81; --radius:14px; --ink-mark:#0d1117; --surface-blur:none; --body-gradient:radial-gradient(ellipse 80% 50% at 50% -20%, rgba(91,140,255,.15), transparent); --shadow:0 10px 40px rgba(0,0,10,.5); --glass-bg:rgba(16,22,36,.64); --glass-edge:rgba(255,255,255,.09); --glass-blur:blur(20px) saturate(150%); --glass-shadow:0 10px 34px rgba(0,0,0,.5); } :root[data-theme="glass"]{ --bg:#241a3d; --bg-alt:#2a1f47; --surface:rgba(255,255,255,.14); --surface-2:rgba(255,255,255,.08); --border:rgba(255,255,255,.28); --text:#ffffff; --text-dim:rgba(255,255,255,.78); --text-faint:rgba(255,255,255,.52); --accent:#5eead4; --accent-dim:#2dd4bf; --accent-2:#93c5fd; --warn:#fcd34d; --danger:#fca5a5; --radius:18px; --ink-mark:#0d1117; --surface-blur:blur(22px) saturate(160%); --body-gradient: radial-gradient(circle at 15% 15%, rgba(94,234,212,.35), transparent 45%), radial-gradient(circle at 85% 20%, rgba(147,197,253,.35), transparent 45%), radial-gradient(circle at 50% 90%, rgba(232,121,249,.3), transparent 50%), linear-gradient(160deg, #2a1f47, #1c1330); --shadow:0 10px 40px rgba(0,0,0,.35); --glass-bg:rgba(255,255,255,.14); --glass-edge:rgba(255,255,255,.42); --glass-blur:blur(24px) saturate(170%); --glass-shadow:0 12px 42px rgba(0,0,0,.38); } html, body{background:var(--bg);} body{ background-image:var(--body-gradient); background-attachment:fixed; background-size:cover; transition:background-color .25s ease, color .25s ease; } .topbar, .auth-card, .dashboard-view .monitor-card, .billing-card, .team-card, .add-monitor-card, .status-row, .client-row, .team-row, .faq-item, .price-card, .feature-card, .comparison-table-wrap, .mock-dashboard, .who-card, .status-page .status-row{ backdrop-filter:var(--surface-blur); -webkit-backdrop-filter:var(--surface-blur); } /* ========================================================================= Themes Dark is the default and the product's identity. The other four are complete, deliberate palettes rather than hue shifts of the same one - each sets its own ground, surfaces, borders and accent so contrast holds throughout, not just on the buttons. ========================================================================= */ /* Midnight - deep navy with an ice-blue accent. Cooler and calmer than the default; reads well on a wall display in a dim room. */ :root[data-theme="midnight"]{ --bg:#080d1a; --bg-alt:#0d1526; --surface:#121c33; --surface-2:#182444; --border:#25355c; --text:#eaf0ff; --text-dim:#a3b2d4; --text-faint:#6b7ca6; --accent:#5ab8ff; --accent-dim:#2f8fdb; --accent-2:#8f7dff; --warn:#ffc65c; --danger:#ff6b7d; --radius:14px; --ink-mark:#0d1117; --glass-bg:rgba(18,20,38,.62); --glass-edge:rgba(255,255,255,.10); --glass-blur:blur(20px) saturate(155%); --glass-shadow:0 10px 34px rgba(0,0,0,.5); --body-gradient: radial-gradient(ellipse 75% 55% at 8% -10%, rgba(129,140,248,.16), transparent 58%), radial-gradient(ellipse 65% 50% at 96% 8%, rgba(167,139,250,.12), transparent 58%); } /* Graphite - neutral greys, no colour cast, with a single amber accent. The one to pick if brand colour anywhere near the data is a distraction. */ :root[data-theme="graphite"]{ --bg:#101113; --bg-alt:#17191c; --surface:#1c1f23; --surface-2:#24282d; --border:#33383f; --text:#f2f3f5; --text-dim:#a8adb5; --text-faint:#71777f; --accent:#f5a524; --accent-dim:#c07d10; --accent-2:#7dd3fc; --warn:#facc15; --danger:#f87171; --radius:12px; --ink-mark:#0d1117; --glass-bg:rgba(30,32,36,.62); --glass-edge:rgba(255,255,255,.08); --glass-blur:blur(18px) saturate(130%); --glass-shadow:0 10px 30px rgba(0,0,0,.45); --body-gradient: radial-gradient(ellipse 80% 55% at 50% -14%, rgba(255,255,255,.055), transparent 62%); } /* Aurora - near-black plum with a violet/teal pairing. The most decorative of the set; still holds AA contrast on body text. */ :root[data-theme="aurora"]{ --bg:#0b0714; --bg-alt:#120c1f; --surface:#191029; --surface-2:#221639; --border:#33224f; --text:#f4eeff; --text-dim:#b9a8d6; --text-faint:#7f6ea0; --accent:#c084fc; --accent-dim:#9333ea; --accent-2:#5eead4; --warn:#fbbf24; --danger:#fb7185; --radius:16px; --ink-mark:#0d1117; --glass-bg:rgba(20,28,44,.58); --glass-edge:rgba(255,255,255,.12); --glass-blur:blur(22px) saturate(165%); --glass-shadow:0 12px 38px rgba(0,0,0,.45); --body-gradient: radial-gradient(ellipse 70% 50% at 8% -8%, rgba(52,211,153,.17), transparent 55%), radial-gradient(ellipse 60% 45% at 96% 6%, rgba(56,189,248,.15), transparent 55%), radial-gradient(ellipse 70% 40% at 55% 108%, rgba(168,85,247,.13), transparent 58%); } /* Daylight - the only light theme. Paper-white surfaces, a deep green accent dark enough to stay legible on white, and borders strong enough that cards still read as cards. */ :root[data-theme="daylight"]{ --bg:#f5f7fa; --bg-alt:#ffffff; --surface:#ffffff; --surface-2:#eef1f6; --border:#d8dee8; --text:#0f1720; --text-dim:#4a5566; --text-faint:#78849a; --accent:#0f9d70; --accent-dim:#0a7a56; --accent-2:#2563eb; --warn:#b45309; --danger:#dc2626; --radius:14px; --ink-mark:#0d1117; --glass-bg:rgba(255,255,255,.70); --glass-edge:rgba(255,255,255,.95); --glass-blur:blur(18px) saturate(140%); --glass-shadow:0 8px 28px rgba(20,30,60,.10); --body-gradient: radial-gradient(ellipse 70% 50% at 12% -8%, rgba(15,157,112,.09), transparent 60%), radial-gradient(ellipse 60% 45% at 92% 8%, rgba(47,111,224,.08), transparent 60%); } /* On the light theme a few dark-theme assumptions need correcting: filled accent buttons want light text, and the translucent chip backgrounds that were tuned against a dark ground need more weight. */ :root[data-theme="daylight"] .btn-primary, :root[data-theme="daylight"] .tb-avatar, :root[data-theme="daylight"] .alias-filter button.active, :root[data-theme="daylight"] .portal-icon{ color:#ffffff; } :root[data-theme="daylight"] .status-pill, :root[data-theme="daylight"] .perm-tag, :root[data-theme="daylight"] .tb-chip, :root[data-theme="daylight"] .role-pill{ background:color-mix(in srgb, var(--accent) 13%, #ffffff); } :root[data-theme="daylight"] .app-topbar{ box-shadow:0 1px 3px rgba(15,23,32,.06); } /* ========================================================================= Density and motion Both are per-person preferences stored in this browser. They are real overrides, not decoration: compact genuinely reclaims vertical space, and reduced motion genuinely stops everything moving. ========================================================================= */ :root[data-density="compact"]{ --radius:10px; } :root[data-density="compact"] .container, :root[data-density="compact"] .admin-wrap, :root[data-density="compact"] .inbox-wrap, :root[data-density="compact"] .settings-shell{ padding-top:22px; padding-bottom:44px; } :root[data-density="compact"] .card, :root[data-density="compact"] .admin-section, :root[data-density="compact"] .billing-card, :root[data-density="compact"] .team-card, :root[data-density="compact"] .user-summary, :root[data-density="compact"] .thread-detail{ padding:15px 17px; margin-bottom:10px; } :root[data-density="compact"] .monitor-card{padding:13px 15px;} :root[data-density="compact"] .monitor-card-head{margin-bottom:10px;} :root[data-density="compact"] .stat-tile{padding:12px 14px;} :root[data-density="compact"] .list-item, :root[data-density="compact"] .team-row, :root[data-density="compact"] .admin-row, :root[data-density="compact"] .maint-row{padding:8px 12px; margin-bottom:5px;} :root[data-density="compact"] .row{padding:9px 0;} :root[data-density="compact"] .org-tab{padding:8px 13px;} :root[data-density="compact"] .tb-inner{height:52px;} :root[data-density="compact"] .thread-item{padding:9px 13px;} :root[data-density="compact"] h1{font-size:1.5rem;} :root[data-density="compact"] .settings-title h1, :root[data-density="compact"] .admin-head h1{font-size:1.45rem;} /* Honour the explicit toggle and the operating system setting equally. */ :root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after{ transition-duration:0s !important; animation-duration:0s !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; } :root[data-motion="reduced"] .monitor-card:hover, :root[data-motion="reduced"] .org-card:hover, :root[data-motion="reduced"] .plan-card:hover, :root[data-motion="reduced"] .btn:hover{ transform:none !important; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }