/* ── Fonts ────────────────────────────────────────────────────── */ /* One variable file covers the whole 100–900 range, so the 900-weight logo costs nothing extra. Subset from the TTF in assets/ down to Latin + Latin-Ext — see tools/make-inter-woff2.py to rebuild it. */ @font-face { font-family: 'Inter'; src: url('../assets/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Reset & base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Form controls opt out of the inherited font by default, which would leave the buttons and inputs on the system UI face while everything else is Inter. */ button, input, select, textarea { font-family: inherit; } :root { --color-bg: #0f1117; --color-surface: #1a1d27; --color-border: #2a2d3a; --color-primary: #7c6aff; --color-primary-h: #9b8dff; --color-text: #e8eaf0; --color-muted: #8a8fa8; --color-success: #4caf7d; --color-warn: #e6a817; --color-danger: #e05252; --radius: 0.5rem; --radius-lg: 1rem; --shadow: 0 2px 12px rgba(0,0,0,0.4); /* Strength level colours */ --s0: var(--color-danger); --s1: var(--color-warn); --s2: #6cbf6c; --s3: var(--color-success); --s4: var(--color-primary); } :root[data-theme="light"] { --color-bg: #f5f7fb; --color-surface: #ffffff; --color-border: #d7dce8; --color-primary: #6b4dff; --color-primary-h: #5a3dfa; --color-text: #161a24; --color-muted: #5f667a; --color-success: #2f8f5b; --color-warn: #b77b00; --color-danger: #c83f3f; --shadow: 0 8px 24px rgba(26, 29, 39, 0.08); } html { font-size: 16px; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.6; /* Column layout so a short page (404, offline) still parks its footer at the bottom of the screen instead of leaving it halfway up. dvh tracks the mobile URL bar; the vh line is the fallback for browsers without it. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } a { color: var(--color-primary); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 2px; } /* ── Scenic background ────────────────────────────────────────── */ /* Opt-in per page with . The photo pages are the landing, 404 and offline pages; the long-form prose pages stay on the flat background so body text keeps its full contrast. */ /* Glass, in the Apple sense: thin enough to read the scene through, held together by a bright top edge and a heavy drop shadow rather than by opacity. The saturation boost is what stops a blurred photo going grey. */ :root { --panel-bg: rgba(26, 29, 39, 0.52); --panel-line: rgba(255, 255, 255, 0.18); --panel-sheen: rgba(255, 255, 255, 0.16); --panel-shadow: 0 12px 40px rgba(0, 0, 0, 0.34); --chrome-bg: rgba(15, 17, 23, 0.42); } :root[data-theme="light"] { --panel-bg: rgba(255, 255, 255, 0.55); --panel-line: rgba(255, 255, 255, 0.65); --panel-sheen: rgba(255, 255, 255, 0.75); --panel-shadow: 0 12px 40px rgba(26, 29, 39, 0.16); --chrome-bg: rgba(245, 247, 251, 0.5); } /* The colour lives on so the two photo layers can sit behind the page content on a negative z-index without being painted over by the body's own background. */ html { background: var(--color-bg); } body.scenic { background: transparent; } /* One fixed layer per theme, both always present and only the active one at full opacity — that is what makes the theme switch a cross-fade rather than a swap. Each layer carries a scrim gradient above the photo so header, footer and card text stay legible over the busy areas. */ body.scenic::before, body.scenic::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-repeat: no-repeat; background-position: center bottom; /* horizon anchored to the bottom */ background-size: cover; /* fill, never distort */ transition: opacity 700ms ease; /* Promote both layers. The frosted panels blur whatever sits behind them, and a composited backdrop can be sampled from a cached texture instead of being re-rasterised every time the card changes height. */ transform: translateZ(0); } /* Day. The plain url() line is the fallback for browsers without image-set(); they simply never see the second declaration. */ body.scenic::before { opacity: 0; background-image: linear-gradient(180deg, rgba(245,247,251,0.62) 0%, rgba(245,247,251,0.30) 38%, rgba(245,247,251,0.50) 100%), url(../assets/herd-of-sheep-day.jpg); background-image: linear-gradient(180deg, rgba(245,247,251,0.62) 0%, rgba(245,247,251,0.30) 38%, rgba(245,247,251,0.50) 100%), image-set(url(../assets/herd-of-sheep-day.webp) type("image/webp"), url(../assets/herd-of-sheep-day.jpg) type("image/jpeg")); } /* Night. */ body.scenic::after { opacity: 1; background-image: linear-gradient(180deg, rgba(15,17,23,0.58) 0%, rgba(15,17,23,0.32) 38%, rgba(15,17,23,0.55) 100%), url(../assets/herd-of-sheep-night.jpg); background-image: linear-gradient(180deg, rgba(15,17,23,0.58) 0%, rgba(15,17,23,0.32) 38%, rgba(15,17,23,0.55) 100%), image-set(url(../assets/herd-of-sheep-night.webp) type("image/webp"), url(../assets/herd-of-sheep-night.jpg) type("image/jpeg")); } :root[data-theme="light"] body.scenic::before { opacity: 1; } :root[data-theme="light"] body.scenic::after { opacity: 0; } /* site.js adds .theme-ready once the stored theme has been applied, so the very first paint settles on the right photo instantly instead of playing a night-to-day fade at every load. */ :root:not(.theme-ready) body.scenic::before, :root:not(.theme-ready) body.scenic::after, :root:not(.theme-ready) .fireflies { transition: none; } /* Frosted panels. The card is the reading surface, so it keeps a solid-ish veil and blurs whatever sheep sit behind it. The card is also the one panel that changes size — a long password wraps onto more lines and the card grows under the length slider — and every resize recomputes the blur. The fireflies drift behind the glass, so that backdrop is never static; the photo layers are composited and the card holds its own layer to keep the cost down. */ body.scenic .card, body.scenic .error-page { background: var(--panel-bg); border: 1px solid var(--panel-line); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); box-shadow: inset 0 1px 0 var(--panel-sheen), var(--panel-shadow); } body.scenic .card { /* Holds the blurred result on its own compositor layer across resizes, which is what stops the smearing while the slider is dragged. */ will-change: backdrop-filter; } body.scenic .error-page { max-width: 34rem; margin: 2.5rem auto; border-radius: var(--radius-lg); min-height: 0; padding: 3rem 2rem; /* No box-shadow here: it would land after the rule above and drop the sheen that gives the panel its top edge. */ } body.scenic .site-header, body.scenic .site-footer { background: var(--chrome-bg); border-color: var(--panel-line); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); } /* Without backdrop-filter the veil alone is not enough to separate text from the photo, so those browsers get the opaque surfaces back. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { body.scenic .card, body.scenic .error-page { background: var(--color-surface); } body.scenic .site-header, body.scenic .site-footer { background: var(--color-bg); } } /* ── Layout ───────────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--color-border); padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .logo { display: inline-flex; align-items: center; gap: 0.65rem; font-weight: 900; /* the top of Inter's variable weight axis */ letter-spacing: -0.015em; /* heavy weights need the tracking pulled in */ font-size: 1.45rem; color: var(--color-text); text-decoration: none; } /* The source GIF is 112×120, so it was being squashed into a 28px square as well as scaled down. Height drives, width follows, ratio preserved. */ .logo img { flex-shrink: 0; display: block; height: 2.5rem; width: auto; } .logo:hover { text-decoration: none; } .theme-switcher { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); } .theme-btn { width: 2.2rem; height: 2.2rem; border: 0; border-radius: 999px; background: transparent; color: var(--color-text); cursor: pointer; font-size: 1rem; } .theme-btn:hover { background: var(--color-border); } .theme-btn.is-active { background: var(--color-primary); color: #fff; } .theme-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } main { /* width:100% is load-bearing. is a flex column (see the footer), and a flex item with auto cross-axis margins is not stretched — it gets sized to its content instead. Without this the card breathes in and out as the generated password gets longer or shorter. */ width: 100%; max-width: 680px; margin: 2.5rem auto; padding: 0 1.25rem 4rem; } .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; } /* ── Mode toggle ─────────────────────────────────────────────── */ .mode-toggle { display: flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.5rem; } .mode-toggle button { flex: 1; padding: 0.55rem 1rem; background: transparent; border: none; color: var(--color-muted); cursor: pointer; font-size: 0.9rem; transition: background 0.15s, color 0.15s; } .mode-toggle button.active { background: var(--color-primary); color: #fff; font-weight: 600; } .mode-toggle button:hover:not(.active) { background: var(--color-border); color: var(--color-text); } .mode-toggle button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } /* ── Output area ─────────────────────────────────────────────── */ .output-wrapper { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; } #output { flex: 1; font-family: 'Courier New', Courier, monospace; font-size: 1.05rem; letter-spacing: 0.03em; word-break: break-all; user-select: text; color: var(--color-text); } .visibility-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 0; border-radius: var(--radius); background: transparent; color: var(--color-muted); cursor: pointer; transition: color 0.15s, background 0.15s; } .visibility-btn:hover { color: var(--color-text); background: var(--color-border); } .visibility-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ── Action buttons ──────────────────────────────────────────── */ .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.1rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: background 0.15s, border-color 0.15s, color 0.15s; } .btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: var(--color-primary-h); } .btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); } .btn-outline:hover { background: var(--color-border); } .copy-feedback { font-size: 0.82rem; color: var(--color-success); opacity: 0; transition: opacity 0.2s; align-self: center; } .copy-feedback.visible { opacity: 1; } /* ── Strength indicator ──────────────────────────────────────── */ .strength-track { height: 6px; background: var(--color-border); border-radius: 99px; overflow: hidden; margin-bottom: 0.4rem; } /* The CSP sets style-src 'self', which blocks style attributes in the markup, so these two starting states have to live here. JavaScript setting element.style.* later is CSSOM and stays permitted. Without them the bar flashes full-width red, and both eye icons show, until the first script runs. */ .strength-bar { height: 100%; width: 0; border-radius: 99px; transition: width 0.3s ease, background 0.3s ease; background: var(--s0); } #icon-eye { display: none; } .strength-bar.level-0 { background: var(--s0); } .strength-bar.level-1 { background: var(--s1); } .strength-bar.level-2 { background: var(--s2); } .strength-bar.level-3 { background: var(--s3); } .strength-bar.level-4 { background: var(--s4); } .strength-row { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--color-muted); margin-bottom: 1.25rem; } .strength-label { font-weight: 600; } .strength-label.level-0 { color: var(--s0); } .strength-label.level-1 { color: var(--s1); } .strength-label.level-2 { color: var(--s2); } .strength-label.level-3 { color: var(--s3); } .strength-label.level-4 { color: var(--s4); } /* ── Options ─────────────────────────────────────────────────── */ .options-section h2 { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: 1rem; } .option-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; } .option-row label { flex: 1; font-size: 0.9rem; cursor: pointer; } .option-row input[type="range"] { width: 140px; accent-color: var(--color-primary); cursor: pointer; } .option-value { min-width: 2.2rem; text-align: right; font-size: 0.9rem; font-variant-numeric: tabular-nums; color: var(--color-muted); } .toggle-group { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.85rem; } /* Custom checkbox */ .chk-label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.88rem; cursor: pointer; padding: 0.3rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color 0.15s, background 0.15s; user-select: none; } .chk-label input[type="checkbox"] { accent-color: var(--color-primary); } .chk-label:hover { border-color: var(--color-primary); } .chk-label:has(input:checked) { border-color: var(--color-primary); background: rgba(124,106,255,0.08); } .chk-label:focus-within { outline: 2px solid var(--color-primary); outline-offset: 1px; border-radius: var(--radius); } .field-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; } .field-row label { font-size: 0.9rem; white-space: nowrap; } .field-row input[type="text"], .field-row select { flex: 1; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); color: var(--color-text); padding: 0.4rem 0.7rem; font-size: 0.9rem; } .field-row input[type="text"]:focus, .field-row select:focus { outline: 2px solid var(--color-primary); outline-offset: 0; border-color: transparent; } /* ── Info badge ──────────────────────────────────────────────── */ .privacy-badge { text-align: center; font-size: 0.82rem; color: var(--color-muted); margin-top: 0.5rem; } .privacy-badge strong { color: var(--color-text); } /* ── Static page content ─────────────────────────────────────── */ .prose { max-width: 680px; margin: 2rem auto; padding: 0 1.25rem 4rem; } .prose h1 { font-size: 1.75rem; margin-bottom: 0.5rem; } .prose h2 { font-size: 1.2rem; margin: 1.75rem 0 0.5rem; color: var(--color-primary); } .prose p { color: var(--color-muted); margin-bottom: 0.75rem; } .prose ul { color: var(--color-muted); padding-left: 1.5rem; margin-bottom: 0.75rem; } .prose li { margin-bottom: 0.25rem; } .prose code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 4px; padding: 0.15em 0.4em; font-size: 0.88em; } /* ── API page ────────────────────────────────────────────────── */ /* The AI sparkle that marks anything agent-facing. Inherits the link colour via currentColor so it works in both themes and on hover. */ .ai-star { width: 1em; height: 1em; flex-shrink: 0; fill: currentColor; vertical-align: -0.125em; } .link-ai { display: inline-flex; align-items: center; gap: 0.35rem; } /* Page-title variant. This lives here rather than in a style attribute because the site CSP sets style-src 'self', which blocks inline styles outright. */ .ai-star-title { width: 0.9em; height: 0.9em; color: var(--color-primary); margin-right: 0.15em; } .prose h3 { font-size: 1rem; margin: 1.25rem 0 0.4rem; color: var(--color-text); } .prose strong { color: var(--color-text); } /* Answer box — the one thing a reader is most likely to be looking for. */ .answer-box { background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-primary); border-radius: var(--radius); padding: 1rem 1.25rem; margin: 1.25rem 0; } .answer-box p:last-child { margin-bottom: 0; } .answer-box .answer-lead { color: var(--color-text); font-weight: 600; margin-bottom: 0.35rem; } .callout { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.85rem 1.1rem; margin: 1.25rem 0; font-size: 0.9rem; color: var(--color-muted); } .callout p:last-child { margin-bottom: 0; } .callout-warn { border-left: 3px solid var(--color-warn); } .callout-danger { border-left: 3px solid var(--color-danger); } .callout-ok { border-left: 3px solid var(--color-success); } /* Numbered walkthrough */ .steps { list-style: none; padding: 0; margin: 1rem 0 1.5rem; counter-reset: step; } .steps > li { counter-increment: step; position: relative; padding-left: 2.5rem; margin-bottom: 1.5rem; color: var(--color-muted); } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.85rem; font-weight: 700; line-height: 1; } .steps > li > h3 { margin-top: 0.15rem; } /* Code blocks. Long commands must scroll inside the block, never widen the page, so a phone can still read the surrounding text. */ .code-block { position: relative; margin: 0.75rem 0 1.25rem; } .code-block pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.9rem 1rem; overflow-x: auto; font-family: 'Courier New', Courier, monospace; font-size: 0.82rem; line-height: 1.65; color: var(--color-text); -webkit-overflow-scrolling: touch; } .code-block pre code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; } .code-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: 0.3rem; } .copy-code { position: absolute; top: 1.55rem; right: 0.5rem; padding: 0.2rem 0.55rem; font-size: 0.72rem; border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-bg); color: var(--color-muted); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s, border-color 0.15s; } .code-block:hover .copy-code, .copy-code:focus-visible { opacity: 1; } .copy-code:hover { color: var(--color-text); border-color: var(--color-primary); } .copy-code.copied { color: var(--color-success); border-color: var(--color-success); opacity: 1; } /* Touch devices never hover, so keep the button permanently visible there. */ @media (hover: none) { .copy-code { opacity: 1; } } /* Postman download buttons. Files are served from this site, so these are plain download links dressed as cards — no Postman account involved. */ .postman-downloads { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0.75rem; } .postman-btn { display: flex; align-items: center; gap: 0.85rem; flex: 1 1 16rem; min-width: 0; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); text-decoration: none; transition: border-color 0.15s, background 0.15s, transform 0.15s; } .postman-btn:hover { border-color: #ff6c37; background: rgba(255, 108, 55, 0.06); text-decoration: none; transform: translateY(-1px); } .postman-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .postman-mark { width: 2.25rem; height: 2.25rem; flex-shrink: 0; } .postman-btn-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .postman-btn-text strong { font-size: 0.95rem; } .postman-btn-text small { font-size: 0.78rem; line-height: 1.45; color: var(--color-muted); } .postman-btn-text small code { font-size: 0.95em; } .postman-note { font-size: 0.82rem; color: var(--color-muted); margin-bottom: 1.5rem; } /* Reference tables */ .table-scroll { overflow-x: auto; margin: 0.75rem 0 1.5rem; } .api-table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.85rem; } .api-table th, .api-table td { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; color: var(--color-muted); } .api-table th { color: var(--color-text); font-weight: 600; white-space: nowrap; } .api-table td code { white-space: nowrap; } /* Endpoint list */ .endpoint { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.88rem; color: var(--color-muted); } .method { font-family: 'Courier New', Courier, monospace; font-size: 0.72rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 4px; background: var(--color-border); color: var(--color-text); letter-spacing: 0.04em; } .method-post { background: var(--color-primary); color: #fff; } /* ── Footer ──────────────────────────────────────────────────── */ .site-footer { margin-top: auto; /* eats the leftover column space — see body */ border-top: 1px solid var(--color-border); padding: 1.25rem 1.5rem; text-align: center; font-size: 0.82rem; color: var(--color-muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem 1.5rem; } /* ── Offline / 404 pages ─────────────────────────────────────── */ .error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; text-align: center; padding: 2rem; gap: 1rem; } .error-page h1 { font-size: 2rem; } .error-page p { color: var(--color-muted); } /* ── Responsive ──────────────────────────────────────────────── */ @media (max-width: 500px) { .site-header { align-items: flex-start; } .actions { flex-direction: column; } .actions .btn { width: 100%; justify-content: center; } .option-row input[type="range"] { width: 100px; } } /* ── Reduced motion ──────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } } /* ── High contrast ───────────────────────────────────────────── */ @media (forced-colors: active) { .btn-primary { border: 1px solid ButtonText; } .strength-bar { forced-color-adjust: none; } }