/* Design tokens + reset + typography. */
:root[data-theme="dark"] {
--color-bg: #0f1115;
--color-surface: #171a21;
--color-text: #e7e9ee;
--color-muted: #9aa1ad;
--color-accent: #fd8d3d;
--color-border: #262b36;
/* Frosted drawer glass, tuned for a dark backdrop. */
--drawer-glass: rgba(23, 26, 33, 0.72);
--drawer-glass-border: rgba(255, 255, 255, 0.12);
}
:root[data-theme="light"] {
--color-bg: #f5f5f7;
--color-surface: #ffffff;
--color-text: #1d1d1f;
--color-muted: #6e6e73;
--color-accent: #005ebd;
--color-border: #d9d9de;
/* Frosted drawer glass, tuned for a light backdrop. */
--drawer-glass: rgba(255, 255, 255, 0.70);
--drawer-glass-border: rgba(255, 255, 255, 0.55);
}
/* Optional per-project drawer accent. `openDrawer()` writes the two values as
scoped custom properties and marks only the modes present, so a missing
light/dark value falls back to the normal site accent for that theme. */
:root[data-theme="light"] .drawer[data-project-accent-light] {
/* Project palettes are authored as brand colors, not guaranteed text
colors. Darken them in light mode so headings/links retain AA contrast. */
--color-accent: color-mix(in srgb, var(--project-accent-light) 72%, #000);
}
:root[data-theme="dark"] .drawer[data-project-accent-dark] {
/* The inverse adjustment keeps even saturated reds/greens readable against
the dark drawer while preserving the project's hue. */
--color-accent: color-mix(in srgb, var(--project-accent-dark) 82%, #fff);
}
:root {
--color-bg: #0f1115;
--color-surface: #171a21;
--color-text: #e7e9ee;
--color-muted: #9aa1ad;
--color-accent: #fd8d3d;
--color-border: #262b36;
--drawer-glass: rgba(23, 26, 33, 0.72);
--drawer-glass-border: rgba(255, 255, 255, 0.12);
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--space-5: 4rem;
--space-6: 6rem;
--measure: 65ch;
--radius: 12px;
--transition: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
:root {
/* --nav-bg-color-rgb: 117,136,153;
--nav-bg-color-rgb: 185,195,204;
--nav-bg-color-rgb-dark-mode: 148,156,163;
--test-bg-color: orange;
--rgb-bg-color: 255,0,0;
--primary-text: #2e353a;
--primary-text-rbg: 45,52,58;
--secondary-text: #657894;
--secondary-text-rgb:101,120,148;
--tertiary:;
--quaternary:;
--quinary:;
--senary:;
--septenary:;
--octonary:;
--nonary:;
--denary:;*/
--body-bg-light: 235,238,240;
--body-bg-dark: 5,15,22;
--nav-bg-light: 200,207,213;
--nav-bg-dark: 26,41,52;
/* Light Mode */
--primary-text-color-dark: 26,41,52; /*dark blue*/
--secondary-text-color-light:84,147,202; /*light blue*/
/* Dark Mode */
--primary-text-color-light: 200,207,213; /*light grey*/
--secondary-text-color-dark:165,112,62;/*orange*/
/* Page Specifics */
--back-fourth-button-colors-light: 200,207,213; /*light grey*/
--back-fourth-button-colors-dark: 26,41,52; /*dark blue*/
--dark-grey-primary: 10,28,35;
--dark-grey-secondary: 26,32,37;
--dark-grey-tertiary: 47,53,57;
--dark-grey-quaternary: 75,83,89;
--dark-grey-quinary: 103,111,118;
--light-blue-primaryDarker:31,72,113;
--light-blue-primary:42,96,151;
--light-blue-secondaryDarker:55,113,170;
--light-blue-secondary:61,126,189;
--light-blue-tertiary:84,147,202;/*same as light mode secondary*/
--light-blue-quaternary:112,168,215;
--light-blue-quinary:152,195,230;
--light-blue-quinaryLighter:178,210,236;
--orange-primaryDarker:66,35,9;
--orange-primary:88,47,12;
--orange-secondaryDarker:117,71,31;
--orange-secondary:130,79,34;
--orange-tertiary:165,112,62;/*same as dark mode secondary*/
--orange-quaternary:201,149,99;
--orange-quinary:244,201,158;
--orange-quinaryLighter:247,215,182;
/* old obe colors */
--old-obe-lighter: 218, 245, 151;
--old-obe-light: 199, 237, 106;
--old-obe-primary: 167, 208, 66;
--old-obe-dark: 139, 182, 33;
--old-obe-darker: 106, 145, 12;
--old-obe-darkest: 50, 71, 0;
/* CRL Colors */
--crl-lighter: 39,199,251;
--crl-light: 6,193,255;
--crl-primary: 0,176,234;
--crl-dark: 0,122,162;
--crl-darker: 0,95,127;
/* CRH Colors */
--crh-lighter: 28,63,111;
--crh-light: 10,44,90;
--crh-primary: 4,30,66;
--crh-dark: 1,18,42;
--crh-darker: 0,8,19;
/* OBE KPS Colors */
--kps-lighter: 34,134,104;
--kps-light: 14,111,82;
--kps-primary: 0,89,62;
--kps-dark: 0,64,45;
--kps-darker: 0,37,26;
/* MSUM Red */
--msum-red-lighter: 228,87,109;
--msum-red-light: 208,46,72;
--msum-red-primary: 174,19,43;
--msum-red-dark: 142,1,23;
--msum-red-darker: 103,0,16;
/* MSUM 'Grey' */
--msum-grey-lighter: 196,185,176;
--msum-grey-light: 150,139,130;
--msum-grey-primary: 105,96,89;
--msum-grey-dark: 45,40,37;
--msum-grey-darker: 50,37,27;
/* Koin Colors */
--koin-lighter: 140,152,182;
--koin-light: 95,111,150;
--koin-primary: 60,79,123;
--koin-dark: 37,56,100;
--koin-darkest: 15,32,71;
/* Sweetwater Colors */
--sweetwater-blue-lighter: 17, 159, 251;
--sweetwater-blue-light: 3, 156, 255;
--sweetwater-blue-primary: 0, 116, 191;
--sweetwater-blue-dark: 0, 88, 145;
--sweetwater-blue-darkest: 0, 69, 113;
--sweetwater-red-lighter: 252, 114, 121;
--sweetwater-red-light: 249, 73, 82;
--sweetwater-red-primary: 237, 28, 38;
--sweetwater-red-dark: 192, 7, 16;
--sweetwater-red-darkest: 152, 0, 8;
/* Inline SVG tokens. A literal `#` inside an unencoded data URI starts a
fragment, so hex fills must be written `%23` or the image silently fails
to load (path-only marks have none, which is why most of these don't). */
--svg-crh: url("../assets/images/logos/crh.svg");
--svg-crl: url("../assets/images/logos/crl.svg");
--svg-msum: url("../assets/images/logos/msum.svg");
--svg-obeCrh: url("../assets/images/logos/obeCrh.svg");
--svg-obeKps: url("../assets/images/logos/obeKps.svg");
--svg-koin: url("../assets/images/logos/koin.svg");
--svg-emmy: url("../assets/images/logos/emmy.svg");
--svg-sweetwater: url("../assets/images/logos/sweetwater.svg");
/* The old site's video lower-third monogram (the interlocking-R "navImage").
Painted as a currentColor mask like every other token here, so the two fill
classes it shipped with are irrelevant — shape only. */
--svg-rkr: url("../assets/images/logos/rkr.svg");
--svg-rkr-color: url("../assets/images/logos/rkr-color.svg");
--svg-rkr-color-dark-orange: url("../assets/images/logos/rkr-color-dark-orange.svg");
--svg-rkr-color-light: url("../assets/images/logos/rkr-color-light.svg");
--svg-rkr-square: url("../assets/images/logos/rkr-square.svg");
--svg-rkr-name-square: url("../assets/images/logos/rkr-name-square.svg");
--svg-rkr-name-squareb: url("../assets/images/logos/rkr-name-squareb.svg");
--svg-rkr-name-squarec: url("../assets/images/logos/rkr-name-squarec.svg");
--svg-video-icon: url('data:image/svg+xml,');
--svg-audio-icon: url('data:image/svg+xml,');
--svg-image-icon: url('data:image/svg+xml,');
--svg-text-icon: url('data:image/svg+xml,');
--svg-link-icon: url('data:image/svg+xml,');
--svg-about-name: url("../assets/images/logos/about-name.svg");
--svg-rkrname-icon: url("../assets/images/logos/rkrname-icon.svg");
--svg-play-button: url('data:image/svg+xml,');
--svg-pdf-icon: url('data:image/svg+xml,');
--svg-arrow-down: url('data:image/svg+xml,');
--svg-pillars: url('data:image/svg+xml,');
--svg-nodes: url('data:image/svg+xml,');
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
scroll-behavior: smooth;
/* Offset anchor jumps so the fixed header doesn't cover section tops. */
scroll-padding-top: 5rem;
scrollbar-gutter: stable;
}
body {
background: var(--color-bg);
color: var(--color-text);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3 {
line-height: 1.15;
font-weight: 650;
letter-spacing: -0.01em;
}
h2 {
font-size: clamp(1.6rem, 3vw, 2.4rem);
}
h3 {
font-size: 1.2rem;
}
a {
color: var(--color-accent);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* p { max-width: var(--measure); } */
img {
max-width: 100%;
display: block;
}
:focus-visible {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
border-radius: 4px;
}
/* Per-section themes (set via manifest `theme` → data-theme). Each just
remaps the accent + a subtle surface tint; sections stay on the same bg. */
:root[data-theme="light"] [data-theme="blue"] {
--color-accent: #005ebd;
--theme-tint: #005ebd18;
}
:root[data-theme="dark"] [data-theme="blue"] {
--color-accent: #fd8d3d;
--theme-tint: #fd8d3d22;
}
:root[data-theme="light"] [data-theme="violet"] {
--color-accent: #7040b8;
--theme-tint: #7040b818;
}
:root[data-theme="dark"] [data-theme="violet"] {
--color-accent: #bb9af7;
--theme-tint: #bb9af722;
}
:root[data-theme="light"] [data-theme="amber"] {
--color-accent: #805100;
--theme-tint: #80510018;
}
:root[data-theme="dark"] [data-theme="amber"] {
--color-accent: #e0af68;
--theme-tint: #e0af6822;
}
:root[data-theme="light"] [data-theme="green"] {
--color-accent: #397122;
--theme-tint: #39712218;
}
:root[data-theme="dark"] [data-theme="green"] {
--color-accent: #9ece6a;
--theme-tint: #9ece6a22;
}
[data-theme="neutral"] {
--theme-tint: transparent;
}
/* Kill motion when reduced-motion is resolved (OS pref or manual toggle). */
[data-motion-resolved="reduced"] * {
animation-duration: 0.001ms !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
/* Visually hidden but exposed to assistive tech (headings kept for landmark
labelling / nav targets without painting them). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}