/** * The Blanche Core - editorial card interactions. * Scoped image-link full-width fix, discreet hover, and scroll reveal. * Loaded centrally by the plugin (not per Elementor document). */ /* 1. Image link: prevent Elementor shrink-to-fit ---------------- */ .bl-card-image, .bl-card-image a, .bl-card-image img { width: 100%; } .bl-card-image a { display: block !important; width: 100%; max-width: none; } .bl-card-image img { display: block; width: 100%; object-fit: cover; } /* 2. Image hover zoom - hover-capable, fine pointers only ----------- */ @media (hover: hover) and (pointer: fine) { .bl-card-image { overflow: hidden; } .bl-card-image img { transform: scale(1); transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1); } .bl-card-image:hover img { transform: scale(1.03); } } /* 3. Title hover: Dark Navy -> Sky Blue ----------------------------- */ .bl-card-title a { color: var(--e-global-color-primary, #000E25) !important; transition: color 300ms ease; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .bl-card-title a:hover { color: var(--e-global-color-accent, #1FA7DB) !important; } } /* 4. Focus-visible for the image link (accessibility) -------------- */ .bl-card-image a:focus-visible { outline: 2px solid var(--e-global-color-accent); outline-offset: 3px; } /* 5. Entrance reveal (progressive enhancement) --------------------- Cards are visible by default. Only when JS confirms motion is active (adds .bl-motion to ) do cards start hidden. */ .bl-motion .elementor-loop-container:not(.swiper) > .e-loop-item { opacity: 0; transform: translateY(24px) scale(0.992); transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1); } .bl-motion .elementor-loop-container:not(.swiper) > .e-loop-item.bl-is-visible { opacity: 1; transform: translateY(0) scale(1); } /* 6. Reduced motion: no reveal, no zoom, instantly visible --------- */ @media (prefers-reduced-motion: reduce) { .bl-motion .bl-card-reveal, .bl-motion .elementor-loop-container:not(.swiper) > .e-loop-item.bl-is-visible { opacity: 1; transform: none; transition: none; } .bl-card-image img, .bl-card-image:hover img { transition: none; transform: none; } }