/* Theme Name: Car Accident Clinic Miami Theme URI: http://caraccidentclinicmiami.localhost Author: dayreldev Author URI: https://github.com/dayreldev Description: A custom block theme for Car Accident Clinic Miami — a medical marketing site focused on lead generation for car accident injury patients. Version: 1.0.0 Requires at least: 6.5 Tested up to: 6.9 Requires PHP: 8.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: caraccidentclinicmiami Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style */ html { scroll-behavior: smooth; } h1 { font-size:clamp(2rem, 5vw, 3.5rem); font-weight:800; line-height:1.15; } /* * Heading pre-animation state. * Applied only when: * - JS is active (.cac-anim-js set by an inline script before paint) * - The user has not requested reduced motion * Falls back to fully visible if JS fails or reduced motion is on. */ @media (prefers-reduced-motion: no-preference) { .cac-anim-js h1.wp-block-heading, .cac-anim-js h2.wp-block-heading { opacity: 0; } /* Clip the header and pre-position the inner content off-screen above. overflow:hidden keeps the page layout intact while the content is translated up. After the animation, JS sets overflow:visible inline. */ .cac-anim-js header.wp-block-template-part { overflow: hidden; } .cac-anim-js header.wp-block-template-part > .wp-block-group { transform: translateY(-100%); } } p { text-wrap: pretty; } /* ----------------------------------------------- Gsap Fixes ----------------------------------------------- */ .gsap-word { line-height: 1.2; } /* ----------------------------------------------- Facilities – Media with Stats Pattern: Make video modal full viewport width on mobile for better UX and to avoid horizontal scrolling issues with the video player. ----------------------------------------------- */ #cac-facilities-modal { max-width: 100vw; } /* ----------------------------------------------- Hero section: Background grdiant ----------------------------------------------- */ .wp-block-cover__background.has-white-background-color { background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, transparent 50%) !important; opacity: 1 !important; } /* ----------------------------------------------- Fix for group blocks with overflow content (e.g., the hero section with the background gradient) to prevent unwanted scrollbars and ensure proper clipping of child elements. ----------------------------------------------- */ .wp-block-group { overflow: hidden; } /* ----------------------------------------------- Reverse columns on mobile for better content flow (e.g., image below text) ----------------------------------------------- */ @media (max-width: 781px) { .reverse-on-mobile.wp-block-columns { flex-direction: column-reverse !important; } } /* ----------------------------------------------- Utility class to hide elements on screens 600px wide or smaller (e.g., hide certain stats or decorative elements on mobile for a cleaner layout) ----------------------------------------------- */ @media (max-width: 600px) { .hide-on-600 { display: none !important; } }