/* ═══════════════════════════════════════════════════════════════ DORSKY LAB — University of Utah Brand System Colors: Utah Red #BE0000, Black #000000, White #FFFFFF, Zion Cinder Cone #707271 WCAG 2.1 AA Compliant — Audited against U of U Web Essentials ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=Source+Sans+3:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400&display=swap'); /* ── DESIGN TOKENS ── */ :root { /* U of U Brand Colors */ --utah-red: #BE0000; --utah-red-dark: #8B0000; --utah-red-light: rgba(190,0,0,0.08); --utah-red-mid: rgba(190,0,0,0.15); --black: #000000; --white: #FFFFFF; --cinder: #707271; --cinder-light: #9A9998; --cinder-dim: rgba(112,114,113,0.2); /* Backgrounds */ --bg: #FFFFFF; --bg-2: #F5F4F2; --bg-3: #EDECEA; --bg-dark: #0F0E0E; --bg-dark-2: #1A1918; /* Typography — WCAG AA compliant contrast pairs */ --text: #111110; /* on white: passes 4.5:1 */ --text-2: #3A3836; /* on white: passes 4.5:1 */ --text-muted: #595857; /* UPDATED from #707271 — passes 4.5:1 on white */ --text-light: #595857; /* UPDATED — passes 4.5:1 on white */ /* Borders */ --border: rgba(0,0,0,0.08); --border-2: rgba(0,0,0,0.14); --border-red: rgba(190,0,0,0.2); /* Fonts — U of U brand compliant, tested for accessibility */ --serif: 'Source Serif 4', Georgia, serif; --sans: 'Source Sans 3', system-ui, sans-serif; --mono: 'Source Code Pro', monospace; /* Layout */ --nav-h: 94px; --max-w: 1280px; --ease: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); /* Focus ring — visible, high-contrast for keyboard users */ --focus-ring: 3px solid #005FCC; --focus-offset: 2px; } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { background: var(--bg); color: var(--text); font-family: var(--sans); font-weight: 400; /* min body text size 16px per U of U guidelines */ font-size: 1rem; line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* Links that look like text must be distinguishable — underline on inline links */ p a, li a { text-decoration: underline; } button { cursor: pointer; border: none; background: none; font-family: inherit; } img { max-width: 100%; display: block; } /* ── SKIP LINK (Keyboard Accessibility — WCAG 2.4.1) ── */ .skip-link { position: absolute; top: -100%; left: 0; background: var(--utah-red); color: var(--white); padding: 12px 24px; font-family: var(--sans); font-size: 0.9rem; font-weight: 600; z-index: 9999; text-decoration: none; border-bottom-right-radius: 4px; /* Visible when focused */ transition: top 0.2s; } .skip-link:focus { top: 0; outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* ── SCREEN READER ONLY (visually hidden but accessible) ── */ .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; } /* ── GLOBAL FOCUS STYLES (Keyboard Accessibility — WCAG 2.4.7) ── */ /* Every interactive element must have a visible focus state */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* Remove default outline only if we supply our own */ :focus:not(:focus-visible) { outline: none; } /* Buttons and links get specific focus styling */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--bg-2); } ::-webkit-scrollbar-thumb { background: var(--utah-red); } /* ── REDUCED MOTION (WCAG 2.3.3 / Designer Guideline: Motion Sickness) ── */ /* Pause all animations for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } .reveal, .rq-item, .pub-card, .research-area-card, .pi-card { opacity: 1 !important; transform: none !important; } } /* ═══════════════════════════════════════════════════════════════ NAVIGATION — Clean two-row dark header Uses
+