/* nickdamore.com: one stylesheet, no build step. Themes follow the system preference until the toggle sets data-theme on , which then wins. Palette values are defined once as tokens below and only *mapped* in the theme blocks, so the two themes can't drift apart. */ :root { /* Light tokens */ --l-bg: #fbfbfd; --l-bg-sunk: #f2f2f5; --l-fg: #1d1d1f; --l-fg-muted: #6e6e73; --l-fg-faint: #86868b; --l-rule: #d9d9de; --l-accent: #0066cc; --l-accent-dim: #004e9e; --l-mono-accent: #1a7f4b; --l-ring: 0 0 0 1px rgb(0 0 0 / 8%), 0 6px 24px -8px rgb(0 0 0 / 22%); /* Dark tokens */ --d-bg: #0a0a0c; --d-bg-sunk: #16161a; --d-fg: #f5f5f7; --d-fg-muted: #a1a1a8; --d-fg-faint: #86868b; --d-rule: #2a2a30; --d-accent: #4da3ff; --d-accent-dim: #7fbcff; --d-mono-accent: #4ec98a; --d-ring: 0 0 0 1px rgb(255 255 255 / 12%), 0 6px 24px -8px rgb(0 0 0 / 60%); --measure: 42rem; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* --- Light theme (default) --- */ :root { color-scheme: light; --bg: var(--l-bg); --bg-sunk: var(--l-bg-sunk); --fg: var(--l-fg); --fg-muted: var(--l-fg-muted); --fg-faint: var(--l-fg-faint); --rule: var(--l-rule); --accent: var(--l-accent); --accent-dim: var(--l-accent-dim); --mono-accent: var(--l-mono-accent); --ring: var(--l-ring); --sun: none; --moon: block; } /* --- Dark theme: system preference, unless light was chosen explicitly --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: var(--d-bg); --bg-sunk: var(--d-bg-sunk); --fg: var(--d-fg); --fg-muted: var(--d-fg-muted); --fg-faint: var(--d-fg-faint); --rule: var(--d-rule); --accent: var(--d-accent); --accent-dim: var(--d-accent-dim); --mono-accent: var(--d-mono-accent); --ring: var(--d-ring); --sun: block; --moon: none; } } /* --- Dark theme: chosen explicitly. Last so it wins on either system pref. --- */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--d-bg); --bg-sunk: var(--d-bg-sunk); --fg: var(--d-fg); --fg-muted: var(--d-fg-muted); --fg-faint: var(--d-fg-faint); --rule: var(--d-rule); --accent: var(--d-accent); --accent-dim: var(--d-accent-dim); --mono-accent: var(--d-mono-accent); --ring: var(--d-ring); --sun: block; --moon: none; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding: clamp(2.5rem, 8vw, 5.5rem) clamp(1.25rem, 5vw, 2rem) clamp(3rem, 8vw, 5rem); background: var(--bg); color: var(--fg); font-family: var(--font); font-size: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); font-weight: 400; line-height: 1.6; letter-spacing: -0.003em; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--measure); margin: 0 auto; } /* ---------- Typography ---------- */ h1, h2, h3 { font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.5rem + 2.4vw, 2.75rem); font-weight: 600; } h2 { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--fg-faint); } h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; } p { margin: 0 0 1.15em; text-wrap: pretty; } p:last-child { margin-bottom: 0; } a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: color 0.15s ease, border-color 0.15s ease; } a:hover { color: var(--accent-dim); border-bottom-color: currentColor; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } strong { font-weight: 600; } /* ---------- Theme toggle ---------- */ .theme-toggle { position: fixed; top: clamp(0.85rem, 3vw, 1.5rem); right: clamp(0.85rem, 3vw, 1.5rem); z-index: 10; display: grid; place-items: center; width: 2.375rem; height: 2.375rem; padding: 0; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); color: var(--fg-muted); cursor: pointer; -webkit-appearance: none; appearance: none; transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--bg-sunk); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .theme-toggle svg { width: 1.0625rem; height: 1.0625rem; fill: currentColor; /* Which glyph shows is driven by the theme mapping above, so the button stays correct even when the system preference changes under it. */ grid-area: 1 / 1; } .theme-toggle .icon-sun { display: var(--sun); } .theme-toggle .icon-moon { display: var(--moon); } /* No animated theme flip for anyone who asked not to see motion. */ @media (prefers-reduced-motion: reduce) { .theme-toggle, a { transition: none; } } /* The one nerdy flourish: a shell prompt as a section marker. */ .prompt { font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; letter-spacing: 0; color: var(--fg-faint); text-transform: none; margin-bottom: 1.25rem; } .prompt::before { content: "~ $ "; color: var(--mono-accent); } /* ---------- Landing page ---------- */ .hero { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 4vw, 2rem); margin-bottom: clamp(2.5rem, 6vw, 3.5rem); } .avatar { flex: 0 0 auto; width: clamp(6.5rem, 18vw, 8.5rem); height: clamp(6.5rem, 18vw, 8.5rem); border-radius: 50%; object-fit: cover; background: var(--bg-sunk); box-shadow: var(--ring); } /* Shrinkable so the photo and text share a line on wide screens; the flex-basis is the point at which it drops below the photo instead. */ .hero-text { flex: 1 1 18rem; min-width: 0; } .tagline { margin: 0.6rem 0 0; font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); font-weight: 400; color: var(--fg-muted); letter-spacing: -0.011em; line-height: 1.45; } .locale { font-family: var(--mono); font-size: 0.78125rem; color: var(--fg-faint); margin: 0.7rem 0 0; letter-spacing: 0; } section { margin-bottom: clamp(2.5rem, 6vw, 3.5rem); } section:last-of-type { margin-bottom: 0; } /* ---------- Link list ---------- */ .links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; } .links a { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.85rem; margin-left: -0.85rem; border-radius: 10px; border-bottom: 0; color: var(--fg); font-weight: 450; transition: background-color 0.15s ease; } .links a:hover { background: var(--bg-sunk); color: var(--fg); } .links svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; fill: currentColor; color: var(--fg-muted); } .links a:hover svg { color: var(--accent); } .links .host { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; color: var(--fg-faint); white-space: nowrap; } @media (max-width: 26rem) { .links .host { display: none; } } /* ---------- Footer ---------- */ footer { margin-top: clamp(3rem, 8vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--fg-faint); line-height: 1.55; } footer p { margin: 0 0 0.4em; } footer .mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0; } /* ---------- Résumé ---------- */ .resume-head { margin-bottom: clamp(2rem, 5vw, 2.75rem); padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .resume-head .tagline { margin-top: 0.45rem; } .back { display: inline-block; font-size: 0.8125rem; color: var(--fg-muted); margin-bottom: 1.75rem; border-bottom: 0; } .back:hover { color: var(--accent); border-bottom: 0; } .back::before { content: "← "; } .summary { color: var(--fg-muted); } .role { margin-bottom: 2.25rem; } .role:last-child { margin-bottom: 0; } .role-head { margin-bottom: 0.85rem; } .employer { display: block; font-size: 0.9375rem; font-weight: 400; color: var(--fg-muted); margin-top: 0.15rem; } .dates { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--fg-faint); margin-top: 0.3rem; letter-spacing: 0; } .role > p { color: var(--fg-muted); font-size: 0.96875rem; } .role ul { margin: 0.85rem 0 0; padding-left: 1.1rem; font-size: 0.96875rem; } .role li { margin-bottom: 0.65rem; padding-left: 0.15rem; } .role li::marker { color: var(--fg-faint); } .role li:last-child { margin-bottom: 0; } .subhead { font-family: var(--mono); font-size: 0.75rem; color: var(--fg-faint); margin: 1.35rem 0 0.6rem; letter-spacing: 0; } /* Skills: definition list, label above values. */ .skills { margin: 0; } .skills dt { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 0.3rem; } .skills dd { margin: 0 0 1.15rem; font-size: 0.9375rem; color: var(--fg-muted); line-height: 1.65; } .skills dd:last-child { margin-bottom: 0; } /* Bullet separator between skill items, no glyph in the markup. */ .skills .sep { color: var(--rule); padding: 0 0.15em; } .note { font-size: 0.875rem; color: var(--fg-faint); } /* ---------- 404 ---------- */ .error-page { text-align: left; padding-top: clamp(1rem, 6vh, 4rem); } .error-code { font-family: var(--mono); font-size: 0.8125rem; color: var(--mono-accent); margin: 0 0 1.25rem; letter-spacing: 0; } .error-page h1 { margin-bottom: 0.75rem; } .error-page .tagline { margin-bottom: 2rem; } /* ---------- Print: resume to clean PDF ---------- */ @media print { @page { margin: 0.55in 0.6in; } :root { --bg: #fff; --bg-sunk: #fff; --fg: #000; --fg-muted: #333; --fg-faint: #555; --rule: #bbb; --accent: #000; --mono-accent: #555; } body { padding: 0; font-size: 9.5pt; line-height: 1.34; } .wrap { max-width: none; } a { color: #000; border-bottom: 0; } /* Keep the LinkedIn URL visible on paper, drop the rest of the chrome. */ .back, footer, .avatar, .theme-toggle { display: none; } h1 { font-size: 17pt; } h2 { font-size: 8pt; color: #000; margin-top: 0; } h3 { font-size: 10pt; } .tagline, .role > p, .role ul, .skills dd { font-size: 9.5pt; } .employer { font-size: 9pt; } .dates, .subhead, .locale { font-size: 8pt; } .subhead { margin: 0.5rem 0 0.3rem; } p { margin-bottom: 0.5em; } /* Only ask for atomicity on blocks that actually fit in a page. The long current role is taller than a page, and break-inside:avoid on it makes Chrome push it to a fresh page and break it anyway -- wasting a page. */ .role li, .role-head, .skills dt, .skills dd { break-inside: avoid; } h2, h3 { break-after: avoid; } section { margin-bottom: 1.15rem; } .role { margin-bottom: 1rem; } .role li { margin-bottom: 0.3rem; } .resume-head { margin-bottom: 1.25rem; padding-bottom: 0.85rem; } }