:root {
--jkp-green-00: #153E43;
--jkp-green-01: #287680;
--jkp-green-02: #CFE5E4;
--light-gray: #F8F8F8;
--white: #FFFFFF;
--black: #000000;
--font-primary: 'Roboto', sans-serif;
--font-condensed: 'Roboto Condensed', sans-serif;
--fs-h1: 2rem;
--fs-h2: 1.5rem;
--fs-h3: 1.25rem;
--fs-body: 1rem;
--fs-small: 0.875rem;
--fs-xs: 0.75rem;
--fw-regular: 400;
--fw-medium: 500;
--fw-bold: 700;
--container-width: 1140px;
--container-padding: 0 20px;
--sidebar-width: 260px;
--gap: 40px;
--section-padding: 60px 0;
--row-padding: 12px 20px;
--header-height: 80px;
--title-bar-padding: 20px 0;
--radius-sm: 4px;
--transition: 0.3s ease;
} @font-face {
font-family: 'Roboto';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-v51-latin-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-v51-cyrillic_cyrillic-ext-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Roboto';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-v51-latin-700.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-v51-cyrillic_cyrillic-ext-700.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Roboto Condensed';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-condensed-v31-latin-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto Condensed';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-condensed-v31-cyrillic_cyrillic-ext-regular.woff2) format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
font-family: 'Roboto Condensed';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-condensed-v31-latin-700.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Roboto Condensed';
src: url(//jkpmerosina.rs/wp-content/themes/jkp-merosina/fonts/roboto-condensed-v31-cyrillic_cyrillic-ext-700.woff2) format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
} *,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--font-primary);
font-weight: var(--fw-regular);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--black);
background-color: var(--white);
min-height: 100vh;
display: flex;
flex-direction: column;
}
#page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: var(--jkp-green-01);
text-decoration: none;
transition: color var(--transition);
}
a:hover {
color: var(--jkp-green-00);
}
ul, ol {
list-style: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
line-height: 1.3;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); } .jkp-container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: var(--container-padding);
} .site-header {
background-color: var(--white);
height: var(--header-height);
position: relative;
z-index: 100;
}
.site-header .jkp-container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
}
.site-logo {
flex-shrink: 0;
}
.site-logo img {
height: 50px;
width: auto;
}
.main-nav {
flex: 1;
display: flex;
justify-content: center;
}
.main-nav ul {
display: flex;
align-items: center;
gap: 32px;
}
.main-nav a {
font-family: var(--font-condensed);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--black);
padding: 8px 0;
position: relative;
transition: color var(--transition);
}
.main-nav a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 3px;
background-color: var(--jkp-green-01);
transition: width var(--transition);
}
.main-nav a:hover,
.main-nav .current-menu-item a {
color: var(--jkp-green-01);
}
.main-nav a:hover::after,
.main-nav .current-menu-item a::after {
width: 100%;
}
.lang-switch {
flex-shrink: 0;
}
#btn-pismo {
font-family: var(--font-condensed);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--black);
background: var(--white);
border: 1px solid var(--black);
padding: 6px 16px;
cursor: pointer;
transition: all var(--transition);
}
#btn-pismo:hover {
background-color: var(--jkp-green-00);
border-color: var(--jkp-green-00);
color: var(--white);
}
.hamburger {
display: none;
cursor: pointer;
background: none;
border: none;
padding: 4px;
font-size: 1.5rem;
color: var(--black);
}
.hamburger svg {
width: 24px;
height: 24px;
fill: var(--black);
display: block;
transition: fill var(--transition);
}
.hamburger:hover {
color: var(--jkp-green-01);
}
.hamburger:hover svg {
fill: var(--jkp-green-01);
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
} .title-bar {
background-color: var(--jkp-green-00);
padding: var(--title-bar-padding);
}
.title-bar h1 {
color: var(--white);
font-family: var(--font-condensed);
font-size: var(--fs-h1);
font-weight: var(--fw-bold);
} .site-main {
flex: 1 0 auto;
padding: 0;
}
.jkp-content {
display: block;
}
.jkp-content--with-sidebar {
display: grid;
grid-template-columns: var(--sidebar-width) 1fr;
gap: var(--gap);
align-items: start;
}
.site-main:not(.site-main--frontpage) {
padding-top: 100px !important;
padding-bottom: 40px !important;
} .jkp-sidebar {
border: 0px solid red;
border-radius: 3px;
padding: 16px 16px;
background: var(--light-gray);
}
.jkp-sidebar__title {
font-family: var(--font-condensed);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--black);
margin-bottom: 16px;
padding-top: 4px;
padding-bottom: 12px;
border-bottom: 2px solid var(--jkp-green-01);
}
.jkp-sidebar__year {
margin-bottom: 4px;
}
.jkp-sidebar__year-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 12px;
font-family: var(--font-primary);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
color: var(--black);
background: none;
border: none;
cursor: pointer;
transition: background-color var(--transition);
}
.jkp-sidebar__year-btn:hover {
background-color: var(--jkp-green-02);
}
.jkp-sidebar__year-btn .icon-toggle {
display: flex;
align-items: center;
flex-shrink: 0;
} .jkp-sidebar__year-btn .icon-chevron-up { display: none; }
.jkp-sidebar__year-btn .icon-chevron-down { display: block; } .jkp-sidebar__year-btn--active .icon-chevron-up { display: block; }
.jkp-sidebar__year-btn--active .icon-chevron-down { display: none; }
.jkp-sidebar__categories {
display: none;
padding-left: 0;
}
.jkp-sidebar__categories--open {
display: block;
}
.jkp-sidebar__cat-link {
display: block;
padding: 8px 12px;
font-size: var(--fs-small);
color: var(--jkp-green-01);
transition: background-color var(--transition);
}
.jkp-sidebar__cat-link:hover,
.jkp-sidebar__cat-link--active {
background-color: var(--jkp-green-02);
color: var(--jkp-green-00);
} .page-slug-informacije .jkp-sidebar__year-btn--active {
background-color: var(--jkp-green-02);
} .page-slug-javne-nabavke .jkp-sidebar__year-btn--active {
background-color: transparent;
} .page-slug-dokumenta .jkp-sidebar__year-btn--active {
background-color: var(--jkp-green-02);
} .jkp-row-list .jkp-row:first-child {
margin-top: 16px;
}
.jkp-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--row-padding)!important;
margin-bottom: 8px;
background-color: var(--light-gray);
border: none;
border-radius: var(--radius-sm);
transition: background-color var(--transition);
}
.jkp-row:hover {
background-color: var(--jkp-green-02);
}
.jkp-row__content {
flex: 1;
min-width: 0;
}
.jkp-row__naziv {
display: block;
font-family: var(--font-condensed);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--black);
margin-bottom:0;
}
.jkp-row__info {
display: block;
font-size: var(--fs-small);
color: #555;
margin-bottom: 0;
}
.jkp-row__datum {
display: block;
font-size: var(--fs-xs);
color: #888;
}
.jkp-row__action {
flex-shrink: 0;
margin-left: 20px;
display: flex;
align-items: center;
}
.jkp-row__cena {
font-family: var(--font-condensed);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--black);
white-space: nowrap;
}
.jkp-row__download {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
color: var(--jkp-green-01);
transition: color var(--transition);
}
.jkp-row__download:hover {
color: var(--jkp-green-00);
}
.jkp-row__download svg {
width: 36px;
height: 36px;
fill: var(--jkp-green-01);
stroke: var(--jkp-green-01);
transition: fill var(--transition), stroke var(--transition);
}
.jkp-row__download:hover svg {
fill: var(--jkp-green-00);
stroke: var(--jkp-green-00);
}
.jkp-row-list__title {
font-family: var(--font-condensed);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
color: var(--jkp-green-01);
padding-top: 16px;
padding-bottom: 12px;
margin-bottom: 0;
border-bottom: 2px solid var(--jkp-green-01);
} .jkp-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
margin-top: 40px;
}
.jkp-pagination .prev,
.jkp-pagination .next {
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 48px;
background-color: var(--jkp-green-02);
border: none;
font-size: 1.25rem;
color: var(--black);
transition: background-color var(--transition);
border-radius: var(--radius-sm);
}
.jkp-pagination .prev svg,
.jkp-pagination .next svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.jkp-pagination .prev:hover,
.jkp-pagination .next:hover {
background-color: var(--jkp-green-01);
color: var(--white);
}
.jkp-pagination .prev--disabled,
.jkp-pagination .next--disabled {
background-color: var(--light-gray);
color: #ccc;
pointer-events: none;
cursor: default;
}
.jkp-pagination .jkp-pagination__info {
font-family: var(--font-condensed);
font-size: var(--fs-h2);
color: var(--black);
}
.jkp-pagination .jkp-pagination__info .jkp-pagination__total {
color: #ccc;
} .jkp-kontakt {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--gap);
}
.jkp-kontakt__info {
border-right: 1px solid #ddd;
padding-right: var(--gap);
}
.jkp-kontakt__info h2 {
font-family: var(--font-condensed);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
margin-bottom: 16px;
}
.jkp-kontakt__info p {
font-size: var(--fs-body);
line-height: 1.6;
color: #555;
}
.jkp-kontakt__forma h2 {
font-family: var(--font-condensed);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
margin-bottom: 24px;
}
.jkp-mapa iframe {
width: 100%;
height: 300px;
border: none;
border-radius: var(--radius-sm);
margin-bottom: 24px;
}
.page-slug-kontakt .wp-block-columns {
max-width: var(--container-width);
margin: 0 auto;
} .page-slug-kontakt .entry-content {
max-width: var(--container-width);
padding-top: 40px;
}
.page-slug-kontakt .jkp-prijava-problema {
background-color: var(--light-gray);
padding: 32px 72px !important;
margin-top: 48px;
} .jkp-kontakt__forma .ff-el-input--content input[type="text"],
.jkp-kontakt__forma .ff-el-input--content input[type="email"],
.jkp-kontakt__forma .ff-el-input--content input[type="tel"],
.jkp-kontakt__forma .ff-el-input--content textarea,
.jkp-kontakt__forma .ff-el-input--content select {
font-family: var(--font-primary);
font-size: var(--fs-body);
border: 1px solid #ddd;
border-radius: 0;
padding: 12px 16px;
width: 100%;
transition: border-color var(--transition);
}
.jkp-kontakt__forma .ff-el-input--content input:focus,
.jkp-kontakt__forma .ff-el-input--content textarea:focus {
border-color: var(--jkp-green-01);
outline: none;
box-shadow: none;
}
.jkp-kontakt__forma .ff-btn-submit {
font-family: var(--font-condensed);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
background-color: var(--jkp-green-01);
color: var(--white);
border: none;
padding: 12px 32px;
cursor: pointer;
transition: background-color var(--transition);
}
.jkp-kontakt__forma .ff-btn-submit:hover {
background-color: var(--jkp-green-00);
}
.jkp-prijava-problema .fluentform .ff-el-group {
margin-bottom: 12px;
}
.jkp-prijava-problema .fluentform input[type="text"],
.jkp-prijava-problema .fluentform input[type="email"],
.jkp-prijava-problema .fluentform input[type="tel"],
.jkp-prijava-problema .fluentform textarea {
font-family: var(--font-primary);
font-size: var(--fs-body);
padding: 10px 14px;
border: 1px solid #ddd;
border-radius: var(--radius-sm);
}
.jkp-prijava-problema .fluentform input:focus,
.jkp-prijava-problema .fluentform textarea:focus {
border-color: var(--jkp-green-01);
outline: none;
box-shadow: none;
}
.jkp-prijava-problema .fluentform .ff-el-section-break h3 {
font-family: var(--font-condensed);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
margin-bottom: 12px;
}
.jkp-prijava-problema .fluentform .ff-btn-submit {
font-family: var(--font-condensed);
font-size: var(--fs-body);
font-weight: var(--fw-medium);
background-color: var(--jkp-green-01) !important;
color: var(--white);
border: none;
border-radius: var(--radius-sm);
padding: 12px 32px;
cursor: pointer;
transition: background-color var(--transition);
}
.jkp-prijava-problema .fluentform .ff-btn-submit:hover,
.jkp-prijava-problema .fluentform .ff-btn-submit:focus,
.jkp-prijava-problema .fluentform .ff-btn-submit:active {
background: var(--jkp-green-00) !important;
background-color: var(--jkp-green-00) !important;
color: #ffffff !important;
opacity: 1 !important;
filter: none !important;
}
.jkp-prijava-problema .fluentform .ff-el-input--label {
display: none;
} .footer-logo {
max-height: 50px;
width: auto;
margin-bottom: 24px;
}
.site-footer {
background-color: var(--jkp-green-00);
color: var(--white);
padding: 60px 0 0;
margin-top: 0;
flex-shrink: 0;
}
.site-footer .jkp-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gap);
}
.footer-col__title {
font-family: var(--font-condensed);
font-size: var(--fs-body);
font-weight: var(--fw-bold);
color: var(--white);
margin-bottom: 16px;
}
.footer-col__text {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.7);
line-height: 0.5em;
}
.footer-col ul {
display: flex;
flex-direction: column;
gap: 4px;
}
.footer-col a {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.7);
transition: color var(--transition);
}
.footer-col a:hover {
color: var(--white);
}
.footer-col__address {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.7);
line-height: 1.8;
font-style: normal;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin-top: 40px;
padding: 20px 0;
text-align: center;
font-size: var(--fs-xs);
color: rgba(255, 255, 255, 0.5);
} .entry-content {
padding: var(--section-padding);
}
.entry-content p {
margin-bottom: 1rem;
line-height: 1.7;
font-family: var(--font-condensed);
}
.entry-content h2 {
margin-top: 2rem;
margin-bottom: 1rem;
}
.entry-content h3 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.entry-content ul,
.entry-content ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
font-family: var(--font-condensed) !important;
}
.entry-content ul {
list-style: disc;
}
.entry-content ol {
list-style: decimal;
}
.entry-content li {
margin-bottom: 0.5rem;
font-family: var(--font-condensed) !important;
}
.entry-content a {
text-decoration: underline;
}
.entry-content blockquote {
border-left: 3px solid var(--jkp-green-01);
padding-left: 1rem;
margin: 1.5rem 0;
font-style: italic;
color: #555;
}
.entry-content table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
}
.entry-content th,
.entry-content td {
padding: 10px 14px;
border: 1px solid #ddd;
text-align: left;
}
.entry-content th {
background-color: var(--light-gray);
font-weight: var(--fw-bold);
}
.jkp-under-info {
padding: 16px;
}
.jkp-under-info hr {
margin-bottom: 24px !important;
} .site-main--frontpage {
padding: 0;
}
.site-main--frontpage > * {
margin-bottom: 0;
} .site-main--frontpage .wp-block-group > .wp-block-group__inner-container {
max-width: var(--container-width);
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
} .jkp-section-onama,
.jkp-section-servis {
width: 100%;
max-width: 100%;
}
.jkp-section-onama > .wp-block-group__inner-container,
.jkp-section-servis > .wp-block-group__inner-container {
max-width: var(--container-width);
margin: 0 auto;
padding-left: 20px;
padding-right: 20px;
} .jkp-hero {
position: relative;
line-height: 0;
width: 100%;
} .jkp-hero > .wp-block-group__inner-container {
max-width: 100% !important;
padding: 0 !important;
position: relative;
} .jkp-hero figure.wp-block-image {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
display: block;
}
.jkp-hero figure.wp-block-image img {
width: 100% !important;
max-width: 100% !important;
height: 500px;
object-fit: cover;
object-position: center;
display: block;
} .jkp-hero .jkp-hero__box {
position: absolute;
top: 50%;
left: max(20px, calc((100vw - var(--container-width)) / 2 + 20px));
transform: translateY(-50%);
z-index: 10;
} .jkp-hero .jkp-hero__box > .wp-block-group__inner-container {
max-width: 100% !important;
padding: 0 !important;
}
.jkp-hero__box {
background-color: rgba(40, 118, 128, 0.85);
padding: 40px;
max-width: 420px;
line-height: 1.3;
}
.jkp-hero__box h1,
.jkp-hero__box h2 {
font-family: var(--font-condensed);
font-weight: var(--fw-bold);
font-size: 2rem;
color: var(--white);
line-height: 1.2;
margin-bottom: 16px;
text-transform: uppercase;
}
.jkp-hero__box p {
font-size: var(--fs-small);
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
margin-bottom: 0;
} .jkp-section-usluge {
padding: 60px 0;
text-align: center;
}
.jkp-section-usluge h2 {
font-family: var(--font-condensed);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
color: var(--black);
margin-bottom: 8px;
}
.jkp-section-usluge .jkp-section-label {
font-family: var(--font-condensed);
font-size: var(--fs-xs);
font-weight: var(--fw-medium);
color: var(--jkp-green-01);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 4px;
} .jkp-usluge-grid.wp-block-group > .wp-block-group__inner-container {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 32px !important;
max-width: var(--container-width) !important;
margin: 40px auto !important;
padding: 0 40px !important;
}
.jkp-usluga-icon.wp-block-group > .wp-block-group__inner-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
} .jkp-usluga-icon span,
.jkp-usluga-icon p {
font-family: var(--font-condensed);
font-size: var(--fs-small);
font-weight: var(--fw-medium);
color: var(--black);
margin: 0;
}
.jkp-usluga-icon svg {
width: 48px;
height: 48px;
fill: var(--jkp-green-01);
background: white;
} .wp-block-button__link {
font-family: var(--font-condensed) !important;
font-size: var(--fs-body) !important;
font-weight: var(--fw-medium) !important;
background-color: var(--jkp-green-01) !important;
color: var(--white) !important;
border: none !important;
border-radius: var(--radius-sm) !important;
padding: 12px 32px !important;
transition: background-color var(--transition) !important;
}
.wp-block-button__link:hover {
background-color: var(--jkp-green-00) !important;
color: var(--white) !important;
} .wp-block-buttons {
margin-top: 24px;
} .jkp-section-onama {
background-color: var(--light-gray);
padding: 60px 0;
text-align: center;
}
.jkp-section-onama h2 {
font-family: var(--font-condensed);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
color: var(--black);
margin-bottom: 16px;
}
.jkp-section-onama p {
max-width: 700px;
margin: 0 auto 40px;
font-size: var(--fs-body);
color: #555;
line-height: 1.7;
} .jkp-kartice {
padding: 60px 0;
}
.jkp-kartice.wp-block-group > .wp-block-group__inner-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 800px;
margin: 0 auto;
}
.jkp-kartica.wp-block-group > .wp-block-group__inner-container {
background-color: var(--white);
border: 1px solid #ddd;
padding: 32px 24px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.jkp-kartica h3 {
font-family: var(--font-condensed);
font-size: var(--fs-h3);
font-weight: var(--fw-bold);
color: var(--black);
margin: 0;
}
.jkp-kartica p {
font-size: var(--fs-small);
color: #555;
line-height: 1.6;
margin: 0;
}
.jkp-kartica .wp-block-button__link {
font-size: var(--fs-small) !important;
padding: 8px 24px !important;
} .jkp-section-servis {
background-color: var(--jkp-green-02);
padding: 60px 0;
text-align: center;
}
.jkp-section-servis h2 {
font-family: var(--font-condensed);
font-size: var(--fs-h2);
font-weight: var(--fw-bold);
color: var(--black);
margin-bottom: 16px;
}
.jkp-section-servis p {
max-width: 700px;
margin: 0 auto 16px;
font-size: var(--fs-body);
color: #555;
line-height: 1.7;
} @media (max-width: 1140px) {
:root {
--container-padding: 0 24px;
}
.jkp-content--with-sidebar {
grid-template-columns: 220px 1fr;
gap: 24px;
}
} @media (max-width: 768px) {
:root {
--fs-h1: 1.5rem;
--fs-h2: 1.25rem;
--header-height: 64px;
}
.site-main:not(.site-main--frontpage) {
padding-top: 40px !important;
padding-bottom: 20px !important;
}
.main-nav {
display: none;
position: absolute;
top: var(--header-height);
left: 0;
width: 100%;
background-color: var(--white);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 16px 0;
z-index: 99;
}
.main-nav--open {
display: block;
}
.main-nav ul {
flex-direction: column;
gap: 0;
}
.main-nav a {
display: block;
padding: 12px 24px;
}
.main-nav a::after {
display: none;
}
.hamburger {
display: flex;
}
.jkp-content--with-sidebar {
grid-template-columns: 1fr;
gap: 24px;
}
.jkp-sidebar {
border-right: none;
border-bottom: 1px solid var(--light-gray);
padding-right: 0;
padding-bottom: 16px;
}
.jkp-sidebar__years {
display: flex;
flex-direction: column;
gap: 0;
}
.jkp-sidebar__year {
margin-bottom: 0;
}
.jkp-sidebar__year-btn {
padding: 8px 16px;
font-size: var(--fs-small);
}
.site-footer .jkp-container {
grid-template-columns: 1fr 1fr;
gap: 32px;
}
.jkp-kontakt {
grid-template-columns: 1fr;
}
.jkp-kontakt__info {
border-right: none;
border-bottom: 1px solid #ddd;
padding-right: 0;
padding-bottom: 24px;
} .jkp-hero__box {
left: 24px;
right: 24px;
max-width: calc(100% - 48px);
padding: 24px;
}
.jkp-hero__box h1,
.jkp-hero__box h2 {
font-size: 1.5rem;
}
.jkp-usluge-grid.wp-block-group > .wp-block-group__inner-container {
grid-template-columns: repeat(2, 1fr) !important;
gap: 24px !important;
padding: 0 20px !important;
}
.jkp-kartice.wp-block-group > .wp-block-group__inner-container {
grid-template-columns: 1fr;
gap: 16px;
}
.page-slug-kontakt .jkp-prijava-problema {
padding: 24px 24px !important;
}
.header-actions {
display: flex;
align-items: center;
gap: 24px;
} .main-nav a:hover {
background-color: var(--jkp-green-02);
}
.main-nav .current-menu-item a {
background-color: var(--jkp-green-02);
}
.main-nav li {
width: 100%;
}
.main-nav a {
display: block;
width: 100%;
padding: 12px 24px;
text-align: right;
}
.main-nav a:hover,
.main-nav .current-menu-item a {
background-color: var(--jkp-green-02);
}
} @media (max-width: 480px) {
:root {
--fs-h1: 1.25rem;
--fs-h2: 1.125rem;
--section-padding: 32px 0;
--row-padding: 12px 16px;
--container-padding: 0 12px;
}
.site-main:not(.site-main--frontpage) {
padding-top: 24px !important;
padding-bottom: 16px !important;
}
.site-footer .jkp-container {
grid-template-columns: 1fr;
gap: 24px;
}
.jkp-container {
padding-left: 12px;
padding-right: 12px;
}
.jkp-row {
flex-wrap: nowrap;
gap: 8px;
}
.jkp-row__action {
margin-left: auto;
width: 15%;
min-width: 40px;
justify-content: flex-end;
}
.jkp-pagination {
gap: 4px;
}
.jkp-pagination a,
.jkp-pagination span {
min-width: 32px;
height: 32px;
font-size: var(--fs-xs);
}
.jkp-hero__box {
left: 12px;
right: 12px;
max-width: calc(100% - 24px);
padding: 20px 16px;
}
.jkp-hero__box h1,
.jkp-hero__box h2 {
font-size: 1.25rem;
}
.jkp-usluge-grid.wp-block-group > .wp-block-group__inner-container {
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
}
.page-slug-kontakt .jkp-prijava-problema {
padding: 24px 10px !important;
}
}