/* Solid Business Financing.
 *
 * On the ADR-0011 skeleton -- `tools/sitegen/page.css` is the layout. What is
 * here is the palette, the typefaces, and the one band this site has that
 * the skeleton does not: the terms, in plain words.
 *
 * ROBOTO SLAB OVER LATO. Brick red on white and poured-concrete grey, with
 * slate for the type: the materials of a building that is meant to last,
 * which is the whole of what this brand says about itself. The brick
 * (#9f2d20) is 7.3:1 on white and 6.4:1 on the concrete tint, so it can
 * carry type; its deeper shade takes the hover and the fills.
 *
 * Square-ish corners. A slab serif and a 20px pill argue with each other.
 */

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

/* Lato is not a variable font on Google Fonts, so its two weights are two
   files -- see `fonts` in build.mjs. */
@font-face {
  font-family: "Lato";
  src: url("text.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

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

:root {
  --ink: #1f2933;
  --ink-soft: #17202a;
  --text: #323f4b;
  --muted: #52606d;

  --accent: #9f2d20;
  --accent-deep: #7a2218;
  --accent-wash: #f6e9e6;
  --accent-line: #e3bdb6;

  --good: #2f6b4a;
  --good-wash: #e3eee7;
  --warn: #8a4b0c;

  --paper: #ffffff;
  --card: #ffffff;
  --tint: #f2f0ec;
  --rule: #e2ddd5;
  --rule-firm: #cdc6ba;

  --ask-ink: #b8c2cc;
  --ask-accent: #e8b4a8;

  --shadow: 31, 41, 51;

  --display: "Roboto Slab", Georgia, serif;
  --body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --display-weight: 700;
  --display-track: -0.01em;

  --shell: 1180px;
  --radius: 6px;
  --radius-sm: 4px;

  /* The heads stand on concrete rather than on a wash of the brick. */
  --hero-bg: linear-gradient(175deg, #ebe7e0 0%, var(--paper) 62%);
  --head-bg: linear-gradient(175deg, #ebe7e0 0%, var(--paper) 72%);
}

/* ------------------------------------------------------------------ *
 * THE TERMS, IN PLAIN WORDS -- the one band this site has and the
 * skeleton does not.
 *
 * The brand's idea is that the financing should be the steady part of
 * running a business, and an offer is only steady if you know what the
 * words on it mean. So directly under the application sits a short
 * glossary: each word that decides what an offer really costs, set in the
 * slab on a brick rule like a heading in a contract, defined in a sentence
 * or two, and followed by the question to ask about it. The plate stands
 * beside the list and stays in view while it is read.
 * ------------------------------------------------------------------ */
.plain {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap);
  align-items: start;
}

.plain__side {
  position: sticky;
  top: 104px;
}

.plain__side .h2 {
  margin-bottom: 14px;
}

.plain__side .shot {
  margin-top: 30px;
}

.plain__list {
  margin: 0;
  border-top: 3px solid var(--accent);
}

.plain__list > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 8px 28px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule-firm);
}

.plain__list dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--ink);
}

.plain__list dd {
  margin: 0;
  color: var(--text);
}

.plain__list dd p {
  margin: 0 0 10px;
}

.plain__ask {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.plain__ask b {
  font-family: var(--display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 8px;
}

.plain__foot {
  margin: 22px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .plain {
    grid-template-columns: 1fr;
  }
  .plain__side {
    position: static;
  }
}

@media (max-width: 600px) {
  .plain__list > div {
    grid-template-columns: 1fr;
    padding: 20px 0;
  }
}

/* ---- the shared chrome, painted in this brand's colours ---- */
:root {
  --nav-bg: #ffffff;
  --nav-ink: #1f2933;
  --nav-ink-soft: #52606d;
  --nav-rule: #e2ddd5;
  --nav-hover: #9f2d20;
  --nav-panel: #ffffff;
  --nav-cta-bg: #9f2d20;
  --nav-cta-ink: #ffffff;
  --nav-font: var(--body);
  --nav-size: 0.975rem;
  --nav-weight: 700;
  --nav-track: 0;
  --nav-case: none;
  --nav-radius: 4px;

  --foot-bg: #1b242d;
  --foot-ink: #9aa5b1;
  --foot-head: #f5f7fa;
  --foot-rule: #323f4b;
  --foot-link: #f5f7fa;
}

/* The front door and the application page open with the form, and on a
   phone the form comes first. The head's full top padding would leave a
   band of empty concrete between the bar and the first question. */
@media (max-width: 760px) {
  .head--form {
    padding-top: 18px;
  }
  .head--form .frame {
    padding: 6px;
  }
}

/* The legal pages: numbered heads inside the prose, set smaller than a
   band's h2 so a long document reads as one document. */
.legal h2 {
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
  margin: 2em 0 0.5em;
}
.legal ul {
  padding-left: 1.2em;
}
.legal li {
  margin-bottom: 0.5em;
}