/* ========================================================================= Adutrade Kft. – egyedi stílusok A layout és a színek a Tailwind osztályokból jönnek (lásd a HTML -et). Ide csak az kerül, amit osztállyal nem, vagy csak csúnyán lehetne megoldani. ========================================================================= */ html { scroll-behavior: smooth; scroll-padding-top: 6rem; /* hogy a fix fejléc ne takarja a célszekciót */ } ::selection { background-color: #61b239; color: #fff; } /* Egységes, jól látható fókuszgyűrű billentyűzetes navigációhoz */ :focus-visible { outline: 2px solid #4b9029; outline-offset: 3px; border-radius: 4px; } /* ------------------------------------------------------------------------- Görgetésre megjelenő elemek A js/main.js állítja be a data-reveal="in" értéket, amikor az elem képbe ér. Attribútummal oldjuk meg, hogy ne kelljen segédosztályokat szórni a markupba. ------------------------------------------------------------------------- */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--reveal-delay, 0ms); } [data-reveal="in"] { opacity: 1; transform: none; } /* Aki kéri, annak nincs mozgás */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } [data-reveal] { opacity: 1; transform: none; transition: none; } }