*, *::before, *::after { box-sizing: border-box; }
html { background: var(--aura-bg); scroll-behavior: smooth; }
body.aura {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--aura-bg);
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.aura-panel-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.aura-wrap {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
@media (max-width: 640px) { .aura-wrap {padding: 0 26px;} }
.aura-main { flex: 1 0 auto; }
.aura-skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--aura-accent); color: var(--aura-accent-text);
padding: .75rem 1.25rem;
}
.aura-skip:focus { left: 0; }
/* =========================== TYPE ======================================= */
h1, h2, h3, h4, h5, h6 {
font-family: var(--aura-font-display);
font-weight: 600; /* DM Sans ExtraBold */
margin: 0;
line-height: 1.05;
letter-spacing: 0.2rem; /* 800 is dense — pull it in a little harder */
color: var(--aura-text);
text-transform: uppercase;
}
p { margin: 0; }
/* Raleway: 400 body, 600 is our bold — 700 is never loaded, so asking for it
would make the browser synthesise a fake bold. */
b, strong { font-weight: 600; }
/* =========================== NAV ======================================== */
.aura-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 90;
transition: background-color .25s var(--aura-ease), border-color .25s var(--aura-ease);
border-bottom: 1px solid transparent;
}
.aura-nav__bar {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
height: 88px;
display: flex;
align-items: center;
gap: 28px;
}
@media (max-width: 640px) { .aura-nav__bar {padding: 0 16px;height: 35px;} }
/* solid once scrolled, and always solid on pages with no hero */
.aura-nav.is-stuck,
body.aura--flat .aura-nav {
/* Opacity derived from the token, not a hand-written hex. Change
--aura-bg once and this follows. --aura-nav-alpha tunes the strength. */
background: color-mix(in srgb, var(--aura-bg) var(--aura-nav-alpha, 57%), transparent);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom-color: var(--aura-border);
}
/* Fallback for engines without color-mix() — solid rather than wrong. */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
.aura-nav.is-stuck,
body.aura--flat .aura-nav { background: var(--aura-bg); }
}
body.aura--flat { padding-top: 0; }
body.aura--flat .aura-main { padding-top: 88px; }
@media (max-width: 640px) { body.aura--flat .aura-main { padding-top: 70px; } }
.aura-brand { display: flex; align-items: center; flex: 0 0 auto; }
.aura-brand img { max-height: 38px; width: auto; }
.aura-brand__name {
font-family: var(--aura-font-display);
font-size: 2rem;
font-weight: 680;
letter-spacing: -.03em;
color: var(--aura-text);
text-transform: uppercase;
}
.aura-brand__add {
font-size: .82rem; color: var(--aura-muted);
border: 1px dashed var(--aura-border);
padding: .35rem .8rem; border-radius: 100px;
}
.aura-nav__links { position: relative; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.aura-nav__link {
position: relative;
padding: 1rem .9rem;
color: var(--aura-accent);
transition: color var(--aura-dur) var(--aura-ease);
white-space: nowrap;
font-size: .8rem;
text-transform: uppercase;
letter-spacing: .1em;
}
.aura-nav__link:hover,
.aura-nav__link.is-active { color: var(--aura-text); }
/* One shared indicator instead of a per-item underline. JS slides it to
whatever is hovered and returns it to the active item on mouse-out.
It is 1px wide and scaled, so only transform animates — never width. */
.aura-nav__ink {
position: absolute;
left: 0;
bottom: .15rem;
/* 100px base, NOT 1px. A 1px element gets snapped to a whole device pixel
at non-100% browser zoom, so scaleX(width) then paints the wrong length —
at 125% zoom the bar came out ~80% too short. JS scales by width/100. */
width: 100px;
height: 1px;
background: var(--aura-accent);
transform: translateX(0) scaleX(0);
transform-origin: left center;
transition: transform .34s var(--aura-ease);
pointer-events: none;
will-change: transform;
}
/* before JS runs, fall back to marking the active item statically */
.aura-nav__links:not(.has-ink) .aura-nav__link.is-active::after {
content: "";
position: absolute; left: .9rem; right: .9rem; bottom: .15rem;
height: 2px; background: var(--aura-accent);
}
@media (max-width: 1100px) { .aura-nav__links { display: none; } }
.aura-nav__actions {display: flex;align-items: center;gap: 20px;margin-left: auto;}
.aura-nav__links + .aura-nav__actions { margin-left: 0; }
.aura-nav__phone {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .88rem; color: var(--aura-muted);
transition: color var(--aura-dur) var(--aura-ease);
}
.aura-nav__phone:hover { color: var(--aura-accent); }
.aura-nav__phone b {white-space: nowrap;color: var(--aura-text);font-weight: 500;}
@media (max-width: 900px) { .aura-nav__phone { display: none; } }
/* =========================== BUTTONS ==================================== */
.aura-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .7rem 1.4rem;
padding-left: 2rem;
border-radius: 100px;
border: 1px solid transparent;
font-family: var(--aura-font-ui);
font-size: .8rem;
font-weight: 500;
cursor: pointer;
text-transform: uppercase;
transition: background-color var(--aura-dur) var(--aura-ease),
color var(--aura-dur) var(--aura-ease),
border-color var(--aura-dur) var(--aura-ease),
transform var(--aura-dur) var(--aura-ease);
}
.aura-btn:active { transform: translateY(1px); }
.aura-btn--solid {background: var(--aura-accent);color: var(--aura-accent-text);}
.aura-btn--solid:hover { background: var(--aura-accent-hover); color: var(--aura-accent-text); }
.aura-btn--ghost {border-color: var(--aura-border);color: var(--aura-text);background: none;}
.aura-btn--ghost:hover {border-color: var(--aura-accent);color: var(--aura-accent);background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));}
.aura-btn--quiet { color: var(--aura-muted); }
.aura-btn--quiet:hover { color: var(--aura-danger); }
.aura-btn--block { width: 100%; }
@media (max-width: 640px) { .aura-nav__cta { display: none; } }
.aura-iconbtn {
background: none; border: 0; cursor: pointer;
color: var(--aura-muted); padding: 6px; line-height: 0;
transition: color var(--aura-dur) var(--aura-ease);
}
.aura-iconbtn:hover { color: var(--aura-text); }
/* =========================== ACCOUNT ==================================== */
/* Flex, not the default block: it holds the Sign-in button and the account
icon side by side, and on a text line they baseline-align at different
heights instead of centring against each other. */
.aura-account {
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.aura-account__btn {
display: inline-flex; align-items: center; gap: .5rem;
background: none; border: 0; cursor: pointer;
color: var(--aura-text); padding: 4px;
font-family: var(--aura-font-ui); font-size: .9rem;
}
.aura-account__label { color: var(--aura-muted); }
@media (max-width: 780px) { .aura-account__label, .aura-caret { display: none; } }
.aura-avatar {
width: 35px;
height: 35px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.aura-avatar--empty {color: var(--aura-text);}
.aura-caret { color: var(--aura-muted); }
.aura-menu.dropdown-menu {
background: var(--aura-surface);
border: 1px solid var(--aura-border);
border-radius: 16px;
padding: 6px;
min-width: 234px;
box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.aura-menu li { list-style: none; }
.aura-menu a {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .6rem .8rem; border-radius: 11px;
color: var(--aura-text); font-size: .92rem;
transition: background-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-menu a:hover {background: var(--aura-surface-alt);/* color: var(--aura-accent); */background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));}
.aura-menu a.is-danger { color: var(--aura-danger); }
.aura-menu__sep { height: 1px; background: var(--aura-border); margin: 6px 8px; }
.aura-badge {
min-width: 20px; height: 20px; padding: 0 6px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 100px; font-size: .68rem; font-weight: 600; font-style: normal;
}
.aura-badge--ok { background: #2ecc71; color: #06220f; }
.aura-badge--warn { background: var(--aura-accent); color: var(--aura-accent-text); }
.aura-badge--dot {
min-width: 8px;
width: 8px;
height: 8px;
padding: 0;
background: var(--aura-accent);
position: absolute;
top: 4px;
/* right: 22px; */
}
/* =========================== BURGER + PANEL ============================= */
.aura-burger {
display: none;
background: none; border: 1px solid var(--aura-border); cursor: pointer;
width: 40px; height: 40px; border-radius: 50%;
align-items: center; justify-content: center; flex-direction: column; gap: 5px;
transition: border-color var(--aura-dur) var(--aura-ease);
}
.aura-burger:hover { border-color: var(--aura-accent); }
.aura-burger span { display: block; width: 16px; height: 1.5px; background: var(--aura-text); }
@media (max-width: 1100px) { .aura-burger { display: inline-flex; } }
.aura-scrim {
position: fixed; inset: 0; z-index: 95;
background: rgba(0,0,0,.65);
opacity: 0; pointer-events: none;
transition: opacity .25s var(--aura-ease);
}
body.aura-panel-open .aura-scrim { opacity: 1; pointer-events: auto; }
.aura-panel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
width: min(400px, 88vw);
background: var(--aura-surface);
border-left: 1px solid var(--aura-border);
display: flex; flex-direction: column;
transform: translateX(101%);
transition: transform .32s var(--aura-ease);
overflow-y: auto;
}
body.aura-panel-open .aura-panel { transform: none; }
.aura-panel__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px;
}
.aura-panel__nav {padding: 20px 0;flex: 1 0 auto;}
.aura-panel__link {
display: flex;
align-items: center;
gap: .9rem;
padding: .95rem 1rem;
/* border-radius: 12px; */
font-family: var(--aura-font-display);
color: var(--aura-text);
border-bottom: 1px solid var(--aura-border);
transition: background-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-panel__link:hover { background: var(--aura-surface-alt); }
.aura-panel__link.is-active { color: var(--aura-accent); }
.aura-panel__idx {
font-size: .72rem; color: var(--aura-faint); font-family: var(--aura-font-ui);
letter-spacing: .08em; min-width: 20px;
}
.aura-panel__link .aura-badge { margin-left: auto; }
.aura-panel__foot {padding: 18px 22px 28px;display: grid;gap: 10px;}
.aura-panel__phone {
display: flex; flex-direction: column; gap: 2px; margin-top: 8px;
font-size: .85rem; color: var(--aura-muted);
}
.aura-panel__phone b { color: var(--aura-text); font-size: 1.05rem; font-weight: 500; }
.aura-panel__lang { display: flex; align-items: center; gap: .55rem; color: var(--aura-muted); font-size: .88rem; margin-top: 6px; }
.aura-panel__lang img { width: 22px; border-radius: 3px; }
/* =========================== HERO ======================================= */
.aura-hero {
position: relative;
min-height: clamp(320px, 62vh, 400px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
@media (max-width: 760px) {
.aura-hero { min-height: 350px; }
}
/* Oversized on purpose: the parallax shifts this vertically, and the extra
height above/below means an edge can never slide into view. */
.aura-hero__media {
position: absolute;
left: 0;
right: 0;
top: -14%;
height: 128%;
will-change: transform;
}
/* No drift animation — the only movement here is the JS parallax on the
wrapper. The slight scale stops the parallax revealing an edge. */
.aura-hero__media img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.04);
}
.aura-hero__media::after {
content: "";
position: absolute;
inset: 0;
background: #020a11a3;
}
/* ---- grid overlay ----
Static blueprint grid over the photo — it does NOT move, so it reads as
structure rather than decoration. Only the plus marks animate, fading in
and out at intersections that PHP picks at random per request. */
.aura-grid {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
mask-image: radial-gradient(125% 100% at 70% 42%, #000 22%, transparent 80%);
-webkit-mask-image: radial-gradient(125% 100% at 70% 42%, #000 22%, transparent 80%);
}
.aura-grid__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the plus: two hairlines, drawn from the centre out */
.aura-grid__mark {
position: absolute;
width: 26px; height: 26px;
margin: -13px 0 0 -13px;
opacity: 0;
animation: auraMarkBlink 9s var(--aura-ease) infinite;
}
.aura-grid__mark::before,
.aura-grid__mark::after {
content: "";
position: absolute;
background: var(--aura-accent);
}
.aura-grid__mark::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.aura-grid__mark::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
@keyframes auraMarkBlink {
0% { opacity: 0; transform: scale(.55); }
6% { opacity: .9; transform: scale(1); }
22% { opacity: .9; transform: scale(1); }
34%, 100% { opacity: 0; transform: scale(1); }
}
@media (max-width: 860px) { .aura-grid { opacity: .55; } }
.aura-hero__inner {
position: relative; z-index: 2;
width: 100%; max-width: 1280px; margin: 0 auto;
padding: 0 24px clamp(48px, 7vw, 92px);
}
@media (max-width: 640px) { .aura-hero__inner {padding: 0 26px 44px;} }
.aura-crumbs {display: flex;flex-wrap: wrap;align-items: center;gap: .5rem;font-size: .84rem;margin-bottom: 1.6rem;}
.aura-crumbs a { color: var(--aura-accent); transition: color var(--aura-dur) var(--aura-ease); }
.aura-crumbs a:hover { color: var(--aura-accent-hover); }
/* current page is not a link — let it recede so the accent reads as clickable */
.aura-crumbs span { color: var(--aura-muted); }
.aura-crumbs > * + *::before {content: "•";color: var(--aura-faint);margin-right: .5rem;}
.aura-hero__title {font-size: clamp(2.6rem, 6.4vw, 4.2rem);color: var(--aura-text);letter-spacing: -1px;}
/* ---- hero entrance ----
Each word rises out of its own clipping box; the crumbs and lead fade up
around it. transform/opacity only, and `both` fill means the end state is
held rather than snapping back. */
.aura-hero__word {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
/* room for descenders so overflow:hidden does not clip a 'p' or 'y' */
padding-bottom: .14em;
margin-bottom: -.14em;
font-weight: 800;
}
.aura-hero__word > span {
text-transform: uppercase;
display: inline-block;
transform: translateY(110%);
opacity: 0;
animation: auraWordUp .9s var(--aura-ease) both;
animation-delay: calc(var(--i) * 75ms + 140ms);
letter-spacing: -2px;
color: var(--aura-accent);
}
@keyframes auraWordUp {
to { transform: translateY(0); opacity: 1; }
}
.aura-crumbs { animation: auraHeroFade .7s var(--aura-ease) both; animation-delay: 60ms; }
@keyframes auraHeroFade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* =========================== SECTION ==================================== */
.aura-sec {padding: clamp(56px, 8vw, 50px) 0;}
.aura-sec__head {
display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
padding-bottom: 1.8rem; margin-bottom: 2.4rem;
border-bottom: 1px solid var(--aura-border);
}
.aura-sec__title {font-size: clamp(1.8rem, 3.4vw, 2.3rem);}
.aura-count {
font-family: var(--aura-font-display);
font-size: .86rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--aura-muted); white-space: nowrap;
}
.aura-count span { color: var(--aura-accent); font-size: 1.5rem; margin-right: .5rem; font-weight: 600; }
/* =========================== LOCATIONS (mosaic) ========================= */
.aura-locs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.aura-loc {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1.4rem;
min-height: 230px;
padding: 2rem 2.1rem 1.7rem;
background: var(--aura-surface);
border: 1px solid var(--aura-border);
border-radius: 20px;
transition: border-color var(--aura-dur) var(--aura-ease);
}
/* hover: the whole border turns gold (the old top hairline animation is gone) */
.aura-loc:hover { border-color: var(--aura-accent); }
/* the oversized index, bled off the corner */
.aura-loc__ghost {
position: absolute;
right: -.06em;
bottom: -.34em;
font-family: var(--aura-font-display);
font-size: 8.5rem;
font-weight: 600;
line-height: .8;
color: rgb(255 255 255 / 3%);
letter-spacing: -.05em;
pointer-events: none;
transition: color var(--aura-dur) var(--aura-ease),
transform .4s var(--aura-ease);
}
.aura-loc:hover .aura-loc__ghost {
color: rgb(255 255 255 / 12%);
transform: translateY(-4px);
}
.aura-loc__main { position: relative; z-index: 1; flex: 1 0 auto; }
.aura-loc__meta {
display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--aura-faint);
margin-bottom: .85rem;
}
.aura-loc__meta svg { color: var(--aura-accent); flex: 0 0 auto; }
.aura-loc__meta i { font-style: normal; color: rgba(255,255,255,.3); }
.aura-loc__meta i::before {content: " • ";}
.aura-loc__title {
font-size: 1.32rem;
font-weight: 600;
color: var(--aura-text);
max-width: 24ch;
line-height: 30px;
}
.aura-loc__contact {
list-style: none; padding: 0; margin: 1.1rem 0 0;
display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
}
.aura-loc__contact a {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .875rem; color: var(--aura-muted);
transition: color var(--aura-dur) var(--aura-ease);
}
.aura-loc__contact a svg { color: var(--aura-faint); transition: color var(--aura-dur) var(--aura-ease); }
.aura-loc__contact a:hover { color: var(--aura-accent); }
.aura-loc__contact a:hover svg { color: var(--aura-accent); }
.aura-loc__foot {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 1.1rem;
margin-top: auto;
}
.aura-loc__nogeo { font-size: .82rem; color: var(--aura-faint); }
.aura-loc__edit { font-size: .84rem; color: var(--aura-muted); }
.aura-loc__edit:hover { color: var(--aura-accent); }
@media (max-width: 860px) {
.aura-locs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.aura-loc {
min-height: 0;
padding: 1.7rem 1.6rem 1.5rem;
gap: 1.2rem;
}
.aura-loc__ghost { font-size: 6.5rem; right: -.04em; }
}
/* =========================== EMPTY ====================================== */
.aura-empty {
/* border: 1px dashed var(--aura-border); */
/* border-radius: 18px; */
/* padding: clamp(40px, 8vw, 80px) 24px; */
text-align: center;
display: grid;
justify-items: center;
gap: 1.1rem;
color: var(--aura-faint);
}
.aura-empty p { color: var(--aura-muted); max-width: 40ch; }
/* =========================== MEDIA BOX (4:3, matches the upload crop) ==== */
.aura-media {
position: relative; overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--aura-surface-alt);
border-radius: 14px;
}
.aura-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--aura-ease); }
.aura-media--zoom:hover > img { transform: scale(1.04); }
.aura-media--empty { display: flex; align-items: center; justify-content: center; border: 1px solid var(--aura-border); }
.aura-media--empty svg { width: 56px; height: 56px; color: var(--aura-faint); }
/* =========================== ALERT ====================================== */
.aura-alert {
background: rgba(255,193,7,.1);
border-bottom: 1px solid rgba(255,193,7,.3);
color: #ffd75e;
padding: .8rem 24px;
font-size: .9rem;
text-align: center;
}
/* =========================== FOOTER ===================================== */
.aura-foot {margin-top: auto;}
.aura-foot__top {
max-width: 1280px; margin: 0 auto;
padding: clamp(40px, 6vw, 72px) 24px;
/* brand left, link columns right — a grid, not a wrapping row: with long
labels (German "ALLGEMEINE GESCHÄFTSBEDINGUNGEN") the row ran out of
room and dropped the columns under the brand. Now the brand text gives
way and the columns keep their place; they stack only on small screens. */
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
gap: 3rem;
}
.aura-foot__brand { min-width: 0; }
@media (max-width: 900px) {
.aura-foot__top { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
}
/* Footer mark: the same logo as the nav, a touch larger. Falls back to the
company name as text when the tenant has not uploaded one. */
.aura-foot__logo { display: inline-flex; align-items: center; }
.aura-foot__logo img {max-height: 55px;width: auto;max-width: 160px;}
.aura-foot__logo .aura-brand__name {
font-family: var(--aura-font-display);
font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em;
color: var(--aura-text);
}
/* Footer disclosure — quiet, narrow measure so it reads as fine print
rather than competing with the link columns. */
.aura-foot__legal {
color: var(--aura-faint);
font-size: .82rem;
line-height: 1.7;
margin-top: 1.1rem;
max-width: 72ch;
}
/* Company name is its own element in front of the sentence, so it is never
embedded in a translatable string. */
.aura-foot__co {
color: var(--aura-muted);
font-weight: 600;
}
.aura-foot__co::after {
content: " · ";
color: var(--aura-faint);
font-weight: 400;
}
.aura-foot__cols { display: flex; flex-wrap: wrap; gap: 1.6rem clamp(1.6rem, 3vw, 3.5rem); }
.aura-foot__col { display: grid; gap: .6rem; align-content: start; }
.aura-foot__h {
font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
color: var(--aura-faint); margin-bottom: .3rem;
}
.aura-foot__col a {color: var(--aura-muted);font-size: .8rem;transition: color var(--aura-dur) var(--aura-ease);}
.aura-foot__col a:hover { color: var(--aura-accent); }
.aura-foot__lang { display: inline-flex; align-items: center; gap: .45rem; }
.aura-foot__lang img { width: 20px; border-radius: 3px; }
/* Powered-by now sits under the legal paragraph in the brand column; the old
full-width bottom bar is gone. */
.aura-foot__by {
font-size: .82rem;
color: var(--aura-faint);
margin-top: .7rem;
}
.aura-foot__by a { color: var(--aura-muted); transition: color var(--aura-dur) var(--aura-ease); }
.aura-foot__by a:hover { color: var(--aura-accent); }
@media (max-width: 640px) { .aura-foot__top { padding-left: 26px; padding-right: 26px; } }
/* =========================== MODAL ====================================== */
.aura-modal .modal-content {
background: var(--aura-surface);
border: 1px solid var(--aura-border);
border-radius: 20px;
color: var(--aura-text);
overflow: hidden;
}
.aura-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px;
}
.aura-modal__head h3 { font-size: 1.2rem; }
.aura-modal__search { position: relative; padding: 16px 22px 10px; }
.aura-modal__search svg { position: absolute; left: 36px; top: 50%; transform: translateY(-25%); color: var(--aura-faint); }
.aura-modal__search input {
width: 100%; padding: .75rem 1rem .75rem 2.6rem;
background: var(--aura-bg);
border: 1px solid var(--aura-border);
border-radius: 12px;
color: var(--aura-text); font-family: var(--aura-font-ui); font-size: .95rem;
}
.aura-modal__search input:focus { outline: none; border-color: var(--aura-accent); }
.aura-langs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 6px;
padding: 10px 22px 24px;
max-height: 56vh;
overflow-y: auto;
}
.aura-lang a {
display: flex; align-items: center; gap: .6rem;
padding: .6rem .7rem; border-radius: 11px;
border: 1px solid transparent;
font-size: .88rem; color: var(--aura-text);
transition: background-color var(--aura-dur) var(--aura-ease), border-color var(--aura-dur) var(--aura-ease);
}
.aura-lang a:hover { background: var(--aura-surface-alt); }
.aura-lang.is-active a { border-color: var(--aura-accent); }
.aura-lang img { width: 22px; border-radius: 3px; }
.aura-lang i { color: var(--aura-faint); font-style: normal; }
/* =========================== TO TOP ===================================== */
.aura-totop {
position: fixed; right: 22px; bottom: 22px; z-index: 80;
width: 44px; height: 44px; border-radius: 50%;
background: var(--aura-accent); color: var(--aura-accent-text);
border: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0; transform: translateY(10px); pointer-events: none;
transition: opacity var(--aura-dur) var(--aura-ease), transform var(--aura-dur) var(--aura-ease);
}
.aura-totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
/* =========================== MOTION ===================================== */
/* transform + opacity only — the compositor never touches layout */
/* Hidden ONLY when JS is confirmed running (html.aura-js is set in ).
Without JS these stay visible — the animation is an enhancement, never a
precondition for seeing the content. */
.aura-js [data-aura-reveal] {
opacity: 0;
transform: translateY(14px);
transition: opacity .45s var(--aura-ease), transform .45s var(--aura-ease);
}
.aura-js [data-aura-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
transition-duration: .001ms !important;
}
[data-aura-reveal] { opacity: 1; transform: none; }
/* hero copy appears immediately, no rise */
.aura-hero__word > span,
.aura-crumbs { animation: none; opacity: 1; transform: none; }
/* no drift, no parallax — JS already skips the scroll transforms */
/* network stays, but static: drawn, visible, not moving */
/* grid stays visible, just stops moving */
/* grid is already static */
.aura-grid__mark { animation: none; opacity: .7; transform: none; }
}
/* =========================== MISC ======================================= */
::selection { background: var(--aura-accent); color: var(--aura-accent-text); }
* { scrollbar-color: var(--aura-border) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--aura-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--aura-faint); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--aura-accent);
outline-offset: 3px;
}
/* ---- chevron in buttons/links ---- */
/* Nudges forward on hover so the affordance reads as "go", without the
diagonal arrow's visual noise. transform only. */
.aura-chev {
flex: 0 0 auto;
transition: transform var(--aura-dur) var(--aura-ease);
}
.aura-btn:hover .aura-chev,
a:hover > .aura-chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .aura-chev { transition: none; } }
/* =========================== AUTH / FORMS =============================== */
.aura-auth {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
gap: 2.5rem;
align-items: start;
}
@media (max-width: 900px) { .aura-auth { grid-template-columns: minmax(0,1fr); gap: 1.6rem; } }
.aura-auth__main {
background: var(--aura-surface);
border: 1px solid var(--aura-border);
border-radius: 20px;
padding: clamp(1.5rem, 3vw, 2.6rem);
}
/* ---- segmented tabs (Sign in / Sign up / Recover) ---- */
.aura-tabs {
gap: 2px;
padding: 4px;
margin-bottom: 1.8rem;
border: 1px solid var(--aura-border);
border-radius: 100px;
width: max-content;
max-width: 100%;
}
.aura-tab {
flex: 0 0 auto; /* never squash a label to make room */
padding: .5rem 1.1rem;
border-radius: 100px;
font-size: .9rem; font-weight: 500;
color: var(--aura-muted);
white-space: nowrap;
transition: background-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-tab:hover { color: var(--aura-text); }
.aura-tab.is-active { background: var(--aura-accent); color: var(--aura-accent-text); }
/* ---- fields ---- */
.aura-form { display: grid; gap: 1.15rem; }
.aura-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .aura-grid2 { grid-template-columns: 1fr; } }
.aura-field { display: grid; gap: .45rem; min-width: 0; }
.aura-field > label {
font-size: .78rem;
letter-spacing: .09em;
text-transform: uppercase;
color: var(--aura-faint);
}
.aura-control { position: relative; display: block; }
.aura-control__icon {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: var(--aura-faint);
pointer-events: none;
z-index: 2;
transition: color var(--aura-dur) var(--aura-ease);
}
.aura-control:focus-within .aura-control__icon { color: var(--aura-accent); }
body .aura-input {
width: 100%;
background: var(--aura-bg);
border: 1px solid var(--aura-border);
border-radius: 12px;
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: .85rem;
padding: .8rem 1rem;
transition: border-color var(--aura-dur) var(--aura-ease),
box-shadow var(--aura-dur) var(--aura-ease);
}
.aura-control__icon ~ .aura-input { padding-left: 2.6rem; }
body .aura-input::placeholder { color: var(--aura-faint); }
body .aura-input:focus {
outline: none;
border-color: var(--aura-accent);
}
body .aura-input:-webkit-autofill,
body .aura-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--aura-text);
-webkit-box-shadow: 0 0 0 1000px var(--aura-bg) inset;
}
/* password eye */
.aura-control__toggle {
position: absolute;
right: 12px; top: 50%;
transform: translateY(-50%);
color: var(--aura-faint);
cursor: pointer;
z-index: 3;
line-height: 0;
transition: color var(--aura-dur) var(--aura-ease);
}
.aura-control__toggle:hover { color: var(--aura-text); }
/* ---- validation states (Bootstrap adds .was-validated on submit) ---- */
.was-validated .aura-input:invalid {
border-color: var(--aura-danger);
/* box-shadow: 0 0 0 3px color-mix(in srgb, var(--aura-danger) 18%, transparent); */
}
.was-validated .aura-input:valid { border-color: color-mix(in srgb, #2ecc71 55%, transparent); }
.was-validated .aura-input:invalid ~ .aura-control__icon { color: var(--aura-danger); }
/* ---- intl-tel-input, themed to match ---- */
.aura-field--phone .iti { display: block; width: 100%; }
.aura-field--phone .iti__selected-country { background: transparent; border-radius: 12px 0 0 12px; }
.aura-field--phone .iti__selected-country:hover {/* background: var(--aura-surface-alt); */}
.aura-field--phone .iti__selected-dial-code { color: var(--aura-muted); margin-left: 4px; }
.aura-field--phone .iti__arrow { border-top-color: var(--aura-faint); }
.iti__dropdown-content {
background: var(--aura-surface);
border: 1px solid var(--aura-border);
border-radius: 14px;
color: var(--aura-text);
overflow: hidden;
}
.iti__search-input {
background: var(--aura-bg) !important;
border: 1px solid var(--aura-border) !important;
color: var(--aura-text) !important;
border-radius: 10px !important;
padding: .55rem .75rem !important;
margin: 10px !important;
width: calc(100% - 20px) !important;
}
.iti__country { color: var(--aura-text); }
.iti__country:hover, .iti__country.iti__highlight { background: var(--aura-surface-alt) !important; }
.iti__country-name { color: var(--aura-text); }
.iti__dial-code { color: var(--aura-faint); }
/* ---- password rules ---- */
.aura-form__note { color: var(--aura-muted); font-size: .9rem; margin-top: .3rem; }
.aura-rules { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.aura-rules .icon-text-wrapper { display: flex; align-items: center; gap: .5rem; }
.aura-rules .icon-container { display: inline-flex; width: 16px; justify-content: center; }
.aura-rules li.text-danger { color: var(--aura-faint) !important; }
.aura-rules li.text-success { color: #2ecc71 !important; }
.aura-wait { color: var(--aura-muted); font-size: .85rem; display: flex; align-items: center; }
.aura-form__submit { justify-self: start; padding-inline: 2.2rem; }
.aura-form__submit:disabled { opacity: .5; cursor: not-allowed; }
/* ---- session message ---- */
.aura-note {
/* centre, not flex-start: the close button is taller than a single line of
text, so top-aligning left the message sitting above the button's middle */
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .85rem 1rem;
border-radius: 12px;
font-size: .9rem;
line-height: 1.5;
margin-bottom: 1.2rem;
border: 1px solid var(--aura-border);
background: var(--aura-surface-alt);
color: var(--aura-text);
}
.aura-note > span { flex: 1 1 auto; min-width: 0; }
.aura-note .aura-iconbtn { flex: 0 0 auto; }
.aura-note--danger {border-color: var(--aura-danger);color: #dc003f;background: #dc003f14;}
.aura-note--success {border-color: color-mix(in srgb, #2ecc71 45%, transparent);color: #2ecc71;background: #27be471a;}
.aura-note--warning { border-color: rgba(255,193,7,.45); color: #ffd75e; }
/* ---- aside: reasons to sign up, no cards ---- */
/* Both columns open with an h2 at the same height, so the two headings
sit on one line across the grid. */
/* min-width:0 is load-bearing. Grid items default to min-width:auto, so a
max-content child (the tab strip) makes the column refuse to shrink and
the whole card overflows the viewport — inputs included. */
.aura-auth__col { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.aura-auth__side { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.aura-auth__main { min-width: 0; }
.aura-form, .aura-grid2, .aura-field, .aura-control { min-width: 0; }
.aura-auth__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.aura-why { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.aura-why li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: start;
padding: 1.2rem 1.3rem;
background: var(--aura-surface);
border: 1px solid var(--aura-border);
border-radius: 16px;
transition: border-color var(--aura-dur) var(--aura-ease);
}
.aura-why li:hover { border-color: rgba(255,255,255,.26); }
.aura-why__idx {
font-family: var(--aura-font-display);
font-size: .82rem; font-weight: 600; letter-spacing: .04em;
color: var(--aura-accent);
padding-top: .18rem;
}
.aura-why h3 {font-size: 1rem;}
.aura-why p { color: var(--aura-muted); font-size: .88rem; line-height: 1.65; max-width: 38ch; }
.aura-auth__recover {
display: flex; flex-wrap: wrap; gap: .4rem;
font-size: .88rem; color: var(--aura-muted);
}
.aura-auth__recover a { color: var(--aura-accent); }
.aura-auth__recover a:hover { color: var(--aura-accent-hover); }
/* =========================== NAV, SMALL SCREENS ========================= */
/* The links are display:none below 1100px, but `.aura-nav__links + .aura-nav__actions`
still matches (the element is hidden, not removed), so the actions kept
margin-left:0 and sat next to the logo instead of at the right edge. */
@media (max-width: 1100px) {
.aura-nav__links + .aura-nav__actions,
.aura-nav__actions { margin-left: auto; }
.aura-nav__bar { gap: 12px; }
}
@media (max-width: 640px) {
.aura-brand img {
max-width: 160px;
max-height: 40px;
width: auto;
height: auto;
}
.aura-nav__actions { gap: 8px; }
}
/* =========================== SCROLLER (reusable) ========================
A one-line horizontal strip that hides its overflow and scrolls inside
itself. Children never wrap and never shrink. JS (footer.php) scrolls the
.is-active child into view on load and toggles the edge fades.
Use it on anything that can outgrow its container in another language:
…
========================================================================= */
.aura-scroller {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* old Edge */
}
.aura-scroller::-webkit-scrollbar { display: none; } /* Blink / WebKit */
.aura-scroller > * { flex: 0 0 auto; }
/* Edge fades, so a partly visible item reads as "there is more" instead of
looking clipped. Classes are set by JS from the scroll position. A mask is
used rather than an overlay so it works over any background. */
.aura-scroller.can-scroll-end {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent 100%);
}
.aura-scroller.can-scroll-start {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px);
mask-image: linear-gradient(90deg, transparent 0, #000 46px);
}
.aura-scroller.can-scroll-start.can-scroll-end {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 46px, #000 calc(100% - 46px), transparent 100%);
}
/* Hide the supporting column once the auth grid stacks. Declared at the end
of the file on purpose: the base .aura-auth__side{display:grid} rule sits
further down than the 900px block, so an override up there loses on source
order despite matching. */
@media (max-width: 900px) {
.aura-auth__side { display: none; }
}
/* ---- recover step indicator ---- */
.aura-steps li { opacity: .55; transition: opacity var(--aura-dur) var(--aura-ease); }
.aura-steps li.is-current { opacity: 1; border-color: color-mix(in srgb, var(--aura-accent) 45%, transparent); }
.aura-steps li.is-done { opacity: .8; }
.aura-steps li.is-done .aura-why__idx { color: #2ecc71; }
.aura-steps li:not(.is-current) .aura-why__idx { color: var(--aura-faint); }
/* verification code field reads as a code, not prose */
.aura-input--code { letter-spacing: .24em; font-size: 1.05rem; }
/* ---- intl-tel-input: undo legacy style.css offsets ----
style.css ships rules that shift the tel input (top:-4px) and the country
container (top:-10px; height:60px), which left the phone field sitting 4px
above the email field beside it. Pin everything to the field box instead. */
.aura-field--phone .iti { position: relative; display: block; }
.aura-field--phone .iti__tel-input {
top: 0 !important;
position: relative;
}
.aura-field--phone .iti__country-container {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
height: auto !important;
padding: 0 !important;
/* NOT flex: the dropdown is a child here, and making this a flex container
turned the dropdown into a flex item and broke its anchoring. */
}
.aura-field--phone .iti__selected-country {
height: 100% !important;
padding: 0 .75rem !important;
border-radius: 12px 0 0 12px;
}
.aura-field--phone .iti__selected-country-primary { padding: 0 !important; }
/* Dropdown hangs below the field, never over it. */
.aura-field--phone .iti__dropdown-content {
position: absolute;
top: calc(100% + 6px) !important;
bottom: auto !important;
left: 0 !important;
z-index: 60;
/* min-width: 320px; */
max-width: min(380px, 86vw);
max-height: 320px;
overflow-y: auto;
}
.aura-field--phone .iti__dropdown-content.iti__hide { display: none; }
/* footer language: chevron signals it opens the language modal */
.aura-foot__lang { gap: .5rem; }
.aura-foot__lang-caret {
flex: 0 0 auto;
color: var(--aura-faint);
transition: transform var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-foot__lang:hover .aura-foot__lang-caret {
color: var(--aura-accent);
transform: translateY(1px);
}
/* =========================== CONTACT ==================================== */
/* Note: deliberately NOT .aura-auth__side — that column is hidden below 900px,
and both of these must survive on a phone. */
.aura-contact {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
align-items: start;
}
@media (max-width: 900px) { .aura-contact { grid-template-columns: minmax(0,1fr); gap: 1.8rem; } }
.aura-contact__col { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.aura-contact__card {
background: var(--aura-surface);
border: 1px solid var(--aura-border);
border-radius: 20px;
padding: clamp(1.3rem, 2.4vw, 2rem);
min-width: 0;
}
/* Branches panel: plain column, no card. It stays visible on mobile — it is
real data, not decoration, unlike the auth pages supporting column. */
.aura-contact__cta {
display: grid;
gap: 1.1rem;
justify-items: start;
align-content: start;
padding-top: .3rem;
}
.aura-contact__cta p { color: var(--aura-muted); font-size: .92rem; line-height: 1.7; max-width: 46ch; }
/* label / value rows */
.aura-crow {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 1rem;
padding: .95rem 0;
border-bottom: 1px solid var(--aura-border);
/* start, not the default stretch: with a multi-line value the label cell
stretched and centred its text against the whole block */
align-items: start;
}
.aura-crow:first-child { padding-top: 0; }
.aura-crow:last-child { border-bottom: 0; padding-bottom: 0; }
.aura-crow__k {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--aura-faint);
/* the label is smaller than the value, so top-aligning the boxes leaves the
text riding ~3px high — nudge it onto the value first line */
padding-top: 4.5px;
}
.aura-crow__k svg { color: var(--aura-accent); flex: 0 0 auto; }
.aura-crow__v { color: var(--aura-text); font-size: .95rem; line-height: 1.7; word-break: break-word; }
.aura-crow__v a { color: var(--aura-text); transition: color var(--aura-dur) var(--aura-ease); }
.aura-crow__v a:hover { color: var(--aura-accent); }
@media (max-width: 520px) {
.aura-crow { grid-template-columns: minmax(0,1fr); gap: .35rem; }
}
/* =========================== LEGACY VIEW SHIM ===========================
Views still on the default template's markup use Bootstrap surface classes
that paint white. Neutralise them inside aura so an unmigrated page reads
dark while its body is rebuilt. Remove a line once its page is migrated. */
body.aura .bg-white,
body.aura .bg-light { background: transparent !important; color: inherit; }
/* =========================== FLEET / VEHICLE CARD ======================= */
.aura-fleet {
display: grid;
/* 240 not 260: beside the 300px filter column the main column lands at
~850px, where a 260px minimum plus the gaps overshoots by a hair and
auto-fill drops to two very wide cards. */
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 4rem 2rem; /* generous, especially vertically */
width: 100%;
}
@media (max-width: 560px) { .aura-fleet { grid-template-columns: minmax(0,1fr); gap: 2.4rem; } }
/* auto media + 1fr body, so the price and the CTA sit on one line across
a row of cards however much the names and spec lists differ */
.aura-vh {display: grid;grid-template-rows: auto .5fr;gap: 1rem;min-width: 0;}
/* ---- media: 4:3 box that fades into the page at the bottom ---- */
.aura-vh__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: 18px;
overflow: hidden;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
}
.aura-vh__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .2s var(--aura-ease);
}
.aura-vh:hover .aura-vh__media img { transform: scale(1.03); }
.aura-vh__noimg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
}
.aura-vh__noimg svg { width: 72px; color: var(--aura-faint); opacity: .5; }
/* Category and availability sit together in one row at top-left. They used
to be pinned to opposite corners in different colours — the green pill in
particular belonged to a different design than the rest of the card. */
.aura-vh__tags {
position: absolute; top: 12px; left: 12px; right: 12px; z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 6px;
pointer-events: none; /* the whole media box is the link */
}
.aura-vh__tags > * { pointer-events: auto; }
.aura-vh__chip,
.aura-vh__flag {
padding: .2rem .6rem;
border-radius: 100px;
background: color-mix(in srgb, var(--aura-bg) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--aura-border);
font-size: .66rem;
font-weight: 500;
color: var(--aura-muted);
text-transform: capitalize;
white-space: nowrap;
}
/* the availability note is a sentence fragment, not an enum value */
.aura-vh__flag {text-transform: none;color: var(--aura-muted);}
/* ---- body ---- */
.aura-vh__body { display: flex; flex-direction: column; gap: .65rem; min-width: 0; }
.aura-vh__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.aura-vh__name { font-size: 1.22rem; font-weight: 700; letter-spacing: -.01em; min-width: 0; }
/* the name carries the accent by default; hover brightens it rather than
switching hue, so nothing jumps */
.aura-vh__name a {color: var(--aura-accent);text-transform: math-auto;transition: color var(--aura-dur) var(--aura-ease);}
.aura-vh__name a:hover { color: var(--aura-accent-hover); }
.aura-vh__edit { font-size: .8rem; color: var(--aura-muted); flex: 0 0 auto; }
.aura-vh__edit:hover { color: var(--aura-accent); }
.aura-vh__specs {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
font-size: .85rem; color: var(--aura-muted);
}
.aura-vh__specs li { display: inline-flex; align-items: center; gap: .4rem; text-transform: capitalize; }
.aura-vh__specs svg { color: var(--aura-faint); flex: 0 0 auto; }
/* nowrap on purpose: at 260px a four-figure price used to push the button
onto its own line, which lifted that one card's foot out of line with
its neighbours. The price shrinks instead. */
.aura-vh__foot {
display: flex; align-items: center; justify-content: space-between;
gap: .75rem; flex-wrap: nowrap;
margin-top: auto;
padding-top: .9rem;
border-top: 1px solid var(--aura-border);
}
.aura-vh__price {
display: flex;
align-items: baseline;
gap: .35rem;
margin: 0;
min-width: 0;
}
.aura-vh__price b { white-space: nowrap; }
.aura-vh__per {
font-size: .82rem;
color: var(--aura-faint);
white-space: nowrap;
}
.aura-vh__price b {
font-family: var(--aura-font-display);
font-size: clamp(1.15rem, 1.7vw, 1.22rem);
font-weight: 600;
letter-spacing: -.02em;
color: var(--aura-text);
}
/* A round button instead of a labelled pill: three of these side by side
were the loudest thing on the page. The label survives as the accessible
name and the tooltip. */
.aura-vh__go {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
display: none;
border-radius: 100px;
background: var(--aura-accent);
color: var(--aura-accent-text);
transition: background-color var(--aura-dur) var(--aura-ease);
}
.aura-vh__go:hover,
.aura-vh__go:focus-visible { background: var(--aura-accent-hover); color: var(--aura-accent-text); }
/* =========================== PAGINATION ================================= */
/* Bootstrap paints these light; retheme them and give the block breathing
room above, since the fleet grid now ends with a generous gap. */
.pagination-sec {
grid-column: 1 / -1;
width: 100%;
margin-top: 3.5rem;
display: grid;
gap: .9rem;
justify-items: center;
}
.pagination-sec .text-muted { color: var(--aura-muted) !important; font-size: .86rem; }
body .pagination {
display: flex;
align-items: center;
gap: 6px;
margin: 0 !important;
padding: 0;
list-style: none;
flex-wrap: wrap;
justify-content: center;
}
body .pagination .page-item { padding: 0 !important; }
body .pagination .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 .7rem;
border-radius: 100px;
background: transparent !important;
border: 1px solid var(--aura-border) !important;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
font-size: .9rem;
font-weight: 500;
box-shadow: none !important;
transition: border-color var(--aura-dur) var(--aura-ease),
color var(--aura-dur) var(--aura-ease),
background-color var(--aura-dur) var(--aura-ease);
}
body .pagination .page-link svg { fill: currentColor; }
body .pagination .page-link:hover { border-color: var(--aura-accent) !important; color: var(--aura-text); }
body .pagination .page-link:focus { box-shadow: none !important; outline: none; }
body .pagination .page-item.active .page-link {
background: var(--aura-accent) !important;
border-color: var(--aura-accent) !important;
color: var(--aura-accent-text) !important;
}
/* Bootstrap sets a background AND border colour on .page-item.disabled
.page-link with more class specificity than the base rule, so both have to
be restated here or the disabled arrow renders as a grey filled pill. */
body .pagination .page-item.disabled .page-link,
body .pagination .page-item.disabled > .page-link {
background: transparent !important;
border-color: var(--aura-border) !important;
color: var(--aura-faint) !important;
opacity: .4;
pointer-events: none;
}
/* =========================== FLEET FILTER BAR ===========================
One bar, everything live. It is deliberately flat — no card, no shadow —
so it reads as part of the page rather than a floating widget. */
.aura-filters {
grid-column: 1 / -1;
width: 100%;
display: grid;
gap: 1.4rem;
margin: 0 0 2.8rem;
padding: 0 0 1.6rem;
border-bottom: 1px solid var(--aura-border);
min-width: 0;
}
/* ---- search ---- */
.aura-filters__search {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
padding: .8rem 1rem;
border: 1px solid var(--aura-border);
/* 12px, matching .aura-drop__trigger: pills are for actions and toggles
in this template, rounded rects are for fields */
border-radius: 12px;
transition: border-color var(--aura-dur) var(--aura-ease);
}
.aura-filters__search:focus-within {border-color: var(--aura-accent);background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));}
.aura-filters__search > svg { color: var(--aura-faint); flex: 0 0 auto; }
.aura-filters__search input {
flex: 1 1 auto;
min-width: 0;
padding: 0;
background: none;
border: 0;
outline: none;
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: .88rem;
font-weight: 500;
}
.aura-filters__search input::placeholder { color: var(--aura-faint); font-weight: 400; }
/* kill the UA's own clear affordance — we ship our own */
.aura-filters__search input::-webkit-search-cancel-button,
.aura-filters__search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.aura-filters__clear {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px;
padding: 0;
border: 1px solid var(--aura-border);
border-radius: 100px;
background: none;
color: var(--aura-muted);
cursor: pointer;
transition: color var(--aura-dur) var(--aura-ease),
border-color var(--aura-dur) var(--aura-ease);
}
.aura-filters__clear:hover { color: var(--aura-text); border-color: var(--aura-accent); }
/* ---- category chips (inside the reusable .aura-scroller) ---- */
.aura-filters__cats { min-width: 0; gap: .5rem; padding-bottom: 2px; }
.aura-chip {
flex: 0 0 auto;
padding: 0.58rem .85rem;
border: 1px solid var(--aura-border);
border-radius: 12px;
background: none;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
font-size: .8rem;
font-weight: 500;
white-space: nowrap;
text-transform: capitalize;
cursor: pointer;
transition: color var(--aura-dur) var(--aura-ease),
border-color var(--aura-dur) var(--aura-ease),
background-color var(--aura-dur) var(--aura-ease);
}
.aura-chip:hover {color: var(--aura-text);border-color: var(--aura-accent);background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));}
/* the active chip is outlined, not filled — a row of solid orange pills
fought the CTAs for attention */
.aura-chip.is-active {
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
border-color: var(--aura-accent);
color: var(--aura-text);
font-weight: 600;
}
/* ---- selects + price, one row ---- */
.aura-filters__row {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.5fr);
gap: 1.2rem 1.6rem;
align-items: end;
min-width: 0;
}
@media (max-width: 900px) {
.aura-filters__row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.aura-filters__row .aura-range { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.aura-filters__row { grid-template-columns: minmax(0,1fr); }
}
.aura-sel {
display: grid;
gap: .35rem;
min-width: 0;
cursor: pointer;
}
.aura-sel > span {
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--aura-faint);
}
.aura-sel select {
width: 100%;
min-width: 0;
padding: .6rem 2rem .6rem 0;
background: none;
border: 0;
border-bottom: 1px solid var(--aura-border);
border-radius: 0;
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: .95rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
/* chevron drawn inline so it inherits nothing from Bootstrap */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right .2rem center;
background-size: 15px;
transition: border-color var(--aura-dur) var(--aura-ease);
}
.aura-sel select:focus { outline: none; border-color: var(--aura-accent); }
.aura-sel.is-set select { border-color: var(--aura-accent); }
/* the native dropdown list paints on the OS surface, so it needs real colours */
.aura-sel select option { background: #0b141b; color: #ffffff; }
/* ---- dual-handle price range ----
Two stacked . Both native tracks are transparent; the
visible track and fill are the wrapper's own divs, so the pair reads as
one control. Only the thumbs stay hit-testable. */
.aura-range { display: grid; gap: .35rem; min-width: 0; }
.aura-range__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem;
}
.aura-range__head > span {
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--aura-faint);
}
.aura-range__out {
font-family: var(--aura-font-ui);
font-size: .9rem; font-weight: 600;
color: var(--aura-text);
white-space: nowrap;
}
.aura-range__track {
position: relative;
height: 40px;
display: flex;
align-items: center;
}
.aura-range__track::before {
content: '';
position: absolute; left: 0; right: 0; top: 50%;
height: 2px;
transform: translateY(-50%);
background: var(--aura-border);
}
.aura-range__fill {
position: absolute; top: 50%;
height: 2px;
transform: translateY(-50%);
background: var(--aura-accent);
}
.aura-range input[type="range"] {
position: absolute;
left: 0; width: 100%;
margin: 0;
height: 40px;
background: none;
appearance: none;
-webkit-appearance: none;
pointer-events: none; /* the track must not swallow clicks */
outline: none;
}
.aura-range input[type="range"]::-webkit-slider-runnable-track {
height: 40px; background: none; border: 0;
}
.aura-range input[type="range"]::-moz-range-track {
height: 40px; background: none; border: 0;
}
.aura-range input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
pointer-events: auto;
width: 16px; height: 16px;
margin-top: 12px; /* centre against the 40px track */
border-radius: 100px;
background: var(--aura-bg);
border: 3px solid var(--aura-accent);
cursor: grab;
transition: transform var(--aura-dur) var(--aura-ease);
}
.aura-range input[type="range"]::-moz-range-thumb {
pointer-events: auto;
width: 16px; height: 16px;
border-radius: 100px;
background: var(--aura-bg);
border: 3px solid var(--aura-accent);
cursor: grab;
transition: transform var(--aura-dur) var(--aura-ease);
}
.aura-range input[type="range"]:hover::-webkit-slider-thumb,
.aura-range input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
.aura-range input[type="range"]:hover::-moz-range-thumb,
.aura-range input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.15); }
.aura-range input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
/* ---- count + reset ---- */
.aura-filters__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.aura-filters__count {
margin: 0;
font-size: .86rem;
color: var(--aura-muted);
}
.aura-filters__reset {padding: .65rem 1rem;font-size: .7rem;background: none;}
/* =========================== SKELETONS =================================
Used two ways: a whole placeholder grid while a search settles, and a
single slot holding the space a card is about to occupy. */
.aura-sk {
display: grid;
gap: 1rem;
min-width: 0;
}
.aura-sk__media {
aspect-ratio: 4 / 3;
border-radius: 18px;
background: var(--aura-border);
}
.aura-sk__line {
height: 11px;
border-radius: 100px;
background: var(--aura-border);
}
.aura-sk__line--lg { height: 15px; width: 68%; }
.aura-sk__line--sm { height: 10px; width: 40%; }
.aura-sk__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.aura-sk__foot .aura-sk__line--sm { flex: 0 0 40%; }
.aura-sk__pill {
flex: 0 0 auto;
width: 96px; height: 34px;
border-radius: var(--aura-radius-pill);
background: var(--aura-border);
}
/* one pulse, driven by opacity only */
.aura-sk__media,
.aura-sk__line,
.aura-sk__pill { animation: aura-pulse 1.25s var(--aura-ease) infinite; }
.aura-sk:nth-child(2n) .aura-sk__media { animation-delay: .08s; }
.aura-sk:nth-child(3n) .aura-sk__media { animation-delay: .16s; }
@keyframes aura-pulse {
0%, 100% { opacity: .45; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.aura-sk__media, .aura-sk__line, .aura-sk__pill { animation: none; opacity: .6; }
}
/* =========================== EMPTY STATE =============================== */
.aura-fleet__empty {
grid-column: 1 / -1;
width: 100%;
display: grid;
gap: 1.1rem;
justify-items: center;
text-align: center;
padding: 5rem 1rem;
color: var(--aura-muted);
}
.aura-fleet__empty p { margin: 0; font-size: 1.05rem; }
/* =========================== CLIENT PAGER ==============================
Replaces the server pagination on the fleet page: same look, no reload. */
.aura-pager {
grid-column: 1 / -1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 3.5rem;
}
.aura-pager__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 .7rem;
border: 1px solid var(--aura-border);
border-radius: var(--aura-radius-pill);
background: none;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
font-size: .9rem;
font-weight: 500;
cursor: pointer;
transition: color var(--aura-dur) var(--aura-ease),
border-color var(--aura-dur) var(--aura-ease),
background-color var(--aura-dur) var(--aura-ease);
}
.aura-pager__btn:hover:not(:disabled) { color: var(--aura-text); border-color: var(--aura-accent); }
.aura-pager__btn.is-active {
/* background: var(--aura-accent); */
border-color: var(--aura-accent);
}
.aura-pager__btn:disabled { opacity: .35; cursor: default; }
.aura-pager__btn--io { padding: 0; }
/* =========================== FLEET PAGE LAYOUT =========================
Results left, filters right on desktop. The filter column is sticky so it
stays reachable down a long fleet. Source order puts the filters first, so
the single-column fallback shows them above the results — the small-screen
arrangement is still open, this is only the sane default. */
.aura-fleetpage {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 0 3.5rem;
align-items: start;
width: 100%;
}
.aura-fleetpage__main { grid-column: 1; grid-row: 1; min-width: 0; }
.aura-fleetpage__side {
grid-column: 2; grid-row: 1;
min-width: 0;
position: sticky;
top: 96px;
}
@media (max-width: 1100px) {
.aura-fleetpage { grid-template-columns: minmax(0, 1fr) 260px; gap: 0 2.5rem; }
}
@media (max-width: 900px) {
.aura-fleetpage { grid-template-columns: minmax(0, 1fr); gap: 0; }
.aura-fleetpage__side { grid-column: 1; grid-row: 1; position: static; }
.aura-fleetpage__main { grid-column: 1; grid-row: 2; }
}
/* the bar is a column now: its own border no longer reads as a rule under
the page, and the three selects stack instead of sharing a row */
.aura-fleetpage__side .aura-filters {
margin: 0;
padding: 0;
border-bottom: 0;
gap: 1.6rem;
}
.aura-fleetpage__side .aura-filters__row {
grid-template-columns: minmax(0, 1fr);
gap: 1.4rem;
}
.aura-fleetpage__side .aura-filters__search input { font-size: .85rem; }
@media (min-width: 901px) {
/* three equal columns rather than flex wrapping: every chip is the same
width and the columns line up, and a short last row keeps its column
instead of stretching across the sidebar */
.aura-fleetpage__side .aura-filters__cats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .4rem;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.aura-fleetpage__side .aura-chip {
width: 100%;
padding-left: .3rem;
padding-right: .3rem;
font-size: .74rem;
}
}
.aura-fleetpage__side .aura-filters__foot {
padding-top: .4rem;
border-top: 1px solid var(--aura-border);
flex-direction: column;
align-items: stretch;
gap: .8rem;
}
.aura-fleetpage__side .aura-filters__reset { justify-content: center; }
@media (max-width: 900px) {
.aura-fleetpage__side .aura-filters {
margin: 0 0 2.8rem;
padding: 0 0 1.6rem;
border-bottom: 1px solid var(--aura-border);
}
.aura-fleetpage__side .aura-filters__row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.aura-fleetpage__side .aura-filters__row .aura-range { grid-column: 1 / -1; }
.aura-fleetpage__side .aura-filters__foot {
flex-direction: row;
align-items: center;
border-top: 0;
padding-top: 0;
}
}
@media (max-width: 520px) {
.aura-fleetpage__side .aura-filters__row { grid-template-columns: minmax(0,1fr); }
}
/* =========================== STYLED DROPDOWN ===========================
Built over each `.aura-sel select` by the runtime in footer.php. The panel
continues the trigger rather than floating beside it: the trigger squares
its bottom corners while open and the panel overlaps the shared border by
1px, so the two read as one box. */
.aura-drop { position: relative; min-width: 0; }
.aura-drop__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
width: 100%;
padding: .5rem .65rem .5rem .8rem;
border: 1px solid var(--aura-border);
border-radius: 12px;
background: none;
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: .88rem;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: border-color var(--aura-dur) var(--aura-ease),
color var(--aura-dur) var(--aura-ease);
}
.aura-drop__trigger:hover { border-color: var(--aura-accent); }
.aura-drop__trigger:focus-visible { outline: none; border-color: var(--aura-accent); }
.aura-drop__value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aura-drop__chev {
flex: 0 0 auto;
color: var(--aura-faint);
transition: transform var(--aura-dur) var(--aura-ease);
}
.aura-drop.is-open .aura-drop__trigger {
border-color: color-mix(in srgb, var(--aura-text) 26%, transparent);
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
}
.aura-drop.is-open .aura-drop__chev { transform: rotate(180deg); color: var(--aura-text); }
.aura-drop__panel {
position: absolute;
top: calc(100% - 1px); /* sit on the trigger's bottom border */
left: 0; right: 0;
z-index: 30;
max-height: 264px;
overflow-y: auto;
overscroll-behavior: contain;
padding: .25rem 0;
border: 1px solid color-mix(in srgb, var(--aura-text) 26%, transparent);
border-top-color: transparent;
border-radius: 0 0 12px 12px;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
scrollbar-width: thin;
}
.aura-drop__panel::-webkit-scrollbar { width: 6px; }
.aura-drop__panel::-webkit-scrollbar-thumb {
background: var(--aura-border);
border-radius: 100px;
}
.aura-drop__opt {
display: block;
width: 100%;
padding: .5rem .8rem;
border: 0;
background: none;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
font-size: .85rem;
font-weight: 500;
text-align: left;
text-transform: capitalize;
cursor: pointer;
transition: color var(--aura-dur) var(--aura-ease),
background-color var(--aura-dur) var(--aura-ease);
}
.aura-drop__opt:hover,
.aura-drop__opt:focus-visible {
outline: none;
color: var(--aura-text);
background: color-mix(in srgb, var(--aura-text) 7%, transparent);
}
.aura-drop__opt.is-selected { color: var(--aura-accent); }
/* the native control stays in the DOM as the value holder; only JS hides it,
so without JS the plain select is what renders */
.aura-sel__native {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* A set filter tints its trigger, the way the underline used to. Not while
the panel is open, though: this rule is declared after the open state and
carries more classes, so it was repainting all four sides accent — an
orange box around the trigger with a grey panel hanging off it. */
.aura-sel.is-set .aura-drop__trigger { border-color: var(--aura-accent); }
.aura-sel.is-set .aura-drop.is-open .aura-drop__trigger {
border-color: color-mix(in srgb, var(--aura-text) 26%, transparent);
border-bottom-color: transparent;
}
/* the spec list capitalises raw enum values (manual, petrol); the deposit
note is already a sentence, so it opts out */
.aura-vh__specs .aura-vh__note { text-transform: none; }
/* ===================== FLEET FILTERS ON A NARROW SCREEN =================
The filter column sits above the results when the page stacks, so a hero
plus a full filter panel pushed the first card off the bottom of a phone.
Everything below the search collapses behind one toggle. The search stays
out — it is the fastest way to narrow a fleet and costs one row. */
.aura-filters__bar { display: none; }
@media (max-width: 900px) {
.aura-filters__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-width: 0;
}
.aura-filters__toggle {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem .9rem;
border: 1px solid var(--aura-border);
border-radius: var(--aura-radius-pill);
background: none;
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: .86rem;
font-weight: 500;
cursor: pointer;
transition: border-color var(--aura-dur) var(--aura-ease),
color var(--aura-dur) var(--aura-ease);
}
.aura-filters__toggle svg { color: var(--aura-faint); flex: 0 0 auto; }
.aura-filters.is-open .aura-filters__toggle { border-color: var(--aura-accent); }
.aura-filters.is-open .aura-filters__toggle svg { color: var(--aura-accent); }
.aura-filters__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px; height: 20px;
padding: 0 5px;
border-radius: 100px;
background: var(--aura-accent);
color: var(--aura-accent-text);
font-size: .72rem;
font-weight: 700;
}
/* the count belongs next to the toggle here, not buried in the panel */
.aura-filters__count--bar { text-align: right; }
.aura-filters__body #auraCount { display: none; }
.aura-filters__body .aura-filters__foot { justify-content: flex-end; }
.aura-filters__body { display: none; }
.aura-filters.is-open .aura-filters__body {
display: grid;
gap: 1.6rem;
animation: auraPanelIn .22s var(--aura-ease) both;
}
}
/* only the panel's own arrival is animated, never its height */
@keyframes auraPanelIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.aura-filters.is-open .aura-filters__body { animation: none; }
}
@media (min-width: 901px) {
.aura-filters__count--bar { display: none; }
}
/* ---- a shorter hero, so the fleet starts nearer the top ---- */
@media (max-width: 640px) {
.aura-hero {min-height: 250px;}
.aura-hero__inner { padding: 0 20px 32px; }
.aura-crumbs { margin-bottom: 1rem; font-size: .76rem; }
.aura-hero__title {font-size: clamp(2rem, 10vw, 2.9rem);}
}
/* =========================== VEHICLE DETAILS ===========================
Gallery and facts on the left, a sticky booking rail on the right, the way
the reference lays it out — but in aura's flat dark language: no shadows,
hairline borders, one accent. */
.aura-vd { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.aura-vd__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 360px;
gap: 0 3rem;
align-items: start;
}
.aura-vd__main { grid-column: 1; min-width: 0; display: grid; gap: 1.6rem; }
.aura-vd__rail {
grid-column: 2;
min-width: 0;
display: grid;
gap: 1.2rem;
position: sticky;
top: 96px;
}
@media (max-width: 1100px) {
.aura-vd__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 2rem; }
}
@media (max-width: 900px) {
.aura-vd__grid { grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.aura-vd__main, .aura-vd__rail { grid-column: 1; position: static; }
}
/* ---- gallery ---- */
.aura-vd__gallery { display: grid; gap: .7rem; min-width: 0; }
.aura-vd__stage {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
max-height: 560px;
border-radius: 20px;
overflow: hidden;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
}
.aura-vd__stage .swiper-slide { display: block; }
.aura-vd__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aura-vd__stage--empty { display: flex; align-items: center; justify-content: center; }
.aura-vd__stage--empty .aura-vh__noimg { position: static; background: none; }
.aura-vd__stage--empty svg { width: 140px; color: var(--aura-faint); opacity: .5; }
/* swiper ships its own arrow glyphs and colours; replace both */
.aura-vd__nav {
position: absolute;
top: 50%;
z-index: 3;
width: 44px!important;
height: 44px!important;
margin-top: -22px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--aura-border);
border-radius: 100px;
background: color-mix(in srgb, var(--aura-bg) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--aura-text);
cursor: pointer;
transition: border-color var(--aura-dur) var(--aura-ease),
background-color var(--aura-dur) var(--aura-ease);
}
.aura-vd__nav:hover { border-color: var(--aura-accent); }
.aura-vd__nav--prev { left: 14px; }
.aura-vd__nav--next { right: 14px; }
.aura-vd__nav::after {
font-family: inherit;
font-size: 0; /* kill swiper's glyph */
content: '';
width: 9px; height: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
}
.aura-vd__nav--prev::after { transform: rotate(135deg); margin-left: 3px; }
.aura-vd__nav--next::after { transform: rotate(-45deg); margin-right: 3px; }
.aura-vd__stage .swiper-button-disabled { opacity: .35; pointer-events: none; }
.aura-vd__thumbs { width: 100%; }
.aura-vd__thumbs .swiper-slide {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
cursor: pointer;
opacity: .5;
transition: opacity var(--aura-dur) var(--aura-ease);
}
.aura-vd__thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aura-vd__thumbs .swiper-slide:hover { opacity: .8; }
.aura-vd__thumbs .swiper-slide-thumb-active { opacity: 1; outline: 2px solid var(--aura-accent); outline-offset: -2px; }
.aura-vd__edit {
position: absolute; top: 14px; left: 14px; z-index: 3;
padding: .3rem .8rem;
border: 1px solid var(--aura-border);
border-radius: 100px;
background: color-mix(in srgb, var(--aura-bg) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--aura-text);
font-size: .76rem;
}
.aura-vd__edit:hover { color: var(--aura-accent); border-color: var(--aura-accent); }
/* ---- the three facets ---- */
.aura-vd__facets { display: flex; flex-wrap: wrap; gap: .5rem; }
.aura-vd__facets .aura-chip { display: inline-flex; align-items: center; gap: .45rem; }
.aura-vd__facets .aura-chip svg { color: var(--aura-faint); }
.aura-vd__facets .aura-chip:hover svg { color: var(--aura-accent); }
/* ---- card shell, shared by the spec block and every rail box ---- */
.aura-card {
border: 1px solid var(--aura-border);
border-radius: 18px;
padding: 1.4rem;
min-width: 0;
}
.aura-card__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem;
margin-bottom: 1.1rem;
}
.aura-card__head h2 { font-size: 1.1rem; margin: 0; }
.aura-card__edit { font-size: .8rem; color: var(--aura-muted); white-space: nowrap; }
.aura-card__edit:hover { color: var(--aura-accent); }
/* ---- spec grid ---- */
.aura-specs {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: .8rem;
}
.aura-specs li {
display: grid;
gap: .15rem;
padding: .9rem 1rem;
border: 1px solid var(--aura-border);
border-radius: 14px;
min-width: 0;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
}
.aura-specs svg { color: var(--aura-accent); margin-bottom: .2rem; }
.aura-specs span { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--aura-faint); }
.aura-specs b { font-size: .95rem; color: var(--aura-text); text-transform: capitalize; }
/* ---- accordion, native so it works without JS ---- */
.aura-acc {
border: 1px solid var(--aura-border);
border-radius: 18px;
min-width: 0;
}
.aura-acc > summary {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
padding: 1.2rem 1.4rem;
cursor: pointer;
list-style: none;
}
.aura-acc > summary::-webkit-details-marker { display: none; }
.aura-acc > summary h2 { font-size: 1.1rem; margin: 0; }
.aura-acc__chev {
flex: 0 0 auto;
color: var(--aura-faint);
transition: transform var(--aura-dur) var(--aura-ease);
}
.aura-acc[open] > summary .aura-acc__chev { transform: rotate(180deg); color: var(--aura-text); }
.aura-acc__body { padding: 0 1.4rem 1.4rem; }
.aura-acc__body .aura-card__edit { display: inline-block; margin-bottom: .9rem; }
/* ---- tick lists ---- */
.aura-ticks {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .55rem 1.4rem;
}
.aura-ticks li {
display: flex; align-items: flex-start; gap: .55rem;
font-size: .9rem;
color: var(--aura-muted);
min-width: 0;
}
.aura-ticks svg { flex: 0 0 auto; margin-top: 2px; color: var(--aura-accent); }
.aura-ticks--rail { grid-template-columns: minmax(0, 1fr); margin: 1.1rem 0; }
/* ---- issues ---- */
.aura-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.aura-issue {
display: flex;
align-items: center;
gap: .7rem;
width: 100%;
padding: .8rem .9rem;
border: 1px solid var(--aura-border);
border-radius: 12px;
background: none;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
font-size: .88rem;
text-align: left;
cursor: pointer;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
transition: border-color var(--aura-dur) var(--aura-ease),
color var(--aura-dur) var(--aura-ease);
}
.aura-issue:hover {border-color: var(--aura-accent);color: var(--aura-text);background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));}
.aura-issue svg { flex: 0 0 auto; color: var(--aura-accent); }
.aura-issue__text { flex: 1 1 auto; min-width: 0; }
.aura-issue__date { flex: 0 0 auto; font-size: .78rem; color: var(--aura-faint); }
/* ---- booking rail ---- */
.aura-vd__pricerow { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.aura-vd__price {
font-family: var(--aura-font-display);
font-size: clamp(1.6rem, 3vw, 1.5rem);
font-weight: 600;
letter-spacing: -.02em;
color: var(--aura-text);
white-space: nowrap;
}
.aura-vd__per { font-size: .88rem; color: var(--aura-faint); }
.aura-vd__note { margin: .8rem 0 0; font-size: .84rem; color: var(--aura-muted); line-height: 1.55; }
.aura-vd__note b { color: var(--aura-text); font-weight: 600; }
.aura-disc { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.aura-disc li {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem;
font-size: .88rem;
color: var(--aura-muted);
}
.aura-disc b { color: var(--aura-accent); white-space: nowrap; }
.aura-vd__contact { display: grid; gap: .6rem; }
.aura-vd__contact .aura-btn { justify-content: center; gap: .5rem; }
/* ---- related ---- */
.aura-vd__more { margin-top: clamp(3rem, 6vw, 4.5rem); }
.aura-vd__more > h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 1.8rem; }
/* ---- the damage modal ----
.aura-modal belongs on the .modal wrapper, never on the content box: it is
declared once near the top of this file and styles .modal-content from
there. A bare .aura-modal rule here used to paint the full-screen overlay
itself, which killed the language modal's backdrop. */
.aura-modal .modal-title { font-family: var(--aura-font-display); font-size: 1.05rem; }
.aura-modal__figure { border-radius: 12px; overflow: hidden; background: var(--aura-bg); }
.aura-modal__figure .marker {
position: absolute;
width: 16px; height: 16px;
margin: -8px 0 0 -8px;
border-radius: 100px;
background: var(--aura-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--aura-accent) 30%, transparent);
}
/* the related row spans the whole container, not the narrower main column,
so pin it to four rather than letting auto-fill decide */
.aura-vd__more .aura-fleet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .aura-vd__more .aura-fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .aura-vd__more .aura-fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .aura-vd__more .aura-fleet { grid-template-columns: minmax(0, 1fr); } }
img#damageModalImage {
padding: 25px;
background: white;
}
/* =========================== BOOKING — STEP 1 BAR =======================
One card that sits over the hero's bottom edge, fields that open panels in
place (after SIXT's bar), a live summary under it. The date picker below is
daterangepicker — restyled here, never replaced: the engine and its bug
fixes live in booking_1.php and must not move. */
.aura-bk-page {padding-bottom: clamp(3rem, 6vw, 5rem);padding-left: 0;padding-right: 0px;}
.aura-bk [hidden], .aura-bk-page [hidden] { display: none !important; }
.aura-bk {
position: relative;
z-index: 5;
margin-top: -64px; /* lift over the hero's bottom edge */
display: grid;
gap: 1.2rem;
}
@media (max-width: 640px) { .aura-bk {margin-top: -10px;} }
.aura-bk__card {
position: relative;
padding: 1.2rem 1.4rem 1.4rem;
border: 1px solid var(--aura-border);
border-radius: 20px;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .7);
}
.aura-bk__top { display: flex; justify-content: flex-end; margin-bottom: .2rem; }
.aura-bk__manage {
font-size: .8rem;
color: var(--aura-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.aura-bk__manage:hover { color: var(--aura-accent); }
/* ---- the bar ---- */
.aura-bk__bar {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) auto;
gap: 1rem;
align-items: start;
}
.aura-bk__where { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.aura-bk__where > .aura-bk__field { flex: 1 1 0; min-width: 0; }
.aura-bk__when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; min-width: 0; }
.aura-bk__go { padding-top: 1.45rem; } /* line up with the controls, not the labels */
.aura-bk__field { position: relative; min-width: 0; }
.aura-bk__label {
display: block;
margin-bottom: .45rem;
font-size: .72rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--aura-faint);
}
.aura-bk__control {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
height: 50px;
padding: 0 .9rem;
border: 1px solid var(--aura-border);
border-radius: 12px;
background: color-mix(in srgb, var(--aura-bg) 60%, transparent);
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: .95rem;
text-align: left;
cursor: pointer;
transition: border-color var(--aura-dur) var(--aura-ease);
}
.aura-bk__control:hover { border-color: color-mix(in srgb, var(--aura-accent) 60%, var(--aura-border)); }
.aura-bk__control:focus-visible { outline: none; border-color: var(--aura-accent); }
.aura-bk__control > svg { flex: 0 0 auto; color: var(--aura-faint); }
.aura-bk__field.is-open > .aura-bk__control,
.aura-bk__field.is-open .aura-bk__control[aria-expanded="true"] { border-color: var(--aura-accent); }
.aura-bk__field.is-invalid .aura-bk__control { border-color: var(--aura-danger); }
.aura-bk__value {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aura-bk__value:empty::before { content: attr(data-placeholder); color: var(--aura-faint); }
/* date + time read as one control, like the reference */
.aura-bk__dt { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.aura-bk__dt .aura-bk__control--date { border-radius: 12px 0 0 12px; }
.aura-bk__dt .aura-bk__control--time {
width: auto;
border-left: 0;
border-radius: 0 12px 12px 0;
padding: 0 1rem;
white-space: nowrap;
}
.aura-bk__dt .aura-bk__control--time:hover,
.aura-bk__dt .aura-bk__control--time[aria-expanded="true"] { border-left: 0; }
.aura-bk__dt .aura-bk__control--time .aura-bk__value { overflow: visible; }
.aura-bk__err {
margin: .35rem 0 0;
font-size: .78rem;
color: var(--aura-danger);
}
.aura-bk__addret {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: .4rem;
height: 50px;
margin-top: 1.45rem;
padding: 0 .3rem;
border: 0;
background: none;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
font-size: .9rem;
white-space: nowrap;
cursor: pointer;
transition: color var(--aura-dur) var(--aura-ease);
}
.aura-bk__addret:hover { color: var(--aura-text); }
.aura-bk__addret svg { color: var(--aura-accent); }
.aura-bk__cta { height: 50px; padding: 0 1.6rem; white-space: nowrap; }
/* ---- panels ---- */
.aura-bk__pop {
position: absolute;
top: calc(100% + 0px);
left: 0;
z-index: 40;
min-width: 100%;
max-height: 880px;
overflow-y: auto;
overscroll-behavior: contain;
padding: 1rem;
border: 1px solid color-mix(in srgb, var(--aura-text) 16%, transparent);
border-radius: 14px;
background: color-mix(in srgb, var(--aura-text) 10%, var(--aura-bg));
box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .75);
scrollbar-width: thin;
}
.aura-bk__pop--loc {width: max(100%, 500px);}
.aura-bk__pop--time {width: 300px;left: auto;right: 0;min-width: 0;max-height: 820px;}
.aura-bk__search { position: sticky; top: -.45rem; padding: .1rem 0 .4rem; background: inherit; }
.aura-bk__searchin {
width: 100%;
height: 40px;
padding: 0 .8rem;
border: 1px solid var(--aura-border);
border-radius: 10px;
background: color-mix(in srgb, var(--aura-bg) 60%, transparent);
color: var(--aura-text);
font-family: var(--aura-font-ui);
font-size: .88rem;
}
.aura-bk__searchin:focus { outline: none; border-color: var(--aura-accent); }
.aura-bk__opts { display: grid; gap: 2px; }
.aura-bk__opt {
display: flex;
align-items: flex-start;
gap: .7rem;
width: 100%;
padding: .65rem .7rem;
border: 0;
border-radius: 10px;
background: none;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
text-align: left;
cursor: pointer;
transition: background-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-bk__opt:hover, .aura-bk__opt:focus-visible {
outline: none;
background: color-mix(in srgb, var(--aura-text) 7%, transparent);
color: var(--aura-text);
}
.aura-bk__opt > svg { flex: 0 0 auto; margin-top: 2px; color: var(--aura-faint); }
.aura-bk__opt.is-on { color: var(--aura-text); }
.aura-bk__opt.is-on > svg { color: var(--aura-accent); }
.aura-bk__optmain { display: grid; gap: .1rem; min-width: 0; }
.aura-bk__optmain b { font-weight: 600; font-size: .92rem; }
.aura-bk__optmain small { font-size: .78rem; color: var(--aura-faint); }
.aura-bk__opt--back {
margin-bottom: .3rem;
border-bottom: 1px solid var(--aura-border);
border-radius: 10px 10px 0 0;
}
.aura-bk__opt--back > svg { color: var(--aura-accent); }
.aura-bk__empty { margin: 0; padding: .8rem; font-size: .88rem; color: var(--aura-muted); }
/* time */
.aura-bk__poptitle { margin: .3rem 0 .5rem; text-align: center; font-weight: 600; font-size: .9rem; color: var(--aura-text); }
.aura-bk__part {
margin: .7rem .2rem .35rem;
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--aura-faint);
}
.aura-bk__slots { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.aura-bk__slot {
height: 36px;
border: 1px solid var(--aura-border);
border-radius: 10px;
background: none;
color: var(--aura-muted);
font-family: var(--aura-font-ui);
font-size: .86rem;
cursor: pointer;
transition: border-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-bk__slot:hover { border-color: var(--aura-accent); color: var(--aura-text); }
.aura-bk__slot.is-on {
border-color: var(--aura-accent);
background: var(--aura-accent);
color: var(--aura-accent-text);
font-weight: 600;
}
/* ---- vehicle row ---- */
.aura-bk__row2 { margin-top: 1rem; }
.aura-bk__field--veh { max-width: unest; }
.aura-bk__control--veh {height: 70px;padding: 0 .9rem 0 .5rem;}
.aura-bk__vthumb {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 50px; /* 4:3, like every vehicle image */
border-radius: 8px;
overflow: hidden;
background: color-mix(in srgb, var(--aura-text) 7%, transparent);
color: var(--aura-faint);
}
.aura-bk__vthumb img { width: 100%; height: 100%; object-fit: cover; }
.aura-bk__vtext { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.aura-bk__vtext b { font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-bk__vtext small { font-size: .78rem; color: var(--aura-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-bk__chev { flex: 0 0 auto; color: var(--aura-faint); transition: transform var(--aura-dur) var(--aura-ease); }
.aura-bk__control[aria-expanded="true"] .aura-bk__chev { transform: rotate(180deg); color: var(--aura-text); }
.aura-bk__pop--veh {width: 100%;max-height: 840px;padding-top: 10px;}
.aura-bk__vhead {
position: sticky;
top: -11px;
z-index: 1;
display: grid;
gap: .5rem;
padding: .55rem 0 .5rem;
background: inherit;
padding-top: 15px;
}
.aura-bk__vcats { gap: .4rem; }
.aura-bk__vcats .aura-chip { padding: .3rem .75rem; font-size: .76rem; }
.aura-bk__vlist { display: grid; gap: 2px; }
.aura-bk__vopt {
display: flex;
align-items: center;
gap: .75rem;
width: 100%;
padding: .5rem .6rem;
border: 1px solid transparent;
border-radius: 12px;
background: none;
color: var(--aura-text);
font-family: var(--aura-font-ui);
text-align: left;
cursor: pointer;
transition: background-color var(--aura-dur) var(--aura-ease), border-color var(--aura-dur) var(--aura-ease);
}
.aura-bk__vopt:hover { background: color-mix(in srgb, var(--aura-text) 7%, transparent); }
.aura-bk__vopt.is-on { border-color: var(--aura-accent); }
.aura-bk__vimg {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
width: 64px; height: 48px;
border-radius: 8px;
overflow: hidden;
background: color-mix(in srgb, var(--aura-text) 7%, transparent);
color: var(--aura-faint);
}
.aura-bk__vimg img { width: 100%; height: 100%; object-fit: cover; }
.aura-bk__vmain { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.aura-bk__vmain b { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aura-bk__vmain small { font-size: .76rem; color: var(--aura-faint); }
.aura-bk__vopt .is_available { flex: 0 0 auto; }
.aura-bk__vopt.unavailable_vehicle { opacity: .55; }
.aura-bk__avail {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .74rem;
color: var(--aura-muted);
white-space: nowrap;
}
.aura-bk__avail::before { content: ''; width: 7px; height: 7px; border-radius: 100px; background: var(--aura-accent); }
.aura-bk__avail.is-off { color: var(--aura-danger); }
.aura-bk__avail.is-off::before { background: var(--aura-danger); }
/* ---- calendar panel ---- */
.aura-bk__cal {
margin-top: 1.2rem;
/* padding-top: 1rem; */
}
.aura-bk__calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.aura-bk__caltitle { margin: 0; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aura-faint); }
#cal-render-block { position: relative; }
.aura-bk .hiddenSpinner { display: none; }
.aura-bk .spinner-container {
position: absolute; inset: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--aura-bg) 55%, transparent);
border-radius: 12px;
}
.aura-bk__spin {
display: inline-block;
width: 26px; height: 26px;
border: 2px solid color-mix(in srgb, var(--aura-text) 20%, transparent);
border-top-color: var(--aura-accent);
border-radius: 100px;
animation: auraSpin .7s linear infinite;
vertical-align: middle;
}
.aura-bk__spin--sm { width: 15px; height: 15px; }
@keyframes auraSpin { to { transform: rotate(360deg); } }
/* daterangepicker, in aura's clothes */
.aura-bk .daterangepicker {
background: none;
border: 0;
color: var(--aura-text);
font-family: var(--aura-font-ui);
padding: 0;
width: 100%;
}
.aura-bk .daterangepicker::before,
.aura-bk .daterangepicker::after { display: none; }
.aura-bk .daterangepicker .drp-buttons,
.aura-bk .daterangepicker .drp-selected,
.aura-bk .daterangepicker .ranges { display: none !important; }
.aura-bk .daterangepicker .drp-calendar { padding: .4rem .6rem; }
.aura-bk .daterangepicker .calendar-table {
background: none;
border: 0;
padding: 0;
}
.aura-bk .daterangepicker .calendar-table table { border-spacing: 0 4px; border-collapse: separate; }
.aura-bk .daterangepicker th.month {
font-family: var(--aura-font-display);
font-size: .98rem;
font-weight: 600;
color: var(--aura-text);
}
.aura-bk .daterangepicker thead tr:last-child th {
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 500;
color: var(--aura-faint);
}
.aura-bk .daterangepicker td,
.aura-bk .daterangepicker th { min-width: 38px; height: 40px; line-height: 40px; }
.aura-bk .daterangepicker td {
border: 0;
border-radius: 10px;
background: none;
color: var(--aura-text);
font-size: .9rem;
transition: background-color var(--aura-dur) var(--aura-ease);
}
.aura-bk .daterangepicker td.available:hover { background: color-mix(in srgb, var(--aura-text) 10%, transparent); color: var(--aura-text); }
.aura-bk .daterangepicker td.off,
.aura-bk .daterangepicker td.off.in-range,
.aura-bk .daterangepicker td.off.start-date,
.aura-bk .daterangepicker td.off.end-date { background: none !important; color: color-mix(in srgb, var(--aura-text) 22%, transparent) !important; }
.aura-bk .daterangepicker td.in-range {
background: color-mix(in srgb, var(--aura-accent) 16%, transparent);
color: var(--aura-text);
border-radius: 0;
}
.aura-bk .daterangepicker td.start-date,
.aura-bk .daterangepicker td.end-date,
.aura-bk .daterangepicker td.active,
.aura-bk .daterangepicker td.active:hover {
background: var(--aura-accent);
color: var(--aura-accent-text);
font-weight: 700;
}
.aura-bk .daterangepicker td.start-date { border-radius: 10px 0 0 10px; }
.aura-bk .daterangepicker td.end-date { border-radius: 0 10px 10px 0; }
.aura-bk .daterangepicker td.start-date.end-date { border-radius: 10px; }
/* the engine paints these through isCustomDate: past, then sold */
.aura-bk .daterangepicker td.disabled,
.aura-bk .daterangepicker td.past-date {
background: none !important;
color: color-mix(in srgb, var(--aura-text) 22%, transparent) !important;
text-decoration: none;
cursor: not-allowed;
}
.aura-bk .daterangepicker td.sold-date {
color: color-mix(in srgb, var(--aura-danger) 70%, transparent) !important;
text-decoration: line-through !important;
}
/* month arrows — the native ones and the injected .drp-nav stand-ins */
.aura-bk .daterangepicker th.prev,
.aura-bk .daterangepicker th.next,
.aura-bk .daterangepicker th.drp-nav { cursor: pointer; }
.aura-bk .daterangepicker th.prev span,
.aura-bk .daterangepicker th.next span {
border-color: var(--aura-text);
padding: 3px;
}
.aura-bk .daterangepicker th.prev:hover,
.aura-bk .daterangepicker th.next:hover,
.aura-bk .daterangepicker th.drp-nav:hover { background: color-mix(in srgb, var(--aura-text) 10%, transparent); }
.aura-bk .daterangepicker th.drp-nav span {
display: inline-block;
width: 8px; height: 8px;
border-right: 2px solid var(--aura-text);
border-bottom: 2px solid var(--aura-text);
}
.aura-bk .daterangepicker th.drp-nav-prev span { transform: rotate(135deg); }
.aura-bk .daterangepicker th.drp-nav-next span { transform: rotate(-45deg); }
.aura-bk .daterangepicker th.drp-nav.is-disabled { opacity: .25; cursor: default; }
.aura-bk .daterangepicker th.drp-nav.is-disabled:hover { background: none; }
/* ---- live summary ---- */
.aura-bk__sum {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 1.2rem;
align-items: start;
}
.aura-bk__sumcard {
padding: 1.2rem 1.4rem;
border: 1px solid var(--aura-border);
border-radius: 18px;
min-width: 0;
}
.aura-bk__sumhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.aura-bk__days { margin: 0; font-size: .92rem; color: var(--aura-muted); }
.aura-bk__days .total_days_container { font-weight: 700; color: var(--aura-accent); }
.aura-bk__total {
margin: 0;
font-family: var(--aura-font-display);
font-size: clamp(1.2rem, 3vw, 1.5rem);
font-weight: 600;
letter-spacing: -.02em;
color: var(--aura-text);
white-space: nowrap;
}
.aura-bk__flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.aura-bk__flags:empty { display: none; }
/* the engine injects these as .highlight_opt with an inline svg */
.aura-bk__flags .highlight_opt {
display: inline-flex;
align-items: center;
gap: .35rem;
margin: 0 !important;
padding: .25rem .75rem;
border: 1px solid var(--aura-border);
border-radius: 100px;
font-size: .78rem;
color: var(--aura-muted);
}
.aura-bk__flags .highlight_opt svg { color: var(--aura-accent); margin: 0 !important; }
.aura-bk__lines {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .8rem;
margin: 1rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--aura-border);
}
.aura-bk__lines div { min-width: 0; }
.aura-bk__lines dt {
font-size: .7rem;
letter-spacing: .08em;
text-transform: uppercase;
font-weight: 400;
color: var(--aura-faint);
}
.aura-bk__lines dd { margin: .2rem 0 0; font-weight: 600; font-size: .95rem; color: var(--aura-text); }
.aura-bk__errbox {
margin-top: 1rem;
padding: .75rem 1rem;
border: 1px solid color-mix(in srgb, var(--aura-danger) 55%, transparent);
border-radius: 12px;
font-size: .86rem;
color: var(--aura-danger);
}
.aura-bk__errbox p { margin: 0; }
.aura-bk__errbox p + p { margin-top: .25rem; }
.aura-bk__contact { display: grid; gap: .7rem; }
.aura-bk__contactrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.aura-bk__contactrow .aura-btn { padding: .5rem 1rem; font-size: .85rem; }
.aura-bk__admin p { margin: 0 0 .8rem; font-size: .9rem; color: var(--aura-muted); }
/* ---- narrower screens ---- */
@media (max-width: 1100px) {
.aura-bk__bar { grid-template-columns: minmax(0, 1fr); }
.aura-bk__go { padding-top: 0; }
.aura-bk__cta { width: 100%; justify-content: center; }
.aura-bk__field--veh { max-width: none; }
}
@media (max-width: 820px) {
.aura-bk__sum { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.aura-bk__card {padding: 1rem;}
.aura-bk__where { flex-wrap: wrap; }
.aura-bk__where > .aura-bk__field { flex-basis: 100%; }
.aura-bk__addret { margin-top: 0; height: 36px; }
.aura-bk__when { grid-template-columns: minmax(0, 1fr); }
.aura-bk__pop--time { width: 100%; }
.aura-bk__lines { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.aura-bk__lines div { display: flex; justify-content: space-between; }
.aura-bk__lines dd { margin: 0; }
}
/* #datepicker-container keeps its id because the calendar engine writes to it,
but the old stylesheet still boxes it (border, padding, float, fixed size) */
.aura-bk #datepicker-container {
position: relative;
float: none;
width: auto;
height: auto;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
/* The old stylesheet reaches into the picker through #cal-render and a few
bare class rules (boxed arrow spans, a pink sold-out cell, green option
pills). Those win on specificity, so aura answers at the same weight. */
/* Month arrows: one small square button per arrow, one chevron in it. The
old sheet draws a Font Awesome glyph on span::before and floats the native
arrow's span; aura takes over that same ::before and unfloats the span, so
there is exactly one icon and it sits centred in its cell. The cell itself
never paints — only the button does. */
.aura-bk #cal-render th.drp-nav,
.aura-bk #cal-render th.prev,
.aura-bk #cal-render th.next,
.aura-bk #cal-render th.drp-nav:hover,
.aura-bk #cal-render th.prev:hover,
.aura-bk #cal-render th.next:hover {
text-align: center;
vertical-align: middle;
background: none !important;
}
.aura-bk #cal-render th.drp-nav span,
.aura-bk #cal-render th.prev span,
.aura-bk #cal-render th.next span {
float: none !important;
height: 36px !important;
min-width: 0 !important;
padding: 0 !important;
margin: 0 auto !important;
border: 1px solid color-mix(in srgb, var(--aura-text) 14%, transparent) !important;
border-radius: 10px !important;
background: none !important;
box-shadow: none !important;
transform: none !important;
color: var(--aura-text) !important;
font-family: inherit !important;
transition: background-color var(--aura-dur) var(--aura-ease), border-color var(--aura-dur) var(--aura-ease);
}
/* the "extra" arrows exist for the stacked mobile layout; leave their
visibility to the rules that already handle that, only their shape is ours */
.aura-bk #cal-render th.drp-nav:not(.drp-nav-extra) span,
.aura-bk #cal-render th.prev span,
.aura-bk #cal-render th.next span { display: inline-grid !important; place-items: center; }
.aura-bk #cal-render th.drp-nav span::before,
.aura-bk #cal-render th.prev span::before,
.aura-bk #cal-render th.next span::before {
content: "" !important;
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
font-size: 0 !important;
}
.aura-bk #cal-render th.drp-nav-prev span::before,
.aura-bk #cal-render th.prev span::before { transform: translateX(2px) rotate(135deg); }
.aura-bk #cal-render th.drp-nav-next span::before,
.aura-bk #cal-render th.next span::before { transform: translateX(-2px) rotate(-45deg); }
.aura-bk #cal-render th.drp-nav:not(.is-disabled):hover span,
.aura-bk #cal-render th.prev:hover span,
.aura-bk #cal-render th.next:hover span {
background: color-mix(in srgb, var(--aura-text) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--aura-accent) 60%, transparent) !important;
}
.aura-bk #cal-render th.drp-nav.is-disabled span { opacity: .3; cursor: default; }
/* the old sheet pads only the right month down, so its title sat lower */
.aura-bk #cal-render .drp-calendar.right { padding-top: 0; }
.aura-bk #cal-render td.sold-date,
.aura-bk #cal-render td.sold-date:hover {
background: #ff00001c !important;
color: color-mix(in srgb, var(--aura-danger) 75%, transparent) !important;
text-decoration: line-through !important;
}
.aura-bk__flags .highlight_opt {
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg))!important;
color: var(--aura-muted) !important;
}
/* =========================== BOOKING — EXTRAS ON STEP 1 ================
Protection plans and products, shown once branch, dates and a vehicle are
set. Plans are cards side by side (one must be chosen when any exist);
products are a list of toggles. */
.aura-bk__extras {
display: grid;
gap: 1.6rem;
padding: 1.4rem 0rem;
/* border: 1px solid var(--aura-border); */
/* border-radius: 20px; */
transition: opacity var(--aura-dur) var(--aura-ease);
}
.aura-bk__extras.is-loading { opacity: .55; pointer-events: none; }
.aura-bk__xblock { display: grid; gap: .9rem; min-width: 0; }
.aura-bk__xhead h2 { margin: 0; font-size: 1.15rem; }
.aura-bk__xhead p { margin: .25rem 0 0; font-size: .86rem; color: var(--aura-muted); }
/* plans */
.aura-bk__plans {
display: grid;
/* auto-fill, not auto-fit: a lone plan keeps a card width instead of
stretching across the whole section */
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: .8rem;
}
.aura-bk__plan {
display: grid;
align-content: start;
gap: .5rem;
padding: 1rem 1.1rem;
border: 1px solid var(--aura-border);
border-radius: 16px;
background: none;
color: var(--aura-text);
font-family: var(--aura-font-ui);
text-align: left;
cursor: pointer;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
transition: border-color var(--aura-dur) var(--aura-ease), background-color var(--aura-dur) var(--aura-ease);
}
.aura-bk__plan:hover { border-color: color-mix(in srgb, var(--aura-accent) 60%, var(--aura-border)); }
.aura-bk__plan.is-on {
border-color: var(--aura-accent);
background: color-mix(in srgb, var(--aura-accent) 8%, transparent);
}
.aura-bk__planhead {display: flex;align-items: center;gap: .6rem;color: var(--aura-accent);}
.aura-bk__planname { font-size: 1rem; font-weight: 700; }
.aura-bk__radio {
flex: 0 0 auto;
width: 18px; height: 18px;
border: 2px solid var(--aura-faint);
border-radius: 100px;
transition: border-color var(--aura-dur) var(--aura-ease), border-width var(--aura-dur) var(--aura-ease);
}
.aura-bk__plan.is-on .aura-bk__radio { border-color: var(--aura-accent); border-width: 5px; }
.aura-bk__planprice b { font-family: var(--aura-font-display); font-size: 1.2rem; font-weight: 600; }
.aura-bk__planprice span { font-size: .82rem; color: var(--aura-faint); }
.aura-bk__plantotal { font-size: .84rem; color: var(--aura-muted); }
.aura-bk__planexcess {
justify-self: start;
padding: .2rem .6rem;
border: 1px solid var(--aura-border);
border-radius: 100px;
font-size: .74rem;
color: var(--aura-muted);
}
.aura-bk__plandesc { font-size: .82rem; color: var(--aura-muted); line-height: 1.5; }
.aura-bk__planitems { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .3rem; }
.aura-bk__planitems li { display: flex; align-items: flex-start; gap: .45rem; font-size: .82rem; color: var(--aura-muted); }
.aura-bk__planitems svg { flex: 0 0 auto; margin-top: 2px; color: var(--aura-accent); }
.aura-bk__xblock.is-invalid .aura-bk__plan { border-color: color-mix(in srgb, var(--aura-danger) 55%, var(--aura-border)); }
/* products */
.aura-bk__prods { display: grid; gap: .5rem; }
.aura-bk__prod {
display: flex;
align-items: center;
gap: .8rem;
width: 100%;
padding: .75rem .9rem;
border: 1px solid var(--aura-border);
border-radius: 14px;
background: none;
color: var(--aura-text);
font-family: var(--aura-font-ui);
text-align: left;
cursor: pointer;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
transition: border-color var(--aura-dur) var(--aura-ease), background-color var(--aura-dur) var(--aura-ease);
}
.aura-bk__prod:hover { border-color: color-mix(in srgb, var(--aura-accent) 60%, var(--aura-border)); }
.aura-bk__prod.is-on { border-color: var(--aura-accent); background: color-mix(in srgb, var(--aura-accent) 8%, transparent); }
.aura-bk__check {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border: 2px solid var(--aura-faint);
border-radius: 6px;
color: transparent;
transition: background-color var(--aura-dur) var(--aura-ease), border-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-bk__prod.is-on .aura-bk__check { background: var(--aura-accent); border-color: var(--aura-accent); color: var(--aura-accent-text); }
.aura-bk__prodmain { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.aura-bk__prodmain b { font-weight: 600; font-size: .92rem; }
.aura-bk__prodmain small { font-size: .78rem; color: var(--aura-faint); }
.aura-bk__prodtotal { flex: 0 0 auto; font-weight: 600; font-size: .92rem; white-space: nowrap; }
/* five summary lines now; let them wrap */
.aura-bk__lines { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 640px) {
.aura-bk__extras {}
.aura-bk__lines { grid-template-columns: minmax(0, 1fr); }
}
/* ---- vehicle details: protection plans (read-only, chosen when booking) ---- */
.aura-vd__plansub { margin: 0 0 1rem; font-size: .86rem; color: var(--aura-muted); }
.aura-vd__plans {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: .8rem;
}
.aura-vd__plan {
display: grid;
align-content: start;
gap: .5rem;
padding: 1rem 1.1rem;
border: 1px solid var(--aura-border);
border-radius: 16px;
min-width: 0;
background: color-mix(in srgb, var(--aura-text) 7%, var(--aura-bg));
}
.aura-vd__planname { font-size: 1rem; font-weight: 700; color: var(--aura-text); }
.aura-vd__planprice { margin: 0; }
.aura-vd__planprice b { font-family: var(--aura-font-display); font-size: 1.2rem; font-weight: 600; color: var(--aura-text); }
.aura-vd__planprice span { font-size: .82rem; color: var(--aura-faint); }
.aura-vd__planexcess {
justify-self: start;
padding: .2rem .6rem;
border: 1px solid var(--aura-border);
border-radius: 100px;
font-size: .74rem;
color: var(--aura-muted);
}
.aura-vd__plandesc { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--aura-muted); }
.aura-ticks--plan { grid-template-columns: minmax(0, 1fr); margin-top: .2rem; }
.aura-ticks--plan li { font-size: .82rem; }
/* =========================== BOOKING — BELOW THE BAR ===================
Continue left the bar: it now sits under the price, after every choice it
depends on. Choices on the left, the price and the button on the right. */
/* desktop only — below 1100px the bar stacks (see "narrower screens") */
@media (min-width: 1101px) {
.aura-bk__bar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr); }
}
.aura-bk__lower {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 1.2rem;
align-items: start;
}
.aura-bk__left { display: grid; gap: 1.2rem; min-width: 0; }
.aura-bk__right {
position: sticky;
top: 96px;
display: grid;
gap: .9rem;
min-width: 0;
}
.aura-bk__xhint {
display: grid;
place-items: center;
min-height: 210px;
margin: 0;
padding: 1.4rem;
border: 1px dashed color-mix(in srgb, var(--aura-text) 22%, transparent);
border-radius: 20px;
font-size: .9rem;
text-align: center;
color: var(--aura-muted);
}
.aura-bk__xhint[hidden] { display: none; }
/* a narrow column: the summary lines read top to bottom, label left, amount right */
.aura-bk__right .aura-bk__lines { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.aura-bk__right .aura-bk__lines div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.aura-bk__right .aura-bk__lines dd { margin: 0; }
.aura-bk__right .aura-bk__cta {
width: 100%;
height: 54px;
justify-content: center;
font-size: 1rem;
}
@media (max-width: 980px) {
.aura-bk__lower { grid-template-columns: minmax(0, 1fr); }
.aura-bk__right { position: static; }
}
@media (max-width:768px) {
.aura-bk-page {
padding-left: 20px;
padding-right: 20px;
}
}
/* =============================== BOOKING — REVIEW =============================
booking_3.php: what is booked on the left, the total and the one way on at the
right, the same two columns as step 1. The price table is the default template's
arithmetic echoed as a plain table; aura only dresses it. */
.aura-rv { padding-bottom: clamp(3rem, 6vw, 5rem); padding-left: 0; padding-right: 0; }
.aura-rv > .aura-note { margin-bottom: 1rem; }
.aura-rv__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 3em;
align-items: start;
}
.aura-rv__main { display: grid; gap: 1.2rem; min-width: 0; }
.aura-rv__side {
position: sticky;
top: 96px;
display: grid;
gap: .9rem;
min-width: 0;
margin: 0;
}
.aura-rv__card {
padding: 1.2rem 1.4rem;
border: 1px solid var(--aura-border);
border-radius: 20px;
background: color-mix(in srgb, var(--aura-text) 4%, var(--aura-bg));
min-width: 0;
}
/* one panel, several parts: a hairline between them, no boxes in boxes —
except the trip, which sits in its own framed box under the car */
.aura-rv__panel { display: grid; padding-top: 0; padding-bottom: 0; }
.aura-rv__part { min-width: 0; padding: 1.3rem 0; }
.aura-rv__part + .aura-rv__part {
}
.aura-rv__panel .aura-rv__car { padding-bottom: 1rem; }
.aura-rv__panel .aura-rv__trip {
padding: 1.1rem 1.2rem;
border: 1px solid var(--aura-border);
border-radius: 16px;
background: color-mix(in srgb, var(--aura-text) 3%, transparent);
}
/* the framed box already separates what follows it */
.aura-rv__panel .aura-rv__trip + .aura-rv__part { border-top: 0; }
.aura-rv__h {
margin: 0 0 .9rem;
font-family: var(--aura-font-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -.01em;
color: var(--aura-text);
}
.aura-rv__eyebrow, .aura-rv__label {
margin: 0;
font-size: .7rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--aura-faint);
}
/* ---- the car ---- */
.aura-rv__car { display: flex; align-items: center; gap: 1.1rem; }
.aura-rv__vimg {
flex: 0 0 100px;
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 14px;
background: color-mix(in srgb, var(--aura-text) 6%, var(--aura-bg));
color: var(--aura-faint);
}
.aura-rv__vimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aura-rv__carmain { display: grid; gap: .45rem; min-width: 0; }
.aura-rv__carname {
margin: 0;
font-family: var(--aura-font-display);
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
font-weight: 600;
letter-spacing: -.02em;
color: var(--aura-accent);
}
.aura-rv__carname span { color: var(--aura-faint); font-weight: 400; }
.aura-rv__plate {
justify-self: start;
padding: .2rem .7rem;
border: 1px solid var(--aura-border);
border-radius: 8px;
font-size: .68rem;
letter-spacing: .08em;
color: var(--aura-muted);
}
/* ---- the trip: pickup, then return ---- */
.aura-rv__trip {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: 1.4rem;padding: 1.3rem;}
.aura-rv__leg { position: relative; display: grid; gap: .35rem; padding-left: 1.4rem; min-width: 0; }
.aura-rv__dot {
position: absolute;
left: 0;
top: .3rem;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--aura-accent);
}
.aura-rv__leg--drop .aura-rv__dot { background: var(--aura-accent); }
.aura-rv__leg p { margin: 0; }
.aura-rv__legtitle { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aura-faint); }
.aura-rv__legdate { font-size: 1.02rem; font-weight: 700; color: var(--aura-text); }
.aura-rv__legline { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--aura-muted); }
.aura-rv__legline svg { flex: 0 0 auto; color: var(--aura-accent); }
/* ---- price details ---- */
.aura-rv__tablewrap { overflow-x: auto; }
.aura-rv__table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .9rem; }
.aura-rv__table th,
.aura-rv__table td { padding: .6rem .5rem; color: var(--aura-muted); white-space: nowrap; }
.aura-rv__table td:first-child, .aura-rv__table th:first-child { padding-left: 0; white-space: normal; }
.aura-rv__table td:last-child, .aura-rv__table th:last-child { padding-right: 0; color: var(--aura-text); }
.aura-rv__table .text-end { text-align: right; }
.aura-rv__table .aura-rv__thead th {
padding-top: 1.1rem;
font-size: .68rem;
font-weight: 400;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--aura-faint);
border-bottom: 1px solid var(--aura-border);
}
.aura-rv__table tr:first-child th { padding-top: 0; }
.aura-rv__table .aura-rv__sub td { font-size: .82rem; }
.aura-rv__table .aura-rv__sub td:first-child { color: var(--aura-faint); }
.aura-rv__table .aura-rv__grand td {
padding-top: .9rem;
border-top: 1px solid var(--aura-border);
font-weight: 700;
color: var(--aura-text);
}
.aura-rv__table .aura-rv__grand td:last-child { color: var(--aura-accent); font-size: 1.02rem; }
/* ---- guest note ---- */
.aura-rv__guest {
display: flex;
gap: .7rem;
margin: 0;
padding: 1rem 1.2rem;
border: 1px dashed color-mix(in srgb, var(--aura-text) 22%, transparent);
border-radius: 16px;
font-size: .84rem;
line-height: 1.55;
color: var(--aura-muted);
}
.aura-rv__guest svg { flex: 0 0 auto; margin-top: 1px; color: var(--aura-accent); }
.aura-rv__guest b { color: var(--aura-text); font-weight: 600; }
/* ---- summary ---- */
.aura-rv__total {
margin: .35rem 0 0;
font-family: var(--aura-font-display);
font-size: clamp(1.7rem, 4vw, 1.1rem);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--aura-text);
}
.aura-rv__days { margin: .25rem 0 0; font-size: .9rem; color: var(--aura-muted); }
/* the total left, how many days it covers right, on one line */
.aura-rv__totrow {display: flex;align-items: baseline;justify-content: space-between;gap: .4rem 1rem;flex-wrap: wrap;margin-bottom: 25px;}
.aura-rv__totrow .aura-rv__days { margin: 0; text-align: right; white-space: nowrap; }
.aura-rv__days b { color: var(--aura-accent); }
.aura-rv__flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.aura-rv__flag {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .75rem;
border: 1px solid var(--aura-border);
border-radius: 100px;
font-size: .78rem;
color: var(--aura-muted);
}
.aura-rv__flag svg { color: var(--aura-accent); }
.aura-rv__lines {
display: grid;
gap: .55rem;
margin: 1rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--aura-border);
}
.aura-rv__lines div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.aura-rv__lines dt {
font-size: .7rem;
font-weight: 400;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--aura-faint);
}
.aura-rv__lines dd { margin: 0; font-weight: 600; color: var(--aura-text); white-space: nowrap; }
.aura-rv__disc dt { cursor: help; }
.aura-rv__disc dd { color: var(--aura-accent); }
/* ---- contact ---- */
.aura-rv__contact { display: grid; gap: .9rem; }
.aura-rv__contact .aura-rv__h { margin: 0; }
.aura-rv__err { margin: 0; font-size: .8rem; color: var(--aura-danger); }
.aura-rv__err:empty { display: none; }
.aura-rv__agree {
position: relative;
display: flex;
align-items: flex-start;
gap: .65rem;
font-size: .8rem;
line-height: 1.45;
color: var(--aura-muted);
cursor: pointer;
}
.aura-rv__agree > span:last-child { padding-top: 2px; }
/* the old sheet makes checkboxes position:relative, which put the hidden input
in the flow and pushed the drawn box right — it has to sit on top of the box */
.aura-rv__agree input[type="checkbox"] {
position: absolute !important;
top: 0;
left: 0;
opacity: 0;
width: 22px;
height: 22px;
margin: 0;
cursor: pointer;
}
.aura-rv__box {
flex: 0 0 22px;
height: 22px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--aura-text) 28%, transparent);
border-radius: 7px;
color: transparent;
transition: background-color var(--aura-dur) var(--aura-ease), border-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-rv__agree input:checked + .aura-rv__box { background: var(--aura-accent); border-color: var(--aura-accent); color: var(--aura-bg); }
.aura-rv__agree input:focus-visible + .aura-rv__box { outline: 2px solid var(--aura-accent); outline-offset: 2px; }
.was-validated .aura-rv__agree input:invalid + .aura-rv__box { border-color: var(--aura-danger); }
/* ---- pay ---- */
.aura-rv__pay { display: grid; gap: .9rem; }
.aura-rv__seg {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 4px;
border: 1px solid var(--aura-border);
border-radius: 14px;
}
.aura-rv__segbtn {
height: 42px;
border: 0;
border-radius: 10px;
background: none;
font: inherit;
font-size: .9rem;
font-weight: 600;
color: var(--aura-muted);
cursor: pointer;
transition: background-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-rv__segbtn:hover { color: var(--aura-text); }
.aura-rv__segbtn.active { background: color-mix(in srgb, var(--aura-accent) 16%, transparent); color: var(--aura-accent); }
.aura-rv__providers { display: grid; gap: .55rem; }
:is(.aura-rv, .aura-inv) .payment-methods-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));gap: .5rem;margin-bottom: 13px;}
:is(.aura-rv, .aura-inv) .payment-option {
display: grid;
place-items: center;
height: 100%;
min-height: 56px;
padding: .7rem;
border: 1px solid var(--aura-border);
border-radius: 12px;
font-size: .85rem;
color: var(--aura-muted);
cursor: pointer;
transition: border-color var(--aura-dur) var(--aura-ease), background-color var(--aura-dur) var(--aura-ease);
}
:is(.aura-rv, .aura-inv) .payment-option:hover { border-color: color-mix(in srgb, var(--aura-text) 30%, transparent); }
:is(.aura-rv, .aura-inv) .payment-option.active {
border-color: var(--aura-accent);
background: color-mix(in srgb, var(--aura-accent) 9%, transparent);
color: var(--aura-text);
}
/* (shared with the invoice pay page, .aura-inv) */
/* provider logos are drawn for white backgrounds; on aura's dark cards they
read as one white mark each, brighter on the chosen one */
:is(.aura-rv, .aura-inv) .payment-logo {
max-height: 22px;
max-width: 70px;
filter: brightness(0) invert(1);
opacity: .6;
transition: opacity var(--aura-dur) var(--aura-ease);
}
:is(.aura-rv, .aura-inv) .payment-option:hover .payment-logo { opacity: .85; }
:is(.aura-rv, .aura-inv) .payment-option.active .payment-logo { opacity: 1; }
.aura-rv__wait { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .82rem; color: var(--aura-muted); }
.aura-rv__cta {
width: 100%;
height: 54px;
justify-content: center;
gap: .4rem;
}
.aura-rv__cta:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 980px) {
.aura-rv__grid { grid-template-columns: minmax(0, 1fr); }
.aura-rv__side { position: static; }
}
@media (max-width: 640px) {
.aura-rv__card { padding: 1rem; }
.aura-rv__panel { padding-top: 0; padding-bottom: 0; }
.aura-rv__part { padding: 1rem 0; }
.aura-rv__panel .aura-rv__trip { padding: 1rem; }
.aura-rv__car { align-items: flex-start; }
.aura-rv__vimg { flex-basis: 108px; }
.aura-rv__trip { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.aura-rv {
padding-left: 20px;
padding-right:20px;
}
.aura-rv__main {
margin-top: -15px;
z-index: 5;
}
}
/* =============================== BOOKING — CONFIRMATION ======================
booking_4.php (GET /client/booking/confirm/@hash). Only the status, centred:
the details are one click away behind "View booking". The tick is a CSS
animation, not SMIL, so it also plays when a waiting payment turns into a
success on the page — a CSS animation starts when its element is shown. */
.aura-cf {/* padding-top: clamp(1.5rem, 4vw, 3rem); */padding-bottom: clamp(3rem, 6vw, 5rem);}
.aura-cf .d-none { display: none !important; }
.aura-cf__card {
max-width: 100%;
margin: 0 auto;
padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 2.4rem);
border: 1px solid var(--aura-border);
border-radius: 24px;
background: color-mix(in srgb, var(--aura-text) 4%, var(--aura-bg));
text-align: center;
margin-top: -50px;
z-index: 5;
position: relative;
}
.aura-cf__card > div { display: grid; justify-items: center; }
.aura-cf__icon {
width: 84px;
height: 84px;
display: grid;
place-items: center;
margin-bottom: 1.3rem;
border-radius: 50%;
}
.aura-cf__icon--ok {
color: var(--aura-accent);
background: color-mix(in srgb, var(--aura-accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--aura-accent) 45%, transparent);
animation: aura-cf-pop .5s var(--aura-ease) both;
}
.aura-cf__icon--ok path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: aura-cf-draw .45s var(--aura-ease) .3s forwards;
}
/* a ring that leaves the circle once, as the tick lands */
.aura-cf__icon--ok { position: relative; }
.aura-cf__icon--ok::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1px solid var(--aura-accent);
opacity: 0;
}
@keyframes aura-cf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes aura-cf-draw { to { stroke-dashoffset: 0; } }
@keyframes aura-cf-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.aura-cf__icon--wait { border: 1px solid var(--aura-border); }
/* payment failed: the same circle in red, no animation */
.aura-cf__icon--fail { color: var(--aura-danger); background: color-mix(in srgb, var(--aura-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--aura-danger) 45%, transparent); }
.aura-cf__text--danger { color: color-mix(in srgb, var(--aura-danger) 85%, var(--aura-text)); }
.aura-cf__spin {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--aura-accent) 25%, transparent);
border-top-color: var(--aura-accent);
animation: aura-cf-spin .8s linear infinite;
}
@keyframes aura-cf-spin { to { transform: rotate(360deg); } }
.aura-cf__title {
margin: 0 0 .5rem;
font-family: var(--aura-font-display);
font-size: clamp(1.4rem, 3vw, 1.8rem);
font-weight: 600;
letter-spacing: -.02em;
color: var(--aura-text);
}
.aura-cf__text {max-width: 60ch;margin: 0 0 1.6rem;font-size: .95rem;line-height: 1.6;color: var(--aura-muted);}
.aura-cf__cta { height: 50px; padding: 0 1.8rem; gap: .4rem; }
.aura-cf__cta--ghost {
background: none;
border: 1px solid var(--aura-border);
color: var(--aura-text);
}
.aura-cf__cta--ghost:hover { border-color: var(--aura-accent); color: var(--aura-accent); }
@media (prefers-reduced-motion: reduce) {
.aura-cf__icon--ok, .aura-cf__icon--ok::after { animation: none; }
.aura-cf__icon--ok path { animation: none; stroke-dashoffset: 0; }
.aura-cf__spin { animation-duration: 2.4s; }
}
@media (max-width: 640px) {
.aura-cf__cta { width: 100%; justify-content: center; }
.aura-cf__card {
margin: 10px;
margin-top: 25px;
}
.aura-bk__xhint {
min-height: 20px;
}
.aura-bk__pop--loc {
width: max(100%, 100%);
}
}
/* =============================== TERMS & PRIVACY ==============================
views/_legal.php, shared by terms.php and privacy.php. The text is the
tenant's own HTML from the editor, so .aura-legal__body styles plain
elements (h1–h4, p, lists, links, tables) rather than classes. */
.aura-legal { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.aura-legal__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 1.2rem;
align-items: start;
}
.aura-legal__doc {
min-width: 0;
padding: clamp(1.2rem, 4vw, 2.6rem);
border: 1px solid var(--aura-border);
border-radius: 20px;
background: color-mix(in srgb, var(--aura-text) 4%, var(--aura-bg));
}
/* ---- auto-translation notice ---- */
.aura-legal__tr {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem 1rem;
flex-wrap: wrap;
margin-bottom: 1.6rem;
padding: .75rem 1rem;
border: 1px dashed color-mix(in srgb, var(--aura-text) 22%, transparent);
border-radius: 12px;
}
.aura-legal__tr p { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .85rem; color: var(--aura-muted); }
.aura-legal__tr svg { color: var(--aura-accent); flex: 0 0 auto; }
.aura-legal__tr a { font-size: .85rem; font-weight: 600; color: var(--aura-accent); }
.aura-legal__tr a:hover { color: var(--aura-text); }
/* ---- the tenant's text ---- */
.aura-legal__body {
max-width: 72ch;
font-size: .98rem;
line-height: 1.75;
color: var(--aura-muted);
overflow-wrap: anywhere;
}
.aura-legal__body > :first-child { margin-top: 0; }
.aura-legal__body h1, .aura-legal__body h2, .aura-legal__body h3, .aura-legal__body h4 {
margin: 2rem 0 .7rem;
font-family: var(--aura-font-display);
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.3;
color: var(--aura-text);
}
.aura-legal__body h1 { font-size: 1.6rem; }
.aura-legal__body h2 { font-size: 1.35rem; }
.aura-legal__body h3 { font-size: 1.12rem; }
.aura-legal__body h4 { font-size: 1rem; }
.aura-legal__body p { margin: 0 0 1rem; }
.aura-legal__body strong, .aura-legal__body b { color: var(--aura-text); font-weight: 600; }
.aura-legal__body a { color: var(--aura-accent); text-decoration: underline; text-underline-offset: 3px; }
.aura-legal__body a:hover { color: var(--aura-text); }
.aura-legal__body ul, .aura-legal__body ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.aura-legal__body li { margin-bottom: .4rem; }
.aura-legal__body li::marker { color: var(--aura-accent); }
.aura-legal__body hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--aura-border); opacity: 1; }
.aura-legal__body blockquote {
margin: 1.2rem 0;
padding: .2rem 0 .2rem 1rem;
border-left: 2px solid var(--aura-accent);
color: var(--aura-text);
}
.aura-legal__body table { width: 100%; margin: 0 0 1.2rem; border-collapse: collapse; font-size: .9rem; }
.aura-legal__body th, .aura-legal__body td { padding: .55rem .6rem; border-bottom: 1px solid var(--aura-border); text-align: left; vertical-align: top; }
.aura-legal__body th { color: var(--aura-text); font-weight: 600; }
/* editors paste inline colours meant for a white page; keep the text readable */
.aura-legal__body [style*="color"] { color: inherit !important; }
.aura-legal__body [style*="background"] { background: none !important; }
/* ---- Google Translate picker, dark ---- */
.aura-legal__gt { margin-top: 1.6rem; }
.aura-legal__gt .goog-te-gadget { font-family: inherit; font-size: .8rem; color: var(--aura-faint); }
.aura-legal__gt .goog-te-gadget select {
appearance: none;
margin: 0 0 .4rem;
padding: .5rem 2rem .5rem .8rem;
border: 1px solid var(--aura-border);
border-radius: 10px;
background: var(--aura-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23999' d='M1 0l4 4 4-4 1 1-5 5-5-5z'/%3E%3C/svg%3E") no-repeat right 10px center;
font-family: inherit;
font-size: .85rem;
color: var(--aura-text);
cursor: pointer;
outline: none;
transition: border-color var(--aura-dur) var(--aura-ease);
}
.aura-legal__gt .goog-te-gadget select:hover,
.aura-legal__gt .goog-te-gadget select:focus { border-color: var(--aura-accent); }
/* ---- side: the two documents and the date ---- */
.aura-legal__side { position: sticky; top: 96px; display: grid; gap: .9rem; min-width: 0; }
.aura-legal__nav {
display: grid;
padding: .4rem;
border: 1px solid var(--aura-border);
border-radius: 18px;
background: color-mix(in srgb, var(--aura-text) 4%, var(--aura-bg));
}
.aura-legal__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: .8rem;
padding: .8rem 1rem;
border-radius: 12px;
font-size: .92rem;
font-weight: 600;
color: var(--aura-muted);
transition: background-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-legal__link svg { color: var(--aura-faint); transition: color var(--aura-dur) var(--aura-ease); }
.aura-legal__link:hover { color: var(--aura-text); background: color-mix(in srgb, var(--aura-text) 6%, transparent); }
.aura-legal__link.is-on { color: var(--aura-accent); background: color-mix(in srgb, var(--aura-accent) 12%, transparent); }
.aura-legal__link.is-on svg { color: var(--aura-accent); }
.aura-legal__updated {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .3rem .5rem;
margin: 0;
padding: 0 .4rem;
font-size: .82rem;
color: var(--aura-faint);
}
.aura-legal__updated span { width: 100%; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.aura-legal__updated b { color: var(--aura-text); font-weight: 600; }
@media (max-width: 980px) {
.aura-legal__grid { grid-template-columns: minmax(0, 1fr); }
/* on a phone the switch between the two documents comes first */
.aura-legal__side { position: static; order: -1; }
.aura-legal__nav { grid-template-columns: 1fr 1fr; }
.aura-legal__link { justify-content: center; text-align: center; }
.aura-legal__link svg { display: none; }
}
/* ---- terms / privacy on the user's own markup (bootstrap row + cols) ----
terms.php and privacy.php keep their original structure and translation
code; these rules only dress the classes they now carry. */
.aura-legal .row { row-gap: 1.2rem; }
.aura-legal__tr + .border-bottom { display: none; }
.aura-legal__tr #translated_label p { font-weight: 400; }
.aura-legal__meta {
margin-top: .9rem;
padding: 0 .4rem;
font-size: .82rem;
color: var(--aura-faint);
}
.aura-legal__meta b { color: var(--aura-text); font-weight: 600; }
.aura-legal__meta svg { color: var(--aura-faint); }
.aura-legal__list {
position: sticky;
top: 96px;
gap: .15rem;
padding: .4rem;
border: 1px solid var(--aura-border);
border-radius: 18px;
background: color-mix(in srgb, var(--aura-text) 4%, var(--aura-bg));
}
.aura-legal__list .nav-link {
padding: .8rem 1rem;
border-radius: 12px;
font-size: .92rem;
font-weight: 600;
color: var(--aura-muted);
transition: background-color var(--aura-dur) var(--aura-ease), color var(--aura-dur) var(--aura-ease);
}
.aura-legal__list .nav-link:hover { color: var(--aura-text); background: color-mix(in srgb, var(--aura-text) 6%, transparent); }
.aura-legal__list .nav-item.active .nav-link { color: var(--aura-accent); background: color-mix(in srgb, var(--aura-accent) 12%, transparent); }
/* Google's picker: the page's own