/* Why is the DLR shut today? Two colour schemes selected via the [data-theme] attribute on : - modern: current DLR turquoise/teal branding - original: 1987 DLR red-and-blue livery */ :root { --font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Modern DLR — turquoise/teal */ [data-theme="modern"] { --bg: #00afaa; --surface: #ffffff; --text: #ffffff; --message: #ffffff; --button-bg: #ffffff; --button-text: #007e7a; --button-active-bg: #00302e; --button-active-text: #ffffff; } /* Original DLR — 1987 red, white and blue */ [data-theme="original"] { --bg: #c8102e; --surface: #002b5c; --text: #f5f0e1; --message: #f5f0e1; --button-bg: #002b5c; --button-text: #f5f0e1; --button-active-bg: #f5f0e1; --button-active-text: #002b5c; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-stack); color: var(--text); background: var(--bg); transition: background 0.4s ease, color 0.4s ease; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .controls { display: flex; justify-content: flex-end; padding: 1.5rem; } .theme-toggle { display: flex; gap: 0.5rem; border: none; margin: 0; padding: 0; } .theme-button { font-family: inherit; font-size: 0.9rem; font-weight: 600; padding: 0.5rem 1rem; border: 2px solid var(--button-bg); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .theme-button[aria-pressed="true"] { background: var(--button-active-bg); color: var(--button-active-text); border-color: var(--button-active-bg); } .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: 2rem; } .title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 700; margin: 0; letter-spacing: 0.02em; } .message { font-size: clamp(1.75rem, 6vw, 4rem); font-weight: 800; line-height: 1.2; margin: 0; max-width: 22ch; color: var(--message); } .refresh-button { font-family: inherit; font-size: 1rem; font-weight: 600; padding: 0.75rem 1.75rem; border: 2px solid var(--button-bg); border-radius: 999px; background: var(--button-bg); color: var(--button-text); cursor: pointer; transition: transform 0.1s ease, opacity 0.2s ease; } .refresh-button:hover { opacity: 0.9; } .refresh-button:active { transform: scale(0.97); }