/* ============================================================ vzhlad.css - novy vzhlad webu (navrh v7, 20. 9. 2026) Kazdy selektor ma predponu .novy, cize plati LEN na stranke, ktora ma . Nic z toho nemoze rozhodit ostatnych 26 stranok ani admin. Nacitava sa AZ ZA main.css, takze pri rovnakej specificite vyhrava. Vypnutie celeho redizajnu = zmazat na tento subor. ============================================================ */ /* ===================================================================== 1. FARBY — jediné miesto, kde sú farby napísané. Pravidlá nižšie používajú len var(--…). Svetlý režim = :root, tmavý = data-rezim. ===================================================================== */ .novy { color-scheme: light; /* značka (ostáva) */ --brand: #0f6b3f; --brand-tmava: #0a4a2c; --ink: #072d1c; --panel: #f6f4ed; --akcent: #f2b02e; /* odvodené */ --brand-hover: #0c5a35; --na-brand: #fffdf8; --brand-text: #0f6b3f; --na-akcent: #072d1c; --ink-2: #44574c; --panel-2: #ece8da; --karta: #fffdf8; --foto: #e2ded0; --na-foto: #44574c; --ciara: #ddd8c8; --ciara-silna: #838b80; --fokus: #0f6b3f; /* tmavozelené pásy (horný pásik, komisia) */ --pas-bg: #0a4a2c; --pas-text: #f6f4ed; --pas-text-2: #c5d9cb; --pas-ciara: #2b6446; --pas-tl-bg: #f6f4ed; --pas-tl-text: #0a4a2c; --pas-tl-hover: #fffdf8; /* päť stavov dostupnosti: pozadie · text · krúžok · znak v krúžku · okraj */ --s-volne-bg: #dcefe2; --s-volne-text: #0a4a2c; --s-volne-kruh: #0f6b3f; --s-volne-znak: #fffdf8; --s-volne-okraj: #dcefe2; --s-ciastocne-bg: #fcefc9; --s-ciastocne-text: #4d3300; --s-ciastocne-kruh: #f2b02e; --s-ciastocne-znak: #072d1c; --s-ciastocne-okraj: #fcefc9; --s-od-bg: #ece8da; --s-od-text: #072d1c; --s-od-kruh: #44574c; --s-od-znak: #fffdf8; --s-od-okraj: #ece8da; --s-cakacka-bg: #0a4a2c; --s-cakacka-text: #fffdf8; --s-cakacka-kruh: #fffdf8; --s-cakacka-znak: #0a4a2c; --s-cakacka-okraj: #0a4a2c; --s-nedostupne-bg: #fffdf8; --s-nedostupne-text: #44574c; --s-nedostupne-kruh: #ece8da; --s-nedostupne-znak: #44574c; --s-nedostupne-okraj: #838b80; /* tiene */ --tien-1: 0 1px 2px rgb(7 45 28 / 0.06), 0 1px 1px rgb(7 45 28 / 0.04); --tien-2: 0 2px 4px rgb(7 45 28 / 0.06), 0 14px 30px rgb(7 45 28 / 0.11); /* písmo, rohy, rozmery */ --pismo-nadpis: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --pismo-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --roh-l: 18px; --roh-m: 12px; --roh-s: 9px; --okraj: 16px; --sirka: 1200px; --hlavicka: 60px; } html[data-rezim="tmavy"] .novy { color-scheme: dark; --brand: #3aa66d; --brand-tmava: #10402a; --ink: #eaf2ec; --panel: #0c1c14; --akcent: #f2b02e; --brand-hover: #4bb87e; --na-brand: #04170d; --brand-text: #74d3a0; --na-akcent: #072d1c; --ink-2: #a8bcae; --panel-2: #12271c; --karta: #152b20; /* Plocha pod fotkou je zámerne svetlá aj v tmavom režime (rovnaká hodnota ako v :root): čierne stroje ako PartyBox by sa na tmavozelenej stratili a fotky tak vyzerajú v oboch režimoch rovnako. */ --foto: #e2ded0; --na-foto: #44574c; --ciara: #294435; --ciara-silna: #6f8a7b; --fokus: #74d3a0; --pas-bg: #10402a; --pas-text: #eaf2ec; --pas-text-2: #b5cbbc; --pas-ciara: #2d6a4a; --pas-tl-bg: #eaf2ec; --pas-tl-text: #0a2a1a; --pas-tl-hover: #ffffff; --s-volne-bg: #173d2a; --s-volne-text: #bfe9d1; --s-volne-kruh: #3aa66d; --s-volne-znak: #04170d; --s-volne-okraj: #173d2a; --s-ciastocne-bg: #3d2f0a; --s-ciastocne-text: #f7dc9a; --s-ciastocne-kruh: #f2b02e; --s-ciastocne-znak: #072d1c; --s-ciastocne-okraj: #3d2f0a; --s-od-bg: #1d3427; --s-od-text: #eaf2ec; --s-od-kruh: #a8bcae; --s-od-znak: #0c1c14; --s-od-okraj: #1d3427; --s-cakacka-bg: #eaf2ec; --s-cakacka-text: #0a2a1a; --s-cakacka-kruh: #0a4a2c; --s-cakacka-znak: #eaf2ec; --s-cakacka-okraj: #eaf2ec; --s-nedostupne-bg: #152b20; --s-nedostupne-text: #a8bcae; --s-nedostupne-kruh: #20392c; --s-nedostupne-znak: #a8bcae; --s-nedostupne-okraj: #6f8a7b; --tien-1: 0 1px 2px rgb(0 0 0 / 0.35); --tien-2: 0 2px 4px rgb(0 0 0 / 0.35), 0 14px 30px rgb(0 0 0 / 0.45); } /* ===================================================================== 2. ZÁKLAD ===================================================================== */ .novy, .novy *, .novy *::before, .novy *::after, .novy *::after { box-sizing: border-box; } .novy { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } .novy { margin: 0; background: var(--panel); color: var(--ink); font: 400 1rem/1.55 var(--pismo-text); -webkit-font-smoothing: antialiased; } .novy h1, .novy h2, .novy h3, .novy p, .novy ul, .novy ol, .novy dl, .novy dd, .novy figure, .novy fieldset { margin: 0; padding: 0; } .novy ul, .novy ol { list-style: none; } .novy fieldset { border: 0; min-width: 0; } .novy img, .novy svg { display: block; max-width: 100%; } .novy a { color: var(--brand-text); text-underline-offset: 0.18em; } .novy button, .novy input, .novy select { font: inherit; color: inherit; } .novy [hidden] { display: none !important; } .novy :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; } .novy [id] { scroll-margin-top: calc(var(--hlavicka) + 16px); } .novy h1, .novy h2, .novy h3 { font-family: var(--pismo-nadpis); letter-spacing: -0.015em; text-wrap: balance; } .novy h1 { font-weight: 800; font-size: clamp(1.875rem, 1.32rem + 2.5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.025em; } .novy h2 { font-weight: 700; font-size: clamp(1.5rem, 1.26rem + 1.05vw, 2.125rem); line-height: 1.15; } .novy h3 { font-weight: 700; font-size: 1.0625rem; line-height: 1.28; } .novy .obal { width: 100%; max-width: var(--sirka); margin-inline: auto; padding-inline: var(--okraj); } .novy .sekcia { padding-block: 44px; } .novy .sekcia-hlava { display: grid; gap: 8px; margin-bottom: 22px; } .novy .sekcia-hlava p { color: var(--ink-2); max-width: 62ch; } .novy .len-citacka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .novy .preskoc { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 14px; border-radius: var(--roh-s); background: var(--brand); color: var(--na-brand); font-weight: 600; text-decoration: none; } .novy .preskoc:focus { top: 12px; } .novy .ikony-zoznam { position: absolute; width: 0; height: 0; overflow: hidden; } .novy .ikona { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* tlačidlá */ .novy .tlacidlo { 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 .tlacidlo:active { transform: translateY(1px); } .novy .tlacidlo-hlavne { background: var(--brand); color: var(--na-brand); } .novy .tlacidlo-hlavne:hover { background: var(--brand-hover); } .novy .tlacidlo-vedlajsie { background: transparent; border-color: var(--ciara-silna); color: var(--ink); } .novy .tlacidlo-vedlajsie:hover { background: var(--panel-2); } .novy .tlacidlo-cakacka { background: transparent; border-color: var(--brand-text); color: var(--brand-text); } .novy .tlacidlo-cakacka:hover { background: var(--panel-2); } .novy .tlacidlo-male { min-height: 40px; padding: 0 14px; font-size: 0.875rem; } /* polia formulára */ .novy .pole { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; } .novy .pole input { width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; background: var(--karta); color: var(--ink); border: 1.5px solid var(--ciara-silna); border-radius: var(--roh-m); font-weight: 400; font-size: 1rem; } .novy .pole input::placeholder { color: var(--ink-2); opacity: 1; } .novy .pole input:hover { border-color: var(--ink-2); } /* ===================================================================== 3. HORNÝ PÁSIK + HLAVIČKA ===================================================================== */ .novy .pasik { background: var(--pas-bg); color: var(--pas-text); font-size: 0.8125rem; } .novy .pasik a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 40px; padding-block: 6px; color: inherit; text-decoration: none; } .novy .pasik a:hover span:last-of-type { text-decoration: underline; } .novy .pasik-znacka { flex: none; padding: 3px 8px; border-radius: 999px; background: var(--akcent); color: var(--na-akcent); font: 700 0.8125rem/1.2 var(--pismo-nadpis); } .novy .hlavicka { position: sticky; top: 0; z-index: 40; background: var(--panel); border-bottom: 1px solid var(--ciara); } .novy .hlavicka-obal { position: relative; display: flex; align-items: center; gap: 10px; min-height: var(--hlavicka); } .novy .logo { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; color: var(--ink); font: 700 1.0625rem/1 var(--pismo-nadpis); letter-spacing: -0.02em; text-decoration: none; } .novy .logo-znak { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--roh-s); background: var(--brand); color: var(--na-brand); font-size: 1rem; } .novy .menu-velke { display: none; } .novy .menu-velke a, .novy .menu-male nav a { color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; } .novy .hlavicka .prihlasit { display: none; } .novy .menu-male { position: static; } .novy .menu-male summary { display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--ciara-silna); border-radius: var(--roh-m); cursor: pointer; list-style: none; } .novy .menu-male summary::-webkit-details-marker { display: none; } .novy .menu-male summary .ikona { width: 22px; height: 22px; } .novy .menu-male summary .i-zavriet, .novy .menu-male[open] summary .i-menu { display: none; } .novy .menu-male[open] summary .i-zavriet { display: block; } .novy .menu-male nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; padding: 8px var(--okraj) 16px; background: var(--karta); border: 1px solid var(--ciara); border-top: 0; border-radius: 0 0 var(--roh-l) var(--roh-l); box-shadow: var(--tien-2); } .novy .menu-male nav a:not(.tlacidlo) { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--ciara); } .novy .menu-male nav .tlacidlo { margin-top: 14px; } /* ===================================================================== 4. HERO — nízky, bez fotiek: nadpis, vyhľadávanie, tri fakty ===================================================================== */ .novy .hero { padding-block: 28px 32px; } .novy .hero-mriezka { display: grid; gap: 24px; } .novy .hero-text { display: grid; gap: 14px; align-content: start; } .novy .hero-text > p { color: var(--ink-2); font-size: 1.0625rem; max-width: 56ch; } .novy .hladanie { display: grid; gap: 14px; padding: 16px; background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-l); box-shadow: var(--tien-1); } .novy .prepinac legend { margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; } .novy .prepinac-volby { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--panel-2); border-radius: var(--roh-m); } .novy .prepinac-volby label { position: relative; display: block; cursor: pointer; } .novy .prepinac-volby input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .novy .prepinac-volby span { display: grid; place-items: center; min-height: 40px; padding: 0 6px; border-radius: var(--roh-s); color: var(--ink-2); font-size: 0.875rem; font-weight: 600; text-align: center; transition: background-color 0.16s ease, color 0.16s ease; } .novy .prepinac-volby input:checked + span { background: var(--brand); color: var(--na-brand); } .novy .prepinac-volby input:focus-visible + span { outline: 3px solid var(--fokus); outline-offset: 2px; } .novy .fakty { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; } .novy .fakty li { display: flex; align-items: center; gap: 10px; font-weight: 600; white-space: nowrap; } .novy .fakty .ikona { width: 22px; height: 22px; color: var(--brand-text); } /* ===================================================================== 5. PÄŤ STAVOV DOSTUPNOSTI — jeden systém: krúžok so znakom + text. Stav nikdy nenesie len farba: vždy aj znak a slovo. ===================================================================== */ .novy .stav { --bg: var(--s-od-bg); --text: var(--s-od-text); --kruh: var(--s-od-kruh); --znak: var(--s-od-znak); --okraj-stavu: var(--s-od-okraj); display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 11px 3px 4px; background: var(--bg); color: var(--text); border: 1px solid var(--okraj-stavu); border-radius: 999px; font: 600 0.8125rem/1.2 var(--pismo-text); white-space: nowrap; } .novy .stav-kruh { display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: var(--kruh); color: var(--znak); } .novy .stav-kruh .ikona { width: 13px; height: 13px; stroke-width: 2.25; } .novy [data-stav="volne"] { --bg: var(--s-volne-bg); --text: var(--s-volne-text); --kruh: var(--s-volne-kruh); --znak: var(--s-volne-znak); --okraj-stavu: var(--s-volne-okraj); } .novy [data-stav="ciastocne"] { --bg: var(--s-ciastocne-bg); --text: var(--s-ciastocne-text); --kruh: var(--s-ciastocne-kruh); --znak: var(--s-ciastocne-znak); --okraj-stavu: var(--s-ciastocne-okraj); } .novy [data-stav="od"] { --bg: var(--s-od-bg); --text: var(--s-od-text); --kruh: var(--s-od-kruh); --znak: var(--s-od-znak); --okraj-stavu: var(--s-od-okraj); } .novy [data-stav="cakacka"] { --bg: var(--s-cakacka-bg); --text: var(--s-cakacka-text); --kruh: var(--s-cakacka-kruh); --znak: var(--s-cakacka-znak); --okraj-stavu: var(--s-cakacka-okraj); } .novy [data-stav="nedostupne"] { --bg: var(--s-nedostupne-bg); --text: var(--s-nedostupne-text); --kruh: var(--s-nedostupne-kruh); --znak: var(--s-nedostupne-znak); --okraj-stavu: var(--s-nedostupne-okraj); } .novy .stav[data-stav="nedostupne"] { border-style: dashed; } /* ===================================================================== 6. PÁS „DNES VOĽNÉ" — vykreslí ho skript z dát dostupnosti. V HTML je skrytý (hidden); bez dát sa nikdy nezobrazí. ===================================================================== */ .novy .dnes { padding-bottom: 8px; } .novy .dnes-karta { display: grid; gap: 14px; padding: 16px; background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-l); box-shadow: var(--tien-1); } .novy .dnes-hlava { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; } .novy .dnes-hlava h2 { font-size: 1.25rem; } .novy .dnes-suhrn { font-weight: 600; } .novy .dnes-suhrn strong { font: 800 1.25rem/1 var(--pismo-nadpis); color: var(--brand-text); } .novy .dnes-cas { color: var(--ink-2); font-size: 0.8125rem; } .novy .odkaz-tl { padding: 0; background: none; border: 0; color: var(--brand-text); font-weight: 600; font-size: 0.875rem; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } .novy .dnes-zoznam, .novy .dnes-legenda { display: flex; gap: 8px; margin-inline: -16px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: thin; } .novy .dnes-polozka { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 12px 4px 5px; background: var(--panel); border: 1px solid var(--ciara); border-radius: 999px; color: var(--ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .novy .dnes-polozka:hover { border-color: var(--brand-text); } .novy .dnes-polozka .stav-kruh { background: var(--kruh); color: var(--znak); } .novy .dnes-legenda { padding-top: 12px; border-top: 1px solid var(--ciara); } .novy .stav-filter { cursor: pointer; min-height: 36px; transition: box-shadow 0.16s ease; } .novy .stav-filter:disabled { cursor: default; } .novy .stav-filter b { font-weight: 700; opacity: 0.85; } .novy .stav-filter[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--karta), 0 0 0 4px var(--fokus); } /* ===================================================================== 7. PONUKA — filtre a karty ===================================================================== */ .novy .filtre { display: flex; gap: 8px; margin-inline: calc(var(--okraj) * -1); padding: 2px var(--okraj) 8px; overflow-x: auto; scrollbar-width: thin; } .novy .filter { flex: none; min-height: 40px; padding: 0 16px; background: var(--karta); border: 1.5px solid var(--ciara); border-radius: 999px; color: var(--ink); font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; } .novy .filter:hover { border-color: var(--ciara-silna); } .novy .filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--panel); } .novy .ponuka-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 28px; margin-block: 10px 14px; color: var(--ink-2); font-size: 0.875rem; } .novy .vikend-poznamka { display: none; color: var(--ink); font-weight: 600; } .novy body[data-dlzka="vikend"] .vikend-poznamka { display: inline; } .novy .prazdne { padding: 28px 16px; border: 1.5px dashed var(--ciara-silna); border-radius: var(--roh-l); color: var(--ink-2); text-align: center; } .novy .karty { display: grid; gap: 12px; } .novy .karta { display: flex; min-width: 0; } .novy .karta article { flex: 1; min-width: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 12px 14px; grid-template-areas: "foto hlava" "udaje udaje" "ceny ceny" "pata pata"; padding: 14px; background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-l); box-shadow: var(--tien-1); transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease; } .novy .karta:target article { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--s-volne-bg), var(--tien-2); } .novy .karta-foto { grid-area: foto; align-self: start; display: block; aspect-ratio: 900 / 570; overflow: hidden; background: var(--foto); border-radius: var(--roh-s); } .novy .karta-foto { color: var(--na-foto); font-size: 0.75rem; line-height: 1.3; text-decoration: none; } /* Fotky strojov sú výrezy s priehľadným pozadím a rôznym pomerom strán (od 400×732 po 900×313). V ráme 900/570 sa preto nezrezávajú (contain + malý okraj) — cover by odrezal konce strojov. Výnimka .foto-plna: nepriehľadná fotka s vlastným pozadím vyplní celý rám. */ .novy .karta-foto img { width: 100%; height: 100%; padding: 4%; object-fit: contain; } .novy .karta-foto.foto-plna img { padding: 0; object-fit: cover; } .novy .karta-foto.bez-fotky img { display: none; } .novy .karta[data-stav="nedostupne"] .karta-foto img { opacity: 0.55; } .novy .karta-hlava { grid-area: hlava; display: grid; gap: 7px; align-content: start; justify-items: start; min-width: 0; } .novy .karta-stav { min-height: 28px; } .novy .karta h3 a { color: var(--ink); text-decoration: none; } .novy .karta h3 a:hover { color: var(--brand-text); text-decoration: underline; } .novy .nazov-pozn { display: block; margin-top: 3px; color: var(--ink-2); font: 400 0.8125rem/1.3 var(--pismo-text); letter-spacing: 0; } .novy .udaje { grid-area: udaje; display: grid; align-content: start; font-size: 0.8125rem; line-height: 1.35; } .novy .udaje div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 5px; border-top: 1px solid var(--ciara); } .novy .udaje dt { color: var(--ink-2); } .novy .udaje dd { font-weight: 600; text-align: right; white-space: nowrap; } .novy .ceny { grid-area: ceny; display: flex; align-items: flex-end; gap: 18px; padding-top: 2px; } .novy .cena { display: grid; gap: 3px; color: var(--ink-2); font-size: 0.8125rem; line-height: 1.2; } .novy .cena strong { color: var(--ink); font: 700 1.125rem/1 var(--pismo-nadpis); letter-spacing: -0.02em; transition: font-size 0.16s ease; } .novy body:not([data-dlzka="4h"]) .cena[data-cena="den"] strong, .novy body[data-dlzka="4h"] .cena[data-cena="4h"] strong { font-size: 1.75rem; font-weight: 800; } .novy .karta-pata { grid-area: pata; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 12px; border-top: 1px solid var(--ciara); } .novy .zaloha { color: var(--ink-2); font-size: 0.75rem; line-height: 1.3; white-space: nowrap; } /* „Zapísať do čakačky" je dlhšie než „Rezervovať": na obsadenej karte ide tlačidlo pod zálohu na celú šírku */ .novy .karta[data-stav="cakacka"] .karta-pata { flex-direction: column; align-items: stretch; } /* ===================================================================== 8. ČAKAČKA + TRI VÝHODY ===================================================================== */ .novy .cakacka-blok { background: var(--panel-2); } .novy .cakacka-mriezka { display: grid; gap: 26px; } .novy .cakacka-text { display: grid; gap: 14px; align-content: start; } .novy .cakacka-text p { color: var(--ink-2); max-width: 52ch; } .novy .cakacka-text .stav { justify-self: start; } .novy .poradie { display: grid; gap: 0; counter-reset: krok; } .novy .poradie li { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding-bottom: 22px; counter-increment: krok; } .novy .poradie li::before { content: counter(krok); grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--na-brand); font: 700 1rem/1 var(--pismo-nadpis); } .novy .poradie li::after { content: ""; position: absolute; left: 19px; top: 44px; bottom: 4px; width: 2px; background: var(--ciara-silna); } .novy .poradie li:last-child { padding-bottom: 0; } .novy .poradie li:last-child::after { display: none; } .novy .poradie h3 { padding-top: 8px; } .novy .poradie p { grid-column: 2; color: var(--ink-2); font-size: 0.9375rem; } .novy .sekcia-vyhody { padding-bottom: 4px; } .novy .vyhody { display: grid; gap: 12px; } .novy .vyhoda { display: grid; gap: 10px; align-content: start; padding: 20px; background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-l); } .novy .vyhoda > .ikona { width: 28px; height: 28px; color: var(--brand-text); } .novy .vyhoda p { color: var(--ink-2); font-size: 0.9375rem; } .novy .vyhoda-form { display: grid; grid-template-columns: minmax(0, 1fr) 108px; gap: 10px; margin-top: 6px; } .novy .vyhoda-form .tlacidlo { grid-column: 1 / -1; } .novy .vyhoda .tlacidlo { justify-self: start; } .novy .vyhoda-form .tlacidlo { justify-self: stretch; } /* ===================================================================== 9. AKO TO FUNGUJE · CENNÍK ===================================================================== */ .novy .kroky { display: grid; gap: 12px; counter-reset: k; } .novy .krok { display: grid; gap: 8px; align-content: start; padding: 20px; border: 1px solid var(--ciara); border-radius: var(--roh-l); counter-increment: k; } .novy .krok::before { content: counter(k); color: var(--brand-text); font: 800 2.5rem/1 var(--pismo-nadpis); letter-spacing: -0.04em; } .novy .krok p { color: var(--ink-2); } .novy .pod-krokmi { margin-top: 18px; } .novy .dlzky { display: grid; gap: 8px; margin-bottom: 18px; } .novy .dlzky li { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-m); } .novy .dlzky b { flex: none; font-family: var(--pismo-nadpis); } .novy .dlzky span { color: var(--ink-2); font-size: 0.9375rem; } .novy .tabulka-obal { overflow-x: auto; background: var(--karta); border: 1px solid var(--ciara); border-radius: var(--roh-l); } .novy .cennik { width: 100%; border-collapse: collapse; font-size: 0.875rem; } .novy .cennik th, .novy .cennik td { padding: 11px 10px; border-bottom: 1px solid var(--ciara); text-align: right; white-space: nowrap; } .novy .cennik th:first-child, .novy .cennik td:first-child { padding-left: 14px; text-align: left; white-space: normal; } .novy .cennik th:last-child, .novy .cennik td:last-child { padding-right: 14px; } .novy .cennik thead th { color: var(--ink-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .novy .cennik tbody tr:last-child td { border-bottom: 0; } .novy .cennik tbody tr:hover td { background: var(--panel); } .novy .cennik td:first-child a { color: var(--ink); font-weight: 600; text-decoration: none; } .novy .cennik td:first-child a:hover { color: var(--brand-text); text-decoration: underline; } .novy .cennik .c-den { font-weight: 700; } .novy .cennik .c-zaloha { color: var(--ink-2); } .novy .poznamka { margin-top: 14px; color: var(--ink-2); font-size: 0.875rem; } /* ===================================================================== 10. KOMISIA — jediný tmavozelený blok na stránke · PÄTIČKA ===================================================================== */ .novy .komisia { background: var(--pas-bg); color: var(--pas-text); } .novy .komisia-mriezka { display: grid; gap: 26px; } .novy .komisia-text { display: grid; gap: 14px; align-content: start; justify-items: start; } .novy .komisia-text p { color: var(--pas-text-2); max-width: 56ch; font-size: 1.0625rem; } .novy .komisia-text p b { color: var(--pas-text); } .novy .komisia .tlacidlo { background: var(--pas-tl-bg); color: var(--pas-tl-text); } .novy .komisia .tlacidlo:hover { background: var(--pas-tl-hover); } .novy .komisia :focus-visible { outline-color: var(--pas-text); } .novy .podiel { display: grid; gap: 4px; align-content: center; padding: 20px 22px; border: 1.5px solid var(--pas-ciara); border-radius: var(--roh-l); } .novy .podiel strong { font: 800 clamp(3.25rem, 2.2rem + 5vw, 5.5rem)/0.95 var(--pismo-nadpis); letter-spacing: -0.04em; } .novy .podiel span { color: var(--pas-text-2); font-weight: 600; } .novy .paticka { padding-block: 36px 0; border-top: 1px solid var(--ciara); font-size: 0.9375rem; } .novy .paticka-mriezka { display: grid; gap: 28px; padding-bottom: 32px; } .novy .paticka-znacka { display: grid; gap: 12px; align-content: start; justify-items: start; } .novy .paticka-znacka p { color: var(--ink-2); max-width: 40ch; } .novy .paticka h2 { margin-bottom: 10px; color: var(--ink-2); font: 600 0.75rem/1.2 var(--pismo-text); letter-spacing: 0.06em; text-transform: uppercase; } .novy .paticka-stlpec { display: grid; gap: 2px; align-content: start; justify-items: start; } .novy .paticka-stlpec a, .novy .paticka-stlpec span { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; color: var(--ink); text-decoration: none; } .novy .paticka-stlpec a:hover { color: var(--brand-text); text-decoration: underline; } .novy .paticka-stlpec .ikona { color: var(--brand-text); } .novy .paticka-spodok { border-top: 1px solid var(--ciara); } .novy .paticka-spodok .obal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding-block: 16px calc(16px + env(safe-area-inset-bottom)); color: var(--ink-2); font-size: 0.8125rem; } .novy .rezim-tl { display: none; } .novy .js .rezim-tl { display: inline-flex; } /* ===================================================================== 11. ŠIRŠIE OBRAZOVKY (mobil je východisko) ===================================================================== */ @media (max-width: 359px) { .novy .logo { gap: 7px; font-size: 0.9375rem; } .novy .logo-znak { width: 28px; height: 28px; } .novy .hlavicka-obal { gap: 8px; } .novy .hlavicka .tlacidlo-male { padding: 0 10px; font-size: 0.8125rem; } .novy .menu-male summary { width: 42px; height: 42px; } .novy .karta article { grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; } .novy .karta .stav { font-size: 0.75rem; padding-right: 9px; } } @media (max-width: 599px) { .novy .pasik .ikona { display: none; } } @media (min-width: 600px) { .novy { --okraj: 24px; } .novy .hladanie { padding: 20px; } .novy .pasik { font-size: 0.875rem; } .novy .dnes-zoznam, .novy .dnes-legenda { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } .novy .dnes-karta { padding: 20px; } .novy .filtre { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } .novy .karty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .novy .karta article { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "foto" "hlava" "udaje" "ceny" "pata"; gap: 12px; padding: 0 0 16px; overflow: hidden; } .novy .karta-foto { border-radius: 0; } .novy .karta-hlava, .novy .udaje, .novy .ceny, .novy .karta-pata { margin-inline: 16px; } .novy .karta-hlava { margin-top: 2px; } .novy .kroky { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .novy .vyhody { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; } .novy .vyhoda-dovoz { grid-row: 1 / span 2; } .novy .dlzky { grid-template-columns: repeat(3, minmax(0, 1fr)); } .novy .dlzky li { display: grid; gap: 2px; } .novy .cennik { font-size: 0.9375rem; } .novy .cennik th, .novy .cennik td { padding-inline: 16px; } .novy .cennik th:first-child, .novy .cennik td:first-child { padding-left: 20px; } .novy .cennik th:last-child, .novy .cennik td:last-child { padding-right: 20px; } .novy .paticka-mriezka { grid-template-columns: 1.2fr 0.9fr 1.3fr; } } @media (min-width: 900px) { .novy { --okraj: 32px; --hlavicka: 68px; } .novy .sekcia { padding-block: 60px; } .novy .sekcia-vyhody { padding-bottom: 8px; } .novy .sekcia-hlava { margin-bottom: 28px; } .novy .hero { padding-block: 56px 48px; } .novy .hero-mriezka { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; } .novy .hero-text { gap: 18px; } .novy .hero-text > p { font-size: 1.125rem; } .novy .fakty { margin-top: 10px; } .novy .hladanie { padding: 24px; gap: 16px; } .novy .karty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .novy .cakacka-mriezka, .novy .komisia-mriezka { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .novy .komisia-mriezka { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } .novy .podiel { justify-self: end; min-width: 320px; padding: 32px 36px; } .novy .vyhoda, .novy .krok { padding: 26px; } .novy .vyhoda-dovoz { padding: 32px; gap: 12px; } .novy .vyhoda-dovoz h3 { font-size: 1.375rem; } .novy .vyhoda-dovoz .vyhoda-form { grid-template-columns: minmax(0, 1fr) 130px; max-width: 460px; margin-top: 12px; } .novy .cennik-mriezka { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 32px; align-items: start; } .novy .cennik-mriezka .dlzky { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; } } @media (min-width: 1180px) { .novy .karty { grid-template-columns: repeat(4, minmax(0, 1fr)); } .novy .menu-male { display: none; } .novy .menu-velke { display: flex; align-items: center; gap: 16px; margin-right: 10px; font-size: 0.875rem; } .novy .menu-velke a { padding-block: 8px; border-bottom: 2px solid transparent; } .novy .menu-velke a:hover, .novy .menu-velke a[aria-current="page"] { border-bottom-color: var(--brand-text); } .novy .logo { margin-right: auto; } .novy .hlavicka .prihlasit { display: inline-flex; } } @media (hover: hover) and (pointer: fine) { .novy .karta article:hover { transform: translateY(-3px); box-shadow: var(--tien-2); border-color: var(--ciara-silna); } } @media (prefers-reduced-motion: reduce) { .novy { scroll-behavior: auto; } .novy, .novy *, .novy *::before, .novy *::after, .novy *::after { transition: none !important; animation: none !important; } } /* ---- marker: oprava-po-main ---------------------------------------- main.css ma niekolko HOLYCH prvkovych pravidiel (footer, section, a...). Predpona .novy ich sama neprebije: kde navrh farbu vobec nenastavuje, zostane platit stara. V paticke to bolo zle citatelne - tmave pozadie z main.css (footer { background: var(--brand-ink) }) a k tomu tmavy text z navrhu, dokopy 1,9 : 1. Niektore odkazy mali dokonca 1,0 : 1, cize boli uplne neviditelne. Navrh pocita s patickou na beznom pozadi stranky a s beznym textom. */ .novy footer.paticka { margin-top: 0; background: transparent; color: inherit; } /* ---- marker: oprava-po-main-2 -------------------------------------- Dalsie tri miesta, kde presvital stary main.css. Vsetky maju rovnaku pricinu ako paticka: navrh tam vlastnost vobec nenastavuje, takze predpona .novy nema co prebit a plati stare pravidlo. */ /* 1. Podnadpis v hero bol sedy (--ink-2) na tmavozelenom pozadi, ktore sem dava .hero::before z main.css. Nedalo sa to citat. */ .novy .hero-text > p { color: var(--pas-text-2); } /* 2. main.css kresli k .stav este jednu bodku cez ::before, takze pri stitkoch boli znaky dva vedla seba (bodka aj fajka z navrhu). */ .novy .stav::before { content: none; display: none; } /* 3. Plocha pod fotkou bola bezova, ale dve fotky maju vlastne biele pozadie (multibruska, nitovacie kliestie) a svietili ako biely obdlznik. Biela plocha sa hodi k obom - vyrezane stroje aj fotky s bielym pozadim na nej vyzeraju rovnako. */ .novy { --foto: #ffffff; } html[data-rezim="tmavy"] .novy { --foto: #ffffff; } /* ---- marker: oprava-po-main-3 -------------------------------------- Tretia davka toho isteho. Popisky vo vyhladavacej karte v hero (Aky stroj hladate / Datum / Dlzka prenajmu) mali z main.css farbu rgb(243,246,239) - skoro bielu, urcenu pre tmave panely. Na bielej karte to bolo 1,07 : 1, cize prakticky neviditelne. Na mobile to bilo do oci najviac, lebo tam je karta cez celu sirku. */ .novy .hladanie label, .novy .hladanie legend, .novy .hladanie label > span { color: var(--ink-2); } /* Pole s datumom na iPhone: Safari mu necha vlastnu minimalnu sirku podla obsahu a pole potom prerastie kartu. V Chrome sa to neprejavi, preto to test nechytil - je to znama odchylka iOS. */ .novy .hladanie input[type="date"] { -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } /* Poistka: nic na uvodnej stranke nesmie rozsirit telo do strany. */ .novy { overflow-x: clip; } /* ===================================================================== marker: oprava-po-main-4 Navrh ma v zaklade `button, input, select { color: inherit }`. Pod predponou je to `.novy button` (0,1,1) a to PREBIJE `.btn-primary` z main.css (0,1,0) - tlacidlo