(kvůli

v landmarku) a drží si vlastní padding, proto :not(.hero). / .site main > section:not(.hero){padding:clamp(60px,9vh,110px) 0} .site main > section + section{border-top:1px solid var(--rule)} / Tmavá sekce je řez sama o sobě, linka by ho zdvojila / .site main > section.ink, .site main > section.ink + section, .site main > .hero + section{border-top:none} / Šířku omezuje jen odstavec, nadpis se roztáhne / .site .intro{max-width:none} .site .intro p, .site .intro .sub{max-width:60ch} .site h2{ font-weight:800;font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.1;letter-spacing:-.04em;margin:22px 0 18px; text-wrap:balance; } .site h3{font-weight:800;font-size:1.35rem;letter-spacing:-.03em;margin-bottom:10px} .site .intro p{color:var(--muted);font-size:1.05rem} .site p + p{margin-top:16px} / --- Hero --------------------------------------------------- Tmavá plocha od kraje ke kraji, text drží mřížku přes .wrap. .hero-full = přes celou obrazovku (homepage). / .hero{position:relative;overflow:hidden;padding:clamp(56px,9vh,104px) 0} .hero .inner{position:relative;z-index:1} .hero .eyebrow{margin-bottom:80px} / Výška okna minus hlavička. --nav-h má na mobilu vlastní hodnotu, menu se tam zalomí pod logo. / .hero-full{ min-height:calc(100vh - var(--nav-h)); / fallback pro Safari 15 / min-height:calc(100svh - var(--nav-h)); display:flex;flex-direction:column;justify-content:center; } .hero h1{ font-weight:800; font-size:clamp(2rem,6.4vw,5.2rem); line-height:1.02;letter-spacing:-.04em; max-width:15ch;margin:40px 0 40px; text-wrap:balance; } .hero .sub{font-size:clamp(1.02rem,1.8vw,1.35rem);color:var(--muted);max-width:38ch;line-height:1.75} .hero .cta{margin-top:70px} .note{ display:block;margin-top:14px; font-family:'JetBrains Mono',monospace;font-weight:500;font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--muted); } .ink .note a{color:var(--bg)} .note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)} .note a:hover{border-bottom-color:currentColor} / Orbit pattern: statický výřez v rohu bloku, bez rotace / .orbit{position:absolute;pointer-events:none;z-index:0} .orbit svg{width:100%;height:100%;display:block} / Kotveno k pravému dolnímu rohu, ne procenty výšky bloku: jádro sedí vždy 52 px od rohu. --p musí být délka, ne %, aby stejná hodnota platila pro right i bottom. Střed jádra je v SVG na 70 % / 50 %. / .hero .orbit{ --p:min(620px,78vw); width:var(--p);aspect-ratio:1/1; right:calc(52px - .30 var(--p)); bottom:calc(52px - .50 * var(--p)); } .scroll{ position:absolute; left:0;right:0;bottom:36px; z-index:1; display:flex;flex-direction:column;align-items:center;gap:8px; color:var(--muted);text-decoration:none; font-family:'JetBrains Mono',monospace;font-weight:500; font-size:11px;letter-spacing:.2em;text-transform:uppercase; transition:color .15s ease; } .scroll:hover{color:var(--bg)} .scroll-arw{ font-size:16px;line-height:1; animation:bob 2s ease-in-out infinite; } @keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} } /* Full hero: větší pattern, svisle na střed, dál od pravé hrany / .hero-full .orbit{ --p:min(1000px,115vw); top:50%;bottom:auto;transform:translateY(-50%); right:calc(150px - .30 var(--p)); } /* --- Proof pás ---------------------------------------------- / .proof{ display:grid;grid-template-columns:repeat(3,1fr); margin-top:44px; } .proof-item{padding:32px 28px 26px;border-left:1px solid var(--rule)} .proof-item:first-child{padding-left:0;border-left:none} .proof-item:last-child{padding-right:0} .proof-item h2, .proof-item h3{margin-bottom:10px;font-size:1.2rem;font-weight:800;letter-spacing:-.03em} .proof-item h2 a{color:inherit;text-decoration:none;border-bottom:2px solid var(--accent)} .proof-item h2 a:hover{color:var(--accent)} .proof-item p{color:var(--muted);font-size:.98rem;max-width:28ch} / --- Dlaždice služeb --------------------------------------- Linky mezi dlaždicemi dělá gap:1px nad podkladem --rule. / .tiles{ display:grid;grid-template-columns:repeat(3,1fr); gap:1px;background:var(--rule);border:1px solid var(--rule); margin-top:56px; } .tiles-2{grid-template-columns:repeat(2,1fr)} .tile{background:var(--bg);padding:36px 32px 32px;display:flex;flex-direction:column;transition:background .15s ease} .tile h3:first-child{margin-top:0} .tile:hover{background:color-mix(in srgb, var(--ink) 4%, var(--bg))} .tile h3{margin:18px 0 12px;font-size:1.5rem} .tile > p{color:var(--muted);font-size:.98rem} .tile ul{list-style:none;margin:24px 0 0;display:grid;gap:9px} .tile li{font-size:.95rem;padding-left:18px;position:relative} .tile li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--accent)} / Cena na dně dlaždice, ať je řada zarovnaná / .price{margin-top:auto;padding-top:28px;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase} .price .soft{display:block;font-size:15px;margin-top:6px;letter-spacing:.06em;color:var(--muted)} / --- Jak začít (audit) -------------------------------------- Text vlevo, cena a odrážky v ohraničeném sloupci vpravo. / .audit{display:grid;grid-template-columns:1.15fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:56px} .audit-text{background:var(--bg);padding:36px 40px 36px 32px} .audit-text h3{font-size:1.5rem;margin-bottom:16px} .audit-text p{color:var(--muted);font-size:1rem;max-width:52ch} / Oddělené linkou, ať se to nečte jako pokračování odstavce / .audit-text .skip{margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)} .audit-side{background:var(--bg);padding:36px 32px} .audit-side .cena{ font-family:'JetBrains Mono',monospace;font-weight:500; font-size:clamp(1.05rem,1.8vw,1.3rem);letter-spacing:-.01em;line-height:1.35; padding-bottom:24px;border-bottom:1px solid var(--rule); } .audit-side ul{list-style:none;margin:24px 0 0;display:grid;gap:11px} .audit-side li{font-size:.95rem;padding-left:18px;position:relative} .audit-side li::before{content:"";position:absolute;left:0;top:11px;width:7px;height:1px;background:var(--accent)} / --- Proces 01–04 ------------------------------------------- / .flow{ display:grid;grid-template-columns:repeat(2,1fr); gap:1px;background:var(--rule); border:1px solid var(--rule); margin-top:56px; } .flow-step{background:var(--bg);padding:32px 32px 36px} .flow-step .n{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:13px;letter-spacing:.14em;color:var(--accent);margin-bottom:16px} .flow-step p{color:var(--muted);font-size:.98rem;max-width:56ch} / --- Karty práce -------------------------------------------- / .work{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;margin-top:56px} .work-card{ display:flex;flex-direction:column;text-decoration:none;color:inherit; border:1px solid var(--rule);overflow:hidden; transition:border-color .2s ease, transform .25s cubic-bezier(.2,.7,.2,1); } / height:auto je nutné: atributy width/height se chovají jako styl s nulovou specificitou a přebily by aspect-ratio / .work-card img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block} .work-card .body{padding:28px 28px 30px} .work-card .klient{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} / h2 na /prace/, h3 na homepage (tam nad kartou stojí nadpis sekce) / .work-card h2, .work-card h3{margin:14px 0 0;font-size:1.45rem;line-height:1.15;font-weight:800;letter-spacing:-.03em} .work-card .arw{color:var(--accent);display:inline-block;transition:transform .15s ease} .work-card:hover .arw{transform:translateX(4px)} / Jedna karta přes celou šířku: plošší obrázek / .work-full{grid-template-columns:1fr} .work-full .work-card img{aspect-ratio:18/7} .work-full .work-card .body{padding:30px 32px 32px} / --- FAQ (nativní
, bez JS) ------------------------ / .faq{margin-top:48px;border-top:1px solid var(--rule)} .faq details{border-bottom:1px solid var(--rule)} .faq summary{ list-style:none;cursor:pointer; display:flex;align-items:flex-start;justify-content:space-between;gap:24px; padding:26px 0;font-weight:700;font-size:1.1rem;letter-spacing:-.02em; } .faq summary::-webkit-details-marker{display:none} / Znaménko vpravo; otevřený stav ho otáčí, viz sekce animací / .faq summary::after{content:"+";color:var(--accent);font-weight:500;font-size:1.4rem;line-height:1;flex:none} .faq details p{color:var(--muted);padding:0 44px 28px 0;max-width:66ch} .faq-more{margin-top:32px} / --- CTA sekce a patička (obojí ink) ------------------------ / .cta-ink h2{max-width:24ch} .cta-ink .podradek{ font-family:'JetBrains Mono',monospace;font-weight:500; font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); margin-bottom:28px; } .site-footer{border-top:none;padding:clamp(40px,6vh,64px) 0;display:block;text-transform:none} .site-footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start} .site-footer svg{height:28px;width:auto;display:block} .site-footer .menu{display:flex;gap:26px;flex-wrap:wrap} / Tři sloupce: logo, menu, identifikace (§ 435 obč. zák.). Selektor musí být .site-footer .f-ico, ne samotné .f-ico — pravidlo pro .f-meta níž má vyšší specificitu a vrátilo by uppercase. / .site-footer .f-meta{display:flex;flex-direction:column;gap:10px;max-width:56ch} .site-footer .f-ico{ font-family:'JetBrains Mono',monospace;font-weight:500; font-size:11px;letter-spacing:.06em;text-transform:none; color:var(--muted);line-height:1.75; } .site-footer a, .site-footer .f-meta{ font-family:'JetBrains Mono',monospace;font-weight:500; font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);text-decoration:none; } .site-footer a:hover{color:var(--bg)} / --- Mobil -------------------------------------------------- Velikosti písma z vw s min/max, nikde vh: lišta prohlížeče by při scrollu měnila velikost textu. / @media (max-width:900px){ .tiles,.tiles-2{grid-template-columns:1fr} .audit{grid-template-columns:1fr} .flow{grid-template-columns:1fr} .work{grid-template-columns:1fr} .proof{grid-template-columns:1fr} .proof-item{padding:26px 0;border-left:none;border-top:1px solid var(--rule)} .proof-item:first-child{border-top:none} .scroll{display:none} } / ===== TABLET — hero (641–1180 px) ===== / @media (min-width:641px) and (max-width:1180px){ .hero-full{ min-height:calc(84svh - var(--nav-h)); } .hero .eyebrow{ margin-bottom:34px; } .hero h1{ margin:0 0 28px; } .hero .sub{ line-height:1.75; } .hero .cta{ margin-top:44px; } .scroll{display:none} } / ===== TABLET — dlaždice (641–900 px) ===== / @media (min-width:641px) and (max-width:900px){ .tiles,.tiles-2{grid-template-columns:1fr 1fr} .work{grid-template-columns:1fr 1fr} .proof{grid-template-columns:1fr 1fr} .scroll{display:none} } / ===== TELEFON (do 640 px) ===== / @media (max-width:640px){ / menu se zalomí pod logo, hlavička je vyšší / :root{--nav-h:110px} .hero{padding:48px 0 72px} .hero-full{ min-height:calc(82svh - var(--nav-h)); justify-content:center; padding:48px 0 56px; } .hero .eyebrow{ margin-bottom:56px; } .hero h1{ font-size:clamp(1.75rem,10.5vw,3rem); line-height:1.2; margin:0 0 30px; max-width:none; } .hero .sub{ font-size:clamp(.98rem,3vw,1.1rem); line-height:1.8; max-width:none; } .hero .cta{ margin-top:56px; } .hero .note{ margin-top:20px; } .site .hero .btn{ width:auto; justify-content:flex-start; } .hero .orbit{--p:78vw} / Úzké a vysoké hero: pattern zpátky do rohu, na středu by jádro leželo na nadpisu / .hero-full .orbit{ --p:76vw; / větší hodnota posadí horní satelit na text pod tlačítkem / top:auto;transform:none; right:calc(52px - .30 var(--p)); bottom:calc(52px - .50 * var(--p)); } .site main > section:not(.hero){padding:60px 0} .site h2{font-size:clamp(1.6rem,7vw,2.1rem)} .site-nav .wrap{flex-wrap:wrap;gap:0;padding-top:18px;padding-bottom:14px;min-height:0} .site-nav .brand{width:100%} .site-nav .menu{width:100%;gap:22px;margin-top:14px} .tile{padding:30px 24px 28px} .audit-text{padding:30px 24px} .audit-side{padding:30px 24px} .work-full .work-card img{aspect-ratio:16/9} .flow-step{padding:28px 24px 30px} .site .btn{width:100%;justify-content:center} .scroll{display:none} } /* === Case study ============================================= Stejná sada stylů jako zbytek webu, navíc jen komponenty s cs-. / / Odkaz zpět není aktivní stránka, oranžovou stopu nedostane / .site-nav .menu a.zpet{border-bottom-color:transparent} .site-nav .menu a.zpet:hover{color:var(--ink);border-bottom-color:var(--rule)} / Meta tabulka v heru / .cs-meta{ display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px; margin-top:48px;padding-top:30px;border-top:1px solid var(--rule); } .cs-meta div{display:flex;flex-direction:column;gap:6px} .cs-meta dt{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .cs-meta dd{font-size:15px;font-weight:500} / Blok přístupu: číslo vlevo, obsah vpravo / .cs-block{ display:grid;grid-template-columns:200px 1fr;gap:40px; padding:48px 0;border-top:1px solid var(--rule); } .cs-block:first-of-type{margin-top:56px} .cs-block .n{ font-family:'JetBrains Mono',monospace;font-weight:500; font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent); position:sticky;top:32px;align-self:start; } .cs-body h3{font-size:1.6rem;margin-bottom:16px} .cs-body p{color:var(--muted);max-width:60ch} .cs-body ul{list-style:none;margin:26px 0 0;display:grid;gap:10px;max-width:60ch} .cs-body li{font-size:.98rem;padding-left:18px;position:relative} .cs-body li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:1px;background:var(--accent)} / Vytažený claim / .cs-claim{margin:34px 0;padding:4px 0 4px 26px;border-left:2px solid var(--accent)} .cs-claim blockquote{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;letter-spacing:-.04em;line-height:1.15} .cs-claim figcaption{margin-top:12px;font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} / Obrázky v blocích / .cs-gal{display:grid;gap:20px;margin-top:34px} .cs-gal figure{margin:0;border:1px solid var(--rule);background:var(--ink);overflow:hidden} .cs-gal img{width:100%;height:auto;display:block} / Různě tvarované artefakty: jednotný rám a contain, ať se nic neořízne / .cs-gal-3{grid-template-columns:repeat(3,1fr)} .cs-gal-3 figure{background:#F1F1EC;display:flex;align-items:center;justify-content:center} .cs-gal-3 img{aspect-ratio:4/3;object-fit:contain} .cs-gal-sys{grid-template-columns:1fr 1fr} .cs-gal-sys figure{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center} .cs-gal-sys .cs-sign{background:#FFFFFF;padding:6%} .cs-gal-sys .cs-sign img{width:100%;height:100%;object-fit:contain} .cs-gal-sys .cs-phone{background:var(--ink)} .cs-gal-sys .cs-phone img{width:100%;height:100%;object-fit:cover;object-position:top center} / Dlouhý screenshot oříznutý shora, celý se otevře v lightboxu / .cs-gal-web{grid-template-columns:1fr} .cs-shot img{aspect-ratio:16/12;object-fit:cover;object-position:top} / Poznámka pod obrázky / .cs-note{margin-top:14px;font-size:.85rem;color:var(--muted)} / Široký obrázek s popiskem / .cs-wide{margin-top:48px} .cs-wide figure{margin:0;border:1px solid var(--rule);background:var(--ink);color:var(--bg)} .cs-wide img{width:100%;height:auto;aspect-ratio:2037/1373;display:block} .cs-wide figcaption{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,247,.55);padding:14px 18px;border-top:1px solid rgba(250,250,247,.12)} / Výsledek: čísla v mřížce / .cs-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:56px} .cs-result{background:var(--bg);padding:34px 30px} .cs-result .big{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:14px} .cs-result p{color:var(--muted);font-size:.95rem} / Uzavírací věta stojí mimo mřížku, není to čtvrtá metrika / .cs-close{margin-top:36px;font-size:1.1rem;max-width:60ch} .cs-credits{margin-top:30px;font-size:.9rem;color:var(--muted)} .cs-credits a{color:var(--muted);text-decoration:underline;text-underline-offset:3px} .cs-credits a:hover{color:var(--accent)} @media (max-width:900px){ .cs-block{grid-template-columns:1fr;gap:18px;padding:40px 0} .cs-block .n{position:static} .cs-gal-3{grid-template-columns:repeat(2,1fr)} .cs-results{grid-template-columns:1fr} } @media (max-width:640px){ .cs-gal-3,.cs-gal-sys{grid-template-columns:1fr} .cs-shot img{aspect-ratio:4/3} .cs-gal-sys .cs-phone{aspect-ratio:3/4} } / === Lightbox galerie ======================================= K /assets/js/lightbox.js. Overlay vzniká až klikem, JS mu podle tvaru obrázku přidá .lb-cely nebo .lb-dlouhy. / .gal a{display:block;text-decoration:none;color:inherit} .gal a:focus-visible{outline:2px solid var(--accent);outline-offset:3px} / Miniatura / .gal figure{ cursor:zoom-in;overflow:hidden; transition:transform .25s ease, box-shadow .25s ease; } .gal figure:hover{ transform:translateY(-3px); box-shadow:0 12px 32px rgba(10,10,10,.12); } .gal figure img{transition:transform .4s cubic-bezier(.2,.6,.2,1)} .gal figure:hover img{transform:scale(1.03)} .lb{ position:fixed;inset:0;z-index:100; background:rgba(10,10,10,.96); cursor:zoom-out; overscroll-behavior:contain; animation:lb-in .3s ease both; } .lb img{display:block;cursor:default} / Vejde se celý, vycentrovaný / .lb-cely{ display:flex;align-items:center;justify-content:center; padding:5vmin; } .lb-cely img{ max-width:100%;max-height:100%; width:auto;height:auto;object-fit:contain; box-shadow:0 24px 80px rgba(0,0,0,.5); animation:lb-img .4s cubic-bezier(.2,.7,.2,1) both; } / Dlouhý screenshot: plná šířka, scrolluje se / .lb-dlouhy{overflow:auto} .lb-dlouhy img{ max-width:min(1100px,92vw); width:100%;height:auto; margin:5vh auto; box-shadow:0 24px 80px rgba(0,0,0,.5); animation:lb-img .4s cubic-bezier(.2,.7,.2,1) both; } / Křížek: dvě čáry, které se při najetí rozevřou / .lb .x{ position:fixed;top:24px;right:28px;z-index:1; width:44px;height:44px; display:flex;align-items:center;justify-content:center; font-size:0; / schová textový obsah tlačítka / background:none;border:none;cursor:pointer; transition:transform .2s ease; } .lb .x::before, .lb .x::after{ content:"";position:absolute; width:20px;height:1.5px; background:rgba(250,250,247,.6); transition:background .2s ease, width .25s cubic-bezier(.2,.7,.2,1); } .lb .x::before{transform:rotate(45deg)} .lb .x::after{transform:rotate(-45deg)} .lb .x:hover::before, .lb .x:hover::after{ background:var(--accent); width:24px; } @keyframes lb-in{ from{opacity:0} to{opacity:1} } @keyframes lb-img{ from{opacity:0;transform:scale(.97) translateY(8px)} to{opacity:1;transform:scale(1) translateY(0)} } / === Tlačítko zpět nahoru =================================== / .nahoru{ position:fixed;right:32px;bottom:32px;z-index:60; width:52px;height:52px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:transparent; border:1.5px solid var(--accent); color:var(--accent); cursor:pointer; font-size:15px;line-height:1; opacity:0;visibility:hidden; transition:opacity .3s ease, visibility .3s ease, background .2s ease, color .2s ease; } / visibility, ne pointer-events: skryté tlačítko nesmí zůstat v tab pořadí / .nahoru.je-videt{opacity:1;visibility:visible} .nahoru:hover{background:var(--accent);color:var(--ink)} / Jádro: při najetí zmizí / .nahoru::before{ content:""; position:absolute; width:14px;height:14px;border-radius:50%; background:var(--accent); transition:opacity .2s ease; animation:zare 2.8s ease-in-out infinite; } .nahoru:hover::before{opacity:0;animation:none} / Šipka až při najetí / .nahoru span{opacity:0;transition:opacity .2s ease} .nahoru:hover span{opacity:1} @keyframes zare{ 0%,100%{box-shadow:0 0 6px 0 rgba(255,92,43,.45)} 50%{box-shadow:0 0 5px 3px rgba(255,92,43,.75)} } / Tři principy na /studio/ vedle sebe. Pod 900 px se dědí jednosloupec z .flow. / @media (min-width:901px){ .flow-3{grid-template-columns:repeat(3,1fr)} } / Zalamování bez osamělého slova na posledním řádku / .site p, .site .faq summary, .site .flow-step p{text-wrap:pretty} / Ruční zlomy: .d se schová na mobilu, .zlom pod 640 px / @media (max-width:640px){ .d,.zlom{display:none} } / ============================================================ 7) Animace ============================================================ / / --- Náběh obsahu ------------------------------------------- Skrývání zapíná .js-reveal, kterou přidává reveal.js na . Bez JS se neskrývá nic — pravidlo, které skrývá obsah bez téhle podmínky, sem nepatří. Cílem jsou prvky uvnitř sekcí, ne sekce: sekce bývá vyšší než obrazovka a animace by doběhla dřív, než se k obsahu doscrolluje. / @media (prefers-reduced-motion:no-preference){ .js-reveal .naberak{ opacity:0; transform:translateY(18px); } .js-reveal .naberak.je-videt{ opacity:1; transform:none; transition:opacity .55s cubic-bezier(.2,.7,.2,1) var(--zpozdeni,0ms), transform .55s cubic-bezier(.2,.7,.2,1) var(--zpozdeni,0ms); } / Stagger. Třídu .krok-N dává reveal.js podle pořadí prvků, které vjely do záběru naráz — hodnoty jsou tady, ne v JS, aby stránka nepotřebovala inline style (CSP nemusí povolovat 'unsafe-inline'). / .krok-1{--zpozdeni:70ms} .krok-2{--zpozdeni:140ms} .krok-3{--zpozdeni:210ms} .krok-4{--zpozdeni:280ms} .krok-5{--zpozdeni:350ms} } / Mobil se scrolluje švihem: kratší dráha, kratší čas i menší stagger, jinak prvek odjede nahoru dřív, než náběh doběhne. / @media (prefers-reduced-motion:no-preference) and (max-width:900px){ .js-reveal .naberak{transform:translateY(12px)} .js-reveal .naberak.je-videt{ transition:opacity .38s cubic-bezier(.2,.7,.2,1) var(--zpozdeni,0ms), transform .38s cubic-bezier(.2,.7,.2,1) var(--zpozdeni,0ms); } .krok-1{--zpozdeni:45ms} .krok-2{--zpozdeni:90ms} .krok-3{--zpozdeni:135ms} .krok-4{--zpozdeni:180ms} .krok-5{--zpozdeni:225ms} } / --- Intro hera --------------------------------------------- Jediný neinteraktivní pohyb na stránce, proběhne jednou při načtení. Pattern se jen doostří, nerotuje. / @media (prefers-reduced-motion:no-preference){ .js-intro .hero .eyebrow{animation:orbit-prichod .55s cubic-bezier(.2,.7,.2,1) both} .js-intro .hero h1 {animation:orbit-prichod .65s cubic-bezier(.2,.7,.2,1) .09s both} .js-intro .hero .sub {animation:orbit-prichod .65s cubic-bezier(.2,.7,.2,1) .18s both} .js-intro .hero .cs-meta, .js-intro .hero .cta {animation:orbit-prichod .65s cubic-bezier(.2,.7,.2,1) .27s both} .js-intro .hero .scroll{animation:orbit-prichod .6s ease .8s both} .js-intro .hero .orbit {animation:orbit-doostreni 1.4s cubic-bezier(.2,.7,.2,1) both} } @keyframes orbit-prichod{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} } @keyframes orbit-doostreni{ from{opacity:0;transform:scale(.94)} to{opacity:1;transform:none} } / Full hero drží pattern transformem, animace ho nesmí přepsat / .js-intro .hero-full .orbit{animation-name:orbit-doostreni-full} @keyframes orbit-doostreni-full{ from{opacity:0;transform:translateY(-50%) scale(.94)} to{opacity:1;transform:translateY(-50%)} } @media (max-width:640px){ .js-intro .hero-full .orbit{animation-name:orbit-doostreni} } / --- Odezva na akci ---------------------------------------- / .btn:active{transform:translateY(0) scale(.985)} .btn-2:active{opacity:.7} .nahoru:active{transform:scale(.94)} / FAQ: rozbalení přes ::details-content, kde ho prohlížeč umí / @supports (interpolate-size: allow-keywords){ @media (prefers-reduced-motion:no-preference){ html{interpolate-size:allow-keywords} .faq details::details-content{ block-size:0;overflow:hidden; transition:block-size .35s cubic-bezier(.2,.7,.2,1), content-visibility .35s allow-discrete; } .faq details[open]::details-content{block-size:auto} } } / Bez ::details-content aspoň přijede obsah. Zavření zůstane skokem. / @supports not (interpolate-size: allow-keywords){ @media (prefers-reduced-motion:no-preference){ .faq details[open] > :not(summary){ animation:orbit-prichod .3s ease both; } } } /* Otevřený stav otáčí + na ×, proto se znak nemění / .faq summary::after{transition:transform .25s cubic-bezier(.2,.7,.2,1)} .faq details[open] summary::after{content:"+";transform:rotate(45deg)} / Než se obrázek načte, drží místo tepající obdélník / .lb:not(.lb-cely):not(.lb-dlouhy)::after{ content:"";position:absolute;inset:0;margin:auto; width:min(680px,80vw);height:min(440px,52vh); background:rgba(250,250,247,.05); animation:orbit-tep 1.4s ease-in-out infinite; } @keyframes orbit-tep{ 0%,100%{opacity:.4} 50%{opacity:.8} } / Karty práce */ .work-card:hover{border-color:var(--ink);transform:translateY(-2px)} .work-card img{transition:transform .5s cubic-bezier(.2,.7,.2,1)} .work-card:hover img{transform:scale(1.02)}