diff --git a/styles/globals.css b/styles/globals.css index f608428e..6bd560ba 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -211,8 +211,8 @@ a{ color:inherit; text-decoration:none; } position: fixed; top: -11px; left: 42px; - width: 102px; - height: 102px; + width: 120px; + height: 120px; opacity: 1; pointer-events: auto; transform: none; @@ -220,13 +220,15 @@ a{ color:inherit; text-decoration:none; } } .so-header--scrolled .so-home__icon{ - width: 102px; - height: 102px; + width: 120px; + height: 120px; } .so-header--scrolled .so-home__icon::before, .so-header--scrolled .so-home__icon::after{ - background-size: 100% 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; } /* Small cart icon top right in scrolled header */ @@ -234,8 +236,8 @@ a{ color:inherit; text-decoration:none; } position: fixed; top: -67px; right: 2px; - width: 180px; - height: 180px; + width: 120px; + height: 120px; opacity: 1; pointer-events: auto; transform: none; @@ -243,13 +245,15 @@ a{ color:inherit; text-decoration:none; } } .so-header--scrolled .so-cart__icon{ - width: 180px; - height: 180px; + width: 120px; + height: 120px; } .so-header--scrolled .so-cart__icon::before, .so-header--scrolled .so-cart__icon::after{ - background-size: 100% 100%; + background-size: contain; + background-repeat: no-repeat; + background-position: center; } /* Small cart badge for scrolled header */ @@ -518,16 +522,16 @@ a{ color:inherit; text-decoration:none; } justify-content:center; gap:0; cursor:pointer; - width:150px; - height:150px; + width:120px; + height:120px; padding:0; - transform: translate(10px, 20px) scale(1.2); + transform: translate(10px, 20px); transition: opacity var(--so-header-duration) var(--so-header-ease); } .so-home__icon{ - width:150px; - height:150px; + width:120px; + height:120px; display:block; position:relative; filter: drop-shadow(0 0 10px rgba(255,255,255,0.12)); @@ -726,15 +730,15 @@ a{ color:inherit; text-decoration:none; } align-items:center; justify-content:center; cursor:pointer; - width: clamp(180px, 16vw, 270px); - height: clamp(180px, 16vw, 270px); - transform: scale(1.1); + width: 120px; + height: 120px; + transform: none; transition: opacity var(--so-header-duration) var(--so-header-ease); } .so-cart__icon{ - width: clamp(180px, 16vw, 270px); - height: clamp(180px, 16vw, 270px); + width: 120px; + height: 120px; display:block; position:relative; filter: drop-shadow(0 0 10px rgba(255,255,255,0.12)); @@ -758,7 +762,6 @@ a{ color:inherit; text-decoration:none; } .so-cart__icon::after{ background-image: url("/icons/cart-open.png"); - background-size: calc(100% - 5px) calc(100% - 5px); opacity:0; } @@ -816,18 +819,21 @@ a{ color:inherit; text-decoration:none; } align-items:center; justify-content:center; cursor:pointer; - transform: translate(clamp(70px, 8vw, 125px), clamp(5px, 1vw, 15px)) scale(1.1); + transform: translate(clamp(70px, 8vw, 125px), clamp(5px, 1vw, 15px)); transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1); } .so-merch:hover{ - transform: translate(clamp(70px, 8vw, 125px), clamp(5px, 1vw, 15px)) scale(1.15); + transform: translate(clamp(70px, 8vw, 125px), clamp(5px, 1vw, 15px)); } .so-merch__icon{ position:absolute; - width: clamp(80px, 7.5vw, 120px); - height: clamp(80px, 7.5vw, 120px); + width: 120px; + height: 120px; + background-size: contain; + background-repeat: no-repeat; + background-position: center; object-fit:contain; opacity:0; transition: opacity 500ms ease; @@ -846,7 +852,7 @@ a{ color:inherit; text-decoration:none; } transition: opacity 600ms cubic-bezier(0.25, 0.1, 0.25, 1); justify-content:center; cursor:pointer; - transform: translateY(20px) scale(1.15); + transform: translateY(20px); outline: none; } @@ -855,8 +861,8 @@ a{ color:inherit; text-decoration:none; } } .so-rewards__icon{ - width: clamp(198px, 18vw, 297px); - height: clamp(198px, 18vw, 297px); + width: 120px; + height: 120px; display:block; position:relative; filter: drop-shadow(0 0 10px rgba(255,255,255,0.12));