/* ============================================================ GLOBAL RK — zdieľaná vrstva interakcií Výraznejšia, ale rýchla spätná väzba. Iba transform/opacity (bez janku). Všetko sa vypína pri prefers-reduced-motion. ============================================================ */ :root{ --grk-spring: cubic-bezier(.34,1.56,.64,1); /* pruží — pre "pop" efekty */ --grk-out: cubic-bezier(.16,1,.3,1); /* dosadnutie — pre pohyb */ --grk-fast: 140ms; --grk-base: 220ms; } /* ---------- 1. NÁBEH STRÁNKY ---------- Nástroje sú samostatné HTML súbory — bez tohto by prepnutie medzi nimi blikalo. Takto pôsobia ako jedna aplikácia. POZOR: tu NESMIE byť `transform`. Akýkoľvek transform na z neho spraví containing block pre position:fixed — pripnuté pätky („Pokračovať“, spodné lišty) potom odletia na koniec dokumentu namiesto spodku obrazovky. Preto len opacity. */ @keyframes grkStranka{ from{opacity:0} to{opacity:1} } body{ animation:grkStranka 240ms ease both } /* ---------- 2. STLAČENIE ---------- Výrazná, okamžitá odozva na dotyk aj klik. */ .btn, .chip, .tool, .velka, .mala, .tile, .fcard, .cin, .wiz-volba, .wiz-firma, .iconbtn, .askbtn, .btn-inst, .cg-all, .seg button, .topacts button, .step2 button, .spust, .zrus, .flip, .toast-act, .pitem{ transition: transform var(--grk-fast) var(--grk-spring), box-shadow var(--grk-base) var(--grk-out), background-color var(--grk-fast) ease, border-color var(--grk-fast) ease !important; } .btn:active, .chip:active, .iconbtn:active, .askbtn:active, .btn-inst:active, .cg-all:active, .seg button:active, .topacts button:active, .step2 button:active, .toast-act:active, .pitem:active{ transform: scale(.955) !important; } .tool:active, .velka:active, .tile:active, .fcard:active, .cin:active, .wiz-volba:active, .wiz-firma:active{ transform: scale(.985) !important; } /* ---------- 3. HOVER — výraznejšie nadvihnutie ---------- */ @media (hover:hover){ .tool:hover{ transform: translateY(-6px) scale(1.015) !important; } .fcard:hover, .tile:hover{ transform: translateY(-4px) scale(1.01) !important; } .velka:hover{ transform: translateY(-3px) !important; } .cin:hover, .wiz-volba:hover, .wiz-firma:hover{ transform: translateX(3px) !important; } .btn:hover:not(:active){ transform: translateY(-2px) !important; } .iconbtn:hover:not(:active){ transform: scale(1.12) !important; } } /* ---------- 4. VÝBER / ZMENA STAVU ---------- Keď sa niečo označí, nech to je vidieť. POZOR: nesmie sa viazať priamo na triedu `.on` — appky prekresľujú zoznamy cez innerHTML, takže by pri každom vykreslení poskočili aj položky, ktoré boli označené už predtým. Pop preto beží len na triedu `.grk-vybrane`, ktorú pridáva JS pri skutočnom kliknutí. */ @keyframes grkPop{ 0%{transform:scale(1)} 42%{transform:scale(1.07)} 100%{transform:scale(1)} } .grk-vybrane{ animation: grkPop 340ms var(--grk-spring) } /* ---------- 5. ÚSPECH ---------- */ @keyframes grkUspech{ 0%{ box-shadow:0 0 0 0 rgba(22,193,114,.55) } 100%{ box-shadow:0 0 0 16px rgba(22,193,114,0) } } .grk-uspech{ animation: grkUspech 620ms var(--grk-out) } /* ---------- 6. CHYBA / UPOZORNENIE ---------- Krátke zatrasenie — jasné, že niečo nesedí. */ @keyframes grkTras{ 0%,100%{transform:translateX(0)} 18%{transform:translateX(-7px)} 38%{transform:translateX(6px)} 58%{transform:translateX(-4px)} 78%{transform:translateX(2px)} } .grk-tras{ animation: grkTras 420ms ease } /* ---------- 7. TOAST — výraznejší nábeh ---------- */ .toast{ animation: grkToast 380ms var(--grk-spring) !important } @keyframes grkToast{ from{ opacity:0; transform:translate(-50%,26px) scale(.9) } to { opacity:1; transform:translate(-50%,0) scale(1) } } /* ---------- 8. NÁBEH OBSAHU (stagger) ---------- */ @keyframes grkVstup{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} } .grk-stagger > *{ animation: grkVstup 380ms var(--grk-out) both } .grk-stagger > *:nth-child(1){animation-delay:0ms} .grk-stagger > *:nth-child(2){animation-delay:55ms} .grk-stagger > *:nth-child(3){animation-delay:110ms} .grk-stagger > *:nth-child(4){animation-delay:165ms} .grk-stagger > *:nth-child(5){animation-delay:220ms} .grk-stagger > *:nth-child(6){animation-delay:265ms} .grk-stagger > *:nth-child(n+7){animation-delay:300ms} /* ---------- 9. PRACUJEM (dlhé operácie) ---------- */ .grk-pracujem{ position:relative; pointer-events:none; opacity:.65 } .grk-pracujem::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; border-radius:3px; background:linear-gradient(90deg,transparent,var(--brand,#CF202A),transparent); animation: grkPruh 1.05s linear infinite; } @keyframes grkPruh{ from{transform:translateX(-100%)} to{transform:translateX(100%)} } /* ---------- 10. PRÍSTUPNOSŤ ---------- */ a, button, [role="button"], label.cin, label.wiz-volba{ cursor:pointer } button:disabled, .btn:disabled{ cursor:not-allowed } @media (prefers-reduced-motion: reduce){ body{ animation:none } *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } /* pohyb sa ruší, ale spätná väzba musí ostať viditeľná */ .btn:active, .chip:active, .tool:active, .iconbtn:active{ transform:none !important; filter:brightness(.93) } .grk-vybrane{ animation:none } body{ animation:none } }