/* Desktop */ :root { --size-unit: 16; /* body font-size in design - no px */ --size-container-ideal: 1440; /* screen-size in design - no px */ --size-container-min: 992px; --size-container-max: 1920px; --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max)); --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit))); } /* Tablet */ @media screen and (max-width: 991px) { :root { --size-container-ideal: 834; /* screen-size in design - no px */ --size-container-min: 768px; --size-container-max: 991px; } } /* Mobile Landscape */ @media screen and (max-width: 767px) { :root { --size-container-ideal: 550; /* screen-size in design - no px */ --size-container-min: 480px; --size-container-max: 767px; } } /* Mobile Portrait */ @media screen and (max-width: 479px) { :root { --size-container-ideal: 390; /* screen-size in design - no px */ --size-container-min: 320px; --size-container-max: 479px; } } body { font-size: var(--size-font); } .container { max-width: var(--size-container); } .container.medium { max-width: calc(var(--size-container) * 0.85); } .container.small { max-width: calc(var(--size-container) * 0.7); } .navigation__dark-bg { transition: all 0.7s cubic-bezier(0.5, 0.5, 0, 1); } /*menu*/ .flex-row-s { pointer-events: auto; } [data-navigation-status="active"] .navigation__dark-bg { opacity: 0.25; visibility: visible; } .centered-nav__content { transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1); } [data-navigation-status="active"] .centered-nav__content { grid-template-rows: 1fr; } [data-navigation-item] { transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1); opacity: 0; transform: translate(0px, 2em); } [data-navigation-status="active"] [data-navigation-item] { opacity: 1; transform: translate(0px, 0em); } [data-navigation-status="active"] .hamburger-nav__a::after { transform: scaleX(1); } .hamburger-nav__p { transition: transform 0.6s cubic-bezier(.65, 0, 0, 1); transform: translate(0px, 150%); transition-delay: inherit; } [data-navigation-status="active"] .hamburger-nav__p { transform: translate(0px, 0%); } .centered-nav__toggle .centered-nav__toggle-bar { transition: transform 0.6s cubic-bezier(.65, 0, 0, 1); transform: translateY(-0.25em) rotate(0.001deg); } .centered-nav__toggle:hover .centered-nav__toggle-bar { transform: translateY(0.25em) rotate(0.001deg); } .centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) { transform: translateY(0.15em) rotate(0.001deg); } .centered-nav__toggle:hover .centered-nav__toggle-bar:nth-child(2) { transform: translateY(-0.15em) rotate(0.001deg); } [data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar { transform: translateY(0em) rotate(45deg); } [data-navigation-status="active"] .centered-nav__toggle .centered-nav__toggle-bar:nth-child(2) { transform: translateY(0em) rotate(-45deg); } .hamburger-nav__a::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; background: currentColor; opacity: 0.2; transition-delay: inherit; transform: scaleX(0); transition: transform 0.6s cubic-bezier(.65, 0, 0, 1); } [data-navigation-status="active"] .hamburger-nav__a::after { transform: scaleX(1); } .hamburger-nav__a:hover::after { opacity: 0.4; } .centered-nav__li:last-child .hamburger-nav__a::after { height: 0px; display: none; }