/* ============================================
RENTI4KA · Foundation v1
============================================ */
/* === RESET === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
/* === TOKENS === */
:root {
/* Color */
--bg: #0a0a0a;
--surface: #141414;
--surface-2: #1f1f1f;
--border: #2a2a2a;
--muted: #8A8A85;
--text: #F5F5F0;
--gold: #D4AF37;
--gold-dark: #B8902C;
--bronze: #cd7f32;
--silver: #c0c0c0;
--success: #4ade80;
--error: #f87171;
/* Type */
--font-display: 'Space Grotesk', system-ui, sans-serif;
--font-brutal: 'Anton', 'Space Grotesk', Impact, sans-serif;
--font-body: 'Inter', system-ui, sans-serif;
--font-mono: 'IBM Plex Mono', ui-monospace, monospace;
/* Spacing scale */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
--s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
--s-20: 80px; --s-24: 96px;
/* Radius */
--r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px;
--r-full: 999px;
/* Motion */
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--fast: 200ms;
--med: 400ms;
--slow: 800ms;
--epic: 1400ms;
/* Layout */
--header-h: 68px;
--container-max: 1280px;
--gutter: 24px;
}
@media (max-width: 640px) {
:root { --gutter: 16px; --header-h: 60px; }
}
/* === TYPE === */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
h1 { font-size: clamp(40px, 6vw, 84px); }
h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 600; letter-spacing: -0.025em; }
h3 { font-size: clamp(22px, 2.5vw, 32px); font-weight: 600; }
.eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.25em; color: var(--gold); text-transform: uppercase; }
.label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.25em; color: var(--muted); text-transform: uppercase; }
.mono { font-family: var(--font-mono); letter-spacing: 0.15em; }
.gold { color: var(--gold); }
/* === LAYOUT === */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--s-16) 0; }
/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* === BRAND LOCKUP === */
.lockup { display: inline-flex; align-items: center; gap: var(--s-2); }
.lockup-mark { width: 64px; height: 27px; flex-shrink: 0; }
.lockup-mark svg { width: 100%; height: 100%; }
.lockup-text { display: flex; flex-direction: column; line-height: 1; }
.lockup-wm { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; }
.lockup-wm .four { color: var(--gold); font-style: italic; font-weight: 600; }
.lockup-desc { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.25em; color: var(--muted); margin-top: 3px; }
/* Larger variant for hero/footer */
.lockup-lg .lockup-mark { width: 128px; height: 54px; }
.lockup-lg .lockup-wm { font-size: 36px; }
.lockup-lg .lockup-desc { font-size: 10px; margin-top: 6px; }
/* === BUTTONS === */
.btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: 14px 22px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; transition: all var(--fast) var(--ease); cursor: pointer; }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { background: #E8C658; transform: translateY(-1px); box-shadow: 0 12px 24px rgba(212,175,55,.25); }
.btn-ghost { color: var(--text); border: 1px solid var(--border); background: transparent; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: 9px 16px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 15px; }
/* === ICON SIZES === */
.icon-xs { width: 14px; height: 14px; flex-shrink: 0; }
.icon-sm { width: 18px; height: 18px; flex-shrink: 0; }
.icon-md { width: 22px; height: 22px; flex-shrink: 0; }
.icon-lg { width: 28px; height: 28px; flex-shrink: 0; }
/* === SITE HEADER (innovative transparent — densifies on scroll) === */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
height: var(--header-h);
background: linear-gradient(180deg, rgba(10,10,10,0.35) 0%, rgba(10,10,10,0.0) 100%);
border-bottom: 1px solid transparent;
transition: background var(--med) var(--ease), backdrop-filter var(--med) var(--ease), border-color var(--med) var(--ease);
}
.site-header.is-scrolled {
background: rgba(10,10,10,0.62);
backdrop-filter: blur(16px) saturate(160%);
-webkit-backdrop-filter: blur(16px) saturate(160%);
border-bottom-color: rgba(212,175,55,0.12);
}
.header-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: 100%; gap: var(--s-6); }
.header-brand { display: inline-flex; align-items: center; }
.lockup-img {
height: 44px;
width: auto;
display: block;
/* Always-on subtle gold halo + dark shadow for separation from any bg */
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 0 10px rgba(212,175,55,0.22));
transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.header-brand:hover .lockup-img {
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 18px rgba(212,175,55,0.55));
transform: translateY(-1px);
}
@media (max-width: 720px) {
.lockup-img { height: 38px; }
}
/* Center pill nav */
.header-nav { display: flex; justify-content: center; }
.nav-pill {
display: inline-flex;
gap: 4px;
padding: 4px;
background: rgba(20,20,20,0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-full);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
.nav-pill li { display: contents; }
.nav-pill a {
display: inline-flex;
align-items: center;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
border-radius: var(--r-full);
transition: all var(--fast) var(--ease);
letter-spacing: 0.01em;
}
.nav-pill a:hover { color: var(--text); background: rgba(212,175,55,0.08); }
.nav-pill a.is-active { color: var(--bg); background: var(--gold); }
/* Header right cluster */
.header-actions { display: flex; align-items: center; gap: var(--s-3); justify-self: end; }
.icon-link {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.08em;
color: var(--text);
padding: 8px 12px;
border-radius: var(--r-full);
transition: all var(--fast) var(--ease);
}
.icon-link:hover { color: var(--gold); background: rgba(212,175,55,0.08); }
.icon-link .phone-num { white-space: nowrap; }
.icon-btn {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-full);
background: rgba(20,20,20,0.55);
color: var(--text);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all var(--fast) var(--ease);
}
.icon-btn:hover {
border-color: rgba(212,175,55,0.45);
color: var(--gold);
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(212,175,55,0.2);
}
/* === SCROLL REVEAL STORYTELLING === */
[data-reveal] {
opacity: 0;
transform: translateY(36px);
transition:
opacity 900ms cubic-bezier(0.16, 1, 0.3, 1),
transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
[data-reveal][data-reveal-delay="0"] { --reveal-delay: 0; }
[data-reveal][data-reveal-delay="80"] { --reveal-delay: 80; }
[data-reveal][data-reveal-delay="120"] { --reveal-delay: 120; }
[data-reveal][data-reveal-delay="160"] { --reveal-delay: 160; }
[data-reveal][data-reveal-delay="200"] { --reveal-delay: 200; }
[data-reveal][data-reveal-delay="240"] { --reveal-delay: 240; }
[data-reveal][data-reveal-delay="320"] { --reveal-delay: 320; }
[data-reveal][data-reveal-delay="400"] { --reveal-delay: 400; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1; transform: none; transition: none; }
}
.stat-inf {
font-style: normal !important;
font-size: 1.2em;
letter-spacing: 0;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 60%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* === BLUE DATA CHANNEL === */
:root {
--blue: #4DA8FF;
--blue-2: #6FBDFF;
--blue-dark: #1E5FBF;
--blue-bg: #0A1628;
--blue-surface: #0F2138;
}
/* Progress pill (always visible — replaces phone link) */
.progress-pill {
display: none;
align-items: center;
gap: var(--s-3);
padding: 6px 8px 6px 14px;
border: 1px solid rgba(77,168,255,0.3);
border-radius: var(--r-full);
background: rgba(15,33,56,0.55);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
transition: all var(--fast) var(--ease);
cursor: pointer;
}
.progress-pill:hover {
border-color: var(--blue);
box-shadow: 0 6px 20px rgba(77,168,255,0.25);
transform: translateY(-1px);
}
.pill-bar {
position: relative;
width: 56px; height: 4px;
background: rgba(77,168,255,0.12);
border-radius: var(--r-full);
overflow: hidden;
flex-shrink: 0;
}
.pill-fill {
position: absolute; inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
border-radius: var(--r-full);
box-shadow: 0 0 10px rgba(77,168,255,0.5);
transition: width var(--slow) var(--ease);
}
.pill-pct {
font-size: 11px;
font-weight: 600;
color: var(--blue);
letter-spacing: 0.05em;
}
.pill-points {
font-size: 11px;
color: var(--muted);
letter-spacing: 0.08em;
}
.pill-cta {
font-size: 11px;
font-weight: 600;
color: var(--blue);
letter-spacing: 0.08em;
}
.pill-avatar {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue-2) 0%, var(--blue-dark) 100%);
color: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
box-shadow: 0 2px 8px rgba(77,168,255,0.3);
}
/* === Logged-out login button (simple, no progress bar) === */
.login-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid rgba(212,175,55,0.3);
border-radius: var(--r-full);
background: rgba(20,20,20,0.55);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
color: var(--text);
cursor: pointer;
transition: all var(--fast) var(--ease);
font-family: var(--font-mono);
}
.login-btn:hover {
border-color: var(--gold);
color: var(--gold);
background: rgba(212,175,55,0.08);
box-shadow: 0 6px 20px rgba(212,175,55,0.18);
transform: translateY(-1px);
}
.login-btn-icon { color: var(--gold); flex-shrink: 0; }
.login-btn-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
@media (max-width: 420px) {
.login-btn { padding: 8px 10px; }
.login-btn-label { display: none; }
}
/* State toggle (logged-out shows .login-btn.pill-out, logged-in shows .pill-in points pill) */
.pill-out { display: inline-flex; }
.pill-in { display: none; }
body.is-logged-in .pill-out { display: none; }
body.is-logged-in .pill-in { display: inline-flex; }
@media (max-width: 980px) {
.header-nav { display: none; }
.header-cta { display: none; }
}
@media (max-width: 560px) {
.pill-points { display: none; }
}
@media (max-width: 420px) {
.progress-pill { padding: 4px 4px 4px 10px; gap: var(--s-2); }
.pill-bar { width: 36px; }
.pill-cta { display: none; }
.pill-out::after { content: "→"; color: var(--blue); font-size: 14px; padding: 0 6px; }
}
/* === HERO STORY PIN === */
.hero-story {
position: relative;
height: 220vh; /* tall scroll container */
}
.hero-story .hero {
position: sticky;
top: 0;
height: 100vh;
min-height: 100vh;
perspective: 1600px;
perspective-origin: 50% 30%;
}
/* === CUSTOM CURSOR === */
.cursor {
position: fixed;
top: 0; left: 0;
pointer-events: none;
z-index: 9999;
border-radius: 50%;
mix-blend-mode: difference;
transform: translate3d(-50%, -50%, 0);
transition: width 200ms var(--ease), height 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.cursor-dot {
width: 6px; height: 6px;
background: var(--gold);
}
.cursor-ring {
width: 36px; height: 36px;
border: 1px solid rgba(212,175,55,0.6);
transition: width 240ms var(--ease), height 240ms var(--ease), border-color 240ms var(--ease), background-color 240ms var(--ease);
}
body.cursor-hover .cursor-dot { width: 4px; height: 4px; }
body.cursor-hover .cursor-ring {
width: 56px; height: 56px;
border-color: var(--gold);
background: rgba(212,175,55,0.1);
}
body.cursor-press .cursor-ring { width: 22px; height: 22px; }
body.cursor-hidden .cursor { opacity: 0; }
@media (hover: none), (pointer: coarse) {
.cursor { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cursor { display: none; }
}
/* Scroll progress bar (top of viewport) */
.scroll-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background: rgba(255,255,255,0.05);
z-index: 200;
pointer-events: none;
}
.sp-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--gold-dark), var(--gold), #FFE9A0);
box-shadow: 0 0 8px var(--gold);
transition: width 90ms linear;
}
/* Hero scroll cue (bottom indicator) */
.hero-cue {
position: absolute;
bottom: 18px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
pointer-events: none;
}
.cue-line {
width: 1px;
height: 32px;
background: linear-gradient(180deg, transparent, var(--gold));
animation: cue-pulse 2s ease-in-out infinite;
}
@keyframes cue-pulse {
0%, 100% { transform: scaleY(1); opacity: 0.7; }
50% { transform: scaleY(1.4); opacity: 1; }
}
.cue-text {
font-size: 9px;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
}
@media (max-width: 720px) {
.hero-cue { bottom: 8px; }
.cue-line { height: 22px; }
}
/* === HERO === */
.hero {
position: relative;
min-height: clamp(580px, 92vh, 940px);
display: flex;
align-items: flex-end;
padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-12);
overflow: hidden;
isolation: isolate;
}
/* v7.2: Blurred ambient backdrop — softer + brighter so sides don't go pitch black */
.hero-bg {
position: absolute;
inset: 0;
z-index: -4;
background-image: url('../img/hero-bmw.jpg');
background-size: cover;
background-position: center 50%;
filter: blur(40px) saturate(1.4) brightness(0.55) contrast(1.05);
transform: scale(1.22);
will-change: transform;
}
/* Hero video — autoplay loop, full cover (force fill regardless of intrinsic size) */
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
max-width: none;
z-index: -2;
object-fit: cover;
object-position: center 55%;
filter: saturate(1.08) contrast(1.08) brightness(0.88);
transition: opacity 1400ms var(--ease);
will-change: opacity, transform;
pointer-events: none;
display: block;
}
.hero-video.is-frozen {
animation: ken-burns 32s ease-in-out infinite alternate;
}
@media (max-width: 720px) and (orientation: portrait) {
.hero-video { object-position: center 50%; filter: saturate(1.1) contrast(1.1) brightness(0.7); }
}
/* v7.1: M5 hero — show whole car, subtle grade, minimal crop */
.hero-still {
position: absolute;
inset: 0;
z-index: -3;
background-image: url('../img/hero-bmw.jpg');
background-size: cover;
background-position: center 55%;
background-repeat: no-repeat;
/* Lighter grade: BMW must stay clearly visible */
filter: saturate(1.02) contrast(1.1) brightness(0.92) hue-rotate(-1deg);
animation: ken-burns 36s ease-in-out infinite alternate;
will-change: transform, opacity, filter;
transform-origin: center 60%;
}
/* v7.2: Cinema overlay — bottom-only fade for footer transition, NO center darkening */
.hero-still::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(180deg,
rgba(10, 10, 10, 0.10) 0%,
rgba(10, 10, 10, 0.00) 30%,
rgba(10, 10, 10, 0.00) 70%,
rgba(10, 10, 10, 0.75) 100%);
z-index: 1;
}
@keyframes ken-burns {
from { transform: scale(1.0) translate(0, 0); }
to { transform: scale(1.04) translate(-0.5%, -0.3%); }
}
/* Mobile portrait: BMW image is portrait too, so it fits naturally — keep car centered */
@media (max-width: 720px) and (orientation: portrait) {
.hero-still {
background-position: center 50%;
filter: saturate(1.02) contrast(1.1) brightness(0.78) hue-rotate(-1deg);
}
.hero-bg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero-still { animation: none; }
}
/* Cinematic vignette — softer, edges only, doesn't dim BMW center */
.hero-vignette {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background:
radial-gradient(140% 90% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.45) 100%),
radial-gradient(80% 60% at 80% 20%, rgba(212,175,55,0.14) 0%, rgba(212,175,55,0) 60%);
mix-blend-mode: multiply;
opacity: 0.6;
}
/* Film grain (SVG noise via data URI) */
.hero-grain {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.08;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
animation: grain-shift 0.9s steps(8) infinite;
}
@keyframes grain-shift {
0% { transform: translate(0,0); }
20% { transform: translate(-8%, 4%); }
40% { transform: translate(6%, -6%); }
60% { transform: translate(-4%, 8%); }
80% { transform: translate(8%, 2%); }
100% { transform: translate(0,0); }
}
/* Anamorphic letterbox hint */
.hero-letterbox {
position: absolute;
left: 0; right: 0;
height: 28px;
z-index: 4;
pointer-events: none;
background: #000;
opacity: 0.85;
}
.hero-letterbox.lb-top { top: 0; }
.hero-letterbox.lb-bot { bottom: 0; box-shadow: 0 -1px 0 rgba(212,175,55,0.06); }
@media (max-width: 720px) {
.hero-letterbox { height: 14px; }
.hero-grain { display: none; }
.hero-video, .hero-still { filter: saturate(1.04) contrast(1.03) brightness(0.97); }
.hero-still { animation-duration: 48s; }
.hero-video.is-frozen { animation-duration: 40s; }
@keyframes ken-burns {
from { transform: scale(1) translate(0, 0); }
to { transform: scale(1.025) translate(-0.4%, -0.3%); }
}
}
@media (max-width: 720px) and (orientation: portrait) {
.hero-video, .hero-still { object-position: center center; background-position: center center; }
.hero-still { background-image: url('../img/hero-poster-mobile.jpg'); }
}
@media (max-width: 480px) {
.points-fab { width: 50px; height: 50px; }
.search-field, .search-cta { min-height: 48px; }
.pill-bar { width: 32px; }
}
/* ============================================
BRUTAL EDITORIAL SECTIONS
============================================ */
/* Section reset */
section { position: relative; }
/* Section head */
.section-head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: end;
gap: var(--s-6);
padding: var(--s-16) 0 var(--s-10);
border-bottom: 1px solid var(--border);
}
.section-num {
font-size: 11px;
letter-spacing: 0.3em;
color: var(--muted);
text-transform: uppercase;
}
.section-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(56px, 9vw, 140px);
line-height: 0.92;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--text);
}
.title-italic {
font-style: italic;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section-sub {
font-size: 14px;
color: var(--muted);
max-width: 32ch;
line-height: 1.5;
}
.section-cta { white-space: nowrap; align-self: end; }
@media (max-width: 880px) {
.section-head {
grid-template-columns: 1fr;
align-items: start;
gap: var(--s-4);
}
}
/* Slim section head variant — mono tag + one-line subtitle, no massive title */
.section-head-slim {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--s-6);
flex-wrap: wrap;
padding: var(--s-12) 0 var(--s-8);
}
.section-slim-sub {
flex: 1;
font-size: 14px;
color: var(--muted);
line-height: 1.4;
max-width: 56ch;
}
.section-slim-sub em {
font-style: italic;
color: var(--gold);
font-weight: 500;
}
/* === SECTION 2: 3D SHOWCASE + BOOKING === */
.showcase {
position: relative;
background: var(--bg);
padding: var(--s-16) 0 var(--s-12);
overflow: hidden;
}
.showcase::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
90deg,
transparent 0, transparent 79px,
rgba(212,175,55,0.04) 79px, rgba(212,175,55,0.04) 80px
);
pointer-events: none;
}
.showcase-head { padding: 0 0 var(--s-10); }
.showcase-tag {
display: inline-block;
margin-bottom: var(--s-8);
padding: 6px 14px;
border: 1px solid rgba(212,175,55,0.3);
border-radius: var(--r-full);
background: rgba(212,175,55,0.05);
color: var(--gold);
}
/* Abiturient limited-offer banner */
.abiturient-banner {
position: relative;
display: flex;
align-items: center;
gap: var(--s-3);
padding: 12px 16px;
margin-bottom: var(--s-5);
background: linear-gradient(95deg, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0.06) 100%);
border: 1px solid rgba(212,175,55,0.4);
border-radius: var(--r-md);
overflow: hidden;
}
.abiturient-banner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,233,160,0.18) 50%, transparent 100%);
transform: translateX(-100%);
animation: ab-shine 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes ab-shine {
0% { transform: translateX(-100%); }
60% { transform: translateX(100%); }
100% { transform: translateX(100%); }
}
.ab-pulse {
flex-shrink: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 12px var(--gold);
animation: ab-blink 1.4s ease-in-out infinite;
}
@keyframes ab-blink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.7); }
}
.ab-tag {
font-size: 9px;
letter-spacing: 0.25em;
color: var(--gold);
text-transform: uppercase;
white-space: nowrap;
flex-shrink: 0;
}
.ab-text {
font-size: 12px;
color: var(--text);
line-height: 1.4;
}
.ab-text strong { color: var(--gold); letter-spacing: 0.02em; }
@media (prefers-reduced-motion: reduce) {
.abiturient-banner::before { animation: none; }
.ab-pulse { animation: none; }
}
.showcase-grid {
position: relative;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: var(--s-8);
align-items: stretch;
}
/* 3D viewer frame */
.showcase-3d { min-height: 540px; display: flex; }
.three-d-frame {
position: relative;
flex: 1;
background:
radial-gradient(80% 60% at 50% 50%, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0) 70%),
var(--surface);
border: 1px solid var(--border);
overflow: hidden;
min-height: 540px;
}
.three-d-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
background: #050505;
z-index: 2;
}
.three-d-stage {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background:
radial-gradient(60% 80% at 50% 60%, rgba(212,175,55,0.06) 0%, rgba(212,175,55,0) 70%),
radial-gradient(80% 100% at 50% 100%, rgba(212,175,55,0.12) 0%, rgba(212,175,55,0) 50%),
#050505;
}
.three-d-loading {
position: absolute;
bottom: 56px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(212,175,55,0.55);
text-transform: uppercase;
animation: load-pulse 1.4s ease-in-out infinite;
}
@keyframes load-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
.three-d-ring {
position: absolute;
width: 75%;
aspect-ratio: 1;
border-radius: 50%;
border: 1px solid rgba(212,175,55,0.2);
border-top-color: var(--gold);
border-right-color: rgba(212,175,55,0.4);
animation: ring-spin 14s linear infinite;
pointer-events: none;
}
.three-d-ring-2 {
width: 92%;
border: 1px dashed rgba(212,175,55,0.18);
animation-duration: 22s;
animation-direction: reverse;
}
@keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.three-d-car {
position: relative;
z-index: 2;
width: 60%;
max-height: 80%;
display: flex;
align-items: center;
justify-content: center;
animation: car-float 6s ease-in-out infinite alternate;
filter: drop-shadow(0 24px 32px rgba(0,0,0,0.8));
}
.three-d-car img {
width: 100%;
height: auto;
max-height: 80vh;
object-fit: contain;
border-radius: 6px;
}
@keyframes car-float {
from { transform: translateY(-4px) rotate(-0.5deg); }
to { transform: translateY(4px) rotate(0.5deg); }
}
.three-d-floor {
position: absolute;
bottom: 0; left: 0; right: 0;
height: 30%;
background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.85) 100%);
pointer-events: none;
}
.three-d-readout {
position: absolute;
bottom: 18px; left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
justify-content: center;
font-size: 9px;
letter-spacing: 0.22em;
color: rgba(245,245,240,0.55);
text-transform: uppercase;
background: rgba(10,10,10,0.7);
padding: 6px 12px;
border-radius: var(--r-sm);
border: 1px solid rgba(212,175,55,0.15);
}
.three-d-readout .r-sep { color: var(--gold); opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
.three-d-ring, .three-d-car { animation: none; }
}
.three-d-corner {
position: absolute;
width: 32px; height: 32px;
pointer-events: none;
z-index: 2;
}
.three-d-corner-tl { top: 12px; left: 12px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.three-d-corner-tr { top: 12px; right: 12px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.three-d-corner-bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.three-d-corner-br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.three-d-tag {
position: absolute;
top: 18px; left: 50%;
transform: translateX(-50%);
z-index: 3;
padding: 5px 10px;
background: rgba(10,10,10,0.85);
border: 1px solid rgba(212,175,55,0.3);
border-radius: var(--r-sm);
font-size: 9px;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
}
.three-d-spin {
position: absolute;
bottom: 18px; right: 50%;
transform: translateX(50%);
z-index: 3;
font-size: 10px;
letter-spacing: 0.25em;
color: rgba(212,175,55,0.6);
text-transform: uppercase;
}
/* Booking form card */
.showcase-form {
position: relative;
padding: var(--s-10) var(--s-8);
background:
radial-gradient(120% 60% at 50% 0%, rgba(212,175,55,0.07) 0%, rgba(212,175,55,0) 60%),
linear-gradient(180deg, rgba(31,31,31,0.96) 0%, rgba(20,20,20,0.96) 100%);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.showcase-form::before {
content: "";
position: absolute;
top: -1px; left: 18%; right: 18%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.5;
}
.form-eyebrow {
font-size: 10px;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
}
.form-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(38px, 4.5vw, 56px);
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--text);
text-transform: uppercase;
margin-bottom: var(--s-2);
}
.quick-form { display: flex; flex-direction: column; gap: var(--s-4); }
.qf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.qf-field { display: flex; flex-direction: column; gap: 6px; }
.qf-label {
font-size: 9px;
letter-spacing: 0.25em;
color: var(--muted);
text-transform: uppercase;
}
.quick-form input[type="date"],
.quick-form select {
height: 48px;
padding: 0 14px;
background: rgba(10,10,10,0.6);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
font-size: 14px;
color: var(--text);
font-family: var(--font-body);
transition: all var(--fast) var(--ease);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.quick-form input[type="date"]:focus,
.quick-form select:focus {
outline: none;
border-color: var(--gold);
background: rgba(10,10,10,0.85);
box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
.quick-form input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(0.7) sepia(1) saturate(4) hue-rotate(20deg);
cursor: pointer;
}
.quick-form select {
background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
padding-right: 36px;
}
.qf-trust {
display: flex;
justify-content: space-between;
font-size: 10px;
letter-spacing: 0.18em;
color: var(--muted);
margin-top: var(--s-2);
padding-top: var(--s-3);
border-top: 1px dashed rgba(255,255,255,0.06);
}
.qf-trust span { color: var(--gold); opacity: 0.8; }
@media (max-width: 880px) {
.showcase-grid { grid-template-columns: 1fr; }
.showcase-3d { min-height: 380px; }
.three-d-frame { min-height: 380px; }
.showcase-form { padding: var(--s-8) var(--s-5); }
}
/* === MARQUEE TICKER === */
.marquee {
position: relative;
background: var(--gold);
color: var(--bg);
border-top: 1px solid rgba(0,0,0,0.15);
border-bottom: 1px solid rgba(0,0,0,0.15);
overflow: hidden;
padding: 14px 0;
font-family: var(--font-mono);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.marquee-track {
display: flex;
width: max-content;
animation: marquee-scroll 38s linear infinite;
will-change: transform;
}
.marquee-group {
display: flex;
align-items: center;
gap: var(--s-6);
padding-right: var(--s-6);
flex-shrink: 0;
}
.marquee-group > span { white-space: nowrap; }
.m-sep { color: rgba(0,0,0,0.5); font-size: 10px; }
.marquee-gold {
background: var(--bg);
color: var(--gold);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 18px 0;
font-size: 14px;
letter-spacing: 0.25em;
}
.marquee-gold .marquee-group { gap: var(--s-10); padding-right: var(--s-10); }
.marquee-gold .marquee-track { animation-duration: 30s; }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
/* === STATS STRIP === */
.stats { background: var(--bg); border-bottom: 1px solid var(--border); }
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
.stat-cell {
padding: var(--s-12) var(--s-6);
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.stat-cell:last-child { border-right: none; }
.stat-num {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(72px, 9vw, 128px);
line-height: 0.9;
letter-spacing: -0.02em;
color: var(--text);
}
.stat-num .stat-slash, .stat-num .stat-pct {
color: var(--gold);
font-style: italic;
}
.stat-cap {
font-size: 10px;
letter-spacing: 0.25em;
color: var(--muted);
text-transform: uppercase;
}
@media (max-width: 880px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.stat-cell { padding: var(--s-8) var(--s-5); }
.stat-cell:nth-child(2) { border-right: none; }
.stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr 1fr; }
}
/* === FLEET PREVIEW === */
.fleet-preview { padding-bottom: var(--s-16); }
.fleet-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-6);
margin-top: var(--s-10);
}
.fleet-card {
background: var(--surface);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
transition: all var(--med) var(--ease);
}
.fleet-card:hover {
border-color: var(--gold-dark);
transform: translateY(-4px);
box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}
.card-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--s-4);
padding: var(--s-5) var(--s-5) var(--s-4);
border-bottom: 1px solid var(--border);
}
.card-tag {
display: block;
font-size: 10px;
letter-spacing: 0.22em;
color: var(--gold);
text-transform: uppercase;
margin-bottom: var(--s-3);
}
.card-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: 36px;
line-height: 0.95;
letter-spacing: -0.01em;
color: var(--text);
text-transform: uppercase;
}
.card-num {
font-family: var(--font-brutal);
font-weight: 400;
font-size: 56px;
line-height: 0.85;
color: rgba(212,175,55,0.25);
letter-spacing: -0.04em;
}
.card-photo {
position: relative;
background: var(--surface-2);
}
.photo-meta {
position: absolute;
top: 12px; left: 12px;
z-index: 2;
font-size: 9px;
letter-spacing: 0.22em;
color: var(--gold);
background: rgba(10,10,10,0.7);
padding: 4px 8px;
border-radius: var(--r-sm);
text-transform: uppercase;
}
.photo-img {
width: 100%;
aspect-ratio: 16/10;
background-size: cover;
background-position: center;
filter: saturate(1.05) contrast(1.04);
transition: transform var(--slow) var(--ease);
}
.fleet-card:hover .photo-img { transform: scale(1.04); }
.card-foot {
display: grid;
grid-template-columns: 1fr auto auto;
align-items: center;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-top: 1px solid var(--border);
}
.card-specs {
display: flex;
flex-wrap: wrap;
gap: var(--s-3);
font-size: 10px;
letter-spacing: 0.15em;
color: var(--muted);
text-transform: uppercase;
}
.card-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.price-num {
font-family: var(--font-brutal);
font-weight: 400;
font-size: 28px;
color: var(--gold);
letter-spacing: -0.01em;
line-height: 1;
}
.price-cap {
font-size: 9px;
letter-spacing: 0.22em;
color: var(--muted);
}
.card-arrow {
width: 40px; height: 40px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
border-radius: var(--r-sm);
font-size: 16px;
color: var(--text);
transition: all var(--fast) var(--ease);
}
.card-arrow:hover {
background: var(--gold);
color: var(--bg);
border-color: var(--gold);
}
@media (max-width: 980px) {
.fleet-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.fleet-grid { grid-template-columns: 1fr; }
}
/* === LOYALTY TEASER === */
.loyalty-teaser {
padding: var(--s-16) 0;
background:
radial-gradient(120% 80% at 80% 50%, rgba(212,175,55,0.05) 0%, rgba(212,175,55,0) 60%),
var(--bg);
position: relative;
overflow: hidden;
}
.loyalty-teaser::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
transparent 0,
transparent 80px,
rgba(212,175,55,0.025) 80px,
rgba(212,175,55,0.025) 81px
);
pointer-events: none;
}
.loyalty-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s-12);
align-items: start;
position: relative;
}
.loyalty-head { display: flex; flex-direction: column; gap: var(--s-4); }
.loyalty-head .section-num { margin-bottom: var(--s-3); }
.loyalty-title { font-size: clamp(48px, 7.5vw, 110px); margin-bottom: var(--s-3); }
.loyalty-multiplier {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--s-2);
align-self: start;
position: relative;
}
.mult-num {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(120px, 18vw, 280px);
line-height: 0.85;
letter-spacing: -0.04em;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.mult-x { font-style: italic; opacity: 0.8; }
.mult-cap {
font-size: 11px;
letter-spacing: 0.3em;
color: var(--muted);
text-transform: uppercase;
}
.tier-cards {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
margin-top: var(--s-10);
position: relative;
}
.tier-card {
padding: var(--s-6);
background: var(--surface);
border: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--s-3);
}
.tier-tag {
font-size: 10px;
letter-spacing: 0.3em;
color: var(--muted);
text-transform: uppercase;
}
.tier-amt {
font-family: var(--font-brutal);
font-weight: 400;
font-size: 20px;
letter-spacing: 0.05em;
color: var(--text);
}
.tier-amt strong {
font-size: 36px;
letter-spacing: -0.02em;
margin-right: 8px;
color: var(--text);
}
.tier-deal {
font-style: italic;
color: var(--gold);
font-size: 18px;
font-weight: 600;
}
.tier-list {
margin-top: var(--s-2);
font-size: 12px;
color: var(--muted);
display: flex;
flex-direction: column;
gap: 6px;
}
.tier-list li::before { content: "— "; color: var(--gold); }
.tier-card.tier-gold {
background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, var(--surface) 100%);
border-color: rgba(212,175,55,0.4);
}
.tier-card.tier-gold .tier-tag { color: var(--gold); }
.tier-card.tier-gold .tier-amt strong { color: var(--gold); }
@media (max-width: 880px) {
.loyalty-grid { grid-template-columns: 1fr; }
.loyalty-multiplier { align-items: flex-start; }
.tier-cards { grid-template-columns: 1fr; }
}
/* === TRUST PILLARS === */
.pillars { padding-bottom: var(--s-16); border-bottom: 1px solid var(--border); }
.pillars-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin-top: var(--s-10);
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.pillar {
padding: var(--s-8) var(--s-6);
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: var(--s-3);
transition: background var(--fast) var(--ease);
}
.pillar:hover { background: rgba(212,175,55,0.04); }
.pillar-icon {
display: inline-flex;
width: 44px; height: 44px;
align-items: center;
justify-content: center;
border: 1px solid var(--gold);
border-radius: 50%;
color: var(--gold);
margin-bottom: var(--s-3);
}
.pillar-title {
font-size: 13px;
letter-spacing: 0.18em;
color: var(--text);
text-transform: uppercase;
font-weight: 500;
line-height: 1.3;
}
.pillar-body { font-size: 13px; color: var(--muted); line-height: 1.55; }
@media (max-width: 880px) { .pillars-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .pillars-grid { grid-template-columns: 1fr; } }
/* === FAQ === */
.faq { padding-bottom: var(--s-16); border-bottom: 1px solid var(--border); }
.faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
margin-top: var(--s-8);
border-top: 1px solid var(--border);
border-left: 1px solid var(--border);
}
.faq-item {
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: var(--surface);
transition: background var(--fast) var(--ease);
}
.faq-item.is-open { background: rgba(212,175,55,0.04); }
.faq-q {
width: 100%;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s-4);
padding: var(--s-5) var(--s-6);
text-align: left;
font-size: 15px;
color: var(--text);
cursor: pointer;
transition: color var(--fast) var(--ease);
}
.faq-q:hover { color: var(--gold); }
.faq-num {
font-size: 10px;
letter-spacing: 0.25em;
color: var(--gold);
}
.faq-text { font-weight: 500; line-height: 1.4; }
.faq-toggle {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
border-radius: 50%;
font-size: 16px;
color: var(--gold);
font-weight: 300;
transition: all var(--fast) var(--ease);
}
.faq-item.is-open .faq-toggle {
background: var(--gold);
color: var(--bg);
border-color: var(--gold);
transform: rotate(45deg);
}
.faq-a {
max-height: 0;
overflow: hidden;
transition: max-height 400ms var(--ease);
}
.faq-item.is-open .faq-a { max-height: 280px; }
.faq-a p {
padding: 0 var(--s-6) var(--s-5) calc(var(--s-6) + 36px);
font-size: 13px;
line-height: 1.6;
color: var(--muted);
}
.faq-a strong { color: var(--gold); }
@media (max-width: 720px) {
.faq-grid { grid-template-columns: 1fr; }
}
/* === MAP + CONTACT === */
.map-contact { padding: var(--s-12) 0 var(--s-16); border-bottom: 1px solid var(--border); }
.map-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: var(--s-6);
margin-top: var(--s-8);
}
.map-frame {
position: relative;
min-height: 480px;
background: var(--surface);
border: 1px solid var(--border);
overflow: hidden;
}
.map-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
filter: invert(0.92) hue-rotate(180deg) saturate(0.8);
}
.map-corner {
position: absolute;
width: 30px; height: 30px;
z-index: 2;
pointer-events: none;
}
.map-corner-tl { top: 12px; left: 12px; border-top: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.map-corner-tr { top: 12px; right: 12px; border-top: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.map-corner-bl { bottom: 12px; left: 12px; border-bottom: 1px solid var(--gold); border-left: 1px solid var(--gold); }
.map-corner-br { bottom: 12px; right: 12px; border-bottom: 1px solid var(--gold); border-right: 1px solid var(--gold); }
.map-tag {
position: absolute;
top: 18px; left: 50%;
transform: translateX(-50%);
z-index: 3;
padding: 5px 12px;
background: rgba(10,10,10,0.85);
border: 1px solid rgba(212,175,55,0.3);
border-radius: var(--r-sm);
font-size: 9px;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
pointer-events: none;
}
.contact-info {
display: flex;
flex-direction: column;
gap: var(--s-5);
padding: var(--s-6);
background: var(--surface);
border: 1px solid var(--border);
}
.contact-block { display: flex; flex-direction: column; gap: var(--s-2); padding-bottom: var(--s-4); border-bottom: 1px dashed rgba(255,255,255,0.06); }
.contact-block:last-child { border-bottom: none; padding-bottom: 0; }
.contact-label {
font-size: 9px;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
}
.contact-text { font-size: 14px; color: var(--text); line-height: 1.5; }
.contact-text .muted { color: var(--muted); font-size: 12px; }
.contact-link {
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.05em;
color: var(--text);
transition: color var(--fast) var(--ease);
}
.contact-link:hover { color: var(--gold); }
.contact-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.contact-chip {
padding: 6px 12px;
border: 1px solid var(--border);
border-radius: var(--r-full);
font-size: 12px;
font-weight: 500;
color: var(--text);
transition: all var(--fast) var(--ease);
}
.contact-chip:hover { border-color: var(--gold); color: var(--gold); background: rgba(212,175,55,0.05); }
@media (max-width: 880px) {
.map-grid { grid-template-columns: 1fr; }
.map-frame { min-height: 360px; }
}
/* === BIG CTA === */
.big-cta { padding: var(--s-16) 0; }
.cta-card {
position: relative;
padding: var(--s-16) var(--s-12);
background:
radial-gradient(80% 80% at 90% 50%, rgba(212,175,55,0.18) 0%, rgba(212,175,55,0) 60%),
linear-gradient(135deg, rgba(31,31,31,0.95) 0%, rgba(20,20,20,0.95) 100%);
border: 1px solid var(--gold-dark);
overflow: hidden;
}
.cta-card::before {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
-45deg,
transparent 0, transparent 12px,
rgba(212,175,55,0.03) 12px, rgba(212,175,55,0.03) 13px
);
pointer-events: none;
}
.cta-card .section-num {
display: inline-block;
margin-bottom: var(--s-4);
color: var(--gold);
}
.cta-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(72px, 11vw, 180px);
line-height: 0.9;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: var(--s-6);
}
.cta-star {
position: absolute;
top: 50%;
right: var(--s-12);
transform: translateY(-50%);
font-size: clamp(120px, 18vw, 240px);
color: var(--gold);
opacity: 0.25;
pointer-events: none;
line-height: 1;
animation: star-spin 28s linear infinite;
will-change: transform;
}
@keyframes star-spin {
from { transform: translateY(-50%) rotate(0deg); }
to { transform: translateY(-50%) rotate(360deg); }
}
.cta-sub {
max-width: 50ch;
font-size: 14px;
color: var(--muted);
margin-bottom: var(--s-8);
}
.cta-actions {
display: flex;
gap: var(--s-4);
flex-wrap: wrap;
}
@media (max-width: 720px) {
.cta-card { padding: var(--s-10) var(--s-6); }
.cta-star { right: var(--s-4); opacity: 0.15; }
}
/* === FOOTER === */
.site-footer {
background: #050505;
border-top: 1px solid var(--border);
padding: var(--s-16) 0 var(--s-6);
}
.footer-grid {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
gap: var(--s-8);
padding-bottom: var(--s-10);
border-bottom: 1px solid var(--border);
align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: var(--s-4); }
.footer-logo { height: 40px; width: auto; }
.footer-blurb {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
max-width: 32ch;
}
.footer-h {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.3em;
color: var(--gold);
margin-bottom: var(--s-4);
text-transform: uppercase;
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--s-2); }
.footer-col li { font-size: 13px; }
.footer-col a { color: var(--text); transition: color var(--fast) var(--ease); }
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
display: flex;
justify-content: space-between;
padding-top: var(--s-5);
font-size: 10px;
letter-spacing: 0.25em;
color: rgba(138,138,133,0.6);
flex-wrap: wrap;
gap: var(--s-3);
}
@media (max-width: 720px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
.hero-overlay {
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
/* v7.1: Subtle bottom-up gradient for text readability — keeps BMW visible */
background:
linear-gradient(0deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 45%),
radial-gradient(120% 80% at 75% 60%, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0) 60%);
}
.hero-inner { position: relative; width: 100%; }
.hero-content { max-width: 620px; }
.hero-content .eyebrow { display: inline-flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-5); padding: 6px 12px; border: 1px solid rgba(212,175,55,0.35); border-radius: var(--r-full); background: rgba(212,175,55,0.05); }
.hero-content .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero-title {
font-family: var(--font-display);
font-size: clamp(38px, 5.4vw, 64px);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.04;
margin-bottom: var(--s-4);
}
.hero-sub {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.22em;
color: var(--muted);
text-transform: uppercase;
margin-bottom: var(--s-10);
}
/* Hero search bar */
.hero-search {
display: flex;
align-items: stretch;
gap: var(--s-2);
background: rgba(20,20,20,0.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-xl);
padding: var(--s-2);
margin-bottom: var(--s-8);
max-width: 580px;
box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);
}
.search-field {
flex: 1;
display: flex;
align-items: center;
gap: var(--s-3);
padding: 10px 16px;
border-radius: var(--r-lg);
background: rgba(10,10,10,0.5);
border: 1px solid transparent;
transition: all var(--fast) var(--ease);
color: inherit;
}
.search-field:hover {
background: rgba(31,31,31,0.9);
border-color: rgba(212,175,55,0.4);
}
.search-field-icon { width: 18px; height: 18px; opacity: 0.7; flex-shrink: 0; }
.search-field-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.search-field-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
color: var(--muted);
text-transform: uppercase;
}
.search-field-value {
font-size: 14px;
font-weight: 500;
color: var(--text);
margin-top: 3px;
}
.search-cta { flex-shrink: 0; white-space: nowrap; padding: 14px 22px; }
/* Trust strip */
.trust-strip {
display: flex;
gap: var(--s-6);
flex-wrap: wrap;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--muted);
text-transform: uppercase;
}
.trust-strip li { display: inline-flex; align-items: center; gap: var(--s-2); }
.trust-strip .dot { color: var(--gold); }
@media (max-width: 720px) {
.hero { align-items: center; padding-top: calc(var(--header-h) + var(--s-12)); padding-bottom: var(--s-16); }
.hero-search { flex-direction: column; padding: var(--s-3); gap: var(--s-2); }
.search-arrow { display: none; }
.search-cta { width: 100%; justify-content: center; }
.trust-strip { gap: var(--s-4) var(--s-5); font-size: 10px; }
}
/* === HERO BRUTAL ACCENTS === */
.eyebrow-pill {
display: inline-flex !important;
align-items: center;
gap: var(--s-2);
padding: 6px 12px;
border: 1px solid rgba(212,175,55,0.32);
border-radius: var(--r-full);
background: rgba(212,175,55,0.05);
margin-bottom: var(--s-5);
}
.eyebrow-pill::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 10px var(--gold);
animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
/* Diagonal scanlines overlay (1.5% white) */
.hero-scanlines {
position: absolute; inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.5;
background-image: repeating-linear-gradient(
180deg,
rgba(255,255,255,0) 0px,
rgba(255,255,255,0) 2px,
rgba(255,255,255,0.018) 2px,
rgba(255,255,255,0.018) 3px
);
}
/* Watermark */
.hero-watermark {
position: absolute;
top: 18vh;
right: -3vw;
z-index: -1;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(120px, 18vw, 240px);
letter-spacing: -0.04em;
color: rgba(212,175,55,0.045);
white-space: nowrap;
pointer-events: none;
user-select: none;
transform: rotate(-8deg);
line-height: 0.8;
}
/* Corner brackets */
.hero-bracket {
position: absolute;
width: 38px; height: 38px;
z-index: 2;
pointer-events: none;
}
.hero-bracket.b-tl { top: calc(var(--header-h) + 16px); left: var(--gutter); border-top: 1px solid var(--gold-dark); border-left: 1px solid var(--gold-dark); }
.hero-bracket.b-tr { top: calc(var(--header-h) + 16px); right: var(--gutter); border-top: 1px solid var(--gold-dark); border-right: 1px solid var(--gold-dark); }
.hero-bracket.b-bl { bottom: 64px; left: var(--gutter); border-bottom: 1px solid var(--gold-dark); border-left: 1px solid var(--gold-dark); }
.hero-bracket.b-br { bottom: 64px; right: var(--gutter); border-bottom: 1px solid var(--gold-dark); border-right: 1px solid var(--gold-dark); }
/* Vertical sidestrip (left edge) */
.hero-sidestrip {
position: absolute;
left: 14px;
top: 50%;
z-index: 2;
font-size: 9px;
letter-spacing: 0.4em;
color: rgba(245,245,240,0.42);
text-transform: uppercase;
white-space: nowrap;
transform: rotate(-90deg) translateX(50%);
transform-origin: left center;
pointer-events: none;
}
/* REC indicator */
.hero-rec {
position: absolute;
top: calc(var(--header-h) + 28px);
right: calc(var(--gutter) + 56px);
z-index: 2;
display: inline-flex;
align-items: center;
gap: var(--s-2);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.25em;
color: rgba(245,245,240,0.55);
text-transform: uppercase;
pointer-events: none;
}
.rec-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #ef4444;
box-shadow: 0 0 10px rgba(239,68,68,0.7);
animation: rec-blink 1.4s ease-in-out infinite;
}
@keyframes rec-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
/* HUD bottom ribbon */
.hero-hud {
position: absolute;
left: 0; right: 0;
bottom: 0;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
gap: var(--s-4);
flex-wrap: wrap;
padding: 12px var(--gutter);
font-size: 10px;
letter-spacing: 0.25em;
color: rgba(245,245,240,0.55);
text-transform: uppercase;
background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.9) 100%);
border-top: 1px solid rgba(212,175,55,0.12);
pointer-events: none;
}
.hero-hud .sep { color: rgba(212,175,55,0.4); }
.hero-hud .hud-tail { color: var(--gold-dark); }
/* Search bar inner arrow between fields */
.search-arrow {
display: inline-flex;
align-items: center;
color: rgba(212,175,55,0.5);
font-size: 14px;
font-weight: 400;
padding: 0 4px;
align-self: center;
}
/* Heavier headline — mix display + impact feel */
.hero-title { text-shadow: 0 4px 24px rgba(0,0,0,0.4); }
.hero-title .gold {
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
position: relative;
}
/* Hide HUD on small screens to give content room */
@media (max-width: 720px) {
.hero-rec, .hero-sidestrip, .hero-watermark, .hero-hud { display: none; }
.hero-bracket.b-tl, .hero-bracket.b-tr { top: calc(var(--header-h) + 8px); }
.hero-bracket.b-bl, .hero-bracket.b-br { bottom: 24px; }
}
/* === AUTH MODAL === */
.auth-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: var(--s-6);
}
.auth-modal.is-open { display: flex; }
.modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10,10,10,0.78);
backdrop-filter: blur(12px) saturate(120%);
-webkit-backdrop-filter: blur(12px) saturate(120%);
animation: fade-in var(--med) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
position: relative;
width: 100%;
max-width: 440px;
max-height: calc(100vh - var(--s-12));
overflow-y: auto;
padding: var(--s-10) var(--s-8) var(--s-6);
background: linear-gradient(180deg, rgba(31,31,31,0.95) 0%, rgba(20,20,20,0.95) 100%);
border: 1px solid rgba(212,175,55,0.18);
border-radius: var(--r-2xl);
box-shadow:
0 32px 64px rgba(0,0,0,0.6),
0 2px 12px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255,255,255,0.04);
animation: modal-rise var(--med) var(--ease);
}
@keyframes modal-rise {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card::before {
content: "";
position: absolute;
top: -1px; left: 20%; right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
opacity: 0.6;
}
.modal-close {
position: absolute;
top: 14px; right: 14px;
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
color: var(--muted);
transition: all var(--fast) var(--ease);
}
.modal-close:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.modal-head { margin-bottom: var(--s-6); }
.modal-head .eyebrow {
display: inline-block;
font-size: 9px;
letter-spacing: 0.3em;
margin-bottom: var(--s-3);
}
.modal-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.025em;
line-height: 1.15;
margin-bottom: var(--s-2);
}
.modal-sub { font-size: 13px; color: var(--muted); line-height: 1.5; }
.auth-modal[data-mode="login"] .when-register,
.auth-modal[data-mode="register"] .when-login { display: none; }
.auth-modal[data-mode="login"] form[data-mode="register"],
.auth-modal[data-mode="register"] form[data-mode="login"] { display: none; }
/* Tabs */
.modal-tabs {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
background: rgba(10,10,10,0.5);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-lg);
padding: 4px;
margin-bottom: var(--s-6);
}
.modal-tabs .tab {
position: relative;
z-index: 2;
padding: 10px 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
border-radius: var(--r-md);
transition: color var(--fast) var(--ease);
}
.modal-tabs .tab:hover { color: var(--text); }
.tab-indicator {
position: absolute;
top: 4px; left: 4px;
width: calc(50% - 4px); height: calc(100% - 8px);
background: linear-gradient(135deg, rgba(212,175,55,0.2) 0%, rgba(212,175,55,0.08) 100%);
border: 1px solid rgba(212,175,55,0.35);
border-radius: var(--r-md);
transition: transform var(--med) var(--ease);
pointer-events: none;
}
.auth-modal[data-mode="login"] .tab[data-mode-switch="login"] { color: var(--text); }
.auth-modal[data-mode="register"] .tab[data-mode-switch="register"] { color: var(--text); }
.auth-modal[data-mode="register"] .tab-indicator { transform: translateX(100%); }
/* Form */
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.field-wrap { position: relative; }
.field input[type="text"],
.field input[type="email"],
.field input[type="password"] {
width: 100%;
height: 46px;
padding: 0 16px;
background: rgba(10,10,10,0.6);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--r-md);
font-size: 14px;
color: var(--text);
transition: all var(--fast) var(--ease);
font-family: var(--font-body);
}
.field-wrap input { padding-right: 48px; }
.field input:hover { border-color: rgba(212,175,55,0.25); }
.field input:focus {
outline: none;
border-color: var(--gold);
background: rgba(10,10,10,0.85);
box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
.field input::placeholder { color: rgba(245,245,240,0.3); }
.field .helper { font-size: 11px; color: var(--muted); margin-top: 2px; }
.toggle-pw {
position: absolute;
right: 6px; top: 50%;
transform: translateY(-50%);
width: 36px; height: 36px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-md);
color: var(--muted);
transition: all var(--fast) var(--ease);
}
.toggle-pw:hover { color: var(--gold); background: rgba(212,175,55,0.06); }
.toggle-pw .pw-hide { display: none; }
.toggle-pw.is-on .pw-show { display: none; }
.toggle-pw.is-on .pw-hide { display: block; }
.btn-block { width: 100%; justify-content: center; margin-top: var(--s-2); }
.link-muted {
display: inline-block;
font-size: 12px;
color: var(--muted);
transition: color var(--fast) var(--ease);
letter-spacing: 0.02em;
}
.link-muted:hover { color: var(--gold); }
.link-muted.center { text-align: center; align-self: center; }
.legal { font-size: 11px; color: var(--muted); line-height: 1.55; text-align: center; }
.modal-foot {
margin-top: var(--s-6);
padding-top: var(--s-4);
border-top: 1px solid rgba(255,255,255,0.05);
font-size: 9px;
letter-spacing: 0.3em;
color: rgba(138,138,133,0.5);
text-align: center;
text-transform: uppercase;
}
@media (max-width: 480px) {
.modal-card { padding: var(--s-8) var(--s-5) var(--s-5); border-radius: var(--r-xl); }
.modal-title { font-size: 22px; }
}
/* === POINTS FAB === */
.points-fab {
position: fixed;
bottom: 24px; right: 24px;
z-index: 90;
width: 60px; height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
color: #fff;
border: 1px solid rgba(255,255,255,0.18);
box-shadow:
0 16px 36px rgba(77,168,255,0.42),
0 4px 12px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255,255,255,0.2);
transition: all var(--med) var(--ease);
cursor: pointer;
}
.points-fab:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 24px 48px rgba(77,168,255,0.55),
0 6px 16px rgba(0,0,0,0.4);
}
.points-fab:active { transform: translateY(-1px) scale(1.02); }
.fab-pulse {
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid rgba(77,168,255,0.55);
animation: fab-ring 2.4s ease-out infinite;
pointer-events: none;
}
.fab-pulse-2 { animation-delay: 1.2s; }
@keyframes fab-ring {
0% { transform: scale(0.95); opacity: 0.85; }
80% { opacity: 0; }
100% { transform: scale(1.55); opacity: 0; }
}
.fab-tip {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%) translateX(8px);
padding: 6px 12px;
background: rgba(15,33,56,0.95);
border: 1px solid rgba(77,168,255,0.3);
border-radius: var(--r-md);
font-size: 9px;
letter-spacing: 0.3em;
color: var(--blue);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all var(--fast) var(--ease);
}
.points-fab:hover .fab-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 560px) {
.points-fab { bottom: 16px; right: 16px; width: 54px; height: 54px; }
.fab-tip { display: none; }
}
/* === POINTS PANEL === */
.points-panel {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: var(--s-6);
}
.points-panel.is-open { display: flex; }
.panel-backdrop {
position: absolute;
inset: 0;
background: rgba(10,22,40,0.78);
backdrop-filter: blur(14px) saturate(140%);
-webkit-backdrop-filter: blur(14px) saturate(140%);
animation: fade-in var(--med) var(--ease);
}
.panel-card {
position: relative;
width: 100%;
max-width: 480px;
max-height: calc(100vh - var(--s-12));
overflow-y: auto;
padding: var(--s-10) var(--s-8) var(--s-6);
background:
radial-gradient(120% 60% at 50% 0%, rgba(77,168,255,0.12) 0%, rgba(77,168,255,0) 60%),
linear-gradient(180deg, rgba(15,33,56,0.97) 0%, rgba(10,22,40,0.97) 100%);
border: 1px solid rgba(77,168,255,0.25);
border-radius: var(--r-2xl);
box-shadow:
0 32px 64px rgba(0,0,0,0.6),
0 4px 16px rgba(77,168,255,0.18),
inset 0 1px 0 rgba(255,255,255,0.04);
animation: modal-rise var(--med) var(--ease);
}
.panel-card::before {
content: "";
position: absolute;
top: -1px; left: 20%; right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--blue) 50%, transparent 100%);
opacity: 0.7;
}
.eyebrow.blue { color: var(--blue); }
.gold { color: var(--gold); }
.blue { color: var(--blue); }
.panel-state { display: none; }
.points-panel:not(.is-open) .panel-state { display: none; }
body:not(.is-logged-in) .points-panel.is-open .state-out { display: block; }
body.is-logged-in .points-panel.is-open .state-in { display: block; }
.panel-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.025em;
line-height: 1.2;
margin-top: var(--s-3);
margin-bottom: var(--s-2);
}
.panel-sub { font-size: 13px; color: var(--muted); margin-bottom: var(--s-6); line-height: 1.55; }
/* Locked preview (logged-out) */
.locked-preview {
padding: var(--s-4) var(--s-4);
background: rgba(77,168,255,0.04);
border: 1px dashed rgba(77,168,255,0.2);
border-radius: var(--r-lg);
margin-bottom: var(--s-6);
filter: blur(0.4px);
opacity: 0.7;
}
.locked-bar {
height: 8px;
background: rgba(77,168,255,0.1);
border-radius: var(--r-full);
overflow: hidden;
margin-bottom: var(--s-3);
}
.locked-fill {
width: 35%;
height: 100%;
background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 100%);
opacity: 0.4;
border-radius: var(--r-full);
}
.locked-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-2);
}
.locked-cell {
display: flex;
flex-direction: column;
gap: 4px;
}
.lc-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.22em;
color: var(--muted);
text-transform: uppercase;
}
.lc-value {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
color: rgba(77,168,255,0.4);
}
/* Stats grid (logged-in) */
.points-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-2);
margin-bottom: var(--s-5);
}
.stat {
padding: 14px 12px;
background: rgba(77,168,255,0.06);
border: 1px solid rgba(77,168,255,0.15);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: 6px;
}
.stat-label {
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.stat-value {
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
color: var(--blue);
line-height: 1;
}
.stat-value small {
font-size: 11px;
color: var(--muted);
font-weight: 500;
margin-left: 2px;
}
/* Tier progress bar */
.tier-progress { margin-bottom: var(--s-6); }
.tier-bar {
height: 8px;
background: rgba(77,168,255,0.1);
border-radius: var(--r-full);
overflow: hidden;
position: relative;
}
.tier-fill {
position: absolute; inset: 0 auto 0 0;
width: 0%;
background: linear-gradient(90deg, var(--blue-dark) 0%, var(--blue) 50%, var(--blue-2) 100%);
border-radius: var(--r-full);
box-shadow: 0 0 14px rgba(77,168,255,0.5);
transition: width var(--slow) var(--ease);
}
.tier-meta {
font-size: 10px;
letter-spacing: 0.18em;
color: var(--muted);
margin-top: var(--s-2);
text-transform: uppercase;
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.tier-need { color: rgba(77,168,255,0.7); }
.panel-h3 {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: var(--s-3);
margin-top: var(--s-5);
}
.earn-list {
display: flex;
flex-direction: column;
gap: var(--s-2);
margin-bottom: var(--s-3);
}
.earn-list li {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 12px 14px;
background: rgba(77,168,255,0.04);
border: 1px solid rgba(77,168,255,0.1);
border-radius: var(--r-md);
font-size: 13px;
color: var(--text);
}
.earn-dot {
flex-shrink: 0;
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
color: var(--blue);
padding: 4px 10px;
background: rgba(77,168,255,0.12);
border: 1px solid rgba(77,168,255,0.25);
border-radius: var(--r-sm);
min-width: 46px;
text-align: center;
letter-spacing: 0.02em;
}
.tier-ladder {
display: flex;
flex-direction: column;
gap: 0;
font-size: 13px;
color: var(--muted);
}
.tier-ladder li {
padding: 8px 0;
border-bottom: 1px dashed rgba(77,168,255,0.1);
}
.tier-ladder li strong {
color: var(--blue);
font-weight: 600;
}
.tier-ladder li:last-child { border: none; }
.logout-link {
display: block;
margin-top: var(--s-5);
text-align: center;
}
/* Blue button variant */
.btn-blue {
background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
color: #fff;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-blue:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(77,168,255,0.4), inset 0 1px 0 rgba(255,255,255,0.18);
filter: brightness(1.05);
}
@media (max-width: 480px) {
.panel-card { padding: var(--s-8) var(--s-5) var(--s-5); border-radius: var(--r-xl); }
.panel-title { font-size: 22px; }
.points-grid { grid-template-columns: 1fr 1fr; }
.points-grid .stat:nth-child(3) { grid-column: span 2; }
}
/* ============================================
v2 ADDITIONS — full-screen hero, Hertz widget,
category tabs, scroll story chapters, fleet 9
============================================ */
/* === FULL-SCREEN HERO REFINEMENTS === */
.hero-story { height: 260vh; }
.hero { padding: 0; align-items: center; }
.hero-inner { padding-top: var(--header-h); }
.hero-content { max-width: 820px; }
/* v7.3: Bigger wow title — "Имаш план." line 1, "Ние имаме кола." line 2 */
.hero-title { font-size: clamp(48px, 7.6vw, 112px); line-height: 0.96; letter-spacing: -0.04em; margin-bottom: var(--s-5); }
.hero-sub { margin-bottom: var(--s-8); font-size: clamp(13px, 1.2vw, 15px); }
/* (Scroll-driven hero transforms are controlled by JS in account.js
on .hero-still / .hero-video / .hero-content directly — do NOT override here) */
/* === HERO LAYOUT — desktop: split (text LEFT + bookcard RIGHT); mobile: centered stack === */
.hero-inner {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
text-align: center;
}
.hero-content { max-width: 820px; width: 100%; text-align: center; }
/* Desktop split: 2-col (title left, bookcard right) — overrides single column */
@media (min-width: 1080px) {
.hero-inner.hero-inner-split {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(380px, 0.85fr);
gap: clamp(32px, 4vw, 64px);
align-items: center;
text-align: left;
}
.hero-inner-split .hero-content,
.hero-inner-split .hero-content.hero-content-centered {
max-width: none;
text-align: left;
align-items: flex-start !important;
margin: 0 !important;
}
.hero-inner-split .hero-content .eyebrow-pill {
margin-left: 0;
}
.hero-inner-split .hero-content .hero-title { max-width: none !important; }
/* Title sized to fit on 2 lines: "Имаш план." + "Ние имаме кола." */
.hero-inner-split .hero-title {
font-size: clamp(48px, 5.2vw, 84px);
line-height: 0.98;
letter-spacing: -0.035em;
}
.hero-inner-split .hero-sub {
margin-left: 0;
max-width: 480px;
align-items: flex-start;
text-align: left;
}
.hero-inner-split .hero-sub > span { text-align: left; }
}
@media (max-width: 1080px) {
.hero-inner { grid-template-columns: 1fr; gap: 28px; align-items: stretch; }
.hero-content { max-width: 100%; }
}
/* === HERTZ-STYLE BOOKING WIDGET (dark + gold instead of yellow) === */
.hertz-widget {
position: relative;
background: linear-gradient(180deg, rgba(20,20,20,0.94) 0%, rgba(13,13,13,0.97) 100%);
backdrop-filter: blur(22px) saturate(150%);
-webkit-backdrop-filter: blur(22px) saturate(150%);
border: 1px solid rgba(212,175,55,0.20);
border-radius: var(--r-xl);
box-shadow:
0 30px 80px rgba(0,0,0,0.65),
0 4px 20px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.04);
overflow: hidden;
width: 100%;
align-self: end;
opacity: 0;
transform: translateY(20px);
transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.hertz-widget.is-revealed { opacity: 1; transform: translateY(0); }
.hertz-widget::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #B8902C 0%, #D4AF37 50%, #FFE9A0 100%);
z-index: 1;
}
/* Top bar */
.hw-bar {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 12px 18px;
background: linear-gradient(90deg, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0.02) 100%);
border-bottom: 1px solid rgba(212,175,55,0.15);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--gold);
text-transform: uppercase;
}
.hw-bar-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 10px var(--gold);
animation: pulse-dot 2s ease-in-out infinite;
flex-shrink: 0;
}
.hw-bar-text { flex: 1; font-weight: 600; }
.hw-bar-tail {
color: rgba(245,245,240,0.5);
font-size: 9px;
letter-spacing: 0.28em;
}
/* Form */
.hw-form { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.hw-row { display: flex; gap: 10px; }
.hw-row-2 > * { flex: 1; min-width: 0; }
.hw-field {
position: relative;
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px 14px;
background: rgba(10,10,10,0.55);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-md);
transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
cursor: pointer;
min-width: 0;
}
.hw-field:hover,
.hw-field:focus-within {
border-color: rgba(212,175,55,0.55);
background: rgba(20,20,20,0.85);
}
.hw-field-icon {
flex-direction: row;
align-items: center;
gap: 12px;
padding: 12px 16px;
}
.hw-icon { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }
.hw-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.hw-label {
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.22em;
color: var(--muted);
text-transform: uppercase;
}
.hw-value { font-size: 14px; font-weight: 500; color: var(--text); }
.hw-field input,
.hw-field select {
background: transparent;
border: 0;
padding: 0;
color: var(--text);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
outline: none;
width: 100%;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
color-scheme: dark;
}
.hw-field input::-webkit-calendar-picker-indicator {
filter: invert(0.7) sepia(1) hue-rotate(20deg) saturate(2);
cursor: pointer;
opacity: 0.7;
}
.hw-field select {
padding-right: 22px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23D4AF37' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center;
}
/* Checkbox */
.hw-checkbox {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
user-select: none;
font-size: 13px;
color: rgba(245,245,240,0.78);
padding: 0 4px;
}
.hw-checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.hw-check-box {
width: 16px; height: 16px;
border: 1.5px solid rgba(212,175,55,0.45);
border-radius: 3px;
background: rgba(10,10,10,0.5);
position: relative;
flex-shrink: 0;
transition: all var(--fast) var(--ease);
}
.hw-checkbox input:checked + .hw-check-box {
background: var(--gold);
border-color: var(--gold);
}
.hw-checkbox input:checked + .hw-check-box::after {
content: "";
position: absolute;
left: 4px; top: 0px;
width: 4px; height: 9px;
border: solid #0a0a0a;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.hw-checkbox:hover .hw-check-box { border-color: var(--gold); }
.hw-cta { margin-top: 4px; letter-spacing: 0.06em; }
.hw-trust {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin: 6px 0 0;
font-size: 9px;
letter-spacing: 0.2em;
color: rgba(245,245,240,0.42);
text-transform: uppercase;
}
.hw-trust span { white-space: nowrap; }
@media (max-width: 480px) {
.hw-row-2 { flex-direction: column; gap: 12px; }
.hw-bar-tail { display: none; }
.hw-form { padding: 16px; }
}
/* Hide old desktop scroll cue when widget is present */
@media (min-width: 1081px) {
.hero-cue { display: none; }
}
/* Improved hero overlay — softer left side so widget on right reads cleanly */
/* a11y v8: stronger left-side dark for text contrast over high-detail AI-upscaled video */
.hero-overlay {
background:
linear-gradient(90deg, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.78) 28%, rgba(8,8,8,0.42) 48%, rgba(10,10,10,0.10) 62%, rgba(10,10,10,0.55) 100%),
linear-gradient(0deg, rgba(8,8,8,0.88) 0%, rgba(10,10,10,0.30) 38%, rgba(10,10,10,0) 60%),
radial-gradient(110% 80% at 30% 60%, rgba(212,175,55,0.08) 0%, rgba(212,175,55,0) 60%) !important;
}
@media (max-width: 1080px) {
.hero-overlay {
background:
linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.85) 60%, rgba(10,10,10,0.96) 100%),
radial-gradient(120% 80% at 50% 30%, rgba(212,175,55,0.10) 0%, rgba(212,175,55,0) 70%) !important;
}
}
/* === LEGACY .book-widget* (unused — kept as no-op stubs) === */
.book-widget-wrap, .book-widget {
position: relative;
margin-top: 0;
z-index: 6;
padding: 0;
display: none;
}
.bw-strip {
display: flex;
align-items: center;
gap: var(--s-3);
padding: 10px var(--s-5);
background: linear-gradient(90deg, var(--gold) 0%, #E8C658 50%, var(--gold-dark) 100%);
color: var(--bg);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
}
.bw-strip svg { width: 14px; height: 14px; }
.bw-strip-spacer { flex: 1; }
.bw-strip-link {
color: var(--bg);
text-decoration: underline;
font-weight: 700;
}
.bw-grid {
display: grid;
grid-template-columns: 1.2fr 1.2fr 1fr 1fr 0.7fr auto;
gap: 1px;
background: rgba(212,175,55,0.12);
}
.bw-cell {
position: relative;
padding: var(--s-4) var(--s-5);
background: rgba(20,20,20,0.95);
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.bw-cell:focus-within {
background: rgba(28,28,28,0.98);
box-shadow: inset 0 -2px 0 var(--gold);
}
.bw-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--gold);
text-transform: uppercase;
display: flex;
align-items: center;
gap: 6px;
}
.bw-label svg { width: 12px; height: 12px; opacity: 0.75; }
.bw-input,
.bw-select {
width: 100%;
background: transparent;
border: none;
color: var(--text);
font-family: var(--font-display);
font-size: 15px;
font-weight: 500;
padding: 4px 0 0;
outline: none;
letter-spacing: -0.01em;
}
.bw-input::placeholder { color: rgba(245,245,240,0.32); }
.bw-input::-webkit-calendar-picker-indicator { color-scheme: dark; opacity: 0.6; cursor: pointer; }
.bw-select { color-scheme: dark; }
.bw-cell-time {
display: flex;
align-items: baseline;
gap: 8px;
}
.bw-cell-time .bw-input { width: auto; flex: 1; }
.bw-cell-time .bw-input.bw-time { max-width: 88px; opacity: 0.85; }
.bw-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--muted);
text-transform: uppercase;
cursor: pointer;
padding: 4px 0;
user-select: none;
}
.bw-toggle input { display: none; }
.bw-toggle-box {
width: 14px; height: 14px;
border: 1px solid var(--gold-dark);
border-radius: 3px;
position: relative;
flex-shrink: 0;
transition: all var(--fast) var(--ease);
}
.bw-toggle input:checked + .bw-toggle-box {
background: var(--gold);
border-color: var(--gold);
}
.bw-toggle input:checked + .bw-toggle-box::after {
content: "";
position: absolute;
top: 2px; left: 4px;
width: 4px; height: 8px;
border: solid var(--bg);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.bw-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 var(--s-8);
background: var(--gold);
color: var(--bg);
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: all var(--fast) var(--ease);
white-space: nowrap;
}
.bw-cta:hover { background: #E8C658; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4); }
.bw-cta-ico { font-size: 18px; margin-left: 8px; }
.bw-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s-5);
flex-wrap: wrap;
padding: var(--s-3) var(--s-5);
border-top: 1px solid rgba(212,175,55,0.1);
background: rgba(0,0,0,0.3);
}
.bw-foot-item {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--muted);
text-transform: uppercase;
}
.bw-foot-item .gold { color: var(--gold); }
.bw-foot-link {
color: var(--gold);
text-decoration: underline;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.15em;
}
@media (max-width: 1080px) {
.bw-grid { grid-template-columns: 1fr 1fr 1fr; }
.bw-cell-cta { grid-column: span 3; }
.bw-cta { width: 100%; padding: var(--s-5); }
}
@media (max-width: 640px) {
.book-widget-wrap { margin-top: calc(-1 * var(--s-12)); }
.bw-grid { grid-template-columns: 1fr 1fr; }
.bw-cell-cta { grid-column: span 2; }
.bw-strip { font-size: 9px; padding: 8px var(--s-4); }
}
/* === CATEGORY TABS (info1 inspired) === */
.cat-tabs-section { padding: var(--s-16) 0 var(--s-8); }
.cat-tabs-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--s-6);
flex-wrap: wrap;
margin-bottom: var(--s-8);
}
.cat-tabs-head h2 {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(32px, 5vw, 56px);
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.cat-tabs-head h2 .gold-i { color: var(--gold); font-family: var(--font-display); font-style: italic; font-weight: 600; }
.cat-tabs-sub {
max-width: 460px;
font-size: 14px;
color: var(--muted);
line-height: 1.55;
}
.cat-tabs {
display: flex;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid rgba(212,175,55,0.15);
padding-bottom: 0;
margin-bottom: var(--s-8);
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
position: relative;
padding: 14px var(--s-6);
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--muted);
background: transparent;
border: none;
cursor: pointer;
white-space: nowrap;
letter-spacing: -0.005em;
transition: color var(--fast) var(--ease);
}
.cat-tab small {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 400;
margin-left: 6px;
opacity: 0.6;
}
.cat-tab:hover { color: var(--text); }
.cat-tab.is-active { color: var(--gold); }
.cat-tab.is-active::after {
content: "";
position: absolute;
bottom: -1px; left: 0; right: 0;
height: 2px;
background: var(--gold);
box-shadow: 0 0 12px var(--gold);
}
.cat-pane { display: none; }
.cat-pane.is-active { display: block; animation: cat-fade var(--med) var(--ease); }
@keyframes cat-fade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.cat-pane-blurb {
font-size: 14px;
color: var(--muted);
margin-bottom: var(--s-5);
line-height: 1.55;
}
.cat-pane-blurb strong { color: var(--text); }
/* === SCROLL STORY CHAPTERS (pinned) === */
.story { position: relative; background: var(--bg); }
.story-chapter { position: relative; height: 200vh; }
.story-chapter .chapter-stage {
position: sticky;
top: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.chapter-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: brightness(0.45) saturate(1.1);
transform: scale(1.05);
will-change: transform, opacity;
}
.chapter-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.3) 50%, rgba(10,10,10,0.85) 100%);
}
.chapter-content {
position: relative;
text-align: center;
z-index: 2;
max-width: 880px;
padding: 0 var(--gutter);
}
.chapter-num {
display: inline-block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gold);
text-transform: uppercase;
padding: 6px 14px;
border: 1px solid rgba(212,175,55,0.3);
border-radius: var(--r-full);
background: rgba(10,10,10,0.5);
backdrop-filter: blur(10px);
margin-bottom: var(--s-5);
}
.chapter-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(48px, 8vw, 120px);
line-height: 0.92;
letter-spacing: -0.03em;
text-transform: uppercase;
margin-bottom: var(--s-5);
}
.chapter-title .gold-i { color: var(--gold); font-family: var(--font-display); font-style: italic; font-weight: 600; }
.chapter-sub {
font-size: clamp(15px, 1.8vw, 22px);
color: var(--text);
opacity: 0.85;
max-width: 620px;
margin: 0 auto var(--s-6);
line-height: 1.5;
}
.chapter-stat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-5);
margin-top: var(--s-8);
}
.chapter-stat {
border: 1px solid rgba(255,255,255,0.08);
background: rgba(20,20,20,0.6);
backdrop-filter: blur(10px);
border-radius: var(--r-md);
padding: var(--s-5);
text-align: left;
}
.chapter-stat-num {
font-family: var(--font-brutal);
font-size: clamp(36px, 5vw, 64px);
line-height: 0.9;
color: var(--gold);
}
.chapter-stat-cap {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--muted);
text-transform: uppercase;
margin-top: 4px;
}
/* JS-controlled scroll progress (--p = 0..1) */
.story-chapter { --p: 0; }
.story-chapter .chapter-bg {
transform: scale(calc(1.05 + var(--p) * 0.15));
opacity: calc(1 - var(--p) * 0.35);
}
.story-chapter .chapter-content {
opacity: calc(1 - var(--p) * 1.3);
transform: translateY(calc(var(--p) * -80px));
}
@media (max-width: 720px) {
.chapter-stat-grid { grid-template-columns: 1fr; }
}
/* === FLEET GRID — 9 cards layout polish === */
@media (min-width: 1100px) {
.fleet-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) and (min-width: 720px) {
.fleet-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
.fleet-grid { grid-template-columns: 1fr; }
}
/* "Скоро" overlay for cars without photos */
.card-photo.is-coming::after {
content: "СНИМКИ СКОРО";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(10,10,10,0.55);
color: var(--gold);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
z-index: 1;
}
/* "NEW 2025" pill in card-tag */
.card-tag .pill-new {
display: inline-block;
padding: 2px 8px;
margin-left: 6px;
background: var(--gold);
color: var(--bg);
border-radius: var(--r-sm);
font-size: 9px;
letter-spacing: 0.18em;
font-weight: 700;
}
/* Currency emphasizer */
.price-num .cur {
font-size: 0.55em;
margin-left: 3px;
opacity: 0.7;
font-weight: 400;
vertical-align: super;
}
/* Fleet/booking card category badge */
.card-cat-mini {
display: inline-flex;
gap: 6px;
align-items: center;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
color: var(--muted);
text-transform: uppercase;
margin-top: var(--s-3);
}
.card-cat-mini .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
/* Hide blue progress-pill on small screens to free space */
@media (max-width: 720px) {
.progress-pill { padding: 4px 8px; }
.pill-bar { width: 32px; }
.pill-cta { display: none; }
}
/* ============================================
v3 ADDITIONS — UI-UX-PRO-MAX pass
Mobile sticky quick-book + hero refinements + global polish
============================================ */
/* === HERO — hide hertz widget on mobile (sticky sheet replaces it) === */
@media (max-width: 1080px) {
.hero .hertz-widget { display: none !important; }
.hero-inner { grid-template-columns: 1fr; gap: 0; align-items: center; min-height: calc(100vh - var(--header-h)); }
.hero-content {
padding-top: clamp(40px, 8vh, 80px);
padding-bottom: clamp(40px, 6vh, 80px);
}
.hero-title { font-size: clamp(48px, 11vw, 80px); }
.hero-sub { font-size: 13px; opacity: 0.85; }
.hero-watermark { font-size: 80px !important; opacity: 0.05 !important; }
.hero-sidestrip { display: none; }
.hero-rec { top: calc(var(--header-h) + 12px) !important; }
}
/* v7.2: Mobile hero — kill clutter under booking form, BMW + title + form only */
@media (max-width: 720px) {
.hero-secondary,
.trust-strip,
.hero-cue,
.hero-curtain,
.hero-watermark,
.hero-rec,
.hero-bracket { display: none !important; }
/* Push content down so BMW is visible above title */
.hero-content { padding-top: clamp(180px, 32vh, 320px) !important; }
.hero-sub { margin-bottom: var(--s-5); }
.hero-mini-book { margin-top: var(--s-4); }
}
/* Custom cursor → off on touch devices */
@media (hover: none), (pointer: coarse) {
.cursor { display: none !important; }
body { cursor: auto !important; }
* { cursor: auto !important; }
}
/* === GLOBAL POLISH === */
/* Focus rings — accessibility critical */
*:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
border-radius: 4px;
}
button:focus-visible,
a:focus-visible,
[role="tab"]:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 0;
}
/* Press feedback on cards (scale 0.98) */
.fleet-card {
transition: transform 320ms var(--ease), box-shadow 320ms var(--ease), border-color 320ms var(--ease);
}
.fleet-card:active { transform: scale(0.985); }
/* Better touch targets — card arrows, FAQ toggles */
.card-arrow {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.faq-q {
min-height: 56px; /* exceeds 44 floor for content density */
}
/* Smoother section reveals — stagger handled by JS */
[data-reveal] {
transition: opacity 700ms cubic-bezier(0.16, 1, 0.3, 1), transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Reduced motion — respect user preference */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero-still, .hero-video, .hero-bg, .hero-content { transform: none !important; filter: none !important; }
.story-chapter .chapter-bg, .story-chapter .chapter-content { transform: none !important; }
}
/* No horizontal scroll guard */
html, body { overflow-x: hidden; }
/* Mobile: tighten section padding for better content density */
@media (max-width: 720px) {
.container { padding-left: 16px; padding-right: 16px; }
.stats-grid { gap: 16px; }
.stat-num { font-size: clamp(36px, 9vw, 48px) !important; }
.section-head { margin-bottom: var(--s-6) !important; }
.section-title, .cat-tabs-head h2, .loyalty-title, .cta-title {
font-size: clamp(36px, 9vw, 56px) !important;
}
.cat-tabs { gap: 0; }
.cat-tab { padding: 12px 14px; font-size: 12px; }
.cat-tab small { font-size: 9px; }
.marquee { font-size: 11px; }
.pillars-grid { gap: 16px; }
.pillar { padding: var(--s-5); }
.big-cta .cta-card { padding: var(--s-7) !important; }
.footer-grid { gap: var(--s-5); }
/* Hero scroll cue more visible */
.hero-cue { bottom: 100px !important; }
}
/* Snappy scroll on iOS */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Tap target — min 44px for all interactive */
.btn-sm { min-height: 40px; }
.btn-md { min-height: 44px; }
.btn-lg { min-height: 52px; }
.cat-tab { min-height: 44px; }
/* Smoother card hover (desktop only) */
@media (hover: hover) and (pointer: fine) {
.fleet-card:hover {
transform: translateY(-4px);
border-color: rgba(212,175,55,0.35);
box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.15);
}
.car-chip:hover { transform: translateY(-2px); }
.btn-gold:hover { box-shadow: 0 8px 24px rgba(212,175,55,0.35); }
}
/* Disable hero parallax under 720px to avoid jank */
@media (max-width: 720px) {
.hero-still, .hero-video {
transform: none !important;
filter: saturate(1.06) contrast(1.05) brightness(0.92) !important;
}
}
/* Better hero content reveal on mobile */
@media (max-width: 1080px) {
.hero-content > * { opacity: 0; transform: translateY(20px); animation: hero-rise 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.hero-content > *:nth-child(1) { animation-delay: 200ms; }
.hero-content > *:nth-child(2) { animation-delay: 320ms; }
.hero-content > *:nth-child(3) { animation-delay: 440ms; }
.hero-content > *:nth-child(4) { animation-delay: 560ms; }
@keyframes hero-rise {
to { opacity: 1; transform: translateY(0); }
}
}
/* Force eyebrow to be touch-readable on mobile */
@media (max-width: 720px) {
.eyebrow, .eyebrow-pill { font-size: 10px; letter-spacing: 0.22em; padding: 6px 10px; }
}
/* SafeArea respect on iPhone notch */
@supports (padding: max(0px)) {
.site-header .header-inner { padding-top: max(0px, env(safe-area-inset-top, 0)); }
}
/* Mobile-only "Резервирай" CTA in header → sticky */
@media (max-width: 720px) {
.header-cta { padding: 8px 14px !important; font-size: 11px !important; }
}
/* === HERO HEADLINE GOLD ACCENT — breathing glow === */
.hero-title .gold {
position: relative;
text-shadow: 0 0 40px rgba(212,175,55,0.25);
animation: gold-breathe 5.4s ease-in-out infinite;
}
@keyframes gold-breathe {
0%, 100% { text-shadow: 0 0 40px rgba(212,175,55,0.18); }
50% { text-shadow: 0 0 60px rgba(212,175,55,0.45), 0 0 90px rgba(212,175,55,0.18); }
}
@media (prefers-reduced-motion: reduce) { .hero-title .gold { animation: none; } }
/* Hero-cue — more visible, animated */
.hero-cue {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
bottom: 32px !important;
left: 50% !important;
transform: translateX(-50%);
opacity: 0.85;
}
.hero-cue .cue-line {
width: 1px;
height: 36px;
background: linear-gradient(180deg, transparent, var(--gold) 50%, transparent);
position: relative;
overflow: hidden;
}
.hero-cue .cue-line::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent, var(--gold) 50%, transparent);
animation: cue-slide 1.6s ease-in-out infinite;
}
@keyframes cue-slide {
0% { transform: translateY(-100%); opacity: 0; }
50% { opacity: 1; }
100% { transform: translateY(100%); opacity: 0; }
}
.hero-cue .cue-text {
font-size: 10px;
letter-spacing: 0.32em;
color: var(--gold);
opacity: 0.7;
}
/* === SECTION REVEAL — softer easing === */
[data-reveal] {
opacity: 0;
transform: translateY(28px);
}
[data-reveal].is-revealed {
opacity: 1;
transform: translateY(0);
}
/* Marquee — subtle gradient fade at edges */
.marquee {
position: relative;
}
.marquee::before, .marquee::after {
content: "";
position: absolute;
top: 0; bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.marquee::before {
left: 0;
background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.marquee::after {
right: 0;
background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}
/* === LOYALTY MULTIPLIER — gentle float === */
.loyalty-multiplier {
animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) { .loyalty-multiplier { animation: none; } }
/* === BIG CTA — animated star === */
.cta-star {
animation: spin-slow 18s linear infinite;
display: inline-block;
}
@keyframes spin-slow {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .cta-star { animation: none; } }
/* === Stat numbers — gold gradient === */
.stat-num {
background: linear-gradient(180deg, #FFE9A0 0%, #D4AF37 60%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* === Card photo — subtle zoom on hover/scroll-in === */
.card-photo {
overflow: hidden;
position: relative;
}
.card-photo .photo-img {
transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
.fleet-card:hover .photo-img { transform: scale(1.06); }
}
.fleet-card.is-revealed .photo-img { animation: photo-settle 1200ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes photo-settle {
from { transform: scale(1.1); }
to { transform: scale(1); }
}
/* === Hero rec dot — pulse === */
.hero-rec .rec-dot { animation: pulse-rec 1.4s ease-in-out infinite; }
@keyframes pulse-rec {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,80,80,0.5); transform: scale(1); }
50% { box-shadow: 0 0 0 6px rgba(255,80,80,0); transform: scale(1.2); }
}
/* === FAQ smoother expand === */
.faq-q[aria-expanded="true"] .faq-toggle { transform: rotate(45deg); }
.faq-toggle { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; }
/* === BUTTON gold — shine sweep on hover === */
.btn-gold {
position: relative;
overflow: hidden;
}
.btn-gold::after {
content: "";
position: absolute;
top: 0; left: -120%;
width: 60%;
height: 100%;
background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.28) 50%, transparent 70%);
transition: left 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-gold:hover::after { left: 130%; }
/* === HERO BMW M5 G90 — strong brand mention === */
.hero-watermark {
letter-spacing: 0.1em;
font-weight: 800;
}
/* === Story chapter exit fix === */
.story-chapter .chapter-stage { will-change: transform; }
/* === FORM INPUTS — calmer focus glow === */
.hw-field:focus-within,
.bf-field:focus-within {
box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
/* === Loading skeletons for car photos that are missing === */
.card-photo.is-coming .photo-img {
background: linear-gradient(135deg, #1a1a1a 0%, #232323 50%, #1a1a1a 100%);
background-size: 200% 100%;
animation: skel 2.4s ease-in-out infinite;
}
@keyframes skel {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) { .card-photo.is-coming .photo-img { animation: none; } }
/* === Header scroll behavior — shrink + glow === */
.site-header {
transition: padding 280ms var(--ease), background 280ms var(--ease), backdrop-filter 280ms var(--ease);
}
.site-header.is-scrolled {
background: rgba(10,10,10,0.85);
backdrop-filter: blur(16px) saturate(150%);
-webkit-backdrop-filter: blur(16px) saturate(150%);
border-bottom: 1px solid rgba(212,175,55,0.12);
}
/* === Sliding-in reveal directions === */
[data-reveal][data-reveal-dir="left"] { transform: translateX(-32px); }
[data-reveal][data-reveal-dir="right"] { transform: translateX(32px); }
[data-reveal][data-reveal-dir="left"].is-revealed,
[data-reveal][data-reveal-dir="right"].is-revealed { transform: translateX(0); }
/* === Tabs — subtle pulse on the active gold underline === */
.cat-tab.is-active::after {
animation: tab-glow 2.4s ease-in-out infinite;
}
@keyframes tab-glow {
0%, 100% { box-shadow: 0 0 12px var(--gold); }
50% { box-shadow: 0 0 24px var(--gold), 0 0 48px rgba(212,175,55,0.4); }
}
@media (prefers-reduced-motion: reduce) { .cat-tab.is-active::after { animation: none; } }
/* === Map frame — gentle border breathing === */
.map-frame {
border: 1px solid rgba(212,175,55,0.15);
transition: border-color 480ms var(--ease), box-shadow 480ms var(--ease);
}
.map-frame:hover {
border-color: rgba(212,175,55,0.35);
box-shadow: 0 0 60px rgba(212,175,55,0.08);
}
/* === Eyebrow pill — soft border glow === */
.eyebrow-pill {
border: 1px solid rgba(212,175,55,0.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
/* ============================================================
v4 polish — UI/UX Pro Max audit fixes
- Replace emoji icons with SVG (no-emoji-icons rule §4)
- Touch responsiveness (tap-delay, touch-action manipulation)
- Inline validation styling
- State clarity (hover/active distinct from default)
============================================================ */
/* Inline spec icon used in fleet card spec list */
.spec-icon {
width: 14px;
height: 14px;
display: inline-block;
vertical-align: -2px;
margin-right: 6px;
color: var(--gold);
flex-shrink: 0;
}
.card-specs span {
display: inline-flex;
align-items: center;
white-space: nowrap;
}
/* Inline button icon (used in CTA links with text) */
.btn-icon {
width: 16px;
height: 16px;
display: inline-flex;
margin-right: 8px;
flex-shrink: 0;
vertical-align: -3px;
color: currentColor;
}
.btn { display: inline-flex; align-items: center; justify-content: center; }
/* Reduce 300ms tap delay on all interactive surfaces (priority §2 tap-delay) */
a, button, input, select, textarea, [role="button"], .btn, .fleet-card, .cat-tab, .faq-q, .card-arrow {
touch-action: manipulation;
}
/* Image optimization — fade-in for fleet card photos when bg loads */
.card-photo .photo-img {
background-color: #1a1a1a;
}
.card-photo:not(.is-coming) .photo-img {
animation: photo-settle 600ms ease-out both;
}
@keyframes photo-settle {
from { opacity: 0; transform: scale(1.04); }
to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.card-photo:not(.is-coming) .photo-img { animation: none; }
}
/* Form a11y — error / valid state indicators (priority §8) */
input:invalid:not(:placeholder-shown):not(:focus),
select:invalid:not(:focus) {
border-color: rgba(244, 113, 113, 0.5);
}
input:valid:not(:placeholder-shown),
select:valid {
/* Don't flag as visually "valid" — too noisy. Just no error. */
}
/* Hover state clarity — fleet card lifts subtly (state-clarity §4) */
@media (hover: hover) and (pointer: fine) {
.fleet-card { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease, box-shadow 280ms ease; }
.fleet-card:hover {
transform: translateY(-4px);
border-color: rgba(212, 175, 55, 0.32);
box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(212, 175, 55, 0.08);
}
.fleet-card:hover .card-arrow {
background: var(--gold);
color: var(--bg);
transform: translateX(2px) translateY(-2px);
}
}
/* Disabled-state clarity (priority §8 disabled-states) */
button:disabled,
.btn:disabled,
input:disabled,
select:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
/* Improved press feedback for ALL primary buttons (scale-feedback §7) */
.btn-gold:active,
.btn-ghost:active,
.cat-tab:active {
transform: scale(0.97);
transition: transform 80ms ease-out;
}
/* Fleet card "is-coming" — clear visual signal with text overlay */
.card-photo.is-coming::after {
content: "СНИМКИ СКОРО";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.28em;
color: rgba(212, 175, 55, 0.7);
text-transform: uppercase;
background: linear-gradient(180deg, rgba(20,20,20,0.45), rgba(13,13,13,0.65));
pointer-events: none;
z-index: 2;
}
/* Prevent horizontal overflow site-wide (priority §5 horizontal-scroll)
Use overflow-x: clip on body only (preserves sticky on hero). */
body { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
/* Tap-feedback latency (priority §3 input-latency, tap-feedback-speed) */
.fleet-card:active {
transition: transform 60ms ease-out;
}
/* Scrollbar polish for desktop dark theme */
@media (hover: hover) {
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(212,175,55,0.18), rgba(212,175,55,0.32));
border-radius: 6px;
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(212,175,55,0.38), rgba(212,175,55,0.52));
}
}
/* Selection color — gold tint */
::selection { background: rgba(212, 175, 55, 0.32); color: #fff; }
::-moz-selection { background: rgba(212, 175, 55, 0.32); color: #fff; }
/* ============================================================
v5 — HERO CLEAN-UP + QUICK BOOK BAND + FLEET PHOTO INFO1 STYLE
- Hero: single primary CTA + secondary phone (no booking widget)
- Quick Book: dedicated horizontal section before fleet
- Fleet photo: clean booking.com-style cream backdrop
============================================================ */
/* HERO — centered single-column layout (no widget) */
.hero-inner { display: grid; place-items: center; }
.hero-content-centered {
text-align: center;
max-width: 880px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-5);
z-index: 3;
}
.hero-content-centered .eyebrow-pill { margin-bottom: 0; }
.hero-content-centered .hero-title { margin: 0; max-width: 14ch; }
.hero-content-centered .hero-sub { margin: 0; opacity: 0.86; }
.hero-actions {
display: flex;
gap: var(--s-3);
flex-wrap: wrap;
justify-content: center;
margin-top: var(--s-3);
}
.btn-icon-leading {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
font-size: 15px;
letter-spacing: 0.04em;
}
.btn-icon-leading .btn-icon {
width: 18px;
height: 18px;
margin: 0;
flex-shrink: 0;
}
/* Hide old hertz-widget styles if any leak through */
.hero .hertz-widget { display: none !important; }
.hero-content-centered .trust-strip {
margin-top: var(--s-2);
display: flex;
flex-wrap: wrap;
gap: var(--s-4);
justify-content: center;
list-style: none;
padding: 0;
}
.hero-content-centered .trust-strip li {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.18em;
color: rgba(255,255,255,0.7);
text-transform: uppercase;
}
@media (max-width: 720px) {
.hero-content-centered { gap: var(--s-4); padding: 0 var(--s-4); }
.hero-actions { flex-direction: column; width: 100%; max-width: 360px; }
.hero-actions .btn { width: 100%; justify-content: center; }
.hero-content-centered .trust-strip { gap: var(--s-3); font-size: 11px; }
}
/* ============================================================
QUICK BOOK BAND — horizontal Hertz-style booking
============================================================ */
.qb-band {
padding: var(--s-12) 0 var(--s-10);
background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
position: relative;
border-top: 1px solid rgba(212,175,55,0.08);
border-bottom: 1px solid rgba(212,175,55,0.08);
}
.qb-band::before {
content: "";
position: absolute;
top: 0; left: 50%; transform: translateX(-50%);
width: 200px; height: 1px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.qb-head {
text-align: center;
margin-bottom: var(--s-7);
}
.qb-head .section-num { display: block; margin-bottom: var(--s-3); color: rgba(212,175,55,0.7); }
.qb-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(32px, 4.5vw, 56px);
line-height: 0.96;
letter-spacing: -0.03em;
text-transform: uppercase;
margin: 0;
}
.qb-title .gold-i {
color: var(--gold);
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
}
.qb-form {
background: linear-gradient(180deg, rgba(20,20,20,0.92), rgba(13,13,13,0.95));
border: 1px solid rgba(212,175,55,0.18);
border-radius: var(--r-xl);
padding: var(--s-6);
position: relative;
overflow: hidden;
box-shadow: 0 32px 64px -32px rgba(0,0,0,0.6);
}
.qb-form::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #B8902C 0%, #D4AF37 50%, #FFE9A0 100%);
}
.qb-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 0.9fr auto;
gap: 8px;
align-items: stretch;
}
.qb-field {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 18px;
background: rgba(10,10,10,0.55);
border: 1px solid rgba(212,175,55,0.14);
border-radius: var(--r-md);
transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
cursor: pointer;
min-height: 64px;
}
.qb-field:hover { border-color: rgba(212,175,55,0.32); background: rgba(15,15,15,0.7); }
.qb-field:focus-within { border-color: var(--gold); background: rgba(20,17,8,0.6); }
.qb-icon {
width: 22px;
height: 22px;
color: var(--gold);
flex-shrink: 0;
}
.qb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.qb-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: rgba(212,175,55,0.7);
text-transform: uppercase;
white-space: nowrap;
}
.qb-value {
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--text);
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qb-text input,
.qb-text select {
background: transparent;
border: 0;
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
outline: 0;
padding: 0;
width: 100%;
cursor: pointer;
}
.qb-text input::-webkit-calendar-picker-indicator,
.qb-text select::-ms-expand { filter: invert(0.6) sepia(1) saturate(3) hue-rotate(20deg); cursor: pointer; }
.qb-cta {
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.08em;
padding: 0 28px;
white-space: nowrap;
align-self: stretch;
}
.qb-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--s-5);
margin: var(--s-5) 0 0;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
}
.qb-trust span { display: inline-flex; align-items: center; gap: 6px; }
.qb-trust .icon-xs { width: 12px; height: 12px; }
@media (max-width: 980px) {
.qb-grid { grid-template-columns: 1fr 1fr; }
.qb-cta { grid-column: 1 / -1; padding: 16px; min-height: 56px; }
}
@media (max-width: 560px) {
.qb-band { padding: var(--s-8) 0 var(--s-7); }
.qb-form { padding: var(--s-4); }
.qb-grid { grid-template-columns: 1fr; }
.qb-trust { gap: var(--s-3); font-size: 10px; }
.qb-trust span:nth-child(n+3) { display: none; }
}
/* ============================================================
FLEET CARD PHOTO — info1.jpg booking.com style
Clean cream backdrop, contained car, subtle product feel
============================================================ */
.card-photo {
position: relative;
/* Cream-warm backdrop instead of dark — like a showroom display */
background:
radial-gradient(ellipse at 50% 60%, #faf7f0 0%, #ede8dc 60%, #d8d2c2 100%);
overflow: hidden;
isolation: isolate;
}
.card-photo .photo-img {
/* Contain the car on the backdrop — booking.com product look */
background-size: cover;
background-position: center 55%;
background-repeat: no-repeat;
/* Brighten + slightly desaturate for product-shot feel */
filter: brightness(1.08) contrast(1.04) saturate(0.94);
position: absolute;
inset: 0;
/* Soft fade at edges to blend into cream backdrop (kills urban backgrounds) */
-webkit-mask-image: radial-gradient(ellipse at 50% 55%, #000 45%, rgba(0,0,0,0.7) 70%, transparent 100%);
mask-image: radial-gradient(ellipse at 50% 55%, #000 45%, rgba(0,0,0,0.7) 70%, transparent 100%);
}
/* Subtle floor shadow under the car (booking.com signature) */
.card-photo::after {
content: "";
position: absolute;
bottom: 8%;
left: 12%;
right: 12%;
height: 8%;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.18) 0%, transparent 70%);
filter: blur(6px);
z-index: 1;
pointer-events: none;
}
/* Photo-meta tag — adapt to light bg */
.card-photo .photo-meta {
background: rgba(20,20,20,0.85);
color: var(--gold);
backdrop-filter: blur(8px);
z-index: 3;
}
/* IS-COMING — blueprint silhouette on cream */
.card-photo.is-coming {
background:
radial-gradient(ellipse at 50% 60%, #f0ebde 0%, #e0dac8 60%, #c9c2af 100%);
}
.card-photo.is-coming::before {
content: "";
position: absolute;
inset: 18% 12%;
background: var(--blueprint-svg, url("data:image/svg+xml;utf8,"));
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
/* Override the v4 ::after text "СНИМКИ СКОРО" — replace with bottom badge */
.card-photo.is-coming::after {
content: "СНИМКА СКОРО";
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
inset: auto auto 14px auto;
display: inline-block;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.32em;
color: rgba(60, 50, 25, 0.6);
text-transform: uppercase;
background: rgba(255, 250, 235, 0.7);
border: 1px solid rgba(184, 144, 44, 0.3);
padding: 4px 10px;
border-radius: 999px;
height: auto;
width: auto;
filter: none;
z-index: 2;
}
/* SUV-specific blueprint (taller/boxier silhouette) */
.fleet-card[data-cat~="suv"] .card-photo.is-coming::before,
.fleet-card[data-cat~="seven"] .card-photo.is-coming::before {
background-image: url("data:image/svg+xml;utf8,");
}
/* Photo settle adjustment — preserve filter */
.card-photo:not(.is-coming) .photo-img {
animation: photo-settle-info1 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes photo-settle-info1 {
from { opacity: 0; transform: scale(1.06); filter: brightness(1.2) contrast(1) saturate(0.7) blur(6px); }
to { opacity: 1; transform: scale(1); filter: brightness(1.08) contrast(1.04) saturate(0.94) blur(0); }
}
@media (prefers-reduced-motion: reduce) {
.card-photo:not(.is-coming) .photo-img { animation: none; }
}
/* Ensure card-photo has a proper aspect-ratio so backdrop is consistent */
.card-photo { aspect-ratio: 16 / 10; }
/* Fleet card border tweak — works better on light photo card */
.fleet-card { background: linear-gradient(180deg, rgba(18,18,18,0.92), rgba(10,10,10,0.96)); }
/* Hide old hertz widget completely, replaced by .qb-band */
.hertz-widget { display: none !important; }
/* ============================================================
v6 · 2026-04-27 — Hero Mini-Book + QB Pro (info2.jpg / Hertz)
============================================================ */
/* ---------- HERO MINI-BOOK (compact in hero) ---------- */
.hero-content-centered .hero-mini-book {
display: grid;
grid-template-columns: 1fr 8px 1fr 8px 1.3fr auto;
align-items: stretch;
gap: 0;
width: min(720px, 100%);
margin: var(--s-4) auto 0;
padding: 6px;
background: rgba(20, 20, 22, 0.78);
backdrop-filter: blur(20px) saturate(140%);
-webkit-backdrop-filter: blur(20px) saturate(140%);
border: 1px solid rgba(184, 144, 44, 0.34);
border-radius: 14px;
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.5),
0 1px 0 rgba(255, 255, 255, 0.04) inset;
position: relative;
z-index: 4;
}
.hero-content-centered .hero-mini-book::before {
content: "";
position: absolute;
inset: -1px;
border-radius: 14px;
padding: 1px;
background: linear-gradient(135deg, rgba(231, 188, 87, 0.5), rgba(184, 144, 44, 0.0) 50%, rgba(231, 188, 87, 0.4));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.hmb-field {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 10px;
cursor: text;
transition: background 200ms ease;
min-width: 0;
}
.hmb-field:hover { background: rgba(255, 255, 255, 0.04); }
.hmb-field:focus-within { background: rgba(231, 188, 87, 0.08); }
.hmb-icon {
width: 18px; height: 18px;
color: var(--gold);
flex-shrink: 0;
}
.hmb-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
}
.hmb-label {
font-size: 9.5px;
letter-spacing: 0.18em;
color: rgba(231, 188, 87, 0.85);
font-weight: 600;
text-transform: uppercase;
}
.hmb-field input,
.hmb-field select {
background: transparent;
border: none;
outline: none;
color: #fff;
font: 600 14px/1.2 var(--font-sans, "Space Grotesk"), system-ui, sans-serif;
padding: 0;
width: 100%;
cursor: pointer;
color-scheme: dark;
}
.hmb-field input::-webkit-calendar-picker-indicator {
filter: invert(0.65) sepia(1) saturate(3) hue-rotate(15deg);
cursor: pointer;
}
.hmb-field-select { cursor: pointer; }
.hmb-field-select select {
appearance: none;
-webkit-appearance: none;
padding-right: 16px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.hmb-sep {
display: block;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(231, 188, 87, 0.28), transparent);
margin: 8px 0;
}
.hmb-cta {
padding: 0 22px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: 10px;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
/* Hero secondary links row */
.hero-content-centered .hero-secondary {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px 12px;
margin-top: var(--s-3);
font-size: 13px;
color: rgba(255, 255, 255, 0.78);
}
.hero-phone-link,
.hero-existing-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.88);
text-decoration: none;
padding: 6px 12px;
border-radius: 8px;
font-weight: 500;
transition: color 180ms ease, background 180ms ease;
}
.hero-phone-link:hover,
.hero-existing-link:hover { color: var(--gold); background: rgba(231, 188, 87, 0.07); }
.hero-phone-link svg,
.hero-existing-link svg { color: var(--gold); width: 14px; height: 14px; }
.hero-secondary-sep { color: rgba(255, 255, 255, 0.3); user-select: none; }
/* Hero mini-book responsive: 2-col → stacked */
@media (max-width: 720px) {
.hero-content-centered .hero-mini-book {
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 8px;
}
.hero-content-centered .hero-mini-book .hmb-sep { display: none; }
.hero-content-centered .hero-mini-book .hmb-field-select { grid-column: 1 / -1; }
.hero-content-centered .hero-mini-book .hmb-cta { grid-column: 1 / -1; padding: 12px; min-height: 48px; justify-content: center; }
}
/* Disable old big hero-actions block since mini-book replaces it */
.hero-content-centered .hero-actions { display: none; }
/* ---------- QB FORM PRO (info2.jpg full Hertz form) ---------- */
.qb-band { padding: var(--s-10) 0 var(--s-10); }
.qb-head .qb-sub {
margin-top: 6px;
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
letter-spacing: 0.04em;
}
.qb-form-pro {
max-width: 720px;
margin: var(--s-6) auto 0;
}
.qb-pro-card {
background: linear-gradient(180deg, #fafaf8 0%, #f3f0e8 100%);
color: #1a1a1a;
border: 1px solid rgba(184, 144, 44, 0.18);
border-radius: 18px;
padding: 0;
overflow: hidden;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.4),
0 2px 0 rgba(255, 255, 255, 0.6) inset;
display: flex;
flex-direction: column;
}
/* Hertz-style yellow notice strip */
.qb-notice {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
background: linear-gradient(90deg, #f5c842 0%, #e7bc57 100%);
color: #1a1a1a;
font-size: 12px;
letter-spacing: 0.02em;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.qb-notice-icon { width: 16px; height: 16px; color: #1a1a1a; flex-shrink: 0; }
.qb-notice strong { font-weight: 800; }
.qb-pro-card > .qb-pro-field,
.qb-pro-card > .qb-pro-row {
padding: 14px 22px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.qb-pro-card > .qb-pro-field:last-of-type,
.qb-pro-card > .qb-pro-row:last-of-type { border-bottom: none; }
.qb-pro-row {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 14px;
align-items: end;
}
.qb-pro-row .qb-pro-field { padding: 0; border: none; }
.qb-pro-label {
display: block;
font-size: 13px;
font-weight: 700;
color: #1a1a1a;
margin-bottom: 6px;
letter-spacing: 0.01em;
}
.qb-pro-input-wrap {
position: relative;
display: flex;
align-items: center;
background: #fff;
border: 1.5px solid rgba(0, 0, 0, 0.18);
border-radius: 8px;
padding: 0 14px;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.qb-pro-input-wrap:focus-within {
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(231, 188, 87, 0.18);
}
.qb-pro-icon {
width: 18px; height: 18px;
color: rgba(0, 0, 0, 0.55);
flex-shrink: 0;
}
.qb-pro-input {
flex: 1;
background: transparent;
border: none;
outline: none;
padding: 13px 0 13px 12px;
font: 600 15px/1.3 var(--font-sans, "Space Grotesk"), system-ui, sans-serif;
color: #1a1a1a;
min-width: 0;
width: 100%;
}
.qb-pro-input-readonly {
cursor: default;
font-weight: 700;
}
.qb-pro-input::placeholder { color: rgba(0, 0, 0, 0.4); font-weight: 500; }
.qb-pro-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.qb-pro-input::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.qb-pro-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
padding-right: 22px;
}
.qb-pro-badge {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.14em;
color: var(--gold);
background: rgba(231, 188, 87, 0.12);
padding: 4px 8px;
border-radius: 4px;
pointer-events: none;
}
/* Toggle (return to different location) */
.qb-toggle {
display: inline-flex;
align-items: center;
gap: 9px;
cursor: pointer;
font-size: 13px;
color: #1a1a1a;
margin-bottom: 8px;
user-select: none;
}
.qb-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.qb-toggle-mark {
width: 18px;
height: 18px;
border: 1.6px solid rgba(0, 0, 0, 0.35);
border-radius: 4px;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
transition: border-color 160ms ease, background 160ms ease;
flex-shrink: 0;
}
.qb-toggle-mark::after {
content: "";
width: 10px;
height: 10px;
border-radius: 2px;
background: var(--gold);
transform: scale(0);
transition: transform 160ms ease;
}
.qb-toggle input:checked ~ .qb-toggle-mark {
border-color: var(--gold);
background: rgba(231, 188, 87, 0.12);
}
.qb-toggle input:checked ~ .qb-toggle-mark::after { transform: scale(1); }
.qb-toggle input:focus-visible ~ .qb-toggle-mark {
box-shadow: 0 0 0 3px rgba(231, 188, 87, 0.28);
}
.qb-return-wrap[hidden] { display: none; }
.qb-return-wrap { animation: fade-down 240ms ease both; }
@keyframes fade-down {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Foot row: Existing Reservations + Browse Vehicles CTA */
.qb-pro-foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 18px 22px;
background: linear-gradient(180deg, transparent 0%, rgba(231, 188, 87, 0.06) 100%);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.qb-existing-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: #1a1a1a;
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.3);
text-underline-offset: 3px;
font-size: 13px;
font-weight: 600;
transition: color 160ms ease, text-decoration-color 160ms ease;
}
.qb-existing-link:hover {
color: #b8902c;
text-decoration-color: #b8902c;
}
.qb-existing-link svg { color: var(--gold); width: 14px; height: 14px; }
.qb-pro-foot .qb-cta {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 14px 26px;
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.qb-pro-foot .qb-cta .btn-icon { width: 16px; height: 16px; }
/* QB Pro responsive */
@media (max-width: 640px) {
.qb-pro-row {
grid-template-columns: 1fr;
gap: 12px;
}
.qb-pro-foot {
flex-direction: column-reverse;
align-items: stretch;
}
.qb-pro-foot .qb-cta { width: 100%; justify-content: center; }
.qb-existing-link { justify-content: center; }
.qb-pro-card > .qb-pro-field,
.qb-pro-card > .qb-pro-row { padding: 12px 16px; }
.qb-notice { padding: 10px 16px; font-size: 11px; }
.qb-pro-badge { display: none; }
.qb-pro-input-readonly { font-size: 13.5px; }
}
/* Hide old qb-grid styles since qb-form-pro replaces them — qb-grid only inside non-pro fallback */
.qb-form-pro .qb-grid { display: none; }
/* ---------- v6.1 BRUTAL CINEMATIC HERO SCROLL ---------- */
/* Theater curtain bars — slide in from top + bottom on scroll
Position based on JS-set --hero-t (0..1) custom property */
.hero {
--hero-t: 0;
--hero-curtain-p: 0;
--hero-mark-p: 0;
}
.hero-curtain {
position: absolute;
left: 0;
right: 0;
z-index: 6;
pointer-events: none;
background: #000;
display: flex;
align-items: center;
overflow: hidden;
height: calc(var(--hero-curtain-p) * 38vh);
transition: none;
will-change: height;
}
.hero-curtain-top {
top: 0;
border-bottom: 1px solid rgba(231, 188, 87, 0.5);
justify-content: flex-end;
padding: 0 var(--s-6);
background: linear-gradient(180deg, #000 0%, #000 80%, rgba(231, 188, 87, 0.06) 100%);
}
.hero-curtain-bot {
bottom: 0;
border-top: 1px solid rgba(231, 188, 87, 0.5);
justify-content: flex-start;
padding: 0 var(--s-6);
background: linear-gradient(0deg, #000 0%, #000 80%, rgba(231, 188, 87, 0.06) 100%);
}
.curtain-mark {
font-size: 10px;
letter-spacing: 0.32em;
color: rgba(231, 188, 87, 0.7);
text-transform: uppercase;
font-weight: 600;
white-space: nowrap;
opacity: var(--hero-mark-p);
transform: translateX(calc((1 - var(--hero-mark-p)) * -16px));
transition: none;
}
.hero-curtain-top .curtain-mark {
align-self: flex-end;
margin-bottom: 14px;
}
.hero-curtain-bot .curtain-mark {
align-self: flex-start;
margin-top: 14px;
transform: translateX(calc((1 - var(--hero-mark-p)) * 16px));
}
/* Slash flash — single hard cut at midpoint */
.hero-slash {
position: absolute;
left: -10%;
right: -10%;
top: 50%;
height: 2px;
background: linear-gradient(90deg, transparent 0%, #fff 8%, var(--gold) 50%, #fff 92%, transparent 100%);
box-shadow:
0 0 16px rgba(231, 188, 87, 0.9),
0 0 32px rgba(231, 188, 87, 0.5);
z-index: 7;
pointer-events: none;
opacity: 0;
transform: scaleX(0.4);
transform-origin: center;
mix-blend-mode: screen;
}
/* Hero anchored — kill any old transforms that "lower" the photo */
.hero-still,
.hero-video {
transform-origin: center center;
transition: none;
will-change: transform, filter, opacity;
}
/* Mobile/reduced-motion: keep curtains thinner and disable slash flash */
@media (max-width: 720px) {
.hero-curtain { height: calc(var(--hero-curtain-p) * 26vh); }
.curtain-mark { font-size: 9px; letter-spacing: 0.22em; }
}
@media (prefers-reduced-motion: reduce) {
.hero-curtain,
.hero-slash { display: none; }
}
/* ---------- FLEET PHOTOS — Hertz studio polish v6 ---------- */
/* Whiter, more cutout-like — push toward Hertz catalog look */
.card-photo:not(.is-coming) {
background:
radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 38%),
radial-gradient(ellipse at 50% 55%, #fdfcf7 0%, #f5f1e6 55%, #e8e1ce 100%);
}
.card-photo:not(.is-coming) .photo-img {
filter: brightness(1.12) contrast(1.06) saturate(0.9);
-webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 55%, #000 32%, rgba(0,0,0,0.88) 58%, rgba(0,0,0,0.4) 82%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 75% at 50% 55%, #000 32%, rgba(0,0,0,0.88) 58%, rgba(0,0,0,0.4) 82%, transparent 100%);
}
/* Stronger floor shadow under car (Hertz signature) */
.card-photo:not(.is-coming)::after {
content: "";
position: absolute;
left: 16%;
right: 16%;
bottom: 5%;
height: 16px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 70%);
filter: blur(9px);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* ============================================================
v7 — PRO RENT-A-CAR POLISH PASS · 2026-04-27
Hero / Trust / Comparison / Testimonials / Cars / Mobile UX
============================================================ */
/* ---------- v7 hero polish ---------- */
.hero-sub {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--s-7);
max-width: 540px;
}
.hero-sub-bold {
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(16px, 1.7vw, 20px);
color: var(--text);
letter-spacing: -0.01em;
line-height: 1.4;
/* a11y: shadow ensures readability over BMW reflections / mid-tone backgrounds */
text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 2px 12px rgba(0,0,0,0.6);
}
.hero-sub-meta {
font-size: 11px;
letter-spacing: 0.22em;
/* a11y: was --muted (138,138,133) — too low contrast vs car body. Lifted + shadowed. */
color: rgba(220, 220, 215, 0.92);
text-transform: uppercase;
text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 2px 8px rgba(0,0,0,0.7);
}
/* v7: hero mini-book — refined glass card with gold corner brackets */
.hero-mini-book {
background: linear-gradient(180deg, rgba(20,20,20,0.78), rgba(10,10,10,0.86)) !important;
backdrop-filter: blur(24px) saturate(1.4);
-webkit-backdrop-filter: blur(24px) saturate(1.4);
border: 1px solid rgba(212,175,55,0.18) !important;
box-shadow:
0 1px 0 rgba(255,255,255,0.04) inset,
0 28px 56px rgba(0,0,0,0.5),
0 0 0 1px rgba(0,0,0,0.5) !important;
position: relative;
isolation: isolate;
}
.hero-mini-book::before,
.hero-mini-book::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border: 1.5px solid var(--gold);
pointer-events: none;
z-index: 2;
}
.hero-mini-book::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-mini-book::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
/* ---------- v7 Trust band ---------- */
.trust-band {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: var(--s-7) 0;
position: relative;
z-index: 5;
}
.trust-band-inner {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-8);
align-items: start;
}
.trust-cluster { display: flex; flex-direction: column; gap: var(--s-3); }
.trust-label {
font-size: 10px;
letter-spacing: 0.28em;
color: var(--muted);
text-transform: uppercase;
}
.payment-icons {
display: flex; gap: var(--s-4);
list-style: none; padding: 0; margin: 0;
flex-wrap: wrap;
}
.payment-icons li {
display: flex; align-items: center; gap: 8px;
color: var(--text);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.payment-icons svg { color: var(--gold); }
.guarantee-list {
list-style: none; padding: 0; margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
}
.guarantee-list li {
display: flex; align-items: center; gap: 8px;
font-size: 13px;
color: var(--text);
}
.rating-block { display: flex; flex-direction: column; gap: 4px; }
.rating-stars-row {
display: flex; align-items: baseline; gap: 10px;
}
.rating-stars {
color: var(--gold);
font-size: 22px;
letter-spacing: 0.08em;
text-shadow: 0 0 16px rgba(212,175,55,0.35);
}
.rating-num {
font-family: var(--font-brutal);
font-size: 28px;
color: var(--text);
line-height: 1;
}
.rating-meta { font-size: 10px; letter-spacing: 0.22em; color: var(--muted); }
@media (max-width: 900px) {
.trust-band-inner { grid-template-columns: 1fr; gap: var(--s-6); }
.guarantee-list { grid-template-columns: 1fr; }
}
/* ---------- v7 Testimonials ---------- */
.testimonials { padding: var(--s-14) 0; background: var(--bg); }
.reviews-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--s-5);
margin-top: var(--s-8);
margin-bottom: var(--s-7);
}
.review-card {
position: relative;
padding: var(--s-6);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
display: flex;
flex-direction: column;
gap: var(--s-4);
transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.review-card::before {
content: "”";
position: absolute;
top: 8px;
right: 18px;
font-family: Georgia, serif;
font-size: 64px;
line-height: 1;
color: var(--gold);
opacity: 0.18;
}
@media (hover: hover) {
.review-card:hover {
border-color: rgba(212,175,55,0.35);
transform: translateY(-3px);
}
}
.review-stars {
color: var(--gold);
font-size: 16px;
letter-spacing: 0.08em;
text-shadow: 0 0 8px rgba(212,175,55,0.3);
}
.review-quote {
margin: 0;
font-size: 15px;
line-height: 1.62;
color: var(--text);
}
.review-author { display: flex; flex-direction: column; gap: 2px; }
.ra-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--text); }
.ra-meta { font-size: 10px; letter-spacing: 0.22em; color: var(--muted); }
.reviews-link {
display: inline-block;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--gold);
text-decoration: none;
border-bottom: 1px solid rgba(212,175,55,0.4);
padding-bottom: 4px;
transition: border-color var(--fast) var(--ease);
}
.reviews-link:hover { border-color: var(--gold); }
@media (max-width: 900px) {
.reviews-grid { grid-template-columns: 1fr; }
}
/* ---------- v7 Comparison table ---------- */
.comparison { padding: var(--s-14) 0; background: var(--surface); }
.cmp-table-wrap {
margin-top: var(--s-8);
border: 1px solid var(--border);
border-radius: var(--r-xl);
overflow: hidden;
background: var(--bg);
}
.cmp-table {
width: 100%;
border-collapse: collapse;
font-family: var(--font-body);
}
.cmp-table thead th {
padding: var(--s-5) var(--s-5);
background: rgba(212,175,55,0.04);
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
text-align: left;
border-bottom: 1px solid var(--border);
}
.cmp-table thead th.cmp-us { color: var(--gold); }
.cmp-table tbody td {
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--border);
font-size: 14px;
vertical-align: middle;
}
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table tbody tr:hover { background: rgba(212,175,55,0.02); }
.cmp-table .cmp-feature { color: var(--muted); width: 38%; }
.cmp-table .cmp-us {
color: var(--text);
font-family: var(--font-display);
font-weight: 600;
width: 31%;
background: rgba(212,175,55,0.05);
}
.cmp-table .cmp-us strong { color: var(--gold); font-weight: 700; }
.cmp-table .cmp-them { color: var(--muted); width: 31%; }
.cmp-note { margin-top: var(--s-5); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); }
@media (max-width: 720px) {
.cmp-table thead th, .cmp-table tbody td { padding: 12px 10px; font-size: 12px; }
.cmp-table .cmp-feature { width: 44%; }
}
/* ---------- v7 Per-car detail pages ---------- */
.car-page { padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-14); min-height: 100vh; background: var(--bg); }
.breadcrumbs { font-size: 11px; letter-spacing: 0.18em; color: var(--muted); margin-bottom: var(--s-6); text-transform: uppercase; }
.breadcrumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px dashed transparent; transition: border-color var(--fast) var(--ease); }
.breadcrumbs a:hover { border-color: var(--gold); color: var(--gold); }
.car-hero {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
gap: var(--s-8);
margin-bottom: var(--s-12);
align-items: start;
}
@media (max-width: 1000px) { .car-hero { grid-template-columns: 1fr; } }
.car-gallery { display: flex; flex-direction: column; gap: var(--s-3); }
.car-photo-main {
margin: 0;
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 16/10;
background: linear-gradient(180deg, #faf7f0 0%, #ede8dc 60%, #d8d2c2 100%);
position: relative;
border: 1px solid var(--border);
}
.car-photo-main img {
width: 100%; height: 100%;
object-fit: contain;
padding: 6%;
transition: opacity 220ms var(--ease);
filter: brightness(1.1) contrast(1.06) saturate(0.92);
}
.car-photo-placeholder {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: 11px; letter-spacing: 0.22em;
color: rgba(0,0,0,0.4);
text-transform: uppercase;
text-align: center;
padding: var(--s-4);
background:
repeating-linear-gradient(45deg,
transparent 0, transparent 12px,
rgba(0,0,0,0.04) 12px, rgba(0,0,0,0.04) 13px);
}
.car-thumbs { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.car-thumbs li { flex: 0 0 92px; }
.car-thumbs button {
width: 100%;
aspect-ratio: 4/3;
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
padding: 0;
background: linear-gradient(180deg, #faf7f0 0%, #ede8dc 100%);
cursor: pointer;
transition: border-color var(--fast) var(--ease);
}
.car-thumbs button.is-active {
border-color: var(--gold);
box-shadow: 0 0 0 1px var(--gold);
}
.car-thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 8%; filter: brightness(1.1) contrast(1.05); }
.car-info { display: flex; flex-direction: column; gap: var(--s-4); }
.car-eyebrow {
font-size: 11px;
letter-spacing: 0.28em;
color: var(--gold);
text-transform: uppercase;
}
.car-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(36px, 5vw, 64px);
line-height: 0.96;
letter-spacing: -0.02em;
margin: 0;
text-transform: uppercase;
}
.car-pitch { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }
.car-price-block {
display: flex; align-items: baseline; gap: 8px;
padding: var(--s-4) var(--s-5);
background: rgba(212,175,55,0.05);
border: 1px solid rgba(212,175,55,0.25);
border-radius: var(--r-lg);
}
.cp-label { font-size: 10px; letter-spacing: 0.22em; color: var(--muted); }
.cp-num { font-family: var(--font-brutal); font-size: 48px; line-height: 1; color: var(--gold); }
.cp-unit { font-size: 11px; letter-spacing: 0.22em; color: var(--muted); }
.car-specs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.car-specs li {
display: flex; align-items: center; gap: 10px;
padding: 12px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
font-size: 13px;
color: var(--text);
}
.car-included {
padding: var(--s-8);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
margin-bottom: var(--s-7);
}
.section-sub { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin: 0 0 var(--s-5); color: var(--text); }
.ci-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.ci-grid li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); }
@media (max-width: 600px) { .ci-grid { grid-template-columns: 1fr; } }
.car-fineprint {
padding: var(--s-5);
background: rgba(212,175,55,0.04);
border-left: 2px solid var(--gold);
border-radius: var(--r-sm);
}
.fp-line { margin: 0; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); line-height: 1.7; }
.card-detail-link {
display: inline-block;
margin-top: 12px;
padding: 8px 14px;
font-size: 11px;
letter-spacing: 0.22em;
color: var(--muted);
text-decoration: none;
border: 1px solid var(--border);
border-radius: var(--r-full);
transition: all var(--fast) var(--ease);
text-transform: uppercase;
font-family: var(--font-mono);
}
.card-detail-link:hover { color: var(--gold); border-color: var(--gold); }
/* ---------- v7 Sticky mobile CTA ---------- */
.sticky-cta {
position: fixed;
left: 12px; right: 12px;
bottom: 12px;
z-index: 90;
display: none;
grid-template-columns: auto 1fr;
gap: 8px;
padding: 8px;
background: rgba(13,13,13,0.94);
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border: 1px solid rgba(212,175,55,0.25);
border-radius: var(--r-full);
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
transform: translateY(120%);
opacity: 0;
transition: transform 360ms var(--ease), opacity 360ms var(--ease);
}
.sticky-cta.is-visible { transform: translateY(0); opacity: 1; }
.sc-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 18px;
border-radius: var(--r-full);
font-family: var(--font-display);
font-weight: 600;
font-size: 13px;
text-decoration: none;
min-height: 44px;
position: relative;
white-space: nowrap;
}
.sc-call { background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid var(--border); }
.sc-book { background: linear-gradient(180deg, #D4AF37 0%, #B8902C 100%); color: #1a1a1a; }
.sc-book .sc-price { font-size: 11px; letter-spacing: 0.16em; opacity: 0.75; font-family: var(--font-mono); }
.sc-pulse {
position: absolute;
inset: -2px;
border-radius: inherit;
border: 1px solid var(--gold);
animation: sc-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes sc-pulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.08); opacity: 0; }
}
@media (max-width: 720px) { .sticky-cta { display: grid; } }
@media (prefers-reduced-motion: reduce) { .sc-pulse { animation: none; } }
/* ---------- v7 Floating chat (WhatsApp + Viber) ---------- */
.chat-float {
position: fixed;
right: 18px;
bottom: 24px;
z-index: 80;
display: flex;
flex-direction: column;
gap: 12px;
}
.cf-btn {
width: 52px;
height: 52px;
display: grid;
place-items: center;
border-radius: 50%;
color: #fff;
text-decoration: none;
box-shadow: 0 8px 20px rgba(0,0,0,0.45);
transition: transform var(--fast) var(--ease);
}
.cf-btn:hover { transform: translateY(-2px) scale(1.04); }
.cf-wa { background: #25D366; }
.cf-viber { background: #7360F2; }
.cf-call { background: var(--gold); color: #1a1a1a !important; }
@media (max-width: 720px) {
.chat-float { bottom: 84px; right: 12px; }
.cf-btn { width: 46px; height: 46px; }
}
/* ---------- v7 Contact page ---------- */
.contact-page { padding: calc(var(--header-h) + var(--s-8)) 0 var(--s-14); min-height: 100vh; background: var(--bg); }
.page-title {
font-family: var(--font-brutal);
font-weight: 400;
font-size: clamp(40px, 6vw, 80px);
line-height: 0.92;
letter-spacing: -0.03em;
text-transform: uppercase;
margin: var(--s-3) 0 var(--s-9);
}
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 380px) 1fr;
gap: var(--s-9);
align-items: start;
}
.ci-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s-5);
}
.ci-list li { display: flex; flex-direction: column; gap: 4px; }
.ci-label { font-size: 10px; letter-spacing: 0.28em; color: var(--muted); text-transform: uppercase; }
.ci-list a, .ci-list span {
color: var(--text);
font-family: var(--font-display);
font-size: 16px;
line-height: 1.5;
}
.ci-list a {
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: border-color var(--fast) var(--ease);
}
.ci-list a:hover { border-color: var(--gold); color: var(--gold); }
.ci-list small { color: var(--muted); font-size: 12px; }
.contact-map {
border-radius: var(--r-xl);
overflow: hidden;
border: 1px solid var(--border);
}
.contact-map iframe { display: block; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
/* ---------- v7 Car cross-sell (other models) ---------- */
.car-cross-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--s-4);
}
@media (max-width: 900px) { .car-cross-list { grid-template-columns: 1fr; } }
.car-cross-item {
display: grid;
grid-template-columns: 110px 1fr auto;
align-items: center;
gap: var(--s-4);
padding: var(--s-3);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
text-decoration: none;
color: var(--text);
transition: all var(--fast) var(--ease);
}
.car-cross-item:hover {
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.cci-img {
width: 110px;
height: 78px;
background-size: cover;
background-position: center;
background-color: #ede8dc;
border-radius: var(--r-md);
flex-shrink: 0;
}
.cci-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cci-tag {
font-size: 9px;
letter-spacing: 0.18em;
color: var(--muted);
text-transform: uppercase;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cci-name {
font-family: var(--font-display);
font-weight: 700;
font-size: 16px;
line-height: 1.15;
margin: 2px 0 4px;
color: var(--text);
}
.cci-price {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.16em;
color: var(--muted);
}
.cci-price b {
font-family: var(--font-brutal);
font-size: 18px;
color: var(--gold);
letter-spacing: 0;
}
.cci-arrow {
color: var(--gold);
flex-shrink: 0;
transition: transform var(--fast) var(--ease);
}
.car-cross-item:hover .cci-arrow { transform: translateX(4px); }
/* Spec icon inside .car-specs li */
.car-specs li .spec-icon { color: var(--gold); flex-shrink: 0; }
.car-feats .check-icon, .ci-grid .check-icon { color: var(--success); flex-shrink: 0; }
/* ============================================================
v7.9 — BRUTAL DROPDOWN NAV (full-screen overlay menu)
Removes default nav-pill + Резервирай CTA.
Trigger = MENU button. Overlay = stagger-revealed section list.
============================================================ */
/* Hide the old nav-pill — replaced by menu trigger */
.header-nav { display: none !important; }
.header-cta { display: none !important; }
/* MENU trigger button */
.menu-trigger {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 16px 10px 12px;
background: rgba(20, 20, 20, 0.7);
border: 1px solid rgba(212, 175, 55, 0.28);
border-radius: var(--r-full);
color: var(--text);
cursor: pointer;
transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.menu-trigger:hover {
background: rgba(212, 175, 55, 0.12);
border-color: rgba(212, 175, 55, 0.6);
transform: translateY(-1px);
}
.menu-trigger:active { transform: translateY(0); }
.menu-trigger:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.menu-trigger .mt-bars {
display: inline-flex;
flex-direction: column;
gap: 4px;
width: 18px;
align-items: stretch;
}
.menu-trigger .mt-bar {
height: 2px;
background: var(--gold);
border-radius: 2px;
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
}
.menu-trigger .mt-bar:nth-child(1) { width: 100%; }
.menu-trigger .mt-bar:nth-child(2) { width: 70%; align-self: flex-end; }
.menu-trigger .mt-bar:nth-child(3) { width: 100%; }
.menu-trigger:hover .mt-bar:nth-child(2) { width: 100%; }
.menu-trigger .mt-label {
font-size: 11px;
letter-spacing: 0.22em;
font-weight: 600;
color: var(--text);
}
/* When menu open: morph bars → X */
.brutal-menu.is-open ~ * .menu-trigger,
body.menu-locked .menu-trigger .mt-bar:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
/* === BRUTAL MENU — editorial v2 (cleaner, fewer items, smoother motion) === */
.brutal-menu {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
pointer-events: none;
}
.brutal-menu[hidden] { display: none; }
.bm-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.78);
backdrop-filter: blur(20px) saturate(120%);
-webkit-backdrop-filter: blur(20px) saturate(120%);
opacity: 0;
transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-panel {
position: relative;
margin-left: auto;
width: min(560px, 100vw);
height: 100vh;
background: #0a0a0a;
display: flex;
flex-direction: column;
overflow-y: auto;
transform: translateX(100%);
transition: transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: auto;
/* Subtle gold glow at top edge */
box-shadow:
-1px 0 0 rgba(212, 175, 55, 0.18),
-32px 0 80px rgba(0, 0, 0, 0.6);
}
.bm-panel::before {
/* Gold glow halo at top-right corner */
content: "";
position: absolute;
top: -20%;
right: -20%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
/* Open state */
.brutal-menu.is-open { pointer-events: auto; }
.brutal-menu.is-open .bm-backdrop { opacity: 1; }
.brutal-menu.is-open .bm-panel { transform: translateX(0); }
/* === Head — minimal: tiny tag + clean X === */
.bm-head {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
padding: clamp(28px, 4vh, 44px) clamp(32px, 4vw, 56px);
}
.bm-tag {
font-size: 11px;
letter-spacing: 0.34em;
color: rgba(212, 175, 55, 0.7);
text-transform: uppercase;
font-weight: 500;
}
.bm-close {
position: relative;
width: 44px;
height: 44px;
background: transparent;
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 50%;
cursor: pointer;
transition: border-color 320ms cubic-bezier(0.22, 1, 0.36, 1), transform 320ms cubic-bezier(0.22, 1, 0.36, 1), background 320ms ease;
}
.bm-close:hover {
border-color: var(--gold);
background: rgba(212, 175, 55, 0.06);
transform: rotate(90deg);
}
.bm-close-x {
position: absolute;
inset: 50% 0 auto 0;
width: 16px;
height: 16px;
margin: -8px auto 0;
}
.bm-close-x::before,
.bm-close-x::after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1.5px;
background: var(--gold);
transform-origin: center;
transition: background 200ms ease;
}
.bm-close-x::before { transform: translateY(-50%) rotate(45deg); }
.bm-close-x::after { transform: translateY(-50%) rotate(-45deg); }
/* === Items list — editorial spacing === */
.bm-list {
position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(20px, 2vh, 32px) clamp(32px, 4vw, 56px);
gap: clamp(8px, 1vh, 14px);
}
.bm-item {
position: relative;
display: grid;
grid-template-columns: 38px 1fr;
align-items: baseline;
column-gap: clamp(20px, 3vw, 32px);
padding: clamp(8px, 1.4vh, 16px) 0;
text-decoration: none;
color: var(--text);
/* Initial reveal state */
opacity: 0;
transform: translateY(28px);
}
/* Number — small, subdued, italic-feeling */
.bm-num {
font-size: 11px;
letter-spacing: 0.28em;
color: rgba(212, 175, 55, 0.55);
font-weight: 500;
transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
align-self: center;
}
/* Name — display typography, big but not shouty */
.bm-name {
font-family: var(--font-display);
font-size: clamp(40px, 5.6vw, 68px);
font-weight: 600;
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--text);
transition: color 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 400ms cubic-bezier(0.22, 1, 0.36, 1);
align-self: center;
}
/* Animated underline — grows from left on hover */
.bm-line {
position: absolute;
left: calc(38px + clamp(20px, 3vw, 32px));
bottom: 0;
height: 1px;
width: 0;
background: linear-gradient(90deg, var(--gold) 0%, transparent 100%);
transition: width 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover state — gold gradient name + grown underline */
.bm-item:hover .bm-name {
background: linear-gradient(110deg, #FFE9A0 0%, #D4AF37 60%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.01em;
}
.bm-item:hover .bm-num {
color: var(--gold);
transform: translateX(-4px);
}
.bm-item:hover .bm-line { width: calc(100% - 38px - clamp(20px, 3vw, 32px)); }
/* Featured item (РЕЗЕРВИРАЙ) — italic + gold tint always */
.bm-item-feature .bm-name {
font-style: italic;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bm-item-feature .bm-num { color: var(--gold); }
/* Stagger reveal — slow + smooth, 100ms apart */
.brutal-menu.is-open .bm-item {
animation: bm-item-in 760ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.brutal-menu.is-open .bm-item:nth-child(1) { animation-delay: 240ms; }
.brutal-menu.is-open .bm-item:nth-child(2) { animation-delay: 340ms; }
.brutal-menu.is-open .bm-item:nth-child(3) { animation-delay: 440ms; }
.brutal-menu.is-open .bm-item:nth-child(4) { animation-delay: 540ms; }
.brutal-menu.is-open .bm-item:nth-child(5) { animation-delay: 640ms; }
@keyframes bm-item-in {
from { opacity: 0; transform: translateY(28px); }
to { opacity: 1; transform: translateY(0); }
}
/* === Foot — phone CTA + brand stamp === */
.bm-foot {
position: relative;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: clamp(24px, 3vh, 36px) clamp(32px, 4vw, 56px);
border-top: 1px solid rgba(212, 175, 55, 0.1);
gap: 24px;
flex-wrap: wrap;
}
.bm-phone {
display: flex;
flex-direction: column;
gap: 4px;
text-decoration: none;
color: var(--text);
transition: color 320ms ease;
}
.bm-phone-label {
font-size: 9px;
letter-spacing: 0.34em;
color: rgba(212, 175, 55, 0.6);
text-transform: uppercase;
}
.bm-phone-num {
font-family: var(--font-display);
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 600;
letter-spacing: -0.01em;
transition: color 320ms ease;
}
.bm-phone:hover .bm-phone-num { color: var(--gold); }
.bm-stamp {
font-size: 9px;
letter-spacing: 0.34em;
color: rgba(245, 245, 240, 0.3);
text-transform: uppercase;
align-self: flex-end;
}
/* Body lock when menu open */
body.menu-locked { overflow: hidden; }
/* Mobile */
@media (max-width: 720px) {
.menu-trigger { padding: 8px 12px; }
.menu-trigger .mt-label { font-size: 10px; letter-spacing: 0.18em; }
.bm-panel { width: 100vw; }
.bm-head { padding: 24px 24px; }
.bm-list { padding: 8px 24px; gap: 4px; }
.bm-item { grid-template-columns: 30px 1fr; column-gap: 18px; padding: 14px 0; }
.bm-name { font-size: clamp(34px, 11vw, 52px); }
.bm-num { font-size: 10px; letter-spacing: 0.24em; }
.bm-line { left: 48px; }
.bm-item:hover .bm-line { width: calc(100% - 48px); }
.bm-foot { padding: 20px 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
.bm-stamp { align-self: flex-start; }
}
/* Reduced motion: instant reveal */
@media (prefers-reduced-motion: reduce) {
.brutal-menu.is-open .bm-item { animation: none; opacity: 1; transform: none; }
.bm-panel { transition: none; }
.bm-backdrop { transition: none; }
.bm-close:hover { transform: none; }
}
/* ============================================================
v7.8 — DESKTOP HERO SPLIT: text LEFT + bookcard RIGHT
Video full-bleed, lighter overlays so it shows EVERYWHERE
============================================================ */
/* Bookcard — glass card on the right (desktop) / under text (mobile) */
.hero-bookcard {
position: relative;
background: linear-gradient(180deg, rgba(20, 20, 20, 0.78) 0%, rgba(8, 8, 8, 0.88) 100%);
backdrop-filter: blur(22px) saturate(140%);
-webkit-backdrop-filter: blur(22px) saturate(140%);
border: 1px solid rgba(212, 175, 55, 0.22);
border-radius: 16px;
padding: clamp(20px, 2.2vw, 36px);
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(212, 175, 55, 0.10);
width: 100%;
max-width: 480px;
isolation: isolate;
}
/* Gold corner brackets on bookcard (matches hero-mini-book aesthetic) */
.hero-bookcard::before,
.hero-bookcard::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border: 1.5px solid var(--gold);
pointer-events: none;
z-index: 2;
}
.hero-bookcard::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-bookcard::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.hbc-head {
margin-bottom: var(--s-4);
text-align: left;
}
.hbc-eyebrow {
display: inline-block;
font-size: 10px;
letter-spacing: 0.28em;
color: rgba(212, 175, 55, 0.85);
text-transform: uppercase;
margin-bottom: var(--s-2);
}
.hbc-title {
font-family: var(--font-display);
font-size: clamp(22px, 1.8vw, 28px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
color: var(--text);
}
.hbc-title .gold {
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Bookcard form: stack form fields vertically inside the card (vs horizontal in old layout) */
.hero-bookcard .hero-mini-book {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.hero-bookcard .hero-mini-book::before,
.hero-bookcard .hero-mini-book::after { display: none !important; }
.hero-bookcard .hero-mini-book .hmb-sep { display: none !important; }
.hero-bookcard .hero-mini-book .hmb-field {
background: rgba(20, 20, 20, 0.5);
border: 1px solid rgba(212, 175, 55, 0.15);
border-radius: 10px;
padding: 10px 12px;
transition: border-color var(--fast) var(--ease);
}
.hero-bookcard .hero-mini-book .hmb-field:focus-within {
border-color: rgba(212, 175, 55, 0.5);
background: rgba(212, 175, 55, 0.05);
}
.hero-bookcard .hero-mini-book .hmb-field-select { grid-column: 1 / -1; }
.hero-bookcard .hero-mini-book .hmb-cta {
grid-column: 1 / -1;
margin-top: 4px;
padding: 14px 20px;
font-size: 14px;
}
.hero-bookcard .hmb-speed-cue { margin-bottom: var(--s-3) !important; }
.hero-bookcard .hmb-trust {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid rgba(212, 175, 55, 0.12);
font-size: 9.5px;
}
/* === Hero overlays — a11y-balanced: dark scrim where text lives, video reveals on right === */
/* a11y v8: stronger left-side scrim for text contrast over high-detail AI-upscaled video */
@media (min-width: 1080px) {
.hero-overlay {
background:
linear-gradient(90deg, rgba(8,8,8,0.92) 0%, rgba(8,8,8,0.74) 28%, rgba(8,8,8,0.40) 48%, rgba(10,10,10,0.10) 62%, rgba(10,10,10,0.55) 100%),
linear-gradient(0deg, rgba(8,8,8,0.85) 0%, rgba(10,10,10,0.28) 38%, rgba(10,10,10,0) 60%) !important;
}
.hero-vignette { opacity: 0.45 !important; }
.hero-still::after {
background: linear-gradient(180deg,
rgba(10, 10, 10, 0.10) 0%,
rgba(10, 10, 10, 0.00) 25%,
rgba(10, 10, 10, 0.00) 70%,
rgba(10, 10, 10, 0.65) 100%) !important;
}
/* a11y v8: text shadows tuned for high-detail AI-upscaled video — stronger near-shadow + soft halo */
.hero-inner-split .hero-title {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9), 0 4px 24px rgba(0, 0, 0, 0.7), 0 8px 48px rgba(0, 0, 0, 0.5);
}
.hero-inner-split .hero-sub-bold {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.92), 0 2px 12px rgba(0, 0, 0, 0.65);
}
}
/* Mobile: bookcard pushed BELOW BMW area — car dominates top, form bottom (storytelling) */
@media (max-width: 1079px) {
.hero-bookcard {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
max-width: 100%;
margin-top: clamp(28vh, 36vh, 44vh) !important; /* push form down so BMW dominates top */
}
.hero-bookcard::before,
.hero-bookcard::after { display: none !important; }
.hero-bookcard .hbc-head { display: none; }
}
/* Tighten further on small phones */
@media (max-width: 720px) {
.hero-bookcard {
margin-top: clamp(32vh, 42vh, 50vh) !important;
}
}
/* ============================================================
v7.7 — FLEET PHOTOS: DARK PROFESSIONAL UNIFIED LOOK
Overrides earlier "Hertz cream catalog" attempt (it didn't blend
with our real photos that have varied dark/outdoor backgrounds).
============================================================ */
/* All cards: same aspect ratio + dark backdrop */
.fleet-grid .card-photo {
aspect-ratio: 16 / 10 !important;
background: linear-gradient(180deg, #1c1c1c 0%, #0a0a0a 100%) !important;
position: relative;
overflow: hidden;
border-radius: 8px;
}
/* Real-photo cards: kill the cream-mask treatment, use unified dark look */
.fleet-grid .card-photo:not(.is-coming) {
background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%) !important;
}
.fleet-grid .card-photo:not(.is-coming) .photo-img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
background-size: cover !important;
background-position: center 58% !important; /* slight upper bias — shows roof + body */
background-repeat: no-repeat !important;
filter: brightness(1.04) contrast(1.08) saturate(1.12) !important;
/* Remove the harsh cream-fade mask — replace with subtle edge fade via overlay */
-webkit-mask: none !important;
mask: none !important;
}
/* Unified vignette overlay — fades photo edges into card bg for clean framing */
.fleet-grid .card-photo:not(.is-coming)::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background:
/* top fade for photo-meta tag legibility */
linear-gradient(180deg, rgba(10,10,10,0.55) 0%, transparent 22%),
/* bottom fade — stronger so price/specs readout sits cleanly */
linear-gradient(0deg, rgba(10,10,10,0.65) 0%, transparent 30%),
/* side vignette — soft, only at extreme edges */
radial-gradient(ellipse 110% 80% at 50% 50%, transparent 60%, rgba(10,10,10,0.5) 100%);
}
/* Cleaner drop shadow under car (smaller, more subtle than cream version) */
.fleet-grid .card-photo:not(.is-coming)::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
bottom: 4%;
height: 10px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%);
filter: blur(8px);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* === IS-COMING placeholders: dark theme + gold silhouette === */
.fleet-grid .card-photo.is-coming {
background:
radial-gradient(ellipse at 50% 60%, #1a1a1a 0%, #0a0a0a 100%) !important;
position: relative;
}
/* Override cream blueprint silhouette → dark with gold stroke */
.fleet-grid .card-photo.is-coming::before {
content: "";
position: absolute;
inset: 22% 14%;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 1;
}
.fleet-grid .card-photo.is-coming::after {
content: "СНИМКА СКОРО";
position: absolute;
bottom: 14px !important;
left: 50%;
transform: translateX(-50%);
inset: auto auto 14px auto !important;
display: inline-block;
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.3em;
color: rgba(212, 175, 55, 0.85) !important;
background: rgba(212, 175, 55, 0.08) !important;
border: 1px solid rgba(212, 175, 55, 0.4) !important;
padding: 4px 12px;
border-radius: 999px;
height: auto;
width: auto;
filter: none;
z-index: 2;
text-transform: uppercase;
}
/* SUV silhouette variant for is-coming SUV cards */
.fleet-grid .fleet-card[data-cat~="suv"] .card-photo.is-coming::before,
.fleet-grid .fleet-card[data-cat~="seven"] .card-photo.is-coming::before {
background-image: url("data:image/svg+xml;utf8,") !important;
}
/* Photo-meta tag (▼ HYBRID · АВТО · 2025) — readable on dark photos */
.fleet-grid .card-photo .photo-meta {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(212, 175, 55, 0.95);
background: rgba(10, 10, 10, 0.65);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(212, 175, 55, 0.28);
border-radius: 999px;
padding: 4px 10px;
text-transform: uppercase;
}
/* Hover — subtle photo zoom (already exists but ensure transform target works) */
.fleet-grid .fleet-card:hover .card-photo:not(.is-coming) .photo-img {
transform: scale(1.05);
filter: brightness(1.08) contrast(1.1) saturate(1.18) !important;
}
.fleet-grid .card-photo:not(.is-coming) .photo-img {
transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 400ms ease;
}
/* ============================================================
v7.6 — SHOWCASE CLEAN: black, no borders, context-first
Mobile order: tag → ★ ЛИМИТИРАНА ОФЕРТА → title → 3D → form
============================================================ */
.showcase.showcase-clean {
background: #000;
padding-top: clamp(48px, 6vh, 96px);
padding-bottom: clamp(48px, 6vh, 96px);
position: relative;
}
.showcase.showcase-clean::before {
/* Subtle radial gold glow at top to tie back to hero gold */
content: "";
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60%;
background: radial-gradient(ellipse at center, rgba(212,175,55,0.06) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.showcase.showcase-clean > .container { position: relative; z-index: 1; }
/* Header: context-first stack */
.showcase-header {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
margin-bottom: clamp(32px, 5vh, 56px);
max-width: 880px;
margin-left: auto;
margin-right: auto;
}
/* Limited-offer banner — sole header element: dominant size, gold-glow ring */
.abiturient-banner-hero {
display: inline-flex;
align-items: center;
gap: 16px;
padding: 18px 32px;
background: linear-gradient(90deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.08) 100%);
border: 1.5px solid rgba(212, 175, 55, 0.65);
border-radius: var(--r-full);
font-size: clamp(15px, 1.4vw, 18px);
color: var(--text);
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.14),
0 14px 40px rgba(212, 175, 55, 0.14),
0 0 60px rgba(212, 175, 55, 0.08);
flex-wrap: wrap;
justify-content: center;
}
.abiturient-banner-hero .ab-tag {
font-size: clamp(12px, 1vw, 13px);
letter-spacing: 0.22em;
color: var(--gold);
font-weight: 700;
text-transform: uppercase;
}
.abiturient-banner-hero .ab-text strong {
color: var(--gold);
font-weight: 700;
}
.abiturient-banner-hero .ab-pulse {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 18px var(--gold);
animation: ab-pulse 1.6s ease-in-out infinite;
flex-shrink: 0;
}
@keyframes ab-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
/* 3D frame — clean: no decorative corners, no badges, no readout */
.three-d-frame.three-d-frame-clean {
background: #050505;
border: none !important;
border-radius: 16px;
overflow: hidden;
box-shadow:
0 24px 60px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(212, 175, 55, 0.08);
position: relative;
}
.three-d-frame.three-d-frame-clean .three-d-corner,
.three-d-frame.three-d-frame-clean .three-d-tag,
.three-d-frame.three-d-frame-clean .three-d-spin,
.three-d-frame.three-d-frame-clean .three-d-readout { display: none !important; }
.three-d-frame.three-d-frame-clean .three-d-iframe {
display: block;
width: 100%;
background: #000;
}
/* Form — clean (drops abiturient banner duplicate, drops form-eyebrow + title since now in header) */
.showcase-form-clean .abiturient-banner,
.showcase-form-clean .form-eyebrow,
.showcase-form-clean .form-title { display: none; }
.showcase-form-clean {
background: #0a0a0a;
border: 1px solid rgba(212, 175, 55, 0.18);
border-radius: 14px;
padding: clamp(20px, 2vw, 32px);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
}
/* Form fills the aside height; trust pills pinned to bottom */
.showcase-form-clean .quick-form {
display: flex;
flex-direction: column;
gap: var(--s-4);
flex: 1;
}
.showcase-form-clean .hmb-speed-cue {
margin: 0 auto var(--s-2);
}
.showcase-form-clean .qf-trust {
margin-top: auto;
padding-top: var(--s-4);
border-top: 1px solid rgba(212, 175, 55, 0.14);
font-size: 11px;
letter-spacing: 0.2em;
}
/* Slightly larger inputs/button for visual presence next to the 3D viewer */
.showcase-form-clean .quick-form input[type="date"],
.showcase-form-clean .quick-form select {
height: 54px;
font-size: 14px;
}
.showcase-form-clean .quick-form .btn-lg {
padding-block: 18px;
font-size: 14px;
letter-spacing: 0.18em;
}
/* Mobile: stack header → 3D → form, banner stays prominent */
@media (max-width: 1024px) {
.showcase.showcase-clean .showcase-grid {
grid-template-columns: 1fr !important;
gap: var(--s-5) !important;
}
/* Banner stays prominent — this is now the only header element */
.abiturient-banner-hero {
font-size: clamp(14px, 2.2vw, 17px);
padding: 16px 24px;
gap: 14px;
}
.abiturient-banner-hero .ab-tag { font-size: clamp(11px, 1.6vw, 12px); }
}
@media (max-width: 720px) {
.showcase.showcase-clean { padding-top: 40px; padding-bottom: 40px; }
.showcase-header { gap: 0; margin-bottom: var(--s-5); }
.three-d-frame.three-d-frame-clean { border-radius: 12px; }
.three-d-frame.three-d-frame-clean .three-d-iframe { aspect-ratio: 4 / 3; height: auto; }
.showcase-form-clean { padding: var(--s-4); border-radius: 12px; }
/* Banner — make it pop on mobile (it's the only header element now) */
.abiturient-banner-hero {
position: relative;
width: 100%;
max-width: 480px;
padding: 18px 22px;
gap: 12px;
font-size: 14px;
line-height: 1.4;
}
.abiturient-banner-hero .ab-tag {
font-size: 11px;
display: block;
width: 100%;
text-align: center;
margin-bottom: 2px;
}
.abiturient-banner-hero .ab-text {
flex: 1 1 100%;
text-align: center;
}
.abiturient-banner-hero .ab-pulse {
position: absolute;
top: 14px;
left: 14px;
}
}
/* ============================================================
v7.5 — UX BOOSTERS: speed cue + trust strip + form polish
Goal: zero-friction booking, max visual hierarchy on CTA
============================================================ */
/* Speed cue above form — "⚡ 60 секунди до твоята кола" */
.hmb-speed-cue {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 auto var(--s-3);
padding: 6px 14px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(212, 175, 55, 0.92);
background: rgba(212, 175, 55, 0.06);
border: 1px solid rgba(212, 175, 55, 0.28);
border-radius: var(--r-full);
text-align: center;
}
.hmb-speed-cue .hsc-bolt {
font-size: 13px;
filter: drop-shadow(0 0 6px rgba(212,175,55,0.5));
animation: hsc-pulse 2.4s ease-in-out infinite;
}
@keyframes hsc-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.18); }
}
/* Trust strip below form */
.hmb-trust {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: clamp(14px, 2.2vw, 28px);
margin: var(--s-3) auto 0;
padding: 0;
list-style: none;
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 245, 240, 0.62);
}
.hmb-trust li {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.hmb-trust .ht-star {
color: var(--gold);
font-size: 12px;
}
/* === Form polish: glass surface + gold focus === */
.hero-content-centered .hero-mini-book {
border: 1px solid rgba(212, 175, 55, 0.20);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(212, 175, 55, 0.10);
transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.hero-content-centered .hero-mini-book:hover,
.hero-content-centered .hero-mini-book:focus-within {
border-color: rgba(212, 175, 55, 0.45);
box-shadow:
0 22px 60px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(212, 175, 55, 0.2),
inset 0 1px 0 rgba(212, 175, 55, 0.16);
}
/* Date / select inputs — gold focus ring */
.hero-mini-book input[type="date"],
.hero-mini-book select {
transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.hero-mini-book .hmb-field:focus-within {
background: rgba(212, 175, 55, 0.06);
border-radius: 10px;
}
.hero-mini-book .hmb-field:focus-within .hmb-label {
color: var(--gold);
}
/* Submit CTA — bigger hover hit + scale + glow */
.hero-mini-book .hmb-cta {
position: relative;
font-weight: 700;
letter-spacing: 0.06em;
transition:
transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 220ms ease,
background-color 200ms ease;
will-change: transform;
}
.hero-mini-book .hmb-cta:hover {
transform: translateY(-2px) scale(1.02);
box-shadow:
0 14px 32px rgba(212, 175, 55, 0.42),
0 0 0 4px rgba(212, 175, 55, 0.15);
}
.hero-mini-book .hmb-cta:active {
transform: translateY(0) scale(0.99);
box-shadow: 0 6px 18px rgba(212, 175, 55, 0.3);
transition-duration: 80ms;
}
.hero-mini-book .hmb-cta:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* Mobile-specific tightening for new elements */
@media (max-width: 720px) {
.hmb-speed-cue {
font-size: 10px;
padding: 5px 12px;
letter-spacing: 0.22em;
}
.hmb-trust {
gap: 10px;
font-size: 9.5px;
letter-spacing: 0.14em;
}
}
/* ============================================================
v7.3 — HERO REWORK: pitch + tagline + meta strip + info card
+ diagonal yellow marquee tape
============================================================ */
/* Pitch paragraph (replaces .hero-sub) */
.hero-pitch {
font-size: clamp(15px, 1.15vw, 17px);
line-height: 1.55;
color: rgba(245, 245, 240, 0.86);
max-width: 56ch;
margin: 0 0 var(--s-3);
font-weight: 400;
}
/* Mono tagline accent line */
.hero-tagline {
display: block;
font-size: 11px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(212, 175, 55, 0.88);
margin: 0 0 var(--s-7);
padding-left: var(--s-3);
border-left: 2px solid rgba(212, 175, 55, 0.45);
}
/* Meta strip — FLEET · FROM · CONTACT · STATUS */
.hero-meta-strip {
display: flex;
flex-wrap: wrap;
gap: clamp(18px, 2vw, 32px);
align-items: center;
margin: 0 0 var(--s-6);
padding: var(--s-3) 0;
border-top: 1px solid rgba(212, 175, 55, 0.18);
border-bottom: 1px solid rgba(212, 175, 55, 0.18);
list-style: none;
}
.hero-meta-strip li {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
white-space: nowrap;
}
.hero-meta-strip .hms-label {
color: rgba(245, 245, 240, 0.45);
font-weight: 500;
}
.hero-meta-strip .hms-val {
color: var(--text);
font-weight: 600;
letter-spacing: 0.14em;
}
.hero-meta-strip .hms-val.gold { color: var(--gold); }
.hero-meta-strip .hms-link {
color: var(--text);
text-decoration: none;
border-bottom: 1px dotted rgba(245, 245, 240, 0.3);
transition: color var(--fast), border-color var(--fast);
}
.hero-meta-strip .hms-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.hero-meta-strip .hms-live {
color: #ff4747;
animation: hms-pulse 1.6s ease-in-out infinite;
}
@keyframes hms-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
/* Info card (right side — KARS-PKV LTD details) */
.hero-info-card {
position: relative;
align-self: end;
padding: var(--s-6) var(--s-5);
background: linear-gradient(180deg, rgba(20, 20, 20, 0.55) 0%, rgba(10, 10, 10, 0.85) 100%);
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
border: 1px solid rgba(212, 175, 55, 0.22);
border-radius: var(--r-md, 12px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(212, 175, 55, 0.12);
max-width: 360px;
justify-self: end;
}
.hero-info-card .hic-head { margin-bottom: var(--s-4); }
.hero-info-card .hic-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(212, 175, 55, 0.92);
background: rgba(212, 175, 55, 0.08);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: var(--r-full);
}
.hero-info-card .hic-title {
font-size: 13px;
letter-spacing: 0.22em;
text-transform: uppercase;
margin: 0 0 var(--s-3);
font-weight: 600;
}
.hero-info-card .hic-line {
font-size: 13px;
line-height: 1.5;
color: rgba(245, 245, 240, 0.78);
margin: 0 0 4px;
}
.hero-info-card .hic-line.mono {
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 245, 240, 0.55);
margin-bottom: var(--s-4);
}
/* BG plate stylized */
.hic-plate {
display: inline-flex;
align-items: stretch;
background: #f5f5f0;
color: #0a0a0a;
border: 2px solid #1a1a1a;
border-radius: 5px;
overflow: hidden;
font-weight: 700;
margin-top: var(--s-2);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.hic-plate .plate-eu {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4px 6px;
background: #003399;
color: #ffcc00;
font-size: 9px;
line-height: 1;
gap: 1px;
font-family: var(--font-mono);
}
.hic-plate .plate-star { font-size: 10px; }
.hic-plate .plate-bg { color: #fff; font-weight: 700; letter-spacing: 0.05em; }
.hic-plate .plate-num {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-size: 13px;
letter-spacing: 0.18em;
font-weight: 700;
color: #0a0a0a;
}
/* === DIAGONAL YELLOW MARQUEE TAPE === */
.hero-marquee {
position: absolute;
bottom: clamp(40px, 8vh, 80px);
left: -8%;
right: -8%;
z-index: 5;
background: linear-gradient(180deg, #d4af37 0%, #b8902c 100%);
border-top: 1px solid rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
transform: rotate(-3.5deg);
transform-origin: center;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 -2px 6px rgba(0, 0, 0, 0.2);
pointer-events: none;
}
.hero-marquee::before,
.hero-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 60px;
z-index: 2;
pointer-events: none;
}
.hero-marquee::before {
left: 0;
background: linear-gradient(90deg, rgba(212, 175, 55, 1) 0%, rgba(212, 175, 55, 0) 100%);
}
.hero-marquee::after {
right: 0;
background: linear-gradient(270deg, rgba(212, 175, 55, 1) 0%, rgba(212, 175, 55, 0) 100%);
}
.hm-track {
display: flex;
gap: 0;
padding: 14px 0;
width: max-content;
animation: hm-scroll 38s linear infinite;
will-change: transform;
}
.hm-group {
display: inline-flex;
align-items: center;
gap: clamp(20px, 2.4vw, 36px);
padding-right: clamp(20px, 2.4vw, 36px);
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(13px, 1.1vw, 17px);
letter-spacing: 0.14em;
text-transform: uppercase;
color: #0a0a0a;
white-space: nowrap;
}
.hm-star {
color: rgba(0, 0, 0, 0.45);
font-size: 14px;
}
@keyframes hm-scroll {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.hm-track { animation: none; }
}
/* === TABLET ADAPTATIONS === */
@media (max-width: 1080px) {
.hero-inner-grid {
grid-template-columns: 1fr;
gap: var(--s-6);
padding-bottom: clamp(100px, 14vh, 140px);
}
.hero-info-card {
justify-self: stretch;
max-width: 100%;
}
.hero-meta-strip { gap: 16px 22px; }
.hero-meta-strip li { font-size: 10px; }
.hero-marquee {
bottom: clamp(20px, 4vh, 40px);
transform: rotate(-2.5deg);
}
.hm-group { font-size: 13px; gap: 22px; padding-right: 22px; }
}
/* === MOBILE — title HIGH, BMW prominent middle, form storytelling reveal === */
@media (max-width: 720px) {
/* Free hero from fixed 100vh + 220vh sticky pin — let content flow naturally */
.hero-story { height: auto !important; min-height: 100vh; }
.hero-story .hero {
position: relative !important;
height: auto !important;
min-height: 100vh;
overflow: visible !important;
align-items: flex-start !important;
padding-top: calc(var(--header-h) + var(--s-3)) !important;
padding-bottom: var(--s-8) !important;
}
/* Override inner grid centering — content must start at TOP on mobile */
.hero-inner {
display: block !important;
place-items: stretch !important;
align-items: stretch !important;
min-height: 0 !important;
padding-top: 0 !important;
}
.hero-content {
padding-top: 0 !important;
padding-bottom: 0 !important;
text-align: center;
max-width: 100%;
}
/* Title compact at top — BMW visible BELOW title in big middle area */
.hero-title { margin-top: var(--s-2); margin-bottom: var(--s-3); }
.hero-sub { margin-bottom: var(--s-6); }
/* Form pushed down — BMW dominates the gap; revealed on scroll (storytelling) */
.hero-content-centered .hero-mini-book,
.hero-mini-book {
margin-top: clamp(38vh, 50vh, 58vh) !important;
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms ease 80ms, transform 700ms ease 80ms;
}
.hero-mini-book.is-revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Reveal the form immediately when reduced motion is preferred */
@media (prefers-reduced-motion: reduce) {
.hero-mini-book { opacity: 1 !important; transform: none !important; transition: none !important; }
}
}
/* ============================================================
v7.8 — HERTZ TRANSPARENT PNG STYLE (overrides v7.7 dark look)
Cars are now PNG with transparent backgrounds (rembg processed).
Card = cream/light surface, car floats with soft floor shadow.
============================================================ */
.fleet-grid .card-photo:not(.is-coming) {
background: linear-gradient(180deg, #f8f5ee 0%, #ede6d4 65%, #ddd4ba 100%) !important;
position: relative;
}
.fleet-grid .card-photo:not(.is-coming) .photo-img {
position: absolute !important;
inset: 8% 8% 14% 8% !important;
background-size: contain !important;
background-position: center bottom !important;
background-repeat: no-repeat !important;
-webkit-mask: none !important;
mask: none !important;
filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.18)) !important;
animation: none !important;
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Kill the dark vignette overlay (was for raw photos) */
.fleet-grid .card-photo:not(.is-coming)::before {
display: none !important;
}
/* Soft floor shadow ellipse */
.fleet-grid .card-photo:not(.is-coming)::after {
content: "";
position: absolute;
left: 18%;
right: 18%;
bottom: 9%;
height: 16px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.32) 0%, transparent 70%);
filter: blur(10px);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* Photo-meta tag — switch from gold-on-dark to dark-on-cream */
.fleet-grid .card-photo:not(.is-coming) .photo-meta {
background: rgba(255, 255, 255, 0.92) !important;
color: #1a1a1a !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
backdrop-filter: none !important;
font-weight: 600;
}
/* Subtle hover lift on the car */
.fleet-grid .fleet-card:hover .card-photo:not(.is-coming) .photo-img {
transform: translateY(-4px) scale(1.02);
}
/* === v7.9 — STOCK PHOTO DISCLAIMER BADGE (small "снимка на модела" tag) === */
.fleet-card .stock-photo-tag {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.92);
color: #6b6b66;
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 4px 8px;
border-radius: 4px;
pointer-events: none;
font-weight: 600;
}
.fleet-card .stock-photo-tag b {
color: var(--gold);
font-weight: 700;
margin-right: 3px;
}
/* On car.html detail page — same treatment, slightly larger */
.car-page .stock-photo-disclaimer {
display: inline-block;
margin-top: var(--s-2);
padding: 5px 11px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.14em;
color: var(--muted);
text-transform: uppercase;
background: rgba(212, 175, 55, 0.06);
border: 1px solid rgba(212, 175, 55, 0.25);
border-radius: 4px;
}
.car-page .stock-photo-disclaimer b {
color: var(--gold);
font-weight: 700;
margin-right: 4px;
}
/* ============================================================
v8.0 — DARK SURFACE FLEET CARD (2026-04-27)
Кolaта плава върху тъмен fon на картата (без card-in-card).
Fixes: cream backdrop, double border, photo-frame look.
Overrides v7.7 / v7.8 / v7.9 / info1 styles.
============================================================ */
/* 1. Card-photo background: NO cream gradient. Subtle radial spotlight on dark. */
.fleet-grid .card-photo:not(.is-coming),
.card-photo:not(.is-coming) {
background:
radial-gradient(ellipse 70% 55% at 50% 58%,
rgba(212, 175, 55, 0.06) 0%,
rgba(31, 31, 31, 0.4) 45%,
transparent 80%),
linear-gradient(180deg, #161616 0%, #0d0d0d 100%) !important;
border: none !important;
border-radius: 0 !important;
overflow: hidden;
isolation: isolate;
}
/* 2. Photo: PNG floats centered with floor shadow, no mask, no desat filter. */
.fleet-grid .card-photo:not(.is-coming) .photo-img,
.card-photo:not(.is-coming) .photo-img {
position: absolute !important;
inset: 6% 6% 12% 6% !important;
background-size: contain !important;
background-position: center bottom !important;
background-repeat: no-repeat !important;
-webkit-mask: none !important;
mask: none !important;
filter:
drop-shadow(0 18px 20px rgba(0, 0, 0, 0.55))
drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35)) !important;
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* 3. Kill any residual vignette / light overlay from earlier blocks. */
.fleet-grid .card-photo:not(.is-coming)::before,
.card-photo:not(.is-coming)::before {
display: none !important;
}
/* 4. Floor shadow ellipse: tight, dark, anchors the car. */
.fleet-grid .card-photo:not(.is-coming)::after,
.card-photo:not(.is-coming)::after {
content: "";
position: absolute;
left: 22%;
right: 22%;
bottom: 7%;
height: 14px;
background: radial-gradient(ellipse at center,
rgba(0, 0, 0, 0.65) 0%,
rgba(0, 0, 0, 0.25) 45%,
transparent 75%);
filter: blur(8px);
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* 5. Photo-meta tag: gold-on-dark, pinned top-left, subtle. */
.fleet-grid .card-photo:not(.is-coming) .photo-meta,
.card-photo:not(.is-coming) .photo-meta {
position: absolute !important;
top: 12px !important;
left: 12px !important;
background: rgba(10, 10, 10, 0.78) !important;
color: var(--gold) !important;
border: 1px solid rgba(212, 175, 55, 0.22) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
font-weight: 500 !important;
font-size: 9px !important;
letter-spacing: 0.18em !important;
padding: 4px 9px !important;
border-radius: 3px !important;
z-index: 3;
}
/* 6. Stock-photo-tag: dark glass to match. */
.fleet-card .stock-photo-tag {
background: rgba(10, 10, 10, 0.78) !important;
color: rgba(245, 245, 240, 0.7) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
/* 7. Hover: lift the car slightly off the floor. */
.fleet-grid .fleet-card:hover .card-photo:not(.is-coming) .photo-img,
.fleet-card:hover .card-photo:not(.is-coming) .photo-img {
transform: translateY(-6px) scale(1.03) !important;
}
.fleet-grid .fleet-card:hover .card-photo:not(.is-coming)::after,
.fleet-card:hover .card-photo:not(.is-coming)::after {
height: 10px;
opacity: 0.7;
transition: height 360ms ease, opacity 360ms ease;
}
/* 8. Card itself: cleaner edge, no double-border feel. */
.fleet-grid .fleet-card,
.fleet-card {
background: linear-gradient(180deg, #141414 0%, #0a0a0a 100%) !important;
border: 1px solid rgba(212, 175, 55, 0.14) !important;
overflow: hidden;
}
.fleet-grid .fleet-card:hover,
.fleet-card:hover {
border-color: rgba(212, 175, 55, 0.4) !important;
}
/* ============================================================
v8.1 — A11Y PASS (2026-04-27)
Synthesized from 3 parallel ui-ux-pro-max audits.
Adds: focus-visible rings, aria-current/aria-selected styling,
button.link-muted reset, touch target minimums.
============================================================ */
/* 1. Visible focus ring on ALL interactive controls.
Gold 2px ring + 2px offset — keyboard users see clearly without
sacrificing aesthetics on mouse hover (focus-visible only fires on keyboard). */
.btn:focus-visible,
.bm-item:focus-visible,
.bm-close:focus-visible,
.menu-trigger:focus-visible,
.cat-tab:focus-visible,
.faq-q:focus-visible,
.card-arrow:focus-visible,
.cf-btn:focus-visible,
.contact-chip:focus-visible,
.tier-card:focus-visible,
.toggle-pw:focus-visible,
.tab:focus-visible,
.bc-list a:focus-visible,
.modal-close:focus-visible,
.points-fab:focus-visible,
.progress-pill:focus-visible,
button.link-muted:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
border-radius: var(--r-sm);
}
/* Inputs and selects get a softer ring (already have border) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 1px;
}
/* 2. aria-current="page" — visual parity with .bm-item-feature.
Currently only the "feature" item glows gold; active page should too. */
.bm-item[aria-current="page"] .bm-name {
font-style: italic;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.bm-item[aria-current="page"] .bm-num { color: var(--gold); }
/* Footer current-page hint */
.footer-col a[aria-current="page"] {
color: var(--gold);
font-weight: 600;
}
/* Breadcrumb current page */
.bc-list li[aria-current="page"] {
color: var(--gold);
}
/* 3. aria-selected="true" on tabs — mirror .is-active so JS can use either. */
.cat-tab[aria-selected="true"] {
color: var(--gold);
}
.cat-tab[aria-selected="true"]::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
right: 0;
height: 2px;
background: var(--gold);
}
/* 4. button.link-muted reset — converted from on auth modal
"Забравена парола?". Kill default button chrome so it visually matches. */
button.link-muted {
appearance: none;
-webkit-appearance: none;
background: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
cursor: pointer;
color: var(--muted);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(138, 138, 133, 0.4);
transition: color var(--fast) var(--ease);
}
button.link-muted:hover {
color: var(--text);
text-decoration-color: var(--gold);
}
/* 5. Touch target minimums — small icon-only controls.
Use min-width/height + flex centering to keep visual size unchanged
but expand the hit area (padding alternative would shift layout). */
.faq-toggle,
.bm-close-x {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* .card-arrow is 40×40 — bump to 44 for touch standard */
.card-arrow {
width: 44px;
height: 44px;
}
/* .contact-chip — pad to ≥44 height on touch viewports */
@media (hover: none) and (pointer: coarse) {
.contact-chip {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.cat-tab {
min-height: 44px;
}
}
/* 6. Reduced-motion: skip the gold pulse / bm-item stagger if user prefers */
@media (prefers-reduced-motion: reduce) {
.bm-item:focus-visible,
.cat-tab:focus-visible,
.faq-q:focus-visible {
transition: none !important;
}
}
/* ============================================================
GDPR COOKIE CONSENT BANNER (P0 / launch)
Lightweight, vanilla, fixed-bottom, dismissable.
============================================================ */
.cookie-banner {
position: fixed;
left: 50%;
bottom: 16px;
transform: translateX(-50%) translateY(120%);
width: min(calc(100vw - 32px), 720px);
z-index: 9990;
background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(10,10,10,0.99));
border: 1px solid rgba(212,175,55,0.35);
border-radius: 16px;
padding: 18px 22px;
box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.06);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease;
opacity: 0;
pointer-events: none;
}
.cookie-banner.is-shown {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.cookie-banner::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
opacity: 0.5;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.cookie-banner-grid {
display: grid;
grid-template-columns: 1fr auto;
gap: 18px;
align-items: center;
}
@media (max-width: 600px) {
.cookie-banner-grid { grid-template-columns: 1fr; gap: 12px; }
}
.cookie-banner-text {
font-family: var(--font-body, 'Inter', sans-serif);
font-size: 13px;
line-height: 1.5;
color: rgba(245,245,240,0.82);
margin: 0;
}
.cookie-banner-text strong { color: var(--gold); font-weight: 600; }
.cookie-banner-text a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.cookie-banner-text a:hover { color: #FFD75A; }
.cookie-banner-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.cookie-banner-btn {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
padding: 11px 18px;
border-radius: 999px;
cursor: pointer;
transition: all 200ms ease;
border: 1px solid rgba(212,175,55,0.4);
background: transparent;
color: var(--gold);
white-space: nowrap;
font-weight: 600;
}
.cookie-banner-btn:hover {
background: rgba(212,175,55,0.10);
border-color: var(--gold);
}
.cookie-banner-btn.is-primary {
background: var(--gold);
color: #0a0a0a;
border-color: var(--gold);
}
.cookie-banner-btn.is-primary:hover {
background: #FFD75A;
}
@media (max-width: 600px) {
.cookie-banner { width: calc(100vw - 16px); bottom: 8px; padding: 16px; }
.cookie-banner-actions { width: 100%; justify-content: stretch; }
.cookie-banner-btn { flex: 1; padding: 12px 14px; font-size: 9px; }
}
/* ============================================================
FOOTER LEGAL LINKS (P0 / launch)
Add a "ПРАВНА ИНФОРМАЦИЯ" column visible across pages.
The footer-grid already supports auto-fit columns; nothing
structural needed here, just visual harmony with siblings.
============================================================ */
.footer-col h4.footer-h { /* no override; mirrors existing footer columns */ }
/* ============================================================
HEADER MINI NAV (legal pages)
A simple, low-key navigation for terms/privacy/cookies pages.
============================================================ */
.header-mini-nav {
display: flex;
gap: 18px;
align-items: center;
}
.header-mini-nav a {
color: rgba(245,245,240,0.7);
text-decoration: none;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 6px 0;
transition: color 200ms ease;
}
.header-mini-nav a:hover { color: var(--gold); }
@media (max-width: 600px) {
.header-mini-nav { gap: 12px; }
.header-mini-nav a { font-size: 10px; letter-spacing: 0.14em; }
}
/* ============================================================
FEATURED CAR CARD + REAL-PHOTO TAG
Used for cars with real photos (vs stock).
Makes the card stand out with a gold border accent.
============================================================ */
.fleet-card.is-featured {
border-color: rgba(212,175,55,0.45) !important;
box-shadow: 0 0 0 1px rgba(212,175,55,0.18), 0 24px 60px rgba(0,0,0,0.45);
}
.fleet-card.is-featured:hover {
border-color: var(--gold) !important;
box-shadow: 0 0 0 1px rgba(212,175,55,0.35), 0 32px 80px rgba(0,0,0,0.55);
}
.fleet-card.is-featured .card-photo::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid rgba(212,175,55,0.30);
border-radius: inherit;
pointer-events: none;
z-index: 2;
transition: border-color 280ms ease;
}
.fleet-card.is-featured:hover .card-photo::after {
border-color: rgba(212,175,55,0.55);
}
.fleet-card .real-photo-tag {
position: absolute;
top: 12px;
right: 12px;
z-index: 3;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
background: var(--gold);
color: #0a0a0a;
border: 1px solid rgba(0, 0, 0, 0.15);
padding: 5px 10px;
border-radius: 4px;
pointer-events: none;
font-weight: 700;
box-shadow: 0 4px 12px rgba(212,175,55,0.35);
}
.fleet-card .real-photo-tag b {
color: #0a0a0a;
font-weight: 800;
margin-right: 3px;
}
/* For real photos: cover the entire card image (vs stock _nobg which is 'contain') */
.card-photo .photo-img.photo-img-cover {
background-size: cover !important;
background-position: center center !important;
}
/* ============================================================
HIDE PHOTO BADGES — user requested cleaner cards
Hides "★ Снимка на модела" + "★ РЕАЛНА СНИМКА" tags
on fleet cards and on car detail page disclaimer.
============================================================ */
.fleet-card .stock-photo-tag,
.fleet-card .real-photo-tag,
.car-page .stock-photo-disclaimer,
.stock-photo-disclaimer {
display: none !important;
}
/* ============================================================
FOOTER — extra-small breakpoint adjustments for 5 columns
============================================================ */
@media (min-width: 721px) and (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; max-width: 480px; }
}
/* ============================================================
FOOTER + NAV refinements (user requested)
- Brand column: align logo left + bigger blurb under "renti4ka"
- All footer links: bigger
- Header nav buttons: bigger labels
============================================================ */
/* Brand column: pull logo flush left + make blurb readable */
.footer-brand {
align-items: flex-start;
}
.footer-logo {
align-self: flex-start;
display: block;
object-position: left center;
height: 44px;
}
.footer-blurb {
font-size: 14px;
line-height: 1.55;
max-width: 36ch;
}
/* Footer column links — bigger */
.footer-col li,
.footer-col a {
font-size: 14px;
}
.footer-h {
font-size: 11px;
}
/* Header nav button labels — bigger */
.login-btn-label {
font-size: 13px;
letter-spacing: 0.16em;
}
.menu-trigger .mt-label {
font-size: 13px;
letter-spacing: 0.20em;
}
/* Mini-nav on legal pages (terms/privacy/cookies) — bigger */
.header-mini-nav a {
font-size: 12px;
letter-spacing: 0.16em;
}
/* Override the desktop grid: shrink brand column so logo sits more left */
@media (min-width: 1101px) {
.footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; }
}
/* ============================================================
CTA CARD — mobile polish (border, radius, centered button)
User requested: cleaner border on phone + button-only layout.
============================================================ */
.cta-card {
border-radius: 16px;
border-color: rgba(212,175,55,0.45);
}
.cta-card::before {
border-radius: inherit;
}
.cta-actions .btn {
/* Now that we have a single button, let it take comfortable width */
min-width: 240px;
}
@media (max-width: 720px) {
.big-cta { padding: var(--s-12) 0; }
.cta-card {
padding: var(--s-10) var(--s-6);
border-radius: 14px;
border-width: 1px;
}
.cta-actions {
justify-content: center;
margin-top: var(--s-2);
}
.cta-actions .btn {
width: 100%;
min-width: 0;
justify-content: center;
}
/* Star is decorative — fade further on small screens to avoid overlap */
.cta-star { opacity: 0.10; font-size: clamp(80px, 28vw, 140px); }
}
/* ============================================================
FLOATING ACTION BUTTONS — fix stacking + hide redundancy
- chat-float (WhatsApp, Viber, Call) was overlapping points-fab
- Hide WhatsApp/Viber floating bubbles on non-contact pages
(consistency with footer cleanup); keep only Call + Points
- On contact.html, all 3 chat icons stay (they belong there)
============================================================ */
/* Hide floating WhatsApp + Viber on all pages EXCEPT contact.html */
body:not(.page-contact) .chat-float .cf-wa,
body:not(.page-contact) .chat-float .cf-viber {
display: none;
}
/* Stack chat-float above points-fab on desktop so the gold Call button
is visible (was overlapping) */
.chat-float {
bottom: 100px;
}
@media (max-width: 720px) {
.chat-float { bottom: 100px; }
}
/* On contact.html (3 chat buttons + points-fab), give more space */
body.page-contact .chat-float {
bottom: 100px;
}
/* ============================================================
HERO BOOKING WIDGET - v3 (Hertz-style 2-step + custom dropdown)
============================================================ */
.hero-book {
display: flex;
flex-direction: column;
gap: 12px;
/* 22px padding so pills clear the 18px card border-radius cleanly (no clipping at corners) */
padding: 22px;
background: linear-gradient(180deg, rgba(20,20,20,0.96), rgba(13,13,13,0.98));
border: 1px solid rgba(212,175,55,0.32);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.06);
position: relative;
overflow: visible;
}
.hero-book::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #D4AF37, transparent);
opacity: 0.7;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.hero-book input[type="hidden"] { display: none !important; }
.hero-book .flatpickr-input,
.hero-book #hb-fp-anchor {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
}
.hb-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 10px;
}
/* Dates stay side-by-side at all sizes (Hertz-style compact) */
/* ---------- Pills ---------- */
.hb-pill {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #ffffff;
border: 1.5px solid transparent;
border-radius: 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 56px;
position: relative;
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.hb-pill:hover {
border-color: rgba(212,175,55,0.65);
box-shadow: 0 8px 24px rgba(212,175,55,0.18);
transform: translateY(-1px);
}
.hb-pill:focus-visible { outline: 2px solid #D4AF37; outline-offset: 2px; }
.hb-pill:active { transform: translateY(0); }
.hb-pill.is-picking {
border-color: #D4AF37;
/* Inset ring (inside pill bounds) + contained drop shadow — no overflow past card edge */
box-shadow:
inset 0 0 0 1.5px #D4AF37,
0 6px 18px -4px rgba(212,175,55,0.35);
}
.hb-icon { width: 18px; height: 18px; color: #D4AF37; flex-shrink: 0; }
.hb-chevron {
width: 16px; height: 16px;
color: #D4AF37;
flex-shrink: 0;
margin-left: auto;
transition: transform 200ms ease;
}
.hb-pill-cat[aria-expanded="true"] .hb-chevron { transform: rotate(180deg); }
.hb-pill-text {
display: flex; flex-direction: column; gap: 4px;
min-width: 0; flex: 1;
}
.hb-pill-label {
font-size: 9px;
letter-spacing: 0.22em;
color: rgba(0,0,0,0.5);
text-transform: uppercase;
font-weight: 600;
}
.hb-pill-value {
font-size: 14px;
color: #1a1a1a;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: -0.005em;
}
/* ---------- Custom category dropdown ---------- */
.hb-cat-wrap { position: relative; }
.hb-cat-panel {
position: absolute;
top: calc(100% + 8px);
left: 0; right: 0;
z-index: 50;
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 12px;
box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,175,55,0.20);
padding: 6px;
display: flex;
flex-direction: column;
gap: 2px;
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 180ms ease, transform 180ms ease;
}
.hb-cat-panel.is-open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.hb-cat-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: #1a1a1a;
width: 100%;
transition: background 150ms ease, color 150ms ease;
letter-spacing: -0.005em;
}
.hb-cat-option:hover, .hb-cat-option:focus-visible {
background: rgba(212,175,55,0.10);
color: #1a1a1a;
outline: none;
}
.hb-cat-option.is-active {
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(212,175,55,0.08));
color: #1a1a1a;
}
.hb-cat-option.is-active .hb-cat-name::before {
content: "★ ";
color: #D4AF37;
font-weight: 700;
}
.hb-cat-name { flex: 1; }
.hb-cat-count {
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(0,0,0,0.5);
text-transform: uppercase;
font-weight: 600;
}
/* ---------- Primary CTA ---------- */
.hb-cta {
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%) !important;
color: #0a0a0a !important;
border: none !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
font-size: 13px !important;
padding: 16px 20px !important;
border-radius: 12px !important;
min-height: 52px !important;
box-shadow: 0 8px 22px rgba(212,175,55,0.28), inset 0 1px 0 rgba(255,255,255,0.4) !important;
transition: transform 200ms ease, box-shadow 200ms ease !important;
margin-top: 4px;
}
.hb-cta:hover {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(212,175,55,0.40), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.hb-cta:active { transform: translateY(0); }
/* ============================================================
FLATPICKR - light theme (Hertz vibe), 2-month, with action bar
============================================================ */
.flatpickr-calendar {
background: #ffffff !important;
border: 1px solid rgba(0,0,0,0.08) !important;
border-radius: 14px !important;
box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 0 0 1px rgba(212,175,55,0.18) !important;
color: #1a1a1a !important;
font-family: 'Inter', sans-serif !important;
padding: 8px 8px 0 !important;
width: auto !important;
}
.flatpickr-calendar.open { z-index: 1000; }
.flatpickr-months {
padding: 12px 8px 8px !important;
display: flex;
align-items: center;
}
.flatpickr-month {
height: auto !important;
color: #1a1a1a !important;
}
.flatpickr-current-month {
font-size: 16px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.flatpickr-current-month .cur-month,
.flatpickr-current-month .cur-year,
.flatpickr-monthDropdown-months,
.flatpickr-monthDropdown-month,
.numInputWrapper,
.numInput {
color: #1a1a1a !important;
}
.flatpickr-prev-month, .flatpickr-next-month {
color: #1a1a1a !important;
fill: #1a1a1a !important;
width: 36px !important;
height: 36px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 8px !important;
transition: background 200ms ease;
}
.flatpickr-prev-month:hover, .flatpickr-next-month:hover {
background: rgba(212,175,55,0.12) !important;
color: #B8902C !important;
fill: #B8902C !important;
}
.flatpickr-prev-month svg, .flatpickr-next-month svg { width: 14px; height: 14px; }
.flatpickr-weekdays { background: transparent !important; height: auto !important; }
.flatpickr-weekday {
color: rgba(0,0,0,0.45) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.08em;
text-transform: lowercase;
}
.dayContainer { padding: 4px 0 !important; }
.flatpickr-day {
color: #1a1a1a !important;
border: none !important;
border-radius: 50% !important;
font-weight: 500;
font-size: 13px;
height: 36px !important;
line-height: 36px !important;
margin-top: 1px;
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
color: rgba(0,0,0,0.20) !important;
}
.flatpickr-day:hover {
background: rgba(212,175,55,0.14) !important;
color: #1a1a1a !important;
}
.flatpickr-day.today {
border: 1.5px solid rgba(212,175,55,0.55) !important;
color: #1a1a1a !important;
font-weight: 700;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: #1a1a1a !important;
color: #FFE9A0 !important;
border-color: #1a1a1a !important;
font-weight: 700;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
color: rgba(0,0,0,0.18) !important;
background: transparent !important;
cursor: not-allowed;
}
.flatpickr-monthDropdown-months { background: transparent; }
/* ---------- Bottom action bar (time + OK/Cancel) ---------- */
.hb-cal-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 12px;
border-top: 1px solid rgba(212,175,55,0.30);
margin: 8px -8px 0;
background: linear-gradient(180deg, #fffaf0, #fff);
flex-wrap: wrap;
}
.hb-cal-time {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 0;
}
.hb-cal-time-icon { color: #1a1a1a; flex-shrink: 0; }
.hb-cal-time-label {
font-size: 12px;
color: #1a1a1a;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hb-cal-time-input {
background: #fff;
color: #1a1a1a;
border: 1.5px solid rgba(0,0,0,0.15);
border-radius: 8px;
padding: 6px 10px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
cursor: pointer;
appearance: auto;
-webkit-appearance: auto;
flex-shrink: 0;
}
.hb-cal-time-input:focus { outline: 2px solid #D4AF37; outline-offset: 1px; border-color: #D4AF37; }
.hb-cal-actions { display: flex; gap: 8px; flex-shrink: 0; }
.hb-cal-btn {
padding: 10px 22px;
border-radius: 10px;
font-family: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.05em;
cursor: pointer;
transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
border: 1.5px solid transparent;
min-height: 40px;
}
.hb-cal-cancel {
background: #fff;
color: #1a1a1a;
border-color: rgba(0,0,0,0.20);
}
.hb-cal-cancel:hover { background: #f5f5f0; border-color: #1a1a1a; }
.hb-cal-ok {
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
color: #0a0a0a;
box-shadow: 0 6px 16px rgba(212,175,55,0.35);
}
.hb-cal-ok:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(212,175,55,0.45); }
.hb-cal-ok:active { transform: translateY(0); }
@media (max-width: 480px) {
.hb-cal-bar { padding: 12px 8px; gap: 10px; }
.hb-cal-time-label { display: none; }
.hb-cal-btn { padding: 9px 16px; font-size: 12px; }
}
/* ============================================================
HERO BOOKING - mobile modal mode (Hertz-style centered popup)
Triggered when JS adds .hb-cal-modal class to flatpickr-calendar
============================================================ */
/* Title bar (above the calendar months) - only visible in modal mode */
.hb-cal-title {
display: none;
align-items: center;
gap: 10px;
padding: 16px 18px 12px;
font-size: 15px;
font-weight: 700;
color: #1a1a1a;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.hb-cal-title svg { color: #1a1a1a; flex-shrink: 0; }
/* Backdrop - dark overlay covering the page.
Visible by default once the element is mounted; animation fades it in.
(Avoids rAF-based class-toggle which is unreliable in throttled tabs.) */
.hb-cal-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: 9998;
opacity: 1;
animation: hb-backdrop-in 220ms ease both;
}
.hb-cal-backdrop.is-shown { opacity: 1; }
@keyframes hb-backdrop-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hb-cal-backdrop { animation: none; }
}
/* Force the calendar visible when open — flatpickr's fpFadeInDown keyframe
leaves opacity at the element's base value (0) under prefers-reduced-motion
because the animation finishes in 0.01ms with no forwards fill. */
.flatpickr-calendar.open { opacity: 1 !important; }
/* Modal mode - calendar styled as a centered sheet */
.flatpickr-calendar.hb-cal-modal {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
z-index: 9999 !important;
width: min(420px, calc(100vw - 32px)) !important;
max-height: calc(100vh - 32px);
overflow: auto;
border-radius: 16px !important;
box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.20) !important;
/* Override Flatpickr arrow positioning that doesn't apply in modal */
}
.flatpickr-calendar.hb-cal-modal::before,
.flatpickr-calendar.hb-cal-modal::after {
display: none !important;
}
.flatpickr-calendar.hb-cal-modal .hb-cal-title {
display: flex;
}
/* In modal: only show 1 month for clarity on small screens */
.flatpickr-calendar.hb-cal-modal .flatpickr-month + .flatpickr-month,
.flatpickr-calendar.hb-cal-modal .flatpickr-rContainer + .flatpickr-rContainer {
display: none;
}
/* Larger touch targets in modal */
.flatpickr-calendar.hb-cal-modal .flatpickr-day {
height: 40px !important;
line-height: 40px !important;
font-size: 14px;
}
/* Bigger header in modal */
.flatpickr-calendar.hb-cal-modal .flatpickr-current-month {
font-size: 17px !important;
}
/* Bottom bar tweaks in modal: stack time + actions vertically on very small viewports */
.flatpickr-calendar.hb-cal-modal .hb-cal-bar {
padding: 16px 14px;
gap: 12px;
}
@media (max-width: 380px) {
.flatpickr-calendar.hb-cal-modal .hb-cal-bar {
flex-direction: column;
align-items: stretch;
}
.flatpickr-calendar.hb-cal-modal .hb-cal-actions {
justify-content: flex-end;
}
}
/* CTA in modal: bigger touch target */
.flatpickr-calendar.hb-cal-modal .hb-cal-btn {
min-height: 48px;
padding: 12px 24px;
font-size: 14px;
}
.flatpickr-calendar.hb-cal-modal .hb-cal-ok {
min-width: 100px;
}
/* ============================================================
HERO MOBILE - Sticky quick-book on top + hero text below
Activates only on viewports <= 720px. Desktop unchanged.
============================================================ */
@media (max-width: 720px) {
/* Flatten the hero-inner-split grid into a vertical flex with custom order */
.hero-inner.hero-inner-split {
display: flex !important;
flex-direction: column !important;
gap: 20px;
padding-top: 16px !important;
}
/* Reorder: bookcard first, hero text second */
.hero-bookcard { order: 1; }
.hero-content,
.hero-content-centered { order: 2; }
/* Fixed widget below nav — ALWAYS on top of page content */
.hero-bookcard {
position: fixed !important;
top: calc(var(--header-h, 60px) + 8px) !important;
left: 8px !important;
right: 8px !important;
z-index: 950 !important; /* above all page sections, below auth modals (1000) */
width: auto !important;
max-width: calc(100vw - 16px) !important;
margin: 0 !important;
isolation: isolate; /* own stacking context for calendar/dropdown children */
}
/* When user scrolls past the widget — collapse it (search icon takes over) */
body.is-widget-collapsed .hero-bookcard {
display: none !important;
}
/* When user clicks the FAB — force-show widget at current scroll position with pop-in */
body.is-widget-collapsed.is-widget-forced-open .hero-bookcard {
display: block !important;
animation: hb-pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
body.is-widget-forced-open .header-search-fab {
display: none !important;
}
@keyframes hb-pop-in {
from { opacity: 0; transform: translateY(-12px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Reserve space at top of hero so content isn't hidden under the fixed widget.
Compact widget height ~190px on mobile */
.hero-inner.hero-inner-split {
padding-top: 210px !important;
}
/* Hide the eyebrow + h2 above the form on mobile (saves vertical space) */
.hero-bookcard .hbc-head {
display: none !important;
}
/* Compact booking card — Hertz elegance, not full-screen takeover */
.hero-book {
padding: 10px !important;
border-radius: 14px !important;
gap: 8px !important;
}
/* Dates STAY side-by-side on all phone sizes (compact pair) */
.hero-book .hb-row {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
gap: 6px;
}
.hero-book .hb-pill {
padding: 8px 10px !important;
min-height: 46px !important;
border-radius: 10px !important;
gap: 8px;
}
.hero-book .hb-pill-label {
font-size: 8px;
letter-spacing: 0.18em;
}
.hero-book .hb-pill-value {
font-size: 12px;
}
/* Smaller icons inside compact pills */
.hero-book .hb-icon {
width: 14px;
height: 14px;
}
.hero-book .hb-cta {
padding: 12px 16px !important;
font-size: 12px !important;
letter-spacing: 0.14em !important;
min-height: 42px !important;
border-radius: 10px !important;
margin-top: 0 !important;
}
/* Hide trust strip on mobile (CASCO/БЕЗ ЛИМИТ КМ/ОТГОВОР < 15 мин)
-- the hero subtitle below already says the same things */
.hero-bookcard .hmb-trust {
display: none !important;
}
/* Hero text: smaller, tighter, sits naturally below sticky widget */
.hero-content,
.hero-content-centered {
padding-top: 8px !important;
padding-bottom: 24px !important;
text-align: left;
}
.hero-title {
font-size: clamp(34px, 9vw, 52px) !important;
line-height: 1.0 !important;
letter-spacing: -0.025em;
margin-bottom: 14px !important;
text-align: left !important;
}
.hero-sub {
text-align: left !important;
align-items: flex-start !important;
max-width: 100% !important;
margin: 0 !important;
}
.hero-sub > span { text-align: left !important; }
.hero-sub-bold {
font-size: 15px;
line-height: 1.4;
}
.hero-sub-meta {
font-size: 10px;
letter-spacing: 0.10em;
line-height: 1.55;
}
/* Reduce hero section min-height on mobile so the widget doesn't push
decorative content too far out. Hero background image still shows.
Also reset `perspective` -- it creates a containing block for fixed children. */
section.hero,
.hero {
min-height: auto !important;
padding-bottom: 32px !important;
perspective: none !important;
transform: none !important;
filter: none !important;
}
/* Ensure sticky works -- override any overflow: hidden on hero parents.
`overflow: clip` keeps the visual clipping behavior but allows sticky descendants. */
section.hero,
.hero,
main {
overflow: clip !important;
overflow: -webkit-paged-x; /* fallback for older browsers */
}
/* Modern browsers will use `clip` (last value wins); older fall back to visible */
@supports (overflow: clip) {
section.hero, .hero, main { overflow: clip !important; }
}
/* Hide decorative hero ornaments on mobile -- they take vertical space
and don't add value when widget is dominant */
.hero-sidestrip,
.hero-rec,
.hero-bracket,
.hero-curtain,
.hero-slash {
display: none !important;
}
}
/* On very small phones, even more compact */
@media (max-width: 380px) {
.hero-book .hb-pill { padding: 9px 11px; min-height: 50px; }
.hero-book .hb-pill-value { font-size: 12.5px; }
.hero-title { font-size: clamp(30px, 8.5vw, 42px) !important; }
}
/* ============================================================
HEADER SEARCH FAB — appears in nav between logo and login
when user scrolls past the booking widget. Click = scroll back
to top so widget reappears.
============================================================ */
.header-search-fab {
/* Default state: hidden via display:none. Becomes inline-flex when widget collapses. */
display: none;
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
color: #0a0a0a;
border: none;
cursor: pointer;
align-items: center;
justify-content: center;
justify-self: end;
align-self: center;
flex-shrink: 0;
box-shadow: 0 6px 18px rgba(212,175,55,0.45);
transition: transform 200ms ease, box-shadow 200ms ease;
}
body.is-widget-collapsed .header-search-fab {
display: inline-flex;
animation: fab-pop-in 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes fab-pop-in {
from { transform: scale(0.4) rotate(-30deg); opacity: 0; }
to { transform: scale(1) rotate(0deg); opacity: 1; }
}
.header-search-fab:hover {
transform: scale(1.06);
box-shadow: 0 10px 24px rgba(212,175,55,0.6);
}
.header-search-fab:active { transform: scale(0.96); }
.header-search-fab:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; }
/* Show only on mobile/tablet — desktop has full widget visible side-by-side */
@media (min-width: 1080px) {
.header-search-fab { display: none !important; }
}
/* ============================================================
HERO MOBILE LAYOUT v3 — full-bleed video, no card, text overlay
Video covers the whole hero (behind nav + booking widget).
Hero text sits as overlay near the bottom.
============================================================ */
@media (max-width: 720px) {
/* 1. Disable cinematic scroll-pin (no 260vh) — keep natural full-screen hero */
.hero-story {
height: auto !important;
}
.hero-story .hero {
position: relative !important;
min-height: 100vh !important;
max-height: none !important;
}
/* 2. Hero — exactly viewport height, video as background, text positioned at bottom */
section.hero,
.hero {
display: block !important;
padding: 0 !important;
background: #0a0a0a;
overflow: clip !important; /* contains absolute children, allows fixed siblings */
perspective: none !important;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
}
/* 3. Video / poster — full-bleed cover, behind everything */
.hero-still,
.hero-video {
position: absolute !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
margin: 0 !important;
border-radius: 0 !important;
object-fit: cover !important;
object-position: center 35% !important;
box-shadow: none !important;
z-index: 0 !important;
transform: none !important;
filter: brightness(0.85) !important;
animation: none !important;
}
.hero-video { z-index: 1 !important; }
/* 4. Vignette + overlay — keep, for text contrast over video */
.hero-vignette {
display: block !important;
position: absolute !important;
inset: 0 !important;
z-index: 2 !important;
background:
linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.85) 100%) !important;
pointer-events: none !important;
}
/* Hide other decorative noise on mobile */
.hero-bg,
.hero-overlay,
.hero-grain,
.hero-scanlines,
.hero-watermark,
.hero-curtain,
.hero-curtain-top,
.hero-curtain-bot,
.hero-slash,
.hero-bracket,
.hero-rec,
.hero-sidestrip {
display: none !important;
}
/* 5. Hero text — absolute overlay anchored at bottom of viewport.
z-index 950 = same as widget so widget (a child) isn't trapped in lower context. */
.hero-inner.hero-inner-split {
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 950 !important;
padding: 0 16px 32px !important;
margin: 0 !important;
min-height: 0 !important;
display: block !important;
}
.hero-content,
.hero-content-centered {
padding: 0 !important;
margin: 0 !important;
color: #fff;
}
.hero-title {
text-shadow: 0 4px 18px rgba(0,0,0,0.8), 0 1px 4px rgba(0,0,0,0.6);
margin-bottom: 12px !important;
}
.hero-sub-bold,
.hero-sub-meta {
text-shadow: 0 2px 10px rgba(0,0,0,0.85);
}
}
/* ============================================================
M5 PROM SECTION — Countdown + Scarcity, full-bleed video
Replaces the old .showcase-clean / 3D iframe.
============================================================ */
.m5-prom {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: clamp(48px, 10vh, 96px) 0;
overflow: hidden;
background: #050505;
isolation: isolate;
}
/* Full-bleed video background */
.m5-prom-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
pointer-events: none;
}
/* Dark gradient overlay for text contrast */
.m5-prom-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.40) 30%,
rgba(0,0,0,0.55) 70%,
rgba(0,0,0,0.92) 100%);
pointer-events: none;
}
.m5-prom-inner {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 24px;
width: 100%;
max-width: 720px;
padding: 0 var(--gutter, 16px);
color: #f5f5f0;
}
/* Eyebrow tag */
.m5-prom-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: rgba(212,175,55,0.10);
border: 1px solid rgba(212,175,55,0.45);
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.28em;
color: #FFD75A;
text-transform: uppercase;
font-weight: 600;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* Headline */
.m5-prom-title {
font-family: 'Anton', sans-serif;
font-size: clamp(48px, 9vw, 96px);
font-weight: 400;
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0;
text-shadow: 0 4px 20px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.5);
}
.m5-prom-title .gold-i {
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
font-weight: 600;
}
/* ---------- Countdown ---------- */
.m5-countdown {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: 100%;
max-width: 480px;
margin-top: 8px;
}
.m5-cd-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 16px 6px;
background: rgba(20,20,20,0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(212,175,55,0.30);
border-radius: 12px;
box-shadow: 0 4px 18px rgba(0,0,0,0.35);
}
.m5-cd-num {
font-family: 'Anton', sans-serif;
font-size: clamp(32px, 7vw, 56px);
line-height: 1;
letter-spacing: 0.02em;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-feature-settings: 'tnum' 1;
}
.m5-cd-label {
font-size: 9px;
letter-spacing: 0.20em;
color: rgba(245,245,240,0.65);
text-transform: uppercase;
margin-top: 4px;
}
.m5-countdown.is-finished .m5-cd-num {
color: #FFD75A;
-webkit-text-fill-color: #FFD75A;
}
/* ---------- Scarcity + Social proof ---------- */
.m5-prom-signals {
display: flex;
flex-direction: column;
gap: 10px;
align-items: center;
width: 100%;
margin-top: 4px;
}
.m5-prom-signal {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
color: rgba(245,245,240,0.85);
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.m5-prom-signal strong {
color: #FFD75A;
font-weight: 700;
}
/* Pulsing red dot for scarcity */
.m5-pulse-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ff4444;
box-shadow: 0 0 0 0 rgba(255,68,68,0.7);
animation: m5-pulse 1.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
flex-shrink: 0;
}
@keyframes m5-pulse {
0% { box-shadow: 0 0 0 0 rgba(255,68,68,0.7); transform: scale(1); }
70% { box-shadow: 0 0 0 12px rgba(255,68,68,0); transform: scale(1.05); }
100% { box-shadow: 0 0 0 0 rgba(255,68,68,0); transform: scale(1); }
}
.m5-social { color: rgba(245,245,240,0.75); }
.m5-social span:first-child {
color: #D4AF37;
font-weight: 700;
}
/* ---------- Package list ---------- */
.m5-prom-package {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 24px;
width: 100%;
max-width: 480px;
list-style: none;
margin: 8px 0 0;
padding: 16px 20px;
background: rgba(10,10,10,0.4);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 12px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.m5-prom-package li {
font-size: 11px;
letter-spacing: 0.10em;
color: rgba(245,245,240,0.85);
text-transform: uppercase;
text-align: left;
}
/* ---------- CTA ---------- */
.m5-prom-cta {
width: 100%;
max-width: 360px;
min-height: 56px;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%) !important;
color: #0a0a0a !important;
border: none !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
font-size: 14px !important;
border-radius: 12px !important;
box-shadow: 0 14px 36px rgba(212,175,55,0.40), inset 0 1px 0 rgba(255,255,255,0.4) !important;
margin-top: 4px;
transition: transform 200ms ease, box-shadow 200ms ease !important;
}
.m5-prom-cta:hover {
transform: translateY(-2px);
box-shadow: 0 20px 44px rgba(212,175,55,0.55), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.m5-prom-cta:active { transform: translateY(0); }
.m5-prom-fineprint {
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(245,245,240,0.55);
text-transform: uppercase;
margin: 4px 0 0;
text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
/* ---------- Mobile ---------- */
@media (max-width: 720px) {
.m5-prom {
min-height: auto;
padding: 64px 0;
}
.m5-prom-inner {
gap: 18px;
}
.m5-prom-package {
grid-template-columns: 1fr;
gap: 8px;
padding: 14px 16px;
}
.m5-prom-package li {
font-size: 11px;
}
.m5-cd-cell {
padding: 12px 4px;
}
.m5-prom-signal {
font-size: 12px;
}
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
.m5-prom-video { display: none; }
.m5-prom { background: #0a0a0a; }
.m5-pulse-dot { animation: none; }
}
/* ============================================================
M5 MARK — brutal display lockup for the section title.
Massive, chrome-split, forward-leaning, with a pulsing gold
underline accent. The "." becomes a square brutalist marker.
============================================================ */
.m5-mark {
display: inline-block;
position: relative;
font-family: 'Anton', sans-serif;
font-size: clamp(96px, 24vw, 220px);
line-height: 0.85;
letter-spacing: -0.06em;
font-style: italic;
font-weight: 400;
text-transform: uppercase;
/* Chrome split: white top → gold bottom, with a sharp midline */
background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 48%,
#FFE9A0 49%,
#D4AF37 50%,
#B8902C 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
/* Forward racing lean */
transform: skew(-6deg);
/* Multi-layer drop shadow for depth + brutal weight */
filter:
drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55))
drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 24px rgba(212, 175, 55, 0.35));
margin-top: 8px;
padding-bottom: 6px;
/* Pulse the gold glow subtly */
animation: m5-mark-pulse 3.6s ease-in-out infinite;
}
/* The dot is a brutalist square block, not a regular period */
.m5-dot {
display: inline-block;
width: 0.18em;
height: 0.18em;
margin-left: 0.04em;
vertical-align: 0.06em;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-text-fill-color: initial;
color: transparent;
box-shadow: 0 4px 14px rgba(212, 175, 55, 0.55);
/* Override the chrome split for the dot — solid gold square */
background-clip: padding-box;
}
@keyframes m5-mark-pulse {
0%, 100% {
filter:
drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55))
drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 24px rgba(212, 175, 55, 0.30));
}
50% {
filter:
drop-shadow(0 6px 0 rgba(0, 0, 0, 0.55))
drop-shadow(0 14px 28px rgba(0, 0, 0, 0.45))
drop-shadow(0 0 38px rgba(212, 175, 55, 0.55));
}
}
/* Adjust the headline so "Бал. 14 юни." sits as smaller eyebrow above M5 */
.m5-prom-title {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
@media (max-width: 720px) {
.m5-mark {
font-size: clamp(110px, 32vw, 180px);
margin-top: 4px;
}
}
@media (prefers-reduced-motion: reduce) {
.m5-mark { animation: none; }
}
/* ============================================================
M5 COUNTDOWN — state label + grid wrapper (added with range support)
============================================================ */
.m5-cd-state {
font-size: 11px;
letter-spacing: 0.22em;
color: rgba(245, 245, 240, 0.75);
text-transform: uppercase;
margin: 0 0 10px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
text-align: center;
}
.m5-cd-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
width: 100%;
}
/* In-season state: glowing green dot in the label */
.m5-countdown.is-in-season .m5-cd-state {
color: #FFD75A;
}
.m5-countdown.is-in-season .m5-cd-state::before {
content: "● ";
color: #4ade80;
animation: m5-pulse-green 1.4s ease-in-out infinite;
}
.m5-countdown.is-finished .m5-cd-state {
color: rgba(245, 245, 240, 0.55);
font-style: italic;
}
@keyframes m5-pulse-green {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* Headline — let the long range break naturally on small screens */
.m5-prom-title .gold-i {
white-space: nowrap;
}
@media (max-width: 480px) {
.m5-prom-title .gold-i {
white-space: normal;
font-size: 0.85em;
}
}
/* ============================================================
FLEET CAROUSEL — mobile horizontal scroll with snap + dots
Hertz-style: 1 card visible at a time, swipe sideways.
On desktop the .fleet-grid stays as normal grid.
============================================================ */
/* Mobile: convert .fleet-grid to horizontal scroll-snap carousel */
@media (max-width: 1079px) {
.fleet-grid[data-fleet-carousel] {
display: flex !important;
flex-direction: row !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding: 16px;
gap: 16px;
padding: 4px 16px 20px;
margin: 0 -16px;
/* Hide scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
}
.fleet-grid[data-fleet-carousel]::-webkit-scrollbar { display: none; }
.fleet-grid[data-fleet-carousel] .fleet-card {
flex: 0 0 calc(100% - 32px);
max-width: calc(100vw - 64px);
scroll-snap-align: start;
scroll-snap-stop: always;
}
/* Show only first 4 cards in the mobile carousel */
.fleet-grid[data-fleet-carousel] .fleet-card:nth-child(n+5) {
display: none !important;
}
/* Show carousel controls only on mobile */
.fleet-carousel-controls[data-fleet-controls] {
display: flex !important;
align-items: center;
justify-content: center;
gap: 16px;
margin: 8px 0 16px;
}
/* Show "Разгледай целия автопарк" full-width button on mobile (the slim section CTA is hidden) */
.fleet-view-all-mobile {
display: flex !important;
width: 100%;
text-align: center;
justify-content: center;
margin-top: 8px;
}
.fleet-preview .section-cta {
display: none !important; /* hide the small "ВИЖ ВСИЧКИ 9 →" pill on mobile */
}
}
/* Carousel controls — hidden by default (desktop) */
.fleet-carousel-controls {
display: none;
}
.fc-arrow {
width: 44px;
height: 44px;
border-radius: 50%;
background: transparent;
border: 1.5px solid rgba(212, 175, 55, 0.40);
color: #FFD75A;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
flex-shrink: 0;
}
.fc-arrow:hover { background: rgba(212, 175, 55, 0.14); border-color: #D4AF37; }
.fc-arrow:active { transform: scale(0.96); }
.fc-arrow:disabled { opacity: 0.3; cursor: default; }
.fc-arrow:disabled:hover { background: transparent; border-color: rgba(212, 175, 55, 0.40); }
.fc-dots {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
justify-content: center;
}
.fc-dot {
width: 28px;
height: 4px;
border-radius: 2px;
background: rgba(245, 245, 240, 0.18);
border: none;
padding: 0;
cursor: pointer;
transition: background 200ms ease, width 200ms ease;
flex-shrink: 0;
}
.fc-dot.is-active {
background: linear-gradient(90deg, #FFE9A0, #D4AF37);
width: 44px;
}
.fleet-view-all-mobile { display: none; }
/* Desktop: hide the mobile-only view-all button (regular section-cta already shown) */
@media (min-width: 1080px) {
.fleet-view-all-mobile { display: none !important; }
}
/* ============================================================
M5 BAL PAGE — full styles
Dedicated reservation page for BMW M5 prom season 2026.
============================================================ */
.m5-bal-page {
background: linear-gradient(180deg, #0a0a0a 0%, #141414 100%);
min-height: calc(100vh - var(--header-h, 60px));
padding-top: var(--header-h, 60px);
}
/* ---------- Hero strip ---------- */
.m5-bal-hero {
position: relative;
min-height: 28vh;
padding: 32px 0 28px;
overflow: hidden;
isolation: isolate;
background: #050505;
}
.m5-bal-hero-video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center 35%;
z-index: 0;
pointer-events: none;
}
.m5-bal-hero-overlay {
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
.m5-bal-hero-inner {
position: relative;
z-index: 2;
text-align: center;
color: #f5f5f0;
}
.m5-bal-eyebrow {
display: inline-block;
padding: 6px 14px;
background: rgba(212,175,55,0.12);
border: 1px solid rgba(212,175,55,0.45);
border-radius: 999px;
font-size: 11px;
letter-spacing: 0.26em;
color: #FFD75A;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 12px;
}
.m5-bal-title {
font-family: 'Anton', sans-serif;
font-size: clamp(36px, 7vw, 68px);
font-weight: 400;
line-height: 1.0;
letter-spacing: -0.02em;
text-transform: uppercase;
margin: 0 0 8px;
text-shadow: 0 4px 18px rgba(0,0,0,0.6);
}
.m5-bal-title .gold-i {
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-style: italic;
font-weight: 600;
}
.m5-bal-sub {
font-size: 14px;
letter-spacing: 0.04em;
color: rgba(245,245,240,0.85);
margin: 0;
text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
/* ---------- Calendar wrap ---------- */
.m5-bal-calendar-wrap {
padding: 40px 0;
}
.m5-bal-cal-head {
text-align: center;
margin-bottom: 28px;
}
.m5-bal-cal-title {
font-family: 'Anton', sans-serif;
font-size: clamp(28px, 5vw, 44px);
font-weight: 400;
letter-spacing: -0.01em;
text-transform: uppercase;
color: #f5f5f0;
margin: 0 0 14px;
}
.m5-bal-cal-legend {
display: inline-flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
font-size: 11px;
letter-spacing: 0.18em;
color: rgba(245,245,240,0.65);
text-transform: uppercase;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot {
width: 8px; height: 8px;
border-radius: 50%;
display: inline-block;
}
.legend-free .legend-dot { background: #22c55e; }
.legend-taken .legend-dot { background: #ef4444; }
.legend-out .legend-dot { background: rgba(245,245,240,0.30); }
/* ---------- Calendar grid ---------- */
.m5-bal-calendar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 760px;
margin: 0 auto;
}
@media (max-width: 720px) {
.m5-bal-calendar { grid-template-columns: 1fr; gap: 32px; }
}
.m5-bal-cal-loading {
grid-column: 1 / -1;
text-align: center;
padding: 40px;
color: rgba(245,245,240,0.55);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.m5-bal-month {
background: rgba(20,20,20,0.55);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 14px;
padding: 18px 16px;
}
.m5-bal-month-name {
font-family: 'Anton', sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #FFD75A;
text-align: center;
margin: 0 0 14px;
}
.m5-bal-week-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
margin-bottom: 8px;
}
.m5-bal-week-day {
font-size: 9px;
letter-spacing: 0.18em;
color: rgba(245,245,240,0.45);
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
.m5-bal-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
}
/* Day cell */
.m5-bal-day {
position: relative;
aspect-ratio: 1;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 1.5px solid transparent;
border-radius: 10px;
font-family: 'Inter', sans-serif;
font-size: 14px;
font-weight: 600;
color: #f5f5f0;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.m5-bal-day::after {
content: "";
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 6px; height: 6px;
border-radius: 50%;
background: transparent;
}
.m5-bal-day.is-out {
color: rgba(245,245,240,0.30);
cursor: default;
pointer-events: none;
}
.m5-bal-day.is-free::after { background: #22c55e; }
.m5-bal-day.is-free:hover {
border-color: #D4AF37;
background: rgba(212,175,55,0.08);
}
.m5-bal-day.is-taken {
color: #ef4444;
text-decoration: line-through;
text-decoration-color: rgba(239,68,68,0.65);
cursor: not-allowed;
}
.m5-bal-day.is-taken::after { background: #ef4444; }
.m5-bal-day.is-selected {
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%);
color: #0a0a0a;
border-color: #D4AF37;
box-shadow: 0 6px 18px rgba(212,175,55,0.40);
transform: scale(1.04);
}
.m5-bal-day.is-selected::after { display: none; }
.m5-bal-day:focus-visible {
outline: 2px solid #D4AF37;
outline-offset: 2px;
}
/* Mobile calendar density */
@media (max-width: 720px) {
.m5-bal-month { padding: 14px 10px; }
.m5-bal-week-days { gap: 3px; }
.m5-bal-days { gap: 3px; }
.m5-bal-day { font-size: 13px; min-width: 0; min-height: 40px; }
}
/* ---------- Form wrap ---------- */
.m5-bal-form-wrap {
padding: 0 0 64px;
}
.m5-bal-form-wrap[hidden] { display: none !important; }
.m5-bal-picked {
text-align: center;
margin: 32px auto 18px;
}
.m5-bal-picked-eyebrow {
display: inline-block;
font-size: 10px;
letter-spacing: 0.28em;
color: rgba(212,175,55,0.85);
text-transform: uppercase;
}
.m5-bal-picked-date {
font-family: 'Anton', sans-serif;
font-size: clamp(28px, 6vw, 48px);
font-weight: 400;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #f5f5f0;
margin: 6px 0 0;
}
.m5-bal-package {
list-style: none;
padding: 16px 18px;
margin: 0 auto 24px;
max-width: 520px;
background: rgba(20,20,20,0.55);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 24px;
}
@media (max-width: 480px) { .m5-bal-package { grid-template-columns: 1fr; } }
.m5-bal-package li {
font-size: 11px;
letter-spacing: 0.10em;
color: rgba(245,245,240,0.85);
text-transform: uppercase;
}
.m5-bal-form {
max-width: 520px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.m5-bal-times {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.m5-bal-field { display: flex; flex-direction: column; gap: 6px; }
.m5-bal-label {
font-size: 9px;
letter-spacing: 0.22em;
color: rgba(245,245,240,0.55);
text-transform: uppercase;
}
.m5-bal-form input,
.m5-bal-form select,
.m5-bal-form textarea {
background: rgba(10,10,10,0.6);
color: #f5f5f0;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 10px;
padding: 12px 14px;
font-family: inherit;
font-size: 14px;
font-weight: 500;
outline: none;
transition: border-color 180ms ease;
min-height: 48px;
}
.m5-bal-form input:focus,
.m5-bal-form select:focus,
.m5-bal-form textarea:focus {
border-color: #D4AF37;
}
.m5-bal-form textarea { resize: vertical; min-height: 80px; }
.m5-bal-error {
background: rgba(239,68,68,0.10);
border: 1px solid rgba(239,68,68,0.40);
color: #fca5a5;
border-radius: 10px;
padding: 10px 14px;
font-size: 13px;
}
.m5-bal-cta {
width: 100%;
min-height: 56px;
margin-top: 6px;
background: linear-gradient(135deg, #FFE9A0 0%, #D4AF37 50%, #B8902C 100%) !important;
color: #0a0a0a !important;
border: none !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
font-size: 14px !important;
border-radius: 12px !important;
box-shadow: 0 12px 30px rgba(212,175,55,0.35) !important;
}
.m5-bal-cta:hover { transform: translateY(-1px); }
.m5-bal-cta:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.m5-bal-trust {
text-align: center;
font-size: 10px;
letter-spacing: 0.18em;
color: rgba(245,245,240,0.55);
text-transform: uppercase;
margin: 8px 0 0;
}
/* ---------- Success state ---------- */
.m5-bal-success {
max-width: 520px;
margin: 32px auto 0;
padding: 32px 24px;
background: rgba(20,20,20,0.65);
border: 1px solid rgba(212,175,55,0.30);
border-radius: 14px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.m5-bal-success[hidden] { display: none !important; }
.m5-bal-success-icon {
font-size: 40px;
color: #FFD75A;
text-shadow: 0 0 24px rgba(212,175,55,0.6);
}
.m5-bal-success-title {
font-family: 'Anton', sans-serif;
font-size: 28px;
text-transform: uppercase;
margin: 0;
}
.m5-bal-success-text {
font-size: 14px;
color: rgba(245,245,240,0.80);
margin: 0;
line-height: 1.5;
}
.m5-bal-success-text strong { color: #FFD75A; }
.m5-bal-success-recap {
font-size: 11px;
letter-spacing: 0.18em;
color: rgba(245,245,240,0.55);
text-transform: uppercase;
margin: 6px 0 14px;
}