/* ========================================================================== P4U Accessibility — Font Size Widget Works with: Divi, ZAZ Events, P4U Members, P4U For Sale ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONT SCALING — applied via class on element Uses relative scaling so Divi's em/rem-based layouts stay intact. -------------------------------------------------------------------------- */ /* Large: ~120% increase */ html.p4u-font-large { font-size: 120% !important; } /* Extra-large: ~140% increase */ html.p4u-font-xlarge { font-size: 140% !important; } /* -------------------------------------------------------------------------- 2. DIVI-SPECIFIC overrides Force the body AND all text-containing elements to inherit the scaled font-size. Divi applies explicit px values on body, .et_pb_text_inner, and many other inner elements, so we must override them directly. -------------------------------------------------------------------------- */ /* Force body to scale (Divi theme customizer often sets body in px) */ html.p4u-font-large body, html.p4u-font-xlarge body { font-size: 1em !important; } /* ── Module wrappers ── */ html.p4u-font-large body .et_pb_module, html.p4u-font-large body .et_pb_text, html.p4u-font-large body .et_pb_blurb, html.p4u-font-large body .et_pb_tab, html.p4u-font-large body .et_pb_toggle, html.p4u-font-large body .et_pb_accordion, html.p4u-font-large body .et_pb_cta, html.p4u-font-large body .et_pb_pricing_table, html.p4u-font-large body .et_pb_post_content, html.p4u-font-large body .et_pb_slide_description, html.p4u-font-large body .et_pb_menu, html.p4u-font-large body .et_pb_fullwidth_menu, html.p4u-font-xlarge body .et_pb_module, html.p4u-font-xlarge body .et_pb_text, html.p4u-font-xlarge body .et_pb_blurb, html.p4u-font-xlarge body .et_pb_tab, html.p4u-font-xlarge body .et_pb_toggle, html.p4u-font-xlarge body .et_pb_accordion, html.p4u-font-xlarge body .et_pb_cta, html.p4u-font-xlarge body .et_pb_pricing_table, html.p4u-font-xlarge body .et_pb_post_content, html.p4u-font-xlarge body .et_pb_slide_description, html.p4u-font-xlarge body .et_pb_menu, html.p4u-font-xlarge body .et_pb_fullwidth_menu { font-size: inherit; } /* ── The actual text containers inside Divi modules ── */ html.p4u-font-large .et_pb_text_inner, html.p4u-font-large .et_pb_text_inner p, html.p4u-font-large .et_pb_text_inner span, html.p4u-font-large .et_pb_text_inner div, html.p4u-font-large .et_pb_text_inner li, html.p4u-font-large .et_pb_blurb_content, html.p4u-font-large .et_pb_blurb_content p, html.p4u-font-large .et_pb_blurb_content span, html.p4u-font-large .et_pb_blurb_content div, html.p4u-font-large .et_pb_toggle_content, html.p4u-font-large .et_pb_toggle_content p, html.p4u-font-large .et_pb_accordion_content, html.p4u-font-large .et_pb_accordion_content p, html.p4u-font-large .et_pb_slide_content, html.p4u-font-large .et_pb_slide_content p, html.p4u-font-large .et_pb_post_content, html.p4u-font-large .et_pb_post_content p, html.p4u-font-large .et_pb_cta_content, html.p4u-font-large .et_pb_pricing_content, html.p4u-font-large .et_pb_pricing_content p, html.p4u-font-large .et_pb_tab_content, html.p4u-font-large .et_pb_tab_content p, html.p4u-font-large .et_pb_code_inner, html.p4u-font-large .et_pb_video_box, html.p4u-font-xlarge .et_pb_text_inner, html.p4u-font-xlarge .et_pb_text_inner p, html.p4u-font-xlarge .et_pb_text_inner span, html.p4u-font-xlarge .et_pb_text_inner div, html.p4u-font-xlarge .et_pb_text_inner li, html.p4u-font-xlarge .et_pb_blurb_content, html.p4u-font-xlarge .et_pb_blurb_content p, html.p4u-font-xlarge .et_pb_blurb_content span, html.p4u-font-xlarge .et_pb_blurb_content div, html.p4u-font-xlarge .et_pb_toggle_content, html.p4u-font-xlarge .et_pb_toggle_content p, html.p4u-font-xlarge .et_pb_accordion_content, html.p4u-font-xlarge .et_pb_accordion_content p, html.p4u-font-xlarge .et_pb_slide_content, html.p4u-font-xlarge .et_pb_slide_content p, html.p4u-font-xlarge .et_pb_post_content, html.p4u-font-xlarge .et_pb_post_content p, html.p4u-font-xlarge .et_pb_cta_content, html.p4u-font-xlarge .et_pb_pricing_content, html.p4u-font-xlarge .et_pb_pricing_content p, html.p4u-font-xlarge .et_pb_tab_content, html.p4u-font-xlarge .et_pb_tab_content p, html.p4u-font-xlarge .et_pb_code_inner, html.p4u-font-xlarge .et_pb_video_box { font-size: inherit !important; line-height: 1.5 !important; } /* ── Generic text elements that might have px sizes ── */ html.p4u-font-large p, html.p4u-font-large li, html.p4u-font-large td, html.p4u-font-large th, html.p4u-font-large dd, html.p4u-font-large dt, html.p4u-font-xlarge p, html.p4u-font-xlarge li, html.p4u-font-xlarge td, html.p4u-font-xlarge th, html.p4u-font-xlarge dd, html.p4u-font-xlarge dt { font-size: inherit; } /* ── Headings — scale proportionally ── */ html.p4u-font-large .et_pb_module h1, html.p4u-font-large .et_pb_module h2, html.p4u-font-large .et_pb_module h3, html.p4u-font-large .et_pb_module h4, html.p4u-font-large .et_pb_module h5, html.p4u-font-large .et_pb_module h6, html.p4u-font-large h1, html.p4u-font-large h2, html.p4u-font-large h3, html.p4u-font-large h4, html.p4u-font-large h5, html.p4u-font-large h6, html.p4u-font-xlarge .et_pb_module h1, html.p4u-font-xlarge .et_pb_module h2, html.p4u-font-xlarge .et_pb_module h3, html.p4u-font-xlarge .et_pb_module h4, html.p4u-font-xlarge .et_pb_module h5, html.p4u-font-xlarge .et_pb_module h6, html.p4u-font-xlarge h1, html.p4u-font-xlarge h2, html.p4u-font-xlarge h3, html.p4u-font-xlarge h4, html.p4u-font-xlarge h5, html.p4u-font-xlarge h6 { font-size: inherit !important; } /* ── Divi buttons ── */ html.p4u-font-large .et_pb_button, html.p4u-font-xlarge .et_pb_button { font-size: inherit !important; padding: 0.6em 1.2em !important; white-space: normal !important; } /* ── Divi menu items ── */ html.p4u-font-large #et-top-navigation .et-menu > li > a, html.p4u-font-xlarge #et-top-navigation .et-menu > li > a { font-size: inherit; } /* -------------------------------------------------------------------------- 3. P4U CUSTOM PLUGINS — ensure scaling works -------------------------------------------------------------------------- */ /* P4U For Sale */ html.p4u-font-large .p4u-grid, html.p4u-font-xlarge .p4u-grid { gap: 24px; } html.p4u-font-large .p4u-body h4, html.p4u-font-large .p4u-detail-body h3, html.p4u-font-large .p4u-desc, html.p4u-font-large .p4u-meta, html.p4u-font-large .p4u-spec, html.p4u-font-large .p4u-ffield label, html.p4u-font-large .p4u-ffield input, html.p4u-font-large .p4u-submit-btn, html.p4u-font-large .p4u-buy-btn { font-size: inherit !important; } html.p4u-font-xlarge .p4u-body h4, html.p4u-font-xlarge .p4u-detail-body h3, html.p4u-font-xlarge .p4u-desc, html.p4u-font-xlarge .p4u-meta, html.p4u-font-xlarge .p4u-spec, html.p4u-font-xlarge .p4u-ffield label, html.p4u-font-xlarge .p4u-ffield input, html.p4u-font-xlarge .p4u-submit-btn, html.p4u-font-xlarge .p4u-buy-btn { font-size: inherit !important; } /* P4U Members */ html.p4u-font-large .p4u-login-form, html.p4u-font-large .p4u-subscribe-form, html.p4u-font-large .p4u-profile, html.p4u-font-large .p4u-dashboard, html.p4u-font-xlarge .p4u-login-form, html.p4u-font-xlarge .p4u-subscribe-form, html.p4u-font-xlarge .p4u-profile, html.p4u-font-xlarge .p4u-dashboard { font-size: inherit; } html.p4u-font-large .p4u-dash-post-title, html.p4u-font-large .p4u-dash-group-name, html.p4u-font-large .p4u-profile-form label, html.p4u-font-large .p4u-profile-form input, html.p4u-font-large .p4u-login-button, html.p4u-font-xlarge .p4u-dash-post-title, html.p4u-font-xlarge .p4u-dash-group-name, html.p4u-font-xlarge .p4u-profile-form label, html.p4u-font-xlarge .p4u-profile-form input, html.p4u-font-xlarge .p4u-login-button { font-size: inherit !important; } /* ZAZ Events — Widget (compact list) */ html.p4u-font-large .zaz-ew, html.p4u-font-large .zaz-ew-item, html.p4u-font-large .zaz-ew-info, html.p4u-font-xlarge .zaz-ew, html.p4u-font-xlarge .zaz-ew-item, html.p4u-font-xlarge .zaz-ew-info { font-size: inherit; } html.p4u-font-large .zaz-ew-day, html.p4u-font-large .zaz-ew-month, html.p4u-font-large .zaz-ew-title, html.p4u-font-large .zaz-ew-meta, html.p4u-font-large .zaz-ew-excerpt, html.p4u-font-large .zaz-ew-empty, html.p4u-font-xlarge .zaz-ew-day, html.p4u-font-xlarge .zaz-ew-month, html.p4u-font-xlarge .zaz-ew-title, html.p4u-font-xlarge .zaz-ew-meta, html.p4u-font-xlarge .zaz-ew-excerpt, html.p4u-font-xlarge .zaz-ew-empty { font-size: inherit !important; } /* ZAZ Events — Full events page */ html.p4u-font-large .zaz-ep, html.p4u-font-large .zaz-ep-card, html.p4u-font-large .zaz-ep-card-body, html.p4u-font-large .zaz-ep-card-content, html.p4u-font-xlarge .zaz-ep, html.p4u-font-xlarge .zaz-ep-card, html.p4u-font-xlarge .zaz-ep-card-body, html.p4u-font-xlarge .zaz-ep-card-content { font-size: inherit; } html.p4u-font-large .zaz-ep-filter, html.p4u-font-large .zaz-ep-card-day, html.p4u-font-large .zaz-ep-card-month, html.p4u-font-large .zaz-ep-card-year, html.p4u-font-large .zaz-ep-card-cat, html.p4u-font-large .zaz-ep-card-title, html.p4u-font-large .zaz-ep-card-title a, html.p4u-font-large .zaz-ep-card-meta, html.p4u-font-large .zaz-ep-meta-item, html.p4u-font-large .zaz-ep-card-excerpt, html.p4u-font-large .zaz-ep-card-link, html.p4u-font-large .zaz-ep-empty h3, html.p4u-font-large .zaz-ep-empty p, html.p4u-font-xlarge .zaz-ep-filter, html.p4u-font-xlarge .zaz-ep-card-day, html.p4u-font-xlarge .zaz-ep-card-month, html.p4u-font-xlarge .zaz-ep-card-year, html.p4u-font-xlarge .zaz-ep-card-cat, html.p4u-font-xlarge .zaz-ep-card-title, html.p4u-font-xlarge .zaz-ep-card-title a, html.p4u-font-xlarge .zaz-ep-card-meta, html.p4u-font-xlarge .zaz-ep-meta-item, html.p4u-font-xlarge .zaz-ep-card-excerpt, html.p4u-font-xlarge .zaz-ep-card-link, html.p4u-font-xlarge .zaz-ep-empty h3, html.p4u-font-xlarge .zaz-ep-empty p { font-size: inherit !important; } /* -------------------------------------------------------------------------- 4. LAYOUT PROTECTION Prevent containers from overflowing when text grows. -------------------------------------------------------------------------- */ html.p4u-font-large body, html.p4u-font-xlarge body { overflow-x: hidden; word-wrap: break-word; overflow-wrap: break-word; } html.p4u-font-large .et_pb_row, html.p4u-font-xlarge .et_pb_row { max-width: 100%; } html.p4u-font-large .et_pb_column, html.p4u-font-xlarge .et_pb_column { overflow: visible; } /* Allow text containers to grow in height */ html.p4u-font-large .et_pb_text_inner, html.p4u-font-xlarge .et_pb_text_inner, html.p4u-font-large .et_pb_blurb_content, html.p4u-font-xlarge .et_pb_blurb_content { overflow: visible !important; height: auto !important; max-height: none !important; } /* -------------------------------------------------------------------------- 5. WIDGET STYLING -------------------------------------------------------------------------- */ .p4u-a11y-widget { position: fixed; bottom: 20px; left: 20px; z-index: 999999; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px !important; line-height: 1.4; } .p4u-a11y-toggle { width: 48px; height: 48px; border-radius: 50%; background: #294220; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transition: background 0.3s, transform 0.2s; } .p4u-a11y-toggle:hover { background: #3a5c2e; transform: scale(1.08); } .p4u-a11y-toggle:focus-visible { outline: 3px solid #DB7C08; outline-offset: 3px; } .p4u-a11y-panel { position: absolute; bottom: 58px; left: 0; background: #fff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); padding: 16px 20px; min-width: 180px; animation: p4u-a11y-slideUp 0.25s ease; } .p4u-a11y-panel[hidden] { display: none; } @keyframes p4u-a11y-slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .p4u-a11y-title { margin: 0 0 10px; font-size: 13px !important; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.5px; } .p4u-a11y-buttons { display: flex; gap: 8px; margin-bottom: 12px; } .p4u-a11y-btn { flex: 1; padding: 8px 4px; border: 2px solid #ddd; border-radius: 8px; background: #f9f9f9; color: #333; font-weight: 700; cursor: pointer; text-align: center; transition: border-color 0.2s, background 0.2s; font-family: inherit; line-height: 1.2; } .p4u-a11y-btn:hover { border-color: #294220; background: #f0f5ed; } .p4u-a11y-btn.active { border-color: #294220; background: #294220; color: #fff; } .p4u-a11y-btn:focus-visible { outline: 3px solid #DB7C08; outline-offset: 2px; } .p4u-a11y-reset { width: 100%; padding: 6px 12px; border: none; border-radius: 6px; background: #eee; color: #666; font-size: 12px !important; font-weight: 600; cursor: pointer; transition: background 0.2s; } .p4u-a11y-reset:hover { background: #ddd; color: #333; } /* ── Text-to-Speech controls ── */ .p4u-a11y-divider { border: none; border-top: 1px solid #eee; margin: 14px 0 12px; } .p4u-tts-controls { display: flex; flex-direction: column; gap: 8px; } .p4u-tts-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 9px 12px; border: 2px solid #294220; border-radius: 8px; background: #fff; color: #294220; font-family: inherit; font-size: 13px !important; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s; } .p4u-tts-btn:hover { background: #294220; color: #fff; } .p4u-tts-btn:focus-visible { outline: 3px solid #DB7C08; outline-offset: 2px; } .p4u-tts-active { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; background: #f0f5ed; border-radius: 8px; border: 1px solid #d4e0cd; } .p4u-tts-status { font-size: 12px !important; font-weight: 600; color: #294220; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } .p4u-tts-actions { display: flex; gap: 6px; flex-shrink: 0; } .p4u-tts-mini { width: 32px; height: 32px; border-radius: 50%; border: none; background: #294220; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.15s; } .p4u-tts-mini:hover { background: #3a5c2e; transform: scale(1.08); } .p4u-tts-mini:focus-visible { outline: 3px solid #DB7C08; outline-offset: 2px; } /* Widget should NOT be affected by the font scaling */ .p4u-a11y-widget, .p4u-a11y-widget * { font-size: revert; } .p4u-a11y-widget .p4u-a11y-title { font-size: 13px !important; } .p4u-a11y-widget .p4u-a11y-reset { font-size: 12px !important; } /* Mobile adjustments */ @media (max-width: 600px) { .p4u-a11y-widget { bottom: 14px; left: 14px; } .p4u-a11y-toggle { width: 44px; height: 44px; } .p4u-a11y-panel { min-width: 160px; } }