/* ============================================================ DEWPOINT PICKLEBALL LANDING PAGE THEME V1 HERO = DARK NAVY BOOKING = WHITE FEATURES = LIGHT LAVENDER SOCIAL = WHITE NEWS = LIGHT LAVENDER FOOTER = DARK NAVY / PURPLE Loaded AFTER dewpoint-app.css ============================================================ */ :root{ --dp-navy:#020b25; --dp-navy-2:#07143a; --dp-navy-3:#101345; --dp-purple:#7928e8; --dp-purple-2:#9344f3; --dp-blue:#287cf5; --dp-text:#11172b; --dp-muted:#6d758b; --dp-white:#ffffff; --dp-soft:#f7f6fc; --dp-soft-purple:#f5f2ff; --dp-border:#e5e6ef; --dp-shadow: 0 10px 30px rgba(27,28,54,.08); } /* ============================================================ PAGE ============================================================ */ html, body{ background:var(--dp-navy) !important; } body .dp-site{ background:var(--dp-white) !important; } /* ============================================================ HERO / HEADER KEEP THE DARK DEWPOINT LOOK ============================================================ */ body .dp-site .dp-final-nav{ background: rgba(2,9,32,.94) !important; border-bottom: 1px solid rgba(143,87,255,.12) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; } /* * Do not force a white background onto the hero. * Existing hero artwork remains intact. */ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-final-board > header{ color:#fff !important; } /* ============================================================ BOOKING SECTION WHITE BAND ============================================================ */ body .dp-site .dp-home-booking{ position:relative !important; padding: 38px clamp(15px,4vw,58px) 42px !important; color:var(--dp-text) !important; background: linear-gradient( 180deg, #ffffff 0%, #fdfdff 100% ) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; } /* Booking title */ body .dp-site .dp-home-booking-title{ text-align:center !important; } body .dp-site .dp-home-booking-title small{ color:var(--dp-purple) !important; font-weight:800 !important; } body .dp-site .dp-home-booking-title h2{ color:#111423 !important; } body .dp-site .dp-home-booking-title p{ color:var(--dp-muted) !important; } /* ============================================================ BOOKING CARD ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking{ max-width:1380px !important; margin-inline:auto !important; } body .dp-site .dp-home-booking .dp-pm-booking .dp-tap-booking-main{ padding:20px !important; color:var(--dp-text) !important; background:#fff !important; border: 1px solid #e5e6ed !important; border-radius:20px !important; box-shadow: 0 14px 45px rgba(25,28,58,.07) !important; } /* ============================================================ DATE STRIP ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .swipe-date-shell{ background:transparent !important; } body .dp-site .dp-home-booking .dp-pm-booking .desktop-date-arrow{ color:#1b2340 !important; background:#fff !important; border: 1px solid #e5e7f0 !important; box-shadow: 0 5px 16px rgba(24,30,55,.07) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button{ color:#171b2b !important; background:#fff !important; border: 1px solid #e4e5ec !important; box-shadow: 0 4px 13px rgba(25,30,55,.05) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button small, body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button span{ color:#5c6376 !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button b{ color:#111526 !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active{ color:#fff !important; background: linear-gradient( 135deg, #812ce9, #6540f3 ) !important; border-color: transparent !important; box-shadow: 0 8px 22px rgba(107,55,229,.24) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active small, body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active span, body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active b{ color:#fff !important; } /* ============================================================ LEGEND ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .slot-legend{ color:#50586d !important; } body .dp-site .dp-home-booking .dp-pm-booking .slot-legend span{ color:#50586d !important; } /* ============================================================ BOOKING GRID ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-grid-scroll{ overflow:auto !important; background:#fff !important; border: 1px solid #e4e6ee !important; border-radius:15px !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-slot-grid{ background:#fff !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-grid-head, body .dp-site .dp-home-booking .dp-pm-booking .tap-time{ color:#161c31 !important; background:#fbfbfd !important; border: 1px solid #edf0f5 !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-time b{ color:#151a2a !important; } /* ============================================================ AVAILABLE ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.available{ color:#347cf3 !important; background:#fff !important; border: 1px solid #cfe0ff !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.available b{ color:#347cf3 !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.available span{ color:#596177 !important; } /* ============================================================ SELECTED ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.picked{ color:#fff !important; background: linear-gradient( 135deg, #8c28e9, #6b3ff2, #3778f4 ) !important; border: 1px solid transparent !important; box-shadow: 0 7px 20px rgba(110,58,229,.22) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.picked b, body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.picked span{ color:#fff !important; } /* ============================================================ BOOKED ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.booked{ color:#db5d63 !important; background:#fff1f1 !important; border: 1px solid #ffd5d7 !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.booked b, body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.booked span{ color:#d65b61 !important; } /* ============================================================ HOLD ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.held{ color:#b97c18 !important; background:#fff8e6 !important; border: 1px solid #f4dda4 !important; } /* ============================================================ BLOCKED / LAPSED ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.blocked, body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.lapsed{ color:#8d94a5 !important; background:#f3f4f7 !important; border: 1px solid #e3e5ea !important; } /* ============================================================ INLINE CHECKOUT KEEP CHECKOUT INSIDE WHITE BOOKING SECTION ============================================================ */ body .dp-site .dp-home-booking .dp-inline-checkout{ max-width:1050px !important; margin: 20px auto 0 !important; color:var(--dp-text) !important; background:transparent !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card, body .dp-site .dp-home-booking .dp-inline-checkout .payment-recovery-card, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r{ color:var(--dp-text) !important; background:#fff !important; border: 1px solid #e4e5ec !important; border-radius:20px !important; box-shadow: 0 14px 40px rgba(29,31,63,.08) !important; } body .dp-site .dp-home-booking .dp-inline-checkout h1, body .dp-site .dp-home-booking .dp-inline-checkout h2, body .dp-site .dp-home-booking .dp-inline-checkout h3, body .dp-site .dp-home-booking .dp-inline-checkout h4{ color:#111526 !important; } /* Primary checkout buttons */ body .dp-site .dp-home-booking .dp-inline-checkout .primary, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-main-button{ color:#fff !important; background: linear-gradient( 90deg, #8929e9, #6341ef 48%, #277cf6 ) !important; border:0 !important; box-shadow: 0 9px 24px rgba(103,55,229,.24) !important; } /* ============================================================ FEATURE / WHY DEWPOINT SECTION SOFT LAVENDER BAND ============================================================ */ body .dp-site .dp-final-feature-strip{ display:grid !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:18px !important; padding: 34px clamp(18px,5vw,72px) 42px !important; background: linear-gradient( 180deg, #f8f7fc, #f4f1ff ) !important; } body .dp-site .dp-final-feature-strip > div{ min-height:145px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:24px !important; color:#161b2e !important; text-align:center !important; background:#fff !important; border: 1px solid #e8e5f2 !important; border-radius:17px !important; box-shadow: 0 10px 30px rgba(30,27,63,.06) !important; } body .dp-site .dp-final-feature-strip > div::before{ position:static !important; transform:none !important; width:54px !important; height:54px !important; margin: 0 auto 14px !important; display:grid !important; place-items:center !important; color:#7541dc !important; background:#f0eaff !important; border-radius:50% !important; box-shadow:none !important; } body .dp-site .dp-final-feature-strip > div::after{ margin-top:8px !important; color:#656d80 !important; font-size:11px !important; font-weight:500 !important; line-height:1.55 !important; } /* ============================================================ SOCIAL CONNECT WHITE BAND ============================================================ */ body .dp-site .dp-social-section{ padding: 38px clamp(18px,5vw,72px) 42px !important; color:var(--dp-text) !important; background:#fff !important; } body .dp-site .dp-social-section .dp-section-heading h2{ color:#171b2b !important; } body .dp-site .dp-social-section .dp-section-heading p{ color:#70778b !important; } body .dp-site .dp-social-grid{ max-width:1380px !important; grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap:16px !important; margin-inline:auto !important; } body .dp-site .dp-social-card{ min-height:145px !important; color:#171b2b !important; background:#fff !important; border: 1px solid #e4e6ed !important; border-radius:15px !important; box-shadow: var(--dp-shadow) !important; } body .dp-site .dp-social-card-head b{ color:#171b2b !important; } body .dp-site .dp-social-card-head small, body .dp-site .dp-social-card p{ color:#737b8e !important; } /* Social buttons */ body .dp-site .dp-social-card button{ color:#fff !important; background: linear-gradient( 90deg, #812be7, #5946ef ) !important; border:0 !important; } /* ============================================================ NEWS & UPDATES LIGHT LAVENDER / GRAY BAND ============================================================ */ body .dp-site .dp-news-section{ padding: 38px clamp(18px,5vw,72px) 46px !important; color:var(--dp-text) !important; background: linear-gradient( 180deg, #f8f7fc, #f3f2f8 ) !important; } body .dp-site .dp-news-section .dp-section-heading h2{ color:#171b2b !important; } body .dp-site .dp-news-section .dp-section-heading p{ color:#70778b !important; } body .dp-site .dp-news-grid{ max-width:1380px !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:18px !important; margin-inline:auto !important; } body .dp-site .dp-news-card{ min-height:210px !important; overflow:hidden !important; color:#171b2b !important; background:#fff !important; border: 1px solid #e4e5ec !important; border-radius:15px !important; box-shadow: var(--dp-shadow) !important; } body .dp-site .dp-news-copy{ background:#fff !important; } body .dp-site .dp-news-copy h3{ color:#171b2b !important; } body .dp-site .dp-news-copy p{ color:#676f83 !important; } body .dp-site .dp-news-meta small{ color:#7928e8 !important; } body .dp-site .dp-news-meta em{ color:#8990a2 !important; } body .dp-site .dp-news-copy button, body .dp-site .dp-view-news{ color:#6d32de !important; } /* ============================================================ FOOTER DARK NAVY / PURPLE ============================================================ */ body .dp-site .dp-footer{ color:#fff !important; background: radial-gradient( circle at 100% 100%, rgba(91,29,190,.24), transparent 37% ), linear-gradient( 115deg, #020b25, #061238 58%, #18083d ) !important; border-top:0 !important; } body .dp-site .dp-footer-grid{ max-width:1380px !important; padding-top:42px !important; padding-bottom:32px !important; } body .dp-site .dp-footer-logo strong, body .dp-site .dp-footer-column h4{ color:#fff !important; } body .dp-site .dp-footer-logo small, body .dp-site .dp-footer-brand p, body .dp-site .dp-footer-column p, body .dp-site .dp-footer-column button{ color:#aab5d3 !important; } body .dp-site .dp-footer-brand > span{ color:#a760ff !important; } body .dp-site .dp-footer-socials span{ color:#fff !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.11) !important; } body .dp-site .dp-footer-bottom{ color:#7886a9 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } /* ============================================================ PICKLE MANIA STYLE BALLOON KEEP GLASS + DEWPOINT COLORS ============================================================ */ body .dp-pm-balloon{ background: linear-gradient( 145deg, rgba(15,17,57,.88), rgba(35,16,73,.84) ) !important; border: 1px solid rgba(137,97,255,.48) !important; backdrop-filter: blur(14px) saturate(135%) !important; -webkit-backdrop-filter: blur(14px) saturate(135%) !important; box-shadow: 0 18px 55px rgba(8,8,30,.30) !important; } body .dp-pm-balloon .booking-float-checkout{ color:#fff !important; background: linear-gradient( 90deg, #8b28eb, #6542f2, #287bf5 ) !important; border:0 !important; } /* ============================================================ TABLET ============================================================ */ @media(max-width:1000px){ body .dp-site .dp-final-feature-strip{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } body .dp-site .dp-social-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; } body .dp-site .dp-news-grid{ grid-template-columns: 1fr !important; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ /* * BOOKING */ body .dp-site .dp-home-booking{ padding: 28px 12px 30px !important; } body .dp-site .dp-home-booking .dp-pm-booking .dp-tap-booking-main{ padding:10px !important; border-radius:15px !important; } /* * Preserve mobile date swipe fix */ body .dp-site .dp-home-booking .dp-pm-booking .swipe-date-shell{ display:block !important; width:100% !important; overflow:visible !important; } body .dp-site .dp-home-booking .dp-pm-booking .desktop-date-arrow{ display:none !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip{ display:flex !important; gap:8px !important; overflow-x:auto !important; padding: 5px 4px 10px !important; scrollbar-width:none !important; -webkit-overflow-scrolling: touch !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip::-webkit-scrollbar{ display:none !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip > button{ flex: 0 0 72px !important; width:72px !important; min-width:72px !important; height:76px !important; scroll-snap-align:start !important; } /* * Booking court table still scrolls horizontally. */ body .dp-site .dp-home-booking .dp-pm-booking .tap-slot-grid{ min-width: 760px !important; } /* * FEATURES */ body .dp-site .dp-final-feature-strip{ display:flex !important; gap:12px !important; overflow-x:auto !important; padding: 26px 12px 32px !important; scroll-snap-type: x proximity !important; } body .dp-site .dp-final-feature-strip > div{ flex: 0 0 260px !important; scroll-snap-align: start !important; } /* * SOCIAL */ body .dp-site .dp-social-section, body .dp-site .dp-news-section{ padding: 30px 12px !important; } body .dp-site .dp-social-grid{ grid-template-columns: 1fr !important; } /* * NEWS */ body .dp-site .dp-news-grid{ grid-template-columns: 1fr !important; } /* * FOOTER */ body .dp-site .dp-footer-grid{ grid-template-columns: 1fr !important; gap:25px !important; padding: 34px 18px 24px !important; } body .dp-site .dp-footer-bottom{ flex-direction: column !important; align-items: flex-start !important; gap:6px !important; padding: 14px 18px 22px !important; } } /* ============================================================ HERO DARK NAVY FIX Keep only the hero section dark ============================================================ */ body .dp-site .dp-final-board{ background:transparent !important; } /* Hero wrapper */ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-hero-shell, body .dp-site .dp-home-hero, body .dp-site .dp-final-board > header{ background: radial-gradient(circle at 78% 20%, rgba(118,52,255,.28), transparent 28%), radial-gradient(circle at 68% 48%, rgba(41,120,255,.14), transparent 30%), linear-gradient(115deg, #020b25 0%, #06143b 52%, #21084f 100%) !important; color:#fff !important; } /* Hero text */ body .dp-site .dp-final-hero h1, body .dp-site .dp-final-hero h2, body .dp-site .dp-final-hero h3, body .dp-site .dp-final-hero h4, body .dp-site .dp-hero h1, body .dp-site .dp-hero h2, body .dp-site .dp-hero h3, body .dp-site .dp-hero h4, body .dp-site .dp-home-hero h1, body .dp-site .dp-home-hero h2, body .dp-site .dp-home-hero h3, body .dp-site .dp-home-hero h4{ color:#fff !important; } body .dp-site .dp-final-hero p, body .dp-site .dp-final-hero small, body .dp-site .dp-final-hero span, body .dp-site .dp-hero p, body .dp-site .dp-hero small, body .dp-site .dp-hero span, body .dp-site .dp-home-hero p, body .dp-site .dp-home-hero small, body .dp-site .dp-home-hero span{ color:rgba(255,255,255,.86) !important; } /* Big watermark text */ body .dp-site .dp-watermark-logo{ color:rgba(160,145,255,.12) !important; } /* Hero button */ body .dp-site .dp-final-hero .primary, body .dp-site .dp-final-hero .dp-book-now, body .dp-site .dp-hero .primary, body .dp-site .dp-home-hero .primary{ color:#fff !important; background:linear-gradient(90deg,#8c28ea,#6541f1,#2d7bf6) !important; border:0 !important; box-shadow:0 10px 26px rgba(105,56,229,.28) !important; } /* Keep logo side visually blended */ body .dp-site .dp-final-hero .dp-hero-art, body .dp-site .dp-hero .dp-hero-art, body .dp-site .dp-home-hero .dp-hero-art{ background:transparent !important; } /* Make sure the section after hero remains light */ body .dp-site .dp-home-booking{ margin-top:0 !important; position:relative !important; z-index:2 !important; } /* ============================================================ DEWPOINT BALLOON — 50% TIGHTER SPACING ============================================================ */ /* overall balloon slightly slimmer */ body .dp-pm-balloon{ width:min(320px, calc(100vw - 16px)) !important; max-width:320px !important; } /* top summary area */ body .dp-pm-balloon .booking-float-top{ padding:8px 10px !important; gap:6px !important; } /* selected count + total */ body .dp-pm-balloon .booking-float-summary{ margin:0 !important; gap:1px !important; } body .dp-pm-balloon .booking-float-summary b{ margin:0 !important; font-size:11px !important; } body .dp-pm-balloon .booking-float-summary strong{ margin:0 !important; font-size:15px !important; } /* actions */ body .dp-pm-balloon .booking-float-actions{ gap:5px !important; } /* minimize / maximize */ body .dp-pm-balloon .booking-float-toggle{ width:30px !important; height:30px !important; min-width:30px !important; padding:0 !important; border-radius:8px !important; } /* checkout button */ body .dp-pm-balloon .booking-float-checkout{ min-height:30px !important; padding: 6px 10px !important; border-radius:8px !important; font-size:10px !important; } /* selected-bookings container */ body .dp-pm-balloon .booking-float-items{ padding:6px !important; max-height:250px !important; } /* each date group */ body .dp-pm-balloon .dp-booking-date-group{ margin: 0 0 4px !important; padding:5px !important; border-radius:9px !important; } /* date heading */ body .dp-pm-balloon .dp-booking-date-title{ margin: 0 0 3px !important; padding:0 !important; } /* slot list */ body .dp-pm-balloon .dp-balloon-slot-list{ gap:4px !important; } /* each selected court/time */ body .dp-pm-balloon .dp-balloon-slot-list article{ min-height:0 !important; margin:0 !important; padding: 6px 7px !important; gap:6px !important; border-radius:8px !important; } body .dp-pm-balloon .dp-balloon-slot-list article b{ font-size:10px !important; } body .dp-pm-balloon .dp-balloon-slot-list article small{ margin-top:1px !important; font-size:8px !important; } body .dp-pm-balloon .dp-balloon-slot-list article strong{ font-size:10px !important; } /* remove X */ body .dp-pm-balloon .dp-balloon-slot-list article > button{ width:24px !important; height:24px !important; min-width:24px !important; padding:0 !important; font-size:11px !important; } /* ============================================================ MOBILE — EVEN MORE COMPACT ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon{ width:min(285px, calc(100vw - 12px)) !important; max-width:285px !important; right:6px !important; bottom:6px !important; } body .dp-pm-balloon .booking-float-top{ padding:7px 8px !important; } body .dp-pm-balloon .booking-float-items{ padding:5px !important; max-height:190px !important; } body .dp-pm-balloon .dp-booking-date-group{ padding:4px !important; } body .dp-pm-balloon .dp-balloon-slot-list article{ padding:5px 6px !important; } } /* ============================================================ DEWPOINT BALLOON REDUCE OUTER EDGE/GUTTER ONLY Do NOT tighten internal content ============================================================ */ body .dp-pm-balloon{ padding:5px !important; } /* remove any extra child margin creating the thick frame */ body .dp-pm-balloon .booking-float-top{ margin:0 !important; width:100% !important; } body .dp-pm-balloon .booking-float-items{ margin:0 !important; width:100% !important; } /* keep corners clean against slimmer outer edge */ body .dp-pm-balloon .booking-float-top{ border-radius:13px 13px 0 0 !important; } body .dp-pm-balloon .booking-float-items{ border-radius:0 0 13px 13px !important; } /* MOBILE — same thin outer edge */ @media(max-width:650px){ body .dp-pm-balloon{ padding:5px !important; } } /* ============================================================ DEWPOINT BALLOON — WIDER LAYOUT Keep internal spacing. Only widen the container and use the space better. ============================================================ */ /* DESKTOP */ body .dp-pm-balloon{ width:min( 430px, calc(100vw - 24px) ) !important; max-width:430px !important; padding:5px !important; } /* Date group: small date column on left, booking rows take remaining width */ body .dp-pm-balloon .dp-booking-date-group{ display:grid !important; grid-template-columns: 105px minmax(0,1fr) !important; align-items:center !important; column-gap:10px !important; width:100% !important; } /* Date label */ body .dp-pm-balloon .dp-booking-date-title{ width:100% !important; min-width:0 !important; } /* Selected slot side */ body .dp-pm-balloon .dp-balloon-slot-list{ width:100% !important; min-width:0 !important; } /* Each court selection uses full available width */ body .dp-pm-balloon .dp-balloon-slot-list article{ width:100% !important; box-sizing:border-box !important; } /* ============================================================ MOBILE Almost full-width balloon ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon{ width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; left:8px !important; right:8px !important; padding:5px !important; } body .dp-pm-balloon .dp-booking-date-group{ grid-template-columns: 82px minmax(0,1fr) !important; column-gap:7px !important; } } /* ============================================================ DEWPOINT LOGO THEME V1 Based on official Dewpoint purple / blue / navy identity ============================================================ */ :root{ --dp-logo-navy:#03091d; --dp-logo-navy2:#071436; --dp-logo-purple:#6d28d9; --dp-logo-purple2:#8b3df0; --dp-logo-blue:#075fc9; --dp-logo-blue2:#1c7df2; --dp-logo-silver:#a9b0bf; --dp-logo-light:#f7f8fc; --dp-logo-white:#ffffff; --dp-logo-gradient: linear-gradient( 90deg, #6d28d9 0%, #7c35e4 34%, #125fc8 68%, #1c7df2 100% ); } /* ============================================================ OVERALL PAGE ============================================================ */ body .dp-site, body .dp-final-board{ background:#03091d !important; } /* ============================================================ NAVIGATION ============================================================ */ body .dp-site .dp-final-nav{ background: linear-gradient( 90deg, rgba(3,9,29,.97), rgba(7,20,54,.97) 55%, rgba(32,10,70,.96) ) !important; border-bottom: 1px solid rgba(111,55,220,.22) !important; box-shadow: 0 8px 30px rgba(0,0,0,.22) !important; } body .dp-site .dp-final-nav a, body .dp-site .dp-final-nav button{ color:#fff !important; } body .dp-site .dp-final-nav a:hover{ color:#9b61f2 !important; } /* ============================================================ HERO ============================================================ */ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-home-hero{ background: radial-gradient( circle at 78% 35%, rgba(31,112,238,.20), transparent 24% ), radial-gradient( circle at 67% 30%, rgba(117,43,221,.24), transparent 30% ), linear-gradient( 110deg, #020718 0%, #061338 52%, #250951 100% ) !important; color:#fff !important; } body .dp-site .dp-final-hero h1, body .dp-site .dp-final-hero h2, body .dp-site .dp-hero h1, body .dp-site .dp-hero h2, body .dp-site .dp-home-hero h1, body .dp-site .dp-home-hero h2{ color:#fff !important; } body .dp-site .dp-final-hero p, body .dp-site .dp-hero p, body .dp-site .dp-home-hero p{ color:#d7def0 !important; } /* hero accent / gradient words */ body .dp-site .dp-final-hero .accent, body .dp-site .dp-final-hero .gradient, body .dp-site .dp-hero .accent, body .dp-site .dp-hero .gradient{ background: var(--dp-logo-gradient) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color: transparent !important; } /* ============================================================ HERO PRIMARY BUTTON ============================================================ */ body .dp-site .dp-final-hero .primary, body .dp-site .dp-final-hero .dp-book-now, body .dp-site .dp-hero .primary, body .dp-site .dp-home-hero .primary{ color:#fff !important; background: var(--dp-logo-gradient) !important; border:0 !important; box-shadow: 0 10px 28px rgba(76,61,210,.32) !important; } /* ============================================================ BOOKING SECTION WHITE — LIKE APPROVED PREVIEW ============================================================ */ body .dp-site .dp-home-booking{ background: linear-gradient( 180deg, #ffffff, #fbfbfe ) !important; color:#101426 !important; } body .dp-site .dp-home-booking-title small{ color:#702edc !important; } body .dp-site .dp-home-booking-title h2{ color:#101426 !important; } body .dp-site .dp-home-booking-title p{ color:#73798a !important; } /* ============================================================ ACTIVE DATE ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-date-strip button.active{ color:#fff !important; background: var(--dp-logo-gradient) !important; border-color: transparent !important; box-shadow: 0 8px 22px rgba(90,55,214,.25) !important; } /* ============================================================ AVAILABLE COURT BLUE ACCENT ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.available{ color:#1269d8 !important; background:#fff !important; border: 1px solid #c9ddfa !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.available b{ color:#1269d8 !important; } /* ============================================================ SELECTED COURT LOGO PURPLE -> BLUE ============================================================ */ body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.picked{ color:#fff !important; background: var(--dp-logo-gradient) !important; border-color: transparent !important; box-shadow: 0 7px 20px rgba(82,54,210,.26) !important; } body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.picked b, body .dp-site .dp-home-booking .dp-pm-booking .tap-cell.picked span{ color:#fff !important; } /* ============================================================ FEATURE SECTION VERY LIGHT PURPLE BAND ============================================================ */ body .dp-site .dp-final-feature-strip{ background: linear-gradient( 180deg, #f8f7fc, #f2effb ) !important; } body .dp-site .dp-final-feature-strip > div{ color:#15192a !important; background:#fff !important; border: 1px solid #e6e2f0 !important; box-shadow: 0 10px 28px rgba(30,25,62,.06) !important; } body .dp-site .dp-final-feature-strip > div::before{ color:#fff !important; background: var(--dp-logo-gradient) !important; } /* ============================================================ SOCIAL CONNECT WHITE SECTION ============================================================ */ body .dp-site .dp-social-section{ color:#15192a !important; background:#fff !important; } body .dp-site .dp-social-section .dp-section-heading h2{ color:#15192a !important; } body .dp-site .dp-social-card{ color:#15192a !important; background:#fff !important; border: 1px solid #e5e7ef !important; box-shadow: 0 8px 24px rgba(25,27,55,.06) !important; } body .dp-site .dp-social-card-head b{ color:#15192a !important; } body .dp-site .dp-social-icon{ color:#fff !important; background: var(--dp-logo-gradient) !important; } body .dp-site .dp-social-card button{ color:#fff !important; background: var(--dp-logo-gradient) !important; } /* ============================================================ NEWS & UPDATES VERY LIGHT SECTION ============================================================ */ body .dp-site .dp-news-section{ color:#15192a !important; background: linear-gradient( 180deg, #f8f8fb, #f3f2f8 ) !important; } body .dp-site .dp-news-section .dp-section-heading h2{ color:#15192a !important; } body .dp-site .dp-news-card{ color:#15192a !important; background:#fff !important; border: 1px solid #e4e5ec !important; box-shadow: 0 8px 24px rgba(24,27,55,.06) !important; } body .dp-site .dp-news-copy{ background:#fff !important; } body .dp-site .dp-news-copy h3{ color:#15192a !important; } body .dp-site .dp-news-meta small, body .dp-site .dp-news-copy button, body .dp-site .dp-view-news{ color:#6e30dc !important; } /* ============================================================ PICKLE MANIA BALLOON KEEP STRUCTURE — APPLY DEWPOINT LOGO COLORS ============================================================ */ body .dp-pm-balloon{ color:#fff !important; background: linear-gradient( 145deg, rgba(5,11,31,.91), rgba(17,17,62,.88) ) !important; border: 2px solid rgba(110,59,220,.55) !important; box-shadow: 0 18px 50px rgba(0,0,0,.32), 0 0 24px rgba(37,105,225,.12) !important; backdrop-filter: blur(14px) saturate(140%) !important; -webkit-backdrop-filter: blur(14px) saturate(140%) !important; } /* checkout */ body .dp-pm-balloon .booking-float-checkout{ color:#fff !important; background: var(--dp-logo-gradient) !important; border:0 !important; box-shadow: 0 8px 20px rgba(67,66,215,.30) !important; } /* minimize / maximize */ body .dp-pm-balloon .booking-float-toggle{ color:#fff !important; background: rgba(92,49,190,.40) !important; border: 1px solid rgba(144,95,236,.45) !important; } /* scrollbar */ body .dp-pm-balloon .booking-float-items::-webkit-scrollbar-thumb{ background: linear-gradient( #7b34df, #176fdc ) !important; } /* ============================================================ FOOTER DEWPOINT NAVY / PURPLE / BLUE ============================================================ */ body .dp-site .dp-footer{ color:#fff !important; background: radial-gradient( circle at 100% 100%, rgba(100,35,209,.24), transparent 37% ), linear-gradient( 105deg, #020718 0%, #07163c 56%, #26094e 100% ) !important; border-top: 1px solid rgba(103,70,204,.20) !important; } body .dp-site .dp-footer-logo strong{ color:#fff !important; } body .dp-site .dp-footer-logo small{ color:#aeb7c9 !important; } body .dp-site .dp-footer-column h4{ color:#fff !important; } body .dp-site .dp-footer-column p, body .dp-site .dp-footer-column button, body .dp-site .dp-footer-brand p{ color:#aeb8d0 !important; } body .dp-site .dp-footer-brand > span{ color:#8c51ec !important; } body .dp-site .dp-footer-socials span{ color:#fff !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.11) !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ body .dp-site .dp-final-hero, body .dp-site .dp-hero, body .dp-site .dp-home-hero{ background: radial-gradient( circle at 90% 20%, rgba(111,43,221,.24), transparent 25% ), linear-gradient( 145deg, #020718, #07163b 60%, #210947 ) !important; } body .dp-pm-balloon{ border-width: 1px !important; } } /* ============================================================ DEWPOINT LOADING / SPINNER THEME Replace remaining Pickle Mania green ============================================================ */ /* Common loading wrappers */ body .dp-site .loading, body .dp-site .loader, body .dp-site .app-loader, body .dp-site .page-loader, body .dp-site .loading-screen, body .dp-site .loading-overlay, body .dp-site .loading-wrap{ color:#6d28d9 !important; } /* Circular spinners */ body .dp-site .spinner, body .dp-site .loading-spinner, body .dp-site .loader-spinner, body .dp-site .spinner-border{ border-color: rgba(28,125,242,.20) !important; border-top-color: #6d28d9 !important; border-right-color: #1c7df2 !important; } /* SVG loaders */ body .dp-site .loader svg, body .dp-site .loading svg, body .dp-site .app-loader svg, body .dp-site .page-loader svg{ color:#6d28d9 !important; fill:#6d28d9 !important; stroke:#1c7df2 !important; } /* Loader circles / paths */ body .dp-site .loader svg circle, body .dp-site .loading svg circle, body .dp-site .app-loader svg circle{ stroke:#6d28d9 !important; } body .dp-site .loader svg path, body .dp-site .loading svg path, body .dp-site .app-loader svg path{ fill:#1c7df2 !important; stroke:#1c7df2 !important; } /* Dots loader */ body .dp-site .loader-dot, body .dp-site .loading-dot, body .dp-site .loading-dots span{ background: linear-gradient( 135deg, #6d28d9, #1c7df2 ) !important; color:#fff !important; } /* Progress bars */ body .dp-site .loading-progress, body .dp-site .loader-progress, body .dp-site .progress-bar{ background: linear-gradient( 90deg, #6d28d9, #8b3df0, #1c7df2 ) !important; } /* If the loader uses a pseudo-element */ body .dp-site .loader::before, body .dp-site .loader::after, body .dp-site .loading-spinner::before, body .dp-site .loading-spinner::after{ border-color: rgba(109,40,217,.18) !important; border-top-color: #6d28d9 !important; border-right-color: #1c7df2 !important; } /* Generic old green classes sometimes used by Pickle Mania */ body .dp-site .text-green, body .dp-site .text-success, body .dp-site .loader-success{ color:#6d28d9 !important; } body .dp-site .bg-green, body .dp-site .bg-success{ background: linear-gradient( 90deg, #6d28d9, #1c7df2 ) !important; } /* ============================================================ FULL-PAGE LOADING SCREEN ============================================================ */ body .dp-site .loading-screen, body .dp-site .app-loader, body .dp-site .page-loader{ background: radial-gradient( circle at center, rgba(109,40,217,.12), transparent 28% ), linear-gradient( 135deg, #020718, #071436 58%, #21094a ) !important; } /* Loading text */ body .dp-site .loading-screen p, body .dp-site .loading-screen span, body .dp-site .app-loader p, body .dp-site .app-loader span{ color:#dbe4f6 !important; } /* ============================================================ DEWPOINT EXACT STARTUP / WAITING SCREEN Actual classes from Pickle Mania source: .loading-card .loading-dot .loading-card .logo ============================================================ */ /* Waiting screen */ .loading-card{ min-height:100vh !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; color:#ffffff !important; background: radial-gradient( circle at 50% 42%, rgba(109,40,217,.22), transparent 25% ), radial-gradient( circle at 60% 48%, rgba(28,125,242,.14), transparent 32% ), linear-gradient( 135deg, #020718 0%, #071436 58%, #21094a 100% ) !important; } /* DEWPOINT logo text */ .loading-card .logo{ margin-bottom:24px !important; color:#ffffff !important; font-size:25px !important; text-shadow: 0 0 20px rgba(100,70,230,.22) !important; } /* * Pickle Mania originally makes .logo b lime/green. * Override that exact element. */ .loading-card .logo b{ color:#7c3aed !important; background: linear-gradient( 90deg, #8b3df0, #6d28d9 42%, #1c7df2 ) !important; -webkit-background-clip:text !important; background-clip:text !important; -webkit-text-fill-color: transparent !important; } /* Any icon beside the logo */ .loading-card .logo i{ color:#1c7df2 !important; } /* ============================================================ ACTUAL ANIMATED WAITING DOT This is what was still GREEN. ============================================================ */ .loading-dot{ color:#7c3aed !important; font-size:32px !important; text-shadow: 0 0 10px rgba(109,40,217,.75), 0 0 24px rgba(28,125,242,.45) !important; animation: dewpointLoaderPulse 1s infinite ease-in-out !important; } @keyframes dewpointLoaderPulse{ 0%{ opacity:.40; color:#6d28d9; transform:scale(.90); } 50%{ opacity:1; color:#1c7df2; transform:scale(1.12); } 100%{ opacity:.40; color:#8b3df0; transform:scale(.90); } } /* Waiting text */ .loading-card p{ margin-top:8px !important; color:#cbd5eb !important; font-size:11px !important; letter-spacing:.2px !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ .loading-card .logo{ font-size:21px !important; margin-bottom:20px !important; } .loading-dot{ font-size:29px !important; } } /* ============================================================ DEWPOINT MOBILE BALLOON — TRUE CENTER FIX ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon{ position:fixed !important; left:50% !important; right:auto !important; transform: translateX(-50%) !important; width: calc(100vw - 16px) !important; max-width: 430px !important; bottom: calc( 8px + env(safe-area-inset-bottom) ) !important; margin:0 !important; } } /* Very small phones */ @media(max-width:380px){ body .dp-pm-balloon{ width: calc(100vw - 10px) !important; } } /* ============================================================ DEWPOINT IPHONE BALLOON TOGGLE FIX Larger touch target + Safari-safe interaction ============================================================ */ body .dp-pm-balloon .booking-float-actions{ position:relative !important; z-index:20 !important; pointer-events:auto !important; } body .dp-pm-balloon .booking-float-toggle{ position:relative !important; z-index:30 !important; pointer-events:auto !important; cursor:pointer !important; touch-action:manipulation !important; -webkit-user-select:none !important; user-select:none !important; -webkit-tap-highlight-color: transparent !important; } /* ============================================================ IPHONE / MOBILE Visible button stays compact, touch area is much larger. ============================================================ */ @media(max-width:650px){ body .dp-pm-balloon .booking-float-toggle{ width:36px !important; height:36px !important; min-width:36px !important; display:grid !important; place-items:center !important; padding:0 !important; font-size:14px !important; overflow:visible !important; } /* * Invisible 48 x 48px Apple-friendly touch target. */ body .dp-pm-balloon .booking-float-toggle::after{ content:"" !important; position:absolute !important; width:48px !important; height:48px !important; left:50% !important; top:50% !important; transform: translate(-50%,-50%) !important; } /* * Make sure nothing in the header sits over the toggle. */ body .dp-pm-balloon .booking-float-top{ position:relative !important; z-index:10 !important; overflow:visible !important; pointer-events:auto !important; } body .dp-pm-balloon .booking-float-checkout{ position:relative !important; z-index:10 !important; } /* * Expanded state */ body .dp-pm-balloon:not(.collapsed) .booking-float-items{ display:block !important; overflow-y:auto !important; -webkit-overflow-scrolling: touch !important; } /* * Minimized state */ body .dp-pm-balloon.collapsed .booking-float-items{ display:none !important; } } /* ============================================================ DEWPOINT HERO — REAL LOGO ============================================================ */ body .dp-site .dp-final-art{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-height:360px !important; overflow:visible !important; } /* glow behind logo */ body .dp-site .dp-final-art::before{ content:"" !important; position:absolute !important; width:72% !important; aspect-ratio:1 !important; border-radius:50% !important; background: radial-gradient( circle, rgba(109,40,217,.28) 0%, rgba(28,125,242,.13) 38%, transparent 70% ) !important; filter: blur(8px) !important; pointer-events:none !important; } body .dp-site .dp-final-logo-wrap{ position:relative !important; z-index:2 !important; width:min(470px,88%) !important; display:flex !important; align-items:center !important; justify-content:center !important; margin:auto !important; } body .dp-site .dp-final-logo-image{ display:block !important; width:100% !important; height:auto !important; max-height:430px !important; object-fit:contain !important; object-position:center !important; filter: drop-shadow( 0 18px 32px rgba(0,0,0,.28) ) drop-shadow( 0 0 18px rgba(100,56,225,.22) ) !important; } /* * Hide old DP placeholder if any old CSS/markup survives. */ body .dp-site .dp-final-artmark{ display:none !important; } /* ============================================================ LARGE DESKTOP ============================================================ */ @media(min-width:1300px){ body .dp-site .dp-final-logo-wrap{ width:min(520px,90%) !important; } } /* ============================================================ TABLET ============================================================ */ @media(max-width:1000px){ body .dp-site .dp-final-art{ min-height:300px !important; } body .dp-site .dp-final-logo-wrap{ width:min(390px,84%) !important; } } /* ============================================================ MOBILE Keep logo centered below hero copy ============================================================ */ @media(max-width:650px){ body .dp-site .dp-final-art{ min-height:235px !important; padding: 8px 0 18px !important; } body .dp-site .dp-final-logo-wrap{ width:min( 285px, 76vw ) !important; } body .dp-site .dp-final-art::before{ width:88% !important; } }