/* ═══════════════════════════════════════════════════════════════ editz.pl — warstwa dodatkowa akcenty marki (#FE7700) · animacje · przełącznik języka Wczytywana PO stylach w , więc nadpisuje to, co trzeba. ═══════════════════════════════════════════════════════════════ */ :root{ --orange:#FE7700; --orange-lt:#FF9433; --orange-dk:#D96200; --orange-05:rgba(254,119,0,.05); --orange-10:rgba(254,119,0,.10); --orange-18:rgba(254,119,0,.18); --orange-35:rgba(254,119,0,.35); --brand-green:#013932; /* zieleń z logo */ --ease-out:cubic-bezier(.16,.84,.3,1); --ease-soft:cubic-bezier(.22,.61,.36,1); } /* ── zaznaczenie tekstu i focus w kolorze marki ─────────────── */ ::selection{background:var(--orange-35);color:var(--deep)} ::-moz-selection{background:var(--orange-35);color:var(--deep)} :focus-visible{outline:2px solid var(--orange)!important;outline-offset:3px} /* pasek przewijania z pomarańczowym akcentem */ html{scrollbar-color:var(--forest) transparent} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--forest) 0%,var(--forest) 62%,var(--orange) 100%); } ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,var(--deep) 0%,var(--orange-dk) 100%); } /* ═══ 1 · PASEK POSTĘPU PRZEWIJANIA ═══════════════════════════ */ .scrollbar-top{ position:fixed;top:0;left:0;height:2.5px;width:100%;z-index:200; transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,var(--forest) 0%,var(--moss) 45%,var(--orange) 100%); box-shadow:0 0 12px var(--orange-35); pointer-events:none;will-change:transform; } /* ═══ 2 · RUCHOME TŁO NA KAŻDEJ PODSTRONIE ════════════════════ Gradient przesuwa się razem z przewijaniem — tak jak na stronie głównej, ale globalnie. Siedzi pod treścią (z-index:-1). */ html{background:var(--white)} body{background:transparent!important} .flowbg{ position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(38% 46% at calc(var(--fl,0) * 118% - 9%) 26%, rgba(47,214,178,.20), transparent 66%), radial-gradient(30% 38% at calc(106% - var(--fl,0) * 104%) 68%, var(--orange-18), transparent 68%), radial-gradient(34% 40% at calc(var(--fl,0) * 92% + 4%) 88%, rgba(19,66,54,.11), transparent 70%), radial-gradient(28% 32% at calc(96% - var(--fl,0) * 70%) 8%, rgba(166,243,224,.22), transparent 72%); transition:background .1s linear; } /* sekcje kremowe stają się lekko przezroczyste, żeby tło było widać */ .sec-cream{background:rgba(240,242,241,.80)} .sec-white{background:rgba(255,255,255,.60)} .foot{background:rgba(240,242,241,.86)} /* do istniejącego gradientu sekcji dokładamy pomarańczową plamę */ .sec-flow::before{ background: radial-gradient(40% 52% at calc(var(--flow,0) * 128% - 14%) 42%, rgba(47,214,178,.22), transparent 68%), radial-gradient(30% 40% at calc(118% - var(--flow,0) * 116%) 74%, var(--orange-18), transparent 66%), radial-gradient(34% 44% at calc(var(--flow,0) * 112% - 6%) 78%, rgba(19,66,54,.12), transparent 70%), radial-gradient(30% 38% at calc(112% - var(--flow,0) * 108%) 14%, rgba(166,243,224,.20), transparent 72%); } /* ═══ 3 · LOGO GRAFICZNE ══════════════════════════════════════ */ /* Znak graficzny + dopisek „STRONY WWW" w jednej linii, bez kreski. Wyrównanie w pionie do linii bazowej logotypu. */ .logo{gap:.62rem;align-items:center} .logo-div{display:none!important} .logo-tag{ font-size:.56rem;font-weight:500;letter-spacing:.19em; color:#A6ADA9;text-transform:uppercase; line-height:1;white-space:nowrap; padding-top:.16em; transition:color .3s ease; } .logo:hover .logo-tag{color:var(--orange)} @media(max-width:400px){.logo-tag{display:none}} .logo-img{ height:30px;width:auto;display:block;flex:none; transition:transform .4s var(--ease-out),filter .4s ease; } .logo:hover .logo-img{transform:scale(1.05) rotate(-1.2deg);filter:drop-shadow(0 5px 14px var(--orange-35))} .foot .logo-img{height:27px} @media(max-width:560px){.logo-img{height:26px}} /* ═══ 4 · GÓRNY PASEK ═════════════════════════════════════════ */ .topbar{background:linear-gradient(100deg,var(--deep) 0%,#10241E 55%,#1A2E22 100%);overflow:hidden} .topbar::after{ /* pomarańczowy błysk przesuwający się w pętli */ content:"";position:absolute;top:0;bottom:0;width:34%;left:-40%; background:linear-gradient(90deg,transparent,var(--orange-18),transparent); animation:tbSweep 7s ease-in-out infinite;pointer-events:none; } @keyframes tbSweep{0%{left:-40%}55%{left:110%}100%{left:110%}} .topbar .tb-arrow{color:var(--orange)} .topbar b{position:relative} .topbar:hover b::after{transform:scaleX(1)} .topbar b::after{ content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px; background:var(--orange);border-radius:2px; transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease-out); } /* ═══ 5 · NAWIGACJA ═══════════════════════════════════════════ */ .nav.stuck{box-shadow:0 1px 0 var(--line-2),0 10px 30px -26px rgba(13,26,22,.5)} /* pozycje menu mają zostać w jednej linijce nawet przy węższych ekranach laptopów (ok. 1000–1150px) — bez tego np. „Zakres strony" łamie się na dwa wiersze i psuje wysokość paska nawigacji */ .nav-links{flex-wrap:nowrap} .nav-links li{flex:none} .nav-links a{position:relative;padding-bottom:2px;white-space:nowrap} .nav-links a::after{ content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px; background:linear-gradient(90deg,var(--moss),var(--orange)); transform:scaleX(0);transform-origin:0 50%; transition:transform .32s var(--ease-out); } .nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)} .nav-cta{position:relative;overflow:hidden;isolation:isolate} .nav-cta::before{ /* pomarańczowa fala wjeżdżająca od dołu */ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(120deg,var(--orange-dk),var(--orange)); transform:translateY(101%);transition:transform .34s var(--ease-out); } .nav-cta:hover::before{transform:translateY(0)} .nav-cta:hover{background:var(--forest);box-shadow:0 8px 22px -10px var(--orange-35)} .burger{transition:border-color .2s ease,box-shadow .2s ease} .burger:hover{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-10)} .burger.open span{background:var(--orange)} /* ═══ 6 · PRZEŁĄCZNIK JĘZYKA ══════════════════════════════════ */ .lang{ display:inline-flex;align-items:center;flex:none;position:relative; border:1px solid var(--line);border-radius:999px; background:rgba(255,255,255,.7); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); padding:3px;margin-left:.85rem;overflow:hidden; } .lang::before{ /* pigułka jeżdżąca pod aktywnym językiem — zawsze w zieleni marki: to funkcjonalny wskaźnik, nie miejsce na akcent koloru */ content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px); border-radius:999px;background:linear-gradient(125deg,var(--forest),#17564A); transition:transform .38s var(--ease-out);z-index:0; } html[lang="en"] .lang::before,.lang.lang-en::before{transform:translateX(100%)} .lang button{ position:relative;z-index:1; padding:.3rem .68rem;border-radius:999px; font-size:.76rem;font-weight:600;letter-spacing:.05em; color:var(--ink-3);transition:color .3s ease;line-height:1.4; } .lang button[aria-pressed="true"]{color:#fff} .lang button:hover{color:var(--ink)} /* jedyny ślad pomarańczu tutaj: cieniutka kropka przy aktywnym EN — sygnał zamiast dużej plamy koloru */ .lang button[data-lang="en"]::after{ content:"";position:absolute;top:1px;right:2px;width:4px;height:4px;border-radius:50%; background:var(--orange);opacity:0;transition:opacity .3s ease; } .lang button[data-lang="en"][aria-pressed="true"]::after{opacity:1} .mnav .lang{margin:1rem 0 0;align-self:flex-start} @media(max-width:900px){ .nav-in .lang{margin-left:auto;margin-right:.6rem} .burger{margin-left:0} } /* delikatny sygnał, że język przełączono automatycznie */ .lang-auto{animation:langPulse 2.4s ease-out 2} @keyframes langPulse{ 0%,100%{box-shadow:0 0 0 0 rgba(254,119,0,0)} 35%{box-shadow:0 0 0 5px var(--orange-18)} } /* ═══ 7 · ETYKIETY SEKCJI ═════════════════════════════════════ */ .lbl::before{ background:linear-gradient(90deg,var(--moss),var(--orange)); opacity:1;transform-origin:0 50%;transform:scaleX(0); transition:transform .7s var(--ease-out) .1s; } .lbl.in::before,.rv.in .lbl::before,.in .lbl::before{transform:scaleX(1)} .lbl{position:relative} /* akcent na kursywnych fragmentach nagłówków — tło rozjeżdżające się od lewej; bez pseudoelementów, więc nic nie chowa się za sekcją */ h1 em,h2 em,h3 em{position:relative} h2 em{ background-image:linear-gradient(90deg,var(--orange-18),rgba(254,119,0,.03)); background-repeat:no-repeat;background-position:0 92%; background-size:0% .30em; transition:background-size .9s var(--ease-out) .3s; } h2.in em,.rv.in h2 em,.in h2 em,.stg.in h2 em{background-size:100% .30em} /* ═══ 8 · PRZYCISKI ═══════════════════════════════════════════ */ .btn{position:relative;overflow:hidden;isolation:isolate} .btn::after{ /* przesuwający się połysk */ content:"";position:absolute;top:0;bottom:0;width:45%;left:-60%;z-index:-1; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transition:left .55s var(--ease-out); } .btn:hover::after{left:120%} .btn-p{background:linear-gradient(125deg,var(--forest) 0%,#17564A 100%)} .btn-p:hover{ background:linear-gradient(125deg,var(--deep) 0%,#14332A 100%); box-shadow:0 12px 26px -14px var(--orange-35),0 0 0 1px var(--orange-18) inset; transform:translateY(-2px); } .btn-s{transition:border-color .2s,color .2s,box-shadow .25s,transform .25s} .btn-s:hover{ border-color:var(--orange);color:var(--orange-dk); box-shadow:0 10px 24px -16px var(--orange-35);transform:translateY(-2px); } .btn-mint:hover{color:var(--orange-dk);box-shadow:0 10px 26px -14px rgba(0,0,0,.35)} .btn-ghost-dark:hover{border-color:var(--orange);color:var(--orange-lt)} .btn:active{transform:translateY(0) scale(.985)} .btn svg{transition:transform .28s var(--ease-out)} .btn:hover svg{transform:translateX(5px)} /* ═══ 9 · POWIERZCHNIE — motyw „ściętego rogu" z logo ═════════ W logo litera „z" ma ścięty pomarańczowy róg. Ten sam gest powtarzamy na kartach: przy najechaniu róg się rozwija. */ .card,.give-i,.price-b,.grad,.glass,.spec,.price-note,.faq details{position:relative} .card::before,.give-i::before,.grad::before,.glass::before{ content:"";position:absolute;top:0;right:0;width:0;height:0;pointer-events:none;z-index:2; border-style:solid;border-width:0 0 0 0; border-color:transparent var(--orange) transparent transparent; transition:border-width .42s var(--ease-out); } .card:hover::before,.give-i:hover::before{border-width:0 26px 26px 0} .grad:hover::before,.glass:hover::before{border-width:0 20px 20px 0} .give-i{transition:background .35s ease,transform .35s var(--ease-out)} .give-i:hover{background:linear-gradient(160deg,var(--orange-05),transparent 55%)} .give-ic{transition:transform .45s var(--ease-out),color .3s ease} .give-i:hover .give-ic{transform:translateY(-3px) scale(1.1) rotate(-4deg);color:var(--orange)} .give-i h3{transition:color .25s ease} .give-i:hover h3{color:var(--orange-dk)} .card{transition:transform .35s var(--ease-out),box-shadow .35s ease,border-color .3s ease} .card:hover{transform:translateY(-4px);border-color:var(--orange-35);box-shadow:0 20px 40px -28px rgba(13,26,22,.45)} /* ═══ 10 · LISTY z „ptaszkami" ════════════════════════════════ */ .ticklist li{transition:color .22s ease,transform .28s var(--ease-out)} .ticklist li:hover{color:var(--ink);transform:translateX(4px)} .tick{transition:background .28s ease,transform .35s var(--ease-out),box-shadow .28s ease} .ticklist li:hover .tick{ background:var(--orange);transform:scale(1.16) rotate(-8deg); box-shadow:0 0 0 4px var(--orange-10); } .chip .dot{background:var(--orange);box-shadow:0 0 0 3px var(--orange-10);animation:dotPulse 2.6s ease-in-out infinite} @keyframes dotPulse{0%,100%{box-shadow:0 0 0 3px var(--orange-10)}50%{box-shadow:0 0 0 6px rgba(254,119,0,.05)}} /* ═══ 11 · PROCES / KROKI ═════════════════════════════════════ */ .step{transition:background .35s ease;position:relative} .step::before{ /* pomarańczowa krecha wjeżdżająca z lewej */ content:"";position:absolute;left:-14px;top:12%;bottom:12%;width:2px;border-radius:2px; background:linear-gradient(180deg,var(--orange),var(--orange-lt)); transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease-out); } .step:hover::before{transform:scaleY(1)} .step-n{transition:color .35s ease,transform .45s var(--ease-out)} .step:hover .step-n{transform:translateX(4px) scale(1.06)} .step-t .when{ display:inline-block;position:relative;padding-left:.85rem; } .step-t .when::before{ content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px; border-radius:50%;background:var(--orange); } /* ═══ 12 · CENNIK ═════════════════════════════════════════════ */ .price-a::before{ background: radial-gradient(80% 80% at 100% 0%,rgba(47,214,178,.2),transparent 62%), radial-gradient(60% 70% at 0% 100%,var(--orange-18),transparent 60%); } .price-a .price-n,.price-b .price-n{position:relative;display:inline-block} .price-b .price-n{color:var(--ink)} .price-a .price-k{color:var(--orange-lt)} .price-split div{transition:border-color .3s ease,background .3s ease,transform .3s var(--ease-out)} .price-split div:hover{border-color:var(--orange-35);background:var(--orange-10);transform:translateY(-2px)} .price-b{transition:transform .4s var(--ease-out),box-shadow .4s ease,border-color .3s ease} .price-b:hover{transform:translateY(-4px);border-color:var(--orange-35);box-shadow:0 26px 50px -34px rgba(13,26,22,.5)} .price-note{border-left:3px solid var(--orange)} .price-note a,.faq-a a,.step-d a{ color:var(--orange-dk);text-decoration-color:var(--orange-35); transition:text-decoration-color .25s ease,color .2s ease; } .price-note a:hover,.faq-a a:hover,.step-d a:hover{color:var(--orange);text-decoration-color:var(--orange)} /* ═══ 13 · PYTANIA (FAQ) ══════════════════════════════════════ */ .faq details{transition:background .3s ease} .faq summary{transition:color .22s ease,padding-left .3s var(--ease-out)} .faq summary:hover{color:var(--orange-dk);padding-left:.4rem} .faq summary i{transition:.28s var(--ease-out)} .faq summary:hover i{border-color:var(--orange);transform:rotate(90deg)} .faq details[open] summary i{ background:var(--orange);border-color:var(--orange);transform:rotate(180deg); box-shadow:0 0 0 4px var(--orange-10); } .faq details[open]{background:linear-gradient(180deg,var(--orange-05),transparent 60%)} .faq details[open] > .faq-a{animation:faqIn .42s var(--ease-out)} @keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}} /* ═══ 14 · CIEMNE PASMO CTA ═══════════════════════════════════ */ .dark-band::before{ background: radial-gradient(80% 90% at 100% 0%,rgba(47,214,178,.18),transparent 62%), radial-gradient(70% 80% at 0% 100%,var(--orange-18),transparent 60%); } .dark-band{position:relative} .dark-band::after{ background-image:var(--grain);opacity:.09; } .cta-band h2 em{color:var(--orange-lt)!important} .cta-band h2 em{background-image:linear-gradient(90deg,rgba(254,119,0,.30),transparent)} /* ═══ 15 · SEKCJA GŁÓWNA — makieta przeglądarki ═══════════════ */ .browser{ perspective:1400px; transition:transform .5s var(--ease-out); will-change:transform; } .bw{ transform-style:preserve-3d; transition:transform .5s var(--ease-out),box-shadow .5s ease,border-color .4s ease; will-change:transform; } .browser:hover .bw{ box-shadow:0 -18px 90px -30px rgba(254,119,0,.45),0 -10px 70px -24px rgba(13,26,22,.55); border-color:var(--orange-35); } .bw-bar{transition:background .35s ease} .browser:hover .bw-bar{background:rgba(254,119,0,.07)} .bw-addr{transition:color .3s ease,background .3s ease} .browser:hover .bw-addr{color:rgba(255,255,255,.8);background:rgba(255,255,255,.1)} .bw-h em{transition:color .35s ease} .browser:hover .bw-h em{color:var(--orange-lt)} .bw-l{ position:relative;overflow:hidden; transition:width .5s var(--ease-out),background .35s ease; } .bw-l::after{ /* światełko przebiegające po paskach treści — tylko przy najechaniu, żeby pomarańcz nie pulsował w tle bez przerwy */ content:"";position:absolute;top:0;bottom:0;left:-45%;width:45%; background:linear-gradient(90deg,transparent,rgba(254,119,0,.5),transparent); } .browser:hover .bw-l::after{animation:bwShine 1.1s ease-in-out;} .browser:hover .bw-l:nth-of-type(2)::after{animation-delay:.1s} .browser:hover .bw-l:nth-of-type(3)::after{animation-delay:.2s} @keyframes bwShine{0%{left:-45%}100%{left:115%}} .bw-cta span{transition:transform .3s var(--ease-out),box-shadow .3s ease,background .3s ease} .browser:hover .bw-cta span:first-child{ transform:translateY(-2px);box-shadow:0 8px 20px -10px var(--orange-35); } .browser:hover .bw-cta span.o{border-color:var(--orange-35);color:var(--orange-lt)} /* delikatne unoszenie się w spoczynku */ .bw{animation:bwFloat 9s ease-in-out infinite} .browser:hover .bw{animation-play-state:paused} @keyframes bwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} /* pigułki krążące po łuku */ .perk{transition:box-shadow .35s ease,border-color .35s ease} .perk::before{ content:"";display:inline-block;width:6px;height:6px;border-radius:50%; background:var(--orange);margin-right:.55rem;vertical-align:1px; box-shadow:0 0 0 3px var(--orange-10); } .stage-title .eta{position:relative;display:inline-block} .stage-title .eta::before{ content:"";display:inline-block;width:7px;height:7px;border-radius:50%; background:var(--orange);margin-right:.5rem;vertical-align:0; animation:etaPulse 1.9s ease-in-out infinite; } @keyframes etaPulse{ 0%,100%{box-shadow:0 0 0 0 var(--orange-35)} 50%{box-shadow:0 0 0 7px rgba(254,119,0,0)} } .caret{background:var(--orange)} .type{color:var(--orange-dk)} /* uchwyt sekcji przykrywającej */ .cover-grip{ background:linear-gradient(90deg,var(--line),var(--orange),var(--line)); background-size:220% 100%;animation:gripSlide 4.5s ease-in-out infinite; } @keyframes gripSlide{0%,100%{background-position:0% 0}50%{background-position:100% 0}} /* ═══ 16 · SPECYFIKACJA „dla kogo" ════════════════════════════ */ .spec-col{transition:background .4s ease} .spec-col:first-child:hover{background:linear-gradient(160deg,var(--orange-05),transparent 60%)} .spec-note{border-left-color:var(--orange)} .cross{transition:background .28s ease,transform .3s var(--ease-out)} .ticklist li:hover .cross{background:var(--paper-2);transform:scale(1.1) rotate(90deg)} /* ═══ 17 · CIASTECZKA ═════════════════════════════════════════ */ .ck-bar{border-top:2px solid var(--orange)} .ck-btn.p{background:linear-gradient(125deg,var(--forest),#17564A);transition:.25s} .ck-btn.p:hover{background:linear-gradient(125deg,var(--orange-dk),var(--orange))} .ck-btn.g:hover{border-color:var(--orange);color:var(--orange-dk)} .sw input:checked + i{background:var(--orange)} /* ═══ 18 · STOPKA ═════════════════════════════════════════════ */ .foot-col a{position:relative;width:fit-content} .foot-col a::after{ content:"";position:absolute;left:0;bottom:.1rem;height:1.5px;width:100%; background:var(--orange);border-radius:2px; transform:scaleX(0);transform-origin:0 50%;transition:transform .3s var(--ease-out); } .foot-col a:hover{color:var(--orange-dk)} .foot-col a:hover::after{transform:scaleX(1)} .foot-col a.logo::after{display:none} .foot-bottom a{color:var(--orange-dk)} .foot-col h4{position:relative;padding-left:.72rem} .foot-col h4::before{ content:"";position:absolute;left:0;top:.32em;width:3px;height:.85em;border-radius:2px; background:linear-gradient(180deg,var(--orange),var(--orange-lt)); } /* ═══ 19 · ODSŁANIANIE PRZY PRZEWIJANIU ═══════════════════════ */ .rv{transition:opacity .75s var(--ease-soft),transform .75s var(--ease-out)} /* warianty kierunkowe — nadawane przez skrypt */ .rv-up{opacity:0;transform:translateY(30px)} .rv-left{opacity:0;transform:translateX(-34px)} .rv-right{opacity:0;transform:translateX(34px)} .rv-zoom{opacity:0;transform:scale(.94)} .rv-tilt{opacity:0;transform:perspective(900px) rotateX(9deg) translateY(26px)} .rv-blur{opacity:0;filter:blur(9px);transform:translateY(18px)} .rv-up,.rv-left,.rv-right,.rv-zoom,.rv-tilt,.rv-blur{ transition:opacity .8s var(--ease-soft),transform .8s var(--ease-out),filter .8s ease; will-change:opacity,transform; } .rv-up.in,.rv-left.in,.rv-right.in,.rv-zoom.in,.rv-tilt.in,.rv-blur.in{ opacity:1;transform:none;filter:none; } /* nagłówki odsłaniane maską — bez dzielenia tekstu na elementy */ .rv-mask{ opacity:0; -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 62%); mask-image:linear-gradient(90deg,#000 0%,#000 42%,transparent 62%); -webkit-mask-size:260% 100%;mask-size:260% 100%; -webkit-mask-position:100% 0;mask-position:100% 0; transition:opacity .5s ease,-webkit-mask-position 1.1s var(--ease-out),mask-position 1.1s var(--ease-out); } .rv-mask.in{opacity:1;-webkit-mask-position:0 0;mask-position:0 0} /* kontener z opóźnieniami sam się nie przesuwa — ruszają się dzieci */ .rv.stg{opacity:1;transform:none} /* opóźnienia dla kolejnych elementów w siatce */ .stg > *{opacity:0;transform:translateY(24px); transition:opacity .7s var(--ease-soft),transform .7s var(--ease-out)} .stg.in > *{opacity:1;transform:none} .stg.in > *:nth-child(1){transition-delay:.02s} .stg.in > *:nth-child(2){transition-delay:.09s} .stg.in > *:nth-child(3){transition-delay:.16s} .stg.in > *:nth-child(4){transition-delay:.23s} .stg.in > *:nth-child(5){transition-delay:.30s} .stg.in > *:nth-child(6){transition-delay:.37s} .stg.in > *:nth-child(7){transition-delay:.44s} .stg.in > *:nth-child(8){transition-delay:.51s} /* ═══ 20 · PARALAKSA ══════════════════════════════════════════ */ [data-par]{will-change:transform} /* ═══ 21 · PANEL ROLEK NA STRONIE GŁÓWNEJ ═════════════════════ */ .reels-ph{transition:transform .5s var(--ease-out),box-shadow .5s ease,border-color .4s ease} .reels-ph:hover{ transform:translateY(-6px) rotate(1.5deg) scale(1.03); border-color:var(--orange-35); box-shadow:0 30px 60px -32px rgba(254,119,0,.4),0 24px 48px -30px rgba(13,26,22,.55); } /* ═══ 21b · DROBNE AKCENTY NA PODSTRONIE ROLEK ═══════════════════ Kilka rozproszonych „smaczków" w kolorze marki — celowo malutkich, żeby pomarańcz zostawał dodatkiem, a nie głównym motywem. */ .pkg-tab-k{position:relative;padding-left:.65rem} .pkg-tab-k::before{ content:"";position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px; border-radius:50%;background:var(--orange); } .hstat:nth-child(2) b{position:relative} .hstat:nth-child(2) b::after{ content:"";position:absolute;left:2px;right:2px;bottom:-5px;height:2px;border-radius:2px; background:var(--orange);opacity:.55; } .reels-ph{position:relative} .reels-ph::before{ /* mała kropka „nagrywania" w rogu miniaturki wideo */ content:"";position:absolute;top:10px;right:10px;z-index:2; width:7px;height:7px;border-radius:50%;background:var(--orange); box-shadow:0 0 0 3px rgba(254,119,0,.28); animation:recDot 2.2s ease-in-out infinite; } @keyframes recDot{0%,100%{opacity:1}50%{opacity:.35}} .mini{transition:border-color .35s ease,box-shadow .35s ease} .mini:hover{border-color:var(--orange-35);box-shadow:0 26px 46px -30px rgba(254,119,0,.3)} /* ═══ 22 · KURSOR — poświata na sekcji głównej ════════════════ */ .cursor-glow{ position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%; margin:-260px 0 0 -260px;pointer-events:none;z-index:0;opacity:0; background:radial-gradient(circle,var(--orange-10) 0%,rgba(254,119,0,.04) 42%,transparent 68%); transition:opacity .5s ease;will-change:transform; } .cursor-glow.on{opacity:1} @media(hover:none),(max-width:900px){.cursor-glow{display:none}} /* ═══ 23 · FORMULARZ ══════════════════════════════════════════ */ input:focus,textarea:focus,select:focus{ border-color:var(--orange)!important; box-shadow:0 0 0 3px var(--orange-10)!important; } .choice-opt.is-on{border-color:var(--orange)!important;background:var(--orange-05)!important} fieldset{transition:border-color .35s ease} fieldset:focus-within{border-color:var(--orange-35)} /* ═══ 24 · WSPÓŁPRACA — spis treści i artykuł ═════════════════ */ .toc a,.doc-toc a{position:relative;transition:color .22s ease,padding-left .28s var(--ease-out)} .toc a:hover,.doc-toc a:hover{color:var(--orange-dk);padding-left:.3rem} /* ═══ 25 · LICZNIKI ═══════════════════════════════════════════ */ .cnt{font-variant-numeric:tabular-nums} /* ═══ 26 · SZANUJEMY USTAWIENIA DOSTĘPNOŚCI ═══════════════════ */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .rv-up,.rv-left,.rv-right,.rv-zoom,.rv-tilt,.rv-blur,.rv-mask,.stg > *{ opacity:1!important;transform:none!important;filter:none!important; -webkit-mask-image:none!important;mask-image:none!important; } .scrollbar-top,.cursor-glow{display:none} } /* ════════════════════════════════════════════════════════════════════ WERSJA 2 — poprawki po uwagach Wczytywana na końcu pliku, więc nadpisuje wcześniejsze reguły. ════════════════════════════════════════════════════════════════════ */ :root{ --sage:#F2F6F3; /* jasne tło sekcji — zamiast zimnej szarości */ --sage-2:#EAF1EC; --forest-2:#123F34; --night:#0B211C; } /* ── 1 · KONIEC Z POMARAŃCZOWYMI KROPKAMI ──────────────────────────── Zdejmujemy wszystkie pulsujące kropki dodane wcześniej. */ .perk::before, .stage-title .eta::before, .step-t .when::before, .pkg-tab-k::before, .reels-ph::before, .hstat:nth-child(2) b::after, .lang button[data-lang="en"]::after{content:none!important;display:none!important} .stage-title .eta{padding-left:0} .step-t .when{padding-left:0} .pkg-tab-k{padding-left:0} .chip .dot{animation:none!important;box-shadow:none!important;background:var(--moss)} /* ── 2 · NUMERKI 01 / 02 / 03 — zwykły tekst, bez gradientowych plam ─ Wcześniej numer był przycinany maską do tekstu (background-clip:text). Gdy inna reguła nadpisała samo przycinanie, gradient malował się na całym pudełku, a cyfra znikała — stąd „kolorowe kwadraty” zamiast numerków. Poniżej twardo zdejmujemy tło z każdego numeru na stronie i zostawiamy zwykły, jednolity kolor tekstu. */ .art-n,.step-n,.lg-n,.pkg-n,.gnum,.f-step-n,.price-n,.doc-n, legend .art-n,legend .lg-n,legend .step-n, .grid3 .gnum,.steps .step-n,fieldset legend .lg-n{ background:none!important;background-image:none!important;background-color:transparent!important; -webkit-background-clip:border-box!important;background-clip:border-box!important; -webkit-text-fill-color:currentColor!important; font-family:'Geist','Geist Fallback',system-ui,sans-serif!important; font-weight:700!important;letter-spacing:-.03em; } .art-n,.step-n,.pkg-n,.gnum,.f-step-n,.doc-n,legend .art-n{ color:rgba(19,66,54,.34)!important; } /* numer sekcji w formularzu — czytelna zieleń, bo prowadzi przez kroki */ .lg-n,legend .lg-n,fieldset legend .lg-n{color:var(--moss)!important} .price-n{color:var(--ink)!important} .step:hover .step-n{color:var(--orange)!important;transform:translateX(3px)} .sec-dark .step-n{color:rgba(255,255,255,.32)!important} /* ── 3 · LOGO — bez przekrzywiania, sam wzrost + reakcja 3D z JS ─────*/ .logo-img{transition:transform .4s var(--ease-out),filter .4s ease;transform-origin:50% 50%} .logo:hover .logo-img{transform:none;filter:drop-shadow(0 6px 16px rgba(254,119,0,.28))} .logo{perspective:600px} /* ── 4 · SZEROKIE EKRANY (16:9 i 21:9) ────────────────────────────── Strona przestaje siedzieć w wąskiej kolumnie na dużych monitorach. Sekcja główna i stopka zostają bez zmian. */ @media(min-width:1400px){ :root{--maxw:1300px} } @media(min-width:1600px){ :root{--maxw:1450px} } @media(min-width:1900px){ :root{--maxw:1640px} } @media(min-width:2300px){ :root{--maxw:1880px} } @media(min-width:2800px){ :root{--maxw:2100px} } .foot .wrap{max-width:1180px} /* stopka bez zmian */ .nav .wrap{max-width:min(var(--maxw),1560px)} .stage .wrap{max-width:1180px} /* hero bez zmian */ /* ── 5 · TŁA SEKCJI — nieprzezroczyste, cieplejszy jasny odcień ──────*/ .sec-cream{background:var(--sage)!important} .sec-white{background:#FFFFFF!important} .foot{background:var(--sage-2)!important} .sec{position:relative;overflow:hidden} /* ruchomy gradient również na jasnych sekcjach (przez ::after) */ .sec-cream::after,.sec-close::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(40% 48% at calc(var(--flow,0) * 122% - 11%) 28%, rgba(47,214,178,.16), transparent 66%), radial-gradient(32% 40% at calc(114% - var(--flow,0) * 112%) 76%, rgba(254,119,0,.09), transparent 66%); transition:background .12s linear; } .sec-cream > .wrap,.sec-close > .wrap{position:relative;z-index:1} /* sekcje pod sceną muszą ją zasłaniać — koniec z prześwitem */ .cover ~ .sec{position:relative;z-index:6} #zakres{margin-top:-1px} /* ── 6 · SEKCJA CIEMNA („Kompletna strona…") ────────────────────────*/ .sec-dark{ background:linear-gradient(168deg,#123F34 0%,#0C2620 55%,#0F2E27 100%)!important; color:rgba(255,255,255,.72); } .sec-dark::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-image:var(--grain);opacity:.10; } .sec-dark::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 54% at calc(var(--flow,0) * 120% - 10%) 22%, rgba(47,214,178,.16), transparent 64%), radial-gradient(38% 46% at calc(116% - var(--flow,0) * 112%) 82%, rgba(254,119,0,.14), transparent 64%); transition:background .12s linear; } .sec-dark > .wrap{position:relative;z-index:1} .sec-dark h2,.sec-dark h3,.sec-dark h4{color:#fff} .sec-dark em{color:var(--mint)} .sec-dark .lead,.sec-dark p{color:rgba(255,255,255,.68)} .sec-dark .lbl{color:var(--mint)} .sec-dark .lbl::before{background:linear-gradient(90deg,var(--mint),var(--orange))} .sec-dark h2 em{background-image:linear-gradient(90deg,rgba(254,119,0,.30),transparent)} /* ── 7 · KAFELKI — osobne karty z cieniem, bez wspólnej ramki ────────*/ .give{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:clamp(.85rem,1.5vw,1.3rem)!important; border:0!important;border-radius:0!important; background:transparent!important;overflow:visible!important; } .give-i{ border:0!important;border-radius:18px; padding:clamp(1.35rem,2.3vw,1.9rem); position:relative;overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(13,26,22,.05),0 14px 32px -20px rgba(13,26,22,.28); transition:transform .45s var(--ease-out),box-shadow .45s ease,background .4s ease; will-change:transform; } .give-i:hover{ transform:translateY(-7px) scale(1.035); box-shadow:0 30px 62px -26px rgba(13,26,22,.42); background:#fff; } .give-i h3{margin-bottom:.45rem} .give-i p{font-size:.94rem} .give-i p + p{margin-top:.5rem} /* wersja na ciemnym tle */ .sec-dark .give-i{ background:linear-gradient(165deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.028) 100%); border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 20px 44px -30px rgba(0,0,0,.7); } .sec-dark .give-i:hover{ background:linear-gradient(165deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.05) 100%); box-shadow:0 34px 68px -26px rgba(0,0,0,.85); } .sec-dark .give-ic{color:var(--mint)} .sec-dark .give-i h3{color:#fff} .sec-dark .give-i p{color:rgba(255,255,255,.62)} .sec-dark .give-i:hover h3{color:var(--orange-lt)} .sec-dark .give-i:hover .give-ic{color:var(--orange-lt)} /* róg pomarańczowy zostaje — wysuwa się z prawego górnego narożnika */ .give-i::before{z-index:3} @media(max-width:1000px){ .give{grid-template-columns:repeat(2,1fr)!important} } @media(max-width:680px){ .give{grid-template-columns:1fr!important} } /* ── 8 · SEKCJA Z FILMEM ────────────────────────────────────────────*/ .showcase{ display:grid;grid-template-columns:1.02fr .98fr; gap:clamp(1.6rem,3.6vw,3.6rem);align-items:center; margin-bottom:clamp(2.2rem,4.6vw,3.4rem); } .showcase-txt h2{margin-bottom:1.1rem} .showcase-txt .lead{max-width:52ch} .promo{margin:0;position:relative;perspective:1200px} .promo-frame{ position:relative;aspect-ratio:4/3;width:100%; border-radius:20px;overflow:hidden;background:var(--deep); box-shadow:0 34px 76px -38px rgba(13,26,22,.62); /* odsłanianie ukośną przesłoną — krawędź wjeżdża pod kątem */ clip-path:polygon(-30% 0, -30% 0, -62% 100%, -62% 100%); transition:clip-path 1.15s cubic-bezier(.16,.84,.3,1), transform .5s var(--ease-out), box-shadow .5s ease; transform-style:preserve-3d; } .promo.in .promo-frame{clip-path:polygon(-30% 0, 142% 0, 142% 100%, -62% 100%)} .promo-vid{width:100%;height:100%;object-fit:cover;display:block;background:var(--deep)} /* narożniki jak celownik kamery */ .promo-br{ position:absolute;width:26px;height:26px;z-index:3;pointer-events:none; border:2px solid var(--orange);opacity:0; transition:opacity .5s ease,transform .5s var(--ease-out),width .35s ease,height .35s ease; } .promo-br.tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:7px 0 0 0;transform:translate(-10px,-10px)} .promo-br.tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 7px 0 0;transform:translate(10px,-10px)} .promo-br.bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 7px;transform:translate(-10px,10px)} .promo-br.br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 7px 0;transform:translate(10px,10px)} .promo.in .promo-br{opacity:.9;transform:none;transition-delay:.75s} .promo:hover .promo-br{width:36px;height:36px;opacity:1} /* jednorazowa smuga światła po odsłonięciu */ .promo-scan{ position:absolute;left:0;right:0;height:30%;top:-32%;z-index:2;pointer-events:none;opacity:0; background:linear-gradient(180deg,transparent,rgba(47,214,178,.14),rgba(254,119,0,.08),transparent); } .promo.in .promo-scan{animation:promoScan 2.4s cubic-bezier(.3,.1,.3,1) .85s 1} @keyframes promoScan{0%{top:-32%;opacity:1}100%{top:104%;opacity:0}} /* przycisk odtwarzania na całej powierzchni */ .promo-tap{ position:absolute;inset:0;z-index:4;display:grid;place-items:center; background:transparent;border:0;cursor:pointer;padding:0; } .promo-ico{ width:62px;height:62px;border-radius:50%; background:rgba(255,255,255,.94);position:relative; box-shadow:0 12px 34px -12px rgba(0,0,0,.55); transition:transform .3s var(--ease-out),opacity .3s ease,background .3s ease; } .promo-ico::before{ content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%); border-style:solid;border-width:10px 0 10px 17px; border-color:transparent transparent transparent var(--forest); } .promo.is-playing .promo-ico{opacity:0;transform:scale(.7)} .promo.is-playing:hover .promo-ico{opacity:1;transform:scale(1);background:rgba(255,255,255,.92)} .promo.is-playing .promo-ico::before{ border-width:0;width:5px;height:19px;left:50%; background:var(--forest);box-shadow:9px 0 0 var(--forest); transform:translate(-70%,-50%); } .promo-tap:hover .promo-ico{transform:scale(1.07)} /* dźwięk */ .promo-snd{ position:absolute;z-index:5;right:14px;bottom:14px; display:inline-flex;align-items:center;gap:.45rem; padding:.5rem .85rem;border-radius:999px;cursor:pointer; background:rgba(11,33,28,.72);color:#fff; border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); font-size:.78rem;font-weight:500;letter-spacing:.01em; transition:background .25s ease,border-color .25s ease,transform .25s var(--ease-out); } .promo-snd:hover{background:rgba(11,33,28,.9);border-color:var(--orange);transform:translateY(-2px)} .promo-snd::after{content:"Włącz dźwięk"} .promo.has-sound .promo-snd::after{content:"Wycisz"} html[lang="en"] .promo-snd::after{content:"Turn on sound"} html[lang="en"] .promo.has-sound .promo-snd::after{content:"Mute"} .snd-off{ width:13px;height:13px;flex:none;border-radius:2px; background:currentColor; clip-path:polygon(0 33%,28% 33%,58% 8%,58% 92%,28% 67%,0 67%); } .promo.has-sound .snd-off{background:var(--orange)} @media(max-width:860px){ .showcase{grid-template-columns:1fr;gap:1.6rem} .promo{order:-1} .promo-br{width:20px;height:20px} .promo:hover .promo-br{width:24px;height:24px} } /* ── 9 · CENNIK — dwie ciemne karty z odchyleniem 3D ─────────────────*/ .price{perspective:1500px} .price-card{ background:linear-gradient(158deg,var(--forest-2) 0%,var(--night) 58%,#10322A 100%)!important; color:#fff!important; border:1px solid rgba(255,255,255,.09)!important; box-shadow:0 26px 62px -34px rgba(13,26,22,.62); transform-style:preserve-3d;will-change:transform; transition:transform .45s var(--ease-out),box-shadow .45s ease, filter .45s ease,opacity .45s ease; } .price-card::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background: radial-gradient(74% 76% at 100% 0%, rgba(47,214,178,.16), transparent 60%), radial-gradient(66% 72% at 0% 100%, rgba(254,119,0,.20), transparent 62%); } .price-card::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background-image:var(--grain);opacity:.08; } .price-card > *{position:relative;z-index:1} /* sąsiadka przygasa, najechana rozjaśnia się */ .price:hover .price-card{filter:brightness(.62) saturate(.8);opacity:.9} .price:hover .price-card:hover{ filter:brightness(1.08) saturate(1.05);opacity:1; box-shadow:0 44px 88px -34px rgba(254,119,0,.34),0 26px 62px -30px rgba(13,26,22,.7); } .price-card .price-k{color:var(--mint)!important} .price-card .price-n{ color:#fff!important;background:none!important; -webkit-text-fill-color:#fff!important; } .price-card .price-u{color:rgba(255,255,255,.62)!important} .price-card .price-lbl{color:rgba(255,255,255,.52)!important} .price-card .ticklist li{color:rgba(255,255,255,.78)} .price-card .tick{background:rgba(255,255,255,.16);color:#fff} .price-card .price-split div{border-color:rgba(255,255,255,.2)} .price-card .price-split span{color:rgba(255,255,255,.6)} /* przycisk w drugiej karcie — wersja na ciemnym tle */ .price-b .btn-s{ background:transparent!important;color:#fff!important; border-color:rgba(255,255,255,.3)!important; } .price-b .btn-s:hover{border-color:var(--orange)!important;color:var(--orange-lt)!important} /* wjazd od dołu z lekkim obrotem */ .rv-pop{opacity:0;transform:perspective(1200px) translateY(64px) rotateX(11deg); transition:opacity .8s var(--ease-soft),transform .9s var(--ease-out)} .rv-pop.in{opacity:1;transform:none} .rv-pop:nth-child(2){transition-delay:.11s} /* ── 10 · KONIEC Z CZARNYM TEKSTEM NA CIEMNYM TLE ────────────────────*/ .dark-band .ticklist li:hover, .price-card .ticklist li:hover, .sec-dark .ticklist li:hover{color:#fff!important} .sec-dark .faq summary:hover, .sec-dark a:hover{color:var(--orange-lt)} .price-card .ticklist li:hover .tick{background:var(--orange);box-shadow:0 0 0 4px rgba(254,119,0,.18)} .sec-dark .ticklist li:hover .tick{background:var(--orange)} .dark-band .lead{color:rgba(255,255,255,.72)} /* ── 11 · DÓŁ STRONY — układ po przekątnej, bez kafelków ─────────────*/ .sec-close{background:var(--sage)!important;position:relative;overflow:hidden} .close-grid{ display:grid;grid-template-columns:1fr 1px 1fr; gap:clamp(1.6rem,4vw,3.6rem);align-items:start; } .close-a{max-width:46ch} .close-a h2{margin-bottom:1rem} .close-rule{ align-self:stretch;width:1px; background:linear-gradient(180deg,transparent,var(--line) 16%,var(--line) 84%,transparent); } .close-b{ margin-top:clamp(2.6rem,9vw,7.5rem); display:grid;grid-template-columns:132px 1fr;gap:clamp(1rem,2vw,1.6rem);align-items:center; } .close-b h3{font-size:clamp(1.2rem,2vw,1.5rem);margin-bottom:.6rem} .close-b p{font-size:.95rem;color:var(--ink-2)} .close-b p + p{margin-top:.5rem} .close-b .btn-row{margin-top:1.2rem} .close-vis .reels-ph{max-width:132px;margin:0} @media(max-width:900px){ .close-grid{grid-template-columns:1fr;gap:2.4rem} .close-rule{display:none} .close-b{margin-top:0;grid-template-columns:1fr;gap:1.2rem} .close-vis{display:flex;justify-content:flex-start} } /* ── 12 · PANEL „ROLKI" NA PODSTRONIE — suwak bez podpisu ────────────*/ .vhint{display:none!important} /* ── 13 · DROBIAZGI ─────────────────────────────────────────────────*/ .spec{background:rgba(255,255,255,.7)} .cover-grip{background:linear-gradient(90deg,var(--line),var(--orange),var(--line));background-size:220% 100%} /* karta w sekcji ciemnej nie ma białej obwódki */ .sec-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)} /* ── 14 · TELEFON — priorytet: nic się nie rozjeżdża ─────────────────*/ @media(max-width:760px){ .hide-mob{display:none!important} h1{font-size:clamp(1.6rem,7vw,2.1rem)} h2{font-size:clamp(1.45rem,5.6vw,1.9rem)} h3{font-size:1.05rem} .lead{font-size:.97rem} .sec{padding:clamp(2.6rem,9vw,3.6rem) 0} .give-i{padding:1.25rem} .give-i:hover{transform:none} /* bez skalowania pod palcem */ .give-i::before{display:none} .price-card{padding:1.4rem} .price:hover .price-card{filter:none;opacity:1} .rv-pop{transform:translateY(28px);transition-duration:.6s} .promo-frame{border-radius:16px} .promo-snd{right:10px;bottom:10px;padding:.42rem .7rem;font-size:.72rem} .promo-ico{width:52px;height:52px} .close-a{max-width:none} .step{grid-template-columns:44px 1fr} .step-n{font-size:1.5rem} .toc,.doc-toc{position:static!important} .scrollbar-top{height:2px} .cursor-glow{display:none!important} } @media(max-width:420px){ .btn{padding:.85rem 1.15rem;font-size:.93rem} .promo-br{width:16px;height:16px;border-width:1.5px} .promo-br.tl,.promo-br.tr{top:10px} .promo-br.bl,.promo-br.br{bottom:10px} .promo-br.tl,.promo-br.bl{left:10px} .promo-br.tr,.promo-br.br{right:10px} } /* nic nie może wystawać poza ekran */ html,body{max-width:100%;overflow-x:hidden} .wrap{overflow-wrap:break-word} /* na wąskich ekranach elementy wjeżdżają z dołu, nie z boku — inaczej przed odsłonięciem wystawałyby poza krawędź ekranu */ @media(max-width:900px){ .rv-left,.rv-right{transform:translateY(26px)} }