// ============================================================================ // :: Batteripedia // ============================================================================ /** * The styling applied to the tag on the page containing the 'p-home' * class */ // ============================================================================ // :: Root // ============================================================================ .p-batteripedia { position: relative; .m-hero { overflow: visible; } } // ============================================================================ // :: Elements // ============================================================================ // .p-batteripedia__hero {} // Steps container .p-batteripedia__steps { margin: 0; padding: 0; background-color: transparent; box-shadow: none; transform: none; &::after { display: none; } .m-step__text { display: inline; } } .p-batteripedia__danger-cta { overflow: visible; .m-cta__image-container { position: relative; overflow: visible; } .m-cta__image { position: relative; height: 100%; margin-top: 2rem; @include respond-at($screen-small-base) { position: absolute; top: 4rem; transform: scale(0.5) translateY(-50%); } } } // ============================================================================ // :: Hero illustrations // ============================================================================ // Hero illustrations from left to right // laptop battery illustration .p-batteripedia__hero-ill1 { position: absolute; left: 2rem; bottom: -4vw; height: 25vw; max-height: 20rem; transform-origin: center; @include respond-at($screen-small-base) { height: 15vw; } @include respond-at($screen-medium-base) { height: 10vw; } @include respond-at($container-width) { left: calc((100% - 1360px) / 2); } } // batterij-foto illustration .p-batteripedia__hero-ill2 { position: absolute; left: calc(2rem + 20vw); bottom: -4vw; height: 25vw; max-height: 20rem; transform-origin: center; @include respond-at($screen-small-base) { left: calc(2rem + 15vw); height: 15vw; } @include respond-at($screen-medium-base) { left: calc(2rem + 10vw); height: 10vw; } @include respond-at($container-width) { left: calc((100% - 1360px) / 2 + 10vw); } } // batterypack illustration .p-batteripedia__hero-ill3 { position: absolute; left: calc(2rem + 40vw); bottom: -4vw; height: 25vw; max-height: 20rem; transform-origin: center; @include respond-at($screen-small-base) { left: calc(2rem + 30vw); height: 15vw; } @include respond-at($screen-medium-base) { left: calc(2rem + 20vw); height: 10vw; } @include respond-at($container-width) { left: calc((100% - 1360px) / 2 + 20vw); height: 10vw; } } // AA-battery illustration .p-batteripedia__hero-ill4 { position: absolute; bottom: 2vw; right: 2rem; height: 25vw; max-height: 20rem; transform-origin: center; @include respond-at($screen-small-base) { height: 20vw; } @include respond-at($screen-medium-base) { height: 18vw; } @include respond-at($container-width) { right: calc((100% - 1360px) / 2 + 10vw); } } // ============================================================================ // :: Classics illustrations // ============================================================================ // Classics illustrations from left to right // aa-batterij .p-batteripedia__classics-ill1 { float: left; height: 19.5rem; margin-top: 4rem; margin-left: -8rem; @include respond-to($screen-small-base) { height: 12rem; margin-left: -4rem; } } // knoopcel .p-batteripedia__classics-ill2 { position: relative; top: 4rem; z-index: $z-index-highest; float: right; height: 10rem; margin-top: -7rem; margin-right: -5rem; @include respond-at($screen-small-base) { height: 20rem; margin-right: -10rem; } } // 9 volt .p-batteripedia__classics-ill3 { float: right; height: 16rem; margin-right: -4rem; @include respond-to($screen-small-base) { height: 8rem; } } // ============================================================================ // :: School illustrations // ============================================================================ // School illustrations from left to right // foto-batterij .p-batteripedia__school-ill1 { float: left; height: 14.5rem; margin-top: 2rem; margin-right: 1rem; margin-left: -6rem; @include respond-to($screen-small-base) { height: 8rem; } } // 4.5 volt .p-batteripedia__school-ill2 { float: right; height: 20.5rem; margin-right: -4rem; @include respond-to($screen-small-base) { height: 10rem; } } // vape .p-batteripedia__school-ill3 { height: 12rem; margin-top: 2rem; margin-bottom: -8rem; margin-left: 50%; transform: translateX(-50%); @include respond-to($screen-small-base) { height: 8rem; } } // boormachine .p-batteripedia__school-ill4 { float: right; height: 16rem; margin-top: -4rem; margin-right: -4rem; @include respond-to($screen-small-base) { height: 8rem; margin-top: -2rem; margin-right: -2rem; } } // laptop .p-batteripedia__school-ill5 { float: right; height: 19rem; margin-right: -5rem; @include respond-to($screen-small-base) { height: 10rem; margin-right: -2rem; } } // weidebatterij .p-batteripedia__school-ill6 { position: relative; top: 3rem; float: right; height: 11.4rem; margin-right: -4rem; transform: scaleX(-1); @include respond-to($screen-small-base) { height: 8rem; margin-right: -2rem; } } // alarminstallatie .p-batteripedia__school-ill7 { float: right; height: 10.4rem; margin-right: -6rem; margin-bottom: -4rem; margin-left: 1rem; transform: scaleX(-1); @include respond-to($screen-small-base) { height: 8rem; margin-right: -4rem; } } // powerbank .p-batteripedia__school-ill8 { float: right; height: 8.7rem; margin-top: 2rem; margin-right: -2rem; @include respond-to($screen-small-base) { height: 5rem; } } // blokbatterij .p-batteripedia__school-ill9 { float: right; height: 19rem; margin-right: -4rem; @include respond-to($screen-small-base) { height: 14rem; } } // ============================================================================ // :: School illustrations // ============================================================================ // School illustrations from left to right // Naaktbatterij .p-batteripedia__danger-ill1 { position: relative; top: 4rem; right: -2rem; float: right; height: 13.4rem; margin-right: -4rem; transform: scaleX(-1); @include respond-to($screen-small-base) { height: 10rem; } } // Autobatterij .p-batteripedia__danger-ill2 { position: relative; top: 2rem; float: right; height: 14rem; margin-top: 5rem; transform: scaleX(-1); @include respond-to($screen-small-base) { height: 8rem; margin-top: 0; } } // modelbouwtoestel .p-batteripedia__danger-ill3 { float: right; height: 16.7rem; margin-right: -6rem; @include respond-to($screen-small-base) { height: 12rem; margin-top: 0; } } // batterijpack .p-batteripedia__danger-ill4 { position: relative; top: -4rem; float: right; height: 14.7rem; margin-right: -2rem; @include respond-to($screen-small-base) { height: 10rem; } } // tractiebatterij .p-batteripedia__danger-ill5 { position: relative; top: 5rem; float: right; height: 13rem; margin-right: -2rem; margin-bottom: -4rem; @include respond-to($screen-small-base) { top: 1rem; height: 10rem; } } // elektrische fiets .p-batteripedia__danger-ill6 { float: right; height: 16.7rem; margin-top: -4rem; @include respond-to($screen-small-base) { height: 12rem; margin-top: -2rem; } } // ============================================================================ // :: Modifiers // ============================================================================