/* ========================================================== Somken Tyres & Auto Services — Main Stylesheet (v3) Font pairing: Poppins (display/headings) + Inter (body) ========================================================== */ /* Fonts are loaded via tags in the of each header file (includes/header.php, admin/includes/header.php, customer/includes/header.php) rather than @import here — @import is render-blocking and can silently fail to load on some hosts/CSPs. */ :root{ --red: #C81E2F; --red-dark: #96101F; --red-light: #FF5A5F; --yellow: #F5B70F; --yellow-dark: #C9930A; --ink: #111217; --charcoal: #1E1F26; --gray-900: #23242B; --gray-700: #565866; --gray-500: #83859A; --gray-300: #D9DAE3; --gray-200: #E9EAF1; --gray-100: #F5F5F9; --cream: #FBFAF7; --white: #FFFFFF; --success: #1B8A4C; --warning: #C97A1E; --gold: #D9A441; --radius: 18px; --radius-sm: 12px; --shadow-sm: 0 2px 10px rgba(20,21,26,0.06); --shadow-md: 0 12px 32px rgba(20,21,26,0.10); --shadow-lg: 0 26px 60px rgba(20,21,26,0.18); --transition: all 0.28s cubic-bezier(.4,0,.2,1); } *{ box-sizing: border-box; margin:0; padding:0; } html{ scroll-behavior: smooth; } body{ font-family: 'Inter', sans-serif; color: var(--gray-900); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; font-size: 15.5px; } h1,h2,h3,h4,h5,h6{ font-family: 'Poppins', sans-serif; font-weight: 600; line-height: 1.18; color: var(--ink); letter-spacing: -0.015em; } h1{ font-weight:700; letter-spacing:-0.025em; } a{ text-decoration: none; color: inherit; } /* ---------------- Scroll-reveal animation ---------------- Add class="reveal" to any section/element; it fades and rises into view the first time it enters the viewport. */ .reveal{ opacity:0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; } .reveal.is-visible{ opacity:1; transform: translateY(0); } .reveal-1{ transition-delay: 0.08s; } .reveal-2{ transition-delay: 0.16s; } .reveal-3{ transition-delay: 0.24s; } .reveal-4{ transition-delay: 0.32s; } @keyframes floatY{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-10px);} } @keyframes fadeInUp{ from{ opacity:0; transform: translateY(18px);} to{ opacity:1; transform: translateY(0);} } @keyframes pulseSoft{ 0%,100%{ box-shadow: 0 0 0 0 rgba(200,30,47,0.35);} 50%{ box-shadow: 0 0 0 10px rgba(200,30,47,0);} } ul{ list-style: none; } img{ max-width: 100%; display: block; } button{ font-family: inherit; cursor: pointer; } p{ color: var(--gray-700); } .container{ width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; } .section{ padding: 96px 0; } .section-sm{ padding: 52px 0; } .bg-light{ background: var(--gray-100); } .bg-cream{ background: var(--cream); } .bg-dark{ background: var(--ink); color: rgba(255,255,255,0.82); } .bg-dark h1, .bg-dark h2, .bg-dark h3{ color: var(--white); } .bg-dark p{ color: rgba(255,255,255,0.62); } .section-tag{ display:inline-flex; align-items:center; gap:8px; color: var(--red); font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; font-size: 12px; margin-bottom: 14px; } .section-tag::before{ content:''; width:22px; height:2px; background: var(--gold); display:inline-block; } .section-title{ font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; max-width: 680px; } .section-sub{ color: var(--gray-500); max-width: 600px; margin-bottom: 44px; font-size: 16px; line-height: 1.7; } .text-center{ text-align: center; } .mx-auto{ margin-left:auto; margin-right:auto; } .section-tag.mx-auto, .section-title.mx-auto, .section-sub.mx-auto{ display:block; } /* Buttons */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 15px 32px; border-radius: 999px; font-weight: 600; font-size: 13.5px; font-family: 'Poppins', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; border: 1.5px solid transparent; transition: var(--transition); white-space: nowrap; } .btn-primary{ background: var(--red); color: var(--white); box-shadow: 0 10px 24px rgba(200,30,47,0.28); } .btn-primary:hover{ background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(200,30,47,0.36); } .btn-dark{ background: var(--ink); color: var(--white); } .btn-dark:hover{ background: var(--charcoal); transform: translateY(-2px); } .btn-outline{ background: transparent; border-color: rgba(255,255,255,0.35); color: var(--white); } .btn-outline:hover{ background: var(--white); color: var(--ink); border-color: var(--white); } .btn-outline-dark{ background: transparent; border-color: var(--gray-300); color: var(--ink); } .btn-outline-dark:hover{ background: var(--ink); color: var(--white); border-color: var(--ink); } .btn-sm{ padding: 10px 22px; font-size: 13px; } .btn-block{ width: 100%; } .btn:disabled{ opacity: 0.5; cursor: not-allowed; } /* ===================== NAVBAR (2-tier: top utility bar + category bar) ===================== */ .navbar-top{ position: sticky; top:0; z-index: 1000; background: #fff; border-bottom: 1px solid var(--gray-200); } .navbar-top-inner{ display:flex; align-items:center; justify-content:space-between; height: 80px; gap:24px; } .brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; } .brand img{ height: 50px; width:auto; } .nav-links-top{ display:flex; align-items:center; gap: 30px; } .nav-links-top a{ font-family:'Inter',sans-serif; font-weight: 500; font-size: 15px; color: var(--gray-900); transition: var(--transition); } .nav-links-top a:hover{ color: var(--red); } .navbar-categories{ position: sticky; top:80px; z-index: 999; background: var(--gray-100); border-bottom: 1px solid var(--gray-200); } .navbar-categories-inner{ display:flex; align-items:center; justify-content:center; gap: 34px; flex-wrap:wrap; height:60px; } .navbar-categories-inner a{ font-family:'Inter',sans-serif; font-weight: 500; font-size: 14.5px; color: var(--gray-900); white-space:nowrap; padding: 6px 2px; border-bottom: 2px solid transparent; transition: var(--transition); } .navbar-categories-inner a:hover{ color: var(--red); border-bottom-color: var(--red); } .navbar-categories-inner a i{ color: var(--red); margin-right:4px; } .nav-actions{ display:flex; align-items:center; gap: 12px; flex-shrink:0; } .icon-btn{ position: relative; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--gray-100); transition: var(--transition); color: var(--gray-900); } .icon-btn:hover{ background: var(--red); color:#fff; } .cart-badge{ position:absolute; top:-4px; right:-4px; background: var(--red); color:#fff; font-size: 10.5px; font-weight:700; border-radius:999px; min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; padding: 0 4px; border: 2px solid #fff; } .nav-toggle{ display:none; background:none; border:none; font-size:22px; } @media (max-width: 980px){ .nav-links-top, .navbar-categories-inner{ position:fixed; left:0; right:0; bottom:0; background:#fff; flex-direction:column; align-items:stretch; padding: 20px; gap: 4px; transform: translateX(-100%); transition: var(--transition); overflow-y:auto; z-index: 998; } .nav-links-top{ top:80px; height: calc(100vh - 80px); } .navbar-categories-inner{ top:140px; height: calc(100vh - 140px); justify-content:flex-start; } .nav-links-top a, .navbar-categories-inner a{ padding: 14px 16px; border-bottom:1px solid var(--gray-100); } .nav-links-top.open, .navbar-categories-inner.open{ transform: translateX(0); } .navbar-categories{ position:static; } .nav-toggle{ display:block; } } /* ===================== HERO ===================== */ .hero-slider{ position: relative; min-height: 620px; display:flex; align-items:center; overflow:hidden; background: var(--ink); color:#fff; } .hero-slide{ position:absolute; inset:0; opacity:0; transition: opacity 1.2s ease; } .hero-slide.active{ opacity:1; z-index:1; } /* Blurred, scaled-up copy of the same image fills the frame edge-to-edge... */ .hero-slide-bg{ position:absolute; inset:0; background-size:cover; background-position:center; filter: blur(32px) brightness(0.55) saturate(1.15); transform: scale(1.18); } /* Foreground image fills the whole hero banner edge-to-edge, cropping as needed rather than leaving blurred padding on the sides — the blurred .hero-slide-bg behind it is now just a fallback for the instant before the crisp image finishes loading. */ .hero-slide-fg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; } .hero-slide-overlay{ position:absolute; inset:0; background: linear-gradient(100deg, rgba(17,18,23,0.93) 0%, rgba(17,18,23,0.62) 52%, rgba(17,18,23,0.28) 100%); } .hero-slide-content{ position:relative; z-index:2; padding: 74px 0; } .hero-eyebrow{ display:inline-flex; align-items:center; gap:9px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); padding: 9px 18px; border-radius:999px; font-size: 12.5px; font-weight:600; margin-bottom:26px; letter-spacing:0.02em; animation: fadeInUp 0.7s ease both; } .hero-eyebrow i{ color: var(--yellow); } .hero-slide-content h1{ font-size: clamp(32px, 4.4vw, 54px); font-weight:700; color:#fff; margin-bottom:22px; letter-spacing:-0.03em; max-width:760px; animation: fadeInUp 0.8s ease 0.1s both; } .hero-slide-content h1 span{ color: var(--red-light); } .hero-slide-content p{ font-size: 17.5px; color: rgba(255,255,255,0.72); max-width: 560px; margin-bottom: 36px; line-height:1.75; animation: fadeInUp 0.8s ease 0.2s both; } .hero-actions{ display:flex; gap:16px; flex-wrap:wrap; animation: fadeInUp 0.8s ease 0.3s both; } .hero-stats{ display:flex; gap:44px; margin-top:54px; flex-wrap:wrap; animation: fadeInUp 0.8s ease 0.4s both; } .hero-stat b{ font-family:'Poppins',sans-serif; font-size: 32px; display:block; letter-spacing:-0.02em; } .hero-stat span{ font-size: 12.5px; color: rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; } .hero-slider-dots{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px; } .hero-slider-dots button{ width:9px;height:9px;border-radius:50%; background:rgba(255,255,255,0.35); border:none; cursor:pointer; transition: var(--transition); padding:0; } .hero-slider-dots button.active{ background: var(--red); width:26px; border-radius:6px; } .hero-slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px;height:44px;border-radius:50%; background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition: var(--transition); backdrop-filter: blur(4px); } .hero-slider-arrow:hover{ background: var(--red); border-color: var(--red); } .hero-slider-arrow.prev{ left:22px; } .hero-slider-arrow.next{ right:22px; } @media (max-width:700px){ .hero-slider-arrow{ display:none; } } /* Slow, subtle zoom on the active hero photo — makes a static storefront photo feel alive without being a distraction. Respects reduced-motion. */ @keyframes heroKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.08); } } .hero-slide.active .hero-slide-fg{ animation: heroKenBurns 7s ease-out forwards; } @media (prefers-reduced-motion: reduce){ .hero-slide.active .hero-slide-fg{ animation:none; } } /* Quick-finder card: straddles the bottom edge of the hero and the section below it — a deliberate overlap, not a layout accident, which is what reads as "designed" rather than templated. */ .quick-finder-wrap{ position:relative; z-index:4; } .quick-finder-card{ background:#fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); max-width: 960px; margin: -46px auto 0; padding: 26px 30px; border-top: 4px solid var(--gold); } .quick-finder-form{ display:flex; gap:10px; } .quick-finder-form input{ flex:1; } .quick-finder-links{ display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:16px; } .quick-finder-links a{ font-size:13.5px; font-weight:600; color: var(--gray-700); display:inline-flex; align-items:center; gap:7px; transition: var(--transition); } .quick-finder-links a:hover{ color: var(--red); } .quick-finder-links a i{ color: var(--gold); } @media (max-width:640px){ .quick-finder-form{ flex-direction:column; } .quick-finder-card{ margin-top:-30px; padding:20px; } } /* A faint recurring brand motif (tyre-tread ring) for a couple of key sections — cheap, on-brand personality that doesn't compete with content. */ .tread-motif{ position:absolute; width:320px; height:320px; border-radius:50%; border: 26px dashed currentColor; opacity:0.05; pointer-events:none; z-index:0; } .tread-motif.top-right{ top:-60px; right:-60px; } .tread-motif.bottom-left{ bottom:-70px; left:-70px; } .section-motif-host{ position:relative; overflow:hidden; } .hero-skew{ position:absolute; left:0; right:0; bottom:-1px; height:56px; background:var(--white); clip-path: polygon(0 100%, 100% 0, 100% 100%); z-index:3; } /* ===================== SERVICES GRID ===================== */ .services-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 24px; } .service-card{ background:#fff; border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 34px 28px; transition: var(--transition); box-shadow: var(--shadow-sm); position:relative; overflow:hidden; } .service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: transparent; } .service-icon{ width:58px; height:58px; border-radius: 15px; background: var(--ink); display:flex; align-items:center; justify-content:center; color:var(--red-light); font-size:24px; margin-bottom:22px; } .service-card h3{ font-size:19px; margin-bottom:10px; } .service-card p{ color: var(--gray-500); font-size:14.5px; margin-bottom:20px; } .service-meta{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; border-top:1px solid var(--gray-100); } .service-price{ font-family:'Poppins',sans-serif; font-weight:700; color:var(--red); } .service-link{ font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px; } .service-link:hover{ color: var(--red); } /* ===================== PRODUCT GRID / SHOP ===================== */ .filter-bar{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 36px; } .filter-chip{ padding: 10px 20px; border-radius:999px; border:1.5px solid var(--gray-300); font-weight:600; font-size:13px; transition: var(--transition); background:#fff; font-family:'Poppins',sans-serif; } .filter-chip.active, .filter-chip:hover{ background: var(--ink); color:#fff; border-color: var(--ink); } /* auto-fill (not auto-fit) is deliberate: auto-fit collapses unused grid tracks, which lets the few cards in a narrow search result (e.g. one exact tyre-size match) stretch to fill the whole row and look oversized. auto-fill keeps the track count based on the container width, so cards stay a consistent, sensible size whether there are 2 results or 20. */ .product-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 260px)); gap: 24px; } .product-card{ background:#fff; border: 1px solid var(--gray-200); border-radius: var(--radius); overflow:hidden; transition: var(--transition); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; } .product-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); } .product-thumb{ aspect-ratio: 3 / 4; background: var(--gray-100); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; } .product-thumb img{ height:100%; width:100%; object-fit: cover; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1); } .product-card:hover .product-thumb img{ transform: scale(1.07); } @media (prefers-reduced-motion: reduce){ .product-card, .product-thumb img{ transition: none !important; } } .product-cat-badge{ position:absolute; top:12px; left:12px; background: var(--ink); color:#fff; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding: 6px 12px; border-radius:999px; } .stock-badge{ position:absolute; top:12px; right:12px; background: var(--warning); color:#fff; font-size:10.5px; font-weight:700; padding:6px 12px; border-radius:999px; } .product-body{ padding: 14px 20px 6px; display:flex; flex-direction:column; gap:6px; flex:1; } .product-body h3{ font-size:16px; line-height:1.3; } .product-brand-strip{ padding: 16px 20px 0; min-height:46px; display:flex; align-items:center; } .product-brand{ color: var(--gray-500); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; } .tyre-size-badge{ display:inline-flex; align-items:center; gap:6px; background: var(--gray-100); border:1px solid var(--gray-200); color: var(--ink); font-family:'Poppins',sans-serif; font-weight:700; font-size:13px; padding:6px 12px; border-radius: var(--radius-sm); width:fit-content; margin: 4px 0 2px; } .tyre-size-badge i{ color: var(--red); font-size:12px; } .tyre-size-badge.lg{ font-size:16px; padding:10px 18px; } .product-promo-ribbon{ background: var(--red); color:#fff; text-align:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:13.5px; padding:12px 10px; margin-top:10px; } .product-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding:16px 20px 20px; } .product-price{ font-weight:800; font-family:'Poppins',sans-serif; color: var(--ink); font-size:18px; letter-spacing:-0.01em; } /* ===================== CARDS / WHY US ===================== */ .why-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 26px; } .why-card{ text-align:center; padding: 32px 18px; transition: var(--transition); } .why-card:hover{ transform: translateY(-6px); } .why-icon{ width:68px;height:68px;border-radius:20px; background: rgba(255,255,255,0.06); display:flex; align-items:center;justify-content:center; margin:0 auto 20px; font-size:26px; color: var(--red-light); } /* ===================== BLOG ===================== */ .blog-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 28px; } .blog-card{ background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); overflow:hidden; transition: var(--transition); box-shadow: var(--shadow-sm); display:flex; flex-direction:column; } .blog-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .blog-thumb{ height:190px; background: linear-gradient(135deg, var(--ink), var(--charcoal)); display:flex; align-items:center; justify-content:center; overflow:hidden; } .blog-thumb img{ height:100%; width:100%; object-fit:cover; } .blog-thumb i{ color: rgba(255,255,255,0.25); font-size:44px; } .blog-body{ padding: 24px; display:flex; flex-direction:column; gap:10px; flex:1; } .blog-category{ color: var(--red); font-weight:700; font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; } .blog-body h3{ font-size:18px; line-height:1.35; } .blog-body p{ font-size:14px; color: var(--gray-500); } .blog-meta{ display:flex; align-items:center; gap:8px; font-size:12.5px; color: var(--gray-500); margin-top:auto; padding-top:14px; } .blog-article{ max-width:760px; margin:0 auto; } .blog-article h1{ font-size: clamp(28px,4vw,40px); margin-bottom:18px; } .blog-article-meta{ display:flex; gap:14px; align-items:center; color:var(--gray-500); font-size:13.5px; margin-bottom:32px; flex-wrap:wrap; } .blog-article-content{ font-size:16.5px; line-height:1.9; color: var(--gray-900); } .blog-article-content p{ margin-bottom:22px; color: var(--gray-900); } .blog-featured-img{ width:100%; border-radius: var(--radius); margin-bottom:36px; max-height:420px; object-fit:cover; } /* ===================== FORMS ===================== */ .form-group{ margin-bottom: 20px; } .form-group label{ display:block; font-weight:600; font-size:13px; margin-bottom:9px; color: var(--gray-900); font-family:'Poppins',sans-serif; } .form-control{ width:100%; padding: 13px 16px; border-radius: var(--radius-sm); border: 1.5px solid var(--gray-300); font-size: 14.5px; font-family:'Inter',sans-serif; transition: var(--transition); background:#fff; } .form-control:focus{ outline:none; border-color: var(--red); box-shadow: 0 0 0 4px rgba(200,30,47,0.1); } textarea.form-control{ resize: vertical; min-height:110px; } .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width:640px){ .form-row{ grid-template-columns:1fr; } } .form-hint{ font-size:12.5px; color: var(--gray-500); margin-top:6px; } .form-hint.required{ color: var(--red); font-weight:600; } .auth-wrap{ max-width: 460px; margin: 64px auto; background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); padding: 46px 40px; box-shadow: var(--shadow-md); } .auth-wrap h2{ margin-bottom:8px; } .auth-wrap p.sub{ color:var(--gray-500); margin-bottom:30px; font-size:14.5px; } .auth-switch{ text-align:center; margin-top:22px; font-size:14px; color:var(--gray-500); } .auth-switch a{ color: var(--red); font-weight:700; } /* Alerts */ .alert{ padding: 15px 18px; border-radius: var(--radius-sm); font-size:14px; margin-bottom:22px; font-weight:500; } .alert-success{ background:#E5F6EC; color:#0F6633; border:1px solid #b8ecce; } .alert-error{ background:#FCEBEC; color:#96101F; border:1px solid #f6c4c4; } .alert-info{ background:#EAF1FD; color:#1D4F9B; border:1px solid #c8dbfb; } /* ===================== FOOTER ===================== */ .footer{ background: var(--ink); color: rgba(255,255,255,0.7); padding: 70px 0 26px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 44px; margin-bottom:48px; } .footer h4{ font-family:'Poppins',sans-serif; color:#fff; font-size:14.5px; margin-bottom:20px; letter-spacing:0.02em; } .footer-brand img{ height:44px; margin-bottom:18px; filter: brightness(0) invert(1); } .footer p{ font-size: 14px; line-height:1.85; color: rgba(255,255,255,0.55); } .footer ul li{ margin-bottom:11px; } .footer ul li a{ font-size:13.5px; transition: var(--transition); color: rgba(255,255,255,0.6); } .footer ul li a:hover{ color: var(--red-light); padding-left:4px; } .footer-bottom{ border-top:1px solid rgba(255,255,255,0.09); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; color: rgba(255,255,255,0.45); } .social-row{ display:flex; gap:12px; margin-top:18px; } .social-row a{ width:38px;height:38px;border-radius:50%; background: rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; transition: var(--transition); color:#fff; } .social-row a:hover{ background: var(--red); } @media (max-width: 860px){ .footer-grid{ grid-template-columns: 1fr 1fr; } } /* ===================== DASHBOARD LAYOUT (customer + admin) ===================== */ .dash-wrap{ display:grid; grid-template-columns: 260px 1fr; min-height: 100vh; } .dash-sidebar{ background: var(--ink); color:#fff; padding: 30px 20px; position: sticky; top:0; height:100vh; overflow-y:auto; } .dash-brand{ display:flex; align-items:center; gap:10px; margin-bottom:38px; padding: 0 6px;} .dash-brand img{ height:38px; filter: brightness(0) invert(1); } .dash-brand span{ font-family:'Poppins',sans-serif; } .dash-nav a{ display:flex; align-items:center; gap:12px; padding: 12px 14px; border-radius: 10px; font-weight:600; font-size: 13.5px; font-family:'Poppins',sans-serif; color: rgba(255,255,255,0.68); margin-bottom:3px; transition: var(--transition); } .dash-nav a:hover, .dash-nav a.active{ background: var(--red); color:#fff; } .dash-nav .section-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.08em; color: rgba(255,255,255,0.32); margin: 22px 10px 9px; font-weight:700; font-family:'Poppins',sans-serif; } .dash-main{ padding: 36px 42px; background: var(--gray-100); min-height:100vh; } .dash-topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 32px; flex-wrap:wrap; gap:14px; } .dash-topbar h1{ font-size: 25px; } .dash-user-chip{ display:flex; align-items:center; gap:10px; background:#fff; padding:8px 18px 8px 8px; border-radius:999px; box-shadow: var(--shadow-sm); } .avatar{ width:34px;height:34px; border-radius:50%; background: var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; font-family:'Poppins',sans-serif; } @media (max-width: 900px){ .dash-wrap{ grid-template-columns: 1fr; } .dash-sidebar{ position:relative; height:auto; } .dash-main{ padding: 26px 18px; } } .stat-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap:20px; margin-bottom:32px; } .stat-card{ background:#fff; border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); transition: var(--transition); } .stat-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); } .stat-card .label{ font-size:12.5px; color:var(--gray-500); font-weight:600; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.04em; } .stat-card .value{ font-size:28px; font-family:'Poppins',sans-serif; font-weight:800; letter-spacing:-0.02em; } .stat-card .value.red{ color: var(--red); } .card{ background:#fff; border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); margin-bottom: 26px; } .card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; flex-wrap:wrap; gap:10px; } .card-header h3{ font-size:18px; } table{ width:100%; border-collapse: collapse; } table th{ text-align:left; font-family:'Poppins',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color: var(--gray-500); padding: 12px 14px; border-bottom: 2px solid var(--gray-100); } table td{ padding: 14px; border-bottom: 1px solid var(--gray-100); font-size: 14px; vertical-align: middle; } table tr:hover td{ background: var(--gray-100); } .table-responsive{ overflow-x:auto; } .badge{ display:inline-block; padding: 5px 13px; border-radius:999px; font-size:11px; font-weight:700; text-transform:capitalize; font-family:'Poppins',sans-serif; } .badge-pending{ background:#FBEED4; color:#8A5A00; } .badge-confirmed, .badge-processing{ background:#DCEBFF; color:#1D4F9B; } .badge-completed, .badge-active, .badge-paid, .badge-published{ background:#DBF3E4; color:#0F6633; } .badge-cancelled, .badge-disabled, .badge-unpaid{ background:#FBDFE0; color:#96101F; } .badge-ready{ background:#EEE0FE; color:#6B21A8; } .badge-draft{ background:#EDEDF2; color:#565866; } .badge-walk-in{ background:#FDEFDD; color:#8A5A00; } .badge-online{ background:#DCEBFF; color:#1D4F9B; } .timeline{ position:relative; padding-left: 26px; } .timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background: var(--gray-300); } .timeline-item{ position:relative; padding-bottom: 28px; } .timeline-item::before{ content:''; position:absolute; left:-26px; top:4px; width:14px;height:14px; border-radius:50%; background: var(--red); border:3px solid #fff; box-shadow:0 0 0 2px var(--red); } .timeline-item .date{ font-size:12px; color: var(--gray-500); font-weight:700; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.03em; } .timeline-item h4{ font-size:15.5px; margin-bottom:5px; } .timeline-item p{ font-size:13.5px; color: var(--gray-700); } .next-service-banner{ background: var(--ink); color:#fff; padding: 24px 28px; border-radius: var(--radius); display:flex; align-items:center; justify-content:space-between; margin-bottom: 28px; flex-wrap:wrap; gap:14px; position:relative; overflow:hidden; } .next-service-banner::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 90% 0%, rgba(200,30,47,0.45), transparent 60%); } .next-service-banner h3{ color:#fff; font-size:16.5px; margin-bottom:5px; position:relative; } .next-service-banner p{ color: rgba(255,255,255,0.65); font-size:14px; position:relative; } .empty-state{ text-align:center; padding: 64px 20px; color: var(--gray-500); } .empty-state .icon{ font-size:42px; margin-bottom:16px; color: var(--gray-300); } .qty-control{ display:flex; align-items:center; gap:10px; } .qty-control button{ width:32px;height:32px; border-radius:50%; border:1.5px solid var(--gray-300); background:#fff; font-weight:700; } .qty-control input{ width:44px; text-align:center; border:none; font-weight:700; } .action-icons{ display:flex; gap:8px; } .action-icons a, .action-icons button{ width:34px;height:34px; border-radius:9px; background: var(--gray-100); display:flex; align-items:center; justify-content:center; transition: var(--transition); border:none; color: var(--gray-900); } .action-icons a:hover{ background: var(--ink); color:#fff; } .action-icons .danger:hover{ background: var(--red); color:#fff; } /* For table cells with labeled buttons (e.g. "Manage" / "Log Service") — NOT icon-only squares, so they must NOT inherit the fixed 34x34 sizing above (that was squashing the text and causing it to overlap). */ .action-buttons{ display:flex; gap:8px; flex-wrap:wrap; } .action-buttons .btn{ white-space:nowrap; } .page-header{ background: var(--ink); color:#fff; padding: 64px 0 50px; position:relative; overflow:hidden; } .page-header::before{ content:''; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%, rgba(200,30,47,0.4), transparent 55%); } .page-header h1{ color:#fff; position:relative; font-size: clamp(28px,3.6vw,40px); } .breadcrumb{ color: rgba(255,255,255,0.55); font-size:13.5px; margin-top:12px; position:relative; } .breadcrumb a{ color: rgba(255,255,255,0.8); } .breadcrumb a:hover{ color: var(--red-light); } .step-row{ display:flex; align-items:center; gap:0; margin-bottom: 40px; flex-wrap:wrap; } .step{ display:flex; align-items:center; gap:10px; color: var(--gray-500); font-weight:600; font-size:14px; } .step .num{ width:30px;height:30px; border-radius:50%; background: var(--gray-100); display:flex; align-items:center; justify-content:center; font-weight:700; } .step.active{ color: var(--ink); } .step.active .num{ background: var(--red); color:#fff; } .step-divider{ width:50px; height:2px; background: var(--gray-300); margin:0 14px; } .cart-row{ display:grid; grid-template-columns: 80px 1fr auto auto auto; gap:18px; align-items:center; padding: 18px 0; border-bottom:1px solid var(--gray-100); } .cart-row img{ width:70px;height:70px; object-fit:cover; border-radius: 10px; background: var(--gray-100); } @media (max-width:700px){ .cart-row{ grid-template-columns: 60px 1fr; } } .summary-box{ background: var(--gray-100); border-radius: var(--radius); padding: 28px; } .summary-row{ display:flex; justify-content:space-between; margin-bottom:14px; font-size:14.5px; } .summary-total{ display:flex; justify-content:space-between; padding-top:18px; border-top:1.5px dashed var(--gray-300); font-weight:800; font-size:18px; font-family:'Poppins',sans-serif; } .modal-overlay{ position:fixed; inset:0; background:rgba(20,21,26,0.6); display:none; align-items:center; justify-content:center; z-index:2000; padding:20px; } .modal-overlay.open{ display:flex; } .modal-box{ background:#fff; border-radius: var(--radius); padding: 32px; max-width: 560px; width:100%; max-height:88vh; overflow-y:auto; box-shadow: var(--shadow-lg); } .modal-box.wide{ max-width: 720px; } .modal-close{ float:right; background:none; border:none; font-size:22px; color:var(--gray-500); } .mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mt-2{margin-top:16px}.mt-3{margin-top:24px} .flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:12px} .text-muted{color:var(--gray-500)}.text-sm{font-size:13px}.fw-700{font-weight:700} /* ========================================================== TEMPLATE UPGRADE — stats band, process steps, testimonials, brand strip, diagonal CTA, richer placeholders ========================================================== */ /* Nicer placeholder for products/blog with no uploaded image yet, instead of a bare icon floating in an empty gray box. */ .thumb-placeholder{ width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; background: repeating-linear-gradient(135deg, rgba(20,21,26,0.05) 0 2px, transparent 2px 14px), linear-gradient(135deg, var(--gray-100), var(--gray-200)); color: var(--gray-500); } .thumb-placeholder i{ font-size:38px; color: var(--gray-300); } .thumb-placeholder span{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color: var(--gray-500); } /* ===================== STATS BAND ===================== */ .stats-band{ background: var(--ink); position:relative; overflow:hidden; padding: 46px 0; border-top: 4px solid var(--red); border-bottom: 4px solid var(--red); } .stats-band::before{ content:''; position:absolute; inset:0; opacity:0.5; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.035) 0 12px, transparent 12px 24px); } .stats-row{ position:relative; display:grid; grid-template-columns: repeat(4,1fr); gap: 20px; } .stats-item{ text-align:center; color:#fff; } .stats-item i{ font-size:26px; color: var(--yellow); margin-bottom:12px; } .stats-item b{ display:block; font-family:'Poppins',sans-serif; font-size: 34px; font-weight:800; letter-spacing:-0.02em; } .stats-item span{ font-size:12.5px; color: rgba(255,255,255,0.55); text-transform:uppercase; letter-spacing:0.06em; } @media (max-width:760px){ .stats-row{ grid-template-columns: repeat(2,1fr); gap:30px; } } /* ===================== PROCESS STEPS ===================== */ .process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; counter-reset: step; } .process-item{ position:relative; padding: 32px 26px 26px; background:#fff; border-radius: var(--radius); border:1px solid var(--gray-200); transition: var(--transition); } .process-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); } .process-item .step-num{ position:absolute; top:-18px; left:26px; width:38px; height:38px; border-radius:50%; background: var(--red); color:#fff; font-family:'Poppins',sans-serif; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 18px rgba(200,30,47,0.35); } .process-item i.process-icon{ font-size:26px; color: var(--red); margin: 10px 0 16px; display:block; } .process-item h3{ font-size:16.5px; margin-bottom:8px; } .process-item p{ font-size:13.5px; } @media (max-width:900px){ .process-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:560px){ .process-grid{ grid-template-columns: 1fr; } } /* ===================== BRAND STRIP ===================== */ .brand-strip{ padding: 34px 0; border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); } .brand-strip-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 22px 34px; } .brand-strip-label{ font-family:'Poppins',sans-serif; font-weight:700; font-size:12.5px; color:var(--gray-500); text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; } .brand-pill{ font-family:'Poppins',sans-serif; font-weight:800; font-size:16px; color: var(--gray-300); letter-spacing:0.01em; transition: var(--transition); } .brand-pill:hover{ color: var(--ink); } /* ===================== TESTIMONIALS ===================== */ .testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; } .testimonial-card{ background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); padding: 30px 26px; box-shadow: var(--shadow-sm); position:relative; transition: var(--transition); } .testimonial-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); } .testimonial-card .stars{ color: var(--gold); font-size:13px; margin-bottom:14px; letter-spacing:2px; } .testimonial-card p{ color: var(--gray-900); font-size:14.5px; line-height:1.8; margin-bottom:20px; } .testimonial-person{ display:flex; align-items:center; gap:12px; } .testimonial-person img{ width:44px; height:44px; border-radius:50%; object-fit:cover; } .testimonial-person b{ display:block; font-family:'Poppins',sans-serif; font-size:13.5px; } .testimonial-person span{ font-size:12px; color: var(--gray-500); } .testimonial-card .quote-mark{ position:absolute; top:22px; right:26px; font-size:32px; color: var(--gray-100); } @media (max-width:900px){ .testimonial-grid{ grid-template-columns: 1fr; } } /* ===================== DIAGONAL CTA BAND ===================== */ .cta-diagonal{ position:relative; background: linear-gradient(120deg, var(--red-dark) 0%, var(--red) 55%, #E24C40 100%); overflow:hidden; padding: 56px 0; } .cta-diagonal::before{ content:''; position:absolute; inset:0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.09) 0 16px, transparent 16px 32px); } .cta-diagonal-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; } .cta-diagonal h2{ color:#fff; font-size: clamp(22px,2.6vw,30px); margin-bottom:8px; } .cta-diagonal p{ color: rgba(255,255,255,0.88); font-size:14.5px; } /* ===================== TOP INFO BAR ===================== */ .topbar{ background: var(--ink); color: rgba(255,255,255,0.78); font-size:12.5px; } .topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding: 9px 0; gap:14px; flex-wrap:wrap; } .topbar-left, .topbar-right{ display:flex; align-items:center; gap:20px; } .topbar-left i, .topbar-right i{ color: var(--yellow); margin-right:5px; } .topbar-right{ gap:16px; } .topbar-right a{ color: rgba(255,255,255,0.85); transition: var(--transition); } .topbar-right a:hover{ color: var(--red-light); } @media (max-width: 760px){ .topbar-hide-sm{ display:none; } } @media (max-width: 560px){ .topbar-left span:first-child{ max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } } /* ===================== WHATSAPP FLOAT ===================== */ .whatsapp-float{ position:fixed; bottom:26px; right:26px; width:58px; height:58px; border-radius:50%; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; font-size:28px; box-shadow: 0 10px 26px rgba(37,211,102,0.5); z-index: 900; transition: var(--transition); } .whatsapp-float:hover{ transform: translateY(-4px) scale(1.05); } /* ===================== PRODUCT PAGE CONTACT ROW ===================== */ .contact-strip{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background: var(--gray-100); border-radius: var(--radius-sm); padding: 16px 20px; margin-top:18px; } .contact-strip .cs-left{ display:flex; align-items:center; gap:12px; } .contact-strip .cs-left i{ font-size:20px; color: var(--red); } .contact-strip .cs-left b{ display:block; font-family:'Poppins',sans-serif; font-size:14px; } .contact-strip .cs-left span{ font-size:12.5px; color: var(--gray-500); } .contact-strip .cs-social{ display:flex; gap:8px; } .contact-strip .cs-social a{ width:36px;height:36px;border-radius:50%; background:#fff; border:1px solid var(--gray-300); display:flex; align-items:center; justify-content:center; transition: var(--transition); color: var(--ink); } .contact-strip .cs-social a:hover{ background: var(--ink); color:#fff; border-color: var(--ink); } /* Hazard stripe accent bar — classic workshop-signage touch */ .hazard-stripe{ height: 7px; background: repeating-linear-gradient(45deg, var(--yellow) 0 16px, var(--ink) 16px 32px); } /* Section divider (angled edge, classic workshop-template touch) */ .angled-divider{ height: 46px; background: var(--white); position:relative; margin-top:-46px; clip-path: polygon(0 100%, 100% 0, 100% 100%); } /* ===================== BOOKING PAGE ===================== */ .booking-grid{ display:grid; grid-template-columns: 1.7fr 1fr; gap:32px; align-items:start; } .booking-step{ background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); padding:26px; margin-bottom:22px; box-shadow: var(--shadow-sm); } .booking-step-label{ display:flex; align-items:center; gap:12px; font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; margin-bottom:18px; } .step-dot{ width:30px;height:30px;border-radius:50%; background: var(--red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; } .service-picker{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; } .service-pick-card{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:20px 14px; border:1.5px solid var(--gray-200); border-radius: var(--radius-sm); cursor:pointer; transition: var(--transition); } .service-pick-card input{ position:absolute; opacity:0; } .service-pick-card i{ font-size:24px; color: var(--red); } .service-pick-card b{ font-size:13.5px; font-family:'Poppins',sans-serif; } .service-pick-card span{ font-size:12.5px; color: var(--gray-500); } .service-pick-card:hover{ border-color: var(--red-light); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .service-pick-card.selected{ border-color: var(--red); background: #FEF1F1; box-shadow: 0 0 0 3px rgba(200,30,47,0.12); } @media (max-width:640px){ .service-picker{ grid-template-columns: repeat(2,1fr); } } .new-vehicle-box{ background: var(--gray-100); border-radius: var(--radius-sm); padding:18px; margin-bottom:14px; } .booking-summary{ background: var(--ink); color:#fff; border-radius: var(--radius); padding:28px; position:sticky; top:20px; } .booking-summary h3{ color:#fff; font-size:16.5px; margin-bottom:18px; display:flex; align-items:center; gap:8px; } .booking-summary-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; font-size:14px; color: rgba(255,255,255,0.8); } .booking-summary-row b{ color:#fff; font-family:'Poppins',sans-serif; } .booking-summary hr{ border:none; border-top:1px solid rgba(255,255,255,0.12); margin:14px 0; } .booking-summary p{ color: rgba(255,255,255,0.65); } .booking-summary i{ color: var(--yellow); width:16px; } .btn-lg{ padding:17px 34px; font-size:15px; } @media (max-width: 900px){ .booking-grid{ grid-template-columns: 1fr; } .booking-summary{ position:static; } } /* ===================== ADMIN: HERO SLIDE MANAGER ===================== */ .hero-slide-manager{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap:14px; margin-bottom:20px; } .hero-slide-thumb{ position:relative; border-radius: var(--radius-sm); overflow:hidden; height:110px; background: var(--gray-100); border:1px solid var(--gray-200); } .hero-slide-thumb img{ width:100%; height:100%; object-fit:cover; } .hero-slide-caption{ position:absolute; left:0; right:0; bottom:0; padding:6px 8px; font-size:11px; color:#fff; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hero-slide-thumb form{ position:absolute; top:6px; right:6px; } .hero-slide-delete{ width:26px;height:26px;border-radius:50%; background:rgba(17,18,23,0.7); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:11px; transition: var(--transition); } .hero-slide-delete:hover{ background: var(--red); } .hero-upload-form{ border-top:1px solid var(--gray-200); padding-top:16px; } /* Plain, clean product photo frame (replaces the old 3D-tilt viewer) */ .product-photo-frame{ height:380px; border-radius: var(--radius); position:relative; overflow:hidden; background: var(--gray-100); box-shadow: var(--shadow-sm); display:flex; align-items:center; justify-content:center; } .product-photo-frame img{ width:100%; height:100%; object-fit:cover; } /* ===================== ADMIN: SIZE CHIPS ===================== */ .chip-list{ display:flex; flex-wrap:wrap; gap:8px; } .chip{ display:inline-flex; align-items:center; gap:8px; background: var(--gray-100); border:1px solid var(--gray-200); border-radius:999px; padding:7px 8px 7px 14px; font-size:13px; font-weight:500; } .chip button{ width:20px;height:20px;border-radius:50%; background:var(--gray-300); border:none; color:#fff; font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: var(--transition); } .chip button:hover{ background: var(--red); } /* Brand logo chip shown on product cards, when the admin has uploaded one */ .brand-logo-chip{ height:32px; max-width:130px; object-fit:contain; display:block; } /* ===================== NAV: ESHOP DROPDOWN (2-tier menu) ===================== */ .nav-dropdown{ position:relative; } .nav-dropdown > a{ display:flex; align-items:center; gap:6px; } .nav-dropdown-menu{ position:absolute; top: calc(100% + 12px); left:50%; transform: translateX(-50%) translateY(8px); background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border:1px solid var(--gray-200); min-width:230px; padding:10px; opacity:0; visibility:hidden; transition: var(--transition); z-index:200; } .nav-dropdown:hover .nav-dropdown-menu{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); } .nav-dropdown-menu a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:13.5px; font-weight:500; color: var(--gray-900); text-transform:none; letter-spacing:0; } .nav-dropdown-menu a:hover{ background: var(--gray-100); } .nav-dropdown-menu a i{ color: var(--red); width:16px; text-align:center; } .nav-dropdown-menu a span{ margin-left:auto; font-size:11px; color: var(--gray-500); font-weight:400; } .nav-dropdown-divider{ height:1px; background: var(--gray-200); margin:8px 4px; } @media (max-width: 980px){ .nav-dropdown-menu{ position:static; transform:none; opacity:1; visibility:visible; box-shadow:none; border:none; display:none; margin-left:20px; } .nav-dropdown.open .nav-dropdown-menu{ display:block; } } /* ===================== FINDER BOX (battery/tyre finder pages) ===================== */ .finder-box{ background: var(--ink); border-radius: var(--radius); padding: 30px 32px; color:#fff; margin-bottom:10px; box-shadow: var(--shadow-md); } .finder-box h3{ color:#fff; font-size:17px; margin-bottom:18px; display:flex; align-items:center; gap:10px; } .finder-box h3 i{ color: var(--yellow); } .finder-box label{ color: rgba(255,255,255,0.7); } .finder-box .form-control{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color:#fff; } .finder-box .form-control option{ color: var(--ink); } /* ===================== CONTACT PAGE ===================== */ .contact-grid{ display:grid; grid-template-columns: 1fr 1.2fr; gap:50px; align-items:start; } /* ===================== BRANCH CARDS (2 locations) ===================== */ .branch-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; } .branch-card{ background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); transition: var(--transition); } .branch-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .branch-map{ line-height:0; } .branch-body{ padding:24px; } .branch-body h3{ font-size:18px; margin-bottom:14px; display:flex; align-items:center; gap:10px; } .branch-body h3 i{ color: var(--red); } .branch-body p{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color: var(--gray-700); margin-bottom:8px; } .branch-body p i{ color: var(--red); width:16px; margin-top:3px; } @media (max-width:760px){ .branch-grid{ grid-template-columns: 1fr; } } /* ===================== ADMIN: BATTERY FITMENT CHECKLIST ===================== */ .fitment-checklist{ max-height:260px; overflow-y:auto; border:1px solid var(--gray-200); border-radius: var(--radius-sm); padding:14px; background: var(--gray-100); } .fitment-make-group{ margin-bottom:14px; } .fitment-make-group b{ display:block; font-family:'Poppins',sans-serif; font-size:13px; margin-bottom:8px; color: var(--ink); } .fitment-make-group label{ display:block; font-weight:400; font-size:13px; padding:5px 0 5px 4px; cursor:pointer; } .fitment-make-group input{ margin-right:8px; } /* ===================== YELLOW CTA BUTTON (View Detail / Search) ===================== */ .btn-yellow{ background: var(--yellow); color: var(--ink); border-color: var(--yellow); } .btn-yellow:hover{ background: var(--yellow-dark); border-color: var(--yellow-dark); transform: translateY(-2px); } .btn-yellow:disabled{ background: #F0DFA0; color: #A79358; border-color:#F0DFA0; } /* ===================== FINDER TABS (Make & Model / Size toggle card) ===================== */ .finder-tabs{ display:grid; grid-template-columns: 1fr 1fr; } .finder-tab-btn{ padding: 22px; text-align:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:17px; cursor:pointer; transition: var(--transition); border:none; } .finder-tab-btn.active{ background: var(--red); color:#fff; } .finder-tab-btn:not(.active){ background: var(--gray-200); color: var(--gray-700); } .finder-tab-panel{ display:none; padding: 30px 32px; background:#fff; } .finder-tab-panel.active{ display:block; } .finder-card{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg); margin-top:-40px; position:relative; z-index:2; } /* ===================== FINDER PAGE HERO (battery/tyre finder) ===================== */ .finder-hero{ background: linear-gradient(120deg, var(--ink) 0%, #2a1414 100%); color:#fff; padding: 70px 0 100px; text-align:center; position:relative; overflow:hidden; } .finder-hero::before{ content:''; position:absolute; inset:0; opacity:0.06; pointer-events:none; background-image: repeating-linear-gradient(115deg, #fff 0 1px, transparent 1px 90px); } .finder-hero h1{ position:relative; color:#fff; font-size: clamp(28px,4vw,44px); margin-bottom:14px; } .finder-hero p{ position:relative; color: rgba(255,255,255,0.7); font-size:15.5px; max-width:520px; margin:0 auto; } .finder-actions{ display:flex; justify-content:flex-end; gap:12px; margin-top:8px; } @media (max-width:640px){ .finder-actions{ justify-content:stretch; } .finder-actions .btn{ flex:1; } } /* ===================== SHOP: category bar + filter sidebar ===================== */ .shop-cat-bar{ background: var(--gray-100); border-bottom:1px solid var(--gray-200); } .shop-cat-bar-inner{ display:flex; align-items:center; gap:30px; height:54px; overflow-x:auto; } .shop-cat-bar-inner a{ font-size:14px; font-weight:500; color: var(--gray-900); white-space:nowrap; padding:4px 0; border-bottom:2px solid transparent; } .shop-cat-bar-inner a:hover, .shop-cat-bar-inner a.active{ color: var(--red); border-bottom-color: var(--red); } .shop-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 28px; align-items:start; } .shop-sidebar .card{ padding:18px; } @media (max-width: 900px){ .shop-layout{ grid-template-columns: 1fr; } } .tyre-diagram-box{ margin-bottom:18px; border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--gray-200); } .tyre-diagram-header{ background: var(--gray-700); color:#fff; font-size:13px; font-weight:600; text-align:center; padding:10px; } .filter-accordion{ border-top:1px solid var(--gray-200); padding: 12px 0; } .filter-accordion summary{ cursor:pointer; font-weight:600; font-size:14px; display:flex; align-items:center; justify-content:space-between; list-style:none; } .filter-accordion summary::-webkit-details-marker{ display:none; } .filter-accordion summary::after{ content:'\f107'; font-family:'Font Awesome 6 Free'; font-weight:900; color: var(--gray-500); } .filter-accordion[open] summary::after{ content:'\f106'; } .filter-count{ background: var(--red); color:#fff; font-size:10px; border-radius:999px; padding:1px 7px; margin-left:8px; } .filter-options{ display:flex; flex-direction:column; gap:8px; margin-top:12px; max-height:180px; overflow-y:auto; } .filter-options label{ font-size:13.5px; font-weight:400; display:flex; align-items:center; gap:8px; cursor:pointer; } /* ===================== CATEGORY PAGE: BRANDS ===================== */ .brand-logo-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap:24px; align-items:center; } .brand-logo-tile{ background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-sm); height:90px; display:flex; align-items:center; justify-content:center; padding:16px; transition: var(--transition); } .brand-logo-tile:hover{ box-shadow: var(--shadow-sm); transform: translateY(-3px); } .brand-logo-tile img{ max-width:100%; max-height:100%; object-fit:contain; } .brand-logo-text{ font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; color: var(--gray-700); } /* ===================== CATEGORY PAGE: SERVICES WITH PHOTOS ===================== */ .service-photo-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:28px; } .service-photo-card{ display:flex; flex-direction:column; } .service-photo-thumb{ height:220px; border-radius: var(--radius-sm); overflow:hidden; margin-bottom:16px; background: var(--gray-100); } .service-photo-thumb img{ width:100%; height:100%; object-fit:cover; } .service-photo-card h3{ font-size:18px; margin-bottom:8px; } .service-photo-card p{ color: var(--gray-700); font-size:14px; line-height:1.7; margin-bottom:10px; } .service-photo-price{ font-family:'Poppins',sans-serif; font-weight:700; color: var(--red); font-size:14.5px; } @media (max-width:900px){ .service-photo-grid{ grid-template-columns: repeat(2,1fr); } } @media (max-width:640px){ .service-photo-grid{ grid-template-columns: 1fr; } } /* ===================== ADMIN: PAGINATION ===================== */ .pagination{ display:flex; gap:6px; flex-wrap:wrap; padding:16px 20px; border-top:1px solid var(--gray-200); } .pagination a{ width:34px;height:34px;border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; background: var(--gray-100); color: var(--gray-900); transition: var(--transition); } .pagination a:hover{ background: var(--gray-200); } .pagination a.active{ background: var(--ink); color:#fff; } .text-right{ text-align:right; } /* ===================== NOTIFICATION BELL ===================== */ .dash-topbar-right{ display:flex; align-items:center; gap:16px; } .notif-bell{ position:relative; } .notif-dropdown{ position:absolute; top:calc(100% + 12px); right:0; width:320px; max-height:420px; overflow-y:auto; background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); border:1px solid var(--gray-200); opacity:0; visibility:hidden; transform: translateY(8px); transition: var(--transition); z-index:500; } .notif-dropdown.open{ opacity:1; visibility:visible; transform: translateY(0); } .notif-dropdown-header{ padding:14px 16px; font-weight:700; font-size:13.5px; border-bottom:1px solid var(--gray-200); display:flex; justify-content:space-between; align-items:center; } .notif-dropdown-header a{ font-size:12px; font-weight:500; color: var(--red); } .notif-empty{ padding:30px 16px; text-align:center; color: var(--gray-500); font-size:13.5px; } .notif-item{ display:flex; flex-direction:column; gap:2px; padding:12px 16px; border-bottom:1px solid var(--gray-100); transition: var(--transition); } .notif-item:hover{ background: var(--gray-100); } .notif-item.unread{ background: #FEF6F6; } .notif-item b{ font-size:13.5px; font-family:'Poppins',sans-serif; } .notif-item span{ font-size:12.5px; color: var(--gray-700); } .notif-item small{ font-size:11px; color: var(--gray-500); } /* ===================== CUSTOMER DASHBOARD: WELCOME BAR ===================== */ .dash-welcome-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius); padding:20px 24px; margin-bottom:20px; } .dash-welcome-bar h3{ font-size:16.5px; margin-bottom:3px; } /* ===================== REVIEWS: fallback avatar (initials) ===================== */ .testimonial-avatar-fallback{ width:44px; height:44px; border-radius:50%; background: var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Poppins',sans-serif; font-weight:700; font-size:16px; } /* ===================== PRODUCT PAGE: PHOTO GALLERY STRIP ===================== */ .product-gallery-strip{ display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px; scrollbar-width: thin; } .product-gallery-strip::-webkit-scrollbar{ height:6px; } .product-gallery-strip::-webkit-scrollbar-thumb{ background: var(--gray-300); border-radius:999px; } .gallery-thumb{ flex: 0 0 auto; width:72px; height:72px; border-radius: var(--radius-sm); overflow:hidden; border: 2px solid var(--gray-200); background: var(--gray-100); padding:0; cursor:pointer; transition: var(--transition); } .gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; } .gallery-thumb:hover{ border-color: var(--gray-300); } .gallery-thumb.active{ border-color: var(--red); } /* ===================== PRODUCT IMAGE ZOOM LIGHTBOX ===================== */ .image-zoom-overlay{ position: fixed; inset:0; background: rgba(17,18,23,0.92); z-index:2000; display:flex; align-items:center; justify-content:center; padding:40px; opacity:0; visibility:hidden; transition: var(--transition); cursor:zoom-out; } .image-zoom-overlay.open{ opacity:1; visibility:visible; } .image-zoom-overlay img{ max-width:100%; max-height:100%; border-radius:8px; box-shadow: var(--shadow-lg); cursor:default; } .image-zoom-close{ position:absolute; top:20px; right:26px; width:44px; height:44px; border-radius:50%; background: rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); color:#fff; font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition: var(--transition); } .image-zoom-close:hover{ background: var(--red); border-color: var(--red); }