:root {
/* muted palette: washed charcoal, bone/stone, dusty sage, washed burgundy, olive, slate */
--charcoal: #1f1f1d;
--black: #161615;
--black-2: #252523;
--bone: #d9d3c6;
--bone-2: #aea89b;
--stone: #c6bfb0;
--sage: #8b9584;
--sage-d: #5d6658;
--burgundy: #6a4043;
--burgundy-d: #45292b;
--olive: #6a6a4f;
--olive-d: #45452f;
--slate: #5d666e;
--slate-d: #3a4046;
/* DISPLAY FONT: change these two lines to switch the wordmark + headings font.
Also swap the matching family in the Google Fonts in index.html.
Current: Michroma (option 1, chrome wordmark). Previous: Grenze Gotisch, weight 700. Options (see screenshots/font-options.png):
1 Michroma (Y2K chrome) --font-display: 'Michroma', sans-serif; weight 400 link: family=Michroma
(optional: add class "wordmark--chrome" to the for the muted chrome gradient)
2 Pirata One (tattoo gothic) --font-display: 'Pirata One', serif; weight 400 link: family=Pirata+One
3 Rubik Distressed (grunge) --font-display: 'Rubik Distressed', sans-serif; weight 400 link: family=Rubik+Distressed
4 Big Shoulders Display --font-display: 'Big Shoulders Display', sans-serif; weight 900 link: family=Big+Shoulders+Display:wght@800;900
(looks best with --font-display-case: uppercase) */
--font-display: 'Michroma', 'Eurostile', sans-serif;
--font-display-weight: 400;
--font-display-case: none;
--sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
--mono: 'Space Mono', ui-monospace, monospace;
--pad: clamp(1.25rem, 5vw, 4rem);
--max: 1200px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--charcoal);
color: var(--bone);
font-family: var(--sans);
font-size: 1rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.dot { color: var(--sage); }
.c { font-family: var(--sans); font-weight: 400; font-size: .32em; vertical-align: super; line-height: 0; margin-left: .06em; color: var(--bone-2); position: relative; top: -.15em; }
/* film grain overlay */
.grain {
position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* NAV */
.nav {
position: sticky; top: 0; z-index: 50;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .85rem var(--pad);
background: rgba(22, 22, 21, .82);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(217, 211, 198, .1);
}
.nav__logo { font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case); font-size: 1.05rem; letter-spacing: -.03em; line-height: 1; text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: 1.5rem; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.nav__links a { text-decoration: none; opacity: .85; }
.nav__links a:hover { opacity: 1; }
.nav__links li:not(:last-child) { display: none; }
.nav__cta {
border: 1px solid var(--bone); padding: .5rem .9rem; border-radius: 999px; opacity: 1 !important;
background: linear-gradient(var(--bone), var(--bone)) no-repeat 0 0 / 0% 100%;
transition: background-size .4s cubic-bezier(.65, 0, .35, 1), color .3s ease;
}
.nav__cta:hover { background-size: 100% 100%; color: var(--charcoal); }
@media (min-width: 640px) { .nav__links li:not(:last-child) { display: block; } }
/* HERO */
.hero {
position: relative;
min-height: calc(100svh - 60px);
display: grid; place-items: center;
padding: 3.5rem var(--pad) 5rem;
text-align: center;
overflow: hidden;
background:
radial-gradient(ellipse 60% 50% at 50% 38%, rgba(106, 64, 67, .28), transparent 70%),
radial-gradient(ellipse 90% 60% at 20% 100%, rgba(139, 149, 132, .10), transparent 70%),
linear-gradient(180deg, var(--black) 0%, var(--charcoal) 50%, var(--charcoal) 100%);
}
.hero { --frame: clamp(.75rem, 3vw, 2rem); }
.hero::before {
/* faint gothic frame */
content: ""; position: absolute; inset: var(--frame);
border: 1px solid rgba(217, 211, 198, .16);
outline: 1px solid rgba(217, 211, 198, .07); outline-offset: 6px;
pointer-events: none;
}
.hero__inner { position: relative; max-width: 44rem; width: 100%; }
.eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 1rem; opacity: .75; }
.wordmark {
font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case);
font-size: clamp(3.2rem, 17vw, 8.5rem); letter-spacing: -.045em;
line-height: .9; margin: 0;
color: var(--bone);
text-shadow: 0 0 30px rgba(217, 211, 198, .08), 0 10px 36px rgba(0, 0, 0, .5);
}
.hero__drop {
font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em; font-size: .85rem;
margin: 1.5rem 0 1rem; display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.pill { background: var(--sage); color: var(--black); padding: .3rem .7rem; border-radius: 2px; font-weight: 700; }
.hero__lede { max-width: 32rem; margin: 0 auto 2rem; color: var(--bone-2); font-size: 1.05rem; }
.signup { max-width: 30rem; margin: 0 auto; }
.signup__fields { display: flex; flex-direction: column; gap: .6rem; }
.signup input {
width: 100%; font: inherit; font-size: 1rem; /* 16px avoids iOS zoom */
padding: .95rem 1.1rem; border-radius: 4px;
border: 1px solid rgba(217, 211, 198, .35);
background: rgba(22, 22, 21, .55); color: var(--bone);
}
.signup input::placeholder { color: rgba(217, 211, 198, .5); }
.signup input:focus { outline: 2px solid var(--bone); outline-offset: 2px; }
.signup input[aria-invalid="true"] { border-color: #c9918c; }
.signup button, .btn {
font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem;
padding: 1rem 1.4rem; border: 0; border-radius: 4px; cursor: pointer;
background: var(--stone) linear-gradient(var(--bone), var(--bone)) no-repeat 0 0 / 0% 100%;
color: var(--black); text-decoration: none; display: inline-block;
transition: transform .25s ease, background-size .45s cubic-bezier(.65, 0, .35, 1), box-shadow .3s ease;
}
/* hover: bone fill sweeps in from the left */
.signup button:hover, .btn:hover { background-size: 100% 100%; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(0, 0, 0, .28); }
.signup button:active, .btn:active { transform: translateY(0); box-shadow: none; }
.signup__note { font-size: .78rem; opacity: .6; margin: .8rem 0 0; }
.signup__error { color: #d4a19c; font-size: .85rem; margin: .5rem 0 0; }
.signup__thanks {
max-width: 30rem; margin: 0 auto; padding: 1.5rem; border-radius: 6px;
border: 1px solid rgba(217, 211, 198, .3); background: rgba(22, 22, 21, .5);
}
.signup__thanks-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 1.25rem; margin: 0 0 .6rem; line-height: 1.2; }
.signup__thanks p:last-child { margin: 0; color: var(--bone-2); }
@media (min-width: 520px) {
.signup__fields { flex-direction: row; }
.signup button { white-space: nowrap; }
}
.hero__scroll {
/* centred inside the frame, in the strip between content and the frame's bottom edge */
position: absolute; left: 0; right: 0; bottom: calc(var(--frame) + 1rem);
width: max-content; margin-inline: auto;
display: flex; align-items: center; justify-content: center; gap: .6em;
font-family: var(--mono); font-weight: 700; font-size: .8rem; line-height: 1;
letter-spacing: .2em; text-transform: uppercase; color: var(--bone);
text-decoration: none; opacity: .9; white-space: nowrap;
transition: opacity .2s;
}
.hero__scroll:hover { opacity: 1; }
.hero__scroll-text { margin-right: -.2em; } /* cancel trailing letter-spacing so the label is optically centred */
.hero__scroll-arrow { font-family: var(--sans); font-weight: 400; letter-spacing: 0; font-size: 1.05em; }
/* MARQUEE */
.marquee { background: var(--black-2); color: var(--bone); overflow: hidden; border-block: 1px solid rgba(217, 211, 198, .14); }
.marquee__track { display: flex; align-items: center; width: max-content; animation: scroll 112s linear infinite; }
/* both groups are identical: same items, same gap, same trailing padding, so -50% lands seamlessly */
.marquee__group {
--gap: 1.4em;
display: flex; align-items: center; gap: var(--gap); padding: 1rem var(--gap) 1rem 0;
font-family: var(--mono); font-weight: 700; text-transform: uppercase; font-size: .9rem; line-height: 1;
white-space: nowrap;
}
.marquee__group b { font-weight: 700; letter-spacing: .18em; margin-right: -.18em; display: block; } /* cancel trailing tracking */
.marquee__group .sep { font-style: normal; font-family: var(--sans); font-size: .85em; line-height: 1; color: var(--sage); display: block; transform: translateY(-.04em); }
@media (max-width: 600px) { .marquee__group { font-size: .82rem; --gap: 1.1em; padding-block: .85rem; } }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation-duration: 180s; } html { scroll-behavior: auto; } }
/* SECTIONS */
section { scroll-margin-top: 70px; }
.section-head { max-width: var(--max); margin: 0 auto 2rem; }
.section-title { font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case); font-size: clamp(1.6rem, 6.4vw, 2.8rem); letter-spacing: -.02em; line-height: 1.15; margin: 0 0 .8rem; }
.section-sub { margin: 0; max-width: 34rem; color: var(--bone-2); opacity: .85; }
/* DROP GRID */
.drop { padding: 4rem var(--pad); background: var(--black); }
.grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.card { background: #222220; border: 1px solid rgba(217, 211, 198, .08); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.card--feature { grid-column: 1 / -1; }
.tile {
position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center;
border-bottom: 1px solid rgba(217, 211, 198, .08);
}
.card--feature .tile { aspect-ratio: 16 / 10; }
.tile::after {
/* subtle stitched frame */
content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(217, 211, 198, .22); border-radius: 3px;
}
.tile--burgundy { background: radial-gradient(circle at 30% 25%, var(--burgundy), var(--burgundy-d) 75%); }
.tile--charcoal { background: radial-gradient(circle at 30% 25%, #3b3b38, var(--black) 75%); }
.tile--acid {
/* acid-wash charcoal placeholder: lighter mottled grey so it stands out on the charcoal page */
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.018 .03' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .8 0 0 0 0 .79 0 0 0 0 .77 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
radial-gradient(circle at 30% 25%, #6e6f6c, #4a4b48 75%);
background-size: cover, 160px 160px, auto;
box-shadow: inset 0 0 0 1px rgba(217, 211, 198, .22);
}
.tile--acid .tile__label { background: rgba(22, 22, 21, .6); }
.tile--sage { background: radial-gradient(circle at 30% 25%, var(--sage), var(--sage-d) 75%); }
.tile--slate { background: radial-gradient(circle at 30% 25%, var(--slate), var(--slate-d) 75%); }
.tile--olive { background: radial-gradient(circle at 30% 25%, var(--olive), var(--olive-d) 75%); }
.tile__label {
font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
padding: .4rem .6rem; border: 1px solid rgba(217, 211, 198, .45); border-radius: 2px; color: var(--bone);
background: rgba(22, 22, 21, .3); text-align: center; position: relative; z-index: 1; max-width: calc(100% - 36px);
}
@media (max-width: 759px) { .tile__label { font-size: .56rem; letter-spacing: .1em; padding: .35rem .45rem; } }
.tile__no { position: absolute; top: 18px; left: 20px; font-family: var(--font-display); font-size: .85rem; opacity: .6; }
.card__body { padding: .9rem 1rem 1.1rem; }
.card h3 { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.card__colour { margin: .15rem 0 .6rem; font-size: .82rem; opacity: .65; }
.card__price { margin: 0; font-family: var(--mono); font-weight: 700; font-size: .95rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tag {
font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 400;
border: 1px solid rgba(217, 211, 198, .35); border-radius: 2px; padding: .15rem .4rem; opacity: .8;
}
.drop__cta { text-align: center; margin: 2.5rem 0 0; }
@media (min-width: 760px) {
.grid { grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
.card { grid-column: span 2; }
.card--feature { grid-column: span 2; }
.card--feature .tile { aspect-ratio: 4 / 5; }
.card--teaser { grid-column: 1 / -1; }
}
/* ABOUT */
.about { padding: 5rem var(--pad); background:
radial-gradient(ellipse 60% 70% at 85% 20%, rgba(106, 64, 67, .22), transparent 70%), var(--charcoal); }
.about__inner { max-width: 46rem; margin: 0 auto; }
.about p { font-size: 1.1rem; color: var(--bone-2); margin: 0 0 1rem; }
.values { margin-top: 2.5rem; display: grid; gap: 1rem; }
.values li { border-top: 1px solid rgba(217, 211, 198, .25); padding-top: 1rem; display: flex; flex-direction: column; gap: .2rem; }
.values strong { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; }
.values span { opacity: .75; font-size: .95rem; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
/* SOCIALS */
.socials { padding: 4rem var(--pad); background: var(--stone); color: var(--charcoal); text-align: center; }
.socials .section-title { color: var(--charcoal); }
.socials__row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; max-width: 52rem; margin: 1.5rem auto 0; padding: 0; list-style: none; }
.socials__row li { width: 100%; max-width: 20rem; display: flex; }
.socials__row .social { width: 100%; }
.social {
display: flex; align-items: center; gap: .9rem; text-decoration: none; text-align: left;
padding: 1rem 1.2rem; border: 1px solid rgba(31, 31, 29, .55); border-radius: 6px;
background: linear-gradient(var(--charcoal), var(--charcoal)) no-repeat 0 100% / 100% 0%;
transition: background-size .4s cubic-bezier(.65, 0, .35, 1), color .3s ease, border-color .3s ease, transform .3s ease;
}
/* hover: charcoal fill rises from the bottom */
.social:hover { background-size: 100% 100%; color: var(--bone); border-color: var(--charcoal); transform: translateY(-2px); }
.social svg { width: 28px; height: 28px; fill: currentColor; flex: none; }
.social span { display: flex; flex-direction: column; line-height: 1.25; font-family: var(--mono); font-size: .85rem; }
.social b { font-family: var(--sans); font-size: 1rem; }
.socials__note { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin: 1.2rem 0 0; }
@media (min-width: 640px) { .socials__row { flex-direction: row; align-items: stretch; } .socials__row li { flex: 1 1 0; max-width: 16rem; } }
/* FOOTER */
.footer { background: var(--black); padding: 3rem var(--pad) 2.5rem; text-align: center; }
.footer__mark { font-family: var(--font-display); font-weight: var(--font-display-weight); text-transform: var(--font-display-case); font-size: 1.8rem; letter-spacing: -.04em; margin: 0 0 1.2rem; line-height: 1; }
.footer__links { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; font-family: var(--mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.5rem; }
.footer__links a { text-decoration: none; opacity: .75; }
.footer__links a:hover { opacity: 1; }
.footer__small { font-size: .75rem; opacity: .5; margin: 0; }
/* distressed print texture on the wordmark */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
.wordmark {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0.55 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1 1 1 1 1 0.55 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3C/svg%3E");
}
}
.nav__logo .c, .footer__mark .c { font-size: .45em; top: -.05em; }
.wordmark .c { margin-left: 0; }
/* optional muted chrome treatment for option 1 (add class to the hero ) */
.wordmark--chrome {
background: linear-gradient(180deg, #f0ece4 0%, #bdb8ae 42%, #6f6c66 50%, #cfcac0 62%, #8f8b84 100%);
-webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
filter: drop-shadow(0 8px 24px rgba(0, 0, 0, .6));
}
.wordmark--chrome .c { -webkit-text-fill-color: var(--bone-2); }
/* FEATURED: THE SAGE SET */
.feature { padding: 4rem var(--pad); background:
radial-gradient(ellipse 70% 60% at 20% 30%, rgba(139, 149, 132, .14), transparent 70%), var(--charcoal);
border-bottom: 1px solid rgba(217, 211, 198, .08); }
.feature__inner { max-width: var(--max); margin: 0 auto; display: grid; gap: 2rem; align-items: center; }
.tile--hero { aspect-ratio: 5 / 4; border-radius: 6px; border: 1px solid rgba(217, 211, 198, .12); }
.tile--hero .tile__label { font-size: .7rem; }
.swatches { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .9rem; font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--bone-2); }
.swatches li { display: flex; align-items: center; gap: .45rem; }
.sw { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(217, 211, 198, .35); flex: none; }
.sw--acid { background: radial-gradient(circle at 35% 35%, #8a8b87, #4a4b48 80%); }
.sw--chrome { background: linear-gradient(180deg, #f0ece4, #8f8b84 50%, #cfcac0); }
.sw--stone { background: var(--stone); }
.sw--gem { background: radial-gradient(circle at 35% 30%, #fff 0 15%, #cfd3d6 35%, #8d9399 80%); }
.eyebrow--left { text-align: left; margin-bottom: .9rem; }
.feature__desc { color: var(--bone-2); font-size: 1.05rem; margin: 0 0 1.5rem; max-width: 30rem; }
.prices { border-top: 1px solid rgba(217, 211, 198, .15); margin-bottom: 1rem; max-width: 30rem; }
.prices li { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(217, 211, 198, .15); font-size: .95rem; color: var(--bone-2); }
.prices b { font-family: var(--mono); color: var(--bone); }
.prices__main span { color: var(--bone); font-weight: 500; }
.prices__main b { font-size: 1.15rem; }
.feature__note { font-size: .8rem; color: var(--bone-2); margin: 0 0 1.5rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.feature__cta { width: 100%; text-align: center; }
@media (min-width: 520px) { .feature__cta { width: auto; } }
@media (min-width: 860px) {
.feature { padding: 6rem var(--pad); }
.feature__inner { grid-template-columns: 1.05fr 1fr; gap: 4rem; }
.tile--hero { aspect-ratio: 1 / 1; }
}
/* DROP 02 TEASER */
.card--teaser { grid-column: 1 / -1; background: transparent; border: 1px dashed rgba(217, 211, 198, .25); }
.teaser { display: grid; gap: .35rem; padding: 1.6rem 1.4rem; text-decoration: none; text-align: center; transition: background .15s; }
.teaser:hover { background: rgba(139, 149, 132, .08); }
.teaser__eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sage); }
.teaser__title { font-family: var(--font-display); font-size: clamp(1.1rem, 4.5vw, 1.6rem); letter-spacing: -.02em; }
.teaser__text { color: var(--bone-2); font-size: .92rem; }
.teaser__link { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .4rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(217, 211, 198, .4); }
/* ===== FINAL LOGO (chrome image) =====
Assets in /assets, regenerated by assets/make_assets.py. Text wordmark styles above are kept for the footer
and as a fallback; the previous text-only hero lives in /workspace/strxzz-site-v2-textmark/. */
.hero__logo { margin: 0 auto; line-height: 0; width: min(88vw, 44rem); }
.hero__logo img {
display: block; width: 100%; height: auto;
filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .55));
}
.nav__logo--img { display: inline-flex; align-items: center; line-height: 0; }
.nav__logo--img img { display: block; height: 40px; width: auto; margin: -5px 0; }
@media (min-width: 760px) { .nav__logo--img img { height: 46px; margin: -7px 0; } }
/* ===== DROP 01 PHOTOS (v5, assets/drop01/) =====
Real photos replace the acid-wash placeholders. The tile keeps its aspect-ratio, border and radius;
the image fills it with object-fit: cover, so there is no layout shift while it loads. */
.tile--photo { background: #d6d2ca; overflow: hidden; } /* light wall tone while loading */
.tile--photo::after { content: none; } /* no stitched placeholder frame over photos */
.tile--hero.tile--photo { border-radius: 6px; }
.tile__img, .tile__img img { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile__img img { object-fit: cover; object-position: 50% 50%; filter: saturate(.94) brightness(.97); }
/* zip hoodie: show the back on hover (pointer devices only) */
.tile__img--alt { opacity: 0; transition: opacity .35s ease; }
@media (hover: hover) { .card:hover .tile__img--alt { opacity: 1; } }
/* ===== JAZZ (v7): grain drift, vignette, reveals, hover zoom, logo shine, underline draw =====
Everything here is decorative. Reveal classes are only added by main.js, so with JS off
(or failing) all content stays visible. Reduced motion turns off reveals, shine, parallax and grain drift. */
/* film grain: the existing overlay now drifts in tiny steps like real film (composited transform only) */
.grain { overflow: hidden; background: none; opacity: .12; }
.grain::before {
content: ""; position: absolute; inset: -120px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
animation: grain 1.6s steps(1) infinite; will-change: transform;
}
@keyframes grain {
0% { transform: translate3d(0, 0, 0); }
20% { transform: translate3d(-46px, 28px, 0); }
40% { transform: translate3d(32px, -54px, 0); }
60% { transform: translate3d(-24px, -18px, 0); }
80% { transform: translate3d(58px, 40px, 0); }
}
/* hero: soft vignette under the content, content above it */
.hero::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(10, 10, 9, .42) 100%);
}
.hero__inner, .hero__scroll { z-index: 1; }
/* hero logo: slow chrome light sweep, masked to the logo's own shape so only the logo shines */
.hero__logo { position: relative; translate: 0 var(--parallax, 0px); }
.hero__shine {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
-webkit-mask: url("assets/logo-chrome.webp?v=2") center / 100% 100% no-repeat;
mask: url("assets/logo-chrome.webp?v=2") center / 100% 100% no-repeat;
}
.hero__shine::before {
content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 38%;
background: linear-gradient(105deg, transparent 0%, rgba(255, 252, 245, .1) 30%, rgba(255, 252, 245, .62) 50%, rgba(255, 252, 245, .1) 70%, transparent 100%);
transform: translateX(-110%);
animation: shine 7s cubic-bezier(.45, 0, .25, 1) 1.6s infinite;
}
@keyframes shine {
0% { transform: translateX(-110%); }
28%, 100% { transform: translateX(280%); }
}
.hero__scroll-arrow { display: inline-block; animation: nudge 2.4s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
/* hero intro: staggered fade-up on load (class added by main.js) */
.js-intro .hero__inner > *, .js-intro .hero__scroll { animation: intro 1s cubic-bezier(.2, .7, .2, 1) both; }
.js-intro .hero__inner > :nth-child(1) { animation-delay: .05s; }
.js-intro .hero__inner > :nth-child(2) { animation-delay: .15s; }
.js-intro .hero__inner > :nth-child(3) { animation-delay: .3s; }
.js-intro .hero__inner > :nth-child(4) { animation-delay: .4s; }
.js-intro .hero__inner > :nth-child(n+5) { animation-delay: .5s; }
.js-intro .hero__scroll { animation-delay: .8s; }
@keyframes intro { from { opacity: 0; transform: translateY(14px); } }
/* scroll reveal (main.js adds .reveal, then .is-in when in view, then removes both once done) */
.reveal {
opacity: 0; transform: translate3d(0, 22px, 0);
transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
/* product cards: gentle lift + photo zoom on hover */
.card { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, border-color .45s ease; }
.tile__img img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
.card:not(.card--teaser):hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .35); border-color: rgba(217, 211, 198, .2); }
.card:hover .tile__img img, .feature__media:hover .tile__img img { transform: scale(1.04); }
}
/* underline draw on nav + footer links + teaser link */
.nav__links a:not(.nav__cta), .footer__links a { position: relative; }
.nav__links a:not(.nav__cta)::after, .footer__links a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor;
transform: scaleX(0); transform-origin: right; transition: transform .4s cubic-bezier(.65, 0, .35, 1);
}
.nav__links a:not(.nav__cta):hover::after, .footer__links a:hover::after,
.nav__links a:not(.nav__cta):focus-visible::after, .footer__links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.teaser__link {
text-decoration: none;
background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0% 1px,
linear-gradient(rgba(217, 211, 198, .4), rgba(217, 211, 198, .4)) no-repeat 0 100% / 100% 1px;
padding-bottom: 3px; justify-self: center; transition: background-size .45s cubic-bezier(.65, 0, .35, 1);
}
.teaser:hover .teaser__link { background-size: 100% 1px, 100% 1px; }
.teaser__link span { display: inline-block; transition: transform .3s ease; }
.teaser:hover .teaser__link span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.grain::before, .hero__shine::before, .hero__scroll-arrow { animation: none; }
.hero__shine { display: none; }
.hero__logo { translate: none; }
.js-intro .hero__inner > *, .js-intro .hero__scroll { animation: none; }
.reveal { opacity: 1; transform: none; transition: none; }
.tile__img img, .card { transition-duration: .01s; }
}
/* ===== PRODUCT LINKS (v7) ===== */
.card { position: relative; }
.card__link { text-decoration: none; }
.card__link::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; } /* whole card is clickable */
.card__link:focus-visible { outline: none; }
.card:has(.card__link:focus-visible) { outline: 2px solid var(--bone); outline-offset: 3px; }
.card__body h3 { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.card__body h3::after { content: "→"; font-family: var(--sans); font-weight: 400; opacity: .5; transition: transform .35s ease, opacity .35s ease; }
@media (hover: hover) { .card:hover .card__body h3::after { transform: translateX(4px); opacity: 1; } }
.feature__link { text-decoration: none; }
.feature__link:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.feature__ctas { display: flex; flex-direction: column; gap: .6rem; }
@media (min-width: 520px) { .feature__ctas { flex-direction: row; flex-wrap: wrap; } }
.btn--ghost {
background: transparent linear-gradient(var(--bone), var(--bone)) no-repeat 0 0 / 0% 100%;
color: var(--bone); box-shadow: inset 0 0 0 1px rgba(217, 211, 198, .55);
}
.btn--ghost:hover { color: var(--black); box-shadow: inset 0 0 0 1px var(--bone), 0 8px 22px rgba(0, 0, 0, .28); }
/* ===== PRODUCT PAGES (/product//) ===== */
.crumbs { max-width: var(--max); margin: 0 auto; padding: 1.4rem var(--pad) 0; font-family: var(--mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.crumbs a { text-decoration: none; opacity: .75; display: inline-flex; gap: .5em; align-items: center; transition: opacity .2s; }
.crumbs a:hover { opacity: 1; }
.crumbs a span { transition: transform .3s ease; }
.crumbs a:hover span { transform: translateX(-3px); }
.pdp { max-width: var(--max); margin: 0 auto; padding: 1.4rem var(--pad) 4rem; display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .pdp { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; padding-top: 2rem; } .pdp__gallery { position: sticky; top: 90px; } }
.gallery__main { position: relative; aspect-ratio: 4 / 5; border-radius: 6px; border: 1px solid rgba(217, 211, 198, .12); overflow: hidden; }
.gallery__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.gallery__slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
@media (hover: hover) { .gallery__main:hover .gallery__slide.is-active img { transform: scale(1.04); } }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .6rem; }
.gallery__thumb {
padding: 0; border: 1px solid rgba(217, 211, 198, .14); border-radius: 4px; overflow: hidden; cursor: pointer;
aspect-ratio: 4 / 5; background: #d6d2ca; opacity: .6; transition: opacity .25s ease, border-color .25s ease;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover { opacity: .9; }
.gallery__thumb[aria-pressed="true"] { opacity: 1; border-color: var(--bone); }
.gallery__thumb:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.pdp__title { font-size: clamp(1.6rem, 5vw, 2.5rem); margin-bottom: .4rem; }
.pdp__colour { margin: 0 0 .9rem; color: var(--bone-2); font-size: .95rem; }
.pdp__price { margin: 0 0 1.2rem; font-family: var(--mono); font-weight: 700; font-size: 1.3rem; display: flex; align-items: center; gap: .7rem; }
.pdp__lede { color: var(--bone-2); margin: 0 0 1.6rem; max-width: 32rem; }
.sizes { border: 0; padding: 0; margin: 0 0 1.4rem; min-width: 0; }
.sizes legend { font-family: var(--mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; padding: 0; margin-bottom: .7rem; }
.sizes__row { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem; max-width: 26rem; }
.size { position: relative; }
.size input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.size span {
display: grid; place-items: center; height: 2.8rem; border: 1px solid rgba(217, 211, 198, .3); border-radius: 4px;
font-family: var(--mono); font-size: .82rem; letter-spacing: .06em; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.size:hover span { border-color: var(--bone); }
.size input:checked + span { background: var(--bone); color: var(--black); border-color: var(--bone); font-weight: 700; }
.size input:focus-visible + span { outline: 2px solid var(--bone); outline-offset: 2px; }
.sizes__hint { font-size: .8rem; color: var(--bone-2); margin: .7rem 0 0; }
.sizes__error { color: #d4a19c; font-size: .85rem; margin: .4rem 0 0; }
.pdp__cta { width: 100%; text-align: center; max-width: 26rem; }
.pdp__note { font-size: .8rem; color: var(--bone-2); margin: .7rem 0 1.6rem; }
.preorder { border: 1px solid rgba(217, 211, 198, .25); border-radius: 6px; padding: 1.3rem; margin: 0 0 1.8rem; background: rgba(22, 22, 21, .45); max-width: 34rem; scroll-margin: 90px; }
.preorder:not([hidden]) { animation: intro .5s cubic-bezier(.2, .7, .2, 1); }
.preorder__title { font-family: var(--font-display); font-size: 1rem; line-height: 1.3; margin: 0 0 .4rem; }
.preorder__size { font-family: var(--mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bone-2); margin: 0 0 1rem; }
.preorder__size b { color: var(--bone); }
.preorder .signup, .preorder .signup__thanks { margin: 0; max-width: none; }
.preorder .signup__thanks { padding: 0; border: 0; background: none; }
.accordion { border-top: 1px solid rgba(217, 211, 198, .18); max-width: 34rem; }
.accordion details { border-bottom: 1px solid rgba(217, 211, 198, .18); }
.accordion summary {
list-style: none; cursor: pointer; padding: 1rem 0; display: flex; justify-content: space-between; align-items: center;
font-family: var(--mono); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; font-family: var(--sans); font-size: 1.2rem; line-height: 1; transition: transform .3s ease; }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion summary:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
.accordion__body { padding: 0 0 1.1rem; color: var(--bone-2); font-size: .95rem; }
.accordion__body p { margin: 0; }
.accordion__body ul { display: grid; gap: .35rem; }
.accordion__body li { padding-left: 1.1rem; position: relative; }
.accordion__body li::before { content: "✦"; position: absolute; left: 0; top: .1em; font-size: .65em; color: var(--sage); }
.accordion details[open] .accordion__body { animation: intro .4s ease; }
.complete { padding: 4rem var(--pad); background: var(--black); border-top: 1px solid rgba(217, 211, 198, .08); }
.complete > .section-title { max-width: 52rem; margin: 0 auto 1.6rem; }
.grid--complete { max-width: 52rem; grid-template-columns: 1fr 1fr; }
.grid--complete .card { grid-column: auto; }
@media (prefers-reduced-motion: reduce) { .preorder:not([hidden]), .accordion details[open] .accordion__body { animation: none; } }
/* signup anchors clear the sticky header */
#notify, #preorder, .signup__thanks { scroll-margin-top: 100px; }
/* Signup: spam honeypot (kept off-screen, must stay empty) + sending state */
.signup__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.signup { position: relative; }
.signup button[disabled] { opacity: .6; cursor: progress; }