/* ════════════════════════════════════════════════════════════ HOMEPAGE — Best Angle Grinder ════════════════════════════════════════════════════════════ */ :root { --p: #F66526; --p-txt: #C4460F; /* accessible green for text on light grounds */ --p-d: #C4460F; --p-l: #FEE3D6; --acc: #1F6FB2; --acc-d: #2A82C9; --dark: #262D35; --dark2: #313A44; --mid: #494E53; --muted: #5E6367; --border: #DEDFE0; --surface: #F5F5F6; --white: #ffffff; --shadow: 0 2px 12px rgba(0,0,0,0.07); --shadow-lg: 0 12px 40px rgba(0,0,0,0.13); --r: 12px; --r-lg: 20px; } /* ── Scroll-reveal base ── Scoped to .js (set on in the head) so the page is never left blank if JavaScript fails to run. */ .js .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.65s ease, transform 0.65s ease; } .js .reveal.visible { opacity: 1; transform: translateY(0); } .js .reveal-left { opacity: 0; transform: translateX(-36px); transition: opacity 0.65s ease, transform 0.65s ease; } .js .reveal-left.visible { opacity: 1; transform: translateX(0); } .js .reveal-right { opacity: 0; transform: translateX(36px); transition: opacity 0.65s ease, transform 0.65s ease; } .js .reveal-right.visible { opacity: 1; transform: translateX(0); } .js .reveal-delay-1 { transition-delay: 0.1s; } .js .reveal-delay-2 { transition-delay: 0.2s; } .js .reveal-delay-3 { transition-delay: 0.3s; } .js .reveal-delay-4 { transition-delay: 0.4s; } .js .reveal-delay-5 { transition-delay: 0.5s; } .js .reveal-delay-6 { transition-delay: 0.6s; } .js .reveal-delay-7 { transition-delay: 0.7s; } .js .reveal-delay-8 { transition-delay: 0.8s; } /* ── Section wrapper ── */ .hp-section { padding: 80px 20px; } .hp-section-inner { max-width: 1260px; margin: 0 auto; } .hp-section-label { display: inline-flex; align-items: center; gap: 7px; background: var(--p-l); color: var(--p); font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; margin-bottom: 14px; } .hp-section-title { font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--dark); margin: 0 0 12px; letter-spacing: -0.5px; line-height: 1.15; } .hp-section-sub { font-size: 1.02rem; color: var(--muted); margin: 0 0 40px; line-height: 1.6; } .hp-section-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 36px; } .hp-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; font-weight: 700; color: var(--p); text-decoration: none; white-space: nowrap; transition: gap 0.2s; } .hp-view-all:hover { gap: 10px; color: var(--p-d); } /* ── Buttons ── */ .btn-primary { display: inline-flex; align-items: center; gap: 9px; background: var(--p); color: #262D35; padding: 15px 32px; border-radius: 30px; font-weight: 700; font-size: 0.97rem; text-decoration: none; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 16px rgba(246, 101, 38,0.25); } .btn-primary:hover { background: var(--p-d); transform: translateY(-2px); color:#fff; box-shadow: 0 8px 24px rgba(246, 101, 38,0.32); } .btn-ghost { display: inline-flex; align-items: center; gap: 9px; background: transparent; color: #fff; padding: 15px 32px; border-radius: 30px; font-weight: 700; font-size: 0.97rem; text-decoration: none; border: 2px solid rgba(255,255,255,0.38); transition: border-color 0.2s, background 0.2s; } .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.1); color:#fff; } .btn-accent { display: inline-flex; align-items: center; gap: 9px; background: var(--acc); color: #fff; padding: 15px 32px; border-radius: 30px; font-weight: 700; font-size: 0.97rem; text-decoration: none; transition: background 0.2s, transform 0.2s; box-shadow: 0 4px 16px rgba(232,163,61,0.3); } .btn-accent:hover { background: var(--acc-d); transform: translateY(-2px); color:#fff; } /* ════════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════════ */ .hp-hero { position: relative; background: linear-gradient(135deg, #1A1F25 0%, #262D35 45%, #5E6367 100%); min-height: 88vh; display: flex; align-items: center; overflow: hidden; padding: 100px 20px 80px; } /* Animated background grid */ .hp-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(246, 101, 38,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 101, 38,0.08) 1px, transparent 1px); background-size: 48px 48px; animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { background-position: 0 0; } 100% { background-position: 48px 48px; } } /* Glowing orbs */ .hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; } .hero-orb-1 { width: 600px; height: 600px; background: rgba(246, 101, 38,0.18); top: -200px; right: -100px; animation: orbFloat 8s ease-in-out infinite; } .hero-orb-2 { width: 400px; height: 400px; background: rgba(232,163,61,0.10); bottom: -100px; left: 10%; animation: orbFloat 10s ease-in-out infinite reverse; } @keyframes orbFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.05); } } .hp-hero-inner { position: relative; max-width: 1260px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* Hero text */ .hero-text-block { color: #fff; } .hero-tag { display: inline-flex; align-items: center; gap: 8px; background: rgba(246, 101, 38,0.25); border: 1px solid rgba(246, 101, 38,0.5); color: #FDC6AC; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 20px; margin-bottom: 22px; } .hero-tag i { font-size: 0.7rem; } .hero-h1 { font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 900; line-height: 1.08; letter-spacing: -1.5px; margin: 0 0 22px; color: #fff; } .hero-h1 em { font-style: normal; background: linear-gradient(90deg, #F66526, #FDC6AC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: 1.1rem; color: #9E9FA1; line-height: 1.7; margin: 0 0 32px; max-width: 480px; } .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; } .hero-stats-row { display: flex; gap: 32px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 28px; } .hero-stat { display: flex; flex-direction: column; gap: 4px; } .hero-stat-num { font-size: 1.7rem; font-weight: 900; color: #fff; letter-spacing: -0.5px; line-height: 1; } .hero-stat-num span { color: var(--acc); } .hero-stat-label { font-size: 0.78rem; color: #5E6367; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Hero product showcase */ .hero-showcase { position: relative; } .hero-showcase-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; border-radius: 20px; overflow: hidden; } .hero-showcase-item { position: relative; aspect-ratio: 4/3; overflow: hidden; background: #313A44; } .hero-showcase-item:first-child { grid-column: 1 / 3; /* Source photos are square (800x800). A 16/9 slot cropped away the top and bottom third of the product; 2/1 keeps the wide feel with a gentler crop. */ aspect-ratio: 2/1; } .hero-showcase-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .hero-showcase-item:hover img { transform: scale(1.06); } .hero-showcase-item-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%); display: flex; align-items: flex-end; padding: 14px; opacity: 0; transition: opacity 0.3s; } .hero-showcase-item:hover .hero-showcase-item-overlay { opacity: 1; } .hero-showcase-item-price { color: #fff; font-size: 1rem; font-weight: 800; } .hero-showcase-badge { position: absolute; top: -12px; right: -12px; background: var(--acc); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 20px; border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; box-shadow: 0 4px 16px rgba(232,163,61,0.45); animation: pulseBadge 2.5s ease-in-out infinite; z-index: 2; } @keyframes pulseBadge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ════════════════════════════════════════════════════════════ TRUST BAR ════════════════════════════════════════════════════════════ */ .hp-trust-bar { background: var(--dark); padding: 0; overflow: hidden; } .hp-trust-bar-inner { max-width: 1260px; margin: 0 auto; display: flex; } .hp-trust-item { flex: 1; display: flex; align-items: center; gap: 14px; padding: 22px 28px; border-right: 1px solid rgba(255,255,255,0.08); min-width: 0; } .hp-trust-item:last-child { border-right: none; } .hp-trust-icon { width: 44px; height: 44px; background: rgba(246, 101, 38,0.25); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #F66526; font-size: 1.1rem; flex-shrink: 0; } .hp-trust-text strong { display: block; font-size: 0.88rem; font-weight: 700; color: #fff; margin-bottom: 2px; } .hp-trust-text span { font-size: 0.78rem; color: #5E6367; } /* ════════════════════════════════════════════════════════════ FEATURED PRODUCTS ════════════════════════════════════════════════════════════ */ .hp-products-section { background: var(--surface); } .hp-prod-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .hp-prod-card { background: var(--white); border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--dark); position: relative; transition: transform 0.22s, box-shadow 0.22s; } .hp-prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--dark); } .hp-prod-img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--surface); } .hp-prod-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .hp-prod-card:hover .hp-prod-img-wrap img { transform: scale(1.05); } .hp-prod-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--border); font-size: 2.5rem; } .hp-prod-badge { position: absolute; top: 10px; left: 10px; background: #dc2626; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: 0.3px; z-index: 2; } .hp-prod-fav { position: absolute; top: 10px; right: 10px; z-index: 3; background: rgba(255,255,255,0.9); border: none; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 0.92rem; transition: color 0.2s; box-shadow: 0 1px 4px rgba(0,0,0,0.12); } .hp-prod-fav:hover, .hp-prod-fav.active { color: #ef4444; } .hp-prod-body { padding: 14px 16px 8px; flex: 1; display: flex; flex-direction: column; gap: 5px; } .hp-prod-name { font-size: 0.88rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hp-prod-size { font-size: 0.77rem; color: var(--muted); } .hp-prod-size i { margin-right: 3px; font-size: 0.72rem; } .hp-prod-pricing { margin-top: auto; padding-top: 8px; } .hp-prod-price { font-size: 1.2rem; font-weight: 800; color: var(--p); } .hp-prod-was { font-size: 0.78rem; color: var(--muted); text-decoration: line-through; margin-left: 5px; } .hp-prod-cta { display: block; margin: 10px 14px 14px; background: var(--p); color: #262D35; text-align: center; padding: 9px; border-radius: 8px; font-size: 0.84rem; font-weight: 700; text-decoration: none; transition: background 0.2s; } .hp-prod-cta:hover { background: var(--p-d); color: #fff; } /* ════════════════════════════════════════════════════════════ COLLECTIONS ════════════════════════════════════════════════════════════ */ .hp-collections-section { background: var(--white); } .hp-coll-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .hp-coll-card { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; display: block; text-decoration: none; background: var(--dark2); box-shadow: var(--shadow); transition: transform 0.25s, box-shadow 0.25s; } .hp-coll-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: var(--shadow-lg); } .hp-coll-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; position: absolute; inset: 0; } .hp-coll-card:hover .hp-coll-img { transform: scale(1.08); } .hp-coll-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 55%, transparent 100%); } .hp-coll-no-img { position: absolute; inset: 0; background: linear-gradient(135deg, #313A44 0%, #F66526 100%); display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: rgba(255,255,255,0.25); } .hp-coll-body { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px; color: #fff; } .hp-coll-icon-pill { display: inline-flex; align-items: center; gap: 6px; background: rgba(246, 101, 38,0.7); backdrop-filter: blur(6px); border: 1px solid rgba(52,211,153,0.3); color: #FDC6AC; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 12px; margin-bottom: 10px; } .hp-coll-name { font-size: 1.2rem; font-weight: 800; color: #fff; margin: 0 0 6px; letter-spacing: -0.3px; } .hp-coll-count { font-size: 0.8rem; color: rgba(255,255,255,0.65); display: flex; align-items: center; gap: 5px; } .hp-coll-arrow { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; background: rgba(255,255,255,0.15); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; transition: background 0.2s, transform 0.2s; } .hp-coll-card:hover .hp-coll-arrow { background: var(--p); transform: translateX(3px); } /* ════════════════════════════════════════════════════════════ WHY CHOOSE METAL — SPLIT PANEL ════════════════════════════════════════════════════════════ */ .hp-why-section { background: linear-gradient(135deg, var(--dark) 0%, var(--dark2) 60%, #5E6367 100%); color: #fff; /* .hp-why-visual is a .reveal-right, so it sits at translateX(36px) until scrolled into view. It is flush to the right edge, so that offset used to add horizontal page scroll. Clip the animation overshoot here. */ overflow-x: clip; } .hp-why-inner { max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .hp-why-text .hp-section-label { background: rgba(52,211,153,0.15); color: #F66526; border: 1px solid rgba(52,211,153,0.3); } .hp-why-text .hp-section-title { color: #fff; } .hp-why-text .hp-section-sub { color: #9E9FA1; margin-bottom: 32px; } .hp-why-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; } .hp-why-item { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: var(--r); transition: background 0.2s, border-color 0.2s; } .hp-why-item:hover { background: rgba(246, 101, 38,0.15); border-color: rgba(52,211,153,0.25); } .hp-why-icon { width: 40px; height: 40px; background: rgba(246, 101, 38,0.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #F66526; font-size: 1rem; flex-shrink: 0; } .hp-why-item-text strong { display: block; font-size: 0.9rem; font-weight: 700; color: #fff; margin-bottom: 3px; } .hp-why-item-text span { font-size: 0.82rem; color: #9E9FA1; line-height: 1.5; } /* Why — image grid side */ .hp-why-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hp-why-visual-item { border-radius: var(--r); overflow: hidden; aspect-ratio: 4/3; background: var(--dark2); position: relative; } .hp-why-visual-item:first-child { grid-column: 1 / 3; aspect-ratio: 16/8; } .hp-why-visual-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .hp-why-visual-item:hover img { transform: scale(1.04); } .hp-why-visual-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #313A44, #5E6367); color: rgba(255,255,255,0.2); font-size: 2.5rem; } /* ════════════════════════════════════════════════════════════ SALE / BEST VALUE STRIP ════════════════════════════════════════════════════════════ */ .hp-sale-section { background: var(--surface); } .hp-sale-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .hp-sale-card { background: var(--white); border-radius: var(--r); border: 1px solid var(--border); overflow: hidden; text-decoration: none; color: var(--dark); display: flex; flex-direction: column; box-shadow: var(--shadow); position: relative; transition: transform 0.22s, box-shadow 0.22s; } .hp-sale-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--dark); } .hp-sale-img-wrap { aspect-ratio: 4/3; overflow: hidden; background: var(--surface); position: relative; } .hp-sale-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; } .hp-sale-card:hover .hp-sale-img-wrap img { transform: scale(1.05); } .hp-sale-ribbon { position: absolute; top: 14px; left: -6px; background: #dc2626; color: #fff; font-size: 0.78rem; font-weight: 800; padding: 5px 14px 5px 12px; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%); } .hp-sale-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; gap: 6px; } .hp-sale-name { font-size: 0.88rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hp-sale-pricing { display: flex; align-items: baseline; gap: 8px; margin-top: auto; } .hp-sale-now { font-size: 1.35rem; font-weight: 900; color: var(--p); } .hp-sale-was { font-size: 0.82rem; color: var(--muted); text-decoration: line-through; } .hp-sale-saving { font-size: 0.75rem; font-weight: 700; color: #dc2626; background: #fef2f2; padding: 2px 7px; border-radius: 4px; } .hp-sale-cta { display: block; margin: 10px 14px 14px; background: var(--acc); color: #fff; text-align: center; padding: 9px; border-radius: 8px; font-size: 0.84rem; font-weight: 700; text-decoration: none; transition: background 0.2s; } .hp-sale-cta:hover { background: var(--acc-d); color:#fff; } /* ════════════════════════════════════════════════════════════ USP / HOW IT WORKS ════════════════════════════════════════════════════════════ */ .hp-usp-section { background: var(--white); } .hp-usp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; counter-reset: usp; } .hp-usp-card { text-align: center; padding: 36px 20px; background: var(--surface); border-radius: var(--r-lg); border: 1px solid var(--border); position: relative; transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s; counter-increment: usp; } .hp-usp-card::before { content: counter(usp, decimal-leading-zero); position: absolute; top: 18px; left: 20px; font-size: 0.75rem; font-weight: 800; color: var(--p-l); letter-spacing: 0.5px; } .hp-usp-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--p-l); } .hp-usp-icon { width: 64px; height: 64px; background: #FFF3EE; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 1.5rem; color: var(--p); transition: background 0.2s, transform 0.2s; } .hp-usp-card:hover .hp-usp-icon { background: var(--p); color: #262D35; transform: scale(1.1) rotate(-5deg); } .hp-usp-card h3 { font-size: 1rem; font-weight: 800; color: var(--dark); margin: 0 0 10px; } .hp-usp-card p { font-size: 0.85rem; color: var(--muted); line-height: 1.6; margin: 0; } /* ════════════════════════════════════════════════════════════ DARK CTA BANNER ════════════════════════════════════════════════════════════ */ .hp-cta-section { background: linear-gradient(135deg, #1A1F25 0%, #262D35 50%, #5E6367 100%); padding: 100px 20px; text-align: center; position: relative; overflow: hidden; } .hp-cta-section::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(246, 101, 38,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 101, 38,0.06) 1px, transparent 1px); background-size: 40px 40px; } .hp-cta-inner { position: relative; max-width: 680px; margin: 0 auto; } .hp-cta-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(232,163,61,0.15); border: 1px solid rgba(232,163,61,0.35); color: #F0B95C; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 16px; border-radius: 20px; margin-bottom: 24px; } .hp-cta-inner h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; color: #fff; margin: 0 0 16px; letter-spacing: -1px; line-height: 1.1; } .hp-cta-inner h2 em { font-style: normal; background: linear-gradient(90deg, #F66526, #FDC6AC); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hp-cta-inner p { color: #9E9FA1; font-size: 1.05rem; line-height: 1.65; margin: 0 0 36px; } .hp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ── Back to top ── */ .backToTop { position: fixed; bottom: 28px; right: 28px; width: 46px; height: 46px; background: var(--p); color: #262D35; border-radius: 50%; display: none; align-items: center; justify-content: center; text-decoration: none; font-size: 1rem; box-shadow: 0 4px 16px rgba(246, 101, 38,0.4); z-index: 999; transition: background 0.2s, transform 0.2s; } .backToTop:hover { background: var(--p-d); transform: translateY(-3px); color:#fff; } /* ── Hero keyframes ── */ @keyframes fadeDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } /* ════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { /* minmax(0, …) throughout: plain 1fr tracks cannot shrink below their min-content width, which pushed these grids past the viewport. */ .hp-prod-grid, .hp-sale-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hp-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hp-coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .hp-hero-inner { grid-template-columns: 1fr; } .hp-hero { min-height: auto; padding: 80px 20px 60px; } .hero-showcase { display: none; } .hp-why-inner { grid-template-columns: 1fr; gap: 40px; } .hp-why-visual { display: none; } .hp-trust-bar-inner { flex-wrap: wrap; } .hp-trust-item { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,0.08); } } @media (max-width: 640px) { /* One card per row on mobile. minmax(0, …) lets the track shrink below its min-content width — plain 1fr was blowing the grid out past the viewport and letting the page be dragged sideways. */ .hp-prod-grid, .hp-sale-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .hp-coll-grid { grid-template-columns: minmax(0, 1fr); } .hp-usp-grid { grid-template-columns: 1fr; gap: 14px; } .hp-section { padding: 56px 16px; } .hp-trust-item { flex: 0 0 100%; } .hero-stats-row { gap: 20px; } .hero-btns { flex-direction: column; } .hero-btns .btn-primary, .hero-btns .btn-ghost { justify-content: center; } /* USP cards — horizontal row layout on mobile */ .hp-usp-card { text-align: left; padding: 18px 16px; display: flex; align-items: center; gap: 16px; } .hp-usp-card::before { display: none; } .hp-usp-icon { width: 52px; height: 52px; min-width: 52px; flex-shrink: 0; margin: 0; font-size: 1.3rem; } .hp-usp-card h3 { font-size: 0.93rem; margin-bottom: 4px; } .hp-usp-card p { font-size: 0.82rem; margin: 0; } } /* ═══════════════════════════════════════════════════════════ RANKING TOOL — moved from index.php ═══════════════════════════════════════════════════════════ */ /* ════════════════════════════════════ RANKING TOOL ════════════════════════════════════ */ .rl-section { background: #f0f2f5; padding: 52px 20px 72px; } .rl-inner { max-width: 1040px; margin: 0 auto; } .rl-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .rl-h1 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; color: var(--dark); margin: 0 0 6px; letter-spacing: -0.5px; } .rl-header-meta { display: flex; gap: 10px; font-size: 0.76rem; color: var(--muted); align-items: center; flex-wrap: wrap; } .rl-header-meta span { display: inline-flex; align-items: center; gap: 5px; } .rl-header-meta i { color: var(--p); } /* Auto-fitting grid rather than a flex row: each filter gets at least 170px, which is the width the longest option label needs, and any that don't fit wrap to the next line instead of being squeezed and clipped. */ .rl-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 10px; align-items: end; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .rl-filter-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; } /* Sort By carries the longest option text ("Best Value (litres per £)"), so it takes two columns rather than being the one that clips. */ .rl-filter-wide { grid-column: span 2; } .rl-filter-group label { font-size: 0.65rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.9px; } .rl-filter-group select, .rl-filter-group input { width: 100%; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.84rem; background: #F5F5F6; color: var(--dark); outline: none; transition: border-color 0.15s; } /* Leave room for the native dropdown arrow so the label isn't clipped. */ .rl-filter-group select { padding-right: 28px; text-overflow: ellipsis; } .rl-filter-group select:focus, .rl-filter-group input:focus { border-color: var(--p); background: #fff; } .rl-reset-btn { padding: 8px 14px; background: transparent; border: 1.5px solid var(--border); border-radius: 8px; font-size: 0.76rem; font-weight: 700; color: var(--muted); cursor: pointer; justify-self: start; align-self: end; white-space: nowrap; transition: border-color 0.2s, color 0.2s; } .rl-reset-btn:hover { border-color: #dc2626; color: #dc2626; } .rl-count { font-size: 0.78rem; color: var(--muted); margin-bottom: 14px; } /* ── Filter panel ────────────────────────────────────────────── Desktop: the panel is just a passthrough wrapper and the trigger, panel header and apply button are all hidden. Everything that makes it a drawer lives in the 860px block further down. */ .rl-filter-toggle, .rl-panel-head, .rl-panel-apply { display: none; } /* Feature toggles sit under the dropdowns as a single wrapping row. */ .rl-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .rl-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; background: #fff; border: 1.5px solid var(--border); border-radius: 30px; font-size: 0.76rem; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .rl-toggle:hover { border-color: var(--brand-primary); color: var(--text-primary); } /* A toggle that would return nothing is hidden, matching the dropdowns. Kept visible when already ticked so it can always be switched off. */ .rl-toggle-empty { display: none; } /* "Show more": reveals the next page of already-rendered cards. */ .rl-more-wrap { text-align: center; margin-top: 28px; } .rl-more-wrap[hidden] { display: none; } .rl-more-btn { padding: 13px 30px; background: #fff; border: 1.5px solid var(--border); border-radius: 30px; font-size: 0.88rem; font-weight: 800; color: var(--dark); cursor: pointer; transition: border-color 0.2s, color 0.2s, box-shadow 0.2s; } .rl-more-btn:hover { border-color: var(--p); color: var(--p-txt); box-shadow: 0 4px 14px rgba(0,0,0,0.07); } .rl-more-btn i { margin-right: 7px; opacity: 0.7; } .rl-toggle-count { font-variant-numeric: tabular-nums; opacity: 0.75; } .rl-toggle input { accent-color: var(--brand-primary); cursor: pointer; margin: 0; width: 15px; height: 15px; } .rl-toggle i { font-size: 0.8rem; opacity: 0.75; } /* Checked state: :has keeps the styling on the label without extra JS, and browsers without it simply show the unchecked look. */ .rl-toggle:has(input:checked) { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; } .rl-toggle:has(input:checked) i { opacity: 1; } /* Empty state — only revealed when the filters match nothing. */ .rl-empty { text-align: center; padding: 48px 20px; background: #fff; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 20px; } .rl-empty i { font-size: 2rem; color: var(--border); margin-bottom: 12px; display: block; } .rl-empty p { font-size: 0.88rem; color: var(--muted); margin: 0; } .rl-list { display: flex; flex-direction: column; gap: 0; } .rl-item { display: block; text-decoration: none; color: inherit; cursor: pointer; background: #fff; border: 1px solid #e2e6ea; border-radius: 12px; margin-bottom: 14px; position: relative; overflow: hidden; transition: box-shadow 0.18s, transform 0.18s; } .rl-item:hover { box-shadow: 0 6px 28px rgba(0,0,0,0.10); transform: translateY(-2px); } /* Top-rank accent, matched to the badge colour. Keyed off the rank class rather than :nth-child so it stays with the ranked card when sorting or filtering reorders the list. */ .rl-item-rank1 { border-top: 3px solid #F66526; } .rl-item-rank2 { border-top: 3px solid #1F6FB2; } .rl-item-rank3 { border-top: 3px solid #5E6367; } .rl-item.rank-hidden { display: none; } .rl-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; padding: 5px 13px 5px 10px; letter-spacing: 0.2px; position: absolute; top: 0; left: 0; border-radius: 0 0 10px 0; } .rl-badge-blue { background: #F66526; color: #fff; } .rl-badge-amber { background: #1F6FB2; color: #fff; } .rl-badge-purple { background: #5E6367; color: #fff; } .rl-card-body { display: grid; grid-template-columns: 260px minmax(0, 1fr) 210px; grid-template-rows: auto 1fr; align-items: start; padding: 48px 28px 28px; gap: 0; } .rl-card-image { grid-column: 1; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-right: 28px; border-right: 1px solid #f0f0f0; } .rl-rank-num { font-size: 1.1rem; font-weight: 900; color: #cbd5e1; letter-spacing: -0.5px; line-height: 1; font-variant-numeric: tabular-nums; } .rl-img { width: 220px; height: 170px; border-radius: 10px; overflow: hidden; background: #f8fafc; } .rl-img img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 6px; } .rl-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #d1d5db; font-size: 2.8rem; } .rl-card-main { grid-column: 2; grid-row: 2; padding: 0 28px; flex: 1; min-width: 0; } .rl-name { font-size: 1.12rem; font-weight: 700; color: #262D35; margin: 0 0 6px; line-height: 1.4; } /* The title is emitted once as a direct child of the grid (.rl-name-top) so the mobile layout can lift it above the image. On desktop it sits in the centre column, first row — visually identical to when it lived inside .rl-card-main. */ .rl-name-top { grid-column: 2; grid-row: 1; padding: 0 28px; margin: 0 0 6px; min-width: 0; overflow-wrap: anywhere; } .rl-brand { font-size: 0.78rem; color: #5E6367; margin-bottom: 8px; font-weight: 500; } .rl-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .rl-discount-tag { display: inline-flex; align-items: center; background: #dc2626; color: #fff; font-size: 0.72rem; font-weight: 800; padding: 3px 8px; border-radius: 4px; } .rl-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 600; color: #494E53; background: #f3f4f6; border: 1px solid #DEDFE0; padding: 3px 8px; border-radius: 4px; } .rl-tag i { color: var(--p); font-size: 0.65rem; } .rl-bullets-heading { font-size: 0.78rem; font-weight: 700; color: #494E53; margin: 0 0 7px; } .rl-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .rl-bullets li { font-size: 0.84rem; color: #494E53; display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .rl-bullets li::before { content: '\2713'; color: var(--p); font-weight: 700; font-size: 0.78rem; flex-shrink: 0; margin-top: 1px; } .rl-card-right { grid-column: 3; grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-left: 28px; border-left: 1px solid #f0f0f0; text-align: center; } .rl-score-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; width: 100%; } .rl-score-num { font-size: 2.6rem; font-weight: 900; color: #262D35; line-height: 1; letter-spacing: -1px; } .rl-score-label { font-size: 0.75rem; font-weight: 700; color: #C4460F; margin: 4px 0 6px; } .rl-stars { color: #1F6FB2; font-size: 0.82rem; letter-spacing: 2px; } .rl-price-block { width: 100%; } .rl-price { font-size: 1.85rem; font-weight: 900; color: #262D35; line-height: 1; letter-spacing: -0.5px; } .rl-was { font-size: 1rem; color: #9E9FA1; text-decoration: line-through; margin-top: 4px; } .rl-cta { display: flex; align-items: center; justify-content: center; gap: 8px; background: #F66526; color: #fff; font-size: 0.92rem; font-weight: 700; padding: 14px 20px; border-radius: 10px; width: 100%; transition: background 0.15s; box-shadow: 0 3px 12px rgba(246, 101, 38,0.30); } .rl-item:hover .rl-cta { background: #E0541A; } /* ── Filters as a slide-up drawer on mobile ───────────────────── */ @media (max-width: 860px) { /* Trigger: full-width bar above the results. */ .rl-filter-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 16px; margin-bottom: 14px; background: #fff; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.9rem; font-weight: 800; color: var(--dark); cursor: pointer; } .rl-filter-toggle i { color: var(--p); margin-right: 6px; } .rl-filter-toggle-count { background: var(--p); color: #fff; border-radius: 20px; padding: 2px 9px; font-size: 0.72rem; font-weight: 800; } /* Panel: off-screen sheet until .is-open. Flex column so the header and the apply button pin to the top and bottom while only the filters between them scroll. */ .rl-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; max-height: 88vh; display: flex; flex-direction: column; background: #fff; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,0.25); transform: translateY(100%); transition: transform 0.25s ease; visibility: hidden; } .rl-panel.is-open { transform: translateY(0); visibility: visible; } /* Header pinned at the top of the sheet. */ .rl-panel-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 14px 16px 12px; background: #fff; border-bottom: 1px solid var(--border); font-size: 1rem; } .rl-panel-close { background: transparent; border: none; cursor: pointer; font-size: 1.15rem; color: var(--muted); padding: 4px 6px; line-height: 1; } /* The only scrolling region; min-height:0 is required or a flex child refuses to shrink below its content and the sheet overflows instead. */ .rl-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px; } /* Apply button pinned to the bottom, clear of the iOS home indicator. */ .rl-panel-apply { display: block; flex: 0 0 auto; width: auto; margin: 0; padding: 14px; background: var(--p); color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 800; cursor: pointer; } /* Wrapper padding gives the button its gutter and the safe-area inset, with a top border so it reads as a footer bar over scrolled content. */ .rl-panel > .rl-panel-apply { margin: 0 16px calc(16px + env(safe-area-inset-bottom)); margin-top: 12px; } /* Inside the sheet the filter bar is a plain stacked list. */ .rl-panel .rl-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border: none; box-shadow: none; padding: 14px 0 6px; margin: 0; } .rl-panel .rl-filter-group { min-width: 0; } .rl-panel .rl-filters select { width: 100%; } /* 16px stops iOS zooming the page when a select is focused. */ .rl-panel .rl-filter-group select, .rl-panel .rl-filter-group input { font-size: 16px; } /* Reset sits last in the markup (correct for desktop), but on mobile it belongs at the top of the sheet where it is reachable without scrolling past every filter. order:-1 moves it without changing the DOM, so desktop and tab order elsewhere are untouched. */ .rl-panel .rl-reset-btn { grid-column: 1 / -1; width: 100%; padding: 11px; order: -1; margin-bottom: 2px; } .rl-panel .rl-toggles { margin: 10px 0 14px; } /* Backdrop, shown only while the sheet is open. */ .rl-backdrop { position: fixed; inset: 0; z-index: 1199; background: rgba(0,0,0,0.45); opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .rl-backdrop.is-open { opacity: 1; visibility: visible; } /* Page must not scroll behind an open sheet. */ body.rl-no-scroll { overflow: hidden; } } @media (max-width: 460px) { .rl-panel .rl-filters { grid-template-columns: 1fr; } } @media (max-width: 680px) { .rl-card-body { grid-template-columns: 130px minmax(0, 1fr); grid-template-rows: auto auto auto; padding: 40px 16px 16px; } .rl-card-image { grid-column: 1; grid-row: 1 / 3; padding-right: 14px; } .rl-name-top { grid-column: 2; grid-row: 1; padding: 0; } .rl-card-main { grid-column: 2; grid-row: 2; padding: 0; } .rl-card-right { grid-column: 1 / 3; grid-row: 3; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; border-left: none; border-top: 1px solid #f0f0f0; padding: 14px 0 0; margin-top: 14px; gap: 10px; } .rl-score-box { width: auto; padding: 8px 14px; } .rl-price-block { text-align: left; } .rl-cta { width: auto; padding: 10px 20px; } .rl-img { width: 120px; height: 90px; } /* Grid children need min-width:0 or long titles/tags force the column wider. */ .rl-card-main { min-width: 0; } .rl-tag, .rl-discount-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } } @media (max-width: 440px) { /* Single column, visually reordered: title → full-width image → details → buy block. The image comes before the title in the markup, so grid-row does the reordering. */ .rl-card-body { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 0; } /* Badged cards carry an absolutely-positioned trophy ribbon; reserve room for it. Keyed off the badge class, not :nth-child — sorting and filtering move the ranked cards out of the first three DOM positions, which left the ribbon overlapping the title. */ .rl-item-badged .rl-card-body { padding-top: 38px; } /* Title first. */ .rl-name-top { grid-column: 1; grid-row: 1; font-size: 1.05rem; line-height: 1.35; padding: 0; margin: 0 0 12px; } /* Full-bleed image band with rank badge. */ .rl-card-image { grid-column: 1; grid-row: 2; display: block; position: relative; padding: 0; margin: 0 0 12px; border-right: none; } .rl-img { width: 100%; height: 190px; border-radius: 10px; background: #f1f5f9; } .rl-img img { padding: 0; object-fit: cover; } .rl-rank-num { position: absolute; top: -1px; left: -1px; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 42px; height: 34px; padding: 0 10px; font-size: 1.15rem; font-weight: 900; color: #94a3b8; background: rgba(255, 255, 255, 0.94); border-radius: 0 0 8px 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } /* Details section. */ .rl-card-main { grid-column: 1; grid-row: 3; padding: 0; min-width: 0; } /* Long warranty/delivery tags must wrap. */ .rl-card-tags { gap: 5px; } .rl-tag, .rl-discount-tag { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; } /* Buy block: boxed score and price side by side, full-width CTA beneath. minmax(0, 1fr) keeps the halves even regardless of price string length. */ .rl-card-right { grid-column: 1; grid-row: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: 12px; row-gap: 14px; border-left: none; border-top: 1px solid #f0f0f0; padding: 14px 0 0; margin-top: 14px; text-align: center; } .rl-score-box { width: 100%; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } .rl-score-num { font-size: 1.7rem; letter-spacing: -0.5px; } .rl-score-label { font-size: 0.68rem; margin: 2px 0 4px; } .rl-stars { font-size: 0.72rem; letter-spacing: 1px; } .rl-price-block { width: 100%; text-align: center; } .rl-price { font-size: 1.5rem; } .rl-was { font-size: 0.85rem; margin-top: 2px; } /* box-sizing so the padding stays inside the track — the button was rendering wider than the card and clipping at the right edge. */ .rl-cta { grid-column: 1 / -1; width: 100%; padding: 13px 16px; box-sizing: border-box; } /* Two per row on narrow screens — still wide enough for the labels, and it keeps the filter bar from becoming a long single column. */ .rl-filters { padding: 12px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .rl-filter-group { min-width: 0; } /* Only two columns exist here, so the wide span would leave a filter stranded on its own row. */ .rl-filter-wide { grid-column: span 1; } /* Toggles stay on one wrapping row but shrink, so five of them do not push the ranked list off the first screen on a phone. */ .rl-toggle { padding: 6px 10px; font-size: 0.72rem; gap: 6px; } .rl-empty { padding: 32px 16px; } /* Tighten the run-in above the H1 — the desktop 52px reads as dead space on a narrow screen. */ .rl-section { padding: 20px 20px 48px; } .rl-header { margin-bottom: 14px; } } /* ═══════════════════════════════════════════════════════════ HOMEPAGE SEO SECTION — moved from index.php ═══════════════════════════════════════════════════════════ */ .hp-seo-section { background: var(--surface); border-top: 1px solid var(--border); padding: 72px 20px; } .hp-seo-inner { max-width: 1260px; margin: 0 auto; } .hp-seo-grid { display: grid; grid-template-columns: 1fr 280px; gap: 52px; margin-bottom: 52px; } .hp-seo-main h2 { font-size: 1.45rem; font-weight: 800; color: var(--dark); margin: 0 0 16px; letter-spacing: -0.3px; } .hp-seo-main h3 { font-size: 1.05rem; font-weight: 700; color: var(--dark); margin: 28px 0 10px; } .hp-seo-main p { font-size: 0.9rem; color: #4b5563; line-height: 1.75; margin: 0 0 14px; } .hp-seo-main ul { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .hp-seo-main ul li { font-size: 0.88rem; color: #4b5563; line-height: 1.6; } .hp-seo-main strong { color: var(--dark); } .hp-seo-side { display: flex; flex-direction: column; gap: 20px; } .hp-seo-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; } .hp-seo-box h4 { font-size: 0.82rem; font-weight: 800; color: var(--dark); text-transform: uppercase; letter-spacing: 0.8px; margin: 0 0 12px; display: flex; align-items: center; gap: 7px; } .hp-seo-box h4 i { color: var(--p); font-size: 0.78rem; } .hp-seo-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; } .hp-seo-box ul li a { font-size: 0.83rem; color: var(--p); text-decoration: none; transition: color 0.2s; } .hp-seo-box ul li a:hover { color: var(--p-d); text-decoration: underline; } .hp-seo-lower { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-top: 1px solid var(--border); padding-top: 40px; } .hp-seo-lower-col h3 { font-size: 0.97rem; font-weight: 700; color: var(--dark); margin: 0 0 10px; } .hp-seo-lower-col p { font-size: 0.86rem; color: #4b5563; line-height: 1.75; margin: 0; } @media (max-width: 960px) { .hp-seo-grid { grid-template-columns: 1fr; gap: 32px; } .hp-seo-side { flex-direction: row; flex-wrap: wrap; } .hp-seo-box { flex: 1; min-width: 200px; } .hp-seo-lower { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 600px) { .hp-seo-lower { grid-template-columns: 1fr; } .hp-seo-side { flex-direction: column; } }