/* Theme Name: Radiance Digital Transmedia Child Theme URI: https://radiancedigital.com/ Author: Radiance Digital Author URI: https://radiancedigital.com/ Description: Update-safe child theme for Radiance Digital Transmedia. Contains the mobile and tablet refinements: fluid Elementor typography, no clipped headings, no horizontal scroll, and 44px tap targets. Template: radiance-transmedia Version: 1.4.0 Requires at least: 6.4 Requires PHP: 7.4 Text Domain: radiance-transmedia-child License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html */ /* ========================================================================= RADIANCE CHILD — MOBILE & TABLET Put your own overrides at the bottom, under "Your custom styles". Everything above that marker exists to solve one problem: text that ran off the side of the screen on phones and tablets. Elementor's own widgets are the main culprit because a heading size typed into the editor is a fixed px value that does not shrink, so the fixes below convert them to fluid sizes. ====================================================================== */ /* ------------------------------------------------------------------------- 1. Nothing overflows sideways ---------------------------------------------------------------------- */ /* * `overflow-x: clip` instead of `hidden`. `hidden` on silently breaks * position:sticky headers and scroll-into-view anchors; `clip` does not. * This is a safety net — the rules below fix the causes. */ html { overflow-x: clip; max-width: 100%; } /* Anything with a hard pixel width still gets contained. */ .elementor-widget-container, .elementor-widget, .e-con-inner, .e-con, .elementor-section, .elementor-column { min-width: 0; max-width: 100%; } /* Grid and flex children default to min-width:auto, which lets a long word force the track wider than the screen. This is the single most common cause of cut-off text in Elementor layouts. */ .e-con > .e-con-inner > *, .elementor-container > .elementor-column, .elementor-widget-wrap > .elementor-element { min-width: 0; } /* ------------------------------------------------------------------------- 2. Text wraps instead of being clipped ---------------------------------------------------------------------- */ .elementor-widget-heading .elementor-heading-title, .elementor-widget-text-editor, .elementor-widget-text-editor p, .elementor-widget-text-editor li, .elementor-widget-icon-box .elementor-icon-box-title, .elementor-widget-icon-box .elementor-icon-box-description, .elementor-widget-button .elementor-button-text, .elementor-price-table__title, .elementor-testimonial-content { overflow-wrap: break-word; word-break: normal; hyphens: auto; } /* Email addresses, URLs and hashtags are single unbreakable tokens. */ .elementor-widget-text-editor a[href^="mailto"], .elementor-widget-text-editor a[href^="http"], .rd-break-anywhere { overflow-wrap: anywhere; word-break: break-word; } /* ------------------------------------------------------------------------- 3. Fluid Elementor headings (tablet and phone) Elementor stores per-device font sizes as fixed pixels. A 96px desktop heading set to 48px on mobile is still 48px on a 320px screen, where a long word needs about 34px to fit. These clamps let the type shrink the last few pixels rather than run off the edge. Elementor's own responsive controls still work above these minimums. ---------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(2.125rem, 1rem + 5.6vw, 5rem) !important; line-height: 1.02; letter-spacing: -.035em; } .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.75rem, 1rem + 4vw, 3.75rem) !important; line-height: 1.06; letter-spacing: -.03em; } .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.375rem, 0.95rem + 2.2vw, 2.25rem) !important; line-height: 1.15; } .elementor-widget-heading h4.elementor-heading-title { font-size: clamp(1.125rem, 0.9rem + 1.4vw, 1.625rem) !important; line-height: 1.25; } .elementor-widget-text-editor { font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem); line-height: 1.7; } } /* ------------------------------------------------------------------------- 4. Comfortable gutters at every width ---------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-section.elementor-section-boxed > .elementor-container, .e-con.e-con-boxed > .e-con-inner { width: min(100% - 48px, 1140px); margin-inline: auto; } } @media (max-width: 600px) { .elementor-section.elementor-section-boxed > .elementor-container, .e-con.e-con-boxed > .e-con-inner { width: min(100% - 32px, 1140px); } /* Huge desktop padding typed into Elementor squeezes phone columns to a sliver. Cap it. */ .e-con > .e-con-inner, .elementor-column-wrap { padding-inline: 0 !important; } } /* ------------------------------------------------------------------------- 5. Tap targets, buttons and forms ---------------------------------------------------------------------- */ @media (max-width: 1024px) { .elementor-button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; white-space: normal; /* Let long labels wrap rather than overflow. */ line-height: 1.3; } /* Stacked, full-width buttons read far better than two squeezed side by side on a phone. */ .elementor-widget-button { max-width: 100%; } } @media (max-width: 600px) { .elementor-widget-button .elementor-button { width: 100%; } } /* 16px minimum on inputs stops iOS Safari from zooming the whole page in when a field receives focus — a very common "my site is broken on iPhone" report. */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], select, textarea { font-size: max(16px, 1rem); max-width: 100%; } /* ------------------------------------------------------------------------- 6. Media: images, video, tables ---------------------------------------------------------------------- */ .rd-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; } .rd-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .elementor-widget-video .elementor-wrapper { max-width: 100%; } /* A wide table is the one thing that genuinely cannot wrap, so let it scroll inside its own box instead of stretching the page. */ .entry-content table, .elementor-widget-text-editor table, .rd-page-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .entry-content pre, .elementor-widget-text-editor pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; word-break: break-word; } /* Background images set per-device in Elementor often use `fixed`, which iOS does not support and renders as a stretched, mis-scaled image. */ @media (max-width: 1024px) { .elementor-section[data-settings*="background_background"], .e-con { background-attachment: scroll !important; } } /* ------------------------------------------------------------------------- 7. Tablet-specific layout (768–1024px) The original theme jumped straight from a 3-column desktop grid to a 1-column phone layout at 700px, leaving iPad portrait (768px) and iPad Air (820px) rendering the cramped desktop layout. ---------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { .elementor-widget-heading .elementor-heading-title { max-width: 22ch; } /* Two comfortable columns instead of three squeezed ones. */ .e-con.rd-cols-3 > .e-con-inner, .rd-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------------- 8. Respect the user's system settings ---------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .elementor-invisible, .elementor-widget[data-settings*="animation"] { animation: none !important; opacity: 1 !important; transform: none !important; visibility: visible !important; } } /* Elementor entrance animations sometimes leave content stuck at opacity 0 if the script fails to fire. Guarantee the text is readable. */ .elementor-invisible { visibility: visible; } /* ------------------------------------------------------------------------- 9. Your custom styles Add brand tweaks below this line. Nothing here is overwritten when the parent theme updates. ---------------------------------------------------------------------- */ /* Example — uncomment and edit: .rd-hero__title { letter-spacing: -.05em; } */