@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap'); :root { --ink: #0F172A; --ink-soft: rgba(255,255,255,0.75); --card-bg: rgba(255, 255, 255, 0.14); --card-border: rgba(255, 255, 255, 0.25); --accent: #FFD166; --error: #FF6B6B; --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; /* Default sky gradient — clear day */ --sky-1: #4F7CFF; --sky-2: #7EC8E3; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); min-height: 100vh; background: linear-gradient(160deg, var(--sky-1), var(--sky-2)); transition: background 0.8s ease; display: flex; justify-content: center; padding: 40px 20px; color: #fff; } /* Weather condition themes — applied as a class on */ body.clear { --sky-1: #4F7CFF; --sky-2: #7EC8E3; } body.clouds { --sky-1: #64748B; --sky-2: #94A3B8; } body.rain { --sky-1: #334155; --sky-2: #64748B; } body.thunderstorm { --sky-1: #1E1B3A; --sky-2: #3B2F63; } body.snow { --sky-1: #93C5FD; --sky-2: #E0F2FE; } body.mist { --sky-1: #708090; --sky-2: #A8B5BD; } .app { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 20px; } .app-header { text-align: center; } .logo { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: -0.01em; } .tagline { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; } /* ===== SEARCH ===== */ .search-form { width: 100%; display: flex; gap: 8px; } .search-form input { flex: 1; padding: 13px 16px; border-radius: 10px; border: 1px solid var(--card-border); background: var(--card-bg); backdrop-filter: blur(10px); color: #fff; font-size: 14px; } .search-form input::placeholder { color: rgba(255,255,255,0.6); } .search-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .search-form button { padding: 13px 22px; border-radius: 10px; border: none; background: var(--accent); color: #1F2937; font-weight: 700; font-size: 14px; cursor: pointer; transition: transform 0.15s ease, background 0.15s ease; } .search-form button:hover { transform: translateY(-1px); } .search-form button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* ===== ERROR ===== */ .error-msg { background: rgba(255, 107, 107, 0.18); border: 1px solid rgba(255, 107, 107, 0.4); color: #fff; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; width: 100%; text-align: center; } /* ===== LOADING ===== */ .loading { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 14px; } .spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== WEATHER CARD (signature glass element) ===== */ .weather-card { width: 100%; background: var(--card-bg); border: 1px solid var(--card-border); backdrop-filter: blur(16px); border-radius: 20px; padding: 28px 26px; box-shadow: 0 12px 32px rgba(0,0,0,0.15); } .weather-main { display: flex; justify-content: space-between; align-items: flex-start; } .city-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .condition { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; text-transform: capitalize; } .weather-icon { font-size: 46px; line-height: 1; } .temperature { font-family: var(--font-display); font-size: 56px; font-weight: 700; margin-top: 14px; letter-spacing: -0.02em; } .feels-like { font-size: 13px; color: var(--ink-soft); margin-top: -4px; margin-bottom: 18px; } .weather-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .detail-box { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .detail-label { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; } .detail-value { font-family: var(--font-display); font-size: 17px; font-weight: 600; } /* ===== EMPTY HINT ===== */ .empty-hint { text-align: center; color: var(--ink-soft); font-size: 14px; padding: 30px 10px; } /* ===== FOOTER ===== */ .app-footer { color: rgba(255,255,255,0.55); font-size: 12px; text-align: center; margin-top: 10px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }