/*
* Hippius brand overlay for Cachet v3.x.
*
* Loaded LAST in (after Cachet's `{{ $theme->styles }}` and
* Filament's @filamentStyles) so :root vars below win the cascade.
* Geist fonts are loaded via a separate in each template.
*
* To re-enable dark mode later: remove `html { color-scheme: only light }`
* and add @media (prefers-color-scheme: dark) rules below.
*/
/* === Brand tokens ================================================= */
:root {
--hp-blue: rgb( 49 103 221); /* #3167DD primary */
--hp-blue-dark: rgb( 31 81 190); /* #1F51BE hover */
--hp-blue-50: rgb(233 239 251); /* lightest tint */
--hp-success: rgb( 4 200 112); /* #04C870 */
--hp-success-dark: rgb( 3 152 85); /* #039855 — vivid pill text */
--hp-warning: rgb(254 178 1); /* #FEB201 */
--hp-warning-dark: rgb(148 86 5); /* #945605 — vivid pill text */
--hp-error: rgb(245 26 10); /* #F51A0A */
--hp-error-dark: rgb(135 26 18); /* #871A12 — vivid pill text */
--hp-text: rgb( 17 24 39); /* gray-900 — main text */
--hp-text-muted: rgb( 55 65 81); /* gray-700 — muted text (still readable) */
--hp-border: rgb( 0 0 0 / 0.08); /* subtle 8% alpha */
--hp-radius: 8px;
--hp-glow: 0 4px 4px 0 #0441951A, inset 0 2px 9px 0 #3D8CFA99;
--hp-font-sans: 'Geist', 'Geist Fallback', 'Inter', system-ui, -apple-system, sans-serif;
--hp-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* === Force light mode globally ==================================== */
html { color-scheme: only light; }
/* === Cachet (public status page) ==================================
* Cachet's Tailwind uses `color: var(--accent-foreground)` directly
* (not wrapped in rgb()), so the values here MUST be valid CSS colors,
* not bare RGB triplets. */
:root {
--accent: var(--hp-blue);
--accent-foreground: #ffffff; /* white text on blue bg */
--accent-content: var(--hp-blue);
--accent-background: #ffffff; /* page bg */
}
html, body {
font-family: var(--hp-font-sans) !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code, pre, kbd, samp { font-family: var(--hp-font-mono) !important; }
/* Public-page body: dark text + subtle architect-paper grid bg.
Scoped to body:not(.fi-body) so Filament keeps its own theming. */
body:not(.fi-body) {
color: var(--hp-text) !important;
background-color: rgb(255 255 255);
background-image: url('/img/grid-texture.svg');
background-repeat: repeat;
background-size: 64px 64px;
}
/* Override muted text classes that Cachet uses with dark-mode variants */
body:not(.fi-body) [class*="text-zinc-300"],
body:not(.fi-body) [class*="text-zinc-400"],
body:not(.fi-body) [class*="text-zinc-500"] {
color: var(--hp-text-muted) !important;
}
/* Tailwind `prose` plugin (used for incident bodies and "No incidents
reported." blocks) flips to light colors via `dark:prose-invert` when
the user's system is in dark mode. Force dark colors regardless.
Body text uses gray-800 (#1F2937) — readable but a hair softer than
the page's gray-900 main text; headings/bold stay at gray-900 to pop. */
body:not(.fi-body) [class*="prose"] {
--tw-prose-body: rgb(31 41 55);
--tw-prose-invert-body: rgb(31 41 55);
--tw-prose-headings: var(--hp-text);
--tw-prose-invert-headings:var(--hp-text);
--tw-prose-bold: var(--hp-text);
--tw-prose-invert-bold: var(--hp-text);
color: rgb(31 41 55) !important;
}
body:not(.fi-body) [class*="prose"] p,
body:not(.fi-body) [class*="prose"] li {
color: rgb(31 41 55) !important;
}
body:not(.fi-body) [class*="prose"] strong {
color: var(--hp-text) !important;
}
/* Status banner (Cachet uses .text-custom-200 in dark mode, which is the
light tint of the status color and renders as invisible on the light
background. Force the dark variant always.) */
body:not(.fi-body) [class*="text-custom-200"] {
color: var(--color-800, var(--hp-text)) !important;
}
/* Soften card / divider borders (Cachet uses border-zinc-200 / -700) */
body:not(.fi-body) [class*="border-zinc-"] {
border-color: var(--hp-border) !important;
}
/* Public-page status badges — pop the colors more.
Markup:
Filament's default rule is bg=color-50 (very pale), text=color-700 (medium).
Bump to denser steps: bg=color-200, text=color-800, border=color-400. */
body:not(.fi-body) .fi-badge.fi-color {
background-color: var(--color-200) !important;
color: var(--color-800) !important;
border: 1px solid var(--color-400) !important;
font-weight: 600 !important;
}
body:not(.fi-body) .fi-badge.fi-color .fi-icon { color: var(--color-700) !important; }
/* === Filament admin panel ========================================
* Cachet's panel provider hardcodes primary to Cachet green. Re-map
* Filament's --primary-* palette to Hippius blue, scoped to .fi-body
* so the public page is unaffected.
* ================================================================== */
html.fi,
.fi-body {
--font-family: 'Geist', 'Geist Fallback', system-ui, sans-serif;
--primary-50: rgb(233 239 251);
--primary-100: rgb(211 223 248);
--primary-200: rgb(180 200 243);
--primary-300: rgb(137 168 236);
--primary-400: rgb( 97 140 232);
--primary-500: rgb( 49 103 221); /* Hippius brand */
--primary-600: rgb( 31 81 190);
--primary-700: rgb( 24 62 145);
--primary-800: rgb( 16 43 101);
--primary-900: rgb( 8 25 60);
--primary-950: rgb( 3 7 18);
}
/* Hippius signature glow on primary CTAs ("New Incident" etc) */
.fi .fi-btn.fi-color-primary,
.fi .fi-color-primary.fi-btn {
box-shadow: var(--hp-glow);
}