/* HTML & BODY */
html, body{
background-color: #ECEBEB;
}
body.no-scroll{
overflow: hidden;
}
/* END HTML & BODY */
/* FONT-FACES */
@font-face {
font-family: "Lufga-Medium";
src: url(../fonts/LufgaMedium.ttf);
}
@font-face {
font-family: "Lufga-Regular";
src: url(../fonts/LufgaRegular.ttf);
}
@font-face {
font-family: "Lufga-Light";
src: url(../fonts/LufgaLight.ttf);
}
@font-face {
font-family: "Lufga-SemiBold";
src: url(../fonts/LufgaSemiBold.ttf);
}
@font-face{
font-family: "Lufga-Bold";
src: url(../fonts/LufgaBold.ttf);
}
@font-face {
font-family: "Acorn";
src: url(../fonts/acorn-7.ttf);
}
/* END FONT-FACES */
/* HEADING FONT */
h1, h2, h3, h4, h5, h6{
font-family: "Lufga-Medium";
}
/* END HEADING FONT */
/* START HEADER */
header{
background-color: #FFFFFF;
padding: 2rem 4rem;
display: flex;
position: fixed;
justify-content: center;
align-items: center;
height: 100px;
z-index: 100;
top: 0;
width: 100%;
}
header.hidden{
display: none;
}
header > .header-content{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1277px;
}
header > .header-content .logo{
display: flex;
align-items: center;
justify-content: flex-start;
width: fit-content!important;
}
header > .header-content .logo > img{
max-width: 150px;
width: 100%;
}
header > .header-content nav{
margin-right: auto;
padding: 0 8rem;
}
header > .header-content nav ul{
display: flex;
gap: 2rem;
margin-bottom: 0;
padding: 0;
align-items: center; /* TOTO JE KĽÚČOVÁ ÚPRAVA */
}
header > .header-content nav ul li{
list-style: none;
}
header > .header-content nav ul li a{
font-family: "Lufga-Medium";
text-transform: uppercase;
color: #22212A!important;
text-decoration: none;
font-size: 1.125rem;
}
header > .header-content nav ul li a.button-cta {
display: flex; /* Zabezpečí lepšie zarovnanie textu vnútri */
align-items: center;
justify-content: center;
background-color: #22212A;
color: #FFFFFF!important;
width: 159px;
height: 56px;
border-radius: 12px;
text-decoration: none;
white-space: nowrap; /* Zabraňuje zalamovaniu textu */
transition: background-color 0.3s ease;
font-family: "Acorn";
}
/* Zmena farby pozadia pri prejdení myšou */
header > .header-content nav ul li a.button-cta:hover {
background-color: #FF9B70;
color: #FFFFFF!important;
}
header > .header-content .hamburger{
display: none;
}
header > .header-content .menu-right{
display: flex;
align-items: center;
justify-items: flex-end;
gap: 1rem;
}
header > .header-content .menu-cart-holder{
background-color: #22212A;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin-left: auto;
align-items: center;
border-radius: 12px;
width: 56px;
height: 56px;
}
header > .header-content .menu-cart-holder > span{
width: 15px;
height: 15px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Lufga-Medium";
color: white;
background-color: #FF9B70;
border-radius: 50%;
position: absolute;
top: 8px;
right: 8px;
font-size: 0.625rem;
}
header > .header-content .menu-right .menu-account-holder{
background-color: #FF9B70;
display: flex;
justify-content: center;
align-items: center;
position: relative;
align-items: center;
border-radius: 12px;
width: 56px;
height: 56px;
}
header > .header-content .menu-right .menu-cart-holder > img,
header > .header-content .menu-right .menu-account-holder > img{
width: 24px;
height: 24px;
}
header > .header-content .menu-right .menu-cart-holder.mobile-menu-cart-holder{
display: none;
}
header > .header-content .menu-right .menu-language-switcher{
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
header > .header-content .menu-right .menu-language-switcher select{
background-color: white;
color: #22212A;
border: none;
padding: 0.5rem;
border-radius: 12px;
font-family: "Lufga-Medium";
font-size: 1rem;
}
header > .mobile-nav-new{
display: none;
}
header > .header-content .menu-cart-holder.mobile-menu-cart-holder{
display: none;
}
/* END HEADER */
/* MAIN COMPONENT THAT HOLDS THE CONTENT */
main{
padding-top: 100px;
}
/* END MAIN COMPONENT THAT HOLDS THE CONTENT */
/* Mapka */
.mapka-arealu {
text-align: center;
padding: 20px;
}
/* FOOTER */
footer{
background-color: #1A1920;
padding: 4rem;
padding-bottom: 0;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
}
footer .footer-partners.swiper{
max-width: 1277px;
padding-bottom: 2rem;
}
footer .footer-partners-title{
font-size: 1.25rem;
color: white;
margin-bottom: 2rem;
text-align: center;
text-transform: uppercase;
}
footer .footer-partners.swiper .swiper-wrapper{
transition-timing-function : linear;
}
footer .footer-partners.swiper .swiper-slide{
background-color: transparent;
}
footer .footer-partners.swiper .swiper-slide img{
filter: grayscale(1);
height: 75px;
object-fit: contain;
}
footer .footer-content{
max-width: 1277px;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 4rem;
}
footer .footer-content .footer-col{
display: flex;
flex-direction: column;
gap: 1rem;
}
footer .footer-content .footer-col h3{
color: white;
font-size: 1.25rem;
text-transform: uppercase;
margin-bottom: 1rem;
}
footer .footer-content .footer-col .footer-menu-item{
color: #D0D0D3;
font-family: "Lufga-Light";
font-size: 1rem;
text-decoration: none;
}
footer .footer-content .footer-col .footer-menu-item span{
color: #FF9B70;
font-family: "Lufga-Medium";
}
footer .footer-copyright{
background-color: #131218;
padding: 3rem 6rem;
margin-top: 2rem;
}
footer .footer-copyright p{
color: white;
font-family: "Lufga-Light";
text-align: center;
font-size: 0.875rem;
}
/* END FOOTER */
@media(max-width: 1500px){
header > .header-content nav{
padding: 0 8rem;
}
header > .header-content nav ul{
gap: 2rem;
}
}
@media(max-width: 1354px){
footer .footer-content{
grid-template-columns: repeat(2, 1fr);
}
header > .header-content nav{
padding: 0 4rem;
}
header{
padding: 2rem 2rem;
}
header > .header-content nav ul{
gap: 1rem;
}
}
@media(max-width: 1080px){
footer{
padding: 4rem 1rem;
padding-bottom: 0;
}
header{
padding: 2rem 1rem;
}
header > .header-content{
gap: 2rem;
}
header > .header-content nav{
display: none;
}
header > .header-content .menu-right{
display: none;
}
header > .header-content .hamburger{
display: flex;
cursor: pointer;
width: 24px;
height: 24px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
header > .header-content .hamburger > span{
width: 24px;
height: 2px;
background-color: #22212A;
border-radius: 12px;
}
header > .mobile-nav-new{
position: fixed;
top: 100px;
right: -100vw;
width: 100%;
height: calc(100vh - 100px);
background-color: #FFFFFF;
z-index: 1000;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 4rem 2rem;
}
header > .mobile-nav-new.open{
animation: slideIn 0.5s ease-out forwards;
}
header > .mobile-nav-new nav{
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 2rem;
width: 100%;
}
header > .mobile-nav-new nav ul{
display: flex;
flex-direction: column;
padding: 0;
gap: 1rem;
align-items: center;
}
header > .mobile-nav-new nav ul li{
list-style: none;
text-align: center;
}
header > .mobile-nav-new nav ul li a{
font-family: "Lufga-Medium";
text-transform: uppercase;
color: #22212A;
text-decoration: none;
font-size: 2rem;
}
header > .mobile-nav-new nav ul li a:hover{
color: #FF9B70;
}
header > .mobile-nav-new .mobile-nav-footer{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 1rem;
gap: 1rem;
}
header > .mobile-nav-new nav ul li a.button-cta {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 56px;
font-size: 1.75rem;
color: white !important;
background-color: #22212A;
border-radius: 12px;
font-family: "Acorn";
}
header .menu-cart-holder,
header > .mobile-nav-new .mobile-nav-footer .menu-account-holder{
width: 200px;
height: 56px;
display: flex;
padding: 0 3rem;
justify-content: space-between;
align-items: center;
font-family: "Lufga-Medium";
color: white;
background-color: #22212A;
border-radius: 12px;
position: relative;
}
header > .mobile-nav-new .mobile-nav-footer .menu-account-holder span{
font-family: "Lufga-Medium"!important;
color: white!important;
}
header .menu-cart-holder{
width: 56px;
padding: 0;
}
header > .mobile-nav-new .mobile-nav-footer .menu-account-holder{
background-color: #FF9B70;
}
header > .header-content .menu-cart-holder.mobile-menu-cart-holder{
display: flex;
}
header > .mobile-nav-new .mobile-nav-footer .menu-account-holder > img,
header > .menu-cart-holder > img{
width: 24px;
height: 24px;
}
header > .mobile-nav-new .mobile-nav-footer .menu-language-switcher{
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
header > .mobile-nav-new .mobile-nav-footer .menu-language-switcher select{
background-color: white;
color: #22212A;
border: none;
padding: 0.5rem;
border-radius: 12px;
font-family: "Lufga-Medium";
font-size: 1rem;
}
}
@media(max-width: 600px){
footer .footer-content{
grid-template-columns: repeat(1, 1fr);
margin: 0;
margin-right: auto;
}
}
@media(max-width: 500px){
footer .footer-copyright{
padding: 1rem;
}
}
/* KEYFRAMES */
@keyframes slideIn{
0%{
right: -100vw;
}
100%{
right: 0;
}
}