/* yprez.com stylesheet. Reference: shared/best-practices/static-sites/stack.md (cascade-layer order) shared/best-practices/css.md (broader CSS conventions) A single centred "business card". Light/dark via light-dark() + color-scheme; the theme toggle (js/theme.js + the inline FOUC script in ) flips color-scheme through [data-theme] to override the system default. */ @layer reset, tokens, base, components, utilities; /* ----- reset ----- */ @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; } img, picture, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } } /* ----- tokens ----- */ @layer tokens { :root { color-scheme: light dark; --bg-color: light-dark(#e8e8e8, #111111); --text-color: light-dark(#1a1a1a, #e8e8e8); --text-muted: light-dark(#444444, #bbbbbb); --container-bg: light-dark(#ffffff, #1a1a1a); --link-color: light-dark(#2563eb, #60a5fa); --link-hover: light-dark(#1d4ed8, #93bbfd); --accent-color: light-dark(#2563eb, #60a5fa); --border-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06)); --shadow-color: light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.3)); --shadow-color-strong: light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.5)); --icon-color: light-dark(#555555, #aaaaaa); --icon-hover: light-dark(#1a1a1a, #e8e8e8); --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size-name: clamp(1.75rem, 4vw, 2.125rem); --font-size-title: clamp(1.0625rem, 2.5vw, 1.1875rem); --font-size-body: clamp(1rem, 1.5vw, 1.0625rem); --font-size-small: 0.9375rem; --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --letter-spacing-name: -0.02em; --letter-spacing-body: 0.01em; --letter-spacing-upper: 0.08em; --line-height-tight: 1.2; --line-height-normal: 1.6; } /* User theme override (set by the inline FOUC script from localStorage, and by js/theme.js on toggle). Without it, the page tracks prefers-color-scheme. */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } } /* ----- base ----- */ @layer base { body { font-family: var(--font-family); padding: 1rem; background-color: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; transition: background-color 0.3s, color 0.3s; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Prefer the dynamic viewport unit where supported (it accounts for mobile browser chrome); the 100vh above is the fallback. Split via @supports so a single block never declares min-height twice. */ @supports (min-height: 100dvh) { body { min-height: 100dvh; } } :focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } } /* ----- components ----- */ @layer components { /* Skip link: first focusable element; slides in on keyboard focus. */ .skip-link { position: fixed; top: 0; left: 0; padding: 1rem; background: var(--bg-color); color: var(--link-color); z-index: 1000; text-decoration: underline; transform: translateY(-200%); transition: transform 0.2s ease-out; } .skip-link:focus { transform: translateY(0); } /* The card itself (the
). */ .card { text-align: center; background-color: var(--container-bg); padding: 2rem 2.5rem; box-shadow: 0 1px 3px var(--shadow-color), 0 8px 24px var(--shadow-color), 0 20px 48px var(--shadow-color-strong); border-radius: 12px; border: 1px solid var(--border-color); transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; width: min(90vw, 480px); display: flex; flex-direction: column; align-items: center; justify-content: center; animation: card-enter 0.5s ease-out; } @keyframes card-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .card { animation: none; } } .card__name { font-size: var(--font-size-name); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-name); line-height: var(--line-height-tight); margin: 0 0 0.25rem 0; } .card__title { font-size: var(--font-size-title); font-weight: var(--font-weight-light); letter-spacing: var(--letter-spacing-upper); color: var(--text-muted); margin: 0 0 1.5rem 0; } .card__divider { border: none; height: 2px; width: 2rem; background-color: var(--accent-color); margin: 0 auto 1.5rem auto; transition: background-color 0.3s; } .card__detail { font-size: var(--font-size-body); font-weight: var(--font-weight-regular); letter-spacing: var(--letter-spacing-body); line-height: var(--line-height-normal); color: var(--text-muted); margin: 0 0 0.5rem 0; } .card__detail:last-of-type { margin-bottom: 1.5rem; } .card__years-link { background: none; border: none; padding: 0; font: inherit; color: var(--text-muted); font-weight: var(--font-weight-regular); border-bottom: 1px dashed var(--text-muted); cursor: pointer; transition: border-color 0.2s, color 0.2s; } .card__years-link:hover { border-bottom-color: var(--accent-color); color: var(--accent-color); } .card__links { display: flex; justify-content: center; gap: 1.25rem; margin-bottom: 1.5rem; } .card__icon { width: 1.25rem; height: 1.25rem; } .card__project { font-size: var(--font-size-small); font-weight: var(--font-weight-medium); margin: 0; } .card__project-tagline { font-size: 0.8125rem; color: var(--text-muted); margin: 0.25rem 0 0 0; } /* Anchor styles for both link clusters (the icon links and the project link). They share a specificity bucket, so the base rules are grouped ahead of the :hover rules to keep source-order specificity ascending. */ .card__links a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--icon-color); transition: color 0.2s, background-color 0.2s, transform 0.2s; text-decoration: none; } .card__project a { color: var(--accent-color); font-weight: var(--font-weight-medium); text-decoration: none; transition: color 0.2s; } .card__links a:hover { color: var(--icon-hover); background-color: var(--border-color); transform: translateY(-1px); } .card__project a:hover { color: var(--link-hover); text-decoration: underline; } /* Theme toggle: fixed top-right, holds an inline SVG (sun/moon swapped by JS). */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; background: none; border: 1px solid transparent; cursor: pointer; padding: 0.5rem; border-radius: 50%; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s, border-color 0.2s; color: var(--text-color); } .theme-toggle:hover, .theme-toggle:focus-visible { opacity: 1; border-color: var(--border-color); } .theme-toggle__icon { width: 1.125rem; height: 1.125rem; } /* Show the moon in the light scheme and the sun in the dark scheme, driven by the active color-scheme: prefers-color-scheme by default, the [data-theme] override when the user has toggled. The right icon paints on first load (the no-FOUC script sets data-theme before paint) with no JS icon logic. */ .theme-toggle__icon--sun { display: none; } @media (prefers-color-scheme: dark) { .theme-toggle__icon--moon { display: none; } .theme-toggle__icon--sun { display: block; } } [data-theme="light"] .theme-toggle__icon--moon { display: block; } [data-theme="light"] .theme-toggle__icon--sun { display: none; } [data-theme="dark"] .theme-toggle__icon--moon { display: none; } [data-theme="dark"] .theme-toggle__icon--sun { display: block; } } /* ----- utilities ----- */ @layer utilities { @media (max-width: 480px) { .card { padding: 2rem 1.75rem; border-radius: 10px; } .card__links { gap: 1rem; } } @media (max-width: 320px) { .card { padding: 1.75rem 1.25rem; width: 95vw; } } } /* ----- print ----- */ @media print { :root { color-scheme: light; } .theme-toggle, .skip-link { display: none; } body { background: #fff; color: #000; } .card { box-shadow: none; animation: none; } }