/*!
* Genval style kit 1.0.0
* One stylesheet for genval.ai pages and anything else that carries the Genval name.
*
* Use:
* Theme: follows the visitor's system setting. Force one with
* or .
*
* Contents
* 1. Fonts JetBrains Mono and Literata
* 2. Tokens colors, type, space. The look tokens use the Kanonak names.
* 3. Base plain HTML elements
* 4. Layout page, entry (key and body), header, footer, band
* 5. Components logo, identifier, details, badge, card, code, table, button, forms ...
* 6. Utilities
* 7. Print what a printed web page looks like
*
* Everything sits in cascade layers, so any rule you write outside a layer wins
* over this file, whatever its specificity. Built for browsers from 2023 on.
*/
@layer gv.tokens, gv.base, gv.layout, gv.components, gv.utilities, gv.print;
/* ==========================================================================
1. FONTS
Two families, both variable, both under the SIL Open Font License, served
from ../fonts/. The "latin-ext" files load only on pages that use those
characters.
========================================================================== */
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "JetBrains Mono";
font-style: normal;
font-weight: 100 800;
font-display: swap;
src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Literata";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url("../fonts/literata-latin-wght-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Literata";
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url("../fonts/literata-latin-ext-wght-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Literata";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url("../fonts/literata-latin-wght-italic.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Literata";
font-style: italic;
font-weight: 200 900;
font-display: swap;
src: url("../fonts/literata-latin-ext-wght-italic.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ==========================================================================
2. TOKENS
Change a value here and every component follows.
========================================================================== */
@layer gv.tokens {
:root {
color-scheme: light dark;
/* Brand palette. Fixed: these do not change with the theme. */
--gv-ink: #0c0f14; /* Text and the "gen" half of the logo */
--gv-night: #0b0d10; /* Dark page background */
--gv-paper: #f3f4f1; /* Light page background */
--gv-white: #ffffff; /* Cards on paper */
--gv-off-white: #f2f4f3; /* Text on night */
--gv-green: #089f6e; /* Brand green: the "val" half of the logo, fills and large marks */
--gv-green-deep: #067a55; /* Green that passes contrast as small text on light backgrounds */
--gv-green-bright: #34d399; /* Green on dark backgrounds */
--gv-green-field: #0aa873; /* Green background field (avatars, the green band) */
/* Look tokens. The same twenty names as kanonak.org/look-tokens, so a page built
with this file and a page rendered by a Kanonak look share one vocabulary.
Each color is light-dark(light value, dark value). */
--gv-bg: light-dark(#f3f4f1, #0b0d10); /* Page background */
--gv-bg-card: light-dark(#ffffff, #14171c); /* Cards, panels, grouped content */
--gv-bg-elev: light-dark(#eceee9, #1d2128); /* Raised above bg-card: table heads, pills, nested panels */
--gv-text: light-dark(#0c0f14, #f2f4f3); /* Primary text */
--gv-text-dim: light-dark(#414854, #b4bbc4); /* Secondary text: descriptions, captions */
--gv-text-faint: light-dark(#5f6773, #8d97a4); /* Tertiary text: metadata, footers */
--gv-border: light-dark(#d2d6cf, #2b313a); /* Default border and dividers */
--gv-border-soft: light-dark(#e3e6e0, #1f242b); /* Low-contrast separation */
--gv-accent: light-dark(#067a55, #34d399); /* Links, badges, emphasis: green that reads as text */
--gv-accent-hover: light-dark(#04553b, #6ee7b7); /* Hover state for accent-colored elements */
--gv-badge-bg: light-dark(rgba(8, 159, 110, 0.1), rgba(52, 211, 153, 0.12));/* Badge and chip background */
--gv-badge-fg: light-dark(#05684a, #6ee7b7); /* Badge and chip text */
--gv-font-body: 'Literata', Georgia, 'Times New Roman', serif;
--gv-font-display: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, Menlo, monospace;
--gv-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, Menlo, monospace;
--gv-radius: 6px;
--gv-radius-sm: 3px;
--gv-spacing-unit: 16px;
--gv-line-height-body: 1.6;
--gv-line-height-heading: 1.15;
/* Genval extensions: what the look vocabulary has no word for. */
--gv-border-strong: light-dark(#7d857b, #6b7480); /* Form-control borders (3:1 against every surface) */
--gv-accent-fill: light-dark(#089f6e, #34d399); /* Green as a fill: checked controls, marks, the logo's "val" */
--gv-on-accent: #0c0f14; /* Text on an accent fill */
--gv-solid: light-dark(#0c0f14, #f2f4f3); /* Fill of the primary button */
--gv-on-solid: light-dark(#f2f4f3, #0b0d10); /* Text on the primary button */
--gv-valid: light-dark(#067a55, #34d399); /* Valid, resolved, success */
--gv-warn: light-dark(#7f5200, #f5b83d); /* Warning, deprecated */
--gv-invalid: light-dark(#b3261e, #ff8a80); /* Invalid, error */
--gv-info: light-dark(#1f5f99, #8cc2f2); /* Neutral information */
--gv-focus: var(--gv-accent);
--gv-shadow-overlay: 0 16px 40px light-dark(rgba(12, 15, 20, 0.18), rgba(0, 0, 0, 0.6));
/* Syntax colors for code blocks (kan-tok-* and Prism token classes). */
--gv-tok-comments: var(--gv-text-faint);
--gv-tok-key: var(--gv-text);
--gv-tok-string: var(--gv-accent);
--gv-tok-number: var(--gv-warn);
--gv-tok-boolean: var(--gv-warn);
--gv-tok-keyword: var(--gv-info);
--gv-tok-operator: var(--gv-text-dim);
--gv-tok-punctuation: var(--gv-text-faint);
--gv-tok-flag: var(--gv-info);
/* Space: multiples of spacing-unit. */
--gv-space-1: calc(var(--gv-spacing-unit) * 0.25); /* 4 px */
--gv-space-2: calc(var(--gv-spacing-unit) * 0.5); /* 8 px */
--gv-space-3: calc(var(--gv-spacing-unit) * 0.75); /* 12 px */
--gv-space-4: calc(var(--gv-spacing-unit) * 1); /* 16 px */
--gv-space-5: calc(var(--gv-spacing-unit) * 1.5); /* 24 px */
--gv-space-6: calc(var(--gv-spacing-unit) * 2); /* 32 px */
--gv-space-7: calc(var(--gv-spacing-unit) * 3); /* 48 px */
--gv-space-8: calc(var(--gv-spacing-unit) * 4); /* 64 px */
--gv-space-9: calc(var(--gv-spacing-unit) * 6); /* 96 px */
--gv-space-10: calc(var(--gv-spacing-unit) * 8); /* 128 px */
/* Type sizes. Mono runs large, so mono sizes sit a step below the serif ones. */
--gv-text-xs: 0.75rem; /* 12 px. Mono fine print */
--gv-text-sm: 0.8125rem; /* 13 px. Mono labels, keys, captions */
--gv-text-ui: 0.875rem; /* 14 px. Mono controls: buttons, nav, inputs */
--gv-text-small: 0.9375rem; /* 15 px. Small serif text */
--gv-text-body: 1.0625rem; /* 17 px. Body */
--gv-text-lead: clamp(1.1875rem, 1.1rem + 0.5vw, 1.375rem); /* 19 to 22 px. Lead paragraph */
--gv-text-h4: 1.0625rem; /* 17 px */
--gv-text-h3: 1.3125rem; /* 21 px */
--gv-text-h2: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); /* 24 to 32 px */
--gv-text-h1: clamp(2rem, 1.35rem + 3vw, 3.25rem); /* 32 to 52 px */
--gv-text-display: clamp(2.25rem, 1.2rem + 4.6vw, 4.25rem); /* 36 to 68 px. One per page */
--gv-weight-regular: 400;
--gv-weight-medium: 500;
--gv-weight-bold: 700;
--gv-tracking-tight: -0.02em; /* Large mono headings */
--gv-tracking-snug: -0.01em; /* Small mono headings */
/* Layout */
--gv-page-max: 68rem; /* Widest the page content gets */
--gv-gutter: clamp(1rem, 4vw, 2.5rem); /* Space at the page edges */
--gv-key-col: 11rem; /* Width of the key column in an entry */
--gv-measure: 60ch; /* Longest comfortable line of body text, about 70 characters */
--gv-radius-full: 999px; /* Switches and round marks only */
--gv-duration: 140ms; /* State changes */
--gv-ease: cubic-bezier(0.2, 0, 0, 1);
}
/* Force a theme on the page or on any part of it. Without the attribute the
page follows the visitor's system setting. */
[data-theme="light"], .gv-scheme-light { color-scheme: light; }
[data-theme="dark"], .gv-scheme-dark { color-scheme: dark; }
/* Browsers from before 2024 do not know light-dark(). They get the light values,
and the dark values when a theme is forced. If you change a color above,
change it here too, or delete this block to drop those browsers. */
@supports not (color: light-dark(#000, #fff)) {
:root, [data-theme="light"], .gv-scheme-light {
--gv-bg: #f3f4f1;
--gv-bg-card: #ffffff;
--gv-bg-elev: #eceee9;
--gv-text: #0c0f14;
--gv-text-dim: #414854;
--gv-text-faint: #5f6773;
--gv-border: #d2d6cf;
--gv-border-soft: #e3e6e0;
--gv-accent: #067a55;
--gv-accent-hover: #04553b;
--gv-badge-bg: rgba(8, 159, 110, 0.1);
--gv-badge-fg: #05684a;
--gv-border-strong: #7d857b;
--gv-accent-fill: #089f6e;
--gv-on-accent: #0c0f14;
--gv-solid: #0c0f14;
--gv-on-solid: #f2f4f3;
--gv-valid: #067a55;
--gv-warn: #7f5200;
--gv-invalid: #b3261e;
--gv-info: #1f5f99;
--gv-shadow-overlay: 0 16px 40px rgba(12, 15, 20, 0.18);
}
[data-theme="dark"], .gv-scheme-dark {
--gv-bg: #0b0d10;
--gv-bg-card: #14171c;
--gv-bg-elev: #1d2128;
--gv-text: #f2f4f3;
--gv-text-dim: #b4bbc4;
--gv-text-faint: #8d97a4;
--gv-border: #2b313a;
--gv-border-soft: #1f242b;
--gv-accent: #34d399;
--gv-accent-hover: #6ee7b7;
--gv-badge-bg: rgba(52, 211, 153, 0.12);
--gv-badge-fg: #6ee7b7;
--gv-border-strong: #6b7480;
--gv-accent-fill: #34d399;
--gv-on-accent: #0c0f14;
--gv-solid: #f2f4f3;
--gv-on-solid: #0b0d10;
--gv-valid: #34d399;
--gv-warn: #f5b83d;
--gv-invalid: #ff8a80;
--gv-info: #8cc2f2;
--gv-shadow-overlay: 0 16px 40px rgba(0, 0, 0, 0.6);
}
}
}
/* ==========================================================================
3. BASE
Plain HTML elements. Mono declares (headings, names, code, controls),
serif explains (paragraphs, descriptions).
========================================================================== */
@layer gv.base {
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-padding-top: var(--gv-space-7);
}
body {
margin: 0;
background: var(--gv-bg);
color: var(--gv-text);
font-family: var(--gv-font-body);
font-size: var(--gv-text-body);
line-height: var(--gv-line-height-body);
font-synthesis: none;
overflow-wrap: break-word;
}
/* Headings: mono, one color. The logo is the only two-tone word. */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em;
font-family: var(--gv-font-display);
font-weight: var(--gv-weight-bold);
font-feature-settings: "calt" 0;
line-height: var(--gv-line-height-heading);
letter-spacing: var(--gv-tracking-tight);
text-wrap: balance;
}
h1 { font-size: var(--gv-text-h1); }
h2 { font-size: var(--gv-text-h2); }
h3 { font-size: var(--gv-text-h3); line-height: 1.25; letter-spacing: var(--gv-tracking-snug); }
h4, h5, h6 { font-size: var(--gv-text-h4); line-height: 1.35; letter-spacing: 0; }
p, ul, ol, dl, pre, table, figure, blockquote, details, address {
margin-block: 0 var(--gv-space-4);
}
:is(p, ul, ol, dl, pre, table, figure, blockquote, details, address, h1, h2, h3, h4, h5, h6):last-child {
margin-block-end: 0;
}
p { text-wrap: pretty; }
address { font-style: normal; }
strong, b { font-weight: var(--gv-weight-bold); }
/* Links: ink text, green underline. Green marks what resolves. */
a {
color: inherit;
text-decoration-line: underline;
text-decoration-color: var(--gv-accent);
text-decoration-thickness: max(1px, 0.08em);
text-underline-offset: 0.2em;
transition: color var(--gv-duration) var(--gv-ease);
}
a:hover { color: var(--gv-accent); }
a:active, a:hover code { color: var(--gv-accent-hover); }
:focus-visible {
outline: 2px solid var(--gv-focus);
outline-offset: 2px;
}
::selection { background: var(--gv-green-bright); color: var(--gv-ink); }
:target { scroll-margin-top: var(--gv-space-7); }
/* Lists: unordered items take a hyphen, the way a YAML sequence does. */
ul, ol { padding-inline-start: 1.5em; }
ul { list-style-type: "- "; }
ul ul { list-style-type: "· "; }
li + li, li > ul, li > ol { margin-block-start: 0.3em; }
li::marker {
font-family: var(--gv-font-mono);
font-size: 0.85em;
color: var(--gv-text-faint);
font-variant-numeric: tabular-nums;
}
dt { font-weight: var(--gv-weight-bold); }
dd { margin: 0; }
hr {
height: 0;
margin-block: var(--gv-space-6);
border: 0;
border-block-start: 1px solid var(--gv-border);
}
blockquote {
margin-inline: 0;
padding-inline-start: var(--gv-space-4);
border-inline-start: 2px solid var(--gv-accent-fill);
color: var(--gv-text-dim);
font-style: italic;
}
blockquote cite {
display: block;
margin-block-start: var(--gv-space-2);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-style: normal;
color: var(--gv-text-faint);
}
/* Code: what you see is what was typed, so no ligatures. */
code, kbd, samp, pre {
font-family: var(--gv-font-mono);
font-size: 0.86em;
font-feature-settings: "calt" 0;
font-variant-ligatures: none;
}
code {
padding: 0.1em 0.35em;
border-radius: var(--gv-radius-sm);
background: color-mix(in srgb, var(--gv-text) 7%, transparent);
}
pre {
overflow-x: auto;
tab-size: 2;
line-height: 1.6;
font-size: var(--gv-text-sm);
}
pre code { padding: 0; border-radius: 0; background: none; font-size: inherit; }
kbd {
padding: 0.05em 0.4em;
border: 1px solid var(--gv-border-strong);
border-block-end-width: 2px;
border-radius: var(--gv-radius-sm);
background: var(--gv-bg-card);
}
mark {
padding-inline: 0.15em;
background: color-mix(in srgb, var(--gv-green-bright) 40%, transparent);
color: inherit;
}
small { font-size: var(--gv-text-small); }
sub, sup { position: relative; font-size: 0.75em; line-height: 0; vertical-align: baseline; }
sup { top: -0.45em; }
sub { bottom: -0.2em; }
abbr[title] { text-decoration: underline dotted; cursor: help; }
img, picture, video, canvas { display: block; max-width: 100%; height: auto; }
figure { margin-inline: 0; }
figcaption {
margin-block-start: var(--gv-space-2);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
color: var(--gv-text-faint);
}
/* Tables: hairlines, mono column heads. */
table {
width: 100%;
border-collapse: collapse;
font-size: var(--gv-text-small);
line-height: 1.5;
}
caption {
padding-block-end: var(--gv-space-2);
text-align: start;
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
color: var(--gv-text-dim);
}
th, td {
padding: var(--gv-space-2) var(--gv-space-4) var(--gv-space-2) 0;
border-block-end: 1px solid var(--gv-border);
text-align: start;
vertical-align: top;
}
th:last-child, td:last-child { padding-inline-end: 0; }
th {
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-medium);
}
thead th { color: var(--gv-text-dim); border-block-end-color: var(--gv-border-strong); vertical-align: bottom; }
tbody :is(th, td) { vertical-align: baseline; }
th code { padding: 0; background: none; font-size: 1em; }
/* Form elements inherit type; the components style the rest. */
button, input, select, textarea, optgroup {
font: inherit;
letter-spacing: inherit;
color: inherit;
}
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
summary { cursor: pointer; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
}
/* ==========================================================================
4. LAYOUT
A page is a list of entries. Each entry has a key (a short name, in the
narrow left column) and a body (the content, in the wide right column).
On small screens the key sits above the body.
========================================================================== */
@layer gv.layout {
/* Page width and side gutters */
.gv-page {
width: min(100% - 2 * var(--gv-gutter), var(--gv-page-max));
margin-inline: auto;
}
/* Entry: key on the left, body on the right */
.gv-entry {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gv-space-4) var(--gv-space-6);
align-items: first baseline;
padding-block: var(--gv-space-7);
border-block-start: 1px solid var(--gv-border);
}
.gv-entry-key {
margin: 0;
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-medium);
line-height: 1.5;
letter-spacing: 0;
color: var(--gv-text-dim);
}
.gv-entry-body { min-width: 0; }
.gv-entry--top { align-items: start; }
.gv-entry--hero { padding-block: var(--gv-space-8) var(--gv-space-7); border-block-start: 0; }
.gv-entry--flush { border-block-start: 0; }
@media (min-width: 60rem) {
.gv-entry {
grid-template-columns: var(--gv-key-col) minmax(0, 1fr);
padding-block: var(--gv-space-8);
}
.gv-entry-key {
position: sticky;
top: var(--gv-sticky-top, var(--gv-space-5));
}
.gv-entry--hero { padding-block: var(--gv-space-9) var(--gv-space-8); }
/* An entry with no key still lines up with the others */
.gv-entry > .gv-entry-body:only-child { grid-column: 2; }
}
/* Header: logo over the key column, navigation over the body column */
.gv-header { border-block-end: 1px solid var(--gv-border); }
.gv-header--sticky {
position: sticky;
top: 0;
z-index: 10;
background: color-mix(in srgb, var(--gv-bg) 92%, transparent);
backdrop-filter: blur(10px);
}
.gv-header-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "logo actions" "nav nav";
align-items: center;
gap: var(--gv-space-2) var(--gv-space-4);
padding-block: var(--gv-space-3);
}
.gv-header-logo { grid-area: logo; display: inline-flex; justify-self: start; text-decoration: none; }
.gv-header-actions { grid-area: actions; display: flex; align-items: center; gap: var(--gv-space-2); }
.gv-header .gv-nav { grid-area: nav; }
@media (min-width: 60rem) {
.gv-header-bar {
grid-template-columns: var(--gv-key-col) minmax(0, 1fr) auto;
grid-template-areas: "logo nav actions";
column-gap: var(--gv-space-6);
padding-block: var(--gv-space-4);
}
}
/* Navigation links */
.gv-nav, .gv-nav ul {
display: flex;
flex-wrap: wrap;
gap: var(--gv-space-1) var(--gv-space-5);
margin: 0;
padding: 0;
list-style: none;
}
.gv-nav li { margin: 0; }
.gv-nav a {
display: inline-block;
padding-block: var(--gv-space-1);
border-block-end: 2px solid transparent;
font-family: var(--gv-font-mono);
font-size: var(--gv-text-ui);
font-weight: var(--gv-weight-medium);
color: var(--gv-text-dim);
text-decoration: none;
}
.gv-nav a:hover { color: var(--gv-text); }
.gv-nav a[aria-current] { color: var(--gv-text); border-block-end-color: var(--gv-accent-fill); }
/* Optional menu button for long navigation. Needs genval.js; without the
script the links simply stay visible. */
.gv-nav-toggle { display: none; }
@media (max-width: 59.99rem) {
.gv-js .gv-nav-toggle { display: inline-flex; }
.gv-js .gv-nav[data-gv-collapsed] { display: none; }
}
/* Footer */
.gv-footer {
margin-block-start: var(--gv-space-8);
padding-block: var(--gv-space-7) var(--gv-space-6);
border-block-start: 1px solid var(--gv-border);
font-size: var(--gv-text-small);
color: var(--gv-text-dim);
}
.gv-footer-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--gv-space-6);
}
.gv-footer-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
gap: var(--gv-space-6) var(--gv-space-5);
}
.gv-footer-cols :is(h2, h3) {
margin: 0 0 var(--gv-space-2);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-medium);
letter-spacing: 0;
color: var(--gv-text-faint);
}
.gv-footer-cols ul { margin: 0; padding: 0; list-style: none; }
.gv-footer-cols li { margin: 0; padding-block: 0.2em; }
.gv-footer-cols a { font-family: var(--gv-font-mono); font-size: var(--gv-text-sm); text-decoration: none; }
.gv-footer-cols a:hover { text-decoration: underline; }
.gv-footer-legal {
margin-block-start: var(--gv-space-6);
padding-block-start: var(--gv-space-4);
border-block-start: 1px solid var(--gv-border-soft);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-xs);
color: var(--gv-text-faint);
}
@media (min-width: 60rem) {
.gv-footer-grid { grid-template-columns: var(--gv-key-col) minmax(0, 1fr); column-gap: var(--gv-space-6); }
}
/* Band: a full-width strip. Put a .gv-page inside it. */
.gv-band { background: var(--gv-bg); color: var(--gv-text); }
.gv-band--card { background: var(--gv-bg-card); }
.gv-band--night { color-scheme: dark; }
.gv-band--green {
color-scheme: light;
--gv-bg: var(--gv-green-field);
--gv-bg-card: var(--gv-white);
--gv-text: var(--gv-ink);
--gv-text-dim: var(--gv-ink);
--gv-text-faint: var(--gv-ink);
--gv-accent: var(--gv-ink);
--gv-accent-hover: var(--gv-ink);
--gv-focus: var(--gv-ink);
--gv-border: color-mix(in srgb, var(--gv-ink) 30%, transparent);
--gv-border-soft: color-mix(in srgb, var(--gv-ink) 22%, transparent);
--gv-border-strong: var(--gv-ink);
--gv-solid: var(--gv-ink);
--gv-on-solid: var(--gv-off-white);
}
.gv-band > .gv-page > .gv-entry:first-child { border-block-start: 0; }
:is(.gv-band, main:has(> .gv-band:last-child)) + .gv-footer { margin-block-start: 0; border-block-start: 0; }
/* Flow: the vertical rhythm inside an entry body and inside long-form text */
:is(.gv-entry-body, .gv-prose) > * { margin-block: 0; }
:is(.gv-entry-body, .gv-prose) > * + * { margin-block-start: var(--gv-flow, var(--gv-space-5)); }
:is(.gv-entry-body, .gv-prose) > :is(p, ul, ol) + :is(p, ul, ol) { margin-block-start: var(--gv-space-4); }
:is(.gv-entry-body, .gv-prose) > :is(h1, h2, h3, h4, h5, h6) + :is(p, ul, ol) { margin-block-start: var(--gv-space-3); }
:is(.gv-entry-body, .gv-prose) > * + h2 { margin-block-start: var(--gv-space-7); }
:is(.gv-entry-body, .gv-prose) > * + :is(h3, h4) { margin-block-start: var(--gv-space-6); }
:is(.gv-entry-body, .gv-prose) > .gv-hero-eyebrow + * { margin-block-start: var(--gv-space-2); }
:is(.gv-entry-body, .gv-prose) > .gv-hero-title + .gv-hero-subtitle { margin-block-start: var(--gv-space-4); }
:is(.gv-entry-body, .gv-prose) > .gv-disclosure + .gv-disclosure { margin-block-start: 0; }
:is(.gv-entry-body, .gv-prose) > :is(p, ul, ol, dl:not(.gv-details), blockquote, h3, h4, h5, h6) { max-width: var(--gv-measure); }
:is(.gv-entry-body, .gv-prose) > :is(h1, h2) { max-width: 30ch; }
/* Small layout tools */
.gv-stack { display: flex; flex-direction: column; gap: var(--gv-stack, var(--gv-space-4)); }
.gv-stack > * { margin-block: 0; }
.gv-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gv-cluster, var(--gv-space-3)); }
.gv-cluster--between { justify-content: space-between; }
.gv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gv-grid-min, 16rem)), 1fr));
gap: var(--gv-space-5);
}
.gv-cols-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gv-space-6); }
@media (min-width: 48rem) {
.gv-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gv-measure { max-width: var(--gv-measure); }
}
/* ==========================================================================
5. COMPONENTS
Class names follow the Kanonak look bands where the two overlap
(hero, details, badge, chip, breadcrumb, section, stat, timeline).
========================================================================== */
@layer gv.components {
/* ---- Logo ------------------------------------------------------------
Inline SVG so it follows the theme: ink + green on light, off-white +
bright green on dark. The logo is the only two-tone word. */
.gv-logo { display: block; width: auto; height: 1.75rem; overflow: visible; }
.gv-logo-gen { fill: var(--gv-text); }
.gv-logo-val { fill: var(--gv-accent-fill); }
.gv-logo--one-color :is(.gv-logo-gen, .gv-logo-val) { fill: currentColor; }
/* ---- Type ------------------------------------------------------------ */
.gv-display {
font-size: var(--gv-text-display);
line-height: 1.04;
letter-spacing: -0.03em;
}
.gv-lead {
font-size: var(--gv-text-lead);
line-height: 1.45;
}
.gv-label {
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-medium);
letter-spacing: 0;
color: var(--gv-text-dim);
}
/* ---- Identifier ------------------------------------------------------
publisher/package@version/name. The name, the part that resolves, takes
the green, the way "val" does in the logo. */
.gv-id {
font-family: var(--gv-font-mono);
font-size: 0.86em;
font-weight: var(--gv-weight-medium);
font-feature-settings: "calt" 0;
color: var(--gv-text-faint);
text-decoration: none;
overflow-wrap: anywhere;
}
.gv-id-pub { color: var(--gv-text-dim); }
.gv-id-pkg { color: var(--gv-text); }
.gv-id-ver { color: var(--gv-text-dim); }
.gv-id-name { color: var(--gv-accent); font-weight: var(--gv-weight-bold); }
a.gv-id:hover { color: var(--gv-text-faint); }
a.gv-id:hover .gv-id-name { text-decoration: underline; text-underline-offset: 0.2em; }
/* ---- Hero ------------------------------------------------------------ */
.gv-hero-eyebrow {
display: block;
margin-block-end: var(--gv-space-2);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-medium);
color: var(--gv-accent);
}
.gv-hero-title { margin-block-end: var(--gv-space-4); }
.gv-hero-subtitle {
max-width: 44ch;
margin-block-end: var(--gv-space-5);
font-size: var(--gv-text-lead);
line-height: 1.45;
color: var(--gv-text-dim);
}
.gv-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gv-space-3); }
/* ---- Details: a sheet of key and value pairs ------------------------- */
.gv-details {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: baseline;
gap: 0 var(--gv-space-5);
}
.gv-details > div { display: contents; }
.gv-details dt {
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-medium);
line-height: 1.5;
color: var(--gv-text-dim);
}
.gv-details dd { min-width: 0; max-width: var(--gv-measure); margin: 0 0 var(--gv-space-3); }
.gv-details dd:last-child { margin-block-end: 0; }
@media (min-width: 36rem) {
.gv-details { grid-template-columns: fit-content(14rem) minmax(0, 1fr); row-gap: var(--gv-space-3); }
.gv-details dd { margin: 0; }
.gv-details--ruled { row-gap: 0; align-items: stretch; }
.gv-details--ruled :is(dt, dd) { padding-block: var(--gv-space-3); border-block-start: 1px solid var(--gv-border-soft); }
.gv-details--ruled dt { padding-block-start: calc(var(--gv-space-3) + 0.4em); }
}
/* ---- Badge and chip --------------------------------------------------- */
.gv-badge {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.15em 0.55em;
border-radius: var(--gv-radius-sm);
background: var(--gv-badge-bg);
color: var(--gv-badge-fg);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-xs);
font-weight: var(--gv-weight-medium);
line-height: 1.5;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
}
a.gv-badge:hover { color: var(--gv-accent-hover); }
.gv-badge--neutral { background: color-mix(in srgb, var(--gv-text) 8%, transparent); color: var(--gv-text-dim); }
.gv-badge--warn { background: color-mix(in srgb, var(--gv-warn) 12%, transparent); color: var(--gv-warn); }
.gv-badge--invalid { background: color-mix(in srgb, var(--gv-invalid) 12%, transparent); color: var(--gv-invalid); }
.gv-badge--info { background: color-mix(in srgb, var(--gv-info) 12%, transparent); color: var(--gv-info); }
/* A state badge says its state with a mark as well as a color */
.gv-badge--valid::before, .gv-badge--invalid::before {
content: "";
width: 0.8em;
height: 0.8em;
flex: none;
background: currentColor;
-webkit-mask: var(--_mark) center / contain no-repeat;
mask: var(--_mark) center / contain no-repeat;
}
.gv-badge--valid::before { --_mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); }
.gv-badge--invalid::before { --_mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5l9 9m0-9l-9 9' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E"); }
.gv-chip {
display: inline-flex;
align-items: baseline;
gap: 0.5em;
padding: 0.2em 0.6em;
border: 1px solid var(--gv-border);
border-radius: var(--gv-radius-sm);
background: var(--gv-bg-card);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-xs);
line-height: 1.5;
text-decoration: none;
white-space: nowrap;
}
.gv-chip-key { color: var(--gv-text-faint); }
.gv-chip-val { color: var(--gv-text); font-weight: var(--gv-weight-medium); }
a.gv-chip:hover { border-color: var(--gv-accent); color: inherit; }
/* ---- Card: one discrete thing you can open ---------------------------- */
.gv-card {
display: flex;
flex-direction: column;
gap: var(--gv-space-2);
padding: var(--gv-space-4);
border: 1px solid var(--gv-border);
border-radius: var(--gv-radius);
background: var(--gv-bg-card);
color: var(--gv-text);
text-decoration: none;
}
.gv-card-title {
margin: 0;
font-family: var(--gv-font-display);
font-size: var(--gv-text-h4);
font-weight: var(--gv-weight-bold);
line-height: 1.3;
letter-spacing: 0;
}
.gv-card-text { margin: 0; font-size: var(--gv-text-small); line-height: 1.5; color: var(--gv-text-dim); }
.gv-card-foot { margin-block-start: auto; padding-block-start: var(--gv-space-2); font-size: var(--gv-text-sm); }
.gv-card > :is(.gv-badge, .gv-chip, .gv-label) { align-self: flex-start; }
a.gv-card { transition: border-color var(--gv-duration) var(--gv-ease); }
a.gv-card:hover { border-color: var(--gv-accent); color: var(--gv-text); }
/* ---- Code -------------------------------------------------------------
Works on a bare or on a
with a .gv-code-head and a inside. */
.gv-code {
border: 1px solid var(--gv-border);
border-radius: var(--gv-radius);
background: var(--gv-bg-card);
}
pre.gv-code, .gv-code > pre { padding: var(--gv-space-4); overflow-x: auto; }
.gv-code > pre { margin: 0; }
.gv-code code { color: var(--gv-text-dim); }
.gv-code code:is(.language-bash, .language-sh, .language-shell, .language-text) { color: var(--gv-text); }
.gv-code-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gv-space-3);
min-height: 2.5rem;
margin: 0;
padding: var(--gv-space-1) var(--gv-space-2) var(--gv-space-1) var(--gv-space-4);
border-block-end: 1px solid var(--gv-border-soft);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
color: var(--gv-text-dim);
}
.gv-copy {
padding: 0.25em 0.65em;
border: 1px solid transparent;
border-radius: var(--gv-radius-sm);
background: none;
font-family: var(--gv-font-mono);
font-size: var(--gv-text-xs);
font-weight: var(--gv-weight-medium);
color: var(--gv-text-dim);
}
.gv-copy:hover { border-color: var(--gv-border-strong); color: var(--gv-text); }
.gv-copy[data-copied] { color: var(--gv-valid); }
/* Syntax colors: the classes the Kanonak highlighter writes, and Prism's */
:is(.kan-tok-comments, .token.comment, .token.prolog) { color: var(--gv-tok-comments); }
:is(.kan-tok-key, .token.key, .token.atrule, .token.property, .token.tag) { color: var(--gv-tok-key); font-weight: var(--gv-weight-medium); }
:is(.kan-tok-string, .token.string, .token.attr-value) { color: var(--gv-tok-string); }
:is(.kan-tok-number, .token.number) { color: var(--gv-tok-number); }
:is(.kan-tok-boolean, .token.boolean, .token.null) { color: var(--gv-tok-boolean); }
:is(.kan-tok-keyword, .token.keyword, .token.important, .token.function) { color: var(--gv-tok-keyword); }
:is(.kan-tok-operator, .token.operator) { color: var(--gv-tok-operator); }
:is(.kan-tok-punctuation, .token.punctuation) { color: var(--gv-tok-punctuation); }
:is(.kan-tok-flag, .token.parameter, .token.variable) { color: var(--gv-tok-flag); }
/* A single command to copy */
.gv-cmd {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--gv-space-3);
max-width: 100%;
padding: var(--gv-space-1) var(--gv-space-2) var(--gv-space-1) var(--gv-space-3);
border: 1px solid var(--gv-border);
border-radius: var(--gv-radius);
background: var(--gv-bg-card);
}
.gv-cmd code {
padding: 0;
background: none;
font-size: var(--gv-text-sm);
white-space: nowrap;
overflow-x: auto;
}
.gv-cmd code::before { content: "$ "; color: var(--gv-text-faint); user-select: none; }
/* ---- Table ------------------------------------------------------------ */
.gv-table-wrap { overflow-x: auto; }
.gv-table-wrap:focus-visible { outline-offset: 4px; }
.gv-table :is(td, th).gv-num, .gv-num {
font-family: var(--gv-font-mono);
font-size: 0.9em;
font-variant-numeric: tabular-nums;
text-align: end;
white-space: nowrap;
}
.gv-table tbody th { color: var(--gv-text); }
.gv-table--compact :is(th, td) { padding-block: var(--gv-space-1); }
.gv-table--card {
border: 1px solid var(--gv-border);
border-radius: var(--gv-radius);
background: var(--gv-bg-card);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.gv-table--card :is(th, td) { padding-inline: var(--gv-space-4); }
.gv-table--card :is(th, td):last-child { padding-inline-end: var(--gv-space-4); }
.gv-table--card thead th { background: var(--gv-bg-elev); }
.gv-table--card tbody tr:last-child :is(th, td) { border-block-end: 0; }
/* ---- Callout ---------------------------------------------------------- */
.gv-callout {
--_tone: var(--gv-text-dim);
padding: var(--gv-space-3) var(--gv-space-4);
border-inline-start: 3px solid var(--_tone);
border-radius: 0 var(--gv-radius) var(--gv-radius) 0;
background: color-mix(in srgb, var(--_tone) 8%, var(--gv-bg-card));
font-size: var(--gv-text-small);
line-height: 1.55;
}
.gv-callout-title {
margin: 0 0 var(--gv-space-1);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-bold);
letter-spacing: 0;
color: var(--_tone);
}
.gv-callout--valid { --_tone: var(--gv-valid); }
.gv-callout--warn { --_tone: var(--gv-warn); }
.gv-callout--invalid { --_tone: var(--gv-invalid); }
.gv-callout--info { --_tone: var(--gv-info); }
/* ---- Steps: only for things that really happen in order --------------- */
.gv-steps { padding: 0; list-style: none; counter-reset: gv-step; }
.gv-steps > li {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
gap: 0 var(--gv-space-3);
margin: 0;
padding-block: var(--gv-space-4);
border-block-start: 1px solid var(--gv-border-soft);
counter-increment: gv-step;
}
.gv-steps > li:first-child { border-block-start: 0; padding-block-start: 0; }
.gv-steps > li::before {
content: counter(gv-step);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-bold);
line-height: 1.9;
color: var(--gv-text-faint);
font-variant-numeric: tabular-nums;
}
.gv-steps > li > * { grid-column: 2; }
.gv-steps > li > :is(h3, h4) { margin-block-end: var(--gv-space-1); font-size: var(--gv-text-h4); letter-spacing: 0; line-height: 1.5; }
/* ---- Timeline: dated points, newest marked ----------------------------- */
.gv-timeline { padding: 0; list-style: none; }
.gv-timeline > li {
position: relative;
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: var(--gv-space-3);
margin: 0;
padding: 0 0 var(--gv-space-5) var(--gv-space-5);
border-inline-start: 1px solid var(--gv-border-strong);
}
.gv-timeline > li:last-child { padding-block-end: 0; }
.gv-timeline > li::before {
content: "";
position: absolute;
inset: 0.55em auto auto -0.3125rem;
width: 0.5625rem;
height: 0.5625rem;
border: 1px solid var(--gv-border-strong);
background: var(--gv-bg);
}
.gv-timeline > li[aria-current]::before { border-color: var(--gv-accent-fill); background: var(--gv-accent-fill); }
.gv-timeline-date { font-family: var(--gv-font-mono); font-size: var(--gv-text-sm); line-height: 1.9; color: var(--gv-text-faint); }
.gv-timeline-title { margin: 0; font-size: var(--gv-text-h4); letter-spacing: 0; line-height: 1.5; }
.gv-timeline > li > div > p { margin: 0; font-size: var(--gv-text-small); color: var(--gv-text-dim); }
/* ---- Stat row --------------------------------------------------------- */
.gv-stat-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
gap: var(--gv-space-4) var(--gv-space-6);
}
.gv-stat { display: flex; flex-direction: column; gap: var(--gv-space-1); margin: 0; padding-block-start: var(--gv-space-3); border-block-start: 1px solid var(--gv-border-strong); }
.gv-stat-label { font-family: var(--gv-font-mono); font-size: var(--gv-text-sm); font-weight: var(--gv-weight-medium); color: var(--gv-text-dim); }
.gv-stat-val { margin: 0; font-family: var(--gv-font-mono); font-size: var(--gv-text-h2); font-weight: var(--gv-weight-bold); line-height: 1.1; letter-spacing: var(--gv-tracking-tight); font-variant-numeric: tabular-nums; }
/* ---- Figure ----------------------------------------------------------- */
.gv-figure > :is(img, video, picture, svg) { width: 100%; border: 1px solid var(--gv-border); border-radius: var(--gv-radius); background: var(--gv-bg-card); }
}
@layer gv.components {
/* ---- Button -----------------------------------------------------------
The primary button is ink, not green. Green is kept for what is valid,
current or resolved; .gv-button--accent is for the one action on a view
that confirms something. */
.gv-button {
--_bg: var(--gv-solid);
--_fg: var(--gv-on-solid);
--_bd: var(--gv-solid);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
min-height: 2.5rem;
padding: 0.45em 1em;
border: 1px solid var(--_bd);
border-radius: var(--gv-radius);
background: var(--_bg);
color: var(--_fg);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-ui);
font-weight: var(--gv-weight-medium);
line-height: 1.25;
letter-spacing: 0;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background-color var(--gv-duration) var(--gv-ease), border-color var(--gv-duration) var(--gv-ease);
}
.gv-button:hover {
--_bg: color-mix(in srgb, var(--gv-solid) 82%, var(--gv-bg));
--_bd: var(--_bg);
color: var(--_fg);
}
.gv-button:active { translate: 0 1px; }
.gv-button--secondary { --_bg: transparent; --_fg: var(--gv-text); --_bd: var(--gv-border-strong); }
.gv-button--secondary:hover { --_bg: color-mix(in srgb, var(--gv-text) 6%, transparent); --_bd: var(--gv-text); }
.gv-button--quiet { --_bg: transparent; --_fg: var(--gv-text); --_bd: transparent; padding-inline: 0.65em; }
.gv-button--quiet:hover { --_bg: color-mix(in srgb, var(--gv-text) 8%, transparent); --_bd: transparent; }
.gv-button--accent { --_bg: var(--gv-accent-fill); --_fg: var(--gv-on-accent); --_bd: var(--gv-accent-fill); }
.gv-button--accent:hover { --_bg: color-mix(in srgb, var(--gv-accent-fill) 86%, var(--gv-text)); }
.gv-button--sm { min-height: 2rem; padding: 0.25em 0.7em; font-size: var(--gv-text-sm); }
.gv-button--lg { min-height: 3rem; padding: 0.6em 1.3em; font-size: 1rem; }
.gv-button:is(:disabled, [aria-disabled="true"]) { opacity: 0.5; cursor: not-allowed; }
.gv-button svg { width: 1.1em; height: 1.1em; flex: none; }
@media (pointer: coarse) {
.gv-button { min-height: 2.75rem; }
}
/* A link that leaves the site says so */
a[rel~="external"]::after {
content: "";
display: inline-block;
width: 0.62em;
height: 0.62em;
margin-inline-start: 0.3em;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5h7.5V9M10.5 1.5L1.5 10.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 1.5h7.5V9M10.5 1.5L1.5 10.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ---- Forms ------------------------------------------------------------ */
.gv-field { display: flex; flex-direction: column; gap: var(--gv-space-1); margin: 0 0 var(--gv-space-4); }
.gv-field-label, .gv-field > label {
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
font-weight: var(--gv-weight-medium);
color: var(--gv-text);
}
.gv-field-hint { margin: 0; font-size: var(--gv-text-small); line-height: 1.45; color: var(--gv-text-dim); }
.gv-field-error {
margin: 0;
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
line-height: 1.45;
color: var(--gv-invalid);
}
.gv-input, .gv-select, .gv-textarea {
width: 100%;
min-height: 2.5rem;
padding: 0.4em 0.7em;
border: 1px solid var(--gv-border-strong);
border-radius: var(--gv-radius);
background: var(--gv-bg-card);
color: var(--gv-text);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-ui);
line-height: 1.5;
transition: border-color var(--gv-duration) var(--gv-ease);
}
.gv-textarea { min-height: 6.5rem; resize: vertical; }
.gv-select {
appearance: none;
padding-inline-end: 2.2em;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 1.05em center, right 0.7em center;
background-size: 0.36em 0.36em;
background-repeat: no-repeat;
}
:is(.gv-input, .gv-select, .gv-textarea)::placeholder { color: var(--gv-text-faint); opacity: 1; }
:is(.gv-input, .gv-select, .gv-textarea):hover { border-color: var(--gv-text); }
:is(.gv-input, .gv-select, .gv-textarea):focus-visible { outline-offset: 0; border-color: var(--gv-focus); }
:is(.gv-input, .gv-select, .gv-textarea):disabled { opacity: 0.55; background: var(--gv-bg-elev); }
:is(.gv-input, .gv-select, .gv-textarea)[aria-invalid="true"] { border-color: var(--gv-invalid); }
@media (pointer: coarse) {
.gv-input, .gv-select, .gv-textarea { min-height: 2.75rem; font-size: 1rem; }
}
/* Checkbox and radio: the browser's own controls, in the brand green */
.gv-check {
display: flex;
align-items: flex-start;
gap: var(--gv-space-2);
margin: 0 0 var(--gv-space-2);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-ui);
line-height: 1.5;
}
.gv-check input:not(.gv-switch) {
width: 1.1rem;
height: 1.1rem;
flex: none;
margin: 0.2em 0 0;
accent-color: var(--gv-accent-fill);
}
/* Switch: */
.gv-switch {
appearance: none;
position: relative;
width: 2.5rem;
height: 1.5rem;
flex: none;
margin: 0;
border: 1px solid var(--gv-border-strong);
border-radius: var(--gv-radius-full);
background: var(--gv-bg-card);
cursor: pointer;
transition: background-color var(--gv-duration) var(--gv-ease), border-color var(--gv-duration) var(--gv-ease);
}
.gv-switch::before {
content: "";
position: absolute;
inset: 0.1875rem auto 0.1875rem 0.1875rem;
width: 1rem;
border-radius: var(--gv-radius-full);
background: var(--gv-border-strong);
transition: translate var(--gv-duration) var(--gv-ease), background-color var(--gv-duration) var(--gv-ease);
}
.gv-switch:checked { border-color: var(--gv-accent-fill); background: var(--gv-accent-fill); }
.gv-switch:checked::before { translate: 1rem 0; background: var(--gv-on-accent); }
/* ---- Breadcrumb: publisher / package / resource ------------------------ */
.gv-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 0 var(--gv-space-2);
margin: 0;
padding: 0;
list-style: none;
font-family: var(--gv-font-mono);
font-size: var(--gv-text-sm);
color: var(--gv-text-faint);
}
.gv-breadcrumb li { display: flex; gap: var(--gv-space-2); margin: 0; }
.gv-breadcrumb li + li::before { content: "/"; color: var(--gv-border-strong); }
.gv-breadcrumb a { color: var(--gv-text-dim); text-decoration: none; }
.gv-breadcrumb a:hover { color: var(--gv-accent); }
.gv-breadcrumb [aria-current] { color: var(--gv-text); font-weight: var(--gv-weight-medium); }
/* ---- Contents list (fits the key column) ------------------------------ */
.gv-toc { margin: 0; padding: 0; list-style: none; font-family: var(--gv-font-mono); font-size: var(--gv-text-sm); }
.gv-toc li { margin: 0; }
.gv-toc a {
display: block;
padding: 0.25em 0 0.25em var(--gv-space-3);
border-inline-start: 2px solid var(--gv-border);
color: var(--gv-text-dim);
text-decoration: none;
}
.gv-toc a:hover { color: var(--gv-text); border-inline-start-color: var(--gv-border-strong); }
.gv-toc a[aria-current] { color: var(--gv-text); border-inline-start-color: var(--gv-accent-fill); }
/* ---- Previous and next ------------------------------------------------ */
.gv-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gv-space-4); }
.gv-pager a {
display: flex;
flex-direction: column;
gap: var(--gv-space-1);
padding: var(--gv-space-3) var(--gv-space-4);
border: 1px solid var(--gv-border);
border-radius: var(--gv-radius);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-ui);
font-weight: var(--gv-weight-medium);
text-decoration: none;
}
.gv-pager a:hover { border-color: var(--gv-accent); color: var(--gv-text); }
.gv-pager a[rel="next"] { grid-column: 2; text-align: end; }
.gv-pager small { font-size: var(--gv-text-xs); font-weight: var(--gv-weight-regular); color: var(--gv-text-faint); }
/* ---- Tabs (needs genval.js) ------------------------------------------- */
.gv-tabs-list {
display: flex;
gap: var(--gv-space-5);
margin: 0 0 var(--gv-space-4);
border-block-end: 1px solid var(--gv-border);
overflow-x: auto;
}
.gv-tabs-list [role="tab"] {
margin-block-end: -1px;
padding: var(--gv-space-2) 0;
border: 0;
border-block-end: 2px solid transparent;
background: none;
font-family: var(--gv-font-mono);
font-size: var(--gv-text-ui);
font-weight: var(--gv-weight-medium);
color: var(--gv-text-dim);
white-space: nowrap;
}
.gv-tabs-list [role="tab"]:hover { color: var(--gv-text); }
.gv-tabs-list [role="tab"][aria-selected="true"] { color: var(--gv-text); border-block-end-color: var(--gv-accent-fill); }
/* ---- Disclosure: ---------------------- */
.gv-disclosure { margin-block-end: 0; border-block-end: 1px solid var(--gv-border); }
.gv-disclosure:first-of-type { border-block-start: 1px solid var(--gv-border); }
.gv-disclosure > summary {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--gv-space-4);
padding-block: var(--gv-space-3);
font-family: var(--gv-font-mono);
font-size: var(--gv-text-ui);
font-weight: var(--gv-weight-medium);
list-style: none;
}
.gv-disclosure > summary::-webkit-details-marker { display: none; }
.gv-disclosure > summary::after { content: "+"; font-weight: var(--gv-weight-regular); color: var(--gv-text-faint); }
.gv-disclosure[open] > summary::after { content: "−"; }
.gv-disclosure > :not(summary) { max-width: var(--gv-measure); }
.gv-disclosure > :last-child:not(summary) { margin-block-end: var(--gv-space-4); }
/* ---- Dialog: the browser's own