Shopify · kjellr · Apr 26, 2023 · Mar 16, 2023 · Mar 17, 2023 · Mar 17, 2023
diff --git a/assets/base.css b/assets/base.css
@@ -746,6 +746,7 @@ details > * {
   --duration-default: 200ms;
   --duration-long: 500ms;
   --duration-extra-long: 600ms;
+  --duration-extended: 3s;
   --animation-slide-in: slideIn var(--duration-extra-long) cubic-bezier(0, 0, 0.3, 1) forwards;
 }
 
@@ -3311,3 +3312,110 @@ details-disclosure > details {
     }
   }
 }
+
+/* Element Hovers: 3d Lift */
+
+@media (prefers-reduced-motion: no-preference) and (hover: hover) {
+  .animate--hover-3d-lift .card-wrapper .card--card,
+  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
+  .animate--hover-3d-lift .button:not(.button--tertiary),
+  .animate--hover-3d-lift .shopify-challenge__button,
+  .animate--hover-3d-lift .customer button,
+  .animate--hover-3d-lift .shopify-payment-button__button,
+  .animate--hover-3d-lift .deferred-media__poster-button {
+    transition: transform var(--duration-long) ease, box-shadow var(--duration-long) ease;
+    transform-origin: center;
+    z-index: 1;
+  }
+
+  .animate--hover-3d-lift .card-wrapper:hover .card--card,
+  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
+  .animate--hover-3d-lift .button:not(.button--tertiary):not([disabled]):hover,
+  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
+  .animate--hover-3d-lift .customer button:not([disabled]):hover,
+  .animate--hover-3d-lift .shopify-payment-button__button:hover,
+  .animate--hover-3d-lift .deferred-media__poster-button:hover {
+    transition: transform var(--duration-extended) ease, box-shadow var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
+    transform: rotate(1deg);
+    box-shadow:
+          -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05),
+          1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05),
+          0 0 0.5rem 0 rgba(255,255,255,0),
+          0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
+  }
+
+  .animate--hover-3d-lift .video-section__poster:hover .deferred-media__poster-button {
+    transform: translate(-50%,-50%) scale(1.05); /* Apply a specialized transform to the video play button. */
+  }
+
+  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
+  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
+    transform: rotate(0.5deg); /* Less intense rotation for collage items. */
+  }
+
+  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
+    box-shadow: none;
+    transition: transform var(--duration-long) ease, filter var(--duration-long) ease;
+  }
+
+  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
+    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-long) ease; /* Slow the card transition speed while hover is active. */
+    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15))
+            drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
+  }
+
+  .animate--hover-3d-lift .card-wrapper:hover .card--card:after,
+  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner:after,
+  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before {
+    background-image: var(--easter-egg);
+    background-size: 250px 250px;
+    mix-blend-mode: color-dodge;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
+  .animate--hover-3d-lift .card-wrapper .card--card:before,
+  .animate--hover-3d-lift .card-wrapper .card--standard .card__media:after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
+    mix-blend-mode: overlay;
+    background-size: 400% 100%;
+    background-position: 90% 0;
+    background-repeat: no-repeat;
+    background-image: linear-gradient(
+      135deg,
+      rgba(255,255,255,0) 45%,
+      rgba(255,255,255,1) 50%,
+      rgba(255,255,255,0) 55%
+    );
+  }
+
+  .animate--hover-3d-lift .card-wrapper:hover .card--card:before,
+  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media:after {
+    opacity: 0.2;
+    transition: background-position 6s ease, opacity var(--duration-long) ease;
+    background-position: left;
+    z-index: 2;
+  }
+
+  :root {
+    --easter-egg: none;
+    --sparkle: url('./sparkle.gif');
+  }
+}
diff --git a/assets/sparkle.gif b/assets/sparkle.gif
diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -220,6 +220,23 @@
         "id": "animations_reveal_on_scroll",
         "label": "t:settings_schema.animations.settings.animations_reveal_on_scroll.label",
         "default": true
+      },
+      {
+        "type": "select",
+        "id": "animations_hover_elements",
+        "options": [
+          {
+            "value": "default",
+            "label": "t:settings_schema.animations.settings.animations_hover_elements.options__1.label"
+          },
+          {
+            "value": "3d-lift",
+            "label": "t:settings_schema.animations.settings.animations_hover_elements.options__2.label"
+          }
+        ],
+        "default": "default",
+        "label": "t:settings_schema.animations.settings.animations_hover_elements.label",
+        "info": "t:settings_schema.animations.settings.animations_hover_elements.info"
       }
     ]
   },

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -248,7 +248,7 @@
     </script>
   </head>
 
-  <body class="gradient">
+  <body class="gradient{% if settings.animations_hover_elements != 'none' %} animate--hover-{{ settings.animations_hover_elements }}{% endif %}">
     <a class="skip-to-content-link button visually-hidden" href="#MainContent">
       {{ 'accessibility.skip_to_text' | t }}
     </a>

diff --git a/locales/cs.schema.json b/locales/cs.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Zobrazit sekce při skrolování"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Žádný"
+          },
+          "options__2": {
+            "label": "3D vysunutí"
+          },
+          "label": "Efekt najetí",
+          "info": "Ovlivňuje karty a tlačítka."
         }
       }
     }

diff --git a/locales/da.schema.json b/locales/da.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Afslør afsnit ved rulning"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Ingen"
+          },
+          "options__2": {
+            "label": "3D-løft"
+          },
+          "label": "Svæveeffekt",
+          "info": "Påvirker kort og knapper."
         }
       }
     }

diff --git a/locales/de.schema.json b/locales/de.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Beim Scrollen Abschnitte einblenden"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Keiner"
+          },
+          "options__2": {
+            "label": "3D-Lift"
+          },
+          "label": "Hover-Effekt",
+          "info": "Wirkt sich auf Karten und Schaltflächen aus."
         }
       }
     }

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -262,6 +262,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Reveal sections on scroll"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "None"
+          },
+          "options__2": {
+            "label": "3D lift"
+          },
+          "label": "Hover effect",
+          "info": "Affects cards and buttons."
         }
       }
     },

diff --git a/locales/es.schema.json b/locales/es.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Revelar secciones al desplazarse"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Ninguna"
+          },
+          "options__2": {
+            "label": "3D Lift"
+          },
+          "label": "Efecto hover",
+          "info": "Afecta a tarjetas y botones."
         }
       }
     }

diff --git a/locales/fi.schema.json b/locales/fi.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Näytä osiot vierittämällä"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Ei mitään"
+          },
+          "options__2": {
+            "label": "3D-nosto"
+          },
+          "label": "Osoitusefekti",
+          "info": "Vaikuttaa kortteihin ja painikkeisiin."
         }
       }
     }

diff --git a/locales/fr.schema.json b/locales/fr.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Afficher les sections lors du défilement"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Aucun"
+          },
+          "options__2": {
+            "label": "3D lift"
+          },
+          "label": "Effet de survol",
+          "info": "Concerne les cartes et les boutons."
         }
       }
     }

diff --git a/locales/it.schema.json b/locales/it.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Mostra sezioni durante lo scorrimento"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Nessuno"
+          },
+          "options__2": {
+            "label": "3D lift"
+          },
+          "label": "Effetto hover",
+          "info": "Riguarda schede e pulsanti."
         }
       }
     }

diff --git a/locales/ja.schema.json b/locales/ja.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "スクロールでセクションを表示する"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "なし"
+          },
+          "options__2": {
+            "label": "3Dリフト"
+          },
+          "label": "ホバー効果",
+          "info": "カードとボタンに影響を与えます。"
         }
       }
     }

diff --git a/locales/ko.schema.json b/locales/ko.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "스크롤 시 섹션 표시"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "없음"
+          },
+          "options__2": {
+            "label": "3D 리프트"
+          },
+          "label": "호버 효과",
+          "info": "카드 및 버튼에 영향을 미칩니다."
         }
       }
     }

diff --git a/locales/nb.schema.json b/locales/nb.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Vis melding ved rulling"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Ingen"
+          },
+          "options__2": {
+            "label": "3D-løft"
+          },
+          "label": "Musepekereffekt",
+          "info": "Påvirker kort og knapper."
         }
       }
     }

diff --git a/locales/nl.schema.json b/locales/nl.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Secties laten zien bij scrollen"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Geen"
+          },
+          "options__2": {
+            "label": "3D-lift"
+          },
+          "label": "Zweef-effect",
+          "info": "Wordt gebruikt voor kaarten en knoppen."
         }
       }
     }

diff --git a/locales/pl.schema.json b/locales/pl.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Pokaż sekcje podczas przewijania"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Brak"
+          },
+          "options__2": {
+            "label": "Podnoszenie 3D"
+          },
+          "label": "Efekt obszaru aktywnego",
+          "info": "Wpływa na karty i przyciski."
         }
       }
     }

diff --git a/locales/pt-BR.schema.json b/locales/pt-BR.schema.json
@@ -388,6 +388,16 @@
       "settings": {
         "animations_reveal_on_scroll": {
           "label": "Revelar seções durante a rolagem"
+        },
+        "animations_hover_elements": {
+          "options__1": {
+            "label": "Nenhum"
+          },
+          "options__2": {
+            "label": "Elevação 3D"
+          },
+          "label": "Efeito ao passar o mouse",
+          "info": "Afeta cartões e botões."
         }
       }
     }