/** * Block Style Modifiers - Default Styles * Theme-independent, universal style modifiers for WordPress blocks * * Philosophy: * - Enhance behavior, not visual design * - No borders, shadows, spacing, or color palettes * - Work with any theme without conflicts * - Atomic and performant * * @package Block_Style_Modifiers * @version 1.0.9 */ /* ======================================== 1️⃣ ANIMATIONS (Scroll-triggered Entrance) Category: Exclusive (radio behavior) Applied to: Group, Row, Stack, Grid, Column, Columns, Cover Triggered by: .bsm-in-view class added via Intersection Observer (assets/animations.js) ======================================== */ @keyframes bsm-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes bsm-slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes bsm-slideDown { from { transform: translateY(-30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes bsm-slideLeft { from { transform: translateX(30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes bsm-slideRight { from { transform: translateX(-30px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes bsm-scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes bsm-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } } /* * Initial hidden state — frontend only. * WP 6.x renders the block editor inside an iframe whose has * .editor-styles-wrapper (not .block-editor-page which is on the outer page). * Excluding both classes keeps blocks fully visible while editing. */ body:not(.block-editor-page):not(.editor-styles-wrapper) .bsm-fade-in:not(.bsm-in-view) { opacity: 0; } body:not(.block-editor-page):not(.editor-styles-wrapper) .bsm-slide-up:not(.bsm-in-view) { opacity: 0; transform: translateY(30px); } body:not(.block-editor-page):not(.editor-styles-wrapper) .bsm-slide-down:not(.bsm-in-view) { opacity: 0; transform: translateY(-30px); } body:not(.block-editor-page):not(.editor-styles-wrapper) .bsm-slide-left:not(.bsm-in-view) { opacity: 0; transform: translateX(30px); } body:not(.block-editor-page):not(.editor-styles-wrapper) .bsm-slide-right:not(.bsm-in-view) { opacity: 0; transform: translateX(-30px); } body:not(.block-editor-page):not(.editor-styles-wrapper) .bsm-scale-in:not(.bsm-in-view) { opacity: 0; transform: scale(0.95); } /* Frontend: animation plays when .bsm-in-view is added by assets/animations.js */ /* fill-mode: both keeps the start keyframe visible during animation-delay */ .bsm-fade-in.bsm-in-view { animation: bsm-fadeIn 0.6s ease-out both; } .bsm-slide-up.bsm-in-view { animation: bsm-slideUp 0.6s ease-out both; } .bsm-slide-down.bsm-in-view { animation: bsm-slideDown 0.6s ease-out both; } .bsm-slide-left.bsm-in-view { animation: bsm-slideLeft 0.6s ease-out both; } .bsm-slide-right.bsm-in-view { animation: bsm-slideRight 0.6s ease-out both; } .bsm-scale-in.bsm-in-view { animation: bsm-scaleIn 0.5s ease-out both; } /* Editor preview: animation plays immediately when the class is applied. * CSS animations trigger on class add, so the user sees the effect the moment * they select a modifier — no IntersectionObserver needed in the editor. */ .editor-styles-wrapper .bsm-fade-in { animation: bsm-fadeIn 0.6s ease-out both; } .editor-styles-wrapper .bsm-slide-up { animation: bsm-slideUp 0.6s ease-out both; } .editor-styles-wrapper .bsm-slide-down { animation: bsm-slideDown 0.6s ease-out both; } .editor-styles-wrapper .bsm-slide-left { animation: bsm-slideLeft 0.6s ease-out both; } .editor-styles-wrapper .bsm-slide-right { animation: bsm-slideRight 0.6s ease-out both; } .editor-styles-wrapper .bsm-scale-in { animation: bsm-scaleIn 0.5s ease-out both; } /* ======================================== 2️⃣ ANIMATION DELAY Category: Exclusive (radio behavior) Note: Only effective when used with an Animation modifier ======================================== */ .bsm-delay-fast { animation-delay: 0.2s !important; } .bsm-delay-normal { animation-delay: 0.4s !important; } .bsm-delay-slow { animation-delay: 0.8s !important; } .bsm-delay-very-slow { animation-delay: 1.2s !important; } /* ======================================== 3️⃣ HOVER EFFECTS (Transform & Filter-based) Category: Exclusive (radio behavior) Applied to: Image, Cover, Media & Text, Group, Column, Columns ======================================== */ /* Zoom In on Hover */ .bsm-zoom-hover { transition: transform 0.3s ease-out; overflow: hidden; } .bsm-zoom-hover:hover { transform: scale(1.05); } /* Grayscale to Color on Hover (Image/Cover only) */ .bsm-grayscale-to-color-hover img, .bsm-grayscale-to-color-hover .wp-block-cover__image-background { filter: grayscale(100%); transition: filter 0.3s ease-out; } .bsm-grayscale-to-color-hover:hover img, .bsm-grayscale-to-color-hover:hover .wp-block-cover__image-background { filter: grayscale(0%); } /* Brighten on Hover */ .bsm-brightness-hover { transition: filter 0.3s ease-out; } .bsm-brightness-hover:hover { filter: brightness(1.2); } /* Darken on Hover */ .bsm-darken-hover { transition: filter 0.3s ease-out; } .bsm-darken-hover:hover { filter: brightness(0.8); } /* Blur to Focus on Hover (Image/Cover only) */ .bsm-blur-to-focus-hover img, .bsm-blur-to-focus-hover .wp-block-cover__image-background { filter: blur(3px); transition: filter 0.3s ease-out; } .bsm-blur-to-focus-hover:hover img, .bsm-blur-to-focus-hover:hover .wp-block-cover__image-background { filter: blur(0); } /* Subtle Rotate on Hover */ .bsm-rotate-hover { transition: transform 0.3s ease-out; } .bsm-rotate-hover:hover { transform: rotate(2deg); } /* Bounce on Hover */ .bsm-bounce-hover { transition: transform 0.25s ease-out; } .bsm-bounce-hover:hover { transform: translateY(-6px); } /* Shake on Hover */ .bsm-shake-hover:hover { animation: bsm-shake 0.4s ease-in-out; } /* ======================================== 4️⃣ VISIBILITY (Responsive + Print) Category: Non-exclusive (checkbox behavior) Applied to: All blocks (*) ======================================== */ @media (max-width: 767px) { .bsm-hide-mobile { display: none !important; } } @media (min-width: 768px) and (max-width: 1024px) { .bsm-hide-tablet { display: none !important; } } @media (min-width: 1025px) { .bsm-hide-desktop { display: none !important; } } @media print { .bsm-hide-print { display: none !important; } } /* ======================================== ACCESSIBILITY — prefers-reduced-motion ======================================== */ @media (prefers-reduced-motion: reduce) { /* Show animation blocks immediately, without motion */ .bsm-fade-in, .bsm-slide-up, .bsm-slide-down, .bsm-slide-left, .bsm-slide-right, .bsm-scale-in { opacity: 1 !important; transform: none !important; animation: none !important; } .bsm-zoom-hover, .bsm-rotate-hover, .bsm-bounce-hover, .bsm-brightness-hover, .bsm-darken-hover { transition: none !important; } .bsm-zoom-hover:hover, .bsm-rotate-hover:hover, .bsm-bounce-hover:hover { transform: none !important; } .bsm-shake-hover:hover { animation: none !important; } .bsm-brightness-hover:hover, .bsm-darken-hover:hover { filter: none !important; } .bsm-blur-to-focus-hover img, .bsm-blur-to-focus-hover:hover img, .bsm-blur-to-focus-hover .wp-block-cover__image-background, .bsm-blur-to-focus-hover:hover .wp-block-cover__image-background, .bsm-grayscale-to-color-hover img, .bsm-grayscale-to-color-hover:hover img, .bsm-grayscale-to-color-hover .wp-block-cover__image-background, .bsm-grayscale-to-color-hover:hover .wp-block-cover__image-background { filter: none !important; transition: none !important; } } /* ======================================== GPU ACCELERATION ======================================== */ .bsm-fade-in, .bsm-slide-up, .bsm-slide-down, .bsm-slide-left, .bsm-slide-right, .bsm-scale-in { will-change: transform, opacity; } .bsm-zoom-hover, .bsm-rotate-hover, .bsm-bounce-hover, .bsm-shake-hover { will-change: transform; } .bsm-grayscale-to-color-hover img, .bsm-grayscale-to-color-hover .wp-block-cover__image-background, .bsm-blur-to-focus-hover img, .bsm-blur-to-focus-hover .wp-block-cover__image-background, .bsm-brightness-hover, .bsm-darken-hover { will-change: filter; }