/* ============================================================ PERSIST — subtle expression layer (LANDING ONLY) Adds quiet craft WITHIN the monochrome discipline: one whisper-accent, editorial detailing, a slow kinetic marquee, and tonal rhythm between sections. Every feature is feature-flagged off [data-*] on so the Tweaks panel can dial it. Defaults are deliberately low. ============================================================ */ /* Disable the browser's auto cross-document view transition for the LANDING only (theme.css sets navigation:auto site-wide). transition.js already handles page transitions manually with its veil; the auto transition here only produces a benign "Transition was skipped" promise rejection. Other pages keep theme.css's setting. */ @view-transition { navigation: none; } /* locked-in mountain glow default (Tweaks can still change it live) */ :root{ --accent:#f3f5f6; --glow-strength:2; } /* ---- swappable whisper-accent (same low chroma, hue varies) ---- */ :root[data-accent="steel"]{ --accent:oklch(0.72 0.085 244); } :root[data-accent="moss"] { --accent:oklch(0.74 0.085 152); } :root[data-accent="clay"] { --accent:oklch(0.73 0.080 55); } :root[data-accent="bone"] { --accent:#cfd6da; } /* the accent earns its keep in a few tiny, high-leverage spots only */ /* scroll hairline picks up the accent (was flat gray) */ .scroll-prog{ background:var(--accent); box-shadow:0 0 12px color-mix(in oklab, var(--accent) 40%, transparent); } /* nav + footer links: an accent underline that draws in on hover */ .p-nav-links a{ position:relative; } .p-nav-links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1px; background:var(--accent); opacity:.9; transition:right .34s cubic-bezier(.2,.7,.2,1); } .p-nav-links a:hover::after{ right:0; } /* a small "live" status pip by the wordmark — the one moving accent up top */ .p-live{ display:inline-flex; align-items:center; gap:9px; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--mute-2); font-weight:700; white-space:nowrap; } .p-live i{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 70%, transparent); } @media (prefers-reduced-motion: no-preference){ .p-live i{ animation:p-pulse 3.4s ease-in-out infinite; } } @keyframes p-pulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); opacity:.65; } 50% { box-shadow:0 0 0 5px color-mix(in oklab, var(--accent) 0%, transparent); opacity:1; } } /* ---- editorial detailing: section index + registration ticks ---- */ /* a faint folio number anchored at the top-left of major sections */ .p-folio{ position:absolute; top:30px; left:56px; z-index:3; display:flex; align-items:baseline; gap:8px; font-family:var(--display); font-weight:600; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-2); } .p-folio b{ color:var(--paper-dim); font-weight:700; } .p-folio .bar{ display:inline-block; width:18px; height:1px; background:var(--accent); transform:translateY(-3px); opacity:.85; } :root[data-indices="off"] .p-folio{ display:none; } /* technical registration crosshair — pure editorial texture, monochrome */ .p-reg{ position:absolute; width:9px; height:9px; pointer-events:none; opacity:.5; z-index:3; } .p-reg::before,.p-reg::after{ content:""; position:absolute; background:var(--line); } .p-reg::before{ left:4px; top:0; width:1px; height:9px; } .p-reg::after { top:4px; left:0; height:1px; width:9px; } .p-reg.tr{ top:24px; right:24px; } .p-reg.bl{ bottom:24px; left:24px; } :root[data-indices="off"] .p-reg{ display:none; } /* ---- product cards: a hair more life on hover (no color flood) ---- */ .garment{ transition:transform .5s cubic-bezier(.2,.7,.2,1); } .garment .p-slot{ transition:border-color .4s ease; } .garment:hover{ transform:translateY(-4px); } .garment:hover .p-slot{ border-color:color-mix(in oklab, var(--accent) 50%, var(--line)); } /* corner ticks on each slot brighten toward the accent on hover */ .garment .p-slot::after{ content:""; position:absolute; right:14px; bottom:14px; width:10px; height:10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:border-color .4s ease; } .garment:hover .p-slot::after{ border-color:var(--accent); } /* ---- tonal rhythm: a sliver of light at each section seam so the scroll reads as built, not flat. Whisper level. ---- */ .seam{ position:relative; } .seam::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,.05) 22%, rgba(255,255,255,.05) 78%, transparent); pointer-events:none; } /* ---- the slow kinetic marquee band: the one perpetual, quiet motion. on-brand streetwear ticker, low-contrast, glacial. ---- */ .p-ticker{ position:relative; overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:rgba(13,16,18,.4); padding:15px 0; } .p-ticker-track{ display:flex; width:max-content; gap:0; will-change:transform; } @media (prefers-reduced-motion: no-preference){ .p-ticker-track{ animation:p-marquee 46s linear infinite; } } .p-ticker:hover .p-ticker-track{ animation-play-state:paused; } @keyframes p-marquee{ from{ transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } } .p-ticker-item{ display:inline-flex; align-items:center; gap:34px; padding:0 17px; font-family:var(--display); font-weight:600; font-size:13px; letter-spacing:.30em; text-transform:uppercase; color:var(--mute-2); white-space:nowrap; } .p-ticker-item b{ color:var(--paper-dim); font-weight:600; } .p-ticker-item .sep{ width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.9; flex:none; } :root[data-marquee="off"] .p-ticker{ display:none; } /* ============================================================ HERO — asymmetric split: the promise on one side, the garment viewer on the other. Side is flippable via [data-hside]. ============================================================ */ .hero-row{ display:flex; align-items:center; justify-content:center; gap:74px; width:100%; max-width:1200px; margin:42px auto 0; text-align:left; } :root[data-hside="left"] .hero-row{ flex-direction:row-reverse; } .hero-copy{ width:454px; flex:none; } .hero-copy .p-kick{ margin-bottom:22px; } .hero-head{ font-size:74px; line-height:.92; white-space:nowrap; margin:0; } .hero-sub{ margin:26px 0 0; color:var(--mute); font-size:15px; line-height:1.65; max-width:420px; } .hero-cta{ display:flex; gap:14px; margin-top:30px; } .hero-specgrid{ display:grid; grid-template-columns:1fr 1fr; gap:22px 34px; margin-top:40px; padding-top:28px; border-top:1px solid var(--line-soft); } .hero-spec-v{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:var(--paper-dim); display:flex; align-items:center; gap:9px; } .hero-spec-v i{ width:14px; height:1px; background:var(--accent); opacity:.85; flex:none; } .hero-spec-d{ font-size:11px; letter-spacing:.04em; color:var(--mute-2); margin-top:6px; padding-left:23px; } .hero-product{ flex:none; } /* product viewer */ .pv{ display:flex; flex-direction:column; align-items:center; } .pv-frame{ position:relative; width:344px; } .pv-slot{ height:404px; border-radius:5px; } .pv-frame[data-color="Gray"] .pv-slot{ background:repeating-linear-gradient(135deg, var(--ink-750) 0 11px, var(--ink-700) 11px 22px); } .pv-side{ position:absolute; top:18px; left:18px; } .pv-tag{ position:absolute; right:16px; top:18px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--mute-2); font-weight:700; } .pv-cap{ margin-top:16px; text-align:center; min-height:34px; } .pv-cap b{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); } .pv-cap span{ display:block; font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mute-2); font-weight:700; margin-top:5px; } .pv-controls{ display:flex; gap:12px; margin-top:16px; } .pv-seg{ display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; } .pv-opt{ font-family:var(--sans); font-weight:700; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; cursor:pointer; padding:9px 16px; background:transparent; color:var(--mute); border:0; border-left:1px solid var(--line); transition:background .2s ease, color .2s ease; } .pv-opt:first-child{ border-left:0; } .pv-opt:hover{ color:var(--paper); } .pv-opt.on{ background:var(--paper); color:var(--ink-900); } @media (max-width:1060px){ .hero-row, :root[data-hside="left"] .hero-row{ flex-direction:column; text-align:center; gap:46px; } .hero-copy{ width:auto; max-width:460px; } .hero-head{ font-size:62px; white-space:normal; } .hero-cta{ justify-content:center; } .hero-sub,.hero-specgrid{ margin-left:auto; margin-right:auto; } } /* ============================================================ FOUNDER — portrait + bio, replacing the old ethos block. ============================================================ */ .founder-grid{ max-width:1080px; margin:0 auto; display:grid; grid-template-columns:430px 1fr; gap:66px; align-items:center; } .founder-portrait{ height:540px; border-radius:5px; } .founder-role{ color:var(--mute); font-size:12px; letter-spacing:.22em; text-transform:uppercase; font-weight:700; margin-bottom:30px; } .founder-lead{ color:var(--paper-dim); font-size:16px; line-height:1.75; margin:0 0 20px; max-width:520px; } .founder-body{ color:var(--mute); font-size:15px; line-height:1.75; margin:0; max-width:520px; } .founder-quote{ margin:36px 0 0; padding-top:26px; position:relative; max-width:520px; font-family:var(--display); font-weight:500; font-size:24px; line-height:1.1; letter-spacing:.01em; text-transform:uppercase; color:var(--paper); } .founder-quote::before{ content:""; position:absolute; top:0; left:0; width:48px; height:1px; background:var(--accent); opacity:.85; } @media (max-width:1060px){ .founder-grid{ grid-template-columns:1fr; gap:42px; } .founder-portrait{ height:440px; } } /* ============================================================ THE HOODIE — deep details: garment grid, construction spec sheet, size guide. Technical, understated; numbers do the work. ============================================================ */ .hoodie-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:48px; margin-bottom:46px; } .hoodie-intro{ max-width:340px; color:var(--mute); font-size:14px; line-height:1.7; margin:0; } .garment-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; } .spec-sheet{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:58px; border-top:1px solid var(--line); } .spec-item{ padding:22px 26px 22px 0; border-bottom:1px solid var(--line-soft); } .spec-item .k{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--mute-2); font-weight:700; } .spec-item .v{ font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:.02em; text-transform:uppercase; color:var(--paper-dim); margin-top:10px; } .spec-foot{ margin-top:16px; font-size:11px; letter-spacing:.05em; color:var(--mute-2); } .size-chart{ margin-top:66px; } .size-head{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:18px; } .size-note{ font-size:11px; letter-spacing:.06em; color:var(--mute-2); white-space:nowrap; } .size-chart table{ width:100%; border-collapse:collapse; } .size-chart th, .size-chart td{ text-align:right; padding:15px 8px; border-bottom:1px solid var(--line-soft); } .size-chart thead th{ font-family:var(--display); font-weight:600; font-size:15px; letter-spacing:.04em; color:var(--paper); border-bottom-color:var(--line); } .size-chart tbody td{ font-family:var(--display); font-weight:500; font-size:16px; color:var(--paper-dim); } .size-chart th:first-child, .size-chart td:first-child{ text-align:left; font-family:var(--sans); font-weight:600; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); } /* ---- collapsible disclosures (construction / size guide) ---- */ .hoodie-folds{ margin-top:54px; } .disc{ border-top:1px solid var(--line); } .disc:last-child{ border-bottom:1px solid var(--line); } .disc-head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; background:none; border:0; cursor:pointer; color:var(--paper); padding:27px 0; text-align:left; font:inherit; } .disc-head .p-kick{ color:var(--paper-dim); transition:color .2s; } .disc-head:hover .p-kick{ color:var(--paper); } .disc-right{ display:flex; align-items:center; gap:18px; } .disc-note{ font-size:11px; letter-spacing:.06em; color:var(--mute-2); white-space:nowrap; } .disc-chev{ color:var(--mute); display:block; flex:0 0 auto; transition:transform .3s ease, color .2s; } .disc-head:hover .disc-chev{ color:var(--paper); } .disc-body{ height:0; overflow:hidden; } .disc-pad{ padding-bottom:34px; } .disc-pad .spec-sheet{ margin-top:2px; border-top:1px solid var(--line-soft); } .disc-pad .size-chart{ margin-top:2px; } @media (max-width:1060px){ .hoodie-head{ flex-direction:column; align-items:flex-start; gap:20px; } .garment-grid{ grid-template-columns:repeat(2,1fr); } .spec-sheet{ grid-template-columns:repeat(2,1fr); } } /* mobile size table */ .m-size{ width:100%; border-collapse:collapse; min-width:360px; } .m-size th, .m-size td{ text-align:right; padding:11px 9px; border-bottom:1px solid var(--line-soft); font-family:var(--display); } .m-size thead th{ color:var(--paper); font-size:13px; font-weight:600; border-bottom-color:var(--line); } .m-size tbody td{ color:var(--paper-dim); font-size:14px; font-weight:500; } .m-size th:first-child, .m-size td:first-child{ text-align:left; font-family:var(--sans); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); font-weight:600; } /* keep the new chrome out of the way on narrow frames */ @media (max-width:1180px){ .p-folio{ left:40px; } }