/* Font setup*/ @font-face { font-family: 'MyFont'; src: url('/Fonts/Kanit-regular.ttf') format('truetype') ; font-weight:400; font-style:normal ; font-display:swap; } html,body {font-family: MyFont } /* ========================================================================== Bootstrap Theme Overrides for Cory Palette: primary: #C6DBCA (minty green) secondary: #FFE9C1 (pale amber) success: #0E653E (deep green) danger: #AC3324 (brick red) warning: #ED9814 (orange) info: #FFCC94 (peach) Usage: place this file AFTER Bootstrap in your . ========================================================================== */ /* ------------------------------ 1) Theme variables (light mode) ------------------------------ */ :root, [data-bs-theme="light"] { /* Core theme colors */ --bs-primary: #C6DBCA; /* minty green */ --bs-secondary: #FFE9C1; /* pale amber */ --bs-success: #0E653E; /* deep green */ --bs-danger: #AC3324; /* brick red */ --bs-warning: #ED9814; /* orange */ --bs-info: #FFCC94; /* peach */ /* RGB (some internal calcs/utilities use these) */ --bs-primary-rgb: 198,219,202; --bs-secondary-rgb: 255,233,193; --bs-success-rgb: 14,101,62; --bs-danger-rgb: 172,51,36; --bs-warning-rgb: 237,152,20; --bs-info-rgb: 255,204,148; /* Text emphasis & subtle variants (used by alerts, list groups, tables, etc.) */ /* Primary (light) */ --bs-primary-text-emphasis: #3e4c40; --bs-primary-bg-subtle: #e9f3ec; --bs-primary-border-subtle: #d5e7d7; /* Secondary (very light) */ --bs-secondary-text-emphasis: #6e5b37; --bs-secondary-bg-subtle: #fff6e6; --bs-secondary-border-subtle: #ffe8c8; /* Success (dark) */ --bs-success-text-emphasis: #bfe7d0; --bs-success-bg-subtle: #d7efe2; --bs-success-border-subtle: #a9dbc2; /* Danger (dark) */ --bs-danger-text-emphasis: #f1c2bc; --bs-danger-bg-subtle: #f6dbd8; --bs-danger-border-subtle: #e9b5ae; /* Warning (bright) */ --bs-warning-text-emphasis: #65440a; --bs-warning-bg-subtle: #fff0d7; --bs-warning-border-subtle: #ffdca6; /* Info (light) */ --bs-info-text-emphasis: #6a4f2e; --bs-info-bg-subtle: #fff1e2; --bs-info-border-subtle: #ffdcbf; /* Focus ring derived from primary */ --bs-focus-ring-color: rgba(198,219,202,0.35); /* Optional: Make links follow your primary instead of default blue */ --bs-link-color: var(--bs-primary); --bs-link-hover-color: color-mix(in srgb, var(--bs-link-color) 75%, black 25%); } /* -------------------------------- 2) Buttons — component-level map -------------------------------- */ /* Primary (light → dark text for contrast) */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-primary) 85%, black 15%); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-primary) 80%, black 20%); --bs-btn-active-bg: color-mix(in srgb, var(--bs-primary) 70%, black 30%); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-primary) 65%, black 35%); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-color: #0b0f0c; } /* Secondary (very light → dark text) */ .btn-secondary { --bs-btn-bg: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, black 15%); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 80%, black 20%); --bs-btn-active-bg: color-mix(in srgb, var(--bs-secondary) 70%, black 30%); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-secondary) 65%, black 35%); --bs-btn-disabled-bg: var(--bs-secondary); --bs-btn-disabled-border-color: var(--bs-secondary); --bs-btn-color: #2b2415; } /* Success (dark → light text) */ .btn-success { --bs-btn-bg: var(--bs-success); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, white 15%); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 85%, white 15%); --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 75%, white 25%); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 75%, white 25%); --bs-btn-disabled-bg: var(--bs-success); --bs-btn-disabled-border-color: var(--bs-success); --bs-btn-color: #fff; } /* Danger (dark → light text) */ .btn-danger { --bs-btn-bg: var(--bs-danger); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, white 15%); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 85%, white 15%); --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 75%, white 25%); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 75%, white 25%); --bs-btn-disabled-bg: var(--bs-danger); --bs-btn-disabled-border-color: var(--bs-danger); --bs-btn-color: #fff; } /* Warning (medium/bright → dark text) */ .btn-warning { --bs-btn-bg: var(--bs-warning); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, black 15%); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 80%, black 20%); --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 70%, black 30%); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 65%, black 35%); --bs-btn-disabled-bg: var(--bs-warning); --bs-btn-disabled-border-color: var(--bs-warning); --bs-btn-color: #221705; } /* Info (light → dark text) */ .btn-info { --bs-btn-bg: var(--bs-info); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, black 15%); --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 80%, black 20%); --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 70%, black 30%); --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 65%, black 35%); --bs-btn-disabled-bg: var(--bs-info); --bs-btn-disabled-border-color: var(--bs-info); --bs-btn-color: #2a1d0f; } /* -------------------------------- 3) Alerts — map to subtle/emphasis -------------------------------- */ .alert-primary { --bs-alert-color: var(--bs-primary-text-emphasis); --bs-alert-bg: var(--bs-primary-bg-subtle); --bs-alert-border-color: var(--bs-primary-border-subtle); } .alert-secondary { --bs-alert-color: var(--bs-secondary-text-emphasis); --bs-alert-bg: var(--bs-secondary-bg-subtle); --bs-alert-border-color: var(--bs-secondary-border-subtle); } .alert-success { --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-bg: var(--bs-success-bg-subtle); --bs-alert-border-color: var(--bs-success-border-subtle); } .alert-danger { --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-bg: var(--bs-danger-bg-subtle); --bs-alert-border-color: var(--bs-danger-border-subtle); color:black; } .alert-warning { --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-bg: var(--bs-warning-bg-subtle); --bs-alert-border-color: var(--bs-warning-border-subtle); } .alert-info { --bs-alert-color: var(--bs-info-text-emphasis); --bs-alert-bg: var(--bs-info-bg-subtle); --bs-alert-border-color: var(--bs-info-border-subtle); } /* --------------------------- 4) Badges — text-bg-* style --------------------------- */ .badge.text-bg-primary { --bs-badge-bg: var(--bs-primary); --bs-badge-color: #0b0f0c; } .badge.text-bg-secondary { --bs-badge-bg: var(--bs-secondary); --bs-badge-color: #2b2415; } .badge.text-bg-success { --bs-badge-bg: var(--bs-success); --bs-badge-color: #fff; } .badge.text-bg-danger { --bs-badge-bg: var(--bs-danger); --bs-badge-color: #fff; } .badge.text-bg-warning { --bs-badge-bg: var(--bs-warning); --bs-badge-color: #221705; } .badge.text-bg-info { --bs-badge-bg: var(--bs-info); --bs-badge-color: #2a1d0f; } /* ---------------------------------------------------- 5) Utilities — ensure .text-* and .bg-* use your vars ---------------------------------------------------- */ .text-primary { color: var(--bs-primary) !important; } .text-secondary { color: var(--bs-secondary) !important; } .text-success { color: var(--bs-success) !important; } .text-danger { color: var(--bs-danger) !important; } .text-warning { color: var(--bs-warning) !important; } .text-info { color: var(--bs-info) !important; } .bg-primary { background-color: var(--bs-primary) !important; } .bg-secondary { background-color: var(--bs-secondary) !important; } .bg-success { background-color: var(--bs-success) !important; } .bg-danger { background-color: var(--bs-danger) !important; } .bg-warning { background-color: var(--bs-warning) !important; } .bg-info { background-color: var(--bs-info) !important; } /* ------------------------------------------- 6) (Optional) Dark mode seed to tweak later ------------------------------------------- */ [data-bs-theme="dark"] { --bs-primary: #9fb9a5; --bs-secondary: #ffdc9a; --bs-success: #1a7a52; --bs-danger: #c14534; --bs-warning: #f0a53c; --bs-info: #ffc07a; --bs-primary-text-emphasis: #dfe9e3; --bs-primary-bg-subtle: #1f2521; --bs-primary-border-subtle: #39443c; --bs-secondary-text-emphasis: #fff1d9; --bs-secondary-bg-subtle: #2a2113; --bs-secondary-border-subtle: #4d4024; --bs-success-text-emphasis: #c7efe0; --bs-success-bg-subtle: #12251d; --bs-success-border-subtle: #244b3a; --bs-danger-text-emphasis: #ffd0ca; --bs-danger-bg-subtle: #2a1513; --bs-danger-border-subtle: #4e2a24; --bs-warning-text-emphasis: #ffe2b3; --bs-warning-bg-subtle: #2b1e0d; --bs-warning-border-subtle: #4e3a18; --bs-info-text-emphasis: #ffe7cf; --bs-info-bg-subtle: #2a1b0f; --bs-info-border-subtle: #4e341d; --bs-focus-ring-color: rgba(198,219,202,0.35); } .text-black { color: black !important ; }