/* ========================================================================= Plachtomat — vizuální systém „tiskový nátisk" Podpis: kovová oka (grommets) + kótovací čáry + mono pro rozměry/specy. ========================================================================= */ :root{ /* Barvy */ --ink:#12201B; /* text */ --ink-soft:#5A6B63; /* sekundární text */ --petrol:#0E5E56; /* primární */ --petrol-deep:#0A443E; /* tmavé plochy */ --lime:#A5CE1E; /* akcent — „oko" */ --lime-dark:#8DB40F; --amber:#F2A81E; /* hvězdičky recenzí */ --paper:#FBFBF8; /* plátěné pozadí */ --panel:#FFFFFF; --bg-soft:#F1F5F2; --line:#E4E9E5; --line-strong:#C9D3CD; /* kótovací linky */ /* Povrchy materiálů — jeden zdroj pravdy pro náhled, lištu, tabulku, miniatury v košíku i čtverečky v konfigurátoru. Dřív to byly zadrátované hexy na sedmi místech a REFLEX se mezi nimi stihl rozejít na dva odstíny. */ --mat-premium:#0E5E56; --mat-promo:#1C7F63; --mat-mesh:#0E5E56; --mat-reflex-a:#0E1A24; --mat-reflex-b:#3C607C; --mat-reflex:linear-gradient(118deg,var(--mat-reflex-a) 0%,var(--mat-reflex-b) 46%,var(--mat-reflex-a) 76%); --grommet:radial-gradient(circle, transparent 2.4px, rgba(14,94,86,.42) 2.4px, rgba(14,94,86,.42) 3.7px, transparent 4px); /* kovové oko v rozích */ --grommet-light:radial-gradient(circle, transparent 2.4px, rgba(215,231,226,.5) 2.4px, rgba(215,231,226,.5) 3.7px, transparent 4px); /* totéž na tmavé ploše */ /* Písma */ --font-display:'Archivo','Manrope',system-ui,sans-serif; --font-body:'Manrope',system-ui,sans-serif; /* „utility" písmo pro štítky/čísla — bez monospace, jen Manrope */ --font-mono:'Manrope',system-ui,sans-serif; --radius:10px; --radius-lg:14px; --shadow:0 18px 40px -22px rgba(10,68,62,.28); --shadow-sm:0 8px 20px -14px rgba(10,68,62,.22); } *{margin:0;padding:0;box-sizing:border-box} [hidden]{display:none!important} html{scroll-behavior:smooth;scroll-padding-top:80px} @media(max-width:900px){html{scroll-padding-top:124px}} body{font-family:var(--font-body);color:var(--ink);background:var(--paper);line-height:1.62;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer} img,svg{display:block;max-width:100%} .container{max-width:1200px;margin:0 auto;padding:0 24px} h1,h2,h3{font-family:var(--font-display);font-weight:800;line-height:1.08;letter-spacing:-.02em} /* Utilitka pro rozměry / m² / kódy / počty */ .calc-price small span,.calc-meta{font-family:var(--font-mono)} /* Rozšířený řez Archiva (osa wdth). Prohlížeč bez proměnného fontu vykreslí normální šířku — nic se nerozbije, jen je nadpis o poznání užší. */ .wide{font-stretch:112%} .wider{font-stretch:125%} /* Eyebrow (štítek sekce) */ .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--petrol)} .eyebrow::before{content:'';width:22px;height:2px;background:var(--lime)} /* ===== HEADER ===== */ /* ⚠️ Tmavý pruh (.topbar) nad hlavičkou zanikl 8. 10. 2026 — viz @layout. */ header{background:rgba(251,251,248,.88);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50} .nav{display:flex;align-items:center;gap:34px;height:64px} .logo{flex:none;display:flex;align-items:center} .logo img{display:block;height:32px;width:auto} .mainnav{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:600} .mainnav a{color:var(--ink-soft);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .mainnav a:hover{color:var(--petrol);border-bottom-color:var(--lime)} /* Akce jsou samostatné ikony se zaobleným podkladem při najetí. Buňky s oddělovači podle Figmy se zadavateli nelíbily (8. 10. 2026), z Figmy zůstal jen telefon s otevírací dobou. Plocha kolem ikony je 38 px, ať se trefí prstem; mezery proto drží padding, ne gap. Název nese aria-label. */ .head-actions{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:14px;font-weight:700} .head-actions a{display:flex;align-items:center;justify-content:center;gap:10px;min-width:38px;height:38px;padding:0 9px;border-radius:9px;color:var(--ink);transition:background .15s,color .15s} .head-actions a:hover{color:var(--petrol);background:var(--bg-soft)} .head-actions a:focus-visible{outline:2px solid var(--petrol);outline-offset:1px} .head-actions .head-phone{height:auto;padding:5px 12px;margin-right:8px;white-space:nowrap} .head-phone-text{display:flex;flex-direction:column;line-height:1.25} .head-phone-text b{font-size:15px;font-weight:800} .head-phone-text span{font-size:12.5px;font-weight:600;color:var(--ink-soft)} .cart-badge{position:relative} /* ⚠️ Cílit na .cart-count, ne na `.cart-badge span` — obecné pravidlo by zasáhlo i jiné spany v odkazu. */ .cart-badge .cart-count{position:absolute;top:0;right:-2px;background:var(--lime);color:var(--ink);font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px;box-shadow:0 0 0 3px var(--paper)} /* Pod 900 px je menu stále vidět jako druhý řádek pod logem (Figma) — tři krátké položky se vejdou bez rozbalování. Telefon je jen ikona v buňce, otevírací dobu nese aria-label. ⚠️ Hlavička je tu vysoká 64 + 44 px — viz scroll-padding-top u html. */ @media(max-width:900px){ .nav{flex-wrap:wrap;height:auto;gap:0 12px} .logo{height:58px} .head-actions .head-phone{height:38px;padding:0 9px;margin-right:0} .head-phone-text{display:none} /* ⚠️ Základ 100 % + 48 px: záporné okraje šířku flex položky nezvětší, linka nad menu by jinak končila 48 px před pravým okrajem. */ .mainnav{order:3;flex:0 0 calc(100% + 48px);justify-content:flex-start;gap:28px;height:44px; margin:0 -24px;padding:0 24px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;font-size:14.5px} .mainnav::-webkit-scrollbar{display:none} .mainnav a{color:var(--ink)} } /* Na nejužších telefonech se logo se třemi buňkami nevešlo (320 px je dno). */ /* ⚠️ Kontejner má 24 px po stranách — logo a tři ikony se na 320 px vejdou jen s menší plochou kolem ikon. */ @media(max-width:420px){.logo img{height:26px}.head-actions{gap:0}.mainnav{flex-basis:calc(100% + 48px);justify-content:space-between;font-size:14px;gap:8px;padding:0 18px}} @media(max-width:360px){.logo img{height:22px}.head-actions a,.head-actions .head-phone{min-width:34px;padding:0 6px}.mainnav{font-size:12.5px;gap:4px;padding:0 12px}} h1{font-size:clamp(36px,5.2vw,62px);font-weight:900;letter-spacing:-.03em;line-height:1.0} h1 span{color:var(--petrol)} /* ===== KARTA / KONFIGURÁTOR (nátisk s oky) ===== */ .calc{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px 0;box-shadow:var(--shadow); display:flex;flex-direction:column} /* ⚠️ Od 9. 10. 2026 panel NEROLUJE uvnitř (zadavatel: „nabízí mi to, že si tam můžu scrollovat“). Do té doby měl výškový strop calc(100vh − 130px) a .calc-scroll s overflow:auto. Teď roste s obsahem a posouvá se se stránkou; cenu a tlačítka drží na očích přilepená patka (.calc-foot). */ .calc form{display:flex;flex-direction:column} .calc-scroll{margin:0;padding:0} /* Kovová oka v rozích */ .calc::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:var(--grommet),var(--grommet),var(--grommet),var(--grommet); background-size:16px 16px;background-repeat:no-repeat; background-position:12px 12px, right 12px top 12px, left 12px bottom 12px, right 12px bottom 12px; } .calc>*{position:relative} .calc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .calc h3{font-size:20px;font-weight:800;letter-spacing:-.01em} .calc .tag{background:var(--lime);color:var(--ink);font-family:var(--font-mono);font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.02em} .calc .sub{color:var(--ink-soft);font-size:13.5px;margin-bottom:16px} .field{margin-bottom:2px} .field label{display:block;font-size:12px;font-weight:700;color:var(--ink-soft);margin-bottom:6px;letter-spacing:.02em} .field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;font-size:15.5px;font-family:inherit;outline:none;background:var(--panel);color:var(--ink);transition:border-color .15s,box-shadow .15s} .field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A6B63' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--petrol);box-shadow:0 0 0 4px rgba(14,94,86,.10)} .field input[type=file]{padding:10px 12px;font-size:13px;color:var(--ink-soft)} .field textarea{min-height:88px;resize:vertical} .checkline{margin-top:12px} .checkline label{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;line-height:1.45} .checkline input[type=checkbox]{width:18px;height:18px;margin-top:2px;accent-color:var(--petrol);flex:none} /* ===== KONFIGURÁTOR (klikací) ===== */ .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .cfg-group{margin-top:15px} .cfg-group:first-of-type{margin-top:2px} .cfg-label{display:flex;align-items:baseline;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);margin-bottom:9px} .cfg-hint{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-soft);font-size:12px} /* materiálové karty */ /* minmax(0,1fr): cena uvnitř karty má white-space:nowrap a drží min-content, pod který by se sloupec s pouhým 1fr nesměl zmenšit (v užším postranním sloupci detailu pak karty přesahovaly stránku). */ .mat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .mat-card{position:relative;display:flex;align-items:center;gap:9px;text-align:left;background:var(--panel);border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;transition:border-color .15s,box-shadow .15s} .mat-card:hover{border-color:var(--line-strong)} .mat-card.selected{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(14,94,86,.12)} .mat-swatch{position:relative;flex:none;width:24px;height:24px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)} .mat-card.selected .mat-swatch::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)} /* Čtverečky mluví stejnou barvou jako velké náhledy — PROMO bývalo oranžové, ačkoli všude jinde na webu je zelené. */ .s-premium{background:var(--mat-premium)} .s-promo{background:var(--mat-promo)} .s-mesh{background-color:var(--mat-mesh);background-image:radial-gradient(circle,rgba(251,251,248,.5) .8px,transparent 1px);background-size:4px 4px} .s-reflex{background:var(--mat-reflex)} .mat-info{display:flex;flex-direction:column;min-width:0} .mat-info b{font-size:13.5px;font-weight:800;line-height:1.2;letter-spacing:-.01em} .mat-info small{font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* K čemu se hodí vybraný materiál — jeden řádek pod kartami (9. 10. 2026). Dřív byl v každé kartě zvlášť a karty měly 140 px. */ .mat-hint{margin-top:8px;font-size:12.5px;line-height:1.45;color:var(--ink-soft)} /* Bez nadpisu panelu začíná materiál hned nahoře (9. 10. 2026). Před ním je jen skrytý */ .btn{cursor:pointer} .btn:hover{background:var(--lime-dark);transform:translateY(-1px);box-shadow:0 14px 26px -14px rgba(141,180,15,.95)} .btn:active{transform:translateY(0);box-shadow:0 6px 14px -12px rgba(141,180,15,.9)} /* Tichá varianta — druhá cesta vedle hlavního CTA, stejný tvar, míň hlasu */ .btn-quiet{background:transparent;color:var(--petrol);border:1.5px solid var(--line-strong);box-shadow:none;margin-top:10px} .btn-quiet:hover{background:var(--bg-soft);border-color:var(--petrol);transform:translateY(-1px);box-shadow:0 10px 20px -16px rgba(14,94,86,.8)} .btn-quiet:active{transform:translateY(0);box-shadow:none} /* Ikona v tlačítku. Nesmí se smrsknout a nesmí chytat kliknutí místo tlačítka. */ .btn-ico{flex:none;pointer-events:none} /* Šipka odjíždí za textem — pohyb dopředu, tedy do pokladny */ .btn .btn-ico:last-child{transition:transform .15s} .btn:hover .btn-ico:last-child{transform:translateX(2px)} @media(prefers-reduced-motion:reduce){ .btn,.btn-quiet,.btn .btn-ico{transition:none} .btn:hover,.btn-quiet:hover,.btn:hover .btn-ico:last-child{transform:none} } /* ===== SEKCE ===== */ .section{padding:clamp(64px,8vw,104px) 0} .section.gray{background:var(--bg-soft)} /* Sekce, která navazuje na předchozí jako její pokračování — nesmí mít vlastní horní odsazení, jinak vznikne přesně v místě spoje zbytečná mezera. */ .section-tight{padding-top:0} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(32px,4vw,52px);flex-wrap:wrap} .section-head>div{max-width:60ch} /* Vyrovná řádky nadpisu, ať poslední slovo nezůstane samo. Prohlížeče, které to neumí, jen zalomí postaru — nic se nerozbije. */ .section-head h2{text-wrap:balance;font-stretch:112%} .section-head .eyebrow{margin-bottom:14px} h2{font-size:clamp(29px,4vw,50px);font-weight:800;letter-spacing:-.022em} .section-head p{color:var(--ink-soft);font-size:16px;margin-top:12px} .link-more{font-family:var(--font-mono);font-weight:700;color:var(--petrol);font-size:13.5px;white-space:nowrap;letter-spacing:.02em} .link-more:hover{color:var(--petrol-deep);text-decoration:underline;text-underline-offset:3px} /* ===== PRODUKTOVÉ KARTY ===== */ .p-btn{display:block;text-align:center;border:1.5px solid var(--petrol);color:var(--petrol);border-radius:8px;padding:11px;font-weight:800;font-size:13.5px;transition:background .15s,color .15s} .p-btn:hover{background:var(--petrol);color:#fff} /* Kontrolní pruh z nátisku — procesní CMYK plus jejich polovičné tóny */ /* ---- Norma ISO 12647-2 ------------------------------------------------- Vlevo tvrzení, vpravo kontrolní nátisk: arch s ořezovými značkami, soutiskovým křížkem a pruhem CMYK (plné barvy a 40% tóny). Procesní barvy schválně nejsou z palety webu — na nátisku tam taky nepatří. */ .norm{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,88px);align-items:center} .norm h2{font-stretch:112%;text-wrap:balance;margin-top:14px} .norm-lead{margin:14px 0 0;font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:46ch} .norm-points{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:18px} .norm-points li{display:flex;gap:14px;align-items:flex-start} .norm-ico{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:rgba(14,94,86,.08);color:var(--petrol)} .norm-points b{display:block;font-family:var(--font-display);font-stretch:108%;font-size:16.5px;font-weight:800;color:var(--ink);margin-bottom:2px} .norm-points li>span:last-child{font-size:14.5px;line-height:1.5;color:var(--ink-soft)} .norm-proof{margin:0;padding:22px} /* Arch: bílý papír s lehkým stínem, mírně pootočený jako položený nátisk */ .norm-sheet{position:relative;background:#fff;border-radius:3px;padding:clamp(22px,3vw,34px); box-shadow:0 1px 2px rgba(18,32,27,.06),0 24px 48px -28px rgba(10,68,62,.38);transform:rotate(-1.2deg)} /* Ořezové značky: krátké linky mimo arch v každém rohu */ .norm-crop{position:absolute;width:14px;height:14px} .norm-crop::before,.norm-crop::after{content:'';position:absolute;background:var(--ink-soft)} .norm-crop::before{width:14px;height:1px} .norm-crop::after{width:1px;height:14px} .norm-crop-tl{top:-20px;left:-20px}.norm-crop-tl::before{top:20px;left:0}.norm-crop-tl::after{left:20px;top:0} .norm-crop-tr{top:-20px;right:-20px}.norm-crop-tr::before{top:20px;right:0}.norm-crop-tr::after{right:20px;top:0} .norm-crop-bl{bottom:-20px;left:-20px}.norm-crop-bl::before{bottom:20px;left:0}.norm-crop-bl::after{left:20px;bottom:0} .norm-crop-br{bottom:-20px;right:-20px}.norm-crop-br::before{bottom:20px;right:0}.norm-crop-br::after{right:20px;bottom:0} .norm-sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .norm-sheet-label{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)} .norm-reg{color:var(--ink)} .norm-strip{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));border:1px solid rgba(18,32,27,.12)} /* ⚠️ Výška pevně, ne aspect-ratio: mřížka by výšku řádku spočítala ze šířky před zúžením sloupců a na telefonu nad políčky zůstal prázdný pás */ .norm-strip span{display:flex;align-items:flex-end;justify-content:flex-start;height:clamp(64px,8vw,88px);min-width:0;padding:6px 7px; font-family:var(--font-mono);font-size:11px;font-weight:700;color:rgba(255,255,255,.92)} .norm-strip .norm-c{background:#009EE0} .norm-strip .norm-m{background:#E5007D} .norm-strip .norm-y{background:#FFED00;color:rgba(18,32,27,.7)} .norm-strip .norm-k{background:#1D1D1B} /* 40% tóny vlastní barvou, ne průhledností — ta by zprůhlednila i popisek */ .norm-strip .norm-c.norm-tint{background:#99D8F3} .norm-strip .norm-m.norm-tint{background:#F599CB} .norm-strip .norm-y.norm-tint{background:#FFF899} .norm-strip .norm-k.norm-tint{background:#A5A5A4} .norm-strip .norm-tint{color:rgba(18,32,27,.72)} .norm-sheet-meta{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft)} @media(max-width:860px){ .norm{grid-template-columns:minmax(0,1fr)} .norm-proof{max-width:460px;padding:22px 22px 10px} } @media(max-width:420px){ .norm-strip span{padding:4px 4px;font-size:9.5px} } /* ===== PÁS NAD PATIČKOU (16. 10. 2026) ===== Kdo a kde plachty vyrábí — na všech stránkách těsně nad patičkou. */ .maker-band{padding:40px 0 44px;border-top:1px solid var(--line)} .maker-band p{max-width:72ch;margin:0 auto;text-align:center;font-size:15px;line-height:1.7;color:var(--ink-soft);text-wrap:pretty} /* ===== FOOTER ===== */ /* Patička = spodní lem plachty. Oka v hraně jsou tentýž motiv jako rohy karet (viz --grommet u .calc), jen světlý na tmavém — plachta se upíná v lemu. */ footer{position:relative;background:var(--petrol-deep);color:#B9D2CB;padding:78px 0 34px;font-size:14px} footer::before{ content:'';position:absolute;top:0;left:0;right:0;height:26px;pointer-events:none; background-image:radial-gradient(circle, transparent 2.6px, rgba(185,210,203,.42) 2.6px, rgba(185,210,203,.42) 3.9px, transparent 4.2px); background-size:54px 26px;background-position:center center;background-repeat:repeat-x; } .foot-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:36px} /* h2, ne h4 — nadpisy nesmí přeskakovat úrovně (přístupnost, docs/ai-seo Fáze 6) */ .foot-grid h2{color:#fff;font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;margin-bottom:16px} .foot-grid a{display:block;margin-bottom:10px;transition:color .14s} .foot-grid a:hover{color:#fff} .foot-brand p{margin-top:14px;font-size:13.5px;max-width:34ch;line-height:1.7} /* Kontakt jako specifikace — popisek a hodnota, stejný jazyk jako materiálové specy */ .foot-spec{margin:0} .foot-spec dt{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#7E9E97;margin-bottom:3px} .foot-spec dd{margin:0 0 14px;color:#DCE7D9;line-height:1.55} .foot-spec dd:last-child{margin-bottom:0} /* Přebíjí .foot-grid a — stejná specificita, proto to musí stát níž. Barvu dědí od dd: klikatelný text nesmí být potlačenější než ten neklikatelný. */ .foot-spec a{display:inline;margin:0;color:inherit;text-decoration:underline;text-decoration-color:rgba(220,231,217,.32);text-underline-offset:3px} .foot-spec a:hover{color:#fff;text-decoration-color:var(--lime)} /* Telefon je to, po čem člověk sáhne, když uvízne uprostřed objednávky */ .foot-phone{font-family:var(--font-display);font-size:19px;font-weight:800;letter-spacing:-.01em;color:#fff} .foot-note{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--font-mono);font-size:12px;color:#89A9A1} /* Globální focus je petrolejový — na tmavém podkladu patičky by nebyl vidět */ footer :focus-visible{outline-color:var(--lime)} @media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.foot-grid{grid-template-columns:1fr;gap:30px}} /* ========================================================================= HOMEPAGE — jeden kus materiálu Pozadí se na homepage nikde nestřídá. Sekce od sebe dělí zavařený šev s oky (.hem), ne změna barvy plochy — dva sousední pruhy jiné barvy dělaly ze stránky hromádku nesouvisejících bloků. Rozdíl mezi sekcemi nese měřítko písma a hustota sazby. Jediné tmavé plochy jsou hero (materiál sám) a patička (spodní lem) — začátek a konec, ne střídání. ========================================================================= */ /* ---- Šev s oky ---------------------------------------------------------- Vodorovná linka přerušená oky. Vrstvy pozadí se kreslí odshora dolů, takže kroužek musí být uveden PŘED papírovým kolečkem — kolečko zespodu ukrojí linku, kroužek se dokreslí na něj. */ .hem{position:relative;height:13px} .hem::before{content:'';position:absolute;left:0;right:0;top:6px;height:1px;background:var(--line-strong)} .hem::after{content:'';position:absolute;inset:0; background-image: radial-gradient(circle at center, transparent 0 2.6px, var(--line-strong) 2.7px, var(--line-strong) 3.8px, transparent 3.9px), radial-gradient(circle at center, var(--paper) 0 4.6px, transparent 4.7px); background-size:66px 13px;background-repeat:repeat-x;background-position:center} /* ---- HERO: celá plocha je nátisk materiálu ------------------------------ Náhled není obrázek v rámečku — je to podklad celé úvodní obrazovky. Najetí na materiál v liště dole přebarví celou plochu. */ .stage{position:relative;isolation:isolate;overflow:hidden;color:#fff; background-color:var(--mat-premium);background-image:none; transition:background-color .45s ease} /* Lesk a spád ke spodní hraně — plachta je napnutá, ne plochý obdélník */ .stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(102deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 42%), radial-gradient(130% 95% at 50% 118%, rgba(0,0,0,.34), transparent 62%)} .stage[data-mat="PREMIUM"]{background-color:var(--mat-premium);background-image:none} .stage[data-mat="PROMO"]{background-color:var(--mat-promo);background-image:none} .stage[data-mat="MESH"]{background-color:var(--mat-mesh); background-image:radial-gradient(circle, rgba(251,251,248,.28) 1.7px, transparent 1.9px);background-size:15px 15px} .stage[data-mat="REFLEX"]{background-color:var(--mat-reflex-a);background-image:var(--mat-reflex)} /* Lemy s oky u obou hran — plachta se upíná nahoře i dole */ .stage-hem{position:absolute;left:0;right:0;height:15px;z-index:2;pointer-events:none; background-image: radial-gradient(circle at center, rgba(0,0,0,.34) 0 3.3px, transparent 3.5px), radial-gradient(circle at center, rgba(255,255,255,.5) 0 4.7px, transparent 4.9px), linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)); background-size:62px 15px, 62px 15px, 100% 1px; background-repeat:repeat-x; background-position:center, center, center} .stage-hem-top{top:18px} .stage-hem-bottom{bottom:18px} /* Dva sloupce, ať je výběr materiálu vidět bez scrollování — hero přes celou výšku obrazovky ho vytlačovalo pod ohyb. Jen svislé odsazení: zkratka `padding` by přebila vodorovné odsazení z .container. */ .stage-in{position:relative;z-index:3;display:grid;align-items:center; grid-template-columns:minmax(0,1fr) minmax(0,428px);gap:clamp(30px,4vw,58px); padding-top:clamp(40px,5vw,70px);padding-bottom:clamp(40px,5vw,70px)} @media(max-width:1000px){.stage-in{grid-template-columns:minmax(0,1fr);gap:28px}} .stage-copy{min-width:0} .stage h1{font-size:clamp(32px,4.6vw,62px);font-weight:900;font-stretch:118%;line-height:1.04; letter-spacing:-.018em;max-width:15ch;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.22)} .stage h1 em{font-style:normal;color:var(--lime)} /* Benefity — mřížka 2 × 2 s fajfkou v kolečku (Figma 8. 10. 2026). Nahradily souvislý odstavec i pruh faktů pod úvodem. */ .stage-benefits{list-style:none;display:grid;grid-template-columns:repeat(2,max-content); gap:14px 34px;margin-top:clamp(20px,2.4vw,32px);font-size:clamp(15px,1.4vw,17.5px);font-weight:700} .stage-benefits li{position:relative;padding-left:30px;line-height:1.3} .stage-benefits li::before{content:'';position:absolute;left:0;top:-1px;width:21px;height:21px; background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='9.6' fill='none' stroke='%23A5CE1E' stroke-width='2'/%3E%3Cpath d='M6.8 11.3l2.8 2.8 5.6-5.8' fill='none' stroke='%23A5CE1E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/21px 21px no-repeat} @media(max-width:520px){.stage-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;font-size:14.5px} .stage-benefits li{padding-left:27px}.stage-benefits li::before{width:19px;height:19px;background-size:19px 19px}} /* Celkové hodnocení v úvodu — číslo nese displayové písmo, hvězdy jantarové jako u citací pod úvodem. */ .stage-rating{margin-top:clamp(24px,3vw,40px)} .stage-rating-label{font-size:14px;color:rgba(255,255,255,.82)} .stage-rating-row{display:flex;align-items:center;gap:14px;margin-top:4px} .stage-rating-num{font-family:var(--font-display);font-stretch:118%;font-size:clamp(46px,5vw,64px); font-weight:900;line-height:1;letter-spacing:-.03em} .stage-rating-side{display:flex;flex-direction:column;gap:6px} .stage-rating .stars .star{width:21px;height:21px} .stage-rating-note{font-size:13px;color:rgba(255,255,255,.82)} @media(max-width:600px){.stage-in{padding-top:32px;padding-bottom:32px}} /* ---- Vzorník materiálů — jediné místo výběru na homepage ---------------- Panel je připnutý na plachtu: očka v rozích jsou tentýž `--grommet` jako u karet konfigurátoru. Leží na tmavé ploše, proto stín místo linky. */ /* color se musí přepsat — panel leží uvnitř .stage, která má bílý text, a všechno, co si barvu neurčí samo (úloha materiálu), by bylo neviditelné. */ .picker{position:relative;background:var(--paper);color:var(--ink);border-radius:var(--radius-lg); padding:6px 0 2px;box-shadow:0 34px 64px -32px rgba(3,24,21,.75)} .picker::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1; background-image:var(--grommet),var(--grommet),var(--grommet),var(--grommet); background-size:16px 16px;background-repeat:no-repeat; background-position:11px 11px, right 11px top 11px, left 11px bottom 11px, right 11px bottom 11px} /* Svislé odsazení uhýbá okům v rozích — jinak jim popisek sedí na řádku */ /* Nadpis jako výzva (UX analýza) — dřív drobný verzálkový štítek „Typ plachty“, ze kterého nebylo poznat, že se tu vybírá. Odsazení uhýbá okům. */ .picker-head{padding:24px 26px 14px;font-family:var(--font-display);font-stretch:108%; font-size:clamp(19px,1.8vw,22px);font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink)} /* Dlaždice typu: u hrany svislý pruh se skutečným povrchem materiálu, vedle něj úloha velkým písmem a název typu malým. Vybraná je orámovaná petrolejově — stejný jazyk jako materiálové karty v konfigurátoru na detailu. ⚠️ Flex, ne mřížka s pevným počtem sloupců: do 5. 9. 2026 tu bylo repeat(4,minmax(0,1fr)) a po zúžení nabídky na dva typy se dlaždice roztáhly na půl panelu. Layout nemá vědět, kolik typů prodáváme. */ /* ⚠️ Sloupec, ne řádek (od 8. 10. 2026): pod názvem jsou příklady použití. Dlaždice proto mají flex:none — se zděděným flex:1 1 0 by ve sloupci spadly na nulovou výšku. Podklad skupiny jako ve Figmě. */ .types{display:flex;flex-direction:column;gap:8px;margin:0 22px;padding:8px;background:var(--bg-soft);border-radius:12px} .type{flex:none;min-width:0;display:flex;align-items:stretch;overflow:hidden; background:var(--panel);border:1.5px solid var(--line); border-radius:9px;transition:border-color .15s,box-shadow .15s} .type:hover{border-color:var(--line-strong)} .type.is-on{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(14,94,86,.12)} .type-face{flex:0 0 42px;align-self:stretch;background:var(--mat-premium); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)} .type-face[data-mat="PROMO"]{background:var(--mat-promo)} .type-face[data-mat="MESH"]{background-color:var(--mat-mesh);background-image:radial-gradient(circle,rgba(251,251,248,.5) .9px,transparent 1.1px);background-size:5px 5px} .type-face[data-mat="REFLEX"]{background:var(--mat-reflex)} /* Na dlaždici je jen název typu. Úloha nad ním (.type-job) zanikla 9. 9. 2026 a název po ní zdědil displayové písmo — kdyby si nechal svoje drobné verzálky, zbyl by u 42px pruhu povrchu popisek o velikosti 10 px. */ /* Pod názvem příklady použití (UX analýza) — dlaždice jsou proto pod sebou a text se smí zalomit. */ .type-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:13px 16px} .type-name{display:block;min-width:0;font-family:var(--font-display);font-stretch:112%; font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.15;color:var(--ink)} .type-use{display:block;font-size:13.5px;line-height:1.4;color:var(--ink-soft)} .type.is-on .type-name{color:var(--petrol)} /* Přepnutí typu: prolne se jen to, co se opravdu změnilo — dnes už jen cena. Panel s údaji (.type-info) zanikl spolu s úlohou. Dlaždice ani plocha za panelem se nehýbou, ta má vlastní přechod barvy. */ @keyframes typeSwap{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}} .picker.is-swap .type-price b{animation:typeSwap .18s ease-out} @media (prefers-reduced-motion:reduce){ .picker.is-swap .type-price b{animation:none} } /* Cena a jediné CTA nad ohybem. Tlačítko přes celou šířku panelu — je to jediný další krok, tak ať o něm není pochyb. */ .type-buy{margin-top:16px;padding:16px 22px 22px;border-top:1px solid var(--line)} .type-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:13px} .type-price b{font-family:var(--font-display);font-stretch:112%;font-size:clamp(23px,2.4vw,29px); font-weight:800;color:var(--petrol);white-space:nowrap;line-height:1} .type-price span{font-size:11.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap} .type-cta{display:block;text-align:center;background:var(--lime);color:var(--ink);border-radius:9px; padding:14px 22px;font-family:var(--font-display);font-size:15.5px;font-weight:800;letter-spacing:-.01em; box-shadow:0 10px 22px -14px rgba(141,180,15,.9);transition:background .15s,transform .12s} .type-cta:hover{background:var(--lime-dark);transform:translateY(-1px)} .type-cta:active{transform:translateY(0)} /* Druhá cesta pro ty, kdo nechtějí začínat materiálem — vede na rozcestník podle použití. Obrys, ať nesoupeří s hlavním tlačítkem. */ .type-alt{display:block;margin-top:10px;text-align:center;border:1.5px solid var(--line-strong); border-radius:9px;padding:12px 22px;font-size:15px;font-weight:700;color:var(--petrol);transition:border-color .15s,background .15s} .type-alt:hover{border-color:var(--petrol);background:var(--bg-soft)} @media(max-width:420px){ .picker-head,.type-buy{padding-left:16px;padding-right:16px} .types{margin:0 12px;padding:6px} .types{gap:6px} .type-face{flex-basis:34px} .type-text{padding:12px 10px} .type-name{font-size:14px} } /* ---- Výroba v číslech (§41) --------------------------------------------- Sekce jako vytištěná plachta: tmavý panel s očky v rozích — tentýž motiv jako patička a konfigurátor. U m² kóta „jako jedna plachta 102 × 102 m“: kótovací čára je podpis značky a plochu si člověk představí. */ .prod{position:relative;background:var(--petrol-deep);color:#C4DAD3;border-radius:var(--radius-lg); padding:clamp(30px,5vw,60px) clamp(22px,5vw,60px);box-shadow:var(--shadow);overflow:hidden} .prod::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:var(--grommet-light),var(--grommet-light),var(--grommet-light),var(--grommet-light); background-size:16px 16px;background-repeat:no-repeat; background-position:12px 12px, right 12px top 12px, left 12px bottom 12px, right 12px bottom 12px} .prod>*{position:relative} .prod-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px 32px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)} .prod h2{color:#fff;margin-top:14px} .eyebrow-light{color:var(--lime)} .prod-lead{margin:10px 0 0;font-size:15px;color:#A9C7BE} .prod-asof{display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px; font-size:12.5px;font-weight:600;color:#D5E6E0;white-space:nowrap} .prod-asof-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(165,206,30,.18)} /* Sloupců tolik, kolik je čísel (administrace může jedno dvě vypnout) */ .prod-stats{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)} .prod-stat{min-width:0;padding:4px 28px} .prod-stat:first-child{padding-left:0} .prod-stat:last-child{padding-right:0} .prod-stat+.prod-stat{border-left:1px solid rgba(255,255,255,.13)} .prod-value{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-stretch:125%; font-size:clamp(40px,4.8vw,68px);font-weight:800;color:#fff;line-height:1;letter-spacing:-.025em;white-space:nowrap} .prod-num{display:inline-block;text-align:right;font-variant-numeric:tabular-nums} .prod-value i{font-style:normal;font-size:.34em;font-stretch:100%;font-weight:700;color:var(--lime);letter-spacing:0} .prod-label{display:block;margin-top:14px;font-size:14.5px;line-height:1.45;color:#C4DAD3;max-width:28ch} .prod-sheet{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:12.5px;color:#A9C7BE} .prod-sheet strong{color:#fff;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap} /* Kóta: vodorovná čára s dorazy na koncích */ .prod-dim{position:relative;flex:none;width:40px;height:11px;border-left:1.5px solid var(--lime);border-right:1.5px solid var(--lime)} .prod-dim::before{content:'';position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:var(--lime)} @media(max-width:860px){ .prod-stats{grid-auto-flow:row;grid-template-columns:minmax(0,1fr)} .prod-stat,.prod-stat:first-child,.prod-stat:last-child{padding:0} .prod-stat+.prod-stat{border-left:0;border-top:1px solid rgba(255,255,255,.13);margin-top:26px;padding-top:26px} } /* Tablet: číslo vlevo, popis s kótou vpravo — jeden sloupec by byl řídký */ @media(min-width:641px) and (max-width:860px){ .prod-stat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:28px;align-items:center} .prod-value{grid-row:span 2} .prod-label{margin-top:0} .prod-sheet{margin-top:8px} } /* ---- K čemu plachtu potřebujete ---------------------------------------- Mřížka drží vlásové linky přes 1px mezery vyplněné barvou linky — žádné karty, žádné stíny. Podklad dlaždice je papír, při najetí zbělá. */ .uses{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--line);border:1px solid var(--line)} .use{display:flex;flex-direction:column;min-width:0;background:var(--paper); padding:26px 26px 24px;transition:background .18s} .use:hover,.use:focus-visible{background:var(--panel)} /* Scéna použití (_scene.latte) — abstraktní plochá 3D ilustrace místa, kde plachta visí. Do 8. 10. 2026 tu byly obdélníky ve společném měřítku; rozdíl mezi situacemi z nich nebyl poznat bez čtení (UX analýza). Okolí je tlumené, barvu nese jen plachta — u síťoviny i s děrováním. */ .use-stage{display:block;width:100%;margin-bottom:16px;border-radius:8px;background:var(--bg-soft);overflow:hidden} .use-scene{display:block;width:100%;height:auto;aspect-ratio:240/140} .sc-ground{fill:#E2E9E5} .sc-pitch{fill:#DCE9C6} .sc-line{stroke:#F4F8EE;stroke-width:2;fill:none} .sc-wire-line{stroke:#B3C1BA;stroke-width:.7;fill:none} .sc-fence{stroke:#B3C1BA;stroke-width:.8} .sc-post{fill:#94A59D} .sc-pole{stroke:#94A59D;stroke-width:2.2;stroke-linecap:round} .sc-rope{stroke:#94A59D;stroke-width:1.2} .sc-wall{fill:#D9E2DD} .sc-side{fill:#BFCCC5} .sc-top{fill:#CDD8D2} .sc-roof{fill:#A9B9B1} .sc-roof-side{fill:#94A59D} .sc-window{fill:#F4F7F5;stroke:#A9B9B1;stroke-width:1} .sc-shadow{fill:rgba(18,32,27,.10)} .sc-ball{fill:#fff;stroke:#94A59D;stroke-width:1.4} .sc-ball-seam{stroke:#94A59D;stroke-width:1;fill:none} .sc-banner{fill:var(--mat-premium)} .use-scene[data-mat="PROMO"] .sc-banner{fill:var(--mat-promo)} .sc-mesh{display:none;fill:url(#sc-mesh)} .use-scene[data-mat="MESH"] .sc-mesh{display:inline} .sc-mesh-dot{fill:rgba(251,251,248,.55)} .sc-eye{fill:var(--lime)} .sc-custom{fill:var(--panel);stroke:var(--petrol);stroke-width:1.5;stroke-dasharray:5 4} .sc-custom-text{font-family:var(--font-display);font-size:15px;font-weight:800;fill:var(--petrol)} .sc-dim{stroke:var(--ink-soft);stroke-width:1;fill:none} .sc-dim-text{font-family:var(--font-body);font-size:9.5px;font-weight:700;fill:var(--ink-soft)} .use-dims{display:block;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)} .use-title{display:block;font-family:var(--font-display);font-stretch:112%;font-size:clamp(17px,1.9vw,21px); font-weight:800;letter-spacing:-.015em;margin:8px 0 8px} .use-text{display:block;font-size:13.5px;color:var(--ink-soft);margin-bottom:20px} /* margin-top:auto drží patičku u spodní hrany, ať jsou ceny napříč dlaždicemi v řadě. Vedle ceny stál do 9. 9. 2026 ještě štítek s názvem materiálu (.use-mat); po jeho zrušení zbyl v patičce jediný prvek, takže space-between nemá co rozestoupit — cena se zarovnává výslovně doprava. */ /* Patička: vlevo viditelný popisek prokliku (celá dlaždice je odkaz), vpravo cena jednoho kusu s výslovným „vč. DPH" (UX analýza) — stejně jako v konfigurátoru. margin-top:auto drží patičky v řadě na jedné lince. */ .use-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between; gap:12px;padding-top:15px;border-top:1px solid var(--line)} .use-go{font-size:14px;font-weight:700;color:var(--petrol);text-decoration:underline; text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:4px} .use:hover .use-go{color:var(--petrol-deep)} .use-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1} .use-price b{font-family:var(--font-display);font-stretch:112%;font-size:clamp(18px,2vw,22px); font-weight:800;color:var(--petrol);white-space:nowrap} .use-price small{margin-top:4px;font-size:12px;font-weight:600;color:var(--ink-soft);white-space:nowrap} .use-price small+small{margin-top:1px;font-weight:400} @media(max-width:900px){.uses{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.uses{grid-template-columns:minmax(0,1fr)}} /* ---- Sleva za logo ------------------------------------------------------ Limetka zůstává akcentem: číslo je petrolejové (na papíru čitelné), limetka je jen podtržení. Jako plocha by přebila hero. */ .promo{display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap} /* Ukázka výsledku místo velké číslovky (UX analýza 8. 10. 2026). Kreslí se stejnými .sc-* barvami jako scény použití; logo je ve skutečném měřítku a výřez ho ukazuje zvětšený. */ .promo-art{flex:0 1 440px;min-width:0;margin:0;background:var(--bg-soft);border-radius:var(--radius-lg);padding:18px 16px 10px} .promo-art svg{display:block;width:100%;height:auto} .promo-art-stripe{fill:var(--lime)} .promo-art-head{font-family:var(--font-display);font-stretch:118%;font-size:26px;font-weight:900;fill:#fff;letter-spacing:-.01em} .promo-art-sub{font-family:var(--font-body);font-size:10px;font-weight:600;fill:rgba(255,255,255,.75)} .promo-art-logo{fill:#fff;stroke:var(--lime);stroke-width:.8} .promo-art-lead{stroke:var(--ink-soft);stroke-width:1;stroke-dasharray:2 2;fill:none} .promo-art-zoom{fill:var(--mat-premium);stroke:var(--line-strong);stroke-width:1} .promo-art-logo-big{fill:#fff} .promo-art-zoom-eye{fill:#C9CFCB;stroke:#7E8883;stroke-width:1.2} .promo-art-label{font-family:var(--font-display);font-size:12.5px;font-weight:800;fill:var(--ink)} .promo-art-note{font-family:var(--font-body);font-size:10.5px;font-weight:600;fill:var(--ink-soft)} .promo-body{flex:1 1 320px;min-width:0} .promo-body h3{font-family:var(--font-display);font-stretch:108%;font-size:clamp(20px,2.4vw,28px); font-weight:800;letter-spacing:-.02em} .promo-body p{margin-top:10px;font-size:14.5px;color:var(--ink-soft);max-width:56ch} .promo-cta{display:inline-block;margin-top:20px;background:var(--lime);color:var(--ink); border-radius:9px;padding:14px 28px;font-family:var(--font-display);font-size:15px;font-weight:800; transition:background .15s,transform .12s} .promo-cta:hover{background:var(--lime-dark);transform:translateY(-1px)} /* Tlačítko pod postupem objednávky — vlevo na ose kroků */ .steps-cta{margin-top:clamp(32px,4vw,48px)} .steps-cta .promo-cta{margin-top:0} /* ---- Jak objednávka probíhá ------------------------------------------- Jedna časová osa (lem plachty) s kroky připnutými jako kovová oka — podpis značky. Desktop vodorovně, tablet a telefon svisle (2 × 2 by osu přetrhlo). Úsek osy kreslí každý krok k dalšímu, takže sedí při jakékoli šířce. Cíl (doručení) je limetkový. */ .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px} .step{position:relative;min-width:0} .step:not(:last-child)::after{content:'';position:absolute;top:21px;left:52px;right:-20px;height:2px; background:repeating-linear-gradient(90deg,var(--line-strong) 0 8px,transparent 8px 13px)} .step-mark{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:50%;background:var(--panel);border:2px solid var(--petrol);color:var(--petrol); box-shadow:0 0 0 5px var(--paper),inset 0 0 0 3px var(--bg-soft)} .step:last-child .step-mark{background:var(--lime);border-color:var(--lime-dark);color:var(--ink);box-shadow:0 0 0 5px var(--paper)} .step-body{padding-top:20px} .step-n{display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--petrol)} .step h3{font-family:var(--font-display);font-stretch:108%;font-size:clamp(17px,1.8vw,20px); font-weight:800;letter-spacing:-.015em;margin:8px 0 8px} .step p{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0} .step-fact{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:5px 11px 5px 9px;border-radius:999px; background:rgba(165,206,30,.16);color:var(--petrol-deep);font-size:12.5px;font-weight:700} .step-fact svg{color:var(--lime-dark)} @media(max-width:900px){ .steps{grid-template-columns:minmax(0,1fr);gap:0} .step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:18px;padding-bottom:30px} .step:last-child{padding-bottom:0} .step:not(:last-child)::after{top:52px;bottom:6px;left:21px;right:auto;width:2px;height:auto; background:repeating-linear-gradient(180deg,var(--line-strong) 0 8px,transparent 8px 13px)} .step-body{padding-top:2px} .step h3{margin-top:6px} } /* Animace osy (steps.js): při prvním zobrazení oka naskočí jedno po druhém, za každým se dokreslí úsek osy, text se vysune; cíl jednou pulzne. Výchozí stav skrývá až třída .is-armed, kterou dává JS — bez JS a při „omezit animace“ je sekce rovnou hotová. Jen transform a opacity. */ .steps.is-armed .step-mark{opacity:0;transform:scale(.55)} .steps.is-armed .step-body{opacity:0;transform:translateY(12px)} .steps.is-armed .step:not(:last-child)::after{transform:scaleX(0);transform-origin:left center} .steps.is-in .step-mark{opacity:1;transform:none; transition:opacity .3s ease-out,transform .5s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i) * .3s)} .steps.is-in .step-body{opacity:1;transform:none; transition:opacity .45s ease-out,transform .45s ease-out;transition-delay:calc(var(--i) * .3s + .1s)} .steps.is-in .step:not(:last-child)::after{transform:none; transition:transform .45s ease-out;transition-delay:calc(var(--i) * .3s + .2s)} .step:last-child .step-mark::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--lime);opacity:0;pointer-events:none} .steps.is-in .step:last-child .step-mark::after{animation:step-arrive .9s ease-out 1.25s 1} @keyframes step-arrive{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.75)}} @media(max-width:900px){ /* ⚠️ I „hotovo“ znovu tady: stejná specifičnost, a pravidlo pro skrytý stav níž v souboru by jinak vyhrálo — svislá osa by se nikdy nenatáhla */ .steps.is-armed .step:not(:last-child)::after{transform:scaleY(0);transform-origin:center top} .steps.is-in .step:not(:last-child)::after{transform:none} } @media(prefers-reduced-motion:reduce){ .steps.is-armed .step-mark,.steps.is-armed .step-body,.steps.is-armed .step:not(:last-child)::after{opacity:1;transform:none;transition:none} .steps.is-in .step:last-child .step-mark::after{animation:none} } /* ---- Recenze ------------------------------------------------------------ */ /* ---- Pás recenzí a log hned pod úvodem (Figma 8. 10. 2026) ------------- Celkové hodnocení je v úvodu, tady jen citace a loga. Citace oddělují svislé vlasové linky, žádné karty. */ .proof-strip{background:var(--panel);border-bottom:1px solid var(--line)} /* Pod 1000 px je panel výběru pod nadpisem a přesahuje přes spodní hranu úvodu do pásu recenzí (Figma). ⚠️ Úvod proto přestane ořezávat obsah (overflow:visible) — jinak by přesah usekl; spodní řada ok by panel přetínala, tak se schová. Pás recenzí místo pro přesah odsadí. */ /* Šipka z úvodu dolů na recenze — míří od celkového hodnocení na citace pod ním (Figma). Je to ořez samotné plochy úvodu, ne přilepený trojúhelník: barva i spád ke spodní hraně tak sedí u každého materiálu. Plocha se o výšku šipky prodlouží a pás recenzí pod ni zajede (je to neumístěný prvek, takže se kreslí pod úvodem). Hrot stojí 44 px od levé hrany obsahu, pod číslem hodnocení. ⚠️ Jen nad 1000 px — níž panel výběru přes hranu úvodu přesahuje a clip-path by ho usekl. Figma tam šipku taky nemá. */ @media(min-width:1001px){ .stage{--notch-x:calc(max(24px, (100% - 1200px) / 2 + 24px) + 44px); padding-bottom:14px;margin-bottom:-14px; clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(var(--notch-x) + 15px) calc(100% - 14px), var(--notch-x) 100%,calc(var(--notch-x) - 15px) calc(100% - 14px),0 calc(100% - 14px))} .stage-hem-bottom{bottom:32px} } @media(max-width:1000px){ .stage{overflow:visible} .stage-hem-bottom{display:none} .stage-in{padding-bottom:0} .picker{margin-bottom:-96px} .proof-strip{padding-top:96px;scroll-margin-top:-96px} } /* ⚠️ scroll-margin odečítá přesah: kotva #recenze z menu by jinak přistála na horní hraně pásu, kterou zakrývá spodek panelu, a citace by začínaly až o 96 px níž. */ /* Hvězdy jsou SVG, ne glyfy — prázdná hvězda tak sedí do řady s plnými */ .stars{display:inline-flex;align-items:center;gap:3px} .stars .star{flex:none;width:17px;height:17px;fill:var(--amber)} .stars .star.is-empty{fill:none;stroke:var(--amber);stroke-width:1.5} .reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .review{display:flex;flex-direction:column;gap:14px;min-width:0;padding:30px 32px 30px} .review:first-child{padding-left:0} .review:last-child{padding-right:0} .review + .review{border-left:1px solid var(--line)} .review .stars .star{width:16px;height:16px} .rv-text{font-size:clamp(15px,1.3vw,16.5px);font-style:italic;line-height:1.6;color:var(--ink)} .rv-by{margin-top:auto;font-size:13.5px;color:var(--ink-soft)} .rv-by b{color:var(--ink);font-weight:800} .proof-more{padding:0 0 18px} /* Na mobilu vodorovný posuvník se zachycením — tři citace pod sebou by odsunuly zbytek stránky. Další karta vykukuje, ať je vidět, že jde posouvat. */ @media(max-width:760px){ .reviews{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%; overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px;scroll-padding:0 16px; scrollbar-width:none} .reviews::-webkit-scrollbar{display:none} .review{scroll-snap-align:start;padding:26px 20px 24px} .review:first-child{padding-left:0} .review:last-child{padding-right:16px} } /* ---- FAQ ---------------------------------------------------------------- */ /* Zarovnané vlevo jako všechno ostatní — stránka stojí na jedné levé ose, kterou drží všechny vlásové linky. Vycentrovaný blok by ji přerušil. */ /* Dotazy jako karty s pořadovým číslem; na střed, šířka pro pohodlné čtení */ .faq-head,.faq{max-width:860px;margin-left:auto;margin-right:auto} .faq-head{justify-content:center;text-align:center} .faq-head .eyebrow{justify-content:center} .faq{display:flex;flex-direction:column;gap:10px} .faq details{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg); transition:border-color .2s,box-shadow .2s} .faq details:hover{border-color:var(--line-strong)} .faq details[open]{border-color:var(--petrol);box-shadow:var(--shadow-sm)} .faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px; min-height:44px;padding:18px 18px 18px 22px;border-radius:var(--radius-lg); font-family:var(--font-display);font-stretch:108%;font-size:clamp(16px,1.8vw,19px);font-weight:800;letter-spacing:-.015em;transition:color .14s} .faq summary:hover{color:var(--petrol)} .faq summary:focus-visible{outline:2px solid var(--petrol);outline-offset:2px} .faq summary::-webkit-details-marker{display:none} .faq-n{font-family:var(--font-mono);font-stretch:100%;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--petrol)} .faq details[open] .faq-n{color:var(--lime-dark)} /* Plus/mínus v kroužku: svislá linka se při otevření sklopí — mínus je u akordeonu srozumitelnější než křížek (ten zní jako „zavřít“) */ .faq summary::after{ content:'';width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-strong); background:linear-gradient(var(--petrol),var(--petrol)) center/12px 1.8px no-repeat, linear-gradient(var(--petrol),var(--petrol)) center/1.8px 12px no-repeat; transition:background-size .24s cubic-bezier(.22,.8,.28,1),border-color .2s,background-color .2s} .faq summary:hover::after{border-color:var(--petrol)} .faq details[open] summary::after{background-size:12px 1.8px,1.8px 0;border-color:var(--petrol);background-color:var(--petrol); background-image:linear-gradient(#fff,#fff),linear-gradient(#fff,#fff)} /* Výšku animuje faq.js; bez JS se details chová nativně */ .faq-a{overflow:hidden;transition:height .26s cubic-bezier(.22,.8,.28,1)} /* Odpověď zarovnaná pod text otázky (22 + 24 + 12 px) */ .faq details p{padding:0 66px 14px 58px;margin:0;font-size:15.5px;line-height:1.65;color:var(--ink-soft)} .faq details p:last-child{padding-bottom:24px} /* Seznam v odpovědi (Jak dlouho plachta vydrží) — odsazení jako odstavce */ .faq details .pd-list{margin:0;padding:0 66px 14px 58px} .faq details .pd-list li{padding-left:18px;font-size:15.5px} .faq details a{color:var(--petrol);font-weight:600;text-decoration:underline;text-underline-offset:3px} .faq-link::after{content:'→';display:inline-block;margin-left:6px;text-decoration:none;transition:transform .15s} .faq-link:hover::after{transform:translateX(3px)} @media(max-width:560px){ .faq summary{grid-template-columns:22px minmax(0,1fr) auto;gap:10px;padding:16px 14px 16px 16px} .faq details p{padding:0 16px 14px 16px} .faq details .pd-list{padding:0 16px 14px 16px} } @media(prefers-reduced-motion:reduce){.faq-a{transition:none}} /* ---- Reference ---------------------------------------------------------- */ /* Loga klientů pod recenzemi — zatím názvy písmem, soubory log nemáme. Tlumená barva jako u log ve Figmě, ať nesoupeří s citacemi. */ .ref-logos{list-style:none;margin:0;padding:24px 0 28px;border-top:1px solid var(--line); display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px clamp(26px,4vw,52px)} .ref-logos li{font-family:var(--font-display);font-stretch:112%;font-weight:800; font-size:clamp(16px,1.7vw,21px);letter-spacing:-.015em;color:#8B9792} /* ===== ŽIVÝ NÁTISK (detail produktu) ===== */ .proof{position:relative;background: linear-gradient(0deg, rgba(14,94,86,.04), rgba(14,94,86,.04)), repeating-linear-gradient(45deg, transparent 0 9px, rgba(18,32,27,.03) 9px 10px); border:1px solid var(--line);border-radius:var(--radius-lg);padding:44px 44px 40px} .proof-frame{position:relative;margin:0 auto;width:280px;height:180px;background:var(--petrol);border-radius:6px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;transition:width .3s ease,height .3s ease,background-color .35s ease,background-image .35s ease} /* vzhled plachty podle materiálu */ .proof-frame[data-mat="PREMIUM"]{background:var(--mat-premium)} .proof-frame[data-mat="PROMO"]{background:var(--mat-promo)} .proof-frame[data-mat="MESH"]{background-color:var(--mat-mesh);background-image:radial-gradient(circle, rgba(251,251,248,.32) 1.3px, transparent 1.5px);background-size:11px 11px} .proof-frame[data-mat="REFLEX"]{background:var(--mat-reflex)} .proof-frame .pf-name{font-family:var(--font-display);font-weight:800;font-size:clamp(15px,2vw,22px);letter-spacing:.02em} .proof-frame .pf-spec{font-family:var(--font-mono);font-size:11px;color:var(--lime);margin-top:6px} /* rastr ok po obvodu */ .proof-frame::before{content:'';position:absolute;inset:9px;border-radius:3px; background: radial-gradient(circle, rgba(255,255,255,.55) 1.4px, transparent 1.6px) top left/24px 24px repeat-x, radial-gradient(circle, rgba(255,255,255,.55) 1.4px, transparent 1.6px) bottom left/24px 24px repeat-x, radial-gradient(circle, rgba(255,255,255,.55) 1.4px, transparent 1.6px) top left/24px 24px repeat-y, radial-gradient(circle, rgba(255,255,255,.55) 1.4px, transparent 1.6px) top right/24px 24px repeat-y; pointer-events:none} /* kóta šířky */ .proof-w{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:14px;font-family:var(--font-mono);font-size:12px;color:var(--petrol);font-weight:700} .proof-w i{height:0;border-top:2px solid var(--line-strong);flex:1;max-width:120px;position:relative} .proof-w i::before,.proof-w i::after{content:'';position:absolute;top:-5px;width:2px;height:10px;background:var(--line-strong)} .proof-w i::before{left:0}.proof-w i::after{right:0} /* kóta výšky */ .proof-body{display:flex;align-items:stretch;gap:14px} .proof-h{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:12px;color:var(--petrol);font-weight:700;writing-mode:vertical-rl;transform:rotate(180deg)} /* min-width:0 — flex položka se jinak nesmí zmenšit pod šířku rámu uvnitř */ .proof-stage{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;min-height:280px} /* ===== PLÁTNO — nahraný obrázek na plachtě ===== */ .pf-art{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:1} .pf-art img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;transform-origin:center center;will-change:transform;user-select:none;-webkit-user-drag:none} .pf-art[data-fit="contain"] img{object-fit:contain} /* bezpečná zóna — počítá se z reálných rozměrů plachty */ /* Ztmavíme lem VNĚ bezpečné zóny — tam přijde zavaření a oka. */ .pf-safe{position:absolute;inset:0;pointer-events:none;box-shadow:0 0 0 9999px rgba(18,32,27,.42);transition:opacity .2s} .pf-safe::after{content:'';position:absolute;inset:0;border:1px dashed rgba(255,255,255,.75)} .pf-safe span{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);white-space:nowrap} .pf-safe[hidden]{display:none} .proof-frame.has-art{cursor:grab} .proof-frame.has-art.dragging{cursor:grabbing} /* Naše logo výměnou za slevu. Velikost i poloha se počítají v product.js z reálných metrů, tady je jen vzhled. Nad plátnem i nad klikací vrstvou (z-index 3) — na grafiku se opravdu tiskne. Světlá výplň s tmavým obrysem, ať se čte na petrolejové PREMIUM i na světlém PROMO. */ .pf-logo{position:absolute;right:0;bottom:0;z-index:4;pointer-events:none;overflow:hidden;background:#fff; /* Bílý pravoúhlý trojúhelník v pravém dolním rohu (9. 10. 2026) */ clip-path:polygon(100% 0,100% 100%,0 100%);transition:width .3s ease,height .3s ease} /* Logo podél přepony, blíž k rohu — jako na vzoru zadavatele */ .pf-logo img{position:absolute;left:62%;top:62%;width:80%;height:auto;transform:translate(-50%,-50%) rotate(-45deg);transform-origin:center} .pf-logo-note{display:flex;align-items:center;gap:14px;margin-top:12px;font-size:12.5px;color:var(--ink-soft);max-width:64ch} .pf-logo-note[hidden]{display:none} .pf-logo-note b{color:var(--ink);font-weight:700} /* Detail rohu s logem — jako vzor zadavatele (9. 10. 2026) */ .pf-logo-zoom{position:relative;flex:none;width:84px;height:84px;border-radius:8px;overflow:hidden;background:var(--mat-premium);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .pf-logo-zoom[data-mat="PROMO"]{background:var(--mat-promo)} .pf-logo-zoom[data-mat="MESH"]{background-color:var(--mat-mesh);background-image:radial-gradient(circle,rgba(251,251,248,.32) 1.3px,transparent 1.5px);background-size:9px 9px} .pf-logo-zoom[data-mat="REFLEX"]{background:var(--mat-reflex)} .pf-logo-zoom-corner{position:absolute;right:0;bottom:0;width:72px;height:72px;background:#fff;clip-path:polygon(100% 0,100% 100%,0 100%)} .pf-logo-zoom-corner img{position:absolute;left:58%;top:58%;width:78%;height:auto;transform:translate(-50%,-50%) rotate(-45deg)} /* Kovové oko v rohu, střed 2,5 cm od okraje (u 15 cm odvěsny = 1/6) */ .pf-logo-zoom-eye{position:absolute;right:8px;bottom:8px;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff 0 28%,#9AA39E 30% 58%,#5E6763 60% 100%);box-shadow:0 1px 1px rgba(0,0,0,.35)} .pf-label{position:relative;z-index:2;transition:opacity .2s} .proof-frame.has-art .pf-label{display:none} /* Klikací vrstva přes celou plachtu — text se ukáže při najetí, ať nepřekrývá název */ .pf-drop{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;border:none;background:transparent;padding:0;cursor:pointer} .pf-drop span{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff;background:rgba(18,32,27,.55);border:1.5px dashed rgba(255,255,255,.7);border-radius:9px;padding:9px 18px;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s} .pf-drop:hover span,.pf-drop:focus-visible span{opacity:1;transform:translateY(0)} .proof-frame.drag-over .pf-drop span{opacity:1;transform:translateY(0);background:rgba(14,94,86,.75);border-color:var(--lime)} .proof-frame.has-art .pf-drop{display:none} /* Karta nahraných tiskových dat (PDF, TIFF) — místo náhledu, který prohlížeč neumí. Klikací vrstva nad ní zůstává: klik soubor vymění. */ .pf-file{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;pointer-events:none;background:rgba(18,32,27,.62);border-radius:inherit;color:#fff} .pf-file[hidden]{display:none} .pf-file-ico{font-family:var(--font-display);font-size:11px;font-weight:800;letter-spacing:.06em;background:var(--lime);color:#12201B;border-radius:5px;padding:5px 9px} .pf-file-name{font-size:14px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .pf-file-msg{font-size:12.5px;opacity:.9} .pf-file.is-bad .pf-file-ico{background:#E5533D;color:#fff} .pf-file.is-compact{flex-direction:row;gap:8px} .pf-file.is-compact .pf-file-msg{display:none} .pf-file.is-compact .pf-file-name{font-size:13px} .pf-file.is-compact .pf-file-name::after{content:' ✓';color:var(--lime)} .pf-file.is-bad.is-compact .pf-file-name::after{content:' ✕';color:#E5533D} .proof-frame.has-file .pf-label{display:none} .proof-frame.has-file .pf-drop span{display:none} /* Výzva pod plachtou */ .art-empty{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .art-empty span{font-size:13px;color:var(--ink-soft)} .art-upload-btn{border:1.5px solid var(--petrol);background:var(--panel);color:var(--petrol);border-radius:9px;padding:10px 18px;font-family:var(--font-display);font-size:14px;font-weight:800;transition:background .15s,color .15s} .art-upload-btn:hover{background:var(--petrol);color:#fff} /* ovládání plátna */ .art-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)} .art-fit{flex:none} .art-fit .seg-btn{padding:8px 14px;font-size:12.5px} .art-zoom{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;color:var(--ink-soft)} .art-zoom input[type=range]{width:130px;accent-color:var(--petrol)} .art-actions{display:flex;align-items:center;gap:12px;margin-left:auto;flex-wrap:wrap} .art-check{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer} .art-check input{width:16px;height:16px;accent-color:var(--petrol)} .art-btn{border:1.5px solid var(--line);background:var(--panel);border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:700;color:var(--ink);transition:border-color .15s,color .15s} .art-btn:hover{border-color:var(--petrol);color:var(--petrol)} .art-btn-del:hover{border-color:#E0A9A0;color:#B42318} .art-hint{margin-top:12px;font-size:12.5px;color:var(--ink-soft);max-width:64ch} @media(max-width:620px){.art-tools{gap:12px}.art-actions{margin-left:0;width:100%}} /* Chybové hlášky formulářů */ .form-errors{color:#B42318;font-size:13px;margin-top:10px} /* ===== DETAIL PRODUKTU ===== */ .crumbs{display:flex;align-items:center;gap:8px;padding:18px 0 0;font-size:13px;color:var(--ink-soft)} .crumbs a:hover{color:var(--petrol)} .crumbs span{color:var(--line-strong)} .crumbs b{color:var(--ink);font-weight:700} .pd{padding-top:14px;padding-bottom:56px} /* Název a specifikace na jednom řádku. Baseline, ne center — spec má sedět na účaří nadpisu, jinak plave. Wrap kvůli úzkým oknům. */ .pd-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-bottom:14px} .pd-head h1{font-size:clamp(24px,2.6vw,32px)} .pd-spec{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink-soft)} /* Doporučení je pod náhledem, ne nad konfigurátorem — viz komentář v šabloně. */ .pd-lead{margin:16px 0 0;font-size:15px;color:var(--ink-soft);max-width:62ch} /* minmax(0,1fr) ze stejného důvodu jako u .hero-stage — s pouhým 1fr se levý sloupec nesmí zmenšit pod šířku náhledu a konfigurátor vyjede mimo stránku. */ .pd-grid{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:40px;align-items:start} .pd-main{min-width:0} /* ⚠️ Sticky s `top` u prvku vyššího než okno znamená, že jeho spodek uživatel nikdy neuvidí — cena a tlačítka končily pod okrajem (§27). Panel se proto přilepí nahoru JEN když se celý vejde do okna — třídu is-sticky přepíná product.js podle skutečné výšky. Jinak jede se stránkou a cenu drží přilepená patka. */ .pd-side{min-width:0} .pd-side.is-sticky{position:sticky;top:80px} @media(max-width:1120px){.pd-grid{grid-template-columns:minmax(0,1fr) 380px;gap:28px}} /* Mobil: konfigurátor patří hned pod náhled, ne až za odrážky, slevy a taby. .pd-side je sourozenec .pd-main, ne jeho dětí, takže samotné order mezi ně nedosáhne — display:contents udělá z dětí .pd-main přímé položky mřížky. Pozor: .pd-main{min-width:0} tím pro děti přestane platit, proto ho každá položka dostává sama. */ @media(max-width:1000px){ .pd-grid{grid-template-columns:minmax(0,1fr);gap:28px} .pd-main{display:contents} .pd-main>.proof{order:1;min-width:0} /* Na úzkém okně panel neroluje uvnitř — stránka má místa dost. */ .pd-side,.pd-side.is-sticky{order:2;position:static} /* Na mobilu cenu a tlačítka nese spodní lišta .pd-bar — patka nelepí. */ .calc-foot{position:static;margin:14px 0 0;padding:14px 0 20px} /* Stejné order jako .proof: při shodě rozhoduje pořadí v DOM, takže doporučení zůstane hned pod náhledem a nevyskočí nad něj. */ .pd-main>.pd-lead{order:1;min-width:0} .pd-main>.pd-features{order:3;min-width:0} .pd-main>.pd-tiers-note{order:4;min-width:0} .pd-main>.tabs{order:5;min-width:0} .pd-main>.pd-safety{order:6;min-width:0} } /* Spodní lišta na mobilu — desktop má místo ní lepený pravý sloupec. Výška v proměnné, ať na ni může navázat odsazení stránky i posun hlášek. */ .pd-bar{display:none} .pd-bar-price{display:flex;flex-direction:column;line-height:1.15} .pd-bar-price b{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--petrol)} .pd-bar-price small{font-size:11px;color:var(--ink-soft)} .pd-bar .btn{margin:0;white-space:nowrap} @media(max-width:1000px){ /* Změřená výška lišty je 77 px a je stabilní od 320 do 1000 px šířky. Držet tuhle hodnotu nad skutečností — kdyby byla nižší, poslední prvek stránky by zůstal schovaný pod lištou. */ :root{--pd-bar-h:78px} .pd-bar{ display:flex;align-items:center;justify-content:space-between;gap:14px; position:fixed;left:0;right:0;bottom:0;z-index:140; min-height:var(--pd-bar-h);box-sizing:border-box; background:var(--panel);border-top:1px solid var(--line-strong); padding:10px 16px calc(10px + env(safe-area-inset-bottom)); box-shadow:0 -8px 24px -18px rgba(10,68,62,.5) } /* Roztažená tlačítka by se v liště na 320 px slisovala k nečitelnosti */ /* min-height drží dotykový cíl na 44 px a zároveň srovná obě tlačítka */ .pd-bar .btn{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;flex:0 0 auto;margin:0;padding:14px 18px;border:1.5px solid transparent;min-height:44px} .pd-bar .btn-quiet{margin-top:0;padding:12px 14px;font-size:14px;border-color:var(--line-strong)} .pd-bar .btn-quiet:hover{border-color:var(--petrol)} .pd-bar-price{flex:1 1 auto;min-width:0} /* Poslední prvek stránky nesmí zůstat pod lištou */ body.has-pd-bar{padding-bottom:calc(var(--pd-bar-h) + env(safe-area-inset-bottom))} } /* Ikony v liště berou ~48 px, které patří ceně. Cena je nepředvídatelná — největší možná plachta (50 × 20 m REFLEX) stojí 319 200 Kč a pod 460 px by se s ikonami zalomila na dva řádky. Změřená hranice leží mezi 414 a 460 px. V patce konfigurátoru ikony zůstávají, tam o místo nejde. */ @media(max-width:459px){.pd-bar .btn-ico{display:none}} @media(max-width:400px){ .pd-bar{gap:8px;padding-left:12px;padding-right:12px} .pd-bar .btn{padding:13px 12px;font-size:14.5px} .pd-bar .btn-quiet{padding:11px 10px;font-size:13px} .pd-bar-price b{font-size:17px} } /* Parametry pod náhledem — dva sloupce, každý bod tučný název + jeden řádek šedě (9. 10. 2026). Stejná stavba = stejná výška = stejné mezery. Jeden sloupec s linkami zadavatel zamítl jako nepřehledný. */ .pd-features{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin-top:24px} .pd-features li{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:28px} .pd-features li>label{display:flex;flex-direction:column;gap:2px;min-width:0} .pd-features .pd-t{font-size:14.5px;font-weight:700;line-height:1.3;color:var(--ink)} .pd-features .pd-sub{display:block;font-size:12.5px;font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .pd-features .pd-sub b{color:var(--ink);font-weight:700} @media(max-width:620px){.pd-features{grid-template-columns:minmax(0,1fr)}} /* Fajfka jako SVG — rotovaný box se do kolečka nevešel a přetékal. */ .pd-features li::before{ content:'';position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%; background:var(--lime) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.3 2.3L9.4 3.7' fill='none' stroke='%2312201B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px 11px no-repeat; } /* Volby dokončení v seznamu — zrcadla zaškrtávátek z konfigurátoru. Zaškrtnutá vypadá jako ostatní fajfky, nezaškrtnutá jako prázdné kolečko. */ .pd-opt label{cursor:pointer;display:block} .pd-opt .pd-opt-box{position:absolute;left:0;top:1px;width:17px;height:17px;margin:0;opacity:0;cursor:pointer} .pd-opt.is-off::before{background:var(--panel);box-shadow:inset 0 0 0 1.5px var(--line-strong)} .pd-opt:not(.is-locked) label:hover .pd-t{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px} .pd-opt.is-locked label{cursor:default} .pd-opt:has(.pd-opt-box:focus-visible)::before{outline:2px solid var(--petrol);outline-offset:2px} /* Množstevní pásma */ .tiers{margin:0} /* Množstevní ceny jednou větou pod parametry (9. 10. 2026), tabulka je v záložce Ceník */ .pd-tiers-note{margin-top:18px;font-size:13.5px;color:var(--ink-soft)} .pd-tiers-note a{font-weight:700;color:var(--petrol);border-bottom:1px solid var(--line-strong);white-space:nowrap} .pd-tiers-note a:hover{border-bottom-color:var(--petrol)} .tiers-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:18px} .tiers-head h2{font-size:clamp(20px,2.2vw,25px);margin-top:10px} .tiers-note{margin-bottom:12px;font-size:13.5px;color:var(--ink-soft)} .tiers-table+.tiers-note{margin:12px 0 0} .tiers-table{width:100%;border-collapse:collapse} /* Sloupec bez DPH — ceník zadavatele je bez DPH, zákazník platí s DPH (9. 10. 2026) */ .tiers-table .tiers-net{color:var(--ink-soft);font-size:.9em} .tiers-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);padding:0 12px 10px 12px;border-bottom:1px solid var(--line)} .tiers-table th:last-child,.tiers-table td:last-child{text-align:right} .tiers-table td{padding:12px;font-size:15px;border-bottom:1px solid var(--line);transition:background .2s} .tiers-table tr:last-child td{border-bottom:0} .tiers-table .t-price{font-weight:800;color:var(--petrol)} .tiers-table .t-disc{font-weight:700;color:var(--ink-soft)} .tiers-table tr.active td{background:#EDF6DC} .tiers-table tr.active td:first-child{border-radius:8px 0 0 8px;box-shadow:inset 3px 0 0 var(--lime)} .tiers-table tr.active td:last-child{border-radius:0 8px 8px 0} .tiers-table tr.active .t-disc{color:var(--petrol)} .tiers-hint{margin-top:14px;font-size:13.5px;color:var(--ink-soft)} .tiers-hint b{color:var(--ink)} /* Záložky */ .tabs{margin-top:40px} .tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto} .tab-btn{border:none;background:transparent;padding:12px 16px;font-family:inherit;font-size:14.5px;font-weight:700;color:var(--ink-soft);white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s} .tab-btn:hover{color:var(--ink)} .tab-btn.active{color:var(--petrol);border-bottom-color:var(--lime)} .tab-panel{display:none;padding-top:22px;max-width:70ch} .tab-panel.active{display:block} .tab-panel p{margin-bottom:14px;color:var(--ink-soft);font-size:15px} .tab-panel p b{color:var(--ink)} .tab-panel a{color:var(--petrol);font-weight:700;text-decoration:underline;text-underline-offset:2px} .pd-h3{margin:28px 0 12px;font-size:19px} /* Výrobce a bezpečnost (16. 10. 2026) — povinná informace, tiše pod záložkami */ .pd-safety{margin-top:36px;padding:20px 22px;max-width:70ch;border:1px solid var(--line);border-radius:var(--radius)} .pd-safety h2{font-size:15px;margin-bottom:10px} .pd-safety p{margin:0 0 8px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)} .pd-safety p:last-child{margin-bottom:0} .pd-safety b{color:var(--ink)} .pd-safety a{color:var(--petrol);font-weight:700} .pd-sub a{color:var(--petrol);font-weight:700;text-decoration:underline;text-underline-offset:2px} .pd-list{list-style:none;margin-bottom:16px} .pd-list li{position:relative;padding-left:18px;margin-bottom:10px;font-size:15px;color:var(--ink-soft)} .pd-list li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--lime)} .pd-list li b{color:var(--ink)} /* Tabulka parametrů */ .spec-table{width:100%;border-collapse:collapse} .spec-table th{text-align:left;width:38%;padding:12px 16px 12px 0;font-size:14px;font-weight:700;color:var(--ink-soft);border-bottom:1px solid var(--line);vertical-align:top} .spec-table td{padding:12px 0;font-size:15px;font-weight:600;border-bottom:1px solid var(--line)} .spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0} /* Ušetřeno v konfigurátoru */ /* Stav grafiky — samotný upload řeší náhled vlevo */ .art-status{margin-top:14px;font-size:12.5px;color:var(--ink-soft);line-height:1.5} .art-status b{color:var(--ink);font-weight:700} /* Patička konfigurátoru — cena a tlačítko drží pohromadě dole. flex:none, aby ji vnitřní scroll nesmrskl. Pozadí je nutné: patka překrývá rolující obsah pod sebou. */ .calc-foot{flex:none;background:var(--panel);margin:14px -26px 0;padding:14px 26px 22px;border-top:1px dashed var(--line-strong); /* Cena a tlačítka u spodní hrany okna, dokud se nedojede na konec panelu */ position:sticky;bottom:0;z-index:6;border-radius:0 0 var(--radius-lg) var(--radius-lg)} .calc-foot .calc-result{margin-top:0;padding-top:0;border-top:0} .calc-foot .btn{margin-top:12px} .calc-foot .calc-meta{text-align:left;margin-top:6px;line-height:1.4} /* Sleva za logo dole u ceny (9. 10. 2026) — menší než volby nahoře */ .calc-foot .calc-logo label{padding:9px 0 0;font-size:13px;gap:10px} .calc-foot .calc-logo input[type=checkbox]{width:36px;height:20px} .calc-foot .calc-logo input[type=checkbox]::after{width:16px;height:16px} .calc-foot .calc-logo input[type=checkbox]:checked::after{transform:translateX(16px)} /* Dvě cesty ven vedle sebe — stejná šířka, ať ani jedna nevypadá jako doplněk */ .calc-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px} /* Průhledný rámeček srovná výšku s .btn-quiet, který svůj 1,5px rámeček má. Jen tady a v .pd-bar — globálně by o 3 px posunul hero CTA, které má v PROJEKT.md naměřenou pozici. */ .calc-cta .btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:0;padding-left:8px;padding-right:8px;border:1.5px solid transparent} .calc-cta .btn-quiet{border-color:var(--line-strong)} .calc-cta .btn-quiet:hover{border-color:var(--petrol)} /* Pod 360 px si ikona a popisek vedle sebe už nevejdou — text by se zalomil na dva řádky a sloupce by se rozešly (1fr = minmax(auto,1fr)). Radši pod sebe. */ @media(max-width:359px){.calc-cta{grid-template-columns:1fr}} /* Poznámka o svařování z pásů */ .note-weld{margin-top:12px;background:var(--bg-soft);border:1px solid var(--line);border-radius:9px;padding:10px 14px;font-size:13px;color:var(--ink-soft)} /* Překročený limit — blokuje odeslání */ .limit-warn{margin-top:12px;background:#FDF0EE;border:1px solid #F3C9C2;border-radius:9px;padding:10px 14px;font-size:13.5px;font-weight:600;color:#B42318} .btn:disabled,.btn-disabled{background:var(--line-strong);color:#7C8A83;cursor:not-allowed;box-shadow:none;transform:none} .btn:disabled:hover,.btn-disabled:hover{background:var(--line-strong);transform:none} /* Služby */ .svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} /* Služby pod detailem produktu jako úzký pruh (9. 10. 2026) */ .services-strip{padding:8px 0 56px} .svc-strip{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:22px;border-top:1px solid var(--line)} .svc-strip li{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:13.5px;color:var(--ink-soft)} .svc-strip b{font-size:14.5px;color:var(--ink)} .svc-strip a{color:var(--petrol);font-weight:700} @media(max-width:760px){.svc-strip{grid-template-columns:minmax(0,1fr);gap:14px}} .svc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px 22px} .svc h3{font-size:15.5px;margin-bottom:8px} .svc p{font-size:13.5px;color:var(--ink-soft)} .svc a{color:var(--petrol);font-weight:700} @media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.svc-grid{grid-template-columns:1fr}} /* ===== POKLADNA ===== */ .co{padding-top:22px;padding-bottom:64px} /* Kroky — pořadí nese informaci */ .co-steps{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;list-style:none;margin-bottom:26px;font-size:13.5px;font-weight:700;color:var(--ink-soft)} .co-steps li{display:flex;align-items:center;gap:8px} .co-steps li::after{content:'';width:26px;height:1.5px;background:var(--line-strong);margin-left:6px} .co-steps li:last-child::after{display:none} .co-steps span{display:flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:50%;background:var(--bg-soft);border:1.5px solid var(--line-strong);font-size:12px} .co-steps .done{color:var(--petrol)} .co-steps .done span{background:var(--petrol);border-color:var(--petrol);color:#fff} .co-steps .current{color:var(--ink)} .co-steps .current span{background:var(--lime);border-color:var(--lime);color:var(--ink)} /* minmax(0,1fr), ne 1fr — 1fr se nezmenší pod min-content obsahu a na 320 px roztlačil pokladnu na 345 px (§9, naměřeno 15. 10. 2026) */ .co-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:34px;align-items:start} @media(max-width:960px){.co-grid{grid-template-columns:minmax(0,1fr);gap:24px}} /* Bloky formuláře */ /* min-width:0 — fieldset má v prohlížečích min-width:min-content a na 320 px roztlačil pokladnu na 345 px (naměřeno 15. 10. 2026) */ .co-block{border:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:14px;min-width:0} /* legend se sám staví do rámečku fieldsetu — float z něj udělá běžný blok */ .co-legend{float:left;width:100%;padding:0;margin-bottom:16px} /* Volba „doručovací = fakturační". Stejný jazyk jako .co-toggle výš, jen drobnější — je to upřesnění sekce, ne samostatné rozhodnutí. */ /* Volba „doručovací = fakturační" je přepínač chování, ne souhlas — proto switch, stejný jako „Nakupuji na firmu" výš a dokončení v konfigurátoru. Nativní čtvereček by tu byl jediný svého druhu. ⚠️ Flexovat se musí vnitřní