/* ---------- Design tokens (authoritative; mirror Avalonia app) ---------- Three theme states: - Dark (default on `:root`) — original brand palette - Light via OS preference — `@media (prefers-color-scheme: light)` applies when no explicit override - Explicit light — `:root[data-site-theme="light"]` - Explicit dark (override OS-light) — `:root[data-site-theme="dark"]` `/js/site-theme.js` writes the `data-site-theme` attribute synchronously in before paint, so there's no flash. `localStorage.ffb-site-theme` holds `auto` / `light` / `dark`. */ :root { --bg: #0E1013; --section-bg: #13161A; --card: #15181D; --card-hover: #1E232A; --well: #0A0C0F; --border: #24292F; --hairline: #1C2027; --text-primary: #E7EAEE; --text-dim: #AEB4BD; --text-mute: #7A8089; --text-faint: #565B63; --brand: #4F9CFF; --brand-hover: #68ADFF; --brand-on-fill: #0A1628; --brand-soft: rgba(79, 156, 255, 0.4); --signal: #E8B53C; --beta: #7B61FF; --ok: #6CC66B; --err: #E86B6B; /* Theme-sensitive overlays that need to flip with the palette. `--nav-bg` is the translucent sticky nav; `--hover-wash` is the subtle hover-tint used on text links in compact lists (docs sidebar, list rows). */ --nav-bg: rgba(10, 12, 15, 0.9); --hover-wash: rgba(255, 255, 255, 0.03); --max: 1100px; --pad-v: 96px; --pad-v-mob: 64px; --nav-h: 64px; --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; color-scheme: dark; } /* Auto mode — follow OS when the user hasn't explicitly picked. `:not([data-site-theme="dark"])` keeps explicit dark-on-light-OS working. */ @media (prefers-color-scheme: light) { :root:not([data-site-theme="dark"]) { --bg: #FBFCFD; --section-bg: #F3F5F8; --card: #FFFFFF; --card-hover: #EEF1F5; --well: #F7F9FB; --border: #DDE2E8; --hairline: #E7EAEE; --text-primary: #0F172A; --text-dim: #475569; --text-mute: #64748B; --text-faint: #94A3B8; /* Brand stays — accessible-enough on white at body-text size for large accents; matches the app's identity across themes. */ --brand-on-fill: #FFFFFF; --brand-soft: rgba(79, 156, 255, 0.28); --signal: #B7860B; --beta: #6D28D9; --ok: #15803D; --err: #B91C1C; --nav-bg: rgba(251, 252, 253, 0.9); --hover-wash: rgba(15, 23, 42, 0.045); color-scheme: light; } } /* Explicit user override — wins over OS preference. */ :root[data-site-theme="light"] { --bg: #FBFCFD; --section-bg: #F3F5F8; --card: #FFFFFF; --card-hover: #EEF1F5; --well: #F7F9FB; --border: #DDE2E8; --hairline: #E7EAEE; --text-primary: #0F172A; --text-dim: #475569; --text-mute: #64748B; --text-faint: #94A3B8; --brand-on-fill: #FFFFFF; --brand-soft: rgba(79, 156, 255, 0.28); --signal: #B7860B; --beta: #6D28D9; --ok: #15803D; --err: #B91C1C; --nav-bg: rgba(251, 252, 253, 0.9); --hover-wash: rgba(15, 23, 42, 0.045); color-scheme: light; } /* Explicit dark override — defeats OS-light preference. The base `:root` already carries the dark tokens, so we just re-assert `color-scheme: dark` in case the media query above flipped it. */ :root[data-site-theme="dark"] { color-scheme: dark; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--text-primary); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, p, ul, ol { margin: 0; } ul { padding: 0; list-style: none; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } img { display: block; max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; border-radius: 4px; } /* Blazor's sets focus on the first h1 after route load so screen readers announce the new page. Sighted users shouldn't see a focus ring on something they didn't tab to; FocusOnNavigate marks the target with tabindex="-1", which we use as the signal to suppress the outline. */ [tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } code, .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; } /* ---------- Layout ---------- */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; } section { padding-top: var(--pad-v); padding-bottom: var(--pad-v); } @media (max-width: 900px) { section { padding-top: var(--pad-v-mob); padding-bottom: var(--pad-v-mob); } } @media (max-width: 500px) { .wrap { padding: 0 18px; } } .section-alt { background: var(--section-bg); } .eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; } .eyebrow-free { display: inline-block; margin-right: 10px; padding: 2px 8px; background: rgba(108, 198, 107, 0.16); color: var(--ok); font-weight: 700; letter-spacing: 0.08em; border-radius: 4px; } h1 { font-size: 56px; line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; color: var(--text-primary); } h2 { font-size: 32px; line-height: 1.2; font-weight: 600; color: var(--text-primary); } h3 { font-size: 20px; line-height: 1.3; font-weight: 600; color: var(--text-primary); } .lede { color: var(--text-dim); font-size: 18px; line-height: 1.55; max-width: 560px; } .lede-emph { display: inline-block; padding: 1px 8px; background: rgba(108, 198, 107, 0.14); color: var(--ok); font-weight: 700; border-radius: 4px; letter-spacing: -0.01em; } .subhead { color: var(--text-dim); max-width: 640px; } .small { font-size: 14px; line-height: 1.5; color: var(--text-mute); } .tiny { font-size: 13px; line-height: 1.45; color: var(--text-faint); } @media (max-width: 700px) { h1 { font-size: 36px; line-height: 1.15; } h2 { font-size: 26px; } .lede { font-size: 16px; } } /* ---------- Nav ---------- */ nav.top { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: var(--nav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } nav.top .wrap { display: flex; align-items: center; height: 100%; gap: 20px; } .brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 600; font-size: 16px; color: var(--text-primary); } /* The brand block is an on every page (see SiteNav.razor). Strip the default link styling so it reads the same whether we re-use the component on Home (anchor to self) or a sub-page. */ .brand-link { text-decoration: none; } .brand-link:hover .brand-glyph { filter: brightness(1.15); } .brand-link:hover > span:not(.pill-beta) { color: var(--brand); } .brand-glyph { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; } .pill-beta { display: inline-block; margin-left: 8px; padding: 2px 7px; background: var(--beta); color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: 0.08em; border-radius: 999px; vertical-align: 2px; } nav.top ul { display: flex; gap: 24px; align-items: center; } nav.top ul a { color: var(--text-dim); font-size: 15px; font-weight: 500; } nav.top ul a:hover { color: var(--text-primary); } @media (max-width: 820px) { nav.top ul { gap: 16px; } nav.top ul a { font-size: 14px; } } /* Mobile nav drawer — zero-JS. At wider viewports the checkbox + burger + scrim are inert (hidden); at ≤640px the ul becomes a slide-in drawer from the right, the burger renders, and clicking the scrim or a drawer link closes it (checkbox unchecks on :target change, label-for flips it manually). */ .nav-toggle-state { display: none; } .nav-burger { display: none; } .nav-scrim { display: none; } @media (max-width: 640px) { .brand { font-size: 15px; } /* Burger button — three bars that morph into an X when the checkbox is checked. Sits in the flex row to the LEFT of the theme toggle. */ .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 8px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .nav-burger span { display: block; height: 2px; width: 100%; background: var(--text-dim); border-radius: 2px; transition: transform .2s ease, opacity .15s ease, background-color .15s ease; transform-origin: center; } .nav-burger:hover span { background: var(--text-primary); } /* Drawer state: ul becomes a column, pinned to the right edge below the nav. Starts translated offscreen; checked state slides it in. */ nav.top ul { position: fixed; top: var(--nav-h); right: 0; width: min(260px, 80vw); max-height: calc(100vh - var(--nav-h)); overflow-y: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0; margin: 0; background: var(--card); border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: -12px 20px 40px rgba(0, 0, 0, 0.35); transform: translateX(100%); transition: transform .22s ease-out; z-index: 49; } nav.top ul li { display: block; } nav.top ul a { display: block; padding: 12px 20px; font-size: 15px; color: var(--text-primary); } nav.top ul a:hover { background: var(--hover-wash); } /* Scrim — full-viewport tint below the drawer. Hidden by default; becomes interactive + visible when the checkbox is checked. */ .nav-scrim { display: block; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity .2s ease-out; z-index: 48; } /* Open state — lives on `nav.top` as a sibling combinator because the checkbox is outside .wrap. */ .nav-toggle-state:checked ~ .wrap ul { transform: translateX(0); } .nav-toggle-state:checked ~ .nav-scrim { opacity: 1; pointer-events: auto; } /* Burger → X animation when checked. */ .nav-toggle-state:checked ~ .wrap .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle-state:checked ~ .wrap .nav-burger span:nth-child(2) { opacity: 0; } .nav-toggle-state:checked ~ .wrap .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* Theme toggle — rightmost item in the top nav. Shows a sun OR moon depending on the active theme; click cycles Auto → Light → Dark → Auto via /js/site-theme.js. Visible on every viewport, including mobile (where ul hides but the button stays reachable). */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; padding: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-dim); cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } .theme-toggle:hover { color: var(--text-primary); border-color: var(--hairline); background: var(--card); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Swap which glyph is visible based on the current theme. Default visibility hides both; the .is-light / .is-dark class (set by site-theme.js) reveals the matching glyph. */ .theme-toggle .i-sun, .theme-toggle .i-moon { display: none; } .theme-toggle.is-dark .i-sun { display: block; } .theme-toggle.is-light .i-moon { display: block; } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: 72px; padding-bottom: 96px; background: radial-gradient(circle at 50% 0%, rgba(79, 156, 255, 0.07) 0%, transparent 55%), var(--bg); } /* Hero breaks the standard 1100px wrap on wide screens so the product shot has more room to breathe — text still wraps nicely against the 580px lede max-width. Below 900px the layout stacks and we inherit the default wrap width again. */ .hero .wrap { max-width: 1280px; } .hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .hero .wrap { max-width: var(--max); } .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero { padding-top: 48px; padding-bottom: 64px; } } .hero picture { display: block; width: 100%; height: 100%; } .hero h1 { margin-bottom: 20px; } .hero .lede { margin-bottom: 28px; } .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; min-width: 168px; padding: 0 18px; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent; transition: background 150ms ease-out, transform 150ms ease-out, border-color 150ms ease-out; text-decoration: none; } .btn-primary { background: var(--brand); color: var(--brand-on-fill); } .btn-primary:hover { background: var(--brand-hover); color: var(--brand-on-fill); transform: translateY(-1px); } .btn-disabled { background: var(--card); color: var(--text-mute); border-color: var(--border); cursor: not-allowed; } .btn-disabled:hover { transform: none; } .btn .glyph { width: 16px; height: 16px; display: inline-block; flex-shrink: 0; } .btn .tag { font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 999px; background: var(--well); color: var(--text-mute); letter-spacing: 0.05em; } .btn .beta-tag { display: inline-flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 999px; background: var(--brand-on-fill); color: #fff; margin-left: 2px; } .hero-spec { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-mute); margin-top: 14px; } .hero-img-frame { border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--well); overflow: hidden; aspect-ratio: 1 / 1; } .hero-img-frame img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Features ---------- */ .features .header { margin-bottom: 48px; } .features .header h2 { margin-bottom: 10px; } .feature-row { display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: start; padding: 28px 0; border-top: 1px solid var(--hairline); } .feature-row:last-child { border-bottom: 1px solid var(--hairline); } .feature-icon { width: 56px; height: 56px; color: var(--brand); flex-shrink: 0; } .feature-row h3 { margin-bottom: 8px; } .feature-row p { color: var(--text-dim); } @media (max-width: 700px) { .feature-row { grid-template-columns: 1fr; gap: 14px; } } /* ---------- App tour ---------- */ .tour .header { margin-bottom: 40px; } .tour .header h2 { margin-bottom: 10px; } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .tiles { grid-template-columns: 1fr; } } .tile { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: border-color 150ms ease-out, background 150ms ease-out; } .tile:hover { border-color: var(--brand-soft); background: var(--card-hover); } .tile .shot { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--well); border-bottom: 1px solid var(--border); overflow: hidden; cursor: zoom-in; } .tile .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 200ms ease-out; } .tile .shot:hover img { transform: scale(1.03); } .tile .shot::after { content: ''; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; background: rgba(10, 12, 15, 0.75); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 6px; opacity: 0; transition: opacity 150ms ease-out; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 16px 16px; } .tile:hover .shot::after { opacity: 1; } /* ---------- Lightbox ---------- The backdrop stays dark in both themes (standard lightbox convention — focus the eye on the image, not the page). That means every control INSIDE the lightbox has to use fixed light-on-dark colours, not the site's theme tokens — otherwise in light mode the chrome inherits dark text on a dark overlay and the close + prev/next buttons vanish. */ .lightbox { padding: 0; border: none; background: transparent; color: #E5E7EB; max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; overflow: visible; } .lightbox::backdrop { background: rgba(5, 7, 10, 0.92); backdrop-filter: blur(6px); } .lightbox[open] { display: flex; align-items: center; justify-content: center; } .lb-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 96vw; } .lb-stage img { max-width: 96vw; max-height: calc(100vh - 140px); width: auto; height: auto; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); display: block; } .lb-caption { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(229, 231, 235, 0.8); } .lb-caption .lb-count { color: rgba(229, 231, 235, 0.55); font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-left: 10px; letter-spacing: 0.04em; text-transform: none; } .lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(10, 12, 15, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); color: #E5E7EB; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 150ms ease-out, border-color 150ms ease-out; } .lb-btn:hover { background: rgba(30, 35, 42, 0.9); border-color: rgba(120, 170, 255, 0.55); } .lb-prev { left: -60px; } .lb-next { right: -60px; } @media (max-width: 820px) { .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-btn { background: rgba(10, 12, 15, 0.85); } } .lb-close { position: fixed; top: 20px; right: 20px; width: 40px; height: 40px; background: rgba(10, 12, 15, 0.7); border: 1px solid rgba(255, 255, 255, 0.18); color: #E5E7EB; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; } .lb-close:hover { background: rgba(30, 35, 42, 0.9); border-color: rgba(120, 170, 255, 0.55); } .tile .body { padding: 16px 18px 18px; } .tile h3 { font-size: 17px; margin-bottom: 4px; } .tile p { font-size: 14px; color: var(--text-dim); line-height: 1.5; } /* ---------- Compatibility ---------- */ .compat .header { margin-bottom: 40px; } .compat .header h2 { margin-bottom: 10px; } .compat-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 800px) { .compat-cols { grid-template-columns: 1fr; gap: 24px; } } .compat-col { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .compat-col .label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 10px; } .compat-col h3 { font-size: 20px; margin-bottom: 10px; } .compat-col p { color: var(--text-dim); font-size: 16px; line-height: 1.6; } .compat-col .note { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-mute); line-height: 1.5; } /* ---------- Pricing ---------- */ .pricing .header { margin-bottom: 40px; max-width: 720px; } .pricing .header h2 { margin-bottom: 10px; } .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } @media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } } .pricing-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 14px; } .pricing-card .label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); } .pricing-card h3 { font-size: 20px; margin: 0; } .pricing-card-muted .label { color: var(--text-mute); } .pricing-card-muted { background: transparent; border-style: dashed; } .pricing-muted-body { color: var(--text-dim); font-size: 16px; line-height: 1.6; } .checklist { display: flex; flex-direction: column; gap: 10px; } .checklist li { position: relative; padding-left: 26px; color: var(--text-dim); font-size: 16px; line-height: 1.6; } .checklist li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 6px; height: 10px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); } .checklist-dim li::before { border-color: var(--text-mute); } /* ---------- FAQ ---------- */ .faq .header { margin-bottom: 32px; } .faq .header h2 { margin-bottom: 10px; } .faq-list { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .faq-item summary { padding: 16px 20px; cursor: pointer; font-size: 16px; font-weight: 500; color: var(--text-primary); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .faq-item[open] summary { border-bottom: 1px solid var(--hairline); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: ''; flex-shrink: 0; width: 10px; height: 10px; border-right: 2px solid var(--text-mute); border-bottom: 2px solid var(--text-mute); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms ease-out; } .faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq-item .faq-body { padding: 18px 20px 22px; color: var(--text-dim); font-size: 16px; line-height: 1.7; } .faq-item .faq-body p { margin: 0 0 14px; } .faq-item .faq-body p:last-child { margin-bottom: 0; } /* ---------- Footer ---------- */ footer { background: var(--well); border-top: 1px solid var(--border); padding-top: 48px; padding-bottom: 40px; } footer .wrap { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; align-items: start; } @media (max-width: 800px) { footer .wrap { grid-template-columns: 1fr; gap: 28px; } } footer h4 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); margin: 0 0 12px 0; } footer p, footer li { font-size: 14px; color: var(--text-dim); line-height: 1.55; } footer ul { display: flex; flex-direction: column; gap: 8px; } /* Links column has 6+ entries; break it into two visual columns so the column doesn't run long and crowd the skyline flourish below. */ footer ul.footer-links-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; } footer a { color: var(--text-dim); } footer a:hover { color: var(--brand); } .footer-meta { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-faint); } /* Toronto skyline flourish above the footer-bottom line. Pulled from FfbBridge.Desktop/Views/AboutView.axaml so site + app share the same 220×38 path. Kept faint — an ambient mark, not a visual anchor. */ .footer-skyline { max-width: var(--max); margin: 32px auto 0; padding: 0 24px; display: flex; justify-content: center; } .footer-skyline .skyline { width: 220px; height: 38px; color: var(--text-faint); opacity: 0.65; } .footer-bottom { max-width: var(--max); margin: 16px auto 0; padding: 20px 24px 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; font-size: 12px; color: var(--text-faint); } .footer-bottom .footer-made-in { display: inline-flex; align-items: center; gap: 8px; } .footer-bottom .ca-flag { width: 22px; height: 11px; border-radius: 1px; } .footer-bottom-sep { color: var(--text-faint); opacity: 0.5; } @media (max-width: 500px) { .footer-bottom-sep { display: none; } .footer-bottom { flex-direction: column; gap: 6px; } } /* ---------- Subscribe form (hero island) ---------- */ .subscribe { margin: 24px 0 14px; max-width: 520px; } .subscribe-row { display: flex; gap: 8px; flex-wrap: wrap; } .subscribe-input { flex: 1 1 260px; min-width: 0; padding: 11px 14px; background: var(--well); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: 15px; transition: border-color .15s ease, background .15s ease; } .subscribe-input::placeholder { color: var(--text-faint); } .subscribe-input:focus { outline: none; border-color: var(--brand); background: var(--card-hover); } .subscribe-hint { margin-top: 10px; font-size: 13px; color: var(--text-mute); line-height: 1.5; } /* CASL consent row: checkbox + inline label. The checkbox is unchecked by default and the submit button stays disabled until it's ticked. Privacy policy link lives inside the label so the consent is genuinely informed. */ .subscribe-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--text-dim); cursor: pointer; user-select: none; } .subscribe-consent input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; } .subscribe-consent a { color: var(--brand); } .subscribe-error { margin-top: 10px; font-size: 13px; color: var(--err); } /* Amber-toned "heads up" block — less severe than .subscribe-error. Used for the re-opt-in confirmation state when an address that previously unsubscribed is trying to sign up again. */ .subscribe-warning { margin-top: 10px; padding: 10px 14px; background: rgba(232, 181, 60, 0.10); border: 1px solid rgba(232, 181, 60, 0.35); border-radius: var(--radius); font-size: 13px; line-height: 1.5; color: var(--text-dim); } .subscribe-warning strong { color: var(--text-primary); } .subscribe-warning em { font-style: normal; color: var(--signal); font-weight: 600; } .subscribe-success { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 22px; } .subscribe-success h3 { margin-bottom: 8px; color: var(--text-primary); } .subscribe-success p { color: var(--text-dim); font-size: 15px; } .subscribe-success a { color: var(--brand); } /* ---------- Legal pages (Privacy, Terms etc) ---------- */ .legal { padding-top: 72px; padding-bottom: 72px; } .legal h1 { font-size: 40px; line-height: 1.15; margin-bottom: 16px; } .legal .lede { margin-bottom: 24px; } .legal .small { color: var(--text-faint); margin-bottom: 40px; } .legal h2 { font-size: 20px; font-weight: 600; color: var(--text-primary); margin: 36px 0 12px; padding-top: 20px; border-top: 1px solid var(--hairline); } .legal h2:first-of-type { padding-top: 0; border-top: 0; margin-top: 40px; } .legal p { color: var(--text-dim); font-size: 15px; line-height: 1.65; margin: 0 0 14px; } .legal p:last-child { margin-bottom: 0; } .legal-list { margin: 0 0 14px; padding-left: 0; list-style: none; } .legal-list li { position: relative; padding-left: 22px; margin-bottom: 10px; color: var(--text-dim); font-size: 15px; line-height: 1.6; } .legal-list li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); opacity: 0.6; } .legal-list strong { color: var(--text-primary); font-weight: 600; } .legal a { color: var(--brand); } /* ---------- Confirm / download pages ---------- Tuned to fit a 1920×1080 viewport without scrolling at default zoom. If you add content to this page, trim an existing piece first — spacing here is lean on purpose. */ .confirm { padding-top: 44px; padding-bottom: 36px; } .wrap.narrow { max-width: 680px; } /* Override the site-wide 56px h1 with a more restrained size for the post-flow success headline — the hero's big marquee isn't needed on a transactional confirmation page. */ .confirm h1 { font-size: 38px; line-height: 1.15; } .confirm .lede { max-width: 580px; font-size: 16px; line-height: 1.5; } .confirm-hero { margin-bottom: 24px; } .confirm-check { width: 40px; height: 40px; color: var(--ok); margin-bottom: 12px; } /* Muted variant for "neutral" outcomes (unsubscribed, invalid token, etc.) where a green success tick would be too celebratory. */ .confirm-check-muted { color: var(--text-mute); } /* Body paragraph inside a default (non-muted) confirm-card — used on /unsubscribe's "Still on the fence?" card which isn't a status block like "Your downloads". */ .confirm-card-body { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0; } .confirm-card-body a { color: var(--brand); } .confirm-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 26px; margin-bottom: 14px; } /* Inside the downloads card specifically, size the two platform buttons to share width equally — side-by-side on desktop, equal full-width stack on mobile. Without this, "Download for Windows" and "Download for Linux" render at their natural (different) content widths when stacked and look misaligned. */ .confirm-card .cta-row { margin-bottom: 0; } .confirm-card .cta-row .btn { flex: 1 1 220px; } .confirm-card-muted { background: var(--section-bg); border-color: var(--hairline); } .confirm-card-label { font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 12px; } .confirm-card-fine { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--text-mute); } .confirm-card-fine a { color: var(--brand); } .confirm-card-muted h2 { font-size: 17px; font-weight: 600; margin: 0 0 6px; color: var(--text-primary); } .confirm-card-muted p { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin: 0; } /* Toronto skyline + Made-in-Canada line live in SiteFooter.razor now — shared across every page — see .footer-skyline and the .footer-bottom block above. The per-page .made-in-canada block that used to sit at the bottom of /confirm was retired when the global footer landed. */ /* ---------- Blazor error banner ---------- Hidden by default; Blazor sets display:block at runtime if an unhandled Interactive Server error occurs. Strip'd Bootstrap meant we lost the default display:none rule, which is why every page was showing "An unhandled error has occurred" as plain inline text. Keep this rule. */ #blazor-error-ui { background: #3c2a2a; color: var(--text-primary); border-top: 1px solid var(--err); bottom: 0; box-sizing: border-box; display: none; left: 0; padding: 12px 20px; position: fixed; width: 100%; z-index: 1000; font-size: 14px; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 16px; top: 10px; } #blazor-error-ui .reload { color: var(--brand); } /* ---------- Feedback page ---------- Uses the shared .confirm scaffold. Unlike the other utility pages (Confirm / Unsubscribe / Privacy) which lock content to a 680px narrow wrap, feedback uses the full .wrap (1100px) so the form can breathe and the two short fields (category + email) can sit side-by-side on desktop. */ /* Feedback form extends .confirm-card with form-specific padding and a two-column grid for fields that benefit from it. */ .feedback-form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; padding: 28px 32px; } /* Most form fields span both columns; only those explicitly marked as .form-field-half stick to one. */ .feedback-form > * { grid-column: 1 / -1; } .feedback-form .form-field-half { grid-column: auto; } @media (max-width: 680px) { .feedback-form { grid-template-columns: 1fr; padding: 22px; gap: 20px; } .feedback-form .form-field-half { grid-column: 1; } } .feedback-error { background: rgba(232, 107, 107, 0.08); border: 1px solid rgba(232, 107, 107, 0.35); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 24px; color: var(--text-primary); font-size: 14px; line-height: 1.5; } .feedback-error strong { color: var(--err); display: block; margin-bottom: 4px; } .form-field { display: flex; flex-direction: column; gap: 8px; } .form-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; } .form-required { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal); } .form-optional { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute); } .form-hint { font-size: 13px; color: var(--text-mute); line-height: 1.55; margin: 0; } .feedback-form textarea, .feedback-form input[type="email"], .feedback-form input[type="text"], .feedback-form select { background: var(--well); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 12px 14px; font-family: inherit; font-size: 14px; line-height: 1.55; width: 100%; transition: border-color .15s ease, background-color .15s ease; } .feedback-form textarea:focus, .feedback-form input:focus, .feedback-form select:focus { outline: none; border-color: var(--brand); background: var(--card-hover); } .feedback-form textarea { resize: vertical; min-height: 160px; font-family: 'Inter', system-ui, -apple-system, sans-serif; } .feedback-form select { appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; } .feedback-form select option { background: var(--well); color: var(--text-primary); } /* File inputs: let the browser's default render, but tint the surrounding container so the row reads as part of the form. */ .feedback-form input[type="file"] { color: var(--text-dim); font-size: 13px; padding: 10px 0; } .feedback-form input[type="file"]::file-selector-button { background: var(--card-hover); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-primary); padding: 8px 14px; margin-right: 12px; font-size: 13px; cursor: pointer; transition: background .15s ease; } .feedback-form input[type="file"]::file-selector-button:hover { background: rgba(79, 156, 255, 0.12); border-color: var(--brand-soft); } .form-file-list { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 6px; } .form-file-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; background: var(--well); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; color: var(--text-dim); } .form-file-list .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .form-file-list .fsize { color: var(--text-mute); font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; flex-shrink: 0; } /* Honeypot: off-screen so bots autofill it; sighted + screen reader users don't reach it (aria-hidden on the wrapper). */ .hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Char counter inherits .form-hint but right-aligns the number. */ #feedback-body-count { color: var(--text-dim); font-variant-numeric: tabular-nums; font-family: 'JetBrains Mono', ui-monospace, monospace; } .form-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; border-top: 1px solid var(--hairline); padding-top: 20px; } .form-submit-row .form-hint { flex: 1; min-width: 240px; } .form-submit-row .btn { padding: 12px 28px; } /* ---------- Documentation (/docs/*) ---------- */ /* Two-column shell: sticky left nav + article body. Narrower than the marketing pages' ample whitespace — these are read, not scrolled. Max article width ~760px preserves comfortable line length. */ .docs-shell { padding-top: 40px; padding-bottom: 96px; background: var(--bg); } .docs-wrap { max-width: 1180px; display: grid; grid-template-columns: 240px 1fr; gap: 56px; align-items: start; } @media (max-width: 900px) { .docs-wrap { grid-template-columns: 1fr; gap: 24px; } } .docs-side { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto; padding-right: 8px; } @media (max-width: 900px) { .docs-side { position: static; max-height: none; padding-right: 0; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); } } .docs-side-inner { padding-top: 4px; } .docs-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; } .docs-nav-group { margin-bottom: 20px; } .docs-nav-heading { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; padding-left: 10px; } .docs-nav ul { display: flex; flex-direction: column; gap: 1px; } .docs-nav a { display: block; font-size: 14px; color: var(--text-dim); padding: 5px 10px; border-radius: var(--radius-sm); border-left: 2px solid transparent; } .docs-nav a:hover { color: var(--text-primary); background: var(--hover-wash); } .docs-nav a.is-active { color: var(--brand); background: rgba(79, 156, 255, 0.08); border-left-color: var(--brand); font-weight: 500; } /* --- Article body --- */ .docs-article { max-width: 760px; font-size: 16px; color: var(--text-primary); } .docs-article h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 6px; } .docs-article .doc-lede { color: var(--text-dim); font-size: 17px; line-height: 1.55; margin-bottom: 32px; } .docs-article h2 { font-size: 24px; font-weight: 600; line-height: 1.25; margin-top: 48px; margin-bottom: 10px; padding-top: 4px; scroll-margin-top: calc(var(--nav-h) + 16px); } .docs-article h2:first-of-type { margin-top: 36px; } .docs-article h3 { font-size: 18px; font-weight: 600; margin-top: 28px; margin-bottom: 6px; color: var(--text-primary); } .docs-article p { margin-bottom: 14px; line-height: 1.65; color: var(--text-primary); } .docs-article p.muted { color: var(--text-dim); } .docs-article a { color: var(--brand); border-bottom: 1px solid transparent; transition: border-color 120ms ease; } .docs-article a:hover { border-bottom-color: var(--brand); } .docs-article ul, .docs-article ol { margin: 0 0 18px 0; padding-left: 22px; color: var(--text-primary); } .docs-article ul { list-style: disc; } .docs-article ol { list-style: decimal; } .docs-article li { margin-bottom: 6px; line-height: 1.6; } .docs-article code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.92em; padding: 1px 6px; background: var(--well); border: 1px solid var(--hairline); border-radius: 4px; color: var(--text-primary); } .docs-article pre { margin: 0 0 18px 0; padding: 14px 16px; background: var(--well); border: 1px solid var(--hairline); border-radius: var(--radius); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13.5px; line-height: 1.55; color: var(--text-primary); overflow-x: auto; white-space: pre; } .docs-article pre code { padding: 0; background: transparent; border: 0; border-radius: 0; font-size: inherit; } .docs-article blockquote { margin: 0 0 18px 0; padding: 12px 16px; border-left: 3px solid var(--brand); background: rgba(79, 156, 255, 0.06); color: var(--text-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .docs-article blockquote p:last-child { margin-bottom: 0; } /* Callout boxes: .note, .tip, .warn */ .doc-callout { margin: 0 0 18px 0; padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--hairline); background: var(--card); } .doc-callout-title { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 6px; } .doc-callout.note { border-color: rgba(79, 156, 255, 0.35); background: rgba(79, 156, 255, 0.06); } .doc-callout.note .doc-callout-title { color: var(--brand); } .doc-callout.tip { border-color: rgba(108, 198, 107, 0.35); background: rgba(108, 198, 107, 0.06); } .doc-callout.tip .doc-callout-title { color: var(--ok); } .doc-callout.warn { border-color: rgba(232, 181, 60, 0.4); background: rgba(232, 181, 60, 0.06); } .doc-callout.warn .doc-callout-title { color: var(--signal); } .doc-callout.stop { border-color: rgba(232, 107, 107, 0.4); background: rgba(232, 107, 107, 0.06); } .doc-callout.stop .doc-callout-title { color: var(--err); } .doc-callout p:last-child { margin-bottom: 0; } /* Figures (screenshots with captions). */ .doc-fig { margin: 0 0 28px 0; padding: 0; } .doc-fig-link { display: block; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--well); overflow: hidden; transition: border-color 120ms ease; } .doc-fig-link:hover { border-color: var(--border); } .doc-fig-link img { display: block; width: 100%; height: auto; } .doc-fig figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; } .doc-fig-num { color: var(--text-mute); font-weight: 600; margin-right: 6px; } .doc-fig-wide .doc-fig-link { max-width: none; } .doc-fig-placeholder .doc-fig-link { border-style: dashed; border-color: rgba(232, 181, 60, 0.35); } .doc-fig-placeholder img { opacity: 0.78; } .doc-fig-pending { color: var(--signal); font-style: italic; } .doc-fig-pending code { font-size: 0.9em; padding: 0 4px; background: rgba(232, 181, 60, 0.12); border: 1px solid rgba(232, 181, 60, 0.3); border-radius: 3px; } /* Table for keyboard shortcuts / effect list / compatibility matrices. */ .docs-article table { width: 100%; border-collapse: collapse; margin: 0 0 22px 0; font-size: 14.5px; } .docs-article th, .docs-article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; } .docs-article th { color: var(--text-mute); font-weight: 600; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-bottom-color: var(--border); } .docs-article td code { font-size: 0.88em; } /* "Previous / Next" page footer pager. */ .docs-pager { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .docs-pager a { display: inline-flex; flex-direction: column; padding: 14px 18px; border: 1px solid var(--hairline); border-radius: var(--radius); min-width: 180px; max-width: 320px; color: var(--text-primary); background: var(--card); transition: border-color 120ms ease, background 120ms ease; } .docs-pager a:hover { border-color: var(--border); background: var(--card-hover); } .docs-pager a .pager-dir { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 2px; } .docs-pager a.pager-next { margin-left: auto; text-align: right; } .docs-pager a.pager-prev .pager-dir::before { content: "← "; } .docs-pager a.pager-next .pager-dir::after { content: " →"; } /* Key / value pair layout used for spec-style reference blocks. */ .docs-article .doc-kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 18px; margin: 0 0 20px 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); } .docs-article .doc-kv dt { color: var(--text-mute); font-size: 13px; font-weight: 500; } .docs-article .doc-kv dd { margin: 0; font-size: 14px; } @media (max-width: 500px) { .docs-article .doc-kv { grid-template-columns: 1fr; gap: 0; } .docs-article .doc-kv dt { margin-top: 8px; } } /* Overview cards (index page). */ .docs-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-bottom: 32px; } .docs-index-card { display: block; padding: 16px 18px; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--text-primary); transition: border-color 120ms ease, background 120ms ease; } .docs-index-card:hover { border-color: var(--border); background: var(--card-hover); } .docs-index-card h3 { font-size: 15px; margin-bottom: 4px; color: var(--text-primary); } .docs-index-card p { font-size: 13.5px; color: var(--text-dim); margin: 0; line-height: 1.5; } /* Chip / pill used inline to mark OS-specific content. */ .doc-os { display: inline-block; padding: 1px 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; vertical-align: 2px; margin-right: 6px; } .doc-os.win { background: rgba(79, 156, 255, 0.16); color: var(--brand); } .doc-os.linux { background: rgba(232, 181, 60, 0.16); color: var(--signal); } .doc-os.both { background: rgba(108, 198, 107, 0.16); color: var(--ok); } /* Manual single-page — wider, denser, no sidebar. */ .docs-manual { max-width: 840px; margin: 0 auto; padding: 40px 24px 96px; } .docs-manual h1 { font-size: 44px; line-height: 1.1; margin-bottom: 4px; } .docs-manual .manual-cover { padding: 56px 0 40px; border-bottom: 1px solid var(--hairline); margin-bottom: 28px; } .docs-manual .manual-cover .cover-sub { color: var(--text-dim); font-size: 18px; margin-top: 8px; } .docs-manual .manual-cover .cover-meta { margin-top: 28px; color: var(--text-mute); font-size: 13px; font-family: 'JetBrains Mono', ui-monospace, monospace; } .docs-manual h2.chapter { font-size: 28px; margin-top: 56px; padding-top: 28px; border-top: 2px solid var(--border); } .docs-manual h2.chapter .chap-num { color: var(--brand); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; display: block; margin-bottom: 4px; } /* Beta-doc warning banner. Sits at the top of every /docs/* page (rendered by DocsLayout) and of /docs/manual (rendered manually inside its own shell). Amber-signal border on a faint tint keeps it visible without overwhelming the content below — same visual language as .doc-callout.warn, but full-width and pinned to the top of the article. */ .docs-beta-banner { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 28px 0; padding: 12px 16px; border: 1px solid rgba(232, 181, 60, 0.38); background: rgba(232, 181, 60, 0.06); border-radius: var(--radius); color: var(--text-primary); font-size: 13.5px; line-height: 1.5; } .docs-beta-banner svg { color: var(--signal); flex-shrink: 0; margin-top: 1px; } .docs-beta-banner strong { color: var(--signal); font-weight: 600; } .docs-beta-banner a { color: var(--brand); border-bottom: 1px solid transparent; } .docs-beta-banner a:hover { border-bottom-color: var(--brand); } /* Manual shell doesn't have the article's max-width, so give the banner its own cap + a bit more breathing room before the cover block. */ .docs-beta-banner-manual { max-width: 820px; margin: 0 auto 36px; } /* Manual cover download button */ .docs-manual .manual-cover-actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .manual-dl-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--brand); color: var(--brand-on-fill); font-weight: 600; font-size: 14px; border-radius: var(--radius); border: 1px solid var(--brand); text-decoration: none; transition: background 120ms ease, border-color 120ms ease; } .manual-dl-btn:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--brand-on-fill); } .manual-dl-hint { color: var(--text-mute); font-size: 13px; max-width: 420px; } /* Sidebar PDF-download link — same left-rail pattern as the in-page nav links, but a brand-tinted variant so it reads as an action not a route. */ .docs-nav a.docs-nav-pdf { color: var(--brand); font-weight: 500; } .docs-nav a.docs-nav-pdf:hover { color: var(--brand-hover); background: rgba(79, 156, 255, 0.10); } .docs-manual .manual-toc { padding: 18px 20px; border: 1px solid var(--hairline); border-radius: var(--radius); margin-bottom: 32px; background: var(--card); } .docs-manual .manual-toc ol { margin: 0; padding-left: 22px; list-style: decimal; } .docs-manual .manual-toc li { margin-bottom: 3px; font-size: 14.5px; } /* --- Print / PDF styles (for /docs/manual when browser-printed) --- */ @media print { nav.top, footer, .docs-side, .docs-pager, #blazor-error-ui { display: none !important; } body { background: #ffffff !important; color: #111 !important; font-size: 11pt; } .docs-shell, .docs-manual { padding: 0 !important; background: #ffffff !important; } .docs-wrap { grid-template-columns: 1fr !important; gap: 0 !important; } .docs-article, .docs-manual { max-width: none !important; color: #111 !important; } .docs-article h1, .docs-article h2, .docs-article h3, .docs-manual h1, .docs-manual h2, .docs-manual h3 { color: #000 !important; page-break-after: avoid; } .docs-article p, .docs-article li, .docs-manual p, .docs-manual li { color: #222 !important; } .docs-article a, .docs-manual a { color: #0b4fbf !important; border-bottom: 0 !important; } .docs-article code, .docs-article pre, .docs-manual code, .docs-manual pre { background: #f4f4f6 !important; border-color: #d5d7dc !important; color: #111 !important; } .doc-fig { page-break-inside: avoid; } .doc-fig-link { border-color: #d5d7dc !important; background: #f8f8fa !important; } .doc-fig figcaption { color: #555 !important; } .doc-callout { background: #f7f7f9 !important; border-color: #d5d7dc !important; color: #111 !important; } .doc-callout.note .doc-callout-title { color: #1a57b8 !important; } .doc-callout.tip .doc-callout-title { color: #2f7d2f !important; } .doc-callout.warn .doc-callout-title { color: #8a6200 !important; } .doc-callout.stop .doc-callout-title { color: #a83030 !important; } .docs-manual h2.chapter { page-break-before: always; border-top: 0; } .docs-manual h2.chapter:first-of-type { page-break-before: auto; } /* Explicit URL after external links for the printed version. */ .docs-article a[href^="http"]::after, .docs-manual a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 85%; color: #555; } @page { margin: 20mm 18mm 20mm 18mm; } }