/* ================================================================== PopCon Elements for Elementor Shutter Button Every visual axis is a custom property. The widget writes those properties per instance through Elementor's own selector system, so this file never changes when a designer changes a color. ================================================================== */ .pc-btn{ /* Colors are deliberately NOT defaulted here. Their defaults live on the widget controls, so clearing a swatch in Elementor falls through to the transparent fallback below instead of snapping back to a house color. Only structural values get defaults, because they always have a value. */ /* metrics */ --pc-btn-pad-t: 20px; --pc-btn-pad-r: 55px; --pc-btn-pad-b: 20px; --pc-btn-pad-l: 55px; --pc-btn-cut: 14px; --pc-btn-radius: 4px; --pc-btn-bd-w: 0px; /* motion */ --pc-btn-dur: .45s; --pc-btn-ease: cubic-bezier(.22,.61,.36,1); /* derived — never set by hand. Insetting a 45deg chamfer by w shortens its leg by w(2 - sqrt2). */ --pc-btn-cut-in: calc(var(--pc-btn-cut) - var(--pc-btn-bd-w) * 0.5858); } /* ---- Shell ----------------------------------------------------------- Just a positioning context. No background and no clip here: a clip on the parent would also clip the ring and the face. */ .pc-btn{ position: relative; display: inline-block; text-decoration: none; -webkit-tap-highlight-color: transparent; } /* ---- Face ----------------------------------------------------------- */ .pc-btn__face{ position: relative; display: flex; align-items: center; justify-content: center; padding: var(--pc-btn-pad-t) var(--pc-btn-pad-r) var(--pc-btn-pad-b) var(--pc-btn-pad-l); background: var(--pc-btn-bg, transparent); border-radius: 0 var(--pc-btn-radius) 0 var(--pc-btn-radius); clip-path: polygon( var(--pc-btn-cut) 0, 100% 0, 100% calc(100% - var(--pc-btn-cut)), calc(100% - var(--pc-btn-cut)) 100%, 0 100%, 0 var(--pc-btn-cut) ); overflow: hidden; } /* ---- Border ring ----------------------------------------------------- A CSS border is sliced off by clip-path along the diagonals, and a padded wrapper cannot keep a transparent middle — its own fill shows through. So the ring is drawn as ONE polygon: the outer contour clockwise, a zero-width slit down the top edge at 50%, then the inner contour counter-clockwise. Opposite windings cancel under the default nonzero fill rule, leaving a true ring with a transparent centre. The slit's two edges are collinear, so it never shows. (polygon() cannot hold two separate sub-paths, which is why the obvious evenodd version flares at the corners.) The ring sits above the shutters, so a border is never painted over. At width 0 the inner contour meets the outer and nothing is drawn. */ .pc-btn__ring{ position: absolute; inset: 0; z-index: 3; pointer-events: none; background: var(--pc-btn-bd, transparent); border-radius: 0 var(--pc-btn-radius) 0 var(--pc-btn-radius); transition: background var(--pc-btn-dur) var(--pc-btn-ease); clip-path: polygon( /* outer, clockwise */ 50% 0, 100% 0, 100% calc(100% - var(--pc-btn-cut)), calc(100% - var(--pc-btn-cut)) 100%, 0 100%, 0 var(--pc-btn-cut), var(--pc-btn-cut) 0, 50% 0, /* slit */ 50% var(--pc-btn-bd-w), /* inner, counter-clockwise */ calc(var(--pc-btn-bd-w) + var(--pc-btn-cut-in)) var(--pc-btn-bd-w), var(--pc-btn-bd-w) calc(var(--pc-btn-bd-w) + var(--pc-btn-cut-in)), var(--pc-btn-bd-w) calc(100% - var(--pc-btn-bd-w)), calc(100% - var(--pc-btn-bd-w) - var(--pc-btn-cut-in)) calc(100% - var(--pc-btn-bd-w)), calc(100% - var(--pc-btn-bd-w)) calc(100% - var(--pc-btn-bd-w) - var(--pc-btn-cut-in)), calc(100% - var(--pc-btn-bd-w)) var(--pc-btn-bd-w), 50% var(--pc-btn-bd-w) ); } .pc-btn:hover .pc-btn__ring, .pc-btn:focus-visible .pc-btn__ring{ background: var(--pc-btn-bd-hover, transparent); } .pc-btn:active .pc-btn__ring{ background: var(--pc-btn-bd-active, transparent); } /* ---- Shutters -------------------------------------------------------- Park at 130%, not 100%: the 45deg skew overhangs the box by half the button's height, which would poke a dark wedge into the corner at rest. They land at 48% rather than 50% so they overlap by a hair — at exactly 50% sub-pixel rounding leaves a seam down the diagonal. */ .pc-btn__shutter{ position: absolute; inset: 0; background: var(--pc-btn-bg-hover, transparent); pointer-events: none; z-index: 0; transition: transform var(--pc-btn-dur) var(--pc-btn-ease), background var(--pc-btn-dur) var(--pc-btn-ease); } .pc-btn__shutter--l{ transform: translateX(-130%) skewX(-45deg); } .pc-btn__shutter--r{ transform: translateX( 130%) skewX(-45deg); } .pc-btn:hover .pc-btn__shutter--l, .pc-btn:focus-visible .pc-btn__shutter--l{ transform: translateX(-48%) skewX(-45deg); } .pc-btn:hover .pc-btn__shutter--r, .pc-btn:focus-visible .pc-btn__shutter--r{ transform: translateX( 48%) skewX(-45deg); } .pc-btn:active .pc-btn__shutter{ background: var(--pc-btn-bg-active, transparent); } /* ---- Label roll ------------------------------------------------------ */ .pc-btn__clip{ position: relative; z-index: 2; overflow: hidden; } .pc-btn__roll{ position: relative; display: block; transition: transform var(--pc-btn-dur) var(--pc-btn-ease); } .pc-btn:hover .pc-btn__roll, .pc-btn:focus-visible .pc-btn__roll{ transform: translateY(-100%); } .pc-btn__line{ display: block; margin: 0; white-space: nowrap; transition: color var(--pc-btn-dur) var(--pc-btn-ease); } /* The second copy is out of flow, directly below the first. That makes the clip exactly one line tall whatever line-height the designer picks, so the roll never needs a hardcoded height. */ .pc-btn__line--b{ position: absolute; top: 100%; left: 0; width: 100%; } .pc-btn__line--a{ color: var(--pc-btn-ink, inherit); } .pc-btn__line--b{ color: var(--pc-btn-ink-hover, inherit); } .pc-btn:active .pc-btn__line--b{ color: var(--pc-btn-ink-active, inherit); } /* The widget's Alignment and Full width controls write into this row. */ .pc-btn-wrap{ display: flex; justify-content: flex-start; } /* ---- Motion preference ------------------------------------------------ */ @media (prefers-reduced-motion: reduce){ .pc-btn, .pc-btn__shutter, .pc-btn__roll, .pc-btn__line{ transition-duration: 1ms; } } /* ====================================================================== PopCon Shape — notched containers Added to Elementor's own Container rather than shipped as a widget: a classic widget cannot hold children, and re-implementing flex, gap, alignment and background would only be a worse copy of what Elementor already has. So the Container keeps every native layout control and this adds the one thing it has no control for. The frame of background color around the panel is the container's own Margin. The corners are its own Border Radius — clip-path clips the already-rounded box, so both survive. Each notch has 45deg sides, so its base is 2x the depth narrower than its mouth. A notch of width 0 collapses to nothing, which is how the shape goes plain at a breakpoint. ====================================================================== */ .pc-shape{ /* Top notch — the cut a site header sits into. */ --pc-nt-w: 0px; --pc-nt-x: 0px; --pc-nt-d: 0px; --pc-nt-r: 0px; /* Corner cuts — one per corner, flush to the side, sloping only on the inner edge. Depth and radius are shared so the geometry stays in step across a page; widths are per corner, and a width of 0 turns that corner off. Every straight-edge section shape in the system is some combination of these six numbers plus the notch's four. */ --pc-tl-w: 0px; --pc-tr-w: 0px; --pc-br-w: 0px; --pc-bl-w: 0px; --pc-tl-r: 0px; --pc-tr-r: 0px; --pc-br-r: 0px; --pc-bl-r: 0px; --pc-cut-d: 0px; /* Clamped working values. A notch is never deeper than half its width (its 45deg sides would cross), a cut never deeper than it is wide, and a radius never larger than the depth or flat run it must fit inside. So any slider can be dragged to either end without breaking the shape. */ --pc-nt-de: min(var(--pc-nt-d), calc(var(--pc-nt-w) / 2)); --pc-nt-re: min(var(--pc-nt-r), var(--pc-nt-de), calc((var(--pc-nt-w) - 2 * var(--pc-nt-de)) / 1.2)); --pc-tl-de: min(var(--pc-cut-d), var(--pc-tl-w)); --pc-tr-de: min(var(--pc-cut-d), var(--pc-tr-w)); --pc-br-de: min(var(--pc-cut-d), var(--pc-br-w)); --pc-bl-de: min(var(--pc-cut-d), var(--pc-bl-w)); --pc-tl-re: min(var(--pc-tl-r), var(--pc-tl-de)); --pc-tr-re: min(var(--pc-tr-r), var(--pc-tr-de)); --pc-br-re: min(var(--pc-br-r), var(--pc-br-de)); --pc-bl-re: min(var(--pc-bl-r), var(--pc-bl-de)); /* Generated by genshape.py — do not hand-edit. */ clip-path: polygon( calc(var(--pc-tl-w) - 0.29289 * var(--pc-tl-re)) calc(0.29289 * var(--pc-tl-re)), calc(var(--pc-tl-w) - 0.08415 * var(--pc-tl-re)) calc(0.13017 * var(--pc-tl-re)), calc(var(--pc-tl-w) + 0.15155 * var(--pc-tl-re)) calc(0.03254 * var(--pc-tl-re)), calc(var(--pc-tl-w) + 0.41421 * var(--pc-tl-re)) 0px, calc(var(--pc-nt-x) - 0.41421 * var(--pc-nt-re)) 0px, calc(var(--pc-nt-x) - 0.15155 * var(--pc-nt-re)) calc(0.03254 * var(--pc-nt-re)), calc(var(--pc-nt-x) + 0.08415 * var(--pc-nt-re)) calc(0.13017 * var(--pc-nt-re)), calc(var(--pc-nt-x) + 0.29289 * var(--pc-nt-re)) calc(0.29289 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-de) - 0.29289 * var(--pc-nt-re)) calc(var(--pc-nt-de) - 0.29289 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-de) - 0.08415 * var(--pc-nt-re)) calc(var(--pc-nt-de) - 0.13017 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-de) + 0.15155 * var(--pc-nt-re)) calc(var(--pc-nt-de) - 0.03254 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-de) + 0.41421 * var(--pc-nt-re)) var(--pc-nt-de), calc(var(--pc-nt-x) + var(--pc-nt-w) - var(--pc-nt-de) - 0.41421 * var(--pc-nt-re)) var(--pc-nt-de), calc(var(--pc-nt-x) + var(--pc-nt-w) - var(--pc-nt-de) - 0.15155 * var(--pc-nt-re)) calc(var(--pc-nt-de) - 0.03254 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-w) - var(--pc-nt-de) + 0.08415 * var(--pc-nt-re)) calc(var(--pc-nt-de) - 0.13017 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-w) - var(--pc-nt-de) + 0.29289 * var(--pc-nt-re)) calc(var(--pc-nt-de) - 0.29289 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-w) - 0.29289 * var(--pc-nt-re)) calc(0.29289 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-w) - 0.08415 * var(--pc-nt-re)) calc(0.13017 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-w) + 0.15155 * var(--pc-nt-re)) calc(0.03254 * var(--pc-nt-re)), calc(var(--pc-nt-x) + var(--pc-nt-w) + 0.41421 * var(--pc-nt-re)) 0px, calc(100% - var(--pc-tr-w) - 0.41421 * var(--pc-tr-re)) 0px, calc(100% - var(--pc-tr-w) - 0.15155 * var(--pc-tr-re)) calc(0.03254 * var(--pc-tr-re)), calc(100% - var(--pc-tr-w) + 0.08415 * var(--pc-tr-re)) calc(0.13017 * var(--pc-tr-re)), calc(100% - var(--pc-tr-w) + 0.29289 * var(--pc-tr-re)) calc(0.29289 * var(--pc-tr-re)), calc(100% - var(--pc-tr-w) + var(--pc-tr-de) - 0.29289 * var(--pc-tr-re)) calc(var(--pc-tr-de) - 0.29289 * var(--pc-tr-re)), calc(100% - var(--pc-tr-w) + var(--pc-tr-de) - 0.08415 * var(--pc-tr-re)) calc(var(--pc-tr-de) - 0.13017 * var(--pc-tr-re)), calc(100% - var(--pc-tr-w) + var(--pc-tr-de) + 0.15155 * var(--pc-tr-re)) calc(var(--pc-tr-de) - 0.03254 * var(--pc-tr-re)), calc(100% - var(--pc-tr-w) + var(--pc-tr-de) + 0.41421 * var(--pc-tr-re)) var(--pc-tr-de), calc(100% - var(--pc-tr-re)) var(--pc-tr-de), calc(100% - 0.44444 * var(--pc-tr-re)) calc(var(--pc-tr-de) + 0.11111 * var(--pc-tr-re)), calc(100% - 0.11111 * var(--pc-tr-re)) calc(var(--pc-tr-de) + 0.44444 * var(--pc-tr-re)), 100% calc(var(--pc-tr-de) + var(--pc-tr-re)), 100% calc(100% - var(--pc-br-de) - var(--pc-br-re)), calc(100% - 0.11111 * var(--pc-br-re)) calc(100% - var(--pc-br-de) - 0.44444 * var(--pc-br-re)), calc(100% - 0.44444 * var(--pc-br-re)) calc(100% - var(--pc-br-de) - 0.11111 * var(--pc-br-re)), calc(100% - var(--pc-br-re)) calc(100% - var(--pc-br-de)), calc(100% - var(--pc-br-w) + var(--pc-br-de) + 0.41421 * var(--pc-br-re)) calc(100% - var(--pc-br-de)), calc(100% - var(--pc-br-w) + var(--pc-br-de) + 0.15155 * var(--pc-br-re)) calc(100% - var(--pc-br-de) + 0.03254 * var(--pc-br-re)), calc(100% - var(--pc-br-w) + var(--pc-br-de) - 0.08415 * var(--pc-br-re)) calc(100% - var(--pc-br-de) + 0.13017 * var(--pc-br-re)), calc(100% - var(--pc-br-w) + var(--pc-br-de) - 0.29289 * var(--pc-br-re)) calc(100% - var(--pc-br-de) + 0.29289 * var(--pc-br-re)), calc(100% - var(--pc-br-w) + 0.29289 * var(--pc-br-re)) calc(100% - 0.29289 * var(--pc-br-re)), calc(100% - var(--pc-br-w) + 0.08415 * var(--pc-br-re)) calc(100% - 0.13017 * var(--pc-br-re)), calc(100% - var(--pc-br-w) - 0.15155 * var(--pc-br-re)) calc(100% - 0.03254 * var(--pc-br-re)), calc(100% - var(--pc-br-w) - 0.41421 * var(--pc-br-re)) 100%, calc(var(--pc-bl-w) + 0.41421 * var(--pc-bl-re)) 100%, calc(var(--pc-bl-w) + 0.15155 * var(--pc-bl-re)) calc(100% - 0.03254 * var(--pc-bl-re)), calc(var(--pc-bl-w) - 0.08415 * var(--pc-bl-re)) calc(100% - 0.13017 * var(--pc-bl-re)), calc(var(--pc-bl-w) - 0.29289 * var(--pc-bl-re)) calc(100% - 0.29289 * var(--pc-bl-re)), calc(var(--pc-bl-w) - var(--pc-bl-de) + 0.29289 * var(--pc-bl-re)) calc(100% - var(--pc-bl-de) + 0.29289 * var(--pc-bl-re)), calc(var(--pc-bl-w) - var(--pc-bl-de) + 0.08415 * var(--pc-bl-re)) calc(100% - var(--pc-bl-de) + 0.13017 * var(--pc-bl-re)), calc(var(--pc-bl-w) - var(--pc-bl-de) - 0.15155 * var(--pc-bl-re)) calc(100% - var(--pc-bl-de) + 0.03254 * var(--pc-bl-re)), calc(var(--pc-bl-w) - var(--pc-bl-de) - 0.41421 * var(--pc-bl-re)) calc(100% - var(--pc-bl-de)), var(--pc-bl-re) calc(100% - var(--pc-bl-de)), calc(0.44444 * var(--pc-bl-re)) calc(100% - var(--pc-bl-de) - 0.11111 * var(--pc-bl-re)), calc(0.11111 * var(--pc-bl-re)) calc(100% - var(--pc-bl-de) - 0.44444 * var(--pc-bl-re)), 0px calc(100% - var(--pc-bl-de) - var(--pc-bl-re)), 0px calc(var(--pc-tl-de) + var(--pc-tl-re)), calc(0.11111 * var(--pc-tl-re)) calc(var(--pc-tl-de) + 0.44444 * var(--pc-tl-re)), calc(0.44444 * var(--pc-tl-re)) calc(var(--pc-tl-de) + 0.11111 * var(--pc-tl-re)), var(--pc-tl-re) var(--pc-tl-de), calc(var(--pc-tl-w) - var(--pc-tl-de) - 0.41421 * var(--pc-tl-re)) var(--pc-tl-de), calc(var(--pc-tl-w) - var(--pc-tl-de) - 0.15155 * var(--pc-tl-re)) calc(var(--pc-tl-de) - 0.03254 * var(--pc-tl-re)), calc(var(--pc-tl-w) - var(--pc-tl-de) + 0.08415 * var(--pc-tl-re)) calc(var(--pc-tl-de) - 0.13017 * var(--pc-tl-re)), calc(var(--pc-tl-w) - var(--pc-tl-de) + 0.29289 * var(--pc-tl-re)) calc(var(--pc-tl-de) - 0.29289 * var(--pc-tl-re)) ); }