/* ============================================================
VETRO SISTEM — glavni stilovi
Dizajn jezik: editorijalni minimalizam, svetla osnova.
Paleta: TRI boje — bela #FFFFFF, tamna siva #363435, narandžasta #F58634.
============================================================ */
:root {
/* ── TAČNO TRI BOJE, po jedna nijansa ──────────────────────
Sve ostalo su providnosti TIH ISTIH boja (za linije i sekundarni tekst),
ne nove nijanse. Nijedna četvrta boja ne sme da uđe u fajl. */
--white: #FFFFFF;
--gray: #363435;
--orange: #F58634;
/* ── Animirana boja stranice ─────────────────────────────
Scrub inverzija (sekcija 05) upisuje --pg-bg/--pg-ink na :
CELA stranica menja boju — svetle podloge, tekst na njima, linije,
pa i tekst u narandžastom dugmetu. Bez JS-a fallback = belo/sivo. */
/* Aliasi — stara imena i dalje rade; "svetli" sloj prati inverziju. */
--paper: var(--pg-bg, var(--white));
--bone: var(--white);
--bone-2: var(--white);
--bg: var(--gray);
--bg-deep: var(--gray);
--bg-deepest: var(--gray);
--card: var(--gray);
--ink: var(--pg-ink, var(--gray));
--on-orange: var(--pg-ink, var(--gray)); /* tekst na dugmetu prati inverziju */
--orange-2: var(--orange);
/* Sekundarni tekst = ista boja, manja neprozirnost */
--muted: rgba(255, 255, 255, 0.72); /* na sivoj (statične tamne zone) */
--muted-2: rgba(255, 255, 255, 0.72);
--muted-on-light: color-mix(in srgb, var(--pg-ink, var(--gray)) 78%, transparent);
/* Linije */
--line: rgba(255, 255, 255, 0.20);
--line-strong: rgba(245, 134, 52, 0.55);
--line-on-light: color-mix(in srgb, var(--pg-ink, var(--gray)) 18%, transparent);
--font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
--font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
--fs-display: clamp(2.6rem, 7.2vw, 6.8rem);
--fs-h2: clamp(2rem, 4.6vw, 4.2rem);
--fs-h3: clamp(1.25rem, 2vw, 1.6rem);
--fs-body-lg: clamp(1.15rem, 1.8vw, 1.5rem);
--fs-intro: clamp(1.6rem, 3.4vw, 3.1rem);
--fs-body: 1.0625rem;
--fs-label: 0.7rem;
--space-section: clamp(6rem, 13vw, 11rem);
--space-inline: clamp(1.25rem, 4vw, 4rem);
--radius: 10px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.6;
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
/* Zrnasta tekstura preko celog sajta */
body::after {
content: "";
position: fixed;
inset: -50%;
width: 200%;
height: 200%;
pointer-events: none;
z-index: 2000;
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: 100%; width: 100%; object-fit: cover; }
figure { overflow: hidden; }
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ol, ul { list-style: none; }
::selection { background: var(--orange); color: var(--on-orange); }
/* Fokus za tastaturu — currentColor se sam prilagodi svetloj/tamnoj podlozi */
:focus-visible {
outline: 2px solid currentColor;
outline-offset: 4px;
border-radius: 2px;
}
.skip-link {
position: fixed;
top: -100%;
left: 1rem;
z-index: 3000;
background: var(--orange);
color: var(--on-orange);
padding: 0.75rem 1.25rem;
font-family: var(--font-mono);
font-size: var(--fs-label);
text-transform: uppercase;
letter-spacing: 0.12em;
}
.skip-link:focus { top: 1rem; }
/* ---------- Tipografija ---------- */
.label {
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
line-height: 1.5;
}
.h2 {
font-size: var(--fs-h2);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 18ch;
}
.h3 {
font-size: var(--fs-h3);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
}
.body-lg {
font-size: var(--fs-body-lg);
line-height: 1.5;
font-weight: 300;
}
/* ---------- Dugmad i linkovi ---------- */
.arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.link-arrow .arrow, .topbar__cta .arrow { color: var(--orange); }
.btn {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-mono);
font-size: var(--fs-label);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--on-orange);
background: var(--orange);
padding: 1.05rem 1.6rem;
border-radius: 6px;
min-height: 44px;
transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.btn .arrow { color: inherit; }
.btn:hover { background: var(--orange-2); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(5px); }
.btn:active { transform: scale(0.97); }
.link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; }
/* ---------- Preloader: logo se pojavi pa preleti u topbar ---------- */
.preloader {
position: fixed;
inset: 0;
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.preloader__bg {
position: absolute;
inset: 0;
background: var(--bg-deepest);
}
.preloader__logo {
position: relative;
width: clamp(220px, 28vw, 340px);
height: auto;
opacity: 0;
will-change: transform, opacity;
}
html:not(.js) .preloader, .preloader.is-done { display: none; }
/* ---------- Top bar ---------- */
.topbar {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 1.2rem var(--space-inline);
color: var(--bone);
filter: drop-shadow(0 1px 10px rgba(54, 52, 53, 0.55));
}
/* svetla varijanta: topbar na beloj podlozi — tamno mastilo, bez senke */
.topbar--svetla { color: var(--ink); filter: none; }
.topbar__meta { opacity: 0.75; }
.topbar__logo { justify-self: center; display: block; }
.topbar__logo img {
display: block;
width: clamp(92px, 8.5vw, 118px);
height: auto;
object-fit: contain;
}
.topbar__cta { justify-self: end; }
/* ---------- Pill nav (fluid.glass stil, zaobljene ivice 14px) ---------- */
.pillnav {
position: fixed;
bottom: 1.3rem;
left: 50%;
transform: translateX(-50%);
z-index: 900;
display: flex;
align-items: center;
gap: 0.15rem;
/* Traka je uvek suprotna od stranice, pa prati scrub inverziju (sekcija 05):
bela stranica → siva traka sa belim slovima; siva stranica → bela traka sa sivim. */
background: color-mix(in srgb, var(--pg-ink, var(--gray)) 90%, transparent);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
color: var(--pg-bg, var(--white));
border: 1px solid color-mix(in srgb, var(--pg-bg, var(--white)) 14%, transparent);
border-radius: 14px;
padding: 0.3rem 0.35rem;
}
.pillnav__mark {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
}
.pillnav__mark img { width: auto; height: 20px; object-fit: contain; }
.pillnav__mark:hover { opacity: 0.75; }
.pillnav__page {
display: inline-flex;
align-items: center;
height: 40px;
padding: 0 1.1rem;
color: inherit; /* bela na sivoj traci, siva na beloj — ne narandžasta */
transition: opacity 0.25s;
}
.pillnav__page:hover { opacity: 0.75; }
.pillnav__burger {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
width: 40px;
height: 40px;
}
.pillnav__burger:hover { opacity: 0.75; }
.pillnav__burger span {
display: block;
width: 16px;
height: 1.5px;
background: currentColor;
transition: transform 0.35s var(--ease-out), opacity 0.25s;
}
.pillnav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.pillnav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pillnav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
/* ---------- Fullscreen meni ---------- */
.menu {
position: fixed;
inset: 0;
z-index: 800;
background: var(--bg-deepest);
color: var(--bone);
visibility: hidden;
opacity: 0;
transition: opacity 0.5s var(--ease-out), visibility 0s 0.5s;
}
.menu.is-open { visibility: visible; opacity: 1; transition: opacity 0.5s var(--ease-out); }
.menu__inner {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 5rem var(--space-inline) 7rem;
}
.menu__logo { width: clamp(120px, 18vw, 170px); height: auto; }
.menu__links { display: flex; flex-direction: column; gap: 0.4rem; }
.menu__links a {
display: flex;
align-items: baseline;
gap: 1.2rem;
font-size: clamp(2rem, 6vw, 3.6rem);
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.15;
opacity: 0;
transform: translateY(30px);
}
.menu.is-open .menu__links a { opacity: 1; transform: none; transition: opacity 0.25s; }
.menu.is-open .menu__links a:hover { opacity: 0.6; }
.menu__num { color: var(--orange); }
.menu__foot {
display: flex;
flex-wrap: wrap;
gap: 3rem;
font-size: 0.95rem;
line-height: 1.7;
}
.menu__label { display: block; color: var(--orange); margin-bottom: 0.6rem; }
/* ---------- Sekcije ----------
Svetlo je podrazumevano (body). Tamne sekcije eksplicitno vraćaju boju teksta. */
.section { padding: var(--space-section) var(--space-inline); }
.section--dark { background: var(--bg-deep); color: var(--bone); }
.section--light { background: var(--bone); color: var(--ink); }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Etiketa: ◆ ostaje narandžast detalj, tekst ide u čitljivu sivu */
.section__label { display: block; color: var(--muted-on-light); margin-bottom: 2.2rem; }
.section__label::first-letter { color: var(--orange); }
.section--dark .section__label,
.page-hero .section__label { color: var(--orange); }
/* ---------- Hero ----------
Viši od ekrana (240svh): slika je sticky pa se kroz nju duže skroluje,
a .hero__fade je scrub-om pretapa u pozadinu — kao na fluid.glass. */
.hero {
position: relative;
height: 240svh;
background: var(--paper);
}
.hero__pin {
position: sticky;
top: 0;
height: 100svh;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
color: var(--bone);
background: var(--bg-deepest);
}
/* Tri klase namerno: .ph-img (dolazi kasnije u fajlu, ista specifičnost) bi
figuru vratio u normalan tok visine 100% i izgurao naslov ISPOD donje ivice
pinovanog heroa — naslov se onda ne vidi ni na jednoj veličini ekrana. */
.hero__pin .hero__media.ph-img,
.hero__media {
position: absolute;
inset: 0;
height: auto;
overflow: hidden;
}
.hero__media img { height: 100%; }
/* Siva preko fotografije — da naslov i etikete budu čitljiviji */
.hero__media::after {
content: "";
position: absolute;
inset: 0;
background: var(--bg);
opacity: 0.4;
pointer-events: none;
}
/* Sloj koji UZMIČE: sve u herou se zamuti i odmakne unazad */
.hero__recede {
position: absolute;
inset: 0;
transform-origin: 50% 45%;
will-change: transform, filter;
/* naslov i etikete idu na DNO kadra — figura je apsolutna podloga,
pa raspored drži ovaj flex, ne tok dokumenta */
display: flex;
flex-direction: column;
justify-content: flex-end;
}
/* Novi BELI prozor prelazi preko heroa, odozdo naviše */
.hero__fade {
position: absolute;
inset: 0;
z-index: 3;
background: var(--white);
pointer-events: none;
will-change: transform;
}
html.js .hero__fade { transform: translate3d(0, 100%, 0); }
html.no-motion .hero { height: 100svh; }
html.no-motion .hero__fade { display: none; }
html.no-motion .hero__recede { filter: none !important; transform: none !important; }
/* Vinjeta za čitljivost — bez pune boje na dnu, jer .hero__fade
sada preuzima prelaz i vodi ga u svetlu podlogu. */
.hero__shade {
position: absolute;
inset: 0 0 -2px 0;
background:
linear-gradient(to bottom,
rgba(54, 52, 53, 0.74) 0%,
rgba(54, 52, 53, 0.3) 22%,
rgba(54, 52, 53, 0.14) 40%,
rgba(54, 52, 53, 0.34) 68%,
rgba(54, 52, 53, 0.6) 88%,
rgba(54, 52, 53, 0.66) 100%);
}
.hero__content {
position: relative;
z-index: 2;
padding: 0 var(--space-inline);
margin-bottom: clamp(6rem, 12vh, 9rem);
text-align: center;
}
.hero__title {
font-size: var(--fs-display);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.025em;
max-width: 16ch;
margin: 0 auto;
text-shadow: 0 2px 32px rgba(54, 52, 53, 0.55);
}
.hero__foot {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 0 var(--space-inline) 1.6rem;
text-shadow: 0 1px 14px rgba(54, 52, 53, 0.6);
}
.hero__label { color: var(--orange); }
.hero__since { opacity: 0.85; }
/* "Skroluj" indikator je uvek iza plutajuće trake — sklonjen */
.hero__scroll { display: none; }
/* ---------- Intro ---------- */
.intro { max-width: 1200px; }
.intro__text {
font-size: var(--fs-intro);
font-weight: 300;
line-height: 1.25;
letter-spacing: -0.015em;
max-width: 24ch;
}
.intro__row { margin-top: 3rem; }
/* ---------- O kompaniji ---------- */
.about__grid {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(3rem, 6vw, 7rem);
align-items: start;
}
.about__text .h2 { margin-bottom: 1.8rem; }
.about__text .body-lg { color: var(--muted-on-light); max-width: 46ch; }
.about__media {
aspect-ratio: 4 / 5;
border-radius: var(--radius);
}
.about__media img { height: 115%; }
.stats {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: start;
gap: clamp(2rem, 5vw, 4.5rem);
margin-top: 3.5rem;
padding-top: 2.5rem;
border-top: 1px solid var(--line-on-light);
}
.stat__num {
display: block;
font-size: clamp(2.4rem, 4.5vw, 4rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
color: var(--ink);
}
.stat__label { display: block; margin-top: 0.7rem; color: var(--muted-on-light); }
/* ---------- Marquee ---------- */
.marquee {
overflow: hidden;
padding: 1.4rem 0;
background: var(--bg-deep);
color: var(--bone);
}
.marquee__track { display: flex; white-space: nowrap; will-change: transform; }
.marquee__item {
font-family: var(--font-mono);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.18em;
color: var(--orange);
flex-shrink: 0;
}
/* ---------- Usluge ---------- */
.services__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.services__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.service-card {
display: flex;
flex-direction: column;
border-radius: var(--radius);
overflow: hidden;
background: var(--card);
border: 1px solid var(--line);
transition: transform 0.4s var(--ease-out), border-color 0.4s;
}
.service-card:hover { transform: translateY(-6px); border-color: var(--line-strong); }
.service-card__media { aspect-ratio: 16 / 10; }
.service-card__media img {
transition: transform 0.8s var(--ease-out);
}
.service-card:hover .service-card__media img { transform: scale(1.06); }
.service-card__body { padding: 1.8rem 1.6rem 1.6rem; display: flex; flex-direction: column; gap: 0.8rem; flex: 1; }
.service-card__num { color: var(--orange); }
.service-card__body p { color: var(--muted-2); font-size: 0.98rem; flex: 1; }
.service-card__body .link-arrow { color: var(--bone); }
.services__cta { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* ---------- Reference / projekti ---------- */
.projects__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.project { margin-bottom: clamp(4rem, 9vw, 8rem); }
.project:last-of-type { margin-bottom: 0; }
.project__media {
aspect-ratio: 16 / 9;
border-radius: var(--radius);
}
.project__media img { height: 115%; }
.project__info {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-top: 1.6rem;
}
.project__title {
font-size: clamp(1.8rem, 3.6vw, 3rem);
font-weight: 500;
letter-spacing: -0.02em;
}
.project__tags { display: flex; gap: 1.6rem; color: var(--muted-on-light); }
.projects__cta { margin-top: clamp(4rem, 8vw, 6rem); }
/* ---------- Vrednosti ---------- */
.values__list { display: flex; flex-direction: column; }
.value {
display: grid;
grid-template-columns: auto minmax(0, 0.6fr) minmax(0, 1fr);
gap: clamp(1.5rem, 5vw, 5rem);
align-items: baseline;
padding: 2.6rem 0;
border-top: 1px solid var(--line);
}
.value:last-child { border-bottom: 1px solid var(--line); }
.value__num { color: var(--orange); }
.value__title {
font-size: clamp(1.6rem, 3.2vw, 2.6rem);
font-weight: 500;
letter-spacing: -0.02em;
}
.value p { color: var(--muted); max-width: 44ch; }
/* ---------- Proces (svetla sekcija) ---------- */
.process__head { margin-bottom: clamp(3rem, 6vw, 5rem); }
.process__list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 2.5rem);
}
.process__step {
border-top: 1px solid var(--line-on-light);
padding-top: 1.6rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
}
.process__num { color: var(--muted-on-light); }
.process__step p { color: var(--muted-on-light); font-size: 0.98rem; }
/* ---------- Kontakt ---------- */
.contact__title {
font-size: var(--fs-display);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.025em;
max-width: 14ch;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.contact__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 3rem);
padding-top: 2.5rem;
border-top: 1px solid var(--line);
font-size: 1.05rem;
line-height: 1.8;
}
.contact__label { display: block; color: var(--orange); margin-bottom: 0.8rem; }
.contact__block a { border-bottom: 1px solid transparent; transition: border-color 0.25s; }
.contact__block a:hover { border-color: var(--orange); }
.contact__map {
margin-top: clamp(3rem, 6vw, 5rem);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
}
.contact__map iframe {
display: block;
width: 100%;
height: clamp(320px, 45vw, 460px);
border: 0;
filter: invert(0.92) grayscale(1) contrast(0.88);
}
.contact__maplink { margin-top: 1.2rem; }
/* ---------- Footer ---------- */
.footer {
background: var(--bg-deepest);
color: var(--bone);
padding: clamp(4rem, 8vw, 6rem) var(--space-inline) 2rem;
border-top: 1px solid var(--line);
}
.footer__word {
font-size: clamp(2.5rem, 11vw, 11rem);
font-weight: 600;
letter-spacing: 0.01em;
line-height: 0.95;
text-align: center;
opacity: 0.13;
user-select: none;
margin-bottom: clamp(3rem, 6vw, 5rem);
white-space: nowrap;
}
.footer__grid {
display: grid;
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.9fr) minmax(0, 0.85fr); /* kontakt u sredini nosi dve kolone */
gap: 2.5rem;
padding-top: 2rem;
border-top: 1px solid var(--line);
}
.footer__col { display: flex; flex-direction: column; gap: 0.35rem; }
.footer__col a {
opacity: 0.7;
transition: opacity 0.25s, color 0.25s;
width: fit-content;
display: inline-flex;
align-items: center;
min-height: 34px;
}
.footer__col a:hover { opacity: 1; color: var(--orange); }
.footer__col > span:not(.footer__label) { opacity: 0.6; padding-block: 0.35rem; }
.footer__label { color: var(--orange); }
.footer__col--right { align-items: flex-end; text-align: right; }
/* kontakt u podnožju: ikonica (telefon, koverta, pin) ispred teksta u
narandžastoj kao ◆ oznake; adrese e-pošte malim slovima iako nose .label
(klijent: „naziv maila malim slovima") */
/* v2: stavke krupnije (0.95rem umesto 0.7rem) i u DVE kolone — levo telefon i
adresa, desno e-pošta (klijent) */
.footer__kontakti {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.35rem clamp(1.5rem, 3vw, 3rem);
margin-top: 0.2rem;
}
.footer__kontakti-grupa { display: flex; flex-direction: column; gap: 0.35rem; }
.footer__kontakti-grupa > span { opacity: 0.6; padding-block: 0.35rem; }
.footer__kontakt { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.95rem; letter-spacing: 0.06em; }
.footer__ikona {
width: 1.25em;
height: 1.25em;
flex: none;
fill: none;
stroke: var(--orange);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.footer__col a[href^="mailto:"] { text-transform: none; }
/* ---------- Podstranice (hero traka) ---------- */
.page-hero {
background: var(--bg-deepest);
color: var(--bone);
padding: clamp(9rem, 18vh, 13rem) var(--space-inline) clamp(3.5rem, 7vw, 5.5rem);
}
/* svetla varijanta (Projekti): bela podloga, tamno mastilo — bez sivog panela */
.page-hero--svetli { background: var(--paper); color: var(--ink); }
.page-hero__title {
font-size: var(--fs-display);
font-weight: 500;
line-height: 1.02;
letter-spacing: -0.025em;
}
/* Detalji usluga */
.detail {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
padding: clamp(3.5rem, 7vw, 6rem) var(--space-inline);
border-top: 1px solid var(--line-on-light);
scroll-margin-top: 2rem;
}
.detail:nth-child(even) .detail__media { order: -1; }
.detail__media {
aspect-ratio: 4 / 3;
border-radius: var(--radius);
}
.detail__media img { height: 112%; }
.detail__num { display: block; color: var(--muted-on-light); margin-bottom: 1.2rem; }
.detail__title {
font-size: clamp(1.8rem, 3.4vw, 2.8rem);
font-weight: 500;
letter-spacing: -0.02em;
margin-bottom: 1.2rem;
}
.detail__text { color: var(--muted-on-light); max-width: 50ch; }
.detail__list { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; }
.detail__list li {
display: flex;
gap: 0.7rem;
color: var(--muted-on-light);
font-size: 0.98rem;
}
.detail__list li::before { content: "◆"; font-size: 0.55rem; line-height: 2.2; color: var(--orange); }
/* Trake: ugradnja / transport / garancija (svetla sekcija) */
/* Reference — puna lista (svetla sekcija) */
/* ══════════════════════════════════════════════════════════════
PROJEKTI — hero sa indeksom, tri celine, galerija enterijera, lupa
v3 (rekonstrukcija): mreža jednakih pločica umesto editorijalne mreže u
prirodnoj razmeri — klijent: „ne sviđa mi se kako izgleda, neka ostane
jednostavno, tri celine ostaju".
══════════════════════════════════════════════════════════════ */
.prj-uvod {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
padding: clamp(8rem, 17vh, 12rem) var(--space-inline) clamp(3rem, 7svh, 5rem);
}
.prj-uvod__copy .section__label { margin-bottom: 1.2rem; }
/* celina koja još nema fotografije: prigušena, ali VIDLJIVA — podela je
poenta strane, pa se sve tri stavke uvek vide */
.prj-indeks__st--ceka a { color: var(--muted-on-light); }
.prj-indeks__st--ceka .prj-indeks__no { color: color-mix(in srgb, var(--orange) 60%, transparent); }
.prj-celina--ceka .prj-celina__naslov { color: var(--muted-on-light); }
.prj-celina--ceka .prj-celina__no { color: color-mix(in srgb, var(--orange) 60%, transparent); }
.prj-ceka {
color: var(--muted-on-light);
max-width: 52ch;
margin: 0;
padding-block: clamp(0.5rem, 2svh, 1.2rem) clamp(1rem, 3svh, 2rem);
}
/* indeks: tri reda, broj u narandžastoj, tanka crta (broj objekata sklonjen na zahtev klijenta) */
.prj-indeks { list-style: none; margin: 0; padding: 0; }
.prj-indeks__st + .prj-indeks__st { margin-top: 0.2rem; }
.prj-indeks__st a {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: 0 1rem;
padding: clamp(0.9rem, 2svh, 1.3rem) 0;
border-bottom: 1px solid var(--kpr-linija, color-mix(in srgb, var(--white) 18%, transparent));
color: var(--white);
text-decoration: none;
transition: border-color 0.35s ease;
}
.prj-indeks__st a:hover, .prj-indeks__st a:focus-visible { border-color: var(--orange); }
.prj-indeks__no { color: var(--orange); }
.prj-indeks__ime {
font-size: clamp(1rem, 1.35vw, 1.25rem);
font-weight: 500;
line-height: 1.25;
text-wrap: balance;
}
/* glava celine: broj + naslov levo, brojka desno, linija ispod */
.prj-celina { padding: 0 var(--space-inline) clamp(3rem, 8svh, 5.5rem); scroll-margin-top: 2rem; }
.prj-celina__glava {
display: flex;
align-items: baseline;
gap: 0.9rem 1.5rem;
flex-wrap: wrap;
margin-bottom: clamp(2rem, 5svh, 3.5rem);
padding-bottom: clamp(0.8rem, 2svh, 1.4rem);
border-bottom: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
}
.prj-celina__no { color: var(--orange); }
.prj-celina__no::first-letter { color: var(--orange); }
.prj-celina__naslov {
font-stretch: 115%;
font-weight: 600;
font-size: clamp(1.5rem, 3vw, 2.6rem);
letter-spacing: -0.02em;
line-height: 1.05;
margin-right: auto;
}
.prj-celina__broj { color: var(--muted-on-light); white-space: nowrap; }
/* galerija enterijera (v3): iste pločice 4:3 kao galerije objekata; klik
otvara fotografiju u lupi u punoj, prirodnoj razmeri */
.prj-galerija {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.6rem);
}
.prj-galerija__s,
.proj-galerija__s {
margin: 0;
aspect-ratio: 4 / 3;
overflow: clip;
background: color-mix(in srgb, var(--white) 8%, transparent);
}
.prj-lupa-dugme {
display: block;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
}
.prj-lupa-dugme img { display: block; width: 100%; height: 100%; object-fit: cover; }
.prj-lupa-dugme:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
/* lupa: fotografija preko celog ekrana (raste sa svog mesta, isti potez
kao morf sa kartice) */
.prj-lupa {
position: fixed;
inset: 0;
z-index: 2100;
background: color-mix(in srgb, var(--gray) 92%, transparent);
opacity: 0;
}
.prj-lupa__zatvori {
position: fixed;
top: clamp(1rem, 3svh, 1.8rem);
right: var(--space-inline);
z-index: 2102;
min-width: 44px; min-height: 44px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid color-mix(in srgb, var(--white) 26%, transparent);
background: color-mix(in srgb, var(--gray) 80%, transparent);
color: var(--white);
font-family: var(--font-mono);
font-size: 1rem;
cursor: pointer;
transition: border-color 0.3s ease;
}
.prj-lupa__zatvori:hover { border-color: var(--orange); }
.prj-lupa-kadar { position: fixed; z-index: 2101; overflow: hidden; margin: 0; }
.prj-lupa-kadar img { width: 100%; height: 100%; object-fit: cover; }
/* ── mreža projekata (v3): mirna mreža JEDNAKIH pločica ──
Tri u redu (dve na tabletu, jedna na telefonu), kadar 4:3 sa
object-fit: cover — cela fotografija stoji na strani objekta i u lupi.
Ispod slike red sa ◆ lokacijom i rednim brojem u celini (CSS brojač),
pa ime (red „radovi” sklonjen na zahtev klijenta — stoji u traci na strani
objekta). Naslovne koje nisu dobro kadrirane u 4:3 nose inline
object-position (Hilton 50% 15%, Palilulska 50% 85%) — isti položaj i u
hero-u i na traci „sledeći”, a morf i lupa ga kopiraju u klon. Isti jezik kao pločice usluga na početnoj (.uslmr__*):
tanka linija ispod slike koja na hover pređe u narandžastu. BEZ zuma
slike. Ranija editorijalna mreža (prirodne razmere, pomereni počeci,
nth-child(6n+k)) je ukinuta — strana je imala 7.000 px i delovala
razbacano. */
.projmreza {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(2.2rem, 4vw, 3.4rem) clamp(1.5rem, 3vw, 3rem);
counter-reset: pkart;
}
.pkart { display: block; color: inherit; counter-increment: pkart; }
.pkart__foto {
position: relative;
margin: 0;
aspect-ratio: 4 / 3;
overflow: clip;
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
/* natpis na hover — bez zuma slike (fotografije se ne diraju);
samo tamo gde pokazivač postoji, na dodir je klik ionako dovoljan */
.pkart__vise {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%) translateY(6px);
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.15rem;
background: color-mix(in srgb, var(--gray) 82%, transparent);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
color: var(--white);
white-space: nowrap;
opacity: 0;
pointer-events: none;
}
@media (hover: hover) {
.pkart__vise { transition: opacity 0.3s ease, transform 0.35s var(--ease-out, ease); }
.pkart:hover .pkart__vise,
.pkart:focus-visible .pkart__vise { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.pkart__vise { transition: opacity 0.3s ease; transform: translate(-50%, -50%); }
.pkart:hover .pkart__vise, .pkart:focus-visible .pkart__vise { transform: translate(-50%, -50%); }
}
.pkart__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* red ispod slike: ◆ lokacija levo, redni broj u celini desno, linija iznad */
.pkart__gde {
display: block;
margin-top: 0.85rem;
padding-top: 0.7rem;
border-top: 1px solid var(--line-on-light);
color: var(--muted-on-light);
transition: border-color 0.35s var(--ease-out);
}
.pkart__gde::first-letter { color: var(--orange); }
.pkart__gde::after { content: counter(pkart, decimal-leading-zero); float: right; }
.pkart__ime {
font-stretch: 115%;
font-weight: 600;
font-size: clamp(1.15rem, 1.6vw, 1.5rem);
letter-spacing: -0.015em;
line-height: 1.1;
margin-top: 0.45rem;
text-wrap: balance;
}
.pkart:hover .pkart__gde,
.pkart:focus-visible .pkart__gde { border-color: var(--orange); }
.pkart:hover .pkart__ime,
.pkart:focus-visible .pkart__ime {
text-decoration: underline;
text-underline-offset: 0.14em;
text-decoration-thickness: 2px;
}
@media (max-width: 1180px) {
.projmreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* CTA traka na podstranicama */
.cta-band { text-align: left; }
.cta-band__title {
font-size: var(--fs-h2);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
max-width: 18ch;
margin-bottom: 2.5rem;
}
/* ============================================================
EFEKAT 1 — Wipe reveal sa divergentnim paralaksom
Klipuje se SAMO boja (.wipe__paint u .wipe__clip).
Blokovi su sibling iznad, pa slike slobodno vire van panela.
============================================================ */
/* Geometrija je u tokenima: isti brojevi koje čita i JS formula.
Invarijanta: --copy-h < --fig-h, inače slika ne može prva da pređe ivicu. */
.wipe {
--sec-pad: 26; /* rezerva za slike koje kretanjem izađu iz panela */
--blocks-pad: 9;
--fig-h: 40;
--copy-h: 28;
position: relative;
z-index: 1;
background: var(--paper);
color: var(--ink);
padding-block: calc(var(--sec-pad) * 1svh);
overflow-x: clip;
isolation: isolate;
}
.wipe__stage { position: relative; }
/* Telefon/tablet: panel je taman ODMAH. Copy je pisan belim za grafitnu
podlogu, a u mobilnom stack rasporedu sedi visoko — farba bi do njega
stigla tek kasnije i tekst bi stajao belo-na-belom. Farba i dalje klizi,
samo je neprimetna jer je iste boje kao podloga. */
@media (max-width: 820px) {
.wipe__stage { background: var(--gray); }
}
/* Sloj 1 — boja */
.wipe__clip {
position: absolute;
inset: 0 -1px;
z-index: 1;
overflow: clip;
pointer-events: none;
}
.wipe__paint {
position: absolute;
inset: 0;
background: var(--bg-deepest);
will-change: transform;
backface-visibility: hidden;
}
html.js .wipe__paint { transform: translate3d(0, 100%, 0); }
/* Sloj 2 — sadržaj.
Blokovi KREĆU u celosti unutar panela; tek ih kretanje izgura napolje.
Slika je viša od teksta i sedi na spoljnoj strani reda, pa uvek ona
prva pređe ivicu, dok tekst ostaje na panelu. */
.wipe__blocks {
position: relative;
z-index: 2;
min-height: calc((var(--sec-h, 154) - 2 * var(--sec-pad)) * 1svh);
padding: calc(var(--blocks-pad) * 1svh) var(--space-inline);
display: grid;
align-content: space-between;
gap: clamp(1.5rem, 3.5svh, 3rem);
}
.wipe__block {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
color: var(--bone);
will-change: transform, opacity;
}
html.js .wipe__block { opacity: 0; }
.wipe__label { display: block; color: var(--muted); margin-bottom: 1rem; }
.wipe__label::first-letter { color: var(--orange); }
/* Naslov je namerno manji nego u ostalim sekcijama: tekst mora da ostane
niži od slike da bi slika prva prešla ivicu panela. */
.wipe .h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); max-width: 15ch; }
.wipe__copy p { color: var(--muted); max-width: 38ch; margin-bottom: 1.2rem; }
.wipe__copy .link-arrow { color: var(--bone); }
.wipe__fig {
height: calc(var(--fig-h) * 1svh);
border-radius: var(--radius);
}
/* Tekst dobija REZERVISANU visinu — pojedinačni redovi prestaju da utiču na formulu.
Ranije je ovde stajao komentar „naslov mora ostati niži od slike"; sada je to sprovedeno. */
@media (min-width: 821px) {
.wipe__copy { height: calc(var(--copy-h) * 1svh); overflow: clip; overflow-clip-margin: 0.2em; }
}
/* tekst ka sredini panela, slika ka ivici kroz koju blok izlazi */
.wipe__block:first-child .wipe__copy { align-self: end; }
.wipe__block:last-child .wipe__copy { align-self: start; }
.wipe__block:last-child .wipe__fig { order: -1; }
/* ============================================================
EFEKAT 2 — Inverzija kroz zajedničku srednju nijansu
--inv-bg i --inv-ink postavlja JS iz jedne mix() funkcije.
============================================================ */
[data-invert] {
background: var(--inv-bg, var(--paper));
color: var(--inv-ink, var(--bg)); /* polazno: sivi tekst na beloj */
}
[data-invert] p,
[data-invert] .section__label,
[data-invert] .value__num,
[data-invert] .value__title { color: inherit; }
[data-invert] p { opacity: 0.68; }
[data-invert] .section__label,
[data-invert] .value__num { opacity: 0.75; }
[data-invert] .section__label::first-letter { color: inherit; }
[data-invert] .value,
[data-invert] .value:last-child {
border-color: color-mix(in srgb, var(--inv-ink, var(--bg)) 18%, transparent);
}
@supports not (color: color-mix(in srgb, red, blue)) {
[data-invert] .value, [data-invert] .value:last-child { border-color: var(--line-on-light); }
}
/* Bez JS-a i bez animacija: odmah krajnje stanje */
html:not(.js) [data-invert],
html.no-motion [data-invert] { --inv-bg: var(--bg); --inv-ink: var(--paper); }
/* ============================================================
EFEKAT 3 — Pinovan horizontalni skrol (Usluge)
Bazna mreža ostaje netaknuta i služi kao fallback.
============================================================ */
/* ── naslov sekcije proizvoda ──
Stoji u zakucanoj pozornici i NE klizi sa panelima (van je trake); boju
nasleđuje od scrub inverzije stranice (--pg-ink). U statičnom režimu
(bez JS-a / telefon položeno) ponaša se kao običan naslov iznad mreže. */
.services__glava { padding: 0 var(--space-inline); }
.services__naslov {
font-stretch: 115%;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(1.5rem, 3.2vw, 3.2rem);
line-height: 1;
letter-spacing: -0.03em;
color: var(--pg-ink, var(--gray));
}
[data-hs-mode="pin"] .services__glava {
margin-bottom: clamp(1.2rem, 3.5svh, 2.6rem);
flex: 0 0 auto;
}
.services__rail { min-width: 0; }
/* ── Režim trake: JS upisuje data-hs-mode na sekciju 05 ──
"pin" → zakucan ekran + horizontalno klizanje (desktop, tablet, telefon uspravno)
"swipe" → nativno prevlačenje prstom (telefon položeno / vrlo niski ekrani)
bez atributa (bez JS-a, no-motion, ?shot=1) → statična mreža u jednoj koloni */
section[data-fx~="pin-x"][data-hs-mode="pin"] {
height: 100svh;
padding: clamp(3rem, 7svh, 5rem) 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow: clip;
}
[data-hs-mode="pin"] .services__rail { overflow: clip; min-height: 0; }
[data-hs-mode="pin"] .services__grid {
display: flex;
width: max-content;
gap: var(--hs-gap);
padding-left: var(--hs-lead);
padding-right: var(--hs-trail);
will-change: transform;
}
[data-hs-mode="swipe"] .services__rail {
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
margin-inline: calc(var(--space-inline) * -1);
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
[data-hs-mode="swipe"] .services__rail::-webkit-scrollbar { display: none; }
[data-hs-mode="swipe"] .services__grid {
display: flex;
width: max-content;
padding-inline: var(--space-inline);
transform: none !important;
}
[data-hs-mode="swipe"] .hs-item,
[data-hs-mode="swipe"] .hs-end {
width: 82vw;
flex: 0 0 82vw;
scroll-snap-align: start;
}
[data-hs-mode="swipe"] .hs-end { min-height: 62svh; }
/* ============================================================
ANIMACIONA STANJA (samo kada je JS aktivan)
============================================================ */
html.js [data-reveal] { opacity: 0; transform: translateY(40px); }
html.js .media-reveal { clip-path: inset(100% 0 0 0); }
/* početno uvećanje važi dok otkrivanje ne završi — JS tada dodaje --kraj i
čisti inline transform, pa CSS hover zum na karticama može da preuzme */
html.js .media-reveal:not(.media-reveal--kraj) img { transform: scale(1.25); }
html.js [data-split] .split-word,
html.js [data-split-lines] .split-word { display: inline-block; }
html.js [data-split] .split-mask,
html.js [data-split-lines] .split-mask {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
/* dole je rezervisano za repove (g, j, p), GORE za kvačice na Č, Ć, Š, Ž —
naslovi idu sa line-height 0.92 pa maska inače seče kvačicu */
margin-bottom: -0.12em;
padding-bottom: 0.12em;
margin-top: -0.22em;
padding-top: 0.22em;
}
html.js [data-split] .split-word { transform: translateY(110%); }
html.js [data-split-lines] .split-word { transform: translateY(110%); }
/* Sve vidljivo kada korisnik traži manje animacija */
html.no-motion [data-reveal],
html.no-motion .media-reveal,
html.no-motion .media-reveal img,
html.no-motion [data-split] .split-word,
html.no-motion [data-split-lines] .split-word,
html.no-motion .wipe__paint,
html.no-motion .wipe__block {
opacity: 1 !important;
transform: none !important;
clip-path: none !important;
}
html.no-motion .hero__scroll { animation: none; }
html.no-motion .preloader { display: none; }
/* Wipe bez animacije: panel je pun, blokovi u normalnom ritmu */
html.no-motion .wipe { padding-block: clamp(4rem, 9svh, 7rem); }
html.no-motion .wipe__blocks { min-height: 0; padding-block: clamp(3rem, 7svh, 5rem); }
html.no-motion .wipe__fig { margin: 0 !important; height: auto; aspect-ratio: 4 / 3; }
html.no-motion [data-fx-blurred] { filter: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1024px) {
.services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 3rem; }
.value { grid-template-columns: auto minmax(0, 1fr); }
.value p { grid-column: 2; }
}
@media (max-width: 820px) {
.topbar__meta { display: none; }
.topbar { grid-template-columns: auto 1fr; }
.topbar__logo { justify-self: start; }
.about__grid { grid-template-columns: 1fr; }
.about__media { order: -1; aspect-ratio: 16 / 10; }
.detail { grid-template-columns: 1fr; align-items: start; }
.detail:nth-of-type(even) .detail__media { order: -1; }
.detail__media { order: -1; }
.contact__grid { grid-template-columns: 1fr; gap: 2rem; }
.projmreza { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.5rem, 8vw, 4rem); }
.projmreza .pkart { grid-column: auto; margin-top: 0; }
/* Projekti na telefonu: hero u kolonu, galerija u jednu kolonu */
.prj-uvod { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 6svh, 3rem); padding-top: clamp(6rem, 14svh, 8rem); }
.prj-galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.footer__grid { grid-template-columns: 1fr; }
.footer__kontakti { grid-template-columns: minmax(0, 1fr); }
.footer__col--right { align-items: flex-start; text-align: left; }
}
@media (max-width: 820px) {
.hero { height: 200svh; }
.hero__foot {
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding-bottom: 6.8rem;
text-align: center;
}
.wipe { padding-block: 14svh; }
.wipe__blocks { min-height: 0; padding: 9svh var(--space-inline); }
.wipe__block { grid-template-columns: 1fr; gap: 1.6rem; }
.wipe__block:last-child .wipe__fig { order: 0; }
.wipe__fig { height: auto; aspect-ratio: 4 / 3; }
.wipe__block:first-child .wipe__copy,
.wipe__block:last-child .wipe__copy { align-self: auto; }
}
@media (max-width: 560px) {
.services__grid { grid-template-columns: 1fr; }
.process__list { grid-template-columns: 1fr; }
.stats { grid-template-columns: 1fr 1fr; }
.hero__since { display: none; }
}
/* ============================================================
SKELET — konvencija
Klase su izgled. Data-atributi su ponašanje. id je adresa.
data-sec je samo etiketa za razgovor.
Ovaj blok je ADITIVAN: dok u HTML-u nema [data-sec] ni .ph-*,
ne menja nijedan piksel.
NIKAD ne stilizuj goli `section` — style.css služi i podstranicama.
============================================================ */
/* Padding sekcije je vezan za ŠIRINU (--space-section je 13vw), a visina za VISINU (svh).
Na širokom-a-niskom ekranu bi padding pojeo ceo budžet, pa ga kapiramo visinom ekrana.
Time ceo sistem postaje jednodimenzionalan i rezerve važe na svakom odnosu stranica. */
[data-sec].section { padding-block: min(var(--space-section), 11svh); }
/* ---------- 1. Visine sekcija ---------- */
/* --sec-h je bezdimenzioni broj svh, da bi ušao u calc() aritmetiku. */
[data-sec] {
height: calc(var(--sec-h, 100) * 1svh);
counter-reset: ph-img; /* [SLIKA n] se broji po sekciji → reorder sam prenumeriše */
}
/* Ispod 820px visinu preuzima sadržaj: --sec-h-m je keyword (auto), ne broj. */
@media (max-width: 820px) {
[data-sec] { height: var(--sec-h-m, auto); }
}
html.no-motion [data-sec] { height: var(--sec-h-static, auto); }
/* Izuzetak: sekcija čiju visinu diktira medija FIKSNOG ODNOSA preko pune širine.
Takva visina je funkcija širine, pa se ne može pošteno izraziti u svh — bilo koja
svh rezerva je ili preuska na niskom ekranu ili ostavlja mrtav prostor na visokom.
Zamena teksta je i dalje ne može pomeriti: svaki tekstualni slot unutra je
rezervisan u redovima, a broj stavki je struktura (--item-n). */
[data-sec][data-sec-auto] { height: auto; }
/* Sekcije sa unutrašnjim sticky prozorom (hero). --sec-h je staza, --sec-view je prozor. */
[data-fx-part="pin"] {
position: sticky;
top: 0;
height: calc(var(--sec-view, 100) * 1svh);
}
/* ---------- 2. Placeholder slika ---------- */
/* Kutija postoji pre slike: aspect-ratio je na kontejneru, ne na ![]()
.
Zato lazy-load i spora mreža ne mogu ništa da pomere. */
.ph-img {
position: relative;
aspect-ratio: var(--ar, 16 / 10);
height: var(--ph-h, auto);
background: var(--ph-fill, color-mix(in srgb, currentColor 12%, transparent));
border-radius: var(--radius);
overflow: clip;
}
.ph-img::before {
counter-increment: ph-img;
content: "[SLIKA " counter(ph-img) "]";
position: absolute;
inset: 0;
display: grid;
place-items: center;
font: 500 var(--fs-label) / 1 var(--font-mono);
letter-spacing: 0.14em;
color: color-mix(in srgb, currentColor 55%, transparent);
pointer-events: none;
}
/* Prava slika ide UNUTRA — ništa se ne briše i ništa se ne pomera.
--ph-overscan rezerviše višak koji JE opseg paralakse (ranije .about__media img{height:115%}).
Bez te rezervacije bi ubacivanje obične ![]()
tiho promenilo paralaksu. */
.ph-img > img {
position: absolute;
left: 0;
width: 100%;
height: calc(100% + var(--ph-overscan, 0%));
top: calc(var(--ph-overscan, 0%) / -2);
object-fit: cover;
}
.ph-img:has(img)::before { content: none; }
.ph-img[data-img-error]::before { content: "[SLIKA — GREŠKA]"; color: var(--orange); }
/* ---------- 3. Placeholder tekst ---------- */
/* Rezervacija ide u `lh`, a NE u svh: isti tekst je izmeren kao 26.4svh na jednom
ekranu i 34svh na drugom, jer su fontovi clamp() na vw a sekcije u svh.
`1lh` je tačno jedna linijska kutija OVOG elementa — skalira se sa fontom i zumom. */
.ph-text,
.ph-head {
--ph-lines: 1;
/* content-box: rezerviše se visina TEKSTA; padding elementa se dodaje povrh,
inače bi kod .label sa padding-block tekst prelivao svoju rezervaciju. */
box-sizing: content-box;
height: calc(var(--ph-lines) * 1lh);
}
/* splitWords ubacuje .split-mask sa padding-bottom .12em — rezerviši i to */
html.js [data-split].ph-head,
html.js [data-split-lines].ph-text { height: calc(var(--ph-lines) * 1lh + 0.12em); }
@supports not (height: 1lh) {
/* line-height je svuda bezdimenzioni, pa em radi kao zamena */
.ph-text, .ph-head { height: calc(var(--ph-lines) * var(--ph-lh, 1.6) * 1em); }
}
/* PASUS / PODNASLOV — line-clamp radi i pre i posle zamene pravim tekstom */
.ph-text {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--ph-lines);
overflow: hidden;
}
/* NASLOV — NIKAD line-clamp: on traži display:-webkit-box, a splitWords() ubacuje
.split-mask kao inline-block → svaka reč bi se naslagala u zaseban red.
overflow:clip (ne hidden) jer .split-mask ima padding-bottom:.12em koji bi hidden odsekao. */
.ph-head {
overflow: clip;
overflow-clip-margin: 0.2em;
}
/* Brojevi: rezerviši mesto za najveći očekivani broj cifara, inače 45+ → 1250+ pomera mrežu */
[data-num-digits] { min-width: calc((var(--num-digits, 2) + 1) * 1ch); display: inline-block; }
/* ---------- 4. Debug overlay (?debug=1) ---------- */
html.debug [data-sec] {
outline: 1px dashed color-mix(in srgb, currentColor 30%, transparent);
outline-offset: -1px;
position: relative;
}
html.debug [data-sec]::after {
content: "SEKCIJA " attr(data-sec) " · #" attr(id) " · " attr(data-fx);
position: absolute;
top: 0;
left: 0;
z-index: 500;
font: 500 11px / 1.4 var(--font-mono);
letter-spacing: 0.12em;
background: var(--orange);
color: var(--on-orange);
padding: 0.3rem 0.6rem;
pointer-events: none;
}
html.debug [data-sec][data-sec-mismatch]::after { background: var(--orange); color: var(--gray); }
html.debug .ph-img { outline: 1px dashed color-mix(in srgb, currentColor 35%, transparent); }
html.debug .ph-text,
html.debug .ph-head { background: color-mix(in srgb, currentColor 8%, transparent); }
/* ============================================================
POČETNA — sekcije po referentnoj strukturi
============================================================ */
/* ── 02 · o-nama: veliki centriran tekst koji se boji na skrol ── */
/* ── 02 · KO SMO MI ──────────────────────────────────────────
Pozornica je LEPLJIVA: čim beli prozor prođe preko heroa, ekran se zakuca i
tekst se ispisuje reč po reč kroz tu deonicu (`data-fx-pin` u JS-u mapira
punjenje tačno na trajanje lepljenja).
Podloga nije prazna bela: preko nje idu tanke vertikalne linije — okna
stakla. Boja je ista promenljiva mastila, dakle bez četvrte boje. */
/* Sekcija se penje ZA JEDAN EKRAN u hero, da pozornica bude na vrhu tačno kad
hero otpusti lepljenje — inače bi posle belog prozora prošao ceo ekran praznog
skrola pre nego što tekst stigne. Beli prozor (z-index 3 u heroju) i dalje
prelazi PREKO nje, pa se dolazak ne vidi. */
.kosmo {
position: relative;
margin-top: calc(var(--sec-pull, 0) * -1svh);
}
.kosmo__stage {
position: sticky;
top: 0;
height: 100svh;
overflow: clip;
display: grid;
padding: clamp(5rem, 11svh, 7rem) var(--space-inline) clamp(2rem, 5svh, 3.5rem);
}
/* tri reda: oznaka gore, tekst u sredini, dugme dole */
.kosmo__inner {
display: grid;
grid-template-rows: auto 1fr auto;
gap: clamp(1.2rem, 3svh, 2.2rem);
min-height: 0;
}
.kosmo__glava { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.kosmo__label { display: block; color: var(--ink); font-weight: 500; }
.kosmo__label::first-letter { color: var(--orange); }
.kosmo__telo {
position: relative;
align-self: center;
padding-left: clamp(1.2rem, 2.4vw, 2.2rem);
}
/* narandžasta linija napretka uz levu ivicu teksta — JS je puni (scaleY) */
.kosmo__progres {
position: absolute;
left: 0; top: 0.2em; bottom: 0.2em;
width: 2px;
background: var(--orange);
transform-origin: top;
}
html.js:not(.no-motion) .kosmo__progres { transform: scaleY(0); }
.kosmo__text {
font-size: clamp(1.35rem, 3.05vw, 3.25rem);
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.022em;
max-width: 44ch;
text-wrap: pretty;
}
/* reči: prigušene dok ne dođu na red; „glava" ispisivanja je narandžasta
(--w = 0), pa reč pređe u mastilo (--w = 1). Bez JS-a su sve pune. */
html.js [data-split-fill] .split-word {
--w: 1;
opacity: 0.22;
color: color-mix(in srgb, var(--orange) calc((1 - var(--w)) * 100%), var(--ink));
}
html.no-motion [data-split-fill] .split-word { opacity: 1 !important; color: var(--ink) !important; }
/* dugme izlazi na kraju ispisivanja */
.kosmo__noga { display: flex; justify-content: flex-start; }
html.js:not(.no-motion) .kosmo__noga { opacity: 0; transform: translateY(14px); }
html.no-motion .kosmo__noga { opacity: 1 !important; transform: none !important; }
/* ── 04 · projekti: indeks lista sa hover thumb-om ── */
.pindex { position: relative; }
.pindex__head {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 6rem);
align-items: end;
margin-bottom: clamp(2.5rem, 6svh, 4.5rem);
}
.pindex__intro { color: var(--muted-on-light); max-width: 44ch; }
.pindex__list { border-top: 1px solid var(--line-on-light); }
.pindex__row {
display: grid;
grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr);
gap: clamp(1rem, 3vw, 3rem);
align-items: baseline;
padding: 1.3rem 0;
border-bottom: 1px solid var(--line-on-light);
transition: opacity 0.25s;
}
.pindex__list:hover .pindex__row:not(:hover) { opacity: 0.35; }
.pindex__name { font-size: clamp(1.2rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -0.01em; }
.pindex__year, .pindex__loc { color: var(--muted-on-light); }
.pindex__loc { text-align: right; }
.pindex__thumb {
position: fixed;
left: 0; top: 0;
width: clamp(180px, 20vw, 300px);
z-index: 60;
opacity: 0;
pointer-events: none;
will-change: transform;
}
.pindex__cta { margin-top: clamp(2rem, 5svh, 3.5rem); }
html.no-motion .pindex__thumb { display: none; }
/* ── 05 · proizvodi: paneli u horizontalnoj traci ──
Raspored po referenci (septiembrearquitectura): oznaka i veliki naslov gore levo,
slika gore desno poravnata sa vrhom naslova, pa vazduh, pa dve kolone teksta
na dnu na istoj liniji. Između dva panela stoji pola ekrana praznog prostora.
Boje nasleđuje od stranice (scrub inverzija upisuje --pg-* na ). */
[data-fx~="pin-x"] {
background: transparent;
color: var(--pg-ink, var(--gray));
--hs-w: 56vw; /* širina panela = širina sadržaja */
--hs-w-end: 34vw;
--hs-gap: 52vw; /* prazno između dva panela */
--hs-end-gap: 20vw; /* kraći razmak pred završni panel */
--hs-h: 58svh; /* visina panela: drži trake na istoj liniji */
--hs-col-gap: clamp(2rem, 4.5vw, 5rem);
--hs-label-h: 1.8rem; /* red oznake — i prazan drži visinu */
--hs-fig-w: 0.66; /* udeo slike u širini panela (bez jedinice) */
--hs-title-w: 138%; /* naslov u odnosu na svoju kolonu — pređe preko slike */
--hs-lead: 22vw; /* (100 − hs-w) / 2 → prvi panel centriran na zakucavanju */
--hs-trail: var(--space-inline); /* završni panel stoji uz desnu ivicu */
}
/* Osnovno stanje = jedna kolona, slika prva. Važi bez JS-a, uz reduce-motion
i na telefonu; traka ga na desktopu prepisuje u dvokolonski raspored. */
.hs-item, .hs-end {
display: grid;
grid-template-columns: minmax(0, 1fr);
row-gap: 0.9rem;
}
.hs-item__fig { grid-row: 1; }
.hs-item__num { grid-row: 2; }
.hs-item__title { grid-row: 3; }
.hs-item__text { grid-row: 4; }
.hs-item__side { grid-row: 5; margin-top: 0.4rem; }
.hs-end { align-content: center; }
.hs-title--end { grid-row: 1; }
.hs-end__down { grid-row: 2; }
.hs-end__btn { grid-row: 3; justify-self: start; margin-top: 0.6rem; }
/* Strelica od naslova ka dugmetu: tanka linija sa čistim vrhom, crtana u CSS-u
(glif ↓ se razlikuje od fonta do fonta). Prigušenje ide preko BOJE, ne preko
opacity — opacity je rezervisan za ulaznu animaciju. */
.hs-end__down {
display: block;
position: relative;
width: 1px;
height: clamp(2.6rem, 6.5svh, 4.4rem);
margin: clamp(1.2rem, 3.5svh, 2.2rem) 0 clamp(1.2rem, 3.5svh, 2.2rem);
background: currentColor;
color: var(--muted-on-light);
}
.hs-end__down::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 10px;
height: 10px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translate(-50%, -2px) rotate(45deg);
}
/* Konvencija oznaka: tekst u boji mastila, samo vodeći ◆ narandžast. */
.hs-item__num::first-letter { color: var(--orange); }
.hs-item__title {
text-transform: uppercase;
/* Široki rez Archiva (wdth 115) — arhitektonski, a ostaje u istoj porodici
kao telo teksta. Veličina je malo spuštena jer širi rez zauzima više. */
font-stretch: 115%;
font-weight: 600;
font-size: clamp(1.7rem, 3.1vw, 4rem);
line-height: 1.05;
letter-spacing: -0.015em;
}
.hs-item__text { font-size: 0.98rem; opacity: 0.72; }
.hs-item__side { display: flex; flex-direction: column; gap: 1rem; }
.hs-item__list { display: flex; flex-direction: column; gap: 0.35rem; }
.hs-item__list li {
display: flex;
gap: 0.6rem;
font-size: 0.92rem;
opacity: 0.72;
}
.hs-item__list li::before { content: "◆"; font-size: 0.5rem; line-height: 2.4; color: var(--orange); opacity: 1; }
/* Strelica prati mastilo: panel se vidi i na beloj (pre inverzije) gde
narandžasta na 11px pada ispod 4.5:1. Narandžastu nosi ◆ u oznaci. */
.hs-item__more .arrow { color: inherit; }
.hs-item__fig {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 0; /* oštre ivice, kao na referenci */
overflow: clip;
}
.hs-title {
font-stretch: 115%;
font-size: clamp(2.2rem, 5.4vw, 5rem);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.02em;
}
.hs-title--end { max-width: 9ch; }
/* Statični fallback: trake nema, paneli se slažu jedan ispod drugog. */
[data-fx~="pin-x"] .services__grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(3rem, 8svh, 6rem); }
html.no-motion [data-fx~="pin-x"] .hs-item,
html.no-motion [data-fx~="pin-x"] .hs-end,
html:not(.js) [data-fx~="pin-x"] .hs-item,
html:not(.js) [data-fx~="pin-x"] .hs-end { max-width: 46rem; }
/* Traka u pin režimu: dvokolonski raspored, širine, razmak i ulazna animacija.
Atribut postoji samo kad JS gradi pin, pa je skriveno stanje bezbedno. */
[data-hs-mode="pin"] .hs-item,
[data-hs-mode="pin"] .hs-end {
flex: 0 0 auto;
min-height: var(--hs-h);
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
/* red 1 oznaka · red 2 naslov · red 3 vazduh · red 4 donja traka */
grid-template-rows: minmax(var(--hs-label-h), auto) auto 1fr auto;
column-gap: var(--hs-col-gap);
}
[data-hs-mode="pin"] .hs-end {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(var(--hs-label-h), auto) auto auto auto 1fr;
width: var(--hs-w-end);
/* Razmak pred završni panel je kraći od onog između proizvoda:
flex `gap` je jedinstven, pa se višak skida negativnom marginom. */
margin-left: calc(var(--hs-end-gap) - var(--hs-gap));
}
[data-hs-mode="pin"] .hs-item { width: var(--hs-w); }
[data-hs-mode="pin"] .hs-item__num { grid-area: 1 / 1; align-self: start; }
/* Naslov ide preko svoje kolone i pada PREKO leve ivice slike. */
[data-hs-mode="pin"] .hs-item__title {
grid-area: 2 / 1;
align-self: start;
position: relative;
z-index: 1;
width: var(--hs-title-w);
}
/* Slika hvata obe kolone i naslanja se na desnu ivicu panela — otud je veća,
a naslov joj ulazi u levu ivicu. Kreće od reda 1 da bi imala visinu. */
[data-hs-mode="pin"] .hs-item__fig {
grid-area: 1 / 1 / 4 / 3;
align-self: start;
justify-self: end;
width: calc(var(--hs-w) * var(--hs-fig-w));
/* Visina je EKSPLICITNA, ne preko aspect-ratio + max-height:
kod tog para rešetka meri red po prirodnoj visini slike, a slika se posle
skrati — pa ostane mrtav prostor koji je donju traku gurao na plutajuću
navigaciju. Ovako je red tačno onoliki kolika je i slika.
Prvi član je odnos 3:2 od širine, drugi je kapa za niske ekrane. */
height: min(calc(var(--hs-w) * var(--hs-fig-w) * 2 / 3), calc(72svh - 14rem));
aspect-ratio: auto;
max-height: none;
}
/* Leva ivica slike se stapa sa stranicom da naslov preko nje ostane čitljiv.
Boja je ista promenljiva koju piše inverzija, pa prati i belo i sivo stanje. */
[data-hs-mode="pin"] .hs-item__fig::after {
content: "";
position: absolute;
inset: 0;
/* Puna boja drži prvih 16% (tu leže najduži redovi naslova), pa gasne kroz
više međustanica — sa dve stanice se na svetlim fotografijama vidi rub
prelaza (Mahova traka). */
background: linear-gradient(to right,
var(--pg-bg, var(--white)) 0%,
var(--pg-bg, var(--white)) 16%,
color-mix(in srgb, var(--pg-bg, var(--white)) 82%, transparent) 27%,
color-mix(in srgb, var(--pg-bg, var(--white)) 55%, transparent) 38%,
color-mix(in srgb, var(--pg-bg, var(--white)) 26%, transparent) 49%,
transparent 62%);
}
[data-hs-mode="pin"] .hs-item__text { grid-area: 4 / 1; align-self: start; }
[data-hs-mode="pin"] .hs-item__side { grid-area: 4 / 2; align-self: start; margin-top: 0; }
[data-hs-mode="pin"] .hs-title--end { grid-area: 2 / 1; align-self: start; }
[data-hs-mode="pin"] .hs-end__down { grid-area: 3 / 1; align-self: start; }
[data-hs-mode="pin"] .hs-end__btn { grid-area: 4 / 1; align-self: start; margin-top: clamp(0.4rem, 2svh, 1.2rem); }
/* Početna stanja ulazne animacije, po ulozi dela (vrednost `data-hs-in`).
Iste vrednosti postavlja i GSAP; CSS ih drži da nema bleska pre prvog frejma. */
[data-hs-mode="pin"] [data-hs-in="naslov"] .split-mask {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding: 0.1em 0 0.2em; /* mesto za kvačice: Č Ć Š Ž Đ */
margin: -0.1em 0 -0.2em;
}
[data-hs-mode="pin"] [data-hs-in="naslov"] .split-word {
display: inline-block;
/* 120%, ne 100%: maska ima 0.2em donjeg padinga za repove slova (j, p),
pa reč mora da siđe za toliko više da ne viri vrh. */
transform: translateY(120%);
opacity: 0;
}
[data-hs-mode="pin"] [data-hs-in="slika"] { clip-path: inset(100% 0% 0% 0%); }
[data-hs-mode="pin"] [data-hs-in="slika"] img { transform: scale(1.2); }
[data-hs-mode="pin"] [data-hs-in]:not([data-hs-in="naslov"]):not([data-hs-in="slika"]) { opacity: 0; }
/* Pin na dodirnim ekranima (tablet uspravno, telefon uspravno): panel skoro
pune širine, kraći razmaci — ista mehanika, zbijenija geometrija. */
@media (max-width: 820px) {
[data-fx~="pin-x"][data-hs-mode="pin"] {
--hs-w: 84vw;
--hs-lead: 8vw; /* (100 − 84) / 2 → prvi panel centriran */
--hs-gap: 34vw;
--hs-end-gap: 18vw;
--hs-w-end: 74vw;
--hs-title-w: 100%; /* bez prelaska preko slike — nema mesta */
--hs-label-h: 1.4rem;
}
}
/* Telefon uspravno: unutrašnjost panela u jednoj koloni, slika ispod naslova. */
@media (max-width: 599px) {
.kosmo__text { max-width: none; }
.kosmo__stage { padding-top: clamp(4.5rem, 10svh, 6rem); }
[data-hs-mode="pin"] .hs-item {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto;
row-gap: 0.8rem;
align-content: center;
min-height: 0;
}
[data-hs-mode="pin"] .hs-item__num { grid-area: 1 / 1; }
[data-hs-mode="pin"] .hs-item__title { grid-area: 2 / 1; width: 100%; }
[data-hs-mode="pin"] .hs-item__fig {
grid-area: 3 / 1;
justify-self: stretch;
width: 100%;
height: min(calc(var(--hs-w) * 2 / 3), 32svh);
}
[data-hs-mode="pin"] .hs-item__fig::after { background: none; }
[data-hs-mode="pin"] .hs-item__text { grid-area: 4 / 1; }
[data-hs-mode="pin"] .hs-item__side { grid-area: 5 / 1; }
[data-hs-mode="pin"] .hs-end { min-height: 0; align-content: center; }
}
html.no-motion [data-hs-in] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.no-motion [data-hs-in] img { transform: none !important; }
/* ============================================================
STRANICA „STAKLENE FASADE" (.fas-)
Tekst je 1:1 iz projektnog zadatka — stil ne sme da traži izmene teksta.
============================================================ */
.fas-naslov { font-stretch: 115%; font-weight: 600; text-transform: uppercase; }
/* uvodni pasus: krupno, ispisuje se skrolom (textfill bez pina) */
/* uvod: tekst levo, indeks strane desno — desna polovina je ranije stajala
prazna, a tekst je bio krupniji (37 px) od svega ostalog na strani */
.fas-uvod {
padding-block: clamp(5rem, 12svh, 9rem);
}
.fas-uvod__copy .section__label { margin-bottom: 1.1rem; }
.fas-uvod__tekst {
font-size: clamp(1.2rem, 1.9vw, 1.8rem);
font-weight: 400;
line-height: 1.45;
letter-spacing: -0.01em;
/* uvod ide preko cele širine sadržaja (bio 42ch, pa je desna polovina
stajala prazna); 80ch je gornja granica čitljivosti pri ovoj veličini */
max-width: 80ch;
}
/* Kabine su prve dobile uvod od dva pasusa; globalni reset nosi `margin: 0`,
pa bi se bez ovoga slepili u jedan blok. Mera je u `em` da prati krupan
stepen uvodnog teksta. */
.fas-uvod__tekst + .fas-uvod__tekst { margin-top: 0.7em; }
/* naslovi sekcija = tačno naslovi iz zadatka, verzalom u širem rezu */
.fas-h2 {
font-stretch: 115%;
font-weight: 600;
text-transform: uppercase;
font-size: clamp(1.7rem, 3.2vw, 3.2rem);
line-height: 1.06;
letter-spacing: -0.015em;
}
.fas-h2--svetli { color: var(--white); }
/* tok pasusa ispod naslova */
.fas-sekcija { padding-top: clamp(4rem, 9svh, 7rem); }
.fas-tok {
margin-top: clamp(2rem, 5svh, 3.4rem);
display: flex;
flex-direction: column;
gap: clamp(1.4rem, 3.5svh, 2.4rem);
max-width: 58ch;
}
.fas-tok p { color: var(--muted-on-light); }
/* ── maketa termo paketa: lepljiva pozornica + pasusi koji ističu slojeve ── */
.fas-paket {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 6rem);
padding: 0 var(--space-inline);
align-items: start;
}
.fas-paket__stage {
position: sticky;
top: 0;
height: 100svh;
display: grid;
align-content: center;
justify-items: center;
padding-block: clamp(1.5rem, 4svh, 3rem);
}
.fas-paket__svg { width: 100%; max-width: 560px; height: auto; max-height: 72svh; }
/* legenda slojeva uz maketu — stoji u lepljivoj koloni, aktivni sloj se pali */
.fas-slojevi {
list-style: none;
margin: clamp(1rem, 2.5svh, 1.6rem) 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.4rem;
max-width: 560px;
}
.fas-slojevi__st {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: color-mix(in srgb, var(--white) 45%, transparent);
transition: color 0.35s ease;
}
.fas-slojevi__no { color: color-mix(in srgb, var(--orange) 55%, transparent); margin-right: 0.4em; transition: color 0.35s ease; }
.fas-slojevi__st.je-aktivan { color: var(--white); }
.fas-slojevi__st.je-aktivan .fas-slojevi__no { color: var(--orange); }
.fas-paket__svg text { font-family: var(--font-mono); }
.fas-paket__blokovi {
padding-block: clamp(4rem, 12svh, 8rem);
display: flex;
flex-direction: column;
}
/* Naslov je stajao u kutiji od 30svh (270 px), a prvi blok je centriran u
svojih 58svh — pa je tekst padao 141 px ispod naslova. Naslov je niži, a
prvi blok (uvodni, koji ne vodi nijednu komponentu) poravnat uz vrh. */
.fas-paket__naslov {
min-height: 16svh;
display: flex;
align-items: flex-end;
margin-bottom: clamp(1.6rem, 4svh, 2.6rem);
}
.fas-blok:first-of-type { min-height: 26svh; justify-content: flex-start; }
/* uvodni blok je nosio 24,5 px, a segmenti ispod 16,6 px — sada isto */
.fas-blok:first-of-type p { font-size: clamp(1rem, 1.25vw, 1.2rem); line-height: 1.6; }
.fas-blok {
/* 58svh je davalo ~330 px praznine između susednih segmenata; 40svh drži
dovoljno skrola da maketa stigne da prebaci stanje, a tekstovi su bliži */
min-height: 40svh;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.9rem;
max-width: 44ch;
}
.fas-blok p {
font-size: clamp(1.15rem, 1.7vw, 1.6rem);
line-height: 1.55;
color: rgba(255, 255, 255, 0.85);
}
/* Tanka linija razdvaja delove paketa jedan od drugog. Ide samo IZMEĐU
imenovanih delova (`[data-paket-cilj]` + `[data-paket-cilj]`), pa je nema
iznad „Premazi" — tamo tu ulogu već ima narandžasta strelica. Blok je
visok 40svh sa sadržajem po sredini, pa linija sedi visoko iznad teksta i
čita se kao granica segmenta, a ne kao potcrtavanje naslova. */
.fas-blok[data-paket-cilj] + .fas-blok[data-paket-cilj] {
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Strelica najavljuje spisak delova koji sledi ispod uvodnog pasusa.
`align-self: start` — bez toga bi je flex razvukao preko cele mere bloka. */
.fas-strelica {
display: block;
width: 1.5rem;
height: auto;
align-self: start;
margin-top: clamp(0.6rem, 2svh, 1.2rem);
}
/* podnaslov komponente: mali verzal u širem rezu, ◆ ispred */
.fas-blok__pod {
font-stretch: 115%;
font-weight: 600;
text-transform: uppercase;
font-size: clamp(1.05rem, 1.5vw, 1.35rem);
letter-spacing: 0.04em;
color: var(--white);
}
.fas-blok__pod::before { content: "◆ "; color: var(--orange); font-size: 0.7em; vertical-align: 0.12em; }
/* ============================================================
STRANICA „STAKLENE OGRADE" (.ogr-) — sestra Fasada: isti hero,
uvod i kmp-split poteze deli sa njom; svoje su tri tehničke
skice sistema, uzorci izvedbi i mreža primena.
============================================================ */
.ogr-tipovi__uvod { color: var(--muted-on-light); margin-top: clamp(1rem, 2.5svh, 1.6rem); }
.ogr-sistemi {
display: flex;
flex-direction: column;
gap: clamp(2rem, 4.5svh, 3rem);
margin-top: clamp(2rem, 4.5svh, 3rem);
}
.ogr-sistem {
display: grid;
/* jednake kolone: sadržaj se skuplja ka sredini umesto da beži na ivice
(klijent: „suzbi malo ka sredini tekst i slike") */
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 4rem);
align-items: center;
}
.ogr-sistem:nth-child(even) .ogr-sistem__crtez { order: 2; }
/* skica na ploči — ista boja ploče kao okvir medija u obradama */
.ogr-sistem__crtez {
margin: 0;
background: color-mix(in srgb, var(--white) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
padding: clamp(0.8rem, 1.8vw, 1.5rem);
max-width: 27rem; /* skica je bila 528 px široka — sada ~432 */
}
.ogr-sistem__crtez svg { display: block; width: 100%; height: auto; }
.ogr-sistem__copy { display: flex; flex-direction: column; gap: 0.7rem; }
/* skica i tekst se lepe uz UNUTRAŠNJU ivicu svoje kolone (ka sredini), pa
praznina ostaje na spoljnim ivicama strane. `justify-self`, ne auto margine:
osnovno pravilo `.ogr-sistem__crtez` nosi `margin: 0` i pobedilo bi ih. */
.ogr-sistem__crtez { justify-self: end; }
.ogr-sistem__copy { justify-self: start; max-width: 34rem; }
.ogr-sistem:nth-child(even) .ogr-sistem__crtez { justify-self: start; }
.ogr-sistem:nth-child(even) .ogr-sistem__copy { justify-self: end; }
/* U istoj koloni se, idući naniže, smenjuju tekst jednog reda i skica drugog
(levo: tekst 02, skica 03, tekst 04). Ploča je uža od pasusa — 22rem prema
52ch — a obe su se lepile uz UNUTRAŠNJU ivicu kolone, pa im se sredine nisu
poklapale: pasus je bio centriran 78 px levo od ploče. Klijent: „te slike
malo pomeri da budu tačno na sredini teksta koji iznad/ispod njih".
Zato ploča ostaje na svom kraju kolone, ali se odmakne za POLA razlike te
dve mere — pa joj sredina padne tačno na sredinu pasusa. Obe mere stoje u
istom `calc`, tako da poravnanje preživljava svaku promenu tipografije.
`justify-self` postavlja MARGIN box, pa se eksplicitna margina i poravnanje
ne tuku (za razliku od `auto` margina, koje bi `justify-self` ugasile).
Zaključano na `.ogr-tipovi`: `.ogr-sistem__crtez` nose i Krovovi (sekcija
„Vrsta stakla" i dva paketa), gde ovog naizmeničnog niza nema — bez ovog
ograničenja pomeraj im je curio, a `width` je gasio simetriju paketa. */
.ogr-tipovi .ogr-sistem__crtez {
/* figura postaje samo OKVIR u meri pasusa (52ch), a ploča se u njoj
centrira — pa im sredine padaju na isto mesto ma koliko ploča bila
uža. Prvi pokušaj je bio margina od pola razlike te dve mere; radio je
na 1440, ali je na 834 gurao ploču izvan uže kolone i pravio vodoravni
preliv (863 > 834). Ovako preliv nije moguć: okvir nikad nije širi od
kolone, a ploča nikad od okvira. */
width: 100%;
max-width: 52ch;
background: none;
border: 0;
padding: 0;
display: flex;
justify-content: center;
}
/* ploča (podloga, ivica, unutrašnji razmak) prelazi sa figure na sam crtež */
.ogr-tipovi .ogr-sistem__crtez svg {
width: 22rem;
max-width: 100%;
background: color-mix(in srgb, var(--white) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
padding: clamp(0.8rem, 1.8vw, 1.5rem);
}
.ogr-sistem__br { color: var(--orange); }
.ogr-sistem__br::first-letter { color: var(--orange); }
.ogr-sistem__ime {
font-stretch: 115%;
font-weight: 600;
text-transform: uppercase;
font-size: clamp(1.1rem, 1.6vw, 1.45rem);
letter-spacing: 0.04em;
}
.ogr-sistem__tekst { color: var(--muted-on-light); max-width: 52ch; }
.ogr-zavrsna {
color: var(--muted-on-light);
max-width: 62ch;
margin: clamp(2rem, 4.5svh, 3rem) 0 0;
padding-top: clamp(1.2rem, 3svh, 1.8rem);
border-top: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
}
/* uzorci izvedbi: četiri ploče, sve iz tri boje sajta */
.ogr-uzorci {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1rem, 2.5vw, 1.8rem);
align-self: center;
}
.ogr-uzorak { display: flex; flex-direction: column; gap: 0.55rem; color: var(--muted-on-light); }
/* klijentove fotografije uzoraka su kvadratne (420×420) — prirodna razmera
se ne dira, aspect-ratio se ne primorava. */
.ogr-uzorak__plocica {
display: block;
overflow: clip;
border: 1px solid color-mix(in srgb, var(--white) 22%, transparent);
}
.ogr-uzorak__plocica img { display: block; width: 100%; height: auto; }
/* primene: mreža 2×2, jednake pločice kao kod usluga */
.ogr-primena {
list-style: none;
margin: clamp(2rem, 4.5svh, 3rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.5rem, 3vw, 3rem);
}
.ogr-mesto__foto {
margin: 0;
aspect-ratio: 3 / 2; /* bilo 4/3 — pločica niža za ~55 px */
overflow: clip;
background: color-mix(in srgb, var(--white) 8%, transparent);
}
.ogr-mesto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ogr-mesto__ime {
font-stretch: 115%;
font-weight: 600;
font-size: clamp(1.15rem, 1.7vw, 1.5rem);
letter-spacing: -0.01em;
margin-top: clamp(0.9rem, 2svh, 1.2rem);
}
.ogr-mesto__tekst { color: var(--muted-on-light); margin-top: 0.35rem; max-width: 46ch; }
/* ============================================================
STRANICA „TUŠ KABINE" (.tsk-) — sestra Ograda; deli .ogr-sistem
(tri sistema sa skicama) i .ogr-uzorci (izvedbe stakla).
Svoje su izometrijske skice pet konfiguracija, po uzoru na
referencu koju je klijent poslao.
============================================================ */
.tsk-mreza {
list-style: none;
margin: clamp(2.5rem, 6svh, 4rem) 0 0;
padding: 0;
display: grid;
/* osam konfiguracija → 4×2; petostruka mreža je bila za pet skica */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2.5vw, 2.2rem);
}
.tsk-oblik { display: flex; flex-direction: column; gap: 0.9rem; }
.tsk-oblik__crtez { margin: 0; }
.tsk-oblik__crtez svg { display: block; width: 100%; height: auto; }
/* narandžasta crtica + naziv, kao na referenci */
.tsk-oblik__ime { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--muted-on-light); }
.tsk-oblik__crta { display: inline-block; width: 1.4rem; height: 3px; background: var(--orange); flex: 0 0 auto; }
/* Kabine imaju TRI uzorka (nema emajliranog kao Ograde, a „u pojasevima" je
izbačen jer za njega ne postoji klijentova fotografija). U mreži 2×2 tri
pločice ostavljaju rupu, pa ovde idu u jedan red. */
body[data-page="kabine"] .ogr-uzorci { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ── Tipovi kabina: tri kartice, fotografija pa opis ispod nje ──────────
Klijent: „stavi slike ispod naslova, velike, jedne do druge, a tekst za
svaku sliku ispod njih". Zato ova sekcija NE koristi `.ogr-sistem`
(naizmenični redovi slika|tekst) kao Ograde i Krovovi, nego svoju mrežu —
deljene klase ostaju netaknute, a nasleđuje se samo tipografija opisa
(`.ogr-sistem__br`, `__ime`, `__tekst`), da tri strane govore istim
jezikom. */
.tsk-tipovi {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.4rem, 3vw, 2.8rem);
margin-top: clamp(2rem, 4.5svh, 3rem);
align-items: start;
}
/* kartica je kolona: slika, pa odmah ispod njen opis — nikakvo poravnanje
po visini među karticama, jer bi razvuklo kraće opise */
.tsk-tip { display: flex; flex-direction: column; gap: clamp(0.9rem, 2vw, 1.3rem); }
/* fotografija ide preko cele širine kolone i u PRIRODNOJ razmeri: bez
`aspect-ratio` i bez `object-fit: cover`, jer se klijentove slike ne seku.
Sve tri su portret 4:5 (1280×1600, 1119×1400, 1120×1400), pa im jednaka
širina kolone daje i jednaku visinu — poravnanje dolazi iz same razmere,
ne iz kadriranja. */
.tsk-tip__foto { margin: 0; overflow: clip; }
.tsk-tip__foto img { display: block; width: 100%; height: auto; }
.tsk-tip__copy { display: flex; flex-direction: column; gap: 0.55rem; }
/* mera `.ogr-sistem__tekst` je 52ch i računata je za polovinu strane; ovde
je kolona ionako uža, pa bi ograničenje samo pravilo zabunu */
.tsk-tip .ogr-sistem__tekst { max-width: none; }
/* „Fiksirani paravan (walk-in)" je jedini naslov koji se lomi u dva reda, pa
je njegov pasus kretao 36 px niže od druga dva — u redu od tri kartice to
se čita kao neporavnatost, ne kao ritam. Dva reda su rezervisana za sve
tri, pa pasusi kreću sa iste linije bez skraćivanja ijednog naslova.
`2lh` je tačno dva reda ovog naslova, koliko god `clamp()` dao za font. */
.tsk-tip .ogr-sistem__ime { min-height: 2lh; }
/* ============================================================
STRANICA „PREGRADE I STAKLENI ZIDOVI" (.prg-) — peta sestra u nizu.
Deli hero, .fas-uvod, .kmp-split, .ogr-primena i tipografiju naslova
sistema; svoje su TRI KARTICE SA PRESEKOM podnog profila i dB SKALA —
namerno drugi potezi od skica na Kabinama/Ogradama i tabele na Krovovima.
============================================================ */
.prg-mreza {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.6rem, 3vw, 2.8rem);
margin-top: clamp(2rem, 4.5svh, 3rem);
align-items: start;
}
.prg-sistem { display: flex; flex-direction: column; gap: 0.7rem; }
/* presek na ploči — ista ploča kao skice na Ogradama, da se tri strane čitaju
kao jedan jezik; presek je uspravan (profil dole, staklo do vrha) */
.prg-sistem__presek {
margin: 0 0 0.4rem;
background: color-mix(in srgb, var(--white) 5%, transparent);
border: 1px solid color-mix(in srgb, var(--white) 14%, transparent);
padding: clamp(0.8rem, 1.8vw, 1.5rem);
}
.prg-sistem__presek svg { display: block; width: 100%; height: auto; }
/* mera pasusa (52ch) je za polovinu strane; u trećini je kolona ionako uža */
.prg-sistem .ogr-sistem__tekst { max-width: none; }
/* vrsta stakla: pasusi u meri, jedan ispod drugog */
.prg-staklo__pasus { margin-top: clamp(1rem, 2.5svh, 1.6rem); max-width: 62ch; }
/* ============================================================
STRANICA „STAKLENI KROVOVI" (.krv-) — četvrta sestra u nizu
Fasade → Ograde → Tuš kabine. Deli .ogr-sistem (skica | tekst),
.ogr-primena (mreža referenci) i .ogr-uzorci poteze; svoje je samo
poređenje dva sastava paketa jedan uz drugi.
============================================================ */
/* ── Konfiguracija paketa: dva slučaja, bez skica ───────────────────────
Klijent je precrtao obe skice: „ovaj deo mi je suvišan, ostavi samo tekst
i naslov". Bez skice je kartica samo naslov + pasus, a dva pasusa jedan uz
drugi na sivoj podlozi nemaju nijednu ivicu — ne čitaju se kao namerno
postavljen par nego kao ostatak. Meru para zato nosi ista šina kojom se
sekcija i završava: `.ogr-zavrsna` je 1px linija sa tekstom ispod nje.
Kartice su njena manja braća — gore dve polovine šine, dole cela — pa je
razmak od linije do teksta ISTI clamp kao kod `.ogr-zavrsna`. Sa različitim
clampom to ostaju tri nezavisne linije; sa istim postaju jedna porodica. */
.krv-paketi__mreza {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(2rem, 4vw, 3.5rem);
/* isti odmak koji `.ogr-zavrsna` ima od pasusa iznad sebe. Ranije je bio
veći, jer je par počinjao skicom — ona sama nosi vazduh, linija ne. */
margin-top: clamp(2rem, 4.5svh, 3rem);
}
/* Kartica je sada samo pasus: klijent je izbacio i šine i mono oznake i
podnaslove („ovo izbaci", precrtano preko celog bloka). `.krv-paket` ostaje
kao ručka za meru teksta niže. */
/* Mera `.ogr-sistem__tekst` je 52ch i računata je za pasus sam u svojoj
koloni. Ovde bi ostavila ~130 px praznog do ose strane u levoj koloni, dok
desna kolona počinje odmah uz osu — par bi opet izgledao gurnut ulevo, što
je klijent već jednom prijavio. Pasus zato puni svoju kolonu.
Bez potomačkog selektora: `.krv-paket` je od v5 na SAMOM pasusu (kartica
više nema ni oznaku ni naslov), pa `.krv-paket .ogr-sistem__tekst` ne bi
pogodio ništa — to je isti element, ne potomak. */
.krv-paket { max-width: none; }
/* .ogr-sistem je mreža 5fr|7fr; kad nosi sekciju sa naslovom, tekst mora
da dobije više prostora nego kod tri sistema na Ogradama */
.ogr-sistem--tekst { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
/* ── „Vrsta stakla" (Krovovi): tabela poređenja uz tekst ─────────────────
Klijent je izbacio drugi crtež („izbaci i sliku ploče posle loma, samo
ostavi matricu ali je povećaj"), pa je od dvorednog rasporeda ostao jedan
crtež — ali sada preko CELE svoje kolone, ne u meri od 27rem.
To je i bio razlog za uvećanje: tabela je gušća od skica na strani, a mono
oznake su na 432 px padale na ~11 px; na punoj koloni (633 px na 1440) idu
na ~16 px, pa se nazivi redova čitaju bez naprezanja.
Dvostruko zaključano — body[data-page="krovovi"] I .krv-staklo* klase —
jer .ogr-sistem* dele Ograde, Fasade i Kabine. */
/* Eksplicitne linije mreže umesto oslanjanja na redosled u DOM-u: `#staklo`
je parno dete -a, pa je `.ogr-sistem:nth-child(even)` *slučajno*
odlučivao ko je levo. Postavljena stavka ignoriše `order`, pa dodavanje
bilo čega iznad više ne može da obrne strane. */
body[data-page="krovovi"] .krv-staklo .krv-staklo__copy { grid-column: 1; }
body[data-page="krovovi"] .krv-staklo .krv-staklo__crtez { grid-column: 2; }
/* Poravnanje se mora napisati ovde: `.ogr-sistem:nth-child(even) …` nosi
specifičnost (0,3,0) — `:nth-child` se broji kao klasa — pa bi ga
`body[data-page] .klasa` (0,2,1) izgubio. Dve klase daju (0,3,1). */
body[data-page="krovovi"] .krv-staklo .krv-staklo__copy { justify-self: end; }
body[data-page="krovovi"] .krv-staklo .krv-staklo__crtez { justify-self: stretch; }
/* `justify-self` inače skuplja figuru na sadržaj i ploča se crta na 350 px;
`stretch` + puna širina daju celu kolonu. */
body[data-page="krovovi"] .krv-staklo .krv-staklo__crtez { width: 100%; max-width: none; }
/* Tekst ISPOD stavke je manji od njenog naslova (bio je krupniji — obrnuta
hijerarhija). Uvodni pasus, koji nema naslov, zadržava veću veličinu. */
.fas-blok[data-paket-cilj] p {
font-size: clamp(0.95rem, 1.15vw, 1.12rem);
line-height: 1.6;
}
/* ============================================================
STRANICA PROJEKTA (.proj-) — prva: B23 Office Park
Namerno drugačija od ostalih strana: bez topbara — samo fotografija
preko celog ekrana, tehnička traka sa podacima umesto pasusa i mirna
urednička galerija.
============================================================ */
/* ── hero projekta: statična fotografija preko celog ekrana ──
Rast slike se dešava NA STRANI PROJEKATA (morf sa kartice, data-morf u
js/main.js); ovde slika odmah stoji preko celog ekrana — i posle morfa
i pri direktnom otvaranju — a naslov izlazi kroz maske. BEZ zatamnjenja
— čitljivost nosi mala senka teksta. */
.proj-uvod {
position: relative;
height: 100svh;
display: grid;
isolation: isolate;
overflow: clip;
}
.proj-uvod__foto {
position: absolute;
inset: 0;
z-index: -2;
overflow: clip;
}
.proj-uvod__foto img { width: 100%; height: 100%; object-fit: cover; }
.proj-uvod__sadrzaj {
place-self: center;
display: grid;
justify-items: center;
text-align: center;
gap: clamp(1.4rem, 3.5svh, 2.4rem);
padding: 0 var(--space-inline);
color: var(--white);
/* mala senka da se tekst vidi na fotografiji (nema koprene) */
text-shadow: 0 1px 2px rgba(54, 52, 53, 0.45);
}
.proj-uvod__nad::first-letter { color: var(--orange); }
.proj-uvod__naslov {
font-stretch: 115%;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(2.6rem, 8.5vw, 8.5rem);
line-height: 0.95;
letter-spacing: -0.03em;
text-shadow: 0 1px 3px rgba(54, 52, 53, 0.55), 0 2px 32px rgba(54, 52, 53, 0.45);
}
.proj-uvod__pod { color: rgba(255, 255, 255, 0.85); }
/* maske za izlazak reči naslova (JS deli na reči) */
html.js .proj-uvod__naslov .split-mask {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
padding: 0.08em 0.02em 0.16em;
margin: -0.08em -0.02em -0.16em;
}
html.js .proj-uvod__naslov .split-word { display: inline-block; }
/* početna stanja bez bleska: JS vodi ulazak */
html.js:not(.no-motion) [data-fx~="zoomhero"] [data-fx-part="naslov"],
html.js:not(.no-motion) [data-fx~="zoomhero"] [data-zh-in] { opacity: 0; }
html.no-motion [data-fx~="zoomhero"] [data-fx-part="naslov"],
html.no-motion [data-fx~="zoomhero"] [data-zh-in] { opacity: 1 !important; }
/* ── View Transitions: samo blago pretapanje cele strane (0.3s) ──
Rast slike u hero vodi sama strana projekta (zoomhero) — nema više
uparenih imena kartica↔hero, da se dve animacije ne sudaraju. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.3s; }
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* ── telo strane (v5): levo TABELA podataka (red ispod reda, kao tehnički
list — naziv levo, vrednost desno, tanka linija između), lepljiva dok se
prolazi kroz fotografije; desno FOTOGRAFIJE jedna ispod druge u kadru 4:3
(lupa otvara punu razmeru). Zamenilo traku sa ćelijama u liniji i mrežu
galerije sa glavom — klijent: „tabela ispod levo, slike pored jedna ispod
druge, skloni ‚Galerija' i broj". ── */
.proj-telo {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: start;
padding: clamp(3.5rem, 8svh, 5.5rem) var(--space-inline) 0;
}
.proj-tabela { margin: 0; position: sticky; top: clamp(1.5rem, 4svh, 3rem); }
/* v5a: redovi razvučeni po visini, vrednosti krupnije — proporcije kao na
klijentovom primeru (naziv sitno levo, vrednost krupno desno) */
.proj-tabela__red {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 2rem;
padding: clamp(1.5rem, 3.8svh, 2.4rem) 0;
border-bottom: 1px solid var(--line-on-light);
}
.proj-tabela__red:first-child { border-top: 1px solid var(--line-on-light); }
.proj-tabela dt { color: var(--muted-on-light); white-space: nowrap; font-size: 0.8rem; }
.proj-tabela dt::first-letter { color: var(--orange); }
.proj-tabela dd {
margin: 0;
text-align: right;
font-size: clamp(1.2rem, 1.8vw, 1.65rem);
font-weight: 500;
line-height: 1.3;
letter-spacing: -0.015em;
font-variant-numeric: tabular-nums;
text-wrap: balance;
}
/* ── fotografije (v5a): u desnoj koloni DVE pločice u redu (manje, kao pre),
kadar 4:3 (.proj-galerija__s deli pravilo sa galerijom enterijera),
klik = lupa. Jedna kolona je bila prevelika (klijent). ── */
.proj-galerija {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(0.8rem, 1.5vw, 1.2rem);
}
/* ── sledeći projekat (v3): nastavak pregleda unutar iste celine. Traka sa
fotografijom sledećeg objekta i imenom; klik = isti morf kao sa kartice
(slika raste preko ekrana u hero sledeće strane). Ispod: „↳ Svi
projekti". Blaga koprena sleva samo radi čitljivosti imena. ── */
.proj-sledeci { padding: clamp(3.5rem, 8svh, 5.5rem) var(--space-inline) clamp(3rem, 8svh, 5rem); }
.proj-sledeci__link {
position: relative;
display: grid;
isolation: isolate;
overflow: clip;
height: clamp(14rem, 38svh, 24rem);
color: var(--white);
text-decoration: none;
}
.proj-sledeci__foto { position: absolute; inset: 0; z-index: -1; margin: 0; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.proj-sledeci__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-sledeci__koprena {
position: absolute; inset: 0; z-index: 0;
background: linear-gradient(90deg, rgba(54, 52, 53, 0.78) 0%, rgba(54, 52, 53, 0.35) 55%, rgba(54, 52, 53, 0.1) 100%);
}
.proj-sledeci__tekst {
position: relative; z-index: 1;
align-self: end;
display: grid;
gap: 0.55rem;
padding: clamp(1.4rem, 3vw, 2.4rem);
text-shadow: 0 1px 2px rgba(54, 52, 53, 0.45);
}
.proj-sledeci__nad::first-letter { color: var(--orange); }
.proj-sledeci__ime {
font-stretch: 115%;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(1.7rem, 4vw, 3.4rem);
line-height: 0.95;
letter-spacing: -0.03em;
text-wrap: balance;
}
.proj-sledeci__gde { color: rgba(255, 255, 255, 0.85); }
.proj-sledeci__link:hover .proj-sledeci__ime,
.proj-sledeci__link:focus-visible .proj-sledeci__ime {
text-decoration: underline;
text-underline-offset: 0.12em;
text-decoration-thickness: 3px;
text-decoration-color: var(--orange);
}
.proj-sledeci__svi { margin-top: clamp(1.4rem, 3svh, 2rem); }
.proj-sledeci__svi .arrow { color: inherit; }
.proj-nazad { padding-block: 0 clamp(3rem, 8svh, 5rem); }
/* Strelica prati mastilo — narandžasta na beloj pada ispod 4.5:1 na 11px. */
.proj-nazad .link-arrow .arrow { color: inherit; }
/* ── 04 · usluge: uredna mreža 8 faza obrade ──
Jednake pločice (isti kadar 4:3) da mreža bude mirna; ispod slike red
sa ◆ brojem i nazivom, razdvojen tankom linijom koja na hover postane
narandžasta. Cela pločica je link na tu uslugu. Bez zuma na hover. */
.uslmr__glava {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: clamp(2rem, 5svh, 3.5rem);
padding-bottom: clamp(0.8rem, 2svh, 1.4rem);
border-bottom: 1px solid var(--line-on-light);
}
.uslmr__naslov {
font-stretch: 115%;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(2.4rem, 7vw, 7rem);
line-height: 0.92;
letter-spacing: -0.035em;
}
.uslmr__sve { color: var(--muted-on-light); }
.uslmr__sve .arrow { color: inherit; }
.uslmr__sve:hover { color: var(--ink); }
.uslmr__mreza {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.8rem);
}
.uslmr__kartica { display: block; color: inherit; }
.uslmr__foto {
margin: 0;
aspect-ratio: 4 / 3; /* jednak kadar u svim pločicama — mirna mreža */
overflow: clip;
background: color-mix(in srgb, var(--ink) 8%, transparent);
}
.uslmr__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.uslmr__red {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: baseline;
gap: 0.7rem;
margin-top: 0.85rem;
padding-top: 0.7rem;
border-top: 1px solid var(--line-on-light);
transition: border-color 0.35s var(--ease-out);
}
.uslmr__br { color: var(--muted-on-light); }
.uslmr__br::first-letter { color: var(--orange); }
.uslmr__ime {
font-weight: 500;
font-size: clamp(0.95rem, 1.25vw, 1.15rem);
letter-spacing: -0.01em;
line-height: 1.25;
}
.uslmr__kartica:hover .uslmr__red,
.uslmr__kartica:focus-visible .uslmr__red { border-color: var(--orange); }
.uslmr__kartica:hover .uslmr__ime,
.uslmr__kartica:focus-visible .uslmr__ime {
text-decoration: underline;
text-underline-offset: 0.14em;
text-decoration-thickness: 2px;
}
/* ============================================================
STRANICA „KOMPANIJA"
Prefiks .kmp- da se ne meša sa blokovima početne.
============================================================ */
/* ── hero sa fotografijom ── */
.page-hero--foto {
position: relative;
isolation: isolate;
min-height: 82svh;
display: flex;
align-items: flex-end;
overflow: clip;
}
.page-hero__media {
position: absolute;
inset: 0;
z-index: -2;
}
.page-hero__media img { height: 112%; } /* višak je opseg paralakse */
/* Siva koprena preko fotografije da naslov ostane čitljiv bez obzira na kadar */
.page-hero--foto::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(to top,
var(--gray) 0%,
color-mix(in srgb, var(--gray) 72%, transparent) 45%,
color-mix(in srgb, var(--gray) 34%, transparent) 100%);
}
.page-hero__inner { position: relative; }
.page-hero--foto .page-hero__title { max-width: 16ch; margin-top: 1.2rem; }
/* ── tekst + slika jedno pored drugog ── */
.kmp-split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
}
.kmp-split--obrnut .kmp-split__media { order: -1; }
.kmp-split__copy { display: flex; flex-direction: column; gap: 1.4rem; align-items: flex-start; }
.kmp-split__media {
aspect-ratio: 4 / 3;
overflow: clip;
}
.kmp-split__media img { height: 112%; }
.kmp-p { color: var(--muted-on-light); max-width: 52ch; }
/* ══════════════════════════════════════════════════════════════
STRANICA „KOMPANIJA" — v5, tamna
Koncept po uzoru na activedesign (priča → gde radimo → proces sa
koracima), ali NAMERNO drugačiji potez: naslov preko cele širine i
dvokolonski tekst umesto tekst|slika, tačkasta mapa sveta, a koraci
se SLAŽU jedan preko drugog (sticky stack) umesto reda kartica.
══════════════════════════════════════════════════════════════ */
body[data-page="kompanija"] { background: var(--gray); }
/* ── Projekti (lista i stranice objekata): tamna tema kao Kompanija i
Proizvodnja. Sajt već ima inverziju stranice preko --pg-bg/--pg-ink, pa
se sve „svetle" vrednosti (--paper, --ink, --muted-on-light,
--line-on-light) prevrću same — ne dira se nijedno pravilo sekcija. ── */
/* ── Fasade: sekcije su bile razmaknute po 176 px gore i dole, pa je
između dve susedne stajalo 352 px prazne sive. Razmak je stegnut na ~99 px
po strani, a granice nose narandžastu crtu (`.crta-sekcija`). ── */
body[data-page="fasade"] .section,
body[data-page="ograde"] .section,
body[data-page="kabine"] .section,
body[data-page="krovovi"] .section,
body[data-page="pregrade"] .section { padding-block: clamp(3rem, 8svh, 5rem); }
body[data-page="fasade"] .fas-uvod,
body[data-page="ograde"] .fas-uvod,
body[data-page="kabine"] .fas-uvod,
body[data-page="krovovi"] .fas-uvod,
body[data-page="pregrade"] .fas-uvod { padding-block: clamp(2.5rem, 7svh, 4.5rem); }
body[data-page="fasade"] .crta-sekcija,
body[data-page="ograde"] .crta-sekcija,
body[data-page="kabine"] .crta-sekcija,
body[data-page="krovovi"] .crta-sekcija,
body[data-page="pregrade"] .crta-sekcija { margin-block: 0; }
/* ── Kraj svake stranice proizvoda: dugme „Pogledaj ostale proizvode" —
isti `.btn` kao „↳ Svi proizvodi" na početnoj, iza narandžaste granice
sekcije, pa podnožje. Sekcija nema naslov (aria-label), zato ovde nema
ništa sem levo poravnatog dugmeta. ── */
.prd-kraj { display: flex; flex-wrap: wrap; gap: 1rem; }
/* ── Proizvodi i Fasade: tamna tema, isti postupak kao kod Projekata —
prevrću se IZVEDENI tokeni, pa sva pravila sekcija (.prz-*, .fas-*) rade
bez izmene. `--muted-on-light` i `--line-on-light` moraju ponovo ovde,
jer se na :root razrešavaju sa svetlim mastilom. ── */
body[data-page="proizvodi"],
body[data-page="kontakt"],
body[data-page="404"], /* strana greške — isti skelet kao kontakt (.kt-*), pa i ista tema */
body[data-page="fasade"],
body[data-page="ograde"],
body[data-page="kabine"],
body[data-page="krovovi"],
body[data-page="pregrade"],
body[data-page="pocetna"] {
--paper: var(--gray);
--ink: var(--white);
--muted-on-light: color-mix(in srgb, var(--white) 78%, transparent);
--line-on-light: color-mix(in srgb, var(--white) 18%, transparent);
--on-orange: var(--gray);
background: var(--gray);
color: var(--white);
}
/* CTA traka nosi `data-invert`, koji je pravljen za scrub inverziju početne;
na svetloj strani je davala sivu traku, a sada bi ispala siva na sivom.
Ovde joj se boje zadaju izričito. */
body[data-page="proizvodi"] [data-invert],
body[data-page="fasade"] [data-invert] {
--inv-bg: var(--gray);
--inv-ink: var(--white);
}
body[data-page="projekti"] {
/* --muted-on-light i --line-on-light se razrešavaju na :root, pa ih ovde
moramo definisati ponovo — samo prevrtanje --pg-ink ne bi doprlo do njih */
--paper: var(--gray);
--ink: var(--white);
--muted-on-light: color-mix(in srgb, var(--white) 78%, transparent);
--line-on-light: color-mix(in srgb, var(--white) 18%, transparent);
--on-orange: var(--gray); /* tekst na narandžastom ostaje tamno mastilo */
background: var(--gray);
color: var(--white);
}
.kpr-prica, .kpr-mapa, .kpr-proces {
--kpr-mut: color-mix(in srgb, var(--white) 74%, transparent);
--kpr-linija: color-mix(in srgb, var(--white) 18%, transparent);
--kpr-ploca: color-mix(in srgb, var(--white) 6%, transparent);
background: var(--gray);
color: var(--white);
padding-inline: var(--space-inline);
}
.kpr-label { color: var(--kpr-mut); display: block; }
.kpr-label::first-letter { color: var(--orange); }
.kpr-naslov {
font-stretch: 115%;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(2.6rem, 9vw, 9rem);
line-height: 0.92;
letter-spacing: -0.02em;
color: var(--white);
margin: clamp(0.6rem, 1.6svh, 1.2rem) 0 clamp(2rem, 5svh, 3.4rem);
}
.kpr-naslov em { font-style: normal; color: var(--orange); }
.kpr-naslov--manji { font-size: clamp(2rem, 5.4vw, 5rem); }
.kpr-tekst { color: var(--kpr-mut); text-wrap: pretty; }
/* ── 00 · uvodna traka: fotografija se jedva nazire ──────────────────
Isti recept kao referenca: ravan veo preko slike (60 %) + gradijent koji
od dna ide u punu boju strane, a pri vrhu popušta na 80 %. Ostane oko
8 % slike — taman da se nasluti staklo, nikad da se čita kao fotografija. */
.kpr-uvod {
height: clamp(15rem, 36svh, 22rem);
background:
linear-gradient(to top, var(--gray) 0%, color-mix(in srgb, var(--gray) 52%, transparent) 100%),
linear-gradient(color-mix(in srgb, var(--gray) 30%, transparent),
color-mix(in srgb, var(--gray) 30%, transparent)),
url("../img/herokompanija.webp") center / cover no-repeat;
}
/* ── 01 · priča: tekst levo, fotografija desno ── */
.kpr-prica {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(2rem, 5vw, 4.5rem);
/* klijent: „spusti sliku da bude na sredini teksta” — bilo `start`, pa je
fotografija visila uz vrh kolone dok se tekst spuštao ispod nje */
align-items: center;
padding-top: clamp(1rem, 3svh, 2rem);
padding-bottom: clamp(3rem, 8svh, 5rem);
}
.kpr-prica__copy { display: flex; flex-direction: column; gap: 1.1rem; }
/* naslov u užoj koloni: staje u jedan red umesto da se lomi */
.kpr-prica__copy .kpr-naslov {
font-size: clamp(2.4rem, 5.4vw, 5.2rem);
margin-bottom: clamp(0.4rem, 1.5svh, 1rem);
}
.kpr-prica__uvod {
font-size: clamp(1.15rem, 1.9vw, 1.7rem);
line-height: 1.4;
letter-spacing: -0.012em;
color: var(--white);
text-wrap: pretty;
}
.kpr-prica__foto {
position: relative;
/* gornja margina je poravnavala sliku sa oznakom iznad naslova dok je red
bio `start`; uz centriranje bi je samo gurala ispod sredine */
margin: 0;
overflow: clip;
background: var(--kpr-ploca);
}
.kpr-prica__foto img { display: block; width: 100%; height: auto; }
.kpr-prica__foto figcaption {
position: absolute;
left: 0; bottom: 0;
padding: 0.75rem 1.1rem;
background: var(--gray);
border-top: 2px solid var(--orange);
color: var(--white);
}
.kpr-prica__foto figcaption::first-letter { color: var(--orange); }
/* ── 02 · mapa projekata levo (tačkasto kopno), tekst desno ── */
.kpr-mapa {
display: grid;
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
gap: clamp(2rem, 4vw, 4rem);
align-items: center;
padding-block: clamp(7rem, 17svh, 11rem);
}
.kpr-mapa__copy { display: flex; flex-direction: column; }
.kpr-mapa__copy .kpr-tekst { max-width: 46ch; }
.kpr-mapa__dugme {
align-self: start;
margin-top: clamp(1.6rem, 4svh, 2.4rem);
color: var(--white);
text-decoration: none;
border-bottom: 1px solid var(--kpr-linija);
padding-bottom: 0.35rem;
transition: border-color 0.35s ease;
}
.kpr-mapa__dugme:hover, .kpr-mapa__dugme:focus-visible { border-color: var(--orange); }
.kpr-mapa__crtez { margin: 0; width: min(100%, 46rem); justify-self: start; }
.kpr-mapa__crtez svg, .kpr-mapa__crtez img { display: block; width: 100%; height: auto; }
/* mapa projekata (img/mapa-projekata.svg): tačkasto kopno bez granica (klijent), pinovi na
tačnim koordinatama sa prstenom. Sve iz tri boje sajta. */
.mapa-pin__tacka { fill: var(--orange); }
.mapa-pin__prsten { fill: none; stroke: var(--orange); stroke-opacity: 0.45; stroke-width: 1.4; }
.mapa-pin__tacka, .mapa-pin__prsten { transform-box: fill-box; transform-origin: center; }
/* ulazak (JS): siluete, pa osvetljene države, pa pinovi — bez pulsiranja */
html.js:not(.no-motion) [data-fx~="mapa"] .mapa-kopno { opacity: 0; }
html.js:not(.no-motion) [data-fx~="mapa"] .mapa-pin__tacka,
html.js:not(.no-motion) [data-fx~="mapa"] .mapa-pin__prsten { opacity: 0; transform: scale(0.6); }
html.no-motion [data-fx~="mapa"] .mapa-kopno,
html.no-motion [data-fx~="mapa"] .mapa-pin__tacka,
html.no-motion [data-fx~="mapa"] .mapa-pin__prsten { opacity: 1 !important; transform: none !important; }
/* ── 03 · pregled toka: prsten sa brojem koraka + tačkasta strelica ──
Isti koncept kao referenca (pet stanica sa strelicama), drugačiji potez:
broj živi UNUTAR isprekidanog prstena (referenca ima ikonicu u prstenu i
ogroman broj u kartici), a ime nosi tanku crtu ispod sebe. */
.kpr-pregled {
--cvor: clamp(3rem, 4.6vw, 4rem);
list-style: none;
margin: clamp(4.5rem, 10svh, 7rem) 0 clamp(8rem, 19svh, 12rem);
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
}
.kpr-pregled__st { position: relative; }
.kpr-pregled__st a {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
text-align: center;
color: var(--kpr-mut);
text-decoration: none;
padding-inline: 0.4rem;
}
.kpr-pregled__st a:hover, .kpr-pregled__st a:focus-visible { color: var(--white); }
.kpr-pregled__cvor {
display: grid;
place-items: center;
width: var(--cvor);
aspect-ratio: 1;
border: 1px dashed color-mix(in srgb, var(--white) 26%, transparent);
border-radius: 50%;
color: var(--orange);
font-size: clamp(0.66rem, 0.85vw, 0.78rem);
letter-spacing: 0.1em;
background: var(--gray);
position: relative;
z-index: 1;
transition: border-color 0.35s ease, background-color 0.35s ease;
}
.kpr-pregled__st a:hover .kpr-pregled__cvor,
.kpr-pregled__st a:focus-visible .kpr-pregled__cvor {
border-color: var(--orange);
background: color-mix(in srgb, var(--orange) 12%, var(--gray));
}
.kpr-pregled__ime {
font-size: clamp(0.8rem, 1.05vw, 0.98rem);
font-weight: 500;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.08em;
text-wrap: balance;
}
/* tanka crta ispod imena — dobija narandžastu na hover */
.kpr-pregled__ime::after {
content: "";
display: block;
width: 1.6rem;
height: 1px;
margin: 0.7rem auto 0;
background: var(--kpr-linija);
transition: background-color 0.35s ease, width 0.35s ease;
}
.kpr-pregled__st a:hover .kpr-pregled__ime::after,
.kpr-pregled__st a:focus-visible .kpr-pregled__ime::after {
background: var(--orange);
width: 2.6rem;
}
/* tačkasta strelica ka sledećem čvoru — kreće od ivice prstena */
.kpr-pregled__spoj {
position: absolute;
top: calc(var(--cvor) / 2);
left: calc(50% + var(--cvor) / 2 + 0.7rem);
right: calc(-50% + var(--cvor) / 2 + 0.7rem);
height: 1px;
background: repeating-linear-gradient(to right, var(--kpr-linija) 0 3px, transparent 3px 8px);
transform-origin: left;
}
.kpr-pregled__spoj::after {
content: "";
position: absolute;
right: -1px; top: -2.5px;
border-left: 5px solid var(--orange);
border-block: 3px solid transparent;
}
html.js:not(.no-motion) [data-fx~="tok"] .kpr-pregled__cvor { opacity: 0; transform: scale(0.88); }
html.js:not(.no-motion) [data-fx~="tok"] .kpr-pregled__spoj { transform: scaleX(0); }
html.js:not(.no-motion) [data-fx~="tok"] .kpr-pregled__ime { opacity: 0; }
html.no-motion [data-fx~="tok"] .kpr-pregled__cvor,
html.no-motion [data-fx~="tok"] .kpr-pregled__spoj,
html.no-motion [data-fx~="tok"] .kpr-pregled__ime { opacity: 1 !important; transform: none !important; }
/* ── 03b · koraci: kartice se slažu jedna preko druge (sticky stack) ── */
.kpr-proces { padding-block: clamp(4.5rem, 11svh, 7.5rem) clamp(4rem, 12svh, 8rem); }
.kpr-proces__glava { margin-bottom: clamp(1.5rem, 4svh, 2.5rem); }
/* link na kraju procesa: isti kao .pkraj__link na Proizvodnji (mono, prigušen, hover beo) */
.kpr-proces__link { display: inline-flex; margin-top: clamp(2.5rem, 6svh, 4rem); color: var(--kpr-mut, var(--muted-on-light)); }
.kpr-proces__link:hover { color: var(--white); }
.kpr-tok { list-style: none; margin: 0; padding: 0; }
.kpr-korak { position: sticky; top: calc(clamp(4rem, 10svh, 6.5rem) + var(--i) * clamp(0.8rem, 1.6svh, 1.4rem)); }
.kpr-korak + .kpr-korak { margin-top: clamp(1.4rem, 3svh, 2.2rem); }
.kpr-korak__kartica {
display: grid;
grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
gap: clamp(1.5rem, 3vw, 3rem);
align-items: center;
padding: clamp(1.6rem, 3vw, 2.6rem);
background: color-mix(in srgb, var(--white) 7%, var(--gray));
border-top: 2px solid var(--orange);
box-shadow: 0 -18px 40px color-mix(in srgb, #000 34%, transparent);
}
.kpr-korak__copy { display: flex; flex-direction: column; gap: 0.7rem; }
.kpr-korak__broj {
font-stretch: 115%;
font-weight: 700;
font-size: clamp(1.5rem, 2.6vw, 2.4rem);
line-height: 1;
letter-spacing: -0.02em;
color: var(--orange);
}
.kpr-korak__ime {
font-stretch: 115%;
font-weight: 600;
text-transform: uppercase;
font-size: clamp(1.3rem, 2.4vw, 2.2rem);
line-height: 1.05;
letter-spacing: -0.015em;
}
.kpr-korak__tekst { color: var(--kpr-mut); max-width: 46ch; text-wrap: pretty; }
.kpr-korak__foto {
margin: 0;
aspect-ratio: 4 / 3;
overflow: clip;
background: var(--kpr-ploca);
}
.kpr-korak__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ulazak kartice (JS blok „PROCES") */
html.js:not(.no-motion) [data-fx~="tok"] [data-fx-part="kartica"] { opacity: 0; transform: translateY(28px); }
html.no-motion [data-fx~="tok"] [data-fx-part="kartica"] { opacity: 1 !important; transform: none !important; }
html.no-motion .kpr-korak, html:not(.js) .kpr-korak { position: static; }
@media (max-height: 560px) { .kpr-korak { position: static; } } /* položen telefon: kartica ne staje u ekran, pa se ne slaže */
/* ── tamna traka (koristi je fasade.html) ──
Statična tamna zona: ne prati inverziju, pa boje idu iz osnovne palete. */
.kmp-dark { background: var(--gray); color: var(--white); }
.kmp-dark .section__label { color: var(--orange); }
/* ══════════════════════════════════════════════════════════════
STRANICA „PROIZVODNJA" — v5 (cela tamna)
hero video (pin) → tekst preko videa → osam obrada (q-industrial
raspored) → statična maketa → završni tekst + link na proizvode.
══════════════════════════════════════════════════════════════ */
/* ── PODEŠAVANJA — sve na jednom mestu (parove u JS vodi PZ objekat) ── */
.pvid, .obrade, .pstaklo, .pkraj {
--pz-grad-dno: 0.68; /* jačina stalnog gradijenta pri dnu heroja */
--pz-grad-dodatni: 0.5; /* blag prelaz pri dnu (doseg 30%) — samo podloga
za pil traku, ne koprena preko videa */
--pz-zatamnjenje: 0.62; /* maks. dodatno zatamnjenje u prelazu */
--pz-rast-od: 0.32; /* početna širina slike obrade (deo kolone) */
--pz-rast-visina-od: 0.5; /* početna visina (deo konačne) */
--pz-rast-pocetak: 0.82; /* rast kreće kad je vrh reda na ovom delu ekrana */
--pz-rast-kraj: -0.2; /* i završi kad vrh reda stigne ovde (iznad vrha) */
--pz-okvir: 16 / 10; /* razmera okvira medija u obradi */
--pz-kolona: 33rem; /* širina tekstualne kolone preko videa (~46 znakova) */
--pz-linija: color-mix(in srgb, var(--white) 20%, transparent);
--pz-mut: color-mix(in srgb, var(--white) 76%, transparent);
}
/* ── 01+02 · hero video + prelaz ── */
.pvid { position: relative; height: 300svh; background: var(--gray); }
.pvid__pin {
position: sticky;
top: 0;
height: 100svh;
overflow: clip;
background: var(--gray);
color: var(--white);
}
.pvid__media { position: absolute; inset: 0; margin: 0; }
.pvid__video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* stalni gradijent, jači pri dnu — čitljivost naslova */
.pvid__grad {
position: absolute; inset: 0; pointer-events: none;
background:
/* dodatni kratak gradijent od dna naviše — nosi narandžasti red i pil traku */
linear-gradient(to top,
color-mix(in srgb, var(--gray) calc(var(--pz-grad-dodatni) * 100%), transparent) 0%,
color-mix(in srgb, var(--gray) calc(var(--pz-grad-dodatni) * 55%), transparent) 18%,
transparent 42%),
linear-gradient(to bottom,
color-mix(in srgb, var(--gray) 30%, transparent) 0%,
transparent 34%,
color-mix(in srgb, var(--gray) calc(var(--pz-grad-dno) * 100%), transparent) 100%);
}
/* zatamnjenje koje se skrolom pojačava (JS scrub → opacity) */
.pvid__zatamnjenje {
position: absolute; inset: 0; pointer-events: none;
background: var(--gray);
opacity: 0;
}
.pvid__naslovi {
position: absolute;
left: var(--space-inline);
/* klijent: naslov malcice gore — bio odmak 4.6rem/9svh/6rem; uz to ga
podize i podnaslov ispod njega, jer je blok usidren za dno */
bottom: clamp(5.4rem, 10svh, 7rem);
display: flex;
flex-direction: column;
gap: 0.7rem;
}
/* podnaslov ispod naslova: mono, prigusen, bez narandzastog akcenta —
klijent: „ali pise diskretno”. Nasledjuje animaciju bloka naslova (JS
animira ceo [data-fx-part="naslovi"]). */
.pvid__pod { color: var(--pz-mut); }
.pvid__naslov {
font-stretch: 115%;
font-weight: 700;
text-transform: uppercase;
font-size: clamp(2.6rem, 7.5vw, 7.5rem);
line-height: 0.92;
letter-spacing: -0.035em;
color: var(--white);
}
/* prvi pasus preko videa: jedna kolona ~46ch, centriran */
/* centriranje ide kroz flex, NE kroz transform — GSAP animira y na ovom
elementu i prepisao bi translate(-50%,-50%); donji padding čuva prostor
za pill navigaciju da strelica ne padne iza nje */
.pvid__tekst {
position: absolute;
inset: 0;
/* tri trake: praznina · beli tekst · praznina · donja zona.
Odnos 4fr : 1fr spušta beli tekst ispod sredine ekrana. */
display: grid;
grid-template-rows: 4fr auto 1fr auto;
justify-items: center;
align-items: center;
padding: clamp(4rem, 9svh, 6rem) var(--space-inline) clamp(5.4rem, 11svh, 7.5rem);
pointer-events: none;
}
.pvid__uvod { grid-row: 2; }
.pvid__dno { grid-row: 4; }
.pvid__tekst > * { width: min(var(--pz-kolona), 100%); pointer-events: auto; }
/* donja zona: širi pojas da akcenat stane u JEDAN red */
.pvid__tekst > .pvid__dno {
width: min(100%, 68rem);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.55rem;
text-align: center;
}
/* Akcenat i strelica su jedan blok: blok se centrira kao celina (širok je
koliko i akcenat, jer je on u jednom redu), a strelica unutar njega ide na
LEVU ivicu — klijent: „ovu strelicu pomeri levo", tačno ispod početka
akcenta. Sami po sebi, kao dva centrirana deteta, sredine bi im se
poklapale, a ne leve ivice. */
.pvid__blok { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55rem; }
.pvid__tekst p {
font-size: clamp(1.02rem, 1.5vw, 1.35rem);
line-height: 1.55;
color: var(--white);
text-wrap: pretty;
}
.pvid__akcent {
color: var(--orange) !important;
font-weight: 500;
font-size: clamp(1.2rem, 2.35vw, 2.2rem) !important;
line-height: 1.3 !important;
letter-spacing: -0.01em;
margin: 0;
}
@media (min-width: 821px) {
.pvid__akcent { white-space: nowrap; } /* jedan red */
}
/* mala strelica ispod — nagoveštaj da ima još sadržaja niže; poravnata na
levu ivicu akcenta preko .pvid__blok */
.pvid__strelica {
margin-top: 0;
font-size: 1.35rem;
line-height: 1;
color: var(--orange);
}
html.js:not(.no-motion) .pvid__strelica { animation: pvid-strelica 1.9s var(--ease-out) infinite; }
@keyframes pvid-strelica {
0%, 100% { transform: translateY(0); opacity: 0.85; }
50% { transform: translateY(7px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .pvid__strelica { animation: none !important; } }
/* početna stanja (samo desktop + JS + animacije) */
@media (min-width: 821px) {
html.js:not(.no-motion) .pvid__tekst { opacity: 0; }
}
/* telefon / no-motion / bez JS-a: bez pina — hero 100svh sa posterom i
naslovom, tekst kao obična sekcija ispod */
@media (max-width: 820px) {
.pvid { height: auto; }
.pvid__pin { position: static; height: auto; display: flex; flex-direction: column; }
.pvid__media { position: relative; height: 100svh; }
.pvid__video { position: absolute; inset: 0; }
.pvid__grad, .pvid__zatamnjenje { height: 100svh; bottom: auto; }
.pvid__naslovi { bottom: auto; top: calc(100svh - clamp(5.4rem, 10svh, 7rem)); transform: translateY(-100%); }
.pvid__tekst {
position: static; inset: auto; width: auto;
display: flex; flex-direction: column; align-items: flex-start;
gap: clamp(1.1rem, 2.6svh, 1.8rem);
padding: clamp(2.5rem, 7svh, 4rem) var(--space-inline);
}
.pvid__tekst > .pvid__dno { width: 100%; align-items: flex-start; text-align: left; }
}
html.no-motion .pvid { height: auto; }
html.no-motion .pvid__pin { position: static; height: auto; display: flex; flex-direction: column; }
html.no-motion .pvid__media { position: relative; height: 100svh; }
html.no-motion .pvid__grad, html.no-motion .pvid__zatamnjenje { height: 100svh; bottom: auto; }
html.no-motion .pvid__naslovi { bottom: auto; top: calc(100svh - clamp(5.4rem, 10svh, 7rem)); transform: translateY(-100%); }
html.no-motion .pvid__tekst > .pvid__dno { width: 100%; align-items: flex-start; text-align: left; }
html.no-motion .pvid__tekst {
position: static; inset: auto; width: auto; opacity: 1 !important;
display: flex; flex-direction: column; gap: clamp(1.1rem, 2.6svh, 1.8rem); align-items: flex-start;
padding: clamp(2.5rem, 7svh, 4rem) var(--space-inline);
}
html:not(.js) .pvid { height: auto; }
html:not(.js) .pvid__pin { position: static; height: auto; display: flex; flex-direction: column; }
html:not(.js) .pvid__media { position: relative; height: 100svh; }
html:not(.js) .pvid__grad, html:not(.js) .pvid__zatamnjenje { height: 100svh; bottom: auto; }
html:not(.js) .pvid__naslovi { bottom: auto; top: calc(100svh - clamp(5.4rem, 10svh, 7rem)); transform: translateY(-100%); }
html:not(.js) .pvid__tekst > .pvid__dno { width: 100%; align-items: flex-start; text-align: left; }
html:not(.js) .pvid__tekst { position: static; inset: auto; width: auto;
display: flex; flex-direction: column; gap: clamp(1.1rem, 2.6svh, 1.8rem); align-items: flex-start; padding: clamp(2.5rem, 7svh, 4rem) var(--space-inline); }
/* .pstaklo je samostalna sekcija, pa mora sama da nosi ono što redovima
obrade daje roditelj : podlogu i bočne margine */
.pstaklo {
background: var(--gray);
color: var(--white);
padding-inline: var(--space-inline);
}
/* materijal: logoi proizvođača stoje TAČNO tamo gde kod obrada stoje tri
stavke — unutar .obrada__opis, ispod pasusa */
.pstaklo__brendovi {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: clamp(0.8rem, 1.5vw, 1.1rem);
}
.pstaklo__brendovi img {
height: clamp(1.05rem, 1.5vw, 1.35rem);
width: auto;
max-width: 8rem;
object-fit: contain;
filter: brightness(0) invert(1);
opacity: 0.78;
}
/* ── 03 · osam obrada: redovi po q-industrial referenci ── */
.obrade { background: var(--gray); color: var(--white); padding: clamp(2rem, 5svh, 3.5rem) var(--space-inline); }
.obrade__lista { list-style: none; margin: 0; padding: 0; }
.obrada, .pstaklo {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(1.5rem, 3.5vw, 3.5rem);
padding-block: clamp(2rem, 5svh, 3.5rem);
border-top: 1px solid var(--pz-linija);
scroll-margin-top: 2rem;
}
.obrade__lista .obrada:last-child { border-bottom: 1px solid var(--pz-linija); }
/* leva kolona: broj+naziv gore, opis i stavke uz dno (poravnato sa dnom slike) */
.obrada__info {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: clamp(1.4rem, 4svh, 2.5rem);
}
.obrada__oznaka { color: var(--orange); display: block; margin-bottom: 0.7rem; }
.obrada__naslov {
font-stretch: 115%;
font-weight: 600;
font-size: clamp(1.6rem, 2.9vw, 2.7rem);
line-height: 1.05;
letter-spacing: -0.02em;
}
/* dno kolone: opis levo (44ch), logo mašine u praznini DESNO od stavki */
.obrada__dno {
display: flex;
flex-direction: row;
align-items: flex-end;
gap: clamp(1rem, 1.8vw, 1.6rem);
}
/* 40ch: ista mera i kod obrada sa logoom i kod one dve bez njega */
.obrada__opis { display: flex; flex-direction: column; gap: 1rem; max-width: 40ch; min-width: 0; flex: 1 1 auto; }
.obrada__tekst { color: var(--pz-mut); }
.obrada__stavke { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.obrada__stavke li { display: flex; gap: 0.6rem; font-size: 0.92rem; color: var(--pz-mut); }
.obrada__stavke li::before { content: "◆"; font-size: 0.5rem; line-height: 2.4; color: var(--orange); }
/* logoi proizvođača mašina za tu obradu, u praznini desno od stavki.
Bez natpisa i bez crte — samo znakovi, beli monohromno, da razne boje
brendova ne razbiju paletu. Gde ih ima dva, stoje jedan ispod drugog. */
.obrada__masina {
flex: 0 0 clamp(6.5rem, 10vw, 9.5rem);
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: clamp(0.7rem, 1.6svh, 1.1rem);
margin: 0;
align-self: flex-end;
}
/* dva logoa: tanka crta između njih */
.obrada__masina img + img {
padding-top: clamp(0.7rem, 1.6svh, 1.1rem);
border-top: 1px solid var(--pz-linija);
}
/* Uniglass je jedini znak u zagradi, pa mu je REČ uvučena u odnosu na
ostale logoe kojima reč počinje uz levu ivicu — ceo znak ide malo ulevo */
.obrada__masina img[src*="uniglass"] { margin-left: -0.55rem; }
.obrada__masina img {
width: 100%;
height: auto;
max-height: 3rem; /* kvadratni logoi se drže visine, široki širine */
object-fit: contain;
object-position: left center;
filter: brightness(0) invert(1);
opacity: 0.78;
}
/* Ćelija mreže drži punu širinu kolone; slika unutar nje RASTE dok red
putuje kroz ekran (JS) — mala i skoro kvadratna → puna širina i konačna
razmera. Leva ivica stoji, slika se širi udesno i naniže. */
/* Omotač drži KONAČNU veličinu (puna širina kolone × --pz-okvir) i time
visinu reda — slika unutra je apsolutna, pa njen rast ne pomera raspored.
Bez toga bi svaki red rastao u visini, a efekti niže na strani (crtanje
makete) bi radili sa zastarelim pozicijama. */
.obrada__okvir {
position: relative;
min-width: 0;
aspect-ratio: var(--pz-okvir);
}
.obrada__media {
position: absolute;
top: 0; left: 0;
margin: 0;
width: 100%; height: 100%;
overflow: clip;
background: color-mix(in srgb, var(--white) 8%, transparent);
}
.obrada__media img, .obrada__media video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* početno stanje: samo desktop + JS + animacije (JS odmah preuzima u px) */
@media (min-width: 821px) {
html.js:not(.no-motion) .obrada__media {
width: calc(var(--pz-rast-od) * 100%);
height: calc(var(--pz-rast-visina-od) * 100%);
will-change: width, height;
}
}
html.no-motion .obrada__media { width: 100% !important; height: 100% !important; }
/* ── 04 · završni tekst ── */
.pkraj {
background: var(--gray);
color: var(--white);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(1.6rem, 4svh, 2.6rem);
}
/* narandžasta crtica razdvaja obrade od završnog teksta */
.pkraj__crta {
display: block;
width: clamp(2.4rem, 5vw, 4rem);
height: 2px;
background: var(--orange);
}
.pkraj__tekst { max-width: 62ch; color: var(--pz-mut); text-wrap: pretty; }
.pkraj__link { color: var(--pz-mut); }
.pkraj__link:hover { color: var(--white); }
/* ============================================================
STRANICA „PROIZVODI" — izlog
Veliki brojevi-duhovi iza sadržaja, krupne slike, naizmenično.
============================================================ */
.prz-index {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 2rem;
margin-top: clamp(1.8rem, 4svh, 3rem);
}
.prz-index__link { opacity: 0.85; transition: opacity 0.25s; min-height: 44px; display: inline-flex; align-items: center; }
.prz-index__link:hover { opacity: 1; }
.prz-index__no { color: var(--orange); margin-right: 0.45em; }
/* narandžasti detalj: tanka linija preko širine, sa punim narandžastim
potezom na levoj ivici — razdvaja sekcije. Koriste je Proizvodi (ispod
naslova) i Fasade (između sekcija). */
.crta-sekcija {
position: relative;
height: 1px;
margin: clamp(1.5rem, 4svh, 3rem) var(--space-inline) clamp(2.5rem, 7svh, 4.5rem);
background: color-mix(in srgb, var(--white) 16%, transparent);
}
.crta-sekcija::before {
content: "";
position: absolute;
left: 0;
top: -1px;
width: clamp(4rem, 11vw, 8rem);
height: 3px;
background: var(--orange);
}
.prz-list { padding-block: clamp(1rem, 4svh, 3rem); }
.prz-item {
position: relative;
overflow: clip;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(2.5rem, 6vw, 6rem);
align-items: center;
padding: clamp(3.5rem, 9svh, 7rem) var(--space-inline);
scroll-margin-top: 2rem;
}
/* broj-duh: ogroman, u providnoj nijansi mastila — bez četvrte boje */
.prz-item__ghost {
position: absolute;
z-index: 0;
top: clamp(0.5rem, 2svh, 1.5rem);
right: calc(var(--space-inline) * 0.4);
font-stretch: 115%;
font-weight: 700;
font-size: clamp(9rem, 24vw, 22rem);
line-height: 0.8;
letter-spacing: -0.04em;
color: color-mix(in srgb, var(--ink) 7%, transparent);
pointer-events: none;
user-select: none;
}
.prz-item:nth-child(even) .prz-item__ghost { right: auto; left: calc(var(--space-inline) * 0.4); }
.prz-item:nth-child(even) .prz-item__media { order: 2; }
.prz-item__media {
position: relative;
z-index: 1;
aspect-ratio: 4 / 3;
border-radius: 0;
overflow: clip;
background: color-mix(in srgb, var(--ink) 8%, transparent); /* dok se slika učitava */
}
.prz-item__media img { height: 112%; }
.prz-item__copy {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 1rem;
align-items: flex-start;
}
.prz-item__num::first-letter { color: var(--orange); }
.prz-item__title {
font-stretch: 115%;
font-weight: 600;
text-transform: uppercase;
font-size: clamp(1.7rem, 3.2vw, 3.2rem);
line-height: 1.06;
letter-spacing: -0.015em;
}
.prz-item__text { color: var(--muted-on-light); max-width: 48ch; }
.prz-item__list { display: flex; flex-direction: column; gap: 0.35rem; }
.prz-item__list li { display: flex; gap: 0.6rem; font-size: 0.92rem; color: var(--muted-on-light); }
.prz-item__list li::before { content: "◆"; font-size: 0.5rem; line-height: 2.4; color: var(--orange); }
/* Strelica prati mastilo — narandžasta na beloj pada ispod 4.5:1 na 11px.
Ista konvencija kao u sekciji 05 početne: narandžastu nose ◆ markeri. */
.prz-item__copy .link-arrow .arrow { color: inherit; }
.prz-item__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem; margin-top: 0.4rem; }
@media (max-width: 820px) {
/* Projekat na telefonu: traka i galerija u koloni (hero je već pun ekran) */
/* strana objekta na telefonu: tabela iznad fotografija, nije lepljiva */
.proj-telo { grid-template-columns: minmax(0, 1fr); gap: clamp(1.6rem, 5svh, 2.5rem); }
.proj-tabela { position: static; }
/* Fasade na telefonu: maketa iznad pasusa, bez lepljenja */
.fas-paket { grid-template-columns: minmax(0, 1fr); gap: 0; }
.fas-paket__stage { position: static; height: auto; padding-block: clamp(3rem, 8svh, 5rem) 1rem; }
.fas-paket__blokovi { padding-block: 0 clamp(3rem, 8svh, 5rem); }
/* Pregrade na telefonu: tri kartice sa presekom u kolonu */
.prg-mreza { grid-template-columns: minmax(0, 1fr); }
/* Stakleni krovovi na telefonu: dva paketa u kolonu */
/* „Vrsta stakla" na telefonu: jedna kolona, tabela iznad teksta.
Specifičnost (0,3,1) je nužna: mobilno pravilo za
`.ogr-sistem:nth-child(even) .ogr-sistem__crtez` nosi (0,3,0). */
body[data-page="krovovi"] .krv-staklo .krv-staklo__copy,
body[data-page="krovovi"] .krv-staklo .krv-staklo__crtez {
grid-column: auto; justify-self: stretch; max-width: none;
}
.krv-paketi__mreza { grid-template-columns: minmax(0, 1fr); }
/* Tuš kabine na telefonu: tipovi u kolonu — tri portreta jedan uz drugi
na 390 px daju kolonu od ~110 px, u kojoj se opis lomi na jednu reč po
redu. Puna širina vraća fotografijama veličinu koju je klijent i tražio. */
.tsk-tipovi { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5svh, 3rem); }
/* Tuš kabine na telefonu: skice 2×, opisi u koloni */
.tsk-mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 1.2rem; }
/* neparna poslednja skica ne stoji sama u levoj koloni nego centrirana
preko obe (sa osam ih je paran broj, pravilo čeka eventualnu devetu) */
.tsk-mreza .tsk-oblik:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 62%; margin-inline: auto; }
/* Ograde na telefonu: skica iznad teksta, primene u koloni */
.ogr-sistem { grid-template-columns: minmax(0, 1fr); }
.ogr-sistem__crtez, .ogr-sistem__copy,
.ogr-sistem:nth-child(even) .ogr-sistem__crtez,
.ogr-sistem:nth-child(even) .ogr-sistem__copy { justify-self: stretch; max-width: none; }
/* u jednoj koloni nema teksta „iznad/ispod u istoj koloni" sa kojim bi se
ploča poravnavala — pomeraj bi je samo gurnuo u stranu */
/* u jednoj koloni nema teksta „iznad/ispod u istoj koloni" sa kojim bi se
ploča poravnavala — ide preko cele širine, kao i pre */
.ogr-tipovi .ogr-sistem__crtez { max-width: none; display: block; }
.ogr-tipovi .ogr-sistem__crtez svg { width: 100%; }
.ogr-sistem:nth-child(even) .ogr-sistem__crtez { order: 0; }
.ogr-primena { grid-template-columns: minmax(0, 1fr); }
/* na telefonu sve stoji jedno ispod drugog, pa razmaci sekcija teže —
dodatno stegnuto u odnosu na desktop (klijent: „suzbi sve, ali malo") */
body[data-page="fasade"] .section,
body[data-page="ograde"] .section,
body[data-page="kabine"] .section,
body[data-page="krovovi"] .section,
body[data-page="pregrade"] .section { padding-block: clamp(2.4rem, 6svh, 3.6rem); }
body[data-page="fasade"] .fas-uvod,
body[data-page="ograde"] .fas-uvod,
body[data-page="kabine"] .fas-uvod,
body[data-page="krovovi"] .fas-uvod,
body[data-page="pregrade"] .fas-uvod { padding-block: clamp(2rem, 5svh, 3rem); }
.fas-paket__naslov { min-height: 0; padding-block: 1rem; }
.fas-blok:first-of-type { min-height: 0; }
.fas-blok { min-height: 0; padding-block: clamp(1.4rem, 4svh, 2.4rem); }
/* Usluge i Proizvodi na telefonu: jedna kolona */
/* telefon: hero panel preko cele širine (gradijent odozdo), pogon u koloni */
/* Proizvodnja na telefonu: obrada = slika pa tekst, jedna kolona */
.obrada { grid-template-columns: minmax(0, 1fr); }
.pstaklo { grid-template-columns: minmax(0, 1fr); }
.pstaklo .obrada__okvir { order: -1; }
.obrada__dno { flex-direction: column; align-items: stretch; gap: 1.4rem; }
.obrada__masina {
flex-direction: row; align-items: center; gap: 1.5rem;
/* u redu bi desktop flex-end gurnuo logoe uz desnu ivicu */
align-self: stretch; justify-content: flex-start;
padding-top: 1.1rem; border-top: 1px solid var(--pz-linija);
}
.obrada__masina img { width: auto; max-width: 8rem; max-height: 2.4rem; }
/* u redu je crta uspravna */
.obrada__masina img + img {
padding-top: 0; border-top: 0;
padding-left: 1.5rem; border-left: 1px solid var(--pz-linija);
}
.obrada__media { order: -1; }
.prz-item { grid-template-columns: minmax(0, 1fr); }
.prz-item:nth-child(even) .prz-item__media { order: 0; }
.prz-item__media { order: -1; }
.prz-item__ghost { font-size: clamp(6rem, 34vw, 9rem); }
/* Stranica „Kompanija" na telefonu: sve u jednu kolonu, bez lepljivih slojeva. */
.page-hero--foto { min-height: 68svh; }
.kmp-split { grid-template-columns: minmax(0, 1fr); }
/* Kompanija v5 na telefonu: sve u kolonu, kartice se ne slažu */
.kpr-uvod { height: clamp(11rem, 28svh, 15rem); }
.kpr-prica { grid-template-columns: minmax(0, 1fr); padding-top: clamp(0.5rem, 2svh, 1.2rem); }
.kpr-prica__foto { margin-top: clamp(1.5rem, 4svh, 2.4rem); }
.kpr-mapa { grid-template-columns: minmax(0, 1fr); }
/* na telefonu naslov ide prvi, mapa ispod njega */
.kpr-mapa__copy { order: -1; }
.kpr-mapa__crtez { width: 100%; justify-self: stretch; }
/* mapa je na telefonu upola manja — pinovi se povećavaju da ostanu vidljivi */
.kpr-mapa__crtez .mapa-pin__tacka { r: 6.5; }
.kpr-mapa__crtez .mapa-pin__prsten { r: 12; }
.kpr-mapa__crtez .mapa-pin--sediste .mapa-pin__tacka { r: 8.5; }
.kpr-mapa__crtez .mapa-pin--sediste .mapa-pin__prsten { r: 15; }
.kpr-pregled { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 0.8rem; }
/* neparan poslednji korak ne ostaje sam u levoj koloni */
.kpr-pregled__st:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kpr-pregled__spoj { display: none; }
/* klijent: i na telefonu se kartice slažu jedna preko druge kao na računaru.
Da cela kartica stane u ekran (fotografija iznad teksta): manji gornji razmak
(1 rem + korak 0,6 rem) i niža fotografija (16:9 umesto 4:3, −60 px). Izmereno:
najviša kartica 581 px + 40 px razmaka staje i u 667 px visine (iPhone SE). */
.kpr-korak { position: sticky; top: calc(1rem + var(--i) * 0.6rem); }
.kpr-korak__kartica { grid-template-columns: minmax(0, 1fr); }
.kpr-korak__foto { order: -1; aspect-ratio: 16 / 9; }
.kmp-split--obrnut .kmp-split__media { order: 0; }
.pindex__head { grid-template-columns: 1fr; align-items: start; }
.pindex__row { grid-template-columns: minmax(0, 1fr) auto; }
.pindex__loc { grid-column: 1 / -1; text-align: left; }
.uslmr__mreza { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ═══════════════════════════════════════════════════════════════
POČETNA v7 „TABAK" (.pc-) — po mehanici uzora (fluid.glass), sve na tamnoj
sivoj. Hero je nepromenjen (v5c fokus). Ispod njega pet delova:
01 izjava (centrirana rečenica + dugme) · 02 kolaž proizvoda (pet fotografija
na različitim visinama, ime NA fotografiji, paralaks) · 03 kadar koji se ŠIRI
(lepljivi video iz prozora do celog ekrana, tekst stoji) ·
04 lista projekata (fotografija pod pokazivačem, klik = morf) + duo ·
05 uokviren poziv sa crtežom. Tri boje; bela i siva sa prozirnošću.
═══════════════════════════════════════════════════════════════ */
.pc-nad::first-letter { color: var(--orange); }
.pc-nad { color: var(--muted-on-light); }
.btn--staklo { color: var(--white); background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); }
.btn--staklo:hover { background: rgba(255,255,255,0.15); }
.pc-glava { padding-inline: var(--space-inline); }
.pc-glava__red { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(0.9rem, 2.2svh, 1.4rem); }
.pc-glava__naslov { font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 20ch; text-wrap: balance; }
/* dugme „Svi …" stoji na KRAJU dela, ispod mreže (klijent), poravnato sa levom ivicom sadržaja */
.pc-kraj { padding-inline: var(--space-inline); margin-top: clamp(2.5rem, 7svh, 5rem); }
/* ── HERO (nepromenjen potez, sada samostalan) ── */
.pc-hero { position: relative; isolation: isolate; height: 100svh; display: grid; align-content: end; color: var(--white); background: var(--gray); overflow: clip; }
.pc-hero__slike { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; overflow: clip; background: var(--gray); }
.pc-hero__ploca { position: absolute; inset: 0; overflow: clip; visibility: hidden; }
.pc-hero__ploca.je-aktivna { visibility: visible; z-index: 2; }
.pc-hero__ploca.je-prethodna { visibility: visible; z-index: 1; }
.pc-hero__ploca.je-nova { visibility: visible; z-index: 3; }
.pc-hero__slika { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* naslov: stalan („Od table do objekta" + podnaslov), ulazi iz zamućenja posle preloadera (JS: opacity 0 → 1);
meka senka iza teksta = radijalni gradijent sive (::before), samo oko teksta — nije koprena preko fotografije */
.pc-hero__tekst-okvir { position: relative; z-index: 3; min-width: 0; padding: 0 var(--space-inline) clamp(5.5rem, 12svh, 7rem); }
.pc-hero__tekst {
position: relative; width: max-content; max-width: 100%;
text-shadow: 0 2px 4px rgba(54,52,53,0.6), 0 6px 30px rgba(54,52,53,0.55);
opacity: 1;
}
.pc-hero__tekst::before {
content: ""; position: absolute; inset: -80% -28% -85% -28%; z-index: -1; pointer-events: none;
background: radial-gradient(ellipse at 50% 52%, rgba(54,52,53,0.58) 0%, rgba(54,52,53,0.3) 38%, rgba(54,52,53,0) 70%);
}
.pc-hero__naslov { font-weight: 600; font-stretch: 115%; font-size: clamp(2.6rem, 5.8vw, 5.4rem); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.pc-hero__pod { margin-top: clamp(0.8rem, 1.8svh, 1.2rem); max-width: 40ch; font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.4; color: rgba(255,255,255,0.9); }
/* ── brid (primitiv klizniUlaz): 1 px linija + blagi odsjaj, samo dok traje ulaz ── */
.pc-brid { position: absolute; top: 0; bottom: 0; left: 0; width: clamp(40px, 6vw, 90px); pointer-events: none; z-index: 3; opacity: 0;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0) 100%); }
.pc-brid::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(255,255,255,0.55); }
.pc-brid--levo::after { right: auto; left: 0; }
.pc-brid--v { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: clamp(40px, 10svh, 90px); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 55%, rgba(255,255,255,0) 100%); }
.pc-brid--v::after { top: auto; right: 0; left: 0; bottom: 0; width: auto; height: 1px; }
/* ── 01 izjava ── */
.pc-izjava { display: grid; justify-items: center; text-align: center; padding: clamp(6rem, 16svh, 11rem) var(--space-inline); background: var(--gray); }
.pc-izjava__tekst { font-weight: 400; font-size: clamp(1.9rem, 3.7vw, 3.5rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 22ch; margin-top: clamp(1rem, 2.6svh, 1.6rem); text-wrap: balance; }
.pc-izjava .btn { margin-top: clamp(1.6rem, 4svh, 2.6rem); }
/* ── 02 kolaž ── */
.pc-kolaz { padding: clamp(3.5rem, 9svh, 6rem) 0 clamp(4rem, 10svh, 7rem); background: var(--gray); overflow: clip; }
.pc-kolaz__polje { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: min-content; column-gap: clamp(2rem, 4vw, 4rem); padding-inline: var(--space-inline); margin-top: clamp(2.5rem, 7svh, 5rem); align-items: start; }
.pc-kolaz__st { position: relative; }
.pc-kolaz__st a { position: relative; display: block; color: var(--white); }
.pc-kolaz__st img { display: block; width: 100%; height: auto; } /* prirodna razmera — obara globalni reset */
.pc-kolaz__ime { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1rem; font-weight: 400; font-size: clamp(1.3rem, 2vw, 2.1rem); line-height: 1.1; letter-spacing: -0.02em;
text-shadow: 0 1px 3px rgba(54,52,53,0.65), 0 0 30px rgba(54,52,53,0.55); transition: letter-spacing 0.5s var(--ease-out); }
.pc-kolaz__st a:hover .pc-kolaz__ime, .pc-kolaz__st a:focus-visible .pc-kolaz__ime { letter-spacing: 0.01em; }
/* Raspored (klijent: „tuš kabine pomeri gore levo, ograde malo u desno, previše praznog prostora"):
kabine su uspravan kadar i drže levu prazninu, ograde su prešle pod krovove, pregrade zatvaraju dno.
Pravilo: stavka iz sledećeg reda sme da deli traku sa --2 samo ako ima ≥ 210 px margine —
toliko paralaks (113 dole + 96 gore) može da ih spoji. */
.pc-kolaz__st--1 { grid-column: 4 / 9; grid-row: 1; }
.pc-kolaz__st--2 { grid-column: 9 / 13; grid-row: 1; margin-top: 45%; }
.pc-kolaz__st--3 { grid-column: 8 / 12; grid-row: 2; margin-top: 55%; }
.pc-kolaz__st--4 { grid-column: 2 / 7; grid-row: 3; margin-top: 10%; }
.pc-kolaz__st--5 { grid-column: 1 / 5; grid-row: 2; margin-top: -35%; } /* % margine = od širine SVOJE mrežne oblasti; negativna diže stavku u prazninu iznad */
/* ── 03 kadar koji se širi ── */
.pc-sirenje { position: relative; height: 220svh; background: var(--gray); }
.pc-sirenje__lepak { position: sticky; top: 0; height: 100svh; overflow: clip; }
.pc-sirenje__kadar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 55vw; height: calc(55vw * 9 / 16); max-width: 100vw; max-height: 100svh; margin: 0; overflow: clip; background: rgba(255,255,255,0.05); }
.pc-kadar__foto, .pc-kadar__v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-kadar__v { opacity: 0; }
/* veo nad kadrom u dva sloja (uzor: medij na 0,8 + gradijent):
— osnova se upali dok sekcija prilazi, da tekst od prvog trenutka ima podlogu;
— rast se dodaje postepeno kroz celo širenje kadra, pa se video zatamnjuje dok se skroluje. */
.pc-kadar__veo { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.pc-kadar__veo--osnova { background: linear-gradient(180deg, rgba(54,52,53,0.18) 0%, rgba(54,52,53,0.38) 45%, rgba(54,52,53,0.52) 100%); }
.pc-kadar__veo--rast { background: linear-gradient(180deg, rgba(54,52,53,0.14) 0%, rgba(54,52,53,0.32) 45%, rgba(54,52,53,0.42) 100%); }
.pc-sirenje__tekst { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; align-items: center; row-gap: clamp(1rem, 2.6svh, 1.6rem); padding-inline: var(--space-inline); pointer-events: none; z-index: 2;
text-shadow: 0 1px 4px rgba(54,52,53,0.9), 0 0 28px rgba(54,52,53,0.5); }
.pc-sirenje__tekst > * { pointer-events: auto; }
.pc-sirenje__naslov { font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 13ch; }
.pc-sirenje__desno { justify-self: end; text-align: right; display: grid; justify-items: end; gap: clamp(0.8rem, 2svh, 1.2rem); }
.pc-sirenje__desno .pc-nad { color: var(--white); } /* oznaka stoji nad videom, ne nad mirnom podlogom */
.pc-sirenje__pasus { color: var(--white); max-width: 34ch; }
/* tanka linija iznad oba stupca — raste iz sredine ka obema ivicama dok se kadar širi (uzor: 1px bela 20 %) */
.pc-sirenje__crta { grid-column: 1 / -1; height: 1px; background: rgba(255,255,255,0.2); transform-origin: 50% 50%; pointer-events: none; }
/* ── 04 lista projekata + duo ── */
.pc-lista { padding: clamp(3.5rem, 9svh, 6rem) 0 clamp(4rem, 10svh, 7rem); background: var(--gray); }
/* mreža projekata: iste kartice kao na projekti.html (.projmreza/.pkart), samo uvučene
i razmaknute po ritmu početne (kao .pc-kolaz__polje) */
.pc-mreza { padding-inline: var(--space-inline); margin-top: clamp(2.5rem, 7svh, 5rem); }
/* ── 05 poziv ── */
/* CTA stoji na kraju SVAKE strane, pa boje zadaje sam — ne oslanja se na temu strane */
.pc-poziv { padding: clamp(2rem, 5svh, 3.5rem) var(--space-inline) clamp(4rem, 10svh, 7rem); background: var(--gray); color: var(--white); }
.pc-poziv__okvir { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding: clamp(2.2rem, 5vw, 4.5rem); border: 1px solid rgba(255,255,255,0.18); }
.pc-poziv__naslov { font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.9rem); line-height: 1.1; letter-spacing: -0.02em; max-width: 22ch; margin-top: clamp(0.9rem, 2.2svh, 1.4rem); text-wrap: balance; }
.pc-poziv__red { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); margin-top: clamp(1.4rem, 3.5svh, 2.2rem); }
.pc-poziv .pc-nad, .pc-poziv__tel { color: color-mix(in srgb, var(--white) 78%, transparent); }
.pc-poziv__tel:hover { color: var(--white); }
.pc-poziv__crtez { width: 100%; height: auto; justify-self: end; fill: none; stroke: rgba(255,255,255,0.22); stroke-width: 1; }
/* ── statično stanje (?shot=1 / no-motion / reduced-motion): sve vidljivo, kadar u toku ── */
html.js:not(.no-motion) .pc-hero__tekst { opacity: 0; } /* uvod (JS); bez JS-a naslov je vidljiv */
html.no-motion .pc-sirenje, html:not(.js) .pc-sirenje, .pc-sirenje.je-staticno { height: auto; }
html.no-motion .pc-sirenje__lepak, html:not(.js) .pc-sirenje__lepak, .pc-sirenje.je-staticno .pc-sirenje__lepak { position: static; height: auto; display: grid; gap: clamp(1.6rem, 4svh, 2.4rem); padding-block: clamp(2rem, 5svh, 3.5rem); }
html.no-motion .pc-sirenje__kadar, html:not(.js) .pc-sirenje__kadar, .pc-sirenje.je-staticno .pc-sirenje__kadar { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: none; }
html.no-motion .pc-sirenje__tekst, html:not(.js) .pc-sirenje__tekst, .pc-sirenje.je-staticno .pc-sirenje__tekst { position: static; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 3svh, 1.8rem); text-shadow: none; }
html.no-motion .pc-sirenje__desno, html:not(.js) .pc-sirenje__desno, .pc-sirenje.je-staticno .pc-sirenje__desno { justify-self: start; text-align: left; justify-items: start; }
html.no-motion .pc-kadar__v, html:not(.js) .pc-kadar__v { display: none; }
html.no-motion .pc-kadar__veo, html:not(.js) .pc-kadar__veo, .pc-sirenje.je-staticno .pc-kadar__veo { opacity: 0; } /* tekst je tada ispod kadra, ne preko njega */
html.no-motion .pc-sirenje__crta, html:not(.js) .pc-sirenje__crta, .pc-sirenje.je-staticno .pc-sirenje__crta { transform: none; }
@media (prefers-reduced-motion: reduce) {
.pc-hero__tekst { opacity: 1; }
.pc-kadar__v { display: none; }
.pc-kadar__veo { opacity: 0; }
.pc-sirenje__crta { transform: none; }
.pc-sirenje { height: auto; }
.pc-sirenje__lepak { position: static; height: auto; display: grid; gap: clamp(1.6rem, 4svh, 2.4rem); padding-block: clamp(2rem, 5svh, 3.5rem); }
.pc-sirenje__kadar { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: none; }
.pc-sirenje__tekst { position: static; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 3svh, 1.8rem); text-shadow: none; }
.pc-sirenje__desno { justify-self: start; text-align: left; justify-items: start; }
}
/* ── dodir: fotografija u listi stoji kao sličica, ne lebdi ── */
@media (hover: none) {
}
/* ── tablet ≤ 1023 ── */
@media (max-width: 1023px) {
.pc-kolaz__st--1 { grid-column: 3 / 9; }
.pc-kolaz__st--2 { grid-column: 9 / 13; margin-top: 55%; }
.pc-kolaz__st--3 { grid-column: 8 / 12; margin-top: 60%; }
.pc-kolaz__st--4 { grid-column: 2 / 7; margin-top: 30%; }
.pc-kolaz__st--5 { grid-column: 1 / 5; margin-top: -10%; }
.pc-poziv__okvir { grid-template-columns: minmax(0, 1fr); }
.pc-poziv__crtez { max-width: 22rem; justify-self: start; }
}
/* ── telefon ≤ 820 ── */
@media (max-width: 820px) {
.pc-glava__red { flex-direction: column; align-items: flex-start; gap: 1rem; }
.pc-sirenje { height: auto; }
.pc-sirenje__lepak { position: static; height: auto; display: grid; gap: clamp(1.4rem, 4svh, 2rem); padding-block: clamp(2rem, 5svh, 3.5rem); }
.pc-sirenje__kadar { position: relative; left: auto; top: auto; transform: none; width: 100%; margin-left: 0; height: auto; aspect-ratio: 16 / 9; max-height: none; }
.pc-sirenje__tekst { position: static; grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 3svh, 1.8rem); text-shadow: none; }
.pc-sirenje__desno { justify-self: start; text-align: left; justify-items: start; }
.pc-kolaz__polje { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(0.4rem, 1.5vw, 0.8rem); row-gap: clamp(1.4rem, 4svh, 2rem); }
.pc-kolaz__st { grid-row: auto !important; margin-top: 0 !important; }
.pc-kolaz__st--1 { grid-column: 1 / 13; }
.pc-kolaz__st--2 { grid-column: 4 / 13; }
.pc-kolaz__st--3 { grid-column: 1 / 11; }
.pc-kolaz__st--4 { grid-column: 3 / 13; }
.pc-kolaz__st--5 { grid-column: 2 / 13; }
.pc-poziv__crtez { display: none; }
}
/* ══════════════════════════════════════════════════════════════════════════
KONTAKT (kontakt.html) — po uzoru: oznaka, veliki naslov, pa redovi
razdvojeni tankom linijom; u svakom redu oznaka levo i dva stupca desno.
══════════════════════════════════════════════════════════════════════════ */
.kt-uvod { padding: clamp(6rem, 15svh, 9.5rem) var(--space-inline) clamp(4rem, 12svh, 8rem); background: var(--gray); }
.kt-naslov { font-weight: 400; font-size: clamp(2.1rem, 5vw, 4.4rem); line-height: 1.05; letter-spacing: -0.03em; max-width: 20ch; margin-top: clamp(1rem, 2.6svh, 1.6rem); text-wrap: balance; }
.kt-red { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr) minmax(0, 0.52fr); gap: clamp(1.4rem, 3vw, 2.5rem);
align-items: start; padding: clamp(1.8rem, 4.5svh, 3rem) var(--space-inline) clamp(3.4rem, 9svh, 6rem);
border-top: 1px solid var(--line); background: var(--gray); }
.kt-red:last-of-type { border-bottom: 1px solid var(--line); }
.kt-polje { display: grid; justify-items: start; gap: 0.5rem; }
.kt-polje__ime { font-size: var(--fs-body); color: var(--white); }
.kt-polje__tekst { color: var(--muted); }
.kt-polje__vrednost { display: inline-flex; align-items: center; min-height: 40px; color: var(--white);
text-decoration: underline; text-underline-offset: 0.4em; text-decoration-thickness: 1px; }
.kt-polje__vrednost:hover, .kt-polje__vrednost:focus-visible { color: var(--orange); }
.menu__radno { margin-top: 0.4rem; color: var(--muted); }
/* mapa ispod adrese — crno-bela (SVG iz OpenStreetMap podataka, docs/alati/mapa-kontakt.py) */
.kt-mapa { grid-column: 2 / -1; margin-top: clamp(1.4rem, 3.5svh, 2.4rem); }
.kt-mapa a { display: block; border: 1px solid var(--line); transition: border-color 0.3s var(--ease-out); }
.kt-mapa a:hover, .kt-mapa a:focus-visible { border-color: var(--line-strong); }
.kt-mapa img { display: block; width: 100%; height: auto; }
.kt-mapa__izvor { display: block; margin-top: 0.6rem; color: color-mix(in srgb, var(--white) 50%, transparent); }
/* strana kontakta: gornja traka nosi samo logo */
.topbar--samo-logo { grid-template-columns: minmax(0, 1fr); justify-items: center; }
@media (max-width: 820px) {
.kt-red { grid-template-columns: minmax(0, 1fr); gap: clamp(1.2rem, 3.5svh, 1.8rem); padding-bottom: clamp(2.2rem, 6svh, 3rem); }
.kt-mapa { grid-column: 1 / -1; }
}