/* Nexus Business Financing.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the two typefaces, and one band the skeleton does not
 * have: the level table.
 *
 * ANEK LATIN OVER LORA, and the order is the unusual one: the sans carries
 * every heading, label and figure, the serif carries every sentence. No
 * other site on the network sets its body in a serif under a sans display.
 *
 * NAVY, BLUE AND GOLD. The brand blue #1873d6 is 4.7:1 on white and 4.3:1 on
 * the tint, which fails as the eyebrow over a tinted band, so `--accent` is a
 * step deeper at #1565c0. The gold is the published cost on every row of the
 * level table and nothing else; #9a7100 is 4.4:1 and it is set at #8a6400.
 */

@font-face {
  font-family: "Anek";
  src: url("display.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("text.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ink: #0a1f44;
  --ink-soft: #07162f;
  --text: #384258;
  --muted: #5e6880;

  --accent: #1565c0;
  --accent-deep: #0c2b58;
  --accent-wash: #edf3fc;
  --accent-line: #c0d4f1;

  --good: #157d77;
  --good-wash: #e2f2f0;
  --warn: #8a6400;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f3f6fa;
  --rule: #dde3ec;
  --rule-firm: #a9b4c6;

  --ask-ink: #a3b1c8;
  --ask-accent: #7fb3f0;

  --shadow: 10, 31, 68;

  --display: "Anek", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --body: "Lora", Georgia, "Times New Roman", serif;

  /* Anek is narrow and wants a little room at display sizes. */
  --display-weight: 700;
  --display-track: -0.01em;

  --shell: 1120px;
  --radius: 8px;
  --radius-sm: 6px;
}

/* ------------------------------------------------------------------ *
 * THE LEVEL TABLE -- the one band this site has and the skeleton does not.
 *
 * All six programmes as rows of one table, every figure in the same face at
 * the same size. It exists for one reason: two of this firm's programmes,
 * the term loan and the short-term loan, publish identical figures, and on a
 * page of cards with a heading each that is easy to miss. Set level, the two
 * rows are visibly the same row twice -- which is what they are -- and the
 * note under the table says so in words.
 * ------------------------------------------------------------------ */
.level {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--display);
  font-size: 1.02rem;
  margin: 0 0 18px;
}

.level th,
.level td {
  text-align: left;
  padding: 16px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.level thead th {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 2px solid var(--ink);
}

.level tbody th {
  font-weight: 700;
  color: var(--ink);
}

.level tbody th a {
  color: inherit;
  text-decoration: none;
}

.level tbody th a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.level td {
  color: var(--ink-soft);
  font-weight: 500;
}

.level td.is-cost {
  color: var(--warn);
  font-weight: 700;
}

/* The two rows that publish the same four figures. */
.level tr.is-twin > * {
  background: var(--accent-wash);
}

.level tr[aria-current] th::after {
  content: " \2190  this page";
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--accent);
}

@media (max-width: 760px) {
  .level thead {
    display: none;
  }

  .level,
  .level tbody,
  .level tr,
  .level th,
  .level td {
    display: block;
    width: 100%;
  }

  .level tr {
    border-bottom: 1px solid var(--rule-firm);
    padding: 10px 0;
  }

  .level th,
  .level td {
    border: 0;
    padding: 4px 10px;
  }

  .level td::before {
    content: attr(data-k) " ";
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-right: 6px;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #0a1f44;
  --nav-ink-soft: #5e6880;
  --nav-rule: #dde3ec;
  --nav-hover: #1565c0;
  --nav-panel: #ffffff;
  --nav-cta-bg: #1565c0;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--display);
  --nav-size: 0.9375rem;
  --nav-weight: 500;
  --nav-track: 0.06em;
  --nav-case: uppercase;

  --foot-bg: #0c2b58;
  --foot-ink: #9eaabc;
  --foot-head: #edeff2;
  --foot-rule: #3d557a;
  --foot-link: #fcfcfd;
}