/* Dark theme = default */ :root { --bg: #000; --fg: #e8e8e8; --muted: #8a8a8a; --rule: #1f1f1f; --hover: #111; --accent-good: #4ade80; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif; } /* Light theme — applied either explicitly or via system preference */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #fafafa; --fg: #111; --muted: #6b7280; --rule: #e5e7eb; --hover: #f0f0f0; --accent-good: #16a34a; } } [data-theme="light"] { --bg: #fafafa; --fg: #111; --muted: #6b7280; --rule: #e5e7eb; --hover: #f0f0f0; --accent-good: #16a34a; } [data-theme="dark"] { --bg: #000; --fg: #e8e8e8; --muted: #8a8a8a; --rule: #1f1f1f; --hover: #111; --accent-good: #4ade80; } * { box-sizing: border-box; } /* Background lives on so the starfield can sit between the bg and the body content without an extra paint layer fighting it. */ html { background: var(--bg); transition: background-color 0.15s ease; } body { color: var(--fg); transition: color 0.15s ease; } body { font-family: var(--sans); max-width: 52rem; margin: 0 auto; padding: 2.5rem 2rem 5rem; line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; z-index: 1; } /* Starfield canvas — fixed full-viewport, content sits on top */ #starfield { position: fixed; inset: 0; pointer-events: none; z-index: 0; } /* Hide stars on light theme (no contrast on white) */ [data-theme="light"] #starfield { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) #starfield { display: none; } } /* Respect user preference */ @media (prefers-reduced-motion: reduce) { #starfield { display: none; } } /* Top bar — theme toggle on the left, language toggle on the right */ .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3.5rem; font-family: var(--mono); font-size: 0.85rem; } .theme-toggle { display: flex; gap: 0.25rem; } .theme-btn { background: none; border: 1px solid transparent; cursor: pointer; padding: 0.4rem; color: var(--muted); display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: color 0.1s ease, background-color 0.1s ease, border-color 0.1s ease; } .theme-btn:hover { color: var(--fg); background: var(--hover); } .theme-btn.active { color: var(--fg); border-color: var(--rule); background: var(--hover); } .theme-btn svg { width: 16px; height: 16px; } .lang { color: var(--muted); } .lang a { color: var(--muted); text-decoration: none; } .lang a:hover { color: var(--fg); } .lang .active { color: var(--fg); } .lang .sep { color: var(--rule); margin: 0 0.4rem; } /* Header — bigger photo, more breathing room */ header { display: flex; align-items: center; gap: 2rem; margin-bottom: 3rem; } header img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; flex-shrink: 0; filter: grayscale(1); border: 1px solid var(--rule); } .identity h1 { font-family: var(--mono); font-size: 2rem; font-weight: 600; margin: 0 0 0.5rem; letter-spacing: -0.02em; line-height: 1.1; } .tagline { color: var(--muted); font-size: 1rem; margin: 0 0 0.85rem; } .status { font-family: var(--mono); font-size: 0.8rem; color: var(--accent-good); display: inline-flex; align-items: center; gap: 0.5rem; } .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-good) 20%, transparent); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } /* Sections with subtle dividers */ section { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); } h2 { font-family: var(--mono); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 1rem; } p { margin: 0 0 0.85rem; } p:last-child { margin-bottom: 0; } .lede { color: var(--muted); font-size: 1.05rem; } a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--muted); text-underline-offset: 3px; transition: text-decoration-color 0.1s ease; } a:hover { text-decoration-color: var(--fg); } ul { padding-left: 0; margin: 0; list-style: none; } li { margin-bottom: 0.55rem; } .projects li { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; } .projects code { font-family: var(--mono); font-size: 0.88em; color: var(--muted); } .case-nav { margin-top: -1.25rem; margin-bottom: 2.5rem; font-family: var(--mono); font-size: 0.85rem; } .case-nav a { color: var(--muted); text-decoration: none; } .case-nav a:hover { color: var(--fg); } .case-header { display: block; } .case-header h1 { font-family: var(--mono); font-size: 2rem; font-weight: 600; margin: 0 0 0.75rem; line-height: 1.15; } .case-status { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; } .case-status span { border: 1px solid var(--rule); border-radius: 999px; color: var(--muted); font-family: var(--mono); font-size: 0.76rem; padding: 0.25rem 0.65rem; } .case-list { padding-left: 1.2rem; list-style: disc; } .case-list li { margin-bottom: 0.45rem; } .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; } .facts li { min-width: 0; padding-bottom: 0.85rem; border-bottom: 1px solid var(--rule); } .facts span { display: block; font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 0.2rem; } .facts strong { display: block; font-weight: 500; line-height: 1.35; } .contacts { font-family: var(--mono); font-size: 0.92rem; display: grid; grid-template-columns: 6rem 1fr; gap: 0.5rem 1rem; margin: 0; } .contacts dt { color: var(--muted); } .contacts dd { margin: 0; } footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 0.78rem; color: var(--muted); } @media (max-width: 640px) { body { padding: 2rem 1.25rem 4rem; } header { gap: 1.25rem; } header img { width: 88px; height: 88px; } .identity h1 { font-size: 1.5rem; } .facts { grid-template-columns: 1fr; } .contacts { grid-template-columns: 5rem 1fr; font-size: 0.85rem; } }