/* Inter (variable weight, latin subset), vendored in ../fonts with its OFL.txt. woff2-variations keeps one file covering weights 100-900. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"); } /* Color scheme: CoreUI Pro admin template "light" theme (v5.8.0), with the CanIssue teal replacing CoreUI's default primary. Derived --cui-primary-* usages that read the base variable follow automatically; --cui-primary-rgb must be kept in sync by hand because CoreUI bakes the rgb triplet in at build time. */ :root { --canissue-primary: #2a77c4; --canissue-font-size: 0.9375rem; --cui-body-font-size: var(--canissue-font-size); --cui-primary: var(--canissue-primary); --cui-primary-rgb: 42, 163, 196; --canissue-sidebar-width: 192px; --canissue-header-height: 4rem; --canissue-header-bg: var(--canissue-primary); --canissue-header-color: #fff; --canissue-header-nav-muted: color-mix(in srgb, var(--canissue-header-color) 82%, transparent); --canissue-font-family: "Inter", var(--cui-font-sans-serif); } /* The admin template paints the page canvas with the tertiary background while surfaces (sidebar, header, cards) keep the body background. */ body { background: var(--cui-tertiary-bg); } /* CoreUI admin-template layout rule: offset the wrapper by the fixed sidebar (coreui.min.css sets --cui-sidebar-occupy-*; the consumer rule is template CSS). */ .wrapper { width: 100%; padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0); will-change: auto; transition: padding 0.15s; } @media (prefers-reduced-motion: reduce) { .wrapper { transition: none; } } .sidebar { --cui-sidebar-width: var(--canissue-sidebar-width); font-family: var(--canissue-font-family); } /* The template uses the solid tertiary background for the active nav link where the library defaults to a translucent variant. Declared on .sidebar-nav because coreui.min.css declares it there, so an override on .sidebar would lose to the own-element declaration. */ .sidebar-nav { --cui-sidebar-nav-link-active-bg: var(--cui-tertiary-bg); --cui-sidebar-nav-link-hover-bg: color-mix(in srgb, var(--cui-primary) 12%, #fff); --cui-sidebar-nav-link-border-radius: 0; } /* Hover/active marker: a 4px primary bar on the link's start edge. Drawn as an inset box-shadow (not a border) so the link box and its text do not shift. */ .sidebar-nav .nav-link:hover, .sidebar-nav .nav-link.active { box-shadow: inset 4px 0 0 var(--cui-primary); } /* CoreUI hard-codes --cui-sidebar-occupy-start on the sidebar's siblings via this high-specificity rule (it is not derived from --cui-sidebar-width), so the override must repeat the selector to win the cascade at equal specificity. */ @media (min-width: 992px) { .sidebar:not(.hide):not(.sidebar-narrow):not(.sidebar-narrow-unfoldable:not(:hover)):not(.sidebar-narrow-unfoldable):not(.sidebar-overlaid):not(.sidebar-end) ~ * { --cui-sidebar-occupy-start: var(--canissue-sidebar-width); } } /* Header and sidebar-header heights are content-derived in CoreUI (avatar size vs sidebar padding + brand line-height) and only align by coincidence. Cap both with one shared token so their bottom borders meet at the sidebar/header seam. The header keeps min-height (CoreUI sets flex-wrap: wrap, so wrapped content may grow it below the lg breakpoint, where the sidebar overlays anyway). Both bars use the inverted scheme driven by the --canissue-header-bg/-color tokens. The header's foreground defaults are emphasis-color mixes (dark on light), so every CoreUI foreground token — base, hover, active, toggler — is re-pointed at the single header color. */ .header { min-height: var(--canissue-header-height); --cui-header-bg: var(--canissue-header-bg); --cui-header-color: var(--canissue-header-color); --cui-header-hover-color: var(--canissue-header-color); --cui-header-active-color: var(--canissue-header-color); --cui-header-toggler-color: var(--canissue-header-color); --cui-header-toggler-hover-color: var(--canissue-header-color); } .sidebar-header { height: var(--canissue-header-height); background: var(--canissue-header-bg); --cui-sidebar-brand-color: var(--canissue-header-color); } /* The mobile close button is an alpha-masked dark glyph; reuse the btn-close-white filter so it reads on the primary background. */ .sidebar-header .btn-close { --cui-btn-close-filter: invert(1) grayscale(100%) brightness(200%); } /* The user avatar is bg-primary/text-white in markup, which would vanish on the now-primary header — invert it (!important is needed to beat the bg-primary and text-white utilities, which are themselves !important). */ .header .avatar.bg-primary { background-color: var(--canissue-header-color) !important; color: var(--canissue-header-bg) !important; font-weight: bold; } /* Breadcrumb ancestor links and separators read muted against the header color; the current-page (.active) item keeps the full header color. The extra class beats CoreUI's own-specificity .header-nav .nav-link color rule. */ .header .nav-link.muted { color: var(--canissue-header-nav-muted); } /* Custom toggler icon (chevron in a circle). CoreUI renders the icon as an alpha mask over the ::before background, so the SVG stroke color is irrelevant — the visible color comes from the -color/-hover-color/-focus-color variables, and the narrow-mode 180° flip keeps working. The focus shadow is dropped in favor of the hover/focus color change. */ .sidebar .sidebar-toggler { --cui-sidebar-toggler-width: 18px; --cui-sidebar-toggler-height: 18px; --cui-sidebar-toggler-color: var(--cui-primary); --cui-sidebar-toggler-hover-color: #000; --cui-sidebar-toggler-focus-color: #000; --cui-sidebar-toggler-focus-shadow: none; --cui-sidebar-toggler-icon: url("data:image/svg+xml,"); margin-inline-start: auto; }