/* =============================================================
Arctic Research at UMCES CBL — Main Stylesheet
arctic-styles.css
Accessibility: WCAG 2.1 Level AA compliant
(with WCAG 2.2 AA enhancements noted in comments)
ADA Title II compliance deadline: April 24, 2026
WCAG principles addressed:
1. Perceivable — color contrast ≥4.5:1 normal text, ≥3:1 large text
and UI components; no color-only information cues
2. Operable — full keyboard navigation; visible focus indicators;
skip-to-content link; sticky nav accounts for focus
visibility (WCAG 2.2 2.4.11)
3. Understandable — logical heading order; descriptive link text in HTML;
consistent navigation; lang attribute on
4. Robust — semantic HTML5 elements; ARIA landmarks and labels;
valid markup; screen-reader-only utility class
============================================================= */
/* ── Reset & Base ── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* ── Design Tokens ── */
/*
All color pairs below meet WCAG 1.4.3 Contrast (Minimum) AA:
- Normal text on backgrounds: ≥ 4.5:1
- Large text (≥18pt / ≥14pt bold) on backgrounds: ≥ 3:1
- UI component borders and focus indicators: ≥ 3:1 (1.4.11)
Verified ratios (approximate):
--text-dark (#1a2535) on --bg-card (#ffffff) = 14.5:1 ✓
--text-mid (#3a4a5c) on --bg-card (#ffffff) = 8.2:1 ✓
--text-muted (#5a6e82) on --bg-page (#f4f8fc) = 4.6:1 ✓ (raised from original)
--navy-light (#185FA5) on --bg-card (#ffffff) = 5.1:1 ✓
White (#fff) on --navy (#042C53) = 14.9:1 ✓
White (#fff) on --navy-mid (#0C447C) = 11.3:1 ✓
--ice-mid (#B5D4F4) on --navy (#042C53) = 6.8:1 ✓
--teal (#0F6E56) on --bg-card (#ffffff) = 5.6:1 ✓
--teal (#0F6E56) on --teal-light (#E1F5EE)= 4.7:1 ✓
--navy-mid (#0C447C) on --ice (#E6F1FB) = 7.9:1 ✓
*/
:root {
--navy: #042C53;
--navy-mid: #0C447C;
--navy-light: #185FA5;
--ice: #E6F1FB;
--ice-mid: #B5D4F4;
--ice-dark: #85B7EB;
--teal: #0F6E56;
--teal-light: #E1F5EE;
--text-dark: #1a2535;
--text-mid: #3a4a5c;
--text-muted: #5a6e82; /* raised from #6b7f94 to pass 4.5:1 on white */
--border: #dce8f2;
--bg-page: #f4f8fc;
--bg-card: #ffffff;
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--shadow-sm: 0 1px 3px rgba(4,44,83,0.07), 0 1px 2px rgba(4,44,83,0.05);
/* Focus ring — meets WCAG 1.4.11 (3:1 non-text contrast) and
WCAG 2.2 2.4.11 (focus not fully obscured) / 2.4.12 (focus appearance) */
--focus-ring: 3px solid #005FCC;
--focus-offset: 3px;
--font-serif: 'Source Serif 4', Georgia, serif;
--font-sans: 'DM Sans', system-ui, sans-serif;
--max-width: 960px;
}
/* ── Global Defaults ── */
html {
font-size: 16px;
scroll-behavior: smooth;
/* WCAG 2.1 3.1.1 — Language of Page: set on in HTML */
}
body {
font-family: var(--font-sans);
background: var(--bg-page);
color: var(--text-dark);
/* WCAG 1.4.8 / 1.4.12 — Text spacing: avoid fixed pixel line-heights on
text containers so users can override spacing without loss of content */
line-height: 1.7;
min-height: 100vh;
}
/* Respect user preference for reduced motion (WCAG 2.3.3 AAA / best practice) */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
a {
color: var(--navy-light);
text-decoration: underline; /* WCAG 1.4.1 — do not rely on color alone to identify links */
text-underline-offset: 3px;
}
a:hover {
color: var(--navy);
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
display: block;
/* All ![]()
tags must carry meaningful alt="" text — enforced in HTML */
}
/* =============================================================
WCAG 2.4.1 — BYPASS BLOCKS (Skip Navigation)
A visible "skip to main content" link lets keyboard and
screen-reader users jump past repeated navigation.
============================================================= */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
background: var(--navy);
color: #ffffff;
padding: 0.75rem 1.25rem;
font-size: 1rem;
font-weight: 500;
border-radius: 0 0 var(--radius-md) var(--radius-md);
z-index: 9999;
text-decoration: none;
border: 3px solid var(--ice-mid);
}
/* Becomes visible when focused via keyboard (Tab key) */
.skip-link:focus {
top: 0;
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
/* =============================================================
GLOBAL FOCUS STYLES
WCAG 2.4.7 — Focus Visible (AA): keyboard focus indicator must be visible
WCAG 2.4.11 — Focus Not Obscured (AA, new in 2.2): at least part of
focused component must be visible (not fully hidden by sticky header)
WCAG 2.4.12 — Focus Appearance (AA, new in 2.2): indicator ≥2px thick,
contrast ≥3:1 between focused/unfocused states
============================================================= */
/* Apply to ALL focusable elements */
*:focus {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
/* Remove only for mouse users via :focus-visible;
keyboard users always see the outline */
*:focus:not(:focus-visible) {
outline: none;
}
*:focus-visible {
outline: var(--focus-ring);
outline-offset: var(--focus-offset);
}
/* =============================================================
SCREEN READER ONLY UTILITY
Hides content visually but keeps it available to assistive technologies.
Use for: skip links when not focused, supplementary labels, etc.
============================================================= */
.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;
}
/* =============================================================
TOP IDENTITY BAR
Role: banner (landmark) — set via in HTML
============================================================= */
#top-bar {
background: var(--navy);
padding: 0.5rem 1.5rem;
display: flex;
align-items: center;
gap: 1rem;
}
#top-bar img {
height: 48px;
width: auto;
}
#top-bar .site-title {
font-family: var(--font-sans);
font-weight: 300;
font-size: 1rem;
color: var(--ice-mid); /* 6.8:1 on --navy ✓ */
letter-spacing: 0.02em;
}
/* =============================================================
NAVIGATION
Role: navigation (landmark) — set via