/* ============================================================= Penske Theme Override Brand: #ed1b2e red | #000000 black | www.penske.com Activate: add data-theme="penske" to the tag or call ThemeSwitcher.apply('penske') Revert: remove the attribute / call ThemeSwitcher.apply('default') ============================================================= */ /* ── Google Fonts: Inter (Penske body font) ─────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap'); /* ── Penske brand tokens (scoped to body[data-theme="penske"]) ─ This does NOT affect any page that hasn't opted in, so the default Hexicore teal theme is completely untouched. */ body[data-theme="penske"] { /* ── Core brand palette ────────────────────────────────── */ --hx-primary: #ed1b2e; /* Penske signal red */ --hx-primary-dark: #b51522; /* pressed / hover state */ --hx-primary-light: #fde8ea; /* tinted backgrounds */ /* Status colours kept accessible but adjusted for brand */ --hx-success: #066938; --hx-success-light: #e0ece6; --hx-warning: #bf9b01; /* Penske caution dark */ --hx-warning-light: #fff9df; --hx-danger: #d61f26; /* Penske error red */ --hx-danger-light: #f8dfd4; --hx-neutral: #61666b; /* Penske cool grey */ --hx-neutral-light: #f5f5f5; /* ── Surfaces ──────────────────────────────────────────── */ --hx-bg-page: #f5f5f5; /* Penske background-medium */ --hx-bg-sidebar: #000000; /* Penske black */ --hx-bg-card: #ffffff; /* ── Typography ────────────────────────────────────────── */ --hx-text-primary: #1b1b1b; /* Penske dark secondary */ --hx-text-muted: #61666b; /* Penske cool grey */ /* ── Borders / radius / shadows ────────────────────────── */ --hx-border: #dde0e5; --hx-border-radius: 4px; /* Penske uses tighter radius */ --hx-border-radius-sm: 2px; --hx-shadow: 0 2px 8px rgba(0, 0, 0, 0.10); --hx-shadow-hover: 0 6px 20px rgba(237, 27, 46, 0.18); --hx-transition: all 0.2s ease; /* ── Typography switch ──────────────────────────────────── */ font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ── Navbar: Penske black ──────────────────────────────────── */ body[data-theme="penske"] .navbar.hx-navbar { background-color: #000000 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.35); } body[data-theme="penske"] .navbar.hx-navbar .navbar-collapse { background-color: #000000; } body[data-theme="penske"] .navbar.hx-navbar .navbar-brand { color: #ffffff !important; } /* Red left-border accent on active nav link */ body[data-theme="penske"] .navbar.hx-navbar .nav-link.active { color: #ffffff !important; border-bottom: 2px solid #ed1b2e; padding-bottom: calc(0.5rem - 2px); } body[data-theme="penske"] .navbar.hx-navbar .nav-link:hover { color: #ed1b2e !important; } /* ── Stat card accent strip ────────────────────────────────── */ body[data-theme="penske"] .hx-stat-card::before { background: #ed1b2e; } /* ── Device card left border (online state) ─────────────────── */ body[data-theme="penske"] .hx-device-card.device-online { border-left-color: #066938; } /* ── Fleet summary bar: primary dot ────────────────────────── */ body[data-theme="penske"] .hx-fleet-bar .fleet-stat-item .stat-dot.dot-total { background: #ed1b2e; } /* ── Buttons ────────────────────────────────────────────────── */ body[data-theme="penske"] .btn-hx-primary { background: #000000; border-color: #000000; color: #ffffff; letter-spacing: 0.02em; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; } body[data-theme="penske"] .btn-hx-primary:hover { background: #ed1b2e; border-color: #ed1b2e; color: #ffffff; } body[data-theme="penske"] .btn-hx-outline { border-color: #000000; color: #000000; } body[data-theme="penske"] .btn-hx-outline:hover { background: #000000; color: #ffffff; } /* ── View-toggle active button ───────────────────────────────── */ body[data-theme="penske"] .hx-view-toggle .btn.active { background: #ed1b2e; border-color: #ed1b2e; color: #ffffff; } /* ── Search / filter focus ring ─────────────────────────────── */ body[data-theme="penske"] .hx-filter-bar .filter-search input:focus { border-color: #ed1b2e; box-shadow: 0 0 0 2px rgba(237, 27, 46, 0.15); } body[data-theme="penske"] .hx-filter-bar select:focus { border-color: #ed1b2e; box-shadow: 0 0 0 2px rgba(237, 27, 46, 0.15); } /* ── Breadcrumb link colour ─────────────────────────────────── */ body[data-theme="penske"] .hx-breadcrumb .breadcrumb-item a { color: #ed1b2e; } /* ── Date range trigger ─────────────────────────────────────── */ body[data-theme="penske"] .hx-date-range-trigger { border-color: #ed1b2e; color: #ed1b2e; } body[data-theme="penske"] .hx-date-range-trigger:hover { background: #ed1b2e; color: #ffffff; } body[data-theme="penske"] .hx-date-range-panel { background: #fde8ea; border-color: #ed1b2e; } /* ── Side-menu header ───────────────────────────────────────── */ body[data-theme="penske"] .side-menu-header { background-color: #000000; } /* ── Theme switcher button (injected by theme-switcher.js) ─── */ .hx-theme-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.35); background: transparent; color: rgba(255,255,255,0.85); font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap; } .hx-theme-toggle:hover { background: rgba(255,255,255,0.15); color: #ffffff; border-color: rgba(255,255,255,0.6); } /* Active state: red pill when Penske theme is on */ body[data-theme="penske"] .hx-theme-toggle { background: #ed1b2e; border-color: #ed1b2e; color: #ffffff; } body[data-theme="penske"] .hx-theme-toggle:hover { background: #b51522; border-color: #b51522; }