/* ============================================= AutoParts — Main CSS Flat, light-first design system (calibrated against trodo.com). See the THEME TOKENS block below before changing any colour. ============================================= */ /* ---- Google Font ---- */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ============================================= THEME TOKENS Calibrated against trodo.com, the reference the client picked: a flat, light-first parts catalogue. The rules that keep it looking serious: * NO gradients anywhere. Every fill is one solid colour. * NO glows, and shadows only where something genuinely floats (dropdowns, modals). Cards are separated by a 1px border instead. * Small radii (4px surfaces / 6px controls), not pill-shaped. * One accent (blue) for actions and links. Amber is reserved for warnings — it is NOT the price colour; prices are plain dark ink, which is what makes a catalogue read as a catalogue. * Restrained weights: 600 for headings, never 800/900. Light is the DEFAULT theme (`:root`); dark is the opt-in variant. Every variable is defined in both and keeps its ROLE, not its lightness, so the ~700 var() call sites need no per-theme handling: --bg-primary page background --bg-secondary recessed fill: inputs, hovers, table stripes --bg-card card / panel surface --bg-card-hover card surface, hovered --bg-nav sticky bars (navbar, admin topbar) The active theme is written to `data-theme` on by the inline script in includes/theme_boot.php (see it for why that must run before paint). ============================================= */ :root { color-scheme: light; /* Surfaces */ --bg-primary: #FBFBFC; --bg-secondary: #F4F6F8; --bg-card: #FFFFFF; --bg-card-hover: #F9FAFB; --bg-nav: #FFFFFF; --bg-overlay: rgba(33, 43, 54, 0.45); --bg-row-alt: #FAFBFC; --bg-img-placeholder: #F4F6F8; /* The dark band behind the hero. A flat slate, not a gradient. */ --bg-hero: #212B36; --text-on-hero: #FFFFFF; --text-on-hero-muted: #B6BEC7; /* Accent — one blue, used for actions and links only. */ --blue-400: #0077C7; --blue-500: #0077C7; --blue-600: #0069B0; --blue-700: #005991; /* Warnings / attention. Never used for prices. */ --amber-400: #B45309; --amber-500: #C2680C; --amber-600: #92400E; --on-amber: #FFFFFF; --green-500: #067A54; --green-text:#067A54; --red-500: #D42C2C; --red-400: #D42C2C; /* Ink */ --text-primary: #212B36; --text-secondary: #4A5765; --text-muted: #637381; /* Price gets its own token so it is never confused with an accent. */ --price-color: #212B36; /* Hairlines. A card is a white box with a 1px border and nothing else. */ --border: #E6E9EC; --border-blue: #B7D8EE; --border-card: #E6E9EC; /* Badges over product photography stay dark-on-light-text in BOTH themes: they sit on arbitrary images, not on the page surface. */ --bg-img-badge: rgba(255, 255, 255, 0.94); --on-img-badge: #212B36; --bg-img-scrim: none; /* Kept as variables because ~30 call sites reference them, but every one is now a SOLID colour. Do not reintroduce linear-gradient() here. */ --gradient-blue: #0077C7; --gradient-amber: #B45309; --gradient-hero: #212B36; --gradient-card: none; /* Glow is off. The names survive so the ~5 call sites keep resolving — as a transparent zero-shadow, because a literal `none` inside a comma-separated box-shadow list is invalid and voids the declaration. */ --glow-blue: 0 0 0 rgba(0,0,0,0); --glow-amber: 0 0 0 rgba(0,0,0,0); /* Shadows: only for things that genuinely overlay the page. */ --shadow-sm: 0 1px 2px rgba(33, 43, 54, 0.06); --shadow-md: 0 2px 8px rgba(33, 43, 54, 0.10); --shadow-lg: 0 8px 24px rgba(33, 43, 54, 0.14); --shadow-card: none; /* Radius */ --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 6px; --radius-xl: 8px; /* Transitions — short and unshowy. */ --transition: all 0.15s ease; --transition-fast: all 0.12s ease; --transition-slow: all 0.2s ease; } :root[data-theme="dark"] { color-scheme: dark; --bg-primary: #12161C; --bg-secondary: #1A1F27; --bg-card: #171C23; --bg-card-hover: #1E242D; --bg-nav: #171C23; --bg-overlay: rgba(0, 0, 0, 0.6); --bg-row-alt: #1A1F27; --bg-img-placeholder: #1A1F27; --bg-hero: #0E1218; --text-on-hero: #F2F4F6; --text-on-hero-muted: #99A4B0; /* Lifted so it clears contrast on a dark surface; still one accent. */ --blue-400: #4DA8E8; --blue-500: #3E9BDD; --blue-600: #58B4EF; --blue-700: #7BC5F4; --amber-400: #D99A3C; --amber-500: #C9862A; --amber-600: #B0731F; --on-amber: #12160F; --green-500: #35B37E; --green-text:#35B37E; --red-500: #E5646A; --red-400: #E5646A; --text-primary: #E4E8ED; --text-secondary: #A8B2BD; --text-muted: #7A8592; --price-color: #E4E8ED; --border: #262D37; --border-blue: #2C4A63; --border-card: #262D37; --bg-img-badge: rgba(10, 13, 18, 0.82); --on-img-badge: #FFFFFF; --bg-img-scrim: none; --gradient-blue: #2C7FBE; --gradient-amber: #C9862A; --gradient-hero: #0E1218; --gradient-card: none; --glow-blue: 0 0 0 rgba(0,0,0,0); --glow-amber: 0 0 0 rgba(0,0,0,0); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.45); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-card: none; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* 15px base (trodo runs 14px). Every rem below scales with this, so this one line is what tightens the whole page density. */ font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } button, input, select, textarea { font-family: inherit; outline: none; } ul, ol { list-style: none; } /* The browser's own `[hidden] { display: none }` sits in the UA stylesheet, so ANY author rule that sets a display beats it — and almost every list item in this project is `display: flex`. Every JS-driven show/hide here toggles the `hidden` property (the vehicle-picker cards, the Brend list narrowing, the Marka/Model/Nəsil tag picker), and without this they set the attribute while the element stays perfectly visible. `!important` is the point: this has to outrank the component's own display, whatever it is. */ [hidden] { display: none !important; } /* ---- Scrollbar ---- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-secondary); } ::-webkit-scrollbar-thumb { background: var(--blue-700); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--blue-600); } /* ---- Selection ---- */ ::selection { background: rgba(59,130,246,0.3); color: var(--text-primary); } /* ============================================= LAYOUT ============================================= */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 24px; } .page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; } /* Grid */ .grid-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; } /* ============================================= NAVBAR ============================================= */ .navbar { position: sticky; top: 0; z-index: 100; background: var(--bg-nav); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0; } .navbar-inner { display: flex; align-items: center; gap: 24px; height: 70px; } .navbar-logo { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.2px; flex-shrink: 0; } .navbar-logo .logo-icon { width: 36px; height: 36px; background: var(--gradient-blue); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--glow-blue); } .logo-text-auto { color: var(--text-primary); } .logo-text-parts { color: var(--blue-400); } /* Uploaded logo. Height-capped and width-free so a wide wordmark and a square badge both sit on the same navbar line without either being distorted — `contain` never crops, and the shop's own artwork is the one image on the page we must not second-guess. */ .logo-img { height: 38px; width: auto; max-width: 200px; object-fit: contain; display: block; } .navbar-search { flex: 1; max-width: 560px; position: relative; } .navbar-search input { width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 11px 48px 11px 18px; color: var(--text-primary); font-size: 0.9rem; transition: var(--transition); } .navbar-search input::placeholder { color: var(--text-muted); } .navbar-search input:focus { border-color: var(--blue-500); background: var(--bg-card); box-shadow: 0 0 0 3px rgba(59,130,246,0.12); } .navbar-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; display: flex; } .navbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .nav-icon-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--bg-secondary); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); color: var(--text-secondary); position: relative; } .nav-icon-btn:hover { background: var(--bg-card-hover); border-color: var(--border-blue); color: var(--text-primary); } .cart-badge { position: absolute; top: -5px; right: -5px; background: var(--gradient-amber); color: var(--on-amber); font-size: 0.65rem; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-primary); line-height: 1; } /* ============================================= HERO SECTION ============================================= */ .hero { background: var(--gradient-hero); padding: 80px 0 60px; position: relative; overflow: hidden; } /* Uploaded banner photo. The scrim is not decoration: the hero copy is light, the admin can upload any photograph, and a bright sky behind white text is unreadable. A fixed dark overlay is the only thing that makes an ARBITRARY image safe here — sampling the image to pick a text colour is not something a PHP page can do, and asking the admin to "upload something dark" is a rule nobody remembers. `background-image` is set inline by index.php. */ .hero.has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .hero.has-bg::before { content: ''; position: absolute; inset: 0; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 23, 42, 0.72); pointer-events: none; } /* The hero's own copy is light by design, but on a light-theme page without a photo it sits on the themed hero background. With a photo it always sits on the dark scrim, so the text is pinned light there regardless of theme. */ .hero.has-bg .hero-title, .hero.has-bg .hero-title .gradient-text { color: #FFFFFF; } .hero.has-bg .hero-subtitle, .hero.has-bg .hero-stat-label { color: rgba(255, 255, 255, 0.82); } .hero.has-bg .hero-stat-value { color: #FFFFFF; } .hero::before { content: ''; position: absolute; top: -50%; left: -10%; width: 60%; height: 200%; background: none; pointer-events: none; } .hero::after { content: ''; position: absolute; bottom: -30%; right: -5%; width: 50%; height: 150%; background: none; pointer-events: none; } .hero-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 700px; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25); border-radius: 100px; padding: 6px 16px; font-size: 0.8rem; font-weight: 500; color: var(--blue-400); margin-bottom: 24px; } .hero-title { font-size: clamp(1.75rem, 4vw, 2.4rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.2px; margin-bottom: 16px; color: var(--text-on-hero); } /* Was a blue->amber gradient fill. Solid now; the emphasis comes from weight and colour, not from a rainbow. */ .hero-title .gradient-text { color: var(--text-on-hero); } .hero-subtitle { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 36px; max-width: 550px; line-height: 1.7; } .hero-search { display: flex; gap: 12px; max-width: 600px; } .hero-search input { flex: 1; background: rgba(13, 21, 38, 0.8); border: 1px solid var(--border-blue); border-radius: var(--radius-md); padding: 16px 22px; color: var(--text-primary); font-size: 0.95rem; backdrop-filter: blur(10px); transition: var(--transition); } .hero-search input:focus { border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,130,246,0.15); } .hero-search input::placeholder { color: var(--text-muted); } .hero-stats { display: flex; gap: 40px; margin-top: 48px; } .hero-stat { } .hero-stat-value { font-size: 1.8rem; font-weight: 600; color: var(--text-primary); letter-spacing: -0.2px; } .hero-stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; } /* ============================================= CATEGORY BAR ============================================= */ /* ============================================= VEHICLE PICKER — Marka → Model → Nəsil, as cards One step is on screen at a time (see renderVehiclePicker()); every card is a real , so all of this is link styling, not widget styling. ============================================= */ .vehicle-picker { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: 22px 0 24px; } .vp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .vp-title { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); } .vp-title svg { color: var(--blue-400); flex-shrink: 0; } .vp-hint { margin-top: 3px; font-size: 0.82rem; color: var(--text-muted); } /* Three static labels, lit up to the current step. Deliberately not links — the breadcrumb below is the thing you navigate with; this only says where you are, so two controls never compete for the same job. */ .vp-progress { display: flex; align-items: center; gap: 6px; } .vp-progress-step { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.72rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .vp-progress-step.is-on { border-color: rgba(59, 130, 246, 0.35); background: rgba(59, 130, 246, 0.10); color: var(--blue-400); } .vp-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; font-size: 0.83rem; } .vp-crumb { color: var(--blue-400); font-weight: 500; } .vp-crumb:hover { text-decoration: underline; } .vp-crumb.is-current { color: var(--text-primary); font-weight: 700; } .vp-crumb-sep { color: var(--text-muted); } .vp-crumb-reset { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); } .vp-crumb-reset:hover { color: var(--red-400); } .vp-search { position: relative; display: flex; align-items: center; gap: 8px; max-width: 300px; margin-bottom: 12px; padding: 7px 12px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); } .vp-search svg { color: var(--text-muted); flex-shrink: 0; } .vp-search input { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 0.84rem; font-family: inherit; } .vp-search input::placeholder { color: var(--text-muted); } .vp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } /* Collapsed list: the overflow cards are RENDERED but not displayed, so the type-to-narrow box can still find them (it drops .is-collapsed the moment you type) and a no-JS visitor gets the whole list via the