/* === CenterLeap brand override for Gatus ============================= Gatus is a Vue + Tailwind + shadcn/ui app. Theme is driven by HSL triplet variables on :root (e.g. --primary: 202 100% 41%) which Tailwind utility classes consume via hsl(var(--primary)). The right way to brand it is to override those variables — that cascades to every component (cards, buttons, focus rings, dropdowns) without chasing classnames with !important. */ /* ---- 1. Override shadcn/ui theme tokens ------------------------------ */ :root, :root.dark, .dark { /* Page + cards stay light to match centerleap.com / app.centerleap.com */ --background: 0 0% 100%; /* #FFFFFF */ --foreground: 222 47% 11%; /* #0F172A — slate-900 ish */ --card: 0 0% 100%; /* #FFFFFF */ --card-foreground: 222 47% 11%; --popover: 0 0% 100%; --popover-foreground: 222 47% 11%; /* Brand blue is the primary action color */ --primary: 202 100% 41%; /* #0084D1 brand blue */ --primary-foreground: 0 0% 100%; /* white text on blue buttons */ --secondary: 214 32% 96%; /* slate-50 */ --secondary-foreground: 222 47% 11%; --muted: 214 32% 96%; /* recessed surfaces */ --muted-foreground: 215 16% 47%; /* slate-500, secondary text */ --accent: 214 32% 96%; /* hover row */ --accent-foreground: 222 47% 11%; --destructive: 0 73% 50%; /* #DC2626 brand red */ --destructive-foreground: 0 0% 100%; --border: 214 32% 91%; /* #E5E7EB slate-200 */ --input: 214 32% 91%; /* matches border so search bar isn't black */ --ring: 202 100% 41%; /* focus ring = brand blue */ --radius: 0.5rem; } /* Tailwind injects these utility values from config; force light theme chart palette to brand colors. Targets the history bars too. */ .bg-green-500, .bg-success { background-color: #16A34A !important; } /* brand green */ .bg-red-500, .bg-destructive { background-color: #DC2626 !important; } .bg-yellow-400, .bg-warning { background-color: #F59E0B !important; } .text-green-500, .text-green-600, .text-green-700, .text-success { color: #16A34A !important; } .text-red-500, .text-red-600, .text-red-700, .text-destructive { color: #DC2626 !important; } /* ---- 2. Body + typography ------------------------------------------ */ /* Force white on every wrapper Gatus might paint dark — html, body, the SPA mount, and any top-level container. Earlier the area around the dashboard container was rendering a darker shell because Gatus's outer Vue wrapper didn't pick up our --background override. Blanket-white the chrome. */ html, body, #app, main, .dashboard-container, [class*="root"], [class*="layout"], [class*="wrapper"] { background: #FFFFFF !important; color: hsl(var(--foreground)); } html, body { font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; -webkit-font-smoothing: antialiased; } /* ---- 3. Header band (gradient, white text) -------------------------- */ /* Gatus's header is a top-of-page block containing the logo + title + buttons. Apply the brand gradient and force white on every descendant so nothing inside is ever dark-on-dark. Top corners are flush to the viewport (no rounding) so the band hugs the browser chrome; bottom corners round to feel like a deliberate panel. */ header, .navbar, nav[role="navigation"], [class*="Navbar"] { background: linear-gradient(135deg, #0084D1 0%, #6A4C9C 55%, #E83F6F 100%) !important; border: none !important; border-radius: 0 0 0.75rem 0.75rem !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } header *, .navbar *, nav[role="navigation"] *, [class*="Navbar"] * { color: #fff !important; border-color: rgba(255, 255, 255, 0.25) !important; } header a:hover, .navbar a:hover { opacity: 0.85; } /* Logo: dark-on-light asset; invert to white for the gradient band. Match the marketing site header EXACTLY — 84×45 from web-centerleap.com/src/components/marketing/top-nav.tsx. */ header img, .navbar img, nav[role="navigation"] img { height: 45px !important; width: 84px !important; max-width: none !important; filter: brightness(0) invert(1) !important; } /* Hide the textual header wordmark (e.g. "CenterLeap" next to the logo). ui.header is set to a single space so the rendered

collapses; this is belt-and-suspenders in case Gatus reserves layout space for the heading. */ header h1, .navbar h1, nav[role="navigation"] h1, header [class*="title"], header [class*="brand"] { display: none !important; } /* Hide the top-right control cluster: - theme toggle (aria-label: "Switch to light mode" / "Switch to dark mode") - refresh-interval selector (aria-label starts with "Refresh interval:") Light mode is forced via ui.dark-mode: false plus the :root overrides above; the toggle is dead UI. The interval selector is configurable in gatus.yaml — users don't need to change it per-session. */ [aria-label="Switch to light mode"], [aria-label="Switch to dark mode"], [aria-label^="Refresh interval"] { display: none !important; } /* ---- 4. Dashboard heading area (white, no band) ------------------- Earlier this rendered as a slate band for contrast; the user has since asked for the page to be uniformly white. Keep the heading on the same white surface as the cards — separation comes from typography weight + the gradient header above. */ .dashboard-container > div:first-child, [class*="dashboard"] > div:first-child:not([class*="endpoint"]):not([class*="card"]) { background: #FFFFFF !important; border: none !important; border-radius: 0 !important; } .dashboard-container h1, .dashboard-container h2, [class*="dashboard"] h1, [class*="dashboard"] h2 { color: #0F172A !important; font-weight: 700; letter-spacing: -0.015em; } /* ---- 5. Search input ------------------------------------------------ */ /* Strip the default black border on the search bar; use slate + brand focus ring. Targets the type=search and any input under the dashboard. */ input[type="search"], input[type="text"], .dashboard-container input, [class*="dashboard"] input { border: 1px solid hsl(var(--border)) !important; background: #fff !important; color: hsl(var(--foreground)) !important; border-radius: 0.5rem; box-shadow: none !important; } input[type="search"]:focus, input[type="text"]:focus, .dashboard-container input:focus, [class*="dashboard"] input:focus { outline: none !important; border-color: hsl(var(--ring)) !important; box-shadow: 0 0 0 3px rgba(0, 132, 209, 0.18) !important; } /* ---- 6. Buttons (filter, sort, primary actions) -------------------- */ /* Primary = brand-blue fill. Secondary/ghost = slate ghost. shadcn buttons typically have .bg-primary on the primary variant. */ button, .btn { border-radius: 0.5rem; font-weight: 500; transition: background-color 0.15s ease, border-color 0.15s ease; } button.bg-primary, .btn.bg-primary, button[class*="primary"]:not([class*="-foreground"]) { background: #0084D1 !important; color: #fff !important; border: 1px solid #0084D1 !important; } button.bg-primary:hover, .btn.bg-primary:hover, button[class*="primary"]:not([class*="-foreground"]):hover { background: #0773B6 !important; border-color: #0773B6 !important; } /* Secondary / ghost buttons */ button.bg-secondary, .btn.bg-secondary, button[class*="ghost"], button[class*="outline"] { background: #fff !important; color: #0F172A !important; border: 1px solid hsl(var(--border)) !important; } button.bg-secondary:hover, .btn.bg-secondary:hover, button[class*="ghost"]:hover, button[class*="outline"]:hover { background: #F8FAFC !important; } /* ---- 7. Cards (white surface, soft shadow on hover) ---------------- */ /* Gatus uses .bg-card with .text-card-foreground via CSS vars — those already point to white/dark from our :root override. We just nudge the corners + shadow to match centerleap.com card chrome. */ .bg-card, [class*="card"] { border-radius: 0.625rem; } /* ---- 8. Hide the original Gatus footer + credit links ------------ The CenterLeap marketing footer is injected by nginx sub_filter (the partial lives at /var/www/status-assets/footer.html and is SSI-included before ). The CenterLeap footer renders as