/* ════════════════════════════════════════════════════════════════════════ design-system.css v2 — Bootstrap "Warm Glass" (Base44-style). THE single source of truth for the visual layer, landing → product. Loaded in on EVERY page (cache-busted ?v=2, enforced by scripts/design-lint.sh at deploy time). v2 direction (distilled from Base44 refs): • Warm cream surfaces floating on a vivid indigo→mint gradient environment. • Shadow-driven elevation, hairline edges, generous radii, big friendly numerals; pastel data-chips; technical mono-labels as accents. • Light is the default; dark via html[data-theme="dark"]. The choice lives in localStorage.bootstrap_theme and is applied pre-paint by the standard theme-boot snippet (script#theme-boot in every head); first visit defaults to LIGHT (the snippet always stamps data-theme, so no OS-preference fallback exists — flip via the footer toggle). • Backward compatible: every v1 token and .glass-* primitive keeps its name; v2 adds .ds-* components on top. • CANVAS-SAFE: never touches the App Store render artefacts (.canvas/.phone/.callout/.preview-wrapper) — those are export pixels. ROLLBACK: remove the to this file from page heads and the product falls back to the prior design. ════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap'); /* ─── 1. TOKENS — light (default) ─────────────────────────────────────── */ :root { /* Typography (single source: pages must NOT declare other families) */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; --fs-display: 34px; --fs-h1: 22px; --fs-h2: 17px; --fs-h3: 14.5px; --fs-body: 13.5px; --fs-sm: 12.5px; --fs-xs: 11.5px; --fs-2xs: 10.5px; --lh-tight: 1.18; --lh-body: 1.55; /* Glass surfaces — warm cream (Base44 signature warmth) */ --glass-bg: rgba(255, 254, 250, 0.58); --glass-bg-strong: rgba(255, 254, 249, 0.78); --glass-bg-soft: rgba(255, 253, 248, 0.40); --glass-edge: rgba(255, 255, 255, 0.85); --glass-hair: rgba(28, 24, 66, 0.08); --glass-blur: 22px; --glass-blur-sm: 12px; --glass-shadow: 0 14px 40px rgba(70, 60, 150, 0.14); --glass-shadow-sm: 0 6px 18px rgba(70, 60, 150, 0.10); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); /* Opaque surface for content-dense areas (tables, modals, editors) */ --surface-solid: #FDFCF9; /* Brand accent */ --accent: #635BFF; --accent-2: #7C3AED; --accent-grad: linear-gradient(135deg, #7C3AED 0%, #635BFF 100%); --accent-weak: rgba(99, 91, 255, 0.14); --accent-ink: #5048D6; /* Semantic status */ --ok: #10B981; --ok-weak: rgba(16, 185, 129, 0.14); --ok-ink: #067A55; --warn: #F59E0B; --warn-weak: rgba(245, 158, 11, 0.16); --warn-ink: #92600A; --err: #EF4444; --err-weak: rgba(239, 68, 68, 0.13); --err-ink: #C22F2F; /* Pastel data-chips (Base44 category pills) */ --chip-blue-bg: #DCEBFA; --chip-blue-ink: #1D5FA8; --chip-mint-bg: #D9F2E8; --chip-mint-ink: #0F7A5C; --chip-lime-bg: #E9F3C9; --chip-lime-ink: #56761A; --chip-peach-bg: #FDE4D2; --chip-peach-ink: #B4501E; --chip-lilac-bg: #E8E3FB; --chip-lilac-ink: #5B48C2; --chip-rose-bg: #FBDFE7; --chip-rose-ink: #B93A62; /* Environment gradient base */ --mesh-base: #ECEDF9; /* Segmented control active pill */ --seg-active: #FFFFFF; /* ── LEGACY tokens → v2 values (existing pages inherit the look) ── */ --bg: var(--mesh-base); --bg-soft: #F5F5FB; --surface: var(--glass-bg); --ink: #16172E; --ink-2: #222448; --ink-3: #4A4D6B; --ink-4: #5C5F7A; --ink-5: #8A8DA6; --line: var(--glass-hair); --line-2: rgba(28, 24, 66, 0.13); --purple: #635BFF; --purple-d: #4F46E5; --purple-l: #A5A1FF; --green: #10B981; --amber: #F59E0B; --pink: #EC4899; --shadow-1: var(--glass-shadow-sm); --shadow-2: var(--glass-shadow-sm); --shadow-3: var(--glass-shadow); --shadow-p: var(--glass-shadow-sm); --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 28px; } /* ─── TOKENS — dark ───────────────────────────────────────────────────── */ html[data-theme="dark"] { --glass-bg: rgba(30, 30, 56, 0.55); --glass-bg-strong: rgba(34, 34, 64, 0.74); --glass-bg-soft: rgba(20, 20, 42, 0.40); --glass-edge: rgba(255, 255, 255, 0.12); --glass-hair: rgba(255, 255, 255, 0.08); --glass-shadow: 0 16px 44px rgba(0, 0, 0, 0.50); --glass-shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.40); --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08); --surface-solid: #15162C; --accent-weak: rgba(99, 91, 255, 0.20); --accent-ink: #A5A1FF; --ok-weak: rgba(16, 185, 129, 0.18); --ok-ink: #34D399; --warn-weak: rgba(245, 158, 11, 0.18); --warn-ink: #FBBF24; --err-weak: rgba(239, 68, 68, 0.18); --err-ink: #F87171; --chip-blue-bg: rgba(96, 165, 250, 0.18); --chip-blue-ink: #93C5FD; --chip-mint-bg: rgba(52, 211, 153, 0.16); --chip-mint-ink: #6EE7B7; --chip-lime-bg: rgba(163, 230, 53, 0.14); --chip-lime-ink: #BEF264; --chip-peach-bg: rgba(251, 146, 60, 0.16); --chip-peach-ink: #FDBA74; --chip-lilac-bg: rgba(167, 139, 250, 0.18); --chip-lilac-ink: #C4B5FD; --chip-rose-bg: rgba(244, 114, 182, 0.16); --chip-rose-ink: #F9A8D4; --mesh-base: #070714; --seg-active: rgba(255, 255, 255, 0.14); --bg: var(--mesh-base); --bg-soft: #0E0E22; --surface: var(--glass-bg); --ink: #F4F5FF; --ink-2: #E6E7F5; --ink-3: #C9CCDD; --ink-4: #9EA1BA; --ink-5: #7A7E95; --line: var(--glass-hair); --line-2: rgba(255, 255, 255, 0.14); } /* NOTE: no OS-preference fallback block — theme-boot always stamps data-theme (light by default), so an unset state never reaches the CSS. If the product ever adopts OS-honoring first paint, reintroduce the media block AND change the snippet + footer-widget default together. */ /* ─── 2. ENVIRONMENT (vivid gradient the cream cards float on) ────────── */ body { background: var(--mesh-base); font-family: var(--font-sans); } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 10% 6%, rgba(99, 91, 255, 0.22), transparent 44%), radial-gradient(circle at 90% 10%, rgba(255, 143, 177, 0.15), transparent 42%), radial-gradient(circle at 84% 90%, rgba(124, 58, 237, 0.15), transparent 46%), radial-gradient(circle at 16% 92%, rgba(97, 218, 187, 0.20), transparent 46%), radial-gradient(circle at 55% 50%, rgba(169, 180, 242, 0.10), transparent 55%); } html[data-theme="dark"] body::before { background: radial-gradient(circle at 10% 6%, rgba(99, 91, 255, 0.26), transparent 44%), radial-gradient(circle at 90% 10%, rgba(124, 58, 237, 0.22), transparent 46%), radial-gradient(circle at 84% 90%, rgba(99, 91, 255, 0.16), transparent 48%), radial-gradient(circle at 16% 92%, rgba(45, 170, 145, 0.12), transparent 46%); } /* Homogeneity details: selection, focus ring, scrollbars */ ::selection { background: var(--accent-weak); } :where(a, button, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-track { background: transparent; } /* ─── 3. GLASS PRIMITIVES (v1, kept) ──────────────────────────────────── */ .glass-card, .glass-panel { background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-edge); border-radius: var(--r-lg); box-shadow: var(--glass-shadow), var(--glass-inset); } .glass-card.is-solid, .glass-panel.is-solid { background: var(--surface-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } .glass-panel-sm { background: var(--glass-bg-soft); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--glass-edge); border-radius: var(--r-md); } .glass-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; font-size: 13px; padding: 11px 16px; border-radius: 13px; cursor: pointer; border: none; transition: transform .05s ease, opacity .15s ease, box-shadow .15s ease; } .glass-btn:active { transform: translateY(1px); } .glass-btn.is-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 8px 20px rgba(99, 91, 255, 0.38); } .glass-btn.is-primary:hover { box-shadow: 0 10px 26px rgba(99, 91, 255, 0.5); } .glass-btn.is-ghost { background: var(--glass-bg); color: var(--ink); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--glass-edge); } .glass-btn.is-ghost:hover { border-color: var(--accent); color: var(--accent-ink); } .glass-btn.is-danger { background: var(--err-weak); color: var(--err-ink); } .glass-btn:disabled { opacity: .45; cursor: not-allowed; } .glass-input, .glass-select, .glass-textarea { width: 100%; font-family: inherit; font-size: 13px; color: var(--ink); background: var(--glass-bg-soft); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--glass-edge); border-radius: 12px; padding: 10px 13px; transition: border-color .15s ease, box-shadow .15s ease; } .glass-input::placeholder, .glass-textarea::placeholder { color: var(--ink-5); } .glass-input:focus, .glass-select:focus, .glass-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } .glass-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); border: 1px solid var(--glass-edge); cursor: pointer; } .glass-pill.is-active { background: var(--accent-grad); color: #fff; border-color: transparent; box-shadow: 0 6px 16px rgba(99, 91, 255, 0.4); } .glass-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-ink); font-variant-numeric: tabular-nums; } .glass-divider { height: 1px; background: var(--glass-hair); border: 0; margin: 14px 0; } .glass-blur { -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } .glass-frost { background: var(--glass-bg); border: 1px solid var(--glass-edge); } .glass-round { border-radius: var(--r-lg); } .glass-shadow { box-shadow: var(--glass-shadow); } /* ─── 4. v2 COMPONENTS (.ds-*) ────────────────────────────────────────── */ /* Pastel data-chip (Base44 category pill). Markup: span.ds-chip.is-mint */ .ds-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent-weak); color: var(--accent-ink); white-space: nowrap; } .ds-chip.is-blue { background: var(--chip-blue-bg); color: var(--chip-blue-ink); } .ds-chip.is-mint { background: var(--chip-mint-bg); color: var(--chip-mint-ink); } .ds-chip.is-lime { background: var(--chip-lime-bg); color: var(--chip-lime-ink); } .ds-chip.is-peach { background: var(--chip-peach-bg); color: var(--chip-peach-ink); } .ds-chip.is-lilac { background: var(--chip-lilac-bg); color: var(--chip-lilac-ink); } .ds-chip.is-rose { background: var(--chip-rose-bg); color: var(--chip-rose-ink); } .ds-chip.is-ok { background: var(--ok-weak); color: var(--ok-ink); } .ds-chip.is-warn { background: var(--warn-weak); color: var(--warn-ink); } .ds-chip.is-err { background: var(--err-weak); color: var(--err-ink); } /* KPI stat card interior (use inside .glass-card). Markup: .ds-kpi > (.k-tx > .k-label + .k-value + .k-delta) + .k-ic */ .ds-kpi { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .ds-kpi .k-label { font-size: 12px; font-weight: 600; color: var(--ink-4); } .ds-kpi .k-value { font-size: 30px; font-weight: 800; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 4px; } .ds-kpi .k-delta { font-size: 12px; font-weight: 700; margin-top: 4px; } .ds-kpi .k-delta.is-up { color: var(--ok-ink); } .ds-kpi .k-delta.is-down { color: var(--err-ink); } .ds-kpi .k-delta .k-vs { color: var(--ink-5); font-weight: 500; } .ds-kpi .k-ic { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-bg-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow-sm); font-size: 16px; color: var(--ink-3); } /* Segmented control (translucent track, solid active pill). Markup: .ds-seg > button (+ .is-active) */ .ds-seg { display: inline-flex; align-items: center; gap: 4px; padding: 4px; background: var(--glass-bg-soft); border: 1px solid var(--glass-edge); border-radius: 999px; -webkit-backdrop-filter: blur(var(--glass-blur-sm)); backdrop-filter: blur(var(--glass-blur-sm)); } .ds-seg > button { font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-4); background: transparent; border: none; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: color .15s, background .15s; display: inline-flex; align-items: center; gap: 6px; } .ds-seg > button:hover { color: var(--ink-2); } .ds-seg > button.is-active { background: var(--seg-active); color: var(--ink); box-shadow: var(--glass-shadow-sm); } /* Icon chip-button (Base44 "Add styling" style). Markup: button.ds-chip-btn */ .ds-chip-btn { display: inline-flex; align-items: center; gap: 7px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-3); background: var(--glass-bg); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; cursor: pointer; transition: border-color .15s, color .15s; } .ds-chip-btn:hover { border-color: var(--accent); color: var(--accent-ink); } /* Progress checklist (Base44 build dialog). Markup: ul.ds-check > li(.is-done|.is-pending) > span.ck + text */ .ds-check { list-style: none; margin: 0; padding: 0; } .ds-check li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13.5px; color: var(--ink-2); border-bottom: 1px solid var(--line); } .ds-check li:last-child { border-bottom: none; } .ds-check .ck { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; border: 1.5px solid var(--ok); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .ds-check li.is-pending { color: var(--ink-5); } .ds-check li.is-pending .ck { border-color: var(--line-2); color: transparent; } /* Skeleton shimmer bar. Markup: div.ds-skeleton (set width inline) */ .ds-skeleton { height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--line) 25%, var(--glass-bg-strong) 45%, var(--line) 65%); background-size: 200% 100%; animation: ds-shimmer 1.4s ease-in-out infinite; } @keyframes ds-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Empty state. Markup: .ds-empty > .e-ic + .e-title + .e-sub + optional CTA */ .ds-empty { text-align: center; padding: 44px 20px; } .ds-empty .e-ic { font-size: 26px; opacity: .55; margin-bottom: 10px; } .ds-empty .e-title { font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 5px; } .ds-empty .e-sub { font-size: 12.5px; color: var(--ink-5); max-width: 380px; margin: 0 auto 14px; line-height: 1.5; } /* Data table. Markup: table.ds-table */ .ds-table { width: 100%; border-collapse: collapse; font-size: 13px; } .ds-table th { text-align: left; font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-5); padding: 8px 12px; border-bottom: 1px solid var(--line-2); } .ds-table td { padding: 11px 12px; border-bottom: 1px solid var(--line); color: var(--ink-2); } .ds-table tbody tr:last-child td { border-bottom: none; } .ds-table tbody tr:hover { background: var(--glass-bg-soft); } /* Technical mono-label (Treks-style caps accent). Markup: span.ds-mono-label */ .ds-mono-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); display: inline-flex; align-items: center; gap: 6px; } /* Modal + overlay. Markup: .ds-overlay > .ds-modal */ .ds-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(10, 10, 30, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px; } .ds-modal { width: min(560px, 100%); max-height: 86vh; overflow: auto; background: var(--surface-solid); border: 1px solid var(--glass-edge); border-radius: var(--r-lg); box-shadow: var(--glass-shadow); padding: 22px; } /* ─── 5. SAFETY: never frost the App Store render canvas (export pixels) ── */ .canvas, .canvas *, .phone, .phone *, .callout, .preview-wrapper { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .canvas::before, .preview-wrapper::before { content: none !important; } /* Reduced-motion / reduced-transparency / print */ @media (prefers-reduced-transparency: reduce) { .glass-card, .glass-panel, .glass-panel-sm, .glass-btn.is-ghost, .glass-input, .glass-pill, .ds-seg { -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .ds-skeleton { animation: none; } } @media print { body::before { display: none; } }