/* Theme Name: JBM Child Theme Theme URI: https://github.com/elementor/hello-theme/ Description: Hello Elementor child theme for JBM Boat Shows (Charleston, Columbia, Savannah). Thin layer — branding, CSS custom properties, component styles. All data/CPT/REST logic lives in the jbm-show-engine plugin. Author: 21 ads media Author URI: https://21adsmedia.com Template: hello-elementor Version: 1.2.0 Text Domain: jbm-child-theme License: GNU General Public License v3 or later. License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* ========================================================================== Design System Tokens Source of truth: Design.md (JBM Boat Shows parent folder) Per-show primary shifts via body class. All other tokens are shared. ========================================================================== */ /* NOTE: declared on `body`, not `:root`. Elementor scopes its Kit globals to `.elementor-kit-` (the element), and a var() is substituted at the element where it's declared — so tokens declared on can't see the Kit vars. Declaring them on lets the inheritance resolve correctly. */ body { /* ---------------------------------------------------------------------- Tokens inherit from the Elementor Site Kit (Site Settings → Global Colors / Fonts) so the React components, Elementor widgets, and theme stay in visual lockstep per site. Each token = the Kit global var, with a JBM brand fallback if Elementor isn't loaded. Only Elementor's 4 SYSTEM color slots (primary/secondary/text/accent) and system fonts have stable IDs across kits, so only those are safe to inherit portably. Custom Kit globals get random per-kit IDs, so shared brand constants (gold, glass, card, dark-bg) live here instead. ---------------------------------------------------------------------- */ /* Per-show primary — Kit "Primary" global; else the per-show fallback set by body.jbm-show-* (below); else Charleston navy. */ --jbm-primary: var(--e-global-color-primary, var(--jbm-primary-fallback, #1C3A6E)); /* Shared structural palette — inherited system slots + brand constants */ --jbm-secondary: var(--e-global-color-secondary, #3DB8E8); /* sky blue */ --jbm-accent-gold: #F5C200; /* CTA — shared across shows; mirrored in Kit as "Accent Gold" */ --jbm-dark-bg: #0D2137; --jbm-near-black: var(--e-global-color-text, #1C1C1E); --jbm-charcoal: var(--e-global-color-accent, #3A3A3C); --jbm-off-white: #F7F6F3; /* warm soft-white — was #F5F7FA (blue-tinted) */ --jbm-light-steel: #C8D8E8; /* Typography — Kit system fonts (Barlow Condensed display / Archivo body). The body fallback must track the Kit's Body typography (Site Settings → Typography), which is Archivo. The Kit's *system* "Text" global has no family set, so this fallback is what actually renders in components — leaving it on Open Sans made them the only Open Sans surface on an otherwise-Archivo site. */ --jbm-font-display: var(--e-global-typography-primary-font-family, 'Barlow Condensed', 'Oswald', sans-serif); --jbm-font-body: var(--e-global-typography-text-font-family, 'Archivo', system-ui, -apple-system, sans-serif); /* Display weights. Anton shipped a single 400 weight (its 400 *was* black), so component rules used to hardcode 400. Any multi-weight family (Barlow Condensed, Archivo, Oswald) renders 400 as regular — thin and weak. These tokens let the family and its weights change together. display → headings, hero, section titles soft → card titles, ribbon values (a step down, deliberately) */ --jbm-font-display-weight: 700; --jbm-font-display-weight-soft: 600; /* Glass system — frosted panels on dark / vibrant backgrounds. Shared across all three shows (the frost doesn't change per show); the primary tint *inside* glass (icon chips, accents) still comes from the Kit via --jbm-primary. Values match the Figma glass spec. */ --jbm-glass-fill: rgba(255, 255, 255, 0.08); --jbm-glass-fill-hover: rgba(255, 255, 255, 0.13); --jbm-glass-border: rgba(255, 255, 255, 0.15); --jbm-glass-border-hover: rgba(41, 171, 226, 0.45); --jbm-glass-blur: 5px; --jbm-glass-radius: 5px; --jbm-glass-glow: 0 8px 32px rgba(41, 171, 226, 0.15); --jbm-glass-label: rgba(255, 255, 255, 0.60); /* small uppercase labels on glass */ --jbm-glass-subtle: rgba(255, 255, 255, 0.50); /* sub-lines on glass */ --jbm-glass-navy: rgba(28, 58, 110, 0.72); /* nav / summary navy glass panel */ --jbm-ribbon-bg: #0A3D5A; /* show-details ribbon strip */ /* Card system — for use on light backgrounds */ --jbm-card-fill: #FFFFFF; --jbm-card-shadow: 0 4px 24px rgba(13, 33, 55, 0.08); --jbm-card-border: 1px solid #E2EAF0; --jbm-card-radius: 16px; /* Semantic aliases (component CSS uses these) */ --jbm-text: var(--e-global-color-text, #1C1C1E); /* Muted is a THEME constant, not a Kit inherit. It previously read the Kit's "accent" slot, but on every JBM kit accent and text are both #3A3A3C — so muted text rendered identically to body text and the type hierarchy was flat (card titles included; they use --_muted). Muted is a typographic tier, not a brand colour, so it shouldn't be per-site config that can drift. Fixed here once instead of in each site's Kit. */ --jbm-muted: #6B6B6B; --jbm-surface: #EFEEE9; /* warm sea-salt — was #F5F7FA (blue-tinted) */ --jbm-border: #DDDAD2; /* neutral hairline — was #E2EAF0 (blue-tinted) */ } /* ========================================================================== Per-Show Primary — FALLBACK only The live per-site primary comes from the Elementor Kit's "Primary" global (set in Site Settings on each site). These body.jbm-show-* rules only set --jbm-primary-fallback, which --jbm-primary uses if the Kit var is ever missing — so they never fight the Kit, they just backstop it. (body class emitted by the plugin from Config::get_site_show().) ========================================================================== */ /* Charleston — Deep Navy. Extra icon tones aren't Kit globals, so kept here. */ body.jbm-show-charleston { --jbm-primary-fallback: #1C3A6E; --jbm-primary-mid: #2E80C0; /* mid blue — icon mid-tone, gradient fills */ --jbm-primary-wave: #152D56; /* midnight navy — icon wave lines, footer */ } /* Columbia — Periwinkle Navy */ body.jbm-show-columbia { --jbm-primary-fallback: #3D5FA0; } /* Savannah — Steel Blue */ body.jbm-show-savannah { --jbm-primary-fallback: #3A7AB5; } /* ========================================================================== Glass utilities — frosted surfaces for Elementor (nav, hero, bands, CTAs). Same token system the React components use, so a hand-built Elementor section frosts identically to the [jbm_*] shortcodes. Glass only reads on a dark / vibrant / photographic background — never place it on white. ========================================================================== */ .jbm-glass { background: var(--jbm-glass-fill); border: 1px solid var(--jbm-glass-border); box-shadow: var(--jbm-glass-glow); -webkit-backdrop-filter: blur(var(--jbm-glass-blur)); backdrop-filter: blur(var(--jbm-glass-blur)); color: #fff; position: relative; /* Needed for ::after stacking */ } /* Solid-feeling navy frost — for nav bars / large info panels. */ .jbm-glass--navy { background: var(--jbm-glass-navy); -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); } /* Cyan inset "screen glow" edge (summary panel, section rectangles). */ .jbm-glass--inset { box-shadow: var(--jbm-glass-glow), inset 0 0 0 2px rgba(41, 171, 226, 0.2); } /* Full-bleed photo band: set a background-image on this element, then the ::before lays the translucent-navy wash so overlaid text stays legible. Put content in a child with position:relative (or .jbm-glass-band__content). */ .jbm-glass-band { position: relative; overflow: hidden; background-size: cover; background-position: center; color: #fff; } .jbm-glass-band::before { content: ""; position: absolute; inset: 0; background: var(--jbm-glass-navy); box-shadow: inset 0 0 0 2px rgba(41, 171, 226, 0.2); pointer-events: none; } .jbm-glass-band > * { position: relative; z-index: 1; } .jbm-glass-band__content { position: relative; z-index: 1; } /* Glass button (outline frost) + gold solid — matches the hero/summary CTAs. */ .jbm-glass-btn, .jbm-glass-btn--gold { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 10px; font-weight: 700; text-decoration: none; line-height: 1; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; cursor: pointer; } .jbm-glass-btn { background: var(--jbm-glass-fill); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; } .jbm-glass-btn:hover { background: var(--jbm-glass-fill-hover); border-color: var(--jbm-glass-border-hover); color: #fff; } .jbm-glass-btn--gold { background: var(--jbm-accent-gold); border: 1px solid var(--jbm-accent-gold); color: #191919; } .jbm-glass-btn--gold:hover { filter: brightness(1.05); color: #191919; } /* Desktop-only gold CTA for a single header nav item (e.g. "Tickets"). Paste "jbm-navbtn-gold" into that item's CSS Classes field in the jet-nav-menu widget's menu (Appearance > Menus) — it lands on the wrapping .jet-nav__item div, not the inner link. No padding override here on purpose: that div's height drives the whole header row, so it inherits the same padding every other nav item already has rather than risking a taller bar. Hidden below 1025px so the tablet/mobile dropdown menu is untouched. */ @media (min-width: 1025px) { .jet-nav__item.jbm-navbtn-gold { background: var(--jbm-accent-gold); border-radius: 8px; transition: filter 0.2s ease; } .jet-nav__item.jbm-navbtn-gold:hover { filter: brightness(1.05); } .jet-nav__item.jbm-navbtn-gold .menu-item-link, .jet-nav__item.jbm-navbtn-gold .jet-nav-link-text { color: #191919 !important; } } /* Frosted-glass sibling of jbm-navbtn-gold, for a secondary header CTA (e.g. "Plan Your Visit"). Paste "jbm-navbtn-glass" into that item's CSS Classes field in Appearance > Menus. Do NOT put ".jbm-glass-btn" on a menu item to get this look. That class is a standalone button (display:inline-flex + its own 0.75rem/1.5rem padding), and the CSS Classes field lands it on the wrapping .jet-nav__item div — so it overrides JetMenu's own item layout and blows the pill out to full width on top of the padding the item already has. The frost is an inset box-shadow, not a border, on purpose: a real 1px border adds 2px of height to the div that drives the whole header row, so the glass pill would sit taller than the gold one next to it. */ @media (min-width: 1025px) { .jet-nav__item.jbm-navbtn-glass { background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); border-radius: 8px; -webkit-backdrop-filter: blur(var(--jbm-glass-blur)); backdrop-filter: blur(var(--jbm-glass-blur)); transition: background-color 0.2s ease, box-shadow 0.2s ease; } .jet-nav__item.jbm-navbtn-glass:hover { background: rgba(255, 255, 255, 0.20); box-shadow: inset 0 0 0 1px var(--jbm-glass-border-hover); } .jet-nav__item.jbm-navbtn-glass .menu-item-link, .jet-nav__item.jbm-navbtn-glass .jet-nav-link-text { color: #fff !important; } } /* Fallback for browsers without backdrop-filter — lean on a denser fill. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .jbm-glass { background: rgba(20, 45, 75, 0.85); } .jbm-glass--navy { background: rgba(20, 45, 75, 0.92); } } /* ========================================================================== Component Styles — Exhibitor (Populated in Phase 3 — CSS Component Styles) ========================================================================== */ /* .jbm-exhibitor-grid { } */ /* .jbm-exhibitor-card { } */ /* .jbm-exhibitor-card__logo { } */ /* .jbm-exhibitor-card__name { } */ /* .jbm-exhibitor-card__category { } */ /* .jbm-exhibitor-card__booth { } */ /* .jbm-location-badge { } */ /* .jbm-location-badge--in-water { } */ /* ========================================================================== Component Styles — Entertainment / Schedule (Populated in Phase 3) ========================================================================== */ /* .jbm-schedule { } */ /* .jbm-schedule__day { } */ /* .jbm-schedule__day-title { } */ /* .jbm-schedule__act { } */ /* .jbm-schedule__time { } */ /* .jbm-schedule__stage { } */ /* ========================================================================== Component Styles — Show Details (Populated in Phase 3) ========================================================================== */ /* .jbm-show-details { } */ /* .jbm-show-details__dates { } */ /* .jbm-show-details__venue { } */ /* .jbm-show-details__tickets { } */ /* .jbm-show-details__parking { } */ /* ========================================================================== Utility Classes ========================================================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; } .mb-5 { margin-bottom: 3rem; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mt-5 { margin-top: 3rem; } /* ========================================================================== Accessibility ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Print Styles ========================================================================== */ @media print { .jbm-exhibitor-card, .jbm-schedule__act { break-inside: avoid; page-break-inside: avoid; } }