Begin go documentation (ai slop for now)

go/cmd/kjol-web/css/app.css

@@ -86,11 +86,13 @@
   --color-primary-subtle: #eef2f8; /* a navy wash — tinted panels, badges, callouts */
   --color-primary-border: #c5d1e2;
 
-  /* accent is for TEXT and icons, and it is the RED — which is why it is a separate token
-     from primary rather than a lighter shade of it. The two have opposite constraints: a
-     fill must be dark enough for white text on top of it, and accent text must be readable
-     ON the surface. Here they are not even the same hue: navy fills, red links. */
-  --color-accent: #9e1b32; /* dark red */
+  /* accent is for TEXT and icons — links, the eyebrow, an active sidebar row. It is still a
+     separate token from primary, because the two have opposite constraints: a fill must be
+     dark enough for white text on TOP of it, and accent text must be readable ON the
+     surface. Here they are the same hue — navy — but not the same value: the accent is a
+     touch deeper so a navy link on white is unmistakably a link. (The red is gone; the
+     brand is navy throughout now. Only the flag keeps its red field.) */
+  --color-accent: #1c3a66; /* navy — accent TEXT */
 
   /* Surfaces, lines, ink — the kit's theme contract. */
   --color-surface: #ffffff;
@@ -157,17 +159,14 @@
   --color-ink-muted: #9a9aa3;
   --color-ink-faint: #71717a;
 
-  /* Both brand tokens move in the dark, and for different reasons.
+  /* Both brand tokens move in the dark, and both for the same reason now: navy is too dark
+     to read on a near-black page, so each climbs to a lighter blue.
 
-     The accent has to CLIMB: a dark red on a near-black surface is unreadable, so it goes
-     up to a light rose. It is still the flag's red, just the only version of it you can
-     read here.
-
-     The fill has to climb too — which the sky blue it replaced did not. Navy is dark
-     enough that on a #101013 page a navy button loses its edges and reads as a hole in the
-     surface. So it lifts to a steel blue that still carries white text (~7:1) and still
-     looks like a button. */
-  --color-accent: #f0a3ad;
+     The accent (TEXT) climbs furthest — a link has to be legible at body-text weight, so it
+     goes to a soft sky. The fill climbs less: it only has to look like a button and still
+     carry white text (~7:1), so it lifts to a steel blue and stops there, well below where
+     the accent lands. */
+  --color-accent: #9fc1ec;
   --color-primary: #2b4f80;
   --color-primary-hover: #37619b;
   --color-primary-subtle: #182234;
@@ -186,6 +185,40 @@ html {
   color: var(--color-ink);
 }
 
+/* ---------------------------------------------------------------------------
+   The wordmark's logo tile: a muted Norwegian flag.
+   ---------------------------------------------------------------------------
+   kjøl is a Norwegian word — the mark says so. It is the flag's Scandinavian cross: a
+   navy cross with an off-white outline on a red field, offset LEFT as the real flag is
+   (the vertical bar sits at ~38% rather than centre). Muted, not the flag's full
+   saturation — it is a 32px tile next to body text, not a banner.
+
+   Drawn in layered gradients over a red base rather than as an <img>, so it inherits the
+   tile's rounded corners and border, needs no asset request, and cannot 404. Layers paint
+   TOP-first, so the reading is: dim scrim, then navy cross, off-white cross, red field. Each
+   band is transparent outside its stripe (hard stops via doubled positions) so the layer
+   beneath shows through. The bands are constant across light and dark — a flag does not
+   change with the page theme.
+
+   The topmost layer is a flat dark scrim, and it is there so the WHITE sailboat on top of
+   the tile reads on its own — no outline, no shadow on the glyph. The boat is a thin white
+   stroke and the off-white cross is exactly the band it would vanish into; rather than trace
+   the boat in shadow, the whole flag is dimmed until white stands out against every band of
+   it, the pale cross included. A dimmer, moodier flag with a crisp white boat, on purpose.
+
+   The cross geometry, as percentages of the tile:
+     vertical   (offset left, centre 38%):  off-white 27–49%, navy 32.5–43.5%
+     horizontal (centred,     centre 50%):  off-white 39–61%, navy 44.5–55.5% */
+.flag-no {
+  background-color: #a83f4c; /* the red field, muted (then dimmed by the scrim above) */
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)), /* the dim scrim, on top */
+    linear-gradient(180deg, transparent 44.5%, #294c76 44.5%, #294c76 55.5%, transparent 55.5%),
+    linear-gradient(90deg,  transparent 32.5%, #294c76 32.5%, #294c76 43.5%, transparent 43.5%),
+    linear-gradient(180deg, transparent 39%,   #ece6da 39%,   #ece6da 61%,   transparent 61%),
+    linear-gradient(90deg,  transparent 27%,   #ece6da 27%,   #ece6da 49%,   transparent 49%);
+}
+
 .bg-grid {
   background-image:
     linear-gradient(to right, var(--grid-line) 1px, transparent 1px),