/* Motiv „Hvězdný kufřík" — akvarelová podoba v duchu Malého prince. Zapíná se atributem data-motiv="hvezdny" na ; bez něj se z tohohle souboru neuplatní nic. Původní vzhled zůstává výchozí. Zásada, kterou to nesmí porušit: obrázky jsou POZADÍ a OZDOBA, ne podklad pod textem. Průvodce čte tyhle obrazovky venku na slunci, jednou rukou. Proto kartičky zůstávají skoro neprůhledné a text tmavý. */ @font-face { font-family: 'Caveat'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/pisma/caveat-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'Caveat'; font-weight: 600; font-style: normal; font-display: swap; src: url('/vendor/pisma/caveat-latin-ext-600.woff2') format('woff2'); unicode-range: U+0100-024F, U+0300-0301, U+030C; } @font-face { font-family: 'Caveat'; font-weight: 700; font-style: normal; font-display: swap; src: url('/vendor/pisma/caveat-latin-700.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'Caveat'; font-weight: 700; font-style: normal; font-display: swap; src: url('/vendor/pisma/caveat-latin-ext-700.woff2') format('woff2'); unicode-range: U+0100-024F, U+0300-0301, U+030C; } /* Alegreya — knižní antikva pro všechno, co se ČTE: metadata, odstavce, tlačítka, navigaci. Variabilní font, jeden soubor nese váhy 400–700. */ @font-face { font-family: 'Alegreya'; font-weight: 400 800; font-style: normal; font-display: swap; src: url('/vendor/pisma/alegreya-latin.woff2') format('woff2'); unicode-range: U+0000-00FF; } @font-face { font-family: 'Alegreya'; font-weight: 400 800; font-style: normal; font-display: swap; src: url('/vendor/pisma/alegreya-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+0300-0301, U+030C; } /* Typografický systém (redesign 31. 8.): — rukopis (Caveat): JEN názvy, velké nadpisy a poetické prvky; — antikva (Alegreya): nadpisy sekcí, tlačítka, navigace, metadata, odstavce; — nic dalšího. Rukopis na všem působil lacině a fonty spolu nesouvisely. */ html[data-motiv="hvezdny"] { --papir: #f7efdc; --karta: #fdf8ec; --linka: #ddd0b0; --inkoust: #33291c; --seda: #7b6a52; --zelena: #1d3a5c; /* noční modř místo zelené — hlavička je obloha */ --zelena-tmava: #142a45; --okr: #c9922f; --okr-tmavy: #8a5f16; --zlata: #f0dda4; /* zlatý text na noční obloze */ --rukopis: 'Caveat', 'Baloo 2', cursive; --nadpisy: 'Alegreya', Georgia, 'Times New Roman', serif; } html[data-motiv="hvezdny"] body { font-family: 'Alegreya', Georgia, 'Times New Roman', serif; font-size: 16.5px; } /* Papír pod vším. Dlaždice, ne roztažený obrázek — na tabletu i na telefonu pak vypadá stejně hrubě. */ html[data-motiv="hvezdny"] body { background: var(--papir) url('/motiv/papir.jpg') repeat; background-size: 420px auto; } /* ---------- hlavička jako noční obloha ---------- Hlavička nese identitu: medailon planety, velký název rukou psaný zlatem. Jméno, škola a menu jsou upozaděné; Odhlásit bydlí v menu „…". */ html[data-motiv="hvezdny"] header { background: var(--zelena-tmava) url('/motiv/obloha.jpg') center/cover no-repeat; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .3); padding: 10px 14px; gap: 12px; position: static; /* velká hlavička nesmí ujídat obrazovku při rolování */ } /* Text na obloze potřebuje stín, jinak zanikne ve světlé části obrázku. */ html[data-motiv="hvezdny"] header .titul, html[data-motiv="hvezdny"] header .kdo { text-shadow: 0 1px 4px rgba(10, 16, 30, .95), 0 0 12px rgba(10, 16, 30, .7); } html[data-motiv="hvezdny"] header .titul { font-family: var(--rukopis); font-size: 38px; font-weight: 700; letter-spacing: 1px; color: var(--zlata); } /* Uživatelské drobnosti jsou TICHÉ — hlavičce vládne logo a název. */ html[data-motiv="hvezdny"] header .kdo { font-size: 11.5px; opacity: .7; } html[data-motiv="hvezdny"] header button.verze, html[data-motiv="hvezdny"] header button.odhlasit { background: rgba(10, 16, 30, .35); border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(2px); opacity: .9; } /* Beruška si na noční obloze vystačí sama — červená na tmavě modré je vidět dost, tmavé sklo ani světlá destička pod ní by jen přidaly rám. */ html[data-motiv="hvezdny"] header button.verze.beruska { background: none; backdrop-filter: none; opacity: 1; box-shadow: none; padding: 2px; } /* Logo v hlavičce: medailon planety s růží (dodal František/tým 31. 8.). Má vlastní malovaný okraj z natrženého papíru — žádný kruhový ořez ani prstenec, jen mírný přesah přes okraj hlavičky, aby žil. */ html[data-motiv="hvezdny"] header .mini-kufrik svg, html[data-motiv="hvezdny"] header .mini-kufrik img { display: none; } html[data-motiv="hvezdny"] header .mini-kufrik { width: 56px; height: 56px; border-radius: 0; background: url('/motiv/medailon-planeta.webp') center/contain no-repeat; box-shadow: none; margin: -2px 0; filter: drop-shadow(0 2px 4px rgba(5, 10, 20, .5)); } /* Hvězdy z původního motivu jsou na obloze zbytečné — obloha je má vlastní. */ html[data-motiv="hvezdny"] header .nebe { display: none; } /* ---------- navigace: velké papírové karty ---------- Místo úzké lišty mřížka karet s ikonou a slovem — dítě pozná cíl podle obrázku během vteřiny a prst má kam mířit (min. 84 px). */ html[data-motiv="hvezdny"] nav.zalozky { position: static; background: none; padding: 12px 10px 4px; gap: 8px; max-width: 640px; margin: 0 auto; align-items: stretch; } html[data-motiv="hvezdny"] nav.zalozky a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-width: 56px; min-height: 86px; padding: 10px 3px 8px; background: var(--karta); border: 1.5px solid var(--linka); border-radius: 16px; color: var(--inkoust); font-family: var(--nadpisy); font-weight: 700; font-size: 13px; box-shadow: 0 1px 3px rgba(90, 70, 40, .14); } html[data-motiv="hvezdny"] nav.zalozky a.aktivni { background: #f3dfae; border-color: var(--okr); color: #5d4310; box-shadow: inset 0 1px 3px rgba(138, 95, 22, .18); } /* Akvarelové předmětové ikony (Sprint 2): planetka, pero, sextant, Měsíc, rámeček, klíč. Inkoustové SVG zůstává jen jako záloha, než se obrázek načte — pod akvarelem se skrývá. */ html[data-motiv="hvezdny"] nav.zalozky .zalozka-ikona { display: block; line-height: 0; width: 46px; height: 40px; background: center/contain no-repeat; } html[data-motiv="hvezdny"] nav.zalozky .zalozka-ikona svg, html[data-motiv="hvezdny"] nav.zalozky .zalozka-ikona .ik { display: none; } html[data-motiv="hvezdny"] nav.zalozky a.z-trida .zalozka-ikona { background-image: url('/motiv/nav-trida.webp'); } html[data-motiv="hvezdny"] nav.zalozky a.z-denik .zalozka-ikona { background-image: url('/motiv/nav-denik.webp'); } html[data-motiv="hvezdny"] nav.zalozky a.z-mapa .zalozka-ikona { background-image: url('/motiv/nav-mapa.webp'); } html[data-motiv="hvezdny"] nav.zalozky a.z-kalendar .zalozka-ikona { background-image: url('/motiv/nav-kalendar.webp'); } html[data-motiv="hvezdny"] nav.zalozky a.z-galerie .zalozka-ikona { background-image: url('/motiv/nav-galerie.webp'); } html[data-motiv="hvezdny"] nav.zalozky a.z-sprava .zalozka-ikona { background-image: url('/motiv/nav-sprava.webp'); } html[data-motiv="hvezdny"] nav.zalozky a.z-fronta .zalozka-ikona { background-image: url('/motiv/nav-fronta.webp'); } html[data-motiv="hvezdny"] nav.zalozky .zalozka-text { line-height: 1.05; text-align: center; } /* Správa je administrativa — menší, tišší, do dětského světa nepatří. */ html[data-motiv="hvezdny"] nav.zalozky a.sprava { opacity: .72; flex-grow: .7; } html[data-motiv="hvezdny"] nav.zalozky .pocet { position: absolute; top: 5px; right: 7px; margin: 0; } /* Na desktopu karty nerostou přes celou šířku, řadí se zleva. */ html[data-motiv="hvezdny"][data-rozlozeni="desktop"] nav.zalozky { max-width: 1140px; padding: 14px 28px 4px; justify-content: flex-start; } html[data-motiv="hvezdny"][data-rozlozeni="desktop"] nav.zalozky a { flex: 0 0 auto; min-width: 104px; padding: 12px 18px 9px; font-size: 14px; } /* ---------- nadpisy: rukopis jen na názvy ---------- Rukopisem jsou psané VELKÉ věci: název stránky, jméno dítěte, přihlášení. Nadpisy sekcí a dialogů jedou v antikvě — jsou to pracovní texty. */ html[data-motiv="hvezdny"] h2 { font-family: var(--rukopis); font-size: 32px; color: #4a3a20; } html[data-motiv="hvezdny"] .krok h3, html[data-motiv="hvezdny"] .dialog h3 { font-family: var(--nadpisy); font-size: 18px; font-weight: 700; color: #5d4310; letter-spacing: .2px; } html[data-motiv="hvezdny"] .dite-karta .jmeno { font-family: var(--rukopis); font-size: 24px; } html[data-motiv="hvezdny"] .prihlaseni h1 { font-family: var(--rukopis); font-size: 46px; color: #4a3a20; } /* Odstavce, popisky a čísla jedou v antikvě — rukopisný odstavec se venku na slunci nepřečte. */ /* ---------- kartičky jako listy z herbáře ---------- */ html[data-motiv="hvezdny"] .krok, html[data-motiv="hvezdny"] .dite-karta, html[data-motiv="hvezdny"] .zaznam-karta, html[data-motiv="hvezdny"] .rvp-polozka, html[data-motiv="hvezdny"] .detska-uloha, html[data-motiv="hvezdny"] .hlaseni { background: var(--karta); border-color: var(--linka); box-shadow: 0 1px 3px rgba(90, 70, 40, .12); } html[data-motiv="hvezdny"] .dialog { background: var(--papir) url('/motiv/papir.jpg') repeat; background-size: 420px auto; } /* ---------- hlavní tlačítka ---------- CTA „Přidat poklad" po vzoru mockupu: velká papírová karta s truhlou, text v antikvě — rukopis na tlačítku vypadal jako ozdoba, ne jako akce. */ html[data-motiv="hvezdny"] .nahrat-velke { background: var(--karta); color: var(--inkoust); border: 2px solid var(--okr); border-radius: 20px; box-shadow: 0 2px 6px rgba(90, 70, 40, .18); font-family: var(--nadpisy); font-size: 24px; font-weight: 700; letter-spacing: .3px; min-height: 104px; gap: 16px; } /* Truhla místo ikony plus — „přidat poklad" doslova. Velká, s třpytem — je to hlavní akce stránky a dítě na ni má CHTÍT klepnout (Sprint 2). */ html[data-motiv="hvezdny"] .nahrat-velke .ik { display: none; } html[data-motiv="hvezdny"] .nahrat-velke::before { content: ''; width: 104px; height: 96px; flex: 0 0 auto; margin: -8px 0; background: url('/motiv/truhla-otevrena.webp') center/contain no-repeat; filter: drop-shadow(0 2px 4px rgba(90, 70, 40, .25)); } html[data-motiv="hvezdny"] button.hlavni { background: var(--zelena); font-family: var(--nadpisy); font-size: 17px; font-weight: 700; } html[data-motiv="hvezdny"] button.vedlejsi { font-family: var(--nadpisy); } /* Fialová do akvarelu nepatří — AI akce jsou zlaté jako hvězdy. */ html[data-motiv="hvezdny"] button.vedlejsi.ai, html[data-motiv="hvezdny"] button.emoji-tlacitko.ai { border-color: #d8bd7d; background: #f8efd8; color: #6b4a0d; } html[data-motiv="hvezdny"] .navrh-polozka .proc { color: #6b4a0d; } /* ---------- přihlášení ---------- Od 1. 9. tu vítá oficiální logo „PLANETA mého světa" — v obou motivech stejné, protože jméno aplikace se nemá lišit podle nastavení. (Medailon s otevřenou knihou zůstává v assetech pro jiné použití.) */ html[data-motiv="hvezdny"] .prihlaseni h1.logo-planeta { max-width: 380px; } html[data-motiv="hvezdny"] .prihlaseni .nebe { opacity: .5; } html[data-motiv="hvezdny"] button.google-hlavni { font-family: var(--nadpisy); font-size: 18px; font-weight: 700; } /* ---------- dětská mapa: planety jsou malované ---------- */ html[data-motiv="hvezdny"] .planeta-jadro { background: url('/motiv/planeta.webp') center/cover; font-size: 0; } html[data-motiv="hvezdny"] .planeta.zije .planeta-jadro { filter: saturate(1.2); } html[data-motiv="hvezdny"] .planeta-jmeno { font-family: var(--rukopis); font-size: 16px; } /* ---------- lištička ---------- Plovoucí tlačítko není systémový widget, ale liška vykukující z natrženého papíru — průvodkyně toho světa (Sprint 2). */ html[data-motiv="hvezdny"] .liska-plovouci { background: none; box-shadow: none; border-radius: 0; flex-direction: column; gap: 0; padding: 0; } html[data-motiv="hvezdny"] .liska-plovouci:hover { box-shadow: none; transform: translateY(-2px); } html[data-motiv="hvezdny"] .liska-plovouci .liska-obrazek { width: 86px; height: 86px; border-radius: 0; background: url('/motiv/liska-vykukujici.webp') center/contain no-repeat; filter: drop-shadow(0 4px 8px rgba(35, 25, 8, .4)); } html[data-motiv="hvezdny"] .liska-plovouci .liska-popisek { font-family: var(--rukopis); font-size: 17px; color: #5d4310; background: var(--karta); border: 1px solid var(--linka); border-radius: 999px; padding: 0 11px 2px; margin-top: -12px; box-shadow: 0 1px 3px rgba(90, 70, 40, .25); } /* Uvnitř chatu zůstává kulatý portrét lišky. */ html[data-motiv="hvezdny"] .liska-obrazek { border-radius: 50%; background: url('/motiv/liska.webp') center/cover; } html[data-motiv="hvezdny"] .liska-obrazek > * { display: none; } html[data-motiv="hvezdny"] .chat-hlava h3 { font-family: var(--rukopis); font-size: 24px; } /* Barevné iniciály dětí ztlumit do akvarelu — barva dál rozlišuje děti, ale nekřičí vedle sépiového papíru. Malované portréty je časem nahradí. */ html[data-motiv="hvezdny"] .inicialka:not(.portret), html[data-motiv="hvezdny"] .mini-inicialka:not(.portret), html[data-motiv="hvezdny"] .tecka { filter: saturate(.55) brightness(1.04) sepia(.12); } /* Karty dětí jako malé světy: místo iniciály akvarelový výjev (růže, baobaby, lampa…). Inicálka zůstává, jen když má dítě portrét — pak výjev z JS vůbec nepřijde. Jméno rukopisem, počet pokladů zlatě vpravo. */ /* Na telefonu jedna karta přes celou šířku (jako v mockupu) — výjev se nadechne a jméno se neláme. Na desktopu mřížka širších karet. */ html[data-motiv="hvezdny"] .deti-mrizka { grid-template-columns: 1fr; } html[data-motiv="hvezdny"][data-rozlozeni="desktop"] main.pohled-trida .deti-mrizka { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } html[data-motiv="hvezdny"] .dite-karta { padding: 0 12px 0 0; overflow: hidden; min-height: 84px; } html[data-motiv="hvezdny"] .dite-karta .dite-vyjev { display: block; flex: 0 0 84px; align-self: stretch; min-height: 84px; background-size: cover; background-position: center; border-right: 1.5px solid var(--linka); } html[data-motiv="hvezdny"] .dite-karta .dite-vyjev + .inicialka { display: none; } html[data-motiv="hvezdny"] .dite-karta .inicialka.portret, html[data-motiv="hvezdny"] .dite-karta .inicialka { margin: 14px 0 14px 12px; } html[data-motiv="hvezdny"] .pocet-pokladu { font-size: 18px; color: #8a5f16; } /* Hlavní téma dne: název rukou — je to poetický titul, ne popisek. */ html[data-motiv="hvezdny"] .uloha-hlavni { border-radius: 18px; border-color: var(--okr); min-height: 190px; } html[data-motiv="hvezdny"] .uloha-hlavni-nazev { font-family: var(--rukopis); font-size: 34px; color: #ffeebc; } /* Ikony v akvarelu nemáme, tak jim aspoň sedne barva inkoustu. */ html[data-motiv="hvezdny"] .ik { color: inherit; opacity: .85; } html[data-motiv="hvezdny"] .obor-ikona, html[data-motiv="hvezdny"] .zapisek-ikona { filter: sepia(.25); }