The look of tomtervel.no: wordmark, favicon and a skin over portal's stylesheet

Washed-yellow page, black text, the vel's blue (#1785c2) for the
question banner and buttons, light-yellow link hovers, the title at
the site's slight skew. Wordmark and favicon are the site's own files.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

custom.css

@@ -0,0 +1,85 @@
+/* Tomter Vel — the look of tomtervel.no over portal's stylesheet.
+   Loaded after portal's main.css (site.yaml `stylesheet`), so these
+   rules win. tomtervel.no is Tachyons on a washed-yellow page
+   (#fffceb) with black text, one blue (#1785c2, "vel-blue") for the
+   banner and footer, light-yellow (#fbf1a9) link hovers, and a title
+   banner set at a slight skew. The recolour rides portal's own custom
+   properties; the banner and hover do the rest. */
+
+:root {
+  color-scheme: light;
+
+  --accent: #1785c2;
+  --accent-soft: rgba(23, 133, 194, 0.14);
+
+  --paper: #fffceb;
+  --ink: #111111;
+  --ink-dim: #4f4a3a;
+  --line: #e6dfbf;
+
+  --card-bg: rgba(255, 255, 255, 0.6);
+  --card-bg-opaque: rgba(255, 255, 255, 0.94);
+  --card-shadow: rgba(23, 133, 194, 0.12);
+  --hero-glow: rgba(255, 252, 235, 0.9);
+
+  --error: #ff4136;
+
+  --sans: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
+  --heading: var(--sans);
+}
+
+body {
+  background: var(--paper);
+  color: var(--ink);
+}
+
+h1, h2, h3 {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+/* The page's question sits in a vel-blue banner at the same slight
+   skew as the title on tomtervel.no. */
+.hero-copy h1 {
+  display: inline-block;
+  background: var(--accent);
+  color: var(--paper);
+  padding: 0.35em 0.8em;
+  transform: skewY(1.5deg) rotate(-1.5deg);
+  transform-origin: top right;
+}
+
+/* Links: bold, black, and a light-yellow wash on hover, as on the
+   original's nav. */
+a {
+  font-weight: 700;
+  color: var(--ink);
+  transition: background-color 160ms;
+}
+a:hover {
+  background-color: #fbf1a9;
+}
+.wordmark, .wordmark:hover {
+  background: none;
+  opacity: 1;
+}
+.wordmark img {
+  height: 2.6rem;
+}
+
+/* Card headings in the blue; the alternatives read as the committee
+   cards on tomtervel.no. */
+.alt-card h2 {
+  color: var(--accent);
+}
+
+/* Buttons in the blue with washed-yellow text, no gradients. */
+button, .button, input[type="submit"] {
+  background: var(--accent);
+  color: var(--paper);
+  border: none;
+  font-weight: 700;
+}
+button:hover, .button:hover, input[type="submit"]:hover {
+  background: #14699a;
+}

images/logo.svg

@@ -0,0 +1,7 @@
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 1400" preserveAspectRatio="xMidYMid meet">
+  <g transform="translate(-2220,1545) scale(0.1,-0.1)" stroke="none">
+    <g id="vel" fill="rgb(23, 133, 194)">
+      <path d="M27002 15303 c3 -10 1057 -2599 2343 -5753 1285 -3154 2513 -6167 2728 -6695 215 -528 392 -962 394 -964 2 -2 6 -2 9 2 6 5 2684 6416 2684 6424 0 1 -223 3 -495 3 l-495 0 -18 -37 c-10 -21 -387 -950 -838 -2064 -450 -1115 -821 -2025 -824 -2023 -2 3 -1002 2506 -2221 5562 l-2217 5557 -527 3 c-499 2 -527 1 -523 -15z" />
+    </g>
+  </g>
+</svg>

site.yaml

@@ -1,2 +1,7 @@
 lang: no
 title: Tomter Vel
+wordmark: https://prosjekt.klingenbergbygg.no/tomtervel/questions/raw/branch/main/images/wordmark.png
+wordmark_invert: false
+wordmark_height: 2.4
+stylesheet: custom.css
+favicon: images/logo.svg