/* Vzhled „retro“ (devadesátky: nálepky, tvrdé stíny, konfety, písmo Rumburak): načítá se jen se zapnutým vzhledem, až po všech ostatních stylech. Přepisuje tokeny z web.css a pár pravidel. Třídy na : vzhled-retro, na firemních stránkách navíc vzhled-klidny (stejné barvy a tvary, bez konfet). Texty zůstávají v Nunitu, Rumburak jen na nadpisy h1 a h2, pixelový řez jen na krátké štítky. Kontrast (WCAG AA): #1d1b3a na #fff8ea 16 : 1, #4b4775 na #d4f2ec 7,4 : 1 a na bílé 8,6 : 1, bílá na #c8126b 5,4 : 1, #c43d12 na bílé 5,2 : 1. Tyrkysová #1fb5a8 a růžová #ff5fa8 mají na bílé pod 3 : 1, proto jen na ozdoby a stíny. */ html.vzhled-retro { --inkoust: #1d1b3a; --inkoust-2: #4b4775; --papir: #fff8ea; --papir-2: #f6ecd6; --akcent: #ff6b3d; --akcent-tmavy: #c43d12; --akcent-svetly: #ffe1ee; --slunce: #ffd23f; --slunce-svetle: #fff1b8; --slunce-pozadi: #fff1b8; --slunce-hrana: var(--inkoust); --tyrkys: #1fb5a8; --tyrkys-svetly: #d4f2ec; --ruzova: #ff5fa8; --magenta: #c8126b; --fialova: #7b5cd6; --linka: #e6d9bd; --linka-pole: #4b4775; --r-s: 4px; --r-m: 6px; --r-l: 10px; /* Obrys 2 px a tvrdý stín posunutý doprava dolů, jako nálepka přilepená na papír */ /* Plochy (karty, panely, boxy) mají jen jemný obrys a světlý posunutý stín, ať nepřebíjejí obsah. Tmavý obrys a tmavý stín zůstávají tlačítkům a zvýraznění po najetí myší. */ --obrys: #dcd6e8; --obrys-stin: #ebe6f3; --stin-1: 0 0 0 1.5px var(--obrys), 4px 4px 0 1.5px var(--obrys-stin); --stin-2: 0 0 0 1.5px var(--obrys), 6px 6px 0 1.5px var(--obrys-stin); --stin-3: 10px 10px 0 0 rgba(29, 27, 58, .9); --stin-produkt: 0 2px 4px rgba(29, 27, 58, .12), 0 10px 22px rgba(29, 27, 58, .18); --pismo-retro: "Rumburak", var(--pismo-nadpis); --pismo-pixel: "Rumburak Pixel", var(--pismo-znacka); --hvezda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h1v5H2zM0 2h5v1H0z' fill='%23c8126b'/%3E%3Cpath d='M2 2h1v1H2z' fill='%23ffd23f'/%3E%3C/svg%3E"); --konfety: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 40l18-30 18 30z' stroke='%23ff5fa8'/%3E%3Cpath d='M150 30q10-14 20 0t20 0 20 0' stroke='%231fb5a8'/%3E%3Cpath d='M96 128l14 14M110 128l-14 14' stroke='%237b5cd6'/%3E%3Cpath d='M20 190q10-14 20 0t20 0' stroke='%23ff6b3d'/%3E%3Cpath d='M170 170h26v26h-26z' stroke='%231d1b3a' stroke-width='4'/%3E%3C/g%3E%3Ccircle cx='200' cy='96' r='9' fill='%23ffd23f'/%3E%3Ccircle cx='60' cy='104' r='5' fill='%231fb5a8'/%3E%3Ccircle cx='128' cy='210' r='6' fill='%23ff5fa8'/%3E%3C/svg%3E"); --sachovnice: repeating-conic-gradient(var(--slunce) 0 25%, var(--inkoust) 0 50%) 0 0 / 14px 14px; } html.vzhled-retro body { background: var(--bila); } html.vzhled-retro ::selection { background: var(--slunce); color: var(--inkoust); } html.vzhled-retro h1, html.vzhled-retro h2 { font-family: var(--pismo-retro); font-weight: 400; letter-spacing: .01em; line-height: 1.08; } html.vzhled-retro h1 { text-shadow: 2px 2px 0 var(--slunce); } /* Rumburak je širší než Baloo, delší nadpisy kategorií by jinak na mobilu zabraly půl obrazovky */ html.vzhled-retro .stranka-hlava h1 { font-size: clamp(26px, 3.8vw, 40px); } /* Hlavička a menu */ html.vzhled-retro .hlava { background: rgba(255, 255, 255, .96); border-bottom: 2px solid var(--inkoust); } html.vzhled-retro .logo__ryba--pixel { image-rendering: pixelated; } html.vzhled-retro .logo__ryba--pixel .logo__ocas { transform-origin: 13px 6px; } html.vzhled-retro .logo--pata .logo__text { color: #fff; } html.vzhled-retro .logo--pata .logo__text b { color: var(--slunce); } html.vzhled-retro .menu__odkaz > a:hover, html.vzhled-retro .menu__odkaz > a[aria-current], html.vzhled-retro .menu__rozbal:hover, html.vzhled-retro .menu__rozbal--aktualni, html.vzhled-retro .menu__rozbal[aria-expanded="true"] { box-shadow: inset 0 -4px 0 var(--ruzova); } html.vzhled-retro .menu__podseznam { border: 2px solid var(--inkoust); border-radius: var(--r-l); box-shadow: 6px 6px 0 0 var(--inkoust); } html.vzhled-retro .menu__podseznam a:hover, html.vzhled-retro .menu__podseznam a[aria-current] { background: var(--slunce-svetle); box-shadow: inset 4px 0 0 var(--magenta); } html.vzhled-retro .hlava__kosik { border: 2px solid var(--inkoust); border-radius: var(--r-m); box-shadow: 3px 3px 0 var(--inkoust); } html.vzhled-retro .hlava__kosik:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--inkoust); } html.vzhled-retro .hlava__ucet { border-radius: var(--r-m); } html.vzhled-retro .hlava__ucet:hover { background: var(--slunce-svetle); } @media (max-width: 860px) { html.vzhled-retro .menu__prepinac { border: 2px solid var(--inkoust); border-radius: var(--r-m); box-shadow: 3px 3px 0 var(--inkoust); } html.vzhled-retro .menu__seznam { border-bottom: 3px solid var(--inkoust); } html.vzhled-retro .menu__podseznam, html.vzhled-retro .menu--js .menu__podseznam { border: 0; box-shadow: none; } html.vzhled-retro .menu__podseznam a:hover, html.vzhled-retro .menu__podseznam a[aria-current] { background: none; box-shadow: none; } } /* Tlačítka: hranatější, tvrdý stín, při stisku se „přimáčknou“ na papír */ html.vzhled-retro .tlacitko:not(.tlacitko--text) { --tl-hrana: var(--inkoust); border: 2px solid var(--inkoust); border-radius: var(--r-m); box-shadow: 4px 4px 0 var(--inkoust); } html.vzhled-retro .tlacitko:not(.tlacitko--text):hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--inkoust); } html.vzhled-retro .tlacitko:not(.tlacitko--text):active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--inkoust); } html.vzhled-retro .tlacitko:not(.tlacitko--text):disabled, html.vzhled-retro .tlacitko[aria-disabled="true"]:not(.tlacitko--text) { transform: none; box-shadow: 4px 4px 0 var(--inkoust); } html.vzhled-retro .tlacitko--druhe:not(.tlacitko--text):hover { --tl-pozadi: var(--slunce-svetle); } html.vzhled-retro .doplnek--vybrany .doplnek__pridat { --tl-pozadi: var(--tyrkys-svetly); } html.vzhled-retro .nahled3d__prepnout[aria-pressed="true"] { --tl-pozadi: var(--inkoust); --tl-text: #fff; } html.vzhled-retro .prepinac { border: 2px solid var(--inkoust); border-radius: var(--r-m); } html.vzhled-retro .prepinac__volba { border-radius: var(--r-s); } html.vzhled-retro .prepinac__volba:hover { background: var(--slunce-svetle); } html.vzhled-retro .prepinac__volba[aria-pressed="true"], html.vzhled-retro .prepinac__volba[aria-selected="true"] { background: var(--inkoust); color: #fff; } /* Pole a volby */ html.vzhled-retro .pole input[type=text], html.vzhled-retro .pole input[type=email], html.vzhled-retro .pole input[type=tel], html.vzhled-retro .pole input[type=password], html.vzhled-retro .pole input[type=date], html.vzhled-retro .pole input[type=number], html.vzhled-retro .pole input[type=search], html.vzhled-retro .pole select, html.vzhled-retro .pole textarea { border-radius: var(--r-m); } html.vzhled-retro .pole input:focus, html.vzhled-retro .pole select:focus, html.vzhled-retro .pole textarea:focus, html.vzhled-retro .kupon__vstup:focus { box-shadow: 4px 4px 0 var(--slunce); } html.vzhled-retro .volba:has(input:checked) { border-color: var(--inkoust); background: var(--slunce-svetle); } html.vzhled-retro .zaskrt input, html.vzhled-retro .volba input, html.vzhled-retro .nastroj__hlava input, html.vzhled-retro .souhlas__volba input, html.vzhled-retro .orez__zoom input { accent-color: var(--inkoust); } /* Štítky a odznaky jako nálepky v pixelovém písmu (jen krátké texty) */ html.vzhled-retro .stitek { border: 2px solid var(--inkoust); border-radius: var(--r-s); background: var(--bila); font: 400 12px/1.4 var(--pismo-pixel); letter-spacing: .04em; } html.vzhled-retro .odznak-originalu, html.vzhled-retro .navrh-odkaz__stitek, html.vzhled-retro .simulace__stitek { font-family: var(--pismo-pixel); font-weight: 400; letter-spacing: .04em; border-radius: var(--r-s); } html.vzhled-retro .odznak-originalu { background: var(--slunce); border: 2px solid var(--inkoust); box-shadow: 2px 2px 0 var(--inkoust); } /* Sekce: pruh v tyrkysové s tečkami, nadpis s pixelovou hvězdou */ html.vzhled-retro .sekce--pruh { background: var(--tyrkys-svetly) radial-gradient(circle, rgba(31, 181, 168, .22) 1.4px, transparent 1.8px) 0 0 / 18px 18px; border-block: 2px solid var(--obrys); } html.vzhled-retro .sekce__hlava h2::before { content: ""; display: inline-block; width: 20px; height: 20px; margin: 0 12px 0 2px; vertical-align: 1px; background: var(--hvezda) center / 100% 100% no-repeat; image-rendering: pixelated; } html.vzhled-retro.vzhled-klidny .sekce__hlava h2::before { content: none; } /* Úvod: konfety v rozích a nálepka nad nadpisem */ html.vzhled-retro .hero { position: relative; isolation: isolate; border-bottom: 2px solid var(--inkoust); background: var(--akcent-svetly); } html.vzhled-retro .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--konfety) calc(100% + 60px) calc(100% + 40px) / 260px 260px no-repeat; opacity: .9; } html.vzhled-retro .hero__nadpis::before { content: "tisk od 1 kusu!" / ""; display: table; margin: 0 0 var(--m-4); padding: 6px 12px 5px; border: 2px solid var(--inkoust); border-radius: var(--r-s); background: var(--slunce); box-shadow: 3px 3px 0 var(--inkoust); font: 400 14px/1.1 var(--pismo-pixel); letter-spacing: .06em; text-transform: uppercase; text-shadow: none; transform: rotate(-3deg); } html.vzhled-retro .hero .vyhody { color: var(--inkoust); } /* Karty v hero si nechávají tmavý tvrdý stín (nálepky na papíře), zadní řada jen světlý */ html.vzhled-retro .hero__karty .vejir__karta { box-shadow: 0 0 0 2px var(--inkoust), 6px 6px 0 2px var(--inkoust); } html.vzhled-retro .hero__karty.vejir--8 > .vejir__karta:nth-child(n+6) { box-shadow: 0 0 0 1.5px var(--obrys), 4px 4px 0 1.5px var(--obrys); } /* Dlaždice kategorií a galerie šablon: bílé nálepky s obrysem a tvrdým stínem */ html.vzhled-retro .dlazdice { border-radius: var(--r-l); box-shadow: var(--stin-1); transition: transform .12s, box-shadow .12s; } html.vzhled-retro .dlazdice:hover { transform: translate(-2px, -2px); box-shadow: 0 0 0 2px var(--inkoust), 6px 6px 0 2px var(--ruzova); } html.vzhled-retro .dlazdice__scena { background: var(--tyrkys-svetly); border-bottom: 1.5px solid var(--obrys); } html.vzhled-retro .dlazdice-kategorii > li:nth-child(3n+2) .dlazdice__scena { background: var(--akcent-svetly); } html.vzhled-retro .dlazdice-kategorii > li:nth-child(3n) .dlazdice__scena { background: var(--slunce-svetle); } html.vzhled-retro .dlazdice__pocet { color: var(--akcent-tmavy); } html.vzhled-retro .galerie { gap: var(--m-5) var(--m-4); } /* Položka galerie bez rámečku a stínu, jen jemná pastelová plocha (čtyři barvy se střídají). Hlavní je karta sama, po najetí myší se zvedne (pravidlo z galerie.css) a plocha trochu ztmavne. */ html.vzhled-retro .galerie__polozka { --plocha: #f2f9f7; --plocha-hover: #e3f4ef; padding: 0 0 var(--m-4); overflow: hidden; background: var(--plocha); border-radius: var(--r-l); box-shadow: none; transition: background-color .15s; } html.vzhled-retro .galerie > li:nth-child(4n+2) .galerie__polozka { --plocha: #fdf2f6; --plocha-hover: #fbe3ec; } html.vzhled-retro .galerie > li:nth-child(4n+3) .galerie__polozka { --plocha: #fdf8e6; --plocha-hover: #fbefc6; } html.vzhled-retro .galerie > li:nth-child(4n) .galerie__polozka { --plocha: #f4f1fb; --plocha-hover: #e8e2f7; } html.vzhled-retro .galerie__polozka:hover, html.vzhled-retro .sekce--pruh .galerie__polozka:hover { background: var(--plocha-hover); transform: none; box-shadow: none; } /* Náhled karty skoro přes celou šířku položky, karta je hlavní věc, rámeček kolem jen doplněk */ /* Karta nahoře až do okraje plochy (horní rohy ořízne zaoblení plochy), texty pod ní s vlastním odsazením */ /* Smíšené kategorie mají rámeček ve tvaru karty na šířku (nejčastější formát), ať pod ní nezůstává prázdné místo. Kategorie s jediným formátem si poměr nastaví samy stylem na seznamu. */ html.vzhled-retro .galerie { --ramec: 85.6 / 54; } html.vzhled-retro .galerie__polozka .nahled { --vypln: 1; place-items: start center; margin-bottom: var(--m-3); border-radius: 0; background: none; } /* Karta se nezvedá (je u horního okraje), otočení na rub zůstává, jen bez posunu nahoru a s delší perspektivou, aby se otáčející hrana nevysunula z plochy */ html.vzhled-retro .galerie__polozka:hover .nahled__produkt { transform: none; box-shadow: none; } @media (hover: hover) { html.vzhled-retro .galerie__polozka:hover .galerie__karta--osa-y { transform: perspective(1400px) rotateY(180deg); } html.vzhled-retro .galerie__polozka:hover .galerie__karta--osa-x { transform: perspective(1400px) rotateX(180deg); } } html.vzhled-retro .galerie__polozka > :not(.nahled), html.vzhled-retro .galerie__polozka::after { padding-inline: var(--m-4); } html.vzhled-retro .galerie__kategorie { color: var(--inkoust-2); } @media (max-width: 560px) { html.vzhled-retro .galerie { gap: var(--m-4) var(--m-3); } html.vzhled-retro .galerie__polozka { padding: 0 0 var(--m-3); } html.vzhled-retro .galerie__polozka > :not(.nahled), html.vzhled-retro .galerie__polozka::after { padding-inline: var(--m-3); } } /* Kategorie: hlavička v tyrkysovém pásu, lišta filtrů, čipy jako hranaté nálepky */ html.vzhled-retro .kat-hlava-pas { background: var(--tyrkys-svetly) radial-gradient(circle, rgba(31, 181, 168, .25) 1.4px, transparent 1.8px) 0 0 / 18px 18px; border-bottom: 2px solid var(--obrys); } html.vzhled-retro .kat-nastroje { border: 0; box-shadow: var(--stin-1); } html.vzhled-retro .kat-filtr__stitek, html.vzhled-retro .kat-vlastnosti__volba { border-color: var(--obrys); border-radius: var(--r-m); background: var(--bila); } html.vzhled-retro .kat-filtr__stitek:hover, html.vzhled-retro .kat-vlastnosti__volba:hover { border-color: var(--inkoust); background: var(--slunce-svetle); } html.vzhled-retro .kat-filtr__stitek[aria-current], html.vzhled-retro .kat-vlastnosti__volba[aria-current] { background: var(--inkoust); color: #fff; box-shadow: 3px 3px 0 var(--ruzova); } html.vzhled-retro .kat-razeni select { border-radius: var(--r-m); } html.vzhled-retro .zkus__box { border: 0; box-shadow: var(--stin-1); } html.vzhled-retro .zkus__ikona { border: 2px solid var(--inkoust); box-shadow: none; } html.vzhled-retro .zkus--js .zkus__otevrit { border: 2px solid var(--inkoust); border-radius: var(--r-l); background: var(--slunce-svetle); box-shadow: 4px 4px 0 var(--inkoust); } html.vzhled-retro .kat-cta { position: relative; background: var(--slunce-svetle); border: 2px dashed var(--inkoust); } html.vzhled-retro .kat-cta::before { content: ""; position: absolute; top: -12px; right: 28px; width: 24px; height: 24px; background: var(--hvezda) center / 100% 100% no-repeat; image-rendering: pixelated; } html.vzhled-retro.vzhled-klidny .kat-cta { background: var(--papir-2); } html.vzhled-retro.vzhled-klidny .kat-cta::before { content: none; } html.vzhled-retro .kat-info .faq details { background: var(--bila); border: 1.5px solid var(--obrys); border-radius: var(--r-m); } html.vzhled-retro .faq summary::after { background: var(--slunce-svetle); border-radius: var(--r-s); } html.vzhled-retro .odkazy-stitky a { border: 2px solid var(--obrys); border-radius: var(--r-m); } html.vzhled-retro .odkazy-stitky a:hover { background: var(--slunce-svetle); } html.vzhled-retro .kroky li::before { border: 2px solid var(--inkoust); border-radius: var(--r-s); box-shadow: 2px 2px 0 var(--inkoust); } /* Detail karty a konfigurátor (plátno kreslí renderer, tady jen rámeček kolem) */ html.vzhled-retro .konf__nahled { background: var(--bila); } /* Panel s volbami má jemně tyrkysový podklad, pole a vnitřní boxy zůstávají bílé, ať jsou dobře vidět */ html.vzhled-retro .konf__panel { background: #eaf8f4; box-shadow: var(--stin-1); } html.vzhled-retro .konf__panel :is(.pole--foto, .pole--podpis, .konf-souhlas, .konf-sada, .nastroj) { background: var(--bila); border-color: var(--obrys); } html.vzhled-retro .pole__povinne { background: var(--akcent-svetly); color: var(--magenta); } html.vzhled-retro .vymysli { border-color: var(--inkoust); background: var(--akcent-svetly); } html.vzhled-retro .vymysli:hover { background: var(--ruzova); color: var(--inkoust); } html.vzhled-retro .nastroj--vybrany { border-color: var(--inkoust); } html.vzhled-retro .rychle-mnozstvi__volba[aria-pressed="true"] { border-color: var(--inkoust); background: var(--slunce-svetle); } html.vzhled-retro .pocitadlo__tlacitko:hover { background: var(--slunce); } html.vzhled-retro .pruvodce__krok--ted { border-color: var(--magenta); } html.vzhled-retro .pruvodce__krok--ted .pruvodce__cislo { background: var(--magenta); color: #fff; } html.vzhled-retro .tip { background: var(--slunce-svetle); } html.vzhled-retro .firmy-cena { border: 2px solid var(--inkoust); } html.vzhled-retro .soubor-formaty__volba[aria-current] { border-color: var(--inkoust); background: var(--slunce-svetle); box-shadow: 3px 3px 0 var(--inkoust); } html.vzhled-retro .potisk-styl:has(input:checked), html.vzhled-retro .potisk-predvolba:has(input:checked), html.vzhled-retro .potisk-produkt:has(input:checked) { border-color: var(--inkoust); box-shadow: 3px 3px 0 var(--inkoust); } /* Patička: tmavá, nahoře šachovnicový proužek */ html.vzhled-retro .pata { position: relative; padding-top: calc(var(--m-7) + 14px); } html.vzhled-retro .pata::before { content: ""; position: absolute; inset: 0 0 auto; height: 14px; background: var(--sachovnice); } html.vzhled-retro.vzhled-klidny .pata::before { background: var(--inkoust-2); height: 4px; } html.vzhled-retro .pata a:hover, html.vzhled-retro .pata__odkaz:hover { color: var(--slunce); } /* Lišta souhlasu a dialogy */ html.vzhled-retro .souhlas { border: 2px solid var(--inkoust); box-shadow: 6px 6px 0 var(--inkoust); } html.vzhled-retro .konf-dialog, html.vzhled-retro .misto-dialog { border: 2px solid var(--inkoust); box-shadow: var(--stin-3); } html.vzhled-retro .konf-dialog::backdrop, html.vzhled-retro .misto-dialog::backdrop { background: rgba(29, 27, 58, .55); } /* Firemní stránky: bez konfet a bez růžových stínů */ html.vzhled-retro.vzhled-klidny .hero::before { content: none; } html.vzhled-retro.vzhled-klidny .hero__nadpis::before { content: none; } html.vzhled-retro.vzhled-klidny .dlazdice:hover { box-shadow: 0 0 0 2px var(--inkoust), 6px 6px 0 2px var(--obrys); } /* /pro-firmy: hlavička v tyrkysovém pásu s tečkami (jako kategorie), štítek nad nadpisem jako nálepka */ html.vzhled-retro .firmy-hero { background: var(--tyrkys-svetly) radial-gradient(circle, rgba(31, 181, 168, .22) 1.4px, transparent 1.8px) 0 0 / 18px 18px; } html.vzhled-retro .firmy-hero__stitek { border: 2px solid var(--inkoust); border-radius: var(--r-s); background: var(--slunce); box-shadow: 3px 3px 0 var(--inkoust); font: 400 13px/1.2 var(--pismo-pixel); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-2deg); } @media (max-width: 860px) { html.vzhled-retro .hero::before { background: var(--konfety) calc(100% + 120px) -90px / 190px 190px no-repeat; } html.vzhled-retro h1 { text-shadow: 2px 2px 0 var(--slunce); } } @media (prefers-reduced-motion: reduce) { html.vzhled-retro .tlacitko:not(.tlacitko--text), html.vzhled-retro .galerie__polozka, html.vzhled-retro .dlazdice, html.vzhled-retro .hlava__kosik { transition: none; } }