/* ================================================================= Nebion status-page skin for Gatus v5. Source of truth: gatus/config.yaml (ui.custom-css) — served at /css/custom.css. Brand tokens: nebion-brand/design.md (v1.1). Inter is the brand face. This stylesheet links BEFORE /css/app.css, so we win the cascade by being unlayered (unlayered > @layer) and, where needed, by raising specificity (html:root / html:root.dark) over app.css' :root. ================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* --- Nebion tokens (hex; for reference + non-shadcn use) ---------- */ html:root { --sky-100:#e0f2fe; --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --deep-navy:#0c4a6e; --ice-white:#f0f9ff; --surface:#f9fafb; --success:#16a34a; --brand-ring:0 0 0 3px rgba(14,165,233,.35); } /* --- Gatus (shadcn) HSL vars → Nebion · DEFAULT = DARK -------------- * * The public status page is a dark canvas for every visitor. Gatus * * keys its .dark class off the OS theme, so to guarantee the brand * * dark look we point the default :root palette at the dark values too * * (charcoal canvas + navy cards, Sky 500 the single accent). The * * :root.dark block below mirrors this for OS-dark visitors. */ html:root { --background:216 28% 7%; --foreground:204 100% 97%; --card:222 47% 11%; --card-foreground:204 100% 97%; --popover:222 47% 11%; --popover-foreground:204 100% 97%; --primary:199 89% 48%; --primary-foreground:0 0% 100%; --secondary:217 33% 17%; --secondary-foreground:204 100% 97%; --muted:217 33% 17%; --muted-foreground:215 20% 65%; --accent:217 33% 17%; --accent-foreground:204 100% 97%; --destructive:0 63% 31%; --destructive-foreground:0 0% 100%; --border:217 33% 20%; --input:217 33% 17%; --ring:204 93% 60%; --radius:0.5rem; } /* Page canvas: #global carries .bg-background; also paint so the * * viewport behind it stays dark on short pages (no white gutter). */ body { background-color:hsl(var(--background)); } /* --- Gatus (shadcn) HSL vars → Nebion · DARK --------------------- * * Dark surfaces are reserved for weight (design.md §4.4): charcoal * * canvas + navy cards, brand Sky stays the single accent. */ html:root.dark { --background:216 28% 7%; --foreground:204 100% 97%; --card:222 47% 11%; --card-foreground:204 100% 97%; --popover:222 47% 11%; --popover-foreground:204 100% 97%; --primary:199 89% 48%; --primary-foreground:0 0% 100%; --secondary:217 33% 17%; --secondary-foreground:204 100% 97%; --muted:217 33% 17%; --muted-foreground:215 20% 65%; --accent:217 33% 17%; --accent-foreground:204 100% 97%; --destructive:0 63% 31%; --destructive-foreground:0 0% 100%; --border:217 33% 20%; --input:217 33% 17%; --ring:204 93% 60%; } /* --- Header wordmark = NEBION lockup (design.md §5, §9) ----------- * * icon-mark (ui.logo) + this wordmark compose the horizontal lockup. */ header h1 { font-weight:800 !important; letter-spacing:0.1em !important; text-transform:uppercase; } header h1 { color:var(--ice-white) !important; } /* wordmark on the dark canvas */ /* --- Brand focus ring on every interactive element (§13) ---------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:none; box-shadow:var(--brand-ring); border-radius:8px; } /* --- Uptime / "success" bars use Nebion green, not Gatus' --------- */ html .bg-success { background-color:var(--success) !important; } /* --- Footer: white-label it. Hide the upstream "Powered by Gatus" line * * (font-size:0 collapses the text + its ) and the GitHub social icon, * * then inject "nebion.host is by ws.agency" with the WS Agency monogram * * trailing it on one line. The mark is branding/ws-mark-dark.svg * * (ice-white "W" + orange "A") inlined as a data: URI, sized via * * background so it sits centred on the credit line. */ footer #social { display:none !important; } footer .text-center { font-size:0 !important; } footer .text-center::after { content:"nebion.host is by ws.agency"; display:inline-flex; align-items:center; font-size:0.8rem; font-weight:500; letter-spacing:0.02em; color:hsl(var(--muted-foreground)); padding-right:42px; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjQzLjM1IDAgMTE4LjY1IDQ5LjUiPgogIDwhLS0gV1MgQWdlbmN5IG1vbm9ncmFtIChtYXJrIG9ubHkpIOKAlCBpY2Utd2hpdGUgIlciICsgb3JhbmdlICJBIiwgZm9yIGRhcmsgYmFja2dyb3VuZHMuIC0tPgogIDxwYXRoIGQ9Ik0xMzAuNDksMEEzLDMsMCwwLDEsMTMzLDEuMzVMMTYyLDQ0Ljc3YTMsMywwLDAsMS0yLjUzLDQuNzJIMTIyLjMzYTMsMywwLDAsMS0yLjUzLTQuNzJsOS0xMy41MWExLjE2LDEuMTYsMCwwLDEsMS42LS4zMkwxMzMuNTQsMzNhMS4xNywxLjE3LDAsMCwxLC4zMiwxLjYybC01LDcuNDdhMC44NCwwLjg0LDAsMCwwLC43LDEuMzFoMjIuNTVhMC44NywwLjg3LDAsMCwwLC43Mi0xLjM1TDEzMS4yMiw5LjYxYTAuODcsMC44NywwLDAsMC0xLjQ1LDBsLTI0LjIsMzguNTRhMy4xNiwzLjE2LDAsMCwxLTUuMDYsMEw5MS41NiwzNC43N2wzLjY1LTUuNTQsNy4wOSwxMC42NmEwLjg4LDAuODgsMCwwLDAsMS40NiwwTDEyOCwxLjM1QTMsMywwLDAsMSwxMzAuNDksMFoiIGZpbGw9IiNlYTk0MjMiLz4KICA8cGF0aCBkPSJNNDUuODgsMGgxN2ExLjU4LDEuNTgsMCwwLDEsMS41OCwxLjU4VjQuNWExLjU4LDEuNTgsMCwwLDEtMS41OCwxLjU4SDUzLjk0YTEuMjgsMS4yOCwwLDAsMC0xLjA2LDJsMjAuODcsMzEuM2EwLjc5LDAuNzksMCwwLDAsMS40MiwwTDk2LjA3LDhhMS4yNCwxLjI0LDAsMCwwLTEtMS45M0g4Mi4yMmExLjMyLDEuMzIsMCwwLDAtMS4wOSwybDQuMjksNi40M2EwLjM4LDAuMzgsMCwwLDEsMCwuNDJsLTMuMTksNC44MWEwLjM4LDAuMzgsMCwwLDEtLjYzLDBsLTEwLTE1LjA2QTMsMywwLDAsMSw3NC4wOSwwSDEwM2EzLDMsMCwwLDEsMi41Myw0LjcyTDc2LjYxLDQ4LjE1YTIuNDcsMi40NywwLDAsMS00LjMxLDBMNDMuMzUsNC43MkEzLDMsMCwwLDEsNDUuODgsMFoiIGZpbGw9IiNmMGY5ZmYiLz4KPC9zdmc+Cg=='); background-repeat:no-repeat; background-position:right center; background-size:auto 14px; } /* --- Selection + scrollbar (brand polish) ------------------------ */ ::selection { background:var(--sky-100); color:var(--deep-navy); } html:root.dark ::selection { background:rgba(14,165,233,0.30); color:var(--ice-white); } * { scrollbar-width:thin; scrollbar-color:hsl(var(--border)) transparent; } *::-webkit-scrollbar { width:10px; height:10px; } *::-webkit-scrollbar-thumb { background:hsl(var(--border)); border-radius:9999px; border:2px solid transparent; background-clip:content-box; }