diff --git a/assets/sass/anchorlink.scss b/assets/sass/anchorlink.scss index d2d2eca9..c9a22e6d 100644 --- a/assets/sass/anchorlink.scss +++ b/assets/sass/anchorlink.scss @@ -57,6 +57,10 @@ background-color 0.3s ease, opacity 0.3s ease; + @media (prefers-reduced-motion: reduce) { + transition: none; + } + &:hover, &:focus { background-color: var(--bg-neutral); @@ -89,6 +93,10 @@ margin: 1rem; text-wrap: balance; z-index: 22; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } .a-snackbar--show { diff --git a/assets/sass/button.scss b/assets/sass/button.scss index fb9c15bd..83f99ffc 100644 --- a/assets/sass/button.scss +++ b/assets/sass/button.scss @@ -36,6 +36,10 @@ button { display: block; } + @media (prefers-reduced-motion: reduce) { + transition: none; + } + &__internal { border: none; } diff --git a/assets/sass/contentNavigation.scss b/assets/sass/contentNavigation.scss index 15f5aa70..9cc87063 100644 --- a/assets/sass/contentNavigation.scss +++ b/assets/sass/contentNavigation.scss @@ -153,6 +153,10 @@ display: none; } + @media (prefers-reduced-motion: reduce) { + transition: none; + } + &--open { transform: translateY(0); } @@ -183,6 +187,10 @@ * { transition: opacity 0.3s ease-in-out; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } } diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss index 1e848f63..6c75dcf9 100644 --- a/assets/sass/dropdown.scss +++ b/assets/sass/dropdown.scss @@ -47,6 +47,10 @@ & > :not(.a-icon) { text-decoration: underline; } + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } } @@ -87,6 +91,10 @@ background 0.2s, color 0.2s; + @media (prefers-reduced-motion: reduce) { + transition: none; + } + &:hover, &:focus { color: var(--link-hovered); @@ -112,6 +120,10 @@ .o-dropdown__icon .a-icon { transition: transform 0.2s; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } &__menu { @@ -132,6 +144,10 @@ max-height: 20rem; overflow-y: auto; + @media (prefers-reduced-motion: reduce) { + animation: none; + } + &--above { bottom: anchor(top); animation-name: dropdown-open-above; diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss index 526fc621..e3b94471 100644 --- a/assets/sass/expander.scss +++ b/assets/sass/expander.scss @@ -15,6 +15,10 @@ padding: 0.6rem; } + @media (prefers-reduced-motion: reduce) { + transition: none; + } + &:hover, &:focus { .o-expander__title-text { @@ -38,6 +42,10 @@ @media print { display: none; } + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } &-title { diff --git a/assets/sass/header.scss b/assets/sass/header.scss index 793ec52c..3f7c2ad7 100644 --- a/assets/sass/header.scss +++ b/assets/sass/header.scss @@ -78,6 +78,10 @@ @media print { display: none; } + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } #overlay.overlay--show { diff --git a/assets/sass/interactiveMap.scss b/assets/sass/interactiveMap.scss index 97158a01..33eec963 100644 --- a/assets/sass/interactiveMap.scss +++ b/assets/sass/interactiveMap.scss @@ -34,6 +34,10 @@ fill: var(--link-default) !important; transition: all 0.2s ease; cursor: pointer; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } &:hover path, @@ -48,6 +52,10 @@ fill: var(--bg-neutral) !important; transition: all 0.2s ease; cursor: not-allowed; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } } @@ -73,6 +81,10 @@ } @include focus-indicator(0.2rem); + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } &__legend { diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 92c41ed5..5b849535 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -178,6 +178,10 @@ menu > li > menu { transform: translateX(100%); transition: transform 0.3s ease-in-out; + @media (prefers-reduced-motion: reduce) { + transition: none; + } + > menu { margin-top: 4rem; padding-bottom: 1rem; @@ -248,6 +252,10 @@ menu > li > menu { height: fit-content; line-height: normal; + @media (prefers-reduced-motion: reduce) { + transition: none; + } + &:hover { color: var(--link-hovered); } diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 56014f20..5c83b7d2 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -115,6 +115,10 @@ pagefind-modal-trigger { transition: background 0.2s, color 0.2s !important; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } :is( diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 75871806..c4a2a1df 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -4,6 +4,12 @@ html { scroll-behavior: smooth; } +@media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } +} + body { color: var(--color-body); background-color: var(--bg-neutral); @@ -67,6 +73,10 @@ a, @include focus-indicator(0.2rem); + @media (prefers-reduced-motion: reduce) { + transition: none; + } + @media print { text-decoration: none; color: var(--bs-body-color); diff --git a/assets/sass/teamMember.scss b/assets/sass/teamMember.scss index 0f65287b..fb491d2f 100644 --- a/assets/sass/teamMember.scss +++ b/assets/sass/teamMember.scss @@ -18,6 +18,10 @@ border-radius: var(--border-radius-m); transition: transform 0.2s ease; + @media (prefers-reduced-motion: reduce) { + transition: none; + } + &__image { width: 8rem; height: 8rem; diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 7428948b..1487d32f 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -80,6 +80,10 @@ transition: background 0.2s, color 0.2s; + + @media (prefers-reduced-motion: reduce) { + transition: none; + } } }