Add blue visual theme and refined controls

docs/README.md

@@ -18,6 +18,7 @@ This directory contains the working documentation for the WeatherTool modernizat
 - [Development and staging](DEVELOPMENT_AND_STAGING.md) — Git workflow, local build, Rocky deployment, synthetic data, verification, and rollback.
 - [Product workflows](PRODUCT_WORKFLOWS.md) — the intended purpose and current status of each visible workspace.
 - [Update roadmap](UPDATE_ROADMAP.md) — phased technical, security, dependency, testing, and UI work.
+- [Third-party notices](THIRD_PARTY_NOTICES.md) — licenses and attribution for adapted interface components.
 
 ## Documentation rules
 
@@ -25,4 +26,3 @@ This directory contains the working documentation for the WeatherTool modernizat
 2. Document the behavior that exists separately from behavior that is proposed.
 3. Update these documents in the same commit when a change alters deployment, data flow, or a user workflow.
 4. Keep synthetic/development instructions clearly distinguished from workplace production procedures.
-

docs/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,15 @@
+# Third-party notices
+
+The frontend interaction styling includes adapted ideas from the following MIT-licensed Uiverse components:
+
+- Checkbox by Galahhad: https://uiverse.io/Galahhad/sweet-ape-100
+- Button by e-coders (Aasheesh Agarwal): https://uiverse.io/e-coders/new-shrimp-32
+
+Copyright © 2026 Galahhad (Galahad)  
+Copyright © 2026 e-coders (E - Coders / Aasheesh Agarwal)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

web/src/css/index.css

@@ -3,7 +3,7 @@
 body {
   margin: 0;
   font-family: Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
-  color:var(--text);background:#f3f5f8;
+  color:var(--text);background-color:#edf3fb;background-image:radial-gradient(circle at 8% 4%,rgba(95,157,230,.14),transparent 30%),radial-gradient(circle at 92% 18%,rgba(99,196,218,.12),transparent 28%),linear-gradient(145deg,#f4f8fd 0%,#edf4fc 48%,#eaf1fb 100%);background-attachment:fixed;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -41,6 +41,9 @@ thead {
 }
 
 .primary{background:var(--accent);color:#fff}.primary:hover{background:var(--accent-strong)}
+button,input[type=button]{transition:transform 260ms cubic-bezier(.23,1,.32,1),box-shadow 260ms,background-color 180ms,border-color 180ms;touch-action:manipulation;will-change:transform}button:not(:disabled):hover,input[type=button]:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 8px 16px rgba(26,74,128,.16)}button:not(:disabled):active,input[type=button]:not(:disabled):active{transform:translateY(0);box-shadow:none}
+input[type=checkbox]{--checkbox-size:18px;appearance:none;width:var(--checkbox-size);height:var(--checkbox-size);margin:0 6px 0 0;vertical-align:-3px;border:1px solid #aebed1;border-radius:5px;background:#fff;cursor:pointer;position:relative;transition:all .25s}input[type=checkbox]:hover{border-color:var(--accent)}input[type=checkbox]:checked{border-color:transparent;background:linear-gradient(145deg,#3388d7,#1763aa);box-shadow:0 0 0 3px rgba(36,119,197,.13)}input[type=checkbox]:checked:before{content:"";position:absolute;top:45%;left:50%;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-50%) rotate(45deg) scale(1);animation:check-pop .22s cubic-bezier(.12,.4,.29,1.46)}input[type=checkbox]:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}@keyframes check-pop{from{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(0)}to{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1)}}
+@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
 input[type=text],input[type=date],input[type=datetime-local],select{min-height:38px;padding:7px 10px;border:1px solid #cfd7e2;border-radius:8px;background:#fff}button:disabled,input:disabled{cursor:not-allowed;opacity:.48}.appContent{min-height:calc(100vh - 73px)}
 
 table td {

web/src/css/menu.module.css

@@ -1,3 +1,4 @@
-.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:72px;padding:0 30px;border-bottom:1px solid var(--border);background:rgba(249,250,252,.92);backdrop-filter:blur(16px)}
+.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:72px;padding:0 30px;border-bottom:1px solid rgba(99,145,202,.25);background:linear-gradient(110deg,rgba(247,251,255,.94),rgba(226,238,255,.92),rgba(239,247,255,.94));backdrop-filter:blur(18px)}
+.brandMark{background:linear-gradient(145deg,#398bd8,#15579b)!important;box-shadow:0 7px 16px rgba(26,91,157,.22)}
 .brand{display:flex;align-items:center;gap:11px;color:var(--text);text-decoration:none}.brandMark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;font-family:Rubik,sans-serif;font-size:19px}.brand strong,.brand small{display:block}.brand small{margin-top:2px;color:var(--text-muted);font-size:11px}.menu{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none}.menu li{margin:0;padding:0}.menu a{display:block;padding:10px 12px;border-radius:9px;color:var(--text-muted);font-size:13px;font-weight:700;text-decoration:none}.menu a:hover{background:var(--surface-strong);color:var(--text)}.menu a.active{background:var(--accent-pale);color:var(--accent-strong)}
 @media(max-width:980px){.header{align-items:flex-start;flex-direction:column;padding:14px 18px}.menu{max-width:100%;overflow-x:auto}.menu a{white-space:nowrap}}

web/src/pages/home/Home.tsx

@@ -2,12 +2,12 @@ import { A } from '@solidjs/router'
 import './home.css'
 
 const tools = [
-  ['/station','Monitor','Stations','Inspect recent measurements on a map and open detailed station charts.','◉'],
+  ['/station','Stations','Recent measurements and station charts.','◉'],
-  ['/cities','Analyse & export','City analysis','Compare cities, aggregate values, and prepare temperature maps.','▦'],
+  ['/cities','City analysis','Compare values and prepare temperature maps.','▦'],
-  ['/faktiska','Daily production','Faktiskā','Build the actual-weather map with temperatures, weather symbols, title, and source.','▣'],
+  ['/faktiska','Faktiskā','Temperatures and weather symbols for daily production.','▣'],
-  ['/latvia','Summarise','Latvia overview','Review country-wide minimum, maximum, average, and total values.','⌁'],
+  ['/latvia','Latvia overview','Country-wide weather summaries.','⌁'],
-  ['/database','Browse','Data archive','Find available dates and inspect individual hourly records.','▤'],
+  ['/database','Data archive','Browse dates and stored observations.','▤'],
-  ['/harmonie','Forecast model','HARMONIE','Render forecast fields from locally stored HARMONIE GRIB files.','◫'],
+  ['/harmonie','HARMONIE','Render locally stored forecast fields.','◫'],
-  ['/lvgmc-forecast','Forecast products','LVĢMC forecast','Open prepared LVĢMC city forecasts and broadcast tables.','☁'],
+  ['/lvgmc-forecast','LVĢMC forecast','Prepared city forecasts and broadcast tables.','☁'],
 ]
-export function Home() { return <section class="homePage"><div class="homeHero"><div><p class="eyebrow">Weather data and production tools</p><h1>Choose a workspace</h1><p class="heroCopy">Explore station history, compare cities, inspect forecasts, or prepare weather graphics from one place.</p></div><div class="environmentBadge"><span class="statusDot"/>Development dataset<small>Synthetic station observations are active</small></div></div><div class="toolGrid">{tools.map(([path,eyebrow,title,description,icon]) => <A class="toolCard" href={path}><span class="toolIcon">{icon}</span><span class="eyebrow">{eyebrow}</span><h2>{title}</h2><p>{description}</p><span class="cardAction">Open workspace →</span></A>)}</div></section> }
+export function Home() { return <section class="homePage"><div class="homeHero"><div><p class="eyebrow">Weather data and production tools</p><h1>Choose a workspace</h1><p class="heroCopy">Analysis, forecasts and newsroom graphics.</p></div><div class="environmentBadge"><span class="statusDot"/>Development dataset<small>Synthetic observations</small></div></div><div class="toolGrid">{tools.map(([path,title,description,icon]) => <A class="toolCard" href={path}><span class="toolIcon">{icon}</span><div class="toolCardCopy"><h2>{title}</h2><p>{description}</p></div><span class="cardArrow">→</span></A>)}</div></section> }

web/src/pages/home/home.css

@@ -1 +1 @@
-.homePage{max-width:1440px;margin:auto;padding:56px 32px 80px}.homeHero{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:40px}.homeHero h1{margin:8px 0 14px;font-size:clamp(38px,5vw,68px);line-height:.98;letter-spacing:-.045em}.heroCopy{max-width:720px;margin:0;color:var(--text-muted);font-size:18px;line-height:1.6}.eyebrow{color:var(--accent-strong);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.environmentBadge{min-width:250px;padding:16px 18px;border:1px solid var(--border);border-radius:14px;background:var(--surface);font-weight:700;box-shadow:var(--shadow-sm)}.environmentBadge small{display:block;margin:5px 0 0 18px;color:var(--text-muted);font-weight:400}.statusDot{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(38,147,104,.12)}.toolGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.toolCard{position:relative;min-height:230px;padding:26px;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:.18s}.toolCard:hover{transform:translateY(-3px);border-color:var(--accent-soft);box-shadow:var(--shadow-md)}.toolCard h2{margin:28px 0 10px;font-size:24px}.toolCard p{max-width:90%;margin:0;color:var(--text-muted);line-height:1.55}.toolIcon{position:absolute;top:20px;right:22px;color:var(--accent);font-size:31px}.cardAction{position:absolute;bottom:24px;left:26px;font-weight:700}@media(max-width:960px){.toolGrid{grid-template-columns:repeat(2,1fr)}.homeHero{align-items:start;flex-direction:column}}@media(max-width:640px){.homePage{padding:36px 18px}.toolGrid{grid-template-columns:1fr}}
+.homePage{position:relative;max-width:1440px;margin:auto;padding:52px 32px 80px}.homePage:before{content:"";position:absolute;z-index:-1;top:-90px;right:4%;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(65,132,226,.18),transparent 68%);filter:blur(10px)}.homeHero{display:flex;justify-content:space-between;align-items:end;gap:48px;margin-bottom:32px}.homeHero h1{margin:7px 0 10px;font-size:clamp(38px,5vw,64px);line-height:1;letter-spacing:-.045em}.heroCopy{margin:0;color:var(--text-muted);font-size:16px}.eyebrow{color:var(--accent-strong);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.environmentBadge{min-width:220px;padding:13px 16px;border:1px solid rgba(116,158,211,.35);border-radius:14px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(225,238,255,.82));font-weight:700;box-shadow:var(--shadow-sm);backdrop-filter:blur(12px)}.environmentBadge small{display:block;margin:3px 0 0 18px;color:var(--text-muted);font-weight:400}.statusDot{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(38,147,104,.12)}.toolGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.toolCard{position:relative;display:flex;min-height:180px;padding:24px;overflow:hidden;border:1px solid rgba(115,154,204,.28);border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(231,241,255,.78));color:var(--text);text-decoration:none;box-shadow:0 12px 30px rgba(30,77,132,.08);transition:transform 280ms cubic-bezier(.23,1,.32,1),box-shadow 280ms,border-color 280ms}.toolCard:before{content:"";position:absolute;inset:auto -55px -70px auto;width:155px;height:155px;border-radius:50%;background:radial-gradient(circle,rgba(43,117,211,.16),transparent 70%);transition:transform 350ms}.toolCard:nth-child(3n+2){background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(226,235,255,.82))}.toolCard:nth-child(3n){background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(220,242,250,.8))}.toolCard:hover{transform:translateY(-4px);border-color:rgba(36,119,197,.5);box-shadow:0 18px 38px rgba(30,77,132,.16)}.toolCard:hover:before{transform:scale(1.18)}.toolCard:active{transform:translateY(0);box-shadow:0 8px 18px rgba(30,77,132,.1)}.toolCardCopy{align-self:flex-end;position:relative;z-index:1}.toolCard h2{margin:0 0 7px;font-size:clamp(27px,2.2vw,34px);letter-spacing:-.025em}.toolCard p{max-width:85%;margin:0;color:var(--text-muted);font-size:13px;line-height:1.45}.toolIcon{position:absolute;top:18px;left:22px;display:grid;place-items:center;width:56px;height:56px;border:1px solid rgba(57,126,209,.22);border-radius:17px;background:linear-gradient(145deg,#f8fbff,#dcecff);color:var(--accent);font-size:32px;box-shadow:0 8px 18px rgba(37,103,180,.12)}.cardArrow{position:absolute;right:22px;bottom:20px;color:var(--accent-strong);font-size:22px;font-weight:700;transition:transform 200ms}.toolCard:hover .cardArrow{transform:translateX(4px)}@media(max-width:960px){.toolGrid{grid-template-columns:repeat(2,1fr)}.homeHero{align-items:start;flex-direction:column}}@media(max-width:640px){.homePage{padding:36px 18px}.toolGrid{grid-template-columns:1fr}}