Merge pull request 'Apply IGMH brand colours, shrink subheadings, show page title as h1' (#35) from fix/content-page-heading into main

Reviewed-on: #35

Elternbeirat.Web/Features/Pages/ContentPage.razor

@@ -8,6 +8,7 @@
 else if (_page is not null)
 {
     <PageTitle>@_page.Title</PageTitle>
+    <h1>@_page.Title</h1>
     <article>@Body</article>
     <PageEmbeds Embed="_page.Embed" />
 }

Elternbeirat.Web/wwwroot/app.css

@@ -1,30 +1,39 @@
 /* Design tokens: one place for colours, spacing, radius, shadow and type. Every
    component pulls from these variables (var(--...)), so the whole site shares one
-   look and a change here ripples everywhere. Warm-friendly palette: the brand blue
+   look and a change here ripples everywhere. Palette follows the school's own
-   plus a warm accent. No external anything -- just CSS custom properties. */
+   colours (IGMH): its blue for the header, links and headings, its green as the
+   accent. No external anything -- just CSS custom properties. */
 :root {
-    /* Brand blue and two derived shades (darker for hover, lighter for tints). */
+    /* Brand blue and two derived shades (darker for hover, lighter for tints). This
-    --color-brand: #1f3a5f;
+       is the IGMH blue (#328fc6) darkened so it stays legible as link/heading text
-    --color-brand-dark: #16293f;
+       on white; the header keeps the brighter original via --color-header below. */
-    --color-brand-tint: #eef2f7;
+    --color-brand: #2b6f9c;
+    --color-brand-dark: #1f5477;
+    --color-brand-tint: #eaf3f9;
 
-    /* The header bar's background. Its own token (not --color-brand) so it stays a
+    /* The header bar's background: the IGMH blue at full strength. Its own token
-       deep blue in dark mode, where --color-brand is lightened for text/links. */
+       (not --color-brand) both because it only ever carries white text (so it needs
-    --color-header: #1f3a5f;
+       no darkening) and because it must stay a deep blue in dark mode, where
+       --color-brand is lightened for text/links. */
+    --color-header: #328fc6;
 
-    /* Warm accent for highlights (active nav, event dates, call-outs). */
+    /* Accent for highlights (active nav, event dates, call-outs): the IGMH green.
-    --color-accent: #e8a13a;
+       The -dark shade is darkened enough to keep small text and the FAQ marker
-    --color-accent-dark: #c9821c;
+       legible on a white card. */
+    --color-accent: #6db863;
+    --color-accent-dark: #4f9247;
 
     /* Headings. Its own token (not --color-brand) so headings and links can differ:
        in dark mode headings become a soft white while links keep the brand blue. */
-    --color-heading: #1f3a5f;
+    --color-heading: #2b6f9c;
 
     /* Text and surfaces. */
     --color-text: #222;
     --color-text-soft: #555;
     --color-bg: #fff;              /* cards / content surface */
-    --color-page: #f4f1ea;         /* soft warm page background behind the content */
+    --color-page: #f4f6f4;         /* near-neutral page background with a faint cool
+                                      tint, so white cards lift off it without the old
+                                      warm beige clashing with the cool blue */
     --color-surface: #fafafa;
     --color-border: #e0e0e0;
 
@@ -58,16 +67,16 @@
    light shadows are invisible on a dark background. The header keeps its deep blue. */
 @media (prefers-color-scheme: dark) {
     :root {
-        --color-brand: #7fb0e6;        /* headings/links need to stay bright enough
+        --color-brand: #7cc0ec;        /* the IGMH blue lightened: headings/links need
-                                          to read on the dark page background, not
+                                          to stay bright enough to read on the dark
-                                          just on the lighter card surface */
+                                          page background, not just on the card */
-        --color-brand-dark: #a3c8f0;   /* hover goes lighter, not darker, on dark */
+        --color-brand-dark: #a3d5f4;   /* hover goes lighter, not darker, on dark */
-        --color-brand-tint: #232a35;
+        --color-brand-tint: #223038;
 
-        --color-header: #1a2a3f;       /* a hair deeper, to sit calmly on dark */
+        --color-header: #266f9c;       /* the IGMH blue eased down, to sit calmly on dark */
 
-        --color-accent: #f0b45c;
+        --color-accent: #86c97d;       /* the IGMH green nudged brighter for dark */
-        --color-accent-dark: #f0b45c;  /* no darkening needed on a dark surface */
+        --color-accent-dark: #86c97d;  /* no darkening needed on a dark surface */
 
         --color-heading: #c9ced6;      /* soft white, kept a step brighter than the
                                           body text so headings still lead the page */
@@ -129,11 +138,17 @@ h1 {
 }
 
 h2 {
-    font-size: 1.3rem;
+    font-size: 1.2rem;
 }
 
 h3 {
-    font-size: 1.15rem;
+    font-size: 1.05rem;
+}
+
+/* h4 gets its own size so it stays a step below h3 instead of falling back to the
+   browser default, which can render as large as (or larger than) a small h3. */
+h4 {
+    font-size: 0.95rem;
 }
 
 /* Comfortable paragraph rhythm and a capped line length for readability. */