/* ===================================================================== hh-redesign.css — purely additive, non-destructive re-skin. Adds a DARK CINEMATIC theme (toggled via html[data-hh-theme="dark"]), 3 hero treatments (html[data-hero="1|2|3"]), a cinematic Story video background and an animated stats band. NOTHING here changes content, prices, products, cart, checkout, login or membership logic. It only remaps design tokens + adds visual chrome. ===================================================================== */ /* --------------------------------------------------------------------- 1. DARK THEME — remap the existing CSS custom properties. Because the site uses var(--token) almost everywhere, overriding the tokens re-skins the whole page in one shot. Specificity of html[data-hh-theme="dark"] (0,1,1) beats :root (0,1,0). --------------------------------------------------------------------- */ html[data-hh-theme="dark"] { /* Warm obsidian field (like the bakery / ceramics references) */ --bg-main: #100C08; --bg-secondary: #16110B; --bg-card: #1E1810; --bg-alt: #0C0906; --bg-footer: #0A0805; /* Accents — brightened so they read on near-black */ --primary-green: #6FC791; --secondary-green: #54AB78; --accent-green: #84D8A6; --terracotta: #E59067; --rust: #D86E40; --gold: #E6B84F; --gold-dark: #C99526; --cream: #FBF1DC; /* Type on dark */ --text-primary: #F5ECDA; --text-secondary: rgba(245,236,218,0.74); --text-muted: rgba(245,236,218,0.5); --text-on-dark: #FBF1DC; /* UI chrome */ --border-soft: rgba(230,184,79,0.16); --shadow-card: 0 8px 26px rgba(0,0,0,0.55); --shadow-card-hover: 0 18px 48px rgba(0,0,0,0.66); --shadow-dropdown: 0 16px 40px rgba(0,0,0,0.6); } /* Smooth the cross-fade when the theme flips */ html.hh-theme-anim body, html.hh-theme-anim .nav, html.hh-theme-anim .product-card, html.hh-theme-anim .tier, html.hh-theme-anim .section { transition: background-color .5s ease, color .5s ease, border-color .5s ease; } /* ---- Hardcoded #fff surfaces need explicit dark equivalents ---------- */ html[data-hh-theme="dark"] .tier, html[data-hh-theme="dark"] #cattle-pricing, html[data-hh-theme="dark"] #cattle-health, html[data-hh-theme="dark"] #cams-live, html[data-hh-theme="dark"] #cams-youtube, html[data-hh-theme="dark"] .tm-card, html[data-hh-theme="dark"] .hero-badge { background: var(--bg-card) !important; border-color: var(--border-soft) !important; } /* Nav glass goes obsidian */ html[data-hh-theme="dark"] .nav { background: rgba(14,10,7,0.78) !important; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); } html[data-hh-theme="dark"] .nav.scrolled { background: rgba(10,8,5,0.94) !important; } html[data-hh-theme="dark"] .brand, html[data-hh-theme="dark"] .menu-link { color: var(--text-primary); } html[data-hh-theme="dark"] .nav .brand-logo { filter: drop-shadow(0 0 1px rgba(0,0,0,.6)) drop-shadow(0 1px 3px rgba(0,0,0,.5)); } /* Light chips / pills that carry dark text need to STAY dark-on-light */ html[data-hh-theme="dark"] .btn-secondary, html[data-hh-theme="dark"] .tier .badge, html[data-hh-theme="dark"] .tour-card .price-pill, html[data-hh-theme="dark"] .product-img .tag { color: #1A140A !important; } /* Collage frames: white borders look harsh on obsidian → thin gold */ html[data-hh-theme="dark"] .hero-collage .frame { border-color: rgba(230,184,79,0.5); } /* Dropdowns / chat / inputs */ html[data-hh-theme="dark"] .dropdown { background: var(--bg-card); } html[data-hh-theme="dark"] .chat-widget { background: var(--bg-secondary); } /* Cinematic vignette, only in dark mode. A fixed top-layer overlay with pointer-events:none — it never intercepts clicks and never changes any element's positioning (so fixed cart/chat/modals keep working). */ html[data-hh-theme="dark"] body::after { content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(125% 85% at 50% 0%, transparent 58%, rgba(0,0,0,0.34) 100%), radial-gradient(150% 115% at 50% 100%, transparent 60%, rgba(0,0,0,0.40) 100%); } /* A subtle gold "ember" glow on the marquee headline cattle */ html[data-hh-theme="dark"] .featured-bull .fb-card, html[data-hh-theme="dark"] .tier.featured { box-shadow: 0 0 0 1px rgba(230,184,79,0.25), 0 24px 60px rgba(0,0,0,0.6), 0 0 90px -30px rgba(230,184,79,0.55); } /* Product / tour images get a touch more contrast on dark */ html[data-hh-theme="dark"] .product-card img, html[data-hh-theme="dark"] .tour-card img, html[data-hh-theme="dark"] .fb-media img { filter: saturate(1.05) contrast(1.04); } /* --------------------------------------------------------------------- 2. HERO TREATMENTS — three CSS-only directions for the same markup. Driven by html[data-hero="1|2|3"]. Default (no attr) === 1. --------------------------------------------------------------------- */ /* Shared: lift the hero copy & give it cinematic motion */ .hero-center h1 { position: relative; } .hero .container.hero-grid { position: relative; z-index: 2; } /* The hero always sits over the dark cattle video + a dark scrim, so its text must read light in BOTH themes (not just dark). */ .hero .hero-center h1 { color: var(--cream); text-shadow: 0 2px 20px rgba(0,0,0,0.45); } .hero .hero-center h1 em { color: var(--gold); font-style: italic; } .hero .hero-center p, .hero .hero-center .lede { color: rgba(251,241,220,0.88); } .hero .hero-center .eyebrow { background: rgba(251,241,220,0.14); color: var(--cream); } /* ----- HERO 1 · Centered Spotlight (default) ----- */ html[data-hero="1"] .hero-grid, html:not([data-hero]) .hero-grid { grid-template-columns: 1fr; } html[data-hero="1"] .hero-center, html:not([data-hero]) .hero-center { text-align: center; max-width: 880px; margin-inline: auto; } html[data-hero="1"] .hero-actions, html:not([data-hero]) .hero-actions { justify-content: center; } html[data-hero="1"] .hero-scrim, html:not([data-hero]) .hero-scrim { background: radial-gradient(110% 80% at 50% 42%, rgba(8,6,4,0.30) 0%, rgba(8,6,4,0.62) 60%, rgba(8,6,4,0.86) 100%); } /* ----- HERO 2 · Editorial Left (gold rule + kicker) ----- */ html[data-hero="2"] .hero-grid { grid-template-columns: 1.15fr 0.85fr; } @media (max-width: 900px){ html[data-hero="2"] .hero-grid { grid-template-columns: 1fr; } } html[data-hero="2"] .hero-center { text-align: left; max-width: 720px; margin: 0; } html[data-hero="2"] .hero-actions { justify-content: flex-start; } html[data-hero="2"] .hero-center h1::before { content: "Kabula Village · Est. 1947"; display: block; font-family: var(--sans); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; padding-left: 56px; position: relative; } html[data-hero="2"] .hero-center h1::after { content: ""; position: absolute; left: 0; top: 9px; width: 42px; height: 2px; background: var(--gold); } html[data-hero="2"] .hero-scrim { background: linear-gradient(95deg, rgba(8,6,4,0.90) 0%, rgba(8,6,4,0.66) 42%, rgba(8,6,4,0.18) 72%, rgba(8,6,4,0.45) 100%), linear-gradient(0deg, rgba(8,6,4,0.55) 0%, rgba(8,6,4,0) 40%); } /* ----- HERO 3 · Cinematic Bottom (anchored, oversized) ----- */ html[data-hero="3"] .hero { display: flex; align-items: flex-end; min-height: 86vh; } html[data-hero="3"] .hero-grid { grid-template-columns: 1fr; align-items: end; } html[data-hero="3"] .hero-center { text-align: left; max-width: 980px; margin: 0; } html[data-hero="3"] .hero-center h1 { font-size: clamp(2.8rem, 7vw, 5.6rem); letter-spacing: -0.02em; line-height: 0.98; } html[data-hero="3"] .hero-actions { justify-content: flex-start; } html[data-hero="3"] .hero-scrim { background: linear-gradient(0deg, rgba(8,6,4,0.92) 0%, rgba(8,6,4,0.55) 32%, rgba(8,6,4,0.10) 62%, rgba(8,6,4,0.30) 100%); } /* Entrance: title + actions rise & fade once, honouring reduced motion */ @media (prefers-reduced-motion: no-preference) { .hero-center h1 { animation: hh-rise .9s cubic-bezier(.22,.61,.36,1) both; } .hero-center .hero-actions { animation: hh-rise .9s .12s cubic-bezier(.22,.61,.36,1) both; } } @keyframes hh-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------------- 3. STORY — floating muted video background behind "Our Story". The