questions/custom.css

/* 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');

@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");
}

/* ---- colour: light, then dark ---------------------------------- */

:root {
  --brick: #8a1e12;
  --accent: #8a1e12;
  --accent-soft: rgba(138, 30, 18, 0.12);
  --paper: #f6f5f3;
  --ink: #201a18;
  --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);
  --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;
}

h1, h2, h3 {
  font-family: var(--heading);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.1;
}

/* ---- 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.5rem;
}

/* 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);
}

.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;
}

/* 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;
}

/* ---- the foot --------------------------------------------------- */

.question-nav,
.down-the-tree-foot,
.question-responsible {
  font-family: var(--heading);
  font-weight: 500;
}

/* 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;
}