/* Cardinal — shared stylesheet. Dark base, crimson accent, glassmorphism on elevated surfaces only. Body background is driven by /assets/glow-shader.js (WebGL canvas at z-index:-1). */ :root { /* --- Surface palette --- */ --bg-deep: #0a0a0d; --bg: #0e1014; --bg-elev: #15171d; --bg-elev-2: #1c1f26; --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.14); --fg: #e6e7ed; --fg-dim: #9aa0ac; --fg-mute: #61667a; /* --- Crimson accent --- */ --accent: #e8526a; --accent-hover: #ef6378; --accent-dim: #a13340; --accent-faint: rgba(232, 82, 106, 0.10); --accent-glow: rgba(232, 82, 106, 0.45); --accent-shadow: rgba(232, 82, 106, 0.25); /* --- Semantic colours --- */ --error: #ff4d65; --warn: #f5a623; --info: #8fb3ff; --debug: #7a8090; --good: #58c97a; /* --- Glass tokens. Apply selectively. --- */ --glass-bg: rgba(15, 17, 23, 0.55); --glass-bg-soft: rgba(15, 17, 23, 0.40); --glass-blur: blur(22px) saturate(160%); --glass-border: 1px solid rgba(255, 255, 255, 0.07); --glass-shadow: 0 6px 32px -8px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 10px; --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'SF Mono', monospace; --font-sans: 'Exo 2', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--fg); font-family: var(--font-sans); font-size: 13.5px; font-weight: 400; letter-spacing: 0.01em; min-height: 100%; } /* Background layering for the glow shader: - holds the fallback dark colour (visible if WebGL fails or JS is off) - is transparent so the canvas behind it shows through - `isolation: isolate` is the key: without it, `z-index:-1` on the canvas pushes it *below* the root stacking context, which means it gets painted behind 's background and is never visible. Creating a stacking context on body confines the canvas's negative z-index, so the canvas sits between body's background (transparent) and body's content. */ html { background: var(--bg-deep); } body { min-height: 100vh; background: transparent; isolation: isolate; } /* ===== Embedded mode ===== The page is being rendered inside the dashboard iframe at /. The parent already provides the shader background, the sidebar navigation and the language toggle, so we strip the bits that would otherwise duplicate them. */ html.embedded { background: transparent; } html.embedded body { background: transparent; } /* Module breadcrumb ("Cardinal · Logs") is redundant — sidebar shows it. */ html.embedded .logs-toolbar > h2 { display: none; } html.embedded .logs-toolbar > h2 + .tb-divider { display: none; } /* Duplicate language toggle (sidebar has its own). */ html.embedded .logs-toolbar [data-i18n-toggle] { display: none; } /* Tighten the top toolbar now that we've removed the title. */ html.embedded .logs-toolbar { padding-top: 10px; padding-bottom: 10px; } a { color: var(--accent); text-decoration: none; transition: color 0.12s ease; } a:hover { color: var(--accent-hover); } /* ====================================================================== Top bar — used on the home page ====================================================================== */ .topbar { display: flex; align-items: center; gap: 18px; padding: 16px 28px; position: sticky; top: 0; z-index: 10; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border); transform: translateZ(0); } .topbar h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: 0.06em; } .topbar .sub { color: var(--fg-mute); font-size: 12px; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; } .topbar .spacer { flex: 1; } /* ====================================================================== Home grid ====================================================================== */ .home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; padding: 24px; } .module-card { display: block; padding: 20px; border-radius: var(--radius-md); color: var(--fg); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: var(--glass-border); box-shadow: var(--glass-shadow); transform: translateZ(0); contain: layout style paint; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .module-card:hover:not(.placeholder) { text-decoration: none; transform: translate3d(0, -2px, 0); border-color: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent-shadow), 0 12px 40px -12px rgba(232, 82, 106, 0.30), var(--glass-shadow); } .module-card.placeholder { opacity: 0.45; cursor: not-allowed; } .module-card h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: 0.02em; } .module-card p { margin: 0 0 16px; color: var(--fg-dim); font-size: 13px; line-height: 1.55; font-weight: 300; } .badge { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; padding: 3px 8px; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--border); border-radius: 4px; color: var(--fg-mute); letter-spacing: 0.05em; } .badge.dim { color: var(--fg-mute); } /* ====================================================================== Footer ====================================================================== */ .footer { padding: 14px 28px; color: var(--fg-mute); font-size: 11.5px; font-family: var(--font-mono); border-top: 1px solid var(--border); letter-spacing: 0.04em; } .footer .dot { margin: 0 9px; opacity: 0.5; } /* ====================================================================== Toolbar — shared by logs + metrics pages New look: airy, segmented into visual groups with subtle dividers, pill-shaped controls, clear active state. ====================================================================== */ .logs-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 22px; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border); flex-wrap: wrap; position: relative; z-index: 5; transform: translateZ(0); } .logs-toolbar h2 { margin: 0; padding-right: 6px; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg); } .logs-toolbar h2 a { color: inherit; text-decoration: none; } .logs-toolbar h2 .sep { margin: 0 8px; color: var(--fg-mute); font-weight: 300; } /* Group containers — visually clustered, no extra borders. */ .tb-group { display: inline-flex; align-items: center; gap: 6px; } .tb-divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; align-self: center; } .logs-toolbar .spacer { flex: 1; } /* Pill controls (buttons + selects + inputs) — unified shape. */ .logs-toolbar input, .logs-toolbar select, .logs-toolbar button { background: rgba(0, 0, 0, 0.30); color: var(--fg); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; height: 30px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.03em; transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease; } .logs-toolbar select { padding-right: 26px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%); background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .logs-toolbar input { min-width: 240px; font-family: var(--font-mono); font-size: 11.5px; } .logs-toolbar input:focus, .logs-toolbar select:focus, .logs-toolbar button:focus-visible { outline: none; border-color: var(--accent-dim); background: rgba(0, 0, 0, 0.45); box-shadow: 0 0 0 3px rgba(232, 82, 106, 0.12); } .logs-toolbar button { cursor: pointer; } .logs-toolbar button:hover { border-color: var(--accent-dim); color: var(--accent-hover); } .logs-toolbar button.active { background: var(--accent); border-color: var(--accent); color: white; box-shadow: 0 0 18px -4px var(--accent-glow), 0 0 0 1px rgba(255, 255, 255, 0.10) inset; } /* Status chips on the right side. */ .logs-toolbar .status { font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute); padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; letter-spacing: 0.04em; height: 30px; display: inline-flex; align-items: center; gap: 6px; } .logs-toolbar .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; } .logs-toolbar .status.connected { color: var(--good); border-color: rgba(88, 201, 122, 0.45); } .logs-toolbar .status.disconnected { color: var(--error); border-color: rgba(255, 77, 101, 0.45); } /* ====================================================================== Language toggle — small EN/FR pill pair, sits anywhere on a toolbar ====================================================================== */ .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, 0.30); height: 30px; } .lang-toggle button { background: transparent; border: none; padding: 0 12px; height: 100%; color: var(--fg-mute); font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; cursor: pointer; transition: background 0.12s, color 0.12s; } .lang-toggle button:hover { color: var(--fg); } .lang-toggle button.active { background: var(--accent); color: white; box-shadow: 0 0 14px -4px var(--accent-glow); } /* ====================================================================== Logs body — high-density list, NO glass for scroll perf ====================================================================== */ body.logs { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .logs-body { flex: 1; overflow-y: auto; padding: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; } .event { display: grid; grid-template-columns: 88px 60px 130px 60px 1fr; gap: 12px; padding: 5px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); word-break: break-word; } .event:hover { background: rgba(255, 255, 255, 0.03); } .event.error { background: rgba(255, 77, 101, 0.06); } .event.error:hover { background: rgba(255, 77, 101, 0.12); } .event.warn { background: rgba(245, 166, 35, 0.05); } .event.warn:hover { background: rgba(245, 166, 35, 0.11); } .event .ts { color: var(--fg-mute); font-size: 11px; } .event .sev { font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.06em; padding-top: 1px; } .event .sev.error { color: var(--error); } .event .sev.warn { color: var(--warn); } .event .sev.info { color: var(--info); } .event .sev.debug { color: var(--debug); } .event .cat { color: var(--accent); } .event .realm { color: var(--fg-mute); } .event .msg { color: var(--fg); white-space: pre-wrap; font-weight: 400; } .event .extras { color: var(--fg-mute); font-size: 11px; } .event .stack { color: var(--fg-mute); font-size: 11px; padding: 4px 0 4px 14px; border-left: 2px solid var(--accent-dim); margin-top: 5px; background: rgba(0, 0, 0, 0.20); } .empty { padding: 80px 24px; text-align: center; color: var(--fg-mute); font-family: var(--font-sans); font-weight: 300; font-size: 14px; letter-spacing: 0.03em; } .empty .hint { display: block; margin-top: 10px; font-size: 12px; opacity: 0.7; } /* ====================================================================== Reduced motion — disable transitions + freeze the shader animation ====================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } /* The shader respects this via its visibility loop; nothing extra here. */ }