/* ═══════════════════════════════════════════════════════ TETIFY — design system ═══════════════════════════════════════════════════════ */ /* Náhradní fonty: Arial/Roboto s rozměry přepočtenými na Inter a Inter Tight. Webové fonty se stahují až po prvním vykreslení (main.js), a když se text přepne ze systémového fontu na Inter, díky těmto hodnotám se nic neposune. */ @font-face{ font-family:'Inter Fallback'; src:local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'), local('Roboto-Regular'); size-adjust:102.23%; ascent-override:94.77%; descent-override:23.6%; line-gap-override:0%; } @font-face{ font-family:'Inter Tight Fallback'; src:local('Arial'), local('ArialMT'), local('Helvetica'), local('Roboto'), local('Roboto-Regular'); size-adjust:97.34%; ascent-override:99.52%; descent-override:24.78%; line-gap-override:0%; } :root{ /* brand */ --green: #00e07a; --green-lt: #7cffbe; --green-dk: #009c55; --teal: #00d8c2; /* surfaces */ --bg: #040706; --bg-2: #070c0a; --surface: rgba(255,255,255,.028); --surface-2: rgba(255,255,255,.05); --line: rgba(255,255,255,.075); --line-2: rgba(255,255,255,.14); /* type */ --fg: #e9f2ed; --fg-2: #a9bdb3; --fg-3: #6e837a; --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-dsp: 'Inter Tight', 'Inter Tight Fallback', 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* motion */ --ease: cubic-bezier(.22,1,.36,1); --ease-io: cubic-bezier(.65,0,.35,1); --r: 18px; --r-lg: 26px; --pad: clamp(20px, 5vw, 64px); --maxw: 1240px; } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* overflow-x musí být i na — samotné body iOS Safari ignoruje. clip je lepší než hidden: nevytvoří scroll kontejner, takže position:sticky dál funguje. */ html,body{ overflow-x:hidden; } @supports (overflow:clip){ html,body{ overflow-x:clip; } } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:16px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body.is-locked{ overflow:hidden; } /* height:auto je nutné, protože obrázky mají v HTML width/height (kvůli rezervaci místa). Bez něj by u pravidel, která nastavují jen šířku, zůstala výška z atributu a obrázek by se roztáhl. */ img{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } ul{ margin:0; padding:0; list-style:none; } ::selection{ background:var(--green); color:#04120b; } /* ── scrollbar (native) ── */ ::-webkit-scrollbar{ width:9px; } ::-webkit-scrollbar-track{ background:#050908; } ::-webkit-scrollbar-thumb{ background:rgba(0,224,122,.28); border-radius:9px; } ::-webkit-scrollbar-thumb:hover{ background:rgba(0,224,122,.5); } /* ═══ LAYOUT ═══ */ .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative; z-index:2; } .wrap--narrow{ max-width:900px; } .section{ position:relative; padding:clamp(88px,12vh,150px) 0; z-index:2; } .section--alt::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent,rgba(0,224,122,.028) 22%,rgba(0,224,122,.028) 78%,transparent); border-block:1px solid var(--line); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } /* ═══ AMBIENT ═══ */ .webgl{ position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; display:block; transition:opacity .6s ease; } .grain{ position:fixed; inset:-50%; z-index:3; pointer-events:none; opacity:.4; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); animation:grain 6s steps(6) infinite; mix-blend-mode:overlay; } @keyframes grain{ 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,1%)} } .glow{ position:fixed; border-radius:50%; filter:blur(140px); pointer-events:none; z-index:0; opacity:.5; } .glow--a{ width:56vw; height:56vw; background:radial-gradient(circle,rgba(0,224,122,.32),transparent 68%); top:-22vw; left:-14vw; animation:float1 22s var(--ease-io) infinite; } .glow--b{ width:48vw; height:48vw; background:radial-gradient(circle,rgba(0,216,194,.2),transparent 68%); bottom:-18vw; right:-12vw; animation:float2 27s var(--ease-io) infinite; } @keyframes float1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(8vw,7vh) scale(1.14)} } @keyframes float2{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-9vw,-6vh) scale(1.1)} } /* ═══ CURSOR ═══ */ .cursor{ position:fixed; top:0; left:0; z-index:150; pointer-events:none; mix-blend-mode:difference; opacity:0; transition:opacity .3s; } .cursor.is-on{ opacity:1; } .cursor__dot{ position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff; } .cursor__ring{ position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; border:1px solid rgba(255,255,255,.55); transition:width .3s var(--ease), height .3s var(--ease), margin .3s var(--ease), border-color .3s, background .3s; } .cursor.is-hover .cursor__ring{ width:62px; height:62px; margin:-31px 0 0 -31px; background:rgba(255,255,255,.1); border-color:transparent; } @media (hover:none),(pointer:coarse){ .cursor{ display:none; } } /* ═══ SCROLL PROGRESS ═══ */ .scrollbar{ position:fixed; top:0; left:0; right:0; height:2px; z-index:120; background:transparent; } .scrollbar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--green-dk),var(--green),var(--green-lt)); box-shadow:0 0 14px rgba(0,224,122,.65); } /* ═══ HEADER ═══ */ .header{ position:fixed; top:0; left:0; right:0; z-index:100; transition:transform .5s var(--ease), background .4s, backdrop-filter .4s, border-color .4s; border-bottom:1px solid transparent; } .header.is-stuck{ background:rgba(4,7,6,.72); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border-bottom-color:var(--line); } .header.is-hidden{ transform:translateY(-100%); } .header__inner{ max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:24px; transition:padding .4s var(--ease); } .header.is-stuck .header__inner{ padding-block:11px; } .brand{ display:flex; align-items:flex-end; gap:6px; } .brand__logo{ width:104px; filter:brightness(0) invert(1); transition:filter .35s, transform .5s var(--ease); } .brand:hover .brand__logo{ transform:translateY(-2px); } /* nepoužité: dekorativní tečka za logem. Vrátit lze přidáním do .brand v index.html */ .brand__dot{ width:6px; height:6px; border-radius:50%; background:var(--green); margin-bottom:5px; box-shadow:0 0 12px var(--green); animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{ 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.5); opacity:.55} } .nav{ display:flex; gap:4px; } .nav__link{ position:relative; padding:9px 15px; border-radius:99px; font-size:14.5px; font-weight:450; color:var(--fg-2); overflow:hidden; transition:color .3s; } .nav__link span{ position:relative; z-index:1; display:block; transition:transform .45s var(--ease); } .nav__link::after{ content:''; position:absolute; inset:0; border-radius:99px; background:var(--surface-2); transform:scale(.6); opacity:0; transition:transform .45s var(--ease), opacity .35s; } .nav__link:hover{ color:var(--fg); } .nav__link:hover::after{ transform:scale(1); opacity:1; } .nav__link.is-active{ color:var(--green); } .header__actions{ display:flex; align-items:center; gap:12px; } .burger{ display:none; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); position:relative; } .burger span{ position:absolute; left:12px; width:18px; height:1.5px; background:var(--fg); border-radius:2px; transition:transform .4s var(--ease), opacity .3s, width .4s var(--ease); } .burger span:nth-child(1){ top:18px; } .burger span:nth-child(2){ top:23px; width:13px; } .burger.is-open span:nth-child(1){ transform:translateY(2.5px) rotate(45deg); } .burger.is-open span:nth-child(2){ transform:translateY(-2.5px) rotate(-45deg); width:18px; } /* ═══ MOBILE MENU ═══ */ .menu{ position:fixed; inset:0; z-index:99; pointer-events:none; display:flex; flex-direction:column; justify-content:center; padding:100px var(--pad) 40px; visibility:hidden; transition:visibility .8s; } .menu.is-open{ visibility:visible; } .menu__bg{ position:absolute; inset:0; background:rgba(4,7,6,.96); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); clip-path:circle(0% at 100% 0%); transition:clip-path .8s var(--ease); } .menu.is-open{ pointer-events:auto; } .menu.is-open .menu__bg{ clip-path:circle(150% at 100% 0%); } .menu__nav{ position:relative; display:flex; flex-direction:column; gap:2px; } .menu__link{ font-family:var(--font-dsp); font-size:clamp(30px,8vw,46px); font-weight:600; letter-spacing:-.03em; line-height:1.28; display:flex; align-items:baseline; gap:14px; opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s; } .menu__link em{ font-family:var(--font-mono); font-size:12px; font-style:normal; color:var(--green); opacity:.7; } .menu__link:hover{ color:var(--green); } .menu.is-open .menu__link{ opacity:1; transform:none; } .menu.is-open .menu__link:nth-child(1){ transition-delay:.18s } .menu.is-open .menu__link:nth-child(2){ transition-delay:.24s } .menu.is-open .menu__link:nth-child(3){ transition-delay:.30s } .menu.is-open .menu__link:nth-child(4){ transition-delay:.36s } .menu.is-open .menu__link:nth-child(5){ transition-delay:.42s } .menu.is-open .menu__link:nth-child(6){ transition-delay:.48s } .menu.is-open .menu__link:nth-child(7){ transition-delay:.54s } .menu__foot{ position:relative; margin-top:auto; padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; font-size:14px; color:var(--fg-3); opacity:0; transition:opacity .5s .55s; } .menu.is-open .menu__foot{ opacity:1; } /* ═══ BUTTONS ═══ */ .btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 27px; border-radius:99px; font-size:15px; font-weight:500; letter-spacing:-.01em; overflow:hidden; white-space:nowrap; isolation:isolate; transition:transform .35s var(--ease), color .3s, border-color .3s, box-shadow .4s; will-change:transform; } .btn svg{ position:relative; z-index:2; transition:transform .4s var(--ease); } .btn span{ position:relative; z-index:2; } .btn:hover svg{ transform:translateX(4px); } .btn--sm{ padding:11px 20px; font-size:14px; } .btn--full{ width:100%; } .btn--primary{ color:#04120b; background:var(--green); box-shadow:0 6px 30px -8px rgba(0,224,122,.6); } .btn--primary::before{ content:''; position:absolute; inset:0; z-index:1; background:linear-gradient(115deg,var(--green-lt),var(--teal)); opacity:0; transition:opacity .4s var(--ease); } .btn--primary:hover{ box-shadow:0 12px 44px -8px rgba(0,224,122,.75); } .btn--primary:hover::before{ opacity:1; } .btn--ghost{ color:var(--fg); border:1px solid var(--line-2); background:rgba(255,255,255,.02); } .btn--ghost::before{ content:''; position:absolute; inset:0; z-index:1; background:var(--green); transform:translateY(101%); transition:transform .5s var(--ease); } .btn--ghost:hover{ color:#04120b; border-color:var(--green); } .btn--ghost:hover::before{ transform:translateY(0); } /* ═══ SHARED BITS ═══ */ .eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:20px; } .eyebrow i{ width:22px; height:1px; background:currentColor; opacity:.6; display:block; } .shead{ max-width:800px; margin:0 auto clamp(46px,6vw,72px); text-align:center; } .shead--left{ text-align:left; margin-inline:0; } .shead__title{ font-family:var(--font-dsp); font-weight:600; letter-spacing:-.035em; line-height:1.08; font-size:clamp(31px,5vw,56px); margin:0 0 20px; text-wrap:balance; } /* Zvýrazněná slova měla gradient přes background-clip:text, tedy průhledný text s barevným podkladem. Když ho prohlížeč nevykreslí (Safari to u víceřádkových inline prvků dělá), text úplně zmizí. Plná barva se vykreslí vždycky. */ .shead__title em{ font-style:normal; color:var(--green-lt); } .shead__lead{ font-size:clamp(16px,1.6vw,18.5px); color:var(--fg-2); margin:0; } /* ═══ HERO ═══ */ .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:130px var(--pad) 110px; z-index:2; } .hero::before{ content:''; position:absolute; z-index:1; pointer-events:none; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1150px,100%); height:min(760px,95%); background:radial-gradient(ellipse at center, rgba(4,7,6,.88) 0%, rgba(4,7,6,.72) 38%, rgba(4,7,6,.32) 62%, transparent 78%); } .hero__content{ position:relative; z-index:2; max-width:920px; width:100%; } .scrollcue{ z-index:2; } .hero__title{ font-family:var(--font-dsp); font-weight:600; font-size:clamp(40px,7.6vw,88px); line-height:1.02; letter-spacing:-.045em; margin:0 0 26px; text-wrap:balance; } .hero__title em{ font-style:normal; color:var(--green-lt); } .hero__lead{ font-size:clamp(16px,1.9vw,20px); color:var(--fg-2); max-width:640px; margin:0 auto 38px; text-wrap:pretty; } .hero__cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } .hero__marks{ margin-top:clamp(52px,8vh,86px); } .hero__marksLabel{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3); margin-bottom:16px; } .hero__marksList{ display:flex; align-items:center; justify-content:center; gap:clamp(22px,4vw,46px); flex-wrap:wrap; } .scrollcue{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-3); } .scrollcue__line{ width:1px; height:46px; background:var(--line-2); position:relative; overflow:hidden; } .scrollcue__line i{ position:absolute; top:0; left:0; width:100%; height:16px; background:var(--green); animation:cue 2.1s var(--ease-io) infinite; } @keyframes cue{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(300%)} } /* ═══ MARQUEE ═══ */ .marquee{ position:relative; z-index:2; padding:20px 0; overflow:hidden; border-block:1px solid var(--line); background:rgba(4,7,6,.5); backdrop-filter:blur(6px); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marquee__track{ display:flex; width:max-content; animation:scroll 42s linear infinite; } .marquee:hover .marquee__track{ animation-play-state:paused; } .marquee__group{ display:flex; align-items:center; gap:30px; padding-right:30px; } .marquee__group span{ font-family:var(--font-dsp); font-size:clamp(16px,2.1vw,24px); font-weight:500; letter-spacing:-.02em; color:var(--fg-3); white-space:nowrap; transition:color .3s; } .marquee__group span:hover{ color:var(--green); } .marquee__group i{ color:var(--green); font-size:9px; opacity:.55; } @keyframes scroll{ to{ transform:translateX(-50%) } } /* ═══ SPOTLIGHT (shared hover glow) ═══ */ .spotlight{ position:relative; overflow:hidden; } .spotlight::before{ content:''; position:absolute; inset:0; z-index:0; opacity:0; transition:opacity .45s; background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(0,224,122,.13), transparent 62%); } .spotlight:hover::before{ opacity:1; } .spotlight::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; pointer-events:none; padding:1px; opacity:0; transition:opacity .45s; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(0,224,122,.75), transparent 60%); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; } .spotlight:hover::after{ opacity:1; } /* ═══ CARDS ═══ */ .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .card{ padding:32px 28px 30px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); backdrop-filter:blur(10px); transition:transform .55s var(--ease), border-color .45s, background .45s; will-change:transform; } .card > *{ position:relative; z-index:2; } .card:hover{ transform:translateY(-6px); background:var(--surface-2); } .card--accent{ background:linear-gradient(165deg,rgba(0,224,122,.09),rgba(255,255,255,.02)); border-color:rgba(0,224,122,.22); } /* ═══ MIKRO-SCÉNY V KARTÁCH SLUŽEB ═══ Každá scéna se rozehraje dvakrát: jednou sama při najetí do obrazu (.is-demo přidá JS na ~2,2 s) a pak vždy při najetí myší. */ .card--scene{ padding-top:0; } .scene{ position:relative; height:150px; margin:0 -29px 24px; overflow:hidden; border-bottom:1px solid var(--line); background:radial-gradient(120% 100% at 50% 0%,rgba(0,224,122,.075),transparent 70%); transition:background .6s var(--ease); } .card--scene:hover .scene, .card--scene.is-demo .scene{ background:radial-gradient(120% 100% at 50% 0%,rgba(0,224,122,.15),transparent 70%); } /* scény mají pevnou šířku, ať vypadají stejně v úzké i široké kartě */ .s1,.s2,.s3,.s4{ position:absolute; top:0; bottom:0; left:50%; width:290px; margin-left:-145px; } .s5{ position:absolute; top:50%; left:50%; width:290px; transform:translate(-50%,-50%); } /* ── S1 · produkty: rozházené vrstvy se srovnají do stohu ── */ .s1{ display:grid; place-items:center; } .s1 i{ position:absolute; width:104px; height:66px; border-radius:9px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); transition:transform 1.1s cubic-bezier(.16,1,.3,1), border-color .6s, background .6s; } .s1 i:nth-child(1){ transform:translate(-30px,14px) rotate(-9deg); } .s1 i:nth-child(2){ transform:rotate(3deg); } .s1 i:nth-child(3){ transform:translate(30px,-14px) rotate(8deg); } .card--scene:hover .s1 i:nth-child(1),.card--scene.is-demo .s1 i:nth-child(1){ transform:translate(0,10px); } .card--scene:hover .s1 i:nth-child(2),.card--scene.is-demo .s1 i:nth-child(2){ transform:none; } .card--scene:hover .s1 i:nth-child(3),.card--scene.is-demo .s1 i:nth-child(3){ transform:translate(0,-10px); border-color:rgba(0,224,122,.55); background:rgba(0,224,122,.11); } /* ── S2 · interní systémy: úkoly se samy odbaví ── */ .s2{ display:flex; flex-direction:column; justify-content:center; gap:13px; padding:0 34px; } .s2__row{ display:flex; align-items:center; gap:11px; } .s2__row i{ position:relative; flex:0 0 auto; width:15px; height:15px; border-radius:5px; border:1px solid var(--line-2); transition:background .5s var(--ease), border-color .5s; } .s2__row i::after{ content:''; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #04120b; border-width:0 1.6px 1.6px 0; transform:rotate(45deg) scale(0); transition:transform .45s cubic-bezier(.34,1.56,.64,1); } .s2__row b{ display:block; height:5px; border-radius:3px; width:var(--w,40%); background:rgba(255,255,255,.11); transition:width 1s cubic-bezier(.16,1,.3,1), background .6s; } .card--scene:hover .s2__row i,.card--scene.is-demo .s2__row i{ background:var(--green); border-color:var(--green); } .card--scene:hover .s2__row i::after,.card--scene.is-demo .s2__row i::after{ transform:rotate(45deg) scale(1); } .card--scene:hover .s2__row b,.card--scene.is-demo .s2__row b{ width:100%; background:linear-gradient(90deg,var(--green),var(--teal)); } .s2__row:nth-child(2) i,.s2__row:nth-child(2) i::after,.s2__row:nth-child(2) b{ transition-delay:.13s } .s2__row:nth-child(3) i,.s2__row:nth-child(3) i::after,.s2__row:nth-child(3) b{ transition-delay:.26s } /* ── S3 · AI: data padají do jádra, které jim rozumí ── */ .s3{ display:grid; place-items:center; } .s3__core{ width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#bfffe0,var(--green) 45%,rgba(0,168,92,.5)); box-shadow:0 0 34px rgba(0,224,122,.45); transition:transform 1s cubic-bezier(.16,1,.3,1), box-shadow .7s; } .card--scene:hover .s3__core,.card--scene.is-demo .s3__core{ transform:scale(1.1); box-shadow:0 0 52px rgba(0,224,122,.7); } .s3 u{ position:absolute; width:46px; height:46px; border-radius:50%; border:1px solid rgba(0,224,122,.35); opacity:0; animation:s3ring 3.4s cubic-bezier(.16,1,.3,1) infinite; } .s3 u:nth-child(2){ animation-delay:1.13s } .s3 u:nth-child(3){ animation-delay:2.26s } @keyframes s3ring{ 0%{ transform:scale(1); opacity:.7 } 100%{ transform:scale(3); opacity:0 } } .s3 b{ position:absolute; padding:3px 8px; border-radius:6px; font-family:var(--font-mono); font-size:9px; font-weight:400; color:var(--fg-2); border:1px solid var(--line-2); background:rgba(10,16,13,.85); transition:transform 1s cubic-bezier(.16,1,.3,1), opacity .7s; } .s3 b:nth-of-type(1){ left:12px; top:30px } .s3 b:nth-of-type(2){ right:14px; top:38px } .s3 b:nth-of-type(3){ left:36px; bottom:26px } .card--scene:hover .s3 b:nth-of-type(1),.card--scene.is-demo .s3 b:nth-of-type(1){ transform:translate(58px,26px); opacity:.2 } .card--scene:hover .s3 b:nth-of-type(2),.card--scene.is-demo .s3 b:nth-of-type(2){ transform:translate(-56px,14px); opacity:.2 } .card--scene:hover .s3 b:nth-of-type(3),.card--scene.is-demo .s3 b:nth-of-type(3){ transform:translate(30px,-32px); opacity:.2 } /* ── S4 · migrace: e-shop přejede na druhou platformu ── */ .s4{ display:flex; align-items:center; justify-content:center; gap:14px; } .s4 em{ font-family:var(--font-mono); font-style:normal; font-size:10px; letter-spacing:.06em; padding:6px 11px; border-radius:8px; border:1px solid var(--line); color:var(--fg-3); } .s4 em:last-of-type{ color:var(--green); border-color:rgba(0,224,122,.35); background:rgba(0,224,122,.09); } .s4__rail{ position:relative; width:82px; height:2px; border-radius:2px; background:rgba(255,255,255,.12); } .s4__fill{ position:absolute; inset:0; width:0%; border-radius:2px; background:linear-gradient(90deg,var(--green),var(--teal)); transition:width 1.2s cubic-bezier(.16,1,.3,1); } .card--scene:hover .s4__fill,.card--scene.is-demo .s4__fill{ width:100%; } .s4__box{ position:absolute; top:50%; left:0; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:6px; border:1px solid rgba(0,224,122,.6); background:rgba(0,224,122,.16); box-shadow:0 6px 18px -6px rgba(0,224,122,.8); transition:transform 1.2s cubic-bezier(.16,1,.3,1); } .card--scene:hover .s4__box,.card--scene.is-demo .s4__box{ transform:translateX(82px) rotate(180deg); } /* ── S5 · integrace: systémy se propojí ── */ .s5__link path{ fill:none; stroke:rgba(0,224,122,.65); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1s cubic-bezier(.16,1,.3,1); } .card--scene:hover .s5__link path,.card--scene.is-demo .s5__link path{ stroke-dashoffset:0; } .s5__link path:nth-child(2){ transition-delay:.1s } .s5__link path:nth-child(3){ transition-delay:.2s } .s5__link path:nth-child(4){ transition-delay:.3s } .s5__node circle{ fill:rgba(255,255,255,.06); stroke:var(--line-2); stroke-width:1; transition:fill .6s var(--ease), stroke .6s; } .card--scene:hover .s5__node circle,.card--scene.is-demo .s5__node circle{ fill:rgba(0,224,122,.2); stroke:rgba(0,224,122,.7); } .s5__node circle:nth-child(2){ transition-delay:.1s } .s5__node circle:nth-child(3){ transition-delay:.2s } .s5__node circle:nth-child(4){ transition-delay:.3s } .s5__hub{ fill:rgba(0,224,122,.14); stroke:rgba(0,224,122,.55); stroke-width:1.4; transition:transform .9s cubic-bezier(.16,1,.3,1); transform-origin:150px 65px; } .card--scene:hover .s5__hub,.card--scene.is-demo .s5__hub{ transform:scale(1.14); } /* ── S6 · IT podpora: štít se prosvítí a potvrdí ── */ .s6{ position:absolute; inset:0; display:grid; place-items:center; } .s6 svg{ width:76px; height:88px; overflow:visible; } .s6__outline{ fill:rgba(0,224,122,.05); stroke:rgba(0,224,122,.45); stroke-width:2; stroke-linejoin:round; transition:fill .7s, stroke .7s; } .card--scene:hover .s6__outline,.card--scene.is-demo .s6__outline{ fill:rgba(0,224,122,.13); stroke:var(--green); } .s6__chk{ fill:none; stroke:var(--green); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:34; stroke-dashoffset:34; opacity:0; transition:stroke-dashoffset .7s cubic-bezier(.16,1,.3,1) .45s, opacity .2s .45s; } .card--scene:hover .s6__chk,.card--scene.is-demo .s6__chk{ stroke-dashoffset:0; opacity:1; } .s6__scan{ position:absolute; left:50%; top:26px; width:104px; margin-left:-52px; height:2px; background:linear-gradient(90deg,transparent,var(--green),transparent); box-shadow:0 0 16px rgba(0,224,122,.9); opacity:0; } .card--scene:hover .s6__scan,.card--scene.is-demo .s6__scan{ animation:s6scan 1.1s cubic-bezier(.16,1,.3,1); } @keyframes s6scan{ 0%{ opacity:0; transform:translateY(0) } 15%,70%{ opacity:1 } 100%{ opacity:0; transform:translateY(72px) } } /* ── S7 · marketing: dosah roste (široká karta) ── */ .scene--wide{ height:118px; width:186px; margin:0; flex:0 0 auto; border-bottom:0; border-radius:16px; border:1px solid var(--line); display:grid; place-items:center; } .s7{ width:150px; height:auto; overflow:visible; } .s7__ghost{ fill:none; stroke:rgba(255,255,255,.13); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .s7__area{ fill:rgba(0,224,122,.14); opacity:0; transition:opacity .9s var(--ease) .25s; } .card--scene:hover .s7__area,.card--scene.is-demo .s7__area{ opacity:1; } .s7__line{ fill:none; stroke:var(--green); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:230; stroke-dashoffset:230; transition:stroke-dashoffset 1.3s cubic-bezier(.16,1,.3,1); } .card--scene:hover .s7__line,.card--scene.is-demo .s7__line{ stroke-dashoffset:0; } .s7__dot{ fill:var(--green); opacity:0; transform-origin:166px 12px; transition:opacity .4s .95s, transform .6s cubic-bezier(.34,1.56,.64,1) .95s; transform:scale(0); } .card--scene:hover .s7__dot,.card--scene.is-demo .s7__dot{ opacity:1; transform:scale(1); } .card__title{ font-family:var(--font-dsp); font-size:20px; font-weight:600; letter-spacing:-.02em; margin:0 0 10px; } .card__text{ font-size:15px; color:var(--fg-2); margin:0 0 20px; } /* wide "featured service" band — spans the whole grid row */ .card--wide{ grid-column:1 / -1; padding-top:clamp(20px,3vw,40px); display:grid; grid-template-columns:auto 1fr minmax(170px,240px); gap:clamp(20px,3vw,40px); align-items:center; background:linear-gradient(120deg,rgba(0,224,122,.085),rgba(255,255,255,.022)); border-color:rgba(0,224,122,.2); } .card--wide .card__title{ margin-bottom:9px; } .card--wide .card__text{ margin-bottom:0; max-width:62ch; } .card--wide .card__tags{ justify-content:flex-end; } .card__tags{ display:flex; flex-wrap:wrap; gap:7px; } .card__tags li{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; padding:5px 10px; border-radius:7px; border:1px solid var(--line); color:var(--fg-3); background:rgba(255,255,255,.02); transition:color .3s, border-color .3s; } .card:hover .card__tags li{ color:var(--fg-2); border-color:var(--line-2); } /* ═══ PRODUCTS ═══ */ .products{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .product{ position:relative; display:flex; flex-direction:column; min-height:290px; padding:30px 28px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); backdrop-filter:blur(10px); transition:transform .55s var(--ease), border-color .45s, background .45s; will-change:transform; } .product > *{ position:relative; z-index:2; } .product:hover{ transform:translateY(-6px); background:var(--surface-2); } .product__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; } .product__brand{ display:flex; align-items:center; gap:11px; min-width:0; } .product__logo{ width:26px; height:26px; object-fit:contain; flex:0 0 auto; filter:brightness(0) invert(1); opacity:.92; transition:transform .5s var(--ease); } .product:hover .product__logo{ transform:rotate(-6deg) scale(1.1); } .product__name{ font-family:var(--font-dsp); font-size:30px; font-weight:700; letter-spacing:-.045em; } .product__name em{ font-style:normal; color:var(--green); } .product__badge{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border-radius:99px; color:var(--green); border:1px solid rgba(0,224,122,.3); background:rgba(0,224,122,.09); } .product__text{ font-size:15px; color:var(--fg-2); margin:0 0 auto; max-width:34ch; } .product__foot{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; font-size:14px; font-weight:500; color:var(--green); } .product__foot svg{ transition:transform .4s var(--ease); } .product:hover .product__foot svg{ transform:translate(3px,-3px); } .product--cta{ background:linear-gradient(165deg,rgba(0,224,122,.1),rgba(255,255,255,.02)); border-color:rgba(0,224,122,.2); } .product--cta .btn{ margin-top:24px; align-self:flex-start; } /* ═══ CLIENT LOGOS ═══ */ .cl{ width:auto; opacity:.55; flex:0 0 auto; filter:brightness(0) invert(1); transition:opacity .4s var(--ease), transform .5s var(--ease), filter .4s; } .cl:hover{ opacity:1; transform:translateY(-3px); } /* Na úzkém displeji se 7 log nevejde na řádek a poslední zůstávalo osamocené. Tenhle prvek je jinak neviditelný a na mobilu rozdělí řadu na 4 + 3. */ .cl-br{ display:none; } .cl--cot{ height:38px; } .cl--waca{ height:40px; } .cl--fleysen{ height:22px; } .cl--theis{ height:31px; } .cl--pokis{ height:34px; } .cl--blaho{ height:24px; } .cl--glowly{ height:25px; } /* ═══ CASE STUDIES ═══ */ .cases{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .case{ position:relative; padding:30px 28px 28px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); backdrop-filter:blur(10px); transition:transform .55s var(--ease), border-color .45s, background .45s; will-change:transform; } .case > *{ position:relative; z-index:2; } .case:hover{ transform:translateY(-6px); background:var(--surface-2); } .case--hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,52px); align-items:center; margin-bottom:18px; padding:clamp(30px,3.6vw,44px); background:linear-gradient(150deg,rgba(0,224,122,.075),rgba(255,255,255,.022)); border-color:rgba(0,224,122,.2); } .case--hero .case__body > *{ position:relative; z-index:2; } .case__head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .case__logo{ flex:0 0 auto; width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:rgba(255,255,255,.055); border:1px solid var(--line); transition:background .4s, border-color .4s, transform .5s var(--ease); } .case__logo img{ max-width:30px; max-height:26px; width:auto; height:auto; filter:brightness(0) invert(1); opacity:.9; } .case__logo img[src*="cot"]{ max-width:28px; max-height:30px; } .case__logo img[src*="waca"]{ max-width:33px; max-height:30px; } .case__logo img[src*="fleysen"]{ max-width:36px; max-height:15px; } .case__logo img[src*="blaho"]{ max-width:34px; max-height:12px; } .case:hover .case__logo{ background:rgba(0,224,122,.13); border-color:rgba(0,224,122,.3); transform:scale(1.05); } .case__client{ display:flex; flex-direction:column; gap:2px; min-width:0; font-family:var(--font-dsp); font-size:16px; font-weight:600; letter-spacing:-.015em; } .case__client em{ font-family:var(--font-mono); font-style:normal; font-size:10.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--green); } .case__title{ font-family:var(--font-dsp); font-weight:500; letter-spacing:-.028em; line-height:1.22; font-size:clamp(19px,2.1vw,24px); margin:0 0 13px; text-wrap:balance; transition:color .4s; } .case--hero .case__title{ font-size:clamp(22px,2.7vw,32px); margin-bottom:16px; } .case:hover .case__title{ color:var(--green-lt); } .case__text{ font-size:15px; color:var(--fg-2); margin:0 0 14px; text-wrap:pretty; } .case--hero .case__text{ font-size:15.5px; } .case__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; } .case__tags li{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; padding:5px 10px; border-radius:7px; border:1px solid var(--line); color:var(--fg-3); background:rgba(255,255,255,.02); transition:color .3s, border-color .3s; } .case:hover .case__tags li{ color:var(--fg-2); border-color:var(--line-2); } .case__link{ display:inline-flex; align-items:center; gap:7px; margin-top:18px; font-size:13.5px; font-weight:500; color:var(--green); } .case__link svg{ transition:transform .4s var(--ease); } .case__link:hover svg{ transform:translate(3px,-3px); } /* ═══ MOCKUPY PROJEKTŮ ═══ Každý mockup je v reálném designu daného projektu (barvy, fonty a UI převzaté z jejich webu), ne v barvách Tetify. Rozehrají se, když karta dostane .is-in. */ .case__viz{ position:relative; } .case__shot{ position:relative; height:236px; margin:-31px -29px 24px; overflow:hidden; border-bottom:1px solid var(--line); } .case__shot > *{ position:absolute; inset:0; } .cases + .case--hero{ margin:18px 0 0; } .case--rev{ grid-template-columns:.95fr 1.05fr; } /* sdílené: značka ČOV jako v jejich aplikacích */ .covmark{ display:inline-flex; align-items:center; gap:6px; } .covmark img{ width:16px; height:20px; } .covmark b{ font-size:6.4px; line-height:1.08; font-weight:800; letter-spacing:.05em; color:#1a1a2e; } /* ── ČOV Podpora · helpdesk (DM Sans, olympijské barvy) ── */ .mcov{ position:relative; border-radius:20px; overflow:hidden; padding:46px 38px; background:#fff; color:#1a1a2e; font-family:'DM Sans',var(--font); line-height:1.35; letter-spacing:normal; box-shadow:0 30px 70px -34px rgba(0,0,0,.9); } .mcov__dust{ position:absolute; inset:0; width:100%; height:100%; } .mcov__dust g{ transform-origin:230px 200px; animation:covBreath 7s ease-in-out infinite; } @keyframes covBreath{ 0%,100%{ transform:scale(1); opacity:.85 } 50%{ transform:scale(1.035); opacity:1 } } .mcov__app{ position:relative; z-index:1; overflow:hidden; border-radius:16px; background:rgba(255,255,255,.94); border:1px solid #e5e7eb; box-shadow:0 16px 40px -18px rgba(26,26,46,.35); } .mcov__top{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-bottom:1px solid #eef0f3; } .mcov__title{ font-size:14px; font-weight:800; letter-spacing:-.015em; padding-left:11px; border-left:1px solid #e5e7eb; } .mcov__new{ margin-left:auto; font-size:10.5px; font-weight:700; color:#fff; padding:6px 11px; border-radius:10px; background:linear-gradient(135deg,#0081c8,#0068a3); white-space:nowrap; } .mcov__tabs{ display:flex; gap:3px; padding:9px 12px 3px; } .mcov__tabs span{ font-size:10.5px; font-weight:500; color:#6b7280; padding:5px 9px; border-radius:8px; } .mcov__tabs .is-on{ background:#eff6ff; color:#0068a3; font-weight:700; } .mcov__tabs i{ font-style:normal; font-size:9.5px; background:#e5e7eb; color:#374151; border-radius:99px; padding:0 6px; margin-left:3px; } .mcov__rows{ padding:5px 7px 7px; } .mcov__row{ display:grid; grid-template-columns:30px 1fr auto 16px; gap:10px; align-items:center; padding:8px 7px; border-radius:10px; opacity:0; transform:translateY(10px); } .is-in .mcov__row{ animation:covIn .7s var(--ease) forwards; } .is-in .mcov__row:nth-child(2){ animation-delay:.14s } .is-in .mcov__row:nth-child(3){ animation-delay:.28s } .is-in .mcov__row:nth-child(4){ animation-delay:.42s; animation-name:covInDone; } @keyframes covIn{ to{ opacity:1; transform:none } } @keyframes covInDone{ to{ opacity:.55; transform:none } } .mcov__ch{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; } .mcov__ch svg{ width:15px; height:15px; } .mcov__ch--slack{ background:#f4ecf5; color:#611f69; } .mcov__ch--mail{ background:#e6f3fa; color:#0081c8; } .mcov__ch--web{ background:#e7f6ed; color:#00a651; } .mcov__txt{ display:flex; flex-direction:column; gap:1px; min-width:0; } .mcov__txt b{ font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mcov__txt em{ font-style:normal; font-size:10px; color:#9ca3af; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mcov__st{ font-size:9.5px; font-weight:700; padding:4px 9px; border-radius:99px; white-space:nowrap; } .mcov__st--new{ background:#0081c8; color:#fff; } .mcov__st--wip{ background:#fff4e0; color:#b45309; } .mcov__st--done{ background:#e9f9ef; color:#15803d; } .mcov__sync{ color:#f06a6a; display:grid; place-items:center; } .mcov__sync svg{ width:13px; height:13px; } .is-in .mcov__sync svg{ animation:covSync 1.1s var(--ease) 1; } .is-in .mcov__row:nth-child(2) .mcov__sync svg{ animation-delay:.2s } .is-in .mcov__row:nth-child(3) .mcov__sync svg{ animation-delay:.4s } @keyframes covSync{ to{ transform:rotate(360deg) } } .mcov__foot{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; padding:10px 13px; border-top:1px solid #eef0f3; background:#fafbfc; } .mcov__src{ font-size:9.5px; font-weight:500; color:#6b7280; border:1px solid #e5e7eb; border-radius:99px; padding:3px 9px; background:#fff; } .mcov__to{ color:#0081c8; font-weight:700; font-size:12px; } .mcov__asana{ display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:700; color:#e8565a; background:#fff1f1; border:1px solid #ffd4d4; border-radius:99px; padding:3px 9px; } .mcov__asana svg{ width:10px; height:10px; animation:covSync 3s linear infinite; } .mcov__pw{ margin-left:auto; font-size:9.5px; color:#9ca3af; } .mcov__pw b{ color:#16a34a; font-weight:800; } /* ── ČOV Onboarding (skleněné karty, přístupový kód) ── */ .monb{ background:#eef1f5; font-family:'DM Sans',var(--font); color:#111827; line-height:1.3; letter-spacing:normal; display:grid; place-items:center; } .monb__blob{ position:absolute; width:230px; height:230px; border-radius:50%; filter:blur(42px); opacity:.8; } .monb__blob--a{ background:#9ec5ef; top:-100px; left:-70px; } .monb__blob--b{ background:#f7cfb3; top:-80px; right:-80px; } .monb__card{ position:relative; width:min(300px,86%); padding:12px 13px; border-radius:16px; background:rgba(255,255,255,.74); border:1px solid rgba(255,255,255,.95); box-shadow:0 18px 40px -22px rgba(17,24,39,.4); backdrop-filter:blur(10px); } .monb__head{ display:flex; gap:9px; align-items:center; margin-bottom:9px; } .monb__ico{ flex:0 0 auto; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#0081c8,#0068a3); } .monb__ico svg{ width:15px; height:15px; } .monb__head b{ display:block; font-size:12.5px; font-weight:700; } .monb__head em{ display:block; font-style:normal; font-size:9.5px; color:#6b7280; } .monb__code{ font-family:ui-monospace,'JetBrains Mono',monospace; font-weight:700; font-size:12.5px; letter-spacing:.2em; text-align:center; padding:6px; border-radius:10px; background:#fff; border:1px solid #e5e7eb; margin-bottom:8px; } .monb__list{ display:grid; gap:4px; } .monb__list li{ display:flex; align-items:center; gap:7px; font-size:10.5px; color:#6b7280; transition:color .4s; } .monb__list i{ flex:0 0 auto; width:14px; height:14px; border-radius:5px; border:1.5px solid #cbd5e1; display:grid; place-items:center; color:#fff; transition:background .4s, border-color .4s; } .monb__list i svg{ width:9px; height:9px; transform:scale(0); transition:transform .45s cubic-bezier(.34,1.56,.64,1); } .is-in .monb__list li{ color:#111827; } .is-in .monb__list i{ background:#0081c8; border-color:#0081c8; } .is-in .monb__list i svg{ transform:scale(1); } .monb__list li:nth-child(1), .monb__list li:nth-child(1) i, .monb__list li:nth-child(1) i svg{ transition-delay:.5s } .monb__list li:nth-child(2), .monb__list li:nth-child(2) i, .monb__list li:nth-child(2) i svg{ transition-delay:.75s } .monb__list li:nth-child(3), .monb__list li:nth-child(3) i, .monb__list li:nth-child(3) i svg{ transition-delay:1s } .monb__list li:nth-child(4), .monb__list li:nth-child(4) i, .monb__list li:nth-child(4) i svg{ transition-delay:1.25s } .monb__list li:nth-child(5), .monb__list li:nth-child(5) i, .monb__list li:nth-child(5) i svg{ transition-delay:1.5s } /* ── ČOV Podatelna ── */ .mpod{ background:#f3f4f7; font-family:'DM Sans',var(--font); color:#1a1a2e; line-height:1.3; letter-spacing:normal; } .mpod__blob{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.75; } .mpod__blob--a{ width:200px; height:200px; background:#a8d8cc; top:-70px; left:-60px; } .mpod__blob--b{ width:180px; height:180px; background:#cbbbe9; bottom:-80px; right:10%; } .mpod__blob--c{ width:160px; height:160px; background:#f2c4b3; bottom:-60px; right:-50px; } .mpod__in{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:12px; } .mpod__in .covmark{ margin-bottom:6px; } .mpod__title{ font-size:17px; font-weight:800; letter-spacing:-.02em; } .mpod__sub{ font-size:9.5px; color:#6b7280; margin:1px 0 9px; } .mpod__card{ width:min(270px,86%); display:grid; grid-template-columns:30px 1fr auto; gap:9px; align-items:center; padding:9px 10px; border-radius:14px; background:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.95); box-shadow:0 14px 30px -18px rgba(26,26,46,.4); backdrop-filter:blur(8px); } .mpod__tile{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#2f7fd1,#1d5fae); } .mpod__tile svg{ width:15px; height:15px; } .mpod__file{ min-width:0; } .mpod__file b{ display:block; font-size:10.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mpod__bar{ display:block; height:4px; border-radius:3px; background:#e5e7eb; margin-top:5px; overflow:hidden; } .mpod__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,#0081c8,#00a651); transition:width 1.5s cubic-bezier(.16,1,.3,1) .4s; } .is-in .mpod__bar i{ width:100%; } .mpod__ok{ display:inline-flex; align-items:center; gap:3px; font-size:9px; font-weight:700; color:#15803d; background:#e9f9ef; border-radius:99px; padding:3px 7px; opacity:0; transform:scale(.7); transition:opacity .35s 1.7s, transform .5s cubic-bezier(.34,1.56,.64,1) 1.7s; } .mpod__ok svg{ width:9px; height:9px; } .is-in .mpod__ok{ opacity:1; transform:none; } .mpod__btn{ margin-top:10px; font-size:10.5px; font-weight:700; color:#fff; padding:7px 15px; border-radius:12px; background:linear-gradient(135deg,#1a1a2e,#16213e); } /* ── WACA · konfigurátor (periwinkle, bílá krabička, růžová) ── */ .mwaca{ background:#a2b7de; font-family:'Inter',var(--font); color:#1d1d1f; line-height:1.3; letter-spacing:normal; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; } .mwaca__wm{ position:absolute; inset:-30%; display:flex; justify-content:space-around; align-items:center; transform:rotate(-16deg); opacity:.16; pointer-events:none; } .mwaca__wm span{ font-weight:800; font-size:30px; line-height:.88; letter-spacing:-.04em; color:#fff; } .mwaca__stage{ position:relative; height:100%; display:grid; place-items:center; perspective:720px; } .wbox{ position:relative; z-index:1; transform-style:preserve-3d; transform:rotateX(-26deg) rotateY(38deg); transition:transform 1.3s cubic-bezier(.16,1,.3,1); } .case:hover .wbox{ transform:rotateX(-20deg) rotateY(20deg); } .wbox__cube{ --w:96px; --d:66px; --h:42px; position:relative; width:var(--w); height:var(--h); transform-style:preserve-3d; } .wbox__f{ position:absolute; background:#fff; box-shadow:inset 0 0 0 1px rgba(29,29,31,.07); } .wbox__f--front{ width:var(--w); height:var(--h); transform:translateZ(calc(var(--d) / 2)); } .wbox__f--back{ width:var(--w); height:var(--h); background:#dfe3ee; transform:rotateY(180deg) translateZ(calc(var(--d) / 2)); } .wbox__f--right{ width:var(--d); height:var(--h); left:calc((var(--w) - var(--d)) / 2); background:#e9ecf4; transform:rotateY(90deg) translateZ(calc(var(--w) / 2)); } .wbox__f--left{ width:var(--d); height:var(--h); left:calc((var(--w) - var(--d)) / 2); background:#e2e6f0; transform:rotateY(-90deg) translateZ(calc(var(--w) / 2)); } .wbox__f--bottom{ width:var(--w); height:var(--d); top:calc((var(--h) - var(--d)) / 2); background:#d4d9e7; transform:rotateX(-90deg) translateZ(calc(var(--h) / 2)); } .wbox__hinge{ position:absolute; left:0; top:0; width:var(--w); height:0; transform:translateZ(calc(var(--d) / -2)); transform-style:preserve-3d; } /* Víko visí na zadní horní hraně. rotateX(90deg) = zavřené (leží vodorovně směrem dopředu); otevírá se k VYŠŠÍM úhlům — volný okraj jde nahoru a přes svislou polohu (180deg) dozadu. Úhly pod 90 by ho poslaly dovnitř krabice. */ .wbox__lid{ position:absolute; left:0; top:0; width:var(--w); height:var(--d); transform-style:preserve-3d; transform-origin:top center; transform:rotateX(90deg); transition:transform 1.4s cubic-bezier(.16,1,.3,1) .3s; } .wbox__lid-out,.wbox__lid-in{ position:absolute; inset:0; backface-visibility:hidden; box-shadow:inset 0 0 0 1px rgba(29,29,31,.07); } .wbox__lid-out{ background:#f7f8fb; } /* vnější strana */ .wbox__lid-in{ background:#e3e7f0; transform:rotateY(180deg); } /* vnitřní strana, vidět po otevření */ /* zasouvací chlopeň na volném okraji — jako u skutečné zaklápěcí krabičky; o 10° víc než pravý úhel, ať se v zavřeném stavu nepere s přední stěnou */ .wbox__tuck{ position:absolute; left:4px; right:4px; top:100%; height:13px; border-radius:0 0 3px 3px; background:#eceff6; box-shadow:inset 0 0 0 1px rgba(29,29,31,.07); transform-origin:top center; transform:rotateX(-100deg); } .is-in .wbox__lid{ transform:rotateX(142deg); } /* pootevřené, jako výchozí stav u WACA */ .case:hover .wbox__lid{ transform:rotateX(196deg); transition-delay:0s; } /* dokořán, lehce přes svislou polohu */ .wbox__shadow{ position:absolute; left:50%; top:64%; width:140px; height:26px; margin-left:-70px; border-radius:50%; background:rgba(29,29,31,.24); filter:blur(11px); } .mwaca__panel{ position:relative; z-index:1; margin-right:14px; padding:10px 10px 11px; border-radius:14px; background:#fff; box-shadow:0 14px 34px -18px rgba(29,29,31,.45); display:flex; flex-direction:column; gap:4px; } .mwaca__h{ font-weight:800; font-size:10px; letter-spacing:.14em; text-align:center; padding-bottom:6px; border-bottom:1px solid #f5f5f7; } .mwaca__lbl{ font-size:6.8px; font-weight:700; letter-spacing:.13em; color:#86868b; text-align:center; margin-top:3px; } .mwaca__seg,.mwaca__chips{ display:flex; gap:3px; } .mwaca__seg{ padding:2px; border-radius:8px; background:#f5f5f7; } .mwaca__seg span,.mwaca__chips span{ flex:1; text-align:center; font-size:7.4px; font-weight:600; color:#86868b; padding:4px 0; border-radius:6px; white-space:nowrap; } .mwaca__seg .is-on{ background:#fff; color:#1d1d1f; box-shadow:0 1px 3px rgba(0,0,0,.1); } .mwaca__chips span{ border:1px solid #e8e8ed; border-radius:8px; font-weight:700; } .mwaca__chips .is-on{ color:#f84b80; border-color:#f84b80; background:rgba(248,75,128,.08); } .mwaca__chips .mwaca__gold{ color:#8a6d12; border-color:#d9b44a; background:linear-gradient(90deg,#fff7df,#fff); } .mwaca__slider{ position:relative; height:4px; border-radius:4px; background:#e8e8ed; margin:7px 6px 2px; } .mwaca__slider i{ position:absolute; top:50%; left:32%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#f84b80; box-shadow:0 2px 6px rgba(248,75,128,.55); transition:left 1.3s cubic-bezier(.16,1,.3,1); } .case:hover .mwaca__slider i{ left:94%; } /* ── Fleysen · Shopify e-shop ── */ .mfley{ background:#fff; color:#171717; font-family:'Inter Tight',var(--font); line-height:1.25; letter-spacing:normal; display:flex; flex-direction:column; } .mfley__promo{ display:flex; align-items:center; justify-content:center; gap:5px; padding:6px 10px; background:#f1ba00; font-size:8.5px; } .mfley__promo span{ margin-right:6px; } .mfley__promo b{ display:block; font-size:9.5px; font-weight:700; } .mfley__promo em{ font-style:normal; font-weight:700; font-size:9px; background:#171717; color:#fff; border-radius:5px; padding:3px 5px; font-variant-numeric:tabular-nums; } .mfley__strip{ background:#8cac89; color:#fff; font-size:7.8px; text-align:center; padding:4px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mfley__head{ display:flex; align-items:center; gap:12px; padding:9px 12px; } .mfley__logo{ height:14px; width:auto; filter:brightness(0); } .mfley__nav{ display:flex; gap:3px; overflow:hidden; } .mfley__nav span{ font-size:8.5px; font-weight:500; padding:4px 8px; border-radius:60px; white-space:nowrap; } .mfley__nav .is-on{ box-shadow:inset 0 0 0 1px #171717; } .mfley__hero{ position:relative; flex:1; margin:0 10px 10px; border-radius:12px; overflow:hidden; background:linear-gradient(165deg,#dcd8d1,#b8b3aa); display:flex; align-items:flex-end; justify-content:space-between; gap:8px; padding:10px 12px; } .mfley__hero b{ position:relative; z-index:1; color:#fff; font-weight:700; font-size:15px; letter-spacing:-.02em; line-height:1.1; text-shadow:0 1px 12px rgba(0,0,0,.25); max-width:62%; } .mfley__cta{ position:relative; z-index:1; flex:0 0 auto; background:#fff; color:#171717; font-size:9px; font-weight:600; padding:6px 12px; border-radius:60px; } .mfley__cab{ position:absolute; right:15%; top:14%; width:40%; height:58%; border-radius:4px; background:radial-gradient(circle,rgba(40,30,75,.32) 1.15px,transparent 1.5px) 0 0/6px 6px, #bdb6e2; box-shadow:0 12px 22px -10px rgba(0,0,0,.4); transition:transform 1s var(--ease); } .mfley__cab::after{ content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(40,30,75,.28); } .mfley__cab i{ position:absolute; top:40%; width:4px; height:15px; border-radius:3px; background:#e0483e; } .mfley__cab i:first-child{ left:calc(50% - 9px); } .mfley__cab i:last-child{ left:calc(50% + 5px); } .case:hover .mfley__cab{ transform:translateY(-3px) scale(1.02); } .mfley__badge{ position:absolute !important; inset:auto 12px auto auto !important; top:66px !important; z-index:2; display:inline-flex; gap:5px; align-items:center; font-size:9px; font-weight:600; background:#fff; border-radius:99px; padding:5px 10px; box-shadow:0 8px 20px -8px rgba(0,0,0,.35); opacity:0; transform:translateY(-6px); transition:opacity .5s .6s, transform .7s cubic-bezier(.16,1,.3,1) .6s; } .mfley__badge s{ color:#9ca3af; } .mfley__badge b{ color:#5e8e3e; font-weight:700; } .is-in .mfley__badge{ opacity:1; transform:none; } /* ── Blaho & work · aplikace + chytrý zámek (Poppins, růžová) ── */ .mblaho{ position:relative; display:flex; align-items:center; justify-content:center; gap:20px; padding:30px 18px; border-radius:20px; overflow:hidden; background:#fcf8ff; color:#1c1a26; font-family:'Poppins',var(--font); line-height:1.3; letter-spacing:normal; box-shadow:0 30px 70px -34px rgba(0,0,0,.9); } .mblaho::before{ content:''; position:absolute; width:320px; height:320px; right:-120px; top:-140px; border-radius:50%; background:#ffe1e6; filter:blur(50px); } .mblaho::after{ content:''; position:absolute; width:260px; height:260px; left:-120px; bottom:-150px; border-radius:50%; background:#efe6ff; filter:blur(50px); } .mblaho__phone{ position:relative; z-index:1; flex:0 0 auto; width:198px; padding:10px 12px 14px; border-radius:30px; background:#fff; border:6px solid #1c1a26; box-shadow:0 26px 50px -24px rgba(28,26,38,.55); } .mblaho__status{ position:relative; height:14px; margin-bottom:8px; } .mblaho__status b{ position:absolute; left:6px; top:0; font-size:9px; font-weight:600; } .mblaho__status i{ position:absolute; left:50%; top:0; width:46px; height:13px; margin-left:-23px; border-radius:99px; background:#1c1a26; } .mblaho__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; } .mblaho__top img{ height:15px; width:auto; } .mblaho__av{ width:22px; height:22px; border-radius:50%; background:#fda4af; color:#fff; font-size:10px; font-weight:600; display:grid; place-items:center; } .mblaho__hi{ font-size:15px; font-weight:800; letter-spacing:-.02em; line-height:1.05; text-transform:uppercase; } .mblaho__hi em{ display:block; font-family:'DM Serif Display',Georgia,serif; font-style:normal; font-weight:400; font-size:22px; color:#fda4af; text-transform:none; letter-spacing:0; margin-top:1px; } .mblaho__plan{ font-size:8.5px; color:#8b8494; margin:5px 0 10px; } .mblaho__unlock{ position:relative; display:flex; align-items:center; gap:9px; height:40px; padding:0 13px; border-radius:16px; background:#1c1a26; color:#fff; overflow:hidden; } .mblaho__ring{ position:absolute; left:0; top:0; bottom:0; width:0; background:#fda4af; transition:width 1.1s cubic-bezier(.65,0,.35,1) .7s; } .is-in .mblaho__ring{ width:100%; } .mblaho__padlock{ position:relative; z-index:1; flex:0 0 auto; width:18px; height:18px; transition:color .3s 1.8s; } .mblaho__shackle{ transform-origin:16px 11px; transition:transform .55s cubic-bezier(.34,1.56,.64,1) 1.8s; } .is-in .mblaho__padlock{ color:#1c1a26; } .is-in .mblaho__shackle{ transform:translateY(-1.5px) rotate(26deg); } .mblaho__t1,.mblaho__t2{ position:relative; z-index:1; font-size:10.5px; font-weight:600; transition:opacity .3s; } .mblaho__t2{ position:absolute; left:40px; opacity:0; color:#1c1a26; transition-delay:1.8s; } .mblaho__t1{ transition-delay:1.6s; } .is-in .mblaho__t1{ opacity:0; } .is-in .mblaho__t2{ opacity:1; } .mblaho__doors{ margin-top:9px; display:grid; gap:5px; } .mblaho__doors li{ display:flex; align-items:center; gap:7px; font-size:9.5px; font-weight:500; padding:6px 8px; border-radius:10px; background:#fcf8ff; white-space:nowrap; } .mblaho__doors li > i{ flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:#cfc9d8; } .mblaho__doors li > span{ position:relative; margin-left:auto; font-size:8.5px; color:#8b8494; } .mblaho__door--main > i{ background:#fda4af !important; transition:background .4s 1.9s, box-shadow .4s 1.9s; } .is-in .mblaho__door--main > i{ background:#22c55e !important; box-shadow:0 0 0 3px rgba(34,197,94,.18); } /* oba stavy v jedné buňce gridu → šířka podle delšího slova, nic nenaráží */ .mblaho__door--main > span{ display:grid; justify-items:end; } .mblaho__d1,.mblaho__d2{ grid-area:1 / 1; font-style:normal; transition:opacity .3s 1.9s; } .mblaho__d2{ opacity:0; color:#16a34a; font-weight:600; } .is-in .mblaho__d1{ opacity:0; } .is-in .mblaho__d2{ opacity:1; } .mblaho__signal{ position:relative; z-index:1; display:flex; gap:6px; } .mblaho__signal i{ width:6px; height:6px; border-radius:50%; background:#fda4af; opacity:.2; } .is-in .mblaho__signal i{ animation:blSig 1.5s ease-in-out infinite; } .is-in .mblaho__signal i:nth-child(2){ animation-delay:.18s } .is-in .mblaho__signal i:nth-child(3){ animation-delay:.36s } @keyframes blSig{ 0%,100%{ opacity:.2; transform:scale(1) } 40%{ opacity:1; transform:scale(1.35) } } .mblaho__lock{ position:relative; z-index:1; flex:0 0 auto; width:70px; height:156px; border-radius:16px; padding:16px 0 18px; background:linear-gradient(160deg,#2c2938,#1c1a26); display:flex; flex-direction:column; align-items:center; gap:14px; box-shadow:0 22px 40px -20px rgba(28,26,38,.65), inset 0 1px 0 rgba(255,255,255,.08); } .mblaho__led{ width:10px; height:10px; border-radius:50%; background:#fda4af; box-shadow:0 0 12px #fda4af; transition:background .4s 1.9s, box-shadow .4s 1.9s; } .is-in .mblaho__led{ background:#34d399; box-shadow:0 0 14px #34d399; } .mblaho__pad{ display:grid; grid-template-columns:repeat(3,8px); gap:5px; } .mblaho__pad i{ width:8px; height:8px; border-radius:3px; background:rgba(255,255,255,.14); } .mblaho__handle{ margin-top:auto; width:36px; height:8px; border-radius:6px; background:linear-gradient(180deg,#e2dfea,#a9a3b8); transform-origin:5px 50%; transition:transform .6s cubic-bezier(.34,1.56,.64,1) 2.1s; } .is-in .mblaho__handle{ transform:rotate(24deg); } /* ── Theis · plánovač (krémová, zelená, Familjen Grotesk) ── */ .product__shot{ position:relative; height:204px; margin:-31px -29px 22px; overflow:hidden; border-bottom:1px solid var(--line); } .product__shot > *{ position:absolute; inset:0; } .mtheis{ background:#f9f6f3; font-family:'Familjen Grotesk',var(--font); color:#121715; line-height:1.25; letter-spacing:normal; display:flex; flex-direction:column; padding:14px 14px 0; } .mtheis__bar{ display:flex; align-items:center; gap:4px; padding:7px 9px; background:#fff; border:1px solid #e7e2da; border-bottom:0; border-radius:11px 11px 0 0; } .mtheis__bar i{ width:6px; height:6px; border-radius:50%; background:#e7e2da; } .mtheis__bar span{ margin-left:8px; font-family:'JetBrains Mono',monospace; font-size:8.5px; color:#9aa29e; } .mtheis__app{ flex:1; display:grid; grid-template-columns:64px 1fr; background:#fff; border:1px solid #e7e2da; border-bottom:0; overflow:hidden; } .mtheis__side{ display:flex; flex-direction:column; gap:2px; padding:8px 6px; border-right:1px solid #f2eee9; } .mtheis__side span{ font-size:8.5px; font-weight:500; color:#656c69; padding:4px 6px; border-radius:6px; } .mtheis__side .is-on{ background:#e8edea; color:#0a7550; font-weight:600; } .mtheis__week{ display:grid; grid-template-columns:repeat(4,1fr); gap:5px; padding:8px; } .mtheis__col b{ display:block; font-family:'JetBrains Mono',monospace; font-size:7.5px; font-weight:500; color:#aab0ac; letter-spacing:.1em; text-align:center; margin-bottom:5px; } .mtheis__card{ display:block; min-height:28px; border-radius:6px; background:#f2eee9; border-left:2px solid #cfdad4; padding:5px; margin-bottom:5px; } .mtheis__card em{ display:block; font-style:normal; font-size:7.5px; font-weight:600; color:#5a615d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mtheis__card--render{ background:#e8edea; border-left-color:#0a7550; } .mtheis__card--render em{ color:#0a7550; } .mtheis__card s{ display:block; height:3px; border-radius:2px; background:#d3e0d9; margin-top:6px; overflow:hidden; } .mtheis__card u{ display:block; height:100%; width:0; background:#0a7550; transition:width 2.2s cubic-bezier(.16,1,.3,1) .4s; } .is-in .mtheis__card u{ width:100%; } .mtheis__card--pub{ border-left-color:#0a7550; } .mtheis__card--ghost{ min-height:44px; border-left-color:transparent; background:repeating-linear-gradient(135deg,#f5f2ee 0 4px,#fff 4px 8px); } /* ── Pokis · srovnávač (téměř černá, zlatá) ── */ .mpokis{ background:#0a0a0b; font-family:'Inter',var(--font); color:#f4f4f5; line-height:1.25; letter-spacing:normal; } .mpokis__notif{ position:absolute !important; inset:10px 10px auto 30% !important; z-index:2; display:flex; gap:8px; align-items:flex-start; padding:8px 9px; border-radius:12px; background:rgba(38,38,43,.94); border:1px solid #2e2e34; box-shadow:0 12px 30px -12px rgba(0,0,0,.8); backdrop-filter:blur(8px); opacity:0; transform:translateY(-14px); transition:opacity .5s .5s, transform .7s cubic-bezier(.16,1,.3,1) .5s; } .is-in .mpokis__notif{ opacity:1; transform:none; } .mpokis__app{ flex:0 0 auto; width:22px; height:22px; border-radius:6px; background:#1c1c20; display:grid; place-items:center; } .mpokis__app img{ width:13px; height:13px; object-fit:contain; } .mpokis__nt{ min-width:0; } .mpokis__nt b{ display:block; font-size:8px; font-weight:600; color:#a1a1aa; letter-spacing:.04em; } .mpokis__nt b em{ font-style:normal; font-weight:400; } .mpokis__nt > span{ display:block; font-size:9.5px; font-weight:600; margin:1px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mpokis__nt > em{ font-style:normal; font-size:8.5px; color:#a1a1aa; } .mpokis__list{ position:absolute !important; inset:auto 12px 12px 12px !important; border-radius:12px; border:1px solid #26262b; background:#101012; padding:8px 10px 3px; } .mpokis__hd{ display:flex; justify-content:space-between; font-size:7.3px; letter-spacing:.14em; color:#7c7c87; margin-bottom:4px; } .mpokis__hd b{ color:#f2c94c; font-weight:600; } .mpokis__row{ display:grid; grid-template-columns:20px 1fr auto; gap:8px; align-items:center; padding:5px 0; border-top:1px solid #1c1c20; } .mpokis__th{ width:20px; height:26px; border-radius:4px; } .mpokis__th--a{ background:linear-gradient(160deg,#f2c94c,#a97a0c); } .mpokis__th--b{ background:linear-gradient(160deg,#60a5fa,#1e3a8a); } .mpokis__th--c{ background:linear-gradient(160deg,#a78bfa,#4c1d95); } .mpokis__row b{ display:block; font-size:9.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .mpokis__row em{ display:flex; align-items:center; gap:4px; font-style:normal; font-size:8px; color:#a1a1aa; } .mpokis__row u{ width:5px; height:5px; border-radius:50%; background:#34d399; } .mpokis__row u.is-low{ background:#f59e0b; } .mpokis__row strong{ font-size:10px; font-weight:700; color:#f2c94c; } /* ── „Váš produkt" · prázdné okno čekající na obsah ── */ .myour{ display:grid; place-items:center; background:radial-gradient(120% 100% at 50% 0%,rgba(0,224,122,.1),transparent 70%); } .myour__frame{ width:76%; height:68%; border-radius:12px; border:1.5px dashed rgba(0,224,122,.35); display:flex; flex-direction:column; overflow:hidden; transition:border-color .5s, background .5s; } .myour__bar{ display:flex; align-items:center; gap:4px; padding:7px 9px; border-bottom:1.5px dashed rgba(0,224,122,.22); } .myour__bar i{ width:6px; height:6px; border-radius:50%; background:rgba(0,224,122,.35); } .myour__bar em{ margin-left:8px; font-family:var(--font-mono); font-style:normal; font-size:9px; color:var(--fg-3); } .myour__plus{ flex:1; display:grid; place-items:center; font-family:var(--font-dsp); font-size:40px; font-weight:300; color:var(--green); opacity:.75; transition:transform .7s var(--ease); } .product--cta:hover .myour__plus{ transform:scale(1.15) rotate(90deg); } .product--cta:hover .myour__frame{ border-color:rgba(0,224,122,.6); background:rgba(0,224,122,.04); } /* ═══ MOBILNÍ APLIKACE ═══ Skutečné snímky z App Storu (369×800) — proto max. ~176 px na šířku, aby byly na retině ostré. Tři snímky tvoří vějíř, který se rozevře s .is-in. */ .apps{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .app{ position:relative; display:flex; flex-direction:column; overflow:hidden; container-type:inline-size; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); transition:border-color .5s, background .5s; } .app:hover{ border-color:var(--line-2); background:var(--surface-2); } .app__stage{ --shot-w:clamp(138px,12.2vw,176px); position:relative; height:calc(var(--shot-w) * 2.168 + 62px); overflow:hidden; } .app__glow{ position:absolute; left:50%; top:50%; width:125%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,var(--tint) 0%,transparent 62%); transform:translate(-50%,-50%) scale(.9); opacity:.2; transition:opacity .9s var(--ease), transform 1.2s var(--ease); } .app.is-in .app__glow{ opacity:.3; transform:translate(-50%,-50%); } .app:hover .app__glow{ opacity:.44; transform:translate(-50%,-50%) scale(1.06); } .app__shot{ position:absolute; left:50%; top:30px; width:var(--shot-w); height:auto; aspect-ratio:369 / 800; margin-left:calc(var(--shot-w) / -2); border-radius:calc(var(--shot-w) * .1); box-shadow:0 26px 50px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.07); transition:transform 1.15s cubic-bezier(.16,1,.3,1), filter .8s var(--ease); will-change:transform; } /* výchozí stav: srovnané za sebou */ .app__shot--c{ z-index:2; transform:translateY(24px); } .app__shot--l,.app__shot--r{ transform-origin:50% 92%; filter:brightness(.62) saturate(.85); transform:translateY(18px) scale(.84); } /* po najetí do obrazu: vějíř */ .app.is-in .app__shot--c{ transform:none; } .app.is-in .app__shot--l{ transform:translateX(-44%) translateY(20px) rotate(-7deg) scale(.86); transition-delay:.12s; } .app.is-in .app__shot--r{ transform:translateX(44%) translateY(20px) rotate(7deg) scale(.86); transition-delay:.12s; } /* hover: rozestoupí se, prostřední se zvedne */ .app:hover .app__shot--c{ transform:translateY(-8px) scale(1.03); } .app:hover .app__shot--l{ transform:translateX(-56%) translateY(24px) rotate(-10deg) scale(.86); filter:brightness(.8); transition-delay:0s; } .app:hover .app__shot--r{ transform:translateX(56%) translateY(24px) rotate(10deg) scale(.86); filter:brightness(.8); transition-delay:0s; } /* řádek 1: ikona · název · odkaz, řádek 2: popis přes celou šířku (ve třech sloupcích by na popis zbylo jen ~140 px a zalamoval se na 4 řádky) */ .app__meta{ position:relative; z-index:3; display:grid; grid-template-columns:48px 1fr auto; grid-template-areas:"icon name store" "desc desc desc"; gap:12px 13px; align-items:center; padding:18px 20px 20px; border-top:1px solid var(--line); background:rgba(4,7,6,.4); } .app__txt{ display:contents; } .app__icon{ grid-area:icon; } .app__name{ grid-area:name; } .app__desc{ grid-area:desc; } .app__store{ grid-area:store; } .app__name{ white-space:nowrap; } /* úzká karta (tablet, karusel na mobilu): odkaz pod popis, ať se název nezalamuje */ @container (max-width:340px){ .app__meta{ grid-template-columns:44px 1fr; grid-template-areas:"icon name" "desc desc" "store store"; } .app__icon{ width:44px; height:44px; } .app__store{ justify-self:start; } } .app__icon{ width:48px; height:48px; border-radius:12px; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 8px 20px -10px rgba(0,0,0,.8); } .app__name{ font-family:var(--font-dsp); font-size:17px; font-weight:600; letter-spacing:-.02em; } .app__desc{ font-size:13px; line-height:1.45; color:var(--fg-3); } .app__store{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:500; color:var(--green); white-space:nowrap; padding:7px 11px; border-radius:99px; border:1px solid rgba(0,224,122,.3); background:rgba(0,224,122,.08); transition:background .35s, border-color .35s, color .35s; } .app__store svg{ transition:transform .4s var(--ease); } .app__store:hover{ background:var(--green); border-color:var(--green); color:#04120b; } .app__store:hover svg{ transform:translate(2px,-2px); } .apps__caps{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:30px; } .apps__caps li{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; padding:6px 12px; border-radius:99px; border:1px solid var(--line); color:var(--fg-2); background:rgba(255,255,255,.02); } /* ═══ QUOTES ═══ */ .quotes{ columns:2; column-gap:18px; } .quote{ position:relative; display:flex; flex-direction:column; padding:36px 32px 30px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--surface); backdrop-filter:blur(10px); transition:transform .55s var(--ease), border-color .45s, background .45s; will-change:transform; margin:0 0 18px; break-inside:avoid; -webkit-column-break-inside:avoid; } .quote > *{ position:relative; z-index:2; } .quote:hover{ transform:translateY(-6px); background:var(--surface-2); } .quote__mark{ position:absolute; top:-6px; left:22px; z-index:1; font-family:var(--font-dsp); font-size:110px; line-height:1; font-weight:700; color:var(--green); opacity:.14; pointer-events:none; transition:opacity .5s var(--ease), transform .6s var(--ease); } .quote:hover .quote__mark{ opacity:.24; transform:translateY(-3px); } .quote__text{ margin:0 0 26px; font-family:var(--font-dsp); font-weight:400; font-size:clamp(16.5px,1.75vw,19.5px); line-height:1.52; letter-spacing:-.015em; color:var(--fg); text-wrap:pretty; } .quote__foot{ display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:22px; border-top:1px solid var(--line); } .quote__logo{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.055); border:1px solid var(--line); transition:background .4s, border-color .4s; } .quote__logo img{ max-width:26px; max-height:24px; width:auto; height:auto; filter:brightness(0) invert(1); opacity:.9; } .quote__logo--txt{ font-family:var(--font-dsp); font-size:19px; font-weight:600; color:var(--green); letter-spacing:-.02em; } .quote__logo img[src*="cot"]{ max-width:24px; max-height:26px; } .quote__logo img[src*="honzabartos"]{ max-width:32px; max-height:11px; } .quote__logo img[src*="glowly"]{ max-width:30px; max-height:16px; } .quote__logo img[src*="fleysen"]{ max-width:30px; max-height:13px; } .quote:hover .quote__logo{ background:rgba(0,224,122,.13); border-color:rgba(0,224,122,.3); } .quote__who{ display:flex; flex-direction:column; gap:2px; min-width:0; font-family:var(--font-dsp); font-size:15.5px; font-weight:600; letter-spacing:-.015em; } .quote__who em{ font-style:normal; font-size:12.5px; font-weight:400; letter-spacing:0; color:var(--fg-3); font-family:var(--font); } /* ═══ STATS ═══ */ .stats{ position:relative; z-index:2; padding:clamp(48px,7vw,80px) 0; border-block:1px solid var(--line); background:rgba(0,224,122,.02); } .stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .stat{ text-align:center; padding:14px 10px; border-left:1px solid var(--line); } .stat:first-child{ border-left:0; } .stat__num{ display:block; font-family:var(--font-dsp); font-size:clamp(38px,5.4vw,60px); font-weight:600; letter-spacing:-.05em; line-height:1; color:var(--green-lt); margin-bottom:10px; } .stat__lbl{ font-size:13.5px; color:var(--fg-3); letter-spacing:.01em; } /* ═══ STEPS ═══ */ .steps{ position:relative; max-width:820px; margin-inline:auto; } .steps__line{ position:absolute; left:25px; top:24px; bottom:24px; width:1px; background:var(--line); } .steps__line span{ display:block; width:100%; height:0%; background:linear-gradient(180deg,var(--green),var(--teal)); box-shadow:0 0 16px rgba(0,224,122,.7); transition:height .12s linear; } .step{ position:relative; display:grid; grid-template-columns:50px 1fr; gap:clamp(20px,3vw,38px); padding:24px 0; } .step__num{ width:50px; height:50px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-mono); font-size:12px; color:var(--green); border:1px solid rgba(0,224,122,.3); background:var(--bg); position:relative; z-index:2; transition:transform .5s var(--ease), box-shadow .5s, background .4s; } .step:hover .step__num{ transform:scale(1.08); background:rgba(0,224,122,.12); box-shadow:0 0 0 6px rgba(0,224,122,.07); } .step__body h3{ font-family:var(--font-dsp); font-size:clamp(19px,2.4vw,25px); font-weight:600; letter-spacing:-.025em; margin:8px 0 8px; } .step__body p{ font-size:15.5px; color:var(--fg-2); margin:0; max-width:60ch; } /* ═══ FAQ ═══ */ .faq{ display:flex; flex-direction:column; } .faq__item{ border-bottom:1px solid var(--line); } .faq__item:first-child{ border-top:1px solid var(--line); } .faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 4px; text-align:left; font-family:var(--font-dsp); font-weight:500; font-size:clamp(16.5px,2vw,20px); letter-spacing:-.02em; transition:color .3s; } .faq__q:hover{ color:var(--green); } .faq__q i{ position:relative; flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); transition:transform .5s var(--ease), border-color .4s, background .4s; } .faq__q i::before,.faq__q i::after{ content:''; position:absolute; top:50%; left:50%; width:12px; height:1.5px; background:currentColor; transform:translate(-50%,-50%); transition:transform .45s var(--ease), opacity .3s; } .faq__q i::after{ transform:translate(-50%,-50%) rotate(90deg); } .faq__q[aria-expanded="true"] i{ transform:rotate(135deg); border-color:var(--green); background:rgba(0,224,122,.12); } .faq__q[aria-expanded="true"] i::after{ opacity:0; } .faq__q[aria-expanded="true"]{ color:var(--green); } .faq__a{ overflow:hidden; height:0; transition:height .5s var(--ease); } .faq__a p{ margin:0; padding:0 60px 26px 4px; color:var(--fg-2); font-size:15.5px; } /* ═══ CTA / FORM ═══ */ .cta{ position:relative; } .cta__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,80px); align-items:start; } .cta__title{ font-family:var(--font-dsp); font-weight:600; letter-spacing:-.04em; line-height:1.06; font-size:clamp(32px,4.6vw,52px); margin:0 0 20px; text-wrap:balance; } .cta__title em{ font-style:normal; color:var(--green-lt); } .cta__lead{ font-size:17px; color:var(--fg-2); margin:0 0 36px; max-width:46ch; } .cta__info{ display:flex; flex-direction:column; border-top:1px solid var(--line); } .cta__line{ display:flex; align-items:baseline; gap:18px; padding:16px 0; border-bottom:1px solid var(--line); transition:padding-left .45s var(--ease), border-color .4s; } a.cta__line:hover{ padding-left:10px; border-color:rgba(0,224,122,.3); } .cta__lineLbl{ flex:0 0 92px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); } .cta__lineVal{ font-size:16.5px; font-weight:500; transition:color .3s; } a.cta__line:hover .cta__lineVal{ color:var(--green); } .form{ padding:clamp(26px,3.6vw,38px); border-radius:var(--r-lg); border:1px solid var(--line); background:rgba(255,255,255,.028); backdrop-filter:blur(14px); display:flex; flex-direction:column; gap:16px; } .field{ position:relative; } .field input,.field textarea{ width:100%; padding:22px 16px 9px; border-radius:14px; border:1px solid var(--line); background:rgba(0,0,0,.25); color:var(--fg); font:inherit; font-size:15px; outline:none; resize:vertical; transition:border-color .35s, background .35s, box-shadow .35s; } .field textarea{ padding-top:26px; min-height:112px; } .field > label{ position:absolute; left:17px; top:16px; font-size:15px; color:var(--fg-3); pointer-events:none; transform-origin:left top; transition:transform .3s var(--ease), color .3s; } .field > label em{ font-style:normal; opacity:.6; } .field input:focus,.field textarea:focus{ border-color:rgba(0,224,122,.55); background:rgba(0,224,122,.045); box-shadow:0 0 0 4px rgba(0,224,122,.08); } .field > input:focus + label,.field > input:not(:placeholder-shown) + label, .field > textarea:focus + label,.field > textarea:not(:placeholder-shown) + label{ transform:translateY(-9px) scale(.74); color:var(--green); } .field.is-error input,.field.is-error textarea{ border-color:rgba(255,90,90,.6); } .field--chips{ margin-top:4px; } .field__lbl{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); margin-bottom:11px; } .chips{ display:flex; flex-wrap:wrap; gap:8px; } /* Skrytý checkbox dědil width:100% z pravidla pro inputy ve formuláři, takže byl 296 px široký a u chipů vpravo přetékal mimo viewport. */ .chip input{ position:absolute; width:1px; height:1px; margin:0; padding:0; border:0; opacity:0; pointer-events:none; } .chip span{ display:block; padding:8px 14px; border-radius:99px; border:1px solid var(--line); font-size:13.5px; color:var(--fg-2); cursor:pointer; transition:all .3s var(--ease); } .chip span:hover{ border-color:var(--line-2); color:var(--fg); } .chip input:checked + span{ background:var(--green); border-color:var(--green); color:#04120b; font-weight:500; } .chip input:focus-visible + span{ outline:2px solid var(--green); outline-offset:2px; } .form__note{ margin:2px 0 0; font-size:13.5px; color:var(--fg-3); min-height:20px; text-align:center; } .form__note.is-ok{ color:var(--green); } .form__note.is-bad{ color:#ff7b7b; } /* ═══ FOOTER ═══ */ .footer{ position:relative; z-index:2; padding:70px 0 32px; border-top:1px solid var(--line); background:rgba(4,7,6,.55); backdrop-filter:blur(10px); } .footer__top{ display:grid; grid-template-columns:1.2fr 2fr; gap:44px; padding-bottom:44px; } .footer__logo{ width:112px; filter:brightness(0) invert(1); margin-bottom:18px; } .footer__brand p{ font-size:14.5px; color:var(--fg-3); margin:0; max-width:34ch; } .footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .footer__col h3{ font-size:12px; font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--fg-3); margin:0 0 15px; font-weight:400; } .footer__col a{ display:block; font-size:14.5px; color:var(--fg-2); padding:5px 0; transition:color .3s, transform .35s var(--ease); } .footer__col a:hover{ color:var(--green); transform:translateX(4px); } .footer__legal{ display:grid; grid-template-columns:1.4fr .7fr 1.5fr .8fr; gap:24px; padding:26px 0; border-top:1px solid var(--line); } .legal{ display:flex; flex-direction:column; gap:7px; min-width:0; } .legal__lbl{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-3); } .legal__val{ font-size:13.5px; line-height:1.5; color:var(--fg-2); } .footer__bottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--fg-3); } .footer__made b{ color:var(--green); font-weight:400; } /* ═══ REVEAL ANIMATIONS ═══ */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .85s var(--ease), transform .95s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } .split{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; } .split__i{ display:inline-block; transform:translateY(105%); opacity:0; transition:transform .7s var(--ease), opacity .45s var(--ease); } [data-split].is-in .split__i{ transform:none; opacity:1; } /* Než JS rozloží nadpis na písmena, byl by chvíli vidět jako obyčejný text a pak zmizel. Bez JS (třída .js chybí) zůstane nadpis normálně viditelný. */ .js [data-split]:not([data-done]){ opacity:0; animation:splitFallback 1ms 2s forwards; } /* pojistka: kdyby se main.js nenačetl (chyba, stará cache), nadpis se po 2 s ukáže sám */ @keyframes splitFallback{ to{ opacity:1; } } /* ═══ HERO BEZ ČEKÁNÍ NA JS ═══ Hero se animuje čistě v CSS od prvního vykreslení. Dřív čekal, až se spustí JS a načtou fonty, takže nadpis naskočil až po několika sekundách (LCP 6,6 s). Animace začíná na opacity .01, ne 0: neviditelný prvek se do LCP nezapočítá. */ .hero__title .split__i{ animation:heroLetter .7s var(--ease) both; } @keyframes heroLetter{ from{ transform:translateY(105%); opacity:.01; } to{ transform:none; opacity:1; } } .hero-in{ animation:heroUp .9s var(--ease) both; animation-delay:var(--hd,0ms); } @keyframes heroUp{ from{ transform:translateY(26px); opacity:.01; } to{ transform:none; opacity:1; } } /* ═══ BEZ 3D SCÉNY (mobil, dotyk) ═══ Na slabších zařízeních se three.js vůbec nestahuje a hero má místo scény statické hvězdné pozadí. Podmínka je stejná jako v scene.js (šířka < 820 px nebo dotyk), ale řešená media query, takže hvězdy jsou součástí úplně prvního vykreslení. Dřív je zapínal až JS třídou .no-webgl a pozadí — jako největší prvek na obrazovce — posouvalo LCP. Obrázek je vložený přímo v CSS, aby nečekal na další požadavek. Na desktopu jsou hvězdy vidět taky, dokud se 3D scéna nespustí (startuje až první interakcí), a pak se prolnou pryč (.webgl-ready). */ :root{ --hero-stars: radial-gradient(70% 45% at 50% 40%, rgba(0,224,122,.14), transparent 70%), url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 800" preserveAspectRatio="xMidYMid slice"%3E%3Ccircle cx="256" cy="20" r="0.9" fill="rgb%280,224,122%29" fill-opacity="0.4"/%3E%3Ccircle cx="295" cy="541" r="1.2" fill="rgb%28233,242,237%29" fill-opacity="0.3"/%3E%3Ccircle cx="13" cy="75" r="0.8" fill="rgb%28124,255,190%29" fill-opacity="0.55"/%3E%3Ccircle cx="224" cy="573" r="1.5" fill="rgb%280,224,122%29" fill-opacity="0.58"/%3E%3Ccircle cx="180" cy="223" r="0.7" fill="rgb%280,224,122%29" fill-opacity="0.71"/%3E%3Ccircle cx="279" cy="272" r="0.8" fill="rgb%280,216,194%29" fill-opacity="0.38"/%3E%3Ccircle cx="41" cy="304" r="0.9" fill="rgb%280,216,194%29" fill-opacity="0.76"/%3E%3Ccircle cx="323" cy="584" r="1.2" fill="rgb%28233,242,237%29" fill-opacity="0.32"/%3E%3Ccircle cx="32" cy="235" r="1.5" fill="rgb%280,216,194%29" fill-opacity="0.62"/%3E%3Ccircle cx="231" cy="564" r="0.7" fill="rgb%280,216,194%29" fill-opacity="0.65"/%3E%3Ccircle cx="394" cy="684" r="0.7" fill="rgb%28233,242,237%29" fill-opacity="0.48"/%3E%3Ccircle cx="254" cy="292" r="0.9" fill="rgb%280,216,194%29" fill-opacity="0.46"/%3E%3Ccircle cx="281" cy="547" r="0.7" fill="rgb%280,224,122%29" fill-opacity="0.62"/%3E%3Ccircle cx="214" cy="196" r="1.0" fill="rgb%280,224,122%29" fill-opacity="0.48"/%3E%3Ccircle cx="274" cy="674" r="0.7" fill="rgb%28124,255,190%29" fill-opacity="0.39"/%3E%3Ccircle cx="322" cy="321" r="0.7" fill="rgb%280,216,194%29" fill-opacity="0.38"/%3E%3Ccircle cx="85" cy="399" r="1.5" fill="rgb%280,216,194%29" fill-opacity="0.53"/%3E%3Ccircle cx="56" cy="596" r="1.2" fill="rgb%28233,242,237%29" fill-opacity="0.41"/%3E%3Ccircle cx="359" cy="320" r="0.8" fill="rgb%280,224,122%29" fill-opacity="0.85"/%3E%3Ccircle cx="204" cy="73" r="0.7" fill="rgb%280,224,122%29" fill-opacity="0.77"/%3E%3Ccircle cx="251" cy="634" r="1.0" fill="rgb%28233,242,237%29" fill-opacity="0.61"/%3E%3Ccircle cx="153" cy="797" r="1.2" fill="rgb%28124,255,190%29" fill-opacity="0.4"/%3E%3Ccircle cx="272" cy="92" r="1.2" fill="rgb%280,216,194%29" fill-opacity="0.7"/%3E%3Ccircle cx="45" cy="348" r="1.0" fill="rgb%280,216,194%29" fill-opacity="0.25"/%3E%3Ccircle cx="389" cy="610" r="1.2" fill="rgb%280,216,194%29" fill-opacity="0.8"/%3E%3Ccircle cx="337" cy="406" r="0.8" fill="rgb%280,224,122%29" fill-opacity="0.34"/%3E%3Ccircle cx="216" cy="623" r="1.2" fill="rgb%280,216,194%29" fill-opacity="0.8"/%3E%3Ccircle cx="195" cy="89" r="0.9" fill="rgb%280,216,194%29" fill-opacity="0.78"/%3E%3Ccircle cx="96" cy="193" r="1.2" fill="rgb%28124,255,190%29" fill-opacity="0.82"/%3E%3Ccircle cx="293" cy="653" r="1.2" fill="rgb%280,224,122%29" fill-opacity="0.71"/%3E%3Ccircle cx="264" cy="757" r="0.8" fill="rgb%28233,242,237%29" fill-opacity="0.41"/%3E%3Ccircle cx="386" cy="743" r="1.5" fill="rgb%280,216,194%29" fill-opacity="0.66"/%3E%3Ccircle cx="160" cy="537" r="0.9" fill="rgb%28233,242,237%29" fill-opacity="0.51"/%3E%3Ccircle cx="48" cy="180" r="0.9" fill="rgb%280,224,122%29" fill-opacity="0.26"/%3E%3Ccircle cx="235" cy="6" r="1.5" fill="rgb%280,224,122%29" fill-opacity="0.63"/%3E%3Ccircle cx="27" cy="25" r="0.9" fill="rgb%280,224,122%29" fill-opacity="0.29"/%3E%3Ccircle cx="111" cy="388" r="1.2" fill="rgb%28233,242,237%29" fill-opacity="0.33"/%3E%3Ccircle cx="97" cy="378" r="1.0" fill="rgb%28124,255,190%29" fill-opacity="0.36"/%3E%3Ccircle cx="264" cy="283" r="1.0" fill="rgb%28124,255,190%29" fill-opacity="0.53"/%3E%3Ccircle cx="269" cy="787" r="0.7" fill="rgb%280,216,194%29" fill-opacity="0.29"/%3E%3Ccircle cx="320" cy="87" r="0.8" fill="rgb%28233,242,237%29" fill-opacity="0.36"/%3E%3Ccircle cx="56" cy="147" r="1.0" fill="rgb%28124,255,190%29" fill-opacity="0.4"/%3E%3Ccircle cx="177" cy="689" r="1.2" fill="rgb%28124,255,190%29" fill-opacity="0.31"/%3E%3Ccircle cx="388" cy="741" r="0.8" fill="rgb%28233,242,237%29" fill-opacity="0.35"/%3E%3Ccircle cx="193" cy="692" r="0.7" fill="rgb%28124,255,190%29" fill-opacity="0.35"/%3E%3Ccircle cx="394" cy="212" r="1.0" fill="rgb%28233,242,237%29" fill-opacity="0.42"/%3E%3Ccircle cx="62" cy="237" r="0.7" fill="rgb%28124,255,190%29" fill-opacity="0.6"/%3E%3Ccircle cx="299" cy="46" r="1.2" fill="rgb%280,224,122%29" fill-opacity="0.54"/%3E%3Ccircle cx="23" cy="406" r="0.8" fill="rgb%28124,255,190%29" fill-opacity="0.29"/%3E%3Ccircle cx="270" cy="188" r="0.7" fill="rgb%280,224,122%29" fill-opacity="0.81"/%3E%3Ccircle cx="232" cy="32" r="0.7" fill="rgb%280,216,194%29" fill-opacity="0.5"/%3E%3Ccircle cx="374" cy="163" r="1.5" fill="rgb%280,216,194%29" fill-opacity="0.44"/%3E%3Ccircle cx="158" cy="537" r="0.9" fill="rgb%28124,255,190%29" fill-opacity="0.52"/%3E%3Ccircle cx="4" cy="497" r="1.2" fill="rgb%28124,255,190%29" fill-opacity="0.85"/%3E%3Ccircle cx="215" cy="405" r="0.8" fill="rgb%28124,255,190%29" fill-opacity="0.81"/%3E%3Ccircle cx="352" cy="296" r="0.8" fill="rgb%280,216,194%29" fill-opacity="0.51"/%3E%3Ccircle cx="245" cy="790" r="1.5" fill="rgb%280,216,194%29" fill-opacity="0.57"/%3E%3Ccircle cx="373" cy="83" r="0.8" fill="rgb%28124,255,190%29" fill-opacity="0.41"/%3E%3Ccircle cx="297" cy="124" r="0.9" fill="rgb%280,216,194%29" fill-opacity="0.61"/%3E%3Ccircle cx="81" cy="507" r="0.9" fill="rgb%280,216,194%29" fill-opacity="0.55"/%3E%3Ccircle cx="362" cy="677" r="0.7" fill="rgb%280,216,194%29" fill-opacity="0.63"/%3E%3Ccircle cx="18" cy="267" r="0.8" fill="rgb%280,216,194%29" fill-opacity="0.63"/%3E%3Ccircle cx="65" cy="353" r="1.5" fill="rgb%28124,255,190%29" fill-opacity="0.51"/%3E%3Ccircle cx="45" cy="756" r="1.5" fill="rgb%28124,255,190%29" fill-opacity="0.79"/%3E%3Ccircle cx="334" cy="466" r="0.8" fill="rgb%28124,255,190%29" fill-opacity="0.51"/%3E%3Ccircle cx="123" cy="719" r="0.7" fill="rgb%280,224,122%29" fill-opacity="0.79"/%3E%3Ccircle cx="273" cy="534" r="0.9" fill="rgb%28233,242,237%29" fill-opacity="0.72"/%3E%3Ccircle cx="390" cy="600" r="0.8" fill="rgb%280,224,122%29" fill-opacity="0.77"/%3E%3Ccircle cx="353" cy="20" r="1.5" fill="rgb%28233,242,237%29" fill-opacity="0.8"/%3E%3Ccircle cx="321" cy="691" r="0.8" fill="rgb%28124,255,190%29" fill-opacity="0.41"/%3E%3C/svg%3E') center / cover no-repeat; } .hero::after{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--hero-stars); transition:opacity .9s ease; } .webgl-ready .hero::after{ opacity:0; } .no-webgl .webgl{ display:none; } @media (max-width:819px), (pointer:coarse){ .webgl{ display:none; } } /* ═══ POČÍTAT JEN TO, CO JE VIDĚT ═══ Stránka má přes 1 500 prvků a polovinu tvoří mockupy v sekci Práce. Před prvním vykreslením se dřív počítalo rozvržení úplně všeho; content-visibility:auto nechá prohlížeč sekce pod ohybem přeskočit, dokud se k nim nepřiblíží. contain-intrinsic-size je odhad výšky nevykreslené sekce, „auto" si pak zapamatuje skutečnou. Před skokem na kotvu main.js přidá .cv-off, protože s odhadnutými výškami by odkaz z menu minul cíl. */ .section, .stats, .footer{ content-visibility:auto; contain-intrinsic-size:auto 1100px; } #prace{ contain-intrinsic-size:auto 3200px; } .cv-off .section, .cv-off .stats, .cv-off .footer{ content-visibility:visible; } /* nekonečné animace se mimo obrazovku pozastaví (přepíná main.js) */ .anim-off, .anim-off *{ animation-play-state:paused !important; } /* ═══ RESPONSIVE ═══ */ @media (max-width:1080px){ .cards,.products{ grid-template-columns:repeat(2,1fr); } .card--wide{ grid-template-columns:auto 1fr; } .card--wide .card__tags{ grid-column:1 / -1; justify-content:flex-start; margin-top:4px; } .nav{ display:none; } .burger{ display:block; } .stats__grid{ grid-template-columns:repeat(2,1fr); } .stat:nth-child(3){ border-left:0; } .stat{ border-top:0; } .stats__grid > .stat:nth-child(n+3){ padding-top:26px; border-top:1px solid var(--line); } } @media (max-width:900px){ .apps{ display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 calc(var(--pad) * -1); padding:4px var(--pad) 14px; scrollbar-width:none; } .apps::-webkit-scrollbar{ display:none; } .app{ flex:0 0 min(84vw,380px); scroll-snap-align:center; } .app__stage{ --shot-w:clamp(128px,34vw,168px); } } @media (max-width:960px){ .case--hero,.case--rev{ grid-template-columns:1fr; gap:30px; } .case__viz{ order:-1; } } /* ═══ ŠETŘENÍ VÝKONU NA DOTYKOVÝCH ZAŘÍZENÍCH ═══ Rozmazávání (blur, backdrop-filter) a míchání vrstev (mix-blend-mode) jsou na mobilních GPU drahé a projeví se hlavně při scrollování. Na dotykových zařízeních proto dekorace zjednodušujeme — obsah zůstává stejný. */ @media (max-width:820px), (pointer:coarse){ .grain{ display:none; } /* celoobrazovkový šum s mix-blend-mode */ .glow{ display:none; } /* dvě plochy s blur(140px) */ .card, .case, .product, .quote, .form, .marquee, .mcov__app, .monb__card, .mpod__card, .mpokis__notif, .menu__bg{ backdrop-filter:none; -webkit-backdrop-filter:none; } .card, .case, .product, .quote, .app__shot, .btn{ will-change:auto; } } @media (max-width:820px){ .footer__legal{ grid-template-columns:1fr 1fr; gap:22px 28px; } .header__actions .btn{ display:none; } .cta__grid{ grid-template-columns:1fr; } .cases{ grid-template-columns:1fr; } .quotes{ columns:1; } .footer__top{ grid-template-columns:1fr; gap:36px; } } @media (max-width:640px){ .cards,.products{ grid-template-columns:1fr; } .mcov{ padding:26px 14px; } .mcov__new,.mcov__pw{ display:none; } .mblaho{ gap:12px; padding:24px 10px; } .mblaho__phone{ width:176px; } .mblaho__lock{ width:54px; height:130px; } .card--wide{ grid-template-columns:1fr; gap:0; } .card--wide .card__tags{ margin-top:20px; } .cl{ opacity:.6; } .cl-br{ display:block; flex-basis:100%; height:0; } .cl--cot,.cl--waca{ height:26px; } .cl--fleysen{ height:16px; } .cl--theis{ height:22px; } .cl--pokis{ height:24px; } .cl--blaho{ height:17px; } .cl--glowly{ height:18px; } .hero{ min-height:92svh; padding-top:120px; } .hero__cta .btn{ flex:1 1 auto; } .footer__cols{ grid-template-columns:1fr 1fr; } .footer__legal{ grid-template-columns:1fr; gap:18px; } .faq__a p{ padding-right:10px; } .steps{ padding-left:0; } .steps__line{ left:25px; } .step{ grid-template-columns:50px 1fr; } .product__viz{ display:none; } .footer__bottom{ flex-direction:column; gap:8px; } } @media (max-width:420px){ .stats__grid{ grid-template-columns:1fr; } .stat{ border-left:0 !important; } .stats__grid > .stat:nth-child(n+2){ padding-top:22px; border-top:1px solid var(--line); } } /* ═══ A11Y ═══ */ :focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:6px; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none; } .split__i{ transform:none; opacity:1; } .grain{ display:none; } }