: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; } /* ============================================================ CANONICAL DEWPOINT HEADER One default owner for desktop, tablet and mobile navigation. ============================================================ */ body .dp-site.dp-final-board{ padding-top:74px; } body .dp-site .dp-final-nav{ position:fixed; inset:0 0 auto; z-index:9999; width:100%; min-height:74px; display:grid; grid-template-columns:220px minmax(0,1fr) 220px; align-items:center; gap:25px; padding:0 max(24px,calc((100vw - var(--dp-content-width,1180px))/2)); color:#fff; background:linear-gradient( 90deg, rgba(3,9,29,.97), rgba(7,20,54,.97) 55%, rgba(32,10,70,.96) ); border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 10px 30px rgba(3,9,29,.16); backdrop-filter:blur(12px); } body .dp-site .dp-final-nav .dp-brand{ min-width:220px; display:flex; align-items:center; gap:12px; padding:0; color:#fff; background:transparent; border:0; cursor:pointer; text-align:left; } body .dp-site .dp-final-nav .dp-brand > span{ display:flex; flex-direction:column; } body .dp-site .dp-final-nav .dp-brand strong{ color:#fff; font-size:20px; font-weight:1000; font-style:italic; line-height:1; letter-spacing:.5px; } body .dp-site .dp-final-nav .dp-brand small{ margin-top:5px; color:#fff; font-size:8px; font-weight:800; line-height:1; letter-spacing:5px; } body .dp-site .dp-final-nav .dp-nav-links{ min-width:0; display:flex; align-items:stretch; justify-content:center; gap:20px; } body .dp-site .dp-final-nav .dp-nav-links button{ position:relative; min-height:74px; display:flex; align-items:center; justify-content:center; padding:0 12px; color:#fff; background:transparent; border:0; font-size:13px; font-weight:800; letter-spacing:.9px; cursor:pointer; } body .dp-site .dp-final-nav .dp-nav-links button::after{ content:""; position:absolute; right:12px; bottom:13px; left:12px; height:2px; border-radius:999px; background:linear-gradient(90deg,var(--dp-purple),var(--dp-blue)); opacity:0; transform:scaleX(.5); transition:opacity .18s ease,transform .18s ease; } body .dp-site .dp-final-nav .dp-nav-links button:hover::after, body .dp-site .dp-final-nav .dp-nav-links button:focus-visible::after{ opacity:1; transform:scaleX(1); } body .dp-site .dp-final-nav > .dp-nav-actions, body .dp-site .dp-final-nav .dp-book-top{ display:none; } body .dp-site .dp-final-nav > .dp-account-v4{ position:relative; z-index:10050; display:flex; align-items:center; justify-content:flex-end; justify-self:end; margin-left:auto; min-width:0; } body .dp-site .dp-account-v4-trigger{ min-height:44px; display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:10px 12px; color:#fff; background:transparent; border:0; font-size:13px; font-weight:800; line-height:1.2; letter-spacing:.9px; cursor:pointer; } body .dp-site .dp-account-v4-user{ font-size:18px; line-height:1; } body .dp-site .dp-account-v4-chevron{ font-size:14px; line-height:1; transition:transform .18s ease; } body .dp-site .dp-account-v4.is-open .dp-account-v4-chevron{ transform:rotate(180deg); } body .dp-site .dp-account-v4-menu{ position:absolute; top:calc(100% + 10px); right:0; width:220px; display:none; gap:7px; padding:9px; background:#101833; border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 18px 45px rgba(3,9,29,.32); } body .dp-site .dp-account-v4.is-open .dp-account-v4-menu{ display:grid; } body .dp-site .dp-account-v4-item{ width:100%; min-height:44px; display:flex; align-items:center; justify-content:flex-start; padding:10px 14px; color:#fff; background:#182140; border:1px solid rgba(255,255,255,.08); border-radius:10px; font-size:15px; font-weight:800; text-align:left; cursor:pointer; } body .dp-site .dp-account-v4-item:hover, body .dp-site .dp-account-v4-item:focus-visible{ background:#222d55; } body .dp-site .dp-account-v4-item[data-action="signup"]{ background:linear-gradient(90deg,var(--dp-purple),var(--dp-blue)); } #dp-home-booking, #dp-open-play-invitations, #dp-court-gallery, #dp-about{ scroll-margin-top:90px; } @media (max-width:1050px){ body .dp-site .dp-final-nav{ grid-template-columns:180px minmax(0,1fr) 150px; gap:12px; padding:0 20px; } body .dp-site .dp-final-nav .dp-brand{ min-width:180px; } body .dp-site .dp-final-nav .dp-nav-links{ gap:4px; } body .dp-site .dp-final-nav .dp-nav-links button{ padding:0 7px; font-size:11px; } } @media (max-width:820px){ body .dp-site.dp-final-board{ padding-top:64px; } body .dp-site .dp-final-nav{ min-height:64px; grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:8px 14px; } body .dp-site .dp-final-nav .dp-brand{ min-width:0; } body .dp-site .dp-final-nav .dp-brand strong{ font-size:17px; } body .dp-site .dp-final-nav .dp-brand small{ font-size:6px; letter-spacing:4px; } body .dp-site .dp-final-nav .dp-nav-links{ display:none; } body .dp-site .dp-account-v4-trigger{ min-height:40px; gap:6px; padding:7px 8px; font-size:13px; } body .dp-site .dp-account-v4-label{ max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body .dp-site .dp-account-v4-menu{ top:calc(100% + 8px); width:min(280px,calc(100vw - 24px)); } body .dp-site .dp-account-v4-item{ min-height:46px; padding:11px 14px; } #dp-home-booking, #dp-open-play-invitations, #dp-court-gallery, #dp-about{ scroll-margin-top:78px; } } /* * 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{ color:#fff !important; } /* ============================================================ BOOKING SECTION WHITE BAND ============================================================ */ body .dp-site .dp-home-booking{ position:relative !important; padding: 38px max(24px,calc((100vw - var(--dp-content-width,1180px))/2)) 42px; 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; overflow:visible !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 ============================================================ */ /* ============================================================ DATE STRIP ============================================================ */ /* ============================================================ LEGEND ============================================================ */ /* ============================================================ BOOKING GRID ============================================================ */ /* ============================================================ 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; } /* ============================================================ FEATURE / WHY DEWPOINT SECTION SOFT LAVENDER BAND ============================================================ */ body .dp-site .dp-final-feature-strip{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:18px; padding: 27px max( 24px, calc((100vw - var(--dp-content-width,1180px)) / 2) ) 34px; background: linear-gradient( 180deg, #f8f7fc, #f2effb ); } body .dp-site .dp-final-feature-strip > div{ min-height:116px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:19px; color:#15192a; text-align:center; background:#fff; border: 1px solid #e6e2f0; border-radius:17px; box-shadow: 0 10px 28px rgba(30,27,63,.06); } body .dp-site .dp-final-feature-strip > div::before{ position:static; transform:none; width:44px; height:44px; margin: 0 auto 11px; display:grid; place-items:center; color:#fff; background: var(--dp-logo-gradient); border-radius:50%; box-shadow:none; } body .dp-site .dp-final-feature-strip > div::after{ margin-top:6px; color:#656d80; font-size:11px; font-weight:500; line-height:1.55; } body .dp-site .dp-final-feature-strip > div:nth-child(1)::before{ content:"◉"; } body .dp-site .dp-final-feature-strip > div:nth-child(1)::after{ content:"Live updates so you always know what's open."; } body .dp-site .dp-final-feature-strip > div:nth-child(2)::before{ content:"♟"; } body .dp-site .dp-final-feature-strip > div:nth-child(2)::after{ content:"Explore and plan your game — no account needed."; } body .dp-site .dp-final-feature-strip > div:nth-child(3)::before{ content:"▣"; } body .dp-site .dp-final-feature-strip > div:nth-child(3)::after{ content:"Fast, secure and hassle-free booking."; } body .dp-site .dp-final-feature-strip > div:nth-child(4)::before{ content:"▦"; } body .dp-site .dp-final-feature-strip > div:nth-child(4)::after{ content:"Book your preferred court in just a few clicks."; } /* ============================================================ SOCIAL CONNECT WHITE BAND ============================================================ */ body .dp-site .dp-social-section{ padding: 38px max(24px,calc((100vw - var(--dp-content-width,1180px))/2)) 42px; 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:var(--dp-content-width,1180px); 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 max(24px,calc((100vw - var(--dp-content-width,1180px))/2)) 46px; 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:var(--dp-content-width,1180px); 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; } /* ============================================================ CANONICAL DEWPOINT FOOTER One default owner; no late overrides and no priority declarations. ============================================================ */ body .dp-site .dp-footer{ display:block; padding:0; color:#ffffff; background: radial-gradient( circle at 100% 100%, rgba(100,35,209,.24), transparent 37% ), linear-gradient( 105deg, #020718 0%, #07163c 56%, #26094e 100% ); border-top:1px solid rgba(103,70,204,.20); } body .dp-site .dp-footer-grid{ width:calc(100% - 48px); max-width:var(--dp-content-width,1180px); display:grid; grid-template-columns:1.4fr .8fr 1fr 1fr .9fr; gap:34px; align-items:start; margin:0 auto; padding:42px 0 32px; } body .dp-site .dp-footer-logo strong{ display:block; color:#ffffff; font-size:22px; font-style:italic; letter-spacing:-1px; } body .dp-site .dp-footer-logo small{ display:block; margin-top:2px; color:#aeb7c9; font-size:9px; letter-spacing:4px; } body .dp-site .dp-footer-brand p{ max-width:250px; margin:13px 0 9px; color:#aeb8d0; font-size:11px; line-height:1.55; } body .dp-site .dp-footer-brand > span{ color:#8c51ec; font-size:10px; font-weight:900; } body .dp-site .dp-footer-column h4{ margin:0 0 12px; color:#ffffff; font-size:12px; } body .dp-site .dp-footer-column p, body .dp-site .dp-footer-column button{ display:block; min-height:auto; margin:6px 0; padding:0; color:#aeb8d0; background:transparent; border:0; text-align:left; font-size:11px; line-height:1.5; } body .dp-site .dp-footer-column button{ cursor:pointer; } body .dp-site .dp-footer-column button:hover, body .dp-site .dp-footer-column button:focus-visible{ color:#ffffff; } body .dp-site .dp-footer-socials{ display:flex; gap:8px; margin-top:12px; } body .dp-site .dp-footer-socials span{ width:31px; height:31px; display:grid; place-items:center; color:#ffffff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); border-radius:8px; font-size:12px; } body .dp-site .dp-footer-bottom{ width:calc(100% - 48px); max-width:var(--dp-content-width,1180px); display:flex; justify-content:space-between; align-items:center; gap:20px; margin:0 auto; padding:14px clamp(18px,4vw,58px) 18px; color:#7886a9; border-top:1px solid rgba(255,255,255,.08); } body .dp-site .dp-footer-bottom > span{ color:#c8d1ef; font-size:10px; line-height:1.7; } body .dp-site .dp-footer-bottom > div{ color:#7886a9; font-size:12px; line-height:1.5; } @media(max-width:1000px){ body .dp-site .dp-footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:650px){ body .dp-site .dp-footer-grid{ grid-template-columns:1fr; gap:24px; padding:34px 0 24px; } body .dp-site .dp-footer-bottom{ flex-direction:column; align-items:flex-start; gap:5px; padding:13px 18px calc(18px + env(safe-area-inset-bottom)); } } /* ============================================================ PICKLE MANIA STYLE BALLOON KEEP GLASS + DEWPOINT COLORS ============================================================ */ /* ============================================================ TABLET ============================================================ */ @media(max-width:1000px){ body .dp-site .dp-final-feature-strip{ grid-template-columns: repeat(2,minmax(0,1fr)); } 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; } /* * Preserve mobile date swipe fix */ /* * Booking court table still scrolls horizontally. */ /* * FEATURES */ body .dp-site .dp-final-feature-strip{ display:flex; gap:12px; overflow-x:auto; padding: 21px 12px 26px; scroll-snap-type: x proximity; } body .dp-site .dp-final-feature-strip > div{ flex: 0 0 260px; scroll-snap-align: start; } /* * 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; } } /* ============================================================ HERO DARK NAVY FIX Keep only the hero section dark ============================================================ */ body .dp-site.dp-final-board{ background:transparent !important; overflow:visible !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{ 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 */ /* top summary area */ /* selected count + total */ /* actions */ /* minimize / maximize */ /* checkout button */ /* selected-bookings container */ /* each date group */ /* date heading */ /* slot list */ /* each selected court/time */ /* remove X */ /* ============================================================ MOBILE — EVEN MORE COMPACT ============================================================ */ @media(max-width:650px){ } /* ============================================================ DEWPOINT BALLOON REDUCE OUTER EDGE/GUTTER ONLY Do NOT tighten internal content ============================================================ */ /* remove any extra child margin creating the thick frame */ /* keep corners clean against slimmer outer edge */ /* MOBILE — same thin outer edge */ @media(max-width:650px){ } /* ============================================================ DEWPOINT BALLOON — WIDER LAYOUT Keep internal spacing. Only widen the container and use the space better. ============================================================ */ /* DESKTOP */ /* Date group: small date column on left, booking rows take remaining width */ /* Date label */ /* Selected slot side */ /* Each court selection uses full available width */ /* ============================================================ MOBILE Almost full-width balloon ============================================================ */ @media(max-width:650px){ } /* ============================================================ 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; } /* ============================================================ 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 ============================================================ */ /* ============================================================ 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 ============================================================ */ /* checkout */ /* minimize / maximize */ /* scrollbar */ /* ============================================================ 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; } } /* ============================================================ 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; } /* ============================================================ 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){ } /* Very small phones */ @media(max-width:380px){ } /* ============================================================ DEWPOINT IPHONE BALLOON TOGGLE FIX Larger touch target + Safari-safe interaction ============================================================ */ /* ============================================================ IPHONE / MOBILE Visible button stays compact, touch area is much larger. ============================================================ */ @media(max-width:650px){ /* * Invisible 48 x 48px Apple-friendly touch target. */ /* * Expanded state */ /* * Minimized state */ } /* ============================================================ 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; } } /* ========================================================= DEWPOINT HERO SIMPLE SLASH LOGO WALLPAPER ========================================================= */ body .dp-site .dp-final-art{ position:relative !important; min-height:430px !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; isolation:isolate !important; } /* LARGE RIGHT-HAND SLASH PANEL */ body .dp-site .dp-final-art::before{ content:"" !important; position:absolute !important; top:-12px !important; right:-40px !important; bottom:-12px !important; left:-105px !important; background: linear-gradient( 135deg, rgba(35,76,255,.08) 0%, rgba(99,46,235,.26) 42%, rgba(55,18,127,.55) 100% ) !important; clip-path: polygon( 31% 0, 100% 0, 75% 100%, 0 100% ) !important; z-index:0 !important; filter: drop-shadow(-10px 0 18px rgba(87,59,255,.13)) drop-shadow(0 15px 34px rgba(0,0,0,.18)) !important; pointer-events:none !important; } /* BRIGHT EDGE ON THE SLASH */ body .dp-site .dp-final-art::after{ content:"" !important; position:absolute !important; top:-6px !important; right:-25px !important; bottom:-6px !important; left:-85px !important; background: linear-gradient( 135deg, rgba(65,142,255,.88), rgba(133,65,255,.65), rgba(255,255,255,.12) ) !important; clip-path: polygon( 29.5% 0, 31% 0, 1.5% 100%, 0 100% ) !important; opacity:.8 !important; z-index:1 !important; pointer-events:none !important; } /* LOGO HOLDER */ body .dp-site .dp-final-logo-wrap{ position:relative !important; z-index:2 !important; width:min(480px,82%) !important; margin-left:auto !important; margin-right:38px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:18px !important; } /* UPLOADED OWNER LOGO */ body .dp-site .dp-final-logo-image{ display:block !important; width:auto !important; max-width:100% !important; max-height:355px !important; object-fit:contain !important; position:relative !important; z-index:3 !important; filter: drop-shadow(0 18px 30px rgba(0,0,0,.20)) !important; } /* MOBILE / TABLET */ @media (max-width:1100px){ body .dp-site .dp-final-art{ min-height:360px !important; } body .dp-site .dp-final-art::before{ left:-55px !important; right:-25px !important; clip-path: polygon( 26% 0, 100% 0, 78% 100%, 0 100% ) !important; } body .dp-site .dp-final-art::after{ left:-40px !important; } body .dp-site .dp-final-logo-wrap{ width:min(420px,86%) !important; margin-right:20px !important; } body .dp-site .dp-final-logo-image{ max-height:300px !important; } } @media (max-width:860px){ body .dp-site .dp-final-art{ min-height:285px !important; margin-top:10px !important; } body .dp-site .dp-final-art::before{ left:0 !important; right:0 !important; top:0 !important; bottom:0 !important; clip-path: polygon( 17% 0, 100% 0, 83% 100%, 0 100% ) !important; } body .dp-site .dp-final-art::after{ display:none !important; } body .dp-site .dp-final-logo-wrap{ width:min(350px,88%) !important; margin:0 auto !important; } body .dp-site .dp-final-logo-image{ max-height:235px !important; } } /* ========================================================= DEWPOINT HERO RIGHT SIDE WALLPAPER MODE ========================================================= */ body .dp-site .dp-final-art.dp-final-art-wallpaper{ position:relative !important; min-height:430px !important; border-radius:0 !important; overflow:hidden !important; isolation:isolate !important; background: radial-gradient(circle at 30% 50%, rgba(78,123,255,.10), transparent 42%), radial-gradient(circle at 75% 40%, rgba(122,69,255,.20), transparent 48%), linear-gradient(135deg, rgba(7,18,58,.00) 0%, rgba(50,22,114,.28) 100%), var(--dp-hero-wallpaper) !important; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important; background-position: center center, center center, center center, center center !important; background-size: 100% 100%, 100% 100%, 100% 100%, contain !important; } /* optional slash / divider effect */ body .dp-site .dp-final-art.dp-final-art-wallpaper::before{ content:"" !important; position:absolute !important; top:0 !important; bottom:0 !important; left:-32px !important; width:150px !important; background: linear-gradient( 135deg, rgba(255,255,255,0) 0%, rgba(115,88,255,.18) 45%, rgba(88,145,255,.24) 50%, rgba(255,255,255,0) 56% ) !important; clip-path:polygon(100% 0, 45% 0, 0 100%, 55% 100%) !important; z-index:2 !important; pointer-events:none !important; } /* remove old boxed-image sizing if ever still present */ body .dp-site .dp-final-logo-wrap, body .dp-site .dp-final-logo-image{ display:none !important; } @media (max-width:1100px){ body .dp-site .dp-final-art.dp-final-art-wallpaper{ min-height:340px !important; background-size: 100% 100%, 100% 100%, 100% 100%, 88% auto !important; } } @media (max-width:860px){ body .dp-site .dp-final-art.dp-final-art-wallpaper{ min-height:260px !important; background-size: 100% 100%, 100% 100%, 100% 100%, 82% auto !important; } body .dp-site .dp-final-art.dp-final-art-wallpaper::before{ left:-14px !important; width:86px !important; } } /* ========================================================= DEWPOINT FULL HERO WALLPAPER MODE Entire hero uses wallpaper. Existing copy/buttons float above it. ========================================================= */ /* Use the current Dewpoint image as temporary wallpaper. Later this can point to an owner-uploaded wallpaper. */ body .dp-site{ /* * No bundled/static Dewpoint logo fallback. * Venue-owned imagery is managed separately. */ --dp-hero-wallpaper:none; } /* HERO CONTAINER */ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ position:relative !important; overflow:hidden !important; background-image: linear-gradient( 90deg, rgba(1,9,34,.92) 0%, rgba(2,15,58,.84) 34%, rgba(12,17,77,.57) 61%, rgba(57,15,105,.30) 100% ), var(--dp-hero-wallpaper) !important; background-repeat: no-repeat, no-repeat !important; background-position: center, center !important; background-size: cover, cover !important; } /* Ensure copy stays above wallpaper */ body .dp-site .dp-final-grid, body .dp-site .dp-final-copy{ position:relative !important; z-index:1 !important; } /* LEFT COPY REMAINS READABLE */ body .dp-site .dp-final-copy{ max-width:620px !important; } /* subtle backing glow behind copy only */ body .dp-site .dp-final-copy::before{ content:"" !important; position:absolute !important; inset:-45px -75px -45px -55px !important; background: radial-gradient( ellipse at 35% 50%, rgba(0,8,34,.44) 0%, rgba(0,8,34,.26) 46%, transparent 76% ) !important; z-index:-1 !important; pointer-events:none !important; } /* Hide old separate right-side logo/art area */ body .dp-site .dp-final-art, body .dp-site .dp-final-logo-wrap, body .dp-site .dp-final-logo-image{ display:none !important; } /* Keep hero full and spacious */ body .dp-site .dp-final-grid{ grid-template-columns:minmax(0,620px) 1fr !important; min-height:500px !important; align-items:center !important; } /* Text shadows for wallpaper readability */ body .dp-site .dp-final-copy h1, body .dp-site .dp-final-copy .dp-tagline, body .dp-site .dp-final-copy p, body .dp-site .dp-final-copy .dp-hero-perks{ text-shadow:0 2px 18px rgba(0,0,0,.34) !important; } /* Tablet */ @media(max-width:1100px){ body .dp-site .dp-final-grid{ min-height:460px !important; grid-template-columns:minmax(0,560px) 1fr !important; } } /* Mobile */ @media(max-width:860px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-position:center !important; } body .dp-site .dp-final-grid{ grid-template-columns:1fr !important; min-height:500px !important; } body .dp-site .dp-final-copy{ max-width:100% !important; } } /* ========================================================= DEWPOINT HERO WALLPAPER RECTANGULAR FIT + REMOVE OLD DP WATERMARK ========================================================= */ /* Remove old decorative DP watermark */ body .dp-site .dp-final-watermark{ display:none !important; } /* Entire hero wallpaper should fit the rectangular hero */ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: 100% 100%, 100% 100% !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; } /* Keep floating content above wallpaper */ /* No extra DP pseudo/watermark behind text */ body .dp-site .dp-final-copy::after{ display:none !important; content:none !important; } /* Desktop hero rectangle */ body .dp-site .dp-final-grid{ min-height:500px !important; } /* Tablet */ @media(max-width:1100px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: 100% 100%, 100% 100% !important; } } /* Mobile - allow wallpaper to remain full hero background */ @media(max-width:860px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: cover, cover !important; background-position:center center !important; } } /* ========================================================= MOBILE HERO WALLPAPER - SHOW FULL IMAGE ========================================================= */ @media(max-width:860px){ body .dp-site .dp-final-hero, body .dp-site .dp-final, body .dp-site .dp-hero{ background-size: 100% 100%, contain !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-color:#081136 !important; } } /* ========================================================= LIVE VENUE HERO WALLPAPERS Desktop = hero_wallpaper_desktop Mobile = hero_wallpaper_mobile ========================================================= */ body .dp-site .dp-final-hero.dp-live-hero-wallpaper{ position:relative !important; overflow:hidden !important; background-image: linear-gradient( 90deg, rgba(2,10,35,.78) 0%, rgba(3,15,55,.58) 40%, rgba(25,14,75,.30) 100% ), var(--dp-hero-desktop) !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; background-size: 100% 100%, 100% 100% !important; } /* Floating content remains above wallpaper */ /* Old DP watermark gone */ body .dp-site .dp-final-hero .dp-final-watermark{ display:none !important; } /* Old separate right-side logo is no longer needed */ body .dp-site .dp-final-hero .dp-final-art, body .dp-site .dp-final-hero .dp-final-logo-wrap, body .dp-site .dp-final-hero .dp-final-logo-image{ display:none !important; } /* ========================= MOBILE WALLPAPER ========================= */ @media(max-width:860px){ body .dp-site .dp-final-hero.dp-live-hero-wallpaper{ background-image: linear-gradient( 90deg, rgba(2,10,35,.68) 0%, rgba(3,15,55,.46) 48%, rgba(25,14,75,.20) 100% ), var(--dp-hero-mobile) !important; background-repeat: no-repeat, no-repeat !important; background-position: center center, center center !important; /* * Show the complete uploaded mobile artwork. * No cropping of the logo. */ background-size: 100% 100%, 100% 100% !important; } } /* ========================================================= DEWPOINT CENTERED REGISTRATION MODAL ========================================================= */ body .dp-site .dp-register-modal{ width:min(680px,calc(100vw - 32px)) !important; max-width:680px !important; max-height:90vh !important; overflow-y:auto !important; } body .dp-site .dp-register-form{ display:flex; flex-direction:column; gap:15px; } body .dp-site .dp-register-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; } body .dp-site .dp-register-grid label{ display:flex; flex-direction:column; gap:7px; } body .dp-site .dp-register-grid input, body .dp-site .dp-register-grid select{ width:100%; box-sizing:border-box; } body .dp-site .dp-register-spacer{ min-height:1px; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:18px; } body .dp-site .dp-register-modal .dp-login-submit{ width:100%; margin-top:2px; } @media(max-width:620px){ body .dp-site .dp-register-modal{ width:calc(100vw - 24px) !important; max-height:92vh !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr; } body .dp-site .dp-register-spacer{ display:none; } } /* ========================================================= COMPACT DEWPOINT REGISTER MODAL ========================================================= */ body .dp-site .dp-register-modal{ width:min(520px,calc(100vw - 32px)) !important; max-width:520px !important; max-height:88vh !important; padding:24px 26px 22px !important; border-radius:18px !important; overflow-y:auto !important; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:14px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:20px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ font-size:9px !important; letter-spacing:4px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ font-size:28px !important; line-height:1.05 !important; margin:10px 0 6px !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ font-size:13px !important; margin:0 !important; } body .dp-site .dp-register-form{ gap:11px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr 1fr !important; gap:10px 12px !important; } body .dp-site .dp-register-grid label{ gap:5px !important; font-size:12px !important; } body .dp-site .dp-register-grid input, body .dp-site .dp-register-grid select{ min-height:42px !important; height:42px !important; padding:9px 12px !important; font-size:13px !important; border-radius:10px !important; } body .dp-site .dp-register-modal .dp-login-submit{ min-height:44px !important; height:44px !important; margin-top:2px !important; font-size:13px !important; } body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:10px !important; font-size:12px !important; } body .dp-site .dp-register-modal .dp-login-close{ top:12px !important; right:14px !important; } @media(max-width:620px){ body .dp-site .dp-register-modal{ width:calc(100vw - 24px) !important; max-width:440px !important; padding:20px 18px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; } } /* ========================================================= REGISTER TERMS & CONDITIONS ========================================================= */ body .dp-site .dp-register-terms{ display:flex !important; align-items:flex-start !important; gap:9px !important; margin:2px 0 4px !important; cursor:pointer !important; font-size:12px !important; line-height:1.45 !important; color:#64748b !important; } body .dp-site .dp-register-terms input{ width:16px !important; height:16px !important; min-height:16px !important; flex:0 0 16px !important; margin:2px 0 0 !important; padding:0 !important; accent-color:var(--dp-accent) !important; } body .dp-site .dp-register-terms span{ display:block !important; } body .dp-site .dp-register-terms-link{ display:inline !important; padding:0 !important; margin:0 !important; border:0 !important; background:none !important; color:var(--dp-accent) !important; font:inherit !important; font-weight:800 !important; text-decoration:underline !important; cursor:pointer !important; } /* ========================================================= REGISTER MODAL - FIT NORMAL DESKTOP VIEWPORT ========================================================= */ body .dp-site .dp-register-modal{ width:min(500px,calc(100vw - 32px)) !important; max-width:500px !important; max-height:calc(100vh - 48px) !important; padding:18px 22px 16px !important; border-radius:16px !important; overflow-y:auto !important; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:10px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo{ margin-bottom:5px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:18px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ font-size:8px !important; letter-spacing:3px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ font-size:24px !important; line-height:1.05 !important; margin:6px 0 4px !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ font-size:12px !important; line-height:1.35 !important; margin:0 !important; } body .dp-site .dp-register-form{ gap:8px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr 1fr !important; gap:8px 10px !important; } body .dp-site .dp-register-grid label{ gap:4px !important; font-size:11px !important; line-height:1.2 !important; } body .dp-site .dp-register-grid input, body .dp-site .dp-register-grid select{ min-height:38px !important; height:38px !important; padding:7px 10px !important; font-size:12px !important; border-radius:9px !important; } body .dp-site .dp-register-terms{ gap:7px !important; margin:0 !important; font-size:11px !important; line-height:1.3 !important; } body .dp-site .dp-register-terms input{ width:15px !important; height:15px !important; min-height:15px !important; flex:0 0 15px !important; margin-top:1px !important; } body .dp-site .dp-register-modal .dp-login-submit{ height:40px !important; min-height:40px !important; margin-top:0 !important; font-size:12px !important; } body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:6px !important; font-size:11px !important; } body .dp-site .dp-register-modal .dp-login-close{ top:8px !important; right:10px !important; } @media(max-width:620px){ body .dp-site .dp-register-modal{ width:calc(100vw - 20px) !important; max-width:430px !important; max-height:calc(100vh - 20px) !important; padding:16px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; } } /* ========================================================= DEWPOINT DESKTOP HERO - FINAL FULL COVER Uploaded artwork fills hero. Logo placement comes from the artwork itself. ========================================================= */ @media(min-width:861px){ body .dp-site .dp-final-hero.dp-live-hero-wallpaper{ position:relative !important; width:100% !important; aspect-ratio:851 / 315 !important; height:auto !important; min-height:0 !important; background-image: linear-gradient( 90deg, rgba(2,10,35,.58) 0%, rgba(2,10,35,.40) 35%, rgba(5,13,48,.16) 65%, rgba(25,14,75,.05) 100% ), var(--dp-hero-desktop) !important; /* * Cover the complete hero. * The generated artwork already places * the Dewpoint logo on the right. */ background-size: 100% 100%, cover !important; background-position: center center, center center !important; background-repeat: no-repeat, no-repeat !important; background-color:#020b2b !important; overflow:hidden !important; } body .dp-site .dp-final-hero .dp-final-watermark{ display:none !important; } body .dp-site .dp-final-hero .dp-final-art, body .dp-site .dp-final-hero .dp-final-logo-wrap, body .dp-site .dp-final-hero .dp-final-logo-image{ display:none !important; } } /* ============================================================ DEWPOINT BOOKING BALLOON FINAL PICKLE MANIA LAYOUT Keep Dewpoint purple/blue colors only. ============================================================ */ /* ------------------------------------------------------------ TOP SUMMARY ------------------------------------------------------------ */ /* ------------------------------------------------------------ ACTIONS ------------------------------------------------------------ */ /* ------------------------------------------------------------ SELECTED BOOKING LIST ------------------------------------------------------------ */ /* * Remove the Dewpoint 2-column date/booking layout. * Pickle Mania uses stacked groups. */ /* Date heading */ /* Slot list */ /* Individual selected booking */ /* Remove selection */ /* ------------------------------------------------------------ COLLAPSED ------------------------------------------------------------ */ /* ============================================================ MOBILE — PICKLE MANIA STYLE ============================================================ */ @media(max-width:550px){ } /* ============================================================ DEWPOINT COURT GALLERY Booking -> Gallery -> Social ============================================================ */ body .dp-site .dp-court-gallery{ position:relative; padding: 76px max( 24px, calc((100vw - var(--dp-content-width,1180px)) / 2) ) 72px; background:#ffffff; border-top: 1px solid rgba(40,45,80,.07); overflow:hidden; } /* ------------------------------------------------------------ HEADING ------------------------------------------------------------ */ body .dp-site .dp-gallery-heading{ max-width:720px; margin:0 auto 34px; text-align:center; } body .dp-site .dp-gallery-kicker{ display:inline-block; margin-bottom:8px; color:#7428e8; font-size:10px; font-weight:900; letter-spacing:2.6px; } body .dp-site .dp-gallery-heading h2{ margin:0; color:#10162b; font-size: clamp(28px,4vw,46px); font-weight:900; line-height:1.05; letter-spacing:-1.5px; } body .dp-site .dp-gallery-heading p{ max-width:590px; margin: 13px auto 0; color:#687089; font-size:13px; line-height:1.7; } /* ------------------------------------------------------------ SIX PHOTO GRID ------------------------------------------------------------ */ body .dp-site .dp-gallery-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:16px; max-width:var(--dp-content-width,1180px); margin:0 auto; } body .dp-site .dp-gallery-photo{ position:relative; min-width:0; aspect-ratio:4 / 3; overflow:hidden; border: 1px solid rgba(48,56,94,.16); border-radius:18px; background:#eef0f7; box-shadow: 0 12px 34px rgba(30,38,75,.10); isolation:isolate; } body .dp-site .dp-gallery-image{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; transition: transform .35s ease, filter .35s ease; } body .dp-site .dp-gallery-photo::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient( 180deg, transparent 58%, rgba(3,9,29,.50) 100% ); } body .dp-site .dp-gallery-photo:hover .dp-gallery-image{ transform:scale(1.035); } body .dp-site .dp-gallery-number{ position:absolute; right:12px; bottom:11px; z-index:2; padding: 5px 8px; color:#fff; background: rgba(3,9,29,.66); border: 1px solid rgba(255,255,255,.18); border-radius:8px; backdrop-filter:blur(8px); font-size:8px; font-weight:900; letter-spacing:1px; } /* ------------------------------------------------------------ EMPTY STATE ------------------------------------------------------------ */ body .dp-site .dp-gallery-empty{ max-width:620px; margin:0 auto; padding:48px 24px; text-align:center; color:#687089; background:#fff; border: 1px dashed rgba(109,40,217,.30); border-radius:20px; } body .dp-site .dp-gallery-empty > span{ display:block; margin-bottom:12px; color:#6d28d9; font-size:35px; } body .dp-site .dp-gallery-empty b{ display:block; margin-bottom:7px; color:#181c31; font-size:16px; } body .dp-site .dp-gallery-empty p{ margin:0; font-size:11px; } /* ------------------------------------------------------------ CTA ------------------------------------------------------------ */ body .dp-site .dp-gallery-cta{ display:flex; align-items:center; justify-content:space-between; gap:30px; max-width:var(--dp-content-width,1180px); margin: 32px auto 0; padding: 25px 28px; color:#fff; background: radial-gradient( circle at 90% 20%, rgba(28,125,242,.28), transparent 34% ), linear-gradient( 105deg, #03091d 0%, #11113f 55%, #39106c 100% ); border: 1px solid rgba(121,77,228,.28); border-radius:19px; box-shadow: 0 15px 40px rgba(4,8,31,.16); } body .dp-site .dp-gallery-cta small{ display:block; margin-bottom:5px; color:#9d72f3; font-size:8px; font-weight:900; letter-spacing:2px; } body .dp-site .dp-gallery-cta h3{ margin:0; color:#fff; font-size:20px; } body .dp-site .dp-gallery-cta p{ margin: 5px 0 0; color:#cdd4e8; font-size:10px; } body .dp-site .dp-gallery-cta button{ flex:0 0 auto; border:0; padding: 13px 18px; color:#fff; background: var( --dp-logo-gradient, linear-gradient( 90deg, #6d28d9, #1c7df2 ) ); border-radius:11px; box-shadow: 0 8px 20px rgba(67,66,215,.27); font-size:9px; font-weight:900; letter-spacing:.7px; cursor:pointer; } /* ============================================================ TABLET ============================================================ */ @media(max-width:900px){ body .dp-site .dp-court-gallery{ padding: 58px 20px; } body .dp-site .dp-gallery-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:650px){ body .dp-site .dp-court-gallery{ padding: 45px 12px; } body .dp-site .dp-gallery-heading{ margin-bottom:24px; } body .dp-site .dp-gallery-heading h2{ font-size:28px; } body .dp-site .dp-gallery-heading p{ font-size:11px; } body .dp-site .dp-gallery-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; } body .dp-site .dp-gallery-photo{ border-radius:12px; } body .dp-site .dp-gallery-number{ right:7px; bottom:7px; padding: 4px 6px; font-size:7px; } body .dp-site .dp-gallery-cta{ flex-direction:column; align-items:flex-start; gap:17px; margin-top:22px; padding: 20px 18px; border-radius:15px; } body .dp-site .dp-gallery-cta button{ width:100%; } } /* ============================================================ DEWPOINT LOGIN MODAL — COMPACT FINAL ============================================================ */ body .dp-site .dp-login-modal{ width:min(500px,calc(100% - 28px)) !important; max-width:500px !important; padding:30px 38px 28px !important; border-radius:16px !important; max-height:calc(100vh - 36px) !important; overflow-y:auto !important; } /* Close button */ body .dp-site .dp-login-close{ top:13px !important; right:16px !important; width:30px !important; height:30px !important; font-size:20px !important; } body .dp-site .dp-login-modal-head{ margin-bottom:24px !important; } body .dp-site .dp-login-modal-logo{ margin-bottom:20px !important; } body .dp-site .dp-login-modal-logo strong{ font-size:28px !important; line-height:1 !important; } body .dp-site .dp-login-modal-logo small{ margin-top:7px !important; font-size:8px !important; letter-spacing:4px !important; } body .dp-site .dp-login-modal-head h2{ margin:0 !important; font-size:30px !important; line-height:1.05 !important; } body .dp-site .dp-login-modal-head p{ margin:10px 0 0 !important; font-size:13px !important; } /* ------------------------------------------------------------ FORM ------------------------------------------------------------ */ body .dp-site .dp-login-modal form{ gap:15px !important; } body .dp-site .dp-login-modal form > label{ gap:7px !important; font-size:12px !important; } body .dp-site .dp-login-modal input{ min-height:48px !important; height:48px !important; padding:0 15px !important; border-radius:10px !important; font-size:13px !important; } body .dp-site .dp-login-submit{ min-height:50px !important; margin-top:3px !important; padding:0 20px !important; border-radius:25px !important; font-size:12px !important; } /* ------------------------------------------------------------ DIVIDER ------------------------------------------------------------ */ body .dp-site .dp-login-modal-divider{ margin:20px 0 17px !important; font-size:10px !important; } /* ------------------------------------------------------------ REGISTER LINK ------------------------------------------------------------ */ body .dp-site .dp-login-modal-register{ margin:0 !important; font-size:12px !important; } body .dp-site .dp-login-modal-register button{ font-size:12px !important; } /* ------------------------------------------------------------ GUEST NOTE ------------------------------------------------------------ */ body .dp-site .dp-login-modal-note{ display:block !important; margin-top:22px !important; padding-top:16px !important; font-size:9px !important; line-height:1.45 !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-login-modal{ width:calc(100% - 22px) !important; padding:26px 22px 24px !important; border-radius:14px !important; } body .dp-site .dp-login-modal-logo{ margin-bottom:17px !important; } body .dp-site .dp-login-modal-logo strong{ font-size:24px !important; } body .dp-site .dp-login-modal-head h2{ font-size:26px !important; } body .dp-site .dp-login-modal-head{ margin-bottom:20px !important; } body .dp-site .dp-login-modal input{ height:46px !important; min-height:46px !important; } body .dp-site .dp-login-submit{ min-height:48px !important; } } /* ============================================================ DEWPOINT REGISTER MODAL — PLAYER LEVEL SELECT ============================================================ */ body .dp-site .dp-register-modal select{ display:block !important; width:100% !important; height:48px !important; min-height:48px !important; box-sizing:border-box !important; padding: 0 42px 0 15px !important; color:#11172c !important; background-color:#ffffff !important; border: 1px solid #cfd6e6 !important; border-radius:10px !important; font-size:13px !important; font-weight:700 !important; outline:none !important; cursor:pointer !important; appearance:none !important; -webkit-appearance:none !important; background-image: linear-gradient(45deg,transparent 50%,#26324b 50%), linear-gradient(135deg,#26324b 50%,transparent 50%) !important; background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px !important; background-size: 5px 5px, 5px 5px !important; background-repeat:no-repeat !important; transition: border-color .18s ease, box-shadow .18s ease !important; } body .dp-site .dp-register-modal select:hover{ border-color:#aeb9d0 !important; } body .dp-site .dp-register-modal select:focus{ border-color:#6845e8 !important; box-shadow: 0 0 0 3px rgba(104,69,232,.10) !important; } /* Match registration field labels */ body .dp-site .dp-register-modal label{ font-size:12px !important; font-weight:800 !important; color:#11172c !important; } /* Keep the dropdown aligned with the 2-column registration grid */ body .dp-site .dp-register-grid > label{ min-width:0 !important; } @media(max-width:600px){ body .dp-site .dp-register-modal select{ height:46px !important; min-height:46px !important; background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px !important; } } /* ============================================================ DEWPOINT REGISTER MODAL — COMPACT FINAL ============================================================ */ body .dp-site .dp-register-modal{ width:min(500px,calc(100% - 28px)) !important; max-width:500px !important; padding:22px 32px 22px !important; border-radius:16px !important; max-height:calc(100vh - 30px) !important; overflow-y:auto !important; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:14px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo{ margin-bottom:12px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:23px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ margin-top:5px !important; font-size:7px !important; letter-spacing:3.5px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ font-size:25px !important; line-height:1 !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ margin-top:6px !important; font-size:11px !important; } /* FORM */ body .dp-site .dp-register-form{ gap:10px !important; } body .dp-site .dp-register-grid{ gap:9px 12px !important; } body .dp-site .dp-register-modal label{ gap:5px !important; font-size:11px !important; } /* INPUTS + SELECT */ body .dp-site .dp-register-modal input, body .dp-site .dp-register-modal select{ height:44px !important; min-height:44px !important; padding-top:0 !important; padding-bottom:0 !important; border-radius:9px !important; font-size:12px !important; } /* PLAYER LEVEL */ body .dp-site .dp-register-modal select{ background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px !important; } /* TERMS */ body .dp-site .dp-register-terms{ margin-top:2px !important; gap:8px !important; align-items:center !important; } body .dp-site .dp-register-terms input{ width:16px !important; height:16px !important; min-height:16px !important; flex:0 0 16px !important; } body .dp-site .dp-register-terms span{ font-size:10px !important; line-height:1.4 !important; } /* BUTTON */ body .dp-site .dp-register-modal .dp-login-submit{ min-height:44px !important; height:44px !important; margin-top:2px !important; font-size:11px !important; } body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:10px !important; font-size:10px !important; } body .dp-site .dp-register-modal .dp-login-modal-register button{ font-size:10px !important; } /* CLOSE BUTTON */ body .dp-site .dp-register-modal .dp-login-close{ top:9px !important; right:12px !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-register-modal{ width:calc(100% - 18px) !important; padding:20px 18px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; gap:8px !important; } body .dp-site .dp-register-spacer{ display:none !important; } body .dp-site .dp-register-modal input, body .dp-site .dp-register-modal select{ height:43px !important; min-height:43px !important; } } /* ============================================================ DEWPOINT REGISTER MODAL FINAL COMPACT SIZE + TERMS CHECKBOX ALIGNMENT ============================================================ */ body .dp-site .dp-register-modal{ width:min(440px,calc(100% - 24px)) !important; max-width:440px !important; padding:18px 24px 18px !important; border-radius:14px !important; max-height:calc(100vh - 24px) !important; overflow-y:auto !important; } body .dp-site .dp-register-modal .dp-login-modal-head{ margin-bottom:11px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo{ margin-bottom:9px !important; } body .dp-site .dp-register-modal .dp-login-modal-logo strong{ font-size:21px !important; line-height:1 !important; } body .dp-site .dp-register-modal .dp-login-modal-logo small{ margin-top:4px !important; font-size:6px !important; letter-spacing:3px !important; } body .dp-site .dp-register-modal .dp-login-modal-head h2{ margin:0 !important; font-size:22px !important; line-height:1 !important; } body .dp-site .dp-register-modal .dp-login-modal-head p{ margin:5px 0 0 !important; font-size:9px !important; line-height:1.3 !important; } /* ============================================================ FORM LAYOUT ============================================================ */ body .dp-site .dp-register-form{ gap:8px !important; } body .dp-site .dp-register-grid{ gap:7px 10px !important; } body .dp-site .dp-register-grid > label{ gap:4px !important; font-size:10px !important; line-height:1.15 !important; } /* ============================================================ INPUTS + PLAYER LEVEL ============================================================ */ body .dp-site .dp-register-modal input:not([type="checkbox"]), body .dp-site .dp-register-modal select{ height:39px !important; min-height:39px !important; padding: 0 12px !important; border-radius:8px !important; font-size:10px !important; } body .dp-site .dp-register-modal select{ padding-right:34px !important; background-position: calc(100% - 16px) 16px, calc(100% - 11px) 16px !important; } /* ============================================================ TERMS & CONDITIONS — SINGLE ALIGNED ROW ============================================================ */ body .dp-site .dp-register-modal .dp-register-terms{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:7px !important; width:100% !important; margin: 5px 0 2px !important; padding:0 !important; cursor:pointer !important; } /* Checkbox */ body .dp-site .dp-register-modal .dp-register-terms > input[type="checkbox"]{ appearance:auto !important; -webkit-appearance:auto !important; width:15px !important; height:15px !important; min-width:15px !important; min-height:15px !important; max-width:15px !important; max-height:15px !important; flex: 0 0 15px !important; margin:0 !important; padding:0 !important; vertical-align:middle !important; cursor:pointer !important; } /* Terms text */ body .dp-site .dp-register-modal .dp-register-terms > span{ display:inline !important; margin:0 !important; padding:0 !important; color:#1a2137 !important; font-size:9px !important; font-weight:700 !important; line-height:15px !important; } /* Terms link */ body .dp-site .dp-register-modal .dp-register-terms-link{ display:inline !important; margin:0 !important; padding:0 !important; border:0 !important; background:none !important; color:#ec268f !important; font-size:9px !important; font-weight:800 !important; line-height:15px !important; vertical-align:baseline !important; text-decoration:underline !important; } /* ============================================================ CREATE ACCOUNT ============================================================ */ body .dp-site .dp-register-modal .dp-login-submit{ width:100% !important; height:40px !important; min-height:40px !important; margin-top:2px !important; padding:0 16px !important; border-radius:22px !important; font-size:10px !important; } body .dp-site .dp-register-modal .dp-login-modal-register{ margin-top:8px !important; padding:0 !important; font-size:9px !important; } body .dp-site .dp-register-modal .dp-login-modal-register button{ font-size:9px !important; } /* ============================================================ CLOSE ============================================================ */ body .dp-site .dp-register-modal .dp-login-close{ top:7px !important; right:9px !important; width:26px !important; height:26px !important; font-size:17px !important; } /* ============================================================ DESKTOP TWO-COLUMN WIDTH ============================================================ */ @media(min-width:601px){ body .dp-site .dp-register-grid{ grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; } } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-register-modal{ width:calc(100% - 16px) !important; max-width:420px !important; padding:17px 16px !important; } body .dp-site .dp-register-grid{ grid-template-columns:1fr !important; gap:7px !important; } body .dp-site .dp-register-spacer{ display:none !important; } body .dp-site .dp-register-modal .dp-register-terms{ align-items:flex-start !important; } } /* ============================================================ DEWPOINT LOGIN MODAL MATCH REGISTER CARD SIZE / SPACING ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal){ width: min( 440px, calc(100% - 24px) ) !important; max-width: 440px !important; padding: 18px 24px 18px !important; border-radius: 14px !important; max-height: calc(100vh - 24px) !important; overflow-y: auto !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-head{ margin-bottom: 14px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-logo{ margin-bottom: 12px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-logo strong{ font-size: 21px !important; line-height: 1 !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-logo small{ margin-top: 4px !important; font-size: 6px !important; letter-spacing: 3px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-head h2{ margin: 0 !important; font-size: 22px !important; line-height: 1 !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-head p{ margin: 5px 0 0 !important; font-size: 9px !important; line-height: 1.3 !important; } /* ============================================================ FORM ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) form{ gap: 10px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) form > label{ gap: 4px !important; font-size: 10px !important; line-height: 1.15 !important; } /* ============================================================ INPUTS ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) input{ height: 39px !important; min-height: 39px !important; padding: 0 12px !important; border-radius: 8px !important; font-size: 10px !important; } /* ============================================================ SIGN IN BUTTON ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-submit{ width: 100% !important; height: 40px !important; min-height: 40px !important; margin-top: 2px !important; padding: 0 16px !important; border-radius: 22px !important; font-size: 10px !important; } /* ============================================================ OR DIVIDER ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-divider{ margin: 12px 0 10px !important; font-size: 8px !important; } /* ============================================================ CREATE ACCOUNT LINK ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-register{ margin: 0 !important; font-size: 9px !important; } body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-register button{ font-size: 9px !important; } /* ============================================================ GUEST NOTE ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-modal-note{ display: block !important; margin-top: 12px !important; padding-top: 10px !important; font-size: 7px !important; line-height: 1.35 !important; } /* ============================================================ CLOSE BUTTON ============================================================ */ body .dp-site .dp-login-modal:not(.dp-register-modal) .dp-login-close{ top: 7px !important; right: 9px !important; width: 26px !important; height: 26px !important; font-size: 17px !important; } /* ============================================================ MOBILE ============================================================ */ @media(max-width:600px){ body .dp-site .dp-login-modal:not(.dp-register-modal){ width: calc(100% - 16px) !important; max-width: 420px !important; padding: 17px 16px !important; } } /* ============================================================ DEWPOINT ABOUT — LANDING ONLY ============================================================ */ .dp-site .dp-about-section{ padding: 72px max( 24px, calc((100vw - var(--dp-content-width,1180px)) / 2) ) 56px; background:#f7f8fc; border-top: 1px solid rgba(30,40,80,.07); } .dp-site .dp-about-heading{ max-width:720px; margin: 0 auto 34px; text-align:center; } .dp-site .dp-about-heading > span{ display:block; margin-bottom:8px; color:#7428e8; font-size:9px; font-weight:900; letter-spacing:2.5px; } .dp-site .dp-about-heading h2{ margin:0; color:#10162b; font-size: clamp(27px,4vw,42px); font-weight:900; line-height:1.05; } .dp-site .dp-about-heading p{ margin: 11px 0 0; color:#687089; font-size:11px; } /* FOUR CARDS */ .dp-site .dp-about-grid{ display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:15px; max-width:var(--dp-content-width,1180px); margin:0 auto; } .dp-site .dp-about-card{ min-width:0; min-height:250px; padding:23px 21px; background:#fff; border: 1px solid rgba(45,54,95,.12); border-radius:18px; box-shadow: 0 10px 28px rgba(25,32,70,.07); } .dp-site .dp-about-icon{ width:44px; height:44px; display:grid; place-items:center; margin-bottom:22px; color:#fff; background: linear-gradient( 135deg, #7428e8, #167df4 ); border-radius:13px; font-size:17px; font-weight:900; } .dp-site .dp-about-card.facebook .dp-about-icon{ font-family:Arial,sans-serif; font-size:22px; } .dp-site .dp-about-card > small{ display:block; margin-bottom:6px; color:#7428e8; font-size:8px; font-weight:900; letter-spacing:1.6px; } .dp-site .dp-about-card h3{ margin: 0 0 10px; color:#11172c; font-size:18px; } .dp-site .dp-about-card p{ margin:0; color:#687089; font-size:10px; line-height:1.65; } /* AMENITIES */ .dp-site .dp-about-amenities{ display:flex; flex-wrap:wrap; gap:6px; } .dp-site .dp-about-amenities span{ display:inline-flex; align-items:center; gap:5px; padding:6px 8px; background:#f5f3ff; border-radius:7px; color:#343b54; font-size:8px; font-weight:700; } .dp-site .dp-about-amenities i{ color:#7428e8; font-style:normal; } /* ACTION BUTTONS */ .dp-site .dp-about-body button{ margin-top:18px; border:0; padding:9px 12px; color:#fff; background: linear-gradient( 90deg, #6b2ee8, #197df3 ); border-radius:9px; font-size:8px; font-weight:900; cursor:pointer; } .dp-site .dp-about-address{ font-weight:700; } /* TABLET */ @media(max-width:1000px){ .dp-site .dp-about-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } } /* MOBILE */ @media(max-width:600px){ .dp-site .dp-about-section{ padding: 46px 12px; } .dp-site .dp-about-grid{ grid-template-columns:1fr; gap:10px; } .dp-site .dp-about-card{ min-height:0; } } /* ============================================================ READY TO PLAY CTA — INSIDE ABOUT ============================================================ */ .dp-site .dp-about-section .dp-gallery-cta.dp-about-cta{ width:100%; max-width:var(--dp-content-width,1180px); box-sizing:border-box; margin: 24px auto 0; } /* Keep CTA visually connected to the four cards */ .dp-site .dp-about-section .dp-about-grid + .dp-gallery-cta{ margin-top: 24px; } @media(max-width:600px){ .dp-site .dp-about-section .dp-gallery-cta.dp-about-cta{ width:100%; margin-top: 16px; } } /* ============================================================ ABOUT / AMENITIES IMAGE CARDS PHOTO + LOWER 70% THEME SHADE ============================================================ */ .dp-site .dp-about-card.has-background-image{ position:relative; overflow:hidden; min-height:310px; background-image: var(--dp-card-image); background-size:cover; background-position:center; isolation:isolate; } /* * The photo remains much clearer at the top. * The theme shade progressively becomes strong over the * lower ~70% where the text sits. */ .dp-site .dp-about-card.has-background-image::before{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient( to bottom, rgba(73,43,215,0.02) 0%, rgba(73,43,215,0.05) 25%, rgba(89,43,227,0.35) 38%, rgba(83,40,231,0.68) 52%, rgba(70,36,224,0.88) 72%, rgba(17,117,241,0.96) 100% ); } /* * Small dark tint behind the lower region for excellent * white-text contrast without hiding the image completely. */ .dp-site .dp-about-card.has-background-image::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; background: linear-gradient( to top, rgba(14,22,76,.22), transparent ); pointer-events:none; } /* Push content into the shaded area */ .dp-site .dp-about-card.has-background-image{ display:flex; flex-direction:column; justify-content:flex-end; } /* Icon stays just above the text group */ .dp-site .dp-about-card.has-background-image .dp-about-icon{ margin-top:auto; } /* Text becomes white */ .dp-site .dp-about-card.has-background-image > small, .dp-site .dp-about-card.has-background-image h3, .dp-site .dp-about-card.has-background-image p, .dp-site .dp-about-card.has-background-image .dp-about-body{ color:#fff; } .dp-site .dp-about-card.has-background-image > small{ opacity:.9; } .dp-site .dp-about-card.has-background-image h3{ font-size:22px; } .dp-site .dp-about-card.has-background-image p{ color:rgba(255,255,255,.94); } /* Amenities chips over image */ .dp-site .dp-about-card.has-background-image .dp-about-amenities span{ color:#fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); backdrop-filter: blur(5px); } .dp-site .dp-about-card.has-background-image .dp-about-amenities i{ color:#fff; } /* ============================================================ OWNER PROFILE IMAGE PREVIEW ============================================================ */ .court-about-image-editor{ display:grid; gap:8px; padding:14px; border: 1px solid rgba(90,98,140,.14); border-radius:14px; background: rgba(248,249,253,.75); } .court-about-image-editor > b{ font-size:12px; } .court-about-image-editor > small{ color:#747b90; font-size:9px; } .court-about-image-preview{ position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; display:grid; place-items:center; background: #eef0f7; background-size:cover; background-position:center; border-radius:12px; } .court-about-image-preview::after{ content:""; position:absolute; inset:auto 0 0; height:70%; background: linear-gradient( to bottom, rgba(104,42,225,.10), rgba(89,42,231,.72), rgba(26,115,241,.92) ); pointer-events:none; } .court-about-image-preview span{ position:relative; z-index:2; color:#858ba2; font-size:10px; font-weight:900; letter-spacing:1.5px; } .court-about-image-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } @media(max-width:600px){ .dp-site .dp-about-card.has-background-image{ min-height:290px; } } /* ============================================================ OWNER PROFILE IMAGE PREVIEW NORMAL IMAGE ONLY — NO LANDING PAGE SHADE ============================================================ */ .court-about-image-preview{ position:relative; width:100%; aspect-ratio:16/7; overflow:hidden; display:grid; place-items:center; background:#eef0f7; background-size:cover; background-position:center; border-radius:12px; } /* Remove the previous 70% gradient from owner profile preview */ .court-about-image-preview::after{ content:none !important; display:none !important; } /* Placeholder only when there is no image */ .court-about-image-preview span{ position:relative; z-index:1; color:#858ba2; font-size:10px; font-weight:900; letter-spacing:1.5px; } /* ============================================================ ABOUT SECTION — FACEBOOK PAGE PREVIEW ============================================================ */ .dp-site .dp-social-preview-body{ display:grid; gap:14px; } .dp-site .dp-facebook-page-preview{ width:100%; display:grid; grid-template-columns:48px minmax(0,1fr) 24px; align-items:center; gap:12px; padding:14px; text-align:left; border: 1px solid rgba(24,119,242,.18); border-radius:16px; background: linear-gradient( 135deg, rgba(24,119,242,.08), rgba(255,255,255,.96) ); cursor:pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .dp-site .dp-facebook-page-preview:hover{ transform:translateY(-2px); border-color: rgba(24,119,242,.38); box-shadow: 0 14px 32px rgba(24,119,242,.12); } .dp-site .dp-facebook-badge{ width:48px; height:48px; display:grid; place-items:center; border-radius:14px; background:#1877f2; color:#fff; font-family:Arial,sans-serif; font-size:34px; font-weight:900; line-height:1; } .dp-site .dp-facebook-preview-copy{ min-width:0; display:grid; gap:2px; } .dp-site .dp-facebook-preview-copy small{ color:#1877f2; font-size:9px; font-weight:900; letter-spacing:1px; } .dp-site .dp-facebook-preview-copy b{ overflow:hidden; color:#111827; font-size:14px; text-overflow:ellipsis; white-space:nowrap; } .dp-site .dp-facebook-preview-copy em{ color:#667085; font-size:10px; font-style:normal; line-height:1.45; } .dp-site .dp-facebook-arrow{ color:#1877f2; font-size:20px; font-weight:900; } /* ============================================================ ABOUT SECTION — MAP PREVIEW ============================================================ */ .dp-site .dp-map-preview-body{ display:grid; gap:12px; } .dp-site .dp-map-preview{ position:relative; width:100%; height:150px; padding:0; overflow:hidden; border: 1px solid rgba(76,86,130,.15); border-radius:16px; background:#eef1f6; cursor:pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); } .dp-site .dp-map-preview iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; pointer-events:none; } .dp-site .dp-map-preview-cover{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background: linear-gradient( to bottom, transparent 35%, rgba(10,18,48,.12) 100% ); color:#fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); } .dp-site .dp-map-preview-cover > span{ width:34px; height:34px; display:grid; place-items:center; margin-bottom:4px; border-radius:50%; background: rgba(88,55,224,.92); font-size:20px; box-shadow: 0 6px 16px rgba(42,30,110,.28); } .dp-site .dp-map-preview-cover b{ font-size:13px; } .dp-site .dp-map-preview-cover small{ font-size:9px; font-weight:700; } .dp-site .dp-about-card.facebook .dp-about-body > button, .dp-site .dp-about-card.map .dp-about-body > button, .dp-site .dp-social-preview-body > button:not(.dp-facebook-page-preview), .dp-site .dp-map-preview-body > button:not(.dp-map-preview){ margin-top:2px; } /* Mobile */ @media(max-width:600px){ .dp-site .dp-map-preview{ height:140px; } .dp-site .dp-facebook-page-preview{ grid-template-columns:42px minmax(0,1fr) 20px; padding:12px; } .dp-site .dp-facebook-badge{ width:42px; height:42px; font-size:30px; } } /* ============================================================ MAP CARD — SAME TREATMENT AS ABOUT / AMENITIES FULL MAP + LOWER 70% THEME SHADE ============================================================ */ .dp-site .dp-about-card.map.has-map-background{ position:relative; min-height:310px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; background:#eef1f6; } /* Actual map fills entire card */ .dp-site .dp-about-card.map .dp-map-background-layer{ position:absolute; inset:0; z-index:-3; width:100%; height:100%; margin:0; padding:0; overflow:hidden; border:0; border-radius:inherit; background:#eef1f6; cursor:pointer; } .dp-site .dp-about-card.map .dp-map-background-layer iframe{ position:absolute; inset:0; width:100% !important; height:100% !important; border:0; pointer-events:none; } /* * Theme overlay. * Top remains clear. * Lower ~70% progressively receives the purple/blue shade. */ .dp-site .dp-about-card.map.has-map-background::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background: linear-gradient( to bottom, rgba(73,43,215,.02) 0%, rgba(73,43,215,.04) 24%, rgba(89,43,227,.32) 38%, rgba(83,40,231,.65) 52%, rgba(70,36,224,.87) 72%, rgba(17,117,241,.96) 100% ); } /* Additional subtle lower contrast */ .dp-site .dp-about-card.map.has-map-background::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; pointer-events:none; background: linear-gradient( to top, rgba(14,22,76,.24), transparent ); } /* Keep all actual card information above the map */ .dp-site .dp-about-card.map.has-map-background .dp-about-icon, .dp-site .dp-about-card.map.has-map-background > small, .dp-site .dp-about-card.map.has-map-background > h3, .dp-site .dp-about-card.map.has-map-background .dp-about-body{ position:relative; z-index:2; } .dp-site .dp-about-card.map.has-map-background .dp-about-icon{ margin-top:auto; } /* White text like About/Amenities */ .dp-site .dp-about-card.map.has-map-background > small, .dp-site .dp-about-card.map.has-map-background h3, .dp-site .dp-about-card.map.has-map-background .dp-about-address, .dp-site .dp-about-card.map.has-map-background .dp-map-background-body p{ color:#fff; } .dp-site .dp-about-card.map.has-map-background .dp-about-address{ margin:0 0 12px; color:rgba(255,255,255,.95); font-weight:600; line-height:1.45; } /* Open Map button */ .dp-site .dp-about-card.map.has-map-background .dp-map-background-body{ display:grid; gap:10px; width:100%; } .dp-site .dp-about-card.map.has-map-background .dp-map-background-body > button{ width:max-content; margin:0; color:#fff; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.15); backdrop-filter: blur(7px); box-shadow: 0 8px 22px rgba(10,20,70,.18); } .dp-site .dp-about-card.map.has-map-background .dp-map-background-body > button:hover{ background: rgba(255,255,255,.24); transform: translateY(-1px); } /* Remove old floating-map presentation */ .dp-site .dp-about-card.map.has-map-background .dp-map-preview{ display:none !important; } @media(max-width:600px){ .dp-site .dp-about-card.map.has-map-background{ min-height:290px; } } /* ============================================================ FACEBOOK CARD — LOWER 70% SHADE MATCH ABOUT / AMENITIES / MAP VISUAL STYLE ============================================================ */ .dp-site .dp-about-card.facebook{ position:relative; min-height:310px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; isolation:isolate; background: linear-gradient( 145deg, #ffffff 0%, #f7f8ff 100% ); } /* * Keep the top area light. * Facebook blue + Dewpoint purple gradually shade * the lower ~70% of the card. */ .dp-site .dp-about-card.facebook::before{ content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; background: linear-gradient( to bottom, rgba(24,119,242,0) 0%, rgba(24,119,242,.02) 25%, rgba(74,62,225,.20) 36%, rgba(77,54,229,.48) 50%, rgba(58,63,224,.78) 70%, rgba(24,119,242,.94) 100% ); } /* Extra lower contrast for readable text */ .dp-site .dp-about-card.facebook::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:70%; z-index:-1; pointer-events:none; background: linear-gradient( to top, rgba(20,31,105,.28), transparent ); } /* Keep content above the gradient */ .dp-site .dp-about-card.facebook .dp-about-icon, .dp-site .dp-about-card.facebook > small, .dp-site .dp-about-card.facebook > h3, .dp-site .dp-about-card.facebook .dp-about-body{ position:relative; z-index:2; } .dp-site .dp-about-card.facebook .dp-about-icon{ margin-top:auto; } /* Lower content becomes white */ .dp-site .dp-about-card.facebook > small, .dp-site .dp-about-card.facebook > h3, .dp-site .dp-about-card.facebook .dp-about-body p{ color:#fff; } .dp-site .dp-about-card.facebook > small{ opacity:.92; } /* Facebook badge preview becomes glassy over the gradient */ .dp-site .dp-about-card.facebook .dp-facebook-page-preview{ border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.15); backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(13,28,91,.16); } .dp-site .dp-about-card.facebook .dp-facebook-preview-copy small, .dp-site .dp-about-card.facebook .dp-facebook-preview-copy b, .dp-site .dp-about-card.facebook .dp-facebook-preview-copy em, .dp-site .dp-about-card.facebook .dp-facebook-arrow{ color:#fff; } .dp-site .dp-about-card.facebook .dp-facebook-preview-copy em{ color: rgba(255,255,255,.86); } /* Visit Facebook button */ .dp-site .dp-about-card.facebook .dp-social-preview-body > button:not(.dp-facebook-page-preview){ width:max-content; color:#fff; border: 1px solid rgba(255,255,255,.30); background: rgba(255,255,255,.15); backdrop-filter: blur(7px); box-shadow: 0 8px 22px rgba(13,28,91,.18); } .dp-site .dp-about-card.facebook .dp-social-preview-body > button:not(.dp-facebook-page-preview):hover{ background: rgba(255,255,255,.25); transform: translateY(-1px); } @media(max-width:600px){ .dp-site .dp-about-card.facebook{ min-height:290px; } } /* ========================================================= DEWPOINT LANDING CHECKOUT — LIGHTER BLUE V1 ========================================================= */ /* Booking/date summary cards */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item, body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary{ color:#fff !important; background: linear-gradient( 135deg, #4f83e8 0%, #3f6fd8 100% ) !important; border: 1px solid #79a5f2 !important; box-shadow: 0 8px 20px rgba(63,111,216,.18) !important; } /* Booking rows in Review Booking */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article{ color:#fff !important; background: linear-gradient( 135deg, #5689eb, #4375dc ) !important; border: 1px solid #7ca7f2 !important; border-radius:12px !important; padding:13px 15px !important; margin-bottom:8px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small{ color:#eaf2ff !important; } /* Payment method cards */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button{ color:#fff !important; background: linear-gradient( 135deg, #5689eb, #4375dc ) !important; border: 1px solid #7ca7f2 !important; box-shadow: 0 6px 16px rgba(63,111,216,.14) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small{ color:#eaf2ff !important; } /* Selected payment method */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active{ color:#fff !important; background: linear-gradient( 135deg, #3b82f6, #2563eb ) !important; border-color:#93b8ff !important; box-shadow: 0 8px 22px rgba(37,99,235,.22) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button i{ color:#fff !important; } /* Successful booking rows */ body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article{ color:#fff !important; background: linear-gradient( 135deg, #5689eb, #4375dc ) !important; border: 1px solid #7ca7f2 !important; border-radius:12px !important; padding:13px 15px !important; margin-bottom:8px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ color:#eaf2ff !important; } /* ========================================================= DEWPOINT CHECKOUT FORCE UNIFORM CONFIRM-BUTTON GRADIENT ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-gradient: linear-gradient( 90deg, #8929e9, #6341ef 48%, #277cf6 ); } body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 9px 24px rgba(103,55,229,.20) !important; } /* Review booking item rows */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; border-radius:12px !important; margin-bottom:8px !important; padding:13px 15px !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ color:rgba(255,255,255,.88) !important; } /* Discount / voucher dropdown */ body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount select{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout select option{ color:#111526 !important; background:#fff !important; } /* Terms and conditions box */ body .dp-site .dp-home-booking .dp-inline-checkout .terms-box, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card *, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions *{ color:#fff !important; } /* Back button */ body .dp-site .dp-home-booking .dp-inline-checkout .page-back, body .dp-site .dp-home-booking .dp-inline-checkout .back-button{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } /* Payment choices - all blue family */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; box-shadow:0 8px 20px rgba(103,55,229,.16) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button i{ color:#fff !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:not(.active){ opacity:.78 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active{ opacity:1 !important; } /* Success status box */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .status-box, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .booking-status, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .success-status{ background:var(--dp-checkout-gradient) !important; color:#fff !important; border:0 !important; } /* Any obvious dark cards inside Dewpoint checkout */ body .dp-site .dp-home-booking .dp-inline-checkout [class*="checkout"] .dark, body .dp-site .dp-home-booking .dp-inline-checkout [class*="booking"] .dark{ background:var(--dp-checkout-gradient) !important; color:#fff !important; } /* ========================================================= DEWPOINT CHECKOUT — CLEAN WHITE / MINIMAL V1 ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-ink:#101828; --dp-checkout-muted:#667085; --dp-checkout-line:#d8dee9; --dp-checkout-soft:#f8fafc; --dp-checkout-blue:#2563eb; } /* Main checkout surfaces */ 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{ background:#fff !important; color:var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow: 0 10px 30px rgba(15,23,42,.06) !important; } /* Venue / booking summary */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item, body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary{ background:#fff !important; color:var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } /* Booking rows */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 0 !important; border-bottom: 1px solid #e5e9f0 !important; border-radius:0 !important; padding: 12px 0 !important; margin:0 !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ color: var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ color: var(--dp-checkout-muted) !important; } /* Discount / voucher */ body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount select{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } /* Payment choices */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; opacity:1 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b{ color: var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small{ color: var(--dp-checkout-muted) !important; } /* Selected payment method */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active{ background:#f5f8ff !important; border-color: #8fb3ff !important; box-shadow: 0 0 0 2px rgba(37,99,235,.08) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button.active i{ color: var(--dp-checkout-blue) !important; } /* Disabled payment method */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:disabled{ background:#f6f7f9 !important; color:#98a2b3 !important; border-color:#e4e7ec !important; opacity:1 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:disabled b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button:disabled small{ color:#98a2b3 !important; } /* Terms box */ body .dp-site .dp-home-booking .dp-inline-checkout .terms-box, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card *, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms *, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions *{ color: var(--dp-checkout-ink) !important; } /* Back button becomes simple text-style control */ body .dp-site .dp-home-booking .dp-inline-checkout .page-back, body .dp-site .dp-home-booking .dp-inline-checkout .back-button{ background:#fff !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; box-shadow:none !important; } /* Success status areas */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .status-box, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .booking-status, body .dp-site .dp-home-booking .dp-inline-checkout .booking-success-4r .success-status{ background:#f8fafc !important; color: var(--dp-checkout-ink) !important; border: 1px solid var(--dp-checkout-line) !important; } /* Keep only main action colorful */ 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,.20) !important; } /* ========================================================= DEWPOINT CHECKOUT — READABILITY PATCH V2 ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-ink:#101828; --dp-checkout-muted:#475467; --dp-checkout-soft:#667085; --dp-checkout-line:#d0d5dd; } /* --------------------------------------------------------- GLOBAL TYPE SIZE BOOST --------------------------------------------------------- */ 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{ font-size:14px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h1{ font-size:34px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h2{ font-size:30px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h3{ font-size:22px !important; } body .dp-site .dp-home-booking .dp-inline-checkout h4{ font-size:18px !important; } body .dp-site .dp-home-booking .dp-inline-checkout p, body .dp-site .dp-home-booking .dp-inline-checkout label, body .dp-site .dp-home-booking .dp-inline-checkout span, body .dp-site .dp-home-booking .dp-inline-checkout small, body .dp-site .dp-home-booking .dp-inline-checkout b, body .dp-site .dp-home-booking .dp-inline-checkout strong, body .dp-site .dp-home-booking .dp-inline-checkout button, body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout input{ font-size:14px !important; } /* --------------------------------------------------------- BOOKING ROWS --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article b, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article b{ font-size:14px !important; color:var(--dp-checkout-ink) !important; font-weight:700 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article small, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article small{ font-size:12px !important; color:var(--dp-checkout-muted) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-items article strong, body .dp-site .dp-home-booking .dp-inline-checkout .success-booking-items article strong{ font-size:16px !important; color:var(--dp-checkout-ink) !important; font-weight:800 !important; } /* --------------------------------------------------------- DATE / VENUE SUMMARY BOXES --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary b, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item b{ font-size:15px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary small, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item small{ font-size:12px !important; color:#e5edff !important; } /* --------------------------------------------------------- DISCOUNT / VOUCHER --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout label{ color:var(--dp-checkout-ink) !important; font-weight:600 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount label, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select-label, body .dp-site .dp-home-booking .dp-inline-checkout select + label, body .dp-site .dp-home-booking .dp-inline-checkout .discount-label{ color:var(--dp-checkout-ink) !important; font-size:14px !important; font-weight:700 !important; } body .dp-site .dp-home-booking .dp-inline-checkout select, body .dp-site .dp-home-booking .dp-inline-checkout .discount-select{ color:var(--dp-checkout-ink) !important; font-size:14px !important; font-weight:600 !important; } /* --------------------------------------------------------- SUBTOTAL / DISCOUNT / TOTAL --------------------------------------------------------- */ /* General summary rows */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card hr + div, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-summary-row, body .dp-site .dp-home-booking .dp-inline-checkout .summary-row, body .dp-site .dp-home-booking .dp-inline-checkout .total-row, body .dp-site .dp-home-booking .dp-inline-checkout .price-row, body .dp-site .dp-home-booking .dp-inline-checkout .totals-row{ color:var(--dp-checkout-ink) !important; } /* Labels like Subtotal / Discount / Total */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-summary-row span:first-child, body .dp-site .dp-home-booking .dp-inline-checkout .summary-row span:first-child, body .dp-site .dp-home-booking .dp-inline-checkout .price-row span:first-child, body .dp-site .dp-home-booking .dp-inline-checkout .totals-row span:first-child{ color:var(--dp-checkout-muted) !important; font-size:14px !important; font-weight:700 !important; } /* Amounts */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-summary-row span:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .summary-row span:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .price-row span:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .totals-row span:last-child{ color:var(--dp-checkout-ink) !important; font-size:15px !important; font-weight:800 !important; } /* Force the LAST summary row (usually Total) to stand out */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .summary-row:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .checkout-summary-row:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .price-row:last-child, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .totals-row:last-child{ border-top:1px solid var(--dp-checkout-line) !important; padding-top:12px !important; margin-top:8px !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .summary-row:last-child span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .checkout-summary-row:last-child span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .price-row:last-child span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card .totals-row:last-child span{ color:#111827 !important; font-size:17px !important; font-weight:900 !important; } /* --------------------------------------------------------- PAYMENT METHOD CARDS --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button b{ font-size:14px !important; font-weight:700 !important; color:var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-payment-choice > button small{ font-size:12px !important; color:var(--dp-checkout-muted) !important; } /* --------------------------------------------------------- TERMS --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .terms-box, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions{ color:var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box b, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms b, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions b{ font-size:14px !important; font-weight:800 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .terms-box small, body .dp-site .dp-home-booking .dp-inline-checkout .terms-card small, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-terms small, body .dp-site .dp-home-booking .dp-inline-checkout .terms-and-conditions small{ font-size:12px !important; color:var(--dp-checkout-muted) !important; } /* --------------------------------------------------------- BACK BUTTON --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .page-back, body .dp-site .dp-home-booking .dp-inline-checkout .back-button{ font-size:13px !important; font-weight:700 !important; } /* ========================================================= DEWPOINT CHECKOUT FINAL READABILITY PATCH ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout{ --dp-checkout-ink:#111827; --dp-checkout-muted:#475467; --dp-checkout-line:#d0d5dd; } /* --------------------------------------------------------- TOP SUMMARY TAB --------------------------------------------------------- */ /* keep the box, but make it cleaner */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item{ color:var(--dp-checkout-ink) !important; } /* remove/hide the Dewpoint title line */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary b, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item b{ display:none !important; } /* keep date visible and readable */ body .dp-site .dp-home-booking .dp-inline-checkout .booking-date-summary small, body .dp-site .dp-home-booking .dp-inline-checkout .booking-float-item small{ display:block !important; font-size:18px !important; font-weight:800 !important; color:#ffffff !important; } /* --------------------------------------------------------- DISCOUNT / VOUCHER --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout label, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card label{ color:var(--dp-checkout-ink) !important; font-size:16px !important; font-weight:700 !important; } body .dp-site .dp-home-booking .dp-inline-checkout select{ color:var(--dp-checkout-ink) !important; font-size:15px !important; font-weight:700 !important; } /* --------------------------------------------------------- SUBTOTAL / DISCOUNT / TOTAL — FORCE TO BLACK --------------------------------------------------------- */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"], body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"], body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"], body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"]{ color:var(--dp-checkout-ink) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] strong, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="summary"] small, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] strong, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="discount"] strong, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="price"] strong{ color:var(--dp-checkout-ink) !important; } /* strong emphasis for total row */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"]{ border-top:1px solid var(--dp-checkout-line) !important; padding-top:10px !important; margin-top:6px !important; font-weight:900 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] span, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] b, body .dp-site .dp-home-booking .dp-inline-checkout .checkout-card [class*="total"] strong{ color:#000000 !important; font-size:16px !important; font-weight:900 !important; } /* Specifically protect the three sections we want visible */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) > .dp-home-booking{ display:block !important; } /* Remove excess landing-page spacing during checkout */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:32px !important; padding-bottom:50px !important; } /* Hide the normal booking-board heading while already checking out. The checkout itself becomes the main content. */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking-title{ display:none !important; } /* Give checkout a clean centered width */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:min(100% - 32px,1050px) !important; margin:0 auto !important; } /* Mobile spacing */ @media (max-width:650px){ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:20px !important; padding-bottom:35px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:calc(100% - 20px) !important; } } /* ========================================================= DEWPOINT CHECKOUT — DISCOUNT TABS V1 ========================================================= */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-box{ margin:18px 0 10px !important; padding:16px !important; background:#fff !important; border:1px solid #d6dde8 !important; border-radius:14px !important; color:#111827 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-box > b{ display:block; font-size:16px !important; font-weight:800 !important; color:#111827 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-box > small{ display:block; margin-top:3px; font-size:12px !important; color:#667085 !important; } /* Pills */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-tabs{ display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-tabs button{ cursor:pointer; color:#111827 !important; background:#fff !important; border:1px solid #cbd5e1 !important; border-radius:999px !important; padding:9px 17px !important; font-size:13px !important; font-weight:750 !important; box-shadow:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-discount-tabs button.active{ color:#fff !important; background:#194681 !important; border-color:#194681 !important; } /* Voucher field */ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:13px; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry input{ width:100%; color:#111827 !important; background:#fff !important; border:1px solid #cbd5e1 !important; border-radius:9px !important; padding:11px 13px !important; font-size:13px !important; outline:none !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry input:focus{ border-color:#7aa2df !important; box-shadow: 0 0 0 3px rgba(37,99,235,.08) !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry button{ border:0 !important; border-radius:9px !important; padding:0 18px !important; min-height:42px !important; color:#fff !important; background:#8a94a3 !important; font-size:13px !important; font-weight:800 !important; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry button:not(:disabled){ background:#194681 !important; cursor:pointer; } body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry button:disabled{ opacity:.55 !important; } /* Mobile */ @media (max-width:650px){ body .dp-site .dp-home-booking .dp-inline-checkout .checkout-voucher-entry{ grid-template-columns:1fr; } } /* --------------------------------------------------------- BOOKING SECTION --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:18px !important; padding-bottom:18px !important; min-height:auto !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:min(94%,920px) !important; max-width:920px !important; margin:0 auto !important; } /* --------------------------------------------------------- BACK BUTTON --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-back{ padding:7px 12px !important; margin-bottom:8px !important; font-size:11px !important; border-radius:7px !important; } /* --------------------------------------------------------- MAIN CHECKOUT CARD --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card{ padding:18px 20px !important; border-radius:15px !important; } /* Checkout kicker */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card .title small{ font-size:10px !important; } /* Review Booking */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card .title h2{ font-size:20px !important; margin-top:2px !important; margin-bottom:10px !important; } /* --------------------------------------------------------- DATE --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .multi-date-checkout > section > b, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .multi-date-checkout > div > b{ font-size:14px !important; } /* --------------------------------------------------------- COURT BOOKING ROWS --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items{ margin-bottom:10px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article{ padding:9px 0 !important; min-height:auto !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article small{ font-size:10px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-items article strong{ font-size:13px !important; } /* --------------------------------------------------------- DISCOUNT / VOUCHER --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-box{ margin:10px 0 7px !important; padding:11px 13px !important; border-radius:11px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-box > b{ font-size:13px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-box > small{ font-size:10px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-tabs{ margin-top:8px !important; gap:6px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-discount-tabs button{ padding:7px 13px !important; font-size:11px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-voucher-entry{ margin-top:8px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-voucher-entry input{ padding:8px 11px !important; min-height:36px !important; font-size:11px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-voucher-entry button{ min-height:36px !important; padding:0 14px !important; font-size:11px !important; } /* --------------------------------------------------------- SUBTOTAL / DISCOUNT / TOTAL --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .price-line, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-total-row, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .summary-line{ padding-top:7px !important; padding-bottom:7px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card > div > span, body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card > div > b{ line-height:1.2 !important; } /* --------------------------------------------------------- PAYMENT METHODS --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice{ margin:10px 0 !important; gap:5px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > button{ min-height:46px !important; padding:8px 11px !important; border-radius:9px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > button b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-payment-choice > button small{ font-size:9px !important; } /* --------------------------------------------------------- TERMS --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms{ margin-top:9px !important; padding:10px 12px !important; border-radius:9px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms > b{ font-size:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms p{ margin:4px 0 7px !important; font-size:9px !important; line-height:1.35 !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-terms label{ font-size:9px !important; } /* --------------------------------------------------------- CONFIRM BUTTON --------------------------------------------------------- */ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-main-button{ margin-top:9px !important; min-height:38px !important; padding:8px 16px !important; font-size:12px !important; border-radius:8px !important; } /* --------------------------------------------------------- LARGE DESKTOP — FIT MORE COMFORTABLY IN ONE VIEW --------------------------------------------------------- */ @media (min-width:1100px) and (min-height:760px){ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-home-booking{ padding-top:12px !important; padding-bottom:12px !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card{ padding-top:14px !important; padding-bottom:14px !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width:650px){ body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .dp-inline-checkout{ width:calc(100% - 14px) !important; } body .dp-site:has( .dp-home-booking .dp-inline-checkout ) .checkout-card{ padding:14px 12px !important; } } /* ========================================================= DEWPOINT CHECKOUT — ULTRA COMPACT V2 ========================================================= */ @media (min-width:900px){ /* whole checkout section */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-home-booking{ padding:8px 0 10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:min(86%,760px) !important; max-width:760px !important; margin:0 auto !important; } /* back button */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-back{ padding:5px 10px !important; margin:0 0 5px !important; font-size:9px !important; border-radius:6px !important; } /* main card */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card{ padding:12px 14px !important; border-radius:12px !important; } /* checkout title */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .title small{ font-size:8px !important; line-height:1 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .title h2{ font-size:17px !important; line-height:1.05 !important; margin:2px 0 7px !important; } /* date banner */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > div:first-child, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > section:first-child{ min-height:34px !important; padding:7px 10px !important; margin-bottom:4px !important; border-radius:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > div:first-child b, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout > section:first-child b{ font-size:12px !important; } /* booking rows */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items{ margin-bottom:6px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ padding:6px 0 !important; gap:6px !important; min-height:34px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article b{ font-size:10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article small{ font-size:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article strong{ font-size:11px !important; } /* discount */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box{ padding:8px 10px !important; margin:7px 0 5px !important; border-radius:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box > b{ font-size:11px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box > small{ font-size:8px !important; margin-top:1px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-tabs{ margin-top:5px !important; gap:5px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-tabs button{ padding:5px 10px !important; font-size:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-voucher-entry{ margin-top:5px !important; gap:5px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-voucher-entry input{ min-height:30px !important; padding:6px 8px !important; font-size:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-voucher-entry button{ min-height:30px !important; padding:0 10px !important; font-size:9px !important; } /* subtotal / discount / total */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .summary-row, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .price-row, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .totals-row{ padding:5px 0 !important; min-height:auto !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .summary-row span, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .price-row span, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .totals-row span{ font-size:9px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .summary-row b, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .price-row b, body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card .totals-row b{ font-size:10px !important; } /* payment methods */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice{ margin:7px 0 !important; gap:4px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > b{ font-size:10px !important; margin-bottom:1px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button{ min-height:38px !important; padding:6px 9px !important; border-radius:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button b{ font-size:10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button small{ font-size:7px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button i{ font-size:11px !important; } /* terms */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms{ margin-top:6px !important; padding:7px 9px !important; border-radius:8px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms > b{ font-size:10px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms p{ margin:2px 0 4px !important; font-size:7px !important; line-height:1.2 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms label{ font-size:7px !important; line-height:1.15 !important; } /* confirm button */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-main-button{ min-height:32px !important; margin-top:6px !important; padding:6px 12px !important; font-size:9px !important; border-radius:7px !important; } } /* ========================================================= DEWPOINT CHECKOUT — FIT ENTIRE CHECKOUT IN DESKTOP VIEW ========================================================= */ @media (min-width:900px){ /* Much less white space around checkout */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-home-booking{ padding:4px 0 6px !important; min-height:0 !important; } /* Scale checkout as one complete unit */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:min(94vw,980px) !important; max-width:980px !important; margin:0 auto !important; zoom:.78; } /* Smaller outside wrapper */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-shell{ margin:0 !important; padding:0 !important; } /* Back button close to checkout */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-back{ margin:0 0 4px !important; } /* Reduce remaining card spacing */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card{ padding:12px 16px !important; } /* Date */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout{ margin-top:4px !important; margin-bottom:4px !important; } /* Booking row */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ padding:5px 0 !important; } /* Discount */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-discount-box{ margin:5px 0 !important; padding:8px 10px !important; } /* Payment methods become one horizontal row */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:6px !important; margin:6px 0 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > b{ grid-column:1 / -1 !important; margin:0 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice > button{ min-height:44px !important; margin:0 !important; } /* Terms compact */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms{ padding:7px 10px !important; margin:5px 0 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-terms p{ margin:2px 0 4px !important; } /* Confirm */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-main-button{ margin-top:5px !important; min-height:34px !important; } } /* Don't zoom mobile */ @media (max-width:899px){ body .dp-site .dp-home-booking .dp-inline-checkout{ zoom:1 !important; } } /* ========================================================= DEWPOINT CHECKOUT — CENTER + COURT/TIME/AMOUNT ALIGNMENT ========================================================= */ @media (min-width:900px){ /* Center the scaled checkout correctly */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-home-booking{ display:flex !important; justify-content:center !important; align-items:flex-start !important; padding:4px 0 6px !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:980px !important; max-width:980px !important; margin:0 auto !important; position:relative !important; left:0 !important; right:0 !important; transform-origin:top center !important; zoom:.78; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout::before{ content:"COURT TIME AMOUNT"; display:grid !important; grid-template-columns: minmax(150px,.8fr) minmax(250px,1.4fr) minmax(120px,.5fr) !important; align-items:center !important; padding:6px 0 !important; margin-top:4px !important; border-bottom: 1px solid #d8dee8 !important; color:#667085 !important; font-size:9px !important; font-weight:800 !important; letter-spacing:.05em !important; white-space:normal !important; } /* ----------------------------------------------------- EACH BOOKING ROW Court | Time | Amount ----------------------------------------------------- */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ display:grid !important; grid-template-columns: minmax(150px,.8fr) minmax(250px,1.4fr) minmax(120px,.5fr) !important; align-items:center !important; gap:12px !important; padding:7px 0 !important; margin:0 !important; border-bottom: 1px solid #e2e7ef !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article > div{ display:contents !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article b{ grid-column:1 !important; margin:0 !important; color:#111827 !important; font-size:10px !important; font-weight:800 !important; text-align:left !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article small{ grid-column:2 !important; margin:0 !important; color:#475467 !important; font-size:9px !important; font-weight:500 !important; text-align:left !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article strong{ grid-column:3 !important; margin:0 !important; color:#111827 !important; font-size:10px !important; font-weight:900 !important; text-align:right !important; white-space:nowrap !important; } } /* Mobile keeps natural stacked spacing */ @media (max-width:899px){ body .dp-site .dp-home-booking .checkout-items article{ display:grid !important; grid-template-columns: .75fr 1.25fr auto !important; align-items:center !important; gap:6px !important; } body .dp-site .dp-home-booking .checkout-items article > div{ display:contents !important; } body .dp-site .dp-home-booking .checkout-items article strong{ text-align:right !important; } } /* ========================================================= DEWPOINT CHECKOUT — COMPRESSED WIDTH V1 ========================================================= */ @media (min-width:900px){ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .dp-inline-checkout{ width:720px !important; max-width:720px !important; margin:0 auto !important; zoom:.82 !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-shell{ width:100% !important; max-width:100% !important; margin:0 auto !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-card{ padding-left:14px !important; padding-right:14px !important; } /* booking table columns */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .multi-date-checkout::before{ grid-template-columns: 1fr 1.15fr auto !important; } body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article{ grid-template-columns: 1fr 1.15fr auto !important; gap:10px !important; } /* payment cards stay on one row */ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-payment-choice{ grid-template-columns:repeat(3,1fr) !important; gap:5px !important; } } /* ========================================================= DEWPOINT CHECKOUT — LARGER BOOKING TIME ========================================================= */ @media (min-width:900px){ body .dp-site:has(.dp-home-booking .dp-inline-checkout) .checkout-items article small{ font-size:12px !important; font-weight:700 !important; color:#334155 !important; letter-spacing:.01em !important; } } @media (max-width:899px){ body .dp-site .dp-home-booking .checkout-items article small{ font-size:12px !important; font-weight:700 !important; color:#334155 !important; } } /* My Bookings route and component styling are owned by modules/player/my-bookings-page.css. */ /* ========================================================= DEWPOINT ACTIVE HOLD — PLAIN WHITE / BLACK V2 ========================================================= */ /* Main recovery container */ body .dp-inline-checkout .payment-recovery-page, body .dp-inline-checkout .payment-recovery-card{ background:#ffffff !important; background-image:none !important; color:#111111 !important; } /* Main card */ body .dp-inline-checkout .payment-recovery-card{ border:1px solid #d9dee7 !important; box-shadow:0 10px 28px rgba(0,0,0,.08) !important; } body .dp-inline-checkout .payment-recovery-card > header{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; } body .dp-inline-checkout .payment-recovery-card > header small, body .dp-inline-checkout .payment-recovery-card > header h2, body .dp-inline-checkout .payment-recovery-card > header p, body .dp-inline-checkout .payment-recovery-card > header b, body .dp-inline-checkout .payment-recovery-card > header strong, body .dp-inline-checkout .payment-recovery-card > header span{ color:#111111 !important; text-shadow:none !important; } /* Check icon */ body .dp-inline-checkout .payment-recovery-icon{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:2px solid #111111 !important; box-shadow:none !important; } /* Countdown timer */ body .dp-inline-checkout .payment-recovery-timer{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* Venue row */ body .dp-inline-checkout .payment-recovery-venue{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; } /* Venue text */ body .dp-inline-checkout .payment-recovery-venue *{ color:#111111 !important; } /* Individual held booking rows */ body .dp-inline-checkout .payment-recovery-items article{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; box-shadow:none !important; } /* ALL row text black — including price */ body .dp-inline-checkout .payment-recovery-items article *, body .dp-inline-checkout .payment-recovery-items article strong, body .dp-inline-checkout .payment-recovery-items article small, body .dp-inline-checkout .payment-recovery-items article b{ color:#111111 !important; } /* Amount to Pay */ body .dp-inline-checkout .payment-recovery-total{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #e1e5eb !important; } /* Amount text and price */ body .dp-inline-checkout .payment-recovery-total *{ color:#111111 !important; } /* Resume Payment = black */ body .dp-inline-checkout .payment-recovery-actions .primary{ background:#111111 !important; background-image:none !important; color:#ffffff !important; border:1px solid #111111 !important; box-shadow:none !important; } /* Cancel Hold = white */ body .dp-inline-checkout .payment-recovery-cancel{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* Note at bottom */ body .dp-inline-checkout .payment-recovery-note{ color:#555555 !important; } /* Remove accidental inherited gradients from recovery card */ body .dp-inline-checkout .payment-recovery-card div:not(.payment-recovery-icon), body .dp-inline-checkout .payment-recovery-card article{ background-image:none !important; } /* ========================================================= ACTIVE HOLD RECOVERY — REMOVE BOX/TAB COLORS Plain white blocks, black text ========================================================= */ body .dp-site .dp-inline-checkout .payment-recovery-card{ background:#ffffff !important; border:1px solid #d9dee7 !important; box-shadow:0 10px 24px rgba(0,0,0,.08) !important; } body .dp-site .dp-inline-checkout .payment-recovery-card > header{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* venue dark box */ body .dp-site .dp-inline-checkout .payment-recovery-venue{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* booking item dark box */ body .dp-site .dp-inline-checkout .payment-recovery-items article{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* total box */ body .dp-site .dp-inline-checkout .payment-recovery-total{ background:#ffffff !important; background-image:none !important; border:1px solid #e3e7ee !important; box-shadow:none !important; } /* remove any inherited colored panels inside the hold card */ body .dp-site .dp-inline-checkout .payment-recovery-card div, body .dp-site .dp-inline-checkout .payment-recovery-card section, body .dp-site .dp-inline-checkout .payment-recovery-card article{ background-image:none !important; } /* all text black */ body .dp-site .dp-inline-checkout .payment-recovery-card, body .dp-site .dp-inline-checkout .payment-recovery-card b, body .dp-site .dp-inline-checkout .payment-recovery-card strong, body .dp-site .dp-inline-checkout .payment-recovery-card h2, body .dp-site .dp-inline-checkout .payment-recovery-card p, body .dp-site .dp-inline-checkout .payment-recovery-card small, body .dp-site .dp-inline-checkout .payment-recovery-card span{ color:#111111 !important; text-shadow:none !important; } /* timer box */ body .dp-site .dp-inline-checkout .payment-recovery-timer{ background:#ffffff !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* check icon */ body .dp-site .dp-inline-checkout .payment-recovery-icon{ background:#ffffff !important; color:#111111 !important; border:2px solid #111111 !important; box-shadow:none !important; } /* keep buttons readable */ body .dp-site .dp-inline-checkout .payment-recovery-actions .primary{ background:#111111 !important; background-image:none !important; color:#ffffff !important; border:1px solid #111111 !important; } body .dp-site .dp-inline-checkout .payment-recovery-cancel{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; } /* ========================================================= ACTIVE HOLD RECOVERY — RESTORE RESUME PAYMENT BUTTON COLOR ========================================================= */ body .dp-site .payment-recovery-actions .primary, body .dp-site .dp-inline-checkout .payment-recovery-actions .primary{ background:linear-gradient( 90deg, #8b2be8 0%, #6b43ef 48%, #2f7df6 100% ) !important; color:#ffffff !important; border:0 !important; box-shadow:0 10px 24px rgba(103,55,229,.22) !important; } body .dp-site .payment-recovery-actions .primary:hover, body .dp-site .dp-inline-checkout .payment-recovery-actions .primary:hover{ filter:brightness(1.03) !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — WHITE / BLACK CLEAN THEME Keep accent only on Confirm Booking ========================================================= */ /* Main payment shell */ body .dp-site .dp-inline-checkout .payment-page, body .dp-site .dp-inline-checkout .checkout-payment, body .dp-site .dp-inline-checkout .payment-shell{ background:#ffffff !important; color:#111111 !important; } /* All payment panels white */ body .dp-site .dp-inline-checkout .checkout-payment section, body .dp-site .dp-inline-checkout .payment-page section, body .dp-site .dp-inline-checkout .checkout-payment > div, body .dp-site .dp-inline-checkout .payment-page > div{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border-color:#dfe3e8 !important; box-shadow:none !important; } /* Timer / Amount / GCash / receipt blocks */ body .dp-site .dp-inline-checkout .payment-timer, body .dp-site .dp-inline-checkout .payment-amount, body .dp-site .dp-inline-checkout .payment-channel-card, body .dp-site .dp-inline-checkout .manual-payment-proof, body .dp-site .dp-inline-checkout .payment-proof, body .dp-site .dp-inline-checkout .payment-receipt{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #dfe3e8 !important; box-shadow:none !important; } /* Remove colored backgrounds from nested elements */ body .dp-site .dp-inline-checkout .checkout-payment div, body .dp-site .dp-inline-checkout .payment-page div{ background-image:none !important; } /* All payment text black */ body .dp-site .dp-inline-checkout .checkout-payment h1, body .dp-site .dp-inline-checkout .checkout-payment h2, body .dp-site .dp-inline-checkout .checkout-payment h3, body .dp-site .dp-inline-checkout .checkout-payment h4, body .dp-site .dp-inline-checkout .checkout-payment p, body .dp-site .dp-inline-checkout .checkout-payment small, body .dp-site .dp-inline-checkout .checkout-payment span, body .dp-site .dp-inline-checkout .checkout-payment b, body .dp-site .dp-inline-checkout .checkout-payment strong, body .dp-site .dp-inline-checkout .checkout-payment label, body .dp-site .dp-inline-checkout .payment-page h1, body .dp-site .dp-inline-checkout .payment-page h2, body .dp-site .dp-inline-checkout .payment-page h3, body .dp-site .dp-inline-checkout .payment-page p, body .dp-site .dp-inline-checkout .payment-page small, body .dp-site .dp-inline-checkout .payment-page span, body .dp-site .dp-inline-checkout .payment-page b, body .dp-site .dp-inline-checkout .payment-page strong, body .dp-site .dp-inline-checkout .payment-page label{ color:#111111 !important; text-shadow:none !important; } /* Receipt upload box */ body .dp-site .dp-inline-checkout .manual-payment-proof{ background:#ffffff !important; } body .dp-site .dp-inline-checkout .manual-payment-proof input{ background:#ffffff !important; color:#111111 !important; border:1px solid #bfc6d0 !important; } /* File upload area */ body .dp-site .dp-inline-checkout input[type="file"]{ background:#ffffff !important; color:#111111 !important; } /* Reference number input */ body .dp-site .dp-inline-checkout input[type="text"]{ background:#ffffff !important; color:#111111 !important; border:1px solid #bfc6d0 !important; } /* QR / image area stays white */ body .dp-site .dp-inline-checkout .manual-payment-proof img{ background:#ffffff !important; } /* Generic payment buttons become white */ body .dp-site .dp-inline-checkout .checkout-payment button, body .dp-site .dp-inline-checkout .payment-page button{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #111111 !important; box-shadow:none !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — WHITE BOXES / BLACK TEXT Amount to Pay / GCash / Receipt ========================================================= */ /* AMOUNT TO PAY box */ body .dp-site .dp-inline-checkout .payment-amount, body .dp-site .dp-inline-checkout [class*="payment-amount"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-amount *, body .dp-site .dp-inline-checkout [class*="payment-amount"] *{ color:#111111 !important; text-shadow:none !important; } /* GCASH box */ body .dp-site .dp-inline-checkout .payment-channel-card, body .dp-site .dp-inline-checkout .manual-payment-card, body .dp-site .dp-inline-checkout [class*="gcash"], body .dp-site .dp-inline-checkout [class*="payment-channel"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-channel-card *, body .dp-site .dp-inline-checkout .manual-payment-card *, body .dp-site .dp-inline-checkout [class*="gcash"] *, body .dp-site .dp-inline-checkout [class*="payment-channel"] *{ color:#111111 !important; text-shadow:none !important; } /* RECEIPT box */ body .dp-site .dp-inline-checkout .payment-receipt, body .dp-site .dp-inline-checkout .manual-payment-proof, body .dp-site .dp-inline-checkout .upload-proof, body .dp-site .dp-inline-checkout [class*="receipt"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-receipt *, body .dp-site .dp-inline-checkout .manual-payment-proof *, body .dp-site .dp-inline-checkout .upload-proof *, body .dp-site .dp-inline-checkout [class*="receipt"] *{ color:#111111 !important; text-shadow:none !important; } /* Upload area inside receipt */ body .dp-site .dp-inline-checkout input[type="file"], body .dp-site .dp-inline-checkout input[type="text"], body .dp-site .dp-inline-checkout textarea{ background:#ffffff !important; color:#111111 !important; border:1px solid #cfd6e0 !important; } /* Dashed upload dropzone */ body .dp-site .dp-inline-checkout .payment-receipt label, body .dp-site .dp-inline-checkout .manual-payment-proof label, body .dp-site .dp-inline-checkout .upload-proof label{ background:#ffffff !important; color:#111111 !important; border-color:#b9c2d0 !important; } /* Keep only confirm button colored */ body .dp-site .dp-inline-checkout button.primary, body .dp-site .dp-inline-checkout .confirm-booking, body .dp-site .dp-inline-checkout button[class*="confirm"]{ background:linear-gradient( 90deg, #8b2be8 0%, #6b43ef 48%, #2f7df6 100% ) !important; color:#ffffff !important; border:none !important; box-shadow:0 10px 24px rgba(103,55,229,.20) !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — FORCE WHITE BOXES Amount to Pay / GCash / Receipt / Reference Number ========================================================= */ body .dp-site .dp-inline-checkout .payment-screen .payment-amount, body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card, body .dp-site .dp-inline-checkout .payment-screen .payment-receipt, body .dp-site .dp-inline-checkout .payment-screen .payment-proof, body .dp-site .dp-inline-checkout .payment-screen .receipt-upload, body .dp-site .dp-inline-checkout .payment-screen .upload-payment-receipt, body .dp-site .dp-inline-checkout .payment-screen .proof-upload, body .dp-site .dp-inline-checkout .payment-screen .reference-field, body .dp-site .dp-inline-checkout .payment-screen .reference-number-field, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"], body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"], body .dp-site .dp-inline-checkout .payment-screen [class*="receipt"], body .dp-site .dp-inline-checkout .payment-screen [class*="proof"], body .dp-site .dp-inline-checkout .payment-screen [class*="reference"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen .payment-amount *, body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card *, body .dp-site .dp-inline-checkout .payment-screen .payment-receipt *, body .dp-site .dp-inline-checkout .payment-screen .payment-proof *, body .dp-site .dp-inline-checkout .payment-screen .receipt-upload *, body .dp-site .dp-inline-checkout .payment-screen .upload-payment-receipt *, body .dp-site .dp-inline-checkout .payment-screen .proof-upload *, body .dp-site .dp-inline-checkout .payment-screen .reference-field *, body .dp-site .dp-inline-checkout .payment-screen .reference-number-field *, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="receipt"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="proof"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="reference"] *{ color:#111111 !important; text-shadow:none !important; } /* QR / GCash area */ body .dp-site .dp-inline-checkout .payment-screen img{ background:#ffffff !important; } /* upload dropzone */ body .dp-site .dp-inline-checkout .payment-screen label, body .dp-site .dp-inline-checkout .payment-screen .upload-area, body .dp-site .dp-inline-checkout .payment-screen .dropzone{ background:#ffffff !important; color:#111111 !important; border:1px dashed #bfc8d8 !important; } /* reference input */ body .dp-site .dp-inline-checkout .payment-screen input[type="text"], body .dp-site .dp-inline-checkout .payment-screen input[type="search"], body .dp-site .dp-inline-checkout .payment-screen input:not([type="file"]), body .dp-site .dp-inline-checkout .payment-screen textarea{ background:#ffffff !important; color:#111111 !important; border:1px solid #cfd6e0 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen input[type="text"]::placeholder, body .dp-site .dp-inline-checkout .payment-screen input[type="search"]::placeholder, body .dp-site .dp-inline-checkout .payment-screen input:not([type="file"])::placeholder, body .dp-site .dp-inline-checkout .payment-screen textarea::placeholder{ color:#6b7280 !important; } /* ========================================================= DEWPOINT PAYMENT PAGE — WHITE CARD FIX countdown text black amount to pay white gcash card white ========================================================= */ body .dp-site .dp-inline-checkout .payment-screen [class*="timer"], body .dp-site .dp-inline-checkout .payment-screen [class*="remaining"]{ background:#ffffff !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen [class*="timer"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="remaining"] *{ color:#111111 !important; text-shadow:none !important; } /* AMOUNT TO PAY box */ body .dp-site .dp-inline-checkout .payment-screen .payment-amount, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"], body .dp-site .dp-inline-checkout .payment-screen [class*="amount-to-pay"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen .payment-amount *, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-amount"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="amount-to-pay"] *{ color:#111111 !important; text-shadow:none !important; } /* GCASH / manual payment card */ body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"], body .dp-site .dp-inline-checkout .payment-screen [class*="gcash"], body .dp-site .dp-inline-checkout .payment-screen [class*="payment-method"]{ background:#ffffff !important; background-image:none !important; color:#111111 !important; border:1px solid #d9dee7 !important; box-shadow:none !important; } body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card *, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="gcash"] *, body .dp-site .dp-inline-checkout .payment-screen [class*="payment-method"] *{ color:#111111 !important; text-shadow:none !important; } /* keep QR visible on white */ body .dp-site .dp-inline-checkout .payment-screen .manual-payment-card img, body .dp-site .dp-inline-checkout .payment-screen [class*="manual-payment"] img, body .dp-site .dp-inline-checkout .payment-screen [class*="gcash"] img{ background:#ffffff !important; border-radius:16px !important; } /* keep only action buttons colored */ body .dp-site .dp-inline-checkout .payment-screen .primary, body .dp-site .dp-inline-checkout .payment-screen button.primary, body .dp-site .dp-inline-checkout .payment-screen .confirm-booking, body .dp-site .dp-inline-checkout .payment-screen button[class*="confirm"]{ background:linear-gradient(90deg,#8b2be8 0%,#6b43ef 48%,#2f7df6 100%) !important; color:#ffffff !important; border:none !important; } /* ========================================================= DEWPOINT COURTS — PERMANENT LIGHT/WHITE BOARD Prevent theme spillover from coloring entire booking area. Selected individual slot may remain violet. ========================================================= */ /* ========================================================= DEWPOINT REAL PLAYER ROUTES V1 /checkout /my-bookings ========================================================= */ /* --------------------------------------------------------- /checkout — dedicated order/payment page --------------------------------------------------------- */ /* ========================================================= DEWPOINT CHECKOUT V2 Completely independent checkout design. No old payment-box styling is reused. ========================================================= */ /* ========================================================= DEWPOINT MY BOOKINGS V2 Dedicated /my-bookings layout ========================================================= */ /* ========================================================= RESPONSIVE ========================================================= */ @media(max-width:1000px){ } @media(max-width:700px){ } /* ========================================================= DEWPOINT MY BOOKINGS ONE-VIEW DESKTOP TABLE V1 No horizontal left/right scrolling ========================================================= */ @media (min-width:901px){ } /* On smaller displays use card-like rows instead of forcing a sideways desktop table. */ @media (max-width:900px){ } @media(max-width:768px){ } /* ========================================================= MOBILE MENU Hide BOOK NOW inside hamburger only Desktop BOOK NOW remains unchanged ========================================================= */ @media(max-width:768px){ } /* ========================================================= DEWPOINT MOBILE FLOATING ACCOUNT MENU V3 Logged out: DEWPOINT ☰ COURTS LOGIN SIGNUP Logged in: DEWPOINT ○ Hi, Name COURTS MY BOOKING LOGOUT ========================================================= */ @media(max-width:768px){ /* * Hide original desktop auth controls. */ /* * ----------------------------------------------------- * ACCOUNT WRAPPER * Dropdown is positioned relative to this element. * ----------------------------------------------------- */ /* * ----------------------------------------------------- * LOGGED OUT HAMBURGER * ----------------------------------------------------- */ /* * Hamburger -> X. */ /* * ----------------------------------------------------- * LOGGED IN * * ○ Hi, Mikko * * No box. * Whole control is clickable. * ----------------------------------------------------- */ /* * Same small user icon as desktop. */ /* * No arrow on mobile either. */ /* * ----------------------------------------------------- * FLOATING MENU * ----------------------------------------------------- */ /* * Mobile menu buttons. */ /* * Desktop duplicate COURTS item is not needed on mobile. */ /* * Logged-out actions. */ /* * Logout distinction. */ } /* ========================================================= DEWPOINT DESKTOP ACCOUNT DROPDOWN V2 LOGGED OUT: HOME | FEATURES | GALLERY | ABOUT | LOGIN LOGGED IN: HOME | FEATURES | GALLERY | ABOUT | MY BOOKING | [Hi, Name] Hi, Name dropdown: COURTS LOGOUT ========================================================= */ /* * The wrapper behaves transparently on mobile. * Existing mobile ordering remains unchanged. */ @media(max-width:768px){ } /* ========================================================= DESKTOP ========================================================= */ @media(min-width:769px){ /* * ----------------------------------------------------- * LOGGED-OUT DESKTOP * * HOME FEATURES GALLERY ABOUT ........ LOGIN * * COURTS is accessible through the booking CTA/section. * MY BOOKING appears after login. * ----------------------------------------------------- */ /* * Keep the original desktop LOGIN controls. */ /* * COURTS moves into the Hi, Mikko dropdown. */ /* * Hide old: * Hi, Mikko + Logout * * because the new account button replaces those controls. */ /* * ----------------------------------------------------- * [ Hi, Mikko ] * ----------------------------------------------------- */ /* * Clean desktop account trigger: * * ○ Hi, Mikko * * No box. Entire control remains clickable. */ /* * Small user-circle icon. */ /* * User requested no arrow on desktop. * Mobile arrow remains available. */ /* * Login / Signup are not part of logged-in desktop dropdown. */ /* * COURTS + LOGOUT */ } @media(min-width:769px){ } /* ========================================================= DEWPOINT TERMS MODAL V1 ========================================================= */ .view-booking-terms{ width:100%; margin:10px 0 4px; padding:11px 14px; border:1px solid #d9dfea; border-radius:12px; background:#fff; color:#5539c9; font-weight:700; cursor:pointer; text-align:left; } .view-booking-terms:hover{ background:#faf9ff; } .dewpoint-terms-modal-backdrop{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(19,24,38,.58); backdrop-filter:blur(4px); } .dewpoint-terms-modal{ width:min(720px,100%); max-height:min(82vh,760px); display:flex; flex-direction:column; background:#fff; border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.24); overflow:hidden; } .dewpoint-terms-modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 22px 14px; border-bottom:1px solid #e8eaf0; } .dewpoint-terms-modal-head small{ display:block; margin-bottom:3px; font-size:11px; font-weight:800; letter-spacing:.08em; color:#7357d4; } .dewpoint-terms-modal-head h2{ margin:0; color:#161a22; } .dewpoint-terms-close{ flex:0 0 auto; width:38px; height:38px; border:0; border-radius:50%; background:#f0f1f5; color:#232630; font-size:26px; line-height:1; cursor:pointer; } .dewpoint-terms-modal-copy{ flex:1; overflow-y:auto; padding:20px 22px; white-space:pre-line; color:#313641; font-size:14px; line-height:1.65; } .dewpoint-terms-done{ margin:0 22px 22px; min-height:46px; } @media (max-width:640px){ .dewpoint-terms-modal-backdrop{ padding:12px; align-items:flex-end; } .dewpoint-terms-modal{ width:100%; max-height:88vh; border-radius:20px 20px 12px 12px; } .dewpoint-terms-modal-head{ padding:18px 18px 12px; } .dewpoint-terms-modal-copy{ padding:16px 18px; font-size:13px; } .dewpoint-terms-done{ margin:0 18px 18px; } } /* DEWPOINT NEW CHECKOUT TERMS DIALOG V1 */ .dp-new-terms-box{ border:1px solid #dbe2ee; border-radius:14px; background:#fff; padding:16px; display:flex; flex-direction:column; gap:14px; } .dp-new-terms-heading{ display:flex; justify-content:space-between; align-items:center; gap:16px; } .dp-new-terms-heading > div{ display:flex; flex-direction:column; gap:4px; } .dp-new-terms-heading small{ color:#111827; -webkit-text-fill-color:#111827; opacity:1; filter:none; line-height:1.45; } .dp-new-view-terms{ display:inline-flex; width:max-content; align-items:center; border:0; background:transparent; padding:4px 0; margin:0 0 8px; color:#4f46e5; font-weight:700; cursor:pointer; white-space:nowrap; } .dp-new-view-terms:hover{ text-decoration:underline; } .dp-new-terms-box .dp-new-terms{ margin:0; padding-top:13px; border-top:1px solid #edf0f5; } .dp-new-terms-dialog{ position:fixed; inset:0; margin:auto; width:min(720px,calc(100vw - 36px)); max-height:82vh; padding:0; border:0; border-radius:20px; background:#fff; box-shadow:0 30px 80px rgba(15,23,42,.28); } .dp-new-terms-dialog::backdrop{ background:rgba(8,15,35,.62); } .dp-new-terms-dialog-head{ display:flex; justify-content:space-between; align-items:flex-start; padding:22px 24px; border-bottom:1px solid #e7eaf0; } .dp-new-terms-dialog-head h2{ margin:2px 0 0; } .dp-new-terms-dialog-close{ width:36px; height:36px; border:0; border-radius:50%; font-size:24px; cursor:pointer; } .dp-new-terms-dialog-copy{ padding:22px 24px; max-height:52vh; overflow:auto; white-space:pre-line; line-height:1.65; } .dp-new-terms-dialog-done{ width:calc(100% - 48px); margin:0 24px 24px; } @media(max-width:700px){ .dp-new-terms-heading{ flex-direction:column; align-items:flex-start; } .dp-new-view-terms{ white-space:normal; } .dp-new-terms-dialog{ width:calc(100vw - 20px); max-height:88vh; } .dp-new-terms-dialog-copy{ max-height:58vh; } } /* ============================================================ KRADPC AUTH TYPOGRAPHY NORMALIZATION Form controls inherit the bold label weight through the global `font: inherit` rule. Keep labels emphasized while rendering user-entered values at a normal reading weight. ============================================================ */ body .dp-site .dp-login-modal input:not([type="checkbox"]), body .dp-site .dp-register-modal input:not([type="checkbox"]), body .dp-site .dp-register-modal select, .auth-page .auth-card input, .auth-page .auth-card select, .auth-page .auth-card textarea{ font-weight:400 !important; } body .dp-site .dp-login-modal input::placeholder, body .dp-site .dp-register-modal input::placeholder, .auth-page .auth-card input::placeholder, .auth-page .auth-card textarea::placeholder{ font-weight:400 !important; } /* ============================================================ REGULAR COURT HOLD — BLOCKING PLAYER RECOVERY The authenticated player shell owns this cross-route dialog. ============================================================ */ @media (max-width:640px){ } /* ========================================================= DEWPOINT ABOUT — ONE-LINE TITLE + LOWER 30% FADE V2 Card dimensions remain unchanged. ========================================================= */ @media (min-width:1001px){ body .dp-site .dp-about-heading{ max-width:var(--dp-content-width,1180px); } body .dp-site .dp-about-heading h2{ white-space:nowrap; font-size:clamp(30px,3vw,42px); } } /* About and Amenities photo cards */ body .dp-site .dp-about-card.has-background-image::before, body .dp-site .dp-about-card.map.has-map-background::before{ background: linear-gradient( to bottom, rgba(73,43,215,0) 0%, rgba(73,43,215,0) 68%, rgba(89,43,227,.22) 72%, rgba(83,40,231,.55) 82%, rgba(70,36,224,.82) 92%, rgba(17,117,241,.96) 100% ); } body .dp-site .dp-about-card.has-background-image::after, body .dp-site .dp-about-card.map.has-map-background::after, body .dp-site .dp-about-card.facebook::after{ height:30%; } /* Facebook card uses the same lower-30% fade depth. */ body .dp-site .dp-about-card.facebook::before{ background: linear-gradient( to bottom, rgba(24,119,242,0) 0%, rgba(24,119,242,0) 68%, rgba(74,62,225,.20) 72%, rgba(77,54,229,.52) 82%, rgba(58,63,224,.80) 92%, rgba(24,119,242,.94) 100% ); }