/* =========================================================== WINKLA — global styles =========================================================== */ /* ----------------------------------------------------------- Pisma s vlastitog poslužitelja. Prije su se učitavala s fonts.googleapis.com, čime se Googleu pri svakom posjetu slala IP adresa posjetitelja — jedini kontakt stranice s trećom stranom. Sada nema nijednog vanjskog zahtjeva. unicode-range je zadržan, pa preglednik dohvaća samo onaj podskup koji mu stvarno treba (latin-ext samo kad naiđe na č, ć, š, ž, đ). Permanent Marker nema latin-ext, zato Kalam preuzima dijakritike. ----------------------------------------------------------- */ /* Kalam 300 — latin-ext */ @font-face{ font-family: 'Kalam'; font-style: normal; font-weight: 300; font-display: swap; src: url('fontovi/kalam-300-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Kalam 300 — latin */ @font-face{ font-family: 'Kalam'; font-style: normal; font-weight: 300; font-display: swap; src: url('fontovi/kalam-300-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Kalam 400 — latin-ext */ @font-face{ font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontovi/kalam-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Kalam 400 — latin */ @font-face{ font-family: 'Kalam'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontovi/kalam-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Kalam 700 — latin-ext */ @font-face{ font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontovi/kalam-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Kalam 700 — latin */ @font-face{ font-family: 'Kalam'; font-style: normal; font-weight: 700; font-display: swap; src: url('fontovi/kalam-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Permanent Marker 400 — latin */ @font-face{ font-family: 'Permanent Marker'; font-style: normal; font-weight: 400; font-display: swap; src: url('fontovi/permanent-marker-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --ink: #0d1b2a; /* near-black navy (naslovi) */ --ink-soft: #33414f; --paper: #f7f7f4; /* pozadina */ --paper-2: #ffffff; --line: #e4e5df; /* grid linije */ --accent: #2f7bff; /* selekcija / handleovi */ --accent-bg: #cfe0ff; /* highlight iza naslova */ --muted: #8a8f98; /* nijanse površina iznad kartice (naslovne trake, pilule, mjehurići) */ --chrome: #fafbfc; /* naslovna traka prozora, pilula forme */ --chrome-2: #ececea; /* jača nijansa: traka kartice, mjehurić FAQ-a */ --chrome-3: #e1e1e4; /* hover mjehurića */ --tint: #eef4ff; /* blagi plavi highlight (odabrano stanje) */ --tint-2: #dbe8ff; /* jači plavi highlight */ /* Boje mreže koju crta fluid. Zasebne su od --paper/--line/--ink jer ih fluid čita samo jednom pri pokretanju, pa mora biti sigurno da ih poslije nitko ne mijenja pod njim. */ --fluid-papir: #f7f7f4; --fluid-linija: #e4e5df; --fluid-tinta: #0d1b2a; /* Zastor prijelaza među stranicama. Namjerno nije --ink: ink je boja teksta, pa se puni ekran u njoj čita kao da se stranica ugasila. Nijansa je točno ona s gumba Kontakt (218 stupnjeva), samo prigušena: gumb ima luminanciju 0.220, a zastor 0.037. Puna svjetlina accenta ovdje ne ide iz dva razloga — potrošila bi signal boje koja inače znači "ovo se klika", a kontrast prema papiru bi pao s 10:1 na 3.6:1, pa bi se rub raspadanja izgubio na stranici koja se probija ispod. */ --prijelaz: #183567; /* Razmak od vrha stranice do mrvica. Jedna vrijednost za sve podstranice — prije je svaka vrsta imala svoju, pa su mrvice stajale na različitim visinama. Donju granicu drži fiksni header: visok je 90px, ali mu sadržaj (pilula Kontakt) vizualno završava na 68, pa je 78 najniže na čemu mrvice stoje a da ne dođu pod njega. Prije je ovdje bilo clamp(104px, 13vh, 132px) i zbog toga je kartica na 1440x800 izlazila 37-40px ispod pregiba. */ --vrh: clamp(78px, 9.6vh, 106px); /* Širina retka s mrvicama. Uzeta je po najužem kontejneru na stranici (.blog: 1120 - 2x30 pada = 1060). Svi su kontejneri centrirani na ekranu, pa centriranje ove iste mjere unutar bilo kojeg od njih daje isti položaj — mrvice tako stoje na istom mjestu na svakoj podstranici, bez obzira koliko je njezin kontejner širok. */ --mrvice-w: 1060px; --font-brush: 'Permanent Marker', 'Kalam', cursive; /* Kalam fallback za hrvatske dijakritike */ --font-hand: 'Kalam', cursive; /* Sistemski sans za sve što se čita, a ne gleda: duži tekst, kontakt podaci, navigacija. Rukopisni fontovi ostaju naslovima i akcentima. */ --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Sjaj po rubovima ekrana: uzak pojas uz sam rub, ne razlijevanje preko pola kadra. Zato je zasićenje visoko a doseg kratak — obrnuto od prve verzije, koja je bila blijeda i široka pa se čitala kao izblijedjeli render umjesto kao rub. */ --sjaj-rub: rgba(47, 123, 255, .62); --sjaj-siri: rgba(47, 123, 255, .30); --radius: 18px; --maxw: 1200px; } *{ margin:0; padding:0; box-sizing:border-box; } /* iOS Safari sam napuhuje pisma u nekim rasporedima ("text inflation") i tada sadrzaj naraste sire nego sto je izracunato — na telefonu to zna gurnuti karticu izvan kadra. 100% zadrzava velicine koje smo zadali. */ html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Sjaj po rubovima kadra. Stoji iznad cijelog sadržaja (koji ide do z-4) a ispod kroma (izbornik 60, zaglavlje 61, pokazivač 65, traka 70, prijelaz 299, učitavanje 9999) — pa stranica dobije okvir, a sučelje ostane oštro. Dvije unutarnje sjene: tvrdi rub i kratko rasipanje iza njega; kutovi se pojačaju sami jer ondje doprinose dva ruba. */ body::after{ content:''; position: fixed; inset: 0; /* Sjaj je okvir oko onoga sto se vidi, pa za razliku od mreze ide na DINAMICKI kadar: mora se pomicati zajedno s adresnom trakom, inace bi mu donji rub ostao skriven ispod nje. */ bottom: auto; height: 100%; height: 100dvh; z-index: 50; pointer-events: none; /* Vidljivost vodi zastor učitavanja: dok se stranica otkriva kroz mrlje, rub se pali zajedno s njom. Zadano je 1 — bez JS-a ili kad zastora nema, sjaj naprosto stoji. */ opacity: var(--sjaj-vidljivost, 1); box-shadow: inset 0 0 clamp(22px, 2.4vw, 54px) var(--sjaj-rub), inset 0 0 clamp(64px, 6.5vw, 150px) var(--sjaj-siri); } html,body{ height:100%; /* onemogući rubber-band / overscroll iznad vrha i ispod dna */ overscroll-behavior: none; /* nativna scrollbar skrivena — koristimo custom .scroll-progress traku */ scrollbar-width: none; -ms-overflow-style: none; } html::-webkit-scrollbar, body::-webkit-scrollbar{ display: none; width:0; height:0; } body{ font-family: var(--font-hand); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* suptilan blueprint grid + papir */ .bg-grid{ position: fixed; inset: 0; /* Na mobilnom pregledniku `inset: 0` znaci MALI kadar — onaj s razvucenom adresnom trakom. Cim se traka skupi, otkrije se pojas koji ovaj sloj ne pokriva i mreza se odreze. lvh je najveci kadar, pa pokriva oba stanja; visak je skriven iza trake dok je razvucena. */ bottom: auto; height: 100%; height: 100lvh; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 46px 46px; /* Ista vrijednost mora stajati i u js/fluid.js (uProzirnost), inače se CSS grid i onaj crtan u WebGL-u razilaze. */ opacity:.85; -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 120% at 50% 40%, #000 55%, transparent 100%); } /* Isti grid, ali crtan u WebGL-u da ga fluid može razvlačiti (js/fluid.js). Klasa ima-fluid dolazi tek kad simulacija stvarno proradi, pa je CSS verzija iznad i dalje ono što svi ostali vide. */ .bg-fluid{ position: fixed; inset: 0; bottom: auto; width: 100%; height: 100%; height: 100lvh; /* isti razlog kao kod .bg-grid */ pointer-events: none; } .ima-fluid .bg-grid{ display: none; } /* =========================================================== ZASLON UČITAVANJA Zastor je platno preko cijelog ekrana, obojeno u papir. Mrlje ga ne prekrivaju bojom nego ga BRIŠU (destination-out), pa se kroz njih vidi prava stranica ispod — mreža, fluid, hero — umjesto da se preko svega navuče još jedan sloj koji poslije nestane. Zato tu nema paleta: ono što se pojavljuje jest sama stranica. Crtanje je u JS-u jer CSS nema način da jedan element izbuši drugim. Bez JS-a platno ostane prazno i uklanja ga isti modul, a i da ne uspije, ovdje nema ničega što bi zaklonilo sadržaj. =========================================================== */ .ucitavanje{ position: fixed; inset: 0; z-index: 9999; width: 100%; height: 100%; display: block; pointer-events: none; } .bez-ucitavanja .ucitavanje{ display: none; } @media (prefers-reduced-motion: reduce){ .ucitavanje{ display: none; } } a{ color: inherit; text-decoration: none; } /* height:auto ide uz max-width jer slike u markupu nose width/height atribute. Ti atributi su prezentacijski nagovještaj — preglednik ih čita kao CSS width i height. Autorski `width` iz stylesheeta pregazi samo prvi; height ostaje na atributu, pa se slika razvuče na njegovu vrijednost (hero ikone su tako bile 80x998 umjesto 80x80). S height:auto atributi rade ono zbog čega i postoje — rezerviraju omjer da se raspored ne trza dok se slika učitava — a veličinu dalje vodi CSS. */ img{ display:block; max-width:100%; height:auto; } /* krug koji prati pokazivač; nestaje nad klikabilnim elementima */ .cursor{ position: fixed; left: 0; top: 0; z-index: 65; width: 13px; height: 13px; border-radius: 50%; background: var(--accent); /* solid točka, ista boja kao Kontakt gumb */ border: 2px solid transparent; box-sizing: border-box; opacity: 1; pointer-events: none; will-change: transform, width, height; transition: width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), border-radius .28s ease, background-color .22s ease, border-color .22s ease, opacity .2s ease; } .cursor.hide{ opacity: 0; } /* prošireno: čist plavi obrub oko elementa (bez ispune) */ .cursor.wrap{ background: transparent; border-color: var(--accent); } /* Treće stanje: točka se rastvori u ČETIRI KUTNA KVADRATIĆA — isti znak odabira kojim je označena tekuća stavka u ravnalu uz kartice usluga i kutovi okvira. Kvadratići se crtaju pozadinom, pa rastu zajedno s okvirom bez ijednog dodatnog elementa: na 13px izgledaju kao jedna točka, a kako se okvir širi, razmiču se u kutove. */ .cursor.kut{ background-color: transparent; border-color: transparent; background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--accent), var(--accent)); background-size: 7px 7px; background-repeat: no-repeat; background-position: left top, right top, left bottom, right bottom; } @media (hover: none), (pointer: coarse){ .cursor{ display: none; } } /* Uz smanjen pokret js modul ni ne starta, ali element ostaje u dokumentu na svih 40 stranica — pa se skriva i ovdje, da ne visi plava točka na sredini ekrana ako skripta ikad zakaže. */ @media (prefers-reduced-motion: reduce){ .cursor{ display: none; } /* Ikone u heor sekciji naslovnice nemaju vlastito isticanje — komentar uz .nav-icon img kaže da ga je preuzeo prsten pokazivača. Bez prstena ostaju bez ijednog znaka da se klikaju, pa ga natpis nadoknađuje bojom. */ .nav-icon:hover span{ color: var(--accent); } } /* Tipkovnicom se prsten pokazivača ne vidi nikad, bez obzira na postavku pokreta — zato fokus ima svoje isticanje uvijek. */ .nav-icon:focus-visible{ outline: none; } .nav-icon:focus-visible span{ color: var(--accent); text-decoration: underline; text-underline-offset: 4px; } .nav-icon:focus-visible img{ outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 6px; } /* custom scroll traka uz dno ekrana — crta se slijeva nadesno kako se skrola */ /* Pilula, a ne traka preko cijelog dna. Puna širina na bottom:0 sjedila je točno na najjačem dijelu sjaja i presijecala ga tvrdom crtom; uvučena pilula stoji unutar njega. Boja je accent, ne više fiksna tamna — ta je odabrana zbog tamnog dna footera kojeg više nema. */ .scroll-progress{ position: fixed; left: 50%; translate: -50% 0; bottom: clamp(12px, 1.8vh, 22px); width: min(300px, 42vw); height: 5px; border-radius: 999px; background: rgba(13, 27, 42, .09); /* staza, da se vidi dokle ima još */ overflow: hidden; z-index: 70; pointer-events: none; } .scroll-progress__fill{ position: absolute; top: 0; bottom: 0; left: 0; width: 0%; background: var(--accent); border-radius: 999px; } @media (hover: none), (pointer: coarse){ .scroll-progress{ display:none; } } /* custom boja označavanja (selekcije) teksta — brend plava */ ::selection{ background: var(--accent); color:#fff; } ::-moz-selection{ background: var(--accent); color:#fff; } /* =========================================================== Top bar (MENU + CTA) =========================================================== */ .topbar{ position: fixed; top: 0; left: 0; right: 0; /* iznad .nav-overlay (60) — isti gumb otvara i zatvara izbornik, pa mora ostati dohvatljiv i kad je izbornik otvoren */ z-index: 61; display:flex; align-items:center; justify-content:space-between; padding: 22px 30px; pointer-events:none; transition: transform .3s cubic-bezier(.4,0,.2,1); } .topbar > *{ pointer-events:auto; } /* skriva se pri skrolu prema dolje, vraća pri skrolu gore (vidi headerAutoHide) */ .topbar--skriven{ transform: translateY(-100%); } @media (prefers-reduced-motion: reduce){ .topbar{ transition: none; } } .menu-btn{ position: relative; transition: color .35s ease; font-family: var(--font-brush); font-size: 1.125rem; letter-spacing:.5px; color: var(--nav-ink, var(--ink)); background:none; border:none; cursor:pointer; padding: 2px 4px; transition: color .2s linear; } .menu-btn__tekst{ position: relative; z-index: 1; } /* Rukom zaokružen natpis. Isti princip kao crta ispod "Vidi sve": pathLength="1" normalizira duljinu pa dashoffset ide 1 -> 0 bez obzira na stvarnu duljinu putanje. Putanja kreće od repa gore desno i ide ulijevo preko vrha, pa niz lijevu stranu, dnom udesno i uz desnu natrag pod rep. */ .menu-btn__krug{ position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 152%; aspect-ratio: 122 / 56; height: auto; color: var(--nav-ink, var(--ink)); overflow: visible; pointer-events: none; } .menu-btn__krug path{ /* vidi komentar uz .see-all__crta path — "1 2" da se uzorak ne ponavlja */ stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .55s cubic-bezier(.45,0,.25,1); } .menu-btn:hover .menu-btn__krug path, .menu-btn:focus-visible .menu-btn__krug path{ stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce){ .menu-btn__krug path{ transition: none; } } .cta{ font-family: var(--font-brush); font-size: 1rem; background: var(--accent); color:#fff; padding: 11px 22px; border-radius: 30px; box-shadow: 0 8px 20px rgba(47,123,255,.35); transition: transform .2s ease, box-shadow .2s ease; } .cta:hover{ transform: translateY(-2px); box-shadow:0 12px 26px rgba(47,123,255,.45); } /* =========================================================== Slide-out menu =========================================================== */ /* fullscreen svijetli menu overlay — stranica iza se zatamni u gotovo bijelo */ .nav-overlay{ position: fixed; inset:0; z-index: 60; /* Tint je jači lijevo (iza gumba), slabiji desno. --nav-scrim i --nav-scrim-a nitko više ne postavlja, pa vrijede fallback vrijednosti. */ background: linear-gradient(90deg, rgba(var(--nav-scrim, 248,248,245), .985) 0%, rgba(var(--nav-scrim, 248,248,245), .955) 28%, rgba(var(--nav-scrim, 248,248,245), var(--nav-scrim-a, .76)) 100%); opacity:0; visibility:hidden; transition: opacity .3s ease, visibility .3s ease; } /* blur samo na lijevom dijelu (iza gumba), naglo slabi desno */ .nav-overlay::before{ content:""; position:absolute; inset:0; pointer-events:none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 24%, rgba(0,0,0,0) 60%); mask-image: linear-gradient(90deg, #000 0%, #000 24%, rgba(0,0,0,0) 60%); } .nav-overlay.open{ opacity:1; visibility:visible; } .nav-panel{ position:absolute; inset:0; padding: 24px 34px; display:flex; flex-direction:column; justify-content:center; } /* "Zatvori" više nije zaseban gumb: .menu-btn mijenja natpis i sam zatvara, pa je pozicija identična po definiciji, a ne po dogovorenim mjerama koje se s vremenom raziđu. Ostaje u markupu kao bezopasan fallback bez JS-a. */ .nav-close{ display: none; } /* veliki brush linkovi (lijevo, vertikalno centrirani, u istoj ravnini) */ .nav-links{ display:flex; flex-direction:column; align-items:flex-start; gap: clamp(2px,.6vh,8px); } .nav-links a{ display:inline-flex; align-items:center; gap: clamp(8px,1.2vw,18px); font-family: var(--font-brush); font-size: clamp(2.125rem, 6vw, 4rem); line-height: 1.08; color: var(--ink); translate: -70px 0; opacity: 0; /* ulaze s lijeva */ transition: translate .45s cubic-bezier(.6,.05,.2,1), opacity .4s ease, color .2s ease, transform .2s ease; } .nav-links a:hover{ color: var(--accent); transform: translateX(10px); } /* Gooey natpis: dvije kopije riječi leže jedna preko druge u istoj ćeliji mreže, pa se u prolazu razliju u istu kap. Filtar postavlja JS i skida ga čim animacija stane. */ .nav-links a .goo{ display: inline-flex; align-items: center; gap: clamp(8px,1.2vw,18px); /* razmak je sada ovdje, ne na */ } .nav-links a .goo__par{ display: grid; } .nav-links a .goo__t{ grid-area: 1 / 1; will-change: opacity, transform; } .nav-links a .nav-arrow{ width: clamp(30px,4.4vw,52px); height:auto; opacity:0; translate: -8px 0; transition: opacity .25s ease, translate .25s ease; } .nav-links a:hover .nav-arrow{ opacity:1; translate: 0 0; } .nav-overlay.open .nav-links a{ translate: 0 0; opacity: 1; } /* stagger (kaskada) — kasni samo translate/opacity, ne hover */ .nav-overlay.open .nav-links a:nth-child(1){ transition-delay: .05s, .05s, 0s, 0s; } .nav-overlay.open .nav-links a:nth-child(2){ transition-delay: .10s, .10s, 0s, 0s; } .nav-overlay.open .nav-links a:nth-child(3){ transition-delay: .15s, .15s, 0s, 0s; } .nav-overlay.open .nav-links a:nth-child(4){ transition-delay: .20s, .20s, 0s, 0s; } .nav-overlay.open .nav-links a:nth-child(5){ transition-delay: .25s, .25s, 0s, 0s; } .nav-overlay.open .nav-links a:nth-child(6){ transition-delay: .30s, .30s, 0s, 0s; } .nav-overlay.open .nav-links a:nth-child(7){ transition-delay: .35s, .35s, 0s, 0s; } /* social dolje-lijevo, u istoj ravnini */ .nav-social{ position:absolute; left: 34px; bottom: clamp(24px,4vh,44px); display:flex; gap: 18px; translate: -50px 0; opacity: 0; transition: translate .45s cubic-bezier(.6,.05,.2,1), opacity .4s ease; } .nav-overlay.open .nav-social{ translate: 0 0; opacity: 1; transition-delay: .34s; } .nav-social a{ color: var(--muted); } .nav-social .ikona{ width: clamp(22px, 2.4vw, 26px); } /* Na mobitelu je izbornik jedina navigacija, pa linkovi moraju biti krupniji i razmaknutiji. Vertikalni padding širi dodirni cilj (>=48px) a da ne pomiče tekst — gap ostaje čist razmak između dva susjedna cilja. */ @media (max-width: 700px){ .nav-panel{ padding: 24px 26px; } .nav-links{ gap: 8px; } .nav-links a{ font-size: clamp(2.375rem, 10.5vw, 3.25rem); line-height: 1.1; padding: 6px 0; } .nav-social{ left: 26px; gap: 10px; } .nav-social a{ font-size: 1.0625rem; padding: 3px 0; } } /* Niski ekrani (stari SE, ili adresna traka koja jede visinu): sedam linkova u punoj veličini bi naletjelo na social blok, pa se korak stisne — dodirni cilj i dalje ostaje iznad 44px. */ @media (max-width: 700px) and (max-height: 640px){ .nav-links{ gap: 6px; } .nav-links a{ font-size: 2rem; padding: 5px 0; } } /* =========================================================== MRVICE (breadcrumbs) Vidljiva putanja mora postojati da bi BreadcrumbList markup bio legitiman — Google traži da se strukturirani podaci poklapaju s onim što korisnik vidi. Stoji odmah ispod fiksnog headera, u prostoru koji je ionako bio prazan. =========================================================== */ .mrvice{ position: relative; z-index: 6; /* Mrvice stoje u istom kontejneru kao sadržaj stranice ispod njih, pa se poravnavaju s naslovom. Kontejneri se po stranicama razlikuju u širini, zato mrvice nose vlastitu mjeru i tako svugdje počinju na istom mjestu. */ box-sizing: border-box; width: 100%; max-width: var(--mrvice-w); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; font-family: var(--font-hand); font-size: clamp(0.8125rem, 1.4vw, 0.9375rem); line-height: 1.3; color: var(--muted); margin: 0 auto clamp(18px, 2.6vh, 28px); } /* Mrvice su novi redak iznad naslova, a header je fiksan i visok 90px, pa kontejner mora imati gornji razmak. Jedna te ista vrijednost (--vrh) za sve vrste podstranica: prije je svaka imala svoju (usluge 15vh, projekti 104px, kontakt 2vh + margina na mrvicama), pa su mrvice stajale na različitim visinama ovisno o tome gdje si. */ .usl:has(.mrvice), .blog:has(.mrvice), .blog-post:has(.mrvice), .proj-post:has(.mrvice), .kontakt:has(.mrvice){ padding-top: var(--vrh); } /* Naslovi su nagnuti, pa im vrh strši iznad layout kutije — i to tim više što je riječ duža (podizanje je pola širine puta sinus kuta). Zato se izjednačava ono što se vidi, a ne layout kutija: svaki naslov dobiva pomak koliko mu vlastita rotacija oduzme ili doda u odnosu na Projekte. Uzor je /projekti: mrvice na 117, vidljivi vrh naslova na 122. */ .blog-post:has(.mrvice) .bp-title{ margin-top: 40px; } /* "Blog" je upola kraća riječ od "Projekti" pri istoj rotaciji, pa je i podizanje upola manje — razliku vraćamo negativnim razmakom. Selektor mora isključiti i --auto: taj modifikator nose i Projekti i O nama, a samo popis bloga ima goli .blog. */ @media (min-width: 861px){ /* Samo na desktopu: ispod 860px naslovi mijenjaju veličinu i raspored, pa bi ovaj pomak naslov uvukao pod mrvice. */ .blog:not(.blog--auto) .blog__title{ margin-top: -16px; } } .proj-post:has(.mrvice) .pp-card{ margin-top: 18px; } .proj-post:has(.mrvice) .pp-title--gallery{ margin-top: 18px; } @media (max-width: 860px){ .blog-post:has(.mrvice) .bp-title{ margin-top: clamp(26px, 4vw, 40px); } .proj-post:has(.mrvice) .pp-card{ margin-top: 26px; } } .mrvice a{ color: var(--muted); text-decoration: none; transition: color .2s linear; } .mrvice a:hover{ color: var(--accent); } .mrvice [aria-current="page"]{ color: var(--ink-soft); } .mrvice__sep{ opacity: .5; } /* =========================================================== HERO =========================================================== */ .hero{ position: relative; z-index: 1; height: 100svh; min-height: 620px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; } .hero-title{ position:relative; font-family: var(--font-brush); font-weight: 400; color: var(--ink); font-size: clamp(3.5rem, 11vw, 11.375rem); line-height: 1; letter-spacing: .5px; padding: 2px 16px; z-index: 3; } /* highlight "selekcija" iza naslova — širina se animira pri ulasku */ .hero-title::before{ content:""; position:absolute; left:0; top:16%; bottom:20%; width:100%; background: var(--accent-bg); z-index:-1; border-radius:2px; } .hero-title__text{ display:inline-block; } /* text-cursor handleovi na krajevima — oba moraju izgledati identično */ .hero-title::after, .hero-title .caret{ content:""; position:absolute; top:2%; bottom:6%; width:3px; background: var(--accent); border-radius:2px; box-shadow: 0 0 0 2px rgba(47,123,255,.15); } .hero-title::after{ right:-2px; } .hero-title .caret{ left:-2px; } .hero-sub{ margin-top: 22px; font-family: var(--font-brush); font-size: clamp(0.9375rem, 1.8vw, 1.3125rem); text-transform: uppercase; letter-spacing: .5px; color: var(--ink); max-width: 560px; line-height: 1.5; z-index: 3; } /* down arrow — ručno crtana, oblik se blago izobličuje (bez pomicanja) */ .scroll-cue{ position:absolute; bottom: 22px; left:50%; transform:translateX(-50%); z-index:3; color:var(--ink); width: 34px; height: auto; line-height:0; } .scroll-cue svg{ display:block; width:100%; height:auto; } /* --- HERO na manjim ekranima --------------------------------------------- Desktop postoci su računati za široki ekran: Galerija je virila 10px, a Usluge 16px izvan ekrana (.hero ima overflow:hidden, pa je dio ikone bio odrezan), dok je Kontakt upadao pod fiksni header. Granica je 860px, a ne 640: desktop postotak za Usluge (left:88%) traži barem 750px širine da ikona stane u ekran, pa bi između 640 i 750 i dalje bila odrezana. */ @media (max-width: 860px){ .hero{ padding: 0 20px; } /* ".hero ..." zbog specifičnosti: bazna .nav-icon pravila dolaze kasnije u datoteci pa bi inače pobijedila po redoslijedu */ /* Hijerarhija: na desktopu je naslov 182px prema ikoni od 98px (1,9x), a mobilni clamp je to okrenuo na 56px prema 66px (0,85x) — šest zasićenih ikona pojede crni tekst. Naslov zato raste do pune raspoložive širine, ikone se stišavaju (manje, sitnija labela, blaža sjena), a oko teksta ostaje prazan pojas. */ /* 12vh je strop za niske a široke ekrane (860x640): tamo bi 17.4vw dalo 92px i pojas oko naslova bi pojeo prostor koji ikonama treba */ .hero-title{ font-size: min(clamp(3.5rem, 17.4vw, 5.75rem), 12vh); } .hero-sub{ font-size: clamp(0.96875rem, 4.5vw, 1.1875rem); } .hero .nav-icon img{ width: min(clamp(52px, 15vw, 80px), 11vh); filter: drop-shadow(0 8px 12px rgba(13,27,42,.13)); } .hero .nav-icon span{ font-size: clamp(0.71875rem, 3.2vw, 0.9375rem); } /* Zadržavamo desktop kompoziciju, samo mijenjamo sidrenu točku. Inline left/top sidre LIJEVI RUB ikone. Ikona je ~7% širine na 1440px, ali ~22% na 375px, pa isti postotak na mobitelu odgurne ikonu daleko udesno — zato su Galerija i Usluge virile izvan ekrana. Ovdje se ikona sidri SREDIŠTEM (translate -50%), a postoci su desktop središta: Kontakt 51%, O nama 11%, Galerija 86%, Usluge 92%, Blog 23%, Projekti 69% clamp() ih drži unutar ekrana kad je pola ikone šire od preostalog ruba. Okomito ostaju desktop postoci, uz dvije zaštite: naslov s podnaslovom je centriran i visok ~130px bez obzira na ekran, dok postoci skaliraju — pa na niskom telefonu (667px) ono što radi na 812px ulijeće u naslov. Zato gornji pojas ima min(... , 50% - 182px), a donji max(... , 50% + 100px). Na visokim ekranima te granice ne dolaze do izražaja i vrijedi točno desktop postotak. */ .nav-icon{ translate: -50% 0; } .nav-icon[href="kontakt.html"] { top: max(9%, 100px); left: clamp(54px, 51%, calc(100% - 54px)); } .nav-icon[href="galerija.html"] { top: min(23%, calc(50% - 182px - 4vh)); left: clamp(54px, 86%, calc(100% - 54px)); } .nav-icon[href="o-nama.html"] { top: min(26%, calc(50% - 182px - 4vh)); left: clamp(54px, 11%, calc(100% - 54px)); } /* donja granica ovisi i o širini: naslov je clamp(56px, 11vw, 182px), pa je pojas oko njega na 860px širine za ~40px viši nego na 360px */ .nav-icon[href="usluge.html"] { top: max(61%, calc(50% + 78px + 5.5vw + 4vh)); left: clamp(54px, 92%, calc(100% - 54px)); } .nav-icon[href="blog.html"] { top: 77%; left: clamp(54px, 23%, calc(100% - 54px)); } /* Najniža ikona. Vodoravno: 69% i 92% (Usluge) razmaknuti su 23%, što je na 360px svega 83px — manje od same ikone, pa se na uskim ekranima Projekti dodatno pomiču ulijevo. Okomito: strop drži ikonu iznad strelice (strelica je 48px visoka, 22px od dna). Na širokim ekranima nijedna granica ne veže i vrijedi točno desktop 69% / 80%. */ .nav-icon[href="projekti.html"] { top: min(80%, calc(100% - 172px)); left: clamp(54px, min(69%, calc(100% - 165px)), calc(100% - 54px)); } .hero-sub{ padding: 0 10px; font-size: 1rem; } } /* =========================================================== Floating layer (parallax) =========================================================== */ .float-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; } .float{ position:absolute; will-change: transform; transition: transform .15s ease-out; } /* nav ikone (klikabilne) — pozicija dolazi iz --x/--y u markupu, a ne iz inline top/left, da je media query može pregaziti bez !important */ .nav-icon{ top: var(--y); left: var(--x); pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; } .nav-icon img{ width: clamp(60px, 6.2vw, 98px); filter: drop-shadow(0 12px 18px rgba(13,27,42,.18)); transition: transform .25s ease; } /* podizanje ikona isključeno (highlight ring preuzima naglašavanje) */ .nav-icon span{ font-family: var(--font-brush); font-size: clamp(0.8125rem, 1.3vw, 1.125rem); text-transform: uppercase; letter-spacing:.4px; color: var(--ink); } /* doodle svg */ .doodle{ opacity:.5; color:#c3c6cd; } /* Ručno crtane ikone su pune plohe, ne tanki potezi kao prijašnje sitnice — na istih .5 nose puno više tinte i previše upadaju u oko. Zato im je prozirnost spuštena na .2, da im težina odgovara onome što je ovdje bilo. Ubačene su netaknute, s vlastitim fill="#000000"; ovo ga nadjačava jer CSS ima prednost pred prezentacijskim atributom u samoj ikoni. */ .doodle--rukom{ opacity: var(--tinta, .13); } .doodle--rukom path{ fill: currentColor; stroke: none; } /* Znakovi u sekciji Izjava — puknuti lanac i wifi, uz "Na terenu imate ugled. Na internetu?". Isti postupak: putanja netaknuta, boja iz CSS-a. */ .statement__znak path{ fill: currentColor; } .statement__znak--lanac{ top: 14%; left: 7%; width: clamp(70px, 8vw, 118px); rotate: -8deg; } .statement__znak--wifi{ top: 58%; right: 9%; width: clamp(62px, 7vw, 100px); rotate: 6deg; } /* Rukovanje uz Brojke. Položaj je u CSS-u, a ne inline kao ostali znakovi, jer ga uski kadar mora moći pregaziti — inline stil se ne da nadjačati. */ .brojke__znak--dogovor{ top: -48px; left: 43%; width: 96px; } @media (max-width: 820px){ /* Wifi ostaje UNUTAR Izjave. Prije je na uskom kadru bježao na spoj s Brojkama (bottom:-30px), gdje mu je s druge strane sjedalo rukovanje iz Brojki — dva znaka jedan uz drugi, oba bez svoje sekcije. Ispod teksta Izjave ima praznine napretek, pa stoji ondje. Selektor mora nositi i .bg-doodle: to pravilo dolazi kasnije u datoteci i s istom specifičnošću nadjačava sve što je ovdje zadano. */ .bg-doodle.statement__znak--wifi{ top: 64%; bottom: auto; right: 7%; width: clamp(58px, 16vw, 84px); } .bg-doodle.statement__znak--lanac{ top: 16%; left: 6%; width: clamp(64px, 18vw, 96px); } /* Rukovanje silazi s ruba sekcije i staje desno od naslova "Brojke": ondje je prazan desni kraj retka, a znak se veže uz naslov umjesto da lebdi. */ .bg-doodle.brojke__znak--dogovor{ top: 6.4%; bottom: auto; left: 52%; right: auto; width: clamp(66px, 19vw, 96px); } } /* =========================================================== HERO — ulazna animacija učitavanja Ikone se NE smiju animirati kroz transform: parallax() u js/main.js svaki kadar prepisuje inline transform. Zato koriste samostalna svojstva scale/translate, koja se s transformom kombiniraju. =========================================================== */ /* Gornja traka: ulazi prva i kratko — postavi okvir stranice, pa naslov preuzima pozornost. Svaki gumb klizi sa svoje strane ekrana. Ograničeno na naslovnu (:has(.hero)) jer traka stoji na svih 25 stranica, a ostale ionako ulaze kroz view transition. Koristi translate, a ne transform, da .cta:hover{transform:translateY(-2px)} ostane netaknut. */ body:has(.hero) .menu-btn{ animation: hero-slijeva .55s cubic-bezier(.16,1,.3,1) both; } body:has(.hero) .cta { animation: hero-zdesna .55s cubic-bezier(.16,1,.3,1) .08s both; } @keyframes hero-slijeva{ from{ opacity:0; translate: -16px 0; } to { opacity:1; translate: 0 0; } } @keyframes hero-zdesna{ from{ opacity:0; translate: 16px 0; } to { opacity:1; translate: 0 0; } } /* Naslov: oba careta kreću na istom mjestu (desni preko lijevog), pa desni putuje udesno i za sobom ostavlja plavu podlogu i ispisani tekst. */ .hero-title .caret{ animation: hero-caret .28s ease-out both; } .hero-title::after{ animation: hero-caret .28s ease-out both, hero-caret-hod .62s cubic-bezier(.55,0,.15,1) .2s both; } .hero-title::before{ animation: hero-podloga .62s cubic-bezier(.55,0,.15,1) .2s both; } .hero-title__text{ animation: hero-ispis .62s cubic-bezier(.55,0,.15,1) .2s both; } @keyframes hero-caret{ from{ opacity:0; } to{ opacity:1; } } @keyframes hero-caret-hod{ from{ right: calc(100% - 1px); } to{ right:-2px; } } @keyframes hero-podloga{ from{ width:0; } to{ width:100%; } } @keyframes hero-ispis{ /* Okomito nikad ne reže — brush font prelazi preko okvira retka. Desni odmak kreće od 100% + 16px: postotci se računaju od širine teksta, a podloga raste po širini naslova koji je zbog paddinga širi 32px. Bez te korekcije tekst bi izronio 16px prije nego plava stigne do njega. */ from{ clip-path: inset(-30% calc(100% + 16px) -30% -30%); } to { clip-path: inset(-30% -5% -30% -30%); } } /* Ikone: ulaze tek kad naslov odradi svoje, da mu ne odvlače pogled s centra. Rastu od jedva vidljivih (14%) do pune veličine, uz blagi prebačaj preko 1 da rast djeluje fizički, a ne kao obično zumiranje. Redoslijed je po važnosti, ne po položaju na ekranu — vodi pogled na ono što najviše prodaje. Brojevi u selektorima su redoslijed u DOM-u. */ .nav-icon{ animation: hero-ikona .5s cubic-bezier(.22,1.25,.36,1) both; } @keyframes hero-ikona{ from{ opacity:0; scale:.14; } to { opacity:1; scale:1; } } .float-layer > .nav-icon:nth-child(6){ animation-delay:0.80s; } /* 1. Projekti — dokaz rada */ .float-layer > .nav-icon:nth-child(4){ animation-delay:0.86s; } /* 2. Usluge — što nudimo */ .float-layer > .nav-icon:nth-child(1){ animation-delay:0.92s; } /* 3. Kontakt — konverzija */ .float-layer > .nav-icon:nth-child(2){ animation-delay:0.98s; } /* 4. O nama — povjerenje */ .float-layer > .nav-icon:nth-child(5){ animation-delay:1.04s; } /* 5. Blog — sadržaj */ .float-layer > .nav-icon:nth-child(3){ animation-delay:1.10s; } /* 6. Galerija — najmanje nosi */ /* Doodlei: samo blagi fade, da se ne pojave naglo dok sve ostalo ulazi */ .float-layer > .doodle{ animation: hero-doodle .62s ease-out both; } /* Kraj je varijabla, ne fiksnih .5: animacija nadjačava obično pravilo, pa bi inače svaka sitnica završila na istoj težini bez obzira koliko tinte nosi. Kraj je --tinta samog znaka, da animacija ne pregazi izjednačenu tintu. */ @keyframes hero-doodle{ from{ opacity:0; } to{ opacity: var(--tinta, .13); } } .float-layer > .doodle:nth-child(7){ animation-delay:1.02s; } .float-layer > .doodle:nth-child(8){ animation-delay:1.08s; } .float-layer > .doodle:nth-child(9){ animation-delay:1.14s; } /* Podnaslov: fade in uz podizanje odozdo */ .hero-sub{ animation: hero-odozdo .6s cubic-bezier(.16,1,.3,1) .66s both; } @keyframes hero-odozdo{ from{ opacity:0; translate: 0 22px; } to { opacity:1; translate: 0 0; } } /* Strelica: fade in uz spuštanje odozgo (translate se zbraja s translateX(-50%) iz transforma, pa centriranje ostaje netaknuto) */ .scroll-cue{ animation: hero-odozgo .6s cubic-bezier(.16,1,.3,1) 1.24s both; } @keyframes hero-odozgo{ from{ opacity:0; translate: 0 -18px; } to { opacity:1; translate: 0 0; } } @media (prefers-reduced-motion: reduce){ .hero-title .caret, .hero-title::before, .hero-title::after, .hero-title__text, .nav-icon, .float-layer > .doodle, .hero-sub, .scroll-cue, body:has(.hero) .menu-btn, body:has(.hero) .cta{ animation: none; } } /* blijede ikone raštrkane po sekcijama — skroluju sa sadržajem, sadržaj slobodno prolazi preko njih */ /* Jednaka izraženost svih pozadinskih znakova. Ista prozirnost ne daje istu vidljivost: znak koji pokriva 25 % svog okvira nosi dvostruko više tinte od onoga koji pokriva 12 %. Zato svaki znak nosi vlastitu vrijednost u --tinta, izmjerenu tako da umnožak pokrivenosti i prozirnosti svugdje bude isti — 0.024, koliko u prosjeku nose tri znaka u herou. Pokrivenost je svojstvo samog crteža i ne mijenja se s veličinom, pa vrijednost vrijedi i ako se znak poslije poveća ili smanji. Prije ovoga raspon je bio od 0.36× do 1.16× hero vrijednosti: ručno crtani znakovi u Brojkama bili su gotovo trostruko blijeđi od onih u herou. */ .bg-doodle{ position: absolute; z-index:0; pointer-events:none; opacity: var(--tinta, .13); color:#c3c6cd; height:auto; display:block; } /* fill preko CSS-a, da same datoteke ikona ostanu netaknute */ .bg-doodle--rukom path{ fill: currentColor; stroke: none; } /* pozicije (postavljene inline u HTML-u preko top/left) */ /* =========================================================== PROJEKTI (na naslovnici) — horizontalni carousel =========================================================== */ .projekti{ position: relative; z-index:1; background: transparent; /* ista pozadina (papir + grid) prolazi kroz cijelu stranicu */ padding: 132px 0 100px; } .proj-head{ max-width: var(--maxw); padding: 0 40px; /* Razmak naslov -> kartice = 2vh. Oduzimamo 34px gornjeg paddinga trake (ondje je zbog sjena kartica) i još korekciju jer nagnut naslov vizualno završava iznad svoje layout kutije — korekcija prati veličinu fonta. */ margin: 0 auto calc(5vh - 34px - clamp(5px, 0.96vw, 12px)); display:flex; align-items:flex-start; justify-content:space-between; gap:24px; } .proj-head h2{ font-family: var(--font-brush); font-size: clamp(2.5rem, 7.4vw, 5.75rem); line-height:.95; letter-spacing:.5px; /* isti nagib kao naslov na podstranici Projekti; transform-origin lijevo da naslov ostane poravnat s lijevim rubom sekcije */ transform: rotate(-8deg); transform-origin: left center; } .see-all{ position: relative; display:inline-block; font-family: var(--font-brush); font-size: clamp(1.0625rem, 2vw, 1.4375rem); /* Crna, ne tinta: na punom accentu tinta (#0d1b2a) daje 4.1:1, ispod praga za obični tekst. Crna daje 5.4:1 i to je ujedno odnos s reference — crna slova na punoj plavoj. */ color: #000; margin-top: clamp(16px, 1.8vw, 30px); white-space:nowrap; transition: color .2s; } /* ---- Plavi sjaj iza natpisa (hover) -------------------------------------- Ista obitelj kao sjaj uz rubove ekrana, samo skupljen iza jednog natpisa: zamućena plava ploha koja izroni ispod teksta. Ide na ::before sa z-index:-1 uz isolation:isolate na roditelju — tako sjaj ostaje IZA slova, ali iznad pozadine stranice, i ne može iscuriti iz vlastitog gumba. Ne dira postojeće poteze: rukom zaokruženi "Izbornik" i cik-cak ispod "Vidi sve" crtaju se i dalje, samo sada nad sjajem. Sve stoji pod (hover: hover) jer na dodir :hover ostaje zaglavljen nakon dodira — natpis bi svijetlio i kad prst odavno nije ondje. -------------------------------------------------------------------------- */ /* Plava podloga iza natpisa u sekcijama — na hover, ne kao zadano stanje. Gumb Izbornik/Zatvori ovo NEMA — ondje je ostao izvorni hover s rukom crtanim krugom. U zaglavlju uz plavu pilulu Kontakt druga plava ploha je bila jedna previše. z-index je 0, a natpis se diže na 1. Negativni z-index ovdje ne radi: ploha pri -1 propadne iza pozadine i ne nacrta se uopće. Zato se ne spušta podloga pod tekst, nego se tekst diže nad podlogu. */ .see-all > span{ position: relative; z-index: 1; } .see-all::before{ content: ""; position: absolute; z-index: 0; /* u em, da pojas oko slova ostane isti kad se natpis skalira clampom */ inset: -.42em -.85em; border-radius: 999px; background: var(--accent); /* Zamućenje je u em, ne u px. Fiksnih 15px na dugom natpisu ("Idemo raditi i vašu", 181px) jedva zagrize, a na kratkom ("Vidi sve", 86px) pojede petinu kutije sa svake strane pa podloga izblijedi u ništa. Vezano uz pismo, svi natpisi dobiju jednako gustu plohu. */ filter: blur(.5em); /* Prigušeni accent. Puna jačina (opacity 1) davala je istu plavu kao "+" uz brojke, ali ondje je to tanak potez u velikom praznom polju, a ovdje puna ploha iza natpisa — ista vrijednost u toj površini vrišti. */ opacity: 0; transform: scale(.9); transition: opacity .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1); pointer-events: none; } .see-all:focus-visible::before{ opacity: .72; transform: scale(1); } @media (hover: hover){ .see-all:hover::before{ opacity: .72; transform: scale(1); } } @media (prefers-reduced-motion: reduce){ .see-all::before{ transition: opacity .2s ease; transform: scale(1); } .see-all:hover::before, .see-all:focus-visible::before{ transform: scale(1); } } /* Ručno crtana crta ispod natpisa. Na hover se iscrtava od početka poteza (gore lijevo) do kraja (dolje) — pathLength="1" normalizira duljinu, pa dashoffset ide 1 -> 0 bez obzira na stvarnu duljinu putanje. Stoji uz plavu plohu, ne umjesto nje: oba su hover, a crta se crta IZNAD plohe jer je pozicionirana i dolazi kasnije u dokumentu. */ .see-all__crta{ /* Cik-cak koji se sužava prema dnu; oštri kutovi, zaobljeni vrhovi. */ position:absolute; left: -1%; top: 92%; /* aspect-ratio umjesto fiksne visine: uz preserveAspectRatio="none" fiksna visina je kratki natpis ("Vidi sve") razvlačila po visini jače nego dugi ("Sve usluge"), pa cik-cak nije bio isti u svim sekcijama */ width: 102%; aspect-ratio: 200 / 96; height: auto; color: var(--ink); overflow: visible; pointer-events:none; } .see-all__crta path{ /* Debljina poteza NE smije se skalirati s crtežom. SVG je širok 102% natpisa, pa je isti stroke-width od 4.5 davao 1.39px na "Vidi sve" (61px), 2.05px na "Sve usluge" (89px) i 3.58px na "Idemo raditi i vašu" (156px) — svaki gumb druga debljina. non-scaling-stroke potez izuzima iz te transformacije, pa ga zadajemo jednom i vrijedi svugdje. .13em, a ne fiksni px: potez tako prati natpis kad ga clamp poveća na širokom kadru (17px -> 2.21px poteza, 23px -> 2.99px). Vrijednost je birana da odgovara težini samog pisma — cik-cak izgleda kao da je povučen istim markerom, a ne kao tanka vektorska linija ispod njega. */ vector-effect: non-scaling-stroke; stroke-width: .13em; /* "1 2", a ne "1": s jednom vrijednošću uzorak je "1 crtica, 1 razmak" pa se ponavlja — pri odmaku 1.02 na kraj putanje upadne 2% sljedeće crtice i ostane vidljiva mrlja. Razmak dulji od putanje to sprječava. 1.02 umjesto 1: pri punom odmaku zaobljena kapica inače viri kao točkica. */ stroke-dasharray: 1 2; stroke-dashoffset: 1.02; transition: stroke-dashoffset .7s cubic-bezier(.45,0,.25,1); } .see-all:hover .see-all__crta path, .see-all:focus-visible .see-all__crta path{ stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce){ .see-all__crta path{ transition: none; } } .proj-track{ display:flex; overflow: hidden; /* beskonačni marquee — bez native scrolla */ padding: 34px 0 70px; /* prostor da sjene kartica ne budu odrezane */ } .proj-lane{ display:flex; gap: 18px; align-items: flex-start; /* kartice zadrže prirodnu visinu */ flex: 0 0 auto; will-change: transform; } .proj-win{ flex: 0 0 auto; background: var(--paper-2); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 10px 24px -8px rgba(13,27,42,.14), 0 2px 6px rgba(13,27,42,.05); overflow: hidden; display:flex; flex-direction:column; color: inherit; text-decoration: none; cursor: pointer; } .proj-win.desktop{ width: min(620px, 80vw); } .proj-win.mobile{ width: min(320px, 62vw); } .win-bar{ display:flex; align-items:center; gap:14px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--chrome); } .win-dots{ display:flex; gap:8px; flex:0 0 auto; } .win-dots i{ width:16px; height:16px; border-radius:50%; border:1.5px solid #c5c7cc; background:transparent; display:block; position:relative; } .win-dots i::before, .win-dots i::after{ content:""; position:absolute; left:50%; top:50%; background:#b4b6bb; border-radius:2px; } /* prvi krug = X, drugi = kosa crta (zabrana) — realni window kontroli */ .win-dots i:first-child::before, .win-dots i:first-child::after{ width:7px; height:1.6px; transform:translate(-50%,-50%) rotate(45deg); } .win-dots i:first-child::after{ transform:translate(-50%,-50%) rotate(-45deg); } .win-dots i:last-child::before{ width:10px; height:1.6px; transform:translate(-50%,-50%) rotate(-45deg); } /* margin:0 jer je ovo

, a ne : naslov nosi zadani razmak koji bi u flex traci .win-bar dodao praznu visinu. Font i težina su ionako postavljeni ovdje, pa se h2 vizualno ne razlikuje od prijašnjeg spana. */ .win-title{ margin:0; font-family: var(--font-ui); font-weight:600; font-size: 0.96875rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .open-btn{ margin-left:auto; flex:0 0 auto; font-family: var(--font-ui); font-weight:500; font-size: 0.875rem; padding: 8px 16px; border-radius:9px; border: 1px solid var(--line); color: var(--ink-soft); background: transparent; transition: background .2s, color .2s, border-color .2s, transform .15s; } /* hover na cijeloj kartici odmah pali hover gumba */ .proj-win:hover .open-btn{ background: var(--accent); color:#fff; border-color: var(--accent); transform: translateY(-1px); } /* slika inset u kartici, blago zaobljena (kao referenca) */ .win-shot{ position:relative; padding: 3px 7px 7px; background:var(--paper-2); } .win-shot picture{ display:block; } .win-shot img{ display:block; width:100%; height:auto; border-radius:6px; } .win-shot .ph{ position:absolute; inset:16px; border: 2px dashed #c7cbd2; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; font-family: var(--font-brush); color:#a7abb4; font-size: 1.0625rem; letter-spacing:.5px; } .win-shot .ph small{ font-family: var(--font-hand); font-size: 0.8125rem; letter-spacing:0; } @media (max-width: 640px){ .proj-head{ padding:0 24px; } } /* projekti.html — zid od proj-win kartica (isti dizajn kao naslovna). Fiksna ŠIRINA stupca, visina slijedi format slike (bez rezanja) — kao na referenci. Pravi masonry (JS): kartice idu u trenutno najkraći stupac, bez rupa. */ .proj-wall{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap: 16px; width: 100%; margin: 0 auto; padding: 20px 0 40px; } .proj-wall.js-masonry{ flex-wrap:nowrap; } .proj-col{ display:flex; flex-direction:column; align-items:center; gap:16px; flex:1 1 0; min-width:0; } .proj-wall .proj-win{ width: 100%; height: auto; } /* mobilne kartice iste širine kao desktop (puna širina stupca) */ .proj-wall .proj-win.mobile{ width: 100%; } .proj-wall .proj-win .win-shot img{ width: 100%; height: auto; max-width:100%; display:block; border-radius:6px; } /* bar se ne smije širiti preko slike — naslov se skraćuje umjesto da razvlači karticu */ .proj-wall .win-title{ min-width: 0; flex: 1 1 auto; } /* jače isticanje kartica + bez linije iznad slike, samo na projekti.html */ .proj-wall .proj-win{ box-shadow: 0 30px 60px -22px rgba(13,27,42,.38), 0 10px 26px -10px rgba(13,27,42,.20); } .proj-wall .win-bar{ border-bottom: none; } @media (max-width: 860px){ /* Zid izlazi iz uskog blog kontejnera (82vw) — na mobitelu to je ostavljalo kartice na ~53% ekrana. Sada dobiju gotovo cijelu širinu, a visina slijedi format slike pa se ništa ne reže. */ /* trostruka klasa: .blog i .blog.blog--auto dolaze kasnije u datoteci pa bi inače pobijedile po redoslijedu */ .blog.blog--auto.blog--zid{ max-width: 100%; padding-left: 16px; padding-right: 16px; } /* naslov zadržava uvlaku topbara (30px) iako je kontejner sužen na 16px */ .blog--zid .blog__title{ padding-left: 14px; } /* isto i za O nama: kartica je na 82vw padala na ~65% ekrana, pa je sadržaj unutra bio premalen da bi se išta vidjelo */ .blog.blog--auto.blog--fit{ max-width: 100%; padding-left: 16px; padding-right: 16px; } .blog--fit .blog__title{ padding-left: 14px; } .proj-wall{ flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; padding: 10px 0 30px; } /* Sve kartice su jednako široke; portretni snimci se ispod 860px preko zamjenjuju desktop snimkom istog projekta, pa nema kartica koje su tri puta više od ostalih. */ .proj-wall .proj-win{ width: 100%; } .proj-wall .proj-win.mobile{ width: 100%; } /* Na 375px traka nema mjesta za točkice, puni naziv i gumb u punoj veličini — stisnut razmak i sitniji gumb oslobode dovoljno da se ni najduži naziv ("Graditeljstvo Lončar") ne skraćuje. */ .proj-wall .win-bar{ gap: 8px; padding: 11px 12px; } .proj-wall .win-title{ font-size: 0.90625rem; } .proj-wall .open-btn{ font-size: 0.8125rem; padding: 7px 10px; } } /* Ispod 369px ni stisnuta traka nema 146px za najduži naziv ("Medvedgrad Gradnja"), pa naziv ima prednost pred ukrasnim točkicama. Na 375px — daleko najčešćoj širini — točkice ostaju. */ @media (max-width: 368px){ .proj-wall .win-dots{ display: none; } } /* =========================================================== BRUTAL IZJAVA (hook) =========================================================== */ .statement{ position: relative; z-index:1; padding: clamp(160px, 28vh, 320px) 30px; text-align:center; } .statement__eyebrow{ margin: 0 0 clamp(18px,3vh,30px); } .statement__eyebrow span{ display:inline-block; background: var(--accent); color:#fff; font-family: var(--font-hand); font-size: clamp(1.625rem, 3.8vw, 2.75rem); padding: 14px 30px; border-radius: 4px; transform: rotate(-2deg); } .statement__text{ font-family: var(--font-brush); font-size: clamp(3rem, 10vw, 8.25rem); line-height: 1.1; color: var(--ink); max-width: 18ch; margin: 0 auto; } .statement__sub{ font-size: clamp(0.9375rem, 1.7vw, 1.1875rem); color: var(--muted); margin: clamp(16px,2.6vh,26px) auto 0; max-width: 44ch; } /* --- ulaz pri skrolanju --- Prva rečenica je plavi highlight, pa se otkriva potezom slijeva udesno — isti jezik kao selekcija iza naslova u herou. Skriveno je samo ako JS radi (html.ima-js), inače je tekst normalno tu. Druga rečenica ("Na internetu?") ovdje namjerno nema ništa: nju vodi naslovniFiltri u js/main.js, isti modul koji radi na Brojkama, Uslugama i ostalim naslovima. Prije je imala i vlastito izranjanje odozdo, ali CSS animacija nadjačava inline opacity koji taj modul postavlja, pa bi se filtar borio s njom umjesto da se vidi. */ .ima-js .statement__eyebrow span{ clip-path: inset(-20% 100% -20% -20%); } .statement.je-otkriveno .statement__eyebrow span{ animation: izjava-potez .75s cubic-bezier(.55,0,.15,1) both; } @keyframes izjava-potez{ /* desni kraj je tek -4%: da je -40%, pilula bi bila potpuno otkrivena već na dvije trećine trajanja, a ostatak animacije ne bi radio ništa */ from{ clip-path: inset(-20% 100% -20% -20%); } to { clip-path: inset(-20% -4% -20% -20%); } } @media (prefers-reduced-motion: reduce){ .ima-js .statement__eyebrow span{ clip-path: none; } } .statement__text .u{ position:relative; white-space:nowrap; z-index:0; } .statement__text .u::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:.05em; height:.36em; background: var(--accent-bg); z-index:-1; border-radius:2px; } /* =========================================================== DOKAZ (Kramarić) + poziv na akciju =========================================================== */ .dokaz{ position: relative; z-index:1; padding: clamp(60px, 10vh, 110px) 30px; overflow: hidden; } /* Jedan dominantan izrez lijevo, argument desno. Prije su bila dva mobitela jednake težine pa se cijeli SERP stiskao u ~380px i tekst je bio nečitljiv; sada su slike izrezane na ono što je stvarno dokaz. */ .dokaz__grid{ max-width: var(--maxw); margin: 0 auto; display:grid; align-items:start; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); } .dokaz__shot{ margin:0; } /* --- mobitel sa snimkom pretrage --- Mockup se ovdje jednom već bio pojavio pa je izrezan jer je tekst u njemu bio presitan da bi išta dokazivao. Zato uređaj ovdje dobiva širi stupac i ulazi zumiranjem — kamera koja prilazi. Zumira se tijelo, ne slika u ekranu: slika je široka točno koliko i ekran, pa bi svako povećanje sadržaja odrezalo retke s obje strane (pri 1,9× ostane 53% širine). Slika je nadopunjena bjelinom do omjera 9:19.5 da točno ispuni ekran. */ .mobitel__tijelo{ position: relative; /* 540, ne manje: ekran tada nosi 514px za izvornih 1068, pa Googleov tekst izlazi na ~16px — točno ono što je davala i gola slika prije mockupa. Stupac je 596px, ostaje 28px zraka sa svake strane. */ width: 100%; max-width: 540px; margin: 0 auto; background: var(--ink); transform-origin: 50% 60%; border-radius: 66px; padding: 15px; box-shadow: 0 44px 88px -30px rgba(13,27,42,.48), 0 4px 12px rgba(13,27,42,.10), inset 0 0 0 1px rgba(255,255,255,.10); } /* Bočne tipke — sitnica, ali bez njih tijelo izgleda kao pravokutnik, ne kao uređaj. Sjede na rubu i nemaju posla s kadrom unutra. */ .mobitel__tijelo::before, .mobitel__tijelo::after{ content:""; position:absolute; left:-2px; width:2px; background: var(--ink); border-radius: 2px; } .mobitel__tijelo::before{ top:19%; height:5%; } .mobitel__tijelo::after{ top:27%; height:8%; } .mobitel__otok{ position:absolute; z-index:2; top: 2.1%; left:50%; translate:-50% 0; width: 27%; height: 2.4%; background: var(--ink); border-radius: 999px; } .mobitel__ekran{ /* Omjer nosi ekran, ne tijelo: slika je nadopunjena točno na 9:19.5 pa ovako sjeda u piksel. Kad je omjer stajao na tijelu, ekran je nakon oduzimanja okvira ispao za 23px viši od slike i dolje je zjapila bjelina. Tijelo je zato za debljinu okvira više od ekrana — kao i pravi uređaj. */ position:relative; overflow:hidden; width:100%; aspect-ratio: 9 / 19.5; border-radius: 51px; background:#fff; } /* Ishodište je sredina plavog prstena oko Kramarićevog rezultata (43,04% visine slike, izmjereno na samoj datoteci). Zato prsten pri zumiranju ostaje mirno na mjestu, a sve ostalo raste oko njega. */ .mobitel__snimka{ display:block; width:100%; height:auto; } /* Prilaz kamere: uređaj uđe malen pa se smiri u punoj veličini. Namjerno prijelaz, a ne animacija s opacity:0 u polazištu — takva postavka jednom nam je već ostavila naslove trajno nevidljive kad se animacija nije pokrenula. Ovdje je najgori mogući ishod uređaj koji ostane malo manji; dokaz se vidi u svakom slučaju. */ .ima-js .dokaz .mobitel__tijelo{ transform: scale(.86) translateY(14px); transition: transform 1.15s cubic-bezier(.22, 1, .36, 1); } .ima-js .dokaz.je-otkriveno .mobitel__tijelo{ transform: none; } @media (prefers-reduced-motion: reduce){ .ima-js .dokaz .mobitel__tijelo{ transform:none; transition:none; } } .dokaz__shot figcaption, .dokaz__ai figcaption{ margin-top: 14px; font-size: 0.84375rem; line-height:1.5; color: var(--muted); text-align:center; } .dokaz__cap-label{ font-family: var(--font-hand); font-weight:700; font-size: 0.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-soft); margin-right: 6px; } .dokaz__text{ align-self:center; } .dokaz__eyebrow{ font-family: var(--font-hand); font-weight:700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 14px; } .dokaz__title{ font-family: var(--font-brush); font-size: clamp(2rem, 4vw, 3.375rem); line-height: 1.12; color: var(--ink); margin: 0 0 20px; } .dokaz__title em{ font-style: normal; color: var(--accent); } .dokaz__lead{ font-size: clamp(1rem, 1.7vw, 1.1875rem); line-height: 1.65; color: var(--ink-soft); margin: 0 0 22px; } .dokaz__lead strong{ color: var(--ink); } .dokaz__quote{ display:inline-block; background: var(--accent-bg); color: var(--ink); font-weight: 700; font-size: clamp(0.9375rem, 1.5vw, 1.0625rem); line-height: 1.5; padding: 12px 18px; border-radius: 6px; margin: 0 0 clamp(28px, 4vh, 40px); } /* AI dokaz je bonus, ne druga polovica priče — zato manji i podređen */ .dokaz__ai{ margin:0; } .dokaz__ai img{ display:block; width:100%; height:auto; border-radius: 12px; box-shadow: 0 24px 48px -20px rgba(13,27,42,.38); } @media (max-width: 900px){ .dokaz__grid{ grid-template-columns: 1fr; } .dokaz__text{ order: -1; } .dokaz__shot{ max-width: 420px; margin: 0 auto; } .dokaz__ai{ margin-top: clamp(26px,4vh,36px); } } /* =========================================================== POZIV NA AKCIJU (nakon dokaza) Prije ovoga na cijeloj naslovnoj nije bilo nijednog CTA-a između heroa i footera — tko se uvjerio kod Dokaza nije imao gdje kliknuti. =========================================================== */ .poziv{ position: relative; z-index:1; padding: clamp(20px, 4vh, 40px) 30px clamp(70px, 11vh, 120px); } .poziv__inner{ max-width: 760px; margin: 0 auto; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(34px, 5vw, 56px) clamp(24px, 4vw, 52px); text-align:center; box-shadow: 0 30px 60px -30px rgba(13,27,42,.28); } .poziv__title{ font-family: var(--font-brush); font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height:1.12; color: var(--ink); margin: 0 0 14px; } .poziv__lead{ font-size: clamp(0.9375rem, 1.6vw, 1.125rem); line-height:1.65; color: var(--ink-soft); max-width: 48ch; margin: 0 auto; } .poziv__akcije{ display:flex; flex-wrap:wrap; justify-content:center; gap: 12px; margin: clamp(24px, 3.6vh, 34px) 0 16px; } .poziv__btn{ font-family: var(--font-brush); font-size: 1rem; padding: 13px 28px; border-radius: 32px; background: var(--accent); color:#fff; box-shadow: 0 10px 24px rgba(47,123,255,.3); transition: transform .22s ease, background .22s ease; } .poziv__btn:hover{ transform: translateY(-3px); background:#2668e0; } .poziv__mikro{ font-family: var(--font-hand); font-size: 0.84375rem; color: var(--muted); margin:0; } /* =========================================================== ŠTO RADIMO — kompaktna lista (vodi na Usluge), oblačić na hover, ceduljica koja se vuče. Mjere su namjerno stisnute prema referenci: kartica ~340px, redak ~40px, sistemski font obične debljine — prije je bilo 418px sa 600 težinom pa je djelovalo dvostruko krupnije. =========================================================== */ .usl-traka{ position: relative; z-index:1; padding: clamp(60px, 10vh, 110px) 30px; } .usl-traka__inner{ max-width: 1090px; margin: 0 auto; } .usl-traka__head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap: 14px 24px; /* nagib +8° spušta desni kraj naslova ispod njegove layout kutije, pa razmak mora biti veći nego kod sekcija s nagibom ulijevo */ margin-bottom: clamp(56px, 8vh, 96px); } .usl-traka__title{ font-family: var(--font-brush); font-size: clamp(2.5rem, 7.4vw, 5.75rem); line-height:.95; color: var(--ink); margin: 0; /* obrnuti nagib od Projekata i Bloga — spušta se udesno, kao na referenci */ transform: rotate(8deg); transform-origin: left center; } .usl-scena{ position: relative; display:flex; align-items:flex-start; justify-content:space-between; gap: clamp(24px, 4vw, 60px); } /* --- lista --- */ .usl-lista-omot{ position: relative; flex: 0 0 auto; width: 330px; max-width: 100%; } /* lepeza od šest crtica koja izlazi iz gornjeg lijevog kuta kartice */ .usl-iskre{ /* crtice zrače iz točke (78,78) u viewBoxu; pomak je tolik da ta točka padne točno na gornji lijevi kut kartice */ /* dvije skupine po tri poteza — lijevo od kartice i iznad nje, pomaknuto udesno. Kut kartice je točka (60,60) u viewBoxu, otud pomak. */ position:absolute; top:-60px; left:-60px; width: 160px; height:120px; pointer-events:none; overflow: visible; } .usl-lista{ list-style:none; margin:0; padding: 7px; background: var(--chrome-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 34px 60px -26px rgba(13,27,42,.5), 0 6px 16px rgba(13,27,42,.1); } .usl-red{ display:flex; align-items:center; gap: 10px; padding: 9px 12px; border-radius: 7px; color: var(--ink); font-family: var(--font-ui); transition: background .16s ease, color .16s ease; } .usl-red__broj{ flex:0 0 auto; width: 26px; font-size: 1.0625rem; font-weight:550; font-variant-numeric: tabular-nums; color: var(--muted); transition: color .16s ease; } .usl-red__ime{ flex:1 1 auto; min-width:0; font-size: 1.1875rem; font-weight:600; letter-spacing:-.014em; } .usl-red__strelica{ flex:0 0 auto; width:8px; height:13px; color: var(--muted); transition: color .16s ease, transform .16s ease; } .usl-red:hover, .usl-red:focus-visible{ background: var(--accent); color:#fff; } .usl-red:hover .usl-red__broj, .usl-red:focus-visible .usl-red__broj, .usl-red:hover .usl-red__strelica, .usl-red:focus-visible .usl-red__strelica{ color:#fff; opacity:.9; } .usl-red:hover .usl-red__strelica{ transform: translateX(2px); } .usl-red:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } /* --- ceduljica koju se može odvući --- */ .usl-note{ position: relative; z-index: 5; flex: 0 0 auto; width: 15vw; height: 20vh; margin-top: clamp(20px, 4vh, 54px); background: var(--chrome-2); border-radius: 3px; padding: 0 0 34px; box-shadow: 0 18px 40px -22px rgba(13,27,42,.45); transform: rotate(3deg); cursor: grab; touch-action: none; /* da povlačenje ne skrola stranicu */ user-select: none; } .usl-note.se-vuce{ cursor: grabbing; box-shadow: 0 30px 60px -20px rgba(13,27,42,.5); } .usl-note__traka{ display:block; height: 26px; border-radius: 3px 3px 0 0; background: #f5c518; } .usl-note p{ /* isti font kao nazivi usluga u lijevoj kartici */ font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 550; line-height:1.28; color: var(--ink-soft); margin: 16px 16px 0; } .usl-note__podvlaka{ position:absolute; left: 10px; right: 10px; bottom: -18px; width: auto; height: 22px; pointer-events:none; } .usl-note:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; } @media (max-width: 980px){ .usl-scena{ flex-direction: column; align-items: stretch; } .usl-lista-omot{ width: 100%; } /* U stupcu je 20vh na niskim ekranima premalo za tekst, pa visina ovdje ide po sadržaju — fiksne mjere vrijede samo za raspored u dva stupca. */ .usl-note{ width: min(260px, 78vw); height: auto; margin: clamp(34px,5vh,48px) auto 0; } } /* =========================================================== IZ BLOGA — zadnja sekcija prije footera Namjerno na kraju: posjetitelju s namjerom blog odvlači pažnju s konverzije, pa hvata tek onoga tko je sve pročitao i još odlučuje. Koristi isti .blog__row kao podstranica Blog — samo bez mjera vezanih uz cijeli ekran (75vw / 5vh). =========================================================== */ .blog-traka{ position: relative; z-index:1; padding: clamp(50px, 8vh, 90px) 30px clamp(60px, 10vh, 110px); } /* Praznina Usluge -> Blog mora biti jednaka onoj Projekti -> Usluge. Obje su zbroj donjeg odmaka gornje sekcije i gornjeg odmaka donje: Projekti -> Usluge = 100px (fiksni padding .projekti) + U Usluge -> Blog = U + gornji odmak .blog-traka, U = clamp(60px,10vh,110px) Dakle gornji odmak Bloga mora biti tih istih 100px, i onda su jednake na svakoj visini kadra. Ovdje je stajao clamp(50px, 8vh, 90px) — na 1440x900 to je 72px, pa je razmak ispadao 162 naspram 190. Na uskom kadru ostaje izvorni clamp: ondje se za visinu bori svaki piksel. */ @media (min-width: 821px){ .blog-traka{ padding-top: 100px; } } .blog-traka__inner{ max-width: var(--maxw); margin: 0 auto; } .blog-traka__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; /* Škrabotina ispod "Svi savjeti" viri ~26px ispod linka; s manje razmaka zalazila je preko datuma u prvom retku bloga. */ gap: 14px 24px; margin-bottom: clamp(46px, 6vh, 58px); } .blog-traka__title{ font-family: var(--font-brush); font-size: clamp(2.5rem, 7.4vw, 5.75rem); line-height:.95; color: var(--ink); margin:0; transform: rotate(-8deg); transform-origin: left center; } .blog-traka .blog__row{ width: 100%; height: auto; padding: 13px 18px; } .blog-traka .blog__thumb{ width: 38px; height: 38px; } /* Stupac je ovdje bio dok je uz naslov stajao i lead odlomak. Sad su u glavi samo naslov i gumb, koji zajedno traže ~200px — stanu u redak i na 320px, pa gumb ostaje desno uz naslov kao i na širokim ekranima. */ /* =========================================================== BROJKE (društveni dokaz) =========================================================== */ .brojke{ position: relative; z-index:1; padding: clamp(70px, 11vh, 130px) 30px clamp(100px, 16vh, 170px); } .brojke__inner{ max-width: var(--maxw); margin: 0 auto; } /* isti tretman kao naslovi sekcija Projekti / Usluge / Blog */ .brojke__title{ width: fit-content; font-family: var(--font-brush); font-size: clamp(2.5rem, 7.4vw, 5.75rem); line-height:.95; letter-spacing:.5px; color: var(--ink); margin: 0 0 clamp(30px, 4.5vh, 56px); transform: rotate(-8deg); transform-origin: left center; } .brojke__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 20px 40px; margin-bottom: clamp(80px, 12vh, 140px); } /* Sistemski sans kao kod naziva usluga; uvodni podebljani dio ostaje u rukopisnom fontu, pa se rečenica vidljivo lomi na dvoje. */ .brojke__lead{ max-width: 660px; font-family: var(--font-ui); font-weight: 600; letter-spacing: -.014em; font-size: clamp(1.0625rem, 1.85vw, 1.375rem); line-height: 1.5; color: var(--ink-soft); } .brojke__lead strong{ font-family: var(--font-hand); font-weight: 700; letter-spacing: normal; font-size: clamp(1.1875rem, 2.1vw, 1.5625rem); color: var(--ink); } .brojke__cta{ flex: 0 0 auto; white-space:nowrap; } .brojke__grid{ display:grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: repeat(3, 1fr); } .stat{ text-align:center; } .stat__num{ display:block; font-family: var(--font-brush); font-size: clamp(3.625rem, 9.5vw, 7.5rem); line-height: 1; color: var(--ink); } .stat__num em{ color: var(--accent); font-style:normal; } .stat__lbl{ display:block; margin-top: 14px; font-family: var(--font-hand); font-size: clamp(1rem, 1.9vw, 1.3125rem); color: var(--ink-soft); line-height:1.4; } @media (max-width: 680px){ .brojke__grid{ grid-template-columns: 1fr; gap: 36px; } } /* =========================================================== FAQ (chat / iMessage stil) =========================================================== */ .faq{ position: relative; z-index:1; padding: clamp(60px,10vh,110px) 0 clamp(70px,11vh,120px); overflow: hidden; } .faq__inner{ max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(24px,5vw,44px); position:relative; z-index:2; } .faq__title{ font-family: var(--font-brush); font-size: clamp(2.125rem, 6.5vw, 4.75rem); color: var(--ink); margin-bottom: clamp(30px, 5vh, 54px); } .faq__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: clamp(10px, 1.6vh, 16px); max-width: 660px; } .faq__item{ display:flex; flex-direction:column; } .faq__q{ display:inline-flex; align-items:center; gap:12px; align-self:flex-start; text-align:left; background:none; border:0; padding:0; cursor:pointer; } .faq__bubble{ font-family: var(--font-ui); font-size: clamp(0.9375rem, 1.5vw, 1.125rem); color: var(--ink); background: var(--chrome-2); padding: 12px 20px; border-radius: 22px 22px 22px 6px; transition: background-color .2s ease, color .2s ease; } .faq__q:hover .faq__bubble{ background:var(--chrome-3); } .faq__q[aria-expanded="true"] .faq__bubble{ background:var(--tint-2); color: var(--ink); } .faq__toggle{ position:relative; flex:0 0 auto; width:24px; height:24px; border-radius:50%; border:1.6px solid #c6c6c8; transition: border-color .2s ease; } .faq__toggle::before, .faq__toggle::after{ content:""; position:absolute; left:50%; top:50%; width:11px; height:1.7px; background:#9a9a9e; border-radius:2px; transform: translate(-50%,-50%); } .faq__toggle::after{ transform: translate(-50%,-50%) rotate(90deg); transition: opacity .2s ease; } .faq__q[aria-expanded="true"] .faq__toggle{ border-color:#a9c4ff; } .faq__q[aria-expanded="true"] .faq__toggle::after{ opacity:0; } /* Zatvoreno stanje postoji samo dok JS može otvarati. Bez njega prekidač ne radi, pa bi svi odgovori osim prvog ostali nedostupni — ovako su otvoreni. Vrijedi i za naslovnu, koja je dosad bez JS-a imala isti problem. */ .ima-js .faq__a{ display:grid; grid-template-rows: 0fr; opacity:0; transition: grid-template-rows .35s cubic-bezier(.6,.05,.2,1), opacity .3s ease; } .ima-js .faq__item.open .faq__a{ grid-template-rows: 1fr; opacity:1; } .faq__a-inner{ overflow:hidden; } .faq__abubble{ font-family: var(--font-ui); font-size: clamp(0.9375rem, 1.5vw, 1.125rem); line-height:1.42; color:#fff; background: var(--accent); padding: 12px 20px; border-radius: 22px 22px 6px 22px; max-width: min(82%, 500px); margin: 10px 0 0 auto; /* poravnato desno (poslana poruka) */ } /* doodles */ /* Upitnici uz FAQ. Sekcija je i na naslovnoj i na Uslugama ista .faq — puna širina ekrana — pa postoci u right: padaju na isto mjesto. */ .faq{ position: relative; } .faq__doodle{ position:absolute; z-index:1; pointer-events:none; font-family: var(--font-brush); line-height:1; } .faq__doodle.q1{ color: var(--accent); font-size: clamp(3.125rem,7vw,5.625rem); top:40%; right:16%; opacity:.9; transform: rotate(8deg); } .faq__doodle.q2{ color:#c3c6cd; font-size: clamp(2.375rem,5vw,4rem); top:50%; right:34%; opacity:.7; transform: rotate(-6deg); } @media (max-width: 760px){ .faq__doodle{ display:none; } .faq__abubble{ max-width: 88%; } } /* =========================================================== KONTAKT podstranica =========================================================== */ .kontakt{ position: relative; z-index:1; padding: clamp(16px,2vh,36px) 20px clamp(60px,10vh,110px); overflow: hidden; } .kontakt__title{ width: fit-content; font-family: var(--font-brush); /* Bio je 9vw / 9.25rem — najveći naslov na stranici, veći i od onog na naslovnici, pa je uz karticu od 580px odnosio previše praznine. Sada je u rangu ostalih naslova podstranica (Brojke 7.4vw, FAQ 6.5vw). */ font-size: clamp(3.25rem, 7vw, 7rem); line-height:.9; text-align:center; color: var(--ink); /* Bez spuštanja po Y i s uskim razmakom ispod: naslov je povećan na 9vw, a gornji razmak stranice ujednačen s ostalima (--vrh), pa je dno forme inače izlazilo iz kadra. Naslov je rotiran i ionako vizualno prelazi preko kartice, tako da mu razmak ispod ne treba. */ /* Jedini naslov kojem rotacija vrh spušta, a ne diže (-15° uz pomak ulijevo), pa mu gornji razmak to nadoknađuje. Vodoravno je odmaknut od mrvica, tako da ga podizanje ne dovodi pod njih. */ /* Negativna margina diže naslov, a s njim i sve iza njega u toku — karticu i ukrase. Mrvice ostaju gdje jesu jer stoje prije njega. */ margin: -76px auto clamp(2px,0.4vh,10px); position:relative; z-index:4; transform: rotate(-15deg) translate(-20vw, 0); } /* ručno pisane labele */ .kontakt__hand{ position:absolute; z-index:4; pointer-events:none; font-family: var(--font-brush); text-transform:uppercase; color: var(--ink); font-size: clamp(0.875rem,1.5vw,1.25rem); line-height:1.15; letter-spacing:.5px; } /* Ispod naslova, ne uz njega: povećani naslov se pri rotaciji od -15° spušta ulijevo i na 33% bi ga prekrio. */ .kontakt__hand.hand-left{ top: 46%; left: 5%; transform: rotate(-8deg); max-width:160px; } .kontakt__hand.hand-right{ bottom: 15%; right: 5%; transform: rotate(-6deg); text-align:right; max-width:180px; } /* keycap slova (parallax) */ .kontakt .float-layer{ position:absolute; inset:0; z-index:2; pointer-events:none; } .kontakt .keycap img{ width: clamp(60px,6.6vw,100px); filter: drop-shadow(0 16px 24px rgba(13,27,42,.30)); } /* dodatno polje kad je rok "Da" */ .kc-rok-extra[hidden]{ display:none; } /* stage: kartica + šareni doodleovi okolo */ .kc-stage{ position:relative; z-index:3; width: min(580px, 94vw); margin: clamp(-40px,-3vh,-14px) auto 0; } .kc-deco{ position:absolute; inset:-70px -150px; z-index:1; pointer-events:none; } .cd{ position:absolute; height:auto; display:block; } /* Položaji su u CSS-u, a ne inline uz širinu i rotaciju, jer ih uski kadar mora moći premjestiti — inline stil se ne da nadjačati bez !important. */ .cd--1 { top: 16%; left: 2%; } .cd--2 { top: 6%; right: 3%; } .cd--3 { bottom: 14%; left: 4%; } .cd--4 { top: -2%; right: 12%; } .cd--5 { top: 40%; right: -2%; } .cd--6 { top: 52%; right: 4%; } .cd--7 { top: 28%; right: -8%; } .cd--8 { top: 44%; left: -4%; } .cd--9 { bottom: 24%; left: 12%; } .cd--10{ bottom: 6%; left: 30%; } .cd--11{ bottom: 10%; right: 8%; } /* Uvjetno polje (rok -> Da) otvara se glatko. Atribut hidden se ne da animirati jer je display:none, pa stanje nosi razred, a visina ide kroz grid-template-rows 0fr -> 1fr — jedini način da se animira do AUTO visine bez pogađanja max-heighta. visibility drži polje izvan reda tabanja dok je zatvoreno, i mijenja se tek na kraju prijelaza. */ .kc-rok-extra{ display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; margin-top: 0; margin-bottom: 0; transition: grid-template-rows .38s cubic-bezier(.16,1,.3,1), opacity .26s ease, margin-top .38s cubic-bezier(.16,1,.3,1), margin-bottom .38s cubic-bezier(.16,1,.3,1), visibility 0s linear .38s; } /* overflow ide na omotač jer se on skuplja; input unutra ostaje netaknut */ .kc-rok-extra__unutra{ min-height: 0; overflow: hidden; } .kc-rok-extra.je-otvoreno{ grid-template-rows: 1fr; opacity: 1; visibility: visible; margin-top: clamp(14px, 2vh, 22px); margin-bottom: 28px; transition: grid-template-rows .38s cubic-bezier(.16,1,.3,1), opacity .3s ease .08s, margin-top .38s cubic-bezier(.16,1,.3,1), margin-bottom .38s cubic-bezier(.16,1,.3,1), visibility 0s; } @media (prefers-reduced-motion: reduce){ .kc-rok-extra, .kc-rok-extra.je-otvoreno{ transition: none; } } /* form kartica */ .kc-card{ position:relative; z-index:3; width:100%; background: var(--paper-2); border-radius: 26px; box-shadow: 0 36px 84px -26px rgba(13,27,42,.38); padding: clamp(30px,3.6vw,52px); font-family: var(--font-ui); } .kc-card__head{ text-align:center; margin-bottom: 36px; } .kc-card__head img{ width:66px; height:66px; margin:0 auto 18px; border-radius:16px; display:block; } .kc-title{ font-size: clamp(1.5625rem,2.9vw,2rem); font-weight:800; color: var(--ink); margin:0 0 12px; line-height:1.15; } .kc-sub{ font-size: 1rem; color: var(--muted); line-height:1.55; margin:0; } .kc-field{ margin-bottom: 28px; } .kc-field > .kc-q, .kc-rok-extra__unutra > .kc-q, .kc-group > legend{ display:block; font-size: 0.8125rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color: var(--muted); margin-bottom: 12px; padding:0; } .kc-field .req{ color: var(--accent); } /* Pravi