.text-wrap-balance { text-wrap: balance; } /* Cinematic Dark Bootstrap Theme — Nested CSS Version For premium product pages, editorial landing pages, and night-fog marketing sites. Drop this after Bootstrap, then use: . Mood: narrow dark fog band, warm luminous typography, Solarized-adjacent accents. This version uses native CSS nesting. It is meant to make the theme read as one dark-mode scope instead of many repeated [data-bs-theme="dark"] selectors. */ [data-bs-theme="dark"] { color-scheme: dark; /* Core canvas */ --bs-body-color: #d7d8d1; --bs-body-color-rgb: 215, 216, 209; --bs-body-bg: #0b1014; --bs-body-bg-rgb: 11, 16, 20; --bs-emphasis-color: #fff6df; --bs-emphasis-color-rgb: 255, 246, 223; /* Muted text and layered fog surfaces */ --bs-secondary-color: rgba(215, 216, 209, 0.72); --bs-secondary-color-rgb: 215, 216, 209; --bs-secondary-bg: #111922; --bs-secondary-bg-rgb: 17, 25, 34; --bs-tertiary-color: rgba(215, 216, 209, 0.52); --bs-tertiary-color-rgb: 215, 216, 209; --bs-tertiary-bg: #172129; --bs-tertiary-bg-rgb: 23, 33, 41; /* Brand color system: Solarized-inspired, darker, cinematic, less synthetic. */ --bs-primary: #2aa198; --bs-primary-rgb: 42, 161, 152; --bs-secondary: #586e75; --bs-secondary-rgb: 88, 110, 117; --bs-success: #859900; --bs-success-rgb: 133, 153, 0; --bs-info: #268bd2; --bs-info-rgb: 38, 139, 210; --bs-warning: #b58900; --bs-warning-rgb: 181, 137, 0; --bs-danger: #dc322f; --bs-danger-rgb: 220, 50, 47; --bs-light: #eee8d5; --bs-light-rgb: 238, 232, 213; --bs-dark: #071014; --bs-dark-rgb: 7, 16, 20; /* Text emphasis: luminous but not neon. */ --bs-primary-text-emphasis: #65d1c9; --bs-secondary-text-emphasis: #a4b2b7; --bs-success-text-emphasis: #c4d65a; --bs-info-text-emphasis: #7fc7f0; --bs-warning-text-emphasis: #e8c766; --bs-danger-text-emphasis: #f28b85; --bs-light-text-emphasis: #fff6df; --bs-dark-text-emphasis: #c4cdc9; /* Subtle backgrounds: quiet color shadows, useful for badges, alerts, cards. */ --bs-primary-bg-subtle: #092e33; --bs-secondary-bg-subtle: #151c22; --bs-success-bg-subtle: #202800; --bs-info-bg-subtle: #0a2638; --bs-warning-bg-subtle: #2c2305; --bs-danger-bg-subtle: #321010; --bs-light-bg-subtle: #202a30; --bs-dark-bg-subtle: #070b0e; /* Borders: smoky, mineral, slightly chromatic. */ --bs-primary-border-subtle: #176c70; --bs-secondary-border-subtle: #33434b; --bs-success-border-subtle: #566400; --bs-info-border-subtle: #185c83; --bs-warning-border-subtle: #735a09; --bs-danger-border-subtle: #7c211f; --bs-light-border-subtle: #425058; --bs-dark-border-subtle: #1c252c; --bs-heading-color: #fff1cf; --bs-link-color: #65d1c9; --bs-link-hover-color: #8fe4dd; --bs-link-color-rgb: 101, 209, 201; --bs-link-hover-color-rgb: 143, 228, 221; --bs-code-color: #d97aa6; --bs-highlight-color: #fff6df; --bs-highlight-bg: #4a3605; --bs-border-color: #2b3941; --bs-border-color-translucent: rgba(238, 232, 213, 0.14); --bs-form-valid-color: #c4d65a; --bs-form-valid-border-color: #6f8200; --bs-form-invalid-color: #f28b85; --bs-form-invalid-border-color: #9c2926; /* Component affordances used by Bootstrap 5.3+ */ --bs-primary-bg-subtle-rgb: 9, 46, 51; --bs-secondary-bg-subtle-rgb: 21, 28, 34; --bs-success-bg-subtle-rgb: 32, 40, 0; --bs-info-bg-subtle-rgb: 10, 38, 56; --bs-warning-bg-subtle-rgb: 44, 35, 5; --bs-danger-bg-subtle-rgb: 50, 16, 16; /* Opinionated marketing/page tokens; optional, but useful in custom sections. */ --theme-canvas: #0b1014; --theme-canvas-deep: #070b0e; --theme-surface-1: #101821; --theme-surface-2: #141e26; --theme-surface-3: #1a252d; --theme-fog: rgba(238, 232, 213, 0.08); --theme-fog-strong: rgba(238, 232, 213, 0.14); --theme-gold: #b58900; --theme-cyan: #2aa198; --theme-blue: #268bd2; --theme-magenta: #d33682; --theme-violet: #6c71c4; --theme-red: #dc322f; --theme-green: #859900; --theme-hero-gradient: radial-gradient(circle at 18% 8%, rgba(42, 161, 152, 0.22), transparent 34%), radial-gradient(circle at 82% 18%, rgba(108, 113, 196, 0.18), transparent 30%), radial-gradient(circle at 58% 82%, rgba(181, 137, 0, 0.12), transparent 36%), linear-gradient(180deg, #0b1014 0%, #101821 48%, #070b0e 100%); --theme-panel-gradient: linear-gradient(180deg, rgba(255, 246, 223, 0.055), rgba(255, 246, 223, 0.018)); --theme-edge-light: rgba(255, 246, 223, 0.16); --theme-edge-dark: rgba(0, 0, 0, 0.42); --theme-shadow-soft: 0 24px 80px rgba(0, 0, 0, 0.42); --theme-shadow-premium: 0 32px 120px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 246, 223, 0.08); /* Optional polish for common Bootstrap surfaces on product/marketing pages. */ & body { background: radial-gradient(circle at 12% -8%, rgba(42, 161, 152, 0.16), transparent 28rem), radial-gradient(circle at 84% 0%, rgba(108, 113, 196, 0.13), transparent 26rem), var(--bs-body-bg); background-repeat: no-repeat; background-attachment: fixed; } & .card, & .modal-content, & .dropdown-menu, & .offcanvas, & .list-group-item { background-color: var(--theme-surface-1); background-image: var(--theme-panel-gradient); border-color: var(--bs-border-color-translucent); box-shadow: var(--theme-shadow-soft); } & .navbar, & .bg-body-tertiary { background-color: rgba(16, 24, 33, 0.82) !important; /* backdrop-filter: blur(18px) saturate(122%); */ border-color: var(--bs-border-color-translucent); } & .btn-primary { --bs-btn-color: #041113; --bs-btn-bg: #65d1c9; --bs-btn-border-color: #65d1c9; --bs-btn-hover-color: #031012; --bs-btn-hover-bg: #8fe4dd; --bs-btn-hover-border-color: #8fe4dd; --bs-btn-focus-shadow-rgb: 101, 209, 201; --bs-btn-active-color: #031012; --bs-btn-active-bg: #51beb6; --bs-btn-active-border-color: #51beb6; --bs-btn-disabled-color: #0b1014; --bs-btn-disabled-bg: rgba(101, 209, 201, 0.45); --bs-btn-disabled-border-color: rgba(101, 209, 201, 0.25); } & .btn-outline-primary { --bs-btn-color: #65d1c9; --bs-btn-border-color: rgba(101, 209, 201, 0.48); --bs-btn-hover-color: #041113; --bs-btn-hover-bg: #65d1c9; --bs-btn-hover-border-color: #65d1c9; --bs-btn-focus-shadow-rgb: 101, 209, 201; --bs-btn-active-color: #041113; --bs-btn-active-bg: #51beb6; --bs-btn-active-border-color: #51beb6; } & .form-control, & .form-select { background-color: #0e151c; border-color: #2e414a; color: var(--bs-body-color); &:focus { background-color: #101922; border-color: #65d1c9; box-shadow: 0 0 0 0.25rem rgba(101, 209, 201, 0.16); } } & ::selection { color: #fff6df; background: rgba(42, 161, 152, 0.42); } }