html { --headerOffset: 0px; --bodyPadding: 0px; /* mobile viewport bug fix */ height: -webkit-fill-available; } body { padding-top: var(--bodyPadding); min-height: 100vh; /* mobile viewport bug fix */ min-height: -webkit-fill-available; } .header__mobile { font-family: "Arial", sans-serif; margin: 0 auto; max-width: 600px; position: relative; background: #0066cc; z-index: 999999; box-shadow: 0px 1px 5px 0px #0000001f; height: 54px; } .header__mobile__wrap { display: flex; align-items: center; justify-content: space-between; } .header__mobile--fixed { transition: transform 0.2s ease; position: fixed; width: 100%; top: 0; } @media (min-width: 600px) { .header__mobile--fixed { left: calc((100% - 600px) / 2); } } .header__mobile--hidden { transform: translateY(-100%); box-shadow: none; } .header__mobile__contact { float: right; position: relative; } .header__mobile__contact a { display: flex; height: 54px; width: 44px; text-decoration: none; } .header__mobile__contact .trm { font-size: 30px; color: #fff; margin: auto; display: flex; } .header__mobile__contact__tooltip { position: absolute; inset: 50px -33px auto auto; background: #fff; border-radius: 5px; box-shadow: 0 0 5px #0000004a; padding: 7px 10px; white-space: nowrap; display: none; } .header__mobile--hidden .header__mobile__contact__tooltip { top: -30px; } .header__mobile__contact__tooltip--animation { display: block; animation: headerMobileContactTooltipHide 0.2s 5s forwards; } .header__mobile__contact__tooltip::before { content: ""; border: 5px solid transparent; border-bottom-color: #fff; position: absolute; inset: -10px calc(50% - 5px) auto auto; } @keyframes headerMobileContactTooltipHide { to { opacity: 0; transform: translateY(-100%); } } .header__mobile__menu { display: flex; align-items: center; justify-content: center; } .header__mobile__menu > a { display: block; max-width: 24px; padding: 18px; } .header__mobile__menu img { width: 100%; display: block; } .header__mobile__logo { float: left; position: relative; } .header__mobile__logo > a { padding: 6px; display: block; max-width: 42px; } .header__mobile__logo img { width: 100%; display: block; } .header__mobile__logo .flaga_ukrainy { position: absolute; left: -1px; top: 3px; width: 80px; } .header__mobile__page-link { text-align: center; font-size: 20px; line-height: 20px; color: #fff; } .header__mobile__page-link a:visited { color: #fff; } .header__mobile__page-link span, .header__mobile__page-link h1 { display: inline-block; color: #fff; font-size: 16px; line-height: 16px; } @media (min-width: 360px) { .header__mobile__page-link span, .header__mobile__page-link h1 { font-size: 20px; line-height: 20px; } } .header__mobile__page-link a { color: #fff; text-decoration: none; } .header__menu__wrapper { position: absolute; left: 0; right: 0; top: 54px; overflow: hidden; height: 100vh; pointer-events: none; } #overflow { display: none; background-color: rgba(0, 0, 0, 0.5); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1002; } .dl-trigger { display: block; background: transparent; border: none; width: 26px; overflow: hidden; position: relative; cursor: pointer; outline: none; margin: 0; padding: 27px 27px; font-size: 0; line-height: 0; } .dl-trigger span, .dl-trigger span:before, .dl-trigger span:after { position: absolute; height: 3px; left: 50%; width: 26px; background: #fff; margin-left: -13px; transition: all 250ms ease-out; } .dl-trigger span { top: 50%; margin-top: -1px; } .dl-trigger span:before { content: ""; top: -7px; width: 100%; left: 50%; } .dl-trigger span:after { content: ""; top: 7px; width: 100%; left: 50%; } .dl-trigger.dl-active span { background: transparent; } .dl-trigger.dl-active span:before { transform: translateY(7px) rotate(45deg); } .dl-trigger.dl-active span:after { transform: translateY(-7px) rotate(-45deg); } .dl-trigger.new::after, #header__mobile__menu li a.new::after { content: "\e936"; color: #f54c09; position: absolute; right: 11px; bottom: 11px; font-size: 16px; line-height: 15px; font-family: "font-trojmiasto"; background: #fff; } #header__mobile__menu li a.new::after { position: static; display: inline-block; margin-left: 10px; } .dl-trigger.new.dl-active::after { display: none; } /* sylwester 2017, przeniesione do CSS ze wzgledu na walidacje, do usuniecia po wydarzeniu */ .header__mobile.newyear { background: #0066cc url("/_img/logo_okazje/logo_mobile_sylwester_2017.png") no-repeat 0 0; } .header__mobile.niepodleglosc { background: transparent url("/_img/logo_okazje/logo_mobile_niepodleglosc.jpg") no-repeat center center; } .header__mobile.niepodleglosc .header__mobile__page-link span { text-shadow: 1px 1px 1px #000; } .openMenu { overflow: hidden; }