*, *::before, *::after { box-sizing: border-box; }
html { background: var(--shine-bg); scroll-behavior: smooth; }
body.shine {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--shine-bg);
color: var(--shine-text);
font-family: var(--shine-font-ui);
font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.shine-panel-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* One width for the page, the hero and every section below it. --shine-max is
min(95vw, 1320px): the panels read as ~95% wide on a laptop, stop growing on
a wide screen, and nothing can misalign because there is only one number. */
.shine-wrap {
width: var(--shine-max);
margin: 0 auto;
padding: 0;
}
/* under 640px, 95vw would leave a 10px gutter — give it a real one instead */
@media (max-width: 640px) { .shine-wrap {width: 100%;padding: 0 25px;} }
.shine-main { flex: 1 0 auto; }
.shine-skip {
position: absolute; left: -9999px; top: 0; z-index: 200;
background: var(--shine-accent); color: var(--shine-accent-text);
padding: .75rem 1.25rem;
}
.shine-skip:focus { left: 0; }
/* =========================== TYPE ======================================= */
/* Work Sans, sentence case, tight and heavy — the headline carries the page
rather than letter-spacing doing the work. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--shine-font-display);
font-weight: 800;
margin: 0;
line-height: 1.12;
letter-spacing: -.02em;
color: var(--shine-text);
text-transform: none;
}
p { margin: 0; }
b, strong { font-weight: 600; }
/* =========================== NAV ======================================== */
/* The bar is the page: same white, no rule under it, nothing to separate it
from the content. Only once scrolled does a soft shadow lift it. */
.shine-nav {
top: 0;
left: 0;
right: 0;
z-index: 90;
background: var(--shine-bg);
border-bottom: 0;
transition: box-shadow .25s var(--shine-ease);
}
.shine-nav.is-stuck {}
/* every page clears the fixed bar, hero or not */
.shine-main {}
@media (max-width: 640px) { .shine-main {} }
.shine-nav__bar {
width: var(--shine-max);
margin: 0 auto;
padding: 0;
height: 100px;
display: flex;
align-items: center;
gap: 28px;
}
@media (max-width: 640px) { .shine-nav__bar {width: 100%;padding: 0 18px;height: 40px;} }
/* White once scrolled, and always white on pages with no hero: the bar is the
same panel colour as the cards, sitting on the tinted page. */
body.shine--flat { padding-top: 0; }
body.shine--flat .shine-main {}
@media (max-width: 640px) { body.shine--flat .shine-main {} }
.shine-brand { display: flex; align-items: center; flex: 0 0 auto; }
.shine-brand img { max-height: 38px; width: auto; }
.shine-brand__name {
font-family: var(--shine-font-display);
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -.03em;
color: var(--shine-text);
}
.shine-brand__add {
font-size: .82rem; color: var(--shine-muted);
border: 1px dashed var(--shine-border);
padding: .35rem .8rem; border-radius: 100px;
}
.shine-nav__links { position: relative; display: flex; align-items: center; gap: 4px; margin-left: auto; }
.shine-nav__link {
position: relative;
padding: 1rem .9rem;
color: var(--shine-muted);
transition: color var(--shine-dur) var(--shine-ease);
white-space: nowrap;
font-size: .92rem;
font-weight: 400;
}
.text-primary {
color: var(--shine-accent);
}
.shine-nav__link:hover { color: var(--shine-text); }
.shine-nav__link.is-active { color: var(--shine-accent); font-weight: 600; }
/* No underline under the menu: the active page is marked by colour alone.
The .shine-nav__ink element still renders, so it is hidden here. */
.shine-nav__ink { display: none; }
@media (max-width: 1100px) { .shine-nav__links { display: none; } }
.shine-nav__actions {display: flex;align-items: center;gap: 20px;margin-left: auto;}
.shine-nav__links + .shine-nav__actions { margin-left: 0; }
.shine-nav__phone {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .88rem; color: var(--shine-muted);
transition: color var(--shine-dur) var(--shine-ease);
}
.shine-nav__phone:hover { color: var(--shine-accent); }
.shine-nav__phone b {white-space: nowrap;color: var(--shine-text);font-weight: 500;}
@media (max-width: 900px) { .shine-nav__phone { display: none; } }
/* =========================== BUTTONS ==================================== */
.shine-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5rem;
padding: .78rem 1.6rem;
border-radius: var(--shine-radius-pill);
border: 1px solid transparent;
font-family: var(--shine-font-ui);
font-size: .85rem;
cursor: pointer;
transition: background-color var(--shine-dur) var(--shine-ease),
color var(--shine-dur) var(--shine-ease),
border-color var(--shine-dur) var(--shine-ease),
transform var(--shine-dur) var(--shine-ease);
}
.shine-btn:active { transform: translateY(1px); }
.shine-btn--solid {background: var(--shine-accent);color: var(--shine-accent-text);}
.shine-btn--solid:hover { background: var(--shine-accent-hover); color: var(--shine-accent-text); }
/* the warm colour lives here and nowhere else: one primary action per view */
.shine-btn--cta {background: var(--shine-cta);color: var(--shine-accent);font-weight: 700;}
.shine-btn--cta:hover {background: var(--shine-cta-hover);color: var(--shine-cta-text);}
.shine-btn--ghost {border-color: var(--shine-border);color: var(--shine-text);background: var(--shine-surface);}
.shine-btn--ghost:hover {border-color: var(--shine-accent);color: var(--shine-accent);background: color-mix(in srgb, var(--shine-text) 7%, var(--shine-bg));}
.shine-btn--quiet { color: var(--shine-muted); }
.shine-btn--quiet:hover { color: var(--shine-danger); }
.shine-btn--block { width: 100%; }
@media (max-width: 640px) { .shine-nav__cta { display: none; } }
.shine-iconbtn {
background: none; border: 0; cursor: pointer;
color: var(--shine-muted); padding: 6px; line-height: 0;
transition: color var(--shine-dur) var(--shine-ease);
}
.shine-iconbtn:hover { color: var(--shine-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. */
.shine-account {
position: relative;
display: flex;
align-items: center;
gap: 10px;
}
.shine-account__btn {
display: inline-flex; align-items: center; gap: .5rem;
background: none; border: 0; cursor: pointer;
color: var(--shine-text); padding: 4px;
font-family: var(--shine-font-ui); font-size: .9rem;
}
.shine-account__label { color: var(--shine-muted); }
@media (max-width: 780px) { .shine-account__label, .shine-caret { display: none; } }
.shine-avatar {
width: 35px;
height: 35px;
border-radius: 13px;
object-fit: cover;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.shine-avatar--empty {color: var(--shine-accent);}
.shine-caret { color: var(--shine-muted); }
.shine-menu.dropdown-menu {
background: var(--shine-surface);
border: 1px solid var(--shine-border);
border-radius: 16px;
padding: 6px;
min-width: 234px;
box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.shine-menu li { list-style: none; }
.shine-menu a {
display: flex; align-items: center; justify-content: space-between; gap: .75rem;
padding: .6rem .8rem; border-radius: 11px;
color: var(--shine-text); font-size: .92rem;
transition: background-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-menu a:hover {background: var(--shine-surface-alt);/* color: var(--shine-accent); */background: color-mix(in srgb, var(--shine-text) 7%, var(--shine-bg));}
.shine-menu a.is-danger { color: var(--shine-danger); }
.shine-menu__sep { height: 1px; background: var(--shine-border); margin: 6px 8px; }
.shine-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;
}
.shine-badge--ok {background: #1dbb60;color: white;}
.shine-badge--warn { background: var(--shine-accent); color: var(--shine-accent-text); }
.shine-badge--dot {
min-width: 8px;
width: 8px;
height: 8px;
padding: 0;
background: var(--shine-accent);
position: absolute;
top: 4px;
/* right: 22px; */
}
/* =========================== BURGER + PANEL ============================= */
.shine-burger {
display: none;
background: none;
border: 1px solid var(--shine-accent);
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 12px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 5px;
transition: border-color var(--shine-dur) var(--shine-ease);
}
.shine-burger:hover { border-color: var(--shine-accent); }
.shine-burger span {display: block;width: 16px;height: 1px;background: var(--shine-accent);}
@media (max-width: 1100px) { .shine-burger { display: inline-flex; } }
.shine-scrim {
position: fixed; inset: 0; z-index: 95;
background: rgba(0,0,0,.65);
opacity: 0; pointer-events: none;
transition: opacity .25s var(--shine-ease);
}
body.shine-panel-open .shine-scrim { opacity: 1; pointer-events: auto; }
.shine-panel {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 96;
width: min(400px, 88vw);
background: var(--shine-surface);
border-left: 1px solid var(--shine-border);
display: flex; flex-direction: column;
transform: translateX(101%);
transition: transform .32s var(--shine-ease);
overflow-y: auto;
}
body.shine-panel-open .shine-panel { transform: none; }
.shine-panel__top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px;
}
.shine-panel__nav {padding: 20px 0;flex: 1 0 auto;}
.shine-panel__link {
display: flex;
align-items: center;
gap: .9rem;
padding: .95rem 1rem;
/* border-radius: 12px; */
font-family: var(--shine-font-display);
color: var(--shine-text);
border-bottom: 1px solid var(--shine-border);
transition: background-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-panel__link:hover { background: var(--shine-surface-alt); }
.shine-panel__link.is-active { color: var(--shine-accent); }
.shine-panel__idx {
font-size: .72rem; color: var(--shine-faint); font-family: var(--shine-font-ui);
letter-spacing: .08em; min-width: 20px;
}
.shine-panel__link .shine-badge { margin-left: auto; }
.shine-panel__foot {padding: 18px 22px 28px;display: grid;gap: 10px;}
.shine-panel__phone {
display: flex; flex-direction: column; gap: 2px; margin-top: 8px;
font-size: .85rem; color: var(--shine-muted);
}
.shine-panel__phone b { color: var(--shine-text); font-size: 1.05rem; font-weight: 500; }
.shine-panel__lang { display: flex; align-items: center; gap: .55rem; color: var(--shine-muted); font-size: .88rem; margin-top: 6px; }
.shine-panel__lang img { width: 22px; border-radius: 3px; }
/* =========================== HERO ======================================= */
/* Shine's hero is a rounded panel sitting inside the page width rather than a
full-bleed strip: the tint shows around it, which is what makes it read as
inset. Same --shine-max as every section below, so the edges line up. */
.shine-hero {
position: relative;
width: var(--shine-max);
margin: 18px auto 0;
border-radius: var(--shine-radius-lg);
min-height: clamp(300px, 52vh, 380px);
display: flex;
align-items: flex-end;
overflow: hidden;
}
@media (max-width: 760px) {
.shine-hero { min-height: 320px; }
}
@media (max-width: 640px) {
.shine-hero {width: calc(100% - 28px);border-radius: var(--shine-radius);}
}
/* Oversized on purpose: the parallax shifts this vertically, and the extra
height above/below means an edge can never slide into view. */
.shine-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. */
.shine-hero__media img {
width: 100%; height: 100%; object-fit: cover;
transform: scale(1.04);
}
.shine-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. */
.shine-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%);
}
.shine-grid__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the plus: two hairlines, drawn from the centre out */
.shine-grid__mark {
position: absolute;
width: 26px; height: 26px;
margin: -13px 0 0 -13px;
opacity: 0;
animation: shineMarkBlink 9s var(--shine-ease) infinite;
}
.shine-grid__mark::before,
.shine-grid__mark::after {
content: "";
position: absolute;
background: var(--shine-accent);
}
.shine-grid__mark::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.shine-grid__mark::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
@keyframes shineMarkBlink {
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) { .shine-grid { opacity: .55; } }
/* inside the panel now, so it gets its own padding instead of the page width */
.shine-hero__inner {
position: relative; z-index: 2;
width: 100%; margin: 0;
padding: 0 clamp(28px, 4vw, 56px) clamp(36px, 5vw, 60px);
}
@media (max-width: 640px) { .shine-hero__inner {padding: 0 22px 32px;} }
.shine-crumbs {display: flex;flex-wrap: wrap;align-items: center;gap: .5rem;font-size: .9rem;margin-bottom: 1.6rem;}
.shine-crumbs a { color: var(--shine-accent); transition: color var(--shine-dur) var(--shine-ease); }
.shine-crumbs a:hover { color: var(--shine-accent-hover); }
/* current page is not a link — let it recede so the accent reads as clickable */
.shine-crumbs span { color: var(--shine-muted); }
.shine-crumbs > * + *::before {content: "•";color: var(--shine-faint);margin-right: .5rem;}
/* the panel is a dark photo, so its type is light regardless of the theme */
.shine-hero__title {font-size: clamp(2.2rem, 5vw, 3.4rem);color: #ffffff;letter-spacing: -.02em;}
.shine-hero .shine-crumbs span { color: rgba(255,255,255,.72); }
.shine-hero .shine-crumbs > * + *::before { color: rgba(255,255,255,.45); }
/* ---- 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. */
.shine-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;
}
.shine-hero__word > span {
display: inline-block;
transform: translateY(110%);
opacity: 0;
animation: shineWordUp .9s var(--shine-ease) both;
animation-delay: calc(var(--i) * 75ms + 140ms);
letter-spacing: -.02em;
/* the panel is a photo: the headline stays white, the accent is carried by
the buttons and the small marks instead */
color: inherit;
}
@keyframes shineWordUp {
to { transform: translateY(0); opacity: 1; }
}
.shine-crumbs { animation: shineHeroFade .7s var(--shine-ease) both; animation-delay: 60ms; }
@keyframes shineHeroFade {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
/* =========================== SECTION ==================================== */
.shine-sec {padding: clamp(56px, 8vw, 50px) 0;}
.shine-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(--shine-border);
}
.shine-sec__title {font-size: clamp(1.8rem, 3.4vw, 2.3rem);}
.shine-count {
font-family: var(--shine-font-display);
font-size: .86rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--shine-muted); white-space: nowrap;
}
.shine-count span { color: var(--shine-accent); font-size: 1.5rem; margin-right: .5rem; font-weight: 600; }
/* =========================== LOCATIONS (mosaic) ========================= */
.shine-locs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.shine-loc {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 1.4rem;
min-height: 230px;
padding: 2rem 2.1rem 1.7rem;
background: var(--shine-surface);
border: 1px solid var(--shine-border);
border-radius: 20px;
transition: border-color var(--shine-dur) var(--shine-ease);
}
/* hover: the whole border turns gold (the old top hairline animation is gone) */
.shine-loc:hover { border-color: var(--shine-accent); }
/* the oversized index, bled off the corner */
.shine-loc__ghost {
position: absolute;
right: -.06em;
bottom: -.34em;
font-family: var(--shine-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(--shine-dur) var(--shine-ease),
transform .4s var(--shine-ease);
}
.shine-loc:hover .shine-loc__ghost {
color: rgb(255 255 255 / 12%);
transform: translateY(-4px);
}
.shine-loc__main { position: relative; z-index: 1; flex: 1 0 auto; }
.shine-loc__meta {
display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--shine-faint);
margin-bottom: .85rem;
}
.shine-loc__meta svg { color: var(--shine-accent); flex: 0 0 auto; }
.shine-loc__meta i { font-style: normal; color: rgba(255,255,255,.3); }
.shine-loc__meta i::before {content: " • ";}
.shine-loc__title {
font-size: .9rem;
font-weight: 700;
color: var(--shine-text);
max-width: 24ch;
line-height: 22px;
}
.shine-loc__contact {
list-style: none; padding: 0; margin: 1.1rem 0 0;
display: flex; flex-wrap: wrap; gap: .55rem 1.4rem;
}
.shine-loc__contact a {
display: inline-flex; align-items: center; gap: .45rem;
font-size: .875rem; color: var(--shine-muted);
transition: color var(--shine-dur) var(--shine-ease);
}
.shine-loc__contact a svg { color: var(--shine-faint); transition: color var(--shine-dur) var(--shine-ease); }
.shine-loc__contact a:hover { color: var(--shine-accent); }
.shine-loc__contact a:hover svg { color: var(--shine-accent); }
.shine-loc__foot {
position: relative; z-index: 1;
display: flex; align-items: center; gap: 1.1rem;
margin-top: auto;
}
.shine-loc__nogeo { font-size: .82rem; color: var(--shine-faint); }
.shine-loc__edit { font-size: .84rem; color: var(--shine-muted); }
.shine-loc__edit:hover { color: var(--shine-accent); }
@media (max-width: 860px) {
.shine-locs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.shine-loc {
min-height: 0;
padding: 1.7rem 1.6rem 1.5rem;
gap: 1.2rem;
}
.shine-loc__ghost { font-size: 6.5rem; right: -.04em; }
}
/* =========================== EMPTY ====================================== */
.shine-empty {
/* border: 1px dashed var(--shine-border); */
/* border-radius: 18px; */
/* padding: clamp(40px, 8vw, 80px) 24px; */
text-align: center;
display: grid;
justify-items: center;
gap: 1.1rem;
color: var(--shine-faint);
}
.shine-empty p { color: var(--shine-muted); max-width: 40ch; }
/* =========================== MEDIA BOX (4:3, matches the upload crop) ==== */
.shine-media {
position: relative; overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--shine-surface-alt);
border-radius: 14px;
}
.shine-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--shine-ease); }
.shine-media--zoom:hover > img { transform: scale(1.04); }
.shine-media--empty { display: flex; align-items: center; justify-content: center; border: 1px solid var(--shine-border); }
.shine-media--empty svg { width: 56px; height: 56px; color: var(--shine-faint); }
/* =========================== ALERT ====================================== */
.shine-alert {
background: #fff6e2;
border-bottom: 1px solid #f3dcae;
color: #6b4b05;
padding: .8rem 24px;
font-size: .9rem;
text-align: center;
}
/* =========================== FOOTER ===================================== */
/* Minimal footer: one white panel on the tint, same width and radius as the
hero and the cards, so the page ends the way it began. */
.shine-foot {margin-top: auto;padding-bottom: 18px;}
.shine-foot__top {
width: var(--shine-max);
margin: 0 auto;
background: var(--shine-surface);
border: 1px solid var(--shine-border);
border-radius: var(--shine-radius-lg);
padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 56px);
/* 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;
margin-bottom: 50px;
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-foot__brand { min-width: 0; }
@media (max-width: 900px) {
.shine-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. */
.shine-foot__logo { display: inline-flex; align-items: center; }
.shine-foot__logo img {max-height: 55px;width: auto;max-width: 160px;}
.shine-foot__logo .shine-brand__name {
font-family: var(--shine-font-display);
font-size: 1.5rem; font-weight: 600; letter-spacing: -.03em;
color: var(--shine-text);
}
/* Footer disclosure — quiet, narrow measure so it reads as fine print
rather than competing with the link columns. */
.shine-foot__legal {
color: var(--shine-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. */
.shine-foot__co {
color: var(--shine-muted);
font-weight: 600;
}
.shine-foot__co::after {
content: " · ";
color: var(--shine-faint);
font-weight: 400;
}
.shine-foot__cols { display: flex; flex-wrap: wrap; gap: 1.6rem clamp(1.6rem, 3vw, 3.5rem); }
.shine-foot__col { display: grid; gap: .6rem; align-content: start; }
.shine-foot__h {
color: var(--shine-faint);
margin-bottom: .3rem;
}
.shine-foot__col a {color: var(--shine-muted);transition: color var(--shine-dur) var(--shine-ease);}
.shine-foot__col a:hover { color: var(--shine-accent); }
.shine-foot__lang { display: inline-flex; align-items: center; gap: .45rem; }
.shine-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. */
.shine-foot__by {
font-size: .82rem;
color: var(--shine-faint);
margin-top: .7rem;
}
.shine-foot__by a { color: var(--shine-muted); transition: color var(--shine-dur) var(--shine-ease); }
.shine-foot__by a:hover { color: var(--shine-accent); }
@media (max-width: 640px) {
.shine-foot__top {width: calc(100% - 28px);padding-left: 22px;padding-right: 22px;border-radius: var(--shine-radius);}
}
/* =========================== MODAL ====================================== */
.shine-modal .modal-content {
background: var(--shine-surface);
border: 1px solid var(--shine-border);
border-radius: 20px;
color: var(--shine-text);
overflow: hidden;
}
/* This template s bootstrap.min.css carries the dark theme backdrop
(#0b071be3 - near opaque), which read as a black flash before the white
dialog painted. Shine is light: a soft overlay, and no fade. */
.modal-backdrop,
.modal-backdrop.show { background-color: rgba(15, 16, 32, .45); opacity: 1; }
.modal-backdrop.fade { transition: none; }
.shine-modal.fade,
.shine-modal.fade .modal-dialog {transition: none;transform: none;}
.shine-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 22px;
}
.shine-modal__head h3 { font-size: 1.2rem; }
.shine-modal__search { position: relative; padding: 16px 22px 10px; }
.shine-modal__search svg { position: absolute; left: 36px; top: 50%; transform: translateY(-25%); color: var(--shine-faint); }
.shine-modal__search input {
width: 100%; padding: .75rem 1rem .75rem 2.6rem;
background: var(--shine-bg);
border: 1px solid var(--shine-border);
border-radius: 12px;
color: var(--shine-text); font-family: var(--shine-font-ui); font-size: .95rem;
}
.shine-modal__search input:focus { outline: none; border-color: var(--shine-accent); }
.shine-langs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 6px;
padding: 10px 22px 24px;
max-height: 56vh;
overflow-y: auto;
}
.shine-lang a {
display: flex; align-items: center; gap: .6rem;
padding: .6rem .7rem; border-radius: 11px;
border: 1px solid transparent;
font-size: .88rem; color: var(--shine-text);
transition: background-color var(--shine-dur) var(--shine-ease), border-color var(--shine-dur) var(--shine-ease);
}
.shine-lang a:hover { background: var(--shine-surface-alt); }
.shine-lang.is-active a {border-color: var(--shine-accent);background: var(--shine-surface-alt);}
.shine-lang img { width: 22px; border-radius: 3px; }
.shine-lang i { color: var(--shine-faint); font-style: normal; }
/* =========================== TO TOP ===================================== */
.shine-totop {
position: fixed;
right: 22px;
bottom: 22px;
z-index: 80;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--shine-accent);
color: var(--shine-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(--shine-dur) var(--shine-ease), transform var(--shine-dur) var(--shine-ease);
}
.shine-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.shine-js is set in ).
Without JS these stay visible — the animation is an enhancement, never a
precondition for seeing the content. */
.shine-js [data-shine-reveal] {
opacity: 0;
transform: translateY(14px);
transition: opacity .45s var(--shine-ease), transform .45s var(--shine-ease);
}
.shine-js [data-shine-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-shine-reveal] { opacity: 1; transform: none; }
/* hero copy appears immediately, no rise */
.shine-hero__word > span,
.shine-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 */
.shine-grid__mark { animation: none; opacity: .7; transform: none; }
}
/* =========================== MISC ======================================= */
::selection { background: var(--shine-accent); color: var(--shine-accent-text); }
* { scrollbar-color: var(--shine-border) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--shine-border); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--shine-faint); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
outline: 2px solid var(--shine-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. */
.shine-chev {
flex: 0 0 auto;
transition: transform var(--shine-dur) var(--shine-ease);
}
.shine-btn:hover .shine-chev,
a:hover > .shine-chev { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .shine-chev { transition: none; } }
/* =========================== AUTH / FORMS =============================== */
.shine-auth {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(0, .95fr);
gap: 2.5rem;
align-items: start;
}
@media (max-width: 900px) { .shine-auth { grid-template-columns: minmax(0,1fr); gap: 1.6rem; } }
.shine-auth__main {
background: var(--shine-surface);
border: 1px solid var(--shine-border);
border-radius: 20px;
padding: clamp(1.5rem, 3vw, 2.6rem);
}
/* ---- segmented tabs (Sign in / Sign up / Recover) ---- */
.shine-tabs {
gap: 2px;
padding: 9px;
margin-bottom: 1.8rem;
border-radius: 16px;
width: max-content;
max-width: 100%;
width: 100%;
background: var(--shine-surface-alt);
}
.shine-tab {
flex: 0 0 auto; /* never squash a label to make room */
padding: .5rem 1.1rem;
border-radius: 12px;
font-size: .9rem;
font-weight: 500;
color: var(--shine-muted);
white-space: nowrap;
transition: background-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-tab:hover { color: var(--shine-text); }
.shine-tab.is-active { background: var(--shine-accent); color: var(--shine-accent-text); }
/* ---- fields ---- */
.shine-form { display: grid; gap: 1.15rem; }
.shine-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .shine-grid2 { grid-template-columns: 1fr; } }
.shine-field { display: grid; gap: .45rem; min-width: 0; }
.shine-field > label {
color: var(--shine-faint);
}
.shine-control { position: relative; display: block; }
.shine-control__icon {
position: absolute;
left: 14px; top: 50%;
transform: translateY(-50%);
color: var(--shine-faint);
pointer-events: none;
z-index: 2;
transition: color var(--shine-dur) var(--shine-ease);
}
.shine-control:focus-within .shine-control__icon { color: var(--shine-accent); }
body .shine-input {
width: 100%;
background: var(--shine-bg);
border: 1px solid var(--shine-border);
border-radius: 12px;
color: var(--shine-text);
font-family: var(--shine-font-ui);
font-size: .85rem;
padding: .8rem 1rem;
transition: border-color var(--shine-dur) var(--shine-ease),
box-shadow var(--shine-dur) var(--shine-ease);
}
.shine-control__icon ~ .shine-input { padding-left: 2.6rem; }
body .shine-input::placeholder { color: var(--shine-faint); }
body .shine-input:focus {
outline: none;
border-color: var(--shine-accent);
}
body .shine-input:-webkit-autofill,
body .shine-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--shine-text);
-webkit-box-shadow: 0 0 0 1000px var(--shine-bg) inset;
}
/* password eye */
.shine-control__toggle {
position: absolute;
right: 12px; top: 50%;
transform: translateY(-50%);
color: var(--shine-faint);
cursor: pointer;
z-index: 3;
line-height: 0;
transition: color var(--shine-dur) var(--shine-ease);
}
.shine-control__toggle:hover { color: var(--shine-text); }
/* ---- validation states (Bootstrap adds .was-validated on submit) ---- */
.was-validated .shine-input:invalid {
border-color: var(--shine-danger);
/* box-shadow: 0 0 0 3px color-mix(in srgb, var(--shine-danger) 18%, transparent); */
}
.was-validated .shine-input:valid { border-color: color-mix(in srgb, #1dbb60 55%, transparent); }
.was-validated .shine-input:invalid ~ .shine-control__icon { color: var(--shine-danger); }
/* ---- intl-tel-input, themed to match ---- */
.shine-field--phone .iti { display: block; width: 100%; }
.shine-field--phone .iti__selected-country { background: transparent; border-radius: 12px 0 0 12px; }
.shine-field--phone .iti__selected-country:hover {/* background: var(--shine-surface-alt); */}
.shine-field--phone .iti__selected-dial-code { color: var(--shine-muted); margin-left: 4px; }
.shine-field--phone .iti__arrow { border-top-color: var(--shine-faint); }
.iti__dropdown-content {
background: var(--shine-surface);
border: 1px solid var(--shine-border);
border-radius: 14px;
color: var(--shine-text);
overflow: hidden;
}
.iti__search-input {
background: var(--shine-bg) !important;
border: 1px solid var(--shine-border) !important;
color: var(--shine-text) !important;
border-radius: 10px !important;
padding: .55rem .75rem !important;
margin: 10px !important;
width: calc(100% - 20px) !important;
}
.iti__country { color: var(--shine-text); }
.iti__country:hover, .iti__country.iti__highlight { background: var(--shine-surface-alt) !important; }
.iti__country-name { color: var(--shine-text); }
.iti__dial-code { color: var(--shine-faint); }
/* ---- password rules ---- */
.shine-form__note { color: var(--shine-muted); font-size: .9rem; margin-top: .3rem; }
.shine-rules { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; font-size: .85rem; }
.shine-rules .icon-text-wrapper { display: flex; align-items: center; gap: .5rem; }
.shine-rules .icon-container { display: inline-flex; width: 16px; justify-content: center; }
.shine-rules li.text-danger { color: var(--shine-faint) !important; }
.shine-rules li.text-success { color: #1dbb60 !important; }
.shine-wait { color: var(--shine-muted); font-size: .85rem; display: flex; align-items: center; }
.shine-form__submit { justify-self: start; padding-inline: 2.2rem; }
.shine-form__submit:disabled { opacity: .5; cursor: not-allowed; }
/* ---- session message ---- */
.shine-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(--shine-border);
background: var(--shine-surface-alt);
color: var(--shine-text);
}
.shine-note > span { flex: 1 1 auto; min-width: 0; }
.shine-note .shine-iconbtn { flex: 0 0 auto; }
.shine-note--danger {border-color: var(--shine-danger);color: #dc003f;background: #dc003f14;}
.shine-note--success {border-color: color-mix(in srgb, #1dbb60 45%, transparent);color: #1dbb60;background: #27be471a;}
.shine-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. */
.shine-auth__col { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.shine-auth__side { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.shine-auth__main { min-width: 0; }
.shine-form, .shine-grid2, .shine-field, .shine-control { min-width: 0; }
.shine-auth__title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.shine-why { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.shine-why li {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: start;
padding: 1.2rem 1.3rem;
background: var(--shine-surface-alt);
border-radius: 16px;
transition: border-color var(--shine-dur) var(--shine-ease);
}
.shine-why li:hover { border-color: rgba(255,255,255,.26); }
.shine-why__idx {
font-family: var(--shine-font-display);
font-size: .82rem; font-weight: 600; letter-spacing: .04em;
color: var(--shine-accent);
padding-top: .18rem;
}
.shine-why h3 {font-size: 1rem;}
.shine-why p { color: var(--shine-muted); font-size: .88rem; line-height: 1.65; max-width: 38ch; }
.shine-auth__recover {
display: flex; flex-wrap: wrap; gap: .4rem;
font-size: .88rem; color: var(--shine-muted);
}
.shine-auth__recover a { color: var(--shine-accent); }
.shine-auth__recover a:hover { color: var(--shine-accent-hover); }
/* =========================== NAV, SMALL SCREENS ========================= */
/* The links are display:none below 1100px, but `.shine-nav__links + .shine-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) {
.shine-nav__links + .shine-nav__actions,
.shine-nav__actions { margin-left: auto; }
.shine-nav__bar { gap: 12px; }
}
@media (max-width: 640px) {
.shine-brand img {
max-width: 160px;
max-height: 40px;
width: auto;
height: auto;
}
.shine-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:
…
========================================================================= */
.shine-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 */
}
.shine-scroller::-webkit-scrollbar { display: none; } /* Blink / WebKit */
.shine-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. */
.shine-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%);
}
.shine-scroller.can-scroll-start {
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px);
mask-image: linear-gradient(90deg, transparent 0, #000 46px);
}
.shine-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 .shine-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) {
.shine-auth__side { display: none; }
}
/* ---- recover step indicator ---- */
.shine-steps li { opacity: .55; transition: opacity var(--shine-dur) var(--shine-ease); }
.shine-steps li.is-current { opacity: 1; border-color: color-mix(in srgb, var(--shine-accent) 45%, transparent); }
.shine-steps li.is-done { opacity: .8; }
.shine-steps li.is-done .shine-why__idx { color: #1dbb60; }
.shine-steps li:not(.is-current) .shine-why__idx { color: var(--shine-faint); }
/* verification code field reads as a code, not prose */
.shine-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. */
.shine-field--phone .iti { position: relative; display: block; }
.shine-field--phone .iti__tel-input {
top: 0 !important;
position: relative;
}
.shine-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. */
}
.shine-field--phone .iti__selected-country {
height: 100% !important;
padding: 0 .75rem !important;
border-radius: 12px 0 0 12px;
}
.shine-field--phone .iti__selected-country-primary { padding: 0 !important; }
/* Dropdown hangs below the field, never over it. */
.shine-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-height: 320px;
overflow-y: auto;
width: 100%;
}
.shine-field--phone .iti__dropdown-content.iti__hide { display: none; }
/* footer language: chevron signals it opens the language modal */
.shine-foot__lang { gap: .5rem; }
.shine-foot__lang-caret {
flex: 0 0 auto;
color: var(--shine-faint);
transition: transform var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-foot__lang:hover .shine-foot__lang-caret {
color: var(--shine-accent);
transform: translateY(1px);
}
/* =========================== CONTACT ==================================== */
/* Note: deliberately NOT .shine-auth__side — that column is hidden below 900px,
and both of these must survive on a phone. */
.shine-contact {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
align-items: start;
}
@media (max-width: 900px) { .shine-contact { grid-template-columns: minmax(0,1fr); gap: 1.8rem; } }
.shine-contact__col { display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.shine-contact__card {
background: var(--shine-surface);
border: 1px solid var(--shine-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. */
.shine-contact__cta {
display: grid;
gap: 1.1rem;
justify-items: start;
align-content: start;
padding-top: .3rem;
}
.shine-contact__cta p { color: var(--shine-muted); font-size: .92rem; line-height: 1.7; max-width: 46ch; }
/* label / value rows */
.shine-crow {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
gap: 1rem;
padding: .95rem 0;
border-bottom: 1px solid var(--shine-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;
}
.shine-crow:first-child { padding-top: 0; }
.shine-crow:last-child { border-bottom: 0; padding-bottom: 0; }
.shine-crow__k {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--shine-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;
}
.shine-crow__k svg { color: var(--shine-accent); flex: 0 0 auto; }
.shine-crow__v { color: var(--shine-text); font-size: .95rem; line-height: 1.7; word-break: break-word; }
.shine-crow__v a { color: var(--shine-text); transition: color var(--shine-dur) var(--shine-ease); }
.shine-crow__v a:hover { color: var(--shine-accent); }
@media (max-width: 520px) {
.shine-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 shine so an unmigrated page reads
dark while its body is rebuilt. Remove a line once its page is migrated. */
body.shine .bg-white,
body.shine .bg-light { background: transparent !important; color: inherit; }
/* =========================== FLEET / VEHICLE CARD ======================= */
.shine-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: 2rem; /* the cards carry their own fill now */
width: 100%;
}
@media (max-width: 560px) { .shine-fleet { grid-template-columns: minmax(0,1fr); gap: 1.2rem; } }
/* 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 */
/* A filled tile: photo on top, name and category left with the price right,
one line of specs, and a full-width button that always sits at the foot. */
.shine-vh {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
border-radius: var(--shine-radius);
}
/* ---- media: 4:3 box that fades into the page at the bottom ---- */
.shine-vh__media {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: var(--shine-radius);
overflow: hidden;
background: var(--shine-surface);
}
.shine-vh__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .2s var(--shine-ease);
}
.shine-vh:hover .shine-vh__media img { transform: scale(1.03); }
.shine-vh__noimg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--shine-surface-alt);
}
.shine-vh__noimg svg {width: 72px;color: var(--shine-faint);opacity: .2;}
/* 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. */
.shine-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 */
}
.shine-vh__tags > * { pointer-events: auto; }
.shine-vh__chip,
.shine-vh__flag {
padding: .2rem .6rem;
border-radius: 9px;
background: color-mix(in srgb, var(--shine-bg) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--shine-border);
font-size: .66rem;
font-weight: 500;
color: var(--shine-muted);
text-transform: capitalize;
white-space: nowrap;
}
/* the availability note is a sentence fragment, not an enum value */
.shine-vh__flag {text-transform: none;color: var(--shine-muted);}
/* ---- body ---- */
.shine-vh__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: .9rem; min-width: 0; padding: 0 4px 4px; }
.shine-vh__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.shine-vh__name { font-size: 1.1rem; 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 */
.shine-vh__name a {color: var(--shine-text);transition: color var(--shine-dur) var(--shine-ease);}
.shine-vh__name a:hover { color: var(--shine-accent); }
.shine-vh__id { display: grid; gap: .1rem; min-width: 0; }
.shine-vh__cat { font-size: .82rem; color: var(--shine-faint); text-transform: capitalize; }
/* in the head the price stacks: amount in the accent, the unit under it */
.shine-vh__head .shine-vh__price { display: grid; justify-items: end; gap: 0; flex: 0 0 auto; text-align: right; }
.shine-vh__head .shine-vh__price b {color: #1dbb60;font-size: 1.15rem;font-weight: 700;}
.shine-vh__head .shine-vh__price span { font-size: .78rem; color: var(--shine-faint); white-space: nowrap; }
.shine-vh__cta {margin-top: auto;width: 100%;justify-content: center;border-radius: 100px;padding: .72rem 1rem;}
.shine-vh__body > .shine-vh__edit { align-self: center; margin-top: -.3rem; }
.shine-vh__edit { font-size: .8rem; color: var(--shine-muted); flex: 0 0 auto; }
.shine-vh__edit:hover { color: var(--shine-accent); }
.shine-vh__specs {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
font-size: .85rem; color: var(--shine-muted);
}
.shine-vh__specs li { display: inline-flex; align-items: center; gap: .4rem; text-transform: capitalize; }
.shine-vh__specs svg { color: var(--shine-text); 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. */
.shine-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(--shine-border);
}
.shine-vh__price {
display: flex;
align-items: baseline;
gap: .35rem;
margin: 0;
min-width: 0;
}
.shine-vh__price b { white-space: nowrap; }
.shine-vh__per {
font-size: .82rem;
color: var(--shine-faint);
white-space: nowrap;
}
.shine-vh__price b {
font-family: var(--shine-font-display);
font-size: clamp(1.15rem, 1.7vw, 1.22rem);
font-weight: 600;
letter-spacing: -.02em;
color: var(--shine-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. */
.shine-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(--shine-accent);
color: var(--shine-accent-text);
transition: background-color var(--shine-dur) var(--shine-ease);
}
.shine-vh__go:hover,
.shine-vh__go:focus-visible { background: var(--shine-accent-hover); color: var(--shine-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(--shine-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(--shine-border) !important;
color: var(--shine-muted);
font-family: var(--shine-font-ui);
font-size: .9rem;
font-weight: 500;
box-shadow: none !important;
transition: border-color var(--shine-dur) var(--shine-ease),
color var(--shine-dur) var(--shine-ease),
background-color var(--shine-dur) var(--shine-ease);
}
body .pagination .page-link svg { fill: currentColor; }
body .pagination .page-link:hover { border-color: var(--shine-accent) !important; color: var(--shine-text); }
body .pagination .page-link:focus { box-shadow: none !important; outline: none; }
body .pagination .page-item.active .page-link {
background: var(--shine-accent) !important;
border-color: var(--shine-accent) !important;
color: var(--shine-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(--shine-border) !important;
color: var(--shine-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. */
.shine-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(--shine-border);
min-width: 0;
}
/* ---- search ---- */
.shine-filters__search {
position: relative;
display: flex;
align-items: center;
gap: .6rem;
padding: .8rem 1rem;
border: 1px solid var(--shine-border);
/* 12px, matching .shine-drop__trigger: pills are for actions and toggles
in this template, rounded rects are for fields */
border-radius: 12px;
transition: border-color var(--shine-dur) var(--shine-ease);
}
.shine-filters__search:focus-within {border-color: var(--shine-accent);}
.shine-filters__search > svg { color: var(--shine-faint); flex: 0 0 auto; }
.shine-filters__search input {
flex: 1 1 auto;
min-width: 0;
padding: 0;
background: none;
border: 0;
outline: none;
color: var(--shine-text);
font-family: var(--shine-font-ui);
font-size: .88rem;
font-weight: 500;
}
.shine-filters__search input::placeholder { color: var(--shine-faint); font-weight: 400; }
/* kill the UA's own clear affordance — we ship our own */
.shine-filters__search input::-webkit-search-cancel-button,
.shine-filters__search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.shine-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(--shine-border);
border-radius: 100px;
background: none;
color: var(--shine-muted);
cursor: pointer;
transition: color var(--shine-dur) var(--shine-ease),
border-color var(--shine-dur) var(--shine-ease);
}
.shine-filters__clear:hover { color: var(--shine-text); border-color: var(--shine-accent); }
/* ---- category chips (inside the reusable .shine-scroller) ---- */
.shine-filters__cats { min-width: 0; gap: .5rem; padding-bottom: 2px; }
.shine-chip {
flex: 0 0 auto;
padding: 0.58rem .85rem;
border: 1px solid var(--shine-border);
border-radius: 12px;
background: none;
color: var(--shine-accent);
fill: var(--shine-accent);
font-family: var(--shine-font-ui);
font-size: .8rem;
font-weight: 500;
white-space: nowrap;
text-transform: capitalize;
cursor: pointer;
transition: color var(--shine-dur) var(--shine-ease),
border-color var(--shine-dur) var(--shine-ease),
background-color var(--shine-dur) var(--shine-ease);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-chip:hover {border-color: var(--shine-accent);background: color-mix(in srgb, var(--shine-text) 7%, var(--shine-bg));}
/* the active chip is outlined, not filled — a row of solid orange pills
fought the CTAs for attention */
.shine-chip.is-active {
background: color-mix(in srgb, var(--shine-text) 7%, var(--shine-bg));
border-color: var(--shine-accent);
/* color: var(--shine-text); */
font-weight: 600;
}
/* ---- selects + price, one row ---- */
.shine-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) {
.shine-filters__row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.shine-filters__row .shine-range { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.shine-filters__row { grid-template-columns: minmax(0,1fr); }
}
.shine-sel {
display: grid;
gap: .35rem;
min-width: 0;
cursor: pointer;
}
.shine-sel > span {
color: var(--shine-faint);
}
.shine-sel select {
width: 100%;
min-width: 0;
padding: .6rem 2rem .6rem 0;
background: none;
border: 0;
border-bottom: 1px solid var(--shine-border);
border-radius: 0;
color: var(--shine-text);
font-family: var(--shine-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(--shine-dur) var(--shine-ease);
}
.shine-sel select:focus { outline: none; border-color: var(--shine-accent); }
.shine-sel.is-set select { border-color: var(--shine-accent); }
/* the native dropdown list paints on the OS surface, so it needs real colours */
.shine-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. */
.shine-range { display: grid; gap: .35rem; min-width: 0; }
.shine-range__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem;
}
.shine-range__head > span {
font-size: .72rem;
color: var(--shine-faint);
}
.shine-range__out {
font-family: var(--shine-font-ui);
font-size: .9rem; font-weight: 600;
color: var(--shine-text);
white-space: nowrap;
}
.shine-range__track {
position: relative;
height: 40px;
display: flex;
align-items: center;
}
.shine-range__track::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 2px;
transform: translateY(-50%);
}
.shine-range__fill {
position: absolute; top: 50%;
height: 2px;
transform: translateY(-50%);
background: var(--shine-accent);
}
.shine-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;
}
.shine-range input[type="range"]::-webkit-slider-runnable-track {
height: 40px; background: none; border: 0;
}
.shine-range input[type="range"]::-moz-range-track {
height: 40px; background: none; border: 0;
}
.shine-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(--shine-bg);
border: 3px solid var(--shine-accent);
cursor: grab;
transition: transform var(--shine-dur) var(--shine-ease);
}
.shine-range input[type="range"]::-moz-range-thumb {
pointer-events: auto;
width: 16px; height: 16px;
border-radius: 100px;
background: var(--shine-bg);
border: 3px solid var(--shine-accent);
cursor: grab;
transition: transform var(--shine-dur) var(--shine-ease);
}
.shine-range input[type="range"]:hover::-webkit-slider-thumb,
.shine-range input[type="range"]:focus-visible::-webkit-slider-thumb { transform: scale(1.15); }
.shine-range input[type="range"]:hover::-moz-range-thumb,
.shine-range input[type="range"]:focus-visible::-moz-range-thumb { transform: scale(1.15); }
.shine-range input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
/* ---- count + reset ---- */
.shine-filters__foot {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; flex-wrap: wrap;
}
.shine-filters__count {
margin: 0;
font-size: .86rem;
color: var(--shine-muted);
}
.shine-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. */
.shine-sk {
display: grid;
gap: 1rem;
min-width: 0;
}
.shine-sk__media {
aspect-ratio: 4 / 3;
border-radius: 18px;
background: var(--shine-border);
}
.shine-sk__line {
height: 11px;
border-radius: 100px;
background: var(--shine-border);
}
.shine-sk__line--lg { height: 15px; width: 68%; }
.shine-sk__line--sm { height: 10px; width: 40%; }
.shine-sk__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.shine-sk__foot .shine-sk__line--sm { flex: 0 0 40%; }
.shine-sk__pill {
flex: 0 0 auto;
width: 96px; height: 34px;
border-radius: var(--shine-radius-pill);
background: var(--shine-border);
}
/* one pulse, driven by opacity only */
.shine-sk__media,
.shine-sk__line,
.shine-sk__pill { animation: shine-pulse 1.25s var(--shine-ease) infinite; }
.shine-sk:nth-child(2n) .shine-sk__media { animation-delay: .08s; }
.shine-sk:nth-child(3n) .shine-sk__media { animation-delay: .16s; }
@keyframes shine-pulse {
0%, 100% { opacity: .45; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.shine-sk__media, .shine-sk__line, .shine-sk__pill { animation: none; opacity: .6; }
}
/* =========================== EMPTY STATE =============================== */
.shine-fleet__empty {
grid-column: 1 / -1;
width: 100%;
display: grid;
gap: 1.1rem;
justify-items: center;
text-align: center;
padding: 5rem 1rem;
color: var(--shine-muted);
}
.shine-fleet__empty p {margin: 0;}
/* =========================== CLIENT PAGER ==============================
Replaces the server pagination on the fleet page: same look, no reload. */
.shine-pager {
grid-column: 1 / -1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 3.5rem;
}
.shine-pager__btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 .7rem;
border: 1px solid var(--shine-border);
border-radius: 12px;
background: none;
color: var(--shine-accent);
font-family: var(--shine-font-ui);
font-size: .9rem;
font-weight: 500;
cursor: pointer;
transition: color var(--shine-dur) var(--shine-ease),
border-color var(--shine-dur) var(--shine-ease),
background-color var(--shine-dur) var(--shine-ease);
}
.shine-pager__btn:hover:not(:disabled) {/* color: var(--shine-text); */border-color: var(--shine-accent);}
.shine-pager__btn.is-active {
background: var(--shine-accent);
border-color: var(--shine-accent);
color: white;
}
.shine-pager__btn:disabled { opacity: .35; cursor: default; }
.shine-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. */
.shine-fleetpage {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 0 3.5rem;
align-items: start;
width: 100%;
}
.shine-fleetpage__main { grid-column: 1; grid-row: 1; min-width: 0; }
.shine-fleetpage__side {
grid-column: 2;
grid-row: 1;
min-width: 0;
}
@media (max-width: 1100px) {
.shine-fleetpage { grid-template-columns: minmax(0, 1fr) 260px; gap: 0 2.5rem; }
}
@media (max-width: 900px) {
.shine-fleetpage { grid-template-columns: minmax(0, 1fr); gap: 0; }
.shine-fleetpage__side { grid-column: 1; grid-row: 1; position: static; }
.shine-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 */
.shine-fleetpage__side .shine-filters {
margin: 0;
padding: 0;
border-bottom: 0;
}
.shine-fleetpage__side .shine-filters__row {
grid-template-columns: minmax(0, 1fr);
gap: 1.4rem;
}
.shine-fleetpage__side .shine-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 */
.shine-fleetpage__side .shine-filters__cats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .4rem;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
.shine-fleetpage__side .shine-chip {
width: 100%;
padding-left: .3rem;
padding-right: .3rem;
font-size: .74rem;
}
}
.shine-fleetpage__side .shine-filters__foot {
padding-top: .4rem;
flex-direction: column;
align-items: stretch;
gap: .8rem;
}
.shine-fleetpage__side .shine-filters__reset { justify-content: center; }
@media (max-width: 900px) {
.shine-fleetpage__side .shine-filters {
/* padding: 0 0 1.6rem; */
}
.shine-fleetpage__side .shine-filters__row { grid-template-columns: repeat(2, minmax(0,1fr)); }
.shine-fleetpage__side .shine-filters__row .shine-range { grid-column: 1 / -1; }
.shine-fleetpage__side .shine-filters__foot {
flex-direction: row;
align-items: center;
border-top: 0;
padding-top: 0;
}
}
@media (max-width: 520px) {
.shine-fleetpage__side .shine-filters__row { grid-template-columns: minmax(0,1fr); }
}
/* =========================== STYLED DROPDOWN ===========================
Built over each `.shine-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. */
.shine-drop { position: relative; min-width: 0; }
.shine-drop__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: .6rem;
width: 100%;
padding: 0.8rem;
border: 1px solid var(--shine-border);
border-radius: 12px;
background: none;
/* color: var(--shine-text); */
font-family: var(--shine-font-ui);
text-align: left;
cursor: pointer;
transition: border-color var(--shine-dur) var(--shine-ease),
color var(--shine-dur) var(--shine-ease);
}
.shine-drop__trigger:hover { border-color: var(--shine-accent); }
.shine-drop__trigger:focus-visible { outline: none; border-color: var(--shine-accent); }
.shine-drop__value {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shine-drop__chev {
flex: 0 0 auto;
color: var(--shine-faint);
transition: transform var(--shine-dur) var(--shine-ease);
}
.shine-drop.is-open .shine-drop__trigger {
border-color: color-mix(in srgb, var(--shine-text) 26%, transparent);
border-bottom-color: transparent;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
background: white;
}
.shine-drop.is-open .shine-drop__chev { transform: rotate(180deg); color: var(--shine-text); }
.shine-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(--shine-text) 26%, transparent);
border-top-color: transparent;
border-radius: 0 0 12px 12px;
background: white;
scrollbar-width: thin;
}
.shine-drop__panel::-webkit-scrollbar { width: 6px; }
.shine-drop__panel::-webkit-scrollbar-thumb {
background: var(--shine-border);
border-radius: 100px;
}
.shine-drop__opt {
display: block;
width: 100%;
padding: .5rem .8rem;
border: 0;
background: none;
color: var(--shine-muted);
font-family: var(--shine-font-ui);
font-size: .85rem;
text-align: left;
text-transform: capitalize;
cursor: pointer;
transition: color var(--shine-dur) var(--shine-ease),
background-color var(--shine-dur) var(--shine-ease);
}
.shine-drop__opt:hover,
.shine-drop__opt:focus-visible {
outline: none;
color: var(--shine-text);
background: color-mix(in srgb, var(--shine-text) 7%, transparent);
}
.shine-drop__opt.is-selected { color: var(--shine-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 */
.shine-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. */
.shine-sel.is-set .shine-drop__trigger { border-color: var(--shine-accent); }
.shine-sel.is-set .shine-drop.is-open .shine-drop__trigger {
border-color: color-mix(in srgb, var(--shine-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 */
.shine-vh__specs .shine-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. */
.shine-filters__bar { display: none; }
@media (max-width: 900px) {
.shine-filters__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-width: 0;
}
.shine-filters__toggle {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .5rem .9rem;
border: 1px solid var(--shine-border);
border-radius: var(--shine-radius-pill);
background: none;
color: var(--shine-text);
font-family: var(--shine-font-ui);
font-size: .86rem;
font-weight: 500;
cursor: pointer;
transition: border-color var(--shine-dur) var(--shine-ease),
color var(--shine-dur) var(--shine-ease);
}
.shine-filters__toggle svg { color: var(--shine-faint); flex: 0 0 auto; }
.shine-filters.is-open .shine-filters__toggle { border-color: var(--shine-accent); }
.shine-filters.is-open .shine-filters__toggle svg { color: var(--shine-accent); }
.shine-filters__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px; height: 20px;
padding: 0 5px;
border-radius: 100px;
background: var(--shine-accent);
color: var(--shine-accent-text);
font-size: .72rem;
font-weight: 700;
}
/* the count belongs next to the toggle here, not buried in the panel */
.shine-filters__count--bar { text-align: right; }
.shine-filters__body #shineCount { display: none; }
.shine-filters__body .shine-filters__foot { justify-content: flex-end; }
.shine-filters__body { display: none; }
.shine-filters.is-open .shine-filters__body {
display: grid;
gap: 1.6rem;
animation: shinePanelIn .22s var(--shine-ease) both;
}
}
/* only the panel's own arrival is animated, never its height */
@keyframes shinePanelIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.shine-filters.is-open .shine-filters__body { animation: none; }
}
@media (min-width: 901px) {
.shine-filters__count--bar { display: none; }
}
/* ---- a shorter hero, so the fleet starts nearer the top ---- */
@media (max-width: 640px) {
.shine-hero {min-height: 250px;}
.shine-hero__inner { padding: 0 20px 32px; }
.shine-crumbs { margin-bottom: 1rem; font-size: .76rem; }
.shine-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 shine's flat dark language: no shadows,
hairline borders, one accent. */
.shine-vd { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
/* Two equal halves, not a content column with a narrow rail: the car and its
price on the left, everything you need to decide on the right. */
.shine-vd__top {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 0 clamp(2rem, 2vw, 4.5rem);
align-items: start;
}
.shine-vd__left { min-width: 0; display: grid; gap: .9rem; align-content: start; }
.shine-vd__right { min-width: 0; display: grid; gap: 1.4rem; align-content: start; }
@media (max-width: 900px) {
.shine-vd__top { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}
/* Name and price open the page, above both columns. The three facet chips ride
on the price line, pushed to the right edge, so the head spans the full width
the way the two columns below it do. */
/* Name on the first line with the facet chips at its right, price on the
second. */
.shine-vd__head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"name facets"
"price facets";
align-items: center;
gap: .35rem 1.4rem;
margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
.shine-vd__head .shine-vd__name { grid-area: name; min-width: 0; }
.shine-vd__head .shine-vd__pricerow { grid-area: price; }
.shine-vd__head .shine-vd__facets { grid-area: facets; align-self: start; }
/* the chips are a shortcut back into the filtered fleet, not information —
drop them where the row would get cramped */
@media (max-width: 760px) {
.shine-vd__head .shine-vd__facets { display: none; }
.shine-vd__head { column-gap: .9rem; }
}
.shine-vd__name { font-size: clamp(1.9rem, 3.2vw, 2.6rem); }
.shine-vd__name span {color: var(--shine-faint);font-weight: 400;}
.shine-vd__pricerow { display: flex; align-items: baseline; gap: .4rem; }
.shine-vd__price { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; color: var(--shine-accent); letter-spacing: -.02em; }
.shine-vd__per { color: var(--shine-faint); font-size: .95rem; }
/* right column headings sit on the page, not on a card */
.shine-vd__h {
display: flex;
align-items: baseline;
gap: .8rem;
font-size: 1.5rem;
margin-bottom: -.4rem;
}
/* the booking action: one button, the reassurances under it */
.shine-vd__act { display: grid; gap: .8rem; justify-items: start; }
.shine-vd__act .shine-btn { min-width: 260px; }
@media (max-width: 560px) { .shine-vd__act .shine-btn { width: 100%; min-width: 0; } }
/* everything below the fold runs full width instead of stacking in a rail */
.shine-vd__rest {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 1.2rem;
margin-top: clamp(2.5rem, 5vw, 4rem);
align-items: start;
}
/* a grid item defaults to min-width:auto, so one nowrap line (an issue row)
would stretch its column over the neighbouring one */
.shine-vd__rest > * { min-width: 0; }
/* ---- gallery ---- */
.shine-vd__gallery { display: grid; gap: .7rem; min-width: 0; }
/* Holds the stage and its two arrows: the stage clips to its radius, this does
not, so the arrows can sit on its edge. No padding — the photo keeps the
full width of its column. */
/* min-width:0 matters: without it the swiper's inline slide widths push this
wider than its grid column and the photo runs over the specs beside it */
.shine-vd__stagewrap { position: relative; width: 100%; min-width: 0; }
.shine-vd__stage {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
max-height: 560px;
border-radius: 20px;
overflow: hidden;
background: #f7f6fd;
}
.shine-vd__stage .swiper-slide { display: block; }
.shine-vd__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shine-vd__stage--empty { display: flex; align-items: center; justify-content: center; }
.shine-vd__stage--empty .shine-vh__noimg { position: static; background: none; }
.shine-vd__stage--empty svg { width: 140px; color: var(--shine-faint); opacity: .5; }
/* swiper ships its own arrow glyphs and colours; replace both */
.shine-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: 0;
border-radius: 12px;
background: var(--shine-accent);
/* swiper sets its own navigation colour on these classes, so say it here */
--swiper-navigation-color: #ffffff;
color: #ffffff;
cursor: pointer;
transition: background-color var(--shine-dur) var(--shine-ease),
transform var(--shine-dur) var(--shine-ease);
}
.shine-vd__nav:hover { background: var(--shine-accent-hover); }
/* on the photo's edges, where they were — only the look changed */
.shine-vd__nav--prev { left: 14px; }
.shine-vd__nav--next { right: 14px; }
.shine-vd__nav::after {
font-family: inherit;
font-size: 0; /* kill swiper's glyph */
content: '';
width: 9px;
height: 9px;
border-right: 2px solid rgb(255 255 255);
border-bottom: 2px solid rgb(255 255 255);
}
.shine-vd__nav--prev::after { transform: rotate(135deg); margin-left: 3px; }
.shine-vd__nav--next::after { transform: rotate(-45deg); margin-right: 3px; }
.shine-vd__stage .swiper-button-disabled { opacity: .35; pointer-events: none; }
.shine-vd__thumbs { width: 100%; }
.shine-vd__thumbs .swiper-slide {
border-radius: 12px;
overflow: hidden;
aspect-ratio: 4 / 3;
cursor: pointer;
opacity: .5;
transition: opacity var(--shine-dur) var(--shine-ease);
}
.shine-vd__thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shine-vd__thumbs .swiper-slide:hover { opacity: .8; }
.shine-vd__thumbs .swiper-slide-thumb-active { opacity: 1; outline: 2px solid var(--shine-accent); outline-offset: -2px; }
.shine-vd__edit {
position: absolute; top: 14px; left: 14px; z-index: 3;
padding: .3rem .8rem;
border: 1px solid var(--shine-border);
border-radius: 100px;
background: color-mix(in srgb, var(--shine-bg) 72%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--shine-text);
font-size: .76rem;
}
.shine-vd__edit:hover { color: var(--shine-accent); border-color: var(--shine-accent); }
/* ---- the three facets ---- */
.shine-vd__facets { display: flex; flex-wrap: wrap; gap: .5rem; }
.shine-vd__facets .shine-chip { display: inline-flex; align-items: center; gap: .45rem; }
.shine-vd__facets .shine-chip svg {color: var(--shine-accent);}
.shine-vd__facets .shine-chip:hover svg { color: var(--shine-accent); }
/* ---- card shell, shared by the spec block and every rail box ---- */
.shine-card {
border: 1px solid var(--shine-border);
border-radius: 18px;
padding: 1.4rem;
min-width: 0;
}
.shine-card__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 1rem;
margin-bottom: 1.1rem;
}
.shine-card__head h2 { font-size: 1.1rem; margin: 0; }
.shine-card__edit { font-size: .8rem; color: var(--shine-muted); white-space: nowrap; }
.shine-card__edit:hover { color: var(--shine-accent); }
/* ---- spec grid ---- */
/* Specification tiles: three across, filled rather than outlined, icon over a
bold label over a quiet value — the value is the answer, so it reads last. */
.shine-specs {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .9rem;
}
@media (max-width: 560px) { .shine-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.shine-specs li {
display: grid;
gap: .1rem;
padding: 1.1rem 1rem;
border: 0;
border-radius: var(--shine-radius-sm);
min-width: 0;
background: var(--shine-surface-alt);
}
.shine-specs svg {color: var(--shine-accent);margin-bottom: .6rem;}
.shine-specs span {font-size: .85rem;letter-spacing: 0;text-transform: none;color: var(--shine-text);font-weight: 600;}
.shine-specs b { font-size: .85rem; font-weight: 400; color: var(--shine-faint); text-transform: capitalize; }
/* Not an accordion any more: nothing collapses, so everything a renter needs
is on the page at once. The class name stays because the markup uses it. */
.shine-acc {
border: 1px solid var(--shine-border);
border-radius: var(--shine-radius);
min-width: 0;
}
.shine-acc__head {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem;
padding: 1.2rem 1.4rem;
}
.shine-acc__head h2 { font-size: 1.1rem; margin: 0; }
.shine-acc__body { padding: 0 1.4rem 1.4rem; }
.shine-acc__body .shine-card__edit { display: inline-block; margin-bottom: .9rem; }
/* ---- tick lists ---- */
.shine-ticks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .55rem 1.4rem;
border-radius: var(--shine-radius);
/* box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important; */
}
.shine-ticks li {
display: flex; align-items: flex-start; gap: .55rem;
font-size: .9rem;
color: var(--shine-muted);
min-width: 0;
}
/* the tick is a filled accent disc with a white mark inside, not a bare glyph */
.shine-ticks svg {
flex: 0 0 auto;
width: 18px; height: 18px; padding: 3px;
margin-top: 1px;
border-radius: 50%;
background: var(--shine-accent);
color: #ffffff;
}
.shine-ticks--rail { grid-template-columns: minmax(0, 1fr); margin: 0; }
.shine-ticks--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1.4rem; }
@media (max-width: 560px) { .shine-ticks--two { grid-template-columns: minmax(0, 1fr); } }
/* ---- issues ---- */
.shine-issues { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; min-width: 0; }
.shine-issues > li {min-width: 0;padding: 0px;}
/* the dash separates one issue from the next, so the last row has none */
.shine-issues > li:last-child .shine-issue { border-bottom: 0; }
.shine-issue {
display: flex;
align-items: center;
gap: .7rem;
width: 100%;
min-width: 0;
max-width: 100%;
border: 0px;
border-bottom: 1px dashed var(--shine-border);
background: none;
color: var(--shine-muted);
font-family: var(--shine-font-ui);
font-size: .88rem;
text-align: left;
cursor: pointer;
margin: 0px;
padding: 0px;
padding: 10px 0px;
}
.shine-issue:hover {color: var(--shine-text);}
.shine-issue svg { flex: 0 0 auto; color: var(--shine-accent); }
/* one line, whatever the length — the modal behind the click has the rest */
.shine-issue__text {
flex: 1 1 auto;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
}
.shine-issue__date { flex: 0 0 auto; font-size: .78rem; color: var(--shine-faint); }
/* ---- booking rail ---- */
.shine-vd__pricerow { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.shine-vd__price {
font-family: var(--shine-font-display);
font-size: clamp(1.6rem, 3vw, 1.5rem);
font-weight: 700;
letter-spacing: -.02em;
color: #1dbb60;
white-space: nowrap;
}
.shine-vd__per { font-size: .88rem; color: var(--shine-faint); }
.shine-vd__note {margin: .8rem 0 0;font-size: .84rem;color: var(--shine-muted);line-height: 1.55;box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;}
.shine-vd__note b { color: var(--shine-text); font-weight: 600; }
.shine-disc { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.shine-disc li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
font-size: .88rem;
color: var(--shine-muted);
border-bottom: 1px dashed #e3e3e5;
padding-bottom: 5px;
}
.shine-disc li:last-child{
border-bottom:0px;
}
.shine-disc b { color: var(--shine-accent); white-space: nowrap; }
/* one row, the three sharing the width evenly; square-ish corners, not pills */
.shine-vd__contact {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: .6rem;
}
.shine-vd__contact .shine-btn {
justify-content: center;
gap: .5rem;
width: 100%;
padding: .7rem 1rem;
font-size: .88rem;
border-radius: var(--shine-radius-sm);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
/* ---- related ---- */
.shine-vd__more {margin-top: clamp(3rem, 6vw, 3rem);}
.shine-vd__more > h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 1.8rem; }
/* ---- the damage modal ----
.shine-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 .shine-modal rule here used to paint the full-screen overlay
itself, which killed the language modal's backdrop. */
.shine-modal .modal-title { font-family: var(--shine-font-display); font-size: 1.05rem; }
.shine-modal__figure { border-radius: 12px; overflow: hidden; background: var(--shine-bg); }
.shine-modal__figure .marker {
position: absolute;
width: 16px; height: 16px;
margin: -8px 0 0 -8px;
border-radius: 100px;
background: var(--shine-accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--shine-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 */
.shine-vd__more .shine-fleet { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .shine-vd__more .shine-fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .shine-vd__more .shine-fleet { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .shine-vd__more .shine-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. */
.shine-bk-page {padding-bottom: clamp(3rem, 6vw, 5rem);padding-left: 0;padding-right: 0px;}
.shine-bk [hidden], .shine-bk-page [hidden] { display: none !important; }
.shine-bk {
position: relative;
z-index: 5;
margin-top: 40px; /* lift over the hero's bottom edge */
display: grid;
gap: 1.2rem;
}
@media (max-width: 640px) { .shine-bk {margin-top: -10px;} }
.shine-bk__card {
position: relative;
border-radius: 20px;
border: 1px solid var(--shine-border);
padding: 1.2rem 1.4rem;
background: var(--shine-surface-alt);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-bk__top { display: flex; justify-content: flex-end; margin-bottom: .2rem; }
.shine-bk__manage {
font-size: .8rem;
color: var(--shine-muted);
text-decoration: underline;
text-underline-offset: 3px;
}
.shine-bk__manage:hover { color: var(--shine-accent); }
/* ---- the bar ---- */
.shine-bk__bar {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr) auto;
gap: 1rem;
align-items: start;
}
.shine-bk__where { display: flex; gap: .8rem; align-items: flex-start; min-width: 0; }
.shine-bk__where > .shine-bk__field { flex: 1 1 0; min-width: 0; }
.shine-bk__when { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem; min-width: 0; }
.shine-bk__go { padding-top: 1.45rem; } /* line up with the controls, not the labels */
.shine-bk__field { position: relative; min-width: 0; }
.shine-bk__label {
display: block;
margin-bottom: .45rem;
color: var(--shine-faint);
}
.shine-bk__control {
display: flex;
align-items: center;
gap: .6rem;
width: 100%;
height: 50px;
padding: 0 .9rem;
border: 1px solid var(--shine-border);
border-radius: 14px;
background: color-mix(in srgb, var(--shine-bg) 60%, transparent);
color: var(--shine-text);
font-family: var(--shine-font-ui);
font-size: .95rem;
text-align: left;
cursor: pointer;
transition: border-color var(--shine-dur) var(--shine-ease);
}
.shine-bk__control:hover { border-color: color-mix(in srgb, var(--shine-accent) 60%, var(--shine-border)); }
.shine-bk__control:focus-visible { outline: none; border-color: var(--shine-accent); }
.shine-bk__control > svg { flex: 0 0 auto; color: var(--shine-faint); }
.shine-bk__field.is-open > .shine-bk__control,
.shine-bk__field.is-open .shine-bk__control[aria-expanded="true"] { border-color: var(--shine-accent); }
.shine-bk__field.is-invalid .shine-bk__control { border-color: var(--shine-danger); }
.shine-bk__value {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shine-bk__value:empty::before { content: attr(data-placeholder); color: var(--shine-faint); }
/* date + time read as one control, like the reference */
.shine-bk__dt { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.shine-bk__dt .shine-bk__control--date { border-radius: 12px 0 0 12px; }
.shine-bk__dt .shine-bk__control--time {
width: auto;
border-left: 0;
border-radius: 0 12px 12px 0;
padding: 0 1rem;
white-space: nowrap;
}
.shine-bk__dt .shine-bk__control--time:hover,
.shine-bk__dt .shine-bk__control--time[aria-expanded="true"] { border-left: 0; }
.shine-bk__dt .shine-bk__control--time .shine-bk__value { overflow: visible; }
.shine-bk__err {
margin: .35rem 0 0;
font-size: .78rem;
color: var(--shine-danger);
display: none;
}
.shine-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(--shine-muted);
font-family: var(--shine-font-ui);
font-size: .9rem;
white-space: nowrap;
cursor: pointer;
transition: color var(--shine-dur) var(--shine-ease);
}
.shine-bk__addret:hover { color: var(--shine-text); }
.shine-bk__addret svg { color: var(--shine-accent); }
.shine-bk__cta { height: 50px; padding: 0 1.6rem; white-space: nowrap; }
/* ---- panels ---- */
.shine-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(--shine-text) 16%, transparent);
border-radius: 14px;
background: white;
box-shadow: 0 24px 20px -20px rgba(0, 0, 0, .25);
scrollbar-width: thin;
}
.shine-bk__pop--loc {width: max(100%, 500px);}
.shine-bk__pop--time {width: 300px;left: auto;right: 0;min-width: 0;max-height: 820px;}
.shine-bk__search { position: sticky; top: -.45rem; padding: .1rem 0 .4rem; background: inherit; }
.shine-bk__searchin {
width: 100%;
height: 40px;
padding: 0 .8rem;
border: 1px solid var(--shine-border);
border-radius: 10px;
background: color-mix(in srgb, var(--shine-bg) 60%, transparent);
color: var(--shine-text);
font-family: var(--shine-font-ui);
font-size: .88rem;
}
.shine-bk__searchin:focus { outline: none; border-color: var(--shine-accent); }
.shine-bk__opts { display: grid; gap: 2px; }
.shine-bk__opt {
display: flex;
align-items: flex-start;
gap: .7rem;
width: 100%;
padding: .65rem .7rem;
border: 0;
border-radius: 10px;
background: none;
color: var(--shine-muted);
font-family: var(--shine-font-ui);
text-align: left;
cursor: pointer;
transition: background-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-bk__opt:hover, .shine-bk__opt:focus-visible {
outline: none;
background: color-mix(in srgb, var(--shine-text) 7%, transparent);
color: var(--shine-text);
}
.shine-bk__opt > svg { flex: 0 0 auto; margin-top: 2px; color: var(--shine-faint); }
.shine-bk__opt.is-on { color: var(--shine-text); }
.shine-bk__opt.is-on > svg { color: var(--shine-accent); }
.shine-bk__optmain { display: grid; gap: .1rem; min-width: 0; }
.shine-bk__optmain b { font-weight: 600; font-size: .92rem; }
.shine-bk__optmain small { font-size: .78rem; color: var(--shine-faint); }
.shine-bk__opt--back {
margin-bottom: .3rem;
border-bottom: 1px solid var(--shine-border);
border-radius: 10px 10px 0 0;
display: none;
}
.shine-bk__opt--back > svg { color: var(--shine-accent); }
.shine-bk__empty { margin: 0; padding: .8rem; font-size: .88rem; color: var(--shine-muted); }
/* time */
.shine-bk__poptitle { margin: .3rem 0 .5rem; text-align: center; font-weight: 600; font-size: .9rem; color: var(--shine-text); }
.shine-bk__part {
margin: .7rem .2rem .35rem;
font-size: .8rem;
color: var(--shine-faint);
}
.shine-bk__slots { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
.shine-bk__slot {
height: 36px;
border: 1px solid var(--shine-border);
border-radius: 10px;
background: none;
font-family: var(--shine-font-ui);
font-size: .86rem;
cursor: pointer;
transition: border-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-bk__slot:hover { border-color: var(--shine-accent); color: var(--shine-text); }
.shine-bk__slot.is-on {
border-color: var(--shine-accent);
background: var(--shine-accent);
color: var(--shine-accent-text);
font-weight: 600;
}
/* ---- vehicle row ---- */
.shine-bk__row2 { margin-top: 1rem; }
.shine-bk__field--veh { max-width: unest; }
.shine-bk__control--veh {height: 85px;padding: 14px;box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;}
.shine-bk__vthumb {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 70px;
height: 60px; /* 4:3, like every vehicle image */
border-radius: 8px;
overflow: hidden;
background: color-mix(in srgb, var(--shine-text) 7%, transparent);
color: var(--shine-faint);
}
.shine-bk__vthumb img { width: 100%; height: 100%; object-fit: cover; }
.shine-bk__vtext { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.shine-bk__vtext b { font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shine-bk__vtext small { font-size: .78rem; color: var(--shine-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shine-bk__chev { flex: 0 0 auto; color: var(--shine-faint); transition: transform var(--shine-dur) var(--shine-ease); }
.shine-bk__control[aria-expanded="true"] .shine-bk__chev { transform: rotate(180deg); color: var(--shine-text); }
.shine-bk__pop--veh {width: 100%;max-height: 840px;padding-top: 10px;}
.shine-bk__vhead {
position: sticky;
top: -11px;
z-index: 1;
display: grid;
gap: .5rem;
padding: .55rem 0 .5rem;
background: inherit;
padding-top: 0px;
}
.shine-bk__vcats { gap: .4rem; }
.shine-bk__vcats .shine-chip { padding: .3rem .75rem; font-size: .76rem; }
.shine-bk__vlist { display: grid; gap: 2px; }
.shine-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(--shine-text);
font-family: var(--shine-font-ui);
text-align: left;
cursor: pointer;
transition: background-color var(--shine-dur) var(--shine-ease), border-color var(--shine-dur) var(--shine-ease);
}
.shine-bk__vopt:hover { background: color-mix(in srgb, var(--shine-text) 7%, transparent); }
.shine-bk__vopt.is-on { border-color: var(--shine-accent); }
.shine-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(--shine-text) 7%, transparent);
color: var(--shine-faint);
}
.shine-bk__vimg img { width: 100%; height: 100%; object-fit: cover; }
.shine-bk__vmain { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.shine-bk__vmain b { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shine-bk__vmain small { font-size: .76rem; color: var(--shine-faint); }
.shine-bk__vopt .is_available { flex: 0 0 auto; }
.shine-bk__vopt.unavailable_vehicle { opacity: .55; }
.shine-bk__avail {
display: inline-flex; align-items: center; gap: .35rem;
font-size: .74rem;
color: var(--shine-muted);
white-space: nowrap;
}
.shine-bk__avail::before { content: ''; width: 7px; height: 7px; border-radius: 100px; background: var(--shine-accent); }
.shine-bk__avail.is-off { color: var(--shine-danger); }
.shine-bk__avail.is-off::before { background: var(--shine-danger); }
/* ---- calendar panel ---- */
.shine-bk__cal {
margin-top: 1.2rem;
/* padding-top: 1rem; */
}
.shine-bk__calhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.shine-bk__caltitle {margin: 0;}
#cal-render-block { position: relative; }
.shine-bk .hiddenSpinner { display: none; }
.shine-bk .spinner-container {
position: absolute; inset: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--shine-bg) 55%, transparent);
border-radius: 12px;
}
.shine-bk__spin {
display: inline-block;
width: 26px; height: 26px;
border: 2px solid color-mix(in srgb, var(--shine-text) 20%, transparent);
border-top-color: var(--shine-accent);
border-radius: 100px;
animation: shineSpin .7s linear infinite;
vertical-align: middle;
}
.shine-bk__spin--sm { width: 15px; height: 15px; }
@keyframes shineSpin { to { transform: rotate(360deg); } }
/* daterangepicker, in shine's clothes — booking step 1 and the home search
share these, so the two calendars are the same calendar */
:is(.shine-bk, .shine-ds) .daterangepicker {
background: none;
border: 0;
color: var(--shine-text);
font-family: var(--shine-font-ui);
padding: 0;
width: 100%;
}
:is(.shine-bk, .shine-ds) .daterangepicker::before,
:is(.shine-bk, .shine-ds) .daterangepicker::after { display: none; }
:is(.shine-bk, .shine-ds) .daterangepicker .drp-buttons,
:is(.shine-bk, .shine-ds) .daterangepicker .drp-selected,
:is(.shine-bk, .shine-ds) .daterangepicker .ranges { display: none !important; }
:is(.shine-bk, .shine-ds) .daterangepicker .drp-calendar { padding: .4rem .6rem; }
:is(.shine-bk, .shine-ds) .daterangepicker .calendar-table {
background: none;
border: 0;
padding: 0;
}
:is(.shine-bk, .shine-ds) .daterangepicker .calendar-table table { border-spacing: 0 4px; border-collapse: separate; }
:is(.shine-bk, .shine-ds) .daterangepicker th.month {
font-family: var(--shine-font-display);
font-size: .98rem;
font-weight: 600;
color: var(--shine-text);
}
:is(.shine-bk, .shine-ds) .daterangepicker thead tr:last-child th {
font-size: .68rem;
font-weight: 500;
color: var(--shine-faint);
}
:is(.shine-bk, .shine-ds) .daterangepicker td,
:is(.shine-bk, .shine-ds) .daterangepicker th { min-width: 38px; height: 40px; line-height: 40px; }
:is(.shine-bk, .shine-ds) .daterangepicker td {
border: 0;
border-radius: 10px;
background: none;
color: var(--shine-text);
font-size: .9rem;
transition: background-color var(--shine-dur) var(--shine-ease);
}
:is(.shine-bk, .shine-ds) .daterangepicker td.available:hover {background: color-mix(in srgb, var(--shine-accent) 8%, transparent);color: var(--shine-text);}
:is(.shine-bk, .shine-ds) .daterangepicker td.off,
:is(.shine-bk, .shine-ds) .daterangepicker td.off.in-range,
:is(.shine-bk, .shine-ds) .daterangepicker td.off.start-date,
:is(.shine-bk, .shine-ds) .daterangepicker td.off.end-date { background: none !important; color: color-mix(in srgb, var(--shine-text) 22%, transparent) !important; }
:is(.shine-bk, .shine-ds) .daterangepicker td.in-range {
background: color-mix(in srgb, var(--shine-accent) 16%, transparent);
color: var(--shine-text);
border-radius: 0;
}
:is(.shine-bk, .shine-ds) .daterangepicker td.start-date,
:is(.shine-bk, .shine-ds) .daterangepicker td.end-date,
:is(.shine-bk, .shine-ds) .daterangepicker td.active,
:is(.shine-bk, .shine-ds) .daterangepicker td.active:hover {
background: var(--shine-accent);
color: var(--shine-accent-text);
}
:is(.shine-bk, .shine-ds) .daterangepicker td.start-date { border-radius: 10px 0 0 10px; }
:is(.shine-bk, .shine-ds) .daterangepicker td.end-date { border-radius: 0 10px 10px 0; }
:is(.shine-bk, .shine-ds) .daterangepicker td.start-date.end-date { border-radius: 10px; }
/* the engine paints these through isCustomDate: past, then sold */
:is(.shine-bk, .shine-ds) .daterangepicker td.disabled,
:is(.shine-bk, .shine-ds) .daterangepicker td.past-date {
background: none !important;
color: color-mix(in srgb, var(--shine-text) 22%, transparent) !important;
text-decoration: none;
cursor: not-allowed;
}
:is(.shine-bk, .shine-ds) .daterangepicker td.sold-date {
color: color-mix(in srgb, var(--shine-danger) 70%, transparent) !important;
text-decoration: line-through !important;
}
/* month arrows — the native ones and the injected .drp-nav stand-ins */
:is(.shine-bk, .shine-ds) .daterangepicker th.prev,
:is(.shine-bk, .shine-ds) .daterangepicker th.next,
:is(.shine-bk, .shine-ds) .daterangepicker th.drp-nav { cursor: pointer; }
:is(.shine-bk, .shine-ds) .daterangepicker th.prev span,
:is(.shine-bk, .shine-ds) .daterangepicker th.next span {
/* border-color: 1px solid var(--shine-border); */
padding: 3px;
}
:is(.shine-bk, .shine-ds) .daterangepicker th.prev:hover,
:is(.shine-bk, .shine-ds) .daterangepicker th.next:hover,
:is(.shine-bk, .shine-ds) .daterangepicker th.drp-nav:hover {background: color-mix(in srgb, var(--shine-accent) 8%, transparent);}
:is(.shine-bk, .shine-ds) .daterangepicker th.drp-nav span {
display: inline-block;
width: 8px; height: 8px;
border-right: 2px solid var(--shine-text);
border-bottom: 2px solid var(--shine-text);
}
:is(.shine-bk, .shine-ds) .daterangepicker th.drp-nav-prev span { transform: rotate(135deg); }
:is(.shine-bk, .shine-ds) .daterangepicker th.drp-nav-next span { transform: rotate(-45deg); }
:is(.shine-bk, .shine-ds) .daterangepicker th.drp-nav.is-disabled { opacity: .25; cursor: default; }
:is(.shine-bk, .shine-ds) .daterangepicker th.drp-nav.is-disabled:hover { background: none; }
/* ---- live summary ---- */
.shine-bk__sum {
display: grid;
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
gap: 1.2rem;
align-items: start;
}
.shine-bk__sumcard {
padding: 1.2rem 1.4rem;
border: 1px solid var(--shine-border);
border-radius: 18px;
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
min-width: 0;
}
.shine-bk__sumhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.shine-bk__days { margin: 0; font-size: .92rem; color: var(--shine-muted); }
.shine-bk__days .total_days_container {font-weight: 700;color: var(--shine-text);background: var(--shine-surface-alt);}
.shine-bk__total {
margin: 0;
font-family: var(--shine-font-display);
font-size: clamp(1.2rem, 3vw, 1.5rem);
font-weight: 700;
letter-spacing: -.02em;
color: #1dbb60;
white-space: nowrap;
}
.shine-bk__flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.shine-bk__flags:empty { display: none; }
/* the engine injects these as .highlight_opt with an inline svg */
.shine-bk__flags .highlight_opt {
display: inline-flex;
align-items: center;
gap: .35rem;
margin: 0 !important;
padding: .25rem .75rem;
border: 1px solid var(--shine-border);
border-radius: 100px;
font-size: .78rem;
color: var(--shine-muted);
}
.shine-bk__flags .highlight_opt svg { color: var(--shine-accent); margin: 0 !important; }
.shine-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(--shine-border);
}
.shine-bk__lines div { min-width: 0; }
.shine-bk__lines dt {
font-size: .9rem;
font-weight: 400;
color: var(--shine-faint);
}
.shine-bk__lines dd { margin: .2rem 0 0; font-weight: 600; font-size: .95rem; color: var(--shine-text); }
.shine-bk__errbox {
margin-top: 1rem;
padding: .75rem 1rem;
border: 1px solid color-mix(in srgb, var(--shine-danger) 55%, transparent);
border-radius: 12px;
font-size: .86rem;
color: var(--shine-danger);
}
.shine-bk__errbox p { margin: 0; }
.shine-bk__errbox p + p { margin-top: .25rem; }
.shine-bk__contact { display: grid; gap: .7rem; }
.shine-bk__contactrow { display: flex; flex-wrap: wrap; gap: .5rem; }
.shine-bk__contactrow .shine-btn { padding: .5rem 1rem; font-size: .85rem; }
.shine-bk__admin p { margin: 0 0 .8rem; font-size: .9rem; color: var(--shine-muted); }
/* ---- narrower screens ---- */
@media (max-width: 1100px) {
.shine-bk__bar { grid-template-columns: minmax(0, 1fr); }
.shine-bk__go { padding-top: 0; }
.shine-bk__cta { width: 100%; justify-content: center; }
.shine-bk__field--veh { max-width: none; }
}
@media (max-width: 820px) {
.shine-bk__sum { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.shine-bk__card {padding: 1rem;}
.shine-bk__where { flex-wrap: wrap; }
.shine-bk__where > .shine-bk__field { flex-basis: 100%; }
.shine-bk__addret { margin-top: 0; height: 36px; }
.shine-bk__when { grid-template-columns: minmax(0, 1fr); }
.shine-bk__pop--time { width: 100%; }
.shine-bk__lines { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.shine-bk__lines div { display: flex; justify-content: space-between; }
.shine-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) */
.shine-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 shine 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; shine 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. */
.shine-bk #cal-render th.drp-nav,
.shine-bk #cal-render th.prev,
.shine-bk #cal-render th.next,
.shine-bk #cal-render th.drp-nav:hover,
.shine-bk #cal-render th.prev:hover,
.shine-bk #cal-render th.next:hover {
text-align: center;
vertical-align: middle;
background: none !important;
}
.shine-bk #cal-render th.drp-nav span,
.shine-bk #cal-render th.prev span,
.shine-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(--shine-text) 14%, transparent) !important;
border-radius: 10px !important;
background: none !important;
box-shadow: none !important;
transform: none !important;
color: var(--shine-text) !important;
font-family: inherit !important;
transition: background-color var(--shine-dur) var(--shine-ease), border-color var(--shine-dur) var(--shine-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 */
.shine-bk #cal-render th.drp-nav:not(.drp-nav-extra) span,
.shine-bk #cal-render th.prev span,
.shine-bk #cal-render th.next span { display: inline-grid !important; place-items: center; }
.shine-bk #cal-render th.drp-nav span::before,
.shine-bk #cal-render th.prev span::before,
.shine-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;
}
.shine-bk #cal-render th.drp-nav-prev span::before,
.shine-bk #cal-render th.prev span::before { transform: translateX(2px) rotate(135deg); }
.shine-bk #cal-render th.drp-nav-next span::before,
.shine-bk #cal-render th.next span::before { transform: translateX(-2px) rotate(-45deg); }
.shine-bk #cal-render th.drp-nav:not(.is-disabled):hover span,
.shine-bk #cal-render th.prev:hover span,
.shine-bk #cal-render th.next:hover span {
background: color-mix(in srgb, var(--shine-text) 10%, transparent) !important;
border-color: color-mix(in srgb, var(--shine-accent) 60%, transparent) !important;
}
.shine-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 */
.shine-bk #cal-render .drp-calendar.right { padding-top: 0; }
.shine-bk #cal-render td.sold-date,
.shine-bk #cal-render td.sold-date:hover {
background: #ff00001c !important;
color: color-mix(in srgb, var(--shine-danger) 75%, transparent) !important;
text-decoration: line-through !important;
}
.shine-bk__flags .highlight_opt {
background: var(--shine-surface-alt);
color: var(--shine-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. */
.shine-bk__extras {
display: grid;
gap: 1.6rem;
padding: 1.4rem 0rem;
/* border: 1px solid var(--shine-border); */
/* border-radius: 20px; */
transition: opacity var(--shine-dur) var(--shine-ease);
}
.shine-bk__extras.is-loading { opacity: .55; pointer-events: none; }
.shine-bk__xblock { display: grid; gap: .9rem; min-width: 0; }
.shine-bk__xhead h2 { margin: 0; font-size: 1.15rem; }
.shine-bk__xhead p { margin: .25rem 0 0; font-size: .86rem; color: var(--shine-muted); }
/* plans */
.shine-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;
}
.shine-bk__plan {
display: grid;
align-content: start;
gap: .5rem;
padding: 1rem 1.1rem;
border: 1px solid var(--shine-border);
border-radius: 16px;
background: none;
color: var(--shine-text);
font-family: var(--shine-font-ui);
text-align: left;
cursor: pointer;
transition: border-color var(--shine-dur) var(--shine-ease), background-color var(--shine-dur) var(--shine-ease);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-bk__plan:hover { border-color: color-mix(in srgb, var(--shine-accent) 60%, var(--shine-border)); }
.shine-bk__plan.is-on {
border-color: var(--shine-accent);
background: color-mix(in srgb, var(--shine-accent) 8%, transparent);
}
.shine-bk__planhead {display: flex;align-items: center;gap: .6rem;color: var(--shine-accent);}
.shine-bk__planname { font-size: 1rem; font-weight: 700; }
.shine-bk__radio {
flex: 0 0 auto;
width: 18px; height: 18px;
border: 2px solid var(--shine-faint);
border-radius: 100px;
transition: border-color var(--shine-dur) var(--shine-ease), border-width var(--shine-dur) var(--shine-ease);
}
.shine-bk__plan.is-on .shine-bk__radio { border-color: var(--shine-accent); border-width: 5px; }
.shine-bk__planprice b {font-family: var(--shine-font-display);font-size: .8rem;font-weight: 700;}
.shine-bk__planprice span { font-size: .82rem; color: var(--shine-faint); }
.shine-bk__plantotal { font-size: .84rem; color: var(--shine-muted); }
.shine-bk__planexcess {
justify-self: start;
padding: .2rem .6rem;
border: 1px solid var(--shine-border);
border-radius: 100px;
font-size: .74rem;
color: var(--shine-muted);
}
.shine-bk__plandesc { font-size: .82rem; color: var(--shine-muted); line-height: 1.5; }
.shine-bk__planitems { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .3rem; }
.shine-bk__planitems li {display: flex;align-items: flex-start;gap: .45rem;font-size: .82rem;/* color: var(--shine-muted); */}
.shine-bk__planitems svg { flex: 0 0 auto; margin-top: 2px; color: var(--shine-accent); }
.shine-bk__xblock.is-invalid .shine-bk__plan { border-color: color-mix(in srgb, var(--shine-danger) 55%, var(--shine-border)); }
/* products */
.shine-bk__prods { display: grid; gap: .5rem; }
.shine-bk__prod {
display: flex;
align-items: center;
gap: .8rem;
width: 100%;
padding: .75rem .9rem;
border: 1px solid var(--shine-border);
border-radius: 14px;
background: none;
color: var(--shine-text);
font-family: var(--shine-font-ui);
text-align: left;
cursor: pointer;
transition: border-color var(--shine-dur) var(--shine-ease), background-color var(--shine-dur) var(--shine-ease);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-bk__prod:hover { border-color: color-mix(in srgb, var(--shine-accent) 60%, var(--shine-border)); }
.shine-bk__prod.is-on { border-color: var(--shine-accent); background: color-mix(in srgb, var(--shine-accent) 8%, transparent); }
.shine-bk__check {
flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
width: 20px; height: 20px;
border: 2px solid var(--shine-faint);
border-radius: 6px;
color: transparent;
transition: background-color var(--shine-dur) var(--shine-ease), border-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-bk__prod.is-on .shine-bk__check { background: var(--shine-accent); border-color: var(--shine-accent); color: var(--shine-accent-text); }
.shine-bk__prodmain { display: grid; gap: .1rem; flex: 1 1 auto; min-width: 0; }
.shine-bk__prodmain b { font-weight: 600; font-size: .92rem; }
.shine-bk__prodmain small { font-size: .78rem; color: var(--shine-faint); }
.shine-bk__prodtotal { flex: 0 0 auto; font-weight: 600; font-size: .92rem; white-space: nowrap; }
/* five summary lines now; let them wrap */
.shine-bk__lines { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
@media (max-width: 640px) {
.shine-bk__extras {}
.shine-bk__lines { grid-template-columns: minmax(0, 1fr); }
}
/* ---- vehicle details: protection plans (read-only, chosen when booking) ----
One wide card per plan: shield and name on the left, excess on the right,
then the description and what the plan includes. */
.shine-prot__head { display: flex; align-items: baseline; gap: .8rem; }
.shine-prot__head h2 { font-size: 1.15rem; }
.shine-prot__sub { margin: .2rem 0 1.1rem; font-size: .9rem; color: var(--shine-muted); }
.shine-prot__list { display: grid; gap: 1rem; }
.shine-prot__card {
border-bottom: 1px dashed var(--shine-border);
background: var(--shine-surface);
min-width: 0;
padding-bottom: 25px;
}
/* the rule separates plans, so the last one — or a lone one — has none */
.shine-prot__card:last-child { border-bottom: 0; padding-bottom: 0; }
/* the whole header line is the handle */
.shine-prot__top {
display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
cursor: pointer;
list-style: none;
}
.shine-prot__top::-webkit-details-marker { display: none; }
/* the body starts where the name does, not under the shield: 30px icon + the
1rem gap of the header row */
.shine-prot__body {
display: grid;
gap: .85rem;
padding-top: 1rem;
padding-left: calc(30px + 1rem);
}
@media (max-width: 560px) { .shine-prot__body { padding-left: calc(30px + 1rem); } }
.shine-prot__chev {transition: transform var(--shine-dur) var(--shine-ease);color: var(--shine-accent);}
.shine-prot__card[open] .shine-prot__chev { transform: rotate(180deg); }
.shine-prot__shield { flex: 0 0 auto; color: var(--shine-text); line-height: 0; }
.shine-prot__id {min-width: 0;line-height: 20px;}
.shine-prot__name {display: block;font-weight: 600;color: var(--shine-text);margin: 0px;padding: 0pc;}
/* free or priced, the amount is the good news — it reads green either way */
.shine-prot__price { margin: 0; color: var(--shine-ok); }
.shine-prot__price b {font-weight: 600;}
.shine-prot__price span { color: var(--shine-faint); font-size: .92rem; }
.shine-prot__excess {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: .5rem;
white-space: nowrap;
}
.shine-prot__desc { margin: 0; color: var(--shine-muted); line-height: 1.6; max-width: 78ch; }
.shine-prot__inch { font-size: 1rem; font-weight: 600; color: var(--shine-text); }
/* what it includes: one column on a phone, two on a tablet, three at most */
.shine-prot__items {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: .6rem 1.4rem;
}
@media (min-width: 560px) { .shine-prot__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .shine-prot__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shine-prot__items li {
display: flex; align-items: center; gap: .6rem;
min-width: 0;
color: var(--shine-text);
}
.shine-prot__items svg {
flex: 0 0 auto;
width: 20px; height: 20px; padding: 4px;
border-radius: 50%;
background: var(--shine-ok);
color: #ffffff;
}
/* =========================== 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) {
.shine-bk__bar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.55fr); }
}
.shine-bk__lower {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 1.2rem;
align-items: start;
}
.shine-bk__left { display: grid; gap: 1.2rem; min-width: 0; }
.shine-bk__right {
top: 96px;
display: grid;
gap: .9rem;
min-width: 0;
}
.shine-bk__xhint {
display: grid;
place-items: center;
min-height: 210px;
margin: 0;
padding: 1.4rem;
border-radius: 20px;
font-size: .9rem;
text-align: center;
color: var(--shine-muted);
}
.shine-bk__xhint[hidden] { display: none; }
/* a narrow column: the summary lines read top to bottom, label left, amount right */
.shine-bk__right .shine-bk__lines { grid-template-columns: minmax(0, 1fr); gap: .55rem; }
.shine-bk__right .shine-bk__lines div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.shine-bk__right .shine-bk__lines dd { margin: 0; }
.shine-bk__right .shine-bk__cta {
width: 100%;
height: 54px;
justify-content: center;
font-size: 1rem;
}
@media (max-width: 980px) {
.shine-bk__lower { grid-template-columns: minmax(0, 1fr); }
.shine-bk__right { position: static; }
}
@media (max-width:768px) {
.shine-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; shine only dresses it. */
.shine-rv { padding-bottom: clamp(3rem, 6vw, 5rem); padding-left: 0; padding-right: 0; }
.shine-rv > .shine-note { margin-bottom: 1rem; }
.shine-rv__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 3em;
align-items: start;
}
.shine-rv__main { display: grid; gap: 1.2rem; min-width: 0; }
.shine-rv__side {
top: 96px;
display: grid;
gap: .9rem;
min-width: 0;
margin: 0;
}
.shine-rv__card {
padding: 1.2rem 1.4rem;
border: 1px solid var(--shine-border);
border-radius: 20px;
min-width: 0;
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
/* 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 */
.shine-rv__panel { display: grid; padding-top: 0; padding-bottom: 0; }
.shine-rv__part { min-width: 0; padding: 1.3rem 0; }
.shine-rv__part + .shine-rv__part {
}
.shine-rv__panel .shine-rv__car { padding-bottom: 1rem; }
.shine-rv__panel .shine-rv__trip {
padding: 1.1rem 1.2rem;
border: 1px solid var(--shine-border);
border-radius: 16px;
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
/* the framed box already separates what follows it */
.shine-rv__panel .shine-rv__trip + .shine-rv__part { border-top: 0; }
.shine-rv__h {
margin: 0 0 .9rem;
font-family: var(--shine-font-display);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: -.01em;
color: var(--shine-text);
}
.shine-rv__eyebrow, .shine-rv__label {
margin: 0;
color: var(--shine-faint);
}
/* ---- the car ---- */
.shine-rv__car { display: flex; align-items: center; gap: 1.1rem; }
.shine-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(--shine-text) 6%, var(--shine-bg));
color: var(--shine-faint);
}
.shine-rv__vimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shine-rv__carmain { display: grid; gap: .45rem; min-width: 0; }
.shine-rv__carname {
margin: 0;
font-family: var(--shine-font-display);
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
font-weight: 800;
letter-spacing: -.02em;
}
.shine-rv__carname span { color: var(--shine-faint); font-weight: 400; }
.shine-rv__plate {
justify-self: start;
padding: .2rem .7rem;
border: 1px solid var(--shine-border);
border-radius: 8px;
font-size: .8rem;
color: var(--shine-muted);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
/* ---- the trip: pickup, then return ---- */
.shine-rv__trip {display: grid;grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);gap: 1.4rem;padding: 1.3rem;}
.shine-rv__leg { position: relative; display: grid; gap: .35rem; padding-left: 1.4rem; min-width: 0; }
.shine-rv__dot {
position: absolute;
left: 0;
top: .3rem;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--shine-accent);
}
.shine-rv__leg--drop .shine-rv__dot { background: var(--shine-accent); }
.shine-rv__leg p { margin: 0; }
.shine-rv__legtitle {font-size: .8rem;color: var(--shine-faint);}
.shine-rv__legdate {font-weight: 700;color: var(--shine-text);}
.shine-rv__legline { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--shine-muted); }
.shine-rv__legline svg { flex: 0 0 auto; color: var(--shine-accent); }
/* ---- price details ---- */
.shine-rv__tablewrap { overflow-x: auto; }
.shine-rv__table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .9rem; }
.shine-rv__table th,
.shine-rv__table td { padding: .6rem .5rem; color: var(--shine-muted); white-space: nowrap; }
.shine-rv__table td:first-child, .shine-rv__table th:first-child { padding-left: 0; white-space: normal; }
.shine-rv__table td:last-child, .shine-rv__table th:last-child { padding-right: 0; color: var(--shine-text); }
.shine-rv__table .text-end { text-align: right; }
.shine-rv__table .shine-rv__thead th {
padding-top: 1.1rem;
font-size: .8rem;
font-weight: 400;
color: var(--shine-faint);
border-bottom: 1px solid var(--shine-border);
}
.shine-rv__table tr:first-child th { padding-top: 0; }
.shine-rv__table .shine-rv__sub td { font-size: .82rem; }
.shine-rv__table .shine-rv__sub td:first-child { color: var(--shine-faint); }
.shine-rv__table .shine-rv__grand td {
padding-top: .9rem;
border-top: 1px solid var(--shine-border);
font-weight: 700;
color: var(--shine-text);
}
.shine-rv__table .shine-rv__grand td:last-child {font-size: 1.02rem;}
/* ---- guest note ---- */
.shine-rv__guest {
display: flex;
gap: .7rem;
margin: 0;
padding: 1rem 1.2rem;
border: 1px dashed color-mix(in srgb, var(--shine-text) 22%, transparent);
border-radius: 16px;
font-size: .84rem;
line-height: 1.55;
color: var(--shine-muted);
}
.shine-rv__guest svg { flex: 0 0 auto; margin-top: 1px; color: var(--shine-accent); }
.shine-rv__guest b { color: var(--shine-text); font-weight: 600; }
/* ---- summary ---- */
.shine-rv__total {
margin: .35rem 0 0;
font-family: var(--shine-font-display);
font-size: clamp(1.7rem, 4vw, 1.1rem);
font-weight: 700;
letter-spacing: -.02em;
line-height: 1.1;
}
.shine-rv__days { margin: .25rem 0 0; font-size: .9rem; color: var(--shine-muted); }
/* the total left, how many days it covers right, on one line */
.shine-rv__totrow {display: flex;align-items: baseline;justify-content: space-between;gap: .4rem 1rem;flex-wrap: wrap;margin-bottom: 25px;}
.shine-rv__totrow .shine-rv__days { margin: 0; text-align: right; white-space: nowrap; }
.shine-rv__days b {color: var(--shine-text);}
.shine-rv__flags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.shine-rv__flag {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .75rem;
border: 1px solid var(--shine-border);
border-radius: 100px;
font-size: .78rem;
color: var(--shine-muted);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-rv__flag svg { color: var(--shine-accent); }
.shine-rv__lines {
display: grid;
gap: .55rem;
margin: 1rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--shine-border);
}
.shine-rv__lines div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.shine-rv__lines dt {
font-weight: 400;
color: var(--shine-faint);
}
.shine-rv__lines dd { margin: 0; font-weight: 600; color: var(--shine-text); white-space: nowrap; }
.shine-rv__disc dt { cursor: help; }
.shine-rv__disc dd {}
/* ---- contact ---- */
.shine-rv__contact { display: grid; gap: .9rem; }
.shine-rv__contact .shine-rv__h { margin: 0; }
.shine-rv__err { margin: 0; font-size: .8rem; color: var(--shine-danger); }
.shine-rv__err:empty { display: none; }
.shine-rv__agree {
position: relative;
display: flex;
align-items: flex-start;
gap: .65rem;
font-size: .8rem;
line-height: 1.45;
color: var(--shine-muted);
cursor: pointer;
}
.shine-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 */
.shine-rv__agree input[type="checkbox"] {
position: absolute !important;
top: 0;
left: 0;
opacity: 0;
width: 22px;
height: 22px;
margin: 0;
cursor: pointer;
}
.shine-rv__box {
flex: 0 0 22px;
height: 22px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--shine-text) 28%, transparent);
border-radius: 7px;
color: transparent;
transition: background-color var(--shine-dur) var(--shine-ease), border-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-rv__agree input:checked + .shine-rv__box { background: var(--shine-accent); border-color: var(--shine-accent); color: var(--shine-bg); }
.shine-rv__agree input:focus-visible + .shine-rv__box { outline: 2px solid var(--shine-accent); outline-offset: 2px; }
.was-validated .shine-rv__agree input:invalid + .shine-rv__box { border-color: var(--shine-danger); }
/* ---- pay ---- */
.shine-rv__pay { display: grid; gap: .9rem; }
.shine-rv__seg {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 4px;
border: 1px solid var(--shine-border);
font-size: .8rem;
border-radius: 14px;
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-rv__segbtn {
height: 42px;
border: 0;
border-radius: 10px;
background: none;
font: inherit;
color: var(--shine-muted);
cursor: pointer;
transition: background-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-rv__segbtn:hover { color: var(--shine-text); }
.shine-rv__segbtn.active { background: color-mix(in srgb, var(--shine-accent) 16%, transparent); color: var(--shine-accent); }
.shine-rv__providers { display: grid; gap: .55rem; }
:is(.shine-rv, .shine-inv) .payment-methods-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));gap: .5rem;margin-bottom: 13px;}
:is(.shine-rv, .shine-inv) .payment-option {
display: grid;
place-items: center;
height: 100%;
min-height: 56px;
padding: .7rem;
border: 1px solid var(--shine-border);
border-radius: 12px;
font-size: .85rem;
color: var(--shine-muted);
cursor: pointer;
transition: border-color var(--shine-dur) var(--shine-ease), background-color var(--shine-dur) var(--shine-ease);
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
:is(.shine-rv, .shine-inv) .payment-option:hover { border-color: color-mix(in srgb, var(--shine-text) 30%, transparent); }
:is(.shine-rv, .shine-inv) .payment-option.active {
border-color: var(--shine-accent);
background: color-mix(in srgb, var(--shine-accent) 9%, transparent);
color: var(--shine-text);
}
/* (shared with the invoice pay page, .shine-inv) */
/* provider logos are drawn for white backgrounds; on shine's dark cards they
read as one white mark each, brighter on the chosen one */
:is(.shine-rv, .shine-inv) .payment-logo {
max-height: 22px;
max-width: 70px;
/* filter: brightness(0) invert(1); */
transition: opacity var(--shine-dur) var(--shine-ease);
}
:is(.shine-rv, .shine-inv) .payment-option:hover .payment-logo { opacity: .85; }
:is(.shine-rv, .shine-inv) .payment-option.active .payment-logo { opacity: 1; }
.shine-rv__wait { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .82rem; color: var(--shine-muted); }
.shine-rv__cta {
width: 100%;
height: 54px;
justify-content: center;
gap: .4rem;
}
.shine-rv__cta:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 980px) {
.shine-rv__grid { grid-template-columns: minmax(0, 1fr); }
.shine-rv__side { position: static; }
}
@media (max-width: 640px) {
.shine-rv__card { padding: 1rem; }
.shine-rv__panel { padding-top: 0; padding-bottom: 0; }
.shine-rv__part { padding: 1rem 0; }
.shine-rv__panel .shine-rv__trip { padding: 1rem; }
.shine-rv__car { align-items: flex-start; }
.shine-rv__vimg { flex-basis: 108px; }
.shine-rv__trip { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.shine-rv {
padding-left: 20px;
padding-right:20px;
}
.shine-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. */
.shine-cf {/* padding-top: clamp(1.5rem, 4vw, 3rem); */padding-bottom: clamp(3rem, 6vw, 5rem);}
.shine-cf .d-none { display: none !important; }
.shine-cf__card {
max-width: 100%;
margin: 0 auto;
padding: clamp(1.8rem, 4vw, 2.6rem) clamp(1.2rem, 4vw, 2.4rem);
border-radius: 24px;
text-align: center;
z-index: 5;
position: relative;
}
.shine-cf__card > div { display: grid; justify-items: center; }
.shine-cf__icon {
width: 84px;
height: 84px;
display: grid;
place-items: center;
margin-bottom: 1.3rem;
border-radius: 50%;
}
.shine-cf__icon--ok {
color: var(--shine-accent);
background: color-mix(in srgb, var(--shine-accent) 14%, transparent);
border: 1px solid color-mix(in srgb, var(--shine-accent) 45%, transparent);
animation: shine-cf-pop .5s var(--shine-ease) both;
}
.shine-cf__icon--ok path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: shine-cf-draw .45s var(--shine-ease) .3s forwards;
}
/* a ring that leaves the circle once, as the tick lands */
.shine-cf__icon--ok { position: relative; }
.shine-cf__icon--ok::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1px solid var(--shine-accent);
opacity: 0;
}
@keyframes shine-cf-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes shine-cf-draw { to { stroke-dashoffset: 0; } }
@keyframes shine-cf-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.6); } }
.shine-cf__icon--wait { border: 1px solid var(--shine-border); }
/* payment failed: the same circle in red, no animation */
.shine-cf__icon--fail { color: var(--shine-danger); background: color-mix(in srgb, var(--shine-danger) 12%, transparent); border: 1px solid color-mix(in srgb, var(--shine-danger) 45%, transparent); }
.shine-cf__text--danger { color: color-mix(in srgb, var(--shine-danger) 85%, var(--shine-text)); }
.shine-cf__spin {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid color-mix(in srgb, var(--shine-accent) 25%, transparent);
border-top-color: var(--shine-accent);
animation: shine-cf-spin .8s linear infinite;
}
@keyframes shine-cf-spin { to { transform: rotate(360deg); } }
.shine-cf__title {
margin: 0 0 .5rem;
font-family: var(--shine-font-display);
font-size: clamp(1.4rem, 3vw, 1.8rem);
font-weight: 600;
letter-spacing: -.02em;
color: var(--shine-text);
}
.shine-cf__text {max-width: 60ch;margin: 0 0 1.6rem;font-size: .95rem;line-height: 1.6;color: var(--shine-muted);}
.shine-cf__cta { height: 50px; padding: 0 1.8rem; gap: .4rem; }
.shine-cf__cta--ghost {
background: none;
border: 1px solid var(--shine-border);
color: var(--shine-text);
}
.shine-cf__cta--ghost:hover { border-color: var(--shine-accent); color: var(--shine-accent); }
@media (prefers-reduced-motion: reduce) {
.shine-cf__icon--ok, .shine-cf__icon--ok::after { animation: none; }
.shine-cf__icon--ok path { animation: none; stroke-dashoffset: 0; }
.shine-cf__spin { animation-duration: 2.4s; }
}
@media (max-width: 640px) {
.shine-cf__cta { width: 100%; justify-content: center; }
.shine-cf__card {
margin: 10px;
margin-top: 25px;
}
.shine-bk__xhint {
min-height: 20px;
}
.shine-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 .shine-legal__body styles plain
elements (h1–h4, p, lists, links, tables) rather than classes. */
.shine-legal { padding-top: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.shine-legal__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 1.2rem;
align-items: start;
}
.shine-legal__doc {
min-width: 0;
padding: clamp(1.2rem, 4vw, 2.6rem);
border: 1px solid var(--shine-border);
border-radius: 20px;
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
/* ---- auto-translation notice ---- */
.shine-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-radius: 12px;
background: var(--shine-surface-alt);
}
.shine-legal__tr p { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .85rem; color: var(--shine-muted); }
.shine-legal__tr svg { color: var(--shine-accent); flex: 0 0 auto; }
.shine-legal__tr a { font-size: .85rem; font-weight: 600; color: var(--shine-accent); }
.shine-legal__tr a:hover { color: var(--shine-text); }
/* ---- the tenant's text ---- */
.shine-legal__body {
max-width: 72ch;
font-size: .98rem;
line-height: 1.75;
color: var(--shine-muted);
overflow-wrap: anywhere;
}
.shine-legal__body > :first-child { margin-top: 0; }
.shine-legal__body h1, .shine-legal__body h2, .shine-legal__body h3, .shine-legal__body h4 {
margin: 2rem 0 .7rem;
font-family: var(--shine-font-display);
font-weight: 600;
letter-spacing: -.01em;
line-height: 1.3;
color: var(--shine-text);
}
.shine-legal__body h1 { font-size: 1.6rem; }
.shine-legal__body h2 { font-size: 1.35rem; }
.shine-legal__body h3 { font-size: 1.12rem; }
.shine-legal__body h4 { font-size: 1rem; }
.shine-legal__body p { margin: 0 0 1rem; }
.shine-legal__body strong, .shine-legal__body b { color: var(--shine-text); font-weight: 600; }
.shine-legal__body a { color: var(--shine-accent); text-decoration: underline; text-underline-offset: 3px; }
.shine-legal__body a:hover { color: var(--shine-text); }
.shine-legal__body ul, .shine-legal__body ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.shine-legal__body li { margin-bottom: .4rem; }
.shine-legal__body li::marker { color: var(--shine-accent); }
.shine-legal__body hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--shine-border); opacity: 1; }
.shine-legal__body blockquote {
margin: 1.2rem 0;
padding: .2rem 0 .2rem 1rem;
border-left: 2px solid var(--shine-accent);
color: var(--shine-text);
}
.shine-legal__body table { width: 100%; margin: 0 0 1.2rem; border-collapse: collapse; font-size: .9rem; }
.shine-legal__body th, .shine-legal__body td { padding: .55rem .6rem; border-bottom: 1px solid var(--shine-border); text-align: left; vertical-align: top; }
.shine-legal__body th { color: var(--shine-text); font-weight: 600; }
/* editors paste inline colours meant for a white page; keep the text readable */
.shine-legal__body [style*="color"] { color: inherit !important; }
.shine-legal__body [style*="background"] { background: none !important; }
/* ---- Google Translate picker, dark ---- */
.shine-legal__gt { margin-top: 1.6rem; }
.shine-legal__gt .goog-te-gadget { font-family: inherit; font-size: .8rem; color: var(--shine-faint); }
.shine-legal__gt .goog-te-gadget select {
appearance: none;
margin: 0 0 .4rem;
padding: .5rem 2rem .5rem .8rem;
border: 1px solid var(--shine-border);
border-radius: 10px;
background: var(--shine-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(--shine-text);
cursor: pointer;
outline: none;
transition: border-color var(--shine-dur) var(--shine-ease);
}
.shine-legal__gt .goog-te-gadget select:hover,
.shine-legal__gt .goog-te-gadget select:focus { border-color: var(--shine-accent); }
/* ---- side: the two documents and the date ---- */
.shine-legal__side { position: sticky; top: 96px; display: grid; gap: .9rem; min-width: 0; }
.shine-legal__nav {
display: grid;
padding: .4rem;
border: 1px solid var(--shine-border);
border-radius: 18px;
background: color-mix(in srgb, var(--shine-text) 4%, var(--shine-bg));
}
.shine-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(--shine-muted);
transition: background-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-legal__link svg { color: var(--shine-faint); transition: color var(--shine-dur) var(--shine-ease); }
.shine-legal__link:hover { color: var(--shine-text); background: color-mix(in srgb, var(--shine-text) 6%, transparent); }
.shine-legal__link.is-on { color: var(--shine-accent); background: color-mix(in srgb, var(--shine-accent) 12%, transparent); }
.shine-legal__link.is-on svg { color: var(--shine-accent); }
.shine-legal__updated {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .3rem .5rem;
margin: 0;
padding: 0 .4rem;
font-size: .82rem;
color: var(--shine-faint);
}
.shine-legal__updated span { width: 100%; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.shine-legal__updated b { color: var(--shine-text); font-weight: 600; }
@media (max-width: 980px) {
.shine-legal__grid { grid-template-columns: minmax(0, 1fr); }
/* on a phone the switch between the two documents comes first */
.shine-legal__side { position: static; order: -1; }
.shine-legal__nav { grid-template-columns: 1fr 1fr; }
.shine-legal__link { justify-content: center; text-align: center; }
.shine-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. */
.shine-legal .row { row-gap: 1.2rem; }
.shine-legal__tr + .border-bottom { display: none; }
.shine-legal__tr #translated_label p { font-weight: 400; }
.shine-legal__meta {
margin-top: .9rem;
padding: 0 .4rem;
font-size: .82rem;
color: var(--shine-faint);
}
.shine-legal__meta b { color: var(--shine-text); font-weight: 600; }
.shine-legal__meta svg { color: var(--shine-faint); }
.shine-legal__list {
top: 96px;
gap: .15rem;
padding: .4rem;
border: 1px solid var(--shine-border);
border-radius: 18px;
box-shadow: 0 .125rem .25rem rgb(5 7 12 / 4%) !important;
}
.shine-legal__list .nav-link {
padding: .8rem 1rem;
border-radius: 12px;
font-size: .92rem;
color: var(--shine-muted);
transition: background-color var(--shine-dur) var(--shine-ease), color var(--shine-dur) var(--shine-ease);
}
.shine-legal__list .nav-link:hover {color: var(--shine-text);background: var(--shine-surface-alt);}
.shine-legal__list .nav-item.active .nav-link { color: var(--shine-accent); background: color-mix(in srgb, var(--shine-accent) 12%, transparent); }
/* Google's picker: the page's own