/* --- START --- button-015 animation --- */ :root { --button-015-color: #ffffff; --button-015-color-background: #101010; --button-015-hover-color: #EBEBE3; --button-015-between-color-background: #D8D8CC; --button-015-hover-color-background: #37382F; --button-015-color-focus: #515246; --button-015-border-radius: 0.2em; --button-015-padding: 0.75em 1em; --button-015-focus-inset: -0.125em; --button-015-click-scale: 0.955 0.925; --button-015-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-015-ease-hover: cubic-bezier(0.19, 0.69, 0.33, 1.33); --button-015-ease-hover-swift-out: cubic-bezier(0.19, 0.69, 0.33, 1); --button-015-ease-hover-soft-out: cubic-bezier(0.215, 0.61, 0.355, 1); --button-015-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-015 { -webkit-tap-highlight-color: transparent; transition: color 0.15s var(--button-015-ease-hover-soft-out), scale 0.15s var(--button-015-ease-click); } .button-015:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-015-color-focus); } .button-015:active { scale: var(--button-015-click-scale); } .button-015::after { content: ''; display: block; position: absolute; inset: var(--button-015-focus-inset); border-radius: var(--button-015-border-radius); transition: box-shadow 0.3s var(--button-015-ease-focus); pointer-events: none; z-index: 1; } .button-015__bg-hover { clip-path: inset(1.25em 1.25em 1.25em 1.25em round var(--button-015-border-radius)); opacity: 0; } .button-015__bg-hover.is--first { transition: clip-path 0.35s var(--button-015-ease-hover), opacity 0s var(--button-015-ease-hover-soft-out); } .button-015__bg-hover.is--second { transition: clip-path 0.35s 0.05s var(--button-015-ease-hover), opacity 0.1s 0.1s var(--button-015-ease-hover-soft-out); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-015:is(:hover, :focus-visible), [data-hover]:is(:hover, :focus-visible) .button-015 { color: var(--button-015-hover-color); transition: color 0.15s 0.2s var(--button-015-ease-hover-soft-out), scale 0.15s var(--button-015-ease-click); } .button-015:is(:hover, :focus-visible) .button-015__bg-hover.is--first, [data-hover]:is(:hover, :focus-visible) .button-015 .button-015__bg-hover.is--first { clip-path: inset(0.125em 0.125em 0.125em 0.125em round var(--button-015-border-radius)); opacity: 1; transition: clip-path 0.3s 0.05s var(--button-015-ease-hover-swift-out), opacity 0.1s 0.05s var(--button-015-ease-hover-soft-out); } .button-015:is(:hover, :focus-visible) .button-015__bg-hover.is--second, [data-hover]:is(:hover, :focus-visible) .button-015 .button-015__bg-hover.is--second { clip-path: inset(0.125em 0.125em 0.125em 0.125em round var(--button-015-border-radius)); opacity: 1; transition: clip-path 0.375s 0.2s var(--button-015-ease-hover), opacity 0.1s 0.2s var(--button-015-ease-hover-soft-out); } } /* --- END --- button-015 animation --- */ /* --- START --- underline-link --- */ [data-underline-link] { text-decoration: none; position: relative; } [data-underline-link]::before, [data-underline-link="alt"]::before, [data-underline-link="alt"]::after { content: ""; position: absolute; bottom: -0.0625em; bottom: -0.0625em; left: 0; width: 100%; height: 0.0625em; background-color: currentColor; transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1); transform-origin: right; transform: scaleX(0) rotate(0.001deg); } [data-underline-link="alt"]::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.13s; } [data-underline-link="alt"]::after { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } @media (hover: hover) and (pointer: fine) { [data-hover]:hover [data-underline-link]::before, [data-underline-link]:hover::before { transform-origin: left; transform: scaleX(1) rotate(0.001deg); } [data-hover]:hover [data-underline-link="alt"]::before, [data-underline-link="alt"]:hover::before { transform-origin: right; transform: scaleX(0) rotate(0.001deg); transition-delay: 0s; } [data-hover]:hover [data-underline-link="alt"]::after, [data-underline-link="alt"]:hover::after { transform-origin: left; transform: scaleX(1) rotate(0.001deg); transition-delay: 0.08s; } } /* --- END --- underline-link --- */ /* START button paintintgs ---*/ :root { --button-076-color: #ffffff; --button-076-color-background: #101010; --button-076-hover-color: #EBEBE3; --button-076-hover-color-background: #37382F; --button-076-color-focus: #515246; --button-076-border-radius: 2.5em; --button-076-padding: 0.75em 1em; --button-076-gap: 0.125em; --button-076-focus-inset: -0.125em; --button-076-hover-scale: 1.065 1.095; --button-076-click-scale: 0.955 0.925; --button-076-ease-hover: cubic-bezier(0.4, 0.15, 0, 1); --button-076-ease-click: cubic-bezier(0.4, 0, 0.2, 1); --button-076-ease-focus: cubic-bezier(0.32, 0.72, 0, 1); } .button-076 { -webkit-tap-highlight-color: transparent; transition: scale 0.45s var(--button-076-ease-hover), transform 0.15s var(--button-076-ease-click); } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .button-076:is(:hover, :focus-visible), [data-hover]:is(:hover, :focus-visible) .button-076 { scale: var(--button-076-hover-scale); } .button-076:is(:hover, :focus-visible) .button-076__hover, [data-hover]:is(:hover, :focus-visible) .button-076 .button-076__hover { clip-path: polygon(50% 0%, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 50% 100%, 0% 100%, 0 0%); transition-delay: 0.05s; } } .button-076:active { scale: var(--button-076-click-scale); } .button-076:is(:focus-visible)::after { box-shadow: 0 0 0 0.125em var(--button-076-color-focus); } .button-076::after { content: ''; display: block; position: absolute; inset: var(--button-076-focus-inset); border-radius: var(--button-076-border-radius); transition: box-shadow 0.3s var(--button-076-ease-focus); pointer-events: none; z-index: 1; } .button-076__hover { clip-path: polygon(50% 100%, 50% 0%, 100% 0%, 100% 0%, 50% 0%, 50% 100%, 0% 100%, 0 100%); transition: clip-path 0.55s var(--button-076-ease-hover); } /* END button paintintgs ---*/