/* The landing page of brimlang.com: a light blue header, the page in deep
   navy with text and code side by side, and the blue of the Brim logo. */
@font-face { font-family: "Lexend"; font-display: swap; font-weight: 400; src: url("fonts/Lexend.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-display: swap; font-weight: 700; src: url("fonts/Lexend-700.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-display: swap; src: url("fonts/Outfit.woff") format("woff"); }
@font-face { font-family: "Cascadia Mono"; font-display: swap; src: url("fonts/CascadiaMono.woff2") format("woff2"); }

:root {
  --font-text: "Outfit", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-title: "Lexend", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-code: "Cascadia Mono", ui-monospace, Menlo, Consolas, monospace;

  --blue: #015efe;
  --blue-light: #8db8ff;
  --header: #eaf1ff;
  --navy: #0f1a33;
  --navy-2: #172447;
  --ink: #0b1220;
  --text: #eef2ff;
  --text-subtle: #b8c3de;
  --white: #fefefe;

  --code-key: #8db8ff;
  --code-type: #9ce7ff;
  --code-str: #c8ffa7;
  --code-num: #ffd596;
  --code-fn: #fdffab;
  --code-com: #7f8bab;
  --code-err: #ff7a7a;

  --width: 1080px;
  --gap: 10px;
  --waves: 100px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--navy); color: var(--text);
  font: 1.125rem/1.5 var(--font-text);
}
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; }
p { letter-spacing: .3px; line-height: 1.4; }
a { color: var(--white); text-decoration-color: var(--blue-light); text-underline-offset: 3px; }
p code, li code { font: .85em var(--font-code); opacity: .8; margin: 0 2px; }
.content { width: var(--width); max-width: 100%; margin: 0 auto; padding: calc(var(--gap) * 2); }

/* ---- the light header: banner, navbar and hero ------------------------ */
.page-banner { background: var(--blue); color: #fff; text-align: center; padding: var(--gap) calc(var(--gap) * 2); font-size: 1rem; }
.page-banner a { color: #fff; text-decoration-color: #fff; font-weight: 600; margin-left: 4px; }

.page-header { background: var(--header); color: var(--ink); }
.navbar { font-family: var(--font-title); font-size: 1.125rem; }
.navbar .content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--gap); }
.navbar a { color: var(--ink); text-decoration: none; margin-left: calc(var(--gap) * 2); }
.navbar a:hover { color: var(--blue); }
.navbar .logo { margin-left: 0; display: flex; align-items: center; }
.navbar .logo img { height: 30px; display: block; }

.hero { position: relative; overflow: hidden; padding-bottom: var(--waves); text-align: center; }
.hero .content { display: flex; align-items: center; justify-content: center; gap: calc(var(--gap) * 5); padding: calc(var(--gap) * 4) calc(var(--gap) * 2); }
.hero-image { width: 420px; flex-shrink: 0; }
.hero-image img { width: 100%; height: auto; display: block; }
.hero .text { font: 2.25rem/1.35 var(--font-title); max-width: 560px; text-align: left; }
.hero .text b { font-weight: 700; }
.button {
  display: inline-block; color: #fff !important; background: var(--blue); border-radius: 100px;
  padding: var(--gap) calc(var(--gap) * 4); text-decoration: none; font-family: var(--font-title);
}
.button:hover { background: #004bd0; }
.hero .button { font-size: 1.375rem; margin-top: calc(var(--gap) * 3); }
.waves {
  position: absolute; bottom: -5px; left: 0; width: calc(max(100%, 1200px) + 10px);
  height: var(--waves); display: block;
}

/* ---- text and code in pairs ------------------------------------------- */
.pair {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: calc(var(--gap) * 4); padding-top: calc(var(--gap) * 4); padding-bottom: calc(var(--gap) * 4);
  font-size: 1.3rem;
}
.pair:nth-of-type(2n) { flex-direction: row-reverse; }
.pair.intro { padding-top: 0; }
.pair > * { flex: 1; min-width: 250px; max-width: 100%; }
.pair > pre { flex: 1.35; }
.pair h2 { font-size: 2.25rem; margin: 0 0 var(--gap); }
.pair p { color: var(--text); }

pre {
  margin: 0; padding: calc(var(--gap) * 2); background: var(--navy-2); border-radius: 8px;
  overflow-x: auto; font: .95rem/1.55 var(--font-code); color: #e4e9f7;
}
pre code { font: inherit; white-space: pre; }
pre { scrollbar-color: #3a4a75 transparent; }
.k { color: var(--code-key); }
.t { color: var(--code-type); }
.s { color: var(--code-str); }
.n { color: var(--code-num); }
.f { color: var(--code-fn); }
.c { color: var(--code-com); }
.prompt { color: var(--blue-light); user-select: none; }
.ok { color: var(--code-str); }
.err { color: var(--code-err); }
.note { color: var(--text-subtle); }

/* ---- news, on blue ---------------------------------------------------- */
.news {
  position: relative; overflow: hidden; text-align: center; color: #fff;
  background: linear-gradient(0deg, var(--blue) 0%, #4f8fff 160%);
  padding: calc(var(--gap) * 4) 0 var(--waves); margin-bottom: -1px; font-size: 1.4rem;
}
.news .label { font: 1rem var(--font-title); text-transform: uppercase; letter-spacing: .08em; opacity: .85; margin: 0; }
.news h2 { font-size: 3rem; margin: calc(var(--gap) * 1.5) 0 calc(var(--gap) * 3); }
.news p { max-width: 720px; margin: 0 auto calc(var(--gap) * 2); }
.news .button { background: #fff; color: var(--blue) !important; margin-top: var(--gap); font-size: 1.25rem; }
.news .button:hover { background: var(--header); }

/* ---- still here: get started ------------------------------------------ */
.still-here { background: var(--header); color: var(--ink); text-align: center; }
.still-here .content { padding-top: calc(var(--gap) * 6); padding-bottom: calc(var(--gap) * 6); }
.still-here h2 { font-size: 2.25rem; margin: 0 0 var(--gap); }
.still-here p { margin: 0 0 calc(var(--gap) * 3); font-size: 1.3rem; }
.still-here a:not(.button) { color: var(--ink); text-decoration-color: var(--blue); }
.still-here .button { font-size: 1.3rem; }
.still-here .more { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--gap) * 3); margin-top: calc(var(--gap) * 3); font-size: 1.15rem; }
.install-cmd {
  display: inline-block; margin: 0 0 calc(var(--gap) * 3); padding: var(--gap) calc(var(--gap) * 2);
  background: #fff; border: 1px solid #cddcfb; border-radius: 8px; font: 1rem var(--font-code); color: var(--ink);
  max-width: 100%; overflow-x: auto; white-space: nowrap;
}

/* ---- footer ----------------------------------------------------------- */
.footer { background: var(--white); color: var(--ink); font-family: var(--font-title); padding: calc(var(--gap) * 4) 0; }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { color: var(--blue); }
.footer .content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--gap) * 4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: calc(var(--gap) * 2); opacity: .9; }
.footer .first { flex: 1; max-width: 220px; }
.footer .first img { height: 34px; display: block; }
.footer .middle { flex: 1; display: flex; flex-wrap: wrap; }
.footer .middle li { width: 170px; margin-right: calc(var(--gap) * 2); }
.footer .last { text-align: right; }
.footer .last li { margin-bottom: var(--gap); opacity: .6; font-size: .8rem; }

@media (max-width: 860px) {
  .hero .content { flex-direction: column; gap: calc(var(--gap) * 3); }
  .hero-image { width: 300px; max-width: 100%; }
  .hero .text { text-align: center; font-size: 1.8rem; }
  .navbar .links { width: 100%; }
  .navbar .links a:first-child { margin-left: 0; }
  .news h2 { font-size: 2.2rem; }
  .pair { font-size: 1.15rem; }
  .pair h2 { font-size: 1.8rem; }
  .footer .last { text-align: left; }
}