feat: redesign the landing page and brand

docs/assets/extra.css

@@ -1,29 +1,105 @@
 /* Brand palette -----------------------------------------------------------
-   Material's "custom" primary/accent read these variables. */
+   Material's "custom" primary/accent read these variables.
+
+   Ink is the brand's dark and Signal Blue its accent. The header and footer
+   are Ink on every page, so the docs and the landing page share one frame;
+   Signal Blue is the same #2c9ccd the README badge has always used, so badges
+   already in the wild still match. */
 :root {
+  --cc-ink: #0b1620;
+  --cc-ink-raised: #13212c;
   --cc-brand: #2c9ccd;
   --cc-brand-dark: #1e85a8;
   --cc-brand-light: #5bb3d9;
-  /* The brand blue only reaches 4.2:1 on white; links need 4.5:1. */
+  /* The brand blue only reaches 3.1:1 on white; links need 4.5:1. */
   --cc-link: #176b89;
 
-  /* The hero sits on brand blue, so its button is white rather than branded. */
-  --cc-hero-button-bg: #ffffff;
-
-  --md-primary-fg-color: var(--cc-brand);
-  --md-primary-fg-color--light: var(--cc-brand-light);
-  --md-primary-fg-color--dark: var(--cc-brand-dark);
+  --md-primary-fg-color: var(--cc-ink);
+  --md-primary-fg-color--light: var(--cc-ink-raised);
+  --md-primary-fg-color--dark: #060d13;
   --md-accent-fg-color: var(--cc-brand-dark);
+
+  /* A literal stack: the theme defines --md-text-font-family below :root,
+     so a var() of it here would resolve to nothing. */
+  --cc-display-font: "Bricolage Grotesque", "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
 }
 
+/* The theme sets the footer colours per scheme, so they are overridden per
+   scheme too; on :root alone they would lose to the theme's own. */
+[data-md-color-scheme="default"],
 [data-md-color-scheme="slate"] {
-  --md-primary-fg-color: var(--cc-brand);
+  --md-footer-bg-color: #081119;
+  --md-footer-bg-color--dark: #060d13;
+}
+
+[data-md-color-scheme="slate"] {
+  /* Material tints every slate grey from one hue; 205 is Ink's. */
+  --md-hue: 205;
+  --md-default-bg-color: #0e1a23;
+  --md-primary-fg-color: var(--cc-ink);
   --md-accent-fg-color: var(--cc-brand-light);
   --md-typeset-a-color: var(--cc-brand-light);
 }
 
 [data-md-color-scheme="default"] {
   --md-typeset-a-color: var(--cc-link);
+  /* A light header in the light scheme, Ink in the dark one, so the header
+     answers the theme toggle like the rest of the page. */
+  --md-primary-fg-color: #ffffff;
+  --md-primary-fg-color--light: #f4f6f7;
+  --md-primary-fg-color--dark: #eef2f4;
+  --md-primary-bg-color: var(--cc-ink);
+  --md-primary-bg-color--light: #4f6270;
+}
+
+[data-md-color-scheme="default"] .md-header {
+  box-shadow: inset 0 -1px 0 #dce3e8;
+}
+
+/* The theme's search field is a translucent black meant for a coloured
+   header; on a white one it needs a solid tint instead. */
+[data-md-color-scheme="default"] .md-search__form {
+  background-color: #eef2f4;
+}
+
+[data-md-color-scheme="default"] .md-search__form:hover {
+  background-color: #e4e9ed;
+}
+
+/* A primary button is Signal Blue with Ink text: white on this blue is 3.1:1,
+   under the 4.5:1 a button label needs; Ink on it is 5.9:1. */
+.md-typeset .md-button--primary {
+  background-color: var(--cc-brand);
+  border-color: var(--cc-brand);
+  color: var(--cc-ink);
+}
+
+.md-typeset .md-button--primary:focus,
+.md-typeset .md-button--primary:hover {
+  background-color: var(--cc-brand-light);
+  border-color: var(--cc-brand-light);
+  color: var(--cc-ink);
+}
+
+/* Display face for page titles, section headings and the site name. Body text
+   stays in the theme's text font. */
+.md-typeset h1,
+.md-typeset h2 {
+  font-family: var(--cc-display-font);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+/* The theme draws page titles in a light grey at weight 300; in the display
+   face they read as headings only at full strength. */
+.md-typeset h1 {
+  color: var(--md-default-fg-color);
+}
+
+.md-header__title {
+  font-family: var(--cc-display-font);
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 
 /* Feature grid: uses Material's card grid, tightened up a little. */

docs/guides/github-app.md

@@ -181,13 +181,13 @@ without a wall of red.
 
 Public repositories are free on any account, and everything on a personal
 account is free, and both stay free. Only an organization's private
-repositories are paid:
+repositories will be paid, on a Team plan that is not on sale yet:
 
 | Plan | Price | Covers |
 |---|---|---|
 | Open Source | Free | Public repositories, on any account |
 | Personal | Free | Private repositories on a personal account |
-| Team | $19 / month | Private repositories in an organization, 14-day free trial |
+| Team | Coming soon | Private repositories in an organization |
 
 The Team plan is not tiered by seat count. Twenty of you and twenty thousand of
 you pay the same, so growing the team never changes the bill.