Layouts de tela
Três templates base assentam sobre o fundo com a paisagem urbana de Curitiba. O split-layout e o centered-layout empilham painéis brancos semitransparentes sobre o bg (a cidade transparece a 8%); o dark-layout usa a mesma imagem sob um overlay navy sólido com 98% de opacidade. Base de 1920×1080, escalada via Math.min(w/1920, h/1080). Idle timeout: 30s dev / 3min prod.
split-layout
branco à esquerda · navy à direita
ESQUERDA: branco
rgba(255,255,255,0.92)
padding de 64px
DIREITA: navy escuro
rgba(28,42,58,0.98)
overlay sólido 0.98
- Classe CSS
- .split-layout
- Tint esquerdo
- rgba(255,255,255,0.92)
- Tint direito
- rgba(28,42,58,0.98)
- Usado por
- ValueSelection · CashInstructions · CardPayment · BanknoteDeposit
centered-layout
branco em largura total
Branco em largura total
rgba(255,255,255,0.92)
flex centered
- Classe CSS
- .centered-layout
- Tint
- rgba(255,255,255,0.92)
- Alinhamento
- flex centered
- Usado por
- HomeBalance · PaymentMethod · Confirmation · Processing
dark-layout
navy 0.98 em largura total
Navy escuro em largura total
rgba(28,42,58,0.98)
flex centered · overlay sólido 0.98
- Classe CSS
- .dark-layout
- Tint do overlay
- rgba(28,42,58,0.98)
- Alinhamento
- flex centered
- Usado por
- ScreenSaver · ExitRemoveCard
Escala & viewport
Preenchimento Math.min, preserva a proporção
Base
1920 × 1080px
Escala
Math.min(w/1920, h/1080) Imagem de BG
urbs-ds-bg.webp TopBar
position:fixed Padding
64px all sides - Proporção
- 16 : 9
- Idle timeout
- 30s dev · 3min prod
- Fonte do BG
- BRT de Curitiba (Pexels, Abner Lobo)
- Pipeline de imagem
- Astro Image · webp Q80