custom.css

@@ -1,8 +1,11 @@
-/* Klingenberg Bygg — brand skin over the default portal stylesheet.
+/* Klingenberg Bygg - the skin over portal's own stylesheet
-   Loaded after portal's main.css (site.yaml `stylesheet`), so these
+   (site.yaml `stylesheet`, loaded after main.css, so these rules win).
-   rules win. The whole recolor rides portal's own CSS custom
+
-   properties, so chrome stays consistent; fonts and a few section
+   One idea: a builder's drawing. Warm paper, near-black ink, the
-   treatments do the rest. */
+   logo's brick red as the only colour, heavy Futura for what is
+   asked and Garamond for what is said. Everything sits on one left
+   edge, from the wordmark down. Both colour schemes are drawn; the
+   page follows the reader's. */
 
 @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
 
@@ -19,109 +22,232 @@
   src: url("/site/fonts/futura-medium.ttf") format("truetype");
 }
 
+/* ---- colour: light, then dark ---------------------------------- */
+
 :root {
-  /* Brick red — the logo tile's own colour. */
+  --brick: #8a1e12;
   --accent: #8a1e12;
   --accent-soft: rgba(138, 30, 18, 0.12);
   --paper: #f6f5f3;
   --ink: #201a18;
-  --ink-dim: #6b615c;
+  --ink-dim: #635953;
-  --line: #ddd6d0;
+  --line: #d8d0c9;
-  --card-bg: rgba(255, 255, 255, 0.55);
+  --card-bg: #ffffff;
-  --card-bg-opaque: rgba(255, 255, 255, 0.9);
+  --card-bg-opaque: #ffffff;
-  --card-shadow: rgba(60, 30, 20, 0.14);
+  --card-shadow: rgba(60, 30, 20, 0.10);
+  --field: #fbfaf8;
   --hero-glow: rgba(246, 245, 243, 0.85);
-  --heading: "FuturaNow", var(--sans);
+  --error: #a8261a;
+  --heading: "FuturaNow", "Futura", "Century Gothic", sans-serif;
   --sans: "EB Garamond", Georgia, "Times New Roman", serif;
+  --radius: 0.5rem;
+  --measure: 46rem;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Brick does not carry as text on a dark ground; terracotta does.
+       The brick itself stays for what is filled: buttons, the rule. */
+    --accent: #e2a08f;
+    --accent-soft: rgba(226, 160, 143, 0.16);
+    --paper: #171412;
+    --ink: #f1ece6;
+    --ink-dim: #b9aea4;
+    --line: #3a322c;
+    --card-bg: #211c19;
+    --card-bg-opaque: #211c19;
+    --card-shadow: rgba(0, 0, 0, 0.45);
+    --field: #171412;
+    --hero-glow: rgba(23, 20, 18, 0.85);
+    --error: #ff8f80;
+    color-scheme: dark;
+  }
+}
+
+/* ---- type ------------------------------------------------------- */
+
+body {
+  font-family: var(--sans);
+  font-size: 1.08rem;
+  line-height: 1.5;
 }
 
-/* Display headings in heavy Futura, tightened. */
 h1, h2, h3 {
   font-family: var(--heading);
-  letter-spacing: -0.01em;
+  font-weight: 800;
+  letter-spacing: -0.012em;
+  line-height: 1.1;
 }
-.hero-copy h1 { font-size: 2.6rem; }
 
-/* Hero stack, left-aligned: wordmark, then the tagline description,
+/* ---- the top: wordmark bar, pictures, question ------------------ */
-   then the big question - the description reordered to sit between
+
-   them. */
+.hero,
-.hero {
+.hero-slides {
-  align-items: flex-start;
+  align-items: stretch;
   text-align: left;
 }
+
+/* The bar and the copy share the page's one left edge. */
+.hero-bar,
+.hero-slides .hero-copy,
+.hero:not(.hero-slides) {
+  width: 100%;
+  max-width: var(--measure);
+  margin-inline: auto;
+  box-sizing: border-box;
+}
+
+.hero-bar {
+  padding: 1rem 1.5rem;
+}
+
+.wordmark {
+  opacity: 1;
+}
+
+/* Who is here sits on the bar's line, at the page's right edge. */
+.session {
+  top: 1.75rem;
+  right: max(1.5rem, calc((100vw - var(--measure)) / 2 + 1.5rem));
+  font-family: var(--heading);
+  font-weight: 500;
+  font-size: 0.85rem;
+}
+
+.slideshow {
+  --swiper-navigation-size: 1.6rem;
+  background: var(--line);
+}
+
+.slide figcaption {
+  font-size: 1rem;
+  font-style: italic;
+  padding: 2.6rem 1.1rem 0.9rem;
+}
+
 .hero-copy {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   text-align: left;
-  gap: 0.55rem;
+  gap: 0.5rem;
 }
-.hero-copy .wordmark { order: 0; margin-bottom: 0.35rem; }
-.hero-copy p { order: 1; margin: 0; }
-.hero-copy h1 { order: 2; margin: 0.1rem 0 0; }
 
-/* Body reads as Garamond serif. */
+/* What we do, then what we ask: the tagline leads the question. */
-body { font-family: var(--sans); font-size: 1.06rem; }
+.hero-copy p {
-
+  order: 1;
-/* The section rhythm of the original: the service cards alternate a
+  margin: 0;
-   dark, a plain, and a brick panel down the page. Text and controls
+  max-width: 34rem;
-   invert on the dark and brick ones. */
+  font-size: 1.15rem;
-.alt-card:nth-of-type(3n+1) {
+  color: var(--ink-dim);
-  --card-bg: #1a1613;
-  --card-bg-opaque: #1a1613;
-  --ink: #f3efe9;
-  --ink-dim: #cfc4b8;
-  --line: #3a322c;
-  /* Light terracotta so links, icons and encouragements read on the
-     near-black panel (brick was invisible there). */
-  --accent: #e2a99b;
-  color: #f3efe9;
 }
-.alt-card:nth-of-type(3n) {
+
-  --card-bg: #8a1e12;
+.hero-copy p strong {
-  --card-bg-opaque: #8a1e12;
+  color: var(--ink);
-  --ink: #fdf3ef;
+  font-weight: 600;
-  --ink-dim: #f4dbd4;
+}
-  --line: #b2493d;
+
-  --accent: #fdf3ef;
+.hero-copy h1 {
+  order: 2;
+  margin: 0.15rem 0 0;
+  font-size: clamp(2rem, 1.2rem + 3.2vw, 3rem);
+}
+
+/* ---- the cards -------------------------------------------------- */
+
+.alternatives {
+  max-width: var(--measure);
+  gap: 1.5rem;
+}
+
+/* A sheet on the drawing board: flat, ruled in brick along its top. */
+.alt-card {
+  background: var(--card-bg);
+  border: 0.06rem solid var(--line);
+  border-top: 0.3rem solid var(--brick);
+  border-radius: var(--radius);
+  box-shadow: 0 0.5rem 1.4rem var(--card-shadow);
+  padding: 1.7rem 1.8rem 1.8rem;
+  backdrop-filter: none;
+}
+
+.alt-card h2 {
+  font-size: 1.45rem;
+  margin: 0 0 0.35rem;
+}
+
+.alt-description {
+  font-size: 1.08rem;
+}
+
+.feature h3,
+.feature-name {
+  font-family: var(--heading);
+  font-weight: 500;
+}
+
+.feature p a,
+.alt-description a,
+.hero-copy p a {
+  border-bottom-color: var(--accent);
+}
+
+.alt-encouragement {
+  color: var(--ink-dim);
+}
+
+/* ---- forms ------------------------------------------------------ */
+
+.field-label {
+  font-family: var(--heading);
+  font-weight: 500;
+  font-size: 0.8em;
+  letter-spacing: 0.01em;
+  color: var(--ink);
+}
+
+input,
+textarea,
+.select-option {
+  background: var(--field);
+  border-color: var(--line);
+  border-radius: 0.35em;
+}
+
+.select-option {
+  border-radius: 999rem;
+}
+
+.select-option.selected {
+  background: var(--brick);
+  border-color: var(--brick);
   color: #fdf3ef;
 }
-/* On the brick panel the primary button flips to ink-on-cream. */
+
-.alt-card:nth-of-type(3n) .alt-submit {
+/* The button is always brick with cream on it, in either scheme. */
-  background: #fdf3ef;
+.alt-submit {
-  color: #8a1e12;
+  font-family: var(--heading);
+  font-weight: 800;
+  letter-spacing: 0.01em;
+  background: var(--brick);
+  color: #fdf3ef;
+  border-radius: 0.35em;
 }
 
-/* Form controls keep their light surface inside the dark and brick
+/* ---- the foot --------------------------------------------------- */
-   panels, so their text must NOT inherit the panel's light ink -
+
-   pin it dark, and darken the placeholder, so nothing is light-on-
+.question-nav,
-   light. The selected pill fills with the panel accent (terracotta /
+.down-the-tree-foot,
-   cream) and carries dark ink, which reads on either panel. */
+.question-responsible {
-.alt-card:nth-of-type(3n+1) .select-option,
+  font-family: var(--heading);
-.alt-card:nth-of-type(3n) .select-option,
+  font-weight: 500;
-.alt-card:nth-of-type(3n+1) input,
-.alt-card:nth-of-type(3n) input,
-.alt-card:nth-of-type(3n+1) textarea,
-.alt-card:nth-of-type(3n) textarea {
-  color: #201a18;
-  background: #f6f5f3;
-  border-color: #cabfb6;
-}
-.alt-card:nth-of-type(3n+1) .select-option.selected,
-.alt-card:nth-of-type(3n) .select-option.selected {
-  color: #201a18;
-  background: var(--accent);
-  border-color: var(--accent);
-}
-.alt-card:nth-of-type(3n+1) ::placeholder,
-.alt-card:nth-of-type(3n) ::placeholder {
-  color: #8a827b;
-  opacity: 1;
 }
 
-/* Wordmark: the mark carries its own red ground, so just seat it. */
+/* Partner logos, when a text carries them as markdown images, sit
-.wordmark img { border-radius: 0.35rem; }
+   quiet and small rather than full width. */
-
+.feature p img {
-/* Partner logos, when dropped into a feature as markdown images, sit
+  max-width: 9rem;
-   quiet and small rather than full-bleed. */
+  width: auto;
-.feature p img { max-width: 9rem; width: auto; border: none; }
+  border: none;
+}

images/wordmark.svg

@@ -1,5 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 805 224" role="img" aria-label="Klingenberg Bygg">
   <title>Klingenberg Bygg</title>
+  <!-- The lettering follows the reader's colour scheme: ink on paper
+       in light, paper on ink in dark. An <img> cannot inherit the
+       page's colours, so the rule lives in the file. -->
+  <style>.ink { fill: #1a1613 } @media (prefers-color-scheme: dark) { .ink { fill: #f3efe9 } }</style>
   <!-- The red KB square mark (same as the favicon), colours fixed
        from the mark plus two graduated ghost chevrons. -->
   <defs><path d="M 0,0 15,20 0,40" id="k"/></defs>
@@ -51,7 +55,7 @@
 </g>
 </g>
 </defs>
-<g fill="#1a1613" fill-opacity="1">
+<g class="ink" fill-opacity="1">
 <use xlink:href="#glyph-0-0" x="10" y="88.719727"/>
 <use xlink:href="#glyph-0-1" x="79" y="88.719727"/>
 <use xlink:href="#glyph-0-2" x="108" y="88.719727"/>
@@ -64,7 +68,7 @@
 <use xlink:href="#glyph-0-7" x="500" y="88.719727"/>
 <use xlink:href="#glyph-0-4" x="541" y="88.719727"/>
 </g>
-<g fill="#1a1613" fill-opacity="1">
+<g class="ink" fill-opacity="1">
 <use xlink:href="#glyph-0-8" x="10" y="193.359375"/>
 <use xlink:href="#glyph-0-9" x="73" y="193.359375"/>
 <use xlink:href="#glyph-0-4" x="129" y="193.359375"/>

site.yaml

@@ -1,6 +1,6 @@
 title: Klingenberg Bygg
-wordmark: https://prosjekt.klingenbergbygg.no/klingenbergbygg/questions/raw/branch/main/images/wordmark.svg
+wordmark: /site/images/wordmark.svg
-wordmark_height: 4.4
+wordmark_height: 2.6
 lang: no
 stylesheet: custom.css
 favicon: images/logo.svg