/* ============================================================ Mane · curated menswear · Mount Maunganui Marketing site. Dark, warm, considered. One family with the Mane proposal and the in-store till: deep near-black, warm off-white, a single warm-brass accent. Demo build by PlainBlack. Content pending client sign-off. ============================================================ */ :root{ /* ---- LIGHT theme surfaces (cream ground) ---- */ --bg: #F2EBDF; /* warm ivory ground */ --bg-2: #EADFCD; /* lifted sections (deeper, for band alternation) */ --bg-3: #FBF7EF; /* cards (warm white) */ --bg-4: #FFFFFF; /* raised / inputs */ /* Text, warm dark */ --ink: #221F19; /* near-black warm */ --ink-2: #4C473D; /* secondary */ --ink-3: #7E7768; /* muted */ --ink-4: #ABA391; /* faint */ /* Lines */ --line: rgba(34,31,25,0.14); --line-2: rgba(34,31,25,0.075); /* Single accent, antique gold (legible on cream) */ --brass: #A87B22; --brass-2: #8A6315; --brass-soft:rgba(168,123,34,0.12); --brass-line:rgba(168,123,34,0.40); --brass-ink: #271A04; /* text on a brass fill */ /* Themed utilities (were hardcoded near-black) */ --header-bg: rgba(244,238,228,0.82); --scrim: rgba(28,24,16,0.50); --texture-line: rgba(34,31,25,0.03); --shadow-strong:rgba(60,50,34,0.20); --cool-ink: #4E6B7D; --cool-soft: rgba(78,107,125,0.10); --cool-line: rgba(78,107,125,0.34); /* PlainBlack brand green (the logo dot) */ --pb-green: #0BC75E; /* Type */ --display: 'Inter Tight', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Rhythm */ --container: 1180px; --container-wide: 1280px; --gutter: clamp(1.75rem, 5.5vw, 3rem); --radius: 4px; --radius-lg: 10px; --pad-y: clamp(3.6rem, 7vw, 6rem); --ease: cubic-bezier(.2,.8,.2,1); color-scheme: light; } /* ============================================================ GREEN theme (toggle): forest-green ground, bright gold, cream ink. Set via . ============================ */ [data-theme="green"]{ --bg: #2F3A2B; --bg-2: #36422F; --bg-3: #3E4A36; --bg-4: #47543E; --ink: #F3EFE4; --ink-2: #D4D0C1; --ink-3: #9EA18D; --ink-4: #71755F; --line: rgba(243,239,228,0.13); --line-2: rgba(243,239,228,0.06); --brass: #D9B36C; --brass-2: #C79A4E; --brass-soft:rgba(217,179,108,0.13); --brass-line:rgba(217,179,108,0.34); --brass-ink: #221A06; --header-bg: rgba(40,50,37,0.84); --scrim: rgba(6,8,5,0.66); --texture-line: rgba(243,239,228,0.02); --shadow-strong:rgba(0,0,0,0.5); --cool-ink: #A9C2D1; --cool-soft: rgba(159,184,201,0.12); --cool-line: rgba(159,184,201,0.30); color-scheme: dark; } /* ============================================================ CREAM-GREEN theme: same cream ground, forest-green accent. Set via . =================== */ [data-theme="cream-green"]{ --brass: #2A5F40; --brass-2: #1F4D32; --brass-soft:rgba(42,95,64,0.11); --brass-line:rgba(42,95,64,0.38); --brass-ink: #FFFFFF; } /* ============================================================ CREAM-BLUE theme: same cream ground, navy-blue accent. Set via . ==================== */ [data-theme="cream-blue"]{ --brass: #1E4A85; --brass-2: #153669; --brass-soft:rgba(30,74,133,0.11); --brass-line:rgba(30,74,133,0.38); --brass-ink: #FFFFFF; } /* Tint gold logos to match the cream-green / cream-blue accent */ [data-theme="cream-green"] .brand-ticker__item img, [data-theme="cream-green"] .hero-logo__full, [data-theme="cream-green"] .brand-logo{filter:sepia(1) hue-rotate(109deg) saturate(0.85) brightness(0.6)} [data-theme="cream-blue"] .brand-ticker__item img, [data-theme="cream-blue"] .hero-logo__full, [data-theme="cream-blue"] .brand-logo{filter:sepia(1) hue-rotate(180deg) saturate(1.3) brightness(0.65)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--body);font-size:1.02rem;line-height:1.65;color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;font-feature-settings:'cv11','ss01'} img,svg{display:block;max-width:100%} a{color:var(--brass);text-decoration:none;transition:color .15s var(--ease)} a:hover{color:var(--brass-2)} ul{list-style:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--brass);color:var(--brass-ink)} h1,h2,h3,h4{font-family:var(--display);line-height:1.12;letter-spacing:-0.015em;font-weight:700;color:var(--ink)} h1{font-size:clamp(2.2rem,4.4vw + .6rem,3.7rem);font-weight:800} h2{font-size:clamp(1.7rem,2.6vw + .5rem,2.5rem)} h3{font-size:1.22rem} h4{font-size:1.04rem} p{color:var(--ink-2)} strong{color:var(--ink);font-weight:600} .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .wrap-wide{max-width:var(--container-wide)} .wrap-narrow{max-width:840px} /* Accessibility */ :focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:3px} .skip-link{position:absolute;left:-9999px;top:0;background:var(--brass);color:var(--brass-ink);padding:.65rem 1rem;z-index:200;font-weight:700;font-family:var(--display);border-radius:0 0 8px 0} .skip-link:focus{left:0} .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} [hidden]{display:none!important} .eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin-bottom:1rem} .eyebrow::before{content:'';width:22px;height:1px;background:var(--brass-line);display:inline-block} .eyebrow.centered{justify-content:center} .lead{font-size:clamp(1.06rem,1.5vw,1.2rem);color:var(--ink-2);max-width:60ch} .rule{width:54px;height:2px;background:var(--brass);margin:1.1rem 0 1.4rem} /* Reveal on scroll */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .reveal{opacity:1;transform:none;transition:none} *{animation-duration:.001ms!important;transition-duration:.001ms!important} } /* ============================================================ Buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--display);font-weight:700;font-size:.95rem;padding:.82rem 1.6rem;border-radius:var(--radius);border:1px solid transparent;transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease);white-space:nowrap;cursor:pointer} .btn-brass{background:var(--brass);color:var(--brass-ink)} .btn-brass:hover{background:var(--brass-2);color:var(--brass-ink)} .btn-ghost{border-color:var(--brass-line);color:var(--ink)} .btn-ghost:hover{border-color:var(--brass);color:var(--brass);background:transparent} .btn-line{border-color:var(--line);color:var(--ink-2)} .btn-line:hover{border-color:var(--ink-3);color:var(--ink)} .btn-lg{padding:.98rem 2rem;font-size:1rem} .btn-sm{padding:.55rem 1.1rem;font-size:.86rem} .btn-block{width:100%} .btn:focus-visible{outline:2px solid var(--brass);outline-offset:2px} /* ============================================================ Header */ .site-header{position:sticky;top:0;z-index:90;background:var(--header-bg);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line-2)} .header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .brand{display:flex;align-items:center;gap:.65rem} .brand-logo{display:block;flex-shrink:0} .brand-logo--lion{height:34px;width:auto} .brand-logo--wordmark{height:22px;width:auto} .brand-logo--full{width:170px;height:auto} .nav-primary ul{display:flex;gap:1.7rem} .nav-primary a{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:.4rem 0;border-bottom:1px solid transparent;transition:color .15s} .nav-primary a:hover{color:var(--ink)} .nav-primary a[aria-current="page"]{color:var(--brass);border-bottom-color:var(--brass)} .header-right{display:flex;align-items:center;gap:1rem} .menu-toggle{display:none;width:42px;height:42px;border-radius:var(--radius);color:var(--ink);align-items:center;justify-content:center} .menu-toggle:hover{background:var(--bg-3)} /* Theme toggle (light default / green). Hidden on the public real-life launch; only available inside the polished preview (?brand=new). */ html:not([data-brand="new"]) .theme-toggle{display:none} .theme-toggle{width:40px;height:40px;border-radius:var(--radius);color:var(--ink-3);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:transparent;flex-shrink:0;transition:color .15s,border-color .15s,background .15s} .theme-toggle:hover{color:var(--brass);border-color:var(--brass-line);background:var(--bg-3)} .theme-toggle__sun{display:block} .theme-toggle__leaf,.theme-toggle__sprout,.theme-toggle__drop{display:none} [data-theme="cream-green"] .theme-toggle__sun{display:none} [data-theme="cream-green"] .theme-toggle__sprout{display:block} [data-theme="cream-blue"] .theme-toggle__sun{display:none} [data-theme="cream-blue"] .theme-toggle__drop{display:block} [data-theme="green"] .theme-toggle__sun{display:none} [data-theme="green"] .theme-toggle__leaf{display:block} /* Mobile drawer. Box-shadow ONLY on the open state, never the base off-canvas panel (prevents the right-edge shadow bleed bug). */ .mobile-drawer{position:fixed;inset:0;z-index:120;pointer-events:none} .drawer-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .25s var(--ease)} .drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(330px,86vw);background:var(--bg-2);transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;padding:1.2rem 1.4rem 1.6rem;border-left:1px solid var(--line)} .mobile-drawer[data-open="true"]{pointer-events:auto} .mobile-drawer[data-open="true"] .drawer-scrim{opacity:1} .mobile-drawer[data-open="true"] .drawer-panel{transform:none;box-shadow:-18px 0 48px var(--shadow-strong)} .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem} .drawer-close{width:40px;height:40px;color:var(--ink-3);display:flex;align-items:center;justify-content:center} .drawer-close:hover{color:var(--ink)} .drawer-nav a{display:block;padding:.82rem .2rem;font-family:var(--display);font-weight:600;font-size:1.08rem;color:var(--ink-2);border-bottom:1px solid var(--line-2)} .drawer-nav a:hover,.drawer-nav a[aria-current="page"]{color:var(--brass)} .drawer-foot{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-top:1.4rem} .drawer-foot .mono{font-family:var(--mono);font-size:.78rem;color:var(--ink-3);letter-spacing:.04em} /* ============================================================ Sections */ .section{padding:var(--pad-y) 0;border-top:1px solid var(--line-2)} .section:first-of-type{border-top:0} .section-2{background:var(--bg-2)} .section-head{max-width:62ch} .section-head.centered{margin:0 auto;text-align:center} /* ============================================================ Hero */ .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line-2)} .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3.4rem,7vw,5.5rem)} .hero-logo{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;margin-bottom:2.4rem} .hero-logo__crest{height:auto;width:clamp(120px,18vw,200px)} .hero-logo__word{height:auto;width:clamp(200px,40vw,380px)} .hero-logo__wordmark{height:auto;width:clamp(220px,46vw,520px)} .hero-logo__full{height:auto;width:clamp(200px,42vw,460px)} .hero h1{margin-top:.2rem} .hero h1 em{font-style:normal;color:var(--brass)} .hero .lead{margin-top:1.3rem} .hero-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem} .hero-art{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--bg-3)} .hero-art img{width:100%;height:100%;object-fit:cover} .hero-art__tag{position:absolute;left:1rem;bottom:1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#F6F4EF;background:rgba(14,15,17,.62);backdrop-filter:blur(6px);padding:.4rem .75rem;border-radius:999px;border:1px solid var(--line)} /* Mono fact strip */ .fact-strip{background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:.95rem 0} .fact-strip .wrap{display:flex;flex-wrap:wrap;gap:.5rem 2.4rem;justify-content:center} .fact-strip span{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:var(--ink-3);white-space:nowrap} .fact-strip strong{color:var(--brass);font-weight:500} /* Brand ticker */ .brand-ticker{overflow:hidden;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:var(--bg);padding:1.4rem 0} .brand-ticker__track{display:flex;align-items:center;gap:3.5rem;width:max-content;animation:ticker 32s linear infinite} .brand-ticker__track:hover{animation-play-state:paused} .brand-ticker__item{flex-shrink:0;display:flex;align-items:center} .brand-ticker__item img{height:32px;width:auto;opacity:.75;transition:opacity .2s} .brand-ticker__item:hover img{opacity:1} /* Ticker placed inside a section: full-bleed logo rail under the heading. Lives outside .wrap so it spans the full section width with no 100vw scrollbar overflow. */ .section > .brand-ticker{margin-top:2.6rem} /* Rail sits flush at the section's bottom edge (no trailing section padding under it) */ .section:has(> .brand-ticker){padding-bottom:0} @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.brand-ticker__track{animation:none}.brand-ticker{overflow-x:auto}} /* ============================================================ Split */ .split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.2rem);align-items:center} .split.reversed .split-text{order:2} .split-art{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:5/4;background:var(--bg-3)} .split-art img{width:100%;height:100%;object-fit:cover} .split p + p{margin-top:1rem} /* ============================================================ Statement */ .statement{max-width:24ch;font-family:var(--display);font-weight:700;letter-spacing:-0.015em;line-height:1.12;color:var(--ink);font-size:clamp(1.7rem,3.4vw,2.6rem)} .statement em{font-style:normal;color:var(--brass)} /* ============================================================ Labels chip wall */ .labels-wall{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem} .labels-wall li{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;padding:.46rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-2);background:var(--bg-3)} .labels-wall li.is-import{border-color:var(--brass-line);color:var(--brass)} /* ============================================================ Product grid + cards */ .filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 2rem} .filter-chip{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;padding:.5rem 1rem;border:1px solid var(--line);border-radius:999px;color:var(--ink-3);background:transparent;transition:all .15s var(--ease)} .filter-chip:hover{border-color:var(--brass-line);color:var(--ink)} .filter-chip[aria-pressed="true"]{background:var(--brass);border-color:var(--brass);color:var(--brass-ink)} .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .product-grid.is-featured{margin-top:2.4rem} .product-card{display:flex;flex-direction:column;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-lg);overflow:hidden;transition:transform .2s var(--ease),border-color .2s var(--ease)} .product-card[data-open-prod]{cursor:pointer} .product-card:hover{transform:translateY(-3px);border-color:var(--brass-line)} .product-card:focus-within{border-color:var(--brass-line)} .product-media{position:relative;aspect-ratio:4/5;background:var(--bg-4);overflow:hidden} .product-media img{width:100%;height:100%;object-fit:cover} .product-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.3rem;flex:1} .product-brand{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)} .product-name{font-family:var(--display);font-weight:700;font-size:1.06rem;color:var(--ink);line-height:1.25} .product-name a{color:inherit} .product-name a:hover{color:var(--brass)} .product-blurb{font-size:.88rem;color:var(--ink-3);margin-top:.1rem} .product-foot{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:auto;padding-top:.9rem} .product-price{font-family:var(--mono);font-size:.96rem;color:var(--ink);letter-spacing:.01em} /* Status pill */ .pill{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.26rem .58rem;border-radius:999px;border:1px solid var(--line)} .pill-one{color:var(--brass);border-color:var(--brass-line);background:var(--brass-soft)} .pill-reserved{color:var(--cool-ink);border-color:var(--cool-line);background:var(--cool-soft)} .pill-sold{color:var(--ink-3)} .product-media .pill{position:absolute;top:.7rem;left:.7rem;background:rgba(14,15,17,.72);backdrop-filter:blur(6px);color:#F6F4EF;border-color:rgba(246,244,239,0.22)} .product-card.is-sold{pointer-events:none;opacity:.7} .product-card.is-sold .product-media{opacity:.5} .product-card.is-sold .product-media::after{content:'Sold';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-shadow:0 2px 12px rgba(0,0,0,.6)} .product-card.is-sold .product-ph__note{display:none} /* Typographic placeholder tile (no photo yet) */ .product-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;padding:1.2rem;background: radial-gradient(120% 90% at 50% 0%, rgba(217,179,108,.08), transparent 60%), repeating-linear-gradient(-45deg,transparent 0 16px,var(--texture-line) 16px 17px), var(--bg-4)} .product-ph__mark{font-family:var(--display);font-weight:800;font-size:2.2rem;color:var(--brass);opacity:.85;line-height:1} .product-ph__label{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .product-ph__note{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-top:.2rem} .grid-footnote{margin-top:1.8rem;font-size:.95rem;color:var(--ink-3)} .grid-empty{padding:2.4rem 1rem;text-align:center;color:var(--ink-3);font-family:var(--mono);font-size:.86rem;letter-spacing:.03em} /* ============================================================ Page hero (subpages) */ .page-hero{border-bottom:1px solid var(--line-2);padding:clamp(2.6rem,5vw,3.8rem) 0 clamp(2.6rem,5vw,3.6rem)} .crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-4);margin-bottom:1.1rem} .crumbs a{color:var(--ink-3)} .crumbs a:hover{color:var(--brass)} .crumbs .sep{margin:0 .55rem;color:var(--brass)} .page-hero .lead{margin-top:.9rem} /* ============================================================ Product detail */ .detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,3.6rem);align-items:start} .detail-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/5;background:var(--bg-4)} .detail-media img{width:100%;height:100%;object-fit:cover} .detail-brand{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:.7rem} .detail-price{font-family:var(--mono);font-size:1.4rem;color:var(--ink);margin:1.1rem 0} .detail-meta{display:flex;flex-direction:column;gap:.7rem;margin:1.5rem 0;padding:1.3rem 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .detail-meta-row{display:flex;gap:1rem;font-size:.94rem} .detail-meta-row dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);min-width:92px;padding-top:.18rem} .detail-meta-row dd{color:var(--ink-2)} .detail-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem} .detail-note{font-size:.85rem;color:var(--ink-3);margin-top:1.1rem} /* Trade / wholesale enquiry link (Mauritius leather jackets) */ .wholesale-link{display:inline-block;align-self:flex-start;margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--brass);text-decoration:underline;text-underline-offset:3px;transition:color .15s} .wholesale-link:hover{color:var(--brass-2)} /* ============================================================ Info page (returns + sizing) */ .info-rules{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin:2rem 0 1.4rem} .info-rule{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:1.4rem 1.5rem} .info-rule h3{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin:0 0 .9rem} .info-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.55rem} .info-list li{font-size:.94rem;color:var(--ink-2);padding-left:1.1rem;position:relative} .info-list li::before{content:'–';position:absolute;left:0;color:var(--brass);opacity:.7} .info-note{font-size:.88rem;color:var(--ink-3);border-left:2px solid var(--brass-line);padding-left:1rem;margin-top:.4rem} @media(max-width:600px){.info-rules{grid-template-columns:1fr}} /* ============================================================ CTA band */ .cta-band{text-align:center} .cta-band .lead{max-width:54ch;margin:.9rem auto 0;text-align:center} .cta-band .hero-ctas{justify-content:center} /* ============================================================ Visit / contact */ .visit-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,3.4rem);align-items:start} .shopfront-img{border-radius:var(--radius-lg);overflow:hidden;line-height:0} .shopfront-img img{width:100%;height:auto;display:block} .detail-list{display:flex;flex-direction:column;gap:1.3rem} .detail-item{display:flex;gap:.85rem;align-items:flex-start} .detail-item svg{width:18px;height:18px;color:var(--brass);flex-shrink:0;margin-top:.3rem} .detail-item .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.2rem} .detail-item .v{color:var(--ink);font-size:1rem} .detail-item .v a{color:var(--ink)} .detail-item .v a:hover{color:var(--brass)} .hours-block{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:1.4rem 1.5rem;margin-top:.4rem} .hours-block .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cool-ink);border:1px solid var(--cool-line);background:var(--cool-soft);padding:.24rem .6rem;border-radius:999px;display:inline-block;margin-bottom:.9rem} .hours-row{display:flex;justify-content:space-between;gap:1rem;font-size:.94rem;padding:.32rem 0;border-bottom:1px solid var(--line-2)} .hours-row:last-of-type{border-bottom:0} .hours-row .d{font-family:var(--mono);font-size:.82rem;color:var(--ink-3);letter-spacing:.03em} .hours-row .t{color:var(--ink-2)} .hours-confirm{font-size:.82rem;color:var(--ink-3);margin-top:.9rem} .map-embed{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:var(--bg-3)} .map-embed iframe{width:100%;height:100%;border:0;filter:grayscale(.3) contrast(1.05) brightness(.92)} /* ============================================================ Form */ .form-card{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:1.8rem 1.7rem} /* Offset the #contactForm anchor jump so the sticky 72px header doesn't clip it. */ #contactForm{scroll-margin-top:96px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-grid .full{grid-column:1/-1} .field-label{display:block;font-family:var(--display);font-weight:600;font-size:.88rem;margin-bottom:.45rem;color:var(--ink)} .form-card input[type="text"],.form-card input[type="email"],.form-card input[type="tel"],.form-card textarea{width:100%;padding:.75rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);transition:border-color .15s} .form-card input::placeholder,.form-card textarea::placeholder{color:var(--ink-4)} .form-card input:focus,.form-card textarea:focus{outline:none;border-color:var(--brass);background:var(--bg-4)} .form-card textarea{min-height:130px;resize:vertical} .form-actions{margin-top:1.4rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .form-note{font-size:.8rem;color:var(--ink-3)} .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .success-panel{background:var(--brass-soft);border:1px solid var(--brass-line);border-radius:var(--radius-lg);padding:1.8rem 1.6rem;text-align:center} .success-panel h3{margin-bottom:.5rem} .success-panel p{color:var(--ink-2)} /* ============================================================ Reserve modal */ .modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:1.2rem;pointer-events:none} .modal[data-open="true"]{pointer-events:auto} .modal-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .22s var(--ease)} .modal[data-open="true"] .modal-scrim{opacity:1} .modal-card{position:relative;width:min(520px,100%);max-height:calc(100vh - 2.4rem);overflow-y:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.7rem 1.7rem 1.8rem;transform:translateY(14px) scale(.98);opacity:0;transition:transform .24s var(--ease),opacity .24s var(--ease);box-shadow:0 30px 80px var(--shadow-strong)} .modal[data-open="true"] .modal-card{transform:none;opacity:1} .modal-close{position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;border-radius:var(--radius)} .modal-close:hover{color:var(--ink);background:var(--bg-3)} .modal-eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem} .modal-item{font-family:var(--display);font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:.3rem} .modal-sub{font-size:.9rem;color:var(--ink-3);margin-bottom:1.3rem} .modal .form-grid{gap:.85rem} .modal-card input[type="text"],.modal-card input[type="email"],.modal-card input[type="tel"],.modal-card textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);transition:border-color .15s} .modal-card input::placeholder,.modal-card textarea::placeholder{color:var(--ink-4)} .modal-card input:focus,.modal-card textarea:focus{outline:none;border-color:var(--brass);background:var(--bg-4)} .modal-card textarea{min-height:110px;resize:vertical} .input{width:100%;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg);color:var(--ink);transition:border-color .15s,background .15s} .input::placeholder{color:var(--ink-4)} .input:focus{outline:none;border-color:var(--brass);background:var(--bg-4)} /* ============================================================ Footer */ .site-footer{background:var(--bg);border-top:1px solid var(--line-2);padding:clamp(3rem,5vw,4.2rem) 0 1.8rem} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.4rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line-2)} .footer-brand .brand{margin-bottom:1.1rem} .footer-desc{font-size:.92rem;color:var(--ink-3);max-width:38ch} .footer-social{display:flex;gap:.6rem;margin-top:1.2rem} .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;color:var(--ink-3);transition:color .15s,border-color .15s,background .15s} .footer-social a:hover{color:var(--brass);border-color:var(--brass);background:var(--bg-3)} .footer-social svg{width:18px;height:18px;display:block} .contact-follow{margin-top:1.6rem} .contact-follow__label{display:block;font-family:var(--mono);font-weight:500;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:.7rem} .contact-follow .footer-social{margin-top:0} .reserve-hold__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.55rem} .reserve-hold__head .field-label{margin-bottom:0} .reserve-hold__val{font-family:var(--mono);font-size:.82rem;color:var(--brass);white-space:nowrap} .reserve-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:var(--bg-4);outline:none;margin:.2rem 0 0} .reserve-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--brass);cursor:pointer;border:0;box-shadow:0 0 0 4px rgba(217,179,108,.16)} .reserve-range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--brass);cursor:pointer;box-shadow:0 0 0 4px rgba(217,179,108,.16)} .reserve-range:focus-visible{outline:2px solid var(--brass);outline-offset:6px} .reserve-hold__note{font-size:.82rem;color:var(--ink-3);margin:.7rem 0 0} .footer-col h2{font-size:.74rem;font-family:var(--mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-bottom:1.1rem} .footer-col ul li{padding:.34rem 0} .footer-col ul a,.footer-col ul span{font-size:.92rem;color:var(--ink-3);display:inline-flex;align-items:center;gap:.6rem} .footer-col ul a:hover{color:var(--ink)} .footer-col .icon{width:15px;height:15px;color:var(--brass);flex-shrink:0} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.6rem} .footer-bottom > span{font-size:.8rem;color:var(--ink-4)} .footer-pb{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink-4);font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;transition:color .2s ease} .footer-pb:hover{color:var(--ink-2)} .footer-pb__icon{position:relative;width:24px;height:24px;display:inline-block;background:var(--bg-3);border-radius:50%;padding:3px} .footer-pb__icon img{width:100%;height:100%;display:block;filter:brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(10deg) brightness(.88)} .footer-pb__pulse{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(217,179,108,.5);animation:pbpulse 2.6s ease-out infinite} @keyframes pbpulse{0%{box-shadow:0 0 0 0 rgba(217,179,108,.45)}70%{box-shadow:0 0 0 9px rgba(217,179,108,0)}100%{box-shadow:0 0 0 0 rgba(217,179,108,0)}} @media (prefers-reduced-motion:reduce){.footer-pb__pulse{animation:none}} /* ============================================================ 404 */ .notfound{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1.2rem} .notfound h1{font-size:clamp(2.4rem,6vw,4rem)} .notfound .lead{margin:1rem auto 2rem} /* ============================================================ Responsive */ @media (max-width:1020px){ .nav-primary,.header-cta{display:none} .menu-toggle{display:flex} .brand-logo--wordmark{display:none} .hero-grid{grid-template-columns:1fr;gap:2.4rem} .hero-art{max-width:440px} .split,.split.reversed{grid-template-columns:1fr} .split.reversed .split-text{order:0} .split-art{max-width:520px;order:-1} .detail-grid,.visit-grid{grid-template-columns:1fr;gap:2rem} .product-grid{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .footer-brand{grid-column:1/-1} } @media (max-width:620px){ .product-grid{grid-template-columns:1fr 1fr;gap:1rem} .form-grid{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr} .footer-bottom{flex-direction:column;align-items:flex-start} .fact-strip .wrap{flex-direction:column;align-items:center;gap:.35rem} .hero-ctas .btn,.detail-ctas .btn{flex:1} } @media (max-width:400px){ .product-grid{grid-template-columns:1fr} } /* ---- Product detail modal ---- */ .prod-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:1.2rem;pointer-events:none} .prod-modal[data-open="true"]{pointer-events:auto} .prod-modal__scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;transition:opacity .22s var(--ease)} .prod-modal[data-open="true"] .prod-modal__scrim{opacity:1} .prod-modal__card{position:relative;width:min(720px,100%);max-height:calc(100vh - 2.4rem);overflow-y:auto;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);transform:translateY(14px) scale(.98);opacity:0;transition:transform .24s var(--ease),opacity .24s var(--ease);box-shadow:0 30px 80px var(--shadow-strong)} .prod-modal[data-open="true"] .prod-modal__card{transform:none;opacity:1} .prod-modal__close{position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;border-radius:var(--radius);z-index:2;background:none;border:0;cursor:pointer} .prod-modal__close:hover{color:var(--ink);background:var(--bg-3)} .prod-modal__grid{display:grid;grid-template-columns:260px 1fr} .prod-modal__media{border-radius:var(--radius-lg) 0 0 var(--radius-lg);overflow:hidden;min-height:340px;position:relative;background:var(--bg-3)} .prod-modal__media .product-ph{border-radius:0;position:absolute;inset:0} .prod-modal__media img{width:100%;height:100%;object-fit:cover;display:block} .prod-modal__media .pill{position:absolute;top:.7rem;left:.7rem;z-index:1;background:rgba(14,15,17,.72);backdrop-filter:blur(6px);color:#F6F4EF;border-color:rgba(246,244,239,0.22)} .prod-modal__detail{padding:2rem 1.8rem 2rem 1.6rem;display:flex;flex-direction:column} .prod-modal__brand{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);margin:0 0 .3rem} .prod-modal__name{font-family:var(--display);font-size:1.4rem;font-weight:700;margin:0 0 .35rem;color:var(--ink);line-height:1.15} .prod-modal__price{font-size:1.15rem;font-weight:700;color:var(--brass);margin:0 0 1rem} .prod-modal__story{font-size:.9rem;color:var(--ink-2);line-height:1.6;flex:1;margin:0 0 .7rem} .prod-modal__meta{font-size:.78rem;color:var(--ink-4);font-family:var(--mono);letter-spacing:.04em;margin:0 0 1.3rem} .prod-modal__actions{display:flex;gap:.7rem;flex-wrap:wrap} .prod-modal__detail .prod-modal__story{flex:0 0 auto;margin-bottom:1.1rem} .pm-assure{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0 0 1.2rem;padding:0} .pm-assure li{position:relative;padding-left:.95rem;font-size:.78rem;color:var(--ink-3)} .pm-assure li::before{content:"";position:absolute;left:0;top:.45em;width:5px;height:5px;border-radius:50%;background:var(--brass)} .pm-specs{margin:0 0 1.2rem;border-top:1px solid var(--line)} .pm-specs__row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)} .pm-specs__row dt{color:var(--ink-4);font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase;font-size:.72rem} .pm-specs__row dd{margin:0;color:var(--ink-2);text-align:right;font-size:.84rem} .pm-acc{margin:0 0 1.4rem;border-top:1px solid var(--line)} .pm-acc__item{border-bottom:1px solid var(--line)} .pm-acc__sum{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;list-style:none;padding:.8rem 0;font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--ink)} .pm-acc__sum::-webkit-details-marker{display:none} .pm-acc__chev{width:9px;height:9px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);transition:transform .18s var(--ease);flex:none;margin-right:3px} .pm-acc__item[open] .pm-acc__chev{transform:rotate(-135deg)} .pm-acc__body{padding:0 0 1rem} .pm-acc__body p{font-size:.86rem;color:var(--ink-2);line-height:1.6;margin:0 0 .6rem} .pm-acc__body p:last-child{margin-bottom:0} .pm-acc__body a{color:var(--brass)} .prod-modal__step{display:none;padding:2rem} .prod-modal__step.active{display:block} .prod-modal__back{display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;color:var(--ink-3);font-size:.85rem;cursor:pointer;padding:0;margin-bottom:1.4rem;transition:color .15s} .prod-modal__back:hover{color:var(--ink)} .prod-modal__mini{background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius);padding:.85rem 1rem;margin-bottom:1.5rem;font-size:.88rem;color:var(--ink-2)} .prod-modal__mini strong{color:var(--ink);display:block;margin-bottom:.2rem} /* Coming-soon cards */ .product-card--soon .product-media{opacity:.5} .soon-badge{position:absolute;top:.7rem;left:.7rem;background:var(--bg);border:1px solid var(--brass);color:var(--brass);font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .55rem;border-radius:var(--radius);z-index:1} .product-card--soon .product-ph__note{display:none} .soon-eta{font-family:var(--mono);font-size:.7rem;color:var(--ink-4);letter-spacing:.04em;text-transform:uppercase;margin:-.15rem 0 .65rem} .soon-form{display:flex;gap:.4rem;margin-top:.1rem} .soon-input{flex:1;min-width:0;height:34px;padding:0 .65rem;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);font-size:.8rem;font-family:inherit} .soon-input::placeholder{color:var(--ink-4)} .soon-input:focus{outline:none;border-color:var(--brass)} .soon-sent{font-size:.8rem;color:var(--brass);margin-top:.5rem;font-family:var(--mono)} @media(max-width:620px){ .prod-modal{padding:.6rem} .prod-modal__grid{grid-template-columns:1fr} .prod-modal__media{border-radius:var(--radius-lg) var(--radius-lg) 0 0;min-height:180px} .prod-modal__detail,.prod-modal__step{padding:1.4rem} }