/** * ADSY Motion — style frontowe. * * WSZYSTKIE stany początkowe są zagnieżdżone pod .adsy-js. * Ta klasa trafia na inline'owym skryptem w . * Bez JS strona wygląda normalnie zamiast zostać z opacity:0. */ :root { --adsy-accent: #ff6b3d; --adsy-dur: 800ms; --adsy-ease: cubic-bezier(.05, .2, .1, 1); --adsy-ease-out: cubic-bezier(.24, 1, .3, 1); --adsy-delay: 0ms; } /* ================================================================= up — fade + przesunięcie ================================================================= */ .adsy-js [data-adsy~="up"] { opacity: 0; transform: translateY(34px); transition: opacity var(--adsy-dur) var(--adsy-ease) var(--adsy-delay), transform var(--adsy-dur) var(--adsy-ease) var(--adsy-delay); will-change: opacity, transform; } .adsy-js [data-adsy~="up"].is-in { opacity: 1; transform: none; will-change: auto; } /* ================================================================= split — nagłówek słowo po słowie ================================================================= */ .adsy-w { display: inline-block; overflow: hidden; vertical-align: top; /* kompensacja, żeby overflow nie ucinał "y", "g", "j" */ padding-bottom: .14em; margin-bottom: -.14em; } .adsy-w--overflow { overflow: visible; } .adsy-wi { display: inline-block; transform: translateY(105%); transition: transform calc(var(--adsy-dur) + 100ms) var(--adsy-ease-out); will-change: transform; } .adsy-js [data-adsy~="split"].is-in .adsy-wi { transform: translateY(0); will-change: auto; } /* * FOUC split: dopóki runtime nie pociął nagłówka na słowa, widać pełny tekst, * który zaraz znika i wjeżdża od nowa. Ukrywamy nagłówek split do momentu, * gdy runtime doda klasę adsy-split-ready NA TYM elemencie (robi to zaraz * po podziale na słowa). Wiązanie z konkretnym elementem, nie globalnym * adsy-ready, chroni przed miganiem, gdy elementów split jest kilka. */ .adsy-js [data-adsy~="split"]:not(.adsy-split-ready) { visibility: hidden; } .adsy-js [data-adsy~="split"].adsy-split-ready { visibility: visible; } /* bezpiecznik: gdyby JS w ogóle nie wystartował, nie zostawiaj pustki */ html:not(.adsy-js) [data-adsy~="split"] { visibility: visible; } /* ================================================================= mask — odsłanianie clip-pathem ================================================================= */ .adsy-js [data-adsy~="mask"] { transition: clip-path calc(var(--adsy-dur) + 300ms) var(--adsy-ease-out) var(--adsy-delay); will-change: clip-path; /* figure/obrazek Kadence może nie mieć wymiarów przed załadowaniem obrazu, a wtedy circle(%) liczy się względem zerowego pudełka — wymuszamy blok */ display: block; } .adsy-js figure[data-adsy~="mask"] { margin: 0; } .adsy-js [data-adsy~="mask"] > img { display: block; width: 100%; } .adsy-js [data-adsy~="mask"][data-adsy-dir="left"] { clip-path: inset(0 100% 0 0); } .adsy-js [data-adsy~="mask"][data-adsy-dir="right"] { clip-path: inset(0 0 0 100%); } .adsy-js [data-adsy~="mask"][data-adsy-dir="up"] { clip-path: inset(100% 0 0 0); } .adsy-js [data-adsy~="mask"][data-adsy-dir="circle"] { clip-path: circle(0% at 50% 60%); transition-duration: calc(var(--adsy-dur) + 500ms); } .adsy-js [data-adsy~="mask"].is-in { clip-path: inset(0 0 0 0); will-change: auto; } .adsy-js [data-adsy~="mask"][data-adsy-dir="circle"].is-in { clip-path: circle(75% at 50% 60%); } /* ================================================================= parallax — transform ustawiany z JS ================================================================= */ .adsy-js [data-adsy~="parallax"] { will-change: transform; } /* wrapper tworzony w JS, gdy parallax dzieli element z maską */ .adsy-parallax-inner { will-change: transform; } /* ================================================================= list — lista z rysowanym checkiem ================================================================= */ .adsy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .adsy-list li { display: flex; align-items: flex-start; gap: 14px; } .adsy-list li::before { content: ''; flex: none; width: 24px; height: 24px; margin-top: .2em; border-radius: 50%; background: var(--adsy-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M7.5 13.5l3.6 3.6 7.4-7.6' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; } .adsy-js [data-adsy~="list"] li { opacity: 0; transform: translateX(-14px); transition: opacity var(--adsy-dur) var(--adsy-ease), transform var(--adsy-dur) var(--adsy-ease); } .adsy-js [data-adsy~="list"].is-in li { opacity: 1; transform: none; } .adsy-js [data-adsy~="list"].is-in li:nth-child(2) { transition-delay: .09s; } .adsy-js [data-adsy~="list"].is-in li:nth-child(3) { transition-delay: .18s; } .adsy-js [data-adsy~="list"].is-in li:nth-child(4) { transition-delay: .27s; } .adsy-js [data-adsy~="list"].is-in li:nth-child(5) { transition-delay: .36s; } .adsy-js [data-adsy~="list"].is-in li:nth-child(6) { transition-delay: .45s; } .adsy-js [data-adsy~="list"].is-in li:nth-child(n+7) { transition-delay: .54s; } /* ================================================================= scribble — odręczne podkreślenie, SVG dorysowywany w runtime ================================================================= */ .adsy-scribble { position: relative; display: inline-block; padding: 0 .06em; } .adsy-scribble > svg { position: absolute; left: -4%; bottom: -.22em; width: 108%; height: .42em; overflow: visible; pointer-events: none; } .adsy-scribble > svg path { fill: none; stroke: var(--adsy-accent); stroke-width: 7; stroke-linecap: round; } .adsy-js .adsy-scribble > svg path { stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.1s var(--adsy-ease-out) .35s; } .adsy-js .adsy-scribble.is-in > svg path { stroke-dashoffset: 0; } /* ================================================================= underline — efekt na linku, bez JS ================================================================= */ .adsy-underline { position: relative; display: inline-block; text-decoration: none; padding-bottom: 2px; } .adsy-underline::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .45s var(--adsy-ease-out); } .adsy-underline:hover::after, .adsy-underline:focus-visible::after { transform: scaleX(1); transform-origin: left center; } /* ================================================================= prefers-reduced-motion ================================================================= */ @media (prefers-reduced-motion: reduce) { .adsy-js [data-adsy], .adsy-js .adsy-wi, .adsy-js [data-adsy~="list"] li, .adsy-js .adsy-scribble > svg path, .adsy-underline::after { transition-duration: .01ms !important; transition-delay: 0ms !important; } .adsy-js [data-adsy~="up"], .adsy-js [data-adsy~="list"] li { opacity: 1 !important; transform: none !important; } .adsy-js .adsy-wi { transform: none !important; } .adsy-js [data-adsy~="mask"] { clip-path: none !important; } .adsy-js [data-adsy~="parallax"] { transform: none !important; } .adsy-js .adsy-scribble > svg path { stroke-dashoffset: 0 !important; } /* przy ograniczonym ruchu nagłówek split ma być widoczny od razu, niezależnie od tego, czy runtime zdążył go pociąć */ .adsy-js [data-adsy~="split"] { visibility: visible !important; } }