/* ================================================================================================= SITE THEME OVERRIDES ------------------------------------------------------------------------------------------------- Sits on top of the vendor template (style.css, ~11k lines) rather than editing it directly - safer to review/revert, and survives if that file is ever swapped for a newer template version. Loaded AFTER bootstrap.min.css and style.css in every layout (Master.cshtml / MasterTest.cshtml / MasterWithoutLogin.cshtml), so it wins the cascade at equal specificity without needing !important everywhere. Two things make this override cheap and low-risk instead of a line-by-line rewrite of the vendor file: 1. Fonts: the vendor CSS already reads --body-font-family/--heading-font-family everywhere via var(...) instead of hard-coding "Montserrat"/"Oswald" per rule, so redeclaring those two custom properties below reflows every heading and paragraph on the site to the new typeface in one go. 2. Colour: Bootstrap 5.3's own components (.btn-primary, .text-primary, .bg-primary, .border-primary, badges, focus rings, ...) are themselves driven by --bs-primary/--bs-primary-rgb custom properties, and the vendor CSS's own primary-dependent rules (.btn-primary, .badge, alerts, the account dropdown, etc.) do the same. Redeclaring those - plus fixing --bs-primary-bg-subtle/ --bs-primary-bg-dark, which the vendor :root left as literal copies of --bs-primary instead of a real light/dark tint - recolours the whole site from the old bright green (#66cc00, whose own --bs-primary-rgb was even left mismatched at "19,66,151", a navy triple) to a single consistent blue, without hunting down every individual selector. Everything below the variables section is deliberately scoped to generic, ubiquitous building blocks (buttons, cards, badges, forms, tables, breadcrumbs, accordions, modals, dropdowns) rather than one-off page markup, so the same handful of rules improves every page that already uses these standard Bootstrap classes - which is effectively the whole site - without having to touch each page individually. ================================================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"); :root, [data-bs-theme=light] { /* ---- Typography: one clean, modern typeface for both body copy and headings (weight carries the hierarchy instead of switching families) - replaces Montserrat body / Oswald headings. */ --body-font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --heading-font-family: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; --bs-body-color: #1f2937; --paragraphColor: #5b6b7c; --headingColor: #0b1f3a; /* ---- Brand colour: blue/navy instead of the old bright green, matching the booking-wizard redesign already shipped (which hard-codes this same #0d6efd) and the reference screenshot's dashboard look. --bs-primary-rgb, --bs-primary-bg-subtle and --bs-primary-bg-dark are proper tints/shades now too, rather than three copies of the same literal colour. */ --bs-primary: #0d6efd; --bs-primary-rgb: 13, 110, 253; --bs-primary-bg-subtle: #e8f1ff; --bs-primary-bg-dark: #0b5ed7; /* ---- Shared spacing/shape/elevation tokens - new, not part of the vendor theme - used by the component rules below to keep radius/shadow/border consistent site-wide instead of ad hoc per-component values. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --border-color: #e3e8ef; --shadow-xs: 0 1px 2px rgba(15, 32, 58, .05); --shadow-sm: 0 1px 3px rgba(15, 32, 58, .07), 0 1px 2px rgba(15, 32, 58, .04); --shadow-md: 0 8px 24px rgba(15, 32, 58, .1); } /* ================================================================================================= Base typography ================================================================================================= */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* The vendor theme sets body text at 12px, which reads cramped/dated for a data-dense booking flow - 14px/1.6 is the standard comfortable baseline for this kind of interface (dashboards, checkout flows, admin tools). */ body { font-size: 14px; line-height: 1.6; letter-spacing: 0; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; line-height: 1.25; letter-spacing: -.01em; } h5, h6, .h5, .h6 { font-weight: 600; letter-spacing: 0; } /* .card-header h6 previously inherited an errant "margin: 22px" (all four sides) from the vendor theme with nothing to zero out the top/left/right - Bootstrap's .mb-0 utility only ever reset the bottom side, so a plain "
" card title (used throughout the booking review flow) rendered visibly offset inside its header. */ .card-header h6 { margin: 0; } p, .p { line-height: 1.7; } a { transition: color .15s ease; } /* A small, uppercase, letter-spaced "eyebrow" label style (STATION / FLIGHT NUMBER / OPERATED BY in the reference screenshot) - opt-in via this class rather than forced onto every