/* ============================================================ Casino Pier Parties Portal — shared design system. Mirrors the Breakwater Beach sales portal (bwb-portal/_styles.css) so the two siblings read as one property. Single source of truth for tokens + shared components; screen CSS lives in each page. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); :root{ --brand:#0056b3; --brand-deep:#003a7a; --ink:#111827; --muted:#5b6573; --gold:#FFD700; --aqua:#19B5C9; --sand:#F4E9D0; --sand-deep:#ead9b6; --surface:#fff; --bg:#F2F5F8; --line:#e4e8ee; --success:#1B9E5A; --alert:#E4572E; --shadow:0 6px 20px rgba(16,33,64,.10); --shadow-sm:0 2px 8px rgba(16,33,64,.08); --r:18px; --r-sm:12px; } *{box-sizing:border-box} html,body{margin:0} [data-ic]{display:inline-flex;align-items:center;justify-content:center;line-height:0;vertical-align:-.12em} [data-ic] svg{width:1em;height:1em;display:block;flex:none} .ic[data-ic]{font-size:20px;color:var(--brand)} body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} h1,h2,h3,.disp{font-family:Poppins,sans-serif;letter-spacing:-.01em;margin:0} a{color:var(--brand)} button{font-family:inherit;cursor:pointer} img,svg{max-width:100%} .wrap{max-width:1320px;margin:0 auto;padding:0 20px} .muted{color:var(--muted)} .center{text-align:center} /* ---- Header ---- */ header.site{background:linear-gradient(100deg,var(--brand-deep),var(--brand));color:#fff} .topbar{display:flex;align-items:center;gap:18px;min-height:64px} /* Text brand lockup (the BWB portal uses an image; we render a clean type lockup) */ .brand{display:flex;flex-direction:column;justify-content:center;line-height:1;text-decoration:none;flex:none;color:#fff} .brand .nm{font-family:Poppins;font-weight:800;font-size:18px;letter-spacing:.01em} .brand small{font-size:10px;font-weight:700;letter-spacing:.16em;opacity:.78;margin-top:3px} /* Image brand lockup: the combined Casino Pier + Breakwater Beach logo. Shared by the hub AND the SSR landing pages so the header reads identical everywhere (URL resolves against this stylesheet: /parties/assets/...). */ .brand .lg{display:block;width:198px;height:38px;font-size:0; background:url('assets/cpbwblogo.webp') left center/contain no-repeat} .topbar nav{margin-left:auto;display:flex;align-items:center;gap:24px;font-weight:600;font-size:14px} .topbar nav a{color:#fff;text-decoration:none;opacity:.88;line-height:1;display:inline-flex;align-items:center;transition:opacity .14s} .topbar nav a:hover{opacity:1} .topbar nav a.xpark{opacity:1;margin-left:4px} a.xpark{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;border-radius:999px;padding:9px 15px;font-weight:700;font-size:14px;line-height:1;text-decoration:none;white-space:nowrap} a.xpark:hover{background:rgba(255,255,255,.24)} /* ---- Surfaces ---- */ .panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm)} .card{padding:18px} .section-title{font-family:Poppins;font-weight:700;font-size:22px;margin:0 0 4px} .section-sub{color:var(--muted);font-size:15px;margin:0 0 16px} /* ---- Buttons ---- */ .cta{background:var(--brand);color:#fff;border:0;border-radius:13px;font-family:Poppins;font-weight:700;font-size:16px;padding:14px 26px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center} .cta:hover{filter:brightness(1.06)} /* ---- Hero ---- */ .hero{position:relative;border-radius:var(--r);overflow:hidden;color:#fff;min-height:250px;display:flex;align-items:center} .hero .bg{position:absolute;inset:0;background-size:cover;background-position:center} .hero .scrim2{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,18,42,.82),rgba(0,18,42,.52) 55%,rgba(0,18,42,.36))} .hero .inner{position:relative;padding:40px 32px} .hero h1{font-size:38px;line-height:1.05;max-width:16ch} .hero p{font-size:17px;max-width:46ch;opacity:.95;margin:10px 0 0} /* ---- Footer ---- */ footer.site{background:var(--brand-deep);color:#cfe0f3;margin-top:40px} /* Breathing room from the viewport edges (the shared .wrap's 20/14px reads too tight against the full-bleed navy bar) */ footer.site .wrap{padding-left:34px;padding-right:34px} footer.site .row{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;padding:22px 0 24px;font-size:13px} footer.site a{color:#fff;text-decoration:none;font-weight:600;white-space:nowrap} footer.site .sp{margin-left:auto;opacity:.7;font-size:12px} @media(max-width:640px){ footer.site .wrap{padding-left:22px;padding-right:22px} footer.site .row{justify-content:center;text-align:center;gap:10px 16px;font-size:12.5px} footer.site .sp{margin-left:0;flex-basis:100%;margin-top:4px} footer.site a.xpark{flex-basis:100%;justify-content:center} } @media(max-width:900px){ .wrap{padding:0 14px} .topbar{gap:10px} .topbar nav a:not(.xpark){display:none} /* Keep the sibling-park pill fully inside the viewport on phones */ a.xpark{padding:8px 12px;font-size:13px} .hero .inner{padding:28px 18px} .hero h1{font-size:28px} .hero p{font-size:15px} footer.site .row{justify-content:center;text-align:center;gap:10px 18px;padding:24px 0 26px} footer.site .sp{margin-left:0;flex-basis:100%;margin-top:2px} } /* ============================================================ FESTIVE LAYER — the party dial. Boardwalk-carnival whimsy on the same navy/gold/aqua system: ocean waves rolling into the footer (ferris wheel riding the horizon), pennant bunting, sticker-tilted chips, confetti sprinkle, balloon floats, and a gold shine sweep on CTAs. CSS-only; honors reduced motion. ============================================================ */ /* ---- The sea: layered animated waves that carry the page into the footer. Markup:
[optional ferris svg]
placed immediately ABOVE footer.site (footer keeps its navy = the deep). */ .sea{position:relative;height:118px;margin-top:44px;overflow:hidden;pointer-events:none; /* A whisper of sky: pale haze settling toward the waterline */ background:linear-gradient(180deg,rgba(242,245,248,0) 34%,rgba(196,226,238,.28) 82%,rgba(196,226,238,.45) 100%)} /* The buoy's lamp casts a soft gold halo (painted first = behind the water). Centered on the lamp itself: buoy sits at left:16%, its svg is 17px wide, and the light cap rides ~34px above the sea floor. */ .sea::before{content:"";position:absolute;left:calc(16% + 8.5px);bottom:34px;width:90px;height:90px;translate:-50% 50%; background:radial-gradient(circle,rgba(255,215,0,.4) 0 7px,rgba(255,215,0,.14) 20px,rgba(255,215,0,0) 44px)} .sea .w{position:absolute;left:0;right:0;bottom:0;display:block;background-repeat:repeat-x;background-position:0 bottom} /* Organic tiles (uneven crest heights) + a slow vertical swell breathing under the drift. Each layer's drift distance is an exact multiple of its tile width, so the loop restart is seamless. */ .sea .w1{height:34px;opacity:.35;background-size:280px 34px; animation:seaDrift1 130s linear infinite,seaSwell 12s ease-in-out -3s infinite alternate; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 34'%3E%3Cpath d='M0 21 Q17.5 8 35 21 Q52.5 14 70 21 Q87.5 6 105 21 Q122.5 15 140 21 Q157.5 9 175 21 Q192.5 13 210 21 Q227.5 7 245 21 Q262.5 14 280 21 V34 H0 Z' fill='%2319B5C9'/%3E%3C/svg%3E")} .sea .w2{height:26px;opacity:.55;background-size:220px 26px; animation:seaDrift2 105s linear infinite reverse,seaSwell 14s ease-in-out -8s infinite alternate; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 26'%3E%3Cpath d='M0 15 Q13.75 5 27.5 15 Q41.25 10 55 15 Q68.75 4 82.5 15 Q96.25 11 110 15 Q123.75 6 137.5 15 Q151.25 9 165 15 Q178.75 5 192.5 15 Q206.25 10 220 15 V26 H0 Z' fill='%233E8FD0'/%3E%3C/svg%3E")} .sea .w3{height:18px;background-size:160px 18px; animation:seaDrift3 80s linear infinite,seaSwell 10s ease-in-out infinite alternate; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 18'%3E%3Cpath d='M0 10 Q10 3 20 10 Q30 7 40 10 Q50 2 60 10 Q70 6 80 10 Q90 3 100 10 Q110 7 120 10 Q130 4 140 10 Q150 7 160 10 V18 H0 Z' fill='%23003a7a'/%3E%3C/svg%3E")} @keyframes seaDrift1{from{background-position-x:0}to{background-position-x:-1400px}} @keyframes seaDrift2{from{background-position-x:0}to{background-position-x:-1320px}} @keyframes seaDrift3{from{background-position-x:0}to{background-position-x:-1440px}} @keyframes seaSwell{from{transform:translateY(0)}to{transform:translateY(2.5px)}} /* A red buoy bobs close in (between the mid and front waves); a small distant sailboat drifts across BEHIND the mid wave every three minutes or so, sailing for under half its cycle and resting offscreen the rest. */ .sea .buoy{position:absolute;left:16%;bottom:12px;animation:buoyBob 7.5s ease-in-out infinite;transform-origin:50% 100%} .sea .buoy svg{display:block;width:17px;height:auto} @keyframes buoyBob{0%,100%{transform:translateY(0) rotate(-3.5deg)}50%{transform:translateY(-3px) rotate(3.5deg)}} /* Low enough that the mid wave (drawn in front) laps over the hull: the boat sits IN the water, sails clear, instead of skimming above the crests. */ .sea .boat{position:absolute;left:-90px;bottom:14px;color:var(--brand-deep);opacity:.85;animation:boatSail 170s linear infinite} .sea .boat svg{display:block;width:44px;height:auto;animation:boatBob 6.5s ease-in-out infinite} @keyframes boatSail{0%{transform:translateX(0)}45%{transform:translateX(calc(100vw + 200px))}100%{transform:translateX(calc(100vw + 200px))}} @keyframes boatBob{0%,100%{transform:translateY(0) rotate(-1.8deg)}50%{transform:translateY(-2.5px) rotate(2.2deg)}} /* The pier skyline rides the horizon: ferris wheel turning, a coaster train running its hill, a flag waving, gulls drifting by. Silhouette-simple, alive-but-calm. */ /* Raised above the front waves: the pier stands ON the horizon, feet just touching the faint back wave, instead of drowning in the crests. */ .sea .skyline{position:absolute;right:4%;bottom:26px;color:var(--brand-deep);opacity:.9} .sea .skyline svg{display:block;width:min(300px,54vw);height:auto} .fw{transform-box:fill-box;transform-origin:center;animation:fwSpin 26s linear infinite} @keyframes fwSpin{to{transform:rotate(360deg)}} /* Coaster physics, encoded in keyframe spacing over a LINEAR timeline: a slow constant chain-lift up the first hill, a fast gravity drop over the crest, momentum carrying through the valley, speed bleeding off up the second hill, then the run-out. Cars ride the same path on small delays so they bunch on the lift and stretch on the drop, then the ride "loads" offscreen before the next dispatch. */ .coaster-train{offset-path:path('M112 72 Q142 14 170 56 Q186 78 204 62 Q220 48 236 72');offset-rotate:auto; animation:coasterRun 17s linear infinite} .coaster-train.c2{animation-delay:.32s} .coaster-train.c3{animation-delay:.64s} @keyframes coasterRun{ 0%{offset-distance:0%;opacity:0} 3%{offset-distance:2%;opacity:1} 28%{offset-distance:24%} 31%{offset-distance:34%} 36%{offset-distance:60%} 41%{offset-distance:74%} 46%{offset-distance:90%} 50%{offset-distance:99%;opacity:1} 52%{offset-distance:100%;opacity:0} 100%{offset-distance:100%;opacity:0} } .flagwave{transform-box:fill-box;transform-origin:left center;animation:flagWave 3.6s ease-in-out infinite} @keyframes flagWave{0%,100%{transform:skewY(0deg) scaleX(1)}50%{transform:skewY(-8deg) scaleX(.92)}} .gull{animation:gullDrift 22s ease-in-out infinite} .gull.g2{animation-delay:-11s} @keyframes gullDrift{0%{transform:translate(0,0)}50%{transform:translate(-46px,-6px)}100%{transform:translate(0,0)}} footer.site{margin-top:0} /* ---- Pennant bunting (flags on a string). Markup: Full-bleed by default so the string reads as strung across the page. Each flag FLUTTERS: SMIL skewX around its hanging point, staggered timing per flag (SMIL runs inside CSS background images). Reduced motion swaps in the static tile below. */ .pennants{display:block;width:100%;height:14px;background-repeat:repeat-x;background-size:112px 14px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 14'%3E%3Cpath d='M0 1 H112' stroke='%23dbe4ee' stroke-width='1.5'/%3E%3Cg transform='translate(6,1)'%3E%3Cpath d='M0 0 l7 11 l7 -11 z' fill='%23FFD700'%3E%3CanimateTransform attributeName='transform' type='skewX' values='0;10;-6;8;0' dur='2.4s' begin='-0.3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(34,1)'%3E%3Cpath d='M0 0 l7 11 l7 -11 z' fill='%2319B5C9'%3E%3CanimateTransform attributeName='transform' type='skewX' values='0;-8;7;-10;0' dur='3s' begin='-1.4s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(62,1)'%3E%3Cpath d='M0 0 l7 11 l7 -11 z' fill='%230056b3'%3E%3CanimateTransform attributeName='transform' type='skewX' values='0;9;-7;6;0' dur='2.1s' begin='-0.9s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg transform='translate(90,1)'%3E%3Cpath d='M0 0 l7 11 l7 -11 z' fill='%23E4572E'%3E%3CanimateTransform attributeName='transform' type='skewX' values='0;-10;6;-7;0' dur='2.7s' begin='-2s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E")} /* ---- Confetti sprinkle: a static scatter for hero photos. Add class "confetti-zone" to any positioned container. (The falling pieces live in the page-wide .confetti-sky layer below.) */ .confetti-zone{position:relative} .confetti-zone::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image: radial-gradient(circle 3px at 12% 22%, #FFD700 98%, transparent), radial-gradient(circle 2px at 28% 64%, #19B5C9 98%, transparent), radial-gradient(circle 2.5px at 46% 18%, #E4572E 98%, transparent), radial-gradient(circle 2px at 63% 74%, #FFD700 98%, transparent), radial-gradient(circle 3px at 78% 30%, #19B5C9 98%, transparent), radial-gradient(circle 2px at 90% 60%, #fff 98%, transparent), radial-gradient(circle 2px at 8% 82%, #fff 98%, transparent)} /* The confetti sky: a fixed, full-viewport layer of sparse pieces drifting down over the WHOLE page (they ride in front of content, pointer-events none, small + translucent so they delight instead of distract). Markup: */ .confetti-sky{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:3} .confetti-sky i{position:absolute;top:-5vh;width:8px;height:12px;border-radius:2.5px;opacity:0; animation:skyFall 13s linear infinite} .confetti-sky i:nth-child(1){left:7%;background:var(--gold)} .confetti-sky i:nth-child(2){left:21%;background:var(--aqua);animation-delay:-4s;animation-duration:15s;scale:.8} .confetti-sky i:nth-child(3){left:34%;background:#E4572E;animation-delay:-9s;animation-duration:12s} .confetti-sky i:nth-child(4){left:49%;background:#fff;animation-delay:-6s;animation-duration:16s;scale:.75} .confetti-sky i:nth-child(5){left:60%;background:var(--gold);animation-delay:-11s;animation-duration:14s;scale:.9} .confetti-sky i:nth-child(6){left:73%;background:var(--aqua);animation-delay:-2s;animation-duration:12.5s} .confetti-sky i:nth-child(7){left:85%;background:#E4572E;animation-delay:-7.5s;animation-duration:15.5s;scale:.8} .confetti-sky i:nth-child(8){left:94%;background:#fff;animation-delay:-13s;animation-duration:13.5s;scale:.7} @keyframes skyFall{ 0%{translate:0 0;rotate:0deg;opacity:0} 5%{opacity:.7} 30%{translate:18px 30vh;rotate:120deg} 55%{translate:-12px 56vh;rotate:230deg;opacity:.7} 80%{translate:16px 84vh;rotate:330deg} 94%{opacity:.45} 100%{translate:-4px 110vh;rotate:420deg;opacity:0} } /* ---- Sticker chips: white sticker-sheet look with a playful tilt. Apply .sticker-row to a chip container; children get alternating tilts. */ .sticker-row>*{background:#fff !important;border:2px solid var(--brand-deep) !important;color:var(--brand-deep) !important; box-shadow:0 2px 0 rgba(0,58,122,.18);border-radius:99px} .sticker-row>*:nth-child(odd){transform:rotate(-2deg)} .sticker-row>*:nth-child(even){transform:rotate(1.6deg)} .sticker-row>*:nth-child(3n){transform:rotate(2.4deg)} /* ---- Marker swash: a hand-drawn gold underline for one word in a headline. Markup: word (font stays the display face, no italics). */ em.swash{font-style:normal;position:relative;white-space:nowrap} em.swash::after{content:"";position:absolute;left:-2%;right:-4%;bottom:-.12em;height:.34em;z-index:-1; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 Q30 3 55 7 T98 6' stroke='%23FFD700' stroke-width='7' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat} /* ---- CTA shine: a gold gleam sweeps festive buttons on hover */ .cta{position:relative;overflow:hidden} .cta::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-70%;width:36%;transform:rotate(18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .5s ease;pointer-events:none} .cta:hover::after{left:150%} /* ---- Balloons (invite page). Markup: bl2 bl3 */ .balloon{position:absolute;width:34px;height:42px;border-radius:50% 50% 50% 50%/46% 46% 54% 54%; pointer-events:none;animation:balloonSway 7s ease-in-out infinite; box-shadow:inset -5px -7px 0 rgba(0,18,42,.12)} .balloon::before{content:"";position:absolute;left:50%;bottom:-6px;width:8px;height:7px;translate:-50% 0; background:inherit;clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:none} .balloon::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:46px;translate:-50% 5px; background:linear-gradient(180deg,rgba(0,18,42,.35),rgba(0,18,42,.08))} .balloon.bl1{background:var(--gold)} .balloon.bl2{background:var(--aqua);animation-delay:-2.4s;scale:.82} .balloon.bl3{background:#E4572E;animation-delay:-4.8s;scale:.68} @keyframes balloonSway{0%,100%{translate:0 0;rotate:-3deg}50%{translate:4px -10px;rotate:4deg}} /* ---- Card wobble: festive hover on package cards */ .pkg:hover{transform:translateY(-4px) rotate(-.6deg) !important} .pkg:nth-child(even):hover{transform:translateY(-4px) rotate(.6deg) !important} @media (prefers-reduced-motion: reduce){ .sea .w,.sea .skyline,.fw,.coaster-train,.flagwave,.gull,.sea .boat,.sea .boat svg,.sea .buoy,.confetti-sky i,.balloon,.cta::after{animation:none !important;transition:none !important} /* Still flags for still preferences (SMIL in the animated tile ignores this media query, so swap the whole tile) */ .pennants{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 14'%3E%3Cpath d='M0 1 H112' stroke='%23dbe4ee' stroke-width='1.5'/%3E%3Cpath d='M6 1 l7 11 l7-11 z' fill='%23FFD700'/%3E%3Cpath d='M34 1 l7 11 l7-11 z' fill='%2319B5C9'/%3E%3Cpath d='M62 1 l7 11 l7-11 z' fill='%230056b3'/%3E%3Cpath d='M90 1 l7 11 l7-11 z' fill='%23E4572E'/%3E%3C/svg%3E")} }