/** * CodeLine Hero — front-end styles. * * Scope is intentionally limited to the existing CodeLine homepage hero. * No font-family, font-size, font-weight, line-height, button styling, * dimensions or link styling are overwritten on the *existing* Elementor * heading/paragraph/CTA. The one exception is `.clh-play-button`, a new * element this plugin itself introduces (not existing Elementor content) * for prefers-reduced-motion users -- it needs its own minimal styling to * be usable, and inherits font-family/uses relative units rather than * hardcoding a typeface or pixel sizes. */ /* Video integration is activated only after the first frame is ready. */ .elementor-top-section.clh-active, .e-con.clh-active { position: relative; isolation: isolate; overflow: hidden; } .elementor-top-section.clh-active > .clh-video, .e-con.clh-active > .clh-video { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; background: transparent; } /* Hide only the direct Elementor background-video runtime of this hero. * The original DOM node remains present as a rollback/fallback structure. * * Transitions rather than snaps to opacity: 0, over the same duration as * the local video's own fade-in (see .clh-video below and hero.js), so the * fallback fades out while the video fades in -- a true crossfade with * continuous coverage, instead of the fallback vanishing instantly and * leaving a bare background-color gap for the video's fade-in to blend * against. `visibility` only switches (removing it from hit-testing/a11y) * once that fade has fully finished, via a matching transition-delay, * rather than cutting the fade short. */ .elementor-top-section.clh-active > .elementor-background-video-container, .e-con.clh-active > .elementor-background-video-container { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 400ms ease, visibility 0s linear 400ms !important; } /* Preserve the existing Elementor overlay exactly as designed. */ .elementor-top-section.clh-active > .elementor-background-overlay, .e-con.clh-active > .elementor-background-overlay { z-index: 1; pointer-events: none; } /* * The subtle top-down shadow (::before, z-index: 1) that used to live here, * scoped to `.clh-active`, has moved to CodeLine_Hero::print_critical_css() * in includes/class-codeline-hero.php. It now applies unconditionally, from * first paint, instead of only once the video activates -- one shared * overlay layer above *both* the poster and the video, so the two never * look different and the shadow is never toggled on/off (never applied * twice, never a visible brightness jump at the poster->video transition). * It could not stay in this stylesheet: this file has no reference to the * specific hero's Elementor data-id, so scoping it here without * `.clh-active` would leak the shadow onto every Elementor section * site-wide. The PHP output already has that ID and already prints * ID-scoped critical CSS in , so that's the one correct home for an * always-on, correctly-scoped rule. */ /* Keep original Elementor content above video + overlay. */ .elementor-top-section.clh-active > .elementor-container, .elementor-top-section.clh-active > .e-con-inner, .e-con.clh-active > .elementor-container, .e-con.clh-active > .e-con-inner { position: relative; z-index: 2; } /* * Content-reveal animation: a smooth, staggered fade-in (opacity + a subtle * upward rise, no blur) for the heading, paragraph and CTA -- deliberately * independent of the local video/poster background above. The text exists * in its final layout position immediately; only `opacity`/`transform` * (paint-only, never affecting box geometry) animate, so there is no * layout shift, nothing to wait for, and the text is sharp/legible at * every point in the animation (no `filter: blur()`). * * This keyframe definition is shared/reusable and not itself tied to any * specific hero ID. What actually *applies* it -- the `animation-name` + * per-element `animation-delay` declarations, plus the * `prefers-reduced-motion` override -- is printed by PHP directly in * (CodeLine_Hero::print_critical_css()), scoped to the exact, * possibly-filtered hero target ID (one source of truth with the JS * config, not a second hardcoded copy here). Being inline, render-blocking * CSS in , the animation starts on the very first paint: no JS * class toggle, no dependency on hero.js having loaded, and critically, no * dependency on the local video/poster being ready. The animation runs * exactly once because it is simply how these elements are styled from * first paint onward -- there is no later state change that could restart * it. */ @keyframes clh-content-reveal { 0% { opacity: 0; transform: translate3d(0, 10px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } /* * "Play animation" button -- shown only for prefers-reduced-motion users * (hero.js only ever inserts this element in that case) so they can * opt in to the background motion themselves instead of it autoplaying. * Deliberately minimal/pill-shaped to read as a secondary, optional * action rather than competing with the real Elementor CTA button. * Sized with relative units and inheriting font-family from the hero, so * it follows the theme's type instead of hardcoding one. */ .clh-play-button { position: absolute; z-index: 3; right: 1.5rem; bottom: 1.5rem; display: inline-flex; align-items: center; gap: 0.5em; pointer-events: auto; cursor: pointer; font-family: inherit; font-size: 0.9rem; line-height: 1; color: #1a1a1a; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 999px; padding: 0.7em 1.15em 0.7em 0.9em; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; } .clh-play-button:hover { background: rgba(255, 255, 255, 1); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16); transform: translateY(-1px); } .clh-play-button:active { transform: translateY(0); } .clh-play-button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .clh-play-button__icon { display: block; flex: none; width: 1.6em; height: 1.6em; } .clh-play-button__icon svg { display: block; width: 100%; height: 100%; } .clh-play-button[hidden] { display: none; } @media (max-width: 480px) { .clh-play-button { right: 1rem; bottom: 1rem; font-size: 0.82rem; } }