/* ============================================================ SIGNAL MOTION INTEGRATION R01 Ugradnja dva poteza odobrena u R404_UI_MOTION_DONOR_AUDIT_R01: 01 · SIGNAL IVICA — zlatni luk putuje po ivici ka pokazivacu 02 · ZIVI DOKAZ — kartica na hover otkriva dublji deo klijentovog sajta Nula zavisnosti: bez GSAP, bez Lenis, bez WebGL, bez React. Nijedan token se ne izmislja — sve dolazi iz :root u site.05029394d9.css. Ovaj fajl se ucitava POSLE site.css, pa moze da nadjaca zatecena pravila bez ijedne izmene u odobrenom paketu. ============================================================ */ /* ============================================================ 01 · SIGNAL IVICA Isti motiv kao signal.js — svetlo koje PUTUJE ka cilju — samo pokrenuto paznjom umesto skrolom. Prsten je conic-gradient maskiran preko `mask-composite`; ugao i centar dolaze iz tri custom propa koje pise signal-motion-r01.js. Nula layouta, nula paint-a sadrzaja: menja se samo opacity dekorativnog pseudo-elementa koji je van DOM redosleda. ============================================================ */ .sig-edge { position: relative; } .sig-edge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; background: conic-gradient(from calc(var(--ang, 0deg) - 55deg) at var(--mx, 50%) var(--my, 50%), transparent 0deg, var(--gold-deep) 18deg, var(--gold) 44deg, var(--gold-hi) 62deg, var(--gold) 80deg, var(--gold-deep) 106deg, transparent 146deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: drop-shadow(0 0 7px rgba(233, 184, 80, 0.5)); opacity: 0; transition: opacity 340ms var(--ease-out); pointer-events: none; z-index: 6; } /* Halo ispod prstena — samo „toplina" ka pokazivacu, jedva vidljiv. Bez njega prsten deluje kao nalepljena linija, a ne kao svetlo. */ .sig-edge::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; background: radial-gradient(240px 240px at var(--mx, 50%) var(--my, 50%), rgba(233, 184, 80, 0.10), transparent 62%); opacity: 0; transition: opacity 340ms var(--ease-out); pointer-events: none; z-index: 5; } @media (hover: hover) and (pointer: fine) { .sig-edge:hover::after, .sig-edge:hover::before { opacity: 1; } } /* Tastatura dobija isti znak, samo staticno: svetlo dolazi odozgo, ne prati pokazivac kog nema. */ .sig-edge:focus-within::after { opacity: 1; --mx: 50%; --my: 0%; } /* Zatecen hover na karticama je gold border PO CELOM OBODU. Uz prsten to je dva puta isto svetlo, i luk prestaje da se cita kao putanja. Obod se stisava na nagovestaj; znacenje nosi prsten. Vazi samo tamo gde prsten stvarno postoji (v. reduced-motion nize). NAPOMENA: `/izrada-sajtova/` je namerno IZVAN ove runde. Tamo je prsten izmeren kao nevidljiv — plocice `.fsw-shot` su svetli snimci bez sopstvenog okvira koji bi luk pratio, a `overflow:hidden` sece halo. Uz stisan obod hover bi ispao SLABIJI nego danas, pa je ta strana vracena na zateceno. */ @media (hover: hover) and (pointer: fine) { .work-card.sig-edge:hover { border-color: rgba(233, 184, 80, 0.16); } } /* ------------------------------------------------------------ Signal (canvas) na split hero-u studija slucaja. `.shero-in` vec ima `z-index: 2`, a `.sig-canvas` ima 5 — bez ove linije bi platno crtalo PREKO naslova. Sadrzaj ide iznad platna, platno ostaje iznad scrim-a. Isti odnos kao `.sig-host > .wrap`. ------------------------------------------------------------ */ .shero.sig-host > .shero-in { z-index: var(--z-content); } /* ============================================================ 02 · ZIVI DOKAZ (samo /radovi/, samo mreza „Rade na svom domenu") Kartica danas pokazuje isecak vrha klijentovog sajta. Na hover se snimak spusta kroz STVARNU stranu. To je jedini potez iz audita koji nosi argument, ne ukras: direktno podupire naslov iznad mreze. Kapija je `min-width: 1024px` — ISTA granica na kojoj pusta visoki snimak. Bez toga bi na uzem ekranu efekat postojao, a slika koju pomera ne bi. ============================================================ */ /* Traka „ima jos" — bez nje je hover iznenadjenje, a ne poziv. Podrazumevano ne postoji; pali se tek kad se pali i efekat. */ .b4-cue { display: none; } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { /* Visoki snimak ide u punoj visini; ram ga sece na 16/10 kao i danas. */ .work-shot.b4-proof img { height: auto; object-fit: fill; transform: translate3d(0, 0, 0); transition: transform 2600ms var(--ease-out); will-change: transform; } /* Nadjacava zateceno `.work-card:hover .work-shot img { scale(1.02) }` — na ovim karticama snimak ne zumira, nego putuje. */ .work-card:hover .work-shot.b4-proof img, .work-card:focus-within .work-shot.b4-proof img { transform: translate3d(0, calc(-100% + var(--b4-frame, 375px)), 0); } .b4-cue { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-family: var(--font-m); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-hi); background: linear-gradient(to top, rgba(5, 5, 5, 0.92), rgba(5, 5, 5, 0)); opacity: 0.85; transition: opacity 300ms var(--ease-out); pointer-events: none; } /* Crta koja se puni tacno onoliko dugo koliko traje putovanje — posetilac vidi koliko je jos ostalo. */ .b4-cue i { display: block; height: 1px; flex: 1; background: var(--gold-deep); transform-origin: left; transform: scaleX(0); transition: transform 2600ms var(--ease-out); } .work-card:hover .b4-cue i, .work-card:focus-within .b4-cue i { transform: scaleX(1); } } /* ============================================================ BEZ POKRETA — nista se ne gubi, i nista se ne pretvara u ukras. Prsten se ne pali (JS se ni ne vezuje), snimak stoji na vrhu — tacno danasnje ponasanje — a zateceni gold obod se VRACA, da hover ne bi bio slabiji nego pre ove runde. ============================================================ */ @media (prefers-reduced-motion: reduce) { .sig-edge::after, .sig-edge::before { opacity: 0 !important; transition: none; } .work-shot.b4-proof img { transition: none !important; transform: none !important; } .b4-cue { display: none !important; } @media (hover: hover) and (pointer: fine) { .work-card.sig-edge:hover { border-color: rgba(233, 184, 80, 0.42); } } }