01
整体样式文件的统一，报错字体，颜色配置，以及字体大小
/*
* ╔══════════════════════════════════════════════════════════════╗
* ANATKH DESIGN SYSTEM
* Shared CSS Foundation — v1.0
* ╠══════════════════════════════════════════════════════════════╣
* Font stack : Montserrat (body / UI)
* Bebas Neue (display / hero / logo)
* Base rem : 1rem ≈ 10px
* html { font-size: calc(0.96 * 62.25%) }
* Architecture: Arken Nimbus 1.8.0 token system
*
* Google Fonts — add to <head>:
* <link href="https://fonts.googleapis.com/css2?
* family=Montserrat:wght@400;500;600;700
* &family=Bebas+Neue
* &display=swap" rel="stylesheet" />
* ╠══════════════════════════════════════════════════════════════╣
* TABLE OF CONTENTS
* ─────────────────────────────────────────────────────────────
* § 1 Reset & Base
* § 2 Design Tokens
* 2a Colour Palette
* 2b Type Scale — Mobile (< 990px)
* 2c Type Scale — Desktop (≥ 990px)
* 2d Font Role Tokens
* § 3 Typography Helpers
* § 4 Layout & Container
* § 5 Buttons
* § 6 Announcement Bar
* § 7 Navigation & Mega Menu
* § 8 Hero
* § 9 Sale / Promotion Banner
* § 10 Category Grid
* § 11 Product Series Carousel
* § 12 Product Cards
* § 13 Guarantee Strip
* § 14 Warranty Banner
* § 15 Reviews
* § 16 HQ / Location
* § 17 Newsletter
* § 18 Footer
* § 19 Contact CTA Card
* § 20 Responsive Breakpoints
* ╚══════════════════════════════════════════════════════════════╝
*/
/* ════════════════════════════════════════════
§ 2a COLOUR PALETTE
─────────────────────────────────────────
Dark zones : nav, footer, hero, warranty
Light zones : body sections (white / cream)
Accent : warm muted brown #8C7B5E
Semantic red : sale badges, NEW, discounts
════════════════════════════════════════════ */
/*
TOKEN REFERENCE
───────────────────────────────────────────────────────
--dark #1C1C1C nav bg, footer bg
--dark2 #242424 footer hover
--dark3 #2E2E2E dark cards
--accent #8C7B5E brand accent (warm brown)
--accent-lt #A89678 accent hover / lighter
--light-bg #FFFFFF primary page bg
--light-bg2 #F5F3EF alternate section bg (cream)
--light-bg3 #EDEBE5 card bg on alternate sections
--light-text #2C2C2C primary text
--light-mid #888580 secondary text / descriptions
--light-muted #A8A39E hints / placeholders
--border #E5E2DB light section borders
--border-dark rgba(255,255,255,0.08) dark zone borders
--red #C0392B sale / discount / NEW badge
───────────────────────────────────────────────────────
*/
/* ════════════════════════════════════════════
§ 2b TYPE SCALE — MOBILE (default)
─────────────────────────────────────────
Base: html { font-size: calc(0.96 * 62.25%) }
→ 1rem ≈ 10px
════════════════════════════════════════════ */
/*
SCALE REFERENCE (mobile → desktop)
─────────────────────────────────────────────────────────────
--size-hxl 4.0rem 40px → 5.6rem 56px hero/display
--size-h0 3.6rem 36px → 4.8rem 48px major titles
--size-h1 3.2rem 32px → 4.0rem 40px page titles
--size-h2 2.8rem 28px → 3.2rem 32px section titles ← h2 default
--size-h3 2.2rem 22px → 2.8rem 28px card headings
--size-h4 1.8rem 18px → 2.2rem 22px price / labels
--size-h5 1.6rem 16px → 1.7rem 17px category names
--size-h6 1.5rem 15px → 1.6rem 16px —
--size-large 1.6rem 16px → 1.75rem 17.5px intro paragraphs
--size-body 1.5rem 15px → 1.6rem 16px body text ← default
--size-small 1.3rem 13px → 1.4rem 14px captions / meta
--size-tiny 1.2rem 12px → 1.2rem 12px badges / legal
--btn-font-size calc(0.9 × 1.6rem) ≈ 14.4px
─────────────────────────────────────────────────────────────
*/
/* ════════════════════════════════════════════
§ 2d FONT ROLE TOKENS
─────────────────────────────────────────
Element weight spacing transform
─────────────────────────────────────────
body 400 0px none
body bold 700 0px none
heading 700 0px none
subheading 500 2px uppercase ← nav, eyebrow
card title 600 0px uppercase ← product names
button 600 1px uppercase
════════════════════════════════════════════ */
/* ════════════════════════════════════════════
1. RESET & BASE
════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
font-size: calc(0.96 * 62.25%); /* ≈ 10px */
scroll-behavior: smooth;
}
body {
font-family: Montserrat, sans-serif;
font-size: var(--size-body);
font-weight: var(--font-body-weight);
line-height: 1.5;
color: var(--light-text);
background: var(--light-bg);
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
/* ════════════════════════════════════════════
2. ARKEN TYPE SCALE — MOBILE FIRST
════════════════════════════════════════════ */
:root {
/* ── Colour tokens ── */
--dark: #1C1C1C;
--dark2: #242424;
--dark3: #2E2E2E;
--accent: #8C7B5E;
--accent-lt: #A89678;
--light-bg: #FFFFFF;
--light-bg2: #F5F3EF;
--light-bg3: #EDEBE5;
--light-text: #2C2C2C;
--light-mid: #888580;
--light-muted: #A8A39E;
--border: #E5E2DB;
--border-dark: rgba(255,255,255,0.08);
--red: #C0392B;
/* ── Font tokens ── */
--font-body-weight: 400;
--font-body-weight-bold: 700;
--font-heading-weight: 700;
--font-subheading-weight:500;
--font-card-title-weight:600;
--btn-font-weight: 600;
--font-body-spacing: 0px;
--font-heading-spacing: 0px;
--font-subheading-spacing: 2px;
--font-card-title-spacing: 0px;
--btn-font-spacing: 1px;
--font-heading-transform: none;
--font-card-title-transform: uppercase;
--btn-font-transform: uppercase;
/* ── Type scale — mobile ── */
--size-hxl: 4.0rem;
--size-h0: 3.6rem;
--size-h1: 3.2rem;
--size-h2: 2.8rem;
--size-h3: 2.2rem;
--size-h4: 1.8rem;
--size-h5: 1.6rem;
--size-h6: 1.5rem;
--size-large: 1.6rem;
--size-body: 1.5rem;
--size-small: 1.3rem;
--size-tiny: 1.2rem;
/* Button size */
--btn-font-size: calc(0.9 * 1.6rem);
}
/* ── Type scale — desktop ── */
@media (min-width: 990px) {
:root {
--size-hxl: 5.6rem;
--size-h0: 4.8rem;
--size-h1: 4.0rem;
--size-h2: 3.2rem;
--size-h3: 2.8rem;
--size-h4: 2.2rem;
--size-h5: 1.7rem;
--size-h6: 1.6rem;
--size-large: 1.75rem;
--size-body: 1.6rem;
--size-small: 1.4rem;
--size-tiny: 1.2rem;
--btn-font-size: calc(0.9 * 1.6rem);
}
}
/* ════════════════════════════════════════════
3. TYPOGRAPHY HELPERS
════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
font-weight: var(--font-heading-weight);
letter-spacing: var(--font-heading-spacing);
line-height: 1.2;
}
.text-hxl { font-size: var(--size-hxl); }
.text-h1 { font-size: var(--size-h1); }
.text-h2 { font-size: var(--size-h2); }
.text-h3 { font-size: var(--size-h3); }
.text-body { font-size: var(--size-body); }
.text-small { font-size: var(--size-small); }
.text-tiny { font-size: var(--size-tiny); }
.subheading {
font-size: var(--size-small);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: var(--light-mid);
}
.subheading--light { color: rgba(255,255,255,0.5); }
/* ════════════════════════════════════════════
4. BUTTONS
════════════════════════════════════════════ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
font-family: Montserrat, sans-serif;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
letter-spacing: var(--btn-font-spacing);
text-transform: var(--btn-font-transform);
border: none;
cursor: pointer;
border-radius: 2px;
transition: all 0.2s;
white-space: nowrap;
}
.btn--dark {
background: var(--light-text);
color: #fff;
}
.btn--dark:hover { background: #444; }
.btn--outline-dark {
background: transparent;
color: var(--light-text);
border: 1.5px solid var(--border);
}
.btn--outline-dark:hover {
border-color: var(--light-text);
}
.btn--outline-light {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255,255,255,0.35);
}
.btn--outline-light:hover {
border-color: #fff;
}
.btn--add-cart {
width: 100%;
justify-content: center;
background: var(--light-text);
color: #fff;
padding: 11px;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
letter-spacing: var(--btn-font-spacing);
text-transform: var(--btn-font-transform);
border: none;
cursor: pointer;
transition: background 0.2s;
border-radius: 2px;
}
.btn--add-cart:hover { background: #444; }
/* ════════════════════════════════════════════
5. LAYOUT HELPERS
════════════════════════════════════════════ */
.container {
max-width: 1320px;
margin: 0 auto;
padding: 0 48px;
}
@media (max-width: 768px) {
.container { padding: 0 20px; }
}
.section { padding: 64px 0; }
.section--alt { background: var(--light-bg2); }
.section--dark {
background: var(--dark);
color: #fff;
}
.section__header {
text-align: center;
margin-bottom: 48px;
}
.section__title {
font-size: var(--size-h2);
font-weight: var(--font-heading-weight);
letter-spacing: var(--font-heading-spacing);
color: var(--light-text);
margin-bottom: 10px;
}
.section__desc {
font-size: var(--size-body);
color: var(--light-mid);
font-weight: 400;
letter-spacing: 0;
}
.section--dark .section__title { color: #fff; }
.section--dark .section__desc { color: rgba(255,255,255,0.5); }
/* ════════════════════════════════════════════
6. ANNOUNCEMENT BAR
════════════════════════════════════════════ */
.ann-bar {
background: var(--dark);
color: rgba(255,255,255,0.85);
text-align: center;
padding: 9px 16px;
font-size: var(--size-tiny);
font-weight: 500;
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
}
.ann-bar strong { color: #fff; font-weight: 700; }
.ann-bar span { opacity: 0.4; margin: 0 8px; }
/* ════════════════════════════════════════════
7. NAV
════════════════════════════════════════════ */
/* ════════════════════════════════════════
NAV — Mega Menu (Shopify-ready)
════════════════════════════════════════ */
.nav {
position: sticky;
top: 0;
z-index: 200;
background: rgba(26,26,26,0.98);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(255,255,255,0.06);
height: 68px;
display: flex;
align-items: center;
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 48px;
gap: 40px;
}
/* ── Logo ── */
.nav__logo {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-h1);
letter-spacing: 4px;
color: #fff;
line-height: 1;
flex-shrink: 0;
z-index: 2;
}
.nav__logo span { color: var(--accent); }
/* ── Links ── */
.nav__links {
display: flex;
align-items: center;
gap: 0;
list-style: none;
height: 68px;
flex: 1;
justify-content: center;
}
/* Each top-level item */
.nav__item {
position: static; /* mega menu is full-width, positioned relative to nav */
height: 100%;
display: flex;
align-items: center;
}
.nav__item > a {
display: flex;
align-items: center;
gap: 5px;
padding: 0 16px;
height: 100%;
font-size: var(--size-small);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: rgba(255,255,255,0.8);
transition: color 0.18s;
white-space: nowrap;
position: relative;
}
/* Active underline indicator — only on mega items, not simple dropdowns */
.nav__item:not(.nav__item--simple) > a::after {
content: '';
position: absolute;
bottom: 0; left: 16px; right: 16px;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.22s ease;
}
.nav__item > a:hover,
.nav__item:hover > a {
color: #fff;
}
.nav__item:not(.nav__item--simple):hover > a::after {
transform: scaleX(1);
}
/* Chevron icon */
.nav__item > a .chevron {
width: 12px; height: 12px;
display: inline-block;
fill: none;
stroke: currentColor;
stroke-width: 2;
flex-shrink: 0;
transition: transform 0.22s;
}
.nav__item:hover > a .chevron {
transform: rotate(180deg);
}
/* ── Mega Menu Panel ── */
.nav__mega {
visibility: hidden;
opacity: 0;
pointer-events: none;
position: fixed;
top: 68px;
left: 0;
width: 100%;
background: #1e1e1e;
border-top: none;
border-bottom: 3px solid var(--accent);
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
transform: translateY(-6px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
z-index: 199;
}
.nav__item:hover .nav__mega {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.nav__mega__inner {
max-width: 1320px;
margin: 0 auto;
padding: 36px 48px 40px;
display: grid;
gap: 48px;
}
/* Layout variants */
.nav__mega--cols-4 .nav__mega__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
.nav__mega--cols-3 .nav__mega__inner { grid-template-columns: 2fr 1fr 1fr; }
.nav__mega--cols-2 .nav__mega__inner { grid-template-columns: 1fr 1fr; }
/* Featured block (left) */
.mega__featured {
border-right: 1px solid rgba(255,255,255,0.06);
padding-right: 40px;
}
.mega__featured-label {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.mega__featured-img {
width: 100%;
aspect-ratio: 16/9;
background: #2a2a2a;
border-radius: 2px;
overflow: hidden;
margin-bottom: 14px;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255,255,255,0.1);
font-size: var(--size-h1);
}
.mega__featured-title {
font-size: var(--size-h5);
font-weight: 700;
color: #fff;
margin-bottom: 6px;
}
.mega__featured-desc {
font-size: var(--size-small);
color: rgba(255,255,255,0.45);
line-height: 1.55;
margin-bottom: 16px;
}
.mega__featured-link {
font-size: var(--size-small);
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
color: #fff;
display: inline-flex;
align-items: center;
gap: 6px;
border-bottom: 1px solid rgba(255,255,255,0.25);
padding-bottom: 2px;
transition: border-color 0.18s, color 0.18s;
}
.mega__featured-link:hover { border-color: var(--accent); color: var(--accent); }
/* Column block */
.mega__col {}
.mega__col-title {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: rgba(255,255,255,0.35);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mega__col-links {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
}
.mega__col-links li a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
font-size: var(--size-small);
font-weight: 400;
color: rgba(255,255,255,0.65);
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: color 0.18s, padding-left 0.18s;
}
.mega__col-links li:last-child a { border-bottom: none; }
.mega__col-links li a:hover {
color: #fff;
padding-left: 4px;
}
.mega__col-links li a .link-icon {
width: 28px; height: 28px;
background: rgba(255,255,255,0.05);
border-radius: 2px;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
transition: background 0.18s;
}
.mega__col-links li a:hover .link-icon { background: rgba(140,123,94,0.15); }
.mega__col-links li a .link-text {}
.mega__col-links li a .link-desc {
display: block;
font-size: var(--size-tiny);
color: rgba(255,255,255,0.3);
margin-top: 1px;
font-weight: 400;
}
/* Simple dropdown — no top border overlap */
.nav__dropdown {
/* visibility 切换：元素始终在 DOM，定位计算稳定，无闪烁 */
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-4px);
min-width: 200px;
background: #1e1e1e;
border-top: none;
border-left: 1px solid rgba(255,255,255,0.07);
border-right: 1px solid rgba(255,255,255,0.07);
border-bottom: 1px solid rgba(255,255,255,0.07);
box-shadow: 0 16px 40px rgba(0,0,0,0.5);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
z-index: 199;
overflow: hidden;
}
/* Accent bar at top — inside the panel */
.nav__dropdown::before {
content: '';
display: block;
height: 2px;
background: var(--accent);
width: 100%;
}
.nav__item--simple { position: relative; }
.nav__item--simple:hover .nav__dropdown {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
}
.nav__dropdown a {
display: block;
padding: 11px 20px;
font-size: var(--size-small);
font-weight: 400;
color: rgba(255,255,255,0.7);
border-bottom: 1px solid rgba(255,255,255,0.05);
transition: color 0.18s, background 0.18s;
}
.nav__dropdown a:last-child { border-bottom: none; }
.nav__dropdown a:hover { color: #fff; background: rgba(255,255,255,0.04); }
/* ── Nav Actions ── */
.nav__actions {
display: flex;
gap: 20px;
align-items: center;
flex-shrink: 0;
}
.nav__actions svg {
width: 22px; height: 22px;
fill: none;
stroke: rgba(255,255,255,0.75);
stroke-width: 1.5;
cursor: pointer;
transition: stroke 0.18s;
}
.nav__actions svg:hover { stroke: #fff; }
/* Cart badge */
.nav__cart {
position: relative;
cursor: pointer;
}
.nav__cart-count {
position: absolute;
top: -6px; right: -7px;
width: 17px; height: 17px;
background: var(--accent);
border-radius: 50%;
font-size: 10px;
font-weight: 700;
color: #fff;
display: flex; align-items: center; justify-content: center;
line-height: 1;
}
/* Mobile hamburger */
.nav__hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.nav__hamburger span {
display: block;
width: 24px; height: 2px;
background: rgba(255,255,255,0.8);
border-radius: 2px;
transition: all 0.2s;
}
@media (max-width: 1024px) {
.nav__links { display: none; }
.nav__hamburger { display: flex; }
.nav__inner { padding: 0 24px; }
}
/* ════════════════════════════════════════════
8. HERO
════════════════════════════════════════════ */
.hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
overflow: hidden;
background: linear-gradient(130deg, #1a1814 0%, #221e18 45%, #2a2418 65%, #1a1814 100%);
}
/* animated scan line */
.hero::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
/* SVG grid overlay */
.hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
}
.hero__bg::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at 68% 48%, rgba(140,123,94,0.07) 0%, transparent 55%),
repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(140,123,94,0.03) 60px),
repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(140,123,94,0.03) 60px);
}
/* crosshair */
.hero__crosshair {
position: absolute;
right: 8%;
top: 50%;
transform: translateY(-50%);
width: 380px; height: 380px;
opacity: 0.13;
pointer-events: none;
}
/* scan animation */
@keyframes scan {
0% { top: -1px; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.hero__scan {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.hero__scan::after {
content: '';
position: absolute; left: 0; right: 0; height: 1px;
background: linear-gradient(to right, transparent, rgba(140,123,94,0.3), transparent);
animation: scan 7s ease-in-out infinite;
}
.hero__content {
position: relative;
max-width: 600px;
padding: 80px 48px 80px 64px;
}
.hero__title {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-hxl);
line-height: 0.92;
letter-spacing: 3px;
color: #fff;
margin-bottom: 6px;
}
.hero__title em {
font-style: normal;
color: var(--accent);
display: block;
}
.hero__desc {
font-size: var(--size-body);
font-weight: 400;
color: rgba(255,255,255,0.55);
max-width: 400px;
line-height: 1.65;
margin: 18px 0 32px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* ════════════════════════════════════════════
9. SALE BANNER
════════════════════════════════════════════ */
.sale {
background: var(--light-bg2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
padding: 44px 0;
}
.sale__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.sale__heading { flex-shrink: 0; }
.sale__dates {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: var(--light-mid);
margin-bottom: 6px;
}
.sale__title {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-h0);
line-height: 1;
letter-spacing: 2px;
color: var(--light-text);
}
.sale__title em { font-style: normal; color: var(--red); }
.sale__deals { display: flex; gap: 16px; flex-wrap: wrap; }
.sale__deal {
background: #fff;
border: 1px solid var(--border);
padding: 20px 24px;
min-width: 148px;
text-align: center;
}
.sale__deal-label {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: var(--light-muted);
margin-bottom: 4px;
}
.sale__deal-pct {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-hxl);
color: var(--red);
line-height: 1;
margin-bottom: 10px;
}
.sale__deal-code {
display: inline-block;
border: 1.5px solid var(--light-text);
color: var(--light-text);
font-size: var(--size-tiny);
font-weight: 700;
letter-spacing: 1.5px;
padding: 4px 12px;
text-transform: uppercase;
}
.sale__perm {
background: var(--dark);
padding: 24px 28px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
min-width: 200px;
}
.sale__perm-eyebrow {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: rgba(255,255,255,0.4);
margin-bottom: 6px;
}
.sale__perm-title {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-h1);
line-height: 1.0;
letter-spacing: 2px;
color: #fff;
margin-bottom: 4px;
}
.sale__perm-desc {
font-size: var(--size-tiny);
color: rgba(255,255,255,0.38);
margin-bottom: 14px;
}
.sale__perm-code {
display: inline-block;
align-self: flex-start;
background: rgba(255,255,255,0.06);
border: 1.5px solid var(--accent);
color: var(--accent);
font-family: Montserrat, sans-serif;
font-size: var(--size-small);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 6px 16px;
}
/* ════════════════════════════════════════════
10. CATEGORY GRID
════════════════════════════════════════════ */
.cat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.cat-card {
position: relative;
overflow: hidden;
aspect-ratio: 4/3;
cursor: pointer;
}
.cat-card__overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 55%);
display: flex; align-items: flex-end; padding: 20px;
transition: background 0.3s;
}
.cat-card:hover .cat-card__overlay {
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 100%);
}
.cat-card__name {
font-size: var(--size-h5);
font-weight: var(--font-card-title-weight);
letter-spacing: var(--font-card-title-spacing);
text-transform: var(--font-card-title-transform);
color: #fff;
}
.cat-card__arrow {
margin-left: auto;
color: rgba(255,255,255,0.6);
font-size: var(--size-h4);
transform: translateX(0);
transition: transform 0.2s;
}
.cat-card:hover .cat-card__arrow { transform: translateX(4px); }
/* ════════════════════════════════════════════
11. PRODUCT SERIES — Carousel
════════════════════════════════════════════ */
.series-section { padding: 64px 0; background: var(--light-bg2); }
.series-header {
position: relative;
text-align: center;
padding: 0 100px; /* space for arrows */
max-width: 1320px;
margin: 0 auto 36px;
}
.series-header__text {}
.series-header__title {
font-size: var(--size-h2);
font-weight: var(--font-heading-weight);
color: var(--light-text);
margin-bottom: 8px;
}
.series-header__desc {
font-size: var(--size-body);
color: var(--light-mid);
}
.series-header__nav {
position: absolute;
right: 48px;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 8px;
}
.series-nav-btn {
width: 40px; height: 40px;
border: 1.5px solid var(--border);
background: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
border-radius: 2px;
transition: all 0.18s;
flex-shrink: 0;
}
.series-nav-btn:hover {
background: var(--light-text);
border-color: var(--light-text);
}
.series-nav-btn:hover svg { stroke: #fff; }
.series-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.series-nav-btn:disabled:hover {
background: #fff;
border-color: var(--border);
}
.series-nav-btn:disabled:hover svg { stroke: var(--light-text); }
.series-nav-btn svg {
width: 18px; height: 18px;
fill: none;
stroke: var(--light-text);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Track wrapper — clips overflow */
.series-track-wrap {
overflow: hidden;
padding: 0 48px;
max-width: 1320px;
margin: 0 auto;
}
/* Scroll track */
.series-track {
display: flex;
gap: 16px;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
cursor: grab;
user-select: none;
}
.series-track.is-dragging { cursor: grabbing; transition: none; }
/* Each card — fixed width so carousel works predictably */
.series-card {
flex: 0 0 calc(25% - 12px); /* 4 visible on desktop */
min-width: 0;
background: #fff;
border: 1px solid var(--border);
cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s;
overflow: hidden;
}
.series-card:hover {
box-shadow: 0 6px 24px rgba(44,44,44,0.1);
transform: translateY(-2px);
}
.series-card__img { display: block; width: 100%; }
.series-card__info {
padding: 16px 18px 20px;
border-top: 1px solid var(--border);
}
.series-card__name {
font-size: var(--size-h4);
font-weight: var(--font-card-title-weight);
letter-spacing: var(--font-card-title-spacing);
text-transform: var(--font-card-title-transform);
color: var(--light-text);
margin-bottom: 3px;
}
.series-card__desc {
font-size: var(--size-small);
font-weight: 400;
color: var(--light-mid);
}
/* Dots indicator */
.series-dots {
display: flex;
justify-content: center;
gap: 6px;
margin-top: 28px;
}
.series-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--border);
transition: all 0.2s;
cursor: pointer;
}
.series-dot.active {
background: var(--light-text);
width: 20px;
border-radius: 3px;
}
/* Responsive card widths */
@media (max-width: 1024px) {
.series-card { flex: 0 0 calc(50% - 8px); }
.series-header { padding: 0 80px; }
.series-header__nav { right: 24px; }
.series-track-wrap { padding: 0 24px; }
}
@media (max-width: 640px) {
.series-card { flex: 0 0 calc(85% - 8px); }
.series-header { padding: 0 20px; }
.series-header__nav { display: none; }
.series-track-wrap { padding: 0 20px; }
}
/* ════════════════════════════════════════════
12. PRODUCT CARDS
════════════════════════════════════════════ */
.products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.product-card {
background: #fff;
border: 1px solid var(--border);
transition: box-shadow 0.2s, transform 0.2s;
cursor: pointer;
overflow: hidden;
}
.product-card:hover {
box-shadow: 0 6px 24px rgba(44,44,44,0.1);
transform: translateY(-2px);
}
.product-card__badge {
display: inline-block;
background: var(--red);
color: #fff;
font-size: var(--size-tiny);
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
padding: 2px 8px;
margin: 12px 12px 0;
}
.product-card__img {
padding: 20px;
background: var(--light-bg2);
}
.product-card__body { padding: 14px 16px 16px; }
.product-card__name {
font-size: var(--size-small);
font-weight: var(--font-card-title-weight);
letter-spacing: var(--font-card-title-spacing);
text-transform: var(--font-card-title-transform);
color: var(--light-text);
line-height: 1.4;
margin-bottom: 5px;
}
.product-card__meta {
font-size: var(--size-small);
font-weight: 400;
color: var(--light-mid);
margin-bottom: 8px;
}
.stars { display: flex; align-items: center; gap: 2px; margin-bottom: 10px; }
.stars span { color: var(--accent); font-size: var(--size-tiny); }
.stars small { font-size: var(--size-tiny); color: var(--light-mid); margin-left: 4px; }
.product-card__price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.product-card__price strong {
font-size: var(--size-h4);
font-weight: 700;
color: var(--light-text);
}
.product-card__price del {
font-size: var(--size-small);
color: var(--light-muted);
}
.view-more { text-align: center; margin-top: 40px; }
/* ════════════════════════════════════════════
13. GUARANTEE STRIP
════════════════════════════════════════════ */
.guarantee {
background: var(--light-bg2);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.guarantee__grid {
display: grid;
grid-template-columns: 1fr 1px 1fr 1px 1fr;
align-items: stretch;
}
.guarantee__divider { background: var(--border); }
.guarantee__item {
display: flex;
align-items: center;
gap: 16px;
padding: 32px 40px;
}
.guarantee__icon {
width: 40px; height: 40px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
color: var(--light-text);
font-size: var(--size-h4);
}
.guarantee__item h4 {
font-size: var(--size-small);
font-weight: var(--font-card-title-weight);
letter-spacing: var(--font-card-title-spacing);
text-transform: var(--font-card-title-transform);
color: var(--light-text);
margin-bottom: 2px;
}
.guarantee__item p {
font-size: var(--size-small);
font-weight: 400;
color: var(--light-mid);
}
/* ════════════════════════════════════════════
14. WARRANTY BANNER
════════════════════════════════════════════ */
.warranty {
position: relative;
overflow: hidden;
min-height: 300px;
display: flex;
align-items: center;
background: linear-gradient(135deg, #1a1814 0%, #22201a 60%, #1a1814 100%);
}
.warranty::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(circle at 65% 50%, rgba(140,123,94,0.07) 0%, transparent 55%);
pointer-events: none;
}
.warranty__content {
position: relative;
padding: 64px 64px;
max-width: 560px;
}
.warranty__content h2 {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-h0);
letter-spacing: 2px;
color: #fff;
line-height: 1.05;
margin-bottom: 12px;
}
.warranty__content h2 em {
font-style: normal;
color: var(--accent);
}
.warranty__content p {
font-size: var(--size-body);
font-weight: 400;
color: rgba(255,255,255,0.5);
line-height: 1.65;
margin-bottom: 28px;
}
/* ════════════════════════════════════════════
15. REVIEWS
════════════════════════════════════════════ */
.reviews-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.review-card {
background: #fff;
border: 1px solid var(--border);
padding: 24px;
display: flex;
gap: 16px;
}
.review-card__avatar {
width: 44px; height: 44px; flex-shrink: 0;
border-radius: 50%;
background: var(--light-bg3);
border: 1px solid var(--border);
display: flex; align-items: center; justify-content: center;
font-size: var(--size-h4);
font-weight: 700;
color: var(--light-text);
}
.review-card__name {
font-size: var(--size-small);
font-weight: var(--font-card-title-weight);
letter-spacing: var(--font-card-title-spacing);
text-transform: var(--font-card-title-transform);
color: var(--light-text);
margin-bottom: 2px;
}
.review-card__date {
font-size: var(--size-tiny);
color: var(--light-mid);
margin-bottom: 8px;
}
.review-card__text {
font-size: var(--size-body);
font-weight: 400;
color: var(--light-mid);
line-height: 1.65;
}
.reviews-cta { text-align: center; margin-top: 40px; }
/* ════════════════════════════════════════════
16. HQ
════════════════════════════════════════════ */
.hq__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
}
.hq__title {
font-size: var(--size-h1);
font-weight: var(--font-heading-weight);
letter-spacing: var(--font-heading-spacing);
color: var(--light-text);
margin-bottom: 4px;
}
.hq__sub {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: var(--light-mid);
margin-bottom: 24px;
}
.hq__info { display: flex; flex-direction: column; gap: 12px; }
.hq__info-item {
display: flex; align-items: flex-start; gap: 10px;
font-size: var(--size-body);
color: var(--light-mid);
}
.hq__info-item strong { color: var(--light-text); font-weight: 500; }
.hq__info-icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.hq__map {
border: 1px solid var(--border);
aspect-ratio: 4/3;
overflow: hidden;
}
.hq__map iframe { width: 100%; height: 100%; border: none; }
/* ════════════════════════════════════════════
17. NEWSLETTER
════════════════════════════════════════════ */
.newsletter { text-align: center; }
.newsletter h2 {
font-size: var(--size-h1);
font-weight: var(--font-heading-weight);
color: var(--light-text);
margin-bottom: 8px;
}
.newsletter p {
font-size: var(--size-large);
font-weight: 400;
color: var(--light-mid);
margin-bottom: 28px;
}
.newsletter__form {
display: flex;
max-width: 460px;
margin: 0 auto;
}
.newsletter__input {
flex: 1;
border: 1.5px solid var(--border);
border-right: none;
padding: 12px 18px;
font-family: Montserrat, sans-serif;
font-size: var(--size-body);
font-weight: 400;
color: var(--light-text);
outline: none;
border-radius: 0;
background: #fff;
}
.newsletter__input::placeholder { color: var(--light-muted); }
.newsletter__input:focus { border-color: var(--light-text); }
.newsletter__btn {
background: var(--light-text);
color: #fff;
border: none;
padding: 12px 24px;
font-family: Montserrat, sans-serif;
font-size: var(--btn-font-size);
font-weight: var(--btn-font-weight);
letter-spacing: var(--btn-font-spacing);
text-transform: var(--btn-font-transform);
cursor: pointer;
transition: background 0.2s;
border-radius: 0;
}
.newsletter__btn:hover { background: #444; }
/* ════════════════════════════════════════════
18. FOOTER
════════════════════════════════════════════ */
.footer {
background: #181614;
color: rgba(255,255,255,0.55);
border-top: 1px solid rgba(255,255,255,0.06);
padding: 64px 0 36px;
}
.footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 52px;
}
.footer__logo {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-h2);
letter-spacing: 3px;
color: #fff;
margin-bottom: 12px;
}
.footer__logo span { color: var(--accent); }
.footer__desc {
font-size: var(--size-small);
font-weight: 400;
line-height: 1.6;
margin-bottom: 20px;
max-width: 260px;
}
.footer__social { display: flex; gap: 8px; }
.footer__social a {
width: 32px; height: 32px;
border: 1px solid rgba(255,255,255,0.12);
display: flex; align-items: center; justify-content: center;
font-size: var(--size-small);
color: rgba(255,255,255,0.45);
font-weight: 600;
transition: all 0.18s;
}
.footer__social a:hover {
border-color: rgba(255,255,255,0.35);
color: #fff;
}
.footer__col-title {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: #fff;
margin-bottom: 16px;
}
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__links a {
font-size: var(--size-small);
font-weight: 400;
color: rgba(255,255,255,0.5);
transition: color 0.18s;
}
.footer__links a:hover { color: #fff; }
.footer__bottom {
border-top: 1px solid rgba(255,255,255,0.07);
padding-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
}
.footer__copy {
font-size: var(--size-tiny);
font-weight: 400;
color: rgba(255,255,255,0.3);
}
.footer__payments { display: flex; gap: 6px; }
.footer__payments span {
border: 1px solid rgba(255,255,255,0.1);
padding: 3px 9px;
font-size: var(--size-tiny);
font-weight: 600;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.35);
}
/* ════════════════════════════════════════════
CONTACT CTA CARD (Best Sellers grid slot)
════════════════════════════════════════════ */
.contact-cta-card {
background: var(--dark);
display: flex;
flex-direction: column;
min-height: 100%;
cursor: pointer;
transition: transform 0.2s;
border: 1px solid rgba(255,255,255,0.05);
}
.contact-cta-card:hover { transform: translateY(-2px); }
.contact-cta-card__inner {
display: flex;
flex-direction: column;
flex: 1;
padding: 36px 28px 32px;
gap: 0;
}
.contact-cta-card__eyebrow {
font-size: var(--size-tiny);
font-weight: var(--font-subheading-weight);
letter-spacing: var(--font-subheading-spacing);
text-transform: uppercase;
color: var(--accent);
margin-bottom: 14px;
}
.contact-cta-card__title {
font-family: 'Bebas Neue', cursive;
font-size: var(--size-hxl);
line-height: 0.92;
letter-spacing: 3px;
color: #fff;
margin-bottom: 18px;
}
.contact-cta-card__desc {
font-size: var(--size-small);
font-weight: 400;
color: rgba(255,255,255,0.5);
line-height: 1.6;
margin-bottom: 28px;
flex: 1;
}
.contact-cta-card__links {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
}
.contact-cta-card__link {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--size-small);
font-weight: 500;
color: rgba(255,255,255,0.7);
padding: 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 2px;
transition: all 0.18s;
}
.contact-cta-card__link:hover {
background: rgba(140,123,94,0.12);
border-color: rgba(140,123,94,0.3);
color: #fff;
}
.contact-cta-card__link svg {
width: 16px; height: 16px;
fill: none;
stroke: var(--accent);
stroke-width: 1.5;
flex-shrink: 0;
}
.contact-cta-card__cta {
display: inline-block;
font-size: var(--size-small);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1.5px solid var(--accent);
padding-bottom: 2px;
align-self: flex-start;
transition: color 0.18s, border-color 0.18s;
}
.contact-cta-card__cta:hover {
color: #fff;
border-color: #fff;
}
/* ════════════════════════════════════════════
19. RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 1024px) {
.products-grid { grid-template-columns: repeat(2, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr; }
.guarantee__grid { grid-template-columns: 1fr; }
.guarantee__divider { display: none; }
.hq__inner { grid-template-columns: 1fr; }
.hero__crosshair { display: none; }
}
@media (max-width: 768px) {
.nav__links { display: none; }
.cat-grid { grid-template-columns: 1fr; }
.products-grid { grid-template-columns: 1fr; }
.reviews-grid { grid-template-columns: 1fr; }
.sale__inner { flex-direction: column; }
.footer__grid { grid-template-columns: 1fr; }
.hero__content { padding: 60px 20px; }
.warranty__content { padding: 48px 20px; }
.container { padding: 0 20px; }
}