/* Theme Name: The Bell in Scona Theme URI: https://thebellinscona.ca Author: Brandsmith Author URI: https://brandsmith.ca Description: Custom WordPress theme for The Bell in Scona — brewpub, brewery, and The Bell Room venue in Old Strathcona, Edmonton. Built by Brandsmith. Content is editable via the WordPress admin (Pages + Advanced Custom Fields) and the Menus screen. Version: 1.5.3 Requires at least: 6.0 Requires PHP: 7.4 License: Proprietary — © Brandsmith / The Bell in Scona Text Domain: bell-in-scona */ /* ============================================================ FONTS ============================================================ */ @font-face{font-family:'Museo Sans';src:url('assets/fonts/MuseoSans-500.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Museo Sans';src:url('assets/fonts/MuseoSans-500-Italic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap;} @font-face{font-family:'Museo Sans';src:url('assets/fonts/MuseoSans-700.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Museo Sans';src:url('assets/fonts/MuseoSans-900.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;} @font-face{font-family:'Museo Slab';src:url('assets/fonts/MuseoSlab-500.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;} /* ============================================================ PALETTE ============================================================ */ :root{ --bell-navy:#1B3055; --bell-gold:#B08243; --bell-gold-dk:#9a6f38; --bell-gold-alt:#C89A2E; --bell-cream:#FAF9F2; --bell-ink:#2C2C2C; } /* ============================================================ BASE ============================================================ */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family:'Museo Sans',sans-serif; color:var(--bell-ink); background:var(--bell-cream); -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; } a{ color:inherit; } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } /* ============================================================ BUTTONS — hover colour swaps (were runtime style-hover in the Claude build; recreated here as real CSS :hover rules) ============================================================ */ .bis-btn{ display:inline-block; font-family:'Museo Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; border-radius:0; cursor:pointer; } .bis-btn-gold{ color:#fff; background:var(--bell-gold); padding:15px 32px; transition:background .2s ease; } .bis-btn-gold:hover{ background:var(--bell-gold-dk); } .bis-btn-outline-light{ color:#fff; border:1.5px solid rgba(250,249,242,0.7); padding:13.5px 32px; transition:background .2s ease,color .2s ease; } .bis-btn-outline-light:hover{ background:#fff; color:var(--bell-navy); } .bis-btn-outline-navy{ color:var(--bell-navy); border:1.5px solid var(--bell-navy); padding:12.5px 28px; transition:background .2s ease,color .2s ease; } .bis-btn-outline-navy:hover{ background:var(--bell-navy); color:#fff; } /* "On tap only" roundel on beer cans that aren't canned yet */ .bis-ontap-badge{ position:absolute; top:2%; right:-12%; width:clamp(48px,4.9vw,70px); height:clamp(48px,4.9vw,70px); border-radius:50%; background:var(--badge-bg,var(--bell-gold)); border:1.5px solid var(--badge-ring,#fff); box-shadow:0 4px 10px rgba(43,44,44,0.3); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0 8%; box-sizing:border-box; transform:rotate(-8deg); font-family:'Museo Sans',sans-serif; font-weight:900; text-transform:uppercase; font-size:clamp(9px,0.94vw,12px); line-height:1; letter-spacing:0.01em; color:#fff; } .bis-ontap-badge span{ white-space:nowrap; } /* Our Beer page runs the brighter brewery gold on cream */ .bis-ontap-badge--brewery{ --badge-bg:#C98812; --badge-ring:var(--bell-cream); } /* ============================================================ NAV ============================================================ */ .bis-header{ position:sticky; top:0; z-index:100; background:var(--bell-cream); border-bottom:1px solid rgba(27,48,85,0.12); } .bis-nav{ max-width:1440px; margin:0 auto; min-height:78px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,2.5vw,32px); gap:20px; } .bis-logo{ text-decoration:none; display:flex; align-items:center; flex:none; } .bis-logo img{ height:34px; width:auto; display:block; } /* Brewery / Venue lockups are stacked marks, so they sit taller than the wordmark */ .bis-logo img.bis-logo-tall{ height:58px; } @media (max-width:900px){ .bis-logo img.bis-logo-tall{ height:46px; } } .bis-nav-links{ display:flex; align-items:center; gap:22px; } .bis-nav-item{ position:relative; display:flex; align-items:center; align-self:stretch; } .bis-nav-link{ font-family:'Museo Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#1a1a1a; text-decoration:none; padding:6px 0 4px; border-bottom:2px solid transparent; transition:border-color .2s ease, opacity .2s ease; white-space:nowrap; display:inline-flex; align-items:center; } .bis-nav-link:hover{ border-bottom-color:rgba(200,154,46,0.55); } .bis-nav-item.current-menu-item > .bis-nav-link, .bis-nav-item.current-menu-parent > .bis-nav-link{ border-bottom:2px solid var(--bell-gold-alt); } .bis-caret{ margin-left:5px; font-size:9px; vertical-align:middle; } .bis-dropdown{ position:absolute; top:100%; left:50%; transform:translateX(-50%); min-width:206px; background:var(--bell-cream); border:1px solid rgba(27,48,85,0.14); box-shadow:0 14px 30px rgba(12,16,26,0.16); padding:8px 0; display:flex; flex-direction:column; z-index:120; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease; } .bis-nav-item:hover > .bis-dropdown{ opacity:1; visibility:visible; pointer-events:auto; animation:bellDropIn .24s cubic-bezier(.22,.61,.36,1) both; } .bis-dropdown a{ font-family:'Museo Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:#1a1a1a; text-decoration:none; padding:11px 24px; white-space:nowrap; transition:background .15s ease, color .15s ease; } .bis-dropdown a:hover{ color:var(--bell-gold); } @keyframes bellDropIn{ from{ opacity:0; transform:translateX(-50%) translateY(-6px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } } .bis-nav-cta{ display:flex; align-items:center; gap:12px; flex:none; } .bis-cta-book{ font-family:'Museo Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:var(--bell-gold); padding:12px 24px; text-decoration:none; transition:background .2s ease; } .bis-cta-book:hover{ background:var(--bell-gold-dk); } .bis-cta-event{ font-family:'Museo Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--bell-navy); background:transparent; border:1.5px solid var(--bell-navy); padding:10.5px 24px; text-decoration:none; transition:background .2s ease,color .2s ease; } .bis-cta-event:hover{ background:var(--bell-navy); color:#fff; } /* mobile nav */ .bis-hamburger{ background:none; border:none; padding:8px; cursor:pointer; display:none; flex-direction:column; gap:5px; flex:none; } .bis-hamburger span{ display:block; width:24px; height:2px; background:var(--bell-navy); } .bis-mobile-panel{ position:fixed; inset:0; z-index:200; background:var(--bell-navy); flex-direction:column; padding:22px clamp(24px,6vw,40px); display:none; } .bis-mobile-panel.open{ display:flex; } .bis-mobile-top{ display:flex; align-items:center; justify-content:space-between; height:48px; } .bis-mobile-brand{ display:flex; align-items:center; gap:12px; } .bis-mobile-brand img{ height:30px; width:auto; } .bis-mobile-brand span{ font-family:'Museo Sans',sans-serif; font-weight:900; font-size:17px; letter-spacing:0.04em; color:var(--bell-cream); } .bis-mobile-close{ background:none; border:none; color:var(--bell-cream); font-size:30px; line-height:1; cursor:pointer; padding:4px 8px; } .bis-mobile-links{ display:flex; flex-direction:column; gap:2px; margin-top:44px; } .bis-mobile-links a{ font-family:'Museo Sans',sans-serif; font-size:18px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--bell-cream); text-decoration:none; padding:16px 0; border-bottom:1px solid rgba(250,249,242,0.12); } .bis-mobile-links a.child{ font-size:14px; font-weight:500; color:rgba(250,249,242,0.72); padding:13px 0 13px 20px; border-bottom:1px solid rgba(250,249,242,0.08); } .bis-mobile-cta{ display:flex; flex-direction:column; gap:14px; margin-top:36px; } .bis-mobile-cta a{ text-align:center; font-family:'Museo Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; text-decoration:none; padding:15px; } .bis-mobile-cta .book{ color:#fff; background:var(--bell-gold-alt); } .bis-mobile-cta .event{ color:var(--bell-cream); border:1.5px solid var(--bell-cream); padding:13.5px; } /* 980-1279px: seven top-level items plus two CTAs don't fit at laptop widths, so tighten the nav rather than dropping to the hamburger. Without this the header needs ~1250px and anything narrower gets a horizontal scrollbar. */ @media (min-width:980px) and (max-width:1279px){ .bis-nav{ gap:12px; padding-left:clamp(14px,1.6vw,20px); padding-right:clamp(14px,1.6vw,20px); } .bis-nav-links{ gap:14px; } .bis-nav-link{ font-size:12px; letter-spacing:0.06em; } .bis-dropdown a{ font-size:12px; padding:10px 18px; } .bis-nav-cta{ gap:8px; } .bis-cta-book{ font-size:12px; letter-spacing:0.03em; padding:11px 14px; } .bis-cta-event{ font-size:12px; letter-spacing:0.03em; padding:9.5px 14px; } .bis-logo img{ height:30px; } .bis-logo img.bis-logo-tall{ height:48px; } } /* 980-1099px specifically: the venue/brewery lockups are wider than the wordmark, so squeeze a little further at the very bottom of the desktop-nav range. */ @media (min-width:980px) and (max-width:1099px){ .bis-nav{ gap:10px; padding-left:12px; padding-right:12px; } .bis-nav-links{ gap:10px; } .bis-nav-link{ font-size:11.5px; letter-spacing:0.04em; } .bis-nav-cta{ gap:6px; } .bis-cta-book{ padding:11px 11px; } .bis-cta-event{ padding:9.5px 11px; } .bis-logo img{ height:28px; } .bis-logo img.bis-logo-tall{ height:40px; } } @media (max-width:979px){ .bis-nav-links, .bis-nav-cta{ display:none; } .bis-hamburger{ display:flex; } } /* ============================================================ HOMEPAGE — "Three Ways In" card hover zoom (was runtime --bell-z; native CSS custom-property inheritance) ============================================================ */ .bis-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; min-height:clamp(420px,46vw,560px); padding:0 24px 46px; text-decoration:none; overflow:hidden; } .bis-card .bis-card-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(var(--bell-z,1)); transition:transform .7s cubic-bezier(.22,.61,.36,1); } .bis-card:hover{ --bell-z:1.07; } .bis-card .bis-card-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.74) 100%); pointer-events:none; } .bis-card-title{ position:relative; z-index:2; font-family:'Museo Sans',sans-serif; font-weight:900; text-transform:uppercase; color:#fff; font-size:clamp(26px,3.2vw,40px); letter-spacing:0.01em; line-height:1; margin-bottom:16px; } .bis-card-sub{ position:relative; z-index:2; font-family:'Museo Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--bell-cream); border-bottom:1px solid var(--bell-gold); padding-bottom:6px; } /* ============================================================ BELL ROOM SLIDER (reimplemented as plain JS + CSS; was a Claude runtime component) ============================================================ */ .bis-slider{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; background:#0e1a30; } .bis-slider-track{ display:flex; height:100%; transition:transform .7s ease; } .bis-slider-track img{ flex:none; width:100%; height:100%; object-fit:cover; object-position:center; } .bis-slider-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.5); border:1px solid rgba(250,249,242,0.4); color:#fff; cursor:pointer; transition:background .2s ease; z-index:2; font-size:22px; line-height:1; } .bis-slider-arrow:hover{ background:var(--bell-gold); } .bis-slider-arrow.prev{ left:16px; } .bis-slider-arrow.next{ right:16px; } .bis-slider-dots{ position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; gap:10px; z-index:2; } .bis-slider-dots button{ width:16px; height:3px; border:none; padding:0; cursor:pointer; background:rgba(250,249,242,0.45); transition:all .25s ease; } .bis-slider-dots button.active{ width:26px; background:var(--bell-gold); } /* ============================================================ OUR BEER — tasting-notes carousel ============================================================ */ .bis-beer-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid rgba(40,41,41,0.18); color:#282929; font-size:22px; line-height:1; cursor:pointer; transition:background .2s ease,color .2s ease; } .bis-beer-arrow:hover{ background:#282929; color:#fff; } .bis-beer-arrow.prev{ left:-6px; } .bis-beer-arrow.next{ right:-6px; } .bis-beer-dot{ width:11px; height:11px; border-radius:999px; border:none; padding:0; cursor:pointer; background:rgba(40,41,41,0.22); transition:all .25s ease; } .bis-beer-dot.active{ width:28px; background:#C98812; } /* ============================================================ THE BREWPUB — daily specials day selector ============================================================ */ .bis-day-tab{ position:relative; font-family:'Museo Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#342714; background:transparent; border:1.5px solid rgba(52,39,20,0.28); border-radius:0; padding:11px 18px; cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease; } .bis-day-tab.active{ background:#342714; color:#fff; border-color:#342714; } .bis-day-dot{ position:absolute; top:6px; right:8px; width:6px; height:6px; border-radius:50%; background:#C3862B; } /* ============================================================ MENUS — sticky tab bar ============================================================ */ .bis-menu-tab{ font-family:'Museo Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:rgba(250,249,242,0.66); background:transparent; border:none; border-bottom:3px solid transparent; padding:18px 4px; cursor:pointer; white-space:nowrap; transition:color .2s ease, border-color .2s ease; } .bis-menu-tab:hover{ color:rgba(250,249,242,0.9); } .bis-menu-tab.active{ color:#fff; border-bottom-color:#C3862B; } .bis-menu-panel{ display:none; } .bis-menu-panel.active{ display:block; } .bis-menu-rule{ display:flex; align-items:center; gap:16px; margin-bottom:20px; } .bis-menu-rule h3{ font-family:'Museo Sans',sans-serif; font-weight:900; font-size:clamp(20px,2.6vw,26px); letter-spacing:0.04em; text-transform:uppercase; color:#2C2C2C; margin:0; white-space:nowrap; } .bis-menu-rule .line{ flex:1; height:2px; background:rgba(200,154,46,0.4); } /* ============================================================ GALLERY — masonry grid + lightbox ============================================================ */ .bis-gallery-item{ display:block; width:100%; padding:0; margin:0 0 clamp(10px,1.4vw,16px); border:none; cursor:pointer; overflow:hidden; background:#e7e3d8; break-inside:avoid; } .bis-gallery-item img{ display:block; width:100%; height:auto; transition:transform .5s ease; } .bis-gallery-item:hover img{ transform:scale(1.04); } .bis-lightbox{ position:fixed; inset:0; z-index:300; background:rgba(15,18,24,0.92); display:none; align-items:center; justify-content:center; padding:clamp(20px,5vw,64px); } .bis-lightbox.open{ display:flex; } .bis-lightbox > img{ max-width:100%; max-height:100%; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,0.5); } .bis-lb-btn{ position:absolute; background:rgba(0,0,0,0.4); border:1px solid rgba(250,249,242,0.4); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; } .bis-lb-close{ top:20px; right:24px; width:48px; height:48px; font-size:36px; background:none; border:none; } .bis-lb-prev{ left:clamp(12px,3vw,32px); top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:24px; } .bis-lb-next{ right:clamp(12px,3vw,32px); top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:24px; } /* ============================================================ FOOTER links hover ============================================================ */ .bis-footer a.footer-link:hover{ color:#fff; } /* ============================================================ FLUENT FORMS — match the Bell design (applies once you paste a form shortcode into a page slot) ============================================================ */ .fluentform .ff-el-input--label label, .frm-fluent-form .ff-el-input--label label{ font-family:'Museo Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:#5b5750; margin-bottom:7px; } .fluentform .ff-el-form-control, .frm-fluent-form .ff-el-form-control{ font-family:'Museo Sans',sans-serif; font-size:15px; border-radius:0; border:1px solid rgba(27,48,85,0.25); background:var(--bell-cream); padding:12px 14px; } .fluentform .ff-el-form-control:focus, .frm-fluent-form .ff-el-form-control:focus{ border-color:var(--bell-gold); outline:none; box-shadow:none; } .fluentform .ff-btn-submit, .frm-fluent-form .ff-btn-submit{ font-family:'Museo Sans',sans-serif; font-size:14px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#fff; background:var(--bell-gold); border:none; border-radius:0; padding:15px 34px; cursor:pointer; transition:background .2s ease; } .fluentform .ff-btn-submit:hover, .frm-fluent-form .ff-btn-submit:hover{ background:var(--bell-gold-dk); } /* ---- Tripleseat lead form — Bell brand styling (script-injected into #tripleseat_embed) ---- NOTE: styling is scoped to the real form fields by input type + the submit's .button class. The jQuery UI datepicker (and its month/year