/* ===================================================================== www.redizajnwebu.sk — štýly Zvláštnosť tohto webu: má DVE kože. Prepínajú sa atribútom na : moderná verzia — východisková ukážka webu z rokov 2010 – 2015 §1 – §14 popisujú novú verziu. §15 je kompletná stará koža: nič nepresúva, len prekrýva farby, písmo, rámy a rozloženie. Vďaka tomu sa dá prepnúť celá stránka jedným kliknutím a je vidieť presne to, čo zákazník kupuje. OBSAH §1 premenné a reset §9 proces (časová os) §2 typografia §10 referencie §3 hlavička a navigácia §11 FAQ §4 tlačidlá §12 formuláre a sprievodca §5 hero + prepínač verzií §13 pätička §6 karty, zoznamy, čísla §14 drobnosti a právne stránky §7 posuvník predtým/potom §15 STARÁ VERZIA + plávajúci prepínač §8 cenník §16 responzívnosť, pohyb, tlač ===================================================================== */ /* ===================================================================== */ /* §1 PREMENNÉ A RESET */ /* ===================================================================== */ :root { /* nová verzia */ --bg: #ffffff; --paper: #f1f6f4; --paper-2: #e7efec; --ink: #0c1a16; --muted: #5d6b66; --line: #dde7e3; --green: #0fa97b; /* hlavná akcentová — interakcia, CTA */ --green-d: #0a7d5b; --green-l: #2fdca4; --green-w: #e6f7f1; /* veľmi svetlé pozadie akcentu */ --night: #0b1a17; /* tmavé sekcie */ --night-2: #12261f; --amber: #f5a524; /* výstraha / „starý web" upozornenie */ --old: #8f97a3; /* farba reprezentujúca starý web */ --ok: #0fa97b; --err: #d64545; --wrap: 1240px; --gut: clamp(18px, 4vw, 40px); --nav-h: 78px; --nav-h-s: 62px; --r: 18px; /* rádius kariet */ --r-s: 12px; --r-p: 999px; --sh: 0 1px 2px rgba(12, 26, 22, .05), 0 8px 24px rgba(12, 26, 22, .06); --sh-l: 0 2px 6px rgba(12, 26, 22, .06), 0 24px 60px rgba(12, 26, 22, .12); --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace; --t: .28s cubic-bezier(.4, .1, .2, 1); } *, *::before, *::after { box-sizing: border-box; } /* .btn má display:inline-flex a prebilo by univerzálne pravidlo prehliadača pre [hidden] — tlačidlá sprievodcu by potom zostali viditeľné. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* pri fixnej lište musí mať každý cieľ kotvy odsadenie, inak skončí pod ňou */ [id] { scroll-margin-top: calc(var(--nav-h) + 20px); } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 clamp(15.5px, .35vw + 15px, 17px)/1.68 var(--sans); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; /* nie anywhere — to láme slová aj keď netreba */ } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--green-d); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--green); } :focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 4px; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--r-s) 0; font-weight: 700; } .skip:focus { left: 0; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .sec { padding: clamp(56px, 8vw, 104px) 0; } .sec.tight { padding: clamp(40px, 5vw, 64px) 0; } .sec.paper { background: var(--paper); } .sec.night { background: var(--night); color: #dfeae6; } .sec.night h2, .sec.night h3 { color: #fff; } .sec.night .muted, .sec.night .lead { color: #a9bdb7; } /* ===================================================================== */ /* §2 TYPOGRAFIA */ /* ===================================================================== */ h1, h2, h3, h4 { margin: 0 0 .5em; font-weight: 800; letter-spacing: -.02em; /* rozloží riadky rovnomerne — na mobile inak zostávalo posledné slovo samotné na riadku ("… nestoja / nič") */ text-wrap: balance; } /* slovenská diakritika potrebuje aspoň 1.09 — pri 1.04 sa Á/É trafí do čiarky riadka nad ním */ h1 { font-size: clamp(2.15rem, 5.2vw, 3.9rem); line-height: 1.09; } h2 { font-size: clamp(1.65rem, 3.2vw, 2.5rem); line-height: 1.16; } h3 { font-size: clamp(1.1rem, 1.5vw, 1.32rem); line-height: 1.3; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .lead { font-size: clamp(1.03rem, 1.3vw, 1.2rem); line-height: 1.62; color: var(--muted); max-width: 62ch; } .muted { color: var(--muted); } .grn { color: var(--green-d); } .nowrap { white-space: nowrap; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 700 .74rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--green-d); background: var(--green-w); border: 1px solid rgba(15, 169, 123, .25); padding: 8px 14px; border-radius: var(--r-p); margin-bottom: 18px; } .eyebrow svg { width: 15px; height: 15px; flex: 0 0 auto; } .sec.night .eyebrow { color: var(--green-l); background: rgba(47, 220, 164, .1); border-color: rgba(47, 220, 164, .28); } /* podčiarknutie časti nadpisu — signatúra webu: prechod starý → nový */ .uline { /* Podčiarknutie je POZADIE, nie ::after — pseudoprvok s white-space:nowrap pretekal z

von, keď bol zvýraznený riadok dlhší než ten nad ním. Takto sa zalomí spolu s textom a podčiarkne obe časti. / display: inline; padding-bottom: .06em; background-image: linear-gradient(90deg, var(--old) 0 40%, var(--green) 55% 100%); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% .11em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .sec-head { max-width: 74ch; margin-bottom: clamp(28px, 4vw, 48px); } .sec-head.center { margin-inline: auto; text-align: center; } .sec-head.center .lead { margin-inline: auto; } / ===================================================================== / / §3 HLAVIČKA A NAVIGÁCIA / / ===================================================================== / .hdr { position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--nav-h); background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: height var(--t), background var(--t), box-shadow var(--t), border-color var(--t); } .hdr.is-stuck { height: var(--nav-h-s); background: rgba(255, 255, 255, .95); border-bottom-color: var(--line); box-shadow: 0 6px 24px rgba(12, 26, 22, .07); } / prúžok priebehu čítania na spodnej hrane lišty / .hdrp { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform: scaleX(var(--p, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--old), var(--green)); will-change: transform; } .hdrin { height: 100%; display: flex; align-items: center; gap: 20px; } .brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex: 0 0 auto; } .brand img { width: 34px; height: 34px; transition: width var(--t), height var(--t); } .hdr.is-stuck .brand img { width: 29px; height: 29px; } .brandt { font: 800 1.06rem/1 var(--sans); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; } .brandt i { font-style: normal; color: var(--green); } .brandt s { text-decoration: none; color: var(--old); font-weight: 400; } .nav { margin-left: auto; position: relative; display: flex; align-items: center; gap: 2px; } / posuvný indikátor pod odkazmi — JS píše --x a --w / .navind { position: absolute; left: 0; bottom: 4px; height: 3px; width: 1px; border-radius: 999px; background: var(--green); transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); transform-origin: 0 50%; transition: transform .34s cubic-bezier(.4, .1, .2, 1); pointer-events: none; } .nl { position: relative; display: block; padding: 10px 13px; border-radius: var(--r-s); font: 600 .95rem/1.4 var(--sans); color: var(--ink); text-decoration: none; white-space: nowrap; } .nl[aria-current="page"] { color: var(--green-d); } / text-roll: maska je VNÚTRI odkazu (odkaz má padding, cez ktorý by druhá kópia presvitala) a posúva sa o JEDEN riadok, nie o 100 % — roll je dva riadky vysoký, takže -100 % by vysunulo obe kópie a odkaz by zbelel. / .nl-mask { display: block; overflow: hidden; height: var(--nl-line, 1.4em); } .nl-roll { display: block; transition: transform .32s cubic-bezier(.4, .1, .2, 1); } .nl-roll span { display: block; height: var(--nl-line, 1.4em); } .nl-roll span + span { color: var(--green); } .nl:hover .nl-roll, .nl:focus-visible .nl-roll { transform: translateY(calc(-1 var(--nl-line, 1.4em))); } .hdr .btn-cta { margin-left: 10px; flex: 0 0 auto; } .burger { display: none; width: 44px; height: 44px; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--r-s); cursor: pointer; padding: 0; align-items: center; justify-content: center; } .burger i { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; position: relative; transition: transform var(--t), background var(--t); } .burger i::before, .burger i::after { content: ''; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t); } .burger i::before { top: -6px; } .burger i::after { top: 6px; } .burger[aria-expanded="true"] i { background: transparent; } .burger[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); } .burger[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); } /* celoobrazovkový mobilný panel — otvára sa diagonálnym clip-path stieraním / .drawer { position: fixed; inset: 0; z-index: 190; background: var(--night); color: #fff; padding: calc(var(--nav-h) + 24px) var(--gut) 32px; overflow-y: auto; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path .46s cubic-bezier(.4, .1, .2, 1); } .drawer.is-open { clip-path: polygon(0 0, 130% 0, 100% 100%, 0 100%); } / Kým je menu otvorené, lišta nad ním nesmie svietiť nasvetlo — inak nad tmavým panelom visí svetlý pruh. Triedu pridáva skript na . / .je-menu .hdr { background: var(--night); border-bottom-color: transparent; box-shadow: none; } .je-menu .brandt { color: #fff; } .je-menu .brandt s { color: #7d8f89; } .je-menu .burger { border-color: rgba(255, 255, 255, .32); } .je-menu .burger i, .je-menu .burger i::before, .je-menu .burger i::after { background: #fff; } .je-menu .burger[aria-expanded="true"] i { background: transparent; } .je-menu .hdrp { opacity: 0; } / plávajúci prepínač by prekrýval spodok menu / .je-menu .swap-fix { display: none; } .drawer a { display: block; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; text-decoration: none; font: 700 1.35rem/1.3 var(--sans); letter-spacing: -.02em; opacity: 0; transform: translateY(14px); transition: opacity .3s ease calc(var(--i, 0) 55ms + .12s), transform .3s ease calc(var(--i, 0) * 55ms + .12s); } .drawer.is-open a { opacity: 1; transform: none; } .drawer a[aria-current="page"] { color: var(--green-l); } /* `.drawer a` vyššie nastavuje display:block, padding:15px 0, veľké písmo a spodnú linku — tlačidlo z toho dedilo všetko a vyzeralo ako odkaz s odlomenou šípkou. Preto sa tu resetuje výslovne. / .drawer .btn { display: flex; width: 100%; margin-top: 24px; padding: 16px 22px; border-bottom: 0; border-radius: var(--r-p); font: 700 1rem/1.2 var(--sans); letter-spacing: 0; justify-content: center; } .drawer .btn svg { width: 18px; height: 18px; } .drawerfoot { margin-top: 26px; color: #9db3ad; font-size: .92rem; } .drawerfoot a { display: inline; padding: 0; border: 0; font: inherit; color: var(--green-l); opacity: 1; transform: none; } / ===================================================================== / / §4 TLAČIDLÁ / / ===================================================================== / .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 24px; border-radius: var(--r-p); font: 700 .97rem/1.2 var(--sans); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: transform var(--t), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t); white-space: nowrap; } .btn svg { width: 17px; height: 17px; flex: 0 0 auto; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } / prebehnutie svetla — podľa priania sa dáva na VŠETKY tlačidlá, nielen na to jedno v hlavičke / .btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .42) 50%, transparent 70%); transform: translateX(-130%); transition: transform .62s ease; pointer-events: none; } .btn:hover::after { transform: translateX(130%); } .btn-primary { background: var(--green); color: #fff; box-shadow: 0 8px 22px rgba(15, 169, 123, .3); } .btn-primary:hover { background: var(--green-d); color: #fff; box-shadow: 0 12px 30px rgba(15, 169, 123, .38); } .btn-dark { background: var(--ink); color: #fff; } .btn-dark:hover { background: #16302a; color: #fff; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--green); color: var(--green-d); background: var(--green-w); } .sec.night .btn-ghost, .cta-band .btn-ghost, .drawer .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .3); } .sec.night .btn-ghost:hover, .cta-band .btn-ghost:hover, .drawer .btn-ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; } .btn-cta { background: var(--green); color: #fff; padding: 11px 20px; font-size: .92rem; } .btn-cta:hover { background: var(--green-d); color: #fff; } .btn-sm { padding: 10px 18px; font-size: .88rem; } .btn-lg { padding: 17px 30px; font-size: 1.03rem; } .btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } / ===================================================================== / / §5 HERO + PREPÍNAČ VERZIÍ / / ===================================================================== / .hero { position: relative; padding: calc(var(--nav-h) + clamp(38px, 6vw, 76px)) 0 clamp(48px, 7vw, 88px); overflow: hidden; } / Dekoračná plocha musí presahovať sekciu na každej strane, kde sa nevytráca — inak jej hrana nakreslí cez návrh rovnú čiaru. / .hero::before { content: ''; position: absolute; top: -30%; right: -20%; width: 70%; height: 150%; background: radial-gradient(closest-side, rgba(15, 169, 123, .14), transparent 72%); pointer-events: none; } .herogrid { position: relative; display: grid; gap: clamp(32px, 5vw, 56px); grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; } .hero h1 { margin-bottom: .42em; / hero má len ~55 % šírky, tak sa nadpis nezmestí na dva riadky pri rovnakej veľkosti ako na ostatných stránkach / font-size: clamp(2.05rem, 3.5vw, 3.15rem); } .hero .lead { margin-bottom: 26px; } .heroprice { display: inline-flex; align-items: baseline; gap: 10px; margin: 0 0 22px; font: 800 1.05rem/1 var(--sans); } .heroprice b { font-size: 2.1rem; letter-spacing: -.03em; color: var(--green-d); white-space: nowrap; } .heroprice span { color: var(--muted); font-weight: 500; font-size: .92rem; line-height: 1.5; / `.heroprice` má v skratke font line-height 1 / } .herotrust { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .9rem; color: var(--muted); } .herotrust b { color: var(--ink); } / --- prepínač celej stránky (stará / nová verzia) ------------------- / .swap { display: inline-flex; align-items: center; gap: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-p); padding: 5px; } .swap button { appearance: none; border: 0; cursor: pointer; background: transparent; color: var(--muted); font: 700 .85rem/1 var(--sans); padding: 10px 16px; border-radius: var(--r-p); transition: background var(--t), color var(--t), box-shadow var(--t); white-space: nowrap; } .swap button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(12, 26, 22, .12); } .swap button[data-skin="nova"][aria-pressed="true"] { color: var(--green-d); } .swap-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 24px; } .swap-wrap .hint { font-size: .85rem; color: var(--muted); max-width: 34ch; } / --- náhľad webu v hero (mini maketa) ------------------------------- / .mock { border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-l); background: #fff; border: 1px solid var(--line); } .mockbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); } .mockbar i { width: 9px; height: 9px; border-radius: 50%; background: #c6d2ce; display: block; } .mockurl { margin-left: 8px; flex: 1; min-width: 0; background: #fff; border-radius: 999px; padding: 5px 12px; font: 500 .72rem/1.4 var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mockbody { padding: 20px; } / ===================================================================== / / §6 KARTY, ZOZNAMY, ČÍSLA / / ===================================================================== / .grid { display: grid; gap: clamp(16px, 2.2vw, 24px); } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(22px, 2.6vw, 30px); transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .card:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: rgba(15, 169, 123, .35); } .card h3 { margin-bottom: .45em; } .card p:last-child { margin-bottom: 0; } .sec.paper .card { background: #fff; } .sec.night .card { background: var(--night-2); border-color: rgba(255, 255, 255, .1); color: #c8dad5; } .sec.night .card:hover { border-color: rgba(47, 220, 164, .4); } .ico { width: 46px; height: 46px; border-radius: var(--r-s); display: grid; place-items: center; margin-bottom: 16px; background: var(--green-w); color: var(--green-d); } .ico svg { width: 22px; height: 22px; } .sec.night .ico { background: rgba(47, 220, 164, .13); color: var(--green-l); } / problémy starého webu — sivé, „zhasnuté" karty / .card.old { background: var(--paper); border-color: var(--line); } .card.old .ico { background: #e3e7ea; color: #6c7681; } .card.old:hover { border-color: var(--old); } / zoznam s odškrtnutím — .checks li NESMIE byť flex: vnútri by sa stal samostatnou položkou a veta by sa rozpadla do stĺpcov / .checks { list-style: none; margin: 0; padding: 0; } .checks li { position: relative; padding: 0 0 0 30px; margin-bottom: 11px; line-height: 1.55; } .checks li::before { content: ''; position: absolute; left: 0; top: .42em; width: 17px; height: 17px; border-radius: 50%; background: var(--green-w) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7d5b' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; } .checks.crosses li::before { background: #f0e3e3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a4a' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center/10px no-repeat; } .sec.night .checks li::before { background-color: rgba(47, 220, 164, .16); } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); } .stat { padding: 22px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); text-align: center; } .stat b { display: block; font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 800; letter-spacing: -.03em; color: var(--green-d); line-height: 1.1; white-space: nowrap; } .stat span { display: block; margin-top: 6px; font-size: .87rem; color: var(--muted); } .sec.night .stat { background: var(--night-2); border-color: rgba(255, 255, 255, .1); } .sec.night .stat b { color: var(--green-l); } .sec.night .stat span { color: #a9bdb7; } / dvojica „predtým / potom" v texte / .ba-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 26px); } .ba-col { border-radius: var(--r); padding: clamp(20px, 2.6vw, 28px); border: 1px solid var(--line); } .ba-col.before { background: var(--paper); } .ba-col.after { background: var(--green-w); border-color: rgba(15, 169, 123, .3); } .ba-col h3 { display: flex; align-items: center; gap: 9px; } .ba-col .tag { font: 700 .68rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; } .ba-col.before .tag { background: #dde2e6; color: #566068; } .ba-col.after .tag { background: var(--green); color: #fff; } / animácia odkrývania pri scrollovaní / .rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; } .rv.is-in { opacity: 1; transform: none; } / ===================================================================== / / §7 POSUVNÍK PREDTÝM / POTOM / / ===================================================================== / .ba { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-l); background: #fff; user-select: none; / pan-y dovolí ťahať jazdec vodorovne a stránku zvisle. POZOR: zároveň ZAKÁŽE vodorovné posúvanie stránky prstom nad týmto prvkom — v starej verzii (pevná šírka 980 px) sa tak návštevník zasekol a nevedel sa vrátiť doľava. Preto sa pan-y ruší všade, kde jazdec nie je aktívny. / touch-action: pan-y; } .bapane { position: relative; } .bapane--new { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 0 0 var(--split, 50%)); } .bahandle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 3px; margin-left: -1.5px; background: var(--green); cursor: col-resize; z-index: 4; } .bahandle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--green); box-shadow: 0 4px 16px rgba(12, 26, 22, .25); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px; } .ba input[type="range"] { position: absolute; inset: auto 0 0 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: col-resize; } .balbl { position: absolute; bottom: 14px; z-index: 3; font: 700 .7rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; } .balbl--l { left: 14px; background: rgba(12, 26, 22, .78); color: #fff; } .balbl--r { right: 14px; background: var(--green); color: #fff; } / --- makety webu kreslené v HTML (žiadne obrázky) ------------------- / .site { height: 420px; overflow: hidden; } / maketa STARÉHO webu — vzhľad rokov 2008 – 2013: lesklá modrá hlavička s odrazom, záložkové menu, banner s leskom, bočný panel s orámovanými riadkami a vypuklé tlačidlo / .site--old { background: #e9edf1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23dfe4ea' stroke-width='1'/%3E%3C/svg%3E"); font-family: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif; font-size: 11px; color: #444; } .site--old .s-top { position: relative; overflow: hidden; display: flex; align-items: center; gap: 9px; padding: 11px 13px; background: #1f5fa8 linear-gradient(#4a97dd 0%, #2a6db5 50%, #1f5fa8 51%, #17497f 100%); border-bottom: 3px solid #10365e; color: #fff; } / svetelný odraz cez hornú polovicu — bez neho to nie je „web 2.0“. Je to ::before, aby sa vykreslil PRED textom; keby to bolo ::after, text by potreboval z-index a ten ho vytiahne nad pravú polovicu posuvníka (presne to sa raz stalo). / .site--old .s-top::before { content: ''; position: absolute; left: -10%; right: -10%; top: -60%; height: 110%; border-radius: 0 0 50% 50%; background: rgba(255, 255, 255, .16); pointer-events: none; } .site--old .s-logo { width: 24px; height: 24px; border-radius: 3px; flex: 0 0 auto; background: linear-gradient(#ffffff, #cfe0f2); border: 1px solid #10365e; box-shadow: inset 0 1px 0 #fff; } .site--old .s-brand { font: bold 13px/1 Verdana, Geneva, "DejaVu Sans", sans-serif; letter-spacing: .2px; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); position: relative; } .site--old .s-tel { margin-left: auto; font-size: 10px; opacity: .95; position: relative; } .site--old .s-nav { display: flex; gap: 2px; padding: 5px 9px 0; background: linear-gradient(#f2f5f9, #dbe2ea); border-bottom: 1px solid #a9b6c4; } .site--old .s-nav span { padding: 5px 9px; border: 1px solid #a9b6c4; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#ffffff, #e4ebf2); color: #3d4a58; font-size: 10px; } .site--old .s-nav span.on { background: #fff; color: #16497f; font-weight: bold; box-shadow: inset 0 1px 0 #fff; } .site--old .s-banner { position: relative; overflow: hidden; margin: 9px; height: 58px; border-radius: 3px; border: 1px solid #9db5cd; background: #b9d3ee linear-gradient(#cfe1f3 0%, #aecbe8 50%, #9cc0e3 51%, #b9d3ee 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); display: flex; align-items: center; padding: 0 13px; font: bold 13px/1.2 Verdana, Geneva, "DejaVu Sans", sans-serif; color: #1b4468; text-shadow: 0 1px 0 rgba(255, 255, 255, .75); } .site--old .s-body { display: flex; gap: 9px; padding: 0 9px 9px; } .site--old .s-side { width: 112px; flex: 0 0 auto; border: 1px solid #b3c0cd; border-radius: 3px; background: linear-gradient(#ffffff, #eef3f8); box-shadow: inset 0 0 0 1px #fff; padding: 0; font-size: 10px; overflow: hidden; } .site--old .s-side b { display: block; color: #fff; font-size: 10px; padding: 6px 8px; background: #1f5fa8 linear-gradient(#4a97dd 0%, #2a6db5 50%, #1f5fa8 51%, #17497f 100%); text-shadow: 0 1px 1px rgba(0, 0, 0, .35); } .site--old .s-side .s-row { padding: 6px 8px; border-bottom: 1px solid #dde4ec; } .site--old .s-main { flex: 1; min-width: 0; border: 1px solid #b3c0cd; border-radius: 3px; background: #fff; box-shadow: inset 0 0 0 1px #fff; padding: 11px; } .site--old .s-h { font: bold 14px/1.25 Verdana, Geneva, "DejaVu Sans", sans-serif; color: #1b4468; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 2px solid #1f5fa8; } .site--old .s-l { height: 6px; background: #dfe5ec; margin-bottom: 6px; border-radius: 2px; } .site--old .s-l.w70 { width: 70%; } .site--old .s-l.w50 { width: 50%; } .site--old .s-l.w85 { width: 85%; } .site--old .s-btn { display: inline-block; margin-top: 9px; padding: 6px 13px; border-radius: 3px; border: 1px solid #123b66; background: #1f5fa8 linear-gradient(#6fb3ea 0%, #3d8ad4 50%, #1f5fa8 51%, #17497f 100%); color: #fff; font: bold 10px/1 Verdana, Geneva, "DejaVu Sans", sans-serif; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .25); } .site--old .s-boxy { display: flex; gap: 7px; margin-top: 11px; } .site--old .s-box { flex: 1; border: 1px solid #b3c0cd; border-radius: 3px; background: linear-gradient(#ffffff, #f0f4f9); box-shadow: inset 0 0 0 1px #fff; padding: 7px; } .site--old .s-box i { display: block; width: 16px; height: 16px; border-radius: 3px; background: linear-gradient(#e8f2fc, #c4dcf3); border: 1px solid #a7c6e6; margin-bottom: 6px; } / maketa NOVÉHO webu / .site--new { background: #fff; font-family: var(--sans); } .site--new .s-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); } .site--new .s-logo { width: 24px; height: 24px; border-radius: 7px; background: var(--green); flex: 0 0 auto; } .site--new .s-navi { margin-left: auto; display: flex; gap: 14px; } .site--new .s-navi i { display: block; width: 42px; height: 7px; border-radius: 4px; background: var(--paper-2); } .site--new .s-pill { width: 74px; height: 26px; border-radius: 999px; background: var(--green); } .site--new .s-hero { padding: 26px 18px 18px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: center; } .site--new .s-shot { border-radius: 12px; background: var(--green-w); border: 1px solid rgba(15, 169, 123, .25); aspect-ratio: 4 / 3; display: grid; place-items: center; } .site--new .s-shot span { width: 34px; height: 34px; border-radius: 10px; background: var(--green); display: block; } .site--new .s-h { font: 800 26px/1.15 var(--sans); letter-spacing: -.03em; color: var(--ink); margin-bottom: 10px; } .site--new .s-h em { font-style: normal; color: var(--green-d); } .site--new .s-l { height: 8px; background: var(--paper-2); border-radius: 5px; margin-bottom: 8px; } .site--new .s-l.w70 { width: 70%; } .site--new .s-l.w50 { width: 50%; } .site--new .s-l.w85 { width: 85%; } .site--new .s-btn { display: inline-block; margin-top: 12px; padding: 10px 20px; background: var(--green); color: #fff; border-radius: 999px; font: 700 12px/1 var(--sans); } .site--new .s-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 18px; } .site--new .s-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .site--new .s-card i { display: block; width: 22px; height: 22px; border-radius: 7px; background: var(--green-w); margin-bottom: 10px; } / ===================================================================== / / §8 CENNÍK / / ===================================================================== / .price { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .price:hover { transform: translateY(-4px); box-shadow: var(--sh-l); } .price.hi { border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 169, 123, .12); } .pricebadge { position: absolute; top: -13px; left: clamp(24px, 3vw, 34px); background: var(--green); color: #fff; font: 700 .7rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; } .price h3 { margin-bottom: .25em; } .pricewho { color: var(--muted); font-size: .9rem; margin-bottom: 18px; } .pricev { font: 800 clamp(2rem, 3vw, 2.6rem)/1 var(--sans); letter-spacing: -.035em; color: var(--ink); white-space: nowrap; } .pricen { font-size: .82rem; color: var(--muted); margin: 8px 0 20px; } .price .checks { margin-bottom: 24px; font-size: .93rem; } .price .btn { margin-top: auto; width: 100%; } .tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; } table.tbl { width: 100%; border-collapse: collapse; min-width: 560px; } table.tbl th, table.tbl td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); vertical-align: top; } table.tbl th { font: 700 .76rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--paper); } table.tbl tr:last-child td { border-bottom: 0; } table.tbl td.p { font-weight: 800; color: var(--green-d); white-space: nowrap; } table.tbl small { display: block; color: var(--muted); font-weight: 400; margin-top: 3px; } / ===================================================================== / / §9 PROCES — ČASOVÁ OS / / ===================================================================== / .steps { counter-reset: k; display: grid; gap: 0; } .step { position: relative; padding: 0 0 34px 62px; counter-increment: k; } .step::before { content: counter(k, decimal-leading-zero); position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--green-w); color: var(--green-d); font: 800 .84rem/1 var(--sans); border: 1.5px solid rgba(15, 169, 123, .3); } .step::after { content: ''; position: absolute; left: 21px; top: 46px; bottom: 6px; width: 1.5px; background: linear-gradient(var(--line), transparent); } .step:last-child { padding-bottom: 0; } .step:last-child::after { display: none; } .step h3 { margin-bottom: .3em; } .step .when { display: inline-block; margin-left: 10px; vertical-align: middle; font: 700 .7rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--paper); padding: 6px 10px; border-radius: 999px; } .sec.night .step::before { background: rgba(47, 220, 164, .14); color: var(--green-l); border-color: rgba(47, 220, 164, .3); } .sec.night .step::after { background: linear-gradient(rgba(255, 255, 255, .18), transparent); } .sec.night .step .when { background: rgba(255, 255, 255, .08); color: #a9bdb7; } / ===================================================================== / / §10 REFERENCIE / / ===================================================================== / .ref { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), box-shadow var(--t), border-color var(--t); } .ref:hover { transform: translateY(-4px); box-shadow: var(--sh-l); border-color: rgba(15, 169, 123, .35); } .refimg { background: var(--paper-2); aspect-ratio: 16 / 10; overflow: hidden; } .refimg img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s ease; } .ref:hover .refimg img { transform: scale(1.04); } .refb { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; } .refb h3 { margin-bottom: .25em; font-size: 1.08rem; } .refu { font: 500 .8rem/1.4 var(--mono); color: var(--muted); margin-bottom: 8px; overflow-wrap: break-word; display: inline-block; padding: 4px 0; } .refb p { font-size: .93rem; color: var(--muted); } .reftags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; } .reftags span { font: 600 .72rem/1 var(--sans); padding: 7px 10px; border-radius: 999px; background: var(--paper); color: var(--muted); } / ===================================================================== / / §11 FAQ / / ===================================================================== / .faq { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; } .faq details { border-bottom: 1px solid var(--line); } .faq details:last-child { border-bottom: 0; } .faq summary { cursor: pointer; list-style: none; padding: 19px 54px 19px 22px; position: relative; font-weight: 700; line-height: 1.45; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ''; position: absolute; right: 22px; top: 50%; margin-top: -7px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a7d5b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; transition: transform var(--t); } .faq details[open] summary::after { transform: rotate(180deg); } .faq summary:hover { background: var(--paper); } .faq .a { padding: 0 22px 22px; color: var(--muted); } .sec.night .faq { background: var(--night-2); border-color: rgba(255, 255, 255, .12); } .sec.night .faq details { border-bottom-color: rgba(255, 255, 255, .12); } .sec.night .faq summary:hover { background: rgba(255, 255, 255, .05); } .sec.night .faq .a { color: #a9bdb7; } / ===================================================================== / / §12 FORMULÁRE A SPRIEVODCA / / ===================================================================== / .f fieldset { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; } .f legend { font-weight: 800; font-size: 1.06rem; padding: 0 0 4px; } .f legend em { color: var(--green-d); font-style: normal; } .fr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; } .fr.one { grid-template-columns: 1fr; } .fr.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fl { display: block; } .fl > span { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 7px; } .fl > span em { color: var(--green-d); font-style: normal; } .fl .hint { display: block; font-weight: 400; font-size: .82rem; color: var(--muted); margin-top: 6px; } input[type="text"], input[type="tel"], input[type="email"], input[type="url"], select, textarea { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 13px 15px; transition: border-color var(--t), box-shadow var(--t); } textarea { min-height: 118px; resize: vertical; } select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6b66' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 15px; padding-right: 40px; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(15, 169, 123, .16); } input::placeholder, textarea::placeholder { color: #9aa8a3; } .repeat input + input { margin-top: 8px; } / voľby ako karty / .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; } .opts.one { grid-template-columns: 1fr; } .opts.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .opt { position: relative; display: block; cursor: pointer; border: 1.5px solid var(--line); border-radius: var(--r-s); padding: 15px 17px 15px 46px; background: #fff; transition: border-color var(--t), background var(--t), box-shadow var(--t); } .opt:hover { border-color: rgba(15, 169, 123, .5); background: #fbfefd; } .opt input { position: absolute; left: 17px; top: 17px; width: 18px; height: 18px; accent-color: var(--green); margin: 0; } .opt b { display: block; font-size: .95rem; line-height: 1.4; } .opt small { display: block; color: var(--muted); font-size: .84rem; margin-top: 4px; line-height: 1.5; } .opt .pr { display: inline-block; margin-top: 8px; font: 800 .84rem/1 var(--sans); color: var(--green-d); white-space: nowrap; } / .is-on je záloha za :has() pre staršie prehliadače / .opt.is-on, .opt:has(input:checked) { border-color: var(--green); background: var(--green-w); box-shadow: 0 0 0 2px rgba(15, 169, 123, .14); } .agree { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--paper); border-radius: var(--r-s); font-size: .9rem; margin: 6px 0 20px; } .agree input { width: 19px; height: 19px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--green); } / honeypot — pole, ktoré človek nikdy nevidí ani nevyplní / .hp, .len-citacka { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } .msg { padding: 15px 18px; border-radius: var(--r-s); margin-bottom: 20px; font-weight: 600; } .msg.ok { background: var(--green-w); color: var(--green-d); border: 1px solid rgba(15, 169, 123, .35); } .msg.err { background: #fdeeee; color: #a93636; border: 1px solid #f0c9c9; } .skupina-chyba { color: var(--err); font-size: .87rem; font-weight: 600; margin: 10px 0 0; } .je-chybna .opts { outline: 2px solid var(--err); outline-offset: 6px; border-radius: var(--r-s); } / --- sprievodca ----------------------------------------------------- / .wizard { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: clamp(20px, 3vw, 34px); box-shadow: var(--sh); } .wz-tabs { display: flex; gap: 6px; overflow-x: auto; margin: -4px -4px clamp(24px, 3vw, 32px); padding: 4px; scrollbar-width: thin; } .wz-tab { flex: 1 0 auto; min-width: 116px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; background: var(--paper); border: 1.5px solid transparent; border-radius: var(--r-s); padding: 11px 14px; cursor: pointer; text-align: left; font: 600 .86rem/1.3 var(--sans); color: var(--muted); transition: background var(--t), color var(--t), border-color var(--t); } .wz-tab b { font: 800 .72rem/1 var(--sans); letter-spacing: .1em; color: var(--old); } .wz-tab.is-done { color: var(--green-d); } .wz-tab.is-done b { color: var(--green); } .wz-tab.is-active { background: var(--green-w); border-color: var(--green); color: var(--ink); } .wz-tab.is-active b { color: var(--green-d); } .wz-step { margin-bottom: 0 !important; } .wz-step > legend { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; } .wz-sub { color: var(--muted); font-size: .93rem; margin: 4px 0 22px; max-width: 68ch; } .wz-total { display: grid; gap: 4px; background: var(--night); color: #fff; border-radius: var(--r); padding: 22px 24px; margin-top: 8px; } .wz-total .lbl { font: 700 .72rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--green-l); } .wz-total .v { font: 800 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--sans); letter-spacing: -.03em; white-space: nowrap; } .wz-total .m { font-weight: 700; color: var(--green-l); } .wz-total .note { font-size: .82rem; color: #9db3ad; margin-top: 8px; line-height: 1.55; } .wz-sum { background: var(--paper); border-radius: var(--r); padding: 22px 24px; margin: 8px 0 20px; } .wz-sum h3 { margin-bottom: 14px; font-size: 1.05rem; } .wz-sum dl { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 8px 16px; margin: 0; font-size: .92rem; } .wz-sum dt { font-weight: 700; color: var(--muted); } .wz-sum dd { margin: 0; } .wz-sum .cena { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); } .wz-sum .cena span { font-weight: 700; color: var(--muted); font-size: .9rem; } .wz-sum .cena b { font: 800 1.35rem/1 var(--sans); color: var(--green-d); white-space: nowrap; } .wz-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); } .wz-count { margin-left: auto; font-size: .85rem; color: var(--muted); font-weight: 600; } / ===================================================================== / / §13 PÄTIČKA / / ===================================================================== / .cta-band { background: var(--night); color: #fff; padding: clamp(48px, 7vw, 82px) 0; position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; top: -40%; right: -12%; width: 60%; height: 180%; background: radial-gradient(closest-side, rgba(15, 169, 123, .25), transparent 70%); pointer-events: none; } .cta-band .wrap { position: relative; } .cta-band h2 { color: #fff; max-width: 20ch; } .cta-band p { color: #a9bdb7; max-width: 56ch; } .ftr { background: var(--night-2); color: #a9bdb7; padding: clamp(44px, 6vw, 68px) 0 0; } .ftrgrid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); padding-bottom: 40px; } .ftr h4 { color: #fff; font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 16px; } .ftr ul { list-style: none; margin: 0; padding: 0; } .ftr li { margin-bottom: 6px; } .ftr li a { display: inline-block; padding: 4px 0; / dotykový cieľ ≥ 24 px / max-width: 100%; overflow-wrap: break-word; / dlhý e-mail nesmie vytŕčať / } .ftr a { color: #a9bdb7; text-decoration: none; } .ftr a:hover { color: var(--green-l); } .ftrbrand img { width: 190px; margin-bottom: 16px; } .ftrbrand p { font-size: .92rem; max-width: 38ch; } .ftrcontact { font-size: .95rem; } .ftrcontact a { color: #fff; font-weight: 600; } .ftrbot { border-top: 1px solid rgba(255, 255, 255, .1); padding: 20px 0 26px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; font-size: .85rem; } .ftrbot .sep { margin-left: auto; } .ftrbot > a { display: inline-block; padding: 4px 0; } / dotykový cieľ ≥ 24 px / / trojfarebný prúžok — signatúra webu. Stredný segment musí byť viditeľný na OBOCH susedných pozadiach: na svetlom aj na tmavom. Preto sivá, nie biela ani tmavá. / .stripe { display: flex; height: 4px; width: 100%; } .stripe i { flex: 1; display: block; } .stripe i:nth-child(1) { background: var(--old); } .stripe i:nth-child(2) { background: #c8cdd4; } .stripe i:nth-child(3) { background: var(--green); } / ===================================================================== / / §14 DROBNOSTI A PRÁVNE STRÁNKY / / ===================================================================== / .crumbs { padding: calc(var(--nav-h) + 18px) 0 0; font-size: .84rem; color: var(--muted); } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .crumbs li + li::before { content: '/'; margin-right: 8px; color: var(--old); } .crumbs a { color: var(--muted); text-decoration: none; display: inline-block; padding: 5px 0; } .crumbs a:hover { color: var(--green-d); text-decoration: underline; } .page-head { padding: clamp(28px, 4vw, 48px) 0 clamp(24px, 3vw, 40px); } .page-head.top { padding-top: calc(var(--nav-h) + clamp(28px, 4vw, 48px)); } .prose { max-width: 74ch; } .prose h2 { margin-top: 2em; font-size: clamp(1.3rem, 2vw, 1.7rem); } .prose h3 { margin-top: 1.6em; } .prose ul, .prose ol { padding-left: 22px; } .prose li { margin-bottom: 8px; } .prose table { / table-layout:fixed — bez neho si najširšia bunka vynúti šírku tabuľky a pri 360 px vznikne vodorovné rolovanie celej stránky / width: 100%; table-layout: fixed; border-collapse: collapse; margin: 1.4em 0; font-size: .93rem; } .prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; } .prose th { background: var(--paper); } .note-box { border-left: 4px solid var(--green); background: var(--green-w); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 18px 20px; margin: 22px 0; } .note-box.warn { border-left-color: var(--amber); background: #fff8ea; } / ===================================================================== / / §15 STARÁ VERZIA — koža „web z rokov 2008 – 2013" / / / / Nemení sa žiadne HTML ani rozloženie. Prekrýva sa len povrch: / / písmo, farby, prechody, rámy, tiene a veľkosti rádiusov. / / / / ZÁMERNE sa NEmení: šírka `.wrap`, mriežky, odsadenie sekcií ani / / veľkosti nadpisov. Vďaka tomu zostanú všetky prvky — a hlavne / / prepínač verzií — na tom istom mieste a návštevník sa po prepnutí / / nestratí. Rozdiel robí povrch, nie prestavba stránky. / / / / Čo z tejto kože robí „rok 2009“: / / · Verdana — písmo, ktoré vtedy malo azda každý druhý web / / · sýte zvislé prechody a lesk („web 2.0“) na lište aj tlačidlách / / · rádius 3 px, dvojitý rám (tmavý zvonka, biely zvnútra) / / · jemná textúra v pozadí stránky namiesto čistej plochy / / · modrá #1f5fa8 ako akcent, odkazy vždy podčiarknuté / / · menu ako záložky so zaoblením len hore / / · hustejšie sadzba a menšie nadpisy než dnes / / ===================================================================== / html[data-skin="stara"] { --bg: #ffffff; --paper: #eef1f5; --paper-2: #e2e7ee; --ink: #333333; --muted: #6b7480; --line: #ccd4dd; --green: #1f5fa8; / akcent doby: „web 2.0“ modrá / --green-d: #16497f; --green-l: #7fb2e8; --green-w: #e6eff9; --night: #33414f; / tmavé sekcie boli bridlicové, nie čierne / --night-2: #2a3642; --old: #9aa4b0; --r: 3px; --r-s: 3px; --r-p: 3px; / žiadne pilulky — všetko len mierne zrazené / --sh: 0 1px 3px rgba(0, 0, 0, .18); --sh-l: 0 2px 5px rgba(0, 0, 0, .22); / Verdana je najsilnejší jediný signál tejto doby — bola predvolená voľba na drvivej väčšine vtedajších webov. Je aj širšia, takže sadzba sama od seba vyzerá hutnejšie. / --sans: Verdana, Geneva, Tahoma, "DejaVu Sans", Arial, sans-serif; } / Sekcie musia striedať biele a sivé pásy. Telo je sivé, takže bežná sekcia (bez triedy) by inak splynula s pozadím a stránka by bola jeden šedý blok. / html[data-skin="stara"] .sec { background: #ffffff; } html[data-skin="stara"] .sec.paper { background: #e7ecf2; } html[data-skin="stara"] .hero { background: #eef2f7 linear-gradient(#f7f9fc, #e4eaf2); border-bottom: 1px solid #c3ccd7; box-shadow: inset 0 -1px 0 #fff; } html[data-skin="stara"] body { / jemná šikmá textúra — čistá plocha je dnešný jav, vtedy mal podklad takmer vždy nejaký vzor alebo aspoň prechod / background: #e9edf1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 6L6 0' stroke='%23dfe4ea' stroke-width='1'/%3E%3C/svg%3E"); color: #3a3a3a; font-family: var(--sans); font-size: 13.5px; line-height: 1.5; } / sekcie tiež nie sú ploché — mierny zvislý prechod / html[data-skin="stara"] .sec { background: #ffffff linear-gradient(#ffffff, #fbfcfd); } html[data-skin="stara"] .sec.paper { background: #e8edf3 linear-gradient(#e8edf3, #dfe6ee); } / hustejšia sadzba — dnešné vzdušné odsadenie je pomerne nový zvyk / html[data-skin="stara"] .sec { padding: clamp(38px, 5.2vw, 66px) 0; } html[data-skin="stara"] .sec.tight { padding: clamp(28px, 3.4vw, 44px) 0; } html[data-skin="stara"] .sec-head { margin-bottom: clamp(20px, 2.6vw, 32px); } html[data-skin="stara"] .grid { gap: clamp(12px, 1.6vw, 18px); } / --- typografia ----------------------------------------------------- / html[data-skin="stara"] h1, html[data-skin="stara"] h2, html[data-skin="stara"] h3, html[data-skin="stara"] h4 { font-family: var(--sans); font-weight: bold; letter-spacing: 0; color: #2b3947; text-shadow: 0 1px 0 rgba(255, 255, 255, .8); } / nadpisy boli vtedy výrazne drobnejšie než dnešné „veľké typo“ / html[data-skin="stara"] h1 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.25; } html[data-skin="stara"] .hero h1 { font-size: clamp(1.45rem, 2.05vw, 1.8rem); } html[data-skin="stara"] h2 { font-size: clamp(1.2rem, 1.9vw, 1.55rem); line-height: 1.28; } html[data-skin="stara"] h3 { font-size: .98rem; } html[data-skin="stara"] .wz-step > legend { font-size: 1.15rem; } html[data-skin="stara"] .f legend { font-size: .95rem; } html[data-skin="stara"] .lead { font-size: .92rem; line-height: 1.6; } html[data-skin="stara"] .heroprice b { font-size: 1.45rem; } html[data-skin="stara"] .pricev { font-size: 1.6rem; } html[data-skin="stara"] .stat b { font-size: 1.5rem; } html[data-skin="stara"] h2 { / nadpis sekcie mal pod sebou vlastný prúžok, nie len tenkú linku / padding-bottom: 9px; border-bottom: 3px solid #1f5fa8; box-shadow: 0 1px 0 #ffffff; } html[data-skin="stara"] .sec-head.center h2 { border-bottom: 0; } html[data-skin="stara"] .lead { color: #5a6673; } html[data-skin="stara"] a { color: #16497f; text-decoration: underline; } / Preskakovací odkaz leží na tmavom podklade — bez tohto by zdedil modrú farbu odkazov a bol by prakticky nečitateľný. / html[data-skin="stara"] .skip { color: #fff; background: #26323f; } / POZOR: pravidlá pre nadpisy a tlačidlá vyššie majú vyššiu špecificitu než `.sec.night h2` a `.cta-band .btn-ghost` z §13 a §4 — bez týchto výnimiek by na tmavých pásoch ostal tmavý text na tmavom podklade. (Sweep to odhalil ako „KONTRAST“, na obrazovke bol nadpis neviditeľný.) / html[data-skin="stara"] .sec.night h2, html[data-skin="stara"] .sec.night h3, html[data-skin="stara"] .sec.night h4, html[data-skin="stara"] .cta-band h2 { color: #ffffff; text-shadow: none; } html[data-skin="stara"] .sec.night .lead, html[data-skin="stara"] .sec.night .muted, html[data-skin="stara"] .cta-band p { color: #c2d0de; } html[data-skin="stara"] .sec.night .card { color: #c2d0de; } html[data-skin="stara"] .sec.night .btn-ghost, html[data-skin="stara"] .cta-band .btn-ghost, html[data-skin="stara"] .drawer .btn-ghost { background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .06)); border-color: rgba(255, 255, 255, .4); color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); } html[data-skin="stara"] .sec.night .btn-ghost:hover, html[data-skin="stara"] .cta-band .btn-ghost:hover, html[data-skin="stara"] .drawer .btn-ghost:hover { background: linear-gradient(rgba(255, 255, 255, .3), rgba(255, 255, 255, .14)); border-color: #fff; color: #fff; } html[data-skin="stara"] .step .when { background: rgba(255, 255, 255, .1); } html[data-skin="stara"] .sec.night .step::before { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .28); color: #bcd9f5; } html[data-skin="stara"] a:hover { color: #c0392b; } html[data-skin="stara"] .btn, html[data-skin="stara"] .nl, html[data-skin="stara"] .brand, html[data-skin="stara"] .wz-tab, html[data-skin="stara"] .opt, html[data-skin="stara"] .ref { text-decoration: none; } / zvýraznená časť nadpisu — vtedy sa to riešilo farbou, nie linkou / html[data-skin="stara"] .uline { background-image: none; color: #2a6db5; padding-bottom: 0; } html[data-skin="stara"] .eyebrow { background: linear-gradient(#ffffff, #dde5ee); border: 1px solid #a9b6c4; border-radius: 2px; color: #5a6673; font-size: .7rem; letter-spacing: .08em; padding: 6px 11px; box-shadow: inset 0 1px 0 #fff; text-shadow: 0 1px 0 #fff; } html[data-skin="stara"] .sec.night .eyebrow { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); color: #cfe0f2; text-shadow: none; box-shadow: none; } / --- hlavička ------------------------------------------------------- / html[data-skin="stara"] .hdr { background: #eef2f7 linear-gradient(#ffffff 0%, #f2f5f9 50%, #dde4ec 100%); border-bottom: 3px solid #1f5fa8; box-shadow: 0 2px 4px rgba(0, 0, 0, .14); backdrop-filter: none; -webkit-backdrop-filter: none; } html[data-skin="stara"] .hdr.is-stuck { background: #eef2f7 linear-gradient(#ffffff 0%, #f2f5f9 50%, #dde4ec 100%); box-shadow: 0 3px 6px rgba(0, 0, 0, .2); } html[data-skin="stara"] .hdrp { display: none; } / prúžok priebehu vtedy neexistoval / html[data-skin="stara"] .brandt { color: #2b3947; text-shadow: 0 1px 0 #fff; } html[data-skin="stara"] .brandt i { color: #2a6db5; } / menu ako záložky — plávajúci ukazovateľ nahradí aktívna záložka / html[data-skin="stara"] .navind { display: none; } html[data-skin="stara"] .nl { border: 1px solid transparent; border-radius: 3px 3px 0 0; / záložka — zaoblená len hore / font-size: .82rem; padding: 9px 11px; color: #3d4a58; } html[data-skin="stara"] .nl:hover { background: linear-gradient(#ffffff, #e4eaf1); border-color: #c6cfd9; text-decoration: none; } html[data-skin="stara"] .nl[aria-current="page"] { background: linear-gradient(#ffffff, #d7e2ee); border-color: #a9b6c4; border-bottom-color: transparent; color: #16497f; box-shadow: inset 0 1px 0 #fff; font-weight: bold; } / text-roll je efekt novej doby — druhá kópia sa nikam neposúva / html[data-skin="stara"] .nl-roll { transform: none !important; } html[data-skin="stara"] .burger { background: linear-gradient(#ffffff, #e4eaf1); border-color: #c6cfd9; border-radius: 3px; } html[data-skin="stara"] .drawer { background: #2b3745; } html[data-skin="stara"] .drawer a { font-size: 1.1rem; color: #fff; } html[data-skin="stara"] .drawer a[aria-current="page"] { color: #9fc7ee; } / telefón a e-mail v pätičke mobilného menu — tmavomodrá farba odkazov by na tmavom paneli splynula s pozadím / html[data-skin="stara"] .drawerfoot { color: #b7c6d6; } html[data-skin="stara"] .drawerfoot a { color: #9fc7ee; } / --- tlačidlá: lesklé, s prechodom a vnútorným svetlom --------------- / html[data-skin="stara"] .btn { border-radius: 3px; border-width: 1px; font-size: .8rem; padding: 9px 16px; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); / dvojitá hrana: biele svetlo hore, tmavý rám zvonka — presne to robilo vtedajšie tlačidlo „vypuklým“ / box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .25); } html[data-skin="stara"] .btn:hover { transform: none; } html[data-skin="stara"] .btn::after { display: none; } / prebehnutie svetla je dnešný efekt / html[data-skin="stara"] .btn-primary, html[data-skin="stara"] .btn-cta { / zlom v strede prechodu = „lesk“, poznávacie znamenie doby / background: #1f5fa8 linear-gradient(#6fb3ea 0%, #3d8ad4 50%, #1f5fa8 51%, #17497f 100%); border-color: #123b66; color: #fff; } html[data-skin="stara"] .btn-primary:hover, html[data-skin="stara"] .btn-cta:hover { background: #2a6db5 linear-gradient(#82c0f0 0%, #4a97dd 50%, #2a6db5 51%, #1d5590 100%); color: #fff; } html[data-skin="stara"] .btn-dark { background: #3c4a58 linear-gradient(#71818f 0%, #4e5d6b 50%, #3c4a58 51%, #2f3b47 100%); border-color: #262f38; color: #fff; } html[data-skin="stara"] .btn-dark:hover { background: linear-gradient(#697a8c, #45525f); color: #fff; } html[data-skin="stara"] .btn-ghost { background: #eef2f7 linear-gradient(#ffffff 0%, #f4f7fa 50%, #e2e9f1 51%, #d5dee8 100%); border-color: #a9b6c4; color: #3d4a58; text-shadow: 0 1px 0 #fff; } html[data-skin="stara"] .btn-ghost:hover { background: linear-gradient(#ffffff, #d8e1ea); border-color: #aab7c5; color: #1a5fa8; } html[data-skin="stara"] .btn-lg { padding: 11px 20px; font-size: .86rem; } / --- karty a plochy ------------------------------------------------- / html[data-skin="stara"] .card, html[data-skin="stara"] .price, html[data-skin="stara"] .stat, html[data-skin="stara"] .ref, html[data-skin="stara"] .ba-col, html[data-skin="stara"] .wizard, html[data-skin="stara"] .faq, html[data-skin="stara"] .wz-sum, html[data-skin="stara"] .tbl-wrap, html[data-skin="stara"] .agree, html[data-skin="stara"] .note-box { border-radius: 3px; / dvojitý rám: tmavší zvonka, biela linka zvnútra / border: 1px solid #b3c0cd; background: #f8fafc linear-gradient(#ffffff, #f2f6fa); box-shadow: inset 0 0 0 1px #ffffff, 0 1px 3px rgba(0, 0, 0, .13); } html[data-skin="stara"] .card:hover, html[data-skin="stara"] .price:hover, html[data-skin="stara"] .ref:hover { transform: none; border-color: #aab7c5; box-shadow: 0 2px 5px rgba(0, 0, 0, .12); } html[data-skin="stara"] .card.old { background: linear-gradient(#f4f6f9, #e9edf2); } html[data-skin="stara"] .sec.night .card { background: #37475a; border-color: #46586d; box-shadow: none; } html[data-skin="stara"] .ico { border-radius: 3px; width: 40px; height: 40px; background: linear-gradient(#f0f7ff 0%, #dceaf8 50%, #c9dff4 51%, #bad6f1 100%); border: 1px solid #a7c6e6; color: #16497f; box-shadow: inset 0 1px 0 #fff; } html[data-skin="stara"] .ico svg { width: 19px; height: 19px; } html[data-skin="stara"] .sec.night .ico { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); color: #bcd9f5; } html[data-skin="stara"] .pricebadge { border-radius: 2px; background: #e08c00 linear-gradient(#ffcf5a 0%, #f5a623 50%, #e08c00 51%, #c97e00 100%); border: 1px solid #a86800; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); letter-spacing: .06em; } html[data-skin="stara"] .price.hi { border-color: #2a6db5; box-shadow: 0 0 0 2px #d7e6f7; } html[data-skin="stara"] .pricev, html[data-skin="stara"] .stat b, html[data-skin="stara"] .wz-sum .cena b, html[data-skin="stara"] table.tbl td.p, html[data-skin="stara"] .heroprice b { color: #1a5fa8; } / odškrtnutie: vtedy sa kreslilo znakom, nie vyplneným kolieskom / html[data-skin="stara"] .checks li::before { background: none; content: '\2713'; width: auto; height: auto; top: 0; color: #3f9142; font-weight: bold; font-size: .95em; } html[data-skin="stara"] .checks.crosses li::before { content: '\2715'; color: #c0392b; } html[data-skin="stara"] .ba-col.after { background: #e4eef9 linear-gradient(#eaf2fb, #dbe9f8); border-color: #bcd4ec; } html[data-skin="stara"] .ba-col .tag { border-radius: 3px; } html[data-skin="stara"] .ba-col.after .tag { background: #2a6db5 linear-gradient(#4a90d9, #2a6db5); text-shadow: 0 1px 1px rgba(0, 0, 0, .25); } / odkrývanie pri scrollovaní je dnešný efekt — vtedy tam bolo všetko hneď / html[data-skin="stara"] .rv { opacity: 1 !important; transform: none !important; } / --- pásy, pätička, prúžok ------------------------------------------ / html[data-skin="stara"] .sec.night, html[data-skin="stara"] .cta-band { background: #33414f linear-gradient(#3b4a5a, #2b3745); border-top: 1px solid #4c5e70; border-bottom: 1px solid #212b35; } html[data-skin="stara"] .cta-band::before, html[data-skin="stara"] .hero::before { display: none; } / mäkké žiary sú dnešné / html[data-skin="stara"] .ftr { background: #2a3642 linear-gradient(#323f4d, #232e3a); border-top: 4px solid #1f5fa8; } html[data-skin="stara"] .ftr h4 { color: #bcd9f5; } html[data-skin="stara"] .ftr a { color: #cfd8e2; } html[data-skin="stara"] .ftr a:hover { color: #7fb2e8; } html[data-skin="stara"] .stripe i:nth-child(1) { background: #9aa4b0; } html[data-skin="stara"] .stripe i:nth-child(2) { background: #c8cdd4; } html[data-skin="stara"] .stripe i:nth-child(3) { background: #1f5fa8; } html[data-skin="stara"] .stripe { height: 5px; } / --- formuláre ------------------------------------------------------ / html[data-skin="stara"] input[type="text"], html[data-skin="stara"] input[type="tel"], html[data-skin="stara"] input[type="email"], html[data-skin="stara"] select, html[data-skin="stara"] textarea { / vpadnuté pole s výraznejším vnútorným tieňom — vtedajší štandard / border: 1px solid #94a3b2; border-top-color: #7d8d9d; border-radius: 2px; padding: 7px 9px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .14); font-size: .88rem; } html[data-skin="stara"] input:focus, html[data-skin="stara"] select:focus, html[data-skin="stara"] textarea:focus { border-color: #2a6db5; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08), 0 0 4px rgba(42, 109, 181, .5); } html[data-skin="stara"] .opt { border-radius: 3px; border-color: #b3c0cd; background: linear-gradient(#ffffff, #f1f5f9); box-shadow: inset 0 0 0 1px #fff; padding-block: 11px; } html[data-skin="stara"] .opt.is-on, html[data-skin="stara"] .opt:has(input:checked) { background: linear-gradient(#eaf2fb, #d8e7f7); border-color: #2a6db5; box-shadow: inset 0 1px 0 #fff; } html[data-skin="stara"] .opt input { accent-color: #2a6db5; } html[data-skin="stara"] .opt .pr { color: #1a5fa8; } html[data-skin="stara"] .agree input { accent-color: #2a6db5; } / záložky sprievodcu — vtedajší štýl „tabov“ / html[data-skin="stara"] .wz-tab { border-radius: 3px 3px 0 0; background: linear-gradient(#ffffff 0%, #f0f4f8 50%, #dfe6ee 51%, #d3dce6 100%); border: 1px solid #a9b6c4; color: #5a6673; font-size: .8rem; } html[data-skin="stara"] .wz-tab.is-active { background: linear-gradient(#ffffff, #eaf2fb); border-color: #2a6db5; color: #1a5fa8; } html[data-skin="stara"] .wz-tab.is-active b, html[data-skin="stara"] .wz-tab.is-done b { color: #2a6db5; } html[data-skin="stara"] .wz-total { background: #2b3846 linear-gradient(#45566a 0%, #374555 50%, #2b3846 51%, #232e3a 100%); border: 1px solid #1d2732; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); } html[data-skin="stara"] .wz-total .lbl, html[data-skin="stara"] .wz-total .m { color: #9fc7ee; } html[data-skin="stara"] .msg { border-radius: 3px; } html[data-skin="stara"] .msg.ok { background: linear-gradient(#eaf6ea, #ddeedd); border-color: #b6d7b6; color: #2f6b32; } / --- posuvník predtým / potom --------------------------------------- / html[data-skin="stara"] .ba { border-radius: 3px; border-color: #a9b6c4; } html[data-skin="stara"] .bahandle { background: #1f5fa8; } html[data-skin="stara"] .bahandle::after { background-color: #1f5fa8; border-radius: 3px; } html[data-skin="stara"] .balbl { border-radius: 2px; } html[data-skin="stara"] .ba__lbl--r { background: #1f5fa8 linear-gradient(#4a97dd 0%, #2a6db5 50%, #1f5fa8 51%, #17497f 100%); } / prepínač v hero — ten sa starej kože drží (na rozdiel od plávajúceho v §15b, ktorý musí zostať rovnaký v oboch verziách). Rám aktívneho tlačidla je `inset box-shadow`, nie `border` — border by zmenil jeho rozmer a posunul susedné tlačidlo. / html[data-skin="stara"] .swap { background: linear-gradient(#f2f5f9, #dde4ec); border: 1px solid #a9b6c4; border-radius: 3px; padding: 3px; box-shadow: inset 0 1px 0 #fff; } html[data-skin="stara"] .swap button { border-radius: 2px; font-size: .78rem; padding: 8px 13px; color: #3d4a58; text-shadow: 0 1px 0 #fff; } html[data-skin="stara"] .swap button[aria-pressed="true"] { background: linear-gradient(#ffffff, #eef3f8); box-shadow: inset 0 0 0 1px #a9b6c4, inset 0 1px 0 #fff; color: #16497f; font-weight: bold; } / ===================================================================== / / §15c OBMEDZENIA DOBY — čo stará verzia zámerne NEVIE / / / / Rozdiel nie je len v tom, ako web vyzerá, ale aj v tom, čo vie. / / Vtedy neexistovalo responzívne rozloženie, lepiace menu ani plynulé / / prechody — a keby ich stará koža mala, ukážka by klamala. / / / / Zoznam týchto obmedzení je pre návštevníka vypísaný v `.retro-note` / / (build.py → retro_upozornenie()), aby si nemyslel, že je web / / pokazený. / / ===================================================================== / / --- 1. pevná šírka, žiadna responzívnosť --------------------------- / / Toto je najdôležitejšie obmedzenie celej ukážky. Vtedajší web mal pevných ~980 px a na telefóne sa posúval do strán. / html[data-skin="stara"] body { min-width: 1010px; } html[data-skin="stara"] .wrap { width: 980px; max-width: none; } / mriežky sa pri zúžení okna nesmú zalamovať — presne to vtedy nešlo. Špecificita (0,1,1) prebije mediálne dotazy v §16, nech sú kdekoľvek. / html[data-skin="stara"] .herogrid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); } html[data-skin="stara"] .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-skin="stara"] .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-skin="stara"] .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } html[data-skin="stara"] .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } html[data-skin="stara"] .ba-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-skin="stara"] .ftrgrid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } html[data-skin="stara"] .btns .btn { width: auto; } / --- 2. menu sa pri rolovaní nedrží hore ---------------------------- / html[data-skin="stara"] .hdr { position: static; height: auto; } html[data-skin="stara"] .hdr.is-stuck { height: auto; } / Verdana je široká a pri pevných 980 px sa značka + menu + tlačidlo do jedného riadka nezmestili — tlačidlo vytŕčalo z lišty von. Riadok sa preto smie zalomiť a menu je o kúsok tesnejšie. / html[data-skin="stara"] .hdrin { flex-wrap: wrap; height: auto; gap: 6px 12px; padding-block: 9px; } html[data-skin="stara"] .nl { padding: 8px 8px; font-size: .78rem; } html[data-skin="stara"] .hdr .btn-cta { padding: 8px 13px; font-size: .76rem; margin-left: 6px; } html[data-skin="stara"] .brandt { font-size: .98rem; } html[data-skin="stara"] .hero { padding-top: clamp(30px, 4vw, 54px); } html[data-skin="stara"] .crumbs { padding-top: 16px; } html[data-skin="stara"] .page-head.top { padding-top: clamp(24px, 3vw, 40px); } html[data-skin="stara"] [id] { scroll-margin-top: 8px; } / --- 3. mobilné menu neexistuje — odkazy sa len zalomia ------------- / html[data-skin="stara"] .nav { display: flex; } html[data-skin="stara"] .hdr .btn-cta { display: inline-flex; } html[data-skin="stara"] .burger { display: none; } html[data-skin="stara"] .drawer { display: none; } / --- 4. žiadne plynulé prechody ani odkrývanie ---------------------- / / Prepínač verzií je výnimka — ten musí zostať plynulý, patrí dnešku. / html[data-skin="stara"] :not(.swap-fix):not(.swap-fix ) { transition: none !important; animation: none !important; } html[data-skin="stara"] { scroll-behavior: auto; } / --- 5. posuvník porovnania nefunguje — dva obrázky pod sebou ------- / html[data-skin="stara"] .ba { display: grid; gap: 10px; background: transparent; border: 0; box-shadow: none; / BEZ tohto sa na mobile nedalo vrátiť doľava: pan-y zakazuje vodorovné posúvanie stránky prstom nad prvkom, a v starej verzii je tento blok vysoký cez celú obrazovku. / touch-action: auto; } / pre istotu aj na celom tele — pevná šírka bez možnosti posunu späť je najhoršia chyba, akú môže táto ukážka mať / html[data-skin="stara"] body { touch-action: pan-x pan-y; } html[data-skin="stara"] .bapane { position: static; clip-path: none; border: 1px solid #a9b6c4; border-radius: 3px; overflow: hidden; } html[data-skin="stara"] .bahandle, html[data-skin="stara"] .ba input[type="range"] { display: none; } html[data-skin="stara"] .balbl { position: static; display: block; width: max-content; margin-bottom: -1px; border-radius: 3px 3px 0 0; } / poradie musí byť určené VŠETKÝM štyrom prvkom, inak sa obe menovky zoradia nad seba a makety zostanú pod nimi / html[data-skin="stara"] .balbl--l { order: 1; } html[data-skin="stara"] .bapane--old { order: 2; } html[data-skin="stara"] .balbl--r { order: 3; margin-top: 8px; } html[data-skin="stara"] .bapane--new { order: 4; } html[data-skin="stara"] .site { height: auto; } / v rozloženom posuvníku je maketa na celú šírku stĺpca, takže nadpis v nej treba zmenšiť — inak sa láme na štyri riadky / html[data-skin="stara"] .site--new .s-h { font-size: 20px; } html[data-skin="stara"] .site--new .s-hero { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } / text hore, nie na stred — zarovnávanie na stred stĺpcov je dnešný zvyk a v úzkom rozložení robí hore veľkú dieru / html[data-skin="stara"] .herogrid { align-items: start; } / poznámka o prepínači musí ladiť s kožou, v ktorej práve je / html[data-skin="stara"] .swap-hint { background: #fffaf0; border: 1px solid #e5c98f; border-left: 4px solid #d99b1f; border-radius: 3px; color: #5c4a1e; } html[data-skin="stara"] .swap-hinti { color: #b0790f; } / --- 6. otázky sú rozbalené a nedajú sa zbaliť ---------------------- / / Rozbaľovacie sekcie prišli až s
; skript ich preto v starej koži otvorí a značka „šípka“ zmizne. / html[data-skin="stara"] .faq summary { cursor: default; font-weight: bold; } html[data-skin="stara"] .faq summary::after { display: none; } html[data-skin="stara"] .faq summary:hover { background: transparent; } html[data-skin="stara"] .faq .a { padding-top: 0; } / ===================================================================== / / §15b PLÁVAJÚCI PREPÍNAČ VERZIÍ / / / / Jediný ovládací prvok, ktorý je v OBOCH kožách na presne rovnakom / / mieste a vyzerá rovnako. Kotví sa k oknu, nie k obsahu, takže ho / / prestavba stránky nemôže posunúť — po prepnutí ho návštevník nájde / / tam, kde naň klikol. Preto sa naň zámerne NEvzťahuje stará koža. / / ===================================================================== / .swap-fix { position: fixed; right: clamp(14px, 2vw, 26px); bottom: clamp(14px, 2vw, 26px); z-index: 300; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: #ffffff; border: 1px solid #dde7e3; border-radius: 999px; box-shadow: 0 2px 6px rgba(12, 26, 22, .1), 0 12px 32px rgba(12, 26, 22, .16); font: 400 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .swap-fixlbl { font-weight: 700; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: #5d6b66; padding-left: 6px; } .swap-fixin { display: flex; gap: 4px; background: #f1f6f4; border-radius: 999px; padding: 4px; } .swap-fix button { appearance: none; border: 0; cursor: pointer; background: transparent; color: #5d6b66; font: 700 13px/1 inherit; padding: 9px 14px; border-radius: 999px; transition: background .2s, color .2s, box-shadow .2s; white-space: nowrap; } .swap-fix button:hover { color: #0c1a16; } .swap-fix button[aria-pressed="true"] { background: #ffffff; color: #0c1a16; box-shadow: 0 1px 3px rgba(12, 26, 22, .16); } .swap-fix button[data-skin-btn="nova"][aria-pressed="true"] { color: #0a7d5b; } .swap-fix button[data-skin-btn="stara"][aria-pressed="true"] { color: #4a5560; } / stará koža sa naň nesmie dostať — musí zostať rovnaký / html[data-skin="stara"] .swap-fix, html[data-skin="stara"] .swap-fix { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; } html[data-skin="stara"] .swap-fix { background: #ffffff !important; border: 1px solid #dde7e3 !important; border-radius: 999px !important; box-shadow: 0 2px 6px rgba(12, 26, 22, .1), 0 12px 32px rgba(12, 26, 22, .16) !important; } html[data-skin="stara"] .swap-fixin { background: #f1f6f4 !important; border-radius: 999px !important; padding: 4px !important; } html[data-skin="stara"] .swap-fix button { background: transparent !important; border: 0 !important; border-radius: 999px !important; padding: 9px 14px !important; color: #5d6b66 !important; font: 700 13px/1 inherit !important; text-shadow: none !important; box-shadow: none !important; } html[data-skin="stara"] .swap-fix button[aria-pressed="true"] { background: #ffffff !important; color: #4a5560 !important; box-shadow: 0 1px 3px rgba(12, 26, 22, .16) !important; } html[data-skin="stara"] .swap-fixlbl { color: #5d6b66 !important; text-shadow: none !important; } @media (max-width: 700px) { .swap-fix { left: 10px; right: 10px; bottom: 10px; justify-content: center; gap: 8px; padding: 8px; } .swap-fixlbl { display: none; } .swap-fixin { flex: 1; } .swap-fix button { flex: 1; } } /* ===================================================================== / / §16 RESPONZÍVNOSŤ, POHYB, TLAČ / / ===================================================================== / @media (max-width: 1080px) { .herogrid { grid-template-columns: 1fr; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftrgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 960px) { .nav, .hdr .btn-cta { display: none; } .burger { display: flex; } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wz-sum dl { grid-template-columns: 1fr; gap: 2px 0; } .wz-sum dd { margin-bottom: 10px; } } @media (max-width: 780px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .ba-cols { grid-template-columns: 1fr; } .fr, .fr.three { grid-template-columns: 1fr; } .opts, .opts.three { grid-template-columns: 1fr; } .site { height: 340px; } .ftrbot .sep { margin-left: 0; } } / Pod 640 px nemá deliaci jazdec zmysel: obe polovice sú také úzke, že sa v nich nedá nič prečítať. Ukážeme makety pod sebou — rovnako ako v starej verzii. Popisok sa mení spolu s tým (`.len-uzke`). / @media (max-width: 640px) { .ba { display: grid; gap: 10px; background: transparent; border: 0; box-shadow: none; touch-action: auto; } .bapane { position: static; clip-path: none; border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; } .bahandle, .ba input[type="range"] { display: none; } .balbl { position: static; display: block; width: max-content; margin-bottom: -1px; border-radius: var(--r-s) var(--r-s) 0 0; } .balbl--l { order: 1; } .bapane--old { order: 2; } .balbl--r { order: 3; margin-top: 8px; } .bapane--new { order: 4; } / `.ba .site`, nie `.site` — neskorší dotaz pre 560 px nastavuje height:300px a pri rovnakej špecificite by vyhral poradím. / .ba .site { height: auto; } .site--new .s-hero { grid-template-columns: 1fr; } .site--new .s-shot { display: none; } } .len-uzke { display: none; } @media (max-width: 640px) { .len-siroke { display: none; } .len-uzke { display: block; } } @media (max-width: 560px) { .stats { grid-template-columns: 1fr; } .site--old .s-brand { font-size: 11px; } .site--old .s-tel { display: none; } .site--old .s-banner { font-size: 11px; height: 46px; } .site--old .s-side { width: 78px; } .site--new .s-h { font-size: 19px; } .site--new .s-hero { padding: 16px 12px 12px; } .prose th, .prose td { padding: 9px 10px; font-size: .88rem; } .ftrgrid { grid-template-columns: 1fr; } .btns .btn { width: 100%; } .swap { width: 100%; } .swap button { flex: 1; } .site { height: 300px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } , ::before, ::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .rv { opacity: 1; transform: none; } } @media print { .hdr, .drawer, .burger, .cta-band, .swap-wrap, .swap-fix, .bahandle { display: none !important; } body { padding-bottom: 0; } body { background: #fff; } .wrap { max-width: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; } } /* ===================================================================== / / §17 DOPLNKY K ROZLOŽENIU / / ===================================================================== / / výzva na prepnutie verzie — nie je to ovládač, len ukazovateľ / .swap-hint { / NIE flex — vnútri vety by sa stalo samostatnou položkou a text by sa rozpadol do stĺpcov. Ikona je preto odsadená absolútne, nie medzerou vo flexe. / position: relative; max-width: 56ch; margin: 0 0 24px; padding: 13px 16px 13px 42px; background: var(--green-w); border: 1px solid rgba(15, 169, 123, .3); border-radius: var(--r-s); font-size: .92rem; line-height: 1.55; color: var(--ink); } .swap-hinti { position: absolute; left: 15px; top: 12px; font-size: 1.15rem; line-height: 1.4; color: var(--green-d); } / panel obmedzení — v novej verzii sa nezobrazuje vôbec / .retro-only { display: none; } html[data-skin="stara"] .retro-only { display: block; } .nova-only { display: block; } html[data-skin="stara"] .nova-only { display: none; } .retro-note { margin: 0 0 clamp(24px, 3vw, 36px); padding: 20px 22px; background: #fffaf0; border: 1px solid #e5c98f; border-left: 5px solid #d99b1f; border-radius: 3px; box-shadow: inset 0 1px 0 #fff; } .retro-note h3 { margin-bottom: .4em; color: #8a5a00; } .retro-note p { font-size: .92rem; color: #6b5320; } .retro-note ul { margin: 12px 0 0; padding-left: 20px; font-size: .92rem; } .retro-note li { margin-bottom: 7px; } / Miesto pre plávajúci prepínač — len na stránke, kde naozaj je. Odsadenie patrí DOVNÚTRA pätičky, nie na : padding na tele vykreslí pod pätičkou pruh farby pozadia, čo vyzerá ako biele miesto na konci stránky. Takto je priestor tmavý ako zvyšok pätičky. / .je-demo .ftrbot { padding-bottom: 104px; } @media (max-width: 700px) { .je-demo .ftrbot { padding-bottom: 96px; } } / --- dotykové ciele a zarovnanie na malých obrazovkách -------------- / / logo v lište bolo vysoké 29 px — na prst málo / .brand { padding-block: 7px; } / adresa webu pod referenciou / .refu { padding: 7px 0; } @media (max-width: 700px) { / Cena a jej popis boli na jednom riadku zarovnané na účiaru, takže druhý riadok popisu sa zalomil pod „400 €“ a text pôsobil rozhodene. Na mobile ich dáme pod seba. / .heroprice { display: block; margin-bottom: 20px; } .heroprice b { display: block; font-size: 1.9rem; line-height: 1.1; } .heroprice span { display: block; margin-top: 6px; max-width: 34ch; } / Prepínač verzií musí byť pohodlne trafiteľný. Rozmer treba zopakovať aj pre starú kožu — jej pravidlá v §15b majú !important, inak by tam tlačidlo zostalo menšie a ovládač by v oboch verziách nemal rovnakú veľkosť. / .swap-fix button, html[data-skin="stara"] .swap-fix button { padding: 13px 14px !important; font-size: .9rem !important; } / poznámka pod cenou v cenníku bola zbytočne odsadená / .pricen { margin: 6px 0 16px; } / dôveryhodnostný riadok pod hero: dva stĺpce namiesto rozsypaného radu / .herotrust { gap: 8px 18px; } } / kontaktná stránka: formulár + bočný stĺpec s údajmi */ .kontakt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .72fr); align-items: start; } @media (max-width: 900px) { .kontakt-grid { grid-template-columns: 1fr; } } html[data-skin="stara"] .kontakt-grid { display: block !important; }