/* * BrewMDM site styles, on the m7kni design system v2. * * COLOUR IS NOT DEFINED HERE. Every value comes from stylesheets/tokens.css, * vendored from https://design.m7kni.io/tokens.css. A raw hex in this file is a * defect: if a colour is needed that the tokens do not express, it belongs in * the design system, not in a local addition. The one derivation permitted is * `color-mix(in oklab, N%, )` for in-cell furniture -- meter * tracks and hairlines -- which FOUNDATIONS.md requires be mixed from ink so it * survives every row state instead of matching a hover background. * * THEME. Light is the default and lives on :root. Dark is the same token names * re-pointed under [data-theme="dark"], which overrides/main.html mirrors onto * from the theme's own palette state before first paint. Nothing here * restates a dark value. * * ROOT SIZE. Material for MkDocs / Zensical set `html { font-size: 125% }`, so * 1rem is 20px here and not the 16px the design system is authored against. * Everything is therefore sized in px. Author in rem and it renders a quarter * too large. * * TYPE SCALE. Product surfaces use the frozen 10/11/12.5/13.5/15/18/24 scale and * this file uses the --font-size-* tokens wherever a value lands on it. The * marketing display sizes -- the hero at 46px, the step titles at 20px, the * section ledes at 16.5px -- sit above that scale by design and are written as * literals, matching the artboards they were drawn at. * * SPACING. The frozen 4px scale has no intermediate steps, so a gap the * artboards draw at 80px is written `calc(var(--space-16) + var(--space-4))` * rather than as a new primitive. Composite values are named once on .brew and * used from there. * * BAN LIST (FOUNDATIONS.md) applies here in full: no gradients, no glow, no * glassmorphism, no card grids, no rounded cards, no emoji icons, no mixed icon * sets. Status is shape plus word, never colour alone. */ /* ── theme chrome ───────────────────────────────────────────────────────── */ /* This site is a launch page with four content pages behind it. It has no docs navigation, no search and no table of contents to show, and the theme's own footer would sit under this site's footer. */ .md-header, .md-tabs, /* Both sidebars by name. The theme re-shows the secondary one at wide viewports with its own `--secondary` rule, so hiding `.md-sidebar` alone leaves a 242px column of nothing beside the page. */ .md-sidebar--primary, .md-sidebar--secondary, .md-footer, .md-search, .md-content__button { display: none; } /* Full bleed. The theme's grid caps content at 61rem and gutters it; the landing page runs edge to edge and caps its own content per band. */ .md-main__inner { margin: 0; max-width: none; padding: 0; } .md-content { max-width: none; } .md-content__inner { margin: 0; padding: 0; } .md-content__inner::before { display: none; } html { background: var(--color-bg-canvas); } :root { /* The design system ships duration tokens but no easing token, and FOUNDATIONS.md fixes the curve: ease-out, no bounce. Declared here rather than on .brew so the controls the prose pages borrow -- the privacy page's cookie button -- resolve it too. A transition naming an undefined custom property is invalid at computed-value time and silently does nothing. */ --brew-ease: cubic-bezier(0, 0, 0.2, 1); } body, .md-typeset { background: var(--color-bg-canvas); color: var(--color-fg-soft); font-family: var(--font-family-sans); font-size: var(--font-size-lg); line-height: 1.5; -webkit-font-smoothing: antialiased; } .md-typeset a { color: var(--color-bg-accent); text-decoration: none; transition: color var(--duration-base) var(--brew-ease); } .md-typeset a:hover { color: var(--color-accent-hover); text-decoration: underline; } .md-typeset a:focus-visible, .md-typeset button:focus-visible, .md-typeset input:focus-visible { outline: 2px solid var(--color-bg-accent); outline-offset: 2px; } /* ── page shell ─────────────────────────────────────────────────────────── */ .md-typeset .brew { /* The artboards' 80px band gutter and 96px hero lead-in, composed from the frozen 4px steps rather than introduced as new ones. */ --brew-band-x: clamp(var(--space-5), 5vw, calc(var(--space-16) + var(--space-4))); --brew-band-y: clamp(calc(var(--space-8) + var(--space-4)), 6vw, calc(var(--space-16) + var(--space-4))); --brew-hero-y: clamp(calc(var(--space-8) + var(--space-8)), 8vw, calc(var(--space-16) + var(--space-8))); /* In-cell furniture is mixed from ink so it survives hover and selection. A fixed grey disappears against one of them. */ --brew-track: color-mix(in oklab, var(--color-fg-default) 14%, var(--color-bg-surface)); position: relative; box-sizing: border-box; display: flex; flex-direction: column; min-height: 100vh; background: var(--color-bg-canvas); color: var(--color-fg-soft); font-family: var(--font-family-sans); font-size: var(--font-size-lg); line-height: 1.5; } .md-typeset .brew *, .md-typeset .brew *::before, .md-typeset .brew *::after { box-sizing: border-box; } /* Retired with the v1 design: a radial gradient behind the hero. The outcome pages still carry the element, and their content is not this change's to edit, so it is switched off here rather than deleted from five files. */ .md-typeset .brew-glow { display: none; } /* Labels the input for a screen reader without putting a second label beside the placeholder, which the design has no room for. */ .md-typeset .brew-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* A full-width band. Rules and hairlines separate them; there are no cards. */ .md-typeset .brew-band { padding: var(--brew-band-y) var(--brew-band-x); border-top: 1px solid var(--color-border-default); } .md-typeset .brew-band--surface { background: var(--color-bg-surface); } .md-typeset .brew-band--hero { padding-top: var(--brew-hero-y); border-top: 0; } .md-typeset .brew-band__inner { width: 100%; max-width: 1120px; margin: 0 auto; } /* The outcome pages wrap their whole body in this instead of bands. */ .md-typeset .brew-main { position: relative; flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--space-12) var(--brew-band-x) var(--space-16); } /* Mono micro-label: uppercase, tracked, the design system's machine-text face. Used for the eyebrow, the table caption row and the step markers. */ .md-typeset .brew-label { display: inline-block; font-family: var(--font-family-mono); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-muted); } /* ── masthead ───────────────────────────────────────────────────────────── */ .md-typeset .brew-masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 68px; padding: var(--space-3) var(--brew-band-x); border-bottom: 1px solid var(--color-border-default); background: var(--color-bg-surface); } /* Source order is lockup, state, eyebrow, because on a narrow viewport the eyebrow drops to a row of its own below the other two. Visual order on a wide one is lockup, eyebrow, state, which is what these three `order` values buy without a second copy of the markup. */ .md-typeset .brew-lockup { order: 0; display: flex; align-items: center; gap: var(--space-3); color: var(--color-fg-default); } /* The official mark, fetched from design.m7kni.io/brand/brewmdm/mark.svg and never redrawn. currentColor only: one token drives it. No tile behind it -- the construction rules put the mark bare beside the wordmark. */ .md-typeset .brew-mark { display: flex; align-items: center; justify-content: center; flex: none; color: inherit; } .md-typeset .brew-mark svg { width: 26px; height: 26px; } .md-typeset .brew-wordmark { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; color: var(--color-fg-default); } .md-typeset .brew-masthead__meta { order: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); } /* State reads as a bordered marker, never a solid fill: the accent is the only colour that means "interactive", and this is not interactive. */ .md-typeset .brew-pill { display: inline-flex; align-items: center; flex: none; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); font-family: var(--font-family-mono); font-size: var(--font-size-2xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-soft); } .md-typeset .brew-masthead__cta { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); white-space: nowrap; } .md-typeset .brew-eyebrow { order: 1; margin: 0 0 0 auto; font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-fg-muted); } /* ── hero ───────────────────────────────────────────────────────────────── */ .md-typeset .brew-title { margin: 0; max-width: 880px; color: var(--color-fg-default); font-size: clamp(30px, 4.4vw, 46px); font-weight: var(--font-weight-semibold); line-height: 1.08; letter-spacing: -0.025em; text-wrap: pretty; } .md-typeset .brew-lede { margin: var(--space-6) 0 0; max-width: 640px; color: var(--color-fg-soft); font-size: clamp(var(--font-size-lg), 1.6vw, var(--font-size-xl)); line-height: 1.6; text-wrap: pretty; } /* ── fleet table ────────────────────────────────────────────────────────── */ .md-typeset .brew-fleet { margin-top: clamp(var(--space-8), 4vw, calc(var(--space-12) + var(--space-2))); } .md-typeset .brew-fleet__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); } .md-typeset .brew-fleet__count { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; } /* Square container, hairline border, no shadow and no radius: containers are 0px in this system. Scrolls horizontally rather than forcing the page to. */ .md-typeset .brew-fleet__frame { border: 1px solid var(--color-border-default); border-radius: var(--radius-container); background: var(--color-bg-surface); overflow-x: auto; } /* The table carries a class, so the theme's own `table:not([class])` rules -- rounded corners, a drop shadow and `display: block` -- never apply to it. */ .md-typeset .brew-fleet__table { display: table; width: 100%; margin: 0; border: 0; border-collapse: collapse; border-radius: 0; box-shadow: none; font-size: var(--font-size-md); } .md-typeset .brew-fleet__table th { padding: var(--space-2) var(--space-4); border: 0; border-bottom: 1px solid var(--color-border-strong); background: none; font-family: var(--font-family-mono); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-fg-muted); text-align: left; white-space: nowrap; } .md-typeset .brew-fleet__table td { height: var(--row-table); padding: var(--space-2) var(--space-4); border: 0; border-bottom: 1px solid var(--color-border-default); white-space: nowrap; vertical-align: middle; } .md-typeset .brew-fleet__table tbody tr:last-child td { border-bottom: 0; } .md-typeset .brew-fleet__table th.brew-num, .md-typeset .brew-fleet__table td.brew-num { text-align: right; font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; } /* Zero renders as a dim figure, never as empty furniture. */ .md-typeset .brew-num--zero { color: var(--color-fg-faint); } .md-typeset .brew-num--warn { color: var(--color-status-warn); font-weight: var(--font-weight-semibold); } .md-typeset .brew-num--fail { color: var(--color-status-fail); font-weight: var(--font-weight-semibold); } .md-typeset .brew-host { font-family: var(--font-family-mono); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-fg-default); } .md-typeset .brew-dot { display: inline-block; width: 6px; height: 6px; margin-right: var(--space-2); border-radius: var(--radius-full); background: var(--color-status-ok); vertical-align: 1px; } /* Not a fault of its own: the machine has simply not reported recently, and the compliance column is where the fault is named. */ .md-typeset .brew-dot--stale { background: var(--color-fg-faint); } .md-typeset .brew-user { color: var(--color-fg-soft); } .md-typeset .brew-team { margin-left: var(--space-2); color: var(--color-fg-faint); font-size: var(--font-size-sm); } .md-typeset .brew-os { font-family: var(--font-family-mono); font-size: var(--font-size-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; } .md-typeset .brew-os--warn { color: var(--color-status-warn); font-weight: var(--font-weight-semibold); } .md-typeset .brew-os--fail { color: var(--color-status-fail); font-weight: var(--font-weight-semibold); } .md-typeset .brew-seen--fail { color: var(--color-status-fail); font-weight: var(--font-weight-semibold); } /* Inline meter for a magnitude. The fill is set by data-fill so no style attribute is needed on the element; the figure beside it carries the number, so the bar itself is decoration. */ .md-typeset .brew-meterline { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); } .md-typeset .brew-meter { display: inline-block; width: 52px; height: 4px; border-radius: 2px; background: var(--brew-track); overflow: hidden; } .md-typeset .brew-meter i { display: block; height: 100%; width: 0; } .md-typeset .brew-meter--warn i { background: var(--color-status-warn); } .md-typeset .brew-meter--fail i { background: var(--color-status-fail); } .md-typeset .brew-meter[data-fill="24"] i { width: 24%; } .md-typeset .brew-meter[data-fill="38"] i { width: 38%; } .md-typeset .brew-meter[data-fill="48"] i { width: 48%; } .md-typeset .brew-meter[data-fill="82"] i { width: 82%; } /* Shape and word, never colour alone. */ .md-typeset .brew-status { font-family: var(--font-family-mono); font-size: 11.5px; font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; white-space: nowrap; } .md-typeset .brew-status--ok { color: var(--color-status-ok); } .md-typeset .brew-status--warn { color: var(--color-status-warn); } .md-typeset .brew-status--fail { color: var(--color-status-fail); } /* The note beside a status is what makes the row actionable: "FileVault off" says more than WARN does. */ .md-typeset .brew-status__note { margin-left: var(--space-3); color: var(--color-fg-muted); font-size: var(--font-size-sm); } /* ── sections ───────────────────────────────────────────────────────────── */ .md-typeset .brew-section__title { margin: 0; color: var(--color-fg-default); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; } .md-typeset .brew-section__lede { margin: var(--space-4) 0 0; max-width: 760px; color: var(--color-fg-soft); font-size: 16.5px; line-height: 1.65; text-wrap: pretty; } /* Numbered rows, ruled rather than tiled. The first rule is the strong one, so the group reads as one block and not as three separated items. */ .md-typeset .brew-rows { display: flex; flex-direction: column; margin-top: var(--space-12); border-bottom: 1px solid var(--color-border-default); } .md-typeset .brew-row { display: grid; grid-template-columns: 64px 340px 1fr; gap: var(--space-6); padding: calc(var(--space-6) + var(--space-1)) 0; border-top: 1px solid var(--color-border-default); } .md-typeset .brew-row:first-child { border-top-color: var(--color-border-strong); } .md-typeset .brew-row__num { font-family: var(--font-family-mono); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: var(--tracking-label); color: var(--color-fg-faint); } .md-typeset .brew-row__title { margin: 0; color: var(--color-fg-default); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; } .md-typeset .brew-row__body { margin: 0; max-width: 560px; color: var(--color-fg-soft); font-size: var(--font-size-lg); line-height: 1.6; } /* The argument for the tool, set as a labelled aside rather than body copy. */ .md-typeset .brew-why { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-8); margin-top: calc(var(--space-8) + var(--space-2)); padding-top: calc(var(--space-6) + var(--space-1)); border-top: 1px solid var(--color-border-strong); } .md-typeset .brew-why p { margin: 0; max-width: 760px; color: var(--color-fg-soft); font-size: var(--font-size-lg); line-height: 1.7; text-wrap: pretty; } /* The sequence: one rule running down the left, steps hung off it. The rule is this container's own left border rather than a grid track. As a track it would need `grid-row: 1 / -1`, and -1 is the last line of the EXPLICIT grid -- which, with rows all implicit, is line 1. The line then spans the first step only and stops, which looks like a styling accident rather than a bug. A border cannot get that wrong and does not care how many steps there are. */ .md-typeset .brew-steps { margin-top: var(--space-12); margin-left: 64px; padding-left: var(--space-8); border-left: 1px solid var(--color-border-default); } .md-typeset .brew-step { padding-bottom: calc(var(--space-8) + var(--space-2)); } .md-typeset .brew-step:last-child { padding-bottom: 0; } .md-typeset .brew-step__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .md-typeset .brew-step__tick { height: 1px; width: var(--space-8); background: var(--color-border-strong); } /* Phosphor regular, the one icon set. Filled paths, so the accent is set as a fill rather than a stroke. */ .md-typeset .brew-step__icon { flex: none; width: 18px; height: 18px; fill: var(--color-bg-accent); } .md-typeset .brew-step__title { margin: 0; color: var(--color-fg-default); font-size: 20px; font-weight: var(--font-weight-semibold); letter-spacing: -0.015em; } .md-typeset .brew-step__body { margin: var(--space-3) 0 0; max-width: 760px; color: var(--color-fg-soft); font-size: 15.5px; line-height: 1.7; text-wrap: pretty; } /* ── signup ─────────────────────────────────────────────────────────────── */ .md-typeset .brew-signup { display: grid; grid-template-columns: 1fr 480px; gap: var(--space-16); align-items: start; } .md-typeset .brew-signup h2 { margin: 0; max-width: 520px; color: var(--color-fg-default); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; text-wrap: pretty; } .md-typeset .brew-signup__copy p { margin: calc(var(--space-3) + var(--space-1)) 0 0; max-width: 520px; color: var(--color-fg-soft); font-size: var(--font-size-lg); line-height: 1.6; } .md-typeset .brew-form { display: flex; flex-direction: column; gap: var(--space-3); } .md-typeset .brew-form__row { display: flex; gap: var(--space-2); } .md-typeset .brew-input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-bg-raised); color: var(--color-fg-default); font-family: var(--font-family-sans); font-size: var(--font-size-lg); transition: border-color var(--duration-base) var(--brew-ease); } .md-typeset .brew-input::placeholder { color: var(--color-fg-faint); } .md-typeset .brew-input:hover { border-color: var(--color-fg-muted); } .md-typeset .brew-input:focus { outline: none; border-color: var(--color-bg-accent); } /* The failed state the artboards draw: the field itself carries the fault, so the message is not the only signal. Set by signup.js alongside the note. */ .md-typeset .brew-input[aria-invalid="true"] { border-color: var(--color-status-fail); } /* The submitted state the artboards draw: the address stays visible but recedes to a canvas-coloured, default-bordered field that cannot be edited. */ .md-typeset .brew-input:read-only { border-color: var(--color-border-default); background: var(--color-bg-canvas); color: var(--color-fg-muted); } .md-typeset .brew-button { height: 44px; padding: 0 var(--space-5); flex: none; border: 1px solid var(--color-bg-accent); border-radius: var(--radius-control); background: var(--color-bg-accent); color: var(--color-fg-on-accent); font-family: var(--font-family-sans); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); cursor: pointer; transition: background-color var(--duration-base) var(--brew-ease), border-color var(--duration-base) var(--brew-ease); } .md-typeset .brew-button:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-fg-on-accent); text-decoration: none; } .md-typeset .brew-button:disabled { opacity: 0.5; cursor: not-allowed; } .md-typeset .brew-consent { margin: 0; max-width: 440px; color: var(--color-fg-muted); font-size: var(--font-size-sm); line-height: 1.55; } /* No reserved height. The widget is `interaction-only`, so for almost everyone it never renders and a 65px reservation would be permanent dead space. The cost is a layout shift for the minority who are asked to solve something -- worth it, since they are about to be interrupted by a challenge anyway. */ .md-typeset .brew-turnstile:not(:empty) { margin-bottom: var(--space-1); } /* Signed up: the field and the button stay, spent, exactly as the artboards draw the submitted state -- signup.js makes the input read-only and disables the button. The challenge and the consent line go: there is nothing left to consent to, and a live widget would keep solving challenges for a form that can no longer be submitted. */ .md-typeset .brew-form--done .brew-turnstile, .md-typeset .brew-form--done .brew-consent { display: none; } /* Returning after signing up: the whole band goes. Set from an inline script in the , so this applies before first paint rather than flashing the form and removing it. */ :root[data-brew-notified] .md-typeset .brew-band--signup { display: none; } /* Success and failure read the same way as a table row: a mono status word with its shape, then the sentence. */ .md-typeset .brew-note { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; color: var(--color-fg-soft); font-size: var(--font-size-md); line-height: 1.5; } .md-typeset .brew-note[hidden] { display: none; } .md-typeset .brew-note__word { flex: none; font-family: var(--font-family-mono); font-size: 11.5px; font-weight: var(--font-weight-semibold); letter-spacing: 0.04em; white-space: nowrap; } .md-typeset .brew-note--ok .brew-note__word, .md-typeset .brew-note--ok svg { color: var(--color-status-ok); } .md-typeset .brew-note--error .brew-note__word, .md-typeset .brew-note--error svg { color: var(--color-status-fail); } /* ── footer ─────────────────────────────────────────────────────────────── */ .md-typeset .brew-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: auto; padding: var(--space-6) var(--brew-band-x); border-top: 1px solid var(--color-border-default); color: var(--color-fg-muted); font-size: var(--font-size-md); } .md-typeset .brew-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); } .md-typeset .brew-footer__mono { margin-left: auto; font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-fg-faint); } /* Opens the consent dialog, so it is a button rather than a link, but it sits among the footer links and has to read as one. */ .md-typeset .brew-footer__button { appearance: none; background: none; border: 0; padding: 0; font-family: var(--font-family-sans); font-size: var(--font-size-md); color: var(--color-bg-accent); cursor: pointer; transition: color var(--duration-base) var(--brew-ease); } .md-typeset .brew-footer__button:hover { color: var(--color-accent-hover); text-decoration: underline; } /* ── outcome pages ──────────────────────────────────────────────────────── */ /* On the landing page the lockup is not a link -- you are already there. On the pages reached from an email it is, so it doubles as the way back. Theme link styling would underline the wordmark and recolour it. */ .md-typeset a.brew-lockup, .md-typeset a.brew-lockup:hover { color: var(--color-fg-default); text-decoration: none; } .md-typeset .brew-outcome { display: grid; align-content: center; justify-items: start; /* Shorter than the landing hero: the masthead above it is part of the page, so a 60vh block pushed the button under the fold on a laptop. */ min-height: 48vh; max-width: 52ch; padding-top: var(--space-12); } /* The icon sits bare in the accent, with no tile behind it: this system uses rules and hairlines, not tinted chips, and one container level fewer than feels natural. */ .md-typeset .brew-tile { display: block; margin-bottom: var(--space-5); color: var(--color-bg-accent); } .md-typeset .brew-tile svg { width: 28px; height: 28px; } .md-typeset .brew-outcome--warn .brew-tile { color: var(--color-status-warn); } .md-typeset .brew-outcome h1 { margin: 0; color: var(--color-fg-default); font-size: clamp(28px, 4vw, 40px); font-weight: var(--font-weight-semibold); line-height: 1.12; letter-spacing: -0.025em; } .md-typeset .brew-outcome p { margin: var(--space-4) 0 0; color: var(--color-fg-soft); font-size: 16.5px; line-height: 1.65; } /* The outcome pages put the masthead inside the page's own gutter rather than spanning the viewport, so it drops the band treatment and keeps only the lockup. Left as-is it would draw a surface-coloured box with a second gutter inside the one .brew-main already provides. */ .md-typeset .brew-main .brew-masthead { min-height: 0; margin-bottom: var(--space-12); padding: 0; border-bottom: 0; background: none; } .md-typeset .brew-outcome .brew-button, .md-typeset .brew-outcome .brew-form { margin-top: calc(var(--space-6) + var(--space-1)); } /* A column flex container stretches its children, which would run the one button across the whole measure. */ .md-typeset .brew-outcome .brew-form { align-items: flex-start; } .md-typeset .brew-outcome a.brew-button { display: inline-flex; align-items: center; text-decoration: none; } .md-typeset .brew-outcome .brew-note { margin-top: var(--space-4); } .md-typeset .brew-outcome .brew-note svg { flex: none; } /* The same control inside the privacy policy, where the text tells people to use it. Quieter than the signup button it borrows its base styles from. */ .md-typeset .brew-button--quiet { margin: var(--space-1) 0 var(--space-2); display: inline-block; background: none; border-color: var(--color-border-strong); color: var(--color-fg-soft); } .md-typeset .brew-button--quiet:hover:not(:disabled) { background: none; border-color: var(--color-bg-accent); color: var(--color-bg-accent); } /* ── prose pages ────────────────────────────────────────────────────────── */ /* About, contact and privacy are ordinary Markdown wrapped by the template in .brew-main.brew-prose. The masthead remains a full-width child of that shell; every Markdown child below it is centred on a 760px measure. .brew-main already owns the responsive page gutter, so adding horizontal padding here would inset the prose twice and shrink the actual reading measure. No page with this prose treatment renders unwrapped. */ .md-typeset .brew-prose > :not(.brew-masthead) { max-width: 760px; margin-left: auto; margin-right: auto; } .md-typeset .brew-prose > h1 { margin-top: var(--space-16); } .md-typeset .brew-prose > :last-child { margin-bottom: var(--space-16); } .md-typeset .brew-prose > h1 { color: var(--color-fg-default); font-size: clamp(28px, 4vw, 40px); font-weight: var(--font-weight-semibold); line-height: 1.12; letter-spacing: -0.025em; } .md-typeset .brew-prose > h2 { margin-top: var(--space-12); color: var(--color-fg-default); font-size: var(--font-size-2xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.02em; } .md-typeset .brew-prose > h3 { margin-top: var(--space-8); color: var(--color-fg-default); font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); } .md-typeset .brew-prose > p, .md-typeset .brew-prose > ul, .md-typeset .brew-prose > ol { color: var(--color-fg-soft); font-size: 16.5px; line-height: 1.7; } .md-content__inner.md-typeset code { border-radius: var(--radius-control); background: var(--color-bg-selected); color: var(--color-fg-default); font-family: var(--font-family-mono); font-size: var(--font-size-md); } .md-content__inner.md-typeset strong { color: var(--color-fg-default); } /* ── responsive ─────────────────────────────────────────────────────────── */ @media screen and (max-width: 60rem) { .md-typeset .brew-row { grid-template-columns: 64px 1fr; } .md-typeset .brew-row__body { grid-column: 2; } .md-typeset .brew-why { grid-template-columns: 1fr; gap: var(--space-3); } .md-typeset .brew-signup { grid-template-columns: 1fr; gap: var(--space-8); } } /* `rem` in a media query is 16px whatever `html { font-size }` says, so these are 960px, 736px and 544px, not a quarter more. */ @media screen and (max-width: 46rem) { /* Six columns do not fit a phone. Hostname, the magnitude and the verdict are the three that carry the row; the rest go, and the contextual note moves under its status word rather than beside it. */ .md-typeset .brew-col--wide { display: none; } .md-typeset .brew-fleet__table td { white-space: normal; } .md-typeset .brew-status__note { display: block; margin-left: 0; } .md-typeset .brew-meter { width: 36px; } /* A 64px indent is most of a 390px viewport, so the rule moves flush left. */ .md-typeset .brew-steps { margin-left: 0; padding-left: var(--space-5); } .md-typeset .brew-row { grid-template-columns: 1fr; gap: var(--space-2); } .md-typeset .brew-row__body { grid-column: 1; } } @media screen and (max-width: 34rem) { /* The masthead drops to two rows: lockup and state on the first, the eyebrow on its own beneath a hairline, which is how the mobile artboard sets it. */ .md-typeset .brew-masthead { padding-bottom: 0; } .md-typeset .brew-masthead__meta { flex: 1; justify-content: flex-end; } .md-typeset .brew-eyebrow { order: 3; flex-basis: 100%; margin: 0 calc(-1 * var(--brew-band-x)); padding: var(--space-3) var(--brew-band-x); border-top: 1px solid var(--color-border-default); } .md-typeset .brew-form__row { flex-direction: column; } .md-typeset .brew-button { width: 100%; } .md-typeset .brew-footer { gap: var(--space-4); } .md-typeset .brew-footer__mono { margin-left: 0; flex-basis: 100%; } } /* Motion is 120-200ms and ease-out; this removes it entirely for anyone who has asked for that. */ @media (prefers-reduced-motion: reduce) { .md-typeset *, .md-typeset *::before, .md-typeset *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }