/* ========================================================= THE DINKIN PROJECT — PUBLIC SITE Depends on tokens.css (linked first in ) ========================================================= */ body{ overflow-x:hidden; } h1,h2,h3,h4,h5{ font-family:var(--font-display); color:var(--ink); } /* ---------------- Navbar ---------------- */ .custom-navbar{ background:rgba(255,255,255,.92); backdrop-filter:blur(8px); padding:16px 0; transition:.25s; border-bottom:1px solid transparent; } .custom-navbar.is-scrolled{ padding:10px 0; border-bottom-color:var(--line); box-shadow:var(--shadow-sm); } .navbar-brand{ font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--primary)!important; letter-spacing:-.01em; } .nav-link{ margin-left:8px; padding:8px 14px!important; font-weight:500; color:var(--ink)!important; border-radius:50px; transition:.2s; } .nav-link:hover{ background:#E9EBF0; color:var(--primary-dk)!important; } /* ---------------- Hero ---------------- */ .hero{ position:relative; padding:150px 0 90px; background-image: radial-gradient(var(--line) 1.4px, transparent 1.4px); background-size: 24px 24px; background-position: -10px -10px; } .hero-tag{ margin-bottom:22px; } .hero h1{ font-size:58px; font-weight:700; line-height:1.12; letter-spacing:-.02em; } .hero h1 span{ color:var(--teal); position:relative; white-space:nowrap; } .hero p{ margin:22px 0 0; max-width:46ch; font-size:18px; line-height:1.75; color:var(--muted); } .hero-image-wrap{ position:relative; } .hero-image{ border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:6px solid var(--surface); } .hero-score-badge{ position:absolute; bottom:-22px; left:-22px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 20px; display:flex; align-items:center; gap:12px; } .hero-score-badge .num{ font-family:var(--font-mono); font-weight:700; font-size:26px; color:var(--primary); } .hero-score-badge .lbl{ font-size:12px; color:var(--muted); line-height:1.3; } @media (max-width:991px){ .hero{ padding:130px 0 60px; text-align:center; } .hero h1{ font-size:40px; } .hero p{ margin-left:auto; margin-right:auto; } .hero-score-badge{ display:none; } } /* ---------------- Section framing ---------------- */ .section-eyebrow{ font-family:var(--font-mono); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); display:block; margin-bottom:10px; } .section-title{ font-size:38px; font-weight:700; color:var(--ink); margin-bottom:10px; letter-spacing:-.01em; } .section-lead{ color:var(--muted); max-width:56ch; margin:0 auto; } /* ---------------- Sport cards ---------------- */ .sport-card{ background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:.3s; text-align:center; height:100%; border:1px solid var(--line); } .sport-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); border-color:transparent; } .sport-card img{ height:200px; width:100%; object-fit:cover; } .sport-card-art{ height:200px; width:100%; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background-image: radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px); background-size: 20px 20px; } .sport-card-art i{ font-size:3.4rem; color:#fff; position:relative; z-index:2; filter:drop-shadow(0 6px 14px rgba(0,0,0,.15)); } .sport-card-art::after{ content:''; position:absolute; width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.14); bottom:-40px; right:-30px; } .sport-art-pickleball{ background-color:var(--primary); background-image: radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px), linear-gradient(135deg, var(--primary), var(--primary-dk)); } .sport-card h4{ margin-top:20px; font-size:20px; } .sport-card p{ padding:0 20px 25px; color:var(--muted); font-size:14.5px; } /* ---------------- Why us ---------------- */ .why-us{ background:var(--surface); padding:90px 0; border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); } .feature-box{ padding:20px; } .feature-box .icon{ width:64px; height:64px; border-radius:18px; background:#E9EBF0; display:flex; align-items:center; justify-content:center; font-size:28px; margin:0 auto 18px; } .feature-box h5{ margin:0 0 10px; color:var(--ink); font-weight:700; } .feature-box p{ color:var(--muted); font-size:14.5px; } /* ---------------- Court cards ---------------- */ .court-card{ background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); transition:.3s; height:100%; border:1px solid var(--line); } .court-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow); } .court-card img{ height:210px; width:100%; object-fit:cover; } .court-card-icon{ height:210px; width:100%; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; background-image: radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px); background-size: 20px 20px; font-size:3.2rem; color:#fff; } .court-card-icon i{ position:relative; z-index:2; filter:drop-shadow(0 6px 14px rgba(0,0,0,.15)); } .court-card-icon::after{ content:''; position:absolute; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.14); bottom:-50px; left:-30px; } .court-art-pickleball{ background-color:var(--primary); background-image: radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px), linear-gradient(135deg, var(--primary), var(--primary-dk)); } .gallery-photo{ border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:.3s; height:260px; } .gallery-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition:.4s; } .gallery-photo:hover{ box-shadow:var(--shadow); transform:translateY(-6px); } .gallery-photo:hover img{ transform:scale(1.06); } .court-card h4{ font-weight:700; margin-top:15px; font-size:19px; } .court-card h5{ color:var(--primary); font-weight:700; font-family:var(--font-mono); } .court-card h5 span{ font-family:var(--font-body); font-weight:400; color:var(--muted); font-size:13px; } .court-card span.badge{ background:var(--teal)!important; font-weight:600; letter-spacing:.03em; padding:6px 12px; border-radius:50px; } /* ---------------- Membership plans ---------------- */ .plan-card{ background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius); padding:32px 26px; height:100%; text-align:center; transition:.25s; } .plan-card:hover{ border-color:var(--primary-lt); box-shadow:var(--shadow); transform:translateY(-6px); } .plan-card.featured{ border-color:var(--gold); box-shadow:var(--shadow); position:relative; } .plan-card h3{ font-family:var(--font-display); font-size:18px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:6px; } .plan-card h2{ font-family:var(--font-mono); font-size:34px; color:var(--primary); margin-bottom:18px; } .plan-card ul{ list-style:none; padding:0; margin:0 0 24px; text-align:left; } .plan-card ul li{ padding:8px 0 8px 26px; position:relative; color:var(--ink); font-size:14.5px; border-top:1px dashed var(--line); } .plan-card ul li:first-child{ border-top:0; } .plan-card ul li::before{ content:'✓'; position:absolute; left:0; color:var(--primary); font-weight:700; } /* ---------------- Site footer ---------------- */ .site-footer{ background:var(--ink); color:#AEB4BF; padding:70px 0 0; } .site-footer .foot-brand{ font-family:var(--font-display); color:#fff; font-weight:700; font-size:22px; } .site-footer p{ color:#8992A1; font-size:14.5px; } .site-footer h6{ color:#fff; font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:18px; } .site-footer a{ color:#AEB4BF; text-decoration:none; display:block; padding:6px 0; font-size:14.5px; transition:.2s; } .site-footer a:hover{ color:var(--gold); } .site-footer .foot-bottom{ border-top:1px dashed #2C3340; margin-top:50px; padding:22px 0; font-size:13px; color:#6B7280; text-align:center; } .social-row{ display:flex; gap:10px; margin-top:16px; } .social-row a{ width:38px; height:38px; border-radius:50%; background:#242B38; display:flex; align-items:center; justify-content:center; padding:0; } .social-row a:hover{ background:var(--primary); } @media (max-width:767px){ .section-title{ font-size:30px; } } .addon-card{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; height:100%; transition:.2s; } .addon-card:has(.addon-check:checked){ border-color:var(--primary-lt); background:#E9EBF0; } .pay-method-card{ display:block; cursor:pointer; } .pay-method-card input{ position:absolute; opacity:0; } .pmc-inner{ border:1.5px solid var(--line); border-radius:var(--radius); padding:18px; text-align:center; transition:.2s; } .pmc-inner i{ font-size:26px; color:var(--primary); display:block; margin-bottom:8px; } .pmc-inner strong{ display:block; font-size:14.5px; margin-bottom:4px; } .pmc-inner span{ font-size:12.5px; color:var(--muted); } .pay-method-card input:checked + .pmc-inner{ border-color:var(--primary); background:#E9EBF0; box-shadow:var(--shadow-sm); } .pay-instructions{ background:#EEF1F7; border:1px dashed var(--primary-lt); border-radius:var(--radius-sm); padding:12px 16px; font-size:13.5px; color:var(--primary-dk); } .dropzone{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:2px dashed var(--line); border-radius:var(--radius); padding:30px 16px; text-align:center; cursor:pointer; transition:.2s; } .dropzone:hover, .dropzone.dragover{ border-color:var(--primary-lt); background:#F9FAFB; } .dropzone i{ font-size:28px; color:var(--primary); } .dropzone small{ color:var(--muted); }