/* ========================================================= FOTOLAND — dizajn sistem Sajt ima dvije ravnopravne teme koje se mijenjaju jednim klikom: data-fl-theme="dark" → komora (crna) data-fl-theme="light" → papir (svijetla) Cijela paleta su CSS varijable, pa se prebacivanjem jednog atributa na mijenja svaka boja na sajtu — bez reloada. Izuzetak koji NIJE tema: tekst koji stoji preko fotografije (hero, kartice radova) je uvijek svijetao, jer mora biti citljiv preko slike. To je pravilo citljivosti, ne izbor teme. ========================================================= */ /* ---------- 1. TOKENI ---------- */ /* Zajednicko za obje teme */ :root{ --fl-font-display:'Fraunces',Georgia,'Times New Roman',serif; --fl-font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --fl-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* Tekst preko fotografije — nikad se ne mijenja */ --fl-on-photo:#F6F4F0; --fl-on-photo-2:rgba(246,244,240,.72); --fl-on-photo-line:rgba(246,244,240,.28); --fl-shell:min(1440px,100% - 2 * var(--fl-gutter)); --fl-gutter:clamp(20px,5vw,72px); --fl-section:clamp(72px,10vw,150px); --fl-radius:2px; --fl-radius-lg:4px; --fl-ease:cubic-bezier(.22,.61,.36,1); --fl-fast:.28s var(--fl-ease); --fl-theme:.5s var(--fl-ease); } /* --- KOMORA (tamna) --- */ :root, :root[data-fl-theme="dark"], .fl-dark, .fl-hero, .fl-header.is-onphoto{ --fl-bg:#0A0A0B; --fl-bg-2:#0F0F11; --fl-bg-blur:rgba(10,10,11,.82); --fl-surface:#151518; --fl-surface-2:#1C1C20; --fl-line:rgba(244,241,236,.12); --fl-line-strong:rgba(244,241,236,.26); --fl-shadow:0 18px 46px rgba(0,0,0,.4); --fl-ink:#F4F1EC; --fl-ink-2:#C9C5BE; --fl-muted:#8B8880; --fl-faint:#5E5C57; --fl-accent:#E4633A; --fl-accent-2:#F2A65A; --fl-accent-ink:#0A0A0B; --fl-accent-glow:rgba(228,99,58,.28); --fl-accent-wash:rgba(228,99,58,.09); --fl-ok:#8ADCB2; --fl-ok-bg:rgba(64,160,110,.1); --fl-ok-line:rgba(64,160,110,.45); --fl-err:#F08A84; --fl-err-bg:rgba(228,65,58,.1); --fl-err-line:rgba(228,65,58,.45); --fl-grain:.045; --fl-grain-blend:overlay; --fl-map-filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.85); } /* --- PAPIR (svijetla) --- */ :root[data-fl-theme="light"], .fl-light{ --fl-bg:#F1F1EE; --fl-bg-2:#E7E7E2; --fl-bg-blur:rgba(241,241,238,.86); --fl-surface:#FAFAF8; --fl-surface-2:#FFFFFF; --fl-line:rgba(20,20,24,.13); --fl-line-strong:rgba(20,20,24,.30); --fl-shadow:0 18px 40px rgba(20,20,24,.10); --fl-ink:#141417; --fl-ink-2:#45454B; --fl-muted:#74747B; --fl-faint:#9A9AA0; --fl-accent:#D2481C; --fl-accent-2:#B03D13; --fl-accent-ink:#FFF7F3; --fl-accent-glow:rgba(210,72,28,.20); --fl-accent-wash:rgba(210,72,28,.07); --fl-ok:#1B6B48; --fl-ok-bg:rgba(27,107,72,.09); --fl-ok-line:rgba(27,107,72,.38); --fl-err:#96201A; --fl-err-bg:rgba(150,32,26,.08); --fl-err-line:rgba(150,32,26,.36); --fl-grain:.022; --fl-grain-blend:multiply; --fl-map-filter:grayscale(1) contrast(.96) opacity(.9); } /* ---------- 2. RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--fl-bg)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--fl-bg); color:var(--fl-ink); font-family:var(--fl-font-ui); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; transition:background var(--fl-theme),color var(--fl-theme); } img,video,svg,canvas{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4,h5,h6,p,figure,blockquote{margin:0} ul,ol{margin:0;padding:0;list-style:none} ::selection{background:var(--fl-accent);color:var(--fl-accent-ink)} :focus-visible{outline:2px solid var(--fl-accent);outline-offset:3px;border-radius:2px} /* Zrno — jace u komori, jedva vidljivo na papiru */ body::after{ content:"";position:fixed;inset:0;z-index:9998;pointer-events:none; opacity:var(--fl-grain);mix-blend-mode:var(--fl-grain-blend); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); transition:opacity var(--fl-theme); } /* Sekcija koja je namjerno u drugoj temi od ostatka sajta */ .fl-dark,.fl-light{background:var(--fl-bg);color:var(--fl-ink)} /* ---------- 3. TIPOGRAFIJA ---------- */ .fl-display{ font-family:var(--fl-font-display); font-weight:300; font-variation-settings:'SOFT' 0,'WONK' 1,'opsz' 120; line-height:.98; letter-spacing:-.025em; text-wrap:balance; } .fl-d1{font-size:clamp(2.9rem,8.5vw,7.5rem)} .fl-d2{font-size:clamp(2.2rem,5.4vw,4.4rem)} .fl-d3{font-size:clamp(1.65rem,3.2vw,2.6rem)} .fl-display em,.fl-italic{ font-style:italic;color:var(--fl-accent-2); font-variation-settings:'SOFT' 60,'WONK' 1; } .fl-lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--fl-ink-2);line-height:1.6;max-width:62ch} /* Sirina teksta za citanje. .fl-body je stari naziv — zadrzan kao alias, ali izricito iskljucen na da ne moze suziti cijeli sajt. */ .fl-prose,.fl-body:not(body){color:var(--fl-ink-2);max-width:68ch} .fl-prose p + p,.fl-body:not(body) p + p{margin-top:1.1em} body{max-width:none} .fl-accent-text{color:var(--fl-accent-2)} .fl-meta{ font-family:var(--fl-font-mono);font-size:.7rem;letter-spacing:.16em; text-transform:uppercase;color:var(--fl-muted); } .fl-eyebrow{ display:inline-flex;align-items:center;gap:.7em; font-family:var(--fl-font-mono);font-size:.7rem;letter-spacing:.2em; text-transform:uppercase;color:var(--fl-accent-2); } .fl-eyebrow::before{content:"";width:26px;height:1px;background:var(--fl-accent);flex:none} .fl-eyebrow--plain::before{display:none} /* ---------- 4. LAYOUT ---------- */ .fl-shell{width:var(--fl-shell);max-width:100%;margin-inline:auto;position:relative;z-index:2} .fl-shell--narrow{width:min(880px,100% - 2 * var(--fl-gutter))} .fl-shell--mid{width:min(1120px,100% - 2 * var(--fl-gutter))} .fl-section{padding-block:var(--fl-section);position:relative} .fl-section--tight{padding-block:clamp(48px,6vw,88px)} .fl-section--alt{background:var(--fl-bg-2);transition:background var(--fl-theme)} .fl-section--surface{background:var(--fl-surface);transition:background var(--fl-theme)} .fl-hr{height:1px;background:var(--fl-line);border:0;margin:0} .fl-head{ display:grid;gap:clamp(20px,3vw,48px); grid-template-columns:minmax(0,1fr); margin-bottom:clamp(40px,5vw,72px); } @media(min-width:900px){ .fl-head--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end} } .fl-head__title{margin-top:.5em} /* ---------- 5. DUGMAD ---------- */ .fl-btn{ --btn-bg:transparent;--btn-ink:var(--fl-ink);--btn-line:var(--fl-line-strong); display:inline-flex;align-items:center;gap:.75em; padding:.95em 1.6em; background:var(--btn-bg);color:var(--btn-ink); border:1px solid var(--btn-line);border-radius:var(--fl-radius); font-family:var(--fl-font-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase; cursor:pointer;position:relative;overflow:hidden; transition:color var(--fl-fast),border-color var(--fl-fast),background var(--fl-fast); } .fl-btn::before{ content:"";position:absolute;inset:0;background:var(--fl-accent); transform:scaleY(0);transform-origin:bottom;transition:transform .42s var(--fl-ease);z-index:0; } .fl-btn > *{position:relative;z-index:1} .fl-btn:hover{border-color:var(--fl-accent);color:var(--fl-accent-ink)} .fl-btn:hover::before{transform:scaleY(1)} .fl-btn__arrow{transition:transform var(--fl-fast)} .fl-btn:hover .fl-btn__arrow{transform:translateX(4px)} .fl-btn--solid{--btn-bg:var(--fl-accent);--btn-ink:var(--fl-accent-ink);--btn-line:var(--fl-accent)} .fl-btn--solid::before{background:var(--fl-ink)} .fl-btn--solid:hover{color:var(--fl-bg);border-color:var(--fl-ink)} .fl-btn--ghost{--btn-line:transparent;padding-inline:0} .fl-btn--ghost::before{display:none} .fl-btn--ghost:hover{color:var(--fl-accent-2)} .fl-btn--block{width:100%;justify-content:center} .fl-link{position:relative;display:inline-block;color:var(--fl-ink);padding-bottom:2px} .fl-link::after{ content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform .4s var(--fl-ease); } .fl-link:hover::after{transform:scaleX(1);transform-origin:left} /* ---------- 6. HEADER ---------- */ .fl-header{ position:fixed;top:0;left:0;right:0;z-index:1000; color:var(--fl-ink); transition:background .4s var(--fl-ease),color .4s var(--fl-ease), border-color .4s var(--fl-ease),transform .45s var(--fl-ease); border-bottom:1px solid transparent; } .fl-header.is-stuck{ background:var(--fl-bg-blur); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border-bottom-color:var(--fl-line); } .fl-header.is-hidden{transform:translateY(-102%)} .fl-header__inner{ width:var(--fl-shell);max-width:100%;margin-inline:auto; display:flex;align-items:center;justify-content:space-between;gap:24px; height:clamp(66px,7vw,88px); } .fl-header__right{display:flex;align-items:center;gap:10px} .fl-logo{display:flex;align-items:center;gap:.6em;flex:none} .fl-logo img{max-height:40px;width:auto} .fl-logo__text{ font-family:var(--fl-font-display);font-size:1.32rem;letter-spacing:.14em; text-transform:uppercase;font-weight:400;line-height:1; } .fl-logo__dot{width:6px;height:6px;border-radius:50%;background:var(--fl-accent);flex:none; box-shadow:0 0 12px var(--fl-accent-glow)} .fl-nav{display:none} @media(min-width:1000px){ .fl-nav{display:flex;align-items:center;gap:clamp(18px,2vw,34px)} } .fl-nav li{list-style:none;display:block} .fl-nav a{ font-family:var(--fl-font-mono);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase; color:var(--fl-ink-2);position:relative;padding-block:6px;transition:color var(--fl-fast); } .fl-nav a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--fl-accent); transform:scaleX(0);transform-origin:right;transition:transform .38s var(--fl-ease); } .fl-nav a:hover,.fl-nav .current-menu-item > a{color:var(--fl-ink)} .fl-nav a:hover::after,.fl-nav .current-menu-item > a::after{transform:scaleX(1);transform-origin:left} .fl-nav .menu-item-has-children{position:relative} .fl-nav .sub-menu{ position:absolute;top:100%;left:-18px;min-width:210px;padding:10px 0;margin-top:14px; background:var(--fl-surface);border:1px solid var(--fl-line);border-radius:var(--fl-radius); opacity:0;visibility:hidden;transform:translateY(-6px);box-shadow:var(--fl-shadow); transition:opacity var(--fl-fast),transform var(--fl-fast),visibility var(--fl-fast); } .fl-nav .menu-item-has-children:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)} .fl-nav .sub-menu a{display:block;padding:9px 18px} .fl-nav .sub-menu a::after{display:none} .fl-nav .sub-menu a:hover{background:var(--fl-surface-2);color:var(--fl-accent-2)} .fl-header__cta{display:none} @media(min-width:1000px){.fl-header__cta{display:inline-flex}} /* ---------- 6b. PREKIDAC TEME ---------- */ .fl-theme-toggle{ width:40px;height:40px;flex:none; display:grid;place-items:center; background:none;border:1px solid var(--fl-line);border-radius:50%; color:var(--fl-ink);cursor:pointer; transition:border-color var(--fl-fast),color var(--fl-fast),background var(--fl-fast); } .fl-theme-toggle:hover{border-color:var(--fl-accent);color:var(--fl-accent)} /* Ikona ekspozicije: krug kojem je pola popunjeno. Rotira se pri promjeni. */ .fl-theme-toggle svg{width:17px;height:17px;transition:transform .55s var(--fl-ease)} :root[data-fl-theme="light"] .fl-theme-toggle svg{transform:rotate(180deg)} .fl-theme-toggle__ring{fill:none;stroke:currentColor;stroke-width:1.4} .fl-theme-toggle__half{fill:currentColor} /* Burger */ .fl-burger{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 10px;background:none;border:0;cursor:pointer;color:inherit; } @media(min-width:1000px){.fl-burger{display:none}} .fl-burger span{display:block;height:1px;background:currentColor; transition:transform .38s var(--fl-ease),width .3s var(--fl-ease)} .fl-burger span:nth-child(1){width:100%} .fl-burger span:nth-child(2){width:70%;align-self:flex-end} .fl-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)} .fl-burger[aria-expanded="true"] span:nth-child(2){width:100%;transform:translateY(-3px) rotate(-45deg)} /* Mobilni meni */ .fl-drawer{ position:fixed;inset:0;z-index:999;background:var(--fl-bg);color:var(--fl-ink); display:flex;flex-direction:column;justify-content:center; padding:96px var(--fl-gutter) 40px; clip-path:inset(0 0 100% 0); transition:clip-path .6s var(--fl-ease),background var(--fl-theme); overflow-y:auto; } .fl-drawer.is-open{clip-path:inset(0 0 0 0)} .fl-drawer ul{display:flex;flex-direction:column;gap:2px} .fl-drawer a{ font-family:var(--fl-font-display);font-size:clamp(2rem,9vw,3.2rem);line-height:1.15; display:block;padding:.12em 0;color:var(--fl-ink); opacity:0;transform:translateY(18px); transition:opacity .5s var(--fl-ease),transform .5s var(--fl-ease),color var(--fl-fast); } .fl-drawer.is-open a{opacity:1;transform:none} .fl-drawer a:hover{color:var(--fl-accent-2)} .fl-drawer .sub-menu a{font-size:1.1rem;font-family:var(--fl-font-ui);color:var(--fl-muted);padding-left:1.2em} .fl-drawer__foot{margin-top:auto;padding-top:44px;display:grid;gap:14px} body.fl-locked{overflow:hidden} /* ---------- 7. HERO — tekst stoji preko fotografije ---------- */ .fl-hero{ position:relative;min-height:100svh;display:flex;align-items:flex-end; padding:calc(var(--fl-section) + 40px) 0 clamp(40px,6vw,72px); overflow:hidden;background:#0A0A0B;color:var(--fl-on-photo); } .fl-hero__media{position:absolute;inset:0;z-index:0} /* Dok nema hero slike/videa — mekana podloga umjesto ravne crnine */ .fl-hero__media:empty{ background: radial-gradient(90% 70% at 78% 22%,rgba(228,99,58,.16),transparent 60%), radial-gradient(70% 60% at 12% 88%,rgba(120,110,140,.12),transparent 62%), linear-gradient(160deg,#17161A 0%,#0A0A0B 62%); } .fl-hero__media img,.fl-hero__media video{width:100%;height:100%;object-fit:cover; transform:scale(1.06);animation:fl-drift 22s var(--fl-ease) forwards} @keyframes fl-drift{to{transform:scale(1)}} .fl-hero__scrim{ position:absolute;inset:0;z-index:1; background: linear-gradient(180deg,rgba(10,10,11,.74) 0%,rgba(10,10,11,.26) 34%,rgba(10,10,11,.9) 88%,#0A0A0B 100%), radial-gradient(120% 78% at 22% 88%,rgba(228,99,58,.15) 0%,transparent 62%); } .fl-hero__inner{position:relative;z-index:2;width:var(--fl-shell);max-width:100%;margin-inline:auto;flex:0 1 auto} .fl-hero__title{margin-top:.35em;max-width:16ch} .fl-hero__row{ margin-top:clamp(28px,4vw,48px); display:flex;flex-wrap:wrap;align-items:center;gap:clamp(16px,2.5vw,32px); } .fl-hero__strip{ position:relative;z-index:2; display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 16px; padding-top:20px;border-top:1px solid var(--fl-on-photo-line); margin-top:clamp(36px,5vw,60px); } .fl-hero__scroll{display:inline-flex;align-items:center;gap:.8em;color:var(--fl-on-photo-2)} .fl-hero__scroll i{ display:block;width:1px;height:34px;background:linear-gradient(180deg,#E4633A,transparent); animation:fl-pulse 2.4s var(--fl-ease) infinite; } @keyframes fl-pulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}} /* Zrno u herou je uvijek kao u komori */ .fl-hero::after{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.045; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .fl-play{ --s:clamp(64px,8vw,96px); width:var(--s);height:var(--s);border-radius:50%; display:grid;place-items:center;flex:none;color:var(--fl-on-photo); border:1px solid var(--fl-on-photo-line);background:rgba(10,10,11,.35); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); cursor:pointer;transition:all var(--fl-fast); } .fl-play:hover{border-color:#E4633A;background:#E4633A;color:#0A0A0B;transform:scale(1.05)} .fl-play svg{width:22%;fill:currentColor;margin-left:8%} /* ---------- 8. KADAR / PORTFOLIO ---------- */ .fl-grid{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:1fr} @media(min-width:700px){.fl-grid--2{grid-template-columns:repeat(2,1fr)}} @media(min-width:660px){.fl-grid--3{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.fl-grid--3{grid-template-columns:repeat(3,1fr)}} @media(min-width:560px){.fl-grid--4{grid-template-columns:repeat(2,1fr)}} @media(min-width:1060px){.fl-grid--4{grid-template-columns:repeat(4,1fr)}} .fl-mosaic{display:grid;gap:clamp(14px,1.6vw,22px);grid-template-columns:1fr} @media(min-width:600px){.fl-mosaic{grid-template-columns:repeat(2,1fr)}} @media(min-width:840px){ .fl-mosaic{grid-template-columns:repeat(6,1fr)} .fl-mosaic > *{grid-column:span 2} .fl-mosaic > .is-wide{grid-column:span 4} .fl-mosaic > .is-full{grid-column:span 6} .fl-mosaic > .is-wide::before{padding-top:56.25%} .fl-mosaic > .is-full::before{padding-top:42.86%} .fl-mosaic > .is-tall::before{padding-top:133.33%} } /* Kartica rada — uvijek svijetao tekst, jer stoji preko fotografije */ .fl-frame{position:relative;display:block;overflow:hidden;background:#151518;min-height:230px; border-radius:var(--fl-radius);isolation:isolate;color:var(--fl-on-photo)} .fl-frame::before{content:"";display:block;padding-top:75%} .fl-frame__media{position:absolute;inset:0;overflow:hidden;background:#1C1C20} .fl-frame__media img{width:100%;height:100%;object-fit:cover; transition:transform 1.1s var(--fl-ease),filter .7s var(--fl-ease); filter:grayscale(.35) contrast(1.02)} .fl-frame:hover .fl-frame__media img{transform:scale(1.05);filter:grayscale(0) contrast(1.05)} .fl-frame__media::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 42%,rgba(10,10,11,.88) 100%); } .fl-frame__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2vw,26px);z-index:2} .fl-frame__num{ position:absolute;top:clamp(12px,1.6vw,20px);left:clamp(12px,1.6vw,20px);z-index:2; font-family:var(--fl-font-mono);font-size:.66rem;letter-spacing:.16em;color:var(--fl-on-photo); padding:.32em .6em;border:1px solid var(--fl-on-photo-line);border-radius:2px; background:rgba(10,10,11,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } .fl-frame__tag{ position:absolute;top:clamp(12px,1.6vw,20px);right:clamp(12px,1.6vw,20px);z-index:2; font-family:var(--fl-font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; color:#F2A65A;text-shadow:0 1px 8px rgba(10,10,11,.6); } .fl-frame__title{font-family:var(--fl-font-display);font-size:clamp(1.15rem,1.9vw,1.6rem); line-height:1.1;letter-spacing:-.015em;color:var(--fl-on-photo)} .fl-frame__exif{margin-top:.5em;display:flex;flex-wrap:wrap;gap:.4em 1em} .fl-frame__exif span{font-family:var(--fl-font-mono);font-size:.63rem;letter-spacing:.12em; color:var(--fl-on-photo-2);text-transform:uppercase} .fl-frame--video .fl-frame__play{ position:absolute;inset:0;z-index:2;display:grid;place-items:center; opacity:0;transition:opacity var(--fl-fast); } .fl-frame--video:hover .fl-frame__play{opacity:1} .fl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.5vw,44px)} .fl-filter{ font-family:var(--fl-font-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase; padding:.6em 1.15em;border:1px solid var(--fl-line);border-radius:99px;background:none; color:var(--fl-muted);cursor:pointer;transition:all var(--fl-fast); } .fl-filter:hover{color:var(--fl-ink);border-color:var(--fl-line-strong)} .fl-filter.is-active{background:var(--fl-ink);color:var(--fl-bg);border-color:var(--fl-ink)} /* ---------- 9. USLUGE ---------- */ .fl-service{ display:grid;gap:clamp(18px,2.5vw,40px);align-items:start; padding-block:clamp(28px,3.6vw,48px);border-top:1px solid var(--fl-line);position:relative; } @media(min-width:860px){ .fl-service{grid-template-columns:70px minmax(0,1fr) minmax(0,1.15fr) auto;align-items:center} } .fl-service:last-child{border-bottom:1px solid var(--fl-line)} .fl-service__num{font-family:var(--fl-font-mono);font-size:.72rem;letter-spacing:.14em;color:var(--fl-faint)} .fl-service__title{font-family:var(--fl-font-display);font-size:clamp(1.5rem,2.9vw,2.3rem); line-height:1.05;letter-spacing:-.02em;transition:color var(--fl-fast)} .fl-service__desc{color:var(--fl-muted);font-size:.95rem;max-width:52ch} a.fl-service:hover .fl-service__title{color:var(--fl-accent-2)} .fl-service__go{color:var(--fl-faint);transition:color var(--fl-fast),transform var(--fl-fast)} a.fl-service:hover .fl-service__go{color:var(--fl-accent);transform:translateX(6px)} /* ---------- 10. STATISTIKA ---------- */ .fl-stats{display:grid;gap:clamp(24px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))} .fl-stat__n{font-family:var(--fl-font-display);font-size:clamp(2.6rem,5.5vw,4.2rem); line-height:1;letter-spacing:-.03em;color:var(--fl-ink);font-variant-numeric:tabular-nums} .fl-stat__n em{font-style:normal;color:var(--fl-accent)} .fl-stat__l{margin-top:.7em;font-family:var(--fl-font-mono);font-size:.68rem; letter-spacing:.16em;text-transform:uppercase;color:var(--fl-muted)} /* ---------- 11. PAKETI ---------- */ .fl-pack{ display:flex;flex-direction:column;padding:clamp(26px,3vw,40px); background:var(--fl-surface);border:1px solid var(--fl-line);border-radius:var(--fl-radius-lg); transition:border-color var(--fl-fast),transform var(--fl-fast),background var(--fl-theme); position:relative;overflow:hidden; } .fl-pack:hover{border-color:var(--fl-line-strong);transform:translateY(-4px)} .fl-pack.is-featured{ border-color:var(--fl-accent); background:linear-gradient(180deg,var(--fl-accent-wash),var(--fl-surface) 62%); } .fl-pack__flag{ position:absolute;top:0;right:0;padding:.42em 1em;background:var(--fl-accent);color:var(--fl-accent-ink); font-family:var(--fl-font-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; border-bottom-left-radius:var(--fl-radius-lg); } .fl-pack__name{font-family:var(--fl-font-display);font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.1} .fl-pack__price{margin-top:.55em;display:flex;align-items:baseline;gap:.4em} .fl-pack__price b{font-family:var(--fl-font-display);font-weight:400;font-size:clamp(2rem,3.6vw,2.8rem); line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .fl-pack__price span{font-family:var(--fl-font-mono);font-size:.7rem;letter-spacing:.14em; text-transform:uppercase;color:var(--fl-muted)} .fl-pack__note{margin-top:.9em;color:var(--fl-muted);font-size:.9rem} .fl-pack ul{margin:clamp(20px,2.6vw,30px) 0;display:grid;gap:.75em; padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--fl-line)} .fl-pack li{display:flex;gap:.8em;align-items:flex-start;color:var(--fl-ink-2);font-size:.94rem} .fl-pack li::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em; border-radius:50%;background:var(--fl-accent)} .fl-pack .fl-btn{margin-top:auto} /* ---------- 12. FORMA ---------- */ .fl-form{display:grid;gap:clamp(16px,2vw,22px)} .fl-form__row{display:grid;gap:clamp(16px,2vw,22px)} @media(min-width:680px){.fl-form__row--2{grid-template-columns:1fr 1fr}} .fl-field{display:grid;gap:.55em;position:relative} .fl-field > label{ font-family:var(--fl-font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:var(--fl-muted); } .fl-field > label .req{color:var(--fl-accent)} .fl-field input,.fl-field select,.fl-field textarea{ width:100%;padding:.95em 1.05em; background:var(--fl-surface);border:1px solid var(--fl-line);border-radius:var(--fl-radius); color:var(--fl-ink);font-size:.98rem;appearance:none;-webkit-appearance:none; transition:border-color var(--fl-fast),background var(--fl-fast),box-shadow var(--fl-fast); } .fl-field textarea{min-height:150px;resize:vertical;line-height:1.6} .fl-field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23888' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 1.05em center;padding-right:2.6em; } .fl-field input::placeholder,.fl-field textarea::placeholder{color:var(--fl-faint)} .fl-field input:focus,.fl-field select:focus,.fl-field textarea:focus{ outline:none;border-color:var(--fl-accent);background:var(--fl-surface-2); box-shadow:0 0 0 3px var(--fl-accent-glow); } .fl-field.has-error input,.fl-field.has-error select,.fl-field.has-error textarea{border-color:var(--fl-err)} .fl-field__err{color:var(--fl-err);font-size:.8rem;display:none} .fl-field.has-error .fl-field__err{display:block} .fl-choice{display:flex;flex-wrap:wrap;gap:8px} .fl-choice input{position:absolute;opacity:0;width:0;height:0} .fl-choice label{ padding:.7em 1.2em;border:1px solid var(--fl-line);border-radius:99px;cursor:pointer; font-family:var(--fl-font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--fl-muted);transition:all var(--fl-fast); } .fl-choice label:hover{color:var(--fl-ink);border-color:var(--fl-line-strong)} .fl-choice input:checked + label{background:var(--fl-accent);border-color:var(--fl-accent);color:var(--fl-accent-ink)} .fl-choice input:focus-visible + label{outline:2px solid var(--fl-accent);outline-offset:3px} .fl-consent{display:flex;gap:.85em;align-items:flex-start;font-size:.86rem;color:var(--fl-muted)} .fl-consent input[type="checkbox"]{ flex:none;width:18px;height:18px;min-width:18px;margin-top:.24em;padding:0; accent-color:var(--fl-accent);appearance:auto;-webkit-appearance:checkbox; } .fl-hp{position:absolute!important;left:-9999px!important;opacity:0!important;height:0!important} .fl-note{padding:1em 1.2em;border-radius:var(--fl-radius);font-size:.92rem;display:none; border:1px solid var(--fl-line)} .fl-note.is-visible{display:block} .fl-note--ok{background:var(--fl-ok-bg);border-color:var(--fl-ok-line);color:var(--fl-ok)} .fl-note--err{background:var(--fl-err-bg);border-color:var(--fl-err-line);color:var(--fl-err)} .fl-btn.is-loading{pointer-events:none;opacity:.6} /* ---------- 13. KONTAKT PODACI ---------- */ .fl-contact-list{display:grid;gap:clamp(20px,2.6vw,30px)} .fl-contact-item{display:grid;gap:.4em;padding-bottom:clamp(20px,2.6vw,30px);border-bottom:1px solid var(--fl-line)} .fl-contact-item:last-child{border-bottom:0;padding-bottom:0} .fl-contact-item a,.fl-contact-item p{font-size:1.05rem;color:var(--fl-ink)} /* ---------- 14. RECENZIJE ---------- */ .fl-quote{ padding:clamp(28px,3.4vw,44px);background:var(--fl-surface); border:1px solid var(--fl-line);border-radius:var(--fl-radius-lg); display:flex;flex-direction:column;gap:1.4em;height:100%; transition:background var(--fl-theme); } .fl-quote__mark{font-family:var(--fl-font-display);font-size:3rem;line-height:.6;color:var(--fl-accent);opacity:.6} .fl-quote__text{font-family:var(--fl-font-display);font-size:clamp(1.05rem,1.55vw,1.3rem); line-height:1.45;color:var(--fl-ink);font-style:italic;font-variation-settings:'SOFT' 60} .fl-quote__who{margin-top:auto;display:grid;gap:.25em} .fl-quote__who b{font-weight:500;font-size:.95rem} .fl-quote__who span{font-family:var(--fl-font-mono);font-size:.66rem;letter-spacing:.15em; text-transform:uppercase;color:var(--fl-muted)} /* ---------- 15. PROCES ---------- */ .fl-steps{display:grid;gap:clamp(24px,3vw,36px); grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));counter-reset:s} .fl-step{padding-top:1.6em;border-top:1px solid var(--fl-line);position:relative} .fl-step::before{ counter-increment:s;content:"0" counter(s); position:absolute;top:-.72em;left:0;padding-right:.8em;background:var(--fl-bg); font-family:var(--fl-font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--fl-accent); } .fl-section--alt .fl-step::before{background:var(--fl-bg-2)} .fl-section--surface .fl-step::before{background:var(--fl-surface)} .fl-step h3{font-family:var(--fl-font-display);font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.15;margin-bottom:.5em} .fl-step p{color:var(--fl-muted);font-size:.93rem} /* ---------- 16. CTA ---------- */ .fl-cta{position:relative;overflow:hidden;text-align:center;background:var(--fl-bg-2); transition:background var(--fl-theme)} .fl-cta::before{ content:"";position:absolute;inset:0; background:radial-gradient(80% 120% at 50% 118%,var(--fl-accent-glow),transparent 65%); } .fl-cta__inner{position:relative;z-index:2} .fl-cta__actions{margin-top:clamp(26px,3.4vw,40px);display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .fl-marquee{overflow:hidden;border-block:1px solid var(--fl-line);padding-block:clamp(18px,2.4vw,30px); background:var(--fl-bg);--dur:38s;position:relative;transition:background var(--fl-theme)} .fl-marquee__track{display:flex;width:max-content;animation:fl-scroll var(--dur) linear infinite} .fl-marquee:hover .fl-marquee__track{animation-play-state:paused} @keyframes fl-scroll{to{transform:translateX(-50%)}} .fl-marquee span{ font-family:var(--fl-font-display);font-size:clamp(1.5rem,3.2vw,2.6rem); padding-inline:clamp(20px,3vw,44px);color:var(--fl-ink);white-space:nowrap; display:inline-flex;align-items:center;gap:clamp(20px,3vw,44px); } .fl-marquee span::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--fl-accent);flex:none} /* ---------- 17. FOOTER ---------- */ .fl-footer{background:var(--fl-bg-2);color:var(--fl-ink); border-top:1px solid var(--fl-line);padding-top:clamp(56px,7vw,96px); transition:background var(--fl-theme),color var(--fl-theme)} .fl-footer__grid{ display:grid;gap:clamp(34px,4vw,56px); grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); padding-bottom:clamp(44px,5vw,68px); } @media(min-width:1000px){.fl-footer__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr}} .fl-footer h4{ font-family:var(--fl-font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; color:var(--fl-faint);margin-bottom:1.4em;font-weight:400; } .fl-footer ul{display:grid;gap:.85em} .fl-footer li a{color:var(--fl-ink-2);font-size:.94rem;transition:color var(--fl-fast)} .fl-footer li a:hover{color:var(--fl-accent-2)} .fl-footer__bio{color:var(--fl-muted);font-size:.94rem;margin-top:1.3em;max-width:36ch} .fl-footer__social{display:flex;gap:10px;margin-top:1.6em} .fl-footer__social a{ width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--fl-line); border-radius:50%;color:var(--fl-ink-2);transition:all var(--fl-fast); } .fl-footer__social a:hover{border-color:var(--fl-accent);background:var(--fl-accent);color:var(--fl-accent-ink)} .fl-footer__social svg{width:16px;height:16px;fill:currentColor} .fl-footer__bar{ border-top:1px solid var(--fl-line);padding-block:clamp(20px,2.4vw,28px); display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center; } .fl-footer__bar p,.fl-footer__bar a{font-family:var(--fl-font-mono);font-size:.66rem; letter-spacing:.13em;text-transform:uppercase;color:var(--fl-faint)} .fl-footer__bar a:hover{color:var(--fl-accent-2)} /* ---------- 18. USKORO ---------- */ .fl-soon{text-align:center;padding-block:clamp(60px,8vw,110px)} .fl-soon__badge{ display:inline-flex;align-items:center;gap:.6em;padding:.5em 1.1em;border-radius:99px; border:1px solid var(--fl-accent);color:var(--fl-accent-2); font-family:var(--fl-font-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase; } .fl-soon__badge i{width:6px;height:6px;border-radius:50%;background:var(--fl-accent); animation:fl-blink 1.8s ease-in-out infinite} @keyframes fl-blink{0%,100%{opacity:1}50%{opacity:.2}} .fl-soon__title{margin-top:1em} .fl-soon__grid{margin-top:clamp(44px,5vw,72px);text-align:left} .fl-cat{ padding:clamp(22px,2.6vw,32px);border:1px solid var(--fl-line);border-radius:var(--fl-radius-lg); background:var(--fl-surface);transition:border-color var(--fl-fast),transform var(--fl-fast), background var(--fl-theme); } .fl-cat:hover{border-color:var(--fl-line-strong);transform:translateY(-3px)} .fl-cat__icon{width:38px;height:38px;color:var(--fl-accent);margin-bottom:1.1em} .fl-cat__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.2} .fl-cat h3{font-family:var(--fl-font-display);font-size:1.3rem;line-height:1.15;margin-bottom:.5em} .fl-cat p{color:var(--fl-muted);font-size:.9rem} /* ---------- 19. ZAGLAVLJE STRANICE ---------- */ .fl-phead{ background:var(--fl-bg);color:var(--fl-ink); padding-top:calc(clamp(66px,7vw,88px) + clamp(56px,8vw,110px)); padding-bottom:clamp(48px,6vw,84px); position:relative;overflow:hidden;transition:background var(--fl-theme); } .fl-phead::before{ content:"";position:absolute;inset:0;z-index:1; background:radial-gradient(70% 100% at 12% 0%,var(--fl-accent-glow),transparent 60%); } .fl-phead__inner{position:relative;z-index:2} .fl-crumbs{display:flex;flex-wrap:wrap;gap:.6em;align-items:center;margin-bottom:1.4em} .fl-crumbs a,.fl-crumbs span{font-family:var(--fl-font-mono);font-size:.66rem;letter-spacing:.15em; text-transform:uppercase;color:var(--fl-muted)} .fl-crumbs a:hover{color:var(--fl-accent-2)} .fl-crumbs i{color:var(--fl-faint);font-style:normal} /* ---------- 20. LIGHTBOX — uvijek taman ---------- */ .fl-lightbox{ position:fixed;inset:0;z-index:2000;background:rgba(6,6,7,.96);color:#F4F1EC; -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); display:grid;place-items:center;padding:clamp(16px,4vw,56px); opacity:0;visibility:hidden;transition:opacity .35s var(--fl-ease),visibility .35s; } .fl-lightbox.is-open{opacity:1;visibility:visible} .fl-lightbox img,.fl-lightbox iframe{max-width:100%;max-height:82vh;border-radius:var(--fl-radius)} .fl-lightbox iframe{width:min(1200px,92vw);aspect-ratio:16/9;height:auto;border:0} .fl-lightbox__close,.fl-lightbox__nav{ position:absolute;width:48px;height:48px;display:grid;place-items:center; background:rgba(255,255,255,.06);border:1px solid rgba(244,241,236,.2);border-radius:50%; color:#F4F1EC;cursor:pointer;transition:all var(--fl-fast); } .fl-lightbox__close:hover,.fl-lightbox__nav:hover{background:#E4633A;border-color:#E4633A;color:#0A0A0B} .fl-lightbox__close{top:clamp(16px,3vw,32px);right:clamp(16px,3vw,32px)} .fl-lightbox__nav--prev{left:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)} .fl-lightbox__nav--next{right:clamp(10px,2vw,28px);top:50%;transform:translateY(-50%)} .fl-lightbox__cap{position:absolute;bottom:clamp(16px,3vw,30px);left:0;right:0;text-align:center; color:rgba(244,241,236,.7)} /* ---------- 21. MAPA ---------- */ .fl-map{border:1px solid var(--fl-line);border-radius:var(--fl-radius-lg);overflow:hidden} .fl-map iframe{width:100%;border:0;display:block;filter:var(--fl-map-filter)} /* ---------- 22. RAZVIJANJE ---------- */ .fl-rise{opacity:0;transform:translateY(26px); transition:opacity .85s var(--fl-ease),transform .85s var(--fl-ease)} .fl-rise.is-in{opacity:1;transform:none} .fl-develop .fl-frame__media img,.fl-develop img{ filter:grayscale(1) brightness(.35) contrast(1.4); transition:filter 1.5s var(--fl-ease),transform 1.5s var(--fl-ease); } .fl-develop.is-in .fl-frame__media img,.fl-develop.is-in img{filter:grayscale(.35) brightness(1) contrast(1.02)} [data-delay="1"]{transition-delay:.09s} [data-delay="2"]{transition-delay:.18s} [data-delay="3"]{transition-delay:.27s} [data-delay="4"]{transition-delay:.36s} [data-delay="5"]{transition-delay:.45s} @media (prefers-reduced-motion:reduce){ .fl-rise,.fl-develop img{opacity:1!important;transform:none!important;filter:none!important;transition:none!important} .fl-marquee__track,.fl-hero__media img,.fl-hero__media video{animation:none!important} .fl-theme-toggle svg{transition:none!important} } /* ---------- 23. WORDPRESS / WOOCOMMERCE ---------- */ .screen-reader-text{ border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;overflow:hidden; position:absolute!important;width:1px;word-wrap:normal!important; } .fl-skip{position:absolute;left:-9999px;z-index:10000;padding:1em 1.4em;background:var(--fl-accent);color:var(--fl-accent-ink)} .fl-skip:focus{left:12px;top:12px} .alignwide{width:min(1280px,100%)} .alignfull{width:100vw;margin-left:calc(50% - 50vw)} .wp-caption-text,.wp-element-caption{font-family:var(--fl-font-mono);font-size:.68rem; letter-spacing:.12em;color:var(--fl-muted);margin-top:.8em;text-transform:uppercase} .fl-entry h2,.fl-entry h3,.fl-entry h4{font-family:var(--fl-font-display);line-height:1.15; letter-spacing:-.02em;margin:1.8em 0 .6em} .fl-entry h2{font-size:clamp(1.6rem,3vw,2.2rem)} .fl-entry h3{font-size:clamp(1.3rem,2.2vw,1.65rem)} .fl-entry p{margin-bottom:1.15em;color:var(--fl-ink-2)} .fl-entry a:not(.fl-btn){color:var(--fl-accent-2);text-decoration:underline;text-underline-offset:3px} .fl-entry ul:not(.fl-choice):not(.fl-filters){list-style:disc;padding-left:1.3em;margin-bottom:1.2em;color:var(--fl-ink-2)} .fl-entry ol{list-style:decimal;padding-left:1.3em;margin-bottom:1.2em;color:var(--fl-ink-2)} .fl-entry li{margin-bottom:.5em} .fl-entry blockquote{border-left:2px solid var(--fl-accent);padding-left:1.4em;margin:1.8em 0; font-family:var(--fl-font-display);font-style:italic;font-size:1.2rem;color:var(--fl-ink)} .fl-entry img{border-radius:var(--fl-radius);margin-block:1.6em} .fl-pagination{display:flex;gap:8px;justify-content:center;margin-top:clamp(44px,5vw,72px);flex-wrap:wrap} .fl-pagination .page-numbers{ min-width:42px;height:42px;display:grid;place-items:center;padding-inline:12px; border:1px solid var(--fl-line);border-radius:var(--fl-radius); font-family:var(--fl-font-mono);font-size:.72rem;color:var(--fl-muted);transition:all var(--fl-fast); } .fl-pagination .page-numbers:hover{color:var(--fl-ink);border-color:var(--fl-line-strong)} .fl-pagination .page-numbers.current{background:var(--fl-ink);color:var(--fl-bg);border-color:var(--fl-ink)} .elementor-widget-fl-hero,.elementor-widget-fl-marquee{width:100%} .woocommerce-page .fl-main{padding-top:calc(clamp(66px,7vw,88px) + 40px)} .woocommerce ul.products li.product a img{border-radius:var(--fl-radius);background:var(--fl-surface)} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-family:var(--fl-font-display)!important;font-size:1.15rem!important;color:var(--fl-ink);padding-top:.8em!important} .woocommerce ul.products li.product .price{color:var(--fl-accent-2)!important; font-family:var(--fl-font-mono);font-size:.85rem!important} .woocommerce span.onsale{background:var(--fl-accent);color:var(--fl-accent-ink); font-family:var(--fl-font-mono);font-size:.66rem;letter-spacing:.12em} .woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{ background:var(--fl-accent);color:var(--fl-accent-ink);border-radius:var(--fl-radius); font-family:var(--fl-font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:1em 1.6em} .woocommerce #respond input#submit:hover,.woocommerce a.button:hover, .woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--fl-ink);color:var(--fl-bg)} .woocommerce div.product .product_title{font-family:var(--fl-font-display);color:var(--fl-ink)} .woocommerce div.product p.price{color:var(--fl-accent-2)} .admin-bar .fl-header{top:32px} @media screen and (max-width:782px){.admin-bar .fl-header{top:46px}} /* ---------- 24. UTILITY ---------- */ .fl-mt-s{margin-top:clamp(14px,1.6vw,20px)} .fl-mt-m{margin-top:clamp(22px,2.8vw,36px)} .fl-mt-l{margin-top:clamp(34px,4.4vw,60px)} .fl-center{text-align:center} .fl-muted{color:var(--fl-muted)} .fl-hidden{display:none!important} .fl-actions{display:flex;flex-wrap:wrap;gap:12px} .fl-ar-16-9{aspect-ratio:16/9} .fl-ar-4-5{aspect-ratio:4/5} .fl-ar-1-1{aspect-ratio:1/1} .fl-cover{width:100%;height:100%;object-fit:cover}