Food & Mind · WEB 2 · makiety i handoff
Specyfikacja nawigacji i stopki
Nagłówek nad tym tekstem działa na żywo: otwórz „Programy” myszą lub klawiszem Tab i Enter, zamknij klawiszem Esc. Poniżej 1024 px pojawia się przycisk „Menu” z pełnoekranowym panelem. Przyciski „Dla firm” (główny) i „Wesprzyj” (drugorzędny) są stałą częścią nagłówka na każdej podstronie. Nagłówek jest przyklejony do górnej krawędzi (position: sticky, z-index: 50, tło Ivory), ma tę samą wysokość co wcześniej (80 / 64 px), a cele kotwic mają scroll-margin-top równy wysokości nagłówka + 16 px. Menu mobilne (z-index: 100) przykrywa nagłówek.
Desktop 1440 px
ZamkniętyLogo → Programy ▾ · Oferta · Artykuły · Misja · Zespół · Kontakt → „Dla firm” (główny) i „Wesprzyj” (drugorzędny: jasne tło, brązowy tekst i obramowanie). 
Panel „Programy” otwartyStrzałka obrócona, 3 programy z opisem odbiorców, „Wszystkie programy →”. 
Focus na pozycji paneluObrys Teal Dark 3 px wewnątrz pozycji, Tab przechodzi w kolejności wizualnej. 
Aktywna pozycjaBelka 3 px Orange Dark pod pozycją (kształt, nie tylko kolor); link z aria-current="page".
Kontrola 1024 px6 pozycji i oba przyciski mieszczą się w jednym wierszu (odstępy menu zwężają się płynnie).
Telefon 390 px i 320 px
ZamknięteLogo + „Menu” z ikoną (44 px). 
OtwartePanel na całą wysokość, „× Zamknij”, pozycje 56 px, na dole „Dla firm” i „Wesprzyj”. 
Rozwinięte „Programy”Akordeon z 3 programami i „Wszystkie programy →” (wzór WEB 1 s. 19). 
320 pxBez przewijania w poziomie, opisy programów się zawijają.
Zachowanie
Panel „Programy” (wzorzec disclosure)
| Działanie | Wynik |
|---|---|
| Klik, Enter lub Spacja na „Programy” | otwiera / zamyka panel; aria-expanded true/false; strzałka obraca się o 180° |
| Najechanie myszą | otwarcie po 150 ms; panel nie znika przy przejściu kursorem z przycisku do panelu (obszar bez przerwy); zamknięcie 300 ms po opuszczeniu, jeśli otwarty najechaniem |
| Tab / Shift+Tab | po pozycjach panelu w kolejności wizualnej; wyjście focusem poza panel zamyka go |
| Esc | zamyka panel i przywraca focus na „Programy” |
| Klik poza panelem | zamyka panel |
Strona /programy/ | dostępna linkiem „Wszystkie programy”; przycisk „Programy” nie jest jednocześnie linkiem |
Menu mobilne (< 1024 px)
| Działanie | Wynik |
|---|---|
| „Menu” | otwiera panel role="dialog", aria-modal="true", nazwa „Menu”; focus na „Zamknij”; tło strony zablokowane |
| Tab w panelu | krąży tylko po elementach panelu (pułapka focusu) |
| Esc lub „Zamknij” | zamyka panel, focus wraca na „Menu” |
| „Programy” w panelu | akordeon, domyślnie zwinięty, aria-expanded; rozwinięty: tło Sand, lista z lewą belką Orange Dark |
| Wybór linku | zamyka panel |
| Poszerzenie okna ≥ 1024 px | panel zamyka się automatycznie |
| Ruch | bez animacji w prototypie; przy wdrożeniu maks. 200 ms i wyłączone przy prefers-reduced-motion |
Kolejność focusu
- „Przejdź do treści” (widoczny po pierwszym Tab, prowadzi do
<main id="tresc">) - Logo (link do strony głównej,
alt="Fundacja Food & Mind", nie jest H1) - „Programy” → po otwarciu: Ciastoterapia, W sieci reklam, Nakarmione Emocje, Wszystkie programy
- Oferta, Artykuły, Misja, Zespół, Kontakt
- „Dla firm”, „Wesprzyj”
- Na telefonie: logo, „Menu”; w panelu: „Zamknij”, Programy (i 4 linki po rozwinięciu), Oferta, Artykuły, Misja, Zespół, Kontakt, „Dla firm”, „Wesprzyj”
Decyzje otwarte
- „Strona główna” jako pierwsza pozycja menu mobilnego: pominięta (logo prowadzi na stronę główną) [DO DECYZJI].
- Opis „W sieci reklam” w panelu: „dla szkół podstawowych” wg briefu [do potwierdzenia z klientem].
- Kolejność menu wg WEB 1 (Programy pierwsze; klientka podała Misję przed Programami) [do potwierdzenia z klientem].
Stopka
Tło Brown, tekst Ivory (7.86), linki podkreślone, focus Ivory. Na telefonie sekcje jedna pod drugą, bez akordeonów. Logo bezpośrednio na tle Brown, bez jasnej plakietki: plik logo ma przezroczyste tło, a białe litery znaku są czytelne na ciemnym tle.
DesktopDane fundacji · Strony · Programy i social media · Newsletter; dokumenty po lewej, © i „Wdrożenie strony: Ideavo” po prawej, w jednej linii dolnego pasa. 
TelefonJedna kolumna, kolejność jak w kodzie.
Dokumenty prowadzą do stron na foodandmind.org (polityka prywatności, regulamin newslettera, standardy ochrony małoletnich - wzór w widoku „Dokument”) i statutu PDF na własnej domenie, nie do ciastoterapia.pl ani Google Drive. Facebook i Instagram mają prawdziwe adresy.