/* ========================================================================== greywx.css - GreyWX 2026 design for the Saratoga Base-USA templates Loaded after the theme stylesheet (weather-screen-dark-narrow.css), so the theme still styles older page content and this file restyles the frame. Version 1.00 - 25-Oct-2026 - initial release for GreyWX.com ========================================================================== */ :root { --hdr: #4A4A4A; /* section header bars (same grey as before) */ --page: #ECEEF0; --panel: #FFFFFF; --cell: #F5F6F7; --line: #E0E3E7; --text: #1E2329; --muted: #5A636D; --live: #4CC764; /* live/updated green, on dark */ --live-ink: #1E7B36; /* green for text on light */ --link: #2457A6; --radius: 10px; } /* ---- page and frame ------------------------------------------------------ */ html { scroll-behavior: smooth; } html body { margin: 0; background: #262626 url("images/indexbackground_dark.jpg") repeat fixed center top; color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: clamp(14.5px, 13.4px + 0.12vw, 16px); line-height: 1.45; font-variant-numeric: tabular-nums; } .site *, .site *::before, .site *::after { box-sizing: border-box; } /* the frame grows with the window: 1100px minimum, 88% of the window, 1920px maximum */ #page.site { width: min(100% - 32px, max(1100px, 88vw), 1920px); margin: 28px auto; padding: 0; border: 0; background: var(--page); color: var(--text); border-radius: 14px; overflow: clip; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45); } .site a { color: var(--link); } .site a:hover { color: #1A4380; } [hidden] { display: none !important; } /* ---- header -------------------------------------------------------------- */ /* ---- header: the sky over the station --------------------------------------- The backdrop image (camera by day, satellite by night) is set inline by header.php; a dark shade sits over it so the text reads on any sky. */ #header.sh { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 236px; padding: 14px 28px 20px; color: #FFFFFF; background-color: #1A1E26; background-size: cover; background-repeat: no-repeat; border: 0; overflow: hidden; } #header.sh .sh-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,24,0.55) 0%, rgba(14,17,24,0.18) 40%, rgba(14,17,24,0.80) 100%); pointer-events: none; } #header.sh > * { position: relative; } .sh-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .site .sh-brand { display: flex; align-items: center; gap: 10px; color: #FFFFFF; text-decoration: none; flex: none; } .site .sh-brand:hover { color: #FFFFFF; } .sh-mark { display: block; font-family: 'Permanent Marker', 'Inter', cursive; font-size: 30px; letter-spacing: 0.02em; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .sh-mark small { font-size: .55em; color: #C9D6E2; } .sh-nav { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(14,17,24,0.45); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site .sh-nav a { color: #E3E7EC; font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 999px; text-decoration: none; white-space: nowrap; } .site .sh-nav a:hover { color: #FFFFFF; background: rgba(255,255,255,0.10); } .site .sh-nav a.on { color: #FFFFFF; font-weight: 600; background: rgba(255,255,255,0.16); } .sh-tools { display: flex; align-items: center; gap: 10px; flex: none; } .sh-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #E3E7EC; background: rgba(14,17,24,0.45); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 6px 12px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; } .sh-live b { color: #FFFFFF; font-weight: 600; } .sh-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; } .sh-now { display: flex; align-items: flex-end; gap: 20px; min-width: 0; } .sh-big { font-size: 92px; font-weight: 200; line-height: 0.85; letter-spacing: -0.05em; text-shadow: 0 2px 10px rgba(0,0,0,0.35); white-space: nowrap; font-variant-numeric: tabular-nums; } .sh-big small { font-size: 36px; font-weight: 300; color: #D5DAE0; letter-spacing: 0; vertical-align: top; margin-left: 4px; } .sh-txt { display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px; min-width: 0; } .sh-cond { font-size: 20px; font-weight: 600; text-shadow: 0 1px 4px rgba(0,0,0,0.4); } .sh-sub { font-size: 13.5px; color: #E3E7EC; } .sh-sub b { color: #FFFFFF; font-weight: 600; } .sh-where { font-size: 12.5px; color: #C3CBD4; } .sh-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .site .sh-tile { display: flex; flex-direction: column; gap: 4px; min-width: 112px; padding: 10px 14px; border-radius: 12px; color: #FFFFFF; text-decoration: none; background: rgba(14,17,24,0.55); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .site .sh-tile:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.3); background: rgba(14,17,24,0.68); } .sh-k { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #B9C3CE; } .sh-v { font-size: 19px; font-weight: 600; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; } .sh-v small { font-size: 12px; font-weight: 500; color: #C3CBD4; } .sh-v em { font-style: normal; } .sh-v em.hi { color: #F6B27A; } .sh-v em.lo { color: #8FC2F0; } .sh-slash { font-style: normal; color: #8E9AA7; font-weight: 400; } .sh-arrow { font-style: normal; font-size: 12px; } .sh-arrow.up { color: #4CC764; } .sh-arrow.dn { color: #F6B27A; } .sh-s { font-size: 11.5px; color: #C3CBD4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sh-lc { text-transform: lowercase; } .sh-lang { color: #D5DAE0; font-size: 13px; } .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(76,199,100,.6); animation: gx-pulse 2s infinite; } @keyframes gx-pulse { 70% { box-shadow: 0 0 0 8px rgba(76,199,100,0); } 100% { box-shadow: 0 0 0 0 rgba(76,199,100,0); } } @media (prefers-reduced-motion: reduce) { .dot { animation: none; } html { scroll-behavior: auto; } } .menu-btn { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(14,17,24,0.45); color: #FFFFFF; font: 600 13px 'Inter', sans-serif; cursor: pointer; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (max-width: 1000px) { .sh-nav { display: none; } .menu-btn { display: inline-flex; } } /* ---- sidebar + content --------------------------------------------------- */ .layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; padding: 20px; align-items: start; } .side { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .gx-content { min-width: 0; } /* on tall screens the sidebar stays in view while the page scrolls */ @media (min-width: 761px) and (min-height: 1080px) { .side { position: sticky; top: 16px; } } .side .box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .side .hd { margin: 0; background: var(--hdr); color: #FFFFFF; font-size: 13px; font-weight: 600; letter-spacing: 0.03em; padding: 9px 14px; } .side .body { padding: 12px 14px; } .nav-list a, .nav-list summary, .nav-list span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 8px 14px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.3; cursor: pointer; } .site .nav-list a { color: var(--text); } .nav-list a:hover, .nav-list summary:hover { background: #F0F2F4; color: var(--text); } .site .nav-list a.active { background: #E8F5EB; color: var(--live-ink); font-weight: 600; } .nav-list summary { list-style: none; } .nav-list summary::-webkit-details-marker { display: none; } .nav-list summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid #8A929B; border-bottom: 2px solid #8A929B; transform: rotate(-45deg); transition: transform .15s; } .nav-list details[open] > summary::after { transform: rotate(45deg); } .nav-list details a { padding-left: 28px; font-size: 13.5px; background: var(--cell); } .links-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; } .links-grid a { display: flex; align-items: center; justify-content: center; height: 72px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; } .links-grid a:hover { border-color: #9AA3AD; } .links-grid img { max-height: 54px; max-width: 100%; width: auto; height: auto; } .wcg { padding: 0 10px 10px; } .wcg iframe { display: block; width: 100%; height: 72px; border: 1px solid var(--line); border-radius: 8px; background: #FFFFFF; } .pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; } .site a.pill { text-decoration: none; } .pill.ok, .site a.pill.ok { background: #E3F4E7; color: var(--live-ink); } .alert-icons { text-align: center; } .alert-icons a { display: block; margin: 4px 0; } /* ---- content of the other pages (older Saratoga markup) ------------------ */ #main-copy { margin: 0; padding: 18px 22px 22px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; line-height: 1.5; text-align: left; overflow-x: auto; width: auto !important; /* some pages set a fixed inline width */ max-width: 100%; } #main-copy h1 { margin: 0 0 14px; padding: 0; border: 0; color: var(--text); font-family: 'Inter', sans-serif; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; } #main-copy h2 { font-family: 'Inter', sans-serif; line-height: 1.25; } #main-copy a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } #main-copy a:hover { color: #1A4380; } #main-copy img { max-width: 100%; height: auto; } #main-copy iframe { max-width: 100%; } #main-copy .table-top, #main-copy .datahead { background: var(--hdr); color: #FFFFFF; } #main-copy .column-dark { background: var(--cell); } /* ---- footer -------------------------------------------------------------- */ #footer.sf { background: var(--hdr); color: #FFFFFF; padding: 16px 20px; font-size: 13px; line-height: 1.45; text-align: left; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; } #footer.sf a, #footer.sf a:visited { color: #FFFFFF; font-weight: 500; } .sf small { flex-basis: 100%; color: #D3D6DA; font-size: 12.5px; } /* ---- phones: the menu folds up under a button and the content comes first */ @media (max-width: 760px) { #page.site { width: 100%; margin: 0; border-radius: 0; } #header.sh { padding: 12px 16px 16px; min-height: 0; gap: 14px; } .sh-mark { font-size: 26px; } .sh-main { flex-direction: column; align-items: stretch; gap: 14px; } .sh-now { gap: 14px; } .sh-big { font-size: 68px; } .sh-big small { font-size: 28px; } .sh-cond { font-size: 17px; } .sh-sub { font-size: 13px; } .sh-where { display: none; } .sh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site .sh-tile { min-width: 0; padding: 9px 10px; } .sh-tile:nth-child(n+4) { display: none; } .layout { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 14px; } .side { display: contents; } .navbox { order: -1; display: none; } .navbox.open { display: block; } .alertsbox, .linksbox { order: 1; } .links-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } #main-copy { padding: 14px; } } /* ---- keyboard focus: one clear ring everywhere, in the panel's colour inside a panel ---- */ .site a:focus-visible, .site button:focus-visible, .site summary:focus-visible, .site [tabindex]:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; } #main-copy.gx-home .card a:focus-visible { outline-color: var(--acc); } .side .nav-list a:focus-visible, .side .nav-list summary:focus-visible { outline-offset: -2px; } /* ---- home page: every rule below is scoped to #main-copy.gx-home --------- */ #main-copy.gx-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-content: start; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; font-size: inherit; line-height: 1.45; } #main-copy.gx-home h2, #main-copy.gx-home h3, #main-copy.gx-home h4 { font-family: 'Inter', sans-serif; letter-spacing: 0; } #main-copy.gx-home .box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } #main-copy.gx-home .hd { margin: 0; background: var(--hdr); color: #FFFFFF; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: 0.03em; padding: 9px 14px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 8px; } #main-copy.gx-home .hd a { color: #E6E9EC; font-weight: 500; font-size: 12px; } #main-copy.gx-home .hd a:hover { color: #FFFFFF; } #main-copy.gx-home .hd-note { font-weight: 400; font-size: 11px; color: #C9CDD2; letter-spacing: 0; white-space: nowrap; } #main-copy.gx-home .body { padding: 12px 14px; } #main-copy.gx-home .up { color: #C2410C; } #main-copy.gx-home .down { color: #1D5FB8; } #main-copy.gx-home .tag { display: inline-block; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 2px 8px; background: #FDE7D2; color: #8A3B0B; } #main-copy.gx-home .tag.cool { background: #DCEBFA; color: #1D4F8F; } #main-copy.gx-home .tag.mild { background: #E3F4E7; color: #17602A; } #main-copy.gx-home .updated { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); } #main-copy.gx-home .updated b { color: var(--live-ink); font-weight: 600; white-space: nowrap; } #main-copy.gx-home .updated { flex-wrap: wrap; row-gap: 2px; } #main-copy.gx-home .dash-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; } #main-copy.gx-home .dash-head h2 { margin: 0; font-size: 18px; color: var(--text); } #main-copy.gx-home .dash-head > a { font-size: 14px; font-weight: 600; } /* alert strip */ #main-copy.gx-home .alertbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; background: #E3F4E7; border: 1px solid #BFE3C8; color: #17602A; border-radius: var(--radius); padding: 10px 14px; font-weight: 600; font-size: 14px; } #main-copy.gx-home .alertbar span { display: flex; align-items: center; gap: 8px; } #main-copy.gx-home a.alertlink { color: #17602A; } #main-copy.gx-home .alertwrap { border-radius: var(--radius); overflow: hidden; } #main-copy.gx-home .alertwrap > div { width: 100% !important; } /* imagery */ #main-copy.gx-home .imgs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 12px; } #main-copy.gx-home .imgs.one { grid-template-columns: minmax(0, 1fr); } #main-copy.gx-home .imgs figure { margin: 0; } #main-copy.gx-home .imgs a { display: block; border-radius: 8px; overflow: hidden; background: #DDE1E5; } #main-copy.gx-home .imgs img { display: block; width: 100%; height: auto; max-width: none; transition: transform .2s; } #main-copy.gx-home .imgs a:hover img { transform: scale(1.02); } #main-copy.gx-home .imgs figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; } #main-copy.gx-home .gallery { column-width: 480px; column-gap: 20px; } /* radar and satellite: two matching cards, at most 440px wide (the sources are 600px). The images fill their cards edge to edge; the satellite loses a sliver of sky at the top so both cards are the same height (its timestamp along the bottom stays). */ #main-copy.gx-home .a-radar { display: flex; flex-direction: column; gap: 14px; } #main-copy.gx-home .rs { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; gap: 16px; } #main-copy.gx-home .rs-card { margin: 0; display: flex; flex-direction: column; } #main-copy.gx-home .rs-img { position: relative; display: block; aspect-ratio: 12 / 11; overflow: hidden; background: #E9ECEF; } #main-copy.gx-home .rs-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; } #main-copy.gx-home .rs-sat .rs-img img { object-position: center bottom; } #main-copy.gx-home .rs-zoom { position: absolute; right: 10px; top: 10px; padding: 3px 10px; border-radius: 999px; background: rgba(30, 35, 41, 0.78); color: #FFFFFF; font-size: 11.5px; font-weight: 600; opacity: 0; transition: opacity .15s; } #main-copy.gx-home .rs-img:hover .rs-zoom, #main-copy.gx-home .rs-img:focus-visible .rs-zoom { opacity: 1; } #main-copy.gx-home .rs-foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } #main-copy.gx-home .rs-foot a { font-weight: 600; } #main-copy.gx-home .gallery > .box { break-inside: avoid; margin: 0 0 20px; } /* NWS forecast */ #main-copy.gx-home .a-fc { container: fc / inline-size; display: flex; flex-direction: column; gap: 14px; } #main-copy.gx-home .fc-wrap { display: flex; flex-direction: column; gap: 14px; } /* forecast cards and the 5-day strip share a row only when there is room */ @container fc (min-width: 1100px) { #main-copy.gx-home .fc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } } #main-copy.gx-home .fc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } #main-copy.gx-home .fc .box .body { display: flex; gap: 14px; align-items: flex-start; } #main-copy.gx-home .fc img { width: 72px; height: 72px; border-radius: 8px; flex: none; } #main-copy.gx-home .fc .body h3 { margin: 0 0 2px; font-size: 16px; color: var(--text); letter-spacing: 0; } #main-copy.gx-home .fc p { margin: 4px 0 0; font-size: 14px; color: var(--muted); } #main-copy.gx-home .days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 12px; } #main-copy.gx-home .day { background: var(--cell); border-radius: 8px; padding: 10px; text-align: center; font-size: 13px; } #main-copy.gx-home .day img { width: 44px; height: 44px; border-radius: 6px; display: block; margin: 6px auto; } #main-copy.gx-home .day b { display: block; font-size: 14px; } #main-copy.gx-home .fc-none { padding: 14px; color: var(--muted); } /* current conditions Every panel ("card") has three parts: title bar, headline area, detail rows. The cards in a row share one grid (subgrid), so the headline areas and the detail rows start at the same height across the row, whatever each panel holds. */ #main-copy.gx-home .a-now { container: now / inline-size; } #main-copy.gx-home .nerd { display: flex; flex-direction: column; gap: 14px; } #main-copy.gx-home .nwrap { display: flex; flex-direction: column; } #main-copy.gx-home .ngrid { display: grid; column-gap: 14px; row-gap: 0; } #main-copy.gx-home .ngrid.r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #main-copy.gx-home .ngrid.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @container now (max-width: 900px) { #main-copy.gx-home .ngrid.r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container now (max-width: 600px) { #main-copy.gx-home .ngrid.r3 { grid-template-columns: minmax(0, 1fr); } } @container now (max-width: 480px) { #main-copy.gx-home .ngrid.r4 { grid-template-columns: minmax(0, 1fr); } } #main-copy.gx-home .ngrid > .card { display: grid; grid-template-rows: auto auto 1fr; grid-row: span 3; grid-template-columns: minmax(0, 1fr); margin: 0 0 14px; } /* (no container-type on the cards: size containment would switch the subgrid off) */ @supports (grid-template-rows: subgrid) { #main-copy.gx-home .ngrid > .card { grid-template-rows: subgrid; row-gap: 0; } } #main-copy.gx-home .card > .hd a { color: #FFFFFF; font-size: 13px; font-weight: 600; text-decoration: none; } #main-copy.gx-home .card > .top { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 12px 14px; } #main-copy.gx-home .card .fc-hero .big { font-size: 24px; white-space: nowrap; } #main-copy.gx-home .card .fc-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #main-copy.gx-home .card > .kvs { display: block; margin: 0 14px; padding: 0 0 6px; border-top: 1px solid var(--line); } #main-copy.gx-home .card .kv { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dotted #D9DDE2; font-size: 13px; line-height: 1.35; } #main-copy.gx-home .card .kv:last-child { border-bottom: 0; } #main-copy.gx-home .card .kv span { flex: none; color: var(--muted); } #main-copy.gx-home .card .kv b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; font-weight: 600; } #main-copy.gx-home .card .kv b small { display: inline; margin-left: 6px; font-size: 11.5px; font-weight: 400; color: var(--muted); white-space: nowrap; } #main-copy.gx-home .card .kv b .ajax { color: inherit; } #main-copy.gx-home .hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #main-copy.gx-home .hero.left { justify-content: flex-start; gap: 14px; } #main-copy.gx-home .hero-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; } #main-copy.gx-home .compass, #main-copy.gx-home .moon, #main-copy.gx-home .sunarc, #main-copy.gx-home .fc-icon { flex: none; display: block; } #main-copy.gx-home .fc-icon { width: 64px; height: 64px; border-radius: 8px; } #main-copy.gx-home .big { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } #main-copy.gx-home .big.mid { font-size: 19px; letter-spacing: 0; line-height: 1.25; } #main-copy.gx-home .u { font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; } #main-copy.gx-home .trend { font-size: 12.5px; color: var(--muted); } #main-copy.gx-home .trend.up { color: #B4410F; } #main-copy.gx-home .trend.down { color: #5546B8; } #main-copy.gx-home .trend.note { padding-top: 8px; border-top: 1px dotted #D9DDE2; } #main-copy.gx-home .trend.note b { color: var(--text); font-weight: 600; } #main-copy.gx-home #ajaxwinddir:empty + .sep { display: none; } #main-copy.gx-home .spark-wide { position: relative; height: 36px; } #main-copy.gx-home .card > .top > .spark-wide.grow { flex: 1 1 auto; min-height: 36px; max-height: 90px; } #main-copy.gx-home .spark-wide svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } #main-copy.gx-home .legend { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 11.5px; color: var(--muted); } #main-copy.gx-home .legend i { display: inline-block; width: 12px; height: 3px; margin-right: 5px; border-radius: 2px; vertical-align: middle; } #main-copy.gx-home .sw-speed { background: #2457A6; } #main-copy.gx-home .sw-gust { background: #9AA4AF; } #main-copy.gx-home .range .bar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #6FA8E8, #F2B04C, #E8742F); } #main-copy.gx-home .range .mark { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--text); box-shadow: 0 0 0 2px #FFFFFF; } #main-copy.gx-home .range .ends { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); margin-top: 7px; } #main-copy.gx-home .range .ends b { color: var(--text); font-weight: 600; margin-left: 4px; } #main-copy.gx-home .range .ends small { display: block; font-size: 11px; } #main-copy.gx-home .range .ends span:last-child { text-align: right; } /* label / value rows used by the records band */ #main-copy.gx-home .kvs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; border-top: 1px solid var(--line); } #main-copy.gx-home .kvs.tight { grid-template-columns: minmax(0, 1fr); } #main-copy.gx-home .kvs.tight .kv { padding: 6px 0; gap: 10px; } #main-copy.gx-home .kvs.tight .kv b small { display: inline; margin-left: 6px; font-size: 11px; white-space: nowrap; } #main-copy.gx-home .kv { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 5px 0; border-bottom: 1px dotted #D9DDE2; font-size: 12.5px; } #main-copy.gx-home .kv span { flex: none; color: var(--muted); white-space: nowrap; } #main-copy.gx-home .kv b { font-weight: 600; text-align: right; white-space: nowrap; } #main-copy.gx-home .kv b small { display: block; font-weight: 400; font-size: 10.5px; color: var(--muted); white-space: normal; } /* rain panel */ #main-copy.gx-home .rlabel { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } #main-copy.gx-home .rtoday { font-size: 34px; } #main-copy.gx-home .rtoday.wet { color: #1D4F8F; } #main-copy.gx-home .drybadge { display: flex; align-items: center; gap: 6px; background: #FDF1E3; color: #8A4B0B; border-radius: 10px; padding: 6px 10px; } #main-copy.gx-home .drybadge b { font-size: 22px; line-height: 1; } #main-copy.gx-home .drybadge span { font-size: 11px; line-height: 1.15; } #main-copy.gx-home .drybadge.wetbadge { background: #E3EEFA; color: #1D4F8F; } #main-copy.gx-home .chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; } #main-copy.gx-home .chip { background: #EEF4FB; border-radius: 8px; padding: 6px 4px; text-align: center; min-width: 0; } #main-copy.gx-home .chip span { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #main-copy.gx-home .chip b { display: block; font-size: 14px; color: #1D4F8F; } #main-copy.gx-home .chip b i { font-style: normal; font-size: 10px; font-weight: 500; } #main-copy.gx-home .chip small { display: block; font-size: 10px; color: var(--muted); white-space: nowrap; } #main-copy.gx-home .chip.zero { background: var(--cell); } #main-copy.gx-home .chip.zero b { color: #6B7580; } #main-copy.gx-home .card > .rlist { display: flex; flex-direction: column; gap: 10px; padding: 10px 0 12px; } #main-copy.gx-home .rrow + .rrow { border-top: 1px dotted #D9DDE2; padding-top: 10px; } #main-copy.gx-home .rrow-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); } #main-copy.gx-home .rrow-top b { font-size: 17px; color: var(--text); } #main-copy.gx-home .rsub { font-size: 12px; color: var(--muted); margin-top: 6px; } #main-copy.gx-home .meter2 { height: 8px; border-radius: 999px; background: #E6E9EC; overflow: hidden; margin-top: 7px; } #main-copy.gx-home .meter2 i { display: block; height: 100%; background: #2F6FB5; border-radius: 999px; } #main-copy.gx-home .rangebar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #E9D9B8, #CFE0F2 50%, #2F6FB5); margin-top: 8px; } #main-copy.gx-home .rangebar .avg { position: absolute; top: -4px; width: 2px; height: 16px; background: #1E2329; } #main-copy.gx-home .rangebar .now { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; border: 3px solid #1D4F8F; } /* air quality */ #main-copy.gx-home .aqiscale { position: relative; display: flex; gap: 2px; height: 8px; margin: 2px 0 4px; } #main-copy.gx-home .aqiscale i { flex: 1; border-radius: 2px; } #main-copy.gx-home .aqiscale span { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--text); border-radius: 2px; box-shadow: 0 0 0 2px #FFFFFF; } /* panel finish: each panel has its own accent - a line under the title bar, a soft tinted headline band, and charts that run to the panel edges at the foot of the band */ #main-copy.gx-home .card { --acc: #5A636D; --ink: #5A636D; --tint: #F6F7F9; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 4px 14px rgba(16, 24, 40, 0.05); } #main-copy.gx-home .acc-temp { --ink: #B4410F; --acc: #E8742F; --tint: #FFF6EF; } #main-copy.gx-home .acc-wind { --ink: #2457A6; --acc: #2457A6; --tint: #F1F5FB; } #main-copy.gx-home .acc-rain { --ink: #1D5FA6; --acc: #2F7FC1; --tint: #EFF6FC; } #main-copy.gx-home .acc-outlook { --ink: #1A7266; --acc: #2A9D8F; --tint: #EEF8F6; } #main-copy.gx-home .acc-baro { --ink: #5B4BB8; --acc: #6D5BD0; --tint: #F4F2FD; } #main-copy.gx-home .acc-sun { --ink: #8A5A00; --acc: #E0A12E; --tint: #FFF9EC; } #main-copy.gx-home .acc-moon { --ink: #5B6675; --acc: #5B6675; --tint: #F3F4F7; } #main-copy.gx-home .acc-uv { --ink: #7A3AA6; --acc: #9B4DCA; --tint: #F8F2FC; } #main-copy.gx-home .acc-solar { --ink: #8A5A00; --acc: #E8A317; --tint: #FFF9E8; } #main-copy.gx-home .acc-aq { --ink: #1E7B36; --acc: #2E9D5B; --tint: #EFF8F2; } /* title bar: the panel's whole colour scale runs along the bottom edge, with a marker at the current reading */ #main-copy.gx-home .card > .hd { position: relative; padding-bottom: 12px; background: linear-gradient(var(--hdr), var(--hdr)) top / 100% calc(100% - 4px) no-repeat, var(--scale, var(--acc)); } #main-copy.gx-home .card > .hd::after { content: ""; position: absolute; left: var(--pos, 50%); bottom: 0; width: 10px; height: 4px; margin-left: -5px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(30, 35, 41, 0.35); border-radius: 1px; } #main-copy.gx-home .card > .top { background: linear-gradient(180deg, var(--tint) 0%, var(--tint2) 100%); border-bottom: 1px solid var(--line); gap: 10px; padding: 16px 16px 14px; } #main-copy.gx-home .card > .kvs { border-top: 0; margin: 0 16px; padding: 4px 0 8px; } #main-copy.gx-home .card .kv { border-bottom: 1px solid #EDEFF2; padding: 8px 0; } #main-copy.gx-home .card .kv b { font-variant-numeric: tabular-nums; } #main-copy.gx-home .card .big { font-size: 36px; font-variant-numeric: tabular-nums; } #main-copy.gx-home .card .big.mid { font-size: 21px; } #main-copy.gx-home .card .fc-hero .big { font-size: 26px; color: #B4410F; } #main-copy.gx-home .card .u { font-size: 15px; } #main-copy.gx-home .card .rlabel { color: var(--ink); } #main-copy.gx-home .card > .top > .spark-wide.bleed { margin: 0 -16px -14px; min-height: 52px; max-height: 110px; } #main-copy.gx-home .card .spark-wide polygon { opacity: 0.2; } #main-copy.gx-home .card .fc-icon { width: 68px; height: 68px; border-radius: 12px; box-shadow: 0 2px 6px rgba(16, 24, 40, 0.18); } #main-copy.gx-home .card .compass { filter: drop-shadow(0 2px 4px rgba(16, 24, 40, 0.12)); } #main-copy.gx-home .card .tag, #main-copy.gx-home .card .drybadge { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px var(--tint2); } #main-copy.gx-home .card .tag { border-radius: 999px; padding: 3px 10px; } #main-copy.gx-home .card .trend .lvl { color: var(--ink); } #main-copy.gx-home .card .spark-wide polygon, #main-copy.gx-home .card .spark-wide polyline { transition: fill 0.8s ease, stroke 0.8s ease; } /* the colours glide to new values as readings change */ @property --acc { syntax: ""; inherits: true; initial-value: #5A636D; } @property --ink { syntax: ""; inherits: true; initial-value: #5A636D; } @property --tint { syntax: ""; inherits: true; initial-value: #F6F7F9; } @property --tint2 { syntax: ""; inherits: true; initial-value: #E6E9EC; } @property --pos { syntax: ""; inherits: true; initial-value: 50%; } #main-copy.gx-home .card { --tint2: #E6E9EC; transition: --acc 0.8s ease, --ink 0.8s ease, --tint 0.8s ease, --tint2 0.8s ease, --pos 0.8s ease; } @media (prefers-reduced-motion: reduce) { #main-copy.gx-home .card, #main-copy.gx-home .card .spark-wide polygon, #main-copy.gx-home .card .spark-wide polyline { transition: none; } } #main-copy.gx-home .card .chip { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--tint2); padding: 7px 4px; } #main-copy.gx-home .card .chip b { color: var(--ink); } #main-copy.gx-home .card .chip.zero { background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--line); } #main-copy.gx-home .card .trend.note { border-top-color: rgba(30, 35, 41, 0.12); } #main-copy.gx-home .card .fc-text { color: #3F4852; } #main-copy.gx-home .card .range .mark { box-shadow: 0 0 0 2px var(--tint); } #main-copy.gx-home .card .aqiscale i { border-radius: 3px; } #main-copy.gx-home .card .aqiscale span { box-shadow: 0 0 0 2px var(--tint); } #main-copy.gx-home .scale-ends { display: flex; gap: 2px; margin-top: -4px; font-size: 10.5px; color: var(--muted); text-align: left; } #main-copy.gx-home .card .trend { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #main-copy.gx-home .spark-note { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); text-align: center; } #main-copy.gx-home .card .chips { grid-auto-columns: minmax(min-content, 1fr); } #main-copy.gx-home .card .chip { padding: 7px 6px; } #main-copy.gx-home .card > .rlist { padding: 4px 0 14px; } #main-copy.gx-home .card .rrow:first-child { padding-top: 8px; } #main-copy.gx-home .card .rrow + .rrow { border-top: 1px solid #EDEFF2; } /* headline grid: every panel's headline has the same skeleton on the same 16px edge - eyebrow label, big value, one sub line on the left, an optional visual top-right, then a foot pinned to the bottom - so labels, values and sub lines sit on shared lines across each row of panels */ #main-copy.gx-home .card > .hd { padding: 9px 16px 11px; } #main-copy.gx-home .card > .top { justify-content: flex-start; gap: 12px; padding: 16px; text-align: left; } #main-copy.gx-home .card > .kvs { margin: 0 16px; } #main-copy.gx-home .card .hero { position: relative; display: block; } #main-copy.gx-home .card .hero-txt { min-width: 0; } /* the visual sits in the top-right corner beside the label and value, so the sub line can use the full width */ #main-copy.gx-home .card .hero-vis { position: absolute; top: 0; right: 0; display: flex; } #main-copy.gx-home .card .hero:has(.hero-vis) .rlabel { padding-right: 76px; } #main-copy.gx-home .card .rlabel { height: 16px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #main-copy.gx-home .card .big { height: 40px; margin-top: 4px; font-size: 34px; line-height: 40px; white-space: nowrap; } #main-copy.gx-home .card .big .u { line-height: 1; } #main-copy.gx-home .card .big.wet { color: #1D4F8F; } #main-copy.gx-home .card .big.up { color: #B4410F; } #main-copy.gx-home .card .big.down { color: #1D5FB8; } #main-copy.gx-home .card .hero-txt .trend { margin-top: 2px; line-height: 18px; } #main-copy.gx-home .card .trend .lvl { font-weight: 600; } #main-copy.gx-home .card .hero-vis .tag { margin-top: 1px; } #main-copy.gx-home .card .fc-icon { width: 60px; height: 60px; } #main-copy.gx-home .card .foot { margin-top: auto; } #main-copy.gx-home .card > .top > .spark-wide.bleed { margin: auto -16px -16px; } #main-copy.gx-home .card .fc-text { margin: 0; } #main-copy.gx-home .card .aqiscale { margin: 0; } #main-copy.gx-home .card .foot .scale-ends { margin-top: 7px; } #main-copy.gx-home .scale-ends.spread { justify-content: space-between; } #main-copy.gx-home .scale-ends.pos { position: relative; height: 14px; } #main-copy.gx-home .scale-ends.pos span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } #main-copy.gx-home .scale-ends.pos span:first-child { transform: none; } #main-copy.gx-home .scale-ends.pos span:last-child { transform: translateX(-100%); } #main-copy.gx-home .card .sunarc { display: block; width: 100%; height: auto; margin-bottom: 2px; } #main-copy.gx-home .card .cycle { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #3A3F45, #F2E8C9 50%, #3A3F45); } #main-copy.gx-home .card .cycle span { position: absolute; top: -3px; width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: #FFFFFF; border: 3px solid var(--acc); } /* records watch */ #main-copy.gx-home .recgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px 24px; padding: 12px 14px 14px; } #main-copy.gx-home .recgrid h4 { margin: 4px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } #main-copy.gx-home .rec { list-style: none; margin: 0 0 10px; padding: 0; } #main-copy.gx-home .rec li { display: flex; gap: 10px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dotted #D9DDE2; font-size: 13px; font-weight: 600; } #main-copy.gx-home .rec small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); } #main-copy.gx-home .rec .none { font-weight: 400; color: var(--muted); } #main-copy.gx-home .rank { flex: none; min-width: 34px; text-align: center; border-radius: 6px; padding: 2px 0; background: #E9ECEF; color: #39414A; font-size: 12px; } #main-copy.gx-home .rank.one { background: #FDE7D2; color: #8A3B0B; } #main-copy.gx-home .bars { display: block; width: 100%; max-width: 340px; height: auto; margin-bottom: 8px; } #main-copy.gx-home .foot { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); } /* narrower windows */ @media (max-width: 1020px) { #main-copy.gx-home .days { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { #main-copy.gx-home .fc, #main-copy.gx-home .imgs { grid-template-columns: minmax(0, 1fr); } #main-copy.gx-home .rs { grid-template-columns: minmax(0, 440px); } #main-copy.gx-home .days { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main-copy.gx-home .gallery { column-width: auto; column-count: 1; } } /* ---- printing (last, so these win over the screen and container rules above) ------------------------------------------------------------ */ @media print { html body { background: #FFFFFF; margin: 0; } #page.site { width: 100%; margin: 0; box-shadow: none; border-radius: 0; border: 0; } .layout, .gx-content, #main-copy { display: block; padding: 0; background: #FFFFFF; } /* header on white, no menu button, no sidebar */ #header.sh { border: 0; border-bottom: 2px solid #333333; background: #FFFFFF !important; background-image: none !important; color: #111111; min-height: 0; padding: 10px 0 12px; } #header.sh a, #header.sh .sh-brand, #header.sh .sh-sub, #header.sh .sh-sub b, #header.sh .sh-where, #header.sh .sh-cond, #header.sh .sh-big small { color: #111111 !important; text-shadow: none; } #header.sh .sh-shade, #header.sh .sh-nav, #header.sh .sh-tools, #header.sh .sh-tiles { display: none !important; } #header.sh .sh-big { font-size: 48px; text-shadow: none; } .menu-btn, .side, .gallery, iframe, .rs-zoom, .alertlink, .dash-head a, .rs-foot a, .dot { display: none !important; } /* no link addresses after the text (the theme print sheet adds them) */ .site a[href]::after, #main-copy a[href]::after { content: none !important; } .site a { color: inherit !important; text-decoration: none !important; } /* keep the tints, charts and scales */ #main-copy.gx-home * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } #main-copy.gx-home .box, #main-copy.gx-home .card, #main-copy.gx-home figure, #main-copy.gx-home .recgrid > div { break-inside: avoid; } #main-copy.gx-home .hd { background: #FFFFFF !important; color: #111111 !important; border-bottom: 2px solid #333333; box-shadow: none !important; } #main-copy.gx-home .card > .hd::after { display: none; } #main-copy.gx-home .hd a, #main-copy.gx-home .hd-note { color: #444444 !important; } #main-copy.gx-home .box, #main-copy.gx-home .card { border: 1px solid #BBBBBB; box-shadow: none; } #main-copy.gx-home .rs { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main-copy.gx-home .ngrid.r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main-copy.gx-home .ngrid.r3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #main-copy.gx-home .fc { grid-template-columns: repeat(2, minmax(0, 1fr)); } #main-copy.gx-home .days { grid-template-columns: repeat(5, minmax(0, 1fr)); } #main-copy.gx-home .dash-head, #main-copy.gx-home h2 { break-after: avoid; } #main-copy.gx-home .fc-wrap, #main-copy.gx-home .ngrid.r3 { break-inside: avoid; } }