/* LABICI — category.css Category page styles. Requires style.css to be loaded first. Theme variables are set on by labici-hero.js */ /* ════════════════════════════════════════════════════════════ THEME SYSTEM Set by: labici-hero.js → document.documentElement.dataset.theme Controls: overlay tone, accent color, label color, card shadow Rule: subtle, low-saturation — not decorative ════════════════════════════════════════════════════════════ */ :root { --theme-accent: var(--light-green); --theme-label: var(--forest); --theme-card-hover-shadow: 0 20px 52px rgba(45, 80, 22, 0.15); --theme-divider: rgba(26, 26, 26, 0.08); } /* ROAD — silver: cool urban */ html[data-theme="silver"] { --theme-accent: rgba(175, 198, 220, 0.95); --theme-label: rgba(72, 100, 128, 0.88); --theme-card-hover-shadow: 0 20px 52px rgba(60, 90, 120, 0.12); --theme-divider: rgba(80, 110, 140, 0.09); } /* CROSS — beige: warm natural */ html[data-theme="beige"] { --theme-accent: rgba(208, 182, 142, 0.95); --theme-label: rgba(130, 98, 58, 0.88); --theme-card-hover-shadow: 0 20px 52px rgba(130, 98, 58, 0.12); --theme-divider: rgba(130, 98, 58, 0.09); } /* FOLDING — concrete: neutral minimal */ html[data-theme="concrete"] { --theme-accent: rgba(168, 168, 168, 0.95); --theme-label: rgba(88, 88, 88, 0.85); --theme-card-hover-shadow: 0 20px 52px rgba(50, 50, 50, 0.12); --theme-divider: rgba(50, 50, 50, 0.09); } /* GRAVEL — forest: deep earthy cinematic */ html[data-theme="forest"] { --theme-accent: var(--light-green); --theme-label: var(--forest); --theme-card-hover-shadow: 0 20px 52px rgba(45, 80, 22, 0.18); --theme-divider: rgba(45, 80, 22, 0.10); } /* MTB — earth: warm brown trail */ html[data-theme="earth"] { --theme-accent: rgba(180, 130, 70, 0.95); --theme-label: rgba(110, 75, 30, 0.88); --theme-card-hover-shadow: 0 20px 52px rgba(110, 75, 30, 0.15); --theme-divider: rgba(110, 75, 30, 0.09); } /* ── Theme-aware: hero eyebrow ────────────────────────────── Replaces the per-slug rules from previous version. style.css sets color: var(--light-green); we override via theme. */ .hero-eyebrow { color: var(--theme-accent, var(--light-green)); } /* ── Theme-aware: hero overlay per category ─────────────── */ .hero--road .hero-overlay { background: linear-gradient( to top, rgba(10, 16, 26, 0.82) 0%, rgba(55, 80, 108, 0.14) 55%, rgba(55, 80, 108, 0.03) 100% ); } .hero--cross .hero-overlay { background: linear-gradient( to top, rgba(18, 12, 6, 0.82) 0%, rgba(108, 80, 46, 0.14) 55%, rgba(108, 80, 46, 0.03) 100% ); } .hero--folding .hero-overlay { background: linear-gradient( to top, rgba(10, 10, 10, 0.82) 0%, rgba(55, 55, 55, 0.14) 55%, rgba(55, 55, 55, 0.03) 100% ); } .hero--gravel .hero-overlay { background: linear-gradient( to top, rgba(8, 18, 4, 0.84) 0%, rgba(28, 55, 12, 0.18) 55%, rgba(28, 55, 12, 0.04) 100% ); } .hero--mtb .hero-overlay { background: linear-gradient( to top, rgba(12, 8, 4, 0.84) 0%, rgba(80, 50, 20, 0.16) 55%, rgba(80, 50, 20, 0.04) 100% ); } /* ── Theme-aware: section labels ────────────────────────── */ .concept .label, .models .section-header .label, .hero-model-badge, .specs .label { color: var(--theme-label, var(--forest)); } /* ════════════════════════════════════════════════════════════ Active nav item ════════════════════════════════════════════════════════════ */ .nav a.nav-current { color: var(--light-green) !important; } .site-header.scrolled .nav a.nav-current { color: var(--forest) !important; font-weight: 700; } /* ════════════════════════════════════════════════════════════ Concept Section ════════════════════════════════════════════════════════════ */ .concept { padding: var(--section) 0; background: var(--cream); text-align: center; } .concept-inner { max-width: 800px; margin: 0 auto; } .concept-headline { font-family: var(--font-body); font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 300; line-height: 2.1; color: var(--dark); letter-spacing: 0.04em; margin: 1.5rem 0 2.75rem; } .concept-atmosphere { display: flex; gap: 1.75rem 2.5rem; justify-content: center; flex-wrap: wrap; } .concept-atm { font-family: var(--font-head); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(26, 26, 26, 0.32); } .concept-atm::before { content: '— '; color: rgba(26, 26, 26, 0.16); } /* ════════════════════════════════════════════════════════════ FEATURED MODEL Section (hero product above grid) ════════════════════════════════════════════════════════════ */ .hero-model { padding: calc(var(--section) * 0.8) 0; background: var(--cream); border-bottom: 1px solid var(--theme-divider, rgba(26,26,26,0.07)); } .hero-model-inner { display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 768px) { .hero-model-inner { grid-template-columns: 1fr 1fr; gap: 6rem; } } .hero-model-media .product-img-wrap { aspect-ratio: 4 / 5; } .hero-model-badge { font-family: var(--font-head); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 1.25rem; /* color set by .hero-model-badge theme rule above */ } .hero-model-info h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.15; color: var(--dark); margin: 0 0 1.25rem; } .hero-model-info > p { font-size: 0.95rem; line-height: 1.9; color: rgba(26, 26, 26, 0.62); max-width: 44ch; } /* ════════════════════════════════════════════════════════════ Models Section ════════════════════════════════════════════════════════════ */ .models { padding: var(--section) 0; background: var(--sand); } /* 4:5 ratio for category product cards */ .models-grid .product-img-wrap { aspect-ratio: 4 / 5; } /* Subtle hover (less sporty than global style.css) */ .models .product-card:hover { transform: translateY(-6px); box-shadow: var(--theme-card-hover-shadow); } .models-grid .product-card:hover .product-img-wrap img { transform: scale(1.03); } /* Web component wrapper: transparent in grid layout */ labici-product-card { display: contents; } /* ════════════════════════════════════════════════════════════ Product Image Wrapper (position: relative needed for badge positioning) ════════════════════════════════════════════════════════════ */ .product-img-wrap { position: relative; } /* ════════════════════════════════════════════════════════════ Product Status Badges (image overlay — top-left) Small, upper-case, low-saturation. Not decorative. ════════════════════════════════════════════════════════════ */ .prod-badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 1; pointer-events: none; font-family: var(--font-head); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.3em 0.75em; border-radius: 2px; } .prod-badge--new { background: var(--forest); color: rgba(245,241,232,0.92); } .prod-badge--rec { background: var(--beige); color: rgba(26,26,26,0.72); } .prod-badge--coming { background: rgba(26,26,26,0.62); color: rgba(245,241,232,0.85); } .prod-badge--sold { background: rgba(26,26,26,0.78); color: rgba(245,241,232,0.52); } /* ── Product card state styles ──────────────────────────── */ .product-card--soldout, .product-card--upcoming { cursor: default; } .product-card--soldout .product-img-wrap, .product-card--upcoming .product-img-wrap { opacity: 0.42; } /* ════════════════════════════════════════════════════════════ Product Price in FEATURED MODEL section (.product-price is global — defined in style.css) ════════════════════════════════════════════════════════════ */ .hero-model-price { font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: 0.02em; color: var(--forest); margin: 0 0 0.75rem; } /* ════════════════════════════════════════════════════════════ Inventory Status (quiet label inside product-info) Shows only for low_stock / preorder / store_only. in_stock shows nothing. ════════════════════════════════════════════════════════════ */ .inv-status { display: inline-flex; align-items: center; gap: 0.45em; font-family: var(--font-head); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(26, 26, 26, 0.38); margin-top: 0.1rem; margin-bottom: 0.2rem; } .inv-status::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .inv-status--low_stock { color: rgba(135, 98, 40, 0.68); } .inv-status--preorder { color: rgba(45, 80, 22, 0.68); } .inv-status--store_only { color: rgba(80, 80, 80, 0.58); } /* ════════════════════════════════════════════════════════════ Missing Image Placeholder Cinematic, quiet — never a plain gray box. ════════════════════════════════════════════════════════════ */ .product-img-wrap.img-missing { background: linear-gradient(148deg, var(--sand) 0%, var(--beige) 100%); } .product-img-wrap.img-missing::after { content: attr(data-name); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-head); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(26, 26, 26, 0.20); padding: 1.5rem; text-align: center; line-height: 2.2; } /* ════════════════════════════════════════════════════════════ Specs Section ════════════════════════════════════════════════════════════ */ .specs { padding: var(--section) 0; background: var(--cream); } .specs-inner { display: grid; gap: 3rem; align-items: start; } @media (min-width: 768px) { .specs-inner { grid-template-columns: 5fr 7fr; gap: 7rem; } } @media (min-width: 768px) { .specs-header { position: sticky; top: 6rem; } } .specs-header h2 { color: var(--dark); margin: 0.5rem 0 1rem; } .specs-header > p { font-size: 0.95rem; line-height: 1.9; color: rgba(26, 26, 26, 0.62); } .specs-header .btn-outline { margin-top: 2rem; } .specs-list { display: grid; gap: 0; } .spec-item { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 1.25rem 0; border-bottom: 1px solid var(--theme-divider, rgba(26,26,26,0.09)); align-items: center; } .spec-item:first-child { border-top: 1px solid var(--theme-divider, rgba(26,26,26,0.09)); } .spec-key { font-family: var(--font-head); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(26, 26, 26, 0.40); } .spec-value { font-family: var(--font-body); font-size: 0.95rem; color: var(--dark); font-weight: 400; } /* ════════════════════════════════════════════════════════════ Video / Image Fallback JS adds .hero-img-fallback / .lifestyle-img-fallback when source errors. Force-shows static image on desktop (normally hidden by style.css). ════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .hero-mobile-img.hero-img-fallback { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lifestyle-mobile-img.lifestyle-img-fallback { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } /* ════════════════════════════════════════════════════════════ Page breadcrumb ════════════════════════════════════════════════════════════ */ .page-category-label { font-family: var(--font-head); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); display: block; margin-bottom: 1rem; }