/* * THE EZ CLOCK — themes.css * ez.sy * * Eleven city themes, alphabetical. Each is a block of custom properties * on [data-theme]. Switching a theme changes one attribute on . * * A theme is visual identity only. It never changes the clock's * calculation and never changes your location. Selecting Tokyo makes the * page look like Tokyo. It does not move you there. * * Every theme must define the full token set below. Nothing outside this * file may hardcode a colour. */ /* ------------------------------------------------------------------ * * Token contract * * --bg page background * --bg-raised cards, the city grid tiles * --bg-sunk inset wells, the dial face * --ink primary text * --ink-soft secondary text * --ink-faint tertiary text, labels * --line hairlines and borders * --accent the theme's signature colour * --accent-soft accent at low emphasis * --night stage I sector * --morning stage II sector * --afternoon stage III sector * --hand clock hand * --sun the sun mark and gnomon light * --shadow cast shadow in the gnomon figure * --font-display headings and the digital readout * --font-body running text * --dial-style informational, read by JS for dial variants * ------------------------------------------------------------------ */ :root { --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; /* Motion and shape are shared across themes. Only colour and type change. This keeps the eleven from drifting into eleven layouts. */ --radius: 10px; --radius-lg: 18px; --transition: 240ms cubic-bezier(0.2, 0, 0.2, 1); } /* Default before any theme is applied. Istanbul, the development reference, per spec §69. */ :root, [data-theme="istanbul"] { --bg: #0e1418; --bg-raised: #161e24; --bg-sunk: #0a0f12; --ink: #eef2f4; --ink-soft: #9fb0b8; --ink-faint: #62757e; --line: #24313a; --accent: #4fb3a5; --accent-soft: #1e4a46; --night: #16324a; --morning: #4fb3a5; --afternoon: #d8873f; --hand: #eef2f4; --sun: #f3c969; --shadow: #0a0f12; --font-display: "Georgia", "Times New Roman", serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "bosphorus"; } /* ------------------------------------------------------------------ * * 1. Beijing * Imperial vermilion, glazed roof gold, ink grey. * ------------------------------------------------------------------ */ [data-theme="beijing"] { --bg: #14100f; --bg-raised: #1e1817; --bg-sunk: #0d0a09; --ink: #f2ece6; --ink-soft: #b09e93; --ink-faint: #75655c; --line: #2e2523; --accent: #c8352c; --accent-soft: #4a1512; --night: #2b1f1d; --morning: #c8352c; --afternoon: #e0a53c; --hand: #f2ece6; --sun: #e0a53c; --shadow: #0d0a09; --font-display: "Songti SC", "STSong", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "lacquer"; } /* ------------------------------------------------------------------ * * 2. Canberra * Eucalypt grey-green, dry gold grass, southern sky. * ------------------------------------------------------------------ */ [data-theme="canberra"] { --bg: #101512; --bg-raised: #1a211c; --bg-sunk: #0b0f0d; --ink: #eef1ea; --ink-soft: #a3b0a0; --ink-faint: #677365; --line: #26312a; --accent: #8fa87c; --accent-soft: #2f3d29; --night: #1c2a33; --morning: #8fa87c; --afternoon: #d4a63c; --hand: #eef1ea; --sun: #f0d073; --shadow: #0b0f0d; --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "surveyed"; } /* ------------------------------------------------------------------ * * 3. Cape Town * Table Mountain slate, Atlantic blue, protea pink. * ------------------------------------------------------------------ */ [data-theme="cape-town"] { --bg: #0c1216; --bg-raised: #151d23; --bg-sunk: #080d10; --ink: #edf3f5; --ink-soft: #9aacb5; --ink-faint: #5e6f78; --line: #202d35; --accent: #2e8bc0; --accent-soft: #123449; --night: #14232e; --morning: #2e8bc0; --afternoon: #e0678f; --hand: #edf3f5; --sun: #f5c86b; --shadow: #080d10; --font-display: "Optima", Candara, Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "cape"; } /* ------------------------------------------------------------------ * * 4. Damascus * Jasmine white, damask steel, courtyard tile blue, apricot. * ------------------------------------------------------------------ */ [data-theme="damascus"] { --bg: #101317; --bg-raised: #1a1f25; --bg-sunk: #0b0e11; --ink: #f4f1ea; --ink-soft: #aaa79c; --ink-faint: #6d6a61; --line: #262c34; --accent: #3f7fa6; --accent-soft: #16333f; --night: #1b2430; --morning: #3f7fa6; --afternoon: #d9a066; --hand: #f4f1ea; --sun: #edc77a; --shadow: #0b0e11; --font-display: "Amiri", "Scheherazade New", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "damask"; } /* ------------------------------------------------------------------ * * 5. Istanbul — defined above as the default * ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ * * 6. London * Portland stone, slate, wet pavement, Underground red. * ------------------------------------------------------------------ */ [data-theme="london"] { --bg: #121416; --bg-raised: #1c1f22; --bg-sunk: #0c0e0f; --ink: #eceef0; --ink-soft: #a2a8ad; --ink-faint: #676d72; --line: #282c30; --accent: #b03a3a; --accent-soft: #3d1717; --night: #1e242a; --morning: #6e8ca0; --afternoon: #b03a3a; --hand: #eceef0; --sun: #e8d6a8; --shadow: #0c0e0f; --font-display: "Times New Roman", Times, Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "meridian"; } /* ------------------------------------------------------------------ * * 7. Madrid * Ochre plaster, bullring sand, cobalt tile, Rioja. * ------------------------------------------------------------------ */ [data-theme="madrid"] { --bg: #14100e; --bg-raised: #1f1a16; --bg-sunk: #0e0b09; --ink: #f5efe6; --ink-soft: #b3a494; --ink-faint: #776a5d; --line: #2f2721; --accent: #c9603a; --accent-soft: #472013; --night: #22242f; --morning: #3d6b9e; --afternoon: #c9603a; --hand: #f5efe6; --sun: #f0bd5c; --shadow: #0e0b09; --font-display: "Palatino", "Palatino Linotype", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "plaza"; } /* ------------------------------------------------------------------ * * 8. Marrakesh * Red city clay, saffron, mint, Majorelle blue. * ------------------------------------------------------------------ */ [data-theme="marrakesh"] { --bg: #15100d; --bg-raised: #211915; --bg-sunk: #0f0b09; --ink: #f7efe4; --ink-soft: #bda993; --ink-faint: #806e5c; --line: #322721; --accent: #d0654a; --accent-soft: #4c1f15; --night: #1d2a4a; --morning: #5fa88a; --afternoon: #e5a12f; --hand: #f7efe4; --sun: #f2c14e; --shadow: #0f0b09; --font-display: "Amiri", "Baskerville", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "zellige"; } /* ------------------------------------------------------------------ * * 9. New York * Asphalt, steel, taxi yellow, sodium glow. * ------------------------------------------------------------------ */ [data-theme="new-york"] { --bg: #0f1112; --bg-raised: #191c1e; --bg-sunk: #0a0c0d; --ink: #f0f2f3; --ink-soft: #a0a6aa; --ink-faint: #63696d; --line: #24282b; --accent: #e8b83b; --accent-soft: #4a3a0f; --night: #1a2128; --morning: #7f9bb0; --afternoon: #e8b83b; --hand: #f0f2f3; --sun: #f5d76e; --shadow: #0a0c0d; --font-display: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "grid"; } /* ------------------------------------------------------------------ * * 10. Riyadh * Najdi mud brick, desert light, palm green, deep night. * ------------------------------------------------------------------ */ [data-theme="riyadh"] { --bg: #13110e; --bg-raised: #1e1a15; --bg-sunk: #0d0b09; --ink: #f6f1e7; --ink-soft: #b6a893; --ink-faint: #786c5b; --line: #2d2620; --accent: #c99a52; --accent-soft: #48351a; --night: #16202a; --morning: #6f8f6a; --afternoon: #c99a52; --hand: #f6f1e7; --sun: #f0cf84; --shadow: #0d0b09; --font-display: "Amiri", "Scheherazade New", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "najdi"; } /* ------------------------------------------------------------------ * * 11. Tokyo * Sumi ink, vermilion torii, indigo, neon cyan. * ------------------------------------------------------------------ */ [data-theme="tokyo"] { --bg: #0d0e11; --bg-raised: #16181d; --bg-sunk: #08090b; --ink: #f1f2f5; --ink-soft: #9ba1ad; --ink-faint: #5f6672; --line: #21242b; --accent: #d94f43; --accent-soft: #431714; --night: #191f3a; --morning: #5bc6c9; --afternoon: #d94f43; --hand: #f1f2f5; --sun: #f2e2a8; --shadow: #08090b; --font-display: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --dial-style: "sumi"; } /* ------------------------------------------------------------------ * * Reduced motion * * The changing pace of the second hand is information, not decoration, * so it is never disabled. Only decorative transitions are suppressed. * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --transition: 1ms; } } /* ==================================================================== * * LIGHT MODE * * Themes carry a place. Modes carry a light level. They are separate * axes, so rather than writing eleven more palettes by hand, light mode * rebuilds only the neutral ramp and leaves every theme's identity * colours alone. The neutrals are mixed from the theme's own accent, so * Marrakesh stays warm and Cape Town stays cool without a second table * to keep in sync. * * The identity colours do get adjusted: --night, --sun and the hand are * chosen to read against a dark page and would disappear on a light * one, so each is darkened or deepened rather than replaced. * ==================================================================== */ [data-mode="light"] { --bg: color-mix(in srgb, var(--accent) 5%, #faf9f7); --bg-raised: color-mix(in srgb, var(--accent) 2%, #ffffff); --bg-sunk: color-mix(in srgb, var(--accent) 10%, #f0eeea); --ink: color-mix(in srgb, var(--accent) 12%, #14181b); --ink-soft: color-mix(in srgb, var(--accent) 14%, #4a5560); --ink-faint: color-mix(in srgb, var(--accent) 12%, #8b959e); --line: color-mix(in srgb, var(--accent) 16%, #d6d2cc); /* Night is a dark blue on a dark page. On a light page it has to stay recognisably night without becoming a hole. */ --night: color-mix(in srgb, var(--night) 70%, #55708a); --afternoon: color-mix(in srgb, var(--afternoon) 85%, #000000); --morning: color-mix(in srgb, var(--morning) 88%, #000000); --sun: color-mix(in srgb, var(--sun) 70%, #b8791a); --hand: color-mix(in srgb, var(--accent) 20%, #1a1f23); --shadow: color-mix(in srgb, var(--accent) 18%, #b9b3ab); --accent-soft: color-mix(in srgb, var(--accent) 22%, #ffffff); } /* Browsers without color-mix get a plain, correct, untinted light palette rather than a broken one. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { [data-mode="light"] { --bg: #faf9f7; --bg-raised: #ffffff; --bg-sunk: #f0eeea; --ink: #14181b; --ink-soft: #4a5560; --ink-faint: #8b959e; --line: #d6d2cc; --hand: #1a1f23; --shadow: #b9b3ab; } }