This commit is contained in:
Roman Pyrih
2025-09-02 16:02:20 +02:00
parent d5f7680727
commit 9c91e30d22
5 changed files with 339 additions and 1 deletions

View File

@@ -302,7 +302,14 @@ p:last-child {
}
header#masthead {
position: relative;
height: 77px;
transition: all 250ms ease-in-out;
transition-delay: 600ms;
}
header#masthead.active {
background: #232323;
transition-delay: 0ms;
}
header#masthead .row {
display: flex;
@@ -316,11 +323,47 @@ header#masthead .row {
header#masthead .row .site-branding img {
width: 246px;
min-width: 246px;
transition: all 250ms ease-in-out;
transition-delay: 600ms;
}
@media (min-width: 992px) and (max-width: 1199px) {
header#masthead .row .site-branding img {
width: 200px;
min-width: 200px;
}
}
header#masthead .row .site-branding.active img {
filter: brightness(0) invert(1);
transition-delay: 0ms;
}
@media (max-width: 991px) {
header#masthead .row nav#site-navigation {
position: absolute;
top: 76px;
left: 0;
right: 0;
background: #232323;
z-index: 10;
padding-top: 90px;
padding-bottom: 90px;
}
}
header#masthead .row nav#site-navigation ul#primary-menu {
gap: 50px;
justify-content: center;
}
@media (max-width: 1199px) {
header#masthead .row nav#site-navigation ul#primary-menu {
gap: 30px;
}
}
@media (max-width: 991px) {
header#masthead .row nav#site-navigation ul#primary-menu {
display: flex;
flex-direction: column;
gap: 40px;
}
}
header#masthead .row nav#site-navigation ul#primary-menu li {
position: relative;
}
@@ -349,6 +392,26 @@ header#masthead .row nav#site-navigation ul#primary-menu li a {
font-weight: 500;
line-height: 1;
}
@media (max-width: 991px) {
header#masthead .row nav#site-navigation ul#primary-menu li a {
color: #ffffff;
font-weight: 500;
font-size: 40px;
line-height: 1;
letter-spacing: -0.8px;
text-align: center;
}
}
@media (min-width: 992px) {
header#masthead .row nav#site-navigation ul#primary-menu li#menu-item-343, header#masthead .row nav#site-navigation ul#primary-menu li#menu-item-344 {
display: none;
}
}
@media (max-width: 991px) {
header#masthead .row nav#site-navigation {
display: none;
}
}
header#masthead .row .main-navigation-secondary {
padding: 0;
margin: 0;
@@ -358,6 +421,90 @@ header#masthead .row .main-navigation-secondary {
align-items: center;
gap: 16px;
}
@media (max-width: 991px) {
header#masthead .row .main-navigation-secondary {
display: none;
}
}
header#masthead .row #nav-menu-toggle {
color: #ffffff;
font-size: 14px;
font-weight: 500;
line-height: 1;
display: inline-flex;
align-items: center;
padding: 9px 18px;
border-radius: 100px;
border: none;
background: #232323;
text-wrap-mode: nowrap;
transition: all 250ms ease-in-out;
transition-delay: 600ms;
}
header#masthead .row #nav-menu-toggle.active {
padding: 12px 14px 12px 12px;
background: rgba(255, 255, 255, 0.2);
transition-delay: 0ms;
}
header#masthead .row #nav-menu-toggle.active .text {
padding-left: 0;
width: 0;
opacity: 0;
}
header#masthead .row #nav-menu-toggle.active .icon {
width: 11px;
height: 11px;
}
header#masthead .row #nav-menu-toggle.active .icon::before {
width: 13px;
top: 50%;
rotate: 45deg;
}
header#masthead .row #nav-menu-toggle.active .icon::after {
width: 13px;
top: 50%;
rotate: -45deg;
}
header#masthead .row #nav-menu-toggle .text {
display: inline-block;
height: 11px;
padding-left: 8px;
width: 45px;
opacity: 1;
overflow: hidden;
transition: all 250ms ease-in-out;
transition-delay: 600ms;
}
header#masthead .row #nav-menu-toggle .icon {
position: relative;
display: inline-block;
width: 13px;
height: 8px;
transition-delay: 600ms;
}
header#masthead .row #nav-menu-toggle .icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 1.5px;
width: 11px;
background: #ffffff;
transition: all 250ms ease-in-out;
transition-delay: 600ms;
}
header#masthead .row #nav-menu-toggle .icon::after {
content: "";
position: absolute;
top: calc(100% - 1.5px);
left: 0;
height: 1.5px;
width: 11px;
background: #ffffff;
transition: all 250ms ease-in-out;
transition-delay: 600ms;
}
footer#site-footer {
background: #232323;
}
@@ -531,12 +678,22 @@ body.page-id-25 main .box-1 .row {
body.page-id-25 main .box-1 .row .col-1 {
max-width: 680px;
}
@media (max-width: 1199px) {
body.page-id-25 main .box-1 .row .col-1 {
max-width: 500px;
}
}
body.page-id-25 main .box-1 .row .col-2 {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
@media (max-width: 1369px) {
body.page-id-25 main .box-1 .row .col-2 {
max-width: 430px;
}
}
body.page-id-25 main .box-1 .box-head {
margin-bottom: 24px;
}