/** * Designový systém platformy Vozákovi. * * Navazuje na app.css — bere si z něj písmo a reaguje na data-vz-mode / * data-vz-theme na . Barvy nástrojů si ale drží vlastní, syté: brandová * paleta je tlumená (je stavěná pro dlouhé čtení pošty) a na rozcestníku * splývala do jednoho šedivého dojmu. * * Ústřední myšlenka: barva je navigace, ne dekorace. Každý nástroj má svou * barvu a nosí si ji všude. Podrobně v DESIGN-SYSTEM.md. */ /* ------------------------------------------------------------------ výška app.css je psané pro poštu: ta drží pevnou výšku okna a posouvání si řeší uvnitř sloupců (`html, body { height: 100% }`, `body { overflow: hidden }`). Stránky platformy jsou naopak dokumenty, které rostou do výšky — bez tohohle se delší obsah (třeba seznam skladeb z chatu) ořízne a nejde k němu doscrollovat. Soubor načítá jen rozcestník, hudba a profil, pošty se to netýká. */ html { height: auto; overflow-y: auto; /* Ať stránka neposkakuje do stran, když scrollbar přibude a zase zmizí. */ scrollbar-gutter: stable; } body { height: auto; min-height: 100vh; overflow: visible; /* Patička patří dolů, i když je obsahu málo. */ display: flex; flex-direction: column; } :root { /* --- barvy nástrojů --- Tři sytosti na každý nástroj: plná (plochy), tmavší (text na světlém) a světlejší (text na tmavém). Bez toho by text buď zmizel v pozadí, nebo nešel přečíst. */ --posta-barva: #2E7DFF; --posta-tmava: #1257C7; --posta-jas: #7FB3FF; --hudba-barva: #FF0A3C; /* sytá červená v duchu YouTube Music */ --hudba-tmava: #C8002C; --hudba-jas: #FF6B85; --ucet-barva: #00BF7F; --ucet-tmava: #00805A; --ucet-jas: #3BE3AC; /* Výchozí (rozcestník sám nepatří žádnému nástroji) */ --nastroj: var(--ucet-barva); --nastroj-text: var(--ucet-tmava); --pf-mezera: 20px; --pf-radius: 18px; } /* Nástroj se nastavuje třídou na ; komponenty pak nevědí, jakou barvu mají — berou var(--nastroj). Přidat další nástroj = přidat tři řádky. */ .t-posta { --nastroj: var(--posta-barva); --nastroj-text: var(--posta-tmava); } .t-hudba { --nastroj: var(--hudba-barva); --nastroj-text: var(--hudba-tmava); } .t-ucet { --nastroj: var(--ucet-barva); --nastroj-text: var(--ucet-tmava); } /* V tmavém režimu se text projasní — sytá barva by na tmavém pozadí splynula. */ [data-vz-mode="dark"] .t-posta { --nastroj-text: var(--posta-jas); } [data-vz-mode="dark"] .t-hudba { --nastroj-text: var(--hudba-jas); } [data-vz-mode="dark"] .t-ucet { --nastroj-text: var(--ucet-jas); } [data-vz-mode="dark"] { --nastroj-text: var(--ucet-jas); } /* --------------------------------------------------------------- pozadí „V" Značka se pomalu vznáší v pozadí. Je to jediná ozdoba na stránce a je schválně sotva patrná (4 % krytí) — má dát ploše charakter, ne na sebe upozorňovat. Tvar „V" je přesně ten z brandu (assets/brand/tokens.json), obarvuje se maskou, takže si bere barvu právě otevřeného nástroje. */ body::before { content: ""; position: fixed; /* Značka se vejde celá a stojí v prázdném rohu. Plný tvar tu nefungoval: schoval se za obsah a vykukoval z něj jen trojúhelník, který vypadal jako chyba. Obrys je lehčí a čte se jako vodoznak. */ right: 4vmin; bottom: 4vmin; width: 34vmin; height: 34vmin; background: var(--nastroj); opacity: 0.16; pointer-events: none; z-index: 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M33 30 L54 30 L65 68 L79 30 L87 30 L65 90 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M33 30 L54 30 L65 68 L79 30 L87 30 L65 90 Z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; animation: pf-vznaseni 22s ease-in-out infinite; } /* Barevný nádech shora, aby stránka nezačínala plochou nicotou. */ body::after { content: ""; position: fixed; inset: 0 0 auto 0; height: 42vh; background: linear-gradient(180deg, var(--nastroj), transparent); opacity: 0.07; pointer-events: none; z-index: 0; } @keyframes pf-vznaseni { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(-2.5vmin, -3.5vmin, 0) rotate(-3deg); } } /* Obsah musí ležet nad pozadím. */ body > * { position: relative; z-index: 1; } /* ------------------------------------------------------------------ základ */ .pf-stranka { width: 100%; max-width: 880px; margin: 0 auto; padding: 0 var(--pf-mezera) 64px; /* Minimálně 17 px — čitelné i pro toho, kdo nemá brýle po ruce. */ font-size: 17px; line-height: 1.5; color: var(--text); } .pf-stranka h1 { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 4px; } .pf-stranka h2 { font-size: 21px; font-weight: 700; line-height: 1.25; margin: 0; } .pf-podnadpis { font-size: 17px; color: var(--muted); margin: 0; } /* ---------------------------------------------------------------- hlavička */ .pf-hlava { background: var(--nastroj); color: #fff; padding: calc(var(--safe-t, 0px) + 18px) var(--pf-mezera) 18px; margin-bottom: 28px; } .pf-hlava-vnitrek { max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: 14px; } .pf-hlava h1 { font-size: 26px; font-weight: 800; margin: 0; color: #fff; letter-spacing: -0.025em; } .pf-hlava-znak { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(255, 255, 255, 0.18); flex: 0 0 auto; } .pf-hlava-znak svg { stroke: #fff; } .pf-hlava-vpravo { margin-left: auto; display: flex; gap: 8px; align-items: center; } .pf-zpet { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 11px; color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; background: rgba(255, 255, 255, 0.16); } .pf-zpet:hover { background: rgba(255, 255, 255, 0.26); } .pf-zpet svg { stroke: #fff; } /* --------------------------------------------------------------- dlaždice */ .pf-dlazdice-mrizka { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 28px 0; } .pf-dlazdice { position: relative; display: block; padding: 24px; border-radius: var(--pf-radius); /* Podklad nese nádech barvy nástroje — dlaždice se pak liší celou plochou, ne jen ikonou, a rozdíl je vidět koutkem oka. */ background: linear-gradient(160deg, color-mix(in srgb, var(--nastroj) 14%, var(--surface)), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--nastroj) 26%, transparent); text-decoration: none; color: var(--text); overflow: hidden; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .pf-dlazdice:hover { transform: translateY(-3px); border-color: var(--nastroj); box-shadow: 0 12px 28px color-mix(in srgb, var(--nastroj) 22%, transparent); } .pf-dlazdice-znak { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; background: var(--nastroj); margin-bottom: 14px; box-shadow: 0 6px 16px color-mix(in srgb, var(--nastroj) 40%, transparent); } .pf-dlazdice-znak svg { stroke: #fff; } .pf-dlazdice h2 { font-size: 23px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 4px; color: var(--nastroj-text); } /* Popisek dlaždice je STAV, ne popis funkce („2 schránky", ne „zde si přečtete poštu"). Rodina ví, co je pošta. */ .pf-dlazdice-stav { font-size: 16px; color: var(--muted); margin: 0; } /* ------------------------------------------------------------------ karty */ .pf-karta { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--pf-radius); padding: 22px; margin-bottom: 16px; } .pf-karta-hlava { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .pf-karta-znak { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--nastroj); flex: 0 0 auto; } .pf-karta-znak svg { stroke: #fff; } /* --------------------------------------------------------------- tlačítka */ .pf-tl { display: inline-flex; align-items: center; justify-content: center; gap: 8px; /* 44 px je minimum, na které se dá spolehlivě trefit prstem. */ min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 12px; background: var(--nastroj); color: #fff; font: inherit; font-size: 17px; font-weight: 650; text-decoration: none; cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--nastroj) 32%, transparent); } .pf-tl:hover { filter: brightness(1.1); } .pf-tl:disabled { opacity: 0.5; cursor: default; filter: none; box-shadow: none; } .pf-tl svg { stroke: currentColor; } .pf-tl--tichy { background: transparent; color: var(--nastroj-text); border-color: var(--hairline); box-shadow: none; } .pf-tl--tichy:hover { background: var(--hover); filter: none; } /* ---------------------------------------------------------------- odznaky */ .pf-odznak { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 15px; font-weight: 600; background: var(--hover); color: var(--muted); } .pf-odznak--ok { background: color-mix(in srgb, var(--ucet-barva) 16%, transparent); color: var(--ucet-tmava); } .pf-odznak--pozor { background: color-mix(in srgb, var(--hudba-barva) 14%, transparent); color: var(--hudba-tmava); } [data-vz-mode="dark"] .pf-odznak--ok { color: var(--ucet-jas); } [data-vz-mode="dark"] .pf-odznak--pozor { color: var(--hudba-jas); } /* ------------------------------------------------------------------- chat */ .pf-chat { display: flex; flex-direction: column; gap: 14px; } .pf-chat:not(:empty) { margin-bottom: 20px; } .pf-bublina { max-width: 88%; padding: 14px 16px; border-radius: 18px; font-size: 17px; line-height: 1.5; animation: pf-prilet 0.22s ease-out; } @keyframes pf-prilet { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Zpráva od uživatele — barva nástroje, vpravo. */ .pf-bublina--ja { align-self: flex-end; background: var(--nastroj); color: #fff; border-bottom-right-radius: 6px; } /* Odpověď AI — neutrální plocha, vlevo. */ .pf-bublina--ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--hairline); border-bottom-left-radius: 6px; } .pf-bublina p { margin: 0 0 8px; } .pf-bublina p:last-child { margin-bottom: 0; } /* Otázka od AI s možnostmi ke kliknutí. Klikat je vždycky snazší než psát — a u člověka, který neví, co odpovědět, to navíc ukazuje, co se čeká. */ .pf-otazka { margin-top: 16px; } .pf-otazka:first-child { margin-top: 0; } .pf-otazka-text { font-weight: 650; margin: 0 0 10px; } .pf-moznosti { display: flex; flex-wrap: wrap; gap: 8px; } .pf-moznost { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--hairline); border-radius: 999px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .pf-moznost:hover { border-color: var(--nastroj); } /* Vybraná možnost musí být poznat i bez barvy (kvůli barvosleposti) — proto se mění i tučnost a rámeček, nejen výplň. */ .pf-moznost[aria-pressed="true"] { background: var(--nastroj); border-color: var(--nastroj); color: #fff; font-weight: 650; } /* Ukázky skladeb k výběru — sonda do nálady. */ .pf-ukazky { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .pf-ukazka { display: flex; align-items: flex-start; gap: 12px; width: 100%; min-height: 44px; padding: 12px 14px; border: 1.5px solid var(--hairline); border-radius: 13px; background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .pf-ukazka:hover { border-color: var(--nastroj); } .pf-ukazka[aria-pressed="true"] { border-color: var(--nastroj); background: color-mix(in srgb, var(--nastroj) 10%, transparent); } /* Zaškrtávátko: prázdné kolečko, po výběru plné. */ .pf-ukazka-znak { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--hairline); margin-top: 2px; transition: background 0.12s, border-color 0.12s; } .pf-ukazka[aria-pressed="true"] .pf-ukazka-znak { border-color: var(--nastroj); background: var(--nastroj); } .pf-ukazka-nazev { font-weight: 650; } .pf-ukazka-proc { font-size: 15px; color: var(--muted); margin-top: 2px; } /* Pole pro psaní. */ .pf-vstup { display: flex; gap: 10px; align-items: flex-end; } .pf-vstup textarea { flex: 1; min-height: 52px; padding: 14px 16px; border: 1.5px solid var(--hairline); border-radius: 15px; background: var(--surface); color: var(--text); font: inherit; font-size: 17px; resize: vertical; } .pf-vstup textarea:focus { outline: none; border-color: var(--nastroj); } /* Tři tečky, dokud model přemýšlí. Bez toho to vypadá, že se nic neděje — a v režimu „Pořádně" to trvá i půl minuty. */ .pf-mysli { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; } .pf-mysli span { width: 8px; height: 8px; border-radius: 50%; background: var(--nastroj); animation: pf-tecka 1.2s infinite ease-in-out; } .pf-mysli span:nth-child(2) { animation-delay: 0.15s; } .pf-mysli span:nth-child(3) { animation-delay: 0.3s; } @keyframes pf-tecka { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-5px); } } /* --------------------------------------------------------------- průvodce */ .pf-pruvodce { margin-bottom: 20px; } .pf-kroky { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 16px; } .pf-krok { text-align: center; } .pf-krok-obrazek { display: flex; align-items: center; justify-content: center; height: 92px; border-radius: 14px; background: color-mix(in srgb, var(--nastroj) 12%, transparent); color: var(--nastroj-text); margin-bottom: 10px; } .pf-krok-cislo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--nastroj); color: #fff; font-size: 15px; font-weight: 700; margin-bottom: 6px; } .pf-krok-popis { font-size: 15px; line-height: 1.4; margin: 0; color: var(--muted); } /* ------------------------------------------------------------------ různé */ .pf-hlaska { padding: 14px 16px; border-radius: 13px; border: 1px solid var(--hairline); background: var(--surface); margin-bottom: 16px; font-size: 17px; } .pf-hlaska--chyba { border-color: color-mix(in srgb, var(--hudba-barva) 45%, transparent); background: color-mix(in srgb, var(--hudba-barva) 10%, transparent); } .pf-prazdno { text-align: center; padding: 36px 20px; color: var(--muted); } @media (max-width: 560px) { .pf-stranka { padding: 0 14px 48px; } .pf-stranka h1 { font-size: 26px; } .pf-hlava { padding-left: 14px; padding-right: 14px; } .pf-bublina { max-width: 94%; } body::before { width: 96vmin; height: 96vmin; } } /* Kdo má v systému vypnuté animace, nechce je ani tady. */ @media (prefers-reduced-motion: reduce) { .pf-dlazdice, .pf-mysli span, .pf-bublina, body::before { transition: none; animation: none; } }