/**handles:geshmak-flipbox**/ /* בס״ד * GESHMAK FLIPBOX — frontend styles * * Structure: [data-geshmak-flipbox] is the wrapper; its two direct children * are [data-geshmak-flipbox-face="front"] and ="back", stacked on top of one * another (no extra wrapper div is available, so each face is positioned * absolutely and animated independently — see the plugin file's docblock for * the flip-rotation maths). * * Every structural/mechanical declaration below (position, inset, size, * transform, opacity, z-index, transition) is !important. This is not * fighting a setting an author would want to customise via the Style tab — * it's core plumbing the widget can't function without. Elementor's own * generated base styles for Div_Block apply a baseline layout (e.g. * position/display) to every container, including these two faces; without * !important that baseline can win the cascade (same specificity, later in * the page) and silently cancel the absolute stacking, which is exactly what * made the two faces render one after another instead of overlapping. * * The active transition is selected purely by the wrapper's * [data-geshmak-flipbox-style] value; the JS only ever toggles a single * ".geshmak-flipbox--flipped" class on the wrapper. * * --geshmak-flipbox-speed is set inline per-instance from the panel's speed * setting (in seconds, e.g. "0.6s"). The Cut style ignores it (transition: * none) so a cut is always instant regardless of the speed setting. * * EDITOR PREVIEW (bottom of this file): the rules above are all keyed off * data-geshmak-flipbox*, attributes this plugin injects via PHP — and that * PHP is confirmed (live DevTools, 2026-07) to never run for Elementor's own * editor canvas, which renders atomic elements from raw settings via its own * client-side JS instead. So none of this file's main rules apply at all * while editing. The separate editor-only block at the end targets * Elementor's OWN native `data-element_type` attribute (present regardless, * since it comes from get_type()) and uses plain `:hover`/`:focus-within` — * native browser behaviour needing no custom data to reach the DOM — to let * an author preview the back by hovering/focusing the flipbox while * building, without depending on anything this stylesheet's main rules or * geshmak-flipbox.js provide. * * DEVELOPED BY TOM GOLDSTEIN > GESHMAK! > https://geshmak.com.au/ */ /* --------------------------------------------------------------------------- * WRAPPER * ------------------------------------------------------------------------ */ [data-geshmak-flipbox] { position: relative !important; isolation: isolate; /* keep the stacked faces' z-index from leaking onto siblings */ overflow: hidden !important; /* Real size is measured and set inline by JS in both dimensions (faces * are absolutely positioned, so they can't contribute to this box's * size on their own) — these are only the pre-JS/no-JS fallback floor. */ min-width: 300px !important; min-height: 300px !important; } /* Shrink-wrap to content (width), don't stretch to fill a flex/grid parent's * CROSS axis (align-self/justify-self), and don't grow to fill a flex * parent's MAIN axis either (flex-grow) — deliberately NOT !important, * unlike the block above: a Width/Align Self/Flex Grow set in the editor's * Style tab must still be able to override these defaults. * * Confirmed via live DevTools inspection (2026-07): Elementor's own atomic * base styles set these same properties through compound selectors like * ".elementor .e-con { width: var(--width) }" / ".elementor-element * { align-self: var(--align-self) }" — a HIGHER specificity than a single * attribute selector, even though neither side is !important, so a plain * `[data-geshmak-flipbox] { width: fit-content }` rule can lose this fight * on specificity alone regardless of cascade order. Repeating the attribute * selector is a standard, valid way to match that specificity WITHOUT * !important (which would also block the Style tab's own override) and * without depending on Elementor's exact class names, which can change * between versions. * * flex-grow:0 (added after align-self/justify-self, same fix session): * align-self/justify-self only govern the CROSS axis of whichever flex/grid * parent this sits in — for two flipboxes side by side in a flex-direction: * row parent, width IS the MAIN axis instead, which align-self does nothing * for at all. Main-axis sizing is governed by flex-grow/flex-shrink/ * flex-basis; Elementor's own base styles likely default flex children to * flex-grow:1 (a lone item with nothing constraining it would then claim * all available width, exactly matching "each one expands to 100% instead * of sharing the row"). flex-shrink/flex-basis are left alone — the * JS-measured min-width (below) already provides the correct floor * regardless of what flex-basis resolves to. */ [data-geshmak-flipbox][data-geshmak-flipbox] { width: fit-content; align-self: flex-start; justify-self: start; /* the Grid-parent equivalent of align-self */ flex-grow: 0; /* don't fill a flex row's main axis */ } [data-geshmak-flipbox][data-geshmak-flipbox-style^="flip-"] { perspective: 1200px; } /* --------------------------------------------------------------------------- * FACES — base stacking * ------------------------------------------------------------------------ */ [data-geshmak-flipbox-face] { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; transition-property: transform, opacity !important; transition-duration: var(--geshmak-flipbox-speed, 0.6s) !important; transition-timing-function: ease-in-out !important; } [data-geshmak-flipbox-face="front"] { z-index: 2 !important; } [data-geshmak-flipbox-face="back"] { z-index: 1 !important; pointer-events: none; } [data-geshmak-flipbox].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { pointer-events: none; } [data-geshmak-flipbox].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { z-index: 2 !important; pointer-events: auto; } /* --------------------------------------------------------------------------- * CUT — instant swap, no transition * ------------------------------------------------------------------------ */ [data-geshmak-flipbox-style="cut"] [data-geshmak-flipbox-face] { transition: none !important; } [data-geshmak-flipbox-style="cut"] [data-geshmak-flipbox-face="back"] { opacity: 0 !important; } [data-geshmak-flipbox-style="cut"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { opacity: 0 !important; } [data-geshmak-flipbox-style="cut"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { opacity: 1 !important; } /* --------------------------------------------------------------------------- * FADE * ------------------------------------------------------------------------ */ [data-geshmak-flipbox-style="fade"] [data-geshmak-flipbox-face="back"] { opacity: 0 !important; } [data-geshmak-flipbox-style="fade"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { opacity: 0 !important; } [data-geshmak-flipbox-style="fade"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { opacity: 1 !important; } /* --------------------------------------------------------------------------- * FLIP — 3D, 4 directions * * Both faces rotate independently by the same 180deg delta, so their fixed * 180deg offset (which keeps one hidden via backface-visibility at all times) * is preserved throughout the animation — this looks identical to rotating a * single rigid card without needing an extra "flipper" wrapper div. Only the * rotation AXIS (Y for left/right, X for top/bottom) and the SIGN of the * front's target angle change per direction; the back face's resting/flipped * values are the same for every direction. * ------------------------------------------------------------------------ */ /* !important like every other structural declaration in this file (see the * header): this is the one thing keeping the rotated-away face from being * painted, so it must not be losable to an atomic base style. */ [data-geshmak-flipbox-style^="flip-"] [data-geshmak-flipbox-face] { backface-visibility: hidden !important; } [data-geshmak-flipbox-style="flip-left"] [data-geshmak-flipbox-face="front"], [data-geshmak-flipbox-style="flip-right"] [data-geshmak-flipbox-face="front"] { transform: rotateY(0deg) !important; } [data-geshmak-flipbox-style="flip-left"] [data-geshmak-flipbox-face="back"], [data-geshmak-flipbox-style="flip-right"] [data-geshmak-flipbox-face="back"] { transform: rotateY(180deg) !important; } [data-geshmak-flipbox-style="flip-left"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: rotateY(-180deg) !important; } [data-geshmak-flipbox-style="flip-right"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: rotateY(180deg) !important; } [data-geshmak-flipbox-style^="flip-"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: rotateY(0deg) !important; } [data-geshmak-flipbox-style="flip-top"] [data-geshmak-flipbox-face="front"], [data-geshmak-flipbox-style="flip-bottom"] [data-geshmak-flipbox-face="front"] { transform: rotateX(0deg) !important; } [data-geshmak-flipbox-style="flip-top"] [data-geshmak-flipbox-face="back"], [data-geshmak-flipbox-style="flip-bottom"] [data-geshmak-flipbox-face="back"] { transform: rotateX(180deg) !important; } [data-geshmak-flipbox-style="flip-top"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: rotateX(-180deg) !important; } [data-geshmak-flipbox-style="flip-bottom"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: rotateX(180deg) !important; } [data-geshmak-flipbox-style="flip-top"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"], [data-geshmak-flipbox-style="flip-bottom"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: rotateX(0deg) !important; } /* --------------------------------------------------------------------------- * PUSH — both faces travel together, 4 directions * ------------------------------------------------------------------------ */ [data-geshmak-flipbox-style="push-left"] [data-geshmak-flipbox-face="front"] { transform: translateX(0) !important; } [data-geshmak-flipbox-style="push-left"] [data-geshmak-flipbox-face="back"] { transform: translateX(100%) !important; } [data-geshmak-flipbox-style="push-left"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: translateX(-100%) !important; } [data-geshmak-flipbox-style="push-left"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateX(0) !important; } [data-geshmak-flipbox-style="push-right"] [data-geshmak-flipbox-face="front"] { transform: translateX(0) !important; } [data-geshmak-flipbox-style="push-right"] [data-geshmak-flipbox-face="back"] { transform: translateX(-100%) !important; } [data-geshmak-flipbox-style="push-right"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: translateX(100%) !important; } [data-geshmak-flipbox-style="push-right"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateX(0) !important; } [data-geshmak-flipbox-style="push-top"] [data-geshmak-flipbox-face="front"] { transform: translateY(0) !important; } [data-geshmak-flipbox-style="push-top"] [data-geshmak-flipbox-face="back"] { transform: translateY(100%) !important; } [data-geshmak-flipbox-style="push-top"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: translateY(-100%) !important; } [data-geshmak-flipbox-style="push-top"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateY(0) !important; } [data-geshmak-flipbox-style="push-bottom"] [data-geshmak-flipbox-face="front"] { transform: translateY(0) !important; } [data-geshmak-flipbox-style="push-bottom"] [data-geshmak-flipbox-face="back"] { transform: translateY(-100%) !important; } [data-geshmak-flipbox-style="push-bottom"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { transform: translateY(100%) !important; } [data-geshmak-flipbox-style="push-bottom"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateY(0) !important; } /* --------------------------------------------------------------------------- * SLIDE — front stays put, back slides in over it like a curtain, 4 directions * ------------------------------------------------------------------------ */ [data-geshmak-flipbox-style^="slide-"] [data-geshmak-flipbox-face="front"] { transform: none !important; transition: none !important; } [data-geshmak-flipbox-style^="slide-"] [data-geshmak-flipbox-face="back"] { z-index: 3 !important; pointer-events: none; } [data-geshmak-flipbox-style^="slide-"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { pointer-events: auto; } [data-geshmak-flipbox-style="slide-left"] [data-geshmak-flipbox-face="back"] { transform: translateX(100%) !important; } [data-geshmak-flipbox-style="slide-left"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateX(0) !important; } [data-geshmak-flipbox-style="slide-right"] [data-geshmak-flipbox-face="back"] { transform: translateX(-100%) !important; } [data-geshmak-flipbox-style="slide-right"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateX(0) !important; } [data-geshmak-flipbox-style="slide-top"] [data-geshmak-flipbox-face="back"] { transform: translateY(100%) !important; } [data-geshmak-flipbox-style="slide-top"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateY(0) !important; } [data-geshmak-flipbox-style="slide-bottom"] [data-geshmak-flipbox-face="back"] { transform: translateY(-100%) !important; } [data-geshmak-flipbox-style="slide-bottom"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { transform: translateY(0) !important; } /* --------------------------------------------------------------------------- * ZOOM — in / out * ------------------------------------------------------------------------ */ [data-geshmak-flipbox-style="zoom-in"] [data-geshmak-flipbox-face="back"] { opacity: 0 !important; transform: scale(0.5) !important; } [data-geshmak-flipbox-style="zoom-in"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { opacity: 0 !important; transform: scale(1.5) !important; } [data-geshmak-flipbox-style="zoom-in"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { opacity: 1 !important; transform: scale(1) !important; } [data-geshmak-flipbox-style="zoom-out"] [data-geshmak-flipbox-face="back"] { opacity: 0 !important; transform: scale(1.5) !important; } [data-geshmak-flipbox-style="zoom-out"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { opacity: 0 !important; transform: scale(0.5) !important; } [data-geshmak-flipbox-style="zoom-out"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { opacity: 1 !important; transform: scale(1) !important; } /* --------------------------------------------------------------------------- * DISSOLVE — pixel-grid clip (the front face disintegrates into a 10x10 grid * of cells that vanish in a scattered order, revealing the back beneath). * * Technique: the front face is clipped by clip-path: shape(), animated through * keyframes. Each keyframe is a COMPLETE, LITERAL shape() listing only the grid * cells still present at that step; the scattered removal order makes ~10 cells * vanish per step. Because consecutive keyframes have different cell counts the * clip can't interpolate, so it steps discretely — the pixel-pop look. Grid is * sized in % so it scales to any flipbox. Adapted from the CodePen * matthewmorete "Pixel Grid - clip-path + shape()". * * IMPORTANT — why literal keyframes, not the CodePen's custom-property "space * toggle": a var() INSIDE shape() (e.g. `shape(..., var(--cell) close)`) is * mis-parsed in current Chromium — the whole style rule fails to close and * silently swallows the rules that follow it, so the animation never applied * and the transition showed as an instant cut (verified live, 2026-07). shape() * itself and var() elsewhere both work; only var() *within* shape() is broken. * So every shape() here is fully literal, with no var() inside it. * * clip-path: shape() is new (Chrome 128+, Safari 18.4+, not yet Firefox), so * everything real is inside @supports; the un-guarded rules right below give a * plain Fade fallback where shape() is unavailable, and a reduced-motion block * collapses it to an instant swap. The animation plays forwards on flip and, to * reassemble, the SAME keyframes are played in reverse — armed only after the * first flip (.geshmak-flipbox--activated, set by the JS) so it never runs on * page load. The resting (un-flipped) front needs no clip at all — no clip-path * means fully visible, which is exactly the pre-dissolve state. * ------------------------------------------------------------------------ */ /* Fallback (no shape() support): behave exactly like Fade. */ [data-geshmak-flipbox-style="dissolve"] [data-geshmak-flipbox-face="back"] { opacity: 0 !important; } [data-geshmak-flipbox-style="dissolve"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { opacity: 0 !important; } [data-geshmak-flipbox-style="dissolve"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { opacity: 1 !important; } @supports ( clip-path: shape( from 0% 0%, line to 100% 0% ) ) { /* shape() is available: the clip does the work, so both faces stay fully * opaque and the fallback opacity toggles above are neutralised. */ [data-geshmak-flipbox-style="dissolve"] [data-geshmak-flipbox-face="back"], [data-geshmak-flipbox-style="dissolve"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { opacity: 1 !important; } /* Flip: dissolve the front away (front -> gone -> back shows through). */ [data-geshmak-flipbox-style="dissolve"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { animation: geshmak-flipbox-dissolve var(--geshmak-flipbox-speed, 0.6s) steps(1, end) forwards; } /* Un-flip (only after the first flip): reassemble by playing it in reverse. */ [data-geshmak-flipbox-style="dissolve"].geshmak-flipbox--activated:not( .geshmak-flipbox--flipped ) [data-geshmak-flipbox-face="front"] { animation: geshmak-flipbox-dissolve var(--geshmak-flipbox-speed, 0.6s) steps(1, end) reverse forwards; } @keyframes geshmak-flipbox-dissolve { 0% { clip-path: shape(from 0% 0%, move to 0% 0%, line to 10% 0%, line to 10% 10%, line to 0% 10%, close, move to 10% 0%, line to 20% 0%, line to 20% 10%, line to 10% 10%, close, move to 20% 0%, line to 30% 0%, line to 30% 10%, line to 20% 10%, close, move to 30% 0%, line to 40% 0%, line to 40% 10%, line to 30% 10%, close, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 60% 0%, line to 70% 0%, line to 70% 10%, line to 60% 10%, close, move to 70% 0%, line to 80% 0%, line to 80% 10%, line to 70% 10%, close, move to 80% 0%, line to 90% 0%, line to 90% 10%, line to 80% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 0% 10%, line to 10% 10%, line to 10% 20%, line to 0% 20%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 20% 10%, line to 30% 10%, line to 30% 20%, line to 20% 20%, close, move to 30% 10%, line to 40% 10%, line to 40% 20%, line to 30% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 50% 10%, line to 60% 10%, line to 60% 20%, line to 50% 20%, close, move to 60% 10%, line to 70% 10%, line to 70% 20%, line to 60% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 80% 10%, line to 90% 10%, line to 90% 20%, line to 80% 20%, close, move to 90% 10%, line to 100% 10%, line to 100% 20%, line to 90% 20%, close, move to 0% 20%, line to 10% 20%, line to 10% 30%, line to 0% 30%, close, move to 10% 20%, line to 20% 20%, line to 20% 30%, line to 10% 30%, close, move to 20% 20%, line to 30% 20%, line to 30% 30%, line to 20% 30%, close, move to 30% 20%, line to 40% 20%, line to 40% 30%, line to 30% 30%, close, move to 40% 20%, line to 50% 20%, line to 50% 30%, line to 40% 30%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 60% 20%, line to 70% 20%, line to 70% 30%, line to 60% 30%, close, move to 70% 20%, line to 80% 20%, line to 80% 30%, line to 70% 30%, close, move to 80% 20%, line to 90% 20%, line to 90% 30%, line to 80% 30%, close, move to 90% 20%, line to 100% 20%, line to 100% 30%, line to 90% 30%, close, move to 0% 30%, line to 10% 30%, line to 10% 40%, line to 0% 40%, close, move to 10% 30%, line to 20% 30%, line to 20% 40%, line to 10% 40%, close, move to 20% 30%, line to 30% 30%, line to 30% 40%, line to 20% 40%, close, move to 30% 30%, line to 40% 30%, line to 40% 40%, line to 30% 40%, close, move to 40% 30%, line to 50% 30%, line to 50% 40%, line to 40% 40%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 60% 30%, line to 70% 30%, line to 70% 40%, line to 60% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 80% 30%, line to 90% 30%, line to 90% 40%, line to 80% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 0% 40%, line to 10% 40%, line to 10% 50%, line to 0% 50%, close, move to 10% 40%, line to 20% 40%, line to 20% 50%, line to 10% 50%, close, move to 20% 40%, line to 30% 40%, line to 30% 50%, line to 20% 50%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 40% 40%, line to 50% 40%, line to 50% 50%, line to 40% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 60% 40%, line to 70% 40%, line to 70% 50%, line to 60% 50%, close, move to 70% 40%, line to 80% 40%, line to 80% 50%, line to 70% 50%, close, move to 80% 40%, line to 90% 40%, line to 90% 50%, line to 80% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 20% 50%, line to 30% 50%, line to 30% 60%, line to 20% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 40% 50%, line to 50% 50%, line to 50% 60%, line to 40% 60%, close, move to 50% 50%, line to 60% 50%, line to 60% 60%, line to 50% 60%, close, move to 60% 50%, line to 70% 50%, line to 70% 60%, line to 60% 60%, close, move to 70% 50%, line to 80% 50%, line to 80% 60%, line to 70% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 0% 60%, line to 10% 60%, line to 10% 70%, line to 0% 70%, close, move to 10% 60%, line to 20% 60%, line to 20% 70%, line to 10% 70%, close, move to 20% 60%, line to 30% 60%, line to 30% 70%, line to 20% 70%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 40% 60%, line to 50% 60%, line to 50% 70%, line to 40% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 60% 60%, line to 70% 60%, line to 70% 70%, line to 60% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 80% 60%, line to 90% 60%, line to 90% 70%, line to 80% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 0% 70%, line to 10% 70%, line to 10% 80%, line to 0% 80%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 20% 70%, line to 30% 70%, line to 30% 80%, line to 20% 80%, close, move to 30% 70%, line to 40% 70%, line to 40% 80%, line to 30% 80%, close, move to 40% 70%, line to 50% 70%, line to 50% 80%, line to 40% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 60% 70%, line to 70% 70%, line to 70% 80%, line to 60% 80%, close, move to 70% 70%, line to 80% 70%, line to 80% 80%, line to 70% 80%, close, move to 80% 70%, line to 90% 70%, line to 90% 80%, line to 80% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 0% 80%, line to 10% 80%, line to 10% 90%, line to 0% 90%, close, move to 10% 80%, line to 20% 80%, line to 20% 90%, line to 10% 90%, close, move to 20% 80%, line to 30% 80%, line to 30% 90%, line to 20% 90%, close, move to 30% 80%, line to 40% 80%, line to 40% 90%, line to 30% 90%, close, move to 40% 80%, line to 50% 80%, line to 50% 90%, line to 40% 90%, close, move to 50% 80%, line to 60% 80%, line to 60% 90%, line to 50% 90%, close, move to 60% 80%, line to 70% 80%, line to 70% 90%, line to 60% 90%, close, move to 70% 80%, line to 80% 80%, line to 80% 90%, line to 70% 90%, close, move to 80% 80%, line to 90% 80%, line to 90% 90%, line to 80% 90%, close, move to 90% 80%, line to 100% 80%, line to 100% 90%, line to 90% 90%, close, move to 0% 90%, line to 10% 90%, line to 10% 100%, line to 0% 100%, close, move to 10% 90%, line to 20% 90%, line to 20% 100%, line to 10% 100%, close, move to 20% 90%, line to 30% 90%, line to 30% 100%, line to 20% 100%, close, move to 30% 90%, line to 40% 90%, line to 40% 100%, line to 30% 100%, close, move to 40% 90%, line to 50% 90%, line to 50% 100%, line to 40% 100%, close, move to 50% 90%, line to 60% 90%, line to 60% 100%, line to 50% 100%, close, move to 60% 90%, line to 70% 90%, line to 70% 100%, line to 60% 100%, close, move to 70% 90%, line to 80% 90%, line to 80% 100%, line to 70% 100%, close, move to 80% 90%, line to 90% 90%, line to 90% 100%, line to 80% 100%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 10% { clip-path: shape(from 0% 0%, move to 0% 0%, line to 10% 0%, line to 10% 10%, line to 0% 10%, close, move to 10% 0%, line to 20% 0%, line to 20% 10%, line to 10% 10%, close, move to 20% 0%, line to 30% 0%, line to 30% 10%, line to 20% 10%, close, move to 30% 0%, line to 40% 0%, line to 40% 10%, line to 30% 10%, close, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 60% 0%, line to 70% 0%, line to 70% 10%, line to 60% 10%, close, move to 70% 0%, line to 80% 0%, line to 80% 10%, line to 70% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 0% 10%, line to 10% 10%, line to 10% 20%, line to 0% 20%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 20% 10%, line to 30% 10%, line to 30% 20%, line to 20% 20%, close, move to 30% 10%, line to 40% 10%, line to 40% 20%, line to 30% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 50% 10%, line to 60% 10%, line to 60% 20%, line to 50% 20%, close, move to 60% 10%, line to 70% 10%, line to 70% 20%, line to 60% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 90% 10%, line to 100% 10%, line to 100% 20%, line to 90% 20%, close, move to 0% 20%, line to 10% 20%, line to 10% 30%, line to 0% 30%, close, move to 10% 20%, line to 20% 20%, line to 20% 30%, line to 10% 30%, close, move to 20% 20%, line to 30% 20%, line to 30% 30%, line to 20% 30%, close, move to 30% 20%, line to 40% 20%, line to 40% 30%, line to 30% 30%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 60% 20%, line to 70% 20%, line to 70% 30%, line to 60% 30%, close, move to 70% 20%, line to 80% 20%, line to 80% 30%, line to 70% 30%, close, move to 80% 20%, line to 90% 20%, line to 90% 30%, line to 80% 30%, close, move to 90% 20%, line to 100% 20%, line to 100% 30%, line to 90% 30%, close, move to 10% 30%, line to 20% 30%, line to 20% 40%, line to 10% 40%, close, move to 20% 30%, line to 30% 30%, line to 30% 40%, line to 20% 40%, close, move to 30% 30%, line to 40% 30%, line to 40% 40%, line to 30% 40%, close, move to 40% 30%, line to 50% 30%, line to 50% 40%, line to 40% 40%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 60% 30%, line to 70% 30%, line to 70% 40%, line to 60% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 80% 30%, line to 90% 30%, line to 90% 40%, line to 80% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 0% 40%, line to 10% 40%, line to 10% 50%, line to 0% 50%, close, move to 10% 40%, line to 20% 40%, line to 20% 50%, line to 10% 50%, close, move to 20% 40%, line to 30% 40%, line to 30% 50%, line to 20% 50%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 40% 40%, line to 50% 40%, line to 50% 50%, line to 40% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 60% 40%, line to 70% 40%, line to 70% 50%, line to 60% 50%, close, move to 70% 40%, line to 80% 40%, line to 80% 50%, line to 70% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 20% 50%, line to 30% 50%, line to 30% 60%, line to 20% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 40% 50%, line to 50% 50%, line to 50% 60%, line to 40% 60%, close, move to 50% 50%, line to 60% 50%, line to 60% 60%, line to 50% 60%, close, move to 60% 50%, line to 70% 50%, line to 70% 60%, line to 60% 60%, close, move to 70% 50%, line to 80% 50%, line to 80% 60%, line to 70% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 10% 60%, line to 20% 60%, line to 20% 70%, line to 10% 70%, close, move to 20% 60%, line to 30% 60%, line to 30% 70%, line to 20% 70%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 60% 60%, line to 70% 60%, line to 70% 70%, line to 60% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 20% 70%, line to 30% 70%, line to 30% 80%, line to 20% 80%, close, move to 30% 70%, line to 40% 70%, line to 40% 80%, line to 30% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 70% 70%, line to 80% 70%, line to 80% 80%, line to 70% 80%, close, move to 80% 70%, line to 90% 70%, line to 90% 80%, line to 80% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 10% 80%, line to 20% 80%, line to 20% 90%, line to 10% 90%, close, move to 20% 80%, line to 30% 80%, line to 30% 90%, line to 20% 90%, close, move to 30% 80%, line to 40% 80%, line to 40% 90%, line to 30% 90%, close, move to 40% 80%, line to 50% 80%, line to 50% 90%, line to 40% 90%, close, move to 50% 80%, line to 60% 80%, line to 60% 90%, line to 50% 90%, close, move to 60% 80%, line to 70% 80%, line to 70% 90%, line to 60% 90%, close, move to 70% 80%, line to 80% 80%, line to 80% 90%, line to 70% 90%, close, move to 90% 80%, line to 100% 80%, line to 100% 90%, line to 90% 90%, close, move to 0% 90%, line to 10% 90%, line to 10% 100%, line to 0% 100%, close, move to 10% 90%, line to 20% 90%, line to 20% 100%, line to 10% 100%, close, move to 20% 90%, line to 30% 90%, line to 30% 100%, line to 20% 100%, close, move to 30% 90%, line to 40% 90%, line to 40% 100%, line to 30% 100%, close, move to 50% 90%, line to 60% 90%, line to 60% 100%, line to 50% 100%, close, move to 70% 90%, line to 80% 90%, line to 80% 100%, line to 70% 100%, close, move to 80% 90%, line to 90% 90%, line to 90% 100%, line to 80% 100%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 20% { clip-path: shape(from 0% 0%, move to 0% 0%, line to 10% 0%, line to 10% 10%, line to 0% 10%, close, move to 10% 0%, line to 20% 0%, line to 20% 10%, line to 10% 10%, close, move to 20% 0%, line to 30% 0%, line to 30% 10%, line to 20% 10%, close, move to 30% 0%, line to 40% 0%, line to 40% 10%, line to 30% 10%, close, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 60% 0%, line to 70% 0%, line to 70% 10%, line to 60% 10%, close, move to 70% 0%, line to 80% 0%, line to 80% 10%, line to 70% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 0% 10%, line to 10% 10%, line to 10% 20%, line to 0% 20%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 20% 10%, line to 30% 10%, line to 30% 20%, line to 20% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 50% 10%, line to 60% 10%, line to 60% 20%, line to 50% 20%, close, move to 60% 10%, line to 70% 10%, line to 70% 20%, line to 60% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 0% 20%, line to 10% 20%, line to 10% 30%, line to 0% 30%, close, move to 10% 20%, line to 20% 20%, line to 20% 30%, line to 10% 30%, close, move to 20% 20%, line to 30% 20%, line to 30% 30%, line to 20% 30%, close, move to 30% 20%, line to 40% 20%, line to 40% 30%, line to 30% 30%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 60% 20%, line to 70% 20%, line to 70% 30%, line to 60% 30%, close, move to 70% 20%, line to 80% 20%, line to 80% 30%, line to 70% 30%, close, move to 80% 20%, line to 90% 20%, line to 90% 30%, line to 80% 30%, close, move to 90% 20%, line to 100% 20%, line to 100% 30%, line to 90% 30%, close, move to 10% 30%, line to 20% 30%, line to 20% 40%, line to 10% 40%, close, move to 20% 30%, line to 30% 30%, line to 30% 40%, line to 20% 40%, close, move to 30% 30%, line to 40% 30%, line to 40% 40%, line to 30% 40%, close, move to 40% 30%, line to 50% 30%, line to 50% 40%, line to 40% 40%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 60% 30%, line to 70% 30%, line to 70% 40%, line to 60% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 80% 30%, line to 90% 30%, line to 90% 40%, line to 80% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 0% 40%, line to 10% 40%, line to 10% 50%, line to 0% 50%, close, move to 20% 40%, line to 30% 40%, line to 30% 50%, line to 20% 50%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 40% 40%, line to 50% 40%, line to 50% 50%, line to 40% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 60% 40%, line to 70% 40%, line to 70% 50%, line to 60% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 20% 50%, line to 30% 50%, line to 30% 60%, line to 20% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 40% 50%, line to 50% 50%, line to 50% 60%, line to 40% 60%, close, move to 50% 50%, line to 60% 50%, line to 60% 60%, line to 50% 60%, close, move to 60% 50%, line to 70% 50%, line to 70% 60%, line to 60% 60%, close, move to 70% 50%, line to 80% 50%, line to 80% 60%, line to 70% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 10% 60%, line to 20% 60%, line to 20% 70%, line to 10% 70%, close, move to 20% 60%, line to 30% 60%, line to 30% 70%, line to 20% 70%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 60% 60%, line to 70% 60%, line to 70% 70%, line to 60% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 20% 70%, line to 30% 70%, line to 30% 80%, line to 20% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 80% 70%, line to 90% 70%, line to 90% 80%, line to 80% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 10% 80%, line to 20% 80%, line to 20% 90%, line to 10% 90%, close, move to 20% 80%, line to 30% 80%, line to 30% 90%, line to 20% 90%, close, move to 30% 80%, line to 40% 80%, line to 40% 90%, line to 30% 90%, close, move to 40% 80%, line to 50% 80%, line to 50% 90%, line to 40% 90%, close, move to 50% 80%, line to 60% 80%, line to 60% 90%, line to 50% 90%, close, move to 60% 80%, line to 70% 80%, line to 70% 90%, line to 60% 90%, close, move to 90% 80%, line to 100% 80%, line to 100% 90%, line to 90% 90%, close, move to 0% 90%, line to 10% 90%, line to 10% 100%, line to 0% 100%, close, move to 20% 90%, line to 30% 90%, line to 30% 100%, line to 20% 100%, close, move to 30% 90%, line to 40% 90%, line to 40% 100%, line to 30% 100%, close, move to 50% 90%, line to 60% 90%, line to 60% 100%, line to 50% 100%, close, move to 70% 90%, line to 80% 90%, line to 80% 100%, line to 70% 100%, close, move to 80% 90%, line to 90% 90%, line to 90% 100%, line to 80% 100%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 30% { clip-path: shape(from 0% 0%, move to 0% 0%, line to 10% 0%, line to 10% 10%, line to 0% 10%, close, move to 10% 0%, line to 20% 0%, line to 20% 10%, line to 10% 10%, close, move to 20% 0%, line to 30% 0%, line to 30% 10%, line to 20% 10%, close, move to 30% 0%, line to 40% 0%, line to 40% 10%, line to 30% 10%, close, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 70% 0%, line to 80% 0%, line to 80% 10%, line to 70% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 0% 10%, line to 10% 10%, line to 10% 20%, line to 0% 20%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 50% 10%, line to 60% 10%, line to 60% 20%, line to 50% 20%, close, move to 60% 10%, line to 70% 10%, line to 70% 20%, line to 60% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 10% 20%, line to 20% 20%, line to 20% 30%, line to 10% 30%, close, move to 20% 20%, line to 30% 20%, line to 30% 30%, line to 20% 30%, close, move to 30% 20%, line to 40% 20%, line to 40% 30%, line to 30% 30%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 60% 20%, line to 70% 20%, line to 70% 30%, line to 60% 30%, close, move to 70% 20%, line to 80% 20%, line to 80% 30%, line to 70% 30%, close, move to 80% 20%, line to 90% 20%, line to 90% 30%, line to 80% 30%, close, move to 90% 20%, line to 100% 20%, line to 100% 30%, line to 90% 30%, close, move to 10% 30%, line to 20% 30%, line to 20% 40%, line to 10% 40%, close, move to 20% 30%, line to 30% 30%, line to 30% 40%, line to 20% 40%, close, move to 30% 30%, line to 40% 30%, line to 40% 40%, line to 30% 40%, close, move to 40% 30%, line to 50% 30%, line to 50% 40%, line to 40% 40%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 60% 30%, line to 70% 30%, line to 70% 40%, line to 60% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 80% 30%, line to 90% 30%, line to 90% 40%, line to 80% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 20% 40%, line to 30% 40%, line to 30% 50%, line to 20% 50%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 50% 50%, line to 60% 50%, line to 60% 60%, line to 50% 60%, close, move to 60% 50%, line to 70% 50%, line to 70% 60%, line to 60% 60%, close, move to 70% 50%, line to 80% 50%, line to 80% 60%, line to 70% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 10% 60%, line to 20% 60%, line to 20% 70%, line to 10% 70%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 60% 60%, line to 70% 60%, line to 70% 70%, line to 60% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 20% 70%, line to 30% 70%, line to 30% 80%, line to 20% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 80% 70%, line to 90% 70%, line to 90% 80%, line to 80% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 10% 80%, line to 20% 80%, line to 20% 90%, line to 10% 90%, close, move to 20% 80%, line to 30% 80%, line to 30% 90%, line to 20% 90%, close, move to 30% 80%, line to 40% 80%, line to 40% 90%, line to 30% 90%, close, move to 40% 80%, line to 50% 80%, line to 50% 90%, line to 40% 90%, close, move to 50% 80%, line to 60% 80%, line to 60% 90%, line to 50% 90%, close, move to 90% 80%, line to 100% 80%, line to 100% 90%, line to 90% 90%, close, move to 0% 90%, line to 10% 90%, line to 10% 100%, line to 0% 100%, close, move to 30% 90%, line to 40% 90%, line to 40% 100%, line to 30% 100%, close, move to 50% 90%, line to 60% 90%, line to 60% 100%, line to 50% 100%, close, move to 70% 90%, line to 80% 90%, line to 80% 100%, line to 70% 100%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 40% { clip-path: shape(from 0% 0%, move to 0% 0%, line to 10% 0%, line to 10% 10%, line to 0% 10%, close, move to 10% 0%, line to 20% 0%, line to 20% 10%, line to 10% 10%, close, move to 20% 0%, line to 30% 0%, line to 30% 10%, line to 20% 10%, close, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 0% 10%, line to 10% 10%, line to 10% 20%, line to 0% 20%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 50% 10%, line to 60% 10%, line to 60% 20%, line to 50% 20%, close, move to 60% 10%, line to 70% 10%, line to 70% 20%, line to 60% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 10% 20%, line to 20% 20%, line to 20% 30%, line to 10% 30%, close, move to 20% 20%, line to 30% 20%, line to 30% 30%, line to 20% 30%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 60% 20%, line to 70% 20%, line to 70% 30%, line to 60% 30%, close, move to 70% 20%, line to 80% 20%, line to 80% 30%, line to 70% 30%, close, move to 80% 20%, line to 90% 20%, line to 90% 30%, line to 80% 30%, close, move to 90% 20%, line to 100% 20%, line to 100% 30%, line to 90% 30%, close, move to 20% 30%, line to 30% 30%, line to 30% 40%, line to 20% 40%, close, move to 40% 30%, line to 50% 30%, line to 50% 40%, line to 40% 40%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 60% 30%, line to 70% 30%, line to 70% 40%, line to 60% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 80% 30%, line to 90% 30%, line to 90% 40%, line to 80% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 20% 40%, line to 30% 40%, line to 30% 50%, line to 20% 50%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 50% 50%, line to 60% 50%, line to 60% 60%, line to 50% 60%, close, move to 60% 50%, line to 70% 50%, line to 70% 60%, line to 60% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 10% 60%, line to 20% 60%, line to 20% 70%, line to 10% 70%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 60% 60%, line to 70% 60%, line to 70% 70%, line to 60% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 20% 70%, line to 30% 70%, line to 30% 80%, line to 20% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 80% 70%, line to 90% 70%, line to 90% 80%, line to 80% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 10% 80%, line to 20% 80%, line to 20% 90%, line to 10% 90%, close, move to 20% 80%, line to 30% 80%, line to 30% 90%, line to 20% 90%, close, move to 30% 80%, line to 40% 80%, line to 40% 90%, line to 30% 90%, close, move to 40% 80%, line to 50% 80%, line to 50% 90%, line to 40% 90%, close, move to 90% 80%, line to 100% 80%, line to 100% 90%, line to 90% 90%, close, move to 0% 90%, line to 10% 90%, line to 10% 100%, line to 0% 100%, close, move to 30% 90%, line to 40% 90%, line to 40% 100%, line to 30% 100%, close, move to 50% 90%, line to 60% 90%, line to 60% 100%, line to 50% 100%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 50% { clip-path: shape(from 0% 0%, move to 0% 0%, line to 10% 0%, line to 10% 10%, line to 0% 10%, close, move to 10% 0%, line to 20% 0%, line to 20% 10%, line to 10% 10%, close, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 50% 10%, line to 60% 10%, line to 60% 20%, line to 50% 20%, close, move to 60% 10%, line to 70% 10%, line to 70% 20%, line to 60% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 10% 20%, line to 20% 20%, line to 20% 30%, line to 10% 30%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 60% 20%, line to 70% 20%, line to 70% 30%, line to 60% 30%, close, move to 70% 20%, line to 80% 20%, line to 80% 30%, line to 70% 30%, close, move to 90% 20%, line to 100% 20%, line to 100% 30%, line to 90% 30%, close, move to 40% 30%, line to 50% 30%, line to 50% 40%, line to 40% 40%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 80% 30%, line to 90% 30%, line to 90% 40%, line to 80% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 20% 40%, line to 30% 40%, line to 30% 50%, line to 20% 50%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 50% 50%, line to 60% 50%, line to 60% 60%, line to 50% 60%, close, move to 60% 50%, line to 70% 50%, line to 70% 60%, line to 60% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 10% 60%, line to 20% 60%, line to 20% 70%, line to 10% 70%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 60% 60%, line to 70% 60%, line to 70% 70%, line to 60% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 20% 70%, line to 30% 70%, line to 30% 80%, line to 20% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 80% 70%, line to 90% 70%, line to 90% 80%, line to 80% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 10% 80%, line to 20% 80%, line to 20% 90%, line to 10% 90%, close, move to 30% 80%, line to 40% 80%, line to 40% 90%, line to 30% 90%, close, move to 90% 80%, line to 100% 80%, line to 100% 90%, line to 90% 90%, close, move to 30% 90%, line to 40% 90%, line to 40% 100%, line to 30% 100%, close, move to 50% 90%, line to 60% 90%, line to 60% 100%, line to 50% 100%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 60% { clip-path: shape(from 0% 0%, move to 0% 0%, line to 10% 0%, line to 10% 10%, line to 0% 10%, close, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 60% 10%, line to 70% 10%, line to 70% 20%, line to 60% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 60% 20%, line to 70% 20%, line to 70% 30%, line to 60% 30%, close, move to 40% 30%, line to 50% 30%, line to 50% 40%, line to 40% 40%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 80% 30%, line to 90% 30%, line to 90% 40%, line to 80% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 20% 40%, line to 30% 40%, line to 30% 50%, line to 20% 50%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 60% 50%, line to 70% 50%, line to 70% 60%, line to 60% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 60% 60%, line to 70% 60%, line to 70% 70%, line to 60% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 20% 70%, line to 30% 70%, line to 30% 80%, line to 20% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 80% 70%, line to 90% 70%, line to 90% 80%, line to 80% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 70% { clip-path: shape(from 0% 0%, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 90% 0%, line to 100% 0%, line to 100% 10%, line to 90% 10%, close, move to 10% 10%, line to 20% 10%, line to 20% 20%, line to 10% 20%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 70% 10%, line to 80% 10%, line to 80% 20%, line to 70% 20%, close, move to 50% 20%, line to 60% 20%, line to 60% 30%, line to 50% 30%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 70% 30%, line to 80% 30%, line to 80% 40%, line to 70% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 90% 40%, line to 100% 40%, line to 100% 50%, line to 90% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 10% 50%, line to 20% 50%, line to 20% 60%, line to 10% 60%, close, move to 30% 50%, line to 40% 50%, line to 40% 60%, line to 30% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 90% 50%, line to 100% 50%, line to 100% 60%, line to 90% 60%, close, move to 30% 60%, line to 40% 60%, line to 40% 70%, line to 30% 70%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close, move to 70% 60%, line to 80% 60%, line to 80% 70%, line to 70% 70%, close, move to 90% 60%, line to 100% 60%, line to 100% 70%, line to 90% 70%, close, move to 10% 70%, line to 20% 70%, line to 20% 80%, line to 10% 80%, close, move to 50% 70%, line to 60% 70%, line to 60% 80%, line to 50% 80%, close, move to 90% 70%, line to 100% 70%, line to 100% 80%, line to 90% 80%, close, move to 90% 90%, line to 100% 90%, line to 100% 100%, line to 90% 100%, close); } 80% { clip-path: shape(from 0% 0%, move to 40% 0%, line to 50% 0%, line to 50% 10%, line to 40% 10%, close, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 40% 10%, line to 50% 10%, line to 50% 20%, line to 40% 20%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 0% 50%, line to 10% 50%, line to 10% 60%, line to 0% 60%, close, move to 80% 50%, line to 90% 50%, line to 90% 60%, line to 80% 60%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close); } 90% { clip-path: shape(from 0% 0%, move to 50% 0%, line to 60% 0%, line to 60% 10%, line to 50% 10%, close, move to 50% 30%, line to 60% 30%, line to 60% 40%, line to 50% 40%, close, move to 90% 30%, line to 100% 30%, line to 100% 40%, line to 90% 40%, close, move to 30% 40%, line to 40% 40%, line to 40% 50%, line to 30% 50%, close, move to 50% 40%, line to 60% 40%, line to 60% 50%, line to 50% 50%, close, move to 50% 60%, line to 60% 60%, line to 60% 70%, line to 50% 70%, close); } 100% { clip-path: shape(from 0% 0%); } } /* Reduced motion: no disintegration — swap instantly (like Cut). */ @media ( prefers-reduced-motion: reduce ) { [data-geshmak-flipbox-style="dissolve"] [data-geshmak-flipbox-face="front"] { animation: none !important; clip-path: none !important; } [data-geshmak-flipbox-style="dissolve"] [data-geshmak-flipbox-face="back"] { opacity: 0 !important; } [data-geshmak-flipbox-style="dissolve"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="front"] { opacity: 0 !important; } [data-geshmak-flipbox-style="dissolve"].geshmak-flipbox--flipped [data-geshmak-flipbox-face="back"] { opacity: 1 !important; } } } /* --------------------------------------------------------------------------- * EDITOR PREVIEW — hover/focus to see the back while building * * Everything above this point is inert while editing (see file docblock). * These rules instead key off data-element_type — Elementor's OWN native * attribute, derived from get_type(), present in the editor regardless of * whether any of this plugin's PHP actually ran — plus plain :hover and * :focus-within, native browser states that need no JS or custom data to * work. * * SIZING WITHOUT JS: on the front end, JS measures both faces and sizes the * wrapper to fit whichever is taller (see geshmak-flipbox.js) — none of that * runs in the editor either, for the same reason nothing else custom does. * Rather than guess at a fixed fallback size, only the HIDDEN face is taken * out of flow (position:absolute) here; the VISIBLE one stays in normal * document flow, so the wrapper's real height comes from the browser's own * layout of whichever face is actually showing — accurate with zero JS. * Hovering/focusing swaps which face is "in flow" vs. the hidden overlay, so * the wrapper naturally resizes to match whichever side is currently * visible. width: fit-content on the wrapper (see the main WRAPPER rule * above — same declaration, same non-!important reasoning) then shrinks it * to that face's actual content width instead of the column's full width. * * Default: front only, clean WYSIWYG, no stacking mess. Hovering the flipbox * (or having clicked into something on the back to edit it, which keeps * :focus-within active even after the mouse moves away) reveals the back * instead, mirroring how a real "mouse" trigger flipbox behaves — regardless * of the actual Style/Trigger chosen, since those settings can't reach this * render at all. Scoped to body.elementor-editor-active so this never * applies on the front end or in Elementor's own full-page Preview. * ------------------------------------------------------------------------ */ body.elementor-editor-active [data-element_type="geshmak-flipbox"] { position: relative !important; width: fit-content; /* not !important — see the main WRAPPER rule's reasoning */ overflow: hidden !important; /* Any padding on the wrapper itself is already invisible on the front * end — the absolutely-positioned faces there fill the padding box * completely (inset:0) regardless of its value, so it has never had a * visible effect. The visible face here is position:static (normal * flow) instead, which DOES respect the parent's padding, so without * this override any wrapper padding would show up as a gap revealing * the wrapper's own background colour — an editor-only artifact, not a * real front-end effect being lost. */ padding: 0 !important; } body.elementor-editor-active [data-element_type="geshmak-flipbox-front"] { position: static !important; } body.elementor-editor-active [data-element_type="geshmak-flipbox-back"] { position: absolute !important; inset: 0 !important; width: 100% !important; opacity: 0 !important; pointer-events: none !important; } body.elementor-editor-active [data-element_type="geshmak-flipbox"]:hover [data-element_type="geshmak-flipbox-front"], body.elementor-editor-active [data-element_type="geshmak-flipbox"]:focus-within [data-element_type="geshmak-flipbox-front"] { position: absolute !important; inset: 0 !important; width: 100% !important; opacity: 0 !important; pointer-events: none !important; } body.elementor-editor-active [data-element_type="geshmak-flipbox"]:hover [data-element_type="geshmak-flipbox-back"], body.elementor-editor-active [data-element_type="geshmak-flipbox"]:focus-within [data-element_type="geshmak-flipbox-back"] { position: static !important; opacity: 1 !important; pointer-events: auto !important; }