/* Inter is loaded via with preconnect in each page's for performance — no @import here (it blocks render). */ :root{ --black:#0a0a0a; --white:#f5f5f2; --grey:#8a8a86; --line:rgba(245,245,242,0.14); --line-strong:rgba(245,245,242,0.28); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:'Inter', sans-serif; background:var(--black); color:var(--white); -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--white); color:var(--black); } /* ---------- SCROLL REVEAL ---------- */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal.in{ opacity:1; transform:translateY(0); } .about.reveal p{ opacity:0; transform:translateY(14px); transition:opacity 0.6s ease, transform 0.6s ease; } .about.reveal.in p{ opacity:1; transform:translateY(0); } .about.reveal.in p:nth-of-type(1){ transition-delay:0.05s; } .about.reveal.in p:nth-of-type(2){ transition-delay:0.15s; } .about.reveal.in p:nth-of-type(3){ transition-delay:0.25s; } .about.reveal.in p:nth-of-type(4){ transition-delay:0.35s; } .about.reveal.in p:nth-of-type(5){ transition-delay:0.45s; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .reveal, .about.reveal p{ opacity:1 !important; transform:none !important; transition:none !important; } } /* ---------- HEADER ---------- */ .header{ position:fixed; top:0; left:0; right:0; z-index:60; display:flex; align-items:center; justify-content:space-between; padding:22px 6vw; background:linear-gradient(var(--black) 45%, transparent); transition:background 0.4s ease, border-color 0.4s ease; border-bottom:1px solid transparent; } .header.scrolled{ background:rgba(10,10,10,0.85); backdrop-filter:blur(10px); border-bottom-color:var(--line); } .header .logo img{ height:32px; width:auto; } .header nav{ display:flex; align-items:center; gap:32px; } .header nav a{ position:relative; font-size:11px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--grey); transition:color 0.3s ease; } .header nav a::after{ content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background:var(--white); transform:scaleX(0); transform-origin:right; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); } .header nav a:hover{ color:var(--white); } .header nav a:hover::after{ transform:scaleX(1); transform-origin:left; } .header .logo img{ transition:opacity 0.3s ease; } .header .logo:hover img{ opacity:0.7; } /* Shared primary button — header CTA + product Add to cart */ .btn-primary{ display:inline-block; background:var(--white); color:var(--black); font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:12px 20px; border:none; cursor:pointer; transition:opacity 0.3s ease; } .btn-primary:hover{ opacity:0.82; } .header nav a.btn-nav{ color:var(--black); padding:10px 18px; font-size:10.5px; } .header nav a.btn-nav::after{ display:none; } .header nav a.btn-nav:hover{ color:var(--black); } /* ---------- MOBILE MENU ---------- */ .menu-toggle{ display:none; width:32px; height:22px; background:none; border:none; cursor:pointer; position:relative; z-index:70; padding:0; } .menu-toggle span{ position:absolute; left:0; right:0; height:1px; background:var(--white); transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s ease; } .menu-toggle span:first-child{ top:4px; } .menu-toggle span:last-child{ bottom:4px; } .menu-toggle.open span:first-child{ transform:translateY(7px) rotate(45deg); } .menu-toggle.open span:last-child{ transform:translateY(-7px) rotate(-45deg); } .mobile-nav{ position:fixed; inset:0; z-index:55; background:var(--black); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px; transform:translateY(-100%); transition:transform 0.5s cubic-bezier(0.16,1,0.3,1); } .mobile-nav.open{ transform:translateY(0); } .mobile-nav a{ font-size:15px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--white); } .mobile-nav a.btn-primary{ color:var(--black); font-size:12px; margin-top:8px; } body.nav-open{ overflow:hidden; } @media (max-width:760px){ .nav-desktop{ display:none; } .menu-toggle{ display:block; } } /* ---------- HERO ---------- */ .hero{ position:relative; width:100%; height:100vh; overflow:hidden; background:#000; } .hero-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center center; } .hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); } .hero-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:40px; } .hero-logo{ width:95px; margin-bottom:60px; } .hero h1{ font-size:clamp(52px,7vw,110px); font-weight:700; letter-spacing:.18em; color:#fff; margin-bottom:22px; } .hero p{ font-size:18px; color:#d8d8d8; letter-spacing:.08em; margin-bottom:48px; } .hero-button{ display:inline-flex; justify-content:center; align-items:center; padding:18px 46px; border:1px solid #fff; color:#fff; text-decoration:none; letter-spacing:.18em; font-size:12px; transition:.35s; } .hero-button:hover{ background:#fff; color:#000; } @media (max-width:640px){ .hero h1{ letter-spacing:.08em; } .hero-logo{ width:70px; margin-bottom:40px; } .hero-button{ padding:16px 34px; } } /* ---------- PRODUCT ---------- */ .product{ padding:16vh 6vw 14vh; border-top:1px solid var(--line); } .product-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; } /* Gallery */ .product-gallery{ display:flex; flex-direction:column; } .gallery-main{ background:none; border:1px solid var(--line); padding:0; cursor:zoom-in; display:block; width:100%; overflow:hidden; } .gallery-main img{ width:100%; aspect-ratio:2/3; object-fit:cover; transition:transform 0.6s cubic-bezier(0.16,1,0.3,1); } .gallery-main:hover img{ transform:scale(1.03); } .gallery-thumbs{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; } .thumb{ background:none; padding:0; cursor:pointer; border:1px solid var(--line-strong); width:64px; overflow:hidden; opacity:0.55; transition:opacity 0.3s ease, border-color 0.3s ease; } .thumb img{ aspect-ratio:2/3; object-fit:cover; } .thumb:hover{ opacity:0.85; } .thumb.active{ opacity:1; border-color:var(--white); } .gallery-note{ margin-top:14px; font-size:11.5px; color:var(--grey); line-height:1.5; } /* Info column */ .product-info{ padding-top:4px; } .product-info .kicker{ font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--grey); margin-bottom:18px; } .product-info h2{ font-size:clamp(1.8rem,3vw,2.5rem); font-weight:700; letter-spacing:-0.01em; line-height:1.05; } .product-info .price{ margin-top:12px; font-size:15px; color:var(--grey); } .product-info .desc{ margin-top:22px; font-size:14.5px; font-weight:300; line-height:1.7; color:#cfcecb; max-width:44ch; } .specs-tags{ margin-top:18px; display:flex; flex-wrap:wrap; gap:10px; } .specs-tags div{ font-size:10.5px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); padding:8px 14px; border:1px solid var(--line-strong); transition:color 0.3s ease, border-color 0.3s ease, background 0.3s ease; } .specs-tags div:hover{ color:var(--black); background:var(--white); border-color:var(--white); } /* Sizes */ .sizes{ margin-top:34px; } .sizes-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } .sizes-head .label{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--grey); } .size-guide-toggle{ background:none; border:none; color:var(--grey); cursor:pointer; font-size:11px; letter-spacing:0.06em; text-decoration:underline; text-underline-offset:3px; transition:color 0.3s ease; } .size-guide-toggle:hover{ color:var(--white); } .size-row{ display:flex; gap:8px; flex-wrap:wrap; } .size-row button{ min-width:46px; min-height:44px; padding:10px 6px; background:none; border:1px solid var(--line-strong); color:var(--white); font-size:12px; letter-spacing:0.04em; cursor:pointer; transition:background 0.2s ease, color 0.2s ease; } .size-row button:hover, .size-row button.active{ background:var(--white); color:var(--black); } /* Add to cart — real link to Big Cartel; color/weight come from .btn-primary */ .add-cart{ margin-top:30px; display:block; width:100%; padding:16px; text-align:center; font-size:12px; } .add-cart-note{ margin-top:10px; font-size:11px; color:var(--grey); } /* Accordion */ .accordion{ margin-top:36px; border-top:1px solid var(--line); } .accordion details{ border-bottom:1px solid var(--line); } .accordion summary{ padding:16px 0; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; cursor:pointer; display:flex; justify-content:space-between; align-items:center; list-style:none; } .accordion summary::-webkit-details-marker{ display:none; } .accordion summary::after{ content:"+"; color:var(--grey); } .accordion details[open] summary::after{ content:"–"; } .accordion .body{ padding-bottom:16px; font-size:13px; font-weight:300; color:#c9c8c3; line-height:1.7; } .accordion .flag{ display:block; margin-top:6px; color:var(--grey); font-size:11.5px; } @media (max-width:860px){ .product-grid{ grid-template-columns:1fr; gap:44px; } } /* Size guide modal */ .modal{ position:fixed; inset:0; z-index:90; background:rgba(10,10,10,0.9); display:flex; align-items:center; justify-content:center; padding:6vw; opacity:0; pointer-events:none; transition:opacity 0.3s ease; } .modal.open{ opacity:1; pointer-events:auto; } .modal-inner{ background:var(--black); border:1px solid var(--line-strong); max-width:440px; width:100%; padding:36px 28px; position:relative; } .modal-inner h3{ font-size:1.2rem; font-weight:700; margin-bottom:20px; } .modal-inner table{ width:100%; border-collapse:collapse; } .modal-inner th, .modal-inner td{ text-align:left; font-size:12.5px; padding:8px 6px; border-bottom:1px solid var(--line); color:#cfcecb; font-weight:400; } .modal-inner th{ color:var(--grey); text-transform:uppercase; letter-spacing:0.06em; font-size:11px; } .modal-note{ margin-top:16px; font-size:11.5px; color:var(--grey); } .modal-close{ position:absolute; top:10px; right:10px; background:none; border:none; color:var(--white); font-size:20px; cursor:pointer; width:44px; height:44px; } /* Full-screen lightbox */ .lightbox{ position:fixed; inset:0; z-index:95; background:rgba(10,10,10,0.97); display:flex; align-items:center; justify-content:center; padding:5vh 5vw; opacity:0; pointer-events:none; transition:opacity 0.35s ease; } .lightbox.open{ opacity:1; pointer-events:auto; } .lightbox img{ max-width:100%; max-height:90vh; object-fit:contain; } .lightbox-close{ position:fixed; top:16px; right:calc(5vw - 4px); background:none; border:none; color:var(--white); font-size:26px; cursor:pointer; width:44px; height:44px; } /* ---------- ABOUT ---------- */ .about{ padding:16vh 6vw; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; text-align:center; } .about h2{ font-size:clamp(1.2rem, 2.2vw, 1.5rem); font-weight:700; letter-spacing:0.06em; margin-bottom:34px; } .about p{ max-width:520px; font-size:clamp(1.1rem, 2.4vw, 1.5rem); font-weight:300; line-height:1.7; color:#e4e3de; } .about p:last-of-type{ margin-top:18px; font-weight:500; color:var(--white); } /* ---------- CONTACT ---------- */ #contact{ padding:12vh 6vw; border-top:1px solid var(--line); display:flex; justify-content:center; gap:40px; flex-wrap:wrap; } #contact a{ position:relative; font-size:12px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:var(--grey); padding-bottom:4px; transition:color 0.3s ease; } #contact a::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--line-strong); transform:scaleX(0); transform-origin:right; transition:transform 0.35s cubic-bezier(0.16,1,0.3,1), background 0.3s ease; } #contact a:hover{ color:var(--white); } #contact a:hover::after{ transform:scaleX(1); transform-origin:left; background:var(--white); } /* ---------- FOOTER ---------- */ footer{ padding:40px 6vw; border-top:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; } footer img{ height:26px; width:auto; opacity:0.85; transition:opacity 0.3s ease; } footer img:hover{ opacity:1; } .footer-nav{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; } .footer-nav a{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--grey); transition:color 0.3s ease; } .footer-nav a:hover{ color:var(--white); } footer p{ font-size:11px; letter-spacing:0.06em; color:var(--grey); } .footer-domain{ font-size:11px; letter-spacing:0.08em; color:#cfcecb; margin-top:-4px; } .footer-legal{ display:flex; gap:16px; margin-top:-6px; } .footer-legal a{ font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--grey); transition:color 0.3s ease; } .footer-legal a:hover{ color:var(--white); } /* ---------- SECONDARY PAGES ---------- */ .page{ min-height:100svh; padding:22vh 6vw 14vh; display:flex; flex-direction:column; align-items:center; text-align:center; } .page .eyebrow{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--grey); margin-bottom:20px; } .page h1{ font-size:clamp(2rem, 6vw, 3.4rem); font-weight:800; letter-spacing:-0.02em; line-height:1; margin-bottom:26px; } .page .lede{ max-width:560px; font-size:clamp(1rem, 2vw, 1.2rem); font-weight:300; color:#cfcecb; line-height:1.6; margin-bottom:10px; } .page-content{ max-width:680px; margin:6vh auto 0; text-align:left; } .page-content h2{ font-size:15px; font-weight:700; letter-spacing:0.04em; margin:2.2em 0 0.8em; } .page-content h2:first-child{ margin-top:0; } .page-content p{ font-size:14.5px; font-weight:300; line-height:1.8; color:#cfcecb; margin-bottom:1em; } .page-content .placeholder{ display:inline-block; color:var(--black); background:var(--white); font-size:11px; font-weight:600; letter-spacing:0.03em; padding:1px 6px; border-radius:2px; } .page-note{ max-width:680px; margin:0 auto 4vh; padding:14px 18px; text-align:left; border:1px dashed var(--line-strong); font-size:12.5px; color:var(--grey); line-height:1.6; } .page .home-link{ margin-top:44px; font-size:12px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase; border-bottom:1px solid var(--white); padding-bottom:6px; transition:color 0.3s ease, border-color 0.3s ease; } .page .home-link:hover{ color:var(--grey); border-color:var(--grey); } /* ---------- RESPONSIVE ---------- */ @media (max-width:640px){ .header{ padding:18px 5vw; } .header .logo img{ height:26px; } .product .specs div{ font-size:10px; padding:8px 14px; } }