/* ========================================================================== AUTORA — site.css Palette: deep violet-navy ink, signal orange, citrus, Adriatic aqua, ultra. Display: Bricolage Grotesque. Body: Manrope. Plate badges: DM Mono. ========================================================================== */ :root{ --ink:#141033; --ink-2:#241b52; --signal:#FF4D2E; --citrus:#FFC93C; --aqua:#00D3B8; --ultra:#5B3DF6; --base:#F2F1FB; --paper:#ffffff; --line:#DFDCF3; --muted:#6A6690; --r-lg:26px; --r-md:16px; --r-sm:10px; --shadow:0 18px 44px -22px rgba(20,16,51,.45); --maxw:1180px; --ease:cubic-bezier(.22,.61,.36,1); } *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth } body{ margin:0; background:var(--base); color:var(--ink); font-family:"Manrope",system-ui,sans-serif; font-size:17px; line-height:1.6; font-weight:450; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,.display{ font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800; line-height:1.02; letter-spacing:-.026em; margin:0; font-variation-settings:"wdth" 100,"opsz" 40; } h1{font-size:clamp(2.6rem,7.4vw,5.2rem)} h2{font-size:clamp(2rem,4.6vw,3.3rem)} h3{font-size:clamp(1.2rem,2.1vw,1.55rem); letter-spacing:-.018em} p{margin:0 0 1em} .lede{font-size:clamp(1.05rem,1.7vw,1.24rem); color:var(--muted); max-width:62ch; line-height:1.55} .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:22px} .section{padding:clamp(56px,8vw,110px) 0} .section-tight{padding:clamp(40px,5vw,64px) 0} .stack>*+*{margin-top:1rem} :focus-visible{outline:3px solid var(--ultra); outline-offset:3px; border-radius:4px} /* ---------- header ------------------------------------------------------- */ .site-head{ position:sticky; top:0; z-index:60; background:rgba(242,241,251,.86); backdrop-filter:saturate(1.5) blur(14px); border-bottom:1px solid var(--line); } .head-inner{display:flex; align-items:center; gap:20px; height:72px} .logo{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:-.04em; text-decoration:none; display:flex; align-items:center; gap:9px; font-variation-settings:"wdth" 85; } .logo .dot{width:11px;height:11px;border-radius:3px;background:var(--signal);transform:rotate(45deg)} .nav{margin-left:auto; display:flex; gap:6px; align-items:center} .nav a{ text-decoration:none; padding:9px 14px; border-radius:99px; font-weight:600; font-size:.94rem; color:var(--ink); transition:background .18s var(--ease) } .nav a:hover{background:#e5e2f7} .nav a[aria-current="page"]{background:var(--ink); color:#fff} .nav-cta{background:var(--signal)!important; color:#fff!important; padding:10px 18px!important} .burger{display:none; margin-left:auto; background:var(--ink); color:#fff; border:0; border-radius:10px; width:44px;height:44px; font-size:1.2rem; cursor:pointer} @media (max-width:880px){ .burger{display:block} .nav{ position:absolute; inset:72px 0 auto 0; background:var(--paper); flex-direction:column; align-items:stretch; padding:14px 18px 22px; gap:2px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); display:none } .nav.open{display:flex} .nav a{padding:13px 14px; border-radius:12px} } /* ---------- buttons ------------------------------------------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 26px; border-radius:99px; border:0; cursor:pointer; text-decoration:none; font-weight:750; font-size:1rem; letter-spacing:-.01em; transition:transform .16s var(--ease), box-shadow .16s var(--ease), background .16s; } .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--signal); color:#fff; box-shadow:0 10px 26px -12px rgba(255,77,46,.9)} .btn-primary:hover{background:#ef3f21} .btn-ink{background:var(--ink); color:#fff} .btn-ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 2px var(--ink)} .btn-ghost:hover{background:var(--ink); color:#fff} .btn-sm{padding:10px 17px; font-size:.9rem} .btn:disabled{opacity:.45; cursor:not-allowed; transform:none} /* ---------- hero --------------------------------------------------------- */ .hero{ position:relative; overflow:hidden; color:#fff; background: radial-gradient(1100px 520px at 82% -12%, rgba(255,201,60,.55), transparent 62%), radial-gradient(760px 520px at 8% 108%, rgba(0,211,184,.42), transparent 60%), linear-gradient(155deg,#2b1170 0%, #4a1a8f 34%, var(--signal) 100%); } .hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:20px; background:repeating-linear-gradient(90deg,#fff 0 46px, transparent 46px 92px); opacity:.92; } .hero-inner{padding:clamp(52px,8vw,96px) 0 clamp(74px,9vw,116px); position:relative; z-index:2} .hero-kicker{ display:inline-block; font-weight:700; font-size:.9rem; letter-spacing:.02em; background:rgba(255,255,255,.16); padding:8px 15px; border-radius:99px; margin-bottom:22px; } .hero h1{max-width:15ch; text-wrap:balance} .hero .lede{color:rgba(255,255,255,.9); margin-top:20px; max-width:48ch} .hero-stats{display:flex; flex-wrap:wrap; gap:34px; margin-top:34px} .hero-stats .v{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:2.1rem; line-height:1} .hero-stats .l{font-size:.9rem; color:rgba(255,255,255,.78); margin-top:4px} /* the search console — the hero's real subject */ .console{ background:var(--paper); color:var(--ink); border-radius:var(--r-lg); padding:22px; box-shadow:0 34px 70px -30px rgba(10,6,40,.75); margin-top:44px; } .console h2{font-size:1.15rem; margin-bottom:16px} .console-grid{display:grid; gap:14px; grid-template-columns:repeat(4,1fr)} .console-grid .field.span2{grid-column:span 2} @media (max-width:840px){ .console-grid{grid-template-columns:repeat(2,1fr)} .console-grid .field.span2{grid-column:span 2} } @media (max-width:520px){ .console-grid{grid-template-columns:1fr} .console-grid .field.span2{grid-column:span 1} } .field{display:flex; flex-direction:column; gap:6px} .field label{font-size:.82rem; font-weight:700; color:var(--muted)} .field input,.field select,.field textarea{ border:2px solid var(--line); border-radius:12px; padding:12px 13px; background:#fff; font-weight:600; transition:border-color .15s } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ultra); outline:none} .field textarea{min-height:110px; resize:vertical; font-weight:500} .field .hint{font-size:.78rem; color:var(--muted); font-weight:500} .pair{display:grid; grid-template-columns:1fr 96px; gap:8px} /* ---------- trust strip -------------------------------------------------- */ .trust{background:var(--ink); color:#fff; padding:16px 0} .trust ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 30px; justify-content:center; font-size:.92rem; font-weight:600} .trust li{display:flex; align-items:center; gap:9px} .trust li::before{content:""; width:8px;height:8px;border-radius:50%;background:var(--aqua)} /* ---------- seasonal price ribbon (signature element) -------------------- */ .ribbon-head{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-end; justify-content:space-between; margin-bottom:28px} .ribbon-select{display:flex; gap:8px; align-items:center} .ribbon{ display:grid; grid-template-columns:repeat(12,1fr); gap:6px; background:var(--paper); padding:16px; border-radius:var(--r-lg); box-shadow:var(--shadow); } .ribbon-month{ display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:12px 8px 12px; border-radius:14px; background:#f7f6fd; text-align:center; min-height:190px; position:relative; overflow:hidden; } .ribbon-bar{border-radius:9px; width:100%; transition:height .5s var(--ease)} .ribbon-price{font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.02rem} .ribbon-m{font-size:.76rem; font-weight:700; color:var(--muted)} .ribbon-month.cheapest{outline:3px solid var(--aqua); background:#eafcf8} .ribbon-month.cheapest .ribbon-m{color:#00806f} .ribbon-key{display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:18px; font-size:.85rem; font-weight:600; color:var(--muted)} .ribbon-key span{display:flex; align-items:center; gap:7px} .ribbon-key i{width:14px;height:14px;border-radius:4px; display:block} @media (max-width:760px){ .ribbon{grid-template-columns:repeat(6,1fr)} .ribbon-month{min-height:150px} } @media (max-width:420px){ .ribbon{grid-template-columns:repeat(4,1fr); gap:5px; padding:11px} } /* ---------- fleet cards -------------------------------------------------- */ .filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px} .chip{ border:2px solid var(--line); background:#fff; padding:9px 16px; border-radius:99px; font-weight:700; font-size:.9rem; cursor:pointer; transition:.15s var(--ease) } .chip:hover{border-color:var(--ink)} .chip[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)} .cars{display:grid; gap:22px; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))} .car{ background:var(--paper); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 10px 30px -22px rgba(20,16,51,.55); border:1px solid var(--line); } .car-top{ position:relative; aspect-ratio:16/10; display:grid; place-items:center; background:linear-gradient(140deg,var(--c,#5B3DF6) 0%, color-mix(in srgb,var(--c,#5B3DF6) 55%, #141033) 100%); } .car-top img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0} .car-silhouette{width:74%; opacity:.94} .car-cat{ position:absolute; top:14px; left:14px; background:rgba(255,255,255,.94); color:var(--ink); padding:6px 13px; border-radius:99px; font-size:.78rem; font-weight:800; } .car-body{padding:20px; display:flex; flex-direction:column; gap:13px; flex:1} .car-name{display:flex; justify-content:space-between; gap:12px; align-items:baseline} .car-price{text-align:right; white-space:nowrap} .car-price b{font-family:"Bricolage Grotesque",sans-serif; font-size:1.45rem; display:block; line-height:1} .car-price small{font-size:.76rem; color:var(--muted); font-weight:600} .car-blurb{font-size:.94rem; color:var(--muted); margin:0} .specs{display:flex; flex-wrap:wrap; gap:6px} .spec{background:#f2f1fb; border-radius:8px; padding:5px 10px; font-size:.79rem; font-weight:700} .car-foot{margin-top:auto; display:flex; gap:9px; align-items:center; padding-top:4px} .avail{font-size:.82rem; font-weight:700; margin-left:auto} .avail.yes{color:#00806f} .avail.no{color:var(--signal)} /* ---------- generic panels ---------------------------------------------- */ .panel{background:var(--paper); border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); border:1px solid var(--line)} .panel-ink{background:var(--ink); color:#fff; border-color:transparent} .panel-ink .lede{color:rgba(255,255,255,.78)} .why{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); margin-top:34px} .why-item{padding:26px; border-radius:var(--r-md); background:var(--paper); border-top:6px solid var(--c,var(--ultra))} .why-item h3{margin-bottom:9px} .why-item p{margin:0; color:var(--muted); font-size:.96rem} .steps{counter-reset:s; display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-top:34px} .step{counter-increment:s; position:relative; padding:26px 22px 22px; background:rgba(255,255,255,.06); border-radius:var(--r-md)} .step::before{ content:counter(s); font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:1.05rem; width:36px;height:36px; border-radius:50%; background:var(--citrus); color:var(--ink); display:grid; place-items:center; margin-bottom:14px } .step h3{font-size:1.1rem; margin-bottom:7px} .step p{margin:0; font-size:.93rem; color:rgba(255,255,255,.72)} /* ---------- extras grid -------------------------------------------------- */ .extras{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr))} .extra{ background:var(--paper); border:2px solid var(--line); border-radius:var(--r-md); padding:18px; display:flex; flex-direction:column; gap:9px; transition:border-color .16s var(--ease) } .extra:hover{border-color:#c9c3ee} .extra.on{border-color:var(--ultra); background:#f6f4ff} .extra.featured{border-color:var(--signal)} .extra-head{display:flex; justify-content:space-between; gap:12px; align-items:flex-start} .extra-head h4{font-size:1.02rem; margin:0} .extra-cost{font-weight:800; white-space:nowrap; font-family:"Bricolage Grotesque",sans-serif} .extra p{font-size:.88rem; color:var(--muted); margin:0} .qty{display:flex; align-items:center; gap:10px; margin-top:auto} .qty button{ width:36px;height:36px; border-radius:10px; border:2px solid var(--line); background:#fff; font-weight:800; cursor:pointer; font-size:1.1rem; line-height:1 } .qty button:hover{border-color:var(--ink)} .qty output{font-weight:800; min-width:22px; text-align:center} .qty .cap{font-size:.75rem; color:var(--muted); font-weight:600; margin-left:auto} /* ---------- booking layout ---------------------------------------------- */ .book-layout{display:grid; gap:26px; grid-template-columns:1fr 366px; align-items:start} @media (max-width:960px){ .book-layout{grid-template-columns:1fr} } .summary-lines{list-style:none; margin:0; padding:0; font-size:.94rem} .summary-lines li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed var(--line)} .summary-lines li span:last-child{font-weight:700; white-space:nowrap} .summary-lines li.discount span:last-child{color:#00806f} .summary-total{display:flex; justify-content:space-between; align-items:baseline; margin-top:16px; padding-top:16px; border-top:3px solid var(--ink)} .summary-total b{font-family:"Bricolage Grotesque",sans-serif; font-size:2rem; line-height:1} .deposit-note{font-size:.84rem; color:var(--muted); margin-top:12px} .daybar{display:flex; gap:2px; margin:14px 0 4px; height:26px; border-radius:7px; overflow:hidden} .daybar i{flex:1; display:block} .daybar-key{font-size:.78rem; color:var(--muted); font-weight:600} .stepper{display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap} .stepper div{ flex:1; min-width:140px; padding:11px 14px; border-radius:12px; background:#e7e4f8; font-weight:700; font-size:.88rem; color:var(--muted) } .stepper div.on{background:var(--ink); color:#fff} .stepper div.done{background:var(--aqua); color:#08302a} /* ---------- FAQ ---------------------------------------------------------- */ .faq{max-width:760px} .faq details{border-bottom:1px solid var(--line); padding:6px 0} .faq summary{ cursor:pointer; padding:16px 0; font-weight:750; font-size:1.06rem; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; font-size:1.5rem; font-weight:700; color:var(--signal); transition:transform .2s var(--ease)} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{color:var(--muted); padding-bottom:14px; margin:0; max-width:66ch} /* ---------- callout ------------------------------------------------------ */ .callout{ border-radius:var(--r-lg); padding:clamp(30px,5vw,58px); color:#fff; position:relative; overflow:hidden; background:linear-gradient(120deg,var(--ultra),#7c3aed 46%,var(--signal)); } .callout h2{max-width:16ch} .callout p{color:rgba(255,255,255,.85); max-width:52ch} .callout .btn-primary{background:#fff; color:var(--ink); box-shadow:none} /* ---------- forms / status ---------------------------------------------- */ .form-grid{display:grid; gap:16px; grid-template-columns:1fr 1fr} .form-grid .full{grid-column:1/-1} @media (max-width:640px){ .form-grid{grid-template-columns:1fr} } .hp{position:absolute!important; left:-9999px} .status{margin-top:14px; padding:14px 16px; border-radius:12px; font-weight:650; display:none} .status.show{display:block} .status.ok{background:#e6fbf6; color:#046b5b} .status.err{background:#ffe9e5; color:#a92205} .receipt{background:#f6f4ff; border:2px dashed var(--ultra); border-radius:var(--r-md); padding:22px; margin-top:20px} .receipt .ref{font-family:"DM Mono",monospace; font-size:1.4rem; font-weight:500; letter-spacing:.05em} /* ---------- footer ------------------------------------------------------- */ .site-foot{background:var(--ink); color:#fff; padding:56px 0 30px; margin-top:0} .foot-grid{display:grid; gap:30px; grid-template-columns:1.6fr 1fr 1fr 1fr} @media (max-width:800px){ .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:480px){ .foot-grid{grid-template-columns:1fr} } .site-foot h4{font-size:.95rem; margin-bottom:12px} .site-foot ul{list-style:none; margin:0; padding:0; font-size:.92rem} .site-foot li{margin-bottom:8px} .site-foot a{color:rgba(255,255,255,.78); text-decoration:none} .site-foot a:hover{color:#fff; text-decoration:underline} .site-foot p{color:rgba(255,255,255,.62); font-size:.92rem} .foot-bottom{border-top:1px solid rgba(255,255,255,.14); margin-top:34px; padding-top:20px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:.85rem; color:rgba(255,255,255,.55)} /* ---------- misc --------------------------------------------------------- */ .two-col{display:grid; gap:34px; grid-template-columns:1fr 1fr; align-items:center} @media (max-width:820px){ .two-col{grid-template-columns:1fr} } .mt-0{margin-top:0} .center{text-align:center} .empty{padding:44px; text-align:center; border:2px dashed var(--line); border-radius:var(--r-md); color:var(--muted); font-weight:600} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important} .btn:hover{transform:none} } /* ---------- Django form plumbing ---------------------------------------- */ .errorlist{list-style:none;margin:6px 0 0;padding:0;color:#a92205;font-size:.85rem;font-weight:700} .errorlist li{margin-bottom:3px} .nonfield{background:#ffe9e5;color:#a92205;border-radius:12px;padding:14px 16px;font-weight:650;margin-bottom:18px} .messages{list-style:none;margin:0;padding:0} .messages li{padding:14px 18px;border-radius:12px;font-weight:650;margin-bottom:12px} .messages li.success{background:#e6fbf6;color:#046b5b} .messages li.error{background:#ffe9e5;color:#a92205} .messages li.info,.messages li.warning{background:#fff4d6;color:#8a5b00} .field input[type=checkbox]{width:auto} .checkline{display:flex;gap:10px;align-items:flex-start;font-weight:650;font-size:.92rem} .checkline input{margin-top:4px} .ribbon-month{cursor:default} /* ---------- car picker on the booking page ------------------------------ */ #carPicker .car{position:relative;margin:0} #carPicker .car:has(input:checked){outline:3px solid var(--ultra)} #carPicker .car:has(input:focus-visible){outline:3px solid var(--signal);outline-offset:3px} #carPicker .car.unavailable{opacity:.5} #carPicker .car.unavailable .avail{color:var(--signal)} .qty output{min-width:26px} /* ---------- hero backgrounds set from the dashboard ---------------------- */ /* .hero--custom clears the house gradient so the inline colour or photograph wins. */ .hero.hero--custom{background:none} .hero.hero--custom{background-color:var(--ink)} /* Dark text, for a pale colour or a bright photograph. */ .hero.hero--dark{color:var(--ink)} .hero.hero--dark .lede{color:rgba(20,16,51,.76)} .hero.hero--dark .hero-kicker{background:rgba(20,16,51,.09)} .hero.hero--dark .hero-stats .l{color:rgba(20,16,51,.68)} .hero.hero--dark::after{background:repeating-linear-gradient(90deg,var(--ink) 0 46px,transparent 46px 92px);opacity:.85} /* ---------- category chips ---------------------------------------------- */ .chip-count{ display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px; background:#e7e4f8;color:var(--muted);font-size:.76rem;font-weight:800 } .chip[aria-pressed="true"] .chip-count{background:rgba(255,255,255,.22);color:#fff} /* ---------- the quote follows you down the booking page ------------------ The sticky element is the