/** * LBF Blue Lights & Bubbles Parade — v2 header + full-page night sky * * Loads AFTER bubbles-page.css and only ever ADDS or overrides. The original * stylesheet is untouched, so the v1 page is completely unaffected — every * rule here is scoped under body.lbf-bubbles-v2, a class only the v2 template * adds. * * Contents * §1 Page canvas turned into the night sky (was a light #f0f4f8 canvas) * §2 Shell made transparent so the sky reads through * §3 RESCUE: three sections had no background of their own and borrowed the * shell's light gradient. They get it back explicitly, or their dark text * would land on a dark page and vanish. * §4 The fixed page-wide sky + bubble layers * §5 v2 header layout — logo left, copy right * §6 Logo effects: Power On + Moon Glow * §7 BP Electric feed bar * §8 Button parity + the new Enter icon * §9 Responsive */ /* ═════ §1 THE PAGE ITSELF BECOMES THE NIGHT SKY ═════ The gradient goes on , NOT on .bb-canvas. .bb-canvas has to sit at z-index 1 so the page content clears the fixed firefly layer at z-index 0. Painting the gradient on the canvas therefore drops an opaque sheet directly over that layer — the fireflies, twinkles and bubbles all still render and animate, they are just completely hidden. Putting the gradient on leaves the stacking order intact and lets the fixed layer show. */ body.lbf-bubbles-v2{ background-color:#000820; background-image: radial-gradient(ellipse at 50% 100%, rgba(77,127,255,.32), transparent 60%), radial-gradient(circle at 20% 25%, rgba(74,58,140,.28), transparent 45%), radial-gradient(circle at 80% 30%, rgba(0,55,167,.35), transparent 50%), linear-gradient(180deg,#000820 0%, var(--bb-blue-night) 40%, #000820 100%); background-attachment:fixed; background-repeat:no-repeat; background-size:cover; } /* canvas carries NO background of its own — it is just the layout wrapper */ body.lbf-bubbles-v2 .bb-canvas{ background:transparent; position:relative; z-index:1; } /* v1 laid a 78%-white wash over the canvas to mute its bubble tile; it would grey out the entire night sky */ body.lbf-bubbles-v2 .bb-canvas::before{ display:none; } /* ═════ §2 SHELL → TRANSPARENT ═════ */ body.lbf-bubbles-v2 .bb-shell{ background:transparent; border-color:rgba(207,226,255,.14); box-shadow:none; } body.lbf-bubbles-v2 .bb-shell::after{ color:rgba(207,226,255,.16); } /* ═════ §3 LET THE PAGE SKY READ THROUGH THE SECTIONS ═════ Each of these sections already carries its own dark treatment from bubbles-page.css — the chart, the stage, Grand Reviewing, the "Application Desk" Enter block, the "Lantern Cards" FAQ and the "Pure Night" closing. All of them are correct and NONE of them is restyled here. The only change: their bottom-most solid colour layer is re-declared at 80% so the fixed firefly / star / bubble layer behind the page shows through. Their radial colour layers are copied across verbatim, and every one of these sections sets color:#fff on dark, so white text stays white text on dark — the composite over the #000820 page is still near-black. (v32.33.0 shipped a "rescue" here that gave .bb-enter / .bb-faq / .bb-close a LIGHT gradient, on the mistaken reading that they had no background of their own. They do — it is declared ~2300 lines further down the file than the first rule for each. That override painted white behind white text and is why those three sections went blank. It is gone.) */ body.lbf-bubbles-v2 .bb-chart{ background: radial-gradient(ellipse at 20% 20%, rgba(74, 58, 140, 0.32), transparent 50%), radial-gradient(ellipse at 80% 30%, rgba(0, 55, 167, 0.32), transparent 50%), radial-gradient(ellipse at 50% 90%, rgba(77, 127, 255, 0.18), transparent 60%), linear-gradient(160deg, rgba(0,5,21,0.8) 0%, rgba(0,21,74,0.8) 45%, rgba(10,10,53,0.8) 100%); border:2px solid #f3c303; border-radius:1.5rem; } body.lbf-bubbles-v2 .bb-stage{ background: radial-gradient(ellipse at 50% 0%, rgba(243, 195, 3, 0.20) 0%, transparent 35%), radial-gradient(circle at 25% 80%, rgba(74, 58, 140, 0.34), transparent 50%), radial-gradient(circle at 75% 80%, rgba(0, 55, 167, 0.32), transparent 50%), linear-gradient(180deg, rgba(46,36,102,0.8) 0%, rgba(0,21,74,0.8) 60%, rgba(0,8,32,0.8) 100%); border:2px solid #f3c303; border-radius:1.5rem; } body.lbf-bubbles-v2 .bb-grand{ background: radial-gradient(circle at 30% 30%, rgba(77, 127, 255, 0.25), transparent 45%), radial-gradient(circle at 70% 70%, rgba(74, 58, 140, 0.22), transparent 45%), linear-gradient(135deg, rgba(0,31,90,0.8) 0%, rgba(0,21,74,0.8) 100%); border:2px solid #f3c303; border-radius:1.5rem; } body.lbf-bubbles-v2 .bb-enter{ background: radial-gradient(ellipse at 15% 20%, rgba(74, 58, 140, 0.22), transparent 50%), radial-gradient(ellipse at 85% 80%, rgba(0, 55, 167, 0.28), transparent 55%), linear-gradient(170deg, rgba(0,21,74,0.8) 0%, rgba(0,31,90,0.8) 50%, rgba(0,8,32,0.8) 100%); border:2px solid #f3c303; border-radius:1.5rem; } body.lbf-bubbles-v2 .bb-faq{ background: radial-gradient(ellipse at 50% 0%, rgba(243, 195, 3, 0.10), transparent 35%), radial-gradient(ellipse at 30% 100%, rgba(74, 58, 140, 0.25), transparent 50%), linear-gradient(180deg, rgba(0,8,32,0.8) 0%, rgba(0,21,74,0.8) 60%, rgba(0,21,74,0.8) 100%); border:2px solid #f3c303; border-radius:1.5rem; } body.lbf-bubbles-v2 .bb-close{ background: radial-gradient(ellipse at 50% 50%, rgba(77, 127, 255, 0.10), transparent 50%), radial-gradient(circle at 20% 30%, rgba(74, 58, 140, 0.18), transparent 50%), linear-gradient(180deg, rgba(0,5,21,0.8) 0%, rgba(0,21,74,0.8) 50%, rgba(0,5,21,0.8) 100%); } /* ═════ §4 FIXED PAGE-WIDE SKY ═════ */ body.lbf-bubbles-v2 .bbv2-sky, body.lbf-bubbles-v2 .bbv2-bubbles{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; } body.lbf-bubbles-v2 .bbv2-sky .bb-hero-stars{ position:absolute; inset:0; } body.lbf-bubbles-v2 .bbv2-sky .bb-hero-orb--a{ left:22%; } body.lbf-bubbles-v2 .bbv2-sky .bb-hero-orb--b{ right:-80px; } /* ═════ §5 v2 HEADER LAYOUT ═════ */ body.lbf-bubbles-v2 .bbv2-hero{ background:linear-gradient(180deg,rgba(0,8,32,.52) 0%,rgba(0,21,74,.38) 42%,rgba(0,8,32,.58) 100%); backdrop-filter:blur(1.5px); /* 2px, in the same gold as the Enter the Parade button (--bb-gold #f3c303) */ border:2px solid #f3c303; box-shadow:0 0 30px rgba(243,195,3,.22), var(--bb-shadow-hero); min-height:min(88vh,760px); } /* v1's .bb-hero::after lays an 80px white fade across the bottom of the hero. That existed to blend the hero into the LIGHT page underneath it. On the v2 night page it reads as a white smear along the bottom edge. Off. */ body.lbf-bubbles-v2 .bbv2-hero::after{ display:none; } body.lbf-bubbles-v2 .bbv2-grid{ position:relative; z-index:4; flex:1; display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); align-items:center; gap:clamp(1rem,3.5vw,3.25rem); width:100%; margin:0 auto; padding:clamp(2.5rem,6vh,4rem) clamp(1.25rem,4vw,3rem) clamp(1.5rem,4vh,2.5rem); } body.lbf-bubbles-v2 .bbv2-logowrap{ position:relative; display:grid; place-items:center; min-width:0; } body.lbf-bubbles-v2 .bbv2-halo{ position:absolute; width:112%; aspect-ratio:1; pointer-events:none; background:radial-gradient(circle,rgba(77,127,255,.3) 0%,rgba(74,58,140,.16) 42%,transparent 66%); animation:bbv2-halo 8s ease-in-out infinite; } @keyframes bbv2-halo{ 0%,100%{opacity:.72;transform:scale(1)} 50%{opacity:1;transform:scale(1.06)} } body.lbf-bubbles-v2 .bbv2-copy{ min-width:0; max-width:540px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; } body.lbf-bubbles-v2 .bbv2-copy .bb-hero-pills, body.lbf-bubbles-v2 .bbv2-copy .bb-hero-ctas{ justify-content:flex-start; } body.lbf-bubbles-v2 .bbv2-tl{ display:block; } body.lbf-bubbles-v2 .bbv2-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* his foot was a full-width bar pinned to the hero bottom: it carries margin-top:auto and a downward dark fade, both wrong inside a column */ body.lbf-bubbles-v2 .bbv2-copy .bb-hero-foot{ justify-content:flex-start; padding:1.05rem 0 0; margin-top:1.3rem; background:none; align-self:stretch; } /* ═════ §6 LOGO — POWER ON, THEN NEON GLOW ═════ Power On is a real sign switching on: four hard cut-outs at 8.6%, 18.6% and 36.6% of a 2.6s run, then it settles. The cut-outs are made by keyframe pairs 0.6% apart — about 16ms — under linear timing, rather than by steps(1,end). steps() snapped EVERY segment, including the settle at the end, which put a visible jolt right where the neon takes over. After 46% nothing cuts out again: it eases from 1.16 down to .95 and lands on byte-identical values to bbv2-neon's 0% stop. The neon then breathes with no stutter of its own. Flicker on arrival, clean glow forever after. */ body.lbf-bubbles-v2 .bbv2-mark{ position:relative; width:min(46vw,540px); aspect-ratio:1200/1177; background-image:url("../images/blue-lights-bubbles-parade-logo.webp"); background-size:contain; background-repeat:no-repeat; background-position:center; filter:drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 40px rgba(77,127,255,.28)); animation: bbv2-poweron 2.6s linear both, bbv2-neon 5.5s 2.6s ease-in-out infinite; } @keyframes bbv2-poweron{ 0% { opacity:0; filter:brightness(.18) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 8px rgba(77,127,255,.06)); } 8% { opacity:.65; filter:brightness(.55) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 20px rgba(77,127,255,.18)); } 8.6% { opacity:.05; filter:brightness(.20) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 8px rgba(77,127,255,.06)); } 18% { opacity:.90; filter:brightness(.95) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 40px rgba(96,150,255,.30)); } 18.6% { opacity:.08; filter:brightness(.22) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 8px rgba(77,127,255,.06)); } 30% { opacity:1; filter:brightness(1.30) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 78px rgba(120,175,255,.58)); } 36% { opacity:1; filter:brightness(1.26) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 72px rgba(120,175,255,.54)); } 36.6% { opacity:.40; filter:brightness(.60) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 16px rgba(77,127,255,.12)); } 46% { opacity:1; filter:brightness(1.16) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 62px rgba(120,175,255,.48)); } /* from here it settles smoothly — no more cut-outs — and lands on exactly the values bbv2-neon opens with, so the glow takes over invisibly */ 100% { opacity:1; filter:brightness(.95) saturate(1.00) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 32px rgba(77,127,255,.22)); } } /* Neon Hum — one clean breath. Rises, falls, repeats. No flicker anywhere. Brightness .95 → 1.22, saturation 1.00 → 1.32, coloured glow 32px → 82px, over 5.5s with ease-in-out. Only three stops on purpose. An earlier pass used six and put a trough at 38% between two peaks; that is not a flicker, but it does read as a double pulse — up, part-way down, up again — which is close enough to the thing that was asked to be removed. Rising monotonically to a single peak and falling monotonically back leaves nothing that can be read as a cut-out. The peak sits at 55% rather than 50% so the fall is slightly longer than the rise, which stops it feeling metronomic. The 0 24px 54px shadow is repeated unchanged at every stop: that is the logo's lift off the page, and animating it would make the artwork bounce. Only the coloured glow moves. Every drop-shadow is restated in every keyframe because filter is a single property — a stop that omits them drops the glow outright. */ @keyframes bbv2-neon{ 0% { filter:brightness(.95) saturate(1.00) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 32px rgba(77,127,255,.22)); } 55% { filter:brightness(1.22) saturate(1.32) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 82px rgba(120,175,255,.60)); } 100% { filter:brightness(.95) saturate(1.00) drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 32px rgba(77,127,255,.22)); } } /* ═════ §7 BP ELECTRIC FEED ═════ Yellow only. A blue→yellow gradient interpolates through olive in sRGB and reads green, and fading to `transparent` (rgba(0,0,0,0)) drags midtones dark. Every stop below is rgba(255,232,0,a): same hue, alpha only. */ body.lbf-bubbles-v2 .bbv2-feed{ width:100%; display:flex; flex-direction:column; align-items:stretch; margin:0 0 .35rem; } /* ── BP Electric: no panel. Logo, then one line, then the bar. ── Their logo file already has a transparent background (81% of it), so it needs nothing behind it. What it DOES need is separation: BP's brand blue #123B81 measures only 1.63:1 against the #00154a night sky — effectively invisible. A glow soft enough not to read as a box only lifts that to about 2.1:1, so the glow alone cannot carry it. The fix is a thin light rim traced around the artwork itself. drop-shadow follows the alpha channel, so stacking two tight zero-offset white shadows outlines every shape — including the blue letters — without putting a panel behind anything. The warm glow underneath is then free to stay subtle and purely atmospheric. The genuinely correct long-term fix is a reverse/white logo from BP; most companies have one. This holds until then. */ body.lbf-bubbles-v2 .bbv2-bp-logo{ position:relative; display:block; width:fit-content; margin:0 auto .5rem; line-height:0; border-radius:6px; transition:transform .18s ease, filter .18s ease; } body.lbf-bubbles-v2 .bbv2-bp-logo::before{ content:""; position:absolute; inset:-34% -22%; z-index:-1; pointer-events:none; background:radial-gradient(ellipse at center, rgba(255,255,255,.20) 0%, rgba(255,232,0,.14) 40%, transparent 72%); filter:blur(14px); } body.lbf-bubbles-v2 .bbv2-bp-logo img{ display:block; height:clamp(64px,7.4vw,92px); width:auto; filter: drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 0 3px rgba(255,255,255,.65)) drop-shadow(0 0 20px rgba(255,232,0,.30)); } body.lbf-bubbles-v2 .bbv2-bp-logo:hover{ transform:translateY(-2px); } body.lbf-bubbles-v2 .bbv2-bp-logo:hover img{ filter: drop-shadow(0 0 2px rgba(255,255,255,1)) drop-shadow(0 0 5px rgba(255,255,255,.8)) drop-shadow(0 0 28px rgba(255,232,0,.5)); } body.lbf-bubbles-v2 .bbv2-bp-logo:focus-visible{ outline:3px solid #FFE800; outline-offset:4px; } /* one single line, sitting above the power bar */ body.lbf-bubbles-v2 .bbv2-bp-line{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:.42rem; margin:0 0 .15rem; text-align:center; font-family:'Outfit',sans-serif; line-height:1; } body.lbf-bubbles-v2 .bbv2-bp-presented{ font-family:'Barlow Condensed',sans-serif; font-size:.98rem; font-weight:900; line-height:1; letter-spacing:.05em; text-transform:uppercase; color:#f3c303; text-shadow:0 0 16px rgba(243,195,3,.4); } body.lbf-bubbles-v2 .bbv2-bp-name{ font-family:'Barlow Condensed',sans-serif; font-size:.98rem; font-weight:900; line-height:1; letter-spacing:.05em; text-transform:uppercase; color:#f3c303; text-shadow:0 0 16px rgba(243,195,3,.4); } body.lbf-bubbles-v2 .bbv2-bp-sep{ color:rgba(243,195,3,.6); font-size:.85rem; } body.lbf-bubbles-v2 .bbv2-bp-role{ font-family:'Barlow Condensed',sans-serif; font-size:.98rem; font-weight:900; line-height:1; letter-spacing:.05em; text-transform:uppercase; color:#f3c303; text-shadow:0 0 16px rgba(243,195,3,.4); } body.lbf-bubbles-v2 .bbv2-rail{ position:relative; width:100%; height:3px; margin:.5rem 0 0; border-radius:2px; background:linear-gradient(90deg,rgba(243,195,3,.12) 0%,rgba(243,195,3,.60) 50%,rgba(243,195,3,.12) 100%); box-shadow:0 0 12px rgba(243,195,3,.34); } body.lbf-bubbles-v2 .bbv2-rail::after{ content:""; position:absolute; top:-1px; left:-24%; width:24%; height:5px; border-radius:3px; background:linear-gradient(90deg,rgba(243,195,3,0) 0%,rgba(243,195,3,1) 50%,rgba(243,195,3,0) 100%); box-shadow:0 0 16px rgba(243,195,3,.95); animation:bbv2-run 3.4s linear infinite; } @keyframes bbv2-run{ to{ left:104% } } body.lbf-bubbles-v2 .bbv2-drops{ position:relative; width:100%; height:20px; margin:0; } body.lbf-bubbles-v2 .bbv2-drop{ position:absolute; top:0; width:1.5px; height:0; background:linear-gradient(180deg,rgba(243,195,3,.95) 0%,rgba(243,195,3,0) 100%); box-shadow:0 0 8px rgba(243,195,3,.6); animation:bbv2-drop 2.6s ease-out infinite; } @keyframes bbv2-drop{ 0%{height:0;opacity:0} 20%{opacity:1} 70%{height:17px;opacity:.9} 100%{height:17px;opacity:0} } /* ═════ §8 BUTTONS — matched size, and the new Enter icon ═════ .bb-btn--secondary overrides the base padding and carries an icon, so the two came out different widths. Equal padding plus a shared min-width. */ body.lbf-bubbles-v2 .bbv2-copy .bb-hero-ctas .bb-btn{ padding:.9rem 1.6rem; min-width:13.5rem; justify-content:center; } body.lbf-bubbles-v2 .bbv2-copy .bb-hero-cta-wrap{ display:inline-flex; } body.lbf-bubbles-v2 .bbv2-copy .bb-hero-cta-wrap .bb-btn{ width:100%; } /* his .bb-btn-ico is only sized for the secondary button; the primary needs it too */ body.lbf-bubbles-v2 .bb-btn--primary .bb-btn-ico{ width:15px; height:15px; flex-shrink:0; } /* ═════ §9 RESPONSIVE ═════ */ @media (max-width:980px){ body.lbf-bubbles-v2 .bbv2-grid{ grid-template-columns:1fr; gap:.9rem; padding-top:3rem; justify-items:center; } body.lbf-bubbles-v2 .bbv2-copy{ max-width:none; align-items:center; text-align:center; } body.lbf-bubbles-v2 .bbv2-copy .bb-hero-pills, body.lbf-bubbles-v2 .bbv2-copy .bb-hero-ctas, body.lbf-bubbles-v2 .bbv2-copy .bb-hero-foot{ justify-content:center; } body.lbf-bubbles-v2 .bbv2-mark{ width:min(74vw,400px); } body.lbf-bubbles-v2 .bbv2-drops{ height:18px; } } @media (max-width:600px){ body.lbf-bubbles-v2 .bbv2-copy .bb-hero-ctas .bb-btn{ min-width:100%; } body.lbf-bubbles-v2 .bbv2-copy .bb-hero-cta-wrap{ width:100%; } } @media (prefers-reduced-motion:reduce){ body.lbf-bubbles-v2 .bbv2-mark, body.lbf-bubbles-v2 .bbv2-halo, body.lbf-bubbles-v2 .bbv2-rail::after, body.lbf-bubbles-v2 .bbv2-drop{ animation:none; } body.lbf-bubbles-v2 .bbv2-mark{ animation:none; opacity:1; filter:drop-shadow(0 24px 54px rgba(0,8,32,.7)) drop-shadow(0 0 40px rgba(77,127,255,.28)); } body.lbf-bubbles-v2 .bbv2-drop{ display:none; } }