/* ========================================================================== ScanWith Design System - sw.css One stylesheet for every public page. HOW TO ADMIN THIS FILE - Change colors, fonts, radius and spacing ONLY in section 1 (tokens). Every component reads from these variables, so one edit updates the site. - Dark mode values live in section 1b. Keep the same variable names. - Components (section 4) are named .sw-* and documented with a one-line usage example. Copy the example markup into any page. - Rules of the house: borders are always 1px all around (no border-left accents), hyphens instead of em dashes in copy, Phosphor icons only. SECTIONS 1. Tokens 5. Tool UI (forms, output, meters) 1b. Dark tokens 6. Prose (articles, guides, tool content) 2. Base / reset 7. Page sections (hero, grids, CTA) 3. Layout 8. Utilities 4. Components 9. Print ========================================================================== */ /* 0. FONTS (self-hosted, no Google request - faster and GDPR-friendly) --- */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); } /* 1. TOKENS -------------------------------------------------------------- */ :root { /* Brand */ --sw-accent: #00a651; --sw-accent-strong: #008a43; --sw-accent-soft: rgba(0, 166, 81, .10); --sw-accent-ring: rgba(0, 166, 81, .28); --sw-on-accent: #ffffff; /* Surfaces */ --sw-bg: #f6f8f7; --sw-surface: #ffffff; --sw-surface-2: #f0f3f1; --sw-surface-3: #e6ebe8; --sw-border: #dde3df; --sw-border-strong: #c5cec8; --sw-dot: rgba(15, 23, 20, .07); /* Text */ --sw-text: #0f1714; --sw-text-2: #3d4a44; --sw-muted: #66736d; /* Status */ --sw-ok: #00a651; --sw-ok-soft: rgba(0, 166, 81, .10); --sw-warn: #b26a00; --sw-warn-soft: rgba(230, 145, 0, .12); --sw-danger: #d92d3a; --sw-danger-soft: rgba(217, 45, 58, .10); --sw-info: #2563eb; --sw-info-soft: rgba(37, 99, 235, .10); /* Type */ --sw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sw-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; --sw-fs-xs: .75rem; --sw-fs-sm: .875rem; --sw-fs-md: 1rem; --sw-fs-lg: 1.125rem; --sw-fs-xl: 1.375rem; --sw-fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); --sw-fs-3xl: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); /* Shape and space */ --sw-radius-sm: 8px; --sw-radius: 12px; --sw-radius-lg: 18px; --sw-pill: 999px; --sw-gap: 1rem; --sw-section: clamp(2.5rem, 2rem + 3vw, 4.5rem); --sw-container: 1180px; --sw-narrow: 760px; --sw-header-h: 64px; /* Effects */ --sw-shadow: 0 1px 2px rgba(15, 23, 20, .04), 0 4px 16px rgba(15, 23, 20, .05); --sw-shadow-lg: 0 2px 4px rgba(15, 23, 20, .05), 0 16px 40px rgba(15, 23, 20, .09); --sw-ease: cubic-bezier(.2, .7, .2, 1); color-scheme: light; } /* 1b. DARK TOKENS -------------------------------------------------------- */ :root[data-theme="dark"] { --sw-accent: #00d97e; --sw-accent-strong: #2ef59a; --sw-accent-soft: rgba(0, 217, 126, .12); --sw-accent-ring: rgba(0, 217, 126, .32); --sw-on-accent: #04130c; --sw-bg: #0b100e; --sw-surface: #111815; --sw-surface-2: #16201c; --sw-surface-3: #1d2924; --sw-border: #23302a; --sw-border-strong: #33443c; --sw-dot: rgba(255, 255, 255, .055); --sw-text: #e8efeb; --sw-text-2: #b9c6c0; --sw-muted: #84948c; --sw-ok: #00d97e; --sw-ok-soft: rgba(0, 217, 126, .12); --sw-warn: #ffb547; --sw-warn-soft: rgba(255, 181, 71, .12); --sw-danger: #ff6370; --sw-danger-soft: rgba(255, 99, 112, .12); --sw-info: #6ea8ff; --sw-info-soft: rgba(110, 168, 255, .12); --sw-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25); --sw-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 16px 40px rgba(0, 0, 0, .4); color-scheme: dark; } /* 2. BASE ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--sw-header-h) + 16px); } body { margin: 0; font-family: var(--sw-font); font-size: var(--sw-fs-md); line-height: 1.65; color: var(--sw-text); background-color: var(--sw-bg); background-image: radial-gradient(var(--sw-dot) 1px, transparent 1px); background-size: 22px 22px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; } [hidden] { display: none !important; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--sw-accent); text-decoration: none; } a:hover { color: var(--sw-accent-strong); text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 .5em; color: var(--sw-text); font-weight: 750; } h1 { font-size: var(--sw-fs-3xl); letter-spacing: -.035em; } h2 { font-size: var(--sw-fs-2xl); } h3 { font-size: var(--sw-fs-xl); } h4 { font-size: var(--sw-fs-lg); } p { margin: 0 0 1em; } code, kbd, pre, samp { font-family: var(--sw-mono); font-size: .92em; } hr { border: 0; height: 1px; background: var(--sw-border); margin: 2rem 0; } ::selection { background: var(--sw-accent); color: var(--sw-on-accent); } :focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; border-radius: 4px; } button, input, select, textarea { font: inherit; color: inherit; } .sw-icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.2em; } .sw-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--sw-accent); color: var(--sw-on-accent); padding: .5rem 1rem; border-radius: var(--sw-radius-sm); } .sw-skip:focus { left: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* 3. LAYOUT -------------------------------------------------------------- */ .sw-container { width: 100%; max-width: var(--sw-container); margin: 0 auto; padding: 0 16px; } .sw-narrow { max-width: var(--sw-narrow); } .sw-main { flex: 1; } .sw-section { padding: var(--sw-section) 0; } .sw-section + .sw-section { padding-top: 0; } /* Header: centered logo, actions on both sides, nav row below */ .sw-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sw-bg) 82%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--sw-border); } .sw-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--sw-header-h); gap: 12px; } .sw-header__left { display: flex; gap: 6px; } .sw-header__right { display: flex; gap: 6px; justify-content: flex-end; } .sw-logo { display: block; line-height: 0; } .sw-logo img { height: 40px; width: auto; } .sw-logo .sw-logo--dark { display: none; } :root[data-theme="dark"] .sw-logo .sw-logo--light { display: none; } :root[data-theme="dark"] .sw-logo .sw-logo--dark { display: block; } .sw-nav { border-top: 1px solid var(--sw-border); } .sw-nav ul { list-style: none; margin: 0 auto; padding: 0 16px; display: flex; justify-content: center; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: var(--sw-container); } .sw-nav ul::-webkit-scrollbar { display: none; } .sw-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font-size: var(--sw-fs-sm); font-weight: 600; color: var(--sw-text-2); white-space: nowrap; border-radius: var(--sw-radius-sm); } .sw-nav a:hover { color: var(--sw-text); background: var(--sw-surface-2); text-decoration: none; } .sw-nav a[aria-current="page"] { color: var(--sw-accent); } @media (max-width: 720px) { .sw-nav ul { justify-content: flex-start; } .sw-logo img { height: 32px; } } /* Theme toggle icon swap */ .sw-theme-icon { display: inline-grid; } .sw-theme-icon--sun { display: none; } :root[data-theme="dark"] .sw-theme-icon--sun { display: inline-grid; } :root[data-theme="dark"] .sw-theme-icon--moon { display: none; } /* Search overlay */ .sw-search { display: none; border-top: 1px solid var(--sw-border); padding: 12px 0; } .sw-search.is-open { display: block; } .sw-search form { display: flex; gap: 8px; } /* Footer */ .sw-footer { margin-top: var(--sw-section); border-top: 1px solid var(--sw-border); background: var(--sw-surface); padding: 3rem 0 1.5rem; font-size: var(--sw-fs-sm); color: var(--sw-text-2); } .sw-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; } .sw-footer h3 { font-size: var(--sw-fs-sm); text-transform: uppercase; letter-spacing: .08em; font-family: var(--sw-mono); color: var(--sw-muted); font-weight: 600; margin-bottom: 1rem; } .sw-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .sw-footer a { color: var(--sw-text-2); } .sw-footer a:hover { color: var(--sw-accent); } .sw-footer__bottom { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sw-border); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: var(--sw-muted); } @media (max-width: 860px) { .sw-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .sw-footer__grid { grid-template-columns: 1fr; } } /* Breadcrumbs: */ .sw-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 1.25rem; font-size: var(--sw-fs-sm); color: var(--sw-muted); } .sw-crumbs li + li::before { content: "/"; margin-right: 6px; opacity: .5; } .sw-crumbs a { color: var(--sw-muted); } .sw-crumbs [aria-current] { color: var(--sw-text-2); } /* Two-column page with sidebar:
main
*/ .sw-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem; align-items: start; } .sw-layout > aside { position: sticky; top: calc(var(--sw-header-h) + 60px); display: grid; gap: 1rem; } @media (max-width: 980px) { .sw-layout { grid-template-columns: 1fr; } .sw-layout > aside { position: static; } } /* 4. COMPONENTS ---------------------------------------------------------- */ /* Button: .. variants: --primary --ghost --sm --lg --block */ .sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .7rem 1.15rem; min-height: 44px; font-weight: 650; font-size: var(--sw-fs-sm); line-height: 1; border: 1px solid var(--sw-border-strong); border-radius: var(--sw-radius-sm); background: var(--sw-surface); color: var(--sw-text); cursor: pointer; transition: background .15s, border-color .15s, transform .1s, box-shadow .15s; text-decoration: none !important; white-space: nowrap; } .sw-btn:hover { border-color: var(--sw-accent); color: var(--sw-text); } .sw-btn:active { transform: translateY(1px); } .sw-btn--primary { background: var(--sw-accent); border-color: var(--sw-accent); color: var(--sw-on-accent); } .sw-btn--primary:hover { background: var(--sw-accent-strong); border-color: var(--sw-accent-strong); color: var(--sw-on-accent); box-shadow: 0 6px 20px var(--sw-accent-ring); } .sw-btn--ghost { background: transparent; border-color: transparent; } .sw-btn--ghost:hover { background: var(--sw-surface-2); border-color: var(--sw-border); } .sw-btn--sm { min-height: 36px; padding: .5rem .8rem; } .sw-btn--lg { min-height: 52px; padding: .9rem 1.5rem; font-size: var(--sw-fs-md); } .sw-btn--block { width: 100%; } .sw-btn[disabled] { opacity: .5; cursor: not-allowed; } /* Icon-only button: */ .sw-iconbtn { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--sw-radius-sm); border: 1px solid transparent; background: transparent; color: var(--sw-text-2); cursor: pointer; } .sw-iconbtn:hover { background: var(--sw-surface-2); border-color: var(--sw-border); color: var(--sw-text); } .sw-iconbtn .sw-icon { width: 20px; height: 20px; } /* Card:
..
add --link for hover lift, --pad-lg for big padding */ .sw-card { background: var(--sw-surface); border: 1px solid var(--sw-border); border-radius: var(--sw-radius); padding: 1.25rem; } .sw-card--pad-lg { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); } .sw-card--link { display: flex; flex-direction: column; gap: .5rem; color: inherit; transition: border-color .15s, transform .15s var(--sw-ease), box-shadow .15s; position: relative; } .sw-card--link:hover { border-color: var(--sw-accent); transform: translateY(-2px); box-shadow: var(--sw-shadow-lg); text-decoration: none; color: inherit; } .sw-card__icon { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--sw-accent-soft); color: var(--sw-accent); border: 1px solid var(--sw-border); } .sw-card__icon .sw-icon { width: 24px; height: 24px; } .sw-card__title { font-size: var(--sw-fs-lg); font-weight: 700; margin: .25rem 0 0; letter-spacing: -.01em; } .sw-card__text { color: var(--sw-text-2); font-size: var(--sw-fs-sm); margin: 0; } .sw-card__meta { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: 6px; } /* Grid of cards:
..
--2 --3 --4 force columns on desktop */ .sw-grid { display: grid; gap: var(--sw-gap); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .sw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sw-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 960px) { .sw-grid--3, .sw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .sw-grid--2, .sw-grid--3, .sw-grid--4 { grid-template-columns: 1fr; } } /* Badge: Free variants: --ok --warn --danger --info --mono */ .sw-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--sw-pill); font-size: var(--sw-fs-xs); font-weight: 650; border: 1px solid var(--sw-border); background: var(--sw-surface-2); color: var(--sw-text-2); line-height: 1.5; } .sw-badge .sw-icon { width: 14px; height: 14px; } .sw-badge--ok { background: var(--sw-ok-soft); color: var(--sw-ok); border-color: transparent; } .sw-badge--warn { background: var(--sw-warn-soft); color: var(--sw-warn); border-color: transparent; } .sw-badge--danger { background: var(--sw-danger-soft); color: var(--sw-danger); border-color: transparent; } .sw-badge--info { background: var(--sw-info-soft); color: var(--sw-info); border-color: transparent; } .sw-badge--mono { font-family: var(--sw-mono); font-weight: 500; } /* Eyebrow label above headings:

Free tool

*/ .sw-eyebrow { font-family: var(--sw-mono); font-size: var(--sw-fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--sw-accent); font-weight: 600; margin: 0 0 .75rem; display: inline-flex; align-items: center; gap: 8px; } /* Alert:
icon
text
*/ .sw-alert { display: flex; gap: 12px; align-items: flex-start; padding: 1rem 1.1rem; border-radius: var(--sw-radius); border: 1px solid var(--sw-border); background: var(--sw-surface-2); font-size: var(--sw-fs-sm); color: var(--sw-text-2); } .sw-alert > .sw-icon { margin-top: 2px; } .sw-alert p:last-child { margin: 0; } .sw-alert--ok { background: var(--sw-ok-soft); border-color: color-mix(in srgb, var(--sw-ok) 30%, transparent); } .sw-alert--ok > .sw-icon { color: var(--sw-ok); } .sw-alert--warn { background: var(--sw-warn-soft); border-color: color-mix(in srgb, var(--sw-warn) 30%, transparent); } .sw-alert--warn > .sw-icon { color: var(--sw-warn); } .sw-alert--danger { background: var(--sw-danger-soft); border-color: color-mix(in srgb, var(--sw-danger) 30%, transparent); } .sw-alert--danger > .sw-icon { color: var(--sw-danger); } .sw-alert--info { background: var(--sw-info-soft); border-color: color-mix(in srgb, var(--sw-info) 30%, transparent); } .sw-alert--info > .sw-icon { color: var(--sw-info); } /* Table:
..
*/ .sw-table-wrap { overflow-x: auto; border: 1px solid var(--sw-border); border-radius: var(--sw-radius); background: var(--sw-surface); } .sw-table { width: 100%; border-collapse: collapse; font-size: var(--sw-fs-sm); } .sw-table th, .sw-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--sw-border); vertical-align: top; } .sw-table th { font-weight: 650; color: var(--sw-text); background: var(--sw-surface-2); white-space: nowrap; } .sw-table tr:last-child td { border-bottom: 0; } .sw-table td code { white-space: nowrap; } /* FAQ:
Q
A
*/ .sw-faq { display: grid; gap: 10px; } .sw-faq details { background: var(--sw-surface); border: 1px solid var(--sw-border); border-radius: var(--sw-radius); } .sw-faq details[open] { border-color: var(--sw-border-strong); } .sw-faq summary { cursor: pointer; list-style: none; padding: 1rem 1.15rem; font-weight: 650; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .sw-faq summary::-webkit-details-marker { display: none; } .sw-faq summary::after { content: "+"; font-family: var(--sw-mono); font-size: 1.25rem; color: var(--sw-muted); transition: transform .2s; flex: none; } .sw-faq details[open] summary::after { transform: rotate(45deg); color: var(--sw-accent); } .sw-faq details > div { padding: 0 1.15rem 1rem; color: var(--sw-text-2); } .sw-faq details > div p:last-child { margin: 0; } /* Steps list:
  1. Title text
*/ .sw-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 10px; } .sw-steps li { counter-increment: s; position: relative; padding: 1rem 1rem 1rem 3.5rem; background: var(--sw-surface); border: 1px solid var(--sw-border); border-radius: var(--sw-radius); } .sw-steps li::before { content: counter(s); position: absolute; left: 1rem; top: 1rem; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--sw-mono); font-size: var(--sw-fs-xs); font-weight: 700; background: var(--sw-accent-soft); color: var(--sw-accent); border: 1px solid var(--sw-border); } .sw-steps strong { display: block; color: var(--sw-text); } /* Table of contents: */ .sw-toc { font-size: var(--sw-fs-sm); } .sw-toc p { font-family: var(--sw-mono); font-size: var(--sw-fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--sw-muted); margin-bottom: .5rem; } .sw-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .sw-toc a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--sw-text-2); } .sw-toc a:hover { background: var(--sw-surface-2); color: var(--sw-text); text-decoration: none; } /* Stats row:
Label
Value
*/ .sw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--sw-border); border-radius: var(--sw-radius); background: var(--sw-surface); overflow: hidden; } .sw-stats > div { padding: 1rem 1.15rem; border-right: 1px solid var(--sw-border); } .sw-stats > div:last-child { border-right: 0; } .sw-stats dt { font-size: var(--sw-fs-xs); color: var(--sw-muted); font-family: var(--sw-mono); text-transform: uppercase; letter-spacing: .08em; } .sw-stats dd { margin: .25rem 0 0; font-size: var(--sw-fs-xl); font-weight: 750; letter-spacing: -.02em; } @media (max-width: 600px) { .sw-stats > div { border-right: 0; border-bottom: 1px solid var(--sw-border); } .sw-stats > div:last-child { border-bottom: 0; } } /* Ad slot - reserved height prevents layout shift:
..
*/ .sw-ad { display: block; margin: 1.5rem auto; text-align: center; min-height: 100px; overflow: hidden; } .sw-ad--leader { min-height: 100px; } .sw-ad--rect { min-height: 280px; } .sw-ad::before { content: "Advertisement"; display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sw-muted); margin-bottom: 4px; font-family: var(--sw-mono); } /* Toast (created by sw.js): window.SW.toast('Copied') */ .sw-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--sw-text); color: var(--sw-bg); padding: .65rem 1rem; border-radius: var(--sw-pill); font-size: var(--sw-fs-sm); font-weight: 600; z-index: 200; transition: opacity .2s, transform .2s var(--sw-ease); pointer-events: none; display: flex; gap: 8px; align-items: center; } .sw-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* Tags/pills row:
..
*/ .sw-pills { display: flex; flex-wrap: wrap; gap: 8px; } .sw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--sw-border); border-radius: var(--sw-pill); background: var(--sw-surface); font-size: var(--sw-fs-sm); color: var(--sw-text-2); font-weight: 550; } .sw-pill:hover, .sw-pill.is-active { border-color: var(--sw-accent); color: var(--sw-accent); text-decoration: none; } /* 5. TOOL UI ------------------------------------------------------------- */ /* Tool shell:
..
*/ .sw-tool { background: var(--sw-surface); border: 1px solid var(--sw-border); border-radius: var(--sw-radius-lg); box-shadow: var(--sw-shadow); overflow: hidden; } .sw-tool__body { padding: clamp(1rem, .75rem + 1.5vw, 1.75rem); } .sw-tool__foot { padding: .85rem clamp(1rem, .75rem + 1.5vw, 1.75rem); border-top: 1px solid var(--sw-border); background: var(--sw-surface-2); font-size: var(--sw-fs-xs); color: var(--sw-muted); display: flex; gap: 8px; align-items: center; } /* Segmented tabs:
*/ .sw-tabs { display: inline-flex; padding: 4px; gap: 4px; background: var(--sw-surface-2); border: 1px solid var(--sw-border); border-radius: calc(var(--sw-radius-sm) + 4px); max-width: 100%; overflow-x: auto; } .sw-tabs button { border: 1px solid transparent; background: transparent; padding: .55rem 1rem; border-radius: var(--sw-radius-sm); font-weight: 650; font-size: var(--sw-fs-sm); color: var(--sw-text-2); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; } .sw-tabs button[aria-selected="true"] { background: var(--sw-surface); border-color: var(--sw-border); color: var(--sw-text); box-shadow: var(--sw-shadow); } /* Form fields */ .sw-field { display: grid; gap: 6px; } .sw-label { font-size: var(--sw-fs-sm); font-weight: 650; color: var(--sw-text); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .sw-label output, .sw-label .sw-label__val { font-family: var(--sw-mono); color: var(--sw-accent); font-weight: 600; } .sw-input, .sw-select, .sw-textarea { width: 100%; padding: .7rem .9rem; min-height: 44px; border: 1px solid var(--sw-border-strong); border-radius: var(--sw-radius-sm); background: var(--sw-surface); color: var(--sw-text); transition: border-color .15s, box-shadow .15s; } .sw-input:focus, .sw-select:focus, .sw-textarea:focus { outline: none; border-color: var(--sw-accent); box-shadow: 0 0 0 3px var(--sw-accent-ring); } .sw-textarea { min-height: 140px; resize: vertical; font-family: var(--sw-mono); font-size: var(--sw-fs-sm); } .sw-input--mono { font-family: var(--sw-mono); } /* Range slider: */ .sw-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 99px; background: var(--sw-surface-3); outline: none; margin: 10px 0; accent-color: var(--sw-accent); } .sw-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sw-surface); border: 1px solid var(--sw-accent); box-shadow: 0 0 0 4px var(--sw-accent-soft); cursor: pointer; } .sw-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--sw-surface); border: 1px solid var(--sw-accent); box-shadow: 0 0 0 4px var(--sw-accent-soft); cursor: pointer; } .sw-range::-moz-range-progress { background: var(--sw-accent); height: 6px; border-radius: 99px; } /* Checkbox tile: */ .sw-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .sw-check { display: flex; align-items: center; gap: 10px; padding: .7rem .85rem; border: 1px solid var(--sw-border); border-radius: var(--sw-radius-sm); background: var(--sw-surface); cursor: pointer; font-size: var(--sw-fs-sm); font-weight: 550; user-select: none; transition: border-color .15s, background .15s; } .sw-check:hover { border-color: var(--sw-border-strong); } .sw-check:has(input:checked) { border-color: var(--sw-accent); background: var(--sw-accent-soft); } .sw-check input { width: 18px; height: 18px; accent-color: var(--sw-accent); margin: 0; flex: none; } .sw-check small { display: block; font-family: var(--sw-mono); color: var(--sw-muted); font-size: 11px; font-weight: 400; } /* Output box with actions:
..
..
*/ .sw-output { display: flex; align-items: center; gap: 8px; padding: .5rem .5rem .5rem 1rem; border: 1px solid var(--sw-border-strong); border-radius: var(--sw-radius); background: var(--sw-surface-2); min-height: 64px; } .sw-output__value { flex: 1; min-width: 0; font-family: var(--sw-mono); font-size: clamp(1rem, .85rem + .9vw, 1.45rem); font-weight: 500; letter-spacing: .01em; word-break: break-all; line-height: 1.45; color: var(--sw-text); } .sw-output__actions { display: flex; gap: 4px; flex: none; } /* Strength meter:
*/ .sw-meter { height: 6px; border-radius: 99px; background: var(--sw-surface-3); overflow: hidden; } .sw-meter span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--sw-danger); transition: width .35s var(--sw-ease), background .35s; } .sw-meter[data-level="1"] span { background: var(--sw-danger); } .sw-meter[data-level="2"] span { background: var(--sw-warn); } .sw-meter[data-level="3"] span { background: var(--sw-ok); } .sw-meter[data-level="4"] span { background: var(--sw-accent); } /* Key/value readout:
..
..
*/ .sw-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: var(--sw-fs-sm); } .sw-kv dt { color: var(--sw-muted); } .sw-kv dd { margin: 0; font-family: var(--sw-mono); color: var(--sw-text); word-break: break-word; } /* Code block: 
..
*/ .sw-code { background: var(--sw-surface-2); border: 1px solid var(--sw-border); border-radius: var(--sw-radius); padding: 1rem 1.15rem; overflow-x: auto; font-size: var(--sw-fs-sm); line-height: 1.6; margin: 0 0 1.25rem; } /* 6. PROSE --------------------------------------------------------------- */ /* Wrap any long-form content:
..
. Short paragraphs read best. */ .sw-prose { font-size: 1.0625rem; color: var(--sw-text-2); max-width: 72ch; } .sw-prose > * + * { margin-top: 0; } .sw-prose h2 { margin-top: 2.5rem; color: var(--sw-text); } .sw-prose h3 { margin-top: 1.75rem; color: var(--sw-text); } .sw-prose p, .sw-prose ul, .sw-prose ol { margin-bottom: 1.1em; } .sw-prose ul, .sw-prose ol { padding-left: 1.3em; } .sw-prose li { margin-bottom: .35em; } .sw-prose li::marker { color: var(--sw-accent); } .sw-prose strong { color: var(--sw-text); } .sw-prose :not(pre) > code { background: var(--sw-surface-2); border: 1px solid var(--sw-border); padding: .1em .4em; border-radius: 5px; font-size: .86em; color: var(--sw-text); } .sw-prose blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 1px solid var(--sw-border); border-radius: var(--sw-radius); background: var(--sw-surface); font-style: italic; } .sw-prose img { border-radius: var(--sw-radius); border: 1px solid var(--sw-border); margin: 1.5rem 0; } .sw-prose .sw-table-wrap, .sw-prose .sw-alert, .sw-prose .sw-steps, .sw-prose .sw-faq { margin: 1.25rem 0 1.5rem; max-width: none; } .sw-prose--wide { max-width: none; } /* 7. PAGE SECTIONS ------------------------------------------------------- */ /* Hero:
..
*/ .sw-hero { padding: clamp(2.5rem, 2rem + 4vw, 5.5rem) 0 clamp(2rem, 1.5rem + 2vw, 3rem); text-align: center; position: relative; } .sw-hero h1 { max-width: 18ch; margin: 0 auto .5em; } .sw-hero h1 em { font-style: normal; color: var(--sw-accent); } .sw-hero__lead { font-size: var(--sw-fs-lg); color: var(--sw-text-2); max-width: 60ch; margin: 0 auto 1.75rem; } .sw-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } .sw-hero__trust { margin-top: 1.75rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: var(--sw-fs-sm); color: var(--sw-muted); } .sw-hero__trust span { display: inline-flex; align-items: center; gap: 6px; } .sw-hero__trust .sw-icon { color: var(--sw-accent); } /* Quick scan bar on homepage:
..
*/ .sw-scanbar { display: flex; gap: 8px; max-width: 680px; margin: 0 auto; padding: 8px; background: var(--sw-surface); border: 1px solid var(--sw-border-strong); border-radius: calc(var(--sw-radius) + 4px); box-shadow: var(--sw-shadow-lg); } .sw-scanbar .sw-input { border: 0; box-shadow: none !important; font-family: var(--sw-mono); font-size: var(--sw-fs-sm); background: transparent; } .sw-scanbar__icon { display: grid; place-items: center; padding-left: 8px; color: var(--sw-muted); } @media (max-width: 560px) { .sw-scanbar { flex-wrap: wrap; } .sw-scanbar .sw-btn { width: 100%; } } /* Tool page header:
..
*/ .sw-pagehead { padding: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0 1.5rem; } .sw-pagehead__row { display: flex; gap: 1rem; align-items: flex-start; } .sw-pagehead__icon { width: 56px; height: 56px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--sw-accent-soft); color: var(--sw-accent); border: 1px solid var(--sw-border); } .sw-pagehead__icon .sw-icon { width: 30px; height: 30px; } .sw-pagehead h1 { font-size: var(--sw-fs-2xl); margin-bottom: .35em; } .sw-pagehead__lead { color: var(--sw-text-2); margin: 0 0 .85rem; max-width: 70ch; } @media (max-width: 560px) { .sw-pagehead__row { flex-direction: column; } } /* Section heading row:

..

..

View all
*/ .sw-sechead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .sw-sechead h2 { margin: 0 0 .25rem; } .sw-sechead p { margin: 0; color: var(--sw-text-2); } /* Feature list with icons: */ .sw-features { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .sw-features li { display: flex; gap: 12px; padding: 1.1rem; background: var(--sw-surface); border: 1px solid var(--sw-border); border-radius: var(--sw-radius); } .sw-features li > .sw-icon { width: 24px; height: 24px; color: var(--sw-accent); margin-top: 2px; } .sw-features strong { display: block; margin-bottom: 2px; } .sw-features p { margin: 0; font-size: var(--sw-fs-sm); color: var(--sw-text-2); } /* Call to action band:
..
*/ .sw-cta { border: 1px solid var(--sw-border); border-radius: var(--sw-radius-lg); padding: clamp(1.5rem, 1rem + 3vw, 3rem); background: radial-gradient(600px 200px at 100% 0%, var(--sw-accent-soft), transparent 70%), var(--sw-surface); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .sw-cta h2 { margin: 0 0 .35rem; } .sw-cta p { margin: 0; color: var(--sw-text-2); } /* 8. UTILITIES ----------------------------------------------------------- */ .u-center { text-align: center; } .u-muted { color: var(--sw-muted); } .u-mono { font-family: var(--sw-mono); } .u-mt-0 { margin-top: 0 !important; } .u-mb-0 { margin-bottom: 0 !important; } .u-mt { margin-top: 1rem; } .u-mt-lg { margin-top: 2rem; } .u-mb { margin-bottom: 1rem; } .u-mb-lg { margin-bottom: 2rem; } .u-stack { display: grid; gap: 1rem; } .u-stack-lg { display: grid; gap: 1.5rem; } .u-stack > *, .u-stack-lg > * { min-width: 0; } .u-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .u-between { justify-content: space-between; } .u-hide-mobile { } @media (max-width: 600px) { .u-hide-mobile { display: none !important; } } /* 9. PRINT --------------------------------------------------------------- */ @media print { body { background: #fff; color: #000; } .sw-header, .sw-footer, .sw-ad, .sw-nav, .sw-output__actions { display: none !important; } .sw-card, .sw-tool { box-shadow: none; } }