/* ============================================================================ K.AIMS — navy / sea theme Single source of truth for brand colours. Built on Bootstrap 5.3 colour modes: light/dark switch via the `data-bs-theme` attribute on (set by the no-flash script in _Layout and toggled by theme-toggle.js). To extend: edit the brand tokens below, or add new `--kaims-*` tokens and map them onto Bootstrap's CSS variables. Components inherit automatically — avoid one-off colours in views; reference these tokens instead. ============================================================================ */ :root { /* Brand palette — mode-independent reference tokens. */ --kaims-navy-900: #081722; /* deepest hull navy */ --kaims-navy-800: #0c2334; --kaims-navy-700: #123047; --kaims-navy-600: #18415f; --kaims-navy-500: #1f5179; /* primary (light mode) */ --kaims-sea-500: #2596be; /* sea / harbour accent */ --kaims-sea-400: #46a7cd; --kaims-sea-300: #6cbcdb; /* Surface tokens (mode-independent) — radius + elevation. */ --kaims-radius-sm: .375rem; --kaims-radius-md: .5rem; --kaims-shadow-sm: 0 .125rem .375rem rgba(8, 23, 34, .10); --kaims-shadow-md: 0 .5rem 1rem rgba(8, 23, 34, .16); } /* ---- Light mode (default) ------------------------------------------------ */ :root, [data-bs-theme="light"] { --bs-primary: var(--kaims-navy-500); --bs-primary-rgb: 31, 81, 121; --bs-link-color: var(--kaims-navy-500); --bs-link-color-rgb: 31, 81, 121; --bs-link-hover-color: var(--kaims-sea-500); --bs-link-hover-color-rgb: 37, 150, 190; --bs-body-bg: #f3f6f9; --bs-body-color: #15212b; --bs-secondary-bg: #e7eef4; --bs-border-color: #d3dee7; --kaims-primary-hover: var(--kaims-navy-700); } /* ---- Dark mode ----------------------------------------------------------- */ [data-bs-theme="dark"] { --bs-primary: var(--kaims-sea-400); --bs-primary-rgb: 70, 167, 205; --bs-link-color: var(--kaims-sea-300); --bs-link-color-rgb: 108, 188, 219; --bs-link-hover-color: #9bd2e8; --bs-link-hover-color-rgb: 155, 210, 232; --bs-body-bg: #0a1825; --bs-body-color: #d9e4ee; --bs-secondary-bg: #112637; --bs-tertiary-bg: #0e2031; --bs-border-color: #1b3346; --bs-emphasis-color: #ffffff; --kaims-primary-hover: var(--kaims-sea-300); } /* Map .btn-primary onto the brand colour via Bootstrap's button CSS vars (works without recompiling Bootstrap's SASS). */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--kaims-primary-hover); --bs-btn-hover-border-color: var(--kaims-primary-hover); --bs-btn-active-bg: var(--kaims-primary-hover); --bs-btn-active-border-color: var(--kaims-primary-hover); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); } /* Branded navbar — intentionally navy in BOTH themes (a deliberate brand treatment). The element carries data-bs-theme="dark" so its brand/links/toggler render light. */ .kaims-navbar { min-height: 3.5rem; padding-block: .55rem; background-color: var(--kaims-navy-800); border-bottom: 1px solid var(--kaims-navy-900); box-shadow: var(--kaims-shadow-sm); } [data-bs-theme="dark"] .kaims-navbar { background-color: var(--kaims-navy-900); } .kaims-navbar .navbar-brand { font-weight: 700; letter-spacing: .3px; } .kaims-navbar .nav-link { transition: color .15s ease, box-shadow .15s ease; } /* Current-page indicator — a subtle sea underline + slightly heavier weight. */ .kaims-navbar .nav-link.active { font-weight: 600; box-shadow: inset 0 -2px 0 var(--kaims-sea-400); } /* Sticky form action bar (shared _FormButtons) — keeps Save/Cancel reachable on long forms without scrolling to the very end. `sticky` (not `fixed`) means short forms with no scroll keep the buttons in normal flow. The body bg + top border hide content scrolling beneath. */ .form-actions { position: sticky; bottom: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .75rem 0; background-color: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); } /* Engine library tiles — a display image with the engine name overlaid; the default placeholder (engine-default.svg) shows when an engine has no image. */ .engine-tile { display: block; position: relative; aspect-ratio: 4 / 3; border-radius: .5rem; overflow: hidden; border: 1px solid var(--bs-border-color); background-color: var(--bs-secondary-bg); text-decoration: none; transition: box-shadow .15s ease; } .engine-tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .engine-tile-name { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .625rem; color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.2; background: linear-gradient(to top, rgba(8, 23, 34, .85), rgba(8, 23, 34, 0)); } .engine-tile:hover, .engine-tile:focus { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .15); } /* Engine details — the larger display image (same default fallback). */ .engine-detail-image { aspect-ratio: 4 / 3; background-color: var(--bs-secondary-bg); border-bottom: 1px solid var(--bs-border-color); } .engine-detail-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Navbar user avatar — a brand-coloured initials circle (no icon font in the project). */ .avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; /* Navy fill (white initials ~7:1, AA) with a sea ring so it still reads on the navy navbar. */ background-color: var(--kaims-navy-500); border: 1px solid var(--kaims-sea-400); color: #fff; font-size: .8rem; font-weight: 600; line-height: 1; text-transform: uppercase; user-select: none; } .kaims-navbar .nav-link:hover .avatar, .kaims-navbar .nav-link:focus .avatar { filter: brightness(1.1); } /* Footer — centered, subtle, brand-aware. Sits on the secondary surface so it reads as a quiet band beneath the page content in both light and dark modes. */ .footer { background-color: var(--bs-secondary-bg); font-size: .8125rem; } .footer .footer-brand { font-weight: 600; color: var(--bs-body-color); white-space: nowrap; } .footer .footer-sep { margin-inline: .5rem; opacity: .45; } /* Social icon links (inline SVG) — muted, brand on hover; used in the footer + Contact page. */ .social-links { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; } .social-links a { display: inline-flex; color: var(--bs-secondary-color); line-height: 0; } .social-links a:hover, .social-links a:focus { color: var(--bs-link-hover-color); } /* Theme toggle: show the icon for the action it performs (moon while in light mode → click to go dark, and vice-versa). */ html[data-bs-theme="light"] .theme-icon-light { display: none; } html[data-bs-theme="dark"] .theme-icon-dark { display: none; } /* Reusable server-searched dropdown (remote-select) — theme-aware. */ .remote-select { position: relative; } .remote-select-menu { position: absolute; z-index: 1000; left: 0; right: 0; display: none; max-height: 16rem; overflow-y: auto; margin-top: .125rem; background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--kaims-radius-sm); box-shadow: var(--kaims-shadow-md); } .remote-select-menu.show { display: block; } .remote-select-item { display: block; width: 100%; text-align: left; padding: .375rem .75rem; border: 0; background: none; color: var(--bs-body-color); } .remote-select-item:hover, .remote-select-item:focus, .remote-select-item.active { background-color: var(--bs-secondary-bg); } .remote-select-empty { padding: .375rem .75rem; color: var(--bs-secondary-color); } /* Caret so the picker reads as a dropdown (it opens on focus). The menu is absolutely positioned, so it doesn't affect .remote-select height — the caret stays centred on the input. */ .remote-select::after { content: "\25BE"; /* ▾ */ position: absolute; right: .6rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--bs-secondary-color); font-size: .8em; } .remote-select .remote-select-input { padding-right: 1.6rem; } .remote-select .remote-select-input:disabled { background-color: var(--bs-secondary-bg); cursor: not-allowed; } /* Support ticket conversation thread (SupportRequests/Details). */ .chat { display: flex; flex-direction: column; gap: .75rem; } .chat-row { display: flex; gap: .5rem; max-width: 85%; align-items: flex-start; } .chat-row.staff { align-self: flex-start; } .chat-row.client { align-self: flex-end; flex-direction: row-reverse; text-align: right; } .chat-bubble { padding: .4rem .7rem; border-radius: .75rem; background-color: var(--bs-secondary-bg); } .chat-row.client .chat-bubble { /* navy (white text ~7:1, AA) rather than the lighter sea which failed contrast. */ background-color: var(--kaims-navy-500); color: #fff; } .chat-meta { font-size: .72rem; opacity: .85; margin-bottom: .15rem; } .chat-row.client .chat-meta { color: rgba(255, 255, 255, .92); } .chat-bubble > div:last-child { white-space: pre-wrap; }