/* ==========================================================================
Groningen Rapid Chess - design tokens
--------------------------------------------------------------------------
Eén gedeeld bestand voor de promotiesite (groningenrapidchess.nl) en het
wedstrijdgedeelte (live.groningenrapidchess.nl). Laad dit als eerste
stylesheet, daarna je eigen CSS. Werkt met elk framework.
Palet: Groningse vlag. Wit vlak, diepblauw als drager, rood en groen
als accent. Groen is de kleur van het toernooilogo en van "speelt nu",
rood van deadlines en waarschuwingen.
========================================================================== */
:root {
/* --- Kleur: basis ----------------------------------------------------- */
--grc-blue-900: #06255c;
--grc-blue-700: #0b3f91; /* primair, tekst op wit haalt AAA */
--grc-blue-500: #1a5fc8; /* links, hover */
--grc-blue-100: #dde7f8; /* vlakken, tabelstrepen */
--grc-blue-050: #f2f6fd;
--grc-red-700: #a3132a;
--grc-red-500: #cf1029; /* vlagrood, accent en deadlines */
--grc-red-100: #fadfe3;
--grc-green-700: #0f6335;
--grc-green-500: #17823b; /* vlaggroen, logo en live-status */
--grc-green-100: #dcf0e2;
--grc-white: #ffffff;
--grc-ink: #14181f; /* lopende tekst, geen zuiver zwart */
--grc-ink-soft: #4a5464; /* bijschriften */
--grc-line: #d3d9e3; /* randen en scheidingslijnen */
/* --- Kleur: semantisch ------------------------------------------------ */
--grc-bg: var(--grc-white);
--grc-bg-sunken: var(--grc-blue-050);
--grc-text: var(--grc-ink);
--grc-text-muted: var(--grc-ink-soft);
--grc-primary: var(--grc-blue-700);
--grc-primary-hover: var(--grc-blue-900);
--grc-accent: var(--grc-red-500);
--grc-live: var(--grc-green-500);
--grc-border: var(--grc-line);
--grc-focus: var(--grc-red-500);
/* --- Typografie -------------------------------------------------------
Archivo voor koppen en interface, Source Serif 4 voor lopende tekst.
Google Fonts regel voor in de :
--------------------------------------------------------------------- */
--grc-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
--grc-font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
--grc-font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace;
--grc-step--1: 0.875rem;
--grc-step-0: 1.0625rem;
--grc-step-1: 1.3125rem;
--grc-step-2: 1.625rem;
--grc-step-3: clamp(1.9rem, 1.4rem + 1.8vw, 2.5rem);
--grc-step-4: clamp(2.4rem, 1.5rem + 3.6vw, 4rem);
--grc-leading-tight: 1.1;
--grc-leading-body: 1.6;
--grc-tracking-display: -0.015em;
--grc-measure: 68ch;
/* --- Ruimte, vorm, diepte --------------------------------------------- */
--grc-space-1: 0.25rem;
--grc-space-2: 0.5rem;
--grc-space-3: 0.75rem;
--grc-space-4: 1rem;
--grc-space-5: 1.5rem;
--grc-space-6: 2rem;
--grc-space-7: 3rem;
--grc-space-8: 4.5rem;
--grc-radius-sm: 2px;
--grc-radius-md: 4px;
--grc-radius-pill: 999px;
--grc-shadow-raised: 0 1px 0 var(--grc-border);
--grc-container: 68rem;
--grc-container-narrow: 44rem;
}
/* --------------------------------------------------------------------------
Basisprimitieven. Alles heeft het voorvoegsel grc- zodat het nergens
botst. Overschrijf gerust, maar laat de tokens hierboven intact.
-------------------------------------------------------------------------- */
.grc-page {
margin: 0;
background: var(--grc-bg);
color: var(--grc-text);
font-family: var(--grc-font-body);
font-size: var(--grc-step-0);
line-height: var(--grc-leading-body);
-webkit-text-size-adjust: 100%;
}
.grc-container {
width: min(100% - 2 * var(--grc-space-4), var(--grc-container));
margin-inline: auto;
}
.grc-container--narrow {
width: min(100% - 2 * var(--grc-space-4), var(--grc-container-narrow));
margin-inline: auto;
}
.grc-display,
.grc-h1,
.grc-h2,
.grc-h3 {
font-family: var(--grc-font-display);
font-weight: 700;
line-height: var(--grc-leading-tight);
letter-spacing: var(--grc-tracking-display);
color: var(--grc-blue-900);
margin: 0 0 var(--grc-space-4);
text-wrap: balance;
}
.grc-display { font-size: var(--grc-step-4); }
.grc-h1 { font-size: var(--grc-step-3); }
.grc-h2 { font-size: var(--grc-step-2); }
.grc-h3 { font-size: var(--grc-step-1); font-weight: 500; }
.grc-lead {
font-size: var(--grc-step-1);
color: var(--grc-text-muted);
max-width: var(--grc-measure);
}
.grc-prose { max-width: var(--grc-measure); }
.grc-prose p { margin: 0 0 var(--grc-space-4); }
.grc-link {
color: var(--grc-blue-500);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.grc-link:hover { color: var(--grc-primary-hover); }
:where(.grc-page) :focus-visible {
outline: 3px solid var(--grc-focus);
outline-offset: 2px;
}
/* Knoppen ---------------------------------------------------------------- */
.grc-btn {
display: inline-block;
font-family: var(--grc-font-display);
font-size: var(--grc-step-0);
font-weight: 700;
line-height: 1;
padding: 0.8em 1.4em;
border: 2px solid var(--grc-primary);
border-radius: var(--grc-radius-md);
background: var(--grc-primary);
color: var(--grc-white);
text-decoration: none;
cursor: pointer;
}
.grc-btn:hover { background: var(--grc-primary-hover); border-color: var(--grc-primary-hover); }
.grc-btn--secondary {
background: transparent;
color: var(--grc-primary);
}
.grc-btn--secondary:hover { background: var(--grc-blue-100); }
.grc-btn--accent {
background: var(--grc-accent);
border-color: var(--grc-accent);
}
.grc-btn--accent:hover { background: var(--grc-red-700); border-color: var(--grc-red-700); }
.grc-btn[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Statusmarkering, bijvoorbeeld ronde die nu loopt of inschrijving vol ---- */
.grc-tag {
display: inline-flex;
align-items: center;
gap: var(--grc-space-2);
font-family: var(--grc-font-display);
font-size: var(--grc-step--1);
font-weight: 500;
padding: 0.25em 0.7em;
border-radius: var(--grc-radius-pill);
background: var(--grc-blue-100);
color: var(--grc-blue-900);
}
.grc-tag--live { background: var(--grc-green-100); color: var(--grc-green-700); }
.grc-tag--deadline { background: var(--grc-red-100); color: var(--grc-red-700); }
/* Tabellen: speelschema, deelnemerslijst, standen ------------------------ */
.grc-table {
width: 100%;
border-collapse: collapse;
font-family: var(--grc-font-display);
font-size: var(--grc-step--1);
font-variant-numeric: tabular-nums;
}
.grc-table th,
.grc-table td {
text-align: left;
padding: var(--grc-space-3) var(--grc-space-3);
border-bottom: 1px solid var(--grc-border);
}
.grc-table th {
font-weight: 700;
color: var(--grc-blue-900);
border-bottom: 2px solid var(--grc-primary);
}
.grc-table tbody tr:nth-child(even) { background: var(--grc-bg-sunken); }
.grc-table td.grc-num { text-align: right; }
/* Formulieren ------------------------------------------------------------ */
.grc-field { display: block; margin-bottom: var(--grc-space-4); }
.grc-field > span {
display: block;
font-family: var(--grc-font-display);
font-size: var(--grc-step--1);
font-weight: 500;
margin-bottom: var(--grc-space-1);
}
.grc-input,
.grc-select {
width: 100%;
font: inherit;
padding: 0.6em 0.7em;
border: 1px solid var(--grc-border);
border-radius: var(--grc-radius-md);
background: var(--grc-white);
color: var(--grc-text);
}
.grc-input:focus,
.grc-select:focus { border-color: var(--grc-primary); }
.grc-error { color: var(--grc-red-700); font-size: var(--grc-step--1); }
/* Vlagmotief: dunne band van rood, wit, blauw met groene lijn. Bruikbaar
als scheiding tussen secties of onder de header. ----------------------- */
.grc-flagrule {
height: 6px;
border: 0;
margin: 0;
background: linear-gradient(
to right,
var(--grc-red-500) 0 25%,
var(--grc-green-500) 25% 27%,
var(--grc-blue-700) 27% 50%,
var(--grc-green-500) 50% 52%,
var(--grc-blue-700) 52% 75%,
var(--grc-green-500) 75% 77%,
var(--grc-red-500) 77% 100%
);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}