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>

public/css/components.css

@@ -825,7 +825,20 @@ body.dark-mode .countdown-large.now {
     text-shadow: 0 0 8px #4ecdc4, 0 0 12px #4ecdc4, 0 0 16px rgba(78, 205, 196, 0.9);
 }
 
-/* Time range */
+/* Soon tier (3-5 min) - orange */
+.countdown-large.soon {
+    color: var(--color-soon);
+    animation: pulse-glow 3s ease-in-out infinite;
+    text-shadow: 0 0 6px #e67e22, 0 0 10px rgba(230, 126, 34, 0.7);
+}
+
+body.dark-mode .countdown-large.soon,
+body.landscape .countdown-large.soon {
+    color: var(--color-soon-dark);
+    text-shadow: 0 0 8px #f39c12, 0 0 12px #f39c12, 0 0 16px rgba(243, 156, 18, 0.8);
+}
+
+/* Time range (legacy) */
 .time-range {
     font-size: 0.85em;
     color: var(--color-text-muted);
@@ -837,6 +850,18 @@ body.dark-mode .time-range {
     color: var(--color-text-muted-dark);
 }
 
+/* Next departures (replaces time-range) */
+.next-departures {
+    font-size: 0.8em;
+    color: var(--color-text-muted);
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+body.dark-mode .next-departures {
+    color: var(--color-text-muted-dark);
+}
+
 /* Weather widget styles */
 .weather-container {
     margin: 20px 0;
@@ -1091,6 +1116,86 @@ body.vertical-reverse #custom-weather {
     z-index: 1;
 }
 
+/* Landscape: Prominent site headers */
+body.landscape .site-container {
+    display: contents;
+}
+
+body.landscape .site-header {
+    grid-column: 1 / -1;
+    margin-bottom: 2px;
+}
+
+body.landscape .site-name {
+    display: block;
+    background: linear-gradient(135deg, #0061a1 0%, #003d66 100%);
+    color: #fff;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    padding: 6px 16px;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 97, 161, 0.4);
+    font-size: 0.85em;
+}
+
+/* Compact weather bar - hidden by default, shown in landscape */
+#compact-weather-bar {
+    display: none;
+}
+
+body.landscape #compact-weather-bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    background: rgba(0, 0, 0, 0.5);
+    color: #ddd;
+    padding: 6px 20px;
+    border-radius: 4px;
+    font-size: 0.95em;
+    white-space: nowrap;
+}
+
+#compact-weather-bar .weather-bar-icon {
+    width: 28px;
+    height: 28px;
+    vertical-align: middle;
+}
+
+#compact-weather-bar .weather-bar-sep {
+    opacity: 0.4;
+}
+
+/* News ticker - hidden by default, shown in landscape */
+#news-ticker {
+    display: none;
+}
+
+body.landscape #news-ticker {
+    display: block;
+    overflow: hidden;
+    background: var(--ticker-bg);
+    height: var(--ticker-height);
+    line-height: var(--ticker-height);
+    border-radius: 4px;
+    position: relative;
+}
+
+#news-ticker .ticker-content {
+    display: inline-block;
+    white-space: nowrap;
+    animation: ticker-scroll var(--ticker-speed) linear infinite;
+    color: #ddd;
+    font-size: 0.9em;
+    padding-left: 100%;
+}
+
+@keyframes ticker-scroll {
+    0% { transform: translateX(0); }
+    100% { transform: translateX(-50%); }
+}
+
 .error {
     color: red;
     text-align: center;
@@ -1138,6 +1243,12 @@ body.vertical-reverse #custom-weather {
     text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
 }
 
+/* Landscape: daylight bar sits in grid instead of fixed overlay */
+body.landscape #daylight-hours-bar {
+    position: relative;
+    z-index: auto;
+}
+
 /* Dark mode adjustments for daylight bar */
 body.dark-mode #daylight-hours-bar .daylight-bar-background {
     background-color: #0a0a2e;
@@ -1560,7 +1671,12 @@ body.dark-mode .time-range {
 /* Reduced motion preference */
 @media (prefers-reduced-motion: reduce) {
     .countdown-large.urgent,
-    .countdown-large.now {
+    .countdown-large.now,
+    .countdown-large.soon {
+        animation: none;
+    }
+
+    #news-ticker .ticker-content {
         animation: none;
     }