/* ============================================================================ theme.css — ORF Data Labs global theme + AdminLTE/Bootstrap bridge. Purpose: give the admin/auth/static pages the same look as the home page WITHOUT pulling in pivot.css (which carries Tailwind's Preflight reset and would fight Bootstrap/AdminLTE). This file is reset-free and only: 1. defines the design tokens (:root), 2. maps Bootstrap/AdminLTE components onto those tokens. Tokens MIRROR resources/css/input.css (the Tailwind source of truth for the home + pivot pages). Keep the :root values below in sync with that file. LOAD ORDER: include this AFTER bootstrap.min.css / style.css so the overrides win. (In layouts/app.blade.php it is linked last in .) ============================================================================ */ @import url('/vendor/fonts/geist.css'); /* ─── Design tokens (mirror of resources/css/input.css :root) ─── */ :root { --paper: #F7F4EE; --panel: #FFFFFF; --ink: #0F1419; --ink-soft: #2A323D; --muted: #3D4754; --navy: #0F2A47; --navy-soft: #345078; --rule: rgba(15,42,71,0.20); --rule-str: rgba(15,42,71,0.30); --accent: #C75B2A; --accent-soft: #F4E3D6; --grid: #EDE7DC; --font-display: "Source Serif 4", Georgia, serif; --font-ui: "Geist", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* Bootstrap-5-style aliases (harmless if a component happens to read them) */ --bs-primary: var(--accent); --bs-link-color: var(--navy-soft); --bs-body-font-family: var(--font-ui); --bs-body-color: var(--ink); } /* ─── Typography ─── */ body { font-family: var(--font-ui); color: var(--ink); background: var(--paper); } h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { font-family: var(--font-display); color: var(--navy); } code, kbd, pre, samp, .text-monospace { font-family: var(--font-mono); } /* ─── AdminLTE shell ─── */ .wrapper, .content-wrapper { background: var(--paper); } .main-header.navbar { background: var(--panel) !important; border-bottom: 1px solid var(--rule) !important; } .main-footer { background: var(--panel); color: var(--muted); border-top: 1px solid var(--rule); } .brand-link { color: #fff !important; border-bottom: 1px solid var(--rule); } .content-header h1 { font-size: 1.6rem; } /* sidebar (present on some admin layouts; no-op if absent) */ .main-sidebar { background: var(--navy) !important; } .nav-sidebar .nav-link { color: rgba(255,255,255,.82) !important; } .nav-sidebar .nav-link:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; } .nav-sidebar .nav-link.active { background: var(--accent) !important; color: #fff !important; } /* ─── Links ─── */ a { color: var(--navy-soft); } a:hover { color: var(--accent); } /* ─── Buttons ─── */ .btn-primary { background-color: var(--accent); border-color: var(--accent); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:not(:disabled):not(.disabled):active { background-color: #a8491f; border-color: #a8491f; box-shadow: none; } .btn-outline-primary { color: var(--accent); border-color: var(--accent); } .btn-outline-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-secondary { background-color: var(--navy); border-color: var(--navy); } .btn-secondary:hover { background-color: #0b2038; border-color: #0b2038; } .btn-link { color: var(--navy-soft); } .btn-link:hover { color: var(--accent); } /* ─── Primary-coloured utilities ─── */ .text-primary { color: var(--accent) !important; } .bg-primary { background-color: var(--navy) !important; } .badge-primary { background-color: var(--accent); } .border-primary { border-color: var(--accent) !important; } .page-item.active .page-link { background-color: var(--accent); border-color: var(--accent); } .page-link { color: var(--navy-soft); } /* ─── Cards / panels ─── */ .card { border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 1px 2px rgba(15,42,71,.04); } .card-header { background: color-mix(in oklab, var(--paper) 60%, var(--panel)); border-bottom: 1px solid var(--rule); font-family: var(--font-ui); font-weight: 600; } /* ─── Forms ─── */ .form-control, .custom-select { border-color: var(--rule-str); color: var(--ink); } .form-control:focus, .custom-select:focus { border-color: var(--accent); box-shadow: 0 0 0 .15rem color-mix(in oklab, var(--accent) 25%, transparent); } .form-control::placeholder { color: var(--muted); } /* ─── Tables ─── */ .table thead th { font-family: var(--font-ui); color: var(--navy); background: color-mix(in oklab, var(--paper) 70%, var(--panel)); border-bottom: 2px solid var(--rule); } .table td, .table th { border-color: var(--rule); } .table-hover tbody tr:hover { background: color-mix(in oklab, var(--accent) 5%, transparent); } /* ─── Tabs / pills ─── */ .nav-tabs { border-bottom-color: var(--rule); } .nav-tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); } .nav-pills .nav-link.active { background-color: var(--accent); } /* ─── Alerts keep semantic colours; just round + soften ─── */ .alert { border-radius: 8px; }