/* ============================================ Bear B Products — Main Stylesheet Image-heavy, animation-rich, professional ============================================ */ :root { --green-deep: #1B3022; --green-mid: #264534; --green-dark: #162a1e; --gold: #C5A021; --gold-hover: #d4af37; --gold-gradient: linear-gradient(135deg, #dbb834 0%, #C5A021 50%, #a88a1a 100%); --gold-gradient-hover: linear-gradient(135deg, #e5c84a 0%, #d4af37 50%, #b8971e 100%); --white: #ffffff; --cream: #f5f3ef; --warm-white: #faf8f5; --charcoal: #1a1e20; --charcoal-light: #22262a; --gray-50: #edecea; --gray-100: #e0ddd8; --gray-200: #ccc9c3; --gray-400: #97948e; --gray-600: #5e5c57; --gray-800: #353431; --near-black: #1a1c1d; --shadow-soft: 0 18px 44px rgba(16, 22, 20, 0.12); --shadow-deep: 0 28px 70px rgba(11, 16, 15, 0.22); } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--near-black); } body { font-family: 'Inter', sans-serif; background: radial-gradient(1200px 480px at 50% -220px, rgba(197, 160, 33, 0.08), transparent 70%), linear-gradient(180deg, #f7f4ef 0%, #f2efea 100%); color: var(--gray-800); line-height: 1.6; } /* overflow-x + flex column live on ONLY. Putting overflow-x:hidden on turns the root into a scroll container and breaks iOS momentum scrolling (finnicky/stuttery vertical scroll). */ body { overflow-x: hidden; display: flex; flex-direction: column; min-height: 100vh; } main { flex-grow: 1; } html { scroll-behavior: smooth; } h1, h2, h3 { font-family: 'Geist', 'Inter', sans-serif; color: var(--near-black); line-height: 1.15; } a { text-decoration: none; } img { max-width: 100%; display: block; } /* ============================================ SCROLL ANIMATION SYSTEM ============================================ */ /* Scroll-reveal animations — unified timing */ .anim-on-scroll, .benefit, .product-card, .products-section-header, .cta-banner-content { opacity: 0; transform: translateY(30px); transition: opacity 2.8s ease, transform 2.8s ease; } .anim-on-scroll.in-view, .benefit.in-view, .product-card.in-view, .products-section-header.in-view, .cta-banner-content.in-view { opacity: 1; transform: translateY(0); } /* Hero entrance — same timing */ .anim-fade-up { opacity: 0; transform: translateY(30px); animation: fadeUp 2.8s ease forwards; animation-play-state: running; } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } /* ============================================ REUSABLE ============================================ */ .section-wrap { max-width: 1200px; margin: 0 auto; padding: 0 3rem; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .two-col.reverse { direction: rtl; } .two-col.reverse>* { direction: ltr; } .section-header { text-align: center; margin-bottom: 3.5rem; } .eyebrow { display: block; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; } .section-header h2 { font-size: 2.4rem; font-weight: 900; } .word-reveal-heading { overflow: hidden; } .word-reveal-heading .reveal-word { display: inline-block; opacity: 0; transform: translateY(12px); filter: blur(2px); transition: transform 2.8s ease, opacity 2.8s ease, filter 2.8s ease; transition-delay: calc(var(--word-index) * 80ms); } .word-reveal-heading.words-in-view .reveal-word { opacity: 1; transform: translateY(0); filter: blur(0); } /* ============================================ BUTTONS ============================================ */ .btn-primary { display: inline-block; background: var(--gold-gradient); color: var(--white); padding: 0.9rem 2.4rem; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 4px; border: none; cursor: pointer; box-shadow: 0 3px 12px rgba(197, 160, 33, 0.25); transition: all 0.3s ease; } .btn-primary:hover { background: var(--gold-gradient-hover); box-shadow: 0 6px 24px rgba(197, 160, 33, 0.4); transform: translateY(-2px); } .hero-cta .btn-primary { animation: heroButtonFloat 4.5s ease-in-out infinite; } .hero-cta .btn-secondary-light { animation: heroButtonFloat 4.5s ease-in-out 0.5s infinite; } .hero-cta .btn-primary:hover, .hero-cta .btn-secondary-light:hover { animation-play-state: paused; } .btn-outline { display: inline-block; border: 2px solid var(--green-deep); color: var(--green-deep); padding: 0.75rem 2rem; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; transition: all 0.3s ease; cursor: pointer; } .btn-outline:hover { background: var(--green-deep); color: var(--white); } .btn-secondary-light { display: inline-block; border: 2px solid rgba(255, 255, 255, 0.35); color: var(--white); padding: 0.9rem 2.4rem; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; transition: all 0.3s ease; } .btn-secondary-light:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.12); } /* ============================================ TOP BAR ============================================ */ .top-bar { background: var(--near-black); color: rgba(255, 255, 255, 0.7); display: flex; justify-content: flex-start; align-items: center; gap: 2.5rem; padding: 0.5rem 3rem; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; } .top-bar-phone { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 0.2s; } .top-bar-phone:hover { color: var(--white); } /* ============================================ HEADER ============================================ */ header { --header-pad: 2.25rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(1.15) blur(8px); z-index: 600; /* Must be higher than .mobile-nav-backdrop (550) to make sub-nav clickable */ position: sticky; top: 0; box-shadow: 0 1px 0 var(--gray-100), 0 10px 28px rgba(26, 28, 29, 0.08); } .header-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem var(--header-pad); max-width: 1320px; margin: 0 auto; /* Lock the header height so the wordmark can shrink independently without collapsing the bar. */ min-height: 60px; } .logo-block a, .logo-link { display: flex; align-items: center; gap: 0.9rem; } .logo-block img { height: 92px; width: auto; } .logo-wordmark { height: 32px !important; width: auto; max-width: 220px; object-fit: contain; } .logo-title { font-family: 'Geist', 'Inter', sans-serif; font-size: 1.02rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-deep); white-space: nowrap; } nav { display: flex; gap: 2rem; align-items: center; } nav a { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-600); transition: color 0.2s; position: relative; padding: 0.5rem 0; } nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gold); transition: width 0.3s ease; } nav a:hover::after, nav a.active::after { width: 100%; } nav a:hover, nav a.active { color: var(--near-black); } .nav-products-wrap { position: relative; display: flex; align-items: center; } .nav-products-wrap>a { position: relative; } .nav-products-wrap.active>a { color: var(--near-black); } .nav-products-wrap.active>a::after { width: 100%; } .nav-products-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(0.5rem); min-width: 180px; background: var(--white); border: 1px solid var(--gray-100); border-radius: 6px; box-shadow: var(--shadow-deep); padding: 0.5rem 0; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s, transform 0.2s; z-index: 100; } .nav-products-wrap:hover .nav-products-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-products-dropdown a { display: block; padding: 0.5rem 1rem; font-size: 0.9rem; color: var(--gray-700); white-space: nowrap; } .nav-products-dropdown a:hover { background: var(--gray-50); color: var(--green-deep); } nav a.cta { background: var(--gold-gradient); color: var(--white); padding: 0.5rem 1.3rem; border-radius: 4px; font-weight: 700; transition: transform 0.2s, box-shadow 0.2s; } nav a.cta::after { display: none; } nav a.cta:hover { background: var(--gold-gradient-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(197, 160, 33, 0.3); } /* Cart */ .cart-link { position: relative; color: var(--gray-600) !important; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; display: flex; align-items: center; transition: color 0.2s; } .cart-link:hover { color: var(--near-black) !important; } .cart-link svg { stroke: currentColor; } .cart-count { position: absolute; top: -8px; right: -10px; background: var(--gold); color: var(--white); font-size: 0.62rem; font-weight: 700; width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .cart-count:empty { display: none; } /* Hamburger */ .hamburger { display: none; width: 42px; height: 42px; background: var(--white); border: 1.5px solid var(--gray-200); border-radius: 4px; color: var(--near-black); cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; flex-shrink: 0; } .hamburger span { width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: transform 0.2s ease, opacity 0.2s ease; } .hamburger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.is-open span:nth-child(2) { opacity: 0; } .hamburger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-nav-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 550; } .mobile-nav-backdrop.active { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } .mobile-close { display: none; } /* ============================================ HERO — Full-bleed image with parallax ============================================ */ .hero-section { position: relative; min-height: 88vh; display: flex; align-items: center; justify-content: center; padding: 8rem 3rem; overflow: hidden; background: var(--green-deep); } .hero-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(680px 360px at 20% 18%, rgba(197, 160, 33, 0.24), transparent 72%), radial-gradient(840px 520px at 85% 90%, rgba(255, 255, 255, 0.08), transparent 72%); z-index: 1; pointer-events: none; } .hero-bg { position: absolute; inset: -10%; z-index: 0; will-change: transform; background: #142019; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; transform-origin: center center; animation: heroImageReveal 2.8s ease both, heroImageDrift 18s ease-in-out 2.8s infinite alternate; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 24, 19, 0.72) 0%, rgba(10, 15, 13, 0.72) 100%), linear-gradient(110deg, rgba(197, 160, 33, 0.12) 0%, transparent 48%); z-index: 1; } .hero-paw { position: absolute; width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cdefs%3E%3Cstyle%3E.p%7Bfill:%23C5A021;opacity:0.07%7D%3C/style%3E%3C/defs%3E%3C!-- Main palm pad - wide trapezoid shape --%3E%3Cpath class='p' d='M60 130 C55 115, 58 95, 75 88 L125 88 C142 95, 145 115, 140 130 C138 148, 130 168, 120 178 Q100 192 80 178 C70 168, 62 148, 60 130Z'/%3E%3C!-- Inner palm detail pads --%3E%3Cellipse class='p' cx='85' cy='140' rx='12' ry='10'/%3E%3Cellipse class='p' cx='115' cy='140' rx='12' ry='10'/%3E%3Cellipse class='p' cx='100' cy='158' rx='10' ry='8'/%3E%3C!-- Five toe pads --%3E%3Cellipse class='p' cx='42' cy='78' rx='14' ry='17' transform='rotate(-20 42 78)'/%3E%3Cellipse class='p' cx='68' cy='52' rx='13' ry='18' transform='rotate(-10 68 52)'/%3E%3Cellipse class='p' cx='100' cy='44' rx='13' ry='18'/%3E%3Cellipse class='p' cx='132' cy='52' rx='13' ry='18' transform='rotate(10 132 52)'/%3E%3Cellipse class='p' cx='158' cy='78' rx='14' ry='17' transform='rotate(20 158 78)'/%3E%3C!-- Five claw tips --%3E%3Cpath class='p' d='M30 58 C32 48, 38 42, 36 52 C34 56, 31 60, 30 58Z'/%3E%3Cpath class='p' d='M60 30 C62 20, 66 14, 65 24 C64 28, 61 33, 60 30Z'/%3E%3Cpath class='p' d='M96 22 C98 12, 102 6, 101 16 C100 20, 97 25, 96 22Z'/%3E%3Cpath class='p' d='M134 30 C136 20, 140 14, 139 24 C138 28, 135 33, 134 30Z'/%3E%3Cpath class='p' d='M164 58 C166 48, 170 42, 168 52 C167 56, 165 60, 164 58Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; z-index: 1; pointer-events: none; animation: pawFloat 20s ease-in-out infinite alternate; } @keyframes pawFloat { 0% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); } 100% { transform: translate(-50%, -50%) rotate(-8deg) scale(1.05); } } .hero-inner { position: relative; z-index: 2; max-width: 680px; text-align: center; margin: 0 auto; text-shadow: 0 10px 34px rgba(7, 10, 9, 0.44); } .hero-eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .hero-heading { font-family: 'Geist', 'Inter', sans-serif; font-size: clamp(2.6rem, 5.4vw, 4.6rem); font-weight: 900; line-height: 1.05; color: var(--white); margin-bottom: 1.2rem; letter-spacing: -0.02em; } .hero-sub { font-size: 1rem; font-weight: 400; line-height: 1.65; color: rgba(255, 255, 255, 0.75); margin: 0 auto 2rem; max-width: 560px; } .hero-cta { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* Remove old glass elements */ .main-glass, .glass-panel, .railing-bar { display: none; } /* ============================================ SHOWCASE — Image cards with hover zoom ============================================ */ .showcase-section { padding: 7rem 0; position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f4f1eb 100%); } .showcase-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px 260px at 10% 0%, rgba(197, 160, 33, 0.1), transparent 72%); pointer-events: none; } .showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .showcase-card { display: block; background: linear-gradient(180deg, #ffffff 0%, #f7f3ee 100%); border-radius: 8px; overflow: hidden; border: 1px solid var(--gray-100); border-top: 3px solid var(--gold); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; color: inherit; transform-style: preserve-3d; will-change: transform; box-shadow: var(--shadow-soft); } .showcase-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-deep); border-color: var(--gold); } .showcase-card-img { aspect-ratio: 4/3; overflow: hidden; position: relative; } .showcase-card-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.09); filter: saturate(0.84) brightness(0.9); transition: transform 0.75s ease, filter 0.75s ease; } .showcase-card.in-view .showcase-card-img img { transform: scale(1); filter: saturate(1) brightness(1); } .showcase-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(10, 14, 13, 0.22) 100%), linear-gradient(115deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 255, 255, 0) 75%); transform: translateX(-130%); opacity: 0; transition: opacity 0.2s ease; pointer-events: none; } .showcase-card:hover .showcase-card-img img { transform: scale(1.08); } .showcase-card:hover .showcase-card-img::after { opacity: 0; } .showcase-card-body { padding: 1.1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; } .showcase-card-body h3 { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--near-black); } .card-arrow { font-size: 1.4rem; color: var(--gray-400); transition: color 0.3s, transform 0.3s; line-height: 1; } .showcase-card:hover .card-arrow { color: var(--gold); transform: translateX(4px); } /* ============================================ FULL-WIDTH IMAGE BREAK (parallax) ============================================ */ .image-break { position: relative; height: 50vh; min-height: 350px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 26px 80px rgba(7, 11, 10, 0.34), inset 0 -26px 80px rgba(7, 11, 10, 0.34); } .image-break>img { position: absolute; inset: -15%; width: 130%; height: 130%; object-fit: cover; will-change: transform; animation: imageBreakTone 14s ease-in-out infinite alternate; } .image-break-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 20, 18, 0.76) 0%, rgba(10, 16, 14, 0.72) 100%), radial-gradient(620px 320px at 78% 22%, rgba(197, 160, 33, 0.2), transparent 72%); z-index: 1; } .image-break-text { position: relative; z-index: 2; text-align: center; padding: 2rem; } .image-break-text h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 900; color: var(--white); line-height: 1.2; } /* ============================================ COMPANY OVERVIEW ============================================ */ .overview-section { padding: 7rem 0; position: relative; background: radial-gradient(900px 300px at 50% -80px, rgba(197, 160, 33, 0.08), transparent 70%), linear-gradient(180deg, #f4f1eb 0%, #faf8f5 100%); } .overview-image { border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; background: var(--gray-50); box-shadow: var(--shadow-deep); } .overview-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: saturate(0.85) brightness(0.9); transition: transform 0.75s ease, filter 0.75s ease; } .overview-image.in-view img { transform: scale(1); filter: saturate(1) brightness(1); } .overview-image:hover img { transform: scale(1.03); } .overview-text h2 { font-size: 2.4rem; font-weight: 900; margin-bottom: 0.4rem; } .overview-text h2::after { content: ''; display: block; width: 50px; height: 3px; background: var(--gold); margin-top: 0.75rem; border-radius: 2px; } .overview-text p { color: var(--gray-600); line-height: 1.8; font-size: 1rem; margin: 1.5rem 0; } .overview-text p:last-of-type { margin-bottom: 2rem; } /* ============================================ BENEFITS STRIP ============================================ */ .benefits-strip { background: var(--green-deep); } .benefits-inner { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1200px; margin: 0 auto; padding: 3.5rem 3rem; } .benefit { position: relative; display: flex; align-items: center; gap: 1.1rem; padding: 1.5rem 1.5rem; } .benefit:not(:last-child)::after { content: ''; position: absolute; top: 25%; bottom: 25%; right: 0; width: 1px; background: rgba(255, 255, 255, 0.1); } .benefit-icon { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(197, 160, 33, 0.3); display: flex; align-items: center; justify-content: center; color: var(--gold); flex-shrink: 0; transition: all 0.3s; } .benefit:hover .benefit-icon { background: rgba(197, 160, 33, 0.15); border-color: var(--gold); transform: scale(1.08); } .benefit.in-view .benefit-icon { animation: iconFloat 4.2s ease-in-out infinite; } .benefit:nth-child(2).in-view .benefit-icon { animation-delay: 0.35s; } .benefit:nth-child(3).in-view .benefit-icon { animation-delay: 0.7s; } .benefit-text { display: flex; flex-direction: column; gap: 0.2rem; } .benefit-text strong { font-size: 0.9rem; font-weight: 700; color: var(--white); } .benefit-text span { font-size: 0.8rem; font-weight: 400; color: rgba(255, 255, 255, 0.55); } /* ============================================ GALLERY ============================================ */ .gallery-section { padding: 7rem 0; position: relative; background: var(--charcoal); } .gallery-text h2 { font-size: 2.4rem; font-weight: 900; margin-bottom: 0.4rem; color: var(--white); } .gallery-text h2::after { content: ''; display: block; width: 50px; height: 3px; background: var(--gold); margin-top: 0.75rem; border-radius: 2px; } .gallery-text p { color: rgba(255, 255, 255, 0.6); line-height: 1.8; margin: 1.5rem 0 2rem; } .gallery-section .btn-outline { border-color: var(--gold); color: var(--gold); } .gallery-section .btn-outline:hover { background: var(--gold); color: var(--near-black); } .gallery-carousel-wrap { position: relative; overflow: hidden; border-radius: 8px; box-shadow: var(--shadow-deep); } .gallery-carousel-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.26) 50%, rgba(255, 255, 255, 0) 75%); opacity: 0; transform: translateX(-125%); pointer-events: none; } .gallery-carousel-wrap.in-view::after { opacity: 1; animation: imageSweep 1.1s ease 0.2s 1 forwards; } .gallery-carousel { position: relative; background: var(--gray-50); aspect-ratio: 16/10; overflow: hidden; border-radius: 8px; transform: scale(1.03); filter: saturate(0.9) contrast(0.95); transition: transform 0.75s ease, filter 0.75s ease; } .gallery-carousel-wrap.in-view .gallery-carousel { transform: scale(1); filter: saturate(1) contrast(1); } .gallery-carousel .slide { position: absolute; inset: 0; transform: translateX(100%); transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1); } .gallery-carousel .slide.active { transform: translateX(0); } .gallery-carousel .slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .gallery-carousel:hover .slide.active img { transform: scale(1.03); } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-between; width: 100%; padding: 0 0.75rem; pointer-events: none; } .gallery-nav button { background: var(--white); color: var(--near-black); border: none; width: 42px; height: 42px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; pointer-events: all; transition: all 0.3s; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .gallery-nav button:hover { background: var(--gold); color: var(--white); transform: scale(1.08); } /* ============================================ POPULAR PRODUCTS ============================================ */ .products-section { position: relative; background: linear-gradient(180deg, #121618 0%, #0e1214 100%); padding: 7rem 3rem 3rem; } .products-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(780px 320px at 18% 0%, rgba(197, 160, 33, 0.18), transparent 74%), radial-gradient(720px 300px at 85% 100%, rgba(38, 69, 52, 0.32), transparent 74%); pointer-events: none; } .products-section-header { display: flex; align-items: flex-end; justify-content: space-between; max-width: 1200px; margin: 0 auto 3.5rem; position: relative; z-index: 1; } .products-section-header h2 { font-size: 2.4rem; font-weight: 900; color: var(--white); margin: 0 0 0.3rem; } .products-section-header h2::after { display: none; } .products-subtitle { font-size: 0.95rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); margin: 0; } .browse-link { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); border-bottom: none; padding-bottom: 0; transition: color 0.2s; white-space: nowrap; } .browse-link:hover { color: var(--gold-hover); } .products-track-wrapper { display: flex; align-items: center; gap: 1.25rem; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; } .carousel-btn { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.5); width: 46px; height: 46px; border-radius: 50%; font-size: 1.3rem; cursor: pointer; flex-shrink: 0; transition: all 0.3s; display: flex; align-items: center; justify-content: center; } .carousel-btn:hover { border-color: var(--gold); color: var(--gold); transform: scale(1.06); } .products-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; flex: 1; overflow: visible; } .product-card { background: linear-gradient(180deg, #fdfbf8 0%, #f4f0ea 100%); border-radius: 8px; overflow: hidden; cursor: pointer; box-shadow: var(--shadow-soft); transition: all 0.4s ease; transform-style: preserve-3d; will-change: transform; } .product-card.in-view { opacity: 1; transform: translateY(0); } .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-deep); } .product-card a { color: inherit; display: block; } .product-img { background: var(--gray-50); aspect-ratio: 4/3; overflow: hidden; } .product-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: saturate(0.86) brightness(0.92); transition: transform 0.75s ease, filter 0.75s ease; } .product-card.in-view .product-img img { transform: scale(1); filter: saturate(1) brightness(1); } .product-info { padding: 1.1rem 1.25rem 0.75rem; } .product-info .name { font-weight: 600; font-size: 0.95rem; color: var(--near-black); } .product-info .price { font-size: 0.85rem; color: var(--gray-400); margin-top: 0.35rem; text-decoration: none; } .product-info .price span { color: var(--green-deep); font-weight: 700; text-decoration: none; } /* ============================================ DEALERS — Find a Dealer lookup ============================================ */ .dealers-page, .products-page { min-height: calc(100vh - 280px); } .dealers-section { padding: 7rem 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f4f1eb 100%); } .dealers-section .section-header { margin-bottom: 2.5rem; } .dealers-intro { max-width: 540px; margin: 0.5rem auto 0; font-size: 1rem; color: var(--gray-600); line-height: 1.6; } .dealer-lookup { max-width: 700px; margin: 0 auto; } .dealer-search-bar { display: flex; gap: 0.75rem; margin-bottom: 2rem; } .dealer-search-bar input { flex: 1; padding: 1rem 1.25rem; font-family: inherit; font-size: 1rem; border: 1.5px solid var(--gray-200); border-radius: 8px; background: var(--white); color: var(--near-black); transition: border-color 0.2s, box-shadow 0.2s; } .dealer-search-bar input::placeholder { color: var(--gray-400); } .dealer-search-bar input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 160, 33, 0.2); } .dealer-search-btn { flex-shrink: 0; white-space: nowrap; } .dealer-results { min-height: 120px; } .dealer-results-hint, .dealer-no-results { color: var(--gray-500); font-size: 0.95rem; padding: 1.5rem; text-align: center; } .dealer-no-results { color: var(--gray-600); } .dealer-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.9rem; } .dealer-card { background: linear-gradient(180deg, #ffffff 0%, #f7f3ee 100%); border: 1px solid var(--gray-100); border-radius: 8px; padding: 1rem 1.15rem; box-shadow: var(--shadow-soft); transition: border-color 0.3s, box-shadow 0.3s; } .dealer-card:hover { border-color: var(--gold); box-shadow: var(--shadow-deep); } .dealer-listing-box { background: var(--warm-white); border: 1px solid var(--gray-100); border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow-soft); } .dealer-result-count { font-size: 0.9rem; color: var(--gray-500); margin-bottom: 1rem; } .dealer-pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--gray-100); } .dealer-page-btn { background: var(--near-black); color: #fff; border: none; border-radius: 6px; padding: 0.55rem 1.5rem; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .dealer-page-btn:hover:not(:disabled) { background: var(--green-dark); } .dealer-page-btn:disabled { background: var(--gray-200); color: var(--gray-400); cursor: not-allowed; } .dealer-page-info { font-size: 0.95rem; color: var(--near-black); font-weight: 600; } .dealer-name { font-family: 'Geist', 'Inter', sans-serif; font-size: 1rem; font-weight: 700; color: var(--near-black); margin-bottom: 0.35rem; } .dealer-address, .dealer-location { font-size: 0.82rem; color: var(--gray-600); margin: 0.15rem 0; line-height: 1.4; } .dealer-phone { display: inline-block; margin-top: 0.4rem; font-size: 0.85rem; font-weight: 600; color: var(--gold); transition: color 0.2s; } .dealer-phone:hover { color: var(--green-deep); } .dealer-products { font-size: 0.75rem; color: var(--gray-500); margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--gray-100); } .dealer-card.active { border-color: var(--gold); box-shadow: var(--shadow-deep); } .dealer-map-wrap { margin-top: 2rem; border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-100); box-shadow: var(--shadow-soft); } .dealer-map { width: 100%; height: 350px; border: none; display: block; } /* WP Store Locator theming */ .dealer-locator-shell #wpsl-wrap { background: var(--warm-white); border: 1px solid var(--gray-100); border-radius: 12px; box-shadow: var(--shadow-soft); padding: 1.15rem; } .dealer-locator-shell #wpsl-search-wrap { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--gray-100); } .dealer-locator-shell #wpsl-search-input { width: 100%; min-height: 46px; border: 1.5px solid var(--gray-200); border-radius: 8px; padding: 0.65rem 0.9rem; font-size: 0.95rem; } .dealer-locator-shell #wpsl-search-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 160, 33, 0.15); } .dealer-locator-shell #wpsl-search-btn, .dealer-locator-shell #wpsl-reset-btn { min-height: 44px; border-radius: 8px; border: none; padding: 0 1rem; font-weight: 600; cursor: pointer; } .dealer-locator-shell #wpsl-search-btn { background: var(--gold-gradient); color: #fff; } .dealer-locator-shell #wpsl-search-btn:hover { background: var(--gold-gradient-hover); } .dealer-locator-shell #wpsl-reset-btn { background: var(--gray-100); color: var(--gray-700); } .dealer-locator-shell #wpsl-stores ul { margin: 0; padding: 0; } .dealer-locator-shell #wpsl-stores li { border: 1px solid var(--gray-100); border-radius: 8px; margin: 0 0 0.7rem; padding: 0.8rem 0.9rem; background: #fff; } .dealer-locator-shell #wpsl-result-list { border: none; margin-right: 1rem; } .dealer-locator-shell #wpsl-gmap { border-radius: 10px; border: 1px solid var(--gray-100); } /* ---- Become a Dealer ---- */ .dealer-apply-section { padding: 5rem 0 6rem; background: var(--green-deep); } .dealer-apply-cta { text-align: center; max-width: 600px; margin: 0 auto; } .dealer-apply-cta .eyebrow { color: var(--gold); } .dealer-apply-cta h2 { color: var(--white); font-size: 2.4rem; font-weight: 900; margin-bottom: 1rem; } .dealer-apply-cta p { color: rgba(255, 255, 255, 0.75); line-height: 1.7; margin-bottom: 2rem; } /* ---- Dealer Modal ---- */ .dealer-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 1.5rem; } .dealer-modal-overlay.active { opacity: 1; visibility: visible; } .dealer-modal { background: var(--white); border-radius: 12px; width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); transform: translateY(20px); transition: transform 0.3s ease; } .dealer-modal-overlay.active .dealer-modal { transform: translateY(0); } .dealer-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; background: var(--white); border-radius: 12px 12px 0 0; z-index: 1; } .dealer-modal-header h3 { font-family: 'Geist', 'Inter', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--near-black); } .dealer-modal-close { background: none; border: none; font-size: 1.75rem; color: var(--gray-500); cursor: pointer; line-height: 1; padding: 0.25rem; transition: color 0.2s; } .dealer-modal-close:hover { color: var(--near-black); } .dealer-modal-body { padding: 2rem; } .dealer-apply-form label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.35rem; } .dealer-apply-form label .req { color: #c0392b; } .dealer-apply-form input, .dealer-apply-form select, .dealer-apply-form textarea { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--gray-200); border-radius: 6px; font-size: 0.95rem; font-family: 'Inter', sans-serif; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; } .dealer-apply-form input:focus, .dealer-apply-form select:focus, .dealer-apply-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 160, 33, 0.15); } .dealer-apply-form input::placeholder, .dealer-apply-form textarea::placeholder { color: var(--gray-400); } .dealer-apply-form select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23555' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; cursor: pointer; } .dealer-apply-form textarea { resize: vertical; } .dealer-apply-form .form-group { margin-bottom: 1.25rem; } .dealer-apply-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .dealer-apply-form .form-row-3 { grid-template-columns: 1fr 1fr 1fr; } .dealer-apply-form .btn-primary { width: 100%; margin-top: 0.5rem; } .dealer-modal-body .form-success { text-align: center; padding: 1.25rem; background: #eafaf1; border: 1px solid #27ae60; border-radius: 8px; color: #1e7e46; font-weight: 600; font-size: 0.95rem; margin-top: 1.25rem; display: none; } .dealer-modal-body .form-success.active { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* ============================================ CONTACT PAGE ============================================ */ .contact-section { padding: 7rem 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #f4f1eb 100%); } .contact-section .section-header { margin-bottom: 2.5rem; } .contact-layout { display: grid; grid-template-columns: 1fr 280px; gap: 4rem; max-width: 800px; margin: 0 auto; } .contact-form .form-group { margin-bottom: 1.25rem; } .contact-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: var(--near-black); } .form-optional { font-weight: 400; color: var(--gray-400); } .contact-form input, .contact-form textarea { width: 100%; padding: 0.75rem 1rem; font-family: inherit; font-size: 0.95rem; border: 1px solid var(--gray-200); border-radius: 6px; background: #fff; transition: border-color 0.2s, box-shadow 0.2s; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 160, 33, 0.2); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--gray-400); } .contact-form textarea { resize: vertical; } .contact-form .btn-primary { width: 100%; margin-top: 0.5rem; } /* ---- Contact Form 7 styling ---- */ .contact-layout .wpcf7-form p { margin-bottom: 1.25rem; } .contact-layout .wpcf7-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); } .contact-layout .wpcf7-form input[type="text"], .contact-layout .wpcf7-form input[type="email"], .contact-layout .wpcf7-form input[type="tel"], .contact-layout .wpcf7-form textarea { width: 100%; padding: 0.75rem 1rem; font-family: inherit; font-size: 0.95rem; border: 1px solid var(--gray-200); border-radius: 0; background: #fff; color: var(--text); transition: border-color 0.2s, box-shadow 0.2s; box-sizing: border-box; } .contact-layout .wpcf7-form input[type="text"]:focus, .contact-layout .wpcf7-form input[type="email"]:focus, .contact-layout .wpcf7-form input[type="tel"]:focus, .contact-layout .wpcf7-form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(197, 160, 33, 0.2); } .contact-layout .wpcf7-form textarea { resize: vertical; min-height: 130px; } .contact-layout .wpcf7-form input[type="submit"] { width: 100%; margin-top: 0.5rem; padding: 0.85rem 2rem; background: var(--gold); color: #fff; font-family: inherit; font-size: 1rem; font-weight: 700; border: none; cursor: pointer; transition: background 0.2s; } .contact-layout .wpcf7-form input[type="submit"]:hover { background: var(--gold-dark, #b8860b); } .contact-layout .wpcf7-response-output { margin-top: 1rem; padding: 0.75rem 1rem; font-size: 0.9rem; border: none !important; } .contact-layout .wpcf7-mail-sent-ok { background: rgba(27, 48, 34, 0.08); color: var(--green-deep); font-weight: 600; } .contact-layout .wpcf7-validation-errors, .contact-layout .wpcf7-mail-sent-ng { background: rgba(192, 57, 43, 0.08); color: #c0392b; } .contact-layout .wpcf7-spinner { display: block; margin: 0.75rem auto 0; } .form-success { display: none; margin-top: 1rem; padding: 1rem; text-align: center; font-weight: 600; color: var(--green-deep); background: rgba(27, 48, 34, 0.08); border-radius: 6px; } .form-success.active { display: block; } .contact-info { padding-top: 0.5rem; } .contact-info-item { margin-bottom: 1.5rem; } .contact-info-item h4 { font-family: var(--font-heading); font-size: 0.95rem; margin-bottom: 0.35rem; color: var(--near-black); } .contact-info-item p { font-size: 0.9rem; color: var(--gray-600); line-height: 1.6; } .contact-info-item a { color: var(--gold); font-weight: 600; transition: color 0.2s; } .contact-info-item a:hover { color: var(--green-deep); } /* ============================================ HONEYCOMB PATTERN — subtle overlay on dark sections ============================================ */ .overview-section::before, .gallery-section::before { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34L28 66zm0 34L0 84V50l28-16 28 16v34L28 100z' fill='none' stroke='%23C5A021' stroke-width='0.5' opacity='0.06'/%3E%3C/svg%3E"); background-size: 56px 100px; pointer-events: none; z-index: 0; } .overview-section>*, .gallery-section>* { position: relative; z-index: 1; } /* ============================================ BEAR PAW WATERMARK — behind section headers ============================================ */ .showcase-section .section-header, .overview-text { position: relative; } .showcase-section .section-header::before { content: ''; position: absolute; width: 280px; height: 280px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 240'%3E%3Cdefs%3E%3Cstyle%3E.p%7Bfill:%23C5A021;opacity:0.04%7D%3C/style%3E%3C/defs%3E%3Cpath class='p' d='M60 130 C55 115, 58 95, 75 88 L125 88 C142 95, 145 115, 140 130 C138 148, 130 168, 120 178 Q100 192 80 178 C70 168, 62 148, 60 130Z'/%3E%3Cellipse class='p' cx='85' cy='140' rx='12' ry='10'/%3E%3Cellipse class='p' cx='115' cy='140' rx='12' ry='10'/%3E%3Cellipse class='p' cx='100' cy='158' rx='10' ry='8'/%3E%3Cellipse class='p' cx='42' cy='78' rx='14' ry='17' transform='rotate(-20 42 78)'/%3E%3Cellipse class='p' cx='68' cy='52' rx='13' ry='18' transform='rotate(-10 68 52)'/%3E%3Cellipse class='p' cx='100' cy='44' rx='13' ry='18'/%3E%3Cellipse class='p' cx='132' cy='52' rx='13' ry='18' transform='rotate(10 132 52)'/%3E%3Cellipse class='p' cx='158' cy='78' rx='14' ry='17' transform='rotate(20 158 78)'/%3E%3Cpath class='p' d='M30 58 C32 48, 38 42, 36 52 C34 56, 31 60, 30 58Z'/%3E%3Cpath class='p' d='M60 30 C62 20, 66 14, 65 24 C64 28, 61 33, 60 30Z'/%3E%3Cpath class='p' d='M96 22 C98 12, 102 6, 101 16 C100 20, 97 25, 96 22Z'/%3E%3Cpath class='p' d='M134 30 C136 20, 140 14, 139 24 C138 28, 135 33, 134 30Z'/%3E%3Cpath class='p' d='M164 58 C166 48, 170 42, 168 52 C167 56, 165 60, 164 58Z'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; pointer-events: none; z-index: 0; } .showcase-section .section-header>* { position: relative; z-index: 1; } /* Gold accent underlines on section headings */ .section-header h2::after { display: none; } @media (max-width: 700px) { .contact-section { padding: 4rem 0; } .contact-layout { grid-template-columns: 1fr; gap: 2.5rem; } } /* ============================================ CTA BANNER — Full-bleed image with parallax ============================================ */ .cta-banner { position: relative; padding: calc(3rem + 4vw) 3rem; text-align: center; overflow: hidden; min-height: 250px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 28px 80px rgba(7, 11, 10, 0.28), inset 0 -28px 80px rgba(7, 11, 10, 0.28); } .cta-bg { position: absolute; inset: -10%; z-index: 0; will-change: transform; background: #142019; } .cta-bg picture { display: block; width: 100%; height: 100%; } .cta-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; animation: ctaImagePulse 16s ease-in-out infinite alternate; display: block; } .cta-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 20, 17, 0.82) 0%, rgba(9, 14, 13, 0.78) 100%), radial-gradient(560px 300px at 24% 14%, rgba(197, 160, 33, 0.24), transparent 72%); z-index: 1; } .cta-banner-content { position: relative; z-index: 2; max-width: 600px; margin: 0 auto; } .cta-banner-content h2 { font-size: 2.8rem; font-weight: 900; color: var(--white); margin-bottom: 1rem; } .cta-banner-content p { font-size: 1.1rem; font-weight: 400; color: rgba(255, 255, 255, 0.75); margin-bottom: 2.5rem; line-height: 1.7; } @keyframes heroButtonFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes heroImageReveal { from { opacity: 0; transform: scale(1.18); filter: saturate(0.8) brightness(0.9); } to { opacity: 1; transform: scale(1.1); filter: saturate(1) brightness(1); } } @keyframes heroImageDrift { from { filter: saturate(1) brightness(1); } to { filter: saturate(1.07) brightness(1.04); } } @keyframes imageBreakTone { from { filter: saturate(0.92) contrast(0.97); } to { filter: saturate(1.06) contrast(1.03); } } @keyframes ctaImagePulse { from { filter: saturate(0.92) brightness(0.92); } to { filter: saturate(1.04) brightness(1); } } @keyframes imageSweep { 0% { transform: translateX(-130%); } 100% { transform: translateX(130%); } } /* ============================================ TRUST STRIP ============================================ */ .trust-strip { background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-100); padding: 1.75rem 3rem; } .trust-strip.anim-on-scroll { transform: none; opacity: 0; transition: opacity 2.8s ease; } .trust-strip.anim-on-scroll.in-view { opacity: 1; transform: none; } .trust-strip-inner { display: flex; justify-content: center; align-items: center; gap: 3rem; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; } .trust-badge { display: flex; align-items: center; gap: 0.6rem; color: var(--gray-700); } .trust-badge svg { color: var(--green-deep); flex-shrink: 0; } .trust-badge span { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; } /* ============================================ FOOTER PRE-SPACING Dynamically add padding to sections that sit directly above the footer mask so their content is never swallowed by the scaling vw overlap on massive screens. ============================================ */ .dealer-apply-section, .contact-section, .products-layout, .product-page, .page-section, .default-page, .rl-page, .sk-page { padding-bottom: 5rem !important; } .cta-banner { padding-bottom: 3rem !important; } @media (max-width: 900px) { .dealer-apply-section, .contact-section, .products-layout, .product-page, .page-section, .default-page, .rl-page, .sk-page { padding-bottom: 3rem !important; } .cta-banner { /* Reduced from 4.6rem + 5.5vw to allow the footer image mask to creep up closer to the text */ padding-bottom: calc(1rem + 5.5vw) !important; } } @media (max-width: 767px) { .dealer-apply-section, .contact-section, .products-layout, .product-page, .page-section, .default-page, .rl-page, .sk-page { padding-bottom: 2.5rem !important; } .cta-banner { /* Reduced drastically from 4.6rem + 16vw to allow the 16vw footer mask to visually overlap the CTA area correctly */ padding-bottom: calc(0.5rem + 16vw) !important; } } /* ============================================ FOOTER ============================================ */ .footer-border-mask { width: 100%; line-height: 0; overflow: hidden; margin-top: 0; position: relative; background: transparent; z-index: 60; pointer-events: none; } /* Pull footer image up so transparent area overlaps content above. Same overlap for front page and inner pages since they now share the same image — without this match, inner pages show a giant gap. */ .footer-border-mask { margin-top: -52vw; } @media (max-width: 900px) { .footer-border-mask:not(.footer-border-inner) { margin-top: -5.5vw; } .footer-border-inner { margin-top: -9vw; } } @media (max-width: 767px) { /* Different mask image on mobile, requires unique scaling */ .footer-border-mask:not(.footer-border-inner) { margin-top: -16vw; } .footer-border-inner { margin-top: -24vw; } } .footer-border-mask::before { display: none; } .footer-border-mask img, .footer-border-mask picture img { position: relative; z-index: 2; display: block; width: 100%; height: auto; pointer-events: none; } /* ---------------------------------------- FOOTER IMAGE STRIP — links + copyright overlay ---------------------------------------- The footer image (.footer-border-mask) has a wooden band at the bottom; this container sits over that band. POSITION KNOBS (all scale proportionally with the footer image): - bottom on .footer-image-links → % of image height. Vertical anchor. Bigger = strip moves UP the wood. - gap on .footer-image-links → space between links and copyright. - font-size on .footer-bottom → copyright text size. - transform on .footer-bottom → fine-tune copyright only. Why `bottom` is a % and everything else is vw: The image is `width: 100%; height: auto`, so its height tracks viewport width × aspect ratio. `bottom: X%` is relative to the parent's HEIGHT (= image's rendered height) so the strip lands on the same wooden-band fraction at any viewport size. `vw` values for padding/font/gap track the image's WIDTH the same way, so everything scales together. Mobile values are in @media (max-width: 767px) below — separate because the mobile image variant has a different aspect ratio. ---------------------------------------- */ .footer-image-links { position: absolute; bottom: 0; left: 0; right: 0; z-index: 10; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 2vw; /* Space between the links row and the copyright line. */ gap: 0.3vw; line-height: normal; text-align: center; } .footer-image-links .footer-grid { display: flex; justify-content: center; align-items: center; gap: 2vw; flex: 0 0 auto; width: 100%; max-width: none; transform: none; } .footer-image-links .footer-col { width: auto; flex: none; } .footer-image-links .footer-col ul { display: flex; justify-content: center; align-items: center; gap: 2vw; padding: 0; margin: 0; list-style: none; } .footer-image-links .footer-col ul li a { color: #c9ad6a; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); font-size: 0.8vw; font-weight: 500; letter-spacing: 0.03em; } .footer-image-links .footer-col ul li a:hover, .footer-image-links .footer-col ul li a:active, .footer-image-links .footer-col ul li a:focus { color: #fff; } /* Copyright line sits below the link row inside the overlay. Overrides the regular .footer-bottom rule (which is for the dark footer at the very bottom of the page, not for the link strip on the image). */ .footer-image-links .footer-bottom { position: static; display: block; flex: 0 0 auto; margin: 0; padding: 0; transform: translateY(-.3vw); color: #c9ad6a; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.6); font-size: 0.45vw; line-height: 1; text-align: center; max-width: none; white-space: nowrap; pointer-events: auto; } /* Mobile uses a taller image variant; bump everything up proportionally. */ @media (max-width: 767px) { .footer-image-links { padding: 0 6vw 4vw; gap: 1.5vw; } .footer-image-links .footer-grid { gap: 4vw; } .footer-image-links .footer-col ul li a { font-size: 1.5vw; } .footer-image-links .footer-bottom { font-size: 1.3vw; white-space: normal; max-width: 60vw; } } footer { position: relative; z-index: 10; background: var(--near-black); color: rgba(255, 255, 255, 0.55); padding: 1.25rem 3rem 0.5rem; } .footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 3rem); max-width: 1200px; margin: 0 auto; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-col { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 1.25rem; } .footer-col h4 { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0; } .footer-col ul { list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 1.25rem; } .footer-col ul li a { font-size: 0.9rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); transition: color 0.2s; } .footer-col ul li a:hover, .footer-col ul li a:active, .footer-col ul li a:focus { color: var(--white); } .footer-brand { display: flex; align-items: center; justify-content: flex-end; } .footer-brand img { height: 90px; width: auto; } .footer-bottom { display: flex; justify-content: center; align-items: center; font-size: 0.75rem; color: rgba(255, 255, 255, 0.3); padding-top: 0.75rem; max-width: 1200px; margin: 0 auto; } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { color: rgba(255, 255, 255, 0.3); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: rgba(255, 255, 255, 0.6); } /* ============================================ CART SIDEBAR ============================================ */ .cart-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .cart-overlay.active { opacity: 1; pointer-events: all; } .cart-sidebar { position: fixed; top: 0; right: 0; width: 380px; height: 100%; background: var(--white); color: var(--gray-800); z-index: 1000; transform: translateX(100%); transition: transform 0.3s; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(0, 0, 0, 0.1); } .cart-sidebar.active { transform: translateX(0); } .cart-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem; border-bottom: 1px solid var(--gray-100); } .cart-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--near-black); } .cart-close { background: none; border: none; color: var(--gray-400); font-size: 1.4rem; cursor: pointer; transition: color 0.2s; } .cart-close:hover { color: var(--near-black); } .cart-items { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; } .cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--gray-100); align-items: center; } .cart-item-img { width: 56px; height: 56px; background: var(--gray-50); border-radius: 6px; flex-shrink: 0; overflow: hidden; } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .cart-item-details { flex: 1; } .cart-item-details .ci-name { font-weight: 600; font-size: 0.9rem; } .cart-item-details .ci-name a { color: #b8860b; } .cart-item-details .ci-name a:hover { color: #8a6400; } .cart-item-details .ci-price { color: var(--green-deep); font-size: 0.85rem; font-weight: 600; margin-top: 0.2rem; } .cart-item-qty { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.4rem; } .cart-item-qty button { width: 24px; height: 24px; border: 1px solid var(--gray-200); background: none; color: var(--gray-800); font-size: 0.85rem; cursor: pointer; border-radius: 3px; } .cart-item-qty button:hover { border-color: var(--green-deep); } .cart-item-qty span { font-size: 0.85rem; min-width: 20px; text-align: center; } .cart-item-remove { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 0.85rem; } .cart-item-remove:hover { color: #d44; } .cart-empty { text-align: center; color: var(--gray-400); padding: 3rem 0; font-size: 0.95rem; } .cart-footer { border-top: 1px solid var(--gray-100); padding: 1.5rem; } .cart-total { display: flex; justify-content: space-between; font-size: 1.05rem; font-weight: 600; margin-bottom: 1rem; } .cart-total span:last-child { color: var(--green-deep); } .cart-view { display: block; width: 100%; background: var(--gray-100); color: var(--near-black); border: 1px solid var(--gray-200); padding: 0.85rem; margin-bottom: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; text-decoration: none; border-radius: 4px; transition: all 0.25s ease; } .cart-view:hover { background: var(--gray-200); transform: translateY(-1px); } .cart-checkout { text-align: center; text-decoration: none; display: block; width: 100%; background: var(--gold-gradient); color: var(--white); border: none; padding: 0.85rem; font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: all 0.25s ease; } .cart-checkout:hover { background: var(--gold-gradient-hover); transform: translateY(-1px); } .cart-continue { display: block; width: 100%; background: transparent; color: var(--green-deep); border: 2px solid var(--green-deep); padding: 0.75rem; margin-top: 0.5rem; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: all 0.25s ease; } .cart-continue:hover { background: var(--green-deep); color: var(--white); } /* ============================================ SEARCH ============================================ */ .search-bar { display: flex; align-items: center; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 4px; padding: 0.4rem 0.8rem; gap: 0.5rem; width: 220px; position: relative; transition: border-color 0.2s; } .search-bar:focus-within { border-color: var(--green-deep); } .search-bar input { background: none; border: none; outline: none; color: var(--gray-800); font-family: 'Inter', sans-serif; font-size: 0.85rem; width: 100%; } .search-bar input::placeholder { color: var(--gray-400); } .search-bar svg { color: var(--gray-400); flex-shrink: 0; } .search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1px solid var(--gray-200); border-top: none; border-radius: 0 0 4px 4px; max-height: 300px; overflow-y: auto; display: none; z-index: 200; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); } .search-results.active { display: block; } .search-results a { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; color: var(--gray-800); font-size: 0.85rem; transition: background 0.15s; } .search-results a:hover { background: var(--gray-50); } .search-results a .sr-price { margin-left: auto; color: var(--green-deep); font-weight: 600; font-size: 0.8rem; } .search-results .no-results { padding: 0.8rem; color: var(--gray-400); font-size: 0.85rem; text-align: center; } /* ============================================ PRODUCTS PAGE / DETAIL (other pages) ============================================ */ .page-section { padding: 4rem 3rem; max-width: 1200px; margin: 0 auto; } .page-section h1 { font-size: 2.4rem; font-weight: 900; margin-bottom: 0.5rem; } .page-section h1::after { content: ''; display: block; width: 50px; height: 3px; background: var(--gold); margin-top: 0.6rem; } .page-section .subtitle { color: var(--gray-600); margin-bottom: 2.5rem; } /* Products page layout */ .products-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2.5rem; max-width: 1280px; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .products-sidebar { position: sticky; top: 120px; height: fit-content; } .products-sidebar-inner { background: var(--white); border: 1px solid var(--gray-100); border-radius: 8px; padding: 1.25rem; box-shadow: var(--shadow-soft); } .filter-title { font-family: 'Geist', 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--near-black); margin-bottom: 1rem; } .filter-nav { display: flex; flex-direction: column; gap: 0.25rem; /* .filter-nav is a