/* ------------------------------------------------------------------------- * * OCHBS homepage funnel — stat band, sticky ticket bar, "Who's Going" * * Deployed to: wp-content/uploads/ochbs-assets/ochbs-funnel.css * Loaded by: mu-plugins/ochbs-funnel.php, only on _ochbs_funnel_page pages. * * The whole point of the band is that it fits on the first screen. Sizes are * clamped against viewport height as well as width, because the binding * constraint is 768px-tall laptops, not narrow phones. * ------------------------------------------------------------------------- */ /* The hero's .sw-track is ~8,500px of *transparent* space — the fixed .sw-sky does the painting. The moment the engine unpins those layers at the end of the run, the white shows through, which is the blank band under the scroll section. Painting the hero container itself means there is never a moment with nothing behind the track. */ .elementor-element-ochbshero, body.ochbs-funnel { background-color: #020617; } /* #020617 rather than the hero's #0c0f0d: What to Expect and the footer are already #020617, and two near-blacks meeting at a section edge reads as a seam rather than as one page. */ .ochbs-band { --ochbs-ink: #020617; --ochbs-cream: #f3efe6; --ochbs-muted: #b8b2a4; --ochbs-green: #1f7a4d; --ochbs-green-bright: #2a9a64; --ochbs-gold: #c9a227; box-sizing: border-box; width: 100%; padding: clamp(28px, 5vh, 64px) clamp(20px, 5vw, 64px); background: var(--ochbs-ink); color: var(--ochbs-cream); overflow: hidden; /* Own the whole first screen rather than leaving a strip of hero showing. The hero's stage is fixed and full-viewport, so any gap underneath shows the *middle* of the hero — which means its vertically-centred copy card, sliced in half. A partial peek can never look deliberate here; a clean handover can. 118px is the sticky header (36px utility bar + 82px nav). */ display: flex; align-items: center; min-height: calc(100vh - 118px); /* The scroll hero mounts .sw-sky, .sw-stage and .sw-copylayer as position:fixed, top:0, full-viewport, at z-index 0–60 — from page load, not from the point the hero scrolls into view. Sitting above them in the document is therefore not enough; without an explicit z-index the band is painted over and the first screen is still the cinematic. 70 clears the engine's highest layer (.sw-scrollbar at 60) and stays well under the sticky bar (9000) and the age gate (10000). The band stays in normal flow, so it scrolls away and hands the screen to the hero exactly as before; only the paint order changes. */ position: relative; z-index: 70; } .ochbs-band *, .ochbs-stickybar * { box-sizing: border-box; } .ochbs-band__inner { width: 100%; max-width: 1180px; margin: 0 auto; } .ochbs-band__eyebrow { margin: 0 0 clamp(12px, 2vh, 22px); font-size: clamp(0.68rem, 1vw, 0.78rem); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochbs-gold); } .ochbs-band__eyebrow span { margin: 0 0.5em; opacity: 0.5; } .ochbs-band__title { /* Scales on height as well as width so it cannot eat the fold on a 768px laptop, where the band has roughly 650px to work with once the sticky header is accounted for. */ margin: 0 0 clamp(20px, 3.5vh, 40px); font-size: clamp(1.9rem, min(5.2vw, 7vh), 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; max-width: 20ch; color: var(--ochbs-cream); } /* --- stat tiles ---------------------------------------------------------- */ .ochbs-band__stats { display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 48px); margin: 0 0 clamp(22px, 4vh, 44px); padding: 0; list-style: none; border-top: 1px solid rgba(243, 239, 230, 0.14); border-bottom: 1px solid rgba(243, 239, 230, 0.14); padding-block: clamp(14px, 2.4vh, 26px); } .ochbs-band__stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ochbs-band__stat-value { font-size: clamp(1.6rem, min(4vw, 5vh), 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--ochbs-green-bright); font-variant-numeric: tabular-nums; } .ochbs-band__stat-label { font-size: clamp(0.66rem, 0.9vw, 0.76rem); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochbs-muted); } /* --- buttons ------------------------------------------------------------- */ .ochbs-band__cta { display: flex; flex-wrap: wrap; gap: 12px; } /* Written as real properties rather than relying on inherited link styling: the theme and the Elementor kit both style anchors, and a CTA that silently changes colour after a kit edit is worse than a slightly verbose rule. */ .ochbs-band .ochbs-btn, .ochbs-stickybar .ochbs-stickybar__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.9rem 2.1rem; border: 1px solid transparent; border-radius: 999px; font-size: clamp(0.82rem, 1vw, 0.95rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; line-height: 1.1; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .ochbs-band .ochbs-btn--primary { background: var(--ochbs-green); border-color: var(--ochbs-green); color: var(--ochbs-cream); } .ochbs-band .ochbs-btn--primary:hover, .ochbs-band .ochbs-btn--primary:focus { background: var(--ochbs-green-bright); border-color: var(--ochbs-green-bright); color: #fff; } .ochbs-band .ochbs-btn--ghost { background: transparent; border-color: rgba(243, 239, 230, 0.3); color: var(--ochbs-cream); } .ochbs-band .ochbs-btn--ghost:hover, .ochbs-band .ochbs-btn--ghost:focus { background: rgba(243, 239, 230, 0.08); border-color: rgba(243, 239, 230, 0.55); } .ochbs-band .ochbs-btn:focus-visible, .ochbs-stickybar__cta:focus-visible { outline: 2px solid var(--ochbs-cream); outline-offset: 3px; } /* --- sticky ticket bar --------------------------------------------------- */ .ochbs-stickybar { --ochbs-cream: #f3efe6; --ochbs-green: #1f7a4d; --ochbs-green-bright: #2a9a64; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; /* under the age gate (10000), over page content */ display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 28px); padding: 12px clamp(14px, 3vw, 32px); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(2, 6, 23, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #1e293b; color: var(--ochbs-cream); transform: translateY(110%); visibility: hidden; transition: transform 0.28s ease, visibility 0.28s ease; } .ochbs-stickybar.is-visible { transform: translateY(0); visibility: visible; } /* Parked over the footer, where it would cover the newsletter form. */ .ochbs-stickybar.is-parked { transform: translateY(110%); visibility: hidden; } .ochbs-stickybar__facts { margin: 0; font-size: clamp(0.72rem, 1.1vw, 0.9rem); font-weight: 600; letter-spacing: 0.04em; color: var(--ochbs-cream); } .ochbs-stickybar .ochbs-stickybar__cta { min-height: 44px; padding: 0.65rem 1.6rem; background: var(--ochbs-green); border-color: var(--ochbs-green); color: var(--ochbs-cream); white-space: nowrap; } .ochbs-stickybar .ochbs-stickybar__cta:hover, .ochbs-stickybar .ochbs-stickybar__cta:focus { background: var(--ochbs-green-bright); border-color: var(--ochbs-green-bright); color: #fff; } /* --- "Who's Going" ------------------------------------------------------- * * Palette below is the site's own, from Elementor kit 16738, rather than the * hero's greens: * #020617 Dark Background #01172A Dark Surface * #1E293B Secondary Dark Surface / Borders (Dark Mode) * #A5BE4C Primary #60A5FA Secondary * The band above keeps the hero palette deliberately — it is the approved * reference — so only this section and the panels move onto the kit tokens. */ /* Scoped to the Elementor id-class, not a `.ochbs-who` wrapper — no such element exists; the section's markup only carries the BEM-ish child names. */ .elementor-element-ochbswho { --kit-bg: #020617; --kit-surface: #01172a; --kit-border: #1e293b; --kit-primary: #a5be4c; } .ochbs-who__head { margin-bottom: clamp(28px, 4vw, 48px); } .ochbs-who__title { margin: 0 0 10px; font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #f3efe6; } .ochbs-who__sub { margin: 0; font-size: clamp(0.92rem, 1.4vw, 1.05rem); line-height: 1.5; /* The kit's Accent (#64748B) is too dark for body copy on #020617, and it has no lighter slate, so this stays a neutral white tint rather than inventing a hue that is not in the palette. */ color: rgba(255, 255, 255, 0.72); max-width: 52ch; } .ochbs-who__row-title { margin: clamp(28px, 4vw, 44px) 0 clamp(14px, 2vw, 22px); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #c9a227; } .ochbs-who__more { margin-top: 4px; } /* Pull "Who's Going" up over the hero's dead tail. --ochbs-hero-trim is measured and set by ochbs-hero-init-funnel.js; see the note there. z-index 70 puts this section above the engine's parked stage layers (0–60) so it covers them rather than sliding underneath. */ .elementor-element-ochbswho { position: relative; z-index: 70; margin-top: calc(-1 * var(--ochbs-hero-trim, 0px)); } /* Elementor's container is a flex column, and these three widgets were being sized as flex items rather than to their content — the sponsor grid's wrapper computed to 124px against 603px of cards, so on mobile (2 columns, 4 rows) the cards painted outside their box and collided with the exhibitor wall below. Pin them to content height and stop them shrinking. */ .elementor-element-ochbswhospc, .elementor-element-ochbswhoexg, .elementor-element-ochbswhofan { height: auto; min-height: 0; flex: 0 0 auto; align-self: stretch; width: 100%; } /* --- platinum sponsor flip cards ---------------------------------------- */ .ochbs-flipgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; } .ochbs-flip { perspective: 1200px; } .ochbs-flip__inner { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); font: inherit; text-align: left; } /* The card is a