/* ============================================================ Zolara — Mobile fixes (CSS ONLY, no logic/flow changes) Loaded LAST in ; scoped to mobile via @media. Fixes from mobile audit 2026-07-06: 1. products badges/labels 8–9.6px -> >= 12px 2. Tap targets (nav / footer / hamburger / legal / cookie / filter) -> >= 44px 3. Small label/eyebrow/kicker/footer text 10–13px -> >= 12px 4. Cookie Accept/Decline buttons 32px -> >= 44px All overrides use !important so no existing rule is edited. ============================================================ */ @media (max-width: 600px) { /* ---------- 1 + 3 : minimum readable text (labels/badges >= 12px) ---------- */ .eyebrow, .hint, .foot, .kicker, .hero-badge, .system-badge .name, .sample-badge, .footer-text, .footer-disclaimer, .footer-cb, .cookie-text, .badge, .cat, .read-time, .read-more, .co, .frac, .disclaimer, .realm-tag { font-size: 12px !important; } /* products — worst offenders (8–9.6px) */ .page-tag, .card-tag, .card-label, .card-tier-badge { font-size: 12px !important; } /* 21x sales pages — bottom legal fine print is INLINE-styled 10–11px */ [style*="font-size:10px"], [style*="font-size: 10px"], [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 12px !important; } /* ---------- 2 : tap targets >= 44x44 (expand hit area with padding) ---------- */ /* Primary + mobile nav links */ nav a, .nav a, .nav-links a, .nav-logo, .nav-cta { min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding-top: 8px !important; padding-bottom: 8px !important; } /* Hamburger / menu toggle */ .nav-toggle, button.nav-toggle { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Footer + legal links */ .foot a, .footer a, .footer-links a, .site-footer a, footer a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding-top: 8px !important; padding-bottom: 8px !important; } /* ---------- 4 : cookie consent buttons 32px -> 44px ---------- */ .cookie-accept, .cookie-decline, #zcc button { min-height: 44px !important; padding-top: 12px !important; padding-bottom: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 12px !important; /* also lifts inline 11px */ } /* products filter chips: 9.6px / 35px -> 12px / 44px */ .filter-btn { font-size: 12px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ---------- pass 2 : link label sizes + missed tap targets ---------- */ /* nav / footer / CTA link text was never re-sized (only padded) */ .nav-cta, .nav a, nav a, .nav-links a, .foot a, .footer a, .footer-links a, .site-footer a, footer a, .card-cta { font-size: 12px !important; } /* widen short nav/footer links (e.g. "Home" 32px, "Privacy" 39px) to >=44 */ nav a, .nav a, .nav-links a, .nav-logo, .nav-cta, .foot a, .footer a, .footer-links a, .site-footer a, footer a { min-width: 44px !important; justify-content: center !important; } /* Legal links live inside class-less INLINE fine-print divs (21x) and inside cookie/disclaimer text — target descendants explicitly */ [style*="font-size:10px"] a, [style*="font-size: 10px"] a, [style*="font-size:11px"] a, [style*="font-size: 11px"] a, .cookie-text a, .footer-cb a, .footer-disclaimer a, #zcc a { font-size: 12px !important; min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 8px !important; } /* product card CTA button ("VIEW DETAILS" 9.6px/33px) + modal close */ .card-cta { font-size: 12px !important; min-height: 44px !important; padding-top: 11px !important; padding-bottom: 11px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .modal-close { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* ---------- pass 3 : secondary in-content CTA links -> ghost/outline buttons ---------- Turn the remaining sub-44px inline text links into tappable OUTLINE (ghost) pills. Gold outline = clearly SECONDARY to the solid-gold primary CTA, so it doesn't steal focus. Targeted by unique inline-style / class hooks (no markup edits): a[text-underline-offset] -> 21x "See a sample reading first" a[href=blog.html][border..] -> home "View All Articles →" a[rgba(155,143,187,.3)] -> 21j "View all readings" .free a -> sample-reading "Start with a free reading" */ a[style*="text-underline-offset"], a[href="blog.html"][style*="border-bottom:1px solid rgba(212,175,55,.3)"], a[style*="rgba(155,143,187,.3)"], .free a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; min-height: 44px !important; padding: 11px 22px !important; margin: 6px auto !important; border: 1px solid rgba(212,175,55,.42) !important; border-radius: 30px !important; background: rgba(212,175,55,.06) !important; color: #E7C86A !important; font-size: 13px !important; /* < primary gold CTA */ font-weight: 500 !important; letter-spacing: 1px !important; line-height: 1.2 !important; text-decoration: none !important; -webkit-text-decoration: none !important; white-space: nowrap !important; } }