/* ============================================================ NETMA - kostra pripadove studie. Sdilene s kazdou dalsi studii: hero, souhrn cisel, fazovy layout, snimky, citat, roadmapa, zaver a vyzva. Panely, ktere ma jen jedna studie (Meta jadro, Google radar, sit kanalu, hrbitov kreativ), si nese stranka sama - stejne jako terminal a graf u stranek sluzeb. Studie nastavuje akcent pres --akcent na . ============================================================ */ /* ============================================================ Fonty případových studií. Zbytek webu jede na Archivo, ale studie byly navržené v Poppins (nadpisy) a Inter (text) - a je to na nich vidět: Archivo Black je širší a měkčí, takže sazba působila rozmazaně proti originálu. Fonty jsou self-hostované jako všechno ostatní, žádný požadavek ven. Poppins: 4 řezy x 2 subsety = 53 kB. Inter je variabilní, jeden soubor na subset (134 kB) - statické řezy by dnes Google vydal jako plný variabilní soubor pro každý z nich, tedy 535 kB. ============================================================ */ @font-face{ font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/poppins-500-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap; src:url('fonts/poppins-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/poppins-600-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap; src:url('fonts/poppins-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('fonts/poppins-800-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap; src:url('fonts/poppins-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap; src:url('fonts/poppins-900-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap; src:url('fonts/poppins-900-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap; src:url('fonts/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Inter';font-style:normal;font-weight:300 700;font-display:swap; src:url('fonts/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Studie stojí na tmavším podkladu než zbytek webu. Originál měl #020203 a proti němu naše --ink #08090b působilo šedě - hlavně na velkých prázdných plochách mezi sekcemi. Předefinováním --ink se sveze i všechno, co se na něj odkazuje (třeba výkroj v prstenci souhrnu, který musí mít přesně barvu stránky). */ html:has(body.pripad){background:#020203} .pripad{ --ink:#020203; --font-display:'Poppins',Archivo,sans-serif; --font-body:'Inter',Archivo,system-ui,sans-serif; font-family:var(--font-body); --akcent:var(--mint); --zlata:#D4AF37; --zlata-svetla:#FFDF73; --cervena:#ea4335; /* vnitrek snimku a telefonu je o chlup svetlejsi nez stranka */ --panel:#050507; --sklo:rgba(12,12,16,.45); --sklo-ram:rgba(255,255,255,.05); } /* Sdílená hlavička a patička patří webu, ne studii - zůstávají v Archivu. */ .pripad .hlavicka,.pripad .site-footer{ --font-display:'Archivo Black',Archivo,sans-serif; --font-body:Archivo,system-ui,-apple-system,sans-serif; font-family:var(--font-body); } /* Jen pro odecitace obrazovky. Nadpis v heru je cislo, takze kontext ("Pripadova studie ...") musi dodat neco skryteho. */ .jen-pro-cteni{ position:absolute;width:1px;height:1px; margin:-1px;padding:0;border:0; clip-path:inset(50%);overflow:hidden;white-space:nowrap; } /* ============ HERO ============ */ .pripad__hero{ position:relative; display:flex;flex-direction:column;align-items:center;justify-content:center; min-height:100svh; padding:9rem 1.5rem 12vh; text-align:center; overflow:hidden; } /* zlata aura misto mintove - studie ma vlastni akcent */ .pripad__aura{ position:absolute;top:42%;left:50%;translate:-50% -50%; width:min(100vw,1200px);aspect-ratio:1; background:radial-gradient(circle closest-side,rgb(from var(--akcent) r g b / .09) 0%,transparent 100%); filter:blur(80px); z-index:0;pointer-events:none; animation:aura 8s infinite alternate ease-in-out; } @keyframes aura{ from{translate:-50% -50%;scale:.9;opacity:.7} to{translate:-50% -50%;scale:1.1;opacity:1} } .pripad__odznak{ position:relative;z-index:2; display:inline-flex;align-items:center;gap:12px; margin-bottom:3rem;padding:.65rem 1.5rem; border:1px solid rgb(from var(--akcent) r g b / .3); border-radius:50px; background:rgb(from var(--akcent) r g b / .05); color:var(--zlata-svetla); font-family:var(--font-display);font-weight:600;font-size:.8rem; letter-spacing:.19em;text-transform:uppercase; } .pripad__odznak::before{ content:'';width:6px;height:6px;border-radius:50%; background:var(--akcent);box-shadow:0 0 15px var(--akcent); animation:tep 2s infinite; } @keyframes tep{0%,100%{opacity:1}50%{opacity:.3}} .pripad__nadpis{ position:relative;z-index:2; margin:0 0 1.5rem; font-family:var(--font-display);font-weight:900; font-size:clamp(3.2rem,10vw,9rem); /* Ů a Í maji nad sebou znamenko - nizsi line-height je userkne */ padding:.08em 0; line-height:1.2;letter-spacing:-.028em; /* prelevajici se zlaty lesk */ background:linear-gradient(-45deg,#fff 20%,var(--zlata-svetla) 40%,var(--zlata) 50%,var(--zlata-svetla) 60%,#fff 80%); background-size:200% auto; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; filter:drop-shadow(0 20px 40px rgb(from var(--zlata) r g b / .25)); /* Prvni prelev jede rychle a dojede presne s dopoctem cisla (1,6 s je DOBA v sluzba.js), pak se to teprve usadi do pomaleho okoli. Cela studie stoji na cislech a to prvni bylo nehybne. */ animation:lesk 1.6s linear 1,lesk 5s linear 1.6s infinite; } @keyframes lesk{to{background-position:200% center}} /* Sirka se rezervuje dopredu: bez toho by "0,0" -> "47,6" pri prechodu pres desitku skoclo o znak a s nim cely vycentrovany nadpis. */ .pripad__cislo{display:inline-block;min-width:3.4ch;text-align:right;font-variant-numeric:tabular-nums} .pripad__popis{ position:relative;z-index:2; max-width:44rem;margin:0 auto; font-size:1.2rem;line-height:1.8;font-weight:300; color:var(--muted); } .pripad__popis strong{color:var(--paper);font-weight:500} /* Bez merítka je "47,6 Milionů" jen velké číslo. Časový rámec a vložená částka z něj dělají násobek, který si čtenář umí přepočítat na sebe - a je to jediné místo v heru, kde stojí obě čísla vedle sebe. */ .pripad__meritko{ position:relative;z-index:2; margin:1.75rem 0 0; font-family:var(--font-display);font-weight:500;font-size:.8rem; letter-spacing:.19em;text-transform:uppercase; color:rgb(from var(--zlata) r g b / .75); } /* ============ SOUHRN CISEL (kruh + karty) ============ */ .souhrn{ position:relative;z-index:10; display:flex;flex-direction:column;align-items:center;gap:4rem; width:100%;max-width:1200px; margin:0 auto 10rem;padding:0 1.5rem; } .souhrn__jadro{ position:relative; display:flex;align-items:center;justify-content:center; width:min(450px,80vw);aspect-ratio:1; } .souhrn__zar{ position:absolute;inset:-10%; background:radial-gradient(circle,rgba(102,252,241,.15) 0%,rgb(from var(--zlata) r g b / .1) 40%,transparent 70%); filter:blur(40px);pointer-events:none; } /* Prstenec je rozdeleni obratu mezi kanaly, ne ozdoba. Toc se porad dokola nic nerikal - byl to jediny pohyb na strance, ktery nenesl informaci. Podily jsou skutecne: 37,01 / 47,61 = 77,74 % Meta, 10,6 / 47,61 = 22,26 % Google, dohromady presne sto. Zadny vymysleny jmenovatel typu "82,4 ze sta". Chipsy pod cislem jsou tim padem legenda, ne popisky. */ @property --p1{syntax:'';inherits:false;initial-value:0%} @property --p2{syntax:'';inherits:false;initial-value:0%} .souhrn__prstenec{ position:absolute;inset:0;border-radius:50%; --p1:0%;--p2:0%; background:conic-gradient(from -90deg, var(--mint) 0 var(--p1), var(--zlata) var(--p1) var(--p2), rgba(255,255,255,.05) var(--p2) 100%); transition:--p1 1.6s cubic-bezier(.16,1,.3,1),--p2 1.6s cubic-bezier(.16,1,.3,1); } /* obe naraz, takze se vysec Mety rozjede a zlata ji nasleduje - jeden sweep */ .souhrn__jadro.je-aktivni .souhrn__prstenec{--p1:77.74%;--p2:100%} /* stred prstence vykryje barva stranky, jinak by to byl plny kotouc */ .souhrn__prstenec::after{content:'';position:absolute;inset:3px;border-radius:50%;background:var(--ink)} .souhrn__carky{ position:absolute;inset:20px;border-radius:50%; border:1px dashed rgba(255,255,255,.15); animation:otoc 15s linear infinite reverse; } @keyframes otoc{to{rotate:360deg}} .souhrn__stred{ position:relative;z-index:3; display:flex;flex-direction:column;align-items:center;justify-content:center; width:84%;aspect-ratio:1;border-radius:50%; border:1px solid rgba(255,255,255,.05); /* pozadi je neprusvitne, takze backdrop-filter by nic neudelal */ background:radial-gradient(circle at top left,#141419,#050508); box-shadow:inset 0 0 60px rgba(0,0,0,.8),inset 0 0 20px rgba(102,252,241,.05); text-align:center; } .souhrn__stitek{ margin-bottom:.5rem; font-family:var(--font-display);font-weight:600;font-size:.8rem; letter-spacing:.19em;text-transform:uppercase;color:var(--muted); } .souhrn__cislo{ display:flex;align-items:baseline;justify-content:center; margin-bottom:.5rem; font-family:var(--font-display);font-weight:900; font-size:clamp(2.6rem,9vw,4.5rem);line-height:1; } .souhrn__cislo .jednotka{margin-left:6px;font-size:.45em;color:var(--zlata)} /* ---- pomer investice a trzeb ---- */ /* Cela pointa studie na jedne care: 577 k z 47,6 M je 1,2 %. Tri cisla vedle sebe si nikdo nepredstavi, tohle ano. */ .pomer{width:100%;max-width:900px;margin:0 auto} .pomer__pruh{ position:relative;height:10px;border-radius:5px;overflow:hidden; background:rgb(from var(--mint) r g b / .2); } .pomer__investice{ position:absolute;top:0;bottom:0;left:0; width:0;min-width:6px;border-radius:5px; background:var(--zlata);box-shadow:0 0 12px rgb(from var(--zlata) r g b / .7); transition:width 1.4s cubic-bezier(.16,1,.3,1) .2s; } .pomer.je-aktivni .pomer__investice{width:1.212%} .pomer__popis{ margin-top:1rem; font-size:.95rem;line-height:1.6;color:var(--muted);text-align:center; } .pomer__popis b{color:var(--paper);font-weight:600} .pomer__popis i{font-style:normal;color:var(--zlata)} .souhrn__znacky{display:flex;gap:10px;margin-top:1.2rem} .znacka{ padding:4px 12px;border-radius:4px; font-family:var(--font-display);font-weight:600;font-size:.75rem; letter-spacing:.08em;text-transform:uppercase; } .znacka--meta{background:rgba(6,104,225,.1);color:#4facfe;border:1px solid rgba(6,104,225,.2)} .znacka--google{background:rgba(234,67,53,.1);color:var(--cervena);border:1px solid rgba(234,67,53,.2)} /* rohove zavorky - jen dekorace, na mobilu prekazi */ .souhrn__roh{position:absolute;width:40px;height:40px;border:2px solid rgba(255,255,255,.1);pointer-events:none;z-index:4} .souhrn__roh--lh{top:-20px;left:-20px;border-right:0;border-bottom:0} .souhrn__roh--ph{top:-20px;right:-20px;border-left:0;border-bottom:0} .souhrn__roh--ld{bottom:-20px;left:-20px;border-right:0;border-top:0} .souhrn__roh--pd{bottom:-20px;right:-20px;border-left:0;border-top:0} .souhrn__karty{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;width:100%;max-width:1000px} .souhrn__karta{ padding:2rem;border-radius:16px;text-align:center; border:1px solid rgba(255,255,255,.05); border-top:1px solid rgba(102,252,241,.3); background:linear-gradient(180deg,rgba(20,20,25,.6) 0%,rgba(10,10,12,.8) 100%); box-shadow:0 20px 40px rgba(0,0,0,.5); transition:transform .4s ease,border-color .4s ease; } .souhrn__karta:hover{transform:translateY(-5px);border-top-color:var(--zlata)} .souhrn__hodnota{ display:flex;align-items:baseline;justify-content:center; margin-bottom:.5rem; font-family:var(--font-display);font-weight:800;font-size:2.8rem; } .souhrn__hodnota .jednotka{margin-left:4px;font-size:.45em;color:var(--mint)} .souhrn__popisek{font-family:var(--font-display);font-weight:500;font-size:.85rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} /* ============ TEXTOVY BLOK ============ */ .pripad__text{position:relative;z-index:2;max-width:800px;margin:0 auto;padding:0 1.5rem} .pripad__lead{ margin-bottom:3rem;padding-left:2rem; border-left:2px solid var(--zlata); font-size:1.4rem;line-height:1.8;font-weight:300;color:var(--paper); } :where(.pripad__text h2){ margin:4rem 0 1.5rem; font-family:var(--font-display);font-weight:800; font-size:clamp(2rem,4vw,2.5rem);letter-spacing:-.02em;line-height:1.25; } /* :where() sráží specificitu na nulu. Bez toho tohle pravidlo (třída + typ) přebíjelo třídy komponent uvnitř sekce - štítek "VYPNUTO" měl 18 px místo 11 a přerůstal kreativu, popisky uzlů v síti totéž. */ :where(.pripad__text p){margin-bottom:1.5rem;font-size:1.15rem;line-height:1.8;color:rgba(255,255,255,.72)} .pripad__text--nastred{text-align:center} /* Panely (síť, hřbitov, roadmapa, porovnání) potřebují víc než sloupec 800 px. */ .pripad__text--siroky{max-width:1200px;margin-bottom:10rem} /* Text se rozsviti, jak projizdi obrazem. Vychozi stav je ROZSVICENY - kdyby JS nedobehlo, nesmi zustat neviditelny. */ .rozsvit{ --svetla:#fff; --postup:0%; background:linear-gradient(180deg,var(--svetla) 40%,rgba(255,255,255,.12) 60%); background-size:100% 200%; background-position:0% var(--postup); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; will-change:background-position; } p.rozsvit{--svetla:rgba(255,255,255,.7)} /* ============ FAZE (stridave sloupce) ============ */ .faze{ position:relative; display:flex;flex-direction:column;gap:12rem; max-width:1200px;margin:12rem auto 12rem;padding:0 1.5rem; } /* svetelna osa uprostred - jen tam, kde jsou opravdu dva sloupce */ .faze__osa{position:absolute;top:0;bottom:0;left:50%;translate:-50% 0;width:1px;background:rgba(255,255,255,.05);z-index:0;display:none} .faze__radek{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:start} /* prohozeni sloupcu pres order, ne pres direction:rtl - rtl by prehodilo i interpunkci a posuvniky uvnitr */ .faze__radek--obraceny .faze__text{order:2} .faze__text{position:sticky;top:30vh;padding:2rem 0} .faze__nadhlavi{ display:flex;align-items:center;gap:15px; margin-bottom:1.5rem; font-family:var(--font-display);font-weight:600;font-size:.8rem; letter-spacing:.25em;text-transform:uppercase; color:var(--akcent); } .faze__nadhlavi::before{content:'';width:30px;height:1px;background:currentColor;opacity:.5} .faze__nadhlavi--zlata{color:var(--zlata)} .faze__nadhlavi--mint{color:var(--mint)} .faze__nadhlavi--cervena{color:var(--cervena)} .faze__nadpis{ margin:0 0 2rem; font-family:var(--font-display);font-weight:500; font-size:clamp(2rem,3vw,2.6rem);line-height:1.25;letter-spacing:-.02em; } .faze__nadpis strong{font-weight:800} /* Fáze mají menší stupeň (originál .phase-title), samostatné sekce větší (.section-title) - a v obou nese lehká váha první část nadpisu a tučná tu důležitou. Bez toho poměr nadpisu k textu spadl na 2,4× proti 3,0× v originálu a sekce působily plošší. */ .sekce__nadpis{ margin:0 0 2rem; font-family:var(--font-display);font-weight:500; font-size:clamp(2.5rem,4vw,3.5rem);line-height:1.15;letter-spacing:-.02em; } .sekce__nadpis strong{font-weight:800} /* Kotva je videt az po najeti na nadpis - jinak by na kazde sekci visel mrizkovy znak. Klavesnici se ukaze pri fokusu, jinak by byla nedosazitelna. */ .kotva{ margin-left:.35em; font-size:.55em;font-weight:400;color:var(--muted);text-decoration:none; opacity:0; transition:opacity .25s ease,color .25s ease; } /* Odhaleni visi na `:focus`, ne `:focus-visible` - jinak by klavesnice mohla stat na prvku, ktery neni videt. Obrys uz `:focus-visible` staci. */ h2:hover > .kotva,.kotva:focus{opacity:1} .kotva:hover{color:var(--zlata)} .kotva:focus-visible{outline:2px solid var(--zlata);outline-offset:3px;border-radius:3px} @media (hover:none){.kotva{display:none}} .faze__odstavec{max-width:750px;margin-bottom:1.5rem;font-size:1.1rem;line-height:1.8;font-weight:300;color:var(--muted)} .faze__odstavec strong{color:var(--paper);font-weight:600} .faze__vizual{display:flex;flex-direction:column;gap:3rem} .faze__vizual--lepivy{position:sticky;top:30vh} /* ============ SNIMEK (okno s obrazkem) ============ */ .snimek{ position:relative;overflow:hidden; border:1px solid var(--sklo-ram);border-radius:16px; background:var(--sklo); box-shadow:0 40px 80px rgba(0,0,0,.5); opacity:0;translate:0 50px; transition:opacity 1s cubic-bezier(.16,1,.3,1),translate 1s cubic-bezier(.16,1,.3,1); } .snimek.je-aktivni{opacity:1;translate:0 0} .snimek--zlaty{border-color:rgb(from var(--zlata) r g b / .2);box-shadow:0 30px 80px rgb(from var(--zlata) r g b / .05)} .snimek__lista{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.02);background:rgba(0,0,0,.3)} .snimek__tecky{display:flex;gap:6px} .snimek__tecky i{width:10px;height:10px;border-radius:50%;opacity:.5} .snimek__tecky i:nth-child(1){background:#ff5f56} .snimek__tecky i:nth-child(2){background:#ffbd2e} .snimek__tecky i:nth-child(3){background:#27c93f} .snimek__nazev{margin:0 auto;padding-right:46px;font-family:var(--font-display);font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)} .snimek--zlaty .snimek__nazev{color:var(--zlata)} /* Pevná výška dělá dvě věci naráz. Obrázky mají různý poměr stran (779 a 858 px na výšku), takže bez ní by karty "původní stav" a "nová identita" byly různě vysoké a přestaly by číst jako dvojice před/po. A drží zobrazenou šířku pod 375 px, což je půlka zdrojových 750 px - na retině je potřeba dvojnásobek, jinak prohlížeč dopočítává a snímek je měkký. Naměřeno: při 520 px vycházela hustota 1,71x, teď 2,0x. Větší zdroj neexistuje, WordPress vydává 750 px jako "full". */ .snimek__telo{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; height:450px;padding:2rem; background:var(--panel); } /* Zdroje jsou 750 px široké snímky z Instagramu - víc na WordPressu není. Ztlumení na 85 % z nich dělalo ještě měkčí kaši, než jsou samy o sobě. */ .snimek__telo img{ display:block;width:auto;height:auto; max-width:100%;max-height:100%; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.6); transition:scale .4s ease; } .snimek:hover .snimek__telo img{scale:1.03} /* ============ POROVNÁNÍ PŘED/PO ============ Fáze 01 je celá o porovnání, ale dvě karty pod sebou porovnat nejdou - než čtenář dojede k druhé, první už nevidí. Jeden rám s rukojetí to zkrátí ze třiceti vteřin na jednu. Ovladač je nativní : klávesnice, dotyk i klik kamkoli do rámu fungují bez řádky JS navíc. Vidět je jen dělicí čára, samotný ovladač leží průhledný přes celý rám. Rám je úzký schválně. Zdroje jsou 750 px široké (víc WordPress nevydá), takže při 360 px vychází hustota 2,08x na nové identitě a 1,89x na původním stavu. Ten je rozostřená fotka sám o sobě, takže měkčí polovina padá přesně tam, kde nevadí. */ .porovnani{max-width:360px;margin:0 auto} .porovnani__ram{ position:relative;overflow:hidden; aspect-ratio:750/858; background:var(--panel); } /* Snímky mají různý poměr stran (779 a 858 px na výšku). Ořez na společný rám je nutný - bez něj by se pod dělicí čárou objevil kus pozadí. Zarovnání na horní hranu drží hlavičky obou příspěvků na stejné výšce; ořez tak sebere 4,6 % z boků fotografie mincí. */ .porovnani__snimek{ display:block;width:100%;height:100%; object-fit:cover;object-position:center top; } /* clip-path, ne šířka: obrázek uvnitř si musí držet svou šířku, jinak by se s posunem rukojeti roztahoval. */ .porovnani__pred{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--del,50%)) 0 0)} .porovnani__stitek{ position:absolute;bottom:12px;z-index:3; margin:0;padding:.4rem .8rem; border-radius:50px; background:rgba(2,2,3,.72); backdrop-filter:blur(6px); font-family:var(--font-display);font-weight:600;font-size:.6rem; letter-spacing:.14em;text-transform:uppercase; pointer-events:none; } .porovnani__stitek--pred{left:12px;border:1px solid rgba(255,255,255,.12);color:var(--muted)} .porovnani__stitek--po{right:12px;border:1px solid rgb(from var(--zlata) r g b / .35);color:var(--zlata-svetla)} .porovnani__delic{ position:absolute;top:0;bottom:0;z-index:4; left:var(--del,50%);width:2px;translate:-1px 0; background:var(--zlata-svetla); box-shadow:0 0 18px rgb(from var(--zlata) r g b / .55); pointer-events:none; } .porovnani__uchyt{ position:absolute;top:50%;left:50%;translate:-50% -50%; display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%; border:1px solid var(--zlata-svetla); background:rgba(2,2,3,.7); backdrop-filter:blur(6px); } /* dvě šipky z rohu rámečku - bez SVG a bez ikonového fontu */ .porovnani__uchyt::before,.porovnani__uchyt::after{ content:'';position:absolute;width:6px;height:6px; border:solid var(--zlata-svetla);border-width:1.5px 1.5px 0 0; } .porovnani__uchyt::before{rotate:-135deg;margin-right:12px} .porovnani__uchyt::after{rotate:45deg;margin-left:12px} /* Palec je široký 1 px, aby hodnota 0-100 odpovídala přesně levému a pravému okraji rámu. pan-y nechává svislé rolování stránce a bere si jen vodorovné tažení. */ .porovnani__rukojet{ position:absolute;inset:0;z-index:5; width:100%;height:100%;margin:0;padding:0; appearance:none;-webkit-appearance:none; background:transparent;cursor:ew-resize; touch-action:pan-y; } .porovnani__rukojet::-webkit-slider-thumb{-webkit-appearance:none;width:1px;height:100%;background:transparent;cursor:ew-resize} .porovnani__rukojet::-moz-range-thumb{width:1px;height:100%;border:0;border-radius:0;background:transparent;cursor:ew-resize} .porovnani__rukojet:focus-visible{outline:2px solid var(--zlata-svetla);outline-offset:2px} /* ---- co přesně se změnilo ---- */ .zmeny{max-width:360px;margin:0 auto;padding:0;list-style:none} .zmeny__polozka{ padding:1rem 0; border-top:1px solid rgba(255,255,255,.06); font-size:.9rem;line-height:1.65;font-weight:300;color:var(--muted); } .zmeny__polozka b{ display:block;margin-bottom:.3rem; font-family:var(--font-display);font-weight:600;font-size:.65rem; letter-spacing:.19em;text-transform:uppercase;color:var(--zlata); } /* ============ CITAT (siroka karta s pruhem) ============ */ .citat{ /* Spodní mezera musí být tady: .video-blok pod ním má jen `margin-bottom`, takže bez ní na sebe obě sekce nasedaly bez jediného pixelu odstupu. */ position:relative;overflow:hidden; max-width:1000px;margin:0 auto 10rem;padding:4rem 5rem; border:1px solid rgba(255,255,255,.05); border-left:4px solid var(--zlata); border-radius:0 24px 24px 0; background:linear-gradient(135deg,rgba(20,20,25,.8) 0%,rgba(5,5,8,.9) 100%); box-shadow:0 40px 80px rgba(0,0,0,.6); } .citat__znak{position:absolute;top:2rem;right:3rem;width:150px;height:150px;fill:var(--zlata);opacity:.05;pointer-events:none} /* ============ ROADMAPA ============ */ .roadmapa{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:4rem} .roadmapa__karta{ position:relative;overflow:hidden; padding:3rem 2rem;text-align:center; border:1px solid var(--sklo-ram);border-radius:20px; background:var(--sklo); transition:transform .5s ease,border-color .5s ease; } .roadmapa__karta.je-aktivni:hover{transform:translateY(-10px);border-color:rgba(255,255,255,.2)} .roadmapa__cislo{ position:absolute;top:-10px;left:20px; font-family:var(--font-display);font-weight:900;font-size:4rem;line-height:1; color:rgba(255,255,255,.05);pointer-events:none; } .roadmapa__karta svg{width:32px;height:32px;margin-bottom:1rem;fill:none;stroke-width:1.5} :where(.roadmapa__karta h3){position:relative;z-index:2;margin-bottom:1rem;font-family:var(--font-display);font-size:1.2rem;font-weight:700} :where(.roadmapa__karta p){position:relative;z-index:2;font-size:.95rem;line-height:1.6;color:var(--muted)} /* ============ ZAVER ============ */ .zaver{ position:relative;overflow:hidden; padding:6rem 5rem;text-align:center; border:1px solid rgb(from var(--zlata) r g b / .15);border-radius:32px; background:linear-gradient(180deg,rgba(20,20,25,.8) 0%,rgba(10,10,12,.9) 100%); box-shadow:0 40px 100px rgba(0,0,0,.8); } .zaver__zar{ position:absolute;top:0;left:50%;translate:-50% -50%; width:80%;height:50%; background:radial-gradient(ellipse at center,rgb(from var(--zlata) r g b / .15) 0%,transparent 70%); filter:blur(50px);pointer-events:none; } .zaver__obsah{position:relative;z-index:2} .zaver__nadpis{ margin:0 0 2.5rem; font-family:var(--font-display);font-weight:800; font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.15;letter-spacing:-.02em; background:linear-gradient(180deg,#fff 0%,#a0a0a0 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } :where(.zaver p){max-width:800px;margin:0 auto 1.5rem;font-size:1.2rem;line-height:1.8;font-weight:300;color:var(--muted)} :where(.zaver p) strong{color:var(--paper);font-weight:600} /* ============ PROTOKOL (NDA) ============ */ .protokol{ display:flex;gap:2rem;align-items:flex-start; max-width:800px;margin:4rem auto 0;padding:2rem 3rem; border-left:3px solid var(--muted);border-radius:0 16px 16px 0; background:rgba(10,10,15,.5); } .protokol__ikona{ flex-shrink:0;display:flex;align-items:center;justify-content:center; width:48px;height:48px;border-radius:12px; border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03); } .protokol__ikona svg{width:20px;height:20px;fill:none;stroke:var(--muted);stroke-width:2} :where(.protokol h3){margin:0 0 .5rem;font-family:var(--font-display);font-size:.9rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase} :where(.protokol p){margin:0;font-size:.95rem;line-height:1.6;color:var(--muted)} /* ============ ZLATA DELICI CARA ============ */ /* Ve WordPressu ji delal samostatny blok; tady je to jeden prvek. */ .zlata-cara{ width:min(1100px,90vw);height:1px; margin:6rem auto; background:linear-gradient(90deg,transparent,rgb(from var(--zlata) r g b / .5),transparent); } /* ============ PODPIS AUTORA ============ */ .podpis{ display:flex;flex-direction:column;align-items:center; padding:8rem 1.5rem 6rem;text-align:center; } .podpis__cara{ width:2px;height:50px;margin-bottom:2.5rem;opacity:.8; background:linear-gradient(to bottom,transparent,var(--zlata),transparent); } .podpis__jmeno{margin:0 0 .5rem;font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:-.02em} .podpis__role{margin:0 0 2.5rem;font-size:1.1rem;font-weight:300;color:var(--muted)} .podpis__mail{ display:inline-flex;align-items:center;justify-content:center; padding:.9rem 2.25rem; border:1px solid rgb(from var(--zlata) r g b / .3);border-radius:50px; background:rgb(from var(--zlata) r g b / .03); color:var(--zlata-svetla);text-decoration:none; font-size:1.05rem;font-weight:500;letter-spacing:.03em; transition:background .4s cubic-bezier(.16,1,.3,1),border-color .4s ease,box-shadow .4s ease,transform .4s ease,color .4s ease; } .podpis__mail:hover,.podpis__mail:focus-visible{ background:rgb(from var(--zlata) r g b / .1); border-color:var(--zlata);color:var(--paper); box-shadow:0 10px 30px rgb(from var(--zlata) r g b / .2); transform:translateY(-3px); } .podpis__datum{margin-top:3rem;font-family:var(--font-display);font-weight:600;font-size:1.05rem;letter-spacing:.19em;color:var(--muted);opacity:.5} /* ============ PLATFORMY KLIENTA ============ */ .platformy{ display:flex;flex-direction:column;align-items:center; width:100%;max-width:1200px;margin:0 auto; padding:0 1.5rem 8rem;text-align:center; } .platformy__nadpis{ position:relative;display:inline-block; margin-bottom:4rem; font-family:var(--font-display);font-weight:700;font-size:1.6rem;letter-spacing:.02em; background:linear-gradient(to right,#BF953F,#FCF6BA,#BF953F); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } .platformy__nadpis::after{content:'';position:absolute;bottom:-15px;left:50%;translate:-50% 0;width:40px;height:2px;background:#BF953F} .platformy__mrizka{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;perspective:1000px} .platformy__odkaz{ position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center; width:70px;height:70px;border-radius:50%; border:1px solid rgb(from var(--zlata) r g b / .2); background:linear-gradient(145deg,rgba(30,30,35,.8),rgba(10,10,12,.9)); box-shadow:0 15px 35px rgba(0,0,0,.6),inset 0 0 20px rgb(from var(--zlata) r g b / .05); transition:transform .4s cubic-bezier(.25,1,.5,1),box-shadow .4s ease,border-color .4s ease; /* ŽÁDNÉ `transform-style:preserve-3d`. Zakládá 3D kontext a ten vyřazuje `overflow:hidden` — odlesk je čtverec 200×200 % s `mix-blend-mode`, takže při najetí vylezl ven z kruhu a ikona měla rohy. Náklon ho nepotřebuje: perspektivu si nese `[data-naklon]` přímo ve svém `transform`. */ } .platformy__odkaz svg{position:relative;z-index:2;width:28px;height:28px;fill:url(#zlaty-prechod);transition:scale .3s ease,filter .3s ease} .platformy__odkaz--obrys svg{fill:none;stroke:url(#zlaty-prechod);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .platformy__odkaz:hover,.platformy__odkaz:focus-visible{ z-index:10;border-color:#FCF6BA; box-shadow:0 25px 50px rgb(from var(--zlata) r g b / .2),inset 0 0 30px rgb(from var(--zlata) r g b / .1); } .platformy__odkaz:hover svg{scale:1.1;filter:drop-shadow(0 0 10px rgba(252,246,186,.6))} /* odlesk jede za ukazatelem, ridi ho pripad.js */ .platformy__odlesk{ position:absolute;top:-50%;left:-50%;width:200%;height:200%;z-index:1; background:radial-gradient(circle at center,rgba(252,246,186,.4) 0%,transparent 50%); opacity:0;pointer-events:none;mix-blend-mode:overlay; transition:opacity .3s ease; } /* ============ DALSI STUDIE ============ */ .dalsi{ position:relative;overflow:hidden; width:100%;max-width:1100px;margin:0 auto;padding:6rem 4rem; border:1px solid rgba(102,252,241,.15);border-radius:32px; background:linear-gradient(135deg,rgba(20,20,25,.8) 0%,rgba(5,5,8,.95) 100%); box-shadow:0 40px 100px rgba(0,0,0,.8),inset 0 0 40px rgba(102,252,241,.03); text-align:center; } .dalsi__zar{ position:absolute;top:0;left:50%;translate:-50% -50%; width:80%;height:80%; background:radial-gradient(ellipse at center,rgba(102,252,241,.12) 0%,transparent 70%); filter:blur(40px);z-index:0;pointer-events:none; } .dalsi__prstenec{ position:absolute;top:50%;left:50%; width:600px;height:600px;border-radius:50%; border:1px dashed rgba(102,252,241,.08); translate:-50% -50%; animation:otoc-pomalu 30s linear infinite; z-index:0;pointer-events:none; } @keyframes otoc-pomalu{to{rotate:360deg}} .dalsi__obsah{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center} .dalsi__stitek{ display:inline-flex;align-items:center;gap:12px; margin-bottom:2rem;padding:.5rem 1.5rem; border:1px solid rgba(102,252,241,.2);border-radius:50px; background:rgba(102,252,241,.05); color:var(--mint);font-family:var(--font-display);font-weight:600;font-size:.8rem; letter-spacing:.19em;text-transform:uppercase; } .dalsi__stitek svg{width:14px;height:14px;fill:currentColor} .dalsi__nadpis{margin:0 0 1.5rem;font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,5vw,4rem);line-height:1.15;letter-spacing:-.02em} :where(.dalsi p){max-width:700px;margin:0 auto 3.5rem;font-size:1.2rem;line-height:1.8;font-weight:300;color:var(--muted)} :where(.dalsi p) strong{color:var(--paper);font-weight:500} /* ============ VYZVA NA KONCI STUDIE ============ */ /* Zadny kalendar. Cesta je stejna jako na homepage: sken -> prihlaska. */ .vyzva-studie{ position:relative; margin-top:8rem;padding:8rem 1.5rem 4rem; border-top:1px solid rgba(255,255,255,.03); text-align:center; } .vyzva-studie__zar{ position:absolute;top:50%;left:50%;translate:-50% -50%; width:min(800px,100vw);aspect-ratio:1; background:radial-gradient(circle closest-side,rgba(102,252,241,.05) 0%,transparent 100%); z-index:0;pointer-events:none; } .vyzva-studie__obsah{position:relative;z-index:2;max-width:800px;margin:0 auto} .vyzva-studie__nadpis{margin:0 0 1.5rem;font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,5vw,4rem);line-height:1.15;letter-spacing:-.02em} :where(.vyzva-studie p){margin-bottom:3rem;font-size:1.2rem;line-height:1.7;color:var(--muted)} .tlacitko{ display:inline-flex;align-items:center;gap:12px; padding:1.2rem 3rem;border-radius:50px;border:0; background:var(--paper);color:var(--ink); font-family:var(--font-display);font-weight:700;font-size:1rem; letter-spacing:.06em;text-transform:uppercase;text-decoration:none; box-shadow:0 0 30px rgba(102,252,241,.2); transition:background .3s ease,transform .3s ease,box-shadow .3s ease; } .tlacitko svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:translate .3s ease} .tlacitko:hover,.tlacitko:focus-visible{background:var(--mint);transform:translateY(-3px);box-shadow:0 15px 30px rgba(102,252,241,.4)} .tlacitko:hover svg{translate:5px 0} .tlacitko:focus-visible{outline:2px solid var(--mint);outline-offset:4px} /* Tri kroky pod skenem: "prihlaska" zni zavazneji nez "nezavazny hovor", tak at je videt, co po nem opravdu nasleduje. */ .kroky-po{ display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; max-width:760px;margin:3rem auto 0;padding:0; list-style:none;text-align:left; } .kroky-po li{display:flex;gap:.9rem;align-items:flex-start} .kroky-po b{ flex:none;display:grid;place-items:center; width:26px;height:26px;border-radius:50%; border:1px solid rgb(from var(--mint) r g b / .35); background:rgb(from var(--mint) r g b / .08); color:var(--mint);font-family:var(--font-display);font-size:.8rem;font-weight:600; } .kroky-po span{font-size:.95rem;line-height:1.6;color:var(--muted)} .vyzva-studie__mikro{ display:flex;align-items:center;justify-content:center;gap:8px; margin-top:1.5rem;font-size:.9rem;color:var(--muted); } .vyzva-studie__mikro svg{width:16px;height:16px;fill:none;stroke:var(--mint);stroke-width:2} /* ============ RESPONZIVITA ============ */ @media (min-width:1025px){ .faze__osa{display:block} } @media (max-width:1024px){ .faze__radek,.faze__radek--obraceny{grid-template-columns:1fr;gap:4rem} .faze__radek--obraceny .faze__text{order:0} /* lepive sloupce nemaji na uzkem displeji vedle ceho stat */ .faze__text,.faze__vizual--lepivy{position:relative;top:0;padding:0} .faze{gap:7rem} .souhrn__karty{gap:1rem} .roadmapa{grid-template-columns:1fr} .citat{padding:3rem 2rem;border-radius:0 16px 16px 0} } @media (max-width:768px){ .pripad__hero{padding:7rem 1.25rem 10vh} .souhrn{gap:3rem;margin-bottom:5rem} .souhrn__karty{grid-template-columns:1fr} .souhrn__roh{display:none} .pripad__text--siroky{margin-bottom:5rem} .pripad__lead{padding-left:1.25rem;font-size:1.15rem} .faze__nadpis{font-size:1.8rem} .snimek__telo{height:auto;min-height:220px;padding:1.25rem} .snimek__telo img{max-height:420px} .zaver{padding:3.5rem 1.5rem;border-radius:20px} .protokol{flex-direction:column;gap:1.5rem;padding:2rem;border-left:0;border-top:3px solid var(--muted);border-radius:0 0 16px 16px} .dalsi{padding:2rem} .podpis time{margin-left:0} } /* ============ KLID ============ */ /* Nic z toho neni nosic informace - kdyz uzivatel nechce pohyb, zustane obraz stat a texty jsou proste videt. */ @media (prefers-reduced-motion:reduce){ .souhrn__prstenec,.pomer__investice{transition:none} .pripad__aura,.pripad__nadpis,.souhrn__prstenec,.souhrn__carky,.pripad__odznak::before{animation:none} .snimek{opacity:1;translate:none;transition:none} .kreativa--mrtva .kreativa__obraz::after{opacity:1;scale:1;rotate:0deg;transition:none} .rozsvit{--postup:0%!important} .souhrn__karta,.roadmapa__karta,.dalsi{transition:none} } /* ---- zaver a platformy na uzkem displeji ---- */ @media (max-width:768px){ .podpis{padding:5rem 1.25rem 4rem} .podpis__jmeno{font-size:1.6rem} .platformy{padding-bottom:5rem} .platformy__nadpis{font-size:1.35rem;margin-bottom:3rem} .platformy__mrizka{gap:1.2rem} .platformy__odkaz{width:55px;height:55px} .platformy__odkaz svg{width:22px;height:22px} .dalsi{padding:4rem 1.5rem;border-radius:24px} .dalsi :where(p){margin-bottom:2.5rem;font-size:1.05rem} .vyzva-studie{margin-top:5rem;padding:5rem 1.25rem 3rem} .kroky-po{grid-template-columns:1fr;gap:1rem;margin-top:2.5rem} .tlacitko{padding:1rem 2rem;font-size:.9rem} .zlata-cara{margin:4rem auto} } @media (prefers-reduced-motion:reduce){ .dalsi__prstenec{animation:none} .podpis__mail,.platformy__odkaz,.platformy__odkaz svg,.tlacitko,.tlacitko svg{transition:none} } /* ---- naklon a pauza animaci ---- */ /* Panel se naklani podle ukazatele; promenne plni pripad.js. */ [data-naklon]{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale3d(var(--zvet,1),var(--zvet,1),1)} /* Co neni v obraze, nemusi se hybat - setri to baterii. */ [data-zivot]:not(.je-vidno) *{animation-play-state:paused} /* ============ BOČNÍ OSA (obsah a postup čtení) ============ Studie je přes 15 000 px vysoká, tedy asi devět minut čtení. Bez orientace čtenář neví, kolik zbývá, a u takové délky je to rozdíl mezi "projedu to" a "zavřu to". Osu staví pripad.js z atributů data-osa na sekcích - bez skriptu se prostě neobjeví a nic to nerozbije. Jméno je vidět jen u aktivní sekce; celý seznam se rozbalí, až když na osu najedeš nebo do ní vstoupíš tabulátorem. Jinak by patnáct popisků leželo přes obsah po celé délce stránky. Barva osy jde přes token, ne natvrdo zlatou: zlatá patří studii o zlatě. Severka jede celá v mintové a osa tam byla jediná zlatá věc na stránce - ostatní zlaté prvky si ta studie přebíjela u sebe už dřív, jen osa přibyla později a přebití jí uteklo. Studie, která zlatá není, si tyhle dvě hodnoty přepíše na `body.pripad`. */ .pripad{--osa-a:var(--zlata-svetla);--osa-b:var(--zlata)} .osa{ position:fixed;z-index:45; top:50%;right:1.4rem;translate:0 -50%; display:none; padding-right:12px; } /* Obsah studie je široký 1200 px. Pod 1120 px by osa ležela na textu, takže se místo ní ukáže proužek nahoře. */ @media (min-width:1120px){.osa{display:block}} .osa__linka{position:absolute;top:0;right:0;bottom:0;width:1px;background:rgba(255,255,255,.16)} .osa__linka i{ position:absolute;top:0;left:0; width:100%;height:var(--dojeto,0%); background:linear-gradient(180deg,var(--osa-a),var(--osa-b)); box-shadow:0 0 10px rgb(from var(--osa-b) r g b / .55); } .osa__seznam{display:flex;flex-direction:column;gap:3px;margin:0;padding:0;list-style:none} .osa__polozka{ display:flex;align-items:center;justify-content:flex-end;gap:.7rem; /* výplň vlevo zvětšuje plochu, na kterou se dá najet */ padding:3px 0 3px 2rem; text-decoration:none; } .osa__nazev{ font-family:var(--font-display);font-weight:500;font-size:.6rem; letter-spacing:.16em;text-transform:uppercase;white-space:nowrap; color:var(--muted); opacity:0;translate:6px 0; transition:opacity .3s ease,translate .3s ease,color .3s ease; } .osa__tecka{ flex:none;width:10px;height:1px; background:rgba(255,255,255,.22); transition:width .3s ease,background .3s ease; } .osa__polozka.je-projita .osa__tecka{background:rgb(from var(--osa-b) r g b / .5)} .osa__polozka.je-tady .osa__tecka{width:22px;background:var(--osa-a)} .osa__polozka.je-tady .osa__nazev{opacity:1;translate:0 0;color:var(--osa-a)} .osa:hover .osa__nazev,.osa:focus-within .osa__nazev{opacity:1;translate:0 0} .osa__polozka:hover .osa__nazev{color:var(--paper)} .osa__polozka:hover .osa__tecka{width:22px;background:var(--paper)} .osa__polozka:focus-visible{outline:2px solid var(--osa-a);outline-offset:3px;border-radius:4px} /* Hlavička má z-index 40 a je průhledná, proužek musí být nad ní. */ .osa__prouzek{position:fixed;z-index:45;top:0;left:0;width:100%;height:2px;background:rgba(255,255,255,.07)} .osa__prouzek i{display:block;height:100%;width:var(--dojeto,0%);background:linear-gradient(90deg,var(--osa-b),var(--osa-a))} @media (min-width:1120px){.osa__prouzek{display:none}} /* Otevřené mobilní menu je celoobrazovkový panel uvnitř hlavičky (z-index 40). Proužek má vyšší vrstvu, takže by přes něj vedl přes celou šířku. */ body:has(.hlavicka__menu.je-otevrene) .osa__prouzek{display:none} /* Skok na kotvu nesmí schovat nadpis pod přilepenou hlavičkou. */ [data-osa]{scroll-margin-top:6rem} /* ============================================================ TISK Případovky se posílají klientovi jako PDF. Bez tohohle by se vytiskla černá plocha: podklad je tmavý, půlka textu je bílá a čtyři nadpisy jsou průhledné s gradientem pod sebou, takže by na papíře nebyly vůbec. ============================================================ */ /* ============================================================ Mobil: pryc s drahym rozmazavanim ============================================================ */ @media (max-width:768px){ /* Ctyri zare jsou radialni gradienty, tedy uz samy o sobe mekke — `filter:blur()` pres ne je opticky skoro k nepoznani, ale stoji prekresleni cele vrstvy. U `.pripad__aura` je to nejhorsi: vrstva az 1200x1200 px s polomerem 80 px, ktera navic pulsuje, takze se rozmazani pocita znovu v kazdem snimku animace. */ .pripad__aura,.souhrn__zar,.zaver__zar,.dalsi__zar{filter:none} /* Stejny duvod jako u hlavicky: rozmazavat pozadi pod stitkem behem tazeni posuvniku je na dotyku to posledni, co chceme. */ .porovnani__stitek,.porovnani__uchyt{ backdrop-filter:none;-webkit-backdrop-filter:none; background:rgba(10,10,12,.86); } } @media print{ /* Papír je bílý, ať se do něj netiskne pozadí. */ html:has(body.pripad),body.pripad{background:#fff!important;color:#111!important} body.pripad{--paper:#111;--muted:#444;--ink:#fff;--sklo-ram:#ccc} /* Nadpisy jsou vysázené průhledně s gradientem pod textem - na papíře by po nich zbylo prázdné místo. */ .pripad__nadpis,.rozsvit,.zaver__nadpis,.platformy__nadpis{ -webkit-text-fill-color:#111!important;color:#111!important; background:none!important;filter:none!important;animation:none!important; } /* Nic, co se hýbe nebo čeká na scroll. Bez toho by se vytisklo to, co zrovna nedojelo - poloviční pruhy a neviditelné panely. */ *,*::before,*::after{animation:none!important;transition:none!important} [data-rozjed],[data-zivot],.je-aktivni,.rise-in{opacity:1!important;translate:none!important;transform:none!important} [data-postup]{--postup:1!important} /* Pruhy vzdalenosti se rozjizdi az v obraze. Kdyby nekdo dal tisknout driv, nez k nim doscrolluje, vytiskly by se nulove - stejne jako rozpocitana pocitadla, ktera resi `beforeprint`. */ .geo__drah i{width:var(--dil)!important} .krok{--krok:0} .krok__cislo,.krok__udaj{opacity:1!important;translate:none!important;border-color:#666!important;color:#111!important} /* Ovládání, kurzory a věci, které na papíře nedávají smysl. */ .hlavicka,.osa,.osa__prouzek,.cursor,.cursor-dot,.cursor-ring, .sken,.kroky-po,.vyzva-studie__zar,.pripad__aura,.souhrn__zar, .jadro__zar,.radar__zar,.ltv__zar,.dalsi__zar,.tok__mrizka,.tok__puls,.telefon, .kotva,.zlata-cara{display:none!important} /* Panely jako rámečky, ne jako svítící sklo. */ .souhrn__karta,.jadro,.radar,.ltv,.kreativa,.nenajdete__polozka, .protokol,.zaver,.mereni__mrizka,.geo__ram,.umisteni__polozka,.umisteni__znak, .tok,.tok__stupen,.tok__soucet, .kanal,.kanal__znak,.tip,.pochvala,.shrnuti{ border:1px solid #bbb!important;background:none!important;box-shadow:none!important; } .mereni__drah,.geo__drah,.kreativa__cpa,.pomer__pruh{background:#e6e6e6!important} /* Ikony kanalu kreslí `--paper`, tedy skoro bílou - na papíre by z nich zbyly prazdne kolecka. */ .kanal__znak svg{stroke:#444!important} .tok__cara{background:#999!important} .tok__cara::after{border-color:#666!important} .mereni__pruh,.geo__drah i,.kreativa__cpa i,.pomer__investice{background:#555!important;box-shadow:none!important} .geo__drah::before{background:#555!important} .geo__pocatek::before{background:#444!important;box-shadow:none!important} .umisteni__znak svg{stroke:#444!important} /* Zlata a mintova jsou na bilem papire skoro neviditelne. */ .pripad__odznak,.pripad__meritko,.faze__nadhlavi,.znacka, .tok__hlavicka,.kanal__jmeno,.kanal__castka,.kanal__bez,.tok__stitek,.tok__cislo, .geo__pocatek,.geo__km, .kreativa__stitek,.krok__udaj,.souhrn__stitek,.souhrn__popisek{ color:#444!important;border-color:#bbb!important;background:none!important; box-shadow:none!important;text-shadow:none!important; } .je-zlata,.je-mint,.faze__nadhlavi--zlata,.faze__nadhlavi--mint{color:#111!important} /* Velka mintova cisla by na bilem papire skoro zmizela. */ .vykon__cislo,.vykon__cislo .jednotka{color:#111!important;text-shadow:none!important} /* Panel se nesmi rozseknout na dve stranky. */ section,.souhrn,.ltv,.kreativa,.nenajdete__polozka,.geo,.umisteni{break-inside:avoid} h1,h2,h3{break-after:avoid} /* Odkaz na papire nikam nevede, tak at je za nim aspon videt kam. */ .pripad__text a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#666;word-break:break-all} @page{margin:16mm} }