/**
* LBF Sunday Funday Parade page — scoped CSS (v29.4.2 polish)
*
* Every selector is anchored under body.lbf-parade-page so this file
* cannot affect any other page on the site. Activated via the body
* class filter in page-sunday-funday-parade.php.
*
* Design language: matches the lift, density, and material-craft feel
* of car-show-page-v2.css but with a "community celebration" motif
* instead of "automotive workshop":
* - Subtle scattered confetti pieces in the canvas background
* - Bunting flag strip across the top of the hero
* - Ribbon-tag accents on numbered elements
* - Same dotted polka-dot canvas + rounded inner shell as car show
*
* Metrics are tightened to match car show density:
* - Section padding: 2rem 1.5rem (was 44px 40px)
* - Hero padding: 2.5rem 2.25rem (was 56px)
* - Shell gap: 0.75rem (was 24-32px)
* - Card radius: 1.5rem (24px) for major cards
* - Inner card padding: 1rem-1.25rem
*
* Class prefix `pd-` (parade) does not collide with `cs-` (car show),
* `v3-` (homepage), `lbf-grid/lbf-card` (entertainment), or any other.
*/
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
body.lbf-parade-page {
--pd-blue: #0037a7;
--pd-blue-dark: #002580;
--pd-blue-deep: #001f5a;
--pd-blue-night: #00154a;
--pd-gold: #f3c303;
--pd-gold-soft: #fceea8;
--pd-gold-dark: #c79c00;
--pd-green: #007f00;
--pd-green-dark: #006300;
--pd-pink: #d63979; /* confetti accent */
--pd-orange: #ff7f3f; /* confetti accent */
--pd-blueberry: #4a3a8c; /* blueberry purple — namesake accent */
--pd-blueberry-deep: #2e2466;
--pd-bg: #f0f4f8;
--pd-bg-2: #fbfcff;
--pd-bg-3: #eef2fc;
--pd-cream: #fbf7ee;
--pd-panel: #ffffff;
--pd-text: #0e1525;
--pd-text-2: #374151;
--pd-text-3: #6b7280;
--pd-border: #d7e2fb;
--pd-border-soft: #e8eef9;
--pd-shadow-card: 0 10px 30px rgba(0, 55, 167, 0.05);
--pd-shadow-lift: 0 22px 60px rgba(0, 55, 167, 0.08);
--pd-shadow-hero: 0 25px 70px rgba(0, 21, 74, 0.30);
}
/* ═════════════════════════════════════════════════════════════════
CANVAS / SHELL — matches car show's structural pattern
Polka-dot canvas, gradient inner shell, tight gap rhythm.
───────────────────────────────────────────────────────────────── */
/* Nav offset — accounts for the floating fixed header */
body.lbf-parade-page .pd-canvas {
padding-top: calc(var(--header-h, 82px) + 0.75rem);
padding-bottom: 1.5rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
background-color: var(--pd-bg);
background-image:
radial-gradient(var(--pd-border) 1px, transparent 1px);
background-size: 40px 40px;
position: relative;
}
/* Confetti pieces scattered in the canvas — restraint: only 5 pieces,
very low opacity, fixed positions so they read as motif not noise */
body.lbf-parade-page .pd-canvas::before,
body.lbf-parade-page .pd-canvas::after {
content: "";
position: absolute;
pointer-events: none;
background-repeat: no-repeat;
z-index: 0;
opacity: 0.65;
}
body.lbf-parade-page .pd-canvas::before {
top: 4%; left: 1%;
width: 320px; height: 320px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%20%3C%21--%20Tilted%20paper%20rectangles%20--%3E%20%3Crect%20x%3D%2220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(20%2025%2031)%22%2F%3E%20%3Crect%20x%3D%2270%22%20y%3D%2220%22%20width%3D%2212%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(-15%2076%2021)%22%2F%3E%20%3Crect%20x%3D%22130%22%20y%3D%2240%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(45%20135%2041)%22%2F%3E%20%3Crect%20x%3D%22170%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-30%20175%2061)%22%2F%3E%20%3Crect%20x%3D%2240%22%20y%3D%22100%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%230037a7%22%20transform%3D%22rotate(60%2045%20101)%22%2F%3E%20%3Crect%20x%3D%22100%22%20y%3D%2280%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23ff7f3f%22%20transform%3D%22rotate(-50%20105%2081)%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%22120%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(15%20155%20121)%22%2F%3E%20%3Crect%20x%3D%2260%22%20y%3D%22150%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(-25%2065%20151)%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%22170%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(40%2025%20171)%22%2F%3E%20%3Crect%20x%3D%22120%22%20y%3D%22170%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-10%20125%20171)%22%2F%3E%20%3C%21--%20Round%20dots%20--%3E%20%3Ccircle%20cx%3D%2255%22%20cy%3D%2260%22%20r%3D%222%22%20fill%3D%22%23f3c303%22%2F%3E%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2220%22%20r%3D%222.5%22%20fill%3D%22%230037a7%22%2F%3E%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22140%22%20r%3D%222%22%20fill%3D%22%23d63979%22%2F%3E%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22160%22%20r%3D%222.5%22%20fill%3D%22%234a3a8c%22%2F%3E%20%3C%21--%20Streamer%20curl%20arcs%20--%3E%20%3Cpath%20d%3D%22M30%2080%20Q35%2075%2040%2080%20T50%2080%22%20stroke%3D%22%23ff7f3f%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M110%2030%20Q115%2025%20120%2030%20T130%2030%22%20stroke%3D%22%23007f00%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M155%2090%20Q160%2085%20165%2090%20T175%2090%22%20stroke%3D%22%234a3a8c%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
}
body.lbf-parade-page .pd-canvas::after {
bottom: 6%; right: 1%;
width: 360px; height: 360px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%20%3C%21--%20Tilted%20paper%20rectangles%20--%3E%20%3Crect%20x%3D%2220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(20%2025%2031)%22%2F%3E%20%3Crect%20x%3D%2270%22%20y%3D%2220%22%20width%3D%2212%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(-15%2076%2021)%22%2F%3E%20%3Crect%20x%3D%22130%22%20y%3D%2240%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(45%20135%2041)%22%2F%3E%20%3Crect%20x%3D%22170%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-30%20175%2061)%22%2F%3E%20%3Crect%20x%3D%2240%22%20y%3D%22100%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%230037a7%22%20transform%3D%22rotate(60%2045%20101)%22%2F%3E%20%3Crect%20x%3D%22100%22%20y%3D%2280%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23ff7f3f%22%20transform%3D%22rotate(-50%20105%2081)%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%22120%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(15%20155%20121)%22%2F%3E%20%3Crect%20x%3D%2260%22%20y%3D%22150%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(-25%2065%20151)%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%22170%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(40%2025%20171)%22%2F%3E%20%3Crect%20x%3D%22120%22%20y%3D%22170%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-10%20125%20171)%22%2F%3E%20%3C%21--%20Round%20dots%20--%3E%20%3Ccircle%20cx%3D%2255%22%20cy%3D%2260%22%20r%3D%222%22%20fill%3D%22%23f3c303%22%2F%3E%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2220%22%20r%3D%222.5%22%20fill%3D%22%230037a7%22%2F%3E%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22140%22%20r%3D%222%22%20fill%3D%22%23d63979%22%2F%3E%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22160%22%20r%3D%222.5%22%20fill%3D%22%234a3a8c%22%2F%3E%20%3C%21--%20Streamer%20curl%20arcs%20--%3E%20%3Cpath%20d%3D%22M30%2080%20Q35%2075%2040%2080%20T50%2080%22%20stroke%3D%22%23ff7f3f%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M110%2030%20Q115%2025%20120%2030%20T130%2030%22%20stroke%3D%22%23007f00%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M155%2090%20Q160%2085%20165%2090%20T175%2090%22%20stroke%3D%22%234a3a8c%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
transform: rotate(180deg);
}
/* A third, mid-page confetti cluster — attached to the shell via
::before so it sits inside the shell content area, not in the gutters. */
body.lbf-parade-page .pd-shell::before {
content: "";
position: absolute;
top: 30%; right: 3%;
width: 240px; height: 240px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%20%3C%21--%20Tilted%20paper%20rectangles%20--%3E%20%3Crect%20x%3D%2220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(20%2025%2031)%22%2F%3E%20%3Crect%20x%3D%2270%22%20y%3D%2220%22%20width%3D%2212%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(-15%2076%2021)%22%2F%3E%20%3Crect%20x%3D%22130%22%20y%3D%2240%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(45%20135%2041)%22%2F%3E%20%3Crect%20x%3D%22170%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-30%20175%2061)%22%2F%3E%20%3Crect%20x%3D%2240%22%20y%3D%22100%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%230037a7%22%20transform%3D%22rotate(60%2045%20101)%22%2F%3E%20%3Crect%20x%3D%22100%22%20y%3D%2280%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23ff7f3f%22%20transform%3D%22rotate(-50%20105%2081)%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%22120%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(15%20155%20121)%22%2F%3E%20%3Crect%20x%3D%2260%22%20y%3D%22150%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(-25%2065%20151)%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%22170%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(40%2025%20171)%22%2F%3E%20%3Crect%20x%3D%22120%22%20y%3D%22170%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-10%20125%20171)%22%2F%3E%20%3C%21--%20Round%20dots%20--%3E%20%3Ccircle%20cx%3D%2255%22%20cy%3D%2260%22%20r%3D%222%22%20fill%3D%22%23f3c303%22%2F%3E%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2220%22%20r%3D%222.5%22%20fill%3D%22%230037a7%22%2F%3E%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22140%22%20r%3D%222%22%20fill%3D%22%23d63979%22%2F%3E%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22160%22%20r%3D%222.5%22%20fill%3D%22%234a3a8c%22%2F%3E%20%3C%21--%20Streamer%20curl%20arcs%20--%3E%20%3Cpath%20d%3D%22M30%2080%20Q35%2075%2040%2080%20T50%2080%22%20stroke%3D%22%23ff7f3f%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M110%2030%20Q115%2025%20120%2030%20T130%2030%22%20stroke%3D%22%23007f00%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M155%2090%20Q160%2085%20165%2090%20T175%2090%22%20stroke%3D%22%234a3a8c%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
transform: rotate(45deg);
pointer-events: none;
opacity: 0.45;
z-index: 0;
}
/* Fourth confetti cluster (lower-left interior of shell). Different
rotation so it doesn't visually echo the others. */
body.lbf-parade-page .pd-canvas > .pd-shell {
/* placeholder — fourth cluster lives on .pd-shell after the
existing ::before/::after; CSS doesn't allow a 3rd pseudo,
so we add it via a body-level wrapper rule below. */
}
body.lbf-parade-page::before {
content: "";
position: fixed;
top: 60%; left: 6%;
width: 200px; height: 200px;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%20%3C%21--%20Tilted%20paper%20rectangles%20--%3E%20%3Crect%20x%3D%2220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(20%2025%2031)%22%2F%3E%20%3Crect%20x%3D%2270%22%20y%3D%2220%22%20width%3D%2212%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(-15%2076%2021)%22%2F%3E%20%3Crect%20x%3D%22130%22%20y%3D%2240%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(45%20135%2041)%22%2F%3E%20%3Crect%20x%3D%22170%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-30%20175%2061)%22%2F%3E%20%3Crect%20x%3D%2240%22%20y%3D%22100%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%230037a7%22%20transform%3D%22rotate(60%2045%20101)%22%2F%3E%20%3Crect%20x%3D%22100%22%20y%3D%2280%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23ff7f3f%22%20transform%3D%22rotate(-50%20105%2081)%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%22120%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(15%20155%20121)%22%2F%3E%20%3Crect%20x%3D%2260%22%20y%3D%22150%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(-25%2065%20151)%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%22170%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(40%2025%20171)%22%2F%3E%20%3Crect%20x%3D%22120%22%20y%3D%22170%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-10%20125%20171)%22%2F%3E%20%3C%21--%20Round%20dots%20--%3E%20%3Ccircle%20cx%3D%2255%22%20cy%3D%2260%22%20r%3D%222%22%20fill%3D%22%23f3c303%22%2F%3E%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2220%22%20r%3D%222.5%22%20fill%3D%22%230037a7%22%2F%3E%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22140%22%20r%3D%222%22%20fill%3D%22%23d63979%22%2F%3E%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22160%22%20r%3D%222.5%22%20fill%3D%22%234a3a8c%22%2F%3E%20%3C%21--%20Streamer%20curl%20arcs%20--%3E%20%3Cpath%20d%3D%22M30%2080%20Q35%2075%2040%2080%20T50%2080%22%20stroke%3D%22%23ff7f3f%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M110%2030%20Q115%2025%20120%2030%20T130%2030%22%20stroke%3D%22%23007f00%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M155%2090%20Q160%2085%20165%2090%20T175%2090%22%20stroke%3D%22%234a3a8c%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
transform: rotate(-30deg);
pointer-events: none;
opacity: 0.32;
z-index: 0;
}
body.lbf-parade-page .pd-shell {
max-width: calc(1480px - 2 * clamp(0.75rem, 2vw, 1.5rem));
margin: 0 auto;
background: linear-gradient(180deg, #fcfdff 0%, #f6f9ff 50%, #fafcff 100%);
border: 1px solid var(--pd-border);
border-radius: 2rem;
box-shadow: var(--pd-shadow-lift);
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
position: relative;
overflow: hidden;
z-index: 1;
}
/* Hidden parade reference — homage to car show's [CHASSIS_REF_L01] */
body.lbf-parade-page .pd-shell::after {
content: "[SUNDAY_FUNDAY_REF_PD01]";
position: absolute;
bottom: 1rem;
right: 2rem;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.5rem;
color: rgba(0, 55, 167, 0.2);
letter-spacing: 0.2em;
pointer-events: none;
}
/* ═════════════════════════════════════════════════════════════════
SHARED ELEMENTS
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-card {
background: #fff;
border: 1px solid var(--pd-border);
border-radius: 1.5rem;
overflow: hidden;
position: relative;
box-shadow: var(--pd-shadow-card);
}
/* Subtle confetti-dot pattern on cards — extremely light, like the
car show's perforated leather but parade-y */
body.lbf-parade-page .pd-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.05;
pointer-events: none;
background-image: radial-gradient(circle, var(--pd-blue) 1px, transparent 1px);
background-size: 20px 20px;
z-index: 0;
}
body.lbf-parade-page .pd-section {
position: relative;
padding: 2rem 1.5rem;
}
body.lbf-parade-page .pd-section-inner {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
}
body.lbf-parade-page .pd-section--alt {
background: linear-gradient(180deg, #fbfcff 0%, var(--pd-bg-3) 100%);
}
/* Eyebrow — pill style matching v3 homepage pattern */
body.lbf-parade-page .pd-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pd-blue);
background: rgba(0, 55, 167, 0.08);
border: 1px solid rgba(0, 55, 167, 0.18);
border-radius: 99px;
padding: 0.35rem 0.85rem;
}
body.lbf-parade-page .pd-eyebrow::before {
content: "";
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--pd-gold);
}
body.lbf-parade-page .pd-eyebrow--on-blue {
color: var(--pd-gold);
background: rgba(243, 195, 3, 0.10);
border-color: rgba(243, 195, 3, 0.32);
}
/* Streamer flourish — a small horizontal strip of colored dots that
sits above an eyebrow as decorative parade flair. Used sparingly
(a couple of section headings, not every one). */
body.lbf-parade-page .pd-streamer {
display: block;
width: 80px;
height: 10px;
margin-bottom: 0.5rem;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%208%22%3E%20%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(20%205%203)%22%2F%3E%20%3Ccircle%20cx%3D%2215%22%20cy%3D%224%22%20r%3D%221.8%22%20fill%3D%22%23d63979%22%2F%3E%20%3Crect%20x%3D%2222%22%20y%3D%222%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(-30%2025%203)%22%2F%3E%20%3Ccircle%20cx%3D%2236%22%20cy%3D%224%22%20r%3D%221.8%22%20fill%3D%22%23007f00%22%2F%3E%20%3Crect%20x%3D%2242%22%20y%3D%223%22%20width%3D%226%22%20height%3D%222%22%20fill%3D%22%230037a7%22%20transform%3D%22rotate(15%2045%204)%22%2F%3E%20%3Ccircle%20cx%3D%2256%22%20cy%3D%224%22%20r%3D%221.5%22%20fill%3D%22%23ff7f3f%22%2F%3E%20%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Section headlines */
body.lbf-parade-page .pd-section-h {
font-family: 'Outfit', system-ui, sans-serif;
margin: 0.75rem 0 0;
font-size: clamp(1.4rem, 3vw, 2.1rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--pd-text);
line-height: 1.05;
}
body.lbf-parade-page .pd-section-sub {
margin: 0.7rem 0 0;
font-size: 0.92rem;
line-height: 1.6;
color: var(--pd-text-2);
max-width: 640px;
}
body.lbf-parade-page .pd-h-accent {
color: var(--pd-blue);
}
body.lbf-parade-page .pd-h-accent--gold {
color: var(--pd-gold);
}
/* Buttons */
body.lbf-parade-page .pd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
padding: 0.7rem 1.4rem;
border-radius: 99px;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 0.85rem;
font-weight: 800;
text-decoration: none;
letter-spacing: 0.01em;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
body.lbf-parade-page .pd-btn--primary {
background: var(--pd-blue);
color: #fff;
box-shadow: 0 10px 24px rgba(0, 55, 167, 0.32);
}
body.lbf-parade-page .pd-btn--primary:hover {
background: var(--pd-blue-dark);
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(0, 55, 167, 0.42);
}
body.lbf-parade-page .pd-btn--ghost {
background: transparent;
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.55);
}
body.lbf-parade-page .pd-btn--ghost:hover {
background: rgba(255, 255, 255, 0.10);
border-color: var(--pd-gold);
}
/* Inline links */
body.lbf-parade-page .pd-link {
color: var(--pd-blue);
font-weight: 700;
text-decoration: none;
border-bottom: 1.5px solid rgba(0, 55, 167, 0.32);
transition: border-color 0.15s ease;
}
body.lbf-parade-page .pd-link:hover {
border-bottom-color: var(--pd-blue);
}
/* Lists */
body.lbf-parade-page .pd-list {
list-style: none;
margin: 0.85rem 0 0;
padding: 0;
}
body.lbf-parade-page .pd-list li {
position: relative;
padding: 0.45rem 0 0.45rem 1.4rem;
font-size: 0.85rem;
line-height: 1.55;
color: var(--pd-text-2);
border-top: 1px solid var(--pd-border-soft);
}
body.lbf-parade-page .pd-list li:first-child {
border-top: 0;
padding-top: 0;
}
body.lbf-parade-page .pd-list--clean li::before {
content: "";
position: absolute;
left: 0.35rem;
top: 0.85rem;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pd-blue);
}
body.lbf-parade-page .pd-list--clean li:first-child::before {
top: 0.4rem;
}
body.lbf-parade-page .pd-list--check li::before {
content: "✓";
position: absolute;
left: 0;
top: 0.45rem;
width: 16px;
height: 16px;
color: var(--pd-green);
font-weight: 800;
font-size: 0.85rem;
}
body.lbf-parade-page .pd-list--check li:first-child::before {
top: 0;
}
body.lbf-parade-page .pd-list li strong {
color: var(--pd-text);
font-weight: 700;
}
/* ═════════════════════════════════════════════════════════════════
§1 — HERO
Dark blue gradient block with bunting flag strip across the top.
Tighter than v29.4.0, with the right-side info card replaced by
a 4-cell inline strip below the CTAs.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-hero {
position: relative;
overflow: hidden;
border-radius: 1.5rem;
background:
radial-gradient(circle at 75% 25%, rgba(243, 195, 3, 0.18), transparent 35%),
radial-gradient(circle at 20% 80%, rgba(0, 127, 0, 0.22), transparent 38%),
linear-gradient(135deg, var(--pd-blue) 0%, var(--pd-blue-night) 100%);
box-shadow: var(--pd-shadow-hero);
display: block;
padding: 0;
}
/* Bunting flag strip — small triangle flags across the top */
body.lbf-parade-page .pd-bunting {
position: absolute;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
pointer-events: none;
z-index: 4;
padding: 0 1rem;
gap: 0.5rem;
}
body.lbf-parade-page .pd-bunting-flag {
display: block;
width: 0;
height: 0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-top: 22px solid currentColor;
filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18));
transform-origin: top center;
transition: transform 0.2s ease;
}
body.lbf-parade-page .pd-bunting-flag:nth-child(6n+1) { color: var(--pd-gold); }
body.lbf-parade-page .pd-bunting-flag:nth-child(6n+2) { color: #fff; }
body.lbf-parade-page .pd-bunting-flag:nth-child(6n+3) { color: var(--pd-pink); }
body.lbf-parade-page .pd-bunting-flag:nth-child(6n+4) { color: var(--pd-gold); }
body.lbf-parade-page .pd-bunting-flag:nth-child(6n+5) { color: var(--pd-green); }
body.lbf-parade-page .pd-bunting-flag:nth-child(6n) { color: var(--pd-blueberry); }
/* Scalloped drape — flags dip slightly toward the middle of the strip,
then rise toward the ends. Alternating tilt makes them feel like
real triangle bunting on a string rather than a rigid flag row.
12 flags total; flag 6 and 7 sit at the deepest dip. */
body.lbf-parade-page .pd-bunting-flag:nth-child(1) { transform: translateY(-4px) rotate(-6deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(2) { transform: translateY(-2px) rotate(-4deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(3) { transform: translateY(0) rotate(-2deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(4) { transform: translateY(2px) rotate(-1deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(5) { transform: translateY(3px) rotate(0deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(6) { transform: translateY(4px) rotate(1deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(7) { transform: translateY(4px) rotate(-1deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(8) { transform: translateY(3px) rotate(0deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(9) { transform: translateY(2px) rotate(1deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(10) { transform: translateY(0) rotate(2deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(11) { transform: translateY(-2px) rotate(4deg); }
body.lbf-parade-page .pd-bunting-flag:nth-child(12) { transform: translateY(-4px) rotate(6deg); }
/* Bunting wire — a soft curved line connecting the flags */
body.lbf-parade-page .pd-hero::before {
content: "";
position: absolute;
top: 4px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.25) 5%,
rgba(255, 255, 255, 0.25) 95%,
transparent 100%);
z-index: 3;
}
/* Confetti scattered inside the hero */
body.lbf-parade-page .pd-hero-bgwrap {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
body.lbf-parade-page .pd-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(56px);
}
body.lbf-parade-page .pd-hero-orb--a {
width: 320px;
height: 320px;
top: -120px;
right: -80px;
background: rgba(243, 195, 3, 0.20);
}
body.lbf-parade-page .pd-hero-orb--b {
width: 260px;
height: 260px;
bottom: -100px;
left: -80px;
background: rgba(0, 127, 0, 0.22);
}
body.lbf-parade-page .pd-hero-inner {
position: relative;
z-index: 5;
padding: 2.75rem 2rem 2rem;
color: #fff;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
align-items: center;
}
@media (min-width: 900px) {
body.lbf-parade-page .pd-hero-inner {
padding: 3rem 2.5rem 2.25rem;
grid-template-columns: 1.35fr 1fr;
gap: 2rem;
}
}
body.lbf-parade-page .pd-hero-left {
max-width: 720px;
min-width: 0;
}
body.lbf-parade-page .pd-hero-h {
font-family: 'Outfit', system-ui, sans-serif;
margin: 0.85rem 0 0;
font-size: clamp(1.8rem, 4.5vw, 3rem);
font-weight: 900;
letter-spacing: -0.035em;
line-height: 1;
color: #fff;
}
/* "Funday" gets a script-font treatment for festival personality.
Same idea as the car show's .script class. Pacifico is imported
at the top of this file. */
body.lbf-parade-page .pd-hero-h .pd-script {
font-family: 'Pacifico', cursive;
font-weight: 400;
font-size: 0.92em;
letter-spacing: 0.01em;
color: var(--pd-gold);
margin: 0 0.05em 0 0.02em;
display: inline-block;
transform: rotate(-2deg) translateY(0.04em);
}
body.lbf-parade-page .pd-hero-sub {
margin: 1rem 0 0;
font-size: 0.95rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
max-width: 520px;
}
body.lbf-parade-page .pd-hero-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.15rem 0 0;
}
body.lbf-parade-page .pd-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.20);
border-radius: 99px;
padding: 0.32rem 0.85rem;
font-family: 'Outfit', sans-serif;
font-size: 0.72rem;
font-weight: 700;
color: #fff;
letter-spacing: 0.04em;
text-transform: uppercase;
}
body.lbf-parade-page .pd-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--pd-gold);
}
body.lbf-parade-page .pd-hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 0.65rem;
margin: 1.4rem 0 0;
}
@media (max-width: 600px) {
body.lbf-parade-page .pd-hero-ctas {
flex-direction: column;
align-items: stretch;
}
body.lbf-parade-page .pd-hero-ctas .pd-btn {
width: 100%;
}
}
/* Hero info card → now an inline 4-cell strip below the CTAs.
On mobile the 4 cells stack into 2x2; on desktop they're in a row. */
body.lbf-parade-page .pd-hero-card {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
margin: 1.6rem 0 0;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 14px;
overflow: hidden;
backdrop-filter: blur(8px);
}
@media (min-width: 700px) {
body.lbf-parade-page .pd-hero-card {
grid-template-columns: repeat(4, 1fr);
}
}
body.lbf-parade-page .pd-hero-card-row {
display: flex;
flex-direction: column;
gap: 0.2rem;
padding: 0.7rem 0.95rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
body.lbf-parade-page .pd-hero-card-row:nth-child(1),
body.lbf-parade-page .pd-hero-card-row:nth-child(2) {
border-top: 0;
}
body.lbf-parade-page .pd-hero-card-row:nth-child(odd) {
border-left: 0;
}
@media (min-width: 700px) {
body.lbf-parade-page .pd-hero-card-row {
border-top: 0;
}
body.lbf-parade-page .pd-hero-card-row:nth-child(1) {
border-left: 0;
}
body.lbf-parade-page .pd-hero-card-row:nth-child(odd) {
border-left: 1px solid rgba(255, 255, 255, 0.08);
}
}
body.lbf-parade-page .pd-hero-card-label {
font-family: 'Outfit', sans-serif;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pd-gold);
}
body.lbf-parade-page .pd-hero-card-val {
font-family: 'Outfit', sans-serif;
font-size: 0.85rem;
font-weight: 700;
color: #fff;
letter-spacing: -0.005em;
}
/* ── Hero right column — photo placeholder ──────────────────────────
Sits beside the text content on desktop, stacks below on mobile.
When the parade photo is available, swap the whole block for an
![]()
. The aspect-ratio rule keeps the layout stable either way. */
body.lbf-parade-page .pd-hero-photo {
position: relative;
width: 100%;
aspect-ratio: 1.6 / 1;
border-radius: 18px;
overflow: hidden;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
border: 1.5px dashed rgba(255, 255, 255, 0.32);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s ease;
}
@media (min-width: 900px) {
body.lbf-parade-page .pd-hero-photo {
max-width: 460px;
margin-left: auto;
}
}
body.lbf-parade-page .pd-hero-photo::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%20%3C%21--%20Tilted%20paper%20rectangles%20--%3E%20%3Crect%20x%3D%2220%22%20y%3D%2230%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(20%2025%2031)%22%2F%3E%20%3Crect%20x%3D%2270%22%20y%3D%2220%22%20width%3D%2212%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(-15%2076%2021)%22%2F%3E%20%3Crect%20x%3D%22130%22%20y%3D%2240%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(45%20135%2041)%22%2F%3E%20%3Crect%20x%3D%22170%22%20y%3D%2260%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-30%20175%2061)%22%2F%3E%20%3Crect%20x%3D%2240%22%20y%3D%22100%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%230037a7%22%20transform%3D%22rotate(60%2045%20101)%22%2F%3E%20%3Crect%20x%3D%22100%22%20y%3D%2280%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23ff7f3f%22%20transform%3D%22rotate(-50%20105%2081)%22%2F%3E%20%3Crect%20x%3D%22150%22%20y%3D%22120%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23f3c303%22%20transform%3D%22rotate(15%20155%20121)%22%2F%3E%20%3Crect%20x%3D%2260%22%20y%3D%22150%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%234a3a8c%22%20transform%3D%22rotate(-25%2065%20151)%22%2F%3E%20%3Crect%20x%3D%2220%22%20y%3D%22170%22%20width%3D%2211%22%20height%3D%223%22%20fill%3D%22%23d63979%22%20transform%3D%22rotate(40%2025%20171)%22%2F%3E%20%3Crect%20x%3D%22120%22%20y%3D%22170%22%20width%3D%2210%22%20height%3D%223%22%20fill%3D%22%23007f00%22%20transform%3D%22rotate(-10%20125%20171)%22%2F%3E%20%3C%21--%20Round%20dots%20--%3E%20%3Ccircle%20cx%3D%2255%22%20cy%3D%2260%22%20r%3D%222%22%20fill%3D%22%23f3c303%22%2F%3E%20%3Ccircle%20cx%3D%22160%22%20cy%3D%2220%22%20r%3D%222.5%22%20fill%3D%22%230037a7%22%2F%3E%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22140%22%20r%3D%222%22%20fill%3D%22%23d63979%22%2F%3E%20%3Ccircle%20cx%3D%22180%22%20cy%3D%22160%22%20r%3D%222.5%22%20fill%3D%22%234a3a8c%22%2F%3E%20%3C%21--%20Streamer%20curl%20arcs%20--%3E%20%3Cpath%20d%3D%22M30%2080%20Q35%2075%2040%2080%20T50%2080%22%20stroke%3D%22%23ff7f3f%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M110%2030%20Q115%2025%20120%2030%20T130%2030%22%20stroke%3D%22%23007f00%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M155%2090%20Q160%2085%20165%2090%20T175%2090%22%20stroke%3D%22%234a3a8c%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
background-size: cover;
background-position: center;
opacity: 0.22;
pointer-events: none;
}
body.lbf-parade-page .pd-hero-photo-inner {
position: relative;
text-align: center;
padding: 1rem;
}
body.lbf-parade-page .pd-hero-photo-icon {
width: 36px;
height: 36px;
color: rgba(255, 255, 255, 0.55);
margin: 0 auto 0.4rem;
display: block;
}
body.lbf-parade-page .pd-hero-photo-label {
font-family: 'Outfit', sans-serif;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pd-gold);
}
body.lbf-parade-page .pd-hero-photo-sub {
margin-top: 0.4rem;
font-family: 'Outfit', sans-serif;
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.72);
line-height: 1.45;
}
/* ═════════════════════════════════════════════════════════════════
§2 — QUICK FACTS STRIP
Inline 4-cell card with vertical separators between cells.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
background: #fff;
border: 1px solid var(--pd-border);
border-radius: 1.5rem;
box-shadow: var(--pd-shadow-card);
overflow: hidden;
position: relative;
}
body.lbf-parade-page .pd-stats::before {
content: "";
position: absolute;
inset: 0;
opacity: 0.04;
background-image: radial-gradient(circle, var(--pd-blue) 1px, transparent 1px);
background-size: 18px 18px;
pointer-events: none;
}
@media (min-width: 700px) {
body.lbf-parade-page .pd-stats {
grid-template-columns: repeat(4, 1fr);
}
}
body.lbf-parade-page .pd-stat {
position: relative;
z-index: 1;
text-align: center;
padding: 1rem 0.6rem;
border-top: 1px solid var(--pd-border-soft);
border-left: 1px solid var(--pd-border-soft);
}
body.lbf-parade-page .pd-stat:nth-child(1),
body.lbf-parade-page .pd-stat:nth-child(2) {
border-top: 0;
}
body.lbf-parade-page .pd-stat:nth-child(odd) {
border-left: 0;
}
@media (min-width: 700px) {
body.lbf-parade-page .pd-stat {
border-top: 0;
}
body.lbf-parade-page .pd-stat:nth-child(1) {
border-left: 0;
}
body.lbf-parade-page .pd-stat:nth-child(odd) {
border-left: 1px solid var(--pd-border-soft);
}
}
body.lbf-parade-page .pd-stat-num {
font-family: 'Outfit', sans-serif;
font-size: clamp(1.1rem, 2vw, 1.4rem);
font-weight: 800;
color: var(--pd-blue);
letter-spacing: -0.015em;
line-height: 1;
}
/* The 4th stat ("Free") gets the blueberry color so the namesake
showing in a prominent number. Subtle but visible. */
body.lbf-parade-page .pd-stat:nth-child(4) .pd-stat-num {
color: var(--pd-blueberry);
}
body.lbf-parade-page .pd-stat-lbl {
margin-top: 0.35rem;
font-family: 'Outfit', sans-serif;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pd-text-3);
}
/* ═════════════════════════════════════════════════════════════════
§3 — WATCHING THE PARADE
Three info cards + route map placeholder.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-watch-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
margin-top: 1.5rem;
}
@media (min-width: 768px) {
body.lbf-parade-page .pd-watch-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
}
body.lbf-parade-page .pd-watch-card {
background: var(--pd-bg-3);
border: 1px solid var(--pd-border-soft);
border-radius: 14px;
padding: 1rem 1.1rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.lbf-parade-page .pd-watch-card:hover {
transform: translateY(-2px);
box-shadow: var(--pd-shadow-card);
}
body.lbf-parade-page .pd-watch-card-h {
display: flex;
align-items: center;
gap: 0.55rem;
font-family: 'Outfit', sans-serif;
font-size: 0.92rem;
font-weight: 800;
color: var(--pd-text);
}
body.lbf-parade-page .pd-icon {
width: 18px;
height: 18px;
color: var(--pd-blue);
flex-shrink: 0;
}
/* Route map placeholder */
body.lbf-parade-page .pd-routemap {
position: relative;
margin-top: 1.5rem;
border: 2px dashed var(--pd-border);
border-radius: 14px;
background:
linear-gradient(135deg, var(--pd-bg-2) 0%, var(--pd-bg-3) 100%);
padding: 1.5rem 1.25rem;
overflow: hidden;
min-height: 150px;
}
body.lbf-parade-page .pd-routemap-bg {
position: absolute;
inset: 0;
color: rgba(74, 58, 140, 0.32);
pointer-events: none;
}
body.lbf-parade-page .pd-routemap-bg svg {
width: 100%;
height: 100%;
display: block;
}
body.lbf-parade-page .pd-routemap-content {
position: relative;
max-width: 520px;
}
body.lbf-parade-page .pd-routemap-h {
font-family: 'Outfit', sans-serif;
margin: 0.55rem 0 0;
font-size: 1rem;
font-weight: 800;
color: var(--pd-text);
letter-spacing: -0.01em;
}
body.lbf-parade-page .pd-routemap-sub {
margin: 0.5rem 0 0;
font-size: 0.85rem;
line-height: 1.55;
color: var(--pd-text-2);
}
/* ═════════════════════════════════════════════════════════════════
§4 — DAY-OF TIMELINE
Tighter vertical timeline with ribbon-tag time labels and an
accented step-off marker.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-timeline {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
position: relative;
}
body.lbf-parade-page .pd-timeline::before {
content: "";
position: absolute;
left: 5.75rem;
top: 0.5rem;
bottom: 0.5rem;
width: 2px;
background: linear-gradient(180deg,
var(--pd-border) 0%,
var(--pd-blue) 50%,
var(--pd-border) 100%);
border-radius: 1px;
}
@media (max-width: 600px) {
body.lbf-parade-page .pd-timeline::before {
left: 1rem;
}
}
body.lbf-parade-page .pd-timeline-item {
position: relative;
display: grid;
grid-template-columns: 5rem 1fr;
gap: 1.5rem;
padding: 0.6rem 0;
}
@media (max-width: 600px) {
body.lbf-parade-page .pd-timeline-item {
grid-template-columns: 1fr;
padding-left: 2.25rem;
}
}
/* Ribbon-tag time label */
body.lbf-parade-page .pd-timeline-time {
font-family: 'Outfit', sans-serif;
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--pd-text-3);
text-align: right;
padding-top: 0.4rem;
position: relative;
}
@media (max-width: 600px) {
body.lbf-parade-page .pd-timeline-time {
text-align: left;
margin-bottom: 0.15rem;
padding-top: 0;
}
}
/* Timeline dot */
body.lbf-parade-page .pd-timeline-item::before {
content: "";
position: absolute;
left: 5.4rem;
top: 0.85rem;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--pd-blue);
z-index: 1;
}
@media (max-width: 600px) {
body.lbf-parade-page .pd-timeline-item::before {
left: 0.65rem;
top: 0.9rem;
}
}
/* Accented step-off marker */
body.lbf-parade-page .pd-timeline-item--accent::before {
background: var(--pd-gold);
border-color: var(--pd-gold);
box-shadow:
0 0 0 4px rgba(243, 195, 3, 0.22),
0 0 0 8px rgba(74, 58, 140, 0.18);
width: 12px;
height: 12px;
left: 5.35rem;
top: 0.8rem;
}
@media (max-width: 600px) {
body.lbf-parade-page .pd-timeline-item--accent::before {
left: 0.6rem;
top: 0.85rem;
}
}
body.lbf-parade-page .pd-timeline-item--accent .pd-timeline-time {
color: var(--pd-blue);
font-size: 0.78rem;
}
body.lbf-parade-page .pd-timeline-item--accent .pd-timeline-h {
color: var(--pd-blue);
}
body.lbf-parade-page .pd-timeline-h {
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
font-weight: 800;
color: var(--pd-text);
letter-spacing: -0.005em;
line-height: 1.2;
}
body.lbf-parade-page .pd-timeline-p {
margin: 0.3rem 0 0;
font-size: 0.85rem;
line-height: 1.55;
color: var(--pd-text-2);
}
/* ═════════════════════════════════════════════════════════════════
§5 — ENTERING THE PARADE
Four category cards (icon + name + desc), color-accented per
category. "Walking" featured.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-cats {
display: grid;
grid-template-columns: 1fr;
gap: 0.7rem;
margin: 1.4rem 0 0;
}
@media (min-width: 600px) {
body.lbf-parade-page .pd-cats {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
}
}
@media (min-width: 960px) {
body.lbf-parade-page .pd-cats {
grid-template-columns: repeat(4, 1fr);
}
}
body.lbf-parade-page .pd-cat {
position: relative;
background: #fff;
border: 1px solid var(--pd-border);
border-radius: 16px;
padding: 1rem 0.9rem 0.95rem;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
overflow: hidden;
}
/* Per-category color accent strip across the top */
body.lbf-parade-page .pd-cat::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--pd-blue);
}
body.lbf-parade-page .pd-cat:nth-child(1)::before { background: linear-gradient(90deg, var(--pd-blue), var(--pd-gold)); }
body.lbf-parade-page .pd-cat:nth-child(2)::before { background: linear-gradient(90deg, var(--pd-green), var(--pd-blue)); }
body.lbf-parade-page .pd-cat:nth-child(3)::before { background: linear-gradient(90deg, var(--pd-pink), var(--pd-orange)); }
body.lbf-parade-page .pd-cat:nth-child(4)::before { background: linear-gradient(90deg, var(--pd-gold), var(--pd-blueberry)); }
body.lbf-parade-page .pd-cat:hover {
transform: translateY(-3px);
border-color: var(--pd-blue);
box-shadow: var(--pd-shadow-card);
}
body.lbf-parade-page .pd-cat-icon {
width: 48px;
height: 48px;
margin: 0.4rem auto 0;
color: var(--pd-blue);
}
body.lbf-parade-page .pd-cat-icon svg {
width: 100%;
height: 100%;
}
body.lbf-parade-page .pd-cat:nth-child(1) .pd-cat-icon { color: var(--pd-blue); }
body.lbf-parade-page .pd-cat:nth-child(2) .pd-cat-icon { color: var(--pd-green); }
body.lbf-parade-page .pd-cat:nth-child(3) .pd-cat-icon { color: var(--pd-pink); }
body.lbf-parade-page .pd-cat:nth-child(4) .pd-cat-icon { color: var(--pd-blueberry); }
body.lbf-parade-page .pd-cat-name {
margin-top: 0.5rem;
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
font-weight: 800;
color: var(--pd-text);
letter-spacing: -0.005em;
}
body.lbf-parade-page .pd-cat-desc {
margin-top: 0.35rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--pd-text-2);
}
body.lbf-parade-page .pd-cats-note {
margin: 1rem 0 0;
padding: 0.7rem 0.95rem;
background: rgba(243, 195, 3, 0.10);
border-left: 3px solid var(--pd-gold);
border-radius: 6px;
font-size: 0.82rem;
color: var(--pd-text-2);
}
body.lbf-parade-page .pd-cats-note strong {
color: var(--pd-text);
}
body.lbf-parade-page .pd-enter-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.85rem;
margin-top: 1.5rem;
}
@media (min-width: 800px) {
body.lbf-parade-page .pd-enter-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
body.lbf-parade-page .pd-enter-card {
background: var(--pd-bg-3);
border: 1px solid var(--pd-border-soft);
border-radius: 14px;
padding: 1rem 1.2rem;
}
body.lbf-parade-page .pd-enter-card-h {
font-family: 'Outfit', sans-serif;
margin: 0;
font-size: 0.95rem;
font-weight: 800;
color: var(--pd-text);
letter-spacing: -0.005em;
}
/* ═════════════════════════════════════════════════════════════════
§6 — GRAND REVIEWING AREA
Boldest moment in the page. Dark blue gradient with confetti
inside, marquee-light dot border treatment.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-grand {
position: relative;
background:
radial-gradient(circle at 75% 25%, rgba(243, 195, 3, 0.16), transparent 35%),
radial-gradient(circle at 25% 75%, rgba(214, 57, 121, 0.18), transparent 38%),
linear-gradient(135deg, var(--pd-blue-deep) 0%, var(--pd-blue-night) 100%);
border-radius: 1.5rem;
overflow: hidden;
box-shadow: var(--pd-shadow-hero);
color: #fff;
}
/* Marquee-light border — bigger gold dots running around the inside
edge, with a soft halo and a subtle pulse animation. Built from
four positioned radial-gradient strips (top, bottom, left, right)
so the dots wrap a rectangle cleanly. */
body.lbf-parade-page .pd-grand::before {
content: "";
position: absolute;
top: 14px; left: 14px; right: 14px; bottom: 14px;
border-radius: 1.15rem;
pointer-events: none;
background-image:
radial-gradient(circle, var(--pd-gold) 3px, transparent 3.5px),
radial-gradient(circle, var(--pd-gold) 3px, transparent 3.5px),
radial-gradient(circle, var(--pd-gold) 3px, transparent 3.5px),
radial-gradient(circle, var(--pd-gold) 3px, transparent 3.5px);
background-position:
0 0, /* top strip */
0 100%, /* bottom strip*/
0 0, /* left strip */
100% 0; /* right strip */
background-size:
18px 6px, /* top: dots spaced every 18px, 6px tall */
18px 6px, /* bottom: same */
6px 18px, /* left: 6px wide, dots every 18px */
6px 18px; /* right: same */
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
filter:
drop-shadow(0 0 4px rgba(243, 195, 3, 0.6))
drop-shadow(0 0 8px rgba(243, 195, 3, 0.35));
animation: pd-marquee-pulse 2.4s ease-in-out infinite;
z-index: 3;
}
@keyframes pd-marquee-pulse {
0%, 100% { opacity: 0.85; }
50% { opacity: 1; }
}
/* Soft halo glow ring just inside the marquee — sits behind the dots
to give the whole edge a warm bias. */
body.lbf-parade-page .pd-grand::after {
content: "";
position: absolute;
top: 18px; left: 18px; right: 18px; bottom: 18px;
border-radius: 1.05rem;
pointer-events: none;
box-shadow:
inset 0 0 24px rgba(243, 195, 3, 0.10),
inset 0 0 60px rgba(243, 195, 3, 0.05);
z-index: 2;
}
body.lbf-parade-page .pd-grand-bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
body.lbf-parade-page .pd-grand-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
}
body.lbf-parade-page .pd-grand-orb--a {
width: 260px;
height: 260px;
top: -80px;
left: 25%;
background: rgba(243, 195, 3, 0.22);
}
body.lbf-parade-page .pd-grand-orb--b {
width: 200px;
height: 200px;
bottom: -50px;
right: 15%;
background: rgba(214, 57, 121, 0.18);
}
body.lbf-parade-page .pd-grand-inner {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2.5rem 1.85rem;
z-index: 2;
}
@media (min-width: 900px) {
body.lbf-parade-page .pd-grand-inner {
grid-template-columns: 1.3fr 1fr;
gap: 2rem;
padding: 2.75rem 2.5rem;
align-items: center;
}
}
body.lbf-parade-page .pd-grand-h {
font-family: 'Outfit', sans-serif;
margin: 0.85rem 0 0;
font-size: clamp(1.4rem, 3vw, 2.1rem);
font-weight: 900;
letter-spacing: -0.03em;
line-height: 1.05;
color: #fff;
}
body.lbf-parade-page .pd-grand-p {
margin: 1rem 0 0;
font-size: 0.9rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.86);
max-width: 540px;
}
body.lbf-parade-page .pd-grand-example {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 14px;
padding: 1.1rem 1.25rem;
backdrop-filter: blur(8px);
}
body.lbf-parade-page .pd-grand-example-h {
font-family: 'Outfit', sans-serif;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pd-gold);
margin-bottom: 0.7rem;
}
body.lbf-parade-page .pd-grand-example-quote {
position: relative;
font-family: 'Outfit', sans-serif;
font-size: 0.88rem;
font-style: italic;
line-height: 1.55;
color: rgba(255, 255, 255, 0.92);
padding-left: 1.4rem;
}
body.lbf-parade-page .pd-grand-example-quote strong {
color: var(--pd-gold);
font-style: normal;
font-weight: 700;
}
body.lbf-parade-page .pd-grand-quote-mark {
position: absolute;
left: 0;
top: -0.4rem;
font-family: serif;
font-size: 2.2rem;
font-style: normal;
color: var(--pd-gold);
line-height: 1;
}
/* ═════════════════════════════════════════════════════════════════
§7 — RULES & BASICS
Numbered rule cards with festive ribbon-style number tags.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-rules {
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 0.65rem;
}
@media (min-width: 768px) {
body.lbf-parade-page .pd-rules {
grid-template-columns: repeat(2, 1fr);
gap: 0.85rem;
}
}
body.lbf-parade-page .pd-rule {
display: grid;
grid-template-columns: 38px 1fr;
gap: 0.85rem;
background: #fff;
border: 1px solid var(--pd-border);
border-radius: 12px;
padding: 0.85rem 1rem;
align-items: start;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.lbf-parade-page .pd-rule:hover {
background: var(--pd-bg-3);
border-color: var(--pd-blue);
transform: translateY(-1px);
}
body.lbf-parade-page .pd-rule-num {
font-family: 'Outfit', sans-serif;
font-size: 0.78rem;
font-weight: 800;
color: #fff;
background: var(--pd-blue);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
/* Blueberry accent on rules 03 and 06 so the namesake color shows
in the rules section without overwhelming the section's blue. */
body.lbf-parade-page .pd-rule:nth-child(3) .pd-rule-num,
body.lbf-parade-page .pd-rule:nth-child(6) .pd-rule-num {
background: var(--pd-blueberry);
}
body.lbf-parade-page .pd-rule:hover .pd-rule-num {
background: var(--pd-gold);
color: var(--pd-blue-dark);
transform: scale(1.1);
}
body.lbf-parade-page .pd-rule-h {
font-family: 'Outfit', sans-serif;
font-size: 0.92rem;
font-weight: 800;
color: var(--pd-text);
letter-spacing: -0.005em;
line-height: 1.2;
}
body.lbf-parade-page .pd-rule-p {
margin: 0.3rem 0 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--pd-text-2);
}
/* ═════════════════════════════════════════════════════════════════
§8 — REGISTRATION FORM
Form embed with sticky-card aesthetic when on desktop.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-form {
margin-top: 1.5rem;
padding: 1.25rem;
background: linear-gradient(180deg, #fbfcff 0%, var(--pd-bg-3) 100%);
border: 1px solid var(--pd-border);
border-radius: 14px;
}
@media (min-width: 768px) {
body.lbf-parade-page .pd-form {
padding: 1.5rem;
}
}
body.lbf-parade-page .pd-form .gform_wrapper input[type="text"],
body.lbf-parade-page .pd-form .gform_wrapper input[type="email"],
body.lbf-parade-page .pd-form .gform_wrapper input[type="tel"],
body.lbf-parade-page .pd-form .gform_wrapper input[type="url"],
body.lbf-parade-page .pd-form .gform_wrapper input[type="number"],
body.lbf-parade-page .pd-form .gform_wrapper select,
body.lbf-parade-page .pd-form .gform_wrapper textarea {
border-radius: 10px;
border: 1px solid var(--pd-border);
}
/* Pending state — when no form is wired yet */
body.lbf-parade-page .pd-form-pending {
text-align: center;
padding: 1.5rem 1rem;
}
body.lbf-parade-page .pd-form-pending-h {
font-family: 'Outfit', sans-serif;
font-size: 1.05rem;
font-weight: 800;
color: var(--pd-text);
letter-spacing: -0.01em;
}
body.lbf-parade-page .pd-form-pending-p {
margin: 0.65rem auto 0;
max-width: 460px;
font-size: 0.85rem;
line-height: 1.6;
color: var(--pd-text-2);
}
body.lbf-parade-page .pd-form-pending-meta {
margin: 1.1rem 0 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.45rem;
font-family: 'Outfit', sans-serif;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pd-text-3);
}
/* ═════════════════════════════════════════════════════════════════
§9 — FAQ
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-faq {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
body.lbf-parade-page .pd-faq-item {
background: var(--pd-bg-3);
border: 1px solid var(--pd-border-soft);
border-radius: 12px;
padding: 0;
transition: border-color 0.15s ease, background 0.15s ease;
}
body.lbf-parade-page .pd-faq-item[open] {
border-color: var(--pd-blue);
background: #fff;
}
body.lbf-parade-page .pd-faq-q {
cursor: pointer;
font-family: 'Outfit', sans-serif;
font-size: 0.9rem;
font-weight: 800;
color: var(--pd-text);
padding: 0.85rem 1.1rem;
list-style: none;
position: relative;
padding-right: 2.5rem;
line-height: 1.35;
letter-spacing: -0.005em;
}
body.lbf-parade-page .pd-faq-q::-webkit-details-marker {
display: none;
}
body.lbf-parade-page .pd-faq-q::after {
content: "+";
position: absolute;
right: 1.1rem;
top: 50%;
transform: translateY(-50%);
font-family: 'Outfit', sans-serif;
font-size: 1.3rem;
font-weight: 600;
color: var(--pd-blue);
line-height: 1;
transition: transform 0.2s ease;
}
body.lbf-parade-page .pd-faq-item[open] .pd-faq-q::after {
content: "−";
}
body.lbf-parade-page .pd-faq-a {
padding: 0 1.1rem 0.95rem;
font-size: 0.85rem;
line-height: 1.6;
color: var(--pd-text-2);
}
/* ═════════════════════════════════════════════════════════════════
§10 — CLOSING NOTE
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-close {
text-align: center;
padding: 1.5rem 1.25rem;
position: relative;
}
body.lbf-parade-page .pd-close::before,
body.lbf-parade-page .pd-close::after {
content: "";
position: absolute;
top: 50%;
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--pd-border), transparent);
}
body.lbf-parade-page .pd-close::before { left: 1.5rem; }
body.lbf-parade-page .pd-close::after { right: 1.5rem; transform: scaleX(-1); }
body.lbf-parade-page .pd-close-p {
max-width: 620px;
margin: 0 auto;
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
font-style: italic;
line-height: 1.55;
color: var(--pd-text-2);
}
/* ═════════════════════════════════════════════════════════════════
v30.0.2: Sunday Funday Parade hero — actual photo loaded state.
When the .pd-hero-photo--has-image modifier is present, hide the
dashed-border placeholder treatment and let the ![]()
fill the box.
───────────────────────────────────────────────────────────────── */
body.lbf-parade-page .pd-hero-photo--has-image {
background: none;
border: 0;
backdrop-filter: none;
padding: 0;
margin: 0;
display: block;
}
body.lbf-parade-page .pd-hero-photo--has-image::before {
display: none;
}
body.lbf-parade-page .pd-hero-photo-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
border-radius: 18px;
}
body.lbf-parade-page .pd-hero-photo-caption {
margin: 0.55rem 0 0;
font-family: 'Outfit', sans-serif;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
text-align: center;
line-height: 1.4;
}
@media (min-width: 900px) {
body.lbf-parade-page .pd-hero-photo--has-image {
max-width: 460px;
margin-left: auto;
}
}