/* Brand logo sizing + dark-mode swap. * * Two concerns in one file: * * 1. Scale up the wordmark so it fills the available header height * instead of sitting at Nova's stock h-6 (24px) inside an h-12 * (48px) Link wrapper. The new viewBox is 206 × 110, so to keep * the aspect ratio we drive everything from a target height and * derive width via calc(h * 206/110). * * Light mode: override the inline SVG's height — Nova adds .h-6 * or .h-8 on ; our rule has higher specificity and wins. * Dark mode: the inline SVG is display:none and the background * image takes the same scaled-up box on the wrapping . * * 2. Dark-mode swap. Our wordmark SVGs use hardcoded fills (#000 / * #fff) instead of currentColor, so CSS can't repaint the inline * ink. Under html.dark we collapse the inlined SVG entirely * (display:none — visibility:hidden leaves the box and produces a * phantom width that pushes layout right) and paint the dark * variant as a background image on the wrapping . * * Loaded from resources/views/vendor/nova/partials/meta.blade.php * via a in , NOT via Nova::style() — * Nova's availableStyles() returns [] on the unauthenticated login * screen, so styles registered that way never reach /nova/login. * * Selector: the wordmark SVG carries aria-label="CORE by Knoxic" * (set in the source SVG itself). If the artwork ever ships with a * different aria-label, update both selectors below. */ :root { /* One source of truth for the wordmark aspect ratio. */ --kx-logo-ratio: calc(206 / 110); /* Target heights for each surface. Tweak here and both light + * dark paths follow. */ --kx-logo-height-header: 2.5rem; /* MainHeader Link wrapper is h-12 (3rem) */ --kx-logo-height-auth: 3.5rem; /* /nova/login — no surrounding height cap */ } /* ── Light mode: scale the inline SVG up ────────────────────────── */ /* MainHeader (sidebar + topbar) — Nova ships .h-6 on ; we override. */ span:has(> svg[aria-label="CORE by Knoxic"]) > svg { height: var(--kx-logo-height-header) !important; width: calc(var(--kx-logo-height-header) * var(--kx-logo-ratio)) !important; } /* Auth / login page — Nova ships .h-8. The flex parent .max-w-sm * .justify-center is the marker we use to detect it (MainHeader has * neither). Bumps the wordmark to a larger size on the login surface * where there's no chrome-height cap. */ .max-w-sm span:has(> svg[aria-label="CORE by Knoxic"]) > svg { height: var(--kx-logo-height-auth) !important; width: calc(var(--kx-logo-height-auth) * var(--kx-logo-ratio)) !important; } /* ── Dark mode: hide inline SVG, paint background image ─────────── */ html.dark span:has(> svg[aria-label="CORE by Knoxic"]) { /* Become the visible box for the swapped image. The inlined SVG * below is display:none, so the span's own dimensions drive layout * — no phantom width, no jump on theme toggle. Same scaled size as * light mode. */ display: inline-block; background-image: url('https://d3fkghcrwj66rp.cloudfront.net/493ab683-18b8-442f-8fe3-3473393093c8/img/core-logo-dark.svg'); background-repeat: no-repeat; background-position: left center; background-size: contain; height: var(--kx-logo-height-header); width: calc(var(--kx-logo-height-header) * var(--kx-logo-ratio)); } html.dark .max-w-sm span:has(> svg[aria-label="CORE by Knoxic"]) { height: var(--kx-logo-height-auth); width: calc(var(--kx-logo-height-auth) * var(--kx-logo-ratio)); } html.dark span:has(> svg[aria-label="CORE by Knoxic"]) > svg { /* display:none removes the box entirely — no phantom width to the * right of the painted dark wordmark. */ display: none; }