/* ═══════════════════════════════════════════════════════ AUN → WE PLAY | Editorial Brutalist Redesign Design tokens, global overrides, all page components ═══════════════════════════════════════════════════════ */ /* ── GOOGLE FONTS (loaded via in HTML) ────────── Plus Jakarta Sans 400,600,800 + Space Grotesk 400,500 ────────────────────────────────────────────────────── */ /* ── 1. DESIGN TOKENS ──────────────────────────────── */ :root{ --forest:#25443a; --coral:#ff8e8b; --bg:#F5F3EE; --ink:#1a1a18; --muted:#5c5750; --rule:#d8d4cc; --white:#FAFAF7; --black:#0E0D0A; --f-head:'Plus Jakarta Sans','Barlow Condensed','Arial Narrow',sans-serif; --f-body:'Plus Jakarta Sans','DM Sans',system-ui,sans-serif; --f-accent:'Space Grotesk','DM Sans',sans-serif; --nav-h:56px; --pad:clamp(20px,4vw,40px); --max:1120px; --ease:cubic-bezier(.22,1,.36,1); /* old tokens overridden */ --acid:#25443a; --red:#ff8e8b; } /* ── 2. GLOBAL RESETS ──────────────────────────────── */ body{ background:var(--bg)!important; color:var(--ink)!important; font-family:var(--f-body)!important; } /* Grain texture overlay */ body::after{ content:''; position:fixed; inset:0; pointer-events:none; z-index:9999; opacity:.035; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:128px 128px; } /* ── 3. NAVIGATION ─────────────────────────────────── */ nav{ background:var(--bg)!important; border-bottom-color:var(--rule)!important; } nav.scrolled{ border-bottom-color:var(--rule)!important; box-shadow:0 1px 8px rgba(37,68,58,.06)!important; } .nav-logo{ display:flex!important; align-items:center!important; gap:10px!important; } .nav-logo svg,.nav-logo img{ height:40px!important; width:40px!important; } .nav-logo-text{ font-family:var(--f-head)!important; font-weight:800!important; font-size:.95rem!important; letter-spacing:.04em!important; text-transform:uppercase!important; color:var(--forest)!important; } .nav-links a{ font-family:var(--f-head)!important; font-weight:600!important; font-size:.8rem!important; letter-spacing:.06em!important; text-transform:uppercase!important; color:var(--muted)!important; transition:color .15s!important; } .nav-links a:hover,.nav-links a.active{ color:var(--forest)!important; } .nav-cta{ background:var(--forest)!important; color:var(--white)!important; font-family:var(--f-head)!important; font-weight:700!important; font-size:.78rem!important; letter-spacing:.04em!important; text-transform:uppercase!important; border-radius:2px!important; padding:10px 22px!important; box-shadow:4px 4px 0 var(--coral)!important; transition:all .2s var(--ease)!important; } .nav-cta:hover{ background:var(--forest)!important; box-shadow:6px 6px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } /* Drawer */ .drawer{ background:var(--forest)!important; } .drawer a{ font-family:var(--f-head)!important; color:var(--white)!important; font-weight:600!important; letter-spacing:.04em!important; } .drawer a:hover{ color:var(--coral)!important; } .burger span{ background:var(--forest)!important; } /* ── 4. BUTTONS ────────────────────────────────────── */ .btn{ font-family:var(--f-head)!important; font-weight:700!important; letter-spacing:.04em!important; text-transform:uppercase!important; border-radius:2px!important; transition:all .2s var(--ease)!important; } .btn-ink,.btn.btn-ink{ background:var(--forest)!important; color:var(--white)!important; box-shadow:4px 4px 0 var(--coral)!important; } .btn-ink:hover,.btn.btn-ink:hover{ box-shadow:6px 6px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } .btn-ghost,.btn.btn-ghost{ background:transparent!important; color:var(--forest)!important; border:2px solid var(--forest)!important; box-shadow:none!important; } .btn-ghost:hover,.btn.btn-ghost:hover{ background:var(--forest)!important; color:var(--white)!important; } .btn-white,.btn.btn-white{ background:var(--white)!important; color:var(--forest)!important; box-shadow:4px 4px 0 var(--coral)!important; } .btn-white:hover,.btn.btn-white:hover{ box-shadow:6px 6px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } .btn-lg{ padding:16px 36px!important; font-size:.9rem!important; } /* ── 5. HERO (Homepage) ───────────────────────────── */ .hero{ padding-top:100px!important; padding-bottom:60px!important; } .hero-headline{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--ink)!important; line-height:1.05!important; } .hero-headline .highlight,.hero-headline .still-on{ background:var(--forest)!important; color:var(--coral)!important; padding:4px 16px!important; display:inline!important; box-decoration-break:clone!important; -webkit-box-decoration-break:clone!important; } .hero-sub{ font-family:var(--f-body)!important; color:var(--muted)!important; font-weight:400!important; } .hero-sub strong,.hero-sub b{ color:var(--ink)!important; font-weight:700!important; } .hero-note{ font-family:var(--f-accent)!important; font-size:.75rem!important; letter-spacing:.06em!important; text-transform:uppercase!important; color:var(--muted)!important; } /* ── 6. FACTS STRIP ────────────────────────────────── */ .facts{ background:var(--forest)!important; border-top:none!important; border-bottom:none!important; } .fact-num{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--coral)!important; } .fact-label{ color:rgba(255,255,255,.7)!important; font-family:var(--f-accent)!important; font-weight:500!important; letter-spacing:.04em!important; text-transform:uppercase!important; } /* ── 7. PROOF / APP SECTION ───────────────────────── */ .proof{ background:var(--bg)!important; } .proof-kicker{ font-family:var(--f-accent)!important; font-weight:500!important; letter-spacing:.1em!important; text-transform:uppercase!important; color:var(--coral)!important; font-size:.75rem!important; } .proof-title{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--ink)!important; } .proof-copy{ color:var(--muted)!important; } /* Flow steps */ .flow-step{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; transition:all .2s var(--ease)!important; } .flow-step:hover{ border-color:var(--forest)!important; box-shadow:4px 4px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } .flow-step.highlight{ background:var(--forest)!important; border-color:var(--forest)!important; color:var(--white)!important; } .flow-step.highlight .step-num{ color:var(--coral)!important; } .flow-step.highlight .step-content{ color:rgba(255,255,255,.85)!important; } .step-num{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--forest)!important; } .step-content{ color:var(--muted)!important; } /* Proof card */ .proof-card{ background:var(--forest)!important; border-radius:2px!important; box-shadow:8px 8px 0 var(--coral)!important; } .proof-card-label{ color:var(--coral)!important; font-family:var(--f-accent)!important; text-transform:uppercase!important; letter-spacing:.08em!important; } .proof-card-title{ color:var(--white)!important; font-family:var(--f-head)!important; font-weight:800!important; } .proof-card-sub{ color:rgba(255,255,255,.7)!important; } /* Scenario flow badges */ .problem-badge{ background:var(--coral)!important; color:var(--forest)!important; font-family:var(--f-head)!important; font-weight:700!important; border-radius:2px!important; } .solution-badge{ background:var(--forest)!important; color:var(--coral)!important; font-family:var(--f-head)!important; font-weight:700!important; border-radius:2px!important; } /* Phone mockup */ .proof-phone{ border-radius:4px!important; box-shadow:6px 6px 0 var(--coral)!important; } /* ── 8. FOOTER ─────────────────────────────────────── */ footer,.footer-bottom{ background:var(--forest)!important; color:var(--white)!important; } footer{ background-image:repeating-linear-gradient( -45deg, transparent, transparent 40px, rgba(255,142,139,.04) 40px, rgba(255,142,139,.04) 41px )!important; } .footer-brand-text{ font-family:var(--f-head)!important; font-weight:800!important; letter-spacing:.04em!important; text-transform:uppercase!important; color:var(--white)!important; } .footer-desc{ color:rgba(255,255,255,.6)!important; } .fcol-title{ font-family:var(--f-head)!important; font-weight:700!important; color:var(--coral)!important; letter-spacing:.04em!important; text-transform:uppercase!important; font-size:.75rem!important; } .fcol-links a{ color:rgba(255,255,255,.65)!important; } .fcol-links a:hover{ color:var(--white)!important; } .footer-bottom{ border-top:1px solid rgba(255,255,255,.1)!important; color:rgba(255,255,255,.4)!important; } .footer-brand-logo svg path,.footer-brand-logo svg{ stroke:var(--white)!important; } .footer-brand-logo svg line{ stroke:var(--coral)!important; } /* ── 9. STICKY BAR ────────────────────────────────── */ .sticky-bar{ background:var(--forest)!important; color:var(--white)!important; font-family:var(--f-head)!important; } .sticky-bar .btn,.sticky-bar a{ background:var(--coral)!important; color:var(--forest)!important; font-weight:700!important; } /* ── 10. DARK SECTIONS (generic) ──────────────────── */ .d2,[class*="dark"]{ background:var(--forest)!important; color:var(--white)!important; background-image:repeating-linear-gradient( -45deg, transparent, transparent 60px, rgba(255,142,139,.03) 60px, rgba(255,142,139,.03) 61px )!important; } .d2::before,[class*="dark"]::before{ content:''!important; position:absolute!important; inset:0!important; background:radial-gradient(ellipse at 80% 20%,rgba(255,142,139,.08),transparent 60%)!important; pointer-events:none!important; } /* dcta (dark CTA section) */ .dcta{ background:var(--forest)!important; color:var(--white)!important; border-radius:2px!important; } /* ═══════════════════════════════════════════════════════ SUBPAGE COMPONENTS ═══════════════════════════════════════════════════════ */ /* ── 11. PAGE HEROES (all subpages) ───────────────── */ .page-hero,.hiw-hero,.club-hero,.about-hero{ padding-top:100px!important; padding-bottom:60px!important; } .page-hero h1,.hiw-hero h1,.club-hero h1,.about-hero h1{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--ink)!important; } /* Shared kicker style */ [class*="kicker"], [class*="label"]:not(.fact-label):not(.proof-card-label){ font-family:var(--f-accent)!important; font-weight:500!important; letter-spacing:.1em!important; text-transform:uppercase!important; font-size:.75rem!important; } /* ── 12. HOW IT WORKS PAGE ────────────────────────── */ .hiw-steps .step,.hiw-step{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; } .hiw-steps .step:hover,.hiw-step:hover{ border-color:var(--forest)!important; box-shadow:4px 4px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } .hiw-num,.step-number{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--forest)!important; } .hiw-panel,.feature-panel{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; } .hiw-phone,.phone-mockup{ border-radius:4px!important; box-shadow:6px 6px 0 var(--coral)!important; } /* WhatsApp vs AUN comparison */ .compare-table,.compare{ border:1px solid var(--rule)!important; border-radius:2px!important; } .compare-bad,.wa-col{ background:rgba(255,142,139,.08)!important; } .compare-good,.aun-col{ background:rgba(37,68,58,.06)!important; } /* CTA sections across all pages */ .cta-section,.cta-card,.dcta{ background:var(--forest)!important; color:var(--white)!important; border-radius:2px!important; position:relative!important; overflow:hidden!important; } .cta-section h2,.cta-card h2,.dcta h2{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--white)!important; } .cta-section p,.cta-card p,.dcta p{ color:rgba(255,255,255,.7)!important; } /* ── 13. CLUBS PAGE ───────────────────────────────── */ .club-hero{ background:var(--forest)!important; color:var(--white)!important; } .club-hero h1{ color:var(--white)!important; } .club-dashboard,.dashboard-mockup{ border-radius:2px!important; box-shadow:8px 8px 0 var(--coral)!important; border:1px solid var(--rule)!important; } .perk,.perk-card{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; transition:all .2s var(--ease)!important; } .perk:hover,.perk-card:hover{ border-color:var(--forest)!important; box-shadow:4px 4px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } .perk-icon,.perk-card .icon{ color:var(--coral)!important; } .free-band,.free-banner{ background:var(--coral)!important; color:var(--forest)!important; font-family:var(--f-head)!important; font-weight:800!important; } /* ── 14. ROADMAP PAGE ──────────────────────────────── */ .timeline-phase,.phase{ border-left:3px solid var(--forest)!important; } .phase-marker,.timeline-dot{ background:var(--coral)!important; border:3px solid var(--forest)!important; } .phase-title{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--forest)!important; } .sport-card{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; transition:all .2s var(--ease)!important; } .sport-card:hover{ border-color:var(--forest)!important; box-shadow:4px 4px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } .sport-name{ background:var(--coral)!important; color:var(--forest)!important; font-family:var(--f-head)!important; font-weight:700!important; border-radius:2px!important; } .sports-big{ background:var(--forest)!important; color:var(--white)!important; } .why-padel{ background:var(--bg)!important; } .faded{ color:rgba(37,68,58,.12)!important; } /* ── 15. FAQ PAGE ─────────────────────────────────── */ .faq-sidebar .cat-btn,.faq-cat{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; font-family:var(--f-head)!important; font-weight:600!important; color:var(--muted)!important; transition:all .15s!important; } .faq-sidebar .cat-btn.active,.faq-cat.active{ background:var(--forest)!important; color:var(--white)!important; border-color:var(--forest)!important; } .faq-item,.accordion-item{ border:1px solid var(--rule)!important; border-radius:2px!important; background:var(--white)!important; margin-bottom:8px!important; } .faq-q,.accordion-header{ font-family:var(--f-head)!important; font-weight:700!important; color:var(--ink)!important; } .faq-a,.accordion-body{ color:var(--muted)!important; } .faq-toggle{ color:var(--forest)!important; } /* ── 16. ABOUT PAGE ───────────────────────────────── */ .about-hero{ background:var(--forest)!important; color:var(--white)!important; } .about-hero h1{ color:var(--white)!important; } .mission-section,.mission{ background:var(--bg)!important; } .name-band{ background:var(--coral)!important; color:var(--forest)!important; font-family:var(--f-head)!important; font-weight:800!important; } .value-card{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; transition:all .2s var(--ease)!important; } .value-card:hover{ border-color:var(--forest)!important; box-shadow:4px 4px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } .for-who{ background:var(--forest)!important; color:var(--white)!important; } .road-timeline,.about-timeline{ border-left:3px solid var(--forest)!important; } .stat-num{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--coral)!important; } /* ── 17. CONTACT PAGE ──────────────────────────────── */ .contact-form,.contact-card{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; box-shadow:6px 6px 0 var(--coral)!important; } .contact-form input,.contact-form textarea, .contact-card input,.contact-card textarea{ border:1px solid var(--rule)!important; border-radius:2px!important; font-family:var(--f-body)!important; background:var(--bg)!important; } .contact-form input:focus,.contact-form textarea:focus, .contact-card input:focus,.contact-card textarea:focus{ border-color:var(--forest)!important; outline:none!important; box-shadow:0 0 0 3px rgba(37,68,58,.1)!important; } .topic-chip,.chip{ background:var(--bg)!important; border:1px solid var(--rule)!important; border-radius:2px!important; font-family:var(--f-head)!important; font-weight:600!important; color:var(--muted)!important; cursor:pointer!important; transition:all .15s!important; } .topic-chip.active,.topic-chip.selected,.chip.active,.chip.selected{ background:var(--forest)!important; color:var(--white)!important; border-color:var(--forest)!important; } .contact-form button[type="submit"],.contact-card button[type="submit"]{ background:var(--forest)!important; color:var(--white)!important; font-family:var(--f-head)!important; font-weight:700!important; border-radius:2px!important; box-shadow:4px 4px 0 var(--coral)!important; text-transform:uppercase!important; letter-spacing:.04em!important; } .contact-form button[type="submit"]:hover,.contact-card button[type="submit"]:hover{ box-shadow:6px 6px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } /* ── 18. JOIN PAGE ────────────────────────────────── */ .join-left,.join-info{ background:var(--forest)!important; color:var(--white)!important; } .join-left h1,.join-info h1{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--white)!important; } .join-right,.join-form{ background:var(--bg)!important; } .role-btn,.role-chip{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; font-family:var(--f-head)!important; font-weight:600!important; color:var(--muted)!important; cursor:pointer!important; transition:all .15s!important; } .role-btn.active,.role-btn.selected,.role-chip.active,.role-chip.selected{ background:var(--forest)!important; color:var(--white)!important; border-color:var(--forest)!important; } .sport-chip{ background:var(--bg)!important; border:1px solid var(--rule)!important; border-radius:2px!important; font-family:var(--f-head)!important; font-weight:600!important; color:var(--muted)!important; cursor:pointer!important; transition:all .15s!important; } .sport-chip.active,.sport-chip.selected{ background:var(--coral)!important; color:var(--forest)!important; border-color:var(--coral)!important; } .join-form input,.join-form select,.join-form textarea{ border:1px solid var(--rule)!important; border-radius:2px!important; font-family:var(--f-body)!important; background:var(--white)!important; } .join-form input:focus,.join-form select:focus{ border-color:var(--forest)!important; outline:none!important; box-shadow:0 0 0 3px rgba(37,68,58,.1)!important; } .join-submit,.join-form button[type="submit"]{ background:var(--forest)!important; color:var(--white)!important; font-family:var(--f-head)!important; font-weight:700!important; border-radius:2px!important; box-shadow:4px 4px 0 var(--coral)!important; text-transform:uppercase!important; letter-spacing:.04em!important; width:100%!important; } .join-submit:hover,.join-form button[type="submit"]:hover{ box-shadow:6px 6px 0 var(--coral)!important; transform:translate(-2px,-2px)!important; } /* ── 19. LEGAL PAGES (Privacy, Terms) ─────────────── */ .legal-toc,.toc-sidebar{ background:var(--white)!important; border:1px solid var(--rule)!important; border-radius:2px!important; } .legal-toc a,.toc-sidebar a{ color:var(--muted)!important; font-family:var(--f-head)!important; font-weight:600!important; } .legal-toc a:hover,.toc-sidebar a:hover{ color:var(--forest)!important; } .legal-toc a.active,.toc-sidebar a.active{ color:var(--forest)!important; border-left:3px solid var(--coral)!important; } .legal-body h2,.legal-content h2{ font-family:var(--f-head)!important; font-weight:800!important; color:var(--forest)!important; } .legal-body h3,.legal-content h3{ font-family:var(--f-head)!important; font-weight:700!important; color:var(--ink)!important; } /* ── 20. GLOBAL TYPOGRAPHY OVERRIDES ──────────────── */ h1,h2,h3,h4,h5,h6{ font-family:var(--f-head)!important; font-weight:800!important; } h1{ font-size:clamp(2.2rem,5vw,3.8rem)!important; line-height:1.05!important; letter-spacing:-.02em!important; } h2{ font-size:clamp(1.6rem,3.5vw,2.6rem)!important; line-height:1.1!important; } h3{ font-size:clamp(1.1rem,2vw,1.5rem)!important; line-height:1.2!important; } /* ── 21. GLOBAL COLOR OVERRIDES ──────────────────── */ /* Catch any remaining acid green or red references */ [style*="CBFF47"],[style*="cbff47"],[style*="dfff00"],[style*="DFFF00"]{ background-color:var(--forest)!important; } [style*="E8331A"],[style*="e8331a"]{ background-color:var(--coral)!important; } /* SVG recoloring */ nav svg path, .nav-logo svg path, .footer-brand svg path, .footer-brand-logo svg path{ stroke:var(--forest)!important; } nav svg line, .nav-logo svg line, .footer-brand svg line, .footer-brand-logo svg line{ stroke:var(--coral)!important; } /* ── 22. SELECTION ────────────────────────────────── */ ::selection{ background:var(--coral)!important; color:var(--forest)!important; } /* ── 23. SCROLLBAR ────────────────────────────────── */ ::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-track{ background:var(--bg); } ::-webkit-scrollbar-thumb{ background:var(--forest); border-radius:2px; } ::-webkit-scrollbar-thumb:hover{ background:var(--coral); } /* ====== PATCH v2 — Fix remaining old colors + readability ====== */ /* --- FACTS STRIP: force deep forest bg + high-contrast white text --- */ .facts, section.facts, div.facts { background: var(--forest) !important; color: #FAFAF7 !important; } .facts .fact-num, .facts .fact-label, .facts * { color: #FAFAF7 !important; } .fact-num { color: #FAFAF7 !important; font-size: clamp(3rem, 6vw, 5rem) !important; font-weight: 800 !important; line-height: 1.1 !important; } .fact-label { color: rgba(250,250,247,0.85) !important; font-size: clamp(0.8rem, 1.2vw, 1rem) !important; font-weight: 600 !important; letter-spacing: 0.08em !important; line-height: 1.5 !important; } /* --- ROADMAP: sport-name-big acid green fix --- */ .sport-name-big, .sport-name-big.now, .sport-name-big.coming { color: var(--coral) !important; } .sport-name-big.coming { color: rgba(250,250,247,0.35) !important; } .sport-card-badge { background: rgba(255,142,139,0.15) !important; color: var(--forest) !important; } /* --- ROADMAP: btn-acid fix --- */ .btn-acid, .btn.btn-acid, .btn.btn-acid.btn-lg, a.btn-acid { background: var(--coral) !important; color: var(--forest) !important; border-color: var(--coral) !important; } .btn-acid:hover, .btn.btn-acid:hover { background: #ff7b78 !important; color: var(--forest) !important; } /* --- ABOUT: name-word (AUN) acid green fix --- */ .name-word { color: var(--forest) !important; font-weight: 800 !important; } .name-band { background: var(--coral) !important; } /* --- ABOUT: stat numbers old red fix --- */ .about-hero ~ * em, .mission ~ * em, section em { color: var(--coral) !important; } /* --- CLUBS: old red elements --- */ .dstatus.open, .dstatus.open span { background: var(--forest) !important; color: #FAFAF7 !important; } .club-dashboard em, .club-dashboard span[style*="color"] { color: var(--forest) !important; } /* --- CONTACT: required asterisks + error msgs --- */ .req { color: var(--coral) !important; } .field-error-msg, .error-msg { color: var(--coral) !important; } /* --- JOIN: spots badge + dots + errors --- */ .spots-badge { background: rgba(255,142,139,0.1) !important; border-color: var(--coral) !important; } .spots-dot { background: var(--coral) !important; } .spots-badge span[style*="color"] { color: var(--coral) !important; } /* --- HOW-IT-WORKS: compare items acid green tint fix --- */ .cmp-item { background: rgba(37,68,58,0.08) !important; } /* ====== READABILITY PATCH — Global typography & contrast fixes ====== */ /* Body text minimum size and comfortable line-height */ body { font-size: clamp(16px, 1.1vw, 18px) !important; line-height: 1.7 !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; } /* All paragraphs: ensure readable size, contrast, line-height */ p, li, dd, td, th, blockquote { font-size: clamp(15px, 1.05vw, 18px) !important; line-height: 1.75 !important; color: var(--ink, #1a1a18) !important; max-width: 72ch; } /* Dark section paragraphs */ .d2 p, .d2 li, .dcta p, .dcta li, footer p, footer li, [style*="background: #0E0D0A"] p, [style*="background:#0E0D0A"] p, .about-hero p { color: rgba(250,250,247,0.85) !important; } /* Headings: ensure proper hierarchy and weight */ h1 { font-size: clamp(2.5rem, 5vw, 4.5rem) !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; font-weight: 800 !important; } h2 { font-size: clamp(2rem, 3.5vw, 3.2rem) !important; line-height: 1.1 !important; letter-spacing: -0.015em !important; font-weight: 800 !important; } h3 { font-size: clamp(1.4rem, 2.2vw, 2rem) !important; line-height: 1.2 !important; font-weight: 700 !important; } h4 { font-size: clamp(1.15rem, 1.6vw, 1.5rem) !important; line-height: 1.3 !important; font-weight: 700 !important; } h5, h6 { font-size: clamp(1rem, 1.2vw, 1.2rem) !important; line-height: 1.4 !important; font-weight: 600 !important; } /* Legal pages readability (privacy-policy, terms) */ .legal-body p, .legal-body li, .legal-body h3, .legal-body h4 { max-width: 68ch !important; line-height: 1.8 !important; } .legal-body h3, .legal-body h4 { margin-top: 2.5rem !important; margin-bottom: 1rem !important; font-weight: 700 !important; color: var(--forest) !important; } .legal-body p { margin-bottom: 1.2rem !important; color: #2a2a28 !important; } .legal-toc a { color: var(--forest) !important; text-decoration: none !important; border-bottom: 1px solid rgba(37,68,58,0.2) !important; padding-bottom: 2px !important; transition: border-color 0.2s !important; } .legal-toc a:hover { border-bottom-color: var(--coral) !important; color: var(--forest) !important; } /* FAQ readability */ .faq-q { font-size: clamp(1rem, 1.3vw, 1.25rem) !important; font-weight: 600 !important; line-height: 1.5 !important; color: var(--ink, #1a1a18) !important; } .faq-a, .faq-a p { font-size: clamp(0.95rem, 1.1vw, 1.1rem) !important; line-height: 1.75 !important; color: #3a3a38 !important; } /* Subheadings, kickers, labels — ensure readable */ .proof-kicker, .hiw-kicker, .section-kicker { font-size: clamp(0.75rem, 0.9vw, 0.9rem) !important; letter-spacing: 0.12em !important; font-weight: 700 !important; color: var(--coral) !important; } /* Nav links readable */ .nav-links a, nav a { font-size: clamp(0.8rem, 0.95vw, 0.95rem) !important; font-weight: 600 !important; letter-spacing: 0.06em !important; } /* CTA section text readability on dark bg */ .dcta h2, .dcta h3, .dcta p, .cta-section h2, .cta-section p, .d2 h2, .d2 h3 { color: #FAFAF7 !important; } .dcta .highlight, .cta-section .highlight, .cta-section em, .dcta em { color: rgba(250,250,247,0.6) !important; } /* Footer readability */ footer .fcol-title { font-size: 0.85rem !important; letter-spacing: 0.1em !important; font-weight: 700 !important; color: var(--coral) !important; } footer .fcol-links a { font-size: 0.95rem !important; line-height: 2 !important; color: rgba(250,250,247,0.75) !important; } footer .fcol-links a:hover { color: #FAFAF7 !important; } footer .footer-bottom { font-size: 0.85rem !important; color: rgba(250,250,247,0.5) !important; } /* Button readability */ .btn, a.btn, button.btn { font-size: clamp(0.85rem, 1vw, 1rem) !important; font-weight: 700 !important; letter-spacing: 0.06em !important; } /* Sticky bar readability */ .sticky-bar { font-size: 0.9rem !important; } .sticky-bar .btn { font-size: 0.85rem !important; } /* Value cards on about page */ .value-card h4 { font-size: 1.1rem !important; font-weight: 800 !important; letter-spacing: 0.04em !important; color: var(--forest) !important; } .value-card p { font-size: 0.95rem !important; line-height: 1.7 !important; } /* For-who section */ .for-who h4, .for-who h3 { font-weight: 800 !important; color: var(--forest) !important; } .for-who li { font-size: 0.95rem !important; line-height: 1.7 !important; } /* Timeline on about & roadmap */ .timeline-phase h4, .timeline-phase h3 { font-weight: 800 !important; font-size: 1.1rem !important; color: var(--forest) !important; } .timeline-phase p { font-size: 0.95rem !important; line-height: 1.7 !important; color: #3a3a38 !important; } /* Sport cards on roadmap */ .sport-card .sport-name { font-weight: 700 !important; color: var(--forest) !important; } .sport-card p { color: #555 !important; font-size: 0.85rem !important; line-height: 1.6 !important; } /* Global catch-all: override any remaining old color inline styles */ [style*="color: #CBFF47"], [style*="color:#CBFF47"], [style*="color: #cbff47"], [style*="color:#cbff47"], [style*="color: #dfff00"], [style*="color:#dfff00"], [style*="color: #DFFF00"], [style*="color:#DFFF00"] { color: var(--coral) !important; } [style*="background-color: #CBFF47"], [style*="background-color:#CBFF47"], [style*="background:#CBFF47"], [style*="background: #CBFF47"], [style*="background-color: #cbff47"], [style*="background-color:#cbff47"], [style*="background:#cbff47"], [style*="background: #cbff47"] { background-color: var(--coral) !important; background: var(--coral) !important; } [style*="color: #E8331A"], [style*="color:#E8331A"], [style*="color: #e8331a"], [style*="color:#e8331a"] { color: var(--coral) !important; } [style*="background-color: #E8331A"], [style*="background-color:#E8331A"], [style*="background:#E8331A"], [style*="background: #E8331A"], [style*="background-color: #e8331a"], [style*="background-color:#e8331a"], [style*="background:#e8331a"], [style*="background: #e8331a"] { background-color: var(--forest) !important; background: var(--forest) !important; } /* Mobile readability adjustments */ @media (max-width: 768px) { p, li, dd { font-size: 16px !important; line-height: 1.7 !important; } h1 { font-size: 2.2rem !important; } h2 { font-size: 1.8rem !important; } h3 { font-size: 1.4rem !important; } .legal-body p, .legal-body li { font-size: 15px !important; line-height: 1.75 !important; } .faq-q { font-size: 1rem !important; } .faq-a, .faq-a p { font-size: 0.95rem !important; } .fact-num { font-size: 2.5rem !important; } .fact-label { font-size: 0.75rem !important; } } /* --- PATCH v2b: remaining old-red spans on join + clubs --- */ .spots-badge span, .spots-badge .spots-label span, .spots-label span, .club-dashboard .dstatus, .club-dashboard span { color: var(--coral) !important; } .spots-badge .spots-label { color: var(--forest) !important; } /* Nuclear fallback: any element anywhere computed as old-red or acid green via CSS class */ .dstatus.open { background: var(--coral) !important; color: var(--forest) !important; } /* ═══════════════════════════════════════════════════════ V2 OVERRIDES — Logo text, rounded corners, CTAs, readability, mobile ═══════════════════════════════════════════════════════ */ /* ── LOGO TEXT: "we play" in Optima Ultra Bold ── */ .nav-logo { display:flex; align-items:center; gap:8px; } .nav-logo svg { height:40px; width:40px; flex-shrink:0; } .nav-logo-text { text-transform:none !important; font-family:Optima,'Jost',Futura,'Trebuchet MS',sans-serif !important; font-weight:900 !important; font-size:1.35rem !important; letter-spacing:.01em !important; color:var(--forest,#1B3A2D) !important; line-height:1 !important; align-self:center !important; } .footer-brand-logo { display:flex; align-items:center; gap:8px; } .footer-brand-text { text-transform:none !important; font-family:Optima,'Jost',Futura,'Trebuchet MS',sans-serif !important; font-weight:900 !important; font-size:1.35rem !important; color:var(--white,#F7F5F0) !important; line-height:1 !important; } /* ── CTAs: ANGULAR (not pill) ── */ .btn, .btn-ink, .btn-ghost, .btn-white, .btn-acid, .dcta, .nav-cta { border-radius:10px !important; } nav .btn, nav a[href*="join"] { border-radius:10px !important; } /* Ghost button (light bg context) */ .btn-ghost { color:var(--ink,#0E0D0A) !important; border:1.5px solid #b0aca4 !important; background:transparent !important; } .btn-ghost:hover { border-color:#3a3730 !important; } /* White button (dark bg context) */ .btn-white { background:var(--white,#FEFDF9) !important; color:var(--forest,#25443a) !important; border:1.5px solid var(--white,#FEFDF9) !important; border-radius:10px !important; } .btn-white:hover { background:#f0ede6 !important; } /* ── ROUNDED CORNERS: boxes, cards, inputs ── */ .facts, .facts-inner, .proof-copy, .flow-step, .proof-card, .cta-card, .step-card, .faq-item, .faq-q, .card, .card-highlight, .tier-card, .tier, .table-wrap, .roadmap-card, .about-card, .contact-card, .contact-form, .join-card, .join-form, .join-box, .hero-highlight, .highlight-box, .info-card, .feature-card, .value-card, .team-card, .stat-card, .price-card, .phase-card, .phase, .timeline-card, .how-step, .how-card, .step, .step-block, .fpanel, .compare-row, .compare-item, .compare-dark-inner, .perk, input[type="text"], input[type="email"], input[type="tel"], textarea, select { border-radius:14px !important; } table { border-radius:14px !important; overflow:hidden; border-collapse:separate !important; border-spacing:0 !important; } th:first-child { border-radius:14px 0 0 0 !important; } th:last-child { border-radius:0 14px 0 0 !important; } tr:last-child td:first-child { border-radius:0 0 0 14px !important; } tr:last-child td:last-child { border-radius:0 0 14px 0 !important; } .proof-phone { border-radius:32px !important; } .proof-video { border-radius:24px !important; } .step-num { border-radius:50% !important; } /* ── READABILITY ── */ .hero-sub, .hero p, .hero-copy p, .hero-desc, .page-intro, .section-intro { font-size:1.12rem !important; line-height:1.75 !important; color:#2a2820 !important; } .hero-sub strong, .hero p strong { color:#0E0D0A !important; font-weight:600 !important; } .hero-note, .hero-meta { font-size:.82rem !important; color:#6b6560 !important; line-height:1.6 !important; } /* Facts section (dark bg) */ .fact-label { font-size:.88rem !important; color:rgba(247,245,240,.82) !important; line-height:1.65 !important; } .fact-label strong { color:rgba(247,245,240,1) !important; font-weight:600 !important; } /* Flow-step cards (white cards → dark text) */ .flow-step p, .flow-step .step-content p { color:#3a3730 !important; font-size:.95rem !important; line-height:1.7 !important; } .flow-step h3, .flow-step .step-content h3 { color:#0E0D0A !important; } /* Flow-step highlight (dark card → light text) */ .flow-step.highlight p, .flow-step.highlight .step-content p { color:rgba(247,245,240,.92) !important; } .flow-step.highlight h3, .flow-step.highlight .step-content h3 { color:#F7F5F0 !important; } /* Feature panels + step descriptions */ .fpanel-copy p, .fpanel-desc, .step-desc, .step-detail, .step-text { font-size:1rem !important; line-height:1.75 !important; color:#2a2820 !important; } /* Kickers */ .section-kicker, .kicker, .proof-kicker, .hero-kicker, .fpanel-kicker { font-size:.72rem !important; letter-spacing:.12em !important; font-weight:700 !important; } /* FAQ */ .faq-q { font-size:1.05rem !important; color:#0E0D0A !important; } .faq-a, .faq-answer { font-size:.95rem !important; line-height:1.75 !important; color:#3a3730 !important; } /* Footer */ .footer-desc { font-size:.9rem !important; line-height:1.75 !important; } .fcol-links a { font-size:.92rem !important; } /* CTA sections on dark bg */ .cta-sub, .proof-cta-sub { font-size:.95rem !important; line-height:1.65 !important; color:rgba(247,245,240,.75) !important; } /* Comparison dark section */ .compare-dark-title { color:#F7F5F0 !important; } .compare-dark-sub { color:rgba(247,245,240,.78) !important; font-size:.95rem !important; } /* About, Roadmap, Tiers */ .about-text, .about-desc, .about-body { font-size:1.05rem !important; line-height:1.8 !important; color:#2a2820 !important; } .phase-title, .roadmap-title { font-size:1.1rem !important; color:#0E0D0A !important; } .phase-desc, .roadmap-desc, .phase-item { font-size:.95rem !important; line-height:1.7 !important; color:#3a3730 !important; } .tier-name, .tier-title { font-size:1.1rem !important; color:#0E0D0A !important; } .tier-desc, .tier-detail, .tier-feature { font-size:.92rem !important; line-height:1.7 !important; color:#3a3730 !important; } /* ── MOBILE ── */ @media (max-width:768px) { .hero h1, .page-title { font-size:clamp(2rem,8vw,2.8rem) !important; line-height:.95 !important; } .hero-sub, .hero p, .hero-desc { font-size:1.02rem !important; } .facts-inner { flex-direction:column !important; } .fact { border-right:none !important; border-bottom:1px solid rgba(255,255,255,.08) !important; padding:24px 20px !important; } .fact:last-child { border-bottom:none !important; } .proof-inner { grid-template-columns:1fr !important; gap:32px !important; padding:32px 16px !important; } .proof-phone { max-width:260px !important; margin:0 auto !important; order:-1 !important; margin-top:0 !important; } footer { grid-template-columns:1fr !important; gap:24px !important; padding:32px 20px !important; } .footer-bottom { flex-direction:column !important; text-align:center !important; gap:12px !important; } .hero-btns, .btn-row, .cta-btns { flex-direction:column !important; gap:12px !important; width:100% !important; } .hero-btns .btn, .btn-row .btn, .cta-btns .btn { width:100% !important; justify-content:center !important; } .drawer a { font-size:2rem !important; padding:12px 0 !important; } .steps-row { flex-direction:column !important; gap:16px !important; } .facts, .facts-inner, .proof-copy, .flow-step, .proof-card, .cta-card, .step-card, .faq-item, .card, .tier-card, .roadmap-card, .phase-card, .step, .fpanel, .compare-dark-inner, .join-card, .contact-card, .about-card, .feature-card, .value-card, .info-card, .perk { border-radius:12px !important; } .nav-logo svg { height:34px !important; width:34px !important; } .nav-logo-text { font-size:1.1rem !important; } .sticky-bar { border-radius:0 !important; } .page-hero, .section, .page-section { padding:40px 20px !important; } .section-title, h2 { font-size:clamp(1.6rem,6vw,2.2rem) !important; } .fpanel { flex-direction:column !important; } .fpanel-visual { max-width:100% !important; order:-1 !important; } .compare-grid { grid-template-columns:1fr !important; } .tier-grid, .tiers { grid-template-columns:1fr !important; } .btn, .btn-ink, .btn-ghost, .btn-white, .btn-acid, .nav-cta { border-radius:8px !important; } } @media (max-width:480px) { .hero h1, .page-title { font-size:1.8rem !important; } .nav-logo svg { height:30px !important; width:30px !important; } .nav-logo-text { font-size:1rem !important; } }