/* * CffVaultManager base theme — Bootstrap 5 variable overrides. * Palette sampled directly from CffVaultmanager.svg (shield gradient + keyhole + wordmark), * not a generic guess: brand-navy/brand-teal come from the shield's two gradient ends, and * brand-cyan from the keyhole highlight. Loaded after lib/bootstrap/css/bootstrap.min.css. * * Signature: brand-cyan (the keyhole color) is reserved for the "unlock" moment only — the * login/MFA submit buttons and focus rings — everything else stays navy/teal/neutral so that * one accent keeps its meaning instead of being decoration. */ :root, [data-bs-theme="light"] { --brand-navy: #0e4a78; --brand-navy-rgb: 14, 74, 120; --brand-teal: #157a93; --brand-teal-rgb: 21, 122, 147; --brand-cyan: #00d9ec; --brand-cyan-rgb: 0, 217, 236; --brand-ink: #12202b; --brand-bg: #f4f7f8; --brand-surface: #ffffff; /* Same value as --brand-navy/--brand-teal in light mode — these only diverge in dark mode, where the raw brand hues are too dark to use as *text*/link color on a dark background (see the dark block below). Kept as separate variables so callers don't need a per-theme branch. */ --brand-navy-contrast: var(--brand-navy); --brand-teal-contrast: var(--brand-teal); --bs-font-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-ink); --bs-primary: var(--brand-navy); --bs-primary-rgb: var(--brand-navy-rgb); --bs-primary-text-emphasis: var(--brand-navy); --bs-primary-bg-subtle: #dbe9f2; --bs-primary-border-subtle: #b3d0e2; --bs-secondary: var(--brand-teal); --bs-secondary-rgb: var(--brand-teal-rgb); --bs-secondary-text-emphasis: var(--brand-teal); --bs-secondary-bg-subtle: #dcedf1; --bs-secondary-border-subtle: #b7d8e0; /* "info" carries the keyhole accent — the one reserved unlock color, used via .btn-info etc. */ --bs-info: var(--brand-cyan); --bs-info-rgb: var(--brand-cyan-rgb); --bs-info-text-emphasis: #006b78; --bs-info-bg-subtle: #cff8fc; --bs-info-border-subtle: #7ceaf3; --bs-link-color: var(--brand-teal); --bs-link-color-rgb: var(--brand-teal-rgb); --bs-link-hover-color: var(--brand-navy); --bs-link-hover-color-rgb: var(--brand-navy-rgb); --bs-border-radius: 0.5rem; --bs-border-radius-sm: 0.375rem; --bs-border-radius-lg: 0.75rem; } /* * Dark theme — the same brand hues (navy shield, teal, cyan keyhole) applied to a dark canvas * instead of a re-hued palette, so the logo and the reserved "unlock" cyan accent stay recognizable * in both modes. Only the tokens the light block above actually redefines need a dark counterpart * here: every other Bootstrap variable (--bs-secondary-color, --bs-border-color, --bs-tertiary-bg, * form validation colors, etc.) already ships its own [data-bs-theme=dark] value in * bootstrap.min.css and needs no help. Declared after the `:root, [data-bs-theme="light"]` block on * purpose: `:root` always matches (it's what makes that block double as a no-JS/no-attribute * fallback), so on equal selector specificity the block that comes *later* in the file wins the * cascade on `` — this one, not `:root` silently winning again. */ [data-bs-theme="dark"] { --brand-bg: #0b141c; --brand-ink: #e7eef3; --brand-surface: #131f29; /* Lighter siblings of --brand-navy/--brand-teal, used only where those are too dark to read as text/links on this background — the navbar, .btn-info and .btn-primary keep the literal brand-navy/brand-teal/brand-cyan values in both themes, since those are always painted as a filled background (white text on top), not floated on the page background directly. */ --brand-navy-contrast: #7fb3e6; --brand-teal-contrast: #4fc7dd; --bs-body-bg: var(--brand-bg); --bs-body-color: var(--brand-ink); --bs-primary-bg-subtle: #112a3e; --bs-primary-border-subtle: #1d4567; --bs-primary-text-emphasis: var(--brand-navy-contrast); --bs-secondary-bg-subtle: #0e2a30; --bs-secondary-border-subtle: #1c4951; --bs-secondary-text-emphasis: var(--brand-teal-contrast); --bs-info-text-emphasis: #83f1fa; --bs-info-bg-subtle: #062f35; --bs-info-border-subtle: #0a454d; --bs-link-color: var(--brand-teal-contrast); --bs-link-color-rgb: 79, 199, 221; --bs-link-hover-color: var(--brand-navy-contrast); --bs-link-hover-color-rgb: 127, 179, 230; } /* The watermark's navy/teal tones need a lift to stay visible against a near-black background — at the light theme's 0.05 opacity they'd all but disappear here. */ [data-bs-theme="dark"] body::before { opacity: 0.09; filter: saturate(1.3) brightness(1.7); } /* .btn-info's default Bootstrap text color is dark-on-cyan already (good contrast); just make sure the unlock button reads as the primary action visually (bold weight) without becoming a second "primary" color used everywhere. */ .btn-info { font-weight: 600; color: var(--brand-ink); } /* .btn-primary and .form-check-input:checked ship with Bootstrap's own blue baked in at Sass-compile time — unlike .bg-primary/.border-primary/etc, they're not wired to the --bs-primary custom property above, so overriding that variable alone silently does nothing for them. Pin them to the brand navy explicitly instead (same navy in both themes: see the dark block's comment above for why). */ .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy); --bs-btn-hover-bg: #0c3f65; --bs-btn-hover-border-color: #0c3f65; --bs-btn-active-bg: #0a3454; --bs-btn-active-border-color: #0a3454; --bs-btn-disabled-bg: var(--brand-navy); --bs-btn-disabled-border-color: var(--brand-navy); } .form-check-input:checked { background-color: var(--brand-navy); border-color: var(--brand-navy); } .navbar-brand img { height: 2rem; width: auto; } /* Keyhole-colored focus ring, used sparingly (form controls only) so the accent stays tied to "this is where you unlock/authenticate", not a blanket restyle of every focus state. */ .form-control:focus, .form-select:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 0.25rem rgba(var(--brand-cyan-rgb), 0.25); } /* * Design-system layer added on top of the palette above: typography rhythm, elevation, motion * and a couple of small reusable patterns (empty states, auth shell, vault tiles) shared by * every page in Web.Client. Everything here targets Bootstrap's own classes/markup so individual * pages keep using plain `card`/`list-group`/`table`/`btn` — no per-page CSS isolation file needed * just to look consistent (that's what caused `.login-shell`/`.login-card`/`.login-logo` to only * ever apply to Login.razor and silently not to Register.razor, which reuses the same class names * from a component-scoped file: Blazor CSS isolation scopes rules to the *file* that owns them, * not to a class name. Fixed here by living in this global stylesheet instead. */ /* ---- Typography & page rhythm ------------------------------------------------------------- */ body { -webkit-font-smoothing: antialiased; } /* Faint brand-mark watermark behind every page — fixed to the viewport (not the document), so it stays put regardless of scroll position or how tall a given page's content is. */ body::before { content: ""; position: fixed; inset: 0; background-image: url("CffVaultmanager.svg"); background-repeat: no-repeat; background-position: center; background-size: 34rem; opacity: 0.05; z-index: -1; pointer-events: none; } h1, h2, h3, .h1, .h2, .h3 { font-weight: 700; letter-spacing: -0.01em; } /* Every page's top-level `

` gets consistent breathing room from the content below it, without every page having to remember a margin utility class. */ main > h1:first-child, main > .d-flex:first-child > h1 { margin-bottom: 0.25rem; } main { max-width: 75rem; margin-inline: auto; } /* ---- Navbar -------------------------------------------------------------------------------- */ .app-navbar { box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15); } .app-navbar .nav-link { position: relative; padding-block: 0.375rem; transition: color 0.15s ease-in-out; } .app-navbar .nav-link:hover { color: #fff !important; } /* Underline indicator on the current section — NavLink (not a plain ) supplies the "active" class, so this only ever lights up the route actually being viewed. */ .app-navbar .nav-link.active { color: #fff !important; } .app-navbar .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.375rem; height: 2px; background: var(--brand-cyan); border-radius: 1px; } /* ---- Elevation & motion --------------------------------------------------------------------- */ .card { background-color: var(--brand-surface); border: 1px solid rgba(var(--brand-navy-rgb), 0.08); box-shadow: 0 0.125rem 0.5rem rgba(var(--brand-navy-rgb), 0.06); } [data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.35); } a.list-group-item-action, a.card { transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out, border-color 0.15s ease-in-out; } a.list-group-item-action:hover, a.card:hover { box-shadow: 0 0.5rem 1.25rem -0.25rem rgba(var(--brand-navy-rgb), 0.18); transform: translateY(-1px); } [data-bs-theme="dark"] a.list-group-item-action:hover, [data-bs-theme="dark"] a.card:hover { box-shadow: 0 0.5rem 1.5rem -0.25rem rgba(0, 0, 0, 0.5); } .btn { transition: box-shadow 0.15s ease-in-out, transform 0.05s ease-in-out; } .btn:not(:disabled):not(.btn-link):hover { box-shadow: 0 0.25rem 0.75rem -0.25rem rgba(var(--brand-navy-rgb), 0.35); } .btn:not(:disabled):active { transform: translateY(1px); } /* ---- Tables -------------------------------------------------------------------------------- */ .table-responsive { border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color); } .table { margin-bottom: 0; } .table thead th { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--bs-secondary-color); border-bottom-width: 1px; background-color: rgba(var(--brand-navy-rgb), 0.03); } [data-bs-theme="dark"] .table thead th { background-color: rgba(255, 255, 255, 0.04); } .table tbody tr { transition: background-color 0.1s ease-in-out; } /* ---- Badges ---------------------------------------------------------------------------------- */ .badge { font-weight: 600; letter-spacing: 0.01em; padding: 0.4em 0.65em; } /* ---- Empty states (Shared/EmptyState.razor) -------------------------------------------------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 3.5rem 1.5rem; color: var(--bs-secondary-color); text-align: center; } .empty-state-compact { padding: 1.5rem 1rem; } .empty-state-icon { width: 2.75rem; height: 2.75rem; opacity: 0.45; } .empty-state-compact .empty-state-icon { width: 2rem; height: 2rem; } /* ---- Brand mark (Shared/BrandMark.razor) ------------------------------------------------------ * One shared icon+wordmark lockup used by the navbar and every auth page, instead of each one * hardcoding its own + (see CLAUDE.md task notes on why CffVaultmanager-full.svg — a * raster PNG with "CffVaultManager" baked into its pixels — can't be reused for the "CffVault" * rebrand: it's not editable via markup/CSS). Sizing is intentionally left to the caller's * IconClass/TextClass, since the mark is reused at three very different scales (navbar, compact * mobile auth header, large auth brand panel). */ .brand-mark-icon { height: 2rem; width: auto; } .brand-mark-text-cff { font-weight: 700; } .brand-mark-text-vault { font-weight: 500; } /* ---- Auth pages (Login.razor / Register.razor / Recovery.razor) ------------------------------- * Keeper-style split screen: a brand panel (navy → teal gradient) beside the actual form, both * wrapped in one `.auth-panel` that alone carries the shadow/radius — the two halves read as a * single surface, not two stacked cards. `.auth-panel` doesn't set align-items, so it defaults to * stretch: the brand panel always matches the height of whichever side is taller (relevant for * Register.razor's much longer form) instead of leaving a gap. Below lg the brand panel is * `d-none d-lg-flex` in markup and the compact BrandMark inside the form panel becomes the only * brand cue, keeping the page usable as a single centered card on mobile. */ .auth-shell { display: flex; min-height: calc(100vh - 8rem); align-items: center; justify-content: center; margin-top: 1rem; } .auth-panel { display: flex; width: 100%; max-width: 62rem; border-radius: var(--bs-border-radius-lg); overflow: hidden; box-shadow: 0 1rem 2.5rem -1rem rgba(var(--brand-navy-rgb), 0.28), 0 0.25rem 0.75rem -0.25rem rgba(var(--brand-navy-rgb), 0.12); } [data-bs-theme="dark"] .auth-panel { box-shadow: 0 1rem 2.5rem -1rem rgba(0, 0, 0, 0.6), 0 0.25rem 0.75rem -0.25rem rgba(0, 0, 0, 0.35); } .auth-brand-panel { flex: 0 0 38%; position: relative; align-items: center; justify-content: center; padding: 3rem 2rem; overflow: hidden; background: linear-gradient(160deg, var(--brand-navy) 0%, var(--brand-teal) 100%); } /* Faint oversized shield in the corner — same watermark idea as body::before, scaled up and cropped for a tighter, more deliberate composition than a centered repeat would give here. */ .auth-brand-panel::before { content: ""; position: absolute; inset: -15% -25% auto auto; width: 24rem; height: 24rem; background: url("CffVaultmanager.svg") no-repeat center / contain; opacity: 0.1; transform: rotate(-10deg); pointer-events: none; } .auth-brand-panel-content { position: relative; max-width: 20rem; text-align: center; color: #fff; } .auth-brand-icon { height: 4rem; width: auto; filter: drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.25)); } .auth-brand-text { font-size: 1.65rem; color: #fff; } .auth-brand-tagline { margin: 1rem 0 0; color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; line-height: 1.5; } .auth-form-panel { flex: 1 1 26rem; display: flex; align-items: center; justify-content: center; background-color: var(--brand-surface); padding: 2.5rem 2rem; } .auth-form-panel-inner { width: 100%; max-width: 25rem; } .login-logo { height: 2.75rem; width: auto; } @media (max-width: 991.98px) { .auth-panel { box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(var(--brand-navy-rgb), 0.25); } .auth-form-panel { padding: 2rem 1.25rem; } } /* ---- Vault tiles (Vault.razor) ---------------------------------------------------------------- */ .vault-tile-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: var(--bs-border-radius); } .vault-tile-icon svg { width: 1.375rem; height: 1.375rem; } .vault-tile-icon-personal { background-color: var(--bs-primary-bg-subtle); color: var(--brand-navy-contrast); } .vault-tile-icon-org { background-color: var(--bs-secondary-bg-subtle); color: var(--brand-teal-contrast); }