/* Botnest Design System — global entry point. Link this one file. @import lines only. */ /* tokens\fonts.css */ /* ============================================================ Botnest web fonts. CANONICAL: Freight Sans Pro (UI + headings) and Freight Text Pro (long-form reading), served by Adobe Fonts. >>> REPLACE `ADOBE_FONTS_KIT_ID` with your Typekit kit id, <<< >>> then uncomment the @import line below. <<< FALLBACK (active by default, fully self-hosted): Alegreya Sans + Alegreya — the closest free lookalikes (same humanist warmth, superb for hours-long reading). Latin-subset woff2 files live in fonts/ (OFL licensed); every preview and demo renders correctly on the fallbacks alone. Extended-latin / other scripts: see fonts/README.md. ============================================================ */ /* @import url("https://use.typekit.net/ADOBE_FONTS_KIT_ID.css"); */ /* fonts\self-hosted.css */ /* Botnest self-hosted fallback fonts — Alegreya Sans + Alegreya (latin subset), downloaded from Google Fonts (OFL licensed). Imported by tokens/fonts.css. */ @font-face { font-family: "Alegreya"; src: url("../fonts/Alegreya-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("../fonts/Alegreya-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("../fonts/Alegreya-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("../fonts/Alegreya-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya"; src: url("../fonts/Alegreya-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-400i.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-700i.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Alegreya Sans"; src: url("../fonts/AlegreyaSans-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } :root { /* Adobe Fonts family names first; fallbacks fully functional. */ --bn-font-ui: "freight-sans-pro", "Alegreya Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif; --bn-font-reading: "freight-text-pro", "Alegreya", Georgia, "Times New Roman", serif; --bn-font-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace; } /* tokens\colors.css */ /* ============================================================ Botnest color tokens — primitives + semantic aliases. Two first-class themes telling one story: DAWN (default) — golden dawn: warm stone neutrals, alpenglow. NIGHT — aurora night: deep landscape blues, aurora green, rose-magenta shimmer. Set the theme with . No attribute = dawn. Rules encoded here: - Vibrant chrome, calm content: aurora color lives in --bn-chrome-* / --bn-grad-* / accent tokens only. - Semantic exclusivity: green=success, red=danger, amber=warning, glacier blue=interactive. Decorative tokens never restyle actionable elements. - Magenta leans pink/rose (hue ≈ 350). Violet is banned. ============================================================ */ :root { /* ---- Night ramp (cool blue-slate) ---- */ --bn-night-950: #0A101E; --bn-night-925: #0C1424; --bn-night-900: #111A2E; --bn-night-850: #16223A; --bn-night-800: #1C2B48; --bn-night-750: #22314F; --bn-night-700: #2A3B5E; --bn-night-600: #3C5078; --bn-night-500: #566B93; --bn-night-400: #7489AC; --bn-night-300: #93A5C4; --bn-night-200: #B7C4DA; --bn-night-100: #D8E0ED; --bn-night-50: #EDF1F8; /* ---- Stone ramp (warm dawn neutrals) ---- */ --bn-stone-0: #FFFFFF; --bn-stone-50: #FAF7F1; --bn-stone-100: #F3EEE4; --bn-stone-150: #ECE5D7; --bn-stone-200: #E2D9C9; --bn-stone-300: #CFC4AF; --bn-stone-400: #B0A48D; --bn-stone-500: #8B8069; --bn-stone-600: #6E6450; --bn-stone-700: #554C3B; --bn-stone-800: #3B342A; --bn-stone-900: #2A241C; /* ---- Aurora green (teal-leaning; identity + success) ---- */ --bn-green-100: #D9F6E8; --bn-green-200: #ADEBD1; --bn-green-300: #77DCB3; --bn-green-400: #4CCB97; --bn-green-500: #2FB37F; --bn-green-600: #1F9066; --bn-green-700: #187350; --bn-green-800: #135A40; --bn-green-900: #0F4331; /* ---- Aurora rose (magenta that leans pink — never violet) ---- */ --bn-rose-100: #FCE1EC; --bn-rose-200: #F8BFD7; --bn-rose-300: #F195BD; --bn-rose-400: #E76BA3; --bn-rose-500: #D6478A; --bn-rose-600: #B32E6E; --bn-rose-700: #8F2257; --bn-rose-800: #6E1A44; /* ---- Glacier blue (the interactive hue) ---- */ --bn-sky-100: #DCEAFB; --bn-sky-200: #BDD8F7; --bn-sky-300: #97BFF1; --bn-sky-400: #74A8E9; --bn-sky-500: #4C88D8; --bn-sky-600: #2F6ABE; --bn-sky-700: #24539B; --bn-sky-800: #1C4076; /* ---- Dawn gold (decorative alpenglow only — never a control) ---- */ --bn-gold-100: #FBEED3; --bn-gold-200: #F5DCA4; --bn-gold-300: #EDC672; --bn-gold-400: #E0AC47; --bn-gold-500: #C48F2C; --bn-gold-600: #9C701D; --bn-gold-700: #7A5715; /* ---- Red (danger / destructive only) ---- */ --bn-red-100: #FCE3DC; --bn-red-200: #F8C2B4; --bn-red-300: #F29B86; --bn-red-400: #E97757; --bn-red-500: #D4573B; --bn-red-600: #B03E24; --bn-red-700: #8C2F1B; /* ---- Amber (warning / caution only) ---- */ --bn-amber-100: #FBECC9; --bn-amber-200: #F6D88F; --bn-amber-300: #EDBE55; --bn-amber-400: #DBA32E; --bn-amber-500: #B5821A; --bn-amber-600: #8C6410; --bn-amber-700: #6D4E0C; } /* ============ DAWN (default) ============ */ :root, [data-bn-theme="dawn"] { color-scheme: light; --bn-bg: var(--bn-stone-50); --bn-surface: var(--bn-stone-0); --bn-surface-2: var(--bn-stone-100); --bn-surface-3: var(--bn-stone-150); --bn-inset: var(--bn-stone-100); --bn-overlay: rgba(42, 36, 28, 0.44); --bn-glass: rgba(255, 253, 248, 0.80); --bn-chrome-bg: #F6EFE1; --bn-chrome-text: var(--bn-stone-800); --bn-chrome-text-dim: #655C49; --bn-grad-aurora: linear-gradient(150deg, #FDF9EF 0%, #FAF0DC 40%, #F6E7D2 72%, #F3DECD 100%); --bn-grad-aurora-rose: radial-gradient(120% 90% at 88% 8%, rgba(214, 71, 138, 0.10), transparent 60%); --bn-grad-hero: linear-gradient(165deg, #FDF9EF 0%, #F8ECD6 55%, #EFE7D2 100%); --bn-text: var(--bn-stone-900); --bn-text-2: var(--bn-stone-600); --bn-text-3: #776D57; --bn-text-disabled: var(--bn-stone-400); --bn-text-inverse: var(--bn-stone-0); --bn-border-subtle: #ECE4D4; --bn-border: #DCD2BE; --bn-border-strong: #BFB29A; /* Dawn buttons are grounded: deep fill, light label */ --bn-link: var(--bn-sky-700); --bn-link-hover: var(--bn-sky-800); --bn-action: var(--bn-sky-600); --bn-action-hover: var(--bn-sky-700); --bn-action-press: var(--bn-sky-800); --bn-on-action: #FFFFFF; --bn-action-subtle: rgba(47, 106, 190, 0.09); --bn-action-subtle-hover: rgba(47, 106, 190, 0.16); --bn-selected: rgba(47, 106, 190, 0.10); --bn-spotlight-strong: rgba(47, 106, 190, 0.055); /* row-hover spotlight core */ --bn-spotlight-soft: rgba(47, 106, 190, 0.025); --bn-success-fill: var(--bn-green-700); --bn-on-success: #FFFFFF; --bn-success-text: var(--bn-green-700); --bn-success-subtle: #E2F4EA; --bn-success-border: #9BD8BC; --bn-danger-fill: var(--bn-red-600); --bn-danger-hover: var(--bn-red-700); --bn-on-danger: #FFFFFF; --bn-danger-text: var(--bn-red-600); --bn-danger-subtle: #FBE7DF; --bn-danger-border: #F0B4A2; --bn-warning-fill: var(--bn-amber-600); --bn-on-warning: #FFFFFF; --bn-warning-text: var(--bn-amber-600); --bn-warning-subtle: #F9EFD2; --bn-warning-border: #E5C983; --bn-info-text: var(--bn-sky-700); --bn-info-subtle: #E9F0FA; --bn-info-border: #AECBF0; --bn-accent-green: var(--bn-green-600); --bn-accent-rose: var(--bn-rose-500); --bn-accent-gold: var(--bn-gold-400); /* Horizon mark (theme-adaptive, used by AppLogo) */ --bn-logo-sky-a: #0FA36C; --bn-logo-sky-b: #CE3E80; --bn-logo-ground: #554C3B; --bn-focus-ring: var(--bn-sky-600); --bn-focus-glow: 0 0 0 3px rgba(31, 144, 102, 0.22), 0 0 12px rgba(31, 144, 102, 0.18); --bn-shadow-pool: rgba(58, 48, 32, 0.14); /* cursor-pooled tilt shadow */ --bn-shadow-1: 0 1px 2px rgba(58, 48, 32, 0.10); --bn-shadow-2: 0 4px 14px rgba(58, 48, 32, 0.12); --bn-shadow-3: 0 12px 36px rgba(58, 48, 32, 0.18); --bn-glow-green: 0 0 24px rgba(31, 144, 102, 0.14); --bn-glow-rose: 0 0 24px rgba(214, 71, 138, 0.12); --bn-skeleton-a: var(--bn-stone-100); --bn-skeleton-b: var(--bn-stone-150); --bn-track: var(--bn-stone-150); } /* ============ NIGHT ============ */ [data-bn-theme="night"] { color-scheme: dark; /* Surfaces — calm content zones */ --bn-bg: var(--bn-night-925); --bn-surface: var(--bn-night-900); --bn-surface-2: var(--bn-night-850); --bn-surface-3: var(--bn-night-800); --bn-inset: var(--bn-night-950); --bn-overlay: rgba(6, 10, 20, 0.62); --bn-glass: rgba(17, 26, 46, 0.78); /* Chrome — identity zones (nav, headers, heroes) */ --bn-chrome-bg: var(--bn-night-950); --bn-chrome-text: var(--bn-night-100); --bn-chrome-text-dim: var(--bn-night-300); --bn-grad-aurora: linear-gradient(150deg, #0B1526 0%, #0E2038 42%, #113632 78%, #123C31 100%); --bn-grad-aurora-rose: radial-gradient(120% 90% at 88% 8%, rgba(231,107,163,0.12), transparent 62%); --bn-grad-hero: linear-gradient(165deg, #0A101E 0%, #0F2440 55%, #11382C 100%); /* Text */ --bn-text: var(--bn-night-50); --bn-text-2: var(--bn-night-200); --bn-text-3: var(--bn-night-300); --bn-text-disabled: var(--bn-night-500); --bn-text-inverse: var(--bn-night-950); /* Borders */ --bn-border-subtle: #1B2843; --bn-border: #26365A; --bn-border-strong: #35486F; /* Interactive (glacier) — night buttons are moonlit: light fill, dark label */ --bn-link: var(--bn-sky-300); --bn-link-hover: var(--bn-sky-200); --bn-action: var(--bn-sky-300); --bn-action-hover: var(--bn-sky-200); --bn-action-press: var(--bn-sky-400); --bn-on-action: var(--bn-night-950); --bn-action-subtle: rgba(116, 168, 233, 0.14); --bn-action-subtle-hover: rgba(116, 168, 233, 0.22); --bn-selected: rgba(116, 168, 233, 0.16); --bn-spotlight-strong: rgba(116, 168, 233, 0.07); /* row-hover spotlight core */ --bn-spotlight-soft: rgba(116, 168, 233, 0.035); /* Semantic — exclusive hues */ --bn-success-fill: var(--bn-green-300); --bn-on-success: var(--bn-night-950); --bn-success-text: var(--bn-green-300); --bn-success-subtle: rgba(76, 203, 151, 0.14); --bn-success-border: rgba(76, 203, 151, 0.45); --bn-danger-fill: var(--bn-red-300); --bn-danger-hover: var(--bn-red-200); --bn-on-danger: var(--bn-night-950); --bn-danger-text: var(--bn-red-300); --bn-danger-subtle: rgba(233, 119, 87, 0.14); --bn-danger-border: rgba(233, 119, 87, 0.50); --bn-warning-fill: var(--bn-amber-300); --bn-on-warning: var(--bn-night-950); --bn-warning-text: var(--bn-amber-300); --bn-warning-subtle: rgba(224, 172, 71, 0.13); --bn-warning-border: rgba(224, 172, 71, 0.45); --bn-info-text: var(--bn-sky-300); --bn-info-subtle: rgba(116, 168, 233, 0.13); --bn-info-border: rgba(116, 168, 233, 0.45); /* Identity accents (decorative zones only) */ --bn-accent-green: var(--bn-green-400); --bn-accent-rose: var(--bn-rose-400); --bn-accent-gold: var(--bn-gold-300); /* Horizon mark (theme-adaptive, used by AppLogo) */ --bn-logo-sky-a: #4CCB97; --bn-logo-sky-b: #E76BA3; --bn-logo-ground: #22314F; /* Focus — glacier ring with a gentle aurora glow */ --bn-focus-ring: var(--bn-sky-300); --bn-focus-glow: 0 0 0 3px rgba(76, 203, 151, 0.28), 0 0 14px rgba(76, 203, 151, 0.22); /* Soft depth */ --bn-shadow-pool: rgba(2, 6, 14, 0.55); /* cursor-pooled tilt shadow */ --bn-shadow-1: 0 1px 2px rgba(4, 8, 16, 0.4); --bn-shadow-2: 0 4px 14px rgba(4, 8, 16, 0.45); --bn-shadow-3: 0 12px 36px rgba(3, 6, 14, 0.55); --bn-glow-green: 0 0 24px rgba(76, 203, 151, 0.18); --bn-glow-rose: 0 0 24px rgba(231, 107, 163, 0.16); --bn-skeleton-a: var(--bn-night-850); --bn-skeleton-b: var(--bn-night-800); --bn-track: var(--bn-night-800); } /* tokens\layout.css */ /* Botnest shape, spacing, elevation, density & motion tokens. */ :root { /* ---- Shape (soft, calm radii) ---- */ --bn-radius-xs: 4px; /* chips, badges, small tags */ --bn-radius-sm: 8px; /* inputs, buttons */ --bn-radius-md: 12px; /* cards, menus */ --bn-radius-lg: 16px; /* modals, side panels */ --bn-radius-xl: 22px; /* hero shells */ --bn-radius-pill: 999px; /* progress, streak dots, avatars */ /* ---- Spacing (4px base) ---- */ --bn-sp-1: 4px; --bn-sp-2: 8px; --bn-sp-3: 12px; --bn-sp-4: 16px; --bn-sp-5: 20px; --bn-sp-6: 24px; --bn-sp-7: 32px; --bn-sp-8: 40px; --bn-sp-9: 48px; --bn-sp-10: 64px; /* ---- Density: compact (DEFAULT) ---- Data-first tools: tight rows, 14px body. */ --bn-control-h: 32px; /* inputs, buttons */ --bn-control-h-sm: 26px; --bn-control-h-lg: 38px; --bn-row-h: 36px; /* table rows */ --bn-cell-pad-x: 12px; --bn-cell-pad-y: 7px; --bn-font-body: 14px; --bn-font-small: 12.5px; --bn-gap-control: 8px; --bn-card-pad: 14px; /* ---- Glass / blur (overlays only) ---- */ --bn-blur: 14px; /* ---- Motion: calm but alive ---- */ --bn-dur-1: 150ms; /* hovers, toggles */ --bn-dur-2: 200ms; /* reveals, fades */ --bn-dur-3: 250ms; /* panels, modals */ --bn-ease: cubic-bezier(0.25, 0, 0.15, 1); /* standard out */ --bn-ease-io: cubic-bezier(0.45, 0, 0.2, 1); /* move / resize */ --bn-ease-spring: cubic-bezier(0.34, 1.4, 0.45, 1); /* physical feedback ONLY: chart load-in growth, card tilt settle — never UI transitions */ /* No bounce. No springs. No parallax (spring ease is reserved for the physical feedback above). */ } /* ---- Density: comfortable (roomier reading surfaces) ----
… scopes to any subtree. data-bn-density="compact" also works (matches the default). */ [data-bn-density="comfortable"] { --bn-control-h: 38px; --bn-control-h-sm: 30px; --bn-control-h-lg: 44px; --bn-row-h: 48px; --bn-cell-pad-x: 16px; --bn-cell-pad-y: 12px; --bn-font-body: 15px; --bn-font-small: 13px; --bn-gap-control: 10px; --bn-card-pad: 20px; } [data-bn-density="compact"] { --bn-control-h: 32px; --bn-control-h-sm: 26px; --bn-control-h-lg: 38px; --bn-row-h: 36px; --bn-cell-pad-x: 12px; --bn-cell-pad-y: 7px; --bn-font-body: 14px; --bn-font-small: 12.5px; --bn-gap-control: 8px; --bn-card-pad: 14px; } /* tokens\typography.css */ /* Botnest typography — Freight Sans (UI) / Freight Text (reading), Alegreya Sans / Alegreya on fallback. Tuned for hours-long use: 15px UI base, 16px reading base, generous line heights, restrained-but-confident bold headings. */ :root { --bn-text-display: 40px; --bn-text-h1: 30px; --bn-text-h2: 24px; --bn-text-h3: 20px; --bn-text-h4: 17px; --bn-text-body: var(--bn-font-body); /* 15px comfortable / 14px compact */ --bn-text-reading: 16px; --bn-text-small: var(--bn-font-small); --bn-text-tiny: 12px; --bn-leading-tight: 1.25; --bn-leading-body: 1.55; --bn-leading-reading: 1.7; --bn-tracking-tight: -0.01em; --bn-tracking-caps: 0.09em; --bn-weight-regular: 400; --bn-weight-medium: 500; --bn-weight-bold: 700; --bn-weight-heavy: 800; } html, body { font-family: var(--bn-font-ui); font-size: var(--bn-text-body); line-height: var(--bn-leading-body); color: var(--bn-text); background: var(--bn-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ---- Semantic class helpers (match component variant names) ---- */ .bn-display, .bn-h1, .bn-h2, .bn-h3, .bn-h4, h1, h2, h3, h4 { color: var(--bn-text); margin: 0; text-wrap: pretty; } .bn-display { font: var(--bn-weight-heavy) var(--bn-text-display)/1.15 var(--bn-font-ui); letter-spacing: var(--bn-tracking-tight); } .bn-h1, h1 { font: var(--bn-weight-bold) var(--bn-text-h1)/1.2 var(--bn-font-ui); letter-spacing: var(--bn-tracking-tight); } .bn-h2, h2 { font: var(--bn-weight-bold) var(--bn-text-h2)/1.25 var(--bn-font-ui); letter-spacing: var(--bn-tracking-tight); } .bn-h3, h3 { font: var(--bn-weight-bold) var(--bn-text-h3)/1.3 var(--bn-font-ui); } .bn-h4, h4 { font: var(--bn-weight-bold) var(--bn-text-h4)/1.35 var(--bn-font-ui); } .bn-body { font: var(--bn-weight-regular) var(--bn-text-body)/var(--bn-leading-body) var(--bn-font-ui); color: var(--bn-text); } .bn-reading { font: var(--bn-weight-regular) var(--bn-text-reading)/var(--bn-leading-reading) var(--bn-font-reading); color: var(--bn-text); max-width: 68ch; text-wrap: pretty; } .bn-small { font: var(--bn-weight-regular) var(--bn-text-small)/1.5 var(--bn-font-ui); color: var(--bn-text-2); } .bn-tiny { font: var(--bn-weight-regular) var(--bn-text-tiny)/1.45 var(--bn-font-ui); color: var(--bn-text-3); } .bn-overline { font: var(--bn-weight-bold) var(--bn-text-tiny)/1.4 var(--bn-font-ui); letter-spacing: var(--bn-tracking-caps); text-transform: uppercase; color: var(--bn-text-3); } .bn-num { font-variant-numeric: tabular-nums; } code, kbd, pre, samp { font-family: var(--bn-font-mono); font-size: 0.86em; } a { color: var(--bn-link); text-decoration: none; transition: color var(--bn-dur-1) var(--bn-ease); } a:hover { color: var(--bn-link-hover); text-decoration: underline; text-underline-offset: 3px; } /* tokens\dataviz.css */ /* ============================================================ Botnest dataviz tokens — library-agnostic. Categorical palette, sequential + diverging ramps, and chart chrome (grid/axis/label/tooltip), themed for both NIGHT and DAWN and contrast-checked against --bn-surface. Series order is fixed: use --bn-chart-1..8 in order, never shuffled, so colors mean the same thing across an app. ============================================================ */ :root, [data-bn-theme="dawn"] { --bn-chart-1: #1F9066; --bn-chart-2: #2F6ABE; --bn-chart-3: #C23A79; --bn-chart-4: #B5821A; --bn-chart-5: #1D8F89; --bn-chart-6: #6B8F23; --bn-chart-7: #6E6450; --bn-chart-8: #93764B; --bn-seq-1: #EDF6EF; --bn-seq-2: #CDEBD9; --bn-seq-3: #9BD8BC; --bn-seq-4: #5DBD97; --bn-seq-5: #2FA377; --bn-seq-6: #1F8059; --bn-seq-7: #135A40; --bn-div-n3: #B32E6E; --bn-div-n2: #CE6E9C; --bn-div-n1: #E7B3CB; --bn-div-0: #E9E2D3; --bn-div-p1: #A9D8C0; --bn-div-p2: #55AF87; --bn-div-p3: #187350; --bn-chart-grid: rgba(85, 76, 59, 0.12); --bn-chart-axis: rgba(85, 76, 59, 0.32); --bn-chart-label: var(--bn-stone-600); --bn-chart-tooltip-bg: rgba(42, 36, 28, 0.94); --bn-chart-tooltip-text: #FAF7F1; --bn-chart-fill-1: linear-gradient(180deg, rgba(31,144,102,0.22), rgba(31,144,102,0.02)); --bn-chart-fill-2: linear-gradient(180deg, rgba(47,106,190,0.20), rgba(47,106,190,0.02)); --bn-chart-fill-3: linear-gradient(180deg, rgba(194,58,121,0.18), rgba(194,58,121,0.02)); } [data-bn-theme="night"] { /* Categorical — aurora-derived */ --bn-chart-1: #4CCB97; /* aurora green */ --bn-chart-2: #74A8E9; /* glacier */ --bn-chart-3: #E76BA3; /* rose */ --bn-chart-4: #EDC672; /* gold */ --bn-chart-5: #5AD3C9; /* ice teal */ --bn-chart-6: #A9C86B; /* moss */ --bn-chart-7: #9FB1CC; /* slate */ --bn-chart-8: #D9C29A; /* sand */ /* Sequential (low → high), aurora green scale */ --bn-seq-1: #16283C; --bn-seq-2: #143C38; --bn-seq-3: #175547; --bn-seq-4: #1E7358; --bn-seq-5: #2C9970; --bn-seq-6: #4CCB97; --bn-seq-7: #8FE7C1; /* Diverging (negative rose ← neutral → positive green) */ --bn-div-n3: #E76BA3; --bn-div-n2: #B25579; --bn-div-n1: #714158; --bn-div-0: #33405C; --bn-div-p1: #2C5E54; --bn-div-p2: #2F9770; --bn-div-p3: #4CCB97; /* Chart chrome */ --bn-chart-grid: rgba(151, 173, 208, 0.13); --bn-chart-axis: rgba(151, 173, 208, 0.32); --bn-chart-label: var(--bn-night-300); --bn-chart-tooltip-bg: rgba(10, 16, 30, 0.92); --bn-chart-tooltip-text: var(--bn-night-50); /* Area/bar fills: gradient fades allowed (identity zone) */ --bn-chart-fill-1: linear-gradient(180deg, rgba(76,203,151,0.32), rgba(76,203,151,0.02)); --bn-chart-fill-2: linear-gradient(180deg, rgba(116,168,233,0.30), rgba(116,168,233,0.02)); --bn-chart-fill-3: linear-gradient(180deg, rgba(231,107,163,0.28), rgba(231,107,163,0.02)); } /* base.css */ /* Botnest base — resets, focus, selection, scrollbars, motion. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--bn-action-subtle-hover); } /* Focus — glacier ring + gentle aurora glow, on every interactive element */ :focus-visible { outline: 2px solid var(--bn-focus-ring); outline-offset: 2px; box-shadow: var(--bn-focus-glow); transition: box-shadow var(--bn-dur-1) var(--bn-ease); } /* Quiet scrollbars for hours-long sessions */ * { scrollbar-width: thin; scrollbar-color: var(--bn-border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--bn-border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-track { background: transparent; } /* Identity-zone utilities */ .bn-chrome { background: var(--bn-chrome-bg); background-image: var(--bn-grad-aurora-rose), var(--bn-grad-aurora); color: var(--bn-chrome-text); } .bn-hero { background: var(--bn-chrome-bg); background-image: var(--bn-grad-aurora-rose), var(--bn-grad-hero); color: var(--bn-chrome-text); } .bn-glass { background: var(--bn-glass); -webkit-backdrop-filter: blur(var(--bn-blur)); backdrop-filter: blur(var(--bn-blur)); } /* Photography treatment — imagery never fights content */ .bn-photo { position: relative; overflow: hidden; border-radius: var(--bn-radius-lg); } .bn-photo > img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) contrast(0.95); } .bn-photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 40%, var(--bn-overlay)); } /* Keyframes (referenced by components.css) */ @keyframes bn-spin { to { transform: rotate(360deg); } } @keyframes bn-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @keyframes bn-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes bn-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes bn-scale-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } } @keyframes bn-slide-left { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } @keyframes bn-glow-pulse { 0%, 100% { box-shadow: var(--bn-glow-green); } 50% { box-shadow: 0 0 34px rgba(76,203,151,0.30); } } /* Full reduced-motion support */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* components.css */ /* ============================================================ Botnest component classes — the visual layer. Usable from plain HTML directly; the React primitives in components/ are thin wrappers over these classes. Sizing tracks the density tokens, so any component inside [data-bn-density="compact"] tightens automatically. ============================================================ */ /* ---------- Actions ---------- */ .bn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--bn-control-h); padding: 0 18px; border: 1px solid transparent; border-radius: var(--bn-radius-sm); font: var(--bn-weight-bold) var(--bn-text-body)/1 var(--bn-font-ui); cursor: pointer; white-space: nowrap; user-select: none; background: var(--bn-action); color: var(--bn-on-action); transition: background var(--bn-dur-1) var(--bn-ease), border-color var(--bn-dur-1) var(--bn-ease), color var(--bn-dur-1) var(--bn-ease), box-shadow var(--bn-dur-1) var(--bn-ease), transform var(--bn-dur-1) var(--bn-ease); } .bn-btn:hover { background: var(--bn-action-hover); } .bn-btn:active { background: var(--bn-action-press); transform: translateY(1px); } .bn-btn:disabled { cursor: not-allowed; opacity: 0.45; transform: none; } .bn-btn--secondary { background: transparent; color: var(--bn-link); border-color: var(--bn-border-strong); } .bn-btn--secondary:hover { background: var(--bn-action-subtle); border-color: var(--bn-link); } .bn-btn--secondary:active { background: var(--bn-action-subtle-hover); } .bn-btn--ghost { background: transparent; color: var(--bn-link); } .bn-btn--ghost:hover { background: var(--bn-action-subtle); } .bn-btn--ghost:active { background: var(--bn-action-subtle-hover); } .bn-btn--success { background: var(--bn-success-fill); color: var(--bn-on-success); } .bn-btn--success:hover { filter: brightness(1.08); background: var(--bn-success-fill); } .bn-btn--danger { background: var(--bn-danger-fill); color: var(--bn-on-danger); } .bn-btn--danger:hover { background: var(--bn-danger-hover); } .bn-btn--danger-ghost { background: transparent; color: var(--bn-danger-text); border-color: var(--bn-danger-border); } .bn-btn--danger-ghost:hover { background: var(--bn-danger-subtle); } .bn-btn--sm { height: var(--bn-control-h-sm); padding: 0 12px; font-size: var(--bn-text-small); gap: 6px; } .bn-btn--lg { height: var(--bn-control-h-lg); padding: 0 22px; font-size: 16px; } .bn-btn--icon { width: var(--bn-control-h); padding: 0; } .bn-btn--icon.bn-btn--sm { width: var(--bn-control-h-sm); } .bn-btn-group { display: inline-flex; } .bn-btn-group > .bn-btn { border-radius: 0; } .bn-btn-group > .bn-btn:first-child { border-radius: var(--bn-radius-sm) 0 0 var(--bn-radius-sm); } .bn-btn-group > .bn-btn:last-child { border-radius: 0 var(--bn-radius-sm) var(--bn-radius-sm) 0; } .bn-btn-group > .bn-btn--secondary + .bn-btn--secondary { margin-left: -1px; } .bn-btn-group > .bn-btn[aria-pressed="true"] { background: var(--bn-selected); color: var(--bn-text); border-color: var(--bn-link); position: relative; z-index: 1; } /* ---------- Forms ---------- */ .bn-field { display: flex; flex-direction: column; gap: 6px; } .bn-label { font: var(--bn-weight-medium) var(--bn-text-small)/1.3 var(--bn-font-ui); color: var(--bn-text-2); } .bn-help { font-size: var(--bn-text-tiny); color: var(--bn-text-3); } .bn-error-text { font-size: var(--bn-text-tiny); color: var(--bn-danger-text); } .bn-input, .bn-textarea, .bn-select { width: 100%; height: var(--bn-control-h); padding: 0 12px; background: var(--bn-surface); color: var(--bn-text); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-sm); transition: border-color var(--bn-dur-1) var(--bn-ease), box-shadow var(--bn-dur-1) var(--bn-ease), background var(--bn-dur-1) var(--bn-ease); } .bn-input::placeholder, .bn-textarea::placeholder { color: var(--bn-text-3); } .bn-input:hover, .bn-textarea:hover, .bn-select:hover { border-color: var(--bn-border-strong); } .bn-input:focus, .bn-textarea:focus, .bn-select:focus { outline: none; border-color: var(--bn-focus-ring); box-shadow: var(--bn-focus-glow); } .bn-input[aria-invalid="true"], .bn-textarea[aria-invalid="true"] { border-color: var(--bn-danger-border); } .bn-input:disabled, .bn-textarea:disabled, .bn-select:disabled { opacity: 0.5; cursor: not-allowed; } .bn-textarea { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; line-height: var(--bn-leading-body); } .bn-select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 10px center; } .bn-input-wrap { position: relative; display: flex; align-items: center; } .bn-input-wrap > .bn-input { padding-left: 36px; } .bn-input-wrap > .bn-input-icon { position: absolute; left: 10px; color: var(--bn-text-3); pointer-events: none; display: flex; } /* Checkbox & radio */ .bn-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--bn-text-body); } .bn-check input { appearance: none; margin: 0; width: 18px; height: 18px; flex: none; border: 1.5px solid var(--bn-border-strong); border-radius: 5px; background: var(--bn-surface); display: grid; place-content: center; cursor: pointer; transition: background var(--bn-dur-1) var(--bn-ease), border-color var(--bn-dur-1) var(--bn-ease); } .bn-check input[type="radio"] { border-radius: 50%; } .bn-check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--bn-dur-1) var(--bn-ease); background: var(--bn-on-action); clip-path: polygon(14% 46%, 0 62%, 40% 100%, 100% 18%, 84% 4%, 38% 68%); } .bn-check input[type="radio"]::before { clip-path: none; border-radius: 50%; width: 8px; height: 8px; } .bn-check input:checked { background: var(--bn-action); border-color: var(--bn-action); } .bn-check input:checked::before { transform: scale(1); } .bn-check input:disabled { opacity: 0.45; cursor: not-allowed; } /* Switch */ .bn-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--bn-text-body); } .bn-switch input { appearance: none; margin: 0; width: 40px; height: 22px; flex: none; border-radius: 999px; background: var(--bn-track); border: 1px solid var(--bn-border); transition: background var(--bn-dur-2) var(--bn-ease); cursor: pointer; position: relative; } .bn-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--bn-text-3); transition: transform var(--bn-dur-2) var(--bn-ease-io), background var(--bn-dur-2) var(--bn-ease); } .bn-switch input:checked { background: var(--bn-action); border-color: var(--bn-action); } .bn-switch input:checked::before { transform: translateX(18px); background: var(--bn-on-action); } /* Slider */ .bn-slider { appearance: none; width: 100%; height: 22px; background: transparent; cursor: pointer; } .bn-slider::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--bn-track); } .bn-slider::-webkit-slider-thumb { appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bn-action); border: none; margin-top: -6px; transition: box-shadow var(--bn-dur-1) var(--bn-ease); } .bn-slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px var(--bn-action-subtle); } .bn-slider::-moz-range-track { height: 6px; border-radius: 999px; background: var(--bn-track); } .bn-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bn-action); border: none; } /* File upload */ .bn-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 20px; text-align: center; color: var(--bn-text-2); border: 1.5px dashed var(--bn-border-strong); border-radius: var(--bn-radius-md); background: var(--bn-surface); cursor: pointer; transition: border-color var(--bn-dur-1) var(--bn-ease), background var(--bn-dur-1) var(--bn-ease); } .bn-dropzone:hover, .bn-dropzone.is-drag { border-color: var(--bn-focus-ring); background: var(--bn-action-subtle); } /* Calendar */ .bn-cal { width: 280px; padding: 12px; background: var(--bn-surface); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-md); box-shadow: var(--bn-shadow-2); } .bn-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: var(--bn-weight-bold); } .bn-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .bn-cal-dow { font-size: 11px; color: var(--bn-text-3); text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: 0.05em; } .bn-cal-day { height: 32px; display: grid; place-content: center; border: none; background: none; color: var(--bn-text); border-radius: var(--bn-radius-xs); cursor: pointer; font-size: var(--bn-text-small); transition: background var(--bn-dur-1) var(--bn-ease); } .bn-cal-day:hover { background: var(--bn-action-subtle); } .bn-cal-day.is-muted { color: var(--bn-text-disabled); } .bn-cal-day.is-today { color: var(--bn-link); font-weight: var(--bn-weight-bold); } .bn-cal-day.is-selected { background: var(--bn-action); color: var(--bn-on-action); font-weight: var(--bn-weight-bold); } /* Menu / popover list (Select, Combobox, NavMenu dropdowns) */ .bn-menu { min-width: 180px; padding: 6px; background: var(--bn-glass); -webkit-backdrop-filter: blur(var(--bn-blur)); backdrop-filter: blur(var(--bn-blur)); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-md); box-shadow: var(--bn-shadow-2); animation: bn-rise var(--bn-dur-2) var(--bn-ease); } .bn-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; background: none; text-align: left; color: var(--bn-text); border-radius: var(--bn-radius-xs); cursor: pointer; font-size: var(--bn-text-body); transition: background var(--bn-dur-1) var(--bn-ease); } .bn-menu-item:hover { background: var(--bn-action-subtle); } .bn-menu-item[aria-selected="true"] { background: var(--bn-selected); color: var(--bn-link); font-weight: var(--bn-weight-medium); } .bn-menu-item--danger { color: var(--bn-danger-text); } .bn-menu-item--danger:hover { background: var(--bn-danger-subtle); } /* ---------- Navigation ---------- */ .bn-sidebar { display: flex; flex-direction: column; width: 248px; min-height: 100%; padding: 16px 12px; gap: 2px; } /* Chrome rail scene — horizon glow + ridge silhouette (+ stars at night). .bn-nightsky applies the same scene to any custom rail. */ .bn-sidebar, .bn-nightsky { position: relative; overflow: hidden; color: var(--bn-chrome-text); background-color: var(--bn-chrome-bg); border-right: 1px solid var(--bn-border); } .bn-sidebar > *, .bn-nightsky > * { position: relative; z-index: 1; } .bn-sidebar::before, .bn-nightsky::before, .bn-sidebar::after, .bn-nightsky::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; } .bn-sidebar::after, .bn-nightsky::after { top: auto; height: 92px; background-position: bottom; background-size: 100% 92px; background-repeat: no-repeat; } /* Dawn (default): first light rising behind the ridge */ .bn-sidebar::before, .bn-nightsky::before { background-image: radial-gradient(120% 52% at 50% 108%, rgba(224, 172, 71, 0.34), rgba(224, 172, 71, 0.08) 55%, transparent 78%), radial-gradient(70% 26% at 76% 90%, rgba(214, 71, 138, 0.10), transparent 70%), linear-gradient(180deg, #FBF7ED 0%, #F7EEDD 55%, #F2E2C8 100%); } .bn-sidebar::after, .bn-nightsky::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 48 L40 24 L78 46 L120 12 L156 40 L200 20 L232 46 L260 34 L260 92 Z' fill='%23E3CD9E' opacity='.5'/%3E%3Cpath d='M0 92 L0 64 L30 44 L64 60 L102 32 L138 56 L176 40 L214 62 L244 50 L260 58 L260 92 Z' fill='%23C4AE85' opacity='.34'/%3E%3C/svg%3E"); } /* Night: stars above, aurora glow on the horizon */ [data-bn-theme="night"] .bn-sidebar::before, [data-bn-theme="night"] .bn-nightsky::before { background-image: radial-gradient(120% 52% at 50% 108%, rgba(76, 203, 151, 0.30), rgba(76, 203, 151, 0.07) 55%, transparent 78%), radial-gradient(70% 26% at 76% 90%, rgba(231, 107, 163, 0.13), transparent 70%), linear-gradient(180deg, #0A101E 0%, #0C1729 55%, #10263B 100%); } [data-bn-theme="night"] .bn-sidebar::after, [data-bn-theme="night"] .bn-nightsky::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 92' preserveAspectRatio='none'%3E%3Cpath d='M0 92 L0 48 L40 24 L78 46 L120 12 L156 40 L200 20 L232 46 L260 34 L260 92 Z' fill='%2316384A' opacity='.4'/%3E%3Cpath d='M0 92 L0 64 L30 44 L64 60 L102 32 L138 56 L176 40 L214 62 L244 50 L260 58 L260 92 Z' fill='%23081020' opacity='.7'/%3E%3C/svg%3E"); } .bn-sidebar-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: none; background: none; width: 100%; text-align: left; color: var(--bn-chrome-text); border-radius: var(--bn-radius-sm); font: var(--bn-weight-medium) var(--bn-text-body)/1.2 var(--bn-font-ui); cursor: pointer; text-decoration: none; transition: background var(--bn-dur-1) var(--bn-ease), color var(--bn-dur-1) var(--bn-ease); } .bn-sidebar-item:hover { background: rgba(42,36,28,0.06); text-decoration: none; color: var(--bn-chrome-text); } [data-bn-theme="night"] .bn-sidebar-item:hover { background: rgba(255,255,255,0.07); } /* Active — the raised pill: lifts off the rail as a card, icon takes aurora green */ .bn-sidebar-item.is-active { background: var(--bn-stone-0); color: var(--bn-stone-900); font-weight: var(--bn-weight-bold); border: 1px solid transparent; padding: 8px 11px; box-shadow: var(--bn-shadow-1); } [data-bn-theme="night"] .bn-sidebar-item.is-active { background: linear-gradient(180deg, var(--bn-night-700), var(--bn-night-750)); color: #FFFFFF; border-color: rgba(183,196,218,0.30); box-shadow: 0 3px 12px rgba(2,6,14,0.6), inset 0 1px 0 rgba(255,255,255,0.12); } .bn-sidebar-item.is-active > svg { color: var(--bn-accent-green); } .bn-sidebar-group { margin: 18px 12px 6px; font: var(--bn-weight-bold) 11px/1 var(--bn-font-ui); letter-spacing: 0.09em; text-transform: uppercase; color: var(--bn-chrome-text-dim); } /* ---------- Mobile drawer — the rail slides in from the left ---------- */ .bn-drawer-scrim { position: fixed; inset: 0; z-index: 90; background: var(--bn-overlay); opacity: 0; pointer-events: none; transition: opacity var(--bn-dur-3) var(--bn-ease); } .bn-drawer-scrim.is-open { opacity: 1; pointer-events: auto; } .bn-sidebar.bn-drawer { position: fixed; inset: 0 auto 0 0; z-index: 91; width: 280px; max-width: 84vw; height: 100%; transform: translateX(-102%); transition: transform var(--bn-dur-3) var(--bn-ease-io); border-right: 1px solid var(--bn-border); } .bn-sidebar.bn-drawer.is-open { transform: translateX(0); box-shadow: var(--bn-shadow-3); } /* Touch-friendly rows in the drawer (≥44px hit targets) */ .bn-drawer .bn-sidebar-item { padding: 12px; } .bn-drawer .bn-sidebar-item.is-active { padding: 11px; } /* Inner scroll wrapper — keeps the horizon scene pinned while items scroll */ .bn-sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; } .bn-topbar { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 20px; background: var(--bn-surface); border-bottom: 1px solid var(--bn-border-subtle); } .bn-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--bn-border-subtle); } .bn-tab { padding: 10px 14px; border: none; background: none; cursor: pointer; font: var(--bn-weight-medium) var(--bn-text-body)/1.2 var(--bn-font-ui); color: var(--bn-text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--bn-dur-1) var(--bn-ease), border-color var(--bn-dur-1) var(--bn-ease); } .bn-tab:hover { color: var(--bn-text); } .bn-tab[aria-selected="true"] { color: var(--bn-link); border-bottom-color: var(--bn-link); } /* Enclosed tabs — for sections within a page; active tab merges with the panel below */ .bn-tabs--enclosed { border-bottom: 1px solid var(--bn-border); gap: 4px; } .bn-tab--enclosed { border: 1px solid transparent; border-bottom: 1px solid transparent; border-radius: var(--bn-radius-sm) var(--bn-radius-sm) 0 0; padding: 10px 18px; margin-bottom: -1px; } .bn-tab--enclosed[aria-selected="true"] { background: var(--bn-surface); color: var(--bn-text); font-weight: var(--bn-weight-bold); border-color: var(--bn-border); border-bottom-color: var(--bn-surface); } .bn-tab-panel { background: var(--bn-surface); border: 1px solid var(--bn-border); border-top: none; border-radius: 0 0 var(--bn-radius-md) var(--bn-radius-md); padding: var(--bn-card-pad); } .bn-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: var(--bn-text-small); color: var(--bn-text-3); } .bn-breadcrumbs a { color: var(--bn-text-2); } .bn-breadcrumbs a:hover { color: var(--bn-link); text-decoration: none; } .bn-breadcrumbs .bn-crumb-sep { color: var(--bn-text-disabled); user-select: none; } .bn-breadcrumbs [aria-current="page"] { color: var(--bn-text); font-weight: var(--bn-weight-medium); } .bn-pagination { display: flex; align-items: center; gap: 4px; } .bn-page-btn { min-width: 32px; height: 32px; padding: 0 6px; display: inline-grid; place-content: center; border: none; background: none; color: var(--bn-text-2); border-radius: var(--bn-radius-xs); cursor: pointer; font: var(--bn-weight-medium) var(--bn-text-small)/1 var(--bn-font-ui); font-variant-numeric: tabular-nums; transition: background var(--bn-dur-1) var(--bn-ease), color var(--bn-dur-1) var(--bn-ease); } .bn-page-btn:hover { background: var(--bn-action-subtle); color: var(--bn-text); } .bn-page-btn[aria-current="page"] { background: var(--bn-action); color: var(--bn-on-action); } .bn-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ---------- Data display ---------- */ .bn-table-wrap { border: 1px solid var(--bn-border-subtle); border-radius: var(--bn-radius-md); overflow: auto; background: var(--bn-surface); } .bn-table { width: 100%; border-collapse: collapse; font-size: var(--bn-text-body); } .bn-table th { position: sticky; top: 0; z-index: 1; text-align: left; padding: var(--bn-cell-pad-y) var(--bn-cell-pad-x); font: var(--bn-weight-bold) var(--bn-text-small)/1.3 var(--bn-font-ui); color: var(--bn-text-2); background: var(--bn-surface-2); border-bottom: 1px solid var(--bn-border); white-space: nowrap; } .bn-table td { height: var(--bn-row-h); padding: var(--bn-cell-pad-y) var(--bn-cell-pad-x); border-bottom: 1px solid var(--bn-border-subtle); } .bn-table tbody tr { transition: background var(--bn-dur-1) var(--bn-ease); } .bn-table tbody tr:hover { background: var(--bn-action-subtle); } /* Cursor-tracking spotlight — the row's mousemove writes --tx/--ty; lives on the hovered tr only */ .bn-table--spotlight tbody tr:hover { background: radial-gradient(170px circle at var(--tx, 50%) var(--ty, 50%), var(--bn-spotlight-strong) 0%, var(--bn-spotlight-soft) 42%, transparent 80%), var(--bn-action-subtle); } .bn-table tbody tr.is-selected { background: var(--bn-selected); } .bn-table tbody tr:last-child td { border-bottom: none; } .bn-table .bn-td-num { text-align: right; font-variant-numeric: tabular-nums; } .bn-th-sort { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; border: none; background: none; color: inherit; font: inherit; padding: 0; } .bn-th-sort:hover { color: var(--bn-link); } .bn-chip { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: var(--bn-radius-pill); font: var(--bn-weight-medium) var(--bn-text-tiny)/1 var(--bn-font-ui); background: var(--bn-surface-2); color: var(--bn-text-2); border: 1px solid var(--bn-border-subtle); } .bn-chip .bn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .bn-chip--success { background: var(--bn-success-subtle); color: var(--bn-success-text); border-color: transparent; } .bn-chip--danger { background: var(--bn-danger-subtle); color: var(--bn-danger-text); border-color: transparent; } .bn-chip--warning { background: var(--bn-warning-subtle); color: var(--bn-warning-text); border-color: transparent; } .bn-chip--info { background: var(--bn-info-subtle); color: var(--bn-info-text); border-color: transparent; } .bn-chip--accent { background: var(--bn-action-subtle); color: var(--bn-link); border-color: transparent; } .bn-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font: var(--bn-weight-medium) 11.5px/1 var(--bn-font-mono); color: var(--bn-text-2); background: var(--bn-surface-2); border: 1px solid var(--bn-border); border-bottom-width: 2px; border-radius: 5px; } .bn-kbd-combo { display: inline-flex; align-items: center; gap: 3px; } .bn-tooltip { position: absolute; z-index: 60; max-width: 260px; padding: 7px 10px; background: var(--bn-chart-tooltip-bg); color: var(--bn-chart-tooltip-text); font-size: var(--bn-text-tiny); line-height: 1.45; border-radius: var(--bn-radius-xs); box-shadow: var(--bn-shadow-2); pointer-events: none; animation: bn-fade var(--bn-dur-1) var(--bn-ease); } .bn-avatar { display: inline-grid; place-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bn-action-subtle-hover); color: var(--bn-link); overflow: hidden; font: var(--bn-weight-bold) 13px/1 var(--bn-font-ui); flex: none; } .bn-avatar img { width: 100%; height: 100%; object-fit: cover; } .bn-avatar--sm { width: 24px; height: 24px; font-size: 10px; } .bn-avatar--lg { width: 44px; height: 44px; font-size: 17px; } .bn-separator { border: none; border-top: 1px solid var(--bn-border-subtle); margin: var(--bn-sp-4) 0; } .bn-separator--v { display: inline-block; width: 1px; align-self: stretch; background: var(--bn-border-subtle); border: none; margin: 0 var(--bn-sp-3); } .bn-counter { display: inline-grid; place-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--bn-danger-fill); color: var(--bn-on-danger); font: var(--bn-weight-bold) 11px/1 var(--bn-font-ui); font-variant-numeric: tabular-nums; } .bn-counter--neutral { background: var(--bn-surface-3); color: var(--bn-text-2); } .bn-counter--accent { background: var(--bn-action); color: var(--bn-on-action); } /* ---------- Feedback ---------- */ .bn-alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--bn-radius-sm); border: 1px solid var(--bn-info-border); background: var(--bn-info-subtle); color: var(--bn-text); font-size: var(--bn-text-body); line-height: 1.5; } .bn-alert .bn-alert-icon { flex: none; margin-top: 1px; color: var(--bn-info-text); } .bn-alert-title { font-weight: var(--bn-weight-bold); margin: 0 0 2px; } .bn-alert--success { background: var(--bn-success-subtle); border-color: var(--bn-success-border); } .bn-alert--success .bn-alert-icon { color: var(--bn-success-text); } .bn-alert--warning { background: var(--bn-warning-subtle); border-color: var(--bn-warning-border); } .bn-alert--warning .bn-alert-icon { color: var(--bn-warning-text); } .bn-alert--danger { background: var(--bn-danger-subtle); border-color: var(--bn-danger-border); } .bn-alert--danger .bn-alert-icon { color: var(--bn-danger-text); } .bn-toast { display: flex; align-items: flex-start; gap: 12px; width: 340px; padding: 13px 14px; background: var(--bn-glass); -webkit-backdrop-filter: blur(var(--bn-blur)); backdrop-filter: blur(var(--bn-blur)); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-md); box-shadow: var(--bn-shadow-2); color: var(--bn-text); animation: bn-slide-left var(--bn-dur-3) var(--bn-ease); } .bn-toast .bn-alert-icon { flex: none; margin-top: 1px; } .bn-toast--success .bn-alert-icon { color: var(--bn-success-text); } .bn-toast--danger .bn-alert-icon { color: var(--bn-danger-text); } .bn-toast--warning .bn-alert-icon { color: var(--bn-warning-text); } .bn-toast--info .bn-alert-icon { color: var(--bn-info-text); } .bn-backdrop { position: fixed; inset: 0; z-index: 50; background: var(--bn-overlay); display: grid; place-items: center; animation: bn-fade var(--bn-dur-2) var(--bn-ease); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .bn-modal { width: min(520px, calc(100vw - 48px)); max-height: min(84vh, 720px); overflow: auto; background: var(--bn-surface); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-lg); box-shadow: var(--bn-shadow-3); animation: bn-scale-in var(--bn-dur-3) var(--bn-ease); } .bn-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 0; } .bn-modal-body { padding: 14px 20px 20px; } .bn-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 20px 20px; } .bn-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 55; width: min(420px, 92vw); background: var(--bn-surface); border-left: 1px solid var(--bn-border); box-shadow: var(--bn-shadow-3); display: flex; flex-direction: column; animation: bn-slide-left var(--bn-dur-3) var(--bn-ease); } .bn-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--bn-border-subtle); } .bn-panel-body { padding: 20px; overflow: auto; flex: 1; } .bn-skeleton { border-radius: var(--bn-radius-xs); background: linear-gradient(90deg, var(--bn-skeleton-a) 25%, var(--bn-skeleton-b) 42%, var(--bn-skeleton-a) 60%); background-size: 200% 100%; animation: bn-shimmer 1.6s linear infinite; } .bn-spinner { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2.5px solid var(--bn-track); border-top-color: var(--bn-link); animation: bn-spin 0.8s linear infinite; } .bn-spinner--lg { width: 32px; height: 32px; border-width: 3px; } .bn-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 48px 24px; text-align: center; border-radius: var(--bn-radius-lg); background-image: var(--bn-grad-aurora-rose), var(--bn-grad-hero); color: var(--bn-chrome-text); } .bn-empty .bn-empty-icon { color: var(--bn-accent-green); filter: drop-shadow(0 0 12px rgba(76,203,151,0.4)); } .bn-empty-title { font: var(--bn-weight-bold) var(--bn-text-h4)/1.3 var(--bn-font-ui); } .bn-empty-hint { color: var(--bn-chrome-text-dim); max-width: 40ch; font-size: var(--bn-text-small); } /* ---------- Content ---------- */ .bn-card { background: var(--bn-surface); border: 1px solid var(--bn-border-subtle); border-radius: var(--bn-radius-md); padding: var(--bn-card-pad); box-shadow: var(--bn-shadow-1); } .bn-card[data-tilt] { transform-origin: center; will-change: transform; } .bn-card--hover { transition: border-color var(--bn-dur-2) var(--bn-ease), box-shadow var(--bn-dur-2) var(--bn-ease), transform var(--bn-dur-2) var(--bn-ease); cursor: pointer; } .bn-card--hover:hover { border-color: var(--bn-border-strong); box-shadow: var(--bn-shadow-2); transform: translateY(-1px); } .bn-card-title { font: var(--bn-weight-bold) var(--bn-text-h4)/1.3 var(--bn-font-ui); margin: 0 0 4px; } .bn-kpi-value { font: var(--bn-weight-heavy) 30px/1.1 var(--bn-font-ui); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .bn-kpi-label { font: var(--bn-weight-medium) var(--bn-text-small)/1.3 var(--bn-font-ui); color: var(--bn-text-2); } .bn-delta { display: inline-flex; align-items: center; gap: 3px; font: var(--bn-weight-bold) var(--bn-text-tiny)/1 var(--bn-font-ui); font-variant-numeric: tabular-nums; } .bn-delta--up { color: var(--bn-success-text); } .bn-delta--down { color: var(--bn-danger-text); } .bn-delta--flat { color: var(--bn-text-3); } .bn-accordion { border: 1px solid var(--bn-border-subtle); border-radius: var(--bn-radius-md); background: var(--bn-surface); overflow: hidden; } .bn-accordion-item + .bn-accordion-item { border-top: 1px solid var(--bn-border-subtle); } .bn-accordion-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; border: none; background: none; cursor: pointer; text-align: left; font: var(--bn-weight-medium) var(--bn-text-body)/1.3 var(--bn-font-ui); color: var(--bn-text); transition: background var(--bn-dur-1) var(--bn-ease); } .bn-accordion-trigger:hover { background: var(--bn-action-subtle); } .bn-accordion-trigger .bn-acc-chev { transition: transform var(--bn-dur-2) var(--bn-ease); color: var(--bn-text-3); } .bn-accordion-trigger[aria-expanded="true"] .bn-acc-chev { transform: rotate(180deg); } .bn-accordion-body { padding: 0 16px 14px; color: var(--bn-text-2); animation: bn-rise var(--bn-dur-2) var(--bn-ease); } /* ---------- Progress & gamification ---------- */ .bn-progress { height: 8px; border-radius: 999px; background: var(--bn-track); overflow: hidden; } .bn-progress > .bn-progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--bn-accent-green), var(--bn-chart-5)); transition: width var(--bn-dur-3) var(--bn-ease-io); } .bn-progress--thin { height: 4px; } .bn-progress.is-complete > .bn-progress-fill { box-shadow: var(--bn-glow-green); } .bn-streak { display: inline-flex; align-items: center; gap: 5px; } .bn-streak .bn-streak-day { width: 10px; height: 10px; border-radius: 50%; background: var(--bn-track); } .bn-streak .bn-streak-day.is-hit { background: var(--bn-accent-green); box-shadow: 0 0 6px rgba(76,203,151,0.5); } .bn-streak .bn-streak-day.is-today { outline: 1.5px solid var(--bn-focus-ring); outline-offset: 2px; } .bn-streak-count { font: var(--bn-weight-heavy) var(--bn-text-h4)/1 var(--bn-font-ui); color: var(--bn-success-text); font-variant-numeric: tabular-nums; } .bn-badge { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; width: 88px; text-align: center; } .bn-badge .bn-badge-medal { width: 56px; height: 56px; border-radius: 50%; display: grid; place-content: center; background: radial-gradient(circle at 35% 30%, var(--bn-surface-3), var(--bn-surface-2)); border: 1px solid var(--bn-border); color: var(--bn-text-3); } .bn-badge.is-earned .bn-badge-medal { background: var(--bn-grad-aurora); border-color: var(--bn-success-border); color: var(--bn-accent-green); box-shadow: var(--bn-glow-green); } .bn-badge .bn-badge-name { font-size: var(--bn-text-tiny); color: var(--bn-text-2); line-height: 1.3; } .bn-badge.is-earned .bn-badge-name { color: var(--bn-text); font-weight: var(--bn-weight-medium); } .bn-stepper { display: flex; align-items: center; gap: 0; } .bn-step { display: flex; align-items: center; gap: 10px; } .bn-step-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-content: center; flex: none; font: var(--bn-weight-bold) 12px/1 var(--bn-font-ui); background: var(--bn-surface-2); border: 1.5px solid var(--bn-border-strong); color: var(--bn-text-2); transition: background var(--bn-dur-2) var(--bn-ease), border-color var(--bn-dur-2) var(--bn-ease); } .bn-step.is-done .bn-step-dot { background: var(--bn-success-fill); border-color: var(--bn-success-fill); color: var(--bn-on-success); } .bn-step.is-current .bn-step-dot { border-color: var(--bn-focus-ring); color: var(--bn-link); box-shadow: var(--bn-focus-glow); } .bn-step-label { font-size: var(--bn-text-small); color: var(--bn-text-2); white-space: nowrap; } .bn-step.is-current .bn-step-label { color: var(--bn-text); font-weight: var(--bn-weight-medium); } .bn-step-line { width: 40px; height: 1.5px; background: var(--bn-border); margin: 0 10px; flex: none; } .bn-step-line.is-done { background: var(--bn-success-fill); } /* ---------- Living charts ---------- */ .bn-chart { position: relative; width: 100%; } .bn-chart svg { display: block; width: 100%; height: auto; overflow: visible; } .bn-ch-grid { stroke: var(--bn-chart-grid); stroke-width: 1; animation: bn-fade .5s var(--bn-ease) both; } .bn-ch-axis { font: 400 10.5px/1 var(--bn-font-ui); fill: var(--bn-chart-label); animation: bn-fade .5s var(--bn-ease) both; } .bn-ch-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: bn-ch-draw 1.1s var(--bn-ease) forwards; } .bn-ch-line[data-dashed] { stroke-dasharray: 1 5; stroke-dashoffset: 0; animation: bn-fade .7s var(--bn-ease) both; opacity: .65; } .bn-ch-area { opacity: 0; transform-origin: bottom; animation: bn-ch-rise .8s var(--bn-ease) .2s forwards; } .bn-ch-live { animation: bn-ch-pulse 2.6s var(--bn-ease) infinite; transform-box: fill-box; transform-origin: center; } .bn-ch-cross { stroke: var(--bn-link); stroke-width: 1; stroke-dasharray: 3 3; opacity: .45; } .bn-ch-hdot { stroke: var(--bn-surface); stroke-width: 2; } .bn-ch-tip { position: absolute; transform: translate(-50%, -118%); pointer-events: none; background: var(--bn-surface); border: 1px solid var(--bn-border); border-radius: var(--bn-radius-sm); box-shadow: var(--bn-shadow-2); padding: 8px 10px; white-space: nowrap; z-index: 3; transition: left .09s var(--bn-ease), top .09s var(--bn-ease); } .bn-ch-tip-lbl { font: 700 10px/1 var(--bn-font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bn-text-3); margin-bottom: 6px; } .bn-ch-tip-row { display: flex; align-items: center; gap: 7px; font: 500 12px/1.5 var(--bn-font-ui); color: var(--bn-text); } .bn-ch-tip-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; } .bn-ch-tip-row b { font: 700 12px/1.5 var(--bn-font-ui); font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 12px; } /* Focus-dim: wrapper gets data-dim, hovered element gets data-on; legends share the state */ .bn-dim { transition: opacity .15s var(--bn-ease); } [data-dim] .bn-dim:not([data-on]) { opacity: .35; } /* Load-in utilities for hand-built charts (bars, arcs, heatmaps) — stagger via animation-delay */ .bn-ch-bar { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); animation: bn-ch-bargrow .6s var(--bn-ease-spring) both; } .bn-ch-hfill { transform-origin: left; transform: scaleX(0); animation: bn-ch-hbarin .7s var(--bn-ease-spring) both; } .bn-ch-arc { transition: stroke-width .2s var(--bn-ease-spring), opacity .2s var(--bn-ease); } .bn-ch-arc-in { animation: bn-ch-arcsweep 1s var(--bn-ease) both; } .bn-ch-cell { transform: scale(0); animation: bn-ch-cellin .4s var(--bn-ease-spring) both; } /* delay = (row+col)*45ms */ @keyframes bn-ch-draw { to { stroke-dashoffset: 0; } } @keyframes bn-ch-rise { from { opacity: 0; transform: scaleY(.82); } to { opacity: 1; transform: scaleY(1); } } @keyframes bn-ch-pulse { 0%, 100% { transform: scale(1); opacity: .18; } 50% { transform: scale(1.5); opacity: .32; } } @keyframes bn-ch-bargrow { to { transform: scaleY(1); } } @keyframes bn-ch-hbarin { to { transform: scaleX(1); } } @keyframes bn-ch-arcsweep { from { stroke-dashoffset: var(--seg); } } @keyframes bn-ch-cellin { to { transform: scale(1); } }