/* ============================================================
ŠTREBERAJ — FINAL DESIGN
Vizualni identitet: klasični serif naslovi + system sans,
ugljen + clay paleta (anthropic stil), bone podloge, bijele kartice.
Spacing na 8px gridu, radius 6/8px, bez dekorativnih trikova.
============================================================ */
:root{
/* boje */
--navy:#141413; /* naslovi, footer, tamne plohe */
--navy-deep:#0E0E0D; /* footer bottom, hover tamnih ploha */
--ink:#141413; /* body tekst */
--muted:#6B6960; /* sekundarni tekst */
--primary:#B54A26; /* akcije, linkovi */
--primary-dark:#9A3C1D;
--accent:#B54A26; /* senf — naglasci, oznake */
--accent-soft:#EFDCCB;
--cream:#F0EEE5; /* tople sekcijske plohe (ista obitelj kao krug ikona) */
--paper:#FFFFFF;
--bg:#FAF9F5; /* topla podloga stranice */
--border:#E3E0D5;
--border-strong:#CBC7BA;
--ok:#2E7D5B;
--danger:#A3251B; /* samo za nepovratne radnje — ne smije se čitati kao obična akcija */
/* tipografija */
--heading:"Iowan Old Style","Palatino Linotype","Book Antiqua", Georgia, serif;
--body:-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
/* spacing skala (8px grid) */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
--s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
--radius:8px;
--radius-sm:6px;
--shadow:0 1px 2px rgba(20,20,19,.06);
--shadow-hover:0 2px 8px rgba(20,20,19,.10);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
/* Nijedno polje za upis ispod 16px.
Safari na iPhoneu zumira stranicu čim se klikne polje sa slovima manjima od
16px — i ostane zumiran, pa stranica više nije od ruba do ruba i „pleše" pod
prstom. Jedini drugi način da se to spriječi je `maximum-scale=1` u viewportu,
čime se oduzima zumiranje i onome kome treba; ovo ne oduzima nikome ništa.
Najniže moguće pravilo, da ga svako sljedeće smije pregaziti naviše: služi
poljima koja nemaju vlastitu veličinu, jer njima preglednik zadaje ~13px. */
input,select,textarea{font-size:16px;}
body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--body);
font-size:16px;
line-height:1.65;
}
img{display:block; max-width:100%;}
a{color:var(--primary);}
a:hover{color:var(--primary-dark);}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}
h1,h2,h3,h4{
font-family:var(--heading);
color:var(--navy);
font-weight:700;
line-height:1.25;
margin:0 0 16px;
text-wrap:balance;
}
h1{font-size:clamp(32px,4.2vw,44px); line-height:1.15;}
h2{font-size:clamp(26px,3vw,32px);}
h3{font-size:20px;}
h4{font-size:17px;}
p{margin:0 0 16px;}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}
/* naslov sekcije s klasičnom crticom */
.section-title{margin-bottom:8px;}
.section-title::after{
content:""; display:block; width:48px; height:4px;
background:var(--accent); margin-top:12px; border-radius:2px;
}
.section-title--center{text-align:center;}
.section-title--center::after{margin-inline:auto;}
.section-sub{color:var(--muted); max-width:62ch; margin:0 0 32px;}
.section-sub--center{margin-inline:auto; text-align:center;}
.section{padding:64px 0;}
.section--cream{background:var(--cream); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.section--tight{padding:32px 0;}
@media (max-width:640px){ .section{padding:48px 0;} }
/* ---------- gumbi ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:var(--body); font-weight:600; font-size:16px; line-height:1;
padding:13px 22px;
border-radius:var(--radius-sm);
border:1px solid transparent;
cursor:pointer; text-decoration:none;
transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{background:var(--primary); color:#fff; border-color:var(--primary);}
.btn-primary:hover{background:var(--primary-dark); border-color:var(--primary-dark); color:#fff;}
.btn-secondary{background:var(--paper); color:var(--primary); border-color:var(--border-strong);}
.btn-secondary:hover{border-color:var(--primary); color:var(--primary-dark);}
.btn-accent{background:var(--accent); color:#fff; border-color:var(--accent);}
.btn-accent:hover{background:#9A3C1D; border-color:#9A3C1D; color:#fff;}
.btn-small{padding:9px 14px; font-size:14px;}
.btn:disabled{opacity:.55; cursor:not-allowed;}
.btn:active{transform:none;}
/* ---------- oznake ---------- */
.tag{
display:inline-flex; align-items:center; gap:4px;
font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
padding:3px 10px; border-radius:4px;
background:var(--cream); color:var(--muted); border:1px solid var(--border);
}
.tag--uzivo{background:var(--navy); color:#fff; border-color:var(--navy);}
.tag--video{background:var(--accent-soft); color:#9A3C1D; border-color:#E7C9B6;}
.tag--free{background:#E9F3EE; color:var(--ok); border-color:#CBE2D6;}
/* ---------- kartica ---------- */
.card{
background:var(--paper);
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:var(--shadow);
}
a.card{text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease;}
a.card:hover{border-color:var(--border-strong); box-shadow:var(--shadow-hover); color:inherit;}
/* ---------- ikone predmeta (konzistentan tretman) ----------
Uvijek isti razredi: subj-ico + veličina. Ikone su okrugle s
vlastitim crtanim rubom — bez dodatnog okvira. */
/* `cover`, ne `contain`: fotografija koja nije kvadratna inače ostane uska
traka unutar kruga, odrezana na rubovima. Ovako ispuni krug, a višak se
reže sa strana — kako /staff i savjetuje („motiv stavi u sredinu"). */
.subj-ico{border-radius:50%; object-fit:cover; flex-shrink:0;}
.subj-ico--sm{width:24px; height:24px;} /* chipovi, filteri, liste */
.subj-ico--md{width:56px; height:56px;} /* kartice kolegija */
.subj-ico--lg{width:72px; height:72px;} /* context header stranice kolegija */
/* The dashboard mock carries emoji where a real kolegij carries an icon file;
`.subj-ico` is sized for an `img` and would not centre a glyph. */
.lms-ico{
width:56px; height:56px; flex-shrink:0; border-radius:50%;
background:var(--cream); border:1px solid var(--border);
display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1;
}
/* ============================================================
TOPBAR + HEADER
============================================================ */
.topbar{background:var(--navy); color:#C6C4BB; font-size:13.5px;}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center; min-height:36px; gap:16px;}
.topbar a{color:#fff; text-decoration:none;}
.topbar a:hover{text-decoration:underline; color:#fff;}
.topbar .tb-left{display:flex; gap:24px; flex-wrap:wrap;}
.topbar .tb-right{display:flex; gap:16px;}
/* Tablica kolegija ostane bez zraka puno prije praga ladice: sidebar uzme
250px, pa na laptopu od 1024px sadržaju ostane oko 700px, a tablica u punom
sastavu traži 750px. Semestar i ECTS odlaze prvi — oboje piše i na stranici
kolegija, a „Materijali" je stupac zbog kojeg se na ovu tablicu i dolazi i
ne smije ispasti van kartice.
Ispod 860px sidebar postaje ladica i širina se vrati, pa `col-wide` (smjer i
šiljak) izdrži sve do telefona. */
@media (max-width:1100px){
.app-table .col-mid{display:none;}
}
@media (max-width:720px){ .topbar .tb-left span.tb-hours{display:none;} }
.site-header{
background:var(--paper); border-bottom:1px solid var(--border);
position:sticky; top:0; z-index:50;
}
/* Sidra ispod ljepljivog headera inače završe skrivena pod njim. */
main [id]{scroll-margin-top:96px;}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; height:76px; gap:24px;}
.logo{
display:flex; align-items:center; gap:10px;
font-family:var(--heading); font-weight:700; font-size:22px; color:var(--navy);
text-decoration:none;
}
.logo:hover{color:var(--navy);}
/* Bez ovoga flex na telefonu stisne logo na širinu 0 čim gumbi u headeru
odbiju prelomiti tekst — logo doslovno nestane sa stranice. */
.logo{flex-shrink:0;}
/* Puni lockup na širokom ekranu, sam wordmark na telefonu — isti ``,
drugi ``. Visinu zadaje CSS jer se omjeri razlikuju (3:1 i 4.77:1). */
.logo-img{height:44px; width:auto; display:block;}
.logo picture{display:flex;}
.site-footer .foot-brand .logo-img{height:38px;}
.main-nav{display:flex; gap:24px; font-size:15.5px; font-weight:600;}
/* Samo izravna djeca: `.main-nav a` bi hvatao i gumb u podnožju ladice, gdje
mu `border-left` i vlastiti padding pomaknu natpis iz sredine. */
.main-nav > a{color:var(--ink); text-decoration:none; padding:6px 2px; border-bottom:2px solid transparent; white-space:nowrap;}
.main-nav > a:hover{color:var(--primary);}
.main-nav > a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--accent);}
.header-actions{display:flex; align-items:center; gap:12px;}
.header-actions .btn{white-space:nowrap;}
/* Kapa se pojavljuje tek na telefonu; do tada gumb nosi natpis. */
.cta-ico{display:none; align-items:center; justify-content:center;}
.nav-toggle{
display:none; flex-direction:column; justify-content:center; gap:5px;
width:44px; height:44px; padding:0 10px; margin-left:auto;
background:none; border:1px solid var(--border); border-radius:var(--radius-sm); cursor:pointer;
}
.nav-toggle span{display:block; height:2px; width:100%; background:var(--navy); border-radius:1px;}
/* Zona („Moja stranica") — pun clay gumb. Javni sajt i zona imaju isti burger
na istom mjestu, a iza njih su dvije različite navigacije; boja je jedino
što na prvi pogled kaže u kojoj si od njih. Javni ostaje obrisan i taman. */
.nav-toggle--accent{background:var(--primary); border-color:var(--primary);}
.nav-toggle--accent span{background:#fff;}
.nav-toggle{flex-shrink:0;}
/* Dvojnik CTA linka iz `.header-actions`, vidljiv samo dok je navigacija panel
i dok gumba nema. Nikad oba odjednom. */
.main-nav .nav-foot{display:none;}
/* The nav is a plain row on a wide screen and a panel under the header on a
phone; `main.js` only ever toggles the class.
The threshold is 860px, not the 900px the design drew: signed in, the row is
logo + four links + two buttons and needs 802px to fit on one line. Below the
threshold it would wrap mid-label — "O nama" breaking across two lines, the
buttons falling under the nav — which is the defect this number exists to
avoid.
Measured, not guessed, and it has moved every time the list did: 1060 with
six links, 940 with four, 860 with three. Measure again whenever `HEADER_NAV`
changes. */
@media (max-width:860px){
.nav-toggle{display:flex;}
/* Ladica koja se izvlači slijeva i pokriva punu visinu. Ostaje u dokumentu i
kad je zatvorena — `display:none` se ne da animirati, pa je zatvoreno
stanje pomak izvan ekrana. `visibility:hidden` je ono što je uz to vadi iz
reda za tipkovnicu i iz stabla pristupačnosti; sam `transform` bi ostavio
nevidljive linkove koje se i dalje da tabati. */
.main-nav{
position:fixed; top:0; left:0; bottom:0; z-index:60;
width:min(84vw, 320px);
display:flex; flex-direction:column; gap:0;
background:var(--paper); border-right:1px solid var(--border);
box-shadow:var(--shadow-hover);
padding:var(--s-8) 0 var(--s-5);
overflow-y:auto; overscroll-behavior:contain;
transform:translateX(-100%); visibility:hidden;
transition:transform .22s ease, visibility .22s;
}
.main-nav.is-open{transform:none; visibility:visible;}
.main-nav > a{
padding:var(--s-3) var(--s-5); border-bottom:none;
border-left:3px solid transparent; font-size:16px;
}
.main-nav > a[aria-current="page"]{border-left-color:var(--accent);}
/* Podnožje ladice: redak teksta i gumb preko cijele širine, odvojen crtom
od popisa. Nije osmi link — popis je stranica, ovo je jedina stvar koju
tražimo od nekoga tko nije prijavljen. */
.main-nav .nav-foot{
display:block;
margin:var(--s-4) var(--s-5) 0;
padding-top:var(--s-5);
border-top:1px solid var(--border);
}
.nav-foot-title{
font-family:var(--heading); font-weight:700; font-size:17px; color:var(--navy);
margin:0 0 var(--s-2); line-height:1.3;
}
/* `font-weight` izrijekom: `.main-nav` je postavljen na 600 zbog linkova, a
odlomak bi ga inače naslijedio i čitao se kao podebljan. */
.nav-foot-text{
font-size:14px; font-weight:400; color:var(--muted);
margin:0 0 var(--s-4); line-height:1.5;
}
.nav-foot-btn{width:100%; font-size:15px;}
.nav-foot-btn + .nav-foot-btn{margin-top:var(--s-2);}
.nav-close{
position:absolute; top:var(--s-3); right:var(--s-3);
width:40px; height:40px; display:flex; align-items:center; justify-content:center;
background:none; border:1px solid var(--border); border-radius:var(--radius-sm);
font-size:20px; line-height:1; color:var(--navy); cursor:pointer;
}
}
@media (prefers-reduced-motion:reduce){ .main-nav{transition:none;} }
/* Zamračena stranica iza ladice. Susjed je panela, ne dijete, pa je diže sam
CSS iz njegove klase — nema drugog stanja koje bi JavaScript morao držati u
koraku. Tap po njoj hvata `main.js` kao klik izvan panela. */
.nav-backdrop{
position:fixed; inset:0; z-index:55;
background:rgba(20,20,19,.45);
opacity:0; visibility:hidden;
transition:opacity .22s ease, visibility .22s;
}
/* Vezano na atribut, ne na klasu panela: ladicu javnog sajta (`.main-nav`) i
letvu u `/app` (`.app-nav`) otvara isti `main.js`, pa ih i zamračenje mora
pratiti obje — inače svaki novi panel treba i novo pravilo koje netko
zaboravi napisati. */
[data-nav-panel].is-open ~ .nav-backdrop{opacity:1; visibility:visible;}
/* Ladica-only: `.nav-home` uz njih, jer je na desktopu logo taj put. */
@media (min-width:861px){ .nav-backdrop, .nav-close, .nav-home{display:none;} }
/* Stranica iza ladice se ne smije pomicati pod prstom. */
body.nav-open{overflow:hidden;}
/* Na 375px u red stane logo, gumb izbornika i točno jedan gumb. Sekundarni se
povlači u podnožje ladice (`.nav-foot`), logo se smanji, razmaci se stisnu. */
@media (max-width:640px){
/* Tri stupca, `1fr auto 1fr`: vanjska dva su jednako široka pa je srednji
geometrijski na sredini, a logo s njim. S flexom i `space-between` logo bi
"sredinu" našao tek slučajno, ovisno o širini gumba desno. */
.site-header .wrap{
display:grid; grid-template-columns:1fr auto 1fr;
align-items:center; height:60px; gap:8px; padding:0 16px;
}
/* `grid-row:1` na sva tri nije ukras: logo je u DOM-u prvi a ide u stupac 2,
pa auto-placement — koji ide samo naprijed — gurne hamburger iz stupca 1 u
drugi red i header se razlomi na dvije etaže. */
.nav-toggle{grid-column:1; grid-row:1; justify-self:start; margin-left:0;}
.logo{grid-column:2; grid-row:1; justify-self:center;}
.header-actions{grid-column:3; grid-row:1; justify-self:end;}
/* Ikona se miče — uz gumb izbornika i jedan gumb desno samo se natječe za
istu širinu. Ostaje wordmark. */
.logo-img{height:20px;}
/* Ujednačene visine: gumb izbornika i gumb desno su oba 40px, pa red ima
jednu liniju umjesto tri različite. */
.nav-toggle{width:40px; height:40px; padding:0 9px;}
/* Gumb postaje ikona od 40px — zrcalo gumba izbornika s druge strane, pa su
vanjske tračnice grida jednake i logo sjeda točno na sredinu. Natpis ostaje
u markupu kao `.sr-only`, ne `display:none`: ikona bez teksta nema ime. */
.header-actions .btn{width:40px; height:40px; padding:0;}
.cta-ico{display:flex;}
.cta-label{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.header-actions .btn-secondary{display:none;}
}
/* Off-screen until focused (spec 03 §4). */
.skip-link{
position:absolute; left:-9999px; top:0; z-index:100;
background:var(--paper); color:var(--ink); text-decoration:none;
padding:var(--s-2) var(--s-4); border:1px solid var(--border-strong);
border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{left:0;}
/* Visually gone, still announced. Used by the catalogue's search label — which
had no rule at all and was rendering as stray text — and by the login
honeypot, which must not be `display:none` or a bot skips it. */
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* Site-wide notices (`base_redesign.html` renders `ul.messages`) and
form-level errors. The redesign styled neither, so "you were signed out
because the account signed in elsewhere" arrived as a bare bullet. */
.messages{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.messages li{
background:var(--accent-soft); border:1px solid #E7C9B6; border-radius:var(--radius-sm);
padding:12px 16px; font-size:15px; color:var(--navy);
}
.form-error{
background:#FBEAE5; border:1px solid #F0C4B7; border-radius:var(--radius-sm);
padding:12px 16px; font-size:14.5px; color:#9A3C1D; margin-bottom:16px;
}
/* The one-time code: wide tracking so six digits read as six digits. This is
also the fallback — without JavaScript the input is all there is. */
.code-input{text-align:center; font-family:var(--heading); font-size:28px; letter-spacing:.3em;}
/* One box per digit. `main.js` adds `is-boxed` once it has built the cells, so
everything below only ever applies where the script ran: the input is still
the control, still focused and still what gets submitted — it is just made
invisible and stretched across the boxes, which the cells mirror. */
.code-field.is-boxed{
position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
gap:8px; margin-top:4px;
}
.code-field.is-boxed .code-input{
position:absolute; inset:0; width:100%; height:100%; padding:0; border:0;
background:transparent; color:transparent; caret-color:transparent;
/* 16px keeps iOS from zooming the page when the field takes focus. */
font-size:16px; letter-spacing:0; text-align:center; outline:none; z-index:1;
}
.code-cell{
display:flex; align-items:center; justify-content:center; height:56px;
background:var(--paper); border:1px solid var(--border-strong);
border-radius:var(--radius-sm);
font-family:var(--heading); font-size:26px; color:var(--navy);
}
/* The focus ring the invisible input gave up. It travels with the caret, so
the box you are about to type into is the one that is lit. */
.code-cell.is-active{
border-color:var(--primary); box-shadow:0 0 0 3px rgba(181,74,38,.14);
}
.code-cell.is-active:empty::after{
content:""; width:2px; height:26px; background:var(--primary);
animation:code-caret 1.1s steps(1, end) infinite;
}
@keyframes code-caret{ 50%{opacity:0;} }
@media (prefers-reduced-motion:reduce){ .code-cell.is-active:empty::after{animation:none;} }
.form-field.has-error .code-cell{border-color:var(--danger);}
@media (max-width:400px){
.code-field.is-boxed{gap:6px;}
.code-cell{height:48px; font-size:22px;}
}
/* A button that has to read as a link. The footer's cookie settings and the
login's "send another code" are both real buttons and both had no rule, so
they rendered as default grey chrome. */
.link-button{
background:none; border:0; padding:0; font:inherit; color:var(--primary);
font-weight:600; cursor:pointer; text-decoration:underline;
}
.link-button:hover{color:var(--primary-dark);}
/* A form's own submit spans the card it sits in. */
.btn--block{width:100%;}
/* ============================================================
HERO
============================================================ */
/* Bez ruba pri dnu: pojas s četiri ponude nastavlja istu cream plohu i s
herojem čini jednu cjelinu — naslov, pa četiri ulaza. Rub je ondje crtao
crtu nasred te cjeline. Plohu zatvara `.offer-types`, ne ovo. */
.hero{background:var(--cream); padding:64px 0 48px;}
.hero .wrap{display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center;}
.hero h1{margin-bottom:16px;}
.hero .hero-lead{font-size:19px; color:var(--muted); max-width:48ch; margin-bottom:24px;}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px;}
.hero-trust{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:15.5px;}
.hero-trust li{display:flex; gap:10px; align-items:baseline;}
.hero-trust .tick{color:var(--ok); font-weight:700;}
.hero-figure{display:flex; flex-direction:column; align-items:center; gap:12px; margin:0;}
.hero-figure img{width:100%; max-width:560px; height:auto; margin:calc(-1 * 24px) 0;}
.section-cta{display:flex; justify-content:center; margin-top:32px;}
.hero-video{display:block; width:100%; max-width:520px; height:auto; mix-blend-mode:multiply;}
.hero-figure figcaption{font-size:13.5px; color:var(--muted); text-align:center;}
@media (max-width:860px){
.hero .wrap{grid-template-columns:1fr;}
.hero-figure{order:-1;}
.hero-figure img{width:280px; margin:0;}
.hero-video{width:280px;}
}
/* ---------- hero varijanta: karijera (centrirano + foto-kolaž) ---------- */
.hero--career .wrap{display:block;}
.hero--career .breadcrumb{margin-bottom:32px;}
.career-hero-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.career-hero-head h1{margin-bottom:12px;}
.career-hero-head .hero-lead{margin:0 auto 24px; max-width:56ch;}
.career-hero-head .hero-ctas{justify-content:center; margin-bottom:0;}
.hero-collage{position:relative; width:100%; aspect-ratio:1490/714;}
.collage-tile{
position:absolute; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-hover);
}
.collage-tile img{width:100%; height:100%; object-fit:cover; display:block;}
.collage-big-tl{left:4.03%; top:7%; width:44.97%; height:48.74%;}
.collage-bl-a {left:11.74%; top:60.22%; width:21.61%; height:21.71%;}
.collage-bl-b {left:35.23%; top:60.22%; width:13.76%; height:31.09%;}
.collage-tr-a {left:51.01%; top:15.83%; width:21.48%; height:31.09%;}
.collage-tr-b {left:74.5%; top:24.65%; width:13.42%; height:22.13%;}
.collage-big-br{left:51.01%; top:51.26%; width:44.83%; height:48.74%;}
@media (max-width:640px){
.hero-collage{
position:static; aspect-ratio:auto;
display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.collage-tile{position:static; width:auto; height:auto; aspect-ratio:4/3;}
.collage-big-tl,.collage-big-br{grid-column:1/3; aspect-ratio:16/9;}
}
.team-photos{position:relative; width:100%; aspect-ratio:1560/1000;}
.tp-tile{position:absolute; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-hover);}
.tp-tile img{width:100%; height:100%; object-fit:cover; display:block;}
.tp-a{left:0%; top:8.5%; width:32%; height:40%;}
.tp-b{left:34%; top:0%; width:58%; height:48.5%;}
.tp-c{left:8.5%; top:54%; width:15%; height:28.5%;}
.tp-d{left:25.5%; top:52%; width:40.5%; height:48%;}
.tp-e{left:68%; top:54%; width:32%; height:28.5%;}
@media (max-width:640px){
.team-photos{
position:static; aspect-ratio:auto;
display:grid; grid-template-columns:1fr 1fr; gap:12px;
}
.tp-tile{position:static; width:auto; height:auto; aspect-ratio:4/3;}
.tp-b,.tp-d{grid-column:1/3; aspect-ratio:16/9;}
}
/* ============================================================
ČETIRI PONUDE — pojas ispod heroja
============================================================ */
/* Bijele kartice na toploj plohi, jer su heroj i sekcija ispod oboje `--cream`
— kartice su jedino bijelo na tom potezu i zato ih oko uhvati prvo.
Ilustracija stoji u svojoj visini (`--ot-art`) umjesto da je samo slika u
toku: naslovi se onda slažu na istoj crti u sve četiri kartice, i kad jedan
opis ima redak više. Isto radi i podnožje — `margin-top:auto` ga gura na
dno, pa cijena i poziv stoje u istom retku u sve četiri. */
/* Dno cream cjeline koja počinje herojem — odatle stranica ide na bijelo.
Prije su tri sekcije zaredom bile cream (heroj, ovo, mreža kolegija), pa je
gornjih tisuću i dvjesto piksela bilo jedna neprekinuta bež ploha. */
.offer-types{background:var(--cream); border-bottom:1px solid var(--border); padding:0 0 56px;}
.ot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.ot-card{
--ot-art:96px;
display:flex; flex-direction:column;
background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
padding:24px 22px 22px;
text-decoration:none; color:inherit;
transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ot-card:hover{
border-color:var(--border-strong);
box-shadow:var(--shadow-hover);
transform:translateY(-2px);
}
/* Crtež se centrira, tekst ostaje uz lijevi rub — kao na predlošku. Lijevo
poravnat crtež uz lijevo poravnat naslov daje dva različita lijeva ruba
(crtež ima zrak unutar viewBoxa), pa ništa ne stoji na crti. */
.ot-art{display:flex; align-items:center; justify-content:center;
height:var(--ot-art); margin-bottom:20px;}
.ot-art img{height:100%; width:auto;}
.ot-title{
display:block; margin-bottom:8px;
font-family:var(--heading); font-size:19px; font-weight:700; color:var(--navy);
line-height:1.25;
}
.ot-text{display:block; font-size:14.5px; color:var(--muted); line-height:1.55;}
/* Cijena lijevo, poziv desno — jedan redak na dnu svake kartice. */
.ot-foot{margin-top:auto; padding-top:18px;}
/* Čip ide u svoj redak na vrhu, poravnat desno — ne u kut preko crteža.
Ilustracije su kvadratne i centrirane, pa je apsolutni čip u kutu ulazio u
njih 15–20 px u sve četiri kartice. Vlastiti redak to ne može, kolika god
slika bila.
`tabular-nums` da se „119 €" i „150 €" ne razilaze u širini kroz kartice. */
.ot-chip{
align-self:flex-end;
margin-bottom:6px;
padding:4px 10px; border-radius:999px;
background:var(--accent-soft); color:var(--primary-dark);
font-size:13px; font-weight:700; font-variant-numeric:tabular-nums;
white-space:nowrap;
}
.ot-chip--free{background:#DFF0E7; color:var(--ok);}
.ot-cta{
flex-shrink:0; font-size:14.5px; font-weight:600; color:var(--primary);
white-space:nowrap;
}
.ot-card:hover .ot-cta{color:var(--primary-dark);}
@media (max-width:1100px){
.ot-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
.ot-grid{grid-template-columns:1fr; gap:14px;}
/* Crtež uz lijevi rub, u istoj crti s naslovom i opisom ispod njega. Na
jednom stupcu centrirana slika lebdi sama nasred kartice, odvojena od
svega što je opisuje. */
.ot-card{--ot-art:88px; padding:20px 18px; position:relative;}
.ot-art{justify-content:flex-start; margin-bottom:14px;}
/* Čip se vraća u kut: crtež je sada lijevo, pa desni kut stoji prazan i dva
se ne mogu sudariti. Time i redak koji je čip zauzimao nestaje, što plaća
dio visine koju je veći crtež uzeo. */
.ot-chip{position:absolute; top:18px; right:18px; margin-bottom:0;}
.ot-foot{padding-top:14px;}
}
/* ============================================================
ČIPOVI — popis kolegija (educator_list)
============================================================ */
.chip-row{display:flex; flex-wrap:wrap; gap:8px;}
.chip{
display:inline-flex; align-items:center; gap:8px;
font-size:15px; font-weight:600; color:var(--ink);
background:var(--paper); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
padding:7px 14px 7px 8px; text-decoration:none;
transition:border-color .15s ease, background-color .15s ease;
}
.chip:hover{border-color:var(--primary); background:var(--accent-soft); color:var(--navy);}
.chip--more{padding:7px 14px; color:var(--primary); background:transparent; border-style:dashed;}
/* ============================================================
KARTICE KOLEGIJA / INSTRUKCIJA
============================================================ */
.filter-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.filter-row[hidden]{display:none;}
.catalog-filters{display:flex; flex-direction:column; gap:12px; margin-bottom:24px;}
.filter-row--smjer{padding-top:12px; border-top:1px solid var(--border);}
.filter-btn{
font-family:var(--body); font-size:14.5px; font-weight:600; color:var(--muted);
background:var(--paper); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
padding:8px 16px; cursor:pointer;
}
.filter-btn:hover{border-color:var(--primary); color:var(--primary);}
.filter-btn[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff;}
.course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px;}
@media (max-width:960px){ .course-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .course-grid{grid-template-columns:1fr;} }
.course-card{display:flex; flex-direction:column; padding:24px;}
.course-card[hidden]{display:none;}
/* Lice kartice — sličica iz videa, do rubova kartice. Negativne margine jer
kartica nosi svoj padding, a slika ga ne smije poštovati. */
/* `.cc-video` je otišao sa slikom s YouTubea - kartica sada uvijek crta
`.cc-thumb`, a play znak nad njom pali `icon_is_video`. */
.cc-play{
position:absolute; inset:0; margin:auto;
width:52px; height:52px; border-radius:50%;
background:rgba(255,255,255,.94); color:var(--navy);
display:flex; align-items:center; justify-content:center;
transition:transform .15s ease;
z-index:1;
}
a.card:hover .cc-play{transform:scale(1.08);}
/* Kolegij bez videa (sedam od sedamnaest) pada na fotografiju edukatora —
ista ploha, bez gumba, jer ondje nema što pokrenuti. */
.cc-thumb{
position:relative; aspect-ratio:16/9;
margin:-24px -24px 16px;
border-radius:var(--radius) var(--radius) 0 0; overflow:hidden;
background-color:var(--navy); background-size:cover; background-position:center 22%;
border-bottom:1px solid var(--border);
}
.course-card h3{margin:0 0 10px;}
/* Vrste ponuda — jedino po čemu se kartice sada međusobno razlikuju, otkad su
cijena, sati i prolaznost otišli na stranicu kolegija. Zato stoje odmah pod
naslovom, a ne pri dnu. */
.cc-kinds{
display:flex; flex-wrap:wrap; gap:6px;
list-style:none; margin:0 0 14px; padding:0;
}
.cc-kinds li{
font-size:11.5px; font-weight:700; letter-spacing:.06em;
color:var(--primary-dark); background:var(--accent-soft);
border-radius:4px; padding:3px 8px;
}
/* Edukator na dnu, tiho — lice je gore na slici, ovo je potpis. */
.course-card .cc-edukator{
display:flex; align-items:center; gap:8px;
margin-top:auto; padding-top:14px;
font-size:14px; color:var(--muted);
}
.cc-avatar{width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.price{font-weight:700; font-size:19px; color:var(--navy);}
.price .was{font-weight:400; font-size:14px; color:var(--muted); text-decoration:line-through; margin-right:6px;}
/* ============================================================
STATS BAND
============================================================ */
.stats-band{background:var(--navy); color:#fff; padding:48px 0;}
/* Stupaca koliko ima brojki. Fiksna četiri su uz tri brojke ostavljala prazan
četvrti stupac, pa je traka izgledala kao da nešto nije dovučeno. */
.stats-band .wrap{display:grid; grid-template-columns:repeat(var(--stat-cols,3),1fr); gap:24px;}
@media (max-width:860px){ .stats-band .wrap{grid-template-columns:repeat(2,1fr);} }
.stat .stat-num{font-family:var(--heading); font-weight:700; font-size:clamp(30px,3.4vw,40px); color:var(--accent); line-height:1.1;}
.stat .stat-label{font-size:14.5px; color:#C6C4BB; margin-top:4px;}
/* ============================================================
TESTIMONIALI
============================================================ */
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:860px){ .quote-grid{grid-template-columns:1fr;} }
/* UGC video recenzije — story format (9:16, horizontalni scroll) */
/* `50vw` ispod uključuje i okomitu traku za skrolanje (Windows, ili Mac s
mišem), pa je red za njezinu širinu širi od prozora i cijela stranica
dobije vodoravni skrol. Višak je samo desni razmak reda, pa ga se smije
odrezati. `clip`, a ne `hidden`: ne radi okvir za skrolanje i ne reže
okomito, gdje povećana kartica treba prostor. */
.section--stories{overflow-x:clip;}
.stories-row{
display:flex; gap:16px; overflow-x:auto;
/* Preko cijele širine zaslona, na obje strane: sadržaj koji se skrola ne
smije stati ondje gdje stane tekst - inače zadnja vidljiva kartica
izgleda kao zadnja koja postoji.
Negativna margina vraća ono što stupac gubi do ruba prozora, a jednaki
unutarnji razmak vraća **prvu** karticu u crtu s naslovom iznad. Red je
time širok koliko i prozor, a počinje ondje gdje počinje i tekst.
`50%` se računa od stupca (`.wrap`, 1200 - 2×24 razmaka), `50vw` od
prozora; razlika je točno razmak od ruba prozora do teksta. */
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
padding-left:calc(50vw - 50%);
padding-right:calc(50vw - 50%);
/* Gornji i donji razmak nisu ukras: kartica se na prijelaz mišem poveća, a
red je vodoravno skrolabilan, pa mu je i okomito sve izvan okvira
odrezano. Bez ovog prostora povećana kartica udari u rub. */
padding-top:12px; padding-bottom:20px;
/* Bez snapanja. Na dvadeset kartica ono ionako više smeta nego pomaže, a
ovdje je i aktivno smetalo: `start` poravnanje je prvu karticu vuklo na
sam rub prozora i poništavalo razmak koji je drži u crti s naslovom.
`scroll-padding` ga nije nadjačao. */
/* Traka za skrolanje preko cijele širine je sama po sebi šum; red se pomiče
prstom, kotačićem i tipkovnicom i bez nje. */
scrollbar-width:none;
}
.stories-row::-webkit-scrollbar{display:none;}
.story{
position:relative;
flex:0 0 190px;
/* Razmak do imena je 12, a ne 8: povećana kartica inače sjedne na ime. */
display:flex; flex-direction:column; align-items:center; gap:12px;
}
.story-frame{
position:relative; width:190px; height:338px;
border-radius:var(--radius); border:1px solid var(--border); overflow:hidden;
display:block; padding:0; font:inherit; color:inherit; text-align:left;
background-color:var(--navy); background-size:cover; background-position:center 20%;
transition:transform .18s ease, box-shadow .18s ease;
}
/* Samo pri dnu, i to lagano. Prije je zastor pokrivao cijelu karticu
(`inset:0`) i tamnio je i na vrhu - tuđi kadar je kroz njega izgledao kao
da je snimljen navečer. Posao mu je jedino da ime dolje ostane čitljivo,
a to je donja trećina; iznad nje nema što raditi. */
.story-frame::before{
content:""; position:absolute; left:0; right:0; bottom:0; height:42%; z-index:1;
background:linear-gradient(to top, rgba(20,20,19,.5) 0%, rgba(20,20,19,.2) 40%, rgba(20,20,19,0) 100%);
}
/* Otvaranje playera: gumb preko cijele plohe. Prozirna je i bez obruba - ono
što se vidi su play znak i citat u njoj, a ne sam gumb. */
.story-open{
position:absolute; inset:0; z-index:2;
width:100%; height:100%; padding:0; border:0; background:none;
cursor:pointer; font:inherit; color:inherit; text-align:left;
}
.story-open:focus-visible{outline:2px solid #fff; outline-offset:-4px;}
.story-frame .play-badge{
position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center;
color:#fff; font-size:24px; transition:opacity .2s ease;
}
.story-frame:hover .play-badge{opacity:0;}
/* Citat je ostao samo tekstualnoj kartici - ondje je on sadržaj. Na snimci
ga nema: ime i kolegij su ono što se o njoj treba znati prije klika. */
.story-frame .tag{position:absolute; top:10px; left:10px;}
.story-frame.add-story{
background:var(--cream); border:1px dashed var(--border-strong);
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:8px; text-align:center;
}
.story-frame.add-story::before{content:none;}
.story-frame.add-story img{width:64px; height:auto;}
.story-frame.add-story p{font-size:12.5px; color:var(--muted); margin:0; padding:0 12px;}
/* Gumb za zvuk: u donjem desnom kutu kartice, nad slikom. Susjed je kartice
u HTML-u, pa ga ovdje treba pozicionirati - `.story` je zato `relative`.
Ne nasljeđuje povećanje kartice, nego stoji mirno dok se slika iza njega
miče; meta koja bježi pod prstom je meta koja se promaši. */
.story-mute{
position:absolute; right:10px; bottom:10px; z-index:3;
width:32px; height:32px; padding:0; border:0; border-radius:50%;
background:rgba(20,20,19,.55); color:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background-color .15s ease;
}
.story-mute:hover{background:rgba(20,20,19,.8);}
/* Ikona kaže **stanje**, ne radnju: prekriženi zvučnik dok je nijemo. */
.story-mute .story-mute-on{display:none;}
.story-mute[aria-pressed="true"] .story-mute-off{display:none;}
.story-mute[aria-pressed="true"] .story-mute-on{display:block;}
/* Ime i kolegij u kartici, preko gradijenta na dnu. Bijelo sa sjenom, jer
iza njih je nečiji kadar i on nije uvijek taman - a ploha pod tekstom bi
od snimke napravila karticu s natpisom. */
.story-who{
position:absolute; left:12px; right:50px; bottom:12px; z-index:2;
display:flex; flex-direction:column; gap:1px;
text-shadow:0 1px 4px rgba(0,0,0,.65);
pointer-events:none;
}
.story-name{
font-size:13.5px; font-weight:600; color:#fff; line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.story-course{
font-size:11.5px; color:rgba(255,255,255,.8); line-height:1.25;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Na tekstualnoj kartici nema snimke ni gradijenta - ondje se čita s plohe,
pa i boje idu natrag na obične. */
.story-who--text{right:12px; text-shadow:none;}
.story-who--text .story-name{color:var(--navy);}
.story-who--text .story-course{color:var(--muted);}
@media (prefers-reduced-motion:reduce){
.story-frame .play-badge,.story-frame .story-quote,.story-frame{transition:none;}
/* Tko je tražio manje gibanja ne dobiva ni povećanje — `main.js` iz istog
razloga ne pokreće ni snimku. */
.story-frame--video:hover,.story-frame--video:focus-visible{transform:none;}
}
/* Naslovnica storije: prvi kadar snimke preko cijele kartice. Gradijent iz
`.story-frame::before` ostaje — preko njega se čita i play znak i citat. */
.story-frame--video{background-color:#000;}
.story-poster{
display:block; width:100%; height:100%; object-fit:cover;
/* Ispod gradijenta i play znaka, inače bi video prekrio oboje — ali
**ne** negativnim `z-index`om. Negativan sloj se penje iznad kartice do
prvog konteksta slaganja, pa je crna podloga `.story-frame--video`
prekrivala snimku: kartice su stajale crne i prije i za vrijeme
reprodukcije. Sloj 0 ovdje, 1 i 2 iznad, i sve ostaje unutar kartice. */
position:absolute; inset:0; z-index:0;
}
/* Dok se najava vrti, play znak se makne — on poziva na nešto što se već
događa. Citat ostaje: on i dalje govori o čemu je snimka. */
.story-frame--video:hover .play-badge{opacity:0;}
/* Kartica na prijelaz mišem iskoči iz reda i krene se vrtjeti. Povećanje je
ono što kaže da se nešto događa prije nego što se prvi kadar pomakne —
`main.js` snimku tek tada dovlači, pa je sama slika uvijek koji trenutak u
zaostatku. Sjena odvaja iskočenu karticu od susjednih. */
.story-frame--video:hover,
.story-frame--video:focus-visible{
transform:scale(1.03);
box-shadow:0 6px 16px rgba(20,20,19,.16);
/* Inače je sljedeća kartica u nizu nacrta preko: iskočena mora biti gore. */
z-index:2;
}
/* ---------- player za storije ---------- */
/* Preko cijelog zaslona, crna podloga: jedino što se gleda je snimka. */
.stories-player{
position:fixed; inset:0; z-index:1000;
background:rgba(10,10,10,.96);
display:flex; align-items:center; justify-content:center;
}
/* Mora stajati **iza** pravila iznad: `display:flex` inače pobijedi ugrađeno
`[hidden]{display:none}` preglednika i player stoji otvoren na učitavanju. */
.stories-player[hidden]{display:none;}
/* Stranica iza ne smije skrolati dok je player otvoren. */
body.has-stories-open{overflow:hidden;}
/* Uspravni kadar, isti omjer kao kartica. `min()` drži cijelu storiju u
vidnom polju i na niskom prozoru, gdje bi sama visina prelila zaslon. */
.sp-stage{
position:relative;
width:min(420px, 100vw);
height:min(calc(100vh - 32px), calc(min(420px, 100vw) * 16 / 9));
background:#000; overflow:hidden;
border-radius:var(--radius);
}
/* Na mobitelu preko cijelog zaslona. `dvh`, ne `vh`: `100vh` je ondje visina
**bez** adresne trake, pa snimka ispadne viša od zaslona i dno joj odreže
traka čim se pojavi. `dvh` prati ono što je stvarno vidljivo. */
@media (max-width:560px){
.sp-stage{width:100vw; height:100dvh; border-radius:0;}
/* `cover`, ne `contain`: uspravna snimka na uspravnom zaslonu popuni kadar,
a crne trake sa strana nisu ni puni zaslon ni lijep prizor. */
.sp-video{object-fit:cover;}
}
.sp-video{width:100%; height:100%; object-fit:contain; display:block; background:#000;}
/* Jedna crta za jednu snimku, pod vrhom. Niz odsječaka — po jedan za svaku
recenziju — čitao se kao da jedna snimka ima više dijelova. */
.sp-progress{
position:absolute; top:10px; left:10px; right:10px; z-index:3;
height:3px; border-radius:999px; background:rgba(255,255,255,.3); overflow:hidden;
}
.sp-progress i{display:block; height:100%; width:0; background:#fff;}
.sp-who{
position:absolute; top:22px; left:12px; right:52px; z-index:3;
display:flex; flex-direction:column; line-height:1.25;
/* Sjena umjesto plohe: ime mora ostati čitljivo i preko svijetlog kadra. */
text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.sp-name{color:#fff; font-size:14px; font-weight:600;}
.sp-course{color:rgba(255,255,255,.75); font-size:12px;}
/* Zatvaranje gore desno, zvuk dolje desno. Razmak među njima je cijela
visina kadra, pa ih ni na mobitelu ne hvata isti prst - a zatvaranje je
ondje gdje ga oko traži. */
.sp-close{
position:absolute; top:18px; right:10px; z-index:4;
width:32px; height:32px; padding:0; border:0; border-radius:50%;
background:rgba(0,0,0,.35); color:#fff; font-size:22px; line-height:1;
cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sp-close:hover{background:rgba(0,0,0,.55);}
.sp-sound{
position:absolute; right:14px; bottom:18px; z-index:4;
/* Veći od zatvaranja: diže se prstom, i to usred gledanja. */
width:40px; height:40px; padding:0; border:0; border-radius:50%;
background:rgba(0,0,0,.35); color:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.sp-sound:hover{background:rgba(0,0,0,.55);}
/* Ikona kaže **stanje**, ne radnju: prekriženi zvučnik dok je nijemo. */
.sp-sound .sp-sound-on{display:none;}
.sp-sound[aria-pressed="true"] .sp-sound-off{display:none;}
.sp-sound[aria-pressed="true"] .sp-sound-on{display:block;}
/* Natrag i naprijed, uz rubove kadra. Bez plohe iza sebe - sjena ih drži
čitljivima i preko svijetle snimke, a ploha bi odgrizla kadar. */
.sp-nav{
position:absolute; top:50%; transform:translateY(-50%); z-index:3;
width:44px; height:44px; padding:0; border:0; background:none;
color:#fff; cursor:pointer; opacity:.85;
display:flex; align-items:center; justify-content:center;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.7));
}
.sp-nav:hover{opacity:1;}
.sp-nav--prev{left:2px;}
.sp-nav--next{right:2px;}
.sp-nav:focus-visible{outline:2px solid #fff; outline-offset:-4px; border-radius:50%;}
/* Tekstualna recenzija nije snimka i ne smije se ponašati kao da jest.
Nasljeđivala je tamnu plohu i citat skriven do prijelaza mišem, pa je na
dodiru — gdje prijelaza nema — bila prazna tamna ploha. Sada je svijetla
kartica s citatom koji stoji. */
.story-frame--text{
background-color:var(--cream); cursor:default;
display:flex; align-items:center;
}
.story-frame--text::before{content:none;}
/* Slika sa storijom: tekst je u samoj slici, gradijent bi ga samo zatamnio. */
.story-frame--image{background-color:var(--cream);}
.story-frame--image::before{content:none;}
.story-frame--text{align-items:flex-start;}
.story-frame--text .story-quote{
position:static; opacity:1; transform:none;
color:var(--ink); font-size:12.5px; padding:14px 14px 0;
/* Duži citat se odreže umjesto da prelije kartice fiksne visine; mjesto
za potpis na dnu se oduzima od njegovih redaka, ne od kartice. */
display:-webkit-box; -webkit-line-clamp:13; -webkit-box-orient:vertical; overflow:hidden;
}
.quote-card{padding:24px; display:flex; flex-direction:column; gap:16px;}
.quote-card blockquote{margin:0; font-size:16px; color:var(--ink); flex:1;}
/* `.quote-video` je otišao s podjelom recenzija: pisana ih više nema, a
snimke žive na Početnoj kao storije. Prazan citat se i dalje skriva -
uvezena recenzija zna biti bez teksta. */
.quote-card blockquote:empty{display:none;}
.quote-card blockquote::before{content:"“"; display:block; font-family:var(--heading); font-size:34px; line-height:.6; color:var(--accent); margin-bottom:12px;}
.quote-who{display:flex; align-items:center; gap:12px; border-top:1px solid var(--border); padding-top:16px;}
.quote-avatar{
width:40px; height:40px; border-radius:50%; flex-shrink:0;
background:var(--cream); border:1px solid var(--border-strong);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:14px; color:var(--navy);
}
.quote-name{font-weight:600; font-size:15px; color:var(--navy); line-height:1.3;}
.quote-course{font-size:13.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}
/* ============================================================
BESPLATNI MATERIJALI
============================================================ */
.materials .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start;}
@media (max-width:860px){ .materials .wrap{grid-template-columns:1fr;} }
.mat-list{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); overflow:hidden;}
.mat-item{
display:flex; align-items:center; gap:12px;
padding:12px 16px; text-decoration:none; color:var(--ink); font-weight:600; font-size:15.5px;
border-bottom:1px solid var(--border);
}
.mat-item:last-child{border-bottom:none;}
.mat-item:hover{background:var(--cream); color:var(--navy);}
.mat-item .mat-count{margin-left:auto; font-weight:400; font-size:13.5px; color:var(--muted);}
.mat-item .dl{color:var(--primary); font-weight:700;}
/* ============================================================
BLOG KARTICE
============================================================ */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:860px){ .blog-grid{grid-template-columns:1fr;} }
.blog-card{padding:0; display:flex; flex-direction:column; overflow:hidden;}
/* thumbnail s maskotom + gradijentom */
.blog-thumb{
position:relative; aspect-ratio:16/10; overflow:hidden;
display:flex; align-items:center; justify-content:center;
background:linear-gradient(135deg,#B54A26 0%,#E08A5B 55%,#EFDCCB 100%);
}
.blog-card[data-kind="academy"] .blog-thumb{background:linear-gradient(135deg,#141413 0%,#5A4A42 55%,#B54A26 100%);}
.blog-card[data-kind="study"] .blog-thumb{background:linear-gradient(135deg,#B54A26 0%,#C85A7A 55%,#8A6BA8 100%);}
.blog-mascot{width:auto; height:60%; max-width:68%; object-fit:contain; filter:drop-shadow(0 6px 14px rgba(20,20,19,.22));}
/* Naslovna slika ispunjava okvir.
Okvir je `flex` s omjerom 16/10, a slika iz `{% picture %}` nema klasu — pa
je ulazila kao običan flex-item sa svojim `width`/`height` atributima i
izlazila raširena ili sitna, ovisno o izvorniku. `cover` je isti odgovor koji
već koristi kartica bloga u /app-u. */
.blog-thumb > img:not(.blog-mascot),
.article-hero > img:not(.blog-mascot){
width:100%; height:100%; object-fit:cover; display:block;
}
.blog-thumb .cat{
position:absolute; top:12px; left:12px; z-index:1;
display:inline-flex; align-items:center; gap:6px;
padding:5px 11px; border-radius:999px;
background:rgba(255,255,255,.82); backdrop-filter:blur(6px);
border:1px solid rgba(255,255,255,.55);
font-size:12.5px; font-weight:700; letter-spacing:.01em; color:var(--navy);
box-shadow:0 1px 3px rgba(20,20,19,.12);
}
/* hero slika u samom blog postu — isti izgled kao thumbnail kartice */
.article-hero{
position:relative; aspect-ratio:16/9; overflow:hidden;
display:flex; align-items:center; justify-content:center;
border-radius:var(--radius); margin:0 0 32px;
background:linear-gradient(135deg,#B54A26 0%,#E08A5B 55%,#EFDCCB 100%);
}
.article-hero .blog-mascot{height:56%;}
/* Bez naslovne slike blok s maskotom je ukras, a 16:9 pojede cijeli prvi
ekran prije prve rečenice — zato nizak. */
.article-hero:has(> .blog-mascot){aspect-ratio:auto; height:140px;}
.article-hero:has(> .blog-mascot) .blog-mascot{height:80%;}
.blog-body{padding:24px; display:flex; flex-direction:column; gap:8px;}
.blog-card .date{font-size:13.5px; color:var(--muted);}
.blog-card h3{margin:0; font-size:19px;}
.blog-card p{margin:0; font-size:14.5px; color:var(--muted); flex:1;}
/* ---------- carousel (slični postovi) ---------- */
.carousel{position:relative; margin-top:24px;}
.carousel-btn{
position:absolute; top:50%; z-index:2;
width:56px; height:56px; border-radius:999px;
border:1px solid var(--border-strong); background:var(--paper); color:var(--navy);
font-size:24px; line-height:1; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center;
transition:border-color .15s ease, box-shadow .15s ease;
}
.carousel-btn[data-dir="prev"]{left:0; transform:translate(calc(-100% - 28px),-50%);}
.carousel-btn[data-dir="next"]{right:0; transform:translate(calc(100% + 28px),-50%);}
.carousel-btn:hover{border-color:var(--navy); box-shadow:var(--shadow-hover);}
.carousel-btn:disabled{opacity:.35; cursor:default; box-shadow:none; border-color:var(--border);}
/* na užim ekranima nema mjesta izvan kolone — vrati strelice na rub */
@media (max-width:1330px){
.carousel-btn[data-dir="prev"]{transform:translate(-50%,-50%);}
.carousel-btn[data-dir="next"]{transform:translate(50%,-50%);}
}
.blog-track{
flex:1; min-width:0;
display:flex; gap:24px; overflow-x:auto; scroll-behavior:smooth;
scroll-snap-type:x mandatory; padding-bottom:8px;
scrollbar-width:none; -ms-overflow-style:none;
}
.blog-track::-webkit-scrollbar{display:none;}
/* točno 3 kartice vidljive odjednom */
.blog-track > .blog-card{flex:0 0 calc((100% - 2 * 24px) / 3); scroll-snap-align:start;}
@media (max-width:860px){
.carousel{gap:8px;}
.blog-track > .blog-card{flex:0 0 100%;}
}
/* ============================================================
CTA BAND s maskotom
============================================================ */
.cta-band{padding:64px 0;}
.cta-band .cta-inner{
background:var(--cream); border:1px solid var(--border); border-radius:var(--radius);
padding:32px 48px;
display:flex; align-items:center; gap:48px;
}
.cta-band img{width:150px; height:auto; flex-shrink:0;}
.cta-band h2{margin-bottom:8px;}
.cta-band p{color:var(--muted); margin-bottom:16px; max-width:56ch;}
@media (max-width:720px){
.cta-band .cta-inner{flex-direction:column; text-align:center; padding:32px;}
.cta-band .cta-inner .section-title::after{margin-inline:auto;}
}
/* ============================================================
FORME (native elementi)
============================================================ */
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-size:14.5px; font-weight:600; color:var(--navy); margin-bottom:4px;}
.form-field input, .form-field textarea, .form-field select, .input{
width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
background:var(--paper); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
padding:10px 12px;
}
/* Vlastita strelica, jer onu koju preglednik sam crta ne možemo pomaknuti:
Chrome i Safari je lijepe uz sam rub polja, pa je tekst imao 12px zraka s
lijeve strane, a strelica nijedan s desne.
Boja je upisana u SVG (`%236B6960`, isto što i `--muted`), a ne
`currentColor`: pozadinska slika ne nasljeđuje boju teksta. Mijenja li se
token, mijenja se i ovdje.
`padding-right` je 36px da dugačka vrijednost ne prolazi ispod strelice. */
.form-field select, select.input{
-webkit-appearance:none; appearance:none;
padding-right:36px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B6960' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:18px 18px;
}
/* `background-color`, ne kratica `background`: kratica resetira i
`background-image`, pa bi onemogućen select ostao bez strelice. Za `input`
je svejedno — on sliku nema. */
.form-field input:disabled, .form-field select:disabled{background-color:var(--cream); color:var(--muted);}
.form-field textarea{resize:vertical; min-height:120px;}
.form-hint{font-size:13.5px; color:var(--muted); margin-top:4px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:560px){ .form-row{grid-template-columns:1fr;} }
.check-row{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; margin:8px 0;}
.check-row input{margin-top:4px;}
/* ============================================================
FOOTER
============================================================ */
.site-footer{background:var(--navy); color:#C6C4BB; margin-top:32px;}
.site-footer .foot-grid{
display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
padding:48px 0;
}
@media (max-width:820px){ .site-footer .foot-grid{grid-template-columns:1fr 1fr;} }
.site-footer .foot-brand{display:flex; align-items:center; gap:10px; font-family:var(--heading); font-weight:700; font-size:20px; color:#fff; margin-bottom:12px;}
.site-footer .foot-about{font-size:14.5px; max-width:32ch;}
.site-footer h4{font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#908D83; margin:0 0 16px;}
.site-footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; font-size:14.5px;}
.site-footer a{color:#ECEAE3; text-decoration:none;}
.site-footer a:hover{color:#fff; text-decoration:underline;}
.site-footer .foot-bottom{
border-top:1px solid rgba(255,255,255,.14);
padding:16px 0;
display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
font-size:13.5px; color:#908D83;
}
.site-footer .foot-bottom a{color:#C6C4BB;}
/* ============================================================
POMOĆNI RAZREDI za unutarnje stranice
============================================================ */
.page-head{background:var(--cream); border-bottom:1px solid var(--border); padding:48px 0;}
.page-head h1{margin-bottom:8px;}
.page-head p{color:var(--muted); max-width:62ch; margin:0;}
.page-head .head-row{display:flex; align-items:center; gap:16px;}
.breadcrumb{font-size:13.5px; color:var(--muted); margin-bottom:12px;}
.breadcrumb a{text-decoration:none; color:var(--muted);}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb .sep{margin:0 6px;}
/* prazna stanja i success poruke s maskotom */
.empty-state{
text-align:center; padding:48px 24px;
border:1px dashed var(--border-strong); border-radius:var(--radius); background:var(--cream);
}
.empty-state img{width:110px; margin:0 auto 16px;}
.empty-state h3{margin-bottom:8px;}
.empty-state p{color:var(--muted); max-width:44ch; margin:0 auto 16px;}
/* ============================================================
KATALOG KOLEGIJA
============================================================ */
.search-row{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:24px;}
.search-row input[type="search"]{
flex:1; min-width:220px; max-width:380px;
font-family:var(--body); font-size:16px; color:var(--ink);
background:var(--paper); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
padding:10px 12px;
}
.subject-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:960px){ .subject-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .subject-grid{grid-template-columns:1fr;} }
.subject-card{display:flex; align-items:center; gap:16px; padding:16px 24px;}
.subject-card[hidden]{display:none;}
.sem-head{grid-column:1/-1; margin:0; font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding-bottom:8px; border-bottom:1px solid var(--border);}
.sem-head[hidden]{display:none;}
.subject-grid.is-grouped .sem-head[data-slot="low"]{order:1;}
.subject-grid.is-grouped .sem-head[data-slot="high"]{order:3;}
.subject-card h3{margin:0 0 2px; font-size:18px;}
.subject-card .sc-meta{font-size:13.5px; color:var(--muted);}
/* ============================================================
DETALJ KOLEGIJA
============================================================ */
.detail-grid{display:grid; grid-template-columns:1.9fr 1fr; gap:48px; align-items:start; padding:48px 0;}
@media (max-width:920px){ .detail-grid{grid-template-columns:1fr;} }
.content-block{margin-bottom:32px;}
/* Opis kolegija na javnoj stranici: prijelaz ide u plohu stranice, ne u
bijelu karticu, a četiri retka su ovdje otprilike ono što je u `/app` tri —
slog je krupniji. Materijali time ostaju vidljivi bez skrolanja. */
.content-block[data-expandable]{--clamp-h:6.6em; --clamp-fade:var(--bg);}
.content-block h2{font-size:24px;}
.content-block ul{margin:0 0 16px; padding-left:20px;}
.content-block li{margin-bottom:4px;}
.buybox{padding:24px;}
.buybox .bb-price{font-family:var(--heading); font-weight:700; font-size:32px; color:var(--navy); line-height:1.1;}
.buybox .bb-price .was{font-family:var(--body); font-weight:400; font-size:16px; color:var(--muted); text-decoration:line-through; margin-right:8px;}
.buybox .bb-note{font-size:13.5px; color:var(--muted); margin:4px 0 16px;}
.buybox .bb-list{list-style:none; margin:0 0 16px; padding:16px 0 0; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px; font-size:14.5px;}
.buybox .bb-list .tick{color:var(--ok); font-weight:700; margin-right:6px;}
.buybox .btn{width:100%;}
.buybox .bb-secondary{margin-top:8px;}
/* promo banner ispod buyboxa */
.promo-banner{margin-top:16px; padding:24px; background:var(--cream); border-color:var(--border-strong);}
.promo-banner .promo-tag{background:var(--accent-soft); color:var(--primary-dark); border-color:#E7C9B6; margin-bottom:12px;}
.promo-banner .promo-title{font-family:var(--heading); font-size:24px; color:var(--navy); margin:0 0 8px; line-height:1.15;}
.promo-banner .promo-text{font-size:13.5px; color:var(--muted); margin:0 0 16px;}
.promo-banner .promo-code{font-size:14px; color:var(--ink); margin-bottom:16px; padding:8px 12px; background:var(--paper); border:1px dashed var(--border-strong); border-radius:var(--radius-sm); display:inline-block;}
.promo-banner .promo-code strong{color:var(--primary); letter-spacing:.5px;}
.promo-banner .promo-mascot{display:block; width:120px; height:auto; margin:0 auto 16px;}
.promo-banner .promo-list{list-style:none; margin:0 0 16px; padding:16px 0 0; border-top:1px solid var(--border-strong); display:flex; flex-direction:column; gap:8px; font-size:14.5px;}
.promo-banner .promo-list .tick{color:var(--ok); font-weight:700; margin-right:6px;}
.promo-banner .promo-list strong{color:var(--primary);}
/* odabir formata (native radio) */
.format-choice{display:flex; flex-direction:column; gap:12px; margin-bottom:16px;}
.format-option{
display:flex; gap:12px; align-items:flex-start;
border:1px solid var(--border-strong); border-radius:var(--radius-sm);
padding:16px; cursor:pointer; background:var(--paper);
}
.format-option:hover{border-color:var(--primary);}
.format-option:has(input:checked){border-color:var(--primary); background:var(--accent-soft);}
.format-option input{margin-top:4px;}
.format-option .fo-title{font-weight:700; color:var(--navy); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.format-option .fo-desc{font-size:14px; color:var(--muted); margin:2px 0 0;}
.format-option .fo-price{margin-left:auto; font-weight:700; font-size:17px; color:var(--navy); white-space:nowrap;}
.format-option .fo-price .was{font-weight:400; font-size:13.5px; color:var(--muted); text-decoration:line-through; margin-right:5px;}
/* materijali na kolegiju */
.file-list{border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); overflow:hidden;}
.file-row{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); font-size:15px;}
.file-row:last-child{border-bottom:none;}
.file-row .fr-name{font-weight:600; color:var(--ink);}
.file-row .fr-meta{font-size:13px; color:var(--muted);}
.file-row .fr-action{margin-left:auto;}
.file-row--locked .fr-name{color:var(--muted); font-weight:400;}
.locked-note{
display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
background:var(--accent-soft); border:1px solid #E7C9B6; border-radius:var(--radius-sm);
padding:12px 16px; margin-bottom:12px; font-size:14.5px;
}
.locked-note p{margin:0;}
/* ============================================================
BLOG
============================================================ */
.pagination{display:flex; gap:8px; justify-content:center; margin-top:32px;}
.page-link{
display:inline-flex; align-items:center; justify-content:center;
min-width:40px; height:40px; padding:0 12px;
border:1px solid var(--border-strong); border-radius:var(--radius-sm);
font-weight:600; font-size:15px; color:var(--ink); text-decoration:none; background:var(--paper);
}
.page-link:hover{border-color:var(--primary); color:var(--primary);}
.page-link[aria-current="page"]{background:var(--navy); border-color:var(--navy); color:#fff;}
/* članak */
.article-wrap{max-width:760px; margin:0 auto; padding:48px 24px;}
.article-meta{display:flex; gap:12px; align-items:center; font-size:14px; color:var(--muted); margin-bottom:24px; flex-wrap:wrap;}
.article-meta .cat{font-weight:700; letter-spacing:.05em; text-transform:uppercase; font-size:12.5px; color:#9A3C1D;}
/* Tekst članka čita se u stupcu od ~66 znakova — 760px pri 17px bilo je ~90,
pa se oko gubilo na prelasku u novi red. `.article-wrap` dijeli i potvrda
narudžbe, zato je suženje samo ovdje. */
/* Tekst je malo svjetliji od naslova (#141413) — dug odlomak u gotovo crnom
je težak za oko; kontrast na podlozi je i dalje ~10:1. */
.article .article-wrap{max-width:708px; font-size:18px; line-height:1.7; color:#3D3B35;}
.article strong, .article b{color:var(--ink);}
.article h1{margin-bottom:12px;}
/* Tijelo članka ima jedno pismo i četiri veličine (18 · 22 · 30 · naslov);
hijerarhiju nosi veličina, ne debljina ni drugo pismo. Serif ostaje samo
naslovu članka. */
/* veličina je na stupcu, ne na `p` — uvezeni članci imaju i tekst izvan
odlomaka, koji bi inače ostao sitniji */
.article p{margin-bottom:20px;}
.article strong, .article b{font-weight:600;}
/* uvezeni članci nose prazne odlomke iz starog editora — s većim razmakom
bile bi to rupe usred teksta */
.article p:empty{display:none;}
/* Sekcija se mora odvojiti od prethodnog teksta više nego odlomak od
odlomka — inače je cijeli članak jedan zid istog ritma. */
.article-wrap > h2, .article-wrap > h3, .article-wrap > h4{
font-family:var(--body); font-weight:600; letter-spacing:-.01em;
}
.article h2{font-size:30px; line-height:1.2; margin:56px 0 16px;}
.article h3{font-size:22px; line-height:1.3; margin:36px 0 10px;}
.article h4{font-size:18px; margin:28px 0 8px;}
.article h2 + h3{margin-top:16px;}
.article ul, .article ol{padding-left:24px; margin:0 0 20px;}
.article li{margin-bottom:10px;}
.article li::marker{color:var(--primary);}
.article-wrap > :not(.breadcrumb) a:not(.btn){color:var(--primary); text-underline-offset:3px; text-decoration-thickness:1px;}
.article-wrap > :not(.breadcrumb) a:not(.btn):hover{color:var(--primary-dark);}
/* Citat je jedini istaknuti okvir koji urednik može napisati (čistač HTML-a
briše klase), pa služi i za upozorenja i savjete — zato bez kurziva. */
.article blockquote{
margin:28px 0; padding:16px 20px;
border-left:4px solid var(--accent); background:var(--cream);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.article blockquote p{margin-bottom:8px;}
.article blockquote > :last-child{margin-bottom:0;}
.article hr{border:0; border-top:1px solid var(--border); margin:48px 0;}
.article table{width:100%; border-collapse:collapse; margin:24px 0; font-size:16px;}
.article th, .article td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; vertical-align:top;}
.article th{background:var(--cream); font-weight:700; color:var(--navy);}
@media (max-width:640px){
.article-wrap{padding:32px 16px;}
.article .article-wrap{font-size:17px;}
.article h2{font-size:26px; margin-top:44px;}
.article h3{font-size:20px; margin-top:28px;}
.article table{display:block; overflow-x:auto;}
}
/* Slika i video usred teksta.
Tijelo članka je HTML koji je netko napisao, pa ovdje stoji jedino mjesto
koje mu daje mjeru: `iframe` bez dimenzija je 300x150 piksela, a slika od
1600px izlazi iz stupca širokog 760. Vrijedi i za uvezene članke — 282 od
490 tijela nosi `iframe`, a 63 sliku. */
.article img{max-width:100%; height:auto; border-radius:var(--radius-sm);}
.article iframe{
display:block; width:100%; aspect-ratio:16/9; border:0;
margin:24px 0; border-radius:var(--radius-sm);
}
.article figure{margin:24px 0;}
.article figcaption{font-size:14px; color:var(--muted); margin-top:8px;}
.author-box{display:flex; gap:16px; align-items:center; padding:16px 24px; margin-top:32px;}
.author-box .quote-avatar{width:52px; height:52px; font-size:17px;}
.author-box .ab-name{font-weight:700; color:var(--navy);}
.author-box .ab-role{font-size:14px; color:var(--muted);}
/* ============================================================
MOJA STRANICA (dashboard)
============================================================ */
.dash-section{padding:32px 0;}
.dash-section + .dash-section{border-top:1px solid var(--border);}
.dash-section h2{font-size:24px;}
.lms-card{display:flex; gap:16px; align-items:center; padding:16px 24px; margin-bottom:12px;}
.lms-card .lms-body{flex:1; min-width:0;}
.lms-card h3{margin:0 0 2px; font-size:18px;}
.lms-card .lms-sub{font-size:14px; color:var(--muted);}
.lms-card .lms-action{flex-shrink:0;}
/* Expired and revoked access stays on the dashboard, greyed, with a way to buy
again: "where did my course go" is a support ticket an empty dashboard causes
and a visible expired card answers (Q3.8). */
.lms-card--inactive{opacity:.72;}
@media (max-width:560px){ .lms-card{flex-direction:column; align-items:flex-start;} }
.progress-track{height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin:8px 0 4px; max-width:320px;}
.progress-fill{height:100%; background:var(--primary); border-radius:4px;}
.progress-fill.is-done{background:var(--ok);}
.progress-label{font-size:13px; color:var(--muted);}
.rok-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px;}
.rok-card{padding:16px 24px;}
.rok-card .rok-days{font-family:var(--heading); font-weight:700; font-size:34px; color:var(--navy); line-height:1.1;}
.rok-card .rok-days .unit{font-family:var(--body); font-weight:400; font-size:14px; color:var(--muted); margin-left:4px;}
.rok-card--urgent .rok-days{color:#B3432B;}
.rok-card .rok-date{font-size:13.5px; color:var(--muted);}
/* ============================================================
CHECKOUT
The `.co-*` vocabulary below (grid, card, field, summary) was already in
this stylesheet from the design mocks; the page now uses it rather than
carrying a second, nearly identical set of names. `.order-line` stays
because `app/kupnje.html` renders past orders with it.
============================================================ */
.co-main{padding:40px 0 64px;}
.co-grid{display:grid; grid-template-columns:1.35fr .85fr; gap:32px; align-items:start;}
@media (max-width:900px){
.co-grid{grid-template-columns:1fr;}
}
.co-col{min-width:0;}
.co-card{
background:var(--paper); border:1px solid var(--border); border-radius:var(--radius);
box-shadow:var(--shadow); padding:24px; margin-bottom:20px;
}
.co-card h2{font-size:20px; margin:0 0 16px;}
.co-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;}
.co-card-head h2{margin-bottom:16px;}
.co-head-link{font-size:14.5px; font-weight:600; text-decoration:none;}
.co-head-link:hover{text-decoration:underline;}
/* ---------- polja ---------- */
.co-field{margin-bottom:12px;}
.co-field input{
width:100%; font-family:var(--body); font-size:16px; color:var(--ink);
background:var(--paper); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
padding:13px 14px;
}
.co-field input::placeholder{color:var(--muted); opacity:1;}
.co-field input:focus{outline:2px solid var(--primary); outline-offset:0; border-color:var(--primary);}
.co-field.has-error input{border-color:var(--danger);}
/* The page-level `.form-error` is a panel, which is right for "something went
wrong with your order" and far too loud repeated under eight fields. On the
checkout it is the red border that carries the alarm and this only has to say
what to fix — crveni tekst ispod polja i ništa više.
Vrijedi za cijelu blagajnu, ne samo za `.co-field`: istu poruku nose i način
plaćanja i kvačica za uvjete, a greška koja je pod jednim poljem obična
rečenica a pod drugim okvir izgleda kao dvije različite vrste greške. */
.co-main .form-error{
background:none; border:none; border-radius:0; padding:0;
margin:4px 0 0; font-size:13px; color:var(--danger);
}
/* Odgovor doskoči na prvo polje s greškom; bez ovoga ono završi zalijepljeno
ispod ljepljivog zaglavlja, pa se poruka ispod njega ne vidi. */
.co-main input,.co-main select{scroll-margin-top:90px;}
.co-2col{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:560px){ .co-2col{grid-template-columns:1fr;} }
.co-hint{font-size:13.5px; color:var(--muted); margin:4px 0 0;}
/* ---------- platitelj ----------
Kvačica ispod kontakta, i blok koji se iz nje otvara. Kao i opcije plaćanja,
otvara se iz stanja samog inputa, bez skripte. */
/* Lijevi razmak je razmak kartica iznad i ispod (24px + 1px ruba), da se
kvačica poravna s njihovim tekstom. Prije je stajala na 4px, pa je
visjela dvadesetak piksela lijevo od svega ostalog u stupcu. */
.co-payer-toggle{margin:-4px 0 20px; padding:0 25px; cursor:pointer;}
/* `margin-left:0` jer preglednik kvačici daje svoja 4px slijeva, pa bi
poravnanje iznad promašilo za točno toliko. */
.co-payer-toggle input{accent-color:var(--primary); width:18px; height:18px; flex-shrink:0; margin:2px 0 0;}
.co-payer-card{display:none;}
.co-payer:has(.co-payer-toggle input:checked) .co-payer-card{display:block;}
/* ---------- način plaćanja ----------
One bordered block per option, the selected one opening to explain itself.
The body is revealed from the radio's own `:checked` state, so the page
needs no script to stay honest about what happens next. */
.pay-option{
border:1px solid var(--border-strong); border-radius:var(--radius-sm);
margin-bottom:10px; transition:border-color .15s ease, box-shadow .15s ease;
}
.pay-option:last-of-type{margin-bottom:0;}
.pay-option:hover{border-color:var(--primary);}
.pay-option:has(input:checked){border-color:var(--primary); box-shadow:0 0 0 1px var(--primary);}
.pay-option-head{
display:flex; align-items:center; gap:10px;
padding:14px 16px; cursor:pointer; font-size:15.5px;
}
.pay-option-head input{accent-color:var(--primary); width:18px; height:18px; flex-shrink:0; margin:0;}
.pay-option .po-name{font-weight:600; color:var(--navy);}
.pay-option .po-badge{
font-size:12px; font-weight:700; letter-spacing:.03em;
padding:2px 8px; border-radius:4px;
background:var(--accent-soft); color:#7A4A2B; border:1px solid #E7C9B6;
}
.pay-option .po-ico{margin-left:auto; color:var(--muted); display:flex; flex-shrink:0;}
/* Ime obrađivača uz kartičnu opciju. Tipografska oznaka dok ne stigne
službena datoteka sa stripe.com/newsroom/brand-assets — tuđi zaštićeni znak
se ne crta napamet. Boja je Stripeova (#635BFF). */
.pay-option .po-stripe{
margin-left:auto; flex-shrink:0;
font-family:var(--body); font-size:13px; font-weight:700; letter-spacing:-.01em;
color:#635BFF; background:#635BFF14; border-radius:999px; padding:3px 10px;
}
/* Oznaka sigurnosti ispod cijelog bloka opcija, ne u tijelu jedne od njih. */
.co-secure--pay{margin-top:14px; padding-top:12px; border-top:1px solid var(--border);}
/* Collapsed by default; the checked option opens. `grid-template-rows` rather
than `height`, so the block animates without anyone hardcoding its height.
The three levels are load-bearing: the grid collapses the row, `.po-body-inner`
is what clips, and the padding sits on the paragraph inside it. Padding on the
clipping element itself outlives a zero-height row and leaves a band of empty
space under every option nobody chose. */
.pay-option-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .18s ease;}
.pay-option:has(input:checked) .pay-option-body{grid-template-rows:1fr;}
.po-body-inner{overflow:hidden; min-height:0;}
.po-body-inner > p{
margin:0; padding:0 16px 16px 44px;
font-size:13.5px; color:var(--muted); line-height:1.55;
}
@media (max-width:560px){ .po-body-inner > p{padding-left:16px;} }
@media (prefers-reduced-motion:reduce){ .pay-option-body{transition:none;} }
.co-terms{font-size:13.5px; color:var(--muted); margin:16px 0 12px; padding-top:16px; border-top:1px solid var(--border);}
/* Ono što se prihvaća čita se, pa stoji u boji teksta, a ne u sivoj za sitni
natpis. Kvačica je veća od zadane: meta koja se promaši na mobitelu je
narudžba koja ne prolazi, a razlog stoji u desnom stupcu. */
.co-terms .check-row{margin:0; font-size:14px; color:var(--ink);}
.co-terms .check-row ~ .check-row{margin-top:12px;}
.co-terms .check-row input{width:18px; height:18px; margin-top:2px; accent-color:var(--primary); flex:none;}
.co-terms .form-error{margin:8px 0 0;}
.co-pay-btn{width:100%; font-size:17px; padding:16px 22px;}
/* ---------- sažetak narudžbe ---------- */
.co-summary{position:sticky; top:24px;}
/* U jednom stupcu sažetak pada **ispod** obrasca, jer u sebi nosi i gumb: da je
ostao prvi, „Naruči" bi stajao iznad praznih polja. Prestaje biti ljepljiv —
u jednom stupcu bi se prikovao preko obrasca koji se ispunjava.
Ono zbog čega je sažetak prije išao prvi — da se vidi što se kupuje prije
tipkanja — ovdje gubi malo: čovjek dolazi ravno sa stranice proizvoda.
Pravilo stoji **iza** osnovnog, ne u media bloku nekoliko stotina redaka
iznad: ondje je dosad i stajalo, i nikad nije radilo — isti selektor niže u
datoteci ga je uredno pregazio, pa je sažetak na mobitelu bio ljepljiv
unatoč komentaru koji je tvrdio suprotno. */
@media (max-width:900px){
.co-summary{position:static;}
}
.co-summary-card{padding:24px;}
.co-summary-card h2{font-size:20px; margin:0 0 16px;}
/* Stavka je kartica, ne redak. Product bump je ista ovakva kartica s kvačicom
umjesto ikone, pa se po obliku vidi da je to nešto što se **može** dodati, a
ne nešto što već jest u narudžbi.
Prije je ovdje bio redak visok oko 140px: kvadratna pločica 56px, naziv u dva
retka, rok, upozorenje i cijena složena u tri visine. Za jednu stavku. */
.sum-items{display:flex; flex-direction:column; gap:10px;}
/* Kartica je sada okomita: naziv i rok gore, razlomak ispod. Vodoravna podjela
s cijenom u desnom stupcu je nazivu uzimala stotinjak piksela i tjerala ga da
lomi, a dva gola broja jedan ispod drugog nisu govorila koji je od čega. */
.sum-card{
display:flex; flex-direction:column; gap:10px;
padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
background:var(--paper);
}
.sc-body{min-width:0;}
.sc-name{font-weight:700; color:var(--navy); font-size:14.5px; line-height:1.3;}
.sc-meta{font-size:13px; color:var(--muted); margin-top:2px;}
/* Razlomak: naziv lijevo, iznos desno, svi iznosi na istoj crti. Čita se
odozgo nadolje kao račun — cijena, pa što se skida, pa što ostaje. */
.sc-sum{display:flex; flex-direction:column; gap:4px;}
.sc-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13.5px;}
.sc-row > span:last-child{white-space:nowrap; font-variant-numeric:tabular-nums;}
.sc-row--off{color:var(--ok); font-weight:600;}
.sc-row--off a{color:inherit; text-decoration:underline; text-underline-offset:2px;}
.sc-row--off a:hover{color:var(--primary);}
.sc-row sup{font-size:9px; vertical-align:super; line-height:0;}
/* Sidrena cijena ne sudjeluje u zbroju — ona je zakonska referenca uz
* istaknutu cijenu (NN 101/2026), ne stavka računa. Zato je sitna i prigušena:
* mora se moći pročitati, ali ne smije se čitati kao druga cijena. */
.sc-row--anchor{font-size:11.5px; color:var(--muted); margin-top:-2px;}
/* Bez crte iznad zbroja: u kartici od tri retka podebljanje već dovoljno
odvaja ono što je izračunato, a crta je bila četvrta vodoravna linija u
kutiji koja ih već ima dvije (obrub) — previše za tri broja. */
.sc-row--total{
margin-top:2px; font-weight:700; color:var(--navy); font-size:15px;
}
/* Napomena uz svoju stavku, punom širinom pod njom. `flex-basis:100%` je lomi
u vlastiti red, pa ne stišće ni ikonu ni naziv. */
.sc-note{
flex:1 1 100%; margin:2px 0 0; padding-top:10px;
border-top:1px solid var(--border);
font-size:12.5px; line-height:1.45; color:#7A4A2B;
}
.sum-row{display:flex; justify-content:space-between; font-size:15px; margin-bottom:8px;}
.sum-row.muted{color:var(--muted);}
.co-summary-card .sum-row:first-of-type{border-top:1px solid var(--border); padding-top:16px;}
.sum-total{display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--border); padding-top:16px; margin-top:12px;}
.sum-total .st-label{font-weight:700; color:var(--navy);}
.sum-total .st-amount{font-family:var(--heading); font-weight:700; font-size:30px; color:var(--navy);}
.co-fine{font-size:12.5px; color:var(--muted); margin:12px 0 0;}
.order-line{display:flex; justify-content:space-between; gap:12px; font-size:15px; padding:8px 0;}
.order-line + .order-line{border-top:1px solid var(--border);}
.order-line .ol-name{display:flex; align-items:center; gap:8px;}
.order-line--total{border-top:2px solid var(--navy); margin-top:8px; padding-top:12px; font-weight:700; font-size:17px; color:var(--navy);}
.order-line .discount{color:var(--ok);}
/* Sažetak narudžbe (nakon kupnje) — jedan boks složen kao slijed koraka.
Zahvala i broj gore, pa koraci, pa što slijedi.
Vlastito `.osum-*` nazivlje, a ne `.order-line` nekoliko redaka iznad: ono
je redak u sažetku košarice i nosi drugi raspored. Dva različita retka pod
istim imenom su kvar koji se vidi tek kad se jedan od njih promijeni. */
.osum{padding:0; overflow:hidden; margin-bottom:16px;}
.osum-head{padding:28px 28px 20px;}
.osum-head h1{margin:0 0 6px;}
.osum-sub{margin:0; color:var(--muted); font-size:15px;}
.osum-sub strong{color:var(--ink);}
/* Koraci. Jedna okomita crta kroz oznake, i ništa drugo.
Vodoravne crte između koraka su maknute namjerno: svaka je od svog koraka
radila zasebnu sekciju, a sekcije se tuku s crtom koja ih treba povezati.
Ovdje je riječ o jednom slijedu, ne o tri retka tablice. */
.osum-steps{list-style:none; margin:0; padding:8px 0 4px; border-top:1px solid var(--border);}
.osum-step{position:relative; display:flex; gap:14px; padding:10px 28px;}
/* Crta se crta u dva dijela jer je prekida razmak među koracima: `::before`
ide od oznake do dna svog koraka, `::after` pokriva razmak iznad oznake
sljedećeg. Jedan element ne može preko granice drugog, a crta koja negdje
nestane i vrati se gora je od crte koje nema. */
.osum-step::before{
content:""; position:absolute; left:41px; top:36px; bottom:0;
width:2px; background:var(--border);
}
.osum-step:last-child::before{content:none;}
.osum-step + .osum-step::after{
content:""; position:absolute; left:41px; top:0; height:10px;
width:2px; background:var(--border);
}
/* Oznaka nosi stanje bojom: zeleno je gotovo, pješčano čeka. Kupac koji plaća
na dolasku iz boje vidi da još nema pristup, prije nego išta pročita. */
.osum-mark{
position:relative; z-index:1; flex:none;
width:26px; height:26px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:14px; font-weight:700; line-height:1;
}
.is-done .osum-mark{background:#E9F3EE; color:var(--ok);}
/* Prazan kružić, ne uskličnik: korak koji čeka nije greška — kupac je uredno
naručio i uredno će platiti na dolasku, a „!" to čita kao da je nešto puklo.
Oblik, a ne znak „○" iz fonta: ovako sjedne u točno istu kutiju kao kvačica
i ne ovisi o tome koliko ga koji font nacrta velikim. */
.is-waiting .osum-mark{background:transparent; border:2px solid var(--primary); opacity:.55;}
.osum-step-body{min-width:0; flex:1;}
.osum-step-title{font-family:var(--body); font-size:15.5px; font-weight:700; margin:0; color:var(--navy);}
.is-waiting .osum-step-title{color:var(--primary);}
.osum-step-text{margin:4px 0 0; font-size:14px; color:var(--muted);}
/* Stavke narudžbe, unutar prvog koraka. */
.osum-lines{list-style:none; margin:10px 0 0; padding:0;}
.osum-line{display:flex; align-items:flex-start; gap:12px; padding:6px 0;}
.osum-line + .osum-line{border-top:1px solid var(--border);}
.osum-body{min-width:0; flex:1;}
.osum-name{font-weight:600; color:var(--ink); font-size:14.5px;}
.osum-meta{font-size:13px; color:var(--muted); margin-top:2px;}
.osum-price{flex:none; margin-left:auto; padding-left:12px; white-space:nowrap; font-size:14.5px;}
/* Dno boksa: što slijedi. Pješčana ploha ga odvaja od koraka iznad, a da ne
postane četvrta kartica na stranici. */
.osum-next{padding:22px 28px; background:var(--cream); border-top:1px solid var(--border);}
.osum-next h2{font-size:19px; margin:0 0 6px; color:var(--navy);}
.osum-next p{margin:0 0 14px; font-size:15px;}
@media (max-width:560px){
.osum-head{padding:24px 20px 16px;}
.osum-step{padding:10px 20px;}
.osum-step::before,
.osum-step + .osum-step::after{left:33px;}
.osum-next{padding:20px;}
}
/* success poruka (nakon kupnje) */
.success-panel{
display:flex; gap:24px; align-items:center;
border:1px solid #CBE2D6; background:#F1F8F4; border-radius:var(--radius);
padding:24px 32px;
}
.success-panel img{width:100px; flex-shrink:0;}
.success-panel h2{font-size:22px; margin-bottom:4px; color:var(--ok);}
.success-panel p{margin:0 0 12px; color:var(--ink);}
@media (max-width:560px){ .success-panel{flex-direction:column; text-align:center;} }
/* ============================================================
LOGIN
============================================================ */
.auth-wrap{display:flex; justify-content:center; padding:64px 24px;}
.auth-card{width:100%; max-width:420px; padding:32px;}
.auth-card h1{font-size:26px; text-align:center;}
.auth-card .auth-sub{text-align:center; color:var(--muted); font-size:15px; margin-bottom:24px;}
/* Uputa za neželjenu poštu. Vlastiti okvir, lijevo poravnat i s akcentnom
crtom: odlomak iznad je obavijest („poslali smo, vrijedi 10 minuta"), a ovo
je jedina stvar na ekranu koju čovjek treba *napraviti*, i jedina koja
sprečava da sljedeći kod opet završi u spamu. Diskretnija paleta od
`.form-error`, jer ovo nije greška nego pomoć. */
.auth-note{
background:var(--cream); border:1px solid var(--border);
border-left:3px solid var(--accent); border-radius:var(--radius-sm);
padding:12px 16px; margin:0 0 24px;
font-size:14.5px; line-height:1.5; color:var(--ink); text-align:left;
}
/* Zašto je čovjek na prijavi (`?razlog=`), iznad naslova — prvo što pročita,
prije nego odluči odustati. Isti okvir kao `.auth-note`. */
.auth-reason{
background:var(--cream); border:1px solid var(--border);
border-left:3px solid var(--accent); border-radius:var(--radius-sm);
padding:12px 16px; margin:0 0 20px;
font-size:14.5px; line-height:1.5; color:var(--ink);
}
.auth-foot{text-align:center; font-size:14px; color:var(--muted); margin-top:16px;}
/* Drugi izlaz ispod prvog, tješnje: „Pošalji novi kod" i „Promijeni e-mail
adresu" su par, pa im razmak među sobom mora biti manji od razmaka do
obrasca iznad — inače izgledaju kao dvije nepovezane stvari. */
.auth-foot--alt{margin-top:8px;}
/* ============================================================
O NAMA / KONTAKT
============================================================ */
/* ---------- O NAMA: vlastiti rječnik (`ab-*`) ----------
Jedina stranica na tamnoj plohi i jedina koja ne posuđuje raspored od
drugih. Uz ostatak je veže paleta, tipografija i razmaci; razlikuje je
jedan motiv - **velika brojka**. 15 u heroju, 01-04 na kutijama, godine na
crti, 421 na adresi. Zato se sekcije čitaju kao jedna stranica. */
/* Hero: rođendanska snimka, pa naslov ispod nje.
Naslov je ispod okvira, a ne preko njega: snimka završava na velikoj
petnaestici u sredini kadra, pa bi tekst preko pao točno na nju. Ovako je
i snimka cijela i naslov čitljiv bez ijednog zastora. */
.ab-hero{background:var(--navy); color:#fff; padding:20px 0 56px;}
.ab-hero .breadcrumb,
.ab-hero .breadcrumb a{color:rgba(255,255,255,.55);}
.ab-hero .breadcrumb a:hover{color:#fff;}
.ab-hero-stage{
display:flex; flex-direction:column; align-items:center; gap:28px;
padding:32px 0 8px;
}
.ab-hero-video{
display:block; width:min(560px,86vw); aspect-ratio:16/9;
object-fit:cover; border-radius:20px; background:var(--navy-deep);
}
.ab-hero-title{
margin:0; max-width:18ch; text-align:center; color:#fff;
font-size:clamp(28px,4.4vw,52px); line-height:1.08; letter-spacing:-.02em;
}
.ab-hero-lead{
margin:20px auto 0; max-width:46ch; text-align:center;
font-size:17px; color:rgba(255,255,255,.72);
}
@media (max-width:700px){
.ab-hero-stage{gap:22px;}
.ab-hero-video{border-radius:16px;}
.ab-hero-lead{font-size:15.5px;}
}
/* Četiri tvrdnje. Brojevi umjesto ikona - za ovakve rečenice nema ikone koja
išta znači, a četiri nasumična simbola su ukras koji glumi informaciju. */
.ab-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px;}
@media (max-width:980px){ .ab-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .ab-grid{grid-template-columns:1fr;} }
.ab-box{
padding:28px 24px; border:1px solid var(--border); border-radius:var(--radius);
background:var(--paper);
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ab-box-num{
display:block; font-family:var(--heading); font-weight:700; font-size:34px;
line-height:1; color:var(--accent-soft); margin-bottom:14px;
transition:color .18s ease, transform .18s ease;
}
/* Na prijelaz mišem kartica se podigne, a brojka se oboji i krene s njom.
Brojka se pomiče manje nego kartica: kad se oboje miče jednako, pokret se
ne vidi, nego izgleda kao da je slika samo poskočila.
`@media (hover:hover)`: na dodir nema prijelaza mišem, a bez ograde prvi
dodir ostavi karticu zaglavljenu u hover stanju do sljedećeg dodira
negdje drugdje. */
@media (hover:hover){
.ab-box:hover{
transform:translateY(-4px);
border-color:var(--border-strong);
box-shadow:var(--shadow-hover);
}
.ab-box:hover .ab-box-num{color:var(--primary); transform:translateY(-2px);}
}
@media (prefers-reduced-motion:reduce){
.ab-box,.ab-box-num{transition:none;}
.ab-box:hover{transform:none;}
.ab-box:hover .ab-box-num{transform:none;}
}
.ab-box h3{margin:0 0 8px; font-size:17.5px;}
.ab-box p{margin:0; font-size:15px; color:var(--muted);}
/* Osnivači na tamnoj plohi, kao i hero. Ovo je jedino mjesto na stranici
gdje netko govori u prvom licu, pa ne smije izgledati kao još jedna
svijetla sekcija između ostalih.
Tamna ploha stoji dovoljno daleko od trake s brojkama, koja je također
tamna - između njih su vremenska crta i adresa, obje svijetle. */
.ab-founders-band{
background:var(--navy); color:#fff; padding-top:72px; padding-bottom:72px;
text-align:center;
}
.ab-founders-band .section-title{color:#fff; margin:0 0 8px;}
/* Crtica ispod naslova je blok fiksne širine, pa je `text-align:center` na
sekciji ne pomiče - centrira tekst, ne blok. Bez ovoga visi uz lijevi rub
dok naslov stoji u sredini. */
.ab-founders-band .section-title::after{margin-inline:auto;}
.ab-founders-eyebrow{
margin:0 0 10px; font-size:12.5px; font-weight:600; letter-spacing:.14em;
text-transform:uppercase; color:var(--accent-soft);
}
/* Obojica u jednoj kutiji, ne kao dva odvojena stupca na plohi: oni su par
i jedan su odgovor na pitanje tko stoji iza Štreberaja. Crta među njima
kaže da su dvojica, kutija da su zajedno.
Ploha kutije je bijela na 4.5% preko tamne, a ne druga boja iz palete:
svaka prava boja ovdje bi uvela treći ton u sekciju koja živi od toga da
ih ima samo dva. */
/* Kutija drži osnivače i ekipu zajedno: oni su jedan odgovor na pitanje tko
stoji iza Štreberaja, pa su dotad bili razdvojeni na dvije sekcije bez
razloga. Šira je od uobičajenog bloka jer u njoj stoji i mreža kartica. */
.ab-people{
max-width:1040px; margin:44px auto 0; padding:44px 36px;
background:rgba(255,255,255,.045);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--radius);
}
.ab-founders{display:grid; grid-template-columns:1fr 1fr;}
/* Crta odvaja osnivače od ekipe unutar iste kutije: dvoje ljudi koji su
počeli i oni koji danas drže nastavu nisu isto, ali jesu jedna priča. */
.ab-people-team{
margin-top:44px; padding-top:40px;
border-top:1px solid rgba(255,255,255,.12);
}
.ab-people-head{margin:0 0 4px; font-size:18px; color:#fff; text-align:center;}
.ab-people-sub{
margin:0 0 24px; text-align:center; font-size:14.5px; color:rgba(255,255,255,.6);
}
.ab-founder{text-align:center; padding:0 28px;}
.ab-founder + .ab-founder{border-left:1px solid rgba(255,255,255,.12);}
/* Uspravni portret, ne okrugli avatar: s istim oblikom i istom veličinom
kao kod edukatora osnivači izgledaju kao još dvojica iz ekipe, a ova ih
sekcija treba izdvojiti. */
.ab-founder-photo{
width:240px; aspect-ratio:4/5; height:auto; object-fit:cover;
display:block; margin:0 auto 20px;
border-radius:var(--radius);
background:var(--navy-deep);
}
.ab-founder h3{margin:0 0 2px; font-size:19px; color:#fff;}
.ab-founder-role{margin:0 0 14px; font-size:13.5px; color:rgba(255,255,255,.6);}
/* Podebljano je ovdje i svjetlije: ostatak izjave je bijela na 86%, pa
ključna riječ dobiva i punu bijelu. Sama debljina na tamnoj plohi radi
manje nego na svijetloj - tanki potezi se ondje stapaju s podlogom. */
.ab-founder-quote strong{color:#fff; font-weight:600;}
.ab-founder-quote{
margin:0; font-size:16px; color:rgba(255,255,255,.86);
/* Navodnik umjesto crte sa strane: rečenica je centrirana pod slikom, a
crta uz lijevi rub centriranog teksta izgleda kao greška u poravnanju. */
}
.ab-founder-quote::before{
content:"\201C"; display:block; font-family:var(--heading); font-size:34px;
line-height:.5; color:var(--primary); margin-bottom:12px;
}
@media (max-width:760px){
.ab-founders-band{padding-top:52px; padding-bottom:52px;}
.ab-people{padding:32px 18px;}
.ab-people-team{margin-top:32px; padding-top:28px;}
/* Dva stupca i na mobitelu: dva portreta jedan ispod drugoga znače da se
drugog osnivača ne vidi bez skrolanja, pa se par više ne čita kao par.
Uži stupci su ovdje manje zlo od izgubljene usporedbe. */
.ab-founders{margin-top:0;}
.ab-founder{padding:0 14px;}
.ab-founder-photo{width:100%; max-width:200px; margin-bottom:14px;}
.ab-founder h3{font-size:16.5px;}
.ab-founder-quote{font-size:14.5px;}
}
@media (max-width:480px){
/* Jedan ispod drugoga: crta koja ih je dijelila sa strane seli iznad, pa
kutija i dalje drži dvoje ljudi, a ne jedno pa drugo. */
.ab-founders{grid-template-columns:1fr;}
.ab-founder{padding:0;}
.ab-founder + .ab-founder{
border-left:0; border-top:1px solid rgba(255,255,255,.12);
margin-top:32px; padding-top:32px;
}
.ab-founder-photo{max-width:210px;}
.ab-founder h3{font-size:19px;}
.ab-founder-quote{font-size:15.5px;}
}
/* Adresa. „421" u istom ruhu kao „15" u heroju i „01-04" na kutijama. */
.ab-place{display:grid; grid-template-columns:1fr 1.1fr; gap:48px; align-items:center;}
@media (max-width:860px){ .ab-place{grid-template-columns:1fr; gap:32px;} }
.ab-place-num{
display:block; font-family:var(--heading); font-weight:700; line-height:.9;
font-size:clamp(56px,7vw,88px); color:var(--accent); margin-bottom:4px;
}
.ab-place-title{margin-top:0;}
.ab-place-addr{color:var(--muted); font-size:15px;}
/* Snimka šetnje do vrata, umjesto fotografija prostora. Uspravna je jer je
snimljena mobitelom u hodu, pa se ne razvlači: 9:16 preko pola stupca bio
bi stup visok tisuću piksela. */
.ab-walk{display:flex; justify-content:center;}
.ab-walk-video{
display:block; width:100%; height:auto; max-width:400px; aspect-ratio:3/4;
object-fit:cover; border-radius:var(--radius);
border:1px solid var(--border); background:var(--cream);
}
@media (max-width:860px){ .ab-walk-video{max-width:320px;} }
/* Kartica edukatora koja se okreće. Bez skripte: `