/* SkyMinute — Storybook edition Friendly, warm, fairy-tale. Serif display + sans body. CSS-only starfield. With Moonie, the friendly moon character. ~14KB ---------------------------------------------------------------------- */ :root { /* Storybook serif for display — Georgia is the universal warm storybook serif. Body stays in friendly humanistic sans. */ --font-display: "Iowan Old Style", "Palatino Linotype", "Palatino", Georgia, "Hoefler Text", "Times New Roman", serif; --font: "Avenir Next", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif; /* Warm royal-plum night — softer, dreamier than ice navy. */ --night-deep: #120a25; --night-mid: #1d1238; --night-soft: #2c1d4a; --surface: rgba(255, 240, 210, 0.05); --surface-h: rgba(255, 240, 210, 0.09); /* Warm cream text — like candlelight on parchment. */ --text: #fdf2d4; --text-dim: #d5c8a5; --text-faint: #968a69; --text-ghost: #5e5440; /* Moonlight gold — friendly, sleepy warmth. */ --moon: #ffd685; --moon-soft: #ffe5b0; --moon-deep: #e5a945; --moon-glow: rgba(255, 214, 133, 0.24); --moon-edge: rgba(255, 214, 133, 0.46); /* Aurora — soft mint */ --aurora: #8df0c8; --aurora-soft: rgba(141, 240, 200, 0.6); --aurora-glow: rgba(141, 240, 200, 0.18); /* Pink blush — for character + accent moments */ --blush: #ff9fb5; --blush-soft: rgba(255, 159, 181, 0.5); --blush-glow: rgba(255, 159, 181, 0.16); --good: #8df0c8; --warn: #ffd685; --bad: #ff9fb5; --line: rgba(255, 240, 210, 0.10); --line-strong: rgba(255, 240, 210, 0.18); --radius: 24px; --radius-sm: 16px; --radius-pill: 999px; --maxw: 560px; --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.6), 0 1px 0 0 rgba(255, 240, 210, 0.04) inset; --bg: radial-gradient(120% 70% at 50% -10%, rgba(255, 214, 133, 0.10) 0%, transparent 55%), radial-gradient(80% 60% at 50% 110%, rgba(200, 120, 220, 0.16) 0%, transparent 60%), radial-gradient(70% 50% at 88% 35%, rgba(255, 159, 181, 0.08) 0%, transparent 60%), radial-gradient(60% 50% at 12% 60%, rgba(141, 240, 200, 0.06) 0%, transparent 60%), linear-gradient(180deg, var(--night-deep) 0%, var(--night-mid) 50%, var(--night-soft) 100%); } /* ---------- Light mode: warm morning ---------- Activated ONLY by explicit user choice via [data-theme="light"] on . We deliberately ignore prefers-color-scheme — SkyMinute is a night-sky app, the default is always dark. Light mode is opt-in (header toggle). */ :root[data-theme="light"] { --night-deep: #fbf3e3; --night-mid: #f7e9cd; --night-soft: #f2dbb4; --surface: rgba(60, 40, 20, 0.04); --surface-h: rgba(60, 40, 20, 0.07); --text: #2a1f12; --text-dim: #6b5a3c; --text-faint: #9b8a6a; --moon: #c2701e; --moon-soft: #db8e3e; --moon-deep: #8a4d0c; --moon-glow: rgba(194, 112, 30, 0.12); --moon-edge: rgba(194, 112, 30, 0.32); --aurora: #1e8a6b; --aurora-soft: rgba(30, 138, 107, 0.5); --aurora-glow: rgba(30, 138, 107, 0.10); --blush: #d44a78; --good: #1e8a6b; --bad: #c44d4d; --line: rgba(60, 40, 20, 0.10); --line-strong: rgba(60, 40, 20, 0.18); --shadow-card: 0 24px 50px -28px rgba(80, 50, 20, 0.20), 0 1px 0 0 rgba(255, 255, 255, 0.6) inset; --bg: radial-gradient(120% 70% at 50% -10%, rgba(194, 112, 30, 0.12) 0%, transparent 55%), radial-gradient(70% 60% at 50% 110%, rgba(180, 130, 200, 0.10) 0%, transparent 60%), linear-gradient(180deg, #fdf7ea 0%, #f7ecd1 60%, #f0debe 100%); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--text); background: var(--bg) var(--night-mid); background-attachment: fixed; min-height: 100dvh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; position: relative; overflow-x: hidden; } /* ---------- Starfield ---------- */ .sky-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1.5px 1.5px at 8% 14%, rgba(255,240,210,0.85), transparent 60%), radial-gradient(1.5px 1.5px at 16% 76%, rgba(255,240,210,0.65), transparent 60%), radial-gradient(1.5px 1.5px at 24% 30%, rgba(255,240,210,0.80), transparent 60%), radial-gradient(1.5px 1.5px at 33% 62%, rgba(255,240,210,0.55), transparent 60%), radial-gradient(1.5px 1.5px at 41% 10%, rgba(255,240,210,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 48% 44%, rgba(255,240,210,0.50), transparent 60%), radial-gradient(1.5px 1.5px at 57% 86%, rgba(255,240,210,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 64% 24%, rgba(255,240,210,0.65), transparent 60%), radial-gradient(1.5px 1.5px at 72% 58%, rgba(255,240,210,0.50), transparent 60%), radial-gradient(1.5px 1.5px at 79% 16%, rgba(255,240,210,0.75), transparent 60%), radial-gradient(1.5px 1.5px at 87% 50%, rgba(255,240,210,0.60), transparent 60%), radial-gradient(1.5px 1.5px at 94% 80%, rgba(255,240,210,0.70), transparent 60%), radial-gradient(1.5px 1.5px at 5% 48%, rgba(255,240,210,0.55), transparent 60%), radial-gradient(1.5px 1.5px at 19% 94%, rgba(255,240,210,0.50), transparent 60%), radial-gradient(1.5px 1.5px at 44% 72%, rgba(255,240,210,0.65), transparent 60%), radial-gradient(1.5px 1.5px at 68% 6%, rgba(255,240,210,0.60), transparent 60%), radial-gradient(1.5px 1.5px at 89% 34%, rgba(255,240,210,0.50), transparent 60%), radial-gradient(2.5px 2.5px at 17% 20%, rgba(255,220,170,0.95), transparent 65%), radial-gradient(2.5px 2.5px at 53% 18%, rgba(255,240,210,0.95), transparent 65%), radial-gradient(2.5px 2.5px at 61% 82%, rgba(180,200,255,0.90), transparent 65%), radial-gradient(2.5px 2.5px at 81% 62%, rgba(255,220,170,0.90), transparent 65%), radial-gradient(2.5px 2.5px at 28% 56%, rgba(255,240,210,0.85), transparent 65%); } /* Shooting star — the magic moment, every ~20s */ .shooting-star { position: fixed; top: -6px; left: -12vw; width: 140px; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 240, 210, 0.95) 28%, rgba(255, 214, 133, 0.7) 55%, transparent); filter: drop-shadow(0 0 8px rgba(255, 224, 170, 0.85)); transform: rotate(18deg); opacity: 0; pointer-events: none; animation: shoot 20s ease-out infinite; animation-delay: 4s; border-radius: 999px; } @keyframes shoot { 0% { opacity: 0; transform: rotate(18deg) translate(0, 0); } 2% { opacity: 1; } 6% { opacity: 0; transform: rotate(18deg) translate(120vw, 42vh); } 100% { opacity: 0; transform: rotate(18deg) translate(120vw, 42vh); } } @media (prefers-reduced-motion: reduce) { .shooting-star, .twinkle-star, .moonie { animation: none !important; } *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; } } :root[data-theme="light"] .sky-bg { display: none; } /* ---------- A11y ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--moon); color: #1a1200; padding: 12px 16px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; top: 0; } :where(button, a, input, [tabindex]):focus-visible { outline: 3px solid var(--moon); outline-offset: 3px; border-radius: var(--radius-sm); } /* ---------- Layout shell ---------- */ .container { max-width: var(--maxw); margin: 0 auto; padding: 28px 22px 56px; position: relative; z-index: 1; } .site-header { max-width: var(--maxw); margin: 0 auto; padding: 22px 22px 0; position: relative; z-index: 1; } /* Location chip — friendly pill */ .location-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-dim); padding: 9px 16px; border-radius: var(--radius-pill); font: inherit; font-size: 14px; cursor: pointer; transition: color 160ms, border-color 160ms, background 160ms; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .location-chip:hover { color: var(--text); border-color: var(--moon-edge); background: var(--surface-h); } .location-icon { font-size: 14px; } .location-name { font-weight: 600; } .location-edit { opacity: 0.5; font-size: 12px; } /* ---------- Picker — the storybook opening ---------- */ .picker { text-align: center; padding-top: 56px; position: relative; } /* Big friendly moon emoji with floating little stars around it */ .picker::before { content: "🌙"; display: block; font-size: 72px; line-height: 1; margin-bottom: 28px; filter: drop-shadow(0 6px 30px var(--moon-glow)); animation: gentle-float 6s ease-in-out infinite; } @keyframes gentle-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } } /* Floating tiny stars decorations — positioned via CSS, no HTML needed */ .picker::after { content: ""; position: absolute; top: 40px; left: 50%; width: 240px; height: 110px; transform: translateX(-50%); pointer-events: none; background-image: radial-gradient(3px 3px at 15% 30%, var(--moon-soft), transparent 60%), radial-gradient(2.5px 2.5px at 88% 22%, var(--blush), transparent 60%), radial-gradient(3px 3px at 10% 75%, var(--aurora), transparent 60%), radial-gradient(2.5px 2.5px at 92% 70%, var(--moon-soft), transparent 60%), radial-gradient(2px 2px at 50% 95%, var(--moon), transparent 60%); filter: drop-shadow(0 0 6px var(--moon-glow)); animation: gentle-twinkle 4s ease-in-out infinite; } @keyframes gentle-twinkle { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Constellation traced around the moon — quiet by default, lights up when the visitor focuses the city input. */ .constellation { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 280px; height: 160px; pointer-events: none; opacity: 0; transition: opacity 600ms ease-out; } .constellation-lines { fill: none; stroke: var(--moon-soft); stroke-width: 0.6; stroke-linecap: round; opacity: 0; transition: opacity 700ms 100ms ease-out; } .constellation-stars circle { fill: var(--moon-soft); filter: drop-shadow(0 0 4px var(--moon-glow)); opacity: 0; transition: opacity 500ms ease-out, transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: center; transform: scale(0.4); } /* Trigger: input within the picker form is focused */ .picker:has(.picker-form input:focus) .constellation { opacity: 1; } .picker:has(.picker-form input:focus) .constellation-lines { opacity: 0.5; } .picker:has(.picker-form input:focus) .constellation-stars circle { opacity: 0.95; transform: scale(1); } /* Staggered star reveals (when supported) */ .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(1) { transition-delay: 40ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(2) { transition-delay: 110ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(3) { transition-delay: 180ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(4) { transition-delay: 250ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(5) { transition-delay: 320ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(6) { transition-delay: 80ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(7) { transition-delay: 160ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(8) { transition-delay: 240ms; } .picker:has(.picker-form input:focus) .constellation-stars circle:nth-child(9) { transition-delay: 320ms; } .hero-title { font-family: var(--font-display); font-size: clamp(34px, 7.5vw, 48px); line-height: 1.1; margin: 0 0 16px; font-weight: 400; letter-spacing: -0.01em; color: var(--text); text-wrap: balance; } .hero-subtitle { color: var(--text-dim); margin: 0 auto 36px; font-size: 17px; max-width: 32ch; line-height: 1.5; text-wrap: balance; } .picker-form { display: flex; gap: 10px; max-width: 440px; margin: 0 auto; flex-wrap: wrap; align-items: flex-start; } .combobox { flex: 1; min-width: 0; position: relative; } .picker-form input { width: 100%; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text); padding: 18px 20px; border-radius: var(--radius); font: inherit; font-size: 16.5px; outline: none; transition: border-color 160ms, box-shadow 160ms, background 160ms; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .picker-form input::placeholder { color: var(--text-faint); } .picker-form input:focus { border-color: var(--moon); box-shadow: 0 0 0 4px var(--moon-glow); background: var(--surface-h); } /* Custom autocomplete dropdown — works reliably on mobile, fully stylable */ .suggestions { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; margin: 0; padding: 6px; list-style: none; background: rgba(18, 10, 37, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 24px 48px -24px rgba(0,0,0,0.6); max-height: 320px; overflow-y: auto; text-align: left; animation: suggestions-in 180ms cubic-bezier(0.2, 0.6, 0.2, 1) both; } @keyframes suggestions-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } :root[data-theme="light"] .suggestions { background: rgba(255, 247, 234, 0.96); } .suggestion { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font-size: 15.5px; transition: background 120ms, color 120ms; user-select: none; } .suggestion:hover, .suggestion[aria-selected="true"] { background: var(--surface-h); color: var(--moon-soft); } .suggestion-name { font-weight: 600; } .suggestion-country { margin-left: auto; color: var(--text-faint); font-size: 12.5px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .suggestion-flag { font-size: 16px; width: 22px; text-align: center; opacity: 0.85; flex-shrink: 0; } .suggestions:empty, .suggestions[hidden] { display: none; } .btn-primary { background: var(--moon); color: #1a1200; border: none; padding: 18px 28px; border-radius: var(--radius); font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; transition: filter 160ms, transform 80ms, box-shadow 160ms; box-shadow: 0 10px 28px -10px var(--moon-edge); } .btn-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 32px -10px var(--moon-edge); } .btn-primary:active { transform: translateY(1px); } .btn-link { display: inline-block; margin: 26px 0 10px; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; padding: 12px 22px; border-radius: var(--radius-pill); text-decoration: none; transition: color 160ms, background 160ms, border-color 160ms; } .btn-link::before { content: "📍"; margin-right: 8px; font-size: 14px; } .btn-link:hover { background: var(--surface-h); border-color: var(--moon-edge); color: var(--moon-soft); } .hint { color: var(--text-faint); font-size: 13px; margin: 6px 0 0; } /* ---------- The loading state — meet Moonie ---------- */ .loading-state { text-align: center; padding: 56px 20px 64px; animation: gentle-fade-in 400ms ease-out; } @keyframes gentle-fade-in { from { opacity: 0; } to { opacity: 1; } } .moonie { display: block; margin: 0 auto 26px; width: 140px; height: 140px; filter: drop-shadow(0 12px 32px var(--moon-glow)); animation: moonie-bob 3s ease-in-out infinite; } @keyframes moonie-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } } .moonie .eye { animation: moonie-blink 4.5s ease-in-out infinite; transform-origin: center; } @keyframes moonie-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } } .loading-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--text); margin: 0 0 8px; letter-spacing: -0.005em; } .loading-sub { color: var(--text-dim); font-size: 15px; margin: 0; max-width: 28ch; margin-left: auto; margin-right: auto; line-height: 1.5; } .loading-dots { display: inline-flex; gap: 6px; margin-top: 18px; } .loading-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--moon); opacity: 0.4; animation: loading-pulse 1.2s ease-in-out infinite; } .loading-dots span:nth-child(2) { animation-delay: 0.15s; } .loading-dots span:nth-child(3) { animation-delay: 0.30s; } @keyframes loading-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } } /* ---------- Result view ---------- */ .result { margin-top: 4px; } /* The hero card — the one card. Dominant centerpiece, says everything at a glance. */ .hero-card { background: radial-gradient(140% 90% at 50% -20%, var(--moon-glow), transparent 55%), var(--surface); border: 1.5px solid var(--line-strong); border-radius: 28px; padding: 28px 28px 32px; margin: 8px 0 24px; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-card); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Tint the card glow by score — green-gold for great nights, plummy-pink for cloudy */ .hero-card[data-score="5"], .hero-card[data-score="4"] { background: radial-gradient(140% 90% at 50% -20%, var(--moon-glow), transparent 55%), var(--surface); } .hero-card[data-score="3"] { background: radial-gradient(140% 90% at 50% -20%, rgba(255, 214, 133, 0.18), transparent 55%), var(--surface); } .hero-card[data-score="2"], .hero-card[data-score="1"] { background: radial-gradient(140% 90% at 50% -20%, rgba(180, 140, 200, 0.18), transparent 55%), var(--surface); border-color: rgba(180, 140, 200, 0.28); } .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--moon-soft); margin: 0 0 18px; text-transform: none; opacity: 0.85; } /* The big visual answer: emoji glyph 72-96px. Two-stage animation: a satisfying pop entrance, then gentle floating. */ .verdict-glyph { font-size: clamp(72px, 18vw, 96px); line-height: 1; margin: 4px auto 18px; display: block; filter: drop-shadow(0 8px 26px var(--moon-glow)); animation: glyph-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both, gentle-float 5s 700ms ease-in-out infinite; } @keyframes glyph-pop { 0% { opacity: 0; transform: scale(0.4) rotate(-12deg); } 60% { opacity: 1; transform: scale(1.12) rotate(3deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } } /* Score-tinted glow on the verdict glyph so the color reinforces the verbal verdict */ .hero-card[data-score="5"] .verdict-glyph { filter: drop-shadow(0 8px 32px rgba(255, 214, 133, 0.65)); } .hero-card[data-score="4"] .verdict-glyph { filter: drop-shadow(0 8px 28px rgba(255, 214, 133, 0.45)); } .hero-card[data-score="3"] .verdict-glyph { filter: drop-shadow(0 8px 26px rgba(255, 200, 130, 0.30)); } .hero-card[data-score="2"] .verdict-glyph { filter: drop-shadow(0 8px 26px rgba(180, 140, 200, 0.35)); } .hero-card[data-score="1"] .verdict-glyph { filter: drop-shadow(0 8px 26px rgba(180, 140, 200, 0.45)); } .hero-card[data-score="no-night"] { background: radial-gradient(140% 90% at 50% -20%, rgba(255, 195, 100, 0.20), transparent 55%), var(--surface); border-color: rgba(255, 195, 100, 0.30); } .hero-card[data-score="no-night"] .verdict-glyph { filter: drop-shadow(0 8px 32px rgba(255, 195, 100, 0.55)); } /* Refresh button — small circular icon button, top-right of hero card. Three states: idle (refresh icon), spinning (spin animation), done (checkmark flash). */ .refresh-btn { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); color: var(--text-dim); border-radius: 50%; cursor: pointer; padding: 0; z-index: 2; transition: color 220ms, border-color 220ms, background 220ms; overflow: hidden; } .refresh-btn svg { position: absolute; transition: opacity 160ms, transform 220ms; } .refresh-btn .refresh-done-icon { opacity: 0; transform: scale(0.4); color: var(--good); } .refresh-btn:hover { color: var(--moon); border-color: var(--moon-edge); background: var(--surface-h); } .refresh-btn[data-spinning="true"] .refresh-icon { animation: spin 900ms linear infinite; } .refresh-btn[data-state="done"] { color: var(--good); border-color: var(--aurora-soft); background: rgba(141, 240, 200, 0.10); animation: done-pulse 420ms cubic-bezier(0.34, 1.56, 0.64, 1) both; } .refresh-btn[data-state="done"] .refresh-icon { opacity: 0; } .refresh-btn[data-state="done"] .refresh-done-icon { opacity: 1; transform: scale(1); } @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes done-pulse { 0% { box-shadow: 0 0 0 0 var(--aurora-glow); } 60% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* GPS button busy state: subtle pulse + change text to "Looking for you…" */ .btn-link[data-busy="true"] { pointer-events: none; opacity: 0.85; } .btn-link[data-busy="true"]::before { content: "○"; display: inline-block; margin-right: 8px; animation: gps-pulse 1.2s ease-in-out infinite; } @keyframes gps-pulse { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } } .hero-line { font-family: var(--font-display); font-size: clamp(30px, 6.5vw, 40px); line-height: 1.1; margin: 0 0 12px; font-weight: 400; letter-spacing: -0.015em; color: var(--text); text-wrap: balance; } .hero-direction { color: var(--text-dim); font-size: 17px; margin: 0 0 24px; line-height: 1.45; max-width: 28ch; margin-left: auto; margin-right: auto; text-wrap: balance; } /* Conditions chip — small pill at the bottom of the card */ .clouds { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-dim); margin: 0; padding: 9px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: rgba(18, 10, 37, 0.3); } .clouds .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 12px currentColor; flex-shrink: 0; } .clouds[data-level="warn"] .dot { background: var(--warn); } .clouds[data-level="bad"] .dot { background: var(--bad); } /* ---------- Section titles ---------- */ .section-title { font-family: var(--font-display); font-size: 19px; font-weight: 400; letter-spacing: -0.005em; color: var(--text); margin: 0 0 14px; padding-left: 6px; } /* ---------- Lists ---------- */ .object-list, .bonus-list { list-style: none; padding: 8px; margin: 0 0 24px; background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; flex-direction: column; gap: 4px; } .object-list li, .bonus-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius-sm); transition: background 160ms; } .object-list li:hover, .bonus-list li:hover { background: var(--surface-h); } .object-icon { font-size: 22px; line-height: 1; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--moon-glow), transparent 70%), rgba(18, 10, 37, 0.5); border: 1.5px solid var(--moon-edge); flex-shrink: 0; position: relative; box-shadow: 0 0 24px -8px var(--moon-edge); } .bonus-list .object-icon { background: radial-gradient(circle at 50% 35%, var(--aurora-glow), transparent 70%), rgba(18, 10, 37, 0.5); border-color: var(--aurora-soft); box-shadow: 0 0 24px -8px var(--aurora-soft); } .object-body { flex: 1; min-width: 0; } .object-name { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 3px; letter-spacing: -0.005em; } .object-detail { color: var(--text-dim); font-size: 14px; line-height: 1.4; } /* ---------- Error box ---------- */ .error-box { background: var(--surface); border: 1.5px solid var(--bad); color: var(--text); padding: 18px 20px; border-radius: var(--radius); margin: 20px 0; font-size: 15px; } /* ---------- SEO copy ---------- */ .seo-copy { margin: 72px 0 0; padding: 32px 0 0; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 16px; line-height: 1.65; } .seo-copy h2 { font-family: var(--font-display); color: var(--text); font-size: 26px; margin: 0 0 14px; font-weight: 400; letter-spacing: -0.01em; } .seo-copy h3 { font-family: var(--font-display); color: var(--text); font-size: 20px; margin: 28px 0 8px; font-weight: 400; letter-spacing: -0.005em; } .seo-copy ul { padding-left: 22px; } .seo-copy li { margin: 8px 0; } .seo-copy strong { color: var(--text); font-weight: 700; } .seo-copy a { color: var(--moon-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--moon-edge); } .seo-copy a:hover { color: var(--moon); } /* ---------- Footer ---------- */ .site-footer { max-width: var(--maxw); margin: 72px auto 0; padding: 28px 22px 44px; border-top: 1px solid var(--line); color: var(--text-faint); font-size: 13px; text-align: center; position: relative; z-index: 1; } .site-footer nav { display: flex; gap: 22px; justify-content: center; margin-bottom: 14px; font-size: 14px; font-weight: 600; } .site-footer a { color: var(--text-dim); text-decoration: none; transition: color 160ms; } .site-footer a:hover { color: var(--text); } .data-sources { line-height: 1.7; margin: 0 0 10px; max-width: 48ch; margin-left: auto; margin-right: auto; color: var(--text-faint); } .data-sources a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid var(--line); } .data-sources a:hover { color: var(--text); } .copyright { margin: 8px 0 0; font-size: 12.5px; } .noscript-info { background: var(--surface); border: 1.5px solid var(--line-strong); padding: 22px; border-radius: var(--radius); margin: 24px 0; } /* ---------- Header (just the location chip on the left) ---------- */ .site-header { display: flex; align-items: center; gap: 12px; } /* ---------- Footer controls (quiet theme + lang toggles at the bottom) ---------- */ .footer-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; opacity: 0.7; transition: opacity 200ms; } .footer-controls:hover { opacity: 1; } .footer-controls .theme-toggle { width: 30px; height: 30px; } .footer-controls .lang-switcher-toggle { padding: 5px 11px; font-size: 11.5px; } .footer-controls .lang-switcher-menu { top: auto; bottom: calc(100% + 8px); } /* ---------- Theme toggle button ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-dim); border-radius: 50%; cursor: pointer; padding: 0; transition: color 220ms, border-color 220ms, background 220ms, transform 180ms; position: relative; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .theme-toggle:hover { color: var(--moon); border-color: var(--moon-edge); background: var(--surface-h); } .theme-toggle .theme-icon { position: absolute; transition: opacity 200ms, transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* In DARK mode: show the SUN icon (suggesting you can switch to light) */ .theme-toggle .theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); } .theme-toggle .theme-icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* In LIGHT mode: show the MOON icon (suggesting you can switch to dark) */ .theme-toggle[data-theme="light"] .theme-icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } .theme-toggle[data-theme="light"] .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); } /* ---------- Language switcher (header chip area) ---------- */ .lang-switcher { position: relative; } .lang-switcher-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--text-dim); padding: 7px 13px; border-radius: var(--radius-pill); font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; transition: color 160ms, border-color 160ms, background 160ms; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lang-switcher-toggle:hover { color: var(--text); border-color: var(--moon-edge); } .lang-switcher-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 30; list-style: none; padding: 6px; margin: 0; min-width: 200px; max-height: 60vh; overflow-y: auto; background: rgba(18, 10, 37, 0.94); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1.5px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 24px 48px -24px rgba(0,0,0,0.6); } :root[data-theme="light"] .lang-switcher-menu { background: rgba(255, 247, 234, 0.97); } .lang-switcher-menu li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); font-size: 14.5px; transition: background 120ms; } .lang-switcher-menu li:hover, .lang-switcher-menu li[aria-selected="true"] { background: var(--surface-h); color: var(--moon-soft); } .lang-switcher-menu .lang-code { font-weight: 600; letter-spacing: 0.05em; font-size: 11.5px; color: var(--text-faint); min-width: 26px; } .lang-switcher-menu .lang-native { flex: 1; } /* ---------- Language nudge banner ---------- */ .lang-nudge { max-width: var(--maxw); margin: 12px auto 0; padding: 14px 18px; background: var(--surface); border: 1.5px solid var(--moon-edge); border-radius: var(--radius); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; z-index: 2; } .lang-nudge-text { margin: 0; flex: 1; min-width: 200px; color: var(--text); font-size: 15px; } .lang-nudge-actions { display: flex; gap: 8px; align-items: center; } .lang-nudge .btn-primary { padding: 10px 18px; font-size: 14px; } .lang-nudge .btn-link { margin: 0; padding: 8px 12px; font-size: 14px; } /* RTL support (Arabic, Hebrew etc.) */ [dir="rtl"] .breadcrumbs { direction: rtl; } [dir="rtl"] .lang-switcher-menu { left: 0; right: auto; } /* ---------- City landing pages (Phase 2 SEO) ---------- */ .breadcrumbs { font-size: 13.5px; color: var(--text-faint); margin: 4px 0 24px; letter-spacing: 0.01em; } .breadcrumbs a { color: var(--text-dim); text-decoration: none; border-bottom: 1px solid transparent; transition: color 160ms, border-color 160ms; } .breadcrumbs a:hover { color: var(--moon-soft); border-bottom-color: var(--moon-edge); } .breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 600; } /* On city pages we re-enable the .objects / .bonus sections that the homepage hides (homepage shows only the verdict card). */ .city-page-result .objects, .city-page-result .bonus { display: block; margin-top: 28px; } .city-page-result .object-list, .city-page-result .bonus-list { display: flex; flex-direction: column; gap: 4px; } /* Country / city grid on index pages */ .country-grid, .city-grid { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .country-grid li, .city-grid li { margin: 0; } .country-grid a, .city-grid a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: 14.5px; transition: color 160ms, border-color 160ms, background 160ms, transform 80ms; } .country-grid a:hover, .city-grid a:hover { color: var(--moon-soft); border-color: var(--moon-edge); background: var(--surface-h); } .country-grid a:active, .city-grid a:active { transform: translateY(1px); } .country-grid .city-count { font-size: 12px; color: var(--text-faint); font-feature-settings: "tnum" 1; } /* ---------- Responsive ---------- */ @media (max-width: 420px) { /* Narrow phones: stack picker form vertically, both controls full-width. Touch targets stay ≥ 44px tall. */ .picker-form { flex-direction: column; align-items: stretch; } .picker-form .btn-primary { width: 100%; } /* Tighten container padding so the hero card has room */ .container { padding: 24px 18px 48px; } .picker { padding-top: 40px; } .picker::before { font-size: 60px; margin-bottom: 22px; } .hero-card { padding: 26px 20px 24px; } .hero-line { font-size: clamp(24px, 7vw, 30px); } /* Refresh button slightly larger touch target on small screens */ .refresh-btn { width: 40px; height: 40px; top: 12px; right: 12px; } /* Verdict glyph stays large but with less vertical space around it */ .verdict-glyph { margin: 4px auto 14px; } /* Site header — give the chip more breathing room and a larger tap area */ .location-chip { padding: 10px 16px; min-height: 40px; } /* Loading state */ .loading-state { padding: 40px 16px 48px; } .moonie { width: 120px; height: 120px; } /* SEO copy + footer scale down a touch */ .seo-copy { font-size: 15.5px; margin-top: 60px; } .site-footer { margin-top: 60px; } } @media (min-width: 600px) { .container { padding: 40px 28px 64px; } .picker { padding-top: 88px; } .hero-card { padding: 44px 36px 38px; } .object-list li, .bonus-list li { padding: 14px 16px; } } /* Ensure all interactive elements meet 44×44 touch-target minimum */ @media (hover: none) and (pointer: coarse) { .btn-primary, .btn-link, .location-chip { min-height: 44px; } .refresh-btn { min-width: 40px; min-height: 40px; } .suggestion { min-height: 44px; } } /* ---------- Scene transitions (picker ↔ loading ↔ result) ---------- We toggle a `.is-leaving` class on the outgoing scene, then swap `hidden` after the fade-out completes. New scene fades up via `fadeUp` keyframes. */ @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-4px); } } .picker, .result, .loading-state { animation: fadeUp 480ms cubic-bezier(0.2, 0.6, 0.2, 1) both; } .picker.is-leaving, .result.is-leaving, .loading-state.is-leaving { animation: fadeDown 220ms cubic-bezier(0.4, 0, 1, 1) forwards; } .site-header { animation: fadeUp 500ms 80ms cubic-bezier(0.2, 0.6, 0.2, 1) both; } .object-list li, .bonus-list li { animation: fadeUp 450ms cubic-bezier(0.2, 0.6, 0.2, 1) both; } .object-list li:nth-child(2) { animation-delay: 70ms; } .object-list li:nth-child(3) { animation-delay: 140ms; } .object-list li:nth-child(4) { animation-delay: 210ms; } .bonus-list li:nth-child(1) { animation-delay: 90ms; } .bonus-list li:nth-child(2) { animation-delay: 160ms; } .bonus-list li:nth-child(3) { animation-delay: 230ms; } ::selection { background: var(--moon); color: #1a1200; }