/* ============================================================================ IRONWOOD BREWING CO + KITCHEN — v2 assets/css/main.css Global Design System ============================================================================ Mobile-First CSS3 | Cascade Layers | Logical Properties | Fluid Typography HC Web Labs — hcweblabs.com — April 2026 ============================================================================ */ /* ============================================================================ 01. LAYER ORDER DECLARATION Establishes cascade priority before any rules are written. ============================================================================ */ @layer reset, tokens, base, layout, components, utilities; /* ============================================================================ RESPONSIVE BREAKPOINT LADDER — mobile-first, min-width only 320px = base (no media query) · 480 · 640 · 768 · 1024 · 1280 · 1440 ============================================================================ */ /* ============================================================================ 02. RESET ============================================================================ */ @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; } body { min-block-size: 100dvb; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } button { cursor: pointer; border: none; background: none; padding: 0; } fieldset { border: none; padding: 0; } legend { padding: 0; } summary { list-style: none; cursor: pointer; } summary::-webkit-details-marker { display: none; } table { border-collapse: collapse; border-spacing: 0; } /* Remove default iframe border */ iframe { border: 0; } /* Prevent text overflow on pre elements */ pre { overflow: auto; } } /* ============================================================================ 03. DESIGN TOKENS ============================================================================ */ @layer tokens { :root { /* ------------------------------------------------------------------ COLORS — OKLCH Modern perceptually uniform color space. Hex fallbacks declared in @supports block below. ------------------------------------------------------------------ */ /* Brand — Copper / Amber / Gold */ --color-copper: oklch(0.55 0.12 45); --color-copper-dark: oklch(0.45 0.12 45); --color-copper-light: oklch(0.65 0.12 45); --color-amber: oklch(0.68 0.15 75); --color-amber-light: oklch(0.78 0.15 75); --color-amber-dark: oklch(0.58 0.15 75); --color-gold: oklch(0.72 0.13 85); --color-gold-light: oklch(0.82 0.13 85); /* Brand — Wood / Barrel */ --color-barrel: oklch(0.40 0.05 55); --color-barrel-dark: oklch(0.30 0.05 50); --color-barrel-char: oklch(0.18 0.03 50); --color-barrel-light: oklch(0.50 0.05 58); /* Neutrals */ --color-dark: oklch(0.18 0.02 60); --color-dark-mid: oklch(0.25 0.02 58); --color-mid: oklch(0.42 0.02 55); --color-muted: oklch(0.58 0.02 55); --color-subtle: oklch(0.72 0.01 55); --color-cream: oklch(0.96 0.01 85); --color-cream-dark: oklch(0.91 0.02 80); --color-white: oklch(1 0 0); /* Accent */ --color-hops: oklch(0.52 0.11 138); --color-rust: oklch(0.48 0.15 35); --color-rust-dark: oklch(0.38 0.14 33); /* Semantic — Surfaces */ --color-surface: var(--color-white); --color-surface-alt: var(--color-cream); --color-surface-tint: oklch(0.95 0.02 82); /* deeper warm parchment */ --color-surface-raised: var(--color-white); --color-surface-dark: var(--color-dark); --color-surface-darker: var(--color-barrel-char); /* Semantic — Text */ --color-text: var(--color-dark); --color-text-muted: var(--color-muted); --color-text-subtle: var(--color-subtle); --color-text-inverse: var(--color-cream); --color-text-accent: var(--color-amber); /* Semantic — Borders */ --color-border: oklch(0.87 0.01 75); --color-border-strong: oklch(0.75 0.02 65); --color-border-dark: oklch(0.28 0.02 55); --color-border-accent: var(--color-amber); /* State */ --color-success: oklch(0.55 0.14 148); --color-success-bg: oklch(0.96 0.04 148); --color-warning: oklch(0.72 0.17 72); --color-warning-bg: oklch(0.97 0.05 85); --color-error: oklch(0.52 0.20 22); --color-error-bg: oklch(0.97 0.04 22); --color-info: oklch(0.54 0.13 232); --color-info-bg: oklch(0.96 0.04 232); /* ------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------ */ --font-display: 'Bebas Neue', 'Impact', 'Arial Black', sans-serif; --font-heading: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: 'Courier New', Courier, monospace; /* Fluid type scale using clamp(min, preferred, max) */ --text-2xs: clamp(0.625rem, 0.58rem + 0.22vw, 0.6875rem); --text-xs: clamp(0.75rem, 0.70rem + 0.25vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.82rem + 0.28vw, 0.9375rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem); --text-lg: clamp(1.125rem, 1.05rem + 0.38vw, 1.25rem); --text-xl: clamp(1.25rem, 1.10rem + 0.75vw, 1.5rem); --text-2xl: clamp(1.5rem, 1.20rem + 1.50vw, 2rem); --text-3xl: clamp(1.875rem, 1.40rem + 2.40vw, 2.75rem); --text-4xl: clamp(2.25rem, 1.50rem + 3.75vw, 3.75rem); --text-5xl: clamp(3rem, 1.80rem + 6.00vw, 5.5rem); --text-6xl: clamp(3.75rem, 2.00rem + 9.00vw, 7.5rem); /* Letter spacing */ --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.10em; --tracking-widest: 0.16em; /* Line heights */ --leading-none: 1; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; --leading-loose: 1.9; /* ------------------------------------------------------------------ SPACING — 4px base unit ------------------------------------------------------------------ */ --space-px: 1px; --space-0-5: 0.125rem; /* 2px */ --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-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-11: 2.75rem; /* 44px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px */ --space-32: 8rem; /* 128px */ /* Fluid section padding */ --section-pad: clamp(3.5rem, 2.5rem + 5vw, 6.5rem); /* ------------------------------------------------------------------ LAYOUT ------------------------------------------------------------------ */ --container-max: 1200px; --container-max-lg: 1300px; /* 1440px viewport tier */ --container-max-wide: 1440px; --container-max-narrow: 860px; --container-pad: clamp(1rem, 4.5vw, 2rem); --header-height: clamp(64px, 7vw, 80px); /* ------------------------------------------------------------------ BORDERS ------------------------------------------------------------------ */ --border-1: 1px; --border-2: 2px; --border-3: 3px; --border-4: 4px; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ------------------------------------------------------------------ SHADOWS ------------------------------------------------------------------ */ --shadow-xs: 0 1px 2px oklch(0 0 0 / 0.08); --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.10), 0 1px 2px oklch(0 0 0 / 0.06); --shadow-md: 0 4px 8px oklch(0 0 0 / 0.08), 0 2px 4px oklch(0 0 0 / 0.05); --shadow-lg: 0 10px 20px oklch(0 0 0 / 0.10), 0 4px 8px oklch(0 0 0 / 0.05); --shadow-xl: 0 20px 40px oklch(0 0 0 / 0.12), 0 8px 16px oklch(0 0 0 / 0.06); --shadow-2xl: 0 30px 60px oklch(0 0 0 / 0.20); --shadow-inner: inset 0 2px 4px oklch(0 0 0 / 0.08); /* Brand-tinted shadows */ --shadow-copper: 0 6px 20px oklch(0.55 0.12 45 / 0.30), 0 2px 8px oklch(0.55 0.12 45 / 0.15); --shadow-amber: 0 6px 20px oklch(0.68 0.15 75 / 0.28), 0 2px 8px oklch(0.68 0.15 75 / 0.12); /* ------------------------------------------------------------------ TRANSITIONS & EASING ------------------------------------------------------------------ */ --duration-75: 75ms; --duration-100: 100ms; --duration-150: 150ms; --duration-200: 200ms; --duration-300: 300ms; --duration-400: 400ms; --duration-500: 500ms; --duration-700: 700ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-back: cubic-bezier(0.36, 0, 0.66, -0.56); /* ------------------------------------------------------------------ Z-INDEX SCALE ------------------------------------------------------------------ */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-drawer: 400; --z-modal: 500; --z-toast: 600; --z-header: 700; --z-top: 800; /* ------------------------------------------------------------------ GRADIENTS ------------------------------------------------------------------ */ --gradient-copper-amber: linear-gradient( 135deg, var(--color-copper) 0%, var(--color-amber) 100% ); --gradient-amber-gold: linear-gradient( 135deg, var(--color-amber-dark) 0%, var(--color-gold-light) 100% ); --gradient-ipa: linear-gradient( 135deg, var(--color-rust) 0%, var(--color-amber) 100% ); --gradient-dark-warm: linear-gradient( 135deg, var(--color-barrel-char) 0%, var(--color-barrel-dark) 100% ); /* ------------------------------------------------------------------ COMPONENT TOKENS ------------------------------------------------------------------ */ --min-touch: 44px; --input-radius: var(--radius-md); --card-radius: var(--radius-lg); /* ── COMPONENT TOKENS — unified card system ────────────────────────── Every card on every page draws from these. Change once, update all. */ --card-bg: var(--color-surface); --card-border: var(--border-1) solid var(--color-border); --card-pad: clamp(1.25rem, 2vw, 1.75rem); --card-shadow: var(--shadow-md); --card-shadow-hover: var(--shadow-lg); --card-lift: -4px; /* hover translateY */ --media-zoom: 1.05; /* hover image scale */ --media-aspect: 16 / 10; /* default card media ratio */ /* ── TYPOGRAPHY ROLES — semantic sizes, one source of truth ────────── hero > title > subtitle > heading > body > small > caption */ --type-hero: var(--text-5xl); /* page hero titles */ --type-title: var(--text-4xl); /* section titles */ --type-subtitle: var(--text-3xl); /* feature panel titles */ --type-heading: var(--text-xl); /* card & item headings */ --type-body: var(--text-base); --type-small: var(--text-sm); --type-caption: var(--text-xs); /* ── GRID RHYTHM ─────────────────────────────────────────────────── */ --grid-gap: clamp(1.25rem, 2.5vw, 2rem); --grid-gap-lg: clamp(2rem, 3vw, 3rem); --btn-radius: var(--radius-md); } /* ── OKLCH FALLBACK ────────────────────────────────────────────────────── For browsers that don't support oklch() — Safari < 15.4, older Chrome. All values map exactly to the oklch declarations above. ──────────────────────────────────────────────────────────────────────── */ @supports not (color: oklch(0 0 0)) { :root { --color-copper: #a86c3e; --color-copper-dark: #8a582a; --color-copper-light: #c0885a; --color-amber: #b8860b; --color-amber-light: #cc9a1f; --color-amber-dark: #9e720a; --color-gold: #daa520; --color-gold-light: #e8c040; --color-barrel: #5c4d3e; --color-barrel-dark: #44392e; --color-barrel-char: #282018; --color-barrel-light: #7a6655; --color-dark: #2a2a26; --color-dark-mid: #3a3a35; --color-mid: #625e56; --color-muted: #8a8580; --color-subtle: #b0aba4; --color-cream: #f7f4f0; --color-cream-dark: #eae6e0; --color-white: #ffffff; --color-surface-tint: #f0e6d2; --color-hops: #5c8854; --color-rust: #994c26; --color-rust-dark: #7a3c1e; --color-border: #dedad4; --color-border-strong:#c0bab2; --color-border-dark: #403c38; --color-success: #3d8c5a; --color-success-bg: #f0faf4; --color-warning: #c97c0a; --color-warning-bg: #fdf8ed; --color-error: #b03828; --color-error-bg: #fdf2f0; --color-info: #2d6fa8; --color-info-bg: #f0f6fc; } } } /* end @layer tokens */ /* ============================================================================ 04. BASE ============================================================================ */ @layer base { /* ── DOCUMENT ─────────────────────────────────────────────────────────── */ html { scroll-padding-top: calc(var(--header-height) + var(--space-4)); scroll-behavior: smooth; scroll-padding-block-start: var(--header-height); overflow-x: clip; /* prevent horizontal overflow WITHOUT creating a scroll container — overflow-x:hidden here silently breaks position:sticky for every descendant */ } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── BODY ─────────────────────────────────────────────────────────────── */ body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text); background-color: var(--color-surface); overflow-x: clip; /* see html note — hidden kills sticky */ } /* ── VIEW TRANSITIONS ─────────────────────────────────────────────────── */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation: iw-vt-out var(--duration-200) var(--ease-out) both; } ::view-transition-new(root) { animation: iw-vt-in var(--duration-200) var(--ease-in) both; } } @keyframes iw-vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes iw-vt-in { from { opacity: 0; transform: translateY(6px); } } /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); line-height: var(--leading-tight); color: var(--color-dark); font-weight: 600; } h1 { font-size: var(--text-4xl); font-weight: 700; } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); font-weight: 500; } h6 { font-size: var(--text-base);font-weight: 500; } p { line-height: var(--leading-relaxed); color: var(--color-text); } p + p { margin-block-start: var(--space-4); } strong { font-weight: 700; } em { font-style: italic; } small { font-size: var(--text-sm); color: var(--color-text-muted); } /* ── LINKS ────────────────────────────────────────────────────────────── */ a { transition: color var(--duration-150) var(--ease-smooth); } a:hover { color: var(--color-copper); } /* ── FOCUS ────────────────────────────────────────────────────────────── */ :focus-visible { outline: 3px solid var(--color-amber); outline-offset: 3px; border-radius: var(--radius-sm); } :focus:not(:focus-visible) { outline: none; } /* ── IMAGES ───────────────────────────────────────────────────────────── */ img { max-inline-size: 100%; block-size: auto; display: block; } .img-cover { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: center; } .img-contain { inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center; } /* ── SELECTION ────────────────────────────────────────────────────────── */ ::selection { background-color: var(--color-amber); color: var(--color-dark); } /* ── SCROLLBAR ────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: var(--color-barrel-char); } ::-webkit-scrollbar-thumb { background: var(--color-copper); border-radius: var(--radius-full); border: 2px solid var(--color-barrel-char); } ::-webkit-scrollbar-thumb:hover { background: var(--color-amber); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-copper) var(--color-barrel-char); } /* ── HORIZONTAL RULE ──────────────────────────────────────────────────── */ hr { border: none; border-block-start: var(--border-1) solid var(--color-border); margin-block: var(--space-8); } hr.hr--accent { border-block-start-color: var(--color-amber); border-block-start-width: var(--border-2); } } /* end @layer base */ /* ============================================================================ 05. LAYOUT ============================================================================ */ @layer layout { /* ── CONTAINER ────────────────────────────────────────────────────────── */ .container { inline-size: 100%; max-inline-size: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* 1440px+: widen the canvas for large desktops */ @media (min-width: 1440px) { .container { max-inline-size: var(--container-max-lg); } } .container--wide { max-inline-size: var(--container-max-wide); } .container--narrow { max-inline-size: var(--container-max-narrow); } /* ── MAIN CONTENT ─────────────────────────────────────────────────────── */ main { display: block; } /* Pushes content below the fixed header */ .main-offset { padding-block-start: var(--header-height); } /* ── SECTION ──────────────────────────────────────────────────────────── */ .section { padding-block: var(--section-pad); } .section--sm { padding-block: clamp(2rem, 1.5rem + 3vw, 4rem); } .section--lg { padding-block: clamp(5rem, 3rem + 7vw, 9rem); } .section--dark { background-color: var(--color-surface-dark); color: var(--color-text-inverse); } .section--darker { background-color: var(--color-surface-darker); color: var(--color-text-inverse); } .section--alt { background-color: var(--color-surface-alt); } .section--wood { background-color: var(--color-barrel-dark); color: var(--color-text-inverse); } /* ── AUTO GRID ────────────────────────────────────────────────────────── */ .grid { display: grid; gap: var(--space-6); } /* Responsive auto-fit grids using modern min() */ .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } /* Fixed column grids (activate at breakpoint) */ @media (min-width: 768px) { .grid--2-fixed { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .grid--3-fixed { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .grid--4-fixed { grid-template-columns: repeat(4, 1fr); } } /* ── FLEX UTILITIES ───────────────────────────────────────────────────── */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } } /* end @layer layout */ /* ============================================================================ 06. COMPONENTS ============================================================================ */ @layer components { /* ==================================================================== WOOD GRAIN TEXTURE CSS-only — no image required. ==================================================================== */ .wood-texture { background-color: var(--color-barrel); background-image: repeating-linear-gradient( 90deg, transparent, transparent 2px, oklch(0 0 0 / 0.025) 2px, oklch(0 0 0 / 0.025) 4px ), repeating-linear-gradient( 0deg, oklch(0 0 0 / 0.015), oklch(0 0 0 / 0.015) 1px, transparent 1px, transparent 3px ), linear-gradient( 88deg, var(--color-barrel-dark) 0%, var(--color-barrel) 18%, var(--color-barrel-dark) 38%, var(--color-barrel-light)55%, var(--color-barrel-dark) 72%, var(--color-barrel) 88%, var(--color-barrel-dark) 100% ); } /* Charred bottom border effect */ .charred-edge { position: relative; } .charred-edge::after { content: ''; position: absolute; inset-block-end: 0; inset-inline: 0; block-size: 3px; background: linear-gradient( 90deg, var(--color-barrel-char) 0%, oklch(0 0 0 / 0.50) 30%, var(--color-amber-dark) 50%, oklch(0 0 0 / 0.50) 70%, var(--color-barrel-char) 100% ); opacity: 0.70; pointer-events: none; } /* ==================================================================== SECTION HEADER Shared eyebrow + title + description block. ==================================================================== */ .section-header { text-align: center; max-inline-size: 780px; margin-inline: auto; margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); } .section-header--left { text-align: start; margin-inline: 0; margin-block-end: var(--space-4); } .section-header__eyebrow { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--color-amber-dark); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-block-end:var(--space-3); } .section-header__title { font-family: var(--font-display); font-size: var(--type-title); color: var(--color-copper); letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--leading-none); margin-block-end: var(--space-4); } .section-header__title--light { color: var(--color-amber-light); } .section-header__title--cream { color: var(--color-cream); } .section-header__description { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); max-inline-size:640px; margin-inline: auto; } .section-header--left .section-header__description { margin-inline: 0; } .section-header__description--light { color: var(--color-cream); opacity: 0.75; } /* ==================================================================== BUTTONS ==================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding-block: var(--space-3); padding-inline: var(--space-6); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; line-height: var(--leading-none); border-radius: var(--btn-radius); border: var(--border-2) solid transparent; min-block-size: var(--min-touch); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--duration-150) var(--ease-smooth), border-color var(--duration-150) var(--ease-smooth), color var(--duration-150) var(--ease-smooth), transform var(--duration-150) var(--ease-smooth), box-shadow var(--duration-150) var(--ease-smooth); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } /* Primary */ .btn--primary { background: var(--gradient-copper-amber); color: var(--color-white); box-shadow: var(--shadow-copper); } .btn--primary:hover { background: var(--gradient-amber-gold); box-shadow: var(--shadow-amber); color: var(--color-white); } /* Secondary / Outline */ .btn--outline { background: transparent; color: var(--color-copper); border-color: var(--color-copper); } .btn--outline:hover { background: var(--color-copper); color: var(--color-white); } /* Outline on dark backgrounds */ .btn--outline-light { background: transparent; color: var(--color-cream); border-color: var(--color-cream); } .btn--outline-light:hover { background: var(--color-cream); color: var(--color-dark); } /* Ghost — subtle, dark bg */ .btn--ghost { background: oklch(1 0 0 / 0.08); color: var(--color-cream); border-color: oklch(1 0 0 / 0.18); } .btn--ghost:hover { background: oklch(1 0 0 / 0.14); border-color: oklch(1 0 0 / 0.30); color: var(--color-white); } /* Danger */ .btn--danger { background: var(--color-error); color: var(--color-white); } .btn--danger:hover { background: var(--color-rust-dark); color: var(--color-white); } /* Sizes */ .btn--xs { padding-block: var(--space-1); padding-inline: var(--space-3); font-size: var(--text-2xs); min-block-size: 32px; } .btn--sm { padding-block: var(--space-2); padding-inline: var(--space-4); font-size: var(--text-xs); min-block-size: 38px; } .btn--lg { padding-block: var(--space-4); padding-inline: var(--space-8); font-size: var(--text-base); } .btn--xl { padding-block: var(--space-5); padding-inline: var(--space-10); font-size: var(--text-lg); } /* Full width */ .btn--full { inline-size: 100%; } /* Icon-only */ .btn--icon { padding: var(--space-3); inline-size: var(--min-touch); block-size: var(--min-touch); border-radius: var(--radius-md); flex-shrink: 0; } /* Disabled state */ .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; transform: none; } /* Button group */ .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .btn-group--center { justify-content: center; } /* ==================================================================== FORMS ==================================================================== */ .form { display: flex; flex-direction: column; gap: var(--space-5); } .form-row { display: grid; gap: var(--space-4); } @media (min-width: 640px) { .form-row--2 { grid-template-columns: repeat(2, 1fr); } .form-row--3 { grid-template-columns: repeat(3, 1fr); } } .form-group { display: flex; flex-direction: column; gap: var(--space-2); } /* Label */ .form-label { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text); display: block; } .form-label--required::after { content: ' *'; color: var(--color-error); } /* Inputs, selects, textareas */ .form-input, .form-select, .form-textarea { inline-size: 100%; padding-block: var(--space-3); padding-inline: var(--space-4); font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background-color: var(--color-surface); border: var(--border-2) solid var(--color-border); border-radius: var(--input-radius); min-block-size: var(--min-touch); appearance: none; -webkit-appearance: none; transition: border-color var(--duration-150) var(--ease-smooth), box-shadow var(--duration-150) var(--ease-smooth); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-amber); box-shadow: 0 0 0 3px oklch(0.68 0.15 75 / 0.18); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-muted); opacity: 0.65; } /* Error state */ .form-input--error, .form-select--error, .form-textarea--error { border-color: var(--color-error); } .form-input--error:focus, .form-select--error:focus, .form-textarea--error:focus { box-shadow: 0 0 0 3px oklch(0.52 0.20 22 / 0.18); } /* Textarea */ .form-textarea { min-block-size: 130px; resize: vertical; line-height: var(--leading-relaxed); } /* Select arrow — pure CSS, no SVG */ .form-select { background-color: var(--color-surface); background-image: linear-gradient(45deg, transparent 50%, var(--color-amber) 50%), linear-gradient(135deg, var(--color-amber) 50%, transparent 50%); background-position: calc(100% - var(--space-4)) center, calc(100% - calc(var(--space-4) - 5px)) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-inline-end: var(--space-10); cursor: pointer; } /* Dark surface variant */ .form-input--dark, .form-select--dark, .form-textarea--dark { background-color: oklch(1 0 0 / 0.07); border-color: oklch(1 0 0 / 0.15); color: var(--color-cream); } .form-input--dark::placeholder, .form-textarea--dark::placeholder { color: oklch(1 0 0 / 0.40); opacity: 1; } .form-input--dark:focus, .form-select--dark:focus, .form-textarea--dark:focus { border-color: var(--color-amber); box-shadow: 0 0 0 3px oklch(0.68 0.15 75 / 0.18); } /* Hint text */ .form-hint { font-size: var(--text-xs); color: var(--color-text-muted); line-height: var(--leading-snug); } /* Error message */ .form-error { font-size: var(--text-xs); font-weight: 500; color: var(--color-error); line-height: var(--leading-snug); } /* Checkbox / Radio */ .form-check { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; } .form-check__input { appearance: none; -webkit-appearance:none; inline-size: 20px; block-size: 20px; flex-shrink: 0; border: var(--border-2) solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; transition: border-color var(--duration-150) var(--ease-smooth), background var(--duration-150) var(--ease-smooth); } .form-check__input[type="radio"] { border-radius: var(--radius-full); } .form-check__input:checked { background: var(--gradient-copper-amber); border-color: var(--color-copper); /* Pure CSS checkmark — no SVG */ background-image: none; position: relative; } /* Checkmark via ::after pseudo-element */ .form-check__input:checked::after { content: ''; display: block; position: absolute; inset-block-start: 2px; inset-inline-start: 5px; inline-size: 5px; block-size: 10px; border: 2px solid var(--color-white); border-block-start: none; border-inline-start:none; transform: rotate(45deg); } .form-check__input[type="radio"]:checked { background-image: none; background-size: auto; /* Radio dot via box-shadow — no SVG */ box-shadow: inset 0 0 0 3px var(--color-white); } .form-check__label { font-size: var(--text-base); color: var(--color-text); cursor: pointer; line-height: var(--leading-snug); } /* ==================================================================== HEADER & NAVIGATION ==================================================================== */ /* ════════════════════════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════════════════════════ */ .header { position: fixed; inset-block-start: 0; inset-inline: 0; block-size: var(--header-height); z-index: var(--z-header); transition: transform var(--duration-300) var(--ease-smooth); } .header--hidden { transform: translateY(-100%); } /* Wood-grain background */ .header__bg { position: absolute; inset: 0; z-index: var(--z-below); overflow: hidden; } .header__bg::before { content: ''; position: absolute; inset: 0; background-color: var(--color-barrel-dark); background-image: image-set( url('../images/wood-planks-warm.webp') type('image/webp'), url('../images/wood-planks-warm.jpg') type('image/jpeg') ); background-size: cover; background-position: center; } .header__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-barrel-char) 0%, var(--color-amber-dark) 25%, var(--color-amber) 50%, var(--color-amber-dark) 75%, var(--color-barrel-char) 100% ) bottom / 100% 3px no-repeat, oklch(0 0 0 / 0.52); } /* ── Nav wrapper ──────────────────────────────────────────────────────── */ .header__nav { position: relative; z-index: var(--z-raised); display: flex; align-items: center; block-size: 100%; padding-inline: var(--container-pad); max-inline-size: var(--container-max-wide); margin-inline: auto; gap: var(--space-3); min-inline-size: 0; } /* ── Branding ─────────────────────────────────────────────────────────── */ .header__branding { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0; } .header__logo { font-family: var(--font-display); font-size: clamp(1.55rem, 5vw, 1.9rem); white-space: nowrap; color: var(--color-amber); letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--leading-none); text-decoration: none; transition: color var(--duration-150) var(--ease-smooth); } .header__logo:hover { color: var(--color-gold); } .header__tagline { font-family: var(--font-heading); font-size: clamp(0.48rem, 1.4vw, 0.65rem); white-space: nowrap; color: var(--color-cream); letter-spacing: var(--tracking-widest); text-transform: uppercase; opacity: 0.70; line-height: 1; margin-block-start: 2px; } .tagline-accent { color: var(--color-amber); font-style: italic; text-transform: lowercase; letter-spacing: 0.08em; opacity: 0.95; margin-inline-end: 1px; } /* ── Desktop links — hidden mobile-first ─────────────────────────────── */ .nav-links { display: none; align-items: center; gap: 0; list-style: none; flex: 1; justify-content: flex-end; min-inline-size: 0; } .nav-links__item > a { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; color: var(--color-cream); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding-block: var(--space-2); padding-inline: var(--space-2); border-radius: var(--radius-sm); position: relative; text-decoration: none; white-space: nowrap; transition: color var(--duration-150) var(--ease-smooth); } .nav-links__item > a::after { content: ''; position: absolute; inset-block-end: -2px; inset-inline: var(--space-2); block-size: 2px; background: var(--gradient-copper-amber); border-radius: var(--radius-full); transform: scaleX(0); transform-origin: center; transition: transform var(--duration-200) var(--ease-spring); } .nav-links__item > a:hover, .nav-links__item > a.active { color: var(--color-amber); } .nav-links__item > a:hover::after, .nav-links__item > a.active::after { transform: scaleX(1); } /* CTA pill */ .nav-links__cta > a { background: var(--gradient-copper-amber); color: var(--color-white) !important; padding-block: var(--space-2); padding-inline: var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-copper); margin-inline-start: var(--space-1); transition: background var(--duration-150) var(--ease-smooth), transform var(--duration-150) var(--ease-smooth), box-shadow var(--duration-150) var(--ease-smooth); } .nav-links__cta > a::after { display: none; } .nav-links__cta > a:hover { background: var(--gradient-amber-gold); box-shadow: var(--shadow-amber); transform: translateY(-1px); } /* ── Right-side actions ──────────────────────────────────────────────── */ .nav-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Hamburger — visible 320–767, hidden 768+ */ .menu-toggle { display: flex; align-items: center; justify-content: center; inline-size: var(--min-touch); block-size: var(--min-touch); color: var(--color-cream); border-radius: var(--radius-md); border: var(--border-1) solid oklch(1 0 0 / 0.18); background: transparent; cursor: pointer; flex-shrink: 0; padding: 0; transition: color var(--duration-150) var(--ease-smooth), background var(--duration-150) var(--ease-smooth), border-color var(--duration-150) var(--ease-smooth); } .menu-toggle:hover { color: var(--color-amber); background: oklch(1 0 0 / 0.07); border-color: oklch(1 0 0 / 0.28); } .menu-toggle .icon-open, .menu-toggle .icon-close { font-size: 1.1rem; line-height: 1; pointer-events: none; } /* ════════════════════════════════════════════════════════════════════════ NAV BREAKDOWN LADDER 320–767 : brand + hamburger only 768+ : all links visible, ultra-compact 1024+ : comfortable 1280+ : full sizing 1440+ : generous ════════════════════════════════════════════════════════════════════════ */ @media (min-width: 768px) { .nav-links { display: flex; } .menu-toggle { display: none; } .mobile-menu, .mobile-menu-backdrop { display: none; } .header__nav { gap: var(--space-2); } .header__logo { font-size: 1.3rem; } .header__tagline { font-size: 0.48rem; } .nav-links__item > a { font-size: 0.6rem; padding-inline: var(--space-1); } .nav-links__cta > a { font-size: 0.6rem; padding-inline: var(--space-2); } } @media (min-width: 1024px) { .header__nav { gap: var(--space-3); } .header__logo { font-size: 1.65rem; } .header__tagline { font-size: 0.6rem; } .nav-links { gap: var(--space-1); } .nav-links__item > a { font-size: var(--text-xs); padding-inline: var(--space-2); } .nav-links__cta > a { font-size: var(--text-xs); padding-inline: var(--space-3); } } @media (min-width: 1280px) { .header__nav { gap: var(--space-4); } .header__logo { font-size: 1.9rem; } .header__tagline { font-size: 0.72rem; } .nav-links__item > a { font-size: var(--text-sm); padding-inline: var(--space-3); } .nav-links__cta > a { font-size: var(--text-sm); padding-inline: var(--space-5); } } @media (min-width: 1440px) { .header__nav { gap: var(--space-6); } .nav-links { gap: var(--space-2); } } /* ════════════════════════════════════════════════════════════════════════ MOBILE MENU BACKDROP ════════════════════════════════════════════════════════════════════════ */ .mobile-menu-backdrop { position: fixed; inset: 0; background: oklch(0 0 0 / 0.60); z-index: var(--z-overlay); opacity: 0; visibility: hidden; transition: opacity var(--duration-300) var(--ease-smooth), visibility var(--duration-300) var(--ease-smooth); cursor: pointer; } .mobile-menu-backdrop.is-active { opacity: 1; visibility: visible; } /* ════════════════════════════════════════════════════════════════════════ MOBILE MENU DRAWER (320–767 only) ════════════════════════════════════════════════════════════════════════ */ .mobile-menu { will-change: transform; position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(340px, 88vw); z-index: var(--z-drawer); display: flex; flex-direction: column; background-color: var(--color-barrel-dark); background-image: image-set( url('../images/wood-vertical-grain.webp') type('image/webp'), url('../images/wood-vertical-grain.jpg') type('image/jpeg') ); background-size: cover; background-position: center top; isolation: isolate; transform: translateX(100%); transition: transform var(--duration-300) var(--ease-smooth); overflow: hidden; } .mobile-menu::before { content: ''; position: absolute; inset: 0; z-index: var(--z-below); background: oklch(0 0 0 / 0.58); pointer-events: none; } /* Amber left-edge accent */ .mobile-menu::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--gradient-copper-amber); z-index: var(--z-raised); pointer-events: none; } .mobile-menu.is-active { transform: translateX(0); } .mobile-menu__header, .mobile-menu__nav, .mobile-menu__social { position: relative; z-index: var(--z-raised); } /* Header: lockup + close button */ .mobile-menu__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-5); border-block-end: var(--border-1) solid oklch(1 0 0 / 0.10); flex-shrink: 0; } .mobile-menu__logo { font-family: var(--font-display); font-size: clamp(1.5rem, 5vw, 1.9rem); color: var(--color-amber); letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--leading-none); } .mobile-menu__tagline { font-family: var(--font-heading); font-size: 0.56rem; color: var(--color-cream); letter-spacing: var(--tracking-widest); text-transform: uppercase; opacity: 0.60; margin-block-start: 4px; } .mobile-menu__close { display: flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; color: var(--color-cream); background: transparent; border-radius: var(--radius-md); border: var(--border-1) solid oklch(1 0 0 / 0.12); cursor: pointer; padding: 0; flex-shrink: 0; transition: color var(--duration-150) var(--ease-smooth), background var(--duration-150) var(--ease-smooth); } .mobile-menu__close:hover { color: var(--color-amber); background: oklch(1 0 0 / 0.08); } /* Nav list */ .mobile-menu__nav { flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-block: var(--space-3); padding-block-end: calc(var(--space-6) + env(safe-area-inset-bottom, 0px)); padding-inline: var(--space-3); display: flex; flex-direction: column; gap: 2px; list-style: none; } .mobile-menu__nav::-webkit-scrollbar { display: none; } .mobile-menu__link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 500; color: var(--color-cream); letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-md); text-decoration: none; transition: color var(--duration-150) var(--ease-smooth), background var(--duration-150) var(--ease-smooth); } .mobile-menu__link:hover, .mobile-menu__link.active { color: var(--color-amber); background: oklch(1 0 0 / 0.07); } .mobile-menu__link i { inline-size: 20px; text-align: center; font-size: 0.9rem; color: var(--color-copper); opacity: 0.80; flex-shrink: 0; } .mobile-menu__link:hover i, .mobile-menu__link.active i { color: var(--color-amber); opacity: 1; } .mobile-menu__divider { block-size: 1px; background: oklch(1 0 0 / 0.08); margin-block: var(--space-2); margin-inline: var(--space-4); } /* CTA */ .mobile-menu__cta .mobile-menu__link { background: var(--gradient-copper-amber); color: var(--color-white); margin-block-start: var(--space-2); box-shadow: var(--shadow-copper); } .mobile-menu__cta .mobile-menu__link:hover { background: var(--gradient-amber-gold); } .mobile-menu__cta .mobile-menu__link i { color: var(--color-white); opacity: 0.9; } /* Social strip */ .mobile-menu__social { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-start: var(--border-1) solid oklch(1 0 0 / 0.10); flex-shrink: 0; } .mobile-menu__social-link { display: flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; color: oklch(1 0 0 / 0.55); border-radius: var(--radius-full); border: var(--border-1) solid oklch(1 0 0 / 0.12); text-decoration: none; font-size: 0.85rem; transition: color var(--duration-150) var(--ease-smooth), border-color var(--duration-150) var(--ease-smooth), background var(--duration-150) var(--ease-smooth); } .mobile-menu__social-link:hover { color: var(--color-amber); border-color: oklch(0.72 0.13 85 / 0.45); background: oklch(1 0 0 / 0.05); } /* ==================================================================== HERO — BASE Each page's hero overrides background-image via its page CSS. ==================================================================== */ .hero { position: relative; min-block-size: clamp(380px, 60vh, 820px); display: flex; align-items: center; justify-content: center; text-align: center; padding-block-start:calc(var(--header-height) + clamp(1.5rem, 3vw, 2.5rem)); padding-block-end: clamp(2.5rem, 5vw, 5rem); padding-inline: var(--container-pad); overflow: hidden; background-color: var(--color-barrel-char); } .hero--tall { min-block-size: clamp(600px, 85vh, 960px); } .hero--short { min-block-size: clamp(320px, 45vh, 520px); } /* Background image layer */ .hero__bg { position: absolute; inset: 0; z-index: var(--z-base); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Gradient overlay */ .hero__overlay { position: absolute; inset: 0; z-index: var(--z-raised); background: linear-gradient(to bottom, oklch(0 0 0 / 0.60) 0%, oklch(0 0 0 / 0.35) 45%, oklch(0 0 0 / 0.70) 100%); } /* Content sits above overlay */ .hero__content { position: relative; z-index: var(--z-dropdown); max-inline-size: 920px; inline-size: 100%; margin-inline: auto; } .hero__eyebrow { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--color-amber); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-block-end: var(--space-4); } .hero__title { font-family: var(--font-display); font-size: var(--type-hero); color: var(--color-white); text-transform: uppercase; letter-spacing: var(--tracking-wide); line-height: var(--leading-none); margin-block-end: var(--space-5); text-shadow: 0 2px 24px oklch(0 0 0 / 0.55); } .hero__subtitle { font-family: var(--font-heading); font-size: var(--text-lg); color: var(--color-cream); font-weight: 400; letter-spacing: var(--tracking-wider); text-transform: uppercase; opacity: 0.88; margin-block-end: var(--space-8); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } /* ==================================================================== FOOTER ==================================================================== */ .footer { background-color: var(--color-barrel-dark); background-image: url('../images/antique-wood-texture.jpg'); /* JPG fallback */ background-image: -webkit-image-set( url('../images/antique-wood-texture.webp') 1x ); background-image: image-set( url('../images/antique-wood-texture.webp') type('image/webp'), url('../images/antique-wood-texture.jpg') type('image/jpeg') ); background-size: cover; background-position:center top; /* Dark overlay so footer content stays legible */ position: relative; isolation: isolate; color: var(--color-cream); padding-block-start:clamp(3.5rem, 2.5rem + 5vw, 5.5rem); padding-block-end: var(--space-6); padding-inline: var(--container-pad); border-block-start: var(--border-3) solid var(--color-amber); } /* Dark overlay on the wood grain so text is always readable */ .footer::before { content: ''; position: absolute; inset: 0; z-index: var(--z-below); background: linear-gradient( to bottom, oklch(0 0 0 / 0.55) 0%, oklch(0 0 0 / 0.65) 100% ); pointer-events: none; } /* All footer content sits above the overlay */ .footer__inner { position: relative; z-index: var(--z-raised); max-inline-size: var(--container-max-wide); margin-inline: auto; } /* Three-column grid */ .footer__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 3vw, 3.5rem); margin-block-end: clamp(2.5rem, 3vw, 3.5rem); } @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1.2fr 1.6fr; column-gap: clamp(3rem, 5vw, 5.5rem); } } /* Logo */ .footer__logo { font-family: var(--font-display); font-size: clamp(2rem, 3vw, 2.75rem); color: var(--color-amber); letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--leading-none); margin-block-end: var(--space-1); display: block; text-decoration: none; } .footer__tagline { font-family: var(--font-heading); font-size: var(--text-xs); color: var(--color-cream); letter-spacing: var(--tracking-widest); text-transform: uppercase; opacity: 0.60; margin-block-end: var(--space-4); } .footer__description { font-size: var(--text-sm); color: var(--color-cream); opacity: 0.60; line-height: var(--leading-relaxed); margin-block-end: var(--space-5); } /* Social icons */ .footer__social { display: flex; gap: var(--space-3); } .footer__social-link { display: flex; align-items: center; justify-content: center; inline-size: 40px; block-size: 40px; color: var(--color-cream); border: var(--border-1) solid oklch(1 0 0 / 0.16); border-radius: var(--radius-md); font-size: 0.9rem; text-decoration: none; transition: color var(--duration-150) var(--ease-smooth), border-color var(--duration-150) var(--ease-smooth), background var(--duration-150) var(--ease-smooth); } .footer__social-link:hover { color: var(--color-amber); border-color: var(--color-amber); background: oklch(1 0 0 / 0.05); } /* Column headings */ .footer__col-title { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; color: var(--color-amber); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-block-end: var(--space-5); padding-block-end: var(--space-3); border-block-end: var(--border-1) solid oklch(1 0 0 / 0.10); display: block; } /* Contact items */ .footer__contact-item { display: flex; flex-direction: column; gap: var(--space-1); margin-block-end: var(--space-4); } .footer__contact-label { font-family: var(--font-heading); font-size: var(--text-2xs); font-weight: 600; color: var(--color-amber); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .footer__contact-value { font-size: var(--text-sm); color: var(--color-cream); opacity: 0.75; line-height: var(--leading-snug); text-decoration: none; transition: color var(--duration-150) var(--ease-smooth), opacity var(--duration-150) var(--ease-smooth); } a.footer__contact-value:hover { color: var(--color-amber); opacity: 1; } /* Hours list */ .footer__hours { display: flex; flex-direction: column; gap: var(--space-2); } .footer__hours-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-cream); opacity: 0.75; } .footer__hours-day { font-weight: 500; } .footer__hours-time { color: var(--color-amber-light); opacity: 1; } /* Newsletter */ .footer__newsletter { margin-block-start: var(--space-5); } .footer__newsletter-text { font-size: var(--text-sm); color: var(--color-cream); opacity: 0.60; line-height: var(--leading-snug); margin-block-end: var(--space-3); } .footer__newsletter-form { display: flex; gap: var(--space-2); flex-wrap: wrap; } .footer__newsletter-input { flex: 1; min-inline-size: 0; padding-block: var(--space-3); padding-inline: var(--space-4); background: oklch(1 0 0 / 0.07); border: var(--border-1) solid oklch(1 0 0 / 0.14); border-radius: var(--radius-md); color: var(--color-cream); font-size: var(--text-sm); font-family: var(--font-body); min-block-size: var(--min-touch); transition: border-color var(--duration-150) var(--ease-smooth), box-shadow var(--duration-150) var(--ease-smooth); } .footer__newsletter-input::placeholder { color: oklch(1 0 0 / 0.35); opacity: 1; } .footer__newsletter-input:focus { outline: none; border-color: var(--color-amber); box-shadow: 0 0 0 3px oklch(0.68 0.15 75 / 0.16); } .footer__newsletter-btn { padding-block: var(--space-3); padding-inline: var(--space-5); background: var(--gradient-copper-amber); color: var(--color-white); font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; border-radius: var(--radius-md); min-block-size: var(--min-touch); border: none; cursor: pointer; white-space: nowrap; transition: background var(--duration-150) var(--ease-smooth), transform var(--duration-150) var(--ease-smooth); } .footer__newsletter-btn:hover { background: var(--gradient-amber-gold); transform: translateY(-1px); } /* Quick links row */ .footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); padding-block: var(--space-5); border-block: var(--border-1) solid oklch(1 0 0 / 0.08); margin-block-end: var(--space-5); list-style: none; } .footer__link { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 500; color: var(--color-cream); letter-spacing: var(--tracking-wider); text-transform: uppercase; opacity: 0.58; text-decoration: none; transition: color var(--duration-150) var(--ease-smooth), opacity var(--duration-150) var(--ease-smooth); } .footer__link:hover { color: var(--color-amber); opacity: 1; } /* Bottom bar */ .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); } .footer__copyright, .footer__credit { font-size: var(--text-xs); color: var(--color-cream); opacity: 0.40; } .footer__credit a { color: var(--color-amber); opacity: 1; text-decoration: none; transition: opacity var(--duration-150) var(--ease-smooth); } .footer__credit a:hover { opacity: 0.70; } /* ==================================================================== CARDS — see unified component system at end of file ==================================================================== */ /* Tags / badges */ .tag { display: inline-flex; align-items: center; gap: var(--space-1); padding-block: 3px; padding-inline: var(--space-3); font-family: var(--font-heading); font-size: var(--text-2xs); font-weight: 600; letter-spacing: var(--tracking-wider); text-transform: uppercase; border-radius: var(--radius-full); white-space: nowrap; } .tag--amber { background: oklch(0.68 0.15 75 / 0.12); color: var(--color-amber-dark); } .tag--copper { background: oklch(0.55 0.12 45 / 0.10); color: var(--color-copper); } .tag--hops { background: oklch(0.52 0.11 138 / 0.12);color: var(--color-hops); } .tag--dark { background: var(--color-dark); color: var(--color-cream); } .tag--rust { background: oklch(0.48 0.15 35 / 0.12); color: var(--color-rust); } .tag--cream { background: oklch(1 0 0 / 0.15); color: var(--color-cream); } /* ==================================================================== CTA BANNER — SHARED DARK SECTION ==================================================================== */ .cta-banner { position: relative; padding-block: clamp(3.5rem, 3rem + 4vw, 6rem); padding-inline: var(--container-pad); text-align: center; background-color: var(--color-barrel-char); background-image: repeating-linear-gradient( 90deg, transparent, transparent 4px, oklch(0 0 0 / 0.04) 4px, oklch(0 0 0 / 0.04) 8px ); overflow: hidden; } /* Amber accent line top */ .cta-banner::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--gradient-copper-amber); } .cta-banner__inner { position: relative; z-index: var(--z-raised); max-inline-size: 720px; margin-inline: auto; } .cta-banner__eyebrow { display: block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; color: var(--color-amber); letter-spacing: var(--tracking-widest); text-transform: uppercase; margin-block-end: var(--space-3); } .cta-banner__title { font-family: var(--font-display); font-size: var(--text-4xl); color: var(--color-white); text-transform: uppercase; letter-spacing: var(--tracking-wide); line-height: var(--leading-none); margin-block-end: var(--space-4); } .cta-banner__text { font-size: var(--text-base); color: var(--color-cream); opacity: 0.72; line-height: var(--leading-relaxed); margin-block-end: var(--space-8); } .cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; } /* ==================================================================== SCROLL TO TOP ==================================================================== */ .scroll-top { position: fixed; inset-block-end: clamp(1.25rem, 3vw, 2rem); inset-inline-end: clamp(1.25rem, 3vw, 2rem); inline-size: clamp(48px, 6vw, 56px); block-size: clamp(48px, 6vw, 56px); background: var(--gradient-copper-amber); color: var(--color-white); border-radius: var(--radius-full); border: none; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; box-shadow: var(--shadow-copper); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(14px) scale(0.88); transition: opacity var(--duration-300) var(--ease-smooth), visibility var(--duration-300) var(--ease-smooth), transform var(--duration-300) var(--ease-smooth), background var(--duration-150) var(--ease-smooth), box-shadow var(--duration-150) var(--ease-smooth); z-index: var(--z-top); } .scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .scroll-top:hover { background: var(--gradient-amber-gold); box-shadow: var(--shadow-amber); transform: translateY(-3px) scale(1.06); } .scroll-top:active { transform: translateY(0) scale(0.98); } .scroll-top i { transition: transform var(--duration-150) var(--ease-smooth); } .scroll-top:hover i { transform: translateY(-2px); } /* ==================================================================== TOAST NOTIFICATIONS ==================================================================== */ .toast-region { position: fixed; inset-block-end:var(--space-6); inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); z-index: var(--z-toast); pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--space-3); padding-block: var(--space-3); padding-inline: var(--space-5); background: var(--color-dark); color: var(--color-cream); border-radius: var(--radius-full); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; box-shadow: var(--shadow-xl); pointer-events: auto; white-space: nowrap; border-inline-start: var(--border-3) solid var(--color-amber); animation: toast-enter var(--duration-300) var(--ease-spring) forwards; } .toast.is-leaving { animation: toast-leave var(--duration-200) var(--ease-in) forwards; } .toast__icon { color: var(--color-amber); font-size: 1rem; flex-shrink:0; } .toast--success .toast__icon { color: var(--color-success); } .toast--error .toast__icon { color: var(--color-error); } @keyframes toast-enter { from { opacity: 0; transform: translateY(12px) scale(0.94); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toast-leave { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(0.94); } } /* ==================================================================== SKELETON LOADER ==================================================================== */ .skeleton { background: linear-gradient( 90deg, var(--color-cream-dark) 25%, var(--color-cream) 50%, var(--color-cream-dark) 75% ); background-size: 200% 100%; border-radius: var(--radius-sm); animation: skeleton-shimmer 1.6s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ==================================================================== ENTRANCE ANIMATIONS Triggered by IntersectionObserver adding .is-visible ==================================================================== */ .fade-up { opacity: 0; transform: translateY(28px); transition: opacity var(--duration-500) var(--ease-out), transform var(--duration-500) var(--ease-out); } .fade-up.is-visible { opacity: 1; transform: translateY(0); } .fade-left { opacity: 0; transform: translateX(-28px); transition: opacity var(--duration-500) var(--ease-out), transform var(--duration-500) var(--ease-out); } .fade-left.is-visible { opacity: 1; transform: translateX(0); } .fade-right { opacity: 0; transform: translateX(28px); transition: opacity var(--duration-500) var(--ease-out), transform var(--duration-500) var(--ease-out); } .fade-right.is-visible { opacity: 1; transform: translateX(0); } /* Staggered children */ .stagger > * { opacity: 0; transform: translateY(20px); transition: opacity var(--duration-400) var(--ease-out), transform var(--duration-400) var(--ease-out); } .stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(2) { transition-delay: 80ms; opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(3) { transition-delay: 160ms; opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(4) { transition-delay: 240ms; opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(5) { transition-delay: 320ms; opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(6) { transition-delay: 400ms; opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(7) { transition-delay: 480ms; opacity: 1; transform: none; } .stagger.is-visible > *:nth-child(8) { transition-delay: 560ms; opacity: 1; transform: none; } /* ==================================================================== BEER GRADIENT STRIP Rotating beer-color gradients section — sits above the footer on every page. Three variants cycle through: golden pale ale, copper amber, and citrus IPA. ==================================================================== */ .beer-gradient-strip { padding-block: clamp(3rem, 3.5vw, 5rem); padding-inline: var(--container-pad); position: relative; overflow: hidden; text-align: center; } /* ── Golden / Pale Ale ─────────────────────────────────────────── */ .beer-gradient-strip--golden { background: linear-gradient( 135deg, oklch(0.82 0.14 88) 0%, /* pale straw */ oklch(0.76 0.17 80) 35%, /* honey gold */ oklch(0.68 0.15 75) 65%, /* amber */ oklch(0.60 0.14 72) 100% /* deeper amber */ ); } /* ── Amber / Red Ale ───────────────────────────────────────────── */ .beer-gradient-strip--amber { background: linear-gradient( 135deg, oklch(0.62 0.15 52) 0%, /* warm copper */ oklch(0.52 0.16 42) 35%, /* deep copper */ oklch(0.46 0.17 35) 65%, /* rust */ oklch(0.38 0.14 32) 100% /* dark rust */ ); } /* ── IPA / Citrus Golden ───────────────────────────────────────── */ .beer-gradient-strip--ipa { background: linear-gradient( 135deg, oklch(0.78 0.17 78) 0%, /* citrus gold */ oklch(0.70 0.18 70) 30%, /* golden orange */ oklch(0.62 0.16 58) 65%, /* burnished copper */ oklch(0.55 0.13 50) 100% /* rich copper */ ); } .beer-gradient-strip__inner { position: relative; z-index: var(--z-raised); max-inline-size: var(--container-max-narrow); margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .beer-gradient-strip__eyebrow { font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-widest); text-transform: uppercase; /* Dark text on golden/IPA; light on amber */ color: oklch(0 0 0 / 0.55); display: block; } .beer-gradient-strip--amber .beer-gradient-strip__eyebrow { color: oklch(1 0 0 / 0.60); } .beer-gradient-strip__title { font-family: var(--font-display); font-size: var(--text-4xl); letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--leading-none); color: oklch(0 0 0 / 0.75); } .beer-gradient-strip--amber .beer-gradient-strip__title { color: oklch(1 0 0 / 0.92); } .beer-gradient-strip__body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: oklch(0 0 0 / 0.60); max-inline-size: 540px; } .beer-gradient-strip--amber .beer-gradient-strip__body { color: oklch(1 0 0 / 0.72); } /* Buttons invert on amber (dark bg), stay dark on golden/IPA */ .beer-gradient-strip .btn--primary { background: oklch(0 0 0 / 0.70); color: var(--color-white); box-shadow: none; border-color: transparent; } .beer-gradient-strip .btn--primary:hover { background: oklch(0 0 0 / 0.85); box-shadow: none; } .beer-gradient-strip--amber .btn--primary { background: var(--color-amber); color: var(--color-dark); } .beer-gradient-strip--amber .btn--primary:hover { background: var(--color-gold); } .beer-gradient-strip .btn--outline { background: transparent; color: oklch(0 0 0 / 0.70); border-color: oklch(0 0 0 / 0.40); } .beer-gradient-strip .btn--outline:hover { background: oklch(0 0 0 / 0.12); border-color: oklch(0 0 0 / 0.60); } .beer-gradient-strip--amber .btn--outline { color: var(--color-cream); border-color: oklch(1 0 0 / 0.40); } .beer-gradient-strip--amber .btn--outline:hover { background: oklch(1 0 0 / 0.10); border-color: oklch(1 0 0 / 0.60); } } /* end @layer components */ /* ============================================================================ 07. UTILITIES ============================================================================ */ @layer utilities { /* ── ACCESSIBILITY ────────────────────────────────────────────────────── */ .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space:nowrap; border: 0; } /* ── DISPLAY ──────────────────────────────────────────────────────────── */ .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .d-grid { display: grid; } .d-inline { display: inline; } .d-inline-flex { display: inline-flex; } /* Responsive show/hide */ .hide-sm { display: none; } @media (min-width: 640px) { .hide-sm { display: revert; } .show-sm { display: none; } } .hide-md { display: none; } @media (min-width: 768px) { .hide-md { display: revert; } .show-md { display: none; } } .hide-lg { display: none; } @media (min-width: 1024px) { .hide-lg { display: revert; } .show-lg { display: none; } } /* ── TEXT ─────────────────────────────────────────────────────────────── */ .text-start { text-align: start; } .text-center { text-align: center; } .text-end { text-align: end; } .text-copper { color: var(--color-copper); } .text-amber { color: var(--color-amber); } .text-gold { color: var(--color-gold); } .text-cream { color: var(--color-cream); } .text-muted { color: var(--color-text-muted); } .text-white { color: var(--color-white); } .text-dark { color: var(--color-dark); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .font-display { font-family: var(--font-display); } .font-heading { font-family: var(--font-heading); } .font-body { font-family: var(--font-body); } .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-bold { font-weight: 700; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .tracking-wide { letter-spacing: var(--tracking-wide); } .tracking-wider { letter-spacing: var(--tracking-wider); } .tracking-widest { letter-spacing: var(--tracking-widest); } .leading-none { line-height: var(--leading-none); } .leading-tight { line-height: var(--leading-tight); } .leading-normal { line-height: var(--leading-normal); } .leading-relaxed{ line-height: var(--leading-relaxed); } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── BACKGROUND ───────────────────────────────────────────────────────── */ .bg-dark { background-color: var(--color-surface-dark); } .bg-darker { background-color: var(--color-surface-darker); } .bg-alt { background-color: var(--color-surface-alt); } .bg-white { background-color: var(--color-surface); } /* ── SPACING ──────────────────────────────────────────────────────────── */ .mt-0 { margin-block-start: 0; } .mt-4 { margin-block-start: var(--space-4); } .mt-6 { margin-block-start: var(--space-6); } .mt-8 { margin-block-start: var(--space-8); } .mt-12 { margin-block-start: var(--space-12); } .mb-0 { margin-block-end: 0; } .mb-4 { margin-block-end: var(--space-4); } .mb-6 { margin-block-end: var(--space-6); } .mb-8 { margin-block-end: var(--space-8); } /* ── DIMENSIONS ───────────────────────────────────────────────────────── */ .w-full { inline-size: 100%; } .h-full { block-size: 100%; } /* ── ASPECT RATIOS ────────────────────────────────────────────────────── */ .aspect-video { aspect-ratio: 16 / 9; } .aspect-square { aspect-ratio: 1; } .aspect-photo { aspect-ratio: 4 / 3; } .aspect-wide { aspect-ratio: 21 / 9; } .aspect-portrait { aspect-ratio: 3 / 4; } /* ── OVERFLOW ─────────────────────────────────────────────────────────── */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } /* ── POSITION ─────────────────────────────────────────────────────────── */ .relative { position: relative; } .absolute { position: absolute; } .sticky { position: sticky; inset-block-start: calc(var(--header-height) + var(--space-4)); } /* ── BORDER RADIUS ────────────────────────────────────────────────────── */ .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } /* ── SHADOW ───────────────────────────────────────────────────────────── */ .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-xl { box-shadow: var(--shadow-xl); } /* ── OPACITY ──────────────────────────────────────────────────────────── */ .opacity-50 { opacity: 0.5; } .opacity-75 { opacity: 0.75; } /* ── POINTER EVENTS ───────────────────────────────────────────────────── */ .pointer-none { pointer-events: none; } .pointer-auto { pointer-events: auto; } /* ── PRINT ────────────────────────────────────────────────────────────── */ @media print { .header, .footer, .scroll-top, .mobile-menu, .mobile-menu-backdrop, .toast-region { display: none !important; } body { font-size: 12pt; color: #000; } a::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; } } } /* end @layer utilities */ /* ── 480px+: large phones — paired form fields ─────────────────────────── */ @layer components { @media (min-width: 480px) { .form-row--2 { grid-template-columns: repeat(2, 1fr); } } } /* ── 1280px+: desktop air ──────────────────────────────────────────────── */ @layer layout { @media (min-width: 1280px) { .footer__grid { row-gap: clamp(2.5rem, 3vw, 4rem); column-gap: clamp(4rem, 6vw, 7rem); } } } /* ── Inline-style cleanup: component modifiers ─────────────────────────── */ @layer components { /* Light eyebrow for dark sections */ .section-header__eyebrow--light { color: var(--color-amber-light); } /* Spaced button group below content blocks */ .btn-group--gap-top { margin-block-start: clamp(2rem, 3vw, 3rem); } } @layer utilities { .text-amber { color: var(--color-amber); } .link-accent { color: var(--color-copper); font-weight: 600; } } /* ============================================================================ UNIFIED COMPONENT SYSTEM — shared across every page Cards and grids compose from tokens; page CSS adds only content-specific flavor. New pages should reach for these before writing new patterns. ============================================================================ */ @layer components { /* ── CARD ─────────────────────────────────────────────────────────────── */ .card { display: flex; flex-direction: column; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; transition: transform var(--duration-200) var(--ease-smooth), box-shadow var(--duration-200) var(--ease-smooth), border-color var(--duration-200) var(--ease-smooth); } .card:hover { transform: translateY(var(--card-lift)); box-shadow: var(--card-shadow-hover); border-color: var(--color-amber); } @media (prefers-reduced-motion: reduce) { .card:hover { transform: none; } } .card__media { aspect-ratio: var(--media-aspect); overflow: hidden; background: var(--color-surface-alt); } .card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform var(--duration-500) var(--ease-smooth); } .card:hover .card__media img { transform: scale(var(--media-zoom)); } @media (prefers-reduced-motion: reduce) { .card:hover .card__media img { transform: none; } } .card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-pad); flex: 1; min-inline-size: 0; } .card__title { font-family: var(--font-heading); font-size: var(--type-heading); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; line-height: var(--leading-snug); color: var(--color-dark); overflow-wrap: break-word; } .card__text { font-size: var(--type-small); color: var(--color-text-muted); line-height: var(--leading-relaxed); } .card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-3); border-block-start: var(--border-1) solid var(--color-border); } /* Card variants */ .card--glass { background: oklch(1 0 0 / 0.09); border: var(--border-1) solid oklch(1 0 0 / 0.20); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.28); backdrop-filter: blur(12px) saturate(1.4); } .card--static, .card--static:hover { transform: none; box-shadow: none; } /* ── CARD GRIDS — shared responsive presets ───────────────────────────── */ .grid-cards { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .grid-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1280px) { .grid-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1440px) { .grid-cards { gap: var(--grid-gap-lg); } } } /* ============================================================================ BEER FIZZ — rising bubbles on beer-gradient strips ---------------------------------------------------------------------------- Performance notes: two composited pseudo-element layers, each a repeating radial-gradient "bubble sheet" animated with transform-only (GPU) rise. No DOM nodes, no JS, no layout/paint work per frame. Seamless loop: layers are 200% tall and translate exactly -50%. ============================================================================ */ @layer components { .beer-gradient-strip > * { position: relative; z-index: 1; } .beer-gradient-strip::before, .beer-gradient-strip::after { content: ''; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 200%; pointer-events: none; z-index: 0; background-repeat: repeat; animation: fizz-rise linear infinite; } /* Layer 1 — larger, brighter, faster bubbles */ .beer-gradient-strip::before { background-image: radial-gradient(circle 5px at 12% 18%, oklch(1 0 0 / 0.30) 40%, transparent 43%), radial-gradient(circle 3px at 38% 62%, oklch(1 0 0 / 0.24) 40%, transparent 45%), radial-gradient(circle 6px at 64% 34%, oklch(1 0 0 / 0.20) 40%, transparent 43%), radial-gradient(circle 4px at 87% 76%, oklch(1 0 0 / 0.28) 40%, transparent 45%); background-size: 220px 260px; animation-duration: 11s; } /* Layer 2 — smaller, fainter, slower (depth parallax) */ .beer-gradient-strip::after { background-image: radial-gradient(circle 2px at 22% 44%, oklch(1 0 0 / 0.22) 40%, transparent 50%), radial-gradient(circle 3px at 52% 12%, oklch(1 0 0 / 0.16) 40%, transparent 48%), radial-gradient(circle 2px at 74% 68%, oklch(1 0 0 / 0.20) 40%, transparent 50%), radial-gradient(circle 1.5px at 92% 28%, oklch(1 0 0 / 0.18) 40%, transparent 52%); background-size: 160px 200px; animation-duration: 19s; } @keyframes fizz-rise { from { transform: translateY(0); } to { transform: translateY(-50%); } } @media (prefers-reduced-motion: reduce) { .beer-gradient-strip::before, .beer-gradient-strip::after { animation: none; opacity: 0.35; } } } /* ============================================================================ AMBER GLASS — tinted glassmorphism with shimmer ---------------------------------------------------------------------------- Glass reads as amber bottle-glass: warm tint, amber edge, soft copper glow. Shimmer: a skewed light band swept across on hover via transform-only transition on a pseudo-element (GPU cheap, no repaint). ============================================================================ */ @layer components { .card--glass { position: relative; overflow: hidden; background: oklch(0.72 0.13 85 / 0.10); border: var(--border-1) solid oklch(0.78 0.12 80 / 0.30); box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.30), 0 8px 40px oklch(0.55 0.12 45 / 0.28); backdrop-filter: blur(13px) saturate(1.45); -webkit-backdrop-filter: blur(13px) saturate(1.45); } .card--glass::after, .glass-shimmer::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: -60%; inline-size: 45%; background: linear-gradient(105deg, transparent 0%, oklch(1 0 0 / 0.16) 45%, oklch(1 0 0 / 0.05) 55%, transparent 100%); transform: skewX(-14deg) translateX(0); transition: transform var(--duration-700, 700ms) var(--ease-smooth); pointer-events: none; } .card--glass:hover::after, .glass-shimmer:hover::after { transform: skewX(-14deg) translateX(380%); } @media (prefers-reduced-motion: reduce) { .card--glass::after, .glass-shimmer::after { display: none; } } } /* ============================================================================ TYPOGRAPHY FOUNDATION — wrap & overflow settings everything draws from ---------------------------------------------------------------------------- Mobile-first defaults: no element should ever cause horizontal overflow from long words, URLs, or cramped columns. Headings balance their lines; body copy avoids orphans where supported. ============================================================================ */ @layer base { :root { --wrap-heading: balance; /* headings: even line lengths */ --wrap-body: pretty; /* paragraphs: no lonely orphans */ } /* Headings — balanced lines, safe breaking, never overflow */ h1, h2, h3, h4, h5, h6, .card__title, legend { text-wrap: var(--wrap-heading); overflow-wrap: break-word; hyphens: manual; } /* Body copy — pretty wrapping, safe breaking */ p, li, dd, dt, figcaption, blockquote, label, td, th { text-wrap: var(--wrap-body); overflow-wrap: break-word; } /* Links can contain long URLs — break anywhere as a last resort */ a { overflow-wrap: break-word; } /* Controls should never wrap their labels mid-word */ button, .btn, summary { white-space: nowrap; } /* Flex/grid children: allow shrinking below content size so text wraps instead of forcing the track wider (the #1 overflow cause) */ .header__nav > *, .card__body, .grid-cards > * { min-inline-size: 0; } } /* ============================================================================ COUNT-AWARE GRID BEHAVIOR ---------------------------------------------------------------------------- Grids react to how many cards they hold — no lonely orphans: · Exactly 4 cards → 2×2, never 3+1 (capped in 3-column tiers) · Exactly 3 cards in a 2-column tier → inverted pyramid: two on top, the third centered beneath at single-card width · Grids that reach a 3+ column tier with 3 cards release the pyramid back to a single clean row. Progressive enhancement: browsers without :has() keep standard flow. ============================================================================ */ @layer components { /* ── PYRAMID: exactly 3 cards while grids sit in their 2-col tier ─────── */ @media (min-width: 640px) { :is(.grid-cards, .menu-items, .catalog-grid, .seasonal-grid, .merch-grid, .recurring-grid):has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; justify-self: center; inline-size: calc(50% - (var(--grid-gap) / 2)); min-inline-size: 0; } } /* ── 768: merch reaches 3 columns — cap 4→2×2, release pyramid ────────── */ @media (min-width: 768px) { .merch-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } .merch-grid:has(> :nth-child(3):last-child) > :last-child { grid-column: auto; inline-size: auto; justify-self: stretch; } } /* ── 1024: catalog/seasonal/grid-cards--3 reach 3 cols; recurring 4 ───── */ @media (min-width: 1024px) { :is(.catalog-grid, .seasonal-grid, .grid-cards--3):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } :is(.catalog-grid, .seasonal-grid, .grid-cards--3, .recurring-grid):has(> :nth-child(3):last-child) > :last-child { grid-column: auto; inline-size: auto; justify-self: stretch; } } /* ── 1280: menu reaches 3 cols; merch reaches 4 (release its cap) ─────── */ @media (min-width: 1280px) { .menu-items:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } .menu-items:has(> :nth-child(3):last-child) > :last-child { grid-column: auto; inline-size: auto; justify-self: stretch; } .merch-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } } } /* ============================================================================ SECTION RHYTHM — surface alternation + typographic watermarks ============================================================================ */ @layer components { .section--tint { background-color: var(--color-surface-tint); } /* Oversized display word ghosted behind a section's content */ .has-watermark { position: relative; overflow: clip; } .has-watermark > * { position: relative; z-index: 1; } .watermark { position: absolute; z-index: 0; inset-block-start: -0.12em; inset-inline-end: -0.04em; font-family: var(--font-display); font-size: clamp(5rem, 16vw, 14rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; color: oklch(0.55 0.12 45 / 0.06); pointer-events: none; user-select: none; } .watermark--light { color: oklch(1 0 0 / 0.045); } } /* ── COUNT-AWARE ADDENDUM: exactly 5 cards on a 3-col tier → full row of three + centered trailing pair (6-track span technique) ── */ @layer components { @media (min-width: 1024px) { :is(.catalog-grid, .seasonal-grid):has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); } :is(.catalog-grid, .seasonal-grid):has(> :nth-child(5):last-child) > * { grid-column: span 2; } :is(.catalog-grid, .seasonal-grid):has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; } } @media (min-width: 1280px) { .menu-items:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); } .menu-items:has(> :nth-child(5):last-child) > * { grid-column: span 2; } .menu-items:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; } } }