/* =========================================================================
app.css — novi stilovi (CUBE CSS). Vrijedi za NOVE MVC komponente
(katalog, detalj…). Legacy sloj (legacy.css) i dalje stilizira chrome i stare
stranice. Obje datoteke učitava layouts/main.php, legacy.css prvi.
Slojevi: TOKENS -> COMPOSITION -> UTILITY -> BLOCK -> EXCEPTION.
========================================================================= */
/* ---------- TOKENS (dizajn varijable) ---------- */
:root {
color-scheme: light;
--clr-bg: #f5f7fa;
--clr-surface: #ffffff;
--clr-ink: #141a1f;
--clr-ink-soft: #475467; /* meta-tekst na kartici (čitljiviji od --clr-muted) */
--clr-muted: #667085;
--clr-heart: #e11d48;
--clr-border: #e6e9ee;
/* Nepopunjena pozicija u galeriji. NAMJERNO svjetlija od --clr-border: ta ista
siva stoji ispod slike dok se učitava, pa je prazna pozicija u istoj nijansi
izgledala kao fotografija koja se nije učitala. Vrijednost je birana da
istovremeno ostane vidljiva na bijeloj stranici (kontrast 1.13) i da se
odvoji od sive koja znači "učitavam" (1.07). Ne svjetlije od ovoga —
iznad ~#f2f5f9 ploha se stopi s bijelim razmacima mozaika. */
--clr-placeholder: #eef1f5;
/* Akcent je BRENDOVA PLAVA, ne više teal. Paleta (--brand-*) živi u legacy.css
jer legacy stranice učitavaju samo nju; fallback drži app.css upotrebljivim
i sam za sebe, isti dogovor kao kod --content-width niže.
NE upisivati hex ovdje — mijenja se --brand-500 u legacy.css. */
--clr-accent: var(--brand-500, #044f87);
--clr-accent-2: var(--brand-600, #08396a);
--clr-accent-rgb: var(--brand-rgb, 4, 79, 135);
/* Cijena je bila #0b3d2e (tamnozelena) — jedina zelena u sadržaju i glavni
razlog zašto se činilo da se boje miješaju. Sad najtamnija brend plava. */
--clr-price: var(--brand-700, #062a47);
/* razmaci (modularna skala) */
--space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-s: 0.75rem;
--space-m: 1rem;
--space-l: 1.5rem;
--space-xl: 2.5rem;
--space-2xl: 4rem;
/* tipografija (fluid) */
--step-0: 1rem;
--step-05: 1.0625rem; /* naslov kartice — 1px iznad tijela teksta */
--step-1: 1.15rem;
--step-2: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
--step-3: clamp(1.8rem, 1.4rem + 2vw, 2.6rem);
--radius: 16px;
--radius-l: 20px; /* kartica oglasa — mekši, "premium" kut */
--radius-s: 10px;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
--shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08), 0 14px 30px rgba(16, 24, 40, 0.06);
--shadow-lg: 0 10px 24px rgba(16, 24, 40, 0.1), 0 22px 48px rgba(16, 24, 40, 0.1);
--measure: 66ch;
/* Širina bočnog stupca — JEDAN izvor za oba ekrana: filteri na listingu
(lijevo) i forma za upit na detalju (desno). Da se ne raziđu.
Donja granica je 18.75rem = 300px: ispod toga je panel tijesan (rasponi
"od–do" i checkbox stupci su morali biti stisnuti da stanu u 238px).
PAZI: 300px donja granica radi SAMO uz minimum kartice od 15rem u .grid.
Sa 16rem bi na 960px stupac rezultata pao na 524px (2 kartice traže 536)
→ jedna kartica po redu, a na 1280px bi 3 kartice falile za 4px.
Gornja granica 20rem = 320px, dosegne se od ~1455px. */
--sidebar-width: clamp(18.75rem, 22vw, 20rem);
}
/* ---------- COMPOSITION (layout primitivi, bez dizajna) ---------- */
.wrapper {
/* Isti token kao navigacija/footer u legacy.css — inače se main i nav razilaze
do 40px sa svake strane iznad ~1333px. Fallback ako app.css ide sam. */
width: var(--content-width, min(90%, 85rem));
margin-inline: auto;
}
/* Legacy `main { margin: 64px auto }` (legacy.css) zbrajao se s padding-block
blokova ispod → 104px od navigacije do breadcrumba. Vertikalni ritam nosi
blok, ne main. Namjerno DVA pravila: `:has()` u istoj selektorskoj listi
srušio bi i .catalog na preglednicima bez podrške (lista nije praštajuća). */
main.catalog {
margin-block-start: 0;
}
main:has(> .property) {
margin-block-start: 0;
} /* detalj: main.none > article.property */
/* vertikalni ritam: razmak samo IZMEĐU susjednih elemenata */
.flow > * + * {
margin-block-start: var(--flow-space, var(--space-m));
}
/* Responsivna mreža kartica bez media queryja. Minimum je 15rem (240px) — spušten
sa 16rem kad je panel dobio donju granicu od 300px; inače 3 kartice na 1280px
fale za 4px, a na 960px se gubi i drugi stupac.
4 stupca traže 4×240 + 3×24 = 1032px, a stupac rezultata nigdje ne dosegne
toliko (najviše 1000px pri 1920) → mreža nikad ne pada na 4 preuske kartice.
Ispod ~226px se cijena lomi u dva reda; najuža kartica ovdje je 250px.
Uz --sidebar-width: clamp(18.75rem, 22vw, 20rem):
960px → sadržaj 864, panel 300 → stupac 524 → 2×250
1024px → sadržaj 922, panel 300 → stupac 582 → 2×279
1280px → sadržaj 1152, panel 300 → stupac 812 → 3×255
1440px → sadržaj 1296, panel 317 → stupac 939 → 3×297
1920px → sadržaj 1360, panel 320 → stupac 1000 → 3×317
Ako se ikad mijenja --content-width, --sidebar-width ili gap, PROVJERI ovaj
račun — prag je izveden iz njih, ne proizvoljan. */
.grid {
display: grid;
gap: var(--space-l);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
/* horizontalna grupa s omatanjem */
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
align-items: center;
}
/* ---------- UTILITY ---------- */
.text-muted {
color: var(--clr-muted);
}
.measure {
max-inline-size: var(--measure);
}
/* tekst samo za čitače ekrana (npr. label na ikonskom gumbu) */
.visually-hidden {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---------- BLOCK: home-hero (naslovnica) ----------
Nasljednik legacy `header.index`. Taj je bio visok 100vh (1035px na ekranu od
1080), pa se do prvog oglasa moralo skrolati cijeli zaslon. Ovdje visinu
diktira sadržaj uz razuman padding — hero završi oko 380–460px i prvi red
kartica proviri iznad pregiba. */
/* KLJUČNO: bez ovoga naslovnica nije puna širina. Legacy `main` je 12-stupčani
grid ograničen na --content-width, a `section { grid-column: 1 / 8 }` gura
svaku sekciju u 7 od 12 stupaca — hero bi bio ~790px i bez pozadine do ruba.
Širinu sadržaja nose .home-hero__inner i .featured.wrapper, ne main. */
main.home {
display: block;
width: 100%;
margin: 0;
}
.home-hero {
padding-block: var(--space-2xl);
/* Fotografija je ostala iz legacy heroa (images/head.jpg). Zastor je NAGNUT:
gore .62 (slika se vidi), dolje .90 — ondje su uvodna rečenica i polje za
pretragu, a oni su na --clr-muted i trebaju mirniju podlogu. Ravnomjeran
zastor bi ili sakrio sliku ili srušio čitljivost teksta. */
background:
radial-gradient(120% 140% at 12% 0%, rgba(13, 148, 136, 0.12), transparent 60%),
linear-gradient(rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.9)),
url('/images/head.jpg') center / cover no-repeat;
border-block-end: 1px solid var(--clr-border);
}
.home-hero__inner {
width: var(--content-width, min(90%, 85rem));
margin-inline: auto;
text-align: center;
}
.home-hero__title {
margin: 0;
font-family: var(--font-header, 'Montserrat', sans-serif);
font-size: var(--step-3);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
text-transform: none; /* legacy h1 je uppercase */
color: var(--clr-ink);
border: 0; /* legacy h1 ima border-bottom */
padding-block-end: 0;
}
.home-hero__lead {
margin: var(--space-s) auto 0;
max-inline-size: 56ch;
font-size: var(--step-0);
line-height: 1.6;
color: var(--clr-muted);
}
/* Klasična pretraga: vrsta · grad · cijena od–do · gumb. Polja su .field iz
filter panela, pa im veličina i fokus dolaze odande — ovdje je samo raspored.
Bijela ploha ispod: forma stoji na fotografiji i bez podloge se gubi. */
.home-hero__search {
display: flex;
flex-wrap: wrap;
align-items: end;
gap: var(--space-s);
max-inline-size: 58rem;
margin: var(--space-l) auto 0;
padding: var(--space-m);
background: rgba(255, 255, 255, 0.92);
border: 1px solid var(--clr-border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
backdrop-filter: blur(2px);
text-align: start; /* hero je centriran, polja nisu */
}
.home-hero__field {
flex: 1 1 11rem;
min-inline-size: 0;
}
.home-hero__field--price {
flex-basis: 14rem;
}
/* Gradovi trebaju više prostora: kontrola multi-selecta nosi chipove/sažetak. */
.home-hero__field--city {
flex-basis: 14rem;
}
/* SVE kontrole u herou na istu visinu. 2.6rem nije proizvoljno — to je visina
koju .multiselect__control već ima, pa se nadograđeni grad poklapa s ostalima
umjesto da se visina pogađa paddingom (padding + line-height se razlikuju
između ,