/* ═══════════════════════════════════════════════════════════════ PROPAMON 2.0 — Intelligence Monitoring Dashboard Brand-anchored light theme: propamon orange accent ═══════════════════════════════════════════════════════════════ */ /* ── Design Tokens ────────────────────────────────────────────── */ :root { /* Surfaces — light mode */ --pm-bg: #f5f6f8; --pm-surface: #ffffff; --pm-surface-alt: #f0f1f4; --pm-surface-hover: #e8eaef; --pm-border: rgba(0, 0, 0, 0.08); --pm-border-strong: rgba(0, 0, 0, 0.16); /* Text — dark on light */ --pm-text: #1a1a2e; --pm-text-muted: #6c757d; --pm-text-dim: #adb5bd; /* Accent — propamon orange */ --pm-accent: #ff6700; --pm-accent-light: #ff8533; --pm-accent-dim: rgba(255, 103, 0, 0.10); --pm-accent-glow: rgba(255, 103, 0, 0.30); --pm-accent-text: #ffffff; /* Priority / semantic */ --pm-critical: #ef4444; --pm-high: #f59e0b; --pm-normal: #3b82f6; --pm-low: #64748b; --pm-success: #22c55e; /* Narrative cell colors */ --pm-cell-sec-thr: #f59e0b; --pm-cell-sec-wek: #ef6c35; --pm-cell-sec-vic: #fbbf24; --pm-cell-soc-thr: #22c55e; --pm-cell-soc-wek: #06b6d4; --pm-cell-soc-vic: #3b82f6; --pm-cell-eco-thr: #8b5cf6; --pm-cell-eco-wek: #ec4899; --pm-cell-eco-vic: #a78bfa; --pm-cell-history: #e07653; --pm-cell-sov: #d4a853; --pm-cell-none: #64748b; /* Radii */ --pm-radius: 8px; --pm-radius-lg: 14px; --pm-radius-xl: 20px; /* Transitions */ --pm-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --pm-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); /* Shadows */ --pm-shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --pm-shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04); --pm-shadow-lg: 0 8px 32px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.06); --pm-shadow-glow: 0 0 20px rgba(255, 103, 0, 0.1), 0 0 60px rgba(255, 103, 0, 0.03); } /* ── Base Overrides ───────────────────────────────────────────── */ [data-bs-theme="light"] { --bs-body-bg: var(--pm-bg); --bs-body-color: var(--pm-text); --bs-border-color: var(--pm-border); --bs-card-bg: var(--pm-surface); --bs-card-border-color: var(--pm-border); --bs-table-bg: transparent; --bs-table-border-color: var(--pm-border); --bs-table-striped-bg: rgba(0, 0, 0, 0.02); --bs-table-hover-bg: var(--pm-surface-hover); --bs-secondary-bg: var(--pm-surface-alt); --bs-tertiary-bg: var(--pm-surface); --bs-emphasis-color: var(--pm-text); --bs-secondary-color: var(--pm-text-muted); --bs-link-color: var(--pm-accent); --bs-link-hover-color: var(--pm-accent); --bs-primary: var(--pm-accent); --bs-primary-rgb: 255, 103, 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--pm-surface); /* flush white, matches uidemos/current — overridden by .adm-shell on admin pages */ color: var(--pm-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; } /* ── Skip Link (WCAG 2.4.1) ──────────────────────────────────── Lives here (not a page-specific stylesheet) because the skip-link markup itself is in base_public.html, rendered by every page extending that base — a page that doesn't happen to load home.css must not get an unstyled skip link. `z-index` is a stacking order, not a design value — this codebase has no z-index scale, so it stays a literal; it has to clear Bootstrap's `.sticky-top` (1020), which `_nav.html` carries and which would otherwise paint its opaque bar over the focused link at top:0/left:0. */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--pm-surface); color: var(--navy); z-index: 1030; font-weight: 600; text-decoration: none; } .skip-link:focus { left: 0; outline: 2px solid var(--navy); } /* ── Animated Accent Strip ───────────────────────────────────── */ /* accent strip removed — navbar is the brand bar */ @keyframes accentShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ── Navbar ───────────────────────────────────────────────────── Light chrome (ISSUE #269 — matches uidemos/current/Overview.html): pm-surface background, navy link text, orange underline accent on the active tab only. The bar spans the viewport for its background/border while `.pm-navbar-in` constrains the row to the shared content column (same full-bleed-outer / contained-inner pattern as .pm-alert-banner). Token-only (KB-0020/AC-4). NAVBAR-CSS-START */ .pm-navbar { background: var(--pm-surface) !important; border-bottom: 1px solid var(--div) !important; box-shadow: none; } .pm-navbar-in { max-width: var(--content-max); min-height: var(--navbar-h); } .pm-brand { color: var(--navy) !important; gap: var(--sp-xs); margin-right: var(--sp-5xl); } /* The is the flex item, not `display: contents`: its computes to display: block, so unwrapping the picture made the source an empty flex item and shifted the mark by one flex gap. */ .pm-brand > picture, .adm-rail-logo > picture, .login-brand > picture { display: block; flex-shrink: 0; } .pm-brand > picture > img, .adm-rail-logo > picture > img, .login-brand > picture > img { display: block; } .pm-brand-mark { display: block; flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); } .pm-brand-text { color: var(--navy); } .pm-brand-text span { color: var(--orange); } /* `font-weight` stays bespoke: .fw-medium is !important and would defeat the .active rule's 600 below. */ .pm-navbar .nav-link { height: var(--navbar-h); color: var(--text2) !important; font-size: var(--fs-sm); font-weight: 500; border-bottom: 2px solid transparent; transition: color var(--pm-transition), border-color var(--pm-transition); } .pm-navbar .nav-link:hover { color: var(--navy) !important; background: transparent; } .pm-navbar .nav-link.active { color: var(--navy) !important; background: transparent; font-weight: 600; border-bottom-color: var(--orange); } .pm-navbar .nav-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } /* ISSUE #578 — the unconditional "Teavita propagandast" action button, the one exception to the 3-links-only nav (KB-0249 amends KB-0125). No `display` declaration: the `hidden` attribute relies on Bootstrap's `[hidden]{display:none!important}`. */ .pm-report-btn { margin-left: auto; flex-shrink: 0; padding: var(--sp-7px) var(--sp-16px); font-size: var(--fs-xs); font-weight: 600; color: var(--orange-700); /* 4.88:1 on white, KB-0019 (design's --orange is 3.04:1) */ background: var(--pm-surface); border: 1.5px solid var(--orange-700); border-radius: var(--radius-sm); white-space: nowrap; cursor: pointer; transition: background var(--pm-transition), color var(--pm-transition); } .pm-report-btn:hover { background: var(--orange-700); color: var(--pm-surface); } .pm-report-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; } /* <768px: `navbar-expand` (no breakpoint suffix, on the