/* GSA interaktsioonikiht — kursor, aktiivsed pinnad, kerimisprogress. ARHITEKTUURIREEGEL: leht hüdreerub Frameri Reactiga, mis omab kogu DOM-i #main sees ja võib igal ajal uuesti renderdada. Seetõttu: - EI lisata Frameri sõlmedele klasse (re-render pühib need ära) - stiil seotakse OLEMASOLEVATE atribuutidega (data-border, data-highlight) - kasutame CSS-omadusi, mida Framer ei puutu: `translate`, `rotate`, `scale`, `:before` (Frameri äärejoon on `:after` — sinna EI TOHI puutuda) - ülekatted elavad all, väljaspool #main puud Kogu kiht on `:root[data-gsa-fx]` taga — JS lisab selle kohe. Ilma JS-ita ei muutu midagi. */ :root { --gsa-y: 255, 222, 89; /* brändikollane */ --gsa-ease: cubic-bezier(.22, .68, .24, 1); } /* ============ 1. Aktiivsed pinnad ============ Valgus järgib kursorit kasti sees. --mx/--my seab JS delegeeritud pointermove'iga. Kasutame `:before`, sest `:after` on Frameri äärejoone oma. */ :root[data-gsa-fx] [data-gsa-card]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--gsa-y), .15), rgba(var(--gsa-y), 0) 60%); opacity: 0; transition: opacity .4s ease; } :root[data-gsa-fx] [data-gsa-card]:hover::before { opacity: 1; } /* Kaart tõuseb. `translate` on eraldi omadus — ei võitle Frameri `transform`-iga. */ :root[data-gsa-fx] [data-gsa-card] { transition: translate .45s var(--gsa-ease), box-shadow .45s var(--gsa-ease), --border-color .35s ease; } :root[data-gsa-fx] [data-gsa-card]:hover { translate: 0 -4px; box-shadow: 0 24px 55px -28px rgba(0, 0, 0, .85); /* Frameri äärevärv on inline-muutuja — !important võidab ja on re-renderi-kindel */ --border-color: rgba(var(--gsa-y), .5) !important; } /* NB: siin oli varem `[data-gsa-card].hover::before { opacity: 0 }`, mõeldud kollaste nuppude jaoks. Framer lisab hõljutamisel KÕIGILE kaartidele klassi `hover` — seega summutas see reegel kuma just siis, kui seda oli vaja, ja kaart ei "aktiveerunud" nähtavalt. Kaardid ei ole nupud (min 200x120), nii et summutust ei ole vaja. Kontrollitud: klassid sisaldasid `hover`, ::before opacity oli 0 samal ajal kui :hover kehtis. */ /* ============ 2. Nupud tõmbuvad kursori poole ============ `translate` omadust JS seab; siin ainult pehmendus. */ :root[data-gsa-fx] [data-highlight="true"] { transition: translate .35s var(--gsa-ease), filter .3s ease; } :root[data-gsa-fx] [data-highlight="true"]:hover { filter: brightness(1.07); } /* magnetkütke ajal peab liikumine olema kiire, muidu jääb kursorist maha */ :root[data-gsa-fx] [data-highlight="true"][data-gsa-magnet] { transition: translate .12s linear, filter .3s ease; } /* ============ 3. Kursor ============ */ #gsa-glow, #gsa-ring { position: fixed; top: 0; left: 0; pointer-events: none; opacity: 0; will-change: transform; } #gsa-glow { width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; z-index: 2147483000; background: radial-gradient(circle closest-side, rgba(var(--gsa-y), .12), rgba(var(--gsa-y), .045) 45%, transparent 70%); mix-blend-mode: screen; transition: opacity .5s ease; } #gsa-ring { width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 1px solid rgba(var(--gsa-y), .55); border-radius: 50%; z-index: 2147483001; transition: width .22s var(--gsa-ease), height .22s var(--gsa-ease), margin .22s var(--gsa-ease), opacity .3s ease, background-color .22s ease, border-color .22s ease; } #gsa-glow[data-on], #gsa-ring[data-on] { opacity: 1; } /* interaktiivse elemendi kohal suureneb */ #gsa-ring[data-over="link"] { width: 46px; height: 46px; margin: -23px 0 0 -23px; background: rgba(var(--gsa-y), .1); border-color: rgba(var(--gsa-y), .8); } /* video kohal muutub esitusmärgiks */ #gsa-ring[data-over="video"] { width: 58px; height: 58px; margin: -29px 0 0 -29px; background: rgba(var(--gsa-y), .16); border-color: rgb(var(--gsa-y)); } /* ============ 4. Kerimisprogress ============ */ #gsa-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, rgba(var(--gsa-y), .5), rgb(var(--gsa-y))); box-shadow: 0 0 16px rgba(var(--gsa-y), .5); z-index: 2147483002; pointer-events: none; transform-origin: left center; } /* ============ 5. Sujuv ankrukerimine ============ */ :root[data-gsa-fx] { scroll-behavior: smooth; } /* ============ Ligipääsetavus ============ Vähendatud liikumise korral EI lülita kõike välja — Framer ise ignoreerib seda seadet. Ära jäävad ainult need efektid, mis päriselt liigutavad suuri pindu. */ /* Vähendatud liikumise korral jäävad OSUTIPÕHISED efektid alles (rõngas, kaardivalgus, nõrgem magnet) — need tekivad ainult kasutaja enda hiireliigutusest. Ära jäävad suur liikuv kuma, kaardi tõus ja sujuv kerimine. */ :root[data-gsa-reduced]:not([data-gsa-force]) { scroll-behavior: auto; } :root[data-gsa-reduced]:not([data-gsa-force]) [data-gsa-card]:hover { translate: none; } :root[data-gsa-reduced]:not([data-gsa-force]) #gsa-glow { display: none; } /* ============ 6. Instagrami embed'i asendus ============ Frameri "Code" komponent süstib Instagrami embed-skeleti HTML-ina, aga