*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:#11151b;background:#f7f7f7}a{text-decoration:none;color:inherit}button{font:inherit;cursor:pointer}.public-header{height:70px;background:#090b0f;color:#fff;display:flex;align-items:center;padding:0 3.2%;gap:35px;position:sticky;top:0;z-index:1000;border-bottom:1px solid #252a31}.logo{display:flex;flex-direction:column;font-style:italic;font-weight:900;line-height:.78;min-width:130px}.logo-main{font-size:29px;letter-spacing:-2px}.logo-sub{font-size:12px;color:#e21c2b;letter-spacing:1px;margin-left:35px}.public-nav{display:flex;align-items:center;gap:28px;flex:1}.public-nav a{font-size:12px;font-weight:800;letter-spacing:.3px;color:#e7e9ec}.public-nav a:hover,.public-nav a.active{color:#ed1b2f}.header-contact{display:flex;gap:18px}.header-contact a{display:flex;gap:7px;align-items:center;font-size:20px;border-left:1px solid #42464c;padding-left:18px}.header-contact span{font-size:10px;line-height:1.25;color:#ddd}.header-contact b{font-size:12px;color:#fff}.mobile-menu{display:none;background:none;border:0;color:#fff;font-size:25px}.hero{height:500px;position:relative;overflow:hidden;background:radial-gradient(circle at 65% 50%,#243d59 0,#111b28 38%,#06080b 80%);color:#fff;display:flex;align-items:center;padding:0 7%;isolation:isolate}.hero:after{content:"";position:absolute;inset:auto 0 0;height:110px;background:linear-gradient(transparent,#06080b);z-index:-1}.hero-city{position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#080a0e),repeating-linear-gradient(90deg,transparent 0 80px,#17202b 81px 83px);opacity:.5;z-index:-1}.hero-copy{z-index:2;width:46%}.eyebrow{font-size:11px;font-weight:900;letter-spacing:2px;color:#e31d2d;margin:0 0 12px}.hero h1{font-size:43px;line-height:.92;margin:0;font-style:italic;letter-spacing:-1px}.hero h1 strong{font-size:61px;color:#ed1b2f}.hero-model{font-size:35px;font-weight:900;font-style:italic;margin:14px 0 0}.hero-model b{font-size:38px}.hero-sub{font-size:16px;font-weight:800;margin:5px 0 25px}.hero-actions{display:flex;gap:12px}.btn{border:1px solid transparent;border-radius:5px;padding:12px 20px;font-size:12px;font-weight:900;letter-spacing:.2px}.btn.red{background:#e21b2b;color:#fff;box-shadow:0 8px 22px #e21b2b35}.btn.outline{background:transparent;border-color:#fff;color:#fff}.btn.outline.dark{border-color:#23262b;color:#15191e;background:#fff}.btn.whatsapp{background:#16a34a;color:#fff}.hero-bike{position:absolute;right:3%;width:58%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1}.hero-bike img{width:90%;height:88%;object-fit:cover;mix-blend-mode:screen;opacity:.85;filter:saturate(.8) contrast(1.15);border-radius:45% 10% 45% 10%;mask-image:linear-gradient(to right,transparent 0,black 18%,black 85%,transparent 100%)}.bike-glow{position:absolute;width:450px;height:250px;background:#3b87d833;filter:blur(50px);border-radius:50%}.trust-strip{position:relative;margin:-32px auto 0;width:94%;max-width:1200px;background:#151a22;color:#fff;border:1px solid #343c48;border-radius:14px;display:grid;grid-template-columns:repeat(5,1fr);padding:17px 10px;z-index:5;box-shadow:0 18px 45px #0003}.trust-strip div{display:flex;gap:12px;align-items:center;justify-content:center;border-right:1px solid #3a4048}.trust-strip div:last-child{border:0}.trust-strip b{font-size:25px}.trust-strip span{font-size:10px;line-height:1.5}.trust-strip strong{font-size:11px}.section{padding:55px 3.5% 35px;max-width:1320px;margin:auto}.section-title{text-align:center;font-size:23px;font-weight:900;margin-bottom:28px}.section-title span{font-weight:500}.section-title:after{content:"";display:block;width:45px;height:3px;background:#e21b2b;margin:10px auto}.bike-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.bike-card{background:#fff;border:1px solid #e5e5e5;border-radius:11px;overflow:hidden;box-shadow:0 6px 22px #0000000b;transition:.25s}.bike-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px #0002}.bike-image{height:185px;position:relative;background:linear-gradient(145deg,#f1f3f5,#fff);display:flex;align-items:center;justify-content:center;overflow:hidden}.bike-image img{
width:100%;
height:100%;
object-fit:contain;
mix-blend-mode:multiply;
padding:10px;
}.bike-image span{position:absolute;top:9px;right:9px;background:#111;color:#fff;padding:4px 7px;font-size:8px;font-weight:900}.bike-info{padding:13px}.bike-info h3{margin:0 0 8px;font-size:15px}.bike-info small{display:block;color:#666;font-size:10px;margin-top:7px}.bike-info>strong{display:block;font-size:15px;margin-top:2px}.terms-link{display:block;border:0;background:none;padding:6px 0 3px;text-decoration:underline;font-size:10px;font-weight:800;color:#222}.card-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}.card-actions .btn{padding:9px 5px;font-size:10px}.offer-banner{max-width:1240px;margin:15px auto 25px;background:linear-gradient(100deg,#071b31,#112c4b 60%,#071221);border-radius:13px;min-height:145px;color:#fff;display:flex;align-items:center;justify-content:space-around;overflow:hidden;padding:20px 5%;position:relative}.offer-banner:before{content:"";position:absolute;width:330px;height:330px;border:1px solid #2f5b84;border-radius:50%;left:-80px;top:-90px}.offer-banner p{font-size:27px;font-weight:900;margin:0}.offer-banner h2{font-size:18px;font-weight:400;margin:0 0 15px}.offer-art{font-size:17px;font-weight:900;transform:rotate(-7deg);border:2px solid #e21b2b;padding:16px 25px;background:#10161e}.offer-art b{font-size:30px;color:#ed1b2f}.finance{max-width:1240px;margin:0 auto 40px;background:#fff;border:1px solid #e8e8e8;border-radius:12px;display:grid;grid-template-columns:repeat(4,1fr);padding:20px}.finance div{padding:5px 24px;border-right:1px solid #ddd;display:flex;flex-direction:column;gap:5px}.finance div:last-child{border:0}.finance b{font-size:11px}.finance span{font-size:11px;color:#777}.contact-section{background:#eef1f4;display:grid;grid-template-columns:1.4fr .8fr;gap:35px;padding:65px 7%;align-items:center}.contact-section h2{font-size:38px;margin:0 0 12px}.contact-section p:not(.eyebrow){max-width:650px;color:#555;line-height:1.6}.contact-buttons{display:flex;gap:10px;margin-top:20px}.location-card{background:#11151b;color:#fff;padding:30px;border-radius:14px;box-shadow:0 15px 35px #0002}.location-card strong,.location-card span{display:block}.location-card span{margin:13px 0 22px;color:#cbd0d6;line-height:1.5}.location-card a{font-size:11px;font-weight:900;color:#ef3340}footer{background:#090b0f;color:#d4d8dd;padding:45px 4% 0}.footer-grid{max-width:1300px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:45px}.footer-grid p{color:#aeb5bd;font-size:12px;line-height:1.7;max-width:300px}.footer-grid h4{font-size:11px;color:#fff;letter-spacing:1px}.footer-grid>a,.footer-grid div>a,.footer-grid span,.footer-grid b{display:block;font-size:11px;margin:8px 0}.footer-grid b{font-size:14px;color:#fff}.footer-logo{margin-bottom:16px}.socials{display:flex;gap:8px;flex-wrap:wrap}.socials a{border:1px solid #343941;padding:8px;border-radius:4px}.staff-title{margin-top:25px}.staff-login{border:1px solid #777!important;padding:9px 18px!important;display:inline-block!important}.footer-bottom{border-top:1px solid #24282e;max-width:1300px;margin:30px auto 0;padding:18px 0;display:flex;justify-content:space-between;font-size:10px}.floating-wa{position:fixed;bottom:18px;left:16px;background:#20c768;color:#fff;border-radius:30px;padding:9px 17px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;z-index:900;box-shadow:0 7px 25px #0003}.floating-wa:first-letter{font-size:20px}.modal-backdrop{position:fixed;inset:0;background:#0009;display:none;align-items:center;justify-content:center;padding:20px;z-index:2000}.modal-backdrop.show{display:flex}.modal-card{position:relative;width:min(650px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:15px;padding:28px;box-shadow:0 25px 80px #0005}.modal-close{position:absolute;right:13px;top:10px;border:0;background:none;font-size:28px}.modal-card h2{margin:5px 0 8px;font-size:25px}.muted{color:#777;font-size:12px}.form-grid-public{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}.form-grid-public label{font-size:11px;font-weight:800}.form-grid-public input,.form-grid-public select,.form-grid-public textarea{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #d9dde2;border-radius:7px;background:#fff}.full-public{grid-column:1/-1}.submit-btn{margin-top:16px;width:100%}.form-status{font-size:12px;margin-top:10px}.form-status.success{color:#16803a}.form-status.error{color:#c41d2e}.terms-card{max-width:560px}.terms-card li{margin:10px 0;color:#555;font-size:13px;line-height:1.5}.terms-contact{margin-top:18px;padding:13px;background:#f4f6f8;border-left:3px solid #e21b2b;font-size:13px}.terms-contact a{font-weight:900}.@media(max-width:900px){.public-header{gap:15px}.public-nav{gap:14px}.header-contact{display:none}.bike-grid{grid-template-columns:repeat(2,1fr)}.trust-strip{grid-template-columns:repeat(2,1fr);gap:5px}.trust-strip div:nth-child(2n){border:0}.hero{height:470px;padding:0 7%}.hero-copy{width:60%}.hero-bike{right:-20%;width:75%;opacity:.6}.contact-section{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.public-header{height:62px}.mobile-menu{display:block;margin-left:auto}.public-nav{position:absolute;display:none;left:0;right:0;top:62px;background:#090b0f;padding:12px 20px;flex-direction:column;align-items:flex-start}.public-nav.open{display:flex}.hero{height:480px;padding:0 6%}.hero-copy{width:100%;z-index:3}.hero h1{font-size:34px}.hero h1 strong{font-size:49px}.hero-bike{right:-40%;width:100%;opacity:.35}.trust-strip{margin-top:-22px;width:94%;grid-template-columns:1fr 1fr}.trust-strip div{border:0}.trust-strip div:nth-child(n+5){display:none}.section{padding-top:40px}.bike-grid{grid-template-columns:1fr}.offer-banner{margin:10px 15px;flex-direction:column;gap:18px;text-align:center}.finance{margin:15px;grid-template-columns:1fr 1fr}.finance div{border:0;padding:10px}.contact-section{padding:45px 6%}.contact-section h2{font-size:30px}.contact-buttons{flex-wrap:wrap}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;gap:8px}.form-grid-public{grid-template-columns:1fr}.full-public{grid-column:auto}}
/* =========================================================
AQUIL MOTORS — PUBLIC WEBSITE
SKY BLUE + WHITE PROFESSIONAL THEME
STEP 9-F
========================================================= */
:root{
--aquil-sky:#0ea5e9;
--aquil-sky-dark:#0284c7;
--aquil-sky-deep:#0369a1;
--aquil-sky-light:#e0f2fe;
--aquil-sky-pale:#f0f9ff;
--aquil-white:#ffffff;
--aquil-text:#0f172a;
--aquil-muted:#64748b;
--aquil-border:#bae6fd;
}
/* PAGE */
body{
background:var(--aquil-sky-pale);
color:var(--aquil-text);
}
/* HEADER */
.public-header{
background:#ffffff;
color:var(--aquil-text);
border-bottom:1px solid var(--aquil-border);
box-shadow:0 3px 16px rgba(2,132,199,.10);
}
.logo{
color:var(--aquil-sky-dark);
}
.logo-main{
color:var(--aquil-sky-dark);
}
.logo-sub{
color:var(--aquil-sky);
}
.public-nav a{
color:#334155;
}
.public-nav a:hover,
.public-nav a.active{
color:var(--aquil-sky-dark);
}
.header-contact a{
border-left-color:#dbeafe;
color:var(--aquil-sky-dark);
}
.header-contact span{
color:#64748b;
}
.header-contact b{
color:#0f172a;
}
.mobile-menu{
color:var(--aquil-sky-dark);
}
/* HERO */
.hero{
background:
radial-gradient(circle at 72% 45%,#7dd3fc 0,#38bdf8 22%,#0284c7 55%,#0369a1 100%);
color:#fff;
}
.hero-copy{
position:relative;
z-index:3;
}
.eyebrow{
color:#e0f2fe;
}
.hero h1 strong{
color:#ffffff;
}
.hero-model b{
color:#e0f2fe;
}
.hero-sub{
color:#e0f2fe;
}
/* HERO BIKE AREA */
.bike-glow{
background:radial-gradient(
circle,
rgba(255,255,255,.45) 0%,
rgba(224,242,254,.22) 30%,
rgba(255,255,255,0) 70%
);
}
/* BUTTONS */
.btn.red{
background:var(--aquil-sky);
color:#fff;
border:1px solid var(--aquil-sky);
}
.btn.red:hover{
background:var(--aquil-sky-dark);
border-color:var(--aquil-sky-dark);
}
.btn.outline{
color:#fff;
border-color:#fff;
background:transparent;
}
.btn.outline:hover{
background:#fff;
color:var(--aquil-sky-dark);
}
.btn.outline.dark{
color:var(--aquil-sky-dark);
border-color:var(--aquil-sky);
}
.btn.outline.dark:hover{
background:var(--aquil-sky);
color:#fff;
}
/* TRUST STRIP */
.trust-strip{
background:#fff;
border-bottom:1px solid var(--aquil-border);
color:var(--aquil-text);
}
.trust-strip strong{
color:var(--aquil-sky-dark);
}
/* SECTIONS */
.section{
background:#fff;
}
.section-title{
color:var(--aquil-text);
}
.section-title span{
color:var(--aquil-sky-dark);
}
/* BIKE CARDS */
.bike-card{
background:#fff;
border:1px solid #dbeafe;
box-shadow:0 8px 25px rgba(2,132,199,.10);
}
.bike-card:hover{
border-color:#7dd3fc;
box-shadow:0 14px 32px rgba(2,132,199,.18);
}
.bike-card h3{
color:var(--aquil-text);
}
.bike-card .price{
color:var(--aquil-sky-dark);
}
/* OFFER */
.offer-banner{
background:
linear-gradient(
135deg,
#e0f2fe 0%,
#bae6fd 48%,
#7dd3fc 100%
);
color:var(--aquil-text);
}
.offer-art{
color:var(--aquil-sky-dark);
}
.offer-banner .btn.red{
background:var(--aquil-sky-dark);
}
/* FINANCE */
.finance{
background:#f0f9ff;
}
.finance h2{
color:var(--aquil-text);
}
.finance strong{
color:var(--aquil-sky-dark);
}
/* CONTACT */
.contact-section{
background:#fff;
color:var(--aquil-text);
}
.contact-section .eyebrow{
color:var(--aquil-sky-dark);
}
.location-card{
background:var(--aquil-sky-pale);
border:1px solid var(--aquil-border);
}
/* WHATSAPP / CONTACT BUTTON */
.btn.whatsapp{
background:#25d366;
color:#fff;
border:1px solid #25d366;
}
.btn.whatsapp:hover{
filter:brightness(.95);
}
/* FOOTER */
footer{
background:#0284c7;
color:#e0f2fe;
}
footer .logo-main{
color:#fff;
}
footer .logo-sub{
color:#e0f2fe;
}
footer h4{
color:#fff;
}
footer a{
color:#e0f2fe;
}
footer a:hover{
color:#fff;
}
.footer-bottom{
border-top-color:rgba(255,255,255,.25);
}
/* FLOATING WHATSAPP */
.floating-wa{
background:#25d366;
color:#fff;
box-shadow:0 8px 25px rgba(0,0,0,.18);
}
.floating-wa:hover{
transform:translateY(-2px);
}
/* MODALS */
.modal-backdrop{
background:rgba(15,23,42,.55);
}
.modal-card{
background:#fff;
border:1px solid var(--aquil-border);
box-shadow:0 25px 70px rgba(2,132,199,.20);
}
.modal-card h2,
.modal-card h3{
color:var(--aquil-text);
}
/* FORMS */
.modal-card input,
.modal-card select,
.modal-card textarea{
border-color:#cbd5e1;
}
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus{
border-color:var(--aquil-sky);
outline:none;
box-shadow:0 0 0 3px rgba(14,165,233,.14);
}
/* MOBILE HEADER */
@media(max-width:800px){
.public-nav{
background:#fff;
border:1px solid var(--aquil-border);
box-shadow:0 10px 30px rgba(2,132,199,.15);
}
.public-nav a{
color:#334155;
}
.public-nav a:hover,
.public-nav a.active{
color:var(--aquil-sky-dark);
background:var(--aquil-sky-light);
}
}
/* =========================================================
AQUIL MOTORS — PUBLIC HEADER BLACK TEXT
Keep Hero/Footer white text unchanged
========================================================= */
.public-header{
color:#000;
}
.public-header .logo-main{
color:#000;
}
.public-header .logo-sub{
color:var(--aquil-sky);
}
.public-header .public-nav a{
color:#000;
}
.public-header .public-nav a:hover,
.public-header .public-nav a.active{
color:var(--aquil-sky-dark);
}
.public-header .header-contact span{
color:#000;
}
.public-header .header-contact b{
color:#000;
}
.public-header .mobile-menu{
color:#000;
}
@media(max-width:800px){
.public-header .public-nav a{
color:#000;
}
.public-header .public-nav a:hover,
.public-header .public-nav a.active{
color:var(--aquil-sky-dark);
background:var(--aquil-sky-light);
}
}
/* =========================================================
AQUIL MOTORS PUBLIC WEBSITE
WHITE TEXT -> BLACK
========================================================= */
.public-header,
.public-header .header-contact,
.public-header .header-contact a,
.public-header .public-nav a,
.public-header .logo{
color:#000 !important;
}
.public-header .logo-main,
.public-header .logo-sub{
color:#000 !important;
}
.hero,
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero .hero-copy,
.hero .hero-model,
.hero .hero-sub,
.hero .eyebrow{
color:#000 !important;
}
.section,
.section h1,
.section h2,
.section h3,
.section p,
.section-title{
color:#000;
}
.offer-banner,
.offer-banner h1,
.offer-banner h2,
.offer-banner h3,
.offer-banner p{
color:#000;
}
.finance,
.finance h1,
.finance h2,
.finance h3,
.finance p{
color:#000;
}
.contact-section,
.contact-section h1,
.contact-section h2,
.contact-section h3,
.contact-section p{
color:#000;
}
.location-card,
.location-card h1,
.location-card h2,
.location-card h3,
.location-card p{
color:#000;
}
footer{
color:#000;
}
footer p,
footer a,
footer h4,
footer .footer-bottom{
color:#000 !important;
}
footer .logo-main,
footer .logo-sub{
color:#000 !important;
}
/* ===== VEHICLE MORE INFO POPUP ===== */
.vehicle-info-card{
max-width:900px;
width:95%;
max-height:90vh;
overflow-y:auto;
}
.vehicle-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:15px;
margin:20px 0;
}
.vehicle-gallery-img{
width:100%;
height:160px;
object-fit:cover;
border-radius:12px;
border:1px solid #ddd;
}
.vehicle-info-card h3{
margin-top:20px;
margin-bottom:10px;
}
.vehicle-spec-table{
width:100%;
border-collapse:collapse;
margin-top:10px;
}
.vehicle-spec-table td{
border:1px solid #ddd;
padding:10px;
}
.vehicle-spec-table td:first-child{
font-weight:700;
}
/* ===== VEHICLE INFO PRICE + ACTION UI ===== */
.vehicle-price-box{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:15px;
margin:20px 0;
}
.vehicle-price-box div{
padding:15px;
border-radius:12px;
background:#f5f5f5;
}
.vehicle-price-box small{
display:block;
font-size:12px;
font-weight:700;
margin-bottom:8px;
}
.vehicle-price-box strong{
font-size:22px;
}
.vehicle-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin:25px 0;
}
.vehicle-actions .btn{
min-width:150px;
}
@media(max-width:600px){
.vehicle-actions{
flex-direction:column;
}
.vehicle-actions .btn{
width:100%;
}
.vehicle-price-box strong{
font-size:18px;
}
}
/* =========================================================
AQUIL MOTORS — MOBILE OVERFLOW FIX
Keep Sales/Service contacts hidden on mobile.
Keep hero artwork fully inside viewport.
========================================================= */
@media(max-width:650px){
.public-header .header-contact{
display:none !important;
}
.hero-bike{
right:0 !important;
width:100% !important;
max-width:100% !important;
}
.bike-glow{
right:0 !important;
width:100% !important;
max-width:100% !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE ADMIN PANEL
Targeted responsive patch
========================================================= */
@media (max-width: 768px) {
html,
body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
#app {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.layout {
display: block !important;
width: 100%;
min-width: 0 !important;
}
.side {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
position: relative !important;
top: auto !important;
height: auto !important;
max-height: none !important;
overflow: visible !important;
padding: 12px !important;
}
.side h2 {
margin: 4px 0 10px !important;
font-size: 20px !important;
}
.nav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px !important;
width: 100%;
}
.nav button {
width: 100% !important;
min-width: 0 !important;
white-space: normal !important;
word-break: break-word;
padding: 10px 8px !important;
font-size: 13px !important;
}
.side > .btn {
width: 100% !important;
margin-top: 12px !important;
}
.main {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 12px !important;
overflow-x: hidden;
}
.top {
width: 100%;
min-width: 0;
margin-bottom: 12px !important;
}
.top h1 {
font-size: 22px !important;
line-height: 1.25 !important;
word-break: break-word;
}
.top .muted {
display: block;
margin-top: 4px;
word-break: break-word;
}
.toolbar {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
width: 100%;
}
.toolbar .btn {
max-width: 100%;
}
.table-wrap {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
.table {
min-width: 650px;
}
.form-grid {
grid-template-columns: 1fr !important;
width: 100%;
}
.form-grid > * {
min-width: 0 !important;
max-width: 100%;
}
input,
select,
textarea {
max-width: 100%;
box-sizing: border-box;
}
.checks {
grid-template-columns: 1fr !important;
}
#appModal > div {
width: calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
max-height: 92vh !important;
padding: 16px !important;
box-sizing: border-box;
}
#appModal .form-grid {
grid-template-columns: 1fr !important;
}
.card,
.panel,
.section {
max-width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 480px) {
.main {
padding: 9px !important;
}
.side {
padding: 9px !important;
}
.nav {
grid-template-columns: 1fr 1fr;
gap: 6px !important;
}
.nav button {
font-size: 12px !important;
padding: 9px 6px !important;
}
.top h1 {
font-size: 20px !important;
}
.btn {
max-width: 100%;
}
.table {
min-width: 620px;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE LAYOUT FIX v2
Full-width dashboard + horizontal mobile navigation
========================================================= */
@media (max-width: 768px) {
html,
body {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}
#app {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.layout {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Mobile navigation becomes a full-width top bar */
.side {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 10px !important;
margin: 0 !important;
position: relative !important;
display: block !important;
}
.side h2 {
margin: 0 0 8px !important;
font-size: 18px !important;
line-height: 1.2 !important;
}
.nav {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
gap: 7px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
padding-bottom: 2px !important;
}
.nav::-webkit-scrollbar {
display: none !important;
}
.nav button {
flex: 0 0 auto !important;
width: auto !important;
min-width: 92px !important;
max-width: none !important;
white-space: nowrap !important;
font-size: 12px !important;
padding: 9px 10px !important;
}
.side > .btn {
width: auto !important;
margin-top: 8px !important;
}
/* Main dashboard gets the complete phone width */
.main {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
padding: 12px !important;
margin: 0 !important;
}
.top {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.top h1 {
font-size: 22px !important;
line-height: 1.2 !important;
}
.card,
.panel,
.section,
.dashboard,
.stats,
.stat {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.grid,
.cards,
.stats-grid {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
grid-template-columns: 1fr !important;
}
img,
video,
iframe {
max-width: 100% !important;
}
.table-wrap {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
}
}
@media (max-width: 480px) {
.side {
padding: 8px !important;
}
.side h2 {
font-size: 17px !important;
}
.nav button {
min-width: 88px !important;
font-size: 11px !important;
padding: 8px 9px !important;
}
.main {
padding: 10px !important;
}
.top h1 {
font-size: 21px !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE SIDEBAR OVERRIDE FINAL
========================================================= */
@media (max-width: 768px){
.layout {
display:block !important;
width:100% !important;
}
.layout > .side {
width:100% !important;
height:auto !important;
min-width:0 !important;
max-width:none !important;
flex:none !important;
flex-basis:auto !important;
position:relative !important;
display:block !important;
}
.layout > .main {
width:100% !important;
min-width:0 !important;
max-width:none !important;
flex:none !important;
}
.layout > .side .nav {
display:flex !important;
flex-direction:row !important;
overflow-x:auto !important;
width:100% !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE SIDEBAR TO TOP NAV
========================================================= */
@media (max-width:768px){
.layout{
display:block !important;
}
.layout > .side{
width:100% !important;
height:auto !important;
background:#0b7fbd !important;
display:block !important;
padding:10px !important;
overflow:visible !important;
}
.layout > .side h2{
display:none !important;
}
.layout > .side .nav{
display:flex !important;
flex-direction:row !important;
gap:8px !important;
overflow-x:auto !important;
white-space:nowrap !important;
}
.layout > .side .nav button{
flex:0 0 auto !important;
width:auto !important;
}
.layout > .side .btn{
margin-top:10px !important;
}
.layout > .main{
width:100% !important;
padding:10px !important;
}
}
/* =====================================================
AQUIL MOTORS MOBILE NAV CLEAN
===================================================== */
@media(max-width:768px){
.layout > .side .nav{
display:flex !important;
flex-direction:row !important;
gap:8px !important;
overflow-x:auto !important;
padding-bottom:5px !important;
}
.layout > .side .nav button{
display:block !important;
width:auto !important;
min-width:max-content !important;
white-space:nowrap !important;
font-size:12px !important;
text-align:center !important;
padding:10px 14px !important;
}
.layout > .side .nav button:before{
content:none !important;
}
.layout > .side > .btn{
width:auto !important;
margin-top:8px !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE HAMBURGER MENU
========================================================= */
.mobile-menu-btn{
display:none;
}
@media (max-width:768px){
.mobile-menu-btn{
display:block !important;
position:fixed !important;
top:10px;
left:10px;
z-index:99999;
width:42px;
height:38px;
border:0;
border-radius:8px;
background:#0b7fbd;
color:white;
font-size:22px;
cursor:pointer;
}
.layout > .side{
position:fixed !important;
top:0;
left:-280px;
width:260px !important;
height:100vh !important;
z-index:9999;
transition:.3s ease;
overflow-y:auto !important;
}
.layout > .side.mobile-open{
left:0 !important;
}
.layout > .main{
width:100% !important;
padding-top:55px !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE DRAWER MENU FINAL
========================================================= */
@media (max-width:768px){
.layout > .side.mobile-open{
left:0 !important;
width:270px !important;
height:100vh !important;
padding:20px !important;
background:#0b7fbd !important;
}
.layout > .side.mobile-open h2{
display:block !important;
font-size:20px !important;
color:white !important;
margin-bottom:20px !important;
}
.layout > .side.mobile-open .nav{
display:flex !important;
flex-direction:column !important;
gap:8px !important;
overflow:visible !important;
width:100% !important;
}
.layout > .side.mobile-open .nav button{
display:block !important;
width:100% !important;
text-align:left !important;
font-size:14px !important;
padding:12px !important;
color:white !important;
background:transparent !important;
}
.layout > .side.mobile-open .nav button:hover,
.layout > .side.mobile-open .nav button.active{
background:#075f91 !important;
border-radius:8px !important;
}
}
/* =========================================================
AQUIL MOTORS - HAMBURGER FINAL OVERRIDE
========================================================= */
@media (max-width:768px){
.mobile-menu-btn{
display:block !important;
}
.layout > .side{
display:block !important;
position:fixed !important;
top:0 !important;
left:-290px !important;
width:270px !important;
height:100vh !important;
z-index:9999 !important;
overflow-y:auto !important;
transition:left .3s ease !important;
}
.layout > .side.mobile-open{
left:0 !important;
}
.layout > .side .nav{
display:flex !important;
flex-direction:column !important;
width:100% !important;
overflow:visible !important;
gap:6px !important;
}
.layout > .side .nav button{
display:block !important;
width:100% !important;
text-align:left !important;
font-size:14px !important;
padding:12px !important;
white-space:normal !important;
}
.layout > .main{
width:100% !important;
margin-left:0 !important;
padding-top:55px !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE MENU POLISH
========================================================= */
@media (max-width:768px){
.layout > .side.mobile-open{
width:240px !important;
padding:16px !important;
}
.layout > .side.mobile-open h2{
display:block !important;
font-size:0 !important;
margin-bottom:18px !important;
}
.layout > .side.mobile-open h2:after{
content:"AQUIL MOTORS";
font-size:20px !important;
font-weight:800;
color:#fff;
}
.layout > .side.mobile-open .nav button{
border-radius:8px !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE MENU POLISH
========================================================= */
@media (max-width:768px){
.layout > .side.mobile-open{
width:240px !important;
padding:16px !important;
}
.layout > .side.mobile-open h2{
display:block !important;
font-size:0 !important;
margin-bottom:18px !important;
}
.layout > .side.mobile-open h2:after{
content:"AQUIL MOTORS";
font-size:20px !important;
font-weight:800;
color:#fff;
}
.layout > .side.mobile-open .nav button{
border-radius:8px !important;
}
}
/* =========================================================
AQUIL MOTORS - MOBILE DRAWER LOGO FIX
========================================================= */
@media (max-width:768px){
.layout > .side.mobile-open h2{
font-size:0 !important;
color:transparent !important;
}
.layout > .side.mobile-open h2::before{
content:"AQUIL MOTORS";
font-size:20px !important;
font-weight:800 !important;
color:#ffffff !important;
}
.layout > .side.mobile-open h2::after{
content:none !important;
}
}
\n
/* PREMIUM VEHICLE GALLERY */
.premium-vehicle-gallery{
text-align:center;
margin:20px 0;
}
.vehicle-main-image{
width:100%;
max-height:420px;
object-fit:contain;
border-radius:14px;
background:#fff;
border:1px solid #ddd;
}
.gallery-controls{
display:flex;
justify-content:center;
gap:12px;
margin:15px 0;
}
.vehicle-thumbnails{
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}
.vehicle-thumb{
width:85px;
height:65px;
object-fit:cover;
border-radius:8px;
cursor:pointer;
border:2px solid transparent;
}
.vehicle-thumb:hover,
.vehicle-thumb.active{
border-color:#d71920;
}
\n
/* PUBLIC CARD SWIPE GALLERY */
.premium-card-gallery{
width:100%;
}
.premium-card-gallery > img:first-child{
width:100%;
height:260px;
object-fit:contain;
background:#fff;
border-radius:12px;
}
.card-thumbnails{
display:flex;
gap:8px;
margin-top:10px;
overflow-x:auto;
padding:5px 2px;
scrollbar-width:none;
}
.card-thumbnails::-webkit-scrollbar{
display:none;
}
.card-thumbnails img{
flex:0 0 auto;
width:58px;
height:45px;
object-fit:cover;
border-radius:6px;
border:2px solid transparent;
cursor:pointer;
}
.card-thumbnails img.active{
border-color:#d71920;
}
@media(max-width:600px){
.premium-card-gallery > img:first-child{
height:220px;
}
.card-thumbnails img{
width:52px;
height:42px;
}
}
\n
/* FIX PUBLIC CARD GALLERY HEIGHT */
.premium-card-gallery{
height:auto;
min-height:240px;
display:block;
padding:10px;
}
.premium-card-gallery > img:first-child{
height:170px;
width:100%;
object-fit:contain;
display:block;
}
.premium-card-gallery .card-thumbnails{
display:flex;
width:100%;
}
.premium-card-gallery .card-thumbnails img{
width:48px;
height:38px;
flex:0 0 auto;
}
/* THUMBNAIL VISIBILITY FIX */
.premium-card-gallery{
overflow:visible !important;
}
.card-thumbnails{
position:relative;
z-index:10;
display:flex !important;
visibility:visible !important;
opacity:1 !important;
height:55px;
margin-top:8px;
}
.card-thumbnails img{
display:block !important;
visibility:visible !important;
opacity:1 !important;
}
/* CARD THUMBNAIL WIDTH FIX */
.premium-card-gallery{
width:100%;
box-sizing:border-box;
}
.premium-card-gallery .card-thumbnails{
width:100%;
max-width:100%;
box-sizing:border-box;
display:flex !important;
gap:8px;
overflow-x:auto;
}
.premium-card-gallery .card-thumbnails img{
flex:0 0 auto;
}
/* CARD GALLERY OVERFLOW FIX */
.bike-image.premium-card-gallery{
height:235px;
overflow:visible;
display:block;
padding:10px;
}
.bike-image.premium-card-gallery > img:first-child{
height:165px;
width:100%;
object-fit:contain;
display:block;
}
.bike-image.premium-card-gallery .card-thumbnails{
height:45px;
display:flex;
gap:6px;
overflow-x:auto;
margin-top:8px;
}
.bike-image.premium-card-gallery .card-thumbnails img{
width:42px;
height:34px;
flex:0 0 auto;
}
/* PREMIUM PRODUCT CARD GALLERY UI */
.bike-image.premium-card-gallery{
height:330px;
padding:12px;
overflow:visible;
}
.bike-image.premium-card-gallery > img:first-child{
height:210px;
width:100%;
object-fit:contain;
}
.bike-image.premium-card-gallery .card-thumbnails{
display:flex;
gap:10px;
margin-top:14px;
height:72px;
overflow-x:auto;
padding:2px;
}
.bike-image.premium-card-gallery .card-thumbnails img{
width:72px;
height:58px;
object-fit:contain;
background:#fff;
border:2px solid #ddd;
border-radius:10px;
padding:3px;
}
.bike-image.premium-card-gallery .card-thumbnails img.active{
border-color:#e11d2e;
}
/* ==============================
PUBLIC OFFER GALLERY
============================== */
.offer-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin:20px 0;
}
.offer-card{
background:#fff;
border-radius:18px;
overflow:hidden;
cursor:pointer;
border:1px solid #e5e7eb;
transition:.25s;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}
.offer-card:hover{
transform:translateY(-5px);
}
.offer-card img{
width:100%;
height:360px;
object-fit:contain;
background:#f8fafc;
display:block;
}
.offer-info{
padding:15px;
}
.offer-info h3{
margin:0 0 8px;
font-size:20px;
color:#111827;
}
.offer-info p{
margin:0;
color:#4b5563;
line-height:1.5;
}
@media(max-width:600px){
.offer-gallery{
grid-template-columns:1fr;
}
.offer-card img{
height:320px;
}
}
/* ===============================
PREMIUM OFFER SLIDER
================================ */
.offer-slider{
width:100%;
text-align:center;
margin:25px auto;
}
.offer-main{
width:min(900px,100%);
margin:auto;
cursor:pointer;
border-radius:20px;
overflow:hidden;
background:#fff;
box-shadow:0 10px 35px rgba(0,0,0,.12);
transition:all .35s ease;
}
.offer-main:hover{
transform:translateY(-4px);
box-shadow:0 18px 45px rgba(0,0,0,.18);
}
.offer-main img{
width:100%;
height:520px;
object-fit:contain;
display:block;
background:#f8fafc;
transition:transform .45s ease,opacity .35s ease;
}
.offer-main:hover img{
transform:scale(1.03);
}
.offer-thumbnails{
display:flex;
justify-content:center;
gap:12px;
margin:18px 0;
overflow-x:auto;
padding:5px;
}
.offer-thumbnails img{
width:90px;
height:70px;
object-fit:contain;
background:#fff;
border:2px solid #ddd;
border-radius:10px;
cursor:pointer;
padding:4px;
transition:.25s ease;
}
.offer-thumbnails img:hover{
transform:scale(1.08);
}
.offer-thumbnails img.active{
border-color:#e11d2e;
transform:scale(1.05);
}
.offer-slider h2{
margin:10px 0;
font-size:28px;
}
.offer-slider p{
font-size:16px;
color:#555;
}
.offer-actions{
display:flex;
justify-content:center;
gap:15px;
margin-top:20px;
}
.offer-actions .blue{
background:#1565c0;
color:white;
}
.offer-all-gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}
.offer-all-gallery img{
width:100%;
height:320px;
object-fit:contain;
background:#fff;
border-radius:12px;
cursor:pointer;
}
@media(max-width:700px){
.offer-main img{
height:350px;
}
.offer-thumbnails img{
width:65px;
height:55px;
}
.offer-actions{
flex-direction:column;
}
}
.offer-empty{
max-width:900px;
margin:25px auto;
padding:40px;
text-align:center;
background:#f8fafc;
border-radius:18px;
border:1px solid #e5e7eb;
}
.offer-empty h3{
margin:0 0 10px;
font-size:24px;
}
.offer-empty p{
color:#666;
}
/* =========================================================
AQUIL MOTORS W-01 — PREMIUM BLUE / WHITE THEME OVERRIDES
Reference: supplied Bajaj showroom visual direction
Existing functionality preserved
========================================================= */
:root{
--aquil-sky:#1689d8;
--aquil-sky-dark:#0875bf;
--aquil-sky-deep:#075b96;
--aquil-sky-light:#eaf6ff;
--aquil-sky-pale:#f5fbff;
--aquil-white:#ffffff;
--aquil-text:#10243a;
--aquil-muted:#617286;
--aquil-border:#d7e8f5;
}
/* Global */
html{
background:#ffffff;
}
body{
background:#ffffff;
color:var(--aquil-text);
}
/* Header */
.public-header{
background:#ffffff !important;
color:var(--aquil-text) !important;
border-bottom:1px solid var(--aquil-border) !important;
box-shadow:0 2px 14px rgba(7,91,150,.08) !important;
}
.public-header .logo-main,
.public-header .logo-sub{
color:var(--aquil-sky-deep) !important;
}
.public-header .public-nav a{
color:var(--aquil-text) !important;
}
.public-header .public-nav a:hover,
.public-header .public-nav a.active{
color:var(--aquil-sky-dark) !important;
}
.public-header .header-contact,
.public-header .header-contact a,
.public-header .header-contact span{
color:var(--aquil-muted) !important;
}
.public-header .header-contact b{
color:var(--aquil-sky-deep) !important;
}
/* Hero */
.hero{
background:
linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.86) 42%,rgba(234,246,255,.30) 100%) !important;
color:var(--aquil-text) !important;
}
.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero .hero-copy,
.hero .hero-model,
.hero .hero-sub,
.hero .eyebrow{
color:var(--aquil-text) !important;
}
.hero h1 strong{
color:var(--aquil-sky-dark) !important;
}
.hero .btn,
.offer-actions .blue,
button.blue,
.btn.blue{
background:var(--aquil-sky-dark) !important;
border-color:var(--aquil-sky-dark) !important;
color:#ffffff !important;
}
.hero .btn:hover,
.offer-actions .blue:hover,
button.blue:hover,
.btn.blue:hover{
background:var(--aquil-sky-deep) !important;
border-color:var(--aquil-sky-deep) !important;
}
/* Trust strip */
.trust-strip{
background:var(--aquil-sky-pale) !important;
border-top:1px solid var(--aquil-border) !important;
border-bottom:1px solid var(--aquil-border) !important;
}
.trust-strip strong{
color:var(--aquil-sky-deep) !important;
}
/* Main sections */
section{
background:#ffffff;
}
.bike-card,
.offer-card,
.offer-main,
.modal-card{
background:#ffffff !important;
border-color:var(--aquil-border) !important;
box-shadow:0 8px 26px rgba(7,91,150,.08) !important;
}
.bike-card:hover,
.offer-card:hover{
box-shadow:0 14px 34px rgba(7,91,150,.14) !important;
}
.bike-card h3,
.offer-info h3{
color:var(--aquil-text) !important;
}
.bike-card .price{
color:var(--aquil-sky-dark) !important;
}
/* Offers */
.offer-banner{
background:linear-gradient(135deg,var(--aquil-sky-deep),var(--aquil-sky)) !important;
color:#ffffff !important;
}
.offer-banner h1,
.offer-banner h2,
.offer-banner h3,
.offer-banner p{
color:#ffffff !important;
}
.offer-banner .btn.red{
background:#ffffff !important;
color:var(--aquil-sky-deep) !important;
border-color:#ffffff !important;
}
/* Finance */
.finance{
background:var(--aquil-sky-pale) !important;
color:var(--aquil-text) !important;
}
.finance h1,
.finance h2,
.finance h3{
color:var(--aquil-sky-deep) !important;
}
.finance strong{
color:var(--aquil-sky-dark) !important;
}
/* Contact */
.contact-section{
background:#ffffff !important;
color:var(--aquil-text) !important;
}
.contact-section .eyebrow{
color:var(--aquil-sky-dark) !important;
}
.contact-section h1,
.contact-section h2,
.contact-section h3{
color:var(--aquil-text) !important;
}
/* Footer */
.public-footer,
footer{
background:var(--aquil-sky-deep) !important;
color:#ffffff !important;
}
.public-footer a,
footer a{
color:#ffffff !important;
}
.footer-bottom{
background:var(--aquil-sky-deep) !important;
color:rgba(255,255,255,.82) !important;
border-top:1px solid rgba(255,255,255,.18) !important;
}
/* Mobile navigation */
@media (max-width:768px){
.public-header .public-nav{
background:#ffffff !important;
border-top:1px solid var(--aquil-border) !important;
}
.public-header .public-nav a{
color:var(--aquil-text) !important;
}
.public-header .public-nav a:hover,
.public-header .public-nav a.active{
color:var(--aquil-sky-dark) !important;
background:var(--aquil-sky-pale) !important;
}
}
/* =========================================================
AQUIL MOTORS W-01.6
PREMIUM HEADER / HERO / TRUST REFINEMENT
========================================================= */
.top-info-bar{
width:100%;
background:var(--aquil-sky-deep);
color:#fff;
font-size:11px;
font-weight:800;
letter-spacing:.09em;
text-transform:uppercase;
}
.top-info-inner{
max-width:1400px;
min-height:34px;
margin:0 auto;
padding:0 28px;
display:flex;
align-items:center;
justify-content:flex-end;
gap:12px;
}
.public-header{
min-height:82px !important;
background:#fff !important;
border-bottom:1px solid #dcebf6 !important;
box-shadow:0 4px 18px rgba(7,91,150,.08) !important;
position:relative;
z-index:50;
}
.public-header .logo-main{
color:var(--aquil-sky-deep) !important;
}
.public-header .logo-sub{
color:var(--aquil-sky) !important;
}
.public-header .public-nav a{
font-weight:800;
letter-spacing:.035em;
}
.public-header .public-nav a.active,
.public-header .public-nav a:hover{
color:var(--aquil-sky-dark) !important;
}
.public-header .header-contact a{
color:var(--aquil-sky-deep) !important;
}
/* HERO */
.hero{
min-height:570px !important;
background:
linear-gradient(
90deg,
#ffffff 0%,
#ffffff 42%,
#f4fbff 63%,
#dff3ff 100%
) !important;
color:var(--aquil-text) !important;
overflow:hidden;
position:relative;
}
.hero::before{
content:"";
position:absolute;
width:620px;
height:620px;
right:-120px;
top:-70px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(14,165,233,.18) 0%,
rgba(14,165,233,.08) 42%,
rgba(14,165,233,0) 72%
);
pointer-events:none;
}
.hero-copy{
z-index:4;
}
.hero .eyebrow{
color:var(--aquil-sky-dark) !important;
font-weight:900;
letter-spacing:.10em;
}
.hero h1{
color:var(--aquil-text) !important;
text-shadow:none !important;
}
.hero h1 strong{
color:var(--aquil-sky-deep) !important;
}
.hero-model{
color:var(--aquil-text) !important;
}
.hero-model b{
color:var(--aquil-sky-dark) !important;
}
.hero-sub{
color:var(--aquil-muted) !important;
}
.hero-bike{
z-index:3;
}
.hero-bike img{
filter:none !important;
mix-blend-mode:multiply;
border-radius:0 !important;
box-shadow:none !important;
}
.bike-glow{
background:radial-gradient(
circle,
rgba(14,165,233,.18) 0%,
rgba(14,165,233,.08) 35%,
rgba(255,255,255,0) 72%
) !important;
}
.hero-city{
background:none !important;
opacity:0 !important;
}
/* HERO BUTTONS */
.hero .btn.red{
background:var(--aquil-sky-dark) !important;
border-color:var(--aquil-sky-dark) !important;
color:#fff !important;
box-shadow:0 8px 20px rgba(8,117,191,.20);
}
.hero .btn.red:hover{
background:var(--aquil-sky-deep) !important;
border-color:var(--aquil-sky-deep) !important;
}
.hero .btn.outline{
color:var(--aquil-sky-deep) !important;
border-color:var(--aquil-sky-dark) !important;
background:#fff !important;
}
.hero .btn.outline:hover{
background:var(--aquil-sky-dark) !important;
color:#fff !important;
}
/* TRUST */
.trust-strip{
position:relative;
z-index:10;
width:calc(100% - 56px);
max-width:1320px;
margin:-38px auto 0 !important;
background:#fff !important;
border:1px solid #d9eaf6 !important;
border-radius:14px;
box-shadow:0 12px 35px rgba(7,91,150,.12) !important;
color:var(--aquil-text) !important;
}
.trust-strip strong,
.trust-strip b{
color:var(--aquil-sky-dark) !important;
}
/* MOBILE */
@media(max-width:800px){
.top-info-inner{
min-height:32px;
padding:0 12px;
justify-content:center;
gap:7px;
font-size:8px;
letter-spacing:.05em;
white-space:nowrap;
}
.public-header{
min-height:68px !important;
}
.hero{
min-height:620px !important;
}
.trust-strip{
width:calc(100% - 24px);
margin:-24px auto 0 !important;
border-radius:12px;
}
}
/* =========================================================
AQUIL MOTORS W-01.7
PREMIUM BAJAJ BIKE VISUAL REFINEMENT
CSS ONLY — JS/API/GALLERY LOGIC UNCHANGED
========================================================= */
/* POPULAR BIKES SECTION */
#bikes{
padding-top:42px !important;
padding-bottom:52px !important;
}
#bikes .section-title{
font-size:clamp(24px,3vw,36px);
font-weight:900;
letter-spacing:.035em;
margin-bottom:30px;
}
/* PREMIUM BIKE CARD */
.bike-card{
background:#fff !important;
border:1px solid #d7eaf7 !important;
border-radius:18px !important;
overflow:visible !important;
box-shadow:0 10px 30px rgba(2,132,199,.10) !important;
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease !important;
}
.bike-card:hover{
transform:translateY(-5px);
border-color:#7dd3fc !important;
box-shadow:0 18px 42px rgba(2,132,199,.18) !important;
}
/* BIKE IMAGE AREA */
.bike-image.premium-card-gallery{
background:
radial-gradient(
circle at 50% 42%,
rgba(125,211,252,.28) 0%,
rgba(224,242,254,.52) 35%,
rgba(255,255,255,1) 72%
) !important;
border-radius:16px 16px 12px 12px !important;
margin:8px !important;
height:330px !important;
padding:14px !important;
overflow:hidden !important;
position:relative;
}
/* MAIN BIKE PHOTO */
.bike-image.premium-card-gallery > img:first-child{
width:100% !important;
height:218px !important;
object-fit:contain !important;
display:block !important;
transition:transform .35s ease !important;
}
.bike-card:hover .bike-image.premium-card-gallery > img:first-child{
transform:scale(1.035);
}
/* BAJAJ LABEL */
.bike-image.premium-card-gallery > span{
position:absolute;
top:16px;
left:16px;
z-index:3;
padding:6px 11px;
border-radius:999px;
background:var(--aquil-sky-deep) !important;
color:#fff !important;
font-size:10px;
font-weight:900;
letter-spacing:.10em;
box-shadow:0 5px 14px rgba(2,132,199,.20);
}
/* CARD THUMBNAILS */
.bike-image.premium-card-gallery .card-thumbnails{
height:66px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
margin-top:12px !important;
padding:3px !important;
overflow-x:auto !important;
scrollbar-width:thin;
}
.bike-image.premium-card-gallery .card-thumbnails img{
width:64px !important;
height:52px !important;
flex:0 0 auto !important;
object-fit:contain !important;
background:#fff !important;
border:1px solid #d7eaf7 !important;
border-radius:9px !important;
padding:3px !important;
cursor:pointer;
transition:
border-color .2s ease,
transform .2s ease,
box-shadow .2s ease !important;
}
.bike-image.premium-card-gallery .card-thumbnails img:hover{
transform:translateY(-2px);
border-color:#38bdf8 !important;
box-shadow:0 5px 12px rgba(2,132,199,.12);
}
.bike-image.premium-card-gallery .card-thumbnails img.active{
border-color:var(--aquil-sky-dark) !important;
box-shadow:0 0 0 2px rgba(14,165,233,.14);
}
/* BIKE INFORMATION */
.bike-card .bike-info{
padding:4px 20px 20px !important;
}
.bike-card h3{
font-size:21px !important;
font-weight:900 !important;
color:#0f172a !important;
margin-bottom:10px !important;
}
.bike-card .bike-info small{
color:#64748b !important;
}
.bike-card .bike-info strong{
color:var(--aquil-sky-deep) !important;
}
/* CARD ACTIONS */
.bike-card .card-actions{
gap:10px !important;
margin-top:16px !important;
}
.bike-card .card-actions .btn{
border-radius:9px !important;
font-weight:800 !important;
}
/* MOBILE */
@media(max-width:768px){
#bikes{
padding-top:30px !important;
padding-bottom:38px !important;
}
#bikes .section-title{
margin-bottom:22px;
font-size:24px;
}
.bike-image.premium-card-gallery{
height:300px !important;
margin:6px !important;
padding:10px !important;
}
.bike-image.premium-card-gallery > img:first-child{
height:195px !important;
}
.bike-image.premium-card-gallery .card-thumbnails{
height:62px !important;
justify-content:flex-start !important;
}
.bike-image.premium-card-gallery .card-thumbnails img{
width:60px !important;
height:50px !important;
}
.bike-card .bike-info{
padding:3px 16px 17px !important;
}
.bike-card h3{
font-size:19px !important;
}
}
/* =========================================================
AQUIL MOTORS W-01.8
PREMIUM HERO VISUAL REFINEMENT
CSS ONLY — EXISTING JS/API LOGIC PRESERVED
========================================================= */
/* HERO — PREMIUM SKY BLUE / WHITE SHOWROOM LOOK */
.hero{
position:relative;
overflow:hidden;
background:
radial-gradient(
circle at 78% 42%,
rgba(125,211,252,.30) 0%,
rgba(224,242,254,.58) 25%,
rgba(255,255,255,.94) 52%,
#ffffff 76%
) !important;
}
/* SOFT PREMIUM LIGHT */
.hero::before{
content:"";
position:absolute;
width:620px;
height:620px;
right:-120px;
top:-120px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(14,165,233,.13) 0%,
rgba(14,165,233,.06) 38%,
rgba(255,255,255,0) 72%
);
pointer-events:none;
z-index:0;
}
/* SUBTLE LOWER FADE */
.hero::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:0;
height:110px;
background:
linear-gradient(
to bottom,
rgba(255,255,255,0),
rgba(255,255,255,.92)
);
pointer-events:none;
z-index:1;
}
/* HERO CONTENT LAYERS */
.hero-copy{
position:relative;
z-index:5;
}
.hero-bike{
position:relative;
z-index:4;
}
/* PREMIUM EYEBROW */
.hero .eyebrow{
color:var(--aquil-sky-deep) !important;
font-weight:900 !important;
letter-spacing:.13em !important;
}
/* HERO TITLE */
.hero h1{
color:#0f172a !important;
font-weight:950 !important;
letter-spacing:-.035em !important;
text-shadow:0 3px 18px rgba(15,23,42,.06);
}
.hero h1 strong{
color:var(--aquil-sky-deep) !important;
}
/* MODEL NAME */
.hero-model{
color:#0f172a !important;
font-weight:900 !important;
letter-spacing:.02em;
}
.hero-model b{
color:var(--aquil-sky-dark) !important;
}
/* HERO SUBTITLE */
.hero-sub{
color:#475569 !important;
font-weight:600 !important;
}
/* PREMIUM BIKE PRESENTATION */
.hero-bike{
display:flex;
align-items:center;
justify-content:center;
min-height:430px;
}
/* BIKE IMAGE */
.hero-bike img{
position:relative;
z-index:3;
width:min(100%,720px) !important;
max-height:470px !important;
object-fit:contain !important;
object-position:center !important;
filter:drop-shadow(0 22px 28px rgba(15,23,42,.18)) !important;
mix-blend-mode:multiply;
transform:translateY(-4px);
transition:
transform .45s ease,
filter .45s ease !important;
}
.hero-bike:hover img{
transform:translateY(-8px) scale(1.018);
filter:drop-shadow(0 28px 34px rgba(15,23,42,.21)) !important;
}
/* BIKE GLOW */
.hero .bike-glow{
position:absolute;
width:520px;
height:360px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(
ellipse,
rgba(56,189,248,.24) 0%,
rgba(125,211,252,.16) 32%,
rgba(224,242,254,.08) 54%,
rgba(255,255,255,0) 76%
) !important;
filter:blur(2px);
z-index:1;
}
/* REMOVE OLD CITY DECORATION WITHOUT TOUCHING HTML/JS */
.hero-city{
display:none !important;
}
/* HERO ACTIONS */
.hero-actions{
position:relative;
z-index:6;
}
.hero .btn{
min-height:46px;
padding:0 20px;
border-radius:9px !important;
font-weight:850 !important;
letter-spacing:.025em;
transition:
transform .2s ease,
box-shadow .2s ease,
background .2s ease !important;
}
.hero .btn:hover{
transform:translateY(-2px);
}
.hero .btn.red{
background:var(--aquil-sky-dark) !important;
border-color:var(--aquil-sky-dark) !important;
box-shadow:0 10px 24px rgba(14,165,233,.22) !important;
}
.hero .btn.red:hover{
background:var(--aquil-sky-deep) !important;
border-color:var(--aquil-sky-deep) !important;
box-shadow:0 14px 28px rgba(7,91,150,.24) !important;
}
.hero .btn.outline{
background:rgba(255,255,255,.92) !important;
border-color:#38bdf8 !important;
color:var(--aquil-sky-deep) !important;
box-shadow:0 7px 18px rgba(14,165,233,.08);
}
.hero .btn.outline:hover{
background:var(--aquil-sky-dark) !important;
border-color:var(--aquil-sky-dark) !important;
color:#fff !important;
}
/* MOBILE HERO */
@media(max-width:768px){
.hero{
background:
radial-gradient(
circle at 75% 35%,
rgba(125,211,252,.25) 0%,
rgba(224,242,254,.48) 30%,
#fff 72%
) !important;
}
.hero::before{
width:390px;
height:390px;
right:-150px;
top:-80px;
}
.hero-bike{
min-height:300px;
}
.hero-bike img{
width:min(100%,520px) !important;
max-height:330px !important;
transform:none;
}
.hero-bike:hover img{
transform:none;
}
.hero .bike-glow{
width:340px;
height:250px;
}
.hero-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.hero .btn{
min-height:44px;
padding:0 16px;
}
}
/* =========================================================
AQUIL MOTORS W-01.9
HERO IMAGE INTEGRITY
EXACT ADMIN-UPLOADED IMAGE — NO BLEND / NO CROP
JS/API LOGIC UNCHANGED
========================================================= */
.hero-bike{
position:relative !important;
z-index:3 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
}
.hero-bike img#heroImage{
display:block !important;
width:100% !important;
max-width:760px !important;
height:auto !important;
max-height:500px !important;
/* Preserve the exact uploaded image */
object-fit:contain !important;
object-position:center center !important;
/* Do not visually alter the source image */
filter:none !important;
mix-blend-mode:normal !important;
background:transparent !important;
border:none !important;
box-shadow:none !important;
transform:none !important;
}
/* Keep the exact image stable on hover */
.hero-bike:hover img#heroImage{
transform:none !important;
}
/* Glow remains behind the real image */
.hero-bike .bike-glow{
z-index:0 !important;
pointer-events:none !important;
}
.hero-bike img#heroImage{
position:relative !important;
z-index:2 !important;
}
/* Mobile */
@media(max-width:768px){
.hero-bike{
min-height:280px !important;
}
.hero-bike img#heroImage{
width:100% !important;
max-width:560px !important;
max-height:360px !important;
object-fit:contain !important;
}
}
/* =========================================================
AQUIL MOTORS W-02
PREMIUM POPULAR BIKES
PRESENTATION ONLY
EXISTING API / JS / IMAGE SOURCES UNCHANGED
========================================================= */
#bikes{
position:relative !important;
overflow:hidden !important;
padding-top:72px !important;
padding-bottom:78px !important;
background:
radial-gradient(
circle at 12% 20%,
rgba(125,211,252,.16) 0%,
rgba(255,255,255,0) 34%
),
radial-gradient(
circle at 88% 72%,
rgba(186,230,253,.18) 0%,
rgba(255,255,255,0) 38%
),
#fff !important;
}
#bikes::before{
content:"";
position:absolute;
left:-180px;
top:80px;
width:420px;
height:420px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(14,165,233,.08) 0%,
rgba(14,165,233,.035) 42%,
rgba(255,255,255,0) 72%
);
pointer-events:none;
}
#bikes .section-title{
position:relative !important;
z-index:2 !important;
margin-bottom:38px !important;
color:var(--aquil-text) !important;
letter-spacing:.055em !important;
}
#bikes .section-title span{
color:var(--aquil-sky-dark) !important;
}
#bikes .bike-grid{
position:relative !important;
z-index:2 !important;
width:100% !important;
max-width:1320px !important;
margin:0 auto !important;
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:30px !important;
}
#bikes .bike-card{
position:relative !important;
overflow:hidden !important;
background:#fff !important;
border:1px solid #dceefa !important;
border-radius:20px !important;
box-shadow:
0 14px 40px rgba(7,91,150,.10),
0 2px 8px rgba(7,91,150,.05) !important;
transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease !important;
}
#bikes .bike-card:hover{
transform:translateY(-6px) !important;
border-color:#a9d9f4 !important;
box-shadow:
0 22px 52px rgba(7,91,150,.16),
0 4px 12px rgba(7,91,150,.06) !important;
}
#bikes .bike-card::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:4px;
background:linear-gradient(
90deg,
var(--aquil-sky-deep),
var(--aquil-sky),
#fff
);
z-index:5;
}
#bikes .premium-card-gallery{
background:
radial-gradient(
circle at 50% 48%,
rgba(224,242,254,.90) 0%,
rgba(248,252,255,.96) 48%,
#fff 78%
) !important;
border-bottom:1px solid #e1eef7 !important;
}
#bikes .premium-card-gallery img{
background:transparent !important;
}
#bikes .vehicle-main-image,
#bikes .bike-card img{
filter:none !important;
mix-blend-mode:normal !important;
}
#bikes .card-thumbnails{
background:rgba(255,255,255,.94) !important;
border-top:1px solid #e5f1f8 !important;
}
#bikes .vehicle-thumb,
#bikes .card-thumb{
border-color:#cfe7f5 !important;
background:#fff !important;
}
#bikes .vehicle-thumb:hover,
#bikes .card-thumb:hover{
border-color:var(--aquil-sky-dark) !important;
}
#bikes .vehicle-thumb.active,
#bikes .card-thumb.active{
border-color:var(--aquil-sky-dark) !important;
box-shadow:0 0 0 2px rgba(14,165,233,.12) !important;
}
#bikes .bike-card h3,
#bikes .bike-card .vehicle-name{
color:var(--aquil-text) !important;
}
#bikes .bike-card .price,
#bikes .bike-card .vehicle-price{
color:var(--aquil-sky-deep) !important;
}
#bikes .bike-card .btn{
border-radius:10px !important;
}
#bikes .bike-card .btn.red{
background:var(--aquil-sky-dark) !important;
border-color:var(--aquil-sky-dark) !important;
color:#fff !important;
box-shadow:0 7px 18px rgba(8,117,191,.16) !important;
}
#bikes .bike-card .btn.red:hover{
background:var(--aquil-sky-deep) !important;
border-color:var(--aquil-sky-deep) !important;
}
#bikes .bike-card .btn.outline{
color:var(--aquil-sky-deep) !important;
border-color:#9ed4f0 !important;
background:#fff !important;
}
#bikes .bike-card .btn.outline:hover{
color:#fff !important;
background:var(--aquil-sky-dark) !important;
border-color:var(--aquil-sky-dark) !important;
}
/* W-02 MOBILE */
@media (max-width:900px){
#bikes{
padding-top:58px !important;
padding-bottom:60px !important;
}
#bikes .bike-grid{
grid-template-columns:1fr !important;
gap:24px !important;
}
}
@media (max-width:560px){
#bikes{
padding-top:46px !important;
padding-bottom:48px !important;
}
#bikes .section-title{
margin-bottom:26px !important;
}
#bikes .bike-card{
border-radius:16px !important;
}
}
/* =========================================================
AQUIL MOTORS W-03
PREMIUM OFFERS SECTION
PRESENTATION ONLY
EXISTING API / JS / IMAGE SOURCES UNCHANGED
========================================================= */
#offers{
position:relative !important;
overflow:hidden !important;
padding:72px 28px 82px !important;
background:
radial-gradient(
circle at 8% 25%,
rgba(125,211,252,.18) 0%,
rgba(255,255,255,0) 34%
),
radial-gradient(
circle at 92% 72%,
rgba(186,230,253,.20) 0%,
rgba(255,255,255,0) 38%
),
linear-gradient(180deg,#ffffff 0%,#f7fcff 100%) !important;
}
#offers::before{
content:"";
position:absolute;
width:520px;
height:520px;
right:-230px;
top:-210px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(14,165,233,.10) 0%,
rgba(14,165,233,.035) 42%,
rgba(255,255,255,0) 72%
);
pointer-events:none;
}
#offers::after{
content:"";
position:absolute;
left:-180px;
bottom:-260px;
width:500px;
height:500px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(125,211,252,.12) 0%,
rgba(255,255,255,0) 70%
);
pointer-events:none;
}
/* MAIN OFFER SLIDER */
#offers .offer-slider{
position:relative !important;
z-index:2 !important;
max-width:1320px !important;
margin:0 auto !important;
border:1px solid rgba(125,211,252,.42) !important;
border-radius:24px !important;
background:rgba(255,255,255,.96) !important;
box-shadow:
0 24px 65px rgba(7,91,150,.13),
0 4px 16px rgba(7,91,150,.07) !important;
overflow:hidden !important;
}
/* OFFER IMAGE */
#offers .offer-main{
position:relative !important;
background:#fff !important;
overflow:hidden !important;
}
#offers .offer-main img{
display:block !important;
width:100% !important;
height:auto !important;
object-fit:contain !important;
object-position:center !important;
filter:none !important;
mix-blend-mode:normal !important;
transform:none !important;
}
/* OFFER INFORMATION */
#offers .offer-info{
background:
linear-gradient(
135deg,
#ffffff 0%,
#f8fcff 58%,
#eef9ff 100%
) !important;
border-top:1px solid #d9edf9 !important;
}
#offers .offer-info h2,
#offers .offer-info h3,
#offers .offer-info strong{
color:var(--aquil-text) !important;
}
#offers .offer-info p{
color:var(--aquil-muted) !important;
}
/* THUMBNAILS */
#offers .offer-thumbnails{
position:relative !important;
z-index:3 !important;
padding:14px 18px !important;
background:#fff !important;
border-top:1px solid #e1f0f8 !important;
}
#offers .offer-thumbnails img{
border:2px solid transparent !important;
border-radius:12px !important;
background:#fff !important;
object-fit:cover !important;
transition:
border-color .2s ease,
transform .2s ease,
box-shadow .2s ease !important;
}
#offers .offer-thumbnails img:hover{
transform:translateY(-2px) !important;
border-color:var(--aquil-sky-dark) !important;
box-shadow:0 7px 18px rgba(8,117,191,.16) !important;
}
/* ACTION BUTTONS */
#offers .offer-actions .btn,
#offers .offer-actions button{
border-radius:10px !important;
font-weight:700 !important;
}
#offers .offer-actions .btn.red,
#offers .offer-actions button.red{
background:var(--aquil-sky-dark) !important;
border-color:var(--aquil-sky-dark) !important;
color:#fff !important;
box-shadow:0 8px 20px rgba(8,117,191,.18) !important;
}
#offers .offer-actions .btn.red:hover,
#offers .offer-actions button.red:hover{
background:var(--aquil-sky-deep) !important;
border-color:var(--aquil-sky-deep) !important;
}
/* MOBILE */
@media(max-width:760px){
#offers{
padding:52px 14px 60px !important;
}
#offers .offer-slider{
border-radius:18px !important;
}
}
/* =========================================================
AQUIL MOTORS W-04
PREMIUM FINANCE SECTION
PRESENTATION ONLY
EXISTING API / JS / DATA UNCHANGED
========================================================= */
#finance{
position:relative !important;
overflow:hidden !important;
padding:82px 28px 88px !important;
background:
radial-gradient(
circle at 8% 35%,
rgba(125,211,252,.18) 0%,
rgba(255,255,255,0) 34%
),
radial-gradient(
circle at 92% 65%,
rgba(186,230,253,.20) 0%,
rgba(255,255,255,0) 38%
),
linear-gradient(180deg,#f7fcff 0%,#ffffff 100%) !important;
}
#finance::before{
content:"";
position:absolute;
width:500px;
height:500px;
left:-250px;
top:-190px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(14,165,233,.09) 0%,
rgba(14,165,233,.035) 42%,
rgba(255,255,255,0) 72%
);
pointer-events:none;
}
#finance::after{
content:"";
position:absolute;
width:420px;
height:420px;
right:-210px;
bottom:-210px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(56,189,248,.08) 0%,
rgba(255,255,255,0) 70%
);
pointer-events:none;
}
#finance > *{
position:relative !important;
z-index:2 !important;
}
#finance .section-title{
margin-bottom:34px !important;
color:var(--aquil-text) !important;
letter-spacing:.055em !important;
}
#finance .section-title span{
color:#0284c7 !important;
}
#finance .finance-card,
#finance .finance-box,
#finance .finance-content{
border-radius:24px !important;
}
#finance button,
#finance a{
transition:
transform .22s ease,
box-shadow .22s ease,
background .22s ease !important;
}
#finance button:hover,
#finance a:hover{
transform:translateY(-2px);
}
@media (max-width:768px){
#finance{
padding:58px 18px 64px !important;
}
#finance::before{
width:340px;
height:340px;
left:-180px;
top:-120px;
}
#finance::after{
width:300px;
height:300px;
right:-160px;
bottom:-150px;
}
}
/* =========================================================
END W-04
========================================================= */
/* =========================================================
AQUIL MOTORS W-05
PREMIUM CONTACT SECTION
PRESENTATION ONLY
EXISTING HTML / JS / API / ENQUIRY LOGIC UNCHANGED
========================================================= */
#contact{
position:relative !important;
overflow:hidden !important;
padding:82px 28px 88px !important;
background:
radial-gradient(
circle at 10% 30%,
rgba(125,211,252,.18) 0%,
rgba(255,255,255,0) 34%
),
radial-gradient(
circle at 90% 70%,
rgba(186,230,253,.20) 0%,
rgba(255,255,255,0) 38%
),
linear-gradient(180deg,#ffffff 0%,#f6fbff 100%) !important;
}
#contact::before{
content:"";
position:absolute;
width:520px;
height:520px;
right:-270px;
top:-230px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(14,165,233,.09) 0%,
rgba(14,165,233,.035) 42%,
rgba(255,255,255,0) 72%
);
pointer-events:none;
}
#contact::after{
content:"";
position:absolute;
width:440px;
height:440px;
left:-240px;
bottom:-250px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(56,189,248,.08) 0%,
rgba(56,189,248,.025) 45%,
rgba(255,255,255,0) 72%
);
pointer-events:none;
}
#contact > *{
position:relative !important;
z-index:2 !important;
}
#contact .section-title{
margin-bottom:18px !important;
color:var(--aquil-text) !important;
letter-spacing:.055em !important;
}
#contact > p{
max-width:720px !important;
margin:0 auto 34px !important;
color:#526273 !important;
line-height:1.75 !important;
}
#contact .contact-buttons{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
align-items:center !important;
gap:14px !important;
margin-top:28px !important;
}
#contact .contact-buttons .btn{
min-width:190px !important;
min-height:50px !important;
border-radius:12px !important;
transition:
transform .22s ease,
box-shadow .22s ease,
background-color .22s ease !important;
}
#contact .contact-buttons .btn:hover{
transform:translateY(-2px) !important;
}
#contact .contact-buttons .btn.primary,
#contact .contact-buttons .btn.red{
box-shadow:0 12px 28px rgba(14,165,233,.16) !important;
}
@media (max-width:700px){
#contact{
padding:64px 18px 70px !important;
}
#contact .contact-buttons{
flex-direction:column !important;
width:100% !important;
}
#contact .contact-buttons .btn{
width:100% !important;
max-width:360px !important;
}
}
/* =========================================================
AQUIL MOTORS W-06
PREMIUM FOOTER
PRESENTATION ONLY
EXISTING HTML / JS / API UNCHANGED
========================================================= */
footer{
position:relative !important;
overflow:hidden !important;
background:
radial-gradient(
circle at 12% 15%,
rgba(14,165,233,.14) 0%,
rgba(14,165,233,0) 34%
),
radial-gradient(
circle at 88% 85%,
rgba(56,189,248,.10) 0%,
rgba(56,189,248,0) 38%
),
linear-gradient(180deg,#07111d 0%,#05090f 100%) !important;
border-top:1px solid rgba(125,211,252,.16) !important;
padding-top:58px !important;
}
footer::before{
content:"";
position:absolute;
width:520px;
height:520px;
right:-260px;
top:-300px;
border-radius:50%;
border:1px solid rgba(125,211,252,.10);
box-shadow:
0 0 0 45px rgba(125,211,252,.025),
0 0 0 90px rgba(125,211,252,.018);
pointer-events:none;
}
footer::after{
content:"";
position:absolute;
width:360px;
height:360px;
left:-220px;
bottom:-250px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(14,165,233,.09) 0%,
rgba(14,165,233,0) 70%
);
pointer-events:none;
}
footer .footer-grid,
footer .footer-bottom{
position:relative !important;
z-index:2 !important;
}
footer .footer-grid{
gap:52px !important;
}
footer .footer-grid > div{
position:relative;
}
footer .footer-grid > div:first-child{
padding-right:18px;
}
footer .footer-grid h4{
margin-bottom:16px !important;
color:#ffffff !important;
font-size:11px !important;
letter-spacing:1.8px !important;
position:relative;
}
footer .footer-grid h4::after{
content:"";
display:block;
width:28px;
height:2px;
margin-top:8px;
background:#38bdf8;
border-radius:2px;
}
footer .footer-grid p{
color:#9ca9b7 !important;
line-height:1.8 !important;
}
footer .footer-grid a{
color:#aeb9c5 !important;
transition:
color .2s ease,
transform .2s ease,
border-color .2s ease !important;
}
footer .footer-grid a:hover{
color:#ffffff !important;
transform:translateX(3px);
}
footer .socials{
gap:7px !important;
}
footer .socials a{
border:1px solid rgba(255,255,255,.12) !important;
background:rgba(255,255,255,.025);
border-radius:7px !important;
padding:8px 10px !important;
}
footer .socials a:hover{
border-color:rgba(56,189,248,.55) !important;
background:rgba(14,165,233,.08);
}
footer .footer-logo{
transform:translateZ(0);
}
footer .footer-logo .logo-main{
color:#ffffff !important;
}
footer .footer-logo .logo-sub{
color:#38bdf8 !important;
}
footer .staff-title{
margin-top:28px !important;
}
footer .staff-login{
border:1px solid rgba(56,189,248,.45) !important;
color:#ffffff !important;
background:rgba(14,165,233,.07) !important;
border-radius:7px !important;
transition:all .2s ease !important;
}
footer .staff-login:hover{
background:rgba(14,165,233,.16) !important;
border-color:#38bdf8 !important;
transform:none !important;
}
footer .footer-bottom{
border-top:1px solid rgba(255,255,255,.10) !important;
color:#7f8b98 !important;
padding-top:20px !important;
}
@media(max-width:650px){
footer{
padding-top:46px !important;
}
footer .footer-grid{
gap:30px !important;
}
footer .footer-grid > div:first-child{
padding-right:0;
}
footer .footer-bottom{
line-height:1.6;
}
}
/* =========================================================
AQUIL MOTORS W-07
PREMIUM RESPONSIVE / MOBILE POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA UNCHANGED
========================================================= */
@media (max-width: 900px){
#offers,
#finance,
#contact{
padding-left:20px !important;
padding-right:20px !important;
}
.hero{
min-height:620px !important;
}
.section{
padding-left:20px !important;
padding-right:20px !important;
}
footer{
padding-left:20px !important;
padding-right:20px !important;
}
}
@media (max-width: 680px){
.hero{
min-height:560px !important;
}
#offers,
#finance,
#contact{
padding-top:58px !important;
padding-bottom:64px !important;
}
#offers::before,
#offers::after,
#finance::before,
#finance::after,
#contact::before,
#contact::after,
footer::before,
footer::after{
opacity:.55 !important;
}
.contact-buttons{
width:100% !important;
display:flex !important;
flex-direction:column !important;
gap:12px !important;
}
.contact-buttons a,
.contact-buttons button{
width:100% !important;
min-height:48px !important;
}
footer{
padding-top:46px !important;
}
}
@media (max-width: 480px){
.hero{
min-height:520px !important;
}
#offers,
#finance,
#contact{
padding-left:16px !important;
padding-right:16px !important;
}
.section{
padding-left:16px !important;
padding-right:16px !important;
}
footer{
padding-left:16px !important;
padding-right:16px !important;
}
}
/* =========================================================
AQUIL MOTORS W-08
PREMIUM INTERACTION POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA UNCHANGED
========================================================= */
/* ---------- GLOBAL PREMIUM MOTION ---------- */
html{
scroll-behavior:smooth;
}
button,
a,
.btn,
.bike-card,
.offer-thumbnails img,
.card-thumb,
.vehicle-thumb,
.modal-close{
-webkit-tap-highlight-color:transparent;
}
a,
button,
.btn{
transition:
transform .22s ease,
box-shadow .22s ease,
background-color .22s ease,
border-color .22s ease,
color .22s ease,
opacity .22s ease;
}
/* ---------- HEADER NAV ---------- */
.public-nav a{
position:relative !important;
}
.public-nav a::after{
content:"" !important;
position:absolute !important;
left:50% !important;
bottom:-7px !important;
width:0 !important;
height:2px !important;
border-radius:999px !important;
background:linear-gradient(90deg,#38bdf8,#0284c7) !important;
transform:translateX(-50%) !important;
transition:width .24s ease !important;
}
.public-nav a:hover::after,
.public-nav a:focus-visible::after{
width:70% !important;
}
/* ---------- HERO BUTTONS ---------- */
.hero .btn{
position:relative !important;
overflow:hidden !important;
isolation:isolate !important;
}
.hero .btn::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:linear-gradient(
110deg,
transparent 20%,
rgba(255,255,255,.24) 50%,
transparent 80%
) !important;
transform:translateX(-120%) !important;
transition:transform .55s ease !important;
pointer-events:none !important;
}
.hero .btn:hover::before{
transform:translateX(120%) !important;
}
.hero .btn:hover{
transform:translateY(-2px) !important;
}
/* ---------- BIKE CARDS ---------- */
#bikes .bike-card{
transition:
transform .28s ease,
box-shadow .28s ease,
border-color .28s ease !important;
will-change:transform !important;
}
#bikes .bike-card:hover{
transform:translateY(-6px) !important;
box-shadow:
0 20px 45px rgba(15,23,42,.13),
0 0 0 1px rgba(14,165,233,.12) !important;
}
#bikes .bike-card img{
transition:
transform .42s cubic-bezier(.2,.7,.2,1),
filter .3s ease !important;
}
#bikes .bike-card:hover img{
transform:scale(1.035) !important;
}
#bikes .card-thumb,
#bikes .vehicle-thumb{
transition:
transform .2s ease,
opacity .2s ease,
border-color .2s ease,
box-shadow .2s ease !important;
}
#bikes .card-thumb:hover,
#bikes .vehicle-thumb:hover{
transform:translateY(-2px) !important;
}
/* ---------- OFFER AREA ---------- */
#offers .offer-main{
transition:
transform .3s ease,
box-shadow .3s ease !important;
}
#offers .offer-main:hover{
transform:translateY(-3px) !important;
box-shadow:0 22px 50px rgba(15,23,42,.12) !important;
}
#offers .offer-main img{
transition:transform .5s cubic-bezier(.2,.7,.2,1) !important;
}
#offers .offer-main:hover img{
transform:scale(1.018) !important;
}
#offers .offer-thumbnails img{
transition:
transform .22s ease,
opacity .22s ease,
box-shadow .22s ease !important;
}
#offers .offer-thumbnails img:hover{
transform:translateY(-3px) !important;
}
/* ---------- FINANCE ---------- */
#finance .finance-card{
transition:
transform .26s ease,
box-shadow .26s ease,
border-color .26s ease !important;
}
#finance .finance-card:hover{
transform:translateY(-5px) !important;
box-shadow:0 18px 42px rgba(15,23,42,.11) !important;
}
/* ---------- CONTACT ---------- */
#contact .contact-buttons .btn{
position:relative !important;
overflow:hidden !important;
}
#contact .contact-buttons .btn:hover{
transform:translateY(-3px) !important;
}
/* ---------- MODALS ---------- */
.modal-backdrop{
transition:
opacity .24s ease,
visibility .24s ease !important;
}
.modal-card{
animation:aquilModalIn .28s cubic-bezier(.2,.8,.2,1) both !important;
}
@keyframes aquilModalIn{
from{
opacity:0;
transform:translateY(14px) scale(.985);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
.modal-close{
transition:
transform .2s ease,
background-color .2s ease,
color .2s ease !important;
}
.modal-close:hover{
transform:rotate(90deg) scale(1.05) !important;
}
/* ---------- FOOTER ---------- */
footer a{
transition:
color .2s ease,
transform .2s ease,
opacity .2s ease !important;
}
footer a:hover{
transform:translateX(3px) !important;
}
/* ---------- ACCESSIBILITY ---------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible{
outline:3px solid rgba(14,165,233,.35) !important;
outline-offset:3px !important;
}
/* ---------- REDUCE MOTION ---------- */
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto;
}
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* =========================================================
AQUIL MOTORS W-09
PREMIUM MODAL / ENQUIRY / VEHICLE DETAIL POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA / SUBMISSION LOGIC UNCHANGED
========================================================= */
/* ---------- MODAL BACKDROP ---------- */
.modal-backdrop{
background:
radial-gradient(
circle at 50% 10%,
rgba(56,189,248,.10),
rgba(0,0,0,.78) 52%
) !important;
backdrop-filter:blur(10px) saturate(115%) !important;
-webkit-backdrop-filter:blur(10px) saturate(115%) !important;
padding:22px !important;
}
/* ---------- MODAL PANEL ---------- */
.modal-backdrop > div,
.modal-backdrop .modal,
.modal-backdrop .modal-card,
.modal-backdrop .modal-content{
border:1px solid rgba(125,211,252,.20) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.42),
0 0 0 1px rgba(255,255,255,.035) inset,
0 0 55px rgba(14,165,233,.08) !important;
}
/* ---------- CLOSE BUTTON ---------- */
.modal-close{
width:42px !important;
height:42px !important;
border-radius:50% !important;
border:1px solid rgba(125,211,252,.18) !important;
background:rgba(255,255,255,.07) !important;
box-shadow:0 8px 24px rgba(0,0,0,.18) !important;
transition:
transform .22s ease,
background-color .22s ease,
border-color .22s ease,
box-shadow .22s ease !important;
}
.modal-close:hover{
transform:rotate(90deg) scale(1.06) !important;
background:rgba(14,165,233,.16) !important;
border-color:rgba(125,211,252,.42) !important;
box-shadow:0 10px 30px rgba(14,165,233,.16) !important;
}
/* ---------- MODAL HEADINGS ---------- */
.modal-backdrop h2,
.modal-backdrop h3{
letter-spacing:-.02em !important;
}
.modal-backdrop .eyebrow{
letter-spacing:.14em !important;
}
/* ---------- FORM FIELDS ---------- */
.modal-backdrop input,
.modal-backdrop select,
.modal-backdrop textarea{
border:1px solid rgba(148,163,184,.30) !important;
background:rgba(248,250,252,.96) !important;
transition:
border-color .22s ease,
box-shadow .22s ease,
background-color .22s ease !important;
}
.modal-backdrop input:hover,
.modal-backdrop select:hover,
.modal-backdrop textarea:hover{
border-color:rgba(14,165,233,.42) !important;
}
.modal-backdrop input:focus,
.modal-backdrop select:focus,
.modal-backdrop textarea:focus{
outline:none !important;
border-color:rgba(14,165,233,.72) !important;
background:#fff !important;
box-shadow:
0 0 0 3px rgba(14,165,233,.11),
0 8px 24px rgba(14,165,233,.06) !important;
}
/* ---------- VEHICLE DETAIL IMAGE ---------- */
.modal-backdrop img{
border-radius:16px;
}
.modal-backdrop .vehicle-thumb,
.modal-backdrop .card-thumb{
border:1px solid rgba(125,211,252,.16) !important;
transition:
transform .20s ease,
border-color .20s ease,
box-shadow .20s ease !important;
}
.modal-backdrop .vehicle-thumb:hover,
.modal-backdrop .card-thumb:hover{
transform:translateY(-2px) !important;
border-color:rgba(14,165,233,.52) !important;
box-shadow:0 8px 22px rgba(14,165,233,.10) !important;
}
/* ---------- MODAL BUTTONS ---------- */
.modal-backdrop .btn{
min-height:46px !important;
border-radius:12px !important;
font-weight:700 !important;
letter-spacing:.01em !important;
}
/* ---------- MOBILE ---------- */
@media (max-width:680px){
.modal-backdrop{
padding:14px !important;
}
.modal-close{
width:38px !important;
height:38px !important;
}
.modal-backdrop .btn{
min-height:44px !important;
}
}
/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion:reduce){
.modal-close,
.modal-backdrop input,
.modal-backdrop select,
.modal-backdrop textarea,
.modal-backdrop .vehicle-thumb,
.modal-backdrop .card-thumb{
transition:none !important;
}
}
/* =========================================================
AQUIL MOTORS W-10
PREMIUM HEADER / NAVIGATION POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA UNCHANGED
========================================================= */
/* ---------- PREMIUM HEADER ---------- */
.public-header{
position:sticky !important;
top:0 !important;
z-index:1200 !important;
background:
linear-gradient(
180deg,
rgba(5,15,28,.97),
rgba(7,20,35,.93)
) !important;
border-bottom:1px solid rgba(125,211,252,.14) !important;
box-shadow:
0 10px 35px rgba(0,0,0,.18),
0 1px 0 rgba(255,255,255,.035) inset !important;
backdrop-filter:blur(16px) saturate(125%) !important;
-webkit-backdrop-filter:blur(16px) saturate(125%) !important;
}
/* ---------- HEADER INNER CONTENT ---------- */
.public-header > *{
position:relative;
z-index:1;
}
/* ---------- NAVIGATION ---------- */
.public-nav{
align-items:center !important;
}
.public-nav a{
border-radius:10px !important;
padding-left:12px !important;
padding-right:12px !important;
}
.public-nav a:hover{
background:rgba(56,189,248,.065) !important;
color:#e0f2fe !important;
transform:translateY(-1px);
}
.public-nav a:active{
transform:translateY(0);
}
/* ---------- MOBILE MENU ---------- */
@media (max-width:900px){
.public-header{
background:
linear-gradient(
180deg,
rgba(5,15,28,.985),
rgba(7,20,35,.965)
) !important;
}
.public-nav{
box-shadow:
0 22px 55px rgba(0,0,0,.35),
0 0 0 1px rgba(125,211,252,.08) inset !important;
}
.public-nav a{
min-height:44px !important;
display:flex !important;
align-items:center !important;
}
}
/* ---------- SMALL MOBILE ---------- */
@media (max-width:680px){
.public-header{
border-bottom-color:rgba(125,211,252,.12) !important;
}
.public-nav a{
padding-left:14px !important;
padding-right:14px !important;
}
}
/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion:reduce){
.public-nav a{
transition:none !important;
transform:none !important;
}
}
/* =========================================================
AQUIL MOTORS W-11
PREMIUM MOBILE NAVIGATION POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA UNCHANGED
========================================================= */
@media (max-width:650px){
/* ---------- MOBILE HEADER ---------- */
.public-header{
height:64px !important;
min-height:64px !important;
padding:0 16px !important;
gap:10px !important;
border-bottom:1px solid rgba(125,211,252,.14) !important;
box-shadow:
0 10px 30px rgba(0,0,0,.22),
0 1px 0 rgba(255,255,255,.025) inset !important;
}
.public-header .logo{
min-width:auto !important;
transform-origin:left center;
}
.public-header .logo-main{
font-size:25px !important;
letter-spacing:-1.7px !important;
}
.public-header .logo-sub{
font-size:10px !important;
margin-left:29px !important;
letter-spacing:.9px !important;
}
/* ---------- PREMIUM MENU BUTTON ---------- */
.mobile-menu{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:42px !important;
height:42px !important;
margin-left:auto !important;
border:1px solid rgba(125,211,252,.18) !important;
border-radius:10px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.10),
rgba(255,255,255,.035)
) !important;
color:#fff !important;
font-size:23px !important;
line-height:1 !important;
box-shadow:
0 8px 24px rgba(0,0,0,.20),
0 0 22px rgba(14,165,233,.05) !important;
transition:
transform .22s ease,
background-color .22s ease,
border-color .22s ease,
box-shadow .22s ease !important;
}
.mobile-menu:hover{
transform:translateY(-1px) !important;
border-color:rgba(125,211,252,.38) !important;
background:rgba(255,255,255,.10) !important;
box-shadow:
0 10px 28px rgba(0,0,0,.25),
0 0 24px rgba(14,165,233,.10) !important;
}
.mobile-menu:active{
transform:scale(.94) !important;
}
.mobile-menu:focus-visible{
outline:2px solid rgba(125,211,252,.72) !important;
outline-offset:3px !important;
}
/* ---------- MOBILE NAV PANEL ---------- */
.public-nav{
left:10px !important;
right:10px !important;
top:72px !important;
padding:10px !important;
gap:4px !important;
border:1px solid rgba(125,211,252,.16) !important;
border-radius:14px !important;
background:
linear-gradient(
145deg,
rgba(13,18,26,.98),
rgba(7,10,15,.98)
) !important;
box-shadow:
0 24px 60px rgba(0,0,0,.42),
0 0 0 1px rgba(255,255,255,.025) inset,
0 0 35px rgba(14,165,233,.06) !important;
backdrop-filter:blur(18px) saturate(125%) !important;
-webkit-backdrop-filter:blur(18px) saturate(125%) !important;
z-index:1100 !important;
}
.public-nav a{
width:100% !important;
min-height:46px !important;
display:flex !important;
align-items:center !important;
padding:0 15px !important;
border-radius:9px !important;
color:#e7e9ec !important;
font-size:12px !important;
font-weight:900 !important;
letter-spacing:.65px !important;
background:transparent !important;
}
.public-nav a::after{
display:none !important;
}
.public-nav a:hover,
.public-nav a:focus-visible{
color:#fff !important;
background:rgba(255,255,255,.065) !important;
transform:translateX(2px) !important;
}
.public-nav a.active{
color:#fff !important;
background:
linear-gradient(
90deg,
rgba(226,27,43,.18),
rgba(226,27,43,.045)
) !important;
box-shadow:
inset 3px 0 0 #e21b2b,
0 5px 18px rgba(0,0,0,.12) !important;
}
.public-nav a:focus-visible{
outline:2px solid rgba(125,211,252,.55) !important;
outline-offset:-2px !important;
}
/* ---------- OPEN MENU DEPTH ---------- */
.public-nav.open{
animation:aquilMobileNavIn .22s ease-out both !important;
}
@keyframes aquilMobileNavIn{
from{
opacity:0;
transform:translateY(-8px) scale(.985);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
.public-nav.open{
animation:none !important;
}
.mobile-menu,
.public-nav a{
transition:none !important;
}
}
/* =========================================================
AQUIL MOTORS W-12
PREMIUM MOBILE HERO + CTA POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA UNCHANGED
========================================================= */
@media (max-width:650px){
/* ---------- HERO ---------- */
.hero{
min-height:calc(100svh - 64px) !important;
height:auto !important;
padding:
82px 18px
54px !important;
display:flex !important;
align-items:flex-end !important;
justify-content:center !important;
overflow:hidden !important;
}
.hero::before{
opacity:.82 !important;
}
.hero::after{
opacity:.92 !important;
}
.hero > *,
.hero-content{
width:100% !important;
max-width:620px !important;
}
/* ---------- HERO TEXT ---------- */
.hero h1{
font-size:clamp(38px,10vw,54px) !important;
line-height:.98 !important;
letter-spacing:-1.8px !important;
margin-bottom:14px !important;
}
.hero h2{
font-size:clamp(19px,5.2vw,28px) !important;
line-height:1.12 !important;
margin-bottom:12px !important;
}
.hero p{
font-size:14px !important;
line-height:1.6 !important;
max-width:470px !important;
}
/* ---------- HERO ACTIONS ---------- */
.hero .actions,
.hero .hero-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
width:100% !important;
margin-top:22px !important;
}
.hero .btn{
width:100% !important;
min-height:50px !important;
justify-content:center !important;
border-radius:12px !important;
font-size:14px !important;
font-weight:800 !important;
letter-spacing:.15px !important;
}
.hero .btn:active{
transform:scale(.985) !important;
}
/* ---------- TRUST STRIP ---------- */
.trust-strip{
padding:
14px 14px !important;
gap:8px !important;
overflow-x:auto !important;
scrollbar-width:none !important;
}
.trust-strip::-webkit-scrollbar{
display:none !important;
}
.trust-strip > *{
flex:0 0 auto !important;
}
/* ---------- MOBILE SECTION CTA ---------- */
#bikes .btn,
#offers .btn,
#finance .btn,
#contact .btn{
min-height:48px !important;
border-radius:11px !important;
}
}
/* ---------- ACCESSIBILITY ---------- */
@media (prefers-reduced-motion:reduce){
.hero .btn,
.hero *,
.trust-strip *,
#bikes .btn,
#offers .btn,
#finance .btn,
#contact .btn{
transition:none !important;
animation:none !important;
}
}
/* =========================================================
AQUIL MOTORS W-13
PREMIUM BIKE CARD / CATALOGUE POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA / ENQUIRY LOGIC UNCHANGED
========================================================= */
/* ---------- BIKE GRID ---------- */
#bikes .grid,
#bikes .vehicle-grid,
#bikes .cards,
#bikes .bike-grid{
align-items:stretch !important;
}
/* ---------- VEHICLE CARD ---------- */
#bikes .vehicle-card,
#bikes .bike-card,
#bikes .card{
position:relative !important;
overflow:hidden !important;
border:1px solid rgba(125,211,252,.14) !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.075),
rgba(255,255,255,.025) 48%,
rgba(14,165,233,.035)
) !important;
box-shadow:
0 18px 50px rgba(0,0,0,.22),
0 0 0 1px rgba(255,255,255,.025) inset !important;
transition:
transform .28s ease,
border-color .28s ease,
box-shadow .28s ease !important;
}
/* ---------- CARD HOVER ---------- */
#bikes .vehicle-card:hover,
#bikes .bike-card:hover,
#bikes .card:hover{
transform:translateY(-5px) !important;
border-color:rgba(125,211,252,.30) !important;
box-shadow:
0 24px 65px rgba(0,0,0,.30),
0 0 35px rgba(14,165,233,.08) !important;
}
/* ---------- IMAGE AREA ---------- */
#bikes .vehicle-card img,
#bikes .bike-card img,
#bikes .card img{
display:block !important;
width:100% !important;
transition:transform .38s ease, filter .38s ease !important;
}
#bikes .vehicle-card:hover img,
#bikes .bike-card:hover img,
#bikes .card:hover img{
transform:scale(1.025) !important;
}
/* ---------- CARD CONTENT ---------- */
#bikes .vehicle-card h3,
#bikes .bike-card h3,
#bikes .card h3{
letter-spacing:-.25px !important;
}
#bikes .vehicle-card p,
#bikes .bike-card p,
#bikes .card p{
line-height:1.55 !important;
}
/* ---------- PRICE ---------- */
#bikes .vehicle-card .price,
#bikes .bike-card .price,
#bikes .card .price{
font-variant-numeric:tabular-nums !important;
}
/* ---------- CARD BUTTONS ---------- */
#bikes .vehicle-card .btn,
#bikes .bike-card .btn,
#bikes .card .btn{
min-height:44px !important;
border-radius:10px !important;
font-weight:800 !important;
transition:
transform .2s ease,
box-shadow .2s ease,
background-color .2s ease !important;
}
#bikes .vehicle-card .btn:hover,
#bikes .bike-card .btn:hover,
#bikes .card .btn:hover{
transform:translateY(-1px) !important;
}
/* ---------- MOBILE ---------- */
@media (max-width:650px){
#bikes{
padding-left:14px !important;
padding-right:14px !important;
}
#bikes .vehicle-card,
#bikes .bike-card,
#bikes .card{
border-radius:16px !important;
}
#bikes .vehicle-card:hover,
#bikes .bike-card:hover,
#bikes .card:hover{
transform:none !important;
}
#bikes .vehicle-card:hover img,
#bikes .bike-card:hover img,
#bikes .card:hover img{
transform:none !important;
}
#bikes .vehicle-card .btn,
#bikes .bike-card .btn,
#bikes .card .btn{
min-height:48px !important;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
#bikes .vehicle-card,
#bikes .bike-card,
#bikes .card,
#bikes .vehicle-card img,
#bikes .bike-card img,
#bikes .card img,
#bikes .vehicle-card .btn,
#bikes .bike-card .btn,
#bikes .card .btn{
transition:none !important;
}
}
/* =========================================================
AQUIL MOTORS W-14
PREMIUM VEHICLE INFO MODAL POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA / ENQUIRY LOGIC UNCHANGED
========================================================= */
/* ---------- VEHICLE MODAL ---------- */
.vehicle-info-card{
width:min(980px,calc(100vw - 32px)) !important;
max-height:calc(100vh - 32px) !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
border:1px solid rgba(125,211,252,.18) !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.09),
rgba(255,255,255,.035) 48%,
rgba(14,165,233,.045)
) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.48),
0 0 0 1px rgba(255,255,255,.025) inset,
0 0 55px rgba(14,165,233,.06) !important;
}
/* ---------- PRICE BOX ---------- */
.vehicle-info-card .vehicle-price-box{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:12px !important;
}
.vehicle-info-card .vehicle-price-box > div{
border:1px solid rgba(125,211,252,.13) !important;
border-radius:13px !important;
padding:14px 16px !important;
background:rgba(255,255,255,.035) !important;
}
.vehicle-info-card .vehicle-price-box small{
display:block !important;
font-size:10px !important;
letter-spacing:1px !important;
opacity:.72 !important;
margin-bottom:5px !important;
}
.vehicle-info-card .vehicle-price-box strong{
display:block !important;
font-size:20px !important;
line-height:1.15 !important;
}
/* ---------- GALLERY ---------- */
.vehicle-info-card .premium-vehicle-gallery{
position:relative !important;
overflow:hidden !important;
border-radius:16px !important;
border:1px solid rgba(125,211,252,.12) !important;
background:rgba(0,0,0,.16) !important;
}
.vehicle-info-card .vehicle-main-image{
display:block !important;
width:100% !important;
max-height:440px !important;
object-fit:contain !important;
margin:auto !important;
transition:opacity .2s ease !important;
}
.vehicle-info-card .gallery-controls{
display:flex !important;
justify-content:space-between !important;
padding:10px !important;
gap:10px !important;
}
.vehicle-info-card .gallery-controls .btn{
min-width:48px !important;
min-height:44px !important;
}
.vehicle-info-card .vehicle-thumbnails{
display:flex !important;
gap:8px !important;
overflow-x:auto !important;
padding:4px 10px 12px !important;
scrollbar-width:none !important;
}
.vehicle-info-card .vehicle-thumbnails::-webkit-scrollbar{
display:none !important;
}
.vehicle-info-card .vehicle-thumb{
flex:0 0 72px !important;
width:72px !important;
height:54px !important;
object-fit:cover !important;
border-radius:9px !important;
border:1px solid rgba(255,255,255,.10) !important;
opacity:.65 !important;
cursor:pointer !important;
transition:
opacity .2s ease,
border-color .2s ease,
transform .2s ease !important;
}
.vehicle-info-card .vehicle-thumb:hover{
opacity:.9 !important;
transform:translateY(-1px) !important;
}
.vehicle-info-card .vehicle-thumb.active{
opacity:1 !important;
border-color:rgba(125,211,252,.65) !important;
}
/* ---------- SPECIFICATIONS ---------- */
.vehicle-info-card .vehicle-spec-table{
width:100% !important;
border-collapse:separate !important;
border-spacing:0 !important;
overflow:hidden !important;
border:1px solid rgba(125,211,252,.10) !important;
border-radius:12px !important;
}
.vehicle-info-card .vehicle-spec-table td{
padding:11px 13px !important;
border-bottom:1px solid rgba(255,255,255,.055) !important;
}
.vehicle-info-card .vehicle-spec-table tr:last-child td{
border-bottom:0 !important;
}
.vehicle-info-card .vehicle-spec-table td:first-child{
width:42% !important;
font-weight:800 !important;
opacity:.78 !important;
}
/* ---------- ACTIONS ---------- */
.vehicle-info-card .vehicle-actions{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
margin-top:18px !important;
}
.vehicle-info-card .vehicle-actions .btn{
min-height:48px !important;
border-radius:11px !important;
font-weight:800 !important;
}
/* ---------- MOBILE ---------- */
@media (max-width:650px){
.vehicle-info-card{
width:calc(100vw - 20px) !important;
max-height:calc(100svh - 20px) !important;
border-radius:18px !important;
}
.vehicle-info-card .vehicle-price-box{
grid-template-columns:1fr !important;
gap:8px !important;
}
.vehicle-info-card .vehicle-price-box > div{
padding:12px 13px !important;
}
.vehicle-info-card .vehicle-main-image{
max-height:280px !important;
}
.vehicle-info-card .vehicle-thumb{
flex-basis:64px !important;
width:64px !important;
height:50px !important;
}
.vehicle-info-card .vehicle-actions{
grid-template-columns:1fr !important;
}
.vehicle-info-card .vehicle-spec-table td{
padding:10px 11px !important;
font-size:13px !important;
}
.vehicle-info-card .vehicle-spec-table td:first-child{
width:40% !important;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
.vehicle-info-card *,
.vehicle-info-card .vehicle-thumb,
.vehicle-info-card .vehicle-main-image{
transition:none !important;
}
}
/* =========================================================
AQUIL MOTORS W-15
PREMIUM ENQUIRY MODAL POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA / ENQUIRY LOGIC UNCHANGED
========================================================= */
/* ---------- ENQUIRY MODAL BACKDROP ---------- */
#enquiryModal{
padding:16px !important;
backdrop-filter:blur(14px) saturate(125%) !important;
-webkit-backdrop-filter:blur(14px) saturate(125%) !important;
}
/* ---------- ENQUIRY CARD ---------- */
#enquiryModal .modal-card{
width:min(620px,calc(100vw - 32px)) !important;
max-height:calc(100vh - 32px) !important;
overflow-y:auto !important;
overscroll-behavior:contain !important;
border:1px solid rgba(125,211,252,.20) !important;
border-radius:20px !important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.105),
rgba(255,255,255,.040) 48%,
rgba(14,165,233,.045)
) !important;
box-shadow:
0 30px 90px rgba(0,0,0,.50),
0 0 0 1px rgba(255,255,255,.025) inset,
0 0 55px rgba(14,165,233,.07) !important;
}
/* ---------- ENQUIRY HEADER ---------- */
#enquiryModal .modal-card h2{
letter-spacing:-.55px !important;
line-height:1.1 !important;
}
#enquiryModal .modal-card > p{
line-height:1.55 !important;
}
/* ---------- FORM ---------- */
#enquiryModal form{
display:grid !important;
gap:14px !important;
}
#enquiryModal label{
display:grid !important;
gap:7px !important;
font-size:12px !important;
font-weight:800 !important;
letter-spacing:.15px !important;
}
#enquiryModal input,
#enquiryModal select,
#enquiryModal textarea{
width:100% !important;
min-height:46px !important;
border:1px solid rgba(125,211,252,.16) !important;
border-radius:11px !important;
background:rgba(255,255,255,.055) !important;
color:inherit !important;
outline:none !important;
transition:
border-color .2s ease,
box-shadow .2s ease,
background-color .2s ease !important;
}
#enquiryModal textarea{
min-height:100px !important;
resize:vertical !important;
padding-top:12px !important;
}
#enquiryModal input:focus,
#enquiryModal select:focus,
#enquiryModal textarea:focus{
border-color:rgba(125,211,252,.48) !important;
background:rgba(255,255,255,.075) !important;
box-shadow:
0 0 0 3px rgba(14,165,233,.10),
0 0 24px rgba(14,165,233,.06) !important;
}
/* ---------- FORM ACTION ---------- */
#enquiryModal form .btn,
#enquiryModal .btn{
min-height:48px !important;
border-radius:11px !important;
font-weight:850 !important;
}
/* ---------- CLOSE BUTTON ---------- */
#enquiryModal .modal-close{
width:38px !important;
height:38px !important;
border-radius:50% !important;
transition:
transform .2s ease,
background-color .2s ease !important;
}
#enquiryModal .modal-close:hover{
transform:rotate(4deg) scale(1.04) !important;
}
/* ---------- MOBILE ---------- */
@media (max-width:650px){
#enquiryModal{
padding:10px !important;
align-items:flex-end !important;
}
#enquiryModal .modal-card{
width:100% !important;
max-height:calc(100svh - 20px) !important;
border-radius:18px !important;
}
#enquiryModal input,
#enquiryModal select,
#enquiryModal textarea{
min-height:48px !important;
font-size:16px !important;
}
#enquiryModal textarea{
min-height:90px !important;
}
#enquiryModal .btn{
min-height:50px !important;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
#enquiryModal *,
#enquiryModal .modal-close{
transition:none !important;
animation:none !important;
}
}
/* =========================================================
AQUIL MOTORS W-16
PREMIUM PUBLIC INTERACTION POLISH
PRESENTATION ONLY
EXISTING HTML / JS / API / DATA / ENQUIRY LOGIC UNCHANGED
========================================================= */
/* ---------- GLOBAL INTERACTION QUALITY ---------- */
button,
a,
input,
select,
textarea{
-webkit-tap-highlight-color:transparent;
}
button,
a{
touch-action:manipulation;
}
/* ---------- BUTTON PRESS FEEDBACK ---------- */
.public-header button,
.public-header a,
#bikes .btn,
#offers .btn,
#finance .btn,
#contact .btn,
.modal-card .btn{
transition:
transform .18s ease,
box-shadow .22s ease,
background-color .22s ease,
border-color .22s ease,
opacity .18s ease !important;
}
.public-header button:active,
.public-header a:active,
#bikes .btn:active,
#offers .btn:active,
#finance .btn:active,
#contact .btn:active,
.modal-card .btn:active{
transform:translateY(1px) scale(.985) !important;
}
/* ---------- FOCUS ACCESSIBILITY ---------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:2px solid rgba(125,211,252,.72) !important;
outline-offset:3px !important;
}
/* ---------- VEHICLE CARD INTERACTION ---------- */
#bikes .vehicle-card,
#bikes .bike-card,
#bikes .card{
will-change:transform,box-shadow !important;
}
#bikes .vehicle-card::after,
#bikes .bike-card::after,
#bikes .card::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
border-radius:inherit;
background:
linear-gradient(
120deg,
transparent 25%,
rgba(255,255,255,.055) 48%,
transparent 70%
);
opacity:0;
transform:translateX(-35%);
transition:
opacity .35s ease,
transform .55s ease !important;
}
#bikes .vehicle-card:hover::after,
#bikes .bike-card:hover::after,
#bikes .card:hover::after{
opacity:1;
transform:translateX(35%);
}
/* ---------- GALLERY THUMBNAILS ---------- */
.vehicle-thumbnails button,
.vehicle-thumbnails img{
transition:
transform .2s ease,
opacity .2s ease,
border-color .2s ease,
box-shadow .2s ease !important;
}
.vehicle-thumbnails button:hover,
.vehicle-thumbnails img:hover{
transform:translateY(-2px) !important;
}
/* ---------- MODAL OPEN FEEL ---------- */
#enquiryModal .modal-card,
#termsModal .modal-card,
.vehicle-info-card{
animation:aquilModalIn .24s ease both;
}
@keyframes aquilModalIn{
from{
opacity:0;
transform:translateY(10px) scale(.985);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
/* ---------- MODAL BACKDROP ---------- */
#enquiryModal,
#termsModal{
transition:
opacity .22s ease,
visibility .22s ease !important;
}
/* ---------- MOBILE TOUCH ---------- */
@media (hover:none){
#bikes .vehicle-card:hover,
#bikes .bike-card:hover,
#bikes .card:hover{
transform:none !important;
}
#bikes .vehicle-card:hover::after,
#bikes .bike-card:hover::after,
#bikes .card:hover::after{
opacity:0 !important;
}
}
/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
*,
*::before,
*::after{
scroll-behavior:auto !important;
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
}
/* =========================================================
AQUIL MOTORS W-18
PREMIUM ENQUIRY VEHICLE CONTEXT
PRESENTATION ONLY
EXISTING ENQUIRY / API / DATA LOGIC UNCHANGED
========================================================= */
.enquiry-vehicle-context{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin:2px 0 4px;
padding:14px 15px;
border:1px solid rgba(125,211,252,.18);
border-radius:14px;
background:
linear-gradient(
135deg,
rgba(14,165,233,.085),
rgba(255,255,255,.045)
);
box-shadow:
0 10px 28px rgba(0,0,0,.16),
0 0 0 1px rgba(255,255,255,.018) inset;
}
.enquiry-vehicle-context-copy{
min-width:0;
display:grid;
gap:4px;
}
.enquiry-vehicle-context-label{
font-size:10px;
font-weight:850;
letter-spacing:.9px;
opacity:.68;
}
.enquiry-vehicle-context-copy strong{
font-size:16px;
line-height:1.2;
letter-spacing:-.2px;
overflow-wrap:anywhere;
}
.enquiry-vehicle-context-price{
font-size:13px;
font-weight:800;
opacity:.88;
}
.enquiry-vehicle-context-interest{
flex:0 0 auto;
padding:7px 10px;
border:1px solid rgba(125,211,252,.16);
border-radius:999px;
font-size:10px;
font-weight:850;
letter-spacing:.35px;
white-space:nowrap;
background:rgba(255,255,255,.045);
}
@media (max-width:650px){
.enquiry-vehicle-context{
align-items:flex-start;
flex-direction:column;
gap:9px;
}
.enquiry-vehicle-context-interest{
align-self:flex-start;
}
}
@media (prefers-reduced-motion:reduce){
.enquiry-vehicle-context,
.enquiry-vehicle-context-interest{
transition:none !important;
}
}
/* =========================================================
AQUIL MOTORS — FINAL PUBLIC PREMIUM CLASSIC VISUAL LOCK
SKY BLUE + DARK BLUE + WHITE
Final authority layer. Visual only.
========================================================= */
:root{
--aquil-sky:#0ea5e9;
--aquil-sky-dark:#0284c7;
--aquil-sky-deep:#0369a1;
--aquil-sky-light:#e0f2fe;
--aquil-sky-pale:#f0f9ff;
--aquil-white:#ffffff;
--aquil-text:#0f172a;
--aquil-muted:#526273;
--aquil-border:#cfe8f5;
--aquil-success:#16a34a;
--aquil-navy:#062f4f;
--aquil-navy-deep:#031d31;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--aquil-sky-pale) !important;
color:var(--aquil-text) !important;
-webkit-font-smoothing:antialiased;
}
a,
button,
input,
select,
textarea{
-webkit-tap-highlight-color:transparent;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
outline:3px solid rgba(14,165,233,.34) !important;
outline-offset:3px !important;
}
.top-info-bar{
background:#062f4f !important;
color:#eaf8ff !important;
border-bottom:1px solid rgba(255,255,255,.12) !important;
}
.public-header{
min-height:74px !important;
height:74px !important;
background:#ffffff !important;
color:var(--aquil-text) !important;
border-bottom:1px solid var(--aquil-border) !important;
box-shadow:0 8px 28px rgba(3,105,161,.10) !important;
}
.public-header .logo-main{
color:var(--aquil-sky-deep) !important;
}
.public-header .logo-sub{
color:var(--aquil-sky) !important;
}
.public-header .public-nav a{
color:#17324a !important;
font-weight:850 !important;
letter-spacing:.45px !important;
}
.public-header .public-nav a:hover,
.public-header .public-nav a.active{
color:var(--aquil-sky-dark) !important;
}
.public-header .header-contact a{
color:var(--aquil-sky-deep) !important;
border-left-color:#d9edf7 !important;
}
.public-header .header-contact span{
color:#526273 !important;
}
.public-header .header-contact b{
color:var(--aquil-text) !important;
}
.public-header .mobile-menu{
color:var(--aquil-sky-deep) !important;
}
.public-header [data-brand-logo],
footer [data-brand-logo]{
background:#ffffff !important;
border-radius:10px !important;
}
.hero{
min-height:530px !important;
height:530px !important;
background:
radial-gradient(
circle at 72% 40%,
#38bdf8 0%,
#0ea5e9 22%,
#0284c7 55%,
#0369a1 80%,
#062f4f 100%
) !important;
color:#ffffff !important;
}
.hero:before{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(3,29,49,.70) 0%,
rgba(3,47,79,.32) 42%,
rgba(14,165,233,.08) 100%
);
pointer-events:none;
z-index:0;
}
.hero:after{
background:
linear-gradient(
transparent 0%,
rgba(3,29,49,.82) 100%
) !important;
}
.hero-copy,
.hero-copy *,
.hero .hero-model,
.hero .hero-sub,
.hero h1,
.hero p,
.hero .eyebrow{
color:#ffffff !important;
}
.hero .eyebrow{
color:#dff5ff !important;
}
.hero h1 strong{
color:#ffffff !important;
text-shadow:0 4px 18px rgba(0,0,0,.18);
}
.hero-model b{
color:#e0f7ff !important;
}
.hero-sub{
color:#e8f8ff !important;
}
.hero-actions .btn.red{
background:#ffffff !important;
color:var(--aquil-sky-deep) !important;
border-color:#ffffff !important;
box-shadow:0 12px 30px rgba(0,0,0,.16) !important;
}
.hero-actions .btn.red:hover{
background:#e0f7ff !important;
color:#075985 !important;
}
.hero-actions .btn.outline{
background:transparent !important;
color:#ffffff !important;
border-color:#ffffff !important;
}
.hero-actions .btn.outline:hover{
background:#ffffff !important;
color:var(--aquil-sky-deep) !important;
}
.hero-bike{
z-index:1 !important;
}
.hero-bike img{
filter:saturate(.88) contrast(1.12) drop-shadow(0 20px 35px rgba(0,0,0,.20)) !important;
}
.bike-glow{
background:
radial-gradient(
circle,
rgba(255,255,255,.36) 0%,
rgba(224,242,254,.20) 32%,
rgba(255,255,255,0) 72%
) !important;
}
.trust-strip{
background:#ffffff !important;
color:var(--aquil-text) !important;
border:1px solid var(--aquil-border) !important;
box-shadow:0 18px 48px rgba(3,105,161,.12) !important;
}
.trust-strip div{
border-right-color:#dbeef7 !important;
}
.trust-strip b{
color:var(--aquil-sky-dark) !important;
}
.trust-strip span{
color:#42566b !important;
}
.trust-strip strong{
color:var(--aquil-sky-deep) !important;
}
.section{
background:#ffffff !important;
color:var(--aquil-text) !important;
}
.section-title{
color:var(--aquil-text) !important;
font-weight:900 !important;
}
.section-title span{
color:var(--aquil-sky-deep) !important;
}
.section-title:after{
background:var(--aquil-sky) !important;
}
.bike-card{
background:#ffffff !important;
border:1px solid var(--aquil-border) !important;
box-shadow:0 10px 28px rgba(3,105,161,.08) !important;
}
.bike-card:hover{
transform:translateY(-6px) !important;
border-color:#7dd3fc !important;
box-shadow:0 18px 38px rgba(3,105,161,.16) !important;
}
.bike-image{
background:
linear-gradient(
145deg,
#eef9ff 0%,
#ffffff 60%,
#e0f2fe 100%
) !important;
}
.bike-image span{
background:var(--aquil-navy) !important;
color:#ffffff !important;
}
.bike-info h3{
color:var(--aquil-text) !important;
}
.bike-info small{
color:#607286 !important;
}
.bike-info>strong{
color:var(--aquil-sky-deep) !important;
}
.terms-link{
color:#17415d !important;
}
.card-actions .btn.red{
background:var(--aquil-sky-dark) !important;
color:#ffffff !important;
border-color:var(--aquil-sky-dark) !important;
}
.card-actions .btn.red:hover{
background:var(--aquil-sky-deep) !important;
}
.card-actions .btn.outline.dark{
background:#ffffff !important;
color:var(--aquil-sky-deep) !important;
border-color:#89c9e7 !important;
}
.offer-banner{
background:
linear-gradient(
135deg,
#062f4f 0%,
#075985 52%,
#0ea5e9 100%
) !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.10) !important;
box-shadow:0 18px 40px rgba(3,47,79,.16) !important;
}
.offer-banner p,
.offer-banner h2{
color:#ffffff !important;
}
.offer-art{
background:rgba(255,255,255,.08) !important;
border-color:#7dd3fc !important;
color:#ffffff !important;
}
.offer-art b{
color:#e0f7ff !important;
}
.offer-banner .btn.red{
background:#ffffff !important;
color:var(--aquil-sky-deep) !important;
border-color:#ffffff !important;
}
.finance{
background:#ffffff !important;
border:1px solid var(--aquil-border) !important;
box-shadow:0 10px 28px rgba(3,105,161,.07) !important;
}
.finance div{
border-right-color:#dfeff7 !important;
}
.finance b{
color:var(--aquil-sky-deep) !important;
}
.finance span{
color:#5f7184 !important;
}
.contact-section{
background:
linear-gradient(
135deg,
#ffffff 0%,
#f4fbff 55%,
#e7f7fe 100%
) !important;
color:var(--aquil-text) !important;
}
.contact-section .eyebrow{
color:var(--aquil-sky-deep) !important;
}
.contact-section h2{
color:var(--aquil-text) !important;
}
.contact-section p:not(.eyebrow){
color:#526273 !important;
}
.contact-buttons .btn.red{
background:var(--aquil-sky-dark) !important;
color:#ffffff !important;
border-color:var(--aquil-sky-dark) !important;
}
.contact-buttons .btn.red:hover{
background:var(--aquil-sky-deep) !important;
}
.contact-buttons .btn.outline.dark{
background:#ffffff !important;
color:var(--aquil-sky-deep) !important;
border-color:#89c9e7 !important;
}
.location-card{
background:
linear-gradient(
150deg,
#062f4f,
#0369a1
) !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.12) !important;
box-shadow:0 18px 38px rgba(3,47,79,.20) !important;
}
.location-card strong,
.location-card span,
.location-card a{
color:#ffffff !important;
}
.location-card a{
color:#dff5ff !important;
}
.btn.whatsapp,
.floating-wa{
background:#16a34a !important;
color:#ffffff !important;
border-color:#16a34a !important;
}
.btn.whatsapp:hover,
.floating-wa:hover{
filter:brightness(.95);
}
footer{
background:
linear-gradient(
160deg,
#031d31 0%,
#062f4f 52%,
#075985 100%
) !important;
color:#eaf7ff !important;
}
footer,
footer p,
footer a,
footer h4,
footer span,
footer b,
footer .footer-bottom{
color:#eaf7ff !important;
}
footer .logo-main{
color:#ffffff !important;
}
footer .logo-sub{
color:#7dd3fc !important;
}
.footer-grid p{
color:#c2d7e5 !important;
}
.socials a,
.staff-login{
color:#eaf7ff !important;
border-color:rgba(255,255,255,.28) !important;
background:rgba(255,255,255,.04) !important;
}
.socials a:hover,
.staff-login:hover{
background:#ffffff !important;
color:#075985 !important;
}
.footer-bottom{
border-top-color:rgba(255,255,255,.18) !important;
}
.modal-backdrop{
background:rgba(3,29,49,.68) !important;
backdrop-filter:blur(4px);
}
.modal-card,
.vehicle-info-card{
background:#ffffff !important;
color:var(--aquil-text) !important;
border:1px solid var(--aquil-border) !important;
border-top:5px solid var(--aquil-sky) !important;
box-shadow:0 28px 80px rgba(3,47,79,.25) !important;
}
.modal-card h2,
.modal-card h3{
color:var(--aquil-sky-deep) !important;
}
.modal-card input,
.modal-card select,
.modal-card textarea{
color:var(--aquil-text) !important;
background:#ffffff !important;
border-color:#c7dce8 !important;
}
.modal-card input:focus,
.modal-card select:focus,
.modal-card textarea:focus{
border-color:var(--aquil-sky) !important;
box-shadow:0 0 0 4px rgba(14,165,233,.12) !important;
}
@media(max-width:800px){
.public-header{
min-height:64px !important;
height:64px !important;
}
.public-nav{
background:#ffffff !important;
border-color:var(--aquil-border) !important;
}
.public-nav a{
color:#17324a !important;
}
.public-nav a:hover,
.public-nav a.active{
color:var(--aquil-sky-deep) !important;
background:var(--aquil-sky-light) !important;
}
.hero{
min-height:500px !important;
height:500px !important;
}
.hero-copy{
width:100% !important;
}
.hero h1{
font-size:36px !important;
}
.hero h1 strong{
font-size:50px !important;
}
.hero-bike{
opacity:.42 !important;
}
}
@media(max-width:600px){
.hero{
min-height:520px !important;
height:520px !important;
}
.hero h1{
font-size:32px !important;
}
.hero h1 strong{
font-size:45px !important;
}
.trust-strip{
grid-template-columns:1fr !important;
gap:0 !important;
}
.trust-strip div{
border-right:0 !important;
border-bottom:1px solid #e0eef6 !important;
padding:8px 4px !important;
}
.trust-strip div:last-child{
border-bottom:0 !important;
}
.finance{
grid-template-columns:1fr 1fr !important;
}
.finance div{
border-right:0 !important;
border-bottom:1px solid #e2eef5 !important;
}
}
@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
scroll-behavior:auto !important;
}
}
/* =========================================================
END FINAL PUBLIC PREMIUM CLASSIC VISUAL LOCK
========================================================= */
/* =========================================================
AQUIL MOTORS — W-65.20
MOBILE-FIRST PREMIUM PUBLIC WEBSITE
Desktop layout untouched
========================================================= */
@media (max-width: 650px){
html,
body{
width:100%;
max-width:100%;
overflow-x:hidden !important;
}
body{
background:#f0f9ff !important;
}
/* ---------- TOP INFO ---------- */
.top-info-bar{
min-height:28px !important;
height:auto !important;
padding:5px 8px !important;
overflow:hidden !important;
}
.top-info-inner{
width:100% !important;
justify-content:center !important;
gap:6px !important;
white-space:nowrap !important;
overflow:hidden !important;
font-size:7px !important;
line-height:1.2 !important;
}
.top-info-inner span{
font-size:7px !important;
}
/* ---------- MOBILE HEADER ---------- */
.public-header{
height:64px !important;
min-height:64px !important;
padding:0 15px !important;
gap:10px !important;
position:sticky !important;
top:0 !important;
z-index:1100 !important;
}
.public-header .logo{
min-width:0 !important;
flex:1 !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:4px !important;
line-height:1 !important;
}
.public-header .logo-main{
font-size:18px !important;
letter-spacing:-.8px !important;
}
.public-header .logo-sub{
font-size:9px !important;
margin:0 !important;
letter-spacing:.5px !important;
}
.public-header [data-brand-logo]{
max-width:116px !important;
max-height:42px !important;
}
.public-header .mobile-menu{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:42px !important;
height:42px !important;
min-width:42px !important;
border-radius:12px !important;
background:#ffffff !important;
border:1px solid #cfe8f5 !important;
box-shadow:0 7px 20px rgba(3,105,161,.16) !important;
color:#0369a1 !important;
font-size:23px !important;
}
/* ---------- MOBILE NAV ---------- */
.public-nav{
position:absolute !important;
left:10px !important;
right:10px !important;
top:70px !important;
width:auto !important;
display:none !important;
flex-direction:column !important;
align-items:stretch !important;
gap:3px !important;
padding:10px !important;
background:#ffffff !important;
border:1px solid #cfe8f5 !important;
border-radius:16px !important;
box-shadow:0 18px 45px rgba(3,47,79,.18) !important;
}
.public-nav.open{
display:flex !important;
}
.public-nav a{
display:flex !important;
align-items:center !important;
min-height:43px !important;
padding:10px 13px !important;
border-radius:10px !important;
color:#17324a !important;
font-size:12px !important;
font-weight:850 !important;
}
.public-nav a.active,
.public-nav a:hover{
background:#e0f2fe !important;
color:#0369a1 !important;
}
/* ---------- HERO ---------- */
.hero{
height:auto !important;
min-height:500px !important;
padding:34px 20px 28px !important;
display:flex !important;
align-items:flex-start !important;
overflow:hidden !important;
isolation:isolate !important;
}
.hero:before{
background:
linear-gradient(
180deg,
rgba(3,47,79,.20) 0%,
rgba(3,47,79,.35) 54%,
rgba(3,29,49,.82) 100%
) !important;
z-index:0 !important;
}
.hero-copy{
width:100% !important;
max-width:100% !important;
position:relative !important;
z-index:5 !important;
}
.hero .eyebrow{
max-width:210px !important;
font-size:10px !important;
line-height:1.35 !important;
letter-spacing:1.1px !important;
margin-bottom:10px !important;
}
.hero h1{
max-width:260px !important;
font-size:31px !important;
line-height:.96 !important;
letter-spacing:-.7px !important;
}
.hero h1 strong{
display:block !important;
font-size:45px !important;
line-height:.9 !important;
}
.hero-model{
font-size:26px !important;
margin:10px 0 0 !important;
}
.hero-model b{
font-size:29px !important;
}
.hero-sub{
font-size:13px !important;
line-height:1.4 !important;
margin:6px 0 18px !important;
}
.hero-bike{
position:absolute !important;
right:-8% !important;
bottom:-4% !important;
width:78% !important;
height:67% !important;
opacity:.82 !important;
z-index:1 !important;
pointer-events:none !important;
}
.hero-bike img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center !important;
opacity:.70 !important;
mix-blend-mode:screen !important;
filter:saturate(.90) contrast(1.10) drop-shadow(0 14px 25px rgba(0,0,0,.16)) !important;
mask-image:
linear-gradient(
to left,
transparent 0%,
black 16%,
black 90%,
transparent 100%
) !important;
}
.bike-glow{
width:260px !important;
height:180px !important;
right:0 !important;
bottom:40px !important;
}
/* ---------- HERO BUTTONS ---------- */
.hero-actions{
position:relative !important;
z-index:8 !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
width:min(230px,100%) !important;
}
.hero-actions .btn{
width:100% !important;
min-height:45px !important;
padding:11px 14px !important;
border-radius:11px !important;
font-size:11px !important;
}
/* ---------- TRUST STRIP ---------- */
.trust-strip{
margin:-16px 14px 0 !important;
width:calc(100% - 28px) !important;
max-width:none !important;
padding:4px !important;
grid-template-columns:1fr 1fr !important;
gap:0 !important;
border-radius:16px !important;
box-shadow:0 14px 32px rgba(3,105,161,.12) !important;
}
.trust-strip div{
min-height:51px !important;
padding:7px 6px !important;
border-right:1px solid #e1eef5 !important;
border-bottom:1px solid #e1eef5 !important;
gap:7px !important;
justify-content:flex-start !important;
}
.trust-strip div:nth-child(2n){
border-right:0 !important;
}
.trust-strip div:nth-child(4),
.trust-strip div:nth-child(5){
border-bottom:0 !important;
}
.trust-strip div:nth-child(5){
grid-column:1/-1 !important;
justify-content:center !important;
}
.trust-strip b{
flex:0 0 auto !important;
font-size:17px !important;
}
.trust-strip span{
font-size:7.5px !important;
line-height:1.25 !important;
}
.trust-strip strong{
font-size:8px !important;
}
/* ---------- SECTION ---------- */
.section{
padding:42px 14px 28px !important;
max-width:none !important;
}
.section-title{
font-size:21px !important;
line-height:1.15 !important;
margin-bottom:22px !important;
}
/* ---------- BIKE GRID ---------- */
.bike-grid{
grid-template-columns:1fr !important;
gap:14px !important;
}
.bike-card{
width:100% !important;
border-radius:15px !important;
}
.bike-image{
height:205px !important;
}
.bike-info{
padding:14px !important;
}
.bike-info h3{
font-size:17px !important;
}
.bike-info>strong{
font-size:17px !important;
}
.card-actions{
grid-template-columns:1fr 1fr !important;
gap:8px !important;
}
.card-actions .btn{
min-height:42px !important;
font-size:10px !important;
}
/* ---------- OFFER ---------- */
.offer-banner{
margin:12px 14px 20px !important;
min-height:220px !important;
border-radius:17px !important;
padding:24px 18px !important;
flex-direction:column !important;
gap:18px !important;
text-align:center !important;
}
.offer-banner p{
font-size:23px !important;
}
.offer-banner h2{
font-size:15px !important;
margin-bottom:13px !important;
}
.offer-art{
font-size:14px !important;
padding:12px 20px !important;
}
.offer-art b{
font-size:25px !important;
}
/* ---------- FINANCE ---------- */
.finance{
margin:12px 14px 25px !important;
grid-template-columns:1fr 1fr !important;
border-radius:15px !important;
padding:8px !important;
}
.finance div{
min-height:70px !important;
padding:12px 10px !important;
border-right:0 !important;
border-bottom:1px solid #e1eef5 !important;
}
.finance div:nth-child(3),
.finance div:nth-child(4){
border-bottom:0 !important;
}
.finance b{
font-size:10px !important;
}
.finance span{
font-size:9px !important;
line-height:1.35 !important;
}
/* ---------- CONTACT ---------- */
.contact-section{
padding:42px 16px !important;
grid-template-columns:1fr !important;
gap:22px !important;
}
.contact-section h2{
font-size:29px !important;
line-height:1.05 !important;
}
.contact-section p:not(.eyebrow){
font-size:13px !important;
line-height:1.65 !important;
}
.contact-buttons{
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
}
.contact-buttons .btn{
width:100% !important;
min-height:46px !important;
}
.location-card{
padding:22px !important;
border-radius:16px !important;
}
/* ---------- FOOTER ---------- */
footer{
padding:38px 16px 0 !important;
}
.footer-grid{
grid-template-columns:1fr !important;
gap:24px !important;
}
.footer-grid p{
max-width:none !important;
font-size:12px !important;
line-height:1.7 !important;
}
.footer-bottom{
flex-direction:column !important;
gap:7px !important;
font-size:9px !important;
line-height:1.5 !important;
}
/* ---------- FLOATING WHATSAPP ---------- */
.floating-wa{
left:14px !important;
bottom:calc(14px + env(safe-area-inset-bottom)) !important;
max-width:145px !important;
padding:9px 13px !important;
border-radius:24px !important;
font-size:10px !important;
box-shadow:0 8px 26px rgba(3,47,79,.22) !important;
z-index:950 !important;
}
/* ---------- PUBLIC MODALS ---------- */
.modal-backdrop{
padding:10px !important;
}
.modal-card,
.vehicle-info-card{
width:100% !important;
max-width:100% !important;
max-height:calc(100dvh - 20px) !important;
border-radius:17px !important;
padding:20px !important;
}
.modal-card h2{
font-size:22px !important;
}
.form-grid-public{
grid-template-columns:1fr !important;
}
.full-public{
grid-column:auto !important;
}
}
/* =========================================================
EXTRA SMALL PHONES — 360px AND BELOW
========================================================= */
@media(max-width:380px){
.public-header{
padding:0 11px !important;
}
.public-header .logo-main{
font-size:16px !important;
}
.public-header .logo-sub{
font-size:8px !important;
}
.hero{
min-height:490px !important;
padding:29px 16px 24px !important;
}
.hero h1{
font-size:28px !important;
}
.hero h1 strong{
font-size:41px !important;
}
.hero-model{
font-size:23px !important;
}
.hero-model b{
font-size:26px !important;
}
.hero-bike{
width:82% !important;
right:-10% !important;
}
.hero-actions{
width:215px !important;
}
.trust-strip{
margin-left:10px !important;
margin-right:10px !important;
width:calc(100% - 20px) !important;
}
.trust-strip div{
min-height:48px !important;
}
.section{
padding-left:10px !important;
padding-right:10px !important;
}
}
/* =========================================================
390–430px — BALANCED MOBILE PREMIUM
========================================================= */
@media(min-width:381px) and (max-width:450px){
.hero{
min-height:510px !important;
}
.hero-bike{
width:78% !important;
right:-8% !important;
}
}
/* =========================================================
END W-65.20
========================================================= */
/* =========================================================
AQUIL MOTORS — W-65.21
FINAL MOBILE COMPOSITION LOCK
Screenshot-driven refinement
========================================================= */
@media (max-width:650px){
/* ---------- HERO COMPOSITION ---------- */
.hero{
min-height:555px !important;
height:555px !important;
padding:32px 18px 24px !important;
align-items:flex-start !important;
}
.hero-copy{
width:100% !important;
max-width:285px !important;
position:relative !important;
z-index:10 !important;
}
.hero-actions{
width:230px !important;
max-width:100% !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
position:relative !important;
z-index:20 !important;
}
.hero-actions .btn{
min-height:46px !important;
position:relative !important;
z-index:21 !important;
}
/* Move the bike image clearly below the buttons */
.hero-bike{
right:-4% !important;
bottom:-2% !important;
width:88% !important;
height:43% !important;
opacity:.82 !important;
z-index:2 !important;
align-items:flex-end !important;
}
.hero-bike img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
opacity:.62 !important;
mix-blend-mode:screen !important;
filter:
saturate(.92)
contrast(1.08)
drop-shadow(0 12px 24px rgba(0,0,0,.18))
!important;
mask-image:
linear-gradient(
to top,
transparent 0%,
black 20%,
black 84%,
transparent 100%
) !important;
}
.bike-glow{
width:310px !important;
height:180px !important;
right:-5% !important;
bottom:40px !important;
opacity:.75 !important;
}
/* Keep the dark lower hero clear */
.hero:after{
height:155px !important;
background:
linear-gradient(
transparent,
rgba(3,29,49,.92)
) !important;
z-index:3 !important;
pointer-events:none !important;
}
/* ---------- TRUST STRIP ---------- */
.trust-strip{
margin:-14px 12px 0 !important;
width:calc(100% - 24px) !important;
padding:4px !important;
grid-template-columns:1fr 1fr !important;
position:relative !important;
z-index:50 !important;
}
.trust-strip div{
display:flex !important;
min-height:52px !important;
}
/* IMPORTANT: show the 5th item */
.trust-strip div:nth-child(5){
display:flex !important;
grid-column:1 / -1 !important;
justify-content:center !important;
border-right:0 !important;
border-bottom:0 !important;
}
/* Remove any older hide rule */
.trust-strip div:nth-child(n+5){
display:flex !important;
}
.trust-strip span{
font-size:7.5px !important;
}
.trust-strip strong{
font-size:8px !important;
}
/* ---------- POPULAR BIKES ---------- */
#bikes{
padding-top:38px !important;
}
#bikes .section-title{
margin-bottom:20px !important;
padding:0 8px !important;
}
#bikes .bike-grid{
margin-top:0 !important;
}
#bikes .bike-card{
margin-top:0 !important;
}
/* ---------- FLOATING WHATSAPP ---------- */
.floating-wa{
left:auto !important;
right:12px !important;
bottom:calc(12px + env(safe-area-inset-bottom)) !important;
max-width:138px !important;
padding:8px 11px !important;
font-size:9px !important;
border-radius:22px !important;
z-index:999 !important;
box-shadow:0 8px 24px rgba(3,47,79,.24) !important;
}
/* ---------- MOBILE HERO TYPOGRAPHY ---------- */
.hero .eyebrow{
max-width:245px !important;
font-size:9px !important;
line-height:1.35 !important;
margin-bottom:9px !important;
}
.hero h1{
font-size:32px !important;
line-height:.93 !important;
}
.hero h1 strong{
font-size:46px !important;
line-height:.88 !important;
}
.hero-model{
font-size:26px !important;
margin-top:10px !important;
}
.hero-model b{
font-size:29px !important;
}
.hero-sub{
font-size:13px !important;
margin-bottom:18px !important;
}
}
/* ---------- 360PX REFINEMENT ---------- */
@media(max-width:380px){
.hero{
min-height:540px !important;
height:540px !important;
padding-left:15px !important;
padding-right:15px !important;
}
.hero-copy{
max-width:265px !important;
}
.hero h1{
font-size:29px !important;
}
.hero h1 strong{
font-size:42px !important;
}
.hero-actions{
width:215px !important;
}
.hero-bike{
right:-7% !important;
width:92% !important;
height:42% !important;
}
.trust-strip{
margin-left:9px !important;
margin-right:9px !important;
width:calc(100% - 18px) !important;
}
}
/* =========================================================
END W-65.21
========================================================= */
/* =========================================================
AQUIL MOTORS — W-65.22
FINAL MOBILE PREMIUM POLISH
========================================================= */
@media (max-width:650px){
/* ---------- HERO FINAL BALANCE ---------- */
.hero{
min-height:545px !important;
height:545px !important;
}
.hero-bike{
bottom:-1% !important;
height:40% !important;
width:86% !important;
right:-3% !important;
opacity:.76 !important;
}
.hero-bike img{
opacity:.56 !important;
object-position:center 55% !important;
}
/* ---------- TRUST STRIP READABILITY ---------- */
.trust-strip{
padding:5px !important;
border-radius:16px !important;
}
.trust-strip div{
min-height:54px !important;
padding:8px 7px !important;
}
.trust-strip span{
font-size:8px !important;
line-height:1.3 !important;
}
.trust-strip strong{
font-size:8.5px !important;
}
.trust-strip b{
font-size:18px !important;
}
/* ---------- POPULAR BIKES ---------- */
#bikes{
padding-top:48px !important;
padding-bottom:34px !important;
}
#bikes .section-title{
margin-bottom:26px !important;
}
/* ---------- WHATSAPP FLOATING BUTTON ---------- */
.floating-wa{
left:auto !important;
right:10px !important;
bottom:calc(10px + env(safe-area-inset-bottom)) !important;
min-height:34px !important;
max-width:128px !important;
padding:7px 10px !important;
gap:5px !important;
border-radius:20px !important;
font-size:8.5px !important;
line-height:1.1 !important;
box-shadow:0 7px 20px rgba(3,47,79,.22) !important;
}
/* ---------- BETTER VISUAL SEPARATION ---------- */
.trust-strip + #bikes,
.trust-strip + section{
margin-top:0 !important;
}
.section-title:after{
margin-top:9px !important;
}
}
/* ---------- SMALL PHONES ---------- */
@media(max-width:380px){
.hero{
min-height:535px !important;
height:535px !important;
}
.hero-bike{
height:39% !important;
width:90% !important;
right:-5% !important;
}
.trust-strip span{
font-size:7.7px !important;
}
.trust-strip strong{
font-size:8.2px !important;
}
.floating-wa{
right:8px !important;
bottom:calc(8px + env(safe-area-inset-bottom)) !important;
max-width:120px !important;
font-size:8px !important;
}
}
/* =========================================================
END W-65.22
========================================================= */
/* =========================================================
AQUIL MOTORS — W-65.23
MOBILE HERO PHOTO-FIRST ARRANGEMENT
Order:
PHOTO → BRAND/BAJAJ CONTENT → ACTIONS
Desktop untouched
========================================================= */
@media(max-width:650px){
.hero{
display:flex !important;
flex-direction:column !important;
justify-content:flex-start !important;
align-items:stretch !important;
height:auto !important;
min-height:0 !important;
padding:0 !important;
overflow:hidden !important;
background:
linear-gradient(
180deg,
#0ea5e9 0%,
#0284c7 58%,
#075985 100%
) !important;
}
/* Decorative hero background */
.hero:before{
z-index:0 !important;
background:
radial-gradient(
circle at 50% 18%,
rgba(255,255,255,.17),
transparent 38%
),
linear-gradient(
180deg,
rgba(14,165,233,.04),
rgba(3,29,49,.25)
) !important;
}
/* -------------------------------------------------------
1. PHOTO FIRST — immediately below menu
------------------------------------------------------- */
.hero-bike{
position:relative !important;
order:1 !important;
top:auto !important;
right:auto !important;
bottom:auto !important;
left:auto !important;
width:100% !important;
height:240px !important;
min-height:240px !important;
margin:0 !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
opacity:1 !important;
z-index:2 !important;
overflow:hidden !important;
}
.hero-bike .bike-glow{
position:absolute !important;
width:260px !important;
height:150px !important;
left:50% !important;
top:50% !important;
transform:translate(-50%,-50%) !important;
background:
radial-gradient(
circle,
rgba(255,255,255,.28),
rgba(125,211,252,.16) 38%,
transparent 72%
) !important;
filter:blur(35px) !important;
z-index:0 !important;
}
.hero-bike img{
position:relative !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
object-position:center center !important;
opacity:1 !important;
mix-blend-mode:normal !important;
filter:
saturate(.98)
contrast(1.04)
brightness(.96)
!important;
border-radius:0 !important;
mask-image:
linear-gradient(
to bottom,
#000 0%,
#000 72%,
transparent 100%
) !important;
-webkit-mask-image:
linear-gradient(
to bottom,
#000 0%,
#000 72%,
transparent 100%
) !important;
z-index:1 !important;
}
/* -------------------------------------------------------
2. BRAND / BAJAJ / PREMIUM CONTENT SECOND
------------------------------------------------------- */
.hero-copy{
order:2 !important;
position:relative !important;
width:100% !important;
max-width:none !important;
margin:0 !important;
padding:22px 20px 26px !important;
text-align:center !important;
z-index:5 !important;
}
.hero .eyebrow{
max-width:none !important;
margin:0 0 9px !important;
font-size:9px !important;
line-height:1.35 !important;
letter-spacing:1px !important;
color:#e9faff !important;
}
.hero h1{
margin:0 !important;
font-size:31px !important;
line-height:.94 !important;
letter-spacing:-.5px !important;
text-align:center !important;
}
.hero h1 strong{
display:block !important;
margin-top:2px !important;
font-size:45px !important;
line-height:.88 !important;
color:#ffffff !important;
}
.hero-model{
margin:10px 0 0 !important;
font-size:24px !important;
line-height:1 !important;
color:#ffffff !important;
}
.hero-model b{
font-size:28px !important;
color:#e8f8ff !important;
}
.hero-sub{
margin:7px 0 19px !important;
font-size:12px !important;
line-height:1.4 !important;
color:#eaf8ff !important;
}
/* -------------------------------------------------------
3. ACTIONS BELOW BRAND CONTENT
------------------------------------------------------- */
.hero-actions{
order:3 !important;
width:100% !important;
max-width:310px !important;
margin:0 auto !important;
display:grid !important;
grid-template-columns:1fr !important;
gap:9px !important;
position:relative !important;
z-index:10 !important;
}
.hero-actions .btn{
width:100% !important;
min-height:46px !important;
border-radius:11px !important;
padding:11px 14px !important;
font-size:10.5px !important;
letter-spacing:.25px !important;
}
.hero-actions .btn.red{
background:#ffffff !important;
color:#0369a1 !important;
border-color:#ffffff !important;
box-shadow:
0 10px 25px rgba(3,47,79,.18) !important;
}
.hero-actions .btn.red:hover{
background:#e0f2fe !important;
color:#075985 !important;
}
.hero-actions .btn.outline{
background:rgba(255,255,255,.06) !important;
color:#ffffff !important;
border-color:rgba(255,255,255,.75) !important;
}
.hero-actions .btn.outline:hover{
background:#ffffff !important;
color:#075985 !important;
}
/* The decorative city layer stays behind everything */
.hero-city{
z-index:0 !important;
pointer-events:none !important;
}
/* -------------------------------------------------------
4. CLEAN TRANSITION TO TRUST STRIP
------------------------------------------------------- */
.trust-strip{
position:relative !important;
z-index:20 !important;
margin:-8px 12px 0 !important;
width:calc(100% - 24px) !important;
}
}
/* ---------------------------------------------------------
EXTRA SMALL PHONES
--------------------------------------------------------- */
@media(max-width:380px){
.hero-bike{
height:215px !important;
min-height:215px !important;
}
.hero-copy{
padding:20px 16px 24px !important;
}
.hero h1{
font-size:28px !important;
}
.hero h1 strong{
font-size:41px !important;
}
.hero-model{
font-size:22px !important;
}
.hero-model b{
font-size:25px !important;
}
.hero-actions{
max-width:285px !important;
}
}
/* ---------------------------------------------------------
390–450px PREMIUM BALANCE
--------------------------------------------------------- */
@media(min-width:381px) and (max-width:450px){
.hero-bike{
height:225px !important;
min-height:225px !important;
}
.hero-copy{
padding-top:21px !important;
}
}
/* =========================================================
END W-65.23
========================================================= */
/* =========================================================
W-65.26 GALLERY UI
========================================================= */
.website-gallery-admin{
margin-top:20px;
}
.gallery-upload-row{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin:16px 0;
}
.gallery-upload-row input[type="file"]{
flex:1;
min-width:220px;
padding:10px;
border:1px solid #cfe0ea;
border-radius:10px;
background:#fff;
}
.admin-gallery-grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(150px,1fr));
gap:12px;
margin-top:16px;
}
.admin-gallery-item{
overflow:hidden;
border:1px solid #d7e7ef;
border-radius:14px;
background:#fff;
box-shadow:0 6px 18px rgba(3,105,161,.07);
}
.admin-gallery-item img{
width:100%;
height:125px;
object-fit:cover;
display:block;
}
.admin-gallery-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:8px;
}
.admin-gallery-meta span{
font-weight:800;
color:#075985;
}
.admin-gallery-meta .btn{
min-height:34px;
padding:7px 10px;
font-size:10px;
}
.gallery-empty{
padding:25px;
border:1px dashed #bed9e8;
border-radius:12px;
text-align:center;
color:#64748b;
}
/* PUBLIC GALLERY */
.public-gallery-section{
padding:25px 4%;
}
.public-gallery-shell{
max-width:1240px;
margin:auto;
padding:24px;
background:
linear-gradient(
145deg,
#ffffff,
#f0f9ff
);
border:1px solid #cfe8f5;
border-radius:20px;
box-shadow:0 14px 35px rgba(3,105,161,.08);
}
.public-gallery-head{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:15px;
margin-bottom:15px;
}
.public-gallery-head .eyebrow{
color:#0369a1 !important;
margin-bottom:5px;
}
.public-gallery-head h2{
margin:0;
color:#0f172a;
font-size:28px;
}
.public-gallery-counter{
padding:7px 11px;
background:#e0f2fe;
color:#075985;
border-radius:999px;
font-size:11px;
font-weight:800;
}
.public-gallery-main{
position:relative;
height:360px;
overflow:hidden;
border-radius:16px;
cursor:pointer;
background:#062f4f;
}
.public-gallery-main img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.gallery-fade-in{
animation:aquilGalleryFade .65s ease both;
}
@keyframes aquilGalleryFade{
from{
opacity:.15;
transform:scale(1.025);
}
to{
opacity:1;
transform:scale(1);
}
}
.public-gallery-overlay{
position:absolute;
left:16px;
right:16px;
bottom:16px;
padding:12px 14px;
border-radius:10px;
background:rgba(3,29,49,.72);
color:#fff;
text-align:center;
font-size:11px;
font-weight:900;
letter-spacing:.5px;
backdrop-filter:blur(6px);
}
.public-gallery-dots{
display:flex;
justify-content:center;
gap:6px;
padding-top:12px;
}
.public-gallery-dots button{
width:8px;
height:8px;
padding:0;
border:0;
border-radius:50%;
background:#bed9e8;
}
.public-gallery-dots button.active{
width:22px;
border-radius:999px;
background:#0ea5e9;
}
.public-gallery-empty{
text-align:center;
padding:30px;
}
.gallery-lightbox{
max-width:1000px;
}
.gallery-lightbox-main{
position:relative;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:15px;
}
.gallery-lightbox-main > img{
width:min(850px,85vw);
height:min(65vh,650px);
object-fit:contain;
background:#031d31;
border-radius:14px;
}
.gallery-lightbox-control{
flex:0 0 auto;
width:42px;
height:42px;
border:0;
border-radius:50%;
background:#075985;
color:#fff;
font-size:26px;
}
.gallery-lightbox-control:hover{
background:#0284c7;
}
.gallery-counter{
text-align:center;
margin-top:8px;
color:#526273;
font-weight:800;
font-size:11px;
}
.gallery-lightbox-thumbs{
display:flex;
gap:8px;
overflow-x:auto;
padding-top:12px;
}
.gallery-lightbox-thumbs img{
flex:0 0 72px;
width:72px;
height:55px;
object-fit:cover;
border-radius:8px;
border:2px solid transparent;
cursor:pointer;
}
.gallery-lightbox-thumbs img.active{
border-color:#0ea5e9;
}
@media(max-width:650px){
.public-gallery-section{
padding:15px 10px;
}
.public-gallery-shell{
padding:15px;
border-radius:17px;
}
.public-gallery-head{
align-items:center;
}
.public-gallery-head h2{
font-size:22px;
}
.public-gallery-main{
height:235px;
border-radius:13px;
}
.public-gallery-overlay{
left:10px;
right:10px;
bottom:10px;
padding:9px;
font-size:9px;
}
.gallery-lightbox{
padding:16px !important;
}
.gallery-lightbox-main > img{
width:calc(100vw - 82px);
height:58vh;
}
.gallery-lightbox-control{
width:34px;
height:34px;
font-size:21px;
}
.gallery-lightbox-thumbs img{
flex-basis:64px;
width:64px;
height:50px;
}
}
@media(prefers-reduced-motion:reduce){
.gallery-fade-in{
animation:none;
}
}
/* =========================================================
END W-65.26 GALLERY UI
========================================================= */
/* =========================================================
AQUIL MOTORS — W-65.29
PREMIUM SHOWROOM + SERVICE GALLERY UI
========================================================= */
.public-gallery-section{
padding:32px 4% !important;
background:
linear-gradient(
180deg,
#f0f9ff 0%,
#ffffff 100%
) !important;
}
.public-gallery-shell{
position:relative !important;
overflow:hidden !important;
max-width:1240px !important;
padding:26px !important;
background:
linear-gradient(
145deg,
#ffffff 0%,
#f8fcff 55%,
#eaf7fd 100%
) !important;
border:1px solid #c7e3f1 !important;
border-radius:24px !important;
box-shadow:
0 16px 42px rgba(3,105,161,.10),
0 3px 10px rgba(3,105,161,.05) !important;
}
.public-gallery-shell::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(
circle at top right,
rgba(14,165,233,.10),
transparent 32%
);
pointer-events:none;
}
.public-gallery-head{
position:relative !important;
z-index:2 !important;
margin-bottom:18px !important;
padding:2px 2px 0 !important;
}
.public-gallery-head .eyebrow{
margin-bottom:5px !important;
color:#0284c7 !important;
font-size:10px !important;
font-weight:900 !important;
letter-spacing:1.25px !important;
}
.public-gallery-head h2{
color:#062f4f !important;
font-size:30px !important;
font-weight:900 !important;
letter-spacing:-.45px !important;
}
.public-gallery-head .muted{
margin-top:5px !important;
color:#607286 !important;
font-size:12px !important;
}
.public-gallery-counter{
position:relative !important;
z-index:2 !important;
min-width:58px !important;
text-align:center !important;
background:#e0f2fe !important;
color:#075985 !important;
border:1px solid #b9ddec !important;
box-shadow:0 5px 14px rgba(3,105,161,.08) !important;
}
.public-gallery-main{
position:relative !important;
z-index:2 !important;
height:390px !important;
overflow:hidden !important;
border-radius:18px !important;
background:
linear-gradient(
135deg,
#062f4f,
#075985
) !important;
border:1px solid rgba(255,255,255,.16) !important;
box-shadow:
0 16px 35px rgba(3,47,79,.16) !important;
transition:
transform .22s ease,
box-shadow .22s ease !important;
}
.public-gallery-main:hover{
transform:translateY(-2px) !important;
box-shadow:
0 20px 42px rgba(3,47,79,.22) !important;
}
.public-gallery-main::after{
content:"";
position:absolute;
inset:0;
background:
linear-gradient(
180deg,
transparent 45%,
rgba(3,29,49,.18) 70%,
rgba(3,29,49,.82) 100%
);
pointer-events:none;
}
.public-gallery-main img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
transform:scale(1.001);
transition:
opacity .65s ease,
transform 1.2s ease,
filter .4s ease !important;
filter:
saturate(.98)
contrast(1.04) !important;
}
.public-gallery-main:hover img{
transform:scale(1.018) !important;
}
.gallery-fade-in{
animation:
aquilGalleryPremiumFade .72s ease both !important;
}
@keyframes aquilGalleryPremiumFade{
0%{
opacity:0;
transform:scale(1.025);
filter:
saturate(.78)
brightness(.96);
}
100%{
opacity:1;
transform:scale(1);
filter:
saturate(.98)
brightness(1);
}
}
.public-gallery-overlay{
left:18px !important;
right:18px !important;
bottom:16px !important;
z-index:4 !important;
display:flex !important;
justify-content:center !important;
align-items:center !important;
min-height:40px !important;
background:
rgba(3,29,49,.64) !important;
border:1px solid rgba(255,255,255,.20) !important;
color:#ffffff !important;
font-size:10px !important;
font-weight:900 !important;
letter-spacing:.8px !important;
backdrop-filter:blur(10px) !important;
box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
}
.public-gallery-dots{
position:relative !important;
z-index:4 !important;
min-height:16px !important;
}
.public-gallery-dots button{
transition:
width .2s ease,
background .2s ease,
transform .2s ease !important;
}
.public-gallery-dots button:hover{
transform:scale(1.15);
}
.public-gallery-dots button.active{
background:#0284c7 !important;
box-shadow:0 2px 8px rgba(2,132,199,.25);
}
/* ---------- LIGHTBOX ---------- */
.gallery-lightbox{
background:
linear-gradient(
145deg,
#ffffff,
#f4fbff
) !important;
border-top:5px solid #0ea5e9 !important;
border-radius:22px !important;
}
.gallery-lightbox-main{
margin-top:18px !important;
}
.gallery-lightbox-main > img{
box-shadow:
0 18px 40px rgba(0,0,0,.22) !important;
border:1px solid rgba(255,255,255,.15) !important;
}
.gallery-lightbox-control{
background:#075985 !important;
box-shadow:0 6px 18px rgba(3,47,79,.20) !important;
}
.gallery-lightbox-control:hover{
background:#0284c7 !important;
transform:scale(1.04);
}
.gallery-lightbox-thumbs{
scrollbar-width:thin;
padding-bottom:4px !important;
}
.gallery-lightbox-thumbs img{
transition:
transform .18s ease,
border-color .18s ease !important;
}
.gallery-lightbox-thumbs img:hover{
transform:translateY(-2px);
}
.gallery-lightbox-thumbs img.active{
border-color:#0ea5e9 !important;
box-shadow:0 3px 12px rgba(14,165,233,.24);
}
/* ---------- MOBILE ---------- */
@media(max-width:650px){
.public-gallery-section{
padding:
18px 10px
!important;
}
.public-gallery-shell{
padding:16px !important;
border-radius:18px !important;
}
.public-gallery-head{
align-items:center !important;
margin-bottom:13px !important;
}
.public-gallery-head h2{
font-size:22px !important;
line-height:1.05 !important;
}
.public-gallery-head .muted{
font-size:10px !important;
}
.public-gallery-counter{
min-width:52px !important;
padding:6px 9px !important;
font-size:10px !important;
}
.public-gallery-main{
height:245px !important;
border-radius:14px !important;
}
.public-gallery-main::after{
background:
linear-gradient(
180deg,
transparent 40%,
rgba(3,29,49,.25) 68%,
rgba(3,29,49,.86) 100%
) !important;
}
.public-gallery-overlay{
left:10px !important;
right:10px !important;
bottom:9px !important;
min-height:35px !important;
border-radius:9px !important;
font-size:8.5px !important;
letter-spacing:.65px !important;
}
.public-gallery-dots{
padding-top:9px !important;
}
.public-gallery-dots button{
width:7px !important;
height:7px !important;
}
.public-gallery-dots button.active{
width:19px !important;
}
.gallery-lightbox{
width:100% !important;
max-width:100% !important;
border-radius:18px !important;
}
.gallery-lightbox-main{
gap:5px !important;
}
.gallery-lightbox-main > img{
width:calc(100vw - 78px) !important;
height:55vh !important;
max-height:560px !important;
border-radius:12px !important;
}
.gallery-lightbox-control{
width:32px !important;
height:32px !important;
min-width:32px !important;
font-size:20px !important;
}
.gallery-lightbox-thumbs{
gap:6px !important;
}
.gallery-lightbox-thumbs img{
flex-basis:60px !important;
width:60px !important;
height:46px !important;
}
}
/* ---------- EXTRA SMALL ---------- */
@media(max-width:380px){
.public-gallery-shell{
padding:13px !important;
}
.public-gallery-main{
height:220px !important;
}
.public-gallery-head h2{
font-size:20px !important;
}
.gallery-lightbox-main > img{
width:calc(100vw - 72px) !important;
height:52vh !important;
}
}
/* =========================================================
END W-65.29
========================================================= */
/* =========================================================
W-65.32R2 — LOGO VISIBILITY
========================================================= */
.public-header .logo[data-brand-business]{
display:flex !important;
align-items:center !important;
gap:6px !important;
}
.public-header .logo[data-brand-business] [data-brand-logo]{
width:auto !important;
max-width:145px !important;
height:auto !important;
max-height:55px !important;
object-fit:contain !important;
flex:0 0 auto !important;
}
footer .footer-logo[data-brand-business]{
display:flex !important;
align-items:center !important;
gap:7px !important;
}
footer .footer-logo[data-brand-business] [data-brand-logo]{
width:auto !important;
max-width:170px !important;
height:auto !important;
max-height:60px !important;
object-fit:contain !important;
}
/* When actual logo exists, text fallback stays secondary. */
[data-brand-logo][src]:not([src=""]) + .logo-main,
[data-brand-logo][src]:not([src=""]) + .logo-main + .logo-sub{
display:none !important;
}
@media(max-width:650px){
.public-header .logo[data-brand-business] [data-brand-logo]{
max-width:118px !important;
max-height:42px !important;
}
footer .footer-logo[data-brand-business] [data-brand-logo]{
max-width:150px !important;
max-height:52px !important;
}
}
/* =========================================================
END W-65.32R2 LOGO
========================================================= */
/* W-66.52 PUBLIC GALLERY */
.public-gallery-section{
width:100%;
padding:38px 3.5% 18px;
}
.public-gallery-shell{
max-width:1240px;
margin:0 auto;
}
.public-gallery-main{
position:relative;
overflow:hidden;
border-radius:16px;
background:#fff;
border:1px solid var(--aquil-border,#bae6fd);
box-shadow:0 14px 40px rgba(2,132,199,.10);
cursor:pointer;
}
.public-gallery-main img{
display:block;
width:100%;
aspect-ratio:16/7;
object-fit:cover;
}
.public-gallery-overlay{
position:absolute;
left:0;
right:0;
bottom:0;
padding:18px;
color:#fff;
font-size:11px;
font-weight:900;
letter-spacing:1px;
text-align:center;
background:linear-gradient(transparent,rgba(0,0,0,.72));
}
.public-gallery-dots{
display:flex;
justify-content:center;
gap:7px;
margin-top:12px;
}
.public-gallery-dots button{
width:8px;
height:8px;
padding:0;
border:0;
border-radius:50%;
background:#bae6fd;
}
.public-gallery-dots button.active{
background:#0284c7;
}
.public-gallery-empty{
padding:35px 20px;
text-align:center;
border:1px dashed #bae6fd;
border-radius:14px;
background:#fff;
}
/* =========================================================
W-66.58 SHARE RATE LOGO
========================================================= */
.public-header .logo img[data-brand-logo],
.footer-logo img[data-brand-logo]{
display:block !important;
visibility:visible !important;
opacity:1 !important;
width:auto !important;
height:auto !important;
min-width:80px;
min-height:30px;
max-width:180px;
max-height:68px;
object-fit:contain;
}
.public-share-btn{
white-space:nowrap;
}
.offer-share-row{
display:flex;
justify-content:center;
gap:8px;
margin-top:12px;
}
.public-bike-share-btn{
width:100%;
grid-column:1/-1;
border-color:#0284c7 !important;
color:#0369a1 !important;
background:#fff !important;
}
.public-bike-share-btn:hover{
background:#e0f2fe !important;
transform:translateY(-1px);
}
.shared-bike-highlight{
box-shadow:
0 0 0 3px rgba(2,132,199,.24),
0 18px 45px rgba(2,132,199,.16);
}
[data-brand-review-link]{
white-space:nowrap;
}
/* =========================================================
W-66.60 PROMOTIONAL VIDEO
========================================================= */
.promotional-video-section{
width:100%;
padding:22px 3.5% 8px;
}
.promotional-video-shell{
max-width:1240px;
margin:0 auto;
}
.promotional-video-card{
position:relative;
overflow:hidden;
border-radius:18px;
background:#000;
box-shadow:
0 18px 48px rgba(15,23,42,.16);
}
.promotional-video{
display:block;
width:100%;
max-height:600px;
aspect-ratio:16/9;
object-fit:cover;
background:#000;
}
.promotional-video-sound{
position:absolute;
left:50%;
bottom:18px;
transform:translateX(-50%);
border:1px solid rgba(255,255,255,.7);
border-radius:999px;
padding:10px 16px;
background:rgba(0,0,0,.65);
color:#fff;
font-size:11px;
font-weight:900;
cursor:pointer;
backdrop-filter:blur(8px);
}
.promotional-video-dots{
position:absolute;
left:50%;
bottom:14px;
transform:translateX(-50%);
display:flex;
gap:6px;
pointer-events:none;
}
.promotional-video-dots span{
width:7px;
height:7px;
border-radius:50%;
background:rgba(255,255,255,.5);
}
.promotional-video-dots span.active{
background:#fff;
}
.website-video-upload-box{
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
padding:14px;
border:1px dashed #bae6fd;
border-radius:12px;
background:#f8fdff;
}
.website-video-admin-list{
display:grid;
gap:8px;
margin-top:14px;
}
.website-video-admin-row{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:12px 14px;
border:1px solid #dbeafe;
border-radius:10px;
background:#fff;
}
.website-video-admin-row small{
display:block;
margin-top:3px;
color:#64748b;
font-size:10px;
}
@media(max-width:650px){
.promotional-video-section{
padding-left:14px;
padding-right:14px;
}
.promotional-video-card{
border-radius:12px;
}
.promotional-video-sound{
bottom:12px;
font-size:10px;
}
}
/* ===== W-66.80 PUBLIC SERVICE ===== */
.public-service-section{
max-width:1240px;
margin:25px auto 40px;
padding:36px 28px;
background:#fff;
border:1px solid #e8e8e8;
border-radius:16px;
}
.public-service-inner{
display:flex;
flex-direction:column;
gap:25px;
}
.public-service-heading h2{
margin:4px 0 10px;
font-size:32px;
}
.public-service-main-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:18px;
}
.public-service-types{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}
.public-service-type{
border:1px solid #dfe5ea;
background:#f8fbfd;
border-radius:14px;
padding:20px;
text-align:left;
cursor:pointer;
transition:.2s ease;
}
.public-service-type:hover{
transform:translateY(-2px);
border-color:#b9cbd8;
box-shadow:0 10px 25px #00000012;
}
.public-service-type-icon{
display:block;
font-size:30px;
margin-bottom:12px;
}
.public-service-type strong{
display:block;
font-size:13px;
}
.public-service-type small{
display:block;
color:#6b7280;
margin-top:7px;
line-height:1.4;
}
.public-service-section-title{
margin-top:5px;
}
.public-service-section-title h3{
margin:4px 0 0;
}
.public-service-offer-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:12px;
}
.public-service-offer-card{
border:1px solid #e1e7ec;
border-radius:14px;
overflow:hidden;
background:#fff;
padding:0;
text-align:left;
cursor:pointer;
}
.public-service-offer-card img{
width:100%;
height:190px;
object-fit:cover;
display:block;
}
.public-service-offer-copy{
padding:14px;
}
.public-service-offer-copy strong{
display:block;
font-size:14px;
}
.public-service-offer-copy small{
display:block;
color:#666;
margin-top:6px;
line-height:1.45;
}
.public-service-offer-copy span{
display:block;
margin-top:10px;
font-size:10px;
font-weight:900;
}
.public-service-contact-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.public-service-contact-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:11px 16px;
border:1px solid #cfd7de;
border-radius:9px;
text-decoration:none;
font-size:11px;
font-weight:900;
}
.public-service-contact-btn.whatsapp{
background:#16a34a;
color:#fff;
border-color:#16a34a;
}
.public-service-offers-empty{
padding:20px;
background:#f8fbfd;
border-radius:12px;
border:1px solid #e2e8ed;
}
.service-website-admin{
margin-bottom:18px;
}
@media(max-width:800px){
.public-service-section{
margin:15px;
padding:25px 18px;
}
.public-service-types,
.public-service-offer-grid{
grid-template-columns:1fr;
}
}
/* ============================================================
W-66.83 SAME BIKE + SERVICE 3-CARD OFFER SLIDER
============================================================ */
.same-offer-slider{
width:100%;
position:relative;
}
.same-offer-track{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.same-offer-card{
min-width:0;
overflow:hidden;
background:#fff;
border:1px solid #dfe7ee;
border-radius:16px;
box-shadow:0 10px 25px #00000012;
}
.same-offer-image-button{
display:block;
width:100%;
border:0;
padding:0;
background:#f7fafc;
cursor:pointer;
}
.same-offer-image-button img{
display:block;
width:100%;
height:280px;
object-fit:cover;
}
.same-offer-no-image{
height:280px;
display:flex;
align-items:center;
justify-content:center;
font-weight:900;
letter-spacing:.08em;
}
.same-offer-info{
padding:14px;
}
.same-offer-info h3{
margin:0;
font-size:17px;
line-height:1.25;
}
.same-offer-info p{
margin:8px 0 0;
line-height:1.45;
font-size:13px;
color:#5f6b76;
}
.same-offer-actions{
display:flex;
flex-wrap:wrap;
gap:7px;
margin-top:13px;
padding:9px;
border-radius:10px;
background:#f5f8fb;
}
.small-offer-btn{
flex:1 1 auto;
min-height:38px;
padding:8px 10px;
font-size:10px;
white-space:nowrap;
}
.same-offer-slider-controls{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-top:16px;
}
.same-offer-arrow{
width:38px;
height:38px;
border-radius:50%;
border:1px solid #d5dee6;
background:#fff;
cursor:pointer;
font-size:24px;
line-height:1;
}
.same-offer-dots{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
}
.same-offer-dots button{
width:9px;
height:9px;
padding:0;
border:0;
border-radius:50%;
background:#cfd8df;
cursor:pointer;
}
.same-offer-dots button.active{
transform:scale(1.25);
}
@media(max-width:900px){
.same-offer-track{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:620px){
.same-offer-track{
grid-template-columns:1fr;
}
.same-offer-image-button img,
.same-offer-no-image{
height:240px;
}
.small-offer-btn{
flex:1 1 100%;
}
}
/* ============================================================
W-66.84
FULL POSTER + UNIFORM CARDS + ONE-LINE ACTION BUTTONS
Applied to BOTH Bike Offers and Service Offers.
============================================================ */
/* Every offer card uses the exact same vertical structure. */
.same-offer-track{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
align-items:stretch;
}
.same-offer-card{
min-width:0;
width:100%;
height:100%;
display:flex;
flex-direction:column;
overflow:hidden;
background:#fff;
border:1px solid #dfe7ee;
border-radius:16px;
box-shadow:0 10px 25px #00000012;
}
/* Fixed poster area for every card. */
.same-offer-image-button{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:340px;
min-height:340px;
border:0;
padding:0;
background:#f7fafc;
cursor:pointer;
overflow:hidden;
}
/* IMPORTANT: contain = complete poster visible, no crop. */
.same-offer-image-button img{
display:block;
width:100%;
height:100%;
object-fit:contain;
object-position:center;
}
/* Same internal height / spacing for every card. */
.same-offer-info{
display:flex;
flex:1;
flex-direction:column;
min-width:0;
min-height:150px;
padding:14px;
}
.same-offer-info h3{
margin:0;
min-height:42px;
font-size:16px;
line-height:1.3;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
.same-offer-info p{
margin:8px 0 0;
min-height:40px;
line-height:1.45;
font-size:12px;
color:#5f6b76;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden;
}
/* Keep all 3 buttons on one line and exactly equal width. */
.same-offer-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
align-items:center;
gap:7px;
width:100%;
margin-top:auto;
padding:8px;
border-radius:10px;
background:#f5f8fb;
}
.same-offer-actions .small-offer-btn{
width:100%;
min-width:0;
min-height:38px;
height:38px;
margin:0;
padding:7px 5px;
font-size:9px;
line-height:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
display:flex;
align-items:center;
justify-content:center;
}
/* Service offers use exactly the same card geometry. */
.service-same-offer-card{
height:100%;
}
.service-same-offer-card
.same-offer-image-button{
height:340px;
min-height:340px;
}
.service-same-offer-card
.same-offer-info{
min-height:150px;
}
/* Do not let service/bike legacy styles override the common buttons. */
.public-service-offer-card{
height:100%;
}
/* Keep arrows/dots outside the three-card row. */
.same-offer-slider-controls{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
margin-top:16px;
}
/* Keep the 3 buttons in one row even on smaller displays. */
@media(max-width:900px){
.same-offer-track{
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.same-offer-image-button,
.service-same-offer-card .same-offer-image-button{
height:260px;
min-height:260px;
}
.same-offer-info{
padding:10px;
min-height:125px;
}
.same-offer-info h3{
min-height:38px;
font-size:13px;
}
.same-offer-info p{
min-height:34px;
font-size:10px;
}
.same-offer-actions{
gap:4px;
padding:6px;
}
.same-offer-actions .small-offer-btn{
height:34px;
min-height:34px;
padding:5px 3px;
font-size:8px;
}
}
/* On phones, still keep the 3 buttons in ONE row. */
@media(max-width:620px){
.same-offer-track{
grid-template-columns:1fr;
}
.same-offer-image-button,
.service-same-offer-card .same-offer-image-button{
height:300px;
min-height:300px;
}
.same-offer-info{
min-height:130px;
}
.same-offer-actions{
grid-template-columns:repeat(3,minmax(0,1fr));
}
}
/* ============================================================
W-66.85
PUBLIC BIKE CATALOGUE
DESKTOP = 4 CARDS
MOBILE = 2 CARDS
CARD ACTIONS = 4 BUTTONS / ONE LINE
============================================================ */
/* ---------- CATALOGUE GRID ---------- */
#bikes .bike-grid,
.bike-grid{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:16px !important;
align-items:stretch;
}
/* ---------- UNIFORM BIKE CARD ---------- */
#bikes .bike-card,
.bike-card{
min-width:0;
width:100%;
height:100%;
display:flex;
flex-direction:column;
}
/* Keep bike image area uniform. */
#bikes .bike-image,
.bike-image{
width:100%;
}
/* Keep information area flexible so all cards
end at the same baseline. */
#bikes .bike-info,
.bike-info{
display:flex;
flex:1;
flex-direction:column;
min-width:0;
}
/* ---------- FOUR ACTION BUTTONS / ONE LINE ---------- */
#bikes .card-actions,
.card-actions{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:5px !important;
width:100%;
margin-top:auto;
align-items:stretch;
}
#bikes .card-actions .btn,
.card-actions .btn{
width:100% !important;
min-width:0;
min-height:38px;
height:38px;
margin:0;
padding:7px 4px !important;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:9px !important;
line-height:1;
}
/* Keep links visually identical to buttons. */
#bikes .card-actions a.btn{
text-decoration:none;
}
/* ---------- TABLET ---------- */
@media(max-width:900px){
#bikes .bike-grid,
.bike-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:12px !important;
}
#bikes .card-actions .btn,
.card-actions .btn{
min-height:36px;
height:36px;
padding:6px 3px !important;
font-size:8px !important;
}
}
/* ---------- MOBILE: EXACTLY 2 BIKES PER ROW ---------- */
@media(max-width:650px){
#bikes .bike-grid,
.bike-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
}
#bikes .bike-info,
.bike-info{
padding:10px;
}
#bikes .card-actions,
.card-actions{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
gap:3px !important;
}
#bikes .card-actions .btn,
.card-actions .btn{
min-height:34px;
height:34px;
padding:5px 2px !important;
font-size:7px !important;
border-radius:5px;
}
}
/* ---------- VERY SMALL PHONES ---------- */
@media(max-width:380px){
#bikes .bike-grid,
.bike-grid{
gap:7px !important;
}
#bikes .card-actions,
.card-actions{
gap:2px !important;
}
#bikes .card-actions .btn,
.card-actions .btn{
font-size:6px !important;
padding-left:1px !important;
padding-right:1px !important;
}
}
/* ============================================================
W-66.86 FINAL CATALOGUE ACTION ROW
Always reserve exactly 4 visible button slots.
============================================================ */
#bikes .card-actions,
.bike-card .card-actions{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-auto-flow:column;
gap:5px !important;
width:100% !important;
margin-top:auto !important;
align-items:stretch !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
min-width:0 !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:0 !important;
padding:6px 3px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
font-size:8px !important;
line-height:1 !important;
}
#bikes .card-actions .catalogue-action-watch:disabled,
.bike-card .card-actions .catalogue-action-watch:disabled{
opacity:.62 !important;
cursor:not-allowed !important;
}
/* Never allow SHARE to occupy a separate full-width row. */
#bikes .card-actions .public-bike-share-btn,
.bike-card .card-actions .public-bike-share-btn{
grid-column:auto !important;
grid-row:1 !important;
}
/* Mobile: 2 bikes per row, but still 4 buttons per bike
in one horizontal action row. */
@media(max-width:650px){
#bikes .bike-grid,
.bike-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
}
#bikes .card-actions,
.bike-card .card-actions{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-auto-flow:column !important;
gap:3px !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:34px !important;
min-height:34px !important;
padding:5px 2px !important;
font-size:6.5px !important;
border-radius:5px !important;
}
}
/* Very small screens still keep one line of 4 buttons. */
@media(max-width:380px){
#bikes .card-actions,
.bike-card .card-actions{
gap:2px !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
font-size:6px !important;
padding-left:1px !important;
padding-right:1px !important;
}
}
/* ============================================================
W-66.86 FINAL CATALOGUE ACTION ROW
Always reserve exactly 4 visible button slots.
============================================================ */
#bikes .card-actions,
.bike-card .card-actions{
display:grid !important;
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-auto-flow:column;
gap:5px !important;
width:100% !important;
margin-top:auto !important;
align-items:stretch !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
min-width:0 !important;
width:100% !important;
height:38px !important;
min-height:38px !important;
margin:0 !important;
padding:6px 3px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
font-size:8px !important;
line-height:1 !important;
}
#bikes .card-actions .catalogue-action-watch:disabled,
.bike-card .card-actions .catalogue-action-watch:disabled{
opacity:.62 !important;
cursor:not-allowed !important;
}
/* Never allow SHARE to occupy a separate full-width row. */
#bikes .card-actions .public-bike-share-btn,
.bike-card .card-actions .public-bike-share-btn{
grid-column:auto !important;
grid-row:1 !important;
}
/* Mobile: 2 bikes per row, but still 4 buttons per bike
in one horizontal action row. */
@media(max-width:650px){
#bikes .bike-grid,
.bike-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
}
#bikes .card-actions,
.bike-card .card-actions{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
grid-auto-flow:column !important;
gap:3px !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:34px !important;
min-height:34px !important;
padding:5px 2px !important;
font-size:6.5px !important;
border-radius:5px !important;
}
}
/* Very small screens still keep one line of 4 buttons. */
@media(max-width:380px){
#bikes .card-actions,
.bike-card .card-actions{
gap:2px !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
font-size:6px !important;
padding-left:1px !important;
padding-right:1px !important;
}
}
/* ============================================================
W-66.87
CATALOGUE ACTIONS = 2 x 2
MORE INFO | BUY NOW
WATCH VIDEO | SHARE
============================================================ */
#bikes .card-actions,
.bike-card .card-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,auto) !important;
grid-auto-flow:row !important;
gap:7px !important;
width:100% !important;
margin-top:auto !important;
align-items:stretch !important;
}
/* Every action gets enough width to show its complete label. */
#bikes .card-actions > *,
.bike-card .card-actions > *{
width:100% !important;
min-width:0 !important;
height:42px !important;
min-height:42px !important;
margin:0 !important;
padding:8px 6px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
font-size:10px !important;
line-height:1.1 !important;
}
/* Do not force SHARE into a separate row. */
#bikes .card-actions .public-bike-share-btn,
.bike-card .card-actions .public-bike-share-btn{
grid-column:auto !important;
grid-row:auto !important;
}
/* Disabled WATCH VIDEO keeps its reserved position. */
#bikes .card-actions .catalogue-action-watch:disabled,
.bike-card .card-actions .catalogue-action-watch:disabled{
opacity:.6 !important;
cursor:not-allowed !important;
}
/* ============================================================
DESKTOP
4 bikes per row
============================================================ */
@media(min-width:901px){
#bikes .bike-grid,
.bike-grid{
grid-template-columns:
repeat(4,minmax(0,1fr)) !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:40px !important;
min-height:40px !important;
font-size:9px !important;
}
}
/* ============================================================
TABLET
2 bikes per row
============================================================ */
@media(max-width:900px){
#bikes .bike-grid,
.bike-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:12px !important;
}
#bikes .card-actions,
.bike-card .card-actions{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:42px !important;
min-height:42px !important;
font-size:9px !important;
padding:8px 5px !important;
}
}
/* ============================================================
MOBILE
2 bikes per row
2 x 2 buttons per bike
============================================================ */
@media(max-width:650px){
#bikes .bike-grid,
.bike-grid{
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
}
#bikes .card-actions,
.bike-card .card-actions{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
grid-template-rows:
repeat(2,42px) !important;
gap:5px !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:42px !important;
min-height:42px !important;
padding:7px 4px !important;
font-size:8px !important;
border-radius:6px !important;
white-space:nowrap !important;
overflow:visible !important;
}
}
/* ============================================================
VERY SMALL MOBILE
Keep complete words visible.
============================================================ */
@media(max-width:380px){
#bikes .card-actions,
.bike-card .card-actions{
gap:4px !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:40px !important;
min-height:40px !important;
padding:6px 3px !important;
font-size:7.5px !important;
}
}
/* ============================================================
W-66.88
COMPACT CATALOGUE ACTION BUTTONS
============================================================ */
#bikes .card-actions,
.bike-card .card-actions{
gap:6px !important;
}
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:38px !important;
min-height:38px !important;
padding:6px 7px !important;
border-width:1px !important;
border-radius:6px !important;
font-size:9px !important;
letter-spacing:0 !important;
}
/* ============================================================
SHOW 3 BIKE THUMBNAILS CLEARLY
============================================================ */
#bikes .premium-card-gallery .card-thumbnails{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:6px !important;
width:100% !important;
height:68px !important;
overflow-x:hidden !important;
overflow-y:hidden !important;
padding:4px !important;
}
#bikes .premium-card-gallery
.card-thumbnails img{
width:100% !important;
min-width:0 !important;
height:58px !important;
object-fit:contain !important;
border-radius:6px !important;
display:block !important;
}
/* Keep the gallery itself compact and uniform. */
#bikes .bike-image.premium-card-gallery{
overflow:hidden !important;
}
/* ============================================================
MOBILE
3 THUMBNAILS STILL VISIBLE
============================================================ */
@media(max-width:650px){
#bikes .card-actions > *,
.bike-card .card-actions > *{
height:36px !important;
min-height:36px !important;
padding:5px 6px !important;
font-size:8px !important;
border-radius:5px !important;
}
#bikes .premium-card-gallery .card-thumbnails{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:4px !important;
height:62px !important;
padding:3px !important;
}
#bikes .premium-card-gallery
.card-thumbnails img{
height:54px !important;
}
}
/* ============================================================
W-66.89
MAIN BIKE IMAGE -> COMPLETE INFO
VIDEO -> SAME-PAGE POPUP
============================================================ */
#bikes .bike-image.premium-card-gallery{
cursor:pointer !important;
}
#bikes .bike-image.premium-card-gallery:focus-visible{
outline:2px solid var(--aquil-sky-dark,#0284c7) !important;
outline-offset:2px;
}
/* Video modal */
.catalogue-video-modal{
width:min(900px,96vw) !important;
}
.catalogue-video-frame{
width:100%;
aspect-ratio:16/9;
margin-top:15px;
overflow:hidden;
border-radius:12px;
background:#000;
}
.catalogue-video-frame iframe,
.catalogue-video-html5{
width:100%;
height:100%;
display:block;
border:0;
background:#000;
object-fit:contain;
}
@media(max-width:650px){
.catalogue-video-modal{
padding:18px !important;
}
.catalogue-video-frame{
aspect-ratio:16/10;
}
}
/* ============================================================
W-66.90 DIRECT MAIN BIKE IMAGE TAP
============================================================ */
#bikes .bike-image.premium-card-gallery > img[id^="cardMainImage_"]{
cursor:pointer !important;
touch-action:manipulation !important;
}
#bikes .bike-image.premium-card-gallery > img[id^="cardMainImage_"]:focus-visible{
outline:2px solid var(--aquil-sky-dark,#0284c7) !important;
outline-offset:3px;
}
/* ============================================================
W-66.93.1 PUBLIC SERVICE TIMING
============================================================ */
.public-service-timing{
display:inline-flex;
align-items:center;
gap:9px;
margin-top:12px;
padding:8px 12px;
border:1px solid #cfe7f5;
border-radius:9px;
background:#f5fbff;
}
.public-service-timing span{
font-size:9px;
font-weight:900;
letter-spacing:1px;
color:#64748b;
}
.public-service-timing strong{
font-size:12px;
color:#0369a1;
}
@media(max-width:650px){
.public-service-timing{
width:max-content;
max-width:100%;
padding:7px 10px;
}
.public-service-timing span{
font-size:8px;
}
.public-service-timing strong{
font-size:11px;
}
}
/* W-66.94.1 service date availability */
#ps_date{
cursor:pointer;
}
/* ============================================================
W-66.95 CUSTOM SERVICE BOOKING CALENDAR
FULL DATE = GREY + DISABLED
============================================================ */
.service-booking-calendar-wrap{
width:100%;
margin-top:6px;
}
.service-calendar{
width:100%;
padding:12px;
border:1px solid #dbe5ec;
border-radius:12px;
background:#fff;
}
.service-calendar-head{
display:grid;
grid-template-columns:38px 1fr 38px;
align-items:center;
gap:8px;
margin-bottom:10px;
}
.service-calendar-head strong{
text-align:center;
font-size:14px;
font-weight:900;
}
.service-calendar-nav{
width:34px;
height:34px;
border:1px solid #d8e1e8;
border-radius:8px;
background:#fff;
cursor:pointer;
font-size:20px;
line-height:1;
}
.service-calendar-weekdays{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:4px;
margin-bottom:5px;
}
.service-calendar-weekdays span{
text-align:center;
font-size:8px;
font-weight:900;
color:#7b8791;
letter-spacing:.04em;
}
.service-calendar-grid{
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:4px;
}
.service-calendar-day,
.service-calendar-empty{
min-height:46px;
}
.service-calendar-day{
border:1px solid #e0e7ed;
border-radius:7px;
background:#fff;
cursor:pointer;
padding:4px 2px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:1px;
}
.service-calendar-day span{
font-size:12px;
font-weight:800;
}
.service-calendar-day small{
font-size:7px;
line-height:1;
font-weight:800;
color:#64748b;
}
.service-calendar-day:hover:not(:disabled){
border-color:#38a3d9;
background:#f0f9ff;
}
.service-calendar-day.selected{
border-color:#0284c7;
background:#e0f2fe;
box-shadow:inset 0 0 0 1px #0284c7;
}
.service-calendar-day.full{
background:#eef1f4;
border-color:#d7dce1;
color:#98a1a9;
cursor:not-allowed;
opacity:.58;
}
.service-calendar-day.full small{
color:#8b949c;
}
.service-calendar-day.past{
background:#f7f7f7;
color:#b2b7bb;
cursor:not-allowed;
opacity:.55;
}
.service-calendar-note{
display:flex;
align-items:center;
justify-content:center;
gap:7px;
margin-top:10px;
font-size:9px;
color:#697681;
}
.service-calendar-legend-full{
display:inline-flex;
align-items:center;
justify-content:center;
padding:2px 6px;
border-radius:4px;
background:#eef1f4;
color:#8d969e;
font-weight:900;
}
@media(max-width:650px){
.service-calendar{
padding:9px;
}
.service-calendar-day,
.service-calendar-empty{
min-height:42px;
}
.service-calendar-day span{
font-size:11px;
}
.service-calendar-day small{
font-size:6px;
}
.service-calendar-head strong{
font-size:13px;
}
}
/* ============================================================
W-66.96
PUBLIC SERVICE BOOKING MODAL - HIGH CONTRAST
============================================================ */
/* Keep backdrop translucent, but make the actual form card
solid and readable. */
#enquiryModal{
background:rgba(5,20,35,.68) !important;
}
#enquiryModal .modal-card{
background:#ffffff !important;
color:#102033 !important;
border:1px solid #d7e2ea !important;
box-shadow:0 24px 60px rgba(0,0,0,.28) !important;
}
/* Heading and descriptive text */
#enquiryModal .modal-card h1,
#enquiryModal .modal-card h2,
#enquiryModal .modal-card h3{
color:#08243d !important;
opacity:1 !important;
}
#enquiryModal .modal-card p,
#enquiryModal .modal-card .muted{
color:#526272 !important;
opacity:1 !important;
}
/* Form labels */
#enquiryModal .modal-card label{
color:#16283a !important;
font-weight:800 !important;
opacity:1 !important;
}
/* All text inputs */
#enquiryModal .modal-card input,
#enquiryModal .modal-card select,
#enquiryModal .modal-card textarea{
background:#ffffff !important;
color:#122235 !important;
border:1px solid #b9cad7 !important;
opacity:1 !important;
box-shadow:none !important;
}
/* Placeholder contrast */
#enquiryModal .modal-card input::placeholder,
#enquiryModal .modal-card textarea::placeholder{
color:#82909d !important;
opacity:1 !important;
}
/* Focus state */
#enquiryModal .modal-card input:focus,
#enquiryModal .modal-card select:focus,
#enquiryModal .modal-card textarea:focus{
outline:none !important;
border-color:#0284c7 !important;
box-shadow:0 0 0 2px rgba(2,132,199,.12) !important;
}
/* Select option readability */
#enquiryModal .modal-card option{
background:#ffffff !important;
color:#122235 !important;
}
/* Calendar wrapper */
#enquiryModal .service-booking-calendar-wrap{
background:#ffffff !important;
color:#122235 !important;
}
/* Calendar itself */
#enquiryModal .service-calendar{
background:#ffffff !important;
border:1px solid #c9d7e2 !important;
color:#122235 !important;
}
/* Calendar month heading */
#enquiryModal .service-calendar-head strong{
color:#102a40 !important;
}
/* Calendar navigation */
#enquiryModal .service-calendar-nav{
background:#ffffff !important;
color:#163044 !important;
border:1px solid #bdcbd6 !important;
}
/* Weekday labels */
#enquiryModal .service-calendar-weekdays span{
color:#596b79 !important;
}
/* Normal dates */
#enquiryModal .service-calendar-day{
background:#ffffff !important;
color:#1a2b3a !important;
border:1px solid #d3dee6 !important;
}
/* Date number */
#enquiryModal .service-calendar-day span{
color:#172b3c !important;
}
/* Booking count */
#enquiryModal .service-calendar-day small{
color:#647482 !important;
}
/* Selected date */
#enquiryModal .service-calendar-day.selected{
background:#e0f2fe !important;
color:#075985 !important;
border-color:#0284c7 !important;
}
/* FULL date must remain clearly grey/faded */
#enquiryModal .service-calendar-day.full{
background:#e5e9ed !important;
color:#8b949e !important;
border-color:#cdd4da !important;
opacity:.75 !important;
}
/* Past date */
#enquiryModal .service-calendar-day.past{
background:#f1f3f5 !important;
color:#9ba4ac !important;
border-color:#dfe3e6 !important;
opacity:.65 !important;
}
/* Calendar footer note */
#enquiryModal .service-calendar-note{
color:#586b79 !important;
}
#enquiryModal .service-calendar-legend-full{
background:#e5e9ed !important;
color:#717b84 !important;
}
/* Close button */
#enquiryModal .modal-close{
color:#263746 !important;
background:#f3f6f8 !important;
border:1px solid #d3dde4 !important;
}
/* Submit button stays high contrast */
#enquiryModal button[type="submit"]{
color:#ffffff !important;
opacity:1 !important;
}
/* Validation/status text */
#enquiryModal .form-status{
opacity:1 !important;
}
@media(max-width:650px){
#enquiryModal{
background:rgba(5,20,35,.72) !important;
}
#enquiryModal .modal-card{
color:#102033 !important;
}
#enquiryModal .modal-card label{
font-size:11px !important;
}
#enquiryModal .modal-card input,
#enquiryModal .modal-card select,
#enquiryModal .modal-card textarea{
color:#122235 !important;
background:#ffffff !important;
}
}
/* ============================================================
W-66.97 FORCE BRAND LOGO VISIBILITY
============================================================ */
.logo{
position:relative;
align-items:flex-start;
}
.logo > img[data-brand-logo],
.footer-logo > img[data-brand-logo]{
display:block !important;
visibility:visible !important;
opacity:1 !important;
width:auto !important;
height:auto !important;
max-width:170px !important;
max-height:60px !important;
object-fit:contain !important;
object-position:left center !important;
flex:0 0 auto !important;
position:relative !important;
z-index:5 !important;
}
/* Header logo */
.public-header .logo > img[data-brand-logo]{
max-width:145px !important;
max-height:55px !important;
}
/* When actual image is loaded, hide only the old text fallback. */
/* W-66.99: keep logo text fallback harmless; direct image SRC is primary. */
/* Prevent accidental clipping. */
.public-header .logo{
min-width:150px !important;
min-height:55px !important;
overflow:visible !important;
}
.footer-logo{
min-height:60px !important;
overflow:visible !important;
}
@media(max-width:650px){
.public-header .logo > img[data-brand-logo]{
max-width:125px !important;
max-height:48px !important;
}
.public-header .logo{
min-width:130px !important;
min-height:50px !important;
}
}
/* ============================================================
W-67.00
HEADER = LOGO BOX + SHOWROOM NAME BOX
============================================================ */
.public-brand-wrap{
display:flex !important;
align-items:center !important;
gap:12px !important;
min-width:230px !important;
width:auto !important;
height:62px !important;
flex:0 0 auto !important;
text-decoration:none !important;
overflow:visible !important;
}
/* Small/square logo area */
.public-brand-logo-box{
width:58px !important;
height:58px !important;
min-width:58px !important;
min-height:58px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
border-radius:8px !important;
background:#ffffff !important;
flex:0 0 58px !important;
}
/* Actual uploaded logo */
.public-brand-logo-box img[data-brand-logo]{
display:block !important;
visibility:visible !important;
opacity:1 !important;
width:52px !important;
height:52px !important;
max-width:52px !important;
max-height:52px !important;
object-fit:contain !important;
object-position:center !important;
}
/* Long showroom-name area */
.public-brand-name{
display:flex !important;
align-items:center !important;
width:auto !important;
min-width:145px !important;
max-width:190px !important;
min-height:38px !important;
padding:7px 12px !important;
border-radius:7px !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
font-size:17px !important;
line-height:1 !important;
font-weight:900 !important;
letter-spacing:.2px !important;
color:#10243a !important;
background:#f5f9fc !important;
border:1px solid #d7e4ee !important;
}
/* Do not apply the old stacked-logo rules to new brand wrapper. */
.public-brand-wrap .logo-main,
.public-brand-wrap .logo-sub{
display:none !important;
}
/* Header must have room for separate blocks. */
.public-header{
overflow:visible !important;
}
@media(max-width:900px){
.public-brand-wrap{
min-width:205px !important;
gap:8px !important;
}
.public-brand-logo-box{
width:52px !important;
height:52px !important;
min-width:52px !important;
min-height:52px !important;
flex-basis:52px !important;
}
.public-brand-logo-box img[data-brand-logo]{
width:47px !important;
height:47px !important;
max-width:47px !important;
max-height:47px !important;
}
.public-brand-name{
min-width:130px !important;
max-width:165px !important;
font-size:14px !important;
padding:7px 9px !important;
}
}
@media(max-width:650px){
.public-brand-wrap{
min-width:0 !important;
gap:6px !important;
height:50px !important;
}
.public-brand-logo-box{
width:45px !important;
height:45px !important;
min-width:45px !important;
min-height:45px !important;
flex-basis:45px !important;
border-radius:6px !important;
}
.public-brand-logo-box img[data-brand-logo]{
width:40px !important;
height:40px !important;
max-width:40px !important;
max-height:40px !important;
}
.public-brand-name{
min-width:0 !important;
max-width:125px !important;
min-height:32px !important;
padding:6px 8px !important;
font-size:11px !important;
border-radius:6px !important;
}
}
/* ============================================================
W-67.01
SHOWROOM NAME = PLAIN BOLD TEXT
No box / no background / no border
============================================================ */
.public-brand-name{
display:block !important;
width:auto !important;
min-width:0 !important;
max-width:none !important;
min-height:0 !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
border-radius:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#10243a !important;
font-size:18px !important;
line-height:1.1 !important;
font-weight:900 !important;
letter-spacing:.2px !important;
white-space:nowrap !important;
overflow:visible !important;
text-overflow:clip !important;
}
@media(max-width:900px){
.public-brand-name{
font-size:15px !important;
}
}
@media(max-width:650px){
.public-brand-name{
font-size:12px !important;
min-width:0 !important;
max-width:none !important;
padding:0 !important;
}
}
/* ============================================================
W-67.02
FINAL PUBLIC HEADER
LOGO | SHOWROOM NAME | NAV | LOGIN
MOBILE: LOGO | NAME | LOGIN | MENU
============================================================ */
.public-header{
display:flex !important;
align-items:center !important;
gap:18px !important;
overflow:visible !important;
}
/* Brand area */
.public-brand-wrap{
display:flex !important;
align-items:center !important;
gap:10px !important;
flex:0 0 auto !important;
min-width:220px !important;
height:60px !important;
text-decoration:none !important;
}
/* Logo box */
.public-brand-logo-box{
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
flex:0 0 48px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
overflow:hidden !important;
border-radius:6px !important;
background:#ffffff !important;
}
/* Actual logo image */
.public-brand-logo-box img[data-brand-logo]{
display:block !important;
visibility:visible !important;
opacity:1 !important;
width:43px !important;
height:43px !important;
max-width:43px !important;
max-height:43px !important;
object-fit:contain !important;
object-position:center !important;
}
/* Plain bold showroom name — NO BOX */
.public-brand-name{
display:block !important;
width:auto !important;
min-width:0 !important;
max-width:180px !important;
padding:0 !important;
margin:0 !important;
border:0 !important;
background:transparent !important;
box-shadow:none !important;
color:#10243a !important;
font-size:17px !important;
line-height:1.1 !important;
font-weight:900 !important;
letter-spacing:.1px !important;
white-space:nowrap !important;
}
/* Navigation takes the central space */
.public-nav{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:26px !important;
flex:1 1 auto !important;
min-width:0 !important;
}
/* Login button on far right */
.public-login-btn{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
flex:0 0 auto !important;
min-width:72px !important;
height:34px !important;
padding:0 13px !important;
border-radius:7px !important;
border:1px solid #0b78ad !important;
background:#0b78ad !important;
color:#ffffff !important;
font-size:10px !important;
font-weight:900 !important;
line-height:1 !important;
letter-spacing:.2px !important;
text-decoration:none !important;
}
/* Keep login on one line */
.public-login-btn:hover{
opacity:.92 !important;
}
/* Existing sales/service contact area should not push
the login button out of the header. */
.header-contact{
flex:0 0 auto !important;
}
/* ============================================================
MOBILE
LOGO | SHOWROOM NAME | LOGIN | MENU
============================================================ */
@media(max-width:900px){
.public-header{
gap:9px !important;
}
.public-brand-wrap{
min-width:0 !important;
flex:1 1 auto !important;
gap:7px !important;
}
.public-brand-name{
font-size:14px !important;
max-width:150px !important;
}
.public-login-btn{
min-width:64px !important;
height:32px !important;
padding:0 10px !important;
font-size:9px !important;
}
.header-contact{
display:none !important;
}
.public-nav{
display:none !important;
}
.mobile-menu{
flex:0 0 auto !important;
}
}
@media(max-width:650px){
.public-header{
padding-left:10px !important;
padding-right:10px !important;
gap:6px !important;
}
.public-brand-wrap{
gap:6px !important;
}
.public-brand-logo-box{
width:42px !important;
height:42px !important;
min-width:42px !important;
min-height:42px !important;
flex-basis:42px !important;
}
.public-brand-logo-box img[data-brand-logo]{
width:37px !important;
height:37px !important;
max-width:37px !important;
max-height:37px !important;
}
.public-brand-name{
font-size:11px !important;
max-width:120px !important;
}
.public-login-btn{
min-width:58px !important;
height:30px !important;
padding:0 8px !important;
font-size:8px !important;
}
.mobile-menu{
width:34px !important;
min-width:34px !important;
padding:0 !important;
}
}
/* ============================================================
W-67.04.2 MOBILE MAIN OFFER
EXACTLY 2 POSTERS PER VIEW
============================================================ */
@media(max-width:650px){
#offers .same-offer-track,
.same-offer-track{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
}
#offers .same-offer-card,
.same-offer-card{
min-width:0 !important;
width:100% !important;
}
}
/* ============================================================
W-67.05.1
OFFER TITLE + DESCRIPTION MUST ALWAYS BE VISIBLE
============================================================ */
/* Card must be a complete vertical structure. */
.same-offer-card{
display:flex !important;
flex-direction:column !important;
height:auto !important;
min-height:0 !important;
overflow:hidden !important;
}
/* Full poster remains visible. */
.same-offer-image-button{
display:flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
height:340px !important;
min-height:340px !important;
overflow:hidden !important;
flex:0 0 340px !important;
}
.same-offer-image-button img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:contain !important;
object-position:center !important;
opacity:1 !important;
visibility:visible !important;
}
/* Text section must occupy its own visible area. */
.same-offer-info{
display:flex !important;
flex:0 0 auto !important;
flex-direction:column !important;
width:100% !important;
min-width:0 !important;
min-height:125px !important;
padding:14px !important;
background:#ffffff !important;
color:#102033 !important;
opacity:1 !important;
visibility:visible !important;
}
/* OFFER TITLE */
.same-offer-info h3{
display:block !important;
width:100% !important;
min-height:0 !important;
margin:0 !important;
padding:0 !important;
color:#102033 !important;
font-size:16px !important;
font-weight:900 !important;
line-height:1.3 !important;
opacity:1 !important;
visibility:visible !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
-webkit-line-clamp:unset !important;
-webkit-box-orient:initial !important;
}
/* OFFER DESCRIPTION */
.same-offer-info p{
display:block !important;
width:100% !important;
min-height:0 !important;
margin:7px 0 0 !important;
padding:0 !important;
color:#526272 !important;
font-size:12px !important;
font-weight:500 !important;
line-height:1.45 !important;
opacity:1 !important;
visibility:visible !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
-webkit-line-clamp:unset !important;
-webkit-box-orient:initial !important;
}
/* Buttons remain at the bottom of the same card. */
.same-offer-actions{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
width:100% !important;
margin-top:auto !important;
padding:8px !important;
gap:7px !important;
background:#f5f8fb !important;
}
.same-offer-actions .small-offer-btn{
width:100% !important;
min-width:0 !important;
min-height:38px !important;
height:38px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:7px 5px !important;
color:inherit !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
}
/* ============================================================
MOBILE
2 POSTERS PER VIEW
TEXT STILL VISIBLE
============================================================ */
@media(max-width:650px){
.same-offer-track{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:10px !important;
width:100% !important;
}
.same-offer-card{
width:100% !important;
min-width:0 !important;
height:auto !important;
}
.same-offer-image-button{
height:230px !important;
min-height:230px !important;
flex-basis:230px !important;
}
.same-offer-info{
min-height:105px !important;
padding:10px !important;
}
.same-offer-info h3{
font-size:12px !important;
line-height:1.25 !important;
}
.same-offer-info p{
margin-top:5px !important;
font-size:9px !important;
line-height:1.35 !important;
}
.same-offer-actions{
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:4px !important;
padding:6px !important;
}
.same-offer-actions .small-offer-btn{
height:34px !important;
min-height:34px !important;
padding:5px 3px !important;
font-size:8px !important;
}
}
/* ============================================================
DESKTOP
3 POSTERS PER VIEW
============================================================ */
@media(min-width:651px){
.same-offer-track{
display:grid !important;
grid-template-columns:
repeat(3,minmax(0,1fr)) !important;
gap:16px !important;
}
}
/* ============================================================
W-67.07.1
AUTO ENQUIRY = SMALL + SEMI-TRANSPARENT + HIGH CONTRAST
Only automatic enquiry popup is affected.
============================================================ */
#enquiryModal.auto-enquiry-mode{
background:rgba(15,23,42,.46) !important;
padding:12px !important;
}
#enquiryModal.auto-enquiry-mode .modal-card{
width:min(440px,92vw) !important;
max-height:82vh !important;
padding:19px !important;
border-radius:13px !important;
border:1px solid rgba(2,132,199,.28) !important;
background:rgba(255,255,255,.94) !important;
backdrop-filter:blur(10px) !important;
-webkit-backdrop-filter:blur(10px) !important;
color:#0f172a !important;
box-shadow:
0 18px 50px rgba(2,132,199,.20) !important;
}
#enquiryModal.auto-enquiry-mode .modal-card h2,
#enquiryModal.auto-enquiry-mode .modal-card h3{
color:#08243d !important;
font-weight:900 !important;
}
#enquiryModal.auto-enquiry-mode .modal-card p.muted{
color:#475569 !important;
opacity:1 !important;
}
#enquiryModal.auto-enquiry-mode .form-grid-public{
gap:9px !important;
margin-top:13px !important;
}
#enquiryModal.auto-enquiry-mode .form-grid-public label{
color:#172b3d !important;
font-size:10px !important;
font-weight:900 !important;
}
#enquiryModal.auto-enquiry-mode .form-grid-public input,
#enquiryModal.auto-enquiry-mode .form-grid-public select,
#enquiryModal.auto-enquiry-mode .form-grid-public textarea{
margin-top:4px !important;
padding:8px 9px !important;
min-height:34px !important;
border:1px solid #b9cad7 !important;
border-radius:6px !important;
background:rgba(255,255,255,.96) !important;
color:#0f172a !important;
font-size:11px !important;
font-weight:600 !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public input::placeholder,
#enquiryModal.auto-enquiry-mode
.form-grid-public textarea::placeholder{
color:#64748b !important;
opacity:1 !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public input:focus,
#enquiryModal.auto-enquiry-mode
.form-grid-public select:focus,
#enquiryModal.auto-enquiry-mode
.form-grid-public textarea:focus{
border-color:#0284c7 !important;
outline:none !important;
box-shadow:
0 0 0 2px rgba(2,132,199,.12) !important;
}
#enquiryModal.auto-enquiry-mode .submit-btn{
margin-top:11px !important;
min-height:37px !important;
padding:9px 12px !important;
font-size:10px !important;
font-weight:900 !important;
background:#0284c7 !important;
color:#ffffff !important;
}
#enquiryModal.auto-enquiry-mode .modal-close{
top:7px !important;
right:9px !important;
width:29px !important;
height:29px !important;
border-radius:50% !important;
background:#eef5f9 !important;
color:#172b3d !important;
font-size:22px !important;
line-height:1 !important;
}
#enquiryModal.auto-enquiry-mode .form-status{
color:#334155 !important;
font-size:10px !important;
font-weight:700 !important;
}
@media(max-width:650px){
#enquiryModal.auto-enquiry-mode{
padding:9px !important;
}
#enquiryModal.auto-enquiry-mode .modal-card{
width:min(390px,94vw) !important;
padding:15px !important;
max-height:86vh !important;
}
#enquiryModal.auto-enquiry-mode .modal-card h2{
font-size:19px !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public{
gap:7px !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public label{
font-size:9px !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public input,
#enquiryModal.auto-enquiry-mode
.form-grid-public select,
#enquiryModal.auto-enquiry-mode
.form-grid-public textarea{
padding:7px 8px !important;
min-height:32px !important;
font-size:10px !important;
}
}
/* ============================================================
W-67.07.2
AUTO ENQUIRY FINAL UI
Small + centered + semi-transparent + high contrast
NORMAL ENQUIRY POPUP IS NOT AFFECTED
============================================================ */
/* Screen backdrop */
#enquiryModal.auto-enquiry-mode{
position:fixed !important;
inset:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:12px !important;
background:rgba(15,23,42,.46) !important;
}
/* Compact centered card */
#enquiryModal.auto-enquiry-mode .modal-card{
position:relative !important;
width:min(420px,92vw) !important;
max-width:420px !important;
max-height:82vh !important;
margin:auto !important;
padding:18px !important;
overflow:auto !important;
border-radius:14px !important;
border:1px solid rgba(2,132,199,.28) !important;
/*
* Semi-transparent white surface while keeping
* text highly readable.
*/
background:rgba(255,255,255,.93) !important;
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
color:#0f172a !important;
box-shadow:
0 20px 55px rgba(2,132,199,.22) !important;
}
/* Heading */
#enquiryModal.auto-enquiry-mode .modal-card h2{
margin:4px 0 6px !important;
color:#08243d !important;
font-size:21px !important;
line-height:1.15 !important;
font-weight:900 !important;
opacity:1 !important;
}
/* Eyebrow */
#enquiryModal.auto-enquiry-mode .modal-card .eyebrow{
margin:0 0 4px !important;
color:#0369a1 !important;
font-size:9px !important;
font-weight:900 !important;
letter-spacing:1px !important;
opacity:1 !important;
}
/* Description */
#enquiryModal.auto-enquiry-mode .modal-card > .muted{
margin:0 0 10px !important;
color:#475569 !important;
font-size:10px !important;
line-height:1.35 !important;
opacity:1 !important;
}
/* Compact form grid */
#enquiryModal.auto-enquiry-mode .form-grid-public{
display:grid !important;
grid-template-columns:
repeat(2,minmax(0,1fr)) !important;
gap:8px !important;
margin-top:10px !important;
}
/* Labels */
#enquiryModal.auto-enquiry-mode
.form-grid-public label{
display:block !important;
color:#16283a !important;
font-size:9px !important;
line-height:1.2 !important;
font-weight:900 !important;
opacity:1 !important;
}
/* Inputs / selects / textarea */
#enquiryModal.auto-enquiry-mode
.form-grid-public input,
#enquiryModal.auto-enquiry-mode
.form-grid-public select,
#enquiryModal.auto-enquiry-mode
.form-grid-public textarea{
display:block !important;
width:100% !important;
margin-top:4px !important;
min-height:33px !important;
padding:7px 8px !important;
border:1px solid #b8cad7 !important;
border-radius:6px !important;
background:rgba(255,255,255,.97) !important;
color:#0f172a !important;
font-size:10px !important;
font-weight:600 !important;
opacity:1 !important;
box-shadow:none !important;
}
/* Placeholder */
#enquiryModal.auto-enquiry-mode
.form-grid-public input::placeholder,
#enquiryModal.auto-enquiry-mode
.form-grid-public textarea::placeholder{
color:#64748b !important;
opacity:1 !important;
}
/* Full-width message */
#enquiryModal.auto-enquiry-mode
.form-grid-public .full-public{
grid-column:1 / -1 !important;
}
/* Focus */
#enquiryModal.auto-enquiry-mode
.form-grid-public input:focus,
#enquiryModal.auto-enquiry-mode
.form-grid-public select:focus,
#enquiryModal.auto-enquiry-mode
.form-grid-public textarea:focus{
outline:none !important;
border-color:#0284c7 !important;
box-shadow:
0 0 0 2px rgba(2,132,199,.12) !important;
}
/* Submit button */
#enquiryModal.auto-enquiry-mode
.submit-btn{
display:block !important;
width:100% !important;
min-height:36px !important;
margin-top:10px !important;
padding:8px 12px !important;
border:0 !important;
border-radius:7px !important;
background:#0284c7 !important;
color:#ffffff !important;
font-size:10px !important;
font-weight:900 !important;
opacity:1 !important;
}
/* Close button */
#enquiryModal.auto-enquiry-mode
.modal-close{
top:7px !important;
right:8px !important;
width:28px !important;
height:28px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
border:1px solid #d3dee6 !important;
border-radius:50% !important;
background:#f3f7fa !important;
color:#183043 !important;
font-size:20px !important;
line-height:1 !important;
}
/* Status */
#enquiryModal.auto-enquiry-mode
.form-status{
margin-top:7px !important;
font-size:9px !important;
font-weight:700 !important;
color:#334155 !important;
}
/* ============================================================
MOBILE
============================================================ */
@media(max-width:650px){
#enquiryModal.auto-enquiry-mode{
padding:8px !important;
}
#enquiryModal.auto-enquiry-mode .modal-card{
width:92vw !important;
max-width:360px !important;
max-height:84vh !important;
padding:14px !important;
border-radius:12px !important;
}
#enquiryModal.auto-enquiry-mode .modal-card h2{
font-size:18px !important;
}
#enquiryModal.auto-enquiry-mode
.modal-card .eyebrow{
font-size:8px !important;
}
#enquiryModal.auto-enquiry-mode
.modal-card > .muted{
font-size:9px !important;
}
/*
* Mobile uses one clean column so every field
* remains readable.
*/
#enquiryModal.auto-enquiry-mode
.form-grid-public{
grid-template-columns:1fr !important;
gap:7px !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public .full-public{
grid-column:auto !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public label{
font-size:9px !important;
}
#enquiryModal.auto-enquiry-mode
.form-grid-public input,
#enquiryModal.auto-enquiry-mode
.form-grid-public select,
#enquiryModal.auto-enquiry-mode
.form-grid-public textarea{
min-height:32px !important;
padding:7px 8px !important;
font-size:10px !important;
}
#enquiryModal.auto-enquiry-mode
.submit-btn{
min-height:35px !important;
margin-top:9px !important;
font-size:9px !important;
}
}
/* ============================================================
W-67.10.1
WHATSAPP CHANNEL JOIN POPUP
SMALL + BOTTOM RIGHT + NON BLOCKING
============================================================ */
.whatsapp-channel-popup{
position:fixed !important;
right:18px !important;
bottom:18px !important;
z-index:1700 !important;
width:min(330px,calc(100vw - 36px)) !important;
display:flex !important;
align-items:center !important;
gap:9px !important;
padding:10px 11px !important;
border:1px solid #bde7fb !important;
border-radius:10px !important;
background:rgba(255,255,255,.95) !important;
backdrop-filter:blur(10px) !important;
-webkit-backdrop-filter:blur(10px) !important;
box-shadow:
0 12px 32px rgba(2,132,199,.20) !important;
color:#0f172a !important;
opacity:0 !important;
transform:translateY(12px) !important;
pointer-events:none !important;
transition:
opacity .22s ease,
transform .22s ease !important;
}
.whatsapp-channel-popup.show{
opacity:1 !important;
transform:translateY(0) !important;
pointer-events:auto !important;
}
.whatsapp-channel-popup[hidden]{
display:none !important;
}
.whatsapp-channel-icon{
width:30px !important;
height:30px !important;
min-width:30px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
background:#25d366 !important;
color:#fff !important;
font-size:17px !important;
font-weight:900 !important;
}
.whatsapp-channel-copy{
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
gap:2px !important;
flex:1 1 auto !important;
}
.whatsapp-channel-copy strong{
color:#0f172a !important;
font-size:11px !important;
line-height:1.1 !important;
font-weight:900 !important;
}
.whatsapp-channel-copy span{
color:#526272 !important;
font-size:8px !important;
line-height:1.25 !important;
font-weight:600 !important;
}
.whatsapp-channel-join{
flex:0 0 auto !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:62px !important;
height:29px !important;
padding:0 8px !important;
border-radius:6px !important;
background:#25d366 !important;
color:#fff !important;
font-size:8px !important;
font-weight:900 !important;
text-decoration:none !important;
white-space:nowrap !important;
}
.whatsapp-channel-join:hover{
background:#1fb957 !important;
}
.whatsapp-channel-close{
position:absolute !important;
right:5px !important;
top:4px !important;
width:18px !important;
height:18px !important;
padding:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border:0 !important;
background:transparent !important;
color:#64748b !important;
font-size:15px !important;
line-height:1 !important;
}
@media(max-width:650px){
.whatsapp-channel-popup{
right:10px !important;
bottom:74px !important;
width:min(300px,calc(100vw - 20px)) !important;
padding:9px 10px !important;
}
.whatsapp-channel-icon{
width:28px !important;
height:28px !important;
min-width:28px !important;
font-size:15px !important;
}
.whatsapp-channel-copy strong{
font-size:10px !important;
}
.whatsapp-channel-copy span{
font-size:7px !important;
}
.whatsapp-channel-join{
min-width:58px !important;
height:28px !important;
font-size:8px !important;
}
}
/* ============================================================
W-67.12.1
ACTUAL SOCIAL APP LOGOS
SEQUENTIAL BOTTOM-RIGHT STACK
============================================================ */
.social-follow-popup{
position:fixed !important;
right:18px !important;
bottom:105px !important;
z-index:1690 !important;
width:min(330px,calc(100vw - 36px)) !important;
display:flex !important;
flex-direction:column !important;
gap:5px !important;
padding:7px !important;
border:1px solid #bde7fb !important;
border-radius:10px !important;
background:rgba(255,255,255,.95) !important;
backdrop-filter:blur(10px) !important;
-webkit-backdrop-filter:blur(10px) !important;
box-shadow:
0 12px 32px rgba(2,132,199,.18) !important;
opacity:0 !important;
transform:translateY(10px) !important;
pointer-events:none !important;
transition:
opacity .2s ease,
transform .2s ease !important;
}
.social-follow-popup.show{
opacity:1 !important;
transform:translateY(0) !important;
pointer-events:auto !important;
}
.social-follow-popup[hidden]{
display:none !important;
}
.social-follow-item{
min-height:34px !important;
display:flex !important;
align-items:center !important;
gap:8px !important;
padding:5px 7px !important;
border-radius:7px !important;
background:#ffffff !important;
border:1px solid #e3edf3 !important;
color:#102033 !important;
text-decoration:none !important;
opacity:0 !important;
transform:translateY(5px) !important;
transition:
opacity .18s ease,
transform .18s ease !important;
}
.social-follow-item[hidden]{
display:none !important;
}
.social-follow-item.show{
opacity:1 !important;
transform:translateY(0) !important;
}
/* Actual application logo */
.social-follow-icon{
width:27px !important;
height:27px !important;
min-width:27px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:6px !important;
background:#ffffff !important;
overflow:hidden !important;
}
.social-follow-icon img{
display:block !important;
width:21px !important;
height:21px !important;
max-width:21px !important;
max-height:21px !important;
object-fit:contain !important;
}
.social-follow-copy{
min-width:0 !important;
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
gap:1px !important;
}
.social-follow-copy strong{
color:#102033 !important;
font-size:9px !important;
line-height:1.1 !important;
font-weight:900 !important;
}
.social-follow-copy small{
color:#64748b !important;
font-size:7px !important;
line-height:1.15 !important;
font-weight:600 !important;
}
.social-follow-action{
min-width:65px !important;
height:25px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 7px !important;
border-radius:5px !important;
background:#0284c7 !important;
color:#ffffff !important;
font-size:7px !important;
font-weight:900 !important;
white-space:nowrap !important;
}
.youtube .social-follow-action{
min-width:78px !important;
}
.social-follow-close{
position:absolute !important;
right:4px !important;
top:3px !important;
width:17px !important;
height:17px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
border:0 !important;
background:transparent !important;
color:#64748b !important;
font-size:14px !important;
z-index:2 !important;
}
@media(max-width:650px){
.social-follow-popup{
right:10px !important;
bottom:158px !important;
width:min(300px,calc(100vw - 20px)) !important;
gap:4px !important;
padding:6px !important;
}
.social-follow-item{
min-height:31px !important;
padding:4px 6px !important;
}
.social-follow-icon{
width:24px !important;
height:24px !important;
min-width:24px !important;
}
.social-follow-icon img{
width:19px !important;
height:19px !important;
max-width:19px !important;
max-height:19px !important;
}
.social-follow-copy strong{
font-size:8px !important;
}
.social-follow-copy small{
font-size:6px !important;
}
.social-follow-action{
min-width:58px !important;
height:23px !important;
font-size:6.5px !important;
}
.youtube .social-follow-action{
min-width:70px !important;
}
}
/* =========================================================
W-67.51 CHETAK EV PREMIUM SHOWCASE
========================================================= */
.chetak-ev-section{
position:relative;
overflow:hidden;
padding:78px 4%;
color:#f7fbff;
background:
radial-gradient(circle at 15% 25%,#155c78 0,transparent 35%),
radial-gradient(circle at 85% 75%,#1d3557 0,transparent 38%),
linear-gradient(125deg,#061018,#0b1721 48%,#07111a);
}
.chetak-ev-inner{
position:relative;
z-index:2;
max-width:1320px;
margin:auto;
}
.chetak-ev-heading{
max-width:760px;
margin:0 auto 42px;
text-align:center;
}
.chetak-ev-heading h2{
margin:0;
font-size:42px;
line-height:.95;
font-style:italic;
letter-spacing:-1.5px;
}
.chetak-ev-heading h2 strong{
color:#52d8ff;
}
.chetak-ev-heading>p:last-child{
max-width:650px;
margin:18px auto 0;
color:#b9c8d3;
font-size:14px;
line-height:1.7;
}
.chetak-ev-models{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:16px;
}
.chetak-ev-card{
overflow:hidden;
border:1px solid #ffffff16;
border-radius:18px;
background:linear-gradient(160deg,#132532,#0b151d);
box-shadow:0 22px 55px #0006;
transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.chetak-ev-card:hover{
transform:translateY(-7px);
border-color:#52d8ff55;
box-shadow:0 28px 65px #0009;
}
.chetak-ev-card-top{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px;
}
.chetak-ev-badge{
padding:5px 8px;
border:1px solid #52d8ff55;
border-radius:20px;
color:#7be2ff;
font-size:8px;
font-weight:900;
letter-spacing:1px;
}
.chetak-ev-model-code{
color:#8fa3b0;
font-size:10px;
font-weight:900;
}
.chetak-ev-art{
height:155px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
}
.chetak-ev-orbit{
position:absolute;
width:135px;
height:135px;
border:1px solid #52d8ff2b;
border-radius:50%;
box-shadow:0 0 60px #28bde822;
}
.chetak-ev-scooter-mark{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
align-items:center;
}
.chetak-ev-scooter-mark span{
font-size:27px;
}
.chetak-ev-scooter-mark b{
font-size:18px;
font-style:italic;
}
.chetak-ev-scooter-mark small{
color:#64dfff;
font-size:7px;
letter-spacing:2px;
font-weight:900;
}
.chetak-ev-card-body{
padding:0 15px 17px;
}
.chetak-ev-card-body h3{
margin:0 0 12px;
font-size:18px;
}
.chetak-ev-price{
display:flex;
justify-content:space-between;
gap:8px;
padding:9px 0;
border-top:1px solid #ffffff10;
border-bottom:1px solid #ffffff10;
}
.chetak-ev-price span{
color:#91a4b0;
font-size:8px;
}
.chetak-ev-price strong{
color:#fff;
font-size:9px;
}
.chetak-ev-spec-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-top:13px;
}
.chetak-ev-spec-grid div{
padding:9px;
border-radius:8px;
background:#ffffff08;
}
.chetak-ev-spec-grid small{
display:block;
color:#7e929e;
font-size:7px;
font-weight:800;
}
.chetak-ev-spec-grid b{
display:block;
margin-top:4px;
font-size:11px;
}
.chetak-ev-feature-line{
min-height:34px;
margin-top:11px;
color:#b6c7d0;
font-size:8px;
line-height:1.5;
}
.chetak-ev-feature-line span{
margin:0 4px;
color:#52d8ff;
}
.chetak-ev-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:6px;
margin-top:12px;
}
.chetak-ev-actions .btn{
padding:9px 4px;
font-size:9px;
}
.chetak-ev-empty{
grid-column:1/-1;
padding:35px;
border:1px dashed #ffffff22;
border-radius:12px;
text-align:center;
color:#9fb0bb;
}
@media(max-width:1100px){
.chetak-ev-models{
grid-template-columns:repeat(3,1fr);
}
}
@media(max-width:700px){
.chetak-ev-section{
padding:55px 15px;
}
.chetak-ev-heading h2{
font-size:31px;
}
.chetak-ev-models{
grid-template-columns:1fr;
max-width:430px;
margin:auto;
}
}
/* W-67.56 — Chetak EV real-image presentation */
.chetak-ev-real-image{
position:relative;
z-index:2;
display:block;
width:100%;
height:155px;
object-fit:contain;
object-position:center;
border-radius:14px;
cursor:pointer;
filter:drop-shadow(0 14px 22px rgba(0,0,0,.28));
}
.chetak-ev-art{
overflow:hidden;
}
/* W-67.57 — Chetak vehicle visibility / contrast */
.chetak-ev-art{
background:
radial-gradient(
circle at center,
rgba(255,255,255,.12) 0%,
rgba(82,216,255,.07) 38%,
rgba(0,0,0,0) 72%
);
border-radius:16px;
}
.chetak-ev-real-image{
filter:
brightness(1.12)
contrast(1.16)
saturate(1.08)
drop-shadow(0 12px 16px rgba(0,0,0,.52))
drop-shadow(0 0 12px rgba(255,255,255,.10));
}
/* ============================================================
AQUIL MOTORS — PUBLIC AI ASSISTANT
============================================================ */
.aquil-public-ai-button{
position:fixed;
right:18px;
bottom:18px;
z-index:1900;
display:flex;
align-items:center;
gap:8px;
border:0;
border-radius:999px;
padding:11px 16px;
background:#0f172a;
color:#fff;
box-shadow:0 12px 32px rgba(15,23,42,.24);
font-size:11px;
font-weight:900;
letter-spacing:.6px;
cursor:pointer;
}
.aquil-public-ai-button:hover{
transform:translateY(-2px);
}
.aquil-public-ai-icon{
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:50%;
background:var(--aquil-sky,#0ea5e9);
color:#fff;
font-size:14px;
}
.aquil-public-ai-label{
white-space:nowrap;
}
.aquil-public-ai-panel{
position:fixed;
right:18px;
bottom:72px;
z-index:1950;
width:min(390px,calc(100vw - 28px));
height:min(620px,calc(100vh - 95px));
display:flex;
flex-direction:column;
overflow:hidden;
background:#fff;
border:1px solid #dbeafe;
border-radius:18px;
box-shadow:0 24px 70px rgba(15,23,42,.25);
}
.aquil-public-ai-panel[hidden]{
display:none;
}
.aquil-public-ai-head{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
padding:16px;
background:linear-gradient(
135deg,
#0369a1,
#0ea5e9
);
color:#fff;
}
.aquil-public-ai-head strong{
display:block;
font-size:15px;
letter-spacing:.4px;
}
.aquil-public-ai-head span{
display:block;
margin-top:4px;
font-size:10px;
opacity:.9;
}
.aquil-public-ai-close{
width:30px;
height:30px;
border:0;
border-radius:50%;
background:rgba(255,255,255,.16);
color:#fff;
font-size:23px;
line-height:1;
}
.aquil-public-ai-messages{
flex:1;
min-height:0;
overflow-y:auto;
padding:14px;
background:#f8fafc;
}
.aquil-public-ai-message{
display:flex;
margin-bottom:10px;
}
.aquil-public-ai-message.ai{
justify-content:flex-start;
}
.aquil-public-ai-message.user{
justify-content:flex-end;
}
.aquil-public-ai-bubble{
max-width:84%;
padding:10px 12px;
border-radius:13px;
font-size:12px;
line-height:1.5;
white-space:normal;
word-break:break-word;
}
.aquil-public-ai-message.ai
.aquil-public-ai-bubble{
background:#fff;
color:#172033;
border:1px solid #e2e8f0;
border-bottom-left-radius:4px;
}
.aquil-public-ai-message.user
.aquil-public-ai-bubble{
background:#e0f2fe;
color:#0f172a;
border:1px solid #bae6fd;
border-bottom-right-radius:4px;
}
.aquil-public-ai-callback{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin:0 12px 10px;
padding:11px;
border:1px solid #fecaca;
border-radius:10px;
background:#fff7f7;
}
.aquil-public-ai-callback[hidden]{
display:none;
}
.aquil-public-ai-callback strong{
display:block;
font-size:11px;
color:#991b1b;
}
.aquil-public-ai-callback span{
display:block;
margin-top:3px;
font-size:10px;
color:#64748b;
}
.aquil-public-ai-call{
flex:none;
display:inline-flex;
align-items:center;
justify-content:center;
padding:9px 11px;
border-radius:7px;
background:#0f172a;
color:#fff;
font-size:10px;
font-weight:900;
text-decoration:none;
}
.aquil-public-ai-form{
display:flex;
gap:7px;
padding:10px;
border-top:1px solid #e2e8f0;
background:#fff;
}
.aquil-public-ai-form textarea{
flex:1;
min-width:0;
resize:none;
min-height:44px;
max-height:92px;
padding:10px;
border:1px solid #cbd5e1;
border-radius:9px;
outline:none;
font:inherit;
font-size:12px;
}
.aquil-public-ai-form textarea:focus{
border-color:#0ea5e9;
box-shadow:0 0 0 3px rgba(14,165,233,.12);
}
.aquil-public-ai-form button{
flex:none;
align-self:stretch;
min-width:64px;
border:0;
border-radius:9px;
background:#0ea5e9;
color:#fff;
font-size:10px;
font-weight:900;
letter-spacing:.4px;
}
.aquil-public-ai-form button:disabled{
opacity:.55;
cursor:not-allowed;
}
.aquil-public-ai-status{
min-height:18px;
padding:0 12px 8px;
color:#64748b;
font-size:9px;
background:#fff;
}
@media(max-width:650px){
.aquil-public-ai-button{
right:12px;
bottom:74px;
padding:10px 13px;
}
.aquil-public-ai-panel{
right:10px;
bottom:122px;
width:calc(100vw - 20px);
height:min(590px,calc(100vh - 145px));
border-radius:15px;
}
.aquil-public-ai-label{
font-size:10px;
}
.aquil-public-ai-callback{
align-items:stretch;
flex-direction:column;
}
.aquil-public-ai-call{
width:100%;
}
}
/* ============================================================
ASF HOT TARGET — PREMIUM MOBILE LAYOUT
Desktop remains unchanged.
============================================================ */
.asf-hot-target-layout{
width:100%;
}
@media(max-width:650px){
.asf-hot-target-layout{
grid-template-columns:1fr !important;
gap:12px !important;
}
.asf-hot-target-layout > div:last-child{
width:100%;
}
.asf-hot-target-layout strong{
font-size:34px;
}
.asf-hot-target-layout #asfHotTargetText,
.asf-hot-target-layout #asfHotTargetPercent{
font-size:11px;
}
.asf-hot-target-layout #asfHotTargetBar{
height:10px !important;
}
}
/* ============================================================
AQUIL MOTORS — ASF ADMIN REPORT PREMIUM UI
Scoped only to .asf-admin-report-page
============================================================ */
.asf-admin-report-page{
color:#0f2942;
}
.asf-admin-report-page .asf-summary-box{
position:relative;
min-height:88px;
padding:18px 18px 16px;
border:1px solid #dbe8f3;
border-radius:16px;
background:linear-gradient(145deg,#ffffff,#f7fbff);
box-shadow:
0 8px 22px rgba(15,76,129,.08),
inset 0 1px 0 rgba(255,255,255,.9);
display:flex;
flex-direction:column;
justify-content:center;
overflow:hidden;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.asf-admin-report-page .asf-summary-box::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:linear-gradient(180deg,#08a5e8,#0867c8);
border-radius:16px 0 0 16px;
}
.asf-admin-report-page .asf-summary-box:hover{
transform:translateY(-2px);
box-shadow:
0 12px 28px rgba(15,76,129,.12);
border-color:#b9d8ed;
}
.asf-admin-report-page .asf-summary-box span{
display:block;
margin-bottom:7px;
color:#57718a;
font-size:10px;
line-height:1.2;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
.asf-admin-report-page .asf-summary-box strong{
display:block;
color:#082f52;
font-size:29px;
line-height:1;
font-weight:900;
letter-spacing:-.5px;
}
.asf-admin-report-page > div:first-child{
position:relative;
overflow:hidden;
}
.asf-admin-report-page > div:first-child::after{
content:"";
position:absolute;
right:-80px;
top:-90px;
width:260px;
height:260px;
border-radius:50%;
background:rgba(255,255,255,.08);
pointer-events:none;
}
.asf-admin-report-page .field label{
display:block;
margin-bottom:7px;
color:#143c5a;
font-size:10px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
.asf-admin-report-page select{
min-height:46px;
border:1px solid #c8d9e7 !important;
border-radius:10px !important;
background:#fff;
color:#173751;
font-size:13px;
font-weight:700;
outline:none;
box-shadow:0 2px 8px rgba(18,74,112,.03);
}
.asf-admin-report-page select:focus{
border-color:#1498db !important;
box-shadow:0 0 0 3px rgba(20,152,219,.12);
}
.asf-admin-report-page .btn.primary{
border-radius:10px;
font-size:11px;
font-weight:900;
letter-spacing:.4px;
box-shadow:0 8px 18px rgba(12,126,198,.20);
}
.asf-admin-report-page > #asfAdminReportContent > div{
backdrop-filter:blur(2px);
}
.asf-admin-report-page table{
border-spacing:0;
}
.asf-admin-report-page table th{
padding:12px 11px;
background:#edf7fd;
color:#164765;
border-bottom:1px solid #d3e5f1;
font-size:10px;
line-height:1.25;
font-weight:900;
letter-spacing:.45px;
text-transform:uppercase;
white-space:nowrap;
}
.asf-admin-report-page table td{
padding:12px 11px;
color:#233f55;
border-bottom:1px solid #e6eef4;
font-size:12px;
line-height:1.25;
font-weight:600;
white-space:nowrap;
background:#fff;
}
.asf-admin-report-page table tbody tr:nth-child(even) td{
background:#fbfdff;
}
.asf-admin-report-page table tbody tr:hover td{
background:#f1f9fe;
}
.asf-admin-report-page table tbody tr:last-child td{
border-bottom:0;
}
.asf-admin-report-page
#asfAdminEmployeeRows td:first-child{
color:#062f4f;
font-weight:900;
}
.asf-admin-report-page
#asfAdminEmployeeRows td:nth-child(2){
font-weight:900;
}
.asf-admin-report-page
#asfAdminEmployeeRows td:nth-child(3){
color:#d22f45;
font-weight:900;
}
.asf-admin-report-page
#asfAdminEmployeeRows td:nth-child(4),
.asf-admin-report-page
#asfAdminEmployeeRows td:nth-child(6),
.asf-admin-report-page
#asfAdminEmployeeRows td:nth-child(8){
color:#0876ba;
font-weight:900;
}
.asf-admin-report-page
#asfAdminEmployeeRows td:nth-child(9){
color:#12854b;
font-weight:900;
}
.asf-admin-report-page
#asfAdminEmployeeRows td:nth-child(10){
color:#c73434;
font-weight:900;
}
.asf-admin-report-page
#asfAdminReportLoading{
border:1px dashed #9ccce8;
border-radius:14px;
background:#f5fbff;
color:#1776aa;
font-weight:800;
}
.asf-admin-report-page
#asfAdminSelectedEmployee{
color:#0876ba;
font-weight:900;
}
/* Premium section headings */
.asf-admin-report-page > #asfAdminReportContent > div > div:first-child{
letter-spacing:0;
}
.asf-admin-report-page
#asfAdminReportContent
> div:nth-child(2) > div:nth-child(2){
color:#102f49;
}
/* Better spacing around horizontal report tables */
.asf-admin-report-page table th:first-child,
.asf-admin-report-page table td:first-child{
padding-left:14px;
}
.asf-admin-report-page table th:last-child,
.asf-admin-report-page table td:last-child{
padding-right:14px;
}
/* Scrollbar for report tables */
.asf-admin-report-page div[style*="overflow-x:auto"]{
scrollbar-width:thin;
scrollbar-color:#a9cbe0 transparent;
}
.asf-admin-report-page div[style*="overflow-x:auto"]::-webkit-scrollbar{
height:7px;
}
.asf-admin-report-page div[style*="overflow-x:auto"]::-webkit-scrollbar-track{
background:#edf5fa;
border-radius:10px;
}
.asf-admin-report-page div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb{
background:#a7cade;
border-radius:10px;
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width:900px){
.asf-admin-report-page > div:nth-child(2) > div{
grid-template-columns:1fr !important;
}
.asf-admin-report-page
> #asfAdminReportContent
> div:first-child{
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
}
@media (max-width:600px){
.asf-admin-report-page > div:first-child{
padding:20px 18px !important;
border-radius:15px !important;
}
.asf-admin-report-page > div:first-child h2{
font-size:23px !important;
}
.asf-admin-report-page
> #asfAdminReportContent
> div:first-child{
grid-template-columns:1fr !important;
}
.asf-admin-report-page .asf-summary-box{
min-height:78px;
padding:15px;
}
.asf-admin-report-page .asf-summary-box strong{
font-size:25px;
}
.asf-admin-report-page table th{
padding:10px 9px;
font-size:9px;
}
.asf-admin-report-page table td{
padding:10px 9px;
font-size:11px;
}
}
/* ============================================================
END ASF ADMIN REPORT PREMIUM UI
============================================================ */
/* ============================================================
ASF ADMIN REPORT — LIVE LINE-UP MINI STATS
============================================================ */
.asf-admin-report-page .asf-admin-mini-stat{
position:relative;
min-height:96px;
padding:16px 18px;
border:1px solid #cfe2ef;
border-radius:14px;
background:linear-gradient(145deg,#fafdff,#eef8fe);
box-shadow:0 7px 18px rgba(8,83,130,.08);
overflow:hidden;
box-sizing:border-box;
}
.asf-admin-report-page .asf-admin-mini-stat::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:linear-gradient(180deg,#0ea5e9,#0868c7);
}
.asf-admin-report-page .asf-admin-mini-stat span{
display:block;
color:#547089;
font-size:9px;
font-weight:900;
letter-spacing:.9px;
text-transform:uppercase;
}
.asf-admin-report-page .asf-admin-mini-stat strong{
display:block;
margin-top:8px;
color:#07365b;
font-size:30px;
line-height:1;
font-weight:900;
}
.asf-admin-report-page .asf-admin-mini-stat small{
display:block;
margin-top:7px;
color:#7a8fa1;
font-size:10px;
font-weight:700;
}
.asf-admin-report-page .asf-admin-mini-call{
background:linear-gradient(145deg,#fffafa,#fff2f3);
border-color:#efcdd1;
}
.asf-admin-report-page .asf-admin-mini-call::before{
background:linear-gradient(180deg,#ef4444,#b91c1c);
}
.asf-admin-report-page .asf-admin-mini-call strong{
color:#a61b2b;
}
@media(max-width:600px){
.asf-admin-report-page > div:nth-child(2) > div{
grid-template-columns:1fr !important;
}
.asf-admin-report-page .asf-admin-mini-stat{
min-height:86px;
padding:14px;
}
.asf-admin-report-page .asf-admin-mini-stat strong{
font-size:26px;
}
}
/* ============================================================
ASF REPORT — MAIN ASF LINE-UP & CALLS
============================================================ */
.asf-admin-report-page .asf-admin-sales-performance-layout{
margin-top:14px;
display:grid;
grid-template-columns:minmax(250px,1fr) minmax(420px,1.35fr);
gap:16px;
align-items:stretch;
}
.asf-admin-report-page .asf-admin-sales-performance-info{
min-height:132px;
padding:18px;
border:1px solid #dbe8f3;
border-radius:15px;
background:linear-gradient(145deg,#fbfdff,#f2f8fc);
box-shadow:0 6px 18px rgba(10,74,112,.05);
display:flex;
flex-direction:column;
justify-content:center;
}
.asf-admin-report-page .asf-admin-report-label{
color:#57718a;
font-size:9px;
font-weight:900;
letter-spacing:1px;
text-transform:uppercase;
}
.asf-admin-report-page .asf-admin-selected-person{
margin-top:8px;
color:#0876ba;
font-size:16px;
font-weight:900;
}
.asf-admin-report-page .asf-admin-sales-note{
margin-top:8px;
color:#7a8fa1;
font-size:10px;
font-weight:700;
line-height:1.4;
}
.asf-admin-report-page .asf-admin-main-activity{
min-height:132px;
padding:15px;
border:1px solid #c8dfee;
border-radius:16px;
background:
linear-gradient(145deg,#f8fcff,#edf7fd);
box-shadow:
0 8px 22px rgba(7,91,145,.10),
inset 0 1px 0 rgba(255,255,255,.9);
}
.asf-admin-report-page .asf-admin-main-activity-title{
margin-bottom:11px;
color:#0b5f91;
font-size:10px;
font-weight:900;
letter-spacing:1.05px;
text-transform:uppercase;
}
.asf-admin-report-page .asf-admin-main-activity-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.asf-admin-report-page .asf-admin-main-stat{
position:relative;
min-height:78px;
padding:13px 15px;
border-radius:13px;
border:1px solid #d4e4ef;
background:#fff;
box-sizing:border-box;
overflow:hidden;
}
.asf-admin-report-page .asf-admin-main-stat::before{
content:"";
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background:#0a91d4;
}
.asf-admin-report-page .asf-admin-main-lineup::before{
background:linear-gradient(180deg,#0ea5e9,#0867c8);
}
.asf-admin-report-page .asf-admin-main-call{
background:linear-gradient(145deg,#fffafa,#fff3f4);
border-color:#efcfd3;
}
.asf-admin-report-page .asf-admin-main-call::before{
background:linear-gradient(180deg,#ef4444,#b91c1c);
}
.asf-admin-report-page .asf-admin-main-stat span{
display:block;
color:#6a8194;
font-size:8px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
.asf-admin-report-page .asf-admin-main-stat strong{
display:block;
margin-top:7px;
color:#08375a;
font-size:27px;
line-height:1;
font-weight:900;
}
.asf-admin-report-page .asf-admin-main-call strong{
color:#a61b2b;
}
.asf-admin-report-page .asf-admin-main-stat small{
display:block;
margin-top:6px;
color:#8295a5;
font-size:9px;
font-weight:700;
}
@media(max-width:800px){
.asf-admin-report-page .asf-admin-sales-performance-layout{
grid-template-columns:1fr;
}
}
@media(max-width:520px){
.asf-admin-report-page .asf-admin-main-activity-grid{
grid-template-columns:1fr;
}
}