From cf5759d6273c6b6a2674ca972d63390d20aec123 Mon Sep 17 00:00:00 2001 From: Bendik Aagaard Lynghaug Date: Wed, 30 Sep 2026 17:44:23 +0200 Subject: [PATCH] =?UTF-8?q?Ny=20drakt:=20=C3=A9n=20venstrekant,=20tegl=20s?= =?UTF-8?q?om=20eneste=20farge,=20lys=20og=20m=C3=B8rk;=20ordmerket=20f?= =?UTF-8?q?=C3=B8lger=20fargeskjemaet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 5.5 Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt --- custom.css | 290 +++++++++++++++++++++++++++++++------------- images/wordmark.svg | 8 +- site.yaml | 4 +- 3 files changed, 216 insertions(+), 86 deletions(-) diff --git a/custom.css b/custom.css index de36052..8535256 100644 --- a/custom.css +++ b/custom.css @@ -1,8 +1,11 @@ -/* Klingenberg Bygg — brand skin over the default portal stylesheet. - Loaded after portal's main.css (site.yaml `stylesheet`), so these - rules win. The whole recolor rides portal's own CSS custom - properties, so chrome stays consistent; fonts and a few section - treatments do the rest. */ +/* Klingenberg Bygg - the skin over portal's own stylesheet + (site.yaml `stylesheet`, loaded after main.css, so these rules win). + + One idea: a builder's drawing. Warm paper, near-black ink, the + 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; - --line: #ddd6d0; - --card-bg: rgba(255, 255, 255, 0.55); - --card-bg-opaque: rgba(255, 255, 255, 0.9); - --card-shadow: rgba(60, 30, 20, 0.14); + --ink-dim: #635953; + --line: #d8d0c9; + --card-bg: #ffffff; + --card-bg-opaque: #ffffff; + --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, - then the big question - the description reordered to sit between - them. */ -.hero { - align-items: flex-start; +/* ---- the top: wordmark bar, pictures, question ------------------ */ + +.hero, +.hero-slides { + 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. */ -body { font-family: var(--sans); font-size: 1.06rem; } - -/* The section rhythm of the original: the service cards alternate a - dark, a plain, and a brick panel down the page. Text and controls - invert on the dark and brick ones. */ -.alt-card:nth-of-type(3n+1) { - --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; +/* What we do, then what we ask: the tagline leads the question. */ +.hero-copy p { + order: 1; + margin: 0; + max-width: 34rem; + font-size: 1.15rem; + color: var(--ink-dim); } -.alt-card:nth-of-type(3n) { - --card-bg: #8a1e12; - --card-bg-opaque: #8a1e12; - --ink: #fdf3ef; - --ink-dim: #f4dbd4; - --line: #b2493d; - --accent: #fdf3ef; + +.hero-copy p strong { + color: var(--ink); + font-weight: 600; +} + +.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 { - background: #fdf3ef; - color: #8a1e12; + +/* The button is always brick with cream on it, in either scheme. */ +.alt-submit { + 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 - panels, so their text must NOT inherit the panel's light ink - - pin it dark, and darken the placeholder, so nothing is light-on- - light. The selected pill fills with the panel accent (terracotta / - cream) and carries dark ink, which reads on either panel. */ -.alt-card:nth-of-type(3n+1) .select-option, -.alt-card:nth-of-type(3n) .select-option, -.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; +/* ---- the foot --------------------------------------------------- */ + +.question-nav, +.down-the-tree-foot, +.question-responsible { + font-family: var(--heading); + font-weight: 500; } -/* Wordmark: the mark carries its own red ground, so just seat it. */ -.wordmark img { border-radius: 0.35rem; } - -/* Partner logos, when dropped into a feature as markdown images, sit - quiet and small rather than full-bleed. */ -.feature p img { max-width: 9rem; width: auto; border: none; } +/* Partner logos, when a text carries them as markdown images, sit + quiet and small rather than full width. */ +.feature p img { + max-width: 9rem; + width: auto; + border: none; +} diff --git a/images/wordmark.svg b/images/wordmark.svg index 2abc90c..54294b6 100644 --- a/images/wordmark.svg +++ b/images/wordmark.svg @@ -1,5 +1,9 @@ Klingenberg Bygg + + @@ -51,7 +55,7 @@ - + @@ -64,7 +68,7 @@ - + diff --git a/site.yaml b/site.yaml index 0ec6653..0922faf 100644 --- a/site.yaml +++ b/site.yaml @@ -1,6 +1,6 @@ title: Klingenberg Bygg -wordmark: https://prosjekt.klingenbergbygg.no/klingenbergbygg/questions/raw/branch/main/images/wordmark.svg -wordmark_height: 4.4 +wordmark: /site/images/wordmark.svg +wordmark_height: 2.6 lang: no stylesheet: custom.css favicon: images/logo.svg