:root { --button-046-color: #FFFFEE; --button-046-color-background: #E42312; --button-046-hover-color: #E42312; --button-046-hover-color-background: #ffffee; --button-046-color-focus: #fff; --button-046-padding: 0.75em 1em; --button-046-border-radius: 2.5em; --button-046-focus-inset: -0.125em; --button-046-hover-scale: 1.065 1.095; --button-046-click-scale: 0.955, 0.925; --button-046-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-046-ease-hover: cubic-bezier(0.34, 2.27, 0.64, 1); --button-046-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); --button-046-border: 0px solid transparent; --button-046-hover-border: 0px solid transparent; } [data-wf--button-046--variant="purple"] { --button-046-color: #6a5ec3; --button-046-color-background: #FFFFEE; --button-046-hover-color: #6a5ec3; --button-046-hover-color-background: #D0DEFB; --button-046-color-focus: #fff; } [data-wf--button-046--variant="white"] { --button-046-color: #E42312; --button-046-color-background: #FFFFEE; --button-046-hover-color: #FFFFEE; --button-046-hover-color-background: #E42312; --button-046-color-focus: #fff; } [data-wf--button-046-small--variant="white"] { --button-046-color: #E42312; --button-046-color-background: #FFFFEE; --button-046-hover-color: #FFFFEE; --button-046-hover-color-background: #E42312; --button-046-color-focus: #fff; } [data-wf--button-046--variant="dark-purple"] { --button-046-color: #6D5DCA; --button-046-color-background: transparent; --button-046-hover-color: #FFFFEE; --button-046-hover-color-background: #6D5DCA; --button-046-color-focus: #fff; --button-046-border: 2px solid #6D5DCA; --button-046-hover-border: 2px solid #6D5DCA; } [data-wf--button-046-small--variant="dark-purple"] { --button-046-color: #6D5DCA; --button-046-color-background: transparent; --button-046-hover-color: #FFFFEE; --button-046-hover-color-background: #6D5DCA; --button-046-color-focus: #fff; --button-046-border: 2px solid #6D5DCA; --button-046-hover-border: 2px solid #6D5DCA; } [data-wf--button-046--variant="white-border"] { --button-046-color: #ffffee; --button-046-color-background: transparent; --button-046-hover-color: #E42312; --button-046-hover-color-background: #ffffee; --button-046-color-focus: #fff; --button-046-border: 2px solid #ffffee; --button-046-hover-border: 2px solid #ffffee; } [data-wf--button-046-small--variant="white-border"] { --button-046-color: #ffffee; --button-046-color-background: transparent; --button-046-hover-color: #E42312; --button-046-hover-color-background: #ffffee; --button-046-color-focus: #fff; --button-046-border: 2px solid #ffffee; --button-046-hover-border: 2px solid #ffffee; } [data-wf--button-046--variant="yellow"] { --button-046-color: #ffe; --button-046-color-background: #f8a91f; --button-046-hover-color: #f8a91f; --button-046-hover-color-background: #ffe; --button-046-color-focus: #fff; --button-046-border: 2px solid #ffffee; --button-046-hover-border: 2px solid #ffffee; } [data-wf--button-046-small--variant="yellow"] { --button-046-color: #ffe; --button-046-color-background: #f8a91f; --button-046-hover-color: #f8a91f; --button-046-hover-color-background: #ffe; --button-046-color-focus: #fff; --button-046-border: 2px solid #ffffee; --button-046-hover-border: 2px solid #ffffee; } [data-wf--button-046--variant="purple-bg"] { --button-046-color: #ffe; --button-046-color-background: #6d5dca; --button-046-hover-color: #6d5dca; --button-046-hover-color-background: #ffe; --button-046-color-focus: #fff; } [data-wf--button-046-small--variant="purple-bg"] { --button-046-color: #ffe; --button-046-color-background: #6d5dca; --button-046-hover-color: #6d5dca; --button-046-hover-color-background: #ffe; --button-046-color-focus: #fff; } [data-wf--button-046--variant="pink"] { --button-046-color: #e42312; --button-046-color-background: #facbc7; --button-046-hover-color: #ffe; --button-046-hover-color-background: #e42312; --button-046-color-focus: #fff; } [data-wf--button-046-small--variant="pink"] { --button-046-color: #e42312; --button-046-color-background: #facbc7; --button-046-hover-color: #ffe; --button-046-hover-color-background: #e42312; --button-046-color-focus: #fff; } .button-046 { -webkit-tap-highlight-color: transparent; transition: color 0.25s ease-out; } .button-046:is(:hover, :focus-visible), [data-hover]:is(:hover, :focus-visible) .button-046 { color: var(--button-046-hover-color); } .button-046:active .button-046__bg, .button-046:active .button-046__bg-circle { transform: scale(var(--button-046-click-scale)); } .button-046:is(:focus-visible) .button-046__bg { background-color: var(--button-046-hover-color-background) !important; } .button-046:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-046-color-focus); scale: var(--button-046-hover-scale); transition: box-shadow 0.3s var(--button-046-ease-focus), scale 0.425s 0.05s var(--button-046-ease-hover); } .button-046::after { content: ''; display: block; position: absolute; inset: var(--button-046-focus-inset); border-radius: var(--button-046-border-radius); transition: box-shadow 0.3s var(--button-046-ease-focus), scale 0.4s var(--button-046-ease-hover); pointer-events: none; z-index: 1; } .button-046__bg, .button-046__bg-circle { border: var(--button-046-border); transition: border-color 0.25s ease-out, background-color 0.25s ease-out, scale 0.4s var(--button-046-ease-hover), transform 0.15s var(--button-046-ease-click); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-046:is(:hover, :focus-visible) .button-046__bg, .button-046:is(:hover, :focus-visible) .button-046__bg-circle, [data-hover]:is(:hover, :focus-visible) .button-046 .button-046__bg, [data-hover]:is(:hover, :focus-visible) .button-046 .button-046__bg-circle { scale: var(--button-046-hover-scale); transition: background-color 0.25s 0.05s ease-out, scale 0.425s 0.05s var(--button-046-ease-hover), transform 0.15s var(--button-046-ease-click); } .button-046:is(:hover, :focus-visible) .button-046__bg, [data-hover]:is(:hover, :focus-visible) .button-046 .button-046__bg { background-color: var(--button-046-color-background); border: var(--button-046-hover-border); } } [data-highlight-marker-reveal] { visibility: hidden; } .wf-design-mode [data-highlight-marker-reveal] { visibility: visible; } [data-highlight-marker-reveal] .highlight-marker-line { width: auto; display: inline-block !important; margin: -0.055em 0px; } .highlight-marker-bar { position: absolute; inset: -0.055em 0px; z-index: 1; pointer-events: none; } /* fit to width*/ [data-fit-width] { display: inline-block; white-space: nowrap; margin: 0; } /*button 023*/ :root { --button-023-color: #000; --button-023-color-background: #00e11f; --button-023-hover-color: #000; --button-023-between-color-background: #0042ff; --button-023-hover-color-background: #ff22ed; --button-023-color-focus: #000; --button-023-focus-inset: -0.125em; --button-023-padding: 0.75em 1em; --button-023-border-radius: 2.5em; --button-023-click-scale: 0.955 0.925; --button-023-hover-scale: 1.065 1.095; --button-023-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-023-ease-hover: linear(0, 0.5737 7.6%, 0.8382 11.87%, 0.9463 14.19%, 1.0292 16.54%, 1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%, 1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%, 1.0219 42.57%, 0.9995 46.99%, 0.9872 51.63%, 0.9842 58.77%, 1.0011 81.26%, 1); --button-023-ease-smooth: cubic-bezier(0.32, 0.72, 0, 1); --button-023-ease-soft-out: cubic-bezier(0.215, 0.61, 0.355, 1); --button-023-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-023 { -webkit-tap-highlight-color: transparent; transition: scale 0.15s var(--button-023-ease-click); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-023:is(:hover, :focus-visible) .button-023__bg, [data-hover]:is(:hover, :focus-visible) .button-023 .button-023__bg { scale: var(--button-023-hover-scale); } .button-023:is(:hover, :focus-visible) .button-023__bg-inner, [data-hover]:is(:hover, :focus-visible) .button-023 .button-023__bg-inner { translate: 0 0 0; rotate: 0deg; transition-delay: calc(var(--index) * 0.068s + 0.05s); } .button-023:is(:hover, :focus-visible) .button-023__text.is--first, [data-hover]:is(:hover, :focus-visible) .button-023 .button-023__text.is--first { rotate: 1 1 0.45 -60deg; translate: -5% -100% 0; transition-delay: 0.075s; } .button-023:is(:hover, :focus-visible) .button-023__text.is--second, [data-hover]:is(:hover, :focus-visible) .button-023 .button-023__text.is--second { rotate: 1 1 0.45 0deg; translate: 0 0 0; transition-delay: 0.165s; } } .button-023:active { scale: var(--button-023-click-scale); } .button-023:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-023-color-focus); scale: var(--button-023-hover-scale); } .button-023::after { content: ''; display: block; position: absolute; inset: var(--button-023-focus-inset); border-radius: var(--button-023-border-radius); transition: box-shadow 0.3s var(--button-023-ease-focus), scale 0.45s var(--button-023-ease-smooth); pointer-events: none; z-index: 1; } .button-023__bg { transition: scale 0.45s var(--button-023-ease-smooth); } .button-023__bg-inner { transform-origin: 100% 0; translate: 0 100% 0; rotate: -12deg; transition: translate 0.6s var(--button-023-ease-smooth), rotate 0.5s var(--button-023-ease-smooth); transition-delay: calc(var(--index) * -1 * 0.042s); } .button-023__text.is--first { transform-origin: 0 0; transition: translate 0.75s var(--button-023-ease-hover), rotate 0.5s var(--button-023-ease-smooth); } .button-023__text.is--second { translate: 5% 100% 0; rotate: 1 1 0.75 -45deg; transform-origin: top right; transition: translate 0.75s var(--button-023-ease-hover), rotate 0.5s var(--button-023-ease-smooth); }