/* ============================================================ Noko Status — flat, on-brand theme (noko.chat palette). Flat violet #5138CC page, white text, DM Sans / Funnel Sans. No animations, no glow, no gradients (deliberately minimal). Health boxes stay green/red (status semantics, not brand color). Tokens scoped to html + #app so the whole canvas is violet and id-specificity beats app.css .dark; no !important needed on tokens. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Funnel+Sans:wght@400;500;600&display=swap'); /* --- Brand tokens (shadcn HSL triples) --- */ html, html.dark, #app, #app.dark { --background: 250 59% 51%; --foreground: 0 0% 100%; --card: 252 45% 46%; --card-foreground: 0 0% 100%; --popover: 256 44% 20%; --popover-foreground: 0 0% 100%; --primary: 253 100% 63%; --primary-foreground: 0 0% 100%; --secondary: 253 35% 38%; --secondary-foreground: 0 0% 100%; --muted: 253 35% 38%; --muted-foreground: 250 60% 90%; --accent: 253 42% 58%; --accent-foreground: 0 0% 100%; --destructive: 0 84% 62%; --destructive-foreground: 0 0% 100%; --border: 250 40% 72%; --input: 252 40% 60%; --ring: 253 100% 66%; --radius: 0.75rem; } /* Force the root canvas violet — literal + !important beats Gatus's dark-theme token on (the area below content was showing the shadcn dark bg). */ html, body { background-color: #5138CC !important; } /* --- Fonts --- */ body, #app { font-family: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; } #app h1, #app h2, #app h3, #app .text-2xl, #app .text-3xl, #app .text-4xl, #app .endpoint-header, #app .suite-header, #app .font-bold, #app .font-semibold { font-family: 'DM Sans', ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.015em; } /* --- Header: same color as the page, no bar, no border, no blur --- */ #app header, #app header > div, #app .bg-card\/50, #app .bg-card\/60 { background: transparent !important; border: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #app header img { height: 34px; width: auto; } /* no drop-shadow */ #app header p { display: none !important; } /* hide "System Monitoring Dashboard" */ #app header a, #app header button { /* pill buttons, no motion */ border-radius: 999px !important; font-family: 'DM Sans', sans-serif; font-weight: 600; } /* --- Cards / groups: flat translucent panels, hairline border, no glow/blur --- */ #app .endpoint-group { background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 16px !important; box-shadow: none !important; backdrop-filter: none !important; overflow: hidden; } #app .endpoint-group-header { background: rgba(255,255,255,.04) !important; border-bottom: 1px solid rgba(255,255,255,.10) !important; } #app .endpoint-group-header:hover { background: rgba(255,255,255,.08) !important; } #app .bg-card { background-color: rgba(255,255,255,.05) !important; } #app .endpoint, #app .suite { border-radius: 12px !important; border-color: rgba(255,255,255,.10) !important; box-shadow: none !important; transition: none !important; } #app .endpoint:hover, #app .suite:hover { transform: none !important; box-shadow: none !important; } /* no hover scale/glow */ /* --- Popover + inputs: flat translucent --- */ #app .bg-popover { border-color: rgba(255,255,255,.12) !important; backdrop-filter: none !important; } #app input, #app select { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; border-radius: 10px !important; color: #fff; box-shadow: none !important; } /* keep muted greys legible on violet */ #app .text-gray-400, #app .text-gray-500, #app .text-gray-600 { color: rgba(255,255,255,.66) !important; } /* Remove the big dashboard heading + subheading entirely. Gatus's heading is a static string (it can't reflect real status), so per user it's dropped — the per-service cards carry up/down. Header title "Status" is text-2xl, untouched. */ #app .text-4xl.font-bold.tracking-tight, #app .text-3xl.font-bold.tracking-tight, #app h1:has(+ p.text-muted-foreground.mt-2), #app p.text-muted-foreground.mt-2 { display: none !important; } /* "Powered by Gatus" link — fix the dark-green (text-emerald-800) to on-brand lavender */ #app a[href="https://gatus.io"] { color: #C6B6FF !important; } #app a[href="https://gatus.io"]:hover { color: #FFFFFF !important; }