/* ============================================================================ theme2.css - purpose-built theme for the rebuilt home page (default-new.html) ---------------------------------------------------------------------------- Fresh, clean foundation - NOT the legacy css1/theme.css. Contains: 1. Design tokens - palette (light default + dark), spacing, radius, type. 2. Base reset - small modern reset. 3. Base elements - body / links / headings; light sky image; dark blobs. 4. Layout - .app column wrapper. 5. Header chrome - #site-header (logo + theme/12-24 toggles) and #menu_banner (menu + city search + dropdown), ported to match the city pages pixel-for-pixel. The menu's structural CSS comes from css2/menugold-cities.css (linked before this file); the rules here restyle it for dark, restore the blue for light, and add the search box, toggles and results dropdown. Token values mirror the city template exactly so the header is identical. Light is the default; [data-theme="dark"] overrides. Active theme is set before paint by the inline script, keyed on 'wc-theme'. ============================================================================ */ /* -- 1. DESIGN TOKENS ------------------------------------------------------- */ :root { /* Palette - light (default). Matches the city template's [data-theme="light"]. */ --bg: #eeeef8; --surface: rgba(0,0,0,0.035); --surface-2: rgba(0,0,0,0.06); --border: rgba(0,0,0,0.09); --text: #181827; --mid: rgba(24,24,39,0.88); --dim: rgba(24,24,39,0.78); --accent: #5b5fe8; --accent2: #7179f5; --green: #059669; /* Typography */ --font-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-ui: 'Inter', system-ui, sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', monospace; /* Spacing scale (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; /* Radius */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; /* Elevation + motion */ --shadow: 0 2px 10px rgba(0,0,0,0.06); --transition: 0.15s ease; } [data-theme="dark"] { --bg: #07070e; --surface: rgba(255,255,255,0.04); --surface-2: rgba(255,255,255,0.07); --border: rgba(255,255,255,0.08); --text: #f1f0f9; --mid: rgba(241,240,249,0.78); --dim: rgba(241,240,249,0.62); --accent: #818cf8; --accent2: #a5b4fc; --green: #34d399; --shadow: 0 2px 14px rgba(0,0,0,0.45); } /* -- 2. BASE RESET ---------------------------------------------------------- */ /* The reset lives in css2/css-reset-tool-by-joshwcomeau.css, linked BEFORE this file (the same reset every city page / index.php / result.php loads). It covers box-sizing, margin:0, media display:block, and `font:inherit` on form controls - so nothing is duplicated here. */ /* -- 3. BASE ELEMENTS ------------------------------------------------------- */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Light: sky banner across the top (sits behind the header), as on the city pages. */ [data-theme="light"] body { background-image: url('../images/sky_1600x290.jpg'); background-repeat: repeat-x; background-position: top center; background-color: #FFFFFF; } a { color: var(--accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--accent2); } h1, h2, h3 { line-height: 1.2; font-weight: 500; } /* Decorative glow blobs - dark theme only (mirrors the city pages). */ .blob { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .blob-1 { width: 650px; height: 650px; background: radial-gradient(circle,#5b21b6,transparent 65%); top: -200px; left: -180px; opacity: .22; } .blob-2 { width: 500px; height: 500px; background: radial-gradient(circle,#1d4ed8,transparent 65%); bottom: -100px; right: -150px; opacity: .18; } .blob-3 { width: 380px; height: 380px; background: radial-gradient(circle,#0d9488,transparent 65%); top: 45%; left: 38%; opacity: .14; } [data-theme="light"] .blob { display: none; } /* -- 4. LAYOUT -------------------------------------------------------------- */ /* padding-top sets the gap above the header (sky banner shows through it in light mode). 24px - matches the city pages' top gap so the logo lands at the same 33px. */ .app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; padding-top: 24px; } /* -- PAGE BODY: two-column layout ------------------------------------------ */ .hp-wrap { display: flex; align-items: flex-start; gap: 20px; max-width: 1180px; width: 100%; margin: 18px auto 0; padding: 0 16px 40px; box-sizing: border-box; } /* Left sidebar - fixed width, never shrinks until the collapse breakpoint */ .hp-sidebar { width: 190px; flex-shrink: 0; } .hp-sidebar-top { /* GMT clock + local time + socials (Step 2) */ } .hp-sidebar-maps { /* mini timezone maps (Step 2) */ } /* Main content - takes all remaining space */ .hp-main { flex: 1; min-width: 0; } /* Placeholder boxes - dashed outlines show the zones during build; removed zone by zone */ .hp-ph { padding: 14px 16px; border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--dim); font-size: 13px; margin-bottom: 16px; background: var(--surface); } /* -- MOBILE: sidebar collapses to GMT+socials row; mini maps hide ------- */ @media (max-width: 982px) { .hp-wrap { flex-direction: column; align-items: stretch; gap: 0; padding: 0 8px 32px; } .hp-sidebar { width: 100%; padding: 10px 0; } .hp-sidebar-top { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .hp-gmt-block, .hp-local-block { flex: 1; min-width: 130px; max-width: 45%; } .hp-social-block { width: 100%; } .hp-sidebar-maps { display: none; } } /* -- SIDEBAR CONTENT ------------------------------------------------------- */ /* GMT clock block */ .hp-gmt-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 10px 10px; margin-bottom: 10px; text-align: center; } .hp-gmt-title { font-size: 13px; font-weight: 500; line-height: 1.3; margin-bottom: 8px; } .hp-gmt-title a { color: var(--text); } .hp-gmt-title a:hover { color: var(--accent); } .hp-gmt-time { font-size: 26px; font-weight: 300; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; } .hp-gmt-label { font-size: 11px; color: var(--dim); margin-top: 5px; } /* Local time block */ .hp-local-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 10px 10px; margin-bottom: 10px; text-align: center; } .hp-local-label { font-size: 12px; color: var(--dim); margin-bottom: 4px; } .hp-local-time { font-size: 22px; font-weight: 300; letter-spacing: .04em; font-variant-numeric: tabular-nums; line-height: 1; } .hp-local-tz { font-size: 10px; color: var(--dim); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Social share block */ .hp-social-block { margin-bottom: 14px; } /* Mini timezone maps */ .hp-map-item { margin-bottom: 20px; } .hp-map-title { font-size: 12px; font-weight: 500; line-height: 1.3; margin-bottom: 5px; text-align: center; } .hp-map-title a { color: var(--dim); } .hp-map-title a:hover { color: var(--accent); } .hp-map-sub { display: block; font-size: 10px; color: var(--dim); font-weight: 400; margin-top: 1px; } .hp-map-img { display: block; width: 150px; height: auto; margin: 0 auto; border-radius: 4px; opacity: .88; transition: opacity var(--transition); } .hp-map-img:hover { opacity: 1; } [data-theme="dark"] .hp-map-img { opacity: .65; } [data-theme="dark"] .hp-map-img:hover { opacity: .88; } /* -- IMAGE SLIDER ---------------------------------------------------------- */ .hp-slider { position: relative; margin-bottom: 16px; border-radius: var(--radius); overflow: hidden; background: var(--surface); aspect-ratio: 2 / 1; } .hp-slides { position: relative; width: 100%; height: 100%; } .hp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .hp-slide.active { opacity: 1; } .hp-slide a { display: block; width: 100%; height: 100%; } .hp-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .hp-dots { position: absolute; bottom: 10px; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; z-index: 2; } .hp-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); border: none; cursor: pointer; padding: 0; transition: background var(--transition); } .hp-dot.active { background: rgba(255,255,255,.95); } .hp-dot:hover { background: rgba(255,255,255,.75); } /* -- FAST LINKS ------------------------------------------------------------ */ .hp-fastlinks { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; } [data-theme="dark"] .hp-fastlinks { background: transparent; } .hp-fl-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px 12px; } .hp-fl-maps { grid-template-columns: repeat(4, 1fr); } .hp-fl-divider { height: 1px; background: var(--border); margin: 10px 0; } .hp-fl-link { font-size: 14px; color: var(--accent); text-decoration: none; transition: color var(--transition); } .hp-fl-link:hover { color: var(--accent2); text-decoration: underline; } .hp-fl-link-sm { font-size: 13px; color: var(--dim); } .hp-fl-link-sm:hover { color: var(--accent); } [data-theme="light"] .hp-fl-link { color: #0404bf; } [data-theme="light"] .hp-fl-link:hover { color: #000099; } [data-theme="light"] .hp-fl-link-sm { color: rgba(24,24,39,.65); } [data-theme="light"] .hp-fl-link-sm:hover { color: #0404bf; } @media (max-width: 600px) { .hp-fl-group { grid-template-columns: repeat(2, 1fr); } .hp-fl-maps { grid-template-columns: repeat(2, 1fr); } } /* -- 5. HEADER CHROME ------------------------------------------------------- */ /* == Site header (sky + logo + toggles) == */ #site-header { height: 105px; background-color: transparent; position: relative; z-index: 301; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 10px; padding-right: 5px; width: 965px; max-width: 100%; align-self: center; } #site-logo { display: block; max-width: 965px; align-self: flex-start; padding-top: 9px; padding-left: 20px; } /* Right-side stack in the header: theme toggle above the 12h/24h segment. */ .header-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .logo { font-family: var(--font-sans); font-size: 19px; font-weight: 600; color: var(--text); flex-shrink: 0; user-select: none; cursor: pointer; } .logo span { color: var(--accent); } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid rgba(241,240,249,.18); border-radius: 100px; color: rgba(241,240,249,.55); font-size: 14px; padding: 4px 9px; cursor: pointer; line-height: 1; transition: color .15s, border-color .15s; flex-shrink: 0; } .theme-toggle:hover { color: rgba(241,240,249,.9); border-color: rgba(241,240,249,.38); } [data-theme="light"] .theme-toggle { background: rgba(255,255,255,.80); border-color: rgba(24,24,47,.20); color: rgba(24,24,47,.70); } [data-theme="light"] .theme-toggle:hover { background: rgba(255,255,255,.95); border-color: rgba(24,24,47,.40); color: rgba(24,24,47,.95); } /* 12h / 24h segmented toggle */ .fmt-seg { display: flex; gap: 2px; background: rgba(129,140,248,.08); border: 1px solid rgba(129,140,248,.20); border-radius: 100px; padding: 2px; flex-shrink: 0; } .fmt-opt { background: none; border: none; color: var(--dim); font-family: var(--font-ui); font-size: 13px; font-weight: 600; letter-spacing: .06em; padding: 4px 11px; border-radius: 100px; cursor: pointer; transition: all .15s; white-space: nowrap; } .fmt-opt:hover { color: var(--mid); } .fmt-opt.active { background: rgba(129,140,248,.22); color: var(--accent2); } [data-theme="light"] .fmt-seg { background: rgba(255,255,255,.80); border-color: rgba(24,24,47,.20); } [data-theme="light"] .fmt-opt { color: rgba(24,24,47,.55); } [data-theme="light"] .fmt-opt:hover { color: rgba(24,24,47,.85); } [data-theme="light"] .fmt-opt.active { background: rgba(4,4,191,.12); color: rgba(4,4,191,.90); } /* == Centered menu bar - overrides menugold-cities.css floats == */ #menu_banner { display: flex; justify-content: flex-start; align-items: stretch; height: 50px; background: #0404bf; align-self: flex-start; width: 965px; max-width: 100%; margin: 9px auto 0; padding: 0 10px 0 2px; position: relative; z-index: 301; } #themenu { display: flex; align-items: stretch; height: 50px; position: static; line-height: 50px; } #menu_invisible { position: static !important; display: flex; align-items: stretch; margin: 0; padding: 0; } #themenu ul li { float: none; } .menu-spacer { display: none; } /* == Menu search box (right side of the bar) - flat flex layout == */ /* Flexbox centers the 38px field in the 50px bar natively (+1px bar border = 7px from top), so no floats and no line-height / padding nudges are needed. Font is Inter (var(--font-ui)) set on .search - the controls inherit it (via the reset's `font: inherit`), so they don't pick up the page's Outfit body font, whose smaller x-height looked smaller. */ #menu_b_search { margin-left: 37px; width: 272px; position: relative; display: flex; align-items: center; } /* gap:2px separates the Search button from the input field (the bar shows through), matching the city pages' 2px split. */ .search { display: flex; gap: 2px; height: 38px; font-family: var(--font-ui); font-size: 15px; } .search-field { position: relative; display: flex; align-items: center; } /* padding-bottom:2px lifts the placeholder/typed text ~1px without moving the box. */ #menuSearchInput { width: 200px; height: 38px; line-height: normal; border: 0; padding: 0 22px 2px 5px; background: rgba(255,255,255,0.10); color: var(--mid); } #menuSearchInput:focus { outline: none; box-shadow: 0 0 0 2px rgba(255,255,255,0.20); } #menuSearchInput::placeholder { color: var(--dim); } #menuSearchInput::-webkit-search-cancel-button { display: none; } .search-clear { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--mid); font-size: 14px; line-height: 1; cursor: pointer; padding: 4px 5px; display: none; opacity: .7; } .search-clear.visible { display: block; } .search-clear:hover { opacity: 1; color: var(--text); } .search-go { width: 60px; border: 0; padding: 0 0 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: normal; background: rgba(255,255,255,0.10); color: var(--dim); } .search-go:hover { background: rgba(255,255,255,0.18); color: var(--mid); } /* Light theme: white input + blue Search button (menugold colours) */ [data-theme="light"] #menuSearchInput { background: #FFFFFF; color: #000; } [data-theme="light"] .search-clear { color: rgba(0,0,0,.45); } [data-theme="light"] .search-go { background: #0404bf; color: #FFFFFF; } [data-theme="light"] .search-go:hover { background: #000099; } #menuDropdown { top: calc(100% + 2px); left: auto; right: 62px; width: 380px; z-index: 500; line-height: normal; } /* == Dark theme menu - the ONLY menu colour overrides needed. Light mode intentionally has no rules here: it falls back to the blue/gold that css2/menugold-cities.css already provides (and the blue #menu_banner base above), so we only override for dark. == */ [data-theme="dark"] #menu_banner { background: rgba(129,140,248,0.18); border-top: 1px solid rgba(255,255,255,0.07); border-bottom: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] #themenu ul li a { background: transparent; color: var(--mid); } [data-theme="dark"] #themenu ul li:hover > a { background: rgba(129,140,248,0.22); color: var(--accent2); } [data-theme="dark"] #themenu ul li ul { background: rgba(10,10,22,0.97); border: 1px solid rgba(255,255,255,0.10); } [data-theme="dark"] #themenu ul li:hover ul a { background: rgba(10,10,22,0.97); color: var(--text); height: 40px; line-height: 40px; } [data-theme="dark"] #themenu ul li:hover ul li a { background: rgba(10,10,22,0.97); color: var(--mid); border-top: 1px solid rgba(255,255,255,0.07); } [data-theme="dark"] #themenu ul li:hover ul li a:hover, [data-theme="dark"] #themenu ul li:hover ul a:hover { background: rgba(129,140,248,0.22); color: var(--accent2); } [data-theme="dark"] .menu_arrow { border-color: rgba(241,240,249,0.35); } [data-theme="dark"] #themenu ul li:hover .menu_arrow { border-color: var(--accent2); } [data-theme="dark"] .show-menu { background: transparent; color: var(--mid); } /* == City search results dropdown == */ .dropdown { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: #0c0c1a; border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; z-index: 300; box-shadow: 0 24px 64px rgba(0,0,0,.65); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s, transform .18s; } .dropdown.open { opacity: 1; transform: translateY(0); pointer-events: auto; } .dd-hint { display: flex; align-items: center; gap: 6px; padding: 8px 16px 6px; font-size: 13px; color: var(--dim); letter-spacing: .04em; border-bottom: 1px solid var(--border); } .dd-hint svg { opacity: .5; flex-shrink: 0; } .dd-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background .12s; } .dd-item:last-child { border-bottom: none; } .dd-item.hi { background: rgba(255,255,255,.055); } .dd-flag { font-size: 20px; flex-shrink: 0; line-height: 1; } .dd-info { flex: 1; min-width: 0; } .dd-city { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd-region { font-size: 13px; color: var(--dim); margin-top: 1px; } .dd-right { display: flex; align-items: center; gap: 7px; flex-shrink: 0; } .dd-now { font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums; } .dd-ampm { font-size: 12px; opacity: .65; margin-left: 1px; } .dd-footer { padding: 7px 16px; font-size: 13px; color: var(--dim); text-align: center; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: 6px; } .dd-more-btn { background: none; border: none; color: var(--accent2); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; opacity: .75; transition: opacity .15s, transform .15s; } .dd-more-btn:hover { opacity: 1; transform: translateY(2px); } .dd-goto { font-size: 13px; color: var(--accent2); opacity: .55; line-height: 1; flex-shrink: 0; } .dd-empty { padding: 22px 16px; text-align: center; color: var(--dim); font-size: 13px; } [data-theme="light"] .dropdown { background: #fff; box-shadow: 0 24px 64px rgba(0,0,0,.15); } [data-theme="light"] .dd-hint { border-bottom-color: rgba(0,0,0,.07); } [data-theme="light"] .dd-item { border-bottom-color: rgba(0,0,0,.06); } [data-theme="light"] .dd-item.hi { background: rgba(0,0,0,.04); } /* == Responsive - mobile menu (<=850px) == */ @media screen and (max-width: 850px) { #menu_banner { width: 100%; align-self: stretch; height: auto; } #themenu { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 50px auto; width: 100%; height: auto; line-height: normal; } .show-menu { grid-column: 1; grid-row: 1; display: flex; align-items: center; padding: 0 16px; white-space: nowrap; cursor: pointer; } #menu_b_search { grid-column: 2; grid-row: 1; margin: 0 0 0 24px; height: 50px; width: auto; padding-top: 0; display: flex; align-items: center; } .menu-spacer { grid-column: 3; grid-row: 1; } #menu_invisible { display: none; flex-direction: column; grid-column: 1 / -1; grid-row: 2; } input[type=checkbox]#show-menu:checked ~ #menu_invisible { display: flex; flex-direction: column; } #themenu ul li a { width: 100%; min-width: 0; text-align: left; padding-left: 16px; } #menuDropdown { left: auto; right: 0; } /* Mobile submenu: shown statically when its parent li has .sub-open (set in Step A4) */ #menu_invisible li.sub-open > ul { display: block !important; position: static !important; box-shadow: none; background: transparent !important; border: none; border-left: 2px solid rgba(129,140,248,.25); margin-left: 28px; } [data-theme="light"] #menu_invisible li.sub-open > ul { border-left-color: rgba(4,4,191,.20); } #menu_invisible li.sub-open > ul li.sub-open > ul { margin-left: 16px; } #menu_invisible li.has-sub > a { cursor: pointer; } #menu_invisible li.sub-open > a .menu_arrow { transform: rotate(180deg); border-color: var(--accent2) !important; } [data-theme="light"] #menu_invisible li.sub-open > a .menu_arrow { border-color: #0404bf !important; } } /* == Narrow (<=430px) - dropdown re-anchors to the bar for full-width results == */ @media screen and (max-width: 430px) { #menu_banner { position: relative; } #menu_b_search { position: static; } #menuDropdown { top: 54px; left: 8px; right: 8px; width: auto; } } /* == Narrow (<=450px) - hamburger icon == */ @media screen and (max-width: 450px) { .show-menu { font-size: 0; padding: 0 14px; } .show-menu::before { content: '\2630'; font-size: 22px; } #menu_b_search { margin-left: 8px; } } /* == Narrow (<=360px) - hide Search button (Enter + dropdown still submit) == */ @media screen and (max-width: 360px) { .search-go { display: none; } } /* == Very narrow (<=340px) - shrink the input == */ @media screen and (max-width: 340px) { #menuSearchInput { width: 160px; } } /* -- CITY CARDS BY CONTINENT ----------------------------------------------- */ /* Magazine strip - rotating time curiosities above the city grid */ .hp-mag-strip { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-bottom: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); min-height: 38px; } .hp-mag-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .hp-mag-text { font-size: 13px; color: var(--text); line-height: 1.3; } /* Section heading - SEO h1, visually understated label */ .hp-section-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin: 0 0 8px; text-align: center; } /* Your time banner - sits above the city grid; styled via hp-city-card + hp-cc-expanded */ .hp-your-time { margin-bottom: 16px; cursor: default; } #hpYourTime .hp-cc-time { font-size: 32px; } .hp-yt-wrap { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-left: 24px; } .hp-yt-toggle { display: flex; border: 1px solid var(--accent); border-radius: 20px; overflow: hidden; font-size: 11px; white-space: nowrap; } .hp-yt-t { flex: 1; text-align: center; padding: 3px 9px; color: var(--accent); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .hp-yt-t:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); } .hp-yt-t.active { background: var(--accent); color: #fff; cursor: default; } .hp-yt-save-row { display: flex; border: 1px solid var(--accent); border-radius: 20px; overflow: hidden; font-size: 11px; white-space: nowrap; } .hp-yt-s { flex: 1; text-align: center; padding: 3px 9px; color: var(--accent); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .hp-yt-s:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); } .hp-yt-s.saved { background: var(--green); color: #fff; cursor: default; } /* Two continent columns side by side: N.America|Europe -> S.America|Africa -> Asia|Oceania. Cities inside each continent are a single vertical list - easy top-to-bottom scan. */ .hp-cities { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; align-items: start; margin-bottom: 16px; } .hp-cont-title { font-size: 11px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* Single-column vertical list within each continent */ .hp-city-grid { display: flex; flex-direction: column; gap: 4px; } .hp-city-card { display: flex; align-items: center; gap: 6px; padding: 4px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; transition: border-color var(--transition), background var(--transition); min-width: 0; } .hp-city-card:hover { border-color: var(--accent); background: var(--surface-2); } .hp-cc-flag { font-size: 15px; flex-shrink: 0; line-height: 1; } .hp-cc-name-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .hp-cc-utc { font-size: 8px; color: var(--text-muted); letter-spacing: 0.04em; line-height: 1; } .hp-cc-name { font-size: 14px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hp-city-card:hover .hp-cc-name { color: var(--accent2); } .hp-cc-day { font-size: 12px; color: var(--text-muted); flex-shrink: 0; margin-right: 3px; transition: font-size 0.2s ease; } .hp-cc-time { font-size: 18px; color: var(--accent); font-variant-numeric: tabular-nums; flex-shrink: 0; } .hp-cc-dn { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--border); transition: background .5s; } .hp-cc-dn.day { background: var(--green); } .hp-cc-dn.night { background: var(--border); } /* hp-city-visible = shown immediately; hp-city-extra = hidden until .expanded */ .hp-city-extra { display: none; } #hpCities.expanded .hp-city-extra { display: flex; } /* -- City card expand / compress -- */ .hp-city-card { transition: border-color var(--transition), background var(--transition), padding-top 0.2s ease, padding-bottom 0.2s ease; } .hp-cc-utc { max-height: 20px; overflow: hidden; transition: max-height 0.2s ease, opacity 0.15s ease; } .hp-cc-name { transition: font-size 0.2s ease, color 0.15s ease; } .hp-cc-time { transition: font-size 0.2s ease; } .hp-cc-flag { transition: font-size 0.2s ease; } .hp-city-card.hp-cc-expanded { padding-top: 10px; padding-bottom: 10px; border-color: var(--accent); background: var(--surface-2); } .hp-city-card.hp-cc-expanded .hp-cc-flag { font-size: 22px; } .hp-city-card.hp-cc-expanded .hp-cc-name { font-size: 20px; } .hp-city-card.hp-cc-expanded .hp-cc-day { font-size: 14px; } .hp-city-card.hp-cc-expanded .hp-cc-time { font-size: 26px; } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) { padding-top: 0; padding-bottom: 0; line-height: 1; opacity: 0.55; } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) .hp-cc-utc { max-height: 0; opacity: 0; } .hp-cc-link { font-size: 15px; color: var(--accent); flex-shrink: 0; cursor: pointer; padding: 0 2px; line-height: 1; transition: opacity 0.15s ease; opacity: 0.75; } .hp-cc-link:hover { opacity: 1; } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) .hp-cc-link { display: none; } /* -- City card status column (replaces day/night dot) -- */ .hp-cc-status { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100px; } .hp-cc-s1, .hp-cc-s2 { font-size: 8px; line-height: 1; letter-spacing: 0.04em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: font-size 0.2s ease; } .hp-city-card.hp-cc-expanded .hp-cc-s1, .hp-city-card.hp-cc-expanded .hp-cc-s2 { font-size: 11px; } .hp-cc-s1.good { color: #15803d; } .hp-cc-s1.ok { color: #b45309; } .hp-cc-s1.bad { color: #dc2626; } [data-theme=dark] .hp-cc-s1.good { color: #4ade80; } [data-theme=dark] .hp-cc-s1.ok { color: #fbbf24; } [data-theme=dark] .hp-cc-s1.bad { color: #f87171; } .hp-cc-s2 { color: var(--text-muted); } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) .hp-cc-status { display: none; } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) .hp-cc-flag { font-size: 11px; } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) .hp-cc-name { font-size: 10px; } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) .hp-cc-day { font-size: 10px; } #hpCities.has-expanded .hp-city-card:not(.hp-cc-expanded) .hp-cc-time { font-size: 10px; } /* Collapse to one continent column on very narrow screens */ @media (max-width: 722px) { .hp-cities { grid-template-columns: 1fr; } } @media (max-width: 560px) { .hp-city-card { padding: 6px 7px; gap: 5px; } .hp-cc-flag { font-size: 13px; } } @media (max-width: 480px) { .hp-cc-status, #hpYtStatus { display: none; } #hpYtDay { display: none; } .hp-yt-tl { display: none; } #hpYtFlag { display: none; } #hpYourTime .hp-cc-time { font-size: 20px; } } /* -- Footer -- */ #footer_gold { width: 100%; max-width: 1180px; min-height: 90px; background-color: #001135; margin-top: 18px; margin-left: auto; margin-right: auto; color: #FFFFFF; font-size: 12px; display: flex; } #footer_gold #footer_left { flex: 1; flex-shrink: 0; } #footer_gold #footer_middle { flex: 10; } #footer_gold #footer_right { flex: 1; flex-shrink: 0; } #footer_left_float { padding-left: 50px; max-width: 450px; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 15px; color: #FFFFFF; } .footer_copyright { max-width: 240px; margin-left: auto; margin-right: auto; margin-top: 25px; } .footer_logo { float: right; margin-top: 12px; margin-right: 12px; margin-left: 12px; width: 65px; height: 65px; max-width: none; } a.awhite:link { color: #FFFFFF; text-decoration: none; } a.awhite:visited { color: #FFFFFF; text-decoration: none; } a.awhite:hover { text-decoration: underline; } [data-theme="dark"] #footer_gold { background-color: #14141c; }