/** Shopify CDN: Minification failed
Line 5020:0 All "@import" rules must come first
Line 6756:0 All "@import" rules must come first
Line 7311:0 All "@import" rules must come first
**/
/* ============================================================
ATEM — DESIGN SYSTEM v2
Apple-inspired · Inter typography · Product-forward
============================================================ */
/* ---- DESIGN TOKENS ---- */
:root {
/* Brand accent (used sparingly) */
--atem-green: #024943;
--atem-green-deep: #012A27;
--atem-green-soft: #0D5B54;
--atem-green-pale: #E6EFEE;
/* Apple-like neutrals (the primary palette) */
--white: #FFFFFF;
--gray-50: #FBFBFD;
--gray-100: #F5F5F7;
--gray-200: #EEEEF0;
--gray-300: #D2D2D7;
--gray-400: #A1A1A6;
--gray-500: #86868B;
--gray-600: #6E6E73;
--gray-800: #1D1D1F;
--gray-900: #000000;
/* Functional goal colors — matched to actual product packaging */
--goal-vitalize: #DC2626; /* Watermelon red (primary Vitalize color) */
--goal-vitalize-alt: #1A2F4F; /* Blue Raspberry navy */
--goal-energize: #96DDCF; /* Cool Mint Frost */
--goal-energize-deep: #4AB8A3; /* deeper mint for contrast */
--goal-sleep: #C2B5D8; /* Lavender Berry */
--goal-sleep-deep: #8E7AB8; /* deeper lavender */
--goal-ritual: var(--atem-green);
/* Semantic */
--bg: var(--white);
--bg-alt: var(--gray-50);
--bg-section: var(--gray-100);
--fg: var(--gray-800);
--fg-soft: var(--gray-600);
--fg-muted: var(--gray-500);
--line: var(--gray-300);
--line-soft: var(--gray-200);
/* Typography */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
--font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
--font-mono: 'SF Mono', Menlo, Consolas, monospace;
/* Apple-scale fluid typography */
--fs-micro: clamp(0.688rem, 0.67rem + 0.1vw, 0.75rem);
--fs-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.813rem);
--fs-sm: clamp(0.813rem, 0.8rem + 0.1vw, 0.875rem);
--fs-base: clamp(0.938rem, 0.92rem + 0.15vw, 1.063rem);
--fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.313rem);
--fs-lg: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
--fs-xl: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
--fs-2xl: clamp(2.75rem, 2rem + 3vw, 4.5rem);
--fs-3xl: clamp(3.5rem, 2.4rem + 4.8vw, 6.5rem);
--fs-4xl: clamp(4.5rem, 3rem + 7vw, 8.75rem);
/* Spacing */
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4rem;
--s-9: 6rem;
--s-10: 8rem;
--s-11: 10rem;
--s-12: 12rem;
/* Layout */
--container: 1440px;
--container-tight: 1120px;
--container-prose: 720px;
--gutter: clamp(1.25rem, 3vw, 2.5rem);
/* Radii */
--r-sm: 6px;
--r-md: 12px;
--r-lg: 18px;
--r-xl: 28px;
--r-2xl: 40px;
--r-full: 999px;
/* Motion */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 160ms;
--dur: 280ms;
--dur-slow: 560ms;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
}
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--font-sans);
font-size: var(--fs-base);
line-height: 1.47;
letter-spacing: -0.003em;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
input, textarea, select { font: inherit; }
ul, ol { list-style: none; }
/* TYPOGRAPHY */
.display-xl { font-size: var(--fs-4xl); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.display-lg, h1 { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.display-md, h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.display-sm, h3 { font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
h4, .h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
h5, .h5 { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-soft); }
.eyebrow-lg { font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); }
.lede { font-size: var(--fs-md); line-height: 1.5; color: var(--fg-soft); letter-spacing: -0.01em; max-width: 48ch; }
.lede-lg { font-size: var(--fs-lg); line-height: 1.35; color: var(--fg-soft); letter-spacing: -0.015em; max-width: 30ch; font-weight: 400; }
.text-balance { text-wrap: balance; }
.text-gradient {
background: linear-gradient(135deg, var(--atem-green) 0%, var(--atem-green-soft) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* LAYOUT */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-tight { width: 100%; max-width: var(--container-tight); margin: 0 auto; padding-inline: var(--gutter); }
.wrap-prose { width: 100%; max-width: var(--container-prose); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 8vw, 8rem); }
.section-lg { padding-block: clamp(5rem, 10vw, 10rem); }
.section-tight { padding-block: clamp(2.5rem, 5vw, 5rem); }
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
}
@media (max-width: 620px) {
.grid-2 { grid-template-columns: 1fr; }
.grid-3, .grid-4 { grid-template-columns: 1fr; gap: var(--s-5); }
}
/* BUTTONS */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
padding: 0.75rem 1.5rem; font-size: var(--fs-sm); font-weight: 500;
letter-spacing: -0.005em; border-radius: var(--r-full);
transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
text-align: center; border: 1px solid transparent; line-height: 1; min-height: 40px; white-space: nowrap;
}
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn-lg { padding: 1rem 2rem; font-size: var(--fs-base); min-height: 52px; }
.btn-xl { padding: 1.15rem 2.4rem; font-size: var(--fs-base); min-height: 58px; }
.btn-primary { background: var(--atem-green); color: var(--white); box-shadow: 0 1px 2px rgba(2, 73, 67, 0.12); }
.btn-primary:hover { background: var(--atem-green-deep); box-shadow: 0 6px 20px rgba(2, 73, 67, 0.25); }
.btn-accent { background: var(--atem-green); color: var(--white); }
.btn-accent:hover { background: var(--atem-green-deep); }
.btn-white { background: var(--white); color: var(--gray-800); }
.btn-white:hover { background: var(--gray-100); }
.btn-outline { background: transparent; color: var(--gray-800); border-color: var(--gray-300); }
.btn-outline:hover { background: var(--gray-800); color: var(--white); border-color: var(--gray-800); }
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.3); }
.btn-outline-light:hover { background: var(--white); color: var(--gray-800); border-color: var(--white); }
.btn-link {
display: inline-flex; align-items: center; gap: 0.3rem;
color: var(--atem-green); font-size: var(--fs-base); font-weight: 400;
padding: 0; background: none; border: 0; min-height: auto; letter-spacing: -0.005em;
}
.btn-link::after {
content: "›"; font-size: 1.2em; margin-left: 0.1em;
transition: transform var(--dur) var(--ease); font-weight: 300; line-height: 0.8;
}
.btn-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover::after { transform: translateX(3px); }
/* CHIPS */
.chip {
display: inline-flex; align-items: center; gap: 0.35rem;
font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.01em;
padding: 0.35rem 0.75rem; border-radius: var(--r-full);
background: var(--gray-100); color: var(--gray-800);
}
.chip-outline { background: transparent; border: 1px solid var(--line); }
.chip-accent { background: var(--atem-green-pale); color: var(--atem-green); }
.chip-dark { background: var(--gray-800); color: var(--white); }
.goal-chip {
display: inline-flex; align-items: center; gap: 0.45rem;
font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.05em;
text-transform: uppercase; color: var(--fg-soft);
}
.goal-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot-color, var(--atem-green)); }
.goal-chip[data-goal="energize"] { --dot-color: var(--goal-energize); }
.goal-chip[data-goal="vitalize"] { --dot-color: var(--goal-vitalize); }
.goal-chip[data-goal="sleep"] { --dot-color: var(--goal-sleep); }
.goal-chip[data-goal="ritual"] { --dot-color: var(--goal-ritual); }
/* FORMS */
.field {
width: 100%; padding: 0.875rem 1.125rem;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--r-md); font-size: var(--fs-base); color: var(--fg);
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
font-family: inherit;
}
.field:focus { outline: none; border-color: var(--gray-800); box-shadow: 0 0 0 3px rgba(29,29,31,0.08); }
.field::placeholder { color: var(--fg-muted); }
/* HEADER */
.site-header {
position: sticky; top: 0; z-index: 40;
background: rgba(251, 251, 253, 0.8);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid transparent;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.site-header.scrolled { background: rgba(251, 251, 253, 0.92); border-color: var(--line-soft); }
/* Header is platinum at every scroll position — no teal at-top state. */
.site-header__inner {
display: grid; grid-template-columns: auto 1fr auto;
align-items: center; min-height: 48px;
padding-block: 0.5rem; gap: var(--s-5);
max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter);
}
.site-header__wordmark { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; color: var(--fg); }
.site-header__nav { display: flex; gap: var(--s-6); align-items: center; justify-content: center; margin: 0 auto; }
.site-header__nav a { font-size: var(--fs-sm); font-weight: 400; color: var(--fg); transition: color var(--dur) var(--ease); letter-spacing: -0.005em; opacity: 0.88; }
.site-header__nav a:hover { opacity: 1; }
.site-header__actions { display: flex; gap: 0.25rem; align-items: center; }
.icon-btn {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--fg); transition: background var(--dur) var(--ease); position: relative;
}
.icon-btn:hover { background: var(--gray-100); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 1.5; }
.cart-count {
position: absolute; top: 2px; right: 2px;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: var(--r-full);
background: var(--atem-green); color: var(--white);
font-size: 12px; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.menu-toggle { display: none; }
@media (max-width: 900px) {
.site-header__nav { display: none; }
.menu-toggle { display: inline-flex; }
}
/* ANNOUNCEMENT */
.announcement {
background: var(--gray-800); color: var(--white); overflow: hidden;
padding: 0.65rem 0; font-size: var(--fs-xs); font-weight: 500;
letter-spacing: 0.02em; text-align: center;
}
.announcement__inner { display: flex; justify-content: center; gap: var(--s-6); align-items: center; flex-wrap: wrap; padding-inline: var(--gutter); }
.announcement a { color: var(--atem-green-pale); font-weight: 500; }
.announcement a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* HERO — Apple launch style */
.hero {
position: relative;
min-height: clamp(620px, 90vh, 880px);
background: var(--gray-100); overflow: hidden;
display: grid; align-items: center; isolation: isolate;
}
.hero.hero-dark { background: var(--gray-800); color: var(--white); }
.hero.hero-white { background: var(--white); }
.hero__media { position: absolute; inset: 0; z-index: -1; object-fit: cover; width: 100%; height: 100%; }
.hero__scrim-dark { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%); }
.hero__inner {
position: relative; z-index: 1;
text-align: center; display: grid; gap: var(--s-5); justify-items: center;
padding-block: clamp(3rem, 8vw, 6rem);
}
.hero__eyebrow { color: var(--atem-green); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.01em; }
.hero-dark .hero__eyebrow { color: var(--atem-green-pale); }
.hero__title {
font-size: clamp(2.75rem, 1.8rem + 4.5vw, 6rem);
font-weight: 600; letter-spacing: -0.04em; line-height: 0.95;
color: inherit; max-width: 18ch; text-wrap: balance;
}
.hero__sub { font-size: var(--fs-lg); line-height: 1.3; color: var(--fg-soft); max-width: 36ch; font-weight: 400; letter-spacing: -0.015em; }
.hero-dark .hero__sub { color: rgba(255,255,255,0.8); }
.hero__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.hero__price-line { font-size: var(--fs-sm); color: var(--fg-soft); margin-top: -0.5rem; }
.hero__product-image { margin-top: var(--s-6); max-width: min(860px, 85vw); width: 100%; }
.hero__product-image img { width: 100%; height: auto; }
/* SHOWCASE — Per-product Apple section */
.showcase {
padding-block: clamp(4rem, 8vw, 7rem);
text-align: center;
background: var(--bg-color, var(--gray-100));
color: var(--fg-color, var(--fg));
position: relative; overflow: hidden;
}
.showcase-dark { --bg-color: var(--gray-800); --fg-color: var(--white); }
.showcase-tint-green { --bg-color: var(--atem-green); --fg-color: var(--white); }
.showcase-white { --bg-color: var(--white); }
.showcase-gray { --bg-color: var(--gray-100); }
.showcase__inner {
max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter);
display: grid; gap: var(--s-5); justify-items: center;
}
.showcase__eyebrow { color: var(--atem-green); font-size: var(--fs-base); font-weight: 500; letter-spacing: -0.005em; }
.showcase-dark .showcase__eyebrow, .showcase-tint-green .showcase__eyebrow { color: var(--atem-green-pale); }
.showcase__title {
font-size: clamp(2.5rem, 1.7rem + 3.5vw, 5rem);
font-weight: 600; letter-spacing: -0.035em; line-height: 0.98;
max-width: 14ch; text-wrap: balance;
}
.showcase__sub { font-size: var(--fs-lg); line-height: 1.35; max-width: 42ch; font-weight: 400; color: var(--fg-soft); letter-spacing: -0.015em; }
.showcase-dark .showcase__sub, .showcase-tint-green .showcase__sub { color: rgba(255,255,255,0.75); }
.showcase__actions { display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
.showcase__price { font-size: var(--fs-sm); color: var(--fg-soft); margin-top: 0.25rem; }
.showcase-dark .showcase__price, .showcase-tint-green .showcase__price { color: rgba(255,255,255,0.7); }
.showcase__media { margin-top: var(--s-5); max-width: min(720px, 80vw); width: 100%; position: relative; }
.showcase__media img { width: 100%; height: auto; object-fit: contain; }
/* PRODUCT CARD */
.product-card {
display: flex; flex-direction: column;
background: var(--white); border-radius: var(--r-xl);
overflow: hidden; position: relative; color: var(--fg); text-align: left;
border: 1px solid transparent;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-card__media {
aspect-ratio: 4 / 5; background: var(--gray-100);
position: relative; overflow: hidden;
}
.product-card__media img {
width: 100%; height: 100%; object-fit: cover;
transition: opacity var(--dur-slow) var(--ease);
}
.product-card__media img.primary { opacity: 1; }
.product-card__media img.secondary { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .product-card__media img.primary { opacity: 0; }
.product-card:hover .product-card__media img.secondary { opacity: 1; }
.product-card__badges {
position: absolute; top: 1rem; left: 1rem;
display: flex; gap: 0.4rem; flex-wrap: wrap; z-index: 2;
}
.product-card__body { padding: 1.25rem 1rem 1.5rem; display: grid; gap: 0.35rem; }
.product-card__goal {
font-size: var(--fs-xs); font-weight: 500;
letter-spacing: 0.05em; text-transform: uppercase;
color: var(--fg-muted);
display: inline-flex; align-items: center; gap: 0.4rem;
}
.product-card__goal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dot-color, var(--atem-green)); }
.product-card__goal[data-goal="energize"] { --dot-color: var(--goal-energize); }
.product-card__goal[data-goal="vitalize"] { --dot-color: var(--goal-vitalize); }
.product-card__goal[data-goal="sleep"] { --dot-color: var(--goal-sleep); }
.product-card__goal[data-goal="ritual"] { --dot-color: var(--goal-ritual); }
.product-card__title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; color: var(--fg); line-height: 1.2; }
.product-card__flavor { font-size: var(--fs-sm); color: var(--fg-soft); letter-spacing: -0.005em; }
.product-card__price-row { display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem; }
.product-card__price { font-size: var(--fs-base); font-weight: 600; color: var(--fg); letter-spacing: -0.005em; }
.product-card__price-compare { color: var(--fg-muted); text-decoration: line-through; font-size: var(--fs-sm); font-weight: 400; }
/* GOAL NAV */
.goal-nav { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.goal-nav__item {
padding: 0.55rem 1.1rem;
background: var(--white); border: 1px solid var(--line);
border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 500;
color: var(--fg); letter-spacing: -0.005em;
transition: all var(--dur) var(--ease);
display: inline-flex; align-items: center; gap: 0.4rem;
}
.goal-nav__item:hover { background: var(--atem-green); color: var(--white); border-color: var(--atem-green); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(2, 73, 67, 0.2); }
.goal-nav__item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dot-color, var(--atem-green)); }
.goal-nav__item[data-goal="energize"] { --dot-color: var(--goal-energize); }
.goal-nav__item[data-goal="vitalize"] { --dot-color: var(--goal-vitalize); }
.goal-nav__item[data-goal="sleep"] { --dot-color: var(--goal-sleep); }
.goal-nav__item[data-goal="ritual"] { --dot-color: var(--goal-ritual); }
/* FEATURE GRID */
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .feature-grid { grid-template-columns: 1fr; } }
.feature-tile {
background: var(--gray-100); border-radius: var(--r-xl);
padding: clamp(2rem, 3vw, 3rem); display: grid; gap: 1rem;
align-content: start; min-height: 300px;
transition: transform var(--dur) var(--ease);
}
.feature-tile:hover { transform: translateY(-2px); }
.feature-tile__icon { color: var(--atem-green); }
.feature-tile__icon svg { width: 36px; height: 36px; stroke-width: 1.3; }
.feature-tile__title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: var(--fg); }
.feature-tile__text { font-size: var(--fs-base); color: var(--fg-soft); line-height: 1.47; letter-spacing: -0.005em; }
.feature-tile-lg { grid-column: span 2; }
.feature-tile-dark { background: var(--gray-800); color: var(--white); }
.feature-tile-dark .feature-tile__title { color: var(--white); }
.feature-tile-dark .feature-tile__text { color: rgba(255,255,255,0.7); }
.feature-tile-dark .feature-tile__icon { color: var(--atem-green-pale); }
.feature-tile-accent { background: var(--atem-green-pale); }
@media (max-width: 620px) { .feature-tile-lg { grid-column: span 1; } }
/* STATS */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-6); text-align: center; }
.stat__number {
font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
font-weight: 600; letter-spacing: -0.04em; line-height: 1;
color: var(--atem-green);
}
.stat__label { margin-top: 0.5rem; font-size: var(--fs-base); color: var(--fg-soft); letter-spacing: -0.005em; line-height: 1.4; }
/* TESTIMONIALS */
.testimonial-card {
background: var(--white); padding: 2rem;
border-radius: var(--r-xl); border: 1px solid var(--line-soft);
display: grid; gap: 1rem;
}
.testimonial-card__stars { color: var(--atem-green); display: flex; gap: 0.1rem; }
.testimonial-card__quote { font-size: var(--fs-md); line-height: 1.45; color: var(--fg); letter-spacing: -0.01em; font-weight: 400; }
.testimonial-card__author { font-size: var(--fs-sm); color: var(--fg-soft); font-weight: 500; }
.testimonial-card__product { font-size: var(--fs-xs); color: var(--fg-muted); letter-spacing: 0.05em; text-transform: uppercase; }
/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
width: 100%; display: flex; justify-content: space-between; align-items: center;
padding: 1.5rem 0;
font-size: var(--fs-md); font-weight: 500; letter-spacing: -0.015em;
text-align: left; color: var(--fg); gap: 1rem;
transition: color var(--dur) var(--ease);
list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--atem-green); }
.faq__q .plus {
width: 28px; height: 28px; flex-shrink: 0; color: var(--fg-soft);
transition: transform var(--dur) var(--ease);
display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.faq__q .plus::before, .faq__q .plus::after {
content: ""; position: absolute;
width: 14px; height: 1.5px; background: currentColor; border-radius: 1px;
transition: transform var(--dur) var(--ease);
}
.faq__q .plus::after { transform: rotate(90deg); }
.faq__item[open] .faq__q .plus::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 1.75rem; color: var(--fg-soft); max-width: 64ch; line-height: 1.6; font-size: var(--fs-base); letter-spacing: -0.005em; }
/* NEWSLETTER */
.newsletter {
background: var(--atem-green-deep); color: var(--white);
padding: clamp(3.5rem, 6vw, 5rem) var(--gutter);
border-radius: var(--r-2xl);
display: grid; gap: var(--s-4); text-align: center; justify-items: center;
background-image: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.06), transparent 50%),
radial-gradient(circle at 70% 100%, rgba(2,73,67,0.6), transparent 50%);
}
.newsletter h2 { color: var(--white); max-width: 16ch; }
.newsletter p { color: rgba(255,255,255,0.7); max-width: 44ch; font-size: var(--fs-md); }
.newsletter__form {
display: flex; gap: 0.4rem;
width: 100%; max-width: 480px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
border-radius: var(--r-full); padding: 4px; margin-top: 0.5rem;
}
.newsletter__form input {
flex: 1; background: transparent; border: 0;
padding: 0 1.25rem; color: var(--white);
font-size: var(--fs-sm); min-height: 44px;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter__form input:focus { outline: none; }
.newsletter__form button {
padding: 0 1.5rem; background: var(--white); color: var(--gray-800);
border-radius: var(--r-full); font-weight: 500; font-size: var(--fs-sm);
min-height: 44px; transition: background var(--dur) var(--ease);
}
.newsletter__form button:hover { background: var(--gray-100); }
/* FOOTER */
.site-footer {
background: var(--gray-100); color: var(--fg-soft);
padding: var(--s-8) 0 var(--s-6);
font-size: var(--fs-sm); border-top: 1px solid var(--line-soft);
}
.site-footer a { color: var(--fg-soft); transition: color var(--dur) var(--ease); font-size: var(--fs-sm); }
.site-footer a:hover { color: var(--fg); }
.site-footer__top-note {
padding-bottom: var(--s-5); border-bottom: 1px solid var(--line);
margin-bottom: var(--s-6); font-size: var(--fs-xs);
line-height: 1.6; color: var(--fg-muted); max-width: 64ch;
}
.site-footer__grid {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: var(--s-6); margin-bottom: var(--s-8);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__heading { font-size: var(--fs-sm); color: var(--fg); font-weight: 600; margin-bottom: 1rem; letter-spacing: -0.005em; }
.site-footer__list { display: grid; gap: 0.5rem; }
.site-footer__legal {
padding-top: var(--s-5);
display: flex; justify-content: space-between;
flex-wrap: wrap; gap: 1rem;
font-size: var(--fs-xs); color: var(--fg-muted);
border-top: 1px solid var(--line-soft);
}
/* PRODUCT PAGE */
.product-layout {
display: grid; grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
@media (max-width: 900px) { .product-layout { grid-template-columns: 1fr; } }
.product-gallery { display: grid; gap: 0.5rem; position: sticky; top: 80px; }
@media (max-width: 900px) { .product-gallery { position: static; } }
.product-gallery__main {
aspect-ratio: 1; border-radius: var(--r-xl);
overflow: hidden; background: var(--gray-100);
}
.product-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.product-gallery__thumbs img {
aspect-ratio: 1; border-radius: var(--r-md);
object-fit: cover; cursor: pointer;
opacity: 0.5; border: 2px solid transparent;
transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease);
background: var(--gray-100);
}
.product-gallery__thumbs img:hover { opacity: 0.85; }
.product-gallery__thumbs img.active { opacity: 1; border-color: var(--gray-800); }
.product-info { display: grid; gap: var(--s-5); padding-top: var(--s-3); }
.product-info__title { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; color: var(--fg); }
.product-info__sub { color: var(--fg-soft); font-size: var(--fs-md); line-height: 1.4; max-width: 44ch; letter-spacing: -0.01em; }
.product-info__price {
display: flex; align-items: baseline; gap: 0.75rem;
font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em;
}
.product-info__price s { color: var(--fg-muted); font-size: var(--fs-md); font-weight: 400; }
.product-info__reviews { display: flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); color: var(--fg-soft); }
.variant-picker { display: grid; gap: 0.75rem; }
.variant-picker__label { font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.005em; color: var(--fg-soft); }
.variant-picker__label strong { color: var(--fg); font-weight: 600; margin-left: 0.25rem; }
.variant-picker__options { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.variant-option {
padding: 0.75rem 1.25rem; border: 1.5px solid var(--line);
border-radius: var(--r-full); font-size: var(--fs-sm); font-weight: 500;
cursor: pointer; transition: all var(--dur) var(--ease);
background: var(--white); letter-spacing: -0.005em;
display: inline-flex; align-items: center; gap: 0.4rem;
}
.variant-option:hover { border-color: var(--fg); }
.variant-picker input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.variant-picker input[type="radio"]:checked + .variant-option {
background: var(--atem-green); color: var(--white); border-color: var(--atem-green);
box-shadow: 0 2px 8px rgba(2, 73, 67, 0.25);
}
.quantity {
display: inline-flex; align-items: center;
border: 1.5px solid var(--line); border-radius: var(--r-full);
overflow: hidden; background: var(--white);
}
.quantity button { width: 44px; height: 48px; color: var(--fg); font-size: 1.2rem; transition: background var(--dur) var(--ease); }
.quantity button:hover { background: var(--gray-100); }
.quantity input {
width: 44px; height: 48px; text-align: center; border: 0;
background: transparent; font-size: var(--fs-sm); font-weight: 500; color: var(--fg);
}
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-specs {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
padding: 1.5rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft);
}
@media (max-width: 620px) { .product-specs { grid-template-columns: repeat(2, 1fr); } }
.product-spec { display: grid; gap: 0.35rem; text-align: center; }
.product-spec__icon { color: var(--atem-green); display: flex; justify-content: center; }
.product-spec__icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.product-spec__label { font-size: var(--fs-xs); color: var(--fg-soft); font-weight: 500; letter-spacing: -0.005em; }
/* COLLECTION */
.collection-header {
padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
text-align: center; display: grid; gap: 1rem; justify-items: center;
}
.collection-filter {
display: flex; justify-content: space-between; align-items: center;
padding: var(--s-4) 0;
border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
margin-bottom: var(--s-7); font-size: var(--fs-sm); color: var(--fg-soft);
}
.collection-grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6);
}
@media (max-width: 900px) { .collection-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }
@media (max-width: 520px) { .collection-grid { grid-template-columns: 1fr; gap: var(--s-5); } }
/* CART DRAWER */
.cart-drawer {
position: fixed; top: 0; right: 0;
width: min(440px, 100vw); height: 100vh;
background: var(--white); z-index: 100;
transform: translateX(100%);
transition: transform var(--dur-slow) var(--ease);
display: flex; flex-direction: column; box-shadow: var(--shadow-lg);
}
.cart-drawer.open { transform: translateX(0); }
.cart-backdrop {
position: fixed; inset: 0; background: rgba(0,0,0,0.3);
z-index: 99; opacity: 0; pointer-events: none;
transition: opacity var(--dur) var(--ease);
backdrop-filter: blur(4px);
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }
.cart-drawer__head {
padding: 1.25rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid var(--line-soft);
}
.cart-drawer__head-title { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 1rem 1.5rem; }
.cart-drawer__foot { padding: 1.25rem 1.5rem; border-top: 1px solid var(--line-soft); background: var(--white); }
.cart-line { display: grid; grid-template-columns: 72px 1fr auto; gap: 0.75rem; padding: 1rem 0; border-bottom: 1px solid var(--line-soft); }
.cart-line img { width: 72px; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-md); background: var(--gray-100); }
.cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: var(--fs-base); font-weight: 500; }
/* MOBILE MENU */
.mobile-menu {
position: fixed; inset: 0;
background: var(--white); z-index: 50;
transform: translateX(-100%);
transition: transform var(--dur-slow) var(--ease);
padding: var(--s-5) var(--gutter); overflow-y: auto;
display: flex; flex-direction: column;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-6); }
.mobile-menu__list { display: grid; gap: 0.25rem; }
.mobile-menu__list a {
font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em;
color: var(--fg); padding: 0.75rem 0; border-bottom: 1px solid var(--line-soft);
}
/* REVEAL */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-stagger > * { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.reveal-stagger.visible > *:nth-child(1) { transition-delay: 40ms; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 120ms; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 280ms; opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(n+5) { transition-delay: 360ms; opacity: 1; transform: none; }
/* SIGNATURE ANIMATIONS — float, pulse, parallax, count-up */
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-14px) rotate(-0.4deg); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(2, 73, 67, 0.35); }
50% { box-shadow: 0 0 0 14px rgba(2, 73, 67, 0); }
}
@keyframes breathe {
0%, 100% { transform: scale(1); opacity: 0.9; }
50% { transform: scale(1.05); opacity: 1; }
}
@keyframes shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
/* Animation utility classes */
.anim-float { animation: float 6s var(--ease) infinite; }
.anim-float-slow { animation: float 9s var(--ease) infinite; }
.anim-pulse-glow { animation: pulse-glow 2.5s var(--ease) infinite; }
.anim-breathe { animation: breathe 4.5s var(--ease) infinite; }
.anim-fade-up { animation: fade-up 800ms var(--ease-out) both; }
.anim-scale-in { animation: scale-in 800ms var(--ease-out) both; }
/* Hero product image animation — signature Apple-like subtle float */
.hero__product-image {
animation: fade-up 900ms var(--ease-out) 200ms both, float 7s var(--ease) 1200ms infinite;
}
/* Showcase product image — gentle float */
.showcase__media img {
animation: float 8s var(--ease) infinite;
}
/* Parallax on scroll — applied via JS */
.parallax { will-change: transform; }
/* Gradient text sweep animation */
.gradient-sweep {
background: linear-gradient(90deg, var(--atem-green), var(--atem-green-soft), var(--atem-green));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: shimmer 6s linear infinite;
}
/* Product card media zoom on hover */
.product-card__media img.primary,
.product-card__media img.secondary {
transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.product-card:hover .product-card__media img.primary,
.product-card:hover .product-card__media img.secondary {
transform: scale(1.04);
}
/* Feature tile — subtle icon pulse on hover */
.feature-tile__icon { transition: transform var(--dur) var(--ease); }
.feature-tile:hover .feature-tile__icon { transform: scale(1.08) rotate(-2deg); }
/* Stat number — subtle scale entry */
.stat__number {
display: inline-block;
transition: transform var(--dur) var(--ease);
}
.stats.visible .stat__number { animation: scale-in 800ms var(--ease-spring) both; }
.stats.visible .stat:nth-child(1) .stat__number { animation-delay: 80ms; }
.stats.visible .stat:nth-child(2) .stat__number { animation-delay: 180ms; }
.stats.visible .stat:nth-child(3) .stat__number { animation-delay: 280ms; }
.stats.visible .stat:nth-child(4) .stat__number { animation-delay: 380ms; }
/* Button has shimmer on hover */
.btn-primary, .btn-accent {
position: relative;
overflow: hidden;
}
.btn-primary::before, .btn-accent::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transform: translateX(-100%);
transition: transform 600ms var(--ease);
}
.btn-primary:hover::before, .btn-accent:hover::before {
transform: translateX(100%);
}
/* Goal chip dot — subtle pulse */
.goal-chip::before,
.product-card__goal::before,
.goal-nav__item::before {
animation: pulse-dot 2.8s var(--ease) infinite;
}
@keyframes pulse-dot {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.4); }
}
/* UTILITIES */
.u-center { text-align: center; }
.u-narrow { max-width: 56ch; margin-inline: auto; }
@media (max-width: 620px) { .u-hide-mobile { display: none !important; } }
/* A11Y */
.sr-only {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); border: 0;
}
*:focus-visible { outline: 2px solid var(--atem-green); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
}
/* ============================================================
REAL-IMAGE HOMEPAGE — v3 additions
Added: .hero--apple, .showcase--{red,navy,mint,lavender,teal},
.btn-light, .product-card__video
============================================================ */
/* ---- Apple-style hero with centered product image ---- */
.hero--apple {
background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-100) 100%);
padding: clamp(4rem, 8vw, 7rem) var(--gutter) 0;
text-align: center;
overflow: hidden;
}
.hero--apple .hero__inner {
max-width: 1080px;
margin-inline: auto;
display: grid;
gap: clamp(1rem, 2vw, 1.5rem);
justify-items: center;
}
.hero--apple .hero__title {
font-size: clamp(3rem, 8vw, 6.5rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
margin: 0;
}
.hero--apple .hero__sub {
max-width: 640px;
font-size: clamp(1.125rem, 1.5vw, 1.375rem);
color: var(--fg-soft);
}
.hero--apple .hero__product-image {
margin-top: clamp(2rem, 4vw, 4rem);
width: 100%;
max-width: 1000px;
}
.hero--apple .hero__product-image img {
width: 100%;
height: auto;
display: block;
border-radius: var(--r-xl);
box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.2);
}
/* ---- Colored showcase variants (matching actual brand packaging) ---- */
.showcase--red,
.showcase--navy,
.showcase--mint,
.showcase--lavender,
.showcase--teal {
position: relative;
overflow: hidden;
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.showcase--red { background: #DC2626; color: var(--white); }
.showcase--navy { background: #1A2F4F; color: var(--white); }
.showcase--mint { background: #96DDCF; color: #0F3830; }
.showcase--lavender { background: #C2B5D8; color: #2D2447; }
.showcase--teal {
background: var(--atem-green-deep);
color: var(--white);
background-image: radial-gradient(circle at 30% 0%, rgba(255,255,255,0.06), transparent 50%),
radial-gradient(circle at 70% 100%, rgba(2,73,67,0.6), transparent 50%);
}
.showcase--red .showcase__inner,
.showcase--navy .showcase__inner,
.showcase--mint .showcase__inner,
.showcase--lavender .showcase__inner,
.showcase--teal .showcase__inner {
max-width: 1200px;
margin-inline: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 4vw, 5rem);
align-items: center;
}
.showcase--red .showcase__title,
.showcase--navy .showcase__title,
.showcase--teal .showcase__title {
color: var(--white);
font-size: clamp(2.5rem, 5vw, 4.25rem);
letter-spacing: -0.035em;
line-height: 1.02;
}
.showcase--mint .showcase__title,
.showcase--lavender .showcase__title {
color: inherit;
font-size: clamp(2.5rem, 5vw, 4.25rem);
letter-spacing: -0.035em;
line-height: 1.02;
}
.showcase--red .showcase__sub,
.showcase--navy .showcase__sub,
.showcase--teal .showcase__sub {
color: rgba(255, 255, 255, 0.8);
font-size: clamp(1rem, 1.3vw, 1.25rem);
}
.showcase--mint .showcase__sub,
.showcase--lavender .showcase__sub {
color: inherit;
opacity: 0.75;
font-size: clamp(1rem, 1.3vw, 1.25rem);
}
.showcase--red .showcase__price,
.showcase--navy .showcase__price,
.showcase--teal .showcase__price {
font-size: var(--fs-lg);
color: rgba(255, 255, 255, 0.8);
}
.showcase--red .showcase__media img,
.showcase--navy .showcase__media img,
.showcase--mint .showcase__media img,
.showcase--lavender .showcase__media img,
.showcase--teal .showcase__media img {
width: 100%;
height: auto;
border-radius: var(--r-xl);
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.35);
display: block;
}
@media (max-width: 900px) {
.showcase--red .showcase__inner,
.showcase--navy .showcase__inner,
.showcase--mint .showcase__inner,
.showcase--lavender .showcase__inner,
.showcase--teal .showcase__inner {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
}
}
/* ---- Light button (white button on dark backgrounds) ---- */
.btn-light {
background: var(--white);
color: var(--gray-800);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn-light:hover {
background: var(--gray-100);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* ---- Product card video overlay (plays on hover via CSS) ---- */
.product-card__media {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: var(--r-lg);
}
.product-card__media img.primary,
.product-card__media video.secondary {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 600ms var(--ease-out);
}
.product-card__media img.primary { opacity: 1; z-index: 1; }
.product-card__media video.secondary { opacity: 0; z-index: 2; }
.product-card:hover .product-card__media img.primary { opacity: 0; }
.product-card:hover .product-card__media video.secondary { opacity: 1; }
/* Override older zoom-on-hover — we want crossfade, not scale */
.product-card:hover .product-card__media img.primary,
.product-card:hover .product-card__media img.secondary {
transform: none;
}
/* ---- Stats section animated entrance ---- */
.stats-section.visible .stat {
animation: fade-up 700ms var(--ease-out) both;
}
.stats-section.visible .stat:nth-child(1) { animation-delay: 60ms; }
.stats-section.visible .stat:nth-child(2) { animation-delay: 160ms; }
.stats-section.visible .stat:nth-child(3) { animation-delay: 260ms; }
.stats-section.visible .stat:nth-child(4) { animation-delay: 360ms; }
/* ---- Showcase image floating animation ---- */
.showcase--red .showcase__media img,
.showcase--navy .showcase__media img,
.showcase--mint .showcase__media img,
.showcase--lavender .showcase__media img,
.showcase--teal .showcase__media img {
animation: float 8s var(--ease) infinite;
}
.showcase--navy .showcase__media img { animation-delay: -1.5s; }
.showcase--mint .showcase__media img { animation-delay: -3s; }
.showcase--lavender .showcase__media img { animation-delay: -4.5s; }
.showcase--teal .showcase__media img { animation-delay: -6s; }
/* ---- Hero image has a subtle scale-in + float ---- */
.hero--apple .hero__product-image img {
animation: fade-up 1s var(--ease-out) 200ms both, float 9s var(--ease) 1.2s infinite;
}
@media (prefers-reduced-motion: reduce) {
.hero--apple .hero__product-image img,
.showcase--red .showcase__media img,
.showcase--navy .showcase__media img,
.showcase--mint .showcase__media img,
.showcase--lavender .showcase__media img,
.showcase--teal .showcase__media img {
animation: none;
}
}
/* ============================================================
V4 HOMEPAGE — Teal-dominant, Apple-bold, animated everywhere
============================================================ */
/* ---- Shared: eyebrow variants ---- */
.eyebrow--teal { color: var(--atem-green); }
.eyebrow--light { color: rgba(255,255,255,0.7); }
/* Pill with teal dot */
.pill {
display: inline-flex; align-items: center; gap: 0.55rem;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 999px;
font-size: var(--fs-sm); font-weight: 500;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.pill--dot::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #7FE6D4;
animation: pulse-dot 2s ease-in-out infinite;
box-shadow: 0 0 0 4px rgba(127,230,212,0.2);
}
/* ============ HERO V4 ============ */
.hero-v4 {
position: relative;
min-height: clamp(600px, 95vh, 1100px);
background: linear-gradient(165deg, #012A27 0%, #024943 45%, #0D5B54 100%);
color: var(--white);
overflow: hidden;
display: grid; place-items: center;
padding: clamp(3rem, 6vw, 6rem) var(--gutter);
}
/* Aurora background blobs — slow organic movement */
.hero-v4__aurora,
.collection-finale__aurora {
position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.aurora-blob {
position: absolute; border-radius: 50%;
filter: blur(80px); opacity: 0.55;
mix-blend-mode: screen;
}
.aurora-blob--1 {
width: 600px; height: 600px;
background: radial-gradient(circle, #4ADCC4 0%, transparent 65%);
top: -10%; left: -10%;
animation: aurora-drift 20s ease-in-out infinite;
}
.aurora-blob--2 {
width: 800px; height: 800px;
background: radial-gradient(circle, #0D5B54 0%, transparent 70%);
bottom: -20%; right: -15%;
animation: aurora-drift 25s ease-in-out infinite reverse;
}
.aurora-blob--3 {
width: 500px; height: 500px;
background: radial-gradient(circle, #7FE6D4 0%, transparent 60%);
top: 40%; left: 40%;
animation: aurora-drift 30s ease-in-out infinite;
animation-delay: -10s;
opacity: 0.3;
}
@keyframes aurora-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(8%, -5%) scale(1.1); }
66% { transform: translate(-5%, 8%) scale(0.95); }
}
.hero-v4__inner {
position: relative; z-index: 2;
max-width: 1400px; width: 100%;
display: grid; gap: clamp(1.5rem, 2.5vw, 2.5rem);
justify-items: center; text-align: center;
}
.hero-v4__eyebrow { animation: fade-up 600ms var(--ease-out) 100ms both; }
.hero-v4__title {
font-size: clamp(3.5rem, 10vw, 8.5rem);
font-weight: 700;
letter-spacing: -0.045em;
line-height: 0.95;
margin: 0;
color: var(--white);
animation: fade-up 900ms var(--ease-out) 250ms both;
}
.hero-v4__title em {
font-style: normal;
background: linear-gradient(135deg, #7FE6D4 0%, #E6EFEE 50%, #7FE6D4 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: gradient-sweep 8s linear infinite;
}
@keyframes gradient-sweep {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
.hero-v4__sub {
max-width: 680px;
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
color: rgba(255,255,255,0.78);
line-height: 1.5;
margin: 0;
animation: fade-up 900ms var(--ease-out) 400ms both;
}
.hero-v4__actions {
display: flex; gap: clamp(1rem, 2vw, 1.5rem); align-items: center;
flex-wrap: wrap; justify-content: center;
animation: fade-up 900ms var(--ease-out) 550ms both;
}
.hero-v4__jump {
display: inline-flex; align-items: center; gap: 0.5rem;
color: rgba(255,255,255,0.85);
font-weight: 500;
padding: 0.75rem 0.25rem;
position: relative;
transition: color var(--dur) var(--ease);
}
.hero-v4__jump:hover { color: var(--white); }
.hero-v4__jump svg {
transition: transform var(--dur) var(--ease);
animation: jump-bounce 2s ease-in-out infinite;
}
@keyframes jump-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
.hero-v4__visual {
width: 100%;
max-width: 1200px;
margin-top: clamp(2rem, 4vw, 4rem);
animation: scale-in 1.2s var(--ease-out) 700ms both;
}
.hero-v4__visual img {
width: 100%; height: auto;
display: block;
border-radius: var(--r-2xl);
box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.5);
animation: float-subtle 9s ease-in-out 2s infinite;
}
@keyframes float-subtle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
.hero-v4__scroll-cue {
position: absolute; bottom: 2rem; left: 50%;
transform: translateX(-50%);
display: grid; gap: 0.5rem; justify-items: center;
color: rgba(255,255,255,0.5);
font-size: var(--fs-xs); letter-spacing: 0.15em; text-transform: uppercase;
animation: fade-in 1s ease-out 2s both;
}
.scroll-cue-line {
width: 1px; height: 40px;
background: linear-gradient(to bottom, rgba(255,255,255,0.6), transparent);
animation: scroll-cue 2.5s ease-in-out infinite;
}
@keyframes scroll-cue {
0%, 100% { transform: scaleY(1); opacity: 0.5; }
50% { transform: scaleY(0.5) translateY(20px); opacity: 1; }
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Button on teal background */
.btn-on-teal {
background: var(--white);
color: var(--atem-green-deep);
font-weight: 600;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.btn-on-teal:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0,0,0,0.25);
background: var(--white);
}
/* ============ MARQUEE ============ */
.marquee-section {
background: var(--atem-green);
color: var(--white);
padding: 1.25rem 0;
overflow: hidden;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.marquee__track {
display: inline-flex; align-items: center; gap: 2rem;
animation: marquee 60s linear infinite;
padding-left: 2rem;
}
.marquee__item {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: var(--fs-sm); font-weight: 500;
letter-spacing: 0.02em;
white-space: nowrap;
}
.marquee__dot {
color: rgba(255,255,255,0.4);
font-size: 1.5rem;
line-height: 1;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee:hover .marquee__track { animation-play-state: paused; }
/* ============ PRODUCTS V4 — bento grid ============ */
.products-v4 {
background: var(--white);
padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}
.products-v4__header {
max-width: 900px; margin: 0 auto clamp(3rem, 5vw, 5rem);
text-align: center;
display: grid; gap: 0.75rem;
}
.products-v4__title {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
margin: 0;
color: var(--fg);
}
.products-v4__title em {
font-style: normal;
color: var(--atem-green);
background: linear-gradient(135deg, var(--atem-green-soft), var(--atem-green), var(--atem-green-soft));
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: gradient-sweep 8s linear infinite;
}
.products-v4__sub {
font-size: clamp(1rem, 1.3vw, 1.25rem);
color: var(--fg-soft);
line-height: 1.5;
max-width: 640px; margin: 0 auto;
}
.products-v4__grid {
max-width: 1400px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 1.5vw, 1.5rem);
}
@media (max-width: 1000px) {
.products-v4__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.products-v4__grid { grid-template-columns: 1fr; }
}
.products-v4__cta {
text-align: center; margin-top: clamp(3rem, 5vw, 4rem);
}
/* BENTO CARD */
.bento-card {
display: block;
background: var(--gray-100);
border-radius: var(--r-xl);
overflow: hidden;
color: inherit;
text-decoration: none;
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
position: relative;
isolation: isolate;
}
.bento-card::before {
content: "";
position: absolute; inset: 0;
border: 2px solid transparent;
border-radius: inherit;
transition: border-color 300ms var(--ease);
pointer-events: none;
z-index: 3;
}
.bento-card:hover {
transform: translateY(-6px);
box-shadow: 0 25px 60px -15px rgba(0,0,0,0.2);
}
.bento-card:hover::before { border-color: var(--atem-green); }
.bento-card__media {
position: relative;
aspect-ratio: 1;
overflow: hidden;
}
.bento-card__img,
.bento-card__video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: opacity 600ms var(--ease-out), transform 1s var(--ease-out);
}
.bento-card__img { opacity: 1; z-index: 1; }
.bento-card__video { opacity: 0; z-index: 2; }
.bento-card:hover .bento-card__img { opacity: 0; transform: scale(1.05); }
.bento-card:hover .bento-card__video { opacity: 1; }
.bento-card__body {
padding: clamp(1.25rem, 1.75vw, 1.75rem);
display: grid; gap: 0.5rem;
background: var(--white);
}
.bento-card__chip {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-muted);
margin-bottom: 0.25rem;
width: fit-content;
}
.chip-dot {
width: 8px; height: 8px; border-radius: 50%;
animation: pulse-dot 2.5s ease-in-out infinite;
}
.chip-dot[data-goal="vitalize"] { background: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.2); }
.chip-dot[data-goal="vitalize-alt"] { background: #2F4F78; box-shadow: 0 0 0 3px rgba(47,79,120,0.2); }
.chip-dot[data-goal="energize"] { background: #4AB8A3; box-shadow: 0 0 0 3px rgba(74,184,163,0.2); }
.chip-dot[data-goal="sleep"] { background: #8E7AB8; box-shadow: 0 0 0 3px rgba(142,122,184,0.2); }
.chip-dot[data-goal="ritual"] { background: var(--atem-green); box-shadow: 0 0 0 3px rgba(2,73,67,0.2); }
.bento-card__title {
font-size: clamp(1.25rem, 1.6vw, 1.5rem);
font-weight: 600;
letter-spacing: -0.02em;
margin: 0;
color: var(--fg);
}
.bento-card__flavor {
font-size: var(--fs-sm);
color: var(--fg-muted);
margin: 0;
}
.bento-card__meta {
display: flex; justify-content: space-between; align-items: center;
margin-top: 0.5rem;
padding-top: 0.75rem;
border-top: 1px solid var(--line-soft);
}
.bento-card__price {
font-size: var(--fs-lg);
font-weight: 600;
color: var(--fg);
}
.bento-card__arrow {
display: grid; place-items: center;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--gray-100);
color: var(--atem-green);
transition: background 300ms var(--ease), transform 300ms var(--ease);
}
.bento-card:hover .bento-card__arrow {
background: var(--atem-green);
color: var(--white);
transform: translateX(4px);
}
/* ============ CAMPAIGN (Times Square) ============ */
.campaign {
position: relative;
min-height: clamp(500px, 75svh, 800px);
display: grid; place-items: center;
overflow: hidden;
color: var(--white);
}
.campaign__media {
position: absolute; inset: 0;
z-index: 0;
}
.campaign__img {
width: 100%; height: 100%;
object-fit: cover;
will-change: transform;
transition: transform 0.1s linear;
}
.campaign__scrim {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(2,42,39,0.4) 0%, rgba(1,42,39,0.85) 100%);
}
.campaign__content {
position: relative; z-index: 1;
max-width: 900px;
text-align: center;
padding: 0 var(--gutter);
display: grid; gap: 1rem; justify-items: center;
}
.campaign__title {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.02;
color: var(--white);
margin: 0;
}
.campaign__title em {
font-style: normal;
background: linear-gradient(90deg, #7FE6D4, #E6EFEE);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.campaign__sub {
font-size: clamp(1rem, 1.4vw, 1.25rem);
color: rgba(255,255,255,0.75);
line-height: 1.5;
max-width: 640px;
margin: 0;
}
/* ============ WHY ATEM ============ */
.why-atem {
background: var(--gray-50);
padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}
.why-atem__header {
max-width: 900px; margin: 0 auto clamp(3rem, 5vw, 4rem);
text-align: center;
display: grid; gap: 0.75rem;
}
.why-atem__title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
margin: 0;
}
.why-atem__title em {
font-style: normal;
color: var(--atem-green);
}
.why-grid {
max-width: 1400px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(240px, auto);
gap: 1rem;
}
@media (max-width: 900px) {
.why-grid { grid-template-columns: repeat(2, 1fr); }
}
.why-tile {
padding: clamp(1.5rem, 2.5vw, 2.5rem);
border-radius: var(--r-xl);
display: grid;
grid-template-rows: auto 1fr auto;
gap: 1rem;
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.why-tile:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.12);
}
.why-tile--lg { grid-column: span 2; }
@media (max-width: 900px) {
.why-tile--lg { grid-column: span 2; }
}
.why-tile--white {
background: var(--white);
color: var(--fg);
}
.why-tile--teal {
background: linear-gradient(135deg, var(--atem-green) 0%, var(--atem-green-soft) 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.why-tile--teal::before {
content: "";
position: absolute;
width: 400px; height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(127,230,212,0.25) 0%, transparent 70%);
top: -100px; right: -100px;
animation: aurora-drift 15s ease-in-out infinite;
}
.why-tile--dark {
background: var(--gray-800);
color: var(--white);
}
.why-tile__icon {
width: 48px; height: 48px;
display: grid; place-items: center;
transition: transform 400ms var(--ease);
}
.why-tile__icon svg { width: 100%; height: 100%; }
.why-tile:hover .why-tile__icon { transform: scale(1.15) rotate(-5deg); }
.why-tile--teal .why-tile__icon,
.why-tile--dark .why-tile__icon { color: var(--white); }
.why-tile--white .why-tile__icon { color: var(--atem-green); }
.why-tile__title {
font-size: clamp(1.375rem, 2vw, 1.875rem);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
}
.why-tile--lg .why-tile__title { font-size: clamp(1.75rem, 2.5vw, 2.5rem); }
.why-tile__text {
font-size: var(--fs-base);
line-height: 1.5;
margin: 0;
opacity: 0.85;
}
/* ============ STATS V4 ============ */
.stats-v4 {
background: var(--white);
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
}
.stats-v4__inner {
max-width: 1400px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(2rem, 4vw, 4rem);
}
@media (max-width: 900px) {
.stats-v4__inner { grid-template-columns: repeat(2, 1fr); }
}
.stat-v4 {
text-align: center;
position: relative;
}
.stat-v4__number {
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1;
color: var(--fg);
display: inline-block;
}
.stat-v4--accent .stat-v4__number {
background: linear-gradient(135deg, var(--atem-green), var(--atem-green-soft));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.stat-v4__suffix {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--atem-green);
display: inline-block;
margin-left: 0.1em;
}
.stat-v4__label {
font-size: var(--fs-sm);
color: var(--fg-muted);
margin-top: 0.5rem;
line-height: 1.4;
}
/* ============ TESTIMONIALS V4 ============ */
.testimonials-v4 {
background: linear-gradient(180deg, var(--white) 0%, var(--gray-50) 100%);
padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}
.testimonials-v4__header {
max-width: 900px; margin: 0 auto clamp(3rem, 5vw, 4rem);
text-align: center;
display: grid; gap: 0.75rem;
}
.testimonials-v4__title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
margin: 0;
}
.testimonials-v4__grid {
max-width: 1400px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 900px) {
.testimonials-v4__grid { grid-template-columns: 1fr; }
}
.tcard {
background: var(--white);
border: 1px solid var(--line-soft);
border-radius: var(--r-xl);
padding: clamp(1.75rem, 2.5vw, 2.5rem);
position: relative;
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease), border-color 400ms var(--ease);
display: grid; gap: 1rem;
}
.tcard:hover {
transform: translateY(-4px);
border-color: var(--atem-green-pale);
box-shadow: 0 20px 50px -15px rgba(2,73,67,0.15);
}
.tcard__quote {
font-family: Georgia, serif;
font-size: 6rem;
line-height: 0.7;
color: var(--atem-green);
opacity: 0.15;
position: absolute;
top: 1rem; right: 1.5rem;
pointer-events: none;
}
.tcard__stars {
color: #F4B860;
font-size: 1rem;
letter-spacing: 0.1em;
}
.tcard__text {
font-size: var(--fs-lg);
line-height: 1.5;
color: var(--fg);
margin: 0;
quotes: none;
}
.tcard__author {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--line-soft);
font-weight: 600;
}
.tcard__product {
font-size: var(--fs-xs);
font-weight: 400;
color: var(--atem-green);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 0.2rem;
}
/* ============ COLLECTION FINALE (deep teal) ============ */
.collection-finale {
position: relative;
background: linear-gradient(135deg, #012A27 0%, #024943 100%);
color: var(--white);
padding: clamp(4rem, 8vw, 8rem) var(--gutter);
overflow: hidden;
}
.collection-finale__inner {
position: relative; z-index: 1;
max-width: 1400px; margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(2rem, 4vw, 5rem);
align-items: center;
}
@media (max-width: 900px) {
.collection-finale__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
.collection-finale__content { display: grid; gap: 1.25rem; max-width: 560px; }
.collection-finale__title {
font-size: clamp(2.5rem, 6.5vw, 5.5rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.95;
margin: 0;
color: var(--white);
}
.collection-finale__title em {
font-style: normal;
background: linear-gradient(135deg, #7FE6D4 0%, #E6EFEE 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.collection-finale__sub {
font-size: clamp(1rem, 1.4vw, 1.25rem);
color: rgba(255,255,255,0.78);
line-height: 1.5;
margin: 0;
}
.collection-finale__price {
display: flex; gap: 1rem; align-items: baseline;
flex-wrap: wrap;
padding: 1rem 0;
}
.collection-finale__price-main {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 700;
color: var(--white);
}
.collection-finale__price-compare {
font-size: clamp(1rem, 1.5vw, 1.25rem);
color: rgba(255,255,255,0.5);
text-decoration: line-through;
}
.collection-finale__save {
background: #7FE6D4;
color: var(--atem-green-deep);
padding: 0.35rem 0.75rem;
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.collection-finale__actions { margin-top: 0.5rem; }
.collection-finale__media img {
width: 100%; height: auto;
border-radius: var(--r-2xl);
box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
animation: float-subtle 10s ease-in-out infinite;
}
/* ============ FAQ V4 ============ */
.faq-v4 {
background: var(--white);
padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}
.faq-v4__inner { max-width: 820px; margin: 0 auto; }
.faq-v4__header {
text-align: center;
display: grid; gap: 0.75rem;
margin-bottom: clamp(3rem, 5vw, 4rem);
}
.faq-v4__title {
font-size: clamp(2.5rem, 6vw, 4rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
margin: 0;
}
.faq-v4__list { display: grid; gap: 0.75rem; }
.faq-item {
background: var(--gray-50);
border: 1px solid var(--line-soft);
border-radius: var(--r-lg);
overflow: hidden;
transition: background 300ms var(--ease), border-color 300ms var(--ease);
}
.faq-item[open] {
background: var(--white);
border-color: var(--atem-green-pale);
box-shadow: 0 10px 30px -10px rgba(2,73,67,0.1);
}
.faq-item__q {
display: flex; justify-content: space-between; align-items: center;
padding: 1.25rem 1.5rem;
cursor: pointer;
font-size: clamp(1rem, 1.3vw, 1.125rem);
font-weight: 600;
color: var(--fg);
list-style: none;
transition: color 200ms var(--ease);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item[open] .faq-item__q { color: var(--atem-green); }
.faq-item__plus {
position: relative;
width: 18px; height: 18px;
flex-shrink: 0;
}
.faq-item__plus::before,
.faq-item__plus::after {
content: ""; position: absolute;
background: currentColor;
transition: transform 300ms var(--ease);
}
.faq-item__plus::before {
width: 100%; height: 2px; top: 50%; left: 0; margin-top: -1px;
}
.faq-item__plus::after {
width: 2px; height: 100%; left: 50%; top: 0; margin-left: -1px;
}
.faq-item[open] .faq-item__plus::after { transform: rotate(90deg); }
.faq-item__a {
padding: 0 1.5rem 1.25rem;
color: var(--fg-soft);
line-height: 1.6;
}
.faq-item__a p { margin: 0; }
/* ============ NEWSLETTER V4 ============ */
.newsletter-v4 {
background: linear-gradient(135deg, #012A27 0%, #024943 50%, #0D5B54 100%);
color: var(--white);
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
position: relative;
overflow: hidden;
}
.newsletter-v4::before {
content: "";
position: absolute;
width: 600px; height: 600px;
background: radial-gradient(circle, rgba(127,230,212,0.15) 0%, transparent 70%);
top: -200px; right: -200px;
border-radius: 50%;
animation: aurora-drift 20s ease-in-out infinite;
}
.newsletter-v4__inner {
position: relative; z-index: 1;
max-width: 700px; margin: 0 auto;
text-align: center;
display: grid; gap: 1.25rem; justify-items: center;
}
.newsletter-v4__title {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
margin: 0;
color: var(--white);
}
.newsletter-v4__title em {
font-style: normal;
background: linear-gradient(90deg, #7FE6D4, #E6EFEE);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.newsletter-v4__sub {
color: rgba(255,255,255,0.75);
font-size: var(--fs-base);
margin: 0;
}
.newsletter-v4__form {
display: flex; width: 100%;
max-width: 520px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
padding: 0.35rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: border-color 300ms var(--ease);
}
.newsletter-v4__form:focus-within { border-color: #7FE6D4; }
.newsletter-v4__form input[type="email"] {
flex: 1;
background: transparent;
border: 0;
padding: 0.85rem 1.25rem;
color: var(--white);
font-size: var(--fs-base);
outline: none;
}
.newsletter-v4__form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-v4__form button {
background: var(--white);
color: var(--atem-green-deep);
font-weight: 600;
border: 0;
border-radius: 999px;
padding: 0.85rem 1.5rem;
cursor: pointer;
display: inline-flex; align-items: center; gap: 0.5rem;
transition: transform 200ms var(--ease), background 200ms var(--ease);
white-space: nowrap;
}
.newsletter-v4__form button:hover {
transform: translateX(2px);
background: #7FE6D4;
}
.newsletter-v4__note {
font-size: var(--fs-xs);
color: rgba(255,255,255,0.4);
}
/* ============ UTILITY ANIMATIONS ============ */
.stats-v4.visible .stat-v4 {
animation: fade-up 800ms var(--ease-out) both;
}
.stats-v4.visible .stat-v4:nth-child(1) { animation-delay: 80ms; }
.stats-v4.visible .stat-v4:nth-child(2) { animation-delay: 180ms; }
.stats-v4.visible .stat-v4:nth-child(3) { animation-delay: 280ms; }
.stats-v4.visible .stat-v4:nth-child(4) { animation-delay: 380ms; }
/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
.hero-v4__title em,
.products-v4__title em,
.collection-finale__title em,
.newsletter-v4__title em,
.aurora-blob,
.marquee__track,
.hero-v4__visual img,
.collection-finale__media img,
.hero-v4__jump svg,
.pill--dot::before,
.chip-dot,
.scroll-cue-line {
animation: none !important;
}
}
/* ============================================================
V5 HOMEPAGE — Logo-forward hero, sales tactics, character FAQ
============================================================ */
/* Header logo image swap based on scroll state */
.site-header__logo { height: 34px; width: auto; display: block; }
.site-header__logo--dark { display: block; }
.site-header__logo--light { display: none; }
.template-index .site-header:not(.scrolled) .site-header__logo--dark { display: none; }
.template-index .site-header:not(.scrolled) .site-header__logo--light { display: block; }
.site-header.scrolled .site-header__logo--dark { display: block; }
.site-header.scrolled .site-header__logo--light { display: none; }
/* ============ HERO V5 — logo-forward, no giant image ============ */
.hero-v5 {
position: relative;
min-height: clamp(680px, 95svh, 950px);
min-height: clamp(680px, 95dvh, 950px);
background: linear-gradient(165deg, #012A27 0%, #024943 40%, #0D5B54 100%);
color: var(--white);
overflow: hidden;
display: grid; place-items: center;
padding: clamp(6rem, 12vw, 9rem) var(--gutter) clamp(4rem, 8vw, 6rem);
}
.hero-v5__inner {
position: relative; z-index: 2;
max-width: 1000px; width: 100%;
display: grid; gap: clamp(1.25rem, 2vw, 2rem);
justify-items: center; text-align: center;
}
.hero-v5__top { animation: fade-up 600ms var(--ease-out) 100ms both; }
.hero-v5__logo-mark {
animation: fade-up 900ms var(--ease-out) 200ms both;
filter: drop-shadow(0 4px 40px rgba(127, 230, 212, 0.15));
}
.hero-v5__logo-mark img {
width: clamp(240px, 45vw, 520px);
height: auto;
display: block;
}
.hero-v5__title {
font-size: clamp(2rem, 4.5vw, 3.5rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 0;
color: rgba(255,255,255,0.92);
animation: fade-up 900ms var(--ease-out) 350ms both;
}
.hero-v5__title em {
font-style: normal;
background: linear-gradient(135deg, #7FE6D4 0%, #E6EFEE 50%, #7FE6D4 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: gradient-sweep 8s linear infinite;
}
.hero-v5__sub {
max-width: 640px;
font-size: clamp(1rem, 1.5vw, 1.25rem);
color: rgba(255,255,255,0.7);
line-height: 1.5;
margin: 0;
animation: fade-up 900ms var(--ease-out) 500ms both;
}
.hero-v5__actions {
display: flex; gap: clamp(0.75rem, 1.5vw, 1.5rem); align-items: center;
flex-wrap: wrap; justify-content: center;
margin-top: 0.5rem;
animation: fade-up 900ms var(--ease-out) 650ms both;
}
.hero-v5__jump {
display: inline-flex; align-items: center; gap: 0.5rem;
color: rgba(255,255,255,0.85);
font-weight: 500;
padding: 0.75rem 0.25rem;
transition: color var(--dur) var(--ease);
}
.hero-v5__jump:hover { color: var(--white); }
.hero-v5__jump svg { animation: jump-bounce 2s ease-in-out infinite; }
/* Trust strip in hero */
.hero-v5__trust {
display: flex;
gap: clamp(1rem, 2vw, 2rem);
align-items: center;
justify-content: center;
flex-wrap: wrap;
padding-top: clamp(2rem, 4vw, 3rem);
margin-top: clamp(1rem, 2vw, 1.5rem);
border-top: 1px solid rgba(255,255,255,0.12);
width: 100%; max-width: 760px;
animation: fade-up 900ms var(--ease-out) 800ms both;
}
.trust-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255,255,255,0.75);
font-size: var(--fs-sm);
white-space: nowrap;
}
.trust-item svg { color: #7FE6D4; width: 18px; height: 18px; flex-shrink: 0; }
.trust-item strong { color: var(--white); font-weight: 600; }
.trust-divider {
width: 1px; height: 20px;
background: rgba(255,255,255,0.15);
}
@media (max-width: 700px) {
.trust-divider { display: none; }
.hero-v5__trust { gap: 0.75rem; flex-direction: column; }
}
/* ============ BENTO CARD BADGES ============ */
.bento-card { position: relative; }
.bento-card__badge {
position: absolute;
top: 1rem; left: 1rem;
z-index: 4;
padding: 0.35rem 0.7rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: badge-pulse 3s ease-in-out infinite;
}
.bento-card__badge--bestseller {
background: rgba(244, 184, 96, 0.95);
color: #4A2D00;
}
.bento-card__badge--new {
background: rgba(2, 73, 67, 0.95);
color: var(--white);
}
@keyframes badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
/* ============ BUNDLE CTA ============ */
.bundle-cta {
max-width: 1400px; margin: clamp(3rem, 5vw, 4rem) auto 0;
background: linear-gradient(135deg, #024943 0%, #0D5B54 100%);
color: var(--white);
border-radius: var(--r-xl);
padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem);
display: grid;
grid-template-columns: 1fr auto;
gap: 2rem;
align-items: center;
position: relative;
overflow: hidden;
}
.bundle-cta::before {
content: "";
position: absolute;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(127,230,212,0.2), transparent 70%);
right: -100px; top: -100px;
border-radius: 50%;
animation: aurora-drift 15s ease-in-out infinite;
}
.bundle-cta__content { position: relative; display: grid; gap: 0.5rem; }
.bundle-cta__badge {
display: inline-flex; align-items: center; width: fit-content;
padding: 0.35rem 0.8rem;
background: rgba(127, 230, 212, 0.2);
color: #7FE6D4;
border-radius: 999px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
.bundle-cta__title {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 600;
letter-spacing: -0.025em;
margin: 0;
color: var(--white);
}
.bundle-cta__sub {
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
color: rgba(255,255,255,0.78);
margin: 0;
max-width: 520px;
}
.bundle-cta .btn-primary {
background: var(--white);
color: var(--atem-green-deep);
position: relative;
z-index: 1;
white-space: nowrap;
}
.bundle-cta .btn-primary:hover {
background: #7FE6D4;
color: var(--atem-green-deep);
transform: translateY(-2px);
}
@media (max-width: 700px) {
.bundle-cta {
grid-template-columns: 1fr;
text-align: center;
padding: 2rem 1.5rem;
}
.bundle-cta__content { justify-items: center; }
.bundle-cta__sub { text-align: center; }
}
/* ============ COLLECTION FINALE — includes list ============ */
.collection-finale__includes {
list-style: none; padding: 0; margin: 0.5rem 0 0;
display: grid; gap: 0.6rem;
}
.collection-finale__includes li {
display: flex; align-items: center;
gap: 0.6rem;
color: rgba(255,255,255,0.9);
font-size: var(--fs-base);
}
.collection-finale__includes svg {
color: #7FE6D4;
width: 18px; height: 18px;
flex-shrink: 0;
}
.collection-finale__micro {
font-size: var(--fs-xs);
color: rgba(255,255,255,0.55);
margin: 0.75rem 0 0;
}
/* Cleaner collection image display — no black shadow */
.collection-finale__media img {
border-radius: var(--r-2xl);
box-shadow: 0 40px 100px -20px rgba(0,0,0,0.4);
}
/* ============ TESTIMONIALS — location micro-copy ============ */
.tcard__location {
color: var(--fg-muted);
font-weight: 400;
}
/* ============ FAQ V5 — more character ============ */
.faq-v5 {
background: var(--white);
padding: clamp(4rem, 8vw, 8rem) var(--gutter);
}
.faq-v5__inner { max-width: 880px; margin: 0 auto; }
.faq-v5__header {
text-align: center;
display: grid; gap: 0.75rem;
margin-bottom: clamp(3rem, 5vw, 4rem);
}
.faq-v5__title {
font-size: clamp(2.25rem, 5vw, 3.5rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
margin: 0;
}
.faq-v5__title em {
font-style: italic;
color: var(--atem-green);
font-weight: 700;
}
.faq-v5__intro {
font-size: clamp(1rem, 1.3vw, 1.15rem);
color: var(--fg-soft);
line-height: 1.5;
max-width: 560px;
margin: 0 auto;
}
.faq-v5__list { display: grid; gap: 0.75rem; }
/* Override the old .faq-item — reuse class but enhance */
.faq-v5 .faq-item {
background: var(--gray-50);
border: 1px solid transparent;
border-radius: var(--r-lg);
overflow: hidden;
transition: background 300ms var(--ease), border-color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.faq-v5 .faq-item:hover {
background: var(--white);
border-color: var(--atem-green-pale);
}
.faq-v5 .faq-item[open] {
background: var(--white);
border-color: var(--atem-green-pale);
box-shadow: 0 10px 40px -15px rgba(2,73,67,0.15);
}
.faq-v5 .faq-item__q {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
cursor: pointer;
font-size: clamp(1rem, 1.2vw, 1.1rem);
font-weight: 600;
color: var(--fg);
list-style: none;
transition: color 200ms var(--ease);
}
.faq-v5 .faq-item__q::-webkit-details-marker { display: none; }
.faq-item__qline {
display: flex; align-items: center; gap: 0.85rem;
min-width: 0;
text-align: left;
}
.faq-item__icon {
flex-shrink: 0;
width: 38px; height: 38px;
border-radius: 10px;
display: grid; place-items: center;
background: var(--atem-green-pale);
color: var(--atem-green);
transition: all 300ms var(--ease);
}
.faq-item__icon svg { width: 20px; height: 20px; }
.faq-v5 .faq-item[open] .faq-item__icon {
background: var(--atem-green);
color: var(--white);
transform: rotate(-3deg) scale(1.05);
}
.faq-v5 .faq-item[open] .faq-item__q { color: var(--atem-green); }
.faq-v5 .faq-item__a {
padding: 0 1.5rem 1.5rem calc(1.5rem + 38px + 0.85rem);
color: var(--fg-soft);
line-height: 1.65;
font-size: var(--fs-base);
animation: fade-up 400ms ease-out;
}
.faq-v5 .faq-item__a p { margin: 0; }
.faq-v5 .faq-item__a a {
color: var(--atem-green);
font-weight: 500;
border-bottom: 1px solid var(--atem-green-pale);
transition: border-color 200ms var(--ease);
}
.faq-v5 .faq-item__a a:hover { border-color: var(--atem-green); }
@media (max-width: 600px) {
.faq-v5 .faq-item__a {
padding-left: 1.5rem;
}
}
/* Help CTA at bottom of FAQ */
.faq-v5__help {
margin-top: clamp(2.5rem, 4vw, 3rem);
padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
background: var(--atem-green-pale);
border-radius: var(--r-xl);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 1.5rem;
}
.faq-v5__help strong {
color: var(--atem-green-deep);
font-size: var(--fs-lg);
}
.faq-v5__help span {
color: var(--atem-green-soft);
font-size: var(--fs-sm);
}
@media (max-width: 600px) {
.faq-v5__help { grid-template-columns: 1fr; text-align: center; }
}
/* ============ NEWSLETTER V5 — with discount offer ============ */
.newsletter-v5 {
background: linear-gradient(135deg, #012A27 0%, #024943 50%, #0D5B54 100%);
color: var(--white);
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
position: relative;
overflow: hidden;
}
.newsletter-v5::before {
content: "";
position: absolute;
width: 700px; height: 700px;
background: radial-gradient(circle, rgba(127,230,212,0.18) 0%, transparent 70%);
top: -250px; right: -200px;
border-radius: 50%;
animation: aurora-drift 20s ease-in-out infinite;
}
.newsletter-v5__inner {
position: relative; z-index: 1;
max-width: 720px; margin: 0 auto;
text-align: center;
display: grid; gap: 1.25rem; justify-items: center;
}
.newsletter-v5__badge {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(127, 230, 212, 0.15);
border: 1px solid rgba(127, 230, 212, 0.3);
color: #7FE6D4;
border-radius: 999px;
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.02em;
}
.newsletter-v5__badge svg {
transform: rotate(45deg);
color: #7FE6D4;
}
.newsletter-v5__title {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1;
margin: 0;
color: var(--white);
}
.newsletter-v5__sub {
color: rgba(255,255,255,0.75);
font-size: clamp(1rem, 1.3vw, 1.15rem);
margin: 0;
max-width: 540px;
line-height: 1.5;
}
.newsletter-v5__form {
display: flex; width: 100%;
max-width: 540px;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
padding: 0.35rem;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
transition: border-color 300ms var(--ease);
margin-top: 0.5rem;
}
.newsletter-v5__form:focus-within { border-color: #7FE6D4; }
.newsletter-v5__form input[type="email"] {
flex: 1;
background: transparent;
border: 0;
padding: 0.85rem 1.25rem;
color: var(--white);
font-size: var(--fs-base);
outline: none;
min-width: 0;
}
.newsletter-v5__form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-v5__form button {
background: var(--white);
color: var(--atem-green-deep);
font-weight: 700;
border: 0;
border-radius: 999px;
padding: 0.85rem 1.5rem;
cursor: pointer;
display: inline-flex; align-items: center; gap: 0.5rem;
transition: transform 200ms var(--ease), background 200ms var(--ease);
white-space: nowrap;
}
.newsletter-v5__form button:hover {
transform: translateX(2px);
background: #7FE6D4;
}
.newsletter-v5__note {
font-size: var(--fs-xs);
color: rgba(255,255,255,0.4);
max-width: 420px;
}
@media (max-width: 600px) {
.newsletter-v5__form {
flex-direction: column;
border-radius: var(--r-lg);
padding: 0.5rem;
gap: 0.5rem;
}
.newsletter-v5__form button {
border-radius: 999px;
justify-content: center;
}
}
/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
.hero-v5__title em,
.aurora-blob,
.bento-card__badge,
.hero-v5__jump svg {
animation: none !important;
}
}
/* ============================================================
HERO V5 — Split layout with angled device
============================================================ */
.hero-v5__inner--split {
max-width: 1400px;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
justify-items: start;
text-align: left;
}
.hero-v5__inner--split .hero-v5__copy {
display: grid;
gap: clamp(1rem, 1.75vw, 1.5rem);
justify-items: start;
}
.hero-v5__inner--split .hero-v5__top,
.hero-v5__inner--split .hero-v5__logo-mark,
.hero-v5__inner--split .hero-v5__title,
.hero-v5__inner--split .hero-v5__sub,
.hero-v5__inner--split .hero-v5__actions,
.hero-v5__inner--split .hero-v5__trust {
justify-self: start;
text-align: left;
}
.hero-v5__inner--split .hero-v5__logo-mark img {
width: clamp(180px, 24vw, 260px);
}
.hero-v5__inner--split .hero-v5__title {
font-size: clamp(2.75rem, 5.5vw, 4.75rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.02;
color: var(--white);
}
.hero-v5__inner--split .hero-v5__sub {
font-size: clamp(1rem, 1.4vw, 1.2rem);
max-width: 520px;
}
.hero-v5__inner--split .hero-v5__trust {
justify-content: flex-start;
max-width: none;
width: 100%;
margin-top: clamp(1rem, 2vw, 1.5rem);
padding-top: clamp(1.5rem, 3vw, 2rem);
}
/* Device visual */
.hero-v5__device {
position: relative;
width: 100%;
max-width: 420px;
justify-self: center;
display: grid;
place-items: center;
aspect-ratio: 1 / 2;
animation: fade-up 1s var(--ease-out) 450ms both;
}
.hero-v5__device-halo {
position: absolute;
width: 110%;
height: 85%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(
ellipse at center,
rgba(127, 230, 212, 0.35) 0%,
rgba(127, 230, 212, 0.15) 30%,
transparent 65%
);
filter: blur(40px);
z-index: 0;
animation: halo-pulse 5s ease-in-out infinite;
}
@keyframes halo-pulse {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.hero-v5__device-img {
position: relative;
z-index: 1;
width: auto;
height: 85%;
max-height: 720px;
object-fit: contain;
transform: rotate(-12deg);
filter: drop-shadow(-10px 30px 60px rgba(0, 0, 0, 0.35))
drop-shadow(0 0 40px rgba(127, 230, 212, 0.2));
animation: device-float 8s ease-in-out infinite;
transform-origin: center center;
}
@keyframes device-float {
0%, 100% { transform: rotate(-12deg) translateY(0); }
50% { transform: rotate(-11deg) translateY(-16px); }
}
/* Hide the old centered layout */
.hero-v5__inner:not(.hero-v5__inner--split) { display: none; }
/* ============ MOBILE — under 900px: stack hero ============ */
@media (max-width: 900px) {
.hero-v5 {
min-height: auto;
padding: clamp(5rem, 12vw, 7rem) var(--gutter) clamp(3rem, 6vw, 4rem);
}
.hero-v5__inner--split {
grid-template-columns: 1fr;
text-align: center;
justify-items: center;
gap: 2.5rem;
}
.hero-v5__inner--split .hero-v5__copy {
justify-items: center;
order: 2;
}
.hero-v5__inner--split .hero-v5__top,
.hero-v5__inner--split .hero-v5__logo-mark,
.hero-v5__inner--split .hero-v5__title,
.hero-v5__inner--split .hero-v5__sub,
.hero-v5__inner--split .hero-v5__actions,
.hero-v5__inner--split .hero-v5__trust {
justify-self: center;
text-align: center;
}
.hero-v5__device {
order: 1;
max-width: 220px;
aspect-ratio: 1 / 2;
}
.hero-v5__device-img {
max-height: 440px;
transform: rotate(-8deg);
}
.hero-v5__inner--split .hero-v5__actions {
flex-direction: column;
width: 100%;
}
.hero-v5__inner--split .hero-v5__actions .btn {
width: 100%;
justify-content: center;
}
}
/* ============ MOBILE REFINEMENTS — everywhere ============ */
@media (max-width: 768px) {
/* Trust strip stacks cleanly */
.hero-v5__trust { flex-direction: column; gap: 0.85rem; }
.trust-divider { display: none; }
/* Bento product grid — 2 columns on tablet, 1 on phone */
.products-v4__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.bento-card__body { padding: 1rem; }
.bento-card__title { font-size: 1.1rem; }
.bento-card__flavor { font-size: 0.82rem; }
.bento-card__price { font-size: 1rem; }
/* Bundle CTA — stack */
.bundle-cta {
grid-template-columns: 1fr;
padding: 1.75rem 1.25rem;
text-align: center;
gap: 1.25rem;
}
.bundle-cta__content { justify-items: center; }
.bundle-cta__sub { text-align: center; }
.bundle-cta .btn { width: 100%; justify-content: center; }
/* Campaign parallax section — smaller */
.campaign { min-height: 420px; padding: 3rem 1rem; }
.campaign__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
.campaign__sub { font-size: 0.95rem; }
/* Why grid */
.why-grid { grid-template-columns: 1fr; gap: 0.75rem; }
.why-tile { padding: 1.5rem; }
.why-tile--lg { grid-column: span 1; }
.why-tile__title { font-size: 1.25rem; }
.why-tile--lg .why-tile__title { font-size: 1.5rem; }
/* Stats */
.stats-v4__inner { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
.stat-v4__number { font-size: clamp(3rem, 12vw, 4.5rem); }
/* Testimonials */
.testimonials-v4__grid { grid-template-columns: 1fr; gap: 1rem; }
.tcard { padding: 1.5rem; }
.tcard__text { font-size: 1rem; }
/* Collection finale — stack, image first */
.collection-finale__inner {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.collection-finale__content { justify-items: center; max-width: none; }
.collection-finale__includes { text-align: left; }
.collection-finale__price { justify-content: center; }
.collection-finale__actions .btn { width: 100%; justify-content: center; }
/* FAQ */
.faq-v5 { padding: 3rem 1rem; }
.faq-v5__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
.faq-v5__intro { font-size: 0.95rem; }
.faq-v5 .faq-item__q { padding: 1rem; font-size: 0.95rem; }
.faq-item__qline { gap: 0.6rem; }
.faq-item__icon { width: 32px; height: 32px; }
.faq-item__icon svg { width: 16px; height: 16px; }
.faq-v5 .faq-item__a {
padding: 0 1rem 1rem calc(1rem + 32px + 0.6rem);
font-size: 0.95rem;
}
.faq-v5__help {
grid-template-columns: 1fr;
text-align: center;
padding: 1.5rem;
}
/* Newsletter */
.newsletter-v5 { padding: 3rem 1rem; }
.newsletter-v5__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
/* Header logo smaller */
.site-header__logo { height: 28px; }
/* Products header */
.products-v4 { padding: 3rem 1rem; }
.products-v4__title { font-size: clamp(2rem, 8vw, 3rem); }
/* Testimonials section */
.testimonials-v4 { padding: 3rem 1rem; }
.testimonials-v4__title { font-size: clamp(2rem, 8vw, 2.75rem); }
/* Why section */
.why-atem { padding: 3rem 1rem; }
.why-atem__title { font-size: clamp(2rem, 8vw, 3rem); }
/* Collection finale */
.collection-finale { padding: 3rem 1rem; }
.collection-finale__title { font-size: clamp(2.25rem, 10vw, 3.5rem); }
.collection-finale__price-main { font-size: 2.25rem; }
}
/* Very small phones — < 420px */
@media (max-width: 420px) {
.products-v4__grid { grid-template-columns: 1fr; }
.bento-card__badge { top: 0.75rem; left: 0.75rem; font-size: 0.75rem; padding: 0.3rem 0.55rem; }
.stats-v4__inner { grid-template-columns: 1fr; gap: 2rem; }
.hero-v5__trust .trust-item { font-size: 0.82rem; }
.marquee__item { font-size: 0.82rem; }
.pill { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
}
/* Marquee should also flow on mobile */
@media (max-width: 600px) {
.marquee-section { padding: 0.85rem 0; }
.marquee__track { animation-duration: 45s; gap: 1.25rem; }
}
/* ============================================================
PRODUCT PAGE (PDP) — clean + sales-influenced
============================================================ */
.pdp {
padding: clamp(2rem, 4vw, 4rem) var(--gutter) clamp(3rem, 5vw, 5rem);
background: var(--white);
}
.pdp__inner {
max-width: 1280px; margin: 0 auto;
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 4vw, 5rem);
align-items: flex-start;
}
@media (max-width: 900px) {
.pdp__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* GALLERY */
.pdp__gallery {
position: sticky; top: 90px;
display: grid; gap: 0.75rem;
}
@media (max-width: 900px) {
.pdp__gallery { position: static; }
}
.pdp__main {
background: var(--gray-50);
border-radius: var(--r-xl);
overflow: hidden;
aspect-ratio: 1;
}
.pdp__main img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
transition: transform 500ms var(--ease);
}
.pdp__main:hover img { transform: scale(1.02); }
.pdp__thumbs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.5rem;
}
.pdp__thumb {
background: var(--gray-50);
border: 2px solid transparent;
border-radius: var(--r);
padding: 0;
cursor: pointer;
overflow: hidden;
aspect-ratio: 1;
transition: border-color var(--dur) var(--ease);
}
.pdp__thumb.active { border-color: var(--atem-green); }
.pdp__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) {
.pdp__thumbs { grid-template-columns: repeat(5, 1fr); }
}
/* INFO */
.pdp__info {
display: grid;
gap: clamp(1rem, 1.5vw, 1.25rem);
}
.pdp__meta-row {
display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
}
.pdp__chip {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-muted);
}
.pdp__badge {
display: inline-flex; align-items: center; gap: 0.25rem;
padding: 0.35rem 0.7rem;
background: rgba(244, 184, 96, 0.15);
color: #8A5A0E;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
}
.pdp__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0;
color: var(--fg);
}
.pdp__subtitle {
font-size: clamp(1rem, 1.3vw, 1.15rem);
color: var(--fg-soft);
line-height: 1.4;
margin: -0.25rem 0 0;
}
.pdp__reviews {
display: flex; align-items: center; gap: 0.75rem;
flex-wrap: wrap;
padding: 0.5rem 0;
}
.pdp__stars { color: #F4B860; font-size: 1rem; letter-spacing: 0.1em; }
.pdp__reviews-text { color: var(--fg-soft); font-size: var(--fs-sm); }
.pdp__reviews-text strong { color: var(--fg); font-weight: 700; }
.pdp__reviews-link {
color: var(--atem-green);
font-size: var(--fs-sm);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid var(--atem-green-pale);
transition: border-color 200ms var(--ease);
}
.pdp__reviews-link:hover { border-color: var(--atem-green); }
.pdp__price {
display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
padding: 0.5rem 0 0.25rem;
}
.pdp__price-main {
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 700;
color: var(--fg);
letter-spacing: -0.02em;
}
.pdp__price-compare {
font-size: 1.1rem;
color: var(--fg-muted);
text-decoration: line-through;
}
.pdp__save-badge {
background: var(--atem-green);
color: var(--white);
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.pdp__shipping-strip {
display: flex; align-items: center; gap: 0.6rem;
padding: 0.75rem 1rem;
background: var(--atem-green-pale);
border-radius: var(--r);
font-size: var(--fs-sm);
color: var(--atem-green-deep);
font-weight: 500;
}
.pdp__stock-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #22C55E;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
animation: pulse-dot 2s ease-in-out infinite;
}
/* VARIANTS */
.pdp__variants {
display: grid; gap: 1rem;
padding: 0.5rem 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.pdp__option { display: grid; gap: 0.5rem; }
.pdp__option-label {
font-size: var(--fs-sm);
color: var(--fg-soft);
}
.pdp__option-label strong {
color: var(--fg);
font-weight: 600;
margin-left: 0.4rem;
}
.pdp__option-choices {
display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.pdp__swatch {
position: relative; cursor: pointer;
}
.pdp__swatch input {
position: absolute; opacity: 0; pointer-events: none;
}
.pdp__swatch span {
display: inline-flex; align-items: center;
padding: 0.75rem 1.25rem;
border: 1.5px solid var(--line);
border-radius: 999px;
font-size: var(--fs-sm);
font-weight: 500;
color: var(--fg);
background: var(--white);
transition: all 200ms var(--ease);
}
.pdp__swatch:hover span {
border-color: var(--atem-green);
color: var(--atem-green);
}
.pdp__swatch input:checked + span {
background: var(--atem-green);
color: var(--white);
border-color: var(--atem-green);
box-shadow: 0 2px 8px rgba(2, 73, 67, 0.25);
}
/* PURCHASE ROW */
.pdp__purchase {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.75rem;
}
.pdp__qty {
display: inline-flex; align-items: center;
border: 1.5px solid var(--line);
border-radius: 999px;
overflow: hidden;
background: var(--white);
}
.pdp__qty button {
background: transparent;
border: 0;
width: 44px;
height: 52px;
font-size: 1.25rem;
color: var(--fg);
cursor: pointer;
transition: background 200ms var(--ease);
}
.pdp__qty button:hover { background: var(--gray-100); }
.pdp__qty input {
width: 40px;
text-align: center;
border: 0;
background: transparent;
font-size: 1rem;
font-weight: 600;
color: var(--fg);
appearance: textfield;
-moz-appearance: textfield;
}
.pdp__qty input::-webkit-outer-spin-button,
.pdp__qty input::-webkit-inner-spin-button {
appearance: none; margin: 0;
}
.pdp__cta {
min-height: 52px;
font-weight: 600;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.9rem 1.5rem;
}
.pdp__cta-text { letter-spacing: -0.01em; }
.pdp__cta-price {
padding-left: 0.75rem;
border-left: 1px solid rgba(255,255,255,0.3);
font-weight: 700;
}
/* TRUST ROW */
.pdp__trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
padding: 1rem;
background: var(--gray-50);
border-radius: var(--r-lg);
}
.pdp__trust-item {
display: flex; align-items: center; gap: 0.6rem;
}
.pdp__trust-item svg {
color: var(--atem-green);
width: 22px; height: 22px;
flex-shrink: 0;
}
.pdp__trust-item div { display: grid; gap: 0.1rem; min-width: 0; }
.pdp__trust-item strong {
font-size: var(--fs-xs);
font-weight: 700;
color: var(--fg);
line-height: 1.1;
}
.pdp__trust-item span {
font-size: 0.75rem;
color: var(--fg-muted);
line-height: 1.2;
}
@media (max-width: 600px) {
.pdp__trust { grid-template-columns: 1fr; }
}
/* KEY FACTS */
.pdp__facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
text-align: center;
}
.pdp__fact-num {
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 700;
color: var(--atem-green);
letter-spacing: -0.02em;
line-height: 1;
}
.pdp__fact-label {
font-size: 0.75rem;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 0.25rem;
font-weight: 500;
}
/* PDP ACCORDION — reuses FAQ item styling */
.pdp__accordion { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.pdp__accordion .faq-item {
background: var(--gray-50);
border: 1px solid transparent;
border-radius: var(--r-lg);
overflow: hidden;
transition: all 300ms var(--ease);
}
.pdp__accordion .faq-item:hover { background: var(--white); border-color: var(--atem-green-pale); }
.pdp__accordion .faq-item[open] { background: var(--white); border-color: var(--atem-green-pale); }
.pdp__accordion .faq-item__q {
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
padding: 1rem 1.25rem;
cursor: pointer;
font-size: var(--fs-base);
font-weight: 600;
color: var(--fg);
list-style: none;
}
.pdp__accordion .faq-item__q::-webkit-details-marker { display: none; }
.pdp__accordion .faq-item[open] .faq-item__q { color: var(--atem-green); }
.pdp__accordion .faq-item__a {
padding: 0 1.25rem 1.25rem calc(1.25rem + 32px + 0.75rem);
color: var(--fg-soft);
line-height: 1.6;
font-size: var(--fs-sm);
}
.pdp__accordion .faq-item__a p { margin: 0 0 0.5rem; }
.pdp__accordion .faq-item__a p:last-child { margin-bottom: 0; }
@media (max-width: 600px) {
.pdp__accordion .faq-item__a { padding-left: 1.25rem; }
}
/* ============ STICKY MOBILE CTA ============ */
.pdp__sticky-cta {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 30;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--line);
padding: 0.75rem 1rem;
transform: translateY(100%);
transition: transform 400ms var(--ease);
display: none;
}
.pdp__sticky-cta.visible { transform: translateY(0); }
.pdp__sticky-cta-inner {
max-width: 600px; margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: center;
}
.pdp__sticky-title {
font-size: 0.88rem;
font-weight: 600;
color: var(--fg);
line-height: 1.2;
}
.pdp__sticky-price {
font-size: 0.85rem;
color: var(--fg-soft);
font-weight: 500;
}
.pdp__sticky-cta .btn { padding: 0.75rem 1.25rem; font-size: 0.9rem; }
@media (max-width: 768px) {
.pdp__sticky-cta { display: block; }
/* Avoid content hidden under sticky bar */
.template-product main { padding-bottom: 80px; }
}
/* ============ PDP REVIEWS section ============ */
.pdp-reviews {
background: var(--gray-50);
padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.pdp-reviews__header {
max-width: 700px; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
text-align: center;
display: grid; gap: 0.75rem;
}
.pdp-reviews__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
margin: 0;
}
.pdp-reviews__summary {
display: inline-flex; align-items: center; gap: 0.75rem;
justify-self: center;
flex-wrap: wrap;
justify-content: center;
}
.pdp-reviews__stars { color: #F4B860; font-size: 1.25rem; letter-spacing: 0.1em; }
.pdp-reviews__avg {
color: var(--fg-soft);
font-size: var(--fs-base);
}
.pdp-reviews__avg strong {
color: var(--fg);
font-size: 1.5rem;
font-weight: 700;
margin-right: 0.25rem;
}
.pdp-reviews__grid {
max-width: 1200px; margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 900px) {
.pdp-reviews__grid { grid-template-columns: 1fr; }
}
/* ============ PDP UPSELL ============ */
.pdp-upsell {
background: var(--white);
padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.pdp-upsell .bundle-cta {
max-width: 1200px;
margin: 0 auto;
}
/* ============ HIDE OLD PDP CLASSES ============ */
.product-layout,
.product-gallery,
.product-info { display: none !important; }
/* ============================================================
MOBILE POLISH — comprehensive pass
============================================================ */
/* Device-float at rest rotation — overridden on mobile via container rotate instead */
@keyframes device-float-mobile {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* Stop horizontal overflow from aurora / blobs / wide elements */
html, body {
overflow-x: hidden;
max-width: 100vw;
}
/* Section containers never blow out their width */
section, .wrap, .wrap-prose, .wrap-tight {
max-width: 100%;
}
/* Re-do hero mobile cleanly */
@media (max-width: 900px) {
.hero-v5 {
min-height: auto;
padding: clamp(5rem, 14vw, 7rem) 1.25rem clamp(3rem, 6vw, 4rem);
}
.hero-v5__device-img {
/* On mobile, apply rotate via wrapper (keep float animation clean) */
transform: rotate(-8deg);
animation: device-float-mobile 6s ease-in-out infinite;
max-height: 360px;
}
.hero-v5__device {
max-width: 180px;
aspect-ratio: 1 / 2.2;
}
.hero-v5__title {
font-size: clamp(2.25rem, 8vw, 3rem) !important;
}
.hero-v5__sub {
font-size: 1rem !important;
max-width: 420px;
}
.hero-v5__sub br { display: none; }
}
/* Below 600px: really tight layout */
@media (max-width: 600px) {
.hero-v5 {
padding: 5.5rem 1.25rem 3rem;
}
.hero-v5__inner--split {
gap: 2rem;
}
.hero-v5__device {
max-width: 150px;
}
.hero-v5__device-img {
max-height: 290px;
}
.hero-v5__title {
font-size: 2.25rem !important;
line-height: 1.05;
}
.hero-v5__logo-mark img {
width: 140px !important;
height: auto;
}
.hero-v5__trust {
padding-top: 1.5rem;
margin-top: 0.5rem;
gap: 0.75rem;
}
.hero-v5__trust .trust-item {
font-size: 0.875rem;
}
.pill--dot { font-size: 0.82rem; padding: 0.4rem 0.9rem; }
/* Marquee text smaller on phones */
.marquee-section { padding: 0.75rem 0; }
.marquee__item { font-size: 0.82rem; }
.marquee__track { animation-duration: 40s; gap: 1rem; }
}
/* MARQUEE — slow down on tablet */
@media (max-width: 900px) {
.marquee__track { animation-duration: 45s; }
}
/* Contain aurora blobs to prevent any horizontal scroll */
.hero-v5__aurora,
.collection-finale__aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
/* Product grid – better mobile card sizing */
@media (max-width: 768px) {
.products-v4 { padding: 3rem 1rem !important; }
.products-v4__grid {
grid-template-columns: 1fr 1fr !important;
gap: 0.75rem !important;
}
.bento-card__body { padding: 0.9rem !important; }
.bento-card__title { font-size: 1rem !important; }
.bento-card__flavor { font-size: 0.78rem !important; }
.bento-card__price { font-size: 0.95rem !important; }
.bento-card__chip { font-size: 0.75rem; }
.bento-card__meta { padding-top: 0.5rem; margin-top: 0.35rem; }
.bento-card__arrow { width: 30px; height: 30px; }
.bento-card__arrow svg { width: 14px; height: 14px; }
}
@media (max-width: 440px) {
.products-v4__grid { grid-template-columns: 1fr !important; }
.bento-card__body { padding: 1.1rem !important; }
.bento-card__title { font-size: 1.2rem !important; }
}
/* CAMPAIGN (Times Square) mobile */
@media (max-width: 768px) {
.campaign {
min-height: 420px;
padding: 3rem 1rem;
}
.campaign__content { padding: 0 1rem; }
.campaign__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
.campaign__sub { font-size: 0.95rem; }
}
/* WHY tiles */
@media (max-width: 768px) {
.why-atem { padding: 3rem 1rem; }
.why-grid {
grid-template-columns: 1fr !important;
grid-auto-rows: auto;
gap: 0.75rem;
}
.why-tile, .why-tile--lg {
grid-column: span 1 !important;
padding: 1.5rem 1.25rem;
}
.why-tile__title, .why-tile--lg .why-tile__title {
font-size: 1.25rem;
}
.why-tile__text { font-size: 0.92rem; }
}
/* STATS — 2×2 on tablet/phone */
@media (max-width: 900px) {
.stats-v4 { padding: 3rem 1rem; }
.stats-v4__inner {
grid-template-columns: 1fr 1fr;
gap: 2.5rem 1rem;
}
.stat-v4__number { font-size: clamp(2.75rem, 12vw, 4rem); }
.stat-v4__suffix { font-size: clamp(1.5rem, 5vw, 2rem); }
.stat-v4__label { font-size: 0.85rem; }
}
/* TESTIMONIALS */
@media (max-width: 900px) {
.testimonials-v4 { padding: 3rem 1rem; }
.testimonials-v4__grid {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.tcard { padding: 1.5rem 1.25rem; }
.tcard__text { font-size: 0.95rem; line-height: 1.55; }
.tcard__quote { font-size: 5rem; top: 0.5rem; right: 1rem; }
}
/* COLLECTION FINALE */
@media (max-width: 900px) {
.collection-finale {
padding: 3rem 1rem;
}
.collection-finale__inner {
grid-template-columns: 1fr !important;
gap: 2rem;
text-align: center;
}
.collection-finale__content {
justify-items: center !important;
max-width: 100% !important;
}
.collection-finale__title {
font-size: clamp(2.25rem, 9vw, 3.5rem);
}
.collection-finale__includes {
text-align: left;
max-width: 300px;
margin: 0 auto;
}
.collection-finale__price {
justify-content: center;
flex-wrap: wrap;
}
.collection-finale__price-main { font-size: 2.5rem; }
.collection-finale__actions .btn {
width: 100%;
justify-content: center;
}
}
/* FAQ */
@media (max-width: 768px) {
.faq-v5 { padding: 3rem 1rem; }
.faq-v5__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
.faq-v5__intro { font-size: 0.95rem; }
.faq-v5 .faq-item__q {
padding: 1rem 1.1rem;
font-size: 0.95rem;
}
.faq-item__qline { gap: 0.6rem; }
.faq-item__icon { width: 34px; height: 34px; border-radius: 8px; }
.faq-item__icon svg { width: 16px; height: 16px; }
.faq-v5 .faq-item__a {
padding: 0 1.1rem 1.1rem calc(1.1rem + 34px + 0.6rem);
font-size: 0.9rem;
}
.faq-v5__help {
grid-template-columns: 1fr !important;
text-align: center;
padding: 1.5rem 1.25rem !important;
gap: 1rem;
}
.faq-v5__help .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
.faq-v5 .faq-item__a {
padding: 0 1.1rem 1.1rem 1.1rem;
}
}
/* NEWSLETTER */
@media (max-width: 600px) {
.newsletter-v5 { padding: 3rem 1rem; }
.newsletter-v5__title { font-size: clamp(1.75rem, 8vw, 2.75rem); }
.newsletter-v5__sub { font-size: 0.95rem; }
.newsletter-v5__form {
flex-direction: column !important;
border-radius: 14px !important;
padding: 0.5rem !important;
gap: 0.5rem !important;
}
.newsletter-v5__form input[type="email"] {
padding: 0.75rem 1rem;
text-align: center;
}
.newsletter-v5__form button {
width: 100%;
justify-content: center;
padding: 0.85rem 1rem;
}
}
/* BUNDLE CTA */
@media (max-width: 768px) {
.bundle-cta {
grid-template-columns: 1fr !important;
padding: 1.75rem 1.25rem !important;
text-align: center;
gap: 1.25rem;
margin-top: 2.5rem !important;
}
.bundle-cta__content { justify-items: center; }
.bundle-cta__sub { text-align: center; }
.bundle-cta .btn {
width: 100%;
justify-content: center;
}
.bundle-cta__title { font-size: 1.35rem !important; }
.bundle-cta__sub { font-size: 0.9rem !important; }
}
/* HEADER — mobile refinements */
@media (max-width: 768px) {
.site-header__inner {
padding-block: 0.6rem;
gap: 0.5rem;
grid-template-columns: auto 1fr auto;
}
.site-header__logo { height: 26px !important; width: auto; }
.site-header__nav { display: none; }
.site-header__actions { gap: 0 !important; }
.icon-btn { padding: 0.6rem; }
}
/* ANNOUNCEMENT BAR mobile */
@media (max-width: 600px) {
.announcement { font-size: 0.78rem; padding: 0.5rem 1rem; }
.announcement__inner { flex-direction: column; gap: 0.2rem; }
.announcement a { font-size: 0.78rem; }
}
/* FOOTER mobile */
@media (max-width: 768px) {
.site-footer__grid {
grid-template-columns: 1fr 1fr !important;
gap: 2rem 1.5rem;
}
.site-footer__grid > div:first-child {
grid-column: span 2 !important;
}
}
@media (max-width: 440px) {
.site-footer__grid {
grid-template-columns: 1fr !important;
}
.site-footer__grid > div:first-child {
grid-column: span 1 !important;
}
.site-footer__legal {
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
}
/* PRODUCT PAGE MOBILE REFINEMENTS */
@media (max-width: 900px) {
.pdp {
padding: 1.5rem 1rem 3rem !important;
}
.pdp__inner {
gap: 1.5rem !important;
}
.pdp__title {
font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
}
.pdp__subtitle { font-size: 1rem; }
.pdp__price-main { font-size: 1.75rem; }
.pdp__cta { min-height: 48px; padding: 0.85rem 1.25rem; }
.pdp__cta-price { font-size: 0.9rem; }
.pdp__qty { width: auto; }
.pdp__qty button { width: 40px; height: 48px; }
.pdp__facts {
padding: 1.25rem 0;
}
.pdp__fact-num { font-size: 1.5rem; }
.pdp__fact-label { font-size: 0.75rem; }
}
@media (max-width: 500px) {
.pdp__thumbs { grid-template-columns: repeat(4, 1fr); }
.pdp__trust {
padding: 0.85rem;
}
.pdp__trust-item svg { width: 20px; height: 20px; }
}
/* PDP sticky CTA refinements */
@media (max-width: 768px) {
.pdp__sticky-cta-inner {
padding: 0 0.25rem;
}
.pdp__sticky-title {
font-size: 0.82rem;
line-height: 1.15;
max-width: 170px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdp__sticky-price { font-size: 0.78rem; }
.pdp__sticky-cta .btn { padding: 0.7rem 1.1rem; font-size: 0.88rem; white-space: nowrap; }
}
/* PDP reviews mobile */
@media (max-width: 900px) {
.pdp-reviews { padding: 3rem 1rem; }
.pdp-reviews__grid {
grid-template-columns: 1fr !important;
gap: 1rem;
}
.pdp-reviews__title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}
/* PDP upsell mobile */
@media (max-width: 768px) {
.pdp-upsell { padding: 2rem 1rem; }
}
/* Make buttons always tappable (44px min) */
.btn, .btn-primary, .btn-accent, .btn-on-teal, .btn-light {
min-height: 44px;
align-items: center;
}
.btn-lg { min-height: 52px; }
/* Ensure all form inputs are tap-friendly */
input, select, textarea, button {
font-size: 16px; /* Prevents iOS zoom on focus */
}
@media (max-width: 768px) {
input[type="email"], input[type="text"], input[type="search"], input[type="password"] {
font-size: 16px !important;
}
}
/* Section vertical rhythm on mobile — tighter */
@media (max-width: 768px) {
.section { padding: 3rem 1rem; }
}
/* ============================================================
STANDALONE SITE ADDITIONS — breadcrumb, mobile menu, PDP extras
============================================================ */
/* ---- Breadcrumb ---- */
.pdp-breadcrumb {
max-width: 1280px;
margin: 0 auto;
padding: 1.25rem var(--gutter) 0;
display: flex;
gap: 0.5rem;
align-items: center;
font-size: var(--fs-sm);
color: var(--fg-muted);
flex-wrap: wrap;
}
.pdp-breadcrumb a {
color: var(--fg-soft);
text-decoration: none;
transition: color 200ms var(--ease);
}
.pdp-breadcrumb a:hover { color: var(--atem-green); }
.pdp-breadcrumb span { color: var(--gray-300); }
.pdp-breadcrumb .current { color: var(--fg); font-weight: 500; }
/* ---- Mobile menu drawer ---- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 50;
pointer-events: none;
opacity: 0;
transition: opacity 250ms var(--ease);
}
.mobile-menu.open {
pointer-events: auto;
opacity: 1;
}
.mobile-menu__backdrop {
position: absolute;
inset: 0;
background: rgba(1, 42, 39, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.mobile-menu__panel {
position: absolute;
top: 0; right: 0; bottom: 0;
width: min(340px, 85vw);
background: var(--white);
padding: 5rem 2rem 2rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
transform: translateX(100%);
transition: transform 300ms var(--ease);
}
.mobile-menu.open .mobile-menu__panel { transform: translateX(0); }
.mobile-menu__panel a {
padding: 1rem 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--fg);
text-decoration: none;
border-bottom: 1px solid var(--line-soft);
transition: color 200ms var(--ease);
}
.mobile-menu__panel a:hover { color: var(--atem-green); }
.mobile-menu__close {
position: absolute;
top: 1.25rem; right: 1.5rem;
background: transparent;
border: 0;
padding: 0.5rem;
cursor: pointer;
color: var(--fg);
width: 40px; height: 40px;
display: grid; place-items: center;
}
.mobile-menu__close svg { width: 22px; height: 22px; }
/* ---- PDP: Pack selector ---- */
.pdp__option-choices--packs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.pdp__pack {
position: relative;
cursor: pointer;
}
.pdp__pack input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pdp__pack-inner {
display: grid;
gap: 0.15rem;
padding: 0.9rem 0.75rem;
border: 1.5px solid var(--line);
border-radius: var(--r-lg);
background: var(--white);
text-align: center;
transition: all 200ms var(--ease);
justify-items: center;
}
.pdp__pack:hover .pdp__pack-inner {
border-color: var(--atem-green);
}
.pdp__pack input:checked + .pdp__pack-inner,
.pdp__pack input:checked ~ .pdp__pack-inner {
border-color: var(--atem-green);
background: var(--atem-green-pale);
box-shadow: 0 2px 8px rgba(2, 73, 67, 0.08);
}
.pdp__pack--popular input:checked + .pdp__pack-inner,
.pdp__pack--popular input:checked ~ .pdp__pack-inner {
border-color: var(--atem-green);
background: var(--atem-green);
color: var(--white);
}
.pdp__pack--popular input:checked ~ .pdp__pack-inner .pdp__pack-save {
background: var(--white);
color: var(--atem-green-deep);
}
.pdp__pack-label {
font-weight: 700;
color: var(--fg);
font-size: 0.95rem;
}
.pdp__pack input:checked ~ .pdp__pack-inner .pdp__pack-label { color: inherit; }
.pdp__pack-price {
font-size: 0.82rem;
color: var(--fg-soft);
line-height: 1.2;
}
.pdp__pack input:checked ~ .pdp__pack-inner .pdp__pack-price { color: inherit; opacity: 0.9; }
.pdp__pack-price s {
opacity: 0.55;
margin-left: 0.2rem;
}
.pdp__pack-save {
background: #FFF4E0;
color: #8A5A0E;
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.03em;
margin-top: 0.25rem;
transition: all 200ms var(--ease);
}
.pdp__pack-ribbon {
position: absolute;
top: -9px; left: 50%;
transform: translateX(-50%);
background: var(--atem-green);
color: var(--white);
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
z-index: 2;
white-space: nowrap;
}
/* ---- PDP: Subscribe & save ---- */
.pdp__subscribe {
display: grid;
gap: 0.5rem;
margin: 0;
}
.pdp__sub-option {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 1.1rem;
border: 1.5px solid var(--line);
border-radius: var(--r-lg);
cursor: pointer;
background: var(--white);
transition: all 200ms var(--ease);
position: relative;
}
.pdp__sub-option:hover { border-color: var(--atem-green); }
.pdp__sub-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pdp__sub-option:has(input:checked) {
border-color: var(--atem-green);
background: var(--atem-green-pale);
}
.pdp__sub-check {
width: 22px; height: 22px;
border: 2px solid var(--line);
border-radius: 50%;
flex-shrink: 0;
margin-top: 2px;
position: relative;
transition: all 200ms var(--ease);
}
.pdp__sub-option:has(input:checked) .pdp__sub-check {
border-color: var(--atem-green);
background: var(--atem-green);
}
.pdp__sub-option:has(input:checked) .pdp__sub-check::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--white);
}
.pdp__sub-content { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.pdp__sub-title {
font-weight: 600;
color: var(--fg);
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.pdp__sub-price {
font-weight: 700;
color: var(--atem-green-deep);
font-size: 1.05rem;
}
.pdp__sub-note {
font-size: 0.82rem;
color: var(--fg-muted);
}
.pdp__sub-badge {
background: var(--atem-green);
color: var(--white);
padding: 0.15rem 0.5rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
/* ---- PDP: CTA refinements ---- */
.pdp__cta {
display: flex !important;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.pdp__cta-divider {
width: 1px;
height: 20px;
background: rgba(255, 255, 255, 0.3);
}
.pdp__cta.added {
background: #22C55E;
border-color: #22C55E;
}
/* ---- HOW IT WORKS ---- */
.how-it-works {
background: var(--white);
padding: clamp(3rem, 6vw, 5rem) var(--gutter);
border-top: 1px solid var(--line-soft);
}
.how-it-works__header {
max-width: 700px;
margin: 0 auto 3rem;
text-align: center;
display: grid;
gap: 0.75rem;
}
.how-it-works__title {
font-size: clamp(1.75rem, 4vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.03em;
margin: 0;
}
.how-steps {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
counter-reset: step;
}
.how-step {
text-align: left;
padding: 1.5rem 0;
border-top: 2px solid var(--atem-green);
position: relative;
}
.how-step__num {
font-size: 0.875rem;
font-weight: 700;
color: var(--atem-green);
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
.how-step h3 {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
}
.how-step p {
color: var(--fg-soft);
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
}
@media (max-width: 768px) {
.how-steps { grid-template-columns: 1fr; gap: 1rem; }
}
/* ---- LOVE SECTION ---- */
.love-section {
background: var(--gray-50);
padding: clamp(3rem, 6vw, 6rem) var(--gutter);
}
.love-section__inner {
max-width: 1300px;
margin: 0 auto;
}
.love-section__header {
max-width: 700px;
margin: 0 auto 3rem;
text-align: center;
display: grid;
gap: 0.75rem;
}
.love-section__title {
font-size: clamp(2rem, 4.5vw, 3rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
margin: 0;
}
.love-section__title em {
font-style: normal;
color: var(--atem-green);
}
.love-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 1rem;
}
.love-tile {
padding: 2rem;
border-radius: var(--r-xl);
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.love-tile:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(0,0,0,0.1);
}
.love-tile--img {
grid-row: span 2;
padding: 0;
overflow: hidden;
min-height: 380px;
}
.love-tile--img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms var(--ease);
}
.love-tile--img:hover img {
transform: scale(1.03);
}
.love-tile--teal {
background: linear-gradient(135deg, var(--atem-green) 0%, var(--atem-green-soft) 100%);
color: var(--white);
grid-column: span 2;
}
.love-tile--white {
background: var(--white);
color: var(--fg);
}
.love-tile h3 {
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 600;
letter-spacing: -0.02em;
margin: 0 0 0.5rem;
line-height: 1.15;
}
.love-tile p {
font-size: 0.95rem;
line-height: 1.5;
margin: 0;
opacity: 0.85;
}
@media (max-width: 900px) {
.love-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 220px auto auto auto;
}
.love-tile--img { grid-row: span 1; grid-column: span 2; min-height: 220px; }
.love-tile--teal { grid-column: span 2; }
}
@media (max-width: 560px) {
.love-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
.love-tile--img, .love-tile--teal { grid-column: span 1; }
.love-tile--img { min-height: 260px; }
.love-tile { padding: 1.5rem; }
}
/* ---- REVIEWS: summary bars ---- */
.pdp-reviews__bars {
max-width: 380px;
margin: 1rem auto 0;
display: grid;
gap: 0.4rem;
}
.pdp-reviews__bar {
display: grid;
grid-template-columns: 40px 1fr 40px;
gap: 0.75rem;
align-items: center;
font-size: var(--fs-sm);
color: var(--fg-soft);
}
.pdp-reviews__bar .bar {
height: 6px;
background: var(--gray-200);
border-radius: 999px;
overflow: hidden;
}
.pdp-reviews__bar .bar i {
display: block;
height: 100%;
background: var(--atem-green);
border-radius: 999px;
}
.pdp-reviews__grid {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
.pdp-reviews__grid { grid-template-columns: 1fr !important; }
}
/* ---- PDP mobile refinements ---- */
@media (max-width: 600px) {
.pdp-breadcrumb { padding: 1rem 1rem 0; font-size: 0.82rem; }
.pdp__option-choices--packs { grid-template-columns: 1fr; gap: 0.4rem; }
.pdp__pack-inner { padding: 0.85rem 1rem; flex-direction: row; justify-items: stretch; text-align: left; display: flex; align-items: center; justify-content: space-between; }
.pdp__pack-save { margin-top: 0; }
.pdp__pack-ribbon { left: 1rem; transform: none; }
.pdp__sub-option { padding: 0.85rem; }
}
/* ---- Cart count bubble ---- */
.cart-count {
position: absolute;
top: -4px;
right: -4px;
background: var(--atem-green);
color: var(--white);
width: 18px;
height: 18px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 0.75rem;
font-weight: 700;
line-height: 1;
}
.icon-btn { position: relative; }
/* ============================================================
V6 — PHOTO HERO + MOMENTS LIFESTYLE ROW
============================================================ */
/* ---- Hero v6: split layout, photo right, copy left over teal ---- */
.hero-v6 {
position: relative;
background: linear-gradient(165deg, #012A27 0%, #024943 50%, #0D5B54 100%);
color: var(--white);
overflow: hidden;
padding: clamp(5rem, 9vw, 7rem) var(--gutter);
min-height: clamp(620px, 90svh, 920px);
min-height: clamp(620px, 90dvh, 920px);
display: grid;
align-items: center;
}
.hero-v6__inner {
max-width: 1400px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 0.95fr;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: center;
}
.hero-v6__copy {
display: grid;
gap: clamp(1rem, 1.75vw, 1.5rem);
justify-items: start;
text-align: left;
}
.hero-v6__top { animation: fade-up 600ms var(--ease-out) 100ms both; }
.hero-v6__logo-mark { animation: fade-up 800ms var(--ease-out) 200ms both; }
.hero-v6__logo-mark img {
width: clamp(180px, 24vw, 260px);
height: auto;
display: block;
filter: drop-shadow(0 4px 30px rgba(127, 230, 212, 0.12));
}
.hero-v6__title {
font-size: clamp(2.75rem, 5.5vw, 5rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 0.98;
margin: 0;
color: var(--white);
animation: fade-up 800ms var(--ease-out) 300ms both;
}
.hero-v6__title em {
font-style: normal;
background: linear-gradient(135deg, #7FE6D4 0%, #E6EFEE 50%, #7FE6D4 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: gradient-sweep 8s linear infinite;
}
.hero-v6__sub {
font-size: clamp(1rem, 1.4vw, 1.2rem);
color: rgba(255, 255, 255, 0.78);
line-height: 1.5;
max-width: 520px;
margin: 0;
animation: fade-up 800ms var(--ease-out) 420ms both;
}
.hero-v6__actions {
display: flex;
gap: clamp(0.75rem, 1.5vw, 1.5rem);
align-items: center;
flex-wrap: wrap;
margin-top: 0.25rem;
animation: fade-up 800ms var(--ease-out) 540ms both;
}
.hero-v6__jump {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: rgba(255, 255, 255, 0.85);
font-weight: 500;
padding: 0.75rem 0.25rem;
transition: color var(--dur) var(--ease);
}
.hero-v6__jump:hover { color: var(--white); }
.hero-v6__jump svg { animation: jump-bounce 2s ease-in-out infinite; }
.hero-v6__trust {
display: flex;
gap: clamp(1rem, 2vw, 2rem);
align-items: center;
flex-wrap: wrap;
padding-top: clamp(1.5rem, 2.5vw, 2rem);
margin-top: clamp(0.5rem, 1vw, 1rem);
border-top: 1px solid rgba(255, 255, 255, 0.12);
width: 100%;
max-width: 600px;
animation: fade-up 800ms var(--ease-out) 660ms both;
}
/* Hero photo right side */
.hero-v6__photo {
position: relative;
aspect-ratio: 4 / 5;
border-radius: var(--r-2xl);
overflow: hidden;
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
animation: fade-up 1s var(--ease-out) 400ms both;
}
.hero-v6__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: photo-float 12s ease-in-out infinite;
}
@keyframes photo-float {
0%, 100% { transform: scale(1.02) translateY(0); }
50% { transform: scale(1.04) translateY(-6px); }
}
.hero-v6__photo-caption {
position: absolute;
bottom: 1.25rem;
left: 1.25rem;
}
.hero-v6__photo-tag {
display: inline-flex;
align-items: center;
padding: 0.45rem 0.85rem;
background: rgba(255, 255, 255, 0.92);
color: var(--atem-green-deep);
border-radius: 999px;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
/* Hero v6 mobile */
@media (max-width: 900px) {
.hero-v6 {
min-height: auto;
padding: clamp(5rem, 14vw, 7rem) 1.25rem clamp(3rem, 6vw, 4rem);
}
.hero-v6__inner {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.hero-v6__copy {
order: 2;
justify-items: center;
text-align: center;
}
.hero-v6__sub {
text-align: center;
margin-inline: auto;
}
.hero-v6__actions {
justify-content: center;
width: 100%;
flex-direction: column;
}
.hero-v6__actions .btn { width: 100%; justify-content: center; }
.hero-v6__trust {
justify-content: center;
margin-inline: auto;
}
.hero-v6__photo {
order: 1;
max-width: 480px;
width: 100%;
margin: 0 auto;
aspect-ratio: 4 / 5;
}
.hero-v6__title { font-size: clamp(2.25rem, 8vw, 3rem); }
}
@media (max-width: 600px) {
.hero-v6__photo { aspect-ratio: 3 / 4; max-width: 360px; }
.hero-v6__trust { gap: 0.75rem; flex-direction: column; }
.hero-v6__trust .trust-divider { display: none; }
.hero-v6__logo-mark img { width: 140px; }
}
/* ---- MOMENTS LIFESTYLE ROW ---- */
.moments {
background: var(--white);
padding: clamp(4rem, 8vw, 7rem) var(--gutter);
}
.moments__header {
max-width: 800px;
margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
text-align: center;
display: grid;
gap: 0.75rem;
}
.moments__title {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 700;
letter-spacing: -0.035em;
line-height: 1.05;
margin: 0;
color: var(--fg);
}
.moments__title em {
font-style: normal;
color: var(--atem-green);
background: linear-gradient(135deg, var(--atem-green-soft), var(--atem-green));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.moments__sub {
font-size: clamp(1rem, 1.3vw, 1.15rem);
color: var(--fg-soft);
line-height: 1.55;
max-width: 600px;
margin: 0 auto;
}
.moments__grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.moment {
position: relative;
border-radius: var(--r-xl);
overflow: hidden;
background: var(--gray-100);
transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.moment:hover {
transform: translateY(-4px);
box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.18);
}
.moment__media {
aspect-ratio: 3 / 4;
overflow: hidden;
}
.moment__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease);
}
.moment:hover .moment__media img { transform: scale(1.05); }
.moment__caption {
position: absolute;
inset: auto 0 0 0;
padding: 1.5rem 1.25rem 1.25rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
color: var(--white);
}
.moment__tag {
display: inline-block;
padding: 0.25rem 0.6rem;
background: rgba(255, 255, 255, 0.92);
color: var(--atem-green-deep);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: 0.5rem;
}
.moment__caption p {
font-size: clamp(1rem, 1.3vw, 1.2rem);
font-weight: 600;
letter-spacing: -0.015em;
margin: 0;
line-height: 1.2;
}
@media (max-width: 1000px) {
.moments__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
.moments__grid { grid-template-columns: 1fr; gap: 0.75rem; }
}
/* ---- Hide old hero-v5 stuff if it appears ---- */
.hero-v5 { display: none; }
/* ============================================================
HEADER — clean rewrite (overrides earlier fragmented styles)
============================================================ */
/* Reset and re-establish header structure */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(251, 251, 253, 0.85);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom: 1px solid transparent;
transition: background 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease);
}
.site-header.scrolled {
background: rgba(255, 255, 255, 0.96);
border-bottom-color: var(--line-soft);
}
/* Header layout: logo | nav | actions */
.site-header__inner {
max-width: 1320px;
margin: 0 auto;
padding: 0.75rem clamp(1rem, 3vw, 1.75rem);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1.5rem;
min-height: 64px;
}
/* Logo — fixed cell on the left */
.site-header__wordmark {
display: inline-flex;
align-items: center;
text-decoration: none;
justify-self: start;
}
.site-header__logo {
display: block;
height: 30px;
width: auto;
}
.site-header__logo--dark { display: block; }
.site-header__logo--light { display: none; }
/* Navigation — centered cell */
.site-header__nav {
display: flex;
gap: clamp(1.5rem, 2.5vw, 2.5rem);
align-items: center;
justify-content: center;
margin: 0;
}
.site-header__nav a {
font-size: 0.9rem;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--fg);
text-decoration: none;
position: relative;
padding: 0.4rem 0;
transition: color 200ms var(--ease);
opacity: 0.85;
}
.site-header__nav a:hover { opacity: 1; }
.site-header__nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1.5px;
background: currentColor;
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform 280ms var(--ease);
}
.site-header__nav a:hover::after { transform: scaleX(1); }
/* Actions cell — right side */
.site-header__actions {
display: flex;
gap: 0.15rem;
align-items: center;
justify-self: end;
}
.icon-btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--fg);
background: transparent;
border: 0;
cursor: pointer;
position: relative;
transition: background 200ms var(--ease), color 200ms var(--ease);
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.06); }
.icon-btn svg { width: 19px; height: 19px; stroke-width: 1.7; }
.cart-count {
position: absolute;
top: 4px;
right: 4px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--atem-green);
color: var(--white);
font-size: 12px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 0 0 2px var(--white);
transition: background 200ms var(--ease), box-shadow 200ms var(--ease), color 200ms var(--ease);
}
.cart-count:empty,
.cart-count[data-cart-count="0"] {
display: none;
}
/* Hide/show controls */
.menu-toggle { display: none; }
/* No template-index at-top header override — keep platinum at every scroll position. */
/* TABLET / MOBILE — under 900px */
@media (max-width: 900px) {
.site-header__inner {
grid-template-columns: auto 1fr auto;
padding: 0.65rem 1rem;
min-height: 56px;
gap: 0.5rem;
}
.site-header__nav { display: none; }
.menu-toggle { display: inline-flex; }
.site-header__logo { height: 26px; }
/* Hide search on mobile to keep header clean */
.site-header__actions a[aria-label="Search"] { display: none; }
/* Hide account on mobile */
.site-header__actions a[aria-label="Account"] { display: none; }
}
@media (max-width: 480px) {
.site-header__inner {
padding: 0.6rem 0.85rem;
min-height: 52px;
}
.site-header__logo { height: 24px; }
.icon-btn { width: 38px; height: 38px; }
.icon-btn svg { width: 18px; height: 18px; }
}
/* Make sure announcement bar matches the header context */
.template-index .announcement {
background: var(--atem-green-deep);
color: var(--white);
}
/* ============================================================
PRODUCT PAGE — final polish layer
============================================================ */
/* Tighter spacing on info column */
.pdp__info {
display: grid;
gap: clamp(1rem, 1.75vw, 1.5rem);
}
/* Title hierarchy */
.pdp__title {
font-size: clamp(1.875rem, 4vw, 2.75rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0;
}
.pdp__subtitle {
font-size: clamp(1rem, 1.3vw, 1.15rem);
color: var(--fg-soft);
line-height: 1.4;
margin: -0.5rem 0 0;
font-weight: 400;
}
/* Reviews row */
.pdp__reviews {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0.25rem 0 0;
font-size: 0.9rem;
}
/* Stock strip — slightly less heavy */
.pdp__shipping-strip {
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.95rem;
background: var(--atem-green-pale);
border-radius: 12px;
font-size: 0.875rem;
color: var(--atem-green-deep);
font-weight: 500;
line-height: 1.3;
}
/* Variant labels */
.pdp__option-label {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.8rem;
color: var(--fg-soft);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 500;
margin-bottom: 0.65rem;
}
.pdp__option-label strong {
color: var(--fg);
font-weight: 600;
text-transform: none;
letter-spacing: -0.005em;
font-size: 0.95rem;
}
/* Pack selector — cleaner */
.pdp__option-choices--packs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
}
.pdp__pack-inner {
display: grid;
gap: 0.2rem;
padding: 1rem 0.85rem;
border: 1.5px solid var(--line);
border-radius: 14px;
background: var(--white);
text-align: center;
transition: all 220ms var(--ease);
justify-items: center;
min-height: 88px;
}
.pdp__pack:hover .pdp__pack-inner {
border-color: var(--atem-green);
transform: translateY(-1px);
}
.pdp__pack input:checked ~ .pdp__pack-inner {
border-color: var(--atem-green);
background: var(--atem-green-pale);
box-shadow: 0 4px 12px rgba(2, 73, 67, 0.1);
}
.pdp__pack--popular input:checked ~ .pdp__pack-inner {
background: var(--atem-green);
color: var(--white);
}
.pdp__pack--popular input:checked ~ .pdp__pack-inner .pdp__pack-label,
.pdp__pack--popular input:checked ~ .pdp__pack-inner .pdp__pack-price {
color: var(--white);
}
.pdp__pack--popular input:checked ~ .pdp__pack-inner .pdp__pack-save {
background: var(--white);
color: var(--atem-green-deep);
}
/* Subscribe & save — cleaner active state without :has() if possible */
.pdp__sub-option {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 1rem 1.1rem;
border: 1.5px solid var(--line);
border-radius: 14px;
cursor: pointer;
background: var(--white);
transition: all 200ms var(--ease);
position: relative;
}
.pdp__sub-option:hover {
border-color: var(--atem-green);
}
/* Use input:checked + sibling pattern as fallback for :has() */
.pdp__sub-option input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pdp__sub-check {
width: 22px;
height: 22px;
border: 2px solid var(--line);
border-radius: 50%;
flex-shrink: 0;
margin-top: 1px;
position: relative;
transition: all 200ms var(--ease);
background: var(--white);
}
.pdp__sub-option input:checked ~ .pdp__sub-check {
border-color: var(--atem-green);
background: var(--atem-green);
}
.pdp__sub-option input:checked ~ .pdp__sub-check::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: var(--white);
}
.pdp__sub-option:has(input:checked) {
border-color: var(--atem-green);
background: var(--atem-green-pale);
}
/* Purchase row — better proportions */
.pdp__purchase {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem;
margin-top: 0.25rem;
}
.pdp__qty {
display: inline-flex;
align-items: center;
border: 1.5px solid var(--line);
border-radius: 999px;
overflow: hidden;
background: var(--white);
}
.pdp__qty button {
background: transparent;
border: 0;
width: 42px;
height: 52px;
font-size: 1.25rem;
color: var(--fg);
cursor: pointer;
transition: background 200ms var(--ease);
display: grid;
place-items: center;
}
.pdp__qty button:hover { background: var(--gray-100); }
.pdp__qty input {
width: 38px;
text-align: center;
border: 0;
background: transparent;
font-size: 1rem;
font-weight: 600;
color: var(--fg);
appearance: textfield;
-moz-appearance: textfield;
}
/* CTA button polish */
.pdp__cta {
min-height: 52px;
font-weight: 600;
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 0.9rem 1.5rem;
white-space: nowrap;
}
.pdp__cta:disabled,
.pdp__cta[disabled] {
background: var(--gray-300);
color: var(--fg-muted);
cursor: not-allowed;
transform: none !important;
box-shadow: none;
}
.pdp__cta-divider {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, 0.3);
}
.pdp__cta-text { letter-spacing: -0.005em; }
.pdp__cta-price {
font-weight: 700;
letter-spacing: -0.01em;
}
.pdp__cta.added {
background: #22C55E !important;
border-color: #22C55E !important;
color: var(--white) !important;
}
/* Trust row */
.pdp__trust {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
padding: 0.95rem;
background: var(--gray-50);
border-radius: 14px;
margin-top: 0.25rem;
}
.pdp__trust-item {
display: flex;
align-items: center;
gap: 0.55rem;
min-width: 0;
}
.pdp__trust-item svg {
color: var(--atem-green);
width: 22px;
height: 22px;
flex-shrink: 0;
}
.pdp__trust-item strong {
font-size: 0.78rem;
font-weight: 700;
color: var(--fg);
line-height: 1.1;
display: block;
}
.pdp__trust-item span {
font-size: 0.75rem;
color: var(--fg-muted);
line-height: 1.2;
}
/* Facts band — softer */
.pdp__facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--line-soft);
border-bottom: 1px solid var(--line-soft);
text-align: center;
margin-top: 0.5rem;
}
.pdp__fact-num {
font-size: clamp(1.5rem, 2.5vw, 1.875rem);
font-weight: 700;
color: var(--atem-green);
letter-spacing: -0.025em;
line-height: 1;
}
.pdp__fact-label {
font-size: 0.75rem;
color: var(--fg-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: 0.4rem;
font-weight: 500;
line-height: 1.3;
}
/* Accordion polish */
.pdp__accordion .faq-item__a {
font-size: 0.92rem;
line-height: 1.6;
color: var(--fg-soft);
}
.pdp__accordion .faq-item__a p {
margin: 0 0 0.5rem;
}
.pdp__accordion .faq-item__a p:last-child { margin: 0; }
/* Sticky CTA refinement */
.pdp__sticky-cta {
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-top: 1px solid var(--line);
padding: 0.65rem 0.75rem;
padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0));
}
.pdp__sticky-cta-inner {
max-width: 600px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: center;
}
.pdp__sticky-info { min-width: 0; }
.pdp__sticky-title {
font-size: 0.85rem;
font-weight: 600;
color: var(--fg);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdp__sticky-price {
font-size: 0.8rem;
color: var(--fg-soft);
font-weight: 600;
margin-top: 0.1rem;
}
.pdp__sticky-cta .btn {
padding: 0.7rem 1.1rem;
font-size: 0.9rem;
white-space: nowrap;
min-height: 42px;
}
/* Mobile PDP refinements */
@media (max-width: 900px) {
.pdp { padding: 1.25rem 1rem 3rem; }
.pdp__inner { gap: 1.5rem; }
.pdp__title { font-size: clamp(1.625rem, 6vw, 2rem); }
.pdp__subtitle { font-size: 0.95rem; margin-top: -0.25rem; }
.pdp__price-main { font-size: 1.625rem; }
.pdp__shipping-strip { font-size: 0.82rem; padding: 0.6rem 0.85rem; }
.pdp__qty button { width: 38px; height: 48px; }
.pdp__cta { min-height: 50px; padding: 0.8rem 1.1rem; }
.pdp__cta-price { font-size: 0.95rem; }
.pdp__fact-num { font-size: 1.4rem; }
.pdp__fact-label { font-size: 0.75rem; }
}
@media (max-width: 600px) {
.pdp__option-choices--packs {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.pdp__pack-inner {
flex-direction: row;
display: flex;
align-items: center;
justify-content: space-between;
text-align: left;
min-height: 0;
padding: 0.85rem 1rem;
}
.pdp__pack-save { margin: 0; }
.pdp__pack-ribbon { left: 1rem; transform: none; top: -10px; }
.pdp__trust {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 0.85rem;
}
.pdp__trust-item strong { font-size: 0.85rem; }
.pdp__trust-item span { font-size: 0.75rem; }
}
@media (max-width: 500px) {
.pdp__thumbs { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
}
/* Breadcrumb mobile */
@media (max-width: 600px) {
.pdp-breadcrumb {
padding: 0.85rem 1rem 0;
font-size: 0.8rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.pdp-breadcrumb .current {
overflow: hidden;
text-overflow: ellipsis;
max-width: 200px;
display: inline-block;
vertical-align: middle;
}
}
/* Reviews mobile */
@media (max-width: 900px) {
.pdp-reviews { padding: 2.5rem 1rem; }
.pdp-reviews__title { font-size: clamp(1.625rem, 6vw, 2.25rem); }
.pdp-reviews__bars { max-width: 320px; }
.pdp-reviews__bar { font-size: 0.82rem; }
}
/* How it works mobile */
@media (max-width: 768px) {
.how-it-works { padding: 2.5rem 1rem; }
.how-it-works__title { font-size: clamp(1.625rem, 6vw, 2.25rem); }
.how-step { padding: 1rem 0; }
.how-step h3 { font-size: 1.25rem; }
.how-step p { font-size: 0.92rem; }
}
/* Love section mobile */
@media (max-width: 768px) {
.love-section { padding: 2.5rem 1rem; }
.love-section__title { font-size: clamp(1.75rem, 6vw, 2.5rem); }
.love-tile { padding: 1.5rem; }
.love-tile h3 { font-size: 1.2rem; }
.love-tile p { font-size: 0.9rem; }
}
/* PDP upsell mobile */
@media (max-width: 768px) {
.pdp-upsell { padding: 2rem 1rem 3rem; }
}
/* ============================================================
v7 — AMEX PREMIUM AESTHETIC
Dark / gold / silver / serif. Override layer.
============================================================ */
:root {
/* AMEX-inspired palette — SILVER-DOMINANT v2 */
--v7-bg: #E8E8E6; /* platinum base */
--v7-bg-soft: #DCDDDA; /* slightly cooler platinum */
--v7-bg-elev: #F2F2F0; /* elevated surface (cards) */
--v7-bg-deep: #1A1A1A; /* charcoal accent — used for ticker, contrast bands */
--v7-line: rgba(15,15,15,0.10);
--v7-line-mid: rgba(15,15,15,0.18);
--v7-line-strong: rgba(15,15,15,0.32);
--v7-fg: #14140F; /* near-black foreground */
--v7-fg-soft: rgba(20,20,15,0.72);
--v7-fg-muted: rgba(20,20,15,0.5);
/* On-dark text variants (used inside dark sections) */
--v7-on-dark: #F5F4F0;
--v7-on-dark-soft: rgba(245,244,240,0.72);
--v7-on-dark-muted: rgba(245,244,240,0.5);
/* Gold — AMEX Centurion-inspired */
--gold: #B8924A; /* slightly deeper for legibility on light bg */
--gold-soft: #C9A96E;
--gold-deep: #8E7236;
--gold-grad: linear-gradient(135deg, #A8823A 0%, #D4B985 30%, #B8924A 60%, #7E6226 100%);
/* Silver — Platinum-inspired */
--silver: #C8CACC;
--silver-deep: #8C8E91;
--silver-darker: #6E7074;
--silver-grad: linear-gradient(135deg, #B6B8BA 0%, #E8EAEC 35%, #C8CACC 65%, #8C8E91 100%);
/* Status */
--status-live: #8E7236;
--status-low: #B88300;
--status-out: #6E6E73;
}
/* Serif typography */
.serif,
.serif-italic {
font-family: 'Cormorant Garamond', 'Playfair Display', 'EB Garamond', Georgia, serif;
font-weight: 500;
}
.serif-italic { font-style: italic; }
/* Add Cormorant from Google Fonts via @import (will be ignored if already loaded) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');
/* Gold/silver text */
.gold-text {
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.kicker {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--v7-fg-muted);
}
.kicker--gold { color: var(--gold); }
/* AMEX-style buttons */
.btn-amex {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 1.6rem;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: all 280ms var(--ease);
border: 1px solid transparent;
white-space: nowrap;
}
.btn-amex--primary {
background: var(--v7-fg);
color: var(--v7-bg);
}
.btn-amex--primary:hover {
background: var(--gold);
color: var(--v7-bg);
transform: translateY(-1px);
}
.btn-amex--gold {
background: var(--gold-grad);
color: var(--v7-bg);
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 8px 28px -8px rgba(201, 169, 110, 0.5);
}
.btn-amex--gold:hover {
transform: translateY(-1px);
box-shadow: 0 12px 32px -6px rgba(201, 169, 110, 0.6);
filter: brightness(1.05);
}
.btn-amex--ghost {
background: transparent;
color: var(--v7-fg);
border: 1px solid var(--v7-line-mid);
}
.btn-amex--ghost:hover {
border-color: var(--v7-line-strong);
background: rgba(255,255,255,0.04);
}
.btn-amex--lg {
padding: 1.1rem 2rem;
font-size: 0.9rem;
}
/* ============ HERO V7 ============ */
.hero-v7 {
position: relative;
min-height: clamp(720px, 100svh, 1000px);
min-height: clamp(720px, 100dvh, 1000px);
background: var(--v7-bg);
color: var(--v7-fg);
overflow: hidden;
display: grid;
align-items: end;
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 6vw, 5rem);
}
.hero-v7__media {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-v7__bg {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.6) contrast(1.05) brightness(0.55);
animation: hero-zoom 20s ease-in-out infinite alternate;
}
@keyframes hero-zoom {
from { transform: scale(1.0); }
to { transform: scale(1.06); }
}
.hero-v7__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.2) 30%, rgba(10,10,10,0.95) 90%),
linear-gradient(90deg, rgba(10,10,10,0.6) 0%, transparent 50%);
}
.hero-v7__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
width: 100%;
display: grid;
gap: clamp(1.5rem, 2.5vw, 2.25rem);
justify-items: start;
}
.hero-v7__top { animation: fade-up 700ms var(--ease-out) 100ms both; }
.member-pill {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 1rem 0.5rem 0.85rem;
background: rgba(255,255,255,0.06);
border: 1px solid var(--v7-line-mid);
border-radius: 999px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.member-pill__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 12px var(--gold), 0 0 0 4px rgba(201,169,110,0.15);
animation: gold-pulse 3s ease-in-out infinite;
}
@keyframes gold-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.member-pill__text {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-soft);
}
.hero-v7__brand {
display: flex;
align-items: center;
gap: 1.5rem;
animation: fade-up 800ms var(--ease-out) 200ms both;
}
.hero-v7__monogram {
width: 64px;
height: 64px;
display: grid;
place-items: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.5rem;
font-style: italic;
font-weight: 500;
color: var(--v7-bg);
background: var(--gold-grad);
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 12px 28px -8px rgba(201,169,110,0.5);
}
.hero-v7__wordmark img {
height: 36px;
width: auto;
display: block;
opacity: 0.94;
}
.hero-v7__title {
font-size: clamp(2.75rem, 7vw, 6rem);
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.025em;
margin: 0;
color: var(--v7-fg);
display: grid;
gap: 0.1em;
animation: fade-up 900ms var(--ease-out) 350ms both;
}
.hero-v7__title .serif-italic {
color: var(--gold-soft);
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.hero-v7__sub {
max-width: 580px;
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
line-height: 1.55;
color: var(--v7-fg-soft);
margin: 0;
font-weight: 300;
animation: fade-up 900ms var(--ease-out) 480ms both;
}
.hero-v7__actions {
display: flex;
gap: 0.85rem;
flex-wrap: wrap;
animation: fade-up 900ms var(--ease-out) 600ms both;
}
.hero-v7__meta {
display: flex;
gap: clamp(1rem, 2vw, 2rem);
align-items: center;
flex-wrap: wrap;
padding-top: clamp(1.25rem, 2vw, 1.75rem);
border-top: 1px solid var(--v7-line);
width: 100%;
max-width: 600px;
margin-top: clamp(0.75rem, 1.5vw, 1rem);
animation: fade-up 900ms var(--ease-out) 720ms both;
}
.hero-v7__meta-item {
display: grid;
gap: 0.25rem;
}
.hero-v7__meta-divider {
width: 1px;
height: 28px;
background: var(--v7-line);
}
.meta-label {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--v7-fg-muted);
}
.meta-value {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.15rem;
color: var(--gold-soft);
font-style: italic;
font-weight: 500;
}
.hero-v7__scroll {
position: absolute;
bottom: 1.5rem;
right: clamp(1.25rem, 4vw, 3rem);
display: grid;
gap: 0.5rem;
justify-items: end;
z-index: 1;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--v7-fg-muted);
}
.hero-v7__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, var(--gold), transparent);
animation: scroll-cue 2.5s ease-in-out infinite;
}
/* ============ TICKER ============ */
.ticker {
background: var(--v7-bg-soft);
border-top: 1px solid var(--v7-line);
border-bottom: 1px solid var(--v7-line);
overflow: hidden;
padding: 1.1rem 0;
}
.ticker__track {
display: inline-flex;
align-items: center;
gap: 2rem;
white-space: nowrap;
animation: marquee 60s linear infinite;
padding-left: 2rem;
}
.ticker__item {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--v7-fg-soft);
}
.ticker__sep {
color: var(--gold);
font-size: 0.75rem;
}
/* ============ TEASE — coming soon ============ */
.tease {
background: var(--v7-bg);
color: var(--v7-fg);
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem);
text-align: center;
position: relative;
overflow: hidden;
}
.tease::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201,169,110,0.10) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 50% 100%, rgba(201,169,110,0.06) 0%, transparent 60%);
pointer-events: none;
}
.tease__inner {
position: relative;
max-width: 720px;
margin: 0 auto;
display: grid;
gap: 1.5rem;
justify-items: center;
}
.tease__eyebrow {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.tease__title {
font-size: clamp(2.25rem, 5.5vw, 4.5rem);
line-height: 1.0;
letter-spacing: -0.02em;
margin: 0;
font-weight: 500;
}
.tease__title .serif-italic {
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.tease__sub {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
color: var(--v7-fg-soft);
line-height: 1.55;
max-width: 580px;
font-weight: 300;
margin: 0;
}
.tease__form {
width: 100%;
max-width: 520px;
display: grid;
gap: 1rem;
margin-top: 1rem;
}
.tease__form-row {
display: flex;
gap: 0.5rem;
background: rgba(255,255,255,0.04);
border: 1px solid var(--v7-line-mid);
border-radius: 999px;
padding: 0.4rem;
transition: border-color 280ms var(--ease);
}
.tease__form-row:focus-within {
border-color: var(--gold);
}
.tease__form-row input {
flex: 1;
background: transparent;
border: 0;
padding: 0.85rem 1.25rem;
color: var(--v7-fg);
font-size: 0.95rem;
outline: none;
}
.tease__form-row input::placeholder {
color: var(--v7-fg-muted);
}
.tease__counter {
position: relative;
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
}
.tease__counter-fill {
position: absolute;
inset: 0 auto 0 0;
background: var(--gold-grad);
border-radius: 999px;
box-shadow: 0 0 12px rgba(201,169,110,0.4);
animation: counter-fill 1.6s var(--ease-out) 800ms both;
}
@keyframes counter-fill {
from { width: 0; }
}
.tease__counter-label {
display: block;
margin-top: 0.85rem;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: var(--v7-fg-muted);
font-weight: 400;
}
/* ============ PRODUCT GRID V7 ============ */
.grid-v7 {
background: var(--v7-bg-soft);
color: var(--v7-fg);
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem);
}
.grid-v7__header {
max-width: 800px;
margin: 0 auto clamp(3rem, 5vw, 4rem);
text-align: center;
display: grid;
gap: 1rem;
justify-items: center;
}
.grid-v7__title {
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 500;
line-height: 1.0;
letter-spacing: -0.025em;
margin: 0;
}
.grid-v7__title .serif-italic {
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.grid-v7__sub {
font-size: 0.98rem;
color: var(--v7-fg-soft);
line-height: 1.55;
max-width: 560px;
font-weight: 300;
margin: 0;
}
.grid-v7__cards {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.card-v7 {
display: block;
background: var(--v7-bg-elev);
border: 1px solid var(--v7-line);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: var(--v7-fg);
transition: transform 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease);
position: relative;
}
.card-v7:hover {
transform: translateY(-4px);
border-color: rgba(201,169,110,0.3);
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(201,169,110,0.15);
}
.card-v7__media {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: var(--v7-bg);
}
.card-v7__img,
.card-v7__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.85);
transition: opacity 600ms var(--ease-out);
}
.card-v7__img { opacity: 1; z-index: 1; }
.card-v7__video { opacity: 0; z-index: 2; }
.card-v7:hover .card-v7__img { opacity: 0; }
.card-v7:hover .card-v7__video { opacity: 1; }
.card-v7__status {
position: absolute;
top: 0.85rem;
right: 0.85rem;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.7rem;
background: rgba(10,10,10,0.7);
backdrop-filter: blur(12px);
border: 1px solid var(--v7-line-mid);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--v7-fg);
}
.status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.status-dot--live {
background: var(--status-live);
box-shadow: 0 0 8px var(--status-live);
animation: gold-pulse 2.5s ease-in-out infinite;
}
.status-dot--low {
background: var(--status-low);
box-shadow: 0 0 8px var(--status-low);
animation: gold-pulse 1.5s ease-in-out infinite;
}
.status-dot--out {
background: var(--status-out);
}
.card-v7__body {
padding: 1.4rem 1.25rem 1.25rem;
border-top: 1px solid var(--v7-line);
display: grid;
gap: 0.4rem;
}
.card-v7__edition {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold-soft);
}
.card-v7__name {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.5rem;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.05;
margin: 0;
color: var(--v7-fg);
}
.card-v7__flavor {
font-size: 0.85rem;
color: var(--v7-fg-soft);
margin: 0;
font-weight: 300;
}
.card-v7__foot {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.6rem;
padding-top: 0.85rem;
border-top: 1px solid var(--v7-line);
}
.card-v7__price {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.25rem;
font-style: italic;
font-weight: 500;
color: var(--gold-soft);
}
.card-v7__arrow {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: 1px solid var(--v7-line-mid);
color: var(--v7-fg-soft);
transition: all 280ms var(--ease);
}
.card-v7:hover .card-v7__arrow {
background: var(--gold);
border-color: var(--gold);
color: var(--v7-bg);
transform: translateX(3px);
}
.grid-v7__note {
max-width: 1320px;
margin: clamp(2.5rem, 4vw, 3.5rem) auto 0;
display: flex;
align-items: center;
gap: 1.25rem;
justify-content: center;
}
.grid-v7__note-line {
flex: 1;
max-width: 240px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--v7-line-mid), transparent);
}
.grid-v7__note span {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.05rem;
color: var(--gold-soft);
white-space: nowrap;
}
/* ============ MANIFESTO ============ */
.manifesto {
position: relative;
min-height: clamp(560px, 85svh, 850px);
background: var(--v7-bg);
color: var(--v7-fg);
display: grid;
align-items: center;
overflow: hidden;
}
.manifesto__media {
position: absolute;
inset: 0;
z-index: 0;
}
.manifesto__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.55) contrast(1.05) brightness(0.5);
will-change: transform;
}
.manifesto__scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.3) 50%, rgba(10,10,10,0.85) 100%),
radial-gradient(ellipse at 50% 50%, transparent 0%, rgba(10,10,10,0.6) 100%);
}
.manifesto__content {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
text-align: center;
padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
display: grid;
gap: 1.5rem;
justify-items: center;
}
.manifesto__title {
font-size: clamp(2.5rem, 7vw, 6rem);
font-weight: 500;
line-height: 0.98;
letter-spacing: -0.025em;
margin: 0;
}
.manifesto__text {
font-size: clamp(1rem, 1.3vw, 1.18rem);
color: var(--v7-fg-soft);
line-height: 1.6;
max-width: 620px;
font-weight: 300;
margin: 0;
}
/* ============ MOMENTS V7 ============ */
.moments-v7 {
background: var(--v7-bg-soft);
color: var(--v7-fg);
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem);
}
.moments-v7__header {
max-width: 900px;
margin: 0 auto clamp(3rem, 5vw, 4rem);
text-align: center;
display: grid;
gap: 1rem;
justify-items: center;
}
.moments-v7__title {
font-size: clamp(2.25rem, 5.5vw, 4.25rem);
font-weight: 500;
line-height: 1.0;
letter-spacing: -0.02em;
margin: 0;
}
.moments-v7__grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.moment-v7 {
position: relative;
border-radius: 12px;
overflow: hidden;
background: var(--v7-bg-elev);
transition: transform 400ms var(--ease);
}
.moment-v7:hover { transform: translateY(-4px); }
.moment-v7__media {
aspect-ratio: 3 / 4;
overflow: hidden;
}
.moment-v7__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.7) contrast(1.05) brightness(0.85);
transition: transform 600ms var(--ease), filter 400ms var(--ease);
}
.moment-v7:hover .moment-v7__media img {
transform: scale(1.06);
filter: saturate(0.85) contrast(1.05) brightness(0.95);
}
.moment-v7__caption {
position: absolute;
inset: auto 0 0 0;
padding: 1.5rem 1.25rem 1.25rem;
background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, transparent 100%);
color: var(--v7-fg);
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.moment-v7__num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.15rem;
color: var(--gold-soft);
}
.moment-v7__label {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.1rem;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--v7-fg);
}
/* ============ STATS V7 ============ */
.stats-v7 {
background: var(--v7-bg);
color: var(--v7-fg);
padding: clamp(4rem, 8vw, 6rem) clamp(1.25rem, 4vw, 3rem);
border-top: 1px solid var(--v7-line);
border-bottom: 1px solid var(--v7-line);
}
.stats-v7__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(1rem, 3vw, 3rem);
text-align: center;
}
.stat-v7 {
display: grid;
gap: 0.5rem;
justify-items: center;
}
.stat-v7__num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(3rem, 7vw, 5.5rem);
font-weight: 500;
letter-spacing: -0.03em;
line-height: 1;
}
.stat-v7__lbl {
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--v7-fg-muted);
font-weight: 500;
}
/* ============ TESTIMONIALS V7 ============ */
.testimonials-v7 {
background: var(--v7-bg-soft);
color: var(--v7-fg);
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem);
}
.testimonials-v7__header {
max-width: 800px;
margin: 0 auto clamp(3rem, 5vw, 4rem);
text-align: center;
display: grid;
gap: 1rem;
justify-items: center;
}
.testimonials-v7__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
margin: 0;
}
.testimonials-v7__grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.quote-v7 {
background: var(--v7-bg-elev);
border: 1px solid var(--v7-line);
border-radius: 14px;
padding: 2rem 1.75rem;
position: relative;
display: grid;
gap: 1.25rem;
transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.quote-v7:hover {
border-color: rgba(201,169,110,0.25);
transform: translateY(-3px);
}
.quote-v7__mark {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 4.5rem;
line-height: 0.6;
color: var(--gold);
opacity: 0.5;
}
.quote-v7 blockquote {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.45;
color: var(--v7-fg);
margin: 0;
}
.quote-v7 footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--v7-line);
}
.quote-v7__author {
font-size: 0.92rem;
font-weight: 500;
color: var(--v7-fg);
}
.quote-v7__loc {
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold-soft);
margin-top: 0.25rem;
}
/* ============ FINALE V7 ============ */
.finale-v7 {
background: var(--v7-bg);
color: var(--v7-fg);
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem);
position: relative;
overflow: hidden;
}
.finale-v7::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 50% at 0% 50%, rgba(201,169,110,0.08) 0%, transparent 50%),
radial-gradient(ellipse 40% 40% at 100% 100%, rgba(201,169,110,0.05) 0%, transparent 50%);
pointer-events: none;
}
.finale-v7__inner {
position: relative;
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.finale-v7__content {
display: grid;
gap: 1.5rem;
max-width: 540px;
}
.finale-v7__title {
font-size: clamp(2.5rem, 6.5vw, 5rem);
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.025em;
margin: 0;
}
.finale-v7__text {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
line-height: 1.55;
color: var(--v7-fg-soft);
font-weight: 300;
margin: 0;
}
.finale-v7__includes {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: grid;
gap: 0.65rem;
}
.finale-v7__includes li {
display: flex;
align-items: center;
gap: 0.85rem;
font-size: 0.92rem;
color: var(--v7-fg-soft);
}
.finale-v7__bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--gold);
flex-shrink: 0;
box-shadow: 0 0 8px rgba(201,169,110,0.6);
}
.finale-v7__price {
display: flex;
align-items: baseline;
gap: 0.85rem;
flex-wrap: wrap;
padding: 1rem 0;
border-top: 1px solid var(--v7-line);
border-bottom: 1px solid var(--v7-line);
}
.finale-v7__price-main {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 500;
background: var(--gold-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
letter-spacing: -0.01em;
line-height: 1;
}
.finale-v7__price-sep {
color: var(--v7-fg-muted);
font-size: 1.5rem;
font-weight: 300;
}
.finale-v7__price-compare {
font-size: 0.85rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--v7-fg-muted);
}
.finale-v7__cta-row { margin-top: 0.5rem; }
.finale-v7__micro {
font-size: 0.78rem;
color: var(--v7-fg-muted);
letter-spacing: 0.04em;
margin: 0.5rem 0 0;
}
.finale-v7__media {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--v7-line-mid);
display: block;
transition: transform 600ms var(--ease);
}
.finale-v7__media:hover { transform: translateY(-4px); }
.finale-v7__media img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(0.8);
}
.finale-v7__media-tag {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.4rem 0.85rem;
background: var(--gold-grad);
color: var(--v7-bg);
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* ============ FAQ V7 ============ */
.faq-v7 {
background: var(--v7-bg-soft);
color: var(--v7-fg);
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem);
}
.faq-v7__inner {
max-width: 880px;
margin: 0 auto;
}
.faq-v7__header {
text-align: center;
display: grid;
gap: 1rem;
justify-items: center;
margin-bottom: clamp(3rem, 5vw, 4rem);
}
.faq-v7__title {
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
margin: 0;
}
.faq-v7__list { display: grid; gap: 0; }
.qa {
border-bottom: 1px solid var(--v7-line);
transition: background 280ms var(--ease);
}
.qa:first-child { border-top: 1px solid var(--v7-line); }
.qa[open] {
background: rgba(255,255,255,0.02);
}
.qa summary {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 0.5rem;
cursor: pointer;
list-style: none;
transition: color 200ms var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa[open] summary { color: var(--gold-soft); }
.qa__num {
font-family: 'Cormorant Garamond', Georgia, serif;
font-style: italic;
font-size: 1.05rem;
color: var(--gold-soft);
font-weight: 500;
}
.qa__q {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.15rem, 1.6vw, 1.35rem);
font-weight: 500;
letter-spacing: -0.005em;
line-height: 1.3;
}
.qa__plus {
position: relative;
width: 16px;
height: 16px;
flex-shrink: 0;
}
.qa__plus::before,
.qa__plus::after {
content: "";
position: absolute;
background: currentColor;
transition: transform 280ms var(--ease);
}
.qa__plus::before {
width: 100%;
height: 1.5px;
top: 50%;
left: 0;
margin-top: -0.75px;
}
.qa__plus::after {
width: 1.5px;
height: 100%;
left: 50%;
top: 0;
margin-left: -0.75px;
}
.qa[open] .qa__plus::after { transform: rotate(90deg); }
.qa__a {
padding: 0 0.5rem 1.5rem calc(0.5rem + 1.05rem + 1.25rem);
font-size: 0.95rem;
line-height: 1.65;
color: var(--v7-fg-soft);
font-weight: 300;
animation: fade-up 400ms ease-out;
}
/* ============ WAITLIST V7 ============ */
.waitlist-v7 {
background: var(--v7-bg);
color: var(--v7-fg);
padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 4vw, 3rem) clamp(7rem, 12vw, 10rem);
text-align: center;
position: relative;
overflow: hidden;
border-top: 1px solid var(--v7-line);
}
.waitlist-v7::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201,169,110,0.12) 0%, transparent 60%);
pointer-events: none;
}
.waitlist-v7__inner {
position: relative;
max-width: 600px;
margin: 0 auto;
display: grid;
gap: 1.5rem;
justify-items: center;
}
.waitlist-v7__monogram {
width: 56px;
height: 56px;
display: grid;
place-items: center;
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.25rem;
font-style: italic;
font-weight: 500;
color: var(--v7-bg);
background: var(--gold-grad);
border-radius: 50%;
box-shadow: 0 12px 32px -8px rgba(201,169,110,0.5);
margin-bottom: 0.5rem;
}
.hero-v7__monogram,
.waitlist-v7__monogram { line-height: 1; }
.waitlist-v7__title {
font-size: clamp(2.25rem, 5vw, 4rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
margin: 0;
}
.waitlist-v7__sub {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
color: var(--v7-fg-soft);
line-height: 1.55;
font-weight: 300;
margin: 0;
max-width: 480px;
}
.waitlist-v7__form {
width: 100%;
max-width: 480px;
display: flex;
gap: 0.5rem;
background: rgba(255,255,255,0.04);
border: 1px solid var(--v7-line-mid);
border-radius: 999px;
padding: 0.4rem;
transition: border-color 280ms var(--ease);
}
.waitlist-v7__form:focus-within { border-color: var(--gold); }
.waitlist-v7__form input {
flex: 1;
background: transparent;
border: 0;
padding: 0.85rem 1.25rem;
color: var(--v7-fg);
font-size: 0.95rem;
outline: none;
}
.waitlist-v7__form input::placeholder { color: var(--v7-fg-muted); }
.waitlist-v7__fine {
font-size: 0.78rem;
color: var(--v7-fg-muted);
margin-top: 0.5rem;
}
/* ============ MOBILE ============ */
@media (max-width: 1000px) {
.grid-v7__cards,
.moments-v7__grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.stats-v7__inner {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem 1rem;
}
.testimonials-v7__grid {
grid-template-columns: 1fr;
}
.finale-v7__inner {
grid-template-columns: 1fr;
text-align: center;
}
.finale-v7__content {
max-width: 540px;
margin: 0 auto;
justify-items: center;
}
.finale-v7__includes { text-align: left; }
}
@media (max-width: 600px) {
.hero-v7 {
padding-top: 6rem;
align-items: end;
}
.hero-v7__brand { gap: 1rem; }
.hero-v7__monogram { width: 48px; height: 48px; font-size: 2rem; }
.hero-v7__wordmark img { height: 26px; }
.hero-v7__title { font-size: clamp(2.25rem, 10vw, 3.25rem); }
.hero-v7__meta {
gap: 1rem;
}
.hero-v7__meta-divider { display: none; }
.hero-v7__actions { flex-direction: column; width: 100%; }
.hero-v7__actions .btn-amex { width: 100%; justify-content: center; }
.hero-v7__scroll { display: none; }
.ticker__item { font-size: 0.75rem; }
.grid-v7__cards { grid-template-columns: 1fr; }
.moments-v7__grid { grid-template-columns: 1fr 1fr; }
.qa summary { grid-template-columns: auto 1fr auto; gap: 0.85rem; padding: 1.25rem 0.25rem; }
.qa__a { padding-left: 1.75rem; padding-right: 0.25rem; }
.tease__form-row {
flex-direction: column;
border-radius: 14px;
padding: 0.4rem;
gap: 0.4rem;
}
.tease__form-row input { padding: 0.85rem 1rem; text-align: center; }
.tease__form-row .btn-amex { width: 100%; justify-content: center; }
.waitlist-v7__form {
flex-direction: column;
border-radius: 14px;
gap: 0.4rem;
}
.waitlist-v7__form input { padding: 0.85rem 1rem; text-align: center; }
.waitlist-v7__form .btn-amex { width: 100%; justify-content: center; }
}
/* ============ HEADER OVERRIDE FOR DARK SITE ============ */
.template-index .site-header {
background: rgba(10, 10, 10, 0.7);
backdrop-filter: saturate(160%) blur(20px);
-webkit-backdrop-filter: saturate(160%) blur(20px);
border-bottom-color: var(--v7-line);
}
.template-index .site-header.scrolled {
background: rgba(10, 10, 10, 0.92);
border-bottom-color: var(--v7-line);
}
.template-index .site-header__nav a,
.template-index .site-header .icon-btn {
color: var(--v7-fg);
}
.template-index .site-header__logo--dark { display: none !important; }
.template-index .site-header__logo--light { display: block !important; }
.template-index .site-header .icon-btn:hover {
background: rgba(255, 255, 255, 0.06);
}
.template-index .site-header .cart-count {
background: var(--gold);
color: var(--v7-bg);
box-shadow: 0 0 0 2px var(--v7-bg);
}
.template-index .announcement {
background: var(--v7-bg);
color: var(--gold-soft);
border-bottom: 1px solid var(--v7-line);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 500;
}
/* ============ FOOTER OVERRIDE ============ */
.template-index .site-footer,
body.template-index .site-footer {
background: var(--v7-bg);
color: var(--v7-fg);
border-top: 1px solid var(--v7-line);
}
.template-index .site-footer * { color: inherit; }
.template-index .site-footer a {
color: var(--v7-fg-soft);
transition: color 200ms var(--ease);
}
.template-index .site-footer a:hover {
color: var(--gold);
}
.template-index .site-footer__heading {
color: var(--gold-soft);
letter-spacing: 0.14em;
}
.template-index .site-footer__legal {
border-top-color: var(--v7-line);
color: var(--v7-fg-muted);
}
/* Hide previous-version sections that would conflict */
.template-index .hero-v5,
.template-index .hero-v6,
.template-index .marquee-section,
.template-index .products-v4,
.template-index .moments,
.template-index .campaign,
.template-index .why-atem,
.template-index .stats-v4,
.template-index .testimonials-v4,
.template-index .collection-finale,
.template-index .faq-v5,
.template-index .newsletter-v5 {
display: none;
}
/* ============================================================
V7.1 — SILVER-DOMINANT PALETTE
Lifts the entire site to platinum, keeps charcoal as accent
============================================================ */
/* Hero — platinum base, photo lit slightly more, gold and charcoal accents */
.hero-v7 {
background:
radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255,255,255,0.6) 0%, transparent 60%),
linear-gradient(180deg, #F0F0EE 0%, #DCDDDA 60%, #C8C9C6 100%);
color: var(--v7-fg);
}
.hero-v7__bg {
/* Lighten the photo significantly — was brightness 0.55 */
filter: saturate(0.7) contrast(1.0) brightness(0.92);
mix-blend-mode: luminosity;
opacity: 0.55;
}
.hero-v7__scrim {
background:
linear-gradient(180deg, rgba(232,232,230,0.2) 0%, rgba(232,232,230,0.6) 60%, rgba(232,232,230,0.95) 100%),
linear-gradient(90deg, rgba(232,232,230,0.7) 0%, transparent 55%);
}
.hero-v7__title { color: var(--v7-fg); }
.hero-v7__sub { color: var(--v7-fg-soft); }
.hero-v7__wordmark img {
filter: invert(1) brightness(0.15);
opacity: 0.95;
}
.member-pill {
background: rgba(255,255,255,0.6);
border-color: var(--v7-line-mid);
backdrop-filter: blur(20px) saturate(140%);
}
.member-pill__text { color: var(--gold-deep); }
.hero-v7__meta {
border-top-color: var(--v7-line-mid);
}
.meta-label { color: var(--v7-fg-muted); }
.meta-value { color: var(--gold-deep); }
/* Hero buttons need re-tuning for light bg */
.btn-amex--primary {
background: var(--v7-fg);
color: var(--v7-on-dark);
}
.btn-amex--primary:hover {
background: var(--gold);
color: #FFF;
}
.btn-amex--ghost {
color: var(--v7-fg);
border-color: var(--v7-line-mid);
}
.btn-amex--ghost:hover {
border-color: var(--v7-line-strong);
background: rgba(20,20,15,0.04);
}
.hero-v7__scroll {
color: var(--v7-fg-muted);
}
.hero-v7__scroll-line {
background: linear-gradient(to bottom, var(--gold), transparent);
}
/* TICKER stays dark (intentional rhythm break) */
.ticker {
background: var(--v7-bg-deep);
border-top: 1px solid var(--v7-line-mid);
border-bottom: 1px solid var(--v7-line-mid);
}
.ticker__item { color: var(--v7-on-dark-soft); }
.ticker__sep { color: var(--gold-soft); }
/* TEASE — platinum with gold sparkle */
.tease {
background: var(--v7-bg);
color: var(--v7-fg);
}
.tease::before {
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(184,146,74,0.10) 0%, transparent 60%),
radial-gradient(ellipse 40% 40% at 50% 100%, rgba(184,146,74,0.05) 0%, transparent 60%);
}
.tease__eyebrow { color: var(--gold); }
.tease__sub { color: var(--v7-fg-soft); }
.tease__form-row {
background: rgba(255,255,255,0.5);
border-color: var(--v7-line-mid);
}
.tease__form-row:focus-within { border-color: var(--gold); }
.tease__form-row input {
color: var(--v7-fg);
}
.tease__form-row input::placeholder { color: var(--v7-fg-muted); }
.tease__counter {
background: rgba(20,20,15,0.08);
}
.tease__counter-label { color: var(--v7-fg-muted); }
/* PRODUCT GRID — platinum with white cards */
.grid-v7 {
background: var(--v7-bg-soft);
color: var(--v7-fg);
}
.grid-v7__sub { color: var(--v7-fg-soft); }
.card-v7 {
background: var(--v7-bg-elev);
border-color: var(--v7-line);
color: var(--v7-fg);
}
.card-v7:hover {
border-color: rgba(184,146,74,0.5);
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.18), 0 0 0 1px rgba(184,146,74,0.2);
}
.card-v7__media {
background: var(--v7-bg);
}
.card-v7__img,
.card-v7__video {
filter: saturate(0.95);
}
.card-v7__status {
background: rgba(255,255,255,0.85);
border-color: var(--v7-line-mid);
color: var(--v7-fg);
backdrop-filter: blur(12px) saturate(140%);
}
.card-v7__body { border-top-color: var(--v7-line); }
.card-v7__edition { color: var(--gold-deep); }
.card-v7__name { color: var(--v7-fg); }
.card-v7__flavor { color: var(--v7-fg-soft); }
.card-v7__foot { border-top-color: var(--v7-line); }
.card-v7__price { color: var(--gold-deep); }
.card-v7__arrow {
border-color: var(--v7-line-mid);
color: var(--v7-fg-soft);
}
.card-v7:hover .card-v7__arrow {
background: var(--gold);
border-color: var(--gold);
color: #FFF;
}
.grid-v7__note-line {
background: linear-gradient(90deg, transparent, var(--v7-line-mid), transparent);
}
.grid-v7__note span { color: var(--gold-deep); }
/* MANIFESTO — keep dark for editorial drama (rhythm break) */
.manifesto {
background: var(--v7-bg-deep);
color: var(--v7-on-dark);
}
.manifesto__media img {
filter: saturate(0.55) contrast(1.05) brightness(0.5);
}
.manifesto__title { color: var(--v7-on-dark); }
.manifesto__text { color: var(--v7-on-dark-soft); }
/* MOMENTS — light platinum */
.moments-v7 {
background: var(--v7-bg);
color: var(--v7-fg);
}
.moment-v7 {
background: var(--v7-bg-elev);
border: 1px solid var(--v7-line);
}
.moment-v7__media img {
filter: saturate(0.95) contrast(1.0);
}
.moment-v7:hover .moment-v7__media img {
filter: saturate(1.0) contrast(1.05);
}
.moment-v7__caption {
background: linear-gradient(to top, rgba(20,20,15,0.85) 0%, transparent 100%);
color: var(--v7-on-dark);
}
.moment-v7__num,
.moment-v7__label { color: var(--v7-on-dark); }
.moment-v7__num { color: var(--gold-soft); }
/* STATS — light platinum, gold numbers */
.stats-v7 {
background: var(--v7-bg-elev);
color: var(--v7-fg);
border-top-color: var(--v7-line);
border-bottom-color: var(--v7-line);
}
.stat-v7__lbl { color: var(--v7-fg-muted); }
/* TESTIMONIALS — light platinum */
.testimonials-v7 {
background: var(--v7-bg-soft);
color: var(--v7-fg);
}
.quote-v7 {
background: var(--v7-bg-elev);
border-color: var(--v7-line);
}
.quote-v7:hover { border-color: rgba(184,146,74,0.4); }
.quote-v7 blockquote { color: var(--v7-fg); }
.quote-v7 footer { border-top-color: var(--v7-line); }
.quote-v7__author { color: var(--v7-fg); }
.quote-v7__loc { color: var(--gold-deep); }
.quote-v7__mark { color: var(--gold); opacity: 0.45; }
/* FINALE — keep dark for high-impact close (rhythm break) */
.finale-v7 {
background: var(--v7-bg-deep);
color: var(--v7-on-dark);
}
.finale-v7::before {
background:
radial-gradient(ellipse 50% 50% at 0% 50%, rgba(184,146,74,0.12) 0%, transparent 50%),
radial-gradient(ellipse 40% 40% at 100% 100%, rgba(184,146,74,0.08) 0%, transparent 50%);
}
.finale-v7__title { color: var(--v7-on-dark); }
.finale-v7__text { color: var(--v7-on-dark-soft); }
.finale-v7__includes li { color: var(--v7-on-dark-soft); }
.finale-v7__price {
border-top-color: rgba(255,255,255,0.1);
border-bottom-color: rgba(255,255,255,0.1);
}
.finale-v7__price-compare { color: var(--v7-on-dark-muted); }
.finale-v7__micro { color: var(--v7-on-dark-muted); }
.finale-v7__media { border-color: rgba(255,255,255,0.16); }
/* FAQ — light platinum */
.faq-v7 {
background: var(--v7-bg);
color: var(--v7-fg);
}
.qa { border-bottom-color: var(--v7-line); }
.qa:first-child { border-top-color: var(--v7-line); }
.qa[open] { background: rgba(255,255,255,0.4); }
.qa[open] summary { color: var(--gold-deep); }
.qa__num { color: var(--gold); }
.qa__q { color: var(--v7-fg); }
.qa[open] .qa__q { color: var(--gold-deep); }
.qa__a { color: var(--v7-fg-soft); }
/* WAITLIST — keep dark for closing dramatic moment (rhythm break) */
.waitlist-v7 {
background: var(--v7-bg-deep);
color: var(--v7-on-dark);
border-top: 1px solid var(--v7-line);
}
.waitlist-v7__title { color: var(--v7-on-dark); }
.waitlist-v7__sub { color: var(--v7-on-dark-soft); }
.waitlist-v7__form {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.16);
}
.waitlist-v7__form input { color: var(--v7-on-dark); }
.waitlist-v7__form input::placeholder { color: var(--v7-on-dark-muted); }
.waitlist-v7__fine { color: var(--v7-on-dark-muted); }
/* Header on light hero — invert previous override */
.template-index .site-header {
background: rgba(232, 232, 230, 0.7);
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px);
border-bottom-color: var(--v7-line);
color: var(--v7-fg);
}
.template-index .site-header.scrolled {
background: rgba(242, 242, 240, 0.92);
}
.template-index .site-header__nav a,
.template-index .site-header .icon-btn {
color: var(--v7-fg);
}
/* Use the DARK (teal/gold) logo on light hero */
.template-index .site-header__logo--dark { display: block !important; }
.template-index .site-header__logo--light { display: none !important; }
.template-index .site-header .icon-btn:hover {
background: rgba(20, 20, 15, 0.06);
}
.template-index .site-header .cart-count {
background: var(--gold);
color: #FFF;
box-shadow: 0 0 0 2px var(--v7-bg);
}
.template-index .announcement {
background: var(--v7-bg-deep);
color: var(--gold-soft);
border-bottom: 1px solid var(--v7-line);
}
/* Footer on light site — flip back to dark for contrast bookend */
.template-index .site-footer,
body.template-index .site-footer {
background: var(--v7-bg-deep);
color: var(--v7-on-dark);
border-top: 1px solid var(--v7-line);
}
.template-index .site-footer * { color: inherit; }
.template-index .site-footer a {
color: var(--v7-on-dark-soft);
}
.template-index .site-footer a:hover { color: var(--gold-soft); }
.template-index .site-footer__heading { color: var(--gold-soft); }
.template-index .site-footer__legal {
border-top-color: rgba(255,255,255,0.1);
color: var(--v7-on-dark-muted);
}
/* Status pill colors on light cards — bump contrast */
.status-dot--live {
background: var(--status-live);
box-shadow: 0 0 6px rgba(142,114,54,0.4);
}
.status-dot--low {
background: var(--status-low);
box-shadow: 0 0 6px rgba(184,131,0,0.4);
}
/* Hero-v7 monogram & waitlist monogram — keep gold */
/* (they're already styled fine, just ensure border legibility on light bg) */
.hero-v7__monogram {
border: 1px solid rgba(20,20,15,0.1);
box-shadow: 0 12px 28px -8px rgba(184,146,74,0.4), 0 2px 4px rgba(20,20,15,0.08);
}
/* Subtle silver shimmer on the gold buttons for that AMEX glint */
.btn-amex--gold::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
background-size: 250% 100%;
background-position: 100% 0;
pointer-events: none;
transition: background-position 1.2s ease;
}
.btn-amex--gold {
position: relative;
overflow: hidden;
}
.btn-amex--gold:hover::after {
background-position: -100% 0;
}
/* ============================================================
MOTION UTILITIES — base styles
============================================================ */
/* Custom cursor removed — using native cursor. */
@keyframes chrome-shimmer {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
}
/* Split text */
.split-word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.split-word__inner {
display: inline-block;
transform: translateY(110%);
transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
[data-split].split-in .split-word__inner { transform: translateY(0); }
[data-split] .split-word:nth-child(1) .split-word__inner { transition-delay: 0ms; }
[data-split] .split-word:nth-child(2) .split-word__inner { transition-delay: 60ms; }
[data-split] .split-word:nth-child(3) .split-word__inner { transition-delay: 120ms; }
[data-split] .split-word:nth-child(4) .split-word__inner { transition-delay: 180ms; }
[data-split] .split-word:nth-child(5) .split-word__inner { transition-delay: 240ms; }
[data-split] .split-word:nth-child(6) .split-word__inner { transition-delay: 300ms; }
[data-split] .split-word:nth-child(7) .split-word__inner { transition-delay: 360ms; }
[data-split] .split-word:nth-child(8) .split-word__inner { transition-delay: 420ms; }
[data-split] .split-word:nth-child(9) .split-word__inner { transition-delay: 480ms; }
[data-split] .split-word:nth-child(10) .split-word__inner { transition-delay: 540ms; }
.split-char {
display: inline-block;
transform: translateY(100%);
opacity: 0;
transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 700ms ease;
}
[data-split="chars"].split-in .split-char {
transform: translateY(0);
opacity: 1;
}
[data-split="chars"].split-in .split-char:nth-child(1) { transition-delay: 0ms; }
[data-split="chars"].split-in .split-char:nth-child(2) { transition-delay: 30ms; }
[data-split="chars"].split-in .split-char:nth-child(3) { transition-delay: 60ms; }
[data-split="chars"].split-in .split-char:nth-child(4) { transition-delay: 90ms; }
[data-split="chars"].split-in .split-char:nth-child(5) { transition-delay: 120ms; }
[data-split="chars"].split-in .split-char:nth-child(6) { transition-delay: 150ms; }
[data-split="chars"].split-in .split-char:nth-child(7) { transition-delay: 180ms; }
[data-split="chars"].split-in .split-char:nth-child(8) { transition-delay: 210ms; }
[data-split="chars"].split-in .split-char:nth-child(9) { transition-delay: 240ms; }
[data-split="chars"].split-in .split-char:nth-child(10) { transition-delay: 270ms; }
[data-split="chars"].split-in .split-char:nth-child(n+11) { transition-delay: 300ms; }
[data-magnetic] {
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: inline-flex;
}
@media (prefers-reduced-motion: reduce) {
.split-word__inner, .split-char { transform: none !important; opacity: 1 !important; }
[data-magnetic] { transform: none !important; }
}
/* ============================================================
LANE: CHROME — Y2K / Liquid Metal / Marc Jacobs Heaven
============================================================ */
body[data-lane="chrome"] {
background: #ECECEC;
color: #0F0F0F;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body[data-lane="chrome"] .lane-chrome {
--chrome-1: #F5F5F5;
--chrome-2: #C8C8C8;
--chrome-3: #9C9C9C;
--chrome-4: #DEDEDE;
--accent-rose: #E8C4B8;
--accent-champagne: #E8D5B0;
--accent-gold: #C9A96E;
--accent-gold-soft: #D4B985;
--accent-blue: #76C7FF;
/* Legacy aliases — kept so existing rules don't break */
--accent-pink: #E8C4B8;
--accent-lime: #E8D5B0;
--bg: #ECECEC;
--fg: #0F0F0F;
--gold: #C9A96E;
}
/* Chrome lane wraps everything */
body[data-lane="chrome"] .site-header {
background: rgba(236, 236, 236, 0.6);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
body[data-lane="chrome"] .site-header__nav a {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.04em;
font-size: 0.78rem;
}
/* CHROME HERO */
.chrome-hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: 5rem 1.5rem 3rem;
overflow: hidden;
background:
radial-gradient(ellipse at 20% 20%, rgba(232,196,184,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(118,199,255,0.3) 0%, transparent 50%),
radial-gradient(ellipse at 50% 80%, rgba(232,213,176,0.2) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #D4D4D4 50%, #F0F0F0 100%);
}
.chrome-hero__noise {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.6;
mix-blend-mode: overlay;
pointer-events: none;
}
.chrome-hero__blobs {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.chrome-blob {
position: absolute;
border-radius: 50%;
filter: blur(60px);
mix-blend-mode: hard-light;
}
.chrome-blob--1 {
width: 60vw; height: 60vw;
background: radial-gradient(circle at 30% 30%, #FFFFFF 0%, #C0C0C0 40%, transparent 70%);
top: -20%; left: -10%;
animation: blob-drift 18s ease-in-out infinite;
transform: translate(calc(var(--scroll, 0) * 100px), calc(var(--scroll, 0) * -200px));
}
.chrome-blob--2 {
width: 50vw; height: 50vw;
background: radial-gradient(circle at 60% 40%, #FFFFFF 0%, #888 50%, transparent 70%);
bottom: -20%; right: -10%;
animation: blob-drift 22s ease-in-out infinite reverse;
transform: translate(calc(var(--scroll, 0) * -150px), calc(var(--scroll, 0) * 100px));
}
@keyframes blob-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(8%, -10%) scale(1.15); }
}
.chrome-hero__inner {
position: relative;
text-align: center;
z-index: 2;
max-width: 1400px;
width: 100%;
display: grid;
gap: 2rem;
justify-items: center;
}
.chrome-hero__tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 999px;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.chrome-hero__tag-dot {
width: 6px; height: 6px;
background: #0F0F0F;
border-radius: 50%;
animation: pulse-dot 2s ease-in-out infinite;
}
/* Massive distorted ATEM type */
.chrome-hero__title {
font-family: 'Anton', 'Inter', sans-serif;
font-size: clamp(7rem, 26vw, 26rem);
font-weight: 400;
line-height: 0.78;
letter-spacing: -0.04em;
text-transform: uppercase;
margin: 0;
background: linear-gradient(180deg,
#F8F8F8 0%,
#FFFFFF 15%,
#B0B0B0 35%,
#6E6E6E 50%,
#C8C8C8 65%,
#FFFFFF 80%,
#888 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 6px 0 rgba(0,0,0,0.06)) drop-shadow(0 24px 60px rgba(0,0,0,0.18));
position: relative;
user-select: none;
}
.chrome-hero__title sup {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.15em;
font-weight: 500;
letter-spacing: 0.05em;
vertical-align: super;
background: none;
-webkit-text-fill-color: #0F0F0F;
color: #0F0F0F;
margin-left: 0.05em;
}
/* The chrome title gets a hover that morphs */
.chrome-hero__title-wrap {
display: inline-block;
transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chrome-hero__title-wrap:hover {
transform: scale(1.02) skewY(-1deg);
}
.chrome-hero__sub {
max-width: 580px;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.3vw, 1.15rem);
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.4;
color: rgba(15,15,15,0.65);
margin: 0;
}
.chrome-hero__cta-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
}
.chrome-btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 1rem 2rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
border-radius: 999px;
border: 0;
cursor: pointer;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
position: relative;
overflow: hidden;
}
.chrome-btn--primary {
background: linear-gradient(135deg, #0F0F0F, #2A2A2A, #0F0F0F);
color: #F5F5F5;
}
.chrome-btn--primary::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
transition: transform 1500ms ease;
}
.chrome-btn--primary:hover::before { transform: translateX(100%); }
.chrome-btn--chrome {
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF, #888, #DEDEDE);
background-size: 200% 200%;
color: #0F0F0F;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.5);
animation: chrome-btn-shimmer 10s linear infinite;
}
@keyframes chrome-btn-shimmer {
0%, 100% { background-position: 0% 0%; }
50% { background-position: 100% 100%; }
}
.chrome-hero__meta {
display: flex;
gap: 2rem;
align-items: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
margin-top: 1rem;
}
.chrome-hero__meta-divider {
width: 1px; height: 24px;
background: rgba(15,15,15,0.15);
}
/* MEGA MARQUEE */
.chrome-marquee {
background: #0F0F0F;
color: #F5F5F5;
padding: 1rem 0;
overflow: hidden;
border-top: 1px solid rgba(0,0,0,0.1);
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.chrome-marquee__track {
display: inline-flex;
gap: 3rem;
white-space: nowrap;
animation: marquee 35s linear infinite;
padding-left: 3rem;
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 7vw, 6rem);
letter-spacing: -0.02em;
text-transform: uppercase;
}
.chrome-marquee__track .chrome-marquee__star {
color: #E8C4B8;
}
/* CHROME PRODUCT GRID */
.chrome-products {
background: #ECECEC;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
position: relative;
}
.chrome-products__head {
max-width: 1400px;
margin: 0 auto clamp(3rem, 5vw, 4rem);
display: grid;
gap: 1rem;
}
.chrome-kicker {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,15,15,0.6);
}
.chrome-products__title {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 8vw, 8rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.9;
text-transform: uppercase;
margin: 0;
color: #0F0F0F;
}
.chrome-products__title em {
font-style: italic;
background: linear-gradient(135deg, #F8F8F8 0%, #888 50%, #F8F8F8 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: chrome-btn-shimmer 15s linear infinite;
filter: drop-shadow(0 4px 0 rgba(0,0,0,0.05));
}
.chrome-products__grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.chrome-card {
position: relative;
background: #FFFFFF;
border-radius: 24px;
overflow: hidden;
text-decoration: none;
color: #0F0F0F;
transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 30px -12px rgba(0,0,0,0.15);
}
.chrome-card:hover {
transform: translateY(-6px) rotate(-0.5deg);
}
.chrome-card__media {
aspect-ratio: 1;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #F0F0F0, #DDDDDD);
}
.chrome-card__img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms ease, filter 600ms ease;
}
.chrome-card:hover .chrome-card__img {
transform: scale(1.08) rotate(2deg);
filter: hue-rotate(15deg) saturate(1.2);
}
.chrome-card__num {
position: absolute;
top: 1rem; left: 1rem;
font-family: 'Anton', sans-serif;
font-size: 4rem;
line-height: 0.85;
color: rgba(255,255,255,0.85);
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
z-index: 2;
pointer-events: none;
}
.chrome-card__pill {
position: absolute;
top: 1rem; right: 1rem;
padding: 0.4rem 0.8rem;
background: rgba(15,15,15,0.85);
color: #F5F5F5;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
backdrop-filter: blur(10px);
z-index: 2;
}
.chrome-card__body {
padding: 1.5rem 1.25rem 1.25rem;
}
.chrome-card__name {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.005em;
text-transform: uppercase;
margin: 0 0 0.25rem;
}
.chrome-card__flavor {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
color: rgba(15,15,15,0.6);
margin: 0 0 0.85rem;
}
.chrome-card__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.85rem;
border-top: 1px solid rgba(0,0,0,0.08);
}
.chrome-card__price {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.01em;
}
.chrome-card__arrow {
width: 36px; height: 36px;
border-radius: 50%;
background: #0F0F0F;
color: #F5F5F5;
display: grid;
place-items: center;
transition: transform 300ms ease;
}
.chrome-card:hover .chrome-card__arrow { transform: translateX(4px) rotate(-15deg); }
/* CHROME EDITORIAL */
.chrome-editorial {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(5rem, 10vw, 10rem) 1.5rem;
position: relative;
overflow: hidden;
}
.chrome-editorial__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.chrome-editorial__media {
position: relative;
aspect-ratio: 4/5;
border-radius: 24px;
overflow: hidden;
}
.chrome-editorial__media img {
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(0.8) contrast(1.1);
transform: scale(calc(1 + var(--p, 0) * 0.08)) translateY(calc(var(--p, 0) * -40px));
transition: transform 0.1s linear;
}
.chrome-editorial__title {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 7vw, 7rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.9;
text-transform: uppercase;
margin: 0 0 1.5rem;
}
.chrome-editorial__title em {
font-style: italic;
background: linear-gradient(135deg, #F8F8F8, #888, #F8F8F8);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: chrome-btn-shimmer 12s linear infinite;
}
.chrome-editorial__text {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.3vw, 1.2rem);
line-height: 1.5;
color: rgba(245,245,245,0.7);
max-width: 480px;
margin: 0 0 2rem;
}
/* CHROME WAITLIST */
.chrome-waitlist {
background:
radial-gradient(ellipse at 30% 50%, rgba(232,196,184,0.4) 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, rgba(118,199,255,0.4) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #D4D4D4 100%);
padding: clamp(5rem, 10vw, 8rem) 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
}
.chrome-waitlist__inner {
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 2;
display: grid;
gap: 1.5rem;
justify-items: center;
}
.chrome-waitlist__title {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 8vw, 7rem);
letter-spacing: -0.025em;
line-height: 0.9;
text-transform: uppercase;
margin: 0;
background: linear-gradient(180deg, #FFFFFF 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}
.chrome-waitlist__form {
width: 100%;
max-width: 520px;
display: flex;
background: rgba(255,255,255,0.6);
border: 1px solid rgba(0,0,0,0.08);
border-radius: 999px;
padding: 0.4rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.chrome-waitlist__form input {
flex: 1;
background: transparent;
border: 0;
padding: 0.85rem 1.25rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
outline: none;
color: #0F0F0F;
}
/* CHROME mobile */
@media (max-width: 1000px) {
.chrome-products__grid { grid-template-columns: repeat(2, 1fr); }
.chrome-editorial__inner { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
.chrome-products__grid { grid-template-columns: 1fr; }
.chrome-hero__title { font-size: 28vw; }
.chrome-hero__cta-row { flex-direction: column; width: 100%; }
.chrome-hero__cta-row .chrome-btn { width: 100%; justify-content: center; }
.chrome-hero__meta { flex-direction: column; gap: 0.5rem; }
.chrome-hero__meta-divider { display: none; }
.chrome-marquee__track { font-size: 14vw; gap: 1.5rem; }
.chrome-waitlist__form { flex-direction: column; border-radius: 18px; gap: 0.4rem; }
}
/* Hide v7 sections on chrome lane */
body[data-lane="chrome"] .hero-v7,
body[data-lane="chrome"] .ticker,
body[data-lane="chrome"] .tease,
body[data-lane="chrome"] .grid-v7,
body[data-lane="chrome"] .manifesto,
body[data-lane="chrome"] .moments-v7,
body[data-lane="chrome"] .stats-v7,
body[data-lane="chrome"] .testimonials-v7,
body[data-lane="chrome"] .finale-v7,
body[data-lane="chrome"] .faq-v7,
body[data-lane="chrome"] .waitlist-v7 { display: none; }
/* ============================================================
LANE: LUXE — Tech-Luxury / Off-White / Rhode / Loewe
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500&display=swap');
body[data-lane="luxe"] {
background: #F5F4F0;
color: #0F0F0F;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
body[data-lane="luxe"] .site-header {
background: rgba(245, 244, 240, 0.7);
backdrop-filter: saturate(180%) blur(24px);
-webkit-backdrop-filter: saturate(180%) blur(24px);
border-bottom: 1px solid rgba(0,0,0,0.06);
color: #0F0F0F;
}
body[data-lane="luxe"] .site-header__nav a {
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.75rem;
}
/* LUXE HERO */
.luxe-hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
background: #F5F4F0;
padding: 5rem 0 0;
overflow: hidden;
}
.luxe-hero__inner {
max-width: 1600px;
margin: 0 auto;
padding: 0 clamp(1.5rem, 4vw, 4rem);
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(2rem, 6vw, 6rem);
align-items: end;
min-height: calc(100vh - 5rem);
min-height: calc(100dvh - 5rem);
padding-bottom: clamp(3rem, 6vw, 5rem);
}
.luxe-hero__copy {
display: grid;
gap: 2rem;
justify-items: start;
padding-bottom: 1rem;
}
.luxe-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.luxe-eyebrow::before {
content: "";
width: 24px; height: 1px;
background: rgba(15,15,15,0.55);
}
.luxe-hero__title {
font-family: 'Fraunces', serif;
font-size: clamp(3rem, 7.5vw, 8rem);
font-weight: 400;
letter-spacing: -0.04em;
line-height: 0.92;
margin: 0;
color: #0F0F0F;
font-variation-settings: "SOFT" 50, "WONK" 0;
}
.luxe-hero__title em {
font-style: italic;
font-variation-settings: "SOFT" 100, "WONK" 1;
color: #B8924A;
}
.luxe-hero__sub {
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.5;
color: rgba(15,15,15,0.65);
max-width: 460px;
margin: 0;
font-weight: 400;
}
.luxe-hero__actions {
display: flex;
gap: 1rem;
align-items: center;
flex-wrap: wrap;
}
.luxe-btn {
display: inline-flex;
align-items: center;
gap: 0.65rem;
padding: 1rem 1.75rem;
font-family: 'Inter', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: -0.005em;
text-decoration: none;
border-radius: 999px;
cursor: pointer;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), background 280ms ease, color 280ms ease;
border: 1px solid transparent;
}
.luxe-btn--primary {
background: #0F0F0F;
color: #F5F4F0;
}
.luxe-btn--primary:hover { background: #B8924A; }
.luxe-btn--ghost {
background: transparent;
color: #0F0F0F;
border-color: rgba(15,15,15,0.2);
}
.luxe-btn--ghost:hover {
border-color: #0F0F0F;
background: rgba(15,15,15,0.04);
}
.luxe-btn .luxe-btn__arrow {
font-family: 'JetBrains Mono', monospace;
transition: transform 280ms ease;
}
.luxe-btn:hover .luxe-btn__arrow { transform: translateX(4px); }
/* Hero photo right */
.luxe-hero__media {
position: relative;
aspect-ratio: 4/5;
overflow: hidden;
border-radius: 4px;
}
.luxe-hero__media img {
width: 100%; height: 100%;
object-fit: cover;
transform: scale(calc(1 + var(--scroll, 0) * 0.15));
filter: saturate(0.92);
}
.luxe-hero__caption {
position: absolute;
bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
display: flex;
justify-content: space-between;
align-items: end;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #FFFFFF;
text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.luxe-hero__caption-num {
font-family: 'Fraunces', serif;
font-size: 1.5rem;
font-style: italic;
letter-spacing: -0.01em;
text-transform: none;
}
/* Hero meta-row underneath grid */
.luxe-hero__meta {
border-top: 1px solid rgba(15,15,15,0.12);
padding: 1.5rem 0 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
width: 100%;
}
.luxe-hero__meta-item {
display: grid;
gap: 0.4rem;
}
.luxe-hero__meta-num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(1.5rem, 2.2vw, 2rem);
letter-spacing: -0.02em;
color: #0F0F0F;
}
.luxe-hero__meta-lbl {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
}
/* LUXE NUMBERED INTRO */
.luxe-intro {
background: #F5F4F0;
padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 4vw, 4rem);
border-top: 1px solid rgba(15,15,15,0.08);
}
.luxe-intro__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 4rem;
align-items: start;
}
.luxe-intro__num {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(4rem, 9vw, 9rem);
font-weight: 400;
line-height: 0.85;
letter-spacing: -0.03em;
color: #0F0F0F;
position: sticky;
top: 6rem;
}
.luxe-intro__num span {
display: block;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
margin-top: 1rem;
}
.luxe-intro__copy {
display: grid;
gap: 1.5rem;
}
.luxe-intro__h {
font-family: 'Fraunces', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0;
}
.luxe-intro__h em {
font-style: italic;
color: #B8924A;
}
.luxe-intro__p {
font-size: clamp(1rem, 1.3vw, 1.18rem);
line-height: 1.55;
color: rgba(15,15,15,0.7);
max-width: 600px;
margin: 0;
}
/* LUXE HORIZONTAL SCROLL CAROUSEL */
.luxe-hscroll {
position: relative;
height: 300vh;
background: #ECEAE3;
}
.luxe-hscroll__sticky {
position: sticky;
top: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
}
.luxe-hscroll__head {
position: absolute;
top: 6rem;
left: clamp(1.5rem, 4vw, 4rem);
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.luxe-hscroll__title {
font-family: 'Fraunces', serif;
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-style: italic;
letter-spacing: -0.02em;
margin: 0;
color: #0F0F0F;
}
.luxe-hscroll__track {
display: flex;
gap: 1.25rem;
padding: 0 clamp(1.5rem, 4vw, 4rem);
will-change: transform;
}
.luxe-hcard {
flex: 0 0 clamp(280px, 40vw, 480px);
text-decoration: none;
color: #0F0F0F;
}
.luxe-hcard__media {
aspect-ratio: 3/4;
overflow: hidden;
border-radius: 4px;
background: #DDD;
position: relative;
margin-bottom: 1rem;
}
.luxe-hcard__media img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.luxe-hcard:hover .luxe-hcard__media img { transform: scale(1.05); }
.luxe-hcard__num {
position: absolute;
top: 1rem; left: 1rem;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.1em;
color: #FFF;
text-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.luxe-hcard__pill {
position: absolute;
bottom: 1rem; right: 1rem;
padding: 0.35rem 0.75rem;
background: rgba(245,244,240,0.92);
color: #0F0F0F;
border-radius: 999px;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.luxe-hcard__name {
font-family: 'Fraunces', serif;
font-size: 1.4rem;
letter-spacing: -0.015em;
margin: 0 0 0.25rem;
font-weight: 400;
}
.luxe-hcard__name em { font-style: italic; }
.luxe-hcard__meta {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.05em;
color: rgba(15,15,15,0.7);
}
/* LUXE EDITORIAL — split spread */
.luxe-spread {
background: #F5F4F0;
padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 4vw, 4rem);
}
.luxe-spread__inner {
max-width: 1500px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.luxe-spread__media {
aspect-ratio: 3/4;
overflow: hidden;
border-radius: 4px;
}
.luxe-spread__media img {
width: 100%; height: 100%;
object-fit: cover;
transform: scale(calc(1 + var(--p, 0) * 0.1));
transition: transform 0.1s linear;
}
.luxe-spread__copy {
display: grid;
gap: 1.5rem;
}
.luxe-spread__title {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 5rem);
font-weight: 400;
letter-spacing: -0.03em;
line-height: 0.98;
margin: 0;
}
.luxe-spread__title em {
font-style: italic;
color: #B8924A;
}
.luxe-spread__text {
font-family: 'Fraunces', serif;
font-size: clamp(1.1rem, 1.5vw, 1.4rem);
line-height: 1.45;
color: rgba(15,15,15,0.75);
font-style: italic;
max-width: 520px;
margin: 0;
}
.luxe-spread__sig {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
display: flex;
align-items: center;
gap: 0.6rem;
}
.luxe-spread__sig::before {
content: "";
width: 24px; height: 1px;
background: currentColor;
}
/* LUXE QUOTE WALL */
.luxe-quotes {
background: #ECEAE3;
padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 4vw, 4rem);
}
.luxe-quotes__inner {
max-width: 1400px;
margin: 0 auto;
}
.luxe-quotes__head {
display: grid;
gap: 1rem;
margin-bottom: clamp(3rem, 5vw, 4rem);
text-align: center;
justify-items: center;
}
.luxe-quotes__title {
font-family: 'Fraunces', serif;
font-size: clamp(2.25rem, 5vw, 4rem);
font-style: italic;
letter-spacing: -0.025em;
line-height: 1;
margin: 0;
}
.luxe-quotes__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.luxe-quote {
background: #F5F4F0;
padding: 2.25rem 2rem;
border-radius: 4px;
display: grid;
gap: 1.25rem;
position: relative;
transition: transform 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.luxe-quote:hover { transform: translateY(-4px); }
.luxe-quote::before {
content: "\201C";
font-family: 'Fraunces', serif;
font-size: 5rem;
line-height: 0.5;
color: #B8924A;
opacity: 0.4;
position: absolute;
top: 1.5rem; right: 1.75rem;
}
.luxe-quote blockquote {
font-family: 'Fraunces', serif;
font-size: 1.15rem;
font-style: italic;
line-height: 1.45;
color: #0F0F0F;
margin: 0;
font-weight: 400;
}
.luxe-quote footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(15,15,15,0.08);
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(15,15,15,0.6);
}
/* LUXE NEWSLETTER */
.luxe-newsletter {
background: #0F0F0F;
color: #F5F4F0;
padding: clamp(5rem, 10vw, 10rem) clamp(1.5rem, 4vw, 4rem);
text-align: center;
}
.luxe-newsletter__inner {
max-width: 700px;
margin: 0 auto;
display: grid;
gap: 1.5rem;
justify-items: center;
}
.luxe-newsletter__title {
font-family: 'Fraunces', serif;
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 400;
letter-spacing: -0.03em;
line-height: 1;
margin: 0;
}
.luxe-newsletter__title em {
font-style: italic;
color: #C9A96E;
}
.luxe-newsletter__sub {
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
line-height: 1.55;
color: rgba(245,244,240,0.7);
margin: 0;
max-width: 480px;
}
.luxe-newsletter__form {
display: flex;
width: 100%;
max-width: 480px;
border-bottom: 1px solid rgba(245,244,240,0.4);
padding: 0.5rem 0;
transition: border-color 280ms ease;
}
.luxe-newsletter__form:focus-within { border-color: #C9A96E; }
.luxe-newsletter__form input {
flex: 1;
background: transparent;
border: 0;
padding: 0.85rem 0;
font-family: 'Inter', sans-serif;
font-size: 1rem;
color: #F5F4F0;
outline: none;
}
.luxe-newsletter__form input::placeholder { color: rgba(245,244,240,0.4); }
.luxe-newsletter__form button {
background: transparent;
border: 0;
padding: 0.85rem 1rem;
color: #F5F4F0;
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition: color 240ms ease;
}
.luxe-newsletter__form button:hover { color: #C9A96E; }
/* LUXE mobile */
@media (max-width: 1000px) {
.luxe-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 3rem; }
.luxe-hero__media { aspect-ratio: 1; max-width: 480px; }
.luxe-hero__meta { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.luxe-intro__inner { grid-template-columns: 1fr; gap: 2rem; }
.luxe-intro__num { position: static; }
.luxe-spread__inner { grid-template-columns: 1fr; gap: 2rem; }
.luxe-quotes__grid { grid-template-columns: 1fr; }
.luxe-hscroll { height: auto; }
.luxe-hscroll__sticky {
position: static;
height: auto;
padding: 8rem 0 4rem;
flex-direction: column;
}
.luxe-hscroll__head { position: static; padding: 0 1.5rem 2rem; }
.luxe-hscroll__track {
flex-direction: column;
transform: none !important;
gap: 1rem;
}
.luxe-hcard { flex-basis: auto; }
}
/* Hide v7 sections on luxe lane */
body[data-lane="luxe"] .hero-v7,
body[data-lane="luxe"] .ticker,
body[data-lane="luxe"] .tease,
body[data-lane="luxe"] .grid-v7,
body[data-lane="luxe"] .manifesto,
body[data-lane="luxe"] .moments-v7,
body[data-lane="luxe"] .stats-v7,
body[data-lane="luxe"] .testimonials-v7,
body[data-lane="luxe"] .finale-v7,
body[data-lane="luxe"] .faq-v7,
body[data-lane="luxe"] .waitlist-v7 { display: none; }
/* ============================================================
CHROME LANE — additional sections
============================================================ */
/* TEASE — hamburger product */
.chrome-tease {
position: relative;
background: linear-gradient(135deg, #ECECEC 0%, #DEDEDE 50%, #F0F0F0 100%);
padding: clamp(5rem, 10vw, 9rem) 1.5rem;
overflow: hidden;
text-align: center;
}
.chrome-tease__bg {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.chrome-tease__blob {
position: absolute;
width: 50vw; height: 50vw;
border-radius: 50%;
filter: blur(80px);
mix-blend-mode: hard-light;
}
.chrome-tease__blob--a {
background: radial-gradient(circle, #E8C4B8 0%, transparent 70%);
top: -15%; left: 20%;
animation: blob-drift 20s ease-in-out infinite;
}
.chrome-tease__blob--b {
background: radial-gradient(circle, #76C7FF 0%, transparent 70%);
bottom: -15%; right: 15%;
animation: blob-drift 24s ease-in-out infinite reverse;
}
.chrome-tease__inner {
position: relative;
max-width: 720px;
margin: 0 auto;
display: grid;
gap: 1.5rem;
justify-items: center;
z-index: 2;
}
.chrome-tease__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 6vw, 5.5rem);
letter-spacing: -0.025em;
line-height: 0.9;
text-transform: uppercase;
margin: 0;
color: #0F0F0F;
}
.chrome-tease__title em {
font-style: italic;
background: linear-gradient(180deg, #F8F8F8 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-tease__form {
display: flex;
width: 100%;
max-width: 520px;
background: rgba(255,255,255,0.7);
border: 1px solid rgba(15,15,15,0.1);
border-radius: 999px;
padding: 0.4rem;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
margin-top: 0.5rem;
}
.chrome-tease__form input {
flex: 1;
background: transparent;
border: 0;
padding: 0.85rem 1.25rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
outline: none;
color: #0F0F0F;
}
.chrome-tease__counter {
position: relative;
width: 100%;
max-width: 520px;
height: 4px;
background: rgba(15,15,15,0.08);
border-radius: 999px;
overflow: hidden;
margin-top: 0.5rem;
}
.chrome-tease__counter-fill {
position: absolute;
inset: 0 auto 0 0;
width: 73%;
background: linear-gradient(90deg, #E8C4B8, #76C7FF, #E8D5B0);
background-size: 200% 100%;
animation: chrome-btn-shimmer 10s linear infinite;
border-radius: 999px;
}
.chrome-tease__counter-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: rgba(15,15,15,0.55);
}
/* MOMENTS */
.chrome-moments {
background: #ECECEC;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.chrome-moments__grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.chrome-moment {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3/4;
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1);
}
.chrome-moment:hover { transform: translateY(-4px) rotate(-0.5deg); }
.chrome-moment img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 700ms ease, filter 500ms ease;
filter: saturate(1.0);
}
.chrome-moment:hover img {
transform: scale(1.06);
filter: saturate(1.2) hue-rotate(8deg);
}
.chrome-moment__caption {
position: absolute;
inset: auto 0 0 0;
padding: 1.5rem 1.25rem 1.25rem;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
color: #FFFFFF;
display: flex;
align-items: baseline;
gap: 0.6rem;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
letter-spacing: 0.02em;
}
.chrome-moment__num {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
background: linear-gradient(180deg, #F8F8F8, #888);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* STATS */
.chrome-stats {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(4rem, 8vw, 7rem) 1.5rem;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chrome-stats__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.chrome-stat__num {
font-family: 'Anton', sans-serif;
font-size: clamp(3.5rem, 8vw, 7rem);
line-height: 1;
letter-spacing: -0.025em;
background: linear-gradient(180deg, #FFFFFF 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.chrome-stat__lbl {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245,245,245,0.6);
margin-top: 0.5rem;
}
/* TESTIMONIALS */
.chrome-quotes {
background: #ECECEC;
padding: clamp(5rem, 10vw, 8rem) 1.5rem;
}
.chrome-quotes__grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.chrome-quote {
background: #FFFFFF;
padding: 2.25rem 2rem;
border-radius: 20px;
display: grid;
gap: 1.25rem;
position: relative;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 30px -12px rgba(0,0,0,0.15);
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1);
}
.chrome-quote:hover { transform: translateY(-4px) rotate(0.3deg); }
.chrome-quote__mark {
font-family: 'Anton', sans-serif;
font-size: 6rem;
line-height: 0.4;
background: linear-gradient(180deg, #F8F8F8, #888);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
position: absolute;
top: 1.5rem; right: 1.75rem;
opacity: 0.6;
}
.chrome-quote blockquote {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
line-height: 1.5;
color: #0F0F0F;
margin: 0;
font-weight: 400;
z-index: 1;
position: relative;
}
.chrome-quote footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(15,15,15,0.08);
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(15,15,15,0.6);
font-weight: 500;
}
/* FINALE */
.chrome-finale {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(5rem, 10vw, 9rem) 1.5rem;
position: relative;
overflow: hidden;
}
.chrome-finale::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 50% 50% at 0% 50%, rgba(232,196,184,0.18) 0%, transparent 50%),
radial-gradient(ellipse 50% 50% at 100% 50%, rgba(118,199,255,0.14) 0%, transparent 50%);
pointer-events: none;
}
.chrome-finale__inner {
position: relative;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.chrome-finale__copy {
display: grid;
gap: 1.5rem;
max-width: 540px;
}
.chrome-finale__title {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 7vw, 6rem);
letter-spacing: -0.025em;
line-height: 0.9;
text-transform: uppercase;
margin: 0;
}
.chrome-finale__title em {
font-style: italic;
background: linear-gradient(135deg, #F8F8F8, #888, #F8F8F8);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: chrome-btn-shimmer 12s linear infinite;
}
.chrome-finale__list {
list-style: none;
padding: 0;
margin: 0.5rem 0;
display: grid;
gap: 0.6rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
color: rgba(245,245,245,0.7);
}
.chrome-finale__list li {
display: flex; align-items: center; gap: 0.85rem;
}
.chrome-finale__list li::before {
content: "";
width: 8px; height: 8px;
background: linear-gradient(135deg, #F8F8F8, #888);
border-radius: 50%;
box-shadow: 0 0 8px rgba(255,255,255,0.4);
flex-shrink: 0;
}
.chrome-finale__price-row {
display: flex;
align-items: baseline;
gap: 1rem;
flex-wrap: wrap;
padding: 1rem 0;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.chrome-finale__price {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 4.5vw, 4rem);
line-height: 1;
background: linear-gradient(180deg, #FFFFFF 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-finale__compare {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(245,245,245,0.5);
}
.chrome-finale__media {
position: relative;
aspect-ratio: 4/5;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.16);
display: block;
transition: transform 600ms ease;
}
.chrome-finale__media:hover { transform: translateY(-4px); }
.chrome-finale__media img {
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(1.0);
transform: scale(calc(1 + var(--p, 0) * 0.06));
transition: transform 0.1s linear;
}
.chrome-finale__tag {
position: absolute;
top: 1rem; left: 1rem;
padding: 0.45rem 0.95rem;
background: linear-gradient(135deg, #F8F8F8, #888, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* FAQ */
.chrome-faq {
background: #ECECEC;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.chrome-faq__list {
max-width: 880px;
margin: 0 auto;
}
.chrome-qa {
border-bottom: 1px solid rgba(15,15,15,0.1);
transition: background 280ms ease;
}
.chrome-qa:first-child { border-top: 1px solid rgba(15,15,15,0.1); }
.chrome-qa[open] { background: rgba(255,255,255,0.5); }
.chrome-qa summary {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 0.5rem;
list-style: none;
cursor: pointer;
}
.chrome-qa summary::-webkit-details-marker { display: none; }
.chrome-qa__num {
font-family: 'Anton', sans-serif;
font-size: 1.6rem;
background: linear-gradient(180deg, #F8F8F8, #555);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-qa__q {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 500;
color: #0F0F0F;
letter-spacing: -0.005em;
}
.chrome-qa__plus {
position: relative;
width: 18px; height: 18px;
}
.chrome-qa__plus::before, .chrome-qa__plus::after {
content: "";
position: absolute;
background: #0F0F0F;
transition: transform 280ms ease;
}
.chrome-qa__plus::before {
width: 100%; height: 1.5px;
top: 50%; left: 0;
margin-top: -0.75px;
}
.chrome-qa__plus::after {
width: 1.5px; height: 100%;
left: 50%; top: 0;
margin-left: -0.75px;
}
.chrome-qa[open] .chrome-qa__plus::after { transform: rotate(90deg); }
.chrome-qa__a {
padding: 0 0.5rem 1.5rem calc(0.5rem + 1.6rem + 1.25rem);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(15,15,15,0.65);
}
/* Mobile for new chrome sections */
@media (max-width: 1000px) {
.chrome-moments__grid { grid-template-columns: repeat(2, 1fr); }
.chrome-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
.chrome-quotes__grid { grid-template-columns: 1fr; }
.chrome-finale__inner { grid-template-columns: 1fr; gap: 2rem; }
.chrome-finale__copy { max-width: none; }
}
@media (max-width: 600px) {
.chrome-tease__form { flex-direction: column; border-radius: 18px; gap: 0.5rem; padding: 0.5rem; }
.chrome-tease__form .chrome-btn { width: 100%; justify-content: center; }
.chrome-stats__inner { grid-template-columns: 1fr; gap: 2.5rem; }
.chrome-qa summary { grid-template-columns: auto 1fr auto; gap: 0.85rem; padding: 1.25rem 0.25rem; }
.chrome-qa__a { padding-left: 0.25rem; }
.chrome-finale__price { font-size: 3rem; }
}
/* ============================================================
CHROME LANE — PRODUCT PAGE OVERRIDES
Re-skins the existing PDP styles to match chrome aesthetic
============================================================ */
body[data-lane="chrome"] {
background: #ECECEC;
}
body[data-lane="chrome"] .pdp {
background: #ECECEC;
padding: clamp(2rem, 4vw, 4rem) 1.5rem clamp(3rem, 5vw, 5rem);
}
body[data-lane="chrome"] .pdp-breadcrumb {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
body[data-lane="chrome"] .pdp-breadcrumb a { color: rgba(15,15,15,0.55); }
body[data-lane="chrome"] .pdp-breadcrumb a:hover { color: #0F0F0F; }
body[data-lane="chrome"] .pdp-breadcrumb .current { color: #0F0F0F; }
body[data-lane="chrome"] .pdp__main {
background: #FFFFFF;
border-radius: 24px;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 24px 60px -20px rgba(0,0,0,0.12);
}
body[data-lane="chrome"] .pdp__thumb {
background: #FFFFFF;
border-radius: 12px;
box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}
body[data-lane="chrome"] .pdp__thumb.active {
border-color: #0F0F0F;
box-shadow: 0 0 0 2px #0F0F0F;
}
body[data-lane="chrome"] .pdp__chip {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(15,15,15,0.6);
}
body[data-lane="chrome"] .pdp__badge {
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
color: #0F0F0F;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid rgba(0,0,0,0.08);
animation: chrome-btn-shimmer 10s linear infinite;
}
body[data-lane="chrome"] .pdp__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 5vw, 4rem);
letter-spacing: -0.025em;
line-height: 1;
text-transform: uppercase;
font-weight: 400;
}
body[data-lane="chrome"] .pdp__subtitle {
font-family: 'Space Grotesk', sans-serif;
color: rgba(15,15,15,0.6);
font-size: 1rem;
}
body[data-lane="chrome"] .pdp__stars {
color: #0F0F0F;
}
body[data-lane="chrome"] .pdp__reviews-text {
font-family: 'Space Grotesk', sans-serif;
color: rgba(15,15,15,0.6);
}
body[data-lane="chrome"] .pdp__reviews-link {
color: #0F0F0F;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 0.72rem;
letter-spacing: 0.1em;
border-bottom-color: rgba(15,15,15,0.2);
}
body[data-lane="chrome"] .pdp__reviews-link:hover { border-color: #0F0F0F; }
body[data-lane="chrome"] .pdp__price-main {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 3vw, 2.75rem);
letter-spacing: 0.005em;
}
body[data-lane="chrome"] .pdp__price-compare {
font-family: 'Space Grotesk', sans-serif;
}
body[data-lane="chrome"] .pdp__save-badge {
background: linear-gradient(135deg, #F8F8F8, #888, #FFFFFF);
background-size: 200% 200%;
color: #0F0F0F;
border: 1px solid rgba(0,0,0,0.1);
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.06em;
text-transform: uppercase;
animation: chrome-btn-shimmer 10s linear infinite;
}
body[data-lane="chrome"] .pdp__shipping-strip {
background: rgba(15,15,15,0.06);
color: #0F0F0F;
border-radius: 12px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 500;
}
body[data-lane="chrome"] .pdp__stock-dot {
background: #0F0F0F;
box-shadow: 0 0 0 3px rgba(15,15,15,0.15);
}
body[data-lane="chrome"] .pdp__option-label {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.12em;
font-weight: 500;
color: rgba(15,15,15,0.55);
}
body[data-lane="chrome"] .pdp__option-label strong {
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
letter-spacing: 0;
font-weight: 600;
}
body[data-lane="chrome"] .pdp__swatch span {
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
background: #FFFFFF;
border-color: rgba(15,15,15,0.12);
color: #0F0F0F;
}
body[data-lane="chrome"] .pdp__swatch input:checked + span {
background: #0F0F0F;
color: #F5F5F5;
border-color: #0F0F0F;
}
body[data-lane="chrome"] .pdp__pack-inner {
background: #FFFFFF;
border-color: rgba(15,15,15,0.12);
font-family: 'Space Grotesk', sans-serif;
}
body[data-lane="chrome"] .pdp__pack:hover .pdp__pack-inner { border-color: #0F0F0F; }
body[data-lane="chrome"] .pdp__pack input:checked ~ .pdp__pack-inner {
background: rgba(15,15,15,0.04);
border-color: #0F0F0F;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
body[data-lane="chrome"] .pdp__pack--popular input:checked ~ .pdp__pack-inner {
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
}
body[data-lane="chrome"] .pdp__pack-label {
font-family: 'Anton', sans-serif;
letter-spacing: 0.005em;
text-transform: uppercase;
}
body[data-lane="chrome"] .pdp__pack-ribbon {
background: #0F0F0F;
color: #F5F5F5;
font-family: 'Space Grotesk', sans-serif;
}
body[data-lane="chrome"] .pdp__sub-option {
background: #FFFFFF;
border-color: rgba(15,15,15,0.12);
}
body[data-lane="chrome"] .pdp__sub-option:has(input:checked) {
border-color: #0F0F0F;
background: rgba(15,15,15,0.04);
}
body[data-lane="chrome"] .pdp__sub-option input:checked ~ .pdp__sub-check {
background: #0F0F0F;
border-color: #0F0F0F;
}
body[data-lane="chrome"] .pdp__sub-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; }
body[data-lane="chrome"] .pdp__sub-price {
font-family: 'Anton', sans-serif;
letter-spacing: 0.005em;
color: #0F0F0F;
font-size: 1.2rem;
}
body[data-lane="chrome"] .pdp__sub-badge {
background: #0F0F0F;
color: #F5F5F5;
}
body[data-lane="chrome"] .pdp__cta {
background: linear-gradient(135deg, #0F0F0F, #2A2A2A, #0F0F0F);
color: #F5F5F5;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
border-radius: 999px;
position: relative;
overflow: hidden;
}
body[data-lane="chrome"] .pdp__cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
transition: transform 1500ms ease;
pointer-events: none;
}
body[data-lane="chrome"] .pdp__cta:hover::before { transform: translateX(100%); }
body[data-lane="chrome"] .pdp__cta-price {
font-family: 'Anton', sans-serif;
letter-spacing: 0.005em;
font-size: 1.05rem;
}
body[data-lane="chrome"] .pdp__qty {
background: #FFFFFF;
border-color: rgba(15,15,15,0.12);
}
body[data-lane="chrome"] .pdp__trust {
background: #FFFFFF;
border-radius: 14px;
border: 1px solid rgba(15,15,15,0.06);
}
body[data-lane="chrome"] .pdp__trust-item svg { color: #0F0F0F; }
body[data-lane="chrome"] .pdp__trust-item strong {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
body[data-lane="chrome"] .pdp__facts {
border-top-color: rgba(15,15,15,0.08);
border-bottom-color: rgba(15,15,15,0.08);
}
body[data-lane="chrome"] .pdp__fact-num {
font-family: 'Anton', sans-serif;
background: linear-gradient(180deg, #FFFFFF 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
font-size: clamp(2rem, 3vw, 2.5rem);
}
body[data-lane="chrome"] .pdp__fact-label {
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 0.1em;
}
body[data-lane="chrome"] .pdp__accordion .faq-item {
background: #FFFFFF;
border-radius: 16px;
}
body[data-lane="chrome"] .pdp__accordion .faq-item__q {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
}
body[data-lane="chrome"] .pdp__accordion .faq-item[open] .faq-item__q {
color: #0F0F0F;
}
body[data-lane="chrome"] .faq-item__icon {
background: linear-gradient(135deg, #F8F8F8, #DDD);
color: #0F0F0F;
border-radius: 8px;
}
body[data-lane="chrome"] .pdp__sticky-cta {
background: rgba(255, 255, 255, 0.96);
border-top: 1px solid rgba(15,15,15,0.08);
}
body[data-lane="chrome"] .pdp__sticky-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
}
body[data-lane="chrome"] .pdp__sticky-price {
font-family: 'Anton', sans-serif;
font-size: 0.95rem;
color: #0F0F0F;
}
body[data-lane="chrome"] .pdp-reviews {
background: #ECECEC;
}
body[data-lane="chrome"] .pdp-reviews__title {
font-family: 'Anton', sans-serif;
font-weight: 400;
letter-spacing: -0.025em;
text-transform: uppercase;
}
body[data-lane="chrome"] .tcard {
background: #FFFFFF;
border-radius: 20px;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 30px -12px rgba(0,0,0,0.12);
}
body[data-lane="chrome"] .pdp-upsell {
background: #ECECEC;
}
body[data-lane="chrome"] .bundle-cta {
background: linear-gradient(135deg, #0F0F0F, #2A2A2A);
color: #F5F5F5;
border-radius: 24px;
}
body[data-lane="chrome"] .bundle-cta__title {
font-family: 'Anton', sans-serif;
font-weight: 400;
letter-spacing: -0.02em;
text-transform: uppercase;
}
body[data-lane="chrome"] .bundle-cta__sub {
color: rgba(245,245,245,0.7);
}
body[data-lane="chrome"] .bundle-cta__badge {
background: linear-gradient(135deg, #F8F8F8, #888);
color: #0F0F0F;
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
}
body[data-lane="chrome"] .how-it-works {
background: #FFFFFF;
}
body[data-lane="chrome"] .how-it-works__title {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
}
body[data-lane="chrome"] .how-step h3 {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
}
body[data-lane="chrome"] .how-step__num {
font-family: 'Space Grotesk', sans-serif;
}
body[data-lane="chrome"] .love-section {
background: #ECECEC;
}
body[data-lane="chrome"] .love-section__title {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
}
body[data-lane="chrome"] .love-tile h3 {
font-family: 'Anton', sans-serif;
font-weight: 400;
text-transform: uppercase;
}
body[data-lane="chrome"] .love-tile--teal {
background: linear-gradient(135deg, #0F0F0F, #2A2A2A);
}
body[data-lane="chrome"] .site-footer {
background: #0F0F0F !important;
color: #F5F5F5 !important;
font-family: 'Space Grotesk', sans-serif;
padding-top: clamp(3rem, 6vw, 5rem);
padding-bottom: clamp(2rem, 4vw, 3rem);
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body[data-lane="chrome"] .site-footer * { color: inherit; }
body[data-lane="chrome"] .site-footer a {
color: rgba(245,245,245,0.7);
text-decoration: none;
transition: color 300ms var(--ease);
display: inline-block;
padding: 0.25rem 0;
min-height: 32px;
line-height: 1.5;
}
body[data-lane="chrome"] .site-footer a:hover { color: #E8D5B0; }
body[data-lane="chrome"] .site-footer a:focus-visible {
outline: 2px solid #C9A96E;
outline-offset: 2px;
color: #F5F5F5;
}
body[data-lane="chrome"] .site-footer__heading {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,245,245,0.55);
margin-bottom: 1.25rem;
}
body[data-lane="chrome"] .site-footer .atem-wordmark--footer,
body[data-lane="chrome"] .site-footer .atem-wordmark {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 4vw, 2.75rem);
letter-spacing: 0.04em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 15s linear infinite;
}
body[data-lane="chrome"] .site-footer__top-note {
color: rgba(245, 245, 245, 0.45);
border-bottom-color: rgba(255, 255, 255, 0.08);
font-size: 0.75rem;
letter-spacing: 0.02em;
line-height: 1.55;
}
body[data-lane="chrome"] .site-footer__legal {
border-top-color: rgba(255, 255, 255, 0.08);
color: rgba(245, 245, 245, 0.45);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body[data-lane="chrome"] .site-footer__legal a {
color: rgba(245, 245, 245, 0.6);
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
body[data-lane="chrome"] .site-footer__legal a:hover { color: #E8D5B0; }
/* Header is platinum at every scroll position — no hero color bleed-through. */
body[data-lane="chrome"] .template-index .site-header {
background: rgba(236, 236, 236, 0.95);
border-bottom-color: rgba(15,15,15,0.06);
}
body[data-lane="chrome"] .template-index .site-header.scrolled {
background: rgba(236, 236, 236, 0.95);
}
body[data-lane="chrome"] .template-index .site-header__logo--dark { display: block !important; }
body[data-lane="chrome"] .template-index .site-header__logo--light { display: none !important; }
body[data-lane="chrome"] .template-index .site-header__nav a,
body[data-lane="chrome"] .template-index .site-header .icon-btn {
color: #0F0F0F;
}
body[data-lane="chrome"] .template-index .announcement {
background: #0F0F0F;
color: #F5F5F5;
}
/* ============================================================
CHROME PDP — drop-site product page
============================================================ */
/* Hide the old PDP styles when on chrome lane */
body[data-lane="chrome"] .pdp,
body[data-lane="chrome"] .pdp-breadcrumb,
body[data-lane="chrome"] .pdp__sticky-cta,
body[data-lane="chrome"] .how-it-works,
body[data-lane="chrome"] .love-section,
body[data-lane="chrome"] .pdp-reviews,
body[data-lane="chrome"] .pdp-upsell {
display: none !important;
}
/* Only show on product page */
body.template-product[data-lane="chrome"] {
background: #ECECEC;
}
/* TICKER STRIP */
.cpdp-ticker {
background: #0F0F0F;
color: #F5F5F5;
overflow: hidden;
padding: 0.85rem 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cpdp-ticker__track {
display: inline-flex;
align-items: center;
gap: 2rem;
white-space: nowrap;
animation: marquee 50s linear infinite;
padding-left: 2rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.cpdp-ticker__sep {
background: linear-gradient(135deg, #F8F8F8, #888);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* HERO PDP */
.cpdp-hero {
max-width: 1500px;
margin: 0 auto;
padding: clamp(1.5rem, 3vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(2rem, 4vw, 4.5rem);
align-items: flex-start;
}
/* === Gallery === */
.cpdp-hero__gallery {
position: sticky;
top: 100px;
display: grid;
gap: 0.75rem;
}
.cpdp-hero__main {
position: relative;
aspect-ratio: 1;
border-radius: 28px;
overflow: hidden;
background: linear-gradient(135deg, #FFFFFF, #F0F0F0);
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 30px 80px -20px rgba(0,0,0,0.18);
}
.cpdp-hero__main img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 700ms cubic-bezier(0.2,0.8,0.2,1), filter 600ms ease;
}
.cpdp-hero__main:hover img {
transform: scale(1.04);
filter: saturate(1.1);
}
.cpdp-hero__edition {
position: absolute;
top: 1.25rem; left: 1.25rem;
display: flex;
align-items: baseline;
gap: 0.4rem;
padding: 0.55rem 0.95rem;
background: rgba(15,15,15,0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 999px;
color: #F5F5F5;
z-index: 2;
}
.cpdp-hero__edition-num {
font-family: 'Anton', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.005em;
}
.cpdp-hero__edition-of {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.06em;
color: rgba(245,245,245,0.6);
}
.cpdp-hero__status {
position: absolute;
top: 1.25rem; right: 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.95rem;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
z-index: 2;
}
.cpdp-status-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #0F0F0F;
box-shadow: 0 0 8px rgba(0,0,0,0.3);
animation: pulse-dot 2s ease-in-out infinite;
}
/* Thumbs */
.cpdp-hero__thumbs-rail {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 0.4rem;
}
.cpdp-hero__thumbs {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 0.5rem;
padding: 0.25rem 2px;
scrollbar-width: thin;
scrollbar-color: rgba(15,15,15,0.18) transparent;
-webkit-overflow-scrolling: touch;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.cpdp-hero__thumbs::-webkit-scrollbar { height: 4px; }
.cpdp-hero__thumbs::-webkit-scrollbar-track { background: transparent; }
.cpdp-hero__thumbs::-webkit-scrollbar-thumb { background: rgba(15,15,15,0.2); border-radius: 4px; }
.cpdp-hero__thumbs-nav {
appearance: none; border: 0; cursor: pointer;
width: 32px; height: 32px; border-radius: 50%; padding: 0;
background: linear-gradient(180deg, #F8F8F8 0%, #DEDEDE 50%, #B8B8B8 100%);
color: #0F0F0F;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 1px 2px rgba(0,0,0,0.08), 0 0 0 1px rgba(15,15,15,0.06);
transition: transform 200ms ease, opacity 200ms ease, background 200ms ease;
}
.cpdp-hero__thumbs-nav svg { width: 14px; height: 14px; }
.cpdp-hero__thumbs-nav:hover { transform: translateY(-1px); background: linear-gradient(180deg, #FFFFFF 0%, #E8E8E8 50%, #C0C0C0 100%); }
.cpdp-hero__thumbs-nav:focus-visible { outline: 2px solid #C9A96E; outline-offset: 2px; }
.cpdp-hero__thumbs-nav[aria-disabled="true"], .cpdp-hero__thumbs-nav:disabled {
opacity: 0.3; cursor: default; transform: none; pointer-events: none;
}
@media (max-width: 700px) {
.cpdp-hero__thumbs-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.cpdp-hero__thumbs { scroll-behavior: auto; }
}
.cpdp-thumb {
flex: 0 0 calc((100% - 4 * 0.5rem) / 5);
min-width: 64px;
max-width: 110px;
scroll-snap-align: start;
background: #FFFFFF;
border: 2px solid transparent;
border-radius: 14px;
padding: 0;
overflow: hidden;
aspect-ratio: 1;
cursor: pointer;
transition: border-color 220ms ease, transform 220ms ease;
}
.cpdp-thumb[hidden] { display: none; }
.cpdp-thumb:hover { transform: translateY(-2px); }
.cpdp-thumb.active {
border-color: #0F0F0F;
}
.cpdp-thumb img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* === Buy column === */
.cpdp-hero__info {
display: grid;
gap: 1.5rem;
padding-top: 0.5rem;
}
.cpdp-crumb {
display: flex;
gap: 0.5rem;
align-items: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
flex-wrap: wrap;
}
.cpdp-crumb a {
color: rgba(15,15,15,0.5);
text-decoration: none;
transition: color 200ms ease;
}
.cpdp-crumb a:hover { color: #0F0F0F; }
.cpdp-crumb__current { color: #0F0F0F; font-weight: 600; }
.cpdp-meta-row {
display: flex;
gap: 0.6rem;
align-items: center;
flex-wrap: wrap;
}
.cpdp-tag {
display: inline-flex;
padding: 0.4rem 0.85rem;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
color: #0F0F0F;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.cpdp-moment {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.cpdp-title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 5vw, 4.25rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.95;
text-transform: uppercase;
margin: 0;
color: #0F0F0F;
}
.cpdp-subtitle {
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
color: rgba(15,15,15,0.6);
margin: -0.5rem 0 0;
line-height: 1.4;
}
.cpdp-reviews-row {
display: flex;
align-items: center;
gap: 0.65rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
}
.cpdp-stars {
color: #0F0F0F;
font-size: 0.95rem;
letter-spacing: 0.1em;
}
.cpdp-stars--sm { font-size: 0.78rem; }
.cpdp-reviews-text { color: rgba(15,15,15,0.6); }
.cpdp-reviews-text strong { color: #0F0F0F; font-weight: 700; }
.cpdp-price-row {
display: flex;
align-items: baseline;
gap: 0.85rem;
flex-wrap: wrap;
padding-bottom: 0.5rem;
border-bottom: 1px solid rgba(15,15,15,0.08);
}
.cpdp-price {
font-family: 'Anton', sans-serif;
font-size: clamp(2.25rem, 3.5vw, 3rem);
letter-spacing: 0.005em;
line-height: 1;
background: linear-gradient(180deg, #FFFFFF 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.06));
}
.cpdp-price-compare {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.05rem;
color: rgba(15,15,15,0.4);
text-decoration: line-through;
}
.cpdp-save {
display: inline-flex;
padding: 0.3rem 0.65rem;
background: #0F0F0F;
color: #F5F5F5;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* Edition counter bar */
.cpdp-edition-bar {
display: grid;
gap: 0.6rem;
padding: 1rem 1.1rem;
background: linear-gradient(135deg, #FFFFFF, #F4F4F4);
border: 1px solid rgba(15,15,15,0.08);
border-radius: 16px;
}
.cpdp-edition-bar__head {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.06em;
color: rgba(15,15,15,0.65);
}
.cpdp-edition-bar__head strong {
color: #0F0F0F;
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.005em;
margin-right: 0.2em;
}
.cpdp-edition-bar__track {
position: relative;
height: 4px;
background: rgba(15,15,15,0.08);
border-radius: 999px;
overflow: hidden;
}
.cpdp-edition-bar__fill {
position: absolute;
inset: 0 auto 0 0;
background: linear-gradient(90deg, #0F0F0F, #555, #0F0F0F);
background-size: 200% 100%;
animation: chrome-btn-shimmer 10s linear infinite;
border-radius: 999px;
}
.cpdp-edition-bar__foot {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
color: rgba(15,15,15,0.55);
font-style: italic;
}
/* OPTIONS */
.cpdp-options {
display: grid;
gap: 1.25rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(15,15,15,0.08);
}
.cpdp-option { display: grid; gap: 0.65rem; }
.cpdp-option__head {
display: flex;
align-items: baseline;
gap: 0.5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.cpdp-option__lbl {
color: rgba(15,15,15,0.55);
}
.cpdp-option__head strong {
color: #0F0F0F;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
font-size: 0.9rem;
}
.cpdp-swatches {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.cpdp-swatch { position: relative; cursor: pointer; }
.cpdp-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.cpdp-swatch span {
display: inline-flex;
padding: 0.7rem 1.2rem;
background: #FFFFFF;
border: 1.5px solid rgba(15,15,15,0.12);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 500;
color: #0F0F0F;
transition: all 200ms ease;
}
.cpdp-swatch:hover span { border-color: #0F0F0F; }
.cpdp-swatch input:checked + span {
background: #0F0F0F;
color: #F5F5F5;
border-color: #0F0F0F;
}
.cpdp-packs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.55rem;
}
.cpdp-pack { position: relative; cursor: pointer; }
.cpdp-pack input { position: absolute; opacity: 0; pointer-events: none; }
.cpdp-pack__inner {
display: grid;
place-items: center;
padding: 1rem 0.65rem;
background: #FFFFFF;
border: 1.5px solid rgba(15,15,15,0.12);
border-radius: 14px;
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.01em;
text-transform: uppercase;
color: #0F0F0F;
transition: all 220ms ease;
text-align: center;
}
.cpdp-pack:hover .cpdp-pack__inner {
border-color: #0F0F0F;
transform: translateY(-1px);
}
.cpdp-pack input:checked ~ .cpdp-pack__inner {
background: rgba(15,15,15,0.04);
border-color: #0F0F0F;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.cpdp-pack--popular input:checked ~ .cpdp-pack__inner {
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.cpdp-pack__ribbon {
position: absolute;
top: -10px; left: 50%;
transform: translateX(-50%);
background: #0F0F0F;
color: #F5F5F5;
padding: 0.2rem 0.65rem;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
z-index: 2;
white-space: nowrap;
}
/* SUBSCRIBE */
.cpdp-sub {
display: grid;
gap: 0.5rem;
}
.cpdp-sub-opt {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.95rem 1.1rem;
background: #FFFFFF;
border: 1.5px solid rgba(15,15,15,0.12);
border-radius: 14px;
cursor: pointer;
transition: all 200ms ease;
position: relative;
}
.cpdp-sub-opt:hover { border-color: #0F0F0F; }
.cpdp-sub-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cpdp-sub-opt:has(input:checked) {
border-color: #0F0F0F;
background: rgba(15,15,15,0.04);
}
.cpdp-sub-radio {
width: 20px; height: 20px;
border: 2px solid rgba(15,15,15,0.2);
border-radius: 50%;
flex-shrink: 0;
position: relative;
transition: all 200ms ease;
background: #FFFFFF;
}
.cpdp-sub-opt input:checked ~ .cpdp-sub-radio {
border-color: #0F0F0F;
background: #0F0F0F;
}
.cpdp-sub-opt input:checked ~ .cpdp-sub-radio::after {
content: "";
position: absolute;
inset: 4px;
border-radius: 50%;
background: #FFFFFF;
}
.cpdp-sub-content {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
.cpdp-sub-title {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600;
font-size: 0.92rem;
color: #0F0F0F;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.cpdp-sub-pill {
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border: 1px solid rgba(0,0,0,0.08);
padding: 0.15rem 0.55rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.cpdp-sub-price {
font-family: 'Anton', sans-serif;
font-size: 1.15rem;
letter-spacing: 0.005em;
color: #0F0F0F;
}
/* PURCHASE ROW */
.cpdp-purchase {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.6rem;
margin-top: 0.25rem;
}
.cpdp-qty {
display: inline-flex;
align-items: center;
background: #FFFFFF;
border: 1.5px solid rgba(15,15,15,0.12);
border-radius: 999px;
overflow: hidden;
}
.cpdp-qty button {
background: transparent;
border: 0;
width: 44px;
height: 56px;
font-size: 1.3rem;
color: #0F0F0F;
cursor: pointer;
transition: background 200ms ease;
}
.cpdp-qty button:hover { background: rgba(15,15,15,0.06); }
.cpdp-qty input {
width: 38px;
text-align: center;
border: 0;
background: transparent;
font-family: 'Anton', sans-serif;
font-size: 1.05rem;
letter-spacing: 0.005em;
color: #0F0F0F;
appearance: textfield;
-moz-appearance: textfield;
outline: none;
}
.cpdp-qty input::-webkit-outer-spin-button,
.cpdp-qty input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.cpdp-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
padding: 1rem 1.75rem;
min-height: 56px;
background: linear-gradient(135deg, #0F0F0F, #2A2A2A, #0F0F0F);
color: #F5F5F5;
border: 0;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1);
position: relative;
overflow: hidden;
}
.cpdp-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
transition: transform 1500ms ease;
pointer-events: none;
}
.cpdp-cta:hover::before { transform: translateX(100%); }
.cpdp-cta__div {
width: 1px;
height: 18px;
background: rgba(255,255,255,0.25);
}
.cpdp-cta__price {
font-family: 'Anton', sans-serif;
font-size: 1.05rem;
letter-spacing: 0.005em;
font-weight: 400;
}
.cpdp-cta--inv {
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
color: #0F0F0F;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 8px 24px -8px rgba(0,0,0,0.3);
}
.cpdp-cta--inv .cpdp-cta__div { background: rgba(0,0,0,0.15); }
.cpdp-cta.added {
background: linear-gradient(135deg, #2D7A3F, #C9A96E) !important;
}
/* TRUST ROW */
.cpdp-trust {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0.5rem;
padding: 1rem;
background: #FFFFFF;
border-radius: 16px;
border: 1px solid rgba(15,15,15,0.06);
}
.cpdp-trust__item {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
color: rgba(15,15,15,0.7);
line-height: 1.3;
}
.cpdp-trust__item svg {
width: 22px; height: 22px;
color: #0F0F0F;
flex-shrink: 0;
}
.cpdp-trust__item strong {
color: #0F0F0F;
font-weight: 700;
}
/* STICKY CTA mobile */
.cpdp-sticky {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 30;
background: rgba(15, 15, 15, 0.96);
color: #F5F5F5;
padding: 0.65rem 0.85rem;
padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0));
transform: translateY(100%);
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1);
display: none;
border-top: 1px solid rgba(255,255,255,0.06);
}
.cpdp-sticky.visible { transform: translateY(0); }
.cpdp-sticky__inner {
max-width: 700px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 0.75rem;
align-items: center;
}
.cpdp-sticky__title {
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.005em;
text-transform: uppercase;
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cpdp-sticky__price {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
color: rgba(245,245,245,0.7);
margin-top: 0.15rem;
letter-spacing: 0.04em;
}
.cpdp-cta--sm {
min-height: 44px;
padding: 0.7rem 1.25rem;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
}
@media (max-width: 768px) {
.cpdp-sticky { display: block; }
body.template-product[data-lane="chrome"] main { padding-bottom: 100px; }
}
/* SPECS BAND */
.cpdp-specs {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(3rem, 6vw, 5rem) 1.5rem;
border-top: 1px solid rgba(255,255,255,0.06);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cpdp-specs__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.cpdp-spec__num {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1;
letter-spacing: -0.015em;
background: linear-gradient(180deg, #FFFFFF 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.cpdp-spec__lbl {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,245,245,0.55);
margin-top: 0.5rem;
}
/* EDITORIAL */
.cpdp-editorial {
background: #ECECEC;
padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 3vw, 2.5rem);
}
.cpdp-editorial__inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.cpdp-editorial__media {
aspect-ratio: 4/5;
border-radius: 24px;
overflow: hidden;
background: #FFF;
}
.cpdp-editorial__media img {
width: 100%; height: 100%;
object-fit: cover;
transform: scale(calc(1 + var(--p, 0) * 0.08));
transition: transform 0.1s linear;
}
.cpdp-editorial__copy {
display: grid;
gap: 1.5rem;
max-width: 520px;
}
.cpdp-kicker {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.cpdp-editorial__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.95;
text-transform: uppercase;
margin: 0;
}
.cpdp-editorial__title em {
font-style: italic;
background: linear-gradient(135deg, #F8F8F8, #888, #F8F8F8);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: chrome-btn-shimmer 12s linear infinite;
}
.cpdp-editorial__text {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.2vw, 1.1rem);
line-height: 1.6;
color: rgba(15,15,15,0.7);
margin: 0;
}
.cpdp-link {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
color: #0F0F0F;
padding: 0.5rem 0;
border-bottom: 1.5px solid #0F0F0F;
width: fit-content;
transition: gap 240ms ease;
}
.cpdp-link:hover { gap: 0.85rem; }
/* CHAPTERS */
.cpdp-chapters {
background: #FFFFFF;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.cpdp-chapters__head {
max-width: 880px;
margin: 0 auto clamp(2.5rem, 4vw, 3.5rem);
text-align: center;
display: grid;
gap: 1rem;
justify-items: center;
}
.cpdp-chapters__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 4.5vw, 3.75rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.95;
text-transform: uppercase;
margin: 0;
}
.cpdp-chapters__title em {
font-style: italic;
background: linear-gradient(135deg, #F8F8F8, #888, #F8F8F8);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: chrome-btn-shimmer 12s linear infinite;
}
.cpdp-chapters__list {
max-width: 880px;
margin: 0 auto;
}
.cpdp-chap {
border-bottom: 1px solid rgba(15,15,15,0.08);
transition: background 280ms ease;
}
.cpdp-chap:first-child { border-top: 1px solid rgba(15,15,15,0.08); }
.cpdp-chap[open] { background: rgba(15,15,15,0.02); }
.cpdp-chap summary {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.25rem;
padding: 1.5rem 0.5rem;
list-style: none;
cursor: pointer;
}
.cpdp-chap summary::-webkit-details-marker { display: none; }
.cpdp-chap__num {
font-family: 'Anton', sans-serif;
font-size: 1.6rem;
background: linear-gradient(180deg, #FFFFFF, #555);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.1));
}
.cpdp-chap__q {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 600;
color: #0F0F0F;
letter-spacing: -0.005em;
}
.cpdp-chap__plus {
position: relative;
width: 18px; height: 18px;
}
.cpdp-chap__plus::before, .cpdp-chap__plus::after {
content: "";
position: absolute;
background: #0F0F0F;
transition: transform 280ms ease;
}
.cpdp-chap__plus::before {
width: 100%; height: 1.5px;
top: 50%; left: 0; margin-top: -0.75px;
}
.cpdp-chap__plus::after {
width: 1.5px; height: 100%;
left: 50%; top: 0; margin-left: -0.75px;
}
.cpdp-chap[open] .cpdp-chap__plus::after { transform: rotate(90deg); }
.cpdp-chap__a {
padding: 0 0.5rem 1.5rem calc(0.5rem + 1.6rem + 1.25rem);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(15,15,15,0.7);
}
.cpdp-chap__a p { margin: 0 0 0.75rem; }
.cpdp-chap__a p:last-child { margin: 0; }
/* MOMENTS */
.cpdp-moments {
background: #ECECEC;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.cpdp-moments__grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.cpdp-moment {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3/4;
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1);
}
.cpdp-moment:hover { transform: translateY(-4px) rotate(-0.5deg); }
.cpdp-moment img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 700ms ease, filter 500ms ease;
}
.cpdp-moment:hover img {
transform: scale(1.06);
filter: saturate(1.2) hue-rotate(8deg);
}
.cpdp-moment__cap {
position: absolute;
inset: auto 0 0 0;
padding: 1.5rem 1.25rem 1.25rem;
background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
color: #FFFFFF;
display: flex;
align-items: baseline;
gap: 0.6rem;
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
}
.cpdp-moment__num {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
background: linear-gradient(180deg, #F8F8F8, #888);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* REVIEWS */
.cpdp-reviews {
background: #FFFFFF;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.cpdp-reviews__summary {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
color: rgba(15,15,15,0.65);
}
.cpdp-reviews__grid {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.cpdp-review {
background: #ECECEC;
padding: 2rem 1.75rem;
border-radius: 20px;
display: grid;
gap: 1rem;
position: relative;
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1);
}
.cpdp-review:hover { transform: translateY(-4px) rotate(0.3deg); }
.cpdp-review__mark {
font-family: 'Anton', sans-serif;
font-size: 5.5rem;
line-height: 0.4;
background: linear-gradient(180deg, #F8F8F8, #888);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
position: absolute;
top: 1.5rem; right: 1.75rem;
opacity: 0.6;
}
.cpdp-review blockquote {
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
line-height: 1.55;
color: #0F0F0F;
margin: 0;
font-weight: 400;
position: relative;
z-index: 1;
}
.cpdp-review footer {
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid rgba(15,15,15,0.1);
font-family: 'Space Grotesk', sans-serif;
display: grid;
gap: 0.15rem;
}
.cpdp-review footer div {
font-weight: 600;
font-size: 0.92rem;
color: #0F0F0F;
}
.cpdp-review footer span {
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
font-weight: 500;
}
/* UPSELL */
.cpdp-upsell {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
position: relative;
overflow: hidden;
}
.cpdp-upsell::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 50% 50% at 0% 50%, rgba(232,196,184,0.15), transparent 50%),
radial-gradient(ellipse 50% 50% at 100% 50%, rgba(118,199,255,0.12), transparent 50%);
pointer-events: none;
}
.cpdp-upsell__inner {
position: relative;
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.cpdp-upsell__copy {
display: grid;
gap: 1.5rem;
max-width: 520px;
}
.cpdp-upsell__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 5.5vw, 4.5rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.95;
text-transform: uppercase;
margin: 0;
}
.cpdp-upsell__title em {
font-style: italic;
background: linear-gradient(135deg, #F8F8F8, #888, #F8F8F8);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: chrome-btn-shimmer 12s linear infinite;
}
.cpdp-upsell__text {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.2vw, 1.1rem);
line-height: 1.55;
color: rgba(245,245,245,0.7);
margin: 0;
}
.cpdp-upsell__media {
position: relative;
aspect-ratio: 4/5;
border-radius: 24px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.16);
display: block;
transition: transform 600ms ease;
}
.cpdp-upsell__media:hover { transform: translateY(-4px); }
.cpdp-upsell__media img {
width: 100%; height: 100%;
object-fit: cover;
transform: scale(calc(1 + var(--p, 0) * 0.06));
transition: transform 0.1s linear;
}
.cpdp-upsell__tag {
position: absolute;
top: 1rem; left: 1rem;
padding: 0.45rem 0.95rem;
background: linear-gradient(135deg, #F8F8F8, #888, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* MOBILE */
@media (max-width: 1000px) {
.cpdp-hero { grid-template-columns: 1fr; gap: 1.5rem; }
.cpdp-hero__gallery { position: static; }
.cpdp-specs__inner { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
.cpdp-editorial__inner { grid-template-columns: 1fr; gap: 2rem; }
.cpdp-moments__grid { grid-template-columns: repeat(2, 1fr); }
.cpdp-reviews__grid { grid-template-columns: 1fr; }
.cpdp-upsell__inner { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
.cpdp-upsell__copy { max-width: none; }
}
@media (max-width: 600px) {
.cpdp-ticker__track { font-size: 0.75rem; gap: 1.25rem; }
.cpdp-hero__main { border-radius: 20px; }
.cpdp-hero__edition { top: 0.85rem; left: 0.85rem; padding: 0.4rem 0.7rem; }
.cpdp-hero__edition-num { font-size: 0.95rem; }
.cpdp-hero__status { top: 0.85rem; right: 0.85rem; padding: 0.4rem 0.75rem; font-size: 0.75rem; }
.cpdp-thumb { flex: 0 0 calc((100% - 3 * 0.5rem) / 4); max-width: none; }
.cpdp-title { font-size: clamp(2rem, 9vw, 3rem); }
.cpdp-price { font-size: 2.25rem; }
.cpdp-trust { grid-template-columns: 1fr; gap: 0.75rem; }
.cpdp-specs__inner { grid-template-columns: 1fr; gap: 2.5rem; }
.cpdp-packs { grid-template-columns: 1fr; gap: 0.5rem; }
.cpdp-pack__inner { flex-direction: row; padding: 0.85rem 1rem; }
.cpdp-pack__ribbon { left: 1rem; transform: none; }
.cpdp-chap summary { padding: 1.25rem 0.25rem; gap: 0.85rem; }
.cpdp-chap__a { padding-left: 0.25rem; padding-right: 0.25rem; }
.cpdp-chapters__head { padding-left: 0; padding-right: 0; }
}
/* ============================================================
CHROME — additional sections (perks, compare, drops)
============================================================ */
/* MEMBER PERKS */
.chrome-perks {
background: #ECECEC;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.chrome-perks__intro {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.55;
color: rgba(15,15,15,0.65);
max-width: 600px;
margin: 0 auto;
}
.chrome-perks__grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.chrome-perk {
background: #FFFFFF;
border-radius: 20px;
padding: 2rem 1.5rem;
display: grid;
gap: 0.75rem;
align-content: start;
position: relative;
overflow: hidden;
transition: transform 400ms cubic-bezier(0.2,0.8,0.2,1), box-shadow 400ms ease;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 30px -16px rgba(0,0,0,0.12);
}
.chrome-perk:hover {
transform: translateY(-6px);
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 24px 50px -16px rgba(0,0,0,0.2);
}
.chrome-perk::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(232,196,184,0.08) 50%, rgba(118,199,255,0.08) 100%);
opacity: 0;
transition: opacity 400ms ease;
pointer-events: none;
}
.chrome-perk:hover::before { opacity: 1; }
.chrome-perk__num {
font-family: 'Anton', sans-serif;
font-size: 2.5rem;
line-height: 0.9;
letter-spacing: 0.005em;
background: linear-gradient(180deg, #F8F8F8 0%, #777 70%, #F8F8F8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
margin-bottom: 0.5rem;
}
.chrome-perk__title {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.005em;
text-transform: uppercase;
font-weight: 400;
color: #0F0F0F;
margin: 0;
line-height: 1.05;
}
.chrome-perk__text {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
line-height: 1.55;
color: rgba(15,15,15,0.65);
margin: 0;
}
/* COMPARE THE DIFFERENCE */
.chrome-compare {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
position: relative;
overflow: hidden;
}
.chrome-compare .chrome-products__title {
color: #F5F5F5;
}
.chrome-compare .chrome-kicker {
color: rgba(245,245,245,0.55);
}
/* Legend — hidden on desktop, visible on mobile via media query below */
.chrome-compare__legend {
display: none;
max-width: 1100px;
margin: 0 auto 1rem;
padding: 0 0.5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245,245,245,0.6);
gap: 1.25rem;
align-items: center;
}
.chrome-compare__legend-item {
display: inline-flex; align-items: center; gap: 0.5rem;
}
.chrome-compare__legend-chip {
display: inline-block;
width: 14px; height: 14px; border-radius: 4px;
}
.chrome-compare__legend-chip--us {
background: linear-gradient(135deg, #F8F8F8, #B0B0B0 50%, #888);
border: 1px solid rgba(232,213,176,0.5);
}
.chrome-compare__legend-chip--other {
background: rgba(245,245,245,0.08);
border: 1px solid rgba(245,245,245,0.15);
}
.chrome-compare__table {
max-width: 1100px;
margin: 0 auto;
background: #1A1A1A;
border-radius: 20px;
padding: 1rem;
border: 1px solid rgba(255,255,255,0.06);
overflow: hidden;
}
.chrome-compare__head,
.chrome-compare__row {
display: grid;
grid-template-columns: 1.2fr 1.4fr repeat(3, 1fr);
align-items: center;
gap: 0.5rem;
padding: 1rem 0.75rem;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.chrome-compare__row:last-child { border-bottom: 0; }
.chrome-compare__col {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245,245,245,0.45);
text-align: center;
}
.chrome-compare__col--us {
text-align: center;
color: #F5F5F5;
}
.chrome-compare__col-tag {
display: inline-flex;
padding: 0.4rem 0.95rem;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border-radius: 999px;
font-family: 'Anton', sans-serif;
font-size: 0.85rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.chrome-compare__lbl {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(245,245,245,0.85);
}
.chrome-compare__cell {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.02em;
text-align: center;
padding: 0.55rem 0.5rem;
border-radius: 10px;
border: 1px solid transparent;
transition: background-color 300ms var(--ease);
}
/* ATEM column — chrome treatment, always visually distinct from competitors */
.chrome-compare__cell--us {
background: linear-gradient(135deg, rgba(232,213,176,0.14) 0%, rgba(255,255,255,0.04) 50%, rgba(232,196,184,0.14) 100%);
border-color: rgba(232,213,176,0.32);
font-weight: 600;
}
/* Chrome silver gradient text fill on Atem values (inner span) */
.chrome-compare__us-val {
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
/* Static — no shimmer animation; keeps small text legible */
}
/* Mid — neutral competitor value, no strikethrough */
.chrome-compare__cell--mid {
color: rgba(245,245,245,0.5);
}
/* Bad — competitor directly contradicts Atem's position. Strikethrough. */
.chrome-compare__cell--bad {
color: rgba(245,245,245,0.35);
text-decoration: line-through;
text-decoration-color: rgba(245,245,245,0.22);
text-decoration-thickness: 1px;
}
/* DROP CALENDAR */
.chrome-drops {
background: #ECECEC;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.chrome-drops__list {
max-width: 980px;
margin: 0 auto;
display: grid;
gap: 1rem;
}
.chrome-drop {
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 1.5rem;
align-items: center;
background: #FFFFFF;
border-radius: 20px;
padding: 1.5rem 1.75rem;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 20px -12px rgba(0,0,0,0.1);
transition: transform 320ms cubic-bezier(0.2,0.8,0.2,1);
}
.chrome-drop:hover { transform: translateY(-3px); }
.chrome-drop--past { opacity: 0.7; }
.chrome-drop--live {
background: linear-gradient(135deg, #FFFFFF 0%, #F4F4F4 100%);
border: 1px solid rgba(15,15,15,0.1);
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 16px 40px -12px rgba(0,0,0,0.18);
}
.chrome-drop--upcoming {
background: #0F0F0F;
color: #F5F5F5;
}
.chrome-drop__date {
display: grid;
gap: 0.25rem;
text-align: center;
padding: 1rem;
background: rgba(15,15,15,0.05);
border-radius: 12px;
align-self: stretch;
align-content: center;
}
.chrome-drop--upcoming .chrome-drop__date {
background: linear-gradient(135deg, rgba(232,196,184,0.18), rgba(118,199,255,0.18));
}
.chrome-drop__month {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,15,15,0.6);
}
.chrome-drop--upcoming .chrome-drop__month { color: rgba(245,245,245,0.7); }
.chrome-drop__day {
font-family: 'Anton', sans-serif;
font-size: 2.5rem;
line-height: 1;
letter-spacing: 0.005em;
color: #0F0F0F;
}
.chrome-drop--upcoming .chrome-drop__day { color: #F5F5F5; }
.chrome-drop__year {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
}
.chrome-drop--upcoming .chrome-drop__year { color: rgba(245,245,245,0.6); }
.chrome-drop__body { display: grid; gap: 0.4rem; }
.chrome-drop__status {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 0.25rem 0.65rem;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
background: rgba(15,15,15,0.08);
color: rgba(15,15,15,0.55);
line-height: 1;
}
.chrome-drop--live .chrome-drop__status,
.chrome-drop__status--live {
background: #0F0F0F;
color: #F5F5F5;
gap: 0.45rem;
}
.chrome-drop__status--live::before {
content: "";
display: inline-block;
flex-shrink: 0;
width: 6px; height: 6px;
border-radius: 50%;
background: #C9A96E;
animation: pulse-dot 1.5s ease-in-out infinite;
}
.chrome-drop--upcoming .chrome-drop__status {
background: rgba(255,255,255,0.08);
color: rgba(245,245,245,0.7);
}
.chrome-drop__title {
font-family: 'Anton', sans-serif;
font-size: clamp(1.2rem, 2vw, 1.5rem);
letter-spacing: 0.005em;
text-transform: uppercase;
font-weight: 400;
margin: 0;
line-height: 1.1;
color: inherit;
}
.chrome-drop__text {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(15,15,15,0.65);
margin: 0;
}
.chrome-drop--upcoming .chrome-drop__text { color: rgba(245,245,245,0.7); }
.chrome-drop__cta a {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: inherit;
text-decoration: none;
padding: 0.85rem 1.25rem;
border: 1.5px solid currentColor;
border-radius: 999px;
transition: all 280ms ease;
white-space: nowrap;
}
.chrome-drop__cta a:hover {
background: currentColor;
}
.chrome-drop:not(.chrome-drop--upcoming) .chrome-drop__cta a:hover {
color: #FFF;
}
.chrome-drop--upcoming .chrome-drop__cta a:hover {
color: #0F0F0F;
}
/* MOBILE for new sections */
@media (max-width: 1000px) {
.chrome-perks__grid { grid-template-columns: repeat(2, 1fr); }
.chrome-compare__head,
.chrome-compare__row {
grid-template-columns: 1fr 1.2fr 0.9fr 0.9fr 0.9fr;
gap: 0.4rem;
padding: 0.85rem 0.5rem;
}
.chrome-compare__cell { font-size: 0.75rem; padding: 0.4rem 0.25rem; }
.chrome-compare__lbl { font-size: 0.75rem; }
.chrome-compare__col { font-size: 0.75rem; letter-spacing: 0.08em; }
.chrome-drop {
grid-template-columns: 90px 1fr;
gap: 1rem;
padding: 1.25rem;
}
.chrome-drop__cta { grid-column: 1 / -1; justify-self: stretch; }
.chrome-drop__cta a { display: block; text-align: center; }
.chrome-drop__day { font-size: 1.75rem; }
}
@media (max-width: 600px) {
.chrome-perks__grid { grid-template-columns: 1fr; }
/* Show legend on mobile only */
.chrome-compare__legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.chrome-compare__table { padding: 0.5rem; }
.chrome-compare__head { display: none; }
.chrome-compare__row {
grid-template-columns: 1fr;
gap: 0.5rem;
padding: 1rem 0.85rem 0.75rem;
border-radius: 14px;
background: rgba(255,255,255,0.03);
margin-bottom: 0.5rem;
border: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.chrome-compare__lbl {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #C9A96E;
text-align: center;
margin-bottom: 0.5rem;
font-weight: 600;
}
.chrome-compare__cell {
text-align: left;
padding: 0.55rem 0.85rem;
display: grid;
grid-template-columns: 110px 1fr;
align-items: baseline;
gap: 0.75rem;
}
/* Universal column label — uses data-col attribute on every cell */
.chrome-compare__cell::before {
content: attr(data-col);
color: rgba(245,245,245,0.45);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 500;
}
/* Atem cell label gets champagne emphasis */
.chrome-compare__cell--us::before {
color: #E8D5B0;
font-weight: 700;
}
}
/* ============================================================
OUR STORY PAGE — chrome editorial
============================================================ */
.story-hero {
position: relative;
background:
radial-gradient(ellipse at 30% 30%, rgba(232,196,184,0.18) 0%, transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(118,199,255,0.18) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #DEDEDE 50%, #F0F0F0 100%);
padding: clamp(7rem, 14vw, 11rem) 1.5rem clamp(4rem, 8vw, 7rem);
overflow: hidden;
text-align: center;
}
.story-hero__noise {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.5;
mix-blend-mode: overlay;
pointer-events: none;
}
.story-hero__inner {
position: relative;
max-width: 880px;
margin: 0 auto;
display: grid;
gap: 1.25rem;
justify-items: center;
}
.story-hero__kicker {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.story-hero__title {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 0.92;
text-transform: uppercase;
margin: 0;
color: #0F0F0F;
max-width: 920px;
}
.story-hero__title em {
font-style: italic;
background: linear-gradient(180deg, #F8F8F8 0%, #888 50%, #F8F8F8 100%);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: chrome-btn-shimmer 12s linear infinite;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}
.story-hero__sub {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.55;
color: rgba(15,15,15,0.65);
max-width: 540px;
margin: 0;
}
.story-hero__meta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(15,15,15,0.65);
margin-top: 0.5rem;
}
.story-hero__author {
font-weight: 700;
color: #0F0F0F;
}
/* Body */
.story-body {
background: #ECECEC;
padding: clamp(4rem, 8vw, 7rem) 1.5rem;
}
.story-body__inner {
max-width: 720px;
margin: 0 auto;
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.05rem, 1.3vw, 1.18rem);
line-height: 1.7;
color: rgba(15,15,15,0.8);
}
.story-body__inner p {
margin: 0 0 1.5rem;
}
.story-body__inner em {
font-style: italic;
color: #0F0F0F;
}
.story-lead {
font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.3rem, 2vw, 1.6rem) !important;
line-height: 1.45 !important;
color: #0F0F0F !important;
font-weight: 400;
letter-spacing: -0.01em;
margin-bottom: 2.5rem !important;
}
.story-lead em {
font-style: italic;
background: linear-gradient(180deg, #F8F8F8, #777);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 2px rgba(0,0,0,0.05));
}
.story-h {
font-family: 'Anton', sans-serif;
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1;
text-transform: uppercase;
color: #0F0F0F;
margin: 3rem 0 1.5rem;
}
.story-pull {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
align-items: start;
padding: 2rem 1.75rem;
margin: 2.5rem 0;
background: linear-gradient(135deg, #FFFFFF 0%, #F4F4F4 100%);
border-radius: 20px;
border: 1px solid rgba(15,15,15,0.06);
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 16px 40px -20px rgba(0,0,0,0.12);
}
.story-pull--right {
background: #0F0F0F;
color: #F5F5F5;
border-color: rgba(255,255,255,0.06);
}
.story-pull__num {
font-family: 'Anton', sans-serif;
font-size: 3.5rem;
line-height: 0.85;
letter-spacing: 0.005em;
background: linear-gradient(180deg, #FFFFFF 0%, #888 60%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
align-self: start;
margin-top: -0.15em;
}
.story-pull p {
font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif !important;
font-size: clamp(1.2rem, 1.8vw, 1.45rem) !important;
font-style: italic;
line-height: 1.45 !important;
margin: 0 !important;
color: inherit !important;
}
.story-pull--right p { color: #F5F5F5 !important; }
.story-divider {
display: flex;
align-items: center;
gap: 1rem;
margin: 3rem 0;
}
.story-divider span:first-child,
.story-divider span:last-child {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(15,15,15,0.18), transparent);
}
.story-divider span.gold {
background: linear-gradient(180deg, #F8F8F8, #888);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-size: 1.25rem;
flex: 0;
height: auto;
}
.story-signoff {
margin: 3rem 0 2rem;
padding: 2rem 0;
border-top: 1px solid rgba(15,15,15,0.1);
border-bottom: 1px solid rgba(15,15,15,0.1);
text-align: center;
}
.story-signoff__sig {
font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
font-size: clamp(2rem, 4vw, 3rem);
font-style: italic;
font-weight: 400;
color: #0F0F0F;
letter-spacing: -0.02em;
line-height: 1;
}
.story-signoff__title {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
margin-top: 0.75rem;
}
.story-cta {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin: 2rem auto 0;
padding: 1rem 2rem;
background: linear-gradient(135deg, #0F0F0F, #2A2A2A, #0F0F0F);
color: #F5F5F5;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1);
position: relative;
overflow: hidden;
}
.story-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transform: translateX(-100%);
transition: transform 1500ms ease;
pointer-events: none;
}
.story-cta:hover::before { transform: translateX(100%); }
.story-cta:hover { transform: translateY(-2px); }
/* Story stats — chrome */
.story-stats {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(4rem, 7vw, 6rem) 1.5rem;
border-top: 1px solid rgba(255,255,255,0.06);
}
.story-stats__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.story-stat__num {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 7vw, 6rem);
line-height: 1;
letter-spacing: -0.02em;
background: linear-gradient(180deg, #FFFFFF 0%, #888 50%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.story-stat__lbl {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245,245,245,0.55);
margin-top: 0.5rem;
}
@media (max-width: 900px) {
.story-stats__inner { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1rem; }
}
@media (max-width: 600px) {
.story-pull {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.5rem;
}
.story-pull__num { font-size: 2.5rem; }
.story-stats__inner { grid-template-columns: 1fr; }
.story-h { margin: 2rem 0 1rem; }
}
/* ============================================================
CART DRAWER — chrome rebuild
============================================================ */
/* Override existing cart-drawer styles for chrome */
body[data-lane="chrome"] .cart-drawer,
.cart-drawer--chrome {
position: fixed;
top: 0;
right: 0;
width: min(440px, 100vw);
height: 100vh;
height: 100dvh;
background: #ECECEC;
color: #0F0F0F;
z-index: 60;
transform: translateX(100%);
transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
box-shadow: -30px 0 80px -20px rgba(0,0,0,0.3);
}
body[data-lane="chrome"] .cart-drawer.open,
.cart-drawer--chrome.open { transform: translateX(0); }
body[data-lane="chrome"] .cart-backdrop,
.cart-drawer--chrome ~ .cart-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 15, 15, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
pointer-events: none;
transition: opacity 280ms ease;
z-index: 55;
}
body[data-lane="chrome"] .cart-backdrop.open { opacity: 1; pointer-events: auto; }
/* HEAD */
.cart-drawer--chrome .cart-drawer__head {
background: #FFFFFF;
padding: 1.25rem 1.5rem 1rem;
border-bottom: 1px solid rgba(15,15,15,0.08);
}
.cart-drawer--chrome .cart-drawer__head-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.85rem;
}
.cart-drawer--chrome .cart-drawer__title {
display: inline-flex;
align-items: baseline;
gap: 0.65rem;
}
.cart-drawer--chrome .cart-drawer__title-num {
font-family: 'Anton', sans-serif;
font-size: 2rem;
line-height: 1;
letter-spacing: 0.005em;
background: linear-gradient(180deg, #FFFFFF 0%, #888 60%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.cart-drawer--chrome .cart-drawer__title-text {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15,15,15,0.65);
}
.cart-drawer--chrome .cart-drawer__close {
background: transparent;
border: 0;
width: 36px; height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
color: #0F0F0F;
transition: background 200ms ease;
}
.cart-drawer--chrome .cart-drawer__close:hover { background: rgba(15,15,15,0.06); }
.cart-drawer--chrome .cart-drawer__edition {
display: flex;
align-items: center;
gap: 0.65rem;
flex-wrap: wrap;
}
.cart-drawer--chrome .cart-drawer__edition-tag {
display: inline-flex;
padding: 0.3rem 0.7rem;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border: 1px solid rgba(0,0,0,0.08);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cart-drawer--chrome .cart-drawer__edition-msg {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
color: rgba(15,15,15,0.6);
}
/* SHIP BAR */
.cart-ship-bar {
background: #FFFFFF;
padding: 0.85rem 1.5rem 1rem;
border-bottom: 1px solid rgba(15,15,15,0.08);
}
.cart-ship-bar__msg {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.82rem;
color: rgba(15,15,15,0.7);
margin-bottom: 0.5rem;
}
.cart-ship-bar__msg strong { color: #0F0F0F; font-weight: 700; }
.cart-ship-bar__track {
position: relative;
height: 4px;
background: rgba(15,15,15,0.08);
border-radius: 999px;
overflow: hidden;
}
.cart-ship-bar__fill {
position: absolute;
inset: 0 auto 0 0;
background: linear-gradient(90deg, #0F0F0F 0%, #555 50%, #0F0F0F 100%);
background-size: 200% 100%;
animation: chrome-btn-shimmer 10s linear infinite;
border-radius: 999px;
transition: width 380ms cubic-bezier(0.2,0.8,0.2,1);
}
/* BODY */
.cart-drawer--chrome .cart-drawer__body {
flex: 1;
overflow-y: auto;
padding: 1rem 1.5rem;
background: #ECECEC;
}
/* Empty state */
.cart-empty {
display: grid;
gap: 0.85rem;
justify-items: center;
text-align: center;
padding: 3rem 1rem;
}
.cart-empty__num {
font-family: 'Anton', sans-serif;
font-size: 5rem;
line-height: 0.85;
letter-spacing: 0.005em;
background: linear-gradient(180deg, #F8F8F8 0%, #777 60%, #F8F8F8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
margin-bottom: 0.5rem;
}
.cart-empty__title {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
font-weight: 400;
letter-spacing: 0.005em;
text-transform: uppercase;
margin: 0;
color: #0F0F0F;
}
.cart-empty__text {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
line-height: 1.5;
color: rgba(15,15,15,0.65);
margin: 0;
max-width: 280px;
}
.cart-empty__cta {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin-top: 0.85rem;
padding: 0.85rem 1.5rem;
background: #0F0F0F;
color: #F5F5F5;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: transform 280ms ease;
}
.cart-empty__cta:hover { transform: translateY(-2px); }
/* CART LINE */
.cart-drawer--chrome .cart-line {
display: grid;
grid-template-columns: 84px 1fr auto;
gap: 1rem;
padding: 1rem;
background: #FFFFFF;
border-radius: 16px;
border: 0;
margin-bottom: 0.65rem;
position: relative;
transition: transform 240ms ease;
}
.cart-drawer--chrome .cart-line:hover { transform: translateY(-1px); }
.cart-line__media {
display: block;
width: 84px; height: 84px;
border-radius: 12px;
overflow: hidden;
background: #F4F4F4;
flex-shrink: 0;
}
.cart-drawer--chrome .cart-line img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
border-radius: 0;
}
.cart-line__info {
display: grid;
gap: 0.3rem;
align-content: start;
min-width: 0;
}
.cart-line__edition {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
}
.cart-line__title {
font-family: 'Anton', sans-serif;
font-size: 1.05rem;
font-weight: 400;
letter-spacing: 0.005em;
text-transform: uppercase;
color: #0F0F0F;
text-decoration: none;
line-height: 1.1;
display: block;
}
.cart-line__title:hover { color: rgba(15,15,15,0.7); }
.cart-line__variant {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
color: rgba(15,15,15,0.6);
}
.cart-line__bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
gap: 0.5rem;
}
.cart-line__qty {
display: inline-flex;
align-items: center;
background: #F4F4F4;
border-radius: 999px;
padding: 0.15rem;
}
.cart-line__qty button {
background: transparent;
border: 0;
width: 40px; height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
color: #0F0F0F;
transition: background 180ms ease;
}
.cart-line__qty button:focus-visible {
outline: 2px solid #C9A96E; outline-offset: 1px;
}
.cart-line__qty button:hover { background: rgba(15,15,15,0.08); }
.cart-line__qty span {
min-width: 24px;
text-align: center;
font-family: 'Anton', sans-serif;
font-size: 0.95rem;
letter-spacing: 0.005em;
color: #0F0F0F;
}
.cart-line__price {
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.005em;
color: #0F0F0F;
}
.cart-line__remove {
position: absolute;
top: 0.4rem;
right: 0.4rem;
background: transparent;
border: 0;
width: 40px; height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
cursor: pointer;
color: rgba(15,15,15,0.4);
transition: all 200ms ease;
}
.cart-line__remove:focus-visible {
outline: 2px solid #C9A96E; outline-offset: 1px;
}
.cart-line__remove:hover {
background: rgba(15,15,15,0.08);
color: #0F0F0F;
}
/* RECOMMENDATION */
.cart-rec {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px dashed rgba(15,15,15,0.18);
}
.cart-kicker {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.cart-rec__head { margin-bottom: 0.75rem; }
.cart-rec__card {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 1rem;
align-items: center;
padding: 0.85rem;
background: linear-gradient(135deg, #FFFFFF 0%, #F4F4F4 100%);
border-radius: 14px;
border: 1px solid rgba(15,15,15,0.06);
text-decoration: none;
color: inherit;
transition: transform 240ms ease, border-color 240ms ease;
}
.cart-rec__card:hover {
transform: translateY(-2px);
border-color: rgba(15,15,15,0.2);
}
.cart-rec__media {
position: relative;
width: 72px; height: 72px;
border-radius: 10px;
overflow: hidden;
}
.cart-rec__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-rec__tag {
position: absolute;
top: 4px; left: 4px;
padding: 0.1rem 0.35rem;
background: rgba(255,255,255,0.92);
color: #0F0F0F;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.1em;
}
.cart-rec__name {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
font-weight: 600;
color: #0F0F0F;
}
.cart-rec__sub {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
color: rgba(15,15,15,0.6);
margin-top: 0.15rem;
}
.cart-rec__plus {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
width: 36px; height: 36px;
border-radius: 50%;
background: #0F0F0F;
color: #F5F5F5;
display: grid;
place-items: center;
line-height: 0;
transition: transform 220ms ease;
}
.cart-rec__card:hover .cart-rec__plus { transform: rotate(90deg); }
/* FOOT */
.cart-drawer--chrome .cart-drawer__foot {
background: #FFFFFF;
padding: 1.25rem 1.5rem;
border-top: 1px solid rgba(15,15,15,0.08);
padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
}
.cart-foot__row {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
margin-bottom: 0.4rem;
}
.cart-foot__lbl {
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(15,15,15,0.65);
font-size: 0.78rem;
}
.cart-foot__val {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.005em;
color: #0F0F0F;
}
.cart-foot__shipping {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
color: rgba(15,15,15,0.55);
margin-bottom: 1rem;
}
.cart-foot__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 0.85rem;
padding: 1rem 1.5rem;
min-height: 56px;
/* Chrome silver gradient — polished metallic plaque */
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: transform 280ms ease, box-shadow 280ms ease;
position: relative;
overflow: hidden;
width: 100%;
}
.cart-foot__cta::before {
content: "";
position: absolute;
inset: 0;
/* Dark sweep across light surface — inverted polarity */
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.18), transparent);
transform: translateX(-100%);
transition: transform 1500ms ease;
pointer-events: none;
}
.cart-foot__cta:hover::before { transform: translateX(100%); }
.cart-foot__cta:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(15, 15, 15, 0.18);
}
.cart-foot__cta:active {
transform: translateY(0);
background-size: 100% 110%;
}
.cart-foot__cta-div {
width: 1px; height: 18px;
background: rgba(15, 15, 15, 0.22);
}
.cart-foot__cta-price {
font-family: 'Anton', sans-serif;
font-size: 1.05rem;
letter-spacing: 0.005em;
font-weight: 400;
}
.cart-foot__icons {
display: flex;
justify-content: center;
gap: 0.65rem;
margin-top: 0.85rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
color: rgba(15,15,15,0.5);
letter-spacing: 0.06em;
text-transform: uppercase;
flex-wrap: wrap;
}
/* Mobile cart drawer */
@media (max-width: 480px) {
body[data-lane="chrome"] .cart-drawer,
.cart-drawer--chrome { width: 100vw; }
.cart-drawer--chrome .cart-drawer__edition-msg { font-size: 0.72rem; }
.cart-drawer--chrome .cart-drawer__body { padding: 0.85rem 1rem; }
.cart-drawer--chrome .cart-line { padding: 0.85rem; gap: 0.75rem; grid-template-columns: 72px 1fr auto; }
.cart-line__media { width: 72px; height: 72px; }
}
/* ============================================================
CHROME — 404 PAGE
============================================================ */
.chrome-404 {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: 6rem 1.5rem 3rem;
background:
radial-gradient(ellipse at 25% 20%, rgba(232,196,184,0.25) 0%, transparent 50%),
radial-gradient(ellipse at 75% 80%, rgba(118,199,255,0.25) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #DEDEDE 50%, #F0F0F0 100%);
overflow: hidden;
}
.chrome-404__bg { position: absolute; inset: 0; pointer-events: none; }
.chrome-404__noise {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.5;
mix-blend-mode: overlay;
}
.chrome-404__blob {
position: absolute;
border-radius: 50%;
filter: blur(70px);
mix-blend-mode: hard-light;
}
.chrome-404__blob--a {
width: 50vw; height: 50vw;
background: radial-gradient(circle, #E8C4B8 0%, transparent 70%);
top: -10%; left: -10%;
animation: blob-drift 20s ease-in-out infinite;
}
.chrome-404__blob--b {
width: 50vw; height: 50vw;
background: radial-gradient(circle, #76C7FF 0%, transparent 70%);
bottom: -15%; right: -15%;
animation: blob-drift 24s ease-in-out infinite reverse;
}
.chrome-404__inner {
position: relative;
z-index: 1;
text-align: center;
display: grid;
gap: 1.5rem;
justify-items: center;
max-width: 700px;
}
.chrome-404__num {
font-family: 'Anton', sans-serif;
font-size: clamp(8rem, 28vw, 22rem);
font-weight: 400;
line-height: 0.78;
letter-spacing: -0.04em;
margin: 0;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 6px 0 rgba(0,0,0,0.06)) drop-shadow(0 24px 60px rgba(0,0,0,0.18));
}
.chrome-404__msg {
font-family: 'Space Grotesk', sans-serif;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
line-height: 1.5;
color: rgba(15,15,15,0.7);
margin: 0;
max-width: 460px;
}
.chrome-404__msg em {
font-style: italic;
background: linear-gradient(180deg, #F8F8F8, #777);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-404__actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
margin-top: 0.5rem;
}
.chrome-404__meta {
display: flex;
gap: 1rem;
align-items: center;
margin-top: 1.5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(15,15,15,0.45);
flex-wrap: wrap;
justify-content: center;
}
.chrome-404__meta strong { color: rgba(15,15,15,0.75); font-weight: 600; }
.chrome-404__divider { width: 1px; height: 14px; background: rgba(15,15,15,0.18); }
@media (max-width: 600px) {
.chrome-404__actions { flex-direction: column; width: 100%; max-width: 320px; }
.chrome-404__actions .chrome-btn { width: 100%; justify-content: center; }
}
/* ============================================================
CHROME — AUTH PAGES (login, register, activate, reset)
============================================================ */
.chrome-auth {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: grid;
place-items: center;
padding: 6rem 1.5rem 3rem;
background:
radial-gradient(ellipse at 30% 30%, rgba(232,196,184,0.18) 0%, transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(118,199,255,0.18) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #DEDEDE 50%, #F0F0F0 100%);
overflow: hidden;
}
.chrome-auth__bg { position: absolute; inset: 0; pointer-events: none; }
.chrome-auth__blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
mix-blend-mode: hard-light;
}
.chrome-auth__blob--a {
width: 50vw; height: 50vw;
background: radial-gradient(circle, #E8C4B8 0%, transparent 70%);
top: -20%; left: -10%;
animation: blob-drift 22s ease-in-out infinite;
}
.chrome-auth__blob--b {
width: 45vw; height: 45vw;
background: radial-gradient(circle, #76C7FF 0%, transparent 70%);
bottom: -20%; right: -10%;
animation: blob-drift 26s ease-in-out infinite reverse;
}
.chrome-auth__card {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(24px) saturate(180%);
-webkit-backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 28px;
padding: clamp(2rem, 4vw, 3rem);
width: 100%;
max-width: 460px;
box-shadow: 0 30px 80px -20px rgba(0,0,0,0.18);
}
.chrome-auth__head {
display: grid;
gap: 0.75rem;
justify-items: center;
text-align: center;
margin-bottom: 2rem;
}
.chrome-auth__monogram {
width: 56px; height: 56px;
display: grid;
place-items: center;
font-family: 'Anton', sans-serif;
font-size: 2.25rem;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 8px 20px -4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
margin-bottom: 0.25rem;
line-height: 1;
}
.chrome-auth__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 400;
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 1;
margin: 0;
color: #0F0F0F;
}
.chrome-auth__title--sm { font-size: 1.75rem; }
.chrome-auth__title em {
font-style: italic;
background: linear-gradient(180deg, #F8F8F8, #777);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-auth__sub {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
color: rgba(15,15,15,0.6);
margin: 0;
line-height: 1.4;
}
.chrome-auth__form {
display: grid;
gap: 1rem;
}
.chrome-auth__success {
background: rgba(15,15,15,0.06);
padding: 0.85rem 1rem;
border-radius: 12px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.88rem;
color: #0F0F0F;
margin: 0;
}
.chrome-field {
display: grid;
gap: 0.4rem;
}
.chrome-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.85rem;
}
.chrome-field label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.chrome-field input,
.chrome-field select,
.chrome-field textarea {
width: 100%;
padding: 0.85rem 1rem;
background: #FFFFFF;
border: 1.5px solid rgba(15,15,15,0.12);
border-radius: 12px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.95rem;
color: #0F0F0F;
transition: border-color 200ms ease, box-shadow 200ms ease;
outline: none;
}
.chrome-field input:focus,
.chrome-field select:focus,
.chrome-field textarea:focus {
border-color: #0F0F0F;
box-shadow: 0 0 0 3px rgba(15,15,15,0.08);
}
.chrome-field-check {
display: flex;
gap: 0.6rem;
align-items: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.9rem;
color: #0F0F0F;
cursor: pointer;
}
.chrome-field-check input { width: 18px; height: 18px; accent-color: #0F0F0F; }
.chrome-btn--full {
width: 100%;
justify-content: center;
}
.chrome-auth__links {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
flex-wrap: wrap;
gap: 0.5rem;
}
.chrome-auth__links a {
color: #0F0F0F;
text-decoration: none;
border-bottom: 1px solid rgba(15,15,15,0.2);
padding-bottom: 1px;
transition: border-color 200ms ease;
}
.chrome-auth__links a:hover { border-color: #0F0F0F; }
.chrome-auth__decline {
background: transparent;
border: 0;
color: rgba(15,15,15,0.55);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
padding: 0.5rem;
margin-top: 0.5rem;
text-decoration: underline;
text-underline-offset: 4px;
}
/* ============================================================
CHROME — ACCOUNT DASHBOARD
============================================================ */
.chrome-account {
background: #ECECEC;
min-height: 100vh;
padding: clamp(5rem, 9vw, 8rem) 1.5rem 4rem;
position: relative;
overflow: hidden;
}
.chrome-account .chrome-auth__bg { position: absolute; inset: 0; pointer-events: none; }
.chrome-account__inner {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.chrome-account__hero {
display: grid;
gap: 0.75rem;
margin-bottom: 2.5rem;
}
.chrome-account__hero--sm { gap: 0.5rem; }
.chrome-account__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1;
text-transform: uppercase;
margin: 0;
color: #0F0F0F;
}
.chrome-account__title em {
font-style: italic;
background: linear-gradient(180deg, #F8F8F8 0%, #777 60%, #F8F8F8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-account__sub {
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
color: rgba(15,15,15,0.6);
margin: 0;
}
.chrome-account__back {
display: inline-flex;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
text-decoration: none;
margin-top: 0.5rem;
transition: color 200ms ease;
}
.chrome-account__back:hover { color: #0F0F0F; }
/* Member ID card */
.chrome-account__id-card {
position: relative;
margin-top: 2rem;
padding: 2rem 1.75rem;
border-radius: 20px;
background: linear-gradient(135deg, #0F0F0F, #2A2A2A);
color: #F5F5F5;
overflow: hidden;
max-width: 480px;
box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5);
}
.chrome-account__id-card-bg {
position: absolute;
inset: 0;
background:
linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%),
radial-gradient(ellipse at 100% 0%, rgba(232,196,184,0.15), transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(118,199,255,0.15), transparent 50%);
background-size: 200% 100%, auto, auto;
animation: chrome-btn-shimmer 15s linear infinite;
pointer-events: none;
}
.chrome-account__id-card-content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem 2rem;
}
.chrome-account__id-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,245,245,0.55);
margin-bottom: 0.4rem;
}
.chrome-account__id-num {
font-family: 'Anton', sans-serif;
font-size: 2.25rem;
letter-spacing: 0.005em;
line-height: 1;
background: linear-gradient(180deg, #FFFFFF 0%, #888 60%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-account__id-edition {
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.005em;
line-height: 1;
color: #F5F5F5;
}
.chrome-account__id-name {
grid-column: 1 / -1;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.16em;
color: rgba(245,245,245,0.85);
padding-top: 0.85rem;
border-top: 1px solid rgba(255,255,255,0.1);
}
/* Account grid */
.chrome-account__grid {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 1.5rem;
}
.chrome-account__col { display: grid; gap: 1rem; align-content: start; }
.chrome-account__panel {
background: #FFFFFF;
border-radius: 20px;
padding: 1.75rem;
box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 12px 30px -16px rgba(0,0,0,0.1);
}
.chrome-account__panel--dark {
background: #0F0F0F;
color: #F5F5F5;
}
.chrome-account__panel-head {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 1rem;
}
.chrome-account__panel h2,
.chrome-account__panel h3 {
font-family: 'Anton', sans-serif;
font-size: 1.25rem;
font-weight: 400;
letter-spacing: 0.005em;
text-transform: uppercase;
margin: 0 0 1rem;
color: inherit;
}
.chrome-account__panel--dark p {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.92rem;
line-height: 1.55;
color: rgba(245,245,245,0.7);
margin: 0 0 0.85rem;
}
.chrome-account__more {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
text-decoration: none;
}
.chrome-account__more:hover { color: #0F0F0F; }
.chrome-account__orders { display: grid; gap: 0.5rem; }
.chrome-order {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 1rem;
align-items: center;
padding: 1rem;
background: #ECECEC;
border-radius: 12px;
text-decoration: none;
color: #0F0F0F;
transition: transform 200ms ease, background 200ms ease;
}
.chrome-order:hover { transform: translateY(-1px); background: #E2E2E2; }
.chrome-order__num {
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.005em;
}
.chrome-order__body {
font-family: 'Space Grotesk', sans-serif;
}
.chrome-order__date { font-size: 0.85rem; font-weight: 500; }
.chrome-order__items { font-size: 0.75rem; color: rgba(15,15,15,0.55); }
.chrome-order__total {
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.005em;
}
.chrome-order__status-pill {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 0.25rem 0.55rem;
background: #0F0F0F;
color: #F5F5F5;
border-radius: 999px;
}
.chrome-empty {
display: grid;
gap: 0.85rem;
justify-items: center;
text-align: center;
padding: 2rem 1rem;
}
.chrome-empty__num {
font-family: 'Anton', sans-serif;
font-size: 4rem;
line-height: 0.85;
background: linear-gradient(180deg, #F8F8F8 0%, #777 60%, #F8F8F8 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.chrome-empty p {
font-family: 'Space Grotesk', sans-serif;
color: rgba(15,15,15,0.65);
margin: 0 0 0.5rem;
}
.chrome-account__details {
display: grid;
gap: 0.6rem;
margin-bottom: 1rem;
}
.chrome-account__details > div {
display: flex;
justify-content: space-between;
align-items: baseline;
font-family: 'Space Grotesk', sans-serif;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(15,15,15,0.06);
}
.chrome-account__details > div:last-child { border-bottom: 0; }
.chrome-account__details span {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.chrome-account__details strong { font-size: 0.92rem; color: #0F0F0F; font-weight: 600; }
.chrome-account__panel-link {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #0F0F0F;
text-decoration: none;
border-bottom: 1.5px solid #0F0F0F;
padding-bottom: 1px;
}
.chrome-account__priority {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.95rem;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
color: #0F0F0F;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
}
.chrome-account__priority-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #0F0F0F;
animation: pulse-dot 2s ease-in-out infinite;
}
.chrome-account__priority-note {
font-size: 0.85rem !important;
color: rgba(245,245,245,0.55) !important;
font-style: italic;
}
.chrome-account__signout {
display: block;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
text-decoration: none;
padding: 1rem;
background: transparent;
border: 1px solid rgba(15,15,15,0.12);
border-radius: 12px;
transition: all 200ms ease;
}
.chrome-account__signout:hover {
color: #0F0F0F;
border-color: #0F0F0F;
}
@media (max-width: 900px) {
.chrome-account__grid { grid-template-columns: 1fr; }
.chrome-account__id-card-content { grid-template-columns: 1fr; gap: 1rem; }
}
/* Addresses + Order detail */
.chrome-addr-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1rem;
}
.chrome-addr-card {
background: #FFFFFF;
border-radius: 16px;
padding: 1.5rem;
position: relative;
display: grid;
gap: 0.85rem;
}
.chrome-addr-card--add {
background: transparent;
border: 1.5px dashed rgba(15,15,15,0.2);
align-content: center;
justify-items: center;
text-align: center;
cursor: pointer;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.85rem;
color: rgba(15,15,15,0.55);
min-height: 180px;
transition: all 200ms ease;
}
.chrome-addr-card--add:hover {
border-color: #0F0F0F;
color: #0F0F0F;
}
.chrome-addr-add {
font-family: 'Anton', sans-serif;
font-size: 2.5rem;
line-height: 1;
}
.chrome-addr-card--edit { background: #FFFFFF; }
.chrome-addr-card--edit h3 {
font-family: 'Anton', sans-serif;
font-size: 1.1rem;
letter-spacing: 0.005em;
text-transform: uppercase;
margin: 0;
}
.chrome-addr-card__default {
position: absolute;
top: 1rem; right: 1rem;
padding: 0.25rem 0.55rem;
background: #0F0F0F;
color: #F5F5F5;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.chrome-addr-card__name {
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
font-weight: 700;
color: #0F0F0F;
}
.chrome-addr-card__line {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.88rem;
color: rgba(15,15,15,0.7);
}
.chrome-addr-card__actions {
display: flex;
gap: 0.85rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: 0.5rem;
padding-top: 0.85rem;
border-top: 1px solid rgba(15,15,15,0.06);
}
.chrome-addr-card__actions a,
.chrome-addr-card__actions button {
background: none;
border: 0;
cursor: pointer;
color: #0F0F0F;
font-weight: 600;
text-decoration: none;
border-bottom: 1.5px solid rgba(15,15,15,0.2);
padding-bottom: 1px;
transition: border-color 200ms ease;
}
.chrome-addr-card__actions a:hover,
.chrome-addr-card__actions button:hover { border-color: #0F0F0F; }
.chrome-addr-form-actions {
display: flex;
gap: 1rem;
align-items: center;
margin-top: 1rem;
}
/* Order detail */
.chrome-order-detail {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 1.5rem;
}
.chrome-order-detail__main, .chrome-order-detail__side { display: grid; gap: 1rem; align-content: start; }
.chrome-order-items { display: grid; gap: 0.85rem; }
.chrome-order-item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 1rem;
align-items: center;
padding: 0.85rem;
background: #ECECEC;
border-radius: 12px;
}
.chrome-order-item img {
width: 64px; height: 64px;
object-fit: cover;
border-radius: 8px;
}
.chrome-order-item__edition {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15,15,15,0.5);
}
.chrome-order-item__title {
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.005em;
text-transform: uppercase;
color: #0F0F0F;
margin-top: 0.25rem;
}
.chrome-order-item__qty {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
color: rgba(15,15,15,0.6);
}
.chrome-order-item__price {
font-family: 'Anton', sans-serif;
font-size: 1rem;
letter-spacing: 0.005em;
}
.chrome-order-totals {
display: grid;
gap: 0.5rem;
font-family: 'Space Grotesk', sans-serif;
}
.chrome-order-totals > div {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.92rem;
color: rgba(15,15,15,0.7);
}
.chrome-order-totals > div strong { color: #0F0F0F; font-weight: 600; }
.chrome-order-totals__final {
border-top: 1px solid rgba(15,15,15,0.1);
padding-top: 0.85rem !important;
margin-top: 0.5rem;
font-size: 1rem !important;
color: #0F0F0F !important;
}
.chrome-order-totals__final strong { font-family: 'Anton', sans-serif; font-size: 1.4rem; letter-spacing: 0.005em; }
.chrome-order-addr {
display: grid;
gap: 0.3rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.88rem;
color: rgba(15,15,15,0.7);
}
.chrome-order-addr strong { color: #0F0F0F; font-size: 0.95rem; }
.chrome-order-status-list { display: grid; gap: 0.65rem; }
.chrome-order-status-list > div {
display: flex;
justify-content: space-between;
font-family: 'Space Grotesk', sans-serif;
}
.chrome-order-status-list span {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
}
.chrome-order-status-list strong { font-size: 0.9rem; color: #0F0F0F; }
@media (max-width: 900px) {
.chrome-order-detail { grid-template-columns: 1fr; }
.chrome-field-row { grid-template-columns: 1fr; }
}
/* ============================================================
CHROME — PDP VIDEO BLOCK
============================================================ */
.cpdp-video {
background: #0F0F0F;
color: #F5F5F5;
padding: clamp(4rem, 8vw, 8rem) 1.5rem;
}
.cpdp-video .cpdp-chapters__title {
color: #F5F5F5;
}
.cpdp-video .cpdp-kicker { color: rgba(245,245,245,0.55); }
.cpdp-video__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 3rem;
align-items: center;
}
.cpdp-video__player {
position: relative;
aspect-ratio: 16/10;
border-radius: 24px;
overflow: hidden;
background: #000;
border: 1px solid rgba(255,255,255,0.08);
cursor: pointer;
}
.cpdp-video__el {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.cpdp-video__overlay {
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.2), rgba(0,0,0,0.5));
pointer-events: none;
transition: opacity 380ms ease;
}
.cpdp-video__player.playing .cpdp-video__overlay { opacity: 0; }
.cpdp-video__play {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 88px; height: 88px;
border-radius: 50%;
background: linear-gradient(135deg, #F8F8F8, #BBB, #FFFFFF);
background-size: 200% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border: 1px solid rgba(0,0,0,0.1);
color: #0F0F0F;
cursor: pointer;
display: grid;
place-items: center;
box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5);
transition: transform 280ms cubic-bezier(0.2,0.8,0.2,1), opacity 280ms ease;
}
.cpdp-video__play:hover { transform: translate(-50%, -50%) scale(1.08); }
.cpdp-video__player.playing .cpdp-video__play { opacity: 0; transform: translate(-50%, -50%) scale(0.5); pointer-events: none; }
.cpdp-video__play svg { margin-left: 4px; }
.cpdp-video__copy {
display: flex;
gap: 1rem;
align-items: start;
}
.cpdp-video__num {
font-family: 'Anton', sans-serif;
font-size: 3rem;
line-height: 0.85;
background: linear-gradient(180deg, #FFFFFF 0%, #888 60%, #FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
}
.cpdp-video__copy p {
font-family: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
font-size: clamp(1.15rem, 1.6vw, 1.4rem);
font-style: italic;
line-height: 1.4;
color: #F5F5F5;
margin: 0;
}
@media (max-width: 900px) {
.cpdp-video__inner { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* ============================================================
PREMIUM PALETTE TILT — final accent overrides
Replaces residual Y2K candy energy with rose / gold / champagne
============================================================ */
/* Live-status pulse — was green, now soft gold */
body[data-lane="chrome"] .status-dot--live,
body[data-lane="chrome"] .chrome-drop__status--live::before,
.chrome-drop__status--live::before {
background: var(--gold, #C9A96E);
box-shadow: 0 0 8px rgba(201,169,110,0.6);
}
/* Edition counter shimmer — was pink/blue/lime, now gold/champagne sweep */
.chrome-tease__counter-fill {
background: linear-gradient(90deg, #C9A96E, #E8D5B0, #E8C4B8, #C9A96E);
background-size: 300% 100%;
box-shadow: 0 0 12px rgba(201, 169, 110, 0.45);
}
/* PDP edition bar fill — keep dark but warm the highlight */
body[data-lane="chrome"] .cpdp-edition-bar__fill {
background: linear-gradient(90deg, #2A2A2A, #C9A96E 50%, #2A2A2A);
background-size: 200% 100%;
}
/* Hero mesh — pink + blue blobs become rose + champagne blobs */
.chrome-hero {
background:
radial-gradient(ellipse at 20% 20%, rgba(232, 196, 184, 0.32) 0%, transparent 50%),
radial-gradient(ellipse at 80% 30%, rgba(232, 213, 176, 0.32) 0%, transparent 50%),
radial-gradient(ellipse at 50% 80%, rgba(201, 169, 110, 0.18) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #D4D4D4 50%, #F0F0F0 100%);
}
/* Tease (hamburger) blobs — rose + champagne */
.chrome-tease__blob--a {
background: radial-gradient(circle, #E8C4B8 0%, transparent 70%);
}
.chrome-tease__blob--b {
background: radial-gradient(circle, #E8D5B0 0%, transparent 70%);
}
/* Waitlist blobs — rose + champagne */
.chrome-waitlist {
background:
radial-gradient(ellipse at 30% 50%, rgba(232, 196, 184, 0.4) 0%, transparent 50%),
radial-gradient(ellipse at 70% 50%, rgba(232, 213, 176, 0.4) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #D4D4D4 100%);
}
/* Finale glow — rose left, champagne right (was pink/blue) */
.chrome-finale::before {
background:
radial-gradient(ellipse 50% 50% at 0% 50%, rgba(232, 196, 184, 0.18) 0%, transparent 50%),
radial-gradient(ellipse 50% 50% at 100% 50%, rgba(201, 169, 110, 0.16) 0%, transparent 50%);
}
/* PDP upsell glow — same pivot */
.cpdp-upsell::before {
background:
radial-gradient(ellipse 50% 50% at 0% 50%, rgba(232, 196, 184, 0.18), transparent 50%),
radial-gradient(ellipse 50% 50% at 100% 50%, rgba(201, 169, 110, 0.16), transparent 50%);
}
/* 404 blobs — rose + champagne */
.chrome-404__blob--a {
background: radial-gradient(circle, #E8C4B8 0%, transparent 70%);
}
.chrome-404__blob--b {
background: radial-gradient(circle, #E8D5B0 0%, transparent 70%);
}
/* Auth (login/register/etc) blobs — rose + champagne */
.chrome-auth__blob--a {
background: radial-gradient(circle, #E8C4B8 0%, transparent 70%);
}
.chrome-auth__blob--b {
background: radial-gradient(circle, #E8D5B0 0%, transparent 70%);
}
.chrome-auth {
background:
radial-gradient(ellipse at 30% 30%, rgba(232, 196, 184, 0.22) 0%, transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(232, 213, 176, 0.22) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #DEDEDE 50%, #F0F0F0 100%);
}
/* Story page hero blobs/mesh — rose + champagne */
.story-hero {
background:
radial-gradient(ellipse at 30% 30%, rgba(232, 196, 184, 0.22) 0%, transparent 50%),
radial-gradient(ellipse at 70% 70%, rgba(232, 213, 176, 0.22) 0%, transparent 50%),
linear-gradient(135deg, #ECECEC 0%, #DEDEDE 50%, #F0F0F0 100%);
}
/* Member ID card — was pink/blue radial, now rose/champagne */
.chrome-account__id-card-bg {
background:
linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%),
radial-gradient(ellipse at 100% 0%, rgba(232, 196, 184, 0.18), transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(201, 169, 110, 0.18), transparent 50%);
background-size: 200% 100%, auto, auto;
}
/* Hover gradient on perk cards — was pink/blue, now rose/champagne */
.chrome-perk::before {
background: linear-gradient(135deg, transparent 0%, rgba(232, 196, 184, 0.10) 50%, rgba(232, 213, 176, 0.10) 100%);
}
/* Drop calendar upcoming row — was pink/blue, now rose/champagne */
.chrome-drop--upcoming .chrome-drop__date {
background: linear-gradient(135deg, rgba(232, 196, 184, 0.20), rgba(232, 213, 176, 0.20));
}
/* ============================================================
ATEM CHROME WORDMARK — replaces logo PNG
============================================================ */
.atem-wordmark {
font-family: 'Anton', sans-serif;
font-size: 1.65rem;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1;
text-transform: uppercase;
/* Same chrome gradient as the big hero ATEM */
background: linear-gradient(180deg,
#F8F8F8 0%,
#FFFFFF 15%,
#B0B0B0 35%,
#6E6E6E 50%,
#C8C8C8 65%,
#FFFFFF 80%,
#888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 14s linear infinite;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.05)) drop-shadow(0 2px 8px rgba(0,0,0,0.12));
display: inline-block;
user-select: none;
transition: filter 280ms ease, transform 280ms cubic-bezier(0.2,0.8,0.2,1);
}
@media (prefers-reduced-motion: reduce) {
.atem-wordmark { animation: none; }
}
.site-header__wordmark:hover .atem-wordmark {
filter: drop-shadow(0 1px 0 rgba(0,0,0,0.08)) drop-shadow(0 4px 12px rgba(0,0,0,0.18));
transform: translateY(-1px);
}
.atem-wordmark--footer {
font-size: 1.5rem;
}
/* Hide the old ![]()
selectors if they ever reappear */
.site-header__logo { display: none !important; }
/* On dark sections (footer, dark header states), the gradient still works because it's a light-to-mid range */
.site-footer .atem-wordmark {
/* slight tweak so it reads brighter on near-black */
background: linear-gradient(180deg,
#FFFFFF 0%,
#FFFFFF 20%,
#C8C8C8 50%,
#888 80%,
#FFFFFF 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* Mobile sizing */
@media (max-width: 600px) {
.atem-wordmark { font-size: 1.4rem; }
.atem-wordmark--footer { font-size: 1.3rem; }
}
/* ============================================================
MOBILE MENU — CHROME LANE
Right-slide panel · dark surface · chrome-gradient indices
============================================================ */
.mobile-menu__backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0; pointer-events: none;
transition: opacity 400ms var(--ease);
z-index: 95;
}
.mobile-menu__backdrop.open { opacity: 1; pointer-events: auto; }
.mobile-menu--chrome {
position: fixed; top: 0; right: 0; bottom: 0; left: auto;
width: min(420px, 92vw);
background: #0F0F0F;
color: #F5F5F5;
z-index: 100;
transform: translateX(105%);
transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex; flex-direction: column;
padding: 0;
overflow-y: auto;
overscroll-behavior: contain;
font-family: 'Space Grotesk', sans-serif;
border-left: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: -40px 0 80px rgba(0, 0, 0, 0.6);
}
.mobile-menu--chrome.open { transform: translateX(0); }
/* HEAD ----------------------------------------------------- */
.mobile-menu--chrome .mm-head {
padding: 1.75rem 1.5rem 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
position: relative;
}
.mobile-menu--chrome .mm-head__row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 1.25rem;
}
.mobile-menu--chrome .mm-kicker {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.5);
}
.mobile-menu--chrome .mm-close {
background: transparent; border: 1px solid rgba(255, 255, 255, 0.12);
width: 44px; height: 44px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: #F5F5F5; cursor: pointer;
transition: border-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease);
}
.mobile-menu--chrome .mm-close:hover {
border-color: #E8D5B0; color: #E8D5B0; transform: rotate(90deg);
}
.mobile-menu--chrome .mm-wordmark {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 8vw, 3.25rem);
letter-spacing: 0.04em; line-height: 1;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
margin-bottom: 0.75rem;
}
.mobile-menu--chrome .mm-wordmark sup {
font-size: 0.35em; vertical-align: super; margin-left: 0.1em;
-webkit-text-fill-color: rgba(245, 245, 245, 0.55);
background: none;
}
.mobile-menu--chrome .mm-edition {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.7);
}
.mobile-menu--chrome .mm-edition__tag {
padding: 0.25rem 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 2px;
color: #F5F5F5;
}
.mobile-menu--chrome .mm-edition__dot { color: rgba(245, 245, 245, 0.35); }
.mobile-menu--chrome .mm-edition__count strong {
color: #E8D5B0; font-weight: 600;
}
/* LIST ----------------------------------------------------- */
.mobile-menu--chrome .mm-list {
list-style: none; margin: 0; padding: 0;
flex: 1 0 auto;
}
.mobile-menu--chrome .mm-item {
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
opacity: 0; transform: translateX(20px);
transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.mobile-menu--chrome.open .mm-item { opacity: 1; transform: translateX(0); }
.mobile-menu--chrome.open .mm-item:nth-child(1) { transition-delay: 200ms; }
.mobile-menu--chrome.open .mm-item:nth-child(2) { transition-delay: 240ms; }
.mobile-menu--chrome.open .mm-item:nth-child(3) { transition-delay: 280ms; }
.mobile-menu--chrome.open .mm-item:nth-child(4) { transition-delay: 320ms; }
.mobile-menu--chrome.open .mm-item:nth-child(5) { transition-delay: 360ms; }
.mobile-menu--chrome.open .mm-item:nth-child(6) { transition-delay: 400ms; }
.mobile-menu--chrome.open .mm-item:nth-child(n+7) { transition-delay: 440ms; }
.mobile-menu--chrome .mm-link {
position: relative; overflow: hidden;
display: grid;
grid-template-columns: 3rem 1fr auto;
align-items: center; gap: 0.75rem;
padding: 1.125rem 1.5rem;
min-height: 64px;
color: #F5F5F5; text-decoration: none;
transition: background-color 400ms var(--ease), padding-left 400ms var(--ease);
}
.mobile-menu--chrome .mm-link::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(232, 213, 176, 0.08) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms var(--ease);
pointer-events: none;
}
.mobile-menu--chrome .mm-link:hover::before,
.mobile-menu--chrome .mm-link:focus-visible::before { transform: translateX(100%); }
.mobile-menu--chrome .mm-link:hover { padding-left: 1.75rem; }
.mobile-menu--chrome .mm-link:focus-visible { outline: none; }
.mobile-menu--chrome .mm-link__num {
font-family: 'Anton', sans-serif;
font-size: 1.25rem; letter-spacing: 0.04em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 15s linear infinite;
}
.mobile-menu--chrome .mm-link__title {
font-family: 'Anton', sans-serif;
font-size: 1.5rem; letter-spacing: 0.02em;
text-transform: uppercase; line-height: 1;
color: #F5F5F5;
}
.mobile-menu--chrome .mm-link__arrow {
font-family: 'Space Grotesk', sans-serif;
font-size: 1.125rem; color: rgba(245, 245, 245, 0.4);
transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.mobile-menu--chrome .mm-link:hover .mm-link__arrow {
color: #E8D5B0; transform: translateX(4px);
}
/* UTILITY ROW --------------------------------------------- */
.mobile-menu--chrome .mm-utility {
display: grid; grid-template-columns: 1fr 1fr;
gap: 0.5rem;
padding: 1.25rem 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mobile-menu--chrome .mm-pill {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem;
padding: 0.875rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: #F5F5F5; text-decoration: none;
background: rgba(255, 255, 255, 0.02);
transition: border-color 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
}
.mobile-menu--chrome .mm-pill:hover {
border-color: rgba(232, 213, 176, 0.5);
background: rgba(232, 213, 176, 0.06);
color: #E8D5B0;
}
.mobile-menu--chrome .mm-pill svg { opacity: 0.7; }
/* FOOTER — NEXT CHAPTER CARD ------------------------------ */
.mobile-menu--chrome .mm-foot {
position: relative; overflow: hidden;
display: block;
margin: 1.25rem 1.5rem 1.5rem;
padding: 1.5rem 1.5rem 1.5rem;
background: #1A1A1A;
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 4px;
color: #F5F5F5; text-decoration: none;
transition: border-color 400ms var(--ease);
}
.mobile-menu--chrome .mm-foot:hover {
border-color: rgba(232, 196, 184, 0.35);
}
.mobile-menu--chrome .mm-foot__blob {
position: absolute; inset: auto -40% -40% auto;
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(232, 196, 184, 0.22) 0%, transparent 65%);
filter: blur(20px);
animation: chrome-btn-shimmer 18s linear infinite;
pointer-events: none;
}
.mobile-menu--chrome .mm-foot__kicker {
display: block; color: rgba(232, 213, 176, 0.7);
margin-bottom: 0.5rem;
}
.mobile-menu--chrome .mm-foot__title {
font-family: 'Anton', sans-serif;
font-size: 1.375rem; letter-spacing: 0.01em; line-height: 1.15;
text-transform: none;
margin: 0 0 1rem; color: #F5F5F5;
position: relative; z-index: 1;
}
.mobile-menu--chrome .mm-foot__title em {
font-family: 'Fraunces', serif;
font-style: italic; font-weight: 400;
color: #E8C4B8;
}
.mobile-menu--chrome .mm-foot__cta {
display: inline-flex; align-items: center; gap: 0.5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: #E8D5B0;
position: relative; z-index: 1;
transition: gap 300ms var(--ease);
}
.mobile-menu--chrome .mm-foot:hover .mm-foot__cta { gap: 0.75rem; }
/* Suppress dormant silver .mobile-menu base rules when chrome lane is active.
Keeps the silver cascade intact for non-chrome bodies (per dormant-lane policy). */
body[data-lane="chrome"] .mobile-menu:not(.mobile-menu--chrome) {
display: none;
}
/* ============================================================
CART PAGE — CHROME LANE
Hero dark band · sticky summary · upsell rhythm break
============================================================ */
.cart-page--chrome {
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
background: #FFFFFF;
}
.cart-page--chrome .cart-page__kicker {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.55);
}
.cart-page--chrome .cart-page__kicker--light { color: rgba(245, 245, 245, 0.55); }
/* HERO BAND ------------------------------------------------ */
.cart-page--chrome .cart-page__hero {
position: relative; overflow: hidden;
background: #0F0F0F;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2rem, 4vw, 3rem);
color: #F5F5F5;
}
.cart-page--chrome .cart-page__hero-noise {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.cart-page--chrome .cart-page__hero-inner {
position: relative; max-width: 1280px; margin-inline: auto;
}
.cart-page--chrome .cart-page__hero .cart-page__kicker {
color: rgba(245, 245, 245, 0.5);
margin-bottom: 1.25rem;
}
.cart-page--chrome .cart-page__hero-row {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1rem, 3vw, 2.5rem);
align-items: end;
}
.cart-page--chrome .cart-page__count {
font-family: 'Anton', sans-serif;
font-size: clamp(4.5rem, 14vw, 8rem);
line-height: 0.85; letter-spacing: 0.02em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.cart-page--chrome .cart-page__hero-meta {
display: grid; gap: 0.75rem; padding-bottom: 0.5rem;
}
.cart-page--chrome .cart-page__heading {
font-family: 'Anton', sans-serif;
font-size: clamp(1.75rem, 4vw, 2.75rem);
letter-spacing: 0.04em; text-transform: uppercase;
line-height: 1; color: #F5F5F5;
margin: 0;
}
.cart-page--chrome .cart-page__edition {
display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.7);
}
.cart-page--chrome .cart-page__edition-tag {
padding: 0.25rem 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 2px; color: #F5F5F5;
}
.cart-page--chrome .cart-page__edition-dot { color: rgba(245, 245, 245, 0.35); }
.cart-page--chrome .cart-page__edition-count strong {
color: #E8D5B0; font-weight: 600;
}
/* FREE SHIP PROGRESS --------------------------------------- */
.cart-page--chrome .cart-page__ship {
background: #ECECEC;
padding: 1rem var(--gutter);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.cart-page--chrome .cart-page__ship-inner {
max-width: 1280px; margin-inline: auto;
display: grid; gap: 0.5rem;
}
.cart-page--chrome .cart-page__ship-msg {
font-size: 0.813rem; letter-spacing: 0.02em;
color: rgba(15, 15, 15, 0.7);
}
.cart-page--chrome .cart-page__ship-msg strong {
color: #0F0F0F; font-weight: 700;
}
.cart-page--chrome .cart-page__ship-track {
position: relative; overflow: hidden;
height: 3px; background: rgba(15, 15, 15, 0.1);
border-radius: 2px;
}
.cart-page--chrome .cart-page__ship-fill {
position: relative;
height: 100%; border-radius: 2px;
background: linear-gradient(90deg, #E8D5B0 0%, #C9A96E 50%, #E8D5B0 100%);
background-size: 200% 100%;
animation: chrome-btn-shimmer 10s linear infinite;
transition: width 400ms var(--ease);
}
/* BODY ----------------------------------------------------- */
.cart-page--chrome .cart-page__body {
max-width: 1280px; margin-inline: auto;
padding: clamp(2rem, 4vw, 3rem) var(--gutter);
display: flex; flex-direction: column;
gap: 2.5rem;
}
.cart-page--chrome .cart-page__items,
.cart-page--chrome .cart-page__summary,
.cart-page--chrome .cart-page__notes {
width: 100%; min-width: 0;
display: block;
}
@media (min-width: 900px) {
.cart-page--chrome .cart-page__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
grid-template-areas:
"items summary"
"notes summary";
column-gap: 3.5rem; row-gap: 2.5rem;
align-items: start;
}
.cart-page--chrome .cart-page__items { grid-area: items; }
.cart-page--chrome .cart-page__summary { grid-area: summary; position: sticky; top: 96px; }
.cart-page--chrome .cart-page__notes { grid-area: notes; }
}
/* MOBILE STICKY ACQUIRE BAR — always-visible CTA on mobile */
.cart-page--chrome .cart-page__mobile-cta {
display: none;
}
@media (max-width: 899px) {
.cart-page--chrome .cart-page__mobile-cta {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: 70;
display: grid;
grid-template-columns: auto 1px 1fr auto;
align-items: center; gap: 0.875rem;
padding: 0.9rem 1.25rem;
padding-bottom: max(0.9rem, env(safe-area-inset-bottom));
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border-top: 1px solid rgba(15, 15, 15, 0.14);
box-shadow: 0 -8px 24px rgba(15, 15, 15, 0.18);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
}
.cart-page--chrome .cart-page__mobile-cta-div {
width: 1px; height: 16px;
background: rgba(15, 15, 15, 0.25);
}
.cart-page--chrome .cart-page__mobile-cta-price {
font-family: 'Anton', sans-serif;
font-size: 1.125rem; letter-spacing: 0.04em;
}
/* Reserve room so content isn't trapped under the sticky bar */
.cart-page--chrome { padding-bottom: 84px; }
/* Hide the in-summary Acquire button on mobile; sticky bar handles it */
.cart-page--chrome .cart-page__checkout { display: none; }
.cart-page--chrome .cart-page__sum-note { display: none; }
}
.cart-page--chrome .cart-page__col-head {
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(15, 15, 15, 0.08);
}
/* LINE ITEMS ----------------------------------------------- */
.cart-page--chrome .cart-page__lines {
list-style: none; margin: 0; padding: 0;
}
.cart-page--chrome .cart-page__line {
position: relative;
display: grid;
grid-template-columns: 96px 1fr auto;
gap: 1.25rem;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(15, 15, 15, 0.06);
align-items: start;
}
@media (min-width: 600px) {
.cart-page--chrome .cart-page__line {
grid-template-columns: 140px 1fr auto;
gap: 1.75rem;
}
}
.cart-page--chrome .cart-page__line-media {
display: block;
aspect-ratio: 1; overflow: hidden;
border: 1px solid rgba(15, 15, 15, 0.06);
background: #ECECEC;
}
.cart-page--chrome .cart-page__line-media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 700ms var(--ease);
}
.cart-page--chrome .cart-page__line:hover .cart-page__line-media img { transform: scale(1.04); }
.cart-page--chrome .cart-page__line-placeholder {
width: 100%; height: 100%; background: #ECECEC;
}
.cart-page--chrome .cart-page__line-info { display: grid; gap: 0.5rem; }
.cart-page--chrome .cart-page__line-edition {
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.5);
}
.cart-page--chrome .cart-page__line-title {
font-family: 'Anton', sans-serif;
font-size: clamp(1.25rem, 2.4vw, 1.625rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.05; color: #0F0F0F;
text-decoration: none;
}
.cart-page--chrome .cart-page__line-title:hover { color: #6E6E6E; }
.cart-page--chrome .cart-page__line-variant,
.cart-page--chrome .cart-page__line-plan {
font-size: 0.813rem;
color: rgba(15, 15, 15, 0.55);
letter-spacing: 0.02em;
}
.cart-page--chrome .cart-page__line-plan {
display: inline-block; padding: 0.2rem 0.5rem;
background: rgba(232, 213, 176, 0.18);
color: #8B6F2E; border-radius: 2px;
font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
font-weight: 500;
justify-self: start;
}
.cart-page--chrome .cart-page__line-bottom {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; margin-top: 0.5rem;
}
.cart-page--chrome .cart-page__qty {
display: inline-flex; align-items: center;
border: 1px solid rgba(15, 15, 15, 0.14);
border-radius: 999px;
background: #FFFFFF;
overflow: hidden;
}
.cart-page--chrome .cart-page__qty button {
background: transparent; border: 0;
width: 44px; height: 44px;
font-size: 1.125rem; line-height: 1;
color: #0F0F0F; cursor: pointer;
transition: background-color 200ms var(--ease);
}
.cart-page--chrome .cart-page__qty button:hover { background: rgba(15, 15, 15, 0.06); }
.cart-page--chrome .cart-page__qty button:focus-visible {
outline: 2px solid #C9A96E; outline-offset: -2px;
}
.cart-page--chrome .cart-page__qty input {
width: 44px; height: 44px;
border: 0; background: transparent;
text-align: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.938rem; font-weight: 600;
color: #0F0F0F;
-moz-appearance: textfield;
}
.cart-page--chrome .cart-page__qty input:focus-visible {
outline: 2px solid #C9A96E; outline-offset: -2px;
}
.cart-page--chrome .cart-page__qty input::-webkit-outer-spin-button,
.cart-page--chrome .cart-page__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-page--chrome .cart-page__line-price {
font-family: 'Anton', sans-serif;
font-size: 1.25rem; letter-spacing: 0.02em;
color: #0F0F0F;
}
.cart-page--chrome .cart-page__line-remove {
align-self: start;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border: 1px solid rgba(15, 15, 15, 0.12);
border-radius: 50%;
color: rgba(15, 15, 15, 0.55);
text-decoration: none;
transition: border-color 300ms var(--ease), color 300ms var(--ease), transform 300ms var(--ease);
}
.cart-page--chrome .cart-page__line-remove:hover {
border-color: #0F0F0F; color: #0F0F0F; transform: rotate(90deg);
}
/* NOTES ---------------------------------------------------- */
.cart-page--chrome .cart-page__notes {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(15, 15, 15, 0.06);
display: grid; gap: 0.75rem;
}
.cart-page--chrome .cart-page__notes textarea {
width: 100%;
padding: 0.875rem 1rem;
border: 1px solid rgba(15, 15, 15, 0.14);
border-radius: 4px;
background: #FFFFFF;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.938rem; line-height: 1.5;
color: #0F0F0F; resize: vertical;
transition: border-color 300ms var(--ease);
}
.cart-page--chrome .cart-page__notes textarea:focus {
outline: none; border-color: #0F0F0F;
}
.cart-page--chrome .cart-page__update {
justify-self: start;
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.625rem 1.125rem;
background: transparent;
border: 1px solid rgba(15, 15, 15, 0.18);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: #0F0F0F; cursor: pointer;
transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.cart-page--chrome .cart-page__update:hover {
border-color: #0F0F0F; background: rgba(15, 15, 15, 0.04);
}
/* SUMMARY -------------------------------------------------- */
.cart-page--chrome .cart-page__summary-inner {
background: #FFFFFF;
border: 1px solid rgba(15, 15, 15, 0.08);
padding: 1.5rem;
display: grid; gap: 0.875rem;
}
.cart-page--chrome .cart-page__summary .cart-page__kicker { margin-bottom: 0.25rem; }
.cart-page--chrome .cart-page__sum-row {
display: flex; justify-content: space-between; align-items: baseline;
font-size: 0.875rem;
color: rgba(15, 15, 15, 0.75);
}
.cart-page--chrome .cart-page__sum-row [data-cart-subtotal],
.cart-page--chrome .cart-page__sum-row [data-cart-count] {
font-family: 'Space Grotesk', sans-serif;
font-weight: 600; color: #0F0F0F;
}
.cart-page--chrome .cart-page__sum-divider {
height: 1px; background: rgba(15, 15, 15, 0.08);
margin: 0.5rem 0;
}
.cart-page--chrome .cart-page__checkout {
position: relative; overflow: hidden;
display: grid;
grid-template-columns: auto 1px 1fr;
align-items: center; gap: 0.875rem;
padding: 1rem 1.25rem;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border: 1px solid rgba(15, 15, 15, 0.14);
border-radius: 2px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.cart-page--chrome .cart-page__checkout::before {
content: ''; position: absolute; inset: 0;
/* Dark sweep across light surface — inverted polarity, matches cart drawer Acquire */
background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms var(--ease);
pointer-events: none;
}
.cart-page--chrome .cart-page__checkout:active {
transform: translateY(0);
background-size: 100% 110%;
}
.cart-page--chrome .cart-page__checkout:hover {
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(15, 15, 15, 0.2);
}
.cart-page--chrome .cart-page__checkout:hover::before { transform: translateX(100%); }
.cart-page--chrome .cart-page__checkout-div {
width: 1px; height: 16px;
background: rgba(15, 15, 15, 0.25);
}
.cart-page--chrome .cart-page__checkout-price {
font-family: 'Anton', sans-serif;
font-size: 1.125rem; letter-spacing: 0.04em;
justify-self: end;
}
.cart-page--chrome .cart-page__sum-note {
font-size: 0.75rem; color: rgba(15, 15, 15, 0.55);
margin: 0;
}
.cart-page--chrome .cart-page__sum-promises {
list-style: none; margin: 0.5rem 0 0; padding: 0;
display: grid; gap: 0.375rem;
padding-top: 0.875rem;
border-top: 1px solid rgba(15, 15, 15, 0.06);
}
.cart-page--chrome .cart-page__sum-promises li {
position: relative; padding-left: 1rem;
font-size: 0.75rem; letter-spacing: 0.04em;
color: rgba(15, 15, 15, 0.6);
}
.cart-page--chrome .cart-page__sum-promises li::before {
content: '·'; position: absolute; left: 0.25rem;
color: #C9A96E;
}
/* UPSELL --------------------------------------------------- */
.cart-page--chrome .cart-page__upsell {
background: #1A1A1A;
color: #F5F5F5;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
position: relative; overflow: hidden;
}
.cart-page--chrome .cart-page__upsell::before {
content: ''; position: absolute;
top: -100px; right: -100px;
width: 360px; height: 360px; border-radius: 50%;
background: radial-gradient(circle, rgba(232, 196, 184, 0.18) 0%, transparent 65%);
filter: blur(20px); pointer-events: none;
animation: chrome-btn-shimmer 18s linear infinite;
}
.cart-page--chrome .cart-page__upsell-inner {
position: relative;
max-width: 1280px; margin-inline: auto;
}
.cart-page--chrome .cart-page__upsell-inner .cart-page__kicker {
margin-bottom: 1.5rem;
}
.cart-page--chrome .cart-page__upsell-card {
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: center;
}
@media (min-width: 700px) {
.cart-page--chrome .cart-page__upsell-card {
grid-template-columns: 200px 1fr;
gap: 2.5rem;
}
}
.cart-page--chrome .cart-page__upsell-media {
position: relative; display: block;
aspect-ratio: 1;
background: #0F0F0F;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
max-width: 280px;
}
.cart-page--chrome .cart-page__upsell-media img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 700ms var(--ease);
}
.cart-page--chrome .cart-page__upsell-media:hover img { transform: scale(1.04); }
.cart-page--chrome .cart-page__upsell-tag {
position: absolute; top: 0.75rem; left: 0.75rem;
padding: 0.25rem 0.5rem;
background: rgba(15, 15, 15, 0.7); color: #E8D5B0;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
border: 1px solid rgba(232, 213, 176, 0.4);
}
.cart-page--chrome .cart-page__upsell-name {
font-family: 'Anton', sans-serif;
font-size: clamp(1.625rem, 3vw, 2.125rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1; margin: 0 0 0.75rem;
color: #F5F5F5;
}
.cart-page--chrome .cart-page__upsell-sub {
font-size: 0.938rem; line-height: 1.55;
color: rgba(245, 245, 245, 0.7);
margin: 0 0 1.25rem; max-width: 540px;
}
.cart-page--chrome .cart-page__upsell-price-row {
display: inline-flex; align-items: baseline; gap: 0.625rem;
margin-bottom: 1.25rem;
}
.cart-page--chrome .cart-page__upsell-price {
font-family: 'Anton', sans-serif;
font-size: 1.5rem; letter-spacing: 0.02em;
color: #F5F5F5;
}
.cart-page--chrome .cart-page__upsell-compare {
font-size: 0.875rem; color: rgba(245, 245, 245, 0.4);
text-decoration: line-through;
}
.cart-page--chrome .cart-page__upsell-cta {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.875rem 1.5rem;
background: transparent;
border: 1px solid rgba(232, 213, 176, 0.5);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: #E8D5B0; cursor: pointer;
transition: background-color 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease);
}
.cart-page--chrome .cart-page__upsell-cta::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(232, 213, 176, 0.15) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms var(--ease);
pointer-events: none;
}
.cart-page--chrome .cart-page__upsell-cta:hover {
background: rgba(232, 213, 176, 0.08);
border-color: #E8D5B0;
color: #F5F5F5;
}
.cart-page--chrome .cart-page__upsell-cta:hover::before { transform: translateX(100%); }
/* EMPTY STATE --------------------------------------------- */
.cart-page--chrome .cart-page__empty {
background: #FFFFFF;
padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 8vw, 7rem);
text-align: center;
}
.cart-page--chrome .cart-page__empty-inner {
max-width: 560px; margin-inline: auto;
}
.cart-page--chrome .cart-page__empty-num {
font-family: 'Anton', sans-serif;
font-size: clamp(7rem, 18vw, 12rem);
line-height: 0.85; letter-spacing: 0.02em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
margin-bottom: 1rem;
}
.cart-page--chrome .cart-page__empty-title {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 5vw, 2.75rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.05; margin: 0 0 0.875rem;
color: #0F0F0F;
}
.cart-page--chrome .cart-page__empty-text {
font-size: 1rem; line-height: 1.6;
color: rgba(15, 15, 15, 0.65);
margin: 0 0 2rem;
}
.cart-page--chrome .cart-page__empty-cta {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 1rem 1.75rem;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border: 1px solid rgba(15, 15, 15, 0.14);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.cart-page--chrome .cart-page__empty-cta::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms var(--ease);
pointer-events: none;
}
.cart-page--chrome .cart-page__empty-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(15, 15, 15, 0.18);
}
.cart-page--chrome .cart-page__empty-cta:hover::before { transform: translateX(100%); }
.cart-page--chrome .cart-page__empty-or {
margin: 2.5rem 0 0.5rem;
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.4);
}
.cart-page--chrome .cart-page__empty-secondary {
font-size: 0.938rem; color: rgba(15, 15, 15, 0.65);
margin: 0 0 1rem;
}
.cart-page--chrome .cart-page__empty-secondary-cta {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.625rem 1.25rem;
border: 1px solid rgba(15, 15, 15, 0.18);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.cart-page--chrome .cart-page__empty-secondary-cta:hover {
border-color: #0F0F0F; background: rgba(15, 15, 15, 0.04);
}
/* ============================================================
CHROME LANE — COLOR OVERRIDES
Stop teal/green leakage from dormant silver lane into chrome UI.
============================================================ */
/* Cart icon badge (was var(--atem-green) = #024943 teal) */
body[data-lane="chrome"] .cart-count {
background: #C9A96E !important;
color: #0F0F0F !important;
box-shadow: 0 0 0 2px #FFFFFF;
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
}
body[data-lane="chrome"] .site-header.scrolled .cart-count,
body[data-lane="chrome"] .template-index .site-header:not(.scrolled) .cart-count {
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}
/* Focus outline (was solid green) */
body[data-lane="chrome"] *:focus-visible {
outline-color: #C9A96E !important;
outline-offset: 3px;
}
/* Cart drawer cart-line and cart-empty inherited colors — defensive */
body[data-lane="chrome"] .cart-line a,
body[data-lane="chrome"] .cart-empty a,
body[data-lane="chrome"] .cart-foot__cta {
color: inherit;
}
/* Any remaining .btn-primary / .btn-accent rendered in chrome lane (defensive — shouldn't appear, but safer) */
body[data-lane="chrome"] .btn-primary,
body[data-lane="chrome"] .btn-accent {
background: #0F0F0F;
color: #F5F5F5;
box-shadow: none;
}
body[data-lane="chrome"] .btn-primary:hover,
body[data-lane="chrome"] .btn-accent:hover {
background: #1A1A1A;
box-shadow: 0 6px 20px rgba(15, 15, 15, 0.2);
}
/* .eyebrow rendered inside chrome lane (was var(--atem-green)) */
body[data-lane="chrome"] .eyebrow {
color: rgba(15, 15, 15, 0.55);
}
body[data-lane="chrome"] .hero-dark .eyebrow,
body[data-lane="chrome"] .showcase-dark .eyebrow {
color: rgba(245, 245, 245, 0.55);
}
/* ============================================================
CHROME MARQUEE / TICKER — MOBILE OVERFLOW GUARD
Ensure tracks are >= 200vw so translateX(-50%) loop has content
============================================================ */
.chrome-marquee__track,
.cpdp-ticker__track {
min-width: 200%;
}
@media (max-width: 600px) {
/* On narrow screens the hardcoded copies can be < 200vw; the JS clone
in theme.js handles dynamic doubling. This rule is a static safety. */
.chrome-marquee__track,
.cpdp-ticker__track {
min-width: 220vw;
}
.chrome-marquee__track { font-size: clamp(2.5rem, 13vw, 4rem); gap: 1.5rem; }
.cpdp-ticker__track { font-size: 0.75rem; gap: 1rem; padding-left: 1rem; }
}
/* ============================================================
COLLECTION PAGE — CHROME LANE
============================================================ */
.coll-page--chrome {
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
background: #FFFFFF;
}
.coll-page--chrome .coll-page__kicker {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.55);
}
/* Hero */
.coll-page--chrome .coll-page__hero {
position: relative; overflow: hidden;
background: #0F0F0F; color: #F5F5F5;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.coll-page--chrome .coll-page__hero-noise {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.coll-page--chrome .coll-page__hero-inner {
position: relative; max-width: 1280px; margin-inline: auto;
}
.coll-page--chrome .coll-page__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 8vw, 5.25rem);
line-height: 0.9; letter-spacing: 0.02em;
text-transform: uppercase;
margin: 1.25rem 0 1rem;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.coll-page--chrome .coll-page__sub {
font-size: 1rem; line-height: 1.55;
color: rgba(245, 245, 245, 0.7);
margin: 0 0 1.75rem; max-width: 640px;
}
.coll-page--chrome .coll-page__stats {
display: flex; align-items: center; flex-wrap: wrap;
gap: 1rem 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.coll-page--chrome .coll-page__stat {
display: inline-flex; align-items: baseline; gap: 0.5rem;
}
.coll-page--chrome .coll-page__stat-num {
font-family: 'Anton', sans-serif;
font-size: 1.5rem; letter-spacing: 0.02em;
color: #F5F5F5;
}
.coll-page--chrome .coll-page__stat-lbl {
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.55);
}
.coll-page--chrome .coll-page__stat-div {
width: 1px; height: 18px;
background: rgba(245, 245, 245, 0.18);
}
/* Meta strip */
.coll-page--chrome .coll-page__meta {
background: #ECECEC;
padding: 1rem var(--gutter);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.coll-page--chrome .coll-page__meta-inner {
max-width: 1280px; margin-inline: auto;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 0.5rem;
font-size: 0.75rem; letter-spacing: 0.04em;
color: rgba(15, 15, 15, 0.7);
}
.coll-page--chrome .coll-page__meta-count strong { color: #0F0F0F; font-weight: 700; }
.coll-page--chrome .coll-page__meta-tag {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.45);
}
/* Grid */
.coll-page--chrome .coll-page__grid-section {
max-width: 1280px; margin-inline: auto;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.coll-page--chrome .coll-page__grid {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
/* COLL-CARD (shared with search) */
.coll-card { list-style: none; }
.coll-card__link {
position: relative; overflow: hidden;
display: block;
text-decoration: none;
color: inherit;
background: #FFFFFF;
border: 1px solid rgba(15, 15, 15, 0.06);
transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.coll-card__link:hover {
border-color: rgba(15, 15, 15, 0.18);
transform: translateY(-2px);
}
.coll-card__media {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background: #ECECEC;
}
.coll-card__num {
position: absolute; top: 0.75rem; left: 0.75rem;
z-index: 2;
font-family: 'Anton', sans-serif;
font-size: 1.125rem; letter-spacing: 0.04em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 15s linear infinite;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.coll-card__pill {
position: absolute; top: 0.75rem; right: 0.75rem;
z-index: 2;
padding: 0.25rem 0.5rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
background: rgba(15, 15, 15, 0.85);
color: #F5F5F5;
border-radius: 2px;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.coll-card__pill--sold { background: rgba(15, 15, 15, 0.9); color: rgba(245, 245, 245, 0.7); }
.coll-card__pill--save { background: rgba(232, 213, 176, 0.95); color: #0F0F0F; }
.coll-card__img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 700ms var(--ease);
}
.coll-card__link:hover .coll-card__img { transform: scale(1.04); }
.coll-card__placeholder { width: 100%; height: 100%; background: #ECECEC; }
.coll-card__body {
padding: 1.125rem 1rem 1.125rem;
display: grid; gap: 0.375rem;
}
.coll-card__name {
font-family: 'Anton', sans-serif;
font-size: 1.25rem; letter-spacing: 0.02em;
text-transform: uppercase; line-height: 1.05;
margin: 0; color: #0F0F0F;
}
.coll-card__flavor {
font-size: 0.813rem;
color: rgba(15, 15, 15, 0.55);
margin: 0;
letter-spacing: 0.02em;
}
.coll-card__foot {
display: flex; justify-content: space-between; align-items: center;
margin-top: 0.375rem;
padding-top: 0.625rem;
border-top: 1px solid rgba(15, 15, 15, 0.06);
}
.coll-card__price {
font-family: 'Anton', sans-serif;
font-size: 1.125rem; letter-spacing: 0.02em;
}
.coll-card__arrow {
color: rgba(15, 15, 15, 0.4);
transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.coll-card__link:hover .coll-card__arrow {
color: #C9A96E; transform: translateX(3px);
}
/* Pagination (shared) */
.coll-page__pagination {
display: flex; justify-content: center; align-items: center; gap: 0.75rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.coll-page__page,
.coll-page__page-num {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 0.875rem;
min-height: 44px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
border: 1px solid rgba(15, 15, 15, 0.12);
border-radius: 2px;
background: #FFFFFF;
transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.coll-page__page-num { min-width: 44px; justify-content: center; padding: 0.5rem 0.625rem; }
.coll-page__page:hover,
.coll-page__page-num:hover {
border-color: #0F0F0F;
background: rgba(15, 15, 15, 0.04);
}
.coll-page__page--disabled {
opacity: 0.35; pointer-events: none;
}
.coll-page__page-num--current {
background: #0F0F0F; color: #F5F5F5;
border-color: #0F0F0F;
}
.coll-page__page-num--ellipsis {
border: 0; background: transparent;
pointer-events: none;
color: rgba(15, 15, 15, 0.35);
}
.coll-page__page-numbers { display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: center; }
/* Empty state */
.coll-page--chrome .coll-page__empty {
background: #FFFFFF;
padding: clamp(3rem, 8vw, 6rem) 0 clamp(4rem, 8vw, 7rem);
text-align: center;
}
.coll-page--chrome .coll-page__empty-inner { max-width: 560px; margin-inline: auto; }
.coll-page--chrome .coll-page__empty-num {
font-family: 'Anton', sans-serif;
font-size: clamp(7rem, 18vw, 12rem);
line-height: 0.85; letter-spacing: 0.02em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
margin-bottom: 1rem;
}
.coll-page--chrome .coll-page__empty-title {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 5vw, 2.75rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.05; margin: 0 0 0.875rem;
color: #0F0F0F;
}
.coll-page--chrome .coll-page__empty-text {
font-size: 1rem; line-height: 1.6;
color: rgba(15, 15, 15, 0.65);
margin: 0 0 2rem;
}
.coll-page--chrome .coll-page__empty-cta,
.coll-page--chrome .coll-page__empty-secondary-cta {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 1rem 1.75rem;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
text-decoration: none;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.coll-page--chrome .coll-page__empty-cta {
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border: 1px solid rgba(15, 15, 15, 0.14);
color: #0F0F0F;
}
.coll-page--chrome .coll-page__empty-cta::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms var(--ease);
pointer-events: none;
}
.coll-page--chrome .coll-page__empty-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(15, 15, 15, 0.18);
}
.coll-page--chrome .coll-page__empty-cta:hover::before { transform: translateX(100%); }
.coll-page--chrome .coll-page__empty-or {
margin: 2.5rem 0 0.5rem;
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.4);
}
.coll-page--chrome .coll-page__empty-secondary {
font-size: 0.938rem; color: rgba(15, 15, 15, 0.65); margin: 0 0 1rem;
}
.coll-page--chrome .coll-page__empty-secondary-cta {
border: 1px solid rgba(15, 15, 15, 0.18);
border-radius: 999px;
color: #0F0F0F;
padding: 0.625rem 1.25rem;
font-size: 0.75rem; letter-spacing: 0.14em;
}
.coll-page--chrome .coll-page__empty-secondary-cta:hover {
border-color: #0F0F0F; background: rgba(15, 15, 15, 0.04);
}
/* ============================================================
SEARCH PAGE — CHROME LANE
============================================================ */
.search-page--chrome {
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
background: #FFFFFF;
}
.search-page--chrome .search-page__kicker {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.55);
margin-bottom: 1.25rem;
}
.search-page--chrome .search-page__hero {
position: relative; overflow: hidden;
background: #0F0F0F; color: #F5F5F5;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.search-page--chrome .search-page__hero-noise {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.search-page--chrome .search-page__hero-inner {
position: relative;
max-width: 880px; margin-inline: auto;
}
.search-page--chrome .search-page__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 8vw, 5rem);
line-height: 0.9; letter-spacing: 0.02em;
text-transform: uppercase;
margin: 0 0 1rem;
color: #F5F5F5;
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem;
}
.search-page--chrome .search-page__title-num {
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.search-page--chrome .search-page__sub {
font-size: 0.938rem;
color: rgba(245, 245, 245, 0.6);
margin: 0 0 1.75rem;
}
.search-page--chrome .search-page__sub strong { color: #F5F5F5; font-weight: 600; }
.search-page--chrome .search-page__form {
margin-top: 1.5rem;
}
.search-page--chrome .search-page__form-inner {
display: flex; align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
padding: 4px 4px 4px 1.25rem;
transition: border-color 300ms var(--ease);
}
.search-page--chrome .search-page__form-inner:focus-within {
border-color: #C9A96E;
}
.search-page--chrome .search-page__form-icon {
color: rgba(245, 245, 245, 0.55); flex-shrink: 0;
}
.search-page--chrome .search-page__input {
flex: 1; min-width: 0;
border: 0; background: transparent;
padding: 0 0.75rem;
min-height: 48px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.938rem;
color: #F5F5F5;
outline: none;
}
.search-page--chrome .search-page__input::placeholder {
color: rgba(245, 245, 245, 0.4);
}
.search-page--chrome .search-page__submit {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.7rem 1.25rem;
background: #F5F5F5;
color: #0F0F0F;
border: 0; border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
cursor: pointer;
transition: background-color 300ms var(--ease);
}
.search-page--chrome .search-page__submit:hover {
background: #C9A96E;
}
.search-page--chrome .search-page__results {
max-width: 1280px; margin-inline: auto;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.search-page--chrome .search-page__grid {
list-style: none; margin: 0; padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: clamp(1rem, 2vw, 1.75rem);
}
.search-page--chrome .search-page__content-card {
list-style: none;
}
.search-page--chrome .search-page__content-card a {
position: relative;
display: grid; gap: 0.5rem;
padding: 1.5rem 1.25rem;
background: #FFFFFF;
border: 1px solid rgba(15, 15, 15, 0.06);
color: #0F0F0F; text-decoration: none;
height: 100%;
transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.search-page--chrome .search-page__content-card a:hover {
border-color: rgba(15, 15, 15, 0.18);
transform: translateY(-2px);
}
.search-page--chrome .search-page__content-num {
font-family: 'Anton', sans-serif;
font-size: 1rem; letter-spacing: 0.04em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 15s linear infinite;
}
.search-page--chrome .search-page__content-type {
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.45);
}
.search-page--chrome .search-page__content-title {
font-family: 'Anton', sans-serif;
font-size: 1.25rem; letter-spacing: 0.02em;
text-transform: uppercase; line-height: 1.1;
margin: 0;
}
.search-page--chrome .search-page__content-text {
font-size: 0.875rem; line-height: 1.5;
color: rgba(15, 15, 15, 0.65);
margin: 0;
}
.search-page--chrome .search-page__content-arrow {
position: absolute; bottom: 1.25rem; right: 1.25rem;
color: rgba(15, 15, 15, 0.4);
transition: color 300ms var(--ease), transform 300ms var(--ease);
}
.search-page--chrome .search-page__content-card a:hover .search-page__content-arrow {
color: #C9A96E; transform: translateX(3px);
}
/* Search empty + prompt */
.search-page--chrome .search-page__empty {
background: #FFFFFF;
padding: clamp(3rem, 8vw, 6rem) var(--gutter) clamp(4rem, 8vw, 7rem);
text-align: center;
}
.search-page--chrome .search-page__empty-inner { max-width: 560px; margin-inline: auto; }
.search-page--chrome .search-page__empty-num {
font-family: 'Anton', sans-serif;
font-size: clamp(7rem, 18vw, 12rem);
line-height: 0.85; letter-spacing: 0.02em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
margin-bottom: 1rem;
}
.search-page--chrome .search-page__empty-title {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 5vw, 2.75rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.05; margin: 0 0 0.875rem;
}
.search-page--chrome .search-page__empty-text {
font-size: 1rem; line-height: 1.6;
color: rgba(15, 15, 15, 0.65);
margin: 0 0 2rem;
}
.search-page--chrome .search-page__empty-text strong { color: #0F0F0F; }
.search-page--chrome .search-page__empty-cta {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 1rem 1.75rem;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border: 1px solid rgba(15, 15, 15, 0.14);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.search-page--chrome .search-page__empty-cta::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms var(--ease);
pointer-events: none;
}
.search-page--chrome .search-page__empty-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(15, 15, 15, 0.18);
}
.search-page--chrome .search-page__empty-cta:hover::before { transform: translateX(100%); }
.search-page--chrome .search-page__prompt {
background: #FFFFFF;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.search-page--chrome .search-page__prompt-inner {
max-width: 880px; margin-inline: auto;
}
.search-page--chrome .search-page__prompt-kicker {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.45);
margin: 0 0 1.25rem;
}
.search-page--chrome .search-page__prompt-list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.search-page--chrome .search-page__prompt-list a {
display: inline-flex; align-items: center;
padding: 0.625rem 1rem; min-height: 44px;
border: 1px solid rgba(15, 15, 15, 0.14);
border-radius: 999px;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
transition: border-color 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
}
.search-page--chrome .search-page__prompt-list a:hover {
border-color: #C9A96E; background: rgba(232, 213, 176, 0.06); color: #0F0F0F;
}
/* ============================================================
CMS PAGE — CHROME LANE
============================================================ */
.page-cms--chrome {
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
background: #FFFFFF;
}
.page-cms--chrome .page-cms__kicker {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.55);
margin-bottom: 1.25rem;
}
.page-cms--chrome .page-cms__hero {
position: relative; overflow: hidden;
background: #0F0F0F; color: #F5F5F5;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
}
.page-cms--chrome .page-cms__hero-noise {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.page-cms--chrome .page-cms__hero-inner {
position: relative; max-width: 720px; margin-inline: auto;
}
.page-cms--chrome .page-cms__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 7vw, 4.5rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 0.95; margin: 0;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.page-cms--chrome .page-cms__body {
padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
}
.page-cms--chrome .page-cms__prose {
max-width: 720px; margin-inline: auto;
font-size: 1rem; line-height: 1.7;
color: rgba(15, 15, 15, 0.85);
}
.page-cms--chrome .page-cms__prose h2 {
font-family: 'Anton', sans-serif;
font-size: clamp(1.625rem, 3vw, 2.25rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.05;
margin: 3rem 0 1rem; color: #0F0F0F;
}
.page-cms--chrome .page-cms__prose h3 {
font-family: 'Anton', sans-serif;
font-size: 1.375rem; letter-spacing: 0.02em;
text-transform: uppercase; line-height: 1.1;
margin: 2.25rem 0 0.75rem; color: #0F0F0F;
}
.page-cms--chrome .page-cms__prose h4 {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.55);
margin: 1.75rem 0 0.5rem;
}
.page-cms--chrome .page-cms__prose p { margin: 0 0 1.25rem; }
.page-cms--chrome .page-cms__prose ul,
.page-cms--chrome .page-cms__prose ol {
margin: 0 0 1.5rem; padding-left: 1.5rem;
}
.page-cms--chrome .page-cms__prose ul { list-style: none; padding-left: 0; }
.page-cms--chrome .page-cms__prose ul li {
position: relative; padding-left: 1.25rem;
margin-bottom: 0.625rem;
}
.page-cms--chrome .page-cms__prose ul li::before {
content: '·'; position: absolute; left: 0.25rem; top: 0;
color: #C9A96E; font-weight: 700;
}
.page-cms--chrome .page-cms__prose ol li { margin-bottom: 0.625rem; }
.page-cms--chrome .page-cms__prose a {
color: #0F0F0F;
border-bottom: 1px solid #C9A96E;
text-decoration: none;
transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
.page-cms--chrome .page-cms__prose a:hover { color: #C9A96E; border-bottom-color: #0F0F0F; }
.page-cms--chrome .page-cms__prose strong { color: #0F0F0F; font-weight: 600; }
.page-cms--chrome .page-cms__prose img {
display: block;
max-width: 100%; height: auto;
margin: 2rem 0;
border: 1px solid rgba(15, 15, 15, 0.08);
}
.page-cms--chrome .page-cms__prose blockquote {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
border-left: 3px solid #C9A96E;
background: rgba(232, 213, 176, 0.08);
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.4;
color: #0F0F0F;
}
.page-cms--chrome .page-cms__prose hr {
border: 0; height: 1px;
background: rgba(15, 15, 15, 0.08);
margin: 3rem 0;
}
/* ============================================================
PASSWORD PAGE — CHROME LANE
============================================================ */
.pwd-page--chrome {
position: relative; overflow: hidden;
min-height: 100vh;
min-height: 100dvh;
background: #0F0F0F;
color: #F5F5F5;
display: grid; place-items: center;
padding: clamp(2rem, 5vw, 4rem) var(--gutter);
font-family: 'Space Grotesk', sans-serif;
}
.pwd-page__noise {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.pwd-page__blobs { position: absolute; inset: 0; pointer-events: none; }
.pwd-page__blob {
position: absolute;
width: 460px; height: 460px; border-radius: 50%;
filter: blur(40px);
animation: chrome-btn-shimmer 18s linear infinite;
}
.pwd-page__blob--a {
top: -80px; left: -60px;
background: radial-gradient(circle, rgba(232, 196, 184, 0.22) 0%, transparent 65%);
}
.pwd-page__blob--b {
bottom: -120px; right: -100px;
background: radial-gradient(circle, rgba(232, 213, 176, 0.18) 0%, transparent 65%);
}
.pwd-page--chrome .pwd-page__inner {
position: relative;
max-width: 520px; width: 100%;
text-align: center;
display: grid; gap: 1rem; justify-items: center;
}
.pwd-page--chrome .pwd-page__kicker {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.5);
}
.pwd-page--chrome .pwd-page__wordmark {
font-family: 'Anton', sans-serif;
font-size: clamp(4.5rem, 14vw, 7.5rem);
line-height: 0.85; letter-spacing: 0.04em;
margin: 0;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.pwd-page--chrome .pwd-page__wordmark sup {
font-size: 0.35em; vertical-align: super;
-webkit-text-fill-color: rgba(245, 245, 245, 0.55);
background: none;
}
.pwd-page--chrome .pwd-page__edition {
display: inline-flex; align-items: center; gap: 0.5rem;
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.7);
}
.pwd-page--chrome .pwd-page__edition-tag {
padding: 0.25rem 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 2px;
color: #F5F5F5;
}
.pwd-page--chrome .pwd-page__edition-dot { color: rgba(245, 245, 245, 0.35); }
.pwd-page--chrome .pwd-page__sub {
font-size: 1rem; line-height: 1.5;
color: rgba(245, 245, 245, 0.7);
max-width: 440px;
margin: 0.5rem 0 1rem;
}
.pwd-page--chrome .pwd-page__form { width: 100%; max-width: 440px; }
.pwd-page--chrome .pwd-page__form-inner {
display: flex; align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
padding: 4px;
transition: border-color 300ms var(--ease);
}
.pwd-page--chrome .pwd-page__form-inner:focus-within { border-color: #C9A96E; }
.pwd-page--chrome .pwd-page__form-inner input {
flex: 1; min-width: 0;
border: 0; background: transparent;
padding: 0.6rem 1.25rem; min-height: 44px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.938rem; color: #F5F5F5;
outline: none;
}
.pwd-page--chrome .pwd-page__form-inner input::placeholder { color: rgba(245, 245, 245, 0.4); }
.pwd-page--chrome .pwd-page__form-inner button {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.7rem 1.25rem;
background: #F5F5F5;
color: #0F0F0F;
border: 0; border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
cursor: pointer;
transition: background-color 300ms var(--ease);
}
.pwd-page--chrome .pwd-page__form-inner button:hover { background: #C9A96E; }
.pwd-page--chrome .pwd-page__error {
color: #E8C4B8;
font-size: 0.813rem; margin: 0.75rem 0 0;
}
.pwd-page--chrome .pwd-page__waitlist {
margin-top: 2rem;
width: 100%; max-width: 440px;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.pwd-page--chrome .pwd-page__waitlist-kicker {
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.5);
margin: 0 0 0.75rem;
}
.pwd-page--chrome .pwd-page__waitlist-form {
display: flex; gap: 0.5rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
padding: 4px;
}
.pwd-page--chrome .pwd-page__waitlist-form:focus-within { border-color: #C9A96E; }
.pwd-page--chrome .pwd-page__waitlist-form input {
flex: 1; min-width: 0;
border: 0; background: transparent;
padding: 0.6rem 1.25rem; min-height: 44px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.938rem; color: #F5F5F5;
outline: none;
}
.pwd-page--chrome .pwd-page__waitlist-form input::placeholder { color: rgba(245, 245, 245, 0.4); }
.pwd-page--chrome .pwd-page__waitlist-form button {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.7rem 1.125rem;
background: transparent;
color: #E8D5B0;
border: 1px solid rgba(232, 213, 176, 0.45);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
cursor: pointer;
transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.pwd-page--chrome .pwd-page__waitlist-form button:hover {
background: rgba(232, 213, 176, 0.08); color: #F5F5F5;
}
.pwd-page--chrome .pwd-page__waitlist-success {
color: #E8D5B0;
font-size: 0.813rem;
text-align: center;
margin: 0.75rem 0 0;
}
/* ============================================================
FORM STATES — CHROME LANE
Inline success / error messages for customer & contact forms
============================================================ */
.chrome-form-success,
.chrome-form-error {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem; line-height: 1.45;
letter-spacing: 0.01em;
padding: 0.75rem 1rem;
margin: 0.75rem 0 0;
border-radius: 2px;
border: 1px solid;
text-align: left;
}
.chrome-form-success {
color: #E8D5B0;
background: rgba(232, 213, 176, 0.08);
border-color: rgba(232, 213, 176, 0.35);
}
.chrome-form-error {
color: #E8C4B8;
background: rgba(232, 196, 184, 0.08);
border-color: rgba(232, 196, 184, 0.35);
}
/* Dark-on-light variant when the form sits on a light surface */
body[data-lane="chrome"] .page-cms--chrome .chrome-form-success,
body[data-lane="chrome"] .page-cms--chrome .chrome-form-error {
background: rgba(232, 213, 176, 0.18);
color: #6F5A2C;
}
body[data-lane="chrome"] .page-cms--chrome .chrome-form-error {
background: rgba(232, 196, 184, 0.22);
color: #8A4A3E;
}
/* Default Shopify error list from {{ form.errors | default_errors }} — chrome-ified */
body[data-lane="chrome"] .errors,
body[data-lane="chrome"] .form-errors,
body[data-lane="chrome"] ul.errors,
body[data-lane="chrome"] .form-errors__list {
list-style: none;
margin: 0.5rem 0;
padding: 0.75rem 1rem;
background: rgba(232, 196, 184, 0.1);
border: 1px solid rgba(232, 196, 184, 0.35);
border-radius: 2px;
color: #E8C4B8;
font-size: 0.875rem;
text-align: left;
}
body[data-lane="chrome"] .errors li,
body[data-lane="chrome"] .form-errors li { padding: 0.125rem 0; }
/* ============================================================
LOADING / BUSY STATE — CHROME LANE
Visual indication when a button/form is mid-submit
============================================================ */
body[data-lane="chrome"] [aria-busy="true"],
body[data-lane="chrome"] button[disabled],
body[data-lane="chrome"] [type="submit"][disabled] {
opacity: 0.6;
cursor: progress;
pointer-events: none;
}
/* Spinner utility — for places that need a visible indicator */
.chrome-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid rgba(15, 15, 15, 0.2);
border-top-color: #C9A96E;
border-radius: 50%;
animation: chrome-spinner-rot 800ms linear infinite;
vertical-align: middle;
}
.chrome-spinner--light {
border-color: rgba(245, 245, 245, 0.2);
border-top-color: #E8D5B0;
}
@keyframes chrome-spinner-rot {
to { transform: rotate(360deg); }
}
/* ============================================================
FOCUS RING — global default for chrome lane
============================================================ */
body[data-lane="chrome"] a:focus-visible,
body[data-lane="chrome"] button:focus-visible,
body[data-lane="chrome"] input:focus-visible,
body[data-lane="chrome"] textarea:focus-visible,
body[data-lane="chrome"] select:focus-visible,
body[data-lane="chrome"] [tabindex]:focus-visible {
outline: 2px solid #C9A96E;
outline-offset: 2px;
}
/* ============================================================
SHOPIFY POLICY PAGES — CHROME OVERRIDE
------------------------------------------------------------
Shopify ignores templates/policy.liquid on this account and
routes /policies/* URLs through a hardcoded renderer that
outputs .shopify-policy__container / __title / __body markup.
templates/policy.json is rejected ("Template type 'policy'
does not support JSON templates").
This block paints chrome on Shopify's own markup as a CSS-only
workaround. The structured templates/policy.liquid and
sections/main-policy.liquid are kept dormant for the day
Shopify starts honoring custom policy templates.
============================================================ */
body[data-lane="chrome"] .shopify-policy__container {
max-width: 1280px;
margin: 0 auto;
padding: 0;
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
background: #FFFFFF;
}
/* TITLE as a dark "hero" band — same dark surface as page-cms hero */
body[data-lane="chrome"] .shopify-policy__title {
position: relative;
background: #0F0F0F;
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter);
margin: 0 0 0;
text-align: left;
max-width: none;
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
}
body[data-lane="chrome"] .shopify-policy__title::before {
content: '— Legal —';
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245, 245, 245, 0.55);
margin-bottom: 1.25rem;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
body[data-lane="chrome"] .shopify-policy__title::after {
content: '';
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
body[data-lane="chrome"] .shopify-policy__title h1 {
position: relative;
z-index: 1;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--gutter);
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 7vw, 4.5rem);
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 0.95;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
/* BODY prose — mirror .page-cms__prose treatment scoped to Shopify's class */
body[data-lane="chrome"] .shopify-policy__body {
max-width: 720px;
margin: 0 auto;
padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem;
line-height: 1.7;
color: rgba(15, 15, 15, 0.85);
}
body[data-lane="chrome"] .shopify-policy__body h1,
body[data-lane="chrome"] .shopify-policy__body h2 {
font-family: 'Anton', sans-serif;
font-size: clamp(1.625rem, 3vw, 2.25rem);
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.05;
margin: 3rem 0 1rem;
color: #0F0F0F;
font-weight: 400;
}
body[data-lane="chrome"] .shopify-policy__body h3 {
font-family: 'Anton', sans-serif;
font-size: 1.375rem;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.1;
margin: 2.25rem 0 0.75rem;
color: #0F0F0F;
font-weight: 400;
}
body[data-lane="chrome"] .shopify-policy__body h4,
body[data-lane="chrome"] .shopify-policy__body h5,
body[data-lane="chrome"] .shopify-policy__body h6 {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(15, 15, 15, 0.55);
margin: 1.75rem 0 0.5rem;
}
body[data-lane="chrome"] .shopify-policy__body p {
margin: 0 0 1.25rem;
}
body[data-lane="chrome"] .shopify-policy__body ul,
body[data-lane="chrome"] .shopify-policy__body ol {
margin: 0 0 1.5rem;
padding-left: 1.5rem;
}
body[data-lane="chrome"] .shopify-policy__body ul {
list-style: none;
padding-left: 0;
}
body[data-lane="chrome"] .shopify-policy__body ul li {
position: relative;
padding-left: 1.25rem;
margin-bottom: 0.625rem;
}
body[data-lane="chrome"] .shopify-policy__body ul li::before {
content: '·';
position: absolute;
left: 0.25rem;
top: 0;
color: #C9A96E;
font-weight: 700;
}
body[data-lane="chrome"] .shopify-policy__body ol li {
margin-bottom: 0.625rem;
}
body[data-lane="chrome"] .shopify-policy__body a {
color: #0F0F0F;
border-bottom: 1px solid #C9A96E;
text-decoration: none;
transition: color 300ms var(--ease), border-color 300ms var(--ease);
}
body[data-lane="chrome"] .shopify-policy__body a:hover {
color: #C9A96E;
border-bottom-color: #0F0F0F;
}
body[data-lane="chrome"] .shopify-policy__body strong {
color: #0F0F0F;
font-weight: 600;
}
body[data-lane="chrome"] .shopify-policy__body em {
font-family: 'Fraunces', serif;
font-style: italic;
}
body[data-lane="chrome"] .shopify-policy__body blockquote {
margin: 2rem 0;
padding: 1.25rem 1.5rem;
border-left: 3px solid #C9A96E;
background: rgba(232, 213, 176, 0.08);
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.4;
color: #0F0F0F;
}
body[data-lane="chrome"] .shopify-policy__body hr {
border: 0;
height: 1px;
background: rgba(15, 15, 15, 0.08);
margin: 3rem 0;
}
body[data-lane="chrome"] .shopify-policy__body img {
display: block;
max-width: 100%;
height: auto;
margin: 2rem 0;
border: 1px solid rgba(15, 15, 15, 0.08);
}
body[data-lane="chrome"] .shopify-policy__body table {
width: 100%;
margin: 1.5rem 0;
border-collapse: collapse;
font-size: 0.875rem;
}
body[data-lane="chrome"] .shopify-policy__body th,
body[data-lane="chrome"] .shopify-policy__body td {
padding: 0.625rem 0.875rem;
border: 1px solid rgba(15, 15, 15, 0.08);
text-align: left;
}
body[data-lane="chrome"] .shopify-policy__body th {
background: rgba(15, 15, 15, 0.04);
font-weight: 600;
letter-spacing: 0.02em;
}
/* ============================================================
HOMEPAGE NUMBERING BAND
Mid-page dark band introducing the numbering concept + lookup CTA.
============================================================ */
.chrome-numbering {
position: relative; overflow: hidden;
background: #0F0F0F; color: #F5F5F5;
padding: clamp(3rem, 8vw, 7.5rem) var(--gutter);
text-align: center;
}
.chrome-numbering__blobs {
position: absolute; inset: 0;
pointer-events: none;
}
.chrome-numbering__blob {
position: absolute;
width: 520px; height: 520px; border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
animation: chrome-numbering-drift 18s ease-in-out infinite;
}
.chrome-numbering__blob--a {
top: -160px; left: -120px;
background: radial-gradient(circle, rgba(232, 213, 176, 0.22) 0%, transparent 65%);
}
.chrome-numbering__blob--b {
bottom: -180px; right: -140px;
background: radial-gradient(circle, rgba(232, 196, 184, 0.18) 0%, transparent 65%);
animation-direction: reverse;
animation-duration: 22s;
}
@keyframes chrome-numbering-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -10px) scale(1.06); }
}
.chrome-numbering__inner {
position: relative;
max-width: 880px;
margin-inline: auto;
}
.chrome-numbering__kicker {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: #C9A96E;
margin-bottom: 1.5rem;
}
.chrome-numbering__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.5rem, 8vw, 5rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 0.98;
margin: 0 0 1rem;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.chrome-numbering__title em {
font-family: 'Fraunces', serif;
font-style: italic; font-weight: 400;
text-transform: none;
}
.chrome-numbering__sub {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.45;
color: #aaaaaa;
margin: 0 auto 2.25rem;
max-width: 540px;
}
@media (max-width: 600px) {
.chrome-numbering__kicker { margin-bottom: 0.875rem; }
.chrome-numbering__title { margin-bottom: 0.625rem; }
.chrome-numbering__sub { margin-bottom: 1.5rem; }
}
.chrome-numbering__cta {
position: relative; overflow: hidden;
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 1rem 1.875rem;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.chrome-numbering__cta::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms var(--ease);
pointer-events: none;
}
.chrome-numbering__cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(232, 213, 176, 0.22);
}
.chrome-numbering__cta:hover::before { transform: translateX(100%); }
@media (max-width: 600px) {
.chrome-numbering { padding: clamp(4rem, 16vw, 5rem) var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
.chrome-numbering__blob,
.chrome-numbering__title,
.chrome-numbering__cta { animation: none; }
.chrome-numbering__cta::before { transition: none; }
}
/* ============================================================
EDITION LOOKUP — /pages/lookup
Cinematic hero · chrome pill input · membership-card result.
See sections/page-lookup.liquid + theme.js EDITION LOOKUP block.
============================================================ */
.lookup-page--chrome {
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
background: #FFFFFF;
}
/* HERO — bigger, ambient blobs ------------------------------ */
.lookup-page--chrome .lookup-page__hero {
position: relative; overflow: hidden;
background: #0F0F0F; color: #F5F5F5;
padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(4rem, 9vw, 6.5rem);
text-align: center;
}
.lookup-page--chrome .lookup-page__hero-noise {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.lookup-page--chrome .lookup-page__hero-blobs {
position: absolute; inset: 0; pointer-events: none;
}
.lookup-page--chrome .lookup-page__blob {
position: absolute;
width: 520px; height: 520px; border-radius: 50%;
filter: blur(70px);
opacity: 0.55;
animation: lookup-blob-drift 20s ease-in-out infinite;
}
.lookup-page--chrome .lookup-page__blob--a {
top: -160px; left: -120px;
background: radial-gradient(circle, rgba(232, 196, 184, 0.28) 0%, transparent 65%);
}
.lookup-page--chrome .lookup-page__blob--b {
bottom: -180px; right: -140px;
background: radial-gradient(circle, rgba(232, 213, 176, 0.22) 0%, transparent 65%);
animation-direction: reverse;
animation-duration: 24s;
}
@keyframes lookup-blob-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(28px, -16px) scale(1.08); }
}
.lookup-page--chrome .lookup-page__hero-inner {
position: relative;
max-width: 880px; margin-inline: auto;
}
.lookup-page--chrome .lookup-page__kicker {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.55);
margin-bottom: 1.5rem;
}
.lookup-page--chrome .lookup-page__title {
font-family: 'Anton', sans-serif;
font-size: clamp(3rem, 9vw, 6rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 0.95; margin: 0 0 1.25rem;
color: #F5F5F5;
}
.lookup-page--chrome .lookup-page__title em {
font-family: 'Fraunces', serif;
font-style: italic; font-weight: 400;
text-transform: none;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.lookup-page--chrome .lookup-page__sub {
font-family: 'Fraunces', serif;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.45;
color: rgba(245, 245, 245, 0.7);
margin: 0 auto;
max-width: 580px;
}
.lookup-page--chrome .lookup-page__sub em { font-style: italic; }
/* STAGE — wraps input + microcopy + result ----------------- */
.lookup-page--chrome .lookup-page__stage {
padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(3rem, 5vw, 4rem);
max-width: 720px;
margin-inline: auto;
}
/* INPUT — pill, chrome-gradient border, arrow inside on right */
.lookup-page--chrome .lookup-page__form-wrap {
max-width: 520px;
margin: 0 auto;
}
.lookup-page--chrome .lookup-page__form {
position: relative;
display: flex; align-items: center;
padding: 6px;
border-radius: 999px;
background-color: #FFFFFF;
background-image:
linear-gradient(#FFFFFF, #FFFFFF),
linear-gradient(180deg, #F8F8F8 0%, #B0B0B0 30%, #6E6E6E 55%, #C8C8C8 80%, #888 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border: 2px solid transparent;
transition: box-shadow 400ms var(--ease), transform 400ms var(--ease);
}
.lookup-page--chrome .lookup-page__form:focus-within {
box-shadow:
0 0 0 4px rgba(232, 213, 176, 0.22),
0 12px 28px rgba(15, 15, 15, 0.12);
transform: translateY(-1px);
}
.lookup-page--chrome .lookup-page__input {
flex: 1; min-width: 0;
border: 0; background: transparent;
padding: 0 1rem 0 1.5rem;
min-height: 56px;
font-family: 'Anton', sans-serif;
font-size: 1.5rem;
letter-spacing: 0.04em;
color: #0F0F0F;
outline: none;
}
.lookup-page--chrome .lookup-page__input::placeholder {
color: rgba(15, 15, 15, 0.28);
font-family: 'Anton', sans-serif;
}
.lookup-page--chrome .lookup-page__submit {
position: relative; overflow: hidden;
flex-shrink: 0;
width: 48px; height: 48px;
border-radius: 50%;
border: 0;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
font-family: 'Space Grotesk', sans-serif;
font-size: 1.5rem; font-weight: 500;
color: #0F0F0F; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.lookup-page--chrome .lookup-page__submit:hover {
transform: scale(1.06);
box-shadow: 0 8px 20px rgba(15, 15, 15, 0.18);
}
@media (min-width: 720px) {
.lookup-page--chrome .lookup-page__input { min-height: 64px; font-size: 1.75rem; padding: 0 1.25rem 0 1.75rem; }
.lookup-page--chrome .lookup-page__submit { width: 52px; height: 52px; }
}
.lookup-page--chrome .lookup-page__hint {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.938rem;
line-height: 1.45;
color: rgba(15, 15, 15, 0.65);
text-align: center;
margin: 1.25rem 0 0;
min-height: 1.5em;
}
/* HOW IT WORKS microcopy ---------------------------------- */
.lookup-page--chrome .lookup-page__hiw {
display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
gap: 0.75rem 1rem;
margin: 2rem auto 0;
max-width: 720px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; line-height: 1.5;
letter-spacing: 0.02em;
color: rgba(15, 15, 15, 0.55);
text-align: center;
}
.lookup-page--chrome .lookup-page__hiw p {
margin: 0;
}
.lookup-page--chrome .lookup-page__hiw-sep {
color: #C9A96E;
font-size: 0.75rem;
}
.lookup-page--chrome .lookup-page__hiw[hidden] { display: none !important; }
/* RESULT — membership card with stagger reveal ------------ */
.lookup-page--chrome .lookup-page__result-wrap {
margin: clamp(2rem, 4vw, 3rem) auto 0;
max-width: 560px;
text-align: center;
}
.lookup-page--chrome .lookup-page__result-wrap[hidden] { display: none !important; }
.lookup-page--chrome .lookup-card {
position: relative;
text-align: center;
outline: none;
padding: 4px;
border-radius: 8px;
background-color: #0F0F0F;
background-image:
linear-gradient(#0F0F0F, #0F0F0F),
linear-gradient(135deg, rgba(232, 213, 176, 0.45), rgba(176, 176, 176, 0.25) 30%, rgba(15, 15, 15, 0.1) 60%, rgba(232, 196, 184, 0.32));
background-origin: border-box;
background-clip: padding-box, border-box;
border: 1px solid transparent;
box-shadow: 0 24px 48px rgba(15, 15, 15, 0.18);
}
.lookup-page--chrome .lookup-card__inset {
position: relative; overflow: hidden;
background: #0F0F0F; color: #F5F5F5;
border-radius: 5px;
padding: clamp(2rem, 5vw, 2.75rem) clamp(1.5rem, 4vw, 2.25rem);
}
.lookup-page--chrome .lookup-card__inset::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(circle at top right, rgba(232, 213, 176, 0.10) 0%, transparent 50%),
radial-gradient(circle at bottom left, rgba(232, 196, 184, 0.08) 0%, transparent 55%);
pointer-events: none;
}
.lookup-page--chrome .lookup-card__no-wrap {
position: relative; overflow: hidden;
display: inline-block;
padding: 0.25rem 0.5rem;
margin: 0.5rem auto 1.5rem;
}
.lookup-page--chrome .lookup-card__no {
position: relative; z-index: 1;
font-family: 'Anton', sans-serif;
font-size: clamp(4.5rem, 14vw, 7.5rem);
letter-spacing: 0.02em;
line-height: 0.95;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.lookup-page--chrome .lookup-card__no-sweep {
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
transform: translateX(-110%);
pointer-events: none;
z-index: 2;
mix-blend-mode: screen;
}
.lookup-page--chrome .lookup-card__status {
position: relative; z-index: 1;
display: inline-flex; align-items: center;
padding: 0.45rem 1rem;
margin-bottom: 0.5rem;
border: 1px solid rgba(232, 213, 176, 0.4);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.18em; text-transform: uppercase;
color: #E8D5B0;
background: linear-gradient(90deg, rgba(232, 213, 176, 0.08) 0%, rgba(201, 169, 110, 0.16) 50%, rgba(232, 213, 176, 0.08) 100%);
background-size: 200% 100%;
animation: chrome-btn-shimmer 8s linear infinite;
}
.lookup-page--chrome .lookup-card__status[data-status="active"] {
border-color: rgba(232, 196, 184, 0.45);
color: #E8C4B8;
background: linear-gradient(90deg, rgba(232, 196, 184, 0.08) 0%, rgba(232, 196, 184, 0.18) 50%, rgba(232, 196, 184, 0.08) 100%);
background-size: 200% 100%;
}
.lookup-page--chrome .lookup-card__divider {
position: relative; z-index: 1;
margin: 1.5rem auto 1.25rem;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}
.lookup-page--chrome .lookup-card__meta {
position: relative; z-index: 1;
display: grid; gap: 0.875rem;
margin: 0 0 1.5rem;
text-align: left;
}
.lookup-page--chrome .lookup-card__meta-row {
display: grid;
grid-template-columns: 8rem 1fr;
gap: 1rem;
align-items: baseline;
}
.lookup-page--chrome .lookup-card__meta-row dt {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.45);
margin: 0;
}
.lookup-page--chrome .lookup-card__meta-row dd {
font-family: 'Space Grotesk', sans-serif;
font-size: 1rem; font-weight: 500;
color: #F5F5F5;
margin: 0;
}
.lookup-page--chrome .lookup-card__foot {
position: relative; z-index: 1;
margin: 0;
padding-top: 1.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.06);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
letter-spacing: 0.16em; text-transform: uppercase;
color: rgba(245, 245, 245, 0.4);
}
/* Stagger reveal — each row off then fades+rises in sequence */
.lookup-page--chrome [data-lookup-reveal-row] {
opacity: 0;
transform: translateY(10px);
transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row] {
opacity: 1;
transform: translateY(0);
}
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="0"] { transition-delay: 0ms; }
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="1"] { transition-delay: 80ms; }
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="2"] { transition-delay: 140ms; }
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="3"] { transition-delay: 200ms; }
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="4"] { transition-delay: 260ms; }
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="5"] { transition-delay: 320ms; }
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="6"] { transition-delay: 380ms; }
.lookup-page--chrome .lookup-page__result-wrap--visible [data-lookup-reveal-row="7"] { transition-delay: 440ms; }
/* Card-container fade + lift */
.lookup-page--chrome .lookup-page__result-wrap > .lookup-card {
opacity: 0;
transform: translateY(16px);
transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.lookup-page--chrome .lookup-page__result-wrap--visible > .lookup-card {
opacity: 1;
transform: translateY(0);
}
/* Chrome shimmer sweep across the No. — fires once on reveal */
.lookup-page--chrome .lookup-page__result-wrap--visible .lookup-card__no-sweep {
animation: lookup-no-sweep 1200ms cubic-bezier(0.4, 0, 0.2, 1) 240ms 1 forwards;
}
@keyframes lookup-no-sweep {
0% { transform: translateX(-110%); }
100% { transform: translateX(110%); }
}
/* Share button */
.lookup-page--chrome .lookup-page__share {
display: inline-flex; align-items: center; gap: 0.5rem;
margin: 1.25rem auto 0;
padding: 0.7rem 1.25rem;
background: transparent;
border: 1px solid rgba(15, 15, 15, 0.18);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: #0F0F0F; cursor: pointer;
transition: border-color 300ms var(--ease), background-color 300ms var(--ease);
}
.lookup-page--chrome .lookup-page__share:hover {
border-color: #C9A96E;
background: rgba(232, 213, 176, 0.06);
}
/* ABOUT EDITION I — footer block ------------------------- */
.lookup-page--chrome .lookup-page__about {
background: #ECECEC;
padding: clamp(3rem, 6vw, 5rem) var(--gutter);
border-top: 1px solid rgba(15, 15, 15, 0.06);
text-align: center;
}
.lookup-page--chrome .lookup-page__about-inner {
max-width: 640px;
margin-inline: auto;
}
.lookup-page--chrome .lookup-page__about-kicker {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.45);
margin-bottom: 1.5rem;
}
.lookup-page--chrome .lookup-page__about-body p {
font-family: 'Fraunces', serif;
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
line-height: 1.5;
color: rgba(15, 15, 15, 0.78);
margin: 0 0 0.875rem;
}
.lookup-page--chrome .lookup-page__about-body p:last-child {
margin-bottom: 0;
}
.lookup-page--chrome .lookup-page__about-cta {
display: inline-flex; align-items: center; gap: 0.625rem;
margin-top: 2rem;
padding: 0.875rem 1.75rem;
background: #0F0F0F;
border: 1px solid #0F0F0F;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: #F5F5F5; text-decoration: none;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.lookup-page--chrome .lookup-page__about-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(15, 15, 15, 0.2);
}
/* Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
.lookup-page--chrome .lookup-page__blob,
.lookup-page--chrome .lookup-page__title em,
.lookup-page--chrome .lookup-page__submit,
.lookup-page--chrome .lookup-card__no,
.lookup-page--chrome .lookup-card__status {
animation: none;
}
.lookup-page--chrome [data-lookup-reveal-row],
.lookup-page--chrome .lookup-page__result-wrap > .lookup-card {
transition: none;
}
.lookup-page--chrome .lookup-page__result-wrap--visible .lookup-card__no-sweep {
animation: none;
opacity: 0;
}
}
/* Narrow viewport ----------------------------------------- */
@media (max-width: 480px) {
.lookup-page--chrome .lookup-card__meta-row {
grid-template-columns: 6.5rem 1fr;
gap: 0.75rem;
}
.lookup-page--chrome .lookup-page__hiw {
flex-direction: column;
gap: 0.5rem;
}
.lookup-page--chrome .lookup-page__hiw-sep { display: none; }
}
/* ============================================================
AMBASSADORS — /pages/ambassadors
Dark hero · platinum profile grid · dark pull-quote band ·
light contact CTA.
============================================================ */
.ambassadors--chrome {
font-family: 'Space Grotesk', sans-serif;
color: #0F0F0F;
background: #FFFFFF;
}
/* HERO ----------------------------------------------------- */
.ambassadors--chrome .ambassadors__hero {
position: relative; overflow: hidden;
background: #0F0F0F; color: #F5F5F5;
padding: clamp(4rem, 9vw, 7rem) var(--gutter) clamp(4rem, 9vw, 6.5rem);
text-align: center;
}
.ambassadors--chrome .ambassadors__hero-noise {
position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
background-size: 3px 3px; mix-blend-mode: screen; opacity: 0.5;
}
.ambassadors--chrome .ambassadors__hero-blobs {
position: absolute; inset: 0; pointer-events: none;
}
.ambassadors--chrome .ambassadors__blob {
position: absolute;
width: 520px; height: 520px; border-radius: 50%;
filter: blur(70px); opacity: 0.5;
animation: lookup-blob-drift 22s ease-in-out infinite;
}
.ambassadors--chrome .ambassadors__blob--a {
top: -160px; left: -120px;
background: radial-gradient(circle, rgba(232, 213, 176, 0.22) 0%, transparent 65%);
}
.ambassadors--chrome .ambassadors__blob--b {
bottom: -180px; right: -140px;
background: radial-gradient(circle, rgba(232, 196, 184, 0.18) 0%, transparent 65%);
animation-direction: reverse;
animation-duration: 26s;
}
.ambassadors--chrome .ambassadors__hero-inner {
position: relative;
max-width: 720px; margin-inline: auto;
}
.ambassadors--chrome .ambassadors__kicker {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 600;
letter-spacing: 0.22em; text-transform: uppercase;
color: #C9A96E;
margin-bottom: 1.5rem;
}
.ambassadors--chrome .ambassadors__title {
font-family: 'Anton', sans-serif;
font-size: clamp(2.75rem, 9vw, 5.5rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 0.98; margin: 0 0 1.25rem;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.ambassadors--chrome .ambassadors__sub {
font-family: 'Fraunces', serif;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.5;
color: rgba(245, 245, 245, 0.7);
margin: 0 auto;
max-width: 600px;
}
.ambassadors--chrome .ambassadors__sub em { font-style: italic; }
/* PROFILE GRID --------------------------------------------- */
.ambassadors--chrome .ambassadors__grid-section {
background: #ECECEC;
padding: clamp(3rem, 6vw, 5rem) var(--gutter);
border-top: 1px solid rgba(15, 15, 15, 0.06);
border-bottom: 1px solid rgba(15, 15, 15, 0.06);
}
.ambassadors--chrome .ambassadors__grid {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1180px;
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
grid-template-columns: 1fr;
}
@media (min-width: 600px) {
.ambassadors--chrome .ambassadors__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.ambassadors--chrome .ambassadors__grid { grid-template-columns: repeat(3, 1fr); }
}
/* PROFILE CARD --------------------------------------------- */
.amb-card {
display: grid;
gap: 1.25rem;
}
.amb-card__media {
position: relative;
aspect-ratio: 1;
overflow: hidden;
background-color: #ECECEC;
/* Chrome silver inset border via dual-layer background-clip trick */
background-image:
linear-gradient(#ECECEC, #ECECEC),
linear-gradient(135deg, #F8F8F8 0%, #B0B0B0 25%, #6E6E6E 50%, #C8C8C8 75%, #888 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border: 2px solid transparent;
}
.amb-card__img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 700ms var(--ease);
}
.amb-card:hover .amb-card__img { transform: scale(1.03); }
.amb-card__placeholder {
width: 100%; height: 100%;
background:
linear-gradient(135deg, #ECECEC 0%, #F5F5F5 50%, #ECECEC 100%);
}
.amb-card__body {
display: grid; gap: 0.5rem;
padding: 0 0.125rem;
}
.amb-card__name {
font-family: 'Anton', sans-serif;
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1; margin: 0;
color: #0F0F0F;
}
.amb-card__city {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.18em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.55);
margin: 0;
}
.amb-card__quote {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 1.0625rem;
line-height: 1.5;
color: rgba(15, 15, 15, 0.82);
margin: 0.5rem 0 0;
padding: 0;
border: 0;
}
.amb-card__quote::before { content: '“'; margin-right: 0.05em; color: #C9A96E; }
.amb-card__quote::after { content: '”'; margin-left: 0.05em; color: #C9A96E; }
.amb-card__social {
display: inline-flex; align-items: center; gap: 0.5rem;
align-self: start;
margin-top: 0.25rem;
padding: 0.5rem 0.875rem;
border: 1px solid rgba(15, 15, 15, 0.18);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: #0F0F0F; text-decoration: none;
transition: border-color 300ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease);
}
.amb-card__social:hover {
border-color: #C9A96E;
background: rgba(232, 213, 176, 0.08);
color: #0F0F0F;
}
/* EMPTY STATE --------------------------------------------- */
.ambassadors--chrome .ambassadors__empty {
max-width: 560px; margin-inline: auto;
text-align: center;
padding: clamp(2rem, 5vw, 3.5rem) 0;
}
.ambassadors--chrome .ambassadors__empty-num {
font-family: 'Anton', sans-serif;
font-size: clamp(5rem, 14vw, 9rem);
line-height: 0.9; letter-spacing: 0.02em;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
margin-bottom: 1rem;
}
.ambassadors--chrome .ambassadors__empty-title {
font-family: 'Anton', sans-serif;
font-size: clamp(1.625rem, 4vw, 2.25rem);
letter-spacing: 0.02em; text-transform: uppercase;
line-height: 1.1; margin: 0 0 0.75rem;
color: #0F0F0F;
}
.ambassadors--chrome .ambassadors__empty-text {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 1.0625rem; line-height: 1.5;
color: rgba(15, 15, 15, 0.65);
margin: 0;
}
/* QUIET PULL-QUOTE BAND ----------------------------------- */
.ambassadors--chrome .ambassadors__quote-band {
background: #0F0F0F; color: #F5F5F5;
padding: clamp(4rem, 9vw, 7.5rem) var(--gutter);
text-align: center;
display: grid;
gap: 1.75rem;
justify-items: center;
}
.ambassadors--chrome .ambassadors__quote-rule {
display: block;
width: clamp(80px, 12vw, 140px);
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(232, 213, 176, 0.5) 50%, transparent 100%);
}
.ambassadors--chrome .ambassadors__pullquote {
font-family: 'Fraunces', serif;
font-style: italic; font-weight: 400;
font-size: clamp(1.5rem, 3.5vw, 2.5rem);
line-height: 1.3;
color: #F5F5F5;
margin: 0;
padding: 0;
border: 0;
max-width: 700px;
}
/* SOFT CONTACT BAND --------------------------------------- */
.ambassadors--chrome .ambassadors__contact {
background: #FFFFFF;
padding: clamp(3rem, 6vw, 5rem) var(--gutter);
text-align: center;
}
.ambassadors--chrome .ambassadors__contact-inner {
max-width: 600px; margin-inline: auto;
}
.ambassadors--chrome .ambassadors__contact-kicker {
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem; font-weight: 500;
letter-spacing: 0.22em; text-transform: uppercase;
color: rgba(15, 15, 15, 0.45);
margin-bottom: 1rem;
}
.ambassadors--chrome .ambassadors__contact-text {
font-family: 'Fraunces', serif;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.5;
color: rgba(15, 15, 15, 0.78);
margin: 0 0 1.75rem;
}
.ambassadors--chrome .ambassadors__contact-cta {
display: inline-flex; align-items: center; gap: 0.625rem;
padding: 0.875rem 1.75rem;
background: #0F0F0F;
border: 1px solid #0F0F0F;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem; font-weight: 600;
letter-spacing: 0.16em; text-transform: uppercase;
color: #F5F5F5; text-decoration: none;
transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.ambassadors--chrome .ambassadors__contact-cta:hover {
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(15, 15, 15, 0.2);
}
@media (prefers-reduced-motion: reduce) {
.ambassadors--chrome .ambassadors__blob,
.ambassadors--chrome .ambassadors__title,
.ambassadors--chrome .ambassadors__empty-num { animation: none; }
.amb-card__img { transition: none; }
}
/* ============================================================
PDP FINE-PRINT PANELS — chrome accordion bodies
Shared dark card · chrome gradient headlines · 5 layout variants.
The accordion mechanism (/, +/- icon, header
styling) is in .cpdp-chap and is NOT modified by this block.
============================================================ */
/* Reset .cpdp-chap__a heavy padding when it contains a fine-print-panel */
.cpdp-chap__a:has(.fine-print-panel) {
padding: 0 0 1.5rem;
}
/* --- BASE CARD ------------------------------------------- */
.fine-print-panel {
position: relative; overflow: hidden;
background: #ECECEC;
color: #1A1A1A;
border-radius: 16px;
padding: clamp(1.5rem, 5vw, 3rem);
margin-top: 16px;
border: 1px solid rgba(0, 0, 0, 0.08);
font-family: 'Space Grotesk', sans-serif;
}
/* Ambient blob top-right (only when present in HTML — panels 01, 03, 05) */
/* Opacity halved from dark-card original (~8% perceived → ~4%) for light surface */
.fine-print-panel__blob {
position: absolute;
top: -120px; right: -120px;
width: 380px; height: 380px;
border-radius: 50%;
background: radial-gradient(circle, rgba(232, 213, 176, 0.22) 0%, transparent 65%);
filter: blur(50px);
opacity: 0.25;
pointer-events: none;
animation: fine-print-blob-drift 22s ease-in-out infinite;
}
@keyframes fine-print-blob-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(20px, -10px) scale(1.06); }
}
/* --- SHARED TYPOGRAPHY ----------------------------------- */
.fine-print-panel__kicker {
position: relative; z-index: 1;
display: block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #C9A96E;
margin-bottom: 1.25rem;
}
.fine-print-panel__headline {
position: relative; z-index: 1;
font-family: 'Anton', sans-serif;
font-size: clamp(2.25rem, 5.5vw, 4rem);
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 0.95;
margin: 0 0 1.25rem;
/* Steel gradient — inverted chrome for light surfaces (Option B) */
background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 25%, #555555 50%, #1A1A1A 75%, #333333 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.fine-print-panel__subhead {
position: relative; z-index: 1;
font-family: 'Fraunces', serif;
font-weight: 300;
font-style: italic;
font-size: 1rem;
line-height: 1.5;
color: rgba(15, 15, 15, 0.65);
margin: 0 0 1.75rem;
max-width: 540px;
}
.fine-print-panel__editorial {
position: relative; z-index: 1;
font-family: 'Fraunces', serif;
font-weight: 300;
font-size: 1rem;
line-height: 1.6;
color: rgba(15, 15, 15, 0.75);
margin: 0 auto 2rem;
max-width: 580px;
text-align: center;
}
.fine-print-panel__editorial em { font-style: italic; }
.fine-print-panel__closing {
position: relative; z-index: 1;
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.875rem;
line-height: 1.45;
color: rgba(15, 15, 15, 0.45);
margin: 1.75rem 0 0;
text-align: center;
}
/* --- PANEL 01: INSIDE — stats grid ---------------------- */
.fine-print-panel--inside .fine-print-panel__stats {
position: relative; z-index: 1;
display: grid;
grid-template-columns: repeat(2, 1fr);
margin: 1.75rem 0 0;
border-top: 0.5px solid rgba(0, 0, 0, 0.08);
}
@media (min-width: 720px) {
.fine-print-panel--inside .fine-print-panel__stats {
grid-template-columns: repeat(4, 1fr);
}
}
.fine-print-panel__stat {
position: relative;
padding: 1.25rem 0.875rem;
text-align: center;
border-right: 0.5px solid rgba(0, 0, 0, 0.08);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
}
.fine-print-panel__stat:last-child { border-right: 0; }
@media (min-width: 720px) {
.fine-print-panel__stat { border-bottom: 0; }
}
@media (max-width: 719px) {
.fine-print-panel__stat:nth-child(2n) { border-right: 0; }
.fine-print-panel__stat:nth-last-child(-n+2) { border-bottom: 0; }
}
.fine-print-panel__stat-figure {
font-family: 'Anton', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
letter-spacing: 0.02em;
line-height: 1;
margin-bottom: 0.5rem;
background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 25%, #555555 50%, #1A1A1A 75%, #333333 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 14s linear infinite;
}
.fine-print-panel__stat-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #1A1A1A;
margin-bottom: 0.375rem;
}
.fine-print-panel__stat-context {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.75rem;
color: rgba(15, 15, 15, 0.45);
line-height: 1.35;
}
/* --- PANEL 02: RITUAL — step grid ----------------------- */
.fine-print-panel--ritual .fine-print-panel__subhead {
margin-left: auto;
margin-right: auto;
text-align: center;
max-width: 480px;
}
.fine-print-panel--ritual .fine-print-panel__headline {
text-align: center;
}
.fine-print-panel--ritual .fine-print-panel__kicker {
text-align: center;
}
.fine-print-panel__steps {
position: relative; z-index: 1;
list-style: none;
margin: 1.75rem 0 0;
padding: 0;
display: grid;
gap: 1.75rem;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.fine-print-panel__steps {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}
.fine-print-panel__step {
text-align: center;
padding: 1rem;
}
.fine-print-panel__step-num {
font-family: 'Anton', sans-serif;
font-size: clamp(3.5rem, 7vw, 5.5rem);
letter-spacing: 0.02em;
line-height: 1;
background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 25%, #555555 50%, #1A1A1A 75%, #333333 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
margin-bottom: 0.5rem;
}
.fine-print-panel__step-rule {
display: block;
width: 24px;
height: 1px;
background: #C9A96E;
margin: 12px auto;
}
.fine-print-panel__step-title {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #1A1A1A;
margin: 0 0 0.5rem;
}
.fine-print-panel__step-text {
font-family: 'Fraunces', serif;
font-size: 0.875rem;
line-height: 1.5;
color: rgba(15, 15, 15, 0.65);
margin: 0;
max-width: 24ch;
margin-left: auto;
margin-right: auto;
}
.fine-print-panel__step-text em { font-style: italic; }
/* --- PANEL 03 + 05 shared: headline centered ------------- */
.fine-print-panel--editions .fine-print-panel__kicker,
.fine-print-panel--editions .fine-print-panel__headline,
.fine-print-panel--membership .fine-print-panel__kicker,
.fine-print-panel--membership .fine-print-panel__headline {
text-align: center;
}
/* --- PANEL 03: EDITIONS — megastat + 3-col -------------- */
.fine-print-panel--editions .fine-print-panel__headline {
font-size: clamp(2.75rem, 5.5vw, 5rem);
}
.fine-print-panel__megastat {
position: relative; z-index: 1;
text-align: center;
margin: 2.25rem auto 2rem;
}
.fine-print-panel__megastat-num {
font-family: 'Anton', sans-serif;
/* Bumped ~15% (was clamp(5rem, 12vw, 9rem)) to keep dramatic presence on lighter surface */
font-size: clamp(5.75rem, 13.8vw, 10.5rem);
letter-spacing: 0.02em;
line-height: 0.9;
background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 25%, #555555 50%, #1A1A1A 75%, #333333 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
margin-bottom: 0.5rem;
}
.fine-print-panel__megastat-label {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C9A96E;
margin-bottom: 0.5rem;
}
.fine-print-panel__megastat-context {
font-family: 'Fraunces', serif;
font-size: 0.75rem;
color: rgba(15, 15, 15, 0.45);
font-style: italic;
}
/* --- Triple-column breakdown (shared with panel 05) ----- */
.fine-print-panel__triple {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin: 2rem 0 0;
}
@media (min-width: 720px) {
.fine-print-panel__triple {
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
.fine-print-panel__triple-col {
padding: 0 1.5rem;
border-right: 0.5px solid rgba(0, 0, 0, 0.1);
}
.fine-print-panel__triple-col:first-child { padding-left: 0; }
.fine-print-panel__triple-col:last-child { padding-right: 0; border-right: 0; }
}
.fine-print-panel__triple-head {
font-family: 'Anton', sans-serif;
font-size: clamp(1.5rem, 2.5vw, 2rem);
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1;
margin: 0 0 0.75rem;
background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 25%, #555555 50%, #1A1A1A 75%, #333333 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 14s linear infinite;
}
.fine-print-panel__triple-text {
font-family: 'Fraunces', serif;
font-size: 0.875rem;
line-height: 1.5;
color: rgba(15, 15, 15, 0.65);
margin: 0;
}
.fine-print-panel__triple-text em { font-style: italic; }
/* --- PANEL 04: LOGISTICS — two-col list ----------------- */
.fine-print-panel--logistics .fine-print-panel__kicker {
text-align: center;
}
.fine-print-panel--logistics .fine-print-panel__headline {
font-size: clamp(2.5rem, 5vw, 4.5rem);
text-align: center;
}
.fine-print-panel__twocol {
position: relative; z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin: 2rem 0 0;
}
@media (min-width: 720px) {
.fine-print-panel__twocol {
grid-template-columns: 1fr 1fr;
gap: 0;
}
.fine-print-panel__twocol-col {
padding: 0 2rem;
border-right: 0.5px solid rgba(0, 0, 0, 0.1);
}
.fine-print-panel__twocol-col:first-child { padding-left: 0; }
.fine-print-panel__twocol-col:last-child { padding-right: 0; border-right: 0; }
}
.fine-print-panel__twocol-head {
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #C9A96E;
margin: 0 0 1rem;
}
.fine-print-panel__list {
list-style: none;
margin: 0;
padding: 0;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem;
line-height: 1.7;
color: #1A1A1A;
}
.fine-print-panel__list li {
padding: 0.375rem 0;
}
.fine-print-panel__list li + li {
border-top: 0.5px solid rgba(0, 0, 0, 0.06);
}
.fine-print-panel__list a {
color: #C9A96E;
text-decoration: none;
border-bottom: 1px solid rgba(201, 169, 110, 0.4);
transition: border-color 300ms ease, color 300ms ease;
}
.fine-print-panel__list a:hover { color: #8E7236; border-bottom-color: #8E7236; }
/* --- PANEL 05: MEMBERSHIP — benefits + signup form ----- */
.fine-print-panel--membership .fine-print-panel__headline {
font-size: clamp(2.25rem, 5vw, 4rem);
}
.fine-print-panel__rule {
position: relative; z-index: 1;
border: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(232, 213, 176, 0.5) 50%, transparent 100%);
margin: 2.25rem auto;
max-width: 380px;
}
.fine-print-panel__cta {
position: relative; z-index: 1;
text-align: center;
max-width: 560px;
margin: 0 auto;
}
.fine-print-panel__cta-intro {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.938rem;
color: rgba(15, 15, 15, 0.65);
margin: 0 0 1rem;
}
.fine-print-panel__cta-foot {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.75rem;
color: rgba(15, 15, 15, 0.45);
margin: 1.25rem 0 0;
}
.fine-print-panel__form {
display: flex;
flex-direction: column;
gap: 0.625rem;
align-items: stretch;
margin: 0 auto;
max-width: 460px;
}
@media (min-width: 560px) {
.fine-print-panel__form {
flex-direction: row;
}
}
.fine-print-panel__form input[type="email"] {
flex: 1;
min-width: 0;
padding: 0 1.25rem;
min-height: 48px;
background-color: #FFFFFF;
background-image:
linear-gradient(#FFFFFF, #FFFFFF),
linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 25%, #555555 50%, #1A1A1A 75%, #333333 100%);
background-origin: border-box;
background-clip: padding-box, border-box;
border: 1px solid transparent;
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.875rem;
color: #1A1A1A;
outline: none;
transition: box-shadow 300ms ease;
}
.fine-print-panel__form input[type="email"]::placeholder {
color: rgba(15, 15, 15, 0.4);
}
.fine-print-panel__form input[type="email"]:focus {
box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.28);
}
.fine-print-panel__form button {
position: relative;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.625rem;
padding: 0.875rem 1.5rem;
min-height: 48px;
background: linear-gradient(180deg, #F8F8F8 0%, #FFFFFF 15%, #B0B0B0 35%, #6E6E6E 50%, #C8C8C8 65%, #FFFFFF 80%, #888 100%);
background-size: 100% 200%;
animation: chrome-btn-shimmer 10s linear infinite;
border: 1px solid rgba(15, 15, 15, 0.14);
border-radius: 999px;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #0F0F0F;
cursor: pointer;
transition: transform 300ms ease, box-shadow 300ms ease;
}
.fine-print-panel__form button::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%);
transform: translateX(-100%);
transition: transform 1500ms ease;
pointer-events: none;
}
.fine-print-panel__form button:hover {
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(15, 15, 15, 0.28);
}
.fine-print-panel__form button:hover::before { transform: translateX(100%); }
.fine-print-panel__error {
flex-basis: 100%;
margin: 0.5rem 0 0;
padding: 0.5rem 0.875rem;
border: 1px solid rgba(232, 196, 184, 0.5);
border-radius: 4px;
background: rgba(232, 196, 184, 0.22);
font-family: 'Space Grotesk', sans-serif;
font-size: 0.813rem;
color: #8A4A3E;
}
.fine-print-panel__success {
display: grid;
gap: 0.25rem;
padding: 1.25rem 1.5rem;
border-radius: 999px;
background: rgba(232, 213, 176, 0.18);
border: 1px solid rgba(201, 169, 110, 0.5);
text-align: center;
}
.fine-print-panel__success-text {
font-family: 'Anton', sans-serif;
font-size: clamp(1.5rem, 3vw, 2rem);
letter-spacing: 0.02em;
text-transform: uppercase;
background: linear-gradient(180deg, #2A2A2A 0%, #1A1A1A 25%, #555555 50%, #1A1A1A 75%, #333333 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 100% 200%;
animation: chrome-btn-shimmer 12s linear infinite;
}
.fine-print-panel__success-sub {
font-family: 'Fraunces', serif;
font-style: italic;
font-size: 0.875rem;
color: rgba(15, 15, 15, 0.65);
}
/* --- REVEAL ANIMATIONS — fires when ------ */
.cpdp-chap[open] .fine-print-panel {
animation: fine-print-reveal 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes fine-print-reveal {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.cpdp-chap[open] .fine-print-panel > * {
animation: fine-print-row-rise 380ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.cpdp-chap[open] .fine-print-panel > *:nth-child(1) { animation-delay: 0ms; }
.cpdp-chap[open] .fine-print-panel > *:nth-child(2) { animation-delay: 60ms; }
.cpdp-chap[open] .fine-print-panel > *:nth-child(3) { animation-delay: 120ms; }
.cpdp-chap[open] .fine-print-panel > *:nth-child(4) { animation-delay: 180ms; }
.cpdp-chap[open] .fine-print-panel > *:nth-child(5) { animation-delay: 240ms; }
.cpdp-chap[open] .fine-print-panel > *:nth-child(6) { animation-delay: 300ms; }
.cpdp-chap[open] .fine-print-panel > *:nth-child(7) { animation-delay: 360ms; }
@keyframes fine-print-row-rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* The blob shouldn't stagger — it's decorative */
.cpdp-chap[open] .fine-print-panel > .fine-print-panel__blob {
animation: fine-print-blob-drift 22s ease-in-out infinite;
}
/* Reduced motion ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.fine-print-panel,
.fine-print-panel__blob,
.fine-print-panel__headline,
.fine-print-panel__stat-figure,
.fine-print-panel__step-num,
.fine-print-panel__megastat-num,
.fine-print-panel__triple-head,
.fine-print-panel__form button,
.fine-print-panel__success-text {
animation: none;
}
.cpdp-chap[open] .fine-print-panel,
.cpdp-chap[open] .fine-print-panel > * {
animation: none;
}
.fine-print-panel__form button::before { transition: none; }
}
/* ===== Presentment currency ISO badge ===== */
.price-iso {
display: inline-block;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.62em;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(15,15,15,0.55);
vertical-align: 0.6em;
margin-left: 0.35em;
white-space: nowrap;
}
.price-iso--mute { color: rgba(15,15,15,0.35); }
.price-iso--cta {
color: inherit;
opacity: 0.65;
vertical-align: 0.4em;
}
.price-iso--sticky { color: rgba(245,245,245,0.55); }
/* ===== Localization selector (footer) ===== */
.locale-form {
display: inline-flex;
flex-wrap: wrap;
gap: 0.6rem;
align-items: center;
font-family: 'Space Grotesk', sans-serif;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: rgba(245,245,245,0.6);
}
.locale-form__field {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.locale-form__lbl {
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(245,245,245,0.45);
}
.locale-form__select {
appearance: none; -webkit-appearance: none;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
color: #F5F5F5;
border-radius: 10px;
padding: 0.5rem 2rem 0.5rem 0.85rem;
font: 500 0.82rem 'Space Grotesk', sans-serif;
letter-spacing: 0.04em;
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F5F5F5' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.8rem center;
transition: border-color 200ms ease, background-color 200ms ease;
}
.locale-form__select:hover { background-color: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.28); }
.locale-form__select:focus-visible { outline: 2px solid #C9A96E; outline-offset: 2px; }
@media (max-width: 600px) {
.locale-form { font-size: 0.74rem; gap: 0.4rem 0.8rem; }
}