/* Vzhled „vesmír“ (soft space kawaii): 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-vesmir, na firemních stránkách navíc vzhled-klidny (stejné barvy a tvary, ale bez hvězdiček a planet). Klasický vzhled tenhle soubor vůbec nenačte. Kontrast (WCAG AA): #2e2757 na #fcf8ff 13,9 : 1, #5b4fa0 na #f1ebff 5,9 : 1 a na bílé 6,8 : 1, #b0350e na #ffe3ef 5,1 : 1. #7a6fb8 má na levanduli jen 3,8 : 1, proto jen na obrysy polí a velké ozdoby, ne na text. */ html.vzhled-vesmir { --inkoust: #2e2757; --inkoust-2: #5b4fa0; --inkoust-3: #7a6fb8; --papir: #fcf8ff; --papir-2: #f1ebff; --akcent: #ff6b3d; --akcent-tmavy: #b0350e; --akcent-svetly: #ffe3ef; --slunce: #ffd166; --slunce-svetle: #fff3cc; --slunce-pozadi: #fff3cc; --slunce-hrana: #ffd166; --mata: #7fd6c2; --mata-svetla: #ddf7ef; --ruzova: #ff9ec7; --planeta-1: #e2d7ff; --planeta-2: #ffe0ee; --planeta-3: #c9f2e6; --linka: #e4daff; --linka-pole: #7a6fb8; --uspech-pozadi: #ddf7ef; --varovani-pozadi: #fff3cc; --info-pozadi: #ebe4ff; --info: #3f3486; --r-s: 10px; --r-m: 14px; --r-l: 18px; /* Obrys místo stínu: prstenec 2 px a silnější spodní hrana (nemění rozměry prvku, proto přes box-shadow). */ --stin-1: 0 0 0 2px var(--linka), 0 4px 0 2px var(--linka); --stin-2: 0 0 0 2px var(--linka), 0 6px 0 2px var(--linka); --stin-3: 0 24px 64px rgba(46, 39, 87, .30); --stin-produkt: 0 2px 4px rgba(46, 39, 87, .10), 0 10px 22px rgba(46, 39, 87, .16); --pismo-pixel: "Humanart Pixel", var(--pismo-znacka); --hvezda-zluta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v3H1zM0 1h3v1H0z' fill='%23ffd166'/%3E%3C/svg%3E"); --hvezda-ruzova: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v3H1zM0 1h3v1H0z' fill='%23ff9ec7'/%3E%3C/svg%3E"); --hvezda-mata: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v3H1zM0 1h3v1H0z' fill='%237fd6c2'/%3E%3C/svg%3E"); --hvezda-fialova: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' shape-rendering='crispEdges'%3E%3Cpath d='M1 0h1v3H1zM0 1h3v1H0z' fill='%237a6fb8'/%3E%3C/svg%3E"); } html.vzhled-vesmir body { background: var(--papir); } html.vzhled-vesmir .pole ::placeholder { color: #6f6699; } /* Hlavička a menu */ html.vzhled-vesmir .hlava { background: rgba(252, 248, 255, .94); border-bottom: 2px solid var(--linka); } html.vzhled-vesmir .logo__text { color: var(--inkoust); } html.vzhled-vesmir .logo__text b { color: var(--akcent); } html.vzhled-vesmir .logo--pata .logo__text { color: #fff; } html.vzhled-vesmir .logo--pata .logo__text b { color: var(--slunce); } html.vzhled-vesmir .logo__ryba--pixel { image-rendering: pixelated; } html.vzhled-vesmir .logo__ryba--pixel .logo__ocas { transform-origin: 13px 6px; } html.vzhled-vesmir .menu__odkaz > a:hover, html.vzhled-vesmir .menu__odkaz > a[aria-current], html.vzhled-vesmir .menu__rozbal:hover, html.vzhled-vesmir .menu__rozbal--aktualni, html.vzhled-vesmir .menu__rozbal[aria-expanded="true"] { box-shadow: inset 0 -4px 0 var(--ruzova); } html.vzhled-vesmir .menu__podseznam { border: 2px solid var(--linka); border-radius: var(--r-l); box-shadow: 0 6px 0 0 var(--linka), 0 18px 36px rgba(46, 39, 87, .10); } html.vzhled-vesmir .menu__podseznam a:hover, html.vzhled-vesmir .menu__podseznam a[aria-current] { background: var(--papir-2); box-shadow: inset 3px 0 0 var(--ruzova); } html.vzhled-vesmir .hlava__kosik { border: 2px solid var(--inkoust); border-bottom-width: 4px; border-radius: 14px; } html.vzhled-vesmir .hlava__ucet { border-radius: 14px; } html.vzhled-vesmir .hlava__ucet:hover { background: var(--papir-2); } @media (max-width: 860px) { html.vzhled-vesmir .menu__prepinac { border-radius: 14px; border-bottom-width: 4px; } html.vzhled-vesmir .menu__seznam { border-bottom: 2px solid var(--linka); box-shadow: 0 18px 36px rgba(46, 39, 87, .12); } html.vzhled-vesmir .menu__nadpis { color: var(--inkoust-2); } html.vzhled-vesmir .menu__podseznam, html.vzhled-vesmir .menu--js .menu__podseznam { border: 0; box-shadow: none; } html.vzhled-vesmir .menu__podseznam a:hover, html.vzhled-vesmir .menu__podseznam a[aria-current] { background: none; box-shadow: none; } } /* Tlačítka „na zmáčknutí“: obrys 2 px, spodní hrana 5 px. Při stisku se hrana ztenčí a tlačítko sjede dolů, spodní okraj zůstane na místě a okolí neposkočí (výška -3 px vyrovná margin-bottom). */ html.vzhled-vesmir .tlacitko:not(.tlacitko--text) { --tl-pozadi: var(--slunce); --tl-text: var(--inkoust); --tl-hrana: var(--inkoust); --tl-v: 48px; --tl-hover: #ffdc85; min-height: var(--tl-v); border-width: 2px 2px 5px; border-radius: 14px; box-shadow: none; transition: transform .08s, border-width .08s, min-height .08s, background-color .15s; } html.vzhled-vesmir .tlacitko:not(.tlacitko--text):hover { transform: none; box-shadow: none; background: var(--tl-hover); } html.vzhled-vesmir .tlacitko:not(.tlacitko--text):active { transform: translateY(3px); border-bottom-width: 2px; min-height: calc(var(--tl-v) - 3px); margin-bottom: 3px; box-shadow: none; } html.vzhled-vesmir .tlacitko:not(.tlacitko--text):disabled, html.vzhled-vesmir .tlacitko[aria-disabled="true"]:not(.tlacitko--text) { transform: none; border-bottom-width: 5px; min-height: var(--tl-v); margin-bottom: 0; background: var(--tl-pozadi); } html.vzhled-vesmir .tlacitko--druhe:not(.tlacitko--text) { --tl-pozadi: var(--bila); --tl-hover: var(--papir-2); } html.vzhled-vesmir .tlacitko--male:not(.tlacitko--text) { --tl-v: 40px; border-bottom-width: 4px; } html.vzhled-vesmir .tlacitko--velke:not(.tlacitko--text) { --tl-v: 56px; } html.vzhled-vesmir .doplnek--vybrany .doplnek__pridat { --tl-pozadi: var(--mata); --tl-hover: #9be0cf; --tl-hrana: var(--inkoust); } html.vzhled-vesmir .nahled3d__prepnout[aria-pressed="true"] { --tl-pozadi: var(--inkoust); --tl-hover: #463d7a; --tl-text: #fff; } html.vzhled-vesmir .prepinac { border-radius: 14px; border-bottom-width: 4px; } html.vzhled-vesmir .prepinac__volba { border-radius: 10px; } html.vzhled-vesmir .prepinac__volba:hover { background: var(--papir-2); } html.vzhled-vesmir .prepinac__volba[aria-pressed="true"], html.vzhled-vesmir .prepinac__volba[aria-selected="true"] { background: var(--inkoust); color: #fff; } @media (prefers-reduced-motion: reduce) { html.vzhled-vesmir .tlacitko:not(.tlacitko--text) { transition: none; } } /* Pole a volby */ html.vzhled-vesmir .pole input:focus, html.vzhled-vesmir .pole select:focus, html.vzhled-vesmir .pole textarea:focus, html.vzhled-vesmir .kupon__vstup:focus { box-shadow: 0 0 0 4px rgba(255, 158, 199, .55); } html.vzhled-vesmir .volba:has(input:checked) { border-color: var(--inkoust); background: var(--papir-2); } html.vzhled-vesmir .kat-razeni select { border-radius: var(--r-m); } html.vzhled-vesmir .stitek { background: var(--papir-2); } /* Malé pixelové štítky (jen krátké texty) */ html.vzhled-vesmir .odznak-originalu, html.vzhled-vesmir .navrh-odkaz__stitek, html.vzhled-vesmir .simulace__stitek { font-family: var(--pismo-pixel); font-weight: 400; letter-spacing: .04em; border-radius: 6px; } html.vzhled-vesmir .odznak-originalu { background: var(--slunce); border: 2px solid var(--inkoust); } /* Sekce, nadpisy s pixelovou hvězdičkou */ html.vzhled-vesmir .sekce--pruh { background: var(--papir-2); border-block: 0; } html.vzhled-vesmir .sekce__hlava h2::before { content: ""; display: inline-block; width: 15px; height: 15px; margin: 0 12px 0 2px; vertical-align: 2px; background: var(--hvezda-ruzova) center / 100% 100% no-repeat; image-rendering: pixelated; } html.vzhled-vesmir .sekce--pruh .sekce__hlava h2::before { background-image: var(--hvezda-zluta); } html.vzhled-vesmir.vzhled-klidny .sekce__hlava h2::before { content: none; } /* Úvod: levandulové nebe s planetami a pixelovými hvězdičkami, v něm koláž vznášejících se kartiček (viz níže) */ html.vzhled-vesmir .hero { position: relative; isolation: isolate; background: var(--papir-2); border-radius: 0 0 40px 40px; padding-bottom: var(--m-6); } html.vzhled-vesmir .hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle closest-side, var(--planeta-1) 97%, transparent 100%) calc(100% + 60px) -90px / 360px 360px no-repeat, radial-gradient(circle closest-side, var(--planeta-2) 97%, transparent 100%) 38% calc(100% + 70px) / 180px 180px no-repeat, radial-gradient(circle closest-side, var(--planeta-3) 97%, transparent 100%) 6% 18px / 46px 46px no-repeat, radial-gradient(circle closest-side, var(--planeta-2) 97%, transparent 100%) 94% 88% / 28px 28px no-repeat; } html.vzhled-vesmir .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; image-rendering: pixelated; background: var(--hvezda-zluta) 47% 14% / 15px 15px no-repeat, var(--hvezda-ruzova) 3% 62% / 12px 12px no-repeat, var(--hvezda-mata) 55% 86% / 12px 12px no-repeat, var(--hvezda-fialova) 97% 42% / 9px 9px no-repeat, var(--hvezda-zluta) 88% 8% / 9px 9px no-repeat; } html.vzhled-vesmir .hero__nadpis::before { content: "tisk od 1 kusu" / ""; display: table; margin: 0 0 var(--m-3); padding: 5px 10px 4px; border: 2px solid var(--inkoust); border-radius: 8px; background: var(--mata-svetla); font: 400 13px/1.1 var(--pismo-pixel); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-2deg); } html.vzhled-vesmir .hero .vyhody { color: var(--inkoust-2); } html.vzhled-vesmir .hero .vyhody li::before { background-color: #fff; } /* Výhody v hero jako zaškrtnuté políčko: mátový čtvereček s obrysem a silnější spodní hranou */ html.vzhled-vesmir .hero .vyhody--fajfky { flex-direction: column; gap: 10px; font-size: var(--t-m); color: var(--inkoust); } html.vzhled-vesmir .hero .vyhody--fajfky li { display: block; position: relative; padding-left: 32px; } html.vzhled-vesmir .hero .vyhody--fajfky li::before { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; box-sizing: border-box; border: 2px solid var(--inkoust); border-bottom-width: 4px; border-radius: 7px; background: var(--planeta-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M4 8.2l3.2 3L14 4.4' fill='none' stroke='%232e2757' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; } html.vzhled-vesmir .hero .vyhody--fajfky li:nth-child(2)::before { background-color: var(--planeta-2); } html.vzhled-vesmir .hero .vyhody--fajfky li:nth-child(3)::before { background-color: var(--slunce-svetle); } html.vzhled-vesmir .hero .vyhody--fajfky li:nth-child(4)::before { background-color: var(--planeta-1); } html.vzhled-vesmir .hero .vyhody--fajfky a { color: var(--inkoust); text-decoration-color: var(--ruzova); text-decoration-thickness: 2px; text-underline-offset: 3px; } html.vzhled-vesmir .hero .vyhody--fajfky a:hover { color: var(--akcent-tmavy); } @media (max-width: 860px) { html.vzhled-vesmir .hero { border-radius: 0 0 28px 28px; } html.vzhled-vesmir .hero::before { background: radial-gradient(circle closest-side, var(--planeta-1) 97%, transparent 100%) calc(100% + 80px) -70px / 220px 220px no-repeat, radial-gradient(circle closest-side, var(--planeta-2) 97%, transparent 100%) -40px 42% / 110px 110px no-repeat, radial-gradient(circle closest-side, var(--planeta-3) 97%, transparent 100%) 92% 96% / 34px 34px no-repeat; } html.vzhled-vesmir .hero__nadpis::before { font-size: 12px; } } /* Koláž výrobků v hero („galaxie“): až 26 kartiček ve čtyřech vrstvách hloubky. v1 vpředu velké a ostré, v4 úplně vzadu malé, rozmazané a světlé (smí i za text, ten má levandulový podklad). Rozměr podle skutečné delší strany výrobku (--fyz, drobné známky mají spodní mez). Vznášení je jen transform, zadní vrstvy pomaleji a s menší výchylkou, holo karty přejíždí lesk. Paralaxa: skript uvod-hero nastavuje --px a --py (-1 až 1), posun násobí hloubka --hl. Na desktopu koláž pokrývá celé hero, na tabletu 14 a na mobilu 10 karet v pruhu nad textem. Kolik karet se kde ukáže, určuje i uvod.php (uvodKolaz), aby se skryté obrázky vůbec nestahovaly. */ html.vzhled-vesmir .kolaz { --zaklad: min(18cqw, 39cqh); container-type: size; } html.vzhled-vesmir .kolaz__kus { --x: 50%; --y: 50%; --vel: 1; --r: 0deg; --ry: 0deg; --hl: .6; --z: 30; --amp: 6px; --kyv: .8deg; --doba: 6s; --tempo: 1; --faze: 0s; --delka: calc(var(--zaklad) * var(--vel) * max(var(--fyz, 1), .62)); position: absolute; left: var(--x); top: var(--y); z-index: var(--z); display: block; width: calc(var(--delka) * min(1, var(--pomer-cislo, 1.585))); border-radius: 8px; translate: -50% -50%; transform: translate3d(calc(var(--px, 0) * var(--hl) * -34px), calc(var(--py, 0) * var(--hl) * -24px), 0); } html.vzhled-vesmir .kolaz__vznaseni { display: block; animation: kolaz-vznaseni calc(var(--doba) * var(--tempo)) ease-in-out var(--faze) infinite alternate; } html.vzhled-vesmir .kolaz__karta { width: 100%; box-shadow: 0 0 0 3px #fff, 0 14px 30px rgba(46, 39, 87, .22); transform: perspective(900px) rotate(var(--r)) rotateY(var(--ry)); transition: transform .35s cubic-bezier(.3, .9, .3, 1.25), box-shadow .35s, filter .35s, opacity .35s; } html.vzhled-vesmir .kolaz__karta > picture { position: absolute; inset: 0; display: block; } html.vzhled-vesmir .kolaz__karta > picture > img { display: block; width: 100%; height: 100%; object-fit: contain; } html.vzhled-vesmir .kolaz__kus--obrys .kolaz__vznaseni { filter: drop-shadow(0 10px 14px rgba(46, 39, 87, .22)); } html.vzhled-vesmir .kolaz__kus--holo .kolaz__karta::after { content: ""; position: absolute; inset: -10% -70%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .5) 45%, rgba(255, 205, 245, .45) 49%, rgba(185, 255, 238, .42) 53%, transparent 61%); transform: translateX(-62%); animation: kolaz-lesk 7s ease-in-out calc(var(--faze) * 1.7) infinite; } /* Vrstvy hloubky */ html.vzhled-vesmir .kolaz__kus--v1 { --hl: 1; --z: 40; --amp: 9px; --kyv: 1.1deg; } html.vzhled-vesmir .kolaz__kus--v2 { --hl: .55; --z: 30; --amp: 6px; --tempo: 1.15; } html.vzhled-vesmir .kolaz__kus--v3 { --hl: .28; --z: 20; --amp: 4px; --kyv: .5deg; --tempo: 1.6; } html.vzhled-vesmir .kolaz__kus--v4 { --hl: .12; --z: 10; --amp: 3px; --kyv: .3deg; --tempo: 2.1; } html.vzhled-vesmir .kolaz__kus--v3 .kolaz__karta { filter: blur(.9px) saturate(.85) brightness(1.05); opacity: .8; box-shadow: 0 0 0 3px #fff, 0 8px 16px rgba(46, 39, 87, .12); } html.vzhled-vesmir .kolaz__kus--v4 .kolaz__karta { filter: blur(1.8px) saturate(.7) brightness(1.1); opacity: .42; box-shadow: 0 0 0 2px #fff; } html.vzhled-vesmir .kolaz__kus--v3.kolaz__kus--obrys .kolaz__vznaseni, html.vzhled-vesmir .kolaz__kus--v4.kolaz__kus--obrys .kolaz__vznaseni { filter: none; } /* Pozice na desktopu (procenta plochy hero, text je vlevo do 50 %) */ html.vzhled-vesmir .kolaz__kus:nth-of-type(1) { --x: 67%; --y: 50%; --vel: 1.1; --r: -6deg; --ry: 10deg; --z: 45; --doba: 6.4s; --faze: -1.2s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(2) { --x: 87%; --y: 21%; --vel: .95; --r: 8deg; --ry: -12deg; --doba: 7.3s; --faze: -4.1s; --kyv: -1deg; } html.vzhled-vesmir .kolaz__kus:nth-of-type(3) { --x: 58%; --y: 26%; --vel: .9; --r: -10deg; --ry: 8deg; --doba: 5.6s; --faze: -2.7s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(4) { --x: 89%; --y: 71%; --vel: .95; --r: 12deg; --doba: 6.9s; --faze: -.4s; --kyv: 2deg; } html.vzhled-vesmir .kolaz__kus:nth-of-type(5) { --x: 62%; --y: 81%; --vel: .92; --r: -7deg; --ry: 10deg; --doba: 7.8s; --faze: -3.3s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(6) { --x: 77%; --y: 91%; --vel: 1; --r: 14deg; --z: 46; --doba: 5.2s; --faze: -1.9s; --kyv: -2.4deg; } html.vzhled-vesmir .kolaz__kus:nth-of-type(7) { --x: 80%; --y: 50%; --vel: .75; --r: 7deg; --ry: -10deg; --doba: 8.2s; --faze: -5.2s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(8) { --x: 99%; --y: 46%; --vel: .75; --r: -6deg; --doba: 7.6s; --faze: -2.2s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(9) { --x: 74%; --y: 13%; --vel: .72; --r: -5deg; --doba: 8.6s; --faze: -6.3s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(10) { --x: 98%; --y: 93%; --vel: .75; --r: -10deg; --doba: 6.1s; --faze: -3.8s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(11) { --x: 58%; --y: 57%; --vel: .7; --r: 6deg; --doba: 7.1s; --faze: -.9s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(12) { --x: 100%; --y: 12%; --vel: .75; --r: 9deg; --doba: 8.8s; --faze: -4.7s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(13) { --x: 64%; --y: 3%; --vel: .72; --r: -8deg; --doba: 6.6s; --faze: -2.9s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(14) { --x: 52%; --y: 92%; --vel: .75; --r: -12deg; --doba: 5.9s; --faze: -5.5s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(15) { --x: 46%; --y: 7%; --vel: .6; --r: 8deg; --doba: 7s; --faze: -1.5s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(16) { --x: 84%; --y: 100%; --vel: .6; --r: -6deg; --doba: 7.4s; --faze: -3.1s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(17) { --x: 86%; --y: 0%; --vel: .6; --r: 10deg; --doba: 6.8s; --faze: -4.4s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(18) { --x: 74%; --y: 70%; --vel: .6; --r: -9deg; --doba: 7.9s; --faze: -.6s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(19) { --x: 50%; --y: 100%; --vel: .6; --r: 5deg; --doba: 6.3s; --faze: -2.4s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(20) { --x: 35%; --y: 0%; --vel: .6; --r: -7deg; --doba: 7.2s; --faze: -5.8s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(21) { --x: 24%; --y: 2%; --vel: .5; --r: 9deg; --doba: 6.5s; --faze: -1.1s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(22) { --x: 2%; --y: 50%; --vel: .5; --r: -12deg; --doba: 7.7s; --faze: -3.6s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(23) { --x: 30%; --y: 100%; --vel: .5; --r: 8deg; --doba: 6.9s; --faze: -4.9s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(24) { --x: 10%; --y: 98%; --vel: .5; --r: -6deg; --doba: 7.3s; --faze: -2s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(25) { --x: 47%; --y: 42%; --vel: .5; --r: 10deg; --doba: 6.2s; --faze: -.3s; } html.vzhled-vesmir .kolaz__kus:nth-of-type(26) { --x: 99%; --y: 75%; --vel: .5; --r: -9deg; --doba: 8s; --faze: -6.1s; } /* Najetí nebo fokus: karta se zvedne, narovná a natočí k divákovi */ html.vzhled-vesmir .kolaz__kus:is(:hover, :focus-visible) { z-index: 60; outline: none; } html.vzhled-vesmir .kolaz__kus:is(:hover, :focus-visible) .kolaz__karta { transform: perspective(900px) translateY(-8px) rotate(0deg) rotateY(0deg) scale(1.1); filter: none; opacity: 1; box-shadow: 0 0 0 3px #fff, 0 24px 44px rgba(46, 39, 87, .3); } html.vzhled-vesmir .kolaz__kus:focus-visible .kolaz__karta { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--inkoust), 0 24px 44px rgba(46, 39, 87, .3); } html.vzhled-vesmir .kolaz__kus--obrys:focus-visible { outline: 3px solid var(--inkoust); outline-offset: 6px; } html.vzhled-vesmir .kolaz--stoji .kolaz__vznaseni, html.vzhled-vesmir .kolaz--stoji .kolaz__karta::after, html.vzhled-vesmir .kolaz--stoji .kolaz__ozdoba { animation-play-state: paused; } /* Ozdoby mezi kartami: planetky a pixelové hvězdičky */ html.vzhled-vesmir .kolaz__ozdoba { position: absolute; z-index: 5; translate: -50% -50%; pointer-events: none; image-rendering: pixelated; } html.vzhled-vesmir .kolaz__ozdoba--planeta { left: 73%; top: 32%; width: 58px; height: 58px; z-index: 35; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--slunce) 13% 100%); box-shadow: inset -8px -8px 0 rgba(176, 53, 14, .12); } html.vzhled-vesmir .kolaz__ozdoba--prstenec { left: 73%; top: 32%; width: 98px; height: 24px; z-index: 36; border: 5px solid var(--ruzova); border-radius: 50%; transform: rotate(-16deg); } html.vzhled-vesmir .kolaz__ozdoba--mesic { left: 93%; top: 57%; width: 34px; height: 34px; z-index: 35; border-radius: 50%; background: var(--planeta-3); box-shadow: inset -7px -5px 0 rgba(46, 39, 87, .08); } html.vzhled-vesmir .kolaz__ozdoba--planetka { left: 56%; top: 44%; width: 22px; height: 22px; z-index: 25; border-radius: 50%; background: var(--ruzova); box-shadow: inset -4px -3px 0 rgba(46, 39, 87, .1); } html.vzhled-vesmir .kolaz__ozdoba--hvezda1 { left: 60%; top: 8%; width: 18px; height: 18px; z-index: 45; background: var(--hvezda-zluta) center / 100% 100%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda2 { left: 95%; top: 33%; width: 15px; height: 15px; z-index: 45; background: var(--hvezda-ruzova) center / 100% 100%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda3 { left: 69%; top: 76%; width: 12px; height: 12px; z-index: 45; background: var(--hvezda-mata) center / 100% 100%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda4 { left: 58%; top: 97%; width: 12px; height: 12px; background: var(--hvezda-fialova) center / 100% 100%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda5 { left: 52%; top: 20%; width: 10px; height: 10px; background: var(--hvezda-zluta) center / 100% 100%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda6 { left: 82%; top: 36%; width: 12px; height: 12px; z-index: 45; background: var(--hvezda-mata) center / 100% 100%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda1, html.vzhled-vesmir .kolaz__ozdoba--hvezda3, html.vzhled-vesmir .kolaz__ozdoba--hvezda5 { animation: kolaz-trpyt 3.2s steps(2, jump-none) infinite; } html.vzhled-vesmir .kolaz__ozdoba--hvezda2, html.vzhled-vesmir .kolaz__ozdoba--hvezda6 { animation: kolaz-trpyt 2.6s steps(2, jump-none) -1.3s infinite; } @keyframes kolaz-vznaseni { from { transform: translate3d(0, calc(var(--amp) * -1), 0) rotate(calc(var(--kyv) * -1)); } to { transform: translate3d(0, var(--amp), 0) rotate(var(--kyv)); } } @keyframes kolaz-lesk { 0%, 55% { transform: translateX(-62%); } 85%, 100% { transform: translateX(62%); } } @keyframes kolaz-trpyt { from { opacity: 1; transform: scale(1); } to { opacity: .45; transform: scale(.7); } } /* Desktop: koláž přes celé hero, text nad ní na jemném levandulovém podkladu (vzadu smí být karty i pod textem) */ @media (min-width: 861px) { html.vzhled-vesmir .kolaz { position: absolute; top: 0; bottom: 0; left: 50%; z-index: 0; width: min(100vw, 1600px); translate: -50% 0; } html.vzhled-vesmir .hero__text { position: relative; z-index: 1; } html.vzhled-vesmir .hero__text::before { content: ""; position: absolute; inset: -48px -56px -40px -64px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(241, 235, 255, .94) 62%, rgba(241, 235, 255, .7) 80%, rgba(241, 235, 255, 0) 100%); } } /* Tablet: 14 karet v pruhu nad textem */ @media (max-width: 860px) { html.vzhled-vesmir .kolaz { --zaklad: min(24cqw, 36cqh); position: relative; order: -1; height: 440px; margin: calc(-1 * var(--m-3)) calc(-1 * var(--m-4)) var(--m-2); overflow: hidden; } html.vzhled-vesmir .kolaz__kus:nth-of-type(n+15) { display: none; } html.vzhled-vesmir .kolaz__kus:nth-of-type(1) { --x: 50%; --y: 50%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(2) { --x: 79%; --y: 23%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(3) { --x: 22%; --y: 29%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(4) { --x: 81%; --y: 75%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(5) { --x: 25%; --y: 78%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(6) { --x: 56%; --y: 91%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(7) { --x: 96%; --y: 50%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(8) { --x: 5%; --y: 55%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(9) { --x: 40%; --y: 11%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(10) { --x: 99%; --y: 94%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(11) { --x: 64%; --y: 10%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(12) { --x: 100%; --y: 8%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(13) { --x: 3%; --y: 8%; } html.vzhled-vesmir .kolaz__kus:nth-of-type(14) { --x: 68%; --y: 64%; } html.vzhled-vesmir .kolaz__ozdoba--planeta, html.vzhled-vesmir .kolaz__ozdoba--prstenec { left: 88%; top: 44%; } html.vzhled-vesmir .kolaz__ozdoba--mesic { left: 10%; top: 96%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda1 { left: 30%; top: 6%; } html.vzhled-vesmir .kolaz__ozdoba--hvezda5 { left: 36%; top: 55%; } } /* Mobil: 10 menších karet, pruh nejvýš 45 % výšky obrazovky */ @media (max-width: 560px) { html.vzhled-vesmir .kolaz { --zaklad: min(34cqw, 40cqh); height: min(360px, 45svh); min-height: 270px; } html.vzhled-vesmir .kolaz__kus:nth-of-type(n+11), html.vzhled-vesmir .kolaz__ozdoba--prstenec, html.vzhled-vesmir .kolaz__ozdoba--hvezda4, html.vzhled-vesmir .kolaz__ozdoba--hvezda6 { display: none; } html.vzhled-vesmir .kolaz__kus:nth-of-type(1) { --x: 50%; --y: 51%; --vel: 1.05; } html.vzhled-vesmir .kolaz__kus:nth-of-type(2) { --x: 80%; --y: 24%; --vel: .88; } html.vzhled-vesmir .kolaz__kus:nth-of-type(3) { --x: 18%; --y: 30%; --vel: .86; } html.vzhled-vesmir .kolaz__kus:nth-of-type(4) { --x: 84%; --y: 75%; --vel: .88; } html.vzhled-vesmir .kolaz__kus:nth-of-type(5) { --x: 21%; --y: 78%; --vel: .84; } html.vzhled-vesmir .kolaz__kus:nth-of-type(6) { --x: 57%; --y: 91%; --vel: .9; } html.vzhled-vesmir .kolaz__kus:nth-of-type(7) { --x: 97%; --y: 50%; --vel: .72; } html.vzhled-vesmir .kolaz__kus:nth-of-type(8) { --x: 3%; --y: 55%; --vel: .72; } html.vzhled-vesmir .kolaz__kus:nth-of-type(9) { --x: 38%; --y: 9%; --vel: .66; } html.vzhled-vesmir .kolaz__kus:nth-of-type(10) { --x: 63%; --y: 7%; --vel: .66; } html.vzhled-vesmir .kolaz__ozdoba--planeta { left: 90%; top: 46%; width: 30px; height: 30px; } html.vzhled-vesmir .kolaz__ozdoba--mesic { left: 6%; top: 96%; width: 24px; height: 24px; } } @media (prefers-reduced-motion: reduce) { html.vzhled-vesmir .kolaz__vznaseni, html.vzhled-vesmir .kolaz__karta::after, html.vzhled-vesmir .kolaz__ozdoba { animation: none; } html.vzhled-vesmir .kolaz__karta { transition: none; } } /* Dlaždice kategorií na úvodu: bílé kartičky s obrysem, scény střídají pastelové barvy */ html.vzhled-vesmir .dlazdice { border-radius: var(--r-l); } html.vzhled-vesmir .dlazdice__scena { background: radial-gradient(circle at 50% 62%, #fff 0 18%, var(--papir-2) 70%); } html.vzhled-vesmir .dlazdice-kategorii > li:nth-child(3n+2) .dlazdice__scena { background: radial-gradient(circle at 50% 62%, #fff 0 18%, var(--planeta-2) 70%); } html.vzhled-vesmir .dlazdice-kategorii > li:nth-child(3n) .dlazdice__scena { background: radial-gradient(circle at 50% 62%, #fff 0 18%, var(--mata-svetla) 70%); } html.vzhled-vesmir .dlazdice__pocet { color: var(--akcent-tmavy); } /* Galerie šablon: bílé kartičky s obrysem a silnější spodní hranou, žádné stíny */ html.vzhled-vesmir .galerie__polozka { padding: var(--m-3) var(--m-3) var(--m-4); background: var(--bila); border-radius: var(--r-l); box-shadow: 0 0 0 2px var(--linka), 0 4px 0 2px var(--linka); transition: transform .15s, box-shadow .15s; } html.vzhled-vesmir .galerie__polozka:hover, html.vzhled-vesmir .sekce--pruh .galerie__polozka:hover { background: var(--bila); transform: translateY(-2px); box-shadow: 0 0 0 2px #cfc0ff, 0 6px 0 2px #cfc0ff; } html.vzhled-vesmir .galerie__polozka .nahled { border-radius: 12px; background: radial-gradient(circle at 50% 55%, #fff 0 25%, var(--papir) 75%); } html.vzhled-vesmir .galerie__kategorie { color: var(--inkoust-2); } html.vzhled-vesmir .galerie { gap: var(--m-5) var(--m-4); } @media (max-width: 560px) { html.vzhled-vesmir .galerie { gap: var(--m-4) var(--m-3); } html.vzhled-vesmir .galerie__polozka { padding: var(--m-2) var(--m-2) var(--m-3); border-radius: var(--r-m); } } @media (prefers-reduced-motion: reduce) { html.vzhled-vesmir .galerie__polozka { transition: none; } } /* Box „zkuste to se svou fotkou“, filtr, výzva na konci kategorie, FAQ */ html.vzhled-vesmir .zkus__box { background: var(--slunce-svetle); border: 2px solid var(--slunce); border-bottom-width: 5px; box-shadow: none; } html.vzhled-vesmir .zkus__ikona { border: 2px solid var(--inkoust); box-shadow: none; } html.vzhled-vesmir .zkus--js .zkus__otevrit { border: 2px solid var(--slunce); border-bottom-width: 5px; border-radius: var(--r-l); background: var(--slunce-svetle); box-shadow: none; } html.vzhled-vesmir .kat-filtr__stitek { border-color: var(--linka); background: var(--bila); } html.vzhled-vesmir .kat-filtr__stitek:hover { border-color: var(--inkoust-3); } html.vzhled-vesmir .kat-filtr__stitek[aria-current] { border-color: var(--inkoust); background: var(--inkoust); color: #fff; } html.vzhled-vesmir .kat-cta { position: relative; background: var(--akcent-svetly); border: 2px dashed var(--ruzova); } html.vzhled-vesmir .kat-cta::before { content: ""; position: absolute; top: -8px; right: 28px; width: 15px; height: 15px; background: var(--hvezda-zluta) center / 100% 100% no-repeat; image-rendering: pixelated; } html.vzhled-vesmir.vzhled-klidny .kat-cta { background: var(--papir-2); border-color: var(--inkoust-3); } html.vzhled-vesmir.vzhled-klidny .kat-cta::before { content: none; } html.vzhled-vesmir .kat-info .faq details { background: var(--bila); border: 2px solid var(--linka); } html.vzhled-vesmir .faq summary::after { background: var(--papir-2); border-radius: 8px; } html.vzhled-vesmir .odkazy-stitky a { border: 2px solid var(--linka); } html.vzhled-vesmir .odkazy-stitky a:hover { border-color: var(--inkoust-3); } html.vzhled-vesmir .kroky li::before { border: 2px solid var(--inkoust); border-radius: 10px; } /* Detail karty a konfigurátor (plátno kreslí renderer, tady jen rámeček kolem) */ html.vzhled-vesmir .konf__nahled { background: radial-gradient(circle at 50% 45%, #fff 0 20%, var(--papir-2) 72%); } html.vzhled-vesmir .konf__panel { box-shadow: var(--stin-1); } html.vzhled-vesmir .vymysli { border-color: var(--ruzova); background: var(--akcent-svetly); color: var(--akcent-tmavy); } html.vzhled-vesmir .vymysli:hover { background: var(--ruzova); color: var(--inkoust); } html.vzhled-vesmir .pole--foto, html.vzhled-vesmir .pole--podpis { background: var(--papir); border-color: var(--inkoust-3); } html.vzhled-vesmir .konf-souhlas, html.vzhled-vesmir .konf-sada, html.vzhled-vesmir .nastroj { background: var(--papir); } html.vzhled-vesmir .nastroj--vybrany { border-color: var(--inkoust); background: var(--bila); } html.vzhled-vesmir .nastroj__ikona { background: var(--papir-2); color: var(--inkoust); } html.vzhled-vesmir .mockupy__sipka { border-bottom-width: 4px; } html.vzhled-vesmir .mnozstvi { background: none; border: 0; } html.vzhled-vesmir .rychle-mnozstvi__volba { border-color: var(--linka); } html.vzhled-vesmir .rychle-mnozstvi__volba:hover { border-color: var(--inkoust-3); } html.vzhled-vesmir .rychle-mnozstvi__volba[aria-pressed="true"] { border-color: var(--inkoust); } @media (min-width: 901px) { html.vzhled-vesmir .konf-lista__obal { border: 0; } } @media (max-width: 860px) { html.vzhled-vesmir .konf__nahled { background: var(--papir); } } /* Košík, pokladna, účet */ html.vzhled-vesmir .pocitadlo { border-color: var(--linka); } html.vzhled-vesmir .pocitadlo__tlacitko:hover { background: var(--slunce); } html.vzhled-vesmir .pruvodce__krok--ted { border-color: var(--ruzova); } html.vzhled-vesmir .pruvodce__krok--ted .pruvodce__cislo { background: var(--ruzova); } html.vzhled-vesmir .casova-osa__krok--ted .casova-osa__tecka { background: var(--ruzova); box-shadow: 0 0 0 5px rgba(255, 158, 199, .3); } html.vzhled-vesmir .krabice__cislo { border: 2px solid var(--inkoust); } html.vzhled-vesmir .vydejni-misto { border-color: var(--inkoust-3); } html.vzhled-vesmir .tip { background: var(--slunce-svetle); } html.vzhled-vesmir .ucet-menu a:hover { background: var(--papir-2); } html.vzhled-vesmir .filtr { border: 2px solid var(--linka); } html.vzhled-vesmir .obchod__info, html.vzhled-vesmir .poznamka { background: var(--papir-2); } @media (max-width: 900px) { html.vzhled-vesmir .lista { border-top: 2px solid var(--linka); box-shadow: 0 -8px 24px rgba(46, 39, 87, .10); } } /* Pro firmy a firemní kategorie: klidnější (bez hvězdiček a planet), stejné barvy a tvary */ html.vzhled-vesmir .firmy-cena { background: var(--papir-2); border: 2px solid var(--linka); } /* Patička: tmavě fialové nebe s pár hvězdičkami */ html.vzhled-vesmir .pata { position: relative; background: var(--inkoust); color: #e2d7ff; border-radius: 40px 40px 0 0; } html.vzhled-vesmir .pata::before { content: ""; position: absolute; inset: 0; pointer-events: none; image-rendering: pixelated; background: var(--hvezda-zluta) 92% 26px / 12px 12px no-repeat, var(--hvezda-ruzova) 97% 70px / 9px 9px no-repeat, var(--hvezda-mata) 55% 18px / 9px 9px no-repeat; } html.vzhled-vesmir.vzhled-klidny .pata::before { content: none; } html.vzhled-vesmir .pata__spodek { color: #cfc4f5; border-top-color: rgba(226, 215, 255, .2); } html.vzhled-vesmir .pata__spodek a { color: #e2d7ff; } html.vzhled-vesmir .pata a:hover, html.vzhled-vesmir .pata__odkaz:hover { color: var(--slunce); } @media (max-width: 640px) { html.vzhled-vesmir .pata { border-radius: 28px 28px 0 0; } } /* Lišta souhlasu a dialogy */ html.vzhled-vesmir .souhlas { border-bottom-width: 5px; } html.vzhled-vesmir .konf-dialog, html.vzhled-vesmir .misto-dialog { border: 2px solid var(--inkoust); } html.vzhled-vesmir .konf-dialog::backdrop, html.vzhled-vesmir .misto-dialog::backdrop { background: rgba(46, 39, 87, .55); } @media (max-width: 860px) { html.vzhled-vesmir .hero::after { background: var(--hvezda-zluta) 88% 12% / 12px 12px no-repeat, var(--hvezda-mata) 5% 6% / 10px 10px no-repeat, var(--hvezda-fialova) 96% 30% / 9px 9px no-repeat; } } html.vzhled-vesmir .zaskrt input, html.vzhled-vesmir .volba input, html.vzhled-vesmir .nastroj__hlava input, html.vzhled-vesmir .souhlas__volba input, html.vzhled-vesmir .orez__zoom input { accent-color: var(--inkoust); } /* Vlastní grafika a jen fotka na kartu: výběr formátu a plocha pod grafikou v barvách vesmíru */ html.vzhled-vesmir .soubor-formaty__volba { border-radius: var(--r-m); } html.vzhled-vesmir .soubor-formaty__volba:hover, html.vzhled-vesmir .soubor-formaty__volba:focus-visible { border-color: var(--inkoust-3); } html.vzhled-vesmir .soubor-formaty__volba[aria-current] { border-color: var(--inkoust); border-bottom-width: 4px; box-shadow: none; background: var(--slunce-svetle); } html.vzhled-vesmir .plocha { background: repeating-conic-gradient(#efe8ff 0% 25%, #faf7ff 0% 50%) 50% / 22px 22px; } html.vzhled-vesmir .potisk-karta__prazdna { background: repeating-linear-gradient(135deg, #fff, #fff 12px, #f5f0ff 12px, #f5f0ff 24px); } html.vzhled-vesmir .potisk-styl:has(input:checked), html.vzhled-vesmir .potisk-predvolba:has(input:checked), html.vzhled-vesmir .potisk-produkt:has(input:checked) { border-color: var(--inkoust); box-shadow: 0 0 0 2px var(--inkoust); } html.vzhled-vesmir .potisk-styl:hover { border-color: var(--inkoust-3); } html.vzhled-vesmir .potisk-doplnek:has(input:checked) { background: var(--slunce-svetle); } @media (max-width: 899px) { html.vzhled-vesmir .potisk__nahled { background: rgba(252, 248, 255, .96); } } html.vzhled-vesmir .potisk-styl__nahled { background: repeating-linear-gradient(135deg, #efe8ff, #efe8ff 8px, #f8f5ff 8px, #f8f5ff 16px); } html.vzhled-vesmir .potisk-nahrani__plocha:hover, html.vzhled-vesmir .potisk-nahrani--pretahovani .potisk-nahrani__plocha, html.vzhled-vesmir .nahrani--pretahovani { border-color: var(--inkoust-3); background: var(--papir-2); }