/* Web majstor — Hero (naslovna) stilovi
Izvuceno iz Elementor HTML widgeta 89357cf u child temu. */
:root {
--bg: #0a0a0a;
--border: rgba(240, 237, 230, 0.07);
--border-hi: rgba(240, 237, 230, 0.14);
--text: rgba(240, 237, 230, 0.9);
--text-dim: rgba(240, 237, 230, 0.38);
--accent: #d24646;
/*--accent: #cf2e2e;*/
--fd: "Bebas Neue", "Bebas Neue Fallback", sans-serif;
--fm: "DM Mono", "DM Mono Fallback", monospace;
}
/* Naslovna preko custom front-page.php (bez Elementora): body je podrazumevano
beo, pa ga bojimo tamno da se ne vidi ispod heroja / oko budućeg footera. */
body.wm-front {
background-color: #0a0a0a;
}
/* Lenis smooth scroll (preporučeni stilovi iz Lenis dokumentacije; klase
postavlja sam Lenis na dok je aktivan — samo desktop, vidi hero.js) */
html.lenis,
html.lenis body {
height: auto;
}
.lenis.lenis-smooth {
scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
overflow: hidden;
}
/* Ograničavamo stil na wrapper da ne bi pokvario ostatak sajta */
.hero-gsap-wrapper {
background-color: var(--bg);
color: var(--text);
font-family: var(--fm);
overflow-x: hidden;
background-image: linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
background-size: 104px 104px, 104px 104px, 26px 26px, 26px 26px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
.hero-gsap-wrapper *,
.hero-gsap-wrapper *::before,
.hero-gsap-wrapper *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.hero-gsap-wrapper .page {
width: 100%;
min-height: 100vh;
overflow: clip;
}
.hero-gsap-wrapper .container {
width: 100%;
max-width: 90rem;
margin-inline: auto;
}
.hero-gsap-wrapper .scroll-track {
height: 460vh;
position: relative;
}
/* "Dwell" razmak: pošto je forma gotova (kraj .scroll-track), ova visina daje
dodatni skrol tokom kog fiksna bina (forma) OSTAJE mirna/fiksirana pre nego
što release-drag (hero.js) počne ~30px pre footera. Bez ovoga forma bi krenula
da klizi istog trena kad se sklopi. */
.hero-gsap-wrapper ._100vh {
height: 100vh;
position: relative;
}
.hero-gsap-wrapper .sticky {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
/* Kljašti animacije koje „odlete" van ekrana (let forme udesno, ulazak logoa sleva,
honeypot na left:-9999px). Bez ovoga na mobilnom (iOS Safari) stranica postaje
pomerljiva u stranu jer html{overflow-x:hidden} ne kljašti fixed potomke. */
overflow: hidden;
}
.hero-gsap-wrapper .text-wrap {
max-width: 86rem;
padding: 0 clamp(20px, 4vw, 48px);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
pointer-events: none; /* tekst ne sme da presreće klikove ka formi */
}
.hero-gsap-wrapper .paragraph-text {
text-align: center;
font-family: var(--fm);
font-size: clamp(1.25rem, 2.8vw, 2.8rem);
line-height: 1.55;
color: var(--text-dim);
letter-spacing: 0.04em;
}
/* CLS fix (PageSpeed 2026-07-08): intro paragraf je SAKRIVEN dok fontovi ne stignu
i SplitType ne prelomi reči. Uzrok skoka (~0.21): giganstke bold reči (.bold-span,
Bebas 2-4rem) se prvo crtaju fallback Arial-om; size-adjust skalira visinu ali NE
može da suzi Arial u kondenzovani Bebas -> kad Bebas stigne (na sporoj mreži kasni),
širina se menja i paragraf se prelomi -> shift. MORA visibility:hidden, NE opacity:0
— Chrome broji pomeranje elementa sa opacity:0 (element i dalje "boji" providno), a
preskače visibility:hidden (nema "ink"). Prostor ostaje rezervisan. hero.js ga otkrije
preko autoAlpha tek kad je split + syncSloganWords gotov (posle fonts.ready). */
.hero-gsap-wrapper #words-to-split {
visibility: hidden;
}
.hero-gsap-wrapper .slogan-final-wrap {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
}
.hero-gsap-wrapper .paragraph-text.bold-span.is-slogan {
display: inline-block;
}
.hero-gsap-wrapper .paragraph-text.bold-span.is-slogan.is-punctuation {
margin-right: 0.6rem;
opacity: 0;
}
.hero-gsap-wrapper .bold-span {
font-family: var(--fd);
font-size: clamp(2rem, 4vw, 4rem);
display: inline-block;
position: relative;
color: var(--accent);
letter-spacing: 0.04em;
visibility: hidden;
}
.hero-gsap-wrapper .bold-span.is-slogan {
display: inline-block;
}
.hero-gsap-wrapper #words-to-split .bold-span {
color: var(--accent);
font-family: var(--fd);
font-size: inherit;
visibility: hidden;
}
.hero-gsap-wrapper .circle-reveal-wrap {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 3;
}
.hero-gsap-wrapper .reveal-circle {
width: 150px;
height: 150px;
fill: var(--accent); /* Ista ona neon zelena boja */
visibility: hidden;
transform-origin: center;
}
/* ----- PODNASLOV KOJI "IZLAZI" IZ KRUGA ----- */
.hero-gsap-wrapper .circle-subtitle {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
z-index: 4; /* iznad kruga */
}
.hero-gsap-wrapper .circle-subtitle-text {
width: min(90vw, 640px);
text-align: center;
font-family: var(--fm);
font-size: clamp(1.15rem, 2.6vw, 2.1rem);
line-height: 1.5;
letter-spacing: 0.03em;
color: var(--text-dim); /* ista prigušena siva kao uvodni podnaslov (.paragraph-text) */
transform-origin: center;
visibility: hidden;
opacity: 0;
}
.hero-gsap-wrapper .circle-subtitle-text .cs-accent {
color: var(--accent);
font-family: var(--fd);
font-size: 1.15em;
letter-spacing: 0.04em;
}
.hero-gsap-wrapper .end-logo-wrap {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 5;
visibility: hidden;
opacity: 0;
}
.hero-gsap-wrapper .end-logo {
width: 256px;
max-width: 62vw;
height: auto;
aspect-ratio: 256 / 257; /* CLS fix — vidi .wm-pre-logo img */
display: block;
transform-origin: center;
}
/* ----- REFERENCE: rotirajući tekst oko kruga ----- */
.hero-gsap-wrapper .ring-wrap {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 320px;
height: 320px;
pointer-events: none;
visibility: hidden;
opacity: 0;
}
.hero-gsap-wrapper .ring-rotor {
width: 100%;
height: 100%;
display: block;
transform-origin: center;
}
.hero-gsap-wrapper .ring-text {
font-family: var(--fm);
font-size: 16px;
letter-spacing: 0.32em;
text-transform: uppercase;
fill: var(--accent);
}
/* ----- REFERENCE: kartice sa sajtovima ----- */
.hero-gsap-wrapper .refs-wrap {
position: fixed;
inset: 0;
z-index: 4;
pointer-events: none;
overflow: hidden;
}
.hero-gsap-wrapper .ref-card {
position: absolute;
left: 50%;
top: 50%;
width: clamp(190px, 24vw, 340px);
aspect-ratio: 3 / 4;
border-radius: 10px;
overflow: hidden;
visibility: hidden;
border: 1px solid var(--border-hi);
background: #111;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
display: block;
pointer-events: auto;
cursor: pointer;
transition: border-color 0.3s, box-shadow 0.3s;
}
.hero-gsap-wrapper .ref-card img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
display: block;
transition: transform 0.35s ease;
}
.hero-gsap-wrapper .ref-card:hover,
.hero-gsap-wrapper .ref-card:focus-visible {
border-color: var(--accent);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 28px rgba(207, 46, 46, 0.25);
}
.hero-gsap-wrapper .ref-card:hover img {
transform: scale(1.04);
}
/* ----- KONTAKT FORMA: krug koji se pretvara u formu ----- */
.hero-gsap-wrapper .form-stage-wrap {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
z-index: 6; /* iznad svih slojeva, da select i polja uvek primaju klik */
}
.hero-gsap-wrapper .form-stage {
pointer-events: auto;
background: var(--accent);
overflow: hidden;
position: relative;
visibility: hidden;
opacity: 0;
will-change: width, height;
box-shadow: 0 40px 120px rgba(207, 46, 46, 0.12);
}
.hero-gsap-wrapper .form-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: min(calc(92vw - 56px), 472px);
}
.hero-gsap-wrapper .form-title {
font-family: var(--fd);
font-size: clamp(1.9rem, 3vw, 2.7rem);
color: #0a0a0a;
letter-spacing: 0.04em;
line-height: 1;
}
.hero-gsap-wrapper .form-sub {
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.65);
margin: 8px 0 24px;
}
.hero-gsap-wrapper .form-field {
margin-bottom: 16px;
}
.hero-gsap-wrapper .form-field label {
display: block;
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(10, 10, 10, 0.6);
margin-bottom: 4px;
}
.hero-gsap-wrapper .form-field input,
.hero-gsap-wrapper .form-field select,
.hero-gsap-wrapper .form-field textarea {
/* Tema nameće "transition: all" koje hvata i visibility i sudara se sa GSAP-om */
transition: border-color 0.25s;
width: 100%;
background: transparent;
border: none;
border-bottom: 1.5px solid rgba(10, 10, 10, 0.35);
border-radius: 0;
font-family: var(--fm);
/* Mora biti >=16px: iOS Safari zumira stranicu na fokus inputa <16px, a posle
slanja ne vrati zum — stranica ostane uvećana i pomerljiva u stranu. */
font-size: 16px;
color: #0a0a0a;
padding: 8px 0;
outline: none;
-webkit-appearance: none;
appearance: none;
}
.hero-gsap-wrapper .form-field input:focus,
.hero-gsap-wrapper .form-field select:focus,
.hero-gsap-wrapper .form-field textarea:focus {
border-bottom-color: #0a0a0a;
}
.hero-gsap-wrapper .form-field textarea {
resize: none;
line-height: 1.4;
min-height: 60px;
}
.hero-gsap-wrapper .form-field textarea::placeholder {
color: rgba(10, 10, 10, 0.4);
}
.hero-gsap-wrapper .form-field select {
cursor: pointer;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 12px;
}
.hero-gsap-wrapper .form-submit {
margin-top: 20px;
width: 100%;
background: #0a0a0a;
color: var(--accent);
border: 1.5px solid #0a0a0a;
font-family: var(--fd);
font-size: 1.3rem;
letter-spacing: 0.12em;
padding: 13px;
cursor: pointer;
transition: background 0.25s, color 0.25s;
}
.hero-gsap-wrapper .form-submit:hover {
background: transparent;
color: #0a0a0a;
}
.hero-gsap-wrapper .form-error {
display: none;
font-family: var(--fm);
font-size: 11px;
color: #8a1500;
margin-top: 12px;
letter-spacing: 0.04em;
}
.hero-gsap-wrapper .hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.hero-gsap-wrapper .form-success {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 24px;
text-align: center;
visibility: hidden;
opacity: 0;
}
.hero-gsap-wrapper .check-svg {
width: 92px;
height: 92px;
}
.hero-gsap-wrapper .success-msg {
font-family: var(--fm);
color: #0a0a0a;
font-size: 14px;
letter-spacing: 0.04em;
line-height: 1.7;
}
.hero-gsap-wrapper .form-letter {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.hero-gsap-wrapper .letter-svg {
width: 44%;
max-width: 140px;
height: auto;
}
.hero-gsap-wrapper .scroll-hint {
position: fixed;
bottom: 28px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 10;
pointer-events: none;
transition: opacity 0.4s;
}
.hero-gsap-wrapper .scroll-hint-text {
font-size: 9px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--text-dim);
}
.hero-gsap-wrapper .scroll-hint-line {
width: 1px;
height: 32px;
background: linear-gradient(to bottom, var(--accent), transparent);
animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
0%, 100% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(6px); opacity: 0.3; }
}
.hero-gsap-wrapper .scroll-hint.hidden {
opacity: 0;
}
.hero-gsap-wrapper .sticky::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-color: var(--border-hi);
border-style: solid;
opacity: 0.6;
bottom: 24px;
right: 24px;
border-width: 0 1px 1px 0;
}
/* ----- LOGO ----- */
.hero-gsap-wrapper .site-logo {
position: fixed;
top: 22px;
left: 24px;
z-index: 11;
display: flex;
align-items: center;
gap: 7px;
font-family: var(--fd);
font-size: 1.4rem;
letter-spacing: 0.12em;
line-height: 1;
color: var(--text);
text-decoration: none;
}
.hero-gsap-wrapper .site-logo img {
width: 22px;
height: 22px;
display: block;
flex-shrink: 0;
position: relative;
top: -2px;
}
.hero-gsap-wrapper .site-logo span {
color: var(--accent);
}
@media screen and (max-width: 767px) {
.hero-gsap-wrapper .paragraph-text { font-size: 1.3rem; }
.hero-gsap-wrapper .circle-subtitle-text { font-size: 1.25rem; }
.hero-gsap-wrapper .scroll-track { height: 600dvh; }
.hero-gsap-wrapper .sticky { min-height: 100dvh; }
.hero-gsap-wrapper .bold-span { font-size: clamp(2.2rem, 8vw, 4rem); }
.hero-gsap-wrapper .reveal-circle {
width: 90px;
height: 90px;
}
.hero-gsap-wrapper .end-logo { width: 150px; }
.hero-gsap-wrapper .ring-wrap {
width: 210px;
height: 210px;
}
.hero-gsap-wrapper .ref-card { width: 56vw; }
.hero-gsap-wrapper .slogan-final-wrap {
flex-direction: column;
gap: 0.5rem;
}
.hero-gsap-wrapper .slogan-final-wrap .is-punctuation {
display: none !important;
}
}
/* ---- PRELOADER (pulsirajući logo; fade-out radi hero.js) ---- */
#wm-preloader {
position: fixed;
inset: 0;
/* Iznad morph-menija (burger 100000, close 100010) da preloader prekrije
hamburger dok se sajt ucitava; hero.js ga skloni na kraju. */
z-index: 100020;
background: var(--bg);
display: flex;
align-items: center;
justify-content: center;
will-change: opacity;
}
#wm-preloader-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(16px, 2.5vh, 28px);
}
/* Ulazni fade je CSS (kreće i pre JS-a); scale na izlasku daje hero.js. */
.wm-pre-logo {
opacity: 0;
animation: wm-pre-in 0.5s ease-out 0.05s forwards;
}
.wm-pre-logo img {
width: 256px;
height: auto;
aspect-ratio: 256 / 257; /* intrinzična veličina WebP-a — browser rezerviše visinu pre učitavanja (CLS fix, "unsized image") */
display: block;
user-select: none;
pointer-events: none;
/* Logo "diše" dok se sajt sprema (puls na ![]()
; izlazni scale je na wrapperu) */
animation: wm-pre-pulse 1.8s ease-in-out 0.55s infinite;
}
@keyframes wm-pre-in {
to { opacity: 1; }
}
@keyframes wm-pre-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.055); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
.wm-pre-logo { animation-duration: 0.01s; animation-delay: 0s; }
.wm-pre-logo img { animation: none; }
}