Header
Headerul de produs — un job, două forme. Pe desktop (≥1024px) e .topbar: firmă · căutare · live, pe bej-0, deasupra coloanei de conținut. Pe mobil (<1024px) e .app-mobile-top, header-ul voalat al lui .app-mobile, în trei configurări: root, secțiune, detaliu. Contract: components/header.json. Landing și blog și-au păstrat header-ele proprii, mai jos.
Markup canonic · components/header.json
Cele două forme
Headerul răspunde la două întrebări: unde sunt și ce pot face aici. Pe desktop e un rând pe bej-0 deasupra coloanei de conținut. Pe mobil e header-ul voalat al shell-ului de produs, în trei configurări. Sub 1024px .topbar dispare cu rail-ul; căutarea devine un câmp pe ecranul care are nevoie de ea.
Desktop ≥1024 · .topbar | Mobil <1024 · .app-mobile-top | |
|---|---|---|
| Unde | pe bej-0, deasupra .layout-12, la aceeași lățime (--layout-max, --layout-pad) | primul strat al lui .app-mobile, absolut sus, peste .app-mobile-scroll |
| Suprafață | fără — stă pe fundal | voal bej-0 @ 85% + blur(7px), ca .flow-bar; solid fără backdrop-filter |
| Conținut | selectorul firmei (.select-trigger.sm.bare) · căutarea (.input-group) · .badge.live | root: logo · meniu — secțiune: titlu · acțiune — detaliu: înapoi · titlu centrat · spacer |
| Butoane | .select-trigger, .input | .btn.secondary.icon-only (40) — hamburger, acțiune, înapoi |
| Titlul | — | div.title — chrome, nu heading; h1.t-h1 al paginii rămâne în conținut |
Desktop · .topbar
Topbar · firmă · căutare · live
Un singur rând, fără suprafață proprie. .topbar se întinde la --layout-max cu --layout-pad pe laturi — exact coloana de conținut de sub el.
.select-trigger.sm.bare într-un .select-anchor; onclick deschide .popover cu firmele utilizatorului (select.json).Căutarea —
.input-group cu addon-ul lupă; placeholder parametrizabil per secțiune. Sub 1024px nu se ascunde cu CSS — devine câmpul de căutare al ecranului de listă.Live —
.badge.live + .pulse-dot; data se generează cu JS. Vechiul flex inline din templates/header.html a devenit clasa .topbar pe 2026-09-16.Mobil · .app-mobile-top — trei configurări
Root · secțiune · detaliu
Root — logo stânga, hamburger dreapta (deschide .mobile-menu); doar pe ecranul rădăcină al unei secțiuni de nivel 1. Secțiune — titlul secțiunii și o singură acțiune (mai multe → .sheet.attached deschisă din ea). Detaliu — înapoi, titlul înregistrării centrat, spacer.
Bună, Andrei
60px + --safe-top. Voalul e cel din .flow-bar (bej-0 @ 85% + blur(7px)), cu fallback solid când backdrop-filter lipsește sau utilizatorul cere transparență redusă. Titlul e chrome — un div.title (18/600 pe secțiune, 16/700 centrat pe detaliu, ca .flow-step-title); <h1 class="t-h1"> al paginii stă în .app-mobile-scroll. Detaliul poartă mereu .spacer (40px) ca titlul să rămână centrat, iar gazda e de regulă .app-mobile.no-bar — navigarea globală e în urmă, nu jos.Reguli ferme
Un div.title, nu heading. h1.t-h1 al paginii rămâne în conținut — regula tag ↔ clasă din SKILL.md nu permite un h1 la 18px.
Dreapta ține o singură acțiune. Mai multe → .sheet.attached deschisă din ea (sheet.json).
.detail poartă mereu .spacer — altfel titlul nu mai e centrat.
60 + safe-top pe toate trei; conținutul primește padding-ul din --app-mobile-top, nu din valori scrise de mână.
Nu .topbar sub 1024px, nu .app-mobile-top de la 1024px în sus. Un singur breakpoint.
Un ecran de flux are .flow-bar.top, nu .app-mobile-top. Nu logo, nu meniu global în flux.
Root are logo, secțiunea are titlu — niciodată amândouă în același header.
bej-0 @ 85% + blur(7px), același ca .flow-bar. Nu un al doilea tratament, nu alb opac.
Alte suprafețe · landing și blog
Landing · Navbar
Logo SVG stânga, linkuri centru, butoane dreapta. Trăiește pe bej-0.
display:none), rămân logo + primary. Fără burger — vezi docs/accessibility.md când e aprobat designul.Links —
.t14 (Inter 500, 14px) + hover var(--c-pink).
Blog · Header articol
Eyebrow + titlu + meta autor. Max-width 720px, centrat.
Ghid · Contabilitate
Cum interpretezi un bilanț contabil
Tot ce trebuie să știi ca să înțelegi situația financiară a firmei tale.