:root { --font-naslov: "Bricolage Grotesque", "Hanken Grotesk", -apple-system, sans-serif;
--font-tekst: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif; --mera: 58ch; --prelom-usko: 640px;
--prelom-srednje: 980px;
--prelom-siroko: 1240px; --podloga: #ffffff;
--podloga-mirna: #f2f6f9;
--podloga-tamna: #2d3e50;
--tekst: #2d3e50; --tekst-blagi: #5c6f82; --tekst-na-tamnom: #e8eef4;
--tekst-na-tamnom-blagi: #b9c9d8;
--akcenat: #0398db; --akcenat-tamni: #0272a6;  --dugme-podloga: #0272a6; --dugme-podloga-jaca: #01608c; --istaknuto: #ffc94a;  --tekst-na-zutom: #3d4d5e;  --radius-polje: 14px;
--greska: #c0392b;
--istaknuto-jaci: #ffd977;
--crta: rgba(45, 62, 80, .12);
--crta-jaka: rgba(45, 62, 80, .28); --bela: #ffffff;
--mrak: #0b1219; --tekst-na-tamnom-jaci: #dce6ee;
--tekst-na-tamnom-mekan: #cfdce7;
--tekst-blagi-tamniji: #3d4f61;
--dugme-na-zutom-jaci: #1d2b3a; --blok-dogadjaj: #ffbf00;
--blok-kontrola: #ff8c1a;
--blok-kretanje: #4c97ff;
--blok-podaci:   #ff8c1a;
--blok-zvuk:     #cf63cf;
--blok-meki:     #ffeaba;  --veo-heroj-usp: linear-gradient(180deg, rgba(45, 62, 80, .08) 0%, rgba(45, 62, 80, .30) 42%, rgba(45, 62, 80, .86) 100%);
--veo-heroj-vod: linear-gradient(90deg, rgba(45, 62, 80, .52) 0%, rgba(45, 62, 80, .12) 56%, rgba(45, 62, 80, 0) 100%);
--veo-kartice:   linear-gradient(180deg, rgba(45, 62, 80, 0) 28%, rgba(45, 62, 80, .90) 100%); --traka: 1240px;
--traka-ivica: 24px;
--radius-kartica: 20px;
--radius-ram: 28px;  --prsten: var(--akcenat-tamni); --prelaz-teme: .3s; --sidro-odmak: 104px; --ritam-mali: 56px;
--ritam: 80px;
--ritam-veliki: 112px;
}
@media (min-width: 641px) {
:root { --traka-ivica: 40px; }
}
@media (max-width: 980px) {
:root {
--ritam-mali: 44px;
--ritam: 64px;
--ritam-veliki: 88px;
}
} [data-tema="tamna"] {
--podloga: #141c26;
--podloga-mirna: #1b2430;
--podloga-tamna: #0e141c;
--tekst: #e8eef4;
--tekst-blagi: #9fb0c0;
--tekst-na-tamnom: #e8eef4;
--tekst-na-tamnom-blagi: #9fb0c0;
--akcenat: #29a9e6;
--akcenat-tamni: #4fbcee;
--dugme-podloga: #29a9e6; --dugme-podloga-jaca: #4fbcee; --greska: #ff9a8d; --istaknuto: #f0b83a;
--istaknuto-jaci: #ffc94a;
--crta: rgba(232, 238, 244, .13);
--crta-jaka: rgba(232, 238, 244, .34);
}@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url(//procoding.rs/wp-content/themes/procoding-nova/fontovi/bricolage-grotesque-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Bricolage Grotesque";
font-style: normal;
font-weight: 400 800;
font-stretch: 100%;
font-display: swap;
src: url(//procoding.rs/wp-content/themes/procoding-nova/fontovi/bricolage-grotesque-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} @font-face {
font-family: "Hanken Grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(//procoding.rs/wp-content/themes/procoding-nova/fontovi/hanken-grotesk-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Hanken Grotesk";
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url(//procoding.rs/wp-content/themes/procoding-nova/fontovi/hanken-grotesk-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@view-transition {
navigation: auto;
} ::view-transition-old(root),
::view-transition-new(root) {
animation-duration: .22s;
animation-timing-function: cubic-bezier(.4, 0, .2, 1);
} @media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
} *,
*::before,
*::after { box-sizing: border-box; } html { -webkit-tap-highlight-color: transparent; } body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--podloga);
color: var(--tekst);
font-family: var(--font-tekst);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.podnozje { margin-top: auto; } h1, h2, h3, h4 {
font-family: var(--font-naslov);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.015em;
text-wrap: balance;
margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 2.9vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.375rem); font-weight: 700; letter-spacing: -.008em; }
h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; }
p { margin: 0 0 1em; max-width: var(--mera); }
a { color: inherit; text-underline-offset: .18em; }
img { max-width: 100%; height: auto; display: block; } [hidden] { display: none !important; } .nad {
margin: 0 0 12px;
font-size: 15px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--akcenat-tamni);
}
.uvod {
font-size: 19px;
color: var(--tekst-blagi);
max-width: 52ch;
} .samo-citac {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
overflow: hidden;
white-space: nowrap;
clip-path: inset(50%);
} .preskoci {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 12px 18px;
background: var(--podloga-tamna);
color: var(--bela);
border-radius: 0 0 10px 0;
}
.preskoci:focus { left: 0; }  .traka {
width: 100%;
max-width: var(--traka);
margin-inline: auto;
padding-inline: var(--traka-ivica);
} .sekcija { padding-block: var(--ritam); }
.sekcija--mali { padding-block: var(--ritam-mali); }
.sekcija--veliki { padding-block: var(--ritam-veliki); }
.sekcija--mirna { background: var(--podloga-mirna); }
.sekcija--tamna {
background: var(--podloga-tamna); --prsten: var(--istaknuto);
color: var(--tekst-na-tamnom);
}
.sekcija--tamna h1,
.sekcija--tamna h2,
.sekcija--tamna h3 { color: var(--bela); }
.sekcija--tamna .nad { color: var(--istaknuto); }
.sekcija--tamna .uvod { color: var(--tekst-na-tamnom-blagi); } .sekcija--zuta {
background: var(--istaknuto);
color: var(--podloga-tamna);
}
.sekcija--zuta h1,
.sekcija--zuta h2,
.sekcija--zuta h3 { color: var(--podloga-tamna); }
.sekcija--zuta .nad { color: var(--podloga-tamna); }
.sekcija--zuta .uvod { color: var(--tekst-na-zutom); } .dugme {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 54px;
padding: 0 30px;
border: 2px solid transparent;
border-radius: 999px;
background: var(--dugme-podloga);
color: var(--bela);
font: 700 18px/1 var(--font-tekst);
text-decoration: none;
cursor: pointer;
transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dugme--sporedno {
background: transparent;
color: var(--tekst);
border-color: var(--crta-jaka);
} .dugme--na-tamnom {
background: var(--istaknuto);
color: var(--podloga-tamna);
} .dugme--na-zutom {
background: var(--podloga-tamna);
color: var(--bela);
}
.dugme--malo {
min-height: 44px;
padding: 0 22px;
font-size: 16px;
} [data-tema="tamna"] .dugme { color: var(--mrak); }
[data-tema="tamna"] .dugme--sporedno { color: var(--tekst); background: transparent; }
[data-tema="tamna"] .dugme--na-zutom { color: var(--bela); }
@media (hover: hover) {
.dugme:hover { background: var(--dugme-podloga-jaca); }
.dugme--sporedno:hover { background: transparent; border-color: var(--tekst); }
.dugme--na-tamnom:hover { background: var(--istaknuto-jaci); }
.dugme--na-zutom:hover { background: var(--dugme-na-zutom-jaci); }
} .kartica {
display: flex;
flex-direction: column;
background: var(--podloga);
border: 1px solid var(--crta);
border-radius: var(--radius-kartica);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color .18s ease, transform .18s ease;
}
[data-tema="tamna"] .kartica { background: var(--podloga-mirna); }
.kartica__slika {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
} .kartica__naslov {
margin: 0 0 8px;
font-size: 1.15rem;
line-height: 1.2;
} .kartica .kartica__oznake {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: none;
margin: 0 0 12px;
} .kartica .kartica__oznake .bedz { margin-bottom: 0; }
.kartica__telo {
display: flex;
flex-direction: column;
flex: 1;
padding: 22px 22px 24px;
}
.kartica__telo p {
margin-bottom: 18px;
font-size: 16px;
color: var(--tekst-blagi);
}
.kartica__dno {
margin-top: auto;
font-size: 16px;
font-weight: 700;
color: var(--akcenat-tamni);
}
@media (hover: hover) {
.kartica:hover {
border-color: var(--akcenat-tamni);
transform: translateY(-2px);
} div.kartica:hover {
border-color: var(--crta);
transform: none;
}
} .bedz {
align-self: flex-start;
display: inline-block;
margin-bottom: 12px;
padding: 5px 12px;
border-radius: 999px;
background: var(--istaknuto);
color: var(--podloga-tamna);
font-size: 14px;
font-weight: 700;
} .bedz--tih {
background: transparent;
border: 1px solid var(--crta-jaka);
color: var(--tekst-blagi);
} .mreza {
display: grid;
gap: 28px;
grid-template-columns: repeat(4, 1fr);
}
.mreza--3 { grid-template-columns: repeat(3, 1fr); }
.mreza--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) {
.mreza,
.mreza--3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 640px) {
.mreza,
.mreza--3,
.mreza--2 { grid-template-columns: 1fr; }
}   @media (max-width: 980px) {
body, p, li, td, th, label, input, textarea, select, button, small {
font-size: max(14px, 1em);
}
} @media (pointer: coarse) {
a, button, [role="button"], input[type="submit"] {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}  #sadrzaj .sekcija--prva,
#sadrzaj > .sekcija:first-child,
#sadrzaj > .objava:first-child { padding-top: var(--vrh-strane); }
:root { --vrh-strane: clamp(16px, 1.4vw, 24px); } .sekcija--posle-uvoda { padding-top: 40px; } #sadrzaj [id] { scroll-margin-top: var(--sidro-odmak); } #sadrzaj .veza {
display: inline-flex;
align-items: center;
color: var(--akcenat-tamni);
font-weight: 700;
text-decoration: underline;
text-underline-offset: .18em;
} :where(.veza, .putanja a, .koraci__telefon) {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-block: calc((1lh - 44px) / 2);
} #sadrzaj :is(p, li) > a:only-child:not([class]) {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-block: calc((1lh - 44px) / 2);
} .post-password-form input[type="password"],
.post-password-form input[type="submit"] {
min-height: 44px;
padding: 10px 16px;
border-radius: var(--radius-polje);
font: inherit;
}
.post-password-form input[type="password"] {
border: 2px solid var(--crta-jaka);
background: var(--podloga);
color: var(--tekst);
}
.post-password-form input[type="submit"] {
border: 0;
background: var(--dugme-podloga);
color: var(--bela);
font-weight: 700;
cursor: pointer;
}
@media (hover: hover) {
.post-password-form input[type="submit"]:hover { background: var(--dugme-podloga-jaca); }
}
@media (hover: hover) {
.veza:hover { color: var(--akcenat-tamni); }
}
.sekcija--tamna .veza { color: var(--istaknuto); }  .zmija {
position: relative;
height: 300px;
margin-top: 56px;
} .zmija__talas {
position: absolute;
left: 6%;
right: 6%;
top: 60px;
height: 140px;
}
.zmija__talas svg {
display: block;
width: 100%;
height: 100%;
} .zmija__korak {
position: absolute;
width: 168px;
transform: translateX(-50%);
text-align: center;
color: inherit;
text-decoration: none;
} .zmija--gusta .zmija__korak { width: 150px; }
.zmija__tacka {
width: 56px;
height: 56px;
margin: 0 auto; display: grid;
place-items: center;
border-radius: 999px;
border: 3px solid var(--akcenat);
background: var(--podloga); color: var(--akcenat-tamni);
font: 800 20px/50px var(--font-naslov); text-align: center;
transition: background .18s ease, border-color .18s ease, color .18s ease,
translate .18s ease;
} .zmija__ikona { width: 36px;
height: 34px;
object-fit: contain;
}
.zmija__tacka > svg {
width: auto;
height: 34px;
} .zmija__natpis b { display: block; font: 700 16px/1.25 var(--font-tekst); }
.zmija__natpis span { font-size: 14px; color: var(--tekst-blagi); } .zmija__korak--gore { top: 46px; }
.zmija__korak--gore .zmija__natpis {
position: absolute;
left: 0;
right: 0;
bottom: 100%;
margin-bottom: 10px;
}
.zmija__korak--dole { top: 158px; }
.zmija__korak--dole .zmija__natpis { margin-top: 10px; } a.zmija__korak:focus-visible {
outline: 3px solid var(--akcenat);
outline-offset: 4px;
border-radius: 12px;
} @media (hover: hover) {
a.zmija__korak:hover .zmija__tacka {
border-color: var(--akcenat-tamni);
translate: 0 -2px;
}
a.zmija__korak:hover .zmija__natpis b { text-decoration: underline; }
} @media (max-width: 900px) {
.zmija {
display: grid;
gap: 18px;
height: auto;
margin-top: 8px;
}
.zmija__talas { display: none; } .zmija__korak,
.zmija--gusta .zmija__korak {
position: static;
display: grid;
grid-template-columns: 56px 1fr;
gap: 16px;
align-items: center;
width: auto;
transform: none;
text-align: left;
}
.zmija__korak--gore .zmija__natpis,
.zmija__korak--dole .zmija__natpis {
position: static;
margin: 0;
}  .zmija__tacka { position: relative; }
.zmija__korak:not(:last-child) .zmija__tacka::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
width: 3px;
height: 18px;
margin-left: -1.5px; background: currentColor;
opacity: .28;
}
} .pc-pokret .pc-ulaz {
opacity: 0;
translate: 0 18px;
transition:
opacity .5s cubic-bezier(.16, 1, .3, 1),
translate .5s cubic-bezier(.16, 1, .3, 1);
transition-delay: calc(var(--pc-red, 0) * 60ms);
}
.pc-pokret .pc-ulaz.pc-javi {
opacity: 1;
translate: none;
} @media (prefers-reduced-motion: reduce) {
.pc-pokret .pc-ulaz {
opacity: 1;
translate: none;
transition: none;
}
} main[tabindex="-1"]:focus { outline: none; } :where(a, button, summary, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus-visible {
outline: 3px solid var(--prsten);
outline-offset: 2px;
}  .dugme--na-tamnom { --prsten: var(--istaknuto); } .poziv-traka { display: none; } html.izgled-novi:not([data-tema="tamna"]) body,
html:not([data-tema="tamna"]) body.izgled-podloga {
--podloga-strane: #f3f6f9;
--podloga-mirna: #e8eef4;
}
html.izgled-novi body,
body.izgled-podloga { background: var(--podloga-strane, var(--podloga)); } html.izgled-novi body.single-post,
body.izgled-podloga.single-post { background: var(--podloga); } :is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane {
background: var(--podloga-tamna);
color: var(--tekst-na-tamnom);
--prsten: var(--istaknuto);
padding-block: clamp(36px, 4.5vw, 64px);
}
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane :is(h1, h2) { color: var(--bela); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane :is(p, .uvod) { color: var(--tekst-na-tamnom-blagi); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .uvod-strane .nad { color: var(--istaknuto); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj .sekcija--posle-uvoda { padding-top: var(--ritam-mali); } :is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.blog > .traka > h1, .prijava__zaglavlje, .pitanja .kurs-zaglavlje, .spisak__vrh) {
border-image: linear-gradient(var(--podloga-tamna) 0 0) fill 0 / / 0 100vw;
margin-top: calc(-1 * var(--vrh-strane));
padding-block: clamp(32px, 4vw, 56px);
margin-bottom: clamp(28px, 3vw, 40px);
color: var(--tekst-na-tamnom);
--prsten: var(--istaknuto);
}
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.blog > .traka > h1, .prijava__zaglavlje h1, .pitanja .kurs-zaglavlje h1, .spisak__vrh h1) { color: var(--bela); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.prijava__zaglavlje, .spisak__vrh) p:not(.nad) { color: var(--tekst-na-tamnom-blagi); }
:is(html.izgled-novi, body.izgled-pojas) #sadrzaj :is(.prijava__zaglavlje, .spisak__vrh) .nad { color: var(--istaknuto); } :is(html.izgled-novi, body.izgled-pojas) #sadrzaj .kontakt-vrh {
background: var(--podloga);
padding-bottom: var(--ritam-mali);
} :is(html.izgled-novi, body.izgled-pojas) #sadrzaj .kurs-uvod {
background: var(--podloga);
padding-bottom: var(--ritam-mali);
} :is(html.izgled-novi, body.izgled-poziv) .poziv-traka {
display: block;
background: var(--istaknuto);
color: var(--podloga-tamna);
padding-block: clamp(32px, 4vw, 52px);
--prsten: var(--podloga-tamna);
}
.poziv-traka__traka {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px 40px;
}
.poziv-traka__naslov {
margin: 0;
color: var(--podloga-tamna);
font-size: clamp(24px, 2.4vw, 32px);
}
.poziv-traka__tekst {
margin: 8px 0 0;
max-width: 56ch;
color: var(--tekst-na-zutom);
}
.poziv-traka__dugmad { display: flex; flex-wrap: wrap; gap: 12px; }
.poziv-traka .poziv-traka__kodi {
color: var(--podloga-tamna);
border-color: var(--podloga-tamna);
}
.poziv-traka .poziv-traka__kodi:hover { background: rgba(45, 62, 80, .08); }.predavaci__uvod { margin-bottom: 0; }
.predavaci__mreza { margin-top: 36px; } @media (min-width: 981px) {
.predavaci__mreza { grid-template-columns: var(--predavaci-kolone, repeat(8, minmax(0, 1fr)));
}
.predavaci__mreza > * { grid-column: span 2; }
.predavaci__mreza > .predavac--pocinje-red {
grid-column: var(--pocetna-traka, 1) / span 2;
}
} .predavac { overflow: hidden; } .predavac__lice {
display: block;
width: 100%;
aspect-ratio: 1;
overflow: hidden;
background: var(--podloga-mirna);
} .predavac__lice-lik {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 26%;
}
.predavac__lice--slovo {
display: flex;
align-items: center;
justify-content: center;
background: var(--akcenat);
}
.predavac__lice--slovo b {
font: 800 clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem) / 1 var(--font-naslov);
letter-spacing: .02em;
color: var(--podloga-tamna);
}
.predavac__telo { padding: 18px 18px 20px; }
.predavac__ime {
margin: 0 0 4px;
font-size: 1.125rem;
}
.predavac__uloga {
font-size: 15px;
color: var(--tekst-blagi);
}
.predavac__dno {
margin-top: 14px;
color: var(--akcenat-tamni);
}
.predavaci__osnivac {
margin: 30px 0 0;
max-width: none;
font-size: 16px;
color: var(--tekst-blagi);
}
.predavaci__osnivac a {
color: var(--akcenat-tamni);
font-weight: 700;
} @media (hover: hover) {
.predavac--bez-strane:hover {
border-color: var(--crta);
transform: none;
}
} @media (max-width: 640px) {
.predavaci__mreza .predavac { flex-direction: row; }
.predavaci__mreza .predavac__lice {
flex: 0 0 104px;
width: 104px;
aspect-ratio: 1;
}
.predavaci__mreza .predavac__telo {
justify-content: center;
padding: 14px 16px;
}
.predavaci__mreza .predavac__dno { margin-top: 8px; }
}  .termini__polje {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 32px 48px;
align-items: center;
padding: 44px 48px;
border-radius: var(--radius-ram);
background: var(--podloga-tamna); --prsten: var(--istaknuto);
color: var(--tekst-na-tamnom);
} .termini__polje .nad { color: var(--istaknuto); }
.termini__naslov {
margin: 0 0 12px;
font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem);
}
.termini__opis {
margin: 0;
max-width: 46ch;
color: var(--tekst-na-tamnom-blagi);
}
.termini__potezi {
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
align-items: center;
}
.termini__telefon {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
font-weight: 700;
color: var(--tekst-na-tamnom);
text-decoration: none;
}
.termini__telefon svg { flex: none; }
@media (hover: hover) {
.termini__telefon:hover {
text-decoration: underline;
text-underline-offset: .22em;
}
}
@media (max-width: 900px) {
.termini__polje {
grid-template-columns: minmax(0, 1fr);
padding: 32px 26px;
}
} .osoba__nazad {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
margin-bottom: 10px;
font-size: 16px;
font-weight: 700;
color: var(--tekst-blagi);
text-decoration: none;
}
.osoba__nazad svg { flex: none; }
@media (hover: hover) {
.osoba__nazad:hover { color: var(--tekst); }
}  .osoba__raspored {
display: grid;
grid-template-columns: 320px minmax(0, max-content);
justify-content: center;
gap: 24px;
align-items: start;
}
.osoba__karta,
.osoba__glavna {
padding: 30px 26px;
border: 1px solid var(--crta);
border-radius: var(--radius-kartica);
background: var(--podloga);
} .osoba__karta { text-align: center; } .osoba__glavna {
padding: 30px 32px;
max-width: calc(var(--mera) + 64px);
} .osoba__opis h2,
.osoba__opis h3 { max-width: var(--mera); } .osoba__lice {
display: block;
width: 200px;
margin: 0 auto 18px;
aspect-ratio: 1;
overflow: hidden;
border-radius: 999px;
background: var(--podloga-mirna);
}
.osoba__lice-lik {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
}
.osoba__lice--slovo {
display: flex;
align-items: center;
justify-content: center;
background: var(--akcenat);
}
.osoba__lice--slovo b {
font: 800 3.25rem / 1 var(--font-naslov);
letter-spacing: .02em;
color: var(--podloga-tamna);
} .osoba__ime {
margin: 0 0 8px;
font-size: clamp(1.5rem, 1.3rem + .6vw, 1.75rem);
} .osoba__uloga {
margin: 0 0 16px;
max-width: none;
font-size: 14px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--akcenat-tamni);
} .osoba__dodatno {
margin: 0 auto 18px;
max-width: 42ch;
font-size: 16px;
color: var(--tekst-blagi);
} .osoba__mreze {
display: flex;
justify-content: center;
gap: 8px;
margin: 18px 0 0;
padding-top: 16px;
border-top: 1px solid var(--crta);
}
.osoba__mreze a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
color: var(--tekst-blagi);
transition: color .18s ease;
}
.osoba__mreze svg {
width: 22px;
height: 22px;
display: block;
}
@media (hover: hover) {
.osoba__mreze a:hover { color: var(--akcenat-tamni); }
} .osoba__mreze + .osoba__posta {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.osoba__posta {
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--crta);
font-size: 15px;
justify-content: center;
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
font-weight: 700;
color: var(--tekst);
text-decoration: none;
overflow-wrap: anywhere;
}
.osoba__posta svg { flex: none; }
@media (hover: hover) {
.osoba__posta:hover {
text-decoration: underline;
text-underline-offset: .22em;
}
} .osoba__opis { margin-top: 0; } .osoba__opis > *:last-child { margin-bottom: 0; }
.osoba__opis h2 {
margin: 30px 0 10px;
font-size: clamp(1.2rem, 1.1rem + .5vw, 1.5rem);
}
.osoba__opis h2:first-child { margin-top: 0; }
.osoba__opis h3 {
margin: 22px 0 6px;
font-size: 1.0625rem;
}
.osoba__opis p { color: var(--tekst-blagi); }
.osoba__opis ul,
.osoba__opis ol {
margin: 0 0 16px;
padding-left: 1.2em;
max-width: var(--mera);
color: var(--tekst-blagi);
}
.osoba__opis li { margin-bottom: 6px; }
.osoba__opis a {
color: var(--akcenat-tamni);
font-weight: 700;
} .osoba__opis hr {
height: 0;
margin: 22px 0;
border: 0;
border-top: 1px solid var(--crta);
} .ostali {
display: flex;
flex-direction: column;
align-items: stretch;
}
.ostali .nad { margin-bottom: 4px; }
.ostali__ime {
display: flex;
align-items: center;
min-height: 44px;
padding: 6px 0;
border-top: 1px solid var(--crta);
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
.ostali__ime:first-of-type { border-top: 0; }
.ostali__svi {
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: 44px;
margin-top: 8px;
font-weight: 700;
color: var(--akcenat-tamni);
text-decoration: underline;
text-underline-offset: .22em;
text-decoration-thickness: 2px;
}
@media (hover: hover) {
.ostali__ime:hover {
text-decoration: underline;
text-underline-offset: .22em;
}
} @media (max-width: 980px) {
.osoba__raspored { grid-template-columns: minmax(0, 1fr); }
.osoba__karta,
.osoba__glavna { padding: 26px 20px; }
}  .rep__naslov {
margin: 0 0 12px;
font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem);
}
.rep__tvrdnja { margin: 0 0 8px; }
.rep__blok p {
margin-bottom: 0;
max-width: 46ch;
color: var(--tekst-blagi);
}
.rep__veze {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin-top: 18px;
}
.rep__veze a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-weight: 700;
color: var(--akcenat-tamni);
text-decoration: underline;
text-underline-offset: .22em;
text-decoration-thickness: 2px;
}
.rep__potezi {
display: flex;
flex-wrap: wrap;
gap: 14px 24px;
align-items: center;
margin-top: 24px;
}
.rep__telefon {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
font-weight: 700;
color: var(--tekst);
text-decoration: none;
}
.rep__telefon svg { flex: none; }
@media (hover: hover) {
.rep__telefon:hover {
text-decoration: underline;
text-underline-offset: .22em;
}
} @media (max-width: 640px) {
.rep__dvoje .rep__blok + .rep__blok {
padding-top: 26px;
border-top: 1px solid var(--crta);
}
} .predavaci__rang {
margin: 40px 0 18px;
font-size: 1.15rem;
font-weight: 700;
color: var(--tekst-blagi);
}
.predavaci__rang:first-of-type { margin-top: 26px; } .predavac__ime { font-size: 1.05rem; } .predavaci { padding-top: 24px; } .osoba__glavna--sa-stupcem {
max-width: calc(var(--mera) + 230px + 32px + 64px);
}
.osoba__glavna--sa-stupcem .osoba__opis {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 861px) {
.osoba__glavna--sa-stupcem {
display: grid;
grid-template-columns: minmax(0, var(--mera)) 230px;
gap: 32px;
align-items: start;
}
}
.osoba__stubac {
padding-top: 4px;
} @media (min-width: 861px) {
.osoba__stubac {
border-left: 1px solid var(--crta);
padding-left: 28px;
}
}
@media (max-width: 860px) {
.osoba__stubac {
margin-top: 24px;
border-top: 1px solid var(--crta);
padding-top: 22px;
}
}
.osoba__stubac-naslov {
margin: 0 0 10px; font: 800 .875rem/1.4 var(--font-naslov);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tekst-blagi);
}
.osoba__stubac-naslov + .osoba__stubac-spisak { margin-bottom: 22px; }
.osoba__stubac-spisak {
margin: 0;
padding: 0;
list-style: none;
font-size: .9375rem;
line-height: 1.5;
color: var(--tekst);
} .osoba__stubac-spisak li {
max-width: var(--mera); position: relative;
padding-left: 18px;
}
.osoba__stubac-spisak li::before {
content: "";
position: absolute;
left: 0; top: .55em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--akcenat);
}
.osoba__stubac-spisak li + li { margin-top: 14px; } .osoba__stavka-naslov {
display: block;
font-weight: 700;
color: var(--tekst);
}
.osoba__stavka-opis {
display: block;
color: var(--tekst-blagi);
} .osoba__stavka-opis::first-letter { text-transform: uppercase; }
.osoba__stubac > *:last-child { margin-bottom: 0; } .osoba__uz-ram {
margin: 0 0 14px;
overflow: hidden;
border-radius: var(--radius-polje);
background: var(--podloga-mirna);
}
.osoba__uz-lik {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.osoba__uz-tekst {
font-size: .9375rem;
line-height: 1.6;
color: var(--tekst);
max-width: var(--mera);
}
.osoba__uz-tekst p { margin: 0 0 10px; }
.osoba__uz-tekst p:last-child { margin-bottom: 0; } .osoba__stubac-spisak + .osoba__uz { margin-top: 22px; }