/* ================================================================= * VOODOO VODKA — PAGES * * Page-specific styles for templates. Imported last so it can * override component-layer defaults where a page demands it. * * Sections grow per-phase. This file is intentionally light at * Phase 2 — most page styling arrives with the templates that * use it (Phases 7-11). * ================================================================= */ /* ----------------------------------------------------------------- * 1. PAGE HERO — universal pattern for non-front-page templates * Used on /the-legend, /the-spirit, /the-ritual, /the-poppet, etc. * --------------------------------------------------------------- */ .vv-page-hero{ position: relative; padding: var(--vv-space-10) 0 var(--vv-space-8); text-align: center; overflow: hidden; } .vv-page-hero::before{ content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--vv-cathedral-tint) 0%, transparent 65%); pointer-events: none; z-index: 0; } .vv-page-hero__inner{ position: relative; z-index: 1; max-width: var(--vv-max-width-narrow); margin-inline: auto; padding-inline: var(--vv-space-5); } .vv-page-hero__title{ font-size: var(--vv-fs-display); color: var(--vv-gold); margin: var(--vv-space-3) 0 var(--vv-space-4); } .vv-page-hero__sub{ font-family: var(--vv-font-ritual); font-style: italic; font-size: var(--vv-fs-lead); color: var(--vv-bone-70); max-width: 56ch; margin-inline: auto; } body.vv-mode-parchment .vv-page-hero::before{ background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--vv-gold-tint-12) 0%, transparent 65%); } body.vv-mode-parchment .vv-page-hero__title{ color: var(--vv-cathedral-deep); } body.vv-mode-parchment .vv-page-hero__sub{ color: var(--vv-cathedral); } /* ----------------------------------------------------------------- * 2. FALLBACK / ARCHIVE — used by index.php * --------------------------------------------------------------- */ .vv-fallback{ min-height: 60vh; padding: var(--vv-space-9) 0; } .vv-fallback__inner{ max-width: var(--vv-max-width); margin-inline: auto; padding-inline: var(--vv-space-5); text-align: center; } .vv-fallback__title{ font-size: var(--vv-fs-h1); margin: var(--vv-space-3) 0 var(--vv-space-7); color: var(--vv-gold); } .vv-fallback__grid{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-6); margin-bottom: var(--vv-space-8); text-align: left; } @media (min-width: 768px){.vv-fallback__grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){.vv-fallback__grid{ grid-template-columns: repeat(3, 1fr); } } .vv-fallback__card{ background: var(--vv-midnight-2); border: 1px solid var(--vv-border); overflow: hidden; transition: border-color var(--vv-dur-base) var(--vv-ease-out-expo), transform var(--vv-dur-base) var(--vv-ease-out-expo); } .vv-fallback__card:hover{ border-color: var(--vv-gold); transform: translateY(-4px); } .vv-fallback__card-media{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background-image: none; } .vv-fallback__card-media img{ width: 100%; height: 100%; object-fit: cover; } .vv-fallback__card-body{ padding: var(--vv-space-5); } .vv-fallback__card-title{ font-family: var(--vv-font-display); font-size: var(--vv-fs-h4); letter-spacing: var(--vv-ls-headline); text-transform: uppercase; margin: var(--vv-space-2) 0 var(--vv-space-3); } .vv-fallback__card-title a{ color: var(--vv-gold); background-image: none; } .vv-fallback__card-title a:hover{ color: var(--vv-gold-bright); background-image: none; } .vv-fallback__card-excerpt{ color: var(--vv-bone-70); font-size: var(--vv-fs-small); line-height: var(--vv-lh-normal); margin-bottom: var(--vv-space-4); } .vv-fallback__pagination{ margin-top: var(--vv-space-7); text-align: center; } .vv-fallback__pagination .page-numbers{ display: inline-block; padding: var(--vv-space-2) var(--vv-space-4); margin: 0 var(--vv-space-1); font-family: var(--vv-font-display); color: var(--vv-bone-70); border: 1px solid transparent; background-image: none; font-size: var(--vv-fs-small); letter-spacing: var(--vv-ls-meta); transition: all var(--vv-dur-fast) var(--vv-ease-out-expo); } .vv-fallback__pagination .page-numbers:hover, .vv-fallback__pagination .page-numbers.current{ color: var(--vv-gold); border-color: var(--vv-gold); background-image: none; } /* ----------------------------------------------------------------- * 3. 404 PAGE * --------------------------------------------------------------- */ .vv-404{ min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--vv-space-9) var(--vv-space-5); } .vv-404__num{ font-family: var(--vv-font-display); font-size: clamp(6rem, 14vw, 12rem); color: var(--vv-gold); line-height: 1; letter-spacing: 0; margin-bottom: var(--vv-space-5); text-shadow: 0 0 32px var(--vv-gold-glow); } .vv-404__title{ font-size: var(--vv-fs-h2); margin-bottom: var(--vv-space-4); } .vv-404__sub{ font-family: var(--vv-font-ritual); font-style: italic; color: var(--vv-bone-70); max-width: 48ch; margin: 0 auto var(--vv-space-6); } /* ================================================================= * HOMEPAGE — front-page.php * Eight sections, narrative order. * ================================================================= */ /* ----------------------------------------------------------------- * 1. HERO — the living altar * Smoke column + emerging bottle sigil + parallax headline * --------------------------------------------------------------- */ .vv-hero{ position: relative; min-height: calc(100vh - var(--vv-nav-height)); display: flex; align-items: center; overflow: hidden; padding: var(--vv-space-9) 0; isolation: isolate; } @media (max-width: 1023px){.vv-hero{ min-height: calc(100vh - var(--vv-nav-height-mobile)); } } #vv-hero-smoke, #vv-embers{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } #vv-hero-smoke{ z-index: 2; opacity: 0.85; } #vv-embers{ z-index: 3; opacity: 0.7; } [data-vv-parallax-word]{ transform: translate3d(calc(var(--vv-word-drift, 0) * 16px), calc(var(--vv-word-drift, 0) * 8px), 0); } @keyframes vv-hero-float{ from { transform: translateY(3%) rotate(-0.4deg); } to { transform: translateY(calc(3% - 14px)) rotate(0.4deg); } } @keyframes vv-bottle-aura-breathe{ 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } } @keyframes vv-bottle-draw{ to { stroke-dashoffset: 0; } } @keyframes vv-bottle-ember-bloom{ 0% { opacity: 0; r: 1; } 60% { opacity: 1; r: 5; } 100% { opacity: 0.85; r: 3; } } @keyframes vv-hero-scrollcue{ 0%, 100% { transform: translate(-50%, 0); opacity: 0.4; } 50% { transform: translate(-50%, 8px); opacity: 0.9; } } @keyframes vv-scrollcue{ 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(8px); opacity: 0.9; } } /* ----------------------------------------------------------------- * 2. THE WHISPER — scroll-locked invocation * --------------------------------------------------------------- */ .vv-whisper{ position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse 70% 50% at 50% 50%, rgba(61, 26, 74, 0.4) 0%, transparent 70%), linear-gradient(180deg, #050108 0%, #0A030F 50%, #050108 100%); color: var(--vv-bone); padding: var(--vv-space-9) 0; overflow: hidden; isolation: isolate; } .vv-whisper::before{ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 80px; background: linear-gradient(to bottom, transparent, var(--vv-gold), transparent); opacity: 0.6; z-index: 1; } .vv-whisper::after{ content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; height: 80px; background: linear-gradient(to top, transparent, var(--vv-gold), transparent); opacity: 0.6; z-index: 1; } .vv-whisper .vv-eyebrow{ color: var(--vv-gold); margin-bottom: var(--vv-space-6); } .vv-whisper.is-revealed .vv-whisper__cta{ opacity: 1; transform: translateY(0); } /* ----------------------------------------------------------------- * 3. FOUR RITUALS * --------------------------------------------------------------- */ .vv-ritual-card{ text-decoration: none; background-image: none; display: flex; flex-direction: column; color: var(--vv-bone); } .vv-ritual-card:hover .vv-ritual-card__arrow{ opacity: 1; transform: translateX(0); color: var(--vv-gold-bright); } /* ----------------------------------------------------------------- * 4. BOTTLE LINEUP * --------------------------------------------------------------- */ .vv-section--lineup .vv-grid--4{ margin-top: var(--vv-space-7); } /* ----------------------------------------------------------------- * 5. THE POPPET * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 6. THE COVEN — see .vv-coven-oath at end of file for current styles * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 7. CLOSING * --------------------------------------------------------------- */ /* ================================================================= * THE LEGEND — page-the-legend.php * Scrollytelling. Four alternating chapters with parallax. * ================================================================= */ /* ----------------------------------------------------------------- * 1. LEGEND HERO — the opening * --------------------------------------------------------------- */ /* Force the hero inner container to center all its children */ /* ----------------------------------------------------------------- * 2. CHAPTER — the alternating storytelling block * --------------------------------------------------------------- */ /* Subtle separator above each chapter */ /* Even chapters get a cathedral-tinted background */ /* ----------------------------------------------------------------- * 3. CHAPTER MEDIA — the illustration with framed border * --------------------------------------------------------------- */ /* Stronger horizontal travel so the slide is clearly visible */ .vv-fade-from-left.vv-chapter__media{ transform: translate3d(-80px, 0, 0); } .vv-fade-from-right.vv-chapter__media{ transform: translate3d(80px, 0, 0); } .vv-fade-from-left.vv-chapter__media.is-visible, .vv-fade-from-right.vv-chapter__media.is-visible{ transform: translate3d(0, 0, 0); } /* ----------------------------------------------------------------- * 4. CHAPTER COPY — the prose side with gilded drop cap * --------------------------------------------------------------- */ .vv-chapter__copy .vv-eyebrow, .vv-chapter__copy .vv-rule{ position: relative; z-index: 1; } /* Gilded drop cap — first letter of the chapter body */ /* ----------------------------------------------------------------- * 5. CHAPTER PULL QUOTE — the ceremonial interruption * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 6. LEGEND CLOSING — the seal * --------------------------------------------------------------- */ /* ================================================================= * THE SPIRIT — page-the-spirit.php * Product hub. Hero, bottle lineup grid, distillation philosophy. * ================================================================= */ /* ----------------------------------------------------------------- * 1. SPIRIT HERO * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 2. BOTTLE LINEUP — full-width gallery (4 cards in a row on lg) * --------------------------------------------------------------- */ .vv-spirit-card{ display: flex; flex-direction: column; background: var(--vv-midnight); border: 1px solid var(--vv-gold-deep); text-decoration: none; background-image: none; color: var(--vv-bone); overflow: hidden; position: relative; transition: border-color var(--vv-dur-base) var(--vv-ease-out-expo), transform var(--vv-dur-base) var(--vv-ease-out-expo), box-shadow var(--vv-dur-base) var(--vv-ease-out-expo); } .vv-spirit-card::before{ content: ""; position: absolute; inset: 8px; border: 1px solid var(--vv-gold); pointer-events: none; transition: border-color var(--vv-dur-base) var(--vv-ease-out-expo); z-index: 1; opacity: 0.6; } .vv-spirit-card:hover{ border-color: var(--vv-gold-bright); transform: translateY(-6px); box-shadow: var(--vv-shadow-lg); } .vv-spirit-card:hover::before{ border-color: var(--vv-gold-bright); opacity: 1; box-shadow: inset 0 0 32px var(--vv-gold-tint-12); } .vv-spirit-card__media{ position: relative; aspect-ratio: 3 / 4; display: flex; align-items: flex-end; justify-content: center; background: linear-gradient(180deg, var(--vv-midnight-3) 0%, var(--vv-midnight) 100%); overflow: hidden; padding: var(--vv-space-6) var(--vv-space-5) 0; margin: 16px 16px 0; } .vv-spirit-card__img{ width: auto; max-width: 78%; height: 100%; max-height: none; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 16px 32px rgba(0,0,0,0.6)); transition: transform var(--vv-dur-slow) var(--vv-ease-out-expo); } .vv-spirit-card:hover .vv-spirit-card__img{ transform: translateY(-8px) scale(1.03); } .vv-spirit-card__body{ padding: var(--vv-space-5) var(--vv-space-5) var(--vv-space-6); text-align: center; flex: 1; display: flex; flex-direction: column; } .vv-spirit-card__name{ font-family: var(--vv-font-display); font-size: var(--vv-fs-h3); letter-spacing: var(--vv-ls-headline); text-transform: uppercase; color: var(--vv-gold); margin-bottom: var(--vv-space-2); line-height: 1.15; } .vv-spirit-card__tagline{ font-family: var(--vv-font-ritual); font-style: italic; color: var(--vv-bone-70); font-size: var(--vv-fs-small); margin-bottom: var(--vv-space-3); } .vv-spirit-card__meta{ display: flex; justify-content: center; gap: var(--vv-space-4); margin-top: auto; padding-top: var(--vv-space-4); font-family: var(--vv-font-body); font-size: var(--vv-fs-meta); letter-spacing: var(--vv-ls-meta); text-transform: uppercase; color: var(--vv-bone-50); } .vv-spirit-card__meta span + span::before{ content: "·"; margin-right: var(--vv-space-4); color: var(--vv-gold-deep); } .vv-spirit-card:hover .vv-spirit-card__link{ gap: var(--vv-space-3); color: var(--vv-gold-bright); } /* ----------------------------------------------------------------- * 3. DISTILLATION PHILOSOPHY — split layout * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 4. SPIRIT CLOSING * --------------------------------------------------------------- */ /* ================================================================= * SINGLE BOTTLE — single-vv_bottle.php * Hero with floating bottle, tasting notes, specs, story. * ================================================================= */ /* ----------------------------------------------------------------- * 1. BOTTLE HERO — floating bottle + editorial copy * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 2. TASTING NOTES — editorial three-column * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 3. SPECS — printed label-style data * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 4. STORY — the bottle's editorial prose * --------------------------------------------------------------- */ .vv-bottle-story .vv-prose{ color: var(--vv-bone-70); font-size: 1.0625rem; line-height: var(--vv-lh-relaxed); } .vv-bottle-story .vv-prose p{ margin-bottom: var(--vv-space-5); } .vv-bottle-story .vv-prose p:first-of-type::first-letter{ font-family: var(--vv-font-display); font-weight: var(--vv-fw-bold); font-size: clamp(3.25rem, 6vw, 4.5rem); line-height: 0.85; float: left; margin: 0.08em var(--vv-space-3) 0 0; color: var(--vv-brass); /* Rev4 — drop cap demoted from marigold to brass */ letter-spacing: 0; text-transform: uppercase; } .vv-bottle-story .vv-prose em{ color: var(--vv-gold-bright); font-family: var(--vv-font-ritual); font-style: italic; } /* ----------------------------------------------------------------- * 5. SUGGESTED COCKTAILS * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 6. BOTTLE CLOSING * --------------------------------------------------------------- */ /* ================================================================= * THE RITUAL — page-the-ritual.php * Recipe gallery. Filter bar + grid. * ================================================================= */ /* ----------------------------------------------------------------- * 1. RITUAL HERO * --------------------------------------------------------------- */ /* ----------------------------------------------------------------- * 2. FILTER BAR * --------------------------------------------------------------- */ .vv-ritual-filters{ position: sticky; top: var(--vv-nav-height); z-index: var(--vv-z-sticky); background: rgba(11, 5, 16, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--vv-border-gold); border-bottom: 1px solid var(--vv-border-gold); padding: var(--vv-space-4) 0; } @media (max-width: 1023px){.vv-ritual-filters{ top: var(--vv-nav-height-mobile); } } body.admin-bar .vv-ritual-filters{ top: calc(var(--vv-nav-height) + 32px); } @media (max-width: 1023px){body.admin-bar .vv-ritual-filters{ top: calc(var(--vv-nav-height-mobile) + 46px); } } /* Chip styling */ /* ----------------------------------------------------------------- * 3. RECIPE GRID * --------------------------------------------------------------- */ /* Ritual accent variants — left border color */ /* Empty filter state */ /* ----------------------------------------------------------------- * 4. RITUAL CLOSING * --------------------------------------------------------------- */ /* ================================================================= * SINGLE COCKTAIL — single-vv_cocktail.php * Hero, ingredients + method with ritual callout, related. * ================================================================= */ /* ----------------------------------------------------------------- * 1. COCKTAIL HERO * --------------------------------------------------------------- */ /* Rev4 — category atmosphere washes demoted. The full-saturation accent tints (jade/iris/magenta/cypress) are replaced by a single-source deep shadow falloff (no chroma); family identity now lives in hairlines only. */ .vv-cocktail-hero__intention .vv-eyebrow{ margin-bottom: 0; } /* ----------------------------------------------------------------- * 2. INGREDIENTS + METHOD body * --------------------------------------------------------------- */ /* Servings stepper */ /* Ingredient list */ /* Pairing card */ /* Method steps */ /* Ritual callout — the brand's signature moment */ /* ----------------------------------------------------------------- * 3. STORY + RELATED * --------------------------------------------------------------- */ .vv-cocktail-story .vv-prose{ color: var(--vv-bone-70); font-size: 1.0625rem; line-height: var(--vv-lh-relaxed); } /* ================================================================= * THE POPPET — page-the-poppet.php * ================================================================= */ .vv-fade-from-left.vv-poppet-section__media{ transform: translate3d(-80px, 0, 0); } .vv-fade-from-right.vv-poppet-section__media{ transform: translate3d(80px, 0, 0); } .vv-fade-from-left.vv-poppet-section__media.is-visible, .vv-fade-from-right.vv-poppet-section__media.is-visible{ transform: translate3d(0, 0, 0); } .vv-poppet-section__copy .vv-rule, .vv-poppet-section__copy .vv-eyebrow{ position: relative; z-index: 1; } /* ================================================================= * THE COVEN — page-the-coven.php * ================================================================= */ .vv-coven-hero .vv-eyebrow{ color: var(--vv-gold-deep); } /* Legacy .vv-coven-oath rules removed — see .vv-coven-oath at end of file for homepage version. The /the-coven page now uses .vv-coven-page-oath if styles are needed there. */ /* ================================================================= * FIND US — page-find-us.php * ================================================================= */ .vv-fade-from-left.vv-find-distillery__media{ transform: translate3d(-80px, 0, 0); } .vv-fade-from-left.vv-find-distillery__media.is-visible{ transform: translate3d(0, 0, 0); } .vv-find-contact{ padding: var(--vv-space-10) 0; } /* ================================================================= * WOOCOMMERCE — branded shop, product, cart, checkout * ================================================================= */ .vv-wc-wrap{ padding: var(--vv-space-8) 0 var(--vv-space-10); } .vv-wc-hero{ padding-bottom: var(--vv-space-7); } /* Shop loop — product grid */ .woocommerce ul.products{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-6); margin: 0; padding: 0; list-style: none; } @media (min-width: 640px){.woocommerce ul.products{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){.woocommerce ul.products{ grid-template-columns: repeat(3, 1fr); } } .woocommerce ul.products li.product{ background: var(--vv-midnight-2); border: 1px solid var(--vv-gold-deep); padding: var(--vv-space-5); text-align: center; transition: border-color var(--vv-dur-base) var(--vv-ease-out-expo), transform var(--vv-dur-base) var(--vv-ease-out-expo); width: auto !important; margin: 0 !important; float: none !important; } .woocommerce ul.products li.product:hover{ border-color: var(--vv-gold); transform: translateY(-4px); } .woocommerce ul.products li.product a img{ margin-bottom: var(--vv-space-4); transition: transform var(--vv-dur-slow) var(--vv-ease-out-expo); } .woocommerce ul.products li.product:hover a img{ transform: scale(1.03); } .woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family: var(--vv-font-display) !important; font-size: var(--vv-fs-h4) !important; color: var(--vv-gold) !important; letter-spacing: var(--vv-ls-headline); text-transform: uppercase; margin-bottom: var(--vv-space-2) !important; padding: 0 !important; } .woocommerce ul.products li.product .price{ font-family: var(--vv-font-display); font-size: var(--vv-fs-h4); color: var(--vv-bone); font-weight: var(--vv-fw-bold); } .woocommerce ul.products li.product .price del{ color: var(--vv-bone-50); opacity: 0.7; } .woocommerce ul.products li.product .price ins{ background: transparent; color: var(--vv-gold-bright); text-decoration: none; } /* Add to cart button on loop */ .woocommerce ul.products li.product .button, .woocommerce .button.add_to_cart_button{ display: inline-block; padding: 10px var(--vv-space-5); margin-top: var(--vv-space-4); font-family: var(--vv-font-body); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; background: var(--vv-gold); color: var(--vv-midnight); border: 1px solid var(--vv-gold); border-radius: 0; transition: all var(--vv-dur-fast) var(--vv-ease-out-expo); background-image: none; } .woocommerce ul.products li.product .button:hover{ background: var(--vv-gold-bright); border-color: var(--vv-gold-bright); color: var(--vv-midnight); background-image: none; } /* Single product */ .single-product div.product{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-7); } @media (min-width: 768px){.single-product div.product{ grid-template-columns: 1fr 1fr; gap: var(--vv-space-9); } } .single-product div.product .images{ margin: 0; } .single-product div.product .product_title{ font-family: var(--vv-font-display) !important; font-size: clamp(2rem, 3.5vw + 1rem, 3.5rem) !important; color: var(--vv-gold) !important; letter-spacing: var(--vv-ls-display); text-transform: uppercase; margin-bottom: var(--vv-space-4) !important; line-height: var(--vv-lh-display); } .single-product div.product .price{ font-family: var(--vv-font-display); font-size: var(--vv-fs-h2); color: var(--vv-bone); margin-bottom: var(--vv-space-5); } .single-product div.product .woocommerce-product-details__short-description{ font-family: var(--vv-font-ritual); font-style: italic; color: var(--vv-bone-70); font-size: var(--vv-fs-lead); margin-bottom: var(--vv-space-6); padding-bottom: var(--vv-space-5); border-bottom: 1px solid var(--vv-border-gold); } .single-product .cart .quantity{ margin-right: var(--vv-space-3); } .single-product .cart .qty{ background: var(--vv-midnight); border: 1px solid var(--vv-gold-deep); color: var(--vv-bone); padding: 10px; font-family: var(--vv-font-display); font-size: var(--vv-fs-h4); text-align: center; width: 70px; } .single-product .cart .single_add_to_cart_button{ padding: 14px var(--vv-space-7) !important; font-family: var(--vv-font-body) !important; font-size: var(--vv-fs-small) !important; font-weight: var(--vv-fw-semibold) !important; letter-spacing: var(--vv-ls-eyebrow) !important; text-transform: uppercase !important; background: var(--vv-gold) !important; color: var(--vv-midnight) !important; border: 1px solid var(--vv-gold) !important; border-radius: 0 !important; } .single-product .cart .single_add_to_cart_button:hover{ background: var(--vv-gold-bright) !important; border-color: var(--vv-gold-bright) !important; } .single-product .product_meta{ padding-top: var(--vv-space-5); margin-top: var(--vv-space-5); border-top: 1px solid var(--vv-border); font-family: var(--vv-font-body); font-size: var(--vv-fs-meta); color: var(--vv-bone-50); letter-spacing: var(--vv-ls-meta); } /* Tabs */ .woocommerce-tabs{ margin-top: var(--vv-space-8) !important; padding-top: var(--vv-space-7); border-top: 1px solid var(--vv-border); } .woocommerce-tabs ul.tabs{ display: flex; gap: var(--vv-space-4); border: 0 !important; padding: 0 !important; margin: 0 0 var(--vv-space-6) !important; } .woocommerce-tabs ul.tabs li{ background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; } .woocommerce-tabs ul.tabs li a{ padding: var(--vv-space-3) 0 !important; font-family: var(--vv-font-body) !important; font-size: var(--vv-fs-eyebrow) !important; font-weight: var(--vv-fw-semibold) !important; letter-spacing: var(--vv-ls-eyebrow) !important; text-transform: uppercase !important; color: var(--vv-bone-50) !important; border-bottom: 1px solid transparent !important; background-image: none !important; } .woocommerce-tabs ul.tabs li.active a, .woocommerce-tabs ul.tabs li a:hover{ color: var(--vv-gold) !important; border-bottom-color: var(--vv-gold) !important; background-image: none !important; } /* Cart */ .woocommerce-cart table.shop_table{ border: 1px solid var(--vv-gold-deep); background: var(--vv-midnight-2); color: var(--vv-bone); } .woocommerce-cart table.shop_table th{ background: var(--vv-midnight); color: var(--vv-gold); font-family: var(--vv-font-body); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; padding: var(--vv-space-4) !important; border-bottom: 1px solid var(--vv-gold-deep); } .woocommerce-cart table.shop_table td{ padding: var(--vv-space-4) !important; border-top: 1px solid var(--vv-border); color: var(--vv-bone); } .woocommerce-cart table.shop_table .product-name a{ color: var(--vv-gold) !important; font-family: var(--vv-font-display) !important; text-transform: uppercase; letter-spacing: var(--vv-ls-headline); } .cart-collaterals .cart_totals h2{ font-family: var(--vv-font-display) !important; color: var(--vv-gold) !important; letter-spacing: var(--vv-ls-display); text-transform: uppercase; } .woocommerce .checkout-button, .woocommerce-cart .wc-proceed-to-checkout a.checkout-button{ background: var(--vv-gold) !important; color: var(--vv-midnight) !important; font-family: var(--vv-font-body) !important; font-weight: var(--vv-fw-semibold) !important; letter-spacing: var(--vv-ls-eyebrow) !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 14px var(--vv-space-7) !important; } /* Checkout */ .woocommerce-checkout .col-set, .woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-shipping-fields, .woocommerce-checkout #order_review{ background: var(--vv-midnight-2); border: 1px solid var(--vv-gold-deep); padding: var(--vv-space-6); margin-bottom: var(--vv-space-5); } .woocommerce-checkout h3{ font-family: var(--vv-font-display); color: var(--vv-gold); letter-spacing: var(--vv-ls-display); text-transform: uppercase; margin-bottom: var(--vv-space-5); } .woocommerce-checkout label{ color: var(--vv-bone) !important; font-family: var(--vv-font-body); font-size: var(--vv-fs-small); } .woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout textarea{ background: var(--vv-midnight) !important; border: 1px solid var(--vv-gold-deep) !important; color: var(--vv-bone) !important; padding: 10px !important; font-family: var(--vv-font-body); border-radius: 0 !important; } .woocommerce-checkout #place_order{ background: var(--vv-gold) !important; color: var(--vv-midnight) !important; font-family: var(--vv-font-body) !important; font-size: var(--vv-fs-small) !important; font-weight: var(--vv-fw-semibold) !important; letter-spacing: var(--vv-ls-eyebrow) !important; text-transform: uppercase !important; border-radius: 0 !important; padding: 14px var(--vv-space-8) !important; border: 1px solid var(--vv-gold) !important; } .woocommerce-checkout #place_order:hover{ background: var(--vv-gold-bright) !important; border-color: var(--vv-gold-bright) !important; } /* Disclaimer + age gate */ .vv-wc-disclaimer{ background: var(--vv-cathedral-tint); border: 1px solid var(--vv-gold-deep); padding: var(--vv-space-4); margin-bottom: var(--vv-space-7); color: var(--vv-bone); font-family: var(--vv-font-body); font-size: var(--vv-fs-small); line-height: var(--vv-lh-normal); } .vv-wc-disclaimer strong{ color: var(--vv-gold-bright); } .vv-wc-disclaimer a{ color: var(--vv-gold); border-bottom: 1px dotted var(--vv-gold-deep); } .vv-wc-age-gate{ padding: var(--vv-space-4); background: var(--vv-cathedral-tint); border: 1px solid var(--vv-gold-deep); margin: var(--vv-space-4) 0; } .vv-wc-age-gate label{ display: flex !important; gap: var(--vv-space-3); align-items: flex-start; cursor: pointer; } .vv-wc-age-gate input[type="checkbox"]{ width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--vv-gold); } .vv-wc-age-gate span{ color: var(--vv-bone); font-family: var(--vv-font-body); font-size: var(--vv-fs-small); line-height: var(--vv-lh-normal); } /* Notices */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ background: var(--vv-midnight-2) !important; border-left: 4px solid var(--vv-gold) !important; color: var(--vv-bone) !important; padding: var(--vv-space-4) !important; } .woocommerce-message::before, .woocommerce-info::before{ color: var(--vv-gold) !important; } .woocommerce-error{ border-left-color: var(--vv-magenta) !important; } .woocommerce-error::before{ color: var(--vv-magenta) !important; } /* Ritual cards on homepage — shrink title to fit longest word without breaking */ .vv-ritual-card__name{ font-size: clamp(1.25rem, 1.8vw + 0.3rem, 1.75rem); letter-spacing: 0.03em; line-height: 1.15; word-break: keep-all; overflow-wrap: normal; hyphens: none; } .vv-ritual-card__name{ font-size: clamp(1.25rem, 1.8vw + 0.3rem, 1.75rem); letter-spacing: 0.03em; line-height: 1.15; word-break: keep-all; overflow-wrap: normal; hyphens: none; } /* ================================================================= * THE COVEN OATH — quiet ceremonial moment in brand language * Dark cathedral, gold accents, ritual gravity. No paper. * ================================================================= */ .vv-coven-oath, .vv-section--coven.vv-coven-oath{ position: relative; padding: var(--vv-space-10) 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(61, 26, 74, 0.5) 0%, transparent 70%), linear-gradient(180deg, var(--vv-midnight) 0%, #06010A 50%, var(--vv-midnight) 100%); background-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(61, 26, 74, 0.5) 0%, transparent 70%), linear-gradient(180deg, var(--vv-midnight) 0%, #06010A 50%, var(--vv-midnight) 100%); color: var(--vv-bone); overflow: hidden; isolation: isolate; text-align: center; } /* Top + bottom gold framing lines */ /* Sigil — the ceremonial circle at top */ @keyframes vv-coven-sigil-glow{ 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .vv-coven-oath .vv-eyebrow{ color: var(--vv-gold); } /* Headline — same pattern as other sections */ /* Form */ /* ============================================================ SHOP — pre-launch lineup teaser ============================================================ */ /* ============================================================ SHOP — pre-launch lineup teaser ============================================================ */ /* ============================================================ JOURNAL — single article ============================================================ */ .vv-article-hero__inner .vv-rule{ margin-inline: auto; } /* ============================================================ COVEN — feature the middle tier (Adept) ============================================================ */ /* "Most chosen" ribbon */ /* ============================================================ TAROT CARDS — guardian portrait fronts (Option A) ============================================================ */ /* Bottom scrim so name + tagline stay legible over the face */ /* Push the front-face content to the bottom so it sits in the scrim */ /* Symbol shrinks to a small gold accent at the top, over the portrait */ /* Roman numeral moves just under the symbol */ /* Name + tagline get a shadow so they hold over any portrait */ /* ============================================================ RITUAL FILTER — collapsed secondary (Option A) ============================================================ */ /* ================================================================= * OUR STORY · /our-story (Blueprint Ch. 08) * Bone long-scroll. Four chapters, Anton/Marigold drop caps, * Fraunces pull quotes, an Ink closing band. * ================================================================= */ /* Bone surface + quiet atmosphere. */ /* Solid Ink nav from the top — no dark hero to float over. */ body.vv-nav-solid .vv-nav{ background: rgba(21, 16, 14, 0.96); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: var(--vv-border-gold); } /* Rev5 — nav links read faint on the solid/Bone-page nav; lift to full Bone for stronger contrast (was bone-70). */ body.vv-nav-solid .vv-nav__link{ color: var(--vv-bone); } .vv-story{ position: relative; z-index: var(--vv-z-raised); } /* ---- Page header + attribution -------------------------------- */ .vv-story__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: clamp(2.75rem, 6vw + 0.5rem, 6rem); line-height: 1.0; padding-bottom: 0.12em; letter-spacing: var(--vv-ls-display); color: var(--vv-ink); max-width: 15ch; margin: 0 0 var(--vv-space-5); } /* ---- Chapters ------------------------------------------------- */ .vv-story__chapter{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-6); align-items: center; padding: clamp(2rem, 4vw, 4rem) var(--vv-space-5); scroll-margin-top: calc(var(--vv-nav-height) + var(--vv-space-5)); } @media (min-width: 900px){.vv-story__chapter{ grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); } } /* Illustration frame — large, dramatic, matted print. Taller 3:4 gives the portraits real presence; contain keeps each whole on its bone matte. */ .vv-story__figure{ position: relative; margin: 0; aspect-ratio: 3 / 4; border: 1px solid var(--vv-gold-tint-12); border-radius: var(--vv-radius-md); overflow: hidden; background: radial-gradient(ellipse 130% 95% at 28% 16%, color-mix(in srgb, var(--vv-bone) 94%, var(--vv-ink)) 0%, var(--vv-bone-2) 62%); padding: clamp(0.75rem, 2.2vw, 1.5rem); box-shadow: 0 34px 80px rgba(21,16,14,0.20); display: flex; align-items: center; justify-content: center; } /* Inner hairline frame — the illustrations read as mounted prints. */ .vv-story__figure::after{ content: ""; position: absolute; inset: clamp(0.45rem, 1.2vw, 0.8rem); border: 1px solid var(--vv-gold-tint-30); border-radius: 2px; pointer-events: none; } /* Standfirst under the title (left-set, editorial). */ /* Ghosted chapter numeral — a typographic anchor above each chapter. */ /* Alternate the image side down the page for editorial rhythm. */ @media (min-width: 900px){.vv-story__chapter--reverse .vv-story__figure{ order: 2; } } /* Full-bleed Florida feature band between chapters. */ /* Why Voodoo Vodka — a set-apart editorial band with the couture Catrina. */ /* Page footnote — the relocated fictional-character attribution. */ /* Opening — oversized title beside a large couture portrait. */ .vv-story__portrait{ margin: 0; max-width: none; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--vv-radius-md); box-shadow: 0 34px 80px rgba(21,16,14,0.30); } /* ---- Chapter prose -------------------------------------------- */ .vv-story__chapter-title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: clamp(2.5rem, 3.5vw + 0.5rem, 4.5rem); line-height: 1.0; padding-bottom: 0.1em; letter-spacing: var(--vv-ls-headline); color: var(--vv-ink); margin-bottom: var(--vv-space-5); } /* Four-line Abril Fatface drop cap in Marigold (Rev3). */ /* Fraunces-italic pull quotes. */ .vv-pullquote{ margin: var(--vv-space-6) 0; padding-top: var(--vv-space-5); border-top: 2px solid var(--vv-brass); } .vv-pullquote p{ font-family: var(--vv-font-fraunces); font-style: italic; font-size: var(--vv-fs-h3); line-height: var(--vv-lh-snug); color: var(--vv-plum); margin: 0; } /* ---- Closing — Ink band --------------------------------------- */ .vv-story__closing{ position: relative; z-index: var(--vv-z-raised); margin-top: 0; padding: clamp(4rem, 9vw, 7rem) var(--vv-space-5) var(--vv-space-10); /* Bone (the page) fades into the Ink band over the top 18% — no hard seam. */ background: radial-gradient(ellipse 60% 60% at 50% 100%, rgba(58,35,80,0.4) 0%, transparent 65%), linear-gradient(to bottom, var(--vv-bone) 0%, var(--vv-ink) 18%, var(--vv-ink) 100%); text-align: center; } .vv-story__closing .vv-btn{ display: inline-flex; } /* ================================================================= * OUR VODKA · /our-vodka (Blueprint Ch. 09) * Ink shelf-moment surface. One liquid, four caps on light panels, * a shared Nose/Palate/Finish block, a gated awards row. * ================================================================= */ .vv-vodka{ position: relative; z-index: var(--vv-z-raised); } /* ---- Section 1 — intro ---------------------------------------- */ /* Rev5 / Phase B — asymmetric intro (was centered) */ .vv-vodka__headline{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-display); line-height: var(--vv-lh-display); letter-spacing: var(--vv-ls-display); color: var(--vv-bone); margin-bottom: var(--vv-space-3); } /* ---- Section 2 — the four cards ------------------------------- */ .vv-vodka__family{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-5); padding: var(--vv-space-7) var(--vv-space-5) var(--vv-space-9); } @media (min-width: 600px){.vv-vodka__family{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px){.vv-vodka__family{ grid-template-columns: repeat(4, 1fr); gap: var(--vv-space-6); align-items: start; } /* Rev5 / Phase B — staggered SKU lineup (editorial rhythm) */ .vv-vodka__family .vv-bottle-card:nth-child(even){ margin-top: var(--vv-space-7); } } /* Each SKU on its own light (Bone) panel — the cap is the differentiator. */ .vv-bottle-card{ display: flex; flex-direction: column; background: var(--vv-bone); border-radius: var(--vv-radius-md); overflow: hidden; border: 0; /* Rev5 — product bone-panel keeps its surface, loses the border */ box-shadow: var(--vv-lift); /* Rev5 push — matte lift off the Ink ground */ transition: transform var(--vv-dur-base) var(--vv-ease-out-expo), box-shadow var(--vv-dur-base) var(--vv-ease-out-expo); } .vv-bottle-card:hover{ transform: translateY(-4px); box-shadow: var(--vv-shadow-lg); } /* ---- Section 3 — shared tasting notes ------------------------- */ .vv-tasting{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-6); max-width: var(--vv-max-width-narrow); margin: 0; /* Rev5 push — left-aligned with the header (was centered) */ text-align: left; } @media (min-width: 768px){.vv-tasting{ grid-template-columns: repeat(3, 1fr); gap: var(--vv-space-7); } } .vv-tasting__col h3{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; color: var(--vv-bone); padding-bottom: var(--vv-space-3); margin-bottom: var(--vv-space-3); border-bottom: 1px solid var(--vv-brass-tint-12); } .vv-tasting__col p{ font-family: var(--vv-font-body); font-size: var(--vv-fs-body); line-height: var(--vv-lh-relaxed); color: var(--vv-bone-70); } /* ================================================================= * PRODUCT DETAIL (PDP) · /our-vodka/{sku} (Blueprint Ch. 10) * Split hero, shared tasting notes, facts strip, suggested serves, * and a slide-up buy drawer with compliance notices. * ================================================================= */ .vv-pdp{ position: relative; z-index: var(--vv-z-raised); } /* ---- Section 1 — split hero ----------------------------------- */ .vv-pdp__media{ display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; color: var(--vv-bone); } .vv-pdp__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h1); line-height: var(--vv-lh-tight); letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); margin-bottom: var(--vv-space-4); } /* ---- Section 2 — tasting notes (reuses .vv-tasting) ----------- */ /* ---- Section 3 — facts strip ---------------------------------- */ .vv-pdp__facts{ padding: var(--vv-space-9) var(--vv-space-5); } /* ---- Section 4 — suggested serves ----------------------------- */ .vv-pdp__serves{ padding: var(--vv-space-9) var(--vv-space-5); background: var(--vv-ink-2); border-top: 1px solid var(--vv-border); } /* Rev5 push #6 */ .vv-serve-card{ display: flex; flex-direction: column; gap: var(--vv-space-2); padding: var(--vv-space-5); background: var(--vv-ink); border: 1px solid var(--vv-border-gold); border-radius: var(--vv-radius-md); transition: transform var(--vv-dur-base) var(--vv-ease-out-expo), border-color var(--vv-dur-base) var(--vv-ease-out-expo); } .vv-serve-card:hover{ transform: translateY(-3px); border-color: var(--vv-marigold); } /* ---- Section 5 — buy drawer ----------------------------------- */ html.vv-drawer-locked, html.vv-drawer-locked body{ overflow: hidden; } .vv-drawer{ position: fixed; inset: 0; z-index: var(--vv-z-toast); display: flex; align-items: flex-end; justify-content: center; } /* Bugfix — `.vv-drawer{display:flex} ` was overriding the [hidden] attribute, so the drawer container always covered the viewport: after Close set hidden=true the panel stayed and the page was blocked (X / Esc appeared to do nothing). Honor [hidden] so the drawer is fully removed until opened and after close. */ .vv-drawer[hidden]{ display: none; } /* Defense-in-depth: until fully open the container never intercepts clicks, so a half-closed/half-open state can never lock the page. is-open restores them. */ .vv-drawer:not(.is-open){ pointer-events: none; } .vv-drawer.is-open{ pointer-events: auto; } .vv-drawer__scrim{ position: absolute; inset: 0; background: rgba(21,16,14,0.6); opacity: 0; transition: opacity var(--vv-dur-base) var(--vv-ease-out-expo); } .vv-drawer.is-open .vv-drawer__scrim{ opacity: 1; } .vv-drawer__panel{ position: relative; width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; background: var(--vv-ink-2); border-top: 2px solid var(--vv-brass); border-radius: var(--vv-radius-md) var(--vv-radius-md) 0 0; padding: var(--vv-space-7) var(--vv-space-6) var(--vv-space-6); transform: translateY(100%); transition: transform var(--vv-dur-slow) var(--vv-ease-out-expo); } @media (min-width: 560px){.vv-drawer{ align-items: center; } .vv-drawer__panel{ border-radius: var(--vv-radius-md); border: 1px solid var(--vv-border-gold); border-top: 2px solid var(--vv-brass); } } .vv-drawer.is-open .vv-drawer__panel{ transform: translateY(0); } .vv-drawer__close{ position: absolute; top: var(--vv-space-4); right: var(--vv-space-4); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--vv-bone-70); border-radius: 50%; } .vv-drawer__close:hover{ color: var(--vv-marigold); } .vv-drawer__eyebrow{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; color: var(--vv-bone); margin-bottom: var(--vv-space-2); } .vv-drawer__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h3); letter-spacing: var(--vv-ls-snug); color: var(--vv-bone); margin-bottom: var(--vv-space-6); } .vv-drawer__group{ margin-bottom: var(--vv-space-5); } .vv-drawer__group-label{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-meta); letter-spacing: var(--vv-ls-meta); text-transform: uppercase; color: var(--vv-bone-50); margin-bottom: var(--vv-space-3); } .vv-drawer__btn{ display: flex; width: 100%; justify-content: center; margin-bottom: var(--vv-space-3); } .vv-drawer__cart-form{ margin: 0; } .vv-drawer__note{ font-family: var(--vv-font-fraunces); font-style: italic; font-size: var(--vv-fs-small); color: var(--vv-bone-70); margin-bottom: var(--vv-space-3); } .vv-drawer__compliance{ margin-top: var(--vv-space-5); padding-top: var(--vv-space-5); border-top: 1px solid var(--vv-border); } .vv-gov-warning, .vv-prop65, .vv-drawer__ship-note{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-meta); line-height: var(--vv-lh-normal); color: var(--vv-bone-50); margin-bottom: var(--vv-space-3); } .vv-gov-warning strong, .vv-prop65 strong{ color: var(--vv-bone-70); letter-spacing: 0.04em; } .vv-prop65 a{ color: var(--vv-bone-70); text-decoration: underline; } /* ================================================================= * COCKTAILS HUB · /cocktails (Blueprint Ch. 11) * The engagement engine: 16 classics, four families, family-as- * occasion filtering, marigold-flower difficulty. * ================================================================= */ .vv-cocktails{ position: relative; z-index: var(--vv-z-raised); } .vv-cocktails__headline{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-display); line-height: var(--vv-lh-display); letter-spacing: var(--vv-ls-display); color: var(--vv-bone); max-width: 18ch; margin: 0 auto var(--vv-space-4); } /* ---- Filter bar ----------------------------------------------- */ /* Rev4 — active chips no longer fill with a saturated accent. The ground stays neutral (raised Ink); the family accent survives only as the border hairline + bone text. Accent-as-single-object, never a wash. */ .vv-filter-reset{ color: var(--vv-bone-70); text-decoration: underline; text-underline-offset: 2px; font-size: inherit; } .vv-filter-reset:hover{ color: var(--vv-marigold); } /* ---- The grid ------------------------------------------------- */ .vv-cocktails__grid{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-5); padding-bottom: var(--vv-space-10); } @media (min-width: 560px){.vv-cocktails__grid{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px){.vv-cocktails__grid{ grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px){.vv-cocktails__grid{ grid-template-columns: repeat(4, 1fr); } } /* Rev5 — the grid is monochrome Ink. Family identity is one small cue per card: a hairline top rule in the family color + a Bone tag. No saturated fills. */ .vv-cocktail-card{ display: flex; flex-direction: column; background: var(--vv-ink-2); border: 0; border-top: 2px solid var(--vv-card-accent); border-radius: 0; overflow: hidden; transition: transform var(--vv-dur-base) var(--vv-ease-out-expo), box-shadow var(--vv-dur-base) var(--vv-ease-out-expo); } .vv-cocktail-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(21,16,14,0.5); } .vv-cocktail-card:hover .vv-cocktail-card__img{ transform: scale(1.03); } .vv-cocktail-card__media{ position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in srgb, var(--vv-card-accent) 7%, var(--vv-ink-2)); /* near-black family tint, no wash */ color: var(--vv-card-accent); /* Rev5 push — dissolve the hard bottom edge into the card's Ink ground so the dark photo sits IN the page, not as a cut-out rectangle ON it. */ -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, #000 82%, transparent 100%); } .vv-cocktail-card__img{ width: 100%; height: 100%; object-fit: cover; transition: transform var(--vv-dur-slow) var(--vv-ease-out-expo); } /* ---- Rev5 push — image depth pass ------------------------------------------ Grain rides OVER atmospheric imagery (::before, since spotlight owns ::after on some of these), so photos read as one continuous film with the ground instead of clean decals. Low opacity + overlay blend = a whisper. */ /* Positioning anchor for the grain ::before (phero__media is already absolute, so it is intentionally excluded here). */ .vv-story-card__media, .vv-stories__featured-media, .vv-home-feature__media, .vv-home-teaser__media, .vv-home-poppet__media, .vv-poppet__hero-media, .vv-poppet__making-media, .vv-pdp__media, .vv-shop__merch-media{ position: relative; } .vv-cocktail-card__media::before, .vv-story-card__media::before, .vv-stories__featured-media::before, .vv-phero__media::before, .vv-home-feature__media::before, .vv-home-teaser__media::before, .vv-home-poppet__media::before, .vv-poppet__hero-media::before, .vv-poppet__making-media::before, .vv-pdp__media::before, .vv-shop__merch-media::before{ content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--vv-grain); background-size: 160px 160px; opacity: 0.07; mix-blend-mode: overlay; } /* The featured story + dark story cards fade into the Ink ground too. */ .vv-story-card__media, .vv-stories__featured-media{ -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); } /* Rev5 / Phase D — designed empty-state: a quiet bone-hairline medallion around the mark reads as an intentional branded placeholder, not a missing image. Monochrome (no gold repetition); the field's single-source radial adds depth. */ .vv-cocktail-card__placeholder, .vv-story-card__placeholder, .vv-recipe__placeholder{ display: inline-flex; align-items: center; justify-content: center; width: 4.25rem; height: 4.25rem; border-radius: 50%; border: 1px solid var(--vv-bone-30); color: var(--vv-bone); opacity: 0.5; font-size: 1.4rem; line-height: 1; } .vv-cocktail-card__body{ display: flex; flex-direction: column; gap: var(--vv-space-2); padding: var(--vv-space-5); flex: 1; } .vv-cocktail-card__name{ font-family: var(--vv-font-ritual); font-style: italic; font-weight: 400; font-size: var(--vv-fs-h4); letter-spacing: var(--vv-ls-snug); color: var(--vv-bone); line-height: var(--vv-lh-tight); } .vv-cocktail-card__desc{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-small); color: var(--vv-bone-70); flex: 1; } .vv-cocktail-card__foot{ display: flex; align-items: center; justify-content: space-between; gap: var(--vv-space-3); margin-top: var(--vv-space-2); } .vv-cocktail-card__classic{ font-family: var(--vv-font-fraunces); font-style: italic; font-size: var(--vv-fs-meta); color: var(--vv-bone-50); } .vv-flower{ color: var(--vv-bone-30); font-size: 0.8rem; } .vv-flower.is-on{ color: var(--vv-bone); } .vv-cocktail-card__difficulty{ white-space: nowrap; letter-spacing: 2px; } .vv-cocktails__empty{ grid-column: 1 / -1; text-align: center; padding: var(--vv-space-8) 0; font-family: var(--vv-font-fraunces); font-style: italic; font-size: var(--vv-fs-lead); color: var(--vv-bone-70); } /* ================================================================= * RECIPE DETAIL · /cocktails/{recipe} (Blueprint Ch. 12) * ================================================================= */ .vv-recipe{ position: relative; z-index: var(--vv-z-raised); } /* .vv-recipe__placeholder — styled by the shared Phase D medallion rule above */ .vv-recipe__back{ display: inline-block; font-family: var(--vv-font-archivo); font-size: var(--vv-fs-meta); letter-spacing: var(--vv-ls-meta); text-transform: uppercase; color: var(--vv-bone-50); margin-bottom: var(--vv-space-5); } .vv-recipe__back:hover{ color: var(--vv-marigold); } .vv-recipe__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h1); line-height: var(--vv-lh-tight); letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); margin-bottom: var(--vv-space-4); } .vv-recipe__flowers .vv-flower{ font-size: 1rem; } .vv-recipe__build{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-7); padding-block: var(--vv-space-9); } @media (min-width: 768px){.vv-recipe__build{ grid-template-columns: 0.9fr 1.1fr; gap: var(--vv-space-9); align-items: start; } /* Rev5 push — sticky recipe rail: ingredients stay in view while the method scrolls, the way a real recipe page should read. */ } .vv-recipe__build h2{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h3); letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); } /* ---- Print: a clean Bone recipe card -------------------------- */ @media print{.vv-nav, .vv-mobile-menu, #vv-footer, #vv-ink, .vv-drawer, .vv-recipe__utilities, .vv-recipe__back, .vv-skip-link, #vv-age-gate{ display: none !important; } body, .vv-recipe__hero, .vv-recipe__hero-inner{ background: #fff !important; color: #15100E !important; } .vv-recipe__title, .vv-recipe__build h2, .vv-recipe__item, .vv-recipe__method li, .vv-recipe__lede, .vv-recipe__quickmeta, .vv-recipe__eyebrow, .vv-recipe__pairing{ color: #15100E !important; } #vv-main{ padding-top: 0 !important; } } /* ================================================================= * HOME · / (Blueprint Ch. 07) * Hero (the bottle carries the page) → Bone story teaser → four * families → bottle family → poppet → club (plum) → locator strip. * ================================================================= */ .vv-home{ position: relative; z-index: var(--vv-z-raised); } /* ---- §2 Hero -------------------------------------------------- */ .vv-home-hero{ background: radial-gradient(ellipse 55% 65% at 72% 45%, rgba(58,35,80,0.5) 0%, transparent 60%), var(--vv-ink); overflow: hidden; } .vv-home-hero__eyebrow{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; color: var(--vv-bone); margin-bottom: var(--vv-space-5); line-height: 1.7; max-width: 46ch; } .vv-home-hero__headline{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-hero); line-height: var(--vv-lh-display); letter-spacing: var(--vv-ls-hero); color: var(--vv-bone); margin-bottom: var(--vv-space-5); } .vv-home-hero__sub{ font-family: var(--vv-font-fraunces); font-style: italic; font-size: var(--vv-fs-lead); line-height: var(--vv-lh-snug); color: var(--vv-bone-70); max-width: 40ch; margin-bottom: var(--vv-space-6); } .vv-home-hero__cta{ display: flex; flex-wrap: wrap; gap: var(--vv-space-4); align-items: center; } .vv-home-hero__media{ position: relative; display: flex; align-items: center; justify-content: center; } .vv-home-hero__glow{ /* Rev4 — off-centre single-source pool (was an even centred circle); plum deepened, warm note demoted to faint brass. */ position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse 72% 82% at 38% 30%, rgba(58,35,80,0.50) 0%, rgba(176,141,87,0.08) 38%, transparent 68%); filter: blur(10px); transform: translateY(var(--vv-glow-y, 0)); /* Rev5/Phase A — scroll depth offset (hero.js) */ will-change: transform; } .vv-home-hero__bottle{ /* Rev4 — raking cast: light from upper-left throws the shadow down-right, deeper and warmer-black. Single-source, not flat drop. */ position: relative; max-height: 78svh; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(34px 42px 64px rgba(8,5,4,0.72)); } /* ---- §3 Story teaser — a Bone island that fades in and out of the Ink above and below, so the dark→light→dark seams read as a smooth transition, not a hard line. Content sits in the solid-Bone middle band. ------------------- */ .vv-home-teaser{ background: linear-gradient(to bottom, var(--vv-ink) 0%, var(--vv-bone) 13%, var(--vv-bone) 87%, var(--vv-ink) 100%); color: var(--vv-ink); text-align: center; padding: clamp(5rem, 11vw, 10rem) var(--vv-space-5); } /* ---- Shared section head -------------------------------------- */ /* Rev5 / Phase B — editorial asymmetry: section heads sit left with empty space to the right, played against the full-width grid/content below them. */ .vv-home-section-head{ text-align: left; max-width: 28rem; margin: 0 0 var(--vv-space-8); } /* Rev5 — wide enough that the eyebrow stays one line + longer titles don't over-stack */ .vv-home-section-head__eyebrow{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; color: var(--vv-bone); margin-bottom: var(--vv-space-3); } .vv-home-section-head__title{ font-family: var(--vv-font-anton); font-weight: 400; /* Rev5 / Phase C (retuned) — dramatic but not gigantic, so a 7-word title wraps to ~2-3 lines instead of stacking one word per line. */ font-size: clamp(2rem, 2.6vw + 0.6rem, 3.25rem); line-height: 1.08; padding-bottom: 0.08em; letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); } /* ---- §4 Four families ----------------------------------------- */ /* Faint single-source pools give the dark bands depth (so they don't read flat) and fade to transparent, so sections flow into one another without seams. */ /* Rev5 / Phase B — editorial offset: alternate columns drop, breaking the rigid even baseline into a staggered rhythm (margin, not transform, to avoid clashing with the hover lift + scroll reveal). */ @media (min-width: 768px){.vv-home-families__grid .vv-home-family:nth-child(even){ margin-top: var(--vv-space-7); } } /* Rev5 — Ink tiles; family color is a single hairline, not a gradient fill. */ .vv-home-family{ position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: var(--vv-space-2); justify-content: flex-end; aspect-ratio: 4 / 5; padding: var(--vv-space-5); border-radius: 0; background: color-mix(in srgb, var(--vv-card-accent) 7%, var(--vv-ink-2)); border: 0; border-left: 2px solid var(--vv-card-accent); transition: transform var(--vv-dur-base) var(--vv-ease-out-expo); } .vv-home-family:hover{ transform: translateY(-4px); } /* Family mood image fills the tile behind the label, with a single-source dark gradient for text legibility. The accent border-left stays as the family cue. */ /* Editorial numbered index (Phase C) — top corner numeral over the mood image */ .vv-home-family:hover .vv-home-family__img{ transform: scale(1.04); transition: transform var(--vv-dur-slow) var(--vv-ease-out-expo); } /* ---- §5 Bottle family ----------------------------------------- */ .vv-home-bottle{ display: flex; flex-direction: column; align-items: stretch; gap: var(--vv-space-2); padding: var(--vv-space-5); background: var(--vv-bone); border-radius: var(--vv-radius-md); border: 1px solid var(--vv-gold-tint-12); text-align: left; /* Rev5 push — left-asymmetric, matching the rest */ box-shadow: var(--vv-lift); /* Rev5 push — matte lift off the Ink ground */ transition: transform var(--vv-dur-base) var(--vv-ease-out-expo), box-shadow var(--vv-dur-base) var(--vv-ease-out-expo); } /* bottle photo stays optically centered; the label + name sit left under it */ .vv-home-bottle__media{ margin-bottom: var(--vv-space-2); } .vv-home-bottle:hover{ transform: translateY(-4px); box-shadow: var(--vv-shadow-lg); } .vv-home-bottle__media{ display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 4; width: 100%; } /* ---- §6 Poppet ------------------------------------------------ */ .vv-home-poppet{ background: radial-gradient(ellipse 64% 74% at 22% 16%, rgba(58,35,80,0.22) 0%, transparent 60%), var(--vv-ink-2); } .vv-home-poppet__inner{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-7); align-items: center; padding-block: var(--vv-space-9); } @media (min-width: 768px){.vv-home-poppet__inner{ grid-template-columns: 1fr 1fr; gap: var(--vv-space-9); } } /* Rev4 — match the poppet luxury-object framing: underlit, off-centre, raking. */ .vv-home-poppet__media{ aspect-ratio: 4 / 3; border-radius: var(--vv-radius-md); display: flex; align-items: flex-end; justify-content: flex-start; padding: var(--vv-space-6); background: radial-gradient(ellipse 58% 66% at 22% 16%, #5A5142 0%, #241E18 52%, #14100E 100%); color: var(--vv-bone); } /* Poppet photograph fills the lit media field when present (overrides the glyph padding). */ .vv-home-poppet__media:has(.vv-home-poppet__img){ padding: 0; overflow: hidden; } .vv-home-poppet__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h1); line-height: var(--vv-lh-tight); letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); margin-bottom: var(--vv-space-4); } /* ---- Club ----------------------------------------------------- */ /* Rev5 — drop the bright saturated plum band; plum stays as ceremony but as a deep near-Ink tone with a thin plum frame, not a full bright fill. */ .vv-home-club{ background: radial-gradient(ellipse 70% 90% at 50% 0%, color-mix(in srgb, var(--vv-plum) 55%, transparent) 0%, transparent 60%), color-mix(in srgb, var(--vv-plum) 22%, var(--vv-ink)); text-align: left; padding: var(--vv-space-10) var(--vv-space-5); /* Rev5 push #6 — left-asymmetric */ } .vv-home-club__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h1); letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); margin-bottom: var(--vv-space-4); } .vv-home-club__form .vv-field__input{ flex: 1; min-width: 220px; background: var(--vv-ink); border: 1px solid var(--vv-border-gold); color: var(--vv-bone); padding: var(--vv-space-3) var(--vv-space-4); border-radius: var(--vv-radius-md); font-family: var(--vv-font-archivo); } .vv-home-club__form .vv-field__input:focus-visible{ outline: 2px solid var(--vv-marigold); outline-offset: 2px; } /* ---- §8 Locator strip ----------------------------------------- */ .vv-home-locator{ background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(176,141,87,0.08) 0%, transparent 60%), var(--vv-ink); text-align: left; padding: var(--vv-space-9) var(--vv-space-5); } /* Rev5 push #6 */ .vv-home-locator__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h2); letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); margin-bottom: var(--vv-space-3); } /* ---- §3 Story teaser — two-up with the couture illustration --------- */ .vv-home-teaser__media{ margin: 0; aspect-ratio: 4 / 5; max-width: 22rem; justify-self: center; } /* ---- §5 lineup — the four-cap feature row above the cards ----------- */ /* ---- Feature — the object (couture-lit bottle) --------------------- */ .vv-home-feature{ padding-block: clamp(3rem, 7vw, 7rem); } .vv-home-feature__inner{ display: grid; grid-template-columns: 1fr; gap: var(--vv-space-7); align-items: center; } @media (min-width: 860px){.vv-home-feature__inner{ grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); } } .vv-home-feature__media{ margin: 0; justify-self: center; max-width: 28rem; } .vv-home-feature__img{ width: 100%; height: auto; display: block; border-radius: var(--vv-radius-md); } .vv-home-feature__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: clamp(2rem, 3vw + 0.5rem, 3.25rem); line-height: 1.04; padding-bottom: 0.08em; letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); margin: var(--vv-space-3) 0 var(--vv-space-4); } .vv-home-feature__body{ font-family: var(--vv-font-body); font-size: var(--vv-fs-lead); line-height: var(--vv-lh-relaxed); color: var(--vv-bone-70); max-width: 44ch; margin-bottom: var(--vv-space-6); } /* ---- Lifestyle — Florida-porch editorial two-up ------------------- */ /* Rev5 push — editorial spread: full section width (not the 1280 container), asymmetric columns, the second frame dropped + smaller for scale contrast and negative space. No 100vw breakout hack — the grid is a direct child of the full-width section, so no horizontal-scroll risk. */ /* ---- Full-bleed crystal divider ----------------------------------- */ /* ================================================================= * EDITORIAL PAGE HERO — full-bleed image, overlaid title, bottom scrim. * Shared by Our Vodka / Cocktails / Club / Careers for a fashion-house feel. * ================================================================= */ .vv-phero{ position: relative; isolation: isolate; overflow: hidden; min-height: clamp(360px, 62vh, 640px); display: flex; align-items: flex-end; background: var(--vv-ink); } .vv-phero__media{ position: absolute; inset: 0; margin: 0; z-index: -2; } .vv-phero__media img, .vv-phero__img{ width: 100%; height: 100%; object-fit: cover; display: block; } .vv-phero::after{ content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(14,10,8,0.94) 0%, rgba(14,10,8,0.55) 38%, rgba(14,10,8,0.12) 68%, rgba(14,10,8,0.40) 100%); } .vv-phero__overlay{ width: 100%; padding-block: clamp(2.5rem, 6vw, 5rem); } .vv-phero__eyebrow{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; color: var(--vv-bone); margin-bottom: var(--vv-space-3); } .vv-phero__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: clamp(2.5rem, 5vw + 0.5rem, 5.5rem); line-height: 1.0; padding-bottom: 0.08em; letter-spacing: var(--vv-ls-headline); color: var(--vv-bone); margin: 0 0 var(--vv-space-4); max-width: 18ch; } .vv-phero__sub{ font-family: var(--vv-font-fraunces); font-style: italic; font-size: clamp(1.2rem, 1vw + 1rem, 1.6rem); color: var(--vv-bone-70); max-width: 46ch; } /* ================================================================= * SHARED STATIC-PAGE SCAFFOLD (Phase 7 IA pages) * Ink by default; .vv-page--bone flips to the reading surface. * ================================================================= */ .vv-page{ position: relative; z-index: var(--vv-z-raised); } .vv-page--bone{ background: var(--vv-bone); color: var(--vv-ink); } .vv-page--bone.vv-page, body.vv-page--bone{ background: var(--vv-bone); } body.vv-page--bone::before{ opacity: 0.5; } /* Rev5 — break symmetry on the previously-even interior pages: the header sits left with empty space to the right, and more air above it. */ .vv-page__head{ text-align: left; padding: var(--vv-space-11) var(--vv-space-5) var(--vv-space-7); } .vv-page__eyebrow{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-eyebrow); font-weight: var(--vv-fw-semibold); letter-spacing: var(--vv-ls-eyebrow); text-transform: uppercase; color: var(--vv-bone); margin-bottom: var(--vv-space-3); } /* Rev5 / Phase C — editorial eyebrow: a short leading hairline before the (left-aligned) eyebrow label. Classic fashion-masthead detail. */ .vv-page__eyebrow::before, .vv-home-section-head__eyebrow::before, .vv-vodka__notes-eyebrow::before, .vv-vodka__eyebrow::before{ content: ""; display: inline-block; width: 2.25rem; height: 1px; background: currentColor; vertical-align: middle; margin: -0.15em 0.85rem 0 0; opacity: 0.55; } .vv-page__title{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-display); line-height: var(--vv-lh-display); letter-spacing: var(--vv-ls-display); color: var(--vv-bone); margin: 0 0 var(--vv-space-4); max-width: 20ch; /* Rev5 — left-aligned for asymmetry */ } .vv-page--bone .vv-page__title{ color: var(--vv-ink); } .vv-page--bone .vv-page__eyebrow{ color: var(--vv-plum); } /* Rev4 — eyebrow is small text; brass fails AA on Bone, plum ~12:1 */ .vv-page__sub{ font-family: var(--vv-font-fraunces); font-style: italic; font-size: var(--vv-fs-lead); color: var(--vv-bone-70); max-width: 42ch; margin: 0; } /* Rev5 — left-aligned (was centered) */ .vv-page--bone .vv-page__sub{ color: var(--vv-plum); } /* Rev4 — AA on Bone (~12:1); brass would fail */ /* Rev4 — Bone reading surface: functional links use dark plum (AA ~12:1). Neither brass nor marigold clears 4.5:1 on Bone, so warm notes stay decorative here and functional text takes the compliant dark pairing. */ /* Rev5 fix — scope to #vv-main so the dark nav + footer (outside main) keep their own light-on-dark styling; only the Bone content area gets dark links. */ body.vv-page--bone #vv-main a:not(.vv-btn){ color: var(--vv-plum); } body.vv-page--bone #vv-main a:not(.vv-btn):hover{ color: var(--vv-ink); } .vv-page__body{ padding-bottom: var(--vv-space-10); } /* ---- Legal ---------------------------------------------------- */ .vv-legal__section{ margin-top: var(--vv-space-8); } .vv-legal__section h2{ font-family: var(--vv-font-anton); font-weight: 400; font-size: var(--vv-fs-h3); letter-spacing: var(--vv-ls-headline); color: var(--vv-ink); margin-bottom: var(--vv-space-4); padding-bottom: var(--vv-space-3); border-bottom: 2px solid var(--vv-brass); } .vv-legal__section p{ font-family: var(--vv-font-archivo); font-size: var(--vv-fs-body); line-height: var(--vv-lh-relaxed); color: rgba(21,16,14,0.84); margin-bottom: var(--vv-space-4); } .vv-legal__section a{ color: var(--vv-plum); text-decoration: underline; text-underline-offset: 2px; } /* Rev4 — compliance links AA on Bone (~12:1) */ /* A11-fix: the Cookiebot renew control is a