/** Shopify CDN: Minification failed Line 852:19 Unexpected "*" Line 855:62 Unterminated string token Line 858:68 Unterminated string token **/ /* build: dark-lime-reskin 2026-07-12 (cache-bust) */ /* ========================================================= MADTAG — design system ("loud art, quiet chrome": dark editorial-tech ground + Lime Punch accent). Loaded LAST in . All component rules scoped under .mt-root so they never collide with Dawn's base classes (Dawn also defines .grid, .price, .card, .cart, etc.). Self-contained: no external webfonts. ========================================================= */ :root, .mt-root{ /* ---- canonical tokens (locked 2026-07-12, from mockup :root) ---- NOTE: defined on :root (not just .mt-root) so body/cart/account — which live OUTSIDE .mt-root — can resolve var(--bg)/var(--ink) etc. Custom properties inherit downward only; scoping them to .mt-root left the page background (body.gradient{background:var(--bg)}) unresolved → white. */ --bg:#0c0c0d; /* near-black page ground */ --ink:#f2f0ea; /* primary text (light) */ --soft:#8a8880; /* muted / mono captions / secondary text */ --line:#26262a; /* 1px hairline borders & grid */ --acc:#aaff00; /* Lime Punch — the ONE chrome accent */ --onacc:#0c0c0d; /* text/ink ON the lime accent */ --tile:#141416; /* raised tile / art backing */ --key:#aaff00; /* accent-as-TEXT (prices, emphasis, counts, kickers) — lime on dark */ /* supporting fluoro inks — per-design ART accents only, never the chrome. */ --blue:#2b4cff; --tang:#ff6a1f; --lime:#22c55e; --violet:#7a3cff; --yolk:#ffc61a; } /* ========================================================= LIGHT MODE — "daylight in the wrap bay" (opt-in via the header switch → ). Dark stays the default. Only the chrome inks flip; the loud art is untouched. Re-declared on the same scopes the dark tokens use so nested scopes (.mt-root) don't shadow the override. Cart/customer/ checkout keep their existing Dawn scheme — money path, left as-is on purpose. ========================================================= */ html[data-theme="light"], html[data-theme="light"] .mt-root{ --bg:#eef0f2; /* cool lit-studio ground */ --ink:#16181b; /* graphite */ --soft:#71757b; /* mono captions / secondary */ --line:#d3d6d9; /* hairline */ --acc:#aaff00; /* Lime Punch — unchanged; fills only on light */ --onacc:#12140a; /* dark ink on lime */ --tile:#f2f3f4; /* lit art backing */ --key:#16181b; /* accent-as-TEXT → graphite (lime text is unreadable on white) */ } /* chrome hardcodes that must follow the mode */ html[data-theme="light"] .mt-hd-nav a, html[data-theme="light"] .mt-hd-tools a{color:var(--soft)} html[data-theme="light"] .mt-hd-tools a:hover{color:var(--ink)} /* lime text is unreadable on white */ html[data-theme="light"] .mt-hd-tools a.bag{color:var(--ink)} html[data-theme="light"] .mt-ft-form:has(input){background:#fff} html[data-theme="light"] .mt-ft-form input::placeholder{color:var(--soft)} /* the ® carries the accent as a lime chip on light (thin lime is weak on white) */ html[data-theme="light"] .mt-wordmark sup{color:var(--onacc);background:var(--acc); padding:.06em .18em;border-radius:1px;font-weight:700;margin-left:.15em} /* MADTAG headings own their colour. Dawn's base rule (h1..h5{color:rgb(var( --color-foreground))}) wins over inheritance, and --color-foreground does NOT flip with the mode — so without this every heading stays dark-ink on light (washed-out near-white). Route them through --ink, which does flip. */ .mt-root h1,.mt-root h2,.mt-root h3,.mt-root h4{color:var(--ink)} /* Section-heading emphasis word: lime TEXT on dark (via --key), lime highlighter SWIPE behind graphite text on light — keeps the lime pop where lime-on-white text would be unreadable. (The home hero h1 owns its own both-mode swipe above.) */ html[data-theme="light"] .mt-root h2 em,html[data-theme="light"] .mt-root h2 span{ color:var(--ink); background:linear-gradient(var(--acc),var(--acc)) no-repeat; background-size:100% .58em;background-position:0 82%; padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone} /* premium crossfade when the mode flips */ body.gradient,.mt-header,.mt-footer,.mt-drawer{ transition:background-color .4s ease,color .4s ease,border-color .4s ease} @media (prefers-reduced-motion:reduce){ body.gradient,.mt-header,.mt-footer,.mt-drawer,.mt-dial{transition:none} } /* ---- the switch: aperture dial + Dark/Light label ---- */ .mt-root .mt-lights{display:inline-flex;align-items:center;gap:8px;background:transparent; border:1px solid var(--line);border-radius:999px;padding:5px 11px 5px 8px;cursor:pointer; color:var(--soft);font:inherit;line-height:1} .mt-root .mt-lights:hover{border-color:var(--ink);color:var(--ink)} .mt-root .mt-lights:focus-visible{outline:2px solid var(--acc);outline-offset:2px} .mt-lights-lbl{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px; letter-spacing:.08em;font-weight:700;text-transform:uppercase; display:inline-block;width:3.5em;text-align:left} .mt-dial{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor; background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%); transition:transform .5s ease,color .3s} html[data-theme="light"] .mt-dial{transform:rotate(180deg)} /* base ground (override Dawn's .gradient body) */ body.gradient{background:var(--bg) !important;color:var(--ink)} html body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif} .mt-root .mono{font-family:"SF Mono",Menlo,Consolas,monospace} .mt-root{position:relative;z-index:2} .mt-root *{box-sizing:border-box} .mt-root a{color:inherit;text-decoration:none} .mt-wrap{max-width:1240px;margin:0 auto;padding:0 22px} /* ---------- wordmark (shared: header + footer) ---------- */ .mt-root .mt-wordmark{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink)} .mt-root .mt-wordmark sup{font-size:.4em;vertical-align:super;color:var(--key);font-weight:400;margin-left:1px} /* ---------- in-page anchor offsets: clear the sticky header when scrolling to an in-page target (gallery anchor on home, artwork-link field on Wrap Your Own) ---------- */ [id^="mt-shelf-"],[id^="MtWrap-artlink-"]{scroll-margin-top:88px} /* ---------- header ---------- */ .mt-header{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;background:var(--bg)} .mt-header .mt-hd{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:22px;position:relative} .mt-hd-left{display:flex;align-items:center;gap:18px;position:relative;z-index:62} .mt-hd-nav ul{display:flex;gap:26px;margin:0;padding:0;list-style:none} .mt-hd-nav a{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;color:#74747b;letter-spacing:.02em} .mt-hd-nav a:hover{color:var(--ink)} .mt-header .mt-wordmark{font-size:30px;text-align:center} .mt-hd-tools{display:flex;gap:22px;justify-content:flex-end;align-items:center} .mt-hd-tools a{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;color:#74747b} .mt-hd-tools a:hover{color:var(--key)} .mt-hd-tools a.bag{color:var(--ink)} /* mobile menu: burger + slide-in drawer (checkbox toggle, no JS) — off on desktop */ .mt-navcheck{position:absolute;top:0;left:0;width:0;height:0;opacity:0;pointer-events:none} .mt-burger{display:none;position:relative;width:22px;height:14px;cursor:pointer;flex:0 0 auto} .mt-burger span,.mt-burger span::before,.mt-burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);transition:.2s} .mt-burger span{top:6px}.mt-burger span::before{top:-6px}.mt-burger span::after{top:6px} .mt-navcheck:checked ~ .mt-hd-left .mt-burger span{background:transparent} .mt-navcheck:checked ~ .mt-hd-left .mt-burger span::before{top:0;transform:rotate(45deg)} .mt-navcheck:checked ~ .mt-hd-left .mt-burger span::after{top:0;transform:rotate(-45deg)} .mt-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:60} .mt-drawer{display:none;position:fixed;top:0;left:0;bottom:0;width:80%;max-width:320px;background:var(--tile,#141416);border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .22s ease;z-index:61;flex-direction:column;padding:78px 26px 26px} .mt-drawer a{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:15px;color:var(--ink);letter-spacing:.03em;padding:15px 0;border-bottom:1px solid var(--line)} .mt-drawer .sub{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.12em;padding:22px 0 2px} @media(max-width:900px){ .mt-hd-nav,.mt-hd-tools a:not(.bag){display:none} .mt-burger{display:block} .mt-scrim{display:block} .mt-drawer{display:flex} .mt-navcheck:checked ~ .mt-scrim{opacity:1;pointer-events:auto} .mt-navcheck:checked ~ .mt-drawer{transform:none} } /* ---------- marquee (home-only global element; restyled with mt-shelf) ---------- */ .mt-mq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);overflow:hidden;padding:10px 0} .mt-mq .run{display:flex;gap:30px;white-space:nowrap;font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ink);animation:mt-run 28s linear infinite;will-change:transform} .mt-mq .run span::after{content:"✦";margin-left:30px;font-style:normal;color:var(--key)} @keyframes mt-run{to{transform:translateX(-50%)}} /* ---------- footer (editorial-tech: wordmark + mono columns + email + legal) ---------- */ .mt-footer{border-top:1px solid var(--line);background:var(--bg)} /* band 1 — brand + columns */ .mt-ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:48px 22px 40px;border-bottom:1px solid var(--line)} .mt-ft-brand .mt-wordmark{font-size:44px;line-height:.9;display:inline-block} .mt-ft-brand .mt-wordmark sup{font-size:.34em} .mt-ft-brand .tag{display:block;margin-top:14px;max-width:34ch;font-size:12px;color:var(--soft);letter-spacing:.02em} .mt-ft-col h4{margin:0 0 16px;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)} .mt-ft-col h4::before{content:"// ";color:var(--key);opacity:.7} .mt-ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px} .mt-ft-col a{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:13px;color:var(--soft)} .mt-ft-col a:hover{color:var(--ink)} /* band 2 — email capture */ .mt-ft-mid{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:26px 22px;border-bottom:1px solid var(--line)} .mt-ft-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)} .mt-ft-lbl::before{content:"// ";color:var(--key);opacity:.7} .mt-ft-form{display:flex;align-items:center;flex:1;min-width:280px;max-width:460px} .mt-ft-form:has(input){border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#0f0f11} .mt-ft-form input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-size:13px;padding:13px 15px} .mt-ft-form input::placeholder{color:#5a5a5f} .mt-ft-form button{border:0;background:var(--acc);color:var(--onacc);cursor:pointer;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:13px 22px;white-space:nowrap} .mt-ft-form button:hover{filter:brightness(1.08)} .mt-ft-ok{color:var(--key);font-size:13px} .mt-ft-err{color:#ff6a1f;font-size:12px;margin-left:14px} /* band 3 — legal bar */ .mt-ft-bot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 22px 26px;font-size:11px;color:var(--soft)} .mt-ft-bot .copy{opacity:.85} .mt-ft-bot .pol{display:flex;gap:16px;margin:0 auto} .mt-ft-bot .pol a:hover{color:var(--ink)} .mt-ft-bot .pay{color:var(--ink);letter-spacing:.04em} @media(max-width:820px){ .mt-ft-top{grid-template-columns:1fr 1fr;gap:26px 24px;padding:36px 22px 30px} .mt-ft-brand{grid-column:1 / -1} .mt-ft-brand .mt-wordmark{font-size:38px} .mt-ft-bot .pol{margin:0;width:100%;order:3} } /* ---------- shared bits ---------- */ .mt-eyebrow{display:inline-block;font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:400;font-size:11px;letter-spacing:.04em; color:var(--soft);background:none;border:0;padding:0;transform:none;box-shadow:none} .mt-chip{cursor:pointer;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;color:var(--soft);border:1px solid var(--line); background:transparent;border-radius:2px;padding:8px 14px;transition:border-color .15s,color .15s} .mt-chip:hover{color:var(--ink);border-color:var(--soft)} .mt-chip.on{background:var(--acc);color:var(--onacc);border-color:var(--acc)} /* ---------- HOME: hero + shelf grid ---------- */ .mt-home-hero{padding:40px 0 6px} .mt-root h1.mt-hero{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;line-height:.92;letter-spacing:-.025em; text-transform:uppercase;margin-top:16px;font-size:clamp(38px,7vw,96px);text-wrap:balance;color:var(--ink)} .mt-root h1.mt-hero em{font-style:normal;color:var(--acc)} /* emphasis word: lime highlighter SWIPE — dark ink text, lime bar behind the lower portion so the caps break the top edge like a marker stroke (works in both modes) */ .mt-root h1.mt-hero span{color:var(--onacc); background:linear-gradient(var(--acc),var(--acc)) no-repeat; background-size:100% .8em;background-position:0 82%; padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .mt-home-hero .lede{max-width:48ch;font-size:16px;line-height:1.5;margin-top:16px;color:var(--soft)} .mt-home-hero .lede b{color:var(--ink)} /* editorial split hero (design-led home, locked 2026-07-12) */ .mt-home-split{border-bottom:1px solid var(--line)} /* split-hero heading sized so "art. we wrap" holds one line and the swipe reads as a single continuous stroke (the full-bleed 96px scale wraps the accent word) */ .mt-root .mt-home-split h1.mt-hero{font-size:clamp(38px,5vw,68px)} .mt-home-split .mt-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;padding:0} .mt-hero-cell{padding:64px 32px 56px 0;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:26px} .mt-hero-cell:last-child{border-right:0;padding:0;position:relative;aspect-ratio:4/5;align-self:start} .mt-hero-lead{font-size:15px;max-width:46ch;color:var(--ink);opacity:.85;margin:0} .mt-root a.mt-hero-cta{align-self:flex-start;background:var(--acc);color:#000;font-size:12px;letter-spacing:.04em; text-transform:uppercase;padding:14px 22px;border-radius:2px;font-weight:700;display:inline-block} .mt-hero-cta:hover{filter:brightness(1.06)} .mt-hero-art{position:absolute;inset:0;overflow:hidden;background:var(--tile)} .mt-hero-art .mt-hero-art-img{width:100%;height:100%;object-fit:cover;display:block} .mt-hero-art .mt-hero-art-swatch{position:absolute;inset:0;display:block}/* display:block beats Dawn base.css div:empty{display:none} (the painted swatch has no children) */ .mt-hero-art .mt-hero-art-ph{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--soft); text-transform:uppercase;letter-spacing:.06em} .mt-hero-art-tag{position:absolute;bottom:12px;left:14px;font-size:10px;color:var(--onacc);background:var(--acc);padding:4px 8px;border-radius:2px} @media(max-width:900px){ .mt-home-split .mt-hero-grid{grid-template-columns:1fr} .mt-hero-cell{border-right:0;padding:32px 0} /* art comes first on mobile */ .mt-home-split .mt-hero-cell:last-child{order:-1;aspect-ratio:auto;min-height:300px;padding:0} .mt-home-split .mt-hero-cell:first-child{border-top:1px solid var(--line);padding-top:30px} } /* how-it-works: ghost ledger — oversized faint-lime numerals, editorial titles (design-led home 3-step process, sits between hero and gallery) */ .mt-root .mt-steps{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line);padding:0} .mt-root .mt-step{position:relative;overflow:hidden;padding:34px 22px 30px;min-height:132px;border-right:1px solid var(--line); display:flex;flex-direction:column;justify-content:flex-end} .mt-root .mt-step:last-child{border-right:0} .mt-root .mt-step-ghost{position:absolute;top:-18px;right:6px;font-weight:800;font-size:130px;line-height:.8; letter-spacing:-.04em;color:rgba(170,255,0,.13);pointer-events:none} /* faint lime is invisible on near-white → graphite ghost on light */ html[data-theme="light"] .mt-root .mt-step-ghost{color:rgba(22,24,27,.14)} .mt-root .mt-step-ttl{position:relative;font-weight:800;font-size:19px;text-transform:uppercase;letter-spacing:-.01em} .mt-root .mt-step-ttl em{font-style:normal;color:var(--acc)} .mt-root .mt-step-sub{position:relative;margin-top:6px;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--soft)} @media(max-width:749px){ .mt-root .mt-steps{grid-template-columns:1fr} .mt-root .mt-step{border-right:0;border-bottom:1px solid var(--line);min-height:0} .mt-root .mt-step:last-child{border-bottom:0} } /* gallery header (the "gh" bar: count + index-all link) + filter chips */ .mt-shelf-head{margin:44px 0 0;border-bottom:1px solid var(--line)} .mt-shelf-head .mt-gh{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 0;flex-wrap:wrap} .mt-shelf-head .mt-gh-l{font-size:12px;color:var(--soft)} .mt-shelf-head .mt-gh-l b{color:var(--key);font-weight:400} .mt-shelf-head .mt-gh-link{font-size:12px;color:var(--ink)} .mt-shelf-head .mt-gh-link:hover{color:var(--key)} .mt-filters{display:flex;gap:9px;flex-wrap:wrap;padding:14px 0 18px} .mt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding-bottom:20px} @media(max-width:1000px){.mt-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:680px){.mt-grid{grid-template-columns:repeat(2,1fr)}} .mt-gcard{color:inherit;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--tile); transition:border-color .18s;display:block} .mt-gcard:hover{border-color:var(--soft)} .mt-gcard .art{aspect-ratio:4/5;position:relative;background:var(--tile);overflow:hidden} .mt-gcard .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s} .mt-gcard:hover .art img{transform:scale(1.04)} .mt-gcard .art .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-family:"SF Mono",Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--soft);font-size:11px} .mt-gcard .art .fl{position:absolute;top:10px;left:10px;background:var(--acc);color:var(--onacc);font-family:"SF Mono",Menlo,Consolas,monospace;font-size:9px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:2px} .mt-gcard .cap{padding:12px 14px;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line)} .mt-gcard .cap .gno{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px;color:var(--soft);flex:none} .mt-gcard .cap b{font-size:15px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .mt-gcard .cap small{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;color:var(--soft);letter-spacing:.02em;white-space:nowrap;display:block} .mt-gcard .cap .from{font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:700;font-size:12px;color:var(--key);white-space:nowrap;margin-left:auto} .mt-hide{display:none !important} /* ---------- COLLECTION + BRAND: split hero, chip/sort strip, end CTA (serves both collection.json and collection.brand.json; see mt-collection.liquid) ---------- */ .mt-chero-section{border-bottom:1px solid var(--line)} .mt-chero{display:grid;grid-template-columns:1.05fr 1fr;padding:0} .mt-chero-cell{padding:44px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;gap:22px} .mt-chero-cell:last-child{border-right:0;padding:0;position:relative;min-height:360px} .mt-cback{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-cback:hover{color:var(--key)} .mt-ckick{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-root h1.mt-chero-h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(40px,5.6vw,72px); line-height:.9;letter-spacing:-.025em;text-transform:uppercase;margin:12px 0 0} .mt-root h1.mt-chero-h1 em{font-style:normal;color:var(--key)} .mt-cblurb{font-size:15px;max-width:40ch;color:var(--ink);opacity:.85;margin:0} .mt-cmeta{font-size:11px;color:var(--soft);letter-spacing:.03em;display:flex;gap:16px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:16px} .mt-cmeta b{color:var(--key);font-weight:400} .mt-cart{position:absolute;inset:0;overflow:hidden;background:var(--tile)} .mt-cart .mt-cart-img{width:100%;height:100%;object-fit:cover;display:block} .mt-cart .mt-sil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .mt-cart .mt-sil .p{transform:scale(1.5)} .mt-cart-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px; color:var(--soft);text-transform:uppercase;letter-spacing:.06em} .mt-cart-tag{position:absolute;bottom:12px;left:14px;font-size:10px;color:var(--onacc);background:var(--acc); padding:4px 8px;border-radius:2px} @media(max-width:900px){ .mt-chero{grid-template-columns:1fr} .mt-chero-cell{border-right:0;border-bottom:1px solid var(--line)} .mt-chero-cell:last-child{min-height:300px;border-bottom:0} } .mt-fs{border-bottom:1px solid var(--line)} .mt-fs-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;flex-wrap:wrap} .mt-chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .mt-chips-lbl{font-size:11px;color:var(--soft);letter-spacing:.06em;text-transform:uppercase;margin-right:4px} .mt-chip-div{align-self:stretch;width:2px;margin:2px 3px;border-radius:2px;background:var(--line)} .mt-sort{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--soft);flex-wrap:wrap} .mt-sort-lbl{letter-spacing:.06em;text-transform:uppercase} .mt-sopt{color:var(--soft)} .mt-sopt:hover{color:var(--ink)} .mt-sopt.on{color:var(--key)} .mt-endcta{border-bottom:1px solid var(--line)} .mt-endcta-in{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;flex-wrap:wrap} .mt-endcta-l{font-size:12px;color:var(--soft)} .mt-endcta-l b{color:var(--key);font-weight:400} .mt-endcta-cta{background:var(--acc);color:var(--onacc);font-size:12px;letter-spacing:.04em;text-transform:uppercase; padding:13px 20px;border-radius:2px;font-weight:700;display:inline-block} .mt-endcta-cta:hover{filter:brightness(1.06)} /* ---------- PDP: configurator (The Split) ---------- */ .mt-crumb{padding:14px 0;font-size:11px;letter-spacing:.04em;color:var(--soft)} .mt-crumb a:hover{color:var(--key)} .mt-crumb b{color:var(--ink);font-weight:400} .mt-crumb span{opacity:.5;margin:0 8px} .mt-pdp{display:grid;grid-template-columns:1.25fr 1fr} @media(max-width:900px){.mt-pdp{grid-template-columns:1fr}} /* --- art panel: the silhouette stage, reskinned to the mockup's .art tile --- */ .mt-viewer{border-right:1px solid var(--line);background:var(--tile);min-height:620px;position:relative;overflow:hidden} @media(max-width:900px){.mt-viewer{border-right:0;border-bottom:1px solid var(--line);min-height:420px}} .mt-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .mt-stage .mt-stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .mt-edtag{position:absolute;top:14px;left:14px;font-size:10px;color:var(--onacc);background:var(--acc); padding:5px 9px;border-radius:2px;letter-spacing:.04em;z-index:3} .mt-stage .ph{color:var(--soft);font-size:12px;letter-spacing:.03em;text-align:center;padding:20px} /* wrapnote overlays a dark gradient in BOTH modes → keep its inks fixed-light (mode tokens would make it graphite-on-dark = invisible in light). */ .mt-wrapnote{position:absolute;bottom:0;left:0;right:0;font-size:10px;color:#f2f0ea; background:linear-gradient(transparent,rgba(0,0,0,.82));padding:26px 14px 12px;letter-spacing:.03em;z-index:3} .mt-wrapnote b{color:var(--acc);font-weight:400} /* --- buy column --- */ .mt-buy{padding:34px 26px;display:flex;flex-direction:column;gap:22px} @media(max-width:900px){.mt-buy{padding:26px 0}} .mt-kick{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-kick b{color:var(--key);font-weight:400} .mt-root h1.mt-title{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800; font-size:clamp(34px,4vw,52px);line-height:.94;letter-spacing:-.025em;text-transform:uppercase;margin:2px 0 0;color:var(--ink)} .mt-blurb{font-size:14px;line-height:1.5;color:var(--ink);opacity:.82;max-width:42ch} .mt-pickhd{font-size:11px;color:var(--soft);letter-spacing:.04em;display:flex;justify-content:space-between; border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px} .mt-pickhd b{color:var(--key);font-weight:400} .mt-fmts{display:flex;flex-direction:column} .mt-fmt{display:flex;align-items:center;gap:14px;padding:13px 4px;border:0;border-bottom:1px solid var(--line); cursor:pointer;transition:background .15s;background:transparent;width:100%;text-align:left;font:inherit;color:inherit} .mt-fmt:hover{background:var(--tile)} .mt-fmt .fdot{color:var(--soft);font-size:13px;width:14px;flex:none;text-align:center} .mt-fmt .fdot::before{content:"○"} .mt-fmt[aria-checked="true"] .fdot{color:var(--key)} .mt-fmt[aria-checked="true"] .fdot::before{content:"●"} .mt-fmt .fmeta{flex:1;min-width:0;display:flex;flex-direction:column} .mt-fmt .fmeta b{font-size:15px;font-weight:700;letter-spacing:-.01em} .mt-fmt .fmeta small{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;color:var(--soft);letter-spacing:.02em} .mt-fmt .fpr{font-size:13px;color:var(--ink);font-weight:700;flex:none} .mt-fmt[aria-checked="true"] .fpr{color:var(--key)} .mt-fmt[disabled]{opacity:.4;cursor:not-allowed} .mt-buyrow{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:20px} .mt-price{display:flex;flex-direction:column;gap:8px} .mt-price .plabel{font-size:10px;color:var(--soft);letter-spacing:.1em;text-transform:uppercase} .mt-price .pval{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:30px; letter-spacing:.01em;color:var(--key)} .mt-qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:2px;overflow:hidden;flex:none} .mt-qty button{width:36px;height:44px;border:0;background:var(--tile);color:var(--ink);font-size:16px;cursor:pointer} .mt-qty button:hover{background:var(--line)} .mt-qty input{width:38px;text-align:center;font-weight:700;font-size:13px;border:0;background:transparent; color:var(--ink);-moz-appearance:textfield} .mt-qty input::-webkit-outer-spin-button,.mt-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .mt-addbag{background:var(--acc);color:var(--onacc);font-size:13px;letter-spacing:.04em;text-transform:uppercase; padding:16px 26px;border:0;border-radius:2px;font-weight:700;cursor:pointer;transition:filter .15s;flex:none} .mt-addbag:hover{filter:brightness(1.08)} .mt-addbag:active{filter:brightness(.94)} .mt-addbag[disabled]{background:var(--line);color:var(--soft);cursor:not-allowed} .mt-woy{font-size:11px;color:var(--soft);letter-spacing:.03em} .mt-woy a{color:var(--key)} .mt-woy a:hover{text-decoration:underline} .mt-spec{border-top:1px solid var(--line)} .mt-srow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line); font-family:"SF Mono",Menlo,Consolas,monospace;font-size:11px} .mt-srow:last-child{border-bottom:0} .mt-srow .sk{color:var(--soft);letter-spacing:.04em;text-transform:uppercase} .mt-srow .sv{color:var(--ink);text-align:right} /* more in this vibe (reuses .mt-shelf-head / .mt-gh / .mt-grid / .mt-gcard from the shelf) */ .mt-more{margin-top:64px} .mt-more .mt-shelf-head{margin-top:0;border-top:1px solid var(--line)} @media(prefers-reduced-motion:reduce){.mt-mq .run{animation:none}.mt-gcard,.mt-gcard .art img{transition:none}} /* empty state */ .mt-empty{border:1px dashed var(--line);border-radius:2px;padding:40px 24px;text-align:center;color:var(--soft);background:var(--tile)} .mt-empty b{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;color:var(--ink);font-size:16px;display:block;margin-bottom:6px} /* ---------- silhouettes (ported from globals.css) ---------- */ /* Dawn's base reset collapses empty block elements (`div:empty{display:none}`). Silhouette panels (.surf, .cab, legs, etc.) are intentionally-empty divs painted via `background`, so re-assert their display or they vanish. */ .mt-root .p div{display:block} .mt-root .p{position:relative} /* Dawn base.css resets `div:empty{display:none}`. Silhouette pieces (.surf wrap art, .cab, .h, stool/table legs, lightbox glow…) are intentionally-empty background-only divs — without this override every silhouette renders as a bare outline (blank shape, no art) across the PDP, shelf cards, collection + search. */ .mt-root .p div:empty{display:block} .mt-root .surf{background-size:cover !important} .mt-root .f-fridge{width:120px;height:188px} .mt-root .f-fridge .cab{position:absolute;inset:0;border:3px solid var(--ink);border-radius:14px;background:#fff} .mt-root .f-fridge .door{position:absolute;inset:9px;border:2.5px solid var(--ink);border-radius:7px;overflow:hidden} .mt-root .f-fridge .door .surf{position:absolute;inset:0} .mt-root .f-fridge .h{position:absolute;right:18px;top:32px;bottom:32px;width:5px;background:var(--ink);border-radius:3px} .mt-root .f-stool{width:150px;height:188px} .mt-root .f-stool .seat{position:absolute;top:8px;left:20px;right:20px;height:44px;border:3px solid var(--ink);border-radius:50%;overflow:hidden;background:#fff} .mt-root .f-stool .seat .surf{position:absolute;inset:0} .mt-root .f-stool .lg{position:absolute;top:48px;width:5px;height:124px;background:var(--ink);border-radius:3px} .mt-root .f-stool .a{left:30px;transform:rotate(12deg);transform-origin:top} .mt-root .f-stool .b{right:30px;transform:rotate(-12deg);transform-origin:top} .mt-root .f-stool .r{position:absolute;bottom:42px;left:30px;right:30px;height:4px;background:var(--ink)} .mt-root .f-mat{width:196px;height:104px;transform:perspective(560px) rotateX(44deg)} .mt-root .f-mat .m{position:absolute;inset:0;border:3px solid var(--ink);border-radius:14px;overflow:hidden;background:#fff} .mt-root .f-mat .m .surf{position:absolute;inset:0} .mt-root .f-sign{width:184px;height:138px} .mt-root .f-sign .pl{position:absolute;inset:0;border:3px solid var(--ink);border-radius:6px;overflow:hidden;background:#fff} .mt-root .f-sign .pl .surf{position:absolute;inset:0} .mt-root .f-sign .sc{position:absolute;width:9px;height:9px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;z-index:2} .mt-root .f-sign .s1{top:9px;left:9px}.mt-root .f-sign .s2{top:9px;right:9px}.mt-root .f-sign .s3{bottom:9px;left:9px}.mt-root .f-sign .s4{bottom:9px;right:9px} .mt-root .f-light{width:184px;height:138px} .mt-root .f-light .fr{position:absolute;inset:0;border:3px solid var(--ink);border-radius:11px;padding:12px;background:var(--ink)} .mt-root .f-light .sc2{position:absolute;inset:12px;border-radius:4px;overflow:hidden} .mt-root .f-light .sc2 .surf{position:absolute;inset:0;filter:saturate(1.2) brightness(1.12)} .mt-root .f-light .gl{position:absolute;inset:-10px;border-radius:18px;z-index:-1;filter:blur(20px);opacity:.55} .mt-root .f-table{width:196px;height:196px} .mt-root .f-table .top{position:absolute;top:8px;left:8px;right:8px;height:76px;border:3px solid var(--ink);border-radius:50%;overflow:hidden;transform:perspective(440px) rotateX(50deg);background:#fff} .mt-root .f-table .top .surf{position:absolute;inset:0} .mt-root .f-table .st{position:absolute;top:68px;left:50%;margin-left:-4px;width:8px;height:96px;background:var(--ink)} .mt-root .f-table .ft{position:absolute;bottom:22px;left:50%;margin-left:-44px;width:88px;height:16px;border:3px solid var(--ink);border-radius:50%;background:#fff} /* ---------- silhouette placement in configurator ---------- */ .mt-root .mt-sil{display:flex;align-items:center;justify-content:center} .mt-root .mt-stage .mt-sil{position:absolute;inset:0} .mt-root .mt-stage .mt-sil[hidden]{display:none} .mt-root .mt-stage .mt-sil .p{transform:scale(2.6)} @media(max-width:900px){.mt-root .mt-stage .mt-sil .p{transform:scale(1.8)}} /* ---------- silhouette in shelf cards ---------- */ .mt-root .mt-gcard .art .mt-sil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .mt-root .mt-gcard .art .mt-sil .p{transform:scale(1.05)} .mt-root .mt-gcard .cap b em{color:var(--key)} /* ---------- SEARCH: index head + form + pagination (dark+lime, 2026-07-12) ---------- */ .mt-ihead-section{border-bottom:1px solid var(--line)} .mt-ihead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;padding:40px 22px 30px} .mt-ihead-kick{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-ihead-kick b{color:var(--key);font-weight:400} .mt-root h1.mt-ihead-h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(38px,5.2vw,64px); line-height:.9;letter-spacing:-.025em;text-transform:uppercase;margin:12px 0 0} .mt-root .mt-search-form{display:flex;gap:10px;flex:0 1 380px;min-width:240px} .mt-root .mt-search-form input[type=search]{flex:1;min-width:0;border:1px solid var(--line);border-radius:2px;padding:12px 14px;font:inherit;font-size:13px;background:var(--tile);color:var(--ink)} .mt-root .mt-search-form input[type=search]::placeholder{color:var(--soft)} .mt-root .mt-search-form input[type=search]:focus-visible{outline:none;border-color:var(--acc)} .mt-root .mt-search-form button{border:0;background:var(--acc);color:var(--onacc);border-radius:2px;padding:0 22px;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;cursor:pointer;transition:filter .15s} .mt-root .mt-search-form button:hover{filter:brightness(1.08)} .mt-root .mt-search-form button:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media(max-width:900px){.mt-ihead{padding:28px 22px 20px}.mt-search-form{flex-basis:100%}} .mt-pag{display:flex;justify-content:center;align-items:center;gap:6px;padding:26px 22px;font-size:12px} .mt-pag-a{color:var(--soft);padding:6px 11px;border:1px solid var(--line);border-radius:2px} .mt-pag-a:hover{color:var(--ink);border-color:var(--soft)} .mt-pag-a.on{color:var(--onacc);background:var(--acc);border-color:var(--acc);font-weight:700} .mt-pag-nx{color:var(--key);border-color:var(--line)} .mt-pag-gap{color:var(--soft);opacity:.5;padding:0 6px} /* ---------- HOME: rails (marquee, bestsellers, shop-by-gear — kept behind their existing show_* toggles; not in the locked mockup, see task report) ---------- */ /* home rails */ .mt-root .mt-home-rail{margin-block:clamp(24px,4vw,40px)} .mt-root .mt-rail-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:14px} .mt-root .mt-rail-head h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase; font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;line-height:1;margin:0} .mt-root .mt-rail-head h2 em{font-style:normal;color:var(--key)} .mt-root .mt-rail-see{white-space:nowrap;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.04em; text-transform:uppercase;font-weight:400;color:var(--ink);text-decoration:none} .mt-root .mt-rail-see:hover{color:var(--key)} .mt-root .mt-rail-track{display:flex;gap:16px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none} .mt-root .mt-rail-track::-webkit-scrollbar{display:none} .mt-root .mt-rail-track>.mt-rail-item{scroll-snap-align:start;flex:0 0 auto} .mt-root .mt-rail-track>.mt-rail-item.design{width:210px} .mt-root .mt-rail-track>.mt-obj-tile.mt-rail-item{width:210px} @media(min-width:900px){ .mt-root .mt-rail-track{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible} .mt-root .mt-rail-track>.mt-rail-item.design,.mt-root .mt-rail-track>.mt-obj-tile.mt-rail-item{width:auto} } /* gear tile (ported from reference .obj-tile + .stg) */ .mt-root .mt-stg{height:190px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--tile);border-bottom:1px solid var(--line)} .mt-root .mt-stg .mt-sil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center} .mt-root .mt-stg .mt-sil .p{transform:scale(.58);transform-origin:center} .mt-root .mt-obj-tile{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--tile);transition:border-color .18s} .mt-root .mt-obj-tile:hover{border-color:var(--soft)} .mt-root .mt-obj-tile .mt-obj-cap{padding:12px 14px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line)} .mt-root .mt-obj-tile .mt-obj-cap b{font-size:15px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.01em} .mt-root .mt-obj-tile .mt-obj-cap small{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:10px;color:var(--soft);letter-spacing:.02em} .mt-root .mt-obj-tile .mt-obj-cap .price{font-family:"SF Mono",Menlo,Consolas,monospace;font-weight:700;font-size:12px;color:var(--key);margin-top:4px} /* ============ ABOUT (2026-07-13, editorial rebuild + "every surface" demonstrator) ============ */ /* --- hero --- */ .mt-root .mt-a-hero{border-bottom:1px solid var(--line)} .mt-root .mt-a-hero .mt-wrap{padding-top:clamp(40px,6vw,64px);padding-bottom:40px} .mt-root .mt-a-kick{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-root .mt-a-kick b{color:var(--key);font-weight:400} .mt-root h1.mt-a-h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(40px,8vw,104px); line-height:.88;letter-spacing:-.03em;text-transform:uppercase;margin:18px 0 0;color:var(--ink)} .mt-root h1.mt-a-h1 span{color:var(--key)} .mt-root .mt-a-lead{font-size:clamp(16px,1.9vw,20px);max-width:52ch;color:var(--ink);opacity:.85;margin:26px 0 0} /* --- the demonstrator: one design worn by all six formats --- */ .mt-root .mt-demo-stage{margin:26px 0 8px;border:1px solid var(--line);border-radius:2px;background:var(--tile);padding:26px 22px 20px;overflow:hidden;position:relative} .mt-root .mt-demo-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap} .mt-root .mt-demo-cap{font-size:13px;color:var(--soft);margin:0} .mt-root .mt-demo-cap b{color:var(--ink);font-weight:700} .mt-root .mt-demo-hint{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--key)} .mt-root .mt-demo-gear{display:flex;gap:30px;align-items:flex-end;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding:34px 6px 8px;position:relative;scrollbar-width:thin} .mt-root .mt-demo-cell{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none} .mt-root .mt-demo-cell .glabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)} .mt-root .mt-demo-stage .surf{transition:background .18s} .mt-root .mt-swatches{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:8px} .mt-root .mt-swatches .lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);margin-right:2px} .mt-root .mt-swatch{width:36px;height:36px;border:1px solid var(--line);border-radius:2px;cursor:pointer;padding:0;background-size:cover;transition:border-color .14s} .mt-root .mt-swatch:hover{border-color:var(--soft)} .mt-root .mt-swatch[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)} .mt-root .mt-swatch:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc)} /* --- editorial blocks (numbered, block repeater) --- */ .mt-root .mt-ed{border-bottom:1px solid var(--line)} .mt-root .mt-ed .mt-wrap{display:grid;grid-template-columns:.5fr 1fr;padding:0} .mt-root .mt-ednum{padding:34px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px} .mt-root .mt-eno{font-size:12px;color:var(--key)} .mt-root .mt-elabel{font-size:11px;color:var(--soft);letter-spacing:.04em;text-transform:uppercase} .mt-root .mt-edbody{padding:34px 22px;max-width:64ch} .mt-root .mt-edbody h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(24px,3vw,34px); line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 14px;color:var(--ink)} .mt-root .mt-edbody p{font-size:16px;color:var(--ink);opacity:.85;margin:0} @media(max-width:900px){ .mt-root .mt-ed .mt-wrap{grid-template-columns:1fr} .mt-root .mt-ednum{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;gap:14px} } /* --- pull quote --- */ .mt-root .mt-pull{border-bottom:1px solid var(--line);text-align:center} .mt-root .mt-pull .mt-wrap{padding:clamp(40px,8vw,70px) 22px} .mt-root .mt-pull q{quotes:none;font-style:normal;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800; font-size:clamp(30px,5vw,60px);line-height:.98;letter-spacing:-.02em;text-transform:uppercase;color:var(--key);display:block} .mt-root .mt-pull-sub{font-size:12px;color:var(--soft);letter-spacing:.04em;margin-top:18px} /* --- facts row --- */ .mt-root .mt-afacts{border-bottom:1px solid var(--line)} .mt-root .mt-afacts .mt-wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0} .mt-root .mt-afact{padding:28px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:6px} .mt-root .mt-afact:last-child{border-right:0} .mt-root .mt-afact b{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(24px,3vw,36px);letter-spacing:-.02em;color:var(--ink)} .mt-root .mt-afact small{font-size:11px;color:var(--soft);letter-spacing:.03em} @media(max-width:900px){ .mt-root .mt-afacts .mt-wrap{grid-template-columns:repeat(2,1fr)} .mt-root .mt-afact:nth-child(2n){border-right:0} } /* --- steps strip --- */ .mt-root .mt-steps{border-bottom:1px solid var(--line)} .mt-root .mt-steps .mt-wrap{display:grid;grid-template-columns:repeat(3,1fr);padding:0} .mt-root .mt-step{padding:16px 22px;border-right:1px solid var(--line);font-size:12px;color:var(--soft)} .mt-root .mt-step:last-child{border-right:0} .mt-root .mt-step b{color:var(--key);font-weight:400;margin-right:8px} .mt-root .mt-step em{color:var(--ink);font-style:normal} @media(max-width:900px){ .mt-root .mt-steps .mt-wrap{grid-template-columns:1fr} .mt-root .mt-step{border-right:0;border-bottom:1px solid var(--line)} .mt-root .mt-step:last-child{border-bottom:0} } /* --- CTA band (mt-endcta shared with collection; ghost + multi-button here) --- */ .mt-root .mt-endcta-ctas{display:flex;gap:12px;flex-wrap:wrap} .mt-root .mt-endcta-cta.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)} .mt-root .mt-endcta-cta.ghost:hover{filter:none;border-color:var(--acc);color:var(--key)} /* --- contact (2026-07-13 dark+lime rebuild: hero + channels | native form, contact.html) --- */ .mt-root .mt-c-hero{border-bottom:1px solid var(--line)} .mt-root .mt-c-hero .mt-wrap{padding-top:56px;padding-bottom:34px} .mt-root .mt-c-kick{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-root h1.mt-c-h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(40px,6vw,80px); line-height:.9;letter-spacing:-.03em;text-transform:uppercase;margin:16px 0 0;color:var(--ink)} .mt-root h1.mt-c-h1 span{color:var(--key)} .mt-root .mt-c-lead{font-size:16px;max-width:46ch;color:var(--ink);opacity:.85;margin:22px 0 0} .mt-root .mt-c-body{border-bottom:1px solid var(--line)} .mt-root .mt-c-body .mt-c-body-in{display:grid;grid-template-columns:.8fr 1.2fr;padding:0} .mt-root .mt-c-chans{border-right:1px solid var(--line)} .mt-root .mt-c-chan{padding:22px;border-bottom:1px solid var(--line)} .mt-root .mt-c-chan:last-child{border-bottom:0} .mt-root .mt-c-cl{font-size:10px;color:var(--soft);letter-spacing:.06em;text-transform:uppercase} .mt-root .mt-c-cv{display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em;margin:6px 0 3px;color:var(--key)} .mt-root a.mt-c-cv:hover{filter:brightness(1.12)} .mt-root .mt-c-cs{font-size:11px;color:var(--soft)} .mt-root .mt-c-form{padding:34px 22px} .mt-root .mt-c-fh{font-size:11px;color:var(--soft);letter-spacing:.04em;margin-bottom:20px} .mt-root .mt-c-frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px} .mt-root .mt-c-field{display:flex;flex-direction:column;gap:6px} .mt-root .mt-c-field.full{grid-column:1/-1} .mt-root .mt-c-field label{font-size:10px;color:var(--soft);letter-spacing:.06em;text-transform:uppercase} .mt-root .mt-c-field input,.mt-root .mt-c-field select,.mt-root .mt-c-field textarea{background:var(--tile);border:1px solid var(--line);border-radius:2px;color:var(--ink);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;padding:12px 13px;outline:none;width:100%} .mt-root .mt-c-field textarea{resize:vertical;min-height:130px} .mt-root .mt-c-field input::placeholder,.mt-root .mt-c-field textarea::placeholder{color:var(--soft)} .mt-root .mt-c-field input:focus-visible,.mt-root .mt-c-field select:focus-visible,.mt-root .mt-c-field textarea:focus-visible{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc)} .mt-root .mt-c-field select{appearance:none;-webkit-appearance:none} .mt-root .mt-c-field.invalid input{border-color:var(--acc)} .mt-root .mt-c-field-err{display:block;font-size:11px;color:var(--key);margin-top:2px} .mt-root .mt-c-err-banner{font-size:12px;color:var(--ink);background:var(--tile);border:1px solid var(--acc);border-radius:2px;padding:10px 13px;margin-bottom:16px} .mt-root .mt-c-formfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap} .mt-root .mt-c-fn{font-size:10px;color:var(--soft)} .mt-root .mt-c-send{background:var(--acc);color:var(--onacc);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:15px 26px;border-radius:2px;font-weight:700;border:0;cursor:pointer} .mt-root .mt-c-send:hover{filter:brightness(1.06)} .mt-root .mt-c-ok{position:relative} .mt-root .mt-c-stamp{display:inline-block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--onacc);background:var(--acc);padding:6px 12px;border-radius:2px} .mt-root .mt-c-ok h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.02em;font-size:clamp(26px,3.5vw,34px);margin:16px 0 8px;color:var(--ink)} .mt-root .mt-c-ok p{color:var(--soft);margin:0} .mt-root .mt-c-again{margin-top:18px;display:inline-block;font-size:12px;color:var(--key);letter-spacing:.04em} .mt-root .mt-c-again:hover{color:var(--ink)} @media(max-width:900px){ .mt-root .mt-c-body .mt-c-body-in{grid-template-columns:1fr} .mt-root .mt-c-chans{border-right:0;border-bottom:1px solid var(--line)} .mt-root .mt-c-frow{grid-template-columns:1fr} } /* ============ VENUES / B2B (NET-NEW, 2026-07-13, venues.html) ============ Split hero + facts row reuse the .mt-hero-cell/.mt-hero-art (home) and .mt-afacts/.mt-afact (about) components as-is — same visual language, page-specific copy only. The enquiry form reuses .mt-c-field/.mt-c-frow/ .mt-c-formfoot/.mt-c-send/.mt-c-ok (contact) directly — identical tile/ hairline/lime-focus field styling per DESIGN-CONTEXT. Only the hero heading scale, range strip and stacked 4-col steps are page-specific. */ /* --- hero (split, reuses .mt-hero-cell / .mt-hero-art) --- */ .mt-root .mt-v-hero{border-bottom:1px solid var(--line)} .mt-root .mt-v-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;padding:0} .mt-root .mt-v-hero .mt-hero-cell{padding:48px 22px;justify-content:center} .mt-root .mt-v-hero .mt-hero-cell:last-child{padding:0;min-height:380px} .mt-root .mt-v-kick{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-root .mt-v-kick b{color:var(--key);font-weight:400} .mt-root h1.mt-v-h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(38px,5.2vw,66px); line-height:.92;letter-spacing:-.025em;text-transform:uppercase;margin:12px 0 0;color:var(--ink)} .mt-root h1.mt-v-h1 span{color:var(--key)} .mt-root .mt-v-lead{font-size:15px;max-width:40ch;color:var(--ink);opacity:.85;margin:0} @media(max-width:900px){ .mt-root .mt-v-hero-grid{grid-template-columns:1fr} .mt-root .mt-v-hero .mt-hero-cell:last-child{min-height:300px} } /* --- range strip --- */ .mt-root .mt-v-range{border-bottom:1px solid var(--line)} .mt-root .mt-v-range-in{padding-top:16px;padding-bottom:16px;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .mt-root .mt-v-rl{font-size:11px;color:var(--soft);letter-spacing:.04em;text-transform:uppercase;margin-right:6px} .mt-root .mt-v-ritem{font-size:11px;color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:6px 11px} /* --- steps strip (4-col, stacked number/label/detail — distinct from .mt-steps) --- */ .mt-root .mt-v-steps{border-bottom:1px solid var(--line)} .mt-root .mt-v-steps .mt-wrap{display:grid;grid-template-columns:repeat(4,1fr);padding:0} .mt-root .mt-v-step{padding:18px 22px;border-right:1px solid var(--line);font-size:12px;color:var(--soft);display:flex;flex-direction:column;gap:3px} .mt-root .mt-v-step:last-child{border-right:0} .mt-root .mt-v-step b{color:var(--key);font-weight:400} .mt-root .mt-v-step em{color:var(--ink);font-style:normal;font-size:14px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.01em} .mt-root .mt-v-step small{color:var(--soft);font-size:10px} @media(max-width:900px){ .mt-root .mt-v-steps .mt-wrap{grid-template-columns:repeat(2,1fr)} .mt-root .mt-v-step:nth-child(2n){border-right:0} } /* --- enquiry (intro | form; form reuses .mt-c-field / .mt-c-form* from Contact) --- */ .mt-root .mt-v-enq{border-bottom:1px solid var(--line)} .mt-root .mt-v-enq-in{display:grid;grid-template-columns:.85fr 1.15fr;padding:0} .mt-root .mt-v-enq-intro{padding:40px 22px;border-right:1px solid var(--line)} .mt-root .mt-v-enq-intro h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(24px,3vw,34px); line-height:1;letter-spacing:-.02em;text-transform:uppercase;margin:12px 0 12px;color:var(--ink)} .mt-root .mt-v-enq-intro p{font-size:14px;color:var(--ink);opacity:.85;max-width:38ch;margin:0} @media(max-width:900px){ .mt-root .mt-v-enq-in{grid-template-columns:1fr} .mt-root .mt-v-enq-intro{border-right:0;border-bottom:1px solid var(--line)} } /* ============ WRAP YOUR OWN / made-to-order (NET-NEW, 2026-07-13, wrap-your-own.html). Split hero + 4-step strip: the step strip reuses .mt-v-step/.mt-v-steps from Venues verbatim (identical 4-col stacked shape, page-specific copy only via the section's own settings). The request form reuses .mt-c-field/.mt-c-frow/.mt-c-formfoot/.mt-c-send/ .mt-c-ok from Contact directly (see DESIGN-CONTEXT "reuse shared classes where practical"). Only the hero art-intake panel, the format-card radio grid and the gate band are page-specific new rules below. ============ */ /* --- hero (bespoke cells: right cell holds the intake panel, not media) --- */ .mt-root .mt-w-hero{border-bottom:1px solid var(--line)} .mt-root .mt-w-hero-grid{display:grid;grid-template-columns:1.02fr 1fr;padding:0} .mt-root .mt-w-cell{padding:46px 22px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:20px} .mt-root .mt-w-cell:last-child{border-right:0;padding:26px 22px;justify-content:center} .mt-root .mt-w-kick{font-size:11px;color:var(--soft);letter-spacing:.04em} .mt-root .mt-w-kick b{color:var(--key);font-weight:400} .mt-root h1.mt-w-h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(40px,5.6vw,72px); line-height:.9;letter-spacing:-.025em;text-transform:uppercase;margin:10px 0 0;color:var(--ink)} .mt-root h1.mt-w-h1 span{color:var(--key)} .mt-root .mt-w-lead{font-size:15px;max-width:38ch;color:var(--ink);opacity:.85;margin:0} .mt-root .mt-w-reassure{font-size:11px;color:var(--soft);letter-spacing:.03em} .mt-root .mt-w-reassure b{color:var(--key);font-weight:400} /* --- art-intake panel: honest link/enquiry affordance, NOT a file uploader (see mt-wrap.liquid header comment — no anywhere) --- */ .mt-root .mt-w-intake{border:1.5px dashed var(--line);border-radius:4px;background:var(--tile); min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;text-align:center;transition:border-color .15s} .mt-root .mt-w-intake:hover{border-color:var(--acc)} .mt-root .mt-w-intake-glyph{width:52px;height:52px;border:1.5px solid var(--acc);border-radius:6px;display:flex;align-items:center;justify-content:center; color:var(--key);font-size:22px;font-weight:800} .mt-root .mt-w-intake-big{font-weight:800;font-size:20px;letter-spacing:-.01em;color:var(--ink)} .mt-root .mt-w-intake-note{font-size:10px;color:var(--soft);letter-spacing:.02em} .mt-root .mt-w-intake-cta{display:inline-block;background:var(--acc);color:var(--onacc);font-size:12px; letter-spacing:.04em;text-transform:uppercase;padding:11px 20px;border-radius:2px;font-weight:700} .mt-root .mt-w-intake-cta:hover{filter:brightness(1.06)} .mt-root .mt-w-intake-sub{font-size:10px;color:var(--soft);letter-spacing:.02em;max-width:34ch} @media(max-width:900px){ .mt-root .mt-w-hero-grid{grid-template-columns:1fr} .mt-root .mt-w-cell{border-right:0;border-bottom:1px solid var(--line)} .mt-root .mt-w-cell:last-child{border-bottom:0} } /* --- format grid section head --- */ .mt-root .mt-w-gh{border-bottom:1px solid var(--line)} .mt-root .mt-w-gh-in{display:flex;justify-content:space-between;align-items:center;padding:18px 0} .mt-root .mt-w-gh-l{font-size:12px;color:var(--soft)} .mt-root .mt-w-gh-l b{color:var(--key);font-weight:400} /* --- format cards (radiogroup; JS toggles .sel + aria-checked, see mt-wrap.liquid) --- */ .mt-root .mt-w-fgrid{border-bottom:1px solid var(--line)} .mt-root .mt-w-fgrid-in{display:grid;grid-template-columns:repeat(3,1fr);padding:0} .mt-root .mt-w-fcard{display:flex;align-items:center;gap:12px;padding:18px 20px;border:0;border-right:1px solid var(--line); border-bottom:1px solid var(--line);border-radius:0;cursor:pointer;transition:background .15s;background:transparent; width:100%;text-align:left;font-family:inherit;color:inherit} .mt-root .mt-w-fcard:nth-child(3n){border-right:0} .mt-root .mt-w-fcard:nth-last-child(-n+3){border-bottom:0} .mt-root .mt-w-fcard:hover{background:var(--tile)} .mt-root .mt-w-fcard.sel{background:var(--tile)} .mt-root .mt-w-fcard:focus-visible{outline:2px solid var(--acc);outline-offset:-2px} .mt-root .mt-w-fcard .fdot{color:var(--soft);font-size:13px} .mt-root .mt-w-fcard .fdot::before{content:"○"} .mt-root .mt-w-fcard.sel .fdot{color:var(--key)} .mt-root .mt-w-fcard.sel .fdot::before{content:"●"} .mt-root .mt-w-fcard .fmeta{flex:1;min-width:0;display:flex;flex-direction:column} .mt-root .mt-w-fcard .fmeta b{font-size:15px;font-weight:700;letter-spacing:-.01em} .mt-root .mt-w-fcard .fmeta small{font-size:10px;color:var(--soft)} .mt-root .mt-w-fcard .fpr{font-size:12px;color:var(--ink);font-weight:700;white-space:nowrap} .mt-root .mt-w-fcard.sel .fpr{color:var(--key)} @media(max-width:900px){ .mt-root .mt-w-fgrid-in{grid-template-columns:1fr} .mt-root .mt-w-fcard{border-right:0} .mt-root .mt-w-fcard:nth-last-child(-n+3){border-bottom:1px solid var(--line)} .mt-root .mt-w-fcard:last-child{border-bottom:0} } /* --- the gate band ("we draft, you approve" — the honesty differentiator) --- */ .mt-root .mt-w-gate{border-bottom:1px solid var(--line)} .mt-root .mt-w-gate-grid{display:grid;grid-template-columns:1.4fr 1fr;padding:0} .mt-root .mt-w-gate-l{padding:40px 22px;border-right:1px solid var(--line)} .mt-root .mt-w-gk{font-size:11px;color:var(--key);letter-spacing:.06em;text-transform:uppercase} .mt-root h2.mt-w-gate-h2{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,40px); line-height:.98;letter-spacing:-.02em;text-transform:uppercase;margin:12px 0 10px;color:var(--ink)} .mt-root .mt-w-gate-p{font-size:14px;color:var(--ink);opacity:.85;max-width:46ch;margin:0} .mt-root .mt-w-gate-r{padding:40px 22px;display:flex;flex-direction:column;justify-content:center;gap:16px} .mt-root .mt-w-needs{display:flex;flex-direction:column} .mt-root .mt-w-nrow{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px} .mt-root .mt-w-nrow:last-child{border-bottom:0} .mt-root .mt-w-nrow .nk{color:var(--soft);letter-spacing:.04em;text-transform:uppercase} .mt-root .mt-w-nrow .nv{color:var(--ink);text-align:right} @media(max-width:900px){ .mt-root .mt-w-gate-grid{grid-template-columns:1fr} .mt-root .mt-w-gate-l{border-right:0;border-bottom:1px solid var(--line)} } /* --- request strip (mono lead-in above the real form) --- */ .mt-root .mt-w-req{border-bottom:1px solid var(--line)} .mt-root .mt-w-req-strip{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:26px 22px;flex-wrap:wrap} .mt-root .mt-w-req-l{font-size:12px;color:var(--soft)} .mt-root .mt-w-req-l b{color:var(--key);font-weight:400} /* --- form extras: selected-format confirmation + rights checkbox (form itself reuses .mt-c-field/.mt-c-frow/.mt-c-formfoot/.mt-c-send/.mt-c-ok) --- */ .mt-root .mt-w-form-section .mt-c-form{padding-top:0} .mt-root .mt-w-selnote{font-size:11px;color:var(--soft);margin:2px 0 16px} .mt-root .mt-w-selnote b{color:var(--key);font-weight:400} .mt-root .mt-w-rights{display:flex;align-items:flex-start;gap:10px;padding:14px;background:var(--tile); border:1px solid var(--line);border-radius:2px;margin-bottom:16px} .mt-root .mt-w-rights input[type="checkbox"]{margin-top:3px;accent-color:var(--acc);width:16px;height:16px;flex:none} .mt-root .mt-w-rights label{font-size:12px;color:var(--ink);line-height:1.4} .mt-root .mt-w-rights.invalid{border-color:var(--acc)} /* ========================================================= T8 — cart + account (Dawn stock surfaces) — dark+lime polish. These templates render OUTSIDE .mt-root, and cart-drawer/main- cart-*/customer-* sections already sit on scheme-1 (dark+lime — see config/settings_data.json `cart_color_scheme` and templates/cart.json `color_scheme`), so colour/contrast comes from Dawn's own --color-* scheme variables. This block is a restrained CSS-only decorative pass on top of that: it does NOT touch cart line-item logic, quantity/remove forms, totals, the checkout button's action, or any customer form Liquid — styling only, mirroring the canonical tokens locally since this scope is outside .mt-root. ========================================================= */ cart-items, #main-cart-footer, .cart-drawer, .customer { --bg: #0c0c0d; --ink: #f2f0ea; --soft: #8a8880; --line: #26262a; --acc: #aaff00; --onacc: #0c0c0d; --tile: #141416; } /* page-level headings — heavy uppercase Helvetica, matching the rest of the site */ .customer h1, cart-items .title--primary, .cart-drawer .drawer__heading, .cart-drawer .cart__empty-text { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--ink); } /* buttons (checkout / update / login / register / address submit) — mono uppercase label; colour + dark-on-lime label already come from the scheme-1 --color-button/--color-button-text vars, untouched here */ .customer button, .customer input[type="submit"], cart-items .button, #main-cart-footer .button, .cart-drawer .button { font-family: "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; text-transform: uppercase; } /* form inputs (login / register / address / cart note) — raised tile + hairline + lime focus, matching the Contact fields (.mt-c-field) */ .customer .field__input, .customer .select__select, .customer .field input, .customer select, cart-items .field__input, #main-cart-footer .field__input, #main-cart-footer .text-area, .cart-drawer .field__input { background-color: var(--tile); color: var(--ink); } .customer .field:after, .customer .select:after, .customer .localization-form__select:after, cart-items .field:after, #main-cart-footer .field:after, .cart-drawer .field:after { box-shadow: 0 0 0 var(--inputs-border-width) var(--line); } .customer .field__input:focus-visible, .customer .select__select:focus-visible, .customer .field input:focus-visible, .customer select:focus-visible, cart-items .field__input:focus-visible, #main-cart-footer .field__input:focus-visible, #main-cart-footer .text-area:focus-visible, .cart-drawer .field__input:focus-visible { box-shadow: 0 0 0 calc(0.1rem + var(--inputs-border-width)) var(--acc); } /* mono treatment for prices + order meta — light touch, no recolour (keeps the single lime accent for interactive/CTA moments only) */ .customer .order-history th, .customer .order-history td, .customer .price, cart-items .price, #main-cart-footer .price, #main-cart-footer .totals__total-value, .cart-drawer .price, .cart-drawer .totals__total-value { font-family: "SF Mono", Menlo, Consolas, monospace; } /* links — lime on hover, never on real buttons (checkout / continue shopping) */ .customer a:not(.button):hover, cart-items a:not(.button):hover, #main-cart-footer a:not(.button):hover, .cart-drawer a:not(.button):hover { color: var(--acc); } @media(prefers-reduced-motion:reduce){.mt-root .mt-demo-stage .surf,.mt-root .mt-swatch{transition:none}} /* ============================================================ PDP R6 — title above art on mobile, detail accordions, white selection (lime = CTA only), 8-up related, wider gap ============================================================ */ /* split: art is the feature; header sits above the buy col (desktop) / above the art (mobile) */ .mt-pdp{grid-template-columns:1.4fr 1fr;grid-template-areas:"art head" "art buy"} .mt-viewer{grid-area:art} .mt-head{grid-area:head;min-width:0;padding:2px 26px 4px;display:flex;flex-direction:column;gap:10px} .mt-buy{grid-area:buy;min-width:0;padding:8px 26px 34px} .mt-tag{font-size:14px;line-height:1.5;color:var(--ink);opacity:.82;max-width:44ch;margin:0} @media(max-width:900px){ .mt-pdp{grid-template-columns:1fr;grid-template-areas:"head" "art" "buy"} .mt-head{padding:24px 0 16px} .mt-buy{padding:22px 0 30px} .mt-tag{max-width:none} } /* selection = white (secondary); lime reserved for the Add-to-Bag CTA + top strip */ .mt-fmt[aria-checked="true"] .fdot{color:var(--ink)} .mt-fmt[aria-checked="true"] .fpr{color:var(--ink)} .mt-price .pval{color:var(--ink)} /* detail dropdowns */ .mt-acc{border-top:1px solid var(--line)} .mt-det{border-bottom:1px solid var(--line)} .mt-det > summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center; gap:14px;padding:14px 2px;font-size:11px;color:var(--ink);letter-spacing:.06em;text-transform:uppercase} .mt-det > summary::-webkit-details-marker{display:none} .mt-det > summary .plus{color:var(--ink);font-size:15px;transition:transform .2s;flex:none} .mt-det[open] > summary .plus{transform:rotate(45deg)} .mt-accbody{padding:0 2px 16px;font-size:13px;line-height:1.6;color:var(--ink);opacity:.86} .mt-accbody > *:first-child{margin-top:0} .mt-accbody a{color:var(--key)} .mt-accbody a:hover{text-decoration:underline} .mt-accbody .mt-srow{opacity:1} /* more-in-this-vibe: 8 items, 4-up desktop / 2-up mobile, extra breathing room */ .mt-more{margin-top:96px} .mt-more .mt-grid{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){ .mt-more{margin-top:44px} .mt-more .mt-grid{grid-template-columns:repeat(2,1fr)} } /* format selector as segmented buttons (match R6 comp "select gear") */ .mt-pickhd--seg{border-bottom:0;padding-bottom:9px;margin-bottom:0} .mt-fmts--seg{display:grid;grid-template-columns:repeat(2,1fr);gap:8px} .mt-fmts--seg .mt-fmt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; padding:15px 10px;border:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:4px; background:var(--tile);text-align:center} .mt-fmts--seg .mt-fmt:hover{border-color:var(--soft);background:var(--tile)} .mt-fmts--seg .mt-fmt .fdot,.mt-fmts--seg .mt-fmt .fpr{display:none} .mt-fmts--seg .mt-fmt .fmeta{align-items:center} .mt-fmts--seg .mt-fmt .fmeta b{font-size:14px} .mt-fmts--seg .mt-fmt .fmeta small{font-size:10px;text-align:center} .mt-fmts--seg .mt-fmt[aria-checked="true"]{background:#17171a;border-color:var(--ink);color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)} .mt-fmts--seg .mt-fmt[aria-checked="true"] .fmeta b{color:var(--ink)} /* selected seg is a fixed-dark inverse pill in both modes → light text on light */ html[data-theme="light"] .mt-fmts--seg .mt-fmt[aria-checked="true"], html[data-theme="light"] .mt-fmts--seg .mt-fmt[aria-checked="true"] .fmeta b{color:#f2f0ea} /* ── mt-designer / brand "dossier" ─────────────────────────────── Sticky spec-sheet rail (identity + key/value spec) beside the work grid. One section serves designer AND brand collections; labels remap via template logic. All colour via tokens → light mode auto. */ .mt-root .mt-dossier { display: grid; grid-template-columns: 320px 1fr; gap: 0; margin-top: 8px; } .mt-root .mt-drail { border-right: 1px solid var(--line); padding: 22px 32px 34px 0; position: sticky; top: 20px; align-self: start; } .mt-root .mt-dtile { width: 92px; height: 92px; border: 1px solid var(--line); border-radius: 2px; display: grid; place-items: center; background: var(--tile); position: relative; overflow: hidden; margin-bottom: 22px; } .mt-root .mt-dtile img { width: 100%; height: 100%; object-fit: cover; display: block; } .mt-root .mt-dtile b { font: 800 48px/1 Helvetica, Arial, sans-serif; color: var(--ink); } .mt-root .mt-ddot { position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); } .mt-root .mt-dkick { color: var(--key); font-size: 12px; letter-spacing: .06em; margin-bottom: 8px; } .mt-root .mt-dname { font: 800 clamp(34px, 3.4vw, 50px)/.9 Helvetica, Arial, sans-serif; text-transform: uppercase; letter-spacing: -.03em; margin: 0 0 22px; color: var(--ink); } .mt-root .mt-dspec { border-top: 1px solid var(--line); font-size: 12px; margin: 0 0 22px; } .mt-root .mt-dspec > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); letter-spacing: .03em; } .mt-root .mt-dspec dt { color: var(--soft); text-transform: uppercase; margin: 0; } .mt-root .mt-dspec dd { margin: 0; color: var(--ink); text-align: right; } .mt-root .mt-dspec .hi { color: var(--key); } .mt-root .mt-dbio { color: var(--soft); font-size: 14px; line-height: 1.6; margin: 0 0 20px; max-width: 34ch; } .mt-root .mt-dlinks { display: flex; flex-direction: column; gap: 7px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; margin: 0 0 24px; } .mt-root .mt-dlinks a { color: var(--soft); display: inline-flex; gap: 8px; } .mt-root .mt-dlinks a::before { content: "\2197"; color: var(--key); } .mt-root .mt-dlinks a:hover { color: var(--ink); } .mt-root .mt-dcta { display: inline-block; background: var(--acc); color: var(--onacc); font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; padding: 12px 20px; border-radius: 2px; } .mt-root .mt-dcta:hover { filter: brightness(1.06); } .mt-root .mt-dwork { padding: 22px 0 34px 32px; } .mt-root .mt-dwork .mt-grid { grid-template-columns: repeat(3, 1fr); padding-bottom: 0; } @media (max-width: 1040px) { .mt-root .mt-dwork .mt-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .mt-root .mt-dossier { grid-template-columns: 1fr; } .mt-root .mt-drail { position: static; border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0 26px; } .mt-root .mt-dwork { padding: 26px 0 0; } } @media (max-width: 680px) { .mt-root .mt-dwork .mt-grid { grid-template-columns: repeat(2, 1fr); } } /* ── mt-designers-index ──────────────────────────────────────── */ .mt-root .mt-dix-head { padding: 48px 0 8px; } .mt-root .mt-dix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .mt-root .mt-dix-card { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 26px 16px; background: var(--bg); color: inherit; text-decoration: none; transition: background .15s; } .mt-root .mt-dix-card:hover { background: var(--tile); } .mt-root .mt-dix-av { width: 84px; height: 84px; flex-basis: 84px; border-radius: 50%; } .mt-root .mt-dix-name b { font: 700 15px/1.1 Helvetica, Arial, sans-serif; } .mt-root .mt-dix-count { color: var(--soft); font-size: 11px; } /* ── PDP artist link ─────────────────────────────────────────── */ .mt-root .mt-kick-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--acc); } .mt-root .mt-kick-link:hover { color: var(--key); }