/* podstranky.css - samostatna vrstva pre podstranky v novom vzhlade. Nacitava sa AZ ZA main.css a len na podstrankach s . Uvodna stranka ju nenacita - preto sa na nu tieto pravidla nevyleju. Az ked bude vzhlad odsuhlaseny, presunie sa obsah do vzhlad.css. */ /* ===================================================================== marker: podstranky Vzhlad podstranok (stroje + textove stranky) v novom navrhu. Znacky podstranok sa NEMENIA - meni sa len vzhlad. Preto su tu selektory so starymi nazvami tried (.hero, .panel, .specs, .btn...), vsetky pod .novy, aby sa nic nevylialo na stranky bez redizajnu. Nacitava sa za main.css, takze pri rovnakej specificite vyhrava. ===================================================================== */ /* --- spolocny rytmus sekcii ------------------------------------------ */ .novy main > section { padding-block: 34px; } .novy main > section:first-child { padding-top: 22px; } .novy main > section + section { padding-top: 0; } .novy main > section:last-child { padding-bottom: 56px; } .novy .section-inner { width: 100%; max-width: var(--sirka); margin-inline: auto; padding-inline: var(--okraj); } .novy main > section.hero { background: none; border: 0; } .novy main > section.hero::before, .novy main > section.hero::after { content: none; } /* --- drobcekova navigacia -------------------------------------------- */ .novy .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: 0.8125rem; color: var(--ink-2); } .novy .crumbs a { color: var(--ink-2); text-decoration: none; } .novy .crumbs a:hover { color: var(--brand-text); text-decoration: underline; } .novy .crumbs span { color: var(--ciara-silna); } .novy .crumbs b { color: var(--ink); font-weight: 600; } /* --- horna cast stranky stroja: galeria + text ----------------------- */ .novy .hero-grid { display: grid; gap: 22px; align-items: start; } .novy .gallery-main { display: block; overflow: hidden; aspect-ratio: 900 / 570; background: var(--foto); border: 1px solid var(--ciara); border-radius: var(--roh-l); box-shadow: var(--tien-1); } .novy .gallery-main img { width: 100%; height: 100%; padding: 3%; object-fit: contain; } .novy .thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: 68px; gap: 8px; margin-top: 10px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; } .novy .thumb { display: block; width: 68px; height: 68px; padding: 3px; background: var(--foto); border: 1.5px solid var(--ciara); border-radius: var(--roh-s); cursor: pointer; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .novy .thumb img { width: 100%; height: 100%; object-fit: contain; } .novy .thumb:hover { border-color: var(--ciara-silna); } .novy .thumb.is-active { border-color: var(--brand-text); box-shadow: 0 0 0 2px var(--karta), 0 0 0 4px var(--s-volne-bg); } /* --- nadpisova cast --------------------------------------------------- */ .novy .eyebrow { margin-bottom: 8px; color: var(--brand-text); font: 700 0.75rem/1.2 var(--pismo-nadpis); letter-spacing: 0.08em; text-transform: uppercase; } .novy main h1 { margin-bottom: 12px; } .novy .lead { max-width: 60ch; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; } .novy .lead b, .novy .lead strong { color: var(--ink); } /* --- odrazky s fajkou (fajka je nakreslena CSS, nezavisi od pisma) ---- */ .novy .features { display: grid; gap: 9px; margin-top: 20px; } .novy .feature { position: relative; padding-left: 28px; color: var(--ink); font-size: 0.9375rem; line-height: 1.5; } .novy .feature::before { content: ""; position: absolute; left: 3px; top: 0.34em; width: 11px; height: 6px; border-left: 2.5px solid var(--brand-text); border-bottom: 2.5px solid var(--brand-text); border-bottom-left-radius: 2px; transform: rotate(-45deg); } /* --- tlacidla: rovnaka rodina ako .tlacidlo v navrhu ------------------ */ .novy .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; } .novy .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border: 1.5px solid transparent; border-radius: var(--roh-m); font: 600 0.9375rem/1 var(--pismo-text); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .novy .btn:active { transform: translateY(1px); } .novy .btn-primary { background: var(--brand); color: var(--na-brand); border-color: var(--brand); } .novy .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .novy .btn-ghost { background: transparent; border-color: var(--ciara-silna); color: var(--ink); } .novy .btn-ghost:hover { background: var(--panel-2); } .novy .btn-nedostupne { background: var(--s-nedostupne-bg); color: var(--s-nedostupne-text); border: 1.5px dashed var(--s-nedostupne-okraj); cursor: default; } /* --- dvojstlpcova cast: udaje + cennik -------------------------------- */ .novy .content-grid { display: grid; gap: 18px; align-items: start; } .novy .panel { padding: 20px; background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-l); box-shadow: var(--tien-1); } .novy .panel > h2 { margin-bottom: 14px; } .novy .panel > h2 + * { margin-top: 0; } .novy .panel p { color: var(--ink-2); } /* --- tabulka technickych udajov --------------------------------------- */ .novy table.specs { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .novy table.specs th, .novy table.specs td { padding: 10px 0; border-bottom: 1px solid var(--ciara); vertical-align: top; } .novy table.specs th { width: 46%; color: var(--ink-2); font-weight: 500; text-align: left; } .novy table.specs td { color: var(--ink); font-weight: 600; text-align: right; } .novy table.specs tr:last-child th, .novy table.specs tr:last-child td { border-bottom: 0; } /* --- cennik prenajmu --------------------------------------------------- */ .novy .price-box { display: grid; gap: 0; } .novy .price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ciara); } .novy .price-row:last-child { border-bottom: 0; } .novy .price-row span { color: var(--ink-2); font-size: 0.9375rem; } .novy .price-row strong { color: var(--ink); font: 700 1.25rem/1 var(--pismo-nadpis); letter-spacing: -0.02em; } .novy .price-row s { color: var(--ink-2); font-size: 0.875rem; font-weight: 400; } .novy .muted { margin-top: 14px; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.5; } /* --- video ------------------------------------------------------------- */ .novy .video { overflow: hidden; aspect-ratio: 16 / 9; background: var(--panel-2); border-radius: var(--roh-m); } .novy .video iframe { width: 100%; height: 100%; border: 0; display: block; } /* --- pocitac a tablet --------------------------------------------------- */ @media (min-width: 720px) { .novy main > section { padding-block: 44px; } .novy main > section:first-child { padding-top: 28px; } .novy main > section + section { padding-top: 0; } .novy .panel { padding: 24px; } .novy .thumbs { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); grid-auto-columns: auto; overflow: visible; } .novy .thumb { width: 100%; height: auto; aspect-ratio: 1; } } @media (min-width: 960px) { .novy .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; } .novy .content-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; } /* Cennik drzi krok s dlhou tabulkou udajov - zakaznik ho ma stale na ocich. */ .novy .content-grid > aside.panel { position: sticky; top: calc(var(--hlavicka) + 16px); } } /* ===================================================================== marker: oprava-po-main-podstranky Stary main.css kreslil tieto prvky na TMAVOZELENOM hero pase, takze ma v nich biely text a poloprieheladne plochy. Novy hero je kremovy - bez tychto pravidiel je nadpis biely na kremovej (zmerane 1,1 : 1). Predpona .novy sama nestaci: co navrh vobec nenastavi, nema co prebit. ===================================================================== */ /* h1 v hero: main.css ma `.hero h1 { color: #fff }` */ .novy main h1, .novy main .hero h1 { color: var(--ink); } /* vedlajsie tlacidlo v hero: main.css z neho robi podciarknuty odkaz (`.hero .actions .btn-ghost` - tri triedy, prebije jednoduchsie pravidlo) */ .novy main .actions .btn-ghost { padding: 0 18px; border: 1.5px solid var(--ciara-silna); background: transparent; color: var(--ink); } .novy main .actions .btn-ghost:hover { background: var(--panel-2); border-color: var(--ciara-silna); } /* odrazky: main.css z nich robi polopriehladne kartycky s bielym textom */ .novy .feature { padding: 0 0 0 28px; background: none; border: 0; border-radius: 0; color: var(--ink); font-weight: 500; } /* cennik: main.css dava riadkom vlastne pozadia a ramik okolo celeho boxu. Den zvyraznujeme farbou a velkostou, nie farebnym pasom cez cely panel. */ .novy .price-box { margin-top: 0; border: 0; border-radius: 0; overflow: visible; } .novy .price-row, .novy .price-row:first-child, .novy .price-row:nth-child(2) { background: none; padding: 11px 0; border-bottom: 1px solid var(--ciara); } .novy .price-row:last-child { border-bottom: 0; } .novy .price-row:nth-child(2) strong { color: var(--brand-text); font-size: 1.5rem; } /* oddelovac v drobceku bol na 3,2 : 1 */ .novy .crumbs span { color: var(--ink-2); } /* Tlacidlo "viac" pod skratenym uvodnym textom na mobile. main.css mu dava var(--accent) - to je v starej palete svetla, na kremovej nevidno (1,01 : 1). Skracovanie textu na mobile je uzitocne, ostava - meni sa len farba. */ .novy .lead-viac { color: var(--brand-text); text-decoration: underline; } /* Mobil: main.css ma `@media (max-width:760px) .hero .actions .btn-ghost { min-height: 0 }` (tri triedy) - bez tohto je tlacidlo Zavolat vysoke 18 px a na dotyk sa netrafi. */ .novy main .actions .btn-ghost { min-height: 46px; } /* Sekcia "na co sa hodi" (.steps) na styroch strankach strojov. Cislo v kruzku ma vlastny zeleny prechod - to necham, len zladim plochy. */ .novy .steps { background: var(--panel-2); border-block: 1px solid var(--ciara); } .novy .step { background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-l); } .novy .step h3 { color: var(--ink); } .novy .step p { color: var(--ink-2); } /* Ucet nema .section-inner, obsah by isiel od hrany po hranu. */ .novy main > section:not(:has(> .section-inner)) { padding-inline: var(--okraj); } .novy main > section:not(:has(> .section-inner)) > * { max-width: var(--sirka); margin-inline: auto; } /* Tieto tri boli pod hranicou citatelnosti UZ NA OSTRYCH strankach v tmavom rezime - overene meranim na nezmenenych suboroch 20. 9. 2026: .krok-cas 2,36 : 1, .postup-tip 3,52 : 1, .firma-nazov 4,0 : 1. Nie je to chyba redizajnu; opravuje sa to tu, na ostrych strankach to ostava. Pouzivame dvojice premennych zo stavov dostupnosti - tie su zladene v oboch rezimoch. */ .novy .krok-cas { background: var(--s-ciastocne-bg); color: var(--s-ciastocne-text); } .novy .postup-tip { background: var(--s-volne-bg); color: var(--s-volne-text); } .novy .firma-nazov { color: var(--ink); } /* main.css ma na .postup-tip `color: ... !important` - bez !important sa to neda prebit. Pozadie uz prebrala vrstva vyssie, doplname text. */ .novy .postup-tip { color: var(--s-volne-text) !important; } /* Kartycky "na co sa hodi" na strankach strojov: cislo bolo v tmavom rezime na 3,52 : 1 (var(--brand-deep) na tmavej karte). */ .novy .usage-card { background: var(--karta); border-color: var(--ciara); } .novy .usage-card strong { color: var(--brand-text); } /* Delenie trzby 60/40 na stranke Prenajmite s nami: biela na zelenej bola 3,86 : 1 a zelena na zltej 2,23 : 1 - oboje uz na ostrej stranke. */ .novy .podiel-my { background: var(--brand); color: var(--na-brand); } .novy .podiel-vy { background: var(--akcent); color: var(--na-akcent); } /* ===================================================================== marker: tlacidla-button-podstranky Vo vzhlad.css je `.novy button.btn-primary { color: var(--na-akcent) }` (0,2,1) - opravuje ZLTE tlacidlo na uvodnej stranke. Na podstrankach je ale .btn-primary ZELENE (nizsie v tomto subore, .novy .btn-primary = 0,2,0), takze pravidlo zo vzhlad.css ho prebilo a vysiel tmavy text na zelenom, 2,28 : 1. Preto to tu vraciame s rovnakou specificitou - tento subor sa nacitava az za vzhlad.css, takze pri zhode vyhrava. KEDY NA TO MYSLIET: ked sa v podstranky.css zmeni farba .btn-primary, musi sa zmenit aj tento riadok. ===================================================================== */ .novy button.btn { color: var(--ink); } .novy button.btn-primary { color: var(--na-brand); } .novy button.btn-ghost { color: var(--ink); } /* Cislo v kruzku pri "na co sa hodi": main.css ma prechod `linear-gradient(140deg, var(--brand), var(--brand-deep))` s bielym textom. V TMAVOM rezime su obe zelene svetlejsie, takze biela na svetlejsom konci vysla 3,06 : 1. Jedna plna farba znacky je citatelna v oboch rezimoch (svetly 7,4 : 1, tmavy 8,0 : 1) a k novemu vzhladu sedi lepsie nez prechod. */ .novy .step b { background: var(--brand); color: var(--na-brand); } /* Nadpis skupiny v emotikonovom vybere v ucte. Ten isty vzor ako vyssie: var(--brand-deep) ako farba textu, v tmavom rezime 3,52 : 1 na #1e2a20. POZNAMKA PRE MNA: toto som dvakrat odpisal ako "chyba merania", lebo som meral na ramceku, ktory uz bol nahradeny inym a tmavy rezim sa nan nestihol nastavit. Merac hlasil pravdu. Ked merac a rucna kontrola nesuhlasia, zopakovat rucnu kontrolu v TOM ISTOM ramceku, nie v novom. */ .novy .znaky-skupina, .novy .znaky-skupina span { color: var(--ink); } /* =================================================================== marker: mapa-vedla-vizitky (22. 9. 2026) ------------------------------------------------------------------- Marian: „mapu daj sem vedľa kontakt“. Po zrušení BETRONu 18. 9. ostala .firmy-grid jednostlpcova s max-width: 640px, takze prava polovica sekcie bola prazdna. Mapa z byvalej sekcie „Výdajné miesto“ sedi odteraz v nej. Sirsi stlpec je mapa, uzsi vizitka. Na telefone sa to sklada pod seba - to zaridi .content-grid z main.css, ktory ma v mobilnom bode 1 stlpec. =================================================================== */ .novy .firmy-grid.firmy-s-mapou { max-width: none; } @media (min-width: 860px) { .novy .firmy-grid.firmy-s-mapou { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; gap: 24px; } } .novy .mapa-stlpec { min-width: 0; } .novy .mapa-stlpec .mapa-nadpis { margin: 0 0 4px; font: 700 1.125rem/1.25 var(--pismo-nadpis); letter-spacing: -0.01em; } .novy .mapa-stlpec .mapa-adresa { margin: 0 0 14px; color: var(--ink-2); font-size: 0.9375rem; } .novy .mapa-stlpec .mapa-obal { aspect-ratio: 4 / 3; } .novy .mapa-stlpec .mapa-pod { margin-top: 12px; } .novy .mapa-stlpec .mapa-pod .mapa-pozn { flex: 1 1 100%; } /* --- spat-ponuka --- na telefone nahradi drobky zretelnym tlacidlom, na pocitaci sa neukazuje. */ .novy .spat-ponuka { display: none; } @media (max-width: 767px) { .novy .spat-ponuka { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; margin: 0 0 10px; border: 1px solid var(--line, #d9d6cc); border-radius: 999px; background: var(--surface, #fff); color: var(--ink, #1c2a22); font-size: 15px; font-weight: 600; text-decoration: none; } .novy .spat-ponuka + .crumbs { display: none; } }