/* * * ______/\\\\\\\\\\\_________________________________________/\\\\\\\\\\\\\__________________________/\\\_______________________________ * _____\/////\\\///_________________________________________\/\\\/////////\\\_______________________\/\\\_______________________________ * _________\/\\\____________________________________________\/\\\_______\/\\\_______________________\/\\\_______________________________ * _________\/\\\_________/\\\\\________/\\\\\\\\____________\/\\\\\\\\\\\\\\___/\\\\\\\\\___________\/\\\______/\\\\\\\\___/\\/\\\\\\\__ * _________\/\\\_______/\\\///\\\____/\\\/////\\\___________\/\\\/////////\\\_\////////\\\_____/\\\\\\\\\____/\\\/////\\\_\/\\\/////\\\_ * _________\/\\\______/\\\__\//\\\__/\\\\\\\\\\\____________\/\\\_______\/\\\___/\\\\\\\\\\___/\\\////\\\___/\\\\\\\\\\\__\/\\\___\///__ * __/\\\___\/\\\_____\//\\\__/\\\__\//\\///////_____________\/\\\_______\/\\\__/\\\/////\\\__\/\\\__\/\\\__\//\\///////___\/\\\_________ * _\//\\\\\\\\\_______\///\\\\\/____\//\\\\\\\\\\___________\/\\\\\\\\\\\\\/__\//\\\\\\\\/\\_\//\\\\\\\/\\__\//\\\\\\\\\\_\/\\\_________ * __\/////////__________\/////_______\//////////____________\/////////////_____\////////\//___\///////\//____\//////////__\///__________ * * To reviewers: Thanks for looking. Reach out via the contact form if you'd like to connect. * * joebader.com - Resume Site * * Structure: Design system (CSS variables) at the top, then layout and components. * Theme switching works by toggling data-theme on ; we override variables in * [data-theme="light"]. All colors/spacing use variables so one change updates everywhere. */ /* ============================================ Design System - Dark Theme (default) ============================================ :root = the element. We also target [data-theme="dark"] so both apply when no theme is set (dark is default) or when the user has explicitly chosen dark. CSS custom properties (variables) use --name. Referenced with var(--name). */ :root, [data-theme="dark"] { /* Colors - muted, low-contrast palette */ --color-bg: #0f0f12; /* RGB values stored separately so we can use them in rgba(rgb, 0.8) for transparency. rgba() needs numbers, not a hex string. */ --color-bg-rgb: 15, 15, 18; --color-bg-elevated: #16161a; --color-text: #c8c8cd; --color-text-muted: #a0a0a8; --color-accent: #7fa3d4; --color-accent-rgb: 127, 163, 212; --color-accent-hover: #8fb4e0; --color-accent-cyan: #6b9a9e; --color-accent-amber: #a8926b; --color-accent-violet: #8b7ca8; --color-accent-emerald: #6b9a7a; --color-border: rgba(255, 255, 255, 0.05); --color-focus: var(--color-accent); /* Form surfaces */ --input-bg: rgba(255, 255, 255, 0.04); --input-bg-hover: rgba(255, 255, 255, 0.06); --input-border: rgba(255, 255, 255, 0.1); --input-border-hover: rgba(255, 255, 255, 0.15); /* Body gradients - layered for depth. radial-gradient(shape size at position, color stops). Multiple gradients stack; we use several with low opacity for a subtle effect. */ --gradient-1: radial-gradient(ellipse 100% 80% at 50% -30%, rgba(20, 184, 166, 0.28), transparent 50%); --gradient-2: radial-gradient(ellipse 70% 50% at 100% 20%, rgba(99, 102, 241, 0.22), transparent 60%); --gradient-3: radial-gradient(ellipse 60% 50% at 0% 60%, rgba(6, 182, 212, 0.2), transparent 55%); --gradient-4: radial-gradient(ellipse 50% 40% at 80% 100%, rgba(139, 92, 246, 0.18), transparent 50%); /* Form feedback */ --color-success-bg: rgba(107, 154, 122, 0.1); --color-success-border: var(--color-accent-emerald); --color-error-bg: rgba(180, 100, 100, 0.1); --color-error-text: #b88a8a; /* Hero name gradient */ --hero-name-mid: #b0b0b8; /* scroll-margin-top on sections: when you scroll to a section (e.g. #summary), the browser offsets the scroll position so content isn't hidden under the sticky header. */ --scroll-margin: calc(var(--header-height) + var(--space-lg)); /* Typography - font stack: try first font, fall back to next. system-ui = OS default. */ --font-sans: "DM Sans", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", monospace; --font-display: "Exo 2", var(--font-sans); /* Spacing - uniform 8px scale */ --space-xs: 0.25rem; /* 4px - tight */ --space-sm: 0.5rem; /* 8px - related elements */ --space-md: 1rem; /* 16px - within blocks */ --space-lg: 1.5rem; /* 24px - heading to content */ --space-xl: 2rem; /* 32px - between blocks */ --space-2xl: 2.5rem; /* 40px - footer, main, hero */ --space-3xl: 3rem; /* 48px - between sections */ /* Layout */ --max-width: 720px; --nav-max-width: 980px; --header-height: 4rem; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; } /* ============================================ Light Theme ============================================ When has data-theme="light", these values override the :root ones. We only redefine what changes; variables we don't touch (e.g. --max-width) keep their values. */ [data-theme="light"] { --color-bg: #f5f5f7; --color-bg-rgb: 245, 245, 247; --color-bg-elevated: #ffffff; --color-text: #1a1a1e; --color-text-muted: #4a4a52; --color-accent: #3d6ba3; --color-accent-rgb: 61, 107, 163; --color-accent-hover: #4a7ab8; --color-accent-cyan: #4a8a8e; --color-accent-amber: #8a724b; --color-accent-violet: #6b5c88; --color-accent-emerald: #4a7a5a; --color-border: rgba(0, 0, 0, 0.08); --color-focus: var(--color-accent); --input-bg: rgba(0, 0, 0, 0.04); --input-bg-hover: rgba(0, 0, 0, 0.06); --input-border: rgba(0, 0, 0, 0.12); --input-border-hover: rgba(0, 0, 0, 0.2); --gradient-1: radial-gradient(ellipse 100% 80% at 50% -30%, rgba(20, 184, 166, 0.15), transparent 50%); --gradient-2: radial-gradient(ellipse 70% 50% at 100% 20%, rgba(99, 102, 241, 0.12), transparent 60%); --gradient-3: radial-gradient(ellipse 60% 50% at 0% 60%, rgba(6, 182, 212, 0.1), transparent 55%); --gradient-4: radial-gradient(ellipse 50% 40% at 80% 100%, rgba(139, 92, 246, 0.1), transparent 50%); --color-success-bg: rgba(74, 122, 90, 0.12); --color-success-border: var(--color-accent-emerald); --color-error-bg: rgba(160, 80, 80, 0.12); --color-error-text: #a06a6a; --hero-name-mid: #5a5a60; } /* ============================================ Reset & Base ============================================ */ /* box-sizing: border-box means width/height include padding and border. Without it, adding padding would make elements wider than you expect. * applies to all elements. */ *, *::before, *::after { box-sizing: border-box; } /* scroll-behavior: smooth makes anchor links and scrollIntoView animate instead of jump. */ html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--color-text); background-color: var(--color-bg); /* Multiple background images stack; first listed is on top. */ background-image: var(--gradient-1), var(--gradient-2), var(--gradient-3), var(--gradient-4); -webkit-font-smoothing: antialiased; /* Softer text rendering on macOS. */ /* transition: when theme switches, colors animate instead of snapping. */ transition: background-color var(--transition-base), color var(--transition-base); } /* ============================================ Skip Link (Accessibility) ============================================ A "skip to main content" link for keyboard/screen reader users. It's off-screen (top: -100%) until focused, then moves into view. First tab focuses it; Enter jumps to #main. Required for WCAG compliance. */ .skip-link { position: absolute; top: -100%; /* Off-screen; only visible when :focus moves it. */ left: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--color-accent); color: white; text-decoration: none; font-weight: 600; z-index: 100; border-radius: 4px; transition: top var(--transition-fast); /* :focus fires when the element receives focus (e.g. Tab). We use :focus-visible elsewhere to avoid showing focus rings on mouse click; here we want it always. */ &:focus { top: var(--space-md); outline: 2px solid var(--color-accent); outline-offset: 2px; } } /* ============================================ Site Header (Sticky) ============================================ position: sticky = element scrolls with the page until it hits top: 0, then stays fixed. Unlike position: fixed, it doesn't leave a gap in the layout. */ .site-header { position: sticky; top: 0; z-index: 50; /* Above content; below modals (typically 100+). */ /* rgba(var(--color-bg-rgb), 0.8) = use our RGB values with 80% opacity. Needed because we can't do opacity on hex. */ background: rgba(var(--color-bg-rgb), 0.8); /* backdrop-filter blurs content behind the element. -webkit- for Safari. */ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--color-border); transition: background var(--transition-base), border-color var(--transition-base); /* .scrolled is added by JS when user has scrolled. Slightly more opaque for contrast. */ &.scrolled { background: rgba(var(--color-bg-rgb), 0.92); } } .nav { display: flex; align-items: center; justify-content: space-between; /* Logo left, links right. */ max-width: var(--nav-max-width); margin: 0 auto; padding: var(--space-md) var(--space-xl); height: var(--header-height); /* Media query: apply these rules only when viewport is 768px or narrower. */ @media (max-width: 768px) { padding: var(--space-md) var(--space-lg); } } .nav-logo { font-family: var(--font-display); font-weight: 300; font-size: 1.125rem; letter-spacing: 0.14em; white-space: nowrap; color: var(--color-text); text-decoration: none; transition: color var(--transition-fast); &:hover { color: var(--color-accent); } } .theme-toggle { position: relative; /* Children (icons) are position: absolute; need a positioned parent. */ display: flex; align-items: center; justify-content: center; /* 44px minimum = touch target size for accessibility (WCAG 2.5.5). */ min-width: 44px; min-height: 44px; width: 2.75rem; height: 2.75rem; padding: 0; margin: 0; line-height: 1; background: none; border: none; border-radius: 4px; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); } .theme-toggle svg { display: block; } .theme-toggle:hover { color: var(--color-accent); background: rgba(var(--color-accent-rgb), 0.1); } /* focus-visible: show outline only for keyboard focus, not mouse click. Avoids the "flash" of outline when you click a button. */ .theme-toggle:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } .theme-toggle-icon { position: absolute; top: 50%; left: 50%; /* translate(-50%, -50%) centers the icon; top/left alone would put top-left at center. */ transform: translate(-50%, -50%); transition: opacity var(--transition-fast); } /* One icon visible per theme. We toggle opacity instead of display so we can transition between them. Sun = dark mode (default), moon = light mode. */ .theme-toggle-icon--sun { opacity: 1; } .theme-toggle-icon--moon { opacity: 0; } [data-theme="light"] .theme-toggle-icon--sun { opacity: 0; } [data-theme="light"] .theme-toggle-icon--moon { opacity: 1; } /* Nav actions container - holds theme toggle and hamburger on mobile */ .nav-actions { display: flex; align-items: center; gap: var(--space-sm); } /* Mobile nav toggle button - hidden on desktop */ .nav-toggle { display: none; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; margin: 0; background: none; border: none; color: var(--color-text-muted); cursor: pointer; transition: color var(--transition-fast); &:hover { color: var(--color-accent); } &:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; } @media (max-width: 600px) { display: flex; } } .nav-toggle-icon--close { display: none; } .nav-toggle[aria-expanded="true"] { .nav-toggle-icon--open { display: none; } .nav-toggle-icon--close { display: block; } } .nav-links { display: flex; align-items: center; gap: var(--space-xl); /* Space between flex items; no need for margin on each. */ list-style: none; /* Remove bullet points from