/* ===== extracted style block #0 from index.html ===== */
/* ============================================================
SHELL LAYER — Development preview scaffolding only
============================================================ */
/* Shell container */
.drive-shell {
position: relative;
width: 100%;
min-height: 100vh;
}
/* Each app section — only the active one is shown */
.shell-section {
display: none;
width: 100%;
min-height: 100vh;
}
.shell-section.active {
display: block;
}
/* Dev badge — always visible so you know you're in the shell */
/* Shell nav indicator (top bar) — shows current section */
.shell-nav-bar {
position: fixed;
top: 0; left: 0; right: 0;
height: 4px;
z-index: 100000;
background: linear-gradient(90deg, #c8a84b, #d05000);
transform: scaleX(0);
transform-origin: left;
transition: transform 300ms ease;
pointer-events: none;
}
.shell-nav-bar.loaded { transform: scaleX(1); }
/* ===== extracted style block #1 from index.html ===== */
/* ── HOMEPAGE CSS ──────────────────────────────────────────── */
/* ============================================================
SKIN LAYER — Homepage token system
Homepage has its own neutral theme that bridges both worlds.
Yad1 and Yad2 sections each carry their own data-theme.
============================================================ */
:root {
/* Shared primitives (superset of both files) */
--hp-black: #040404;
--hp-gray-970: #090909;
--hp-gray-950: #0c0c0c;
--hp-gray-900: #111111;
--hp-gray-820: #1a1a1a;
--hp-gray-800: #1e1e1e;
--hp-gray-700: #2c2c2c;
--hp-gray-600: #3d3d3d;
--hp-gray-500: #585858;
--hp-gray-400: #7a7a7a;
--hp-gray-300: #9e9e9e;
--hp-gray-200: #c4c0bc;
--hp-gray-100: #e2ddd8;
--hp-warm-white: #f6f1e9;
--hp-white: #ffffff;
--hp-blue-50: #e8f0fe;
--hp-blue-500: #3b6ef5;
--hp-blue-600: #2356e8;
--hp-blue-700: #1740cc;
--hp-amber-400: #c8a84b;
--hp-amber-300: #d8bc6a;
--hp-orange-500: #d05000;
--hp-orange-400: #e06010;
--hp-green: #25d366;
--hp-green-hover: #1ebe5d;
}
/* Homepage root theme — dark, neutral, bridges both worlds */
[data-theme="homepage"] {
--color-bg: var(--hp-gray-970);
--color-surface: var(--hp-gray-820);
--color-border: rgba(255,255,255,0.07);
--color-border-strong: rgba(255,255,255,0.13);
--color-text-primary: var(--hp-warm-white);
--color-text-secondary: var(--hp-gray-200);
--color-text-muted: var(--hp-gray-400);
--font-body: 'Heebo', sans-serif;
--transition: 220ms ease;
--transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Yad1 split section — dark, amber */
[data-theme="split-yad1"] {
--split-bg: var(--hp-gray-950);
--split-bg-hover: var(--hp-gray-900);
--split-accent: var(--hp-amber-400);
--split-accent-hover: var(--hp-amber-300);
--split-cta-bg: var(--hp-orange-500);
--split-cta-hover: var(--hp-orange-400);
--split-cta-shadow: rgba(208,80,0,0.42);
--split-text: var(--hp-warm-white);
--split-text-muted: var(--hp-gray-300);
--split-border: rgba(200,168,75,0.22);
--split-border-hover: rgba(200,168,75,0.50);
--split-tag-bg: rgba(200,168,75,0.10);
--split-tag-text: var(--hp-amber-400);
--split-tag-border: rgba(200,168,75,0.25);
}
/* Yad2 split section — light, blue */
[data-theme="split-yad2"] {
--split-bg: #f4f6fb;
--split-bg-hover: #eef1f8;
--split-accent: var(--hp-blue-600);
--split-accent-hover: var(--hp-blue-700);
--split-cta-bg: var(--hp-blue-600);
--split-cta-hover: var(--hp-blue-700);
--split-cta-shadow: rgba(35,86,232,0.28);
--split-text: #0f1220;
--split-text-muted: #60687e;
--split-border: rgba(35,86,232,0.12);
--split-border-hover: rgba(35,86,232,0.35);
--split-tag-bg: #e8f0fe;
--split-tag-text: var(--hp-blue-700);
--split-tag-border: rgba(35,86,232,0.2);
}
/* ============================================================
BASE RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: 'Heebo', sans-serif;
background: var(--hp-gray-970);
color: var(--hp-warm-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* ============================================================
STRUCTURE LAYER — Layout, components, screens
============================================================ */
/* ── HEADER ─────────────────────────────────────────────── */
.hp-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: 64px;
display: flex; align-items: center;
padding: 0 40px;
background: rgba(9,9,9,0.0);
border-bottom: 1px solid transparent;
transition: background 360ms ease, border-color 360ms ease, backdrop-filter 360ms ease;
}
.hp-header.scrolled {
background: rgba(9,9,9,0.92);
border-bottom-color: rgba(255,255,255,0.07);
backdrop-filter: blur(16px);
}
/* PNG logo image */
.hp-logo-wrap {
display: flex; align-items: center;
flex-shrink: 0; cursor: pointer;
}
.hp-logo-img {
height: 110px;
width: auto;
display: block;
transition: opacity 180ms ease;
}
.hp-logo-wrap:hover .hp-logo-img { opacity: 0.85; }
/* Legacy selectors kept so nothing else breaks if referenced */
.hp-logo-tag { display: none; }
.hp-nav { display: flex; gap: 4px; margin-right: 40px; }
.hp-nav-link {
padding: 7px 14px;
font-size: 13.5px; font-weight: 500;
color: rgba(255,255,255,0.55);
cursor: pointer; border-radius: 6px;
transition: all 180ms ease;
}
.hp-nav-link:hover { color: var(--hp-warm-white); background: rgba(255,255,255,0.06); }
.hp-header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hp-header-wa {
display: flex; align-items: center; gap: 8px;
padding: 8px 16px;
background: #25d366; color: #fff;
font-size: 13px; font-weight: 600;
border: none; border-radius: 6px; cursor: pointer;
font-family: 'Heebo', sans-serif;
transition: all 180ms ease;
box-shadow: 0 2px 8px rgba(37,211,102,0.2);
}
.hp-header-wa:hover {
background: var(--hp-green-hover);
box-shadow: 0 4px 16px rgba(37,211,102,0.35);
transform: translateY(-1px);
}
.hp-header-admin {
padding: 7px 14px;
font-size: 13px; font-weight: 500;
color: rgba(255,255,255,0.45);
background: none; border: 1px solid rgba(255,255,255,0.10);
border-radius: 6px; cursor: pointer;
font-family: 'Heebo', sans-serif;
transition: all 180ms ease;
}
.hp-header-admin:hover { color: var(--hp-warm-white); border-color: rgba(255,255,255,0.22); }
/* ── HEADER SOCIAL ICONS ─────────────────────────────────── */
.hp-social-icon {
width: 40px !important; height: 40px !important; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.55);
cursor: pointer; text-decoration: none;
transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
flex-shrink: 0;
}
.hp-social-icon svg { width: 22px !important; height: 22px !important; display: block; fill: currentColor; }
.hp-social-icon:hover {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.22);
color: rgba(255,255,255,0.90);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.22);
}
/* Brand colors for hp-social-icon variants */
.hp-social-icon-wa { color: #25D366; }
.hp-social-icon-wa svg { fill: #25D366; }
.hp-social-icon-wa:hover { border-color: #25D366; }
.hp-social-icon-waze { color: #33CCFF; }
.hp-social-icon-waze svg { fill: #33CCFF; }
.hp-social-icon-waze:hover { border-color: #33CCFF; }
.hp-social-icon-tiktok { color: rgba(255,255,255,0.80); }
.hp-social-icon-tiktok svg { fill: rgba(255,255,255,0.80); }
.hp-social-icon-instagram { color: #C13584; }
.hp-social-icon-instagram svg { fill: #C13584; }
.hp-social-icon-instagram:hover { border-color: #C13584; }
.hp-social-icon-facebook { color: #1877F2; }
.hp-social-icon-facebook svg { fill: #1877F2; }
.hp-social-icon-facebook:hover { border-color: #1877F2; }
/* ── STAGE HERO ──────────────────────────────────────────── */
/* Section shell */
.stage-section {
position: relative;
width: 100%; min-height: 100vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
overflow: hidden;
background: var(--hp-black);
padding-top: 64px; /* header height */
}
/* Background layers — all position:absolute, pointer-events:none */
.stage-bg-base {
position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 90% 70% at 50% 30%,
#150f02 0%, #0a0802 40%, var(--hp-black) 100%);
}
.stage-bg-grid {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(rgba(200,168,75,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,168,75,0.035) 1px, transparent 1px);
background-size: 72px 72px;
}
.stage-bg-vignette {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 110% 55% at 50% 105%, rgba(0,0,0,0.96) 0%, transparent 65%),
radial-gradient(ellipse 35% 100% at 0% 50%, rgba(0,0,0,0.70) 0%, transparent 55%),
radial-gradient(ellipse 35% 100% at 100% 50%, rgba(0,0,0,0.70) 0%, transparent 55%);
}
.stage-bg-floor {
position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none;
height: 38%;
background: linear-gradient(to top,
rgba(200,168,75,0.04) 0%,
transparent 100%);
}
.stage-bg-orb {
position: absolute; border-radius: 50%;
filter: blur(90px); pointer-events: none; will-change: transform;
}
.stage-bg-orb-1 {
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(200,168,75,0.11) 0%, transparent 70%);
top: -120px; left: 25%;
animation: stageOrb1 18s ease-in-out infinite;
}
.stage-bg-orb-2 {
width: 380px; height: 380px;
background: radial-gradient(circle, rgba(208,80,0,0.09) 0%, transparent 70%);
bottom: 15%; right: 10%;
animation: stageOrb2 22s ease-in-out infinite;
}
@keyframes stageOrb1 {
0%,100% { transform: translate(0,0); }
33% { transform: translate(-40px, 30px); }
66% { transform: translate(28px, -20px); }
}
@keyframes stageOrb2 {
0%,100% { transform: translate(0,0); }
50% { transform: translate(24px, -36px); }
}
/* Top copy */
.stage-header-copy {
position: relative; z-index: 4;
text-align: center;
margin-bottom: 40px;
pointer-events: none;
}
.stage-eyebrow {
display: flex; align-items: center; justify-content: center; gap: 12px;
margin-bottom: 14px;
animation: fadeUp 0.8s 0.1s both;
}
.stage-eyebrow-line { width: 24px; height: 1px; background: var(--hp-amber-400); }
.stage-eyebrow-text {
font-size: 11px; font-weight: 700;
color: var(--hp-amber-400); letter-spacing: 3.5px; text-transform: uppercase;
}
.stage-headline {
font-size: clamp(38px, 6vw, 72px);
font-weight: 900; line-height: 0.96;
letter-spacing: -2.5px;
color: var(--hp-warm-white);
animation: fadeUp 0.8s 0.2s both;
}
.stage-headline em { color: var(--hp-amber-400); font-style: normal; }
/* Viewport — clips the track */
.stage-viewport {
position: relative; z-index: 3;
width: 100%; height: 400px;
display: flex; align-items: center; justify-content: center;
overflow: visible; /* cards scale up past boundary — intentional */
}
/* Track — single translateX moves everything; GPU composited */
.stage-track {
display: flex; align-items: center;
gap: 32px;
position: absolute;
left: 50%;
transform: translateX(0); /* StageController sets this */
will-change: transform;
/* No transition here — rAF drives every frame */
}
/* ── STAGE CARD ────────────────────────────────────────── */
.stage-card {
flex-shrink: 0;
width: 320px; height: 360px;
position: relative;
border-radius: 3px;
overflow: hidden;
cursor: pointer;
/* Default state — overridden by data-state */
transform: scale(0.72) translateY(24px);
opacity: 0.35;
filter: blur(2.5px);
transition:
transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 380ms ease,
filter 380ms ease;
will-change: transform, opacity, filter;
border: 1px solid rgba(255,255,255,0.06);
}
/* State variants — only data-state changes; CSS does the rest */
.stage-card[data-state="active"] {
transform: scale(1.13) translateY(-12px);
opacity: 1;
filter: blur(0);
border-color: rgba(200,168,75,0.30);
box-shadow:
0 24px 80px rgba(0,0,0,0.80),
0 0 0 1px rgba(200,168,75,0.18),
0 0 48px rgba(200,168,75,0.08);
z-index: 10;
}
.stage-card[data-state="near"] {
transform: scale(0.88) translateY(8px);
opacity: 0.62;
filter: blur(0.8px);
z-index: 5;
}
.stage-card[data-state="mid"] {
transform: scale(0.76) translateY(18px);
opacity: 0.42;
filter: blur(1.8px);
z-index: 2;
}
.stage-card[data-state="far"] {
transform: scale(0.65) translateY(28px);
opacity: 0.18;
filter: blur(3px);
z-index: 1;
}
/* Card visual (image/emoji area) */
.stage-card-visual {
width: 100%; height: 220px;
background: var(--hp-gray-820);
position: relative; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.stage-card-img-photo {
width: 100%; height: 100%;
object-fit: contain;
transition: transform 600ms ease;
}
.stage-card[data-state="active"]:hover .stage-card-img-photo { transform: scale(1.04); }
.stage-card-img-emoji {
font-size: 72px;
filter: grayscale(0.2);
user-select: none;
}
.stage-card-visual-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, transparent 55%);
}
/* Card nameplate */
.stage-card-nameplate {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 16px 18px 14px;
background: linear-gradient(to top, rgba(8,8,8,0.95) 0%, rgba(8,8,8,0.75) 60%, transparent 100%);
}
.stage-card-brand {
font-size: 10px; font-weight: 700;
color: var(--hp-amber-400); letter-spacing: 2.5px;
text-transform: uppercase; margin-bottom: 3px;
}
.stage-card-model {
font-size: 17px; font-weight: 800;
color: var(--hp-warm-white); letter-spacing: -0.3px;
line-height: 1.1;
}
.stage-card-year {
font-size: 12px; color: var(--hp-gray-400);
margin-top: 2px; font-weight: 500;
}
/* Card overlay (specs + CTAs on active card) — hidden on non-active */
.stage-card-overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 18px;
background: linear-gradient(to top, rgba(4,4,4,0.92) 0%, rgba(4,4,4,0.5) 50%, transparent 100%);
opacity: 0; pointer-events: none;
transition: opacity 300ms ease;
}
/* Card overlay shows on active hover only — info panel handles non-hover */
/* Decorative center ring */
.stage-focus-ring {
position: absolute;
width: 340px; height: 340px;
border-radius: 50%;
border: 1px solid rgba(200,168,75,0.12);
top: 50%; left: 50%;
transform: translate(-50%, -44%);
pointer-events: none; z-index: 1;
box-shadow: 0 0 60px rgba(200,168,75,0.06) inset;
}
/* Floor reflection line */
.stage-platform {
position: absolute; bottom: -2px; left: 10%; right: 10%;
height: 2px; z-index: 2; pointer-events: none;
background: linear-gradient(90deg,
transparent 0%,
rgba(200,168,75,0.20) 30%,
rgba(200,168,75,0.35) 50%,
rgba(200,168,75,0.20) 70%,
transparent 100%);
box-shadow: 0 0 24px rgba(200,168,75,0.15);
}
/* ── ACTIVE VEHICLE INFO OVERLAY ─────────────────────────── */
/* Positioned below the stage, full-width, always visible */
.stage-overlay-info {
position: relative; z-index: 4;
margin-top: 40px;
text-align: center;
padding: 0 20px 20px;
pointer-events: none;
animation: fadeUp 0.6s 0.3s both;
}
/* Pulse animation when vehicle changes */
.stage-overlay-info.soi-enter .soi-inner {
animation: soiPulse 0.4s ease both;
}
@keyframes soiPulse {
0% { opacity: 0.4; transform: translateY(6px); }
100% { opacity: 1; transform: translateY(0); }
}
.soi-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.soi-brand {
font-size: 11px; font-weight: 700;
color: var(--hp-amber-400); letter-spacing: 3px; text-transform: uppercase;
}
.soi-model {
font-size: clamp(24px, 4vw, 40px); font-weight: 900;
color: var(--hp-warm-white); letter-spacing: -1px; line-height: 1.05;
}
.soi-tagline {
font-size: 14px; color: var(--hp-gray-300);
font-weight: 400; margin-top: 2px;
}
.soi-specs {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--hp-gray-200); font-weight: 500;
margin-top: 6px; flex-wrap: wrap; justify-content: center;
}
.soi-sep { color: var(--hp-amber-400); font-weight: 700; }
.soi-ctas {
display: flex; gap: 12px; margin-top: 20px;
justify-content: center; pointer-events: all;
}
.soi-cta-primary {
padding: 12px 28px;
background: var(--hp-orange-500);
color: #fff; font-size: 14px; font-weight: 700;
border: none; border-radius: 3px; cursor: pointer;
font-family: 'Heebo', sans-serif;
transition: all 220ms ease;
box-shadow: 0 4px 20px rgba(208,80,0,0.40);
}
.soi-cta-primary:hover {
background: var(--hp-orange-400);
box-shadow: 0 6px 28px rgba(208,80,0,0.55);
transform: translateY(-2px);
}
.soi-cta-wa {
padding: 12px 20px;
background: #25d366; color: #fff;
font-size: 14px; font-weight: 600;
border: none; border-radius: 3px; cursor: pointer;
font-family: 'Heebo', sans-serif;
transition: all 220ms ease;
box-shadow: 0 4px 14px rgba(37,211,102,0.28);
}
.soi-cta-wa:hover {
background: var(--hp-green-hover);
box-shadow: 0 6px 20px rgba(37,211,102,0.42);
transform: translateY(-2px);
}
/* Scroll indicator */
.stage-scroll-hint {
position: relative; z-index: 4;
margin-top: 32px; margin-bottom: 16px;
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: var(--hp-gray-500); font-size: 11px; font-weight: 500;
letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: color 200ms ease;
animation: fadeUp 0.8s 0.6s both;
}
.stage-scroll-hint:hover { color: var(--hp-gray-300); }
.stage-scroll-arrow {
width: 20px; height: 28px;
border: 1px solid currentColor; border-radius: 10px; position: relative;
}
.stage-scroll-arrow::after {
content: '';
position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
width: 3px; height: 7px;
background: currentColor; border-radius: 2px;
animation: scrollBob 1.8s ease-in-out infinite;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.stage-viewport { height: 300px; }
.stage-card { width: 240px; height: 280px; }
.stage-card-visual { height: 170px; }
.stage-track { gap: 20px; }
.StageController_UNIT: { /* Note: override in JS init */ }
.soi-model { font-size: 22px; }
.stage-header-copy { margin-bottom: 24px; }
}
/* Shared keyframes */
@keyframes scrollBob {
0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
60% { transform: translateX(-50%) translateY(7px); opacity: 0.3; }
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
HP HERO STAGE — 3D Turntable Showroom
All classes prefixed hp- to isolate from other CSS in shell.
============================================================ */
/* Section shell */
.hp-hero-stage {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
/* Controlled vertical placement — not center which loses header clearance */
justify-content: flex-start;
padding-top: calc(64px + 32px); /* fixed header + breathing room */
padding-bottom: 60px;
overflow: hidden;
background: #0a0906;
}
/* ── HERO VIDEO ───────────────────────────────────────────── */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
pointer-events: none;
}
.hero-video-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.42);
z-index: 1;
pointer-events: none;
}
.hp-hero-mute-btn {
position: absolute;
bottom: 24px; right: 24px;
z-index: 20;
width: 44px; height: 44px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(0,0,0,0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 200ms, transform 200ms, border-color 200ms;
}
.hp-hero-mute-btn:hover {
background: rgba(0,0,0,0.75);
border-color: rgba(255,255,255,0.55);
transform: scale(1.08);
}
/* ── BACKGROUND ──────────────────────────────────────────── */
.hp-stage-bg {
position: absolute; inset: 0;
pointer-events: none; z-index: 0;
overflow: hidden;
}
.hp-stage-bg-radial {
position: absolute; inset: 0;
background: radial-gradient(ellipse 90% 80% at 50% 35%,
#16120a 0%, #0d0b07 45%, #060504 100%);
}
.hp-stage-bg-fog {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 40% at 50% 60%,
rgba(200,168,75,0.05) 0%, transparent 70%),
radial-gradient(ellipse 80% 30% at 50% 100%,
rgba(200,168,75,0.04) 0%, transparent 60%);
}
.hp-stage-bg-grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(200,168,75,0.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(200,168,75,0.025) 1px, transparent 1px);
background-size: 80px 80px;
}
.hp-stage-bg-vignette {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 100% 55% at 50% 110%, rgba(0,0,0,0.95) 0%, transparent 65%),
radial-gradient(ellipse 30% 100% at 0% 50%, rgba(0,0,0,0.6) 0%, transparent 50%),
radial-gradient(ellipse 30% 100% at 100% 50%, rgba(0,0,0,0.6) 0%, transparent 50%);
}
/* ── BRAND COPY ───────────────────────────────────────────── */
.hp-stage-copy {
position: relative; z-index: 10;
text-align: center;
margin-bottom: 20px;
pointer-events: none;
flex-shrink: 0;
}
.hp-stage-eyebrow {
display: flex; align-items: center; justify-content: center;
gap: 12px; margin-bottom: 10px;
animation: fadeUp 0.8s 0.1s both;
}
.hp-stage-eyebrow-line {
width: 22px; height: 1px; background: #c8a84b;
}
.hp-stage-eyebrow-text {
font-size: 11px; font-weight: 700;
color: #c8a84b; letter-spacing: 3.5px;
text-transform: uppercase; font-family: 'Heebo', sans-serif;
text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hp-stage-headline {
font-size: clamp(32px, 5.5vw, 68px);
font-weight: 900; line-height: 0.94;
letter-spacing: -2px;
color: #f6f1e9;
font-family: 'Heebo', sans-serif;
animation: fadeUp 0.8s 0.2s both;
text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hp-stage-headline em { color: #c8a84b; font-style: normal; }
/* ── 3D SCENE ─────────────────────────────────────────────── */
/* perspective set here — all 3D transforms relative to this point */
.hp-stage-scene {
position: relative; z-index: 5;
width: 100%;
height: 340px;
perspective: 1100px;
perspective-origin: 50% 38%;
display: flex; align-items: center; justify-content: center;
/* Scale down the visual footprint without affecting perspective math */
transform: scale(0.88);
transform-origin: center top;
flex-shrink: 0;
}
/* Platform wrapper — THIS element rotates. transform-style:preserve-3d
propagates the 3D positions of children into the scene. */
.hp-stage-platform-wrap {
position: relative;
width: 700px; height: 700px;
transform-style: preserve-3d;
/* JS sets transform: rotateX(10deg) rotateY(Ndeg) each frame */
transform: rotateX(10deg) rotateY(0deg);
will-change: transform;
}
/* ── ROTATING SHOWROOM STAGE ──────────────────────────────────
Two elements, both inside platform-wrap, both rotate with vehicles:
1. .hp-platform-top — the flat top disc (laid horizontal in 3D)
2. .hp-platform-wall — container for JS-generated cylinder panels
─────────────────────────────────────────────────────────── */
/* TOP DISC — the flat orange surface of the turntable */
.hp-platform-top {
position: absolute;
width: 640px; height: 640px;
left: 50%; top: 50%;
transform: translate(-50%, -50%) rotateX(90deg) translateZ(-58px);
border-radius: 50%;
pointer-events: none;
background:
/* Rear catch-light — suggests overhead stage lighting */
radial-gradient(ellipse 52% 22% at 50% 14%,
rgba(255, 200, 90, 0.14) 0%, transparent 100%),
/* Concentric ring grooves — platter texture */
repeating-radial-gradient(circle at 50% 50%,
transparent 0px, transparent 40px,
rgba(55, 12, 0, 0.09) 40px, rgba(55, 12, 0, 0.09) 42px),
/* Main surface: warm orange deepening toward edge */
radial-gradient(circle at 50% 50%,
#c85800 0%,
#a24000 46%,
#742600 80%,
#461200 100%);
box-shadow:
0 0 0 1px rgba(210, 95, 15, 0.18),
0 0 60px rgba(150, 50, 6, 0.20);
}
/* WALL CONTAINER — origin sits at the top-disc edge level.
Children are positioned by JS as rotateY(angle)+translateZ(radius) panels. */
.hp-platform-wall {
position: absolute;
width: 0; height: 0;
left: 50%; top: 50%;
transform-style: preserve-3d;
/* Move down to the bottom edge of the top disc:
same 58px drop as the disc, so wall meets the disc perimeter */
transform: translate(-50%, -50%) translateY(58px);
pointer-events: none;
}
/* WALL PANEL — one segment of the cylinder wall, styled by JS */
.hp-platform-wall-panel {
position: absolute;
/* width set by JS (arc length per segment)
height 64px: at TILT=10° the front face renders ~80px visible,
giving clear physical height that reads as a real stage */
height: 64px;
top: 0; left: 0;
/* warm hairline where disc meets wall — hot-metal seam */
border-top: 1.5px solid rgba(210, 95, 18, 0.55);
}
/* Brand mark text on landmark panels */
.hp-wall-brand {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 6px;
font-weight: 900;
letter-spacing: 3px;
color: rgba(255, 165, 70, 0.22);
font-family: 'Heebo', sans-serif;
white-space: nowrap;
pointer-events: none;
user-select: none;
}
/* ── VEHICLES ─────────────────────────────────────────────── */
.hp-stage-vehicles {
position: absolute; inset: 0;
transform-style: preserve-3d;
}
/* Slot — positioned by JS with rotateY + translateZ.
Scale is driven per-frame via data-depth (0=front 1=side 2=back). */
.hp-turntable-slot {
position: absolute;
width: 260px; height: 180px;
top: 50%; left: 50%;
transform-style: preserve-3d;
transform-origin: center center;
cursor: pointer;
/* No transition on transform — JS drives it every frame */
}
/* Vehicle object — transparent, no card container. Image IS the vehicle.
top: -117px positions the card so its bottom edge (wheel level) sits
exactly at the disc surface (Y=58 from platform centre). */
.hp-turntable-card {
position: absolute;
width: 290px; height: 260px;
top: -202px; left: -145px;
overflow: visible; /* drop-shadow bleeds outside */
border-radius: 0;
background: transparent;
border: none;
box-shadow: none;
transition: none;
/* backface-visibility: visible (default) — lets 2D vehicles fade
smoothly through the side rather than snapping invisible at 90° */
will-change: transform, opacity, filter;
}
/* ── DEPTH STATES — set via data-depth attribute by JS ───────
0 = front (facing camera)
1 = side (adjacent)
2 = back (behind)
─────────────────────────────────────────────────────────── */
/* JS overrides transform/opacity/filter every frame via inline styles.
These CSS fallbacks only apply before the first tick. */
.hp-turntable-slot[data-depth="0"] .hp-turntable-card {
/* no translateY — wheels are grounded at disc surface by CSS top:-117px */
transform: scale(1.00) translateY(0px);
opacity: 1;
filter: brightness(1.00);
}
.hp-turntable-slot[data-depth="1"] .hp-turntable-card {
transform: scale(0.84) translateY(3px);
opacity: 0.70;
filter: brightness(0.79);
}
.hp-turntable-slot[data-depth="2"] .hp-turntable-card {
transform: scale(0.68) translateY(15px);
opacity: 0.45;
filter: brightness(0.58);
}
.hp-turntable-slot[data-depth="3"] .hp-turntable-card {
transform: scale(0.52) translateY(22px);
opacity: 0.25;
filter: brightness(0.38);
}
.hp-turntable-slot[data-depth="4"] .hp-turntable-card {
transform: scale(0.40) translateY(28px);
opacity: 0.10;
filter: brightness(0.28);
}
/* ── FOCUS MOMENT ─────────────────────────────────────────── */
/* Applied briefly when a new vehicle enters the front position */
.hp-turntable-slot.hp-slot-entering .hp-turntable-card {
animation: hp-vehicle-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes hp-vehicle-pop {
0% { transform: scale(0.92) translateY(6px); }
55% { transform: scale(1.04) translateY(-8px); }
100% { transform: scale(1.00) translateY(0px); }
}
/* ── CONTACT SHADOW — soft ellipse directly under the truck wheels ── */
.hp-turntable-shadow {
position: absolute;
width: 150px; height: 18px;
left: 50%;
/* wheel level = 56px below slot centre (matches grounded card bottom) */
top: calc(50% + 56px);
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse at center,
rgba(0,0,0,0.60) 0%,
rgba(0,0,0,0.25) 50%,
transparent 75%);
filter: blur(6px);
pointer-events: none;
opacity: 0;
transition: opacity 450ms ease;
}
.hp-turntable-slot[data-depth="0"] .hp-turntable-shadow { opacity: 0.85; }
.hp-turntable-slot[data-depth="1"] .hp-turntable-shadow { opacity: 0.35; }
.hp-turntable-slot[data-depth="2"] .hp-turntable-shadow { opacity: 0.08; }
/* Image fills the card completely — it IS the vehicle */
.hp-turntable-card-img {
width: 100%; height: 215px;
position: relative; overflow: visible;
display: flex; align-items: flex-end; justify-content: center;
background: transparent;
padding-bottom: 4px;
}
.hp-turntable-card-img img {
width: 100%; height: 195px;
object-fit: contain;
object-position: center bottom;
opacity: 1.0;
/* screen: makes pure-black backgrounds disappear on this dark site,
clean PNGs with transparent bg are unaffected */
mix-blend-mode: screen;
}
.hp-turntable-card-emoji {
font-size: 64px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.8));
padding-bottom: 8px;
}
/* Soft ambient shadow under car */
.hp-turntable-card-img::after {
content: '';
position: absolute;
bottom: 4px; left: 4%; right: 4%; height: 18px;
background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 50%, transparent 75%);
pointer-events: none;
filter: blur(5px);
}
/* Minimal floating label — not a card nameplate, just a light identifier */
.hp-turntable-card-name {
padding: 5px 0 0 0;
background: transparent;
text-align: center;
}
.hp-turntable-card-mfr {
font-size: 8.5px; font-weight: 700;
color: rgba(200,168,75,0.7); letter-spacing: 2.5px;
text-transform: uppercase;
font-family: 'Heebo', sans-serif;
opacity: 0;
transition: opacity 400ms ease;
}
.hp-turntable-card-model {
font-size: 12px; font-weight: 700;
color: rgba(246,241,233,0.65); letter-spacing: -0.1px;
font-family: 'Heebo', sans-serif;
opacity: 0;
transition: opacity 400ms ease;
}
/* Labels appear only on front vehicle */
.hp-turntable-slot[data-depth="0"] .hp-turntable-card-mfr,
.hp-turntable-slot[data-depth="0"] .hp-turntable-card-model {
opacity: 1;
}
/* Floating CTA — appears only on front vehicle, positioned in 3D space */
.hp-turntable-slot-cta {
position: absolute;
bottom: -52px; left: 50%;
transform: translateX(-50%);
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 450ms ease 100ms;
}
.hp-turntable-slot[data-depth="0"] .hp-turntable-slot-cta {
opacity: 1;
pointer-events: all;
}
.hp-turntable-slot-cta-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 20px;
background: rgba(200,168,75,0.12);
border: 1px solid rgba(200,168,75,0.40);
color: #c8a84b;
font-size: 12px; font-weight: 700;
font-family: 'Heebo', sans-serif;
border-radius: 2px;
cursor: pointer;
letter-spacing: 0.5px;
transition: all 220ms ease;
backdrop-filter: blur(6px);
}
.hp-turntable-slot-cta-btn:hover {
background: rgba(200,168,75,0.22);
border-color: rgba(200,168,75,0.70);
color: #d8bc6a;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(200,168,75,0.20);
}
/* ── INFO PANEL ───────────────────────────────────────────── */
.hp-stage-info {
position: relative; z-index: 10;
text-align: center;
margin-top: 10px;
pointer-events: none;
min-height: 110px;
flex-shrink: 0;
}
.hp-stage-info-brand {
font-size: 10px; font-weight: 700;
color: #c8a84b; letter-spacing: 3.5px;
text-transform: uppercase;
font-family: 'Heebo', sans-serif;
margin-bottom: 2px;
animation: fadeUp 0.8s 0.3s both;
}
.hp-stage-info-brands-sub {
font-size: 9px; font-weight: 500;
color: rgba(200,168,75,0.65); letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Heebo', sans-serif;
margin-bottom: 5px;
}
.hp-stage-info-model {
font-size: clamp(28px, 4.5vw, 52px);
font-weight: 900; letter-spacing: -2px;
color: #f6f1e9; line-height: 0.95;
font-family: 'Heebo', sans-serif;
text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.hp-stage-info-year {
font-size: 13px; color: #585858;
font-family: 'Heebo', sans-serif;
margin-top: 4px; font-weight: 500;
}
.hp-stage-info-specs {
display: flex; align-items: center;
justify-content: center; gap: 10px;
font-size: 12px; color: #9e9e9e;
font-family: 'Heebo', sans-serif;
margin-top: 9px; flex-wrap: wrap;
letter-spacing: 0.3px;
}
.hp-stage-info-dot { color: #c8a84b; }
/* Info panel swap animation */
.hp-stage-info.hp-info-transition {
animation: hp-info-swap 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes hp-info-swap {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
/* Panel CTAs */
.hp-stage-info-ctas {
display: flex; gap: 10px;
justify-content: center;
margin-top: 18px;
pointer-events: all;
}
.hp-stage-cta-primary {
padding: 11px 28px;
background: #d05000; color: #fff;
font-size: 13px; font-weight: 700;
border: none; border-radius: 2px;
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all 220ms ease;
box-shadow: 0 4px 20px rgba(208,80,0,0.40);
letter-spacing: 0.3px;
}
.hp-stage-cta-primary:hover {
background: #e06010;
box-shadow: 0 6px 28px rgba(208,80,0,0.55);
transform: translateY(-2px);
}
.hp-stage-cta-wa {
padding: 11px 16px;
background: rgba(37,211,102,0.12);
color: #25d366; border: 1px solid rgba(37,211,102,0.35);
font-size: 13px; font-weight: 600;
border-radius: 2px;
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all 220ms ease;
}
.hp-stage-cta-wa:hover {
background: #25d366; color: #fff;
box-shadow: 0 4px 16px rgba(37,211,102,0.30);
transform: translateY(-2px);
}
/* ── SCROLL HINT ───────────────────────────────────────────── */
.hp-stage-scroll-hint {
position: absolute; bottom: 22px; left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex; flex-direction: column; align-items: center; gap: 5px;
color: #585858; font-size: 10px; font-weight: 500;
letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: color 200ms ease;
font-family: 'Heebo', sans-serif;
}
.hp-stage-scroll-hint:hover { color: #9e9e9e; }
.hp-stage-scroll-arrow {
width: 18px; height: 26px;
border: 1px solid currentColor; border-radius: 9px;
position: relative;
}
.hp-stage-scroll-arrow::after {
content: '';
position: absolute; top: 5px; left: 50%;
transform: translateX(-50%);
width: 3px; height: 6px;
background: currentColor; border-radius: 2px;
animation: scrollBob 1.8s ease-in-out infinite;
}
/* ── MOBILE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
.hp-hero-stage { min-height: 100vh; padding-top: calc(110px + 16px); padding-bottom: 60px; overflow-x: hidden; }
.hp-stage-scene { height: 380px; perspective: 800px; transform: scale(0.65); }
.hp-stage-platform-wrap { width: 500px; height: 500px; }
.hp-platform-top { width: 460px; height: 460px; }
.hp-turntable-slot { width: 190px; height: 135px; }
.hp-turntable-card { width: 190px; height: 135px; top: -67px; left: -95px; }
.hp-turntable-card-img { height: 120px; }
.hp-turntable-slot[data-depth="0"] .hp-turntable-card { width: 380px; left: -190px; top: -184px; }
.hp-turntable-slot[data-depth="0"] .hp-turntable-card-img { height: 240px; }
.hp-turntable-card-emoji { font-size: 44px; }
.hp-stage-headline { font-size: clamp(26px, 7vw, 40px); }
.hp-stage-copy { margin-bottom: 10px; }
.hp-turntable-slot-cta { bottom: -44px; }
.hp-turntable-slot-cta-btn { font-size: 11px; padding: 7px 14px; }
.hp-stage-info-model { font-size: clamp(22px, 6vw, 34px); }
}
/* ── SPLIT SECTION ───────────────────────────────────────── */
.split-section {
display: grid;
grid-template-columns: 1fr;
min-height: auto;
position: relative;
}
/* Hide vertical decorations now that panels are stacked */
.split-divider, .split-blend { display: none; }
/* Individual split panel */
.split-panel {
position: relative;
display: flex; flex-direction: column;
justify-content: flex-start;
padding: 48px 48px;
overflow: hidden;
cursor: pointer;
transition: flex-grow 480ms cubic-bezier(0.16, 1, 0.3, 1);
flex-grow: 1;
}
.split-panel::after {
content: '';
position: absolute; inset: 0;
opacity: 0;
transition: opacity 400ms ease;
}
.split-panel:hover { flex-grow: 1.08; }
.split-panel:hover::after { opacity: 1; }
/* Yad1 panel */
.split-panel[data-theme="split-yad1"] {
background: var(--split-bg);
border-bottom: 1px solid var(--split-border);
border-top: 1px solid rgba(200,168,75,0.27);
box-shadow: inset 0 14px 40px rgba(0,0,0,0.32);
}
.split-panel[data-theme="split-yad1"]::after {
background: linear-gradient(135deg, rgba(200,168,75,0.04) 0%, transparent 60%);
}
.split-panel[data-theme="split-yad1"]:hover {
border-bottom-color: var(--split-border-hover);
}
/* Yad2 panel */
.split-panel[data-theme="split-yad2"] {
background: var(--split-bg);
border-top: 1px solid rgba(35,86,232,0.16);
box-shadow: inset 0 -14px 40px rgba(0,0,0,0.055);
}
.split-panel[data-theme="split-yad2"]::after {
background: linear-gradient(135deg, rgba(35,86,232,0.04) 0%, transparent 60%);
}
/* Panel background imagery */
.panel-bg-emoji {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -55%);
font-size: 240px; opacity: 0.05;
filter: blur(1px);
pointer-events: none;
transition: opacity 400ms ease, transform 400ms ease;
user-select: none;
}
.split-panel:hover .panel-bg-emoji {
opacity: 0.08;
transform: translate(-50%, -58%) scale(1.05);
}
/* Panel content */
.panel-content { position: relative; z-index: 2; align-self: flex-start; width: 100%; }
.panel-tag {
display: none;
}
.panel-title {
font-size: clamp(36px, 4.5vw, 58px);
font-weight: 900;
line-height: 0.95;
letter-spacing: -2px;
color: var(--split-text);
margin-bottom: 16px;
}
.panel-title em {
color: var(--split-accent);
font-style: normal;
}
.panel-sub {
font-size: 15px; font-weight: 400;
color: var(--split-text-muted);
line-height: 1.65; max-width: 360px;
margin-bottom: 32px;
}
.panel-features {
display: flex; flex-direction: column; gap: 8px;
margin-bottom: 36px;
}
.panel-feature {
display: flex; align-items: center; gap: 10px;
font-size: 13.5px; color: var(--split-text-muted);
}
.panel-feature-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--split-accent); flex-shrink: 0;
}
.panel-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 26px;
background: var(--split-cta-bg);
color: #fff; font-size: 15px; font-weight: 700;
border: none; border-radius: 4px; cursor: pointer;
font-family: 'Heebo', sans-serif;
transition: all 240ms ease;
box-shadow: 0 4px 16px var(--split-cta-shadow);
}
.panel-cta:hover {
background: var(--split-cta-hover);
transform: translateY(-2px);
box-shadow: 0 6px 24px var(--split-cta-shadow);
}
.panel-cta-arrow {
width: 18px; height: 18px;
border: 1.5px solid currentColor;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
transition: transform 220ms ease;
}
.panel-cta:hover .panel-cta-arrow { transform: translateX(-3px); }
/* ── SPLIT PANEL — vehicle preview grid ────────────────── */
.hp-split-title {
font-size: 42px; font-weight: 800; letter-spacing: -1.5px;
line-height: 1.1; margin: 8px 0 18px;
}
.hp-split-title-y1 {
background: linear-gradient(130deg, #c8a84b 0%, #f97316 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.hp-split-title-y2 { font-size: 42px; font-weight: 800; color: #2f4f85; text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.25); }
.hp-split-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px;
}
.hp-split-item {
position: relative;
background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px; padding: 14px; cursor: pointer;
transition: background 160ms ease;
box-shadow: 0 2px 10px rgba(0,0,0,0.22);
}
.hp-split-item::after {
content: '>>';
position: absolute; bottom: 12px; left: 12px;
font-size: 18px; font-weight: 800;
color: #f97316;
opacity: 1;
pointer-events: none;
}
.hp-split-item:hover::after { color: #fb923c; }
[data-theme="split-yad2"] .hp-split-item::after { color: #f97316; }
[data-theme="split-yad2"] .hp-split-item:hover::after { color: #fb923c; }
.hp-split-item:hover { background: rgba(255,255,255,0.13); }
[data-theme="split-yad2"] .hp-split-item {
background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.09);
box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
[data-theme="split-yad2"] .hp-split-item:hover { background: rgba(0,0,0,0.09); }
.hp-split-item-img {
width: 100%; aspect-ratio: 16/10; border-radius: 8px; margin-bottom: 12px;
background: rgba(255,255,255,0.05); display: flex;
align-items: center; justify-content: center;
font-size: 32px; overflow: hidden;
border-bottom: 1px solid rgba(255,255,255,0.10);
}
[data-theme="split-yad2"] .hp-split-item-img {
border-bottom: 1px solid rgba(0,0,0,0.09);
background: rgba(0,0,0,0.04);
}
.hp-split-item-img img { width: 100%; height: 100%; object-fit: contain; background: #0a0a0a; }
.hp-split-item-model {
font-size: 18px; font-weight: 800; color: #f0ece6;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;
}
[data-theme="split-yad2"] .hp-split-item-model { color: #111; }
.hp-split-item-price { font-size: 22px; font-weight: 800; letter-spacing: -0.2px; color: rgba(240,236,230,0.55); }
[data-theme="split-yad2"] .hp-split-item-price { color: #555; }
/* Divider line between panels — kept but subdued */
.split-divider {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(to bottom,
transparent 0%,
rgba(0,0,0,0.32) 15%,
rgba(0,0,0,0.44) 50%,
rgba(0,0,0,0.32) 85%,
transparent 100%
);
pointer-events: none;
z-index: 11;
}
/* Gradient bridge — soft cinematic blend between light and dark panels */
.split-blend {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 64px;
transform: translateX(-50%);
background: linear-gradient(to right,
rgba(255,255,255,0) 0%,
rgba(220,220,220,0.18) 35%,
rgba(80,80,80,0.14) 65%,
rgba(0,0,0,0) 100%
);
pointer-events: none;
z-index: 10;
}
/* Panel count badge (vehicles available) */
.panel-count {
position: absolute; top: 40px; left: 40px;
font-size: 11px; font-weight: 600;
color: var(--split-text-muted);
letter-spacing: 0.5px;
display: flex; align-items: center; gap: 6px;
}
.panel-count-num {
font-size: 15px; font-weight: 800;
color: var(--split-accent);
}
/* ── TRUST STRIP ─────────────────────────────────────────── */
.trust-strip {
background: var(--hp-gray-900);
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
padding: 28px 40px;
display: flex; align-items: center;
justify-content: center; gap: 0;
overflow: hidden;
}
.trust-item {
display: flex; align-items: center; gap: 12px;
padding: 0 40px;
border-left: 1px solid rgba(255,255,255,0.08);
flex-shrink: 0;
}
.trust-item:first-child { border-left: none; }
.trust-icon { font-size: 20px; opacity: 0.7; flex-shrink: 0; }
.trust-text-main { font-size: 14px; font-weight: 600; color: var(--hp-warm-white); }
.trust-text-sub { font-size: 12px; color: var(--hp-gray-400); margin-top: 1px; }
/* ── FEATURED VEHICLES ───────────────────────────────────── */
.featured-section {
background: var(--hp-gray-970);
padding: 52px 40px;
}
.section-eyebrow {
display: flex; align-items: center; gap: 10px;
margin-bottom: 12px;
}
.section-eyebrow-line { width: 20px; height: 1px; background: var(--hp-amber-400); }
.section-eyebrow-text {
font-size: 10.5px; font-weight: 700;
color: var(--hp-amber-400); letter-spacing: 3px;
text-transform: uppercase;
}
.section-title {
font-size: 38px; font-weight: 900;
color: var(--hp-warm-white);
letter-spacing: -1px; margin-bottom: 8px;
line-height: 1.05;
}
.section-title em { color: var(--hp-amber-400); font-style: normal; }
.section-sub { font-size: 15px; color: var(--hp-gray-400); margin-bottom: 28px; max-width: 440px; }
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.featured-card {
background: var(--hp-gray-820);
border: 1px solid rgba(255,255,255,0.07);
overflow: hidden; cursor: pointer;
transition: border-color 300ms ease, transform 300ms ease, box-shadow 300ms ease;
position: relative;
}
.featured-card:hover {
border-color: rgba(200,168,75,0.4);
transform: translateY(-3px);
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
z-index: 2;
}
.featured-card-img {
width: 100%; height: 180px;
background: linear-gradient(145deg, var(--hp-gray-800) 0%, var(--hp-gray-700) 100%);
display: flex; align-items: center; justify-content: center;
font-size: 60px; overflow: hidden; position: relative;
}
.featured-card-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
height: 60%;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.featured-card-tag {
position: absolute; top: 12px; right: 12px;
padding: 3px 9px; font-size: 10px; font-weight: 700;
letter-spacing: 1px; text-transform: uppercase;
border-radius: 2px;
}
.featured-card-tag.tag-yad1 {
background: rgba(200,168,75,0.15);
color: var(--hp-amber-400);
border: 1px solid rgba(200,168,75,0.3);
}
.featured-card-tag.tag-yad2 {
background: rgba(35,86,232,0.15);
color: #7eaaff;
border: 1px solid rgba(35,86,232,0.3);
}
.featured-card-body { padding: 18px 20px; }
.featured-card-brand { font-size: 10px; font-weight: 700; color: var(--hp-amber-400); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
.featured-card-name { font-size: 18px; font-weight: 800; color: var(--hp-warm-white); letter-spacing: -0.3px; margin-bottom: 10px; }
.featured-card-specs {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px;
}
.feat-spec {
font-size: 11.5px; color: var(--hp-gray-300);
background: rgba(255,255,255,0.05);
padding: 2px 8px; border-radius: 3px;
border: 1px solid rgba(255,255,255,0.07);
}
.featured-card-footer {
display: flex; align-items: center; justify-content: space-between;
padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06);
}
.featured-price { font-size: 19px; font-weight: 800; color: var(--hp-warm-white); letter-spacing: -0.3px; }
.featured-price-note { font-size: 10.5px; color: var(--hp-gray-500); margin-top: 1px; }
.featured-wa-btn {
width: 36px; height: 36px;
background: #25d366; color: #fff;
border: none; border-radius: 4px; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 17px; transition: all 200ms ease;
box-shadow: 0 2px 8px rgba(37,211,102,0.2);
}
.featured-wa-btn:hover {
background: var(--hp-green-hover);
transform: scale(1.1);
box-shadow: 0 4px 14px rgba(37,211,102,0.38);
}
/* ── LEAD STRIP ──────────────────────────────────────────── */
.lead-strip {
background: linear-gradient(135deg, #0d0a04 0%, #110e06 50%, #0a0d14 100%);
border-top: 1px solid rgba(200,168,75,0.12);
border-bottom: 1px solid rgba(200,168,75,0.12);
padding: 48px 40px;
display: flex; align-items: center; gap: 80px;
}
.lead-strip-copy { flex: 1; }
.lead-strip-eyebrow {
font-size: 10.5px; font-weight: 700;
color: var(--hp-amber-400); letter-spacing: 3px;
text-transform: uppercase; margin-bottom: 14px;
display: flex; align-items: center; gap: 10px;
}
.lead-strip-eyebrow::before { content: ''; width: 18px; height: 1px; background: var(--hp-amber-400); display: inline-block; }
.lead-strip-title { font-size: 34px; font-weight: 900; color: var(--hp-warm-white); letter-spacing: -1px; line-height: 1.1; margin-bottom: 12px; }
.lead-strip-sub { font-size: 15px; color: var(--hp-gray-400); line-height: 1.7; max-width: 380px; }
.lead-strip-form {
flex-shrink: 0; width: 400px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.09);
padding: 28px;
}
.lead-strip-form-title {
font-size: 11px; font-weight: 700;
color: var(--hp-amber-400); letter-spacing: 2.5px;
text-transform: uppercase; margin-bottom: 18px;
}
.lead-form-row { display: flex; flex-direction: column; gap: 10px; }
.lead-input {
height: 44px; padding: 0 14px;
background: rgba(255,255,255,0.06);
border: 1.5px solid rgba(255,255,255,0.10);
color: var(--hp-warm-white);
font-family: 'Heebo', sans-serif; font-size: 14px;
outline: none;
transition: border-color 200ms ease, background 200ms ease;
}
.lead-input:hover { background: rgba(255,255,255,0.08); }
.lead-input:focus { border-color: var(--hp-amber-400); background: rgba(200,168,75,0.06); }
.lead-input::placeholder { color: var(--hp-gray-500); }
.lead-submit {
height: 48px;
background: var(--hp-orange-500);
color: #fff; font-size: 15px; font-weight: 700;
border: none; cursor: pointer;
font-family: 'Heebo', sans-serif;
transition: all 240ms ease;
box-shadow: 0 4px 20px rgba(208,80,0,0.35);
}
.lead-submit:hover {
background: var(--hp-orange-400);
box-shadow: 0 6px 28px rgba(208,80,0,0.50);
transform: translateY(-1px);
}
/* ── FOOTER ──────────────────────────────────────────────── */
.hp-footer {
background: var(--hp-black);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 40px;
display: flex; align-items: center; justify-content: space-between;
gap: 24px; flex-wrap: wrap;
}
.footer-brand { font-size: 18px; font-weight: 900; color: var(--hp-warm-white); letter-spacing: -0.3px; }
.footer-brand span { color: var(--hp-amber-400); font-size: 11px; font-weight: 500; margin-right: 8px; letter-spacing: 2px; text-transform: uppercase; }
.footer-links { display: flex; gap: 6px; }
.footer-link {
padding: 6px 12px;
font-size: 13px; color: #fff;
cursor: pointer; border-radius: 5px;
transition: all 180ms ease;
}
.footer-link:hover { color: var(--hp-amber-400); background: rgba(255,255,255,0.05); }
.footer-copy { font-size: 12px; color: #fff; }
.footer-legal { font-size: 11px; color: #fff; margin-top: 6px; }
/* ── ANIMATIONS ──────────────────────────────────────────── */
/* fadeUp and scrollBob defined in stage CSS block above */
/* Intersection observer triggered class */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* ── HAMBURGER + MOBILE MENU ─────────────────────────────── */
.hp-hamburger {
display: none;
flex-direction: column; justify-content: center; align-items: center;
gap: 5px;
width: 36px; height: 36px;
background: none; border: none; cursor: pointer; padding: 4px;
border-radius: 6px; margin-left: 12px; flex-shrink: 0;
transition: background 180ms ease;
}
.hp-hamburger:hover { background: rgba(255,255,255,0.08); }
.hp-hamburger-bar {
display: block;
width: 20px; height: 2px;
background: rgba(255,255,255,0.75);
border-radius: 2px;
transition: transform 250ms ease, opacity 250ms ease;
transform-origin: center;
}
.hp-hamburger.open .hp-hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hp-hamburger.open .hp-hamburger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hp-hamburger.open .hp-hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hp-mobile-menu {
display: none;
position: fixed;
top: 64px; left: 0; right: 0; z-index: 99;
flex-direction: column;
background: rgba(9,9,9,0.97);
border-bottom: 1px solid rgba(255,255,255,0.07);
backdrop-filter: blur(16px);
padding: 8px 0 16px;
}
.hp-mobile-menu.open { display: flex; }
.hp-mobile-nav-item {
padding: 15px 24px;
font-size: 15px; font-weight: 500;
color: rgba(255,255,255,0.7);
cursor: pointer; font-family: 'Heebo', sans-serif;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: color 150ms ease, background 150ms ease;
}
.hp-mobile-nav-item:last-child { border-bottom: none; }
.hp-mobile-nav-item:hover, .hp-mobile-nav-item:active { color: #fff; background: rgba(255,255,255,0.06); }
/* ── MOBILE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
.hp-header { padding: 0 20px; height: 110px; }
.yad1-header { height: 110px; }
.hp-logo-img { height: 110px; }
.y1-logo-img { height: 110px; }
.hp-nav { display: none; }
.hp-header-right { display: none; }
.hp-hamburger { display: flex; margin-left: auto; }
.hero { padding: 0 20px 72px; min-height: 90vh; }
.hero-stats { display: none; }
.split-section { grid-template-columns: 1fr; min-height: auto; }
.split-panel { min-height: 60vh; padding: 44px 24px; }
.split-divider { display: none; }
.trust-strip { gap: 0; overflow-x: auto; padding: 20px 24px; justify-content: flex-start; }
.trust-item { padding: 0 20px; flex-shrink: 0; }
.featured-section { padding: 40px 20px; }
.featured-grid { grid-template-columns: 1fr; gap: 12px; overflow: hidden; }
.featured-card { min-width: 0; overflow: hidden; }
.hp-split-grid {
display: flex; flex-direction: row;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: 12px; padding-bottom: 4px;
scrollbar-width: none;
margin-bottom: 20px;
/* Break out of panel padding for edge-to-edge carousel */
margin-left: -24px; margin-right: -24px;
padding-left: 16px; padding-right: 16px;
scroll-padding-left: 16px;
}
.hp-split-grid::-webkit-scrollbar { display: none; }
.hp-split-item { width: 82vw; flex-shrink: 0; scroll-snap-align: start; }
.lead-strip { flex-direction: column; gap: 40px; padding: 40px 20px; }
.lead-strip-form { width: 100%; }
.hp-footer { padding: 28px 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
}
/* Very narrow screens — single column fallback */
@media (max-width: 360px) {
.featured-grid { grid-template-columns: 1fr; }
}
/* ── YAD1 CSS ─────────────────────────────────────────────── */
/* ============================================================
SKIN LAYER — Yad1 Production Token System
All visual decisions live here. Zero logic. Zero structure.
============================================================ */
:root {
/* Primitives */
--p-black: #040404;
--p-gray-970: #090909;
--p-gray-950: #0c0c0c;
--p-gray-900: #111111;
--p-gray-860: #161616;
--p-gray-820: #1a1a1a;
--p-gray-800: #1e1e1e;
--p-gray-750: #242424;
--p-gray-700: #2c2c2c;
--p-gray-600: #3d3d3d;
--p-gray-500: #585858;
--p-gray-400: #7a7a7a;
--p-gray-300: #9e9e9e;
--p-gray-200: #c4c0bc;
--p-gray-100: #e2ddd8;
--p-warm-white: #f6f1e9;
--p-cream: #ede8de;
--p-amber-300: #d8bc6a;
--p-amber-400: #c8a84b;
--p-amber-500: #b89030;
--p-amber-600: #9a7418;
--p-orange-300: #f07020;
--p-orange-400: #e06010;
--p-orange-500: #d05000;
--p-orange-600: #b84000;
--p-red-400: #e04040;
--p-red-500: #c03030;
--p-green-300: #3ec880;
--p-green-400: #28a860;
--p-green-500: #1a8848;
}
/* ── YAD1 THEME ─────────────────────────────────────────── */
[data-theme="yad1"] {
/* Backgrounds */
--color-bg-page: var(--p-gray-970);
--color-bg-section: var(--p-gray-900);
--color-surface: var(--p-gray-820);
--color-surface-raised: var(--p-gray-800);
--color-surface-sunken: var(--p-gray-900);
--color-surface-hover: var(--p-gray-750);
--color-hero-overlay: rgba(4,4,4,0.65);
/* Text */
--color-text-primary: var(--p-warm-white);
--color-text-secondary: var(--p-gray-200);
--color-text-muted: var(--p-gray-400);
--color-text-inverse: var(--p-gray-950);
--color-text-on-accent: var(--p-gray-950);
/* Borders */
--color-border: rgba(255,255,255,0.07);
--color-border-strong: rgba(255,255,255,0.12);
--color-border-subtle: rgba(255,255,255,0.04);
--color-border-accent: rgba(200,168,75,0.35);
--color-border-focus: var(--p-amber-400);
/* Accent — amber gold */
--color-accent: var(--p-amber-400);
--color-accent-hover: var(--p-amber-300);
--color-accent-muted: rgba(200,168,75,0.09);
--color-accent-subtle: rgba(200,168,75,0.05);
--color-accent-glow: rgba(200,168,75,0.20);
/* CTA — orange */
--color-cta: var(--p-orange-500);
--color-cta-hover: var(--p-orange-400);
--color-cta-text: #ffffff;
--color-cta-shadow: rgba(208,80,0,0.45);
--color-cta-secondary: rgba(255,255,255,0.06);
/* WhatsApp */
--color-wa: #25d366;
--color-wa-hover: #1ebe5d;
--color-wa-shadow: rgba(37,211,102,0.35);
/* Status */
--color-status-active-bg: rgba(40,168,96,0.14);
--color-status-active-text: var(--p-green-300);
--color-status-active-border: rgba(40,168,96,0.25);
--color-status-sold-bg: rgba(192,48,48,0.14);
--color-status-sold-text: var(--p-red-400);
--color-status-sold-border: rgba(192,48,48,0.25);
--color-status-order-bg: rgba(200,168,75,0.10);
--color-status-order-text: var(--p-amber-400);
--color-status-order-border: rgba(200,168,75,0.25);
/* Typography */
--font-display: 'Heebo', sans-serif;
--font-body: 'Heebo', sans-serif;
--font-weight-display: 900;
--font-weight-heading: 800;
--font-weight-strong: 700;
--line-height-tight: 0.96;
--line-height-normal: 1.6;
/* Shape — sharp, industrial */
--radius-card: 3px;
--radius-button: 3px;
--radius-input: 3px;
--radius-badge: 2px;
--radius-chip: 2px;
/* Shadows — deep, dramatic */
--shadow-card: 0 4px 28px rgba(0,0,0,0.52), 0 1px 4px rgba(0,0,0,0.38);
--shadow-card-hover: 0 8px 44px rgba(0,0,0,0.72), 0 2px 10px rgba(0,0,0,0.48);
--shadow-raised: 0 12px 60px rgba(0,0,0,0.78);
--shadow-sticky: 0 2px 14px rgba(0,0,0,0.68);
--shadow-cta: 0 4px 22px rgba(208,80,0,0.42);
--shadow-accent: 0 4px 18px rgba(200,168,75,0.22);
--shadow-input-focus: 0 0 0 2px rgba(200,168,75,0.35);
/* Spacing — generous, cinematic */
--spacing-section-y: 72px;
--spacing-card-padding: 24px;
--spacing-page-x: 36px;
/* Transitions */
--transition-fast: 130ms ease;
--transition: 240ms ease;
--transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── ADMIN YAD1 THEME ────────────────────────────────────── */
[data-theme="admin-yad1"] {
--color-bg-page: #0c0f18;
--color-bg-section: #131720;
--color-surface: #1a1e2c;
--color-surface-raised: #1f2330;
--color-surface-sunken: #0f1219;
--color-surface-hover: rgba(255,255,255,0.03);
--color-text-primary: #eae6de;
--color-text-secondary: #8a8fa0;
--color-text-muted: #545a6a;
--color-text-inverse: #0c0f18;
--color-border: rgba(255,255,255,0.07);
--color-border-strong: rgba(255,255,255,0.12);
--color-border-subtle: rgba(255,255,255,0.04);
--color-border-focus: var(--p-amber-400);
--color-accent: var(--p-amber-400);
--color-accent-hover: var(--p-amber-300);
--color-accent-muted: rgba(200,168,75,0.08);
--color-accent-subtle: rgba(200,168,75,0.04);
--color-cta: var(--p-orange-500);
--color-cta-hover: var(--p-orange-400);
--color-cta-text: #ffffff;
--color-cta-shadow: rgba(208,80,0,0.35);
--color-status-active-bg: rgba(40,168,96,0.12);
--color-status-active-text: var(--p-green-300);
--color-status-active-border: rgba(40,168,96,0.22);
--color-status-sold-bg: rgba(192,48,48,0.12);
--color-status-sold-text: var(--p-red-400);
--color-status-sold-border: rgba(192,48,48,0.22);
--color-status-order-bg: rgba(200,168,75,0.09);
--color-status-order-text: var(--p-amber-400);
--color-status-order-border: rgba(200,168,75,0.22);
--font-display: 'Heebo', sans-serif;
--font-body: 'Heebo', sans-serif;
--font-weight-heading: 700;
--radius-card: 6px;
--radius-button: 4px;
--radius-input: 4px;
--radius-badge: 3px;
--shadow-card: 0 2px 10px rgba(0,0,0,0.30);
--shadow-card-hover: 0 6px 24px rgba(0,0,0,0.50);
--shadow-raised: 0 8px 32px rgba(0,0,0,0.55);
--shadow-sticky: 0 1px 0 rgba(255,255,255,0.05), 0 2px 12px rgba(0,0,0,0.4);
--shadow-input-focus: 0 0 0 2px rgba(200,168,75,0.30);
--spacing-section-y: 28px;
--spacing-card-padding: 18px;
--spacing-page-x: 24px;
--transition-fast: 100ms ease;
--transition: 160ms ease;
--transition-slow: 280ms ease;
}
/* ============================================================
BASE — Reset, RTL, Typography
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: 'Heebo', sans-serif;
background: var(--p-gray-950);
color: var(--p-warm-white);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
}
/* Grain overlay — structural element, applied via pseudo, zero logic */
.yad1-grain::before {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
opacity: 0.025;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ============================================================
TABLE CELL UTILITY CLASSES (Yad1)
Mirror of Yad2 utility classes — semantic tokens only.
Used by renderAdminRow to replace inline style attributes.
============================================================ */
.cell-emoji { font-size: 22px; }
.cell-strong { font-weight: 700; color: var(--color-text-primary); }
.cell-sub { font-size: 11.5px; color: var(--color-text-muted); }
.cell-muted { color: var(--color-text-muted); }
.cell-sm { font-size: 12px; }
.cell-value { font-weight: 600; color: var(--color-text-primary); }
.cell-price { font-weight: 700; color: var(--color-text-primary); }
.cell-actions { display: flex; gap: 5px; }
.featured-label { font-size: 12px; }
/* ============================================================
SCREEN ROUTING (demo)
============================================================ */
.app { min-height: 100vh; display: flex; flex-direction: column; }
.screen { display: none; }
.screen.active { display: flex; flex-direction: column; min-height: 100vh; }
/* Demo nav */
.demo-nav {
position: fixed; bottom: 0; left: 0; right: 0;
background: #0a0a0a;
display: flex; z-index: 1000;
border-top: 1px solid rgba(200,168,75,0.2);
overflow-x: auto;
}
.demo-nav button {
flex: 1; min-width: 110px;
padding: 10px 8px;
background: none; border: none;
color: #555; font-family: 'Heebo', sans-serif;
font-size: 11px; cursor: pointer;
transition: all 150ms; white-space: nowrap;
border-top: 2px solid transparent;
}
.demo-nav button.active { color: var(--p-amber-400); border-top-color: var(--p-amber-400); }
.demo-nav button:hover:not(.active) { color: #aaa; }
/* ============================================================
STRUCTURE: SHARED HEADER — YAD1
============================================================ */
.yad1-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
height: 64px;
display: flex; align-items: center;
padding: 0 var(--spacing-page-x);
gap: 32px;
background: linear-gradient(to bottom, rgba(8,8,8,0.96) 0%, rgba(8,8,8,0.82) 100%);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
transition: background var(--transition-slow);
}
.yad1-header.scrolled { background: rgba(8,8,8,0.98); }
/* Yad1 branded logo */
.header-logo {
display: flex; align-items: center; line-height: 1; flex-shrink: 0; cursor: pointer;
}
.y1-logo-img {
height: 110px;
width: auto;
display: block;
transition: opacity 180ms ease;
}
.header-logo:hover .y1-logo-img { opacity: 0.82; }
.header-nav { display: flex; gap: 4px; flex: 1; }
.header-nav-link {
padding: 7px 14px;
font-size: 13px; font-weight: 500;
color: var(--color-text-muted);
cursor: pointer; border-radius: 2px;
transition: all var(--transition);
letter-spacing: 0.2px;
}
.header-nav-link:hover { color: var(--color-text-secondary); }
.header-nav-link.active { color: var(--color-text-primary); }
.header-wa-btn {
display: flex; align-items: center; gap: 8px;
padding: 8px 18px;
background: var(--color-wa);
color: #fff; font-size: 13.5px; font-weight: 600;
border: none; border-radius: var(--radius-button);
cursor: pointer; flex-shrink: 0;
transition: all var(--transition);
font-family: 'Heebo', sans-serif;
}
.header-wa-btn:hover { background: var(--color-wa-hover); transform: translateY(-1px); }
/* ============================================================
SCREEN 1: YAD1 CATALOG
============================================================ */
.catalog-screen {
background: var(--color-bg-page);
padding-top: 64px;
}
/* Section intro */
.catalog-intro {
padding: 56px var(--spacing-page-x) 36px;
max-width: 1200px; margin: 0 auto;
}
.catalog-eyebrow {
font-size: 11px; font-weight: 700;
color: var(--color-accent);
letter-spacing: 3px; text-transform: uppercase;
margin-bottom: 12px;
display: flex; align-items: center; gap: 10px;
}
.catalog-eyebrow::before {
content: '';
display: inline-block; width: 24px; height: 1px;
background: var(--color-accent);
}
.catalog-headline {
font-size: 42px; font-weight: 900;
color: var(--color-text-primary);
line-height: 1.1; letter-spacing: -1px;
margin-bottom: 14px;
}
.catalog-headline em { color: var(--color-accent); font-style: normal; }
.catalog-sub {
font-size: 15px; color: var(--color-text-muted);
max-width: 480px; line-height: 1.7;
}
/* Catalog filter bar */
.catalog-filters {
max-width: 1200px; margin: 0 auto;
padding: 0 var(--spacing-page-x) 24px;
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.catalog-filter-btn {
padding: 7px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
color: var(--color-text-secondary);
font-size: 13px; font-weight: 500;
border-radius: var(--radius-button);
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all var(--transition);
}
.catalog-filter-btn:hover,
.catalog-filter-btn.active {
background: var(--color-accent-muted);
border-color: var(--color-accent);
color: var(--color-accent);
}
.filter-divider {
width: 1px; height: 20px;
background: var(--color-border-strong);
margin: 0 4px;
}
.catalog-results-count {
margin-right: auto;
font-size: 12px; color: var(--color-text-muted);
}
/* Vehicle grid */
.yad1-catalog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
max-width: 1200px; margin: 0 auto;
padding: 0 var(--spacing-page-x) 80px;
}
@media (max-width: 860px) { .yad1-catalog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
.yad1-catalog-grid {
grid-template-columns: 1fr;
padding-left: 12px;
padding-right: 12px;
overflow-x: hidden;
}
}
/* Yad1 vehicle card */
.yad1-card {
position: relative;
background: var(--color-surface);
border: 1px solid var(--color-border);
overflow: hidden;
cursor: pointer;
transition: all var(--transition-slow);
display: flex; flex-direction: column;
}
.yad1-card:hover {
border-color: var(--color-border-accent);
box-shadow: var(--shadow-card-hover);
transform: translateY(-3px) scale(1.005);
z-index: 2;
}
.yad1-card-img {
position: relative;
width: 100%; height: 180px;
background: linear-gradient(145deg, var(--p-gray-800) 0%, var(--p-gray-700) 100%);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.yad1-card-img-placeholder {
font-size: 64px;
filter: grayscale(0.3);
transition: transform var(--transition-slow);
}
.yad1-card-img-photo {
width: 100%; height: 100%;
object-fit: contain;
transition: transform var(--transition-slow);
}
.yad1-card:hover .yad1-card-img-placeholder,
.yad1-card:hover .yad1-card-img-photo { transform: scale(1.05); }
/* Gradient overlay on card image */
.yad1-card-img-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
height: 50%;
background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
}
.yad1-card-availability {
position: absolute; bottom: 12px; right: 12px;
}
.avail-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 10px;
font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: var(--radius-badge);
}
.avail-stock { background: var(--color-status-active-bg); color: var(--color-status-active-text); border: 1px solid rgba(52,184,124,0.25); }
.avail-order { background: var(--color-status-order-bg); color: var(--color-status-order-text); border: 1px solid rgba(200,168,75,0.25); }
.avail-sold { background: var(--color-status-sold-bg); color: var(--color-status-sold-text); border: 1px solid rgba(192,57,43,0.25); }
.yad1-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.yad1-card-brand {
font-size: 10px; font-weight: 700; color: var(--color-accent);
letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 4px;
}
.yad1-card-name {
font-size: 22px; font-weight: 900;
color: var(--color-text-primary);
letter-spacing: -0.5px; line-height: 1.1;
margin-bottom: 14px;
}
/* Capability chips row */
.yad1-capabilities {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 16px;
}
.cap-chip {
display: flex; align-items: center; gap: 5px;
padding: 5px 10px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
font-size: 12px; color: var(--color-text-secondary);
border-radius: var(--radius-chip);
transition: all var(--transition);
}
.cap-chip .cap-icon { font-size: 13px; }
.cap-chip .cap-val { font-weight: 600; color: var(--color-text-primary); }
.yad1-card:hover .cap-chip { border-color: var(--color-border-strong); }
.yad1-card-footer {
margin-top: auto; padding-top: 16px;
border-top: 1px solid var(--color-border);
display: flex; justify-content: space-between; align-items: center;
}
.yad1-card-price {
font-size: 20px; font-weight: 800;
color: var(--color-text-primary);
}
.yad1-card-price-note {
font-size: 11px; color: var(--color-text-muted); margin-top: 2px;
}
.yad1-card-cta {
display: flex; gap: 10px; justify-content: flex-end;
}
.btn-circle-wa, .btn-circle-phone {
width: 40px; height: 40px;
border-radius: 50%;
border: none; cursor: pointer;
display: flex; align-items: center; justify-content: center;
font-size: 18px; line-height: 1;
transition: transform var(--transition), opacity var(--transition);
}
.btn-circle-wa { background: #25D366; }
.btn-circle-phone { background: #FF6B00; }
.btn-circle-wa:hover, .btn-circle-phone:hover { transform: scale(1.1); opacity: .9; }
/* Featured card — visual parity, no layout override */
.yad1-card.featured { grid-column: unset; }
.yad1-card.featured .yad1-card-img { height: 180px; }
.yad1-card.featured .yad1-card-name { font-size: inherit; }
/* ============================================================
SCREEN 2: YAD1 VEHICLE PAGE
============================================================ */
.vehicle-screen {
background: var(--color-bg-page);
padding-top: 64px;
}
/* Hero — full-bleed cinematic */
.vehicle-hero {
position: relative;
width: 100%; height: 88vh; min-height: 580px; max-height: 860px;
background: linear-gradient(145deg, #141414 0%, #0c0c0c 50%, #111 100%);
display: flex; align-items: flex-end;
overflow: hidden;
}
.hero-bg-emoji {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
font-size: 260px; opacity: 0.08;
filter: blur(1px);
transform: scale(1.1);
}
/* Real image layer — sits between emoji and gradient, fades in when image present */
.hero-bg-img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 400ms ease;
z-index: 1;
}
/* Cinematic bars */
.hero-cinematic-bar {
position: absolute; left: 0; right: 0; height: 80px;
background: var(--p-black); z-index: 2;
}
.hero-cinematic-bar.top { top: 0; }
.hero-cinematic-bar.bottom { bottom: 0; }
.hero-gradient-overlay {
position: absolute; inset: 0;
background:
linear-gradient(to top, rgba(8,8,8,1) 0%, rgba(8,8,8,0.7) 30%, transparent 70%),
linear-gradient(to right, rgba(8,8,8,0.5) 0%, transparent 60%);
z-index: 3;
}
.hero-content {
position: relative; z-index: 4;
padding: 0 var(--spacing-page-x) 80px;
max-width: 560px; width: 100%; margin: 0;
}
.hero-eyebrow {
font-size: 11px; font-weight: 700;
color: var(--color-accent); letter-spacing: 3.5px;
text-transform: uppercase; margin-bottom: 16px;
display: flex; align-items: center; gap: 12px;
animation: fadeUp 0.8s ease both;
}
.hero-eyebrow-line { width: 32px; height: 1px; background: var(--color-accent); }
.hero-title {
font-size: clamp(48px, 7vw, 88px);
font-weight: 900; line-height: 0.95;
letter-spacing: -3px;
color: var(--color-text-primary);
margin-bottom: 16px;
animation: fadeUp 0.8s 0.1s ease both;
}
.hero-title em { color: var(--color-accent); font-style: normal; }
.hero-tagline {
font-size: 16px; font-weight: 400;
color: var(--color-text-secondary);
max-width: 420px; line-height: 1.7;
margin-bottom: 36px;
animation: fadeUp 0.8s 0.2s ease both;
}
.hero-ctas {
display: flex; gap: 12px; flex-wrap: wrap;
animation: fadeUp 0.8s 0.3s ease both;
}
.btn-hero-primary {
display: flex; align-items: center; gap: 10px;
padding: 14px 28px;
background: var(--color-wa); color: #fff;
font-size: 15px; font-weight: 700;
border: none; border-radius: var(--radius-button);
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all var(--transition);
box-shadow: 0 4px 20px rgba(37,211,102,0.3);
}
.btn-hero-primary:hover {
background: var(--color-wa-hover);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(37,211,102,0.4);
}
.btn-hero-secondary {
display: flex; align-items: center; gap: 10px;
padding: 14px 24px;
background: rgba(255,255,255,0.06);
color: var(--color-text-secondary);
font-size: 15px; font-weight: 600;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-button);
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all var(--transition);
backdrop-filter: blur(4px);
}
.btn-hero-secondary:hover {
background: rgba(255,255,255,0.10);
color: var(--color-text-primary);
}
/* Hero stats strip */
.hero-stats {
position: absolute; bottom: 80px; left: 0; right: 0; z-index: 4;
display: flex; justify-content: flex-start; gap: 0;
padding: 0 var(--spacing-page-x);
max-width: 1200px; margin: 0 auto;
}
.hero-stat-item {
padding: 14px 28px 14px 0;
border-right: 1px solid var(--color-border);
margin-left: 28px;
}
.hero-stat-item:first-child { padding-right: 0; border-right: none; margin-left: 0; }
.hero-stat-val {
font-size: 26px; font-weight: 900;
color: var(--color-text-primary);
line-height: 1;
}
.hero-stat-val em { color: var(--color-accent); font-style: normal; }
.hero-stat-label {
font-size: 11px; color: var(--color-text-muted);
font-weight: 500; margin-top: 3px;
letter-spacing: 0.5px;
}
/* Capability highlights section */
.capability-section {
max-width: 1200px; margin: 0 auto;
padding: 64px var(--spacing-page-x) 48px;
}
.section-eyebrow {
font-size: 10px; font-weight: 700;
color: var(--color-accent); letter-spacing: 3px;
text-transform: uppercase; margin-bottom: 10px;
display: flex; align-items: center; gap: 10px;
}
.section-eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--color-accent); display: inline-block; }
.section-title {
font-size: 30px; font-weight: 900;
color: var(--color-text-primary);
letter-spacing: -0.8px; margin-bottom: 36px;
}
.capability-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.capability-item {
background: var(--color-surface);
border: 1px solid var(--color-border);
padding: 28px;
transition: all var(--transition);
position: relative; overflow: hidden;
}
.capability-item::before {
content: '';
position: absolute; top: 0; right: 0;
width: 3px; height: 0;
background: var(--color-accent);
transition: height var(--transition-slow);
}
.capability-item:hover::before { height: 100%; }
.capability-item:hover { background: var(--color-surface-raised); }
.cap-icon-large {
font-size: 32px; margin-bottom: 14px;
display: block;
}
.cap-value {
font-size: 36px; font-weight: 900;
color: var(--color-text-primary);
letter-spacing: -1px; line-height: 1;
margin-bottom: 4px;
}
.cap-value em { color: var(--color-accent); font-style: normal; font-size: 24px; }
.cap-label {
font-size: 13px; color: var(--color-text-muted);
font-weight: 500; margin-bottom: 10px;
}
.cap-desc {
font-size: 12px; color: var(--color-text-muted);
line-height: 1.6; opacity: 0.8;
}
/* Gallery section */
.gallery-section {
max-width: 1200px; margin: 0 auto;
padding: 0 var(--spacing-page-x) 48px;
}
.gallery-main-wrap {
position: relative; width: 100%;
height: 420px;
background: var(--color-surface);
border: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: center;
overflow: hidden; margin-bottom: 2px;
}
.gallery-main-emoji { font-size: 120px; filter: grayscale(0.2); }
.gallery-counter {
position: absolute; bottom: 16px; left: 16px;
background: rgba(0,0,0,0.6);
color: var(--color-text-secondary);
font-size: 12px; padding: 4px 10px; border-radius: 2px;
backdrop-filter: blur(4px);
}
.gallery-thumbs-row {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
}
.gallery-thumb-item {
height: 80px;
background: var(--color-surface);
border: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: center;
font-size: 28px; cursor: pointer;
transition: all var(--transition);
filter: brightness(0.6);
}
.gallery-thumb-item:hover,
.gallery-thumb-item.active { filter: brightness(1); border-color: var(--color-accent); }
/* Full specs */
.specs-section {
max-width: 1200px; margin: 0 auto;
padding: 48px var(--spacing-page-x);
}
.specs-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.spec-row {
display: flex; justify-content: space-between;
align-items: center; padding: 12px 16px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
gap: 16px;
}
.spec-row:nth-child(odd) { background: var(--color-surface-sunken); }
.spec-row-label { font-size: 12.5px; color: var(--color-text-muted); font-weight: 500; }
.spec-row-val { font-size: 13px; font-weight: 600; color: var(--color-text-primary); }
/* Lead section */
.lead-section {
max-width: 1200px; margin: 0 auto;
padding: 48px var(--spacing-page-x) 80px;
}
.lead-section-inner {
display: grid; grid-template-columns: 1fr 400px; gap: 48px;
align-items: start;
}
.lead-copy-title {
font-size: 36px; font-weight: 900;
color: var(--color-text-primary);
letter-spacing: -1px; margin-bottom: 14px;
line-height: 1.1;
}
.lead-copy-title em { color: var(--color-accent); font-style: normal; }
.lead-copy-sub {
font-size: 15px; color: var(--color-text-muted);
line-height: 1.7; max-width: 380px;
margin-bottom: 28px;
}
.lead-cta-stack { display: flex; flex-direction: column; gap: 12px; }
.btn-lead-wa {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 16px 28px;
background: var(--color-wa); color: #fff;
font-size: 16px; font-weight: 700;
border: none; border-radius: var(--radius-button);
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all var(--transition);
box-shadow: 0 4px 24px rgba(37,211,102,0.3);
}
.btn-lead-wa:hover { background: var(--color-wa-hover); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,211,102,0.45); }
.btn-lead-phone {
display: flex; align-items: center; justify-content: center; gap: 10px;
padding: 14px 28px;
background: transparent; color: var(--color-text-secondary);
font-size: 15px; font-weight: 600;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-button);
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all var(--transition);
}
.btn-lead-phone:hover { border-color: var(--color-text-muted); color: var(--color-text-primary); }
/* Lead form box */
.lead-form-box {
background: var(--color-surface);
border: 1px solid var(--color-border-accent);
padding: 28px;
}
.lead-form-eyebrow {
font-size: 10px; font-weight: 700;
color: var(--color-accent); letter-spacing: 2.5px;
text-transform: uppercase; margin-bottom: 20px;
}
.lead-form-field {
margin-bottom: 12px;
}
.lead-form-label {
display: block; font-size: 12px; font-weight: 600;
color: var(--color-text-muted); margin-bottom: 5px;
letter-spacing: 0.4px; text-transform: uppercase;
}
.lead-form-input {
width: 100%; height: 44px;
padding: 0 14px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
color: var(--color-text-primary);
font-family: 'Heebo', sans-serif; font-size: 14px;
outline: none;
transition: border-color var(--transition);
}
.lead-form-input:focus { border-color: var(--color-accent); }
.lead-form-input::placeholder { color: var(--color-text-muted); }
.lead-form-textarea {
width: 100%; height: 90px;
padding: 12px 14px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
color: var(--color-text-primary);
font-family: 'Heebo', sans-serif; font-size: 14px;
outline: none; resize: none;
transition: border-color var(--transition);
}
.lead-form-textarea:focus { border-color: var(--color-accent); }
.btn-lead-submit {
width: 100%; padding: 14px;
background: var(--color-cta); color: var(--color-cta-text);
font-size: 15px; font-weight: 700;
border: none; border-radius: var(--radius-button);
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all var(--transition);
margin-top: 4px;
box-shadow: var(--shadow-cta);
}
.btn-lead-submit:hover { background: var(--color-cta-hover); transform: translateY(-1px); box-shadow: 0 6px 32px rgba(212,91,0,0.5); }
/* Sticky CTA mobile */
.sticky-cta-bar {
position: fixed; bottom: 44px; left: 0; right: 0; z-index: 100;
padding: 10px 16px;
background: rgba(8,8,8,0.96);
border-top: 1px solid var(--color-border-accent);
display: flex; gap: 8px;
backdrop-filter: blur(12px);
}
.sticky-cta-bar .btn { flex: 1; justify-content: center; font-size: 14px; }
/* ============================================================
SCREEN 3: BRAND PAGE
============================================================ */
.brand-page { background: var(--color-bg-page); padding-top: 64px; }
.brand-hero {
height: 340px;
background: linear-gradient(135deg, #0a0a0a 0%, #141414 100%);
display: flex; align-items: center;
padding: 0 var(--spacing-page-x);
position: relative; overflow: hidden;
}
.brand-hero-bg {
position: absolute; right: -60px; top: 50%;
transform: translateY(-50%);
font-size: 280px; opacity: 0.05;
filter: blur(2px);
}
.brand-hero-content { position: relative; z-index: 2; }
.brand-logo-area {
display: flex; align-items: center; gap: 20px; margin-bottom: 16px;
}
.brand-logo-box {
width: 56px; height: 56px;
background: var(--color-surface);
border: 1px solid var(--color-border-accent);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
}
.brand-name {
font-size: 52px; font-weight: 900;
color: var(--color-text-primary);
letter-spacing: -2px; line-height: 1;
}
.brand-tagline {
font-size: 15px; color: var(--color-text-muted);
max-width: 440px; line-height: 1.6;
}
/* ============================================================
SCREEN 4: ADMIN YAD1
============================================================ */
.admin-layout {
display: flex; min-height: 100vh;
background: var(--color-bg-page);
padding-bottom: 44px;
}
/* Dark admin sidebar */
.admin-sidebar {
width: 230px; min-width: 230px;
background: #0a0d14;
border-left: 1px solid rgba(255,255,255,0.06);
display: flex; flex-direction: column;
height: 100vh; position: sticky; top: 0; overflow-y: auto;
}
.sidebar-brand {
padding: 22px 20px 18px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.sidebar-brand-name { font-size: 20px; font-weight: 900; color: #fff; }
.sidebar-brand-sub { font-size: 10px; color: var(--p-amber-400); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 2px; }
.sidebar-nav { padding: 14px 0; flex: 1; }
.sidebar-section-label {
padding: 6px 18px 3px;
font-size: 10px; font-weight: 700;
color: #3a3f50; letter-spacing: 1px;
text-transform: uppercase; margin-top: 8px;
}
.sidebar-nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 18px;
color: #5a6070; font-size: 13.5px;
cursor: pointer; transition: all 150ms;
border-right: 3px solid transparent;
}
.sidebar-nav-item:hover { color: #b0b5c8; background: rgba(255,255,255,0.03); }
.sidebar-nav-item.active { color: var(--p-amber-400); border-right-color: var(--p-amber-400); background: rgba(200,168,75,0.06); }
.sidebar-nav-item .nav-icon { width: 16px; font-size: 14px; flex-shrink: 0; }
.sidebar-nav-badge {
margin-right: auto; background: var(--p-orange-500);
color: #fff; font-size: 10px; font-weight: 700;
padding: 1px 6px; border-radius: 3px;
}
.sidebar-footer {
padding: 14px 18px;
border-top: 1px solid rgba(255,255,255,0.06);
display: flex; align-items: center; gap: 10px;
}
.sidebar-avatar {
width: 32px; height: 32px; border-radius: 3px;
background: var(--p-orange-500);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 800; color: #fff;
}
.sidebar-user-name { font-size: 13px; color: #c0c5d5; font-weight: 500; }
.sidebar-user-role { font-size: 11px; color: #3a3f50; }
/* Admin main */
.admin-main { flex: 1; overflow-y: auto; min-height: 100vh; }
.admin-topbar {
height: 58px;
background: var(--color-bg-section);
border-bottom: 1px solid var(--color-border);
display: flex; align-items: center;
padding: 0 var(--spacing-page-x); gap: 14px;
position: sticky; top: 0; z-index: 50;
}
.admin-page-title {
font-size: 16px; font-weight: 700;
color: var(--color-text-primary);
}
.topbar-right { margin-right: auto; display: flex; gap: 10px; }
.admin-body { padding: var(--spacing-section-y) var(--spacing-page-x); }
/* Shared admin button styles (themed dark) */
.btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 9px 18px;
border-radius: var(--radius-button);
font-family: 'Heebo', sans-serif; font-size: 13.5px; font-weight: 600;
cursor: pointer; transition: all var(--transition);
border: 1px solid transparent; white-space: nowrap;
}
.btn-primary {
background: var(--color-cta); color: var(--color-cta-text);
border-color: var(--color-cta);
}
.btn-primary:hover { background: var(--color-cta-hover); transform: translateY(-1px); box-shadow: var(--shadow-cta); }
.btn-secondary {
background: var(--color-surface);
color: var(--color-text-secondary);
border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-raised); color: var(--color-text-primary); }
.btn-ghost { background: transparent; color: var(--color-text-muted); border-color: transparent; }
.btn-ghost:hover { background: var(--color-surface); color: var(--color-text-secondary); }
.btn-accent {
background: var(--color-accent-muted); color: var(--color-accent);
border-color: var(--color-border-accent);
}
.btn-accent:hover { background: rgba(200,168,75,0.16); }
.btn-danger { background: rgba(192,57,43,0.12); color: #e57373; border-color: rgba(192,57,43,0.25); }
.btn-danger:hover { background: rgba(192,57,43,0.22); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
/* Admin table */
.admin-table-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
overflow: hidden;
}
.admin-toolbar {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px; border-bottom: 1px solid var(--color-border);
flex-wrap: wrap;
}
.admin-search-wrap {
position: relative; flex: 1; min-width: 180px; max-width: 300px;
}
.admin-search-input {
width: 100%; height: 36px; padding: 0 36px 0 14px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
color: var(--color-text-primary); font-family: 'Heebo', sans-serif; font-size: 13.5px;
outline: none; transition: border-color var(--transition);
}
.admin-search-input:focus { border-color: var(--color-accent); }
.admin-search-input::placeholder { color: var(--color-text-muted); }
.admin-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 14px; }
.admin-filter-select {
height: 36px; padding: 0 12px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
color: var(--color-text-primary); font-family: 'Heebo', sans-serif; font-size: 13px;
outline: none; cursor: pointer;
}
.admin-data-table { width: 100%; border-collapse: collapse; }
.admin-data-table th {
text-align: right; padding: 11px 16px;
font-size: 11px; font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: 0.6px;
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.admin-data-table td {
padding: 13px 16px;
font-size: 13.5px; color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border);
vertical-align: middle;
}
.admin-data-table tr:hover td { background: rgba(255,255,255,0.02); }
.admin-data-table tr:last-child td { border-bottom: none; }
/* Featured toggle */
.featured-toggle {
display: flex; align-items: center; gap: 7px;
cursor: pointer; font-size: 12px;
color: var(--color-text-muted);
transition: color var(--transition);
}
.featured-toggle:hover { color: var(--color-accent); }
.toggle-star { font-size: 16px; }
.toggle-star.on { color: var(--color-accent); }
/* Status badge */
.status-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px;
font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
text-transform: uppercase;
border-radius: var(--radius-badge);
}
.status-active { background: var(--color-status-active-bg); color: var(--color-status-active-text); }
.status-sold { background: var(--color-status-sold-bg); color: var(--color-status-sold-text); }
.status-order { background: var(--color-status-order-bg); color: var(--color-status-order-text); }
/* Vehicle form panel */
.vehicle-form-panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
padding: 28px;
margin-top: 24px;
}
.form-section-title {
font-size: 12px; font-weight: 700;
color: var(--color-accent); letter-spacing: 2px;
text-transform: uppercase; margin-bottom: 16px; margin-top: 24px;
display: flex; align-items: center; gap: 10px;
}
.form-section-title::before { content: ''; width: 16px; height: 1px; background: var(--color-accent); display: inline-block; }
.form-section-title:first-child { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-label {
font-size: 11px; font-weight: 700;
color: var(--color-text-muted); letter-spacing: 0.6px;
text-transform: uppercase;
}
.form-input, .form-select, .form-textarea {
height: 42px; padding: 0 14px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
color: var(--color-text-primary);
font-family: 'Heebo', sans-serif; font-size: 14px;
outline: none; transition: border-color var(--transition);
width: 100%;
}
.form-input:focus, .form-select:focus { border-color: var(--color-accent); }
.form-input::placeholder { color: var(--color-text-muted); }
.form-textarea { height: 90px; padding: 12px 14px; resize: none; }
.form-full { grid-column: 1 / -1; }
/* Image upload zone */
.image-upload-zone {
border: 2px dashed var(--color-border-strong);
padding: 36px;
text-align: center; cursor: pointer;
transition: all var(--transition);
background: var(--color-surface-sunken);
border-radius: var(--radius-input);
}
.image-upload-zone:hover {
border-color: var(--color-accent);
background: var(--color-accent-muted);
}
.upload-icon { font-size: 36px; opacity: 0.4; margin-bottom: 10px; }
.upload-text { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); margin-bottom: 4px; }
.upload-sub { font-size: 12px; color: var(--color-text-muted); }
.image-preview-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px; margin-top: 16px;
}
.img-preview-item {
aspect-ratio: 1.5;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: center;
font-size: 28px; position: relative; cursor: grab;
transition: border-color var(--transition);
}
.img-preview-item:hover { border-color: var(--color-accent); }
.img-preview-badge {
position: absolute; top: 4px; right: 4px;
background: var(--color-accent); color: var(--p-black);
font-size: 9px; font-weight: 800; padding: 1px 5px;
border-radius: 2px; letter-spacing: 0.5px;
}
.img-preview-remove {
position: absolute; top: 4px; left: 4px;
width: 18px; height: 18px;
background: rgba(192,57,43,0.7); color: #fff;
border: none; border-radius: 2px; cursor: pointer;
font-size: 10px; display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity var(--transition);
}
.img-preview-item:hover .img-preview-remove { opacity: 1; }
/* Availability select styled */
.avail-select-wrap { position: relative; }
.avail-indicator {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-strong);
cursor: pointer;
transition: border-color var(--transition);
}
.avail-indicator:hover { border-color: var(--color-accent); }
.avail-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-stock { background: var(--p-green-400); }
.dot-order { background: var(--p-amber-400); }
.dot-sold { background: var(--p-red-500); }
/* Form action bar */
.form-actions {
display: flex; gap: 10px; justify-content: flex-start;
padding-top: 20px; margin-top: 20px;
border-top: 1px solid var(--color-border);
}
/* Animations */
@keyframes fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── YAD2 CSS ─────────────────────────────────────────────── */
/* ============================================================
SKIN LAYER — Production token system. Zero logic.
============================================================ */
/* Google Fonts upgrade — add display weight for headings */
:root {
/* Primitives */
--primitive-white: #ffffff;
--primitive-gray-25: #fcfcfd;
--primitive-gray-50: #f8f9fc;
--primitive-gray-100: #f1f3f8;
--primitive-gray-150: #eaecf4;
--primitive-gray-200: #e0e3ee;
--primitive-gray-300: #c8cde0;
--primitive-gray-400: #9299b5;
--primitive-gray-500: #60687e;
--primitive-gray-600: #454c60;
--primitive-gray-700: #2e3344;
--primitive-gray-800: #1c2033;
--primitive-gray-900: #0f1220;
--primitive-blue-25: #f0f5ff;
--primitive-blue-50: #e8f0fe;
--primitive-blue-100: #d0e1fd;
--primitive-blue-200: #a3c2fb;
--primitive-blue-500: #3b6ef5;
--primitive-blue-600: #2356e8;
--primitive-blue-700: #1740cc;
--primitive-blue-800: #102ba0;
--primitive-green-25: #f0fdf6;
--primitive-green-50: #dcfcec;
--primitive-green-500: #1aaf66;
--primitive-green-600: #0d8a4e;
--primitive-red-25: #fff5f5;
--primitive-red-50: #ffe8e8;
--primitive-red-500: #e03535;
--primitive-red-600: #c02020;
--primitive-amber-25: #fffcf0;
--primitive-amber-50: #fff5d0;
--primitive-amber-500: #e09a00;
--primitive-amber-600: #b87a00;
}
/* ── YAD2 THEME ─────────────────────────────────────────── */
[data-theme="yad2"] {
/* Backgrounds */
--color-bg-page: #f4f6fb;
--color-bg-section: var(--primitive-white);
--color-surface: var(--primitive-white);
--color-surface-raised: var(--primitive-white);
--color-surface-sunken: var(--primitive-gray-50);
--color-surface-hover: var(--primitive-gray-25);
/* Text */
--color-text-primary: var(--primitive-gray-900);
--color-text-secondary: var(--primitive-gray-500);
--color-text-muted: var(--primitive-gray-400);
--color-text-inverse: var(--primitive-white);
--color-text-link: var(--primitive-blue-600);
/* Borders */
--color-border: var(--primitive-gray-200);
--color-border-strong: var(--primitive-gray-300);
--color-border-subtle: var(--primitive-gray-150);
--color-border-focus: var(--primitive-blue-500);
/* Accent */
--color-accent: var(--primitive-blue-600);
--color-accent-hover: var(--primitive-blue-700);
--color-accent-muted: var(--primitive-blue-25);
--color-accent-subtle: var(--primitive-blue-50);
/* CTA */
--color-cta: var(--primitive-blue-600);
--color-cta-hover: var(--primitive-blue-700);
--color-cta-text: var(--primitive-white);
--color-cta-shadow: rgba(35, 86, 232, 0.28);
/* Status — vehicle */
--color-status-active-bg: var(--primitive-green-25);
--color-status-active-text: var(--primitive-green-600);
--color-status-active-border: rgba(13, 138, 78, 0.2);
--color-status-sold-bg: var(--primitive-red-25);
--color-status-sold-text: var(--primitive-red-600);
--color-status-sold-border: rgba(192, 32, 32, 0.18);
--color-status-inactive-bg: var(--primitive-gray-100);
--color-status-inactive-text: var(--primitive-gray-500);
/* Status — leads */
--color-status-new-bg: var(--primitive-blue-25);
--color-status-new-text: var(--primitive-blue-700);
--color-status-new-border: rgba(35, 86, 232, 0.2);
--color-status-progress-bg: var(--primitive-amber-25);
--color-status-progress-text: var(--primitive-amber-600);
--color-status-closed-bg: var(--primitive-gray-100);
--color-status-closed-text: var(--primitive-gray-500);
/* Shape */
--radius-card: 12px;
--radius-button: 8px;
--radius-input: 8px;
--radius-badge: 6px;
--radius-chip: 6px;
/* Shadows */
--shadow-card: 0 1px 3px rgba(15, 18, 32, 0.06), 0 1px 2px rgba(15, 18, 32, 0.04);
--shadow-card-hover: 0 4px 16px rgba(15, 18, 32, 0.10), 0 1px 4px rgba(15, 18, 32, 0.06);
--shadow-raised: 0 8px 32px rgba(15, 18, 32, 0.12), 0 2px 8px rgba(15, 18, 32, 0.06);
--shadow-sticky: 0 1px 0 var(--color-border), 0 2px 12px rgba(15, 18, 32, 0.06);
--shadow-input-focus: 0 0 0 3px rgba(35, 86, 232, 0.15);
/* Typography */
--font-heading: 'Heebo', sans-serif;
--font-body: 'Heebo', sans-serif;
--font-mono: 'SFMono-Regular', 'Consolas', monospace;
--font-weight-heading: 700;
--font-size-hero: 38px;
--font-size-title: 22px;
--font-size-section: 17px;
--font-size-body: 14.5px;
--font-size-small: 13px;
--font-size-xs: 11.5px;
--line-height-tight: 1.25;
--line-height-normal: 1.6;
--line-height-loose: 1.75;
/* Spacing */
--spacing-section-y: 32px;
--spacing-card-padding: 18px;
--spacing-page-x: 28px;
--spacing-row-gap: 14px;
/* Transitions */
--transition-fast: 120ms ease;
--transition: 200ms ease;
--transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* ── ADMIN THEME ─────────────────────────────────────────── */
[data-theme="admin"] {
/* Backgrounds */
--color-bg-page: #eef0f7;
--color-bg-section: var(--primitive-white);
--color-surface: var(--primitive-white);
--color-surface-raised: var(--primitive-white);
--color-surface-sunken: var(--primitive-gray-50);
--color-surface-hover: var(--primitive-gray-25);
/* Text */
--color-text-primary: var(--primitive-gray-800);
--color-text-secondary: var(--primitive-gray-500);
--color-text-muted: var(--primitive-gray-400);
--color-text-inverse: var(--primitive-white);
--color-text-link: var(--primitive-blue-600);
/* Borders */
--color-border: var(--primitive-gray-200);
--color-border-strong: var(--primitive-gray-300);
--color-border-subtle: var(--primitive-gray-150);
--color-border-focus: var(--primitive-blue-500);
/* Accent */
--color-accent: var(--primitive-blue-600);
--color-accent-hover: var(--primitive-blue-700);
--color-accent-muted: var(--primitive-blue-25);
/* CTA */
--color-cta: var(--primitive-blue-600);
--color-cta-hover: var(--primitive-blue-700);
--color-cta-text: var(--primitive-white);
--color-cta-shadow: rgba(35, 86, 232, 0.22);
/* Status */
--color-status-active-bg: var(--primitive-green-25);
--color-status-active-text: var(--primitive-green-600);
--color-status-active-border: rgba(13, 138, 78, 0.18);
--color-status-sold-bg: var(--primitive-red-25);
--color-status-sold-text: var(--primitive-red-600);
--color-status-sold-border: rgba(192, 32, 32, 0.16);
--color-status-inactive-bg: var(--primitive-gray-100);
--color-status-inactive-text: var(--primitive-gray-500);
--color-status-new-bg: var(--primitive-blue-25);
--color-status-new-text: var(--primitive-blue-700);
--color-status-new-border: rgba(35, 86, 232, 0.18);
--color-status-progress-bg: var(--primitive-amber-25);
--color-status-progress-text: var(--primitive-amber-600);
--color-status-closed-bg: var(--primitive-gray-100);
--color-status-closed-text: var(--primitive-gray-500);
/* Shape */
--radius-card: 10px;
--radius-button: 7px;
--radius-input: 7px;
--radius-badge: 5px;
/* Shadows */
--shadow-card: 0 1px 2px rgba(15, 18, 32, 0.05);
--shadow-card-hover: 0 3px 12px rgba(15, 18, 32, 0.09);
--shadow-raised: 0 6px 24px rgba(15, 18, 32, 0.10);
--shadow-sticky: 0 1px 0 var(--color-border);
--shadow-input-focus: 0 0 0 3px rgba(35, 86, 232, 0.14);
/* Typography */
--font-heading: 'Heebo', sans-serif;
--font-body: 'Heebo', sans-serif;
--font-mono: 'SFMono-Regular', 'Consolas', monospace;
--font-weight-heading: 600;
--font-size-title: 18px;
--font-size-section: 15px;
--font-size-body: 13.5px;
--font-size-small: 12.5px;
--font-size-xs: 11px;
/* Spacing */
--spacing-section-y: 28px;
--spacing-card-padding: 16px;
--spacing-page-x: 24px;
--spacing-row-gap: 12px;
/* Transitions */
--transition-fast: 100ms ease;
--transition: 160ms ease;
--transition-slow: 280ms ease;
}
/* ============================================================
BASE — Reset, RTL, Typography
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
font-family: 'Heebo', sans-serif;
background: var(--color-bg-page, #f4f6fb);
color: var(--color-text-primary, #0f1220);
line-height: var(--line-height-normal, 1.6);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ============================================================
SHARED COMPONENTS — Polished
============================================================ */
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--radius-button);
font-family: var(--font-body);
font-size: var(--font-size-small, 13px);
font-weight: 500;
cursor: pointer;
transition: all var(--transition, 160ms ease);
border: 1px solid transparent;
white-space: nowrap;
letter-spacing: 0.01em;
outline: none;
}
.btn:focus-visible { box-shadow: var(--shadow-input-focus); }
.btn-primary {
background: var(--color-cta);
color: var(--color-cta-text);
border-color: var(--color-cta);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover {
background: var(--color-cta-hover);
border-color: var(--color-cta-hover);
box-shadow: 0 2px 8px var(--color-cta-shadow, rgba(35,86,232,0.22)), 0 1px 2px rgba(0,0,0,0.06);
transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
background: var(--color-surface);
color: var(--color-text-secondary);
border-color: var(--color-border-strong);
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.btn-secondary:hover {
background: var(--color-surface-sunken);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
.btn-ghost {
background: transparent;
color: var(--color-text-muted);
border-color: transparent;
}
.btn-ghost:hover {
background: var(--color-surface-sunken);
color: var(--color-text-secondary);
}
.btn-danger {
background: var(--color-status-sold-bg);
color: var(--color-status-sold-text);
border-color: var(--color-status-sold-border, rgba(192,32,32,0.18));
}
.btn-danger:hover { filter: brightness(0.94); }
.btn-sm { padding: 5px 11px; font-size: var(--font-size-xs, 11.5px); }
.btn-lg { padding: 11px 22px; font-size: 15px; font-weight: 600; }
.btn-wa {
background: #25d366;
color: #fff;
border-color: #25d366;
box-shadow: 0 1px 3px rgba(37,211,102,0.2);
}
.btn-wa:hover {
background: #1ebe5d;
box-shadow: 0 3px 12px rgba(37,211,102,0.35);
transform: translateY(-1px);
}
.btn-phone {
background: var(--color-surface);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
/* Status badges — polished */
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--radius-badge);
font-size: var(--font-size-xs, 11.5px);
font-weight: 600;
white-space: nowrap;
letter-spacing: 0.02em;
border: 1px solid transparent;
}
.badge::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.7;
flex-shrink: 0;
}
.badge-active {
background: var(--color-status-active-bg);
color: var(--color-status-active-text);
border-color: var(--color-status-active-border, transparent);
}
.badge-sold {
background: var(--color-status-sold-bg);
color: var(--color-status-sold-text);
border-color: var(--color-status-sold-border, transparent);
}
.badge-inactive {
background: var(--color-status-inactive-bg);
color: var(--color-status-inactive-text);
}
.badge-new {
background: var(--color-status-new-bg);
color: var(--color-status-new-text);
border-color: var(--color-status-new-border, transparent);
}
.badge-progress {
background: var(--color-status-progress-bg);
color: var(--color-status-progress-text);
}
.badge-closed {
background: var(--color-status-closed-bg, var(--color-status-inactive-bg));
color: var(--color-status-closed-text, var(--color-status-inactive-text));
}
/* Cards */
.card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
overflow: hidden;
transition: box-shadow var(--transition), border-color var(--transition);
}
.card:hover { box-shadow: var(--shadow-card-hover); }
/* Form elements */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label {
font-size: var(--font-size-xs, 11.5px);
font-weight: 600;
color: var(--color-text-secondary);
letter-spacing: 0.03em;
text-transform: uppercase;
}
.form-input, .form-select, .form-textarea {
height: 38px;
padding: 0 12px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-input);
background: var(--color-surface);
font-family: var(--font-body);
font-size: var(--font-size-body, 14.5px);
color: var(--color-text-primary);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
width: 100%;
}
.form-input:hover, .form-select:hover { border-color: var(--color-border-strong); }
.form-input:focus, .form-select:focus {
border-color: var(--color-border-focus);
box-shadow: var(--shadow-input-focus);
}
.form-input::placeholder { color: var(--color-text-muted); }
.form-textarea {
height: 80px;
padding: 10px 12px;
resize: vertical;
}
/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { position: sticky; top: 0; z-index: 1; }
.data-table th {
text-align: right;
padding: 10px 14px;
font-size: var(--font-size-xs, 11.5px);
font-weight: 700;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.data-table td {
padding: 12px 14px;
font-size: var(--font-size-small, 13px);
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border-subtle);
vertical-align: middle;
}
.data-table tbody tr {
transition: background var(--transition-fast);
}
.data-table tbody tr:hover td {
background: var(--color-surface-hover, var(--color-surface-sunken));
}
.data-table tr:last-child td { border-bottom: none; }
/* KPI Cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.kpi-card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
padding: var(--spacing-card-padding, 16px);
transition: box-shadow var(--transition), transform var(--transition);
cursor: default;
}
.kpi-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }
.kpi-label {
font-size: var(--font-size-xs, 11.5px);
color: var(--color-text-muted);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 8px;
}
.kpi-value {
font-size: 30px;
font-weight: 800;
color: var(--color-text-primary);
line-height: 1;
letter-spacing: -0.5px;
}
.kpi-sub {
font-size: var(--font-size-xs, 11.5px);
color: var(--color-text-muted);
margin-top: 5px;
}
.kpi-accent .kpi-value { color: var(--color-accent); }
/* Filter bar */
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filter-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
border-radius: var(--radius-badge);
font-size: var(--font-size-xs, 11.5px);
font-weight: 500;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--transition-fast);
}
.filter-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-chip.active {
background: var(--color-accent-muted);
border-color: var(--color-accent);
color: var(--color-accent);
}
.filter-chip .remove { font-size: 10px; opacity: 0.5; transition: opacity var(--transition-fast); }
.filter-chip:hover .remove { opacity: 1; }
/* Section headers */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.section-title { font-size: var(--font-size-section, 17px); font-weight: var(--font-weight-heading, 700); color: var(--color-text-primary); }
.section-sub { font-size: var(--font-size-small, 13px); color: var(--color-text-secondary); margin-top: 2px; }
.divider { height: 1px; background: var(--color-border); margin: 16px 0; }
/* Empty state */
.empty-state {
display: flex; flex-direction: column; align-items: center;
gap: 10px; padding: 56px 24px; text-align: center;
}
.empty-icon { font-size: 36px; opacity: 0.3; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--color-text-secondary); }
.empty-sub { font-size: var(--font-size-small, 13px); color: var(--color-text-muted); max-width: 280px; line-height: 1.6; }
/* Thumbnail */
.vehicle-thumb {
width: 52px; height: 38px;
border-radius: 6px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
display: flex; align-items: center; justify-content: center;
font-size: 18px; overflow: hidden; flex-shrink: 0;
}
/* ── YAD2 HEADER ────────────────────────────────────────── */
.yad2-header {
position: sticky; top: 0; z-index: 100;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sticky);
}
.yad2-header-top {
display: flex; align-items: center;
padding: 0 var(--spacing-page-x, 28px);
height: 58px; gap: 16px;
}
.yad2-logo {
font-size: 19px; font-weight: 800;
color: var(--color-text-primary);
letter-spacing: -0.5px; flex-shrink: 0;
}
.yad2-logo span { color: var(--color-accent); }
.header-search-wrap { flex: 1; max-width: 560px; }
.search-input-wrap { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; right: 12px; color: var(--color-text-muted); font-size: 14px; pointer-events: none; }
.search-input {
width: 100%; height: 38px;
padding: 0 40px 0 14px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-input);
background: var(--color-surface-sunken);
font-family: var(--font-body); font-size: var(--font-size-small, 13px);
color: var(--color-text-primary);
outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.search-input:hover { background: var(--color-surface); }
.search-input:focus {
border-color: var(--color-border-focus);
background: var(--color-surface);
box-shadow: var(--shadow-input-focus);
}
.search-input::placeholder { color: var(--color-text-muted); }
.header-nav { display: flex; gap: 2px; margin-right: auto; }
.header-nav-link {
padding: 6px 12px;
font-size: var(--font-size-small, 13px);
color: var(--color-text-secondary);
cursor: pointer; border-radius: 6px;
transition: all var(--transition-fast); font-weight: 500;
}
.header-nav-link:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }
.header-nav-link.active { color: var(--color-accent); }
/* Admin topbar */
.admin-topbar {
height: 58px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
display: flex; align-items: center;
padding: 0 var(--spacing-page-x, 24px); gap: 12px;
position: sticky; top: 0; z-index: 50;
box-shadow: var(--shadow-sticky);
}
.admin-topbar-title {
font-size: var(--font-size-section, 15px);
font-weight: var(--font-weight-heading, 600);
color: var(--color-text-primary);
}
.topbar-actions { margin-right: auto; display: flex; gap: 8px; }
/* Page content */
.page-body { padding: var(--spacing-section-y, 28px) var(--spacing-page-x, 24px); }
/* ── CATALOG ─────────────────────────────────────────────── */
.catalog-wrapper { min-height: 100vh; background: var(--color-bg-page); }
.catalog-toolbar {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 10px var(--spacing-page-x, 28px);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.results-count { font-size: var(--font-size-small, 13px); color: var(--color-text-secondary); white-space: nowrap; }
.results-count strong { color: var(--color-text-primary); font-weight: 700; }
.toolbar-right { margin-right: auto; display: flex; gap: 8px; align-items: center; }
.view-toggle { display: flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-button); overflow: hidden; }
.view-btn {
width: 34px; height: 32px; background: none; border: none;
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 14px; color: var(--color-text-muted);
transition: all var(--transition-fast);
}
.view-btn:hover { background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.view-btn.active { background: var(--color-accent-muted); color: var(--color-accent); }
.catalog-body { display: flex; padding: 20px var(--spacing-page-x, 28px); gap: 20px; max-width: 1320px; margin: 0 auto; }
/* Filter sidebar */
.filter-sidebar { width: 224px; min-width: 224px; flex-shrink: 0; }
.filter-panel-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: clip;
position: sticky; top: 78px;
}
.filter-panel-header {
padding: 12px 16px;
display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--color-border);
background: var(--color-surface-sunken);
}
.filter-panel-title { font-size: var(--font-size-small, 13px); font-weight: 700; color: var(--color-text-primary); }
.filter-clear-btn {
font-size: 12px; color: var(--color-accent);
cursor: pointer; background: none; border: none;
font-family: var(--font-body); font-weight: 500;
transition: opacity var(--transition-fast);
}
.filter-clear-btn:hover { opacity: 0.7; }
.filter-section { padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); position: relative; }
.filter-section-title {
font-size: 10.5px; font-weight: 700;
color: var(--color-text-muted); text-transform: uppercase;
letter-spacing: 0.06em; margin-bottom: 8px;
}
.filter-select {
width: 100%; max-width: 100%; height: 34px; padding: 0 10px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
font-size: var(--font-size-small, 13px);
color: var(--color-text-primary);
background: var(--color-surface); font-family: var(--font-body);
outline: none; cursor: pointer;
transition: border-color var(--transition-fast);
}
.filter-select:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-input-focus); }
.filter-range-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 4px; }
.filter-range-input {
height: 32px; padding: 0 8px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
font-size: 12.5px; color: var(--color-text-primary);
background: var(--color-surface); font-family: var(--font-body);
outline: none; width: 100%;
transition: border-color var(--transition-fast);
}
.filter-range-input:focus { border-color: var(--color-border-focus); }
.filter-checkbox-item { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.filter-checkbox-item input { cursor: pointer; accent-color: var(--color-accent); }
.filter-checkbox-item label { font-size: var(--font-size-small, 13px); color: var(--color-text-primary); cursor: pointer; }
/* Catalog results */
.catalog-results { flex: 1; min-width: 0; }
.vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: var(--spacing-row-gap, 14px); }
/* ── MOBILE FILTER TOGGLE ────────────────────────────────── */
.y2-filter-toggle {
display: none;
align-items: center; gap: 8px;
width: 100%; padding: 10px 16px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-button);
font-size: 14px; font-weight: 600;
color: var(--color-text-primary);
font-family: var(--font-body);
cursor: pointer;
transition: background var(--transition-fast);
}
.y2-filter-toggle:hover { background: var(--color-surface-hover, var(--color-surface-sunken)); }
.y2-filter-toggle-arrow { font-size: 11px; margin-right: auto; transition: transform 220ms ease; }
.y2-filter-toggle.y2-open .y2-filter-toggle-arrow { transform: rotate(180deg); }
@media (max-width: 768px) {
.y2-filter-toggle { display: flex; }
.catalog-body { flex-direction: column; padding: 12px 14px; gap: 0; }
.filter-sidebar { display: none; width: 100%; min-width: unset; margin-bottom: 12px; }
.filter-sidebar.y2-open { display: block; }
.filter-panel-card { position: static; }
.catalog-toolbar { padding: 10px 14px; }
.vehicles-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
/* View variants — toggled by class on #vehiclesGrid, not inline styles */
.vehicles-grid.view-list {
grid-template-columns: 1fr;
gap: 8px;
}
.vehicles-grid.view-list .vehicle-card {
flex-direction: row;
}
.vehicles-grid.view-list .vehicle-card-img {
width: 140px;
min-width: 140px;
height: 100%;
min-height: 100px;
flex-shrink: 0;
}
.vehicles-grid.view-list .vehicle-card-body {
padding: 14px;
}
.vehicles-grid.view-list .vehicle-card-specs {
margin-bottom: 8px;
}
/* Vehicle card — polished */
.vehicle-card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
overflow: hidden; cursor: pointer;
transition: box-shadow var(--transition-slow), border-color var(--transition), transform var(--transition-slow);
display: flex; flex-direction: column;
}
.vehicle-card:hover {
box-shadow: var(--shadow-card-hover);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.vehicle-card-img {
width: 100%; height: 152px;
background: linear-gradient(145deg, var(--color-surface-sunken) 0%, var(--color-border) 100%);
position: relative; display: flex; align-items: center; justify-content: center;
font-size: 44px; overflow: hidden;
transition: opacity var(--transition);
}
.vehicle-card-badge { position: absolute; top: 8px; right: 8px; }
.vehicle-card-body { padding: var(--spacing-card-padding, 18px); flex: 1; display: flex; flex-direction: column; }
.vehicle-card-title { font-size: 15px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 2px; letter-spacing: -0.1px; }
.vehicle-card-sub { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-muted); margin-bottom: 12px; }
.ad-number-tag { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); margin-bottom: 4px; letter-spacing: 0.02em; }
.vehicle-card-specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.spec-chip {
display: flex; align-items: center; gap: 3px;
font-size: 11.5px; color: var(--color-text-secondary);
background: var(--color-surface-sunken);
padding: 3px 8px; border-radius: 5px;
border: 1px solid var(--color-border-subtle);
}
.vehicle-card-footer {
margin-top: auto; display: flex;
justify-content: space-between; align-items: center;
padding-top: 12px;
border-top: 1px solid var(--color-border-subtle);
}
.vehicle-price { font-size: 18px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.3px; }
.vehicle-price-sub { font-size: 10.5px; color: var(--color-text-muted); margin-top: 1px; }
.card-cta-row { display: flex; gap: 6px; }
.card-wa-btn {
width: 34px; height: 34px;
background: #25d366; color: #fff;
border: none; border-radius: var(--radius-button);
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 16px; transition: all var(--transition);
box-shadow: 0 1px 3px rgba(37,211,102,0.2);
}
.card-wa-btn:hover { background: #1ebe5d; transform: scale(1.08); box-shadow: 0 3px 10px rgba(37,211,102,0.35); }
.card-view-btn {
height: 34px; padding: 0 13px;
background: var(--color-accent-muted);
color: var(--color-accent);
border: 1px solid var(--color-accent);
border-radius: var(--radius-button);
cursor: pointer; font-size: 12.5px; font-weight: 600;
font-family: var(--font-body); transition: all var(--transition);
}
.card-view-btn:hover { background: var(--color-accent); color: var(--color-cta-text); }
/* Sold overlay */
.sold-overlay {
position: absolute; inset: 0;
background: rgba(0,0,0,0.48);
display: flex; align-items: center; justify-content: center;
}
.sold-stamp {
background: var(--color-status-sold-text);
color: #fff; font-size: 12px; font-weight: 800;
padding: 5px 14px; border-radius: 3px;
letter-spacing: 1.5px; text-transform: uppercase;
}
/* ── YAD2 VEHICLE PAGE ───────────────────────────────────── */
.vehicle-page { background: var(--color-bg-page); min-height: 100vh; }
.breadcrumb {
display: flex; align-items: center; gap: 6px;
padding: 10px var(--spacing-page-x, 28px);
font-size: var(--font-size-xs, 11.5px); color: var(--color-text-muted);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.breadcrumb span { cursor: pointer; transition: color var(--transition-fast); }
.breadcrumb span:hover { color: var(--color-accent); }
.breadcrumb-sep { opacity: 0.35; }
.vehicle-page-inner { max-width: 1100px; margin: 0 auto; padding: 24px var(--spacing-page-x, 28px); }
.vehicle-page-header { margin-bottom: 22px; }
.vehicle-page-title { font-size: 26px; font-weight: 800; color: var(--color-text-primary); line-height: 1.2; letter-spacing: -0.4px; }
.vehicle-page-sub { font-size: var(--font-size-small, 13px); color: var(--color-text-secondary); margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vehicle-page-grid { display: grid; grid-template-columns: 1fr 330px; gap: 24px; }
/* Gallery */
.gallery-wrap { background: var(--color-surface); border-radius: var(--radius-card); border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-card); }
.gallery-main {
width: 100%; height: 340px;
background: linear-gradient(145deg, var(--color-surface-sunken) 0%, var(--color-border) 100%);
display: flex; align-items: center; justify-content: center;
font-size: 72px; position: relative; overflow: hidden;
}
.gallery-thumbs { display: flex; gap: 6px; padding: 10px; overflow-x: auto; background: var(--color-surface-sunken); border-top: 1px solid var(--color-border); }
.gallery-thumb {
width: 72px; height: 52px; border-radius: 6px;
background: var(--color-border); flex-shrink: 0; cursor: pointer;
border: 2px solid transparent; transition: all var(--transition-fast);
display: flex; align-items: center; justify-content: center; font-size: 22px;
opacity: 0.6;
}
.gallery-thumb:hover { opacity: 1; border-color: var(--color-accent); }
.gallery-thumb.active { border-color: var(--color-accent); opacity: 1; }
/* Quick specs */
.quick-specs {
display: grid; grid-template-columns: repeat(3, 1fr);
margin-top: 14px;
border-radius: var(--radius-card);
overflow: hidden;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
}
.spec-item {
background: var(--color-surface);
padding: 12px 14px;
display: flex; flex-direction: column; gap: 3px;
border-left: 1px solid var(--color-border);
transition: background var(--transition-fast);
}
.spec-item:last-child { border-left: none; }
.spec-item:hover { background: var(--color-surface-hover, var(--color-surface-sunken)); }
.spec-item-label { font-size: 10.5px; color: var(--color-text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.spec-item-value { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
/* Vehicle sidebar */
.vehicle-sidebar-card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-raised);
overflow: hidden; position: sticky; top: 78px;
}
.price-block { padding: 22px; border-bottom: 1px solid var(--color-border); }
.price-main { font-size: 34px; font-weight: 900; color: var(--color-text-primary); line-height: 1; letter-spacing: -1px; }
.price-note { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-muted); margin-top: 6px; }
.cta-block { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cta-block .btn { width: 100%; justify-content: center; font-size: 15px; padding: 12px 16px; }
.lead-form { padding: 16px; border-top: 1px solid var(--color-border); }
.lead-form-title { font-size: var(--font-size-xs, 11.5px); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 12px; }
.lead-form-grid { display: flex; flex-direction: column; gap: 8px; }
/* Full spec table */
.full-specs-card { margin-top: 16px; background: var(--color-surface); border-radius: var(--radius-card); border: 1px solid var(--color-border); overflow: hidden; box-shadow: var(--shadow-card); }
.full-specs-header { padding: 14px 16px; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-small, 13px); font-weight: 700; color: var(--color-text-primary); background: var(--color-surface-sunken); }
.specs-grid { display: grid; grid-template-columns: 1fr 1fr; }
.spec-row {
display: flex; justify-content: space-between; align-items: center;
padding: 9px 16px; border-bottom: 1px solid var(--color-border-subtle); gap: 12px;
transition: background var(--transition-fast);
}
.spec-row:nth-child(odd) { background: var(--color-surface-sunken); }
.spec-row:hover { background: var(--color-surface-hover, var(--color-accent-muted)); }
.spec-row-label { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-muted); font-weight: 500; }
.spec-row-value { font-size: var(--font-size-small, 13px); font-weight: 600; color: var(--color-text-primary); }
/* PDP — mobile responsive (yad1 + yad2 vehicle-page) */
@media (max-width: 900px) {
.vehicle-page-grid { grid-template-columns: 1fr; gap: 16px; }
.vehicle-page-inner { padding: 16px; }
.vehicle-page-title { font-size: 22px; }
.vehicle-sidebar-card { position: static; top: auto; }
.gallery-main { height: 240px; }
.specs-grid { grid-template-columns: 1fr; }
.sticky-cta { bottom: 0; }
}
/* Notes */
.notes-card { margin-top: 16px; background: var(--color-surface); border-radius: var(--radius-card); border: 1px solid var(--color-border); padding: 16px; box-shadow: var(--shadow-card); }
.notes-text { font-size: var(--font-size-small, 13px); color: var(--color-text-secondary); line-height: var(--line-height-loose, 1.75); }
/* Sticky CTA bar */
.sticky-cta {
position: fixed; bottom: 50px; left: 0; right: 0;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: 0 -4px 16px rgba(15,18,32,0.10);
padding: 10px 20px; display: flex; gap: 10px; z-index: 50;
}
.sticky-cta .btn { flex: 1; justify-content: center; }
/* ── ADMIN SCREENS ────────────────────────────────────────── */
/* Dashboard */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.shortcut-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px 0; }
.shortcut-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 16px; cursor: pointer;
transition: all var(--transition);
text-align: center;
}
.shortcut-card:hover {
border-color: var(--color-accent);
background: var(--color-accent-muted);
transform: translateY(-2px);
box-shadow: var(--shadow-card-hover);
}
.shortcut-icon { font-size: 22px; margin-bottom: 7px; }
.shortcut-label { font-size: var(--font-size-xs, 11.5px); font-weight: 600; color: var(--color-text-secondary); }
.mini-lead-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border-subtle); transition: background var(--transition-fast); }
.mini-lead-row:last-child { border-bottom: none; }
.mini-lead-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: var(--color-accent-subtle, var(--color-accent-muted));
color: var(--color-accent); font-size: 12px; font-weight: 700;
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mini-lead-name { font-size: var(--font-size-small, 13px); font-weight: 600; color: var(--color-text-primary); }
.mini-lead-vehicle { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-muted); }
.mini-lead-time { font-size: 11px; color: var(--color-text-muted); margin-right: auto; }
.activity-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--font-size-small, 13px); color: var(--color-text-secondary); }
.activity-item:last-child { border-bottom: none; }
.activity-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent); margin-top: 4px; flex-shrink: 0; }
.activity-time { font-size: 11px; color: var(--color-text-muted); margin-right: auto; white-space: nowrap; }
/* Admin table toolbar */
.admin-table-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-search { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.admin-search input {
width: 100%; height: 36px;
padding: 0 36px 0 12px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-input);
background: var(--color-surface);
font-size: var(--font-size-small, 13px); font-family: var(--font-body);
color: var(--color-text-primary); outline: none;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.admin-search input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-input-focus); }
.admin-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-text-muted); font-size: 14px; pointer-events: none; }
/* Inline edit */
.inline-edit-row { display: flex; gap: 6px; align-items: center; }
.inline-edit-input {
width: 90px; height: 30px; padding: 0 8px;
border: 1.5px solid var(--color-accent);
border-radius: 5px; font-size: 12.5px;
font-family: var(--font-body);
background: var(--color-accent-muted); outline: none;
box-shadow: var(--shadow-input-focus);
}
.action-row { display: flex; gap: 4px; }
/* Leads */
.lead-row-expanded {
background: var(--color-surface-sunken);
padding: 12px 16px;
border-top: 1px solid var(--color-border-subtle);
}
.lead-message-box {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px; padding: 10px 12px;
font-size: var(--font-size-small, 13px); color: var(--color-text-secondary);
line-height: 1.6; margin-bottom: 10px;
}
.note-add-row { display: flex; gap: 8px; margin-top: 8px; }
.note-input {
flex: 1; height: 34px; padding: 0 10px;
border: 1.5px solid var(--color-border-strong);
border-radius: 6px; font-size: var(--font-size-small, 13px);
font-family: var(--font-body); background: var(--color-surface); outline: none;
transition: border-color var(--transition-fast);
}
.note-input:focus { border-color: var(--color-border-focus); box-shadow: var(--shadow-input-focus); }
.source-icon {
width: 26px; height: 26px; border-radius: 6px;
display: flex; align-items: center; justify-content: center; font-size: 13px;
}
.source-form { background: var(--color-status-new-bg); }
.source-wa { background: #dcfce7; }
.source-phone { background: var(--color-surface-sunken); }
.status-select {
height: 28px; padding: 0 8px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-badge);
font-size: var(--font-size-xs, 11.5px); font-family: var(--font-body);
background: var(--color-surface); cursor: pointer; outline: none;
color: var(--color-text-primary);
transition: border-color var(--transition-fast);
}
.status-select:focus { border-color: var(--color-border-focus); }
/* Import wizard */
.import-wizard { max-width: 820px; }
.step-indicator {
display: flex; margin-bottom: 28px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card); overflow: hidden;
box-shadow: var(--shadow-card);
}
.step-item {
flex: 1; padding: 13px 8px; text-align: center;
cursor: pointer; transition: all var(--transition-fast);
border-right: 1px solid var(--color-border);
}
.step-item:first-child { border-right: none; }
.step-num {
width: 22px; height: 22px; border-radius: 50%;
background: var(--color-border);
color: var(--color-text-muted);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 4px; transition: all var(--transition);
}
.step-name { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-muted); font-weight: 500; }
.step-item.active { background: var(--color-accent-muted); }
.step-item.active .step-num { background: var(--color-accent); color: #fff; box-shadow: 0 2px 8px var(--color-cta-shadow); }
.step-item.active .step-name { color: var(--color-accent); font-weight: 700; }
.step-item.done .step-num { background: var(--color-status-active-text); color: #fff; }
.step-item.done .step-name { color: var(--color-status-active-text); }
.upload-zone {
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-card); padding: 52px;
text-align: center; cursor: pointer;
transition: all var(--transition);
background: var(--color-surface-sunken);
}
.upload-zone:hover { border-color: var(--color-accent); background: var(--color-accent-muted); }
.upload-icon { font-size: 40px; margin-bottom: 14px; opacity: 0.4; }
.upload-title { font-size: 16px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 6px; }
.upload-sub { font-size: var(--font-size-small, 13px); color: var(--color-text-muted); }
.upload-file-types { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.file-type-badge {
padding: 3px 10px; border-radius: 5px;
background: var(--color-surface); border: 1px solid var(--color-border);
font-size: 12px; color: var(--color-text-secondary); font-weight: 600;
}
.mapping-table { width: 100%; border-collapse: collapse; }
.mapping-table th, .mapping-table td { padding: 10px 12px; font-size: var(--font-size-small, 13px); border-bottom: 1px solid var(--color-border-subtle); text-align: right; }
.mapping-table th {
font-size: var(--font-size-xs, 11.5px); font-weight: 700;
color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em;
background: var(--color-surface-sunken);
}
.mapping-select {
width: 100%; height: 32px; padding: 0 8px;
border: 1px solid var(--color-border-strong); border-radius: 5px;
font-size: var(--font-size-small, 13px); font-family: var(--font-body);
background: var(--color-surface); cursor: pointer; outline: none;
}
.diff-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.diff-card {
background: var(--color-surface); border-radius: var(--radius-card);
border: 1px solid var(--color-border); padding: 16px; text-align: center;
box-shadow: var(--shadow-card);
}
.diff-card-num { font-size: 28px; font-weight: 900; margin-bottom: 4px; letter-spacing: -0.5px; }
.diff-card-label { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-secondary); font-weight: 500; }
.diff-create .diff-card-num { color: var(--color-status-active-text); }
.diff-update .diff-card-num { color: var(--color-accent); }
.diff-deactivate .diff-card-num { color: var(--color-status-progress-text); }
.diff-error .diff-card-num { color: var(--color-status-sold-text); }
.import-options-card {
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-card); padding: 22px; box-shadow: var(--shadow-card);
}
.import-option-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-subtle); }
.import-option-item:last-child { border-bottom: none; }
.import-option-item input { width: 16px; height: 16px; accent-color: var(--color-accent); margin-top: 2px; cursor: pointer; }
.import-option-text .opt-title { font-size: var(--font-size-body, 14.5px); font-weight: 500; color: var(--color-text-primary); }
.import-option-text .opt-desc { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-muted); margin-top: 2px; }
.import-result-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
.result-item { background: var(--color-surface); border-radius: var(--radius-card); border: 1px solid var(--color-border); padding: 18px; text-align: center; box-shadow: var(--shadow-card); }
.result-num { font-size: 30px; font-weight: 900; letter-spacing: -0.5px; }
.result-label { font-size: var(--font-size-xs, 11.5px); color: var(--color-text-secondary); margin-top: 4px; }
.import-history-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); font-size: var(--font-size-small, 13px); transition: background var(--transition-fast); }
.import-history-row:last-child { border-bottom: none; }
.import-history-row:hover { background: var(--color-surface-hover, var(--color-surface-sunken)); }
.import-history-file { font-weight: 600; color: var(--color-text-primary); flex: 1; }
.import-history-stats { display: flex; gap: 14px; color: var(--color-text-secondary); font-size: var(--font-size-xs, 11.5px); }
.import-history-stats span span { font-weight: 700; color: var(--color-text-primary); }
/* Domain containers */
/* public-domain: flex column, no height/overflow constraint —
scroll containment is handled by .screen.active inside it.
overflow:hidden here breaks position:sticky on .yad2-header
and misaligns click regions in Chrome/Safari. */
.public-domain {
display: flex;
flex: 1;
min-width: 0;
flex-direction: column;
}
/* admin-domain: row layout (sidebar + screens), keeps 100vh + overflow:hidden
because its scroll happens inside .main-content, not the domain itself. */
.admin-domain {
display: flex;
flex: 1;
min-width: 0;
height: 100vh;
overflow: hidden;
flex-direction: row;
}
/* admin-screens-wrapper takes remaining space after sidebar */
.admin-screens-wrapper {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
position: relative;
}
/* Navigation tabs (demo) */
.demo-nav {
position: fixed;
bottom: 0; left: 0; right: 0;
background: #1d2939;
display: flex;
z-index: 1000;
border-top: 1px solid #344054;
overflow-x: auto;
}
.demo-nav button {
flex: 1;
min-width: 100px;
padding: 10px 8px;
background: none;
border: none;
color: #98a2b3;
font-family: 'Heebo', sans-serif;
font-size: 11px;
cursor: pointer;
transition: all 150ms;
white-space: nowrap;
border-top: 2px solid transparent;
}
.demo-nav button.active {
color: #60a5fa;
border-top-color: #60a5fa;
background: rgba(96,165,250,0.08);
}
.demo-nav button:hover { color: #e2e8f0; }
/* Admin sidebar — tokens resolve from parent data-theme="admin" */
.admin-sidebar {
width: 220px;
min-width: 220px;
background: #1d2939; /* intentional dark fixed — sidebar is always dark regardless of theme */
display: flex;
flex-direction: column;
height: 100vh;
overflow-y: auto;
flex-shrink: 0;
}
.sidebar-logo {
padding: 20px 20px 16px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-logo .logo-text {
font-size: 22px;
font-weight: 800;
color: #fff;
letter-spacing: -0.5px;
}
.sidebar-logo .logo-sub {
font-size: 11px;
color: rgba(255,255,255,0.35);
margin-top: 2px;
}
.sidebar-nav { flex: 1; padding: 12px 0; }
.sidebar-section {
padding: 4px 12px 2px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
color: rgba(255,255,255,0.28);
margin-top: 8px;
}
.sidebar-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
color: rgba(255,255,255,0.5);
font-size: 13.5px;
cursor: pointer;
transition: all 150ms;
border-radius: 0;
position: relative;
}
.sidebar-item:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.05); }
.sidebar-item.active {
color: #fff;
background: rgba(96,165,250,0.12);
border-right: 3px solid #60a5fa;
}
.sidebar-item .icon { width: 16px; font-size: 14px; flex-shrink: 0; }
.sidebar-badge {
margin-right: auto;
background: #ef4444;
color: #fff;
font-size: 10px;
font-weight: 700;
padding: 1px 6px;
border-radius: 10px;
min-width: 18px;
text-align: center;
}
.sidebar-user {
padding: 12px 16px;
border-top: 1px solid rgba(255,255,255,0.08);
display: flex;
align-items: center;
gap: 10px;
}
.sidebar-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: #2563eb;
color: #fff;
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-user-info .name { font-size: 13px; color: rgba(255,255,255,0.85); font-weight: 500; }
.sidebar-user-info .role { font-size: 11px; color: rgba(255,255,255,0.3); }
/* Main content area */
.main-content {
flex: 1;
overflow-y: auto;
padding-bottom: 60px;
}
/* Public wrapper */
.public-wrapper { min-height: 100vh; }
/* Header — Yad2 public */
.yad2-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-sticky);
}
.yad2-header-top {
display: flex;
align-items: center;
padding: 0 var(--spacing-page-x);
height: 56px;
gap: 16px;
}
.yad2-logo {
font-size: 20px;
font-weight: 800;
color: var(--color-text-primary);
letter-spacing: -0.5px;
flex-shrink: 0;
}
/* Yad2 branded logo */
.yad2-logo-wrap {
display: flex; align-items: center; flex-shrink: 0; cursor: pointer;
}
.y2-logo-img {
height: 96px;
width: auto;
display: block;
transition: opacity 180ms ease;
}
.yad2-logo-wrap:hover .y2-logo-img { opacity: 0.82; }
/* ── YAD2 LIGHT SOCIAL ICONS (scoped — does not affect Home or Yad1) ── */
.y2-social-row { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.y2-social-icon {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: #fff;
border: 1px solid #E5E7EB;
box-shadow: 0 1px 3px rgba(0,0,0,0.07);
cursor: pointer; text-decoration: none; flex-shrink: 0;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.y2-social-icon svg { width: 18px; height: 18px; display: block; fill: currentColor; }
.y2-social-icon:hover { transform: scale(1.05); box-shadow: 0 3px 8px rgba(0,0,0,0.13); }
/* WhatsApp — dominant: filled green circle */
.y2-social-wa {
width: 40px; height: 40px;
background: #25D366; border-color: #25D366; color: #fff;
box-shadow: 0 2px 6px rgba(37,211,102,0.28);
}
.y2-social-wa svg { width: 20px; height: 20px; fill: #fff; }
.y2-social-wa:hover { box-shadow: 0 4px 12px rgba(37,211,102,0.40); border-color: #1ebe5d; }
/* Waze */
.y2-social-waze { color: #33CCFF; }
.y2-social-waze svg { fill: #33CCFF; }
.y2-social-waze:hover { border-color: #33CCFF; }
/* TikTok */
.y2-social-tiktok { color: #111; }
.y2-social-tiktok svg { fill: #111; }
.y2-social-tiktok:hover { border-color: #bbb; }
/* Instagram */
.y2-social-instagram { color: #C13584; }
.y2-social-instagram svg { fill: #C13584; }
.y2-social-instagram:hover { border-color: #C13584; }
/* Facebook */
.y2-social-facebook { color: #1877F2; }
.y2-social-facebook svg { fill: #1877F2; }
.y2-social-facebook:hover { border-color: #1877F2; }
.yad2-logo-sub {
font-size: 10px;
color: var(--color-text-muted);
font-weight: 400;
margin-top: -2px;
}
.header-search-wrap { flex: 1; max-width: 580px; }
.search-input-wrap {
position: relative;
display: flex;
align-items: center;
}
.search-icon {
position: absolute;
right: 12px;
color: var(--color-text-muted);
font-size: 15px;
pointer-events: none;
}
.search-input {
width: 100%;
height: 38px;
padding: 0 40px 0 12px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-input);
background: var(--color-surface-sunken);
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-primary);
outline: none;
transition: border-color var(--transition);
}
.search-input:focus { border-color: var(--color-accent); background: var(--color-surface); }
.search-input::placeholder { color: var(--color-text-muted); }
.header-nav { display: flex; gap: 4px; margin-right: auto; }
.header-nav-link {
padding: 6px 12px;
font-size: 13.5px;
color: var(--color-text-secondary);
cursor: pointer;
border-radius: 6px;
transition: all var(--transition);
font-weight: 500;
}
.header-nav-link:hover { color: var(--color-text-primary); background: var(--color-surface-sunken); }
.header-nav-link.active { color: var(--color-accent); }
/* Admin top bar */
.admin-topbar {
height: 56px;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: center;
padding: 0 24px;
gap: 12px;
position: sticky;
top: 0;
z-index: 50;
}
.admin-topbar-title {
font-size: 16px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
.topbar-actions { margin-right: auto; display: flex; gap: 8px; }
/* Page content */
.page-body { padding: var(--spacing-section-y) var(--spacing-page-x); }
/* ============================================================
SHARED COMPONENTS
============================================================ */
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--radius-button);
font-family: var(--font-body);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all var(--transition);
border: 1px solid transparent;
white-space: nowrap;
}
.btn-primary {
background: var(--color-cta);
color: var(--color-cta-text);
border-color: var(--color-cta);
}
.btn-primary:hover { background: var(--color-cta-hover); border-color: var(--color-cta-hover); }
.btn-secondary {
background: var(--color-surface);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-surface-sunken); }
.btn-ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: transparent;
}
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-wa {
background: #25d366;
color: #fff;
border-color: #25d366;
}
.btn-wa:hover { background: #1ebe5d; }
.btn-phone {
background: var(--color-surface);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
/* Status badges */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 10px;
border-radius: var(--radius-badge);
font-size: 12px;
font-weight: 500;
white-space: nowrap;
}
.badge::before {
content: '';
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
display: inline-block;
}
.badge-active { background: var(--color-status-active-bg); color: var(--color-status-active-text); }
.badge-sold { background: var(--color-status-sold-bg); color: var(--color-status-sold-text); }
.badge-inactive { background: var(--color-status-inactive-bg); color: var(--color-status-inactive-text); }
.badge-new { background: var(--color-status-new-bg); color: var(--color-status-new-text); }
.badge-progress { background: var(--color-status-progress-bg); color: var(--color-status-progress-text); }
.badge-closed { background: var(--color-status-inactive-bg); color: var(--color-status-inactive-text); }
/* Cards */
.card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* Form elements */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label {
font-size: 13px;
font-weight: 500;
color: var(--color-text-secondary);
}
.form-input, .form-select, .form-textarea {
height: 38px;
padding: 0 12px;
border: 1.5px solid var(--color-border-strong);
border-radius: var(--radius-input);
background: var(--color-surface);
font-family: var(--font-body);
font-size: 14px;
color: var(--color-text-primary);
outline: none;
transition: border-color var(--transition);
width: 100%;
}
.form-input:focus, .form-select:focus { border-color: var(--color-accent); }
.form-textarea { height: 80px; padding: 8px 12px; resize: vertical; }
/* Tables */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
text-align: right;
padding: 10px 14px;
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.4px;
background: var(--color-surface-sunken);
border-bottom: 1px solid var(--color-border);
white-space: nowrap;
}
.data-table td {
padding: 12px 14px;
font-size: 13.5px;
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-border-subtle);
vertical-align: middle;
}
.data-table tr:hover td { background: var(--color-surface-sunken); }
.data-table tr:last-child td { border-bottom: none; }
/* KPI Cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.kpi-card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
padding: 16px;
}
.kpi-label {
font-size: 12px;
color: var(--color-text-secondary);
font-weight: 500;
margin-bottom: 6px;
}
.kpi-value {
font-size: 28px;
font-weight: 700;
color: var(--color-text-primary);
line-height: 1.1;
}
.kpi-sub {
font-size: 12px;
color: var(--color-text-muted);
margin-top: 4px;
}
.kpi-accent .kpi-value { color: var(--color-accent); }
/* Filter bar */
.filter-bar {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-radius: 20px;
font-size: 12.5px;
font-weight: 500;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--transition);
}
.filter-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-chip.active {
background: var(--color-accent-muted);
border-color: var(--color-accent);
color: var(--color-accent);
}
.filter-chip .remove {
font-size: 10px;
opacity: 0.6;
cursor: pointer;
}
/* Section headers */
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
gap: 12px;
}
.section-title {
font-size: 17px;
font-weight: var(--font-weight-heading);
color: var(--color-text-primary);
}
.section-sub {
font-size: 13px;
color: var(--color-text-secondary);
margin-top: 2px;
}
/* Divider */
.divider { height: 1px; background: var(--color-border); margin: 16px 0; }
/* Empty state */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 48px 24px;
text-align: center;
color: var(--color-text-muted);
}
.empty-icon { font-size: 36px; opacity: 0.4; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--color-text-secondary); }
.empty-sub { font-size: 13px; }
/* Thumbnail */
.vehicle-thumb {
width: 52px;
height: 38px;
border-radius: 5px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
overflow: hidden;
flex-shrink: 0;
}
.vehicle-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Tooltip-like label */
.field-label {
font-size: 11.5px;
color: var(--color-text-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.4px;
}
/* ============================================================
SCREEN: YAD2 CATALOG
============================================================ */
.catalog-wrapper { min-height: 100vh; background: var(--color-bg-page); }
.catalog-toolbar {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
padding: 10px var(--spacing-page-x);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.results-count {
font-size: 13px;
color: var(--color-text-secondary);
white-space: nowrap;
}
.results-count strong { color: var(--color-text-primary); }
.toolbar-right { margin-right: auto; display: flex; gap: 8px; align-items: center; }
.view-toggle {
display: flex;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-button);
overflow: hidden;
}
.view-btn {
width: 34px; height: 32px;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--color-text-muted);
transition: all var(--transition);
}
.view-btn.active { background: var(--color-accent-muted); color: var(--color-accent); }
.catalog-body {
display: flex;
padding: 20px var(--spacing-page-x);
gap: 20px;
max-width: 1280px;
margin: 0 auto;
}
.filter-sidebar {
width: 228px;
min-width: 228px;
flex-shrink: 0;
}
.filter-panel-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
box-shadow: var(--shadow-card);
overflow: clip;
}
.filter-panel-header {
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border);
}
.filter-panel-title { font-size: 14px; font-weight: 600; color: var(--color-text-primary); }
.filter-clear-btn {
font-size: 12px;
color: var(--color-accent);
cursor: pointer;
background: none;
border: none;
font-family: var(--font-body);
}
.filter-section { padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); position: relative; }
.filter-section-title {
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.4px;
margin-bottom: 8px;
}
.filter-select {
width: 100%;
height: 34px;
padding: 0 8px;
border: 1px solid var(--color-border-strong);
border-radius: 6px;
font-size: 13px;
color: var(--color-text-primary);
background: var(--color-surface);
font-family: var(--font-body);
outline: none;
cursor: pointer;
}
.filter-range-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin-top: 4px;
}
.filter-range-input {
height: 32px;
padding: 0 8px;
border: 1px solid var(--color-border-strong);
border-radius: 6px;
font-size: 12.5px;
color: var(--color-text-primary);
background: var(--color-surface);
font-family: var(--font-body);
outline: none;
width: 100%;
}
.filter-checkbox-item {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
cursor: pointer;
}
.filter-checkbox-item input { cursor: pointer; accent-color: var(--color-accent); }
.filter-checkbox-item label { font-size: 13px; color: var(--color-text-primary); cursor: pointer; }
/* Catalog grid */
.catalog-results { flex: 1; min-width: 0; }
.vehicles-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.vehicle-card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
overflow: hidden;
cursor: pointer;
transition: all var(--transition);
display: flex;
flex-direction: column;
}
.vehicle-card:hover {
box-shadow: var(--shadow-raised);
border-color: var(--color-accent);
transform: translateY(-2px);
}
.vehicle-card-img {
width: 100%;
height: 170px;
background: linear-gradient(135deg, #e4e7ec 0%, #d0d5dd 100%);
position: relative;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
overflow: hidden;
}
.vehicle-card-badge {
position: absolute;
top: 8px;
right: 8px;
}
.vehicle-card-badge .badge { font-weight: 700; font-size: 11.5px; letter-spacing: 0.2px; }
.vehicle-card-badge .badge-active { background: #d1fae5; color: #065f46; }
.vehicle-card-badge .badge-sold { background: #fee2e2; color: #b91c1c; }
.vehicle-card-body { padding: 14px 14px 12px; flex: 1; display: flex; flex-direction: column; gap: 0; }
.vehicle-card-title {
font-size: 13.5px;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.vehicle-card-sub {
font-size: 11.5px;
color: var(--color-text-secondary);
opacity: 0.7;
margin-bottom: 10px;
}
.vehicle-card-specs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.spec-chip {
display: flex;
align-items: center;
gap: 3px;
font-size: 12px;
color: var(--color-text-secondary);
background: var(--color-surface-sunken);
padding: 4px 10px;
border-radius: 20px;
border: 1px solid var(--color-border-subtle);
white-space: nowrap;
}
.vehicle-card-footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--color-border-subtle);
}
.vehicle-price {
font-size: 22px;
font-weight: 800;
color: #111;
letter-spacing: -0.5px;
line-height: 1.1;
}
.vehicle-price-sub { font-size: 11px; color: var(--color-text-muted); margin-top: 1px; }
.card-cta-row { display: flex; gap: 6px; align-items: center; }
.card-wa-btn {
width: 38px; height: 38px;
background: #25d366;
color: #fff;
border: none;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
transition: all var(--transition);
box-shadow: 0 2px 6px rgba(37,211,102,0.30);
}
.card-wa-btn:hover { background: #1ebe5d; transform: scale(1.07); box-shadow: 0 4px 12px rgba(37,211,102,0.40); }
.card-view-btn {
height: 38px;
padding: 0 13px;
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-strong);
border-radius: 8px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
font-family: var(--font-body);
transition: all var(--transition);
}
.card-view-btn:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
/* Sold overlay */
.sold-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
display: flex;
align-items: center;
justify-content: center;
}
.sold-stamp {
background: #dc2626;
color: #fff;
font-size: 13px;
font-weight: 800;
padding: 5px 14px;
border-radius: 4px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* Ad number tag */
.ad-number-tag {
font-size: 11px;
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-bottom: 6px;
}
/* ============================================================
SCREEN: YAD2 VEHICLE PAGE
============================================================ */
.vehicle-page { background: var(--color-bg-page); min-height: 100vh; }
.breadcrumb {
display: flex;
align-items: center;
gap: 6px;
padding: 12px var(--spacing-page-x);
font-size: 12.5px;
color: var(--color-text-muted);
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.breadcrumb span { cursor: pointer; }
.breadcrumb span:hover { color: var(--color-accent); }
.breadcrumb-sep { opacity: 0.4; }
.vehicle-page-inner {
max-width: 1100px;
margin: 0 auto;
padding: 24px var(--spacing-page-x);
}
.vehicle-page-header { margin-bottom: 20px; }
.vehicle-page-title {
font-size: 26px;
font-weight: 800;
color: var(--color-text-primary);
line-height: 1.2;
}
.vehicle-page-sub {
font-size: 14px;
color: var(--color-text-secondary);
margin-top: 4px;
display: flex;
align-items: center;
gap: 12px;
}
.vehicle-page-grid {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
}
/* Gallery */
.gallery-wrap { background: var(--color-surface); border-radius: var(--radius-card); border: 1px solid var(--color-border); overflow: hidden; }
.gallery-main {
width: 100%;
height: 340px;
background: linear-gradient(135deg, #e4e7ec 0%, #d0d5dd 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 72px;
position: relative;
}
.gallery-thumbs {
display: flex;
gap: 8px;
padding: 10px;
overflow-x: auto;
background: var(--color-surface-sunken);
border-top: 1px solid var(--color-border);
}
.gallery-thumb {
width: 72px;
height: 52px;
border-radius: 6px;
background: #d0d5dd;
flex-shrink: 0;
cursor: pointer;
border: 2px solid transparent;
transition: border-color var(--transition);
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.gallery-thumb.active { border-color: var(--color-accent); }
/* Quick specs strip */
.quick-specs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-border);
border-radius: var(--radius-card);
overflow: hidden;
margin-top: 16px;
border: 1px solid var(--color-border);
}
.spec-item {
background: var(--color-surface);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 3px;
}
.spec-item-label {
font-size: 11px;
color: var(--color-text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
}
.spec-item-value {
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
}
/* Vehicle sidebar */
.vehicle-sidebar-card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-card);
overflow: hidden;
position: sticky;
top: 76px;
}
.price-block {
padding: 20px;
border-bottom: 1px solid var(--color-border);
}
.price-main {
font-size: 32px;
font-weight: 800;
color: var(--color-text-primary);
line-height: 1;
}
.price-note { font-size: 12px; color: var(--color-text-muted); margin-top: 5px; }
.cta-block { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cta-block .btn { width: 100%; justify-content: center; font-size: 15px; padding: 11px 16px; }
.lead-form { padding: 16px; border-top: 1px solid var(--color-border); }
.lead-form-title {
font-size: 13px;
font-weight: 600;
color: var(--color-text-secondary);
margin-bottom: 12px;
}
.lead-form-grid { display: flex; flex-direction: column; gap: 8px; }
/* Full spec table */
.full-specs-card {
margin-top: 16px;
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
overflow: hidden;
}
.full-specs-header {
padding: 14px 16px;
border-bottom: 1px solid var(--color-border);
font-size: 14px;
font-weight: 600;
color: var(--color-text-primary);
}
.specs-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.spec-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 9px 16px;
border-bottom: 1px solid var(--color-border-subtle);
gap: 12px;
}
.spec-row:nth-child(odd) { background: var(--color-surface-sunken); }
.spec-row-label { font-size: 13px; color: var(--color-text-secondary); }
.spec-row-value { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
/* Notes */
.notes-card {
margin-top: 16px;
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
padding: 16px;
}
.notes-text { font-size: 14px; color: var(--color-text-secondary); line-height: 1.7; }
/* Sticky CTA bar */
.sticky-cta {
position: fixed;
bottom: 60px;
left: 0; right: 0;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: 0 -2px 12px rgba(16,24,40,0.08);
padding: 10px 20px;
display: flex;
gap: 10px;
z-index: 50;
}
.sticky-cta .btn { flex: 1; justify-content: center; }
/* ============================================================
SCREEN: ADMIN DASHBOARD
============================================================ */
.dashboard-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
.shortcut-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin: 20px 0;
}
.shortcut-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 14px;
cursor: pointer;
transition: all var(--transition);
text-align: center;
}
.shortcut-card:hover {
border-color: var(--color-accent);
background: var(--color-accent-muted);
transform: translateY(-1px);
}
.shortcut-icon { font-size: 22px; margin-bottom: 6px; }
.shortcut-label { font-size: 12.5px; font-weight: 500; color: var(--color-text-secondary); }
.mini-leads-table { width: 100%; }
.mini-lead-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.mini-lead-row:last-child { border-bottom: none; }
.mini-lead-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--color-accent-muted);
color: var(--color-accent);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mini-lead-name { font-size: 13.5px; font-weight: 500; color: var(--color-text-primary); }
.mini-lead-vehicle { font-size: 12px; color: var(--color-text-secondary); }
.mini-lead-time { font-size: 11px; color: var(--color-text-muted); margin-right: auto; }
.activity-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid var(--color-border-subtle);
font-size: 13px;
color: var(--color-text-secondary);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-accent);
margin-top: 4px;
flex-shrink: 0;
}
.activity-time { font-size: 11px; color: var(--color-text-muted); margin-right: auto; }
/* ============================================================
SCREEN: ADMIN YAD2 MANAGEMENT
============================================================ */
.admin-table-toolbar {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.admin-search {
position: relative;
flex: 1;
min-width: 200px;
max-width: 340px;
}
.admin-search input {
width: 100%;
height: 36px;
padding: 0 36px 0 12px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-input);
background: var(--color-surface);
font-size: 13.5px;
font-family: var(--font-body);
color: var(--color-text-primary);
outline: none;
}
.admin-search input:focus { border-color: var(--color-accent); }
.admin-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-muted);
font-size: 14px;
}
.inline-edit-row { display: flex; gap: 6px; align-items: center; }
.inline-edit-input {
width: 90px;
height: 30px;
padding: 0 8px;
border: 1px solid var(--color-accent);
border-radius: 5px;
font-size: 12.5px;
font-family: var(--font-body);
background: var(--color-accent-muted);
outline: none;
}
.action-row { display: flex; gap: 4px; }
/* ============================================================
SCREEN: ADMIN LEADS
============================================================ */
.lead-row-expanded {
background: var(--color-surface-sunken);
padding: 12px 16px;
border-top: 1px solid var(--color-border-subtle);
border-bottom: 1px solid var(--color-border);
}
.lead-message-box {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 6px;
padding: 10px 12px;
font-size: 13px;
color: var(--color-text-secondary);
line-height: 1.6;
margin-bottom: 10px;
}
.note-add-row { display: flex; gap: 8px; margin-top: 8px; }
.note-input {
flex: 1;
height: 34px;
padding: 0 10px;
border: 1px solid var(--color-border-strong);
border-radius: 6px;
font-size: 13px;
font-family: var(--font-body);
background: var(--color-surface);
outline: none;
}
.source-icon {
width: 26px; height: 26px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
.source-form { background: var(--primitive-blue-50); }
.source-wa { background: #dcfce7; }
.source-phone { background: var(--primitive-gray-100); }
.status-select {
height: 28px;
padding: 0 6px;
border: 1px solid var(--color-border-strong);
border-radius: 20px;
font-size: 12px;
font-family: var(--font-body);
background: var(--color-surface);
cursor: pointer;
outline: none;
color: var(--color-text-primary);
}
/* ============================================================
SCREEN: ADMIN IMPORT
============================================================ */
.import-wizard { max-width: 820px; }
.step-indicator {
display: flex;
gap: 0;
margin-bottom: 28px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
overflow: hidden;
}
.step-item {
flex: 1;
padding: 12px 8px;
text-align: center;
position: relative;
cursor: pointer;
transition: all var(--transition);
}
.step-item + .step-item { border-right: 1px solid var(--color-border); }
.step-num {
width: 22px; height: 22px;
border-radius: 50%;
background: var(--color-border);
color: var(--color-text-muted);
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 4px;
}
.step-name { font-size: 12px; color: var(--color-text-muted); font-weight: 500; }
.step-item.active .step-num { background: var(--color-accent); color: #fff; }
.step-item.active .step-name { color: var(--color-accent); font-weight: 600; }
.step-item.done .step-num { background: var(--primitive-green-500); color: #fff; }
.step-item.done .step-name { color: var(--primitive-green-600); }
.upload-zone {
border: 2px dashed var(--color-border-strong);
border-radius: var(--radius-card);
padding: 48px;
text-align: center;
cursor: pointer;
transition: all var(--transition);
background: var(--color-surface-sunken);
}
.upload-zone:hover {
border-color: var(--color-accent);
background: var(--color-accent-muted);
}
.upload-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.upload-title { font-size: 16px; font-weight: 600; color: var(--color-text-primary); margin-bottom: 6px; }
.upload-sub { font-size: 13px; color: var(--color-text-muted); }
.upload-file-types {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 12px;
}
.file-type-badge {
padding: 3px 10px;
border-radius: 5px;
background: var(--color-surface);
border: 1px solid var(--color-border);
font-size: 12px;
color: var(--color-text-secondary);
font-weight: 600;
}
.mapping-table { width: 100%; border-collapse: collapse; }
.mapping-table th, .mapping-table td {
padding: 10px 12px;
font-size: 13px;
border-bottom: 1px solid var(--color-border-subtle);
text-align: right;
}
.mapping-table th {
font-size: 12px;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.4px;
background: var(--color-surface-sunken);
}
.mapping-select {
width: 100%;
height: 32px;
padding: 0 8px;
border: 1px solid var(--color-border-strong);
border-radius: 5px;
font-size: 13px;
font-family: var(--font-body);
background: var(--color-surface);
cursor: pointer;
outline: none;
}
.mapping-required { color: var(--primitive-red-500); font-size: 11px; }
.mapping-status-ok { color: var(--primitive-green-600); font-size: 13px; }
.mapping-status-warn { color: var(--primitive-amber-500); font-size: 13px; }
.diff-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.diff-card {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
padding: 14px;
text-align: center;
}
.diff-card-num { font-size: 26px; font-weight: 800; margin-bottom: 4px; }
.diff-card-label { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }
.diff-create .diff-card-num { color: var(--primitive-green-600); }
.diff-update .diff-card-num { color: var(--primitive-blue-600); }
.diff-deactivate .diff-card-num { color: var(--primitive-amber-500); }
.diff-error .diff-card-num { color: var(--primitive-red-500); }
.import-options-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-card);
padding: 20px;
}
.import-option-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--color-border-subtle);
}
.import-option-item:last-child { border-bottom: none; }
.import-option-item input { width: 16px; height: 16px; accent-color: var(--color-accent); margin-top: 2px; cursor: pointer; }
.import-option-text .opt-title { font-size: 14px; font-weight: 500; color: var(--color-text-primary); }
.import-option-text .opt-desc { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }
.import-result-summary {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin: 20px 0;
}
.result-item {
background: var(--color-surface);
border-radius: var(--radius-card);
border: 1px solid var(--color-border);
padding: 16px;
text-align: center;
}
.result-num { font-size: 28px; font-weight: 800; }
.result-label { font-size: 12px; color: var(--color-text-secondary); margin-top: 4px; }
.import-history-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid var(--color-border-subtle);
font-size: 13.5px;
}
.import-history-row:last-child { border-bottom: none; }
.import-history-file { font-weight: 500; color: var(--color-text-primary); flex: 1; }
.import-history-stats { display: flex; gap: 16px; color: var(--color-text-secondary); font-size: 12.5px; }
.import-stat span { font-weight: 600; color: var(--color-text-primary); }
/* ============================================================
SCREENS VISIBILITY CONTROL
============================================================ */
.screen { display: none; }
/* Active screen fills the remaining width in the flex row, scrolls independently */
.screen.active {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
}
/* ============================================================
TABLE CELL UTILITY CLASSES
Replace all inline style="color/font" in render functions.
These reference only semantic tokens — zero primitives.
============================================================ */
.cell-mono { font-family: var(--font-mono, 'Courier New', monospace); font-size: 12.5px; }
.cell-muted { color: var(--color-text-muted); }
.cell-sub { font-size: 12px; color: var(--color-text-muted); }
.cell-strong { font-weight: 500; color: var(--color-text-primary); }
.cell-sm { font-size: 12px; }
.cell-edit-btn { padding: 2px 6px; font-size: 11px; }
.cell-phone {
color: var(--color-text-primary);
text-decoration: none;
font-family: var(--font-mono, 'Courier New', monospace);
font-size: 13px;
}
/* Lead row states — replaces inline style background/font on tr */
.lead-table-row { cursor: pointer; }
.lead-row-new td { background: var(--color-accent-muted); }
.lead-table-row:hover td { background: var(--color-surface-sunken); }
.lead-new-indicator { font-size: 11px; color: var(--color-accent); font-weight: 500; }
.lead-note-text { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 8px; }
/* Import history — replaces primitive token reference */
.import-file-icon { font-size: 16px; }
.import-error-count { color: var(--color-status-sold-text); }
/* Mapping table — replaces primitive token references */
.mapping-required { color: var(--color-status-sold-text); font-size: 11px; }
.mapping-status-ok { color: var(--color-status-active-text); font-size: 13px; }
/* ================================================================
GLOBAL MOBILE NAVIGATION + SOCIAL DRAWER
All elements below are position:fixed and mobile-only (display:none
on desktop; shown via @media max-width:900px).
Zero effect on desktop layout.
================================================================ */
/* ── Global mobile hamburger ──────────────────────────────── */
.mob-ham-btn {
display: none;
position: fixed; top: 14px; right: 16px; z-index: 9002;
flex-direction: column; justify-content: center; align-items: center;
gap: 5px; width: 36px; height: 36px;
background: rgba(9,9,9,0.72); border: 1px solid rgba(255,255,255,0.12);
border-radius: 6px; cursor: pointer; padding: 4px;
backdrop-filter: blur(8px);
transition: background 180ms ease;
}
.mob-ham-btn:hover { background: rgba(255,255,255,0.12); }
.mob-ham-bar {
display: block; width: 20px; height: 2px;
background: rgba(255,255,255,0.85); border-radius: 2px;
transition: transform 250ms ease, opacity 250ms ease;
transform-origin: center;
}
.mob-ham-btn.open .mob-ham-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mob-ham-btn.open .mob-ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mob-ham-btn.open .mob-ham-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ── Global mobile nav panel ──────────────────────────────── */
.mob-nav {
display: none;
position: fixed; top: 64px; left: 0; right: 0; z-index: 9001;
flex-direction: column;
background: rgba(9,9,9,0.97);
border-bottom: 1px solid rgba(255,255,255,0.07);
backdrop-filter: blur(16px);
padding: 8px 0 16px;
}
.mob-nav.open { display: flex; }
.mob-nav-item {
padding: 15px 24px;
font-size: 15px; font-weight: 500;
color: rgba(255,255,255,0.7); cursor: pointer;
font-family: 'Heebo', sans-serif;
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: color 150ms ease, background 150ms ease;
}
.mob-nav-item:last-child { border-bottom: none; }
.mob-nav-item:hover, .mob-nav-item:active { color: #fff; background: rgba(255,255,255,0.06); }
/* ── Global mobile social side-drawer ────────────────────── */
.mob-social-wrapper {
display: none;
position: fixed; left: -40px; top: 50%; transform: translateY(-50%);
z-index: 9000; flex-direction: row; align-items: stretch;
transition: left 250ms cubic-bezier(0.4, 0, 0.2, 1);
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.mob-social-wrapper.open { left: 0; }
.mob-social-panel {
width: 60px;
background: rgba(9,9,9,0.96);
border: 1px solid rgba(255,255,255,0.08); border-right: none;
border-radius: 0 0 0 0;
padding: 12px 10px;
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.mob-social-handle {
width: 26px; min-height: 64px;
background: var(--hp-orange, #FF6B00);
border: none;
border-radius: 0 10px 10px 0;
cursor: pointer; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
box-shadow: 2px 2px 8px rgba(0,0,0,0.45);
transition: background 150ms ease;
}
.mob-social-handle:hover { background: #e05a00; }
.mob-social-handle svg {
width: 13px; height: 13px;
stroke: #fff; fill: none;
transition: transform 250ms ease;
}
.mob-social-wrapper.open .mob-social-handle svg { transform: rotate(180deg); }
.mob-social-link {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
text-decoration: none;
transition: background 150ms ease, border-color 150ms ease;
}
.mob-social-link:hover { background: rgba(255,255,255,0.12); }
.mob-social-link svg { width: 18px; height: 18px; display: block; }
.mob-social-link-wa svg { fill: #25D366; }
.mob-social-link-fb svg { fill: #1877F2; }
.mob-social-link-ig svg { fill: #C13584; }
.mob-social-link-waze svg { fill: #33CCFF; }
/* ── Mobile breakpoint — show global, hide section-specific ─ */
@media (max-width: 900px) {
/* Show global mobile elements */
.mob-ham-btn { display: flex; }
.mob-social-wrapper { display: flex; }
/* Hide HP section-specific hamburger (global one replaces it) */
#hp-hamburger { display: none !important; }
#hp-mobile-menu { display: none !important; }
/* Hide Yad1 + Yad2 section nav links */
.header-nav { display: none; }
/* Hide Yad2 social row */
.y2-social-row { display: none; }
/* Yad1 header: right padding so logo doesn't go behind global hamburger */
.yad1-header { padding-right: 60px; gap: 0; }
/* Yad2 header: right padding + tighten search */
.yad2-header-top { padding-right: 60px; gap: 8px; }
.header-search-wrap { max-width: unset; }
}
/* ===== extracted style block #2 from index.html ===== */
#dt-a11y-btn {
position: fixed; bottom: 70px; left: 24px; z-index: 99999;
width: 48px; height: 48px; border-radius: 50%;
background: #2962ff; border: none; cursor: pointer;
box-shadow: 0 4px 14px rgba(41,98,255,0.5);
display: flex; align-items: center; justify-content: center;
transition: transform .2s, box-shadow .2s;
}
#dt-a11y-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(41,98,255,0.65); }
#dt-a11y-btn svg { width: 26px; height: 26px; fill: #fff; }
#dt-a11y-panel {
position: fixed; bottom: 128px; left: 24px; z-index: 99998;
width: 320px; background: #fff; border-radius: 16px;
box-shadow: 0 8px 40px rgba(0,0,0,0.22);
font-family: 'Heebo', sans-serif; direction: rtl;
display: none; flex-direction: column; overflow: hidden;
max-height: 80vh;
}
#dt-a11y-panel.open { display: flex; }
.dt-a11y-header {
background: #2962ff; color: #fff;
padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.dt-a11y-header-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.dt-a11y-header-actions { display: flex; gap: 8px; }
.dt-a11y-header-actions button {
background: rgba(255,255,255,0.2); border: none; color: #fff;
width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
font-size: 1rem; display: flex; align-items: center; justify-content: center;
transition: background .15s;
}
.dt-a11y-header-actions button:hover { background: rgba(255,255,255,0.35); }
.dt-a11y-body { overflow-y: auto; padding: 16px; flex: 1; }
.dt-a11y-section { margin-bottom: 16px; }
.dt-a11y-section-title {
font-size: 0.72rem; color: #888; font-weight: 600;
text-align: left; margin-bottom: 10px; letter-spacing: .5px;
}
.dt-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dt-a11y-tile {
background: #f4f4f8; border: 2px solid transparent;
border-radius: 12px; padding: 12px 10px;
cursor: pointer; text-align: center;
transition: all .15s; font-size: 0.78rem; color: #333; font-weight: 600;
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.dt-a11y-tile:hover { background: #eaecff; border-color: #c5caff; }
.dt-a11y-tile.active { background: #e8eeff; border-color: #2962ff; color: #2962ff; }
.dt-a11y-tile .tile-icon { font-size: 1.4rem; line-height: 1; }
.dt-a11y-footer {
border-top: 1px solid #eee; padding: 12px 16px;
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.dt-a11y-footer a {
font-size: 0.75rem; color: #2962ff; text-decoration: none; font-weight: 600;
}
.dt-a11y-footer a:hover { text-decoration: underline; }
.dt-a11y-footer-brand { font-size: 0.68rem; color: #bbb; }
/* Accessibility state classes applied to body */
body.a11y-large-text * { font-size: 120% !important; }
body.a11y-line-height * { line-height: 2 !important; }
body.a11y-readable-font * { font-family: Arial, sans-serif !important; }
body.a11y-text-align * { text-align: right !important; }
body.a11y-contrast { filter: contrast(1.5) brightness(1.1); }
body.a11y-grayscale { filter: grayscale(1); }
body.a11y-no-anim * { animation: none !important; transition: none !important; }
body.a11y-hide-images img, body.a11y-hide-images video { visibility: hidden !important; }
body.a11y-highlight-links a { outline: 3px solid #2962ff !important; background: #fff7c0 !important; }
body.a11y-reading-mask::after {
content: ''; position: fixed; inset: 0; z-index: 999990;
background: linear-gradient(rgba(0,0,0,0.85) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.85) 100%);
pointer-events: none;
}
/* Floating WhatsApp button — sits above accessibility button */
#dt-wa-fab {
position: fixed; bottom: 128px; left: 24px; z-index: 99999;
width: 48px; height: 48px; border-radius: 50%;
background: #25d366; border: none; cursor: pointer;
box-shadow: 0 4px 14px rgba(37,211,102,0.5);
display: flex; align-items: center; justify-content: center;
transition: transform .2s, box-shadow .2s;
text-decoration: none;
}
#dt-wa-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,211,102,0.65); }
#dt-wa-fab svg { width: 26px; height: 26px; fill: #fff; }
/* ===== extracted style block #3 from index.html ===== */
/* ============================================================
ADMIN MVP — Unified Admin Panel (adm- prefix)
Front-end demo only. Not production auth.
============================================================ */
[data-theme="adm"] {
--adm-bg: #080a0e;
--adm-surface: #0e1116;
--adm-surface2: #14181f;
--adm-border: rgba(255,255,255,0.07);
--adm-border2: rgba(255,255,255,0.13);
--adm-gold: #c8a84b;
--adm-gold-dim: rgba(200,168,75,0.14);
--adm-text: #e2ddd8;
--adm-text2: #9e9e9e;
--adm-text3: #4a4a4a;
--adm-red: #e05050;
--adm-green: #3dcb7a;
--adm-blue: #4a90d9;
--adm-sw: 220px;
}
#shell-admin { font-family:'Heebo',sans-serif; }
.adm-app { display:flex; min-height:100vh; background:var(--adm-bg); color:var(--adm-text); direction:rtl; }
/* Sidebar */
.adm-sidebar { width:var(--adm-sw); min-height:100vh; background:var(--adm-surface); border-left:1px solid var(--adm-border); display:flex; flex-direction:column; flex-shrink:0; position:sticky; top:0; height:100vh; overflow-y:auto; }
.adm-brand { padding:22px 20px 14px; border-bottom:1px solid var(--adm-border); }
.adm-brand-name { font-size:17px; font-weight:900; color:var(--adm-gold); letter-spacing:2px; text-transform:uppercase; }
.adm-brand-sub { font-size:11px; color:var(--adm-text3); margin-top:2px; }
.adm-nav { flex:1; padding:10px 8px; }
.adm-nav-section { font-size:10px; color:var(--adm-text3); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:12px 12px 4px; }
.adm-nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:5px; cursor:pointer; font-size:14px; font-weight:500; color:var(--adm-text2); transition:all 170ms ease; margin-bottom:2px; }
.adm-nav-item:hover { background:rgba(255,255,255,0.05); color:var(--adm-text); }
.adm-nav-item.active { background:var(--adm-gold-dim); color:var(--adm-gold); }
.adm-count { margin-right:auto; font-size:11px; background:var(--adm-red); color:#fff; border-radius:10px; padding:1px 6px; font-weight:700; }
.adm-sidebar-footer { padding:14px 20px; border-top:1px solid var(--adm-border); display:flex; align-items:center; gap:10px; }
.adm-user-label { font-size:13px; color:var(--adm-text2); flex:1; }
.adm-logout-btn { background:none; border:1px solid var(--adm-border2); color:var(--adm-text2); padding:5px 12px; border-radius:4px; cursor:pointer; font-size:12px; font-family:'Heebo',sans-serif; transition:150ms; }
.adm-logout-btn:hover { border-color:var(--adm-red); color:var(--adm-red); }
.adm-topbar-logout {
position: fixed; top: 20px; left: 20px; z-index: 200;
background: rgba(14,16,22,0.92); border: 1px solid rgba(255,255,255,0.14);
color: rgba(255,255,255,0.55); padding: 7px 16px;
border-radius: 5px; font-size: 12px; font-weight: 600;
cursor: pointer; font-family: 'Heebo', sans-serif;
backdrop-filter: blur(8px); transition: border-color 180ms, color 180ms, background 180ms;
}
.adm-topbar-logout:hover { border-color: #e05050; color: #e05050; background: rgba(224,80,80,0.08); }
/* Main */
.adm-main { flex:1; display:flex; flex-direction:column; min-width:0; background:var(--adm-bg); }
.adm-screen { flex:1; display:flex; flex-direction:column; }
.adm-topbar { padding:20px 32px 16px; border-bottom:1px solid var(--adm-border); display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.adm-title { font-size:20px; font-weight:700; color:var(--adm-text); margin:0; flex:1; }
.adm-content { padding:28px 32px; flex:1; }
/* Summary cards */
.adm-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.adm-card { background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:8px; padding:20px 20px 16px; }
.adm-card-num { font-size:32px; font-weight:800; color:var(--adm-text); line-height:1; }
.adm-card-label { font-size:14px; font-weight:600; color:var(--adm-text); margin-top:8px; }
.adm-card-sub { font-size:12px; color:var(--adm-text3); margin-top:3px; }
.adm-card-alert .adm-card-num { color:var(--adm-gold); }
.adm-card-ok .adm-card-num { color:var(--adm-green); }
.adm-card-off .adm-card-num { color:var(--adm-text3); }
/* Two-col section row */
.adm-section-row { display:grid; grid-template-columns:1fr 280px; gap:16px; }
/* Panels */
.adm-panel { background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:8px; overflow:hidden; }
.adm-panel-head { padding:13px 20px; border-bottom:1px solid var(--adm-border); font-size:13px; font-weight:700; color:var(--adm-text2); letter-spacing:0.5px; }
/* Tables */
.adm-table { width:100%; border-collapse:collapse; font-size:13px; }
.adm-table th { padding:10px 14px; text-align:right; background:var(--adm-surface2); color:var(--adm-text3); font-weight:700; font-size:11px; letter-spacing:0.5px; border-bottom:1px solid var(--adm-border); white-space:nowrap; }
.adm-table td { padding:9px 14px; border-bottom:1px solid var(--adm-border); color:var(--adm-text); vertical-align:middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tr:hover td { background:rgba(255,255,255,0.02); }
/* Badges */
.adm-badge-tag { display:inline-block; padding:2px 8px; border-radius:3px; font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; background:var(--adm-gold-dim); color:var(--adm-gold); }
.adm-badge-tag.yad2 { background:rgba(74,144,217,0.14); color:var(--adm-blue); }
.adm-badge-tag.homepage { background:rgba(61,203,122,0.13); color:var(--adm-green); }
.adm-badge-tag.smart_button { background:rgba(224,80,80,0.12); color:var(--adm-red); }
/* Buttons */
.adm-btn { padding:8px 16px; border-radius:5px; font-family:'Heebo',sans-serif; font-size:13px; font-weight:600; cursor:pointer; transition:150ms; border:none; }
.adm-btn-primary { background:var(--adm-gold); color:#0a0906; }
.adm-btn-primary:hover { background:#d8bc6a; }
.adm-btn-sec { background:var(--adm-surface2); color:var(--adm-text); border:1px solid var(--adm-border2); }
.adm-btn-sec:hover { border-color:var(--adm-gold); color:var(--adm-gold); }
.adm-btn-danger { background:rgba(224,80,80,0.12); color:var(--adm-red); border:1px solid rgba(224,80,80,0.2); }
.adm-btn-danger:hover { background:rgba(224,80,80,0.25); }
.adm-btn-sm { padding:5px 10px; font-size:12px; }
/* Toolbar */
.adm-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:20px; }
.adm-search-input { background:var(--adm-surface); border:1px solid var(--adm-border2); color:var(--adm-text); padding:8px 14px; border-radius:5px; font-family:'Heebo',sans-serif; font-size:13px; width:200px; direction:rtl; }
.adm-search-input:focus { outline:none; border-color:var(--adm-gold); }
.adm-filter-select { background:var(--adm-surface); border:1px solid var(--adm-border2); color:var(--adm-text); padding:8px 12px; border-radius:5px; font-family:'Heebo',sans-serif; font-size:13px; cursor:pointer; }
.adm-filter-select:focus { outline:none; border-color:var(--adm-gold); }
/* Quick actions */
.adm-quick-actions { padding:16px; display:flex; flex-direction:column; gap:8px; }
/* Forms */
.adm-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.adm-form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.adm-field { display:flex; flex-direction:column; gap:6px; }
.adm-field label { font-size:12px; font-weight:600; color:var(--adm-text2); }
.adm-input,.adm-select,.adm-textarea { background:var(--adm-surface); border:1px solid var(--adm-border2); color:var(--adm-text); padding:9px 12px; border-radius:5px; font-family:'Heebo',sans-serif; font-size:13px; direction:rtl; width:100%; box-sizing:border-box; }
.adm-input:focus,.adm-select:focus,.adm-textarea:focus { outline:none; border-color:var(--adm-gold); }
.adm-textarea { resize:vertical; min-height:80px; }
.adm-form-card { background:var(--adm-surface); border:1px solid var(--adm-border); border-radius:8px; padding:24px; margin-top:24px; }
.adm-form-head { font-size:14px; font-weight:700; color:var(--adm-text); margin-bottom:18px; padding-bottom:12px; border-bottom:1px solid var(--adm-border); display:flex; align-items:center; gap:10px; }
.adm-form-actions { display:flex; gap:10px; margin-top:20px; }
/* Toggle */
.adm-toggle { display:flex; align-items:center; gap:10px; cursor:pointer; }
.adm-toggle-track { width:40px; height:22px; border-radius:11px; background:var(--adm-text3); position:relative; transition:background 200ms ease; cursor:pointer; }
.adm-toggle-track.on { background:var(--adm-green); }
.adm-toggle-thumb { position:absolute; top:3px; right:3px; width:16px; height:16px; border-radius:50%; background:#fff; transition:transform 200ms ease; }
.adm-toggle-track.on .adm-toggle-thumb { transform:translateX(-18px); }
.adm-toggle-label { font-size:13px; color:var(--adm-text); }
/* Status chips */
.adm-status { display:inline-block; padding:3px 8px; border-radius:3px; font-size:11px; font-weight:700; }
.adm-status-active { background:rgba(61,203,122,0.14); color:var(--adm-green); }
.adm-status-order { background:rgba(200,168,75,0.14); color:var(--adm-gold); }
.adm-status-sold { background:rgba(224,80,80,0.12); color:var(--adm-red); }
/* Star */
.adm-star { cursor:pointer; font-size:16px; opacity:0.25; transition:opacity 150ms; }
.adm-star.on { opacity:1; color:var(--adm-gold); }
/* Empty */
.adm-empty { text-align:center; padding:40px 0; color:var(--adm-text3); font-size:14px; }
/* Notice */
.adm-notice-ok { background:rgba(61,203,122,0.13); border:1px solid rgba(61,203,122,0.28); color:var(--adm-green); padding:10px 16px; border-radius:5px; margin-bottom:16px; font-size:13px; }
/* Smart Button sub-tabs */
.sb-sub-tab { background:none; border:none; border-bottom:2px solid transparent; color:var(--adm-text3); font-family:'Heebo',sans-serif; font-size:13px; font-weight:600; padding:12px 20px; cursor:pointer; transition:150ms; }
.sb-sub-tab:hover { color:var(--adm-text); }
.sb-sub-tab.active { color:var(--adm-gold); border-bottom-color:var(--adm-gold); }
/* Responsive */
@media(max-width:900px){
[data-theme="adm"]{ --adm-sw:56px; }
.adm-brand-name,.adm-brand-sub,.adm-nav-section,.adm-user-label { display:none; }
.adm-nav-item span:last-child { display:none; }
.adm-nav-item { justify-content:center; padding:12px; }
.adm-count { position:absolute; top:6px; left:6px; }
.adm-content { padding:16px; }
.adm-cards { grid-template-columns:1fr 1fr; }
.adm-section-row { grid-template-columns:1fr; }
.adm-form-grid,.adm-form-grid-3 { grid-template-columns:1fr; }
}
/* ===== extracted style block #4 from index.html ===== */
#admin-login-overlay {
position: fixed; inset: 0; z-index: 99998;
background: rgba(5,5,8,0.94);
backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
}
.admin-login-logo {
position: absolute; top: 24px; left: 24px;
cursor: pointer; transition: opacity 180ms;
}
.admin-login-logo:hover { opacity: 0.75; }
.admin-login-box {
position: relative;
background: #0e1016;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 6px;
padding: 32px 36px 32px;
width: 340px;
display: flex; flex-direction: column; gap: 0;
box-shadow: 0 24px 60px rgba(0,0,0,0.6);
font-family: 'Heebo', sans-serif;
direction: rtl;
}
.admin-login-dismiss {
position: absolute; top: -22px; right: -22px;
width: 44px; height: 44px; border-radius: 50%;
background: rgba(14,16,22,0.95);
border: 1px solid rgba(255,255,255,0.22);
color: rgba(255,255,255,0.85);
font-size: 18px; line-height: 1;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: background 180ms, border-color 180ms, color 180ms, transform 180ms;
box-shadow: 0 4px 16px rgba(0,0,0,0.45);
}
.admin-login-dismiss:hover {
background: rgba(255,255,255,0.12);
border-color: rgba(255,255,255,0.50);
color: #fff;
transform: scale(1.10);
}
.admin-login-title {
font-size: 20px; font-weight: 800; color: #f0ece4;
margin-bottom: 4px;
}
.admin-login-sub {
font-size: 12px; color: rgba(255,255,255,0.3);
letter-spacing: 1px; margin-bottom: 28px;
}
.admin-login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.admin-login-label { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.45); letter-spacing: 1px; text-transform: uppercase; }
.admin-login-input {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 4px;
padding: 10px 12px;
font-size: 14px; color: #f0ece4;
outline: none;
transition: border-color 180ms;
}
.admin-login-input:focus { border-color: #c8a84b; }
.admin-login-error { font-size: 12px; color: #e05050; margin-bottom: 10px; }
.admin-login-btn {
margin-top: 8px;
padding: 12px;
background: #c8a84b; color: #000;
font-size: 14px; font-weight: 800;
border: none; border-radius: 4px;
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: background 180ms;
}
.admin-login-btn:hover { background: #d9ba60; }
.admin-login-cancel {
margin-top: 10px; padding: 8px;
background: transparent; color: rgba(255,255,255,0.3);
font-size: 12px; border: none; cursor: pointer;
font-family: 'Heebo', sans-serif;
transition: color 180ms;
}
.admin-login-cancel:hover { color: rgba(255,255,255,0.6); }
.admin-logout-btn {
margin-top: 10px;
padding: 6px 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 3px;
color: rgba(255,255,255,0.35);
font-size: 11px; font-weight: 600;
cursor: pointer; font-family: 'Heebo', sans-serif;
transition: all 180ms;
}
.admin-logout-btn:hover { border-color: #e05050; color: #e05050; }