/* ═══════════════════════════════════════════════════════════════════════════ BUSSES — GLOBAL DESIGN SYSTEM ───────────────────────────────────────────────────────────────────────── RULES: 1. ALL design tokens live here. Never redeclare :root in individual pages. Page-local :root declarations override these and silently break dark mode. (This was a known GovStore bug we've fixed from day one.) 2. Use var(--token) everywhere. Never hardcode hex colours in components. 3. Dark mode is toggled via [data-theme="dark"] on , not via a class. 4. --sh and --sh-hv (shadows) are declared here at component level; pages use them without re-declaring. ═══════════════════════════════════════════════════════════════════════════ */ /* ── LIGHT MODE TOKENS (default) ───────────────────────────────────────── */ :root { /* Brand colours — deep teal primary, Namibian gold accent. Primary deliberately differs from GovStore navy so users never confuse a Busses screen for a GovStore screen. */ --primary: #0F4C5C; /* Deep teal — Namibian coastline */ --primary-mid: #1A6678; --primary-lt: #E0F2F8; --accent: #E8900A; /* Gold — same as GovStore for brand family */ --accent-lt: #FEF3C7; /* Semantic status colours */ --green: #15803D; --green-lt: #DCFCE7; --red: #B91C1C; --red-lt: #FEE2E2; --amber: #92400E; --amber-lt: #FEF9C3; /* Surface / layout */ --surface: #F4F7F9; --surface2: #E9EEF3; --card: #FFFFFF; --border: #DDE3EC; --text: #0F172A; --muted: #6B7280; /* Typography — same as GovStore to maintain design family */ --font-h: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-b: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Geometry */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; /* Elevation */ --sh: 0 2px 10px rgba(15,76,92,.09); --sh-hv: 0 10px 36px rgba(15,76,92,.17); --sh-card: 0 1px 4px rgba(15,76,92,.06), 0 4px 16px rgba(15,76,92,.08); /* Animation */ --tr: .25s cubic-bezier(.4,0,.2,1); /* Seat picker palette */ --seat-available: #FFFFFF; --seat-selected: #E8900A; --seat-occupied: #9CA3AF; --seat-ladies: #FDE8F0; --seat-border: #CBD5E1; } /* ── DARK MODE TOKENS ───────────────────────────────────────────────────── */ [data-theme="dark"] { --primary: #38BDF8; /* Sky blue — readable on dark backgrounds */ --primary-mid: #0EA5E9; --primary-lt: rgba(14,165,233,.15); --surface: #0B1520; --surface2: #111E2E; --card: #162236; --border: #1E3048; --text: #E2E8F0; --muted: #94A3B8; --sh: 0 2px 10px rgba(0,0,0,.5); --sh-hv: 0 10px 36px rgba(0,0,0,.65); --sh-card: 0 1px 4px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.5); --seat-available: #1E3048; --seat-selected: #E8900A; --seat-occupied: #374151; --seat-ladies: #3D1A2A; --seat-border: #2D4060; } /* ── SAFETY NET — navbar always opaque on scroll ────────────────────────── */ nav.bs-navbar { background: var(--card, #FFFFFF) !important; } [data-theme="dark"] nav.bs-navbar { background: var(--card, #162236) !important; } /* ── BASE RESET ─────────────────────────────────────────────────────────── */ html, body { font-family: var(--font-b); background: var(--surface); color: var(--text); margin: 0; padding: 0; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-h); font-weight: 700; color: var(--text); line-height: 1.25; } a { color: var(--primary); text-decoration: none; transition: color var(--tr); } a:hover { color: var(--primary-mid); } /* Layout reset — prevents Blazor default padding interference /* ═══════════════════════════════════════════════════════════════════════════ UNIFORM PAGE LAYOUT All content pages wrap their content in .bs-page to get consistent max-width, padding and centering. Full-bleed sections (hero strips, search bar) opt out by being outside .bs-page. ═══════════════════════════════════════════════════════════════════════════ */ .bs-page { width: 100%; max-width: 1140px; margin: 0 auto; padding: 2rem 1.5rem; } @media (max-width: 768px) { .bs-page { padding: 1.25rem 1rem; } } @media (max-width: 480px) { .bs-page { padding: 1rem .75rem; } } /* Sections that need a constrained inner column but full-bleed background */ .bs-section-inner { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; } @media (max-width: 768px) { .bs-section-inner { padding: 0 1rem; } } /* Portal pages get a slightly narrower max for readability */ .bs-page-portal { width: 100%; max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem; } @media (max-width: 768px) { .bs-page-portal { padding: 1rem .75rem; } } /* Cards inside pages should fill their column */ .bs-card { width: 100%; } */ .app-container, .page, main, .content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; } /* ── BUTTON SYSTEM ──────────────────────────────────────────────────────── */ .btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; font-family: var(--font-b); font-weight: 600; border-radius: var(--r-sm); transition: background var(--tr), box-shadow var(--tr), transform var(--tr); } .btn-primary:hover, .btn-primary:focus { background: var(--primary-mid); border-color: var(--primary-mid); box-shadow: 0 4px 16px rgba(15,76,92,.3); transform: translateY(-1px); } .btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; font-family: var(--font-b); font-weight: 600; border-radius: var(--r-sm); transition: all var(--tr); } .btn-accent:hover { background: #D07A08; box-shadow: 0 4px 16px rgba(232,144,10,.35); transform: translateY(-1px); } .btn-outline-primary { border: 2px solid var(--primary); color: var(--primary); background: transparent; font-family: var(--font-b); font-weight: 600; border-radius: var(--r-sm); transition: all var(--tr); } .btn-outline-primary:hover { background: var(--primary); color: #fff; } /* ── CARD SYSTEM ────────────────────────────────────────────────────────── */ .bs-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-card); transition: box-shadow var(--tr), transform var(--tr); } .bs-card:hover { box-shadow: var(--sh-hv); } .bs-card-hover:hover { transform: translateY(-2px); } /* ── BADGE / CHIP / PILL ────────────────────────────────────────────────── */ .bs-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; font-family: var(--font-b); } .bs-badge-green { background: var(--green-lt); color: var(--green); } .bs-badge-red { background: var(--red-lt); color: var(--red); } .bs-badge-amber { background: var(--amber-lt); color: var(--amber); } .bs-badge-primary { background: var(--primary-lt); color: var(--primary); } .bs-badge-accent { background: var(--accent-lt); color: #92400E; } .bs-badge-muted { background: var(--surface2); color: var(--muted); } /* ── STATUS CHIPS (booking, trip status) ────────────────────────────────── */ .status-pending { @extend .bs-badge; background: var(--amber-lt); color: var(--amber); } .status-paid { @extend .bs-badge; background: var(--green-lt); color: var(--green); } .status-boarded { @extend .bs-badge; background: var(--primary-lt); color: var(--primary); } .status-cancelled{ @extend .bs-badge; background: var(--red-lt); color: var(--red); } .status-noshow { @extend .bs-badge; background: var(--surface2); color: var(--muted); } /* ── FORM CONTROLS ──────────────────────────────────────────────────────── */ .form-control, .form-select { background: var(--card); border: 2px solid var(--border); border-radius: var(--r-sm); color: var(--text); font-family: var(--font-b); font-size: .94rem; transition: border-color var(--tr), box-shadow var(--tr); } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(15,76,92,.15); outline: none; background: var(--card); color: var(--text); } .form-label { font-family: var(--font-b); font-weight: 600; font-size: .88rem; color: var(--text); margin-bottom: .35rem; } /* ── BLAZOR VALIDATION STATES ───────────────────────────────────────────── */ .valid.modified:not([type=checkbox]) { outline: 2px solid var(--green); } .invalid { outline: 2px solid var(--red); } .validation-message { color: var(--red); font-size: .82rem; margin-top: .2rem; } /* ── BLAZOR ERROR BOUNDARY ──────────────────────────────────────────────── */ .blazor-error-boundary { background: var(--red-lt); border: 1px solid var(--red); color: var(--red); padding: 1rem 1.25rem; border-radius: var(--r-sm); margin: 1rem; } .blazor-error-boundary::after { content: "An unhandled error occurred. Please reload."; } #blazor-error-ui { background: var(--red-lt); border-top: 2px solid var(--red); color: var(--red); display: none; font-size: 14px; padding: 12px 20px; position: fixed; bottom: 0; width: 100%; z-index: 9000; text-align: center; font-family: var(--font-b); } #blazor-error-ui .reload { color: var(--red); font-weight: 700; margin: 0 8px; } #blazor-error-ui .dismiss { cursor: pointer; float: right; } /* ── AMENITY BADGES ─────────────────────────────────────────────────────── */ .amenity-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--primary-lt); color: var(--primary); border-radius: 20px; font-size: .78rem; font-weight: 600; } [data-theme="dark"] .amenity-badge { background: rgba(14,165,233,.15); } /* ── TRIP CARD ──────────────────────────────────────────────────────────── */ .trip-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.25rem; transition: box-shadow var(--tr), border-color var(--tr), transform var(--tr); cursor: pointer; } .trip-card:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(15,76,92,.12); transform: translateY(-2px); } .trip-card .price-current { font-family: var(--font-h); font-weight: 800; color: var(--primary); font-size: 1.4rem; } .trip-card .price-base { font-size: .8rem; color: var(--muted); text-decoration: line-through; } .trip-card .price-surge { color: var(--accent); font-weight: 600; } /* ── SEARCH BOX (hero) ───────────────────────────────────────────────────── */ .bs-search-hero { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%); padding: 4rem 1rem; text-align: center; color: #fff; } .bs-search-box { background: var(--card); border-radius: var(--r-lg); box-shadow: 0 8px 32px rgba(0,0,0,.2); padding: 1.5rem; max-width: 860px; margin: 0 auto; } /* ── SEAT PICKER ─────────────────────────────────────────────────────────── */ .seat-grid { display: flex; flex-direction: column; gap: 6px; align-items: center; } .seat-row { display: flex; gap: 6px; align-items: center; } .seat { width: 38px; height: 38px; border-radius: 6px 6px 10px 10px; /* headrest shape */ border: 2px solid var(--seat-border); background: var(--seat-available); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--text); transition: all .15s ease; position: relative; } .seat:hover:not(.seat-occupied):not(.seat-driver) { border-color: var(--accent); background: var(--accent-lt); transform: scale(1.08); } .seat.seat-selected { background: var(--seat-selected); border-color: #C07800; color: #fff; } .seat.seat-occupied { background: var(--seat-occupied); border-color: #9CA3AF; color: rgba(255,255,255,.6); cursor: not-allowed; } .seat.seat-ladies { background: var(--seat-ladies); border-color: #FDA4AF; } .seat.seat-driver { background: var(--primary); border-color: var(--primary-mid); color: #fff; cursor: not-allowed; } .seat-aisle { width: 20px; } /* gap in the seat grid for the aisle */ /* ── LIVE TRACKING MAP ──────────────────────────────────────────────────── */ #tracking-map { height: 420px; border-radius: var(--r-md); border: 1px solid var(--border); overflow: hidden; } /* ── FAB (Quick Action Button) ───────────────────────────────────────────── */ .bs-fab { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 1040; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; } .bs-fab-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; border: none; box-shadow: 0 4px 14px rgba(15,76,92,.35); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: all var(--tr); } .bs-fab-btn:hover { background: var(--primary-mid); transform: scale(1.1); } .bs-fab-btn.main { width: 58px; height: 58px; font-size: 1.4rem; background: var(--accent); } .bs-fab-btn.main:hover { background: #D07A08; } /* ── RESPONSIVE UTILITIES ────────────────────────────────────────────────── */ @media (max-width: 576px) { /* Mobile — 380px viewport minimum target per brief */ .bs-search-hero { padding: 2.5rem .75rem; } .bs-search-box { padding: 1rem .75rem; border-radius: var(--r-md); } .trip-card { padding: 1rem; } .seat { width: 32px; height: 32px; font-size: .65rem; } } /* ── TABLE STYLES ────────────────────────────────────────────────────────── */ .bs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--font-b); font-size: .9rem; } .bs-table thead tr { background: var(--surface2); } .bs-table thead th { padding: .6rem 1rem; text-align: left; font-weight: 700; color: var(--muted); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; border-bottom: 2px solid var(--border); } .bs-table tbody tr { border-bottom: 1px solid var(--border); transition: background var(--tr); } .bs-table tbody tr:hover { background: var(--surface); } .bs-table tbody td { padding: .75rem 1rem; } /* ── LOADING SPINNER ─────────────────────────────────────────────────────── */ .bs-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: bs-spin .7s linear infinite; } @keyframes bs-spin { to { transform: rotate(360deg); } } /* ── ALERT BOXES ─────────────────────────────────────────────────────────── */ .bs-alert { padding: .85rem 1.1rem; border-radius: var(--r-sm); font-family: var(--font-b); font-size: .9rem; display: flex; align-items: flex-start; gap: .5rem; } .bs-alert-success { background: var(--green-lt); color: var(--green); } .bs-alert-danger { background: var(--red-lt); color: var(--red); } .bs-alert-warning { background: var(--amber-lt); color: var(--amber); } .bs-alert-info { background: var(--primary-lt); color: var(--primary); } /* ── Pass 2 additions ────────────────────────────────────────────────────── */ /* Missing badge alias */ .bs-badge-danger { background: var(--red-lt); color: var(--red); } /* Skeleton loader — animated grey shimmer for loading states */ .skeleton { background: linear-gradient(90deg, var(--border) 25%, var(--surface2) 50%, var(--border) 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.5s infinite; border-radius: var(--r-sm); } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Soft primary tint used for card hover borders on search results */ :root { --primary-fade: rgba(15, 76, 92, 0.3); } [data-theme="dark"] { --primary-fade: rgba(14, 165, 233, 0.4); } /* Danger color variable alias (used in trip/booking pages) */ :root { --danger: #dc2626; } [data-theme="dark"] { --danger: #f87171; } /* ── Pass 3 additions ────────────────────────────────────────────────────── */ /* Filter chip — reusable tab pill used in portal list pages */ .bs-filter-chip { padding: .3rem .85rem; border-radius: 50px; border: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all var(--tr); white-space: nowrap; } .bs-filter-chip.active, .bs-filter-chip:hover { background: var(--primary); border-color: var(--primary); color: #fff; } /* Pop-in animation — used in validation result card */ @keyframes pop-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }