/* Fonts loaded via in for faster, non-blocking delivery. */ :root{ --black:#0d0d0d; --ink:#232323; --cream:#ffffff; --beige:#f0f0f0; --white:#ffffff; --paper:#f0f0f0; --gold:#a8997f; --navy:#1b2953; --line:#e2e2e2; --muted:#5c5c5c; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ background:var(--cream); color:var(--black); font-family:'Jost',sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{list-style:none;} .container{max-width:1280px;margin:0 auto;padding:0 24px;} h1, h2, h3, .display{ font-family:'Jost',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.05; } .accent-serif{font-family:'Cinzel',serif;font-weight:500;} .wordmark{ font-family:'Bodoni Moda',serif; font-weight:500; font-size:26px; text-transform:lowercase; letter-spacing:-0.01em; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 30px; font-family:'Jost',sans-serif; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; border:1.5px solid var(--black); background:transparent; color:var(--black); cursor:pointer; transition:all .15s ease; } .btn:hover{background:var(--black);color:var(--white);} .btn-solid{background:var(--black);color:var(--white);} .btn-solid:hover{background:var(--navy);border-color:var(--navy);} .btn-gold{background:var(--gold);border-color:var(--gold);color:var(--black);} .btn-gold:hover{background:var(--black);border-color:var(--black);color:var(--white);} .btn-block{width:100%;} .btn[disabled]{opacity:.45;cursor:not-allowed;} .btn[disabled]:hover{background:transparent;color:var(--black);} /* Announcement bar */ .announce{ background:var(--navy); color:var(--white); text-align:center; font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:9px 0; } /* Header */ header.site-header{ position:sticky;top:0;z-index:50; background:var(--beige); border-bottom:1px solid var(--line); } .nav{ display:flex;align-items:center;justify-content:space-between; max-width:1280px;margin:0 auto; padding:14px 24px; } .logo-group{display:flex;align-items:center;gap:9px;} .logo-group img{height:64px;width:auto;} .nav-links{display:flex;gap:30px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;} .nav-links a{opacity:.75;transition:opacity .15s;} .nav-links a:hover{opacity:1;color:var(--navy);} .nav-right{display:flex;align-items:center;gap:22px;} .cart-link{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.06em;} .cart-count{ background:var(--gold);color:var(--black); border-radius:50%;width:20px;height:20px; display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:800; } .nav-toggle{display:none;background:none;border:none;color:var(--black);font-size:22px;cursor:pointer;} /* Hero — full-screen video */ .hero-full{ position:relative; width:100%; height:100vh; min-height:520px; padding:0; margin:0; overflow:hidden; background:var(--black); } @media(max-width:700px){ .hero-full{height:56vh;min-height:380px;} } .hero-video, .hero-video-fallback{ position:absolute;inset:0; width:100%;height:100%; object-fit:cover;object-position:center; } .hero-video-fallback{display:none;} .hero-full-overlay{ position:absolute;inset:0; background:linear-gradient(180deg, rgba(13,13,13,.35) 0%, rgba(13,13,13,.15) 45%, rgba(13,13,13,.55) 100%); } .hero-full-content{ position:relative;z-index:2; height:100%; display:flex;flex-direction:column;align-items:center;justify-content:center; gap:26px; text-align:center; padding:24px; } .hero-tag{ font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase; color:var(--white); background:rgba(13,13,13,.55); padding:9px 18px; border:1px solid rgba(255,255,255,.25); } /* Marquee */ .marquee{ border-bottom:1px solid var(--line); overflow:hidden;background:var(--gold); padding:12px 0; } .marquee-track{display:flex;gap:48px;white-space:nowrap;animation:scroll 24s linear infinite;width:max-content;} .marquee-track span{font-family:'Cinzel',serif;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--black);} @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* Sections */ section{padding:88px 0;} .section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-top:24px;margin-bottom:36px;gap:24px;flex-wrap:wrap;} .fit-section-head{ display:flex;align-items:center;gap:18px; margin:48px 0 28px; } .fit-section-head:first-child{margin-top:0;} .fit-section-title{ font-family:'Cinzel',serif; font-weight:600; font-size:clamp(24px,3vw,32px); text-transform:uppercase; letter-spacing:.08em; color:var(--navy); white-space:nowrap; } .fit-section-head::after{ content:""; flex:1; height:2px; background:var(--gold); } .section-head h2{font-size:clamp(30px,4vw,46px);} .section-head p{color:var(--muted);max-width:420px;font-size:14px;} /* Product grid */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;} .grid.grid-3{grid-template-columns:repeat(3,1fr);} @media(max-width:1000px){.grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.grid{grid-template-columns:1fr;}} .card{background:var(--white);border:1px solid var(--line);position:relative;transition:box-shadow .2s;} .card:hover{box-shadow:0 12px 28px rgba(20,20,20,.08);} .card-media{aspect-ratio:4/5;overflow:hidden;position:relative;background:#f0f0f0;} .card-media.contain img.mockup-base, .pdp-gallery.contain img.mockup-base, .pdp-thumb.contain img.mockup-base{object-fit:contain;padding:14px;} .card-media img.mockup-base{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;} .card:hover .mockup-base{transform:scale(1.03);} .print-overlay{ position:absolute; top:23%;left:27%;width:46%;height:34%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 6px 14px rgba(0,0,0,.3)); } .card-badge{ position:absolute;top:12px;left:12px;z-index:2; background:var(--navy);color:var(--white); font-size:9px;font-weight:800;letter-spacing:.08em; padding:5px 9px;text-transform:uppercase; } .card-badge.gold{background:var(--gold);color:var(--black);} .card-body{padding:18px;} .card-cat{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px;} .card-name{font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px;} .card-swatches{display:flex;gap:5px;margin-bottom:8px;} .swatch-dot{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.15);display:inline-block;} .card-price{font-weight:700;font-size:14px;} /* Category strip */ .category-band{ background:var(--beige); margin-top:56px; padding:80px 0; } .cat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;} @media(max-width:900px){.cat-strip{grid-template-columns:repeat(2,1fr);}} @media(max-width:520px){.cat-strip{grid-template-columns:1fr;}} .cat-card{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:#f0f0f0;} .cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .4s;} .cat-card:hover img{transform:scale(1.06);} .cat-card.contain img{object-fit:contain;padding:28px;} .cat-card.contain:hover img{transform:scale(1.03);} .cat-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(13,13,13,.55), transparent 55%);} .cat-card .cat-label{ position:absolute;bottom:22px;left:22px;z-index:2; font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.04em;color:var(--white); } /* Features */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);} .features.features-2{grid-template-columns:repeat(2,1fr);} @media(max-width:800px){.features{grid-template-columns:1fr;}} .feature{background:var(--cream);padding:36px 28px;} .feature h3{font-size:16px;margin-bottom:8px;} .feature p{color:var(--muted);font-size:14px;} /* Newsletter */ .newsletter{background:var(--black);color:var(--white);text-align:center;padding:88px 24px;} .newsletter h2{font-size:clamp(28px,4vw,42px);margin-bottom:12px;color:var(--white);} .newsletter p{color:#b8b2a4;margin-bottom:28px;} .newsletter form{display:flex;max-width:420px;margin:0 auto;gap:10px;} .newsletter input{ flex:1;background:transparent;border:1.5px solid #3a3a3a; color:var(--white);padding:14px 16px;font-size:14px; } .newsletter input::placeholder{color:#8a8578;} .newsletter input:focus{outline:none;border-color:var(--gold);} /* Footer */ footer{background:var(--black);color:#c9c4b8;border-top:1px solid #222;padding:56px 0 28px;} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px;} @media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;}} .footer-grid h4{font-size:11px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;color:#8a8578;} .footer-grid li{margin-bottom:10px;font-size:14px;} .footer-grid li a:hover{color:var(--gold);} .footer-logo-link{display:inline-block;} .footer-logo{height:68px;width:auto;} .footer-brand p{color:#8a8578;font-size:14px;max-width:280px;margin-top:14px;} .footer-bottom{border-top:1px solid #222;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:#77715f;} /* Breadcrumb */ .breadcrumb{padding:20px 0;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;} .breadcrumb a:hover{color:var(--navy);} /* Product Detail */ .pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;padding:20px 0 80px;} @media(max-width:900px){.pdp{grid-template-columns:1fr;gap:32px;}} .pdp-gallery{position:relative;aspect-ratio:4/5;background:#f0f0f0;overflow:hidden;border:1px solid var(--line);} .pdp-gallery img.mockup-base{cursor:zoom-in;} .lightbox{ display:none; position:fixed;inset:0;z-index:1000; background:rgba(13,13,13,.92); align-items:center;justify-content:center; padding:40px; cursor:zoom-out; } .lightbox.open{display:flex;} .lightbox img{ max-width:min(90vw,1100px); max-height:88vh; width:auto;height:auto; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.5); } .lightbox-close{ position:absolute;top:20px;right:28px; background:none;border:none;color:var(--white); font-size:36px;line-height:1;cursor:pointer; padding:8px; } .pdp-gallery img.mockup-base{width:100%;height:100%;object-fit:cover;} .pdp-thumbs{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;} .pdp-thumb{width:76px;height:95px;border:1.5px solid var(--line);cursor:pointer;overflow:hidden;position:relative;background:#f0f0f0;} .pdp-thumb.active{border-color:var(--black);} .pdp-thumb img.mockup-base{width:100%;height:100%;object-fit:cover;} .pdp-thumb .print-overlay{top:23%;left:27%;width:46%;height:34%;} .coming-soon-flag{ position:absolute;top:14px;left:14px;z-index:2; background:var(--navy);color:var(--white);font-size:10px;font-weight:800; letter-spacing:.08em;text-transform:uppercase;padding:6px 10px; } .pdp-info .cat{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px;} .pdp-info h1{font-size:clamp(30px,4vw,40px);margin-bottom:14px;} .pdp-price{font-size:20px;font-weight:800;margin-bottom:24px;font-family:'Inter',sans-serif;} .pdp-desc{color:var(--muted);margin-bottom:32px;font-size:14px;line-height:1.75;} .option-block{margin-bottom:28px;} .option-label{display:flex;justify-content:space-between;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;} .size-grid{display:flex;flex-wrap:wrap;gap:8px;} .size-opt{ border:1.5px solid var(--line); min-width:52px;height:46px; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700;cursor:pointer; background:var(--white);color:var(--black); } .size-opt.selected{border-color:var(--black);background:var(--black);color:var(--white);} .size-opt.oos{opacity:.3;text-decoration:line-through;cursor:not-allowed;} .colour-grid{display:flex;flex-wrap:wrap;gap:10px;} .colour-swatch{ width:34px;height:34px;border-radius:50%; border:2px solid transparent; box-shadow:0 0 0 1px rgba(0,0,0,.15); cursor:pointer;padding:0; } .colour-swatch.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--black);} .qty-row{display:flex;align-items:center;gap:16px;margin-bottom:20px;} .qty-control{display:flex;align-items:center;border:1.5px solid var(--line);} .qty-control button{background:none;border:none;color:var(--black);width:40px;height:44px;font-size:16px;cursor:pointer;} .qty-control span{width:36px;text-align:center;font-weight:700;} .pdp-meta{margin-top:32px;border-top:1px solid var(--line);padding-top:24px;font-size:13px;color:var(--muted);} .pdp-meta div{margin-bottom:8px;} .size-note{font-size:12px;color:var(--navy);margin-top:10px;min-height:16px;} .coming-soon-note{ background:var(--paper);border:1px solid var(--line); padding:16px 18px;font-size:13px;color:var(--muted);margin-bottom:24px; } .snipcart-checkout{cursor:pointer;} .mobile-only{display:none;} @media(max-width:800px){ .nav-links{ position:fixed;top:66px;left:0;right:0;bottom:0; background:var(--cream); flex-direction:column; padding:32px 24px; gap:8px; font-size:18px; transform:translateX(100%); transition:transform .25s ease; } .nav-links.open{transform:translateX(0);} .nav-links a{ display:block; width:100%; padding:14px 16px; border-radius:2px; transition:background .15s ease, color .15s ease; } .nav-links a:hover, .nav-links a:active, .nav-links a:focus-visible{ opacity:1; background:var(--navy); color:var(--white); } .nav-toggle{display:block;} .footer-grid{grid-template-columns:1fr;} }