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

  /* Portal's phone rule for .hero (3rem on top, 1.25rem either side) is
     written after its .hero-slides reset and at the same specificity, so
     on a phone it won: 36px of nothing above the wordmark, and the
     slideshow pulled 15px in from both edges instead of bleeding to them.
     The bar and the copy carry their own 1.5rem, so the frame needs none. */
  .hero-slides {
    padding: 0 0 2rem;
  }

  /* The plain hero (kontakt, takk) has no inner bar, so it keeps a side
     inset - the bar's 1.5rem, so the wordmark lands on the same edge as
     on the front page - and sits at the bar's height instead of 3rem down. */
  .hero:not(.hero-slides) {
    padding: 1rem 1.5rem 2rem;
  }
}

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