/* ============================================================ Shell: header + rail (ekrany) + scena (telefon) + panel ============================================================ */ .app { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } /* ---------------- Header ---------------- */ .header { position: relative; /* kotwica dla wyśrodkowanych statystyk panelu */ flex: 0 0 auto; height: var(--h-header); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: 0 var(--s-5) 0 var(--s-6); background: var(--c-surface); border-bottom: 1px solid var(--c-line); } /* ============================================================ NAGŁÓWEK NA EKRANIE POWITANIA Powitanie jest jednym obrazem na całe okno, więc nagłówek nie może go przecinać białym paskiem: staje się przezroczysty i przestaje zajmować miejsce w układzie. Napisy idą na biel, bo tło pod nimi jest ciemne — to ten sam zabieg co w ciemnym motywie, tylko wywołany treścią, a nie ustawieniem systemu. Znacznik nadaje js/ui/simple.js na , bo nagłówek stoi poza kreatorem i sam o powitaniu nic nie wie. ============================================================ */ body.is-hero .header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: 0; } body.is-hero .brand__mark, body.is-hero .brand__app-name { color: #ffffff; } body.is-hero .brand__sub { color: rgba(255, 255, 255, 0.72); } /* Ciemny znak na ciemnym tle znika — odwracamy dokładnie te logo, które automat uznał za ciemne (js/app.js), więc kolorowe zostają sobą. */ body.is-hero .brand__logo--invert, body.is-hero .brand__logo--app { filter: invert(1); } /* Powitanie ma jedno wyjście: przycisk na środku ekranu. Nagłówek zostaje więc samym znakiem — bez przełącznika widoku, statusu i terminu, które należą do oglądania projektu, a nie do jego zapowiedzi. Znak z nazwą wchodzi wtedy na oś ekranu. */ body.is-hero .header { justify-content: center; } body.is-hero .header__actions { display: none; } /* Nazwa projektu stoi już nad nagłówkiem — w treści powitania. Drugi raz przy znaku byłaby tym samym zdaniem powiedzianym dwa razy. */ body.is-hero .brand__title { display: none; } /* Nagłówek wyszedł z układu, więc tło powitania bierze całe okno, a sam krok nie odejmuje już jego wysokości. */ body.is-hero .wiz__hero-bg { inset: 0; } body.is-hero .wiz__hero { min-height: calc(100vh - var(--s-7) - var(--s-8)); } .brand { display: flex; align-items: center; gap: var(--s-3); min-width: 0; } /* Grupa tytułu: nazwa projektu i podtytuł, tuż obok znaku firmowego. Stała nazwa narzędzia zniknęła — mówiła to samo co logo, a tytuł projektu jest tym, po czym klient poznaje, co ogląda. */ .brand__title { display: flex; align-items: baseline; gap: 6px; min-width: 0; } /* Znak APLIKACJI (Prevka). Ma stałą wysokość — inaczej niż logo projektanta, któremu wysokość ustawia się w panelu. */ .brand__logo--app { height: 26px; } /* Nazwa aplikacji obok znaku — tylko w panelu, gdzie brandingiem jest Prevka. W podglądzie klienta tytułem jest nazwa jego projektu. */ .brand__app-name { font-size: var(--fs-16); font-weight: 700; letter-spacing: var(--ls-tight); color: var(--c-ink); white-space: nowrap; } /* Znak Prevki jest czarny, więc w ciemnym motywie odwracamy go zawsze — tu nie ma czego mierzyć, plik jest nasz. */ :root[data-theme="dark"] .brand__logo--app, :root[data-theme="dark"] .made-with__mark { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__logo--app, :root:not([data-theme="light"]) .made-with__mark { filter: invert(1); } } /* ---------------- Podpis narzędzia ---------------- „Made with Prevka" ma być informacją, nie reklamą: mały tekst, przygaszony kolor, znak wielkości litery. Stoi pod treścią i nigdy nie zasłania projektu. */ .made-with { display: flex; align-items: center; justify-content: center; gap: 6px; margin: var(--s-5) 0 0; font-size: var(--fs-11); letter-spacing: var(--ls-wide); color: var(--c-ink-faint); } .made-with__mark { width: 10px; height: auto; opacity: 0.65; } /* W kreatorze podpis zamyka kolumnę treści — stąd większy odstęp i miejsce na oddech pod przyciskami. */ .made-with--wizard { margin: var(--s-6) 0 var(--s-5); } /* Ciemny znak na ciemnym tle znika — odwracamy go, ale tylko w ciemnym motywie i tylko wtedy, gdy js/app.js uzna to za bezpieczne. */ :root[data-theme="dark"] .brand__logo--invert { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__logo--invert { filter: invert(1); } } .brand__mark { font-size: var(--fs-16); font-weight: 700; letter-spacing: var(--ls-tight); color: var(--c-ink); white-space: nowrap; } .brand__divider { width: 1px; height: 14px; background: var(--c-line-strong); align-self: center; } .brand__sub { font-size: var(--fs-16); color: var(--c-ink-muted); letter-spacing: var(--ls-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header__actions { display: flex; align-items: center; gap: var(--s-5); } /* ---------------- Nagłówek panelu administratora ---------------- Ten sam pasek co u klienta, ale niesie sterowanie całym projektem: z lewej czym pracujesz, w środku ile tego jest, z prawej co możesz zrobić. Klasy poniżej występują wyłącznie w admin/index.html. */ .header--admin { height: var(--h-header-admin); gap: var(--s-4); } .header--admin .brand { gap: var(--s-4); } .header--admin .header__actions { gap: var(--s-3); } /* Choices podmienia