/* ============================================================================ Braintek Aware themes — ported from the Braintek TBR Platform so both apps share one design language. Three modes driven by : (none) = Classic : the original Bootstrap look, untouched by ANY rule here "modern" = Light : soft surfaces, rounded cards, brand-gradient navbar "dark" = Dark : the Light design on a dark palette Every selector below is scoped under html[data-theme=...] so Classic cannot regress. Bootstrap 5.1 has no native dark mode — the dark palette is done here with the same custom properties Light uses. ========================================================================== */ /* ---- design tokens -------------------------------------------------------- */ html[data-theme="modern"] { --t-bg: #f2f5fa; --t-surface: #ffffff; --t-surface-2: #f7f9fc; --t-text: #1c2433; --t-muted: #64748b; --t-border: #e4e9f2; --t-accent: #4472C4; --t-accent-contrast: #ffffff; --t-nav: linear-gradient(120deg, #1F3864 0%, #2c4f8f 55%, #4472C4 100%); --t-nav-link: rgba(255, 255, 255, .82); --t-nav-link-hover-bg: rgba(255, 255, 255, .12); --t-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 4px 14px rgba(16, 24, 40, .06); --t-shadow-lift: 0 2px 4px rgba(16, 24, 40, .07), 0 10px 26px rgba(16, 24, 40, .10); --t-row-hover: rgba(68, 114, 196, .06); color-scheme: light; } html[data-theme="dark"] { --t-bg: #0e1320; --t-surface: #161d2d; --t-surface-2: #1c2438; --t-text: #e6eaf3; --t-muted: #94a0b5; --t-border: rgba(255, 255, 255, .09); --t-accent: #6ea8fe; --t-accent-contrast: #0e1320; --t-nav: #121828; --t-nav-link: rgba(230, 234, 243, .78); --t-nav-link-hover-bg: rgba(255, 255, 255, .08); --t-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .30); --t-shadow-lift: 0 2px 4px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .38); --t-row-hover: rgba(110, 168, 254, .08); color-scheme: dark; } /* ---- shared "modern" design (applies to Light AND Dark) ------------------- */ html[data-theme="modern"] body, html[data-theme="dark"] body { background-color: var(--t-bg); color: var(--t-text); -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } /* the learner layout sets bg-light on ; theme wins outside Classic */ html[data-theme="modern"] body.bg-light, html[data-theme="dark"] body.bg-light { background-color: var(--t-bg) !important; } /* headings a touch tighter and bolder */ html[data-theme="modern"] h1, html[data-theme="dark"] h1, html[data-theme="modern"] h2, html[data-theme="dark"] h2, html[data-theme="modern"] h3, html[data-theme="dark"] h3 { font-weight: 700; letter-spacing: -.01em; } /* navbar + learner header: gradient brand bar, pill hover links */ html[data-theme="modern"] .navbar.bg-dark, html[data-theme="dark"] .navbar.bg-dark, html[data-theme="modern"] .learner-header, html[data-theme="dark"] .learner-header { background: var(--t-nav) !important; border-bottom: 1px solid var(--t-border) !important; box-shadow: var(--t-shadow); } html[data-theme="modern"] .navbar .navbar-brand, html[data-theme="dark"] .navbar .navbar-brand { font-weight: 700; letter-spacing: .01em; } html[data-theme="modern"] .navbar .nav-link, html[data-theme="dark"] .navbar .nav-link, html[data-theme="modern"] .learner-header .nav-link, html[data-theme="dark"] .learner-header .nav-link { color: var(--t-nav-link); border-radius: .5rem; padding: .45rem .85rem; transition: background-color .15s ease, color .15s ease; } html[data-theme="modern"] .navbar .nav-link:hover, html[data-theme="dark"] .navbar .nav-link:hover, html[data-theme="modern"] .navbar .nav-link:focus, html[data-theme="dark"] .navbar .nav-link:focus, html[data-theme="modern"] .learner-header .nav-link:hover, html[data-theme="dark"] .learner-header .nav-link:hover { color: #fff; background-color: var(--t-nav-link-hover-bg); } /* cards: rounded, borderless-feeling surfaces with soft depth */ html[data-theme="modern"] .card, html[data-theme="dark"] .card { background-color: var(--t-surface); border: 1px solid var(--t-border); border-radius: .9rem; box-shadow: var(--t-shadow); overflow: hidden; transition: box-shadow .15s ease; } html[data-theme="modern"] .card:hover, html[data-theme="dark"] .card:hover { box-shadow: var(--t-shadow-lift); } html[data-theme="modern"] .card-header, html[data-theme="dark"] .card-header { background-color: var(--t-surface-2); border-bottom: 1px solid var(--t-border); font-weight: 600; color: var(--t-text); } html[data-theme="modern"] .card-footer, html[data-theme="dark"] .card-footer { background-color: var(--t-surface-2); border-top: 1px solid var(--t-border); } /* tables: quiet headers, hover rows, themed borders */ html[data-theme="modern"] .table, html[data-theme="dark"] .table { color: var(--t-text); border-color: var(--t-border); } html[data-theme="modern"] .table > :not(caption) > * > *, html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--t-border); background-color: transparent; box-shadow: none; /* bootstrap 5.1 striped/hover use inset box-shadow */ padding-top: .45rem; padding-bottom: .45rem; } html[data-theme="modern"] .table thead th, html[data-theme="dark"] .table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--t-muted); background-color: var(--t-surface-2); } html[data-theme="modern"] .table-hover > tbody > tr:hover > *, html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: var(--t-row-hover); color: var(--t-text); } /* list groups (learner video list, reports index) */ html[data-theme="modern"] .list-group-item, html[data-theme="dark"] .list-group-item { background-color: var(--t-surface); border-color: var(--t-border); color: var(--t-text); } html[data-theme="modern"] .list-group-item-action:hover, html[data-theme="dark"] .list-group-item-action:hover { background-color: var(--t-row-hover); color: var(--t-text); } /* buttons + badges: softer radii */ html[data-theme="modern"] .btn, html[data-theme="dark"] .btn { border-radius: .55rem; } html[data-theme="modern"] .btn-sm, html[data-theme="dark"] .btn-sm { border-radius: .45rem; } html[data-theme="modern"] .badge, html[data-theme="dark"] .badge { border-radius: 50rem; font-weight: 600; padding: .35em .7em; } /* forms */ html[data-theme="modern"] .form-control, html[data-theme="modern"] .form-select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { border-radius: .55rem; border-color: var(--t-border); } html[data-theme="modern"] .input-group-text, html[data-theme="dark"] .input-group-text { border-color: var(--t-border); background-color: var(--t-surface-2); } /* progress bars: themed track */ html[data-theme="modern"] .progress, html[data-theme="dark"] .progress { background-color: var(--t-surface-2); border-radius: 50rem; } /* alerts: rounded to match */ html[data-theme="modern"] .alert, html[data-theme="dark"] .alert { border-radius: .75rem; } /* content links pick up the accent (navbar/buttons/badges excluded) */ html[data-theme="modern"] main a:not(.btn):not(.badge), html[data-theme="dark"] main a:not(.btn):not(.badge) { color: var(--t-accent); text-decoration: none; } html[data-theme="modern"] main a:not(.btn):not(.badge):hover, html[data-theme="dark"] main a:not(.btn):not(.badge):hover { text-decoration: underline; } /* white panels (evidence pack, certificate) + generic borders follow the surface */ html[data-theme="modern"] .bg-white { background-color: var(--t-surface) !important; } html[data-theme="modern"] .border { border-color: var(--t-border) !important; } /* footer */ html[data-theme="modern"] .footer, html[data-theme="dark"] .footer { border-top: 1px solid var(--t-border) !important; color: var(--t-muted) !important; } /* ---- dark-only overrides (Bootstrap 5.1 has no native dark mode) ---------- */ html[data-theme="dark"] .text-muted { color: var(--t-muted) !important; } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background-color: var(--t-surface-2); color: var(--t-text); } html[data-theme="dark"] .form-control::placeholder { color: var(--t-muted); } html[data-theme="dark"] .form-select { /* bootstrap's caret is a dark inline SVG; swap for a light one */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a0b5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--t-surface-2); color: var(--t-text); border-color: var(--t-accent); box-shadow: 0 0 0 .2rem rgba(110, 168, 254, .2); } html[data-theme="dark"] .form-label { color: var(--t-text); } html[data-theme="dark"] .form-text { color: var(--t-muted); } html[data-theme="dark"] .form-check-input { background-color: var(--t-surface-2); border-color: var(--t-border); } html[data-theme="dark"] .form-check-input:checked { background-color: var(--t-accent); border-color: var(--t-accent); } html[data-theme="dark"] .dropdown-menu { background-color: var(--t-surface); border: 1px solid var(--t-border); box-shadow: var(--t-shadow-lift); } html[data-theme="dark"] .dropdown-item { color: var(--t-text); } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--t-nav-link-hover-bg); color: #fff; } html[data-theme="dark"] .dropdown-divider { border-color: var(--t-border); } /* brighter status colors for contrast on dark surfaces */ html[data-theme="dark"] .text-danger { color: #ff8090 !important; } html[data-theme="dark"] .text-success { color: #51d88a !important; } html[data-theme="dark"] .text-warning { color: #ffd75e !important; } html[data-theme="dark"] .alert-warning { background-color: rgba(255, 193, 7, .1); border-color: rgba(255, 193, 7, .28); color: #ffd75e; } html[data-theme="dark"] .alert-success { background-color: rgba(81, 216, 138, .1); border-color: rgba(81, 216, 138, .3); color: #7fe3a8; } html[data-theme="dark"] .alert-danger { background-color: rgba(255, 128, 144, .1); border-color: rgba(255, 128, 144, .3); color: #ff9daa; } html[data-theme="dark"] .alert-light { background-color: var(--t-surface-2); border-color: var(--t-border); color: var(--t-text); } html[data-theme="dark"] .alert .btn-close { filter: invert(1) grayscale(100%); } html[data-theme="dark"] .btn-outline-secondary { color: var(--t-muted); border-color: var(--t-border); } html[data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--t-surface-2); color: var(--t-text); } html[data-theme="dark"] .btn-outline-primary { color: var(--t-accent); border-color: var(--t-accent); } html[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--t-accent); color: var(--t-accent-contrast); } html[data-theme="dark"] .btn-outline-dark { color: var(--t-text); border-color: var(--t-border); } html[data-theme="dark"] .btn-outline-dark:hover { background-color: var(--t-surface-2); color: var(--t-text); } /* white panels + light badges on dark surfaces */ html[data-theme="dark"] .bg-white { background-color: var(--t-surface) !important; } html[data-theme="dark"] .border { border-color: var(--t-border) !important; } html[data-theme="dark"] .border-end, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom { border-color: var(--t-border) !important; } html[data-theme="dark"] .badge.bg-light { background-color: var(--t-surface-2) !important; color: var(--t-text) !important; } html[data-theme="dark"] .badge.bg-info { color: #0e1320 !important; } /* bootstrap contextual table cells (completion matrix, evidence pack header) */ html[data-theme="dark"] .table-light { --bs-table-bg: var(--t-surface-2); --bs-table-color: var(--t-muted); --bs-table-border-color: var(--t-border); color: var(--t-muted); border-color: var(--t-border); } html[data-theme="dark"] .table-success { --bs-table-bg: rgba(81, 216, 138, .16); --bs-table-color: #7fe3a8; color: #7fe3a8; } html[data-theme="dark"] .table-info { --bs-table-bg: rgba(110, 168, 254, .16); --bs-table-color: #9ec5fe; color: #9ec5fe; } html[data-theme="dark"] .table-warning { --bs-table-bg: rgba(255, 193, 7, .16); --bs-table-color: #ffd75e; color: #ffd75e; } html[data-theme="dark"] .table-danger { --bs-table-bg: rgba(255, 128, 144, .16); --bs-table-color: #ff9daa; color: #ff9daa; } /* ---- print: always print light, whatever the screen theme ----------------- */ @media print { html[data-theme="dark"], html[data-theme="modern"] { --t-bg: #ffffff; --t-surface: #ffffff; --t-surface-2: #f7f9fc; --t-text: #000000; --t-muted: #555555; --t-border: #cccccc; color-scheme: light; } html[data-theme="dark"] body, html[data-theme="modern"] body, html[data-theme="dark"] body.bg-light, html[data-theme="modern"] body.bg-light { background-color: #fff !important; color: #000 !important; } }