/* * Find The Psycho — four-colour brand theme * * Palette: healing soft teal — for people who may be experiencing * or recovering from psychological abuse. Calm, safe, trustworthy. * * Primary #268d81 deep teal — sidebar, confirm actions * Secondary #52b3a7 mid teal — topbar, footer, secondary actions, labels * Tertiary #d95f4b warm coral — destructive actions, contrast text on teal * Quaternary #617f7d dark sage — subtitle, disclaimer, captions, titles */ /* ─── Light-mode brand colour tokens (also used as :root defaults) ── */ :root { /* Primary — 10% darker than original #2a9d8f */ --ftp-primary: #268d81; --ftp-primary-hover: #1f7e73; --ftp-primary-active: #196660; --ftp-primary-rgb: 38, 141, 129; --ftp-secondary: #52b3a7; --ftp-secondary-hover: #47a69a; --ftp-secondary-rgb: 82, 179, 167; --ftp-tertiary: #d95f4b; --ftp-tertiary-hover: #c04f3c; --ftp-tertiary-rgb: 217, 95, 75; /* Quaternary — darker sage for subtle contrast on secondary backgrounds */ --ftp-quaternary: #617f7d; --ftp-quaternary-rgb: 97, 127, 125; --ftp-body-bg: #f5fafa; --ftp-body-color: #1f3635; --ftp-border: #cce5e2; --ftp-card-bg: #ffffff; /* ─── BB sidebar overrides ──────────────────────────────────── */ --bb-sidebar-width: 216px; /* 270 × 0.8 */ --bb-sidebar-collapsed-width: 55px; /* 50 × 1.1 */ --bb-sidebar-background-color: var(--ftp-primary); --bb-sidebar-top-row-background-color: var(--ftp-primary); --bb-sidebar-top-row-border-color: var(--ftp-primary); --bb-sidebar-brand-image-width: 200px; --bb-sidebar-brand-image-height: 56px; --bb-sidebar-title-text-color: rgba(255,255,255,0.0); /* hidden — logo contains it */ --bb-sidebar-brand-icon-color: rgba(255,255,255,0.9); --bb-sidebar-nav-item-text-color: rgba(255,255,255,0.88); --bb-sidebar-nav-item-text-active-color-rgb:255,255,255; --bb-sidebar-nav-item-text-hover-color: rgba(255,255,255,1); --bb-sidebar-nav-item-text-active-color: rgba(255,255,255,1); --bb-sidebar-nav-item-background-hover-color: rgba(255,255,255,0.14); --bb-sidebar-nav-item-group-background-color: rgba(255,255,255,0.08); --bb-sidebar-navbar-toggler-icon-color: rgba(255,255,255,0.9); --bb-sidebar-navbar-toggler-background-color: rgba(255,255,255,0.12); --bb-sidebar-content-border-color: rgba(255,255,255,0.15); } /* ─── Dark-mode brand colour tokens ─────────────────────────────── */ /* BB ThemeSwitcher sets data-bs-theme="dark" on . */ [data-bs-theme="dark"] { /* Lighten the teal palette so it reads on dark backgrounds */ --ftp-primary: #3dbfb0; --ftp-primary-hover: #35aba0; --ftp-primary-active: #2d9a90; --ftp-primary-rgb: 61, 191, 176; --ftp-secondary: #154f49; --ftp-secondary-hover: #123f3c; --ftp-secondary-rgb: 21, 79, 73; --ftp-tertiary: #e8725f; --ftp-tertiary-hover: #d4614f; --ftp-tertiary-rgb: 232, 114, 95; /* Quaternary — darker for subtle contrast on secondary backgrounds */ --ftp-quaternary: #7aada9; --ftp-quaternary-rgb: 122, 173, 169; --ftp-body-bg: #0f2322; --ftp-body-color: #e4f0ef; --ftp-border: #1e4340; --ftp-card-bg: #162e2b; /* Sidebar stays dark in dark mode — use a deep teal instead of the bright interactive --ftp-primary so it doesn't glare */ --bb-sidebar-background-color: #183535; --bb-sidebar-top-row-background-color: #183535; --bb-sidebar-top-row-border-color: #183535; --bb-sidebar-content-border-color: rgba(255,255,255,0.12); --bb-sidebar-nav-item-background-hover-color: rgba(255,255,255,0.10); } /* ─── Bootstrap semantic overrides — both themes ────────────────── */ /* These intentionally cover :root AND [data-bs-theme="dark"] because the --ftp-* tokens defined above change per theme automatically. */ :root, [data-bs-theme="dark"] { --bs-primary: var(--ftp-primary); --bs-primary-rgb: var(--ftp-primary-rgb); --bs-secondary: var(--ftp-secondary); --bs-secondary-rgb: var(--ftp-secondary-rgb); --bs-danger: var(--ftp-tertiary); --bs-danger-rgb: var(--ftp-tertiary-rgb); --bs-link-color: var(--ftp-primary); --bs-link-hover-color: var(--ftp-primary-hover); --bs-body-bg: var(--ftp-body-bg); --bs-body-color: var(--ftp-body-color); --bs-secondary-color: var(--ftp-quaternary); --bs-border-color: var(--ftp-border); --bs-card-bg: var(--ftp-card-bg); --bs-form-label-color: var(--ftp-secondary); } /* ─── Utility: topbar + footer bar ──────────────────────────────── */ .ftp-bar { background-color: var(--ftp-secondary) !important; } /* ─── Primary button ─────────────────────────────────────────────── */ .btn-primary { --bs-btn-bg: var(--ftp-primary); --bs-btn-border-color: var(--ftp-primary); --bs-btn-hover-bg: var(--ftp-primary-hover); --bs-btn-hover-border-color: var(--ftp-primary-hover); --bs-btn-active-bg: var(--ftp-primary-active); --bs-btn-active-border-color: var(--ftp-primary-active); --bs-btn-focus-shadow-rgb: var(--ftp-primary-rgb); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; /* Disabled: use secondary colour so it reads as "unavailable" not broken */ --bs-btn-disabled-bg: var(--ftp-secondary); --bs-btn-disabled-border-color: var(--ftp-secondary); --bs-btn-disabled-color: rgba(255,255,255,0.65); } /* ─── Outline-primary button ─────────────────────────────────────── */ .btn-outline-primary { --bs-btn-color: var(--ftp-primary); --bs-btn-border-color: var(--ftp-primary); --bs-btn-hover-bg: var(--ftp-primary); --bs-btn-hover-border-color: var(--ftp-primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--ftp-primary-hover); --bs-btn-active-border-color: var(--ftp-primary-hover); --bs-btn-active-color: #fff; --bs-btn-focus-shadow-rgb: var(--ftp-primary-rgb); } /* ─── Secondary button ───────────────────────────────────────────── */ .btn-secondary { --bs-btn-bg: var(--ftp-secondary); --bs-btn-border-color: var(--ftp-secondary); --bs-btn-hover-bg: var(--ftp-secondary-hover); --bs-btn-hover-border-color: var(--ftp-secondary-hover); --bs-btn-focus-shadow-rgb: var(--ftp-secondary-rgb); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; } /* ─── Outline-light (Register on teal bar) ───────────────────────── */ .btn-outline-light { --bs-btn-color: rgba(255,255,255,0.9); --bs-btn-border-color: rgba(255,255,255,0.6); --bs-btn-hover-bg: rgba(255,255,255,0.15); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: #fff; --bs-btn-active-bg: rgba(255,255,255,0.25); } /* ─── Danger button ──────────────────────────────────────────────── */ .btn-danger { --bs-btn-bg: var(--ftp-tertiary); --bs-btn-border-color: var(--ftp-tertiary); --bs-btn-hover-bg: var(--ftp-tertiary-hover); --bs-btn-hover-border-color: var(--ftp-tertiary-hover); --bs-btn-focus-shadow-rgb: var(--ftp-tertiary-rgb); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; } /* Danger text */ .text-danger { color: var(--ftp-tertiary) !important; } /* ─── Link colours ───────────────────────────────────────────────── */ a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--ftp-primary); } a:not(.btn):not(.nav-link):not(.dropdown-item):hover { color: var(--ftp-primary-hover); } /* ─── Quaternary / muted text ────────────────────────────────────── */ .text-muted { color: var(--ftp-quaternary) !important; } /* ─── Form labels ────────────────────────────────────────────────── */ .form-label { color: var(--ftp-secondary); font-weight: 500; } /* ─── Alerts ─────────────────────────────────────────────────────── */ .alert-primary { --bs-alert-color: #0a3533; --bs-alert-bg: #d6f0ee; --bs-alert-border-color: #b8e4e0; } [data-bs-theme="dark"] .alert-primary { --bs-alert-color: #caeae7; --bs-alert-bg: #1a3e3c; --bs-alert-border-color: #255452; } /* ─── Admin table header — secondary colour ─────────────────────── */ thead.thead-secondary th { background-color: var(--ftp-secondary); color: #fff; border-bottom-color: var(--ftp-secondary-hover); } /* ─── Utility aliases ────────────────────────────────────────────── */ .bg-primary { background-color: var(--ftp-primary) !important; } .text-primary { color: var(--ftp-primary) !important; } .border-primary{ border-color: var(--ftp-primary) !important; } /* ─── Admin sidebar items ────────────────────────────────────────── */ /* Header label + icon: tertiary (coral) colour */ .ftp-admin-header .nav-link { color: var(--ftp-tertiary) !important; } .ftp-admin-header .nav-link:hover { color: var(--ftp-tertiary-hover) !important; background-color: rgba(255,255,255,0.14); } /* Sub-entries: same colour as normal items, shifted right by one icon width */ .ftp-admin-sub .nav-link { padding-left: calc(1rem + 1.5rem) !important; color: var(--bb-sidebar-nav-item-text-color) !important; } .ftp-admin-sub .nav-link:hover, .ftp-admin-sub .nav-link.active { color: rgba(255,255,255,1) !important; } /* ─── Footer nav separator (Privacy Policy link) ─────────────────── */ .ftp-nav-separator { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 0.25rem; padding-top: 0.25rem; }