/* ═══════════════════════════════════════════ SERVERVISOR — Global Stylesheet ═══════════════════════════════════════════ */ :root { --navy: #0f1c2e; --navy-mid: #162540; --navy-card: #1a2d47; --blue: #2a5fa5; --ice: #cce4ff; --ice-light: #e8f2fc; --orange: #f59e2b; --white: #ffffff; --ping-green: #22c55e; --ping-red: #ef4444; --ping-yellow: #eab308; --ping-grey: #64748b; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; /* RGB triplets for rgba() theming — rgba(var(--card-rgb), X) */ --card-rgb: 255, 255, 255; /* dark: white overlays on dark bg */ --border-rgb: 184, 212, 240; /* dark: ice-blue border tint */ --navy-rgb: 15, 28, 46; /* dark: navy for rgba usage */ } /* ── Light theme ───────────────────────────────────────────────────────── Applied by JS via localStorage preference. Flash-prevention script in header.php sets data-theme before first paint. ──────────────────────────────────────────────────────────────────────── */ [data-theme="light"] { --navy: #f5f7fa; --navy-mid: #e8edf4; --navy-card: #ffffff; --blue: #2a5fa5; --ice: #1e3a5f; --ice-light: #2a4d74; --white: #0d1b2e; --card-rgb: 0, 0, 0; /* light: dark overlays on light bg */ --border-rgb: 15, 28, 46; /* light: navy border tint */ --navy-rgb: 245, 247, 250; color-scheme: light; } /* ── Light mode: animated background ── */ [data-theme="light"] .bg { background: radial-gradient(circle at 28% 28%, rgba(42, 95, 165, 0.10), transparent 34%), radial-gradient(circle at 78% 38%, rgba(245, 158, 43, 0.06), transparent 28%), linear-gradient(135deg, #eaf0f8 0%, #f5f7fa 48%, #dce8f2 100%); } [data-theme="light"] .ring { border-color: rgba(var(--navy-rgb),0.06); } /* ── Light mode: site-alert info banner ── */ [data-theme="light"] .site-alert.site-alert-info { background: #dbeafe; border-bottom-color: #bfdbfe; color: #1e3a5f; } [data-theme="light"] .site-alert.site-alert-info .site-alert-cta { background: rgba(30,58,95,0.1); color: #1e3a5f; border-color: rgba(30,58,95,0.25); } /* ── Light mode: modals ── */ [data-theme="light"] .sv-modal { background: #ffffff; border-color: rgba(var(--navy-rgb),0.12); box-shadow: 0 20px 60px rgba(var(--navy-rgb),0.18); } /* ── Light mode: dropdowns & menus ── */ [data-theme="light"] .user-dropdown, [data-theme="light"] .row-menu { background: #ffffff; border-color: rgba(15,28,46,0.12); box-shadow: 0 16px 48px rgba(15,28,46,0.14); } /* The dropdown sits inside .site-header which has a dark variable scope. Reset to light-palette values so text reads correctly on the white card. */ [data-theme="light"] .user-dropdown { --ice: #1e3a5f; --ice-light: #2a4d74; --white: #0d1b2e; --card-rgb: 0, 0, 0; --border-rgb: 15, 28, 46; --navy-rgb: 245, 247, 250; } /* ── Light mode: toasts ── */ [data-theme="light"] .sv-toast { background: #ffffff; border-color: rgba(var(--navy-rgb),0.12); box-shadow: 0 8px 24px rgba(var(--navy-rgb),0.12); } /* ── Light mode: code blocks ── */ [data-theme="light"] .verify-code-block { background: #f0f4f8; border-color: rgba(var(--navy-rgb),0.12); } /* ── Light mode: pricing card base ── */ [data-theme="light"] .pricing-card { background: #ffffff; } /* ── Light mode: priority-select & select options ── */ [data-theme="light"] .priority-select option, [data-theme="light"] .sv-select-sm option { background: #ffffff; color: #0d1b2e; } /* Logo: no filter needed — header stays dark in light mode (see scoped vars below) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: var(--navy); color: var(--white); min-height: 100vh; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: 'Plus Jakarta Sans', sans-serif; cursor: pointer; } input, textarea, select { font-family: 'Plus Jakarta Sans', sans-serif; } /* ── ANIMATED BACKGROUND ── */ .bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 28% 28%, rgba(42, 86, 135, 0.28), transparent 34%), radial-gradient(circle at 78% 38%, rgba(255, 157, 36, 0.08), transparent 28%), linear-gradient(135deg, #0b1624 0%, #0f2238 48%, #091321 100%); } /* Rings render above the background */ .bg > * { position: relative; z-index: 1; } .bg-circles { position: absolute; inset: 0; } .ring { position: absolute; border-radius: 50%; border: 1px solid rgba(var(--border-rgb), 0.08); animation: expandRing 60s linear infinite; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; } .ring:nth-child(1) { width: 300px; height: 300px; animation-delay: 0s; } .ring:nth-child(2) { width: 600px; height: 600px; animation-delay: 20s; } .ring:nth-child(3) { width: 900px; height: 900px; animation-delay: 40s; } .ring:nth-child(4) { width: 1200px; height: 1200px; animation-delay: -20s; } .ring:nth-child(5) { width: 1600px; height: 1600px; animation-delay: -40s; } @keyframes expandRing { 0% { transform: translate(-50%,-50%) scale(0); opacity:0.85; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 0; } } .dot { position: absolute; border-radius: 50%; background: rgba(var(--border-rgb), 0.15); animation: floatDot linear infinite; } @keyframes floatDot { 0% { transform: translateY(0px) rotate(0deg); opacity:0.35; } 50% { opacity:0.85; } 100% { transform: translateY(-80px) rotate(180deg); opacity: 0; } } /* ── SHARED LAYOUT ── */ .page-wrap { position: relative; z-index: 1; min-height: 100vh; } /* ── HEADER ── */ .site-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 62px; background: rgba(var(--navy-rgb), 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--border-rgb),0.1); } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ping-green); box-shadow: 0 0 8px var(--ping-green); animation: pulse 2s ease infinite; flex-shrink: 0; } .logo-name { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.01em; color: var(--white); } .logo-name span { color: var(--orange); } /* ── SITE NAV ── */ .site-nav { display: flex; align-items: center; gap: 2px; } .site-nav a { font-size: 0.83rem; font-weight: 700; color: var(--ice); opacity:0.85; padding: 6px 11px; border-radius: 8px; transition: opacity 0.15s, background 0.15s; white-space: nowrap; } .site-nav a:hover { opacity: 0.9; background: rgba(var(--card-rgb),0.06); } .site-nav a.active { opacity: 1; background: rgba(var(--card-rgb),0.08); } .site-nav a.nav-upsell { opacity: 0.45; font-weight: 500; } .site-nav a.nav-upsell:hover { opacity: 0.65; } /* ── HEADER RIGHT / USER MENU ── */ .header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .user-menu-wrap { position: relative; } .user-pill { display: flex; align-items: center; gap: 7px; background: rgba(var(--card-rgb),0.06); border: 1px solid rgba(var(--border-rgb),0.15); border-radius: 100px; padding: 5px 12px 5px 6px; font-size: 0.82rem; font-weight: 700; color: var(--ice); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .user-pill:hover { background: rgba(var(--card-rgb),0.1); border-color: rgba(var(--border-rgb),0.28); } .user-avatar { position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 800; color: var(--white); flex-shrink: 0; } /* Notification badge overlaid on the avatar — appears when there are unread notices */ .user-pill-badge { position: absolute; top: -4px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 100px; background: var(--ping-red); color: var(--white); font-size: 0.58rem; font-weight: 800; line-height: 1; display: flex; align-items: center; justify-content: center; pointer-events: none; border: 1.5px solid var(--navy-card); box-sizing: border-box; } .user-name { color: var(--ice); } .user-chevron { color: var(--ice); opacity:0.85; transition: transform 0.2s; flex-shrink: 0; } .user-pill[aria-expanded="true"] .user-chevron { transform: rotate(180deg); } /* ── USER DROPDOWN ── */ .user-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: #1a2d47; border: 1px solid rgba(var(--border-rgb),0.15); border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(0,0,0,0.4); overflow: hidden; z-index: 200; animation: fadeIn 0.15s ease; } .user-dropdown.open { display: block; } .user-dropdown-header { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: rgba(var(--card-rgb),0.03); } .user-dropdown-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 800; color: var(--white); flex-shrink: 0; } .user-dropdown-name { font-size: 0.88rem; font-weight: 800; color: var(--white); } .user-dropdown-email { font-size: 0.75rem; color: var(--ice); opacity:0.85; margin-top: 1px; } .user-dropdown-divider { height: 1px; background: rgba(var(--border-rgb),0.08); margin: 4px 0; } .user-dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.85rem; font-weight: 700; color: var(--ice); opacity:0.85; transition: background 0.12s, opacity 0.12s; cursor: pointer; } .user-dropdown-item:hover { background: rgba(var(--card-rgb),0.06); opacity: 1; } .user-dropdown-item.active { opacity: 1; color: var(--white); } .user-dropdown-item svg { opacity:0.85; flex-shrink: 0; } .user-dropdown-item-danger { color: #fca5a5; } .user-dropdown-item-danger:hover { background: rgba(239,68,68,0.1); opacity: 1; } /* Mobile nav overlays always stay dark regardless of theme */ [data-theme="light"] .app-mobile-nav { background: #0f1c2e; } [data-theme="light"] .app-mobile-nav-links a { color: #b8d4f0; } [data-theme="light"] .app-mobile-nav-links a.active { color: var(--orange); } [data-theme="light"] .app-nav-close { color: #b8d4f0; } [data-theme="light"] .pub-mobile-nav { background: #0f1c2e; } [data-theme="light"] .pub-mobile-nav-links a { color: #b8d4f0; } [data-theme="light"] .pub-mobile-nav-links a.active { color: var(--orange); } [data-theme="light"] .pub-nav-close { color: #b8d4f0; } [data-theme="light"] .pub-mobile-nav-actions .sv-btn-secondary { color: var(--orange); border-color: rgba(245,158,43,0.45); } [data-theme="light"] .pub-mobile-nav-actions .sv-btn-secondary:hover { background: rgba(245,158,43,0.08); border-color: var(--orange); } /* App mobile nav: company section separator + links */ .app-mobile-nav-divider { height: 1px; background: rgba(var(--border-rgb), 0.15); margin: 8px 16px; } .app-mobile-nav-company { opacity: 0.65; } [data-theme="light"] .app-mobile-nav-divider { background: rgba(var(--border-rgb), 0.25); } /* ── FOOTER ── */ .site-footer { position: relative; z-index: 1; border-top: 1px solid rgba(var(--border-rgb),0.08); padding: 24px 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-logo { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 800; color: var(--ice); opacity:0.85; } .footer-links { display: flex; gap: 20px; } .footer-links a { font-size: 0.78rem; font-weight: 600; color: var(--ice); opacity: 0.35; transition: opacity 0.15s; } .footer-links a:hover { opacity:0.85; } /* ── SHARED FORM CONTROLS ── */ .sv-input { background: rgba(var(--card-rgb),0.07); border: 1px solid rgba(var(--border-rgb),0.2); border-radius: var(--radius-md); padding: 11px 16px; font-size: 0.95rem; color: var(--white); outline: none; transition: border-color 0.2s, background 0.2s; width: 100%; } .sv-input::placeholder { color: rgba(var(--border-rgb),0.35); } .sv-input:focus { border-color: rgba(var(--border-rgb),0.5); background: rgba(var(--card-rgb),0.1); } textarea.sv-input { resize: vertical; min-height: 100px; line-height: 1.6; } .sv-select { appearance: none; -webkit-appearance: none; background: rgba(var(--card-rgb),0.07) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8d4f0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center; border: 1px solid rgba(var(--border-rgb),0.2); border-radius: var(--radius-md); color: var(--white); font-size: 0.95rem; padding: 11px 40px 11px 16px; transition: border-color 0.2s, background 0.2s; width: 100%; cursor: pointer; } .sv-select:focus { outline: none; border-color: rgba(var(--border-rgb),0.5); background-color: rgba(var(--card-rgb),0.1); } .sv-select option { background: var(--navy-card); color: var(--white); } .sv-btn { display: inline-flex; align-items: center; gap: 7px; border: none; border-radius: var(--radius-md); padding: 11px 20px; font-size: 0.9rem; font-weight: 800; transition: transform 0.15s, box-shadow 0.15s, background 0.15s, opacity 0.15s; white-space: nowrap; } .sv-btn:hover { transform: translateY(-1px); } .sv-btn:active { transform: translateY(0); } .sv-btn:disabled { opacity:0.85; cursor: not-allowed; transform: none; } .sv-btn-primary { background: var(--orange); color: var(--navy); box-shadow: 0 4px 16px rgba(245,158,43,0.3); } .sv-btn-primary:hover { background: #fbbf24; box-shadow: 0 6px 20px rgba(245,158,43,0.45); } .sv-btn-secondary { background: transparent; color: var(--orange); border: 1.5px solid rgba(245,158,43,0.45); } .sv-btn-secondary:hover { background: rgba(245,158,43,0.08); border-color: var(--orange); } .sv-btn-danger { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.25); } .sv-btn-danger:hover { background: rgba(239,68,68,0.25); } .sv-btn-ghost { background: transparent; color: var(--ice); opacity:0.85; padding: 8px 10px; } .sv-btn-ghost:hover { opacity: 1; background: rgba(var(--card-rgb),0.07); } /* ── CARDS ── */ .sv-card { background: rgba(var(--card-rgb),0.09); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-xl); padding: 24px; } /* ── EXPANDABLE CARD ── */ /* Collapsible sv-card variant. Add class="sv-card billing-expand" to the card, then use billing-expand-trigger / billing-expand-body / billing-expand-icon inside it. toggleExpandCard() / expandCard() in billing.php handle the JS. */ .billing-expand-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: none; padding: 18px 20px; cursor: pointer; text-align: left; gap: 16px; color: var(--white); border-radius: inherit; } .billing-expand-trigger:hover { background: rgba(255,255,255,0.025); } .billing-expand-trigger[aria-expanded="true"] .billing-expand-cta { display: none; } .billing-expand-title { font-size: 1rem; font-weight: 700; color: var(--white); margin-bottom: 2px; } .billing-expand-trigger-info { font-size: 0.82rem; color: var(--ice); line-height: 1.4; } .billing-expand-icon { transition: transform 0.2s; flex-shrink: 0; color: var(--ice); width: 22px; height: 22px; } .billing-expand-body { padding: 0 20px 20px; border-top: 1px solid rgba(var(--border-rgb), 0.07); } /* Pull handle — centred pill at the bottom of a .billing-expand card. When collapsed it sits directly below the trigger header; when expanded it sits below the body content. Always rendered; acts as a secondary click/tap target for toggling the card. Three-dot variant: the ::after pseudo-element is the centre dot; box-shadow projects the side dots. */ .sv-expand-handle { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 20px; margin: 0 auto 6px; cursor: pointer; transition: opacity 0.15s; background: rgba(var(--border-rgb), 0.08); border-radius: 20px; opacity: 0.55; } .sv-expand-handle::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--ice); box-shadow: -9px 0 0 var(--ice), 9px 0 0 var(--ice); } .billing-expand:hover .sv-expand-handle { opacity: 0.72; } /* billing-expand resets sv-card padding — trigger/body manage their own */ .billing-expand { padding: 0; } /* ── SECTION LABEL ── */ .sv-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); opacity:0.85; margin-bottom: 10px; } /* ── STATUS BADGES ── */ .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; } .badge-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .badge-up { background: rgba(34,197,94,0.15); color: #4ade80; } .badge-up .badge-dot { background: var(--ping-green); box-shadow: 0 0 5px var(--ping-green); } .badge-down { background: rgba(239,68,68,0.15); color: #f87171; } .badge-down .badge-dot { background: var(--ping-red); } .badge-warn { background: rgba(234,179,8,0.15); color: #fde047; } .badge-warn .badge-dot { background: var(--ping-yellow); } .badge-slow { background: rgba(234,179,8,0.15); color: #eab308; } .badge-slow .badge-dot { background: #eab308; } .badge-degraded { background: rgba(249,115,22,0.15); color: #f97316; } .badge-degraded .badge-dot { background: #f97316; } .badge-off { background: rgba(100,116,139,0.15); color: #94a3b8; } .badge-off .badge-dot { background: var(--ping-grey); } .badge-pending { background: rgba(42,95,165,0.2); color: var(--ice); } .badge-pending .badge-dot { background: var(--blue); animation: pulse 1.5s ease infinite; } /* ── INCIDENT PILL (monitor list row) ── */ /* Solid red + white — readable on dark rows, light rows, AND red-tinted down rows */ .incident-pill { display: inline-flex; align-items: center; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; background: #dc2626; color: #ffffff; padding: 2px 7px; border-radius: 100px; text-decoration: none; white-space: nowrap; line-height: 1.5; } .incident-pill:hover { background: #b91c1c; color: #ffffff; } /* ── MONITOR SUB-TYPE LABELS (TCP / Ping / API) ── */ .sub-type--tcp { color: #c4b5fd; font-weight: 700; } /* light purple */ .sub-type--ping { color: #6ee7b7; font-weight: 700; } /* light green */ .sub-type--api { color: #93c5fd; font-weight: 700; } /* light blue */ /* ── TOGGLE SWITCH ── */ .sv-toggle { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; } .sv-toggle input { opacity: 0; width: 0; height: 0; } .sv-toggle-slider { position: absolute; inset: 0; background: rgba(100,116,139,0.4); border-radius: 100px; transition: background 0.2s; cursor: pointer; } .sv-toggle-slider::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: var(--white); border-radius: 50%; transition: transform 0.2s; } .sv-toggle input:checked + .sv-toggle-slider { background: var(--ping-green); } .sv-toggle input:checked + .sv-toggle-slider::before { transform: translateX(18px); } /* ── ANIMATIONS ── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 6px currentColor; } 50% { box-shadow: 0 0 14px currentColor; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-up { animation: fadeUp 0.4s ease both; } /* ── LOGO BADGE (landing page) ── */ .logo-badge { display: flex; align-items: center; gap: 10px; background: rgba(var(--card-rgb),0.05); border: 1px solid rgba(var(--border-rgb),0.2); border-radius: 100px; padding: 8px 20px 8px 12px; margin-bottom: 40px; animation: fadeUp 0.6s ease both; } .logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ping-green); box-shadow: 0 0 8px var(--ping-green); animation: pulse 2s ease infinite; } .logo-text { font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ice); } /* ── App hamburger toggle (mobile only) ──── */ .app-nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; padding: 8px; cursor: pointer; color: var(--ice); border-radius: 8px; transition: background 0.15s; flex-shrink: 0; } .app-nav-toggle:hover { background: rgba(var(--card-rgb),0.07); } /* ── App mobile nav overlay ──────────────── */ .app-mobile-nav { position: fixed; inset: 0; z-index: 200; background: var(--navy); display: flex; flex-direction: column; padding: 0 24px 40px; transform: translateY(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); } .app-mobile-nav--open { transform: translateY(0); } .app-mobile-nav-bar { display: flex; align-items: center; justify-content: space-between; height: 62px; flex-shrink: 0; border-bottom: 1px solid rgba(var(--border-rgb),0.1); } .app-nav-close { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 8px; cursor: pointer; color: var(--ice); border-radius: 8px; transition: background 0.15s; } .app-nav-close:hover { background: rgba(var(--card-rgb),0.07); } .app-mobile-nav-links { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; overflow-y: auto; } .app-mobile-nav-links a { font-size: 1.35rem; font-weight: 700; color: var(--ice); opacity: 0.8; padding: 14px 8px; border-radius: 10px; text-decoration: none; transition: opacity 0.15s, background 0.15s; border-bottom: 1px solid rgba(var(--border-rgb),0.06); display: flex; align-items: center; gap: 10px; } .app-mobile-nav-links a:last-child { border-bottom: none; } .app-mobile-nav-links a:hover { opacity: 1; } .app-mobile-nav-links a.active { opacity: 1; color: var(--orange); } .app-mobile-nav-links a.nav-upsell { opacity: 0.35; font-weight: 500; } .app-mobile-nav-links .nav-badge { font-size: 0.7rem; padding: 2px 7px; } /* ── RESPONSIVE ── */ @media (max-width: 768px) { .site-header { padding: 0 24px; } .site-header nav { display: none; } .site-footer { padding: 20px 16px; flex-direction: column; align-items: flex-start; } .app-nav-toggle { display: flex; } } /* ═══════════════════════════════════════════ DASHBOARD STYLES ═══════════════════════════════════════════ */ .dash-wrap { max-width: 1200px; margin: 0 auto; padding: 32px 32px 64px; display: flex; flex-direction: column; gap: 20px; } /* ── Top bar ── */ .dash-topbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .dash-title { font-family: 'DM Sans', sans-serif; font-size: 1.8rem; font-weight: 900; letter-spacing: -0.03em; color: var(--white); } .dash-subtitle { font-size: 1rem; color: var(--ice); margin-top: 4px; } .dash-topbar-actions { display: flex; gap: 8px; } /* ── Page Hero (chart left + stats right) ── */ .page-hero { display: grid; grid-template-columns: 1fr 280px; gap: 0; border-radius: var(--radius-lg, 12px); border: 1px solid rgba(184,212,240,0.10); overflow: hidden; min-height: 160px; } .page-hero-chart { padding: 20px 24px 18px; display: flex; flex-direction: column; gap: 8px; } .page-hero-chart-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; opacity: 0.5; text-transform: uppercase; } .page-hero-sparkline { width: 100%; height: 100px; display: block; object-fit: fill; flex: 1; } .page-hero-chart-sublabel { font-size: 0.7rem; opacity: 0.45; } .page-hero-stats { display: grid; grid-template-columns: 1fr 1fr; /* Single vertical rule separating the stats panel from the chart */ border-left: 1px solid rgba(184,212,240,0.12); } .page-hero-stat { padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; justify-content: center; /* No horizontal rules between rows — cleaner than a full grid table */ } /* Single vertical rule between the two stat columns */ .page-hero-stat:nth-child(odd) { border-right: 1px solid rgba(184,212,240,0.12); } /* Horizontal mid-rule: a single line between the two rows */ .page-hero-stat:nth-child(1), .page-hero-stat:nth-child(2) { border-bottom: 1px solid rgba(184,212,240,0.09); } .page-hero-stat-val { font-family: 'DM Sans', sans-serif; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--white); } .page-hero-stat-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.55; color: var(--ice); } .page-hero-stat-sub { font-size: 0.68rem; opacity: 0.40; color: var(--ice); margin-top: 1px; } /* State variants */ .page-hero-alert { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.25); } .page-hero-alert .page-hero-chart-label { color: #f87171; opacity: 1; } .page-hero-alert .page-hero-stats { background: rgba(239,68,68,0.04); } .page-hero-ok { background: rgba(34,197,94,0.05); border-color: rgba(34,197,94,0.20); } .page-hero-ok .page-hero-stats { background: rgba(34,197,94,0.03); } .page-hero-warn { background: rgba(245,158,43,0.06); border-color: rgba(245,158,43,0.25); } .page-hero-warn .page-hero-stats { background: rgba(245,158,43,0.04); } /* Stat value colours */ .page-hero-stat-alert { color: #f87171; } .page-hero-stat-ok { color: #4ade80; } .page-hero-stat-warn { color: var(--orange); font-size: 1.1rem; } /* Light mode */ [data-theme="light"] .page-hero-alert { background: rgba(239,68,68,0.05); } [data-theme="light"] .page-hero-alert .page-hero-stats { background: rgba(239,68,68,0.03); } [data-theme="light"] .page-hero-ok { background: rgba(34,197,94,0.04); } [data-theme="light"] .page-hero-ok .page-hero-stats { background: rgba(34,197,94,0.02); } [data-theme="light"] .page-hero-warn { background: rgba(245,158,43,0.05); } [data-theme="light"] .page-hero-warn .page-hero-stats { background: rgba(245,158,43,0.03); } [data-theme="light"] .page-hero-stat-label, [data-theme="light"] .page-hero-stat-sub { color: var(--ice); } /* Stats-only variant (no chart panel — insights page) */ /* Two-class selector beats the one-class .page-hero-stats base rule */ .page-hero--stats-only { grid-template-columns: 1fr; min-height: 0; } .page-hero--stats-only .page-hero-stats { grid-template-columns: repeat(4, 1fr); border-left: none; } .page-hero--stats-only .page-hero-stat { border-bottom: none; border-right: none; padding: 16px 22px; min-width: 0; /* prevent content from forcing column width wider than 1fr */ } .page-hero--stats-only .page-hero-stat:nth-child(1), .page-hero--stats-only .page-hero-stat:nth-child(2) { border-bottom: none; } .page-hero--stats-only .page-hero-stat:not(:last-child) { border-right: 1px solid rgba(184,212,240,0.12); } /* Responsive */ @media (max-width: 700px) { .page-hero { grid-template-columns: 1fr; } .page-hero-stats { border-left: none; border-top: 1px solid rgba(184,212,240,0.09); } .page-hero--stats-only .page-hero-stats { grid-template-columns: repeat(2, 1fr); } .page-hero--stats-only .page-hero-stat:nth-child(odd) { border-right: 1px solid rgba(184,212,240,0.12); } .page-hero--stats-only .page-hero-stat:nth-child(1), .page-hero--stats-only .page-hero-stat:nth-child(2) { border-bottom: 1px solid rgba(184,212,240,0.09); } .page-hero--stats-only .page-hero-stat:nth-child(even) { border-right: none; } } /* ── Summary cards ── */ .summary-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .summary-card { position: relative; background: rgba(var(--card-rgb),0.09); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-lg); padding: 22px 16px 14px; display: flex; flex-direction: row; align-items: center; gap: 12px; min-width: 0; } .summary-card[onclick] { cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .summary-card[onclick]:hover { background: rgba(var(--card-rgb),0.18); border-color: rgba(var(--border-rgb),0.28); transform: translateY(-1px); } .summary-card[onclick]:active { transform: translateY(0); } .summary-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .summary-card-pill { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; background: #1a2d47; color: #e8edf4; border-radius: 20px; padding: 3px 11px; white-space: nowrap; } /* Green — all clear */ .summary-card-up { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.07); } .summary-card-up .summary-card-pill { background: #22c55e; color: #0a1628; } /* Orange — needs attention */ .summary-card-warn { border-color: rgba(245,158,43,0.4); background: rgba(245,158,43,0.08); } .summary-card-warn .summary-card-pill { background: var(--orange); color: #0a1628; } /* Red — action required */ .summary-card-alert { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.09); } .summary-card-alert .summary-card-pill { background: #ef4444; color: #fff; } .summary-icon { line-height: 1; } .summary-icon img { height: 36px; width: auto; display: block; margin: 0 auto; } .summary-val { font-family: 'DM Sans', sans-serif; font-size: 1.9rem; font-weight: 800; line-height: 1; color: var(--white); } .summary-label { font-size: 0.72rem; font-weight: 600; color: var(--ice); opacity:0.85; } .summary-label-warn { color: var(--orange); opacity: 1; font-weight: 700; } .summary-label-alert { color: #f87171; opacity: 1; font-weight: 700; margin-left: 4px; } .summary-sublabel { font-size: 0.68rem; color: var(--ice); opacity: 0.5; margin-top: 1px; } .summary-action-link { font-size: 0.68rem; font-weight: 700; color: #f87171; text-decoration: none; margin-top: 3px; opacity: 0.9; } .summary-action-link:hover { opacity: 1; text-decoration: underline; } /* ── Incident timeline (expandable row) ── */ .inc-chevron-cell { width: 32px; padding: 0 0 0 12px !important; } .inc-chevron-btn { background: none; border: none; cursor: pointer; color: var(--ice); padding: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; width: 22px; height: 22px; flex-shrink: 0; } .inc-chevron-btn:hover { opacity: 0.7; } .inc-chevron-btn.expanded { transform: rotate(180deg); } .inc-timeline-row td { border-top: none !important; } .inc-timeline-wrap { padding: 0 20px 16px; border-bottom: 1px solid rgba(var(--border-rgb), 0.1); } .inc-timeline-label { display: flex; align-items: center; gap: 6px; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ice); opacity: 0.55; padding: 14px 0 10px; } .inc-timeline-loading { font-size: 0.78rem; color: var(--ice); opacity: 0.4; padding: 12px 0; } .inc-timeline { display: flex; align-items: flex-start; gap: 0; flex-wrap: wrap; } .inc-tl-step { flex: 1; display: flex; flex-direction: row; align-items: flex-start; gap: 10px; min-width: 140px; padding: 0 16px 0 0; } .inc-tl-icon { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; margin-top: 2px; } .inc-tl-body { text-align: left; min-width: 0; } .inc-tl-title { font-size: 0.78rem; font-weight: 700; color: var(--white); margin-bottom: 1px; } .inc-tl-time { font-size: 0.66rem; color: var(--ice); opacity: 0.55; margin-bottom: 2px; } .inc-tl-detail { font-size: 0.68rem; color: var(--ice); opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; } .inc-tl-actions { margin-top: 14px; display: flex; justify-content: flex-end; } /* Sortable table headers */ th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; } th[data-sort]:hover { opacity: 0.75; } th[data-sort]::after { content: ' ↕'; opacity: 0.3; font-size: 0.75em; } th[data-sort].sort-asc::after { content: ' ↑'; opacity: 0.8; } th[data-sort].sort-desc::after { content: ' ↓'; opacity: 0.8; } /* ── Add bar ── */ .add-bar { padding: 20px 24px; } .add-bar-row { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; } .add-input-wrap { flex: 1; } .add-hint { font-size: 0.75rem; color: var(--ice); opacity: 0.35; margin-top: 8px; } .sv-btn-active { background: rgba(245,158,43,0.15) !important; border-color: rgba(245,158,43,0.6) !important; color: var(--orange) !important; } /* ── Table controls ── */ .table-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .table-search-wrap { position: relative; flex: 1; min-width: 190px; max-width: 300px; } .table-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--ice); opacity: 0.35; pointer-events: none; } .table-search { padding-left: 36px; } .table-search-combo { padding-right: 26px; } .table-search-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ice); opacity: 0.4; pointer-events: none; cursor: default; } .filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .filter-pill { background: rgba(var(--card-rgb),0.05); border: 1px solid rgba(var(--border-rgb),0.12); border-radius: 100px; padding: 6px 14px; font-size: 0.78rem; font-weight: 800; color: var(--ice); opacity:0.85; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px; } .filter-pill:hover { opacity: 0.9; background: rgba(var(--card-rgb),0.09); } .filter-pill.active { background: rgba(42,95,165,0.25); border-color: rgba(42,95,165,0.5); color: var(--ice); opacity: 1; } .filter-count { background: rgba(var(--card-rgb),0.1); border-radius: 100px; padding: 1px 7px; font-size: 0.7rem; } .filter-location-wrap { display: flex; align-items: center; } .filter-pill--warn { color: #fca5a5 !important; border-color: rgba(239,68,68,0.25) !important; } .filter-pill--warn.active { background: rgba(239,68,68,0.15) !important; border-color: rgba(239,68,68,0.45) !important; } /* ── Sortable column headers ── */ .th-sort { cursor: pointer; user-select: none; white-space: nowrap; } .th-sort:hover { opacity: 0.7; } .sort-ind { font-size: 0.65rem; color: var(--orange); font-weight: 800; letter-spacing: 0; } /* ── Domain table ── */ .domain-table-wrap { padding: 0; overflow: hidden; } .domain-table { width: 100%; border-collapse: collapse; } .domain-table thead th { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); opacity: 0.9; padding: 14px 18px; text-align: left; border-bottom: 1px solid rgba(var(--border-rgb),0.08); } .domain-table tbody tr { border-bottom: 1px solid rgba(var(--border-rgb),0.06); transition: background 0.15s; } .domain-table tbody tr:last-child { border-bottom: none; } .domain-table tbody tr:hover { background: rgba(var(--card-rgb),0.03); } .domain-table td { padding: 11px 16px; font-size: 0.88rem; vertical-align: middle; } .domain-table thead th { padding: 12px 16px; } /* Down row — subtle red tint so issues stand out at a glance */ .row-down { background: rgba(239,68,68,0.045); } .row-down:hover { background: rgba(239,68,68,0.07) !important; } /* Changed row — orange accent for any table showing a diff */ .row-changed { background: rgba(234,88,12,0.05); border-left: 3px solid rgba(234,88,12,0.35); } .row-changed:hover { background: rgba(234,88,12,0.08) !important; } /* ── Generic muted / secondary text ─────────────────────────────────── */ .sv-muted { opacity: 0.45; font-size: 0.82rem; } /* ── Generic empty state ─────────────────────────────────────────────── */ .sv-empty { text-align: center; padding: 48px 24px; opacity: 0.6; } .sv-empty-title { font-size: 1rem; font-weight: 600; margin-bottom: 6px; } .sv-empty-sub { font-size: 0.84rem; opacity: 0.7; } /* ── JS-navigation table link (in-page routing, not href) ────────────── */ /* For href-navigation use .monitor-name-link (orange hover, underline) */ .sv-row-link { cursor: pointer; color: var(--blue); font-weight: 600; } .sv-row-link:hover { text-decoration: underline; } /* ── Inline error block ──────────────────────────────────────────────── */ .sv-inline-error { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: var(--radius-sm); padding: 12px 16px; color: #fca5a5; font-size: 0.84rem; } .domain-name-cell { display: flex; align-items: center; gap: 12px; } .domain-favicon { width: 28px; height: 28px; border-radius: 8px; background: rgba(var(--card-rgb),0.07); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .domain-name { font-weight: 800; color: var(--white); font-size: 0.9rem; } .monitor-name-link { text-decoration: underline; text-decoration-color: rgba(var(--border-rgb),0.18); text-underline-offset: 3px; transition: color 0.15s, text-decoration-color 0.15s; } .monitor-name-link:hover { color: var(--orange) !important; text-decoration-color: rgba(245,158,43,0.6); } .sub-sep { opacity: 0.3; } .domain-added { font-size: 0.72rem; color: var(--ice); opacity:0.85; margin-top: 2px; } .response-ms { font-weight: 800; font-size: 0.85rem; } .response-fast { color: #4ade80; } .response-ok { color: #fde047; } .response-slow { color: #f87171; } .response-na { color: var(--ice); opacity:0.35; } .monitor-toggles { display: flex; flex-direction: column; gap: 10px; } .monitor-toggle-item { display: flex; align-items: center; gap: 14px; cursor: default; } .monitor-toggle-label { font-size: 0.72rem; font-weight: 700; color: var(--ice); opacity:0.85; width: 46px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; } .disable-monitor-btn { font-size: 0.72rem !important; padding: 3px 10px !important; margin-top: 4px; opacity:0.85; color: #fca5a5 !important; border-color: rgba(239,68,68,0.2) !important; } .disable-monitor-btn:hover { opacity: 1 !important; background: rgba(239,68,68,0.1) !important; } .checked-at { font-size: 0.8rem; color: var(--ice); opacity:0.85; } .row-actions { display: flex; gap: 2px; align-items: center; } .sv-btn-danger-ghost { color: #fca5a5 !important; opacity:0.35 !important; } .sv-btn-danger-ghost:hover { opacity: 1 !important; background: rgba(239,68,68,0.1) !important; } /* ── Info popup (? button) ── */ .info-popup-wrap { position: relative; display: inline-flex; } .info-popup-btn { padding: 3px 5px !important; opacity:0.85; line-height: 1; } .info-popup-btn:hover, .info-popup-btn.open { opacity: 1; } .info-popup { /* Override position:fixed inherited from .row-menu — popups are relative to their wrap */ position: absolute !important; top: calc(100% + 6px); right: 0; z-index: 200; min-width: 270px; white-space: normal; cursor: default; pointer-events: none; } .info-popup.open { pointer-events: auto; } .info-popup-body { font-size: 0.80rem; font-weight: 400; color: var(--ice); opacity:0.85; line-height: 1.55; padding: 2px 4px; text-transform: none; letter-spacing: 0; } .info-popup-body strong { color: var(--white); opacity: 1; font-weight: 700; } .info-popup-link { display: block; font-size: 0.75rem; color: var(--orange); text-decoration: none; padding: 2px 4px; opacity:0.85; margin-top: 2px; } .info-popup-link:hover { opacity: 1; text-decoration: underline; } /* ── Row gear menu ── */ tr.row-menu-active { position: relative; z-index: 100; } .row-menu-wrap { position: relative; } .row-menu-btn { opacity:0.85; } .row-menu-btn:hover, .row-menu-btn.open { opacity: 1; } .row-menu { display: none; position: fixed; z-index: 1000; min-width: 178px; background: var(--navy-card); border: 1px solid rgba(var(--border-rgb),0.12); border-radius: var(--radius-sm); box-shadow: 0 8px 28px rgba(0,0,0,0.45); padding: 5px; } .row-menu.open { display: block; } .row-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; background: none; border: none; border-radius: 6px; color: var(--ice); font-size: 0.82rem; font-weight: 500; text-align: left; cursor: pointer; transition: background 0.15s; opacity: 0.85; } .row-menu-item:hover { background: rgba(var(--card-rgb),0.08); opacity: 1; } .row-menu-item svg { flex-shrink: 0; opacity:0.85; } .row-menu-item-danger { color: #fca5a5; } .row-menu-item-danger:hover { background: rgba(239,68,68,0.1); } .row-menu-divider { height: 1px; background: rgba(var(--border-rgb),0.1); margin: 5px 0; } .table-empty { flex-direction: column; align-items: center; justify-content: center; padding: 56px; gap: 12px; color: var(--ice); opacity:0.85; font-weight: 700; } .table-empty-icon { font-size: 2.5rem; } /* ── Responsive dashboard ── */ @media (max-width: 900px) { .summary-grid { grid-template-columns: repeat(3, 1fr); } .dash-wrap { padding: 20px 16px 48px; } /* col 2 = Location, col 5 = Last Check (after Type column removed) */ .domain-table thead th:nth-child(2), .domain-table tbody td:nth-child(2), .domain-table thead th:nth-child(5), .domain-table tbody td:nth-child(5) { display: none; } } @media (max-width: 600px) { .summary-grid { grid-template-columns: repeat(2, 1fr); } .add-bar-row { flex-wrap: wrap; } /* col 4 = Response (after Type column removed) */ .domain-table thead th:nth-child(4), .domain-table tbody td:nth-child(4) { display: none; } } /* ── Plan banner ── */ .plan-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(234,179,8,0.07); border: 1px solid rgba(234,179,8,0.25); border-radius: var(--radius-lg); padding: 16px 20px; flex-wrap: wrap; } .plan-banner-left { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; } .plan-banner-icon { font-size: 1.4rem; flex-shrink: 0; } .plan-banner-title { font-size: 0.88rem; font-weight: 700; color: var(--white); } .plan-banner-title strong { color: #fde047; } .plan-banner-sub { font-size: 0.78rem; color: var(--ice); opacity:0.85; margin-top: 3px; } .plan-banner-btn { flex-shrink: 0; } /* ── Add bar header ── */ .add-bar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .add-bar-limit-note { font-size: 0.78rem; color: var(--ice); opacity:0.85; } .upgrade-link { color: var(--orange); opacity: 1; font-weight: 700; transition: opacity 0.15s; } .upgrade-link:hover { opacity:0.85; } /* ── Unmonitored (paused) rows — subtle diagonal stripe ── */ /* No opacity here — opacity creates a stacking context that traps position:fixed children and causes z-index issues with the row gear menu. */ .row-unmonitored { background-image: repeating-linear-gradient( -45deg, transparent, transparent 10px, rgba(var(--border-rgb),0.055) 10px, rgba(var(--border-rgb),0.055) 20px ); } .row-unmonitored:hover { background-image: repeating-linear-gradient( -45deg, rgba(var(--card-rgb),0.012) 0, rgba(var(--card-rgb),0.012) 10px, rgba(var(--border-rgb),0.07) 10px, rgba(var(--border-rgb),0.07) 20px ) !important; } .row-unmonitored .domain-name { color: var(--ice); opacity: 0.7; } .unmonitored-slot { display: flex; flex-direction: column; gap: 6px; } .unmonitored-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ice); opacity:0.85; } .unmonitored-enable-btn { font-size: 0.78rem !important; padding: 5px 12px !important; } .upgrade-link-small { font-size: 0.75rem; font-weight: 700; color: var(--orange); opacity:0.85; transition: opacity 0.15s; } .upgrade-link-small:hover { opacity: 1; } /* ── Domain unverified badge ── */ .domain-unverified-badge { display: inline-block; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--orange); background: rgba(245,158,43,0.12); border: 1px solid rgba(245,158,43,0.25); border-radius: 4px; padding: 1px 6px; margin-left: 7px; vertical-align: middle; cursor: pointer; } /* ── WHOIS cell ── */ .whois-cell { white-space: nowrap; } .whois-expiry { font-size: 0.82rem; font-weight: 700; } .whois-expiry-ok { color: var(--white); opacity:0.85; } .whois-expiry-warn { color: var(--orange); } .whois-expiry-critical { color: #f87171; } .whois-registrar { font-size: 0.7rem; color: var(--ice); opacity:0.85; margin-top: 2px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Account verification token bar ── */ .verify-token-bar { padding: 14px 18px; margin-bottom: 10px; } .verify-token-bar-inner { display: flex; flex-direction: column; gap: 8px; } .verify-token-label { display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ice); opacity:0.85; } .verify-token-hint { font-weight: 400; text-transform: none; letter-spacing: 0; opacity:0.85; } .verify-token-value { user-select: all; } /* ── Monitor count column ── */ .monitor-count-link { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; font-weight: 700; color: var(--ice); opacity:0.85; text-decoration: none; transition: opacity 0.15s; } .monitor-count-link:hover { opacity: 1; color: var(--orange); } .monitor-count-none { font-size: 0.75rem; color: var(--ice); opacity:0.35; text-decoration: none; transition: opacity 0.15s; } .monitor-count-none:hover { opacity:0.85; color: var(--orange); } /* ── Verification modal code blocks ── */ .verify-code-block { background: rgba(var(--navy-rgb),0.8); border: 1px solid rgba(var(--border-rgb),0.12); border-radius: 7px; padding: 10px 14px; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.8rem; color: var(--ice); word-break: break-all; user-select: all; } /* ── Verification modal DNS table ── */ .verify-dns-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .verify-dns-row { display: flex; align-items: center; gap: 10px; } .verify-dns-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ice); opacity:0.85; width: 90px; flex-shrink: 0; } .verify-dns-fixed { /* read-only pill — no flex grow, compact width */ flex: 0 0 auto; padding: 6px 12px; font-size: 0.78rem; color: var(--ice); opacity:0.85; } /* ── Registrar note below the DNS table ── */ .verify-registrar-note { display: flex; align-items: flex-start; gap: 7px; background: rgba(var(--border-rgb),0.05); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: 8px; padding: 10px 12px; font-size: 0.76rem; color: var(--ice); opacity:0.85; line-height: 1.55; margin-bottom: 16px; } /* ── Active monitor slot ── */ .monitor-active-slot { display: flex; flex-direction: column; gap: 5px; } .monitor-active-label { font-size: 0.78rem; font-weight: 700; color: var(--white); opacity: 0.85; } .monitor-manage-btn { font-size: 0.75rem !important; padding: 4px 10px !important; } /* ── Modals ── */ .sv-modal-overlay { position: fixed; inset: 0; background: rgba(10,16,28,0.75); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; } .sv-modal { background: #162032; border: 1px solid rgba(var(--border-rgb),0.13); border-radius: 14px; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); animation: modalIn 0.18s ease; } @keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } .sv-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid rgba(var(--border-rgb),0.08); } .sv-modal-title { font-size: 0.95rem; font-weight: 800; color: var(--white); letter-spacing: -0.01em; } .sv-modal-close { background: none; border: none; color: var(--ice); opacity:0.85; cursor: pointer; font-size: 1rem; line-height: 1; padding: 2px 6px; border-radius: 4px; transition: opacity 0.15s; } .sv-modal-close:hover { opacity: 0.9; } .sv-modal-body { padding: 18px 20px 20px; } /* ── Summary sub-value ── */ .summary-val-sub { font-size: 0.7rem; font-weight: 700; opacity:0.85; letter-spacing: 0; } /* ═══════════════════════════════════════════ ALERTS PAGE STYLES ═══════════════════════════════════════════ */ /* ── Page tabs ── */ .page-tabs { display: flex; gap: 4px; border-bottom: 1px solid rgba(var(--border-rgb),0.1); margin-bottom: 28px; } .page-tab { padding: 10px 18px; font-size: 0.85rem; font-weight: 700; color: var(--ice); opacity:0.85; border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: opacity 0.15s, border-color 0.15s; white-space: nowrap; } .page-tab:hover { opacity: 0.85; } .page-tab.active { opacity: 1; border-bottom-color: var(--orange); color: var(--white); } /* ── Tab panels ── */ .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── Section header row ── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .section-title { font-family: 'DM Sans', sans-serif; font-size: 1rem; font-weight: 800; color: var(--white); } .section-desc { font-size: 0.8rem; color: var(--ice); margin-top: 3px; } /* ── Contact cards ── */ .contacts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 12px; } .contact-card { background: rgba(var(--card-rgb),0.09); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-lg); padding: 16px 18px; display: flex; align-items: center; gap: 14px; transition: background 0.15s, border-color 0.15s; } .contact-card:hover { background: rgba(var(--card-rgb),0.07); border-color: rgba(var(--border-rgb),0.2); } .contact-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: var(--white); flex-shrink: 0; } .contact-info { flex: 1; min-width: 0; } .contact-name { font-size: 0.9rem; font-weight: 800; color: var(--white); } .contact-channels { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; } .channel-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 100px; background: rgba(42,95,165,0.2); color: var(--ice); opacity:0.85; text-transform: uppercase; letter-spacing: 0.04em; } .channel-chip-email { background: rgba(34,197,94,0.12); color: #86efac; } .channel-chip-sms { background: rgba(245,158,43,0.12); color: #fcd34d; } .channel-chip-webhook{ background: rgba(139,92,246,0.15); color: #c4b5fd; } .channel-chip-push { background: rgba(14,165,233,0.15); color: #7dd3fc; } .contact-actions { display: flex; gap: 4px; flex-shrink: 0; } /* ── Add contact form ── */ .add-contact-form { background: rgba(var(--card-rgb),0.03); border: 1px dashed rgba(var(--border-rgb),0.18); border-radius: var(--radius-lg); padding: 20px; display: none; } .add-contact-form.open { display: block; } .add-contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 12px; } .add-contact-fields { display: flex; flex-direction: column; gap: 12px; } .add-contact-channels { display: flex; flex-direction: column; gap: 8px; padding-left: 24px; border-left: 1px solid rgba(var(--border-rgb),0.1); } .channel-checks-col { flex-direction: column; gap: 8px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); opacity:0.85; } .form-field-full { grid-column: 1 / -1; } .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; } /* ── Channel checkboxes ── */ .channel-checks { display: flex; gap: 10px; flex-wrap: wrap; } .channel-check { display: flex; align-items: center; gap: 7px; background: rgba(var(--card-rgb),0.05); border: 1px solid rgba(var(--border-rgb),0.12); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--ice); opacity:0.85; transition: all 0.15s; user-select: none; } .channel-check input { display: none; } .channel-check:has(input:checked) { opacity: 1; border-color: rgba(var(--border-rgb),0.35); background: rgba(var(--card-rgb),0.09); } .channel-check-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity:0.85; flex-shrink: 0; } .channel-check:has(input:checked) .channel-check-dot { opacity: 1; } /* ── Small time selects (tier editor) ── */ .sv-select-sm { background: rgba(var(--card-rgb),0.07); border: 1px solid rgba(var(--border-rgb),0.15); border-radius: 6px; color: var(--ice); font-size: 0.82rem; font-family: 'Plus Jakarta Sans', sans-serif; padding: 5px 8px; cursor: pointer; appearance: none; -webkit-appearance: none; } .sv-select-sm:focus { outline: none; border-color: rgba(var(--border-rgb),0.4); } .sv-select-sm option { background: var(--navy-card); color: var(--ice); } .tier-time-row { display: flex; align-items: center; gap: 6px; } .tier-time-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ice); opacity:0.85; min-width: 30px; } .tier-time-sep { color: var(--ice); opacity:0.85; font-size: 0.9rem; } /* ── Priority tier table ── */ .priority-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 0; } /* Round the corners so the card border-radius shows without overflow:hidden */ .priority-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius-xl); } .priority-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius-xl); } .priority-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-xl); } .priority-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius-xl); } .priority-table th { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); opacity: 0.9; padding: 10px 16px; text-align: left; border-bottom: 1px solid rgba(var(--border-rgb),0.08); } .priority-table td { padding: 14px 16px; font-size: 0.88rem; vertical-align: middle; border-bottom: 1px solid rgba(var(--border-rgb),0.05); } .priority-table tr:last-child td { border-bottom: none; } .priority-table tr:hover td { background: rgba(var(--card-rgb),0.02); } .priority-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; padding: 4px 10px; border-radius: 100px; letter-spacing: 0.03em; } .priority-low { background: rgba(100,116,139,0.2); color: #94a3b8; } .priority-medium { background: rgba(42,95,165,0.25); color: #93c5fd; } .priority-high { background: rgba(234,179,8,0.2); color: #fde047; } .priority-critical { background: rgba(239,68,68,0.2); color: #f87171; } .priority-channels { display: flex; gap: 6px; flex-wrap: wrap; } .priority-select { background: rgba(var(--card-rgb),0.07); border: 1px solid rgba(var(--border-rgb),0.2); border-radius: var(--radius-md); padding: 8px 12px; font-size: 0.85rem; font-weight: 700; color: var(--white); outline: none; cursor: pointer; transition: border-color 0.15s; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8d4f0' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; } .priority-select:focus { border-color: rgba(var(--border-rgb),0.45); } .priority-select option { background: #1a2d47; } /* ── Condition overrides ── */ .override-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .override-row { display: flex; align-items: center; gap: 10px; background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-md); padding: 12px 16px; flex-wrap: wrap; } .override-label { font-size: 0.8rem; font-weight: 700; color: var(--ice); opacity:0.85; white-space: nowrap; } .override-label strong { color: var(--white); opacity: 1; } .override-spacer { flex: 1; } .override-actions { display: flex; gap: 6px; align-items: center; } /* ── Domain-contact assignment ── */ .domain-assign-list { display: flex; flex-direction: column; gap: 10px; } .domain-assign-row { display: flex; align-items: center; gap: 16px; background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-lg); padding: 14px 18px; flex-wrap: wrap; gap: 12px; } .domain-assign-name { font-size: 0.9rem; font-weight: 800; color: var(--white); min-width: 180px; flex-shrink: 0; } .domain-assign-priority { flex-shrink: 0; } .domain-assign-contacts { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; align-items: center; } .contact-tag { display: inline-flex; align-items: center; gap: 6px; background: rgba(42,95,165,0.2); border: 1px solid rgba(42,95,165,0.3); border-radius: 100px; padding: 4px 10px 4px 6px; font-size: 0.75rem; font-weight: 700; color: var(--ice); cursor: default; } .contact-tag-avatar { width: 18px; height: 18px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 800; flex-shrink: 0; } .contact-tag-remove { background: none; border: none; color: var(--ice); opacity: 0; cursor: pointer; padding: 2px 5px; line-height: 1; font-size: 0.85rem; border-radius: 4px; transition: opacity 0.15s, color 0.15s, background 0.15s; } .contact-tag:hover .contact-tag-remove { opacity:0.85; } .contact-tag-remove:hover { opacity: 1 !important; color: #fca5a5; background: rgba(239,68,68,0.15); } .add-contact-tag-btn { font-size: 0.75rem; font-weight: 700; color: var(--ice); opacity:0.85; background: none; border: 1px dashed rgba(var(--border-rgb),0.2); border-radius: 100px; padding: 4px 10px; cursor: pointer; transition: opacity 0.15s, border-color 0.15s; } .add-contact-tag-btn:hover { opacity: 0.9; border-color: rgba(var(--border-rgb),0.4); } /* ── Responsive ── */ @media (max-width: 768px) { .form-grid-2 { grid-template-columns: 1fr; } .add-contact-cols { grid-template-columns: 1fr; } .add-contact-channels { padding-left: 0; border-left: none; border-top: 1px solid rgba(var(--border-rgb),0.1); padding-top: 16px; } .domain-assign-row { flex-direction: column; align-items: flex-start; } .domain-assign-name { min-width: unset; } } /* ═══════════════════════════════════════════ INTEGRATIONS PAGE STYLES ═══════════════════════════════════════════ */ .integrations-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .integration-card { background: rgba(var(--card-rgb),0.09); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 16px; transition: background 0.15s, border-color 0.15s; } .integration-card:hover { background: rgba(var(--card-rgb),0.06); } .integration-card.connected { border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.03); } .integration-card.coming-soon { opacity:0.85; pointer-events: none; } .integration-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .integration-identity { display: flex; align-items: center; gap: 14px; } .integration-logo { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; flex-shrink: 0; } .integration-logo-slack { background: #3c1a47; } .integration-logo-webhook { background: rgba(139,92,246,0.2); } .integration-logo-zapier { background: rgba(255,80,0,0.15); } .integration-name { font-size: 1rem; font-weight: 800; color: var(--white); font-family: 'DM Sans', sans-serif; } .integration-tagline { font-size: 0.78rem; color: var(--ice); opacity:0.85; margin-top: 3px; line-height: 1.4; } .integration-status-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 100px; white-space: nowrap; flex-shrink: 0; } .integration-status-connected { background: rgba(34,197,94,0.15); color: #4ade80; } .integration-status-disconnected { background: rgba(100,116,139,0.15); color: #94a3b8; } .integration-status-soon { background: rgba(42,95,165,0.15); color: var(--ice); } .integration-status-locked { background: rgba(var(--border-rgb),0.07); color: var(--ice); opacity:0.85; } /* Locked card */ .integration-card-locked { opacity:0.85; } .integration-card-locked:hover { background: var(--navy-card); border-color: rgba(var(--border-rgb),0.1); box-shadow: none; } /* Category section */ .integrations-section { margin-bottom: 32px; } .integrations-section-header { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); opacity: 0.35; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(var(--border-rgb),0.07); } /* New logo backgrounds */ .integration-logo-discord { background: rgba(88,101,242,0.18); } .integration-logo-teams { background: rgba(100,90,200,0.18); } .integration-logo-make { background: rgba(111,66,193,0.18); } .integration-logo-pagerduty { background: rgba(6,168,97,0.15); } .integration-logo-opsgenie { background: rgba(38,104,196,0.18); } .integration-logo-status { background: rgba(245,158,43,0.15); } .integration-body { font-size: 0.82rem; color: var(--ice); opacity:0.85; line-height: 1.6; } /* Connected details */ .integration-detail { background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.08); border-radius: var(--radius-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .integration-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .integration-detail-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ice); opacity:0.85; } .integration-detail-val { font-size: 0.82rem; font-weight: 700; color: var(--white); } /* Webhook list */ .webhook-list { display: flex; flex-direction: column; gap: 8px; } .webhook-item { display: flex; align-items: center; gap: 10px; background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.08); border-radius: var(--radius-md); padding: 10px 14px; } .webhook-item-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .webhook-item-dot-active { background: var(--ping-green); box-shadow: 0 0 5px var(--ping-green); } .webhook-item-dot-inactive { background: var(--ping-grey); } .webhook-item-url { flex: 1; font-size: 0.78rem; font-weight: 700; color: var(--ice); opacity:0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .webhook-item-events { font-size: 0.68rem; font-weight: 700; color: var(--ice); opacity: 0.35; white-space: nowrap; } /* Add webhook form */ .add-webhook-form { display: none; flex-direction: column; gap: 10px; padding-top: 4px; } .add-webhook-form.open { display: flex; } .events-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .integration-footer { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(var(--border-rgb),0.07); } .integration-footer .sv-btn { font-size: 0.78rem; padding: 8px 12px; } /* ═══════════════════════════════════════════ BILLING PAGE STYLES ═══════════════════════════════════════════ */ .billing-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } /* ── Plan card ── */ .plan-card { background: rgba(var(--card-rgb),0.09); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-xl); overflow: hidden; } .plan-card-header { padding: 24px 24px 20px; border-bottom: 1px solid rgba(var(--border-rgb),0.08); display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .plan-card-name { font-family: 'DM Sans', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--white); } .plan-card-price { margin-top: 4px; display: flex; align-items: baseline; gap: 4px; } .plan-price-amount { font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 800; color: var(--white); line-height: 1; } .plan-price-period { font-size: 0.82rem; color: var(--ice); opacity:0.85; font-weight: 600; } .plan-price-sub { font-size: 0.75rem; color: var(--ice); opacity:0.85; margin-top: 5px; } .plan-card-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; } /* ── Usage meter ── */ .usage-meter { display: flex; flex-direction: column; gap: 8px; } .usage-meter-header { display: flex; justify-content: space-between; align-items: baseline; } .usage-meter-label { font-size: 0.78rem; font-weight: 700; color: var(--ice); opacity:0.85; text-transform: uppercase; letter-spacing: 0.06em; } .usage-meter-val { font-size: 0.82rem; font-weight: 800; color: var(--white); } .usage-meter-val span { color: var(--ice); opacity:0.85; font-weight: 600; } .usage-bar-track { height: 7px; background: rgba(var(--card-rgb),0.07); border-radius: 100px; overflow: hidden; } .usage-bar-fill { height: 100%; border-radius: 100px; background: var(--ping-green); transition: width 0.4s ease; } .usage-bar-fill.usage-warn { background: var(--ping-yellow); } .usage-bar-fill.usage-danger { background: var(--ping-red); } .usage-overage { font-size: 0.75rem; font-weight: 700; color: #fde047; margin-top: 2px; } /* ── Plan features list ── */ .plan-features { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid rgba(var(--border-rgb),0.07); } .plan-feature { display: flex; align-items: center; gap: 10px; font-size: 0.83rem; color: var(--ice); opacity:0.85; } .plan-feature-check { color: var(--ping-green); flex-shrink: 0; opacity: 1; } .plan-card-footer { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 8px; } /* ── Plan comparison tiles ── */ .plan-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .plan-tier-tile { background: rgba(var(--card-rgb),0.03); border: 1px solid rgba(var(--border-rgb),0.08); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-align: center; } .plan-tier-tile:hover { background: rgba(var(--card-rgb),0.07); border-color: rgba(var(--border-rgb),0.2); } .plan-tier-tile.current { border-color: var(--orange); background: rgba(245,158,43,0.06); } .plan-tier-name { font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 800; color: var(--white); margin-bottom: 4px; } .plan-tier-price { font-size: 1.1rem; font-weight: 800; color: var(--white); font-family: 'DM Sans', sans-serif; } .plan-tier-price span { font-size: 0.7rem; font-weight: 600; color: var(--ice); opacity:0.85; } .plan-tier-domains { font-size: 0.72rem; color: var(--ice); opacity:0.85; margin-top: 4px; } .plan-tier-overage { font-size: 0.68rem; color: var(--ice); opacity:0.35; margin-top: 3px; } .plan-tier-badge { display: inline-block; font-size: 0.65rem; font-weight: 800; background: var(--orange); color: var(--navy); padding: 2px 7px; border-radius: 100px; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Sidebar cards ── */ .billing-sidebar { display: flex; flex-direction: column; gap: 16px; } .billing-meta-card { background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .billing-meta-row { display: flex; flex-direction: column; gap: 6px; } .billing-meta-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ice); opacity:0.85; } .billing-meta-val { font-size: 0.88rem; font-weight: 700; color: var(--white); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .billing-meta-val .edit-link { font-size: 0.75rem; font-weight: 700; color: var(--orange); opacity:0.85; cursor: pointer; transition: opacity 0.15s; flex-shrink: 0; } .billing-meta-val .edit-link:hover { opacity: 1; } .billing-meta-divider { height: 1px; background: rgba(var(--border-rgb),0.07); } /* Inline edit field */ .billing-inline-edit { display: none; margin-top: 6px; } .billing-inline-edit.open { display: flex; gap: 8px; } .billing-inline-edit .sv-input { font-size: 0.85rem; padding: 8px 12px; } /* Next invoice banner */ .next-invoice-banner { background: rgba(42,95,165,0.12); border: 1px solid rgba(42,95,165,0.25); border-radius: var(--radius-lg); padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .next-invoice-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ice); opacity:0.85; margin-bottom: 2px; } .next-invoice-amount { font-family: 'DM Sans', sans-serif; font-size: 1.2rem; font-weight: 800; color: var(--white); } .next-invoice-date { font-size: 0.75rem; color: var(--ice); opacity:0.85; margin-top: 2px; } /* ── Responsive ── */ @media (max-width: 900px) { .billing-wrap { grid-template-columns: 1fr; } .plan-tiers { grid-template-columns: 1fr; gap: 8px; } } /* ═══════════════════════════════════════════ NOTIFICATIONS PAGE STYLES ═══════════════════════════════════════════ */ /* ── Nav badge ── */ /* ── Nav setup hint (? bubble with step tooltip) ── */ .nav-setup-hint { position: relative; display: inline-flex; align-items: center; margin-right: 2px; } /* Invisible bridge that fills the gap between ? and the menu, keeping the hover state alive as the mouse travels down */ .nav-setup-hint::after { content: ''; position: absolute; top: 100%; left: -8px; right: -8px; height: 14px; } .nav-setup-q { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(var(--card-rgb),0.07); border: 1px solid rgba(var(--card-rgb),0.14); color: var(--ice); font-size: 0.62rem; font-weight: 800; cursor: default; opacity:0.85; transition: opacity 0.15s, background 0.15s, border-color 0.15s; user-select: none; } .nav-setup-hint:hover .nav-setup-q { opacity: 1; background: rgba(var(--card-rgb),0.12); border-color: rgba(var(--card-rgb),0.25); } .nav-setup-tooltip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-20%) translateY(-4px); background: rgba(12,22,38,0.98); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s; z-index: 300; box-shadow: 0 12px 32px rgba(0,0,0,0.5); min-width: 220px; } .nav-setup-hint:hover .nav-setup-tooltip { opacity: 1; pointer-events: auto; transform: translateX(-20%) translateY(0); } .nav-setup-title { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); opacity: 0.35; padding: 4px 8px 6px; border-bottom: 1px solid rgba(var(--card-rgb),0.07); margin-bottom: 2px; } a.nav-setup-step { display: flex; align-items: center; gap: 10px; font-size: 0.83rem; font-weight: 600; color: var(--ice); text-decoration: none; padding: 7px 10px; border-radius: 7px; transition: background 0.12s, color 0.12s; } a.nav-setup-step:hover { background: rgba(var(--card-rgb),0.07); color: var(--white); } a.nav-setup-step.active { color: var(--orange); } a.nav-setup-step.active .nav-setup-num { background: rgba(255,108,42,0.15); border-color: rgba(255,108,42,0.35); color: var(--orange); } .nav-setup-num { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 50%; background: rgba(var(--card-rgb),0.08); border: 1px solid rgba(var(--card-rgb),0.14); font-size: 0.62rem; font-weight: 800; color: var(--ice); flex-shrink: 0; transition: background 0.12s, border-color 0.12s, color 0.12s; } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px; background: var(--ping-red); color: var(--white); font-size: 0.65rem; font-weight: 800; margin-left: 5px; vertical-align: middle; line-height: 1; } /* ── Notification list ── */ .notif-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .notif-filter-pills { display: flex; gap: 6px; flex-wrap: wrap; } .notif-list { display: flex; flex-direction: column; gap: 0; border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-xl); overflow: hidden; } .notif-item { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; border-bottom: 1px solid rgba(var(--border-rgb),0.06); background: rgba(var(--card-rgb),0.025); transition: background 0.15s; position: relative; } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: rgba(var(--card-rgb),0.05); } .notif-item.unread { background: rgba(42,95,165,0.08); } .notif-item.unread:hover { background: rgba(42,95,165,0.13); } .notif-item.archived { opacity: 0.35; } /* Unread dot */ .notif-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 6px var(--blue); flex-shrink: 0; margin-top: 6px; } .notif-item:not(.unread) .notif-unread-dot { background: transparent; box-shadow: none; } /* Icon */ .notif-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .notif-icon-monitor { background: rgba(239,68,68,0.12); } .notif-icon-monitor-up { background: rgba(34,197,94,0.12); } .notif-icon-billing { background: rgba(245,158,43,0.12); } .notif-icon-system { background: rgba(42,95,165,0.15); } .notif-icon-account { background: rgba(100,116,139,0.15); } .notif-icon-ticket { background: rgba(139,92,246,0.15); } /* Content */ .notif-content { flex: 1; min-width: 0; } .notif-title { font-size: 0.88rem; font-weight: 800; color: var(--white); line-height: 1.3; } .notif-item:not(.unread) .notif-title { font-weight: 700; opacity:0.85; } .notif-body { font-size: 0.8rem; color: var(--ice); opacity:0.85; margin-top: 3px; line-height: 1.5; } .notif-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .notif-time { font-size: 0.72rem; color: var(--ice); opacity: 0.35; font-weight: 600; } .notif-tag { font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 100px; } .notif-tag-monitor { background: rgba(239,68,68,0.12); color: #f87171; } .notif-tag-monitor-up { background: rgba(34,197,94,0.12); color: #4ade80; } .notif-tag-billing { background: rgba(245,158,43,0.15); color: #fcd34d; } .notif-tag-system { background: rgba(42,95,165,0.2); color: var(--ice); } .notif-tag-account { background: rgba(100,116,139,0.2); color: #94a3b8; } .notif-tag-ticket { background: rgba(139,92,246,0.15); color: #c4b5fd; } /* Action buttons */ .notif-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity 0.15s; } .notif-item:hover .notif-actions { opacity: 1; } /* Empty state */ .notif-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 24px; gap: 12px; color: var(--ice); opacity: 0.35; font-weight: 700; font-size: 0.9rem; text-align: center; } .notif-empty-icon { font-size: 2.5rem; margin-bottom: 4px; } @media (max-width: 600px) { .notif-item { padding: 14px 14px; gap: 10px; } .notif-actions { opacity: 1; } } /* ═══════════════════════════════════════════ REUSABLE COMPONENTS — append to style.css ─────────────────────────────────────────── MIGRATION: .plan-banner is superseded by .action-strip. Delete the .plan-banner block from style.css when adding this file. In dashboard.php (and anywhere else plan-banner is used), rename as follows: .plan-banner → .action-strip .action-strip--warn .plan-banner-left → .action-strip-body (drop -left wrapper) .plan-banner-icon → .action-strip-icon .plan-banner-title → .action-strip-title .plan-banner-sub → .action-strip-sub .plan-banner-btn → .action-strip-btn ═══════════════════════════════════════════ */ /* ── Segmented control ───────────────────────────────────── Mutually exclusive options; replaces plan-interval-switch, annual-toggle. Use .seg-control--labeled when a text prefix sits left of the buttons (add .seg-control-label inside). */ .seg-control { display: inline-flex; align-items: center; background: rgba(var(--card-rgb),0.05); border: 1px solid rgba(var(--border-rgb),0.12); border-radius: 100px; padding: 3px; gap: 2px; } .seg-control--labeled { padding: 3px 4px 3px 10px; gap: 6px; } .seg-control-label { font-size: 0.72rem; font-weight: 700; color: var(--ice); opacity:0.85; white-space: nowrap; } .seg-control-btn { background: transparent; border: none; color: var(--white); opacity: 0.55; font-size: 0.78rem; font-weight: 700; padding: 5px 14px; border-radius: 100px; cursor: pointer; transition: background 0.15s, opacity 0.15s, color 0.15s; font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap; } .seg-control-btn:hover { opacity: 0.8; background: rgba(var(--card-rgb),0.07); } .seg-control-btn.active { background: rgba(var(--card-rgb),0.14); color: var(--white); opacity: 1; } .seg-control-btn:disabled { cursor: default; } /* ── Savings badge ───────────────────────────────────────── Inline chip for positive callouts (discounts, savings). Sits inside a button or label via vertical-align: middle. */ .badge-savings { display: inline-block; background: rgba(34,197,94,0.18); color: #4ade80; font-size: 0.62rem; font-weight: 800; padding: 1px 5px; border-radius: 100px; margin-left: 2px; vertical-align: middle; letter-spacing: 0.02em; } /* ── Badge color variants ────────────────────────────────── Extend the existing .badge + .badge-dot system. .badge-highlight — featured / popular (orange) .badge-limited — scarcity label (amber-tinted) */ .badge-highlight { background: var(--orange); color: var(--navy); } .badge-limited { background: rgba(245,158,43,0.18); color: #fcd34d; } /* ── Tile grid ───────────────────────────────────────────── Auto-column card grid. Default: 4-up. Override column count with a modifier or inline style as needed. */ .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .tile-grid--3 { grid-template-columns: repeat(3, 1fr); } .tile-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1100px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tile-grid, .tile-grid--3, .tile-grid--2 { grid-template-columns: 1fr; } } /* ── Tile card ───────────────────────────────────────────── Individual card inside a .tile-grid. .tile-card.current — highlighted as active selection. */ .tile-card { background: rgba(var(--card-rgb),0.08); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: background 0.15s, border-color 0.15s; display: flex; flex-direction: column; position: relative; overflow: visible; min-width: 0; /* prevent grid children overflowing their column */ } .tile-card:hover { background: rgba(var(--card-rgb),0.07); border-color: rgba(var(--border-rgb),0.2); } .tile-card.current { border-color: var(--orange); background: rgba(245,158,43,0.06); } /* Tile typography helpers */ .tile-label { font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 800; color: var(--white); margin-bottom: 4px; } .tile-price { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--white); } .tile-price-note { font-size: 0.7rem; font-weight: 600; color: var(--ice); opacity:0.85; } .tile-sub-note { font-size: 0.68rem; color: var(--ice); opacity: 0.35; min-height: 14px; margin-top: 2px; line-height: 1.3; } /* ── Action strip ────────────────────────────────────────── Horizontal info + CTA bar. Replaces .plan-banner. Color variants mirror the existing badge/card semantics. Default: blue tint (informational). */ .action-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: rgba(42,95,165,0.08); border: 1px solid rgba(42,95,165,0.2); border-radius: var(--radius-lg); flex-wrap: wrap; } .action-strip--warn { background: rgba(234,179,8,0.07); border-color: rgba(234,179,8,0.25); } .action-strip--danger { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.25); } .action-strip--success { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.2); } .action-strip-icon { font-size: 1.4rem; flex-shrink: 0; } .action-strip-body { flex: 1; min-width: 0; } .action-strip-title { font-size: 0.88rem; font-weight: 700; color: var(--white); } .action-strip-title strong { color: #fde047; } .action-strip-sub { font-size: 0.78rem; color: var(--ice); opacity:0.85; margin-top: 3px; line-height: 1.5; } .action-strip-btn { flex-shrink: 0; } /* ═══════════════════════════════════════════ REUSABLE COMPONENTS — append to style.css ─────────────────────────────────────────── MIGRATION: .plan-banner is superseded by .action-strip. Delete the .plan-banner block from style.css when adding this file. In dashboard.php (and anywhere else plan-banner is used), rename as follows: .plan-banner → .action-strip .action-strip--warn .plan-banner-left → .action-strip-body (drop -left wrapper) .plan-banner-icon → .action-strip-icon .plan-banner-title → .action-strip-title .plan-banner-sub → .action-strip-sub .plan-banner-btn → .action-strip-btn ═══════════════════════════════════════════ */ /* ── Segmented control ───────────────────────────────────── Mutually exclusive options; replaces plan-interval-switch, annual-toggle. Use .seg-control--labeled when a text prefix sits left of the buttons (add .seg-control-label inside). */ .seg-control { display: inline-flex; align-items: center; background: rgba(var(--card-rgb),0.05); border: 1px solid rgba(var(--border-rgb),0.12); border-radius: 100px; padding: 3px; gap: 2px; } .seg-control--labeled { padding: 3px 4px 3px 10px; gap: 6px; } .seg-control-label { font-size: 0.72rem; font-weight: 700; color: var(--ice); opacity:0.85; white-space: nowrap; } .seg-control-btn { background: transparent; border: none; color: var(--white); opacity: 0.55; font-size: 0.78rem; font-weight: 700; padding: 5px 14px; border-radius: 100px; cursor: pointer; transition: background 0.15s, opacity 0.15s, color 0.15s; font-family: 'Plus Jakarta Sans', sans-serif; white-space: nowrap; } .seg-control-btn:hover { opacity: 0.8; background: rgba(var(--card-rgb),0.07); } .seg-control-btn.active { background: rgba(var(--card-rgb),0.14); color: var(--white); opacity: 1; } .seg-control-btn:disabled { cursor: default; } /* ── Savings badge ───────────────────────────────────────── Inline chip for positive callouts (discounts, savings). Sits inside a button or label via vertical-align: middle. */ .badge-savings { display: inline-block; background: rgba(34,197,94,0.18); color: #4ade80; font-size: 0.62rem; font-weight: 800; padding: 1px 5px; border-radius: 100px; margin-left: 2px; vertical-align: middle; letter-spacing: 0.02em; } /* ── Badge color variants ────────────────────────────────── Extend the existing .badge + .badge-dot system. .badge-highlight — featured / popular (orange) .badge-limited — scarcity label (amber-tinted) */ .badge-highlight { background: var(--orange); color: var(--navy); } .badge-limited { background: rgba(245,158,43,0.18); color: #fcd34d; } /* ── Tile grid ───────────────────────────────────────────── Auto-column card grid. Default: 4-up. Override column count with a modifier or inline style as needed. */ .tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .tile-grid--3 { grid-template-columns: repeat(3, 1fr); } .tile-grid--2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1100px) { .tile-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tile-grid, .tile-grid--3, .tile-grid--2 { grid-template-columns: 1fr; } } /* ── Tile card ───────────────────────────────────────────── Individual card inside a .tile-grid. .tile-card.current — highlighted as active selection. */ .tile-card { background: rgba(var(--card-rgb),0.08); border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-lg); padding: 16px; cursor: pointer; transition: background 0.15s, border-color 0.15s; display: flex; flex-direction: column; position: relative; overflow: visible; min-width: 0; /* prevent grid children overflowing their column */ } .tile-card:hover { background: rgba(var(--card-rgb),0.07); border-color: rgba(var(--border-rgb),0.2); } .tile-card.current { border-color: var(--orange); background: rgba(245,158,43,0.06); } /* Tile typography helpers */ .tile-label { font-family: 'DM Sans', sans-serif; font-size: 0.88rem; font-weight: 800; color: var(--white); margin-bottom: 4px; } .tile-price { font-family: 'DM Sans', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--white); } .tile-price-note { font-size: 0.7rem; font-weight: 600; color: var(--ice); opacity:0.85; } .tile-sub-note { font-size: 0.68rem; color: var(--ice); opacity: 0.35; min-height: 14px; margin-top: 2px; line-height: 1.3; } /* ── Action strip ────────────────────────────────────────── Horizontal info + CTA bar. Replaces .plan-banner. Color variants mirror the existing badge/card semantics. Default: blue tint (informational). */ .action-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: rgba(42,95,165,0.08); border: 1px solid rgba(42,95,165,0.2); border-radius: var(--radius-lg); flex-wrap: wrap; } .action-strip--warn { background: rgba(234,179,8,0.07); border-color: rgba(234,179,8,0.25); } .action-strip--danger { background: rgba(239,68,68,0.07); border-color: rgba(239,68,68,0.25); } .action-strip--success { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.2); } .action-strip-icon { font-size: 1.4rem; flex-shrink: 0; } .action-strip-body { flex: 1; min-width: 0; } .action-strip-title { font-size: 0.88rem; font-weight: 700; color: var(--white); } .action-strip-title strong { color: #fde047; } .action-strip-sub { font-size: 0.78rem; color: var(--ice); opacity:0.85; margin-top: 3px; line-height: 1.5; } .action-strip-btn { flex-shrink: 0; } /* ── Tile card: calculator-selected state ────────────────── Applied by JS when user clicks a tile to sync the calculator. Distinct from .current (their active plan). */ .tile-card.calc-selected { border-color: rgba(var(--border-rgb),0.4); background: rgba(var(--border-rgb),0.06); box-shadow: inset 0 0 0 1px rgba(var(--border-rgb),0.15); } /* ═══════════════════════════════════════════ PUBLIC / MARKETING PAGES ═══════════════════════════════════════════ */ /* ── Public header overrides ───────────────── Same .site-header shell, slight tweaks for the marketing context (no user pill, CTA instead). ────────────────────────────────────────── */ .pub-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .pub-login-btn { font-size: 0.85rem; padding: 8px 16px; } /* ── Hamburger toggle (mobile only) ─────── */ .pub-nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; padding: 8px; cursor: pointer; color: var(--ice); border-radius: 8px; transition: background 0.15s; flex-shrink: 0; } .pub-nav-toggle:hover { background: rgba(var(--card-rgb),0.07); } /* ── Mobile nav overlay ──────────────────── */ .pub-mobile-nav { position: fixed; inset: 0; z-index: 200; background: var(--navy); display: flex; flex-direction: column; padding: 0 24px 40px; transform: translateY(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); /* hidden by default — only rendered meaningfully on mobile */ } .pub-mobile-nav--open { transform: translateY(0); } .pub-mobile-nav-bar { display: flex; align-items: center; justify-content: space-between; height: 62px; flex-shrink: 0; border-bottom: 1px solid rgba(var(--border-rgb),0.1); } .pub-nav-close { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 8px; cursor: pointer; color: var(--ice); border-radius: 8px; transition: background 0.15s; } .pub-nav-close:hover { background: rgba(var(--card-rgb),0.07); } .pub-mobile-nav-links { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; flex: 1; } .pub-mobile-nav-links a { font-size: 1.35rem; font-weight: 700; color: var(--ice); opacity: 0.8; padding: 14px 8px; border-radius: 10px; text-decoration: none; transition: opacity 0.15s, background 0.15s; border-bottom: 1px solid rgba(var(--border-rgb),0.06); } .pub-mobile-nav-links a:last-child { border-bottom: none; } .pub-mobile-nav-links a:hover, .pub-mobile-nav-links a.active { opacity: 1; } .pub-mobile-nav-links a.active { color: var(--orange); } .pub-mobile-nav-actions { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; } .pub-mobile-nav-actions .sv-btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 1rem; } /* ── Public footer ───────────────────────── */ /* Always rendered dark — SVG logo only works on dark backgrounds. Re-declare the dark-mode token values on the element itself so they win over the [data-theme="light"] overrides set on . */ .pub-footer { flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 32px 32px 40px; background: #0f1c2e; --navy: #0f1c2e; --ice: #cce4ff; --white: #ffffff; --border-rgb: 184, 212, 240; } .pub-footer-brand { display: flex; align-items: center; gap: 12px; } .pub-footer-copy { font-size: 0.8rem; color: var(--ice); opacity: 0.35; font-weight: 600; } .pub-footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; } .pub-footer-links a { font-size: 0.78rem; font-weight: 600; color: var(--ice); opacity: 0.35; transition: opacity 0.15s; } .pub-footer-links a:hover { opacity:0.85; } /* ── Public page wrapper ─────────────────── */ .pub-wrap { max-width: 960px; margin: 0 auto; padding: 48px 32px 80px; } .pub-wrap-narrow { max-width: 760px; margin: 0 auto; padding: 48px 32px 80px; } /* ── Blog index ──────────────────────────── */ .blog-header { margin-bottom: 40px; } .blog-title { font-family: 'DM Sans', sans-serif; font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); margin-bottom: 10px; } .blog-subtitle { font-size: 1rem; color: var(--ice); opacity:0.85; line-height: 1.6; } .blog-grid { display: grid; gap: 16px; } .blog-card { background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-xl); padding: 26px 28px; transition: background 0.2s, border-color 0.2s, transform 0.2s; display: flex; flex-direction: column; gap: 10px; text-decoration: none; } .blog-card:hover { background: rgba(var(--card-rgb),0.07); border-color: rgba(var(--border-rgb),0.2); transform: translateY(-2px); } .blog-card-category { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); opacity: 0.85; } .blog-card-title { font-family: 'DM Sans', sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--white); line-height: 1.3; } .blog-card-excerpt { font-size: 0.88rem; color: var(--ice); opacity:0.85; line-height: 1.65; } .blog-card-meta { font-size: 0.75rem; color: var(--ice); opacity: 0.35; font-weight: 600; margin-top: 4px; } /* ── Blog post ───────────────────────────── */ .post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; font-weight: 700; color: var(--ice); opacity:0.85; margin-bottom: 32px; transition: opacity 0.15s; } .post-back:hover { opacity: 0.85; } .post-back svg { flex-shrink: 0; } .post-header { margin-bottom: 32px; } .post-category { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); opacity: 0.85; margin-bottom: 12px; } .post-title { font-family: 'DM Sans', sans-serif; font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); line-height: 1.18; margin-bottom: 16px; } .post-meta { font-size: 0.8rem; color: var(--ice); opacity:0.85; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .post-meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ice); opacity:0.35; flex-shrink: 0; } .post-excerpt { font-size: 1.1rem; color: var(--ice); opacity:0.85; line-height: 1.7; margin-bottom: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(var(--border-rgb),0.08); } /* ── Table of contents ───────────────────── */ .post-toc { background: rgba(var(--card-rgb),0.03); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 36px; } .post-toc-label { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ice); opacity:0.85; margin-bottom: 12px; } .post-toc ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .post-toc li a { font-size: 0.85rem; font-weight: 600; color: var(--ice); opacity:0.85; transition: opacity 0.15s, color 0.15s; } .post-toc li a:hover { opacity: 1; color: var(--white); } .post-toc li.level-3 { padding-left: 16px; } .post-toc li.level-3 a { font-size: 0.8rem; } /* ── Blog post body copy ─────────────────── */ .post-body { line-height: 1.78; color: var(--ice); } .post-body h2 { font-family: 'DM Sans', sans-serif; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.025em; color: var(--white); margin: 44px 0 14px; scroll-margin-top: 80px; } .post-body h3 { font-family: 'DM Sans', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--white); margin: 30px 0 10px; scroll-margin-top: 80px; } .post-body h4 { font-size: 0.95rem; font-weight: 800; color: var(--ice); margin: 24px 0 8px; scroll-margin-top: 80px; } .post-body p { margin: 0 0 18px; opacity:0.85; } .post-body a:not(.sv-btn) { color: var(--orange); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.15s; } .post-body a:not(.sv-btn):hover { opacity:0.85; } .post-body ul, .post-body ol { padding-left: 24px; margin: 0 0 18px; opacity:0.85; } .post-body li { margin-bottom: 6px; } .post-body figure.blog-image { margin: 28px 0; } .post-body figure.blog-image img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid rgba(var(--border-rgb),0.1); } .post-body figure.blog-image figcaption { margin-top: 8px; font-size: 0.75rem; color: var(--ice); opacity: 0.35; text-align: center; } .post-body .align-left img { margin-left: 0; margin-right: auto; } .post-body .align-center img { margin-left: auto; margin-right: auto; } .post-body .align-right img { margin-left: auto; margin-right: 0; } .post-body blockquote { margin: 28px 0; padding: 14px 20px; border-left: 3px solid var(--orange); background: rgba(245,158,43,0.05); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .post-body blockquote p { margin: 0 0 6px; opacity: 1; color: var(--ice); font-style: italic; } .post-body blockquote cite { display: block; font-size: 0.78rem; color: var(--ice); opacity:0.85; font-style: normal; font-weight: 700; } .post-body .callout { margin: 28px 0; padding: 16px 18px; border-radius: var(--radius-md); } .post-body .callout strong { display: block; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; } .post-body .callout p { margin: 0; opacity: 0.85; } .post-body .callout-info { background: rgba(42,95,165,0.15); border: 1px solid rgba(42,95,165,0.35); } .post-body .callout-info strong { color: var(--ice); } .post-body .callout-warning { background: rgba(234,179,8,0.08); border: 1px solid rgba(234,179,8,0.28); } .post-body .callout-warning strong { color: #fde047; } .post-body .callout-success { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.25); } .post-body .callout-success strong { color: #4ade80; } .post-body .callout-tip { background: rgba(20,184,166,0.07); border: 1px solid rgba(20,184,166,0.28); } .post-body .callout-tip strong { color: #2dd4bf; } .post-body .callout-qa { background: rgba(251,191,36,0.04); border: 1px solid rgba(251,191,36,0.15); border-left: 3px solid var(--orange); } .callout-qa-q, .callout-qa-a { margin: 0; line-height: 1.55; display: flex; gap: 8px; } .callout-qa-q { font-size: 0.92rem; font-weight: 700; color: var(--white); } .callout-qa-a { font-size: 0.875rem; color: var(--ice); opacity: 0.85; margin-top: 8px; } .callout-qa-marker { flex-shrink: 0; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); padding-top: 3px; min-width: 12px; } [data-theme="light"] .post-body .callout-qa { background: rgba(234,88,12,0.04); border-color: rgba(234,88,12,0.2); border-left-color: var(--orange); } [data-theme="light"] .callout-qa-q { color: var(--night); } /* ── Definition block ─────────────────────── Lightweight dictionary-entry card for inline term introductions. Lighter than a callout — no fill, just a quiet left rule. */ .post-body .blog-definition { margin: 20px 0; padding: 10px 14px; border-left: 2px solid rgba(184,212,240,0.25); } .blog-definition-term { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ice); opacity: 0.5; margin-bottom: 3px; } .blog-definition-body { margin: 0; font-size: 0.875rem; color: var(--ice); opacity: 0.85; line-height: 1.55; } [data-theme="light"] .post-body .blog-definition { border-left-color: rgba(0,0,0,0.18); } [data-theme="light"] .blog-definition-term { opacity: 0.4; } /* ── Code blocks ─────────────────────────── */ .post-body pre { position: relative; background: rgba(10,15,28,0.7); border: 1px solid rgba(184,212,240,0.1); border-radius: 10px; padding: 18px 20px; margin: 24px 0; overflow-x: auto; line-height: 1.65; } .post-body pre code { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; font-size: 0.82rem; color: #cdd9e5; background: none; padding: 0; white-space: pre; } .post-body pre[data-language]::before { content: attr(data-language); position: absolute; top: 10px; right: 14px; font-family: inherit; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(184,212,240,0.35); } [data-theme="light"] .post-body pre { background: #f1f5f9; border-color: rgba(0,0,0,0.08); } [data-theme="light"] .post-body pre code { color: #1e293b; } [data-theme="light"] .post-body pre[data-language]::before { color: rgba(0,0,0,0.25); } /* ── Post tags ───────────────────────────── */ .post-tags { margin-top: 44px; padding-top: 24px; border-top: 1px solid rgba(var(--border-rgb),0.08); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .post-tags-label { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ice); opacity: 0.35; } .post-tag { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; background: rgba(var(--card-rgb),0.06); border: 1px solid rgba(var(--border-rgb),0.12); color: var(--ice); opacity:0.85; } /* ── Article promo block ─────────────────── */ .post-body .blog-article-promo { margin: 32px 0; padding: 18px 20px; border-radius: 10px; border: 1px solid rgba(var(--border-rgb),0.14); background: rgba(var(--card-rgb),0.05); border-left: 3px solid var(--blue); } .blog-article-promo-label { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--blue); margin-bottom: 6px; opacity: 0.85; } .blog-article-promo-title { display: block; font-size: 1rem; font-weight: 700; color: var(--white); text-decoration: none; line-height: 1.4; } .blog-article-promo-title:hover { color: var(--ice); } .blog-article-promo-excerpt { margin: 6px 0 0; font-size: 0.85rem; color: var(--ice); opacity: 0.75; line-height: 1.5; } [data-theme="light"] .blog-article-promo { border-left-color: var(--blue); } /* ── In-article CTA block ────────────────── */ .post-body .blog-cta { margin: 36px 0; padding: 22px 24px; border-radius: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .blog-cta--subtle { background: rgba(var(--card-rgb),0.06); border: 1px solid rgba(var(--border-rgb),0.14); } .blog-cta--bold { background: rgba(42,95,165,0.18); border: 1px solid rgba(42,95,165,0.35); } .blog-cta-heading { font-size: 1.05rem; font-weight: 700; color: var(--white); line-height: 1.3; } .blog-cta-body { font-size: 0.88rem; color: var(--ice); opacity: 0.8; margin: 0; line-height: 1.5; } .blog-cta-btn { margin-top: 2px; } /* ── Staff draft preview bar ─────────────── */ .post-draft-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; padding: 12px 18px; background: rgba(245,158,43,0.12); border: 1.5px solid rgba(245,158,43,0.45); border-radius: var(--radius-md); color: var(--orange); font-size: 0.875rem; line-height: 1.4; } .post-draft-bar svg { flex-shrink: 0; } .post-draft-bar strong { color: var(--orange); } /* ── Post bottom CTA ─────────────────────── */ .post-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 44px; padding: 20px 24px; background: var(--navy-card); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-lg); flex-wrap: wrap; } .post-cta-left { display: flex; align-items: center; gap: 16px; } .post-cta-heading { font-size: 0.95rem; font-weight: 700; color: var(--white); margin-bottom: 2px; } .post-cta-sub { font-size: 0.82rem; color: var(--ice); } .post-cta-link { color: var(--orange); text-decoration: none; } .post-cta-link:hover { text-decoration: underline; } /* ── Responsive ──────────────────────────── */ @media (max-width: 768px) { .pub-wrap, .pub-wrap-narrow { padding: 28px 16px 60px; } .post-title { font-size: 1.75rem; } .blog-title { font-size: 1.65rem; } .pub-header-actions { display: none; } .pub-nav-toggle { display: flex; } } /* ── 404 page ────────────────────────────── */ .notfound-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px 100px; min-height: 60vh; } .notfound-penguin { width: 300px; max-width: 80vw; height: auto; margin-bottom: 32px; animation: fadeUp 0.5s ease both; filter: drop-shadow(0 16px 40px rgba(0,0,0,0.35)); } .notfound-heading { font-family: 'DM Sans', sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; color: var(--white); margin-bottom: 12px; animation: fadeUp 0.5s ease 0.08s both; } .notfound-sub { font-size: 0.95rem; color: var(--ice); opacity:0.85; max-width: 380px; line-height: 1.65; margin-bottom: 32px; animation: fadeUp 0.5s ease 0.14s both; } .notfound-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; animation: fadeUp 0.5s ease 0.2s both; } /* ═══════════════════════════════════════════════════════════ PUBLIC — PRICING PAGE ═══════════════════════════════════════════════════════════ */ /* Hero */ .pricing-hero { text-align: center; padding: 0px 0 48px; display: flex; flex-direction: column; align-items: center; gap: 18px; } .pricing-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--white); margin: 0; letter-spacing: -0.02em; } .pricing-sub { font-size: 1.05rem; color: var(--ice); opacity:0.85; max-width: 540px; line-height: 1.65; margin: 0; } /* Plan grid */ .pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 36px; } .pricing-card { background: var(--navy-card); border: 1px solid rgba(var(--border-rgb), 0.1); border-radius: var(--radius-lg); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 6px; position: relative; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, background 0.18s; } .pricing-card:hover { border-color: rgba(245,158,43,0.5); background: rgba(245,158,43,0.03); box-shadow: 0 0 0 1px rgba(245,158,43,0.15), 0 8px 32px rgba(0,0,0,0.2); } .pricing-card--selected { border-color: var(--orange); background: rgba(245,158,43,0.05); box-shadow: 0 0 0 1px rgba(245,158,43,0.3), 0 8px 32px rgba(0,0,0,0.22); } /* popular badge only — no permanent orange border */ .pricing-card--popular { } /* Badge (popular / limited) */ .pricing-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; white-space: nowrap; } .pricing-badge--popular { background: var(--orange); color: var(--navy); } .pricing-badge--limited { background: rgba(var(--border-rgb),0.12); color: var(--ice); border: 1px solid rgba(var(--border-rgb),0.2); } /* Plan name */ .pricing-plan-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1rem; font-weight: 800; color: var(--white); margin-bottom: 8px; } /* Price */ .pricing-price-wrap { display: flex; align-items: flex-end; gap: 3px; margin-bottom: 2px; } .pricing-amount { display: flex; align-items: flex-start; } .pricing-currency { font-size: 1rem; font-weight: 700; color: var(--ice); opacity:0.85; margin-top: 7px; } .pricing-amount .js-price { font-family: 'DM Sans', sans-serif; font-size: 2.1rem; font-weight: 800; color: var(--white); line-height: 1; } .pricing-period { font-size: 0.88rem; color: var(--ice); opacity:0.85; margin-bottom: 5px; } .pricing-equiv { font-size: 0.72rem; font-weight: 700; color: var(--ping-green); min-height: 14px; margin-bottom: 6px; } .pricing-overage { font-size: 0.73rem; color: var(--ice); opacity:0.85; margin-bottom: 10px; } /* Features */ .pricing-features { list-style: none; margin: 6px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .pricing-feature { display: flex; align-items: baseline; gap: 6px; font-size: 0.72rem; color: var(--ice); opacity:0.85; } .pricing-feature--highlight { opacity: 1; font-size: 0.78rem; font-weight: 700; } .pricing-feature-check { color: var(--ping-green); opacity: 0.85; flex-shrink: 0; } /* CTA */ .pricing-cta { margin-top: auto; width: 100%; justify-content: center; font-size: 0.85rem; transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s; } /* Button activates when its card is hovered or selected */ .pricing-card:hover .pricing-cta, .pricing-card--selected .pricing-cta { background: var(--orange); border-color: var(--orange); color: var(--navy); box-shadow: 0 4px 18px rgba(245,158,43,0.35); } /* Overage calculator */ .pricing-calc { background: rgba(var(--card-rgb),0.025); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-lg); padding: 28px 28px 24px; margin-bottom: 48px; } .pricing-calc-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ice); opacity:0.85; margin-bottom: 8px; } .pricing-calc-sub { font-size: 0.85rem; color: var(--ice); opacity:0.85; line-height: 1.6; margin: 0 0 18px; } .pricing-calc-controls { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; } .pricing-calc-field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 150px; } .pricing-calc-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ice); opacity:0.85; } .pricing-calc-rate { font-size: 0.7rem; color: var(--ice); opacity: 0.35; margin-top: 1px; } .pricing-calc-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid rgba(var(--border-rgb),0.07); } .pricing-calc-total { font-family: 'DM Sans', sans-serif; font-size: 1.8rem; font-weight: 800; color: var(--white); line-height: 1; } .pricing-calc-breakdown { font-size: 0.76rem; color: var(--ice); opacity:0.85; margin-top: 4px; } /* FAQ */ .pricing-faq { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; margin-bottom: 64px; } .pricing-faq-item { background: rgba(var(--card-rgb),0.025); border: 1px solid rgba(var(--border-rgb),0.08); border-radius: var(--radius-lg); padding: 20px 22px; } .pricing-faq-q { font-size: 0.88rem; font-weight: 800; color: var(--white); margin-bottom: 8px; } .pricing-faq-a { font-size: 0.8rem; color: var(--ice); opacity:0.85; line-height: 1.65; } .pricing-faq-a a { color: var(--ice); opacity: 0.85; text-decoration: underline; } .pricing-faq-a a:hover { opacity: 1; } /* ═══════════════════════════════════════════ SERVERVISOR BLOG SIDEBAR Loaded only on /blog/ index page ═══════════════════════════════════════════ */ .blog-pub-wrap { max-width: 1240px; } .blog-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; } .blog-sidebar { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 16px; } .blog-main { min-width: 0; } .blog-side-card { background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-xl); padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.16); } .blog-side-card-feature { background: radial-gradient(circle at top center, rgba(42,95,165,0.18), rgba(var(--card-rgb),0.04) 55%), rgba(var(--card-rgb),0.04); border-color: rgba(var(--border-rgb),0.16); } .blog-side-mascot-wrap { display: flex; justify-content: center; align-items: center; margin: -4px 0 2px; } .blog-side-mascot { display: block; width: 100%; max-width: 190px; height: auto; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22)); } .blog-side-eyebrow { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--orange); opacity: 0.95; } .blog-side-title { font-family: 'DM Sans', sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--white); line-height: 1.25; margin: 0; } .blog-side-text { font-size: 0.86rem; line-height: 1.6; color: var(--ice); opacity:0.85; } .blog-side-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; padding: 0; } .blog-side-bullets li { position: relative; padding-left: 16px; font-size: 0.82rem; line-height: 1.45; color: var(--ice-light); opacity: 0.88; } .blog-side-bullets li::before { content: ''; position: absolute; left: 0; top: 0.52rem; width: 6px; height: 6px; border-radius: 50%; background: var(--ping-green); box-shadow: 0 0 8px rgba(34,197,94,0.55); } .blog-side-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; } .blog-side-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 800; text-decoration: none; transition: transform 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s; } .blog-side-btn:hover { transform: translateY(-1px); } .blog-side-btn-primary { background: var(--orange); color: var(--navy); box-shadow: 0 4px 16px rgba(245,158,43,0.28); } .blog-side-btn-primary:hover { background: #fbbf24; box-shadow: 0 8px 22px rgba(245,158,43,0.35); } .blog-side-list { display: flex; flex-direction: column; gap: 10px; } .blog-side-list-item { display: block; background: rgba(var(--card-rgb),0.04); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-md); padding: 12px 14px; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .blog-side-list-item:hover { background: rgba(var(--card-rgb),0.07); border-color: rgba(var(--border-rgb),0.22); transform: translateY(-1px); } .blog-side-list-item strong { display: block; font-size: 0.84rem; font-weight: 800; color: var(--white); line-height: 1.35; } .blog-side-list-item span { display: block; margin-top: 4px; font-size: 0.77rem; line-height: 1.5; color: var(--ice); opacity:0.85; } @media (max-width: 1100px) { .blog-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 22px; } } @media (max-width: 980px) { .blog-pub-wrap { max-width: 960px; } .blog-layout { grid-template-columns: 1fr; gap: 20px; } .blog-sidebar { position: static; order: 2; } .blog-main { order: 1; } } @media (max-width: 768px) { .blog-pub-wrap { padding-left: 16px; padding-right: 16px; } .blog-side-card { padding: 18px; } .blog-side-mascot { max-width: 160px; } } /* ══════════════════════════════════════════════════════ NOTIFICATION CHANNELS — notifications.php ══════════════════════════════════════════════════════ */ /* ── Section tabs ── */ .sv-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid rgba(var(--border-rgb),0.09); padding-bottom: 0; } .sv-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; font-size: 0.82rem; font-weight: 600; color: var(--ice); opacity:0.85; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: opacity 0.15s, border-color 0.15s; cursor: pointer; } .sv-tab:hover { opacity:0.85; } .sv-tab--active { opacity: 1; border-bottom-color: var(--orange); color: var(--white); } .sv-tab-count { background: rgba(var(--border-rgb),0.15); color: var(--ice); font-size: 0.65rem; font-weight: 700; padding: 1px 6px; border-radius: 100px; } .sv-tab--active .sv-tab-count { background: rgba(245,158,43,0.18); color: var(--orange); } /* ── Channel / Group / Webhook rows ── */ .ch-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(var(--card-rgb),0.025); border: 1px solid rgba(var(--border-rgb),0.07); border-radius: var(--radius-sm); margin-bottom: 8px; transition: background 0.15s; } .ch-row:hover { background: rgba(var(--card-rgb),0.04); } .ch-logo { width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .ch-info { flex: 1; min-width: 0; } .ch-name { font-size: 0.88rem; font-weight: 700; color: var(--white); margin-bottom: 2px; } .ch-meta { font-size: 0.75rem; color: var(--ice); opacity:0.85; } .ch-events { display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0; max-width: 320px; } .ch-event-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 100px; font-size: 0.67rem; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: background 0.15s, opacity 0.15s; line-height: 1; } .ch-event-pill--on { background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); color: #4ade80; } .ch-event-pill--off { background: rgba(var(--border-rgb),0.05); border-color: rgba(var(--border-rgb),0.1); color: var(--ice); opacity:0.85; } .ch-event-pill:disabled { cursor: default; opacity:0.85; } .ch-actions { display: flex; gap: 6px; flex-shrink: 0; min-width: 140px; justify-content: flex-end; } /* ── Channel list column headers ── */ .ch-list-header { display: flex; align-items: center; gap: 14px; padding: 4px 16px 10px; font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ice); opacity:0.85; } .ch-list-header .ch-col-logo { width: 40px; flex-shrink: 0; } .ch-list-header .ch-col-channel { flex: 1; } .ch-list-header .ch-col-alerts { flex-shrink: 0; max-width: 320px; width: 320px; } .ch-list-header .ch-col-actions { flex-shrink: 0; min-width: 140px; text-align: right; } /* ── Event indicator tags (display-only, not interactive) ── */ .ch-sub-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; font-weight: 500; line-height: 1; pointer-events: none; user-select: none; } .ch-sub-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .ch-sub-pill--on { color: #93c5fd; opacity: 0.85; } .ch-sub-pill--on::before { background: #93c5fd; } .ch-sub-pill--off { color: var(--ice); opacity: 0.22; } .ch-sub-pill--off::before { background: var(--ice); } /* ── Small action buttons for channel rows ── */ .sv-btn-action { display: inline-flex; align-items: center; justify-content: center; padding: 5px 12px; font-size: 0.73rem; font-weight: 600; border-radius: var(--radius-sm); border: 1px solid rgba(var(--border-rgb),0.22); background: transparent; color: var(--ice); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1; white-space: nowrap; } .sv-btn-action:hover { background: rgba(var(--border-rgb),0.08); border-color: rgba(var(--border-rgb),0.4); color: var(--white); } .sv-btn-action--danger { border-color: rgba(239,68,68,0.28); color: #fca5a5; } .sv-btn-action--danger:hover { background: rgba(239,68,68,0.1); border-color: rgba(239,68,68,0.5); color: #fca5a5; } /* ── Modal footer (shared by all modal patterns) ── */ .modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } /* ── Channel type picker grid ── */ .channel-type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 4px; } .channel-type-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 14px 8px 10px; background: rgba(var(--card-rgb),0.03); border: 1px solid rgba(var(--border-rgb),0.1); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s, border-color 0.15s; position: relative; } .channel-type-btn:hover { background: rgba(var(--card-rgb),0.07); border-color: rgba(var(--border-rgb),0.22); } .channel-type-btn--active { border-color: var(--orange); background: rgba(245,158,43,0.07); } .channel-type-btn--locked { opacity:0.85; cursor: default; } .ch-type-logo { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; } .ch-type-name { font-size: 0.72rem; font-weight: 700; color: var(--ice); text-align: center; line-height: 1.2; } .ch-type-upgrade { position: absolute; top: 5px; right: 5px; font-size: 0.58rem; font-weight: 800; background: rgba(245,158,43,0.18); color: var(--orange); padding: 2px 5px; border-radius: 4px; } /* ── Event toggle rows in modal ── */ .ch-event-toggles { display: flex; flex-direction: column; gap: 8px; } /* ── Badge helpers ── */ .sv-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 100px; font-size: 0.7rem; font-weight: 700; } .sv-badge-info { background: rgba(99,102,241,0.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,0.25); } /* ── notif-empty override for channels page (opacity should allow button) ── */ #channelsEmpty, #groupsEmpty, #webhooksEmpty { opacity: 1; } #channelsEmpty > :not(button):not(.notif-empty-icon), #groupsEmpty > :not(button):not(.notif-empty-icon), #webhooksEmpty > :not(button):not(.notif-empty-icon) { opacity:0.85; } @media (max-width: 700px) { .ch-row { flex-wrap: wrap; } .ch-events { max-width: 100%; order: 3; width: 100%; } .ch-actions { order: 2; } .channel-type-grid { grid-template-columns: repeat(3, 1fr); } } /* ── Channel page empty states ── */ .ch-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 24px; gap: 10px; text-align: center; } .ch-empty-icon { font-size: 2.8rem; margin-bottom: 6px; line-height: 1; } .ch-empty-title { font-size: 0.95rem; font-weight: 700; color: var(--white); opacity:0.85; } .ch-empty-sub { font-size: 0.8rem; color: var(--ice); opacity:0.85; max-width: 340px; line-height: 1.5; margin-bottom: 6px; } /* ── Monitors page ── */ /* Kind picker cards (Uptime vs Heartbeat) */ .mon-kind-card { display: flex; align-items: flex-start; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid rgba(var(--border-rgb),0.14); border-radius: var(--radius-lg); background: rgba(var(--border-rgb),0.03); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; } .mon-kind-card:hover { border-color: rgba(var(--border-rgb),0.28); background: rgba(var(--border-rgb),0.07); } .mon-kind-card--locked { opacity:0.85; cursor: not-allowed; } .mon-kind-card--locked:hover { border-color: rgba(var(--border-rgb),0.14); background: rgba(var(--border-rgb),0.03); } .mon-kind-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(var(--border-rgb),0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ice); opacity:0.85; } .mon-kind-name { font-size: 0.88rem; font-weight: 700; color: var(--white); margin-bottom: 3px; } .mon-kind-desc { font-size: 0.75rem; color: var(--ice); opacity:0.85; line-height: 1.45; } /* Ping URL box */ .ping-url-box { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.25); border: 1px solid rgba(var(--border-rgb),0.12); border-radius: var(--radius); padding: 8px 10px; margin: 6px 0 4px; } .ping-url-box code { flex: 1; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.75rem; color: #93c5fd; word-break: break-all; line-height: 1.4; } .mon-type-option { flex: 1; position: relative; cursor: pointer; } .mon-type-option input[type=radio] { position: absolute; opacity: 0; width: 0; height: 0; } .mon-type-option span { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 14px; border-radius: 8px; border: 1px solid rgba(var(--border-rgb),0.12); background: rgba(var(--card-rgb),0.03); font-size: 0.82rem; font-weight: 600; color: var(--ice); transition: border-color 0.15s, background 0.15s; } .mon-type-option input[type=radio]:checked + span { border-color: var(--orange); background: rgba(245,158,43,0.06); color: var(--white); } .mon-type-option span:hover { border-color: rgba(var(--border-rgb),0.28); background: rgba(var(--border-rgb),0.05); } /* ── Alert routing target rows (monitors alerts modal) ── */ .alerts-target-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid rgba(var(--border-rgb),0.08); background: rgba(var(--border-rgb),0.03); cursor: pointer; transition: background 0.12s, border-color 0.12s; } .alerts-target-row:hover { background: rgba(var(--border-rgb),0.07); border-color: rgba(var(--border-rgb),0.14); } .alerts-target-row input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; accent-color: var(--orange); } .alerts-target-info { flex: 1; min-width: 0; } .alerts-target-name { font-size: 0.83rem; font-weight: 700; color: var(--white); } .alerts-target-sub { font-size: 0.71rem; color: var(--ice); opacity:0.85; margin-top: 2px; text-transform: capitalize; } /* ═══════════════════════════════════════════ SITE-WIDE ALERT BANNER Sits above the sticky nav. Always red — only used for critical billing states (no plan, past due, cancelled). Set $site_alert in bootstrap.php or any page before including header.php. ═══════════════════════════════════════════ */ .site-alert { position: sticky; top: 0; z-index: 101; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 32px; font-size: 0.83rem; font-weight: 600; line-height: 1.5; flex-wrap: wrap; background: #3a1010; border-bottom: 1px solid #6b2020; color: #fca5a5; } .site-alert-body { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .site-alert-icon { flex-shrink: 0; opacity:0.85; } .site-alert-cta { flex-shrink: 0; font-size: 0.78rem; font-weight: 700; padding: 5px 14px; border-radius: 6px; text-decoration: none; white-space: nowrap; background: rgba(239,68,68,0.18); color: #f87171; border: 1px solid rgba(239,68,68,0.32); transition: opacity 0.15s; cursor: pointer; } .site-alert-cta:hover { opacity:0.85; } /* ── Global toast notifications ────────────────────────────── Created dynamically by showToast() in scripts.js. Types: info (default) | success | error ─────────────────────────────────────────────────────────── */ .sv-toast { position: fixed; bottom: 28px; right: 28px; z-index: 9500; padding: 11px 18px; border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600; line-height: 1.4; max-width: 360px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease; background: var(--navy-card); border: 1px solid rgba(var(--border-rgb),0.15); color: var(--ice); } .sv-toast.sv-toast-show { opacity: 1; transform: translateY(0); } .sv-toast.sv-toast-success { background: #0d2b1a; border-color: rgba(34,197,94,0.3); color: #4ade80; } .sv-toast.sv-toast-error { background: #2a0d0d; border-color: rgba(239,68,68,0.3); color: #f87171; } @media (max-width: 480px) { .sv-toast { bottom: 16px; right: 16px; left: 16px; max-width: none; } } /* Info variant — email verification banner (blue-tinted) */ .site-alert.site-alert-info { background: #0e2040; border-bottom-color: #1e3a60; color: #93c5fd; } .site-alert.site-alert-info .site-alert-cta { background: rgba(96,165,250,0.15); color: #93c5fd; border-color: rgba(96,165,250,0.3); } @media (max-width: 768px) { .site-alert { padding: 10px 16px; } } /* ═══════════════════════════════════════════════════════════════════ LIGHT MODE — CONTRAST & SCOPED OVERRIDES ═══════════════════════════════════════════════════════════════════ */ /* ── Dark header scope ──────────────────────────────────────────── Resets ALL CSS custom properties inside the header to dark-mode values so children (nav, user pill, dropdown, tooltip) inherit the correct dark palette — no per-element overrides needed. Also keeps the logo readable without a second SVG asset. */ [data-theme="light"] .site-header { background: rgba(15, 28, 46, 0.92); border-bottom-color: rgba(184, 212, 240, 0.1); /* Scoped dark-mode variable reset — all children inherit */ --navy: #0f1c2e; --navy-mid: #162540; --navy-card: #1a2d47; --ice: #cce4ff; --ice-light: #e8f2fc; --white: #ffffff; --card-rgb: 255, 255, 255; --border-rgb: 184, 212, 240; --navy-rgb: 15, 28, 46; } /* Ensure logo filter is cleared inside dark header */ [data-theme="light"] .site-header .logo img { filter: none; } /* ── Primary button text ───────────────────────────────────────── .sv-btn-primary uses color: var(--navy) expecting it to be dark. In light mode --navy flips light, so we anchor it to always-dark. */ [data-theme="light"] .sv-btn-primary { color: #0f1c2e; } /* Orange text on light bg is ~2.3:1 — fails WCAG. Swap to brand blue for readability. */ [data-theme="light"] .sv-btn-secondary { color: var(--blue); border-color: rgba(42,95,165,0.35); } [data-theme="light"] .sv-btn-secondary:hover { background: rgba(42,95,165,0.07); border-color: rgba(42,95,165,0.6); } /* pub-header always stays dark — keep its buttons on the dark-mode palette */ [data-theme="light"] .pub-header .sv-btn-secondary { color: var(--orange); border-color: rgba(245,158,43,0.45); } [data-theme="light"] .pub-header .sv-btn-secondary:hover { background: rgba(245,158,43,0.08); border-color: var(--orange); } [data-theme="light"] .billing-meta-val .edit-link { color: var(--blue); } .billing-save-badge { background: rgba(251,146,60,0.15); color: var(--orange); border: 1px solid rgba(251,146,60,0.3); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.07em; padding: 2px 7px; border-radius: 4px; cursor: pointer; white-space: nowrap; } [data-theme="light"] .billing-save-badge { background: rgba(42,95,165,0.10); color: var(--blue); border-color: rgba(42,95,165,0.3); } /* Orange in dark mode, blue in light mode. Use for emphasis text, highlight labels, and inline warnings. Never use color:#fbbf24 inline — use this class instead. */ .sv-orange-action { color: var(--orange); } [data-theme="light"] .sv-orange-action { color: var(--blue) !important; } [data-theme="light"] .plan-tier-badge, [data-theme="light"] .pricing-badge--popular, [data-theme="light"] .badge-highlight { color: #0f1c2e; } /* ── Accessible status colors for light backgrounds ────────────── Bright neons (#4ade80, #fde047, #f87171, #93c5fd) are invisible on white. Replace with WCAG AA equivalents. */ [data-theme="light"] { --ping-green: #16a34a; --ping-red: #dc2626; --ping-yellow: #ca8a04; --ping-grey: #475569; } /* Status badges — text colour */ [data-theme="light"] .badge-up { background: rgba(22,163,74,0.10); color: #15803d; } [data-theme="light"] .badge-down { background: rgba(220,38,38,0.10); color: #b91c1c; } [data-theme="light"] .badge-warn { background: rgba(202,138,4,0.12); color: #92400e; } [data-theme="light"] .badge-slow { background: rgba(202,138,4,0.12); color: #854d0e; } [data-theme="light"] .badge-degraded { background: rgba(234,88,12,0.10); color: #c2410c; } [data-theme="light"] .badge-off { background: rgba(71,85,105,0.10); color: #475569; } [data-theme="light"] .badge-pending { background: rgba(42,95,165,0.10); color: #1e3a8a; } [data-theme="light"] .badge-savings { color: #15803d; } /* Response time colours */ [data-theme="light"] .response-fast { color: #15803d; } [data-theme="light"] .response-ok { color: #92400e; } [data-theme="light"] .response-slow { color: #b91c1c; } /* Domain/SSL expiry */ [data-theme="light"] .whois-expiry-critical { color: #b91c1c; } /* Priority badges */ [data-theme="light"] .priority-low { background: rgba(71,85,105,0.12); color: #475569; } [data-theme="light"] .priority-medium { background: rgba(42,95,165,0.12); color: #1e3a8a; } [data-theme="light"] .priority-high { background: rgba(202,138,4,0.12); color: #92400e; } [data-theme="light"] .priority-critical { background: rgba(220,38,38,0.12); color: #b91c1c; } /* Monitor sub-type labels — WCAG AA on white */ [data-theme="light"] .sub-type--tcp { color: #5b21b6; } /* deep purple */ [data-theme="light"] .sub-type--ping { color: #15803d; } /* deep green */ [data-theme="light"] .sub-type--api { color: #0369a1; } /* deep blue */ /* Seg-control inactive buttons — boost opacity in light mode since var(--white)=#0d1b2e at 55% is borderline on a white card */ [data-theme="light"] .seg-control-btn { opacity: 0.75; } [data-theme="light"] .seg-control-btn:hover { opacity: 0.9; } /* Notification tags */ [data-theme="light"] .notif-tag-monitor { background: rgba(220,38,38,0.10); color: #b91c1c; } [data-theme="light"] .notif-tag-monitor-up { background: rgba(22,163,74,0.10); color: #15803d; } [data-theme="light"] .notif-tag-billing { background: rgba(202,138,4,0.12); color: #92400e; } [data-theme="light"] .notif-tag-system { background: rgba(42,95,165,0.12); color: #1e3a8a; } [data-theme="light"] .notif-tag-account { background: rgba(71,85,105,0.12); color: #475569; } [data-theme="light"] .notif-tag-ticket { background: rgba(139,92,246,0.12); color: #5b21b6; } /* Channel chips */ [data-theme="light"] .channel-chip-email { background: rgba(22,163,74,0.10); color: #15803d; } [data-theme="light"] .channel-chip-sms { background: rgba(202,138,4,0.12); color: #92400e; } [data-theme="light"] .channel-chip-webhook { background: rgba(139,92,246,0.12); color: #5b21b6; } [data-theme="light"] .channel-chip-push { background: rgba(14,165,233,0.12); color: #0369a1; } /* Integration status */ [data-theme="light"] .integration-status-connected { background: rgba(22,163,74,0.10); color: #15803d; } [data-theme="light"] .integration-status-disconnected { background: rgba(71,85,105,0.10); color: #475569; } /* Action strip accent text */ [data-theme="light"] .action-strip-title strong { color: #92400e; } /* Blog/post callouts */ [data-theme="light"] .post-body .callout-warning strong { color: #92400e; } [data-theme="light"] .post-body .callout-success strong { color: #15803d; } /* Heartbeat / ping-url code */ [data-theme="light"] .ping-url-box code { color: #1e3a8a; } /* Usage overage */ [data-theme="light"] .usage-overage { color: #92400e; } /* Summary card labels */ [data-theme="light"] .summary-label-alert { color: #b91c1c; } /* Neutral summary-card pill: dark mode reversed */ [data-theme="dark"] .summary-card:not(.summary-card-up):not(.summary-card-warn):not(.summary-card-alert) .summary-card-pill { background: #e8edf4; color: #1a2d47; } /* Event pills (notification channels page) */ [data-theme="light"] .ch-event-pill--on { background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.25); color: #15803d; } [data-theme="light"] .ch-sub-pill--on { color: #1e3a8a; } /* SV badge info */ [data-theme="light"] .sv-badge-info { background: rgba(99,102,241,0.10); color: #4338ca; border-color: rgba(99,102,241,0.2); } /* Danger button — keep readable */ [data-theme="light"] .sv-btn-danger { background: rgba(220,38,38,0.10); color: #b91c1c; border-color: rgba(220,38,38,0.2); } [data-theme="light"] .sv-btn-action--danger { border-color: rgba(220,38,38,0.3); color: #b91c1c; } [data-theme="light"] .sv-btn-action--danger:hover { background: rgba(220,38,38,0.08); border-color: rgba(220,38,38,0.5); } [data-theme="light"] .user-dropdown-item-danger { color: #b91c1c; } [data-theme="light"] .user-dropdown-item-danger:hover { background: rgba(220,38,38,0.08); } [data-theme="light"] .row-menu-item-danger { color: #b91c1c; } [data-theme="light"] .row-menu-item-danger:hover { background: rgba(220,38,38,0.07); } [data-theme="light"] .disable-monitor-btn { color: #b91c1c !important; border-color: rgba(220,38,38,0.25) !important; } [data-theme="light"] .disable-monitor-btn:hover { background: rgba(220,38,38,0.08) !important; } [data-theme="light"] .filter-pill--warn { color: #b91c1c !important; } [data-theme="light"] .filter-pill--warn.active { background: rgba(220,38,38,0.10) !important; } [data-theme="light"] .sv-btn-danger-ghost { color: #b91c1c !important; } [data-theme="light"] .contact-tag-remove:hover { color: #b91c1c; } /* Row down tint — darker red on light bg */ [data-theme="light"] .row-down { background: rgba(220,38,38,0.055); } [data-theme="light"] .row-down:hover { background: rgba(220,38,38,0.09) !important; } /* Row changed — orange accent on light bg */ [data-theme="light"] .row-changed { background: rgba(194,65,12,0.05); border-left-color: rgba(194,65,12,0.3); } [data-theme="light"] .row-changed:hover { background: rgba(194,65,12,0.09) !important; } /* sv-row-link on light bg */ [data-theme="light"] .sv-row-link { color: #1d4ed8; } /* sv-inline-error on light bg */ [data-theme="light"] .sv-inline-error { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.2); color: #b91c1c; } /* Paused stripe — navy on light bg */ [data-theme="light"] .row-unmonitored { background-image: repeating-linear-gradient( -45deg, transparent, transparent 10px, rgba(15,28,46,0.055) 10px, rgba(15,28,46,0.055) 20px ); } [data-theme="light"] .row-unmonitored:hover { background-image: repeating-linear-gradient( -45deg, rgba(15,28,46,0.015) 0, rgba(15,28,46,0.015) 10px, rgba(15,28,46,0.07) 10px, rgba(15,28,46,0.07) 20px ) !important; } /* Pricing card CTA on hover/selected — keep dark text on orange */ [data-theme="light"] .pricing-card:hover .pricing-cta, [data-theme="light"] .pricing-card--selected .pricing-cta { color: #0f1c2e; } /* Input placeholder — readable in light */ [data-theme="light"] .sv-input::placeholder { color: rgba(15,28,46,0.3); } [data-theme="light"] .sv-input:focus { background: rgba(0,0,0,0.06); } [data-theme="light"] .sv-input, [data-theme="light"] textarea.sv-input { background: rgba(0,0,0,0.04); border-color: rgba(15,28,46,0.18); } [data-theme="light"] .sv-select { background-color: rgba(0,0,0,0.04); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f1c2e' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); border-color: rgba(15,28,46,0.18); } [data-theme="light"] .sv-select option { background: #ffffff; color: #0d1b2e; } /* Table hover — slightly more visible on light */ [data-theme="light"] .domain-table tbody tr:hover { background: rgba(0,0,0,0.025); } [data-theme="light"] .priority-table tr:hover td { background: rgba(0,0,0,0.02); } /* ── Light mode: mon-kind-card (monitor type picker) ───────────────────── Icons and badges use inline style="color:#fbbf24" (bright amber, ~1.7:1 on white). Locked card stacks opacity:0.85 twice → 0.72 effective. */ /* 1. Icon SVGs — override amber to dark amber, readable on peach bg */ [data-theme="light"] .mon-kind-icon { color: #b45309 !important; } /* 2. All inline amber text: "Most common", "Incoming", upgrade prompt */ [data-theme="light"] [style*="color:#fbbf24"] { color: #b45309 !important; } /* 3. Locked card — remove global opacity dim; color alone conveys state */ [data-theme="light"] .mon-kind-card--locked { opacity: 1; } /* 4. Upgrade prompt — full opacity + deep amber (was stacked at 0.72) */ [data-theme="light"] .mon-kind-card--locked .mon-kind-desc span { color: #92400e !important; opacity: 1 !important; } /* 5. Business+ badge — subtle dark bg, full opacity */ [data-theme="light"] .mon-kind-card--locked .mon-kind-name > span { background: rgba(15,28,46,0.07) !important; color: #374151 !important; opacity: 1 !important; } /* ── Light mode: modal inline-style color overrides ────────────────────── Error / validation messages use inline style="color:#fca5a5" (dark-mode pink) which is invisible on white. Target both specific error divs and the attribute pattern to cover all modals. */ [data-theme="light"] #createError, [data-theme="light"] #createHostError, [data-theme="light"] #hbError, [data-theme="light"] #verifyError, [data-theme="light"] #sslHistoryError, [data-theme="light"] #incModalError, [data-theme="light"] [style*="color:#fca5a5"] { color: #b91c1c !important; } /* Success text (neon #4ade80 invisible on white) */ [data-theme="light"] [style*="color:#4ade80"] { color: #15803d !important; } /* Hardcoded dark-mode info boxes — backgrounds/borders disappear on white */ [data-theme="light"] #createSelectedSummary { background: rgba(0,0,0,0.04) !important; border-color: rgba(15,28,46,0.12) !important; } [data-theme="light"] #hbSetupExamples { background: rgba(0,0,0,0.04) !important; border-color: rgba(15,28,46,0.12) !important; } [data-theme="light"] #verifyFileInstructions { background: rgba(0,0,0,0.04) !important; border-color: rgba(15,28,46,0.12) !important; } /* Incident modal section dividers (inline rgba(184,212,240,0.08) = invisible on white) */ [data-theme="light"] #incModalSummary, [data-theme="light"] #incModalAckWrap, [data-theme="light"] #incModalNoteWrap { border-bottom-color: rgba(15,28,46,0.1) !important; } [data-theme="light"] .add-hint { opacity: 0.6; } /* Incidents: show/hide ack menu items based on row state */ .inc-row[data-acked="0"] .inc-unack-item { display: none; } .inc-row[data-acked="1"] .inc-ack-item { display: none; } /* Hide ack items + their divider entirely for resolved incidents */ .inc-row[data-status="resolved"] .inc-ack-item, .inc-row[data-status="resolved"] .inc-unack-item, .inc-row[data-status="resolved"] .inc-ack-divider { display: none; } /* ── Monitor addon slot sliders (billing.php) ───────────────── */ .mon-addon-tier-block { padding-bottom: 14px; border-bottom: 1px solid rgba(184,212,240,0.07); } .mon-addon-tier-block:last-of-type { border-bottom: none; padding-bottom: 0; } /* ── Monitor tier speed badges ─────────────────────────────── */ .tier-badge { display: inline-flex; align-items: center; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 100px; white-space: nowrap; } .tier-badge--1m { background: rgba(245,158,43,0.15); color: var(--orange); border: 1px solid rgba(245,158,43,0.3); } .tier-badge--15m { background: rgba(42,95,165,0.15); color: var(--blue); border: 1px solid rgba(42,95,165,0.3); } .tier-badge--60m { background: rgba(255,255,255,0.06); color: var(--ice); border: 1px solid rgba(255,255,255,0.12); } [data-theme="light"] .tier-badge--1m { background: var(--orange); color: #fff; border-color: var(--orange); } [data-theme="light"] .tier-badge--15m { background: rgba(42,95,165,0.08); border-color: rgba(42,95,165,0.3); color: #1d4ed8; } [data-theme="light"] .tier-badge--60m { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #4b5563; }