/* ==========================================================================
KERAMIČAR RIJEKA — style.css (v2 — "retail" stil po referenci)
==========================================================================
Vizualni smjer preuzet s referentne stranice (ALL4HOME):
- svijetlo plava + bijela + tamna nav traka
- gornja info traka, zatim bijeli header, zatim tamna navigacija
- hero s velikom slikom i okvirnim overlay panelom
- mozaik grid slika s bijelim labelama
NIJE preuzeto: webshop logika (košarica, cijene s popustima, product
kartice). Ovo je lead-gen stranica — cilj je poziv, ne kupnja.
Sadržaj:
1. Tema
2. Reset i osnove
3. Tipografija
4. Gumbi
5. Layout
6. Gornja traka + header + nav traka
7. Hero
8. Mozaik grid
9. Brojke
10. Usluge
11. Zašto mi
12. Cjenik
13. Galerija
14. Recenzije
15. FAQ
16. Područje rada
17. Kontakt
18. Footer
19. Mobilna traka
20. Breakpoints
21. Pristupačnost
========================================================================== */
/* ==========================================================================
1. TEMA — mijenja se za svaki novi grad/nišu
========================================================================== */
:root {
/* --- Plava ---
VAŽNO: --c-blue je namjerno tamnija od reference. Bijeli tekst na
svijetloj azurnoj (#29A3DC) daje 2.8:1 i pada WCAG AA. Na #0C7CB5
daje 4.6:1. Svijetla azurna se koristi SAMO za akcente i velik tekst. */
--c-blue: #0C7CB5; /* PLOHE s bijelim tekstom (bijelo na njoj 4.6:1) */
--c-blue-text: #0A70A6; /* PLAVI TEKST na svijetlom (5.35:1 na bijelom)
Ne koristiti --c-blue za tekst: daje 4.28:1
i pada AA. Ova dva tona su vizualno gotovo
identična, razlika je samo u prolaznosti. */
--c-blue-dark: #095F8C; /* hover / active */
--c-blue-darker: #074A6E;
--c-blue-bright: #29A3DC; /* akcenti, obrubi, velik tekst */
--c-blue-50: #EAF6FC; /* svijetla podloga */
--c-blue-100: #D3EBF7;
/* --- Tamna navigacija --- */
--c-nav: #1C1F23;
--c-nav-2: #262A2F;
--c-nav-line: #3A4046;
/* --- Neutralno --- */
--c-ink: #16191D; /* glavni tekst */
--c-ink-soft: #3D444C;
--c-muted: #5A626B; /* prigušeno, i dalje 4.5:1 na bijelom */
--c-line: #E1E6EA;
--c-line-2: #EFF2F5;
--c-bg: #FFFFFF;
--c-bg-alt: #F5F7F9;
--c-white: #FFFFFF;
/* --- Statusi --- */
--c-danger: #C02617;
--c-ok: #15803D;
--c-star: #F0A020;
--c-accent: #E2600F; /* rijetko: hitni popravci, isticanje */
/* --- Fontovi (latin-ext zbog č ć š ž đ) --- */
--f-head: 'Archivo', 'Segoe UI', system-ui, sans-serif;
--f-body: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
/* --- Skala teksta --- */
--t-xs: 0.8125rem;
--t-sm: 0.9375rem;
--t-base: 1.0625rem;
--t-lg: 1.1875rem;
--t-xl: 1.375rem;
--t-2xl: 1.75rem;
--t-3xl: 2.125rem;
/* --- Razmaci --- */
--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 2.5rem; --s-8: 3rem;
--s-9: 4rem; --s-10: 5rem;
/* --- Ostalo --- */
--r-sm: 3px; --r-md: 5px; --r-lg: 8px;
--wrap: 1240px;
--wrap-narrow: 780px;
--tap: 44px;
--ease: cubic-bezier(.4,0,.2,1);
--dur: 180ms;
--shadow-sm: 0 1px 2px rgba(22,25,29,.07);
--shadow-md: 0 4px 14px rgba(22,25,29,.09);
--shadow-lg: 0 14px 38px rgba(22,25,29,.14);
--z-header: 100;
--z-mobilebar: 90;
}
/* ==========================================================================
2. RESET I OSNOVE
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Ljepljivi blok je 163 px (traka 38 + header 77 + nav 48). Padding mora
biti veći od toga, inače sidro završi djelomično ispod trake. */
scroll-padding-top: 178px;
}
body {
margin: 0;
background: var(--c-bg);
color: var(--c-ink);
font-family: var(--f-body);
font-size: var(--t-base);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--c-blue-text); text-underline-offset: 2px; }
a:hover { color: var(--c-blue-dark); }
button { font: inherit; cursor: pointer; }
:focus-visible {
outline: 3px solid var(--c-blue);
outline-offset: 2px;
border-radius: var(--r-sm);
}
.visually-hidden {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 999;
background: var(--c-blue); color: #fff;
padding: var(--s-3) var(--s-4); font-weight: 600;
}
.skip-link:focus,
.skip-link:hover { left: 0; color: #fff; }
/* ==========================================================================
3. TIPOGRAFIJA
========================================================================== */
h1, h2, h3, h4 {
font-family: var(--f-head);
color: var(--c-ink);
line-height: 1.18;
margin: 0 0 var(--s-3);
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: var(--t-3xl); font-weight: 800; }
h2 { font-size: var(--t-2xl); font-weight: 700; }
h3 { font-size: var(--t-lg); font-weight: 700; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
.eyebrow {
font-family: var(--f-head);
font-size: var(--t-xs); font-weight: 700;
letter-spacing: .12em; text-transform: uppercase;
color: var(--c-blue-text); margin: 0 0 var(--s-2);
}
.eyebrow-light { color: var(--c-blue-bright); }
.lead { font-size: var(--t-lg); color: var(--c-ink-soft); line-height: 1.6; max-width: 60ch; }
/* Naslov sekcije, centriran s linijom ispod — kao "NIEUWE ARTIKELEN" */
.section-head { margin-bottom: var(--s-7); max-width: 65ch; }
.section-head-c { text-align: center; margin-inline: auto; }
.section-head-c::after {
content: ''; display: block;
width: 54px; height: 3px; margin: var(--s-4) auto 0;
background: var(--c-blue);
}
.section-sub { color: var(--c-muted); margin-top: var(--s-3); }
/* ==========================================================================
4. GUMBI
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--s-2);
min-height: var(--tap);
padding: var(--s-3) var(--s-5);
font-family: var(--f-head);
font-size: var(--t-sm); font-weight: 700; line-height: 1.2;
text-align: center; text-decoration: none;
border: 2px solid transparent;
border-radius: var(--r-md);
transition: background-color var(--dur) var(--ease),
border-color var(--dur) var(--ease),
color var(--dur) var(--ease);
}
.btn-lg { min-height: 52px; padding: var(--s-4) var(--s-6); font-size: var(--t-base); }
.btn-block { display: flex; width: 100%; }
.btn-primary { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.btn-primary:hover { background: var(--c-blue-dark); border-color: var(--c-blue-dark); color: #fff; }
/* Tamni gumb, kao "Bekijk Assortiment" u hero panelu reference */
.btn-dark { background: var(--c-nav); color: #fff; border-color: var(--c-nav); }
.btn-dark:hover { background: #000; border-color: #000; color: #fff; }
.btn-outline { background: transparent; color: var(--c-blue-text); border-color: var(--c-blue); }
.btn-outline:hover { background: var(--c-blue-50); color: var(--c-blue-darker); }
.btn-ghost-light { background: rgba(255,255,255,.95); color: var(--c-ink); border-color: rgba(255,255,255,.95); }
.btn-ghost-light:hover { background: #fff; color: var(--c-blue-dark); }
/* ==========================================================================
5. LAYOUT
========================================================================== */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s-4); }
.wrap-narrow { max-width: var(--wrap-narrow); }
/* Širi od ostatka stranice — koristi galerija, da fotografije budu
dovoljno velike da se na njima nešto vidi bez zumiranja. */
.wrap-wide { max-width: 1460px; }
.section { padding-block: var(--s-9); }
.section-alt { background: var(--c-bg-alt); }
.section-blue { background: var(--c-blue-50); }
.section-dark { background: var(--c-nav); color: #fff; }
.section-dark h2 { color: #fff; }
/* Linkovi na TAMNOJ podlozi moraju biti svijetli — nasljeđena --c-blue-text
daje 2.67:1 na tamnom i pada AA.
Obrazac je izuzet: on je bijela kartica unutar tamne sekcije, pa tamo
svijetloplava pada u drugom smjeru (2.85:1 na bijelom). */
.section-dark a:not(.btn):not(.ci-value):not(.map-btn):not(.contact-form-wrap a) {
color: var(--c-blue-bright);
}
.section-dark a:not(.btn):not(.ci-value):not(.map-btn):not(.contact-form-wrap a):hover {
color: #7FC9EC;
}
.contact-form-wrap a { color: var(--c-blue-text); }
.section-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); }
.section-cta-c { justify-content: center; }
/* ==========================================================================
6. GORNJA TRAKA + HEADER + NAV TRAKA
========================================================================== */
.topstack { position: sticky; top: 0; z-index: var(--z-header); }
/* --- Gornja info traka (plava) --- */
.topbar {
background: var(--c-blue);
color: #fff;
font-size: var(--t-xs);
}
.topbar-inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4); min-height: 38px;
}
.topbar-list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.topbar-list li { display: flex; align-items: center; gap: var(--s-2); }
.topbar-list svg { width: 14px; height: 14px; flex: none; opacity: .9; }
.topbar a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 38px; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-right { color: rgba(255,255,255,.92); }
/* --- Bijeli header --- */
.site-header { background: #fff; border-bottom: 1px solid var(--c-line); }
.header-inner { display: flex; align-items: center; gap: var(--s-4); min-height: 76px; }
.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-ink); margin-right: auto; }
.brand-mark {
display: grid; place-items: center;
width: 42px; height: 42px; flex: none;
background: var(--c-blue); color: #fff; border-radius: var(--r-md);
}
.brand-text strong {
display: block; font-family: var(--f-head);
font-size: 1.25rem; font-weight: 800; line-height: 1.1;
letter-spacing: -0.02em; text-transform: uppercase;
}
.brand-text small {
display: block; font-size: 10.5px; letter-spacing: .16em;
text-transform: uppercase; color: var(--c-muted); margin-top: 1px;
}
.header-actions { display: flex; align-items: center; gap: var(--s-3); }
.header-tel {
display: inline-flex; align-items: center; gap: var(--s-3);
min-height: 50px; padding: var(--s-2) var(--s-5);
background: var(--c-blue); color: #fff;
border-radius: var(--r-md); text-decoration: none;
transition: background-color var(--dur) var(--ease);
}
.header-tel:hover { background: var(--c-blue-dark); color: #fff; }
.header-tel svg { width: 20px; height: 20px; flex: none; }
.header-tel-txt { display: flex; flex-direction: column; line-height: 1.15; }
.header-tel-txt small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }
.header-tel-txt strong { font-family: var(--f-head); font-size: var(--t-base); font-weight: 700; }
.nav-toggle {
display: none;
width: var(--tap); height: var(--tap);
background: var(--c-nav); border: 0; border-radius: var(--r-md);
padding: 0; place-items: center;
}
.nav-toggle-bars { display: grid; gap: 4px; place-items: center; }
.nav-toggle-bars span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
/* --- Tamna nav traka --- */
.navband { background: var(--c-nav); }
/* Navigacija centrirana u traci */
.nav ul { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.nav a {
display: inline-flex; align-items: center;
min-height: 48px; padding-inline: var(--s-5);
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 600;
letter-spacing: .04em; text-transform: uppercase;
color: #E6EAEE; text-decoration: none;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { background: var(--c-blue); color: #fff; }
/* ==========================================================================
7. HERO
========================================================================== */
.hero { position: relative; background: var(--c-nav); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(12,124,181,.34) 0%, rgba(22,25,29,.62) 100%);
}
.hero-inner {
position: relative; z-index: 1;
min-height: 460px;
display: grid; align-items: center;
padding-block: var(--s-9);
}
/* Okvirni panel, kao u referenci.
Rub je animiran: zamućena mrlja kruži iza panela, a unutarnja ploha
(::after, uvučena 2px) je prekriva, pa se boja vidi samo po rubu. */
.hero-panel {
position: relative;
isolation: isolate;
overflow: hidden;
max-width: 640px;
padding: var(--s-7);
background: transparent;
border: 0;
}
/* mrlja koja putuje po kutovima */
.hero-panel::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 72%; aspect-ratio: 1;
border-radius: 50%;
background: linear-gradient(120deg, var(--c-blue-bright), #8FD3F4 45%, var(--c-royal-lite));
filter: blur(26px);
opacity: .9;
z-index: 0;
animation: hero-rub 9s linear infinite;
will-change: transform;
}
@keyframes hero-rub {
0% { transform: translate(-100%, -100%); }
25% { transform: translate(0%, -100%); }
50% { transform: translate(0%, 0%); }
75% { transform: translate(-100%, 0%); }
100% { transform: translate(-100%, -100%); }
}
/* unutarnja ploha: nosi pozadinu i onaj uvučeni ukrasni okvir */
.hero-panel::after {
content: '';
position: absolute;
inset: 2px;
background: rgba(22,25,29,.80);
outline: 6px solid rgba(255,255,255,.10);
outline-offset: -14px;
z-index: 1;
pointer-events: none;
}
/* sadržaj iznad oba sloja */
.hero-panel > * { position: relative; z-index: 2; }
/* Poštuj postavku „smanji animacije": rub ostaje, ali se ne miče */
@media (prefers-reduced-motion: reduce) {
.hero-panel::before { animation: none; transform: translate(-50%, -50%); }
}
.hero-panel .eyebrow { color: #8FD3F4; }
.hero-panel h1 { color: #fff; margin-bottom: var(--s-4); }
.hero-panel .lead { color: rgba(255,255,255,.9); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-note { margin-top: var(--s-4); font-size: var(--t-sm); color: rgba(255,255,255,.82); }
/* Traka s podacima ispod heroa */
.hero-bar { background: var(--c-nav-2); color: #fff; }
.hero-bar-grid { display: grid; gap: 1px; background: var(--c-nav-line); }
.hero-bar-item { background: var(--c-nav-2); padding: var(--s-4) var(--s-5); }
.hero-bar-label {
display: block; font-size: var(--t-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--c-blue-bright); margin-bottom: 2px;
}
.hero-bar-value { display: block; font-family: var(--f-head); font-size: var(--t-base); font-weight: 700; color: #fff; text-decoration: none; }
a.hero-bar-value { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc(var(--s-2) * -1); }
a.hero-bar-value:hover { color: var(--c-blue-bright); }
.hero-bar-sub { display: block; font-size: var(--t-xs); color: rgba(255,255,255,.72); }
/* ==========================================================================
8. MOZAIK GRID
Po uzoru na "Tegels 60x60 / 60x120 / 80x80" blok u referenci.
========================================================================== */
.mosaic { display: grid; gap: var(--s-4); }
.mo-item {
position: relative; display: block;
overflow: hidden; background: var(--c-bg-alt);
text-decoration: none;
}
.mo-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 400ms var(--ease);
}
.mo-item:hover img { transform: scale(1.04); }
.mo-item::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.28) 100%);
}
/* Omjer drži KONTEJNER, ne ![]()
.
Ako ga drži slika, visina okvira ovisi o tome je li se slika učitala i
o njezinim stvarnim dimenzijama — pa se raspored pomakne kad slika
stigne (CLS). Ovako je visina poznata iz CSS-a odmah. */
.mo-tall { aspect-ratio: 4 / 5; }
.mo-wide { aspect-ratio: 20 / 11; }
/* Bijela labela, kao u referenci */
.mo-label {
position: absolute; z-index: 1;
left: var(--s-4); bottom: var(--s-4);
display: inline-flex; align-items: center;
min-height: 38px; padding: var(--s-2) var(--s-4);
background: #fff; color: var(--c-ink);
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700;
box-shadow: var(--shadow-sm);
}
.mo-item:hover .mo-label { color: var(--c-blue-text); }
/* ==========================================================================
9. BROJKE
========================================================================== */
.stats { background: var(--c-blue); color: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-5) var(--s-4); padding-block: var(--s-6); }
.stat { text-align: center; }
.stat strong { display: block; font-family: var(--f-head); font-size: var(--t-2xl); font-weight: 800; line-height: 1.1; }
.stat span { font-size: var(--t-sm); color: rgba(255,255,255,.9); }
/* ==========================================================================
10. USLUGE
========================================================================== */
.cards { display: grid; gap: var(--s-4); }
.card {
background: #fff;
border: 1px solid var(--c-line);
border-top: 3px solid var(--c-blue);
padding: var(--s-5);
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card-icon {
display: grid; place-items: center;
width: 48px; height: 48px; margin-bottom: var(--s-4);
background: var(--c-blue-50); color: var(--c-blue-text);
border-radius: var(--r-md);
}
.card-icon svg { width: 25px; height: 25px; }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--c-muted); font-size: var(--t-sm); margin: 0; }
/* --------------------------------------------------------------------------
Usluge: popis lijevo, klizač usporedbe desno
-------------------------------------------------------------------------- */
.usl-split { display: grid; gap: var(--s-7); align-items: start; }
/* Kompaktna stavka usluge: ikona lijevo, tekst desno */
.usl-item {
display: flex; align-items: flex-start; gap: var(--s-4);
padding: var(--s-4) 0;
border-bottom: 1px solid var(--c-line);
}
.usl-item:first-child { padding-top: 0; }
.usl-item:last-child { border-bottom: 0; padding-bottom: 0; }
.usl-ikona {
flex: none; display: grid; place-items: center;
width: 46px; height: 46px;
background: var(--c-blue-50); color: var(--c-blue-text);
border-radius: var(--r-md);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.usl-ikona svg { width: 24px; height: 24px; }
.usl-item:hover .usl-ikona { background: var(--c-blue); color: #fff; }
.usl-txt { min-width: 0; }
.usl-txt h3 { font-size: var(--t-base); margin: 0 0 2px; }
.usl-txt p { margin: 0; font-size: var(--t-sm); color: var(--c-muted); }
/* --- Klizač usporedbe prije/poslije --- */
.cmp {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4;
background: var(--c-bg-alt);
border: 2px solid var(--c-blue);
cursor: col-resize;
touch-action: pan-y; /* okomito skrolanje ostaje moguće */
user-select: none;
}
.cmp img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
pointer-events: none;
-webkit-user-drag: none;
}
/* gornja slika se reže prema položaju klizača */
.cmp-prije { z-index: 2; clip-path: inset(0 50% 0 0); }
.cmp-poslije { z-index: 1; }
.cmp-linija {
position: absolute; top: 0; bottom: 0;
width: 2px; margin-left: -1px;
background: #fff;
box-shadow: 0 0 0 1px rgba(12,124,181,.5);
z-index: 3;
pointer-events: none;
}
.cmp-rucka {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 44px; height: 44px;
display: grid; place-items: center;
background: #fff;
border: 2px solid var(--c-blue);
border-radius: 50%;
box-shadow: var(--shadow-md);
color: var(--c-blue-text);
}
.cmp-rucka svg { width: 20px; height: 20px; }
/* natpisi u kutovima */
.cmp-oznaka {
position: absolute; top: var(--s-3);
z-index: 4;
padding: 4px var(--s-3);
font-family: var(--f-head); font-size: 11px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: #fff;
pointer-events: none;
}
.cmp-oznaka-prije { left: var(--s-3); background: var(--c-nav); }
.cmp-oznaka-poslije { right: var(--s-3); background: var(--c-blue); }
/* skriveni raspon: pristupačna zamjena za povlačenje (WCAG 2.5.7) */
.cmp-raspon {
position: absolute; inset: 0;
width: 100%; height: 100%;
opacity: 0; margin: 0; z-index: 5;
cursor: col-resize;
}
.cmp-raspon:focus-visible + .cmp-linija .cmp-rucka {
outline: 3px solid var(--c-blue);
outline-offset: 3px;
}
.cmp-napomena {
margin-top: var(--s-3);
font-size: var(--t-xs);
color: var(--c-muted);
text-align: center;
}
@media (min-width: 900px) {
.usl-split { grid-template-columns: 1.05fr .95fr; gap: var(--s-9); }
.usl-compare { position: sticky; top: 190px; }
}
/* ==========================================================================
11. ZAŠTO MI
========================================================================== */
.feature-grid { display: grid; gap: var(--s-5); }
.feature { padding-left: var(--s-4); border-left: 3px solid var(--c-blue-bright); }
.feature h3 { margin-bottom: var(--s-2); }
.feature p { color: var(--c-muted); font-size: var(--t-sm); margin: 0; }
/* ==========================================================================
12. CJENIK
========================================================================== */
.price-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); background: #fff; }
.price-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 460px; }
/* Na uskom ekranu tablica mora stati bez horizontalnog skrolanja — inače se
cijene, koje su cijela poanta, ne vide bez povlačenja udesno. */
@media (max-width: 560px) {
.price-table { min-width: 0; font-size: 0.875rem; }
.price-table thead th { padding: var(--s-2) var(--s-3); font-size: 11px; letter-spacing: .04em; }
.price-table tbody th,
.price-table tbody td { padding: var(--s-3) var(--s-3); }
.price-table tbody th { line-height: 1.35; }
.price-table tbody th span { font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
.price-table tbody td { font-size: 0.875rem; padding-left: var(--s-2); }
/* Tablice u clancima znaju imati tri stupca; na 375px se skupljaju
jos jedan stupanj da vecina stane bez pomicanja. */
.article-body .price-table { font-size: 0.8125rem; }
.article-body .price-table thead th,
.article-body .price-table tbody th,
.article-body .price-table tbody td { padding: var(--s-2); }
}
/* Vidljiv fokus na tablici koja se pomice vodoravno */
.price-table-wrap:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 2px; }
.price-table thead th {
background: var(--c-nav); color: #fff;
font-family: var(--f-head); font-size: var(--t-xs);
letter-spacing: .08em; text-transform: uppercase;
text-align: left; padding: var(--s-3) var(--s-5);
}
.price-table thead th:last-child { text-align: right; }
.price-table tbody th {
font-weight: 600; text-align: left; color: var(--c-ink);
padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--c-line-2);
}
.price-table tbody th span { display: block; font-weight: 400; font-size: var(--t-xs); color: var(--c-muted); }
.price-table tbody td {
padding: var(--s-4) var(--s-5); text-align: right; white-space: nowrap;
font-family: var(--f-head); font-weight: 700; color: var(--c-blue-text);
font-variant-numeric: tabular-nums;
border-bottom: 1px solid var(--c-line-2);
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-row-hi th, .price-row-hi td { background: var(--c-blue-50); }
.price-note { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--c-muted); }
/* ==========================================================================
13. GALERIJA
========================================================================== */
/* Jedan stupac, a par „prije/poslije" je unutar njega u dva stupca.
Širina je namjerno umjerena (~420 px po fotografiji): na većem prikazu
se prepoznaje da snimke nisu prave, pa manji format bolje prolazi.
Datoteke su iz istog razloga izvezene u nižoj rezoluciji. */
.gallery {
display: grid;
gap: var(--s-8);
align-items: start;
max-width: 880px;
margin-inline: auto;
}
/* --------------------------------------------------------------------------
Galerija kao karusel (naslovnica) — pločice klize zdesna nalijevo,
nove ulaze u kadar. Na podstranici galerije ostaje mirni popis.
-------------------------------------------------------------------------- */
.gal-carousel { position: relative; }
.gal-track {
display: flex;
gap: var(--s-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: var(--s-3);
scrollbar-width: thin;
scrollbar-color: var(--c-line) transparent;
}
.gal-track::-webkit-scrollbar { height: 6px; }
.gal-track::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 3px; }
.gal-track::-webkit-scrollbar-track { background: transparent; }
.gal-track > .ga-item {
flex: 0 0 94%;
scroll-snap-align: start;
margin: 0;
}
/* Klonovi za neprekidnu vrtnju — postoje samo vizualno */
.gal-track > .ga-item[data-klon] { pointer-events: none; }
/* Kontrole su obavezne jer se sadržaj sam pomiče (WCAG 2.2.2 Pause, Stop, Hide) */
.gal-controls {
display: flex; align-items: center; justify-content: center;
gap: var(--s-2);
margin-top: var(--s-5);
}
.gal-btn {
display: grid; place-items: center;
width: 44px; height: 44px;
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-md);
color: var(--c-ink);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
border-color var(--dur) var(--ease);
}
.gal-btn:hover:not(:disabled) { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.gal-btn:disabled { opacity: .4; cursor: default; }
.gal-btn svg { width: 19px; height: 19px; }
.gal-pause {
width: auto; padding-inline: var(--s-4); gap: var(--s-2);
display: inline-flex; align-items: center;
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700;
}
@media (min-width: 768px) {
.gal-track > .ga-item { flex: 0 0 min(700px, 76%); }
}
/* Poštuj postavku „smanji animacije": bez automatskog pomicanja */
@media (prefers-reduced-motion: reduce) {
.gal-track { scroll-behavior: auto; }
}
.ga-item { margin: 0; }
.ga-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--c-line); border: 1px solid var(--c-line); }
/* Omjer drži KONTEJNER, ne ![]()
— isti razlog kao kod mozaika: inače
visina ovisi o tome je li se slika učitala, pa raspored skoči (CLS). */
.ga-shot { position: relative; background: #fff; aspect-ratio: 4 / 3; }
.ga-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Orijentacija se postavlja po paru — snimke nisu sve ležeće.
Uspravnu fotografiju u ležećem okviru odrezalo bi 44% kadra. */
.ga-landscape .ga-shot { aspect-ratio: 4 / 3; }
.ga-portrait .ga-shot { aspect-ratio: 3 / 4; }
.ga-tag {
position: absolute; left: 0; top: 0;
padding: 4px var(--s-3);
background: var(--c-nav); color: #fff;
font-family: var(--f-head); font-size: 11px; font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
}
.ga-tag-after { background: var(--c-blue); }
.ga-item figcaption { margin-top: var(--s-3); font-size: var(--t-sm); color: var(--c-muted); }
/* ==========================================================================
14. RECENZIJE
========================================================================== */
.reviews { display: grid; gap: var(--s-4); }
.review { margin: 0; background: #fff; border: 1px solid var(--c-line); padding: var(--s-5); }
.stars { display: flex; gap: 2px; margin-bottom: var(--s-3); }
.stars svg { width: 17px; height: 17px; fill: var(--c-star); }
.review p { font-size: var(--t-base); color: var(--c-ink); margin: 0 0 var(--s-4); }
.review footer {
display: flex; align-items: center; gap: var(--s-3);
padding-top: var(--s-4); border-top: 1px solid var(--c-line-2);
}
.rv-avatar {
flex: none; display: grid; place-items: center;
width: 38px; height: 38px; border-radius: 50%;
background: var(--c-blue-100); color: var(--c-blue-darker);
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 800;
line-height: 1; user-select: none;
}
.rv-av-2 { background: #E4E9ED; color: #38414A; }
.rv-av-3 { background: #DDEBE6; color: #2E4A40; }
.rv-av-4 { background: #EDE6DC; color: #5A4732; }
.rv-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.review cite { font-family: var(--f-head); font-style: normal; font-weight: 700; font-size: var(--t-sm); color: var(--c-ink); }
.rv-meta span { font-size: var(--t-xs); color: var(--c-muted); }
/* ==========================================================================
15. FAQ
========================================================================== */
.faq { display: grid; gap: var(--s-2); }
.faq-item { background: #fff; border: 1px solid var(--c-line); }
.faq-item summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
min-height: var(--tap); padding: var(--s-4) var(--s-5);
font-family: var(--f-head); font-size: var(--t-base); font-weight: 700;
color: var(--c-ink); cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: ''; flex: none; width: 11px; height: 11px;
border-right: 2px solid var(--c-blue); border-bottom: 2px solid var(--c-blue);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--dur) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item[open] summary { background: var(--c-blue-50); }
.faq-item summary:hover { background: var(--c-blue-50); }
.faq-body { padding: var(--s-4) var(--s-5) var(--s-5); color: var(--c-muted); font-size: var(--t-sm); }
.faq-body p { margin-bottom: var(--s-3); }
.faq-body p:last-child { margin-bottom: 0; }
/* Poveznice iz FAQ-a na razradene odgovore u clancima */
.faq-more { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--c-muted); }
/* Popis na stranici 404 */
.e404-popis {
list-style: none; margin: var(--s-6) 0 0; padding: 0;
display: grid; gap: var(--s-2); text-align: left;
max-width: 44ch; margin-inline: auto;
}
.e404-popis li {
padding: var(--s-3) var(--s-4);
background: var(--c-bg-alt); border-left: 3px solid var(--c-line-2);
font-size: var(--t-sm); color: var(--c-muted);
}
.e404-popis a {
font-family: var(--f-head); font-weight: 700;
color: var(--c-blue-text); text-decoration: none;
}
.e404-popis a:hover { text-decoration: underline; }
/* --- Prazno stanje ---------------------------------------------------
Koristi se dok stvarnih recenzija nema. Bolje je reci da ih nema nego
objaviti izmisljene - lazne recenzije su na crnoj listi nepostene
poslovne prakse, a i posjetitelj ih prepozna. */
.prazno {
max-width: 62ch; margin-inline: auto;
padding: var(--s-6);
background: var(--c-bg-alt);
border: 1px dashed var(--c-line-2);
text-align: center;
}
.prazno-ikona {
display: grid; place-items: center;
width: 48px; height: 48px; margin: 0 auto var(--s-4);
border-radius: 50%;
background: var(--c-blue-50); color: var(--c-blue-text);
}
.prazno-ikona svg { width: 24px; height: 24px; }
.prazno-h {
font-family: var(--f-head); font-size: var(--t-lg); font-weight: 700;
color: var(--c-ink); margin: 0 0 var(--s-3);
}
.prazno p { color: var(--c-muted); font-size: var(--t-sm); margin: 0 0 var(--s-3); }
.prazno p:last-child { margin-bottom: 0; }
.prazno a { color: var(--c-blue-text); font-weight: 600; }
/* --- Vidljive pravne napomene ---------------------------------------
Odredba u uvjetima ne ispravlja dojam koji posjetitelj stekne na samoj
stranici. Kod nepostene poslovne prakse odlucuje ukupan dojam, pa
napomena mora stajati uz sadrzaj na koji se odnosi, a ne samo u
podnozju. Diskretna je, ali citljiva - kontrast 5.8:1. */
.napomena {
margin-top: var(--s-5);
padding: var(--s-3) var(--s-4);
background: var(--c-bg-alt);
border-left: 3px solid var(--c-line-2);
font-size: var(--t-xs); line-height: 1.55; color: var(--c-muted);
}
.napomena a { color: var(--c-blue-text); }
.napomena strong { color: var(--c-ink); font-weight: 600; }
.napomena p { margin: 0 0 var(--s-2); }
.napomena p:last-child { margin-bottom: 0; }
/* Na tamnoj podlozi (podnozje, hero) */
.napomena-tamna {
background: rgba(255,255,255,.08);
border-left-color: rgba(255,255,255,.28);
color: rgba(255,255,255,.82);
}
.napomena-tamna strong { color: #fff; }
.napomena-tamna a { color: #9FD8F5; }
.faq-more a { color: var(--c-blue-text); font-weight: 600; }
/* ==========================================================================
16. PODRUČJE RADA
========================================================================== */
.areas { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.areas li {
padding: var(--s-2) var(--s-4);
background: #fff; border: 1px solid var(--c-line);
font-size: var(--t-sm); font-weight: 600; color: var(--c-ink-soft);
}
.areas-note { font-size: var(--t-sm); color: var(--c-muted); }
/* Naslov iznad popisa mjesta - kartice iznad nose lokalni kontekst,
ovaj popis pokriva ostatak podrucja. */
.areas-h {
margin: var(--s-7) 0 var(--s-3);
font-size: var(--t-md); color: var(--c-ink);
}
/* Poveznica na dnu kartice podrucja */
.card-link { margin: var(--s-3) 0 0; }
.card-link a {
display: inline-block; padding: 4px 0;
font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm);
color: var(--c-blue-text); text-decoration: none;
}
.card-link a:hover { text-decoration: underline; }
/* ==========================================================================
17. KONTAKT
========================================================================== */
.contact-grid { display: grid; gap: var(--s-8); }
.contact-lead { color: rgba(255,255,255,.85); max-width: 46ch; }
.contact-list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.contact-list li { padding-bottom: var(--s-4); border-bottom: 1px solid var(--c-nav-line); }
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ci-label {
display: block; font-size: var(--t-xs); font-weight: 700;
letter-spacing: .1em; text-transform: uppercase;
color: var(--c-blue-bright); margin-bottom: 2px;
}
.ci-value { display: block; font-family: var(--f-head); font-size: var(--t-lg); font-weight: 700; color: #fff; text-decoration: none; }
a.ci-value { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc(var(--s-2) * -1); }
a.ci-value:hover { color: var(--c-blue-bright); }
.ci-tel { font-size: var(--t-xl); }
.ci-sub { display: block; font-size: var(--t-xs); color: rgba(255,255,255,.7); }
.map { margin-top: var(--s-6); border: 1px solid var(--c-nav-line); background: var(--c-nav-2); padding: var(--s-5); text-align: center; }
.map-btn {
display: inline-flex; align-items: center; gap: var(--s-2);
min-height: var(--tap); padding: var(--s-3) var(--s-5);
background: transparent; color: #fff;
border: 2px solid var(--c-nav-line); border-radius: var(--r-md);
font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm);
transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.map-btn:hover { border-color: var(--c-blue-bright); background: rgba(41,163,220,.12); }
.map-note { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: rgba(255,255,255,.7); }
/* Blok karte je taman i kad stoji u svijetloj sekciji, pa link mora biti
svijetao — inače naslijedi tamnoplavu i padne na 2.67:1. */
.map a { color: var(--c-blue-bright); }
.map a:hover { color: #7FC9EC; }
.map iframe { width: 100%; height: 300px; border: 0; display: block; }
.contact-form-wrap { background: #fff; padding: var(--s-6); box-shadow: var(--shadow-lg); }
.form-title { font-size: var(--t-xl); margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 3px solid var(--c-blue); }
.hp-field { position: absolute; left: -9999px; opacity: 0; }
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700; color: var(--c-ink); margin-bottom: var(--s-2); }
.req { color: var(--c-danger); }
.opt { font-weight: 400; color: var(--c-muted); font-family: var(--f-body); }
.field input[type="text"], .field input[type="tel"], .field textarea {
width: 100%; min-height: var(--tap);
padding: var(--s-3) var(--s-4);
font: inherit; font-size: 16px; /* bez iOS auto-zooma */
color: var(--c-ink); background: #fff;
border: 1.5px solid var(--c-line); border-radius: var(--r-md);
transition: border-color var(--dur) var(--ease);
}
.field textarea { resize: vertical; line-height: 1.55; }
.field input:hover, .field textarea:hover { border-color: #BFC8D0; }
.field input:focus, .field textarea:focus {
border-color: var(--c-blue);
outline: 3px solid rgba(12,124,181,.18); outline-offset: 0;
}
.field input[type="file"] {
width: 100%; padding: var(--s-3);
font-size: 16px; /* 16px i ovdje — inače iOS zumira */
border: 1.5px dashed var(--c-line); border-radius: var(--r-md); background: var(--c-bg-alt);
}
.hint { margin: var(--s-2) 0 0; font-size: var(--t-xs); color: var(--c-muted); }
.err { margin: var(--s-2) 0 0; font-size: var(--t-xs); font-weight: 600; color: var(--c-danger); }
.field.has-error input, .field.has-error textarea { border-color: var(--c-danger); }
.form-foot { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--c-muted); text-align: center; }
/* ==========================================================================
18. FOOTER
========================================================================== */
.site-footer { background: var(--c-blue); color: #fff; padding-top: var(--s-8); }
.footer-grid { display: grid; gap: var(--s-7); }
.footer-name { font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800; text-transform: uppercase; margin: 0 0 2px; }
.footer-sub { font-size: var(--t-sm); color: rgba(255,255,255,.85); margin: 0 0 var(--s-3); }
.footer-nap { font-size: var(--t-sm); color: rgba(255,255,255,.9); line-height: 1.9; margin: 0; }
.footer-nap a { display: inline-flex; align-items: center; min-height: 32px; color: #fff; text-decoration: none; }
.footer-nap a:hover { text-decoration: underline; color: #fff; }
.footer-h { font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 var(--s-3); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-1); }
.footer-nav a { display: inline-flex; align-items: center; min-height: 34px; font-size: var(--t-sm); color: rgba(255,255,255,.88); text-decoration: none; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-cta .footer-sub { margin-bottom: var(--s-4); }
.footer-cta .btn-ghost-light { color: var(--c-blue-darker); }
.footer-hours { margin: var(--s-3) 0 0; font-size: var(--t-xs); color: rgba(255,255,255,.85); text-align: center; }
.footer-gmb { display: inline-block; margin-top: var(--s-3); font-size: var(--t-sm); color: #fff; }
.footer-gmb:hover { color: #fff; text-decoration: underline; }
/* Pravne poveznice — obvezne i moraju biti dostupne sa svake stranice */
.footer-legal {
margin-top: var(--s-8); padding-top: var(--s-4);
border-top: 1px solid rgba(255,255,255,.22);
}
.footer-legal ul {
display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
list-style: none; margin: 0; padding: 0;
}
.footer-legal a {
display: inline-flex; align-items: center; min-height: 34px;
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 600;
color: #fff; text-decoration: underline;
text-underline-offset: 3px;
}
.footer-legal a:hover { color: #fff; text-decoration-thickness: 2px; }
.footer-bottom {
padding-block: var(--s-4);
border-top: 1px solid rgba(255,255,255,.18);
display: grid; gap: var(--s-1);
font-size: var(--t-xs); color: rgba(255,255,255,.85);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #fff; }
/* ==========================================================================
18c. PLUTAJUĆI GUMB ZA POZIV
Stalno vidljiv u donjem desnom kutu. Slojevita dubina (vanjski prsten,
tamnija jezgra, sjaj) daje dojam fizičkog gumba bez ijedne slike.
========================================================================== */
:root {
--c-royal: #2340C4; /* bijelo na njoj: 8.0:1 */
--c-royal-dark: #16299C;
--c-royal-lite: #3A5BE8;
}
.fab {
position: fixed;
right: var(--s-5);
bottom: var(--s-5);
z-index: 95;
display: inline-flex;
align-items: center;
gap: 0;
height: 60px;
padding: 0 7px;
max-width: 60px;
border-radius: 999px;
text-decoration: none;
color: #fff;
background: linear-gradient(180deg, var(--c-royal-lite) 0%, var(--c-royal) 46%, var(--c-royal-dark) 100%);
box-shadow:
0 0 0 1px rgba(10, 20, 80, .55),
0 18px 28px -10px rgba(20, 35, 120, .55),
0 6px 12px -4px rgba(20, 35, 120, .45),
inset 0 1px 0 rgba(255, 255, 255, .38),
inset 0 -2px 4px rgba(0, 0, 0, .28);
overflow: hidden;
transition: max-width 320ms var(--ease),
transform 180ms var(--ease),
box-shadow 180ms var(--ease);
}
/* sjaj po gornjem rubu */
.fab::before {
content: '';
position: absolute; inset: 1px 1px 45%;
border-radius: 999px 999px 60% 60% / 999px 999px 30% 30%;
background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0));
pointer-events: none;
}
.fab-ikona {
flex: none;
display: grid; place-items: center;
width: 46px; height: 46px;
border-radius: 50%;
background: rgba(255, 255, 255, .12);
box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.fab-ikona svg { width: 23px; height: 23px; color: #fff; }
/* broj se otkriva na hover i fokus */
.fab-txt {
/* Boja stoji na samom tekstu, ne nasljeduje se s . Opce pravilo
`a:hover` cilja poveznicu, a ne njezine potomke, pa ovo ne moze biti
pregazeno bez obzira na redoslijed i specificnost u ostatku stila. */
color: #fff;
font-family: var(--f-head);
font-size: var(--t-sm);
font-weight: 700;
white-space: nowrap;
opacity: 0;
padding-right: var(--s-2);
transition: opacity 200ms var(--ease);
}
.fab:hover,
.fab:focus-visible {
/* Bez ovoga opce pravilo `a:hover` (specificnost 0,1,1) pobjeduje nad
`.fab` (0,1,0) i broj i ikona poplave tamnoplavo na plavoj podlozi. */
color: #fff;
max-width: 260px;
transform: translateY(-2px);
box-shadow:
0 0 0 1px rgba(10, 20, 80, .6),
0 22px 34px -10px rgba(20, 35, 120, .6),
0 8px 16px -4px rgba(20, 35, 120, .5),
inset 0 1px 0 rgba(255, 255, 255, .45),
inset 0 -2px 4px rgba(0, 0, 0, .28);
}
.fab:hover .fab-txt,
.fab:focus-visible .fab-txt { opacity: 1; padding-left: var(--s-2); }
.fab:active {
transform: translateY(1px) scale(.98);
box-shadow:
0 0 0 1px rgba(10, 20, 80, .6),
0 4px 8px -2px rgba(20, 35, 120, .5),
inset 0 2px 5px rgba(0, 0, 0, .4);
}
.fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* mreškanje na dodir */
.fab-val {
position: absolute;
width: 18px; height: 18px;
margin: -9px 0 0 -9px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%);
pointer-events: none;
animation: fab-val 600ms ease-out forwards;
}
@keyframes fab-val {
from { transform: scale(0); opacity: .7; }
to { transform: scale(7); opacity: 0; }
}
/* Na mobitelu već postoji ljepljiva traka s pozivom — dva gumba za isto
bi se preklapala i natjecala, pa se plutajući skriva. */
@media (max-width: 767px) {
.fab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.fab { transition: none; }
.fab-val { display: none; }
}
/* ==========================================================================
19. MOBILNA TRAKA
========================================================================== */
.mobile-bar {
position: fixed; left: 0; right: 0; bottom: 0;
z-index: var(--z-mobilebar);
display: none; gap: var(--s-2);
padding: var(--s-2) var(--s-3);
padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
background: #fff; border-top: 1px solid var(--c-line);
box-shadow: 0 -2px 12px rgba(22,25,29,.1);
}
.mobile-bar a {
flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
min-height: 48px;
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700;
border-radius: var(--r-md); text-decoration: none;
}
.mb-call { background: var(--c-blue); color: #fff; }
.mb-call:hover { background: var(--c-blue-dark); color: #fff; }
.mb-quote { background: transparent; color: var(--c-blue-text); border: 2px solid var(--c-blue); }
/* ==========================================================================
20. BREAKPOINTS
========================================================================== */
/* --- do 767px --- */
@media (max-width: 767px) {
html { scroll-padding-top: 78px; }
.topbar { display: none; } /* na mobitelu je traka šum */
.header-inner { min-height: 64px; position: relative; }
.brand-mark { width: 38px; height: 38px; }
.brand-text strong { font-size: 1.05rem; }
.brand-text small { display: none; }
/* Telefon ostaje ikona; tekst se skriva VIZUALNO, ne display:none,
inače link ostane bez pristupačnog naziva. */
.header-tel { min-height: var(--tap); width: var(--tap); padding: 0; justify-content: center; }
.header-tel-txt {
position: absolute; width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.nav-toggle { display: grid; }
.navband { background: #fff; border-bottom: 1px solid var(--c-line); }
.navband .wrap { padding: 0; }
.nav { display: none; }
.nav.is-open { display: block; }
.nav ul { flex-direction: column; align-items: stretch; }
.nav li + li { border-top: 1px solid var(--c-line-2); }
.nav a {
min-height: 50px; width: 100%;
padding-inline: var(--s-4);
color: var(--c-ink); font-size: var(--t-base);
}
.nav li:first-child a { padding-left: var(--s-4); }
.nav li:first-child a:hover { padding-left: var(--s-4); margin-left: 0; }
.hero-inner { min-height: 380px; }
.hero-panel { padding: var(--s-5); }
.hero-panel::after { outline-offset: -10px; outline-width: 4px; }
.mobile-bar { display: flex; }
body { padding-bottom: 72px; }
/* --- Uštede prostora na mobitelu ---
Stranica je bila 31 ekran duga; ovo je vraća na razumnu duljinu,
bez uklanjanja ijednog sadržaja. */
.section { padding-block: var(--s-7); } /* 64px -> 40px */
.section-head { margin-bottom: var(--s-5); }
/* Hero je zauzimao cijeli prvi ekran prije nego što se išta pročita */
/* Razmak i gore i dolje — s nulom je panel dodirivao traku ispod */
.hero-inner { min-height: 300px; padding-block: var(--s-7); }
.hero-panel { padding: var(--s-5) var(--s-4) var(--s-5); }
.hero-panel::after { outline-width: 3px; outline-offset: -7px; }
/* Manji naslov: na 34px je zauzimao tri retka */
.hero-panel h1 { font-size: 1.75rem; line-height: 1.15; margin-bottom: var(--s-3); }
.hero-panel .lead { font-size: var(--t-sm); line-height: 1.55; }
.hero-panel .eyebrow { font-size: 12px; letter-spacing: .08em; }
/* Gumbi jedan pored drugog umjesto dva puna retka */
.hero-cta { margin-top: var(--s-5); gap: var(--s-2); flex-wrap: nowrap; }
.hero-cta .btn {
flex: 1 1 0;
min-width: 0;
min-height: 48px;
padding: var(--s-2) var(--s-3);
font-size: var(--t-sm);
line-height: 1.2;
text-align: center;
}
/* ikona bi na tijesnom gumbu pojela pola širine */
.hero-cta .btn svg { display: none; }
/* skraćuje „Zatražite besplatnu ponudu" u „Zatražite ponudu" */
.bez-mob { display: none; }
.hero-note { margin-top: var(--s-4); font-size: var(--t-xs); }
/* Traka podataka: tri stupca umjesto tri reda */
.hero-bar-grid { grid-template-columns: repeat(3, 1fr); }
.hero-bar-item { padding: var(--s-3) var(--s-2); text-align: center; }
.hero-bar-label { font-size: 11px; letter-spacing: .05em; }
.hero-bar-value { font-size: var(--t-sm); }
a.hero-bar-value { justify-content: center; }
.hero-bar-sub { display: none; } /* detalj, ne nosi odluku */
/* Ukrasni pomaknuti okvir je na malom ekranu samo šum */
.okvir::after { display: none; }
/* Mozaik: niže pločice */
.mo-tall { aspect-ratio: 1 / 1; }
.mo-wide { aspect-ratio: 16 / 9; }
/* Vodič: uži razmaci unutar sklopljenih odjeljaka */
.lf-acc-item > summary { padding-block: var(--s-4); }
.lf-head { margin-bottom: var(--s-5); }
.lf-cta { margin-top: var(--s-6); padding: var(--s-5); }
/* Brojke: kompaktnije */
.stats-grid { padding-block: var(--s-5); gap: var(--s-4) var(--s-3); }
.stat strong { font-size: var(--t-xl); }
.stat span { font-size: var(--t-xs); }
/* Blokovi usluga i kontakta */
.usl-split { gap: var(--s-6); }
.ct-title { margin-bottom: var(--s-3); }
.ct-sub { margin-bottom: var(--s-5); }
.ct-card { padding: var(--s-5); }
.cmp { aspect-ratio: 4 / 5; } /* niže od 3:4 */
/* Prije i poslije ostaju JEDNO PORED DRUGOG i na mobitelu.
Kad su jedno ispod drugog, na ekran stane samo jedna slika pa se
usporedba gubi — a usporedba je cijela poanta ovog bloka. */
.ga-pair { grid-template-columns: 1fr 1fr; }
.ga-tag { font-size: 11px; padding: 4px var(--s-2); }
/* --- Citljivost i dodirne mete na mobitelu --- */
/* Verzalne oznake ispod 11px na telefonu se ne citaju. */
.cmp-oznaka, .post-chip { font-size: 11.5px; }
/* Tekst u karticama i odgovorima ide na 16px. Ispod toga citanje na
telefonu postaje naporno, a 15px je bio nasljeden s desktopa. */
.card p, .faq-body, .faq-body p, .acc-body, .acc-body p, .acc-body li,
.usl-item p, .svcx p, .rc-text, .side-name, .post-meta,
.article-body p, .article-body li, .tldr p, .odgovor {
font-size: 1rem;
}
/* Logo je dodirna meta, ne samo ukras. */
.brand { min-height: var(--tap); }
.footer-gmb { padding-block: 10px; }
.areas li { min-height: 36px; display: inline-flex; align-items: center; }
}
/* Gumb za razotkrivanje ostatka dugog popisa na telefonu.
Skriva se sam kad ekran nije uzak - JS mu postavlja hidden. */
.vise-btn {
display: block; width: 100%;
margin-top: var(--s-4);
padding: 12px var(--s-4); min-height: var(--tap);
background: #fff; color: var(--c-blue-text);
border: 1px solid var(--c-blue); border-radius: var(--r-md);
font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm);
cursor: pointer;
}
.vise-btn:hover { background: var(--c-blue-50); }
.vise-btn[hidden] { display: none; }
/* --- od 560px --- */
/* Sedam stavki u izborniku ne stane u jedan red izmedu 768 i 819 px.
Ispod 768 je hamburger, od 820 ima mjesta; u tom pojasu se stisnu samo
razmaci. Prije dodavanja Bloga stavki je bilo sest i stale su. */
@media (min-width: 768px) and (max-width: 819px) {
.nav a { padding-inline: var(--s-3); letter-spacing: .02em; }
}
@media (min-width: 560px) {
.stats-grid { grid-template-columns: repeat(4, 1fr); }
.hero-bar-grid { grid-template-columns: repeat(3, 1fr); }
.footer-bottom { grid-template-columns: 1fr auto; align-items: center; }
}
/* --- od 768px --- */
@media (min-width: 768px) {
:root { --t-3xl: 2.5rem; --t-2xl: 2rem; }
.section { padding-block: var(--s-10); }
.cards { grid-template-columns: repeat(2, 1fr); }
.feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-6) var(--s-7); }
.reviews { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--s-8); }
/* Mozaik: velika lijevo, dvije složene desno — kao u referenci.
Visinu redova određuje omjer .mo-wide, a velika pločica preuzima
zbroj oba reda. Ne ovisi ni o jednoj slici. */
.mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
/* Visinu redova smiju određivati SAMO .mo-wide (preko svog omjera).
height:0 izbacuje veliku pločicu iz tog računa, a min-height:100%
je zatim rastegne preko oba reda. Bez ovoga njezina slika gura
redove više nego što .mo-wide traži, pa stupci ne završe u ravnini. */
.mo-1 { grid-row: span 2; aspect-ratio: auto; height: 0; min-height: 100%; }
}
/* --- od 1024px --- */
@media (min-width: 1024px) {
:root { --t-3xl: 3rem; }
.wrap { padding-inline: var(--s-6); }
.cards { grid-template-columns: repeat(3, 1fr); }
.feature-grid { grid-template-columns: repeat(3, 1fr); }
.reviews { grid-template-columns: repeat(4, 1fr); }
.contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: start; }
.hero-inner { min-height: 540px; }
}
/* ==========================================================================
18a. PODSTRANICE (usluge, radovi, cjenik, galerija, recenzije, kontakt)
========================================================================== */
/* Aktivna stavka u navigaciji */
.nav a[aria-current="page"] {
background: var(--c-blue);
color: #fff;
}
/* Zaglavlje podstranice */
.page-hero {
background: var(--c-nav);
color: #fff;
padding-block: var(--s-8);
background-image: linear-gradient(180deg, rgba(12,124,181,.22) 0%, rgba(28,31,35,0) 100%);
}
/* Na stranici clanka zaglavlje se poravnava s tekstom ispod (790px),
inace naslov krece 200px lijevo od prvog odlomka. */
.page-hero-clanak .wrap > * { max-width: 790px; margin-inline: auto; }
.page-hero h1 { color: #fff; margin-bottom: var(--s-3); }
.page-hero .lead { color: rgba(255,255,255,.86); }
.page-hero .crumbs { color: rgba(255,255,255,.72); }
.page-hero .crumbs a { color: rgba(255,255,255,.92); }
.page-hero .crumbs a:hover { color: #fff; }
/* Sadržaj podstranice */
.prose { max-width: 74ch; }
.prose h2 {
font-size: var(--t-2xl);
margin-top: var(--s-9);
margin-bottom: var(--s-4);
padding-top: var(--s-6);
border-top: 2px solid var(--c-line);
}
.prose h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--t-lg); margin-top: var(--s-6); margin-bottom: var(--s-2); }
.prose h4 { font-size: var(--t-base); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose p, .prose li { color: var(--c-ink-soft); }
.prose ul, .prose ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.prose li { margin-bottom: var(--s-2); }
.prose strong { color: var(--c-ink); }
/* Istaknuti okvir unutar teksta podstranice */
.prose-note {
background: var(--c-blue-50);
border-left: 4px solid var(--c-blue);
padding: var(--s-4) var(--s-5);
margin: 0 0 var(--s-5);
font-size: var(--t-sm);
}
.prose-note p { margin-bottom: var(--s-2); color: var(--c-ink); }
.prose-note p:last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------
Komponente podstranica — preuzimaju jezik naslovnice (kartice, ikone,
plave plohe, tablice), da podstranice ne izgledaju kao goli tekst.
-------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
Blok usluge s harmonikom + slikom (po uzoru na referentni predložak):
tekst i popis s jedne strane, slika s druge, naizmjenično.
-------------------------------------------------------------------------- */
.svcx { display: grid; gap: var(--s-6); margin-bottom: var(--s-10); }
.svcx:last-child { margin-bottom: 0; }
.svcx-head h2 { margin: 0 0 var(--s-2); padding: 0; border: 0; font-size: var(--t-2xl); }
.svcx-head p { color: var(--c-muted); font-size: var(--t-sm); max-width: 46ch; margin-bottom: var(--s-5); }
/* harmonika */
.acc { border-top: 1px solid var(--c-line); }
.acc-item { border-bottom: 1px solid var(--c-line); }
.acc-item summary {
display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
min-height: 56px; padding: var(--s-3) 0;
font-family: var(--f-head); font-size: var(--t-base); font-weight: 600;
color: var(--c-ink); cursor: pointer; list-style: none;
}
.acc-item summary::-webkit-details-marker { display: none; }
.acc-item summary::after {
content: ''; flex: none;
width: 9px; height: 9px;
border-right: 2px solid var(--c-muted);
border-bottom: 2px solid var(--c-muted);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.acc-item[open] summary::after { transform: rotate(-135deg) translateY(-2px); border-color: var(--c-blue); }
.acc-item summary:hover { color: var(--c-blue-text); }
.acc-item[open] summary { color: var(--c-blue-text); }
.acc-body { padding: 0 0 var(--s-4); color: var(--c-muted); font-size: var(--t-sm); max-width: 52ch; }
.acc-body p { margin-bottom: var(--s-3); }
.acc-body p:last-child { margin-bottom: 0; }
.acc-body ul { margin: 0; padding-left: var(--s-5); }
.acc-body li { margin-bottom: var(--s-1); }
/* Slika s pomaknutim okvirom, kao u referenci.
Položaj okvira se mijenja po slici (klase --br / --bl / --tr / --tl),
da se ne ponavlja isti raspored kroz cijelu stranicu. */
.svcx-media, .space-media { position: relative; }
.svcx-media img {
width: 100%; display: block;
border: 2px solid var(--c-blue);
aspect-ratio: 4 / 3; object-fit: cover;
}
.okvir::after {
content: ''; position: absolute;
width: 46%; height: 46%;
border: 2px solid var(--c-blue);
pointer-events: none;
}
.okvir-br::after { right: -10px; bottom: -10px; } /* dolje desno */
.okvir-bl::after { left: -10px; bottom: -10px; } /* dolje lijevo */
.okvir-tr::after { right: -10px; top: -10px; } /* gore desno */
.okvir-tl::after { left: -10px; top: -10px; } /* gore lijevo */
/* Na uskom ekranu okvir se povlači bliže, da ne strši izvan sadržaja */
@media (max-width: 560px) {
.okvir::after { width: 40%; height: 40%; }
.okvir-br::after { right: -6px; bottom: -6px; }
.okvir-bl::after { left: -6px; bottom: -6px; }
.okvir-tr::after { right: -6px; top: -6px; }
.okvir-tl::after { left: -6px; top: -6px; }
}
@media (min-width: 900px) {
.svcx { grid-template-columns: 1fr 1.05fr; align-items: center; gap: var(--s-8); }
.svcx-rev .svcx-media { order: -1; }
}
/* --- Blok usluge (kartica s ikonom) --- */
.svc {
background: #fff;
border: 1px solid var(--c-line);
border-top: 3px solid var(--c-blue);
padding: var(--s-5);
margin-bottom: var(--s-5);
}
.svc:last-child { margin-bottom: 0; }
.svc-head { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-4); }
.svc-icon {
flex: none; display: grid; place-items: center;
width: 52px; height: 52px;
background: var(--c-blue-50); color: var(--c-blue-text);
border-radius: var(--r-md);
}
.svc-icon svg { width: 27px; height: 27px; }
.svc-head h2 {
font-size: var(--t-xl);
margin: 0 0 2px;
padding: 0; border: 0;
}
.svc-sub { font-size: var(--t-sm); color: var(--c-muted); margin: 0; }
.svc-body p { margin-bottom: var(--s-3); }
.svc-body p:last-child { margin-bottom: 0; }
/* Traka s podacima na dnu bloka usluge */
.svc-meta {
display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5);
margin-top: var(--s-4); padding-top: var(--s-4);
border-top: 1px solid var(--c-line-2);
}
.svc-meta span { font-size: var(--t-sm); color: var(--c-muted); }
.svc-meta strong {
display: block;
font-family: var(--f-head); font-size: var(--t-xs);
letter-spacing: .08em; text-transform: uppercase;
color: var(--c-blue-text);
}
/* --- Popis s kvačicama --- */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--s-4); }
.checklist li {
position: relative;
padding-left: 30px;
margin-bottom: var(--s-2);
color: var(--c-ink-soft);
}
.checklist li::before {
content: '';
position: absolute; left: 4px; top: .55em;
width: 11px; height: 6px;
border-left: 2.5px solid var(--c-blue);
border-bottom: 2.5px solid var(--c-blue);
transform: rotate(-45deg);
}
/* Varijanta za upozorenja / čega se kloniti */
.checklist-x li::before {
content: '×';
border: 0; transform: none;
left: 6px; top: 0;
width: auto; height: auto;
font-size: 1.2em; font-weight: 700; line-height: 1.5;
color: var(--c-danger);
}
/* --- Kartica s izračunom (cjenik) --- */
.calc {
background: #fff;
border: 1px solid var(--c-line);
margin-bottom: var(--s-5);
}
.calc-head {
background: var(--c-nav); color: #fff;
padding: var(--s-4) var(--s-5);
}
.calc-head h3 { color: #fff; margin: 0 0 2px; font-size: var(--t-lg); }
.calc-head p { margin: 0; font-size: var(--t-sm); color: rgba(255,255,255,.75); }
.calc-rows { list-style: none; margin: 0; padding: 0; }
.calc-rows li {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s-4);
padding: var(--s-3) var(--s-5);
border-bottom: 1px solid var(--c-line-2);
font-size: var(--t-sm);
}
.calc-rows li span { color: var(--c-ink-soft); }
.calc-rows li b {
font-family: var(--f-head); font-weight: 700;
color: var(--c-ink); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.calc-total {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s-4);
margin: 0; padding: var(--s-4) var(--s-5);
background: var(--c-blue-50);
}
.calc-total span { font-family: var(--f-head); font-weight: 700; color: var(--c-ink); }
.calc-total b {
font-family: var(--f-head); font-size: var(--t-lg); font-weight: 800;
color: var(--c-blue-text); white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.calc-note { padding: 0 var(--s-5) var(--s-4); margin: 0; font-size: var(--t-xs); color: var(--c-muted); }
/* --- Prostor: slika + tekst, naizmjenično --- */
.space { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
.space:last-child { margin-bottom: 0; }
.space-media { background: var(--c-bg-alt); }
.space-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
border: 2px solid var(--c-blue);
}
.space-body h2 { margin-top: 0; padding-top: 0; border-top: 0; }
/* --- Mali okvir s činjenicom --- */
.factbox {
display: grid; gap: 1px;
background: var(--c-line);
border: 1px solid var(--c-line);
margin: 0 0 var(--s-5);
}
.factbox div { background: #fff; padding: var(--s-4) var(--s-5); }
.factbox dt {
font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700;
letter-spacing: .08em; text-transform: uppercase;
color: var(--c-blue-text); margin-bottom: 2px;
}
.factbox dd { margin: 0; font-size: var(--t-sm); color: var(--c-ink-soft); }
@media (min-width: 640px) {
.factbox { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
.space { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--s-7); }
.space-media { aspect-ratio: 4 / 3; }
.space-rev .space-media { order: 2; }
}
/* --------------------------------------------------------------------------
Kontakt — podijeljeni raspored: naslov i načini javljanja lijevo,
izdignuta kartica s obrascem desno.
-------------------------------------------------------------------------- */
.ct { background: var(--c-bg-alt); }
.ct-split { display: grid; gap: var(--s-7); align-items: start; }
.ct-title {
font-size: clamp(2.25rem, 6vw, 3.5rem);
line-height: 1.05;
margin-bottom: var(--s-4);
}
.ct-sub {
font-family: var(--f-head); font-size: var(--t-lg); font-weight: 700;
color: var(--c-ink-soft); margin-bottom: var(--s-6); max-width: 22ch;
}
/* Kartice s načinima javljanja */
.ct-methods { display: grid; gap: var(--s-3); margin-bottom: var(--s-6); }
.ct-method {
display: flex; align-items: center; gap: var(--s-4);
padding: var(--s-4);
background: #fff;
border: 1px solid var(--c-line);
text-decoration: none;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.ct-method:hover { border-color: var(--c-blue); box-shadow: var(--shadow-md); }
.ct-method-icon {
flex: none; display: grid; place-items: center;
width: 46px; height: 46px;
background: var(--c-blue-50); color: var(--c-blue-text);
border-radius: var(--r-md);
}
.ct-method-icon svg { width: 22px; height: 22px; }
.ct-method-txt { flex: 1; min-width: 0; }
.ct-method-txt small {
display: block; font-size: var(--t-xs); color: var(--c-muted); margin-bottom: 1px;
}
.ct-method-txt strong {
display: block; font-family: var(--f-head); font-size: var(--t-base);
font-weight: 700; color: var(--c-ink);
overflow-wrap: anywhere;
}
.ct-method-go {
flex: none; display: grid; place-items: center;
width: 38px; height: 38px;
border: 1px solid var(--c-line); border-radius: var(--r-md);
color: var(--c-blue-text);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ct-method:hover .ct-method-go { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.ct-method-go svg { width: 17px; height: 17px; }
/* Radno vrijeme kao statična kartica */
.ct-method-static { cursor: default; }
.ct-method-static:hover { border-color: var(--c-line); box-shadow: none; }
/* Društvene mreže */
.ct-social { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.ct-social-label {
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700;
color: var(--c-ink-soft); max-width: 5ch; line-height: 1.15;
}
.ct-social a {
display: grid; place-items: center;
width: 42px; height: 42px;
background: #fff; border: 1px solid var(--c-line);
color: var(--c-ink-soft);
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ct-social a:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }
.ct-social svg { width: 19px; height: 19px; }
/* Kartica s obrascem */
.ct-card {
background: #fff;
border: 1px solid var(--c-line);
border-radius: var(--r-lg);
padding: var(--s-6);
box-shadow: var(--shadow-lg);
}
.ct-card h2 { font-size: var(--t-2xl); margin: 0 0 var(--s-5); padding: 0; border: 0; }
/* Dva polja u redu */
.form-row { display: grid; gap: 0 var(--s-4); }
@media (min-width: 520px) {
.form-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
.ct-split { grid-template-columns: 1fr 1.08fr; gap: var(--s-9); }
.ct-card { padding: var(--s-7); }
}
/* --------------------------------------------------------------------------
Traka s pozivom unutar stranice (npr. „pogledajte cijene")
-------------------------------------------------------------------------- */
.inline-cta {
display: grid; gap: var(--s-4);
padding: var(--s-6);
background: var(--c-nav);
color: #fff;
border-left: 4px solid var(--c-blue-bright);
}
.inline-cta h2 {
color: #fff; margin: 0 0 var(--s-2);
padding: 0; border: 0;
font-size: var(--t-xl);
}
.inline-cta p { color: rgba(255,255,255,.82); margin: 0; font-size: var(--t-sm); max-width: 56ch; }
.inline-cta .btn-ghost-light { color: var(--c-blue-darker); }
.inline-cta-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (min-width: 820px) {
.inline-cta {
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--s-6);
padding: var(--s-7);
}
}
/* --------------------------------------------------------------------------
BLOG — popis članaka
Tekst stoji preko fotografije, pa svaka kartica ima jak preljev prema dnu;
bez njega bijeli naslov na svijetloj slici padne ispod praga čitljivosti.
-------------------------------------------------------------------------- */
.blog-layout { display: grid; gap: var(--s-8); align-items: start; }
.post-grid { display: grid; gap: var(--s-5); }
/* Kartica je jedna velika poveznica — cijela ploha je dodirna meta */
.post-card {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--c-bg-alt);
border: 1px solid var(--c-line);
text-decoration: none;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.post-card:focus-visible { outline: 3px solid var(--c-blue); outline-offset: 3px; }
.post-card img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transition: transform 500ms var(--ease);
}
.post-card:hover img { transform: scale(1.05); }
/* Preljev: bez njega tekst preko svijetle fotografije nije čitljiv */
.post-card::after {
content: '';
position: absolute; inset: 0;
/* Bijeli tekst leži na fotografiji koja može biti svijetla (bijele pločice).
Bez ovog preljeva kontrast pada ispod praga. Srednji zaustavnik je tamo
gdje počinje naslov, pa se u najgorem slučaju dobiva oko 6.5:1. */
background: linear-gradient(180deg,
rgba(10,12,15,0) 24%,
rgba(10,12,15,.66) 52%,
rgba(10,12,15,.94) 100%);
}
.post-body {
position: absolute; z-index: 1;
left: 0; right: 0; bottom: 0;
padding: var(--s-5);
}
.post-chip {
display: inline-block;
margin-bottom: var(--s-3);
padding: 4px var(--s-3);
background: #fff; color: var(--c-ink);
font-family: var(--f-head); font-size: 11px; font-weight: 700;
letter-spacing: .06em; text-transform: uppercase;
}
.post-title {
margin: 0 0 var(--s-2);
font-family: var(--f-head); font-size: var(--t-lg); font-weight: 700;
line-height: 1.25; color: #fff;
/* najviše tri retka - inače tekstualni blok pojede fotografiju */
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.post-excerpt {
font-size: var(--t-sm); line-height: 1.5;
color: rgba(255,255,255,.88);
margin: 0 0 var(--s-3);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.post-meta {
font-size: var(--t-xs);
color: rgba(255,255,255,.72);
margin: 0;
}
/* --- Bočni stupac: Izdvojeno / Najnovije --- */
.side-block { margin-bottom: var(--s-7); }
.side-block:last-child { margin-bottom: 0; }
.side-head {
display: flex; align-items: center; gap: var(--s-4);
margin-bottom: var(--s-4);
}
.side-head h2 { font-size: var(--t-lg); margin: 0; white-space: nowrap; }
.side-head::after { content: ''; flex: 1; height: 1px; background: var(--c-line); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.side-item { position: relative; display: flex; gap: var(--s-4); align-items: flex-start; }
.side-thumb {
flex: none;
width: 72px; aspect-ratio: 1;
overflow: hidden;
background: var(--c-bg-alt);
border: 1px solid var(--c-line);
}
.side-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-txt { min-width: 0; }
.side-date { display: block; font-size: var(--t-xs); color: var(--c-muted); margin-bottom: 2px; }
.side-name {
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700;
line-height: 1.3; color: var(--c-ink);
text-decoration: none;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.side-name:hover { color: var(--c-blue-text); }
/* Cijeli redak je klikabilan - sam tekst poveznice je nizi od 24px,
sto ne bi zadovoljilo WCAG 2.2 (2.5.8 Target Size Minimum). */
.side-name::after { content: ''; position: absolute; inset: 0; }
.side-item:has(.side-name:focus-visible) { outline: 3px solid var(--c-blue); outline-offset: 3px; }
/* --- Pojedinačni članak --- */
.article-meta {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
margin-top: var(--s-4);
font-size: var(--t-sm); color: rgba(255,255,255,.78);
}
.article-meta .post-chip { margin: 0; }
.article-cover {
margin: 0 0 var(--s-7);
border: 2px solid var(--c-blue);
}
/* Naslovne slike su izrezane na 3:2 (1320x880). Okvir od 16:9 bi ih rezao
jos jednom i bacio 17% visine bez razloga. */
.article-cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.article-cover figcaption {
padding: var(--s-3) var(--s-4);
font-size: var(--t-xs); color: var(--c-muted);
background: var(--c-bg-alt);
}
/* Sredinom stranice, ne uz lijevi rub. Bez margin-inline stupac se lijepi
za lijevu stranu .wrapa, sto na sirokom ekranu izgleda kao greska.
790px pri 17px daje oko 80 znakova u retku - siri od idealnih 65-75,
ali stupac od 606px na 1440px ekranu djelovao je pretanko. */
.article-body { max-width: 790px; margin-inline: auto; }
/* --- Brzi odgovor (BLUF) --- */
/* Glavni odgovor stoji u prvih 200 rijeci, u vlastitom okviru. AI sustavi
biraju odlomke, ne stranice, pa odlomak mora imati smisla izvan konteksta. */
.tldr {
margin: 0 0 var(--s-7);
padding: var(--s-5) var(--s-6);
background: var(--c-blue-50);
border-left: 4px solid var(--c-blue);
}
.tldr-oznaka {
display: block; margin-bottom: var(--s-2);
font-family: var(--f-head); font-size: var(--t-xs); font-weight: 700;
text-transform: uppercase; letter-spacing: .08em; color: var(--c-blue-text);
}
.tldr p { margin: 0 0 var(--s-3); font-size: var(--t-md); }
.tldr p:last-child { margin-bottom: 0; }
/* --- Potpis i datumi --- */
.byline {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4);
margin: 0 0 var(--s-6); padding-bottom: var(--s-4);
border-bottom: 1px solid var(--c-line);
font-size: var(--t-xs); color: var(--c-muted);
}
.byline strong { color: var(--c-ink); font-weight: 600; }
/* --- Sadrzaj clanka --- */
.article-toc {
margin: 0 0 var(--s-7);
padding: var(--s-5) var(--s-6);
background: var(--c-bg-alt);
border: 1px solid var(--c-line);
}
.article-toc h2 {
margin: 0 0 var(--s-3);
font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em;
color: var(--c-muted);
}
.article-toc ol { margin: 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.article-toc a { color: var(--c-blue-text); text-decoration: none; font-weight: 600; }
.article-toc a:hover { text-decoration: underline; }
/* --- Izravan odgovor odmah nakon H2 --- */
/* Passage ranking: svaki odjeljak pocinje odgovorom od 40-70 rijeci koji
se moze izvuci sam za sebe. */
.odgovor {
margin-bottom: var(--s-4);
padding-left: var(--s-4);
border-left: 3px solid var(--c-blue-100);
font-size: var(--t-md);
color: var(--c-ink);
}
.article-body h2 { scroll-margin-top: 120px; }
.article-body h3 { scroll-margin-top: 120px; }
.article-body .price-table-wrap { margin: var(--s-6) 0; }
/* U cjeniku je opis rada , a cijena | s nowrapom. U clancima tablice
imaju i duze celije u ostalim stupcima, pa se nowrap mora ukinuti. */
/* U cjeniku je desni stupac uvijek cijena, pa je desno poravnat, podebljan
i plav. U clancima su to obicni tekstovi ("usporedivost i kontrola opsega"),
pa se to poravnanje i naglasak moraju ponistiti. */
.article-body .price-table td {
white-space: normal;
text-align: left;
font-family: var(--f-body); font-weight: 400;
color: var(--c-ink-soft);
}
.article-body .price-table thead th:last-child { text-align: left; }
/* Iznosi ostaju istaknuti - prepoznaju se po znaku eura ili postotku. */
.article-body .price-table td.iznos {
text-align: right; white-space: nowrap;
font-family: var(--f-head); font-weight: 700; color: var(--c-blue-text);
font-variant-numeric: tabular-nums;
}
.article-body .price-table thead th.iznos { text-align: right; }
.article-body .price-table caption {
padding: var(--s-3) var(--s-5);
font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm);
text-align: left; color: var(--c-ink);
background: var(--c-bg-alt); border-bottom: 1px solid var(--c-line);
}
.article-body .faq { margin-top: var(--s-5); }
.izvor {
margin-top: var(--s-6);
font-size: var(--t-xs); color: var(--c-muted);
}
/* Prethodni / sljedeci clanak */
.post-nav {
display: grid; gap: var(--s-4);
margin-top: var(--s-8);
padding-top: var(--s-6);
border-top: 1px solid var(--c-line);
}
.pn-link {
display: block;
padding: var(--s-4) var(--s-5);
background: var(--c-bg-alt);
border: 1px solid var(--c-line);
border-left: 3px solid var(--c-blue);
text-decoration: none;
}
.pn-link:hover { border-left-color: var(--c-blue-bright); background: #fff; }
.pn-oznaka {
display: block; margin-bottom: 2px;
font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
color: var(--c-muted);
}
.pn-naslov {
display: block;
font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm);
line-height: 1.3; color: var(--c-ink);
}
.pn-next { text-align: right; border-left: 1px solid var(--c-line); border-right: 3px solid var(--c-blue); }
.pn-next:hover { border-right-color: var(--c-blue-bright); }
.back-link { margin-top: var(--s-6); }
.back-link a { font-weight: 600; color: var(--c-blue-text); }
@media (min-width: 700px) {
.post-nav { grid-template-columns: 1fr 1fr; }
.pn-next:only-child { grid-column: 2; }
}
.article-body h2 {
font-size: var(--t-2xl);
margin-top: var(--s-8); margin-bottom: var(--s-3);
padding-top: var(--s-5); border-top: 1px solid var(--c-line);
}
.article-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.article-body h3 { font-size: var(--t-lg); margin-top: var(--s-6); margin-bottom: var(--s-2); }
.article-body p, .article-body li { color: var(--c-ink-soft); }
.article-body ul, .article-body ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.article-body li { margin-bottom: var(--s-2); }
.article-body strong { color: var(--c-ink); }
.article-body img { width: 100%; height: auto; margin: var(--s-5) 0; border: 1px solid var(--c-line); }
@media (min-width: 700px) {
.post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
.blog-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-9); }
.blog-side { position: sticky; top: 190px; }
}
/* Poveznice na ostale stranice — za međusobno povezivanje i indeksiranje */
.crosslinks { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); }
.crosslinks h2 { font-size: var(--t-xl); margin-bottom: var(--s-5); }
.cl-grid { display: grid; gap: var(--s-3); }
.cl-card {
display: block;
background: #fff;
border: 1px solid var(--c-line);
border-left: 3px solid var(--c-blue);
padding: var(--s-4) var(--s-5);
text-decoration: none;
transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cl-card strong {
display: block;
font-family: var(--f-head); font-size: var(--t-base); font-weight: 700;
color: var(--c-ink); margin-bottom: 2px;
}
.cl-card span { display: block; font-size: var(--t-sm); color: var(--c-muted); }
.cl-card:hover strong { color: var(--c-blue-text); }
/* Traka s pozivom na dnu podstranice */
.page-cta { background: var(--c-blue); color: #fff; }
.page-cta .wrap { padding-block: var(--s-8); text-align: center; }
.page-cta h2 { color: #fff; margin-bottom: var(--s-3); }
.page-cta p { color: rgba(255,255,255,.9); max-width: 52ch; margin-inline: auto; margin-bottom: var(--s-6); }
.page-cta .btn-ghost-light { color: var(--c-blue-darker); }
/* Poveznica „više o tome" ispod sekcije na naslovnici */
.more-link {
display: inline-flex; align-items: center; gap: var(--s-2);
min-height: var(--tap);
font-family: var(--f-head); font-size: var(--t-sm); font-weight: 700;
color: var(--c-blue-text); text-decoration: none;
}
.more-link:hover { color: var(--c-blue-dark); text-decoration: underline; }
.more-link::after { content: '→'; font-size: 1.1em; line-height: 1; }
@media (min-width: 640px) {
.cl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.cl-grid { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
18b. DUGAČKI TEKST NA DNU (SEO / vodič)
Namjerno na dnu, ispod kontakta, da ne stoji na putu konverziji.
========================================================================== */
.longform { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); }
.longform .wrap { max-width: 860px; }
.lf-head { text-align: center; margin-bottom: var(--s-8); }
.lf-head h2 { margin-bottom: var(--s-3); }
.lf-head p { color: var(--c-muted); max-width: 62ch; margin-inline: auto; }
.lf-body { max-width: 72ch; margin-inline: auto; }
.lf-body h3 {
font-size: var(--t-xl);
margin: 0;
}
/* Vodič u sklopivim odjeljcima.
U HTML-u su otvoreni, pa desktop i preglednik bez JS-a vide cijeli tekst.
JS ih zatvara samo na uskom ekranu — bez toga je vodič na mobitelu
12.000 px, gotovo polovica cijele stranice. */
/* Poveznica iz vodica na cijeli clanak. Vodic daje sazetak, clanak razradu -
tako preklapanje tema postaje interno povezivanje umjesto dvostrukog sadrzaja. */
.lf-vise { margin-top: var(--s-4); }
.lf-vise a {
display: inline-block; padding: 6px 0;
font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm);
color: var(--c-blue-text); text-decoration: none;
}
.lf-vise a:hover { text-decoration: underline; }
.lf-acc-item { border-top: 1px solid var(--c-line); }
.lf-acc-item:last-child { border-bottom: 1px solid var(--c-line); }
.lf-acc-item > summary {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4);
padding: var(--s-5) 0;
cursor: pointer;
list-style: none;
}
.lf-acc-item > summary::-webkit-details-marker { display: none; }
.lf-acc-item > summary::after {
content: ''; flex: none;
width: 10px; height: 10px;
border-right: 2px solid var(--c-blue);
border-bottom: 2px solid var(--c-blue);
transform: rotate(45deg) translateY(-2px);
transition: transform var(--dur) var(--ease);
}
.lf-acc-item[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.lf-acc-item > summary:hover h3 { color: var(--c-blue-text); }
.lf-acc-body { padding-bottom: var(--s-5); }
.lf-body h4 {
font-size: var(--t-base);
margin-top: var(--s-5);
margin-bottom: var(--s-2);
color: var(--c-ink);
}
.lf-body p { color: var(--c-ink-soft); }
.lf-body ul, .lf-body ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); color: var(--c-ink-soft); }
.lf-body li { margin-bottom: var(--s-2); }
.lf-body strong { color: var(--c-ink); }
/* Istaknuta napomena unutar teksta */
.lf-note {
background: #fff;
border-left: 4px solid var(--c-blue);
padding: var(--s-4) var(--s-5);
margin: 0 0 var(--s-5);
font-size: var(--t-sm);
}
.lf-note p { margin-bottom: var(--s-2); }
.lf-note p:last-child { margin-bottom: 0; }
/* Male tablice unutar teksta */
.lf-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); background: #fff; margin: 0 0 var(--s-5); }
.lf-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 480px; }
/* Na mobitelu tablica staje bez skrolanja, kao i cjenik */
@media (max-width: 560px) {
.lf-table { min-width: 0; font-size: 0.8125rem; }
.lf-table th, .lf-table td { padding: var(--s-2) var(--s-3); line-height: 1.35; }
.lf-table thead th { font-size: 10.5px; letter-spacing: .03em; }
}
.lf-table th, .lf-table td {
text-align: left; padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--c-line-2); vertical-align: top;
}
.lf-table thead th {
background: var(--c-nav); color: #fff;
font-family: var(--f-head); font-size: var(--t-xs);
letter-spacing: .06em; text-transform: uppercase;
}
.lf-table tbody tr:last-child th, .lf-table tbody tr:last-child td { border-bottom: 0; }
.lf-table tbody th { font-weight: 600; color: var(--c-ink); }
/* Zaključni CTA na kraju teksta */
.lf-cta {
margin-top: var(--s-8);
padding: var(--s-6);
background: var(--c-blue);
color: #fff;
text-align: center;
}
.lf-cta h3 { color: #fff; border: 0; padding: 0; margin: 0 0 var(--s-2); font-size: var(--t-xl); }
.lf-cta p { color: rgba(255,255,255,.9); margin-bottom: var(--s-5); }
.lf-cta .btn-ghost-light { color: var(--c-blue-darker); }
@media (min-width: 768px) {
.lf-cta { padding: var(--s-8); }
}
/* ==========================================================================
20b. PRAVNE STRANICE (privatnost, uvjeti, kolačići)
========================================================================== */
.legal-hero { background: var(--c-nav); color: #fff; padding-block: var(--s-8); }
.legal-hero h1 { color: #fff; margin-bottom: var(--s-2); }
.legal-hero p { color: rgba(255,255,255,.8); font-size: var(--t-sm); margin: 0; }
.crumbs { font-size: var(--t-xs); margin: 0 0 var(--s-4); color: rgba(255,255,255,.75); }
/* Breadcrumb je navigacija, ne tekst u rečenici — pa dobiva punu dodirnu
metu umjesto da se oslanja na WCAG iznimku za linkove unutar teksta. */
.crumbs a {
display: inline-flex; align-items: center;
min-height: 28px;
color: rgba(255,255,255,.9);
}
.crumbs a:hover { color: #fff; }
.legal { padding-block: var(--s-8) var(--s-9); }
.legal-body { max-width: 72ch; }
.legal-body h2 {
font-size: var(--t-xl); margin-top: var(--s-8); margin-bottom: var(--s-3);
padding-top: var(--s-5); border-top: 1px solid var(--c-line);
}
.legal-body h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 { font-size: var(--t-base); margin-top: var(--s-5); margin-bottom: var(--s-2); }
.legal-body p, .legal-body li { color: var(--c-ink-soft); }
.legal-body ul, .legal-body ol { padding-left: var(--s-5); margin: 0 0 var(--s-4); }
.legal-body li { margin-bottom: var(--s-2); }
.legal-body a { overflow-wrap: anywhere; }
/* Okvir s podacima obrta / kontaktom nadzornog tijela */
.legal-box {
background: var(--c-blue-50);
border-left: 4px solid var(--c-blue);
padding: var(--s-4) var(--s-5);
margin: 0 0 var(--s-5);
font-size: var(--t-sm);
}
.legal-box p { margin-bottom: var(--s-2); color: var(--c-ink); }
.legal-box p:last-child { margin-bottom: 0; }
.legal-box dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--t-sm); }
.legal-box dt { font-weight: 700; color: var(--c-ink); }
.legal-box dd { margin: 0; color: var(--c-ink-soft); }
/* Istaknuto upozorenje — bitne informacije koje po ZZP-u moraju biti
jasne i uočljive, a ne skrivene u tijelu teksta. */
.legal-box-warn {
background: #FEF6E7;
border-left-color: #C77700;
}
.legal-box-warn p { color: #4A3208; }
.legal-box-warn strong { color: #2E1F05; }
.legal-updated {
margin-top: var(--s-8); padding-top: var(--s-4);
border-top: 1px solid var(--c-line);
font-size: var(--t-xs); color: var(--c-muted);
}
/* Tablica u pravnim tekstovima (primatelji podataka, kolačići) */
.legal-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); margin: 0 0 var(--s-5); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); min-width: 520px; }
.legal-table th, .legal-table td {
text-align: left; padding: var(--s-3) var(--s-4);
border-bottom: 1px solid var(--c-line-2); vertical-align: top;
}
.legal-table thead th {
background: var(--c-bg-alt);
font-family: var(--f-head); font-size: var(--t-xs);
letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink);
}
.legal-table tbody tr:last-child th, .legal-table tbody tr:last-child td { border-bottom: 0; }
/* Sadržaj (linkovi na odjeljke) */
.toc { background: var(--c-bg-alt); border: 1px solid var(--c-line); padding: var(--s-4) var(--s-5); margin: 0 0 var(--s-7); }
.toc p { font-family: var(--f-head); font-weight: 700; font-size: var(--t-sm); margin: 0 0 var(--s-2); color: var(--c-ink); }
.toc ol { margin: 0; padding-left: var(--s-5); }
.toc li { margin-bottom: var(--s-1); font-size: var(--t-sm); }
/* ==========================================================================
21. PRISTUPAČNOST
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.mo-item:hover img { transform: none; }
}
@media print {
.topstack, .mobile-bar, .hero-media, .contact-form-wrap, .map { display: none !important; }
body { background: #fff; color: #000; padding-bottom: 0; }
.hero::after { display: none; }
}
|