.button {
outline-style: solid;
outline-width: 0;
outline-offset: 0;
transition:
outline-width 0.2s ease,
outline-offset 0.2s ease,
box-shadow 0.2s ease;
}
.button-filled {
outline-color: var(--color-text-on-light);
box-shadow: 0 0 0 0 var(--color-focus-on-dark);
}
.button-inverse {
outline-color: var(--color-focus-on-dark);
box-shadow: 0 0 0 0 var(--color-text-on-light);
} .helen-footer .button-filled {
outline-color: var(--color-focus-on-dark);
} .helen-scroll-top {
outline: 0 solid var(--color-text-on-light, #4c4c4c);
outline-offset: 0;
transition:
opacity 0.3s ease,
transform 0.3s ease,
outline-width 0.2s ease,
outline-offset 0.2s ease,
box-shadow 0.2s ease;
} @view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: 0.35s ease both helen-page-out;
}
::view-transition-new(root) {
animation: 0.35s ease both helen-page-in;
} .helen-header {
view-transition-name: helen-header;
}
::view-transition-group(helen-header) {
animation-duration: 0.35s;
}
@keyframes helen-page-out {
to {
opacity: 0;
transform: translateY(calc(-1 * var(--space-xs)));
}
}
@keyframes helen-page-in {
from {
opacity: 0;
transform: translateY(var(--space-xs));
}
}
@media (prefers-reduced-motion: reduce) {
.button,
.helen-scroll-top {
transition: none;
}
@view-transition {
navigation: none;
}
}