:root { --canary-100:#FFF9DB; --canary-200:#FFF3B0; --canary-300:#FFE566; --canary-400:#FFD60A; --canary-500:#F2C200; --canary-600:#D9A800; --sky-100:#EAF6FF; --sky-200:#C9E9FF; --sky-300:#8FD0FF; --sky-400:#4FB3FF; --sky-500:#2D8CFF; --sky-600:#1F6FE0; --night-400:#3A4D99; --night-500:#2A3A7A; --night-600:#1C2A5E; --night-700:#131D45; --night-800:#0C1430; --night-900:#070D20; --grad-day: linear-gradient(180deg,#2D8CFF 0%,#79C4FF 55%,#CFEAFF 100%); --grad-night: linear-gradient(180deg,#070D20 0%,#131D45 60%,#24397A 100%); --grad-aurora: radial-gradient(60% 80% at 15% 20%, rgba(45,140,255,.55) 0%, transparent 60%), radial-gradient(50% 70% at 85% 15%, rgba(167,139,250,.45) 0%, transparent 60%), radial-gradient(45% 60% at 70% 85%, rgba(255,107,157,.30) 0%, transparent 60%), radial-gradient(40% 55% at 25% 90%, rgba(127,227,195,.28) 0%, transparent 60%); --grad-iridescent: conic-gradient(from 210deg,#5AC8FA,#A78BFA,#FF6B9D,#FFD60A,#7FE3C3,#5AC8FA); --grad-canary-text: linear-gradient(100deg,#FFD60A 0%,#FF9F0A 30%,#FF6B9D 55%,#A78BFA 80%,#5AC8FA 100%); --chroma-red: rgba(255,0,90,.35); --chroma-cyan: rgba(0,200,255,.35); --glass-1: rgba(255,255,255,.08); --glass-2: rgba(255,255,255,.14); --glass-3: rgba(255,255,255,.22); --glass-stroke: rgba(255,255,255,.25); --glass-highlight: rgba(255,255,255,.50); --glass-canary: rgba(255,214,10,.16); --glass-canary-stroke: rgba(255,214,10,.45); --scrim: rgba(7,13,32,.45); --frost-1: rgba(33,44,82,.93); --frost-2: rgba(43,56,100,.95); --frost-3: rgba(54,69,118,.96); --frost-canary-base: rgba(54,49,30,.93); --text-1:#FFFFFF; --text-2: rgba(235,242,255,.78); --text-3: rgba(235,242,255,.66); --text-inverse:#0C1430; --wx-sun:#FFD60A; --wx-rain:#5AC8FA; --wx-storm:#A78BFA; --wx-snow:#E8F4FF; --wx-heat:#FF9F0A; --wx-wind:#7FE3C3; --wx-uv:#FF6B6B; --ok:#34D399; --warn:#FFB020; --danger:#FF5A5F; --live:#34D399; --font-display:"Bricolage Grotesque","Bricolage Fallback","Instrument Sans",system-ui,sans-serif; --font-body:"Instrument Sans","Instrument Fallback",system-ui,-apple-system,sans-serif; --font-mono:"Spline Sans Mono","Mono Fallback",ui-monospace,"SF Mono",monospace; --type-hero:96px; --type-display:56px; --type-h1:40px; --type-h2:28px; --type-h3:20px; --type-body:16px; --type-small:14px; --type-micro:12px; --tracking-display:-0.02em; --tracking-micro:0.14em; --leading-tight:1.05; --leading-heading:1.15; --leading-body:1.55; --weight-display:700; --weight-heading:600; --weight-body:400; --weight-medium:500; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:24px; --radius-xl:32px; --radius-pill:999px; --container-max:1200px; --hit-target:44px; --content-max:900px; --blur-sm:12px; --blur-md:20px; --blur-lg:36px; --shadow-glass:0 8px 32px rgba(4,10,30,.35); --shadow-float:0 20px 60px rgba(4,10,30,.50); --shadow-glow-canary:0 0 48px rgba(255,214,10,.35); --inset-glass: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(255,255,255,.06); --inset-glass-strong: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(255,255,255,.10); --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --ease-liquid: cubic-bezier(0.22,1,0.36,1); --ease-spring: cubic-bezier(0.34,1.56,0.64,1); --dur-fast:150ms; --dur-base:300ms; --dur-slow:600ms; --dur-morph:500ms; --dur-ambient:12s; --grad-dusk: linear-gradient(180deg,#1C2A5E 0%,#6C4BA6 55%,#FF9D6C 100%); --surface-page: radial-gradient(120% 75% at 50% -8%, #1C2A5E 0%, transparent 55%), linear-gradient(165deg, #0C1430 0%, #0E1838 50%, #0A1024 100%); --accent: var(--canary-400); --accent-hover: var(--canary-300); --accent-press: var(--canary-500); } *,*::before,*::after { box-sizing: border-box; } html, body { margin:0; min-height:100vh; } html { -webkit-text-size-adjust:100%; } body { font-family: var(--font-body); font-size: var(--type-body); color: var(--text-2); line-height: var(--leading-body); background-color: #0A1024; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { vertical-align: middle; } ul { margin:0; } button { font: inherit; } body::after { content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; background-image: var(--noise); opacity:.05; mix-blend-mode: overlay; } body::before { content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background: var(--surface-page); } .atmosphere { position:absolute; top:0; left:0; right:0; height:1120px; z-index:-1; overflow:hidden; pointer-events:none; background: var(--grad-dusk); -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 60%,transparent 100%); mask-image: linear-gradient(180deg,#000 0%,#000 60%,transparent 100%); } .atmosphere::after { content:""; position:absolute; inset:0; z-index:2; background: linear-gradient(180deg, rgba(7,13,32,0.30) 0%, rgba(7,13,32,0.55) 100%); } .aurora { position:absolute; inset:-10%; background: radial-gradient(55% 50% at 18% 14%, rgba(90,200,250,0.42) 0%, transparent 60%), radial-gradient(50% 55% at 86% 12%, rgba(167,139,250,0.44) 0%, transparent 62%), radial-gradient(60% 60% at 78% 88%, rgba(255,157,108,0.34) 0%, transparent 60%), radial-gradient(55% 55% at 12% 92%, rgba(255,107,157,0.28) 0%, transparent 62%); animation: cfAurora 18s ease-in-out infinite; } .blob { position:absolute; filter: blur(70px); opacity:.5; mix-blend-mode: screen; pointer-events:none; background: var(--grad-iridescent); border-radius:58% 42% 33% 67% / 63% 38% 62% 37%; will-change: transform; } .blob-1 { width:520px; height:520px; left:-120px; top:-140px; } .blob-2 { width:440px; height:440px; right:-100px; top:4%; opacity:.4; } .blob-3 { width:560px; height:560px; left:34%; bottom:-220px; opacity:.46; } @keyframes cfAurora { 0%,100%{ filter:hue-rotate(0) brightness(1);} 50%{ filter:hue-rotate(28deg) brightness(1.1);} } @keyframes cfMorph { 0%,100% { border-radius:58% 42% 33% 67% / 63% 38% 62% 37%; transform:translate(0,0) rotate(0deg) scale(1); } 33% { border-radius:38% 62% 64% 36% / 43% 65% 35% 57%; transform:translate(40px,-32px) rotate(12deg) scale(1.12); } 66% { border-radius:64% 36% 42% 58% / 36% 50% 50% 64%; transform:translate(-34px,26px) rotate(-8deg) scale(.94); } } @keyframes cfDrift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(28px,-26px) scale(1.06); } } @media (prefers-reduced-motion: no-preference) { .blob-1 { animation: cfMorph 19s ease-in-out infinite; } .blob-2 { animation: cfMorph 24s ease-in-out infinite reverse; } .blob-3 { animation: cfMorph 21s ease-in-out infinite; } } main { max-width: var(--content-max); margin:0 auto; position:relative; padding: 0 var(--space-4) var(--space-7); } h1 { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); line-height: var(--leading-heading); color: var(--text-1); font-size: clamp(1.9rem, 1rem + 3vw, 2.6rem); margin:1rem 0 .35rem; } h2 { font-family: var(--font-display); font-weight:700; letter-spacing:-.015em; color: var(--text-1); font-size:28px; line-height: var(--leading-heading); margin: var(--space-6) 0 var(--space-3); } h3 { font-family: var(--font-display); font-weight:600; color: var(--text-1); font-size:20px; margin: var(--space-4) 0 var(--space-2); } p { margin: 0 0 1rem; } a { color: var(--canary-300); text-decoration: underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); } a:hover { text-decoration-color: currentColor; } html:not(.night) a { color: var(--sky-600); } .pill,.island-nav a,.lang-switch a,.nearby-chips a,.nf-islands a, .btn-canary,.btn-glass,.promo-cta,.hero-card,.hero-cta,.island-card a, .beach-row,.blog-card,.blog-backlink .pill,.footer-langs a,.wxmap-jump .pill, .summary-chip,.brand,.skip-link,#search-results a,.breadcrumb a,.site-footer a, .month-strip .pill,.island-links .pill,.bymonth-list .pill { text-decoration:none; } .accent-grad { background: var(--grad-canary-text); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation: cfSheen 6s linear infinite; } @keyframes cfSheen { to{ background-position:200% 50%; } } .date-line, .intro, .stale-notice { color: var(--text-2); } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .glass-card { background: var(--glass-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass), var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); border-radius: var(--radius-lg); padding: var(--space-5); color: var(--text-2); position:relative; } .glass-card--2 { background: var(--glass-2); } .glass-card--3 { background: var(--glass-3); border-color: var(--glass-highlight); box-shadow: var(--inset-glass-strong), var(--shadow-glass); } .glass-card--canary { background: var(--glass-canary); border-color: var(--glass-canary-stroke); box-shadow: var(--inset-glass), var(--shadow-glow-canary); } .iridescent { position:relative; border-radius: calc(var(--radius-xl) + 2px); box-shadow: var(--shadow-float), 0 0 80px rgba(167,139,250,.22); } .iridescent::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; background: var(--grad-iridescent); pointer-events:none; z-index:1; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } .iridescent > * { border-radius: var(--radius-xl); } .site-header { position:sticky; top:0; z-index:50; background: var(--glass-2); border-bottom:1px solid var(--glass-stroke); box-shadow: var(--inset-glass), 0 4px 24px rgba(4,10,30,.18); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); padding-top: max(0px, env(safe-area-inset-top)); } .header-row { display:flex; justify-content:space-between; align-items:center; gap: var(--space-2); max-width: var(--content-max); margin:0 auto; padding:.6rem var(--space-4) .4rem; } .brand { display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; white-space:nowrap; font-family: var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing: var(--tracking-display); color: var(--text-1); } .brand:hover { text-decoration:none; } .brand-mark { flex:none; display:block; } .brand-word i { color: var(--canary-400); font-style:normal; } .header-tools { display:flex; align-items:center; gap: var(--space-2); min-width:0; } .island-nav { display:flex; flex-wrap:wrap; gap:.4rem; max-width: var(--content-max); margin:0 auto; padding:.2rem var(--space-4) .6rem; } @media (max-width:640px){ .island-nav { flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; } .island-nav::-webkit-scrollbar { display:none; } .island-nav a { flex:none; scroll-snap-align:start; } } @media (max-width:600px){ .header-row { gap:.4rem; align-items:center; } .search-box { display:none !important; } .header-tools { gap:.4rem; margin-left:auto; } .brand-word { font-size:18px; } .lang-switch a { padding:.22rem .38rem; font-size:.72rem; } .unit-toggle { padding:2px; } .unit-toggle button { padding:.26rem .42rem; font-size:.74rem; } } .search-box { position:relative; } .js-only { display:none; } .search-box input { width: 200px; max-width: 46vw; height:38px; padding:0 .9rem; font-family: var(--font-body); font-size:.9rem; color: var(--text-1); background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-pill); outline:none; -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); transition: box-shadow var(--dur-fast) var(--ease-liquid), background var(--dur-fast); } .search-box input::placeholder { color: var(--text-3); } .search-box input:focus { background: var(--glass-2); box-shadow:0 0 0 4px rgba(255,214,10,.12); } #search-results { position:absolute; top:calc(100% + .35rem); right:0; left:0; z-index:60; list-style:none; padding:.3rem; margin:0; max-height:60vh; overflow:auto; background: var(--glass-2); border:1px solid var(--glass-stroke); border-radius: var(--radius-md); box-shadow: var(--inset-glass), var(--shadow-float); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); } #search-results li { margin:0; } #search-results a, #search-results li > span { display:block; padding:.5rem .7rem; border-radius: var(--radius-sm); color: var(--text-1); text-decoration:none; font-size:.9rem; } #search-results a:hover, #search-results a:focus { background: var(--glass-canary); } #search-results .sr-island { color: var(--text-3); font-size:.78rem; margin-left:.3rem; } #search-results .sr-empty { color: var(--text-3); } .lang-switch { display:flex; align-items:center; gap:.15rem; } .lang-switch a { display:inline-flex; align-items:center; padding:.3rem .5rem; border-radius: var(--radius-pill); font-family: var(--font-body); font-size:.78rem; font-weight:600; color: var(--text-2); text-decoration:none; transition: background var(--dur-fast), color var(--dur-fast); } .lang-switch a:hover { background: var(--glass-1); color: var(--text-1); text-decoration:none; } .lang-switch a.active { background: var(--glass-canary); border:1px solid var(--glass-canary-stroke); color: var(--canary-200); } html:not(.night) .lang-switch a.active { color: var(--canary-600); } .unit-toggle { position:relative; display:flex; align-items:center; gap:2px; padding:3px; border-radius: var(--radius-pill); background: var(--glass-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass); } .unit-toggle::before { content:""; position:absolute; top:3px; bottom:3px; left:3px; z-index:0; width: calc((100% - 8px) / 2); border-radius: var(--radius-pill); background: var(--canary-400); box-shadow:0 2px 8px rgba(255,214,10,.4); transition: transform var(--dur-base) var(--ease-spring); } .unit-toggle:has(button[data-u="f"].active)::before { transform: translateX(calc(100% + 2px)); } .unit-toggle button { position:relative; z-index:1; font-family: var(--font-mono); font-size:.78rem; font-weight:600; line-height:1; padding:.32rem .5rem; border:0; border-radius: var(--radius-pill); background:none; color: var(--text-3); cursor:pointer; transition: color var(--dur-fast); } .unit-toggle button:hover { color: var(--text-1); } .unit-toggle button.active { color: var(--text-inverse); } @supports not (selector(:has(*))) { .unit-toggle::before { display:none; } .unit-toggle button.active { background: var(--canary-400); box-shadow:0 2px 8px rgba(255,214,10,.4); } } .pill, .chip, .island-nav a, .nearby-chips a, .nf-islands a { display:inline-flex; align-items:center; gap:6px; padding:.45rem 1rem; border-radius: var(--radius-pill); font-size:.88rem; font-weight:600; text-decoration:none; color: var(--text-1); white-space:nowrap; background: var(--glass-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); transition: transform var(--dur-fast) var(--ease-liquid), background var(--dur-fast); } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .pill:hover, .chip:hover, .island-nav a:hover, .nearby-chips a:hover, .nf-islands a:hover { transform:translateY(-1px); background: var(--glass-2); text-decoration:none; } } .pill:active, .chip:active, .island-nav a:active, .nearby-chips a:active, .nf-islands a:active { transform: scale(.96); } .pill[aria-current="page"], .pill.is-selected, .chip[aria-pressed="true"], .chip.is-selected, .island-nav a[aria-current="page"] { background: var(--glass-canary); border-color: var(--glass-canary-stroke); color: var(--canary-200); } html:not(.night) .pill[aria-current="page"], html:not(.night) .pill.is-selected, html:not(.night) .chip[aria-pressed="true"], html:not(.night) .chip.is-selected, html:not(.night) .island-nav a[aria-current="page"] { color: var(--canary-600); } .btn-canary, .btn-glass, .btn-ghost, .promo-cta { display:inline-flex; align-items:center; justify-content:center; gap:8px; height: var(--hit-target); padding:0 22px; font-family: var(--font-body); font-size:15px; font-weight:600; border-radius: var(--radius-pill); cursor:pointer; text-decoration:none; transition: all var(--dur-fast) var(--ease-liquid); } .btn-sm { height:36px; padding:0 16px; font-size:14px; } .btn-lg { height:52px; padding:0 28px; font-size:16px; } .btn-ghost { background:transparent; color: var(--text-1); border:1px solid var(--glass-stroke); } .btn-ghost:hover { background: var(--glass-1); text-decoration:none; } .btn-ghost:active { transform: scale(.97); } .btn-canary, .promo-cta { background: var(--accent); color: var(--text-inverse); border:1px solid rgba(255,255,255,.25); box-shadow: var(--inset-glass-strong), 0 4px 16px rgba(255,214,10,.25); } .btn-canary:hover, .promo-cta:hover { background: var(--accent-hover); box-shadow: var(--inset-glass-strong), var(--shadow-glow-canary); text-decoration:none; } .btn-canary:active, .promo-cta:active { transform: scale(.97); background: var(--accent-press); } .btn-glass { background: var(--glass-2); color: var(--text-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass), var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.4); backdrop-filter: blur(var(--blur-sm)) saturate(1.4); } .btn-glass:hover { background: var(--glass-3); text-decoration:none; } .btn-glass:active { transform: scale(.97); } .icon-btn { width: var(--hit-target); height: var(--hit-target); flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: var(--glass-2); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass), var(--shadow-glass); color: var(--text-1); cursor:pointer; -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.4); backdrop-filter: blur(var(--blur-sm)) saturate(1.4); transition: all var(--dur-fast) var(--ease-liquid); } .icon-btn:hover { background: var(--glass-3); } .icon-btn:active { transform: scale(.94); } .badge { display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 12px; border-radius: var(--radius-pill); font-family: var(--font-body); font-size:12px; font-weight:600; letter-spacing:.02em; color: var(--text-2); background: var(--glass-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); vertical-align: middle; } .badge::before { content:""; width:7px; height:7px; border-radius:50%; background: currentColor; box-shadow:0 0 8px currentColor; } .badge--live { color: var(--ok); } .badge--live::before { animation: livePulse 2.5s ease-in-out infinite; } .badge--stale { color: var(--text-3); } .badge--stale::before { box-shadow:none; animation:none; } .badge--sunny { color: var(--canary-400); } .badge--warn { color: var(--warn); } @keyframes livePulse { 50%{ opacity:.4; } } .today-card { margin-top: var(--space-4); padding: var(--space-5); color: var(--text-2); position:relative; background: var(--glass-3); border:1px solid var(--glass-highlight); box-shadow: var(--inset-glass-strong), var(--shadow-float); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); } .hero-temp { display:flex; align-items:center; gap: var(--space-5); flex-wrap:wrap; } .hero-temp__icon { flex:none; } .hero-temp__icon img { width:clamp(84px,22vw,120px); height:auto; display:block; } .hero-temp__body { display:flex; flex-direction:column; min-height:128px; justify-content:center; min-width:0; } .hero-temp__place { font-size:14px; color: var(--text-2); font-weight:500; } .hero-temp__value { font-family: var(--font-display); font-weight:300; font-size: clamp(64px, 16vw, 96px); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--text-1); font-variant-numeric: tabular-nums; display:block; text-shadow: -1px 0 var(--chroma-red), 1px 0 var(--chroma-cyan); } @media (prefers-reduced-transparency: reduce){ .hero-temp__value { text-shadow:none; } } .hero-temp__value i { font-style:normal; font-weight:300; } .hero-temp__summary { font-size:14px; color: var(--text-2); } .sky-row { display:grid; grid-template-columns:1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); } .sky-cell { display:flex; align-items:center; gap:.6rem; padding: var(--space-3) var(--space-4); background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-md); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); } .sky-cell img { width:40px; height:40px; flex:none; } .sky-cell__t { display:flex; flex-direction:column; min-width:0; } .sky-cell__when { font-size:11px; font-weight:600; letter-spacing: var(--tracking-micro); text-transform:uppercase; color: var(--text-3); } .sky-cell__desc { font-size:.92rem; color: var(--text-1); font-weight:500; } .forecast-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--space-3); margin-top: var(--space-4); } .forecast-tile { background: var(--glass-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); border-radius: var(--radius-md); display:flex; flex-direction:column; align-items:center; gap:2px; min-height:152px; padding: var(--space-4) var(--space-2); text-align:center; transition: transform var(--dur-base) var(--ease-liquid); } .forecast-tile img { width:44px; height:44px; } .forecast-tile.is-today { background: var(--glass-canary); border-color: var(--glass-canary-stroke); } .forecast-tile__day { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--text-3); } .forecast-tile__temp { font-family: var(--font-mono); font-size:1.25rem; font-weight:600; color: var(--text-1); } .forecast-tile__sea { font-family: var(--font-mono); font-size:.8rem; color: var(--wx-rain); } .forecast-tile__uv { font-family: var(--font-mono); font-size:.72rem; color: var(--text-3); } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .forecast-tile:hover{ transform:translateY(-3px);} } .metrics { display:grid; grid-template-columns:repeat(2,1fr); gap: var(--space-3); margin-top: var(--space-4); } @media (min-width:560px){ .metrics{ grid-template-columns:repeat(3,1fr);} } .metric-tile { background: var(--glass-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); border-radius: var(--radius-md); display:flex; flex-direction:column; gap:4px; min-height:84px; padding: var(--space-4); } .metric-tile__label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing: var(--tracking-micro); text-transform:uppercase; color: var(--text-3); } .metric-tile__label img { width:22px; height:22px; } .metric-tile__value { font-family: var(--font-mono); font-size:1.6rem; font-weight:500; color: var(--text-1); font-variant-numeric: tabular-nums; } .metric-tile__value i { font-style:normal; font-size:.8rem; color: var(--text-3); margin-left:3px; } .metric-tile__value-sm { font-size:.95rem; font-weight:600; color: var(--text-1); display:flex; align-items:center; gap:6px; } .metric-tile--water .metric-tile__value { color: var(--wx-rain); } .uv-meter { margin-top: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-lg); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); } .uv-meter__head { display:flex; align-items:center; gap:10px; margin-bottom:10px; } .uv-meter__label { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; letter-spacing: var(--tracking-micro); text-transform:uppercase; color: var(--text-3); } .uv-meter__label img { width:28px; height:28px; } .uv-meter__value { font-family: var(--font-mono); font-size:1.4rem; font-weight:600; color: var(--text-1); margin-left:auto; } .uv-meter__level { font-weight:600; font-size:14px; } .uv-meter__bar { position:relative; height:10px; border-radius: var(--radius-pill); overflow:visible; background: linear-gradient(90deg,#34D399 0%,#FFD60A 30%,#FF9F0A 55%,#FF5A5F 80%,#A78BFA 100%); box-shadow: var(--inset-glass); } .uv-meter__dot { position:absolute; top:50%; width:18px; height:18px; border-radius:50%; transform: translate(-50%,-50%); background:#fff; border:2px solid rgba(12,20,48,.5); box-shadow:0 2px 8px rgba(4,10,30,.5); } .uv-meter__advice { margin:.6rem 0 0; font-size:14px; color: var(--text-2); } .promo-card { display:flex; gap: var(--space-3); align-items:flex-start; margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); background: var(--glass-canary); border:1px solid var(--glass-canary-stroke); border-radius: var(--radius-lg); box-shadow: var(--inset-glass), var(--shadow-glow-canary); -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.4); backdrop-filter: blur(var(--blur-sm)) saturate(1.4); } .promo-card strong { font-family: var(--font-display); font-weight:700; color: var(--text-1); } .promo-card p { margin:.3rem 0 .6rem; font-size:.88rem; color: var(--text-2); } .promo-hero { display:flex; flex-direction:column; gap:.4rem; align-items:flex-start; margin: var(--space-5) 0; padding: var(--space-5) var(--space-6); background: var(--glass-canary); border:1px solid var(--glass-canary-stroke); border-radius: var(--radius-xl); box-shadow: var(--inset-glass), var(--shadow-glow-canary); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); } .promo-hero strong { font-family: var(--font-display); font-weight: var(--weight-display); font-size:1.4rem; color: var(--text-1); } .promo-hero p { margin:.2rem 0 .8rem; color: var(--text-2); } .promo-icon { flex:none; } .promo-icon img { width:48px; height:48px; } .hero-card { position:relative; display:block; text-decoration:none; color: var(--text-1); padding: var(--space-5) var(--space-5) var(--space-6); margin:.75rem 0 1rem; min-height:148px; border-radius: var(--radius-xl); background: var(--glass-3); border:1px solid var(--glass-highlight); box-shadow: var(--inset-glass-strong), var(--shadow-float); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); } .hero-card:hover { text-decoration:none; } .hero-card::before { content:""; position:absolute; inset:-1.5px; border-radius:inherit; padding:1.5px; z-index:-1; background: var(--grad-iridescent); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } .hero-head { display:flex; align-items:flex-start; gap:1rem; } .hero-label { font-family: var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--canary-300); } html:not(.night) .hero-label { color: var(--canary-600); } .hero-name { font-family: var(--font-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-display); font-size: clamp(1.6rem,6.4vw,2.9rem); color: var(--text-1); line-height:1.05; display:block; } .hero-pct { margin-left:auto; font-family: var(--font-mono); font-weight:600; font-size: clamp(1.8rem,8vw,3.2rem); color: var(--canary-400); font-variant-numeric: tabular-nums; } .hero-pct i { font-style:normal; font-size:1.3rem; } .hero-sub { color: var(--text-2); margin:.4rem 0 0; } .hero-cta { display:inline-block; margin-top:.6rem; font-size:.85rem; font-weight:600; color: var(--text-1); background: var(--glass-2); border:1px solid var(--glass-stroke); border-radius: var(--radius-pill); padding:.35rem .9rem; } .hero-cta:hover { text-decoration:none; background: var(--glass-3); } .island-ranking { list-style:none; padding:0; margin: var(--space-4) 0 0; counter-reset: rank 1; display:grid; gap: var(--space-3); } @media (min-width:760px){ .island-ranking{ grid-template-columns:1fr 1fr; } } .island-card { counter-increment: rank; } .island-card a { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.1rem .75rem; padding:.7rem 1rem .9rem 2.6rem; text-decoration:none; color: var(--text-1); min-height:72px; background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-lg); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); transition: transform var(--dur-base) var(--ease-liquid), background var(--dur-base); } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .island-card a:hover{ transform:translateY(-2px); background: var(--glass-2); } } .island-card a::before { content: counter(rank); position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-family: var(--font-mono); font-weight:600; color: var(--canary-400); } .island-name { font-weight:600; } .island-meta { font-size:.8rem; color: var(--text-3); } .pct-label { grid-column:2; grid-row:1/3; align-self:center; font-family: var(--font-mono); font-weight:600; font-size:1.25rem; color: var(--text-1); font-variant-numeric: tabular-nums; } .pct-bar { grid-column:1/-1; grid-row:3; height:8px; margin-top:.35rem; border-radius: var(--radius-pill); overflow:hidden; background: var(--glass-2); } .pct-fill { display:block; height:100%; border-radius: var(--radius-pill); transform-origin:left; background: linear-gradient(90deg, var(--canary-400), var(--wx-heat)); } @media (prefers-reduced-motion:no-preference){ .pct-fill{ animation: fillIn .6s var(--ease-liquid) backwards;} } @keyframes fillIn { from{ transform:scaleX(0);} } .summary-row { display:flex; flex-wrap:wrap; gap:.5rem; margin: var(--space-4) 0; } .summary-chip { display:inline-flex; align-items:center; gap:7px; padding:.4rem .9rem; border-radius: var(--radius-pill); font-size:.85rem; font-weight:600; color: var(--text-1); background: var(--glass-1); border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); } .summary-chip img { width:20px; height:20px; } .summary-chip .num { color: var(--text-1); } .beach-list { list-style:none; padding:0; margin: var(--space-4) 0 0; display:grid; gap: var(--space-3); } @media (min-width:760px){ .beach-list{ grid-template-columns:1fr 1fr; } } .beach-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:.6rem; min-height:56px; padding:.6rem 1rem; text-decoration:none; color: var(--text-1); background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-lg); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); transition: transform var(--dur-base) var(--ease-liquid), background var(--dur-base); } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .beach-row:hover{ transform:translateY(-2px); background: var(--glass-2); text-decoration:none; } } .beach-row.is-sunny { border-left:3px solid var(--canary-400); background: var(--glass-canary); border-color: var(--glass-canary-stroke); } .b-info { display:flex; align-items:center; gap:.6rem; min-width:0; } .b-info img { width:34px; height:34px; flex:none; } .b-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .b-sky { font-size:.78rem; color: var(--text-3); } .b-temps { text-align:right; white-space:nowrap; } .b-temps b { font-family: var(--font-mono); font-size:1.25rem; font-weight:600; color: var(--text-1); } .b-temps i { font-style:normal; font-family: var(--font-mono); font-size:.78rem; color: var(--wx-rain); } .b-temps em { font-style:normal; font-family: var(--font-mono); font-size:.72rem; color: var(--text-3); } .nearby-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top: var(--space-3); } .nearby-chips a .num { color: var(--text-3); margin-left:.2rem; } .radar-map { border-radius: var(--radius-xl); overflow:hidden; border:1px solid var(--glass-stroke); box-shadow: var(--inset-glass), var(--shadow-glass); background: var(--glass-1); } .radar-controls { display:flex; align-items:center; gap: var(--space-3); margin-top:.6rem; padding:.5rem .75rem; } .radar-btn { flex:none; } .radar-ico-play, .radar-ico-pause { width:18px; height:18px; fill: currentColor; } .radar-controls input[type="range"] { flex:1; -webkit-appearance:none; appearance:none; height:6px; border-radius: var(--radius-pill); background: var(--glass-3); outline:none; } .radar-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background: var(--canary-400); border:2px solid rgba(12,20,48,.4); box-shadow:0 2px 8px rgba(4,10,30,.4); cursor:pointer; } .radar-controls input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background: var(--canary-400); border:2px solid rgba(12,20,48,.4); cursor:pointer; } .radar-time { font-family: var(--font-mono); font-weight:600; font-variant-numeric: tabular-nums; min-width:3.4em; color: var(--text-1); } .radar-legend { display:flex; align-items:center; gap: var(--space-3); margin-top:.5rem; flex-wrap:wrap; font-size:12px; color: var(--text-3); } .radar-legend__label { font-weight:600; letter-spacing: var(--tracking-micro); text-transform:uppercase; } .radar-legend__bar { flex:1; min-width:120px; height:8px; border-radius: var(--radius-pill); background: linear-gradient(90deg, rgba(90,200,250,.25), #5AC8FA 40%, #2D8CFF 70%, #A78BFA 100%); } .radar-legend__ends { display:flex; justify-content:space-between; gap:.5rem; font-family: var(--font-mono); } .faq details { margin-bottom:.5rem; overflow:hidden; background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-lg); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); } .faq summary { cursor:pointer; list-style:none; padding:.85rem 1rem; font-weight:600; color: var(--text-1); display:flex; justify-content:space-between; align-items:center; gap:1rem; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:""; width:10px; height:10px; flex:none; border-right:2px solid var(--canary-400); border-bottom:2px solid var(--canary-400); transform:rotate(45deg); transition: transform var(--dur-fast) var(--ease-liquid); } .faq details[open] summary::after { transform:rotate(-135deg); } .faq details p { margin:0; padding:0 1rem .85rem; font-size:.92rem; color: var(--text-2); } .breadcrumb { font-size:.85rem; color: var(--text-3); margin-top:.75rem; } .breadcrumb a { color: var(--text-2); text-decoration:none; } .breadcrumb a:hover { color: var(--text-1); } .page-body { background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-lg); box-shadow: var(--inset-glass), var(--shadow-glass); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(1.4); backdrop-filter: blur(var(--blur-md)) saturate(1.4); padding: var(--space-5) var(--space-6); margin-top: var(--space-5); } .page-body p { max-width:65ch; color: var(--text-2); margin:0 0 1rem; } .page-body h2, .page-body h3 { margin-top: var(--space-5); } .page-body ul { padding-left:1.2rem; color: var(--text-2); } .no-data { background: var(--glass-1); border:1px solid var(--glass-stroke); border-radius: var(--radius-lg); box-shadow: var(--inset-glass); -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); padding: var(--space-6) var(--space-5); text-align:center; color: var(--text-2); margin-top: var(--space-5); } .nf-islands { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top: var(--space-5); } .nf-actions { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top: var(--space-5); } .intro { color: var(--text-2); max-width:65ch; margin: var(--space-3) 0 0; } .section-note { color: var(--text-2); max-width:65ch; } .attribution-page { font-size:.78rem; color: var(--text-3); margin-top: var(--space-6); overflow-wrap:anywhere; } .attribution-page a { color: var(--text-2); } .site-footer { margin-top: var(--space-8); background: var(--glass-1); border-top:1px solid var(--glass-stroke); -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(1.4); backdrop-filter: blur(var(--blur-sm)) saturate(1.4); color: var(--text-3); font-size:14px; } .footer-grid { max-width: var(--content-max); margin:0 auto; padding: var(--space-6) var(--space-4) var(--space-5); display:grid; grid-template-columns:repeat(4,1fr); gap: var(--space-5); } @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:460px){ .footer-grid{ grid-template-columns:1fr; } } .footer-langs-row { max-width: var(--content-max); margin:0 auto; padding: var(--space-4) var(--space-4) var(--space-6); border-top:1px solid var(--glass-stroke); } .footer-brand { display:flex; align-items:center; gap:.45rem; font-family: var(--font-display); font-weight:700; font-size:1.05rem; color: var(--text-1); margin:0 0 .5rem; } .footer-brand .brand-mark { flex:none; } .footer-h { font-family: var(--font-display); font-weight:700; color: var(--text-1); margin:0 0 .5rem; } .site-footer ul { list-style:none; padding:0; margin:0; } .site-footer li { margin:.2rem 0; } .site-footer a { color: var(--text-2); } .site-footer a:hover { color: var(--text-1); } .attribution { font-size:12px; overflow-wrap:anywhere; } .footer-langs-h { margin-top: var(--space-4); } .footer-langs { display:flex; flex-wrap:wrap; gap:.25rem; } .footer-langs a { font-size:.78rem; padding:.18rem .42rem; border-radius: var(--radius-pill); border:1px solid transparent; line-height:1.4; } .footer-langs a:hover, .footer-langs a:focus-visible { border-color: var(--glass-stroke); background: var(--glass-1); color: var(--text-1); } .footer-langs a[aria-current="page"] { background: var(--glass-canary); border-color: var(--glass-canary-stroke); color: var(--canary-200); } html:not(.night) .footer-langs a[aria-current="page"] { color: var(--canary-600); } :focus-visible { outline:2px solid var(--canary-400); outline-offset:2px; border-radius:6px; } .skip-link { position:absolute; left:-999px; top:0; z-index:100; background: var(--night-800); color:#fff; padding:.5rem 1rem; border-radius:0 0 8px 0; } .skip-link:focus { left:0; } @media (max-width:540px){ .header-row { flex-wrap:wrap; } .search-box { order:3; flex-basis:100%; } .search-box input { width:100%; max-width:none; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-card,.today-card,.metric-tile,.forecast-tile,.beach-row,.island-card a,.hero-card, .promo-card,.promo-hero,.no-data,.faq details,.uv-meter,.radar-controls,.site-header,.site-footer, .page-body,.badge,.pill,.island-nav a,.nearby-chips a,.nf-islands a,.summary-chip,.sky-cell, .search-box input,#search-results { background: rgba(255,255,255,.92); } html.night .glass-card, html.night .today-card, html.night .metric-tile, html.night .forecast-tile, html.night .beach-row, html.night .island-card a, html.night .hero-card, html.night .promo-card, html.night .promo-hero, html.night .no-data, html.night .faq details, html.night .uv-meter, html.night .radar-controls, html.night .site-header, html.night .site-footer, html.night .page-body, html.night .badge, html.night .pill, html.night .island-nav a, html.night .nearby-chips a, html.night .nf-islands a, html.night .summary-chip, html.night .sky-cell, html.night .search-box input, html.night #search-results { background: rgba(18,16,38,.95); } } @media (prefers-reduced-transparency: reduce) { .glass-card,.today-card,.metric-tile,.forecast-tile,.beach-row,.island-card a,.hero-card, .promo-card,.promo-hero,.no-data,.faq details,.uv-meter,.radar-controls,.site-header,.site-footer, .page-body,.badge,.pill,.island-nav a,.nearby-chips a,.nf-islands a,.summary-chip,.sky-cell, .search-box input,#search-results { -webkit-backdrop-filter:none; backdrop-filter:none; background: rgba(255,255,255,.94); } html.night .glass-card, html.night .today-card, html.night .metric-tile, html.night .forecast-tile, html.night .beach-row, html.night .island-card a, html.night .hero-card, html.night .promo-card, html.night .promo-hero, html.night .no-data, html.night .faq details, html.night .uv-meter, html.night .radar-controls, html.night .site-header, html.night .site-footer, html.night .page-body, html.night .badge, html.night .pill, html.night .island-nav a, html.night .nearby-chips a, html.night .nf-islands a, html.night .summary-chip, html.night .sky-cell, html.night .search-box input, html.night #search-results { background: rgba(15,21,46,.96); } .atmosphere { display:none; } } @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } } .site-footer { content-visibility:auto; contain-intrinsic-size:auto 480px; } .bento { content-visibility:auto; contain-intrinsic-size:auto 360px; } .nearby-me { content-visibility:auto; contain-intrinsic-size:auto 220px; } .blog-related { content-visibility:auto; contain-intrinsic-size:auto 360px; } @media (max-width:640px){ .blob { filter: blur(46px); } .blob-1 { animation: cfDrift 30s ease-in-out infinite; } .blob-2 { animation: cfDrift 38s ease-in-out infinite reverse; } .blob-3 { animation: cfDrift 34s ease-in-out infinite; } .aurora { animation:none; } body::after { display:none; } } .blog-body table { display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .blog-body thead, .blog-body tbody { display:table; width:100%; } .blog-body th, .blog-body td { white-space:nowrap; } .blog-body th:first-child, .blog-body td:first-child { white-space:normal; min-width:9rem; } @media (max-width:600px){ .lang-switch a { min-height:36px; } .unit-toggle button { min-height:34px; } #search-results a { min-height:44px; } .footer-langs a { min-height:32px; display:inline-flex; align-items:center; } } @media (max-width:640px){ .island-nav a { min-height:40px; } } @media (prefers-reduced-motion:no-preference){ html.cf-reveal [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity var(--dur-slow) var(--ease-liquid), transform var(--dur-slow) var(--ease-liquid); } html.cf-reveal [data-reveal].is-revealed{ opacity:1; transform:none; } } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .glass-card, .today-card, .metric-tile, .forecast-tile, .beach-row, .island-card a, .blog-card { overflow:hidden; } .glass-card::after, .today-card::after, .metric-tile::after, .forecast-tile::after, .beach-row::after, .island-card a::after, .blog-card::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; z-index:0; transition:opacity .4s var(--ease-liquid); background:radial-gradient(340px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.14), transparent 60%); } .glass-card:hover::after, .today-card:hover::after, .metric-tile:hover::after, .forecast-tile:hover::after, .beach-row:hover::after, .island-card a:hover::after, .blog-card:hover::after { opacity:1; } } @property --cf-angle { syntax:'<angle>'; initial-value:210deg; inherits:false; } @media (prefers-reduced-motion:no-preference){ .iridescent::before, .hero-card::before { background: conic-gradient(from var(--cf-angle),#5AC8FA,#A78BFA,#FF6B9D,#FFD60A,#7FE3C3,#5AC8FA); animation: cfSpin 18s linear infinite; will-change:--cf-angle; } @keyframes cfSpin { to { --cf-angle:570deg; } } } @media (max-width:640px){ .iridescent::before, .hero-card::before { animation:none; } } @media (prefers-reduced-motion:no-preference){ .pct-bar { position:relative; } .pct-fill::after { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); transform:translateX(-100%); animation: pctShimmer 2.4s var(--ease-liquid) 0.6s infinite; } @keyframes pctShimmer { to { transform:translateX(100%); } } } @media (hover:hover) and (prefers-reduced-motion:no-preference){ .metric-tile { transition: transform var(--dur-base) var(--ease-liquid); } .metric-tile:hover { transform:translateY(-2px); } } .glass-card:focus-visible, .today-card:focus-visible, .metric-tile:focus-visible, .forecast-tile:focus-visible, .beach-row:focus-visible, .island-card a:focus-visible, .blog-card:focus-visible, .hero-card:focus-visible, .pill:focus-visible, .promo-cta:focus-visible { outline:2px solid var(--canary-400); outline-offset:2px; box-shadow:0 0 0 4px rgba(255,214,10,.35), var(--inset-glass), var(--shadow-glass); } @media (max-width:640px){ .metric-tile, .forecast-tile, .sky-cell, .uv-meter, .beach-row, .island-card a, .summary-chip, .pill, .chip, .island-nav a, .nearby-chips a, .nf-islands a, .badge, .promo-card, .faq details, .page-body, .no-data, .site-footer, .search-box input, .btn-glass, .icon-btn { -webkit-backdrop-filter: none; backdrop-filter: none; } .metric-tile, .forecast-tile, .sky-cell, .beach-row, .island-card a, .summary-chip, .pill, .chip, .island-nav a, .nearby-chips a, .nf-islands a, .badge, .faq details, .no-data, .search-box input, .site-footer { background: var(--frost-1); } .uv-meter, .page-body, .btn-glass, .icon-btn { background: var(--frost-2); } .forecast-tile.is-today, .beach-row.is-sunny, .pill[aria-current="page"], .pill.is-selected, .chip[aria-pressed="true"], .chip.is-selected, .island-nav a[aria-current="page"], .promo-card { background: linear-gradient(0deg, var(--glass-canary), var(--glass-canary)), var(--frost-canary-base); } .search-box input:focus { background: var(--frost-2); } .btn-glass:hover, .icon-btn:hover { background: var(--frost-3); } .pill:hover, .chip:hover, .island-nav a:hover, .nearby-chips a:hover, .nf-islands a:hover, .beach-row:hover, .island-card a:hover { background: var(--frost-2); } }