/* ─── Age gate ─── */ .age-gate-page { min-height: 100vh; background: var(--color-cream); display: flex; align-items: center; justify-content: center; } .age-gate { width: 100%; padding: 48px 24px 40px; } .age-gate-inner { max-width: 420px; margin: 0 auto; min-height: calc(100vh - 88px); /* fills viewport so lone exit message can centre */ text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; } /* Logo */ .age-gate-logo-wrap { width: 100%; } .age-gate-logo { display: block; margin: 0 auto; max-width: 220px; width: 100%; height: auto; } /* Headline */ .age-gate-heading { font-family: var(--font-display); font-size: 36px; font-weight: 900; line-height: 1.05; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-ink); margin: 0; } /* Buttons */ .age-gate-buttons { display: flex; gap: 16px; justify-content: center; width: 100%; } .age-gate-buttons .btn-wrap { flex: 1; } .age-gate-buttons .btn { width: 100%; } /* "No" exit message */ .age-gate-exit { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--color-ink-light); visibility: hidden; margin: 0; } /* Disclaimer */ .age-gate-fine-print { font-family: var(--font-body); font-size: 11px; line-height: 1.65; color: var(--color-ink-light); max-width: 400px; margin: 0; } /* age gate buttons: always horizontal, taller for easy tapping */ .age-gate-buttons .btn { min-width: 120px; height: var(--btn-h-lg); font-size: 18px; padding: 0 40px; } @media (max-width: 400px) { .age-gate-heading { font-size: 26px; } .age-gate-buttons .btn { height: var(--btn-h-md); font-size: 16px; padding: 0 28px; } } /* ─── Slider CLS guard ─────────────────────────────────────────────────────── The track starts at translateX(0) then JS moves it to centre the active can. Keeping the slider invisible until is-ready is set prevents the jump. */ .can-slider { opacity: 0; } .can-slider.is-ready { opacity: 1; transition: opacity 400ms var(--ease-out); } /* ─── Hero entrance animation (only when arriving from age gate) ───────────── An inline script adds .is-entrance to before first paint when sessionStorage flag nyf_entrance is set by age-gate.js. */ @keyframes nyf-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* Nav is never animated — always instantly visible */ .is-entrance .nav { animation: none; opacity: 1; } .is-entrance .hero-headline { animation: nyf-fade-up 650ms var(--ease-out) backwards; } .is-entrance .star-nav { animation: nyf-fade-up 650ms 140ms var(--ease-out) backwards; } .is-entrance .can-info { animation: nyf-fade-up 650ms 240ms var(--ease-out) backwards; } /* Slider fades in at its already-positioned state — no positional jump */ .is-entrance .can-slider.is-ready { transition: none; animation: nyf-fade-up 750ms 340ms var(--ease-out) backwards; } /* ─── Hero ─── */ .section-hero { padding-top: calc(50px + env(safe-area-inset-top)); min-height: 100vh; /* fallback */ min-height: 100dvh; /* iOS Safari: uses the true visual viewport, not the full screen */ display: flex; flex-direction: column; align-items: center; /* overflow-x:hidden instead of clip — clip can interfere with position:fixed nav rendering on Safari, making the status-bar area appear transparent */ overflow-x: hidden; overflow-y: visible; } .hero-headline { text-align: center; padding: 40px 20px 20px; display: flex; flex-direction: column; align-items: center; gap: 0; /* spacing is per-element via margin so each gap can be tuned */ } .hero-title { font-family: var(--font-display); font-size: 52px; /* 65% of former 80px */ font-weight: 900; line-height: 0.95; letter-spacing: -0.02em; margin-bottom: 8px; /* tight gap before the divider line */ } /* Divider: 2px, full width of the title block, color follows active flavor */ .hero-divider { width: 100%; height: 2px; background: var(--flavor-color); margin-bottom: 22px; } /* Tagline: same font-family as buttons (--font-display-alt), size ~120% larger */ .hero-tagline { font-family: var(--font-display-alt); font-size: 22px; letter-spacing: 0.04em; color: var(--color-ink-light); margin-bottom: 28px; } /* ─── Can slider ─── */ .can-slider { position: relative; width: 100%; height: 580px; /* can is ~486px tall; extra gives breathing room top & bottom */ flex-shrink: 0; overflow: visible; padding-left: 1.5vw; cursor: grab; user-select: none; -webkit-user-select: none; /* Allow vertical scroll to pass through; horizontal drag goes to our JS */ touch-action: pan-y; } .can-slider.is-dragging { cursor: grabbing; } /* Track: JS moves this with translateX */ .can-track { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 44px; height: 100%; /* transition-duration overridden by JS */ transition-property: transform; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-duration: 0ms; will-change: transform; } /* Cards: JS sets scale + opacity */ .can-card { flex-shrink: 0; width: 310px; height: 486px; /* 310 × (390/249) to preserve can aspect ratio */ display: flex; align-items: center; justify-content: center; /* transition-duration overridden by JS */ transition-property: transform, opacity; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease; transition-duration: 0ms, 0ms; will-change: transform, opacity; } .can-card img { width: 310px; height: auto; /* preserve aspect ratio */ display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; } /* ─── Can info ─── */ /* .star-nav sits above .can-info as a sibling in the hero flex column */ .section-hero .star-nav { padding-top: 48px; /* gap from can bottom to dots */ padding-bottom: 16px; /* gap from dots to flavor name */ } .can-info { text-align: center; padding: 0 24px 48px; /* top spacing fully owned by .star-nav above */ display: flex; flex-direction: column; align-items: center; gap: 12px; opacity: 1; transform: translateY(0); transition: opacity 150ms ease, transform 150ms ease; } .can-info.is-fading { opacity: 0; transform: translateY(-8px); pointer-events: none; } .flavor-badge { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--flavor-color); } .flavor-name { font-family: var(--font-display-alt); font-size: 36px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; } .flavor-tagline { font-family: var(--font-body); font-size: 17px; color: var(--color-ink-light); } .flavor-divider { margin: 4px 0; } .can-info .btn-wrap { margin-top: 16px; } /* ─── Characters ─── */ .section-characters { padding: var(--space-xl) 0; text-align: center; overflow-x: clip; overflow-y: visible; } .section-heading { font-family: var(--font-display); font-size: 40px; font-weight: 700; text-align: center; margin-bottom: var(--space-lg); padding: 0 24px; } /* Character carousel: matches can-slider — overflow:visible so circles bleed to edges; section-characters (overflow-x:clip) is the outer boundary */ .character-carousel { position: relative; width: 100%; height: 280px; overflow: visible; touch-action: pan-y; /* horizontal drag → our JS; vertical → native scroll */ } /* Character track: gap matches JS GAP (44px); slot width is responsive (JS charCardW) */ .char-track { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 44px; height: 100%; transition-property: transform; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); transition-duration: 0ms; will-change: transform; } .character-info { margin-top: 32px; padding: 0 24px; } .character-name { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; } .character-quote { font-family: var(--font-body); font-style: italic; font-size: 17px; color: var(--color-ink-light); max-width: 400px; margin: 0 auto 12px; min-height: 3.5em; /* prevents layout jump between short and long quotes */ } .character-dot { font-size: 1rem; color: var(--flavor-color); } /* ─── Store locator ─── */ .section-stores { padding: var(--space-xl) 24px; max-width: 1200px; margin: 0 auto; text-align: center; } .section-subhead { font-family: var(--font-body); font-size: 18px; color: var(--color-ink-light); margin-bottom: var(--space-lg); } .store-search-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: var(--space-lg); } .store-input { height: 52px; padding: 0 16px; border: 2px solid var(--color-border); background: #fff; font-family: var(--font-display-alt); font-size: 14px; letter-spacing: 0.05em; width: 280px; outline: none; transition: border-color var(--dur-fast); } .store-input:focus { border-color: var(--flavor-color); } .store-input::placeholder { color: var(--color-border); } .map-placeholder { width: 100%; max-width: 970px; height: 480px; margin: 0 auto; background: repeating-linear-gradient(45deg, transparent, transparent 19px, var(--color-border) 19px, var(--color-border) 20px), repeating-linear-gradient(-45deg, transparent, transparent 19px, var(--color-border) 19px, var(--color-border) 20px); background-color: var(--color-cream); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--color-ink-light); } .map-placeholder span { font-family: var(--font-display-alt); font-size: 13px; letter-spacing: 0.13em; text-transform: uppercase; } /* ─── FAQ ─── */ .section-faq { padding: var(--space-xl) 24px; max-width: 1200px; margin: 0 auto; } .faq-list { max-width: 800px; margin: 0 auto; } /* Force the
to always render as a visible line break regardless of viewport */ .faq-heading { display: block; line-height: 1.15; } .faq-heading br { display: block; content: ''; } /* ─── Subscribe ─── */ .section-subscribe { background: var(--color-ink); padding: var(--space-xl) 24px; text-align: center; } .subscribe-inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } .subscribe-heading { font-family: var(--font-display); font-size: 40px; font-weight: 700; color: #fff; line-height: 1.1; } .subscribe-form { display: flex; gap: 12px; flex-wrap: nowrap; justify-content: center; width: 100%; max-width: 480px; } .subscribe-input { height: 52px; padding: 0 16px; border: 2px solid rgba(255,255,255,0.2); background: transparent; color: #fff; font-family: var(--font-display-alt); font-size: 14px; flex: 1; min-width: 220px; outline: none; transition: border-color var(--dur-fast); } .subscribe-input:focus { border-color: rgba(255,255,255,0.6); } .subscribe-input::placeholder { color: rgba(255,255,255,0.4); } .subscribe-fine-print { font-family: var(--font-body); font-size: 14px; color: rgba(245,240,232,0.6); } /* ─── Footer ─── */ .footer { background: var(--color-ink); padding: var(--space-lg) 24px; /* Extend footer background into iOS home-indicator safe area */ padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,0.08); } .footer-inner { max-width: 640px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .footer-logo img { filter: brightness(0) invert(1); } /* ── 21+ badge ── */ .footer-badge-21 { width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.35); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; } .footer-badge-21__over { font-family: var(--font-display-alt); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); line-height: 1; } .footer-badge-21__num { font-family: var(--font-display); font-size: 26px; font-weight: 900; line-height: 1.1; color: rgba(255,255,255,0.85); } .footer-legal { font-family: var(--font-body); font-size: 12px; color: rgba(245,240,232,0.5); line-height: 1.6; max-width: 480px; } .footer-license { font-family: var(--font-display-alt); font-size: 11px; letter-spacing: 0.1em; color: rgba(245,240,232,0.4); } .footer-links { list-style: none; display: flex; gap: 24px; } .footer-links a { font-family: var(--font-display-alt); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(245,240,232,0.5); transition: color var(--dur-fast); } .footer-links a:hover { color: rgba(245,240,232,0.9); } /* ─── Responsive ─── */ @media (max-width: 768px) { :root { --space-xl: 45px; } /* 45 top + 45 bottom = ~90px gap between sections */ .hero-title { font-size: 40px; } .flavor-name { font-size: 32px; } .section-heading { font-size: 28px; } /* 31 × 0.9 */ .subscribe-heading { font-size: 28px; } /* matches section-heading */ .age-gate-heading { font-size: 30px; } .nav-links { display: none; } .nav-hamburger { display: block; } .nav-inner { padding: 0 20px; } /* Remove optical shift — single large can on mobile is always centred */ .can-slider { padding-left: 0; } /* Character track: slot=200px + gap=20px → charStep=220px, so adjacent circles at scale(0.72) show ~40px on each side of a 390px screen. Both values must match JS charCardW / charGap in refreshLayout(). */ .char-track { gap: 4px; } .character-circle { width: 200px; height: 200px; } .character-carousel { height: 260px; } /* extra room for active circle overflow */ .character-img-wrap { width: 180px !important; height: 180px !important; } /* Active character 20% larger on mobile (180 × 1.2 = 216px) */ .character-circle.active .character-img-wrap { width: 216px !important; height: 216px !important; } .age-gate-buttons { flex-direction: row; } .subscribe-form { flex-direction: row; flex-wrap: nowrap; } .subscribe-input { min-width: 0; } /* ── Store locator mobile ── */ /* Remove section side padding so the locator panel spans full viewport width */ .section-stores { padding-left: 0; padding-right: 0; } /* Restore padding on text + search elements only */ .section-stores > .section-heading, .section-stores > .section-subhead { padding-left: 20px; padding-right: 20px; } .section-stores > .store-search-row { padding-left: 20px; padding-right: 20px; flex-wrap: nowrap; } /* Tighter gaps: subhead → input, input → map */ .section-stores > .section-subhead { margin-bottom: 14px; } .section-stores > .store-search-row { margin-bottom: 24px; } /* Input stretches to fill its wrapper; button stays inline */ .store-search-wrapper { flex: 1; min-width: 0; } .store-input { width: 100%; } } @media (max-width: 480px) { .hero-title { font-size: 32px; } .section-heading { font-size: 26px; } .subscribe-heading { font-size: 26px; } /* Prevent iOS auto-zoom on inputs (triggered when font-size < 16px) */ .store-input, .subscribe-input { font-size: 16px; } /* Smaller product description paragraph on narrow phones */ .flavor-tagline { font-size: 14px; } .btn-lg { height: var(--btn-h-md); font-size: 13px; padding: 0 24px; } .store-input { width: 100%; } .hero-headline { padding: 40px 20px 50px; } .hero-divider { margin-bottom: 14px; } .hero-tagline { font-size: 18px; margin-bottom: 18px; } /* Can slider: height drives the visible crop; image itself is scaled down */ .can-slider { height: 420px; } /* Smaller can image — stays centered in the 310px JS slot, no re-layout needed */ .can-card img { width: 260px; } /* Star nav: padding > can overflow (33px) + small breathing room */ .section-hero .star-nav { padding-top: 48px; padding-bottom: 12px; } /* Can info: tighter bottom + fixed height so all flavors stay the same block height */ .can-info { padding-bottom: 32px; gap: 8px; min-height: 340px; } /* Slightly smaller character circles on narrow phones */ .character-carousel { height: 220px; } .character-img-wrap { width: 160px !important; height: 160px !important; } .character-circle.active .character-img-wrap { width: 192px !important; height: 192px !important; } }