/* Theme Name: GrowlerSpot Theme URI: https://thegrowlerspot.com/ Author: Eric Dybala Author URI: https://ericdybala.com/ Description: Custom WordPress theme for The Growler Spot — Fulshear, TX. Craft beer bar and taproom. Version: 1.0.0 License: All Rights Reserved License URI: https://thegrowlerspot.com/ Text Domain: growlerspot Tags: craft-beer, taproom, bar, restaurant, mobile-first */ /* * GrowlerSpot Design Token System * Author: Eric Dybala * Version: 4.0.0 * * Single source of truth for all colors, typography, spacing, and layout. * Edit here — everything inherits. */ /* ============================================================ GOOGLE FONTS Black Ops One (display) + Oswald (subheads) + Barlow (body) ============================================================ */ :root { /* ============================================================ COLOR PALETTE ============================================================ */ /* Brand Greens */ --gs-green-900: #1a3204; /* darkest — deep forest */ --gs-green-800: #2a5208; /* dark label backgrounds */ --gs-green-700: #3a6e0b; /* dark interactive */ --gs-green-600: #4c8a0b; /* PRIMARY BRAND GREEN — existing site, keep */ --gs-green-500: #5ca50d; /* hover state */ --gs-green-400: #72c41a; /* accent / bright */ --gs-green-300: #96d44a; /* light accent */ --gs-green-200: #bde480; /* very light tint */ --gs-green-100: #dff2b8; /* lightest tint */ /* Blacks & Grays */ --gs-black: #0a0a0a; /* near-black — richer than pure black */ --gs-gray-900: #111111; --gs-gray-800: #1c1c1c; /* section backgrounds */ --gs-gray-700: #2a2a2a; /* card backgrounds */ --gs-gray-600: #3d3d3d; /* borders on dark */ --gs-gray-500: #5e5e5e; /* muted text on dark */ --gs-gray-400: #888888; /* placeholder text */ --gs-gray-300: #aaaaaa; /* secondary text on dark */ --gs-gray-200: #cccccc; /* light borders */ --gs-gray-100: #eeeeee; /* light backgrounds */ --gs-white: #ffffff; /* Accent — used sparingly for CTAs and highlights */ --gs-amber: #d4820a; /* warm amber — pour color, use for price/highlight */ --gs-amber-light:#f5a623; --gs-red: #c0392b; /* danger / error only */ /* ============================================================ SEMANTIC COLOR ASSIGNMENTS ============================================================ */ /* Backgrounds */ --color-bg-primary: var(--gs-black); /* default page bg */ --color-bg-secondary: var(--gs-gray-800); /* section alternates */ --color-bg-card: var(--gs-gray-700); /* cards, panels */ --color-bg-elevated: var(--gs-gray-600); /* hover states */ --color-bg-light: var(--gs-gray-100); /* light sections */ --color-bg-white: var(--gs-white); /* Text */ --color-text-primary: var(--gs-white); /* default on dark bg */ --color-text-secondary:var(--gs-gray-300); /* muted on dark */ --color-text-muted: var(--gs-gray-500); /* placeholder, captions */ --color-text-dark: var(--gs-gray-900); /* for light-bg sections */ --color-text-accent: var(--gs-green-400); /* links, highlights */ /* Brand */ --color-brand-primary: var(--gs-green-600); --color-brand-hover: var(--gs-green-500); --color-brand-dark: var(--gs-green-800); --color-brand-light: var(--gs-green-400); --color-brand-accent: var(--gs-amber); /* Borders */ --color-border: var(--gs-gray-600); --color-border-light: var(--gs-gray-200); --color-border-brand: var(--gs-green-600); /* ============================================================ TYPOGRAPHY ============================================================ */ /* Font Families */ --font-display: 'Bebas Neue', 'Oswald', Impact, sans-serif; /* headlines, hero */ --font-subhead: 'Oswald', 'Arial Narrow', sans-serif; /* nav, subheads, labels */ --font-body: 'Inter', 'Helvetica Neue', sans-serif; /* all body copy */ --font-mono: 'Courier New', Courier, monospace; /* ABV, prices, data */ /* Type Scale — mobile-first base */ --text-xs: 0.75rem; /* 12px — captions, labels */ --text-sm: 0.875rem; /* 14px — meta, small print */ --text-base: 1rem; /* 16px — body */ --text-md: 1.125rem; /* 18px — lead paragraphs */ --text-lg: 1.25rem; /* 20px — subheads */ --text-xl: 1.5rem; /* 24px — section heads */ --text-2xl: 2rem; /* 32px — page titles */ --text-3xl: 2.75rem; /* 44px — hero subheads */ --text-4xl: 3.5rem; /* 56px — hero headlines desktop */ --text-5xl: 4.5rem; /* 72px — massive display */ --text-6xl: 6rem; /* 96px — full-bleed statement */ /* Font Weights */ --weight-light: 300; --weight-normal: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* Line Heights */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.6; --leading-relaxed:1.8; /* Letter Spacing */ --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; /* ============================================================ SPACING SCALE ============================================================ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-32: 8rem; /* 128px */ /* Section vertical padding (mobile default) */ --section-padding-y: var(--space-16); --section-padding-x: var(--space-6); /* ============================================================ LAYOUT ============================================================ */ --container-max: 1200px; --container-wide: 1440px; --container-narrow: 760px; --container-padding: var(--space-6); /* Grid */ --grid-gap: var(--space-6); --grid-gap-sm:var(--space-4); /* ============================================================ BORDERS & RADIUS ============================================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-full: 9999px; --border-width: 1px; --border-width-thick: 2px; --border-width-heavy: 4px; /* ============================================================ SHADOWS ============================================================ */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.5); --shadow-lg: 0 8px 32px rgba(0,0,0,0.6); --shadow-xl: 0 16px 48px rgba(0,0,0,0.7); --shadow-green: 0 0 20px rgba(76,138,11,0.4); /* ============================================================ TRANSITIONS ============================================================ */ --transition-fast: 150ms ease; --transition-base: 300ms ease; --transition-slow: 500ms ease; --transition-colors: color 300ms ease, background-color 300ms ease, border-color 300ms ease; /* ============================================================ Z-INDEX SCALE ============================================================ */ --z-base: 1; --z-raised: 10; --z-dropdown:100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; /* ============================================================ NAVIGATION ============================================================ */ --nav-height-mobile: 64px; --nav-height-desktop: 72px; --nav-bg: rgba(10,10,10,0.97); --nav-border: var(--gs-green-700); /* ============================================================ COMPONENT TOKENS — BUTTONS ============================================================ */ /* Primary CTA */ --btn-primary-bg: var(--gs-green-600); --btn-primary-bg-hover: var(--gs-green-500); --btn-primary-color: var(--gs-white); --btn-primary-border: var(--gs-green-600); /* Secondary / Ghost */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: var(--gs-green-800); --btn-ghost-color: var(--gs-white); --btn-ghost-border: var(--gs-white); /* Dark/Outline on light bg */ --btn-outline-bg: transparent; --btn-outline-bg-hover: var(--gs-gray-900); --btn-outline-color: var(--gs-gray-900); --btn-outline-border: var(--gs-gray-900); --btn-height: 48px; --btn-height-sm: 38px; --btn-height-lg: 58px; --btn-padding-x: var(--space-6); --btn-padding-x-lg: var(--space-10); --btn-font: var(--font-subhead); --btn-font-size: var(--text-sm); --btn-font-weight: var(--weight-semibold); --btn-letter-spacing: var(--tracking-wider); --btn-radius: var(--radius-sm); /* ============================================================ COMPONENT TOKENS — BEER CARDS ============================================================ */ --beer-card-bg: var(--gs-gray-700); --beer-card-border: var(--gs-gray-600); --beer-card-hover-border: var(--gs-green-600); --beer-abv-color: var(--gs-amber); --beer-style-color: var(--gs-green-400); /* ============================================================ COMPONENT TOKENS — NAV ============================================================ */ --nav-link-color: var(--gs-gray-200); --nav-link-hover: var(--gs-green-400); --nav-link-active: var(--gs-green-600); --nav-link-font: var(--font-subhead); --nav-link-size: var(--text-sm); --nav-link-weight: var(--weight-semibold); --nav-link-tracking: var(--tracking-wider); /* ============================================================ BREAKPOINTS — reference only (use in @media queries) --bp-sm: 480px --bp-md: 768px --bp-lg: 1024px --bp-xl: 1280px --bp-2xl: 1440px ============================================================ */ } /* ============================================================ DESKTOP OVERRIDES — scale up type and spacing ============================================================ */ @media (min-width: 1024px) { :root { --section-padding-y: var(--space-24); --container-padding: var(--space-8); --grid-gap: var(--space-8); --nav-height-desktop: 80px; } } /* * GrowlerSpot — CSS Reset & Base * Author: Eric Dybala * Replaces AMP normalization with a clean modern reset. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-normal); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-normal); /* Black Ops One is inherently heavy */ line-height: var(--leading-tight); letter-spacing: var(--tracking-wide); color: var(--color-text-primary); margin-bottom: var(--space-4); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-family: var(--font-heading); font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: var(--tracking-wide); } h4 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-lg); } h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-base); text-transform: uppercase; letter-spacing: var(--tracking-wider); } @media (min-width: 768px) { h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } } /* Paragraphs */ p { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); margin-bottom: var(--space-4); } p:last-child { margin-bottom: 0; } /* Links */ a { color: var(--color-text-accent); text-decoration: none; transition: var(--transition-colors); display: inline; } a:hover { color: var(--color-brand-hover); } /* Lists */ ul, ol { list-style: none; padding: 0; margin: 0; } /* Images */ img { max-width: 100%; height: auto; display: block; border-style: none; vertical-align: middle; } /* Figures */ figure { margin: 0; } /* HR */ hr { border: none; border-top: var(--border-width) solid var(--color-border); margin: var(--space-8) 0; } /* Form elements */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button { cursor: pointer; } /* Code */ code, kbd, pre, samp { font-family: var(--font-mono); font-size: 1em; } /* 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-width: 0; } .skip-link { position: absolute; top: -100%; left: var(--space-4); background: var(--color-brand-primary); color: var(--gs-white); padding: var(--space-2) var(--space-4); z-index: var(--z-toast); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .skip-link:focus { top: var(--space-4); } /* Focus styles */ :focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 3px; } /* Selection */ ::selection { background: var(--gs-green-700); color: var(--gs-white); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* * GrowlerSpot — General Layout & Utilities * Author: Eric Dybala */ /* ============================================================ LAYOUT CONTAINERS ============================================================ */ .gs-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-padding); } .gs-container--wide { max-width: var(--container-wide); } .gs-container--narrow { max-width: var(--container-narrow); } /* ============================================================ PAGE WRAPPER ============================================================ */ #gs-page { display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg-primary); } #gs-content { flex: 1; } /* ============================================================ SKIP LINK ============================================================ */ .gs-skip-link { position: absolute; top: -100%; left: var(--space-4); background: var(--color-brand-primary); color: var(--gs-white); padding: var(--space-2) var(--space-4); z-index: var(--z-toast); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); display: inline-block; } .gs-skip-link:focus { top: var(--space-4); color: var(--gs-white); } /* ============================================================ SECTION BASE ============================================================ */ .gs-section { padding-block: var(--section-padding-y); } .gs-section--dark { background: var(--color-bg-secondary); } .gs-section--darker { background: var(--gs-gray-900); } .gs-section--black { background: var(--gs-black); } .gs-section--green { background: var(--color-brand-primary); } .gs-section__header { text-align: center; margin-bottom: var(--space-12); } .gs-section__eyebrow { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-brand-light); margin-bottom: var(--space-3); } .gs-section__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gs-white); margin-bottom: var(--space-4); } .gs-section__subtitle { font-family: var(--font-body); font-size: var(--text-md); color: var(--color-text-secondary); max-width: 560px; margin-inline: auto; } @media (min-width: 768px) { .gs-section__title { font-size: var(--text-3xl); } } /* ============================================================ BUTTONS ============================================================ */ .gs-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--btn-height); padding-inline: var(--btn-padding-x); font-family: var(--btn-font); font-size: var(--btn-font-size); font-weight: var(--btn-font-weight); letter-spacing: var(--btn-letter-spacing); text-transform: uppercase; text-decoration: none; border: 2px solid transparent; border-radius: var(--btn-radius); cursor: pointer; transition: var(--transition-colors), transform var(--transition-fast); white-space: nowrap; line-height: 1; } .gs-btn:hover { transform: translateY(-1px); } .gs-btn:active { transform: translateY(0); } .gs-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); border-color: var(--btn-primary-border); } .gs-btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-color); border-color: var(--btn-primary-bg-hover); } .gs-btn--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-color); border-color: var(--btn-ghost-border); } .gs-btn--ghost:hover { background: rgba(255,255,255,0.1); color: var(--gs-white); } .gs-btn--lg { height: var(--btn-height-lg); padding-inline: var(--btn-padding-x-lg); font-size: var(--text-base); } /* ============================================================ UTILITIES ============================================================ */ .gs-text-green { color: var(--color-brand-light); } .gs-text-amber { color: var(--color-brand-accent); } .gs-text-muted { color: var(--color-text-secondary); } .gs-text-center { text-align: center; } .gs-text-upper { text-transform: uppercase; letter-spacing: var(--tracking-wider); } .gs-divider { width: 60px; height: 3px; background: var(--color-brand-primary); border: none; margin: var(--space-6) auto; } /* ============================================================ SOCIAL ICONS ============================================================ */ .gs-social { display: flex; gap: var(--space-4); margin-top: var(--space-4); } .gs-social__link { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-secondary); transition: var(--transition-colors), border-color var(--transition-base); } .gs-social__link:hover { color: var(--color-brand-light); border-color: var(--color-brand-primary); } /* * GrowlerSpot — Header & Navigation * Author: Eric Dybala */ /* ============================================================ TOP BAR — desktop only ============================================================ */ .gs-topbar { display: none; background: var(--gs-gray-900); border-bottom: 1px solid var(--gs-gray-800); } .gs-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); font-family: var(--font-heading); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); min-width: 0; } .gs-topbar__address { flex-shrink: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .gs-topbar__address a { color: var(--gs-gray-400); font-size: var(--text-xs); text-decoration: none; white-space: nowrap; } .gs-topbar__address a:hover { color: var(--color-brand-light); } .gs-topbar__hours { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; white-space: nowrap; flex-shrink: 0; } .gs-topbar__hours span { color: var(--gs-gray-400); font-size: var(--text-xs); } .gs-topbar__sep { margin-inline: var(--space-3); color: var(--gs-gray-700); } .gs-topbar__phone { display: inline-flex; align-items: center; background: var(--color-brand-primary); color: var(--gs-white) !important; padding: var(--space-1) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-decoration: none; transition: background var(--transition-base); white-space: nowrap; flex-shrink: 0; } .gs-topbar__phone:hover { background: var(--color-brand-hover); color: var(--gs-white) !important; } /* ============================================================ MAIN NAV BAR ============================================================ */ .gs-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--nav-bg); border-bottom: 2px solid var(--nav-border); transition: box-shadow var(--transition-base); } .gs-header.is-scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.6); } .gs-nav { width: 100%; } .gs-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: var(--space-4); padding-inline: var(--container-padding); max-width: var(--container-wide); margin-inline: auto; } /* ============================================================ LOGO ============================================================ */ .gs-nav__logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; height: 64px; overflow: visible; padding-block: 4px; } /* WordPress custom logo link wrapper */ .gs-nav__logo .custom-logo-link { display: flex; align-items: center; height: 100%; } @media (min-width: 1024px) { .gs-nav__logo { height: 72px; padding-block: 6px; } } /* The actual logo image — constrained to nav height Override WP's injected width/height/aspect-ratio attributes */ .gs-nav__logo img, .gs-nav__logo .custom-logo, .gs-nav__logo a img, .gs-nav__logo .custom-logo-link img { height: 52px !important; width: auto !important; max-width: 52px !important; min-width: unset !important; max-height: 52px !important; display: block !important; object-fit: contain !important; aspect-ratio: auto !important; flex-shrink: 0 !important; } .gs-nav__logo-text { font-family: var(--font-display); font-size: var(--text-lg); color: var(--gs-white); letter-spacing: var(--tracking-wide); line-height: 1; } /* ============================================================ DESKTOP NAV MENU ============================================================ */ .gs-nav__menu { display: none; list-style: none; margin: 0; padding: 0; gap: 0; align-items: center; } .gs-nav__menu li { position: relative; } .gs-nav__menu > li > a { display: block; padding: var(--space-2) var(--space-3); font-family: var(--nav-link-font); font-size: var(--nav-link-size); font-weight: var(--nav-link-weight); letter-spacing: var(--nav-link-tracking); text-transform: uppercase; color: var(--nav-link-color); text-decoration: none; border-radius: var(--radius-sm); transition: color var(--transition-base), background var(--transition-base); white-space: nowrap; } .gs-nav__menu > li > a:hover, .gs-nav__menu > li.current-menu-item > a, .gs-nav__menu > li.current-page-ancestor > a { color: var(--nav-link-hover); background: rgba(76, 138, 11, 0.12); } /* Dropdown */ .gs-nav__menu li ul { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 200px; background: var(--gs-gray-800); border: 1px solid var(--gs-gray-700); border-top: 2px solid var(--color-brand-primary); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-2) 0; z-index: var(--z-dropdown); box-shadow: var(--shadow-lg); } .gs-nav__menu li:hover > ul, .gs-nav__menu li:focus-within > ul { display: block; } .gs-nav__menu li ul li a { display: block; padding: var(--space-2) var(--space-5); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gs-gray-300); text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast); } .gs-nav__menu li ul li a:hover { color: var(--color-brand-light); background: rgba(76, 138, 11, 0.1); } /* ============================================================ MOBILE ACTION BUTTONS ============================================================ */ .gs-nav__mobile-actions { display: flex; align-items: center; gap: var(--space-2); } .gs-nav__icon-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--gs-gray-300); border-radius: var(--radius-sm); transition: color var(--transition-base); text-decoration: none; flex-shrink: 0; } .gs-nav__icon-btn:hover { color: var(--color-brand-light); } /* Hamburger */ .gs-nav__hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: 1px solid var(--gs-gray-700); border-radius: var(--radius-sm); padding: var(--space-2); cursor: pointer; transition: border-color var(--transition-base); flex-shrink: 0; } .gs-nav__hamburger:hover { border-color: var(--color-brand-primary); } .gs-hamburger__bar { display: block; width: 100%; height: 2px; background: var(--gs-gray-200); border-radius: 2px; transition: transform var(--transition-base), opacity var(--transition-base); } .gs-nav__hamburger[aria-expanded="true"] .gs-hamburger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .gs-nav__hamburger[aria-expanded="true"] .gs-hamburger__bar:nth-child(2) { opacity: 0; } .gs-nav__hamburger[aria-expanded="true"] .gs-hamburger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ============================================================ MOBILE SLIDE-OUT MENU ============================================================ */ .gs-nav-mobile { position: fixed; top: 72px; left: 0; width: min(320px, 85vw); height: calc(100vh - 72px); background: var(--gs-gray-900); border-right: 2px solid var(--color-brand-primary); overflow-y: auto; z-index: calc(var(--z-overlay) + 1); transform: translateX(-100%); transition: transform var(--transition-slow); padding: var(--space-4) 0; } .gs-nav-mobile:not([hidden]) { display: block; } .gs-nav-mobile.is-open { transform: translateX(0); } .gs-nav-mobile__menu { list-style: none; margin: 0; padding: 0; } .gs-nav-mobile__menu li a { display: block; padding: var(--space-4) var(--space-6); font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gs-gray-200); text-decoration: none; border-bottom: 1px solid var(--gs-gray-800); transition: color var(--transition-fast), background var(--transition-fast); } .gs-nav-mobile__menu li a:hover, .gs-nav-mobile__menu li.current-menu-item a { color: var(--color-brand-light); background: rgba(76, 138, 11, 0.1); } .gs-nav-mobile__menu li ul { background: var(--gs-black); list-style: none; padding: 0; } .gs-nav-mobile__menu li ul li a { padding-left: var(--space-10); font-size: var(--text-sm); color: var(--gs-gray-400); border-bottom-color: var(--gs-gray-900); } .gs-nav-mobile__footer { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); border-top: 1px solid var(--gs-gray-700); margin-top: var(--space-4); } .gs-nav-mobile__footer a { font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-brand-light); text-decoration: none; } .gs-nav-mobile__footer span { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gs-gray-500); letter-spacing: var(--tracking-wide); } /* Overlay */ .gs-nav-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: var(--z-overlay); backdrop-filter: blur(2px); opacity: 0; transition: opacity var(--transition-slow); } .gs-nav-overlay:not([hidden]) { display: block; } .gs-nav-overlay.is-visible { opacity: 1; } /* ============================================================ DESKTOP BREAKPOINT ============================================================ */ @media (min-width: 1024px) { .gs-topbar { display: block; } .gs-nav__inner { height: 72px; } .gs-nav__logo img, .gs-nav__logo .custom-logo, .gs-nav__logo .custom-logo-link img { height: 60px !important; max-height: 60px !important; max-width: 60px !important; aspect-ratio: auto !important; } /* Show desktop menu, hide mobile controls */ .gs-nav__menu { display: flex; align-items: center; } .gs-nav__icon-btn, .gs-nav__hamburger { display: none; } .gs-nav-mobile { top: 80px; height: calc(100vh - 80px); } } /* Mid-range: hide hours on medium screens to prevent overflow */ @media (min-width: 1024px) and (max-width: 1200px) { .gs-topbar__hours .gs-topbar__sep:nth-child(4), .gs-topbar__hours span:nth-child(5), .gs-topbar__hours .gs-topbar__sep:nth-child(6), .gs-topbar__hours span:nth-child(7) { display: none; } } /* * GrowlerSpot — Footer * Author: Eric Dybala */ .gs-footer { background: var(--gs-gray-900); border-top: 2px solid var(--gs-gray-800); padding-top: var(--space-16); padding-bottom: var(--space-8); } /* Grid */ .gs-footer__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-10); padding-bottom: var(--space-10); border-bottom: 1px solid var(--gs-gray-800); margin-bottom: var(--space-6); } @media (min-width: 600px) { .gs-footer__grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .gs-footer__grid { grid-template-columns: 2fr 1fr 1.5fr 1.5fr; gap: var(--space-8); } } /* Brand col */ .gs-footer__brand img { height: 72px; width: auto; margin-bottom: var(--space-4); } .gs-footer__logo-text { display: block; font-family: var(--font-display); font-size: var(--text-xl); color: var(--gs-white); margin-bottom: var(--space-4); letter-spacing: var(--tracking-wide); } .gs-footer__tagline { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-brand-light); margin-bottom: var(--space-1); } .gs-footer__est { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gs-gray-500); letter-spacing: var(--tracking-wide); margin-bottom: 0; } /* Col headings */ .gs-footer__col-heading { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gs-gray-500); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--gs-gray-800); } /* Footer nav */ .gs-footer__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .gs-footer__menu a { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--gs-gray-400); text-decoration: none; transition: color var(--transition-base); } .gs-footer__menu a:hover { color: var(--color-brand-light); } /* Hours list */ .gs-hours-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .gs-hours-list li { display: flex; justify-content: space-between; gap: var(--space-4); font-family: var(--font-body); font-size: var(--text-sm); color: var(--gs-gray-300); padding-bottom: var(--space-2); border-bottom: 1px solid var(--gs-gray-800); } .gs-hours-list li span:first-child { color: var(--gs-gray-500); font-weight: var(--weight-semibold); } .gs-hours-list__closed span { color: var(--gs-gray-600) !important; text-decoration: line-through; } /* Contact col */ .gs-footer__contact address { font-style: normal; margin-bottom: var(--space-3); } .gs-footer__contact address a { font-family: var(--font-body); font-size: var(--text-sm); color: var(--gs-gray-400); text-decoration: none; line-height: var(--leading-relaxed); transition: color var(--transition-base); } .gs-footer__contact address a:hover { color: var(--color-brand-light); } .gs-footer__phone { display: block; font-family: var(--font-heading); font-size: var(--text-base); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); color: var(--gs-white); text-decoration: none; margin-bottom: var(--space-3); transition: color var(--transition-base); } .gs-footer__phone:hover { color: var(--color-brand-light); } /* Bottom bar */ .gs-footer__bottom { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; text-align: center; } .gs-footer__bottom p { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gs-gray-600); margin: 0; } .gs-footer__bottom nav { display: flex; gap: var(--space-4); align-items: center; } .gs-footer__bottom nav a { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gs-gray-600); text-decoration: none; transition: color var(--transition-base); } .gs-footer__bottom nav a:hover { color: var(--color-brand-light); } .gs-footer__bottom nav span { color: var(--gs-gray-700); } @media (min-width: 768px) { .gs-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } } /* * GrowlerSpot — Content & Page Styles * Author: Eric Dybala */ /* ============================================================ MAIN CONTENT AREA ============================================================ */ .gs-main { padding-block: var(--space-12); } /* ============================================================ GENERIC PAGE TEMPLATE ============================================================ */ .gs-page-content__header { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); } .gs-page-content__title { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--gs-white); margin-bottom: 0; } .gs-page-content__subtitle { color: var(--color-text-secondary); font-size: var(--text-sm); margin-top: var(--space-2); margin-bottom: 0; } .gs-page-content__body { color: var(--color-text-secondary); line-height: var(--leading-relaxed); } .gs-page-content__body h2, .gs-page-content__body h3, .gs-page-content__body h4 { color: var(--gs-white); margin-top: var(--space-8); margin-bottom: var(--space-4); } .gs-page-content__body h3 { color: var(--color-brand-light); font-family: var(--font-heading); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-widest); } .gs-page-content__body p { margin-bottom: var(--space-4); } .gs-page-content__body a { color: var(--color-brand-light); text-decoration: underline; text-underline-offset: 3px; } .gs-page-content__body a:hover { color: var(--color-brand-hover); } .gs-page-content__body ul, .gs-page-content__body ol { list-style: revert; padding-left: var(--space-6); margin-bottom: var(--space-4); color: var(--color-text-secondary); } .gs-page-content__body ul li, .gs-page-content__body ol li { margin-bottom: var(--space-2); line-height: var(--leading-relaxed); } .gs-page-content__body img { border-radius: var(--radius-md); margin-block: var(--space-6); } /* ============================================================ 404 PAGE ============================================================ */ .gs-404 { text-align: center; padding-block: var(--space-24); } .gs-404__code { font-family: var(--font-display); font-size: var(--text-6xl); color: var(--color-brand-primary); line-height: 1; margin-bottom: var(--space-4); opacity: 0.4; } .gs-404__title { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gs-white); margin-bottom: var(--space-4); } .gs-404__text { color: var(--color-text-secondary); margin-bottom: var(--space-8); } /* * GrowlerSpot — Gutenberg Block Styles * Author: Eric Dybala * * These CSS classes are available as "Additional CSS class" on any block * in the WordPress editor, or applied via theme.json block styles. * Eric adds a class to a block in the editor — the CSS does the rest. */ /* ============================================================ SECTION WRAPPERS Apply to a Group block to define a full-width section. ============================================================ */ /* Dark section — default page background */ .gs-home .wp-block-group.is-section { padding-block: var(--section-padding-y); padding-inline: var(--container-padding); max-width: 100%; } /* Constrain content width inside a section */ .gs-home .wp-block-group.is-section > .wp-block-group__inner-container, .gs-home .wp-block-group.is-contained { max-width: var(--container-max); margin-inline: auto; width: 100%; } /* Section backgrounds */ .gs-home .wp-block-group.has-bg-dark { background: var(--gs-gray-900); } .gs-home .wp-block-group.has-bg-darker { background: var(--gs-gray-800); } .gs-home .wp-block-group.has-bg-black { background: var(--gs-black); } .gs-home .wp-block-group.has-bg-green { background: var(--color-brand-primary); } .gs-home .wp-block-group.has-bg-green * { color: var(--gs-white); } /* ============================================================ HERO SECTION Set class "is-hero" on a Cover block or Group block. ============================================================ */ .gs-home .wp-block-cover.is-hero, .gs-home .wp-block-group.is-hero { min-height: 100svh; display: flex; align-items: center; position: relative; background-color: var(--gs-black); padding-inline: var(--container-padding); padding-block: var(--space-24); } .gs-home .wp-block-cover.is-hero .wp-block-cover__inner-container, .gs-home .wp-block-group.is-hero > .wp-block-group__inner-container { max-width: var(--container-max); margin-inline: auto; width: 100%; } /* Hero heading — apply to H1 inside hero */ .gs-home .is-hero h1, .gs-home h1.is-hero-title { font-family: var(--font-display); font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 1; letter-spacing: 0.02em; color: var(--gs-white); margin-bottom: var(--space-5); text-shadow: 0 2px 30px rgba(0,0,0,0.6); max-width: 720px; } /* Hero subtext */ .gs-home .is-hero p.is-hero-sub, .gs-home p.is-hero-sub { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--gs-gray-300); letter-spacing: var(--tracking-wide); max-width: 600px; margin-bottom: var(--space-8); } /* ============================================================ EYEBROW LABELS Apply class "is-eyebrow" to a Paragraph block. ============================================================ */ .gs-home p.is-eyebrow, p.is-eyebrow { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-brand-light); margin-bottom: var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--gs-green-700); border-radius: var(--radius-sm); } /* ============================================================ SECTION HEADINGS Standard H2 and H3 styling on dark backgrounds. ============================================================ */ .gs-home h2 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.5rem); color: var(--gs-white); line-height: 1.05; letter-spacing: 0.02em; margin-bottom: var(--space-4); } .gs-home h3 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--gs-white); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-3); } .gs-home p { color: var(--gs-gray-300); font-size: var(--text-md); line-height: var(--leading-relaxed); max-width: 65ch; } /* Centered text sections */ .gs-home .has-text-align-center p { margin-inline: auto; } /* ============================================================ STATS BAR Apply class "is-stats-bar" to a Columns block (4 cols). ============================================================ */ .gs-home .wp-block-columns.is-stats-bar { background: var(--color-brand-primary); padding-block: var(--space-5); padding-inline: var(--container-padding); margin: 0; border-top: 1px solid var(--gs-green-700); border-bottom: 1px solid var(--gs-green-700); gap: 1px; } .gs-home .wp-block-columns.is-stats-bar .wp-block-column { text-align: center; padding: var(--space-4) var(--space-2); border-right: 1px solid var(--gs-green-700); } .gs-home .wp-block-columns.is-stats-bar .wp-block-column:last-child { border-right: none; } .gs-home .wp-block-columns.is-stats-bar strong, .gs-home .wp-block-columns.is-stats-bar b { display: block; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-normal); color: var(--gs-white); line-height: 1; margin-bottom: var(--space-1); } .gs-home .wp-block-columns.is-stats-bar p { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gs-green-200); margin: 0; } /* ============================================================ OFFER CARDS Apply class "is-offer-card" to each Column in a 3-col layout. ============================================================ */ .gs-home .wp-block-columns.is-offer-grid { gap: var(--space-4); margin: 0; padding-inline: var(--container-padding); } .gs-home .wp-block-column.is-offer-card { position: relative; min-height: 400px; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--gs-gray-700); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-8) !important; background-color: var(--gs-gray-800); background-size: cover; background-position: center; transition: border-color var(--transition-base); cursor: pointer; } .gs-home .wp-block-column.is-offer-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, transparent 100%); transition: background var(--transition-slow); z-index: 0; } .gs-home .wp-block-column.is-offer-card:hover { border-color: var(--color-brand-primary); } .gs-home .wp-block-column.is-offer-card:hover::before { background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.1) 100%); } .gs-home .wp-block-column.is-offer-card > * { position: relative; z-index: 1; } .gs-home .wp-block-column.is-offer-card h3 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gs-white); letter-spacing: 0.03em; margin-bottom: var(--space-3); text-transform: none; } .gs-home .wp-block-column.is-offer-card p { font-size: var(--text-sm); color: var(--gs-gray-300); margin-bottom: var(--space-4); opacity: 0; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base); } .gs-home .wp-block-column.is-offer-card:hover p { opacity: 1; transform: translateY(0); } .gs-home .wp-block-column.is-offer-card .wp-block-buttons { opacity: 0; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base); } .gs-home .wp-block-column.is-offer-card:hover .wp-block-buttons { opacity: 1; transform: translateY(0); } /* ============================================================ BREWERY TAGS Apply class "is-brewery-list" to a Group containing individual Paragraph or Button blocks for each brewery. ============================================================ */ .gs-home .wp-block-group.is-brewery-list { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; max-width: 900px; margin-inline: auto; } .gs-home .wp-block-group.is-brewery-list .wp-block-paragraph, .gs-home .wp-block-group.is-brewery-list p { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gs-gray-300); background: var(--gs-gray-800); border: 1px solid var(--gs-gray-700); border-radius: var(--radius-full); padding: var(--space-2) var(--space-5); margin: 0; max-width: none; transition: border-color var(--transition-base), color var(--transition-base); } .gs-home .wp-block-group.is-brewery-list p:hover { border-color: var(--color-brand-primary); color: var(--color-brand-light); } /* ============================================================ WORDPRESS BUTTON OVERRIDES Standard WP buttons match our design system. ============================================================ */ .gs-home .wp-block-buttons { gap: var(--space-4); } .gs-home .wp-block-button__link { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; border-radius: var(--radius-sm); padding: 0 var(--btn-padding-x); height: var(--btn-height); line-height: var(--btn-height); transition: var(--transition-colors), transform var(--transition-fast); display: inline-block; text-decoration: none; } .gs-home .wp-block-button__link:hover { transform: translateY(-1px); } /* Primary button — green fill */ .gs-home .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--color-brand-primary); color: var(--gs-white); border: 2px solid var(--color-brand-primary); } .gs-home .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--color-brand-hover); border-color: var(--color-brand-hover); color: var(--gs-white); } /* Outline/ghost button */ .gs-home .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--gs-white); border: 2px solid var(--gs-white); } .gs-home .wp-block-button.is-style-outline .wp-block-button__link:hover { background: rgba(255,255,255,0.1); color: var(--gs-white); } /* ============================================================ WORDPRESS IMAGE BLOCKS ============================================================ */ .gs-home .wp-block-image img { border-radius: var(--radius-lg); border: 1px solid var(--gs-gray-700); } .gs-home .wp-block-image.is-about-photo img { height: 500px; object-fit: cover; width: 100%; } /* ============================================================ COVER BLOCKS ============================================================ */ .gs-home .wp-block-cover { border-radius: 0; } .gs-home .wp-block-cover.is-full-bleed { min-height: 50vh; padding-block: var(--space-24); } /* ============================================================ SEPARATOR / DIVIDER ============================================================ */ .gs-home .wp-block-separator { border-color: var(--gs-gray-700); opacity: 1; margin-block: var(--space-2); } .gs-home .wp-block-separator.is-brand { border-color: var(--color-brand-primary); border-top-width: 3px; width: 60px; margin-inline: 0; } .gs-home .has-text-align-center .wp-block-separator.is-brand { margin-inline: auto; } /* ============================================================ VIBE / GALLERY STRIP Apply class "is-vibe-strip" to a Gallery block. ============================================================ */ .gs-home .wp-block-gallery.is-vibe-strip { gap: var(--space-2); margin: 0; } .gs-home .wp-block-gallery.is-vibe-strip .wp-block-image { border-radius: var(--radius-sm); overflow: hidden; } .gs-home .wp-block-gallery.is-vibe-strip .wp-block-image img { border: none; border-radius: 0; filter: saturate(0.5) brightness(0.7); transition: transform 0.4s ease, filter 0.4s ease; aspect-ratio: 1; object-fit: cover; height: 100%; } .gs-home .wp-block-gallery.is-vibe-strip .wp-block-image:hover img { transform: scale(1.05); filter: saturate(1) brightness(0.9); } /* ============================================================ CTA STRIP Apply class "is-cta-strip" to a Group block. ============================================================ */ .gs-home .wp-block-group.is-cta-strip { background: var(--color-brand-primary); padding-block: var(--space-12); padding-inline: var(--container-padding); border-top: 1px solid var(--gs-green-500); } .gs-home .wp-block-group.is-cta-strip > .wp-block-group__inner-container { max-width: var(--container-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; } @media (min-width: 900px) { .gs-home .wp-block-group.is-cta-strip > .wp-block-group__inner-container { flex-direction: row; align-items: center; justify-content: space-between; } } .gs-home .wp-block-group.is-cta-strip h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: var(--space-2); } .gs-home .wp-block-group.is-cta-strip p { color: var(--gs-green-200); font-size: var(--text-sm); margin: 0; max-width: none; } .gs-home .wp-block-group.is-cta-strip .wp-block-button:not(.is-style-outline) .wp-block-button__link { background: var(--gs-white); color: var(--color-brand-primary); border-color: var(--gs-white); } .gs-home .wp-block-group.is-cta-strip .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { background: var(--gs-gray-100); border-color: var(--gs-gray-100); color: var(--color-brand-dark); } /* ============================================================ CRITICAL FIXES ============================================================ */ /* Page title hidden via front-page.php — no CSS needed here */ /* Gutenberg editor outputs .wp-block-columns inside a group. Force two-column layout when inside .is-section */ .gs-home .is-section .wp-block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-items: center; } @media (max-width: 899px) { .gs-home .is-section .wp-block-columns { grid-template-columns: 1fr; gap: var(--space-8); } } /* Each column fills its grid cell */ .gs-home .is-section .wp-block-columns .wp-block-column { width: 100%; flex-basis: unset !important; flex-grow: unset !important; } /* About photo — tall and cropped */ .gs-home .is-section .wp-block-image.is-about-photo img, .gs-home .is-about-photo img { height: 520px; width: 100%; object-fit: cover; object-position: top center; border-radius: var(--radius-lg); border: 1px solid var(--gs-gray-700); } /* Section padding — apply to Group blocks */ .gs-home .wp-block-group.is-section { padding-block: var(--section-padding-y); padding-inline: var(--container-padding); } /* Max-width constraint on section content */ .gs-home .wp-block-group.is-section > .wp-block-group__inner-container { max-width: var(--container-max); margin-inline: auto; } /* Background colors */ .gs-home .wp-block-group.has-bg-dark { background-color: var(--gs-gray-900); } .gs-home .wp-block-group.has-bg-darker { background-color: var(--gs-gray-800); } .gs-home .wp-block-group.has-bg-black { background-color: var(--gs-black); } .gs-home .wp-block-group.has-bg-green { background-color: var(--color-brand-primary); } /* Stats bar — override column layout for 4-col stats */ .gs-home .wp-block-columns.is-stats-bar { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1px !important; background: var(--color-brand-primary); padding: var(--space-5) var(--container-padding); margin: 0 !important; border-top: 1px solid var(--gs-green-700); border-bottom: 1px solid var(--gs-green-700); } @media (max-width: 639px) { .gs-home .wp-block-columns.is-stats-bar { grid-template-columns: repeat(2, 1fr) !important; } } .gs-home .wp-block-columns.is-stats-bar .wp-block-column { background: var(--color-brand-primary); text-align: center; padding: var(--space-4) var(--space-2); border-right: 1px solid var(--gs-green-700); flex-basis: unset !important; flex-grow: unset !important; } .gs-home .wp-block-columns.is-stats-bar .wp-block-column:last-child { border-right: none; } .gs-home .wp-block-columns.is-stats-bar strong, .gs-home .wp-block-columns.is-stats-bar b { display: block; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-normal); color: var(--gs-white); line-height: 1; margin-bottom: var(--space-1); } .gs-home .wp-block-columns.is-stats-bar p { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gs-green-200); margin: 0; max-width: none; } /* Offer cards — 3-col grid */ .gs-home .wp-block-columns.is-offer-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-4) !important; padding-inline: 0 !important; margin: 0 !important; } @media (max-width: 699px) { .gs-home .wp-block-columns.is-offer-grid { grid-template-columns: 1fr !important; } } .gs-home .wp-block-column.is-offer-card { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--gs-gray-700); display: flex !important; flex-direction: column; justify-content: flex-end; padding: var(--space-8) !important; background-color: var(--gs-gray-800); background-size: cover; background-position: center; transition: border-color var(--transition-base); flex-basis: unset !important; flex-grow: unset !important; } .gs-home .wp-block-column.is-offer-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%); transition: background var(--transition-slow); z-index: 0; pointer-events: none; } .gs-home .wp-block-column.is-offer-card:hover { border-color: var(--color-brand-primary); } .gs-home .wp-block-column.is-offer-card > * { position: relative; z-index: 1; } .gs-home .wp-block-column.is-offer-card h3 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gs-white); letter-spacing: 0.03em; margin-bottom: var(--space-3); text-transform: none; } .gs-home .wp-block-column.is-offer-card p { font-size: var(--text-sm); color: var(--gs-gray-300); margin-bottom: var(--space-4); max-width: none; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; } .gs-home .wp-block-column.is-offer-card:hover p { opacity: 1; transform: translateY(0); } .gs-home .wp-block-column.is-offer-card .wp-block-buttons { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; } .gs-home .wp-block-column.is-offer-card:hover .wp-block-buttons { opacity: 1; transform: translateY(0); } /* Separator brand style */ .gs-home .wp-block-separator.is-brand { border-color: var(--color-brand-primary) !important; border-top-width: 3px !important; width: 60px !important; margin-inline: 0 !important; opacity: 1 !important; } /* Eyebrow paragraph */ .gs-home p.is-eyebrow { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-brand-light) !important; margin-bottom: var(--space-3); padding: var(--space-1) var(--space-3); border: 1px solid var(--gs-green-700); border-radius: var(--radius-sm); max-width: none !important; } /* Tap callout diagonal stripe texture */ .gs-home .wp-block-group.is-tap-callout { position: relative; text-align: center; } .gs-home .wp-block-group.is-tap-callout::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, transparent, transparent 40px, rgba(76,138,11,0.04) 40px, rgba(76,138,11,0.04) 80px ); pointer-events: none; } .gs-home .wp-block-group.is-tap-callout > .wp-block-group__inner-container { position: relative; z-index: 1; } .gs-home .wp-block-group.is-tap-callout h2 { font-size: clamp(2.8rem, 7vw, 5rem); } /* ============================================================ NOTE: No h1 hiding needed — front-page.php outputs the_content() directly, no automatic page title is injected. ============================================================ */ /* ============================================================ FIX: Brewery list — horizontal pill wrap ============================================================ */ .gs-home .wp-block-group.is-brewery-list { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: var(--space-3) !important; justify-content: center; max-width: 900px; margin-inline: auto; } .gs-home .wp-block-group.is-brewery-list > .wp-block-paragraph, .gs-home .wp-block-group.is-brewery-list p { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--gs-gray-300); background: var(--gs-gray-800); border: 1px solid var(--gs-gray-700); border-radius: var(--radius-full); padding: var(--space-2) var(--space-5); margin: 0 !important; max-width: none !important; width: auto !important; transition: border-color var(--transition-base), color var(--transition-base); line-height: 1.4; } .gs-home .wp-block-group.is-brewery-list p:hover { border-color: var(--color-brand-primary); color: var(--color-brand-light); } /* ============================================================ FIX: About image fills the column ============================================================ */ .gs-home .is-section .wp-block-column:first-child .wp-block-image, .gs-home .is-section .wp-block-image.is-about-photo { width: 100%; margin: 0; } .gs-home .is-section .wp-block-column:first-child .wp-block-image img, .gs-home .is-about-photo img { width: 100% !important; height: 520px !important; object-fit: cover !important; object-position: center top !important; border-radius: var(--radius-lg) !important; border: 1px solid var(--gs-gray-700) !important; display: block !important; } /* ============================================================ FIX: About section columns equal split ============================================================ */ .gs-home .wp-block-group.is-section .wp-block-columns:not(.is-stats-bar):not(.is-offer-grid) { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--space-16) !important; align-items: center !important; margin: 0 !important; flex-wrap: unset !important; } @media (max-width: 899px) { .gs-home .wp-block-group.is-section .wp-block-columns:not(.is-stats-bar):not(.is-offer-grid) { grid-template-columns: 1fr !important; gap: var(--space-8) !important; } } .gs-home .wp-block-group.is-section .wp-block-columns:not(.is-stats-bar):not(.is-offer-grid) .wp-block-column { flex-basis: unset !important; flex-grow: unset !important; width: 100% !important; min-width: 0 !important; } /* ============================================================ FIX: Tap callout text centering ============================================================ */ .gs-home .wp-block-group.is-tap-callout .wp-block-buttons { justify-content: center; } /* ============================================================ FIX: Section heading max-width for tap callout centered text ============================================================ */ .gs-home .wp-block-group.is-tap-callout p, .gs-home .wp-block-group.is-tap-callout h2 { margin-inline: auto; } /* ============================================================ FIX v2: Brewery list — override Gutenberg constrained layout ============================================================ */ .gs-home .wp-block-group.is-brewery-list, .gs-home .wp-block-group.is-brewery-list.is-layout-constrained, .gs-home .wp-block-group.is-brewery-list.is-layout-flow { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: var(--space-3) !important; justify-content: center !important; max-width: 900px !important; margin-inline: auto !important; padding: 0 !important; } .gs-home .wp-block-group.is-brewery-list > *, .gs-home .wp-block-group.is-brewery-list p, .gs-home .wp-block-group.is-brewery-list .wp-block-paragraph { display: inline-block !important; width: auto !important; max-width: none !important; font-family: var(--font-heading) !important; font-size: var(--text-sm) !important; font-weight: var(--weight-semibold) !important; letter-spacing: var(--tracking-wide) !important; text-transform: uppercase !important; color: var(--gs-gray-300) !important; background: var(--gs-gray-800) !important; border: 1px solid var(--gs-gray-700) !important; border-radius: var(--radius-full) !important; padding: var(--space-2) var(--space-5) !important; margin: 0 !important; line-height: 1.4 !important; transition: border-color var(--transition-base), color var(--transition-base) !important; } .gs-home .wp-block-group.is-brewery-list p:hover { border-color: var(--color-brand-primary) !important; color: var(--color-brand-light) !important; } /* ============================================================ FIX v2: Vibe gallery — force grid layout ============================================================ */ .gs-home .wp-block-gallery.is-vibe-strip, .gs-home .wp-block-gallery.is-vibe-strip.is-layout-flex { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: var(--space-2) !important; margin: 0 !important; padding: 0 !important; } @media (min-width: 768px) { .gs-home .wp-block-gallery.is-vibe-strip, .gs-home .wp-block-gallery.is-vibe-strip.is-layout-flex { grid-template-columns: repeat(8, 1fr) !important; } } .gs-home .wp-block-gallery.is-vibe-strip .wp-block-image, .gs-home .wp-block-gallery.is-vibe-strip li, .gs-home .wp-block-gallery.is-vibe-strip figure { width: 100% !important; margin: 0 !important; } .gs-home .wp-block-gallery.is-vibe-strip img { width: 100% !important; height: 160px !important; object-fit: cover !important; border-radius: var(--radius-sm) !important; filter: saturate(0.5) brightness(0.7) !important; transition: transform 0.4s ease, filter 0.4s ease !important; display: block !important; } .gs-home .wp-block-gallery.is-vibe-strip .wp-block-image:hover img, .gs-home .wp-block-gallery.is-vibe-strip figure:hover img { transform: scale(1.05) !important; filter: saturate(1) brightness(0.9) !important; } /* ============================================================ FIX v2: Offer cards — Cover block approach Use Cover blocks instead of Column backgrounds ============================================================ */ /* Outer columns grid */ .gs-home .wp-block-columns.is-offer-grid, .gs-home .wp-block-columns.is-offer-grid.is-layout-flex { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--space-4) !important; margin: 0 !important; flex-wrap: unset !important; } @media (max-width: 699px) { .gs-home .wp-block-columns.is-offer-grid, .gs-home .wp-block-columns.is-offer-grid.is-layout-flex { grid-template-columns: 1fr !important; } } .gs-home .wp-block-columns.is-offer-grid .wp-block-column { flex-basis: unset !important; flex-grow: unset !important; width: 100% !important; padding: 0 !important; margin: 0 !important; } /* Cover block inside offer card column */ .gs-home .wp-block-columns.is-offer-grid .wp-block-cover { min-height: 420px !important; border-radius: var(--radius-lg) !important; border: 1px solid var(--gs-gray-700) !important; transition: border-color var(--transition-base) !important; overflow: hidden !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover:hover { border-color: var(--color-brand-primary) !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover__image-background { filter: saturate(0.5) brightness(0.5) !important; transition: transform 0.6s ease, filter 0.6s ease !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover:hover .wp-block-cover__image-background { transform: scale(1.06) !important; filter: saturate(0.8) brightness(0.55) !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover__inner-container { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; height: 100% !important; padding: var(--space-8) !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover h3 { font-family: var(--font-display) !important; font-size: var(--text-2xl) !important; color: var(--gs-white) !important; letter-spacing: 0.03em !important; margin-bottom: var(--space-3) !important; text-transform: none !important; line-height: 1 !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover p { font-size: var(--text-sm) !important; color: var(--gs-gray-300) !important; margin-bottom: var(--space-4) !important; max-width: none !important; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover:hover p { opacity: 1 !important; transform: translateY(0) !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .wp-block-buttons { opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover:hover .wp-block-buttons { opacity: 1 !important; transform: translateY(0) !important; } /* ============================================================ ALIGNMENT FIXES v3 ============================================================ */ /* All section content constrained and centered */ .gs-home .wp-block-group.is-section > .wp-block-group__inner-container, .gs-home .wp-block-group.is-section.is-layout-constrained > .wp-block-group__inner-container { max-width: var(--container-max) !important; margin-inline: auto !important; width: 100% !important; padding-inline: 0 !important; } /* Sections with centered text */ .gs-home .wp-block-group.is-section.has-text-align-center, .gs-home .wp-block-group.is-tap-callout { text-align: center; } .gs-home .wp-block-group.is-section.has-text-align-center p, .gs-home .wp-block-group.is-tap-callout p { margin-inline: auto; text-align: center; } .gs-home .wp-block-group.is-section.has-text-align-center .wp-block-buttons, .gs-home .wp-block-group.is-tap-callout .wp-block-buttons { justify-content: center !important; } /* Remove monospace from paragraph text — catches accidental code blocks */ .gs-home p, .gs-home .wp-block-paragraph { font-family: var(--font-body) !important; } /* Exception: actual code elements stay mono */ .gs-home code, .gs-home pre { font-family: var(--font-mono) !important; } /* Tap callout — remove code styling from any paragraphs */ .gs-home .wp-block-group.is-tap-callout p, .gs-home .wp-block-group.is-tap-callout .wp-block-paragraph { font-family: var(--font-body) !important; font-size: var(--text-md) !important; color: var(--gs-gray-300) !important; letter-spacing: normal !important; } /* About section columns — consistent alignment */ .gs-home .wp-block-group.is-section .wp-block-columns:not(.is-stats-bar):not(.is-offer-grid) .wp-block-column { padding: 0 !important; margin: 0 !important; } /* Breweries section — center the inner content */ .gs-home .wp-block-group.is-section .wp-block-group.is-brewery-list { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; } /* CTA strip inner layout */ .gs-home .wp-block-group.is-cta-strip .wp-block-columns { display: flex !important; flex-direction: column !important; gap: var(--space-6) !important; align-items: flex-start !important; margin: 0 !important; } @media (min-width: 900px) { .gs-home .wp-block-group.is-cta-strip .wp-block-columns { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; } .gs-home .wp-block-group.is-cta-strip .wp-block-column:last-child { flex-shrink: 0 !important; flex-basis: auto !important; } } .gs-home .wp-block-group.is-cta-strip .wp-block-buttons { flex-wrap: wrap !important; gap: var(--space-4) !important; } /* Hero eyebrow alignment */ .gs-home .wp-block-cover.is-hero p.is-eyebrow, .gs-home .wp-block-group.is-hero p.is-eyebrow { display: inline-block !important; } /* Stats bar — remove any extra container padding */ .gs-home .wp-block-columns.is-stats-bar { max-width: 100% !important; padding-inline: var(--space-6) !important; } /* Vibe strip section padding */ .gs-home .wp-block-group.is-section .wp-block-gallery.is-vibe-strip { margin-top: var(--space-6) !important; margin-bottom: var(--space-6) !important; } /* ============================================================ FIX: Offer card heading size override Gutenberg adds has-large-font-size which overrides our CSS ============================================================ */ .gs-home .wp-block-columns.is-offer-grid .wp-block-cover h3, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover p.has-large-font-size, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .has-large-font-size { font-family: var(--font-display) !important; font-size: var(--text-2xl) !important; color: var(--gs-white) !important; letter-spacing: 0.03em !important; line-height: 1 !important; margin-bottom: var(--space-3) !important; text-transform: none !important; } /* ============================================================ FIX: Brewery list group — remove group background The background should be on individual pills, not the container ============================================================ */ .gs-home .wp-block-group.is-brewery-list { background: transparent !important; border-radius: 0 !important; padding: 0 !important; } /* Make sure the Buttons block inside brewery list sits below the pills, not inside them */ .gs-home .wp-block-group.is-brewery-list .wp-block-buttons { width: 100% !important; flex-basis: 100% !important; margin-top: var(--space-4) !important; justify-content: center !important; } /* ============================================================ FIX: Cover block heading — override ALL Gutenberg font sizes ============================================================ */ .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .wp-block-cover__inner-container > *:first-child, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .has-x-large-font-size, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .has-large-font-size, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .has-medium-font-size, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .has-small-font-size, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover h1, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover h2, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover h3, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover h4, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover p.is-offer-title { font-family: var(--font-display) !important; font-size: clamp(1.5rem, 2.5vw, 2rem) !important; color: var(--gs-white) !important; letter-spacing: 0.03em !important; line-height: 1.05 !important; margin-bottom: var(--space-3) !important; text-transform: none !important; font-weight: normal !important; } /* ============================================================ FIX: Brewery group — force transparent background Targets both the group and its inner container ============================================================ */ .gs-home .wp-block-group.is-brewery-list, .gs-home .wp-block-group.is-brewery-list.has-background, .gs-home [class*="is-brewery-list"] { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; } /* ============================================================ FIX: About image — full column width ============================================================ */ .gs-home .wp-block-group.is-section .wp-block-columns .wp-block-column:first-child { min-width: 0; } .gs-home .wp-block-group.is-section .wp-block-columns .wp-block-column:first-child figure, .gs-home .wp-block-group.is-section .wp-block-columns .wp-block-column:first-child .wp-block-image { width: 100% !important; margin: 0 !important; } .gs-home .wp-block-group.is-section .wp-block-columns .wp-block-column:first-child img { width: 100% !important; height: 480px !important; object-fit: cover !important; object-position: center 20% !important; border-radius: var(--radius-lg) !important; border: 1px solid var(--gs-gray-700) !important; display: block !important; max-width: none !important; } /* ============================================================ FIX: Hero title line breaks Shift+Enter in editor creates
— style it properly ============================================================ */ .gs-home .wp-block-cover.is-hero h1 br, .gs-home h1.is-hero-title br { display: block; content: ''; } /* ============================================================ FIX: Tap callout body text alignment ============================================================ */ .gs-home .wp-block-group.is-tap-callout > .wp-block-group__inner-container { display: flex; flex-direction: column; align-items: center; text-align: center; } /* ============================================================ FIX: Stats bar label — remove margin ============================================================ */ .gs-home .wp-block-columns.is-stats-bar p, .gs-home .wp-block-columns.is-stats-bar .wp-block-paragraph { margin-bottom: 0 !important; margin-top: 0 !important; } /* ============================================================ FIX: Section spacing consistency ============================================================ */ .gs-home .wp-block-group.is-section { padding-block: var(--space-16) !important; } @media (min-width: 1024px) { .gs-home .wp-block-group.is-section { padding-block: var(--space-24) !important; } } /* Sections with no top/bottom padding override */ .gs-home .wp-block-columns.is-stats-bar { padding-block: var(--space-5) !important; } /* ============================================================ FIX v4: Offer card — target exact Gutenberg markup The Cover block wraps content in .wp-block-cover__inner-container The heading is a paragraph with has-large-font-size ============================================================ */ /* Card title — paragraph used as heading */ .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .wp-block-cover__inner-container > p:first-child, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover p.has-large-font-size, .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .has-large-font-size { font-family: var(--font-display) !important; font-size: clamp(1.6rem, 2.2vw, 2.2rem) !important; color: var(--gs-white) !important; letter-spacing: 0.04em !important; line-height: 1 !important; margin-bottom: var(--space-3) !important; text-transform: none !important; font-weight: normal !important; background: transparent !important; text-align: left !important; max-width: none !important; opacity: 1 !important; transform: none !important; } /* Card body paragraph — hidden until hover */ .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .wp-block-cover__inner-container > p:not(:first-child), .gs-home .wp-block-columns.is-offer-grid .wp-block-cover p.is-offer-card { font-size: var(--text-sm) !important; color: var(--gs-gray-300) !important; max-width: none !important; background: transparent !important; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover:hover p:not(:first-child), .gs-home .wp-block-columns.is-offer-grid .wp-block-cover:hover p.is-offer-card { opacity: 1 !important; transform: translateY(0) !important; } /* Buttons — hidden until hover */ .gs-home .wp-block-columns.is-offer-grid .wp-block-cover .wp-block-buttons { opacity: 0 !important; transform: translateY(6px) !important; transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s !important; } .gs-home .wp-block-columns.is-offer-grid .wp-block-cover:hover .wp-block-buttons { opacity: 1 !important; transform: translateY(0) !important; } /* ============================================================ FIX v4: Brewery list — target the inner constrained container ============================================================ */ .gs-home .wp-block-group.is-brewery-list > .wp-block-group__inner-container { background: transparent !important; background-color: transparent !important; border-radius: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: var(--space-3) !important; justify-content: center !important; padding: 0 !important; } /* Also kill any background Gutenberg injects via style attribute */ .gs-home .wp-block-group.is-brewery-list[style*="background"], .gs-home .wp-block-group.is-brewery-list.has-background { background: transparent !important; background-color: transparent !important; } /* ============================================================ FIX v4: Tap callout paragraph — remove any highlight background ============================================================ */ .gs-home .wp-block-group.is-tap-callout p, .gs-home .wp-block-group.is-tap-callout .wp-block-paragraph { background: transparent !important; background-color: transparent !important; padding: 0 !important; } /* ============================================================ OFFER CARDS — Custom HTML block component Matches growlerspot-web skill: 4px radius, hard shadows, dark overlay, hover reveal ============================================================ */ .gs-offer-card { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--gs-gray-700); display: block; cursor: pointer; transition: border-color var(--transition-base); } @media (min-width: 700px) { .gs-offer-card { aspect-ratio: 2/3; } } .gs-offer-card:hover { border-color: var(--gs-green); } .gs-offer-card__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s ease; filter: saturate(0.5) brightness(0.45); } .gs-offer-card:hover .gs-offer-card__bg { transform: scale(1.05); filter: saturate(0.8) brightness(0.5); } .gs-offer-card__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100% ); } .gs-offer-card__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; z-index: 1; } .gs-offer-card__title { font-family: var(--font-display) !important; font-size: 2rem !important; font-weight: normal !important; color: var(--gs-white) !important; letter-spacing: 0.04em !important; line-height: 1 !important; margin: 0 0 0.75rem 0 !important; text-transform: none !important; } .gs-offer-card__text { font-family: var(--font-body) !important; font-size: 0.875rem !important; color: var(--gs-gray-300) !important; line-height: 1.6 !important; margin: 0 0 1rem 0 !important; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease, transform 0.3s ease; max-width: none !important; } .gs-offer-card:hover .gs-offer-card__text { opacity: 1; transform: translateY(0); } .gs-offer-card__cta { display: inline-block; font-family: var(--font-heading) !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: var(--gs-green-bright) !important; text-decoration: none !important; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; } .gs-offer-card:hover .gs-offer-card__cta { opacity: 1; transform: translateY(0); } /* Grid wrapper for the 3 cards */ .gs-offers-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 700px) { .gs-offers-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ LOGO NUCLEAR OVERRIDE WordPress injects width="160" height="160" and aspect-ratio: auto 160/160 as inline [Attributes Style]. This block overrides all of it at every specificity level. ============================================================ */ header .gs-nav__logo img[class*="custom-logo"], header .gs-nav__logo .custom-logo, #gs-header img.custom-logo, .gs-nav__logo img { width: auto !important; height: 52px !important; max-height: 52px !important; max-width: 52px !important; min-height: unset !important; aspect-ratio: auto !important; object-fit: contain !important; display: block !important; } @media (min-width: 1024px) { header .gs-nav__logo img[class*="custom-logo"], header .gs-nav__logo .custom-logo, #gs-header img.custom-logo, .gs-nav__logo img { height: 60px !important; max-height: 60px !important; max-width: 60px !important; } } /* ============================================================ PAGE HERO — Shared pattern for Beer, Menu, and other interior pages Scoped to .gs-beer-page and .gs-menu-page body classes to avoid bleeding into homepage or Gutenberg sections. TOKENS USED: matches actual tokens in this file (v4.2.1) --gs-black, --gs-gray-800, --gs-gray-900, --gs-gray-300, --gs-green-600, --gs-green-400, --gs-white ============================================================ */ .gs-beer-page .gs-page-hero, .gs-menu-page .gs-page-hero { position: relative; min-height: 36vh; display: flex; align-items: flex-end; padding: var(--space-16) var(--space-6) var(--space-12); overflow: hidden; background-color: var(--gs-black); background-size: cover; background-position: center; } /* No background image on base — set per modifier */ .gs-beer-page .gs-page-hero--beer { background-image: url('/wp-content/themes/growlerspot/images/beer-hero-bg.jpg'); } .gs-menu-page .gs-page-hero--menu { background-image: url('/wp-content/themes/growlerspot/images/menu-hero-bg.jpg'); } .gs-beer-page .gs-page-hero__overlay, .gs-menu-page .gs-page-hero__overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 55%, rgba(0, 0, 0, 0.2) 100% ); z-index: 1; } .gs-beer-page .gs-page-hero__content, .gs-menu-page .gs-page-hero__content { position: relative; z-index: 2; max-width: 760px; } /* Eyebrow — "Always Rotating", "The Growler Spot" etc */ .gs-beer-page .gs-page-hero .gs-eyebrow, .gs-menu-page .gs-page-hero .gs-eyebrow { display: block; font-family: var(--font-subhead); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--gs-green-400); margin: 0 0 var(--space-3); padding: 0; border: none; background: none; } /* Page title inside hero */ .gs-beer-page .gs-page-hero__title, .gs-menu-page .gs-page-hero__title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: var(--weight-normal); text-transform: uppercase; color: var(--gs-white); line-height: var(--leading-tight); margin: 0 0 var(--space-4); letter-spacing: 0.02em; } /* Sub text below title */ .gs-beer-page .gs-page-hero__sub, .gs-menu-page .gs-page-hero__sub { font-family: var(--font-body); font-size: var(--text-base); color: var(--gs-gray-300); margin: 0; max-width: 520px; line-height: var(--leading-relaxed); } /* ============================================================ BEER PAGE — Stat hero (the "40" big number treatment) ============================================================ */ .gs-beer-hero__stat { display: flex; align-items: baseline; gap: var(--space-4); margin: 0 0 var(--space-4); line-height: 1; } .gs-beer-hero__number { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 10rem); color: var(--gs-green-400); line-height: 0.9; display: block; } .gs-beer-hero__label { font-family: var(--font-subhead); font-size: clamp(1.3rem, 3.5vw, 2rem); font-weight: var(--weight-bold); text-transform: uppercase; color: var(--gs-white); letter-spacing: var(--tracking-wide); line-height: var(--leading-snug); } /* ============================================================ BEER PAGE — To-Go Band (64oz / 32oz fills) ============================================================ */ .gs-togo-band { background-color: var(--gs-black); border-bottom: 2px solid var(--gs-green-600); padding: var(--space-5) var(--space-6); } .gs-togo-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); max-width: var(--container-max); margin-inline: auto; } .gs-togo-item { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .gs-togo-item__size { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--gs-green-400); line-height: 1; } .gs-togo-item__name { font-family: var(--font-subhead); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--gs-gray-300); } .gs-togo-divider { width: 1px; height: 40px; background-color: var(--gs-gray-700); } @media (max-width: 480px) { .gs-togo-divider { display: none; } } .gs-togo-note { font-family: var(--font-body); font-size: var(--text-sm); color: var(--gs-gray-400); text-align: center; margin: 0; line-height: var(--leading-relaxed); } /* ============================================================ BEER PAGE — Tap list section wrapper ============================================================ */ .gs-beer-list-section { background-color: var(--gs-gray-900); padding: var(--space-12) 0 var(--space-16); } /* Section label — left-border accent style */ .gs-section-label { font-family: var(--font-subhead); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--gs-green-400); border-left: 3px solid var(--gs-green-600); padding-left: var(--space-3); margin: 0 0 var(--space-8); display: block; } .gs-section-label--centered { border-left: none; padding-left: 0; text-align: center; border-bottom: 1px solid var(--gs-green-600); padding-bottom: var(--space-3); } /* Untappd embed wrapper */ .gs-untappd-wrapper { background-color: var(--gs-black); border: 1px solid var(--gs-gray-700); border-radius: var(--radius-sm); overflow: hidden; min-height: 300px; } .gs-untappd-wrapper > * { max-width: 100% !important; } /* ============================================================ BEER PAGE — Breweries section ============================================================ */ .gs-breweries-section { position: relative; overflow: hidden; } .gs-breweries-section__bg { background-color: var(--gs-black); background-image: url('/wp-content/themes/growlerspot/images/hops-bg.jpg'); background-size: cover; background-position: center; position: relative; } .gs-breweries-section__overlay { position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.8); z-index: 1; } .gs-breweries-section__content { position: relative; z-index: 2; padding-top: var(--space-16); padding-bottom: var(--space-16); } /* Brewery name grid */ .gs-brewery-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; grid-template-columns: 1fr; } @media (min-width: 600px) { .gs-brewery-list { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .gs-brewery-list { grid-template-columns: repeat(4, 1fr); } } .gs-brewery-list__item { font-family: var(--font-subhead); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--gs-gray-200); text-align: center; padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--gs-gray-800); transition: color var(--transition-base); } .gs-brewery-list__item:hover { color: var(--gs-green-400); } .gs-breweries-note { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gs-gray-500); text-align: center; margin: 0; font-style: italic; } /* ============================================================ SHARED — CTA Band (bottom of Beer page, Menu page, etc.) ============================================================ */ .gs-cta-band { background-color: var(--gs-gray-800); border-top: 3px solid var(--gs-green-600); padding: var(--space-12) var(--space-6); } .gs-cta-band__inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); max-width: var(--container-max); margin-inline: auto; } @media (min-width: 768px) { .gs-cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; } } .gs-cta-band__headline { font-family: var(--font-display); font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: var(--weight-normal); text-transform: uppercase; color: var(--gs-white); margin: 0 0 var(--space-2); letter-spacing: 0.03em; } .gs-cta-band__sub { font-family: var(--font-body); font-size: var(--text-sm); color: var(--gs-gray-400); margin: 0; } /* ============================================================ MENU PAGE — Kitchen hours info banner ============================================================ */ .gs-info-banner { background-color: var(--gs-green-600); padding: var(--space-3) var(--space-6); } .gs-info-banner__text { font-family: var(--font-body); font-size: var(--text-sm); color: var(--gs-white); margin: 0; text-align: center; letter-spacing: 0.02em; } .gs-info-banner__text strong { font-weight: var(--weight-bold); } /* ============================================================ MENU PAGE — Menu sections and item grid ============================================================ */ .gs-menu-sections { padding-top: var(--space-16); padding-bottom: var(--space-8); background-color: var(--gs-gray-900); } .gs-menu-section { margin-bottom: var(--space-16); } /* Section title — green underline divider */ .gs-menu-section__title { font-family: var(--font-subhead); font-size: var(--text-xl); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--gs-white); border-bottom: 2px solid var(--gs-green-600); padding-bottom: var(--space-2); margin: 0 0 var(--space-6); } /* Menu grid: Mobile: single column Tablet+: two columns — reads like a printed menu */ .gs-menu-grid { display: grid; grid-template-columns: 1fr; gap: 2px; } @media (min-width: 768px) { .gs-menu-grid { grid-template-columns: repeat(2, 1fr); gap: 2px var(--space-10); } } /* Individual menu item row */ .gs-menu-item { padding: var(--space-4) 0; border-bottom: 1px solid var(--gs-gray-800); } .gs-menu-item:last-child { border-bottom: none; } .gs-menu-item__header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-1); } .gs-menu-item__name { font-family: var(--font-subhead); font-size: var(--text-base); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--gs-gray-100); margin: 0; line-height: var(--leading-snug); } /* Price in amber — matches beer-abv-color token */ .gs-menu-item__price { font-family: var(--font-display); font-size: var(--text-lg); color: var(--gs-amber); white-space: nowrap; flex-shrink: 0; line-height: 1; } .gs-menu-item__desc { font-family: var(--font-body); font-size: var(--text-sm); color: var(--gs-gray-400); margin: 0; line-height: var(--leading-relaxed); } /* Allergen/disclaimer line at bottom of menu */ .gs-menu-disclaimer { font-family: var(--font-body); font-size: var(--text-xs); color: var(--gs-gray-600); font-style: italic; text-align: center; padding: var(--space-6) 0 var(--space-12); max-width: 680px; margin: 0 auto; } /* ============================================================ PARTY MODE — Disco nav effect Triggered by clicking #gs-party-trigger. When body has class .party-mode, the nav links and selected accents cycle through a rainbow hue rotation. ============================================================ */ /* The secret trigger — sits at the far right of the nav bar */ /* Hop cone easter egg — hidden at rest, desktop only */ #gs-party-trigger { display: none; } @media (min-width: 1024px) { #gs-party-trigger { display: flex; align-items: center; justify-content: center; background: none; border: none; padding: var(--space-2); margin-left: var(--space-4); flex-shrink: 0; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; color: var(--gs-green-600); } #gs-party-trigger:hover { opacity: 0.18; } #gs-party-trigger.is-active { opacity: 1; animation: party-hue 1.2s linear infinite; } } .gs-hop-icon { display: block; width: 24px; height: auto; pointer-events: none; } /* ---- Party mode: nav link rainbow animation ---- */ @keyframes party-hue { 0% { filter: hue-rotate(0deg) saturate(3) brightness(1.2); } 14% { filter: hue-rotate(51deg) saturate(3) brightness(1.2); } 28% { filter: hue-rotate(103deg) saturate(3) brightness(1.2); } 42% { filter: hue-rotate(154deg) saturate(3) brightness(1.2); } 57% { filter: hue-rotate(205deg) saturate(3) brightness(1.2); } 71% { filter: hue-rotate(257deg) saturate(3) brightness(1.2); } 85% { filter: hue-rotate(308deg) saturate(3) brightness(1.2); } 100% { filter: hue-rotate(360deg) saturate(3) brightness(1.2); } } /* Individual link color shift with staggered delays */ body.party-mode .gs-nav__menu > li > a, body.party-mode .gs-nav-mobile__menu li a { animation: party-hue 1.2s linear infinite; text-shadow: 0 0 8px currentColor; } body.party-mode .gs-nav__menu > li:nth-child(1) > a { animation-delay: 0s; } body.party-mode .gs-nav__menu > li:nth-child(2) > a { animation-delay: 0.15s; } body.party-mode .gs-nav__menu > li:nth-child(3) > a { animation-delay: 0.3s; } body.party-mode .gs-nav__menu > li:nth-child(4) > a { animation-delay: 0.45s; } body.party-mode .gs-nav__menu > li:nth-child(5) > a { animation-delay: 0.6s; } body.party-mode .gs-nav__menu > li:nth-child(6) > a { animation-delay: 0.75s; } body.party-mode .gs-nav__menu > li:nth-child(7) > a { animation-delay: 0.9s; } /* Nav bar border also cycles */ body.party-mode .gs-header { animation: party-border 1.2s linear infinite; } @keyframes party-border { 0% { border-bottom-color: hsl(0, 100%, 55%); } 16% { border-bottom-color: hsl(60, 100%, 55%); } 33% { border-bottom-color: hsl(120, 100%, 45%); } 50% { border-bottom-color: hsl(180, 100%, 45%); } 66% { border-bottom-color: hsl(240, 100%, 65%); } 83% { border-bottom-color: hsl(300, 100%, 55%); } 100% { border-bottom-color: hsl(360, 100%, 55%); } } /* Phone button in topbar also joins the party */ body.party-mode .gs-topbar__phone { animation: party-hue 1.2s linear infinite; animation-delay: 0.2s; } /* Respect reduced motion — no animation at all */ @media (prefers-reduced-motion: reduce) { body.party-mode .gs-nav__menu > li > a, body.party-mode .gs-nav-mobile__menu li a, body.party-mode .gs-header, body.party-mode .gs-topbar__phone { animation: none; filter: none; } } @keyframes party-item-color { 0% { background-color: hsl(0, 80%, 40%); border-color: hsl(0, 80%, 40%); color: #fff; } 14% { background-color: hsl(51, 80%, 40%); border-color: hsl(51, 80%, 40%); color: #fff; } 28% { background-color: hsl(103, 80%, 30%); border-color: hsl(103, 80%, 30%); color: #fff; } 42% { background-color: hsl(154, 80%, 30%); border-color: hsl(154, 80%, 30%); color: #fff; } 57% { background-color: hsl(205, 80%, 40%); border-color: hsl(205, 80%, 40%); color: #fff; } 71% { background-color: hsl(257, 80%, 50%); border-color: hsl(257, 80%, 50%); color: #fff; } 85% { background-color: hsl(308, 80%, 40%); border-color: hsl(308, 80%, 40%); color: #fff; } 100% { background-color: hsl(360, 80%, 40%); border-color: hsl(360, 80%, 40%); color: #fff; } } body.party-mode .gs-party-item { animation: party-item-color 1.2s linear infinite; }