/* MugShotter — Pro theme overlay (2026-05-29 Owner spec). * * Layered AFTER styles.css + tactical.css. Modernises the legacy "tactical * command center" aesthetic into a cleaner navy-slate look closer to the * FirstWatch dashboard while keeping every existing class name, EJS * structure, and feature intact. Anything not redefined here falls through * to tactical.css; activate by adding class `tactical-theme` on * (already done in _layout.ejs when the user is signed in). * * Palette shift: * tactical.cyan #00E5FF → pro.accent #3b82f6 (FirstWatch blue) * tactical.void #0B0F19 → pro.bg #05080f (deeper navy) * tactical.panel #111827 → pro.panel #0a0f1a * tactical.surf #1A2435 → pro.surf #111827 * * Style shift: * * Tighter letter-spacing (was tactical/military, now SaaS-pro) * * Flat panels (was radial-gradient glow, now subtle 1px borders) * * Sidebar items: thinner padding, blue gradient hover, blue left-rail active * * Topbar: status chip, live clock, profile pill */ body.tactical-theme, body.tactical-theme.admin-theme { /* Re-bind the tactical custom properties to the pro palette so every downstream rule in tactical.css picks up the new colour automatically. */ --t-void: #05080f; --t-panel: #0a0f1a; --t-surface: #111827; --t-surface-2: #1a2032; --t-hairline: #1a2032; --t-hairline-strong: #2a3142; --t-cyan: #3b82f6; --t-cyan-soft: rgba(59, 130, 246, 0.16); --t-cyan-glow: rgba(59, 130, 246, 0.35); --t-blue: #60a5fa; --t-amber: #f59e0b; --t-amber-soft: rgba(245, 158, 11, 0.15); --t-amber-glow: rgba(245, 158, 11, 0.35); --t-crimson: #dc2626; --t-crimson-soft:rgba(220, 38, 38, 0.16); --t-crimson-glow:rgba(220, 38, 38, 0.4); --t-emerald: #22c55e; --t-emerald-soft:rgba(34, 197, 94, 0.14); --t-white: #e5e7eb; --t-muted: #94a3b8; --t-muted-dim: #6b7280; --t-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro", "Segoe UI", system-ui, sans-serif; --t-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace; /* Drop the glowy radial-gradient pattern — flat, professional. */ background: var(--t-void) !important; background-image: none !important; color: var(--t-white); font-family: var(--t-sans); letter-spacing: 0; font-size: 14px; line-height: 1.5; } /* ── TOPBAR ─────────────────────────────────────────────────────────── */ body.tactical-theme .topbar { background: linear-gradient(180deg, #0a0f1a 0%, #07101e 100%) !important; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--t-hairline-strong); padding: 0.625rem 1rem; min-height: 4rem; display: flex; align-items: center; gap: 0.875rem; } body.tactical-theme .topbar .brand { gap: 0.625rem; } body.tactical-theme .topbar .brand-mark { width: 36px; height: 36px; border-radius: 6px; box-shadow: 0 0 6px rgba(59, 130, 246, 0.35); } body.tactical-theme .brand-wordmark { font-weight: 700; letter-spacing: 1px; font-size: 0.95rem; text-transform: uppercase; /* Drop the gradient text — flat white reads cleaner at small sizes */ background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--t-white); } body.tactical-theme .topbar nav { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; } body.tactical-theme .topbar nav a, body.tactical-theme .topbar nav .topbar-meta { color: var(--t-muted); font-size: 0.825rem; letter-spacing: 0; padding: 0.4rem 0.625rem; border-radius: 6px; text-decoration: none; transition: color 120ms, background 120ms; } body.tactical-theme .topbar nav a:hover { background: #0f172a; color: var(--t-white); text-decoration: none; } /* The "signed in as owner" chip — keep tasteful, light. */ body.tactical-theme .topbar-meta { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); padding: 0.3rem 0.625rem !important; border-radius: 99px !important; font-size: 0.72rem !important; color: #86efac !important; } body.tactical-theme .topbar form.inline-form button.link { color: var(--t-muted); font-size: 0.825rem; padding: 0.4rem 0.625rem; border-radius: 6px; transition: background 120ms, color 120ms; } body.tactical-theme .topbar form.inline-form button.link:hover { background: #0f172a; color: var(--t-white); } /* ── LIVE CLOCK + STATUS CHIP (added in _layout.ejs) ──────────────────── */ body.tactical-theme .ms-clock { line-height: 1.1; padding: 0 0.25rem; } body.tactical-theme .ms-clock .time { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t-white); } body.tactical-theme .ms-clock .date { font-size: 0.7rem; color: var(--t-muted-dim); } body.tactical-theme .ms-status-chip { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); padding: 0.3rem 0.625rem; border-radius: 99px; font-size: 0.72rem; color: #86efac; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; } body.tactical-theme .ms-status-chip .pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: ms-pulse-green 1.4s infinite; } @keyframes ms-pulse-green { 0%, 100% { opacity: 1; box-shadow: 0 0 8px #22c55e; } 50% { opacity: 0.5; box-shadow: 0 0 14px #22c55e; } } body.tactical-theme .ms-profile-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 6px; text-decoration: none; color: inherit; transition: background 120ms; } body.tactical-theme .ms-profile-pill:hover { background: #0f172a; text-decoration: none; } body.tactical-theme .ms-profile-pill .who { text-align: right; line-height: 1.1; } body.tactical-theme .ms-profile-pill .who .name { font-size: 0.8rem; font-weight: 600; color: var(--t-white); } body.tactical-theme .ms-profile-pill .who .role { font-size: 0.62rem; color: #22c55e; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } body.tactical-theme .ms-profile-pill .avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: linear-gradient(135deg, #3b82f6, #1e40af); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; font-size: 0.825rem; } @media (max-width: 900px) { body.tactical-theme .ms-clock, body.tactical-theme .ms-status-chip { display: none; } } /* ── SIDEBAR ──────────────────────────────────────────────────────────── */ body.tactical-theme .sidebar { background: linear-gradient(180deg, #0a0f1a 0%, #060a13 100%); border-right: 1px solid var(--t-hairline-strong); padding: 0.75rem 0.625rem; width: 14rem; min-height: calc(100vh - 4rem); } body.tactical-theme .sidebar .t-section { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-muted-dim); font-weight: 700; padding: 0.75rem 0.75rem 0.4rem; } body.tactical-theme .sidebar .sb-link { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 6px; color: var(--t-muted); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: background 120ms, color 120ms; position: relative; border-left: 3px solid transparent; padding-left: calc(0.75rem - 3px); letter-spacing: 0; } body.tactical-theme .sidebar .sb-link:hover { background: #0f172a; color: var(--t-white); } body.tactical-theme .sidebar .sb-link.active { background: linear-gradient(90deg, rgba(59, 130, 246, 0.22), transparent); color: #fff; border-left-color: #3b82f6; } body.tactical-theme .sidebar .sb-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; opacity: 0.85; } body.tactical-theme .sidebar .sb-link.active .sb-icon { opacity: 1; color: #60a5fa; } body.tactical-theme .sidebar .sb-badge { margin-left: auto; background: #dc2626; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0 0.4rem; border-radius: 99px; min-width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; } body.tactical-theme .sidebar .sb-meta { margin-top: auto; padding: 0.75rem 0.5rem; border-top: 1px solid var(--t-hairline); font-size: 0.72rem; color: var(--t-muted-dim); } body.tactical-theme .sidebar .sb-meta code { background: transparent; color: var(--t-muted); font-size: 0.7rem; } /* ── ADMIN SHELL + MAIN CONTENT ──────────────────────────────────────── */ body.tactical-theme .admin-shell { display: grid; grid-template-columns: 14rem 1fr; min-height: calc(100vh - 4rem); } body.tactical-theme .admin-shell .admin-main, body.tactical-theme main.page { background: var(--t-void); padding: 1rem; } @media (max-width: 800px) { body.tactical-theme .admin-shell { grid-template-columns: 1fr; } body.tactical-theme .sidebar { display: none; } } /* ── CARDS + PANELS ──────────────────────────────────────────────────── */ body.tactical-theme .price-card, body.tactical-theme .feature-card, body.tactical-theme .dossier-section, body.tactical-theme .hero-mockup, body.tactical-theme .card, body.tactical-theme .panel { background: var(--t-panel); border: 1px solid var(--t-hairline); border-radius: 8px; box-shadow: none; } body.tactical-theme .price-card-feature { border-color: rgba(59, 130, 246, 0.35); box-shadow: 0 0 18px rgba(59, 130, 246, 0.08); } /* ── BUTTONS ─────────────────────────────────────────────────────────── */ body.tactical-theme .btn, body.tactical-theme button[type="submit"]:not(.link) { background: #2563eb; color: #fff; border: none; border-radius: 4px; padding: 0.55rem 1rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 120ms; letter-spacing: 0; } body.tactical-theme .btn:hover, body.tactical-theme button[type="submit"]:not(.link):hover { background: #1d4ed8; } body.tactical-theme .btn-primary, body.tactical-theme .btn.btn-primary { background: #2563eb; } body.tactical-theme .btn-primary:hover, body.tactical-theme .btn.btn-primary:hover { background: #1d4ed8; } body.tactical-theme .btn-ghost, body.tactical-theme .btn.btn-ghost { background: transparent; color: var(--t-muted); border: 1px solid var(--t-hairline-strong); } body.tactical-theme .btn-ghost:hover, body.tactical-theme .btn.btn-ghost:hover { background: #111827; color: var(--t-white); } body.tactical-theme .btn-lg { padding: 0.75rem 1.25rem; font-size: 0.95rem; } /* ── FORM FIELDS ─────────────────────────────────────────────────────── */ body.tactical-theme input[type="text"], body.tactical-theme input[type="email"], body.tactical-theme input[type="password"], body.tactical-theme input[type="tel"], body.tactical-theme input[type="number"], body.tactical-theme input[type="url"], body.tactical-theme input[type="search"], body.tactical-theme select, body.tactical-theme textarea { background: var(--t-panel); border: 1px solid var(--t-hairline-strong); border-radius: 4px; color: var(--t-white); font-size: 0.9rem; font-family: inherit; padding: 0.55rem 0.65rem; } body.tactical-theme input:focus, body.tactical-theme select:focus, body.tactical-theme textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); } body.tactical-theme label { font-size: 0.78rem; color: var(--t-muted); font-weight: 500; letter-spacing: 0; text-transform: none; } /* ── TABLES ──────────────────────────────────────────────────────────── */ body.tactical-theme table.data, body.tactical-theme table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } body.tactical-theme table.data thead th, body.tactical-theme table thead th { text-align: left; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--t-muted-dim); font-weight: 600; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--t-hairline-strong); background: transparent; } body.tactical-theme table.data tbody td, body.tactical-theme table tbody td { padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--t-hairline); vertical-align: middle; color: var(--t-white); } body.tactical-theme table.data tbody tr:hover, body.tactical-theme table tbody tr:hover { background: #0f172a; } /* ── HEADINGS + TYPOGRAPHY ──────────────────────────────────────────── */ body.tactical-theme h1 { font-size: 1.5rem; letter-spacing: 0; font-weight: 700; } body.tactical-theme h2 { font-size: 1.1rem; letter-spacing: 0; font-weight: 600; color: var(--t-white); } body.tactical-theme h3 { font-size: 0.95rem; font-weight: 600; color: var(--t-white); } body.tactical-theme .muted { color: var(--t-muted-dim); } body.tactical-theme code { background: var(--t-surface); color: #93c5fd; font-family: var(--t-mono); font-size: 0.85em; padding: 0.1em 0.35em; border-radius: 3px; } /* ── BADGES / PILLS ─────────────────────────────────────────────────── */ body.tactical-theme .pill, body.tactical-theme .dossier-esc { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; font-size: 0.72rem; border-radius: 99px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } body.tactical-theme .pill-green { background: rgba(34,197,94,0.16); color: #86efac; } body.tactical-theme .pill-slate { background: rgba(148,163,184,0.16); color: #cbd5e1; } body.tactical-theme .pill-amber { background: rgba(245,158,11,0.16); color: #fcd34d; } body.tactical-theme .pill-red { background: rgba(220,38,38,0.16); color: #fca5a5; } /* ── ALERTS / ERR / OK ───────────────────────────────────────────────── */ body.tactical-theme .err, body.tactical-theme .alert.error, body.tactical-theme .warn-box { background: rgba(220, 38, 38, 0.12); border: 1px solid rgba(220, 38, 38, 0.35); color: #fecaca; padding: 0.625rem 0.875rem; border-radius: 6px; } body.tactical-theme .ok, body.tactical-theme .alert.success { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.35); color: #d1fae5; padding: 0.625rem 0.875rem; border-radius: 6px; } /* ── 24-HR SUBSCRIPTION EXPIRY BANNER ────────────────────────────────── */ .ms-expiry-banner { display: flex; align-items: center; justify-content: center; gap: 0.625rem; padding: 0.5rem 1rem; background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.10)); border-bottom: 1px solid rgba(245, 158, 11, 0.45); color: #fcd34d; font-size: 0.825rem; font-weight: 500; text-align: center; position: relative; z-index: 100; } .ms-expiry-banner.is-expired { background: linear-gradient(180deg, rgba(220, 38, 38, 0.22), rgba(220, 38, 38, 0.12)); border-bottom-color: rgba(220, 38, 38, 0.5); color: #fecaca; } .ms-expiry-banner a { color: inherit; text-decoration: underline; font-weight: 600; } .ms-expiry-banner a:hover { text-decoration: none; } .ms-expiry-banner .ms-expiry-dismiss { background: transparent; border: 0; color: inherit; opacity: 0.7; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 0.25rem; } .ms-expiry-banner .ms-expiry-dismiss:hover { opacity: 1; } /* ── PAGE MAX-WIDTH (preserve existing 1400px wide-shell) ──────────── */ body.tactical-theme main.page { max-width: 1400px; margin: 1rem auto; padding: 0 1rem; }