blandClaude Fable 5
49abc7dab0
lint-and-reload / lint (push) Successful in 1s
Teksten skalert så toppen av K og bunnen av Bygg flukter med firkantens topp/bunn. Wordmark større (4.4rem). Beskrivelsen flyttet mellom wordmark og spørsmålet via flex-order. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Y42TyF8Zu7NGRR2893vNcZ
122 lines
3.8 KiB
CSS
122 lines
3.8 KiB
CSS
/* 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. */
|
|
|
|
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
|
|
|
|
@font-face {
|
|
font-family: "FuturaNow";
|
|
font-weight: 800;
|
|
font-display: swap;
|
|
src: url("/site/fonts/futura-heavy.ttf") format("truetype");
|
|
}
|
|
@font-face {
|
|
font-family: "FuturaNow";
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("/site/fonts/futura-medium.ttf") format("truetype");
|
|
}
|
|
|
|
:root {
|
|
/* Brick red — the logo tile's own colour. */
|
|
--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);
|
|
--hero-glow: rgba(246, 245, 243, 0.85);
|
|
--heading: "FuturaNow", var(--sans);
|
|
--sans: "EB Garamond", Georgia, "Times New Roman", serif;
|
|
}
|
|
|
|
/* Display headings in heavy Futura, tightened. */
|
|
h1, h2, h3 {
|
|
font-family: var(--heading);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.hero-copy h1 { font-size: 2.6rem; }
|
|
|
|
/* Hero stack: wordmark, then the tagline description, then the big
|
|
question - the description reordered to sit between them. */
|
|
.hero-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.55rem;
|
|
}
|
|
.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;
|
|
}
|
|
.alt-card:nth-of-type(3n) {
|
|
--card-bg: #8a1e12;
|
|
--card-bg-opaque: #8a1e12;
|
|
--ink: #fdf3ef;
|
|
--ink-dim: #f4dbd4;
|
|
--line: #b2493d;
|
|
--accent: #fdf3ef;
|
|
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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* 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; }
|