/* ==========================================================================
BALLERS CHAMPAGNE — Design Tokens & Base
==========================================================================
FONTS: live via the Adobe Fonts kit (use.typekit.net/nnx1zha.css), linked
in the of index.html and store.html. That kit provides:
- acumin-pro (weights 400 / 700, normal + italic)
- avenir-next-lt-pro (weights 400 / 700, normal + italic)
- avenir-next-lt-pro-condensed (weights 400 / 700, normal + italic)
Oswald / Jost remain as the fallback stack (used only if the Adobe kit
fails to load) so the layout never depends on a single font source.
Playfair Display (Google Fonts) is used for the italic serif accents —
the Adobe kit has no serif face, so this stays independent of Acumin/Avenir.
The Google Fonts request itself is loaded via tags in
(index.html / store.html), not @import here — @import is render-blocking
because the browser has to fetch and parse this whole stylesheet before it
can even discover the nested request; a lets it start in parallel.
========================================================================== */
:root {
/* ---- Brand colors (client spec) ---- */
--c-black: #000000;
--c-black-1: #0a0a0a; /* section surface */
--c-black-2: #121212; /* card surface */
--c-black-3: #1d1d1d; /* hairline borders on dark */
--c-white: #ffffff;
--c-grey: #b7adb2;
--c-grey-dim: #7d757a; /* was #726a6f — bumped for WCAG AA (4.5:1 min) on black */
--c-gold: #ffce44;
--c-gold-dim: #c9a227;
--c-gold-glow: rgba(255, 206, 68, 0.18);
/* ---- Fonts (see note above) ---- */
--font-heading: "acumin-pro", "Oswald", sans-serif;
--font-body: "avenir-next-lt-pro", "Jost", sans-serif;
--font-serif: "Playfair Display", serif;
/* ---- Type scale ---- */
--fs-label: 0.75rem;
--fs-body: 1rem;
--fs-body-lg: 1.125rem;
--fs-h4: 1.5rem;
--fs-h3: 2rem;
--fs-h2: clamp(2.25rem, 4vw, 3.5rem);
--fs-h1: clamp(2.75rem, 7vw, 5.5rem);
--fs-hero: clamp(3.5rem, 10vw, 8rem);
/* ---- Spacing scale (marketing density: spacious) ---- */
--space-3xs: 4px;
--space-2xs: 8px;
--space-xs: 16px;
--space-sm: 24px;
--space-md: 40px;
--space-lg: 64px;
--space-xl: 96px;
--space-2xl: 140px;
/* ---- Motion ---- */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 180ms;
--dur-med: 320ms;
--dur-slow: 500ms;
--container-max: 1240px;
--z-cursor: 9999;
--z-agegate: 9000;
--z-nav: 500;
--z-cart: 800;
}
/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero-scroll { height: 100vh; }
.hero__clip { clip-path: inset(0 0 0 0) !important; }
.hero__video { transform: scale(1) !important; }
.eyebrow__rule { transform: scaleX(1) !important; }
.eyebrow__text { opacity: 1 !important; }
.pull-quote__bar { transform: scaleY(1) !important; }
.image-wipe { display: none !important; }
.mask-reveal__inner { transform: none !important; opacity: 1 !important; }
.shimmer-text { animation: none !important; background-position: 50% 0; }
.blend-bar__seg { width: attr(data-percent %); }
.section-divider__line { transform: scaleX(1) !important; }
.photo-section__bg { filter: grayscale(0) !important; }
}
body {
background: var(--c-black);
color: var(--c-white);
font-family: var(--font-body);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.7;
min-height: 100dvh;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; color: inherit; }
:focus-visible {
outline: 2px solid var(--c-gold);
outline-offset: 3px;
}
.skip-link {
position: absolute;
top: -100%;
left: var(--space-sm);
z-index: 9500;
background: var(--c-gold);
color: var(--c-black);
padding: 10px 18px;
font-family: var(--font-heading);
font-size: 0.8rem;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: top 200ms ease;
}
.skip-link:focus-visible {
top: var(--space-sm);
outline-offset: 0;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
line-height: 1.1;
}
.eyebrow {
font-family: var(--font-heading);
font-size: var(--fs-label);
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--c-gold);
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: var(--space-sm);
}
.eyebrow__rule {
display: inline-block;
width: 22px;
height: 1px;
background: var(--c-gold);
flex-shrink: 0;
transform: scaleX(0);
transform-origin: left;
}
.eyebrow__text { display: inline-block; opacity: 0; }
.no-js .eyebrow__rule { transform: scaleX(1); }
.no-js .eyebrow__text { opacity: 1; }
.section-divider {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-md) 0;
}
.section-divider__line {
display: block;
width: min(320px, 60%);
height: 1px;
background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
transform: scaleX(0);
}
.no-js .section-divider__line { transform: scaleX(1); }
.back-to-top {
position: fixed;
right: var(--space-sm);
bottom: var(--space-sm);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid var(--c-gold);
background: rgba(0,0,0,0.65);
backdrop-filter: blur(4px);
color: var(--c-gold);
display: flex;
align-items: center;
justify-content: center;
z-index: var(--z-nav);
transition: background 250ms ease, color 250ms ease, opacity 250ms ease, transform 250ms ease;
}
.back-to-top:hover { background: var(--c-gold); color: var(--c-black); }
.js-ready .back-to-top {
opacity: 0;
visibility: hidden;
transform: translateY(12px);
pointer-events: none;
}
.js-ready .back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.serif-accent {
font-family: var(--font-serif);
font-style: italic;
text-transform: none;
letter-spacing: 0;
font-weight: 500;
color: var(--c-gold);
}
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--space-sm);
}
@media (min-width: 768px) {
.container { padding-inline: var(--space-lg); }
}
.section {
position: relative;
padding-block: var(--space-2xl);
}
.section-tight { padding-block: var(--space-xl); }
.section-head {
max-width: 720px;
margin-bottom: var(--space-lg);
}
.section-head.center { margin-inline: auto; text-align: center; }
.lede {
font-size: var(--fs-body-lg);
color: var(--c-grey);
max-width: 640px;
}
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2xs);
font-family: var(--font-heading);
font-size: 0.8rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 1.05em 2.2em;
border: 1px solid var(--c-gold);
border-radius: 2px;
min-height: 44px;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
cursor: pointer;
white-space: nowrap;
}
.btn-gold {
background: var(--c-gold);
color: var(--c-black);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.btn-gold:hover { background: #fff3cf; box-shadow: 0 0 28px var(--c-gold-glow); transform: translateY(-2px); }
.btn-outline {
background: rgba(0, 0, 0, 0.35);
backdrop-filter: blur(6px);
color: var(--c-white);
border-color: rgba(255, 255, 255, 0.5);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.btn-outline:hover { background: rgba(0, 0, 0, 0.5); border-color: var(--c-gold); color: var(--c-gold); transform: translateY(-2px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
.btn-sm { padding: 0.8em 1.6em; font-size: 0.72rem; }
/* ---- Custom cursor ---- */
.cursor-dot,
.cursor-ring {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: var(--z-cursor);
border-radius: 50%;
transform: translate(-50%, -50%);
will-change: transform;
}
.cursor-dot {
width: 6px;
height: 6px;
background: var(--c-gold);
transition: opacity var(--dur-fast) ease;
}
.cursor-ring {
width: 38px;
height: 38px;
border: 1px solid var(--c-gold);
mix-blend-mode: difference;
transition: width var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out), opacity var(--dur-fast) ease, border-color var(--dur-med) ease;
}
.cursor-ring.is-hover {
width: 70px;
height: 70px;
background: var(--c-gold-glow);
}
.cursor-ring.is-down { width: 30px; height: 30px; }
body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-ring { opacity: 0; }
@media (hover: none), (pointer: coarse) {
.cursor-dot, .cursor-ring { display: none; }
}
/* ---- Ember glow (Name / Story / House / Bottle only) ---- */
.ember-glow {
position: fixed;
top: 0;
left: 0;
width: 320px;
height: 320px;
pointer-events: none;
z-index: 1;
opacity: 0;
mix-blend-mode: screen;
transition: opacity 0.6s ease;
will-change: transform, opacity;
}
.ember-glow.is-active { opacity: 1; }
.ember-glow__inner {
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 140, 66, 0.45) 0%, rgba(255, 90, 30, 0.18) 40%, rgba(255, 60, 20, 0) 72%);
filter: blur(10px);
animation: emberFlicker 4.5s ease-in-out infinite;
}
@keyframes emberFlicker {
0%, 100% { opacity: 0.6; transform: scale(1); }
30% { opacity: 0.42; transform: scale(0.94); }
55% { opacity: 0.7; transform: scale(1.06); }
80% { opacity: 0.5; transform: scale(0.97); }
}
@media (hover: none), (pointer: coarse) {
.ember-glow { display: none; }
}
/* ---- Age gate ---- */
.age-gate {
position: fixed;
inset: 0;
z-index: var(--z-agegate);
background: var(--c-black) url('../CoversBG-web.jpg') center/cover no-repeat;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-sm);
transition: opacity var(--dur-slow) var(--ease-out), visibility var(--dur-slow) var(--ease-out);
}
.age-gate::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
}
.age-gate.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.age-gate__panel {
position: relative;
z-index: 1;
text-align: center;
max-width: 420px;
}
.age-gate__logo {
width: min(220px, 60vw);
margin-inline: auto;
margin-bottom: var(--space-sm);
}
.age-gate__panel h2 {
font-size: var(--fs-h4);
margin-bottom: var(--space-xs);
}
.age-gate__panel p {
color: var(--c-grey);
margin-bottom: var(--space-sm);
font-size: 0.9rem;
letter-spacing: 0.02em;
}
.age-gate__actions {
display: flex;
gap: var(--space-sm);
justify-content: center;
flex-wrap: wrap;
}
.age-gate__fine {
margin-top: var(--space-sm);
font-size: 0.7rem;
color: var(--c-grey-dim);
letter-spacing: 0.05em;
}
.age-gate__fine a {
color: var(--c-gold);
text-decoration: underline;
text-underline-offset: 2px;
}
.age-gate__denied {
display: none;
margin-top: var(--space-md);
color: var(--c-gold);
font-size: 0.85rem;
}
.age-gate__denied.is-visible { display: block; }
/* ---- Nav ---- */
.site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--z-nav);
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-sm) var(--space-sm);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0) 100%);
transition: background var(--dur-med) var(--ease-out), padding var(--dur-med) var(--ease-out), border-color var(--dur-med) ease;
border-bottom: 1px solid transparent;
}
@media (min-width: 768px) {
.site-nav { padding: var(--space-sm) var(--space-lg); }
}
.site-nav.is-scrolled {
background: rgba(0,0,0,0.82);
backdrop-filter: blur(10px);
padding-block: var(--space-2xs);
border-color: var(--c-black-3);
}
.site-nav__logo { display: flex; align-items: center; gap: 10px; }
.site-nav__logo img {
height: 44px;
width: auto;
transition: height var(--dur-med) ease;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.4));
}
.site-nav.is-scrolled .site-nav__logo img { height: 36px; }
.site-nav__links {
display: none;
align-items: center;
gap: var(--space-md);
}
@media (min-width: 1024px) {
.site-nav__links { display: flex; }
}
.site-nav__links a {
font-family: var(--font-heading);
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--c-grey);
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
position: relative;
padding-block: var(--space-2xs);
transition: color var(--dur-fast) ease;
}
.site-nav__links a::after {
content: "";
position: absolute;
left: 0; right: 100%; bottom: 0;
height: 1px;
background: var(--c-gold);
transition: right var(--dur-med) var(--ease-out);
}
.site-nav__links a:hover,
.site-nav__links a.is-active { color: var(--c-white); }
.site-nav__links a:hover::after,
.site-nav__links a.is-active::after { right: 0; }
.site-nav__actions { display: flex; align-items: center; gap: var(--space-sm); }
.cart-toggle {
position: relative;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
border: 1px solid rgba(183,173,178,0.35);
border-radius: 50%;
transition: border-color var(--dur-fast) ease;
}
.cart-toggle:hover { border-color: var(--c-gold); }
.cart-toggle svg { width: 18px; height: 18px; stroke: var(--c-white); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
.cart-toggle__count {
position: absolute;
top: -6px;
right: -6px;
background: var(--c-gold);
color: var(--c-black);
font-size: 0.65rem;
font-weight: 700;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.nav-burger {
display: inline-flex;
flex-direction: column;
gap: 5px;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
}
.nav-burger span {
width: 22px;
height: 1.5px;
background: var(--c-white);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
@media (min-width: 1024px) { .nav-burger { display: none; } }
.mobile-menu {
position: fixed;
inset: 0;
z-index: 600;
background: rgba(0,0,0,0.98);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
transform: translateY(-100%);
transition: transform var(--dur-slow) var(--ease-in-out);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu a {
font-family: var(--font-heading);
font-size: 1.4rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--c-white);
}
.mobile-menu a:hover { color: var(--c-gold); }
.mobile-menu__close {
position: absolute;
top: var(--space-sm);
right: var(--space-sm);
width: 44px;
height: 44px;
}
/* ---- Hero (scroll-driven video reveal) ---- */
.hero-scroll {
position: relative;
height: 220vh; /* 100vh sticky viewport + 120vh of scroll to drive the reveal */
}
.hero {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
background: var(--c-black);
}
.hero__clip {
position: absolute;
inset: 0;
overflow: hidden;
clip-path: inset(25% 25% 25% 25%);
will-change: clip-path;
}
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.7);
will-change: transform;
}
.hero__tint {
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.36) 60%, rgba(0, 0, 0, 0.46) 100%);
}
.hero__content { position: relative; z-index: 2; padding-inline: var(--space-sm); }
.hero__crown {
width: min(340px, 72vw);
margin-inline: auto;
margin-bottom: var(--space-md);
opacity: 0;
filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55));
}
.hero__subtitle {
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1rem, 2.4vw, 1.4rem);
color: var(--c-grey);
text-transform: none;
letter-spacing: 0.02em;
margin-top: var(--space-sm);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}
.hero__cta {
margin-top: var(--space-lg);
display: flex;
gap: var(--space-sm);
justify-content: center;
flex-wrap: wrap;
}
.hero__scroll {
position: absolute;
bottom: var(--space-lg);
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2xs);
font-family: var(--font-heading);
font-size: 0.65rem;
letter-spacing: 0.3em;
color: var(--c-grey);
}
.hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(var(--c-gold), transparent);
animation: scrollLine 2s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
50.01% { transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
/* ---- Prose sections (Name / Story / House / Method) ---- */
.prose-section { background: var(--c-black); }
.prose-section.alt { background: var(--c-black-1); }
.prose-grid {
display: grid;
gap: var(--space-lg);
}
@media (min-width: 900px) {
.prose-grid.two-col { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
}
.prose-body p { margin-bottom: var(--space-sm); color: var(--c-grey); max-width: 60ch; }
.prose-body p:last-child { margin-bottom: 0; }
.prose-body strong { color: var(--c-white); font-weight: 700; }
.pull-quote {
position: relative;
padding-left: var(--space-md);
margin-block: var(--space-lg);
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
color: var(--c-white);
max-width: 46ch;
}
.pull-quote__bar {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--c-gold);
transform: scaleY(0);
transform-origin: top;
}
.no-js .pull-quote__bar { transform: scaleY(1); }
.definition-box {
margin-top: var(--space-lg);
padding: var(--space-md);
border: 1px solid var(--c-black-3);
background: var(--c-black-2);
}
.definition-box p {
font-family: var(--font-serif);
font-style: italic;
color: var(--c-grey);
margin: 0;
}
.definition-box .term { color: var(--c-gold); font-weight: 600; }
/* House illustration */
.house-visual {
background: url('../Page05House-web.png') center/cover no-repeat;
aspect-ratio: 4 / 3;
border: 1px solid var(--c-black-3);
position: relative;
overflow: hidden;
}
.house-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.5) 100%);
}
/* Curtain-wipe reveal used on House + Bottle imagery */
.image-wipe-wrap { position: relative; overflow: hidden; display: inline-block; }
.image-wipe {
position: absolute;
inset: 0;
background: var(--c-black);
transform-origin: right;
z-index: 3;
}
.image-wipe::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 2px;
background: var(--c-gold);
}
.no-js .image-wipe { display: none; }
.stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-md);
margin-top: var(--space-lg);
padding-top: var(--space-lg);
border-top: 1px solid var(--c-black-3);
}
.stat-row .stat-num {
font-family: var(--font-heading);
font-size: var(--fs-h3);
color: var(--c-gold);
display: block;
}
.stat-row .stat-label {
font-size: 0.72rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--c-grey);
}
/* Vineyard / Method full-bleed photo sections */
.photo-section {
position: relative;
min-height: 90vh;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.photo-section__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: grayscale(0);
will-change: filter;
}
.photo-section .photo-section__scrim {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.92) 100%), linear-gradient(90deg, rgba(0,0,0,0.55) 0%, transparent 55%);
}
.photo-section__inner {
position: relative;
z-index: 1;
padding: var(--space-lg) var(--space-sm) var(--space-2xl);
width: 100%;
}
@media (min-width: 768px) { .photo-section__inner { padding: var(--space-lg) var(--space-lg) var(--space-2xl); } }
.photo-section__tag {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.1rem, 2.6vw, 1.6rem);
color: var(--c-white);
margin-top: var(--space-md);
max-width: 34ch;
}
.photo-section--vineyard-1 .photo-section__bg { background-image: url('../Page08-web.jpg'); }
.photo-section--method .photo-section__bg { background-image: url('../Page07-web.jpg'); }
/* Below 900px these panels stack into normal flow at their own (shorter)
height instead of the desktop horizontal-scroll pin, and the crop that
results puts the white text right over the brightest part of the sky/
clouds in both photos. The scrim gradient alone isn't enough there, so
add a soft shadow behind the text itself — legible over any part of the
photo without darkening the image or changing its crop. */
@media (max-width: 899.98px) {
.photo-section .photo-section__scrim {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.58) 40%, rgba(0, 0, 0, 0.95) 100%);
}
.photo-section__inner .eyebrow,
.photo-section__inner h2,
.photo-section__inner .prose-body,
.photo-section__inner .photo-section__tag {
text-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 2px 8px rgba(0, 0, 0, 0.9), 0 4px 20px rgba(0, 0, 0, 0.75);
}
}
/* Vineyard + Method combined horizontal scroll — desktop only.
The clipping/flex layout only activates once JS successfully sets up the
GSAP pin (adds .is-pinned) — this way, if GSAP fails to load or the user
has reduced-motion, the wrapper never gets .is-pinned and both panels
simply fall back to normal stacked block flow, fully visible either way. */
.horizontal-wrapper { position: relative; }
@media (min-width: 900px) {
.horizontal-wrapper.is-pinned { height: 100vh; overflow: hidden; }
.horizontal-wrapper.is-pinned .horizontal-track { display: flex; height: 100%; width: 200%; }
.horizontal-wrapper.is-pinned .horizontal-track .photo-section {
width: 50%;
height: 100%;
min-height: 100%;
flex-shrink: 0;
/* Pinned to exactly 100vh, this content (eyebrow + heading + two
paragraphs) can be taller than shorter/laptop viewports. Bottom-
anchoring (the default, used when these sections are NOT pinned)
combined with the much larger bottom padding pushed the eyebrow
label up under the fixed header with no guaranteed clearance.
Centering distributes any overflow evenly top/bottom instead. */
align-items: center;
}
.horizontal-wrapper.is-pinned .horizontal-track .photo-section__inner {
padding-top: var(--space-md);
padding-bottom: var(--space-md);
}
/* This copy (a heading + two full paragraphs) was originally sized for
unconstrained normal document flow. Pinned to exactly 100vh, laptop-
height screens don't have room for the same type scale without pushing
the title itself out from under the fixed header — trim it down here
specifically, so the title stays fully visible without touching the
copy or its sizing anywhere else on the site. */
.horizontal-wrapper.is-pinned .horizontal-track .photo-section__inner .eyebrow {
margin-bottom: var(--space-2xs);
}
.horizontal-wrapper.is-pinned .horizontal-track .photo-section__inner h2 {
font-size: clamp(1.6rem, 2.6vw, 2.25rem);
margin-bottom: var(--space-2xs);
}
.horizontal-wrapper.is-pinned .horizontal-track .photo-section__inner .prose-body {
margin-top: var(--space-2xs) !important;
}
.horizontal-wrapper.is-pinned .horizontal-track .photo-section__inner .prose-body p {
font-size: 0.9rem;
line-height: 1.45;
margin-bottom: var(--space-2xs);
}
.horizontal-wrapper.is-pinned .horizontal-track .photo-section__tag {
margin-top: var(--space-2xs);
font-size: clamp(1rem, 2vw, 1.3rem);
}
}
/* Bottle blueprint */
.bottle-section { background: var(--c-black-1); }
.blueprint-visual {
display: flex;
justify-content: center;
}
.blueprint-visual img { max-width: 320px; }
.spec-list {
margin-top: var(--space-md);
display: grid;
gap: var(--space-2xs);
}
.spec-list li {
display: flex;
justify-content: space-between;
padding-block: var(--space-2xs);
border-bottom: 1px solid var(--c-black-3);
font-size: 0.85rem;
color: var(--c-grey);
}
.spec-list li span:last-child { color: var(--c-white); }
/* ---- Collections ---- */
.collection-hero {
position: relative;
min-height: 70vh;
display: flex;
align-items: center;
background-size: cover;
background-position: center;
}
.collection-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%);
}
.collection-hero--black { background-image: url('../BlackLabelHero.jpg'); }
.collection-hero--chrome { background-image: url('../ChromeBottleInRoom-web.jpg'); background-position: center 20%; }
.collection-hero--vintage { background-image: url('../BottleRocks4xSM-web.jpg'); }
.collection-hero__inner { position: relative; z-index: 1; max-width: 560px; padding: var(--space-2xl) var(--space-sm); }
@media (min-width: 768px) { .collection-hero__inner { padding: var(--space-2xl) var(--space-lg); } }
.collection-hero__title {
font-size: clamp(2.5rem, 6vw, 4.5rem);
}
.collection-hero__title small {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-body);
font-weight: 400;
font-size: 0.9rem;
letter-spacing: 0.4em;
color: var(--c-gold);
text-transform: uppercase;
margin-bottom: var(--space-xs);
}
.collection-hero__tag {
margin-top: var(--space-md);
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.1rem, 2vw, 1.3rem);
color: var(--c-grey);
}
/* ---- Mask-reveal (curtain-lift text), used on Collection titles + closing CTA ---- */
.mask-reveal { display: inline-block; overflow: hidden; vertical-align: top; }
.mask-reveal__inner { display: block; transform: translateY(45px); opacity: 0; }
.no-js .mask-reveal__inner { transform: none; opacity: 1; }
/* ---- Gold shimmer sweep, closing CTA only ---- */
.shimmer-text {
background: linear-gradient(100deg, var(--c-white) 40%, var(--c-gold) 50%, var(--c-white) 60%);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shimmerSweep 6s linear infinite;
}
.shimmer-text .serif-accent { color: inherit; }
.no-js .shimmer-text { animation: none; background-position: 50% 0; }
@keyframes shimmerSweep {
0% { background-position: 200% 0; }
100% { background-position: -50% 0; }
}
.collection-products { background: var(--c-black); padding-block: var(--space-2xl); }
.product-pair {
display: grid;
gap: var(--space-lg);
}
@media (min-width: 900px) {
.product-pair { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
}
.product-card {
display: grid;
grid-template-columns: minmax(120px, 190px) 1fr;
gap: var(--space-md);
align-items: start;
}
@media (max-width: 560px) {
.product-card { grid-template-columns: 100px 1fr; gap: var(--space-sm); }
}
.product-card__image {
position: relative;
aspect-ratio: 1 / 3.1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(ellipse at center 65%, rgba(255,206,68,0.09), transparent 70%);
}
.product-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 20px 30px rgba(0,0,0,0.6));
transition: transform var(--dur-slow) var(--ease-out);
}
.product-card:hover .product-card__image img { transform: translateY(-6px) scale(1.02); }
.product-card__name {
font-size: var(--fs-h4);
margin-bottom: var(--space-2xs);
}
.product-card__name em {
font-family: var(--font-serif);
font-style: italic;
text-transform: none;
color: var(--c-gold);
font-size: 0.75em;
display: block;
letter-spacing: 0.02em;
}
.product-card__design {
font-size: 0.85rem;
color: var(--c-grey);
margin-bottom: var(--space-sm);
max-width: 42ch;
}
.tasting-notes {
display: grid;
gap: var(--space-xs);
margin-bottom: var(--space-sm);
}
.tasting-notes h5 {
font-family: var(--font-heading);
font-size: 0.68rem;
letter-spacing: 0.24em;
color: var(--c-gold);
margin-bottom: 4px;
}
.tasting-notes p { font-size: 0.85rem; color: var(--c-grey); max-width: 46ch; }
.detail-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: var(--space-sm);
}
.detail-chips span {
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 10px;
border: 1px solid var(--c-black-3);
color: var(--c-grey);
border-radius: 2px;
}
.blend-bar {
display: flex;
height: 6px;
width: 100%;
max-width: 260px;
border-radius: 4px;
overflow: hidden;
margin-bottom: var(--space-2xs);
background: var(--c-black-3);
}
.blend-bar span { height: 100%; }
.blend-bar__seg { width: 0%; }
.no-js .blend-bar__seg { width: attr(data-percent %); } /* progressive enhancement; harmless no-op where unsupported */
.blend-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.7rem; color: var(--c-grey); margin-bottom: var(--space-sm); }
.blend-legend i { width: 8px; height: 8px; display: inline-block; border-radius: 50%; margin-right: 6px; }
.blend-legend__num { font-weight: 600; }
/* ---- Closing CTA ---- */
.closing-cta {
position: relative;
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: url('../LastPageBottleSM-web.jpg') center/cover no-repeat;
}
.closing-cta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.85) 100%);
}
.closing-cta__inner { position: relative; z-index: 1; padding: var(--space-lg); }
.closing-cta h2 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: var(--space-lg); }
/* ---- Footer ---- */
.site-footer {
background: var(--c-black-1) url('../BackCoverPage-web.jpg') center/cover no-repeat;
position: relative;
padding-block: var(--space-2xl) var(--space-lg);
}
.site-footer::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.72); }
.site-footer__inner { position: relative; z-index: 1; text-align: center; }
.site-footer__logo { width: min(260px, 65vw); margin-inline: auto; margin-bottom: var(--space-lg); }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); margin-bottom: var(--space-lg); }
.site-footer__links a { font-size: 0.85rem; color: var(--c-grey); transition: color var(--dur-fast) ease; }
.site-footer__links a:hover { color: var(--c-gold); }
.site-footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-lg); font-family: var(--font-heading); font-size: 0.68rem; letter-spacing: 0.2em; }
.site-footer__nav a { color: var(--c-grey); }
.site-footer__nav a:hover { color: var(--c-white); }
.site-footer__fine { font-size: 0.7rem; color: var(--c-grey-dim); }
.site-footer__legal { margin-top: var(--space-2xs); font-size: 0.7rem; color: var(--c-grey-dim); }
.site-footer__legal a { color: var(--c-grey-dim); text-decoration: underline; text-underline-offset: 2px; transition: color var(--dur-fast) ease; }
.site-footer__legal a:hover { color: var(--c-gold); }
.site-footer__legal span { margin: 0 8px; }
/* ---- Reveal animation base states (GSAP toggles these via classes/attrs) ---- */
.reveal { opacity: 0; transform: translateY(28px); }
.js-ready .reveal { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.no-js .reveal, .reduced-motion .reveal { opacity: 1; transform: none; }
/* ================================================================
STORE PAGE
================================================================ */
.store-hero {
position: relative;
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: url('../CoversBG-web.jpg') center/cover no-repeat;
}
.store-hero::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.6); }
.store-hero__inner { position: relative; z-index: 1; padding: var(--space-lg); }
.store-hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
.store-hero p { margin-top: var(--space-sm); color: var(--c-grey); max-width: 50ch; margin-inline: auto; }
.store-hero__shipping {
font-family: var(--font-heading);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--c-gold);
}
.shop-collection { padding-block: var(--space-xl); border-top: 1px solid var(--c-black-3); }
.shop-collection__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.shop-collection__head h2 { font-size: var(--fs-h2); }
.shop-collection__head p { color: var(--c-grey); max-width: 46ch; }
.shop-grid {
display: grid;
gap: var(--space-lg);
grid-template-columns: 1fr;
}
@media (min-width: 720px) { .shop-grid { grid-template-columns: 1fr 1fr; } }
.shop-card {
background: var(--c-black-2);
border: 1px solid var(--c-black-3);
padding: var(--space-md);
display: flex;
flex-direction: column;
transition: border-color var(--dur-med) ease, transform var(--dur-med) var(--ease-out);
}
.shop-card:hover { border-color: var(--c-gold-dim); transform: translateY(-4px); }
.shop-card__image {
aspect-ratio: 1/1.5;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--space-sm);
background: radial-gradient(ellipse at center 70%, rgba(255,206,68,0.1), transparent 70%);
}
.shop-card__image img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0,0,0,0.55)); }
.shop-card__name { font-size: 1.35rem; margin-bottom: 2px; }
.shop-card__name em { display: block; font-family: var(--font-serif); font-style: italic; text-transform: none; font-size: 0.7em; color: var(--c-gold); }
.shop-card__desc { font-size: 0.82rem; color: var(--c-grey); margin: var(--space-xs) 0 var(--space-sm); flex-grow: 1; }
.shop-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-sm); }
.shop-card__meta span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-grey); border: 1px solid var(--c-black-3); padding: 4px 8px; }
.shop-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--c-black-3); }
.shop-card__price { font-family: var(--font-heading); font-size: 1.25rem; color: var(--c-gold); }
.shop-card__price sup { font-size: 0.6rem; color: var(--c-grey); text-transform: uppercase; letter-spacing: 0.08em; display: block; font-family: var(--font-body); }
.qty-stepper { display: flex; align-items: center; border: 1px solid var(--c-black-3); }
.qty-stepper button { width: 34px; height: 34px; font-size: 1rem; }
.qty-stepper button:hover { color: var(--c-gold); }
.qty-stepper input { width: 32px; text-align: center; background: transparent; border: none; -moz-appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.add-to-cart { width: 100%; margin-top: var(--space-sm); }
.add-to-cart.is-added { background: var(--c-white); border-color: var(--c-white); }
/* ---- Cart drawer ---- */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.6);
z-index: var(--z-cart);
opacity: 0;
visibility: hidden;
transition: opacity var(--dur-med) ease, visibility var(--dur-med) ease;
}
.cart-overlay.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: min(420px, 100vw);
background: var(--c-black-1);
border-left: 1px solid var(--c-black-3);
z-index: calc(var(--z-cart) + 1);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform var(--dur-slow) var(--ease-in-out);
}
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--c-black-3); }
.cart-drawer__head h3 { font-size: 1rem; }
.cart-drawer__close { width: 36px; height: 36px; }
.cart-drawer__items { flex: 1; overflow-y: auto; padding: var(--space-sm) var(--space-md); display: flex; flex-direction: column; gap: var(--space-md); }
.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: var(--space-sm); align-items: center; }
.cart-item__image { width: 56px; height: 84px; display: flex; align-items: center; justify-content: center; background: rgba(255,206,68,0.06); }
.cart-item__image img { height: 100%; width: auto; }
.cart-item__name { font-size: 0.85rem; margin-bottom: 4px; }
.cart-item__collection { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-grey-dim); }
.cart-item__price { font-family: var(--font-heading); color: var(--c-gold); font-size: 0.9rem; margin-top: 6px; }
.cart-item__remove { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-grey); text-decoration: underline; margin-top: 6px; }
.cart-item__remove:hover { color: var(--c-gold); }
.cart-item__qty { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2xs); }
.cart-empty { text-align: center; padding: var(--space-2xl) var(--space-md); color: var(--c-grey); }
.cart-empty svg { width: 40px; height: 40px; margin-inline: auto; margin-bottom: var(--space-sm); opacity: 0.5; }
.cart-drawer__footer { padding: var(--space-md); border-top: 1px solid var(--c-black-3); }
.cart-drawer__row { display: flex; justify-content: space-between; margin-bottom: var(--space-2xs); font-size: 0.85rem; color: var(--c-grey); }
.cart-drawer__row.total { color: var(--c-white); font-size: 1.1rem; font-family: var(--font-heading); margin-block: var(--space-sm); }
.cart-drawer__shipping {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-sm);
padding: 10px 12px;
border: 1px solid var(--c-black-3);
background: var(--c-black-2);
}
.cart-drawer__shipping label {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--c-grey-dim);
}
.cart-drawer__shipping select {
border: none;
background: none;
color: var(--c-white);
font-size: 0.85rem;
text-align: right;
appearance: none;
opacity: 1;
}
.cart-drawer__note { font-size: 0.7rem; color: var(--c-grey-dim); margin-top: var(--space-sm); text-align: center; }
.cart-drawer__checkout { width: 100%; }
/* ---- Toast ---- */
.toast {
position: fixed;
bottom: var(--space-md);
left: 50%;
transform: translate(-50%, 20px);
background: var(--c-white);
color: var(--c-black);
padding: 14px 22px;
font-size: 0.8rem;
letter-spacing: 0.04em;
z-index: 1000;
opacity: 0;
pointer-events: none;
transition: opacity var(--dur-med) ease, transform var(--dur-med) ease;
display: flex;
align-items: center;
gap: 8px;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
/* ---- Mobile-optimized background images ----
These sections use full-bleed CSS background-image photos sized for
desktop (1500-2000px wide originals). On phones, swap in pre-resized
900px-wide versions (ResponsiveMobile/) — same crop/position, far less
data over the wire for the same visual result under the dark overlays. */
@media (max-width: 767.98px) {
.age-gate { background-image: url('../ResponsiveMobile/CoversBG-web-mobile.jpg'); }
.store-hero { background-image: url('../ResponsiveMobile/CoversBG-web-mobile.jpg'); }
.house-visual { background-image: url('../ResponsiveMobile/Page05House-web-mobile.png'); }
.photo-section--vineyard-1 .photo-section__bg { background-image: url('../ResponsiveMobile/Page08-web-mobile.jpg'); }
.photo-section--method .photo-section__bg { background-image: url('../ResponsiveMobile/Page07-web-mobile.jpg'); }
.collection-hero--black { background-image: url('../ResponsiveMobile/BlackLabelHero-mobile.jpg'); }
.collection-hero--chrome { background-image: url('../ResponsiveMobile/ChromeBottleInRoom-web-mobile.jpg'); }
.collection-hero--vintage { background-image: url('../ResponsiveMobile/BottleRocks4xSM-web-mobile.jpg'); }
.closing-cta { background-image: url('../ResponsiveMobile/LastPageBottleSM-web-mobile.jpg'); }
.site-footer { background-image: url('../ResponsiveMobile/BackCoverPage-web-mobile.jpg'); }
}
/* ---- Legal pages (Terms of Service, etc.) ---- */
.legal-content { max-width: 720px; margin-inline: auto; }
.legal-content h2 {
font-size: 1.3rem;
text-transform: none;
letter-spacing: 0;
color: var(--c-gold);
margin-top: var(--space-xl);
margin-bottom: var(--space-xs);
}
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 {
font-size: 1.05rem;
text-transform: none;
letter-spacing: 0;
margin-top: var(--space-lg);
margin-bottom: var(--space-2xs);
}
.legal-content p { margin-bottom: var(--space-sm); color: var(--c-grey); }
.legal-content strong { color: var(--c-white); font-weight: 700; }
.legal-content a { color: var(--c-gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-content ul { margin: var(--space-2xs) 0 var(--space-sm); }
.legal-content ul li {
position: relative;
padding-left: 20px;
margin-bottom: var(--space-2xs);
color: var(--c-grey);
}
.legal-content ul li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 8px;
height: 1px;
background: var(--c-gold);
}
.legal-updated { color: var(--c-grey-dim); font-size: 0.85rem; }