/* ─────────────────────────────────────────────────────────────
Auto Škola Trijumf 2005 — footer
Tamna sekcija. Forma lijevo, kontakt desno, mapa preko cijele
širine, na dnu copyright + mreže.
───────────────────────────────────────────────────────────── */
.t-footer{
/* Na navy pozadini --t-focus (#398EC3) je pretih. Uloga se
mijenja lokalno, boja je i dalje iz rampe — nema nove boje. */
--t-focus:var(--t-b300);
background:var(--t-surface-dark);
color:var(--t-text-on-dark);
}
.t-footer a{ color:inherit; }
/* ── Gornji dio ───────────────────────────────────────────── */
.t-footer__top{
display:grid;
grid-template-columns:1fr;
gap:var(--t-8);
padding-block:var(--t-8);
}
.t-footer__heading{
margin:0 0 var(--t-2);
font-family:var(--t-font-display);
font-weight:800;
font-stretch:calc(var(--t-wdth-heading) * 1%);
font-size:var(--t-size-h2);
line-height:var(--t-lh-heading);
letter-spacing:var(--t-track-heading);
color:var(--t-text-on-dark);
}
.t-footer__lead{
margin:0 0 var(--t-6);
max-width:46ch;
color:var(--t-text-on-dark-2);
}
/* ── Forma ────────────────────────────────────────────────── */
.t-form__row{
display:grid;
grid-template-columns:1fr;
gap:var(--t-4);
margin-bottom:var(--t-4);
}
.t-field{ display:block; }
.t-field__label{
display:block;
margin-bottom:var(--t-1);
font-size:var(--t-size-label);
font-weight:700;
letter-spacing:var(--t-track-label);
text-transform:uppercase;
color:var(--t-text-on-dark-2);
}
/* 17px — ispod 16px iOS Safari zumira stranicu na fokus.
Selektori su namjerno dvoklasni (`.t-footer .t-field__control`).
Hello Elementor u reset.css nosi
input[type=text], input[type=email], … { border:1px solid #666;
border-radius:3px; padding:.5rem 1rem; transition:all .3s }
što je (0,1,1) i tuče golu klasu (0,1,0). Bez ovog pojačanja
input i textarea u istoj formi ne izgledaju isto — textarea
je slučajno pobjeđivala jer je pisana kao `textarea.t-field__control`. */
.t-footer .t-field__control,
.t-footer .ff-el-form-control,
.t-footer .fluentform textarea,
.t-footer .fluentform select{
width:100%;
min-height:48px;
padding:var(--t-3) var(--t-4);
background:var(--t-surface);
color:var(--t-text);
font-family:var(--t-font-body);
font-size:var(--t-size-body);
line-height:1.4;
border:1px solid var(--t-line);
border-radius:var(--t-r-sm);
transition:border-color var(--t-m-fast) var(--t-ease);
}
.t-footer textarea.t-field__control{
min-height:120px;
resize:vertical;
}
.t-footer .t-field__control::placeholder{ color:var(--t-text-3); }
.t-footer .t-field__control:hover{ border-color:var(--t-line-strong); }
/* Roditeljska tema na :focus baca border u #333 — uzima se nazad,
fokus prsten je jedini indikator i dolazi iz base.css. */
.t-footer .t-field__control:focus{ border-color:var(--t-b600); }
/* Amber ima tačno jedno mjesto i nije ovdje.
b400 nosi navy tekst — 5.96, AA. */
.t-btn,
.t-footer .ff-btn-submit,
.upis .ff-btn-submit{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding-inline:var(--t-6);
background:var(--t-b400);
color:var(--t-b950);
font-family:var(--t-font-body);
font-size:var(--t-size-body);
font-weight:700;
border:0;
border-radius:var(--t-r-full);
cursor:pointer;
transition:background-color var(--t-m-base) var(--t-ease);
}
/* Hello Elementor boji svako dugme na :hover/:focus u #c36 —
zato je i :focus ovdje naveden, ne samo :hover. */
.t-btn:hover,
.t-btn:focus,
.t-footer .ff-btn-submit:hover,
.t-footer .ff-btn-submit:focus,
.upis .ff-btn-submit:hover,
.upis .ff-btn-submit:focus{
background:var(--t-b300);
color:var(--t-b950);
}
.t-form__note{
margin:var(--t-3) 0 0;
font-size:var(--t-size-small);
color:var(--t-text-on-dark-2);
}
/* ── Kontakt podaci ───────────────────────────────────────── */
.t-contact{
display:grid;
gap:var(--t-5);
margin:0;
}
.t-contact__item{ margin:0; }
.t-contact__label{
display:block;
margin-bottom:var(--t-1);
font-size:var(--t-size-label);
font-weight:700;
letter-spacing:var(--t-track-label);
text-transform:uppercase;
color:var(--t-text-on-dark-2);
}
.t-contact__value{
margin:0;
font-size:var(--t-size-body-lg);
line-height:1.45;
}
.t-contact__value a{
text-decoration:none;
border-bottom:1px solid transparent;
transition:border-color var(--t-m-fast) var(--t-ease);
}
.t-contact__value a:hover{ border-bottom-color:currentColor; }
/* Razdvajač između dva ravnopravna broja. Prigušen je da bi brojevi
ostali glavni, ali sam nosi nula informacije — zato aria-hidden. */
.t-contact__razdvoji{
padding-inline:var(--t-2);
color:var(--t-text-on-dark-2);
}
.t-contact__alt{
display:block;
margin:var(--t-1) 0 0;
font-size:var(--t-size-small);
color:var(--t-text-on-dark-2);
}
.t-contact__alt a{ text-decoration:none; }
.t-contact__alt a:hover{ text-decoration:underline; }
.t-contact__meta{
margin:0;
padding-top:var(--t-5);
border-top:1px solid rgba(181,220,243,.18);
font-size:var(--t-size-small);
color:var(--t-text-on-dark-2);
}
/* ── Mapa — statična slika, bez embeda ────────────────────────
Nema iframea, pa pri učitavanju stranice ka Google-u ne ide
nijedan zahtjev. Pin je utisnut u samu sliku — skenirano iz piksela:
balon je na 60.7–69.0% širine, počinje na 54.5% visine, vrh igle je na
86.8% visine. Ispod igle ostaje 87px izvorne slike. Nije zaseban element.
Cijeli blok je , pa je i tastatura riješena sama: jedan tab
stop, Enter radi bez ijednog slušača. */
.t-footer__map{
position:relative;
display:block;
width:100%;
/* 600px.
Slika je 2140×659, odnos 3.247:1. Okvir slike unutar ivica je 598px, pa
`cover` traži faktor 598/659 = 0.9074 — dakle UMANJENJE — sve dok širina
mape ne pređe 2140 × 0.9074 = **1942px**. Do te širine se siječe samo
lijevo-desno i nema nijednog uvećanog piksela: izmjereno 0.9074 na 390,
768, 1440 i 1920. Preko 1942px kreće i vertikalno sječenje i pravo
uvećanje — 1.189× na 2560.
Ovo je četvrta slika mape u jednom danu. Ranije su bile 2391×737 (samo
na papiru), 2391×556 uz visinu 450px i 1820×518 uz 520px. Nijedan raniji
račun ne opisuje ovaj fajl. */
height:600px;
overflow:hidden;
background:var(--t-b900);
border-block:1px solid rgba(181,220,243,.18);
}
/* Pin nije u centru slike, pa `center` ne radi ni po jednoj osi. Položaj je
SKENIRAN iz piksela slike: crveni prsten balona zauzima x od 1298 do 1477
(60.7–69.0% širine, središte 64.8%), počinje na y = 359 (54.5% visine), a
vrh igle je na y = 572 (86.8%). Ispod igle ostaje 87px izvorne slike.
Po y NIJE 50%. Sa svega 87px ispod igle, centrirano vertikalno sječenje bi
na širokim ekranima odsjeklo baš vrh pina. `88%` gura kadar nadolje.
Izmjeren prostor ispod vrha igle: 79.9px na 390, 768, 1440 i 1920, i
82.2px na 2560.
Ispod 1942px širine mape vertikalnog viška nema (slika stane po visini),
pa `88%` tamo nema efekta — pin tada stoji na 86.8% od 600px, to jest na
520.1px. Iznad te granice se siječe i `88%` radi svoj posao.
Po x `65%` drži balon u kadru na svakoj širini. Izmjereno, lijeva i desna
ivica balona kao postotak širine mape:
390 42.5 – 85.8 %
768 53.8 – 75.4 %
1440 59.1 – 70.5 %
1920 60.6 – 69.1 %
2560 60.7 – 69.0 %
Mijenja li se slika, brojevi se skeniraju ponovo — ne prepisuju se iz
dokumenta i ne procjenjuju se sa snimka. */
.t-footer__map-img{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:65% 88%;
transition:filter var(--t-m-base) var(--t-ease);
}
.t-footer__map:hover .t-footer__map-img{ filter:brightness(.94); }
/* Dugme: centrirano po širini mape, na 40% njene visine — uz zaštitu za
ekrane širine preko 1942px.
Po širini je `left:50%` uz `translateX(-50%)`. Izmjereno odstupanje od
sredine mape je 0.00px na 390, 768, 1440, 1920 i 2560.
Po visini se ne centrira: balon pina počinje na 54.5% visine slike, pa bi
savršeno centrirano dugme sjelo na njega. Ispod pina se ne stavlja ništa —
vrh igle je na 520.1px od 600px.
`40%` daje vrh dugmeta na 240.2px i dno na 288.2px. Balon je na 326.8px,
dakle **zazor 38.6px** — i to je isto na 390, 768, 1440 i 1920, jer ispod
1942px širine nema vertikalnog sječenja pa se pin po visini ne pomjera.
ZAŠTO clamp. Preko 1942px slika se siječe i po visini, `88%` je diže, i
balon ide naviše — na 2560 pada na 264.5px. Fiksnih 40% bi tamo značilo da
dugme PREKRIVA balon za 23.7px. Izmjereno, ne pretpostavljeno.
`calc(454px - 10.32vw)` je prava linija kroz taj problem, izvedena a ne
pogođena. Iznad granice sječenja vrijedi:
visina skalirane slike sh = 659 × (W / 2140) = 0.3079 × W
vrh balona = 0.5448 × sh − 0.88 × (sh − 598)
= −0.1032 × W + 526.2
dno dugmeta smije biti = vrh balona − 24
vrh dugmeta smije biti = −0.1032 × W + 454.2 (dugme je 48px)
`100vw` je za ~15px šire od mape (traka za skrol), pa formula daje malo
manju vrijednost nego što treba — greška ide na stranu sigurnosti.
Ispod 1942px formula daje broj veći od 40%, pa `clamp` uzima 40% i dugme
stoji tačno tamo gdje je traženo. Provjereno: na 1920 vrh dugmeta je
240.2px, dakle 40%, a ne rezultat formule. Na 2560 formula preuzima i daje
190.8px, pa je zazor 25.7px — iznad praga od 24px.
Donja granica od 24px je posljednja brana; postaje aktivna tek preko
~4160px širine, gdje je balon ionako pri samom vrhu kadra.
Kontrast navy dugmeta prema mapi ispod njega, u pojasu od 6px oko ivice
(dio pod dugmetom se ne vidi pa se ne broji):
390 min 4.54 prosjek 14.65 piksela ispod 3.0: 0
768 min 4.32 prosjek 14.84 0
1440 min 11.67 prosjek 14.94 0
1920 min 3.25 prosjek 14.43 0
2560 min 3.29 prosjek 14.86 0
Nijedan piksel ispod 3.0 ni na jednoj širini — granica dugmeta prolazi
WCAG 1.4.11 svuda. Sa prethodnom slikom je na 2560 sedam piksela padalo na
2.38; nova slika je i to riješila.
Bijeli tekst na b950 je 16.4 i ne zavisi od mape.
Navy, ne amber. Amber od 03.09.2026 ima tačno JEDNO mjesto — dugme
„Upiši se" — a ovo dugme vodi u navigaciju, ne u upis. Pravilo je iz
tokens.css. Bijelo na b950 je 16.5, na b800 10.9.
Mijenja li se slika ili visina mape, i 40% i konstante u `calc()` i
kontrast se mjere ponovo. */
.t-footer__map-btn{
position:absolute;
top:clamp(24px, calc(454px - 10.32vw), 40%);
left:50%;
transform:translateX(-50%);
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding-inline:var(--t-6);
background:var(--t-b950);
color:var(--t-n0);
font-family:var(--t-font-body);
font-size:var(--t-size-body);
font-weight:700;
text-decoration:none;
white-space:nowrap;
border-radius:var(--t-r-full);
transition:background-color var(--t-m-base) var(--t-ease),
transform var(--t-m-base) var(--t-ease),
box-shadow var(--t-m-base) var(--t-ease);
}
/* Hover se hvata na cijelom bloku — slika je dio istog linka. */
.t-footer__map:hover .t-footer__map-btn,
.t-footer__map:active .t-footer__map-btn{
background:var(--t-b800);
color:var(--t-n0); /* nikad se ne mijenja */
transform:translate(-50%, -1px); /* 1px naviše */
box-shadow:var(--t-shadow-float);
}
/* Fokus prsten dolazi iz base.css i sjeda na , ne na .
Ovdje se samo zaključava boja teksta protiv roditeljskog
`a:hover{color:#336}` iz Hello Elementora. */
.t-footer__map:focus .t-footer__map-btn,
.t-footer__map:focus-visible .t-footer__map-btn{
color:var(--t-n0);
}
/* Adresa u kontakt bloku vodi na isto odredište kao dugme. */
.t-contact__value a[target="_blank"],
.t-contact__alt a[target="_blank"]{ text-decoration:underline; }
/* ── Moto ─────────────────────────────────────────────────
„Trijumfujmo zajedno u bezbjednoj vožnji" — iznad copyright
linije, u istom kontejneru.
Boja NIJE --t-b950 kako je traženo u IZMJENE-TEKSTA.md: podnožje
je tamna sekcija (--t-surface-dark = #061E45), pa bi navy tekst
na navy podlozi bio kontrast 1.0. Uloga za tamnu podlogu daje
#B5DCF3 → 11.32, AAA. Boja je i dalje iz rampe.
Tracking je --t-track-label (0.1em) umjesto traženih „oko 0.08em":
vrijednost postoji u tokenima i nema razloga uvoditi novu.
Za stepen manje od osnovnog teksta, kako je i traženo — nije
naslov i ne takmiči se sa kontakt podacima. */
/* ── Dno ──────────────────────────────────────────────────
Mobilno: ikone gore centrirano, copyright ispod centrirano.
column-reverse to radi bez diranja redoslijeda u DOM-u. */
.t-footer__bottom{
display:flex;
flex-direction:column-reverse;
align-items:center;
gap:var(--t-5);
padding-block:var(--t-6);
text-align:center;
}
.t-footer__copy{
margin:0;
font-size:var(--t-size-small);
color:var(--t-text-on-dark-2);
}
.t-social{
display:flex;
align-items:center;
gap:var(--t-3);
margin:0;
padding:0;
list-style:none;
}
.t-social a{
display:inline-flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
color:var(--t-text-on-dark);
border:1px solid rgba(181,220,243,.28);
border-radius:var(--t-r-full);
transition:background-color var(--t-m-base) var(--t-ease),
border-color var(--t-m-base) var(--t-ease);
}
.t-social a:hover{
background:var(--t-b800);
border-color:var(--t-b300);
}
.t-social svg{
width:20px;
height:20px;
display:block;
}
/* ── Desktop ──────────────────────────────────────────────── */
@media (min-width:768px){
.t-footer__top{
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:var(--t-9);
padding-block:var(--t-9);
}
.t-form__row--split{ grid-template-columns:1fr 1fr; }
.t-footer__bottom{
flex-direction:row;
justify-content:space-between;
text-align:left;
}
/* Moto prati poravnanje copyright linije ispod sebe. */
}
/* Dokovan header pokriva dno viewporta — copyright mu se sklanja. */
@media (max-width:767.98px){
.t-footer__bottom{
padding-bottom:calc(var(--t-6) + var(--t-header-band));
}
}
@media (prefers-reduced-motion:reduce){
.t-footer *{ transition:none !important; }
}
/* ═══════════════════════════════════════════════════════════
PRIJAVA ZA UPIS — modal
Native