Componentes
Header
Quatro variantes conforme o contexto da tela. Todas respeitam safe-area-inset-top para notch e Dynamic Island.
Visão geral
Home
Logo + busca + notificações. Sticky.
Seção
Logo + título + ações. Sticky com border-bottom.
Detalhe
Fixed, scroll-aware. Título e fundo aparecem ao rolar.
Subpágina
Não sticky. Gradiente do gênero como fundo.
Anatomia
Safe Area
paddingTop: calc(env(safe-area-inset-top) + 12px) — obrigatório em todos os headers.
Container
flex items-center justify-between px-4 · altura mínima 44px
Logo / Título
Logomarca SVG na Home · logo + título em Seção · título do item em Detalhe
Ações
Touch target w-10 h-10 · ícone interno w-5 h-5 · máximo 2–3 ações
Variantes
Home
Sticky. Logo à esquerda, busca + notificações à direita. Usado na tela Coleção.
Container
sticky top-0 z-10 bg-[#0f0f0f]
flex items-center justify-between px-4 pb-3
paddingTop: calc(safe-area + 12px)
Badge notificação
absolute top-1.5 right-1.5
w-4 h-4 bg-[#C8F53C] text-[#0f0f0f]
text-[9px] font-bold rounded-full
Seção
Sticky. Logo + título à esquerda. Usado em Listas e Buscar.
Diferença do Home
Título de seção ao lado do logo
pb-2 (não pb-3)
border-bottom: 1px solid #1a1a1a
Badge de filtro ativo
absolute top-1.5 right-1.5
w-2 h-2 bg-[#C8F53C] rounded-full
Detalhe — scroll-aware
Fixed. Fundo e borda aparecem ao rolar. Título faz fade-in após passar a capa. Usado em Disco Detalhe.
Topo — transparente
Após scroll — sólido
Fundo condicional
background: scrollY > threshold ? '#0f0f0f' : 'transparent'
borderBottom: scrollY > threshold ? '1px solid #1a1a1a' : 'none'
Título fade
opacity: scrollY > threshold ? 1 : 0
transition-opacity duration-200
Botão pill translúcido
rounded-full w-9 h-9
bg: scrollY > threshold ? 'transparent' : 'rgba(0,0,0,0.6)'
Threshold
COVER_HEIGHT − 80px
(capa: 40vw, máx 240px)
Subpágina com gradiente
Não sticky — faz parte do conteúdo. Gradiente do gênero pai. Usado em GeneroDiscos.
Breadcrumb
flex items-center gap-1.5
text-white/70 text-sm active:opacity-60
Eyebrow
text-white/50 text-xs font-semibold
uppercase tracking-widest mb-1
Título h1
text-white font-bold text-2xl leading-tight
Fundo
gradientStyle(parentGenre) → inline style
ver foundation/colors.html → Gradientes de gênero
Do / Don't
Specs
| Elemento | Home | Seção | Detalhe | Subpágina |
|---|---|---|---|---|
| Posição | sticky top-0 |
sticky top-0 |
fixed top-0 |
estático |
| z-index | z-10 |
z-10 |
z-30 |
— |
| Background | #0f0f0f |
#0f0f0f |
condicional | gradientStyle(genre) |
| Border bottom | — | 1px solid #1a1a1a |
condicional | — |
| Padding horizontal | px-4 (16px) |
|||
| Padding bottom | pb-3 |
pb-2 |
pb-3 |
pb-6 |
| Safe area (obrigatório) | paddingTop: calc(env(safe-area-inset-top) + 12px) |
|||
| Touch target ações | w-10 h-10 (40×40px) · ícone interno w-5 h-5 |
|||
| Cor ícones padrão | #f5f5f5 · secundário: #888 · sobre gradiente: white |
|||