Ny drakt: én venstrekant, tegl som eneste farge, lys og mørk; ordmerket følger fargeskjemaet
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt
This commit is contained in:
3 files changed
+216
-86
No files matched your search
+208
-82
@@ -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;
|
||||
}
|
||||
Reference in new issue
Block a user