/* =========================================================
Beelogs — Smarter Logistics
Design tokens: gold #F0C819 (from logo), ink #171512,
warm off-white surfaces, freight-route motif as signature device.
========================================================= */
/* Fonts are linked from (see build.py), NOT @import-ed here.
@import makes the browser download this file, parse it, and only then
discover the font request — two round trips in series. A , and both sat flush against the icon. */
margin-bottom: 16px;
}
/* ---------- Eyebrow / kicker ---------- */
.eyebrow{
display:inline-flex; align-items:center; gap:8px;
font-family: var(--font-head);
font-weight:600;
font-size: 13px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--gold-deep);
margin-bottom: 14px;
}
.eyebrow::before{
content:"";
width:8px; height:8px;
background: var(--gold);
border-radius: 1px; /* a route node / plotted point, not a hive cell */
}
.eyebrow.on-dark{ color: var(--gold); }
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; gap:10px;
font-family: var(--font-head);
font-weight:600;
font-size: 15px;
padding: 14px 26px;
border-radius: 999px;
border: 1.5px solid transparent;
cursor:pointer;
transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
/* One rule across the whole button system: brown background -> gold text,
gold background -> ink text. The in-page primary sat on brown with white
text, which made it the only exception. */
.btn-primary{ background: var(--dark); color: var(--gold); }
.btn-primary:hover{ background: var(--gold); color: var(--ink); }
/* The header CTA is the site's main conversion action, so it leads in gold and
inverts to brown on hover — the opposite of the in-page .btn-primary, which
stays quiet so the two don't compete. Scoped rather than flipping
.btn-primary globally, which would also recolour "Saznajte više",
"Više o skladištenju", "Naš pristup održivosti" and the form submit. */
.header-actions .btn-primary{ background: var(--gold); color: var(--ink); }
/* Gold text on hover, not white — every other button that lands on --dark
(see .btn-gold:hover) uses gold, so white here was the odd one out. */
.header-actions .btn-primary:hover{ background: var(--dark); color: var(--gold); }
.btn-gold{ background: var(--gold); color: var(--ink); }
.btn-gold:hover{ background: var(--dark); color: var(--gold); }
.btn-ghost{ background: transparent; border-color: rgba(23,20,15,0.25); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-ghost.on-dark{ border-color: rgba(255,255,255,0.35); color:#fff; }
.btn-ghost.on-dark:hover{ border-color:#fff; }
.btn-arrow{ font-size: 18px; transition: transform .18s ease; }
.btn:hover .btn-arrow{ transform: translateX(3px); }
/* ---------- Header ---------- */
/* backdrop-filter must NOT sit on .site-header itself. Any element with
backdrop-filter becomes the containing block for its position:fixed
descendants, which made the mobile drawer resolve `inset` against the ~74px
header instead of the viewport — collapsing it to a few pixels tall, so its
background vanished while the links overflowed and stayed visible.
Moving the blur onto a pseudo-element keeps the frosted look and lets fixed
children position against the viewport again. */
.site-header{
position: sticky; top:0; z-index: 100;
border-bottom: 1px solid var(--line);
}
.site-header::before{
content:"";
position:absolute; inset:0; z-index:-1;
background: rgba(251,249,244,0.92);
backdrop-filter: blur(10px);
}
.header-inner{
display:flex; align-items:center; gap: 24px;
padding: 14px 28px;
max-width: var(--container); margin:0 auto;
}
.header-nav{
display:flex; align-items:center; justify-content:space-between;
flex:1; gap: 24px;
}
.nav-backdrop{ display:none; }
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height: 34px; width:auto; display:block; }
.nav-links{ display:flex; align-items:center; gap: 30px; }
.nav-links a{
font-family: var(--font-head);
font-weight:600; font-size: 14.5px;
color: var(--ink);
position: relative;
padding: 6px 0;
}
.nav-links a::after{
content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
background: var(--gold); transition: width .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }
.nav-links a.active{ color: var(--gold-deep); }
.header-actions{ display:flex; align-items:center; gap: 16px; }
/* Language switch is a real to the equivalent page in the other language,
so it is crawlable and keeps the visitor in place. */
.lang-toggle{
display:flex; border:1.5px solid var(--line); border-radius: 999px; overflow:hidden;
font-family: var(--font-head); font-weight:700; font-size:12.5px;
}
.lang-toggle > *{
padding: 7px 13px; color: var(--ink-soft); letter-spacing:.03em;
display:inline-flex; align-items:center; transition: background .18s ease, color .18s ease;
}
.lang-toggle a:hover{ background: var(--gold-pale); color: var(--gold-deep); }
.lang-toggle .active{ background: var(--dark); color: var(--gold); }
.menu-toggle{
display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding: 6px;
}
.menu-toggle span{ width:24px; height:2px; background: var(--ink); }
/* Drawer close button — phones only. Shown by the 860px block below. */
.nav-close{ display:none; }
/* Tap-to-call — phones only, same as above. */
.nav-tel{ display:none; }
/* ---------- Hero ---------- */
.hero{
position: relative;
overflow:hidden;
background: var(--dark);
color: var(--white);
}
.hero-grid{
display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: 48px;
max-width: var(--container); margin:0 auto; padding: 88px 28px 96px;
}
.hero h1{ font-size: clamp(2.2rem, 4vw, 3.4rem); color:#fff; }
.hero h1 .accent{ color: var(--gold); }
.hero p.lead{ color: rgba(255,255,255,0.78); font-size: 1.08rem; max-width: 520px; }
/* Prelom uvodnog pasusa ide između rečenica, ne kroz njih.
build.py svaku rečenicu pakuje u . Inline-block se ne deli
preko dva reda: ako cela rečenica ne stane u ostatak reda, cela pređe u
sledeći. Jedini izuzetak je rečenica duža od same širine pasusa — nju i
dalje mora da prelomi, pa je tada balance deli na redove približno jednake
dužine umesto da ostavi jednu reč na kraju.
Samo desktop: na uskom ekranu skoro nijedna rečenica ne stane u jedan red,
pa bi pravilo davalo velike prazne rupe na desnoj strani. */
@media (min-width: 981px){
.hero p.lead .sn{ display: inline-block; text-wrap: balance; }
}
.hero-actions{ display:flex; gap:14px; margin-top: 28px; flex-wrap:wrap; }
.hero-visual{ position:relative; }
.hero-visual img{
border-radius: var(--radius);
box-shadow: var(--shadow);
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
}
/* Inner-page hero band — About, Sustainability, References, Contact.
Motif is logistics, not apiary: a route network of hubs and lanes over a
cartographic planning grid. Same visual language as the Czech-Balkans map
and the dotted connectors in the services diagram. Five layers, topmost
first:
1. left scrim, so the copy sits on a calm high-contrast field;
2. the route network — filled hubs, outlined stops, solid trunk lanes and
dashed feeder lanes;
3. a warm glow behind it, so the panel is not evenly lit;
4. a fine survey grid with a marker dot at each intersection;
5. a diagonal base gradient giving the band direction.
Verified at the brightest point: headline 12.8:1, lead 8.0:1, eyebrow 5.6:1. */
.hero.small{
padding: 0;
position: relative;
background-color: #1B1408;
background-image:
linear-gradient(90deg, rgba(10,7,3,.62) 0%, rgba(10,7,3,.44) 28%, rgba(10,7,3,0) 58%),
var(--hero-mark),
radial-gradient(620px 400px at 80% 46%, rgba(240,196,26,.11), transparent 66%),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764%27%20height%3D%2764%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.10%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M0%200.5H64M0.5%200V64%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M0%2032.5H64M32.5%200V64%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%270.5%27%20cy%3D%270.5%27%20r%3D%271.1%27%20fill%3D%27%23F0C41A%27%20fill-opacity%3D%270.14%27%2F%3E%3C%2Fsvg%3E"),
linear-gradient(135deg, #33260F 0%, #241A0A 50%, #161005 100%);
background-position: center, right -20px center, center, center, center;
background-size: cover, auto 88%, cover, 64px 64px, cover;
background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
/* Gold rule along the bottom edge. */
/* Decorative mark, swappable per page. Default is the route network. */
.hero.small{ --hero-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20560%20460%27%20width%3D%27560%27%20height%3D%27460%27%3E%3Cpath%20d%3D%27M88%20300L196%20150%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.42%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M196%20150L330%20262%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.42%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M330%20262L452%20104%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.42%27%20stroke-width%3D%272%27%2F%3E%3Cpath%20d%3D%27M330%20262L486%20338%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.24%27%20stroke-width%3D%271.5%27%20stroke-dasharray%3D%275%207%27%2F%3E%3Cpath%20d%3D%27M88%20300L268%20392%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.24%27%20stroke-width%3D%271.5%27%20stroke-dasharray%3D%275%207%27%2F%3E%3Cpath%20d%3D%27M268%20392L486%20338%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.24%27%20stroke-width%3D%271.5%27%20stroke-dasharray%3D%275%207%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%27300%27%20r%3D%2717%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.20%27%20stroke-width%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%2788%27%20cy%3D%27300%27%20r%3D%277.5%27%20fill%3D%27%23F0C41A%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27196%27%20cy%3D%27150%27%20r%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.45%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27330%27%20cy%3D%27262%27%20r%3D%2717%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.20%27%20stroke-width%3D%271.5%27%2F%3E%3Ccircle%20cx%3D%27330%27%20cy%3D%27262%27%20r%3D%277.5%27%20fill%3D%27%23F0C41A%27%20fill-opacity%3D%270.55%27%2F%3E%3Ccircle%20cx%3D%27452%27%20cy%3D%27104%27%20r%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.45%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27486%27%20cy%3D%27338%27%20r%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.45%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27268%27%20cy%3D%27392%27%20r%3D%275%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.45%27%20stroke-width%3D%272%27%2F%3E%3C%2Fsvg%3E"); }
/* Contact: two lanes converging on a single hub — the page is the
meeting point, so the mark says so. */
.hero.small.hero-contact{ --hero-mark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20620%20460%27%20width%3D%27620%27%20height%3D%27460%27%3E%3Cpath%20d%3D%27M58%20236Q230%20236%20410%20232%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.22%27%20stroke-width%3D%272%27%20stroke-dasharray%3D%277%209%27%2F%3E%3Cpath%20d%3D%27M64%2084Q236%20104%20410%20232%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%273%27%2F%3E%3Cpath%20d%3D%27M64%20392Q236%20368%20410%20232%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27181.2%27%20cy%3D%27110.1%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27291.9%27%20cy%3D%27157.4%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27181.2%27%20cy%3D%27362.7%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27291.9%27%20cy%3D%27311.5%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%2784%27%20r%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%2764%27%20cy%3D%27392%27%20r%3D%277%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%2758%27%20cy%3D%27236%27%20r%3D%274%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.30%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27410%27%20cy%3D%27232%27%20r%3D%2754%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.22%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27410%27%20cy%3D%27232%27%20r%3D%2734%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.34%27%20stroke-width%3D%272%27%2F%3E%3Ccircle%20cx%3D%27410%27%20cy%3D%27232%27%20r%3D%2719%27%20fill%3D%27none%27%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%273%27%2F%3E%3Ccircle%20cx%3D%27410%27%20cy%3D%27232%27%20r%3D%279%27%20fill%3D%27%23F0C41A%27%20fill-opacity%3D%270.75%27%2F%3E%3C%2Fsvg%3E"); }
.hero.small::after{
content:"";
position:absolute; left:0; right:0; bottom:0; height:3px;
background: linear-gradient(90deg,
var(--gold) 0%, var(--gold) 16%, rgba(240,196,26,.22) 40%, rgba(240,196,26,0) 70%);
}
.hero.small .hero-inner{
max-width: var(--container); margin:0 auto; padding: 76px 28px 68px;
position: relative; z-index: 1;
}
.hero.small h1{ font-size: clamp(2rem, 3.6vw, 2.9rem); }
/* 940px, ne 620px. Na 620px se skoro svaka rečenica u uvodu prelamala na dva
reda. Najduža rečenica koja se pojavljuje u ovim uvodima traži 925px (SR,
politika privatnosti), pa je 940px najuža mera na kojoj svaka od njih staje
u jedan red. Stane unutar kontejnera (1200px minus 2x28px padding).
Izuzetak ostaju uvodi na O nama i Uslugama: to su pojedinačne rečenice od
160+ znakova, kojima bi trebalo 1300-1420px — one se i dalje prelamaju, ali
uravnoteženo (text-wrap: balance). */
.hero.small p.lead{ max-width: 940px; }
/* Home hero: full-bleed photo with a warm-white wash so a photograph replaces
the flat dark panel, while the headline stays comfortably legible.
Selectors are deliberately double-scoped (.hero.hero-photo ...) so they
always outrank the generic .hero h1 / .hero p.lead rules above, regardless
of source order. */
.hero.hero-photo{
/* 496px = 620 - 20%. The band was sized to clear the "15+ years" badge that
used to sit in its bottom-right corner; with the badge gone the extra
height was just empty space. Services overrides this with its own
viewport-scaled height further down. */
min-height: 496px;
display:flex;
align-items:center;
color: var(--ink);
background-color: var(--paper);
background-image: var(--hero-wash), var(--hero-image);
background-position: center, var(--hero-pos, center center);
background-size: 100% 100%, var(--hero-size, cover);
background-repeat: no-repeat, no-repeat;
}
/* Home — photographic hero.
The photo has light sky behind the text column, so a graduated wash keeps
the text legible while leaving most of the image visible. Position is nudged
~100px right of centre so the truck clears the headline. */
.hero-home{
--hero-image: url('../images/hero-multimodal.jpg');
--hero-pos: calc(50% + 100px) 62%;
--hero-wash: linear-gradient(115deg,
rgba(251,249,244,.97) 0%,
rgba(251,249,244,.96) 42%,
rgba(251,249,244,.78) 57%,
rgba(251,249,244,.28) 80%,
rgba(251,249,244,.06) 100%);
}
/* Services — diagram hero (services-hero.jpg).
This artwork is composed for exactly this job. Measured from the file: its
left 50% holds no graphic content at all (darkest pixel there is luminance
163 — plain marble), while the hexagon diagram occupies x 42%-90%, y 27%-93%.
That lets copy and image share one band without fighting. The wash sits only
over the empty left side and has fully decayed by 52%, so the diagram itself
renders essentially unwashed — about 95% of it at full strength.
Height and vertical anchor come from that bounding box: the diagram sits low
in the frame, so a centred crop would clip it. h = 37vw paired with
background-position-y 79% keeps it whole from 1280px upward. */
.hero-services{
--hero-image: url('../images/services-hero.jpg');
/* 52%, calibrated against the rendered page rather than a pixel scan.
Two earlier attempts were wrong for opposite reasons: a dark-pixel
threshold missed the near-white tiles (centre read as 60%), then a
shadow-inclusive threshold counted faint glow beneath the hexagons
(centre read as 54.6%). Measured off the actual render, the cluster's
visible span is y 24.6%-76.8%, so its true centre is 50.7% — and 52% is
the anchor that puts that on the hero's centre line. Verified to give
equal clearance above and below from 1280px to 2050px. */
--hero-pos: center 52%;
/* Same 115deg graduated veil as the home hero, present across the whole
width and never reaching zero (floor .07 against the home hero's .06).
The veil is a WARM cream rather than plain paper on purpose: the artwork's
marble is a cool grey (mean rgb 232,228,227), so a near-white veil over a
near-white image produced no visible tonal movement at all — the overlay
looked absent. Warming it to (249,244,230) lifts the warmth delta from
+5 to ~+18 and the luminance by ~7%, so the gradient reads as a gradient
while keeping text contrast high.
Ramp is timed to the artwork: copy ends by 41% of the viewport, the
hexagons start at 47.2%, so the veil releases in between. */
--hero-wash: linear-gradient(115deg,
rgba(249,244,230,.97) 0%,
rgba(249,244,230,.95) 40%,
rgba(250,246,236,.74) 50%,
rgba(250,247,239,.48) 58%,
rgba(251,249,244,.22) 66%,
rgba(251,249,244,.10) 72%,
rgba(251,249,244,.07) 100%);
}
/* Matches the Home hero exactly — 496px, roughly 20% down from the previous
37vw (which reached 533px at 1440 and 710px at 1920). A fixed height also
makes the vertical anchor MORE stable than the old viewport-scaled one:
52% centres the diagram across the whole desktop range. */
.hero.hero-photo.hero-services{ min-height: 496px; }
.hero-services .hero-inner{ padding-block: 56px; }
/* Above ~1700px a `cover` background keeps scaling with viewport width, so the
artwork outgrows the now-fixed 496px band and the diagram starts losing its
top and bottom hexagons (5% clipped at 1920, 16% at 2560).
Sizing by HEIGHT instead decouples the artwork from viewport width: it stays
942px tall whatever the screen, so the diagram always fits, and the copy
still clears it (copy ends 43-45%, diagram starts 45-55%). */
@media (min-width: 1800px){
.hero-services{
--hero-size: auto 190%;
--hero-pos: 78% 52%;
}
}
/* Copy is held to a narrow measure on purpose: it has to finish before the
diagram begins at 42% of the viewport. */
/* Double-scoped deliberately. `.hero.hero-photo h1` (0,2,1) sets max-width
620px and outranks a single-class selector, so an earlier `.hero-services h1`
cap silently lost and the headline ran to ~52% of the viewport — straight
over the artwork, which starts at 47.2%. This selector (0,3,1) wins. */
.hero.hero-photo.hero-services h1{
font-size: clamp(1.7rem, 2.3vw, 2.2rem);
/* 460px, not 420px: the new headline runs to four lines at 420px on wide
screens. At 460px the copy still ends at 43% of the viewport, clear of the
artwork which begins at 47.2%. */
max-width: 460px;
}
.hero.hero-photo.hero-services p.lead{ max-width: 440px; }
.hero.hero-photo .eyebrow{ color: var(--gold-deep); }
.hero.hero-photo h1{ color: var(--ink); }
.hero.hero-photo h1 .accent{ color: var(--gold-deep); }
.hero.hero-photo p.lead{ color: var(--ink-soft); }
.hero.hero-photo .btn-ghost{ border-color: rgba(23,20,15,.3); color: var(--ink); }
.hero.hero-photo .btn-ghost:hover{ border-color: var(--ink); background: rgba(23,20,15,.06); }
.hero.hero-photo .hero-inner{
max-width: var(--container); margin:0 auto; width:100%;
padding: 56px 28px;
}
/* Widened 620 -> 700px so the headline sets on two lines instead of three, and
sized down a step to match. Without this the content measured 582px tall and
would have overrun the reduced min-height, so the band would not actually
have shrunk. At 700px the copy still ends at 54-59% of the viewport, where
the wash is .75-.81 — headline 9.4:1, body 4.8:1 even over a black pixel. */
.hero.hero-photo h1{ max-width: 700px; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.hero.hero-photo p.lead{ max-width: 560px; color: var(--ink-soft); }
/* ---------- Sections ---------- */
section{ padding: 88px 0; }
section.tight{ padding: 60px 0; }
/* 880px, not 640px. Section headings measure 659-849px at 2.4rem across both
languages, so a 640px box forced the last word onto its own line — "Pravi
vid prevoza za svaku pošiljku" needs 659px and was missing by only 19px.
880px clears the longest (the English "The right transport mode for every
shipment", 849px) with room to spare.
The heading gets the wider box; the paragraph underneath stays at a
comfortable reading measure so the block doesn't become a wall of text. */
.section-head{ max-width: 880px; margin-bottom: 48px; }
.section-head p{ max-width: 640px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center p{ margin-left:auto; margin-right:auto; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.4rem); }
.bg-alt{ background: var(--paper-alt); }
.bg-dark{ background: var(--dark); color: var(--white); }
.bg-dark h2, .bg-dark h3{ color: var(--white); }
.bg-dark p{ color: rgba(255,255,255,0.72); }
/* ---------- Cards / grids ---------- */
.grid{ display:grid; gap: 26px; }
.grid-2{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(3,1fr); }
.grid-4{ grid-template-columns: repeat(4,1fr); }
.card{
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 30px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
/* h2 and h3 both appear as card titles — h2 on Sustainability, where the cards
are top-level sections under the h1 and demoting them to h3 would leave a
heading-level gap. Card titles should look identical regardless of the level
the document outline requires, so both are styled here.
margin-top is 0: the gap above now belongs to .svc-icon. */
.card h2, .card h3{ font-size: 1.15rem; line-height:1.3; margin-top:0; }
.card p{ margin-bottom:0; font-size: .96rem; }
.stat{
text-align:left; border-left: 3px solid var(--gold); padding-left: 18px;
}
.stat strong{
display:block; font-family: var(--font-head); font-size: 2.4rem; color: var(--ink);
}
.bg-dark .stat strong{ color: var(--gold); }
.stat span{ color: var(--ink-soft); font-size:.92rem; }
.bg-dark .stat span{ color: rgba(255,255,255,0.65); }
/* ---------- Feature row (image + text) ---------- */
.feature-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
/* `.reverse` puts the media FIRST. It used to say `order:2`, which only did
anything on rows whose media already came first in the DOM — on the homepage
the media is always second, so every row rendered identically no matter what
the class said. */
.feature-row.reverse .feature-media{ order:-1; }
/* ---- feature-row variants -------------------------------------------
Four near-identical 50/50 rows down one page reads as a template. Each of
these gives a section its own rhythm while staying in the same design
language. All collapse to the single stacked column below 980px, where the
heading -> image -> copy order set earlier still applies. */
/* Asymmetric — the image earns a little more width than the copy. */
.feature-row.wide-media{ grid-template-columns: .88fr 1.12fr; gap: 64px; }
/* Full-bleed: the image runs off the left edge of the viewport instead of
stopping at the container. max() keeps the escape at zero once the viewport
is narrower than the container, so it never drags content off-screen. */
.feature-row.bleed-left{ grid-template-columns: 1.02fr .98fr; gap: 68px; }
.feature-row.bleed-left .feature-media{
order: -1;
margin-left: calc(-1 * (max(0px, (100vw - var(--container))) / 2) - 28px);
}
.feature-row.bleed-left .feature-media img{
border-radius: 0 var(--radius) var(--radius) 0;
aspect-ratio: 16 / 10;
}
/* Offset outline behind the image — depth without another box. */
.feature-media.framed{ position: relative; }
.feature-media.framed::before{
content:""; position:absolute; inset: 24px -24px -24px 24px;
border: 1.5px solid var(--gold);
border-radius: var(--radius);
z-index: 0; pointer-events: none;
}
.feature-media.framed img{ position: relative; z-index: 1; }
/* Centered composition — for the route map, which reads far better wide than
squeezed into half a row. */
.feature-stack{ text-align: center; }
.feature-stack .feature-intro{ max-width: 720px; margin: 0 auto 40px; }
.feature-stack .eyebrow{ justify-content: center; }
.feature-stack .feature-media{ max-width: 940px; margin: 0 auto; }
.feature-stack .tag-list{ justify-content: center; margin-top: 26px; }
/* .hero-actions is display:flex, and a flex container does not inherit the
parent's text-align for placing its items — so the button stayed hard left
while the map, copy and tags above it were all centred. */
.feature-stack .hero-actions{ justify-content: center; }
/* Source images have mixed ratios (photos are 16:9, the route map is ~4:3).
Pinning one aspect ratio keeps the vertical rhythm even down the page. */
.feature-media img{
border-radius: var(--radius);
box-shadow: var(--shadow);
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* The map must not be cropped — its legend sits in the corner — so it is
contained on a surface instead of covering the box. */
/* The map artwork already carries its own white rounded card with corner
marks, so the shared .feature-media framing (white pad, radius, shadow) just
drew a second frame around the first. Only the fit rules are kept. */
.feature-media img.media-map{
object-fit: contain;
aspect-ratio: 4 / 3;
background: none;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.feature-list li{
display:flex; gap:12px; padding: 10px 0; border-bottom: 1px solid var(--line);
font-size:.97rem; color: var(--ink-soft);
}
.feature-list li:last-child{ border-bottom:0; }
.feature-list li::before{
content:"›"; color: var(--gold-deep); font-weight:800; font-size:1.1rem;
}
/* ---------- CTA banner ---------- */
.cta-banner{
background: var(--dark); color:#fff;
border-radius: 22px;
padding: 56px;
display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
position:relative; overflow:hidden;
}
.cta-banner::before{
content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
background: var(--gold); opacity:.15;
}
.cta-banner h2{ color:#fff; margin-bottom:6px; font-size: 1.8rem; }
.cta-banner p{ color: rgba(255,255,255,0.7); margin-bottom:0; }
/* ---------- Client logo wall ----------
Real logo files vary wildly in aspect ratio, colour and padding. Normalising
to a fixed tile with a capped logo height plus grayscale keeps the row
visually even; colour returns on hover. Tiles that fail to load a logo file
get .no-logo and fall back to a typographic wordmark. */
.logo-wall{
display:grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 0;
border-top:1px solid var(--line);
border-left:1px solid var(--line);
background: var(--white);
border-radius: var(--radius);
overflow:hidden;
}
.logo-tile{
position: relative;
display:flex; align-items:center; justify-content:center;
min-height: 118px; padding: 26px 22px;
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
transition: background .2s ease;
}
.logo-tile:hover{ background: var(--paper); }
.logo-tile img{
max-height: 42px; height:auto; width:auto; max-width:100%;
object-fit: contain;
transition: opacity .25s ease;
}
/* The greyscale state is baked into -mono.png rather than produced with
filter: grayscale(). A CSS filter maps each logo's own colours to grey, so
the four light-coloured marks here (Knauf, Esensa, EGT, Sibirsko) came out
pale and half-invisible while the black ones stayed heavy. The baked files
are normalised to one shared ink range, so every logo carries the same
weight at rest. */
.logo-mono{ opacity: .88; }
.logo-full{
position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
opacity: 0;
}
.logo-tile:hover .logo-mono{ opacity: 0; }
.logo-tile:hover .logo-full{ opacity: 1; }
.logo-tile.no-logo img{ display:none; }
/* Someone who prefers reduced motion still gets the colour, just without the
crossfade. */
@media (prefers-reduced-motion: reduce){
.logo-tile img{ transition: none; }
}
/* Wordmark is only shown when no logo file was found for that client. */
.logo-wordmark{ display:none; }
.logo-tile.no-logo .logo-wordmark{
display:block; text-align:center;
font-family: var(--font-head); font-weight:700;
font-size: .98rem; letter-spacing:-0.01em;
color: var(--ink-soft);
transition: color .2s ease;
}
.logo-tile.no-logo:hover .logo-wordmark{ color: var(--ink); }
/* ---------- FAQ / process ---------- */
.process-item{ display:flex; gap: 22px; padding: 22px 0; border-top:1px solid var(--line); }
.process-item:last-child{ border-bottom: 1px solid var(--line); }
.process-num{ font-family: var(--font-head); font-weight:800; font-size:1.6rem; color: var(--gold-deep); width:50px; flex-shrink:0; }
/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 50px; }
.info-card{
display:flex; gap:16px; padding: 18px 0; border-bottom:1px solid var(--line);
}
.info-card:last-child{ border-bottom:0; }
.form-panel{
background: var(--white); border:1px solid var(--line); border-radius: var(--radius);
padding: 34px;
}
.field{ margin-bottom:18px; }
.field label{
display:block; font-family: var(--font-head); font-weight:600; font-size:.85rem; margin-bottom:6px; color: var(--ink);
}
.field input, .field textarea{
width:100%; padding: 12px 14px; border-radius: var(--radius-sm);
border: 1.5px solid var(--line); background: var(--paper);
font-family: var(--font-body); font-size:.95rem; color: var(--ink);
}
.field input:focus, .field textarea:focus{ outline:2px solid var(--gold); border-color: var(--gold); }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* ---------- Footer ---------- */
/* Footer shares the inner-page hero treatment so the two dark bands on a
page read as the same surface: honeycomb lattice, a warm glow, and a
diagonal base rather than one flat brown. A gold hairline caps the top
edge, mirroring the hairline under the inner heroes. */
.site-footer{
position: relative;
color: rgba(255,255,255,0.72);
padding: 64px 0 28px;
background-color: #0A0702;
background-image:
radial-gradient(700px 360px at 82% -20%, rgba(240,196,26,.06), transparent 62%),
url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764%27%20height%3D%2764%27%20viewBox%3D%270%200%2064%2064%27%3E%3Cg%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.10%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M0%200.5H64M0.5%200V64%27%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%27%23F0C41A%27%20stroke-opacity%3D%270.05%27%20stroke-width%3D%271%27%20fill%3D%27none%27%3E%3Cpath%20d%3D%27M0%2032.5H64M32.5%200V64%27%2F%3E%3C%2Fg%3E%3Ccircle%20cx%3D%270.5%27%20cy%3D%270.5%27%20r%3D%271.1%27%20fill%3D%27%23F0C41A%27%20fill-opacity%3D%270.14%27%2F%3E%3C%2Fsvg%3E"),
linear-gradient(135deg, #1A1206 0%, #120C04 52%, #080502 100%);
background-position: center, center, center;
background-size: cover, 64px 64px, cover;
background-repeat: no-repeat, repeat, no-repeat;
}
.site-footer::before{
content:"";
position:absolute; left:0; right:0; top:0; height:3px;
background: linear-gradient(90deg,
var(--gold) 0%, var(--gold) 16%, rgba(240,196,26,.22) 40%, rgba(240,196,26,0) 70%);
}
.footer-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand img{ height: 30px; width:auto; margin-bottom: 14px; }
.footer-brand p{ color: rgba(255,255,255,0.55); font-size:.92rem; max-width:280px; }
.footer-col h2{ color:#fff; font-size:.95rem; margin-bottom:16px; font-family: var(--font-head); }
.footer-col a, .footer-col li, .footer-col address{ display:block; margin-bottom:10px; font-size:.92rem; color: rgba(255,255,255,0.62); }
/* Opening hours sit under the address block, one step quieter than the links
above them — supporting detail, not something to click. */
.foot-hours{ margin:0; font-size:.88rem; color: rgba(255,255,255,0.50); }
.footer-col a:hover{ color: var(--gold); }
.footer-col address a{ display:inline; margin-bottom:0; }
.footer-bottom{
border-top: 1px solid rgba(255,255,255,0.12);
padding-top: 22px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
/* .45 measured 4.24:1, then .52 measured 4.03:1 once the footer gained its
honey glow (a lighter backdrop needs a brighter foreground). .60 clears AA
at the brightest point of the glow. */
font-size:.85rem; color: rgba(255,255,255,0.60);
}
/* ---------- Accessibility ---------- */
.skip-link{
position:absolute; left:-9999px; top:0; z-index:200;
background: var(--gold); color: var(--ink);
font-family: var(--font-head); font-weight:700;
padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline: 3px solid var(--gold-deep); outline-offset: 2px; }
/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.mb-0{ margin-bottom:0 !important; }
.center-text{ text-align:center; }
.btn-sm{ padding:10px 20px; font-size:13.5px; }
.btn-block{ width:100%; justify-content:center; }
.stat-list{ list-style:none; }
.pull-quote{
margin:0; font-family: var(--font-head); font-weight:600;
font-size: 1.6rem; line-height:1.25; color:#fff; max-width:640px;
}
.pull-quote p{ color:#fff; margin:0; }
.mission-statement{ font-size:1.1rem; color: rgba(255,255,255,0.85) !important; }
.note-panel{ align-self:start; }
.note-text{ font-size:1.05rem; color: var(--ink) !important; margin-bottom:0; }
.contact-tags{ margin-top:28px; }
address{ font-style: normal; }
.tag-list{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 22px; list-style:none; }
.tag{
background: var(--gold-pale); color: var(--gold-deep);
font-family: var(--font-head); font-weight:700; font-size:.78rem;
padding: 6px 12px; border-radius: 999px; text-transform:uppercase; letter-spacing:.04em;
}
/* ---------- Process steps ---------- */
.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: 26px; list-style:none; counter-reset:none; }
.step{ display:flex; gap:18px; align-items:flex-start; }
.step-num{
font-family: var(--font-head); font-weight:800; font-size:1.5rem;
color: var(--gold-deep); line-height:1; flex-shrink:0;
padding-top:2px; min-width:38px;
}
.step h3{ font-size:1.08rem; margin-bottom:.4em; }
.step p{ font-size:.95rem; margin-bottom:0; }
/* ---------- FAQ ----------
Native /: no JavaScript, keyboard-accessible by default,
and the answers stay in the HTML so search engines can read them. */
/* Full container width, so the rows line up with every other section on the
page. The answer text keeps its own reading measure below — capping the
whole accordion at 860px instead left it stopping ~320px short of the grid. */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
/* The FAQ sits on --paper-alt on the Services page (the section backgrounds
alternate, and #warehousing above it is already alt). Thin rules lose too
much contrast on that surface, so they step up a shade. */
.bg-alt .faq{ border-top-color: var(--line-alt); }
.bg-alt .faq details{ border-bottom-color: var(--line-alt); }
.faq summary{
cursor:pointer; list-style:none;
padding: 20px 44px 20px 0; position:relative;
font-family: var(--font-head); font-weight:600; font-size:1.02rem;
color: var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
content:""; position:absolute; right:12px; top:50%;
width:11px; height:11px; margin-top:-7px;
border-right:2px solid var(--gold-deep); border-bottom:2px solid var(--gold-deep);
transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after{ transform: rotate(-135deg); margin-top:-2px; }
.faq summary:hover{ color: var(--gold-deep); }
/* Answers run the full width of the FAQ block, matching the questions and the
divider rules above and below them. The previous 72ch cap stopped the text
roughly 300px short of the rule beneath it, which read as a mistake. */
.faq details p{ margin:0 0 22px; font-size:.97rem; }
/* ---------- Legal pages (privacy policy) ----------
Long-form prose, so the measure is capped well below the 1180px container:
legal text nobody can read is legal text nobody reads. Base rules live HERE,
before the responsive block, so their mobile overrides still win. */
.legal{ padding: 72px 0 88px; }
.legal-body{ max-width: 860px; margin: 0 auto; }
.legal-updated{
margin-top: 18px; font-size:.9rem; letter-spacing:.02em;
color: rgba(255,255,255,0.72); /* on the dark hero — 8.9:1 */
}
/* Jump list. A 13-section policy is unusable without one. */
.legal-toc{
background: var(--paper-alt); border:1px solid var(--line);
border-radius: 14px; padding: 26px 30px; margin-bottom: 52px;
}
.legal-toc h2{
font-size:.82rem; text-transform:uppercase; letter-spacing:.14em;
color: var(--ink-soft); margin:0 0 14px; padding:0; border:0;
}
.legal-toc h2::after{ display:none; }
.legal-toc ol{
margin:0; padding-left: 20px; columns: 2; column-gap: 34px;
font-size:.94rem;
}
.legal-toc li{ margin:0 0 8px; break-inside: avoid; }
.legal-toc a{ color: var(--ink-soft); text-decoration:none; }
.legal-toc a:hover{ color: var(--gold-deep); text-decoration:underline; }
/* DIRECT children only.
`.legal-body h2` and `.legal-toc h2` have identical specificity (0,1,1), so
the later of the two wins outright — which handed the table-of-contents
label and the closing "Pitanja?" box a section rule, a gold tab and 52px of
top margin they were never meant to have. The child combinator makes these
rules match the numbered section headings and nothing else, instead of
fighting the same battle with !important. */
.legal-body > h2{
font-size: clamp(1.28rem, 2.2vw, 1.6rem); line-height:1.25;
margin: 52px 0 18px; padding-top: 22px; position:relative;
border-top: 1px solid var(--line);
}
.legal-body > h2::after{
content:""; position:absolute; top:-1px; left:0;
width:52px; height:3px; background: var(--gold);
}
.legal-toc + h2{ margin-top: 0; }
.legal-body h3{
font-size: 1.04rem; margin: 30px 0 10px; color: var(--ink);
}
.legal-body p{ margin: 0 0 16px; color: var(--ink-soft); line-height:1.75; }
.legal-body ul{ margin: 0 0 20px; padding-left: 22px; }
.legal-body li{ margin-bottom: 9px; color: var(--ink-soft); line-height:1.7; }
.legal-body strong{ color: var(--ink); font-weight:600; }
.legal-body a{ color: var(--gold-deep); text-underline-offset: 3px; }
/* Tables carry the purpose/basis/retention detail. Horizontal scroll on a
phone rather than a squeezed unreadable grid. */
.table-wrap{ overflow-x:auto; margin: 0 0 24px; -webkit-overflow-scrolling: touch; }
.legal-table{
width:100%; border-collapse: collapse; font-size:.92rem; min-width: 520px;
}
.legal-table th, .legal-table td{
text-align:left; vertical-align: top;
padding: 13px 16px; border:1px solid var(--line); line-height:1.6;
}
.legal-table th{
background: var(--paper-alt); color: var(--ink);
font-weight:600; font-size:.85rem;
text-transform:uppercase; letter-spacing:.06em;
}
.legal-table td{ color: var(--ink-soft); }
.legal-table tbody tr:nth-child(even) td{ background: rgba(243,239,228,.42); }
.legal-contact{
margin-top: 56px; padding: 28px 32px;
background: var(--gold-pale); border:1px solid #EBD98A; border-radius: 14px;
}
.legal-contact h2{
margin:0 0 10px; padding:0; border:0; font-size:1.15rem;
}
.legal-contact h2::after{ display:none; }
.legal-contact p{ margin:0; }
/* Footer legal row */
.footer-legal{ display:inline-flex; gap:10px; align-items:center; flex-wrap:wrap; }
.footer-legal a{ color: rgba(255,255,255,0.82); text-decoration:none; }
.footer-legal a:hover{ color: var(--gold); text-decoration:underline; }
/* =========================================================
Responsive
========================================================= */
@media (max-width: 980px){
.grid-4{ grid-template-columns: repeat(2,1fr); }
.grid-3{ grid-template-columns: repeat(2,1fr); }
.hero-grid{ grid-template-columns: 1fr; padding-top:56px; }
.hero-visual{ order:-1; }
.hero.hero-photo{ min-height:0; }
/* Bottom padding leaves the photo visible below the copy where the vertical
wash releases. Trimmed 150 -> 118px: part of that space was reserving room
for the badge, which no longer exists. */
.hero.hero-photo .hero-inner{ padding: 84px 28px 118px; }
.hero.hero-photo h1{ max-width:100%; }
/* Below 980px the copy spans the full width, so a left-side wash can no
longer shield it. Switch to a vertical wash: opaque behind the copy at the
top, clearing completely lower down so the diagram sits beneath it. The
background is scaled past 100% and anchored so the whole hexagon cluster
lands inside the frame. */
.hero.hero-photo.hero-services{ min-height:0; }
.hero-services{
/* Scaled past 100% and anchored so the full hexagon cluster (x 42%-90% of
the source) lands inside a narrow frame instead of being cropped. */
/* Anchored to the bottom and held at low strength, so the hexagons read as
texture in the band beneath the copy rather than sitting behind it. The
veil stays near-opaque to 72% — past where the copy ends at 64-80% — and
never clears beyond .42, which is what stopped the diagram colliding
with the buttons. */
--hero-size: 130% auto;
--hero-pos-sm: 62% bottom;
--hero-wash: linear-gradient(180deg,
rgba(249,244,230,.96) 0%,
rgba(249,244,230,.95) 72%,
rgba(250,246,236,.72) 86%,
rgba(251,249,244,.58) 100%);
}
.hero-services .hero-inner{ padding: 60px 28px 300px; }
.hero.hero-photo.hero-services h1,
.hero.hero-photo.hero-services p.lead{ max-width:100%; }
/* Every variant must be listed. `.feature-row.wide-media` is specificity
0,2,0 and a bare `.feature-row` is 0,1,0 — a media query adds no
specificity of its own, so the plain selector alone loses and the variants
stayed two-column on phones. */
.feature-row,
.feature-row.reverse,
.feature-row.wide-media,
.feature-row.bleed-left{ grid-template-columns: 1fr; gap: 0; }
/* The bleed is a desktop device: on a phone the image is already full width,
so the negative margin only buys a horizontal scrollbar. */
.feature-row.bleed-left .feature-media{ order: 0; margin-left: 0; }
.feature-row.bleed-left .feature-media img{
border-radius: var(--radius);
aspect-ratio: 16 / 9;
}
/* The offset outline needs room either side that a phone doesn't have. */
.feature-media.framed::before{ display: none; }
/* Centred stack reads better left-aligned once it is the full column width. */
.feature-stack{ text-align: left; }
.feature-stack .eyebrow{ justify-content: flex-start; }
.feature-stack .feature-intro{ margin-bottom: 26px; }
.feature-stack .tag-list{ justify-content: flex-start; }
.feature-stack .hero-actions{ justify-content: flex-start; }
/* Stacked rows read: eyebrow -> heading -> IMAGE -> body copy.
Previously the image was simply forced last (order:2), which kept it from
opening the section with a big pale graphic but dumped it at the very
bottom, orphaned from the text it illustrates.
The image is a sibling of the whole text block, not of the heading, so it
cannot be slotted between them by `order` alone. `display:contents` drops
the text wrapper's box so its children become grid items in their own
right — then order can interleave the image among them.
Scoped with :has() so the rows that carry no image (About has one such
two-column text row) keep their normal stacking. Where :has() is
unsupported the whole block is skipped and the old layout stands. */
.feature-row:has(.feature-media){ gap: 0; }
.feature-row:has(.feature-media) > div:not(.feature-media){ display: contents; }
.feature-row:has(.feature-media) .eyebrow,
.feature-row:has(.feature-media) h2{ order: 1; }
.feature-row:has(.feature-media) .feature-media{ order: 2; margin: 4px 0 26px; }
.feature-row:has(.feature-media) > div:not(.feature-media) > *:not(.eyebrow):not(h2){
order: 3;
}
.contact-grid{ grid-template-columns: 1fr; }
.footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px){
/* Legal pages: one TOC column, tighter rhythm, tables scroll sideways. */
.legal{ padding: 48px 0 64px; }
.legal-toc{ padding: 20px 22px; margin-bottom: 38px; }
.legal-toc ol{ columns: 1; }
.legal-body h2{ margin: 40px 0 14px; padding-top: 18px; }
.legal-table{ font-size:.87rem; }
.legal-table th, .legal-table td{ padding: 11px 13px; }
.legal-contact{ padding: 22px 24px; margin-top: 42px; }
.footer-legal{ gap:8px; }
/* Drawer holds the links, the language switch and the CTA, so the bar
itself is only the logo and the toggle — previously all four competed for
~390px and the logo got squeezed. */
.menu-toggle{ display:flex; margin-left:auto; }
.header-nav{
position: fixed; top:0; right:0; bottom:0;
width: min(330px, 86vw);
z-index: 130;
background: var(--paper);
border-left: 1px solid var(--line);
box-shadow: -24px 0 60px -34px rgba(23,20,15,.55);
flex-direction: column; align-items: stretch; justify-content: flex-start;
gap: 0; padding: 84px 26px 32px;
overflow-y: auto;
transform: translateX(100%);
transition: transform .28s ease;
}
body.nav-open .header-nav{ transform: translateX(0); }
/* Close button, sitting on the hamburger's own axis so the control appears
to swap in place rather than jump.
header-inner is 14px + 34px logo + 14px -> hamburger centre y = 31
header padding-right 28px, toggle 36px wide -> glyph centre 46px from
the right edge, and the panel's right edge IS the viewport's.
A 44px box on those centres gives top 31-22=9, right 46-22=24, and clears
the panel's 84px padding-top so it never collides with the first link. */
.nav-close{
display:flex; align-items:center; justify-content:center;
position:absolute; top:9px; right:24px;
width:44px; height:44px; /* 44px: comfortable tap target */
padding:0; border-radius:50%;
/* Filled by default so the control is obvious the moment the drawer opens;
hover strips the fill rather than adding one.
The hairline is doing real work: --paper-alt sits only 1.09:1 against the
panel's --paper, so the fill alone is close to invisible. The border
gives the circle an edge without changing the two chosen colours.
box-sizing is border-box globally, so this does not alter the 44px box
or shift the icon off the hamburger's axis. */
background: var(--paper-alt); color: var(--gold-deep); cursor:pointer;
border: 1px solid var(--line);
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav-close:hover{
background: none; color: var(--ink); border-color: transparent;
}
.nav-close:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
.nav-links{ flex-direction:column; align-items:stretch; gap:0; }
.nav-links a{ padding: 15px 2px; border-bottom: 1px solid var(--line); font-size: 1rem; }
.nav-links a::after{ display:none; }
.header-actions{ flex-direction:column; align-items:stretch; gap:16px; margin-top: 26px; }
.nav-tel{
display:flex; align-items:center; gap:10px;
font-family: var(--font-head); font-weight:700; font-size:1.05rem;
color: var(--ink); text-decoration:none;
padding: 12px 0; /* 44px+ tap target with the text */
border-bottom: 1px solid var(--line);
margin-bottom: 6px;
}
.nav-tel .svc-icon{
width:34px; height:34px; border-radius:8px; margin-bottom:0;
clip-path:none; /* too small for the cut-corner mark */
}
.nav-tel:hover{ color: var(--gold-deep); }
.lang-toggle{ align-self:flex-start; }
.header-actions .btn{ justify-content:center; }
.nav-backdrop{
display:block; position:fixed; inset:0; z-index:120;
background: rgba(23,20,15,.5);
opacity:0; pointer-events:none; transition: opacity .28s ease;
}
body.nav-open .nav-backdrop{ opacity:1; pointer-events:auto; }
body.nav-open{ overflow:hidden; }
.grid-2, .grid-3, .grid-4{ grid-template-columns: 1fr; }
.steps{ grid-template-columns: 1fr; gap: 22px; }
/* Stats stay two-up on phones. Four short figures stacked in a single column
made the row absurdly tall for how little it says; paired, it reads as one
compact block. Higher specificity (0,2,0) than the .grid-4 rule above. */
.grid.stat-list{ grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.stat{ padding-left: 14px; }
.stat strong{ font-size: 2rem; }
.stat span{ font-size: .86rem; }
.cta-banner{ padding: 34px; flex-direction:column; align-items:flex-start; }
/* Keep two columns on phones instead of stacking all four blocks. The two
link lists — Navigacija and Usluge — sit side by side, while the brand
block and the contact block span the full width, since an address and a
logo both read badly in a half-width column. */
.footer-grid{ grid-template-columns: 1fr 1fr; gap: 30px 22px; }
.footer-brand{ grid-column: 1 / -1; }
.footer-col:last-child{ grid-column: 1 / -1; }
.footer-col a, .footer-col li{ font-size: .88rem; margin-bottom: 9px; }
section{ padding: 60px 0; }
.field-row{ grid-template-columns: 1fr; }
/* Narrow screens: the text wraps to full width, so a horizontal wash can no
longer protect it. Switch to a vertical wash — opaque behind the copy,
releasing toward the bottom where the image can still be seen. */
.hero.hero-photo{
background-position: center top, var(--hero-pos-sm, center 30%);
}
.hero-home{
--hero-wash: linear-gradient(180deg,
rgba(251,249,244,.97) 0%, rgba(251,249,244,.97) 62%, rgba(251,249,244,.55) 100%);
}
.logo-wall{ grid-template-columns: repeat(2, 1fr); }
/* Phone hero heights.
Both heroes are scoped explicitly here. A generic `.hero.hero-photo
.hero-inner` rule has specificity (0,3,0) and would override the Services
hero's own (0,2,0) padding set at the 980px breakpoint — which is exactly
what was happening before. Naming each hero keeps them independent. */
/* Home: target ~70% of the screen instead of filling it.
Content measured 667px on a 390px-wide phone — over 100% of a small
viewport. Trimming the padding, stepping the headline down and letting the
two buttons sit on one row brings content to ~495px, so the 70vh floor
governs on normal phones rather than being overrun. */
.hero.hero-photo.hero-home{ min-height: 70vh; }
.hero.hero-photo.hero-home .hero-inner{ padding: 40px 24px 96px; }
.hero.hero-photo.hero-home h1{ font-size: clamp(1.6rem, 7.2vw, 1.85rem); }
.hero.hero-photo.hero-home p.lead{ font-size: 1rem; }
/* Sized so both buttons still share one row at 360px — the narrowest common
phone. At the previous 14px/20px they wrapped to a second row there, which
alone pushed the band from 74% to 85% of the screen. */
.hero.hero-photo.hero-home .hero-actions{ gap: 8px; margin-top: 22px; }
.hero.hero-photo.hero-home .hero-actions .btn{ padding: 12px 18px; font-size: 13.5px; }
/* Services matches Home exactly on phones — same height, padding, type sizes
and one-row buttons. Previously it ran 86% of the screen at 390px with the
buttons wrapping to two rows, and the wash released at 58% so the hexagons
sat directly behind the copy and the CTAs. */
.hero.hero-photo.hero-services{ min-height: 70vh; }
.hero.hero-photo.hero-services .hero-inner{ padding: 40px 24px 96px; }
.hero.hero-photo.hero-services h1{
font-size: clamp(1.6rem, 7.2vw, 1.85rem);
max-width: 100%;
}
.hero.hero-photo.hero-services p.lead{ font-size: 1rem; max-width: 100%; }
.hero.hero-photo.hero-services .hero-actions{ gap: 8px; margin-top: 22px; }
.hero.hero-photo.hero-services .hero-actions .btn{ padding: 12px 18px; font-size: 13.5px; }
}
/* ---------- Contact form ---------- */
.req{ color: var(--gold-deep); }
/* Honeypot: off-screen rather than display:none, because some bots skip
hidden inputs but still fill positioned ones. Never focusable. */
.hp-field{
position:absolute !important; left:-9999px !important;
width:1px; height:1px; opacity:0; pointer-events:none;
}
.field-err{
margin:6px 0 0; font-size:.85rem; color:#B3261E; font-weight:500;
}
input[aria-invalid="true"], textarea[aria-invalid="true"]{
border-color:#B3261E;
}
input[aria-invalid="true"]:focus, textarea[aria-invalid="true"]:focus{
outline-color:#B3261E;
}
.consent{ margin-top: 4px; }
/* `.field label` is 0,1,1 and `.checkbox` only 0,1,0, so the plain field-label
rule was winning: the consent text came out in the heading face at weight
600, and `display:block` beat the flex, wrapping the sentence UNDERNEATH the
checkbox instead of beside it. Qualifying with the element lifts this to
0,2,1 and it reads as body copy again. */
.field label.checkbox{
display:flex; gap:11px; align-items:flex-start;
font-family: var(--font-body); font-weight:400;
font-size:.88rem; color: var(--ink-soft); line-height:1.5; cursor:pointer;
margin-bottom:0;
}
/* The policy link has to be findable, or the consent it supports isn't
informed. Colour alone is not enough — underline it. */
.consent a{
color: var(--gold-deep); font-weight:600;
text-decoration: underline; text-underline-offset: 2px;
}
.consent a:hover{ color: var(--ink); }
.checkbox input{
width:18px; height:18px; margin:2px 0 0; flex-shrink:0;
accent-color: var(--gold-deep); cursor:pointer;
}
.form-status{
margin-top:18px; padding:14px 16px; border-radius: var(--radius-sm);
font-size:.92rem; display:flex; flex-direction:column; gap:3px;
}
.form-status strong{ font-family: var(--font-head); font-size:.95rem; }
.form-status.ok{ background:#E8F3EC; color:#14532D; border:1px solid #B7DFC6; }
.form-status.fail{ background:#FCECEA; color:#7F1D1D; border:1px solid #F2C4BE; }
.contact-form button[disabled]{ opacity:.65; cursor:progress; transform:none; }