feat: modern UI and fix head_custom.html include name

[BrewertonSantos]

Fixes and modernizes the site:

• Rename head-custom.html to head_custom.html (the name just-the-docs actually looks for — CSP was never injected before)
• Add assets/css/custom.css: system fonts, gradient hero heading, rounded code blocks, modern table hover, gradient buttons, search focus ring
• Add typography SCSS vars to color scheme

[Copilot]

Pull request overview

This PR updates the site’s Just the Docs customization layer by adding a modern UI override stylesheet, wiring it into the correct head_custom.html include hook, and extending the custom dark color scheme with typography variables.

Changes:

• Add assets/css/custom.css with site-wide UI/typography overrides (fonts, hero gradient heading, code/table/button styling, search focus styling).
• Add typography SCSS variables to disttopic-dark color scheme.
• Include the new CSS file from _includes/head_custom.html.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

File	Description
assets/css/custom.css	Introduces modern UI overrides (typography, components, interactions).
_sass/color_schemes/disttopic-dark.scss	Adds typography variables to the theme color scheme overrides.
_includes/head_custom.html	Loads the new override stylesheet from the head include hook.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

scroll-behavior: smooth should respect users who prefer reduced motion; otherwise it can cause motion sickness / violates common a11y guidance. Consider applying smooth scrolling only under @media (prefers-reduced-motion: no-preference) (and leaving default behavior otherwise).

[Copilot]

The gradient heading style sets -webkit-text-fill-color: transparent without a non-gradient fallback. In browsers/contexts that don’t support background-clip text (or in forced-colors/high-contrast modes), this can render the heading unreadable. Add an explicit fallback color and gate the gradient/transparent fill behind a feature query (and/or provide a forced-colors override).

Suggested change

	background: linear-gradient(
	135deg,
	var(--ctp-lavender) 0%,
	var(--ctp-blue) 50%,
	var(--ctp-teal) 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 0.25rem !important;
	}
	margin-bottom: 0.25rem !important;
	/* Fallback solid color for environments without background-clip text */
	color: var(--ctp-text) !important;
	}
	/* Apply gradient text only when background-clip:text is supported */
	@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.fs-9 {
	background: linear-gradient(
	135deg,
	var(--ctp-lavender) 0%,
	var(--ctp-blue) 50%,
	var(--ctp-teal) 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	}
	}
	/* Ensure readability in high-contrast / forced-colors modes */
	@media (forced-colors: active) {
	.fs-9 {
	background: none;
	-webkit-text-fill-color: currentColor;
	}
	}

[Copilot]

Removing the focus outline (outline: none) can make keyboard focus hard to see, especially in forced-colors mode where box-shadow may be suppressed. Prefer styling :focus-visible and keep an outline (or add a forced-colors specific outline) so focus indication remains reliably visible.

Suggested change

	.search-input:focus {
	border-color: var(--ctp-blue) !important;
	box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.15) !important;
	outline: none !important;
	}
	.search-input:focus-visible {
	border-color: var(--ctp-blue) !important;
	box-shadow: 0 0 0 3px rgba(137, 180, 250, 0.15) !important;
	}
	@media (forced-colors: active) {
	.search-input:focus-visible {
	outline: 2px solid Highlight !important;
	outline-offset: 2px;
	box-shadow: none !important;
	}
	}

[Copilot]

Just the Docs has deprecated $root-font-size and may remove it in a future release, so overriding it here risks becoming a no-op or breaking builds on theme upgrades. Consider removing this override (or switching to the currently recommended typography sizing variables/mechanism in Just the Docs).

Suggested change

$root-font-size: 16px;