From 8a2bf69576a6889850ed13ef9b7adffb5693827d Mon Sep 17 00:00:00 2001
From: ctao <demo@ctao.local>
Date: Fri, 24 Jul 2026 20:20:29 +0200
Subject: [PATCH] restyle: flat Cherenkov-blue design, WCAG (skip link, focus,
 labels), auto dark mode

---
 src/layouts/Base.astro     |  17 +++-
 src/pages/telescopes.astro |  20 ++--
 src/styles/global.css      | 183 +++++++++++++++++++++++++------------
 3 files changed, 147 insertions(+), 73 deletions(-)
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 5b6309d..584f139 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -16,19 +16,26 @@ const links = [
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>{title}</title>
     <meta name="description" content={description} />
+    {/* Sora via Google Fonts for the demo; self-host the woff2 for production. */}
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400..700&display=swap" rel="stylesheet" />
   </head>
   <body>
+    <a class="skip" href="#main">Przejdź do treści</a>
     <header class="site-header">
       <div class="container nav">
         <a class="brand" href="/"><span class="dot"></span> CTAO&nbsp;Portal</a>
         <span class="spacer"></span>
-        {links.map((l) => (
-          <a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
-        ))}
-        <a class="navlink" href="/admin" style="color:var(--brand-2)">✎ Edytor</a>
+        <nav aria-label="Główna nawigacja" style="display: contents">
+          {links.map((l) => (
+            <a class="navlink" href={l.href} aria-current={isActive(l.href) ? 'page' : undefined}>{l.label}</a>
+          ))}
+        </nav>
+        <a class="navlink navlink--edit" href="/admin">✎ Edytor</a>
       </div>
     </header>
-    <main>
+    <main id="main">
       <slot />
     </main>
     <footer class="footer">
diff --git a/src/pages/telescopes.astro b/src/pages/telescopes.astro
index 27a8d43..101b60b 100644
--- a/src/pages/telescopes.astro
+++ b/src/pages/telescopes.astro
@@ -11,32 +11,32 @@ import Base from '../layouts/Base.astro';
   <section class="container page">
     <div class="panel" style="max-width:640px">
       <div class="form-row">
-        <label>Tytuł propozycji</label>
-        <input type="text" placeholder="np. Obserwacja rozbłysków AGN" />
+        <label for="f-title">Tytuł propozycji</label>
+        <input id="f-title" type="text" placeholder="np. Obserwacja rozbłysków AGN" />
       </div>
       <div class="form-row">
-        <label>Teleskop</label>
-        <select>
+        <label for="f-scope">Teleskop</label>
+        <select id="f-scope">
           <option>LST-1 (Large Size Telescope)</option>
           <option>MST (Medium Size Telescope)</option>
           <option>SST (Small Size Telescope)</option>
         </select>
       </div>
       <div class="form-row">
-        <label>Zakres energii</label>
-        <select>
+        <label for="f-energy">Zakres energii</label>
+        <select id="f-energy">
           <option>20 GeV – 3 TeV</option>
           <option>80 GeV – 50 TeV</option>
           <option>1 TeV – 300 TeV</option>
         </select>
       </div>
       <div class="form-row">
-        <label>Wymagany czas (godziny)</label>
-        <input type="number" min="1" placeholder="np. 25" />
+        <label for="f-hours">Wymagany czas (godziny)</label>
+        <input id="f-hours" type="number" min="1" placeholder="np. 25" />
       </div>
       <div class="form-row">
-        <label>Uzasadnienie naukowe</label>
-        <textarea rows="4" placeholder="Krótki opis celu obserwacji..."></textarea>
+        <label for="f-just">Uzasadnienie naukowe</label>
+        <textarea id="f-just" rows="4" placeholder="Krótki opis celu obserwacji..."></textarea>
       </div>
       <button class="btn" type="button">Wyślij zgłoszenie</button>
       <p class="notice">Makieta demonstracyjna — formularz nie zapisuje danych.</p>
diff --git a/src/styles/global.css b/src/styles/global.css
index 0fedc5a..a30c1dc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,15 +1,33 @@
+/* ==========================================================================
+   CTAO Portal — flat design, "Cherenkov blue" accent.
+   All look-and-feel lives in the tokens below: change a color/font/radius
+   here and the whole site follows. Light is canonical; dark mode overrides
+   only the tokens. All pairings meet WCAG AA contrast.
+   ========================================================================== */
 :root {
-  --bg: #0b1020;
-  --surface: #131a2e;
-  --surface-2: #1a2340;
-  --text: #e8ecf6;
-  --muted: #9aa6c4;
-  --brand: #5b8cff;
-  --brand-2: #7ce0d3;
-  --border: #263257;
-  --radius: 14px;
+  --bg: #ffffff;
+  --surface: #f4f6fa;
+  --text: #131c2b;
+  --muted: #46536a;
+  --border: #dfe4ec;
+  --accent: #1d4ed8;        /* Cherenkov blue — links, buttons, active states */
+  --accent-strong: #14369b; /* hover / chip text */
+  --accent-soft: #edf2fe;   /* chip & hint backgrounds */
+  --radius: 10px;
   --maxw: 1080px;
-  --font: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+  --font: "Sora", system-ui, sans-serif;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #101419;
+    --surface: #161c24;
+    --text: #e7ebf2;
+    --muted: #9aa5b8;
+    --border: #2a3340;
+    --accent: #8ab4f8;
+    --accent-strong: #b3ccfa;
+    --accent-soft: #1a2637;
+  }
 }
 
 * { box-sizing: border-box; }
@@ -17,90 +35,139 @@ html { -webkit-text-size-adjust: 100%; }
 body {
   margin: 0;
   font-family: var(--font);
-  background:
-    radial-gradient(1200px 600px at 80% -10%, rgba(91,140,255,0.18), transparent 60%),
-    radial-gradient(900px 500px at 0% 0%, rgba(124,224,211,0.10), transparent 55%),
-    var(--bg);
+  background: var(--bg);
   color: var(--text);
-  line-height: 1.6;
+  line-height: 1.65;
   min-height: 100dvh;
 }
 
-a { color: var(--brand); text-decoration: none; }
-a:hover { text-decoration: underline; }
+a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
+a:hover { color: var(--accent-strong); }
 img { max-width: 100%; height: auto; display: block; }
 
+/* Visible keyboard focus everywhere (WCAG 2.4.7) */
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+/* Skip link — first tab stop, hidden until focused (WCAG 2.4.1) */
+.skip {
+  position: absolute; left: 16px; top: -48px; z-index: 20;
+  background: var(--accent); color: var(--bg); text-decoration: none;
+  padding: 10px 16px; border-radius: 0 0 var(--radius) var(--radius);
+}
+.skip:focus { top: 0; color: var(--bg); }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition: none !important; animation: none !important; }
+}
+
 .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
 
 /* Header / nav */
-.site-header {
-  position: sticky; top: 0; z-index: 10;
-  backdrop-filter: blur(10px);
-  background: rgba(11,16,32,0.72);
-  border-bottom: 1px solid var(--border);
+.site-header { background: var(--bg); border-bottom: 1px solid var(--border); }
+.nav { display: flex; align-items: center; gap: 6px; min-height: 60px; flex-wrap: wrap; }
+.brand {
+  display: flex; align-items: center; gap: 10px;
+  font-weight: 700; letter-spacing: 0.01em; color: var(--text); text-decoration: none;
+}
+/* Flat triangle — the Cherenkov light cone */
+.brand .dot {
+  width: 13px; height: 12px; background: var(--accent);
+  clip-path: polygon(50% 0, 100% 100%, 0 100%);
 }
-.nav { display: flex; align-items: center; gap: 18px; height: 62px; }
-.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.3px; }
-.brand .dot { width: 12px; height: 12px; border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, var(--brand-2), var(--brand)); box-shadow: 0 0 16px var(--brand); }
 .nav .spacer { flex: 1; }
-.nav a.navlink { color: var(--muted); font-weight: 500; font-size: 0.95rem; padding: 6px 2px; }
-.nav a.navlink:hover, .nav a.navlink[aria-current="page"] { color: var(--text); text-decoration: none; }
+.nav a.navlink {
+  color: var(--muted); font-weight: 500; font-size: 0.95rem;
+  padding: 10px 10px; text-decoration: none; border-bottom: 2px solid transparent;
+}
+.nav a.navlink:hover { color: var(--text); }
+.nav a.navlink[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
+.nav a.navlink--edit {
+  color: var(--accent); border: 1px solid var(--border); border-radius: var(--radius);
+  padding: 7px 14px; margin-left: 6px;
+}
+.nav a.navlink--edit:hover { border-color: var(--accent); }
 
 /* Hero */
-.hero { padding: 56px 0 28px; }
-.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin: 0 0 10px; line-height: 1.1; }
-.hero p { color: var(--muted); font-size: 1.1rem; max-width: 60ch; margin: 0; }
-.eyebrow { color: var(--brand-2); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 0.72rem; }
+.hero { padding: 56px 0 24px; }
+.hero h1 {
+  font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 12px;
+  line-height: 1.12; letter-spacing: -0.02em; font-weight: 700;
+}
+/* Flat editorial signature: accent bar under the page title */
+.hero h1::after {
+  content: ""; display: block; width: 56px; height: 4px;
+  background: var(--accent); margin-top: 18px;
+}
+.hero p { color: var(--muted); font-size: 1.06rem; max-width: 60ch; margin: 0; }
+.eyebrow {
+  color: var(--accent); font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.14em; font-size: 0.72rem; margin-bottom: 6px;
+}
 
 /* News grid */
-.grid { display: grid; gap: 20px; grid-template-columns: 1fr; padding: 24px 0 64px; }
+.grid { display: grid; gap: 16px; grid-template-columns: 1fr; padding: 28px 0 64px; }
 @media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
 @media (min-width: 940px) { .grid { grid-template-columns: repeat(3, 1fr); } }
 
 .card {
-  background: linear-gradient(180deg, var(--surface), var(--surface-2));
-  border: 1px solid var(--border); border-radius: var(--radius);
+  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
   padding: 22px; display: flex; flex-direction: column; gap: 10px;
-  transition: transform 0.15s ease, border-color 0.15s ease;
+  transition: border-color 0.15s ease;
 }
-.card:hover { transform: translateY(-3px); border-color: var(--brand); }
-.card .cat { align-self: flex-start; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
-  color: var(--brand-2); background: rgba(124,224,211,0.10); border: 1px solid rgba(124,224,211,0.25);
-  padding: 3px 9px; border-radius: 999px; }
-.card h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.3; }
-.card h3 a { color: var(--text); }
+.card:hover, .card:focus-within { border-color: var(--accent); }
+.card .cat {
+  align-self: flex-start; font-size: 0.72rem; text-transform: uppercase;
+  letter-spacing: 0.08em; font-weight: 600;
+  color: var(--accent-strong); background: var(--accent-soft);
+  padding: 4px 10px; border-radius: 999px;
+}
+.card h3 { margin: 2px 0 0; font-size: 1.12rem; line-height: 1.35; }
+.card h3 a { color: var(--text); text-decoration: none; }
+.card h3 a:hover { color: var(--accent); }
 .card p { margin: 0; color: var(--muted); font-size: 0.94rem; }
 .card .meta { margin-top: auto; color: var(--muted); font-size: 0.8rem; }
 
 /* Article */
-.article { padding: 40px 0 72px; max-width: 760px; }
+.article { padding: 40px 0 72px; max-width: 720px; }
 .article .back { color: var(--muted); font-size: 0.9rem; }
-.article h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); margin: 14px 0 8px; line-height: 1.15; }
+.article h1 {
+  font-size: clamp(1.7rem, 4.5vw, 2.4rem); margin: 14px 0 8px;
+  line-height: 1.15; letter-spacing: -0.02em;
+}
 .article .meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 28px; }
-.prose h2 { margin: 34px 0 10px; font-size: 1.5rem; }
-.prose h3 { margin: 26px 0 8px; font-size: 1.18rem; }
+.prose h2 { margin: 34px 0 10px; font-size: 1.45rem; letter-spacing: -0.01em; }
+.prose h3 { margin: 26px 0 8px; font-size: 1.15rem; }
 .prose p { margin: 0 0 16px; }
 .prose ul { margin: 0 0 16px; padding-left: 22px; }
 .prose li { margin: 6px 0; }
-.prose blockquote { margin: 22px 0; padding: 12px 20px; border-left: 3px solid var(--brand);
-  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text); }
+.prose blockquote {
+  margin: 22px 0; padding: 12px 20px; border-left: 3px solid var(--accent);
+  background: var(--surface); color: var(--text);
+}
 
 /* Generic page / mockup */
 .page { padding: 40px 0 72px; }
-.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
+.panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; }
 .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
-.form-row label { font-size: 0.85rem; color: var(--muted); }
+.form-row label { font-size: 0.88rem; font-weight: 500; }
 .form-row input, .form-row select, .form-row textarea {
-  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
-  padding: 11px 12px; font: inherit; }
-.btn { background: linear-gradient(180deg, var(--brand), #3f6fe0); color: white; border: 0;
-  padding: 11px 18px; border-radius: 10px; font-weight: 600; cursor: pointer; }
-.notice { color: var(--muted); font-size: 0.85rem; margin-top: 8px; }
+  background: var(--bg); border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
+  color: var(--text); padding: 11px 12px; font: inherit;
+}
+.form-row input:focus, .form-row select:focus, .form-row textarea:focus { border-color: var(--accent); }
+.btn {
+  background: var(--accent); color: var(--bg); border: 0;
+  padding: 12px 20px; border-radius: calc(var(--radius) - 4px);
+  font: inherit; font-weight: 600; cursor: pointer;
+}
+.btn:hover { background: var(--accent-strong); }
+.notice { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }
 
 .placeholder { display: grid; place-items: center; min-height: 40vh; text-align: center; color: var(--muted); }
 .placeholder .big { font-size: 3rem; margin-bottom: 8px; }
 
-.footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; padding: 26px 0; }
-.cms-hint { background: rgba(91,140,255,0.10); border: 1px solid rgba(91,140,255,0.3);
-  border-radius: var(--radius); padding: 14px 16px; font-size: 0.9rem; margin: 0 0 24px; }
+.footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; padding: 26px 0; margin-top: 24px; }
+.cms-hint {
+  background: var(--accent-soft); border: 1px solid var(--border);
+  border-radius: var(--radius); padding: 14px 16px; font-size: 0.9rem; margin: 0 0 24px;
+}
