/* ========================================================================== * WTM CTA Hierarchy — single primary CTA per page * -------------------------------------------------------------------------- * Add this to every page so its body[data-page] attribute can * trigger the right demotions for that page. * * Pattern: each page sets with one of: * home, donate, budget, podcast, guest, secondary * * Then this stylesheet selectively hides or demotes competing CTAs * so a single primary action wins per page. * ========================================================================== */ /* ------ DONATE pages (join, ask) ------ Hide the "Watch the latest" mobile-sticky CTA so the Donate primary wins. */ body[data-page="donate"] .mobile-sticky-cta, body[data-page="budget"] .mobile-sticky-cta { display: none !important; } /* On donate/budget pages, demote masthead "Back the work" CTA visually so it doesn't compete with the in-page Giveth primary. */ body[data-page="donate"] .masthead-cta, body[data-page="budget"] .masthead-cta { background: transparent; color: var(--text-muted); border: 1px solid var(--border-strong); font-weight: 500; } body[data-page="donate"] .masthead-cta:hover, body[data-page="budget"] .masthead-cta:hover { color: var(--coral); border-color: var(--coral); } /* Hide the live-dot on the demoted masthead CTA when on donation pages */ body[data-page="donate"] .masthead-cta .live-dot, body[data-page="budget"] .masthead-cta .live-dot { display: none; } /* ------ GUEST page (private) ------ Hide both mobile-sticky and masthead CTA — the Calendly is the only action. */ body[data-page="guest"] .mobile-sticky-cta { display: none !important; } /* ------ SECONDARY pages (about, mission, methods, team, standards, etc.) ------ Mobile-sticky stays as 'Watch latest' — it's the secondary path while the primary in-page CTA is 'Get the dispatch' (added by funnel-reorder). */ /* ------ HOME ------ Demote secondary hero CTAs so the gold Donate button is unambiguously primary. The "Watch the latest" and "Get the dispatch" buttons get a quieter treatment. */ body[data-page="home"] .hero-ctas .btn-secondary { background: transparent; border: 1px solid var(--border-strong); color: var(--text-muted); font-weight: 500; } body[data-page="home"] .hero-ctas .btn-secondary:hover { color: var(--coral); border-color: var(--coral); } /* ------ Live widget — already passive (only loud when actually live). Reduce visual weight on funding-focused pages so it doesn't pull eye away. */ body[data-page="donate"] .wtm-live-pill, body[data-page="budget"] .wtm-live-pill { background: rgba(14,13,11,0.85); border-color: rgba(228,116,82,0.4); opacity: 0.85; } body[data-page="donate"] .wtm-live-pill:hover, body[data-page="budget"] .wtm-live-pill:hover { opacity: 1; } /* ========================================================================== * MOBILE QA FIXES (per Kiley, 2026-05-02) * ========================================================================== */ /* Defensive: prevent any element from causing horizontal scroll on the page. Catches videos, iframes, long URLs, badly-sized embeds, etc. */ html, body { overflow-x: hidden; max-width: 100%; } /* Hide the legacy "Watch the latest" mobile-sticky CTA on mobile — now redundant with the live widget (bottom-right) and chat widget (bottom-left). */ @media (max-width: 720px) { .mobile-sticky-cta { display: none !important; } } /* Ensure the floating widgets never collide on small screens. Live widget gets a hard right anchor, chat widget gets a hard left anchor, each capped to half the viewport so they can't visually overlap. */ @media (max-width: 600px) { .wtm-live-widget { max-width: 48vw; } .wtm-chat-widget { max-width: 48vw; } } /* Belt-and-suspenders: any embedded iframe or media should respect its container. */ iframe, embed, object, video { max-width: 100%; } /* ========================================================================== * MOBILE MASTHEAD CLEANUP — fewer elements, no crowding, logo dimensioned * ========================================================================== */ /* Logo: enforce square + preserve aspect ratio (was rendering off-dimension on slow loads) */ .brand img, .brand picture img { width: 32px !important; height: 32px !important; object-fit: contain; display: block; flex-shrink: 0; } /* Tablet/mobile (under 720px) */ @media (max-width: 720px) { /* 1. Hide Discord pill entirely on mobile (still in footer) — frees space */ .masthead-discord { display: none !important; } /* 2. Shrink masthead inner padding + tighten gap so the bar reads compact */ .masthead-inner { padding-left: 1rem !important; padding-right: 1rem !important; gap: 0.6rem !important; } /* 3. Shorter brand text on small phones — keep logo + cut wordmark on tightest screens */ .brand span { font-size: 1rem !important; letter-spacing: -0.015em; } /* 4. Demote the "Back the work →" CTA — smaller padding, no extra weight */ .masthead-cta { padding: 0.55rem 0.85rem !important; font-size: 0.62rem !important; letter-spacing: 0.08em !important; } /* 5. Hamburger size already at 44px — just ensure it sits nicely against the CTA */ .nav-toggle { margin-left: 0.25rem; } } /* On the very smallest phones (under 420px) hide the wordmark next to the logo so we get just: [logo] [back] [hamburger] — three crisp elements. */ @media (max-width: 420px) { .brand span { display: none; } .masthead-cta { padding: 0.55rem 0.7rem !important; } }