diff --git a/app/globals.css b/app/globals.css index b33c7954c..6180a72f6 100644 --- a/app/globals.css +++ b/app/globals.css @@ -100,6 +100,7 @@ --max-width: 113.5rem; --max-width-content: 74.75rem; --max-width-text-block: 49.5rem; + --mobile-site-header-height: 70.047px; } * { diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css index 15ac58e6d..af3f3eee4 100644 --- a/components/Current/Header/MainMenu/mainMenu.module.css +++ b/components/Current/Header/MainMenu/mainMenu.module.css @@ -8,7 +8,7 @@ top: 0; width: 100%; z-index: 99999; - height: 70.047px; + height: var(--mobile-site-header-height); } .container { diff --git a/components/Current/Header/header.module.css b/components/Current/Header/header.module.css index 6e1001420..1e91a497c 100644 --- a/components/Current/Header/header.module.css +++ b/components/Current/Header/header.module.css @@ -4,6 +4,6 @@ @media screen and (max-width: 1366px) { .header { - height: 70.047px; + height: var(--mobile-site-header-height); } } diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css index fa3ea4f1c..494368206 100644 --- a/components/Lightbox/Lightbox.module.css +++ b/components/Lightbox/Lightbox.module.css @@ -3,7 +3,7 @@ } .mobileGallery { - margin-top: 70.047px; + margin-top: var(--mobile-site-header-height); height: 100%; position: relative; display: flex; @@ -112,7 +112,7 @@ } .fullViewContainer { - margin-top: 70.047px; + margin-top: var(--mobile-site-header-height); background-color: var(--UI-Text-High-contrast); height: 100%; padding: var(--Spacing-x2); diff --git a/components/TempDesignSystem/SidePeek/sidePeek.module.css b/components/TempDesignSystem/SidePeek/sidePeek.module.css index e08f776e8..0297f9d04 100644 --- a/components/TempDesignSystem/SidePeek/sidePeek.module.css +++ b/components/TempDesignSystem/SidePeek/sidePeek.module.css @@ -1,10 +1,10 @@ .sidePeek { position: fixed; - top: 70.047px; + top: var(--mobile-site-header-height); right: auto; bottom: 0; width: 100%; - height: calc(100vh - 70.047px); + height: calc(100vh - var(--mobile-site-header-height)); background-color: var(--Base-Background-Primary-Normal); z-index: 100; box-shadow: 0 0 10px rgba(0, 0, 0, 0.85); @@ -24,7 +24,7 @@ .overlay { position: absolute; - top: 70.047px; + top: var(--mobile-site-header-height); bottom: 0; left: 0; right: 0; @@ -46,7 +46,7 @@ } to { - top: 70.047px; + top: var(--mobile-site-header-height); } }