/* ============================================================================= Wine Brew and You — Core Stylesheet Table of contents: 1. CSS Custom Properties (Design Tokens) 2. Reset & Base 3. Typography 4. Layout & Utilities 5. Buttons 6. Header & Navigation 7. Footer 8. Homepage: Featured Categories 9. Homepage: About / Value Props 10. Homepage: Latest Posts / Post Grid 11. Animations 12. Responsive ========================================================================== */ /* ----------------------------------------------------------------------- 0. Local Fonts -------------------------------------------------------------------- */ @font-face { font-family: 'Feeling Passionate'; src: url('../fonts/feeling-passionate.woff2') format('woff2'), url('../fonts/Feeling Passionate Personal Use Only.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } /* ----------------------------------------------------------------------- 1. CSS Custom Properties (Design Tokens) -------------------------------------------------------------------- */ :root { /* Brand palette */ --color-primary: #bf1a2c; /* Deep Wine Red */ --color-primary-dark: #971521; /* Hover/active state for primary */ --color-secondary: #845232; /* Rich Earth Brown */ --color-accent: #b2b0b0; /* Sleek Gray */ --color-white: #ffffff; --color-dark: #1f1f1f; /* Deep dark gray for text */ --color-dark-soft: #3a3a3a; --color-bg-light: #f9f6f5; /* Subtle warm off-white for section backgrounds */ --color-border: #e6e1e0; /* Typography */ --font-heading: 'Feeling Passionate', 'Playfair Display', Georgia, serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Layout */ --container-width: 1280px; --container-padding: clamp(1.25rem, 4vw, 3rem); --radius: 6px; --radius-lg: 14px; /* Motion */ --transition-fast: 0.2s ease; --transition-base: 0.35s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1); } /* ----------------------------------------------------------------------- 2. Reset & Base -------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Defensive backstop against horizontal scroll — content this theme doesn't fully control (e.g. the Campaign Monitor newsletter embed in the footer) has already caused this once by rendering wider than the viewport. This doesn't fix an overflow's root cause on its own — that's still handled per-component — it just stops any future one from making the whole page scroll sideways. Set here on specifically, not : overflow on turns it into its own scroll container, which is a well-known way to break .site-header's position: sticky. */ overflow-x: hidden; } body { margin: 0; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--color-dark); background-color: var(--color-white); font-weight: 400; -webkit-font-smoothing: antialiased; /* Sticky footer: ensures the footer always sits at the bottom */ display: flex; flex-direction: column; min-height: 100vh; } #page.site { display: flex; flex-direction: column; flex: 1; } .site-main { flex: 1; } img { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); } ul, ol { list-style: none; margin: 0; padding: 0; } button { font-family: inherit; cursor: pointer; } /* Accessibility helpers */ .screen-reader-text { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .skip-link { position: absolute; top: -100px; left: 1rem; background: var(--color-dark); color: var(--color-white); padding: 0.75rem 1.25rem; border-radius: var(--radius); z-index: 10000; transition: top var(--transition-fast); } .skip-link:focus { top: 1rem; left: -9999px; left: 1rem; } /* ----------------------------------------------------------------------- 3. Typography -------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); /* Feeling Passionate only ships a single (regular) weight — 600 here would make the browser synthesize a fake bold, which distorts decorative/ display faces like this one. */ font-weight: 400; line-height: 1.2; color: var(--color-dark); margin: 0 0 0.6em; letter-spacing: -0.01em; } h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); } h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); } h3 { font-size: clamp(1.375rem, 2.5vw, 1.75rem); } p { margin: 0 0 1.25em; } .section-heading { margin-bottom: 1.5rem; } .section-heading--center { text-align: center; margin-inline: auto; margin-bottom: 3rem; } .section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; } .section-heading-row .section-heading { margin-bottom: 0; } /* ----------------------------------------------------------------------- 4. Layout & Utilities -------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-padding); } .container--narrow { max-width: 800px; } /* Generic page header (index, archives, search, content pages) */ .page-header { margin-bottom: clamp(2rem, 5vw, 3rem); } .page-title { margin-bottom: 0; } .archive-description { max-width: 65ch; margin-top: 0.75rem; color: var(--color-dark-soft); } .page-links { margin-top: 2rem; font-weight: 600; } section { padding-block: clamp(3rem, 8vw, 6rem); } .site-main.front-page > section:first-of-type { padding-top: 0; padding-bottom: 0; } /* ----------------------------------------------------------------------- 5. Buttons -------------------------------------------------------------------- */ .wby-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; padding: 0.95rem 2.25rem; border: 1.5px solid transparent; border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base); white-space: nowrap; } .wby-button:hover, .wby-button:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(31, 31, 31, 0.35); } .wby-button--primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } .wby-button--primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-white); } .wby-button--outline { background-color: transparent; border-color: currentColor; color: var(--color-dark); } .wby-button--outline:hover { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); } .wby-button--small { padding: 0.55rem 1.4rem; font-size: 0.85rem; } /* ----------------------------------------------------------------------- 6. Header & Navigation -------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 1000; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } /* `filter`/`backdrop-filter` on an ancestor quietly makes that ancestor the containing block for any `position: fixed` descendant, instead of the viewport — which was silently confining the mobile slide-out menu (a fixed-position element inside this header) to the header bar's own ~150px height rather than the full screen. Drop the blur while the menu is open so the drawer is fixed to the viewport as intended; the header bar is fully covered by the drawer/backdrop at that point anyway, so losing the blur for that moment is invisible. */ body.wby-nav-open .site-header { backdrop-filter: none; } /* Utility bar — search toggle, social icons, phone number, edge to edge */ .site-header__bar { background-color: var(--color-dark); color: rgba(255, 255, 255, 0.85); } .site-header__bar-inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 1.25rem; width: 100%; padding-block: 0.5rem; padding-left: clamp(5rem, 10vw, 8rem); padding-right: clamp(2.5rem, 5vw, 5rem); font-size: 0.85rem; } .site-header__phone { display: inline-flex; align-items: center; gap: 0.5rem; color: rgba(255, 255, 255, 0.85); font-weight: 600; transition: color var(--transition-fast); } .site-header__phone:hover { color: var(--color-white); } .site-header__phone svg { width: 16px; height: 16px; flex-shrink: 0; } .site-header__social { display: flex; align-items: center; gap: 1rem; } .site-header__social a { display: inline-flex; color: rgba(255, 255, 255, 0.75); transition: color var(--transition-fast); } .site-header__social a:hover { color: var(--color-white); } .site-header__social svg { width: 18px; height: 18px; } /* Main row — full width, padded to align the logo with the hero slide heading. Desktop: the logo is taken out of flow and centered absolutely on the full bar width (see .site-branding below), so it's genuinely centered regardless of what's in the side groups. The two nav halves are `flex: 1` — each claims exactly half of the row, so their shared inner edge sits at the same true center the logo is pinned to, with each half's own items pushed to hug that edge (menu items end up right next to the logo, "spanning out" from it). Actions (cart/inquire — search lives in the utility bar above, see .site-header__search-toggle) is ALSO taken out of flow and pinned to the right edge — if it stayed a normal flex item, its width would eat into the right nav's `flex: 1` share only, shifting the nav's center-split left of the logo's true center. The mobile-only nav (#site-navigation, full unsplit menu behind the hamburger toggle) collapses this back to a simple two-item row — see the ≤768px rules below, which also put actions back in normal flow. */ .site-header__inner { position: relative; display: flex; align-items: center; min-height: 84px; width: 100%; /* Symmetric — this used to be left-heavy (clamp(5rem,10vw,8rem) vs clamp(2.5rem,5vw,5rem)) to line the left-aligned logo up with the hero heading's indent. Now that the logo is centered, that asymmetry actively breaks the centering: flex layout splits space based on the CONTENT box (i.e., after this padding is subtracted), so unequal left/right padding shifts the nav-halves' shared boundary away from the logo's true (padding-independent) center — which is exactly why the two sides looked uneven. */ padding-inline: clamp(1.25rem, 2.5vw, 2.5rem); } .site-header__split-nav { display: flex; align-items: center; flex: 1 1 0; min-width: 0; } .site-header__split-nav--left { justify-content: flex-end; /* Leaves clear room on each side of the centered logo (up to 264px / 16.5rem wide, see .site-branding img) — half that is 8.25rem, so this needs to stay at least that much to avoid overlap. Fixed rather than responsive: the logo itself doesn't shrink at any desktop width, so scaling this down on narrower desktop/tablet widths would just reintroduce the overlap it exists to prevent. */ padding-right: 10rem; } .site-header__split-nav--right { justify-content: flex-start; padding-left: 10rem; } .site-header__actions { position: absolute; top: 50%; right: clamp(2.5rem, 5vw, 5rem); transform: translateY(-50%); z-index: 1; display: flex; align-items: center; gap: 0.75rem; } /* Lives in the dark utility bar (.site-header__bar) alongside the social icons and phone number — solid white plus its own translucent-white circle backdrop, deliberately more opaque than the muted rgba(255,255,255,.75/.85) used for those, so it reads as the one actionable button in that row rather than just another icon. */ .site-header__search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); color: var(--color-white); cursor: pointer; transition: background-color var(--transition-fast); } .site-header__search-toggle:hover { background-color: rgba(255, 255, 255, 0.3); } .site-header__search-toggle svg { width: 16px; height: 16px; } .site-header__search { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--color-white); border-bottom: 1px solid var(--color-border); box-shadow: 0 16px 32px -16px rgba(31, 31, 31, 0.2); padding: 1.25rem clamp(2.5rem, 5vw, 5rem); } .site-header__search[hidden] { display: none; } .site-header__search .search-form { max-width: none; width: 100%; } /* Centered on the full width of .site-header__inner (its containing block), independent of the nav/actions content on either side — see the .site-header__inner comment above. Reverts to normal, in-flow left-aligned positioning on mobile (≤768px), where the layout is a simple two-item row instead. */ .site-branding { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } .site-branding .site-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 400; color: var(--color-dark); letter-spacing: 0.02em; } .site-branding img { max-height: 67px; /* 56px + 20% */ width: auto; /* Safety cap so an unusually wide uploaded logo can't grow past the buffer the nav halves leave clear for it (see .site-header__split-nav--left/--right padding). Also scaled +20%. */ max-width: 264px; } /* #site-navigation (the full, unsplit menu behind the hamburger toggle) is mobile-only — hidden by default, shown at ≤1300px below alongside the split-nav halves being hidden. */ .main-navigation { display: none; align-items: center; } .primary-menu { display: flex; align-items: center; gap: 1.5rem; /* reduced back down after the menu grew significantly */ } .primary-menu a { position: relative; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-dark); padding: 0.4rem 0; } .primary-menu a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: var(--color-primary); transition: width var(--transition-base); } .primary-menu a:hover, .primary-menu a:focus-visible { color: var(--color-primary); } .primary-menu a:hover::after, .primary-menu a:focus-visible::after { width: 100%; } .primary-menu .current-menu-item > a { color: var(--color-primary); } .primary-menu .current-menu-item > a::after { width: 100%; } /* Submenu indicator — small chevron on items with children */ .primary-menu .menu-item-has-children > a { padding-right: 1.2em; } .primary-menu .menu-item-has-children > a::before { content: ''; position: absolute; right: 0; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform var(--transition-fast); } .primary-menu .menu-item-has-children:hover > a::before, .primary-menu .menu-item-has-children:focus-within > a::before { transform: translateY(-30%) rotate(-135deg); } /* Sub-menus */ .primary-menu li { position: relative; } .primary-menu ul { position: absolute; top: calc(100% + 14px); left: 0; min-width: 220px; background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: 0 16px 40px -16px rgba(31, 31, 31, 0.2); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s; z-index: 100; } /* Shown state is driven by JS (see main.js) rather than raw :hover — the 14px gap above is empty space with no element in it, so plain :hover on the
  • is lost the instant the pointer leaves the parent link, well before it reaches the submenu below. main.js debounces the close with a real timer instead, which reliably survives crossing that gap. :focus-within is kept as-is for keyboard users tabbing between links, since that has no equivalent "gap" problem. */ .primary-menu li.is-open > ul, .primary-menu li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s; } .primary-menu ul a { display: block; padding: 0.6rem 0.9rem; border-radius: var(--radius); } .primary-menu ul a::after { display: none; } .primary-menu ul a:hover { background-color: var(--color-bg-light); } /* Mobile menu toggle */ .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; border: none; background: transparent; padding: 0; } .menu-toggle__bar { display: block; width: 24px; height: 2px; background-color: var(--color-dark); transition: transform var(--transition-base), opacity var(--transition-base); margin-inline: auto; } /* Locks background scroll while the mobile slide-out menu is open (see main.js, which toggles this on alongside .is-open on the nav). */ body.wby-nav-open { overflow: hidden; } /* Header cart / inquire */ .site-header__cart { display: flex; align-items: center; } /* The header "Inquire" button reuses .wby-button--outline (shared with other outline buttons elsewhere), but scoped to this specific spot it should default to solid black/white and invert on hover — the opposite of that shared class's own default. */ .site-header__cart .wby-button--outline { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); } .site-header__cart .wby-button--outline:hover { background-color: var(--color-white); border-color: var(--color-dark); color: var(--color-dark); } .cart-icon { position: relative; display: inline-flex; color: var(--color-dark); transition: color var(--transition-fast); } .cart-icon:hover { color: var(--color-primary); } .cart-icon__count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: var(--color-white); background-color: var(--color-primary); border-radius: 50%; padding: 0 4px; } /* ----------------------------------------------------------------------- 7. Footer -------------------------------------------------------------------- */ /* Background image lives directly on .site-footer itself (rather than a separate absolutely-positioned inset:0 div tracking its height) so it's structurally guaranteed to always cover the element's full, actual height — including .site-footer__bottom — no matter how tall the content above it grows (e.g. after the newsletter form was added). Only the color overlay (which needs its own opacity, independent of the image beneath it) remains a separate div. */ .site-footer { position: relative; background-color: var(--color-dark); background-image: var(--footer-bg-url, none); background-size: cover; background-position: center; color: var(--color-white); margin-top: clamp(3rem, 8vw, 6rem); overflow: hidden; } /* Fixed-85%-opacity color overlay on top of the background image (Site Settings → Footer Information → Footer Background Image / Footer Overlay Color) — only rendered in the markup when an image is set. Overlay opacity is intentionally fixed (not editable) per spec — only its color is. */ .site-footer__overlay { position: absolute; inset: 0; background-color: var(--footer-overlay-color, var(--color-dark)); opacity: 0.85; z-index: 0; pointer-events: none; } .site-footer__top { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: clamp(2.5rem, 6vw, 4rem); } .footer-brand { display: flex; flex-direction: column; gap: 1.5rem; } .footer-site-title { font-family: var(--font-heading); color: var(--color-white); font-size: 1.5rem; font-weight: 400; letter-spacing: 0.02em; margin: 0; } .footer-logo img { max-height: 105px; width: auto; } .site-footer a { color: var(--color-white); } .site-footer a:hover { color: var(--color-white); } .footer-menu { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } /* Social icons row in footer brand column */ .footer-social { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; } .footer-social a { display: inline-flex; color: var(--color-white); transition: color var(--transition-fast); } .footer-social a:hover { color: var(--color-white); } .footer-social svg { width: 20px; height: 20px; } /* Address + hours column */ .footer-info { display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 2rem; align-items: start; } .footer-info__label { /* Rendered as

    in footer.php, so it inherits font-family: var(--font-heading) from the global heading rule unless overridden here — body font reads better at this size/weight than the decorative Feeling Passionate heading face. */ font-family: var(--font-body); font-size: 1.2rem; /* 0.75rem + 60% */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-white); margin: 0 0 0.75rem; } .footer-info__address { font-style: normal; line-height: 1.8; color: var(--color-white); margin: 0; } .footer-hours { margin: 0; } .footer-hours__row { display: flex; justify-content: space-between; gap: 1rem; padding-block: 0.35rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.875rem; } .footer-hours__row:last-child { border-bottom: none; } .footer-hours__day { font-weight: 600; color: var(--color-white); white-space: nowrap; } .footer-hours__time { color: var(--color-white); margin: 0; text-align: right; white-space: nowrap; } /* Newsletter signup — full-width row, below the brand/info columns. Campaign Monitor's "unstyled" embed still ships its own nested
    ...