NP redesign záhlaví

CSS

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/user/documents/upload/Titan_edits_2.css"/>

<style>
body {
font-size: 16px;
}

.hp-news,
.basic-description > h3:first-child {
display: none;
}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&display=swap');

@font-face {
font-family: 'dharma_gothic_eexbold';
src: url("https://use.typekit.net/af/8fd2dd/00000000000000007735c16f/30/l?primer=25997e4b2d192e523682a8c8448fcdbfc623d1fc5d2624d1364ca9b724e71786&fvd=n8&v=3") format("woff2"),
url("https://use.typekit.net/af/8fd2dd/00000000000000007735c16f/30/d?primer=25997e4b2d192e523682a8c8448fcdbfc623d1fc5d2624d1364ca9b724e71786&fvd=n8&v=3") format("woff"),
url("https://use.typekit.net/af/8fd2dd/00000000000000007735c16f/30/a?primer=25997e4b2d192e523682a8c8448fcdbfc623d1fc5d2624d1364ca9b724e71786&fvd=n8&v=3") format("opentype");
font-display: auto;
font-style: normal;
font-weight: 800;
font-stretch: normal;
}

:root {
--template-font: "IBM Plex Sans", sans-serif;
--template-headings-font: "dharma_gothic_eexbold", sans-serif;
}

.detail_slider .slick-slide {
padding: 10px;
}

.sand_bg {
background: #EAE4D6;
}

.wood_bg {
background: #190D0D;
}

.knp_container {
display: flex;
flex-flow: row wrap;
justify-content: center;
gap: 20px;
}

/* Fix for Safari width */
.knp_container:before,
.knp_container:after {
width: 100%;
}

@media (max-width: 768px) {
.knp_wrapper {
padding: 30px 0;
}
.knp_child1, .knp_child2, .knp_child13, .knp_child23, .knp_child3 {
width: 100%;
}
.knp_child4 {
width: calc((100% - 20px) / 2);
}
}

@media (min-width: 768px) and (max-width: 992px) {
.reversed {
flex-direction: row-reverse;
}
.knp_wrapper {
padding: 30px 0;
}
.knp_child1 {
width: 100%;
}
.knp_child2, .knp_child13, .knp_child23 {
width: calc((100% - 20px) / 2);
}
.knp_child3 {
width: calc((100% - 40px) / 3);
}
.knp_child4 {
width: calc((100% - 60px) / 4);
}
}

@media (min-width: 992px) {
.reversed {
flex-direction: row-reverse;
}
.knp_wrapper {
padding: 50px 0;
}
.knp_child1 {
width: 100%;
}
.knp_child2 {
width: calc((100% - 20px) / 2);
}
.knp_child3 {
width: calc((100% - 40px) / 3);
}
.knp_child13 {
width: calc((100% - 20px) / 3);
}
.knp_child23 {
width: calc(((100% - 20px) / 3) * 2);
}
.knp_child4 {
width: calc((100% - 60px) / 4);
}
}

.detail_slider {
padding-bottom: 70px;
}

.detail_slider.slick-slider .slick-arrow {
background-color: transparent !important;
left: calc(50% - 24px);
bottom: 0;
top: unset;
border-color: var(--color-secondary);
background-image: url(https://code2.kubanavratil.com/user/documents/upload/arrow-left_orange.svg) !important;
}

.detail_slider.slick-slider .slick-arrow.slick-next {
left: calc(50% + 24px);
background-image: url(https://code2.kubanavratil.com/user/documents/upload/arrow-right_orange.svg) !important;
}

.slick-dots {
display: flex;
padding: 0;
margin: 20px 0 0;
justify-content: center;
align-items: center;
gap: 5px;
list-style-type: none;
}

.slick-dots li {
padding: 0;
}

.slick-dots li button {
background: #f1f1f1;
border: none;
font-size: 0;
width: 30px;
height: 2px;
transition: all 0.5s ease;
}

.slick-dots li button:hover,
.slick-dots li.slick-active button:hover,
.slick-dots li.slick-active button {
background: var(--color-primary);
height: 4px;
transition: all 0.5s ease;
}

@media (max-width: 767px) {
.slick-dots li {
flex: 1;
max-width: 30px;
}
.slick-dots li button {
width: 100%;
}
}

.slick-prev.slick-arrow:after,
.slick-next.slick-arrow:after {
content: "\e90f";
font-family: shoptet;
font-size: 13px;
}

.slick-next.slick-arrow:after {
content: "\e910";
}
.hp-categories .hp-categories-posts .news-wrapper .news-item .text a:hover {
color: #F06D0E;
}
footer h4 {
color: #fff;
letter-spacing: 1px;
font-family: "dharma_gothic_eexbold" !important;
text-transform: uppercase;
font-weight: 600;
font-size: 24px;
}
.site-msg.information {
background: #F06D0E;
color: #fff;
}
#header:not(.fixed-menu) {
border-bottom: none;
}
#header .search-form fieldset input::placeholder {color:#fff;}

@media only screen and (min-width: 768px) {
#header .header-top .dropdown, #header .search-form, #header .navigation-buttons .btn.cart-count, #header .header-top .top-nav-button-account, #header .header-top .top-nav-button-login, #header .header-top .languagesMenu {
border-top-color: #2b2929;
border-right-color: #2b2929;
border-bottom-color: #2b2929;
border-left-color: #2b2929;
}
#header .header-top:before {background:#2b2929;}
}
.type-category .subcategories.with-image li a, .type-category .subcategories li a {
font-weight: 600;
color: #000;
letter-spacing: .2px;
}
</style>