/* * Vzhled vychází z design systému ÚRS (Envix / CSonline) – viz urs-design-skill/. * Tmavé pozadí aplikace, obsah v bílých "framech" (zde: jednotlivé

sekce). */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Mono:wght@400;500&display=swap"); :root { --color-primary-50: #F0F6F9; --color-primary-500: #498FBA; --color-primary-600: #4182AA; --color-primary-700: #387194; --color-secondary-brand-500: #029561; --color-tertiary-500: #0047B2; --color-tertiary-900: #000E24; --color-danger-500: #E2001A; --color-warning-500: #F15A22; --color-neutral-0: #FFFFFF; --color-neutral-10: #F7F7F7; --color-neutral-50: #F2F2F2; --color-neutral-100: #E8E8E8; --color-neutral-200: #CFCFCF; --color-neutral-300: #ABABAB; --color-neutral-400: #707070; --color-neutral-600: #383838; --color-neutral-950: #121212; --font-base: "Roboto", sans-serif; --font-mono: "Roboto Mono", monospace; --radius-sm: 4px; --radius-md: 6px; --radius-xl: 12px; --shadow-s: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.10); --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; } * { box-sizing: border-box; } /* Odkaz obalující logo (viz .logo-link níže) je taky přímé dítě , ale nemá se chovat jako "pill" odkaz z pravidla "body > a" – jeho box se úplně ruší, aby se chovalo jako čistý obrázek s odkazem. */ .logo-link { display: contents; } /* Logo ÚRS v levém horním rohu, fixní na všech stránkách kalkulaček */ .site-logo { position: fixed; top: var(--space-4); left: var(--space-4); height: 24px; width: auto; z-index: 1000; } html { overflow-x: hidden; } body { margin: 0; padding: var(--space-8) var(--space-4) 64px; min-height: 100vh; background: var(--color-tertiary-900); font-family: var(--font-base); font-size: 16px; line-height: 24px; color: var(--color-neutral-600); } /* Hlavní stránka (index.html) – nabídka kalkulaček vystředěná na celou výšku stránky, tlačítka v mřížce 2×2 ("čtverec"). */ .menu-page { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - var(--space-8) - 64px); } .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(200px, 260px)); gap: var(--space-4); } .menu-grid a { display: flex; align-items: center; justify-content: center; height: 120px; padding: var(--space-4); border: 1px solid rgba(255, 255, 255, 0.20); border-radius: var(--radius-xl); background: rgba(255, 255, 255, 0.10); color: #FFFFFF; font-size: 16px; font-weight: 500; text-align: center; text-decoration: none; transition: background 0.15s ease; } .menu-grid a:hover { background: rgba(255, 255, 255, 0.20); } /* Horní navigační lišta mezi kalkulačkami (nahrazuje odkaz "Zpět"). Přesahuje přes padding na celou šířku stránky (100vw), uvnitř má z každé strany mezeru 1/8 šířky stránky (padding 12.5 %) a zbylé tři čtvrtiny rovnoměrně rozdělené na 4 odkazy. */ .top-nav { position: relative; left: 50%; width: 100vw; margin-left: -50vw; margin-top: calc(-1 * var(--space-8)); margin-bottom: var(--space-6); padding: 0 12.5%; display: flex; background: var(--color-neutral-0); } .top-nav a { flex: 1; padding: var(--space-4) var(--space-2); text-align: center; color: var(--color-neutral-600); font-size: 14px; font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; transition: background 0.15s ease; } .top-nav a:hover { background: var(--color-neutral-10); } .top-nav a.active { color: var(--color-primary-700); border-bottom-color: var(--color-primary-500); } /* Každá sekce = bílý frame plovoucí na tmavém pozadí aplikace */ form { max-width: 1285px; margin: 0 auto var(--space-6); padding: var(--space-6); background: var(--color-neutral-0); border-radius: var(--radius-xl); } label { display: inline-block; margin: 2px 8px 2px 0; font-size: 14px; font-weight: 500; color: var(--color-neutral-600); } input[type="text"], input[type="number"] { height: 36px; width: 170px; padding: 0 10px; margin: 4px 0 10px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); font-family: var(--font-base); font-size: 14px; color: var(--color-neutral-950); background: var(--color-neutral-0); } input[type="text"]:focus, input[type="number"]:focus, select:focus { outline: none; border-color: var(--color-primary-500); } /* Chybný stav formuláře po pokusu o odeslání (viz ulozitPdf() v common.js) */ .was-validated input:invalid { border-color: var(--color-danger-500); } .was-validated input:invalid:focus { border-color: var(--color-danger-500); box-shadow: 0 0 0 1px var(--color-danger-500); } input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; margin: 0 6px 0 0; vertical-align: middle; accent-color: var(--color-primary-500); } select { height: 36px; padding: 0 8px; margin: 4px 0 10px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); font-family: var(--font-base); font-size: 14px; color: var(--color-neutral-950); background: var(--color-neutral-0); } button { height: 38px; padding: 0 20px; border: none; border-radius: var(--radius-md); background: var(--color-primary-500); color: #FFFFFF; font-family: var(--font-base); font-size: 14px; font-weight: 500; cursor: pointer; transition: background 0.15s ease; } button:hover { background: var(--color-primary-600); } /* Vnitřní odkazy uvnitř bílých framů (mimo horní navigační odkaz) */ form a { color: var(--color-primary-700); text-decoration: underline; } table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0; font-size: 14px; } th, td { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-neutral-100); text-align: left; } tr > td:first-child, tr > th:first-child { border-left: none; } tr > td:last-child, tr > th:last-child { border-right: none; } table tr:first-child > td, table tr:first-child > th { border-top: none; text-align: center; } table tr:last-child > td { border-bottom: none; } tr:first-child { background: var(--color-neutral-50); font-weight: 500; } tbody tr:hover, tr:hover { background: var(--color-neutral-10); } /* Číselné výsledky (ceny, hodiny, procenta) – tertiary-500 dle design systému */ [id$="cost"], [id$="Cost"], [id$="hours"], [id$="Hours"], [id$="percent"], [id$="Percent"], td[id*="sluz"][id$="h"], td[id*="sluz"][id$="c"] { font-family: var(--font-mono); color: var(--color-tertiary-500); font-weight: 500; text-align: right; } /* Sloupec "%" ve fázích - buňka s vstupem procent má být zarovnaná doprava jako ostatní číselné sloupce, na rozdíl od popiskových buněk (Název, Další služby). */ td:has(> .unit-input > input[id$="percent"]) { text-align: right; } /* Sloupec "Další služby" v tabulce fází - pevná šířka, aby byl stejný na všech stránkách bez ohledu na to, jestli buňka obsahuje jen text, nebo i checkbox pro rozbalení podřádků (viz pozemni.html). */ .tabulka-fazi td:last-child, .tabulka-fazi th:last-child { width: 100px; text-align: center; } /* Sloupec s checkboxem fáze + "N FS" popiskem - nesmí se zalamovat na 2 řádky */ .tabulka-fazi td:first-child { white-space: nowrap; } /* Součet ceny (a hodin) v posledním řádku tabulky fází - nesmí se zalomit na 2 řádky */ #totalcost, #totalhours { white-space: nowrap; } /* Podřádky "Další služby" u fází (pozemni.html) - buňka "Navýšení o: X %" zarovnaná doprava jako ostatní číselné sloupce, ne vlevo. */ .tabulka-fazi tr[id*="sluz"] td:nth-child(3), .tabulka-fazi tr[class*="sluz"] td:nth-child(3) { text-align: right; } /* Ikonka odsazení u checkboxu podřádku další služby (pozemni.html) - naznačuje, že služba patří pod fázi nad ní. */ .sub-sluzba-icon { display: inline-block; vertical-align: middle; margin-left: 4px; color: var(--color-neutral-400); stroke-linecap: butt; stroke-linejoin: miter; } /* Souhrnné tabulky (Další služby, Předpokládaná cena) – číselné sloupce doprava */ #sluzby td:nth-child(2), #sluzby td:nth-child(3), #sluzby td:nth-child(4), #final tr:not(:first-child) td:not(:first-child) { text-align: right; } #dalsi1 td:last-child { white-space: nowrap; } #dalsi2 td:nth-child(3) { text-align: right; } #sluzby td:nth-child(2) input[type="number"], #sluzby td:nth-child(3) input[type="number"] { text-align: right; } #sluzby td:nth-child(4) { width: 10%; } #sluzby td:nth-child(5) { width: 50px; text-align: center; } [id^="kalchodinovka"] { text-align: right; } /* Číselné pole s jednotkou (%, m², Kč/hod…) zobrazenou uvnitř pole vpravo. Nahrazuje dřívější inline padding/margin hack vypočítaný pro každou jednotku zvlášť. */ .unit-input { position: relative; display: inline-block; } .unit-input input { padding-right: 40px; text-align: right; } .unit-input--sm input { padding-right: 28px; } .unit-input--lg input { padding-right: 64px; } .unit-input--xlg input { padding-right: 96px; } .unit-input .unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--color-neutral-400); font-size: 13px; pointer-events: none; } textarea { width: 100%; padding: 8px 10px; margin: 4px 0 10px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-sm); font-family: var(--font-base); font-size: 14px; color: var(--color-neutral-950); background: var(--color-neutral-0); resize: vertical; } textarea:focus { outline: none; border-color: var(--color-primary-500); } /* Úvodní popis nad formulářem (metodika, odkaz na legislativu) */ .uvod { max-width: 760px; margin: 0 auto var(--space-6); padding: 0 var(--space-2); color: rgba(255, 255, 255, 0.70); font-size: 14px; line-height: 21px; } /* Info ikonka s nápovědou (data-tooltip atribut) u fází / polí */ .info-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--color-primary-500); color: var(--color-primary-500); font-size: 11px; font-style: normal; line-height: 1; cursor: help; user-select: none; } /* Vlastní tooltip místo nativního title atributu - nativní tooltip dlouhý text ořezává (...) */ .info-icon[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 360px; padding: var(--space-2) var(--space-3); border-radius: 6px; background: var(--color-neutral-950); color: var(--color-neutral-0); font-size: 13px; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s ease; z-index: 50; } .info-icon[data-tooltip]:hover::after, .info-icon[data-tooltip]:focus::after { opacity: 1; visibility: visible; } /* Podnadpis uvnitř formuláře (např. "Stavba", "Parametry interiéru") */ .sekce-nadpis { display: block; margin: var(--space-2) 0 var(--space-3); font-size: 18px; font-weight: 500; color: var(--color-neutral-950); } /* Skupina rádiových přepínačů nad tabulkou (např. volba typu fází) */ .volba-skupina { margin-bottom: var(--space-4); } .volba-skupina label { display: block; font-weight: 400; margin-bottom: var(--space-2); } .skryt { display: none; } /* Odkaz "Podrobnosti" u názvu fáze, otevírající modal (viz otevritFaziDetail() v common.js) */ .faze-detail-link { background: none; border: none; padding: 0; margin: 0; font: inherit; color: var(--color-neutral-950); text-align: left; cursor: pointer; } .faze-detail-link:hover { background: none; color: var(--color-primary-700); text-decoration: underline; } /* Modal s podrobným obsahem fáze (viz otevritFaziDetail() / zavritFazeModal() v common.js) */ .faze-modal-overlay { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: flex-start; justify-content: center; padding: var(--space-8) var(--space-4); background: rgba(0, 14, 36, 0.6); overflow-y: auto; } .faze-modal-overlay.skryt { display: none; } .faze-modal { position: relative; width: 100%; max-width: 760px; margin: auto; padding: var(--space-8); background: var(--color-neutral-0); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); color: var(--color-neutral-600); font-size: 14px; line-height: 1.5; } .faze-modal h2 { margin: 0 0 var(--space-4); font-size: 20px; font-weight: 500; color: var(--color-neutral-950); padding-right: var(--space-8); } .faze-modal h3 { margin: var(--space-4) 0 var(--space-2); font-size: 15px; font-weight: 500; color: var(--color-neutral-950); } .faze-modal p { margin: 0 0 var(--space-3); } .faze-modal ul { margin: 0 0 var(--space-3); padding-left: 20px; } .faze-modal li { margin-bottom: 4px; } .faze-modal-close { position: absolute; top: var(--space-4); right: var(--space-4); width: 32px; height: 32px; border: none; border-radius: var(--radius-md); background: var(--color-neutral-50); color: var(--color-neutral-600); font-size: 16px; line-height: 1; cursor: pointer; } .faze-modal-close:hover { background: var(--color-neutral-100); } /* Mobilní úprava (telefony na výšku) – zúžený padding, jednosloupcové menu, zmenšená horní navigace a tabulky rozbalené do karet místo klasické mřížky. */ @media (max-width: 640px) { body { padding: var(--space-4) var(--space-2) 48px; font-size: 15px; } .site-logo { top: var(--space-2); left: var(--space-2); height: 20px; } .menu-page { min-height: calc(100vh - var(--space-4) - 48px); } .menu-grid { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 320px; } .menu-grid a { height: 88px; } .top-nav { padding: 0 var(--space-2); margin-top: calc(-1 * var(--space-4)); overflow-x: auto; -webkit-overflow-scrolling: touch; } .top-nav a { flex: none; min-width: 25%; padding: var(--space-3) var(--space-2); font-size: 12px; } form { padding: var(--space-4); border-radius: var(--radius-md); } input[type="text"], input[type="number"], select { width: 100%; max-width: 260px; } /* Tabulky (fáze, další služby, souhrn) jsou na mobilu příliš košaté na to, aby se vešly na šířku, a horizontální scroll je u dlouhých popisů fází nepříjemný. Místo toho se každý "rozbalí" do karty s buňkami pod sebou, text se přirozeně zalamuje. */ table, thead, tbody, tfoot { display: block; width: 100%; } table tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-neutral-100); } table tr:first-child { border-top: 1px solid var(--color-neutral-100); } table td { display: block; width: auto !important; border: none; padding: 3px 0; text-align: left !important; } table tr:first-child > td { text-align: left !important; font-weight: 500; } .tabulka-fazi td:last-child, .tabulka-fazi th:last-child { text-align: left; } .unit-input, .unit-input input { width: auto; max-width: none; } .faze-modal-overlay { padding: var(--space-4) var(--space-2); } .faze-modal { padding: var(--space-6) var(--space-4); } .info-icon[data-tooltip]::after { max-width: 240px; } } /* Skryté při tisku / ukládání jako PDF (window.print()) – navigace a tlačítko samotné akce nemají v exportu co dělat. */ @media print { .top-nav, .site-logo, .no-print, .faze-modal-overlay { display: none !important; } }