:root {
/* Bijela je od 01.09. cista bijela, po zahtjevu: pocetna i ova stranica
moraju biti isti stil, a pocetna je bijela. Toplo off-white (#F2F2EC) je
otislo, pa su i sive neutralne, ne tople: na cistoj bijeloj se toplo sivo
vidi kao zuckasto. */
--ground: #FFFFFF;
--card: #F7F7F7;
--siva: #F1F1F1; /* kutija u kojoj stoji animacija */
--ink: #1B1A17;
--tiho: #6E6E73;
--plava: #B9D8ED;
--roza: #F6C8E7;
--cigla: #982B25;
--linija: rgba(0, 0, 0, 0.08);
/* Sistemski font. Na Macu i iPhoneu je to SF Pro, na Windowsu Segoe UI, na
Androidu Roboto. SF Pro se NE smije ugraditi u stranicu, pa se uzima onaj
koji je na masini. Isto kao na pocetnoj. */
--sistem: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ground);
color: var(--ink);
font: 400 17px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Zrna preko podloge NEMA od 01.09. Trazena je cista bijela, a zrno je po
definiciji suprotno od toga. Ako se ikad vraca, vraca se SAMO na sivu kutiju,
ne na cijelu stranicu. */
.omot { position: relative; z-index: 1; }
.sredina { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 28px; }
/* Naslovi idu u sistemski font, bold, kao na pocetnoj. `.marka` ostaje Archivo
Black jer je to logotip, ne naslov, i mora izgledati isto na svakoj masini. */
h1, h2, h3, .cijena {
font-family: var(--sistem);
font-weight: 700;
letter-spacing: -0.025em;
}
.marka {
font-family: "Archivo Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
letter-spacing: -0.04em;
}
/* ---------- zaglavlje ---------- */
.vrh {
display: flex;
align-items: center;
justify-content: space-between;
/* NAMJERNO longhand, ne `padding: 22px 0`. `header` nosi i klasu `sredina`,
koja daje `padding: 0 28px`; kratki zapis ovdje je gasio i te 28 px, pa je
zaglavlje stajalo 28 px lijevo od ostatka stranice, a na telefonu je
ispadalo van ekrana. Vidjelo se po tome sto je linija ispod zaglavlja bila
SIRA od linija izmedju odjeljaka. */
padding-top: 22px;
padding-bottom: 22px;
border-bottom: 1px solid var(--linija);
}
.marka { font-size: 19px; letter-spacing: -0.04em; color: var(--ink); text-decoration: none; }
.vrh nav { display: flex; gap: 22px; font-size: 14px; }
.vrh nav a { color: var(--tiho); text-decoration: none; }
.vrh nav a:hover { color: var(--ink); }
/* Cetvrta stavka („Pocetna", dodana 08.09.) ne staje na mali telefon uz marku.
IZMJERENO: nav je sirok 226 px, marka 76, bocni padding 2x28. Uz najmanji
pristojan razmak od 16 px red trazi 374 px, pa se ispod toga nav i marka
preklapaju: na 360 px nav pocinje na 106 a marka staje na 104, na 320 px oba
pocinju na 28. Zato se ispod 400 px zaglavlje lomi u dva reda. */
@media (max-width: 400px) {
.vrh { flex-wrap: wrap; }
.vrh nav {
width: 100%;
gap: 18px;
padding-top: 12px;
}
}
/* ---------- hero ---------- */
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
padding: 68px 0 76px;
}
/* `min-width: 0` MORA stajati. Grid stavka po pravilu ima `min-width: auto`, pa
se sirila da primi `nowrap` red pod Flickom: na telefonu je kolona narasla na
441px u ekranu od 390 i stranica je dobila vodoravni skrol, a mjerenje u
`uklopiUvod` je gledalo tu naraslu sirinu i mislilo da red staje. Izmjereno:
scrollWidth 469 na klijentu 390. */
.hero > * { min-width: 0; }
/* Kutija u kojoj stoji animacija: siva ploha, bijeli rub oko nje.
*
* Bijeli rub se na bijeloj stranici sam po sebi NE VIDI, pa ga izvlaci tanka
* linija izvan njega (`0 0 0 1px` u box-shadow). Bez te linije bijelih 6 px se
* stope sa stranicom i rub postoji samo u kodu. Ista greska kao sa strokom na
* komadu puzzle. */
.slika {
position: relative;
border-radius: 26px;
background: var(--siva);
border: 6px solid #FFFFFF;
box-shadow: 0 2px 10px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.06);
padding: 46px 34px;
overflow: hidden;
}
.slika img { position: relative; display: block; width: 100%; height: auto; }
.nadnaslov {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--tiho);
}
h1 { font-size: 78px; line-height: 0.92; margin: 12px 0 16px; }
/* Prelom je RUCNI, u HTML-u (`
`), jer je trazeno tacno dva reda i tacno na
tom mjestu. Zato ovdje nema `max-width`: da ga ima, tekst bi se lomio i sam i
dobila bi se tri reda.
18px, a bilo je 21px. Kolona teksta u hero sekciji je 474px, a prvi red na
21px trazi 514px (izmjereno, ne procijenjeno), pa se lomio i ispadala su tri
reda. Na 18px trazi 441px i staje do oko 1010px sirine ekrana. Ispod toga se
prelomi i tu nema pomoci: recenica je duza od kolone. */
.uvod { font-size: 18px; line-height: 1.45; margin: 0 0 10px; }
/* `nowrap` je ono što drži DVA reda: red se ne smije sam prelomiti, a da staje
u kolonu brine JS koji mu mjeri širinu i smanji slovo (vidi uklopiUvod). */
.uvod-red { white-space: nowrap; }
.sitno { font-size: 14px; color: var(--tiho); margin: 0 0 26px; }
.cijena { font-size: 32px; margin: 0 0 16px; }
/* Stara cijena prekrizena, ide ispred nove. Sitnija i siva, da se cita kao
„bilo je", a nova ostaje ono sto oko prvo uhvati. */
.cijena-stara {
font-size: 20px;
font-weight: 400;
color: #A1A1A6;
margin-right: 8px;
text-decoration-thickness: 1.5px;
vertical-align: 2px;
}
/* Dugmad: pilula, crna za glavnu radnju, svijetlo siva za drugu. Mjere i
* ponasanje su iz referencije koju je korisnik dao. Pokret je sitan namjerno:
* 0.98 na pritisak i mekana sjenka na prelaz mise, nista vise. */
.dugmad { display: flex; flex-wrap: wrap; gap: 10px; }
.dugme {
display: inline-flex;
align-items: center;
justify-content: center;
height: 52px;
padding: 0 28px;
background: #000000;
color: #FFFFFF;
border-radius: 999px;
font-family: var(--sistem);
font-weight: 700;
font-size: 16px;
letter-spacing: -0.01em;
text-decoration: none;
transition: background .25s, box-shadow .25s, transform .15s;
}
.dugme:hover { background: #1A1A1A; box-shadow: 0 5px 14px rgba(0,0,0,.18); }
.dugme:active { transform: scale(0.98); }
.dugme:focus-visible { outline: 2px solid var(--cigla); outline-offset: 3px; }
.dugme.tiho { background: #EDEDED; color: #1B1A17; }
.dugme.tiho:hover { background: #E3E3E3; box-shadow: 0 2px 9px rgba(0,0,0,.08); }
.podugme { font-size: 13px; color: var(--tiho); margin-top: 14px; }
/* Odbrojavanje akcije ispod cijene, po uzoru koji je korisnik dao 09.10.:
krupne TANKE cifre bez ikakvih kutija, ispod sitna oznaka velikim slovima.
Plocice, tacka koja pulsira i roze podloga su odbijene kao „AI slop", pa se
ovdje ne dodaje nista sto nije cifra ili oznaka. Boja je cigla iz brenda.
Debljina 200 je SF Pro / Helvetica Neue Thin; `tabular-nums` drzi da red ne
poskakuje svake sekunde. */
.akcija { margin: 0 0 22px; color: var(--cigla); }
.akcija-natpis {
margin: 0 0 6px;
font: 500 13px/1 var(--sistem);
letter-spacing: 0.02em;
color: var(--tiho);
}
.akcija-satovi { display: flex; gap: 22px; }
.akcija-satovi > div { display: flex; flex-direction: column; align-items: center; }
.akcija-broj {
font: 200 46px/1 var(--sistem);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.akcija-ime {
margin-top: 6px;
font: 500 10.5px/1 var(--sistem);
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(152, 43, 37, .65);
}
/* ---------- odjeljci ---------- */
section { padding: 62px 0; border-top: 1px solid var(--linija); }
h2 { font-size: 30px; margin: 0 0 8px; }
.uvodnik { color: var(--tiho); margin: 0 0 30px; max-width: 56ch; }
/* Prelom je RUCNI (`
` u HTML-u), pa `max-width` mora otici: sa 56ch bi se
prvi red lomio i sam i dobila bi se tri. Na uzem ekranu prvi red i dalje
smije da se prelomi, tamo dva reda fizicki ne staju. */
.uvodnik.dvared { max-width: none; }
/* DVIJE NELOMLJIVE POLOVINE. Bez ovoga se recenica lomila gdje stigne, pa je
drugi red ispadao kratak („sredjivanje projekta,") a treci jos kraci — tri
neuredna reda umjesto dva. Sa `nowrap` prelom MORA pasti izmedju polovina.
Velicina slova se mjeri i smanjuje u flick.html (uklopiRed), jer sirina zavisi
od fonta koji je na masini.
Na uskom ekranu ni najmanje slovo ne moze primiti 98 znakova, pa se `nowrap`
iskljucuje i recenica tece normalno. Prisilan prelom nasred recenice bi tamo
bio gori od obicnog prelamanja. */
.uvodnik-red { white-space: nowrap; }
@media (max-width: 620px) {
.uvodnik-red { white-space: normal; }
}
.spisak { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 34px; }
/* Linija je 1px i ista siva kao svaka druga na stranici. Bila je 2px CRNA i
bila je jedina debela tamna linija tu: cijela stranica je inace 1px na 8%
crne, pa je odskakala. Jedna debljina i jedna boja svuda je ono sto ovakve
stranice cini mirnim. */
.stavka { padding-top: 16px; border-top: 1px solid var(--linija); }
.stavka h3 { font-size: 17px; margin: 0 0 5px; letter-spacing: -0.02em; }
.stavka p { margin: 0; font-size: 15px; color: var(--tiho); }
/* ---------- kutije ---------- */
.kutije { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.kutija {
background: var(--card);
border: 1px solid var(--linija);
border-radius: 18px;
padding: 22px;
}
.kutija h3 { font-size: 16px; margin: 0 0 6px; letter-spacing: -0.02em; }
.kutija p { margin: 0; font-size: 15px; color: var(--tiho); }
/* Plocice su korisnikova slika, izvadjene alatom `tools/izrezi-plocice.js`.
Zaobljeni ugao je U SLICI (providan), pa se `border-radius` ovdje ne postavlja:
da se postavi, sjekao bi ugao drugim radijusom preko postojeceg. */
.znak {
display: block;
width: 44px; height: 44px;
margin-bottom: 14px;
}
/* ---------- pitanja ----------
Svako pitanje je ``, dakle otvaranje radi PREGLEDNIK. Nema nasega
JS-a: klik, tastatura, Ctrl+F kroz zatvoren tekst i citaci ekrana rade sami i
isto na svakoj masini. Sivo i rub su isti kao na karticama gore.
Visina SE animira, i to bez ijedne linije JS-a: `::details-content` je kutija
koju preglednik pravi oko sadrzaja poslije ``, a `interpolate-size:
allow-keywords` dozvoljava prelaz na `auto`, cega u CSS-u godinama nije bilo.
`allow-discrete` je tu da `content-visibility` ceka da prelaz zavrsi, inace
sadrzaj iskoci u prvom kadru i animacija se ne vidi.
Ovo je nova stvar u pregledacima. Gdje je nema, `::details-content` se prosto
ne poklapa i pitanje se otvara odmah, bez animacije: nista se ne lomi. */
.pitanje { interpolate-size: allow-keywords; }
.pitanje::details-content {
block-size: 0;
overflow: hidden;
transition: block-size .34s ease, content-visibility .34s allow-discrete;
}
.pitanje[open]::details-content { block-size: auto; }
.pitanje {
background: var(--card);
border: 1px solid var(--linija);
border-radius: 16px;
margin-bottom: 10px;
overflow: hidden;
}
.pitanje summary {
/* `list-style: none` je za Firefox, `::-webkit-details-marker` za Safari.
Bez oba ostane preglednikov trokutic pored nase strelice. */
list-style: none;
cursor: pointer;
padding: 17px 20px;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.02em;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
transition: background .2s;
}
.pitanje summary::-webkit-details-marker { display: none; }
.pitanje summary:hover { background: #F1F1F1; }
.pitanje summary:focus-visible { outline: 2px solid var(--cigla); outline-offset: -2px; }
/* Strelica je crtana u CSS-u, ne slovo: znak `›` u sistemskom fontu nije isti
na svakoj masini, a ova dva piksela su svuda ista. */
.pitanje summary::after {
content: "";
flex: none;
width: 9px; height: 9px;
border-right: 2px solid var(--tiho);
border-bottom: 2px solid var(--tiho);
transform: rotate(45deg) translateY(-2px);
transition: transform .25s;
}
.pitanje[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.odgovor { padding: 0 20px 18px; }
/* BEZ `max-width`. Odgovor ide punom sirinom kutije, po zahtjevu: manje redova
i manje skrola. Duzi red se teze cita od 68 znakova koliko je bilo, ali kutija
je siva i odvojena, pa oko ne gubi mjesto. */
.pitanje p { margin: 0; font-size: 15px; color: var(--tiho); }
/* Dva odgovora u istom pitanju su se spajala u jedan blok teksta, jer
`.pitanje p` gasi marginu. */
.pitanje p + p { margin-top: 10px; }
/* ---------- kutija sa paketom (nadogradnja.html) ----------
Ista siva kutija i isti rub kao kartice i obrazac. Dugme i opis stoje u istom
redu dok ima mjesta; na uskom ekranu dugme pada ispod i ide punom sirinom, jer
je ono jedini razlog zbog kojeg se ova stranica otvara. */
.paket {
background: var(--card);
border: 1px solid var(--linija);
border-radius: 18px;
padding: 24px 28px;
margin: 26px 0 10px;
max-width: 720px;
}
.paket-glava {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
/* `.tekst h2` nosi veliku marginu odozgo, koja bi ovdje odgurala naslov od ruba
kutije. Ovo je naslov paketa, ne odjeljka. */
.paket h2 { font-size: 21px; margin: 0 0 4px; }
.paket-glava p { margin: 0; font-size: 14px; color: var(--tiho); }
.paket-mir {
margin: 20px 0 0;
padding-top: 18px;
border-top: 1px solid var(--linija);
font-size: 15px;
color: var(--tiho);
}
@media (max-width: 560px) {
.paket-glava .dugme { width: 100%; }
}
/* ---------- obrazac za kontakt ----------
Ista siva kutija i isti rub kao kartice gore, da se ne vidi da je ovo druga
stranica. Polja su bijela jer se u sivu kutiju kuca, pa mora biti jasno gdje
pocinje polje. */
.obrazac {
background: var(--card);
border: 1px solid var(--linija);
border-radius: 18px;
padding: 26px 28px;
margin: 26px 0 18px;
display: flex;
flex-direction: column;
gap: 18px;
max-width: 720px;
}
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.obrazac label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.obrazac label > span { font-weight: 700; letter-spacing: -0.01em; }
.obrazac input, .obrazac textarea {
font: inherit;
font-size: 16px; /* ispod 16px Safari na iPhoneu zumira stranicu pri kucanju */
color: var(--ink);
background: #FFFFFF;
border: 1px solid var(--linija);
border-radius: 12px;
padding: 12px 14px;
width: 100%;
transition: border-color .2s, box-shadow .2s;
}
.obrazac textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.obrazac input:focus, .obrazac textarea:focus {
outline: none;
border-color: #BDBDBD;
box-shadow: 0 0 0 3px rgba(0,0,0,.05);
}
.obrazac small { font-size: 13px; color: var(--tiho); }
/* Zamka za robote: sklonjena sa ekrana, ali NIJE `display:none`, jer neki roboti
preskacu polja koja su tako sakrivena. */
.zamka {
position: absolute;
left: -9999px;
width: 1px; height: 1px;
overflow: hidden;
}
.dno { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dugme[disabled] { opacity: .55; cursor: default; }
.stanje { margin: 0; font-size: 14px; color: var(--tiho); }
.stanje.dobro { color: #1B7A3D; }
.stanje.lose { color: var(--cigla); }
/* Zrak izmedju obrasca i podnozja. `.podugme` se koristi i na stranici
proizvoda ispod dugmeta Kupi, gdje ovaj razmak ne treba, pa ide svoja klasa. */
.ispod-obrasca { margin-bottom: 46px; }
@media (max-width: 600px) {
.par { grid-template-columns: 1fr; }
.obrazac { padding: 20px; }
}
/* ---------- podnožje ---------- */
footer {
border-top: 1px solid var(--linija);
padding-top: 34px;
padding-bottom: 60px;
font-size: 14px;
color: var(--tiho);
display: flex;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
/* Linkovi u boji teksta, ne ciglasti. Na cistoj bijeloj stranici sa crnom
dugmadi crvena linija je jedina sarena stvar i vuce oko na sebe bez razloga.
Cigla ostaje kao boja fokusa na dugmadi. */
/* `footer` je ELEMENT (0,0,1), a `.sredina` je KLASA (0,1,0) i daje
`padding: 0 28px`, pa je gasila gornjih 34 i donjih 60 px podnozja: podnozje
je bilo visoko 23 px i lijepilo se za tekst iznad. Izmjereno, computed padding
je bio 0px/0px. Longhand tu ne pomaze, jer i longhand na elementu gubi od
klase; mora selektor koji je JACI, dakle element PLUS klasa (0,1,1).
Ista greska kao kod `.vrh` gore, samo tamo je klasa protiv klase pa je
odlucivao red u fajlu. */
footer.sredina { padding-top: 34px; padding-bottom: 60px; }
a { color: var(--ink); }
@media (max-width: 880px) {
.hero { grid-template-columns: 1fr; gap: 34px; padding: 44px 0 52px; }
.pregled-naslov { font-size: 32px; }
.pregled-uvod { font-size: 16px; margin-bottom: 24px; }
.pregled-uvod br { display: none; }
.pregled-zvuk { height: 46px; padding: 0 20px 0 16px; font-size: 15px; }
h1 { font-size: 58px; }
.spisak, .kutije { grid-template-columns: 1fr; }
.uvod { max-width: none; }
}
/* Na telefonu marka i tri linka u meniju NE STAJU u jedan red: izmjereno na
390 px, trazili su 396 i zaglavlje je izlazilo van ekrana, a `byselbir` i
`Kontakt` su bili odsjeceni. Nije se vidjelo kao skrol nego kao odsjecen
tekst, pa se ni ne primijeti dok se ne pogleda na telefonu. */
@media (max-width: 560px) {
.vrh { flex-wrap: wrap; row-gap: 12px; }
.vrh nav { gap: 16px; font-size: 13px; }
}
/* ---------- pravne stranice ---------- */
/* PADDING U DUZINI, ne skracenicom. `padding: 46px 0 20px` je gasio bocnih 28px
koje daje `.sredina`, pa je na pravila.html i privatnost.html tekst na telefonu
stajao pribijen uz sam rub ekrana (izmjereno 06.09.: h1 na x=0 pri 390px).
`.tekst` i `.sredina` su obje jednoklasne, a `.tekst` je nize u fajlu, pa je
skracenica pobjedjivala. Isti previd kao ranije sa `.vrh` i podnozjem. */
.tekst { max-width: 74ch; padding-top: 46px; padding-bottom: 20px; }
.tekst h1 { font-size: 42px; margin: 0 0 6px; }
.tekst .datum { color: var(--tiho); font-size: 14px; margin: 0 0 34px; }
.tekst h2 { font-size: 22px; margin: 34px 0 10px; }
.tekst h3 { font-size: 17px; margin: 24px 0 8px; letter-spacing: -0.02em; }
.tekst p, .tekst li { font-size: 16px; color: #3A3A3C; }
/* `ol` je do 06.09. bilo izostavljeno, pa su se brojevi koraka na telefonu
gubili van ruba: marker stoji IZVAN sadrzaja, a bez uvlacenja nema gdje da
stane. Ista mjera kao za `ul`, da koraci i tacke izgledaju kao jedna stranica. */
.tekst ul, .tekst ol { padding-left: 20px; }
.tekst li { margin-bottom: 7px; }
.nazad { display: inline-block; margin-top: 30px; font-size: 15px; }
.odvoji { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--linija); }
/* ---------- animacija u hero sekciji ----------
Ista stvar kao demo-mreza.html, ali bez svoje pozadine, pa sjedi
direktno na kartici. Klase nose prefiks `fa-` da se pri budućem
redizajnu ne sudare sa ostatkom stranice. */
/* ---------- demo: mreza raste ----------
Isti pristup kao demo.html: sve zavisi od vremena `t`, pa se `?t=3.2` nacrta
kao tacan kadar i odatle se vade slike za gif.
Pokazuje jednu stvar: panel nije zadan, nego se slaze. Prazna mjesta su
iscrtkana namjerno -- ona kazu "ovdje ide tvoje", a to se recenicom ne
objasni tako brzo. */
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Sirina scene mora primiti panel u NAJSIROJEM trenutku. Od 02.09. panel ima
PET alatki plus cetiri efekta, dakle devet plocica:
9 x 52 + 8 x 7 + 2 x 14 = 552px, pa 560px jos staje sa 8px rezerve.
Kad se doda deseta, ovaj broj se MORA dici, inace se panel odsijeca taman kad
se prosiri. */
.fa-scena { position: relative; width: 560px; user-select: none; text-align: center; }
.fa-panel {
/* Sirina NIJE zadana nego se racuna iz broja ikonica, pa panel raste s njima.
Mijenja se glatko, i to je ono sto se vidi kao pokret. */
display: inline-block;
padding: 14px;
background: #1e1e1e;
border-radius: 12px;
box-shadow: 0 12px 34px rgba(20,18,14,.20), 0 2px 6px rgba(20,18,14,.12);
overflow: hidden;
}
.fa-tab { color: #6a6a6a; font-size: 11px; text-align: left; padding: 0 0 9px 3px; }
.fa-mreza {
display: flex;
gap: 7px;
}
.fa-mjesto {
position: relative;
width: 52px; height: 52px;
border-radius: 12px;
background: #2b2b2b;
display: flex; align-items: center; justify-content: center;
flex: none;
}
.fa-mjesto img { width: 27px; height: 27px; opacity: .82; }
/* Tackica boje stoji samo tamo gdje se boja stvarno bira: Adjustment Layer i
Color Matte. Mjere su iz `.corner` u uxp/index.html, uvecane kao i plocica.
Ivica se NE mnozi faktorom, inace na uvecanoj slici postane crni obruc. */
.fa-tacka {
position: absolute; right: 7px; top: 7px;
width: 11px; height: 11px;
border: 1px solid #151515;
border-radius: 50%;
}
.fa-natpis { color: #6B675F; font-size: 13px; margin-top: 20px; min-height: 20px; }
.fa-broj { color: #1B1A17; font-weight: 700; }
.fa-okvir { display: flex; align-items: center; justify-content: center; }
.fa-scena { transform-origin: center center; }
/* ---------- animacija "Kako funkcionise Flick" ----------
Prenesena iz izvor/demo.html. Klase nose prefiks `fd-` jer su se imena
(`traka`, `panel`, `natpis`, `tab`) sudarala sa ostatkom stranice.
`.fd-okvir` ima ISTI izgled kao `.slika`: siva ploha, bijeli rub 6 px, tanka
linija izvan njega da se bijeli rub uopste vidi na bijeloj stranici. NAMJERNO
se ne koristi klasa `.slika`: ona nosi i `.slika img { width: 100% }`, a
ovdje unutra stoji dvadeset sitnih ikonica koje bi se time razvukle na punu
sirinu okvira. */
.fd-okvir {
display: flex;
align-items: center;
justify-content: center;
padding: 46px 24px;
background: var(--siva);
border: 6px solid #FFFFFF;
border-radius: 26px;
box-shadow: 0 2px 10px rgba(0,0,0,.05), 0 0 0 1px rgba(0,0,0,.06);
overflow: hidden;
}
/* ---------- demo: klik na dugme, sloj se stvori ----------
ZIVA ANIMACIJA, NE SNIMAK. Snimak istog ovoga bio bi nekoliko megabajta i
zrnast; ovo je petnaestak kilobajta i ostro na svakom ekranu. Mijenja se
izmjenom jednog broja umjesto ponovnim snimanjem.
SVE ZAVISI OD VREMENA `t`. Nista se ne oslanja na CSS prelaze ni na to kad je
koja klasa dodata, pa se svaki kadar moze nacrtati tacno: `?t=2.4` nacrta
trenutak 2.4s. Odatle se vade kadrovi za gif i mp4.
Ovo je MOCK ponasanja, ne snimak panela: ikonice i boje su prave (uxp/icons,
LABELS u main.js), raspored i tajming su nacrtani. */
.fd-scena { position: relative; width: 640px; user-select: none; }
.fd-panel {
width: 246px; margin: 0 auto 18px; padding: 12px;
background: #1e1e1e; border-radius: 10px;
box-shadow: 0 10px 30px rgba(20,18,14,.20), 0 2px 6px rgba(20,18,14,.12);
}
.fd-tab { color: #6a6a6a; font-size: 10px; padding: 0 0 8px 2px; }
.fd-red { display: flex; gap: 6px; }
.fd-plocica {
position: relative; width: 40px; height: 40px;
background: #2b2b2b; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
}
.fd-plocica img { width: 22px; height: 22px; opacity: .82; }
.fd-tacka { position: absolute; right: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; }
.fd-traka { background: #232323; border-radius: 10px; overflow: hidden;
box-shadow: 0 10px 30px rgba(20,18,14,.16); }
.fd-staza { position: relative; height: 42px; display: flex; align-items: center;
border-bottom: 1px solid rgba(255,255,255,.05); }
.fd-staza:last-child { border-bottom: 0; }
.fd-oznaka { width: 34px; height: 100%; display: flex; align-items: center;
justify-content: center; color: rgba(255,255,255,.30); font-size: 9px;
border-right: 1px solid rgba(255,255,255,.06); flex: none; }
.fd-polje { position: relative; flex: 1; height: 100%; }
.fd-klip {
position: absolute; top: 5px; bottom: 5px; border-radius: 5px;
display: flex; align-items: center; padding-left: 9px;
color: #fff; font-size: 11px; white-space: nowrap; overflow: hidden;
}
.fd-klip .fd-fx { opacity: .75; font-style: italic; margin-right: 5px; }
.fd-nalog { position: absolute; left: 9px; display: flex; align-items: center; }
/* `left` i `top` MORAJU stajati. Bez njih `position:absolute` ostavlja element
na mjestu gdje bi bio u toku dokumenta (ovdje: ispod trake), pa se `translate`
racuna od tog mjesta i kursor odleti van scene. */
.fd-kursor {
position: absolute; left: 0; top: 0;
width: 20px; height: 20px; pointer-events: none; z-index: 10;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
.fd-natpis { text-align: center; color: #6B675F; font-size: 13px; margin-top: 16px;
min-height: 20px; }
/* Scena je 640 px siroka i to je najuza mjera na kojoj se traka i panel ne
lome. Na uzem ekranu se cijela SMANJUJE, a ne prelama: pokret zavisi od
polozaja u pikselima, pa bi prelamanje pomjerilo kursor sa plocica. */
/* `transform: scale` mijenja samo IZGLED, ne visinu u toku dokumenta: scena i
dalje zauzima svojih 268 px, pa ostaje prazan prostor koliko je smanjena.
Negativna margina vraca tacno tu razliku, (1 - faktor) / 2 * 268. */
@media (max-width: 760px) {
.fd-scena { transform: scale(0.72); transform-origin: center center; margin: -38px 0; }
.fd-okvir { padding: 20px 0; overflow: hidden; }
}
@media (max-width: 520px) {
.fd-scena { transform: scale(0.5); margin: -67px 0; }
}
/* ---------- hvala-k7m2q9.html: video poslije kupovine ----------
Naslov je NAMJERNO dva reda i prelom je rucni (`` po redu), jer je
trazeno tacno dva reda: prvi u --ink, drugi u --tiho. Da se lomi sam,
na svakoj sirini bi ispao drugaciji broj redova.
`.hvala-naslov` NIJE unutar `.tekst`: `.tekst h1` je (0,1,1) i pobijedio bi
ovu jednoklasnu selekciju. Ista zamka kao `.vrh` i podnozje. */
.hvala-vrh { padding-top: 46px; padding-bottom: 6px; text-align: center; }
.hvala-naslov {
font-size: 34px;
line-height: 1.22;
margin: 0 0 26px;
text-wrap: balance;
}
.hvala-naslov span { display: block; }
.hvala-naslov .drugi { color: var(--tiho); font-weight: 400; font-size: 21px; margin-top: 8px; }
/* Okvir drzi visinu PRIJE nego se video ucita, pa se stranica ne trza:
`aspect-ratio` je odnos izrezanog videa, 1280x730. */
.hvala-okvir {
position: relative;
width: 100%;
max-width: 760px;
margin: 0 auto;
aspect-ratio: 1280 / 730;
background: #000;
border: 1px solid var(--linija);
border-radius: 14px;
overflow: hidden;
}
.hvala-okvir video { display: block; width: 100%; height: 100%; }
/* Dugme za zvuk. Pregledaci ne puste zvuk bez klika, pa video krene bez njega,
a ovo je jedini nacin da se zvuk ukljuci u jednom kliku. Stoji gore desno da
ne pada preko lica ni preko kontrola. Gasi se samo (`hidden`) kad zvuk radi. */
.hvala-zvuk {
position: absolute;
top: 12px;
right: 12px;
z-index: 2;
border: 0;
border-radius: 999px;
padding: 9px 15px;
font: 600 14px/1 var(--sistem);
letter-spacing: -0.01em;
color: #FFFFFF;
background: rgba(20, 19, 17, 0.82);
backdrop-filter: blur(6px);
cursor: pointer;
}
.hvala-zvuk:hover { background: rgba(20, 19, 17, 0.95); }
.hvala-zvuk:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.hvala-podvideo {
max-width: 760px;
margin: 14px auto 0;
text-align: center;
font-size: 14px;
color: var(--tiho);
}
@media (max-width: 620px) {
.hvala-vrh { padding-top: 34px; }
.hvala-naslov { font-size: 27px; }
.hvala-naslov .drugi { font-size: 18px; }
.hvala-zvuk { top: 8px; right: 8px; padding: 8px 13px; font-size: 13px; }
}
/* ---------- flick.html: „Kratki pregled Flick plugina" ----------
Stoji NA VRHU stranice, prije hero sekcije (08.10.): video objasnjava sve,
pa ga kupac vidi prvog. Zato nema crte iznad nego ispod, na hero sekciji.
Naslov i podnaslov su CENTRIRANI, a `h2` i `.uvodnik` nisu, pa se ne
preuzimaju te klase nego se pisu svoje. Preuzimanje bi znacilo dvije
jednoklasne selekcije koje se biju po redu u fajlu, a to je greska koja se u
ovom projektu vec dva puta vratila (`.tekst` protiv `.sredina`, `.vrh`
protiv podnozja). Font i boja su isti kao svuda: sistemski bold i --ink. */
#pregled { border-top: 0; padding: 36px 0 0; }
/* Naslov iznad videa, prvo sto se cita. `h2`, jer `h1` ostaje „Flick"
u hero sekciji ispod, ime proizvoda uz cijenu. Centrirano, kao video. */
.pregled-naslov {
font-size: 44px;
line-height: 1.08;
letter-spacing: -0.03em;
margin: 0 0 12px;
text-align: center;
}
.pregled-uvod {
color: var(--tiho);
font-size: 18px;
line-height: 1.45;
margin: 0 auto 26px;
max-width: 40em;
text-align: center;
}
/* Dugme preko utisanog videa. Centrirano i krupno, jer mora pobijediti misao
„ovaj video nema zvuka". Nestaje cim se klikne. */
.pregled-zvuk {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 10px;
height: 56px;
padding: 0 26px 0 22px;
border: 0;
border-radius: 999px;
background: rgba(0, 0, 0, .78);
color: #FFFFFF;
font: 700 17px/1 var(--sistem);
letter-spacing: -0.01em;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
transition: background .2s, transform .15s;
z-index: 2;
}
.pregled-zvuk:hover { background: rgba(0, 0, 0, .9); }
.pregled-zvuk:active { transform: translate(-50%, -50%) scale(0.97); }
.pregled-zvuk:focus-visible { outline: 2px solid var(--cigla); outline-offset: 3px; }
#misljenja + .hero { border-top: 1px solid var(--linija); }
/* ---------- „Sta drugi misle o Flicku" ----------
Odmah ispod videa. Pravi screenshotovi poruka, zamucen je samo avatar (vidi
komentar u flick.html). Traka klizi sama; rubovi se gube u bijelo maskom, da kartica ne
bude odsjecena nozem. */
/* Malo zraka iznad: kartice MORAJU provirivati vec na prvom ekranu (14.10.),
da se odmah vidi da ispod videa ima jos. */
#misljenja { border-top: 0; padding: 30px 0 56px; }
.misljenja-naslov {
font-size: 24px;
margin: 0 0 18px;
text-align: center;
}
.misljenja-okvir {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.misljenja-traka {
display: flex;
align-items: center;
gap: 18px;
width: max-content;
padding: 6px 0 14px;
animation: misljenja-klizi 70s linear infinite;
}
.misljenja-okvir:hover .misljenja-traka { animation-play-state: paused; }
@keyframes misljenja-klizi {
from { transform: translateX(0); }
to { transform: translateX(calc(-50% - 9px)); }
}
/* Screenshot poruke kakav jeste, samo zaobljen i sa mekom sjenkom. Sve iste
SIRINE, ne visine: svi originali su sirine telefona (oko 1300 px), pa ista
sirina znaci ista velicina slova. Sa istom visinom je duga poruka bila
sitna, a kratka krupna. */
.misljenje {
flex: 0 0 auto;
display: block;
width: 400px;
height: auto;
border-radius: 22px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .08), 0 12px 30px rgba(0, 0, 0, .10);
}
/* Bez pokreta: traka stoji, a moze se prevuci rukom. */
@media (prefers-reduced-motion: reduce) {
.misljenja-okvir { overflow-x: auto; }
.misljenja-traka { animation: none; }
}
@media (max-width: 560px) {
.misljenja-naslov { font-size: 22px; }
.misljenje { width: 290px; border-radius: 16px; }
}
/* DVA ELEMENTA, ne jedan. Bijeli rub i sjenka su na `.pregled-ram`, a odnos
16:9 na `.pregled-okvir` unutra. Da je sve na jednom, `box-sizing:
border-box` bi racunao 16:9 PREKO ruba, pa bi sadrzaj bio 1.797 umjesto
1.778 i YouTube bi dodao tanke crne pruge. */
/* Sirina videa zavisi i od VISINE ekrana: na niskom laptopu (720 do 800 px)
puni video gura „Sta drugi misle" ispod ruba i kartice se ne vide. 440 px je
sve sto stoji iznad i ispod videa do prvih ~120 px kartica (izmjereno
14.10.: na 1440x800 kartice su sa 760 px videa pocinjale na 766 px). */
.pregled-ram {
max-width: clamp(480px, calc((100vh - 440px) * 16 / 9), 760px);
margin: 0 auto;
padding: 6px;
background: #FFFFFF;
border-radius: 26px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .05), 0 0 0 1px rgba(0, 0, 0, .06);
}
.pregled-okvir {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
background: var(--siva);
overflow: hidden;
}
/* Vazi i za YouTube iframe koji dolazi na mjesto praznog okvira. */
.pregled-okvir iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* ---------- thumbnail (naslovna slika videa) ----------
Nije slika nego HTML: ostro je na svakoj velicini, tekst se moze mijenjati bez
ponovnog crtanja, a panel na njoj je PRAVA slika panela (`flick-panel-providan.png`,
koju crta tools/slika-proizvoda.sh iz istih ikonica i mjera kao sam panel).
Nacrtana imitacija bi mogla pokazati nesto sto panel nema.
SVE MJERE SU U `cqw`, dakle u procentu SIRINE OKVIRA. Zato kompozicija na
telefonu izgleda isto kao na ekranu, samo manja, kao prava slika. Da su
mjere u px, tekst na 322 px sirine bi bio ogroman u odnosu na okvir.
`container-type` na okviru je to sto `cqw` cini mjerljivim. */
.pregled-okvir { container-type: inline-size; }
.tn {
position: absolute;
inset: 0;
overflow: hidden;
/* Blaga svjetlost iz gornjeg lijevog ugla, kao na kartici u hero sekciji. */
background:
radial-gradient(120% 90% at 8% 0%, #FFFFFF 0%, rgba(255,255,255,0) 55%),
var(--siva);
border: 0;
padding: 0;
margin: 0;
display: block;
width: 100%;
text-align: left;
font: inherit;
color: inherit;
}
/* Kad video ima id, cijeli thumbnail je dugme. */
.tn.klik { cursor: pointer; }
.tn-tekst {
position: absolute;
left: 6cqw;
top: 8cqw;
/* 34cqw, a bilo 42: na 42 se „10x brze editovanje." lomilo u dva reda, pa je
naslov ispadao u TRI. Izmjereno na cetiri sirine. */
right: 34cqw;
}
.tn-nad {
font-size: 1.95cqw;
font-weight: 700;
letter-spacing: 0.19em;
text-transform: uppercase;
color: var(--tiho);
margin: 0 0 2.6cqw;
white-space: nowrap;
}
/* Prelom je RUCNI (`
`), jer thumbnail mora imati tacno dva reda na svakoj
sirini: `cqw` mjere znace da se odnos slova i okvira nikad ne mijenja, pa
automatski prelom nema sta da odluci osim da pogrijesi. */
.tn-naslov {
font-family: var(--sistem);
font-size: 5.5cqw;
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.035em;
color: var(--ink);
margin: 0 0 4.4cqw;
}
/* Red „ikonica → sta radi". Na uzoru su tu bile tipke tastature; Flick nema
precice nego ikonice, pa bi tipke bile laz o proizvodu. */
.tn-red { display: flex; align-items: center; gap: 2.2cqw; }
.tn-plocica {
flex: 0 0 auto;
width: 7cqw;
height: 7cqw;
border-radius: 1.7cqw;
background: #2b2b2b;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 0.4cqw 1.2cqw rgba(0,0,0,.16);
}
.tn-plocica img { width: 4cqw; height: 4cqw; display: block; }
/* Kruzic boje, isti kao u panelu i u uputstvu: Lavender, jer takvu oznaku
Adjustment Layer dobija podrazumijevano. */
.tn-tocka {
position: absolute;
right: 0.95cqw;
top: 0.95cqw;
width: 1.85cqw;
height: 1.85cqw;
border-radius: 50%;
background: #D800FF;
border: 0.18cqw solid #151515;
}
.tn-radi { font-size: 2.75cqw; font-weight: 500; color: var(--ink); white-space: nowrap; }
.tn-radi span { color: var(--tiho); }
.tn-dno {
position: absolute;
left: 6cqw;
bottom: 7cqw;
font-size: 2.15cqw;
font-weight: 700;
color: var(--ink);
margin: 0;
}
/* PANEL. Nagnut u prostoru i namjerno izlazi van desnog ruba, kao na uzoru:
slika koja se ne vidi cijela izgleda kao snimak, a cijela izgleda kao ikona.
`perspective` je na roditelju u istim `cqw` jedinicama, da nagib bude isti na
svakoj velicini. */
.tn-panel {
position: absolute;
right: -9cqw;
top: 5cqw;
width: 58cqw;
perspective: 90cqw;
}
.tn-panel img {
display: block;
width: 100%;
height: auto;
transform: rotateY(-19deg) rotateZ(-4.2deg) rotateX(3deg);
transform-origin: 50% 40%;
filter: drop-shadow(0 2.4cqw 3.4cqw rgba(0,0,0,.20));
}
/* Znak za pustanje. Trougao je BORDER, ne slovo i ne slika: nema fonta koji
moze ispasti drugaciji i nema fajla koji moze ne stici. */
.tn-znak {
position: absolute;
left: 50%;
top: 50%;
width: 9.4cqw;
height: 9.4cqw;
margin: -4.7cqw 0 0 -4.7cqw;
border-radius: 50%;
background: rgba(27, 26, 23, 0.55);
backdrop-filter: blur(0.4cqw);
display: flex;
align-items: center;
justify-content: center;
transition: background 160ms ease-out, transform 160ms ease-out;
}
/* `[hidden]` MORA stajati izricito. `display: flex` iznad je AUTORSKO pravilo i
pobjedjuje UA pravilo `[hidden] { display: none }`, pa je znak ostajao vidljiv
i kad mu JS postavi `hidden`. Izmjereno 08.09.: na slici su stajali i znak za
pustanje i pilula „snimak stize". Ista zamka kao `