/* ============================================================ Quick Hangar — Global Cinematic Theme Pins the Cessna photo behind every page and converts the shared UI (cards, text, forms, tables, footer) to dark navy glass with light text. Loaded AFTER design-system.css + aviation.css so it overrides. Palette: gradient #1670c6 -> #0c4ba0; sky #38bdf8 / #0ea5e9; light accent #c7ddff; deep navy #0a2a6e. NO gold/yellow ever. ============================================================ */ /* ---------- Fixed full-page backdrop (direct child of ) ---------- */ .qh-pagebg { position: fixed; inset: 0; z-index: -2; pointer-events: none; background-color: #0a2a6e; background-image: url('../images/hangar-business-cessna.jpg'); background-size: cover; background-position: 74% center; background-repeat: no-repeat; } .qh-pagebg-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10,42,110,0.55) 0%, rgba(10,42,110,0.45) 28%, rgba(10,42,110,0.70) 68%, rgba(12,75,160,0.92) 100%), linear-gradient(90deg, rgba(10,42,110,0.62) 0%, rgba(10,42,110,0.22) 55%, rgba(10,42,110,0) 100%); } /* ---------- Neutralize the light-theme body so the photo shows ---------- */ body { background: #0a2a6e !important; color: #eaf2ff !important; } body::before, body::after { display: none !important; } /* nav spacer reveals the photo instead of a solid blue band */ .qh-nav-spacer { background: transparent !important; } /* keep page content above the backdrop */ .content-wrapper { position: relative; z-index: 20; } /* watermark a touch softer so it doesn't muddy the photo */ .watermark-container { opacity: 0.10 !important; } /* ---------- Default typography over the backdrop ---------- */ h1, h2, h3, h4, h5, h6 { color: #ffffff; } a:not(.btn) { color: #7fd2ff; } a:not(.btn):hover { color: #ffffff; } .text-dark, .text-body, .text-black { color: #eaf2ff !important; } .text-muted, .text-secondary { color: #a8c6ef !important; } .text-primary { color: #7fd2ff !important; } hr { border-color: rgba(56,189,248,0.25); } /* ---------- Cards -> dark navy glass ---------- */ .card, div.card, .glass-card, .glass-card-light, .about-card, .seo-card, .legal-body { background: rgba(10,42,110,0.42) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(56,189,248,0.18) !important; color: #eaf2ff !important; box-shadow: 0 18px 40px rgba(4,16,48,0.45) !important; } .card-body, div.card-body { color: #eaf2ff !important; background: transparent !important; } .card-title, .card-header, .card-header * { color: #ffffff !important; } .card-header { background: rgba(8,28,78,0.55) !important; border-bottom: 1px solid rgba(56,189,248,0.18) !important; } .card-footer { background: rgba(8,28,78,0.45) !important; border-top: 1px solid rgba(56,189,248,0.15) !important; color: #dce8ff !important; } .card.bg-light, .card.bg-white, .bg-light, .bg-white { background: rgba(10,42,110,0.42) !important; color: #eaf2ff !important; } .card .text-muted, .card-body .text-muted, .text-muted small { color: #a8c6ef !important; } /* ---------- Forms ---------- */ .form-control, .form-select, textarea, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="search"], input[type="tel"] { background: rgba(7,22,60,0.65) !important; border: 1px solid rgba(56,189,248,0.25) !important; color: #eaf2ff !important; } .form-control::placeholder, textarea::placeholder { color: #8fb3e6 !important; } .form-control:focus, .form-select:focus, textarea:focus { background: rgba(7,22,60,0.85) !important; border-color: #38bdf8 !important; box-shadow: 0 0 0 0.2rem rgba(56,189,248,0.25) !important; color: #ffffff !important; } .form-label, label { color: #cfe0ff !important; } .form-text, .form-check-label { color: #a8c6ef !important; } .input-group-text { background: rgba(8,28,78,0.6) !important; border-color: rgba(56,189,248,0.25) !important; color: #cfe0ff !important; } /* ---------- Tables ---------- */ .table { color: #eaf2ff !important; } .table > :not(caption) > * > * { background: transparent !important; color: #eaf2ff !important; border-color: rgba(56,189,248,0.15) !important; } .table thead th { color: #7fd2ff !important; border-color: rgba(56,189,248,0.30) !important; } .table-hover > tbody > tr:hover > * { background: rgba(56,189,248,0.10) !important; } /* ---------- List groups ---------- */ .list-group-item { background: rgba(10,42,110,0.40) !important; color: #eaf2ff !important; border-color: rgba(56,189,248,0.15) !important; } /* ---------- Accordions ---------- */ .accordion, .accordion-item { background: transparent !important; border-color: rgba(56,189,248,0.18) !important; color: #eaf2ff !important; } .accordion-button { background: rgba(10,42,110,0.45) !important; color: #ffffff !important; } .accordion-button:not(.collapsed) { background: rgba(56,189,248,0.16) !important; color: #ffffff !important; box-shadow: none !important; } .accordion-button::after { filter: brightness(0) invert(1); } .accordion-body { background: rgba(10,42,110,0.30) !important; color: #dce8ff !important; } /* ---------- Dropdowns / modals (content) ---------- */ .dropdown-menu { background: rgba(8,24,64,0.96) !important; border: 1px solid rgba(56,189,248,0.25) !important; } .dropdown-item { color: #dce8ff !important; } .dropdown-item:hover { background: rgba(56,189,248,0.15) !important; color: #ffffff !important; } /* ---------- Footer (global) ---------- */ .footer-modern { position: relative; z-index: 30; background: linear-gradient(180deg, rgba(10,42,110,0.92) 0%, rgba(7,20,54,0.97) 100%) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid rgba(56,189,248,0.30); } .footer-modern h6.text-light { color: #7fd2ff !important; opacity: 1 !important; } .footer-modern a.text-light { color: #c7ddff !important; transition: color .15s ease; } .footer-modern a.text-light:hover { color: #ffffff !important; text-decoration: underline !important; } /* ---------- Buttons: keep brand, make outline-light readable ---------- */ .btn-outline-light { color: #eaf2ff !important; border-color: rgba(199,221,255,0.6) !important; } .btn-outline-light:hover { background: rgba(56,189,248,0.20) !important; color: #ffffff !important; } .btn-light { background: rgba(255,255,255,0.92) !important; color: #0a2a6e !important; border: none !important; } /* ---------- Mobile: lighten blur for performance ---------- */ @media (max-width: 767px) { .card, .glass-card, .glass-card-light, .about-card, .seo-card, .footer-modern { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } }