/* ═══════════════════════════════════════════════════════════════ theme.css — Central theme configuration for BrightSentinel Design system: • Uses MudBlazor CSS custom properties (--mud-palette-*) for palette values so that MudThemeProvider dark/light switching automatically propagates to custom components. • Defines BrightSentinel-specific variables (--bs-*) for values that don't map to MudBlazor palette slots. • Typography overrides ensure Rethink Sans is used everywhere. ═══════════════════════════════════════════════════════════════ */ /* ── Brand Variables (constant across themes) ────────────── */ /* NOTE: Rethink Sans is loaded via in App.razor — no @import needed here. */ :root { --bs-font-family: 'Rethink Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Primary colors */ --bs-color-cream: #f1f0ea; --bs-color-orange: #e35205; --bs-color-black: #101820; /* Secondary colors */ --bs-color-beige: #DBC8B6; --bs-color-dark-gray: #4E4B48; --bs-border-radius: 20px; --bs-border-radius-sm: 10px; --bs-transition-speed: 0.3s; --bs-max-width: 1440px; } /* ── Theme-specific overrides ────────────────────────────── */ /* Applied to by the inline anti-flicker script in App.razor before Blazor renders, so the page background is correct on first paint with no flash. */ html.theme-dark { background-color: #101820; color-scheme: dark; } html.theme-light { background-color: #f1f0ea; color-scheme: light; } /* Light theme custom properties */ .theme-light { --bs-page-bg: var(--bs-color-cream); --bs-text-primary: var(--bs-color-black); --bs-text-secondary: var(--bs-color-dark-gray); --bs-surface: #ffffff; --bs-surface-hover: var(--bs-color-cream); --bs-card-bg: #F8F8F4; --bs-card-border: rgba(16, 24, 32, 0.08); --bs-divider: rgba(16, 24, 32, 0.12); } /* Dark theme custom properties */ .theme-dark { --bs-page-bg: var(--bs-color-black); --bs-text-primary: var(--bs-color-cream); --bs-text-secondary: var(--bs-color-beige); --bs-surface: #1a2330; --bs-surface-hover: #243040; --bs-card-bg: #1a2330; --bs-card-border: rgba(241, 240, 234, 0.08); --bs-divider: rgba(241, 240, 234, 0.12); } /* ── Base Reset & Typography ─────────────────────────────── */ /* Border-box globally: width/height include padding + border. Without this, every element with width:100% plus padding overflows its parent. */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--bs-font-family); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Override all MudBlazor typography to use Rethink Sans */ .mud-typography { font-family: var(--bs-font-family) !important; } /* ── Accessibility Utilities ─────────────────────────────── */ /* Visually hidden but accessible to screen readers and search engines */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link — visible only on :focus */ .bs-skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 8px 16px; background: var(--bs-color-orange); color: #fff; font-weight: 600; font-size: 0.875rem; border-radius: var(--bs-border-radius-sm); text-decoration: none; transition: top 0.2s ease; } .bs-skip-link:focus { top: 12px; } /* Global focus-visible ring for keyboard navigation */ :focus-visible { outline: 2px solid var(--bs-color-orange); outline-offset: 2px; } /* Accordion button reset — removes default button chrome */ .bs-solutions-accordion__item-header { all: unset; display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; box-sizing: border-box; } .bs-solutions-accordion__item-heading { margin: 0; font-size: inherit; font-weight: inherit; } /* ── MudBlazor AppBar Overrides ──────────────────────────── */ .bs-appbar { background-color: var(--bs-page-bg) !important; transition: background-color var(--bs-transition-speed) ease; } .bs-appbar .mud-toolbar { min-height: 77px; max-width: var(--bs-max-width); margin: 0 auto; width: 100%; padding: 0 32px; } /* ── Logo ─────────────────────────────────────────────────── */ .bs-logo { display: flex; align-items: center; text-decoration: none; color: inherit; } .bs-logo-img { height: 34px; width: auto; } .bs-logo-text { font-family: var(--bs-font-family); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.15em; color: inherit; } /* ── Desktop Navigation ──────────────────────────────────── */ .bs-nav-desktop { display: flex; align-items: center; gap: 8px; margin-right: 8px; /* MudMenu renders as a MudButton; override MudBlazor's default uppercase */ --mud-typography-button-text-transform: none; } .bs-nav-link { font-family: var(--bs-font-family); /* font-size: 0.9rem;*/ font-size: 1.1rem; font-weight: 500; color: inherit; text-decoration: none; padding: 8px 16px; border-radius: var(--bs-border-radius-sm); transition: background-color var(--bs-transition-speed) ease, opacity var(--bs-transition-speed) ease; opacity: 0.85; cursor: pointer; } .bs-nav-link:hover, .bs-nav-link:focus-visible { opacity: 1; background-color: rgba(128, 128, 128, 0.1); } .bs-nav-link.active { opacity: 1; background-color: rgba(227, 82, 5, 0.16); } /* ── Mobile Nav ──────────────────────────────────────────── */ /* ── Main Content ────────────────────────────────────────── */ .bs-main-content { /* Remove default MudBlazor main content top padding */ padding-top: 0 !important; } /* ── Section Divider ─────────────────────────────────────── */ .bs-section-divider { border: none; height: 4px; background: transparent; background-image: radial-gradient(circle, var(--bs-divider) 1.5px, transparent 1.6px); background-size: 10px 4px; background-repeat: repeat-x; background-position: left center; margin: 0 0 40px 0; width: 100%; } /* ── Drawer Utilities ───────────────────────────────────── */ /* Nav links inside the drawer: hidden on desktop (already in appbar), shown on mobile via the 960px breakpoint below */ .bs-drawer-mobile-only { display: none; } /* Flex row for the drawer header so the close button aligns to the right */ .bs-drawer-header { display: flex; align-items: center; width: 100%; } /* Increase font size in drawer nav links */ .bs-mobile-drawer .mud-nav-link { font-size: 18px; font-weight: 500; } .bs-mobile-drawer .mud-nav-link .mud-nav-link-text { font-size: 18px; } /* ── Responsive Breakpoints ──────────────────────────────── */ @media (max-width: 960px) { /* Hide desktop nav on tablet and below */ .bs-nav-desktop { display: none !important; } /* Show nav links inside the drawer on mobile only */ .bs-drawer-mobile-only { display: block; } } /* ── Accessibility: Reduced Motion ───────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Focus Styles ────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--bs-color-orange); outline-offset: 2px; } /* Suppress focus ring on elements that are only programmatically focusable (e.g. headings focused by Blazor enhanced navigation for screen-reader announcements). They aren't reachable via Tab so the ring is distracting. */ [tabindex="-1"]:focus-visible { outline: none; }