/* Heimdall skin. Design language: quiet business SaaS in the vein of Hyperping and Fluent. One accent (emerald), two surface levels above the page, soft tinted chips instead of solid badges, 14px body type on the self-hosted Inter variable font. Dark mode rides Bootstrap's data-bs-theme attribute, set on before paint; every color below goes through a token so both themes stay in step. */ /* ---- Fonts ---- */ @font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/css/fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "Inter var"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/static/css/fonts/InterVariable-Italic.woff2") format("woff2"); } /* ---- Design tokens ---- */ :root { /* Brand accent */ --hd-green: #10b981; --hd-green-hover: #0da173; --hd-green-soft: #d9f4ea; --hd-green-soft-text: #067a55; --hd-red: #ef4444; --hd-link: #0e9268; /* Surfaces: page, card, sunken (inputs, segmented tracks), raised (dropdowns, tooltips), sidebar. */ --hd-bg: #f6f7f9; --hd-surface: #ffffff; --hd-surface-2: #f0f2f5; --hd-surface-raised: #ffffff; --hd-sidebar-bg: #f1f3f6; --hd-border: #e6e8ee; --hd-border-strong: #d5dae2; --hd-text: #16191f; --hd-muted: #66707f; --hd-faint: #98a1b0; --hd-paused: #cbd2dc; --hd-row-hover: rgba(22, 25, 31, 0.03); --hd-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05); --hd-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.03); --hd-shadow-pop: 0 4px 6px -2px rgba(16, 24, 40, 0.05), 0 12px 16px -4px rgba(16, 24, 40, 0.12); /* Semantic tints. Blue is reserved for planned work, so "under maintenance" never reads as a failure. */ --hd-info: #3b82f6; --hd-info-soft: #dcebfe; --hd-info-soft-text: #1d5cd8; --hd-amber-soft: #fdf0cd; --hd-amber-soft-text: #91530e; --hd-red-soft: #fde5e5; --hd-red-soft-text: #b62020; --hd-grey-soft: #eef0f3; --hd-grey-soft-text: #58606e; /* Bootstrap bridge. The -rgb triplets must track their hex twins: the bg-body-* and text-body-* utilities read only the triplets. */ --bs-body-bg: #f6f7f9; --bs-body-bg-rgb: 246, 247, 249; --bs-body-color: #16191f; --bs-body-color-rgb: 22, 25, 31; --bs-emphasis-color: #05070a; --bs-emphasis-color-rgb: 5, 7, 10; --bs-secondary-color: #66707f; --bs-secondary-color-rgb: 102, 112, 127; --bs-secondary-bg: #f0f2f5; --bs-secondary-bg-rgb: 240, 242, 245; --bs-tertiary-color: #98a1b0; --bs-tertiary-bg: #f0f2f5; --bs-tertiary-bg-rgb: 240, 242, 245; --bs-border-color: #e6e8ee; --bs-link-color: #0e9268; --bs-link-color-rgb: 14, 146, 104; --bs-link-hover-color: #067a55; --bs-link-hover-color-rgb: 6, 122, 85; --bs-body-font-size: 0.875rem; --bs-body-font-family: "Inter var", "Inter", "Segoe UI Variable Text", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } /* This block must stay below :root: same specificity, so source order decides. */ [data-bs-theme="dark"] { --hd-green: #12c088; --hd-green-hover: #0fae7b; --hd-green-soft: rgba(18, 192, 136, 0.13); --hd-green-soft-text: #3fd6a4; --hd-link: #34d399; --hd-bg: #0b0e14; --hd-surface: #11151d; --hd-surface-2: #181d28; --hd-surface-raised: #1a2029; --hd-sidebar-bg: #0d1119; --hd-border: #1f2530; --hd-border-strong: #2a3140; --hd-text: #e7eaf1; --hd-muted: #8b93a5; --hd-faint: #5d6577; --hd-paused: #3d4554; --hd-row-hover: rgba(231, 234, 241, 0.03); --hd-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25); --hd-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2); --hd-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.45); --hd-info: #60a5fa; --hd-info-soft: rgba(59, 130, 246, 0.16); --hd-info-soft-text: #93c5fd; --hd-amber-soft: rgba(250, 178, 25, 0.14); --hd-amber-soft-text: #fcd34d; --hd-red-soft: rgba(239, 68, 68, 0.14); --hd-red-soft-text: #fca5a5; --hd-grey-soft: rgba(156, 163, 175, 0.12); --hd-grey-soft-text: #9ca3af; --bs-body-bg: #0b0e14; --bs-body-bg-rgb: 11, 14, 20; --bs-body-color: #e7eaf1; --bs-body-color-rgb: 231, 234, 241; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: #8b93a5; --bs-secondary-color-rgb: 139, 147, 165; --bs-secondary-bg: #181d28; --bs-secondary-bg-rgb: 24, 29, 40; --bs-tertiary-color: #5d6577; --bs-tertiary-bg: #181d28; --bs-tertiary-bg-rgb: 24, 29, 40; --bs-border-color: #1f2530; --bs-link-color: #34d399; --bs-link-color-rgb: 52, 211, 153; --bs-link-hover-color: #6ee7b7; --bs-link-hover-color-rgb: 110, 231, 183; } /* ---- Base ---- */ body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -0.015em; } /* Stat values line up when they tick over. */ .h1, .h2, .h3, .h4, .table, .chart-label { font-variant-numeric: tabular-nums; } a { text-decoration: none; } a:hover { text-decoration: underline; } .btn:hover, .nav-link:hover, a.badge:hover { text-decoration: none; } ::selection { background: rgba(16, 185, 129, 0.22); } * { scrollbar-width: thin; scrollbar-color: var(--hd-border-strong) transparent; } .text-secondary { color: var(--hd-muted) !important; } .text-success { color: var(--hd-green) !important; } /* Fluent-style focus: a crisp offset ring instead of a blurred glow. */ .btn:focus-visible, .nav-link:focus-visible, a:focus-visible { outline: 2px solid var(--hd-green); outline-offset: 2px; box-shadow: none; } .border-bottom, .border-top { border-color: var(--hd-border) !important; } /* htmx: subtle feedback while a request is in flight */ .htmx-request { opacity: 0.55; transition: opacity 0.15s ease-in; } /* ---- Buttons ---- */ .btn { --bs-btn-font-size: 0.875rem; --bs-btn-border-radius: 0.5rem; --bs-btn-font-weight: 500; transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease; } .btn-sm, .btn-group-sm > .btn { --bs-btn-font-size: 0.8125rem; --bs-btn-border-radius: 0.45rem; } /* Primary action: brand green with a faint inner highlight so it reads as a surface, not a flat fill. */ .btn-success { --bs-btn-bg: var(--hd-green); --bs-btn-border-color: var(--hd-green); --bs-btn-hover-bg: var(--hd-green-hover); --bs-btn-hover-border-color: var(--hd-green-hover); --bs-btn-active-bg: var(--hd-green-hover); --bs-btn-active-border-color: var(--hd-green-hover); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--hd-shadow-xs); } /* The other solid variants get the same treatment as btn-success so no button on the page reads as stock Bootstrap. Blue stays reserved for planned work (maintenance), amber for upgrade and acknowledge actions. */ .btn-primary { --bs-btn-bg: #3b82f6; --bs-btn-border-color: #3b82f6; --bs-btn-hover-bg: #2f6fe0; --bs-btn-hover-border-color: #2f6fe0; --bs-btn-active-bg: #2f6fe0; --bs-btn-active-border-color: #2f6fe0; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--hd-shadow-xs); } .btn-warning { --bs-btn-bg: #d97706; --bs-btn-border-color: #d97706; --bs-btn-hover-bg: #b45309; --bs-btn-hover-border-color: #b45309; --bs-btn-active-bg: #b45309; --bs-btn-active-border-color: #b45309; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--hd-shadow-xs); } .btn-danger { --bs-btn-bg: #ef4444; --bs-btn-border-color: #ef4444; --bs-btn-hover-bg: #dc2626; --bs-btn-hover-border-color: #dc2626; --bs-btn-active-bg: #dc2626; --bs-btn-active-border-color: #dc2626; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--hd-shadow-xs); } /* The workhorse secondary button: neutral surface with a real border, not Bootstrap's gray outline. */ .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-bg: var(--hd-surface); --bs-btn-border-color: var(--hd-border-strong); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-hover-bg: var(--hd-surface-2); --bs-btn-hover-border-color: var(--hd-border-strong); --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--hd-surface-2); --bs-btn-active-border-color: var(--hd-border-strong); box-shadow: var(--hd-shadow-xs); } .btn-outline-danger { --bs-btn-color: var(--hd-red-soft-text); --bs-btn-bg: var(--hd-surface); --bs-btn-border-color: var(--hd-border-strong); --bs-btn-hover-color: var(--hd-red-soft-text); --bs-btn-hover-bg: var(--hd-red-soft); --bs-btn-hover-border-color: var(--hd-border-strong); --bs-btn-active-color: var(--hd-red-soft-text); --bs-btn-active-bg: var(--hd-red-soft); --bs-btn-active-border-color: var(--hd-border-strong); box-shadow: var(--hd-shadow-xs); } /* Row actions melt into the table until hovered: icon buttons, no chrome. */ .table .btn-outline-secondary, .table .btn-outline-danger { background: transparent; border-color: transparent; box-shadow: none; color: var(--hd-muted); } .table .btn-outline-secondary:hover { background: var(--hd-surface-2); color: var(--bs-emphasis-color); } .table .btn-outline-danger:hover { background: var(--hd-red-soft); color: var(--hd-red-soft-text); } /* Toggle groups (the ones with a selected .btn-success inside) become a segmented control: sunken track, raised chip for the active option. Plain action groups keep the joined-buttons layout. */ .btn-group:has(> .btn-success), .btn-group:has(> form > .btn-success) { background: var(--hd-surface-2); border: 1px solid var(--hd-border); border-radius: 0.625rem; padding: 3px; gap: 2px; } .btn-group:has(> .btn-success) > .btn, .btn-group:has(> form > .btn-success) > .btn { border: 0; border-radius: 0.45rem !important; background: transparent; color: var(--hd-muted); box-shadow: none; font-weight: 500; } .btn-group:has(> .btn-success) > .btn:hover, .btn-group:has(> form > .btn-success) > .btn:hover { color: var(--bs-emphasis-color); } .btn-group:has(> .btn-success) > .btn-success, .btn-group:has(> form > .btn-success) > .btn-success { background: var(--hd-surface); color: var(--bs-emphasis-color); box-shadow: var(--hd-shadow-xs); } /* ---- Cards ---- */ .card { --bs-card-bg: var(--hd-surface); --bs-card-border-color: var(--hd-border); --bs-card-border-radius: 0.75rem; --bs-card-inner-border-radius: calc(0.75rem - 1px); border: 1px solid var(--hd-border); box-shadow: var(--hd-shadow-card); } /* Templates say bg-body on headers and footers; on a card that must mean "the card's surface", not the page behind it. */ .card > .card-header, .card > .card-footer { background: transparent !important; border-color: var(--hd-border); } .card > .card-header { padding-top: 0.875rem; padding-bottom: 0.875rem; font-size: 0.875rem; } /* ---- Tables ---- */ .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--hd-border); --bs-table-hover-bg: var(--hd-row-hover); --bs-table-hover-color: var(--bs-body-color); margin-bottom: 0; } .table thead th { color: var(--hd-muted); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding-top: 0.75rem; padding-bottom: 0.6rem; } .table td { padding-top: 0.8rem; padding-bottom: 0.8rem; } .table > :not(caption) > * > * { box-shadow: none; } /* The last row's border would double up with the card edge (or a card-footer's top border) right below it. Let the container draw that line. */ .table > tbody:last-child > tr:last-child > * { border-bottom-width: 0; } /* Tree indentation in the monitor list */ .tree-indent { display: inline-block; } /* ---- Badges ---- */ .badge { font-weight: 500; font-size: 0.72rem; letter-spacing: 0.01em; padding: 0.34em 0.55em; border-radius: 0.375rem; } /* Solid Bootstrap fills become quiet tints; color carries the meaning, the page keeps its calm. */ .badge.text-bg-danger { background: var(--hd-red-soft) !important; color: var(--hd-red-soft-text) !important; } .badge.text-bg-warning { background: var(--hd-amber-soft) !important; color: var(--hd-amber-soft-text) !important; } .badge.text-bg-success { background: var(--hd-green-soft) !important; color: var(--hd-green-soft-text) !important; } .badge.text-bg-info, .badge.text-bg-primary { background: var(--hd-info-soft) !important; color: var(--hd-info-soft-text) !important; } .badge.text-bg-secondary, .badge.text-bg-light, .badge.text-bg-dark { background: var(--hd-grey-soft) !important; color: var(--hd-grey-soft-text) !important; } .badge.bg-body-secondary { border: 1px solid var(--hd-border); color: var(--hd-muted) !important; } .badge-status-up { background: var(--hd-green-soft); color: var(--hd-green-soft-text); } /* ---- Forms ---- */ .form-label { font-weight: 500; font-size: 0.85rem; margin-bottom: 0.35rem; } .form-control, .form-select { background-color: var(--hd-surface); border-color: var(--hd-border-strong); border-radius: 0.5rem; font-size: 0.875rem; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .form-control::placeholder { color: var(--hd-faint); } .form-control:focus, .form-select:focus, .form-check-input:focus { background-color: var(--hd-surface); border-color: var(--hd-green); box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.18); } .form-check-input { background-color: var(--hd-surface-2); border-color: var(--hd-border-strong); } .form-check-input:checked { background-color: var(--hd-green); border-color: var(--hd-green); } .input-group-text { background-color: var(--hd-surface-2); border-color: var(--hd-border-strong); color: var(--hd-muted); font-size: 0.875rem; } .form-text { color: var(--hd-muted); } /* ---- Dropdowns ---- */ .dropdown-menu { --bs-dropdown-bg: var(--hd-surface-raised); --bs-dropdown-border-color: var(--hd-border); --bs-dropdown-border-radius: 0.625rem; --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--hd-surface-2); --bs-dropdown-link-hover-color: var(--bs-emphasis-color); --bs-dropdown-link-active-bg: var(--hd-green-soft); --bs-dropdown-link-active-color: var(--hd-green-soft-text); --bs-dropdown-divider-bg: var(--hd-border); box-shadow: var(--hd-shadow-pop); padding: 0.375rem; font-size: 0.875rem; } .dropdown-item { border-radius: 0.4rem; padding: 0.4rem 0.6rem; } /* ---- Modals, offcanvas ---- */ .modal-content { background: var(--hd-surface-raised); border: 1px solid var(--hd-border); border-radius: 0.875rem; box-shadow: var(--hd-shadow-pop); } .modal-header, .modal-footer { border-color: var(--hd-border); } .modal-backdrop { --bs-backdrop-opacity: 0.6; } .offcanvas, .offcanvas-lg { --bs-offcanvas-bg: var(--hd-sidebar-bg); } /* ---- List groups ---- */ .list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--hd-border); --bs-list-group-action-hover-bg: var(--hd-row-hover); --bs-list-group-action-hover-color: var(--bs-emphasis-color); } /* ---- Alerts ---- */ .alert { border-radius: 0.625rem; border: 1px solid transparent; } .alert-success { background: var(--hd-green-soft); color: var(--hd-green-soft-text); border-color: transparent; } .alert-danger { background: var(--hd-red-soft); color: var(--hd-red-soft-text); border-color: transparent; } .alert-warning { background: var(--hd-amber-soft); color: var(--hd-amber-soft-text); border-color: transparent; } .alert-info { background: var(--hd-info-soft); color: var(--hd-info-soft-text); border-color: transparent; } .alert-secondary { background: var(--hd-grey-soft); color: var(--hd-grey-soft-text); border-color: transparent; } /* ---- Tabs: underline style ---- */ .nav-tabs { border-bottom: 1px solid var(--hd-border); gap: 0.25rem; } .nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; background: none; color: var(--hd-muted); font-weight: 500; padding: 0.5rem 0.75rem; } .nav-tabs .nav-link:hover { color: var(--bs-emphasis-color); border-bottom-color: var(--hd-border-strong); } .nav-tabs .nav-link.active { color: var(--bs-emphasis-color); background: none; border-bottom-color: var(--hd-green); } /* ---- Navbar (public pages) ---- */ .navbar-brand { letter-spacing: -0.02em; font-size: 1.05rem; } .nav-link { color: var(--hd-muted); transition: color 0.12s ease, background-color 0.12s ease; } .nav-link:hover { color: var(--bs-emphasis-color); } /* ---- App shell: sidebar layout for signed-in pages ---- */ /* Tables inside must shrink with the viewport, not widen the page. */ .app-main { min-width: 0; } .app-shell { min-height: 100vh; } .app-sidebar { background: var(--hd-sidebar-bg); } @media (min-width: 992px) { .app-sidebar { width: 260px; flex-shrink: 0; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--hd-border); } .app-sidebar .offcanvas-body { height: 100%; overflow-y: auto; } } .app-sidebar .nav-link { position: relative; display: flex; align-items: center; gap: 0.65rem; padding: 0.45rem 0.65rem; border-radius: 0.5rem; color: var(--hd-muted); font-weight: 500; } .app-sidebar .nav-link i { font-size: 1rem; width: 1.25rem; text-align: center; opacity: 0.85; } .app-sidebar .nav-link:hover { color: var(--bs-emphasis-color); background: var(--bs-secondary-bg); } .app-sidebar .nav-link.active { color: var(--hd-green-soft-text); background: var(--hd-green-soft); } /* Fluent-style rail: a small accent bar in the page gutter marks the active section. */ .app-sidebar .nav-link.active::before { content: ""; position: absolute; left: -1rem; top: 50%; transform: translateY(-50%); width: 3px; height: 1.1rem; border-radius: 0 3px 3px 0; background: var(--hd-green); } .sidebar-heading { padding: 0 0.65rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hd-faint); } .sidebar-footer { border-top: 1px solid var(--hd-border); } /* Lets the display name truncate inside the flex row. */ .sidebar-footer .nav-link { min-width: 0; } /* Mobile top bar: translucent with blur, like an app title bar. */ .app-main > header.sticky-top { background: rgba(var(--bs-body-bg-rgb), 0.85) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hd-border) !important; } /* ---- Admin mode ---- The instance admin area renders as a mode of its own, like a test-mode switch: violet replaces emerald as the accent, a hairline across the top of the viewport marks the state even with the sidebar collapsed, and an "Admin mode" pill names it. Everything else keeps the app skin, so the switch reads as a mode change, not a different product. */ :root { --hd-admin: #6366f1; --hd-admin-soft: #e5e6fb; --hd-admin-soft-text: #4649c8; --hd-admin-sidebar-bg: #f1f1f7; } [data-bs-theme="dark"] { --hd-admin: #818cf8; --hd-admin-soft: rgba(99, 102, 241, 0.16); --hd-admin-soft-text: #a5b4fc; --hd-admin-sidebar-bg: #10121d; } .admin-mode::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--hd-admin); z-index: 1100; } .admin-accent { color: var(--hd-admin) !important; } .admin-mode-pill { display: inline-flex; align-items: center; background: var(--hd-admin-soft); color: var(--hd-admin-soft-text); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.28rem 0.55rem; border-radius: 2rem; white-space: nowrap; } .admin-mode .app-sidebar { background: var(--hd-admin-sidebar-bg); } .admin-mode .app-sidebar .nav-link.active { color: var(--hd-admin-soft-text); background: var(--hd-admin-soft); } .admin-mode .app-sidebar .nav-link.active::before { background: var(--hd-admin); } .admin-mode .app-sidebar .nav-link:focus-visible { outline-color: var(--hd-admin); } /* The mode switch entries: entering from the app footer, leaving from the admin footer. The entry turns violet on hover, hinting at the mode behind the door; the exit keeps the neutral hover of the app it returns to. */ .app-sidebar .admin-switch:hover { color: var(--hd-admin-soft-text); background: var(--hd-admin-soft); } .admin-mode .app-sidebar .admin-switch:hover { color: var(--bs-emphasis-color); background: var(--bs-secondary-bg); } /* ---- Status dots ---- */ .status-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; vertical-align: baseline; } .status-up { background: var(--hd-green); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); } .status-down { background: var(--hd-red); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2); } .status-paused { background: var(--hd-paused); box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.25); } .status-warn { background: var(--viz-warn); box-shadow: 0 0 0 3px rgba(250, 178, 25, 0.2); } .status-info { background: var(--hd-info); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } /* Page-title dots breathe; a live signal, not a decoration. */ @media (prefers-reduced-motion: no-preference) { h1 .status-dot.status-up, .statuspage-banner .status-dot.status-up { animation: hd-pulse-up 2.6s ease-out infinite; } h1 .status-dot.status-down { animation: hd-pulse-down 1.6s ease-out infinite; } } @keyframes hd-pulse-up { 0% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25); } 55% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0); } } @keyframes hd-pulse-down { 0% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3); } 55% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0); } } /* ---- Landing hero ---- */ .hero-badge { background: var(--hd-green-soft); color: var(--hd-green-soft-text); font-weight: 500; padding: 0.5rem 0.9rem; } .display-4 { letter-spacing: -0.03em; } .demo-card { text-align: left; } /* ---- Data viz ---- Categorical series palette (CVD-validated fixed slot order); the dark column is the same hues re-stepped for dark surfaces, not a new palette. */ :root { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-5: #e87ba4; --viz-6: #008300; --viz-7: #4a3aa7; --viz-8: #e34948; --viz-warn: #fab219; } [data-bs-theme="dark"] { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; --viz-6: #008300; --viz-7: #9085e9; --viz-8: #e66767; } .series-1 { --series-color: var(--viz-1); } .series-2 { --series-color: var(--viz-2); } .series-3 { --series-color: var(--viz-3); } .series-4 { --series-color: var(--viz-4); } .series-5 { --series-color: var(--viz-5); } .series-6 { --series-color: var(--viz-6); } .series-7 { --series-color: var(--viz-7); } .series-8 { --series-color: var(--viz-8); } /* Response-time chart */ .latency-chart { position: relative; outline: none; } .latency-chart:focus-visible { box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.18); border-radius: 0.5rem; } /* Fixed plot height; the SVG stretches to fill it (paths use non-scaling strokes), while labels and grid are HTML at normal site type size. */ .chart-area { height: 260px; } .latency-svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } .latency-line { fill: none; stroke: var(--series-color); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chart-label { font-size: 0.75rem; color: var(--hd-muted); white-space: nowrap; } .chart-ylabels { flex: 0 0 3.75rem; } .chart-ylabels .chart-label { position: absolute; right: 0.75rem; transform: translateY(-50%); } .chart-xlabels { margin-left: 3.75rem; height: 1.5rem; } .chart-xlabels .chart-label { position: absolute; top: 0.25rem; transform: translateX(-50%); } .chart-gridline { position: absolute; left: 0; right: 0; border-top: 1px solid var(--hd-border); } .chart-crosshair { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hd-muted); pointer-events: none; } /* Hover marker: series fill with a 2px surface ring so it stays legible where it crosses a line. */ .chart-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--series-color); box-shadow: 0 0 0 2px var(--bs-card-bg, var(--bs-body-bg)); transform: translate(-50%, -50%); pointer-events: none; } .chart-tip { position: absolute; top: 0; left: 0; min-width: 10rem; padding: 0.5rem 0.75rem; background: var(--hd-surface-raised); border: 1px solid var(--hd-border); border-radius: 0.5rem; box-shadow: var(--hd-shadow-pop); font-size: 0.8rem; pointer-events: none; z-index: 10; } .chart-tip-header { color: var(--hd-muted); margin-bottom: 0.25rem; } /* Status line of the uptime-day hover card. */ .chart-tip-status { font-weight: 600; margin-bottom: 0.25rem; white-space: nowrap; } .chart-tip-row { display: flex; align-items: center; gap: 0.5rem; } .chart-tip-row .tip-value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; } .chart-tip-row .tip-name { color: var(--hd-muted); } /* Short stroke of the series color: keys lines in legend and tooltip. */ .legend-key { display: inline-block; width: 1rem; height: 2px; border-radius: 1px; vertical-align: middle; background: var(--series-color); } /* 90-day uptime strip */ .uptime-strip { display: flex; gap: 3px; } .uptime-cell { position: relative; flex: 1 1 0; height: 2.25rem; min-width: 2px; border-radius: 3px; overflow: hidden; transform-origin: bottom; transition: transform 0.1s ease-out; } .uptime-cell:hover { transform: scaleY(1.12); } .uptime-cell.uptime-data { background: var(--hd-green); } /* Failed share of the day, growing from the baseline. */ .uptime-fail { position: absolute; inset: auto 0 0 0; background: var(--hd-red); } .uptime-cell.uptime-empty { background: var(--hd-paused); opacity: 0.35; } /* ---- Public status pages ---- Rendered without the app chrome, so the page carries its own width. The status dots, uptime strips and hover cards are the same components the signed-in UI uses. */ .statuspage { max-width: 880px; } .statuspage-logo { max-height: 2.5rem; max-width: 10rem; } /* The one line a visitor reads first. */ .statuspage-banner { display: flex; align-items: center; gap: 0.25rem; border: 1px solid transparent; border-radius: 0.75rem; padding: 1rem 1.25rem; font-size: 1.05rem; font-weight: 500; } .statuspage-banner-time { margin-left: auto; font-size: 0.8rem; opacity: 0.75; font-weight: 400; } .banner-up { background: var(--hd-green-soft); color: var(--hd-green-soft-text); } .banner-warn { background: var(--hd-amber-soft); color: var(--hd-amber-soft-text); } .banner-down { background: var(--hd-red-soft); color: var(--hd-red-soft-text); } .banner-info { background: var(--hd-info-soft); color: var(--hd-info-soft-text); } .banner-unknown { background: var(--hd-grey-soft); color: var(--hd-grey-soft-text); } /* Impact reads as a colour before it reads as a word. */ .badge.sp-impact.impact-none, .badge.sp-impact.impact-minor { background: var(--hd-amber-soft); color: var(--hd-amber-soft-text); } .badge.sp-impact.impact-major, .badge.sp-impact.impact-critical { background: var(--hd-red-soft); color: var(--hd-red-soft-text); } .badge.sp-impact.impact-none { background: var(--hd-grey-soft); color: var(--hd-grey-soft-text); } /* A stripe down the side of an incident card, in its impact colour. */ .statuspage-incident { border-left: 3px solid var(--hd-paused); } .statuspage-incident.impact-minor { border-left-color: var(--viz-warn); } .statuspage-incident.impact-major, .statuspage-incident.impact-critical { border-left-color: var(--hd-red); } .statuspage-timeline .statuspage-update + .statuspage-update { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--hd-border); } .statuspage-update p { white-space: pre-line; } /* Component strips sit closer together than the single one on a monitor. */ .statuspage-component .uptime-strip { gap: 2px; } .statuspage-component .uptime-cell { height: 1.5rem; } /* Client-side switches: both variants are rendered, the switch shows one. */ /* Incidents Open/All filter. */ #incident-list[data-filter="open"] tr[data-incident-open="false"] { display: none; } /* Billing cycle on the plan grids. */ [data-cycle="month"] .cycle-year, [data-cycle="year"] .cycle-month { display: none; } [data-cycle="month"] .plan-card.current-month, [data-cycle="year"] .plan-card.current-year { border-color: var(--bs-success); }