/* ========================================================= Hatters Cars — Brand theme, layered on top of Bootstrap 5.3 (loaded before this file — see the order in ). Brand colours only: deep navy + brand orange + white, exactly as the logo. The premium feel comes from craft rather than colour — a serif display face, a light/dark section rhythm, wide spacing, hairline detailing, photography and motion (see assets/js/main.js). Type: Montserrat (display / headings) / Poppins (body) / Poppins (small-caps labels, buttons, brand lockup). 1. Tokens + base typography 2. Motion primitives 3. Header (topbar, navbar, progress bar) 4. Hero + quote bar + trust strip 5. Sections, headings, grids 6. Photo media, cards, fleet, dark bands 7. Forms, alerts, accordion (Bootstrap overrides) 8. Page header, content pages, footer Two colour worlds: - Light sections are the default for every component. - Dark contexts (.hero-photo, .page-header, .photo-band, .join-feature, .cta-banner, .bg-navy, .site-footer, .visual-panel) re-state the few colours their children need. Note on grids: cards rely on flexbox's default stretch for equal heights. Don't give grid children `height:100%` — a percentage height stops the stretch and rows go ragged. ========================================================= */ /* ---------- 1. Tokens ---------- */ :root{ /* Brand navy */ --navy-950:#051629; --navy-900:#0a2647; --navy-800:#0f3364; --navy-700:#164a8c; --navy-100:#d7e2f0; --navy-50:#eef3fa; /* Brand orange */ --orange-700:#b85408; --orange-600:#e0680a; --orange-500:#f5891f; --orange-400:#ff9d3d; --orange-100:#fff0e0; --accent-grad:linear-gradient(115deg,var(--orange-600),var(--orange-400)); /* Light surfaces */ --white:#ffffff; --paper:#f7f9fc; /* Text on light */ --ink:#0a2647; --ink-body:#4a5768; --ink-mute:#77849a; /* Text on dark */ --text:#f0f5fb; --text-soft:#c3d5ea; --text-mute:#8fa8c6; --line:rgba(10,38,71,.12); --line-soft:rgba(10,38,71,.07); --line-dark:rgba(255,255,255,.11); --line-dark-strong:rgba(255,255,255,.2); --glass:rgba(255,255,255,.05); --glass-hi:rgba(255,255,255,.085); --radius:14px; --radius-sm:8px; --radius-lg:22px; --shadow-sm:0 2px 10px -4px rgba(10,38,71,.1); --shadow-md:0 20px 44px -22px rgba(10,38,71,.28); --shadow-lg:0 44px 90px -36px rgba(10,38,71,.4); --shadow-orange:0 18px 40px -16px rgba(245,137,31,.5); --ease:cubic-bezier(.16,1,.3,1); --maxw:1240px; --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); } *,*::before,*::after{box-sizing:border-box} body{ font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; font-weight:400; color:var(--ink-body); background:var(--white); line-height:1.8; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{ font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif; color:var(--ink); font-weight:600; line-height:1.12; letter-spacing:-.005em; margin:0 0 .5em; text-wrap:balance; overflow-wrap:break-word; } h1{font-size:clamp(2.1rem,3.8vw,3.3rem);font-weight:600} h2{font-size:clamp(1.7rem,2.8vw,2.5rem);font-weight:600} h3{font-size:1.45rem} h4{font-size:1.12rem} p{margin:0 0 1.1em;color:var(--ink-body)} a{color:var(--orange-700);text-decoration:none;transition:color .3s var(--ease)} a:hover{color:var(--orange-500)} strong{color:var(--ink);font-weight:600} img{max-width:100%} .container{max-width:var(--maxw)} .skip-link{position:absolute;left:-999px;top:0;background:var(--navy-900);color:#fff;padding:10px 16px;z-index:999;border-radius:0 0 8px 0;font-weight:600} .skip-link:focus{left:0} ::selection{background:var(--orange-100);color:var(--navy-900)} :focus-visible{outline:2px solid var(--orange-500);outline-offset:3px} /* Accent words inside headings — brand orange, set in italic serif */ .accent{color:var(--orange-600);font-style:italic} .hero-photo .accent,.page-header .accent,.photo-band .accent, .cta-banner .accent,.bg-navy .accent,.join-feature .accent{color:var(--orange-400)} /* ---------- Icons ---------- */ .icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em} .icon-solid{fill:currentColor;stroke:none} /* ---------- 2. Motion primitives ---------- JS adds .reveal (so nothing hides when JS is unavailable) and sets --d. */ .reveal{opacity:0;transform:translateY(30px);will-change:opacity,transform} .reveal.is-in{opacity:1;transform:none;transition:opacity 1.1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)} .reveal-left{transform:translateX(-34px)} .reveal-right{transform:translateX(34px)} .reveal-zoom{transform:scale(.96)} .hero-photo,.page-header,.photo-band,.cta-banner,.visual-panel{position:relative;isolation:isolate;overflow:hidden} .hero-photo::after,.page-header::after,.photo-band::after,.cta-banner::after,.visual-panel::after{ content:"";position:absolute;inset:-6%;z-index:-2; background-image:inherit;background-size:cover;background-position:center; transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1.05)); will-change:transform; } .hero-photo::after{animation:kenburns 34s ease-in-out infinite alternate} @keyframes kenburns{from{transform:translate3d(0,var(--py,0px),0) scale(1.05)}to{transform:translate3d(0,var(--py,0px),0) scale(1.16)}} @media (prefers-reduced-motion:reduce){ .reveal,.reveal.is-in{opacity:1!important;transform:none!important;transition:none!important} .hero-photo::after{animation:none} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ---------- Buttons ---------- */ .btn{ position:relative;overflow:hidden; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:15px 30px;border-radius:2px;font-weight:600;font-size:.78rem; font-family:'Poppins',sans-serif;letter-spacing:.15em;text-transform:uppercase; border:1px solid transparent;white-space:nowrap;box-shadow:none; transition:color .35s var(--ease),background-color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease); } .btn::after{ content:"";position:absolute;top:0;bottom:0;left:-60%;width:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg);transition:left .8s var(--ease);pointer-events:none; } .btn:hover::after{left:130%} .btn .icon{width:1.15em;height:1.15em} .btn-lg{padding:18px 38px;font-size:.82rem} .btn-sm{padding:11px 20px;font-size:.7rem;letter-spacing:.13em} .btn-primary{background:var(--accent-grad);color:#fff;box-shadow:var(--shadow-orange)} .btn-primary:hover,.btn-primary:focus,.btn-primary:active{color:#fff!important;box-shadow:0 24px 50px -18px rgba(245,137,31,.68)} .btn-navy{background:var(--navy-900);color:#fff} .btn-navy:hover,.btn-navy:focus{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-md)} .btn-outline{background:transparent;border-color:rgba(10,38,71,.3);color:var(--navy-900)} .btn-outline:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff} .btn-white{background:#fff;color:var(--navy-900)} .btn-white:hover{background:var(--orange-100);color:var(--navy-900)} .btn-white-outline{background:rgba(255,255,255,.05);border-color:var(--line-dark-strong);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .btn-white-outline:hover{border-color:var(--orange-400);color:var(--orange-400)} /* Secondary buttons sitting on dark photography */ .hero-photo .btn-navy,.page-header .btn-navy,.photo-band .btn-navy,.cta-banner .btn-navy,.join-feature .btn-navy{background:transparent;border-color:var(--orange-400);color:var(--orange-400)} .hero-photo .btn-navy:hover,.page-header .btn-navy:hover,.photo-band .btn-navy:hover,.cta-banner .btn-navy:hover,.join-feature .btn-navy:hover{background:var(--orange-500);border-color:var(--orange-500);color:#fff} .btn-block{width:100%} @media (prefers-reduced-motion:no-preference){.btn:hover{transform:translateY(-2px)}} /* `.btn-group` is also a Bootstrap class, which stretches its buttons, joins them edge to edge and squares off inner corners. Undone here. */ .btn-group{display:flex;flex-wrap:wrap;gap:16px;vertical-align:initial} .btn-group > .btn{flex:0 0 auto;margin-left:0!important;border-radius:2px!important} @media(max-width:420px){.btn-group > .btn{flex:1 1 100%;white-space:normal}} /* ---------- 3. Topbar ---------- */ .topbar{background:var(--navy-950);color:var(--text-mute);font-size:.76rem;position:relative;z-index:3} .topbar .container{display:flex;align-items:center;justify-content:space-between;min-height:44px;gap:16px} .topbar-left{display:flex;gap:28px;align-items:center;min-width:0} .topbar-left span{display:flex;align-items:center;gap:9px;letter-spacing:.06em} .topbar-left .icon{color:var(--orange-400);flex-shrink:0} .topbar-right{display:flex;gap:24px;align-items:center;flex-shrink:0} .topbar a{color:var(--text-mute);letter-spacing:.06em} .topbar a:hover{color:var(--orange-400)} .topbar-phone{ font-weight:600;color:#fff!important;background:var(--accent-grad); padding:7px 16px;border-radius:2px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap; font-family:'Poppins',sans-serif;font-size:.72rem;letter-spacing:.1em; transition:box-shadow .35s var(--ease),transform .35s var(--ease); } .topbar-phone:hover{color:#fff!important;box-shadow:var(--shadow-orange);transform:translateY(-1px)} @media(max-width:760px){.topbar-left span:nth-child(2){display:none}} @media(max-width:600px){.topbar-right a:not(.topbar-phone){display:none}} @media(max-width:420px){.topbar-left{display:none}.topbar .container{justify-content:flex-end}} .scroll-progress{ position:fixed;top:0;left:0;height:2px;width:100%;z-index:1080; background:var(--accent-grad); transform:scaleX(var(--p,0));transform-origin:0 50%;pointer-events:none; } /* ---------- Brand lockup (logo colours untouched) ---------- */ .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none} .brand-logo{height:48px;width:auto;display:block;transition:transform .5s var(--ease)} .brand:hover .brand-logo{transform:scale(1.04)} .is-scrolled .brand-logo{height:40px} @media(max-width:400px){.brand-logo{height:34px}} .brand-flag{display:flex;flex-direction:column;border-radius:2px;overflow:hidden;box-shadow:0 0 0 2px var(--navy-900);flex-shrink:0} /* `.row` is also Bootstrap's grid row, which gives children 100% width */ .brand-flag .row{display:flex;flex-wrap:nowrap;margin:0} .brand-flag .row > span{display:block;width:9px;height:9px;max-width:none;padding:0;margin:0;flex:0 0 auto} .brand-flag .row span:nth-child(odd){background:var(--orange-500)} .brand-flag .row span:nth-child(even){background:var(--navy-900)} .brand-flag .row:nth-child(even) span:nth-child(odd){background:var(--navy-900)} .brand-flag .row:nth-child(even) span:nth-child(even){background:var(--orange-500)} .brand-text{display:flex;flex-direction:column;line-height:1} .brand-hatters{font-family:'Poppins',sans-serif;font-weight:800;font-style:italic;font-size:1.6rem;color:var(--orange-500);letter-spacing:-.01em;transform:skew(-6deg);display:inline-block} .brand-cars{font-family:'Poppins',sans-serif;font-weight:700;font-size:.7rem;color:#fff;letter-spacing:.32em;margin-top:3px} .brand:hover .brand-hatters{color:var(--orange-400)} /* ---------- Navbar ---------- */ .site-navbar{ background:rgba(255,255,255,.92)!important; -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3); padding-top:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line); box-shadow:none!important;transition:padding .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease); } .site-navbar.is-scrolled{ padding-top:.5rem;padding-bottom:.5rem;background:rgba(255,255,255,.98)!important; box-shadow:0 18px 40px -30px rgba(10,38,71,.6)!important; } .navbar .nav-link{ color:var(--navy-900);font-family:'Poppins',sans-serif;font-weight:500;font-size:.72rem; letter-spacing:.14em;text-transform:uppercase;padding:.6rem .85rem;position:relative; white-space:nowrap; } @media(min-width:992px) and (max-width:1199.98px){ .navbar .nav-link{font-size:.68rem;letter-spacing:.1em;padding:.6rem .6rem} } .navbar .nav-link::before{ content:"";position:absolute;left:.85rem;right:.85rem;bottom:.3rem;height:1.5px; background:var(--accent-grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .45s var(--ease); } .navbar .nav-link:hover::before,.navbar .nav-link.active::before{transform:scaleX(1)} .navbar .nav-link:hover,.navbar .nav-link:focus,.navbar .nav-link.active{color:var(--orange-600)} .navbar .dropdown-toggle::after{vertical-align:.14em;border-top-width:.26em;border-right-width:.26em;border-left-width:.26em;opacity:.6} .navbar-toggler{border:1px solid var(--line);padding:.4rem .6rem;border-radius:2px} .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(245,137,31,.25)} .dropdown-menu{ background:#fff;border:1px solid var(--line);border-top:2px solid var(--orange-500); border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-lg);padding:12px;margin-top:.7rem; } @media (prefers-reduced-motion:no-preference){ .dropdown-menu{animation:menuIn .38s var(--ease) both} @keyframes menuIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}} } .dropdown-item{ border-radius:2px;padding:.62rem .9rem;font-size:.88rem;font-weight:400;color:var(--ink-body);white-space:normal; transition:background-color .3s var(--ease),color .3s var(--ease),padding-left .3s var(--ease); } .dropdown-item:hover,.dropdown-item:focus{background:var(--orange-100);color:var(--orange-700);padding-left:1.15rem} .header-call{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--navy-900);font-size:.92rem;white-space:nowrap;font-family:'Poppins',sans-serif} .header-call .icon{color:#fff;background:var(--navy-900);width:38px;height:38px;padding:10px;border-radius:50%;flex-shrink:0;transition:background-color .35s var(--ease),transform .35s var(--ease)} .header-call:hover{color:var(--orange-600)} .header-call:hover .icon{background:var(--orange-500);transform:rotate(-10deg)} @media(max-width:991.98px){ .navbar-collapse{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.6rem} .navbar .nav-link::before{display:none} .navbar .dropdown-menu{box-shadow:none;border:none;border-left:2px solid var(--orange-500);border-radius:0;padding-left:.6rem;background:transparent} } /* ---------- 4. Hero (dark) ---------- */ .hero-photo{ color:var(--text);background-color:var(--navy-950);background-size:cover;background-position:center; padding:150px 0 96px; } .hero-photo::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse at 18% 42%,rgba(245,137,31,.16),transparent 55%), linear-gradient(100deg,rgba(5,22,41,.96) 0%,rgba(5,22,41,.88) 45%,rgba(5,22,41,.5) 100%), var(--grain); background-size:auto,auto,140px 140px; } .hero-photo h1,.hero-photo h2,.hero-photo h3{color:#fff} .hero-photo p{color:var(--text-soft)} .hero-photo .hero-copy{max-width:830px} .hero-photo h1{margin-bottom:26px;text-shadow:0 2px 40px rgba(0,0,0,.45)} .eyebrow{ display:inline-flex;align-items:center;gap:14px; font-family:'Poppins',sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.3em;text-transform:uppercase; color:var(--orange-400);margin-bottom:28px; } .eyebrow::after{content:"";width:64px;height:1px;background:linear-gradient(90deg,var(--orange-400),transparent)} .hero-lead{font-size:1.05rem;color:var(--text-soft);max-width:56ch;margin-bottom:38px;font-weight:300;line-height:1.85} .hero-photo .container{position:relative;z-index:2} .hero-car{position:absolute;top:0;right:0;height:100%;width:min(55%,820px);z-index:1;pointer-events:none} .hero-car img{width:100%;height:100%;object-fit:cover;object-position:center; -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 32%,#000 60%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.65) 32%,#000 60%)} @media(max-width:991.98px){.hero-car{display:none}} .quote-panel{margin-top:56px} .quote-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:16px} .quote-panel-head h3{color:#fff;margin:0 0 2px;font-size:1.5rem} .quote-panel-head .muted{color:var(--text-mute);font-size:.84rem;margin:0;letter-spacing:.04em} .quote-panel .quote-tabs{background:rgba(255,255,255,.07);margin:0;border:1px solid var(--line-dark);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .quote-panel .quote-tabs button{color:var(--text-mute)} .quote-panel .quote-tabs button.active{background:var(--accent-grad);color:#fff} /* The booking bar is the one bright object in the hero */ .quote-bar{ display:flex;align-items:stretch;flex-wrap:wrap; background:#fff;border:1px solid rgba(255,255,255,.5); border-radius:var(--radius);padding:10px; box-shadow:0 46px 90px -34px rgba(0,0,0,.8); transition:box-shadow .4s var(--ease); } .qb-field{ flex:1 1 0;min-width:0;display:flex;align-items:center;gap:14px; padding:12px 18px;border-right:1px solid var(--line);position:relative; } .qb-field > .icon{flex-shrink:0;width:20px;height:20px;color:var(--orange-500);transition:transform .35s var(--ease)} .qb-field:focus-within > .icon{transform:scale(1.15)} .qb-field > div{min-width:0;flex:1} .qb-field label{display:block;font-family:'Poppins',sans-serif;font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 5px;line-height:1.3} .qb-field input{ display:block;width:100%;min-width:0;border:0;padding:2px 0;background:transparent; font-size:.96rem;color:var(--navy-900);font-family:inherit; } .qb-field input:focus{outline:none} .qb-field input::placeholder{color:var(--ink-mute)} .qb-field::after{content:"";position:absolute;left:18px;right:18px;bottom:8px;height:2px;background:var(--accent-grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)} .qb-field:focus-within::after{transform:scaleX(1)} .quote-bar > .btn{flex:0 0 auto;margin-left:12px;padding-left:32px;padding-right:32px} .quote-bar .form-success{flex-basis:100%;margin-top:10px} .quote-bar .form-success .alert{margin:0} @media(max-width:980px){ .qb-field{flex:1 1 calc(50% - 8px);border-right:0;border-bottom:1px solid var(--line)} .quote-bar > .btn{flex-basis:100%;margin:12px 0 0} } @media(max-width:560px){.qb-field{flex-basis:100%}} /* Kept for templates that still use them */ .hero{background:var(--navy-50);padding:56px 0 70px;overflow:hidden} .quote-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:34px;position:relative;border-top:3px solid var(--orange-500)} .quote-card h3{margin-bottom:6px} .quote-card .muted{font-size:.84rem;color:var(--ink-mute);margin-bottom:22px} .quote-tabs{display:flex;gap:4px;margin-bottom:20px;background:var(--navy-50);padding:5px;border-radius:2px;max-width:100%} .quote-tabs button{ flex:1 1 auto;padding:10px 16px;border:none;background:none;border-radius:2px;cursor:pointer;white-space:nowrap; font-family:'Poppins',sans-serif;font-weight:600;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute); transition:background-color .35s var(--ease),color .35s var(--ease); } .quote-tabs button.active{background:var(--accent-grad);color:#fff} @media(max-width:560px){ .quote-tabs{width:100%;flex-wrap:wrap} .quote-tabs button{white-space:normal;padding:9px 10px} } /* ---------- Trust strip (light) ---------- */ .trust-strip{background:#fff;border-bottom:1px solid var(--line)} .trust-items{display:flex;flex-wrap:wrap} .trust-item{flex:1 1 25%;min-width:0;display:flex;align-items:center;gap:18px;padding:36px 24px;transition:background-color .4s var(--ease)} .trust-item:hover{background:var(--navy-50)} .trust-item + .trust-item{border-left:1px solid var(--line)} .trust-icon{ flex-shrink:0;width:54px;height:54px;border-radius:50%; background:var(--orange-100);color:var(--orange-600); display:flex;align-items:center;justify-content:center;font-size:1.35rem; border:1px solid rgba(245,137,31,.28); transition:transform .45s var(--ease),box-shadow .45s var(--ease); } .trust-item:hover .trust-icon{transform:translateY(-4px);box-shadow:var(--shadow-orange)} .trust-item strong{display:block;font-family:'Montserrat',sans-serif;font-size:1.5rem;font-weight:600;color:var(--navy-900);line-height:1.2} .trust-item span{font-size:.8rem;color:var(--ink-mute);letter-spacing:.04em} @media(max-width:900px){ .trust-item{flex-basis:50%} .trust-item:nth-child(odd){border-left:0} .trust-item:nth-child(n+3){border-top:1px solid var(--line)} } @media(max-width:480px){.trust-item{flex-basis:100%;border-left:0!important;padding:22px 4px}.trust-item + .trust-item{border-top:1px solid var(--line)}} /* ---------- 5. Sections ---------- */ .section{padding:130px 0;position:relative;background:var(--white)} .section-tight{padding:70px 0} /* Alternating light panel */ .bg-tint{background:var(--paper);position:relative} .bg-tint::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 84% 8%,rgba(245,137,31,.07),transparent 58%); } .bg-tint > *{position:relative} /* Deep navy section */ .bg-navy{background:var(--navy-900);color:var(--text-soft)} .bg-navy h2,.bg-navy h3,.bg-navy h4{color:var(--text)} .bg-navy p{color:var(--text-soft)} .section-head{max-width:800px;margin-bottom:64px} .section-head.center{margin-left:auto;margin-right:auto;text-align:center} .section-head p{font-size:1.05rem;line-height:1.9} .pill-tag{ display:inline-flex;align-items:center;gap:14px; font-family:'Poppins',sans-serif;color:var(--orange-600);font-size:.66rem;font-weight:600; letter-spacing:.3em;text-transform:uppercase;margin-bottom:20px; } .bg-navy .pill-tag,.photo-band .pill-tag,.join-feature .pill-tag,.hero-photo .pill-tag{color:var(--orange-400)} .checker{display:inline-flex;gap:3px;margin:0;flex-shrink:0} .checker span{width:6px;height:6px;border-radius:1px} .checker span:nth-child(odd){background:var(--orange-500)} .checker span:nth-child(even){background:var(--navy-900)} .bg-navy .checker span:nth-child(even),.photo-band .checker span:nth-child(even),.join-feature .checker span:nth-child(even){background:#fff} /* Flexbox, not CSS Grid: some renderers size `fr` tracks to min-content and collapse narrow columns to one-character-per-line text wrapping. */ .grid{display:flex;flex-wrap:wrap;gap:28px} .grid > *{flex:1 1 100%;min-width:0} .grid-2 > *{flex-basis:calc(50% - 14px)} .grid-3 > *{flex-basis:calc(33.333% - 19px)} .grid-4 > *{flex-basis:calc(25% - 21px)} @media(max-width:960px){.grid-4 > *,.grid-3 > *{flex-basis:calc(50% - 14px)}} @media(max-width:640px){.grid-4 > *,.grid-3 > *,.grid-2 > *{flex-basis:100%}} .two-col{display:flex;flex-wrap:wrap;gap:84px;align-items:center} .two-col > .copy,.two-col > .visual{flex:1 1 calc(50% - 42px);min-width:0} .two-col.reverse .visual{order:-1} @media(max-width:860px){.two-col{gap:48px}.two-col > .copy,.two-col > .visual{flex-basis:100%}.two-col.reverse .visual{order:0}} .feature-list{list-style:none;padding:0;margin:0 0 34px} .feature-list li{display:flex;gap:16px;margin-bottom:17px;align-items:flex-start;font-size:.97rem;color:var(--ink-body)} .feature-list .icon{ flex-shrink:0;width:26px;height:26px;padding:6px;border-radius:50%; background:var(--accent-grad);color:#fff;stroke-width:2.4;margin-top:2px; box-shadow:0 8px 16px -8px rgba(245,137,31,.7); } .bg-navy .feature-list li,.photo-band .feature-list li,.join-feature .feature-list li{color:var(--text-soft)} /* Homepage introduction rows */ .feature-rows{display:flex;flex-direction:column;gap:16px;margin-top:36px} .feature-row{ display:flex;gap:20px;align-items:flex-start;padding:24px 26px;border-radius:var(--radius); border:1px solid var(--line);background:#fff;color:inherit; transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease); } .feature-row:hover{border-color:rgba(245,137,31,.5);box-shadow:var(--shadow-md);color:inherit;transform:translateX(8px)} .feature-row-icon{ flex-shrink:0;width:54px;height:54px;border-radius:50%; background:var(--navy-900);color:var(--orange-400); display:flex;align-items:center;justify-content:center;font-size:1.3rem; transition:transform .45s var(--ease),background-color .45s var(--ease); } .feature-row:hover .feature-row-icon{transform:rotate(-8deg);background:var(--navy-800)} .feature-row strong{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.3rem;color:var(--navy-900);margin-bottom:5px} .feature-row .feature-row-text{display:block;font-size:.92rem;color:var(--ink-body);margin-bottom:10px;line-height:1.75} /* ---------- 6. Photo media ---------- */ .media{ position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden; aspect-ratio:4/3;max-width:100%;background:var(--navy-900); box-shadow:var(--shadow-lg); } .media.media-tall{aspect-ratio:4/5} .media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.4s var(--ease)} @media (prefers-reduced-motion:no-preference){.media:hover img{transform:scale(1.07)}} .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,22,41,.08) 0%,transparent 35%,rgba(5,22,41,.8) 100%);pointer-events:none} .media-caption{ position:absolute;left:24px;right:24px;bottom:24px;z-index:1; display:flex;gap:18px;align-items:flex-start; background:rgba(10,38,71,.66);color:var(--text);border-radius:var(--radius); padding:22px 24px;border:1px solid var(--line-dark-strong); -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3); } .media-orange .media-caption{background:rgba(224,104,10,.72);border-color:rgba(255,255,255,.3)} .media-icon{ flex-shrink:0;width:46px;height:46px;border-radius:50%;background:rgba(245,137,31,.18); display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:var(--orange-400); border:1px solid rgba(245,137,31,.4); } .media-orange .media-icon{background:rgba(255,255,255,.22);color:#fff;border-color:rgba(255,255,255,.4)} .media-caption h3{color:#fff;font-size:1.32rem;margin:6px 0 0} .media-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-direction:column;gap:9px} .media-list li{display:flex;gap:11px;align-items:flex-start;font-size:.87rem;color:var(--text-soft);line-height:1.5} .media-orange .media-list li{color:#fff} .media-list .icon{flex-shrink:0;width:15px;height:15px;margin-top:3px;color:var(--orange-400);stroke-width:2.4} .media-orange .media-list .icon{color:#fff} @media(max-width:560px){ .media,.media.media-tall{aspect-ratio:auto} .media img{aspect-ratio:4/3;height:auto} .media::after{display:none} .media-caption{position:static;border-radius:0;border:0} } /* Legacy panel, still used by the contact page's call-out */ .visual-panel{ border-radius:var(--radius-lg); background-color:var(--navy-900);background-size:cover;background-position:center;color:var(--text); padding:54px 46px;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start; box-shadow:var(--shadow-lg); } .visual-panel::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(5,22,41,.3) 0%,rgba(5,22,41,.95) 72%)} .visual-panel > .icon{width:44px;height:44px;color:var(--orange-400);margin-bottom:18px} .visual-panel h3{color:#fff;margin-bottom:10px} .visual-panel p{color:var(--text-soft)} /* ---------- Cards (light) ---------- */ .card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:38px 32px; display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--shadow-sm); transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease); } .card::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:var(--accent-grad);transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease); } .card:hover::before{transform:scaleX(1)} .card:hover{border-color:rgba(245,137,31,.45);box-shadow:var(--shadow-md)} @media (prefers-reduced-motion:no-preference){.card:hover{transform:translateY(-8px)}} .card-body{display:flex;flex-direction:column;flex-grow:1} .card-icon{ width:58px;height:58px;border-radius:50%; background:var(--orange-100);color:var(--orange-600);border:1px solid rgba(245,137,31,.25); display:flex;align-items:center;justify-content:center;font-size:1.45rem;margin-bottom:22px;flex-shrink:0; transition:transform .5s var(--ease),background-color .5s var(--ease),color .5s var(--ease); } .card:hover .card-icon{transform:translateY(-3px) rotate(-6deg);background:var(--accent-grad);color:#fff;border-color:transparent} .card h3{margin-bottom:12px;font-size:1.4rem} .card p{font-size:.93rem;margin-bottom:22px;flex-grow:1;line-height:1.8} .card-link{ font-family:'Poppins',sans-serif;font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; color:var(--orange-700);display:inline-flex;align-items:center;gap:10px; } .card-link .icon{width:1.1em;height:1.1em;transition:transform .4s var(--ease)} .card:hover .card-link .icon,.card-link:hover .icon,.feature-row:hover .card-link .icon{transform:translateX(7px)} /* Cards that sit on a dark section */ .bg-navy .card,.photo-band .card{background:var(--glass);border-color:var(--line-dark);box-shadow:none} .bg-navy .card h3,.photo-band .card h3{color:var(--text)} .bg-navy .card p,.photo-band .card p{color:var(--text-soft)} .bg-navy .card-icon,.photo-band .card-icon{background:rgba(245,137,31,.16);color:var(--orange-400);border-color:rgba(245,137,31,.35)} .bg-navy .card-link,.photo-band .card-link{color:var(--orange-400)} /* Photo cards */ .card.card-photo{padding:0} .card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy-900)} .card-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--ease)} @media (prefers-reduced-motion:no-preference){.card-photo:hover .card-media img{transform:scale(1.09)}} .card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,22,41,.72));pointer-events:none} .card-media .card-icon{ position:absolute;left:24px;bottom:-29px;margin:0;width:58px;height:58px;font-size:1.35rem;z-index:1; background:#fff;border-color:rgba(245,137,31,.35);box-shadow:var(--shadow-md); } .card-photo .card-body{padding:46px 30px 32px} /* ---------- Fleet (light) ---------- */ .fleet-grid{justify-content:center} .fleet-grid > *{flex:0 1 calc(25% - 21px)} @media(max-width:1100px){.fleet-grid > *{flex-basis:calc(33.333% - 19px)}} @media(max-width:760px){.fleet-grid > *{flex-basis:calc(50% - 14px)}} @media(max-width:520px){.fleet-grid > *{flex-basis:100%}} .fleet-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:28px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm); transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease); transform-style:preserve-3d; } .fleet-card:hover{border-color:rgba(245,137,31,.5);box-shadow:var(--shadow-lg)} .fleet-card h3{font-size:1.32rem;margin-bottom:8px} /* The description absorbs spare height, so specs, photo and button line up across a row */ .fleet-card p{font-size:.87rem;margin-bottom:18px;flex-grow:1;line-height:1.75;color:var(--ink-body)} .fleet-specs{display:flex;flex-direction:column;gap:9px;margin-bottom:20px} .fleet-specs > span{display:flex;align-items:center;gap:11px;font-size:.74rem;font-weight:600;color:var(--navy-900);letter-spacing:.06em;font-family:'Poppins',sans-serif} .fleet-specs .icon{color:var(--orange-500);width:16px;height:16px;flex-shrink:0} .fleet-media{aspect-ratio:16/10;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:22px;background:var(--navy-50)} .fleet-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.3s var(--ease)} @media (prefers-reduced-motion:no-preference){.fleet-card:hover .fleet-media img{transform:scale(1.08)}} /* Vehicles without a photo yet show their icon instead of a stand-in stock image */ .fleet-media-icon{display:flex;align-items:center;justify-content:center;background:linear-gradient(140deg,var(--navy-50),#fff)} .fleet-media-icon .icon{width:60px;height:60px;stroke-width:1.1;color:rgba(245,137,31,.6)} .fleet-btn{width:100%;justify-content:space-between} /* ---------- Dark photo bands ---------- */ .photo-band{color:var(--text-soft);background-color:var(--navy-900);background-size:cover;background-position:center} .photo-band::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse at 20% 10%,rgba(245,137,31,.15),transparent 55%), linear-gradient(180deg,rgba(5,22,41,.93),rgba(5,22,41,.97)),var(--grain); background-size:auto,auto,140px 140px; } .photo-band h2,.photo-band h3{color:var(--text)} .photo-band p{color:var(--text-soft)} .band-card{ padding:38px 30px;border-radius:var(--radius); background:var(--glass);border:1px solid var(--line-dark); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); transition:transform .5s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease); } .band-card:hover{transform:translateY(-8px);background:var(--glass-hi);border-color:rgba(245,137,31,.45)} .band-card .card-icon{background:var(--accent-grad);color:#fff;border-color:transparent;box-shadow:var(--shadow-orange)} .band-card h3{font-size:1.3rem;margin-bottom:12px;color:var(--text)} .band-card p{font-size:.9rem;margin:0;line-height:1.8;color:var(--text-soft)} /* Drive-with-us feature (dark) */ .join-feature{background:var(--navy-950);color:var(--text-soft);position:relative;overflow:hidden} .join-feature::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(circle at 8% 12%,rgba(245,137,31,.2),transparent 45%), radial-gradient(circle at 92% 88%,rgba(22,74,140,.35),transparent 48%), var(--grain); background-size:auto,auto,140px 140px; } .join-feature .container{position:relative} .join-feature h2,.join-feature h3{color:var(--text)} .join-feature p{color:var(--text-soft)} .join-box{ margin-top:36px;padding:32px 34px;border-radius:var(--radius); background:var(--glass);border:1px solid var(--line-dark); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); } .join-box h3{font-size:1.48rem;margin-bottom:8px} .join-box p{margin-bottom:24px} /* CTA banner (dark) */ .cta-banner{ background-color:var(--navy-900);background-size:cover;background-position:center; border-radius:var(--radius-lg);padding:82px 68px;display:flex;align-items:center; justify-content:space-between;gap:40px;flex-wrap:wrap; } .cta-banner::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse at 88% 20%,rgba(245,137,31,.2),transparent 55%), linear-gradient(90deg,rgba(5,22,41,.96) 0%,rgba(5,22,41,.9) 55%,rgba(5,22,41,.7) 100%),var(--grain); background-size:auto,auto,140px 140px; } .cta-banner > *{position:relative;min-width:0} .cta-banner h2{color:#fff;margin-bottom:12px;font-size:clamp(1.9rem,3.2vw,2.8rem)} .cta-banner p{color:var(--text-soft);margin-bottom:0;max-width:56ch} @media(max-width:640px){.cta-banner{padding:52px 30px}} /* ---------- Testimonials (light) ---------- */ .testimonial-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:40px 34px; display:flex;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow-sm); transition:border-color .5s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease); } .testimonial-card:hover{border-color:rgba(245,137,31,.45);box-shadow:var(--shadow-md);transform:translateY(-6px)} .testimonial-quote{ width:50px;height:50px;border-radius:50%;background:var(--orange-100);color:var(--orange-600); display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:22px; border:1px solid rgba(245,137,31,.25); } .testimonial-card p{color:var(--ink-body);flex-grow:1;font-family:'Montserrat',sans-serif;font-size:1.22rem;line-height:1.7;font-style:italic} .testimonial-role{font-family:'Poppins',sans-serif;font-size:.62rem;color:var(--ink-mute);font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding-top:20px;border-top:1px solid var(--line);width:100%} table.compare{width:100%;border-collapse:collapse;background:transparent} table.compare th,table.compare td{padding:10px 4px;text-align:left;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--ink-body)} table.compare tr:last-child td{border-bottom:none} .area-list-grid{display:flex;flex-wrap:wrap;gap:12px} .area-list-grid a{flex:1 1 calc(25% - 9px);min-width:130px} .area-list-grid a{ display:flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:1px solid var(--line); border-radius:2px;padding:15px 12px;font-family:'Poppins',sans-serif;font-weight:600;font-size:.7rem; letter-spacing:.1em;text-transform:uppercase;color:var(--navy-900);text-align:center; transition:border-color .35s var(--ease),color .35s var(--ease),background-color .35s var(--ease),transform .35s var(--ease); } .area-list-grid a:hover{border-color:var(--orange-500);color:var(--orange-600);background:var(--orange-100);transform:translateY(-3px)} @media(max-width:760px){.area-list-grid a{flex-basis:calc(50% - 6px);min-width:0}} /* ---------- 7. Forms (light) ---------- */ .form-grid{display:flex;flex-wrap:wrap;gap:0 18px} .form-grid > *{flex:1 1 calc(50% - 9px);min-width:180px} .form-label{font-family:'Poppins',sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.5rem} .form-control,.form-select{ background:#fff;border:1px solid var(--line);color:var(--navy-900); padding:.9rem 1.05rem;font-size:.94rem;border-radius:2px; transition:border-color .35s var(--ease),box-shadow .35s var(--ease); } .form-control::placeholder{color:var(--ink-mute)} .form-control:focus,.form-select:focus{background:#fff;border-color:var(--orange-500);color:var(--navy-900);box-shadow:0 0 0 3px rgba(245,137,31,.16)} .form-check-input{background-color:#fff;border-color:var(--line)} .form-check-input:checked{background-color:var(--orange-500);border-color:var(--orange-500)} .form-check-input:focus{box-shadow:0 0 0 .2rem rgba(245,137,31,.25)} .form-check-label{color:var(--ink-body);font-size:.92rem} .form-text{color:var(--ink-mute)} .form-text a{color:var(--orange-700)} fieldset legend{font-family:'Montserrat',sans-serif;color:var(--navy-900);font-size:1.5rem} form[data-placeholder]:not(.quote-bar){ background:#fff;border:1px solid var(--line);border-top:3px solid var(--orange-500); border-radius:var(--radius);padding:40px;box-shadow:var(--shadow-md); } .quote-card form[data-placeholder]{background:none;border:0;padding:0;box-shadow:none} @media(max-width:560px){form[data-placeholder]:not(.quote-bar){padding:26px 20px}} /* ---------- Alerts ---------- */ .alert{border-radius:var(--radius);border:1px solid var(--line);font-size:.92rem;background:var(--navy-50);color:var(--ink-body);padding:1.15rem 1.35rem} .alert .icon{flex-shrink:0;margin-top:3px;width:20px;height:20px;color:var(--navy-700)} .alert-info{background:var(--navy-50);color:var(--ink-body)} .alert-warning{background:var(--orange-100);color:#7a4a06;border-color:rgba(245,137,31,.35)} .alert-warning .icon{color:var(--orange-600)} .alert a{color:var(--orange-700)} .icabbi-note{border:1px dashed rgba(22,74,140,.45);background:var(--navy-50);color:var(--ink-body)} .bg-navy .alert,.photo-band .alert{background:var(--glass);border-color:var(--line-dark);color:var(--text-soft)} .bg-navy .alert .icon,.photo-band .alert .icon{color:var(--orange-400)} /* ---------- Accordion (light) ---------- */ .accordion{display:flex;flex-direction:column;gap:14px;--bs-accordion-border-color:transparent;--bs-accordion-bg:transparent} .accordion-item{ border:1px solid var(--line)!important;border-radius:var(--radius)!important;overflow:hidden; background:#fff;transition:border-color .45s var(--ease),box-shadow .45s var(--ease); } .accordion-item:hover{border-color:rgba(245,137,31,.4)!important;box-shadow:var(--shadow-sm)} .accordion-button{ font-family:'Montserrat',sans-serif;font-weight:600;color:var(--navy-900);font-size:1.26rem; padding:1.35rem 1.6rem;border-radius:var(--radius)!important;background:transparent; } .accordion-button:not(.collapsed){background:transparent;color:var(--orange-600);box-shadow:inset 0 -1px 0 var(--line)} .accordion-button:focus{box-shadow:0 0 0 .2rem rgba(245,137,31,.2)} .accordion-body{color:var(--ink-body);font-size:.95rem;padding:1.3rem 1.6rem 1.6rem;line-height:1.85} /* ---------- 8. Page header (dark) ---------- */ .page-header{ color:var(--text-soft);background-color:var(--navy-900);background-size:cover;background-position:center; padding:130px 0 120px; } .page-header::before{ content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(ellipse at 15% 45%,rgba(245,137,31,.15),transparent 55%), linear-gradient(100deg,rgba(5,22,41,.96) 0%,rgba(5,22,41,.87) 50%,rgba(5,22,41,.58) 100%),var(--grain); background-size:auto,auto,140px 140px; } .page-header h1{color:#fff;margin-bottom:20px;font-size:clamp(2rem,3.4vw,2.9rem);max-width:22ch} .page-header p{color:var(--text-soft);max-width:60ch;margin-bottom:0;font-size:1.06rem;font-weight:300;line-height:1.9} .page-header .btn-group{margin-top:38px} .page-breadcrumb{ font-family:'Poppins',sans-serif;font-size:.64rem;color:var(--text-mute);margin-bottom:24px; display:flex;flex-wrap:wrap;align-items:center;gap:3px;letter-spacing:.18em;text-transform:uppercase; } .page-breadcrumb a{color:var(--text-mute)} .page-breadcrumb a:hover{color:var(--orange-400)} .page-breadcrumb span:last-child{color:var(--orange-400)} .content-page h2{margin-top:2.4em;font-size:1.9rem} .content-page h3{margin-top:1.8em} .content-page ul{list-style:none;padding-left:0;margin-bottom:1.4em} .content-page ul li{margin-bottom:.7em;color:var(--ink-body);padding-left:1.5em;position:relative} .content-page ul li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:2px;background:var(--orange-500)} .content-page ol{padding-left:1.3em;margin-bottom:1.4em} .content-page ol li{margin-bottom:.7em;color:var(--ink-body)} .content-page{max-width:800px} .content-page p{font-size:1.02rem;line-height:1.95} .meta-updated{font-size:.8rem;color:var(--ink-mute);margin-bottom:2.4em;padding:14px 20px;background:var(--navy-50);border:1px solid var(--line);border-radius:2px;display:inline-block;letter-spacing:.03em} /* ---------- Footer (dark) ---------- */ .site-footer{background:var(--navy-950);color:var(--text-mute);padding:104px 0 0;position:relative} .site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--orange-500),transparent)} .footer-top{display:flex;flex-wrap:wrap;gap:40px;padding-bottom:64px;border-bottom:1px solid var(--line-dark)} .footer-top > .footer-brand{flex:1.4 1 260px;min-width:220px} .footer-top > .footer-col{flex:1 1 150px;min-width:140px} .footer-brand p{color:var(--text-mute);font-size:.9rem;margin:22px 0 26px;font-weight:300;line-height:1.85} .footer-brand .brand-hatters{color:var(--orange-500)} .footer-brand .brand-cars{color:#fff} .footer-brand .brand-flag{box-shadow:0 0 0 2px #fff} .footer-phone{ display:flex;align-items:center;gap:16px;background:var(--glass);padding:18px 22px; border-radius:var(--radius);margin-bottom:24px;border:1px solid var(--line-dark); transition:background-color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease); } .footer-phone:hover{background:var(--glass-hi);border-color:rgba(245,137,31,.45);transform:translateY(-2px)} .footer-phone .icon{color:#fff;background:var(--accent-grad);width:44px;height:44px;padding:11px;border-radius:50%;flex-shrink:0} .footer-phone strong{color:#fff;font-size:1.3rem;font-family:'Montserrat',sans-serif;font-weight:600;display:block;letter-spacing:.02em} .footer-phone span{font-size:.72rem;color:var(--text-mute);letter-spacing:.08em} .social-row{display:flex;gap:14px} .social-row a{ width:42px;height:42px;border-radius:50%;background:var(--glass);border:1px solid var(--line-dark); display:flex;align-items:center;justify-content:center;color:var(--text-soft); transition:background-color .4s var(--ease),transform .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } .social-row a:hover{background:var(--accent-grad);border-color:transparent;color:#fff;transform:translateY(-4px)} .footer-col h4{font-family:'Poppins',sans-serif;color:#fff;font-size:.66rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;margin-bottom:26px;padding-bottom:14px;position:relative} .footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--accent-grad)} .footer-col li{margin-bottom:13px;list-style:none} .footer-col ul{padding-left:0;margin:0} .footer-col a{color:var(--text-mute);font-size:.88rem;display:inline-block;transition:color .35s var(--ease),transform .35s var(--ease)} .footer-col a:hover{color:var(--orange-400);transform:translateX(5px)} .footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:30px 0;font-size:.78rem;color:var(--text-mute);flex-wrap:wrap;gap:14px;letter-spacing:.03em} .footer-legal{display:flex;gap:24px;flex-wrap:wrap} .footer-legal a{color:var(--text-mute)} .footer-legal a:hover{color:var(--orange-400)} .footer-badges{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:26px} .footer-badges span{ background:transparent;color:var(--text-mute);font-family:'Poppins',sans-serif;font-size:.6rem;font-weight:600; padding:9px 16px;border-radius:2px;border:1px solid var(--line-dark);letter-spacing:.16em;text-transform:uppercase; } .page-header .footer-badges span{background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} @media(max-width:980px){.footer-top > .footer-brand,.footer-top > .footer-col{flex-basis:calc(50% - 20px)}} @media(max-width:600px){.footer-top > .footer-brand,.footer-top > .footer-col{flex-basis:100%;min-width:0}} @media(max-width:760px){ .section{padding:78px 0} .form-grid > *{flex-basis:100%} .hero-photo{padding:82px 0 60px} .page-header{padding:76px 0 70px} .two-col{gap:40px} .section-head{margin-bottom:44px} } /* ========================================================= ELEGANCE LAYER Composition refinements that carry the luxury feel: gallery frames on photography, editorial fleet cards, numbered index rows, ornamental rules and softer, borderless cards. Brand palette unchanged — navy, orange, white only. ========================================================= */ /* ---- Light sections get depth instead of flat white ---- */ .section{position:relative} .section::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(ellipse at 0% 0%,rgba(10,38,71,.045),transparent 42%), radial-gradient(ellipse at 100% 100%,rgba(10,38,71,.04),transparent 45%); } .section > .container{position:relative;z-index:1} .photo-band::before,.join-feature::before,.hero-photo::before,.page-header::before{z-index:-1} /* ---- Ornamental rule under centred headings ---- */ .section-head.center h2{position:relative;padding-bottom:30px} .section-head.center h2::after{ content:"";position:absolute;left:50%;bottom:0;width:180px;height:9px;transform:translateX(-50%); background: linear-gradient(90deg,transparent,rgba(10,38,71,.22) 22%,rgba(10,38,71,.22) 42%,transparent 44%), linear-gradient(90deg,transparent 56%,rgba(10,38,71,.22) 58%,rgba(10,38,71,.22) 78%,transparent); background-repeat:no-repeat;background-position:center;background-size:100% 1px; } .section-head.center h2::before{ content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px; background:var(--orange-500);transform:rotate(45deg); } .bg-navy .section-head.center h2::after,.photo-band .section-head.center h2::after{ background: linear-gradient(90deg,transparent,rgba(255,255,255,.3) 22%,rgba(255,255,255,.3) 42%,transparent 44%), linear-gradient(90deg,transparent 56%,rgba(255,255,255,.3) 58%,rgba(255,255,255,.3) 78%,transparent); background-repeat:no-repeat;background-position:center;background-size:100% 1px; } .section-head.center p{max-width:64ch;margin-left:auto;margin-right:auto} /* ---- Gallery frame behind two-column photography ---- */ .two-col > .visual{position:relative} .two-col > .visual::before{ content:"";position:absolute;z-index:0;border:1px solid rgba(245,137,31,.45); border-radius:var(--radius-lg);inset:26px -26px -26px 26px;pointer-events:none; } .two-col.reverse > .visual::before{inset:26px 26px -26px -26px} .two-col > .visual > *{position:relative;z-index:1} @media(max-width:860px){.two-col > .visual::before{display:none}} /* ---- Cards: borderless, layered, quieter ---- */ .card{ border:none;box-shadow:0 2px 6px -2px rgba(10,38,71,.07),0 18px 40px -26px rgba(10,38,71,.3); background:#fff; } .card:hover{box-shadow:0 8px 18px -8px rgba(10,38,71,.12),0 40px 80px -36px rgba(10,38,71,.45)} .card::before{height:1.5px} .testimonial-card{border:none;box-shadow:0 2px 6px -2px rgba(10,38,71,.07),0 18px 40px -26px rgba(10,38,71,.3)} .testimonial-card:hover{box-shadow:0 8px 18px -8px rgba(10,38,71,.12),0 40px 80px -36px rgba(10,38,71,.45)} .feature-row{border-color:rgba(10,38,71,.09);box-shadow:0 1px 3px -1px rgba(10,38,71,.05)} /* ---- Numbered index on the introduction rows ---- */ .feature-rows{counter-reset:frow} .feature-row{counter-increment:frow;position:relative} .feature-row::before{ content:counter(frow,decimal-leading-zero); position:absolute;top:18px;right:26px; font-family:'Montserrat',sans-serif;font-size:2.4rem;font-weight:500;line-height:1; color:rgba(10,38,71,.1);transition:color .45s var(--ease); } .feature-row:hover::before{color:rgba(245,137,31,.35)} @media(max-width:560px){.feature-row::before{display:none}} /* ---- Fleet cards: editorial composition ---- Photo bleeds to the card edge, name and specs sit beneath on hairlines, and the call to action becomes a ruled link. */ .fleet-card{ border:none;padding:0 26px 26px;overflow:hidden; box-shadow:0 2px 6px -2px rgba(10,38,71,.07),0 18px 40px -26px rgba(10,38,71,.3); } .fleet-card:hover{box-shadow:0 10px 22px -10px rgba(10,38,71,.14),0 44px 84px -38px rgba(10,38,71,.5)} .fleet-media{order:-2;margin:0 -26px 22px;border-radius:0;aspect-ratio:4/3} .fleet-card h3{order:-1;margin-bottom:14px;font-size:1.5rem} .fleet-specs{ order:0;flex-direction:row;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px; padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .fleet-specs > span{font-size:.7rem;letter-spacing:.09em;color:var(--ink-body);font-weight:500} .fleet-card p{order:1;margin-bottom:20px} .fleet-btn{ order:2;background:transparent!important;border:none!important;border-top:1px solid var(--line)!important; border-radius:0!important;color:var(--navy-900)!important;padding:18px 0 0;justify-content:space-between; font-size:.66rem;letter-spacing:.2em;box-shadow:none!important; } .fleet-btn::after{display:none} .fleet-btn .icon{transition:transform .4s var(--ease);color:var(--orange-500)} .fleet-card:hover .fleet-btn{color:var(--orange-600)!important;transform:none} .fleet-card:hover .fleet-btn .icon{transform:translateX(7px)} /* Vehicles awaiting photography: a quiet framed panel, not a loud tile */ .fleet-media-icon{background:var(--navy-50);position:relative} .fleet-media-icon::after{content:"";position:absolute;inset:16px;border:1px solid rgba(10,38,71,.14)} .fleet-media-icon .icon{color:rgba(10,38,71,.3);width:54px;height:54px} /* ---- Photo cards: framed image, calmer badge ---- */ .card-media::before{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.28);z-index:1;pointer-events:none} .card-media .card-icon{background:#fff;color:var(--orange-600);border:none;box-shadow:0 14px 30px -12px rgba(10,38,71,.5)} /* ---- Trust strip: hairline dividers, more air ---- */ .trust-item{padding:44px 26px} .trust-icon{background:#fff;border:1px solid rgba(245,137,31,.4);box-shadow:0 10px 24px -14px rgba(245,137,31,.7)} /* ---- Quote bar: finer frame ---- */ .quote-bar{border:1px solid rgba(255,255,255,.65);padding:12px} /* ---- Media captions: lighter, more refined ---- */ .media-caption{background:rgba(5,22,41,.58);padding:20px 22px} .media-caption h3{font-size:1.24rem} /* ---- Area links: engraved feel ---- */ .area-list-grid a{border-color:rgba(10,38,71,.14);box-shadow:inset 0 0 0 1px #fff} /* ---- Buttons: slightly finer ---- */ .btn{font-size:.74rem;letter-spacing:.18em;padding:16px 32px} .btn-lg{padding:19px 40px;font-size:.78rem} /* ========================================================= DARK BAND REFINEMENT The dark sections were reading as flat, murky slabs: the overlays sat at 93-97% so no photograph came through, and the film grain dulled the navy. These sections now keep a readable overlay with a vignette, so the image is visible and the band looks deliberate. Brand palette unchanged. ========================================================= */ /* Lighter grain everywhere it is used */ :root{ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); } /* Photographic band: image visible, warm glow, vignetted edges */ .photo-band::before{ background: radial-gradient(ellipse at 24% 8%,rgba(245,137,31,.2),transparent 52%), radial-gradient(ellipse at 50% 50%,rgba(5,22,41,.62) 0%,rgba(5,22,41,.88) 68%,rgba(5,22,41,.96) 100%), linear-gradient(180deg,rgba(5,22,41,.55),rgba(5,22,41,.78)); background-size:auto,auto,auto; } .photo-band{border-top:1px solid rgba(245,137,31,.35);border-bottom:1px solid rgba(245,137,31,.35)} /* CTA panels: the photograph reads, copy side stays legible */ .cta-banner::before{ background: radial-gradient(ellipse at 86% 18%,rgba(245,137,31,.24),transparent 52%), linear-gradient(90deg,rgba(5,22,41,.94) 0%,rgba(5,22,41,.82) 48%,rgba(5,22,41,.5) 100%); background-size:auto,auto; } /* Page headers: lift the overlay so the photo is part of the design */ .page-header::before{ background: radial-gradient(ellipse at 12% 40%,rgba(245,137,31,.18),transparent 52%), linear-gradient(100deg,rgba(5,22,41,.94) 0%,rgba(5,22,41,.8) 46%,rgba(5,22,41,.44) 100%); background-size:auto,auto; } /* Hero: a touch more of the photograph on the right-hand side */ .hero-photo::before{ background: radial-gradient(ellipse at 16% 44%,rgba(245,137,31,.2),transparent 54%), linear-gradient(100deg,rgba(5,22,41,.95) 0%,rgba(5,22,41,.84) 44%,rgba(5,22,41,.4) 100%); background-size:auto,auto; } /* Drive-with-us: a clean navy gradient instead of the muddy wash */ .join-feature{background:linear-gradient(135deg,#0a2647 0%,#071c33 55%,#05162a 100%)} .join-feature::before{ background: radial-gradient(circle at 6% 10%,rgba(245,137,31,.22),transparent 42%), radial-gradient(circle at 96% 92%,rgba(22,74,140,.4),transparent 46%); background-size:auto,auto; } .join-feature{border-top:1px solid rgba(245,137,31,.3)} /* Glass panels on dark read brighter against the lighter overlays */ .band-card{background:rgba(5,22,41,.5);border-color:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)} .band-card:hover{background:rgba(5,22,41,.62);border-color:rgba(245,137,31,.5)} .join-box{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.14)} /* Dark bands: headings get the same ornament treatment as light ones */ .photo-band .section-head.center h2::before,.join-feature .section-head.center h2::before{background:var(--orange-400)} /* ---- Brand photography ---- */ /* Home "What We Do": car + chauffeur cut-out on an orange gradient panel (same gradient as the buttons), with the car breaking out to the left */ .two-col > .visual:has(> .cutout-figure)::before{display:none} .cutout-figure{ margin:0;position:relative;aspect-ratio:1/1.05; border-radius:var(--radius-lg);background:var(--accent-grad);box-shadow:var(--shadow-orange); } /* soft light in the top corner and a floor shadow under the car */ .cutout-figure::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 85% 12%,rgba(255,255,255,.28),transparent 45%)} .cutout-figure::after{content:"";position:absolute;left:-14%;right:12%;bottom:5%;height:9%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(5,22,41,.45),transparent 70%);z-index:1} .cutout-figure img{ position:absolute;z-index:2;left:-22%;bottom:6%;width:118%;max-width:none;height:auto;display:block; filter:drop-shadow(0 22px 26px rgba(5,22,41,.35)); } @media(max-width:860px){ .cutout-figure{aspect-ratio:auto;padding:40px 16px 24px;margin-top:12px} .cutout-figure::after{left:8%;right:8%} .cutout-figure img{position:relative;left:0;bottom:0;width:100%;margin:0 auto} } /* Full-width fleet line-up above the vehicle cards */ .fleet-banner{margin:0 0 48px;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);padding:24px 16px} .fleet-banner img{width:100%;height:auto;display:block} /* Fleet photos are studio shots on white: show the whole vehicle */ .fleet-media{background:#fff} .fleet-media img{object-fit:contain} /* Booking-option product shots */ .extra-img{width:72px;height:72px;object-fit:contain;margin-bottom:14px} .baby-seat-banner{margin:40px auto 24px;max-width:616px;text-align:center} .baby-seat-banner img{width:100%;height:auto;display:inline-block} .visual .baby-seat-banner{margin:0 auto} .copy .extra-img{display:block} /* School Runs: seat types and how-to-request steps */ .seat-card{align-items:center;text-align:center} .seat-card-media{height:170px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:22px} .seat-card-media img{max-height:100%;width:auto;max-width:100%} .seat-card-media .card-icon{margin:0 0 40px} .seat-card h3{margin-bottom:6px} .seat-card-range{display:inline-block;font-family:'Poppins',sans-serif;font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-600);margin-bottom:14px} .seat-card p{font-size:.92rem;margin:0} .seat-steps{margin:48px 0 32px} .seat-step{border-top:2px solid var(--orange-500);padding-top:20px} .seat-step-num{display:block;font-family:'Montserrat',sans-serif;font-weight:600;font-size:1.6rem;color:var(--orange-500);line-height:1;margin-bottom:12px} .seat-step h3{font-size:1.1rem;margin-bottom:8px} .seat-step p{font-size:.92rem;margin:0}