/* ============================================================================
Go Nimbly Design System — Base styles + components
----------------------------------------------------------------------------
Requires gonimbly-tokens.css to be loaded first (it defines every var(--gn-*)).
This file sets element defaults and ships the core component classes:
.gn-btn, .gn-card, .gn-nav, .gn-highlight, .gn-input, .gn-tag, .gn-kpi.
Fonts:
- Faculty Glyphic (display) is on Google Fonts — add to your :
- ABC Monument Grotesk is a paid Dinamo license. If you hold it, self-host the
WOFF2 files and uncomment the @font-face block below. Otherwise the token
fallback (Space Grotesk / system-ui) renders close to on-brand.
========================================================================== */
/* If self-hosting licensed Monument Grotesk, drop the files in /fonts and uncomment:
@font-face {
font-family: "ABC Monument Grotesk";
src: url("/fonts/ABCMonumentGrotesk-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "ABC Monument Grotesk";
src: url("/fonts/ABCMonumentGrotesk-Medium.woff2") format("woff2");
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: "ABC Monument Grotesk Mono";
src: url("/fonts/ABCMonumentGroteskMono-Regular.woff2") format("woff2");
font-weight: 400; font-style: normal; font-display: swap;
}
*/
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background-color: var(--gn-color-paper);
color: var(--gn-color-text);
font-family: var(--gn-font-body);
font-size: var(--gn-text-body);
font-weight: var(--gn-weight-regular);
line-height: var(--gn-leading-normal);
letter-spacing: var(--gn-tracking-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- Headings -- ABC Monument Grotesk, title/sentence case -----------------
Brand rule: regular headlines use Monument Grotesk in title case. Faculty
Glyphic is reserved for the .gn-display-* classes below (hero, ALL CAPS).
For the website look (Faculty Glyphic headings), load gonimbly-web-style.css. */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--gn-space-4);
font-family: var(--gn-font-body);
font-weight: var(--gn-weight-medium);
line-height: var(--gn-leading-snug);
letter-spacing: var(--gn-tracking-snug);
color: var(--gn-color-text);
}
h1 { font-size: var(--gn-text-h1); line-height: var(--gn-leading-tight); }
h2 { font-size: var(--gn-text-h2); }
h3 { font-size: var(--gn-text-h3); }
h4 { font-size: var(--gn-text-h4); }
h5 { font-size: var(--gn-text-h5); }
h6 { font-size: var(--gn-text-h6); }
/* Display -- Faculty Glyphic, reserved for hero moments. Brand rule: ALWAYS ALL CAPS, kept short. */
.gn-display-1 { font-family: var(--gn-font-display); font-size: var(--gn-text-display-1); line-height: var(--gn-leading-none); letter-spacing: var(--gn-tracking-tight); text-transform: uppercase; }
.gn-display-2 { font-family: var(--gn-font-display); font-size: var(--gn-text-display-2); line-height: var(--gn-leading-tight); letter-spacing: var(--gn-tracking-tight); text-transform: uppercase; }
.gn-display-3 { font-family: var(--gn-font-display); font-size: var(--gn-text-display-3); line-height: var(--gn-leading-tight); letter-spacing: var(--gn-tracking-tight); text-transform: uppercase; }
.gn-subhead { font-family: var(--gn-font-body); font-size: var(--gn-text-subhead-1); font-weight: var(--gn-weight-medium); line-height: var(--gn-leading-subhead); }
p { margin: 0 0 var(--gn-space-4); }
.gn-lead { font-size: var(--gn-text-body-lg); line-height: var(--gn-leading-relaxed); }
small, .gn-small { font-size: var(--gn-text-body-sm); }
.gn-muted { color: var(--gn-color-gray-500); }
.gn-eyebrow {
font-family: var(--gn-font-mono);
font-size: var(--gn-text-label-2);
font-weight: var(--gn-weight-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--gn-color-gray-500);
}
code, kbd, samp, pre { font-family: var(--gn-font-mono); font-size: 0.9em; }
a { color: var(--gn-color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 0.12em; }
/* ---- Focus-visible -- accessible focus ring everywhere ------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: var(--gn-focus-width) solid var(--gn-focus-color);
outline-offset: var(--gn-focus-offset);
border-radius: var(--gn-radius-2);
}
/* ---- Text highlight -- the marker-underlay heading accent ----------------- */
.gn-highlight {
background-color: var(--gn-color-green-light);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 0 0.1em;
}
.gn-highlight--purple { background-color: var(--gn-color-purple-light); }
.gn-highlight--yellow { background-color: var(--gn-color-yellow-light); }
.gn-highlight--blue { background-color: var(--gn-color-blue-light); }
/* ---- Buttons ------------------------------------------------------------- */
.gn-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--gn-space-2);
height: var(--gn-button-height-md);
padding: 0 var(--gn-space-5);
border: var(--gn-border-width) solid var(--gn-color-text);
border-radius: var(--gn-radius-1);
background-color: var(--gn-color-brand);
color: var(--gn-color-text);
font-family: var(--gn-font-body);
font-size: var(--gn-text-label-1);
font-weight: var(--gn-weight-medium);
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.05s ease;
}
.gn-btn:hover { background-color: var(--gn-color-brand-hover); }
.gn-btn:active { transform: translateY(1px); }
.gn-btn--secondary {
background-color: var(--gn-color-paper);
color: var(--gn-color-ink);
border-color: var(--gn-color-gray-300);
}
.gn-btn--secondary:hover { background-color: var(--gn-color-gray-100); }
.gn-btn--ghost {
background-color: transparent;
border-color: transparent;
color: var(--gn-color-ink);
text-decoration: underline;
}
.gn-btn--ghost:hover { background-color: transparent; color: var(--gn-color-link); }
.gn-btn--lg { height: var(--gn-button-height-lg); padding: 0 var(--gn-space-7); font-size: var(--gn-text-subhead-2); }
.gn-btn--pill { border-radius: var(--gn-radius-pill); }
.gn-btn:disabled, .gn-btn[aria-disabled="true"] {
background-color: var(--gn-color-gray-200);
border-color: var(--gn-color-gray-300);
color: var(--gn-color-gray-500);
cursor: not-allowed;
}
/* ---- Cards (flat, no heavy shadow) --------------------------------------- */
.gn-card {
background-color: var(--gn-color-white);
border: var(--gn-border-width) solid var(--gn-color-gray-300);
border-radius: var(--gn-radius-3);
padding: var(--gn-space-6);
}
.gn-card--tinted { background-color: var(--gn-color-gray-200); border-color: transparent; }
.gn-card--dark { background-color: var(--gn-color-ink); border-color: transparent; color: var(--gn-color-paper); }
.gn-card--dark h1, .gn-card--dark h2, .gn-card--dark h3,
.gn-card--dark h4, .gn-card--dark h5, .gn-card--dark h6 { color: var(--gn-color-paper); }
/* ---- Tag / badge --------------------------------------------------------- */
.gn-tag {
display: inline-flex;
align-items: center;
gap: var(--gn-space-1);
padding: var(--gn-space-1) var(--gn-space-3);
border-radius: var(--gn-radius-pill);
background-color: var(--gn-color-green-light);
color: var(--gn-color-ink);
font-size: var(--gn-text-label-2);
font-weight: var(--gn-weight-medium);
line-height: 1;
}
.gn-tag--error { background-color: var(--gn-color-error); color: var(--gn-color-white); }
.gn-tag--neutral { background-color: var(--gn-color-gray-100); }
/* ---- KPI / stat ---------------------------------------------------------- */
.gn-kpi { display: flex; flex-direction: column; gap: var(--gn-space-2); }
.gn-kpi__value { font-family: var(--gn-font-display); font-size: var(--gn-text-h3); line-height: var(--gn-leading-none); }
.gn-kpi__label { font-family: var(--gn-font-mono); font-size: var(--gn-text-label-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gn-color-gray-500); }
/* ---- Forms --------------------------------------------------------------- */
.gn-input, .gn-select, .gn-textarea {
width: 100%;
padding: var(--gn-space-3) var(--gn-space-4);
border: var(--gn-border-width) solid var(--gn-color-gray-300);
border-radius: var(--gn-radius-2);
background-color: var(--gn-color-white);
color: var(--gn-color-ink);
font-family: var(--gn-font-body);
font-size: var(--gn-text-body);
line-height: var(--gn-leading-normal);
}
.gn-input::placeholder, .gn-textarea::placeholder { color: var(--gn-color-gray-500); }
.gn-label { display: block; margin-bottom: var(--gn-space-2); font-size: var(--gn-text-label-1); font-weight: var(--gn-weight-medium); }
.gn-input[aria-invalid="true"], .gn-textarea[aria-invalid="true"] { border-color: var(--gn-color-error); }
/* ---- Nav ----------------------------------------------------------------- */
.gn-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--gn-space-5);
height: var(--gn-nav-height);
padding: 0 var(--gn-site-margin);
background-color: var(--gn-color-paper);
}
.gn-nav__brand { display: inline-flex; align-items: center; font-family: var(--gn-font-body); font-weight: var(--gn-weight-medium); font-size: var(--gn-text-subhead-1); color: var(--gn-color-text); text-decoration: none; }
.gn-nav__brand img, .gn-nav__brand svg { height: 1.5rem; width: auto; display: block; }
.gn-nav__links { display: flex; align-items: center; gap: var(--gn-space-5); }
.gn-nav__links a { color: var(--gn-color-ink); text-decoration: none; font-size: var(--gn-text-label-1); }
.gn-nav__links a:hover { color: var(--gn-color-link); }
/* ---- Layout helpers ------------------------------------------------------ */
.gn-container { width: 100%; max-width: var(--gn-max-width); margin-inline: auto; padding-inline: var(--gn-site-margin); }
.gn-container--narrow { max-width: var(--gn-max-width-content); }
.gn-section { padding-block: var(--gn-section); }
.gn-section--lg { padding-block: var(--gn-section-lg); }
.gn-section--dark { background-color: var(--gn-color-ink); color: var(--gn-color-paper); }
.gn-grid { display: grid; gap: var(--gn-space-6); grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.gn-divider { border: 0; border-top: var(--gn-border-width) solid var(--gn-color-gray-300); margin-block: var(--gn-space-6); }
/* ---- Tables (reports lean on these) -------------------------------------- */
.gn-table { width: 100%; border-collapse: collapse; font-size: var(--gn-text-body-sm); }
.gn-table th, .gn-table td { padding: var(--gn-space-3) var(--gn-space-4); text-align: left; border-bottom: var(--gn-border-width) solid var(--gn-color-gray-300); }
.gn-table th { font-family: var(--gn-font-mono); font-size: var(--gn-text-label-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gn-color-gray-500); }
.gn-table tbody tr:hover { background-color: var(--gn-color-gray-100); }
/* ---- Logo ----------------------------------------------------------------
Use the SVGs in assets/logos/. Pick the variant by background:
toner-black on light, paper-white/pure-white on dark/photo. Keep clear space
of at least the logo-mark height around the logo; min width ~96px (mark ~24px). */
.gn-logo { display: inline-block; height: 2rem; width: auto; }
.gn-logo--sm { height: 1.5rem; }
.gn-logo--lg { height: 3rem; }
/* ---- Charts / data-viz ----------------------------------------------------
Brand chart system: a 40px grid, text containers with a 1px Toner-Black
stroke and a near-square 0.5px radius (labels have no radius), 8px gaps
between rows, 40px between sections. Color signals meaning — use it sparingly
(~10%); structure carries the rest. */
.gn-chartgrid { display: grid; gap: var(--gn-space-3); } /* ~8px+ row rhythm */
.gn-chartgrid--sections { gap: 2.5rem; } /* 40px between sections */
.gn-chartbox {
border: var(--gn-border-width) solid var(--gn-color-black);
border-radius: 0.5px; /* brand chart radius */
padding: var(--gn-space-3) var(--gn-space-4);
background-color: var(--gn-color-white);
}
.gn-chartbox--accent { background-color: var(--gn-color-green-light); } /* coloured = headings / key info */
.gn-chartbox__label { font-family: var(--gn-font-mono); font-size: var(--gn-text-label-2); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gn-color-gray-500); border-radius: 0; }
.gn-chartrow { display: flex; align-items: center; gap: var(--gn-space-2); }
.gn-chart-divider { border: 0; border-top: var(--gn-border-width) dotted var(--gn-color-black); margin-block: var(--gn-space-2); } /* dotted = info divider between rows */