/* Bayton design system - VENDORED from bayton-design ds-bundle @ v1.4.5. Do not edit here; re-vendor from source. Fonts self-hosted via /static/fonts.css. */ @import url("/static/fonts.css"); /* ============================================================================ BAYTON DESIGN LANGUAGE - STYLES The canonical self-contained stylesheet: font imports, tokens, and the component layer. This is the public CSS entrypoint for tagged releases. ========================================================================== */ /* TOKENS */ /* ---- tokens (inlined) ---- */ /* ============================================================================ BAYTON DESIGN LANGUAGE - TOKENS Single source of truth for colour, type, space, radius, motion. Reconciled from: - gen.bayton.org hub (warm dark, Raleway display, ghost numerals) - KAG/WAG/DAG/CAG Studio (studio.css: semantic accents, status, fields) - bayton.org OG 11ty (Open Sans body, brand accent palette, light mode) Themes are switched by `data-theme` on : (none) | "dark" -> warm dark (canonical dark) "light-cool" -> neutral light (CANONICAL light - locked) "light-warm" -> warm light (reference only, kept for future) ========================================================================== */ :root, [data-theme="dark"] { /* - neutrals: warm dark - */ --canvas: #131110; --canvas-2: #1a1715; --surface: #201c19; --surface-2: #2a2521; --field: var(--surface); --field-raised: #27221f; --line: rgba(245, 239, 232, 0.10); --line-2: rgba(245, 239, 232, 0.18); --ink: #f5efe8; --ink-dim: #aba49b; --ink-faint: #6f685f; /* - accent: bayton orange (constant across every theme) - */ --accent: #ff4500; --accent-2: #ff6a33; --accent-lo: #c0360a; --accent-soft: rgba(255, 69, 0, 0.13); --accent-line: rgba(255, 69, 0, 0.40); /* - bayton accent palette - ONE collapsed tier --------------------------- The real bayton.org + sysapps values, used for BOTH status and callouts / contrast (no separate "soft status" set). Semantics: info -> --blue success -> --green error -> --red warn / alert -> --accent (orange, per 11ty callout-orange) --blood is the deep pressed/secondary orange. */ --blue: #0283bd; --green: #15B007; --red: #c30000; --blood: #ce3800; /* status aliases so component CSS can read intent, not colour */ --ok: var(--green); --err: var(--red); --warn: var(--accent); --info: var(--blue); /* signature ambient glow behind hero / panels */ --glow: rgba(255, 69, 0, 0.11); /* - type - */ --display: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ui: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, monospace; /* type scale (display-led, fluid) */ --fs-display: clamp(2.6rem, 6vw, 4.2rem); --fs-h1: clamp(2rem, 4vw, 3rem); --fs-h2: clamp(1.6rem, 3vw, 2.3rem); --fs-h3: 1.25rem; --fs-lede: clamp(1.05rem, 1.5vw, 1.2rem); --fs-body: 1.0625rem; /* 17px */ --fs-sm: 0.92rem; --fs-xs: 0.78rem; --fs-kicker: 0.72rem; /* - space scale - */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; /* - radius - */ --r-xs: 5px; --r-sm: 9px; --r-md: 11px; --r-lg: 16px; --r-xl: 20px; --r-pill: 999px; /* - motion - */ --t-fast: 150ms; --t-base: 240ms; --t-slow: 420ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* - layout - */ --maxw: 1060px; /* content container max width */ --navh: 66px; --gutter: 1.6rem; /* container side padding (desktop) */ --gutter-sm: 1.1rem; /* container side padding (phones, <= --bp-sm) */ /* - breakpoints - THE responsive standard ------------------------------- One scale for every project. @media can't read custom properties, so use the literal px in `@media (max-width: ...)` - these tokens are the reference (and usable in JS / container queries). Intents: sm phones - single column, compact gutters md tablet portrait - tables collapse to cards, 2-col forms become 1-col lg tablet landscape - 3-col grids become 2, sidebars stack xl desktop */ --bp-sm: 600px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; color-scheme: dark; } /* ---- LIGHT · WARM (REFERENCE ONLY - not canonical) ------------------------ Kept documented for a future warm-light direction. The canonical light theme is light-cool below. Warm paper + warm near-black ink. */ [data-theme="light-warm"] { --canvas: #f6f1ea; --canvas-2: #efe8de; --surface: #fffdf9; --surface-2: #ffffff; --field: var(--surface); --field-raised: #ffffff; --line: rgba(40, 30, 20, 0.12); --line-2: rgba(40, 30, 20, 0.20); --ink: #1f1a15; --ink-dim: #6b6259; --ink-faint: #9c9389; --accent-soft: rgba(255, 69, 0, 0.10); --accent-line: rgba(255, 69, 0, 0.42); --glow: rgba(255, 69, 0, 0.08); color-scheme: light; } /* ---- LIGHT · COOL (CANONICAL light) - studio's existing neutral light ------ */ [data-theme="light-cool"] { --canvas: #e9e9ea; --canvas-2: #f1f1f2; --surface: #fafafa; --surface-2: #ffffff; --field: var(--surface-2); --field-raised: #ffffff; --line: rgba(20, 20, 22, 0.11); --line-2: rgba(20, 20, 22, 0.22); --ink: #18181a; --ink-dim: #5a5a5e; --ink-faint: #9a9a9e; --accent-soft: rgba(255, 69, 0, 0.10); --accent-line: rgba(255, 69, 0, 0.42); --glow: rgba(255, 69, 0, 0.07); color-scheme: light; } /* COMPONENTS */ .material-symbols-outlined { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: radial-gradient(130% 100% at 84% -12%, var(--glow), transparent 60%), var(--canvas); background-attachment: fixed; color: var(--ink); font-family: var(--ui); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease); } /* Form controls do not inherit typography from the page by default - the UA stylesheet gives button/input/select/textarea their own font, which wins over inheritance. Inherit the UI font once here so every control matches the body without each component re-declaring font-family. (Family only, not the `font` shorthand, so component-level size/weight/line-height are untouched.) */ button, input, optgroup, select, textarea { font-family: inherit; } a { color: var(--accent); text-decoration: none; } .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; } /* ---------------------------------------------------------------- typography */ .text-display, .display, h1.text-display, h1.display { font-family: var(--display); font-weight: 700; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.015em; text-wrap: balance; margin: 0; } h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -0.01em; line-height: 1.06; } h1 { font-size: var(--fs-h1); font-weight: 700; } h2 { font-size: var(--fs-h2); font-weight: 700; } h3 { font-size: var(--fs-h3); font-weight: 700; } .text-lede, .lede { color: var(--ink-dim); font-size: var(--fs-lede); max-width: 46ch; text-wrap: pretty; } /* kicker / eyebrow - mono, uppercase, orange */ .eyebrow, .kicker { font-family: var(--mono); font-size: var(--fs-kicker); font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; } .eyebrow.sm, .kicker.sm { font-size: 0.64rem; letter-spacing: 0.18em; } .eyebrow.lg, .kicker.lg { font-size: var(--fs-sm); letter-spacing: 0.24em; } .eyebrow.muted, .kicker.muted { color: var(--ink-dim); letter-spacing: 0.22em; } /* mono label / caption */ .mono-label, .label-mono { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } /* ghost numeral - oversized, near-invisible display digit */ .ghost-number, .ghost-num { font-family: var(--display); font-weight: 800; line-height: 1; color: var(--ink); opacity: 0.05; pointer-events: none; user-select: none; } /* ---------------------------------------------------------------- buttons */ .button, .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ui); font-weight: 600; font-size: var(--fs-sm); padding: 0.8rem 1.4rem; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast); } .button:active, .btn:active { transform: scale(0.98); } .button .button-arrow, .btn .arr { transition: transform var(--t-fast); } .button:hover .button-arrow, .btn:hover .arr { transform: translateX(3px); } .button.primary, .btn-primary { background: var(--accent); color: #fff; } .button.primary:hover, .btn-primary:hover { background: var(--accent-2); } .button.ghost, .btn-ghost { color: var(--ink-dim); border-color: var(--line); background: transparent; } .button.ghost:hover, .btn-ghost:hover { color: var(--ink); border-color: var(--line-2); } .button.sm, .btn-sm { padding: 0.55rem 0.95rem; font-size: var(--fs-xs); border-radius: var(--r-sm); } .button.lg, .btn-lg, .btn.lg { padding: 1rem 1.75rem; font-size: 1rem; border-radius: var(--r-lg); } .button.block, .btn.block { width: 100%; justify-content: center; } /* ---------------------------------------------------------------- form fields */ .field { margin-bottom: 1.7rem; } .field-label { display: block; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 0.55rem; } .field-label .opt { color: var(--ink-faint); text-transform: none; letter-spacing: 0; font-weight: 400; } .input, .text-input, .select-input { width: 100%; background: var(--field, var(--surface)); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); box-sizing: border-box; min-height: 46px; line-height: 1.35; padding: 0.7rem 0.95rem; font-family: var(--ui); font-size: 0.98rem; outline: none; transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); } .surface-card :is(.input, .text-input, .select-input), .card :is(.input, .text-input, .select-input), .step-card :is(.input, .text-input, .select-input), .flow-step :is(.input, .text-input, .select-input), .qa-row :is(.input, .text-input, .select-input), .qa :is(.input, .text-input, .select-input), .cta-card :is(.input, .text-input, .select-input), .filter-bar :is(.input, .text-input, .select-input), .filters :is(.input, .text-input, .select-input), .modal :is(.input, .text-input, .select-input), .data-table-wrap :is(.input, .text-input, .select-input), .table-wrap :is(.input, .text-input, .select-input), .tile :is(.input, .text-input, .select-input), .service-tile :is(.input, .text-input, .select-input), .feature-tile :is(.input, .text-input, .select-input), .bento-tile :is(.input, .text-input, .select-input), .price-card :is(.input, .text-input, .select-input), .health-card :is(.input, .text-input, .select-input), .status-card :is(.input, .text-input, .select-input), .comparison-card :is(.input, .text-input, .select-input), .compare-col :is(.input, .text-input, .select-input), .demo :is(.input, .text-input, .select-input) { background: var(--field-raised, var(--field, var(--surface))); } .input::placeholder, .text-input::placeholder { color: var(--ink-faint); } .input:is([type="date"], [type="time"]), .text-input:is([type="date"], [type="time"]) { min-height: 44px; line-height: 1.2; color-scheme: dark; } html:is([data-theme="light-cool"], [data-theme="light-warm"]) .input:is([type="date"], [type="time"]), html:is([data-theme="light-cool"], [data-theme="light-warm"]) .text-input:is([type="date"], [type="time"]) { color-scheme: light; } .input:is([type="date"], [type="time"])::-webkit-calendar-picker-indicator, .text-input:is([type="date"], [type="time"])::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.65; } .input:focus, .select-input:focus { border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } .input.mono, .text-input.mono { font-family: var(--mono); font-size: 0.9rem; } .range-group, .range-field { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); } .range-control, .range-field-control { width: auto; min-width: 8rem; flex: 0 1 9rem; } .range-separator, .range-field-sep { color: var(--ink-dim); font-size: var(--fs-sm); } @media (max-width: 420px) { .range-control, .range-field-control { flex-basis: 100%; } .range-separator, .range-field-sep { width: 100%; text-align: center; } } .slider-control, .slider-field { display: grid; gap: var(--sp-2); } .slider-control .field-label, .slider-field .field-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: 0; } .slider-output, .slider-value { font-family: var(--display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink); } .input-range, .range-input { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--r-pill); outline: none; cursor: pointer; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) var(--fill, 0%), var(--surface-2) var(--fill, 0%), var(--surface-2) 100%); } .input-range::-webkit-slider-thumb, .range-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 3px solid var(--canvas); box-shadow: 0 0 0 1px var(--accent); } .input-range::-moz-range-thumb, .range-input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 3px solid var(--canvas); box-shadow: 0 0 0 1px var(--accent); } .input-range:focus-visible, .range-input:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); } .input-range:disabled, .range-input:disabled { opacity: 0.45; cursor: not-allowed; } .input.select, .select-input { -webkit-appearance: none; appearance: none; padding-right: 2.4rem; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.95rem center; } /* segmented option cards */ .choice-grid, .seg { display: grid; gap: 0.6rem; } .choice-grid.cols-2, .seg.cols-2 { grid-template-columns: 1fr 1fr; } .choice-grid.cols-3, .seg.cols-3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 600px) { .choice-grid.cols-3, .seg.cols-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 420px) { .choice-grid.cols-2, .choice-grid.cols-3, .seg.cols-2, .seg.cols-3 { grid-template-columns: 1fr; } } /* wrap variant - content-sized chips that flow; the multi-select layout. (.opt-card serves both: single-select = one .on; multi-select = .seg.wrap, several .on at once, each a