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 wordmark's line, at the page's right edge. */
.session {
  font-family: var(--heading);
  font-weight: 500;
  font-size: 0.85rem;
}

.hero-top {
  justify-content: space-between;
}

.hero-top .session {
  position: static;
  transform: none;
}

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

/* Portal narrows a card's padding on a small screen; the rule above is
   unconditional and this sheet loads after portal's, so without this the
   desktop padding survived onto a phone - 1.8rem of margin either side of
   a 360px screen, a tenth of the width given to nothing. Same breakpoint
   portal uses, so the two stay in step. */
@media (width <= 40rem) {
  .alt-card {
    padding: 1.4rem 1.35rem 1.45rem;
  }
}

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