/* Simple .md's identity, scoped to .theme-simple. * * Never :root. On the home page this class sits on the product band alone, so * the shell around it stays colourless; on /simple/ it sits on . That is * how a second product gets a band of its own later without either one having * to give ground. * * Rule for any future product tint: it must clear 4.5:1 against --muted, * because muted body text sits on it. #F2F5F8 was chosen for exactly that * reason — #EEF2F5 measured 4.40:1 and was rejected. Check before choosing. */ .theme-simple { /* #4D6F8C, not #5F7F99. White on #5F7F99 is 4.21:1 and fails AA; this is 5.29:1. #5F7F99 keeps the roles where it carries no text. */ --accent: #4D6F8C; --accent-hover: #3F5D78; --accent-ring: #5F7F99; --band: #F2F5F8; --band-line: #DDE1E5; --btn-border: #C9D4DC; --on-accent: #FFFFFF; } @media (prefers-color-scheme: dark) { .theme-simple { --accent: #8FA9BE; --accent-hover: #A7BED0; --accent-ring: #8FA9BE; --band: #16202A; --band-line: #30363D; --btn-border: #3C4652; /* The inversion. White on #8FA9BE is 2.4:1 and unusable; dark ink on it is ~9:1. This looks like a mistake in a screenshot and is not one. */ --on-accent: #111418; } } /* ---------------------------------------------------------------- button */ .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* ------------------------------------------------------------------ band */ /* Full-bleed, tinted, and never a card — including on mobile. The tint is how a product is distinguished from the shell, so boxing it in would undo the one thing it exists to do. Bands are never side by side, which is why two blue products can each have one without reading as a single brand. */ .band { background: var(--band); border-top: 1px solid var(--band-line); border-bottom: 1px solid var(--band-line); padding: 76px var(--gutter); } .band-grid { display: grid; grid-template-columns: 1fr 480px; gap: 64px; align-items: center; } .band h2 { font: 400 40px/1.15 var(--serif); } .band .tagline { margin-top: 10px; font: 400 30px/1.3 var(--serif); color: var(--accent); } .band p.body { margin-top: 18px; max-width: 42ch; font-size: 16px; line-height: 1.65; color: var(--muted); } /* ------------------------------------------------------------------ pill */ /* min-height, not height — a fixed height cannot contain a second line if the label ever grows. Carries its meaning in words, so nothing depends on the fill being read as significant. */ .pill { display: inline-flex; align-items: center; min-height: 26px; padding: 5px 11px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 600 11px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } /* ---------------------------------------------------------------- lockup */ /* The wordmark: the mark replaces the S, so it reads "Simple". One branded moment per surface — on this site that is the /simple/ hero and nowhere else. Everywhere else "Simple .md" is plain text, because the logo says Simple and the product is called Simple .md, and merging them would create a fourth asset nobody governs. */ .lockup { display: inline-flex; align-items: center; /* gap, never a margin: a newline between the two spans renders as a real ~8px word space that silently adds to any margin set here. */ gap: 6px; line-height: 1; color: var(--ink); } .lockup-mark { display: inline-flex; width: 66px; height: 72px; flex: 0 0 66px; } .lockup-mark svg { width: 100%; height: 100%; color: var(--ink); } .lockup-text { font: 600 48px/1 var(--brand); letter-spacing: -0.045em; } /* --------------------------------------------------------- two-pane card */ .two-pane { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); box-shadow: 0 14px 40px rgba(17, 19, 21, .06); display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } @media (prefers-color-scheme: dark) { .two-pane { box-shadow: none; } } .two-pane > div { padding: 24px; } .two-pane > div + div { border-left: 1px solid var(--line); } /* "SOURCE" and "RENDERED", not fake traffic lights. Traffic lights on this card were the worst thing about the old app splash; they are not coming back here. */ .pane-label { font: 600 9px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .pane-source { font: 12px/1.65 var(--mono); color: var(--muted); white-space: pre-wrap; } .pane-source .hash { color: var(--accent); font-weight: 600; } .pane-source .h { color: var(--ink); font-weight: 600; } .pane-rendered h3 { font: 400 20px/1.3 var(--serif); color: var(--ink); } .pane-rendered p { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--muted); } /* ------------------------------------------------------------ screenshot */ .shot { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper); } .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .alt-section { display: grid; grid-template-columns: 420px 1fr; gap: 64px; align-items: center; } .alt-section.reverse { grid-template-columns: 1fr 420px; } .alt-section h2 { font: 400 32px/1.2 var(--serif); } .alt-section p { margin-top: 16px; color: var(--muted); } /* -------------------------------------------------------- download block */ .download .meta { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--muted); } /* ---------------------------------------------------------------- mobile */ @media (max-width: 900px) { .band { padding: 40px var(--gutter); } .band-grid { grid-template-columns: 1fr; gap: 32px; } .band h2 { font-size: 30px; } .band .tagline { font-size: 21px; } .band p.body { font-size: 15px; } .lockup-mark { width: 44px; height: 48px; flex-basis: 44px; } .lockup-text { font-size: 32px; } /* Stacks to one column, the divider becoming a rule. */ .two-pane { grid-template-columns: 1fr; } .two-pane > div + div { border-left: 0; border-top: 1px solid var(--line); } /* 4/3, not 16/10: a 16:10 capture at 342px wide is 214px tall and the interface becomes unreadable. A CSS crop, not a second set of captures. */ .shot { aspect-ratio: 4 / 3; } .alt-section, .alt-section.reverse { grid-template-columns: 1fr; gap: 24px; } /* Text always precedes its image on mobile, whichever side it took above. */ .alt-section .shot { order: 2; } .alt-section .words { order: 1; } .alt-section h2 { font-size: 26px; } } /* The product hero's button: 48px and a size up, per §7.3. */ .btn-lg { min-height: 48px; padding: 0 26px; font-size: 16px; } /* The hero is centred; its meta lines sit under the button rather than beside it, so they need their own centring rather than inheriting the flex row's. */ .hero-product .meta { text-align: center; } @media (max-width: 900px) { .hero-product .lockup { justify-content: center; } .btn-lg { font-size: 15px; } }