/* =============================================================
   assets/css/product.css
   Shared styles for all product detail pages:
     NVBlend.php, NVGBlend_Burgundy.php,
     NVGBlend_Merlot.php, NVGBlend_PinotGris.php

   Each page adds a small inline <style> override for its own
   background image (NVB_Venn.png or NVGB_Venn.png).
   ============================================================= */

/* PRESERVED ALL PRODUCT-SPECIFIC STYLES */
/* Only removed legacy header/nav styles - all hero/content styles remain intact */
/* Full style block preserved from original except header-related selectors */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--deep-teal: #0f2027;
--brown: #543c29;
--warm-pale: #f5f1e6;
--accent-red: #e74833;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 1rem;
--s-4: 2rem;
--s-5: 4rem;
--f--1: 0.875rem;
--f-0: 1rem;
--f-1: 1.125rem;
--f-2: 1.5rem;
--f-3: 2rem;
--f-4: 2.5rem;
--f-5: 3rem;
}
body {
font-family: 'Space Mono', monospace;
line-height: 1.6;
color: #333;
background: var(--warm-pale);
overflow-x: hidden;
/* Added top padding to prevent content hiding under fixed header */
padding-top: 80px; /* Matches header height + buffer */
}
/* Epic hero section with WebGL shader background */
.epic-hero {
position: relative;
min-height: 90vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background: linear-gradient(rgba(15, 32, 39, 0.95), rgba(28, 56, 67, 0.92)),
url('img/NVB_Venn.png') center/cover;
color: var(--warm-pale);
text-align: center;
padding: var(--s-5) var(--s-3) var(--s-4);
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
/* WebGL Canvas - positioned behind everything */
#heroShader {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
display: none;
}
/* Overlay to maintain readability with shader background */
.epic-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 32, 39, 0.3);
z-index: 1;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
width: 100%;
padding: var(--s-4);
/* Removed margin-top (handled by body padding) */
margin-left: auto;
margin-right: auto;
}
.beer-title {
font-family: 'Oswald', sans-serif;
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--s-2);
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
line-height: 1;
}
.beer-subtitle {
font-family: 'Oxanium', sans-serif;
font-size: clamp(1.2rem, 3vw, 1.8rem);
font-weight: 300;
margin-bottom: var(--s-3);
opacity: 0.95;
letter-spacing: 0.05em;
}
.hero-description {
font-family: 'Space Mono', monospace;
font-size: clamp(1rem, 2vw, 1.2rem);
max-width: 600px;
margin: 0 auto var(--s-4);
line-height: 1.6;
opacity: 0.9;
}
/* Bottle showcase */
.bottle-showcase {
position: relative;
width: 100%;
max-width: min(300px, 70vw);
margin: var(--s-4) auto;
transform-style: preserve-3d;
animation: float 6s ease-in-out infinite;
}
.bottle-image {
width: 100%;
height: auto;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
transform: perspective(1000px) rotateY(-5deg);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.bottle-image:hover {
transform: perspective(1000px) rotateY(5deg) scale(1.02);
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotateY(-5deg); }
50% { transform: translateY(-20px) rotateY(-5deg); }
}
/* Product badge */
.product-badge {
display: inline-block;
background: linear-gradient(135deg, var(--deep-teal), var(--brown));
color: var(--warm-pale);
padding: var(--s-1) var(--s-2);
border-radius: 20px;
font-family: 'Oxanium', sans-serif;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.05em;
margin-bottom: var(--s-2);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Epic content sections */
.epic-section {
padding: var(--s-5) var(--s-3);
position: relative;
}
.epic-section.light {
background: var(--warm-pale);
color: var(--deep-teal);
}
.epic-section.dark {
background: var(--deep-teal);
color: var(--warm-pale);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--s-3);
}
.section-header {
text-align: center;
margin-bottom: var(--s-4);
}
.section-header h2 {
font-family: 'Oswald', sans-serif;
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 600;
margin-bottom: var(--s-2);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.section-intro {
font-family: 'Space Mono', monospace;
font-size: clamp(1rem, 2vw, 1.2rem);
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
opacity: 0.9;
}
/* Stat grid */
.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--s-3);
margin: var(--s-4) 0;
}
.stat-card {
background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
border: 1px solid rgba(255,255,255,0.15);
border-radius: 16px;
padding: var(--s-3);
backdrop-filter: blur(10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
}
.stat-card:hover {
transform: translateY(-8px);
border-color: var(--warm-pale);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}
.stat-value {
font-family: 'Oswald', sans-serif;
font-size: clamp(2rem, 5vw, 2.8rem);
font-weight: 700;
color: var(--warm-pale);
display: block;
margin-bottom: var(--s-1);
line-height: 1;
}
.stat-label {
font-family: 'Oxanium', sans-serif;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 0.9;
}
/* Process showcase */
.process-showcase {
position: relative;
max-width: 1000px;
margin: var(--s-4) auto;
}
.process-step {
display: flex;
align-items: center;
gap: var(--s-4);
margin-bottom: var(--s-4);
padding: var(--s-3);
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
border-left: 4px solid var(--warm-pale);
transition: all 0.3s ease;
}
.process-step:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(8px);
}
.process-number {
font-family: 'Oswald', sans-serif;
font-size: clamp(2.5rem, 6vw, 3.5rem);
font-weight: 800;
color: var(--warm-pale);
opacity: 0.3;
min-width: 80px;
flex-shrink: 0;
}
.process-content h3 {
font-family: 'Oswald', sans-serif;
font-size: 1.5rem;
color: var(--warm-pale);
margin-bottom: var(--s-1);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.process-content p {
font-family: 'Space Mono', monospace;
font-size: 1rem;
line-height: 1.6;
opacity: 0.9;
}
/* Blend visualization */
.blend-visual {
display: flex;
height: 300px;
margin: var(--s-4) 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
position: relative;
}
.blend-segment {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: var(--s-3);
position: relative;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.blend-segment:hover {
flex: 1.3;
z-index: 2;
}
.segment-1 {
background: linear-gradient(135deg, #e6d3a3 0%, #d4b483 100%);
color: var(--deep-teal);
}
.segment-2 {
background: linear-gradient(135deg, #b8a37e 0%, #9c8968 100%);
color: white;
}
.segment-3 {
background: linear-gradient(135deg, #7a6852 0%, #5c4d3c 100%);
color: white;
}
.segment-percentage {
font-family: 'Oswald', sans-serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
margin-bottom: var(--s-1);
text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.segment-label {
font-family: 'Oxanium', sans-serif;
font-size: 0.95rem;
text-align: center;
line-height: 1.4;
opacity: 0.95;
}
.segment-label strong {
display: block;
font-size: 1.1rem;
margin-bottom: var(--s-1);
}
/* TASTING GRID - FIXED DISPLAY */
.tasting-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--s-3);
margin: var(--s-4) 0;
width: 100%;
}
.tasting-card {
background: var(--warm-pale);
border-radius: 16px;
padding: var(--s-3);
box-shadow: 0 8px 40px rgba(15, 32, 39, 0.15);
position: relative;
overflow: hidden;
border-left: 4px solid var(--deep-teal);
transition: all 0.3s ease;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.tasting-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(15, 32, 39, 0.2);
}
.tasting-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--deep-teal), var(--brown));
}
.tasting-title {
font-family: 'Oswald', sans-serif;
font-size: 1.4rem;
color: var(--deep-teal);
margin-bottom: var(--s-2);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.tasting-card p {
font-family: 'Space Mono', monospace;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: var(--s-1);
color: #333;
}
.tasting-card strong {
color: var(--deep-teal);
font-weight: 600;
}
/* Serving & Pairing */
.serving-pairing {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--s-4);
margin-top: var(--s-4);
}
.serving-pairing h3 {
font-family: 'Oswald', sans-serif;
font-size: 1.6rem;
margin-bottom: var(--s-2);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.serving-pairing p {
font-family: 'Space Mono', monospace;
font-size: 1rem;
line-height: 1.8;
margin-bottom: var(--s-2);
}
/* CTA Section - FIXED COLORS */
.cta-section {
text-align: center;
padding: var(--s-4);
background: linear-gradient(135deg, rgba(84, 60, 41, 0.9) 0%, rgba(15, 32, 39, 0.9) 100%);
border-radius: 20px;
margin-top: var(--s-4);
color: var(--warm-pale) !important;
border: 2px solid rgba(245, 241, 230, 0.2);
}
.cta-section h2 {
color: var(--warm-pale) !important;
margin-bottom: var(--s-2);
}
.cta-section p {
color: rgba(245, 241, 230, 0.9) !important;
margin-bottom: var(--s-2);
}
.cta-button {
display: inline-block;
background: var(--warm-pale);
color: var(--deep-teal) !important;
padding: var(--s-2) var(--s-4);
border-radius: 50px;
font-family: 'Oswald', sans-serif;
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
text-decoration: none;
margin-top: var(--s-2);
transition: all 0.3s ease;
border: 2px solid var(--warm-pale);
}
.cta-button:hover {
background: transparent;
color: var(--warm-pale) !important;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.out-of-stock {
color: #ff6b6b !important;
font-weight: 600;
}
.cta-note {
margin-top: var(--s-2);
font-size: 0.9rem;
opacity: 0.8;
}
/* Enhanced Floating Cart Toolbar - FIXED Z-INDEX */
.floating-cart-toolbar {
position: fixed;
top: 300px; /* Desktop position - in line with H1 on desktop */
right: 0;
z-index: 9999; /* ABOVE header (z-index: 1000 in styles.css) */
display: flex;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateX(100%);
}
.floating-cart-toolbar.expanded {
transform: translateX(0);
}
.floating-cart-toolbar.collapsed {
transform: translateX(100%);
}
.toolbar-toggle {
position: absolute;
left: -50px;
top: 0;
width: 50px;
height: 60px;
background: linear-gradient(135deg, var(--deep-teal), var(--brown));
border: 2px solid var(--warm-pale);
border-right: none;
border-radius: 12px 0 0 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--warm-pale);
font-size: var(--f-2);
transition: all 0.3s ease;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
}
.toolbar-toggle:hover {
background: var(--accent-red);
}
.toolbar-toggle .cart-icon {
position: relative;
}
.toolbar-toggle .cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--accent-red);
color: var(--warm-pale);
font-size: 12px;
font-weight: bold;
width: 18px;
height: 18px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.floating-cart-content {
background: linear-gradient(135deg, var(--deep-teal), var(--brown));
border: 2px solid var(--warm-pale);
border-left: none;
border-radius: 0 0 0 12px;
padding: var(--s-2);
width: 220px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.cart-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--s-2);
padding-bottom: var(--s-1);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.cart-title {
font-family: 'Oswald', sans-serif;
font-size: var(--f-1);
font-weight: 600;
color: var(--warm-pale);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.close-toolbar {
background: none;
border: none;
color: var(--warm-pale);
font-size: var(--f-2);
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s ease;
padding: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.close-toolbar:hover {
opacity: 1;
}
.floating-price {
font-family: 'Oswald', sans-serif;
font-size: var(--f-2);
font-weight: 700;
color: var(--warm-pale);
text-align: center;
padding: var(--s-1);
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-bottom: var(--s-2);
}
.floating-add-btn {
background: var(--accent-red);
color: var(--warm-pale);
border: none;
padding: var(--s-1) var(--s-2);
border-radius: 8px;
font-family: 'Oswald', sans-serif;
font-size: var(--f-0);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: var(--s--1);
width: 100%;
margin-bottom: var(--s-1);
}
.floating-add-btn:hover {
background: var(--warm-pale);
color: var(--deep-teal);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.floating-btn-text {
flex: 1;
text-align: center;
}
.floating-btn-icon {
font-size: var(--f-1);
}
.floating-quantity {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-1);
background: rgba(255, 255, 255, 0.1);
padding: var(--s-1);
border-radius: 8px;
margin-bottom: var(--s-2);
}
.floating-qty-btn {
background: var(--warm-pale);
color: var(--deep-teal);
border: none;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: var(--f-0);
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.3s ease;
}
.floating-qty-btn:hover {
background: var(--accent-red);
color: var(--warm-pale);
}
#floatingQuantity {
width: 40px;
text-align: center;
background: transparent;
border: none;
color: var(--warm-pale);
font-family: 'Oswald', sans-serif;
font-size: var(--f-0);
font-weight: 600;
}
.floating-cart-message {
font-size: var(--f--1);
text-align: center;
min-height: 18px;
color: #27ae60;
opacity: 0;
transition: opacity 0.3s ease;
margin-bottom: var(--s-1);
}
.view-cart-btn {
background: var(--warm-pale);
color: var(--deep-teal);
border: none;
padding: var(--s-1) var(--s-2);
border-radius: 8px;
font-family: 'Oswald', sans-serif;
font-size: var(--f-0);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
cursor: pointer;
transition: all 0.3s ease;
display: none;
align-items: center;
justify-content: center;
gap: var(--s--1);
width: 100%;
text-decoration: none;
margin-top: var(--s-1);
}
.view-cart-btn:hover {
background: var(--accent-red);
color: var(--warm-pale);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.view-cart-btn.visible {
display: flex;
}
/* Add to Cart Section Styles */
.add-to-cart-section {
margin-top: var(--s-2);
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.quantity-selector {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s-1);
margin-bottom: var(--s-2);
}
.qty-btn {
background: var(--deep-teal);
color: var(--warm-pale);
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: var(--f-1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.qty-btn:hover {
background: var(--brown);
transform: scale(1.1);
}
#mainQuantity {
width: 60px;
text-align: center;
border: 1px solid var(--deep-teal);
border-radius: 4px;
padding: var(--s--1);
font-size: var(--f-0);
font-weight: bold;
background: var(--warm-pale);
color: var(--deep-teal);
}
.main-add-btn {
background: var(--accent-red);
color: var(--warm-pale);
border: none;
padding: var(--s-2) var(--s-4);
border-radius: 50px;
font-family: 'Oswald', sans-serif;
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
margin-top: var(--s-1);
}
.main-add-btn:hover {
background: var(--warm-pale);
color: var(--deep-teal);
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.cart-badge {
display: inline-block;
background: var(--accent-red);
color: var(--warm-pale);
font-size: 0.8rem;
min-width: 20px;
height: 20px;
border-radius: 10px;
text-align: center;
line-height: 20px;
margin-left: var(--s--1);
font-weight: 600;
}
/* Mobile styles for floating toolbar - ALIGNED WITH H1 BEER TITLE */
@media (max-width: 768px) {
body {
padding-top: 70px; /* Adjusted for mobile header height */
}
.floating-cart-toolbar {
top: auto;
bottom: auto;
top: calc(50% - 60px);
transform: translateX(100%);
right: 0;
}
.floating-cart-toolbar.expanded {
transform: translateX(0);
}
.floating-cart-toolbar.collapsed {
transform: translateX(100%);
}
.toolbar-toggle {
position: absolute;
left: -45px;
top: 0;
width: 45px;
height: 55px;
background: linear-gradient(135deg, var(--deep-teal), var(--brown));
border: 2px solid var(--warm-pale);
border-right: none;
border-radius: 12px 0 0 12px;
box-shadow: -5px 0 20px rgba(0, 0, 0, 0.2);
}
.floating-cart-content {
width: 200px;
border-radius: 0 0 0 12px;
}
.hero-content {
margin-top: 3rem;
padding-left: var(--s-2);
padding-right: var(--s-2);
margin-left: auto;
margin-right: auto;
}
.epic-hero {
min-height: 80vh;
padding: var(--s-4) var(--s-2);
}
.hero-content {
padding: var(--s-3) var(--s-2);
}
.blend-visual {
flex-direction: column;
height: auto;
}
.blend-segment {
flex-direction: row;
justify-content: space-between;
padding: var(--s-2);
min-height: 100px;
}
.blend-segment:hover {
flex: 1;
}
.segment-percentage {
margin-bottom: 0;
margin-right: var(--s-2);
}
.segment-label {
text-align: left;
flex: 1;
}
.process-step {
flex-direction: column;
text-align: center;
gap: var(--s-2);
}
.process-number {
min-width: auto;
}
.epic-section {
padding: var(--s-4) var(--s-2);
}
.stat-grid {
grid-template-columns: repeat(2, 1fr);
}
.tasting-grid {
grid-template-columns: 1fr;
gap: var(--s-2);
}
}
@media (max-width: 480px) {
body {
padding-top: 65px;
}
.floating-cart-toolbar {
top: calc(50% - 50px);
}
.toolbar-toggle {
width: 40px;
height: 50px;
left: -40px;
}
.floating-cart-content {
width: 180px;
padding: var(--s-1);
}
.hero-content {
margin-top: 2.5rem;
padding-left: var(--s-1);
padding-right: var(--s-1);
margin-left: auto;
margin-right: auto;
}
.stat-grid {
grid-template-columns: 1fr;
}
.serving-pairing {
grid-template-columns: 1fr;
}
.beer-title {
font-size: 2.5rem;
}
.beer-subtitle {
font-size: 1.1rem;
}
}
@media (max-width: 320px) {
body {
padding-top: 60px;
}
.floating-cart-toolbar {
top: calc(50% - 45px);
}
.floating-cart-content {
width: 160px;
}
.toolbar-toggle {
width: 35px;
height: 45px;
left: -35px;
font-size: 0.9rem;
}
.hero-content {
padding-right: var(--s-1);
padding-left: var(--s-1);
margin-left: auto;
margin-right: auto;
}
}
/* Mobile keyboard avoidance */
@media (max-height: 500px) and (max-width: 768px) {
.floating-cart-toolbar {
top: 100px;
}
}
/* Adjust for landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
.floating-cart-toolbar {
top: 150px;
}
.hero-content {
padding-left: var(--s-2);
padding-right: var(--s-2);
margin-top: 2rem;
margin-left: auto;
margin-right: auto;
}
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus styles */
*:focus {
outline: 2px solid var(--warm-pale);
outline-offset: 2px;
}
/* Loading optimization */
.bottle-image {
width: 100%;
height: auto;
}
/* Fallback image styling */
.img-fallback {
background: linear-gradient(135deg, var(--deep-teal), var(--brown));
display: flex;
align-items: center;
justify-content: center;
color: var(--warm-pale);
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
}