/* ============================================================ wrong size co — shared design system editorial streetwear · warm-neutral · sharp grotesque ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap'); :root{ --bg: #E7E3DB; --bg-2: #EEEAE2; --ink: #16130E; --ink-soft: #4A443B; --muted: #877E70; --line: rgba(22,19,14,.16); --line-soft: rgba(22,19,14,.09); --card: #E2DDD3; --accent: #2B5AC9; /* frog blue — used sparingly */ --accent-ink:#ffffff; --maxw: 1480px; --gutter: clamp(18px, 4vw, 56px); --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; --ease: cubic-bezier(.4,.01,.16,1); } /* tweak: accent variants applied via data-accent on */ html[data-accent="green"]{ --accent:#2F7A3E; } html[data-accent="ink"] { --accent:#16130E; } html[data-accent="orange"]{ --accent:#C8521C; } /* tweak: dark theme */ html[data-theme="dark"]{ --bg:#121009; --bg-2:#1A180F; --ink:#EFEAE0; --ink-soft:#C3BCAE; --muted:#8B8474; --line:rgba(239,234,224,.18); --line-soft:rgba(239,234,224,.09); --card:#1C1A11; --accent-ink:#ffffff; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ -webkit-text-size-adjust:100%; } body{ background:var(--bg); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; overflow-x:hidden; } a{ color:inherit; text-decoration:none; } img{ display:block; max-width:100%; } button{ font:inherit; color:inherit; cursor:pointer; } ::selection{ background:var(--accent); color:var(--accent-ink); } /* ---- type utilities ---- */ .mono{ font-family:var(--font-mono); font-weight:400; letter-spacing:0; } .eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .u-line{ width:100%; height:1px; background:var(--line); border:0; } h1,h2,h3,h4{ font-weight:600; letter-spacing:-0.025em; line-height:.98; margin:0; } .display{ font-weight:600; letter-spacing:-0.04em; line-height:.9; text-transform:uppercase; } .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); } /* ============================================================ ANNOUNCEMENT TICKER ============================================================ */ .ticker{ background:var(--ink); color:var(--bg); font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; overflow:hidden; white-space:nowrap; border-bottom:1px solid transparent; } .ticker__track{ display:inline-flex; gap:0; animation:marq 34s linear infinite; } .ticker__track span{ padding:9px 26px; display:inline-block; } .ticker__track span::after{ content:"✦"; margin-left:26px; opacity:.5; } @keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* ============================================================ HEADER ============================================================ */ .hdr{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(14px) saturate(1.1); border-bottom:1px solid var(--line); } .hdr__in{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); height:62px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; } .wordmark{ font-weight:700; letter-spacing:-0.05em; font-size:19px; text-transform:lowercase; display:inline-flex; align-items:center; gap:.5ch; line-height:1; } .wordmark b{ font-weight:700; } .wordmark .slash{ color:var(--accent); } .nav{ display:flex; gap:30px; justify-self:center; } .nav a{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:6px 0; position:relative; color:var(--ink-soft); transition:color .2s var(--ease); } .nav a::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0; background:var(--ink); transition:width .28s var(--ease); } .nav a:hover,.nav a[aria-current]{ color:var(--ink); } .nav a:hover::after,.nav a[aria-current]::after{ width:100%; } .hdr__r{ display:flex; gap:18px; align-items:center; justify-self:end; } .icon-btn{ background:none; border:0; padding:4px; display:inline-flex; color:var(--ink); } .icon-btn svg{ width:19px; height:19px; } .bag-pill{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; border:1px solid var(--line); border-radius:100px; padding:6px 13px; display:inline-flex; gap:8px; align-items:center; transition:.2s var(--ease); } .bag-pill:hover{ border-color:var(--ink); } .bag-pill .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); } .menu-btn{ display:none; } /* ============================================================ HERO ============================================================ */ .hero{ display:flex; flex-direction:column; } html[data-hero="split"] .hero--editorial{ display:none; } html[data-hero="editorial"] .hero--split{ display:none; } .banner{ position:relative; overflow:hidden; background:var(--card); } .banner--tall{ height:clamp(560px, 86vh, 880px); } .banner--split{ display:grid; grid-template-columns:1fr 1fr; } .banner__media{ position:absolute; inset:0; } .banner__media img{ width:100%; height:100%; object-fit:cover; } .banner__media--shade::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,8,5,.05) 0%, rgba(10,8,5,.0) 38%, rgba(10,8,5,.46) 100%); } .banner__body{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(22px,4vw,52px); color:#F3EFE7; } .banner__kicker{ font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.85; margin-bottom:14px; } .banner__title{ font-size:clamp(40px, 7vw, 104px); line-height:.86; letter-spacing:-0.045em; text-transform:uppercase; font-weight:600; max-width:14ch; text-wrap:balance; } .banner__row{ display:flex; align-items:center; gap:18px; margin-top:22px; flex-wrap:wrap; } /* split panel (text on color, image beside) */ .panel{ display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,5vw,72px); background:var(--bg-2); gap:22px; } .panel--ink{ background:var(--ink); color:var(--bg); } .panel__title{ font-size:clamp(30px,4vw,58px); line-height:.92; letter-spacing:-0.035em; text-transform:uppercase; font-weight:600; } .split-media{ position:relative; min-height:420px; background:var(--card); } .split-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } /* buttons */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:13px 22px; border-radius:100px; border:1px solid currentColor; transition:.22s var(--ease); white-space:nowrap; } .btn--solid{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .btn--solid:hover{ background:transparent; color:var(--ink); } .banner .btn--solid{ background:#F3EFE7; color:#16130E; border-color:#F3EFE7; } .banner .btn--solid:hover{ background:transparent; color:#F3EFE7; } .btn--ghost-light{ color:#F3EFE7; } .btn--ghost-light:hover{ background:#F3EFE7; color:#16130E; } .btn--accent{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); } .btn--accent:hover{ filter:brightness(1.08); } .btn .arr{ transition:transform .25s var(--ease); } .btn:hover .arr{ transform:translateX(4px); } /* ============================================================ SECTION HEADERS ============================================================ */ .section{ padding-block:clamp(56px,8vw,108px); } .section__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; } .section__title{ font-size:clamp(30px,5vw,68px); line-height:.92; letter-spacing:-0.04em; text-transform:uppercase; font-weight:600; } .section__title .idx{ font-family:var(--font-mono); font-size:.32em; vertical-align:super; letter-spacing:0; color:var(--muted); font-weight:400; } .link-arrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; gap:8px; align-items:center; padding-bottom:3px; border-bottom:1px solid var(--ink); } .link-arrow .arr{ transition:transform .25s var(--ease); } .link-arrow:hover .arr{ transform:translateX(4px); } /* ============================================================ PRODUCT GRID + CARD ============================================================ */ .grid{ display:grid; gap:clamp(14px,1.4vw,22px) clamp(14px,1.4vw,22px); grid-template-columns:repeat(4,1fr); } .grid--3{ grid-template-columns:repeat(3,1fr); } .card{ display:flex; flex-direction:column; } .card__media{ position:relative; aspect-ratio:3/4; background:var(--card); overflow:hidden; margin-bottom:13px; } .card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .5s var(--ease), transform .9s var(--ease); } .card__media .img-b{ opacity:0; } .card:hover .card__media .img-a{ opacity:0; } .card:hover .card__media .img-b{ opacity:1; transform:scale(1.03); } .card__tag{ position:absolute; top:11px; left:11px; z-index:3; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:var(--bg); color:var(--ink); padding:5px 9px; border-radius:100px; } .card__tag--accent{ background:var(--accent); color:var(--accent-ink); } .card__fav{ position:absolute; top:9px; right:9px; z-index:3; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb,var(--bg) 70%, transparent); opacity:0; transform:translateY(-4px); transition:.25s var(--ease); } .card:hover .card__fav{ opacity:1; transform:none; } .card__fav svg{ width:15px; height:15px; } .card__meta{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; } .card__name{ font-size:14.5px; font-weight:500; letter-spacing:-0.015em; } .card__sub{ font-family:var(--font-mono); font-size:11px; color:var(--muted); margin-top:3px; letter-spacing:.02em; } .card__price{ font-family:var(--font-mono); font-size:13px; white-space:nowrap; } .card__price s{ color:var(--muted); margin-right:6px; } /* placeholder (upcoming drop) tile */ .ph{ position:absolute; inset:0; background: repeating-linear-gradient(135deg, var(--card) 0 11px, color-mix(in srgb,var(--card) 84%, var(--ink)) 11px 22px); display:grid; place-items:center; text-align:center; } .ph span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); background:var(--bg); padding:7px 12px; border-radius:100px; } /* horizontal scroller variant */ .scroller{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:clamp(14px,1.4vw,22px); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:thin; } .scroller .card{ scroll-snap-align:start; } /* ============================================================ EXPLORE CATEGORY TILES ============================================================ */ .cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.4vw,20px); } .cat{ position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--card); display:flex; align-items:flex-end; padding:18px; } .cat .ph{ inset:0; } .cat__label{ position:relative; z-index:2; display:flex; justify-content:space-between; align-items:center; width:100%; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink); } .cat:hover .arr{ transform:translateX(4px); } .cat .arr{ transition:transform .25s var(--ease); } /* ============================================================ MARQUEE STRIP (big) ============================================================ */ .bigmarq{ border-block:1px solid var(--line); overflow:hidden; white-space:nowrap; padding-block:18px; background:var(--bg-2); } .bigmarq__t{ display:inline-flex; animation:marq 30s linear infinite; } .bigmarq__t span{ font-weight:600; text-transform:uppercase; letter-spacing:-0.03em; font-size:clamp(26px,4vw,52px); padding-inline:28px; display:inline-flex; align-items:center; } .bigmarq__t span::after{ content:"◇"; margin-left:56px; color:var(--accent); font-size:.6em; } /* ============================================================ JOURNAL ============================================================ */ .journal{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(16px,1.6vw,26px); } .jcard__media{ position:relative; aspect-ratio:4/3; background:var(--card); overflow:hidden; margin-bottom:14px; } .jcard--lead .jcard__media{ aspect-ratio:16/11; } .jcard__media .ph{ inset:0; } .jcard__cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); } .jcard__title{ font-size:clamp(18px,1.5vw,26px); letter-spacing:-0.02em; margin-top:8px; font-weight:600; line-height:1.04; } .jcard__ex{ color:var(--ink-soft); font-size:14px; margin-top:10px; max-width:42ch; } /* ============================================================ NEWSLETTER + FOOTER ============================================================ */ .news{ background:var(--ink); color:var(--bg); padding-block:clamp(56px,8vw,104px); } .news__in{ display:grid; grid-template-columns:1.1fr 1fr; gap:40px; align-items:center; } .news__title{ font-size:clamp(32px,5vw,72px); text-transform:uppercase; letter-spacing:-0.04em; line-height:.9; font-weight:600; } .news__form{ display:flex; flex-direction:column; gap:14px; } .field{ display:flex; gap:10px; border:1px solid rgba(231,227,219,.32); border-radius:100px; padding:6px 6px 6px 20px; align-items:center; } .field input{ flex:1; background:none; border:0; outline:0; color:var(--bg); font-family:var(--font-mono); font-size:13px; letter-spacing:.02em; } .field input::placeholder{ color:rgba(231,227,219,.5); } .field button{ background:var(--bg); color:var(--ink); border:0; border-radius:100px; padding:11px 20px; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; transition:.2s var(--ease); } .field button:hover{ background:var(--accent); color:var(--accent-ink); } .news__fine{ font-family:var(--font-mono); font-size:11px; color:rgba(231,227,219,.55); letter-spacing:.02em; } .ftr{ background:var(--bg-2); padding-block:clamp(46px,6vw,74px); } .ftr__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:54px; } .ftr__brand .wordmark{ font-size:30px; } .ftr__tag{ color:var(--ink-soft); font-size:14px; max-width:30ch; margin-top:16px; } .ftr__col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 16px; font-weight:400; } .ftr__col a{ display:block; font-size:14px; padding:5px 0; color:var(--ink-soft); transition:color .18s var(--ease); } .ftr__col a:hover{ color:var(--ink); } .ftr__bot{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:26px; border-top:1px solid var(--line); flex-wrap:wrap; } .ftr__bot .mono{ font-size:11px; color:var(--muted); letter-spacing:.04em; } /* ============================================================ PRODUCT DETAIL ============================================================ */ .pdp{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,3vw,64px); align-items:start; padding-top:30px; } .gallery{ display:grid; grid-template-columns:64px 1fr; gap:16px; } .gallery__thumbs{ display:flex; flex-direction:column; gap:10px; } .thumb{ aspect-ratio:3/4; background:var(--card); overflow:hidden; border:1px solid transparent; position:relative; transition:border-color .2s var(--ease); } .thumb img{ width:100%; height:100%; object-fit:cover; } .thumb[aria-selected="true"]{ border-color:var(--ink); } .thumb .ph{ inset:0; } .gallery__main{ position:relative; aspect-ratio:3/4; background:var(--card); overflow:hidden; } .gallery__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .4s var(--ease); } .gallery__main img.on{ opacity:1; } .info{ position:sticky; top:90px; display:flex; flex-direction:column; } .info__crumb{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; } .info__name{ font-size:clamp(30px,3.4vw,46px); text-transform:uppercase; letter-spacing:-0.04em; line-height:.94; font-weight:600; } .info__price{ font-family:var(--font-mono); font-size:18px; margin-top:16px; display:flex; gap:12px; align-items:center; } .info__desc{ color:var(--ink-soft); font-size:15px; margin-top:22px; max-width:46ch; line-height:1.55; } .opt{ margin-top:28px; } .opt__label{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:11px; } .swatches{ display:flex; gap:10px; } .swatch{ width:30px; height:30px; border-radius:50%; border:1px solid var(--line); position:relative; } .swatch[aria-selected="true"]::after{ content:""; position:absolute; inset:-4px; border:1px solid var(--ink); border-radius:50%; } .sizes{ display:flex; gap:8px; flex-wrap:wrap; } .size{ min-width:50px; padding:12px 10px; border:1px solid var(--line); background:none; font-family:var(--font-mono); font-size:13px; text-transform:uppercase; border-radius:8px; transition:.16s var(--ease); } .size:hover{ border-color:var(--ink); } .size[aria-selected="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .size[disabled]{ color:var(--muted); cursor:not-allowed; opacity:.5; text-decoration:line-through; } .buy{ display:flex; gap:10px; margin-top:30px; } .buy .btn{ flex:1; justify-content:center; padding:17px; font-size:13px; } .add{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .add:hover{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .acc{ margin-top:36px; border-top:1px solid var(--line); } .acc__item{ border-bottom:1px solid var(--line); } .acc__btn{ width:100%; background:none; border:0; padding:18px 0; text-align:left; display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; } .acc__btn .pm{ transition:transform .25s var(--ease); } .acc__item[data-open] .pm{ transform:rotate(45deg); } .acc__panel{ max-height:0; overflow:hidden; transition:max-height .35s var(--ease); } .acc__panel p{ padding:0 0 20px; color:var(--ink-soft); font-size:14px; line-height:1.6; max-width:52ch; margin:0; } .usp{ display:flex; gap:24px; margin-top:26px; flex-wrap:wrap; } .usp span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-soft); display:flex; gap:7px; align-items:center; } .usp .dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); } /* ============================================================ SHOP / FILTER BAR ============================================================ */ .shophero{ padding-top:clamp(40px,6vw,80px); padding-bottom:8px; } .shophero h1{ font-size:clamp(48px,10vw,160px); text-transform:uppercase; letter-spacing:-0.05em; line-height:.84; font-weight:600; } .filterbar{ position:sticky; top:62px; z-index:40; background:color-mix(in srgb,var(--bg) 88%, transparent); backdrop-filter:blur(12px); border-block:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:16px; padding-block:14px; margin-bottom:34px; } .chips{ display:flex; gap:8px; flex-wrap:wrap; } .chip{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; padding:8px 14px; border:1px solid var(--line); border-radius:100px; background:none; transition:.16s var(--ease); } .chip:hover{ border-color:var(--ink); } .chip[aria-selected="true"]{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .sortsel{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); display:flex; gap:8px; align-items:center; } /* ============================================================ TWEAKS PANEL (vanilla) ============================================================ */ .tw{ position:fixed; right:18px; bottom:18px; z-index:9999; width:264px; background:var(--bg-2); color:var(--ink); border:1px solid var(--line); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.22); font-family:var(--font-sans); display:none; overflow:hidden; } .tw[data-open]{ display:block; } .tw__hd{ display:flex; justify-content:space-between; align-items:center; padding:13px 14px; border-bottom:1px solid var(--line); cursor:grab; } .tw__hd h6{ margin:0; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; } .tw__x{ background:none; border:0; font-size:16px; line-height:1; color:var(--muted); } .tw__bd{ padding:14px; display:flex; flex-direction:column; gap:18px; } .tw__row label{ display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:9px; } .tw__opts{ display:flex; gap:8px; flex-wrap:wrap; } .tw__sw{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); position:relative; cursor:pointer; } .tw__sw[aria-selected="true"]::after{ content:""; position:absolute; inset:-4px; border:1px solid var(--ink); border-radius:50%; } .tw__seg{ display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; } .tw__seg button{ flex:1; background:none; border:0; padding:9px 4px; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.04em; } .tw__seg button[aria-selected="true"]{ background:var(--ink); color:var(--bg); } /* ============================================================ REVEAL ANIMATION ============================================================ */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .grid{ grid-template-columns:repeat(3,1fr); } .cats{ grid-template-columns:repeat(2,1fr); } .journal{ grid-template-columns:1fr 1fr; } .ftr__top{ grid-template-columns:1fr 1fr; } } @media (max-width:820px){ .nav{ display:none; } .menu-btn{ display:inline-flex; } .banner--split{ grid-template-columns:1fr; } .split-media{ min-height:340px; } .pdp{ grid-template-columns:1fr; } .gallery{ grid-template-columns:1fr; } .gallery__thumbs{ flex-direction:row; order:2; } .thumb{ width:64px; } .info{ position:static; } .news__in{ grid-template-columns:1fr; } .journal{ grid-template-columns:1fr; } } @media (max-width:560px){ .grid,.grid--3{ grid-template-columns:repeat(2,1fr); } .cats{ grid-template-columns:1fr 1fr; } .ftr__top{ grid-template-columns:1fr; gap:28px; } .bag-pill span{ display:none; } }