/*! PlochĂ© CSS zamerne - viz komentar nize. * @layer se nepouziva: Monic sve styly nezavrstvuje a nezavrstvene * deklarace maji v kaskade prednost pred zavrstvenymi. Tenhle soubor * se nacita jako posledni, takze rozhoduje poradi a specificita. */ /*! * MarekStejskal.cz - front-end styly dcerine sablony * Nacita se az za styly Monicu, aby je mohl prepsat. */ @property --ang{syntax:"";inherits:false;initial-value:0deg} @property --spin{syntax:"";inherits:false;initial-value:0deg} :root{ --g-500:#5EBB32; --g-600:#4A9E25; --g-700:#34811C; --g-800:#296512; --g-900:#1D4A0E; --g-tint:color-mix(in oklab,var(--g-500) 12%,white); --ink:#0E1A22; --ink-2:#16242E; --ink-3:#1D2F39; --slate:#546B62; --mist:#E9EEE1; --line:color-mix(in oklab,var(--ink) 11%,white); --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono",Consolas,monospace; --t-xs:clamp(.72rem,.7rem + .1vw,.79rem); --t-sm:clamp(.85rem,.82rem + .14vw,.92rem); --t-md:clamp(.98rem,.94rem + .2vw,1.06rem); --t-lg:clamp(1.15rem,1.05rem + .5vw,1.4rem); --t-xl:clamp(1.6rem,1.25rem + 1.7vw,2.5rem); --t-2xl:clamp(2.1rem,1.4rem + 3.4vw,4.1rem); --pad:clamp(1rem,4vw,2.25rem); --gap:clamp(1rem,2.2vw,1.5rem); --rhythm:clamp(3.5rem,7vw,6.5rem); --shell:78rem; --ease:linear(0,.13 3.5%,.48 12%,.78 22%,.92 29%,.99 37%,1.02 45%,1 60%,1); --swift:cubic-bezier(.2,.8,.25,1); --burst:polygon(50% 0%,56.57% 8.52%,65.45% 2.45%,69.07% 12.58%,79.39% 9.55%,79.7% 20.3%,90.45% 20.61%,87.42% 30.93%,97.55% 34.55%,91.48% 43.43%,100% 50%,91.48% 56.57%,97.55% 65.45%,87.42% 69.07%,90.45% 79.39%,79.7% 79.7%,79.39% 90.45%,69.07% 87.42%,65.45% 97.55%,56.57% 91.48%,50% 100%,43.43% 91.48%,34.55% 97.55%,30.93% 87.42%,20.61% 90.45%,20.3% 79.7%,9.55% 79.39%,12.58% 69.07%,2.45% 65.45%,8.52% 56.57%,0% 50%,8.52% 43.43%,2.45% 34.55%,12.58% 30.93%,9.55% 20.61%,20.3% 20.3%,20.61% 9.55%,30.93% 12.58%,34.55% 2.45%,43.43% 8.52%); } *,*::before,*::after{box-sizing:border-box} body{margin:0;background:#fff;color:var(--slate); font:400 var(--t-md)/1.7 var(--sans);-webkit-font-smoothing:antialiased; overflow-x:clip;text-wrap:pretty} h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:800;line-height:1.04; letter-spacing:-.04em;text-wrap:balance} p,ul{margin:0} a{color:inherit;text-decoration:none} img{display:block;max-width:100%;height:auto} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} :focus-visible{outline:2px solid var(--g-700);outline-offset:3px;border-radius:3px} ::selection{background:var(--g-500);color:#06120A} .shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)} .band{padding-block:var(--rhythm)} .band--tight{padding-block:calc(var(--rhythm)*.6)} .band--mist{background:var(--mist)} .band--ink{background:var(--ink);color:#fff} /* sikmy predel mezi sekcemi - klin kresli SVG, drzi uhel v kazde sirce */ .band--cut{position:relative;margin-block-start:clamp(2.4rem,5vw,4rem)} .wedge{position:absolute;z-index:5;inset-inline:0;inset-block-end:100%;inline-size:100%; block-size:clamp(2.4rem,5vw,4rem);display:block} .band--mist .wedge .fillup{fill:var(--mist)} .band--ink .wedge .fillup{fill:var(--ink)} .wedge .edge{stroke:var(--g-500);stroke-width:4;vector-effect:non-scaling-stroke;fill:none} .cols{display:grid;gap:clamp(1.6rem,4vw,3.6rem);align-items:center; grid-template-columns:repeat(auto-fit,minmax(min(24rem,100%),1fr))} .cards{display:grid;gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(min(15.5rem,100%),1fr))} .eyebrow{display:flex;align-items:center;gap:.55rem;font-size:var(--t-sm); font-weight:700;color:var(--g-700)} .eyebrow::before{content:"";inline-size:20px;block-size:2px;background:var(--g-500);flex:none} .eyebrow--on-dark{color:var(--g-500)} .lede{max-inline-size:52ch;font-size:var(--t-md)} .lede--big{font-size:var(--t-lg);line-height:1.5;max-inline-size:44ch} .h-sec{font-size:var(--t-xl)} .head{display:grid;gap:.9rem;max-inline-size:50ch;margin-block-end:clamp(2rem,4vw,3rem)} .head--mid{margin-inline:auto;text-align:center} .head--mid .eyebrow{justify-content:center} .head--mid .lede{margin-inline:auto} .head--row{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap} .head--row .head{margin-block-end:0} .notice{background:var(--ink);color:#93A79C;font-size:var(--t-xs);padding-block:.7rem} .notice b{color:var(--g-500);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase} .notice .shell{display:flex;gap:.6rem;flex-wrap:wrap;align-items:baseline} .topbar{background:linear-gradient(100deg,var(--g-800),var(--g-500));color:#fff;font-size:var(--t-xs)} .topbar .shell{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding-block:.6rem;flex-wrap:wrap} .topbar ul{display:flex;gap:1.5rem;list-style:none;padding:0;flex-wrap:wrap} .topbar li{display:flex;align-items:center;gap:.4rem} .topbar nav{display:flex;gap:.9rem} .topbar nav a{opacity:.85;transition:opacity .25s}.topbar nav a:hover{opacity:1} .masthead{position:sticky;top:0;z-index:50;background:color-mix(in oklab,white 88%,transparent); backdrop-filter:saturate(1.6) blur(14px);border-block-end:1px solid var(--line); transition:box-shadow .35s var(--swift),background .35s} .masthead[data-stuck]{box-shadow:0 10px 34px -20px color-mix(in oklab,var(--ink) 60%,transparent); background:color-mix(in oklab,white 95%,transparent)} .masthead .shell{display:flex;align-items:center;justify-content:space-between;gap:1.4rem; padding-block:.95rem;transition:padding-block .35s var(--swift)} .masthead[data-stuck] .shell{padding-block:.55rem} .brand img{block-size:46px;inline-size:auto;transition:block-size .35s var(--swift)} .masthead[data-stuck] .brand img{block-size:36px} .navwrap{display:flex} .nav{display:flex;gap:1.55rem;font-size:var(--t-sm);font-weight:650;color:var(--ink);list-style:none;padding:0;margin:0} .nav a{position:relative;padding-block:.35rem} .nav a::after{content:"";position:absolute;inset-inline:0;inset-block-end:0;block-size:2px; background:var(--g-500);scale:0 1;transform-origin:left;transition:scale .35s var(--swift)} .nav a:hover::after,.nav a[aria-current]::after{scale:1 1} .nav a:hover,.nav a[aria-current]{color:var(--g-700)} @media(width < 1180px){.navwrap{display:none}} /* ===== ROZBALOVACI MENU ===== */ .nav > li{position:relative;list-style:none} .nav > li > a{display:inline-flex;align-items:center;gap:.3rem} .nav .caret{transition:rotate .3s var(--swift)} .nav > li:hover .caret,.nav > li:focus-within .caret{rotate:180deg} .drop{position:absolute;inset-block-start:calc(100% + .55rem);inset-inline-start:-1rem;z-index:60; min-inline-size:16.5rem;background:#fff;border:1px solid var(--line); box-shadow:0 26px 56px -26px color-mix(in oklab,var(--ink) 60%,transparent); padding:.5rem;display:grid;gap:.1rem;list-style:none;margin:0; opacity:0;visibility:hidden;translate:0 8px; transition:opacity .28s var(--swift),translate .28s var(--swift),visibility .28s} .nav > li:hover .drop,.nav > li:focus-within .drop{opacity:1;visibility:visible;translate:0 0} .drop::before{content:"";position:absolute;inset-block-end:100%;inset-inline:0;block-size:.55rem} .drop a{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;font-size:var(--t-sm); font-weight:600;color:var(--ink);transition:background .22s,color .22s,padding-inline-start .22s} .drop a::before{content:"";inline-size:5px;aspect-ratio:1;border-radius:50%;background:var(--g-500); flex:none;opacity:.35;transition:opacity .22s,scale .22s} .drop a:hover{background:var(--g-tint);color:var(--g-700);padding-inline-start:.95rem} .drop a:hover::before{opacity:1;scale:1.35} .drop small{display:block;font-weight:500;font-size:var(--t-xs);color:var(--slate);margin-block-start:.1rem} .drop a span{display:block} .callout{display:flex;align-items:center;gap:.7rem} .callout .disc{position:relative;inline-size:44px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center; background:var(--g-tint);flex:none;transition:.4s var(--swift)} /* ikona na sebe trvale upozornuje: zvoni a vysila kruhy */ .callout .disc svg{animation:handset 3.2s var(--swift) infinite} .callout .disc::before,.callout .disc::after{content:"";position:absolute;inset:0;border-radius:50%; border:2px solid var(--g-500);opacity:0;animation:ripple 3.2s var(--swift) infinite} .callout .disc::after{animation-delay:.5s} @keyframes handset{0%,72%,100%{rotate:0deg}76%{rotate:-16deg}80%{rotate:14deg}84%{rotate:-12deg}88%{rotate:10deg}92%{rotate:-6deg}} @keyframes ripple{0%{opacity:.65;scale:1}70%,100%{opacity:0;scale:1.85}} .callout:hover .disc{background:var(--g-500);scale:1.08} .callout:hover .disc svg{stroke:#fff} .callout small{display:block;font-size:var(--t-xs);line-height:1.3;color:var(--slate)} .callout strong{font-size:var(--t-md);font-weight:800;color:var(--g-700);letter-spacing:-.02em} @media(width < 34rem){.callout small{display:none}} .btn{--bg:var(--g-700);--fg:#fff;--hv:var(--g-500); display:inline-flex;align-items:center;gap:.55rem;position:relative;isolation:isolate; background:var(--bg);color:var(--fg);font-weight:700;font-size:var(--t-sm); padding:1rem 1.85rem;overflow:hidden;transition:translate .3s var(--swift),box-shadow .3s var(--swift)} .btn::before{content:"";position:absolute;inset:0;background:var(--hv);z-index:-1; translate:-101% 0;transition:translate .42s var(--ease)} .btn:hover::before{translate:0 0} /* Text pri najeti ztmavne. Zakladni tlacitko sviti pri hoveru svetlejsi zelenou (--hv je --g-500) a bily napis na ni mel kontrast jen 2.43 - pri prejeti mysi se prakticky ztratil. Tmavy inkoust na tehle zeleni dava 7.8. Varianty nize si barvu prepisuji samy, protoze maji jine pozadi. */ .btn:hover{translate:0 -2px;color:#06120A; box-shadow:0 14px 30px -14px color-mix(in oklab,var(--bg) 70%,transparent)} .btn svg{transition:translate .3s var(--swift)} .btn:hover svg{translate:4px 0} .btn--ghost{--bg:transparent;--fg:#fff;--hv:#fff;border:1px solid color-mix(in oklab,white 42%,transparent)} .btn--ghost:hover{color:var(--ink)} .btn--light{--bg:#fff;--fg:var(--g-800);--hv:var(--ink)} .btn--light:hover{color:#fff} .btn--ink{--bg:var(--ink);--fg:#fff;--hv:var(--g-700)} /* Inkoustove tlacitko prechazi do tmavsi zelene --g-700, kde bila drzi 4.88. Tmavy text by tu naopak spadl na 3.9, proto zustava bily. */ .btn--ink:hover{color:#fff} /* ===== SLIDER ===== */ .stage{position:relative;isolation:isolate;overflow:clip;min-block-size:clamp(32rem,74vh,46rem);display:grid; --px:0;--py:0;--mx:50%;--my:50%} .slide{grid-area:1/1;position:relative;display:grid;align-items:center; visibility:hidden;z-index:1} .slide[data-prev]{visibility:visible;z-index:2} /* nový snímek nastupuje diagonálním setřením zprava */ .slide[data-live]{visibility:visible;z-index:3;animation:wipein 1.05s var(--ease) both} @keyframes wipein{from{clip-path:polygon(100% 0,100% 0,118% 100%,118% 100%)} to{clip-path:polygon(0% 0,100% 0,100% 100%,0% 100%)}} .slide .plate{position:absolute;inset:-4%;background-size:cover;background-position:center 40%; scale:1.16;transition:scale 9.5s linear,translate .9s var(--swift)} .slide[data-live] .plate{scale:1; translate:calc(var(--px) * -18px) calc(var(--py) * -12px)} .slide .veil{position:absolute;inset:0;background:linear-gradient(96deg, color-mix(in oklab,var(--ink) 94%,transparent), color-mix(in oklab,var(--ink) 78%,transparent) 40%, color-mix(in oklab,var(--ink) 22%,transparent))} .slide .veil::after{content:"";position:absolute;inset:0; background:linear-gradient(0deg,color-mix(in oklab,var(--ink) 55%,transparent),transparent 45%)} /* světlo sledující kurzor + jemné zrno */ .stage .spot{position:absolute;inset:0;z-index:4;pointer-events:none;mix-blend-mode:soft-light; background:radial-gradient(38rem 38rem at var(--mx) var(--my), color-mix(in oklab,var(--g-500) 55%,transparent),transparent 62%); opacity:.85;transition:opacity .5s} .stage .grain{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.16; background-image:radial-gradient(#fff .6px,transparent .6px);background-size:3px 3px; mix-blend-mode:overlay} .slide .shell{position:relative;z-index:6;inline-size:100%; padding-block:clamp(3rem,7vw,5rem) clamp(9rem,15vw,13rem)} .slide h1,.slide .slide-h{color:#fff;font-size:var(--t-2xl);max-inline-size:19ch;margin-block-start:1.1rem;font-weight:800;letter-spacing:-.04em;line-height:1.04} /* nadpis se vysouvá po slovech zpoza masky */ .slide h1 .w,.slide .slide-h .w{display:inline-block;overflow:hidden;padding-block-end:.12em;margin-block-end:-.12em; vertical-align:bottom} .slide h1 .w > i,.slide .slide-h .w > i{display:inline-block;font-style:normal} .slide[data-live] h1 .w > i,.slide[data-live] .slide-h .w > i{animation:wordup .95s var(--ease) backwards; animation-delay:calc(.18s + var(--i) * .07s)} @keyframes wordup{from{translate:0 108%;opacity:0;rotate:2.5deg}to{translate:0 0;opacity:1;rotate:0deg}} .slide .sub{color:color-mix(in oklab,white 84%,transparent);max-inline-size:46ch; margin-block-start:1.1rem;font-size:var(--t-lg);line-height:1.45} .pill{display:inline-flex;align-items:center;gap:.55rem;margin-block-start:1.4rem; background:color-mix(in oklab,var(--g-500) 20%,transparent); border:1px solid color-mix(in oklab,var(--g-500) 52%,transparent); color:#fff;font-size:var(--t-sm);font-weight:700;padding:.42rem .95rem;border-radius:99px;backdrop-filter:blur(6px)} .pill i{inline-size:7px;aspect-ratio:1;border-radius:50%;background:var(--g-500);animation:blip 1.9s ease-in-out infinite} @keyframes blip{0%,100%{opacity:.35;scale:.8}50%{opacity:1;scale:1.3}} .actions{display:flex;align-items:center;gap:1.4rem;margin-block-start:2rem;flex-wrap:wrap} .ph-inline{display:flex;align-items:center;gap:.75rem} .ph-inline .disc{inline-size:50px;aspect-ratio:1;border-radius:50%;background:#fff; display:grid;place-items:center;flex:none;animation:sonar 2.8s ease-out infinite} @keyframes sonar{0%{box-shadow:0 0 0 0 color-mix(in oklab,white 45%,transparent)}70%{box-shadow:0 0 0 17px transparent}100%{box-shadow:0 0 0 0 transparent}} .ph-inline small{display:block;font-size:var(--t-xs);color:color-mix(in oklab,white 70%,transparent)} .ph-inline strong{color:#fff;font-size:var(--t-md);font-weight:800;letter-spacing:-.02em} .slide[data-live] .anim{animation:rise .95s var(--ease) backwards} .slide[data-live] .anim:nth-child(1){animation-delay:.15s} .slide[data-live] .anim:nth-child(2){animation-delay:.27s} .slide[data-live] .anim:nth-child(3){animation-delay:.39s} .slide[data-live] .anim:nth-child(4){animation-delay:.51s} .slide[data-live] .anim:nth-child(5){animation-delay:.63s} @keyframes rise{from{opacity:0;translate:0 30px;filter:blur(6px)}to{opacity:1;translate:0;filter:none}} .arrows{position:absolute;z-index:6;inset-block-start:42%;inset-inline:clamp(.5rem,2vw,1.6rem); translate:0 -50%;display:flex;justify-content:space-between;pointer-events:none} .arrows button{pointer-events:auto;inline-size:52px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center; color:#fff;border:1px solid color-mix(in oklab,white 34%,transparent); background:color-mix(in oklab,var(--ink) 42%,transparent);backdrop-filter:blur(8px);transition:.32s var(--swift)} .arrows button:hover{background:var(--g-500);border-color:var(--g-500);scale:1.09} @media(width < 48rem){.arrows{display:none}} .dots{position:absolute;z-index:6;inset-block-end:clamp(9rem,15.5vw,13.5rem); left:50%;translate:-50% 0;display:flex;gap:.7rem} .dots button{inline-size:34px;block-size:4px;background:color-mix(in oklab,white 34%,transparent); position:relative;overflow:hidden;transition:inline-size .4s var(--swift)} .dots button[aria-current]{inline-size:64px} .dots button::after{content:"";position:absolute;inset:0;background:var(--g-500);transform-origin:left;scale:0 1} .dots button[aria-current]::after{animation:fill 7s linear forwards} @keyframes fill{to{scale:1 1}} .counter{position:absolute;z-index:6;inset-block-end:clamp(8.8rem,15.5vw,13.3rem); inset-inline-end:var(--pad);font-family:var(--mono);color:#fff;font-size:var(--t-sm); font-variant-numeric:tabular-nums;letter-spacing:.08em} .counter em{font-style:normal;color:var(--g-500);font-size:var(--t-lg);font-weight:700} @media(width < 48rem){.counter{display:none}} /* ===== 5 SLUŽEB ===== */ .strip{background:var(--mist);margin-block-start:clamp(-7rem,-10vw,-4rem);position:relative;z-index:10; box-shadow:0 -20px 50px -30px color-mix(in oklab,var(--ink) 60%,transparent)} .strip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr))} .cell{position:relative;overflow:hidden;padding:clamp(1.5rem,2.6vw,2.1rem) clamp(1.1rem,1.9vw,1.5rem); display:grid;gap:.42rem;align-content:start; border-inline-end:1px solid color-mix(in oklab,var(--ink) 9%,transparent); transition:background .35s var(--swift),translate .35s var(--swift)} .cell:last-child{border-inline-end:0} .cell::after{content:"";position:absolute;inset-inline-start:0;inset-block-end:0;block-size:3px;inline-size:100%; background:var(--g-500);scale:0 1;transform-origin:left;transition:scale .45s var(--ease)} .cell:hover{background:#fff;translate:0 -6px} .cell:hover::after{scale:1 1} .cell:hover .glyph{translate:0 -4px;rotate:-7deg} .cell .glyph{inline-size:46px;aspect-ratio:1;margin-block-end:.35rem;transition:.4s var(--swift)} .cell h3{font-size:var(--t-md)} .cell p{font-size:var(--t-xs);line-height:1.55} .cell .price{font-family:var(--mono);font-weight:700;color:var(--g-700);font-size:var(--t-xs)} .cell .more{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase;color:var(--g-600);margin-block-start:.25rem; transition:gap .3s var(--swift),color .3s} .cell:hover .more{gap:.8rem;color:var(--g-700)} .ticker{background:var(--ink);color:#fff;padding-block:1.05rem;overflow:clip; mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ticker-track{display:flex;gap:2.8rem;inline-size:max-content;animation:drift 38s linear infinite; font-weight:800;font-size:var(--t-md);letter-spacing:-.02em} .ticker-track span{display:inline-flex;align-items:center;gap:2.8rem;white-space:nowrap} .ticker-track span::after{content:"";inline-size:7px;aspect-ratio:1;border-radius:50%;background:var(--g-500);flex:none} @keyframes drift{to{translate:-50% 0}} .ticker:hover .ticker-track{animation-play-state:paused} /* ===== SHINE (přejezd proužku přes obrázek) ===== */ .shine{position:relative;overflow:hidden} .shine::after{content:"";position:absolute;inset-block:0;inline-size:60%;inset-inline-start:-90%; background:linear-gradient(100deg,transparent,color-mix(in oklab,white 42%,transparent),transparent); skew:-18deg;pointer-events:none;z-index:3} .shine:hover::after{animation:sweep 1.05s var(--swift)} @keyframes sweep{to{inset-inline-start:150%}} /* ===== DVOJICE FOTEK ===== */ .duo{position:relative;padding-block-end:clamp(3.5rem,7vw,5.5rem); padding-inline-end:clamp(2.5rem,6vw,4.5rem)} .duo .big{position:relative;z-index:1} .duo .big img{inline-size:100%;transition:scale .9s var(--swift)} .duo .big:hover img{scale:1.05} .duo .small{position:absolute;z-index:3;inset-block-end:0;inset-inline-end:0; inline-size:clamp(11rem,42%,17rem);border:7px solid #fff; box-shadow:0 22px 50px -24px color-mix(in oklab,var(--ink) 70%,transparent)} .duo .small img{inline-size:100%;transition:scale .9s var(--swift)} .duo .small:hover img{scale:1.06} .duo canvas{position:absolute;z-index:0;inset-block-start:-1.5rem;inset-inline-end:0; inline-size:clamp(9rem,34%,14rem);aspect-ratio:1.35;pointer-events:none} .duo .tagbox{position:absolute;z-index:4;inset-block-start:1.2rem;inset-inline-start:1.2rem; background:var(--g-700);color:#fff;padding:.85rem 1.15rem;display:grid;gap:.05rem} .duo .tagbox b{font-size:var(--t-lg);font-weight:800;letter-spacing:-.03em;line-height:1} .duo .tagbox span{font-size:var(--t-xs);opacity:.9} .pair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:.9rem;margin-block-start:1.5rem} .pair > div{border:1px solid var(--line);border-inline-start:3px solid var(--g-500); padding:.95rem 1.1rem;display:grid;gap:.25rem;transition:background .3s} .pair > div:hover{background:var(--g-tint)} .pair b{color:var(--ink);font-size:var(--t-sm)} .pair span{font-size:var(--t-xs);line-height:1.55} .checks{display:grid;gap:.8rem;margin-block-start:1.5rem} .checks li{display:flex;gap:.7rem;align-items:start;font-size:var(--t-sm);color:var(--ink);font-weight:650;list-style:none} .checks svg{flex:none;margin-block-start:.25rem} /* ===== TARIFY NA ŠÍŘKU ===== */ .plans{display:grid;gap:1rem} .plan{display:grid;align-items:center;gap:clamp(1rem,2.5vw,2.2rem); grid-template-columns:minmax(13rem,1.25fr) auto minmax(12rem,1fr) minmax(11rem,auto); padding:clamp(1.5rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem); position:relative;isolation:isolate;overflow:hidden; background-color:#fff; background-image:radial-gradient(color-mix(in oklab,var(--g-500) 26%,transparent) 1.15px,transparent 1.15px); background-size:17px 17px; border:1px solid var(--line); transition:translate .45s var(--swift),box-shadow .45s var(--swift),border-color .5s,color .55s var(--swift)} /* jednolitá barva se rozlévá od středu do celého řádku */ .plan::after{content:"";position:absolute;inset:0;z-index:0;background:var(--ink); clip-path:circle(0% at 50% 50%);transition:clip-path .8s var(--ease)} .plan > *{position:relative;z-index:1} /* odkaz pres celou kartu — bez vnorenych , ktere prohlizec rozpoji */ .stretch{color:inherit} .stretch::after{content:"";position:absolute;inset:0;z-index:3} .plan:focus-within{outline:2px solid var(--g-500);outline-offset:3px} .plan:hover::after{clip-path:circle(88% at 50% 50%)} .plan:hover{translate:0 -4px;border-color:var(--ink); box-shadow:0 26px 56px -30px color-mix(in oklab,var(--ink) 78%,transparent)} .plan:hover h3,.plan:hover .rate,.plan:hover .cost{color:#fff} .plan:hover .kicker{color:var(--g-500)} .plan:hover .rate small,.plan:hover .desc,.plan:hover li{color:color-mix(in oklab,white 80%,transparent)} .plan--dark{background-color:var(--ink);border-color:var(--ink); background-image:radial-gradient(color-mix(in oklab,var(--g-500) 32%,transparent) 1.15px,transparent 1.15px)} .plan--dark h3,.plan--dark .rate,.plan--dark .cost{color:#fff} .plan--dark .kicker{color:var(--g-500)} .plan--dark .desc,.plan--dark li,.plan--dark .rate small{color:color-mix(in oklab,white 74%,transparent)} .plan--dark::after{background:var(--g-700)} .plan--dark:hover{border-color:var(--g-700)} .plan--dark:hover .kicker{color:#06120A} .plan--dark:hover .rate small,.plan--dark:hover .desc,.plan--dark:hover li{color:color-mix(in oklab,white 90%,transparent)} .kicker{font-size:var(--t-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--g-700);transition:color .55s var(--swift)} .plan h3{font-size:var(--t-lg);margin-block-start:.3rem;transition:color .55s var(--swift)} .plan .desc{font-size:var(--t-sm);margin-block-start:.45rem;max-inline-size:32ch;transition:color .55s var(--swift)} .plan .icons{display:flex;gap:.6rem} .plan .icons span{inline-size:52px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center; background:var(--g-tint);transition:.45s var(--swift)} .plan--dark .icons span{background:color-mix(in oklab,white 12%,transparent)} .plan:hover .icons span{background:var(--g-500);rotate:-8deg;scale:1.06} .plan:hover .icons span svg{stroke:#06120A} .plan ul{list-style:none;display:grid;gap:.5rem} .plan li{font-size:var(--t-sm);display:flex;gap:.5rem;align-items:start;transition:color .55s var(--swift)} .plan li svg{flex:none;margin-block-start:.28rem} .plan .money{display:grid;justify-items:end;gap:.7rem;text-align:end} .plan .rate{font-family:var(--mono);font-weight:700;color:var(--g-700);line-height:.88; font-size:clamp(2.4rem,5.5vw,3.4rem);letter-spacing:-.055em;transition:color .55s var(--swift)} .plan .rate small{font-family:var(--sans);font-size:var(--t-sm);color:var(--slate); font-weight:500;letter-spacing:normal;margin-inline-start:.2rem;transition:color .55s var(--swift)} .plan .cost{font-size:var(--t-sm);font-weight:700;transition:color .55s var(--swift)} .plan .flag{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:2;background:var(--g-500);color:#06120A; font-size:.61rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:.28rem .7rem} @media(width < 62rem){ .plan{grid-template-columns:1fr 1fr;gap:1.4rem} .plan .icons{grid-column:2;justify-self:end} .plan .money{grid-column:1/-1;justify-items:start;text-align:start} } @media(width < 34rem){.plan{grid-template-columns:1fr}.plan .icons{grid-column:1;justify-self:start}} /* ===== SPEEDTEST ===== */ /* stejný rastr teček jako tarify — sekce tím zapadá do stránky */ .ms-speed{position:relative;overflow:hidden;isolation:isolate;color:#fff; background-color:var(--ink); background-image:radial-gradient(color-mix(in oklab,var(--g-500) 30%,transparent) 1.15px,transparent 1.15px); background-size:17px 17px; padding:clamp(2.4rem,5vw,4rem) clamp(1.8rem,4vw,3.6rem); display:grid;gap:clamp(2rem,4vw,3.5rem);align-items:center; grid-template-columns:minmax(min(20rem,100%),1fr) auto} @media(width < 58rem){.ms-speed{grid-template-columns:1fr;justify-items:start}} .ms-speed .copy{position:relative;z-index:2} .ms-speed h2{color:#fff;font-size:var(--t-xl)} .ms-speed p{color:color-mix(in oklab,white 72%,transparent);margin-block-start:.8rem;max-inline-size:42ch} .ms-speed .meta{display:flex;gap:1.8rem;flex-wrap:wrap;margin-block-start:1.6rem; font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase; color:color-mix(in oklab,white 48%,transparent)} .ms-speed .meta b{display:block;color:var(--g-500);font-size:var(--t-md);letter-spacing:-.02em; text-transform:none;margin-block-start:.2rem} /* ručičkový ukazatel místo pruhů */ /* znacka mereni rychlosti */ .stmark{display:inline-flex;align-items:center;gap:.7rem;margin-block-end:1rem} .stmark .glyph{inline-size:44px;aspect-ratio:1;border-radius:12px;flex:none;display:grid;place-items:center; background:linear-gradient(140deg,var(--g-500),var(--g-800)); box-shadow:0 10px 24px -12px color-mix(in oklab,var(--g-500) 70%,transparent)} .stmark .glyph svg{animation:needle 4s var(--swift) infinite} @keyframes needle{0%,100%{rotate:-38deg}45%{rotate:42deg}60%{rotate:20deg}} .stmark b{font-size:var(--t-md);color:#fff;letter-spacing:-.02em} .stmark small{display:block;font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.12em; text-transform:uppercase;color:var(--g-500)} .gauge{position:relative;z-index:2;inline-size:clamp(15rem,26vw,19rem);display:grid;justify-items:center;gap:1.1rem} .gauge svg{inline-size:100%;block-size:auto;overflow:visible} .gauge .track{fill:none;stroke:color-mix(in oklab,white 12%,transparent);stroke-width:9;stroke-linecap:round} .gauge .fill{fill:none;stroke:url(#gg);stroke-width:9;stroke-linecap:round; stroke-dasharray:1 1;stroke-dashoffset:1; transition:stroke-dasharray 2.2s var(--ease)} .gauge[data-run] .fill{stroke-dasharray:.86 1} .gauge .tick{stroke:color-mix(in oklab,white 22%,transparent);stroke-width:1.6;stroke-linecap:round} .gauge .val{position:absolute;inset-block-start:52%;inset-inline:0;text-align:center;pointer-events:none} .gauge .val b{display:block;font-family:var(--mono);font-size:clamp(1.9rem,4vw,2.5rem);font-weight:700; color:#fff;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums} .gauge .val span{font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.16em; color:color-mix(in oklab,white 52%,transparent);text-transform:uppercase} .gauge .btn{inline-size:100%;justify-content:center} /* Polohu urcujeme napevno. Vychozi centrovani modalniho