/* ═══════════════════════════════════════════════════════ 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; }