/* * NHRL Portal chrome — Bootstrap 5.3 light/dark sidebar, topbar + footer. * data-bs-theme lives on (global); the toggle also syncs it onto * #site-sidebar, #site-topbar, #site-footer, and .portal-page-themed. * Themed pages (.portal-page-themed): dark chrome at 20% over matching dark page bg. */ :root { --portal-nav-height: var(--portal-footer-height, 44px); --portal-chrome-opacity-dark: 0.2; --portal-chrome-opacity-dark-fallback: 0.94; --portal-chrome-opacity-light: 0.92; --portal-chrome-border-dark: rgba(255, 255, 255, 0.08); --portal-chrome-border-light: rgba(41, 28, 94, 0.1); --portal-accent: #cf23ca; --portal-accent-teal: #00dad8; --portal-nhrl-purple: rgb(41, 28, 94); --portal-nhrl-purple-deep: rgb(33, 22, 75); /* ── Design language (2026-07) ───────────────────────────────────── * Type: a display serif for page titles, a mono for micro-labels/data, * system sans for everything else. System stacks only — swapping in * self-hosted webfonts later means changing these three values. */ --portal-font-display: "Joyride STD", "Arial Black", sans-serif; --portal-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --portal-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Type scale + the uppercase-mono label treatment */ --portal-text-xs: 0.72rem; --portal-text-sm: 0.85rem; --portal-text-md: 1rem; --portal-text-lg: 1.35rem; --portal-text-xl: 1.5rem; /* Joyride runs wide — 1.5rem reads like a serif's 1.9 */ --portal-label-tracking: 0.12em; /* Aurora — atmospheric glow layers (NHRL magenta/purple/teal). * Consumed by the chrome + kit; decorative only. */ --portal-aurora-magenta: rgba(207, 35, 202, 0.14); --portal-aurora-violet: rgba(94, 62, 197, 0.18); --portal-aurora-teal: rgba(0, 218, 216, 0.07); /* Sharp corners everywhere. Bootstrap 5.3 routes every component radius * (btn, card, modal, dropdown, nav-pills, forms) through these tokens, * so this is the whole switch — and the whole revert. --bs-border-radius-pill * is left alone: genuinely round things (switches, avatars) stay round. */ --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; --bs-border-radius-xl: 0; --bs-border-radius-xxl: 0; } /* ── Unified dark chrome surface ─────────────────────────────────────── */ body:has(.portal-page-themed) { --portal-chrome-opacity: var(--portal-chrome-opacity-dark); --portal-chrome-divider: var(--portal-chrome-border-dark); } body:not(:has(.portal-page-themed)) { --portal-chrome-opacity: var(--portal-chrome-opacity-dark-fallback); --portal-chrome-divider: var(--portal-chrome-border-dark); } #site-sidebar[data-bs-theme="dark"], #site-topbar[data-bs-theme="dark"], #site-footer[data-bs-theme="dark"] { background-color: rgba(41, 28, 94, var(--portal-chrome-opacity)); background-image: linear-gradient( 180deg, rgba(41, 28, 94, var(--portal-chrome-opacity)) 0%, rgba(33, 22, 75, var(--portal-chrome-opacity)) 100% ); backdrop-filter: blur(14px) saturate(130%); -webkit-backdrop-filter: blur(14px) saturate(130%); } #site-sidebar[data-bs-theme="dark"] { border-right: 1px solid var(--portal-chrome-border-dark); /* Aurora: magenta bleeding in from the top, teal whisper at the foot, * layered over the shared chrome gradient. Decorative only. */ background-image: radial-gradient(ellipse 20rem 14rem at 100% 0%, var(--portal-aurora-magenta), transparent 65%), radial-gradient(ellipse 16rem 12rem at 0% 100%, var(--portal-aurora-teal), transparent 60%), linear-gradient( 180deg, rgba(41, 28, 94, var(--portal-chrome-opacity)) 0%, rgba(33, 22, 75, var(--portal-chrome-opacity)) 100% ); } #site-topbar[data-bs-theme="dark"] { border-bottom: 1px solid var(--portal-chrome-border-dark); color: rgba(244, 244, 244, 0.88); } #site-footer[data-bs-theme="dark"] { border-top: 1px solid var(--portal-chrome-border-dark); } /* ── Unified light chrome surface ────────────────────────────────────── */ #site-sidebar[data-bs-theme="light"], #site-topbar[data-bs-theme="light"], #site-footer[data-bs-theme="light"] { background-color: rgba(255, 255, 255, var(--portal-chrome-opacity-light)); background-image: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); --portal-chrome-divider: var(--portal-chrome-border-light); } #site-sidebar[data-bs-theme="light"] { border-right: 1px solid var(--portal-chrome-border-light); } #site-topbar[data-bs-theme="light"] { border-bottom: 1px solid var(--portal-chrome-border-light); color: #495057; } #site-footer[data-bs-theme="light"] { border-top: 1px solid var(--portal-chrome-border-light); } /* ── Dark chrome — shared text & controls ─────────────────────────── */ #site-sidebar[data-bs-theme="dark"] .portal-sidebar-brand:hover, #site-sidebar[data-bs-theme="dark"] .portal-sidebar-brand:focus { color: var(--portal-accent-teal); } #site-sidebar[data-bs-theme="dark"] .portal-sidebar-brand-text { color: #f4f4f4; } #site-sidebar[data-bs-theme="dark"] .portal-sidebar-link { color: rgba(244, 244, 244, 0.78); } #site-sidebar[data-bs-theme="dark"] .portal-sidebar-link:hover, #site-sidebar[data-bs-theme="dark"] .portal-sidebar-link:focus { color: #fff; background-color: rgba(255, 255, 255, 0.08); } #site-sidebar[data-bs-theme="dark"] .portal-sidebar-group-label { color: rgba(244, 244, 244, 0.45); } #site-topbar[data-bs-theme="dark"] .portal-topbar-stat, #site-topbar[data-bs-theme="dark"] .portal-topbar-clock { color: rgba(244, 244, 244, 0.82); } #site-topbar[data-bs-theme="dark"] .portal-sidebar-toggle { color: rgba(244, 244, 244, 0.85); } #site-sidebar[data-bs-theme="dark"] .dropdown-menu { background: linear-gradient(180deg, rgb(45, 32, 100) 0%, rgb(33, 22, 75) 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } #site-sidebar[data-bs-theme="dark"] .dropdown-item { color: rgba(244, 244, 244, 0.85); } #site-sidebar[data-bs-theme="dark"] .dropdown-item:hover, #site-sidebar[data-bs-theme="dark"] .dropdown-item:focus { color: #fff; background-color: rgba(255, 255, 255, 0.08); } #site-sidebar[data-bs-theme="dark"] .dropdown-item:active { color: #fff; background-color: rgba(255, 255, 255, 0.12); } #site-sidebar[data-bs-theme="dark"] .dropdown-divider { border-color: rgba(255, 255, 255, 0.1); } #site-sidebar[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); opacity: 0.65; } #site-sidebar[data-bs-theme="dark"] .portal-sidebar-user-btn { color: rgba(244, 244, 244, 0.78); } #site-sidebar[data-bs-theme="dark"] .portal-sidebar-user-btn:hover, #site-sidebar[data-bs-theme="dark"] .portal-sidebar-user-btn:focus, #site-sidebar[data-bs-theme="dark"] .portal-sidebar-user-btn.show { color: #fff; } #site-sidebar[data-bs-theme="dark"] .portal-user-dropdown { background: linear-gradient(180deg, rgb(45, 32, 100) 0%, rgb(33, 22, 75) 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); } #site-sidebar[data-bs-theme="dark"] .portal-user-dropdown-header { color: #f4f4f4; } /* ── Light chrome — component colors ─────────────────────────────────── */ #site-sidebar[data-bs-theme="light"] .portal-sidebar-brand-text { color: var(--portal-nhrl-purple); } #site-sidebar[data-bs-theme="light"] .portal-sidebar-brand:hover, #site-sidebar[data-bs-theme="light"] .portal-sidebar-brand:focus { color: var(--portal-accent); } #site-sidebar[data-bs-theme="light"] .nhrl-logo-svg path[fill="white"] { fill: var(--portal-nhrl-purple); } #site-topbar[data-bs-theme="light"] .nhrl-logo-svg path[fill="white"] { fill: var(--portal-nhrl-purple); } #site-sidebar[data-bs-theme="light"] .portal-sidebar-link { color: #495057; } #site-sidebar[data-bs-theme="light"] .portal-sidebar-link:hover, #site-sidebar[data-bs-theme="light"] .portal-sidebar-link:focus { color: var(--portal-nhrl-purple); background-color: rgba(41, 28, 94, 0.06); } #site-sidebar[data-bs-theme="light"] .portal-sidebar-group-label { color: #6c757d; } #site-topbar[data-bs-theme="light"] .portal-stat-bar { background: rgba(41, 28, 94, 0.1); } #site-sidebar[data-bs-theme="light"] .dropdown-menu { border: 1px solid #e9ecef; box-shadow: 0 12px 40px rgba(41, 28, 94, 0.12); } #site-sidebar[data-bs-theme="light"] .dropdown-item { color: #495057; } #site-sidebar[data-bs-theme="light"] .dropdown-item:hover, #site-sidebar[data-bs-theme="light"] .dropdown-item:focus { color: var(--portal-nhrl-purple); background-color: rgba(41, 28, 94, 0.06); } #site-sidebar[data-bs-theme="light"] .dropdown-item:active { color: var(--portal-nhrl-purple); background-color: rgba(41, 28, 94, 0.1); } #site-sidebar[data-bs-theme="light"] .portal-sidebar-user-btn { color: #495057; } #site-sidebar[data-bs-theme="light"] .portal-sidebar-user-btn:hover, #site-sidebar[data-bs-theme="light"] .portal-sidebar-user-btn:focus, #site-sidebar[data-bs-theme="light"] .portal-sidebar-user-btn.show { color: var(--portal-nhrl-purple); } #site-sidebar[data-bs-theme="light"] .portal-user-dropdown { border: 1px solid #e9ecef; box-shadow: 0 12px 40px rgba(41, 28, 94, 0.12); } /* ── Shared chrome components ──────────────────────────────────────── */ #site-footer.footer, #site-footer.portal-chrome-footer { right: 0; left: 0; box-sizing: border-box; /* footer.twig is fixed-bottom, so on an installed iOS app the home indicator would otherwise sit on top of it. Grows downward and pads its content clear. Fallbacks because this file also loads without navigation.css (check-in.twig), where it degrades to the original flat 44px bar. */ height: var(--portal-chrome-offset-bottom, var(--portal-footer-height, 44px)); min-height: var(--portal-chrome-offset-bottom, var(--portal-footer-height, 44px)); max-height: var(--portal-chrome-offset-bottom, var(--portal-footer-height, 44px)); padding: 0 0 var(--portal-safe-bottom, 0px) 0; z-index: 1030; } #site-footer .container-fluid { height: 100%; padding-left: calc(0.75rem + var(--portal-safe-left, 0px)); padding-right: calc(0.75rem + var(--portal-safe-right, 0px)); } .portal-user-name { max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; font-weight: 500; line-height: 1.2; } .portal-user-dropdown { min-width: 15rem; padding: 0.5rem; margin-top: 0.5rem !important; } .portal-user-dropdown-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; } .portal-user-dropdown-header .sparky-avatar { width: 2.25rem; height: 2.25rem; padding: 3px; } .portal-user-dropdown .dropdown-item { border-radius: calc(var(--bs-border-radius) - 2px); font-size: 0.875rem; padding: 0.5rem 0.75rem; } .portal-user-dropdown .dropdown-item i { width: 1.125rem; text-align: center; margin-right: 0.5rem; opacity: 0.75; } /* ── Footer layout + theme toggle ─────────────────────────────────── */ .footer-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 0.75rem; height: 100%; } /* Right cluster: Follow menu + Sparky. */ .footer-right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; flex-shrink: 0; } /* ── Floor strip (Mission Control summary) ───────────────────────────── */ .footer-floor { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 1rem; min-width: 0; font-size: 0.6875rem; overflow: hidden; white-space: nowrap; } .footer-floor-group { display: inline-flex; align-items: center; gap: 0.35rem; } .footer-floor-label { text-transform: uppercase; letter-spacing: var(--portal-label-tracking); opacity: 0.65; } /* Counts are data — mono + tabular so they don't jitter as they tick. */ .footer-floor-value { font-family: var(--portal-font-mono); font-variant-numeric: tabular-nums; font-weight: 600; } .footer-floor-dots { display: inline-flex; align-items: center; gap: 0.25rem; } .footer-floor-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--portal-c-text-muted); opacity: 0.3; } /* A cage with a fight in it is the one thing worth colour in the chrome. */ .footer-floor-dot--active { background: var(--portal-c-badge-success-color, #45d381); opacity: 1; } .footer-floor-dot--queued { background: var(--portal-c-badge-warning-color, #f5b342); opacity: 0.9; } .footer-floor-alert { color: var(--portal-c-badge-danger-color, #ff7d7d); } .footer-floor-quiet { opacity: 0.5; font-style: italic; } /* ── Follow dropup ───────────────────────────────────────────────────── */ .footer-social { display: inline-flex; align-items: center; flex-shrink: 0; } .footer-social-toggle { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.5rem; background: none; border: 1px solid transparent; border-radius: 0.375rem; font-size: 0.6875rem; line-height: 1; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .footer-social-toggle-label { text-transform: uppercase; letter-spacing: var(--portal-label-tracking); } .footer-social-toggle:focus-visible { outline: 2px solid var(--portal-accent-teal); outline-offset: 2px; } .footer-social-menu { min-width: 11rem; font-size: 0.8125rem; } .footer-social-menu .dropdown-item { display: flex; align-items: center; gap: 0.5rem; } #site-footer[data-bs-theme="dark"] .footer-social-toggle, #site-footer[data-bs-theme="dark"] .footer-floor { color: rgba(244, 244, 244, 0.78); } #site-footer[data-bs-theme="dark"] .footer-social-toggle:hover, #site-footer[data-bs-theme="dark"] .footer-social-toggle[aria-expanded="true"] { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); } #site-footer[data-bs-theme="light"] .footer-social-toggle, #site-footer[data-bs-theme="light"] .footer-floor { color: #495057; } #site-footer[data-bs-theme="light"] .footer-social-toggle:hover, #site-footer[data-bs-theme="light"] .footer-social-toggle[aria-expanded="true"] { color: var(--portal-nhrl-purple); background: rgba(41, 28, 94, 0.06); border-color: rgba(41, 28, 94, 0.12); } .portal-footer-theme-btn { grid-column: 1; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid transparent; border-radius: 0.375rem; background: transparent; font-size: 0.875rem; line-height: 1; cursor: pointer; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .portal-footer-theme-btn:focus-visible { outline: 2px solid var(--portal-accent-teal); outline-offset: 2px; } #site-footer[data-bs-theme="dark"] .portal-footer-theme-btn { color: rgba(244, 244, 244, 0.85); } #site-footer[data-bs-theme="dark"] .portal-footer-theme-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); } #site-footer[data-bs-theme="light"] .portal-footer-theme-btn { color: #495057; } #site-footer[data-bs-theme="light"] .portal-footer-theme-btn:hover { color: var(--portal-nhrl-purple); background: rgba(41, 28, 94, 0.06); border-color: rgba(41, 28, 94, 0.12); } .portal-theme-tooltip .tooltip-inner { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.4rem 0.65rem; } @media (max-width: 767.98px) { .footer-inner { column-gap: 0.5rem; } /* Phone footer: shed the words, keep the signals. The Follow icon still opens the same menu, and the cage dots still read at a glance without their label. */ .footer-social-toggle-label, .footer-floor-label { display: none; } .footer-floor { gap: 0.6rem; } } #site-sidebar[data-bs-theme="dark"], #site-topbar[data-bs-theme="dark"], #site-footer[data-bs-theme="dark"], .portal-page-themed[data-bs-theme="dark"] { color-scheme: dark; } #site-sidebar[data-bs-theme="light"], #site-topbar[data-bs-theme="light"], #site-footer[data-bs-theme="light"], .portal-page-themed[data-bs-theme="light"] { color-scheme: light; }