Kiosk UI/UX overhaul: dark landscape mode with hero countdowns and full-width layout

Redesign the landscape orientation for kiosk readability at 3-10m distance:

- Add dark kiosk background (#1a1a2e) with high-contrast light text
- Replace 2-column grid with 5-row full-width stacking layout
- Add compact weather bar (temp + sunrise/sunset) replacing full widget
- Enlarge countdown to 2em hero size in landscape
- Replace time ranges with next 2-3 absolute departure times
- Add 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange)
- Make site headers full-width blue gradient bars in landscape
- Tighten card spacing (65px min-height, 8px gap) for 4-stop visibility
- Add scrolling news ticker with /api/ticker fallback messages
- Fix daylight bar from position:fixed to relative in landscape grid
- Hide background overlay in landscape for maximum contrast
- Fix weather-section HTML missing closing div tags

All changes scoped behind body.landscape CSS selectors; other orientations unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

README.md

@@ -4,7 +4,7 @@ A modern digital signage system for displaying real-time transit departures and
 
 ![SL Transport Departures Display](screenshots/main-display.png)
 
-> **Note**: Screenshots should be added to the `screenshots/` directory. The application displays real-time transit departures in a modern, optimized layout.
+A comprehensive digital signage solution displaying real-time transit departures, weather information, and a visual daylight hours timeline.
 
 ## Features
 
@@ -21,6 +21,7 @@ A modern digital signage system for displaying real-time transit departures and
 - Current weather conditions with icons
 - Hourly forecast (8-hour outlook)
 - Sunrise/sunset times
+- **Daylight Hours Bar**: Visual 24-hour timeline at the bottom showing sunrise to sunset with animated sun/moon indicator
 - Automatic dark mode based on time of day
 
 ### ⚙️ Flexible Configuration
@@ -33,6 +34,8 @@ A modern digital signage system for displaying real-time transit departures and
 ### 🎨 Modern Design
 - Swedish color scheme (blue/yellow gradient clock banner)
 - Compact ribbon-style clock with time and date on one line
+- **Daylight Hours Bar**: Modern gradient bar with smooth color transitions from midnight blue (night) through orange/red (dawn/dusk) to yellow (day)
+- Animated sun/moon icon with pulsing glow effect
 - Optimized spacing and typography for readability
 - Responsive design that adapts to screen size
 - Smooth animations and visual effects
@@ -40,14 +43,33 @@ A modern digital signage system for displaying real-time transit departures and
 ## Screenshots
 
 ### Main Display (Landscape Layout)
-![Landscape Layout](screenshots/landscape-layout.png)
+![Main Display](screenshots/main-display.png)
 
-> **Screenshot**: The system automatically optimizes for landscape orientation with a 4-column grid layout, maximizing screen real estate while maintaining readability. Add your screenshot to `screenshots/landscape-layout.png`.
+The system automatically optimizes for landscape orientation with a 4-column grid layout, maximizing screen real estate while maintaining readability. The display includes:
 
-### Key Features Highlighted
-- **Clock Banner**: Compact ribbon-style header with time and date
-- **Departure Cards**: Color-coded boxes with transport icons, line numbers, and direction arrows
-- **Weather Widget**: Fixed at bottom with current conditions and hourly forecast
+- **Clock Banner**: Compact ribbon-style header with time and date in Swedish locale
+- **Departure Cards**: Color-coded boxes with transport icons, line numbers, and direction arrows showing real-time transit information
+- **Weather Widget**: Compact widget with current conditions, hourly forecast, and sunrise/sunset times
+- **Daylight Hours Bar**: 24-hour visual timeline at the bottom showing daylight hours with animated sun/moon indicator
+
+### Settings Panel
+![Settings Modal](screenshots/settings-modal.png)
+
+Comprehensive configuration panel accessible via the gear icon (⚙️) with tabs for:
+- **Display**: Screen orientation and dark mode settings
+- **Appearance**: Background image and opacity controls
+- **Content**: Transit stop management with map-based selection
+- **Options**: Additional system preferences
+
+### Daylight Hours Bar
+![Daylight Hours Bar](screenshots/daylight-hours-bar.png)
+
+The daylight hours bar provides a beautiful visual representation of the day:
+- Modern gradient with smooth color transitions (midnight blue → orange/red → yellow)
+- Animated sun icon (☀️) during daylight hours
+- Animated moon icon (🌙) during nighttime hours
+- Pulsing glow effect to draw attention
+- Updates every minute to track the current time position
 
 ## Quick Start
 
@@ -261,6 +283,15 @@ Settings are automatically saved to localStorage and persist across sessions.
 
 ## Recent Updates
 
+### Version 1.2.0 - Daylight Hours Bar & UI Refinements
+- ✅ **New Feature**: Daylight Hours Bar - Visual 24-hour timeline with modern gradient shading
+- ✅ Animated sun/moon icon indicator with pulsing glow effect
+- ✅ Enhanced gradient transitions (midnight blue → orange/red → yellow)
+- ✅ Improved weather widget layout and alignment
+- ✅ Better spacing and positioning for 1080p kiosk displays
+- ✅ Moon icon automatically shown during nighttime hours
+- ✅ Perfectly centered icon indicators with flexbox alignment
+
 ### Version 1.1.0 - Landscape Optimization
 - ✅ Optimized 4-column grid layout for landscape screens
 - ✅ Replaced text labels with transport mode icons