/* rwgeorge.dev — hand-written styles. Accessibility-first. Theme via custom properties; light/dark follow the system, overridable by the toggle (which sets data-theme on ). */ :root { --bg: #ffffff; --bg-soft: #f4f6f8; --surface: #ffffff; --border: #d9dee4; --text: #1a1f24; --text-soft: #545c66; --accent: #1a66d6; --accent-contrast: #ffffff; --focus: #1a66d6; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06); --maxw: 60rem; --radius: 12px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0d10; --bg-soft: #12161b; --surface: #14191f; --border: #2a323b; --text: #e7ecf1; --text-soft: #a3adb8; --accent: #6fa8ff; --accent-contrast: #0b0d10; --focus: #6fa8ff; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); } } /* Explicit dark override (toggle) — wins over the media query. */ :root[data-theme="dark"] { --bg: #0b0d10; --bg-soft: #12161b; --surface: #14191f; --border: #2a323b; --text: #e7ecf1; --text-soft: #a3adb8; --accent: #6fa8ff; --accent-contrast: #0b0d10; --focus: #6fa8ff; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; background: var(--bg); color: var(--text); font: 400 1.05rem/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* Skip link — visible on focus */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--accent-contrast); padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; z-index: 100; } .skip-link:focus { left: 0; } /* Strong, consistent focus ring for keyboard users */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } /* ── Header / nav ─────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); z-index: 20; } .nav { max-width: var(--maxw); margin: 0 auto; padding: .75rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .nav__brand { font-weight: 700; text-decoration: none; color: var(--text); } .nav__links { list-style: none; display: flex; gap: 1.1rem; margin: 0; padding: 0; margin-inline-start: auto; flex-wrap: wrap; } .nav__links a { text-decoration: none; color: var(--text-soft); } .nav__links a:hover { color: var(--text); } .theme-toggle { display: inline-flex; align-items: center; gap: .4rem; font: inherit; font-size: .95rem; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .35rem .8rem; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); } /* ── Layout ───────────────────────────────────────────────────────────── */ main { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; } .hero { padding: clamp(3rem, 10vw, 6rem) 0 2.5rem; } .hero__name { font-size: clamp(2.5rem, 8vw, 4rem); line-height: 1.05; margin: 0 0 .5rem; letter-spacing: -.02em; } .hero__tagline { font-size: 1.35rem; color: var(--text-soft); margin: 0 0 1rem; max-width: 40ch; } .hero__intro { max-width: 55ch; margin: 0 0 1.75rem; } .hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; } .btn { display: inline-block; padding: .6rem 1.15rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; } .btn:hover { border-color: var(--accent); } .btn--primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); } .section { padding: 2.5rem 0; border-top: 1px solid var(--border); } .section__title { font-size: 1.6rem; margin: 0 0 1.25rem; } .prose { max-width: 65ch; } .prose p { margin: 0 0 1rem; } /* Interest cards */ .cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); } .card__title { margin: 0 0 .5rem; font-size: 1.15rem; } .card__body { margin: 0; color: var(--text-soft); } .card__title a { color: inherit; text-decoration-color: var(--accent); } .soon { font-size: .85em; opacity: .8; font-style: italic; } /* A card carrying a download has several stacked blocks rather than one paragraph, so give its children breathing room without touching the single-paragraph cards. */ .card > * + * { margin-top: .75rem; } /* Supporting detail under a download: version, size, checksum, caveats. */ .card__meta { margin: 0; font-size: .85em; color: var(--text-soft); opacity: .85; } /* Commands the reader is meant to copy. Scrolls within itself so a long line never forces the whole page sideways on a phone. */ .code { margin: 0; padding: .6rem .75rem; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: color-mix(in srgb, var(--border) 25%, transparent); } .code code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .85em; white-space: pre; color: var(--text); } .links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .key-fpr { display: inline-block; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .78rem; color: var(--text-soft); letter-spacing: .02em; } .site-footer { max-width: var(--maxw); margin: 3rem auto 0; padding: 2rem 1.25rem; border-top: 1px solid var(--border); color: var(--text-soft); font-size: .95rem; } /* ── Placeholders (removed as Bob fills in copy) ──────────────────────── */ .placeholder { color: var(--text-soft); font-style: italic; background: color-mix(in srgb, var(--accent) 8%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 8px; padding: .5rem .75rem; } .placeholder a { font-style: italic; }