Screen Layouts
Three base templates sit on the Curitiba cityscape background. The split-layout and centered-layout stack semi-transparent white panels over the bg (so the city shows through at 8%); the dark-layout uses the same image under a solid navy overlay at 98% opacity. 1920×1080 base, scaled via Math.min(w/1920, h/1080). Idle timeout: 30s dev / 3min prod.
split-layout
white left · navy right
LEFT: white
rgba(255,255,255,0.92)
64px padding
RIGHT: dark navy
rgba(28,42,58,0.98)
solid 0.98 overlay
- CSS class
- .split-layout
- Left tint
- rgba(255,255,255,0.92)
- Right tint
- rgba(28,42,58,0.98)
- Used by
- ValueSelection · CashInstructions · CardPayment · BanknoteDeposit
centered-layout
full-width white
Full width white
rgba(255,255,255,0.92)
flex centered
- CSS class
- .centered-layout
- Tint
- rgba(255,255,255,0.92)
- Alignment
- flex centered
- Used by
- HomeBalance · PaymentMethod · Confirmation · Processing
dark-layout
full-width navy 0.98
Full width dark navy
rgba(28,42,58,0.98)
flex centered · solid 0.98 overlay
- CSS class
- .dark-layout
- Overlay tint
- rgba(28,42,58,0.98)
- Alignment
- flex centered
- Used by
- ScreenSaver · ExitRemoveCard
Scaling & viewport
Math.min fill, preserve aspect
Base
1920 × 1080px
Scale
Math.min(w/1920, h/1080) BG image
urbs-ds-bg.webp TopBar
position:fixed Padding
64px all sides - Aspect ratio
- 16 : 9
- Idle timeout
- 30s dev · 3min prod
- BG source
- Curitiba BRT (Pexels, Abner Lobo)
- Image pipeline
- Astro Image · webp Q80