/* ── RESET & BASE ── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: 'Roboto Slab', serif; background: #141414; color: #fff; line-height: 1.6; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } .hidden { display: none !important; } /* ── PREVIEW BANNER ── */ .preview-banner { background: #B28564; color: #000; padding: 8px; text-align: center; font-size: 12px; letter-spacing: 2px; } /* ── TOKENS ── */ :root { --gold: #B28564; --gold-dark: #876043; --black: #0a0a0a; --dark: #141414; --dark2: #1c1c1c; --mid: #f5f4f0; --white: #fff; --text-muted: #555; --text-faint: #444; --border-dark: #222; --max-w: 1200px; } /* ── SEASONAL THEMES ── */ /* Each theme overrides --gold and --gold-dark on ; all accent-colored elements inherit the new value automatically (buttons, hovers, italics, etc.). Toggled via siteSettings.theme in src/_data/siteSettings.json. */ .theme-fourth-of-july { --gold: #e63946; --gold-dark: #c1121f; } .theme-halloween { --gold: #e87722; --gold-dark: #c45c0a; } .theme-christmas { --gold: #2a9d51; --gold-dark: #1e7a3c; } /* ── ANNOUNCEMENT BANNER ── */ /* Shown at the top of every page when banner.enabled=true in siteSettings.json. Hidden by default via [hidden]; banner.js removes the attribute when the current date falls within the configured start/end window. padding-top offsets the text below the fixed nav; gradient keeps the nav zone transparent so the nav renders against the dark background (not gold). The gold only appears for the text strip below the nav. Nav (z-index 1000) sits above naturally — no z-index contest needed. */ .site-banner { background: linear-gradient(to bottom, transparent 62px, var(--gold) 62px); color: #000; text-align: center; padding: 12px 48px; padding-top: 74px; /* nav 62px + 12px internal top padding */ font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; position: relative; } @media (max-width: 600px) { .site-banner { padding: 10px 16px; padding-top: 64px; /* nav 54px + 10px internal top padding */ background: linear-gradient(to bottom, transparent 54px, var(--gold) 54px); font-size: 12px; letter-spacing: 1px; } } /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; padding: 20px 48px; transition: background 0.3s, padding 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; } nav.scrolled { background: rgba(10,10,10,0.97); padding: 14px 48px; border-bottom-color: var(--border-dark); backdrop-filter: blur(8px); } .nav-logo { font-size: 14px; font-weight: 600; letter-spacing: 3px; color: #fff; text-transform: uppercase; text-decoration: none; } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; transition: color 0.2s; } .nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); } .nav-toggle { display: none; } /* ── BUTTONS ── */ .btn { display: inline-block; padding: 14px 38px; border: 1px solid #fff; color: #fff; text-decoration: none; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; transition: all 0.3s; font-family: 'Roboto Slab', serif; cursor: pointer; background: transparent; } .btn:hover { background: var(--gold); border-color: var(--gold); color: #000; } .btn.btn-gold { background: var(--gold); border-color: var(--gold); color: #000; } .btn.btn-gold:hover { background: transparent; color: var(--gold); } /* ── TYPOGRAPHY HELPERS ── */ .section-label { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; font-weight: 400; } .section-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 4vw, 50px); font-weight: 700; line-height: 1.1; margin-bottom: 24px; } .body-text { font-size: 15px; font-weight: 300; line-height: 1.85; color: var(--text-muted); margin-bottom: 16px; } .gold-italic { color: var(--gold); font-style: italic; } .sig-name { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; margin-top: 28px; color: var(--gold); } /* ── HERO ── */ .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; overflow: hidden; } .hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.45; } .hero-bg--home { background-image: url('/assets/images/hero-bg.5830c990.webp'); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.88) 40%, rgba(0,0,0,0.15) 100%); } .hero-content { position: relative; padding: 0 48px; max-width: 660px; } .hero-supertitle { font-size: 11px; letter-spacing: 4px; color: var(--gold); text-transform: uppercase; margin-bottom: 20px; font-weight: 400; } .hero-title { font-family: 'Playfair Display', serif; font-size: clamp(52px, 8vw, 96px); font-weight: 900; line-height: 0.9; color: #fff; text-transform: uppercase; margin-bottom: 28px; } .hero-title em { color: var(--gold); font-style: italic; } .hero-sub { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.55); margin-bottom: 44px; letter-spacing: 0.5px; line-height: 1.6; } /* PAGE HERO (inner pages) */ .page-hero { position: relative; height: 50vh; min-height: 320px; display: flex; align-items: center; overflow: hidden; } .page-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.4; } .page-hero-bg--brewery { background-image: url('/assets/images/brewery-interior.622a02de.webp'); } .hero-title--page { font-size: clamp(40px, 6vw, 72px); } .page-hero-content { position: relative; padding: 0 48px; } /* ── FEATURE GLASS ── */ .feature-glass { background: #fff; padding: 80px 48px; display: flex; justify-content: center; align-items: center; } .feature-glass img { max-width: 560px; width: 100%; } /* ── BREWMASTER ── */ .brewmaster { background: var(--mid); padding: 100px 48px; } .brewmaster-inner { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .photo-wrap { position: relative; overflow: visible; /* add this */ } .photo-wrap img { width: 100%; aspect-ratio: 3/4; object-fit: cover; position: relative; z-index: 1; } .photo-accent { position: absolute; inset: 0; /* full size, matching the photo */ translate: 16px 16px; /* shift it down-right for the offset effect */ width: auto; height: auto; /* override any inherited sizing */ border: 2px solid var(--gold); z-index: 0; pointer-events: none; } .section-title { color: #181818; } /* ── BLOG GRID ── */ .blog { background: var(--dark); padding: 100px 48px; } .blog-header { max-width: var(--max-w); margin: 0 auto 48px; display: flex; justify-content: space-between; align-items: baseline; } .blog-header h2 { font-size: 11px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); font-weight: 400; } .blog-header a { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; } .blog-header a:hover { color: var(--gold); } .blog-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .blog-grid--listing { grid-template-columns: repeat(3, 1fr); } .post { background: var(--dark2); overflow: hidden; } .post-link { display: block; text-decoration: none; color: inherit; } .post-img-wrap { overflow: hidden; } .post img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: brightness(0.75) sepia(0.1); transition: transform 0.6s, filter 0.4s; } .post:hover img { transform: scale(1.05); filter: brightness(0.95) sepia(0); } .post-body { padding: 24px 28px 28px; } .post-cat { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } .post-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 12px; } .post-excerpt { font-size: 13px; font-weight: 300; color: #666; line-height: 1.6; margin-bottom: 12px; } .post-date { font-size: 11px; color: var(--text-faint); letter-spacing: 1px; } .post-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 2rem; } .post-gallery-item { margin: 0; overflow: hidden; border-radius: 4px; } .post-gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.3s ease; } .post-gallery-item img:hover { transform: scale(1.03); } /* Zoomable images — post gallery + inline post body */ .post-gallery-item img, .post-single-body img { cursor: zoom-in; } /* ── LIGHTBOX ── */ .lightbox-overlay { display: none; position: fixed; inset: 0; z-index: 2000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; cursor: zoom-out; } .lightbox-overlay.open { display: flex; } .lightbox-img { max-width: 90vw; max-height: 90vh; object-fit: contain; box-shadow: 0 8px 60px rgba(0,0,0,0.6); cursor: default; } .lightbox-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: #fff; font-size: 36px; line-height: 1; padding: 8px 12px; cursor: pointer; opacity: 0.7; } .lightbox-close:hover, .lightbox-close:focus { opacity: 1; outline: none; } @media (max-width: 600px) { .lightbox-img { max-width: 95vw; max-height: 80vh; } } /* Blog listing page */ .blog-listing { background: var(--dark); padding: 80px 48px; } .blog-listing-inner { max-width: var(--max-w); margin: 0 auto; } .blog-empty { padding: 80px 0; text-align: center; color: #555; font-weight: 300; } /* ── SINGLE POST ── */ .post-single { background: var(--dark); min-height: 100vh; } .post-single--flush { padding-top: 0; } .post-single-hero { height: 60vh; min-height: 400px; overflow: hidden; } .post-single-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.7; display: block; } .blog--related { padding-top: 60px; } .post-single-inner { max-width: 760px; margin: 0 auto; padding: 60px 24px 80px; } .post-single-header { margin-bottom: 40px; border-bottom: 1px solid var(--border-dark); padding-bottom: 32px; } .post-single-title { font-family: 'Playfair Display', serif; font-size: clamp(32px, 5vw, 56px); font-weight: 700; line-height: 1.1; margin: 12px 0 16px; } .post-single-description { white-space: pre-line; margin-bottom: 16px; } .post-single-meta { font-size: 12px; color: #555; letter-spacing: 1px; } .post-single-body { font-size: 16px; font-weight: 300; line-height: 1.9; color: rgba(255,255,255,0.8); } .post-single-body h2 { font-family: 'Playfair Display', serif; font-size: 28px; margin: 40px 0 16px; } .post-single-body h3 { font-family: 'Playfair Display', serif; font-size: 22px; margin: 32px 0 12px; } .post-single-body p { margin-bottom: 20px; } .post-single-body img { width: 100%; margin: 32px 0; } .post-single-body a { color: var(--gold); text-underline-offset: 3px; } .post-single-footer { margin-top: 60px; padding-top: 40px; border-top: 1px solid var(--border-dark); } /* Share */ .post-share { background: #111; padding: 48px; } .post-share-inner { max-width: 760px; margin: 0 auto; } .share-links { display: flex; gap: 12px; margin-top: 16px; } .share-btn { padding: 10px 24px; border: 1px solid var(--border-dark); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; color: #888; transition: all 0.2s; } .share-btn:hover { border-color: var(--gold); color: var(--gold); } /* ── PHOTO STRIP ── */ .photo-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .strip-img { overflow: hidden; aspect-ratio: 1; } .strip-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.75); transition: filter 0.4s, transform 0.5s; } .strip-img:hover img { filter: brightness(1); transform: scale(1.05); } /* ── MAP ── */ .map-section { position: relative; } .map-wrap { position: relative; height: 520px; } #map { width: 100%; height: 100%; background: #e8e4dc; } .map-card { position: absolute; top: 50%; left: 80px; transform: translateY(-50%); background: #fff; padding: 32px 36px; min-width: 260px; z-index: 10; box-shadow: 0 8px 40px rgba(0,0,0,0.18); } .map-card-tag { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .map-card h3 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #181818; margin-bottom: 20px; line-height: 1.2; } .map-detail { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; } .map-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; } .map-detail p { font-size: 13px; font-weight: 300; color: var(--text-muted); line-height: 1.5; } .map-detail a { font-size: 13px; color: var(--gold); text-decoration: none; } /* ── BEER CAROUSEL ── */ .beer-section { background: var(--black); padding: 120px 48px; overflow: hidden; } .beer-section-inner { max-width: var(--max-w); margin: 0 auto; } .beer-header { text-align: center; margin-bottom: 64px; } .beer-section-title { font-family: 'Playfair Display', serif; font-size: clamp(36px, 5vw, 56px); font-weight: 700; line-height: 1.1; color: #fff; margin-bottom: 12px; } .beer-section-sub { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.45); letter-spacing: 0.5px; } .beer-carousel { position: relative; } .beer-carousel-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; } .beer-carousel-track::-webkit-scrollbar { display: none; } .beer-card { flex: 0 0 calc(33.333% - 16px); min-width: 280px; scroll-snap-align: start; background: var(--dark2); border: 1px solid var(--border-dark); overflow: hidden; transition: border-color 0.3s, transform 0.4s; } .beer-card:hover { border-color: var(--gold-dark); transform: translateY(-4px); } .beer-card-img { position: relative; overflow: hidden; } .beer-card-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; filter: brightness(0.7) saturate(0.9); transition: filter 0.5s, transform 0.6s; } .beer-card:hover .beer-card-img img { filter: brightness(0.9) saturate(1); transform: scale(1.05); } .beer-card-badge { position: absolute; bottom: 12px; right: 12px; background: var(--gold); color: #000; font-size: 11px; font-weight: 600; letter-spacing: 1px; padding: 5px 10px; text-transform: uppercase; } .beer-card-body { padding: 28px; } .beer-card-style { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-weight: 400; } .beer-card-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; color: #fff; line-height: 1.2; margin-bottom: 12px; } .beer-card-desc { font-size: 13px; font-weight: 300; color: #666; line-height: 1.7; margin-bottom: 20px; } .beer-card-stats { display: flex; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border-dark); } .beer-stat { font-size: 11px; color: #555; letter-spacing: 1px; text-transform: uppercase; } .beer-stat strong { color: var(--gold); font-weight: 600; margin-right: 4px; } .beer-stat-divider { width: 1px; height: 14px; background: var(--border-dark); } /* Carousel controls */ .beer-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 40px; } .beer-carousel-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-dark); background: transparent; color: #666; cursor: pointer; transition: all 0.2s; } .beer-carousel-btn:hover { border-color: var(--gold); color: var(--gold); } .beer-carousel-dots { display: flex; gap: 8px; } .beer-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #444; background: transparent; cursor: pointer; transition: all 0.3s; padding: 0; } .beer-dot.active { background: var(--gold); border-color: var(--gold); } .beer-card.off-tap { opacity: 0.4; } .beer-card.off-tap .beer-card-name { text-decoration: line-through; } /* ── TRUB TOOLTIP ── */ .trub-tip { position: relative; cursor: help; border-bottom: 1px dashed rgba(178,133,100,0.5); } .trub-tip-bubble { display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); background: #1c1c1c; border: 1px solid #B28564; color: #ccc; font-family: 'Roboto Slab', serif; font-size: 12px; font-weight: 300; font-style: normal; line-height: 1.6; letter-spacing: 0; text-transform: none; white-space: normal; width: 240px; padding: 12px 14px; pointer-events: none; z-index: 100; } .trub-tip-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #B28564; } .trub-tip:hover .trub-tip-bubble, .trub-tip:focus .trub-tip-bubble { display: block; } /* Flip below the word when the fixed nav would overlap the top of the bubble. JS in main.js toggles this class on mouseenter/focus. */ .trub-tip-bubble--below { bottom: auto; top: calc(100% + 10px); } .trub-tip-bubble--below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #B28564; } @media (max-width: 600px) { .trub-tip-bubble { width: 220px; max-width: calc(100vw - 40px); left: 50%; right: auto; transform: translateX(-50%); } } /* ── CONTACT FORM ── */ .contact-section { padding: 100px 48px; background: var(--dark2); } .contact-section-inner { max-width: 680px; margin: 0 auto; } .contact-tag { font-size: 10px; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .contact-title { font-size: clamp(28px, 4vw, 42px); font-weight: 300; margin-bottom: 12px; } .contact-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 48px; } .contact-form { display: flex; flex-direction: column; gap: 20px; } .contact-form label { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-faint); display: block; margin-bottom: 8px; } .contact-form input, .contact-form textarea { width: 100%; background: #111; border: 1px solid #2a2a2a; color: #fff; padding: 14px 16px; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s; } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--gold); } .contact-form textarea { min-height: 140px; resize: vertical; } .contact-form input[type="file"] { padding: 12px 16px; font-size: 13px; color: rgba(255,255,255,.7); cursor: pointer; } .contact-form input[type="file"]::file-selector-button { background: #2a2a2a; color: #e8e4dc; border: none; padding: 8px 14px; margin-right: 12px; font-family: inherit; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } .contact-form input[type="file"]::file-selector-button:hover { background: var(--gold); color: #000; } .form-hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .label-optional { color: var(--text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .contact-submit { align-self: flex-start; padding: 14px 36px; background: var(--gold); color: #fff; border: none; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: background 0.2s; margin-top: 12px; margin-bottom: 12px; } .contact-submit:hover { background: var(--gold-dark); } .contact-submit:disabled { opacity: 0.6; cursor: not-allowed; } .contact-msg { font-size: 13px; padding: 12px 16px; } .contact-msg--success { background: #0f1f0f; border: 1px solid #2a5c2a; color: #7fc77f; } .contact-msg--error { background: #1f0f0f; border: 1px solid #5c2a2a; color: #c77f7f; } /* ── HOURS ── */ /* Block + fit-content so the pill sits on its own line (stacked above the "Our Beer" button) rather than inline next to it, while keeping the click target tight to the pill rather than the full hero width. */ .hero-hours { display: block; width: fit-content; margin: 12px 0 20px; text-decoration: none; } .hours-today { display: inline-block; font-size: 13px; letter-spacing: .06em; padding: 5px 12px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.75); transition: border-color .2s, color .2s; } .hours-today--open { border-color: var(--gold); color: var(--gold); } .hours-today--loading { opacity: 0; } .hero-hours:hover .hours-today, .hero-hours:focus-visible .hours-today { border-color: var(--gold); color: var(--gold); } .hours-schedule { margin: 0; padding: 0; } .hours-row { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; padding: 3px 0; } .hours-row dt { color: rgba(255,255,255,.55); white-space: nowrap; } /* Keep the time on one line so "4pm-9pm" never breaks after the en-dash at narrow widths; the row wraps the whole time below the day if truly cramped. */ .hours-row dd { margin: 0; color: #fff; white-space: nowrap; } .map-detail--hours { align-items: flex-start; } .map-detail--hours .hours-row dt { color: rgba(255,255,255,.55); } .map-card .hours-row dt { color: var(--text-muted); } .map-card .hours-row dd { color: #181818; } /* ── JOB POSTINGS ── */ .jobs-section { padding: 64px 24px; background: #111; } .jobs-inner { max-width: 760px; margin: 0 auto; } .job-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 24px; } .job-card { border: 1px solid rgba(255,255,255,.08); padding: 24px 28px; } .job-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .job-head h3 { margin: 0; font-size: 18px; color: #fff; font-weight: 400; } .job-meta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); white-space: nowrap; } .job-body { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.7; } .job-body p { margin: 0 0 12px; } .job-body p:last-child { margin-bottom: 0; } /* Give the rendered Markdown room to breathe - section headings as gold labels with generous top spacing, comfortable list spacing - so postings don't read as a crowded wall of text. */ .job-body h4 { margin: 30px 0 12px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 400; } .job-body > h4:first-child { margin-top: 0; } .job-body h5 { margin: 20px 0 8px; font-size: 12px; letter-spacing: .03em; color: rgba(255,255,255,.9); font-weight: 600; } .job-body ul { margin: 0 0 16px; padding-left: 18px; } .job-body li { margin: 0 0 7px; line-height: 1.6; } .job-body li:last-child { margin-bottom: 0; } .job-body strong { color: #fff; font-weight: 600; } .contact-form select { width: 100%; background: #111; border: 1px solid #2a2a2a; color: #fff; padding: 14px 16px; font-family: inherit; font-size: 14px; outline: none; transition: border-color 0.2s; appearance: none; } .contact-form select:focus { border-color: var(--gold); } /* ── FOOTER ── */ footer { background: var(--black); padding: 60px 48px 40px; border-top: 1px solid var(--border-dark); } .footer-inner { max-width: var(--max-w); margin: 0 auto 48px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; } .footer-brand-name { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: #fff; margin-bottom: 6px; } .footer-tagline { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; } .footer-about { font-size: 13px; font-weight: 300; color: var(--text-muted); line-height: 1.7; max-width: 280px; } .footer-col h4 { font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; } .footer-col a, .footer-col p { display: block; font-size: 13px; font-weight: 300; color: #666; text-decoration: none; line-height: 2.2; transition: color 0.2s; } .footer-col a:hover { color: var(--gold); } .footer-bottom { max-width: var(--max-w); margin: 0 auto; padding-top: 28px; border-top: 1px solid #1a1a1a; display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 11px; color: #333; letter-spacing: 1px; } /* ── MAILING LIST SIGNUP ── */ .mailing-list-section { margin-top: 60px; background: var(--dark2); padding: 80px 48px; text-align: center; border-top: 1px solid #222; } .mailing-list-inner { max-width: 640px; margin: 0 auto; } .mailing-list-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(28px, 4vw, 40px); color: #fff; margin-bottom: 12px; } .mailing-list-sub { color: #aaa; font-size: 15px; margin-bottom: 32px; } .mailing-list-form { display: flex; flex-direction: column; align-items: center; gap: 16px; } .mailing-list-form > button[type="submit"] { margin-top: 12px; margin-bottom: 12px; } .mailing-list-fields { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 480px; margin: 0 auto; } .mailing-list-fields input { width: 100%; background: #141414; border: 1px solid #333; color: #e8e4dc; padding: 12px 16px; font-family: 'Roboto Slab', serif; font-size: 14px; outline: none; transition: border-color 0.2s; } .mailing-list-fields input:focus { border-color: var(--gold); } .mailing-list-fields input::placeholder { color: #555; } .mailing-list-msg { font-size: 13px; min-height: 18px; } .mailing-list-msg.success { color: #7cbb6e; } .mailing-list-msg.error { color: #e07070; } .mailing-list-fine { font-size: 11px; color: #444; margin-top: 16px; letter-spacing: 0.5px; } .mailing-list-fine a { color: var(--gold); text-decoration: none; } .mailing-list-fine a:hover { text-decoration: underline; } /* ── RESPONSIVE ── */ @media (max-width: 960px) { nav { padding: 16px 24px; } nav.scrolled { padding: 12px 24px; } .site-banner { padding-top: 66px; background: linear-gradient(to bottom, transparent 54px, var(--gold) 54px); } /* nav 54px + 12px internal top padding */ .nav-links { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(10,10,10,0.97); padding: 16px 24px; gap: 0; } .nav-links.open { display: flex; } .nav-links li a { padding: 12px 0; display: block; border-bottom: 1px solid #1e1e1e; font-size: 13px; } .nav-toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-toggle span { display: block; width: 22px; height: 1px; background: #fff; transition: all 0.3s; } .beer-card { flex: 0 0 calc(50% - 12px); } .hero-content { padding: 0 24px; } .brewmaster-inner { grid-template-columns: 1fr; gap: 40px; } .blog-grid { grid-template-columns: 1fr; } .blog-grid--listing { grid-template-columns: 1fr 1fr; } .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; } .map-card { left: 20px; right: 20px; min-width: unset; } .photo-strip { grid-template-columns: repeat(2, 1fr); } .post-single-inner { padding: 40px 20px 60px; } } @media (max-width: 600px) { .beer-card { flex: 0 0 calc(100% - 8px); min-width: unset; } .beer-section { padding: 80px 24px; } .hero { min-height: 100svh; } .blog-grid--listing { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .blog { padding: 60px 24px; } .brewmaster { padding: 60px 24px; } .feature-glass { padding: 40px 24px; } .map-wrap { height: 400px; } .map-card { top: auto; bottom: 20px; transform: none; left: 16px; right: 16px; } /* Reduce horizontal padding so Turnstile's 300px-minimum widget fits without overflowing the viewport. At 48px padding (desktop default) a 375px phone has only 279px content width — the widget clips and creates a horizontal scroll that looks like a side panel. 24px padding gives 327px, enough room. */ .mailing-list-section { margin-top: 40px; padding: 60px 24px; } .mailing-list-form { width: 100%; } .mailing-list-fields { max-width: 100%; } /* Prevent any remaining overflow from creating a horizontal scrollbar */ .mailing-list-section { overflow-x: hidden; } .contact-form input, .contact-form textarea { font-size: 16px; } }