/* ============ EENS V2 · základ ============ Reset, typografia, obal, pásy, tlačidlá, lišta, pätička. Rozloženie jednotlivých sekcií titulky je v titulka.css, obchod v obchod.css. */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--lista-v) + 24px); /* Vodorovné rolovanie stránka nikdy nepotrebuje. Zákaz je aj na , lebo samotné body ho pri pevne umiestnených prvkoch neustráži. */ overflow-x:hidden; } body{ background:var(--papier);color:var(--text); font:var(--v-telo)/1.7 var(--pismo-telo); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--cervena);color:#fff} /* Ohnisko je červené a hranaté, aby sedelo ku kresbe. */ :focus-visible{outline:2px solid var(--cervena);outline-offset:3px;border-radius:var(--r)} :focus:not(:focus-visible){outline:none} /* ---------- obal ---------- Celá stránka je odsadená o šírku koľajnice so schémou. Koľajnica je position:fixed a neberie miesto, preto o ňu musí odsadiť obsah. */ .stranka{padding-left:var(--ras)} .obal{width:var(--obal);margin-inline:auto} section{padding-block:var(--pas);position:relative} /* Tmavý pás musí prekryť aj odsadenie koľajnice, inak by pod ňou presvital papier a vznikol by falošný pruh. */ .tmavy{background:var(--papier);color:var(--text)} /* ---------- typografia ---------- */ h1,h2,h3,h4{ font-family:var(--pismo-nadpis); font-weight:800;line-height:1.04;letter-spacing:-.026em; text-wrap:balance; } h2{font-size:var(--v-h2);line-height:1.08;letter-spacing:-.022em} h3{font-size:var(--v-h3);line-height:1.22;letter-spacing:-.014em;font-weight:750} p{text-wrap:pretty} a{color:inherit} /* Popiska v strojopise. Číslo sekcie, napäťová úroveň, hlavička tabuľky. Je to jazyk výkresu, preto vždy verzálky a široký prestrk. */ .stitok{ font-family:var(--pismo-mono);font-size:var(--v-stitok); letter-spacing:.2em;text-transform:uppercase;font-weight:500; color:var(--text-3); } .stitok.cerveny{color:var(--cervena)} .stitok.medeny{color:var(--med)} /* Hlavička pásu: číslo, čiara, názov. Čiara sa dokreslí, keď pás nabehne. */ .hlava-pasu{ display:flex;align-items:center;gap:18px; margin-bottom:clamp(18px,2.4vw,30px); } .hlava-pasu .ciarka{ flex:1;height:1px;background:var(--linka-silna); transform-origin:left;transform:scaleX(0); transition:transform var(--cas-scena) var(--krivka) .1s; } .videny .hlava-pasu .ciarka{transform:scaleX(1)} .uvodka{ max-width:56ch;color:var(--text-2); font-size:clamp(17px,1.6vw,21px);line-height:1.6; } .drobne{font-size:var(--v-drobne);color:var(--text-3);line-height:1.6} /* ---------- tlačidlá ---------- */ .tlacidlo{ --tl-farba:var(--cervena); display:inline-flex;align-items:center;gap:12px; padding:16px 28px;border:1px solid var(--tl-farba);border-radius:var(--r); background:var(--tl-farba);color:#fff; font-size:14.5px;font-weight:650;letter-spacing:.01em; text-decoration:none;cursor:pointer; position:relative;overflow:hidden;isolation:isolate; transition:color var(--cas) var(--krivka),border-color var(--cas) var(--krivka); } /* Výplň nabieha zdola ako zaliatie, nie ako zmena farby. Drobnosť, ale je to prvý pohyb, ktorý návštevník na stránke vyvolá sám. */ .tlacidlo::before{ content:"";position:absolute;inset:0;z-index:-1;background:var(--text); transform:translateY(101%); transition:transform var(--cas) var(--krivka); } .tlacidlo:hover::before{transform:translateY(0)} .tlacidlo:hover{border-color:var(--text)} .tlacidlo .sip{transition:transform var(--cas) var(--krivka)} .tlacidlo:hover .sip{transform:translateX(5px)} /* Veľké tlačidlo. Používa sa tam, kde je na páse jediná výzva, teda v hero páse a na konci pása o dodávke. */ .tlacidlo.velke{ padding:19px 34px;font-size:16px;gap:14px; } .tlacidlo.tichy{background:transparent;color:var(--text);border-color:var(--linka-silna)} .tlacidlo.tichy::before{background:var(--text)} .tlacidlo.tichy:hover{color:var(--papier)} /* ---------- lišta ---------- Priehľadná nad hero pásom, po odscrolovaní sadne na plochu. Menu je krátke zámerne: štyri položky a košík. */ .lista{ position:fixed;top:0;left:0;right:0;z-index:80; display:flex;align-items:center;gap:clamp(14px,2.4vw,38px); height:var(--lista-v);padding-inline:clamp(18px,3vw,34px); color:var(--text-tma); transition:background var(--cas) var(--krivka), color var(--cas) var(--krivka), box-shadow var(--cas) var(--krivka); } /* Lišta je na celom webe rovnaká: čierna, biele písmo, červené pod myšou. Predtým bola nad hero pásom priehľadná a inde svetlá, takže vyzerala na každej stránke inak a na svetlom podklade sa strácala. Trieda .sadnuta, ktorú prepína js/pohyb.js podľa scrollu, zostáva v značke, ale už nemení farby; drží len tieň, aby bolo vidieť, že stránka je odrolovaná. */ .lista{background:var(--uhol);color:var(--text-tma)} .lista.sadnuta{box-shadow:0 1px 0 var(--linka-tma)} .lista-znacka{ display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;flex:none; } .lista-znacka .eens-mark{height:26px;width:auto} .lista-znacka b{ font-family:var(--pismo-nadpis); font-size:17px;font-weight:800;letter-spacing:.17em;line-height:1; } /* Značka: dlaždica je vždy červená, kresba v nej vždy biela. Nezávisí to od toho, či lišta práve stojí na tmavom hero páse alebo na papieri. */ .eens-mark .dlazdica{fill:var(--cervena)} .eens-mark .zbernica,.eens-mark .odbocka{stroke:#fff} .eens-mark .uzol{fill:#fff} .lista-menu{display:flex;align-items:center;gap:4px;margin-left:auto} .lista-menu a, .lista-menu > .odkaz-chystame{ padding:9px 14px;border-radius:var(--r);text-decoration:none; font-size:14px;font-weight:600;position:relative; transition:color var(--cas-rychly) var(--krivka); } .lista-menu a::after{ content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:right; transition:transform var(--cas) var(--krivka); } .lista-menu a:hover::after{transform:scaleX(1);transform-origin:left} .lista-menu a:hover{color:var(--cervena)} .lista-menu a.tu{color:var(--cervena)} .lista-znacka:hover b{color:var(--cervena)} /* Vstup do e-shopu v lište. Je to jediné plné tlačidlo v lište, preto drží červenú aj vtedy, keď lišta sadne na svetlú plochu. */ .eshop-tlacidlo{ display:inline-flex;align-items:center;gap:10px; padding:10px 18px;border:1px solid var(--cervena);border-radius:var(--r); background:var(--cervena);color:#fff;text-decoration:none; font-size:13.5px;font-weight:650;white-space:nowrap; transition:background var(--cas) var(--krivka),border-color var(--cas) var(--krivka); } .eshop-tlacidlo:hover{background:var(--cervena-tmava);border-color:var(--cervena-tmava)} /* ---------- zamknuté ---------- E-shop je hotový, ale kým nie je portfólio a ceny, nesmie sa naň dať kliknúť. Zamknutý prvok je , nie : odkaz, ktorý nikam nevedie, je horší než žiadny. Vyzerá utlmene a nesie štítok „čoskoro", aby bolo jasné, že to nie je chyba, ale stav. */ /* Farby idú cez --linka-silna a --text-3, nie cez ich tmavé dvojičky. V tmavom páse to vyjde na to isté, trieda .tmavy si tie dva tokeny prepisuje sama, ale zamknuté tlačidlo dnes stojí aj na svetlom podklade (pripravovaná sekcia v katalógu) a natvrdo tmavé farby by tam boli takmer neviditeľné. */ .eshop-tlacidlo.zamknuty, .tlacidlo.zamknuty{ background:transparent;border-color:var(--linka-silna); color:var(--sive);cursor:default; } .eshop-tlacidlo.zamknuty:hover, .tlacidlo.zamknuty:hover{ background:transparent;border-color:var(--linka-silna); color:var(--sive); } .tlacidlo.zamknuty::before{display:none} .chystame{ font-family:var(--pismo-mono);font-size:9.5px;letter-spacing:.16em; text-transform:uppercase;font-weight:500; padding:4px 8px;border-radius:999px; /* Tokeny a nie ich tmavé dvojičky, z rovnakého dôvodu ako pri .zamknuty vyššie. V tmavom páse to vyjde na tie isté farby, na svetlom podklade je štítok čitateľný namiesto tmavej škvrny. */ background:var(--linka);color:var(--sive); } /* Na svetlom páse musí zamknuté tlačidlo vidieť tiež. */ .lista .eshop-tlacidlo.zamknuty{ border-color:var(--linka-tma-silna);color:var(--sive-tma); } /* Štítok v lište stojí nad tmavým hero pásom, ale lišta sama v .tmavy nie je, takže --linka je tu svetlá a chip by na tmavom svietil ako biela škvrna. Medená tlmená ho drží v tom istom jazyku ako .odznak-chystame nižšie. */ .lista .eshop-tlacidlo.zamknuty .chystame{ background:var(--med-tlmena);color:var(--med-svetla); } /* ---------- pripravované oblasti ---------- Oblasť, ktorá sa ešte len chystá, sa zo stránky NEODSTRAŇUJE. Odstránená sekcia vyzerá ako firma, ktorá to nerobí; stlmená sekcia vyzerá ako firma, ktorá to chystá. Stav drží aplikácia Obsah stránky (/apps/obsah/), sem prichádza ako trieda .zamknuta a štítok .odznak-chystame. Stlmenie je zámerne mierne. Text v pripravovanej sekcii je skutočný obsah a má sa dať prečítať; že sa nedá objednať, hovorí štítok, oznam a zhasnuté tlačidlo, nie nečitateľné písmo. Farba ide preč úplne, priehľadnosť len na 72 %, čo aj na tmavom páse drží kontrast vysoko nad hranicou. */ .odznak-chystame{ display:inline-flex;align-items:center;gap:6px;vertical-align:middle; margin-left:10px;padding:4px 9px 4px 7px;border-radius:999px; border:1px solid var(--med-tlmena);background:var(--med-tlmena); color:var(--med); font-family:var(--pismo-mono);font-size:10px;letter-spacing:.14em; text-transform:uppercase;font-weight:500;line-height:1;white-space:nowrap; /* Nadpisy majú tesný prestrk a veľkú sadzbu; štítok sa nesmie ťahať s nimi. */ text-indent:0; } .odznak-chystame.drobny{ margin-left:7px;padding:2px 7px 2px 5px;font-size:8.5px;letter-spacing:.1em;gap:4px; } .znak-zamku{width:12px;height:12px;flex:none} .odznak-chystame.drobny .znak-zamku{width:10px;height:10px} .znak-zamku.velky{width:17px;height:17px} /* Odkaz na pripravovanú oblasť. Zamknutá vec sa nedá stlačiť, preto je to ; sadzbu má rovnakú ako susedné odkazy, len sivú a s kladkou. */ .odkaz-chystame{ color:var(--sive);cursor:default; display:inline-flex;align-items:center;gap:6px;white-space:nowrap; } .odkaz-chystame .znak-zamku{ width:12px;height:12px;flex:none;display:inline-block;opacity:.9; } .lista-menu .odkaz-chystame:hover{color:var(--med)} .menu-panel .odkaz-chystame{cursor:default} /* Oznam v hlave pripravovaného pása. Toto je jediná časť zamknutej sekcie, ktorá sa nestlmuje: je to práve tá informácia, kvôli ktorej sa stlmuje zvyšok. */ .pas-chystame{ margin:0 0 34px;padding:20px 24px;max-width:74ch; border:1px solid var(--med-tlmena);border-left:3px solid var(--med); border-radius:var(--r);background:var(--med-tlmena); } .pas-chystame-hlava{ display:flex;align-items:center;gap:9px;color:var(--med);margin-bottom:10px; } .pas-chystame-hlava b{ font-family:var(--pismo-mono);font-size:11px;letter-spacing:.16em; text-transform:uppercase;font-weight:600; } .pas-chystame p{color:var(--text-2);line-height:1.65;max-width:62ch} .pas-chystame p + p{margin-top:10px} .pas-chystame a{color:var(--med);text-underline-offset:3px} /* ---- stlmenie samotného obsahu ---- */ /* Značková červená v pripravovanej oblasti nemá čo robiť: je to jediný krik na stránke a patrí tomu, čo naozaj beží. */ .zamknuta .stitok.cerveny, .zamknuta .smer-kresba, .zamknuta .hladina i, .zamknuta .rozsah-napatie{filter:grayscale(1)} /* Stlmenie je mierne zámerne. Odkedy je šraf výrazný, nesie signál sám a silnejšie stlmenie by text zrážalo druhýkrát; drobné popisky by pod oboma naraz už neboli čitateľné ani matne. */ .zamknuta .uvodka, .zamknuta .pod-uvodkou, .zamknuta .polozky, .zamknuta .rozsah, .zamknuta .pravny, .zamknuta .ziadosti, .zamknuta .stupne, .zamknuta .nerobime, .zamknuta .postup{opacity:.9} /* ---- kladka namiesto obsahu ---- Zamknutá vec neukazuje svoj popis, ukazuje kladku a pod ňou štítok. Predtým tu bol medený šraf cez text; vyzeral dobre, ale text pod ním sa musel lúštiť a na karte v katalógu prekrýval aj cenu. Kladka povie to isté na prvý pohľad a nič nezakrýva, lebo pod ňou už nič nie je. */ .zamok-velky{ display:flex;flex-direction:column;align-items:center;gap:12px; padding:clamp(14px,2.4vh,26px) 0;color:var(--sive-tma); } .zamok-kresba{width:clamp(34px,3.4vw,46px);height:auto;flex:none;color:var(--med)} .zamok-velky .odznak-chystame{margin-left:0} /* Zamknutá karta sa nedá stlačiť ani vybrať tabulátorom. */ .hero-sluzba.zamknuta,.smer.zamknuta{cursor:default} .hero-sluzba.zamknuta:hover,.smer.zamknuta:hover{transform:none;box-shadow:none} .smer.zamknuta{border-color:var(--linka)} .smer.zamknuta:hover::before{transform:scaleX(0)} /* Bod pripravovaného pása v ľavej koľajnici. */ .kolaj .bod.zamknuty .bod-popis span{color:var(--sive-tma)} .kolaj .bod.zamknuty .bod-znak{border-color:var(--med)} @media (max-width:700px){ .pas-chystame{padding:16px 18px;margin-bottom:26px} .odznak-chystame{margin-left:8px} } /* Košík na podstránke e-shopu. Číslo v odznaku pri pridaní poskočí, to je celé potvrdenie. */ .kosik-tlacidlo{ display:inline-flex;align-items:center;gap:10px; padding:9px 16px;border:1px solid currentColor;border-radius:var(--r); background:transparent;cursor:pointer; font-size:13.5px;font-weight:650;white-space:nowrap; transition:background var(--cas) var(--krivka),color var(--cas) var(--krivka), border-color var(--cas) var(--krivka); } .kosik-tlacidlo:hover{background:var(--cervena);border-color:var(--cervena);color:#fff} .kosik-pocet{ min-width:20px;height:20px;padding:0 6px;border-radius:999px; display:grid;place-items:center; background:var(--cervena);color:#fff; font-family:var(--pismo-mono);font-size:11px;font-weight:600; font-variant-numeric:tabular-nums; transform:scale(0);transition:transform var(--cas) var(--krivka); } .kosik-tlacidlo:hover .kosik-pocet{background:#fff;color:var(--cervena)} .kosik-pocet.je{transform:scale(1)} .kosik-pocet.skok{animation:skok .42s var(--krivka)} @keyframes skok{ 0%{transform:scale(1)} 38%{transform:scale(1.42)} 100%{transform:scale(1)} } /* ---------- menu na telefóne ---------- Na úzkej obrazovke sa štyri odkazy, značka a košík do jedného riadka nezmestia. Odkazy preto odídu za tlačidlo a otvoria sa cez celú plochu, veľkým písmom. Je to tá istá sadzba ako v hero páse, len ako menu. */ .menu-tlacidlo{ display:none; width:40px;height:36px;flex:none; align-items:center;justify-content:center;gap:5px;flex-direction:column; border:1px solid currentColor;border-radius:var(--r); background:transparent;cursor:pointer; } .menu-tlacidlo i{display:block;width:16px;height:1.5px;background:currentColor; transition:transform var(--cas) var(--krivka),opacity var(--cas) var(--krivka)} .menu-je .menu-tlacidlo i:first-child{transform:translateY(3.25px) rotate(45deg)} .menu-je .menu-tlacidlo i:last-child{transform:translateY(-3.25px) rotate(-45deg)} .menu-panel{ position:fixed;inset:0;z-index:70; display:flex;flex-direction:column;justify-content:center;gap:6px; padding:0 clamp(18px,6vw,34px); background:var(--uhol);color:var(--text-tma); opacity:0;visibility:hidden; transition:opacity var(--cas) var(--krivka),visibility var(--cas); } .menu-je .menu-panel{opacity:1;visibility:visible} /* Aj .odkaz-chystame: zamknutý e-shop tu stojí ako a nie , lebo nemá kam viesť. Riadok musí vyzerať rovnako ako ostatné, inak by vypadol z rytmu menu. */ .menu-panel a, .menu-panel > .odkaz-chystame{ font-family:var(--pismo-nadpis);font-size:clamp(30px,9vw,44px); font-weight:800;letter-spacing:-.03em;line-height:1.25; text-decoration:none;color:var(--text-tma); border-bottom:1px solid var(--linka-tma);padding:14px 0; display:flex;align-items:baseline;justify-content:space-between;gap:16px; } .menu-panel > .odkaz-chystame{color:var(--sive-tma)} .menu-panel a:last-of-type{border-bottom:0} .menu-panel a .cislo, .menu-panel > .odkaz-chystame .cislo{ font-family:var(--pismo-mono);font-size:12px;letter-spacing:.16em; color:var(--cervena);font-weight:500; } .menu-panel .spodok{ margin-top:28px;display:grid;gap:6px; font-size:14.5px;color:var(--text-tma-2); } .menu-panel .spodok a{ font-family:var(--pismo-telo);font-size:15.5px;font-weight:600; border:0;padding:0;display:inline;letter-spacing:0; } @media (max-width:860px){ .lista-menu{display:none} .menu-tlacidlo{display:flex} } /* Nad 860 px menu na plochu nikdy nepatrí, ani keby v pamäti ostal otvorený. */ @media (min-width:861px){ .menu-panel{display:none} } /* ---------- pätička ---------- Aplikácie do nej patria, ale ticho. Zákazník ich nepotrebuje, ja áno. */ .pata{background:var(--uhol);color:var(--text-tma-2);padding-block:var(--pas-maly)} .pata a{color:var(--text-tma-2);text-decoration:none} .pata a:hover{color:var(--cervena)} .pata-vrch{ display:grid;gap:clamp(32px,5vw,64px); grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); padding-bottom:clamp(36px,5vw,60px); border-bottom:1px solid var(--linka-tma); } .pata-stlpec h4{ font-size:var(--v-stitok);font-family:var(--pismo-mono); letter-spacing:.2em;text-transform:uppercase;font-weight:500; color:var(--text-tma-3);margin-bottom:18px; } .pata-stlpec ul{list-style:none;display:grid;gap:11px;font-size:14.5px} .pata-stlpec .sila{color:var(--text-tma);font-weight:600} .pata-spodok{ display:flex;justify-content:space-between;align-items:center; gap:20px;flex-wrap:wrap;padding-top:26px;font-size:12.5px; color:var(--text-tma-3); } .pata-spodok .eens-mark{height:18px} .pata-znacka{display:flex;align-items:center;gap:10px} /* Vstup do interných aplikácií. Rovnaké riešenie ako vo V1: po ruke, ale nemá ťahať oko. */ .pata-app{ border:1px solid var(--linka-tma-silna);border-radius:var(--r); padding:6px 13px;font-size:12px;white-space:nowrap; transition:color var(--cas-rychly),border-color var(--cas-rychly); } .pata-app:hover{border-color:var(--cervena)} /* ---------- nábeh pásov ---------- Prvok čaká pod svojou polohou a nabehne, keď ho pozorovateľ uvidí. Bez JS ostane viditeľný, preto je stav zapnutý až triedou .caka. */ .caka{opacity:0;transform:translateY(26px)} .caka.videny{ opacity:1;transform:none; transition:opacity var(--cas-scena) var(--krivka), transform var(--cas-scena) var(--krivka); } /* Zoznam kariet nabieha po jednej, nie naraz. */ .caka[data-poradie]{transition-delay:calc(var(--poradie,0) * 90ms)} @media (max-width:1023px){ .stranka{padding-left:0} } /* Kto má vypnutý pohyb, dostane hotovú stránku bez akéhokoľvek nábehu. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important; } .caka{opacity:1;transform:none} .hlava-pasu .ciarka{transform:scaleX(1)} } /* ---------- strucná päta ---------- Podpis a tichý vstup do interných aplikácií. Údaje firmy sú na /kontakt, na jednom mieste, takže tu už nemajú čo robiť. */ .pata.strucna{padding-block:clamp(28px,3.4vw,44px)} .pata.strucna .pata-spodok{border-top:0;padding-top:0;margin-top:0} /* ---------- prepínač jazyka ---------- Vlajka jazyka, do ktorého odkaz vedie, teda čo dostanem po kliknutí. V lište stojí za Kontaktom ako posledná položka menu, na telefóne pred tlačidlom katalógu, kde je na dosah palca. Vlajka je kreslená, nie emoji ani obrázok: emoji vlajka sa na Windows nevykreslí vôbec a obrázok by bol jediná rastrová vec na stránke. */ .jazyk{ display:inline-flex;align-items:center;justify-content:center;flex:none; padding:6px;border-radius:var(--r);line-height:0; transition:opacity var(--cas-rychly) var(--krivka); } .jazyk .vlajka{ width:22px;height:auto;display:block;border-radius:1px; box-shadow:0 0 0 1px rgba(255,255,255,.22); } .jazyk:hover{opacity:.75} .jazyk-mobil{display:none} @media (max-width:860px){ /* Nad 860 px je vlajka v menu, pod ním sa menu skryje a vlajka sa presunie do lišty pred tlačidlo katalógu. */ .lista-menu .jazyk{display:none} .jazyk-mobil{display:inline-flex} } @media (max-width:640px){ .jazyk-mobil{padding:4px} .jazyk .vlajka{width:20px} }