/* * Briefly — landing site stylesheet. * * One file for four pages: the landing page, the setup guide, the pricing page and the * privacy policy. They share a header, a footer and a token set, so splitting them would * mean keeping four copies of the same header in step by hand. * * ── The palette is the extension's own ──────────────────────────────────────────────── * * Every colour here is lifted from `src/tokens.css`, not invented for the web. `--bf-blue` * is the extension's `--bf-accent`; `--bf-warn` is the exact amber the product marks an * unsupported claim with. A site whose subject is that the product marks its own failures * has no business drawing that marking in a different amber from the one it is. * * ── Two typefaces, and the split means something ────────────────────────────────────── * * The serif is the DOCUMENT'S voice: it sets quoted source sentences, and nothing else * except display headings. The sans is BRIEFLY'S voice: every claim, label, control and * caption. So on the page where a claim sits beside the sentence it came from, the two are * visibly two different speakers — which is the entire product, expressed in type. * * Both are system stacks. Nothing here is fetched: not a font, not a beacon, not a CDN. * * ── Theme ───────────────────────────────────────────────────────────────────────────── * * `data-bf-theme` on is the resolved theme ("light" or "dark"); `data-bf-theme-choice` * records what the user picked, which may be "auto". script.js owns both, and nothing here * reads prefers-color-scheme directly, so the toggle wins in every direction. */ :root { /* Neutrals — the extension's four-step ramp, opened out for a full-width page. */ --bf-bg: #fcfcfe; --bf-surface: #ffffff; --bf-surface-2: #f5f6fa; --bf-surface-3: #eceef5; --bf-border: #e3e6ef; --bf-border-strong: #cfd4e2; --bf-text: #0b0d12; --bf-heading: #05070c; --bf-muted: #5a6375; /* Semantic — all four are `src/tokens.css` values, unchanged. */ --bf-blue: #2f5cff; --bf-blue-hover: #2449d8; --bf-blue-deep: #1a3ab0; --bf-success: #15803d; /* * A second green, for green *text*. The icon green is fine as a graphic — a check mark * only has to clear 3:1 — and it is a WCAG AA failure the moment the same colour carries * a word on a tinted surface. Every place the palette says "yes" in words uses this one. */ --bf-success-text: #0f6b31; --bf-warn: #a5560a; --bf-warn-text: #8a4708; --bf-danger: #b91c1c; --bf-info: #0369a1; /* Tints for status grounds. Low enough that the colour drawn on top still clears 4.5:1. */ --bf-tint: 8%; --bf-tint-soft: 5%; --bf-link: #2449d8; --bf-link-hover: #1a3ab0; --bf-shadow: 0 22px 60px rgba(16, 24, 64, 0.11); --bf-shadow-soft: 0 12px 34px rgba(16, 24, 64, 0.07); --bf-shadow-inset: inset 0 0 0 1px var(--bf-border); --bf-radius: 16px; --bf-radius-sm: 10px; --bf-radius-lg: 22px; --bf-container: 1220px; --bf-header-h: 70px; --bf-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; --bf-serif: ui-serif, 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif; --bf-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; } .bf-page[data-bf-theme='dark'] { --bf-bg: #0a0b0e; --bf-surface: #121419; --bf-surface-2: #171a20; --bf-surface-3: #1e222a; --bf-border: #262b34; --bf-border-strong: #39404d; --bf-text: #f4f5f7; --bf-heading: #ffffff; --bf-muted: #a4abba; --bf-blue: #6b8cff; --bf-blue-hover: #8aa3ff; --bf-blue-deep: #3f5fe6; --bf-success: #4ade80; --bf-success-text: #4ade80; --bf-warn: #f0a742; /* On the dark ground the icon colour already clears AA as text; no second value needed. */ --bf-warn-text: #f0a742; --bf-danger: #f87171; --bf-info: #38bdf8; --bf-tint: 14%; --bf-tint-soft: 9%; --bf-link: #8aa3ff; --bf-link-hover: #adbdff; --bf-shadow: 0 22px 60px rgba(0, 0, 0, 0.44); --bf-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } .bf-page { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bf-bg); color: var(--bf-text); font-family: var(--bf-sans); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* * The page ground carries two very faint washes, one at each shoulder. They are the only * decorative colour on the site — everything else that is coloured is a signal. */ .bf-page::before { content: ''; position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none; background: radial-gradient(circle at 14% 0%, rgba(47, 92, 255, 0.09), transparent 26rem), radial-gradient(circle at 86% 4%, rgba(47, 92, 255, 0.05), transparent 24rem); } .bf-page[data-bf-theme='dark']::before { background: radial-gradient(circle at 14% 0%, rgba(107, 140, 255, 0.16), transparent 26rem), radial-gradient(circle at 86% 4%, rgba(107, 140, 255, 0.08), transparent 24rem); } /* * A reset, so it must not win anything. * * Every button on this site is an ``. Written as `.bf-page a` this rule scores (0,1,1) * and quietly beats `.bf-button-primary` at (0,1,0) — which rendered the primary buttons * with the page's near-black text colour on a blue fill in light mode, and looked fine in * dark mode only because the inherited colour there happens to be light. `:where()` scores * zero, which is what a reset should have scored from the start. */ :where(.bf-page a) { color: inherit; text-decoration: none; } :where(.bf-page img, .bf-page svg) { display: block; } .bf-page :focus-visible { outline: 3px solid var(--bf-blue); outline-offset: 3px; border-radius: 6px; } .bf-svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .bf-container { width: min(calc(100% - 48px), var(--bf-container)); margin-inline: auto; } /* Reachable by keyboard, invisible until it has focus. */ .bf-skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 20px; border-radius: 10px; color: #ffffff; background: var(--bf-blue-deep); font-weight: 800; transition: top 0.2s ease; } .bf-skip:focus { top: 16px; } /* ─────────────────────────────────────────────────────────────────────── type scale ── */ /* * Resets, so they must not win anything — `:where()` scores zero. * * Written as `.bf-page h2` this rule scores (0,1,1) and beats any single-class component * rule at (0,1,0). That is not hypothetical: it silently ate `margin-inline: auto` on * `.bf-copyright`, which then sat flush against the left edge of the page while the footer * columns above it were centred; and `margin-top` on `.bf-scroll-hint`, `.bf-source-note` * and both `.bf-gap-sm` headings. One mistake, four wrong spacings, none of them obvious * until something is measured or somebody looks at the footer. */ :where(.bf-page h1, .bf-page h2, .bf-page h3, .bf-page h4) { color: var(--bf-heading); margin: 0; text-wrap: balance; } .bf-page h1 { font-family: var(--bf-serif); font-size: clamp(2.3rem, 1.3rem + 3.1vw, 3.5rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.022em; } .bf-page h2 { font-family: var(--bf-serif); font-size: clamp(1.75rem, 1.2rem + 1.7vw, 2.4rem); font-weight: 600; line-height: 1.16; letter-spacing: -0.018em; } .bf-page h3 { font-size: 1.125rem; font-weight: 680; line-height: 1.32; letter-spacing: -0.008em; } :where(.bf-page p) { margin: 0; } .bf-eyebrow { display: inline-flex; /* Top, not centre: on a phone this label wraps to two lines, and an icon floating halfway down the pair reads as a mistake. */ align-items: flex-start; gap: 8px; margin: 0; color: var(--bf-blue); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; } .bf-eyebrow svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } .bf-lede { max-width: 62ch; color: var(--bf-muted); font-size: 1.0625rem; } .bf-section-head { display: flex; flex-direction: column; gap: 14px; max-width: 64ch; margin-bottom: 44px; } /* ───────────────────────────────────────────────────────────────────────── controls ── */ .bf-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border: 1px solid transparent; border-radius: 12px; font-size: 0.9375rem; font-weight: 680; letter-spacing: -0.006em; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .bf-button svg { width: 18px; height: 18px; flex: none; } .bf-button-primary { /* * Deliberately NOT `--bf-blue`. In dark mode the link colour is light (#6b8cff) and white * on it is 3.08:1 — under the floor. The extension splits the same two tokens for the * same reason, and its buttons carry white labels in both themes. */ background: var(--bf-blue-deep); color: #ffffff; } .bf-page[data-bf-theme='light'] .bf-button-primary, .bf-page:not([data-bf-theme='dark']) .bf-button-primary { background: var(--bf-blue); } .bf-button-primary:hover { background: var(--bf-blue-hover); transform: translateY(-1px); } .bf-page[data-bf-theme='dark'] .bf-button-primary:hover { background: #4664ea; } .bf-button-secondary { background: var(--bf-surface); border-color: var(--bf-border-strong); color: var(--bf-text); } .bf-button-secondary:hover { border-color: var(--bf-blue); color: var(--bf-blue); transform: translateY(-1px); } .bf-button-quiet { padding: 10px 16px; background: transparent; border-color: var(--bf-border); color: var(--bf-muted); font-size: 0.875rem; } .bf-button-quiet:hover { border-color: var(--bf-border-strong); color: var(--bf-text); } .bf-actions { display: flex; flex-wrap: wrap; gap: 12px; } .bf-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--bf-border); border-radius: 11px; background: var(--bf-surface); color: var(--bf-muted); cursor: pointer; transition: color 0.16s ease, border-color 0.16s ease; } .bf-icon-button svg { width: 19px; height: 19px; } .bf-icon-button:hover { border-color: var(--bf-border-strong); color: var(--bf-text); } .bf-pill { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: color-mix(in srgb, var(--bf-blue) var(--bf-tint-soft), var(--bf-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-blue) 22%, transparent); color: var(--bf-blue); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; } .bf-pill svg { width: 14px; height: 14px; } .bf-pill-free { background: color-mix(in srgb, var(--bf-success) var(--bf-tint-soft), var(--bf-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-success) 26%, transparent); color: var(--bf-success-text); } /* ─────────────────────────────────────────────────────────────────────────── header ── */ .bf-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(14px); background: color-mix(in srgb, var(--bf-bg) 86%, transparent); border-bottom: 1px solid var(--bf-border); } .bf-header-inner { display: flex; align-items: center; gap: 24px; height: var(--bf-header-h); } .bf-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; } .bf-brand img { border-radius: 9px; } /* The mark and the name, and nothing else. The tagline earns its place in the copy. */ .bf-brand-name { font-size: 1.125rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.018em; color: var(--bf-heading); } .bf-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; } .bf-nav a { padding: 8px 12px; border-radius: 9px; color: var(--bf-muted); font-size: 0.9375rem; font-weight: 560; transition: color 0.16s ease; } .bf-nav a:hover, .bf-nav a.is-active { color: var(--bf-text); background: var(--bf-surface-2); } .bf-header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .bf-header-cta { padding: 10px 17px; font-size: 0.875rem; } .bf-menu-toggle { display: none; } .bf-mobile-nav { border-top: 1px solid var(--bf-border); background: var(--bf-surface); padding-block: 12px 18px; max-height: calc(100vh - var(--bf-header-h)); max-height: calc(100dvh - var(--bf-header-h)); overflow-y: auto; /* Reaching the end of the sheet must not start scrolling the page behind it. */ overscroll-behavior: contain; } .bf-mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .bf-mobile-nav a { display: block; padding: 13px 12px; border-radius: 10px; color: var(--bf-text); font-weight: 600; } .bf-mobile-nav a:hover { background: var(--bf-surface-2); } .bf-mobile-nav .bf-button { margin-top: 8px; width: 100%; color: #ffffff; } /* ───────────────────────────────────────────────────────────────────────────── hero ── */ .bf-hero { position: relative; padding-block: 72px 84px; } .bf-hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); align-items: center; gap: 52px; } .bf-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .bf-hero-copy h1 span { display: block; color: var(--bf-blue); } .bf-hero-text { max-width: 46ch; color: var(--bf-muted); font-size: 1.125rem; } .bf-trust-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 0; color: var(--bf-muted); font-size: 0.875rem; } .bf-trust-list li { display: inline-flex; align-items: center; gap: 7px; } .bf-trust-list svg { width: 16px; height: 16px; flex: none; color: var(--bf-success); } /* ────────────────────────────────────────────────────────────── the anchoring demo ── */ /* * The product, rendered rather than photographed. * * Left: what Briefly says, in the sans. Right: the article, in the serif. Selecting a claim * lights the sentence it was taken from — which is exactly what clicking a claim does in the * extension, where the real page scrolls to the real sentence. * * Three things are deliberate: * * - The third claim is UNSUPPORTED, and it lights nothing. A demo that only shows the happy * path is advertising a different product from the one that ships. * - It renders complete and correct with no JavaScript: claim 1 is marked active in the * markup and its sentence carries `is-lit` there too. The script only moves the state on. * - Under `prefers-reduced-motion` the script never starts, so it stays exactly there. */ .bf-demo { margin: 0; border-radius: var(--bf-radius-lg); background: var(--bf-surface); box-shadow: var(--bf-shadow), var(--bf-shadow-inset); overflow: hidden; } .bf-demo-bar { display: flex; align-items: center; gap: 10px; padding: 15px 22px; border-bottom: 1px solid var(--bf-border); color: var(--bf-muted); font-size: 0.8125rem; } .bf-demo-bar img { border-radius: 6px; } .bf-demo-bar strong { color: var(--bf-text); font-weight: 680; } .bf-demo-url { margin-left: auto; font-family: var(--bf-mono); font-size: 0.75rem; color: var(--bf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bf-demo-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bf-demo-pane { padding: 22px; min-width: 0; } /* A hairline, and nothing else. The column labels and the typeface do the separating. */ .bf-demo-pane + .bf-demo-pane { border-left: 1px solid var(--bf-border); } .bf-demo-label { display: flex; align-items: center; gap: 7px; margin-bottom: 16px; color: var(--bf-muted); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; } .bf-demo-label svg { width: 14px; height: 14px; } .bf-claim-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; } /* * The claim card, matching `.bf-claim` in the extension's own tokens.css: one depth, no * border, stepped up onto a surface, and the unsupported state carried on four independent * channels — the word, the icon, the solid left edge and the tinted ground. */ .bf-claim-card { display: flex; flex-direction: column; gap: 9px; width: 100%; padding: 13px 14px; border: 0; border-radius: 12px; background: var(--bf-surface-2); color: inherit; font: inherit; text-align: left; transition: background 0.18s ease, box-shadow 0.18s ease; } button.bf-claim-card { cursor: pointer; } .bf-claim-card[data-bf-state='active'] { background: color-mix(in srgb, var(--bf-blue) var(--bf-tint), var(--bf-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bf-blue) 34%, transparent); } .bf-claim-text { margin: 0; font-size: 0.9375rem; line-height: 1.5; overflow-wrap: anywhere; } .bf-claim-meta { display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; color: var(--bf-muted); } .bf-mark { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; } .bf-mark svg { width: 13px; height: 13px; } .bf-mark-supported { color: var(--bf-muted); font-weight: 620; } .bf-mark-unsupported { color: var(--bf-warn-text); } .bf-claim-card[data-supported='false'] { background: color-mix(in srgb, var(--bf-warn) var(--bf-tint), var(--bf-surface)); box-shadow: inset 4px 0 0 0 var(--bf-warn); padding-left: 16px; } .bf-claim-card[data-supported='false'][data-bf-state='active'] { box-shadow: inset 4px 0 0 0 var(--bf-warn), inset 0 0 0 1px color-mix(in srgb, var(--bf-warn) 34%, transparent); } .bf-claim-why { margin: 0; color: var(--bf-warn-text); font-size: 0.75rem; line-height: 1.45; } .bf-reveal { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; /* 11px on the blue-tinted active card: --bf-blue is 4.42:1 there, --bf-link clears it. */ color: var(--bf-link); font-weight: 640; } .bf-reveal svg { width: 12px; height: 12px; } /* The article pane. The serif is doing work here: this is the document talking. */ .bf-source { display: flex; flex-direction: column; gap: 13px; margin: 0; font-family: var(--bf-serif); font-size: 0.9375rem; line-height: 1.72; color: var(--bf-muted); } .bf-source p { margin: 0; transition: background 0.22s ease, color 0.22s ease; border-radius: 5px; } .bf-source p.is-lit { /* The same band the extension paints over the sentence in the real page. */ background: color-mix(in srgb, var(--bf-blue) 20%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bf-blue) 20%, transparent); color: var(--bf-text); } .bf-source-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bf-border); font-family: var(--bf-sans); font-size: 0.75rem; line-height: 1.5; color: var(--bf-muted); } .bf-source-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--bf-warn); } /* ────────────────────────────────────────────────────────────────────────── sections ── */ .bf-section { padding-block: 84px; /* Clears the 70px sticky header when the nav jumps here. */ scroll-margin-top: calc(var(--bf-header-h) + 16px); } .bf-section-alt { background: var(--bf-surface-2); border-block: 1px solid var(--bf-border); } .bf-section-tight { padding-block: 56px; } .bf-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .bf-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .bf-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .bf-card { display: flex; flex-direction: column; gap: 11px; padding: 24px; border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-section-alt .bf-card { background: var(--bf-bg); } .bf-card p { color: var(--bf-muted); font-size: 0.9375rem; } .bf-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: color-mix(in srgb, var(--bf-blue) var(--bf-tint), var(--bf-surface-2)); color: var(--bf-blue); } .bf-card-icon svg { width: 19px; height: 19px; } /* ────────────────────────────────────────────────────────────────── numbered process ── */ /* * Numbered because the content IS a sequence — each step is only possible once the one * before it has happened, and the order is the argument. Numbering anything else would be * decoration wearing the clothes of structure. */ .bf-steps { counter-reset: bf-step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .bf-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-section-alt .bf-step { background: var(--bf-bg); } .bf-step::before { counter-increment: bf-step; content: counter(bf-step, decimal-leading-zero); font-family: var(--bf-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--bf-blue); } .bf-step p { color: var(--bf-muted); font-size: 0.9375rem; } .bf-step-meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bf-border); color: var(--bf-muted); font-size: 0.75rem; } /* ───────────────────────────────────────────────────────────────────────── refusals ── */ /* * Each card takes the icon of its own subject, with one small struck badge marking it as a * refusal. The badge repeats; the icon distinguishes. Six identical prohibition glyphs turn * the icon column into a texture rather than a signpost. */ .bf-refusals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .bf-refusal { display: flex; gap: 15px; padding: 22px; border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-section-alt .bf-refusal { background: var(--bf-bg); } .bf-refusal-mark { position: relative; flex: none; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--bf-surface-2); color: var(--bf-muted); } .bf-section-alt .bf-refusal-mark { background: var(--bf-surface-3); } .bf-refusal-mark > svg { width: 19px; height: 19px; } .bf-refusal-mark .bf-refusal-badge { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 999px; padding: 2px; background: var(--bf-surface); color: var(--bf-danger); } .bf-section-alt .bf-refusal-mark .bf-refusal-badge { background: var(--bf-bg); } .bf-refusal h3 { margin-bottom: 6px; } .bf-refusal p { color: var(--bf-muted); font-size: 0.875rem; } /* ──────────────────────────────────────────────────────────────── providers and models ── */ .bf-provider-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .bf-provider { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--bf-radius-sm); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-section-alt .bf-provider { background: var(--bf-bg); } .bf-provider-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .bf-provider-head strong { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.008em; } .bf-provider-count { font-family: var(--bf-mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--bf-muted); white-space: nowrap; } .bf-provider p { color: var(--bf-muted); font-size: 0.8125rem; line-height: 1.5; } .bf-provider .bf-pill { margin-top: auto; } .bf-count-strip { display: flex; flex-wrap: wrap; gap: 28px 44px; padding: 26px 30px; margin-bottom: 34px; border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-section-alt .bf-count-strip { background: var(--bf-bg); } .bf-count { display: flex; flex-direction: column; gap: 2px; } .bf-count b { font-family: var(--bf-serif); font-size: 2.1rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--bf-heading); } .bf-count span { color: var(--bf-muted); font-size: 0.8125rem; } /* ───────────────────────────────────────────────────────────────────────── callouts ── */ .bf-note { display: flex; gap: 13px; padding: 18px 20px; border-radius: var(--bf-radius-sm); background: color-mix(in srgb, var(--bf-info) var(--bf-tint-soft), var(--bf-surface)); box-shadow: inset 3px 0 0 0 var(--bf-info); font-size: 0.9375rem; line-height: 1.55; } .bf-note > svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--bf-info); } .bf-note strong { color: var(--bf-heading); } .bf-note-warn { background: color-mix(in srgb, var(--bf-warn) var(--bf-tint-soft), var(--bf-surface)); box-shadow: inset 3px 0 0 0 var(--bf-warn); } .bf-note-warn > svg { color: var(--bf-warn); } .bf-note-good { background: color-mix(in srgb, var(--bf-success) var(--bf-tint-soft), var(--bf-surface)); box-shadow: inset 3px 0 0 0 var(--bf-success); } .bf-note-good > svg { color: var(--bf-success); } /* ────────────────────────────────────────────────────────────────────────── pricing ── */ .bf-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; } .bf-plan { display: flex; flex-direction: column; gap: 16px; padding: 30px; border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-section-alt .bf-plan { background: var(--bf-bg); } .bf-plan-featured { box-shadow: inset 0 0 0 1.5px var(--bf-blue), var(--bf-shadow-soft); } .bf-plan-lead, .bf-plan > p:not([class]) { color: var(--bf-muted); font-size: 0.9375rem; } .bf-plan-price { display: flex; align-items: baseline; gap: 8px; font-family: var(--bf-serif); font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--bf-heading); } .bf-plan-price small { font-family: var(--bf-sans); font-size: 0.875rem; font-weight: 500; color: var(--bf-muted); } .bf-plan-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; font-size: 0.9375rem; color: var(--bf-muted); } .bf-plan-list li { display: flex; gap: 10px; } .bf-plan-list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--bf-success); } .bf-plan .bf-button { margin-top: auto; } .bf-cycles { display: grid; grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); gap: 8px; } .bf-cycle { display: flex; flex-direction: column; gap: 1px; padding: 14px 15px; border-radius: var(--bf-radius-sm); background: var(--bf-surface-2); box-shadow: inset 0 0 0 1px var(--bf-border); } .bf-section-alt .bf-cycle { background: var(--bf-surface-3); } .bf-cycle-name { color: var(--bf-muted); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } .bf-cycle-price { font-family: var(--bf-serif); font-size: 1.625rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.018em; font-variant-numeric: tabular-nums; color: var(--bf-heading); } .bf-cycle-note { color: var(--bf-muted); font-size: 0.75rem; line-height: 1.4; } /* The saving is arithmetic over the two real prices, so it is allowed to look like a fact. */ .bf-cycle-save { color: var(--bf-success-text); font-weight: 640; } /* ────────────────────────────────────────────────────────────────────────────── FAQ ── */ .bf-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .bf-faq-item { border-radius: var(--bf-radius-sm); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); overflow: hidden; } .bf-section-alt .bf-faq-item { background: var(--bf-bg); } .bf-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 20px; cursor: pointer; font-weight: 640; list-style: none; } .bf-faq-item summary::-webkit-details-marker { display: none; } .bf-faq-item summary::after { content: '+'; flex: none; font-family: var(--bf-mono); font-size: 1.1rem; color: var(--bf-blue); } .bf-faq-item[open] summary::after { content: '\2212'; } .bf-faq-answer { padding: 0 20px 20px; color: var(--bf-muted); font-size: 0.9375rem; } .bf-faq-answer p + p { margin-top: 10px; } /* ───────────────────────────────────────────────────────────────── document pages ── */ /* * The setup guide, the pricing terms and the privacy policy share this layout: a sticky * table of contents beside a single measured column. The column is capped at 68ch — a * policy nobody can read is a policy nobody has agreed to. */ .bf-doc-hero { padding-block: 56px 36px; } .bf-doc-hero h1 { margin-block: 14px 16px; } .bf-doc-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; color: var(--bf-muted); font-size: 0.8125rem; } .bf-doc-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-bottom: 88px; align-items: start; } .bf-doc-toc { position: sticky; top: calc(var(--bf-header-h) + 22px); padding: 18px; border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-toc-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; } .bf-toc-summary::-webkit-details-marker { display: none; } .bf-doc-toc h2 { font-family: var(--bf-sans); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bf-muted); } /* * Wide enough for the sidebar, the fold is not a control — it is always open and the * marker would be an affordance for something nobody needs to do. */ .bf-toc-summary { pointer-events: none; } .bf-toc-links { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; } .bf-doc-toc a { padding: 7px 10px; border-radius: 8px; color: var(--bf-muted); font-size: 0.875rem; font-weight: 540; line-height: 1.35; } .bf-doc-toc a:hover, .bf-doc-toc a.is-active { background: var(--bf-surface-2); color: var(--bf-text); } .bf-doc-body { max-width: 68ch; min-width: 0; } .bf-doc-body section { padding-top: 20px; margin-bottom: 52px; scroll-margin-top: calc(var(--bf-header-h) + 22px); } .bf-doc-body h2 { font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem); margin-bottom: 16px; } .bf-doc-body h3 { margin-block: 30px 10px; } .bf-doc-body p, .bf-doc-body ul, .bf-doc-body ol { color: var(--bf-muted); font-size: 1rem; } .bf-doc-body p + p, .bf-doc-body p + ul, .bf-doc-body p + ol, .bf-doc-body ul + p, .bf-doc-body ol + p { margin-top: 14px; } .bf-doc-body ul, .bf-doc-body ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; } .bf-doc-body strong { color: var(--bf-text); } .bf-doc-body a:not(.bf-button) { color: var(--bf-link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .bf-doc-body a:not(.bf-button):hover { color: var(--bf-link-hover); } .bf-doc-body > section > .bf-note, .bf-doc-body > section > .bf-table-scroll, .bf-doc-body > section > .bf-steps-vertical, .bf-doc-body > section > .bf-keyrow, .bf-doc-body > section > .bf-code { margin-top: 18px; } .bf-code { padding: 14px 16px; border-radius: var(--bf-radius-sm); background: var(--bf-surface-3); color: var(--bf-text); font-family: var(--bf-mono); font-size: 0.8125rem; line-height: 1.6; overflow-x: auto; white-space: pre; } code.bf-inline { padding: 2px 6px; border-radius: 5px; background: var(--bf-surface-3); font-family: var(--bf-mono); font-size: 0.85em; color: var(--bf-text); } /* Vertical numbered steps, for the setup guide's per-provider walkthroughs. */ .bf-steps-vertical { counter-reset: bf-vstep; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .bf-steps-vertical li { position: relative; padding: 0 0 20px 40px; color: var(--bf-muted); } .bf-steps-vertical li::before { counter-increment: bf-vstep; content: counter(bf-vstep); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--bf-blue) var(--bf-tint), var(--bf-surface-2)); color: var(--bf-blue); font-family: var(--bf-mono); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; } /* The connecting rule stops at the last item, which has nothing to connect to. */ .bf-steps-vertical li:not(:last-child)::after { content: ''; position: absolute; left: 13px; top: 30px; bottom: 4px; width: 1px; background: var(--bf-border); } .bf-steps-vertical li:last-child { padding-bottom: 0; } /* ───────────────────────────────────────────────────────────────────────── tables ── */ /* * Wide tables scroll inside their own container rather than widening the page. That is an * invisible affordance, so `.bf-scroll-hint` says so in words on a narrow screen. */ .bf-table-scroll { overflow-x: auto; border-radius: var(--bf-radius-sm); box-shadow: var(--bf-shadow-inset); } .bf-table { width: 100%; min-width: 620px; border-collapse: collapse; background: var(--bf-surface); font-size: 0.875rem; } .bf-section-alt .bf-table { background: var(--bf-bg); } .bf-table th, .bf-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bf-border); } .bf-table thead th { background: var(--bf-surface-2); color: var(--bf-muted); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .bf-table tbody tr:last-child th, .bf-table tbody tr:last-child td { border-bottom: 0; } .bf-table tbody th { font-weight: 680; color: var(--bf-text); white-space: nowrap; } .bf-table td { color: var(--bf-muted); } .bf-table .bf-num { font-family: var(--bf-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .bf-table code { font-family: var(--bf-mono); font-size: 0.8125rem; color: var(--bf-text); white-space: nowrap; } .bf-scroll-hint { display: none; margin-top: 10px; color: var(--bf-muted); font-size: 0.8125rem; } /* ───────────────────────────────────────────────────────────────────────── install ── */ .bf-install-card { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 660px; margin-inline: auto; padding: 42px 34px; border-radius: var(--bf-radius-lg); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); text-align: center; } .bf-section-alt .bf-install-card { background: var(--bf-bg); } .bf-install-card p { max-width: 54ch; color: var(--bf-muted); } .bf-support { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 30px 34px; border-radius: var(--bf-radius); background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); } .bf-support p { max-width: 52ch; margin-top: 8px; color: var(--bf-muted); } /* ───────────────────────────────────────────────────────────────────────── footer ── */ .bf-footer { position: relative; padding-block: 56px 26px; border-top: 1px solid var(--bf-border); background: var(--bf-surface-2); } .bf-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 36px; } .bf-footer-brand p { margin-top: 14px; max-width: 42ch; color: var(--bf-muted); font-size: 0.875rem; } .bf-footer-links, .bf-footer-install { display: flex; flex-direction: column; gap: 10px; } .bf-footer h2 { font-family: var(--bf-sans); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--bf-muted); } .bf-footer-links a { color: var(--bf-muted); font-size: 0.875rem; } .bf-footer-links a:hover { color: var(--bf-text); } /* * The status card. It was an `` pointing at the install section; with that section gone * and no store listing to replace it, there is nowhere for it to go — and a link that * lands you back where you started is worse than no link. It states the fact instead. */ .bf-footer-install a, .bf-footer-status { margin: 0; display: inline-flex; align-items: center; gap: 11px; padding: 12px 16px; border-radius: 12px; background: var(--bf-surface); box-shadow: var(--bf-shadow-inset); color: var(--bf-text); font-size: 0.8125rem; font-weight: 620; line-height: 1.3; } .bf-footer-install svg, .bf-footer-status svg { width: 22px; height: 22px; flex: none; } .bf-copyright { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 22px; border-top: 1px solid var(--bf-border); width: min(calc(100% - 48px), var(--bf-container)); margin-inline: auto; color: var(--bf-muted); font-size: 0.8125rem; } .bf-copyright a { color: var(--bf-link); } .bf-scroll-top { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--bf-border); border-radius: 999px; background: var(--bf-surface); color: var(--bf-text); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; box-shadow: var(--bf-shadow-soft); } .bf-scroll-top svg { width: 19px; height: 19px; } .bf-scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* ───────────────────────────────────────────────────────────────────────── reveals ── */ [data-bf-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; } [data-bf-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .bf-page *, .bf-page *::before, .bf-page *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } [data-bf-reveal] { opacity: 1; transform: none; } } /* ─────────────────────────────────────────────────────────────────────── utilities ── */ /* * Three spacing utilities and no more. They exist so that no page carries an inline style: * the stylesheet stays the only place a spacing value appears, which is the same rule the * extension's own tokens.css holds over the product. */ .bf-gap-top { margin-top: 22px; } .bf-gap-top-sm { margin-top: 18px; } .bf-gap-sm { margin-top: 12px; } /* * A heading that exists for structure rather than for the eye. `aria-labelledby` needs * something to point at, and a section whose name is already obvious from the cards beneath * it does not need that name repeated in 2.4rem serif. */ .bf-sr-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════════ responsive ══ * * Additive and deliberately last, so each block wins on order without anything above it * needing to be edited. Checked by measurement across four pages and twelve widths from * 320 to 1920 in both themes: no horizontal overflow, no text under 11px, no tap target * under 40px, and no grid left with an unfilled row. */ @media (max-width: 1080px) { .bf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .bf-hero { padding-block: 52px 64px; } .bf-grid-4, .bf-steps, .bf-provider-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bf-doc-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .bf-doc-toc { position: static; } /* Below the sidebar breakpoint it becomes a real control, and script.js folds it shut. */ .bf-toc-summary { pointer-events: auto; cursor: pointer; min-height: 40px; } .bf-toc-summary::after { content: '+'; font-family: var(--bf-mono); font-size: 1.1rem; line-height: 1; color: var(--bf-blue); } .bf-toc-fold[open] .bf-toc-summary::after { content: '\2212'; } } @media (max-width: 980px) { .bf-nav { display: none; } .bf-menu-toggle { display: inline-flex; } .bf-header-inner { justify-content: space-between; } } @media (max-width: 900px) { .bf-section { padding-block: 64px; } .bf-grid-3, .bf-refusals { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bf-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } /* Every tap target reaches 44px once there is a thumb on the screen. */ .bf-button, .bf-icon-button, .bf-faq-item summary { min-height: 44px; } /* * Every link that is its own row — nav, table of contents, footer column, brand — gets a * 40px box once there is a thumb on the screen. A 22px footer link is a target you hit * on the third try. * * Links inside a sentence are deliberately NOT in this list. Growing an inline link to * 40px would break the line it sits in, and WCAG exempts them for exactly that reason. */ .bf-nav a, .bf-doc-toc a, .bf-footer-links a, .bf-copyright > a, .bf-brand { min-height: 40px; display: flex; align-items: center; } /* Each row is its own 40px box now, so the gap between them can come back down. */ .bf-footer-links { gap: 2px; } } @media (max-width: 760px) { /* * The demo stacks. Side by side at this width the article column is about 22 characters * wide, which is a column of hyphens rather than a document. */ .bf-demo-body { grid-template-columns: minmax(0, 1fr); } .bf-demo-pane + .bf-demo-pane { border-left: 0; border-top: 1px solid var(--bf-border); } .bf-demo-url { display: none; } } @media (max-width: 700px) { .bf-table-scroll { overflow-x: visible; } .bf-table { min-width: 0; } .bf-table thead { /* `display: none` on a row group also removes it from the accessibility tree, which is correct here: the labels it carried are re-attached to each cell below. */ display: none; } .bf-table tbody, .bf-table tr, .bf-table th, .bf-table td { display: block; } .bf-table tbody tr { padding: 16px; border-bottom: 1px solid var(--bf-border); } .bf-table tbody tr:last-child { border-bottom: 0; } .bf-table tbody th { padding: 0 0 10px; border-bottom: 0; font-size: 1rem; white-space: normal; } .bf-table td { display: flex; gap: 12px; padding: 5px 0 0; border-bottom: 0; } .bf-table td::before { content: attr(data-label); flex: 0 0 38%; padding-top: 2px; color: var(--bf-muted); font-size: 0.6875rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; } /* A model id is long and unbreakable; in a 62% column it has to be allowed to wrap. */ .bf-table code { white-space: normal; overflow-wrap: anywhere; } .bf-faq, .bf-plans, .bf-grid-2 { grid-template-columns: minmax(0, 1fr); } .bf-support { flex-direction: column; align-items: flex-start; } } @media (max-width: 620px) { .bf-container, .bf-copyright { width: calc(100% - 36px); } .bf-grid-3, .bf-grid-4, .bf-steps, .bf-refusals, .bf-provider-grid, .bf-footer-grid { grid-template-columns: minmax(0, 1fr); } .bf-section { padding-block: 52px; } .bf-section-head { margin-bottom: 30px; } .bf-hero { padding-block: 36px 52px; } /* The call to action lands above the fold at 320px, the narrowest width this is checked at. */ .bf-actions { width: 100%; flex-direction: column; } .bf-actions .bf-button { width: 100%; } /* * Hidden rather than shrunk to its icon. A 44px blue square with an unlabelled glyph is * not a call to action — nobody can tell what it does. The menu sheet carries the same * destination as a full-width labelled button, and the hero's own CTA is a thumb-flick * below the fold. */ .bf-header-cta { display: none; } /* Four counts in a wrapping row came out as a 249px column. Two by two halves it. */ .bf-count-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; padding: 20px 22px; } /* Three chips in a two-column grid leave a hole, which reads as content that failed. */ .bf-cycles { grid-template-columns: minmax(0, 1fr); } .bf-plan, .bf-install-card, .bf-support { padding: 24px 20px; } .bf-scroll-hint { display: block; } .bf-scroll-top { right: 14px; bottom: 14px; } }