:root{ --bg0:#070b14; --bg1:#0b1220; --bg2:#111a2e; --glass: rgba(255,255,255,.04); --glass2: rgba(255,255,255,.06); --stroke: rgba(255,255,255,.10); --stroke2: rgba(255,255,255,.16); --shadow: 0 18px 40px rgba(0,0,0,.55); } /* Light mode overrides Toggle by adding `theme-light` on (stored in localStorage). */ html.theme-light{ --bg0:#f7f9ff; --bg1:#ffffff; --bg2:#eef2ff; --glass: rgba(0,0,0,.04); --glass2: rgba(0,0,0,.06); --stroke: rgba(0,0,0,.10); --stroke2: rgba(0,0,0,.16); --shadow: 0 18px 40px rgba(0,0,0,.10); } html.theme-light .app-bg{ background: radial-gradient(1200px 600px at 15% 10%, rgba(255,193,7,.18), transparent 55%), radial-gradient(900px 500px at 90% 20%, rgba(13,202,240,.12), transparent 55%), radial-gradient(1100px 650px at 60% 110%, rgba(25,135,84,.12), transparent 55%), linear-gradient(180deg, #f7f9ff, #ffffff 40%, #f2f5ff); color: #0b1220; } html.theme-light .nav-glass, html.theme-light .topbar{ background: rgba(255,255,255,.86); border-color: var(--stroke); } html.theme-light .glass-card, html.theme-light .hero, html.theme-light .car-card, html.theme-light .hero-card{ box-shadow: var(--shadow); } html.theme-light .pill{ background: rgba(0,0,0,.03); border-color: var(--stroke); color: rgba(0,0,0,.74); } html.theme-light .sidebar{ background: rgba(255,255,255,.84); border-right: 1px solid var(--stroke); } html.theme-light .side-link{ color: rgba(0,0,0,.78); } html.theme-light .side-link:hover{ background: rgba(0,0,0,.04); border-color: var(--stroke); color: rgba(0,0,0,.92); } html.theme-light .side-section{ color: rgba(0,0,0,.45); } /* Navbar + text overrides when markup uses text-light */ html.theme-light .navbar .nav-link.text-light, html.theme-light .navbar .navbar-brand, html.theme-light .topbar .text-light, html.theme-light .sidebar .text-light, html.theme-light a.text-light{ color: rgba(0,0,0,.88) !important; } html.theme-light .text-secondary{ color: rgba(0,0,0,.60) !important; } html.theme-light .btn-outline-light{ border-color: rgba(0,0,0,.20) !important; color: rgba(0,0,0,.86) !important; } html.theme-light .btn-outline-light:hover{ background: rgba(0,0,0,.06) !important; } html.theme-light .dropdown-menu-dark{ background-color: #ffffff !important; color: #0b1220 !important; border: 1px solid rgba(0,0,0,.12) !important; } html.theme-light .dropdown-menu-dark .dropdown-item{color:#0b1220 !important;} html.theme-light .dropdown-menu-dark .dropdown-item:hover{background: rgba(13,110,253,.08) !important;} html.theme-light .dropdown-menu-dark .dropdown-item.active{background: rgba(255,193,7,.22) !important; color:#0b1220 !important;} html.theme-light .offcanvas.text-bg-dark{ background-color:#ffffff !important; color:#0b1220 !important; } html.theme-light .btn-close-white{ filter: invert(1); } *{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;} .app-bg{ background: radial-gradient(1200px 600px at 15% 10%, rgba(255,193,7,.18), transparent 55%), radial-gradient(900px 500px at 90% 20%, rgba(13,202,240,.14), transparent 55%), radial-gradient(1100px 650px at 60% 110%, rgba(25,135,84,.16), transparent 55%), linear-gradient(180deg, var(--bg0), var(--bg1) 40%, #070a12); color: #dfe7ff; } .nav-glass{ background: rgba(10,16,30,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--stroke); } .glass-card{ background: var(--glass); border: 1px solid var(--stroke); box-shadow: var(--shadow); border-radius: 16px; } .hero{ border-radius: 20px; border: 1px solid var(--stroke); overflow: hidden; background: radial-gradient(800px 420px at 20% 20%, rgba(255,193,7,.20), transparent 60%), radial-gradient(800px 420px at 85% 30%, rgba(13,202,240,.14), transparent 60%), linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: var(--shadow); } .hero-inner{padding: 22px;} @media (min-width: 992px){ .hero-inner{padding: 28px;} } .hero-card{ background: rgba(0,0,0,.20); border: 1px solid var(--stroke); border-radius: 16px; padding: 18px; } .pill{ display:inline-flex; align-items:center; gap:.5rem; padding: .5rem .75rem; border-radius: 999px; background: rgba(0,0,0,.18); border: 1px solid var(--stroke); color: rgba(255,255,255,.78); font-size: .9rem; } .car-card{ background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 16px; overflow: hidden; transition: transform .15s ease, border-color .15s ease; } .car-card:hover{ transform: translateY(-2px); border-color: var(--stroke2); } .car-thumb{ position: relative; width: 100%; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: rgba(0,0,0,.25); } @supports not (aspect-ratio: 16/10){ .car-thumb{height: 210px;} } .badge-float{ position: absolute; top: 10px; left: 10px; border: 1px solid rgba(255,255,255,.18); } .badge-float-2{ position: absolute; top: 10px; right: 10px; border: 1px solid rgba(255,255,255,.18); } .car-title{font-size: .98rem; line-height: 1.25rem;} .clamp-2{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp-1{ display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .car-hero{ width: 100%; height: 420px; background-size: cover; background-position: center; background-color: rgba(0,0,0,.25); } @media (max-width: 576px){ .car-hero{height: 260px;} } .map-box{ height: 340px; border-radius: 16px; overflow: hidden; border: 1px solid var(--stroke); } .sidebar{ width: 270px; background: rgba(10,16,30,.78); backdrop-filter: blur(14px); border-right: 1px solid var(--stroke); } .side-link{ display:flex; align-items:center; gap:.5rem; padding: .65rem .8rem; border-radius: 12px; color: rgba(255,255,255,.78); text-decoration:none; border: 1px solid transparent; margin: .15rem 0; } .side-link:hover{ background: rgba(255,255,255,.06); border-color: var(--stroke); color: #fff; } .side-section{ margin-top: 14px; margin-bottom: 6px; padding: 0 .8rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.46); } .topbar{ height: 58px; background: rgba(10,16,30,.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--stroke); } .auth-shell{ min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 28px 16px; } .auth-card{ width: 100%; max-width: 520px; background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 18px; padding: 22px; box-shadow: var(--shadow); } .mini-thumb{ width: 70px; height: 46px; border-radius: 10px; background-size: cover; background-position:center; background-color: rgba(0,0,0,.25); border: 1px solid var(--stroke); } .table{ --bs-table-bg: transparent; } .form-control, .form-select, .input-group-text{ border-radius: 12px; } .btn{ border-radius: 12px; } /* ------------------------------ V2.1 UI improvements --------------------------------*/ /* Better label + placeholder contrast */ .form-label{ color: rgba(255,255,255,.82); } .form-control::placeholder, .form-select::placeholder, textarea.form-control::placeholder{ color: rgba(255,255,255,.42); opacity: 1; } .form-control:focus, .form-select:focus{ box-shadow: 0 0 0 .2rem rgba(255,193,7,.10); border-color: rgba(255,193,7,.35); } /* ------------------------------ Driver profile media --------------------------------*/ .avatar{ width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--stroke); background-color: rgba(0,0,0,.28); background-size: cover; background-position: center; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-sm{ width: 38px; height: 38px; } .avatar-lg{ width: 74px; height: 74px; } .avatar-initials{ font-weight: 700; color: rgba(255,255,255,.86); } .photo-thumb{ width: 100%; aspect-ratio: 16/11; border-radius: 12px; border: 1px solid var(--stroke); background-color: rgba(0,0,0,.25); background-size: cover; background-position: center; } .photo-thumb-link{ cursor: zoom-in; } .driver-car-hero{ width: 100%; height: 320px; border-radius: 16px; border: 1px solid var(--stroke); background-color: rgba(0,0,0,.25); background-size: cover; background-position: center; } @media (max-width: 576px){ .driver-car-hero{ height: 220px; } } .text-soft{ color: rgba(255,255,255,.86) !important; } .text-dim{ color: rgba(255,255,255,.70) !important; } /* Make car cards tighter on small screens (2 columns layout) */ @media (max-width: 576px){ .car-card .card-body{ padding: .75rem; } .car-title{ font-size: .92rem; } .badge-float, .badge-float-2{ font-size: .70rem; } } /* Home aside */ .home-aside{ position: sticky; top: 90px; } /* Contract */ .contract-sheet{ background: rgba(255,255,255,.03); border: 1px solid var(--stroke); border-radius: 16px; padding: 18px; } .signature-pad{ border: 1px dashed rgba(255,255,255,.25); border-radius: 12px; background: rgba(0,0,0,.20); touch-action: none; } @media print{ .no-print{ display:none !important; } body{ background:#fff !important; color:#000 !important; } .nav-glass, footer{ display:none !important; } .contract-sheet{ border:none; box-shadow:none; background:#fff; } } /* Location label: show short text, full text on click (popover) */ .location-short{ cursor: pointer; color: rgba(255,255,255,.72); } .location-short:hover{ color: rgba(255,255,255,.90); } .location-short:focus{ outline: none; } /* ------------------------------ Travel: trip cards + ticket print --------------------------------*/ /* Improve default Bootstrap secondary/muted colors for our dark theme */ .text-secondary{ color: rgba(255,255,255,.74) !important; } .text-muted{ color: rgba(255,255,255,.66) !important; } .text-body-secondary{ color: rgba(255,255,255,.74) !important; } .trip-card{ background: rgba(255,255,255,.04); border: 1px solid var(--stroke); border-radius: 16px; overflow: hidden; transition: transform .15s ease, border-color .15s ease; } .trip-card:hover{ transform: translateY(-2px); border-color: var(--stroke2); } .trip-logo{ width: 58px; height: 58px; border-radius: 14px; border: 1px solid var(--stroke); background-color: rgba(0,0,0,.22); background-size: cover; background-position: center; flex: 0 0 auto; } /* Trip card image container (vehicle + agency badge) */ .trip-logo-wrap{ position: relative; width: 58px; height: 58px; border-radius: 14px; border: 1px solid var(--stroke); background: rgba(0,0,0,.22); overflow: hidden; flex: 0 0 auto; } .trip-logo-img{ width: 100%; height: 100%; object-fit: cover; display: block; } .trip-agency-badge{ position: absolute; right: -6px; bottom: -6px; width: 26px; height: 26px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.35); overflow: hidden; display: flex; align-items: center; justify-content: center; object-fit: cover; } .trip-agency-badge-icon{ color: rgba(255,255,255,.85); font-size: .9rem; } .trip-meta{ font-size: .88rem; } /* Ticket (small, receipt-like) */ .ticket-wrap{ max-width: 420px; margin: 0 auto; } .ticket-paper{ background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.28); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); } .ticket-head{ padding: 14px 16px; background: rgba(0,0,0,.20); border-bottom: 1px solid var(--stroke); } .ticket-body{ padding: 16px; } .ticket-row{ display:flex; justify-content:space-between; gap: 14px; } .ticket-kv{ margin-bottom: 10px; } .ticket-k{ font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.62); } .ticket-v{ font-weight: 700; color: rgba(255,255,255,.92); } .ticket-v.small{ font-weight: 600; font-size: .95rem; } .ticket-divider{ border-top: 1px dashed rgba(255,255,255,.22); margin: 12px 0; } .ticket-qr{ width: 130px; height: 130px; border-radius: 14px; border: 1px solid var(--stroke); background: #fff; display:flex; align-items:center; justify-content:center; overflow: hidden; } .ticket-qr img{ width: 100%; height: 100%; object-fit: contain; display:block; } .ticket-stub{ padding: 12px 16px; border-top: 1px dashed rgba(255,255,255,.22); background: rgba(0,0,0,.16); } .ticket-link{ word-break: break-all; font-size: .78rem; line-height: 1.2; } @page{ margin: 12mm; } @media print{ .text-muted, .text-secondary{ color: #555 !important; } .ticket-paper{ background: #fff !important; color:#000 !important; box-shadow:none !important; border: 1px solid #ddd !important; overflow: visible !important; } .ticket-head{ background: #f8f9fa !important; border-bottom: 1px solid #ddd !important; } .ticket-k{ color: #555 !important; } .ticket-v{ color: #000 !important; } .ticket-divider{ border-top: 1px dashed #bbb !important; } .ticket-stub{ background: #fff !important; border-top: 1px dashed #bbb !important; } .badge{ border: 1px solid rgba(0,0,0,.25) !important; } }