/* ============================================================================ * Syn County Ops - Bootstrap 5.3.3 Theme * * Load Bootstrap 5.3.3 first, then this file. * * * * * Scope the theme with data-bs-theme="dark" and .syn-root on or any * wrapping element: * * * * The theme maps Syn County design tokens onto Bootstrap CSS variables, then * lightly tunes common Bootstrap components. * ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"); :root, .syn-root { --syn-red: #c1121f; --syn-bg: #121417; --syn-surface: #1b1f24; --syn-surface-raised: #22272e; --syn-border: rgba(214, 198, 168, 0.08); --syn-border-strong: rgba(214, 198, 168, 0.16); --syn-sand: #d6c6a8; --syn-brown: #5a4634; --syn-steel: #4c6b73; --syn-gold: #b89c5a; --syn-text: #ece7dd; --syn-text-muted: #a8a29a; --syn-text-faint: #6e6b66; --syn-ok: #3fb07a; --syn-warn: var(--syn-gold); --syn-info: var(--syn-steel); --syn-danger: #e5484d; --syn-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --syn-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --syn-font-display: "Cinzel", Georgia, serif; --syn-font-nav: var(--syn-font-display); --syn-text-display: 30.8px; --syn-text-h1: 24.2px; --syn-text-h2: 19.8px; --syn-text-h3: 16.5px; --syn-text-body: 15.4px; --syn-text-small: 14.3px; --syn-text-caption: 13.2px; --syn-radius-card: 14px; --syn-radius-input: 8px; } .syn-root, [data-bs-theme="dark"].syn-root, .syn-root [data-bs-theme="dark"] { color-scheme: dark; --bs-body-font-family: var(--syn-font-sans); --bs-font-monospace: var(--syn-font-mono); --bs-body-font-size: var(--syn-text-body); --bs-body-line-height: 1.5; --bs-body-color: var(--syn-text); --bs-body-color-rgb: 236, 231, 221; --bs-body-bg: var(--syn-bg); --bs-body-bg-rgb: 18, 20, 23; --bs-emphasis-color: var(--syn-text); --bs-emphasis-color-rgb: 236, 231, 221; --bs-secondary-color: var(--syn-text-muted); --bs-secondary-color-rgb: 168, 162, 154; --bs-tertiary-color: var(--syn-text-faint); --bs-tertiary-color-rgb: 110, 107, 102; --bs-secondary-bg: var(--syn-surface); --bs-secondary-bg-rgb: 27, 31, 36; --bs-tertiary-bg: var(--syn-surface-raised); --bs-tertiary-bg-rgb: 34, 39, 46; --bs-border-color: var(--syn-border); --bs-border-color-translucent: var(--syn-border-strong); --bs-border-radius: var(--syn-radius-input); --bs-border-radius-sm: 6px; --bs-border-radius-lg: var(--syn-radius-card); --bs-link-color: var(--syn-steel); --bs-link-hover-color: var(--syn-text); --bs-primary: var(--syn-red); --bs-primary-rgb: 193, 18, 31; --bs-secondary: var(--syn-steel); --bs-secondary-rgb: 76, 107, 115; --bs-success: var(--syn-ok); --bs-success-rgb: 63, 176, 122; --bs-info: var(--syn-steel); --bs-info-rgb: 76, 107, 115; --bs-warning: var(--syn-gold); --bs-warning-rgb: 184, 156, 90; --bs-danger: var(--syn-danger); --bs-danger-rgb: 229, 72, 77; --bs-light: var(--syn-sand); --bs-light-rgb: 214, 198, 168; --bs-dark: var(--syn-bg); --bs-dark-rgb: 18, 20, 23; --bs-focus-ring-color: rgba(193, 18, 31, 0.32); --bs-focus-ring-width: 0.2rem; --bs-code-color: var(--syn-gold); background: var(--bs-body-bg); color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-size: var(--bs-body-font-size); line-height: var(--bs-body-line-height); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .syn-root h1, .syn-root .h1 { font-family: var(--syn-font-display); letter-spacing: 0.01em; } .syn-root h1, .syn-root .h1 { font-size: var(--syn-text-h1); line-height: 1.2; font-weight: 600; } .syn-root h2, .syn-root .h2 { font-size: var(--syn-text-h2); line-height: 1.25; font-weight: 600; } .syn-root h3, .syn-root .h3 { font-size: var(--syn-text-h3); line-height: 1.3; font-weight: 600; } .syn-root h4, .syn-root .h4, .syn-root h5, .syn-root .h5, .syn-root h6, .syn-root .h6 { font-weight: 600; } .syn-root .display-1, .syn-root .display-2, .syn-root .display-3, .syn-root .display-4, .syn-root .display-5, .syn-root .display-6, .syn-display { font-family: var(--syn-font-display); font-size: var(--syn-text-display); line-height: 1.15; font-weight: 600; letter-spacing: 0.01em; } .syn-wordmark { font-family: var(--syn-font-display); font-size: var(--syn-text-h2); font-weight: 700; letter-spacing: 0.04em; color: var(--syn-text); } .syn-caption-label, .form-label, .col-form-label { font-size: var(--syn-text-caption); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--syn-text-faint); } .syn-root small, .syn-root .small { font-size: var(--syn-text-small); } .syn-mono { font-family: var(--syn-font-mono); font-size: var(--syn-text-small); color: var(--syn-text-muted); } .syn-text-muted { color: var(--syn-text-muted) !important; } .syn-text-faint { color: var(--syn-text-faint) !important; } .syn-root .card { --bs-card-bg: var(--syn-surface); --bs-card-color: var(--syn-text); --bs-card-border-color: var(--syn-border); --bs-card-border-radius: var(--syn-radius-card); --bs-card-cap-bg: transparent; --bs-card-cap-color: var(--syn-text-muted); box-shadow: none; } .syn-root .card-header, .syn-root .card-footer { border-color: var(--syn-border); } .syn-root .card-raised, .syn-root .syn-card-raised { background: var(--syn-surface-raised); border-color: var(--syn-border-strong); } .syn-root .btn { --bs-btn-border-radius: var(--syn-radius-input); --bs-btn-font-size: var(--syn-text-small); --bs-btn-font-weight: 500; --bs-btn-padding-y: 0.5rem; --bs-btn-padding-x: 0.875rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; font-family: var(--syn-font-sans); } .syn-root .btn-primary { --bs-btn-bg: var(--syn-red); --bs-btn-border-color: var(--syn-red); --bs-btn-hover-bg: #ad101c; --bs-btn-hover-border-color: #ad101c; --bs-btn-active-bg: #980e18; --bs-btn-active-border-color: #980e18; --bs-btn-disabled-bg: var(--syn-red); --bs-btn-disabled-border-color: var(--syn-red); --bs-btn-color: #fff; } .syn-root .btn-outline-primary { --bs-btn-color: var(--syn-text); --bs-btn-border-color: var(--syn-border-strong); --bs-btn-hover-color: var(--syn-text); --bs-btn-hover-bg: var(--syn-surface-raised); --bs-btn-hover-border-color: var(--syn-border-strong); --bs-btn-active-color: var(--syn-text); --bs-btn-active-bg: var(--syn-surface-raised); --bs-btn-active-border-color: var(--syn-red); } .syn-root .btn-danger { --bs-btn-bg: var(--syn-danger); --bs-btn-border-color: var(--syn-danger); --bs-btn-hover-bg: #ce4045; --bs-btn-hover-border-color: #ce4045; } .syn-root .form-control, .syn-root .form-select { background-color: var(--syn-bg); border-color: var(--syn-border-strong); border-radius: var(--syn-radius-input); color: var(--syn-text); font-size: var(--syn-text-small); } .syn-root .form-control::placeholder { color: var(--syn-text-faint); } .syn-root .form-control:focus, .syn-root .form-select:focus { background-color: var(--syn-bg); border-color: var(--syn-red); box-shadow: 0 0 0 0.2rem rgba(193, 18, 31, 0.24); color: var(--syn-text); } .syn-root .form-text { color: var(--syn-text-faint); font-size: var(--syn-text-caption); } .syn-root .input-group-text { background: var(--syn-surface-raised); border-color: var(--syn-border-strong); color: var(--syn-text-muted); } .syn-root .form-check-input { background-color: var(--syn-bg); border-color: var(--syn-border-strong); } .syn-root .form-check-input:checked { background-color: var(--syn-red); border-color: var(--syn-red); } .syn-root .form-check-input:focus { border-color: var(--syn-red); box-shadow: 0 0 0 0.2rem rgba(193, 18, 31, 0.24); } .syn-root .table { --bs-table-bg: transparent; --bs-table-color: var(--syn-text); --bs-table-border-color: var(--syn-border); --bs-table-hover-bg: var(--syn-surface-raised); --bs-table-hover-color: var(--syn-text); color: var(--syn-text); font-size: var(--syn-text-small); margin-bottom: 0; } .syn-root .table th { color: var(--syn-text-faint); font-weight: 500; } .syn-root .badge, .syn-root .syn-pill { border-radius: 999px; font-size: var(--syn-text-caption); font-weight: 500; padding: 0.25rem 0.625rem; } .syn-root .badge.text-bg-success { color: var(--syn-ok) !important; background: rgba(63, 176, 122, 0.14) !important; } .syn-root .badge.text-bg-warning { color: var(--syn-gold) !important; background: rgba(184, 156, 90, 0.14) !important; } .syn-root .badge.text-bg-info { color: var(--syn-steel) !important; background: rgba(76, 107, 115, 0.18) !important; } .syn-root .badge.text-bg-danger { color: var(--syn-danger) !important; background: rgba(229, 72, 77, 0.14) !important; } .syn-root .badge.text-bg-primary { color: var(--syn-red) !important; background: rgba(193, 18, 31, 0.14) !important; } .syn-root .badge.text-bg-secondary { color: var(--syn-text-faint) !important; background: rgba(110, 107, 102, 0.14) !important; } .syn-root .alert { --bs-alert-border-color: var(--syn-border-strong); --bs-alert-bg: var(--syn-surface); --bs-alert-color: var(--syn-text); border-radius: var(--syn-radius-card); font-family: var(--syn-font-sans); } .syn-root .modal, .syn-root .dropdown-menu, .syn-root .popover, .syn-root .toast, .syn-root .offcanvas, .syn-root .accordion { --bs-modal-bg: var(--syn-surface); --bs-modal-color: var(--syn-text); --bs-modal-border-color: var(--syn-border-strong); --bs-dropdown-bg: var(--syn-surface); --bs-dropdown-color: var(--syn-text); --bs-dropdown-border-color: var(--syn-border-strong); --bs-dropdown-link-color: var(--syn-text); --bs-dropdown-link-hover-color: var(--syn-text); --bs-dropdown-link-hover-bg: var(--syn-surface-raised); --bs-popover-bg: var(--syn-surface); --bs-popover-border-color: var(--syn-border-strong); --bs-toast-bg: var(--syn-surface); --bs-toast-color: var(--syn-text); --bs-toast-border-color: var(--syn-border-strong); --bs-offcanvas-bg: var(--syn-surface); --bs-offcanvas-color: var(--syn-text); --bs-accordion-bg: var(--syn-surface); --bs-accordion-color: var(--syn-text); --bs-accordion-border-color: var(--syn-border); --bs-accordion-active-bg: var(--syn-surface-raised); --bs-accordion-active-color: var(--syn-text); --bs-accordion-btn-color: var(--syn-text); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(193, 18, 31, 0.24); } .syn-root .dropdown-divider, .syn-root .modal-header, .syn-root .modal-footer, .syn-root .toast-header { border-color: var(--syn-border); } .syn-root .toast-header { background: var(--syn-surface-raised); color: var(--syn-text-muted); } .syn-root .nav-pills { --bs-nav-pills-border-radius: var(--syn-radius-input); --bs-nav-pills-link-active-bg: var(--syn-red); } .syn-root .nav-link, .syn-root .dropdown-item, .syn-root .list-group-item-action { font-family: var(--syn-font-nav); font-weight: 600; } .syn-root .nav-tabs { --bs-nav-tabs-border-color: var(--syn-border); --bs-nav-tabs-link-hover-border-color: var(--syn-border) var(--syn-border) var(--syn-border); --bs-nav-tabs-link-active-color: var(--syn-text); --bs-nav-tabs-link-active-bg: var(--syn-surface); --bs-nav-tabs-link-active-border-color: var(--syn-border-strong); } .syn-root .navbar { --bs-navbar-color: var(--syn-text-muted); --bs-navbar-hover-color: var(--syn-text); --bs-navbar-active-color: var(--syn-text); --bs-navbar-brand-color: var(--syn-text); --bs-navbar-brand-hover-color: var(--syn-text); background: var(--syn-surface); border-bottom: 1px solid var(--syn-border); } .syn-root .navbar-brand { font-family: var(--syn-font-display); font-weight: 700; letter-spacing: 0.04em; } .syn-root .list-group { --bs-list-group-bg: var(--syn-surface); --bs-list-group-color: var(--syn-text); --bs-list-group-border-color: var(--syn-border); --bs-list-group-action-hover-bg: var(--syn-surface-raised); --bs-list-group-action-hover-color: var(--syn-text); --bs-list-group-active-bg: var(--syn-red); --bs-list-group-active-border-color: var(--syn-red); } .syn-root .pagination { --bs-pagination-bg: var(--syn-surface); --bs-pagination-color: var(--syn-text); --bs-pagination-border-color: var(--syn-border); --bs-pagination-hover-bg: var(--syn-surface-raised); --bs-pagination-hover-color: var(--syn-text); --bs-pagination-hover-border-color: var(--syn-border-strong); --bs-pagination-active-bg: var(--syn-red); --bs-pagination-active-border-color: var(--syn-red); --bs-pagination-disabled-bg: var(--syn-surface); --bs-pagination-disabled-color: var(--syn-text-faint); --bs-pagination-disabled-border-color: var(--syn-border); } .syn-root .progress { --bs-progress-bg: var(--syn-surface-raised); --bs-progress-bar-bg: var(--syn-red); } .syn-root .breadcrumb { --bs-breadcrumb-divider-color: var(--syn-text-faint); --bs-breadcrumb-item-active-color: var(--syn-text-muted); } .syn-root .hr, .syn-root hr { border-color: var(--syn-border); opacity: 1; } .syn-root ::-webkit-scrollbar { width: 10px; height: 10px; } .syn-root ::-webkit-scrollbar-thumb { background: var(--syn-surface-raised); border-radius: 999px; } .syn-root ::-webkit-scrollbar-track { background: transparent; } /* Compatibility aliases from the original framework-agnostic theme. */ .syn-card { background: var(--syn-surface); border: 1px solid var(--syn-border); border-radius: var(--syn-radius-card); padding: 20px; } .syn-card-raised { background: var(--syn-surface-raised); border: 1px solid var(--syn-border-strong); border-radius: var(--syn-radius-card); padding: 20px; } .syn-card.syn-flush, .syn-card-raised.syn-flush { padding: 0; } .syn-link { color: var(--syn-steel); text-decoration: none; } .syn-link:hover { color: var(--syn-text); }