/* ============================================================= STERBA.MARTIN - vizualni system Sdileny stylesheet pro index.html i obe pripadove studie. PALETA: pouze ctyri barvy. Svetlejsi tony vznikaji vyhradne pruhlednosti techto ctyr, zadna dalsi paleta neexistuje. modra #13273F hlavni barva znacky, prevlada bezova #E9D4C3 druha doplnkova barva cervena #4E0000 pouze cileny akcent, par prvku bila #FFFFFF hlavni svetle pozadi a kontrastni text ZASADY - Jeden font: Manrope. Hierarchii tvori vaha, velikost a prostor. - Web je svetly a vzdusny. Modre plochy strida bila a bezova, cervena se objevuje jen v nekolika malo detailech. - Zadna obrysova typografie, zadne kruhy jako dekorace, zadne sklenene karty, zadne barevne bubliny za lidmi. - Fotografie, videa a klientska loga zustavaji v puvodnich barvach. V celem souboru neni filtr grayscale ani saturate. OBSAH 01 Tokeny 09 Pripadove studie 17 Metriky 02 Reset 10 Proces 18 Kontakt 03 Typografie 11 O Martinovi 19 Paticka 04 Layout 12 Duo a video 20 Pohyb 05 Tlacitka 13 Klientska loga 21 Responzivita 06 Hlavicka 14 Vysledkove dlazdice 22 Pripadova studie 07 Hero 15 Recenze 08 Sluzby 16 Modal ============================================================= */ /* -- 00 PISMA ----------------------------------------------- */ /* Manrope se nacita z Google Fonts v hlavicce dokumentu. Marck Script slouzi vyhradne pro podpis v sekci O mne a je ulozene primo na webu, aby podpis nezavisel na cizim serveru. Rez je jen jeden a obsahuje latin i latin-ext, takze `S` s hackem i `e` s hackem se vykresli spravne. Pismo je Marck Script od Denise Masharova a Marcka Fogela, licence SIL Open Font License 1.1, plne zneni je vedle souboru v assets/fonts/OFL-marck-script.txt. */ @font-face { font-family: "Marck Script"; src: url("../fonts/marck-script-latin-ext.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; } /* -- 01 TOKENY ---------------------------------------------- */ :root { /* Ctyri zavazne barvy */ --color-primary: #13273F; /* tmave modra, hlavni barva znacky */ --color-secondary: #E9D4C3; /* bezova, druha doplnkova barva */ --color-accent: #4E0000; /* tmave cervena, jen zvyrazneni */ --color-white: #FFFFFF; /* Kratke aliasy, ktere pouziva zbytek souboru. Nazvy trid .btn--r a .sec--wine jsou historicke, zustavaji kvuli HTML a JS. Barevne uz obe znamenaji hlavni modrou. */ --w: var(--color-white); --k: var(--color-primary); /* text a tmave prvky jsou modre */ --sand: var(--color-secondary); --a: var(--color-accent); /* cileny cerveny akcent */ /* Modra v pruhlednosti */ --color-primary-90: rgba(19,39,63,.90); --color-primary-40: rgba(19,39,63,.40); --color-primary-16: rgba(19,39,63,.16); --color-primary-10: rgba(19,39,63,.10); --color-primary-06: rgba(19,39,63,.06); /* Bezova v pruhlednosti */ --color-secondary-70: rgba(233,212,195,.70); --color-secondary-45: rgba(233,212,195,.45); --color-secondary-15: rgba(233,212,195,.15); --color-secondary-28: rgba(233,212,195,.28); /* Cervena v pruhlednosti, jen drobne detaily */ --color-accent-08: rgba(78,0,0,.08); /* Textova skala, odvozena z hlavni modre */ --k-86: rgba(19,39,63,.92); --k-68: rgba(19,39,63,.72); --k-50: rgba(19,39,63,.68); --k-32: rgba(19,39,63,.48); --k-12: rgba(19,39,63,.14); --k-06: rgba(19,39,63,.07); /* Bila v pruhlednosti pro tmave plochy */ --w-88: rgba(255,255,255,.88); --w-60: rgba(255,255,255,.66); --w-38: rgba(255,255,255,.55); --w-14: rgba(255,255,255,.18); /* Plochy sekci */ --tint: rgba(233,212,195,.30); /* bezova velmi jemne */ --paper: rgba(19,39,63,.05); /* modra velmi jemne */ --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --shell: 1280px; --gut: clamp(20px, 4.4vw, 64px); --hdr: 74px; --rad: 4px; /* editorialni, temer ostre hrany */ --rad-s: 3px; --rad-pill: 100px; --ease: cubic-bezier(.22,.75,.24,1); --ease-io: cubic-bezier(.62,.05,.26,1); --sh: 0 16px 48px rgba(19,39,63,.10); --sh-s: 0 8px 26px rgba(19,39,63,.07); } /* -- 02 RESET ----------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 20px); } body { font-family: var(--font); font-size: 17px; line-height: 1.62; font-weight: 400; color: var(--k-86); background: var(--w); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } img, video { height: auto; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; } p { text-wrap: pretty; } ::selection { background: var(--k); color: var(--w); } :focus-visible { outline: 2px solid var(--k); outline-offset: 3px; border-radius: 2px; } .ft :focus-visible, .sec--wine :focus-visible { outline-color: var(--sand); } .skip { position: absolute; left: 12px; top: -60px; z-index: 3000; background: var(--k); color: var(--w); padding: 11px 18px; border-radius: var(--rad-s); font-weight: 700; transition: top .2s var(--ease); } .skip:focus { top: 12px; } /* Ukazatel scrollu */ #bar { position: fixed; left: 0; top: 0; z-index: 1400; height: 2px; width: 0; background: var(--k); transition: width .1s linear; } /* -- 03 TYPOGRAFIE ------------------------------------------ */ .t-hero { font-size: clamp(2.5rem, 5.6vw, 4.9rem); line-height: .98; letter-spacing: -.042em; font-weight: 800; } .t-1 { font-size: clamp(1.95rem, 3.9vw, 3.3rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; } .lead { font-size: clamp(1.04rem, 1.28vw, 1.2rem); line-height: 1.58; color: var(--k-68); max-width: 56ch; } .body { font-size: 1rem; line-height: 1.72; color: var(--k-68); } .red { color: var(--a); } /* Na modre plose by cervena nemela kontrast, zvyrazneni prebira bezova */ .sec--wine .red, .ft .red { color: var(--sand); } .num { font-variant-numeric: tabular-nums; } /* Verzalkove oznaceni sekce s vinovou znackou */ .eyebrow { display: flex; align-items: center; gap: 12px; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--k-50); } .eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--k); flex: none; } .eyebrow b { color: var(--k); font-weight: 800; } .sec--wine .eyebrow, .sec--wine .eyebrow b { color: var(--sand); } .sec--wine .eyebrow::before { background: var(--sand); } /* -- SEKCNI NADPISY ------------------------------------------ Jedna typograficka DNA, tri kompozicni varianty. Cislo sekce a kategorie stoji samostatne, ne jako radek "01 Pristup". Obrysove pismo se zamerne nepouziva, kontrast delaji rez, meritko a prostor. */ /* Sekce uz nemaji maly nadtitulek, nadpis proto zacina rovnou a horni odsazeni je o neco mensi. */ .sec > .wrap > .hx:first-child, .sec > .wrap > div > .hx:first-child { margin-top: 0; } /* Spolecny zaklad velkych nadpisu */ .hx { font-size: clamp(2.5rem, 6.4vw, 6.6rem); line-height: .94; letter-spacing: -.055em; font-weight: 800; color: var(--k); max-width: none; text-wrap: balance; } .hx__l { display: block; } /* Na tmave plose musi nadpis prebrat svetlou barvu */ .sec--wine .hx, .ft .hx { color: var(--w); } /* Lehci rez uvnitr nadpisu. Zaporny prostrk by jinak spolkl mezeru pred nasledujicim slovem, proto ji drzi margin. */ .hx em { font-weight: 400; letter-spacing: -.045em; margin-right: .14em; } /* Mirne odsazeni druheho radku, at nadpis nestoji v bloku */ .hx__l--in { padding-left: clamp(24px, 7vw, 132px); } /* Varianta A: nadpis pres temer celou sirku */ .hx--full { max-width: 16ch; } /* Varianta pro nadpis uvnitr uzsiho sloupce (O mne, Kontakt, Pristup). Drzi stejnou DNA, jen meritko odpovida sirce sloupce. */ .hx--col { font-size: clamp(2.1rem, 4.4vw, 3.9rem); letter-spacing: -.048em; line-height: .98; } .hx--col .hx__l--in { padding-left: clamp(16px, 3vw, 44px); } /* Postupne odhaleni radku velkeho nadpisu. Skryva se jen nadpis, ktery je soucasti odkryvaciho systemu (ma tridu .rv). Bez ni je nadpis vzdy rovnou videt, takze se nemuze stat, ze zustane neviditelny. */ .js .hx.rv .hx__l { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .js .hx.rv.in .hx__l { opacity: 1; transform: none; } .js .hx.rv.in .hx__l:nth-child(2) { transition-delay: .1s; } .js .hx.rv.in .hx__l:nth-child(3) { transition-delay: .2s; } .link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .93rem; color: var(--k); min-height: 44px; } .link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); } .link:hover svg { transform: translateX(4px); } /* -- 04 LAYOUT ---------------------------------------------- */ .sec { position: relative; background: var(--w); } .sec.bg-tint { background-color: var(--tint); } .sec.bg-paper { background-color: var(--paper); } .sec--wine { background: var(--k); color: var(--w-88); } .sec--wine h1, .sec--wine h2, .sec--wine h3 { color: var(--w); } .sec--wine .lead, .sec--wine .body { color: var(--w-60); } /* Jemne odlisena pozadi, aby svetle sekce nesplyvaly */ .sec.bg-grid::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: linear-gradient(to right, var(--k-06) 1px, transparent 1px), linear-gradient(to bottom, var(--k-06) 1px, transparent 1px); background-size: 92px 92px; -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(120% 80% at 50% 0%, #000, transparent 70%); } .sec.bg-dots::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient(var(--color-secondary-45) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 76%); mask-image: linear-gradient(to bottom, #000, transparent 76%); } .sec.bg-grid > *, .sec.bg-dots > * { position: relative; z-index: 1; } .wrap { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); } .wrap--narrow { max-width: 860px; } .pad-l { padding-block: clamp(66px, 8vw, 124px); } .pad-m { padding-block: clamp(44px, 5.4vw, 80px); } /* Kratka vinova linka jako oddelovac */ .rule-r { width: 52px; height: 3px; border: 0; background: var(--k); } /* -- 05 TLACITKA -------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-size: .96rem; font-weight: 700; letter-spacing: -.012em; min-height: 54px; padding: 14px 26px; border-radius: var(--rad-s); border: 1.5px solid transparent; text-align: center; transition: background-color .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease); } .btn svg { width: 17px; height: 17px; flex: none; transition: transform .24s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btns { display: flex; flex-wrap: wrap; gap: 12px; } /* Primarni: vinova plocha, bily text */ .btn--r { background: var(--k); color: var(--w); border-color: var(--k); } .btn--r:hover { background: var(--a); border-color: var(--a); transform: translateY(-2px); } /* Kontrastni cerne tlacitko */ .btn--k { background: var(--k); color: var(--w); border-color: var(--k); } .btn--k:hover { background: var(--k); border-color: var(--k); transform: translateY(-2px); } /* Sekundarni: svetle, s ramem */ .btn--g { color: var(--k); border-color: var(--k-12); background: var(--w); } .btn--g:hover { border-color: var(--k); color: var(--k); transform: translateY(-2px); } .sec--wine .btn--g { color: var(--w); border-color: var(--w-38); background: transparent; } .sec--wine .btn--g:hover { border-color: var(--sand); color: var(--sand); background: transparent; } .btn--sm { min-height: 44px; padding: 10px 18px; font-size: .89rem; } .btn--wide { width: 100%; } .tags { display: flex; flex-wrap: wrap; gap: 8px; } .tag { font-size: .74rem; font-weight: 700; letter-spacing: -.008em; padding: 7px 13px; border-radius: var(--rad-pill); background: var(--color-secondary-28); color: var(--k-86); } .tag--r { background: var(--k); color: var(--w); } .sec--wine .tag { background: rgba(255,255,255,.14); color: var(--w); } .sec--wine .tag--r { background: var(--sand); color: var(--k); } /* -- 06 HLAVICKA -------------------------------------------- */ .hdr { position: fixed; left: 0; right: 0; top: 0; z-index: 1200; height: var(--hdr); background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background-color .3s var(--ease), border-color .3s var(--ease); } .hdr.is-stuck { background: rgba(255,255,255,.94); border-bottom-color: var(--k-06); } .hdr__in { height: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gut); display: flex; align-items: center; gap: 24px; } .brand { margin-right: auto; display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; font-size: 1rem; letter-spacing: -.045em; color: var(--k); } .brand i { font-style: normal; color: var(--k); } .ft .brand, .sec--wine .brand { color: var(--w); } .ft .brand i, .sec--wine .brand i { color: var(--sand); } .nav { display: flex; gap: 4px; } .nav a { position: relative; display: flex; align-items: center; padding: 0 12px; min-height: 44px; font-size: .9rem; font-weight: 600; color: var(--k-50); transition: color .22s var(--ease); } /* Aktivni odkaz ma drobny cerveny detail */ .nav a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px; background: var(--a); transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); } .nav a:hover, .nav a.is-on { color: var(--k); } .nav a.is-on::after { transform: scaleX(1); } .burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1.5px solid var(--k-12); border-radius: var(--rad-s); background: var(--w); } .burger span, .burger span::before, .burger span::after { content: ''; display: block; width: 17px; height: 2px; background: var(--k); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s var(--ease); } .burger span { position: relative; } .burger span::before { position: absolute; top: -6px; } .burger span::after { position: absolute; top: 6px; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } .menu { position: fixed; inset: 0; z-index: 1300; background: var(--w); /* Spodni odsazeni respektuje gesto-bar iPhonu, jinak posledni odkaz konci pod systemovym ovladanim. */ padding: calc(var(--hdr) + 20px) var(--gut) calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); /* Stejny duvod jako u modalu: viditelnost se prepina okamzite, jinak by na otevrene menu neslo presunout fokus. */ transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s; overflow-y: auto; } .menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear 0s; } .menu__link { display: flex; align-items: baseline; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--k-06); font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800; letter-spacing: -.04em; color: var(--k); } .menu__foot { margin-top: auto; padding-top: 26px; display: grid; gap: 12px; } .mlink { font-size: .92rem; color: var(--k-50); min-height: 44px; display: flex; align-items: center; } .mlink:hover { color: var(--k); } body.lock { overflow: hidden; } /* Plovouci CTA na mobilu */ .float { display: none; position: fixed; left: var(--gut); right: var(--gut); z-index: 1100; bottom: calc(12px + env(safe-area-inset-bottom)); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease); } .float.on { opacity: 1; transform: none; pointer-events: auto; } .float .btn { box-shadow: 0 14px 34px rgba(19,39,63,.28); } /* -- 07 HERO ------------------------------------------------ */ .hero { position: relative; overflow: hidden; padding-top: calc(var(--hdr) + clamp(14px, 2.4vh, 34px)); background: var(--tint); } /* Jemna bezova mrizka, zadne tvary */ .hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--color-secondary-28) 1px, transparent 1px), linear-gradient(to bottom, var(--color-secondary-28) 1px, transparent 1px); background-size: 84px 84px; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 66%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 66%); } .hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(34px, 4.4vw, 62px); } .hero__copy { padding-bottom: 0; } .hero h1 { margin: 0 0 20px; } .hero__sub { font-size: clamp(1.02rem, 1.26vw, 1.16rem); line-height: 1.56; color: var(--k-68); max-width: 42ch; margin-bottom: clamp(24px, 3vw, 34px); } .hero__sub b { color: var(--k); font-weight: 700; } /* Fotografie stoji primo na pozadi sekce. Zadna plocha, zadny ram, zadny tvar za postavou. */ .hero__fig { position: relative; align-self: end; } .hero__fig picture, .hero__fig img { position: relative; z-index: 1; width: 100%; height: auto; } /* -- KLIENTSKE BUBLINY (jeden system pro cely web) ----------- Jedna komponenta, modifikatory jen pro velikost, svetlou nebo tmavou variantu, smer hrotu a zpusob umisteni. Pro kazdeho klienta se nezavadi vlastni blok. */ .qb { position: relative; z-index: 3; background: var(--w); color: var(--k); border: 1px solid var(--color-secondary-70); padding: clamp(14px,1.5vw,18px) clamp(15px,1.7vw,20px) clamp(13px,1.4vw,16px); box-shadow: 0 14px 38px rgba(19,39,63,.11); } /* Kratky hrot, ne chatovy ocasek. Smer urcuje modifikator. */ .qb::after { content: ''; position: absolute; width: 13px; height: 13px; background: var(--w); border: 1px solid var(--color-secondary-70); border-top-color: transparent; border-left-color: transparent; } .qb--tl::after { left: -7px; top: 28px; transform: rotate(135deg); } .qb--tr::after { right: -7px; top: 28px; transform: rotate(-45deg); } .qb--br::after { right: -7px; bottom: 28px; transform: rotate(-45deg); } .qb--flat::after { display: none; } .qb__mk { display: block; font-size: 2.1rem; line-height: .46; font-weight: 800; color: var(--color-secondary-70); margin-bottom: 10px; } .qb p { font-size: .92rem; line-height: 1.52; font-weight: 600; letter-spacing: -.018em; color: var(--k-86); } .qb footer { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--k-12); } .qb footer img { width: 40px; height: 40px; border-radius: 50%; flex: none; display: block; object-fit: cover; } .qb cite { font-style: normal; font-size: .8rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--k); } .qb cite i { display: block; font-style: normal; font-weight: 500; color: var(--k-50); } /* Velikosti */ .qb--s { width: clamp(196px, 16vw, 232px); } .qb--s p { font-size: .98rem; } .qb--m { width: clamp(224px, 20vw, 286px); } .qb--l { width: clamp(252px, 25vw, 348px); } .qb--l p { font-size: .95rem; } /* Plovouci umisteni uvnitr kompozice. Ridici prvek musi mit position: relative. Na uzkych displejich se rusi. */ .qb--float { position: absolute; } /* Nastup: jen opacity, kratky posun a velmi male natoceni. Po zobrazeni uz se bublina nehybe. */ .js .qb { opacity: 0; transform: translateY(14px) rotate(var(--qb-rot, 0deg)); } .js .qb.in { opacity: 1; transform: translateY(0) rotate(var(--qb-end, 0deg)); transition: opacity .55s var(--ease), transform .55s var(--ease-io); } .qb--rl { --qb-rot: -3.4deg; --qb-end: -1.2deg; } .qb--rr { --qb-rot: 3.4deg; --qb-end: 1.4deg; } @media (prefers-reduced-motion: reduce) { .js .qb { opacity: 1; transform: none; } .js .qb.in { transform: none; } } /* Dvojice bublin jako samostatny dukazovy blok mezi sekcemi */ .qbs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(18px,3vw,48px); align-items: start; } .qbs .qb { width: auto; } /* Jedna z dvojice je svisle posunuta, aby to nebyla mrizka */ .qbs .qb:nth-child(2) { margin-top: clamp(20px,3.4vw,52px); } .js .qbs .qb:nth-child(2).in { transition-delay: .14s; } /* Tri bubliny v hero. Kazda jina sirka, stridaji strany. Zadna nesmi prekryt oblicej, nadpis, CTA ani logo Meta. */ /* Vrstveni: pozadi, bublina Martina Holecka, fotografie, ostatni obsah. Karta se levym okrajem zasouva za obrys postavy, text a jmeno ale zustavaji cele odkryte. Hrot je zamerne pryc, jinak by zpoza hlavy vykukoval. */ .hero__q--a { right: clamp(-52px,-3.6vw,-12px); top: 9%; z-index: 0; box-shadow: 0 18px 44px rgba(19,39,63,.15); } .hero__fig picture { position: relative; z-index: 2; } .hero__q--b { left: clamp(-126px,-8.6vw,-40px); top: 44%; } .hero__q--c { right: clamp(-24px,-1.6vw,-4px); bottom: -6%; } /* V hero prichazeji v kratkem sledu za sebou */ .js .hero__q--a.in { transition-delay: .38s; } .js .hero__q--b.in { transition-delay: .54s; } .js .hero__q--c.in { transition-delay: .7s; } /* Specializace: skutecne logo Meta nese celou kompozici, Facebook a Instagram stoji pod nim jako kanaly. Jeden celek, ne tri rozhazene ikonky vedle sebe. */ .spec { display: flex; align-items: center; gap: clamp(15px,1.9vw,22px); margin-bottom: clamp(30px,3.6vw,42px); padding-left: clamp(15px,1.9vw,21px); border-left: 2px solid var(--color-secondary-70); } .spec__logo { width: clamp(94px,9.6vw,126px); height: auto; display: block; flex: none; } .spec__txt { font-size: .84rem; line-height: 1.4; color: var(--k-68); } .spec__txt b { display: block; font-size: clamp(.98rem,1.2vw,1.08rem); font-weight: 800; letter-spacing: -.03em; color: var(--k); margin-bottom: 6px; } .spec__ch { display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--k-50); } .spec__ch img { width: 18px; height: 18px; display: block; flex: none; } .spec__ch i { width: 1px; height: 13px; background: var(--k-12); margin: 0 4px; flex: none; } /* Sekce Pristup: nadpis a doprovodny text */ /* -- 07b PRISTUP: SCROLLOVA CESTA ---------------------------- */ /* Vlevo zustava nadpis a mala navigace, vpravo se pri scrollu meni aktivni bod. Bez JS jsou vsechny body plne citelne. */ /* Nadpis stoji nad celou cestou, ne v uzkem sloupci. Mezera mezi nim a body je zamerne mala, aby obsah navazoval. */ .jr__head { margin-bottom: clamp(26px,3.2vw,44px); } .jr__head .lead { margin-top: clamp(14px,1.8vw,20px); max-width: 62ch; } .jr { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap: clamp(28px,4.4vw,68px); align-items: start; } .jr__side { position: sticky; top: calc(var(--hdr) + clamp(24px,4vh,56px)); } .jr__nav { display: grid; gap: 1px; } .jr__navi { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--k-06); transition: opacity .35s var(--ease); opacity: .42; } .jr__navi:last-child { border-bottom: 1px solid var(--k-06); } .jr__navi b { font-size: .66rem; font-weight: 800; letter-spacing: .16em; color: var(--k-32); font-variant-numeric: tabular-nums; transition: color .35s var(--ease); } .jr__navi span { font-size: .92rem; font-weight: 700; letter-spacing: -.025em; color: var(--k); } .jr__navi.is-on { opacity: 1; } .jr__navi.is-on b { color: var(--a); } .jr__track { display: grid; gap: clamp(30px,5vw,72px); } .jr__step { position: relative; padding: clamp(24px,3vw,36px) clamp(22px,3vw,38px); background: var(--color-secondary-45); border-radius: var(--rad); transition: background-color .5s var(--ease), transform .5s var(--ease); } /* Krok, ke kteremu patri klientska vypoved. Bublina vyrusta z volneho mista vedle textu a mirne presahuje mimo kartu. Nikdy neprekryva ikonu, nadpis ani popis. */ @media (min-width: 1041px) { .jr__step--q { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); column-gap: clamp(18px,2.4vw,32px); align-items: center; padding-right: 0; } .jr__step--q .jr__ico, .jr__step--q h3, .jr__step--q .jr__p { grid-column: 1; } .jr__q { grid-column: 2; grid-row: 1 / 4; align-self: center; width: auto; margin-right: clamp(-42px,-2.6vw,-16px); } } /* Na uzsim displeji stoji bublina pod textem kroku */ @media (max-width: 1040px) { .jr__q { width: auto; margin-top: clamp(16px,2.4vw,22px); } .jr__q::after { display: none; } } /* Na modre plose aktivniho kroku zustava bublina svetla */ .jr__step.is-on .jr__q p { color: var(--k-86); } .jr__step.is-on .jr__q cite { color: var(--k); } .jr__step.is-on .jr__q cite i { color: var(--k-50); } /* Aktivni bod se odlisi plochou, ne dalsi barvou navic */ .jr__step.is-on { background: var(--k); color: var(--w-60); } .jr__step.is-on h3 { color: var(--w); } .jr__step.is-on .jr__ico { color: var(--sand); } .jr__ico { display: block; width: clamp(40px,4.4vw,54px); height: clamp(40px,4.4vw,54px); color: var(--k); margin-bottom: 18px; transition: color .5s var(--ease); } .jr__ico svg { width: 100%; height: 100%; display: block; stroke-width: 1.4; } .jr__step h3 { font-size: clamp(1.3rem,2.2vw,1.8rem); letter-spacing: -.038em; margin-bottom: 10px; transition: color .5s var(--ease); } .jr__p { font-size: .98rem; line-height: 1.6; max-width: 44ch; } .jr__out { display: flex; align-items: flex-start; gap: 14px; margin-top: clamp(34px,4.4vw,58px); padding-top: clamp(22px,2.6vw,30px); border-top: 1px solid var(--k-12); } .jr__out span[aria-hidden] { flex: none; width: 28px; height: 3px; background: var(--a); margin-top: 11px; } .jr__out p { font-size: clamp(1rem,1.35vw,1.18rem); font-weight: 700; letter-spacing: -.026em; line-height: 1.45; max-width: 62ch; color: var(--k-86); } /* -- 08 SLUZBY (dvousloupcovy prepinac) --------------------- */ /* Znacka je v poradi tlacitko, panel, tlacitko, panel... Na sirokem displeji to mrizka rozlozi do dvou sloupcu: vsechna tlacitka vlevo pod sebou, aktivni panel vpravo pres cely blok. Na uzkem zustane prirozene poradi a vznikne accordion. Diky tomu nemusi skript nic prehazovat v DOM. */ .tb__nav { display: grid; gap: 2px; } @media (min-width: 900px) { .tb__nav { grid-template-columns: minmax(0,.86fr) minmax(0,1.14fr); column-gap: clamp(34px,4.4vw,72px); row-gap: 0; align-items: start; } .tb__t:nth-of-type(1) { grid-area: 1 / 1; } .tb__t:nth-of-type(2) { grid-area: 2 / 1; } .tb__t:nth-of-type(3) { grid-area: 3 / 1; } .tb__p { grid-area: 1 / 2 / 4 / 3; } /* Levy sloupec je oddeleny jen linkou, ne ramem karty */ .tb__nav { border-top: 1px solid var(--k-12); } /* Bez JS se panely neprepinaji, proto jdou vsechny pod sebe */ html:not(.js) .tb__nav { grid-template-columns: minmax(0,1fr); } html:not(.js) .tb__t, html:not(.js) .tb__p { grid-area: auto; } html:not(.js) .tb__p { position: static; margin-bottom: clamp(20px,2.6vw,32px); } html:not(.js) .tb__t::after { display: none; } } /* Polozka navigace: typografie a linka, zadna pilulka */ .tb__t { position: relative; display: grid; text-align: left; width: 100%; grid-template-columns: auto minmax(0,1fr); column-gap: clamp(14px,1.8vw,20px); padding: clamp(18px,2.2vw,26px) clamp(4px,1vw,10px) clamp(18px,2.2vw,26px) 0; border-bottom: 1px solid var(--k-12); background: none; transition: padding-left .34s var(--ease); } .tb__t::before { content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--a); transition: width .42s var(--ease-io); } .tb__no { grid-row: 1 / 3; align-self: start; margin-top: .12em; font-size: clamp(.72rem,1vw,.8rem); font-weight: 800; letter-spacing: .16em; color: var(--k-32); font-variant-numeric: tabular-nums; transition: color .3s var(--ease); } .tb__name { font-size: clamp(1.28rem,2.3vw,1.9rem); font-weight: 800; letter-spacing: -.042em; line-height: 1.1; color: var(--k); transition: color .26s var(--ease); } .tb__d { margin-top: 6px; font-size: .92rem; line-height: 1.5; color: var(--k-68); max-width: 40ch; } .tb__t:hover { padding-left: 8px; } .tb__t:hover .tb__no { color: var(--k-50); } .tb__t.is-on { padding-left: 12px; } .tb__t.is-on::before { width: 100%; } .tb__t.is-on .tb__no { color: var(--a); } .tb__t.is-on .tb__name { color: var(--k); } /* Aktivni panel */ .tb__p { min-width: 0; } @media (min-width: 900px) { .tb__p { position: sticky; top: calc(var(--hdr) + 26px); padding: clamp(26px,3vw,40px) clamp(24px,3vw,40px) clamp(28px,3.2vw,42px); background: var(--color-secondary-45); } /* Jemna mikroanimace pri prepnuti, jen opacity a posun */ .tb__p.is-in { animation: tbIn .42s var(--ease-io) both; } } @keyframes tbIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (max-width: 899.98px) { /* Accordion: panel se rozbaluje vyskou mrizky */ .tb__p { padding: 0 0 clamp(22px,3vw,30px); } .tb__p[hidden] { display: block; } } .tb__vis { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-height: 92px; margin-bottom: clamp(18px,2.2vw,26px); } .tb__vis svg { width: min(100%, 264px); height: auto; display: block; } .tb__meta { width: clamp(112px,12vw,152px); height: auto; display: block; } .tb__ch { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--k-12); } .tb__ch img { width: 26px; height: 26px; display: block; } /* Trasa v ikonach se dokresli, az kdyz je panel videt */ .tb__draw { stroke-dasharray: 300; stroke-dashoffset: 300; } .tb__p.is-in .tb__draw { animation: tbDraw .9s var(--ease-io) .12s forwards; } @keyframes tbDraw { to { stroke-dashoffset: 0; } } .tb__claim { font-size: clamp(1.06rem,1.7vw,1.34rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.4; color: var(--k); max-width: 34ch; } .tb__ul { display: grid; gap: 9px; margin: clamp(18px,2.2vw,24px) 0; } .tb__ul li { position: relative; padding-left: 21px; font-size: .95rem; line-height: 1.5; color: var(--k-86); } .tb__ul li::before { content: ''; position: absolute; left: 0; top: .56em; width: 7px; height: 7px; background: var(--a); transform: rotate(45deg); } .tb__scope { font-size: .82rem; line-height: 1.6; color: var(--k-50); padding-top: 14px; border-top: 1px solid var(--k-12); } .tb__scope i { font-style: normal; margin: 0 .2em; color: var(--a); } /* Dukaz uvnitr panelu Meta Ads. Uzka karta pod vycetem sluzeb, nikdy nesahne na logo Meta ani na hlavni text. */ .tb__q { margin-top: clamp(20px,2.4vw,28px); width: auto; max-width: 46ch; } .tb__q p { font-size: .93rem; } /* Skryty panel je pro IntersectionObserver neviditelny, takze bublina nesmi cekat na tridu .in, jinak by zustala na nule. Vazba jde primo na stav panelu, ne na odkryvaci system. */ .js .tb__q { opacity: 0; transform: translateY(10px) rotate(var(--qb-rot, 0deg)); transition: opacity .5s var(--ease) .14s, transform .5s var(--ease-io) .14s; } .js .tb__p:not([hidden]) .tb__q { opacity: 1; transform: translateY(0) rotate(var(--qb-end, 0deg)); } @media (prefers-reduced-motion: reduce) { .js .tb__q { transform: none; } .js .tb__p:not([hidden]) .tb__q { transform: none; } } /* -- 09 PRIPADOVE STUDIE ------------------------------------ */ /* Kazda studie ma vlastni kompozici. Prvni vede obraz zleva, druha zprava. Nejsou to dva stejne obdelniky vedle sebe. */ /* Obrazovy sloupec je uzsi, aby vysoke fotografie nedelaly vedle kratkeho textu prazdne misto. Obe studie maji stejnou vnitrni logiku, jen zrcadlove otocenou. */ .cs { display: grid; grid-template-columns: minmax(0,.76fr) minmax(0,1.24fr); gap: clamp(26px,4vw,60px); align-items: center; padding-bottom: clamp(38px,4.6vw,66px); } .cs + .cs { padding-top: clamp(38px,4.6vw,66px); } .cs--rev .cs__fig { order: 2; } .cs__fig { position: relative; overflow: hidden; background: var(--color-secondary-28); } .cs__fig img { width: 100%; height: auto; display: block; transition: transform .7s var(--ease); } .cs:hover .cs__fig img { transform: scale(1.028); } /* Klientske vypovedi u pripadove studie. Stoji jako spolecny dukazni pas pod obrazem i textem, pres oba sloupce mrizky. Zadna neni pozicovana absolutne, nema zaporne odsazeni ani posun zpet nad fotografii, takze na obraz nikdy nedosahne a nemuze prekryt nadpis, CTA ani dalsi studii. Linka nahore obe vypovedi drzi u sebe. Diky tomu ani ta mensi nepusobi jako volne polozena karticka. Hroty jsou zamerne pryc: v tomto rozlozeni uz bublina nesousedi s nicim, k cemu by mohla mirit. */ .cs__proofs { grid-column: 1 / -1; display: grid; gap: clamp(16px,2.2vw,26px); margin-top: clamp(22px,3vw,38px); padding-top: clamp(20px,2.6vw,30px); border-top: 1px solid var(--k-06); } .cs__proofs .qb { width: auto; max-width: none; } .cs__proofs .qb::after { display: none; } .cs__q--b p { font-size: .93rem; } /* Nad 900 px stoji vedle sebe. Patrikova vypoved je delsi, dostane sirsi sloupec; Janikova je kratsi a zacina niz, aby to nebyly dve stejne karty vedle sebe. */ @media (min-width: 901px) { .cs__proofs { grid-template-columns: minmax(0,1.22fr) minmax(0,.78fr); align-items: start; } .cs__q--b { margin-top: clamp(18px,2.4vw,34px); } } /* Pod 901 px jsou obe vypovedi pres celou sirku a stoji pod sebou. Naklon, ktery u uzke karty pusobi jako rucne polozeny papir, by na sirokem bloku snizil jeden roh o par desitek pixelu: rohy by si lezly do sebe a spodni by zasahoval do dalsi studie. Na uzkych displejich proto stoji rovne. */ @media (max-width: 900px) { .cs__proofs .qb, .js .cs__proofs .qb.in { transform: none; } } /* Tri studie tvori jeden celek, ne tri stejne obdelniky. Prvni je dominantni a sirsi, dalsi dve navazuji. */ .cs--lead { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); align-items: center; } .cs--lead .cs__ttl { font-size: clamp(1.9rem,3.9vw,3.3rem); } .cs--lead .cs__fig { background: var(--color-secondary-45); } .cs--lead + .cs { padding-top: clamp(38px,4.6vw,66px); border-top: 1px solid var(--k-12); } /* Zakonceni sekce vysledku. Zamerne to neni karta ani ctvrta studie: zadne pozadi, zadny ramecek, zadne cislo. Jen svisla linka, ktera pokracuje tam, kde rada studii konci, a veta pod ni. Linka je dekorace, proto ma aria-hidden. */ .soon { display: block; text-align: center; padding-top: clamp(34px,4.4vw,60px); margin-top: clamp(26px,3.4vw,48px); border-top: 1px solid var(--k-12); } .soon__mark { display: block; width: 1px; height: clamp(26px,3.4vw,44px); margin: 0 auto clamp(18px,2.4vw,26px); background: linear-gradient(to bottom, var(--sand), transparent); } .soon__t { font-size: clamp(1.2rem,2.4vw,1.9rem); font-weight: 800; letter-spacing: -.038em; line-height: 1.22; color: var(--k); /* 40ch, aby se veta na desktopu vesla na jeden radek a na uzkem displeji se zalomila prirozene. */ max-width: 40ch; margin-inline: auto; text-wrap: balance; } .soon__s { margin-top: 10px; font-size: .93rem; line-height: 1.6; color: var(--k-50); max-width: 42ch; margin-inline: auto; text-wrap: balance; } /* Dva klicove vysledky primo na karte */ .cs__res { display: flex; flex-wrap: wrap; gap: clamp(16px,2.6vw,40px); margin-top: clamp(16px,2.2vw,24px); padding-top: clamp(14px,1.8vw,20px); border-top: 1px solid var(--k-12); } .cs__res span { display: grid; gap: 3px; max-width: 26ch; font-size: .85rem; line-height: 1.45; color: var(--k-68); } .cs__res b { font-size: clamp(1.3rem,2.2vw,1.75rem); font-weight: 800; letter-spacing: -.045em; color: var(--a); } .cs__klient { display: flex; align-items: center; gap: 11px; font-size: .7rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--k-50); } .cs__klient b { color: var(--k); font-weight: 800; } .cs__klient i { width: 22px; height: 1px; background: var(--k-12); flex: none; } .cs__ttl { margin: clamp(14px,1.8vw,20px) 0 clamp(12px,1.6vw,18px); font-size: clamp(1.7rem,3.4vw,2.9rem); font-weight: 800; letter-spacing: -.046em; line-height: 1.08; color: var(--k); } .cs__hl { color: var(--a); } .cs__txt { font-size: 1rem; line-height: 1.68; color: var(--k-68); max-width: 46ch; } /* Odkaz na detail studie je skutecne tlacitko, ne podtrzeny text. Stav si drzi sam: hover cele studie ho nesmi ovladat, jinak dotykove zarizeni nema jak poznat, ze jde o aktivni prvek. Zaobleni zustava editorialni, zadna pilulka. */ .cs__cta { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(20px,2.4vw,28px); min-height: 50px; padding: 13px 22px; background: var(--k); color: var(--w); border: 1px solid var(--k); border-radius: var(--rad-s); font-size: .92rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; transition: background .26s var(--ease), border-color .26s var(--ease); } .cs__cta svg { width: 15px; height: 15px; flex: none; transition: transform .28s var(--ease); } .cs__cta:hover { background: var(--a); border-color: var(--a); color: var(--w); } .cs__cta:hover svg { transform: translate(3px,-3px); } .cs__cta:focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; } @media (max-width: 640px) { .cs__cta { width: 100%; } } /* -- 10 PROCES ---------------------------------------------- */ /* Zadna vlastni kolejnice. Kroky nese hlavni pruvodni linka, tady zustavaji jen velka cisla, ikona a strucny text. */ .proc { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2.6vw,34px); } .proc__step { position: relative; padding-top: clamp(20px,2.6vw,28px); border-top: 2px solid var(--k-12); transition: border-color .45s var(--ease); } .proc__step.is-on { border-top-color: var(--k); } .proc__step:nth-child(2) { padding-top: calc(clamp(20px,2.6vw,28px) + clamp(0px,3vw,42px)); } .proc__step:nth-child(3) { padding-top: calc(clamp(20px,2.6vw,28px) + clamp(0px,6vw,84px)); } /* Cislo a ikona stoji na jedne lince, ne pod sebou */ .proc__step { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: 14px; align-items: center; } .proc__n { grid-column: 1; font-size: clamp(2.8rem, 5.4vw, 4.4rem); font-weight: 800; letter-spacing: -.06em; line-height: .84; color: var(--color-secondary-70); transition: color .5s var(--ease); } .proc__ico { grid-column: 2; justify-self: start; } .proc__body { grid-column: 1 / -1; margin-top: clamp(14px,1.8vw,20px); } .proc__step.is-on .proc__n { color: var(--k-32); } .proc__step:hover .proc__n, .proc__step:focus-within .proc__n { color: var(--a); } .proc__ico { display: block; width: 30px; height: 30px; margin: 14px 0 16px; color: var(--k); } .proc__ico svg { width: 100%; height: 100%; display: block; } .proc__step h3 { font-size: clamp(1.2rem,1.9vw,1.5rem); letter-spacing: -.035em; margin-bottom: 10px; } .proc__step > div > p { font-size: .96rem; line-height: 1.6; color: var(--k-68); } .proc__lead { font-size: .95rem; line-height: 1.6; color: var(--k-68); margin-top: 6px; } .proc__ul { display: grid; gap: 7px; margin-top: clamp(13px,1.6vw,18px); } .proc__ul li { position: relative; padding-left: 18px; font-size: .89rem; line-height: 1.5; color: var(--k-68); } .proc__ul li::before { content: ''; position: absolute; left: 0; top: .56em; width: 6px; height: 6px; background: var(--sand); transform: rotate(45deg); } /* -- 11 O MARTINOVI ----------------------------------------- */ /* Jeden osobni profil, ne nekolik nesouvisejicich bloku. Fotografie a text zacinaji na stejne lince nahore. */ .me { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(26px,4.2vw,64px); align-items: start; } .me__in > .body { margin-top: clamp(12px,1.6vw,16px); } .me__in .hx { margin: clamp(12px,1.6vw,18px) 0 clamp(14px,1.8vw,20px); } .me__fig { position: relative; } .me__fig::before { content: ''; position: absolute; z-index: 0; left: 0; right: 14%; top: 12%; bottom: 6%; background: var(--color-secondary-45); border-radius: var(--rad); } .me__fig::after { content: ''; position: absolute; z-index: 0; left: 8%; right: 4%; top: 18%; bottom: 0; border: 1px solid var(--color-primary-16); border-radius: var(--rad); } .me__fig picture, .me__fig img { position: relative; z-index: 1; width: 100%; border-radius: var(--rad); } .me__stat { position: absolute; z-index: 2; right: 0; bottom: 6%; background: var(--k); color: var(--w); padding: 14px 17px; border-radius: var(--rad-s); max-width: 200px; box-shadow: var(--sh); } .me__stat b { display: block; font-size: 1.18rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--sand); } .me__stat span { display: block; margin-top: 6px; font-size: .74rem; line-height: 1.35; color: var(--w-60); } .path { display: grid; gap: 2px; margin-top: clamp(20px,2.6vw,30px); } .path__i { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 15px; padding: 16px 0; border-top: 1px solid var(--k-12); align-items: start; } .path__i:last-child { border-bottom: 1px solid var(--k-12); } .path__n { font-size: .72rem; font-weight: 800; color: var(--k); padding-top: 3px; font-variant-numeric: tabular-nums; } .path__i h3 { font-size: .98rem; font-weight: 800; letter-spacing: -.025em; margin-bottom: 4px; } .path__i p { font-size: .89rem; color: var(--k-50); line-height: 1.55; } /* Podpis. Skutecny text psanym pismem, ne obrazek ani kresba: da se oznacit, precist cteckou a zvetsit bez rozmazani. Pismo je ulozene lokalne, takze podpis nezavisi na cizim serveru; nez se nacte, zaskoci fallback z rodiny cursive. Odkryvani resi bezny .rv, tedy jen opacity a posun. */ .sign { margin-top: clamp(22px,3vw,34px); line-height: 1; } .sign__name { display: inline-block; font-family: "Marck Script", "Segoe Script", "Snell Roundhand", cursive; font-size: clamp(3rem,5vw,4.8rem); font-weight: 400; line-height: .95; letter-spacing: -.02em; word-spacing: -.05em; color: var(--k); transform: rotate(-1deg); } /* Vlastni projekty jako osobni poznamka u podpisu */ .me__own { margin-top: clamp(22px,2.8vw,32px); padding-left: clamp(14px,1.8vw,18px); border-left: 2px solid var(--sand); } .me__own p { font-size: .95rem; line-height: 1.68; color: var(--k-68); max-width: 52ch; } /* Umisteni dukazovych dvojic v jednotlivych sekcich */ .tb__proof { margin-top: clamp(34px,4.4vw,58px); } .me__proof { margin-top: clamp(34px,4.4vw,60px); } /* Kratka poznamka klienta primo u kroku procesu */ .proc__q { margin-top: clamp(16px,2vw,22px); width: auto; box-shadow: none; background: var(--color-secondary-15); border-color: transparent; } .proc__q p { font-size: .87rem; font-weight: 500; } .proc__q footer { margin-top: 10px; padding-top: 9px; } .proc__q footer img { width: 32px; height: 32px; } .proc__q cite { font-size: .76rem; } .proc__q .qb__mk { font-size: 1.7rem; margin-bottom: 7px; } /* -- 12 VYKON A OBSAH ---------------------------------------- */ /* Centralni editorial kompozice. Opticka vaha je uprostred stranky, ne v leve tretine. Fotografie jsou zamerne male a obe maji stejnou velikost, orez i typografickou vahu. */ .vo { text-align: center; } .vo__h { max-width: 22ch; margin-inline: auto; } /* Druhy radek je odsazeny doprava, ale celek zustava v ose */ .vo__h2 { display: block; padding-left: clamp(0px,6vw,110px); } .vo__lead { max-width: 54ch; margin: clamp(18px,2.2vw,26px) auto 0; } .vo__duo { display: grid; grid-template-columns: repeat(2, minmax(0, clamp(210px,22vw,320px))); justify-content: center; column-gap: clamp(26px,6vw,120px); margin-top: clamp(34px,4.4vw,64px); text-align: left; } /* Martin mirne vlevo od stredu, Matej mirne vpravo a niz */ .vo__one--a { justify-self: end; } .vo__one--b { justify-self: start; margin-top: clamp(22px,3.4vw,58px); } .vo__one { position: relative; width: 100%; } .vo__fig { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--color-secondary-45); } .vo__fig img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block; transition: transform .8s var(--ease); } .vo__one:hover .vo__fig img { transform: scale(1.02); } .vo__nm { font-size: clamp(1.1rem,1.7vw,1.44rem); font-weight: 800; letter-spacing: -.042em; line-height: 1.1; color: var(--k); margin-top: clamp(12px,1.5vw,16px); } .vo__role { font-size: .88rem; line-height: 1.6; color: var(--k-68); margin-top: 5px; text-wrap: balance; } .vo__role i { font-style: normal; margin: 0 .18em; color: var(--a); } /* Prima rec Martina. Vizualne se lisi od klientskych bublin: misto fotografie je podpis. Miri do prostoru mezi portrety. */ .vo__say { text-align: left; } .vo__say footer { border-top-color: var(--color-secondary-70); } .vo__sig { font-size: .92rem; font-weight: 800; letter-spacing: -.03em; color: var(--k); padding-left: 26px; position: relative; } .vo__sig::before { content: ''; position: absolute; left: 0; top: 50%; width: 18px; height: 1.5px; background: var(--a); transform: translateY(-50%); } @media (min-width: 901px) { /* Bublina stoji ve volnem miste po Martinove strane a hrotem miri k nemu. Neni pod Matejovou fotografii, takze ji nic neprekryva. */ .vo__say { position: absolute; z-index: 4; right: calc(100% + clamp(10px,1.1vw,18px)); top: clamp(30px,5vw,84px); width: clamp(190px,15vw,220px); } /* Bublina visi jen po Martinove strane, takze by cela dvojice opticky spadla doleva. Drobny posun vraci vahu do osy. */ .vo__duo { transform: translateX(clamp(0px,3.4vw,56px)); } } @media (max-width: 900px) { .vo__say { margin-top: clamp(16px,2.4vw,22px); width: auto; } .vo__say::after { display: none; } } /* Spolecne sdeleni jako typograficky most k videoukazkam */ .vo__mani { margin: clamp(44px,5.6vw,88px) auto clamp(30px,3.8vw,52px); max-width: 20ch; font-size: clamp(1.5rem,3.4vw,2.9rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.06; color: var(--k); } /* Spolecne uzavreni cele sekce. Nepatri k zadnemu jednomu videu, proto stoji az pod vsemi tremi a je oddeleno linkou i mezerou. Dve nestejne karty, ne dvojice klonu. */ .vo__after { margin-top: clamp(34px,4.4vw,58px); padding-top: clamp(26px,3.2vw,40px); border-top: 1px solid var(--k-12); display: grid; gap: clamp(18px,2.4vw,30px); } .vo__after .qb { width: auto; max-width: none; } .vo__after-b p { font-size: .93rem; } @media (min-width: 900px) { .vo__after { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: start; } .vo__after-b { margin-top: clamp(24px,3.2vw,46px); } } .vids { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(14px,1.8vw,22px); margin-top: clamp(32px,4vw,54px); } .vid { position: relative; } /* Stejna konstrukce jako u videoreference nize, ktera se na telefonu vykresluje spravne. Zadny vynuceny aspect-ratio na boxu ani na videu a zadna pevna vyska: vysku urcuje prirozeny pomer videosouboru. Kombinace height: 100 % s vynucenym pomerem stran byla presne to, kvuli cemu se obraz na mobilu priblizoval a odskakoval. */ .vid__box { position: relative; width: 100%; overflow: hidden; background: #000; border-radius: var(--rad); border: 1px solid var(--k-06); } .vid__box video { position: relative; inset: auto; display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; object-position: center center; background: #000; transform: none; } /* Nahradni obsah videa se zobrazi jen tam, kde prehravani nefunguje */ .vid__box video { color: var(--w); } .vid__box video a { color: var(--sand); text-decoration: underline; } .sec--wine .sec--wine .sec--wine .vid__box { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.06); } /* Videa nezacinaji ve stejne vysce, prostredni je o kus vys. Presah je jen dekorativni, zadne video neni zakryte. */ @media (min-width: 901px) { /* Posun je soucast kompozice, ne animace. Proto margin, ktery neprepisuji pravidla pro odkryvani ani omezeni pohybu. */ .vids--stag { align-items: start; } .vids--stag .vid:nth-child(2) { margin-top: clamp(-56px,-4.4vw,-28px); } .vids--stag .vid:nth-child(3) { margin-top: clamp(-24px,-1.8vw,-10px); } .wrap--bleed .vids--stag { margin-inline: calc(clamp(10px,1.4vw,22px) * -1); } } /* -- 13 KLIENTSKA LOGA -------------------------------------- */ /* Jeden vodorovny pas, pomalejsi nez recenze. Bez JS je to bezny rolovatelny seznam. */ .lg { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-block: 6px; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .lg::-webkit-scrollbar { display: none; } .js .lg { overflow: hidden; } .lg__rail { display: flex; width: max-content; } .lg__row { display: flex; align-items: stretch; gap: clamp(10px,1.2vw,14px); padding-inline: clamp(5px,.6vw,7px); } /* Na telefonu se pas log neposouva sam, listuje se prstem. Posledni logo nesmi doplout az k okraji, jinak neni poznat, ze pas pokracuje. */ @media (max-width: 767px) { .js .lg { overflow-x: auto; } .lg { scroll-snap-type: x proximity; scroll-padding-left: var(--gut); overscroll-behavior-x: contain; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } .lg__rail { transform: none !important; } .logo { scroll-snap-align: start; min-height: 56px; } } .logo { flex: 0 0 auto; width: 168px; display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 16px 18px; border-radius: var(--rad); background: var(--w); border: 1px solid var(--k-06); transition: border-color .28s var(--ease), transform .28s var(--ease); } .logo:hover { border-color: var(--sand); } .logo img { max-width: 100%; width: auto; object-fit: contain; } /* Tmavy podklad pro loga navrzena na tmave pozadi */ .logo--dark { background: var(--k); border-color: var(--k); } /* Logo s vlastnim barevnym pozadim zustava na nem */ .logo--own { padding: 0; overflow: hidden; border-color: transparent; background: transparent; } .logo--own img { width: 100%; max-width: none; } /* Bezovy podklad tam, kde logo potrebuje teplejsi zaklad */ .logo--sand { background: var(--color-secondary-45); border-color: transparent; } .logo--h28 img { max-height: 28px; } .logo--h34 img { max-height: 34px; } .logo--h42 img { max-height: 42px; } .logo--h52 img { max-height: 52px; } .logo--h64 img { max-height: 64px; } /* -- 14 VYSLEDKOVE DLAZDICE (pouziva pripadova studie) ------- */ .res { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px,3.4vw,54px); } .res__i { position: relative; padding-top: clamp(18px,2.4vw,26px); border-top: 3px solid var(--k); } .res__v { font-size: clamp(2.1rem, 4.8vw, 3.7rem); font-weight: 800; letter-spacing: -.052em; line-height: .94; color: var(--a); } .res__v em { font-style: normal; color: var(--k-32); } .res__l { margin-top: 12px; font-size: .92rem; color: var(--k-68); line-height: 1.5; max-width: 24ch; } /* -- 15 RECENZE (nekonecny jednoradkovy pas) ----------------- */ .rev { position: relative; } .rev__lead { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(22px,2.8vw,34px); } .rev__say { font-size: clamp(1rem,1.3vw,1.16rem); color: var(--k-68); max-width: 46ch; line-height: 1.55; } .rev__nav { display: flex; gap: 8px; } .rev__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--k-12); display: flex; align-items: center; justify-content: center; background: var(--w); color: var(--k-68); transition: background-color .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease); } .rev__arrow:hover { background: var(--k); border-color: var(--k); color: var(--w); } .rev__arrow svg { width: 15px; height: 15px; } .mq { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; padding-block: 12px 16px; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); } .mq::-webkit-scrollbar { display: none; } .js .mq { overflow: hidden; cursor: grab; } .js .mq.is-drag { cursor: grabbing; } .mq__rail { display: flex; align-items: stretch; width: max-content; } .mq__row { display: flex; align-items: stretch; gap: clamp(14px,1.4vw,18px); padding-inline: clamp(7px,.7vw,9px); } .rev__card { --card: 384px; flex: 0 0 var(--card); width: var(--card); background: var(--w); border: 1px solid var(--k-06); border-radius: var(--rad); padding: clamp(20px,2.2vw,26px); display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease); } .mq:not(.is-drag) .rev__card:hover { box-shadow: var(--sh); transform: translateY(-3px); border-color: var(--sand); } /* Vinova uvozovka misto linky */ .rev__q { position: relative; font-size: .98rem; line-height: 1.62; color: var(--k-86); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; } .rev__q::before { content: '\201C'; display: block; font-size: 2.6rem; line-height: .7; color: var(--a); font-weight: 800; margin-bottom: 8px; } .rev__more { align-self: flex-start; margin-top: 14px; } .rev__more .link { font-size: .88rem; } .rev__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--k-06); display: flex; flex-wrap: wrap; align-items: center; gap: 9px 11px; } .av { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; object-fit: cover; object-position: center; border: 2px solid var(--sand); background: var(--w); } span.av { display: flex; align-items: center; justify-content: center; background: var(--color-secondary-45); color: var(--k); font-size: .78rem; font-weight: 800; letter-spacing: .02em; } .rev__who { min-width: 0; flex: 1 1 150px; } .rev__who b { display: block; font-size: .92rem; font-weight: 800; letter-spacing: -.025em; } .rev__who span { display: block; font-size: .78rem; color: var(--k-50); line-height: 1.35; } .rev__logo { flex: none; max-width: 84px; max-height: 30px; margin-left: auto; } .rev__logo img { max-height: 30px; width: auto; object-fit: contain; } .rev__logo--dark { background: var(--k); border-radius: 3px; padding: 5px 7px; } .rev__logo--dark img { max-height: 20px; } .rev__since { font-size: .69rem; font-weight: 800; letter-spacing: .04em; color: var(--k); background: var(--color-secondary-45); padding: 5px 9px; border-radius: var(--rad-pill); white-space: nowrap; } /* -- 16 MODAL ----------------------------------------------- */ .modal { position: fixed; inset: 0; z-index: 2200; display: flex; align-items: center; justify-content: center; padding: clamp(16px,4vw,48px); background: var(--color-primary-90); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; /* Viditelnost se nesmi prolinat. Kdyby se prolinala, byl by prvek v okamziku otevreni jeste skryty a nesel by na nej presunout fokus z klavesnice. Pri zavirani se skryje az po dojeti fade. */ transition: opacity .28s var(--ease), visibility 0s linear .28s; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity .28s var(--ease), visibility 0s linear 0s; } .modal__box { width: 100%; max-width: 620px; max-height: 86vh; display: flex; flex-direction: column; background: var(--w); border-radius: var(--rad); overflow: hidden; transform: translateY(12px); transition: transform .3s var(--ease); } .modal.is-open .modal__box { transform: none; } .modal__hd { display: flex; align-items: flex-start; gap: 13px; padding: clamp(20px,2.6vw,28px); border-bottom: 1px solid var(--k-12); } /* Obal avataru se nesmi smrsknout, jinak by z kruhu byla elipsa */ #mAv { flex: none; display: block; line-height: 0; } .modal__hd b { display: block; font-size: 1.04rem; font-weight: 800; letter-spacing: -.03em; } .modal__hd span { display: block; font-size: .87rem; color: var(--k-50); line-height: 1.4; } .modal__x { margin-left: auto; width: 44px; height: 44px; flex: none; border: 1.5px solid var(--k-12); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease); } .modal__x:hover { background: var(--k); border-color: var(--k); color: var(--w); } .modal__x svg { width: 16px; height: 16px; } .modal__bd { padding: clamp(20px,2.6vw,28px); overflow-y: auto; overscroll-behavior: contain; line-height: 1.7; white-space: pre-line; color: var(--k-86); } .modal__ft { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding: 13px clamp(20px,2.6vw,28px); border-top: 1px solid var(--k-12); font-size: .8rem; color: var(--k-50); background: var(--color-secondary-15); } .modal__ft a { display: inline-flex; align-items: center; min-height: 44px; color: var(--k); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--color-primary-40); font-weight: 700; } .modal__ft a:hover { text-decoration-color: var(--k); } /* -- 17 STATISTIKY ------------------------------------------ */ /* Hlavni typografickou osou je cislo 25+. Text patrici k cislu stoji primo u nej, ostatni metriky asymetricky vedle. Zadne ctyri stejne karticky, jen typografie, prostor a linky. */ .st { padding: clamp(34px,4.4vw,64px) 0 clamp(30px,3.8vw,52px); border-top: 1px solid var(--k-12); } .st__main { display: grid; grid-template-columns: auto minmax(0,1fr); column-gap: clamp(18px,2.6vw,40px); align-items: center; } .st__big { display: flex; align-items: flex-start; line-height: .76; font-size: clamp(5.6rem, 17vw, 15rem); font-weight: 800; letter-spacing: -.08em; color: var(--k); } /* Znamenko plus ma vlastni barvu i meritko */ .st__big i { font-style: normal; font-size: .3em; color: var(--a); margin-left: .05em; margin-top: .12em; } .st__say { padding-bottom: clamp(6px,1.4vw,16px); } .st__lb { font-size: clamp(1.06rem,1.8vw,1.45rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; color: var(--k); } .st__nt { font-size: .9rem; line-height: 1.6; color: var(--k-50); max-width: 32ch; margin-top: 7px; } /* Za cislem stoji konkretni lide. Portrety se lehce prekryvaji. */ .st__faces { display: flex; align-items: center; margin-top: clamp(14px,1.8vw,20px); } .st__faces img { width: clamp(34px,3.4vw,44px); height: clamp(34px,3.4vw,44px); border-radius: 50%; object-fit: cover; display: block; border: 2px solid var(--w); margin-left: -10px; background: var(--sand); } .st__faces img:first-child { margin-left: 0; } .st__more { margin-left: 12px; font-size: .8rem; font-weight: 700; color: var(--k-50); } .st__side { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3.4vw,56px); margin-top: clamp(30px,3.8vw,54px); align-items: start; } .st__i { padding-left: clamp(14px,1.8vw,22px); border-left: 1px solid var(--k-12); } .st__i--down { margin-top: clamp(16px,3vw,48px); } .st__v { display: flex; align-items: baseline; flex-wrap: wrap; gap: .12em; font-size: clamp(2.2rem,4.6vw,3.5rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--k); } .st__v i { font-style: normal; color: var(--a); } .st__v u { text-decoration: none; font-size: .34em; font-weight: 800; letter-spacing: -.02em; color: var(--k-50); } .st__i .st__lb { font-size: .93rem; font-weight: 600; color: var(--k-68); letter-spacing: -.01em; max-width: 26ch; margin-top: 8px; } /* Citace je dukaz k cislu, ne volna karticka vedle nej */ .st__q { width: auto; margin-top: clamp(16px,2.2vw,24px); box-shadow: none; background: var(--color-secondary-15); border-color: transparent; } .st__q p { font-size: .88rem; font-weight: 500; } .st__q .qb__mk { font-size: 1.7rem; margin-bottom: 7px; } /* -- 18 KONTAKT --------------------------------------------- */ /* Kontakt je zaverecna modra plocha: bily text, bezove detaily, svetla formularova pole a jedine cervene konverzni CTA. */ .sec--wine .ct__rows > div { border-top-color: var(--w-14); } .sec--wine .ct__rows > div:last-child { border-bottom-color: var(--w-14); } .sec--wine .ct__rows dt { color: var(--sand); } .sec--wine .ct__rows dd a { color: var(--w); } .sec--wine .ct__rows dd a:hover { color: var(--sand); } .sec--wine .form-card { background: var(--w); border-color: transparent; } .sec--wine .form-card .f label { color: var(--k-50); } .sec--wine .form-card .f input, .sec--wine .form-card .f textarea { color: var(--k); } .sec--wine .form__nb { color: var(--k-50); } /* Hlavni konverzni tlacitko je jediny cerveny prvek sekce */ .sec--wine .form .btn--r { background: var(--a); border-color: var(--a); } .sec--wine .form .btn--r:hover { background: var(--k); border-color: var(--k); } .ct { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.96fr); gap: clamp(30px,4.6vw,72px); align-items: start; } .ct h2 { margin: 16px 0 14px; } .ct__rows { display: grid; margin-top: clamp(22px,3vw,32px); } .ct__rows > div { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 14px; align-items: center; padding: 8px 0; border-top: 1px solid var(--k-12); min-height: 62px; } .ct__rows > div:last-child { border-bottom: 1px solid var(--k-12); } .ct__rows dt { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--k-50); } .ct__rows dd a { display: inline-flex; align-items: center; min-height: 44px; font-size: clamp(1rem,1.4vw,1.1rem); font-weight: 700; letter-spacing: -.025em; } .ct__rows dd a:hover { color: var(--k); } /* Skutecny portret Martina primo u vyzvy k napsani */ /* Vetsi portret primo u vyzvy, jmeno vyrazne vedle nej. Zadny kruh ani umely tvar za postavou. */ .ct__me { margin-top: clamp(24px,3vw,36px); display: flex; align-items: center; gap: clamp(16px,2.2vw,26px); padding-top: clamp(20px,2.4vw,28px); border-top: 1px solid var(--k-12); } .sec--wine .ct__me { border-top-color: var(--w-14); } .ct__me-fig { flex: none; width: clamp(96px,10vw,138px); height: clamp(96px,10vw,138px); border-radius: 50%; overflow: hidden; background: var(--sand); display: block; } .ct__me img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 16%; display: block; } .ct__me-nm { font-size: clamp(1.34rem,2.4vw,2rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; color: var(--k); } .sec--wine .ct__me-nm { color: var(--w); } /* Formular neni vlozeny cizi prvek, ale soucast zaveru: vetsi rozestupy, citelnejsi popisky, jasny stav fokusu. */ .form-card { background: var(--w); border: 0; border-radius: var(--rad); box-shadow: var(--sh); padding: clamp(24px,3.2vw,42px); } .form { display: grid; gap: clamp(18px,2.2vw,24px); } .form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2vw,22px); } .f label { display: block; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--k-68); margin-bottom: 9px; } .f label i { font-style: normal; color: var(--a); } .f input, .f textarea { width: 100%; min-height: 54px; padding: 14px 15px; background: var(--color-secondary-15); color: var(--k); border: 1px solid transparent; border-bottom: 2px solid var(--k-12); border-radius: var(--rad-s) var(--rad-s) 0 0; font-size: 1rem; font-family: inherit; transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); } .f textarea { min-height: 118px; resize: vertical; line-height: 1.55; } .f input::placeholder, .f textarea::placeholder { color: var(--k-50); } .f input:hover, .f textarea:hover { background: var(--color-secondary-28); border-bottom-color: var(--sand); } .f input:focus, .f textarea:focus { outline: none; background: var(--w); border-color: var(--k); border-bottom-color: var(--k); box-shadow: 0 0 0 3px var(--color-secondary-45); } .f input[aria-invalid="true"], .f textarea[aria-invalid="true"] { border-bottom-color: var(--a); background: var(--color-accent-08); } .f input[aria-invalid="true"]:focus, .f textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(78,0,0,.14); } .f .err { display: none; margin-top: 8px; font-size: .86rem; color: var(--a); font-weight: 700; } .f .err.on { display: block; } /* Vysvetleni nad tlacitkem, kdyz server zpravu prijmout neumi */ .form__note { margin-bottom: 12px; padding: 11px 14px; background: var(--color-secondary-28); border-left: 3px solid var(--sand); font-size: .86rem; line-height: 1.55; color: var(--k-86); } .form__st { display: none; padding: 13px 15px; background: var(--color-secondary-28); border-left: 3px solid var(--sand); font-size: .92rem; line-height: 1.5; color: var(--k-86); } .form__st.on { display: block; } .form__st.bad { border-left-color: var(--a); background: var(--color-accent-08); } .form .btn { width: 100%; justify-content: center; min-height: 56px; } .form__nb { font-size: .82rem; color: var(--k-50); text-align: center; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .hp input { border: 0; } /* -- PREHRAVACE VIDEI, SPOLECNA POJISTKA -------------------- */ /* Nad nativni vrstvou videa nesmi vzniknout vlastni kompozicni vrstva. Zaklada ji transform, will-change, filter, perspective i backdrop-filter, a Safari na iPhonu pak vykresli obraz mimo box: priblizeny, orezany nebo posunuty do rohu. Pojistka plati jen na videa a jejich bezprostredni obaly. */ .vid, .vid__box, .vid__box video, .video-review__media, .video-review__player, .video-review__player video { transform: none !important; will-change: auto !important; filter: none; perspective: none; backface-visibility: visible; } /* -- VIDEOREFERENCE KLIENTKY -------------------------------- */ /* Samostatny blok pred sekci recenzi. Jemne odlisena bezova plocha, zadna velka zaoblena karta, zadne hvezdicky. Autenticita videa je hlavni vizualni prvek, design ji ma jen podeprit. */ .video-review { background: var(--color-secondary-28); padding-block: clamp(52px,7vw,104px); } /* V bloku zustal jen nadpis a video, proto dve casti: video vlevo v pevne sirce, nadpis vpravo, obe svisle vycentrovane. */ .video-review__grid { display: grid; grid-template-columns: minmax(280px, 390px) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; } .video-review__content { display: flex; align-items: center; } /* Prehravac nikdy neni absolutne umisteny a nema vynuceny pomer stran. Vysku urcuje prirozeny pomer videosouboru. */ .video-review__media { margin: 0; width: min(100%, 390px); } .video-review__player { position: relative; width: 100%; overflow: hidden; background: #000; border-radius: var(--rad); box-shadow: var(--sh); } .video-review__player video { position: relative; display: block; width: 100%; height: auto; object-fit: contain; object-position: center; background: #000; transform: none; } .video-review__title { font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; color: var(--k); text-wrap: balance; } /* Po dobehnuti nabehu uz na bloku nesmi zustat transform, jinak by vytvoril novy ramec pro fixed prvky v prehravaci. */ .video-review, .video-review.in { transform: none; will-change: auto; } @media (max-width: 768px) { /* Nadpis vzdy nad videem, nikdy pod nim. */ .video-review__grid { display: flex; flex-direction: column; gap: 24px; } .video-review__content { order: 1; width: 100%; } .video-review__media { order: 2; width: min(100%, 350px); margin-inline: auto; } } @media (prefers-reduced-motion: reduce) { .video-review, .video-review.in { transform: none; } } /* -- DEKOVACI STRANKA --------------------------------------- */ /* Jedna obrazovka, vycentrovana. Zadna oslava, jen potvrzeni a jasne, co bude dal. */ .thx { padding-top: calc(var(--hdr) + clamp(48px,7vw,110px)); padding-bottom: clamp(56px,8vw,120px); } .thx__in { max-width: 62ch; margin-inline: auto; text-align: center; } .thx__mark { display: inline-flex; align-items: center; justify-content: center; width: clamp(48px,6vw,62px); height: clamp(48px,6vw,62px); border: 2px solid var(--sand); border-radius: 50%; color: var(--a); margin-bottom: clamp(20px,2.6vw,28px); } .thx__mark svg { width: 46%; height: 46%; } .thx__t { font-size: clamp(1.9rem,4.4vw,3.2rem); font-weight: 800; letter-spacing: -.048em; line-height: 1.04; color: var(--k); text-wrap: balance; } .thx__s { margin: clamp(14px,1.8vw,20px) auto 0; max-width: 48ch; font-size: clamp(1rem,1.25vw,1.12rem); line-height: 1.65; color: var(--k-68); } .thx__s a { color: var(--a); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .thx__btns { justify-content: center; margin-top: clamp(26px,3.4vw,38px); } .thx__next { margin-top: clamp(44px,5.6vw,76px); padding-top: clamp(24px,3vw,34px); border-top: 1px solid var(--k-12); text-align: left; } .thx__next-k { font-size: .7rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--k-50); text-align: center; margin-bottom: clamp(16px,2vw,22px); } .thx__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .thx__links a { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 14px 0; border-top: 1px solid var(--k-06); font-size: .98rem; font-weight: 800; letter-spacing: -.025em; color: var(--k); transition: color .24s var(--ease); } .thx__links li:first-child a { border-top: 0; } .thx__links a span { font-size: .86rem; font-weight: 500; letter-spacing: 0; color: var(--k-50); } .thx__links a:hover { color: var(--a); } @media (max-width: 640px) { .thx__btns .btn { width: 100%; } .thx__links a { flex-direction: column; gap: 3px; } } /* -- 19 PATICKA --------------------------------------------- */ /* Jedina velka tmava plocha na webu, zamerne nizka. */ .ft { background: var(--k); color: var(--w-60); } .ft__in { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; justify-content: space-between; padding-block: clamp(28px,3.4vw,42px); } .ft__brand { font-weight: 800; font-size: 1.06rem; letter-spacing: -.045em; color: var(--w); } .ft__brand i { font-style: normal; color: var(--sand); } .ft__nav { display: flex; flex-wrap: wrap; gap: 6px 22px; } .ft__nav a { font-size: .88rem; color: var(--w-60); min-height: 44px; display: flex; align-items: center; } .ft__nav a:hover { color: var(--sand); } .ft__nav a:hover, .ft__bar a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sand); } .ft__bar { display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; justify-content: space-between; padding-block: 8px 12px; border-top: 1px solid var(--w-14); font-size: .8rem; color: var(--w-38); } .ft__bar a { display: inline-flex; align-items: center; min-height: 44px; } .ft__bar a:hover { color: var(--sand); } /* -- 20 POHYB ----------------------------------------------- */ /* DULEZITE: prvek, ktery je sam orezany pres clip-path, nikdy nehlasi isIntersecting, takze by se uz nikdy neodkryl. Maska proto vzdy patri az na vnitrni obrazek, nikdy na sledovany obal. */ .js .rv { opacity: 0; transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .js .rv.in { opacity: 1; transform: none; } /* Varianty smeru, aby se vse nesouvalo jen zdola */ .js .rv { transform: translateY(16px); } .js .rv--l { transform: translateX(-24px); } .js .rv--r { transform: translateX(24px); } /* Na uzkych displejich by odkryvaci posun doprava vysunul jeste neodkryty blok o 24 px za pravy okraj a stranka by sla vodorovne posouvat. Tam se odkryva jen svisle. */ @media (max-width: 900px) { .js .rv--l, .js .rv--r { transform: translateY(16px); } } .js .rv--s { transform: scale(.968); } /* Karta s videem po dokončení odkrytí nesmí držet transform ani will-change. Obojí zakládá vlastní kompoziční vrstvu a Safari na iPhonu kvůli ní umisťuje nativní vrstvu videa mimo box. */ .vid.in { transform: none; will-change: auto; } @media (max-width: 768px) { .vid, .js .vid.rv, .js .vid.rv--s, .vid.in { transform: none; will-change: auto; } } .js .rv[data-d="1"] { transition-delay: .07s; } .js .rv[data-d="2"] { transition-delay: .14s; } .js .rv[data-d="3"] { transition-delay: .21s; } .js .rv[data-d="4"] { transition-delay: .28s; } .js .rv[data-d="5"] { transition-delay: .35s; } /* Odkryti fotografie maskou. Obal .rvm se sleduje, orezava se .rvm__i. */ .rvm { position: relative; } .js .rvm .rvm__i { clip-path: inset(0 0 100% 0); transition: clip-path .84s var(--ease-io), transform .96s var(--ease); transform: scale(1.035); } .js .rvm.in .rvm__i { clip-path: inset(0 0 0 0); transform: none; } /* Vykresleni vinove linky podle scrollu */ .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); } .js .draw.in { transition: stroke-dashoffset 1.1s var(--ease-io); stroke-dashoffset: 0; } html:not(.js) .draw { stroke-dashoffset: 0; } /* Velmi lehky pohyb fotografii, jen pres transform */ .js .plx { will-change: transform; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .js .rv { opacity: 1; transform: none; } .js .rvm .rvm__i { clip-path: none; transform: none; } .draw { stroke-dashoffset: 0; } .js .plx { transform: none !important; } } /* -- 21 RESPONZIVITA ---------------------------------------- */ @media (max-width: 1280px) { .rev__card { --card: 352px; } } /* Pod 1100 px uz vedle fotografie neni dost mista, aby bubliny plavaly a zaroven minuly oblicej. Skladaji se proto do bezneho toku. Fotografie jde hned za CTA, teprve pod ni vypovedi: navstevnik musi nejdriv videt, s kym mluvi. Poradi vypovedi je Romanek, Pelech, Holecek, tedy od te nejobecnejsi k te nejkonkretnejsi. Resi ho `order`, ne DOM, aby desktopova kompozice zustala nedotcena. */ @media (max-width: 1100px) { .hero__fig { display: grid; gap: 0; } .hero__fig picture { order: 1; } .hero__qs { display: contents; } .hero .qb { position: static; width: auto; inset: auto; box-shadow: var(--sh-s); } .hero .qb::after { display: none; } .js .hero .qb { transform: none; } .js .hero .qb.in { transform: none; } .hero__q--c { order: 2; } .hero__q--b { order: 3; } .hero__q--a { order: 4; } .hero .qb p { font-size: .94rem; } /* Mezery mezi fotografii a vypovedmi drzi az pas nize. Nad 768 px staci bezny rozestup sloupce. */ .hero__qs > .qb + .qb { margin-top: 12px; } .hero__q--c { margin-top: clamp(18px,4vw,24px); } } /* Na telefonu se ze tri vypovedi stava vodorovny pas, kterym se listuje prstem. Jedna karta je cela videt, z dalsi vykukuje kousek, takze je na prvni pohled jasne, ze pas pokracuje. Zadny automaticky pohyb, zadna dalsi knihovna: staci scroll-snap. Pas vybiha do okraju displeje, aby karta mohla doplout az k nemu. */ @media (max-width: 767px) { /* Mezi CTA a fotografii 32 px, ne vice: hero uz tak na telefonu zabere dost vysky. Vyssi specificita je nutna, pozdejsi blok pro 1040 px by jinak pravidlo prebil. */ .hero .hero__in { gap: 32px; } .hero__fig picture { /* Sirka postavy je kolem 84 % sloupce, zaroven ji drzi strop 34vh, aby na nizkem displeji nezabrala skoro cely. Pomer stran 1066 : 1600 znamena vysku 1,5 nasobku sirky, strop tedy odpovida zhruba polovine vysky displeje. */ display: block; width: min(84%, 34vh); margin-inline: auto; } .hero__qs { display: flex; order: 2; gap: 12px; margin-top: clamp(18px,5vw,24px); margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut); padding-bottom: 4px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .hero__qs::-webkit-scrollbar { display: none; } .hero__qs > .qb { flex: 0 0 86%; margin-top: 0; scroll-snap-align: start; } .hero__qs > .qb + .qb { margin-top: 0; } .hero__q--c { margin-top: 0; } } @media (max-width: 1040px) { /* Cesta se sklada pod sebe, sticky sloupec se vypina */ .jr { grid-template-columns: minmax(0,1fr); gap: clamp(24px,4vw,40px); } .jr__side { position: static; } .jr__nav { display: none; } .jr__track { gap: 12px; } .jr__step { padding: clamp(20px,3vw,28px); } .nav, .hdr__cta { display: none; } .burger { display: flex; } .float { display: block; } .proc { grid-template-columns: minmax(0,1fr); gap: clamp(22px,3.4vw,34px); } .proc__step:nth-child(2), .proc__step:nth-child(3) { padding-top: clamp(20px,2.6vw,28px); } } /* Na uzkych displejich musi zustat citace i avatar dobre citelne */ @media (max-width: 900px) { .qb, .qbs .qb { width: auto; max-width: 100%; } .qbs { grid-template-columns: minmax(0,1fr); gap: 14px; } .qbs .qb:nth-child(2) { margin-top: 0; } .qb p, .proc__q p, .hero .qb p { font-size: 1rem; line-height: 1.55; } .qb footer img, .proc__q footer img { width: 40px; height: 40px; } .qb cite, .proc__q cite { font-size: .82rem; } :root { --hdr: 64px; } /* Sluzby: z prepinace je prehledny accordion */ .tb__nav { gap: 0; } .tb__t { padding-right: 44px; } /* Sipka misto aktivniho podtrzeni */ .tb__t::after { content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--k-50); border-bottom: 2px solid var(--k-50); transform: translateY(-70%) rotate(45deg); transition: transform .3s var(--ease), border-color .3s var(--ease); } .tb__t.is-on::after { border-color: var(--a); transform: translateY(-20%) rotate(-135deg); } .tb__t.is-on { padding-left: 0; } .tb__t.is-on::before { width: 100%; } /* Pripadove studie pod sebe, obraz vzdy nahore */ .cs, .cs--lead { grid-template-columns: minmax(0,1fr); gap: clamp(20px,3.4vw,30px); } .cs--rev .cs__fig { order: -1; } .cs__res { gap: 14px 26px; } .hero__in { grid-template-columns: minmax(0,1fr); gap: clamp(24px,5vw,40px); } .hero__fig { max-width: 430px; width: 100%; margin-inline: auto; } .hero__sub { max-width: 46ch; } .spec { margin-bottom: clamp(24px,4vw,32px); } .case, .me, .ct { grid-template-columns: minmax(0,1fr); } .case__fig { order: -1; } .res { grid-template-columns: minmax(0,1fr); gap: clamp(18px,3vw,28px); } .res__l { max-width: none; } /* Treti video by jinak zustalo samo v levem sloupci a vpravo po nem zela prazdne misto. Postavi se doprostred. */ .vids { grid-template-columns: repeat(2,1fr); } .vids .vid:nth-child(3) { grid-column: 1 / -1; justify-self: center; width: min(100%, 330px); } .vid:nth-child(3) { grid-column: 1 / -1; max-width: calc(50% - 11px); } /* Dvojice: obe fotografie si drzi stejnou plochu i pod sebou */ /* Portrety pod sebou, oba stejne siroke a na stred */ .vo__duo { grid-template-columns: minmax(0, min(320px, 100%)); justify-content: center; row-gap: clamp(26px,5vw,40px); } .vo__one--a, .vo__one--b { justify-self: center; margin-top: 0; } .vo__h2 { padding-left: 0; } .st__main { grid-template-columns: minmax(0,1fr); row-gap: clamp(10px,2vw,16px); } .st__side { grid-template-columns: minmax(0,1fr); gap: clamp(22px,3.4vw,32px); } .st__i--down { margin-top: 0; } .rev__card { --card: min(380px, 76vw); } /* Pod 900 px se statistika odsazuje pod fotografii, takže figure je vyšší o celý tmavý blok. Dekorační obdélníky se ale počítaly z výšky figure, a tak zasahovaly přes statistiku a prosvětlovaly ji. Na mobilu je proto vážeme na samotnou fotografii, ne na figure. */ .me__fig::before, .me__fig::after { content: none; } .me__fig picture { position: relative; display: block; } .me__fig picture::before { content: ''; position: absolute; z-index: 0; left: 0; right: 10%; top: 10%; bottom: 12%; background: var(--color-secondary-45); border-radius: var(--rad); } /* Statistika zůstává v toku pod fotografií, ale s vlastním z-indexem, aby ji nemohlo nic překrýt. Bez position by z-index neplatil. */ .me__stat { position: relative; z-index: 3; right: auto; bottom: auto; width: 100%; max-width: none; margin-top: 12px; } .me__stat b { font-size: 1.32rem; } .me__stat span { font-size: .82rem; } } @media (max-width: 640px) { body { font-size: 16px; } .t-hero { font-size: clamp(2.35rem, 11.5vw, 3.3rem); } .btns .btn { width: 100%; } .vids { grid-template-columns: minmax(0,1fr); } .vid { max-width: 330px; margin-inline: auto; width: 100%; } .vid:nth-child(3) { grid-column: auto; max-width: 330px; } .form__2 { grid-template-columns: minmax(0,1fr); } .ct__rows > div { grid-template-columns: minmax(0,1fr); gap: 2px; padding: 10px 0; } /* Jedna karta a videt kus dalsi */ .rev__card { --card: 78vw; padding: 19px; } .rev__q { -webkit-line-clamp: 9; } .mq { -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); } .lg { -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); } .st__big { font-size: clamp(5rem, 26vw, 9rem); } .st__faces img { width: 38px; height: 38px; } /* Jmena ve fotografiich se na uzkem displeji musi vejit */ .logo { width: 146px; min-height: 88px; padding: 14px; } } @media (max-width: 380px) { :root { --gut: 18px; } /* Na 320 px uz spodni meze clampu nestacily a nadpisy prestrelovaly ven, takze slo strankou posouvat do strany. U "od patnacti" drzi slova pohromade nedelitelna mezera, cely nadpis se proto musi vejit na radek. */ .t-hero { font-size: clamp(2.05rem, 10.6vw, 2.6rem); } .hx--col { font-size: clamp(1.68rem, 8.4vw, 2.1rem); } .t-1 { font-size: clamp(1.55rem, 7.8vw, 1.95rem); } .rev__card { --card: 82vw; } } @media (min-width: 1600px) { :root { --shell: 1360px; } } @media (hover: none) { .btn:hover { transform: none; } .logo:hover { transform: none; } .mq:not(.is-drag) .rev__card:hover { transform: none; box-shadow: none; } .proc__step:hover { transform: none; } .cs:hover .cs__fig img { transform: none; } .tb__t:hover { padding-left: 0; } } @media print { .hdr, .float, #bar, .modal, .menu, .rev__nav { display: none !important; } .ft { background: #fff !important; color: #000 !important; } .mq, .lg { overflow: visible; } .mq__rail, .mq__row, .lg__rail, .lg__row { display: block; width: auto; } .rev__card { width: auto; break-inside: avoid; margin-bottom: 12px; } } /* -- 22 PRIPADOVA STUDIE (samostatna stranka) --------------- */ .case { display: grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap: clamp(28px,4.6vw,68px); align-items: center; } .case__fig { position: relative; } .case__fig img { width: 100%; border-radius: var(--rad); } .case__badge { position: absolute; left: 0; bottom: -14px; background: var(--k); color: var(--w); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 9px 15px; border-radius: var(--rad-s); } .case__src { margin-top: clamp(20px,2.6vw,28px); font-size: .82rem; color: var(--k-50); line-height: 1.6; max-width: 74ch; } .pull { margin: clamp(28px,3.6vw,44px) 0; padding: clamp(20px,2.6vw,30px) clamp(22px,3vw,34px); background: var(--color-secondary-28); border-left: 3px solid var(--k); border-radius: 0 var(--rad) var(--rad) 0; } .pull p { font-size: clamp(1.1rem,1.8vw,1.42rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.32; color: var(--k); } .pull cite { display: block; margin-top: 11px; font-style: normal; font-size: .84rem; color: var(--k-50); } .cs-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2.2vw,26px); } .cs-card { padding: clamp(20px,2.6vw,28px); background: var(--w); border: 1px solid var(--k-06); border-radius: var(--rad); border-top: 3px solid var(--k); } .cs-card b { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--k); margin-bottom: 11px; } .cs-card h3 { font-size: 1.06rem; letter-spacing: -.03em; margin-bottom: 8px; } .cs-card p { font-size: .92rem; line-height: 1.58; color: var(--k-68); } .cs-why { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px 40px; } .cs-why li { position: relative; padding: 15px 0 15px 24px; border-top: 1px solid var(--k-12); font-size: .96rem; line-height: 1.5; } .cs-why li::before { content: ''; position: absolute; left: 0; top: calc(15px + .6em); width: 7px; height: 7px; background: var(--k); transform: rotate(45deg); } @media (max-width: 900px) { .cs-grid { grid-template-columns: minmax(0,1fr); gap: 16px; } .cs-why { grid-template-columns: minmax(0,1fr); } } /* -- 23 PRIPADOVA STUDIE: SYSTEM ---------------------------- */ /* Jednotny vertikalni rytmus a jedna sada nadpisu misto inline max-width a rucne vynucenych radku u kazde sekce. */ .case-section { position: relative; padding-block: clamp(52px,6.6vw,104px); } .case-section--compact { padding-block: clamp(34px,4.4vw,64px); } /* Navazujici sekce nepotrebuji dvojite odsazeni */ .case-section + .case-section { padding-top: clamp(46px,5.4vw,84px); } .case-section--tight { padding-top: clamp(34px,4vw,58px) !important; } /* Posledni prvek sekce uz nepridava vlastni spodni mezeru */ .case-section > .wrap > *:last-child { margin-bottom: 0; } .case-section--hero { padding-top: calc(var(--hdr) + clamp(22px,3.4vw,46px)); padding-bottom: clamp(40px,5vw,72px); } .case-section--peak { padding-block: clamp(60px,7.6vw,124px); } .case-back { margin-bottom: clamp(18px,2.4vw,28px); } /* Tri urovne nadpisu, zalomeni resi prohlizec. Nadpisy drzi sirku obsahoveho kontejneru. Drivejsi stropy 24ch a 26ch je mackaly do uzkeho sloupce, takze se lamaly po jednom dvou slovech a vedle nich zustavala prazdna plocha. Sirku ted omezuje mrizka sekce, ne ch, a zalomeni resi text-wrap: balance. */ .case-heading { max-width: none; font-size: clamp(2.05rem, 4.4vw, 4rem); line-height: .98; letter-spacing: -.05em; font-weight: 800; color: var(--k); text-wrap: balance; hyphens: none; } /* Hero nadpis stoji vedle fotografie v uzsim sloupci mrizky, takze tam strop v ch smysl ma, jen o neco velkorysejsi. */ .case-heading--hero { max-width: 30ch; font-size: clamp(2.05rem, 3.9vw, 3.5rem); } /* Kontext k hlavnimu nadpisu, ktery uz by ho prilis prodlouzil */ .rw__h1-note { margin-top: clamp(12px,1.6vw,18px); padding-left: 14px; border-left: 3px solid var(--rw-zlut, var(--a)); font-size: clamp(.98rem,1.4vw,1.14rem); font-weight: 700; letter-spacing: -.02em; color: var(--k); max-width: 46ch; } .case-sub { max-width: none; font-size: clamp(1.35rem, 2.4vw, 2.1rem); line-height: 1.08; letter-spacing: -.042em; font-weight: 800; color: var(--k); text-wrap: balance; } .case-sub--sm { font-size: clamp(1.1rem, 1.7vw, 1.4rem); max-width: 30ch; } /* Bezny odstavec drzi citelnou delku radku, pod 90 znaku. Neni to uzky sloupec, je to horni mez pro cteni. */ .case-intro { max-width: 78ch; margin-top: clamp(16px,2vw,24px); font-size: clamp(1.02rem,1.26vw,1.16rem); line-height: 1.62; color: var(--k-68); } .case-content { max-width: 86ch; } .case-content p { font-size: 1rem; line-height: 1.7; color: var(--k-68); } .case-content p + p { margin-top: 1em; } .case-note { margin-top: clamp(16px,2vw,22px); padding-left: 16px; border-left: 2px solid var(--rw-zlut, var(--sand)); font-size: .95rem; line-height: 1.65; color: var(--k-68); } /* Drive to byly dva sloupce: nadpis vlevo v 19ch, text vpravo. Nadpis se tam lamal po jednom dvou slovech. Ted stoji nadpis nad textem pres celou sirku a text pod nim drzi citelnou delku radku. */ .case-two { display: grid; grid-template-columns: minmax(0,1fr); gap: clamp(16px,2.2vw,28px); align-items: start; } .case-two__a .case-heading, .case-two__a .case-sub { max-width: none; } .case-two__b { max-width: 86ch; } .case-two__b .case-intro { margin-top: 0; max-width: none; } .case-cta { text-align: center; padding-top: clamp(34px,4.4vw,62px); } .case-cta .rule-r { margin: 0 auto clamp(22px,3vw,32px); } .case-cta .case-sub { max-width: 24ch; margin-inline: auto; } .case-cta .case-intro { margin-inline: auto; max-width: 56ch; } .case-cta .btns { justify-content: center; margin-top: clamp(24px,3vw,34px); } .case-kicker { display: flex; align-items: center; gap: 10px; font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--k-50); margin-bottom: clamp(14px,1.8vw,20px); } .case-kicker::before { content: ''; width: 30px; height: 3px; background: var(--rw-zlut, var(--a)); flex: none; } .case-kicker i { font-style: normal; color: var(--k-32); } /* -- 24 RIDEWHEEL ------------------------------------------- */ /* Barvy RideWheel jsou jen lokalni akcent, zaklad zustava modro-bezovy jako na celem webu. */ .rw { --rw-zlut: #F2B807; --rw-cerv: #C8102E; } /* Hero */ .rw__top { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); gap: clamp(28px,4.4vw,72px); align-items: center; } .rw__fig { margin: 0; } .rw__fig img { width: 100%; height: auto; display: block; max-width: 400px; margin-inline: auto; border-radius: var(--rad); box-shadow: var(--sh); } .rw__fig figcaption { margin-top: 14px; font-size: .8rem; color: var(--k-50); text-align: center; } /* Hlavni teze, viditelna hned v prvni obrazovce */ /* Datova kompozice */ .rw__data { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: clamp(24px,4vw,60px); align-items: start; } .rw__cmp { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: clamp(14px,2.4vw,30px); align-items: start; } .rw__cmp-t { font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--k-50); } .rw__cmp-v { font-size: clamp(1.7rem,3.4vw,2.8rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--k-50); margin-top: 8px; white-space: nowrap; } .rw__cmp-i--now .rw__cmp-v { color: var(--k); } .rw__bar { display: block; height: 10px; margin-top: 12px; border-radius: 2px; } .rw__bar--before { width: 100%; background: var(--color-secondary-70); } .rw__bar--now { width: 62.7%; background: var(--rw-zlut); } .rw__arrow { font-size: clamp(1.2rem,2vw,1.7rem); color: var(--k-32); margin-top: clamp(30px,4vw,54px); } .rw__cmp-cap { grid-column: 1 / -1; font-size: .82rem; color: var(--k-50); } .rw__side { display: grid; gap: clamp(20px,2.6vw,32px); padding-left: clamp(16px,2.2vw,28px); border-left: 1px solid var(--k-12); } .rw__delta-v { font-size: clamp(2.4rem,4.8vw,3.9rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--a); } .rw__delta-l { margin-top: 8px; font-size: .89rem; line-height: 1.5; color: var(--k-68); max-width: 24ch; } .rw__days { padding-top: clamp(18px,2.4vw,26px); border-top: 1px solid var(--k-12); } .rw__days-v { font-size: clamp(1.5rem,2.6vw,2.1rem); font-weight: 800; letter-spacing: -.05em; color: var(--k); } .rw__days-l { margin-top: 8px; font-size: .89rem; line-height: 1.6; color: var(--k-68); } /* Cena, objem, kvalita */ .rw__triad { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2.6vw,36px); margin-top: clamp(34px,4.4vw,64px); padding-top: clamp(22px,2.8vw,32px); border-top: 1px solid var(--k-12); } .rw__triad-i b { display: block; font-size: clamp(1.4rem,2.6vw,2.1rem); font-weight: 800; letter-spacing: -.05em; color: var(--k-32); } .rw__triad-i span { display: block; margin-top: 6px; font-size: .88rem; line-height: 1.5; color: var(--k-50); } .rw__triad-i--key b { color: var(--k); } .rw__triad-i--key span { color: var(--k-68); } .rw__triad-s { grid-column: 1 / -1; margin-top: clamp(8px,1.4vw,14px); font-size: .95rem; font-weight: 700; color: var(--k); max-width: 60ch; } /* Tri vysledky hned pod uvodem: efektivita, kvalita zpracovani a objem. Prvni je sirsi, je to hlavni cislo studie. */ .rw__metrics { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2.2vw,30px); margin-top: clamp(22px,2.8vw,32px); } .rw__metric { padding-left: clamp(14px,1.8vw,20px); border-left: 3px solid var(--k-12); } .rw__metric--main { border-left-color: var(--rw-zlut); } .rw__metric-k { font-size: .7rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--k-50); } .rw__metric-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: .26em; margin-top: 9px; font-weight: 800; letter-spacing: -.045em; color: var(--k-50); font-size: clamp(1.3rem,2.3vw,1.9rem); } .rw__metric--side .rw__metric-v { font-size: clamp(1.15rem,1.9vw,1.5rem); } .rw__metric-v i { font-style: normal; color: var(--k-32); } .rw__metric-v b { color: var(--k); } .rw__metric-l { margin-top: 7px; font-size: .88rem; font-weight: 700; color: var(--k-68); } .rw__metric-n { margin-top: 6px; font-size: .78rem; line-height: 1.5; color: var(--k-50); max-width: 34ch; } .rw__metrics-s { grid-column: 1 / -1; padding-top: clamp(12px,1.6vw,18px); border-top: 1px solid var(--k-12); font-size: .92rem; line-height: 1.6; color: var(--k-68); max-width: 62ch; } /* Teze a autenticke dukazy primo z Mety */ .rw__thesis { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap: clamp(24px,4vw,68px); align-items: start; margin-top: clamp(36px,4.6vw,68px); padding-top: clamp(28px,3.4vw,44px); border-top: 1px solid var(--k-12); } .rw__thesis-a { font-size: clamp(1.3rem,2.5vw,2.05rem); font-weight: 700; letter-spacing: -.042em; line-height: 1.12; color: var(--k-50); text-wrap: balance; } .rw__thesis-b { margin-top: 6px; font-size: clamp(1.45rem,2.9vw,2.45rem); font-weight: 800; letter-spacing: -.048em; line-height: 1.1; text-wrap: balance; } .rw__thesis-n { margin-top: clamp(14px,1.8vw,20px); font-size: .95rem; line-height: 1.66; color: var(--k-68); max-width: 46ch; } .rw__proof { padding: clamp(18px,2.4vw,28px); background: var(--w); border-radius: var(--rad); box-shadow: var(--sh-s); } .rw__proof-src { display: flex; align-items: center; gap: 9px; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: var(--k-50); padding-bottom: clamp(12px,1.6vw,16px); border-bottom: 1px solid var(--k-12); } .rw__proof-src img { width: 22px; height: auto; display: block; flex: none; } .rw__proof-i { margin: clamp(14px,1.8vw,18px) 0 0; } .rw__proof-i figcaption { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--k-50); margin-bottom: 7px; } .rw__proof-i img { width: 100%; height: auto; display: block; border: 1px solid var(--k-12); border-radius: var(--rad-s); } .rw__proof-n { margin-top: clamp(14px,1.8vw,18px); font-size: .82rem; line-height: 1.55; color: var(--k-50); } /* Autenticke zpravy klienta */ .rw__msg { margin: 0; } .rw__msg img { width: 100%; height: auto; display: block; border-radius: var(--rad-s); box-shadow: 0 8px 24px rgba(19,39,63,.16); } .rw__msg figcaption { margin-top: 11px; font-size: .82rem; line-height: 1.55; color: var(--k-50); } .rw__msg figcaption b { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--k); margin-bottom: 5px; } .rw__msg--sm { margin-top: clamp(16px,2.2vw,24px); padding-top: clamp(14px,1.8vw,20px); border-top: 1px solid var(--k-12); } .rw__msg--lg { margin-top: clamp(22px,3vw,34px); } .js .rw__msg { opacity: 0; transform: translateY(12px); } .js .rw__msg.in { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease-io); } @media (prefers-reduced-motion: reduce) { .js .rw__msg { opacity: 1; transform: none; } } .rw__wide-msg { margin-top: clamp(30px,4vw,56px); } .rw__wide-msg-t { margin-top: clamp(14px,1.8vw,20px); font-size: .95rem; line-height: 1.66; color: var(--k-68); max-width: 72ch; } .rw__invest { grid-column: 1 / -1; margin-top: clamp(18px,2.4vw,28px); padding-left: 16px; border-left: 2px solid var(--rw-zlut); font-size: .9rem; line-height: 1.62; color: var(--k-68); max-width: 62ch; } /* Vedeli jste: problem cileni jako redakcni prvek */ .rw__know { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: clamp(22px,3.4vw,56px); align-items: start; margin-top: clamp(34px,4.4vw,64px); padding-top: clamp(24px,3vw,36px); border-top: 2px solid var(--rw-zlut); } .rw__know-k { font-size: clamp(1.7rem,3.4vw,2.9rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: var(--rw-zlut); } .rw__know-t { margin-top: clamp(10px,1.4vw,14px); font-size: clamp(1.06rem,1.8vw,1.36rem); font-weight: 700; line-height: 1.4; letter-spacing: -.03em; color: var(--k); text-wrap: balance; } .rw__know-src { display: flex; align-items: flex-start; gap: 10px; margin-top: clamp(14px,1.8vw,20px); font-size: .84rem; line-height: 1.55; color: var(--k-50); } .rw__know-src img { width: 20px; height: auto; display: block; flex: none; margin-top: 2px; } .rw__know-p { font-size: .98rem; line-height: 1.66; color: var(--k-68); max-width: 56ch; } .rw__know-l { display: grid; gap: 2px; margin-top: clamp(16px,2.2vw,24px); counter-reset: kl; } .rw__know-l li { position: relative; padding: clamp(11px,1.4vw,14px) 0 clamp(11px,1.4vw,14px) 30px; border-top: 1px solid var(--k-12); font-size: .93rem; line-height: 1.5; color: var(--k-68); } .rw__know-l li:last-child { border-bottom: 1px solid var(--k-12); } .rw__know-l li::before { counter-increment: kl; content: counter(kl); position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: .72rem; font-weight: 800; color: var(--rw-cerv); } .rw__know-l b { color: var(--k); } .rw__know-e { margin-top: clamp(14px,1.8vw,20px); font-size: .93rem; font-weight: 700; line-height: 1.55; color: var(--k); max-width: 46ch; } .rw__punch { margin-top: clamp(26px,3.4vw,44px); font-size: clamp(1.3rem,2.6vw,2.15rem); font-weight: 800; letter-spacing: -.048em; line-height: 1.12; color: var(--k); max-width: 24ch; text-wrap: balance; } /* Zmena systemu: tri ruzne siroke bloky, ne pet stejnych karet */ .rw__sys-top, .rw__sys-bot { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: clamp(20px,3.4vw,56px); align-items: start; padding-top: clamp(22px,2.8vw,34px); border-top: 2px solid var(--k-12); } .rw__sys-top { margin-top: clamp(28px,3.6vw,48px); } .rw__sys-bot { margin-top: clamp(22px,2.8vw,38px); border-top-color: var(--rw-zlut); } .rw__sys-n { font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; color: var(--rw-zlut); font-variant-numeric: tabular-nums; } .rw__sys-ico { display: block; width: clamp(30px,3.2vw,40px); height: clamp(30px,3.2vw,40px); margin-top: 12px; color: var(--k); } .rw__sys-ico svg { width: 100%; height: 100%; display: block; } .rw__sys-h h3 { margin-top: clamp(12px,1.6vw,18px); font-size: clamp(1.2rem,2vw,1.6rem); font-weight: 800; letter-spacing: -.042em; line-height: 1.12; text-wrap: balance; } .rw__sys-p { font-size: .98rem; line-height: 1.66; color: var(--k-68); max-width: 58ch; } .rw__sys-l { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; margin-top: clamp(16px,2.2vw,22px); } .rw__sys-l li { position: relative; padding: 10px 0 10px 18px; border-top: 1px solid var(--k-12); font-size: .9rem; line-height: 1.45; color: var(--k-68); } .rw__sys-l li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 6px; height: 6px; background: var(--rw-zlut); transform: rotate(45deg); } .rw__sys-mid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(18px,2.6vw,34px); margin-top: clamp(22px,2.8vw,38px); } .rw__sys-c { padding-top: clamp(18px,2.2vw,26px); border-top: 1px solid var(--k-12); } .rw__sys-c h3 { margin-top: clamp(12px,1.6vw,18px); font-size: clamp(1.02rem,1.6vw,1.22rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.15; } .rw__sys-c p { margin-top: 8px; font-size: .92rem; line-height: 1.58; color: var(--k-68); } .rw__sys-res { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-top: 13px !important; padding-top: 11px; border-top: 1px solid var(--k-12); } .rw__sys-res b { font-size: clamp(1rem,1.5vw,1.2rem); font-weight: 800; letter-spacing: -.04em; color: var(--k); } .rw__sys-res span { font-size: .84rem; color: var(--k-50); } /* Kreativa: text, video a screenshot jako jeden celek */ .rw__creative { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.75fr) minmax(0,.62fr); gap: clamp(22px,3.4vw,52px); align-items: start; } .rw__claim { margin-top: clamp(18px,2.4vw,28px); padding-left: clamp(14px,1.8vw,20px); border-left: 3px solid var(--rw-zlut); font-size: clamp(1.06rem,1.7vw,1.3rem); font-weight: 700; line-height: 1.45; letter-spacing: -.028em; color: var(--k); max-width: 40ch; } .rw__deflist { display: grid; gap: 2px; margin-top: clamp(20px,2.6vw,30px); } .rw__deflist > div { padding: clamp(11px,1.5vw,15px) 0; border-top: 1px solid var(--k-12); } .rw__deflist > div:last-child { border-bottom: 1px solid var(--k-12); } .rw__deflist dt { font-size: .93rem; font-weight: 800; letter-spacing: -.03em; color: var(--k); } .rw__deflist dd { margin-top: 4px; font-size: .87rem; line-height: 1.5; color: var(--k-68); } .rw__video { margin: 0; } .rw__video-box { border-radius: var(--rad); overflow: hidden; background: var(--k); box-shadow: var(--sh); } .rw__video video { width: 100%; height: auto; display: block; aspect-ratio: 9 / 16; background: var(--k); } .rw__video figcaption, .rw__adshot figcaption { margin-top: 12px; font-size: .8rem; line-height: 1.5; color: var(--k-50); } .rw__adshot { margin: 0; } .rw__adshot img { width: 100%; height: auto; display: block; border-radius: var(--rad); box-shadow: var(--sh-s); } /* Srovnani formatu */ .rw__vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.6vw,34px); margin-top: clamp(26px,3.4vw,44px); } .rw__vs-i { padding: clamp(20px,2.6vw,32px); background: var(--color-secondary-45); border-radius: var(--rad); } .rw__vs-i--alt { background: var(--k); color: var(--w-60); } .rw__vs-k { font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--k-50); } .rw__vs-i--alt .rw__vs-k { color: var(--sand); } .rw__vs-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(14px,1.8vw,20px); } .rw__vs-v { font-size: clamp(2.4rem,5vw,4rem); font-weight: 800; letter-spacing: -.06em; line-height: .9; color: var(--k); } .rw__vs-v span { display: block; margin-top: 6px; font-size: .22em; font-weight: 700; letter-spacing: 0; color: var(--k-50); } .rw__vs-i--alt .rw__vs-v { color: var(--w); } .rw__vs-i--alt .rw__vs-v span { color: var(--w-60); } .rw__vs-c { font-size: clamp(1.3rem,2.2vw,1.8rem); font-weight: 800; letter-spacing: -.045em; color: var(--k); white-space: nowrap; } .rw__vs-c span { display: block; margin-top: 5px; font-size: .46em; font-weight: 600; letter-spacing: 0; color: var(--k-50); } .rw__vs-i--alt .rw__vs-c { color: var(--rw-zlut); } .rw__vs-i--alt .rw__vs-c span { color: var(--w-60); } .rw__vs-n { margin-top: clamp(14px,1.8vw,20px); padding-top: clamp(11px,1.4vw,15px); border-top: 1px solid var(--k-12); font-size: .87rem; line-height: 1.5; color: var(--k-50); } .rw__vs-i--alt .rw__vs-n { border-top-color: var(--w-14); color: var(--w-60); } .rw__vs-sum { margin-top: clamp(18px,2.4vw,28px); font-size: .95rem; line-height: 1.65; color: var(--k-68); max-width: 66ch; } /* Smycka: zpetna vazba se vraci zpet do reklamy */ .rw__loop { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(10px,1.6vw,18px); margin-top: clamp(28px,3.6vw,48px); counter-reset: l; } .rw__loop-i { position: relative; padding: clamp(16px,2vw,22px) clamp(13px,1.6vw,18px); background: var(--w); border-radius: var(--rad); } .rw__loop-i::before { counter-increment: l; content: counter(l, decimal-leading-zero); display: block; margin-bottom: 9px; font-size: .68rem; font-weight: 800; letter-spacing: .18em; color: var(--rw-zlut); } .rw__loop-i:not(:last-child)::after { content: ''; position: absolute; right: calc(clamp(10px,1.6vw,18px) * -0.5 - 4px); top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--k-32); border-top: 2px solid var(--k-32); transform: translateY(-50%) rotate(45deg); } .rw__loop-i--back { background: var(--k); color: var(--w-60); } .rw__loop-i--back::before { color: var(--sand); } .rw__loop-k { font-size: clamp(.93rem,1.3vw,1.05rem); font-weight: 800; letter-spacing: -.03em; color: var(--k); } .rw__loop-i--back .rw__loop-k { color: var(--w); } .rw__loop-p { margin-top: 7px; font-size: .84rem; line-height: 1.45; color: var(--k-68); } .rw__loop-i--back .rw__loop-p { color: var(--w-60); } /* Navrat zpetne vazby zpet na zacatek */ .rw__loop-back { position: relative; margin-top: 12px; padding: 10px 0 0 0; border-top: 2px dashed var(--k-12); font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--k-50); text-align: center; } .rw__loop-back::before, .rw__loop-back::after { content: ''; position: absolute; top: -2px; width: 2px; height: 12px; background: var(--k-12); } .rw__loop-back::before { left: 0; } .rw__loop-back::after { right: 0; } .rw__table { margin-top: clamp(38px,4.8vw,72px); padding-top: clamp(26px,3.4vw,44px); border-top: 1px solid var(--k-12); } .rw__crit-wrap { margin-top: clamp(30px,3.8vw,52px); } .rw__crit { display: grid; grid-template-columns: 1fr 1fr; gap: 2px clamp(20px,3vw,48px); margin-top: clamp(14px,1.8vw,20px); } .rw__crit li { position: relative; padding: clamp(10px,1.3vw,14px) 0 clamp(10px,1.3vw,14px) 26px; border-top: 1px solid var(--k-12); font-size: .92rem; line-height: 1.5; color: var(--k-68); } .rw__crit li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border: 2px solid var(--rw-zlut); border-radius: 50%; } .rw__why { display: grid; gap: 2px; } .rw__why li { padding: clamp(10px,1.3vw,14px) 0; border-top: 1px solid var(--k-12); font-size: .95rem; line-height: 1.5; color: var(--k-68); } .rw__why li:last-child { border-bottom: 1px solid var(--k-12); } /* Zaverecne shrnuti: jedna souvisla asymetricka kompozice */ .rw__sum { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: clamp(18px,2.6vw,36px); margin-top: clamp(28px,3.6vw,48px); } .rw__sum-i { grid-column: span 2; padding-top: clamp(16px,2vw,22px); border-top: 1px solid var(--k-12); } .rw__sum-i--main { grid-column: span 3; border-top-width: 2px; border-top-color: var(--k); } .rw__sum-i--key { grid-column: span 3; border-top-width: 2px; border-top-color: var(--rw-zlut); } .rw__sum dt { font-size: .72rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: var(--k-50); } .rw__sum dd { margin: 10px 0 0; font-size: .88rem; line-height: 1.58; color: var(--k-68); } .rw__sum dd b { display: flex; align-items: baseline; flex-wrap: wrap; gap: .24em; margin-bottom: 9px; font-size: clamp(1.06rem,1.8vw,1.44rem); font-weight: 800; letter-spacing: -.045em; color: var(--k); } .rw__sum-i--main dd b { font-size: clamp(1.2rem,2.1vw,1.7rem); } .rw__sum dd b i { font-style: normal; color: var(--k-32); } .rw__sum-i--key dd b { color: var(--a); } @media (max-width: 1040px) { /* Tri vysledky se pod 1040 px nevejdou vedle sebe v citelne velikosti, proto dva nahore a treti pres celou sirku. */ .rw__metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } .rw__metric--main { grid-column: 1 / -1; } .rw__top { grid-template-columns: minmax(0,1fr); gap: clamp(24px,4vw,34px); } .rw__thesis { grid-template-columns: minmax(0,1fr); gap: clamp(20px,3.4vw,30px); } .rw__know { grid-template-columns: minmax(0,1fr); gap: clamp(18px,3vw,26px); } .rw__sys-mid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } .rw__sys-c:last-child { grid-column: 1 / -1; } .rw__sum { grid-template-columns: repeat(2, minmax(0,1fr)); } .rw__sum-i, .rw__sum-i--main, .rw__sum-i--key { grid-column: span 1; } .rw__fig img { max-width: 320px; } .rw__creative { grid-template-columns: minmax(0,1fr) minmax(0,.72fr); } .rw__adshot { grid-column: 1 / -1; max-width: 420px; } .rw__loop { grid-template-columns: repeat(3, minmax(0,1fr)); } .rw__loop-i:nth-child(3)::after { display: none; } } @media (max-width: 900px) { .case-two { grid-template-columns: minmax(0,1fr); gap: clamp(16px,3vw,24px); } .rw__metrics { grid-template-columns: minmax(0,1fr); gap: clamp(16px,3vw,22px); } .rw__metric-n { max-width: none; } .rw__sys-top, .rw__sys-bot { grid-template-columns: minmax(0,1fr); gap: clamp(16px,3vw,24px); } .rw__sys-mid { grid-template-columns: minmax(0,1fr); } .rw__sys-c:last-child { grid-column: auto; } .rw__sys-l { grid-template-columns: minmax(0,1fr); } .case-heading, .case-heading--hero, .case-sub { max-width: none; } .rw__data { grid-template-columns: minmax(0,1fr); gap: clamp(24px,4vw,32px); } .rw__side { padding-left: 0; padding-top: clamp(20px,3vw,26px); border-left: 0; border-top: 1px solid var(--k-12); } .rw__creative { grid-template-columns: minmax(0,1fr); } .rw__video, .rw__adshot { max-width: 380px; margin-inline: auto; } .rw__vs { grid-template-columns: minmax(0,1fr); } .rw__loop { grid-template-columns: minmax(0,1fr); gap: 10px; } .rw__loop-i::after { display: none !important; } .rw__sum { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .rw__triad { grid-template-columns: minmax(0,1fr); gap: 14px; } .rw__sum { grid-template-columns: minmax(0,1fr); } /* Dlouha zprava klienta smi byt sirsi nez bezny text, ale vzdy nejmene 16 px od kraje obrazovky. */ .rw__msg--lg { margin-inline: calc((var(--gut) - 16px) * -1); } .rw__crit { grid-template-columns: minmax(0,1fr); } .rw__sum { grid-template-columns: minmax(0,1fr); } /* Sipka mezi cenami miri dolu */ .rw__cmp { grid-template-columns: minmax(0,1fr); gap: 12px; } .rw__arrow { margin: 0; transform: rotate(90deg); justify-self: start; } .rw__vs-row { flex-direction: column; align-items: flex-start; gap: 12px; } }