/* Brand palette + global cascade for the Rask showcase. These rules target :root,
global Bootstrap classes, shell tags (html/body), and markup rendered by other
components (Raw-injected syntax-highlight spans), so they are deliberately NOT scoped.
Plain global stylesheet served from wwwroot and linked from App.cs's . */
:root {
/* The violet dark-first palette lives in Styles/app.css now, compiled into this project's own
stylesheet — it used to come from Rask.Bootstrap's tokens.css, which is gone. This block keeps
what is specific to the showcase: the type system, the fixed nav height, thin --rask-* aliases so
the existing var(--rask-*) references across this file + GuideChrome.css keep resolving, and the
two fixed-dark code-surface tokens (code blocks stay dark in both themes). */
--rask-accent: var(--accent);
--rask-accent-strong: var(--accent-2);
--rask-accent-soft: color-mix(in srgb, var(--accent) 15%, transparent);
--rask-gradient: linear-gradient(135deg, var(--accent), var(--accent-2));
--rask-ink: #14101f; /* deep violet-black: code panes — always dark, both themes */
--rask-ink-2: #211b30; /* one step lifted from ink */
--rask-mist: var(--panel-2); /* faint lifted surface for boxes (Chapters TOC, etc.) */
--rask-line: var(--line); /* hairline */
--rask-body: var(--ink); /* body text */
/* Type system: Space Grotesk (display) / Inter (body) / JetBrains Mono (code). Routed through
Bootstrap's own font vars so every Bs component picks them up, plus --font-* for direct use. */
--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
--nav-h: 56px;
}
body {
font-family: var(--font-body);
/* Inter stylistic sets: single-storey a (cv11), open digits — quiet, technical legibility. */
font-feature-settings: "cv11", "ss01";
color: var(--rask-body);
letter-spacing: -0.004em;
}
/* Headings carry the display face — tighter tracking, a touch more weight than Bootstrap's default. */
h1, h2, h3, h4, h5, h6,
.app-brand {
font-family: var(--font-display);
letter-spacing: -0.022em;
}
.display-5 {
font-weight: 700;
}
/* THERE IS NO GLOBAL `a { color }` RULE, and that is deliberate.
There was one, and it silently defeated every Tailwind text-colour utility on every link in the
site. The landing page's primary call to action reads `bg-ui-ink text-ui-bg` and rendered as brand
violet on near-black — a contrast ratio of 2.12:1, found by Lighthouse rather than by eye. The class
was there, the token was right, and the rule never applied.
Neither obvious repair works. Unlayered, a tag rule beats every layered utility outright. Moved into
`@layer base` here, it becomes a NEW layer after everything the kit and app sheets declared, because
layer names do not merge across separate stylesheets. Even written into the app's own Tailwind
entry — same sheet, base emitted before utilities — the browser still ranked it above them.
So the rule is gone. In a utility-first codebase a tag is the wrong place to put a colour: chrome
links (nav, cards, buttons) carry their own utilities, and prose links are styled by their CONTAINER
below, which is a class and therefore something a utility can be reasoned about against. */
code, pre, .font-monospace {
font-family: var(--font-mono);
}
:not(pre) > code {
background: var(--rask-accent-soft);
color: var(--rask-accent);
padding: 0.08rem 0.32rem;
border-radius: 4px;
font-size: 0.86em;
}
pre {
margin: 0;
}
.rask-badge {
background: var(--rask-accent-soft);
color: var(--rask-accent);
}
.text-accent {
color: var(--rask-accent) !important;
}
/* Shell-tag global rules. */
html {
-webkit-text-size-adjust: 100%;
}
body {
-webkit-tap-highlight-color: transparent;
overscroll-behavior-y: none;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* The page ground — the deep violet-black (or light tint in light mode) from the shared tokens.
!important because Bootstrap's own .bg-body-tertiary is an !important utility (keyed off
--bs-tertiary-bg-rgb), which would otherwise win over a plain selector. */
body.bg-body-tertiary {
background-color: var(--ground) !important;
}
button, a, [role="button"] {
touch-action: manipulation;
}
/* From ShowcaseLayout: lock body scroll while the mobile nav drawer (the responsive offcanvas) is
shown — :has() reaches up from the backdrop the open drawer renders; body is a shell tag, so this
global stylesheet (it could never be component-scoped). */
@media (max-width: 767.98px) {
body:has(.nav-backdrop) {
overflow: hidden;
height: 100vh;
}
/* Keep the top navbar a single line on phones: never wrap, and drop the decorative brand badges
("showcase" + version pill) that pushed the brand + GitHub button onto a second row. */
.app-navbar {
flex-wrap: nowrap;
}
.app-navbar .app-brand .rask-badge {
display: none;
}
}
/* From CodeSample: ColorCode emits token markup
injected through Raw(), so those spans carry no scope attribute. Anchored under
.sample-code so the generic class names don't leak page-wide. Dark palette tuned to
the #1f1d2b background / #e7e3ff base text. */
:is(.sample-code, .markdown-body pre) .keyword,
:is(.sample-code, .markdown-body pre) .preprocessorKeyword {
color: #c792ea;
}
:is(.sample-code, .markdown-body pre) .string,
:is(.sample-code, .markdown-body pre) .stringCSharpVerbatim {
color: #c3e88d;
}
:is(.sample-code, .markdown-body pre) .stringEscape {
color: #89ddff;
}
:is(.sample-code, .markdown-body pre) .comment {
color: #6b6786;
font-style: italic;
}
:is(.sample-code, .markdown-body pre) .xmlDocComment {
color: #6b6786;
font-style: italic;
}
:is(.sample-code, .markdown-body pre) .xmlDocTag {
color: #8b87a8;
}
:is(.sample-code, .markdown-body pre) .number {
color: #f78c6c;
}
:is(.sample-code, .markdown-body pre) .className {
color: #82aaff;
}
:is(.sample-code, .markdown-body pre) .plainText {
color: #e7e3ff;
}
/* CSS-language tokens (ColorCode's CSS lexer): selectors, property names and values. The
JS lexer reuses the shared keyword/string/comment/number classes above. */
:is(.sample-code, .markdown-body pre) .cssSelector {
color: #82aaff;
}
:is(.sample-code, .markdown-body pre) .cssPropertyName {
color: #89ddff;
}
:is(.sample-code, .markdown-body pre) .cssPropertyValue {
color: #c3e88d;
}
/* CodeSample: the source pane and the live result stack vertically (code first); a hairline
divides them now that they are no longer side-by-side columns. */
.sample-result-col {
border-top: 1px solid rgba(124, 58, 237, 0.15);
}
/* ShowcaseLayout: the app shell (navbar + responsive-offcanvas sidebar + main). These rules are
GLOBAL rather than a scoped {Component}.css because the sidebar is built from several nested
Rask.Bootstrap components (BsNavbar / BsOffcanvas / BsCollapse / BsNav / BsNavItem → NavLink), so
the elements they render (e.g. .offcanvas-body, the .side-nav-link anchors) sit several component
levels below ShowcaseLayout and never carry its scope id. Same rationale as the .sample-code rules
above — markup another component renders can't be component-scoped. The .side-nav* / .nav-group* /
.app-* class names are specific enough not to leak. */
/* Sticky top bar — a fixed violet-black glass (kept dark in both themes so the BsNavbar's Theme:Dark
light text stays readable), matching the marketing site's dark topbar. */
.app-navbar {
background: rgba(20, 16, 31, 0.82) !important;
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
padding-top: calc(0.5rem + env(safe-area-inset-top));
z-index: 1046;
}
/* Hamburger toggle — a transparent icon button shown only below md (the d-md-none utility hides it
at >=md, where the sidebar is static). */
.hamburger-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 44px;
border: 0;
background: transparent;
color: #fff;
border-radius: 0.5rem;
margin-right: 0.25rem;
padding: 0;
}
.hamburger-btn:hover,
.hamburger-btn:focus {
background: rgba(255, 255, 255, 0.08);
outline: none;
}
.hamburger-btn .bi {
font-size: 1.4rem;
line-height: 1;
}
/* The shell row: sidebar + main, laid out with the Display.Flex utility on the wrapper. */
.app-shell {
align-items: flex-start;
}
/* The sidebar is a responsive offcanvas (offcanvas-md): a slide-in drawer below md, a fixed-width
static column at >=md. */
/* The body is a non-scrolling flex column: a pinned filter header over a single scrolling list. The
filter is a real flex header (not position:sticky) because a sticky child of a flex container does
not stick in Safari — it would scroll away with the list. This is bulletproof across browsers. */
/* The sidebar body is a non-scrolling flex column: the filter is a pinned header and the LIST inside
scrolls. BsOffcanvas used to supply this container as .offcanvas-body; the container is now the