/* ==========================================================================
AutoNext Car Market - Main Stylesheet
Font: Kanit, Noto Sans Lao, and Fallback system fonts
--------------------------------------------------------------------------
NOTE: Google Fonts used to be loaded via @import at the top of this file.
That blocked the entire stylesheet (and therefore the FOUC-immune theme
override in ) on a second network round-trip to fonts.googleapis.com.
Fonts are now loaded from each HTML page's via
+ , which lets the browser start the CSS variable
cascade (and our anti-FOUC inline script) without waiting for fonts.
========================================================================== */
:root {
/* Brand / Dynamic Theme Colors (Synched with Firebase) */
--primary-color: #e11d48; /* Dynamic Primary Color (default red-rose) */
--primary-hover: #be123c;
--primary-light: #ffe4e6;
--accent-color: #2563eb; /* Secondary / Accent Color (blue) */
--accent-hover: #1d4ed8;
--accent-light: #dbeafe;
/* Neutrals & Surfaces */
--bg-page: #f8fafc;
--bg-card: #ffffff;
--bg-subtle: #f1f5f9;
--border-color: #e2e8f0;
--border-focus: #94a3b8;
--text-main: #0f172a;
--text-muted: #64748b;
--text-light: #94a3b8;
--text-white: #ffffff;
/* Status Colors */
--status-available: #10b981;
--status-reserved: #f59e0b;
--status-sold: #64748b;
/* Shadows & Radius */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 16px;
--radius-full: 9999px;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-hover: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
Theme Switching — suppress global transitions for one frame
--------------------------------------------------------------------------
theme-init.js adds .theme-switching to while swapping CSS variables
so the new color appears instantly instead of fading from the old one.
Removed on the next requestAnimationFrame so hover/focus transitions stay snappy.
========================================================================== */
.theme-switching,
.theme-switching *,
.theme-switching *::before,
.theme-switching *::after {
transition: none !important;
animation: none !important;
}
/* ==========================================================================
Boot Splash — covers the body while we wait for Firebase to deliver
the user's saved theme on a first visit (when localStorage is empty).
The inline head script stamps in that case;
firebase-config.js removes it after applying the theme, at which point
the splash lifts and the real page appears in the correct colors.
On any subsequent visit the inline script already applied the cached
theme from localStorage and stamped , so the
splash never shows — only first-time visitors see it.
========================================================================== */
.boot-splash {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.25rem;
background: var(--bg-page, #f8fafc);
font-family: 'Kanit', system-ui, -apple-system, sans-serif;
/* Slight fade so revealing the page feels smooth rather than abrupt. */
transition: opacity 0.2s ease;
}
html.theme-loading .boot-splash {
display: flex;
}
.boot-splash-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.15rem;
}
.boot-splash-icon {
width: 60px;
height: 60px;
border-radius: 16px;
background: linear-gradient(135deg,
var(--primary-color, #e11d48) 0%,
var(--accent-color, #2563eb) 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.35);
}
.boot-splash-svg {
width: 32px;
height: 32px;
stroke: #fff;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.boot-splash-brand {
font-size: 1.55rem;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text-main, #0f172a);
}
.boot-splash-brand .highlight {
color: var(--primary-color, #e11d48);
}
.boot-splash-spinner {
width: 34px;
height: 34px;
border: 3px solid var(--border-color, #e2e8f0);
border-top-color: var(--primary-color, #e11d48);
border-radius: 50%;
animation: boot-splash-spin 0.8s linear infinite;
}
@keyframes boot-splash-spin {
to { transform: rotate(360deg); }
}
.boot-splash-text {
color: var(--text-muted, #64748b);
font-size: 0.95rem;
letter-spacing: 0.2px;
}
/* Prevent the body from scrolling under the splash and ensure focus
traps inside the splash while theme-loading is on. */
html.theme-loading body {
overflow: hidden;
}
/* ==========================================================================
SVG Icon System (Theme-Responsive)
========================================================================== */
.svg-icon {
width: 1.25em;
height: 1.25em;
display: inline-block;
vertical-align: -0.2em;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: var(--transition);
}
.svg-icon-sm {
width: 1em;
height: 1em;
vertical-align: -0.15em;
}
.svg-icon-lg {
width: 1.75em;
height: 1.75em;
}
.svg-theme {
color: var(--primary-color) !important;
stroke: var(--primary-color) !important;
}
.svg-accent {
color: var(--accent-color) !important;
stroke: var(--accent-color) !important;
}
/* Base Reset & Typography */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Kanit', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans Lao", "Phetsarath",
"Microsoft Sans Serif", "Microsoft JhengHei",
"Apple SD Gothic Neo", sans-serif;
background-color: var(--bg-page);
color: var(--text-main);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
transition: var(--transition);
}
button, input, select, textarea {
font-family: inherit;
}
.container {
max-width: 1240px;
margin: 0 auto;
padding: 0 1.25rem;
}
/* ==========================================================================
Header & Navigation
========================================================================== */
/* Language Selector (current-flag + dropdown) */
.lang-selector {
position: relative;
display: inline-flex;
align-items: center;
}
.lang-current {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
height: 38px;
padding: 0 0.7rem;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #e2e8f0;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-current:hover,
.lang-current[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.28);
color: #fff;
}
.lang-flag-svg {
width: 24px;
height: 18px;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
display: block;
flex-shrink: 0;
align-self: center;
}
.lang-code {
font-family: var(--font-mono, ui-monospace, "SFMono-Regular", monospace);
}
.lang-chevron {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
transition: transform 0.2s ease;
}
.lang-current[aria-expanded="true"] .lang-chevron {
transform: rotate(180deg);
}
.lang-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 160px;
list-style: none;
margin: 0;
padding: 0.4rem;
background: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
z-index: 1100;
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.lang-dropdown[hidden] { display: none; }
.lang-dropdown li { margin: 0; }
.lang-option {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 0.7rem;
border-radius: var(--radius-sm);
color: #e2e8f0;
font-size: 0.85rem;
text-decoration: none;
transition: background 0.12s ease;
}
.lang-option:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
.lang-option .lang-flag-svg {
width: 26px;
height: 20px;
}
/* Old rules kept for backward compat */
.lang-btn {
display: inline-flex;
align-items: center;
gap: 0.2rem;
padding: 0.2rem 0.45rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
color: #94a3b8;
font-weight: 500;
cursor: pointer;
border: none;
background: transparent;
text-decoration: none;
}
.lang-btn:hover, .lang-btn.active {
background: rgba(255, 255, 255, 0.2);
color: #fff;
}
/* Main Navbar */
.navbar {
background: var(--bg-card);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--shadow-sm);
border-bottom: 1px solid var(--border-color);
}
.navbar .container {
display: flex;
align-items: center;
height: 72px;
}
.navbar .brand-logo { order: 0; flex-shrink: 0; }
.navbar .nav-links { order: 1; margin: 0 auto; }
.navbar .nav-actions {
order: 2;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.navbar .lang-selector { order: initial; }
.navbar .mobile-toggle { order: initial; }
.brand-logo {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--text-main);
}
.brand-logo .logo-icon {
width: 42px;
height: 42px;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
color: #fff;
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.brand-logo .highlight {
color: var(--primary-color);
}
.nav-links {
display: flex;
align-items: center;
gap: 1.75rem;
list-style: none;
}
.nav-links a {
font-weight: 500;
font-size: 1rem;
color: var(--text-main);
position: relative;
padding: 0.25rem 0;
}
.nav-links a:hover, .nav-links a.active {
color: var(--primary-color);
}
.nav-links a.active::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2.5px;
background: var(--primary-color);
border-radius: 2px;
}
.mobile-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-main);
cursor: pointer;
}
/* ==========================================================================
Hero Slideshow System (Admin-controlled multi-slide banner)
========================================================================== */
.hero {
position: relative;
width: 100%;
background: #ffffff;
color: #fff;
overflow: hidden;
}
/* Slideshow container — BMW-style aspect-ratio lock
- 1920×650 reference (2.95:1 banner) on desktop
- Scales proportionally with screen width, never distorts */
.hero-slideshow {
position: relative;
width: 100%;
aspect-ratio: 1920 / 650; /* LOCKED aspect ratio — height auto from width */
overflow: hidden;
background: #ffffff;
flex-shrink: 0;
}
/* Individual slide */
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease-in-out;
z-index: 1;
}
.hero-slide.active {
opacity: 1;
z-index: 2;
}
.hero-slide picture,
.hero-slide img {
width: 100%;
height: 100%;
display: block;
}
.hero-slide img {
object-fit: cover;
object-position: center;
}
/* Navigation dots */
.hero-dots {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
list-style: none;
margin: 0;
padding: 0;
}
.hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
border: 2px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
font-size: 0;
}
.hero-dot:hover {
background: rgba(255, 255, 255, 0.75);
}
.hero-dot.active {
background: #fff;
border-color: #fff;
transform: scale(1.2);
}
/* Loading state — white theme */
.hero-loader {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
z-index: 999;
transition: opacity 0.4s ease;
pointer-events: none;
}
.hero-loader.hide {
opacity: 0;
}
.hero-loader-spinner {
width: 48px;
height: 48px;
animation: hero-spin 1.2s linear infinite;
}
.hero-loader-spinner svg {
width: 100%;
height: 100%;
}
.hero-loader-text {
color: #475569;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.5px;
animation: hero-pulse 1.5s ease-in-out infinite;
}
@keyframes hero-spin {
to { transform: rotate(360deg); }
}
@keyframes hero-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
/* Subtle overlay — only soft white tint at top/bottom for spacing, no dark gradient */
.hero-overlay {
position: absolute;
inset: 0;
background: transparent;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
padding: 2rem 1.25rem 4.5rem;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 3;
text-align: center;
max-width: 820px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.4);
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
font-size: 0.875rem;
font-weight: 500;
margin-bottom: 1rem;
color: #fff;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.hero-title {
font-size: 2.75rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.85rem;
text-shadow:
0 2px 12px rgba(0, 0, 0, 0.8),
0 0 4px rgba(0, 0, 0, 0.6),
0 1px 2px rgba(0, 0, 0, 0.9);
}
.hero-title span {
color: #fff;
background: linear-gradient(to right, #ffffff, #fda4af);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero-desc {
font-size: 1.1rem;
color: #ffffff;
font-weight: 400;
text-shadow:
0 1px 8px rgba(0, 0, 0, 0.8),
0 0 3px rgba(0, 0, 0, 0.7);
max-width: 720px;
margin: 0 auto;
}
/* Mobile Cover: same aspect ratio as Desktop — 1920×650 (wide banner) */
@media (max-width: 768px) {
.hero-slideshow {
aspect-ratio: 1920 / 650; /* LOCKED 2.95:1 wide, scales with width */
}
.hero-slide img {
height: 100%; /* fills container — no fixed height */
}
.hero-title {
font-size: 1.85rem;
}
.hero-desc {
font-size: 0.95rem;
}
.hero-overlay {
padding: 2rem 1rem 4rem;
}
}
/* ==========================================================================
Search & Filter Bar (Floating above Hero)
========================================================================== */
.search-filter-wrapper {
margin-top: -3rem;
position: relative;
z-index: 10;
margin-bottom: 2.5rem;
}
.search-filter-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
}
.search-main-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto;
gap: 1rem;
align-items: end;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.form-group label {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.input-icon-wrap {
position: relative;
display: flex;
align-items: center;
}
.input-icon-wrap i, .input-icon-wrap svg {
position: absolute;
left: 0.85rem;
color: var(--text-light);
pointer-events: none;
}
.form-control {
width: 100%;
height: 48px;
padding: 0.6rem 0.85rem 0.6rem 2.4rem;
border: 1.5px solid var(--border-color);
border-radius: var(--radius-md);
font-size: 0.95rem;
color: var(--text-main);
background-color: var(--bg-card);
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px var(--primary-light);
}
select.form-control {
cursor: pointer;
}
.btn-search {
height: 48px;
padding: 0 1.75rem;
background: var(--primary-color);
color: #fff;
border: none;
border-radius: var(--radius-md);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.2);
transition: var(--transition);
white-space: nowrap;
}
.btn-search:hover {
background: var(--primary-hover);
transform: translateY(-1px);
}
/* Category Quick Filter Pills */
.category-pills {
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--border-color);
overflow-x: auto;
padding-bottom: 0.25rem;
}
.pill-btn {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 1rem;
border-radius: var(--radius-full);
background: var(--bg-subtle);
border: 1px solid transparent;
color: var(--text-muted);
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: var(--transition);
}
.pill-btn:hover {
background: var(--border-color);
color: var(--text-main);
}
.pill-btn.active {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}
/* ==========================================================================
Section Header & Statistics
========================================================================== */
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 1.75rem;
flex-wrap: wrap;
gap: 1rem;
}
.section-title {
font-size: 1.85rem;
font-weight: 700;
color: var(--text-main);
line-height: 1.2;
}
.section-subtitle {
color: var(--text-muted);
font-size: 0.95rem;
margin-top: 0.25rem;
}
.section-header-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* View Mode Switcher (Grid vs List) */
.view-switcher {
display: inline-flex;
align-items: center;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 0.2rem;
gap: 0.2rem;
box-shadow: var(--shadow-sm);
}
.view-btn {
width: 38px;
height: 38px;
border-radius: var(--radius-sm);
border: none;
background: transparent;
color: var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.view-btn:hover {
color: var(--primary-color);
background: var(--bg-subtle);
}
.view-btn.active {
background: var(--primary-color);
color: #fff;
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}
.view-btn.active svg {
stroke: #ffffff !important;
}
/* Items per page selector (customer view) */
.items-per-page {
display: inline-flex;
align-items: center;
gap: 0.45rem;
height: 38px;
padding: 0 0.65rem;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 0.85rem;
color: var(--text-muted);
box-shadow: var(--shadow-sm);
white-space: nowrap;
}
.items-per-page label {
cursor: pointer;
font-weight: 500;
}
.items-per-page select {
border: none;
background: transparent;
font-weight: 700;
color: var(--primary-color);
cursor: pointer;
outline: none;
padding: 2px 0;
font-size: 0.95rem;
}
.items-per-page select:focus-visible {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
border-radius: 2px;
}
/* Pagination Bar (Prev / 1 2 3 / Next) */
.pagination-bar {
display: flex;
justify-content: center;
align-items: center;
gap: 0.4rem;
margin: 1.5rem 0 3rem;
flex-wrap: wrap;
}
.pagination-btn {
min-width: 38px;
height: 38px;
padding: 0 0.75rem;
border: 1px solid var(--border-color);
background: var(--bg-card);
border-radius: var(--radius-sm);
cursor: pointer;
font-weight: 600;
color: var(--text-main);
font-size: 0.9rem;
transition: all 0.2s;
font-family: inherit;
}
.pagination-btn:hover:not(:disabled):not(.active) {
border-color: var(--primary-color);
color: var(--primary-color);
background: var(--primary-light);
}
.pagination-btn.active {
background: var(--primary-color);
color: #fff;
border-color: var(--primary-color);
box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}
.pagination-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pagination-ellipsis {
color: var(--text-muted);
padding: 0 0.25rem;
font-weight: 700;
}
/* ==========================================================================
Car Grid & List View
========================================================================== */
.cars-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.75rem;
margin-bottom: 3.5rem;
transition: var(--transition);
}
/* List View Mode (แบบเรียงแถวยาว) */
.cars-grid.list-view {
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.cars-grid.list-view .car-card {
flex-direction: row;
align-items: stretch;
width: 100%;
}
.cars-grid.list-view .car-thumb-wrap {
width: 340px;
min-width: 340px;
max-width: 340px;
height: 230px;
flex-shrink: 0;
}
.cars-grid.list-view .car-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 1.25rem 1.5rem;
min-width: 0;
}
.cars-grid.list-view .car-title {
font-size: 1.4rem;
-webkit-line-clamp: 2;
}
.cars-grid.list-view .car-specs-grid,
.cars-grid.list-view .car-desc-preview {
max-width: 100%;
-webkit-line-clamp: 3;
min-height: auto;
font-size: 0.92rem;
}
.cars-grid.list-view .car-actions {
max-width: 100%;
width: 100%;
grid-template-columns: 1fr auto auto auto;
}
.cars-grid.list-view .car-actions .btn-detail {
width: auto;
}
@media (max-width: 850px) {
.cars-grid.list-view .car-card {
flex-direction: column;
}
.cars-grid.list-view .car-thumb-wrap {
width: 100%;
min-width: 0;
max-width: 100%;
height: 220px;
}
.cars-grid.list-view .car-actions {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.cars-grid.list-view .car-actions .btn-detail {
width: 100%;
}
.cars-grid.list-view .car-actions .btn-contact-icon {
display: none;
}
}
.car-card {
background: var(--bg-card);
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-color);
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column;
position: relative;
}
.car-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
border-color: #cbd5e1;
}
.car-thumb-wrap {
position: relative;
width: 100%;
height: 230px;
aspect-ratio: 16 / 10;
background: #0f172a;
overflow: hidden;
flex-shrink: 0;
}
.car-thumb {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s ease;
}
.car-card:hover .car-thumb {
transform: scale(1.05);
}
.status-badge {
position: absolute;
top: 12px;
left: 12px;
padding: 0.3rem 0.75rem;
border-radius: var(--radius-full);
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.status-available { background-color: var(--status-available); }
.status-reserved { background-color: var(--status-reserved); }
.status-sold { background-color: var(--status-sold); }
.year-badge {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(6px);
color: #fff;
padding: 0.25rem 0.6rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 500;
}
.car-body {
padding: 1.25rem;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.car-brand-category {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.35rem;
font-weight: 500;
}
.car-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-main);
margin-bottom: 0.6rem;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.car-desc-preview {
font-size: 0.88rem;
color: var(--text-muted);
line-height: 1.55;
background: var(--bg-subtle);
padding: 0.75rem 0.85rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 4.2rem;
word-break: break-word;
}
.car-specs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
background: var(--bg-subtle);
padding: 0.65rem 0.75rem;
border-radius: var(--radius-md);
margin-bottom: 1rem;
}
.spec-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.spec-icon {
font-size: 1rem;
color: var(--text-muted);
margin-bottom: 0.15rem;
}
.spec-label {
font-size: 0.75rem;
color: var(--text-muted);
}
.spec-val {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-main);
}
.car-price-row {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1.2rem;
padding-top: 0.4rem;
border-top: 1px dashed var(--border-color);
}
.price-label {
font-size: 0.8rem;
color: var(--text-muted);
}
.car-price {
font-size: 1.45rem;
font-weight: 700;
color: var(--primary-color);
}
.car-actions {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 0.5rem;
margin-top: auto;
}
.btn-detail {
background: var(--primary-color);
color: #fff;
border: none;
border-radius: var(--radius-md);
padding: 0.65rem 1rem;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
transition: var(--transition);
}
.btn-detail:hover {
background: var(--primary-hover);
}
.btn-contact-icon {
width: 40px;
height: 40px;
border-radius: var(--radius-md);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
border: 1px solid var(--border-color);
background: var(--bg-subtle);
color: var(--text-main);
cursor: pointer;
transition: var(--transition);
}
.btn-contact-icon.line:hover {
background: #06c755;
color: #fff;
border-color: #06c755;
}
.btn-contact-icon.phone:hover {
background: var(--accent-color);
color: #fff;
border-color: var(--accent-color);
}
/* Empty State */
.empty-state {
text-align: center;
padding: 4rem 1rem;
background: var(--bg-card);
border-radius: var(--radius-lg);
border: 1px solid var(--border-color);
grid-column: 1 / -1;
}
.empty-state-icon {
font-size: 3rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.empty-state h3 {
font-size: 1.35rem;
margin-bottom: 0.5rem;
}
.empty-state p {
color: var(--text-muted);
margin-bottom: 1.5rem;
}
/* ==========================================================================
Trust & Value Props Banner
========================================================================== */
.features-section {
background: var(--bg-card);
padding: 3.5rem 0;
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
margin-bottom: 4rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
}
.feature-box {
display: flex;
gap: 1.25rem;
align-items: flex-start;
}
.feature-icon-wrap {
width: 54px;
height: 54px;
border-radius: var(--radius-lg);
background: var(--primary-light);
color: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.feature-icon-wrap svg {
width: 26px;
height: 26px;
stroke: var(--primary-color);
}
.feature-box h4 {
font-size: 1.15rem;
font-weight: 600;
margin-bottom: 0.35rem;
}
.feature-box p {
font-size: 0.9rem;
color: var(--text-muted);
}
/* ==========================================================================
Modal Dialog (Car Details)
========================================================================== */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.7);
backdrop-filter: blur(4px);
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.modal-backdrop.active {
opacity: 1;
pointer-events: auto;
}
.modal-content {
background: var(--bg-card);
border-radius: var(--radius-lg);
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: var(--shadow-hover);
position: relative;
transform: translateY(20px);
transition: transform 0.25s ease;
}
.modal-backdrop.active .modal-content {
transform: translateY(0);
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
border: none;
border-radius: 50%;
font-size: 1.25rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
transition: var(--transition);
}
.modal-close:hover {
background: rgba(0, 0, 0, 0.8);
}
.modal-gallery {
position: relative;
background: #090d16;
border-top-left-radius: var(--radius-lg);
border-top-right-radius: var(--radius-lg);
overflow: hidden;
}
.modal-main-img-wrap {
position: relative;
width: 100%;
height: 420px;
background: #090d16;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.modal-main-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: opacity 0.2s ease;
}
.modal-gallery-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
background: rgba(15, 23, 42, 0.75);
backdrop-filter: blur(4px);
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 5;
transition: all 0.2s ease;
}
.modal-gallery-btn:hover {
background: var(--primary-color);
border-color: var(--primary-color);
transform: translateY(-50%) scale(1.1);
}
.modal-gallery-btn.prev {
left: 1rem;
}
.modal-gallery-btn.next {
right: 1rem;
}
.modal-img-counter {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(4px);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
padding: 4px 10px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 5;
}
.modal-thumbs-strip {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: #0f172a;
overflow-x: auto;
scrollbar-width: thin;
}
.modal-thumb-item {
position: relative;
width: 76px;
height: 52px;
border-radius: 6px;
overflow: hidden;
border: 2px solid transparent;
cursor: pointer;
opacity: 0.6;
flex-shrink: 0;
transition: all 0.2s ease;
}
.modal-thumb-item:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.modal-thumb-item.active {
opacity: 1;
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
}
.modal-thumb-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 640px) {
.modal-main-img-wrap {
height: 270px;
}
.modal-gallery-btn {
width: 34px;
height: 34px;
}
.modal-thumb-item {
width: 60px;
height: 42px;
}
}
.modal-body {
padding: 2rem;
}
.modal-header-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.modal-title {
font-size: 1.75rem;
font-weight: 700;
}
.modal-price {
font-size: 2rem;
font-weight: 700;
color: var(--primary-color);
}
.modal-specs-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
background: var(--bg-subtle);
padding: 1.25rem;
border-radius: var(--radius-md);
margin-bottom: 1.5rem;
}
.modal-spec-cell {
display: flex;
flex-direction: column;
}
.modal-spec-cell .label {
font-size: 0.8rem;
color: var(--text-muted);
}
.modal-spec-cell .val {
font-size: 1rem;
font-weight: 600;
color: var(--text-main);
}
.modal-desc-box {
margin-bottom: 2rem;
}
.modal-desc-box h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.modal-desc-box p {
color: var(--text-muted);
white-space: pre-line;
}
.modal-contact-bar {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.modal-btn-contact {
flex: 1 1 0;
min-width: 0;
padding: 0.85rem 1rem;
border-radius: var(--radius-md);
font-weight: 600;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
border: none;
font-size: 0.95rem;
white-space: nowrap;
text-decoration: none;
transition: all 0.2s;
}
.modal-btn-contact:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.modal-btn-contact svg {
flex-shrink: 0;
}
.btn-phone-modal {
background: var(--primary-color);
color: #fff;
}
.btn-phone-modal:hover {
background: var(--primary-hover);
}
.btn-line-modal {
background: #06c755;
color: #fff;
}
.btn-line-modal:hover {
background: #05b04b;
}
.btn-wa-modal {
background: #25d366;
color: #fff;
}
.btn-wa-modal:hover {
background: #20b858;
}
/* ==========================================================================
Footer
========================================================================== */
.footer {
background: #090d16;
color: #94a3b8;
padding: 4rem 0 2rem;
border-top: 1px solid #1e293b;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 2.5rem;
margin-bottom: 3rem;
}
.footer-brand .brand-logo {
color: #fff;
margin-bottom: 1rem;
}
.footer-brand p {
font-size: 0.95rem;
line-height: 1.6;
color: #94a3b8;
max-width: 320px;
}
.footer-col h5 {
color: #fff;
font-size: 1.05rem;
margin-bottom: 1.25rem;
font-weight: 600;
}
.footer-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.footer-links a {
color: #94a3b8;
font-size: 0.95rem;
}
.footer-links a:hover {
color: var(--primary-light);
transform: translateX(3px);
}
.footer-contact-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
font-size: 0.95rem;
}
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid #1e293b;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.85rem;
}
/* Cars Result Count (filled by script.js) */
.cars-count {
display: block;
margin: 0 0 1rem 0;
font-size: 0.95rem;
font-weight: 500;
color: var(--text-muted);
}
/* ==========================================================================
Car Detail Modal — Responsive (PC 2-column, Mobile full-screen)
========================================================================== */
.modal-content {
display: flex;
flex-direction: column;
max-width: 1100px;
width: 100%;
max-height: 92vh;
}
/* PC / tablet landscape: two-column layout */
@media (min-width: 1024px) {
.modal-content {
flex-direction: row;
max-height: 90vh;
}
.modal-gallery {
flex: 0 0 58%;
border-top-right-radius: 0;
display: flex;
flex-direction: column;
border-top-left-radius: var(--radius-lg);
}
.modal-main-img-wrap {
flex: 1 1 auto;
height: auto;
min-height: 380px;
}
.modal-thumbs-strip {
flex: 0 0 auto;
}
.modal-body {
flex: 1 1 42%;
overflow-y: auto;
padding: 2rem 2.25rem;
padding-bottom: 5.5rem;
}
}
/* Modal meta line (brand · model · year) under title */
.modal-title-block { min-width: 0; }
.modal-meta {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
align-items: center;
color: var(--text-muted);
font-size: 0.9rem;
margin-bottom: 0.35rem;
}
.modal-meta .meta-sep { opacity: 0.55; }
.modal-meta .meta-item { color: var(--text-main); font-weight: 500; }
/* Badges overlay on main image (filled by script.js) */
.modal-badges {
position: absolute;
top: 0.85rem;
left: 0.85rem;
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
z-index: 5;
pointer-events: none;
}
.modal-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.32rem 0.7rem;
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
backdrop-filter: blur(6px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
pointer-events: auto;
}
.modal-badge-year { background: rgba(15, 23, 42, 0.78); color: #fff; }
.modal-badge-status { background: #10b981; color: #fff; }
.modal-badge-sold { background: #ef4444; color: #fff; }
/* Spec grid with icons */
.modal-specs-table {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.6rem;
}
.modal-spec-cell {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.7rem 0.85rem;
background: var(--bg-subtle);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
}
.modal-spec-cell .spec-icon {
flex: 0 0 auto;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: var(--primary-light);
color: var(--primary-color);
}
.modal-spec-cell .spec-icon svg { width: 16px; height: 16px; }
/* Hide duplicate spec cells on mobile — the quick-specs strip already shows
year/mileage/gear/fuel/color/body horizontally below the gallery, so the
inline grid would just duplicate the same data. PC keeps both intact. */
@media (max-width: 768px) {
.modal-specs-table { display: none; }
}
.modal-spec-cell .spec-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.modal-spec-cell .label {
font-size: 0.72rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.modal-spec-cell .val {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Mobile: full-screen edge-to-edge */
@media (max-width: 768px) {
.modal-content {
max-width: 100%;
width: 100%;
max-height: 100vh;
height: 100vh;
border-radius: 0;
}
.modal-close {
top: 0.7rem;
right: 0.7rem;
width: 40px;
height: 40px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
z-index: 20;
}
.modal-badges { top: 0.65rem; left: 0.65rem; }
.modal-gallery {
flex: 0 0 auto;
background: #090d16;
}
.modal-main-img-wrap {
height: 56vw;
min-height: 220px;
max-height: 320px;
}
.modal-thumbs-strip {
padding: 0.5rem 0.75rem;
}
.modal-thumb-item {
width: 64px;
height: 44px;
}
/* Mobile body: scroll area below gallery, leave room for sticky contact bar */
.modal-body {
flex: 1 1 auto;
overflow-y: auto;
padding: 1.1rem 1rem 1rem 1rem;
padding-bottom: 5.5rem;
-webkit-overflow-scrolling: touch;
}
/* Contact bar becomes sticky bottom strip on mobile */
.modal-contact-bar {
position: sticky;
bottom: 0;
left: 0;
right: 0;
flex-direction: row;
gap: 0.5rem;
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom)) 1rem;
background: var(--bg-card);
border-top: 1px solid var(--border-color);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
z-index: 15;
margin-top: 0;
}
.modal-btn-contact {
flex: 1 1 0;
min-height: 48px;
padding: 0.7rem 0.5rem;
font-size: 0.82rem;
/* Always show the label — users want to know what each button does. */
}
.modal-btn-contact svg { width: 18px; height: 18px; }
.modal-btn-contact span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Very small phones (≤ 380px) — tighten buttons so all 3 labels stay visible */
@media (max-width: 380px) {
.modal-body { padding: 0.9rem 0.85rem 5.5rem 0.85rem; }
.modal-main-img-wrap { height: 220px; min-height: 200px; }
.modal-thumb-item { width: 56px; height: 38px; }
.modal-badges .modal-badge { font-size: 0.7rem; padding: 0.25rem 0.55rem; }
.modal-btn-contact { font-size: 0.74rem; padding: 0.65rem 0.35rem; gap: 0.35rem; }
.modal-btn-contact svg { width: 16px; height: 16px; }
}
/* Modal body scrollbar */
.modal-body {
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}
.modal-body::-webkit-scrollbar { width: 6px; }
.modal-body::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.45);
border-radius: 999px;
}
/* Gallery nav buttons — bigger touch area on mobile */
.modal-gallery-btn {
transition: background 0.2s ease, transform 0.2s ease;
}
.modal-gallery-btn:hover { background: rgba(15, 23, 42, 0.9); }
@media (max-width: 768px) {
.modal-gallery-btn {
width: 38px;
height: 38px;
}
}
/* Image counter — top right on PC, bottom-center on mobile */
@media (min-width: 769px) {
.modal-img-counter { top: 1rem; right: 1rem; bottom: auto; left: auto; }
}
/* Main image — smooth spring-back when swipe is released without snap.
The JS sets inline transform during drag and removes it on release; the
transition below makes the snap-back feel like a soft spring. */
.modal-main-img {
transition: transform 0.32s cubic-bezier(0.25, 0.9, 0.3, 1.2);
will-change: transform;
user-select: none;
-webkit-user-drag: none;
}
/* Swipe hint — first-time-only chip that tells mobile users they can swipe
between photos. Auto-hides after a few seconds; JS also dismisses it the
moment the user actually swipes or taps prev/next. PC keeps visible arrows
so the hint is unnecessary there → hidden via breakpoint below. */
.modal-swipe-hint {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%) translateY(-4px);
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(15, 23, 42, 0.72);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
color: #fff;
font-size: 0.78rem;
font-weight: 500;
border-radius: 999px;
z-index: 5;
pointer-events: none;
opacity: 0;
transition: opacity 0.35s ease, transform 0.35s ease;
white-space: nowrap;
max-width: calc(100% - 80px);
overflow: hidden;
}
.modal-swipe-hint.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.modal-swipe-hint svg {
width: 12px;
height: 12px;
flex: 0 0 auto;
opacity: 0.85;
}
.modal-swipe-hint span {
text-overflow: ellipsis;
overflow: hidden;
}
@media (min-width: 769px) {
.modal-swipe-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.modal-main-img { transition: none; }
}
/* Page-indicator dots (alternative to the existing thumb strip, more glanceable
for touch users). Auto-injected by script.js when modal opens. */
.modal-page-dots {
position: absolute;
bottom: 0.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.35rem;
z-index: 4;
}
.modal-page-dots .dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.45);
transition: background 0.25s ease, transform 0.25s ease;
}
.modal-page-dots .dot.is-active {
background: #fff;
transform: scale(1.25);
}
/* ==========================================================================
Sticky Header (appears when user scrolls past hero on mobile)
========================================================================== */
.modal-sticky-header {
position: absolute;
top: 0; left: 0; right: 0;
display: none;
align-items: center;
gap: 0.75rem;
padding: 0.7rem 1rem;
background: var(--bg-card);
border-bottom: 1px solid var(--border-color);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
z-index: 25;
transform: translateY(-100%);
transition: transform 0.28s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
.modal-sticky-header.is-visible { transform: translateY(0); }
.modal-sticky-title {
flex: 1 1 auto;
font-weight: 700;
font-size: 1rem;
color: var(--text-main);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0;
}
.modal-sticky-price {
flex: 0 0 auto;
font-weight: 700;
font-size: 0.95rem;
color: var(--primary-color);
}
.modal-close--sticky {
position: static;
width: 38px; height: 38px;
flex: 0 0 auto;
background: var(--bg-subtle);
border: 1px solid var(--border-color);
}
@media (max-width: 768px) {
.modal-sticky-header { display: flex; }
}
/* ==========================================================================
Hero Overlay (title + price overlaid on hero image, mobile only)
========================================================================== */
.modal-hero-overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.1rem;
background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
color: #fff;
pointer-events: none;
z-index: 4;
}
.modal-hero-overlay .modal-title {
color: #fff;
font-size: 1.2rem;
line-height: 1.25;
margin: 0 0 0.25rem 0;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.modal-hero-price {
font-size: 1.3rem;
font-weight: 700;
color: #fff;
}
@media (min-width: 769px) {
.modal-hero-overlay { display: none; }
}
@media (max-width: 768px) {
/* Hide only the inline price in the title row — it's already mirrored
in the gallery hero overlay. Keep .modal-title-block visible so the
inline "ประเภท: X | สีตัวถัง: Y" line still appears, matching PC. */
.modal-header-row > .modal-price { display: none; }
}
/* Hero collapse on scroll — gallery shrinks to a slim strip on mobile */
.modal-gallery {
transition: height 0.35s cubic-bezier(0.25, 0.9, 0.3, 1.2),
max-height 0.35s cubic-bezier(0.25, 0.9, 0.3, 1.2);
}
@media (max-width: 768px) {
.modal-gallery.is-collapsed { height: 80px; max-height: 80px; flex: 0 0 auto; }
.modal-gallery.is-collapsed .modal-main-img-wrap { height: 80px; min-height: 80px; max-height: 80px; }
.modal-gallery.is-collapsed .modal-thumbs-strip,
.modal-gallery.is-collapsed .modal-hero-overlay,
.modal-gallery.is-collapsed .modal-badges,
.modal-gallery.is-collapsed .modal-swipe-hint { display: none; }
.modal-gallery.is-collapsed .modal-main-img { opacity: 0.5; }
}
/* ==========================================================================
Quick Specs Strip (mobile only — hidden on PC)
Equal-width 4-column grid with subtle dividers, no card chrome.
Visually lighter than before so it doesn't dominate the modal header.
========================================================================== */
.modal-quick-specs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
padding: 0.7rem 0.5rem;
background: var(--bg-card);
border-bottom: 1px solid var(--border-color);
}
.modal-quick-spec {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.4rem 0.25rem;
text-align: center;
position: relative;
min-width: 0;
}
/* Thin vertical divider between cells — replaces the old card border */
.modal-quick-spec:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 18%;
height: 64%;
width: 1px;
background: var(--border-color);
opacity: 0.7;
}
.modal-quick-spec .qs-icon {
width: 30px; height: 30px;
display: flex; align-items: center; justify-content: center;
border-radius: 8px;
background: var(--primary-light);
color: var(--primary-color);
}
.modal-quick-spec .qs-icon svg { width: 16px; height: 16px; }
.modal-quick-spec .qs-label {
font-size: 0.65rem;
color: var(--text-muted);
line-height: 1.2;
/* No uppercase / letter-spacing — cleaner for Thai text */
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
.modal-quick-spec .qs-value {
font-size: 0.82rem;
font-weight: 700;
color: var(--text-main);
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@media (min-width: 769px) {
.modal-quick-specs { display: none; }
}
/* ==========================================================================
Responsive Breakpoints
========================================================================== */
/* Large desktops / wide laptops (≤1280px) */
@media (max-width: 1280px) {
.container {
max-width: 1200px;
}
.footer-grid {
gap: 2rem;
}
}
/* Tablets landscape / small laptops (≤1024px) */
@media (max-width: 1024px) {
.container {
padding: 0 1.1rem;
}
.navbar .container {
height: 68px;
}
.search-main-row {
grid-template-columns: 1fr 1fr;
}
.search-main-row .form-group:nth-child(4) {
grid-column: 1 / -1;
}
.search-main-row .form-group:nth-child(4) .btn-search {
width: 100%;
justify-content: center;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
.cars-grid {
gap: 1.5rem;
}
.modal-body {
padding: 1.5rem;
}
.modal-main-img-wrap {
height: 360px;
}
}
/* Tablets portrait / large phones (≤900px) */
@media (max-width: 900px) {
.nav-links {
gap: 1.1rem;
}
.nav-links a {
font-size: 0.95rem;
}
.features-grid {
grid-template-columns: 1fr 1fr;
}
.cars-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}
/* Tablets portrait / iPad (≤768px) */
@media (max-width: 768px) {
html {
font-size: 15px;
}
.container {
padding: 0 1rem;
}
.hero-title {
font-size: 2.1rem;
}
.hero-desc {
font-size: 1rem;
}
.search-filter-wrapper {
margin-top: -2.5rem;
margin-bottom: 2rem;
}
.search-filter-card {
padding: 1.25rem;
}
.search-main-row {
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
}
.search-main-row .form-group:nth-child(1) {
grid-column: 1 / -1;
}
.search-main-row .form-group:nth-child(6) {
grid-column: 1 / -1;
}
.search-main-row .form-group:nth-child(6) .btn-search {
width: 100%;
}
.category-pills {
gap: 0.45rem;
margin-top: 1rem;
padding-top: 1rem;
}
.pill-btn {
padding: 0.4rem 0.85rem;
font-size: 0.85rem;
}
/* Navbar: hide nav-links, show mobile-toggle + open menu state */
.navbar .container {
height: 64px;
position: relative;
}
.brand-logo {
font-size: 1.3rem;
}
.brand-logo .logo-icon {
width: 38px;
height: 38px;
font-size: 1.1rem;
}
.nav-links {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--bg-card);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0.5rem 0;
border-top: 1px solid var(--border-color);
box-shadow: var(--shadow-md);
z-index: 999;
}
.nav-links.open {
display: flex;
}
.nav-links li {
width: 100%;
}
.nav-links a {
display: block;
padding: 0.85rem 1.25rem;
font-size: 0.95rem;
border-bottom: 1px solid var(--border-color);
}
.nav-links a.active::after {
display: none;
}
.nav-links a.active {
color: var(--primary-color);
background: var(--primary-light);
}
.mobile-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
}
.mobile-toggle:hover {
background: var(--bg-subtle);
}
/* Hero — keep LOCKED 650px */
.hero-slideshow,
.hero-slide img {
/* height locked at 650px */
}
.hero-overlay {
padding: 1.5rem 1rem 3rem;
}
.hero-badge {
font-size: 0.8rem;
padding: 0.35rem 0.85rem;
}
/* Section headers */
.section-title {
font-size: 1.55rem;
}
.section-header {
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
}
.section-header-controls {
margin-left: auto;
justify-content: flex-end;
}
.view-switcher {
padding: 0.15rem;
gap: 0.15rem;
}
.view-btn {
width: 30px;
height: 30px;
}
.view-btn svg {
width: 16px;
height: 16px;
}
/* Cars grid */
.cars-grid {
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Features */
.features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.feature-box {
gap: 1rem;
}
.feature-icon-wrap {
width: 46px;
height: 46px;
font-size: 1.25rem;
}
/* Footer */
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-bottom {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 0.5rem;
}
/* Modals */
.modal-body {
padding: 1.25rem;
}
.modal-header-row {
flex-direction: column;
align-items: flex-start;
}
.modal-title {
font-size: 1.4rem;
}
.modal-price {
font-size: 1.6rem;
}
.modal-specs-table {
grid-template-columns: 1fr 1fr;
padding: 1rem;
}
.modal-contact-bar {
flex-direction: column;
gap: 0.65rem;
}
.modal-btn-contact {
width: 100%;
}
.modal-main-img-wrap {
height: 280px;
}
/* Top header bar removed */
.lang-selector { gap: 0.2rem; }
.lang-btn { padding: 0.2rem 0.4rem; font-size: 0.85rem; }
}
/* Small phones (≤640px) */
@media (max-width: 640px) {
html {
font-size: 14.5px;
}
.hero-title {
font-size: 1.75rem;
}
.hero-slideshow,
.hero-slide img {
/* height locked at 650px */
}
.hero-overlay {
padding: 1.25rem 0.9rem 2.75rem;
}
.hero-badge {
margin-bottom: 0.75rem;
}
.hero-desc br {
display: none;
}
/* Search */
.search-main-row {
grid-template-columns: 1fr;
}
.search-main-row .form-group:nth-child(1),
.search-main-row .form-group:nth-child(2),
.search-main-row .form-group:nth-child(3),
.search-main-row .form-group:nth-child(4),
.search-main-row .form-group:nth-child(5),
.search-main-row .form-group:nth-child(6) {
grid-column: 1 / -1;
}
.form-control {
height: 44px;
font-size: 0.92rem;
}
.btn-search {
height: 46px;
}
/* Car card */
.car-thumb-wrap {
height: 160px;
}
.car-title {
font-size: 0.95rem;
}
.car-price {
font-size: 1.1rem;
}
.car-card-body {
padding: 0.75rem;
}
.car-actions {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.car-actions .btn-detail {
width: 100%;
}
.car-actions .btn-contact-icon {
display: none;
}
.car-specs-grid {
grid-template-columns: 1fr 1fr 1fr;
gap: 0.4rem;
padding: 0.6rem;
}
.spec-val {
font-size: 0.8rem;
}
.spec-label {
font-size: 0.7rem;
}
/* Footer */
.footer-grid {
grid-template-columns: 1fr;
gap: 1.75rem;
}
.footer {
padding: 2.5rem 0 1.5rem;
}
/* Modal */
.modal-content {
max-height: 95vh;
}
.modal-main-img-wrap {
height: 240px;
}
.modal-thumb-item {
width: 56px;
height: 40px;
}
.modal-gallery-btn {
width: 34px;
height: 34px;
}
}
/* Extra small phones (≤480px) */
@media (max-width: 480px) {
html {
font-size: 14px;
}
.container {
padding: 0 0.85rem;
}
.brand-logo {
font-size: 1.15rem;
gap: 0.45rem;
}
.brand-logo .logo-icon {
width: 34px;
height: 34px;
}
.hero-title {
font-size: 1.55rem;
line-height: 1.25;
}
.hero-slideshow,
.hero-slide img {
/* height locked at 650px */
}
.hero-overlay {
padding: 1rem 0.85rem 2.25rem;
}
.hero-badge {
font-size: 0.72rem;
padding: 0.3rem 0.7rem;
}
.section-title {
font-size: 1.35rem;
}
.modal-title {
font-size: 1.2rem;
}
.modal-price {
font-size: 1.4rem;
}
.modal-specs-table {
grid-template-columns: 1fr;
}
.modal-body {
padding: 1rem;
}
.modal-main-img-wrap {
height: 200px;
}
.lang-selector {
gap: 0.2rem;
}
.lang-btn {
padding: 0.15rem 0.35rem;
font-size: 0.72rem;
}
}
/* iPad landscape — keep LOCKED 650px */
@media (max-height: 700px) and (min-width: 768px) and (max-width: 1024px) {
.hero-slideshow,
.hero-slide img {
/* height locked at 650px */
}
.modal-main-img-wrap {
height: 320px;
}
}
/* ==========================================================================
A11y: prevent body scroll when mobile nav open
========================================================================== */
body.nav-open {
overflow: hidden;
}