questions/custom.css

/* Tomter Vel — the look of tomtervel.no over portal's stylesheet.
   Loaded after portal's main.css (site.yaml `stylesheet`), so these
   rules win. tomtervel.no is Tachyons on a washed-yellow page
   (#fffceb) with black text, one blue (#1785c2, "vel-blue") for the
   banner and footer, light-yellow (#fbf1a9) link hovers, and a title
   banner set at a slight skew. The recolour rides portal's own custom
   properties; the banner and hover do the rest. */

:root {
  color-scheme: light;

  --accent: #1785c2;
  --accent-soft: rgba(23, 133, 194, 0.14);

  --paper: #fffceb;
  --ink: #111111;
  --ink-dim: #4f4a3a;
  --line: #e6dfbf;

  --card-bg: rgba(255, 255, 255, 0.6);
  --card-bg-opaque: rgba(255, 255, 255, 0.94);
  --card-shadow: rgba(23, 133, 194, 0.12);
  --hero-glow: rgba(255, 252, 235, 0.9);

  --error: #ff4136;

  --sans: -apple-system, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --heading: var(--sans);
}

body {
  background: var(--paper);
  color: var(--ink);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Wordmark above, then the question: stacked, so the skewed banner
   never runs into the wordmark. */
.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.hero-copy .wordmark { order: 0; }
.hero-copy h1 { order: 1; }
.hero-copy p { order: 2; }

/* The page's question sits in a vel-blue banner at the same slight
   skew as the title on tomtervel.no. */
.hero-copy h1 {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  padding: 0.35em 0.8em;
  transform: skewY(1.5deg) rotate(-1.5deg);
  transform-origin: top right;
}

/* Links: bold, black, and a light-yellow wash on hover, as on the
   original's nav. */
a {
  font-weight: 700;
  color: var(--ink);
  transition: background-color 160ms;
}
a:hover {
  background-color: #fbf1a9;
}
.wordmark, .wordmark:hover {
  background: none;
  opacity: 1;
}
.wordmark img {
  height: 2.6rem;
}

/* Card headings in the blue; the alternatives read as the committee
   cards on tomtervel.no. */
.alt-card h2 {
  color: var(--accent);
}

/* Buttons in the blue with washed-yellow text, no gradients. */
button, .button, input[type="submit"] {
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-weight: 700;
}
button:hover, .button:hover, input[type="submit"]:hover {
  background: #14699a;
}

/* Example answers in a field read as examples: a warm grey at about
   3:1 against the field, well below the near-black of what a person
   types (18:1). Portal's own rule uses --ink-dim, which on this skin
   is almost as dark as the text. Same selectors as portal's, so the
   rich-text fields match the plain ones. */
::placeholder,
.prosekit-editor .prosekit-placeholder::before,
.prosekit-editor.prosekit-placeholder::before {
  color: #9b9478;
  opacity: 1;
}