/* ============================================================ Eli Dukes — applied AI Shared design system for the personal site. Monochrome editorial canvas, one saturated accent. Palette is theme-able via the [data-theme] attribute on . Landed theme: "paper" (light, sharp red accent). Other presets from the design exploration are retained — switch by setting data-theme to gold | ember | crimson | electric | mono. ============================================================ */ :root { --font-display: 'Instrument Serif', 'Times New Roman', serif; --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --ease-out: cubic-bezier(0.2, 0.0, 0.2, 1); --maxw: 880px; } /* ---------- Theme presets (flip via html[data-theme]) ---------- */ html[data-theme="paper"] { --bg2: #EFEAE0; --surface: #F7F2E6; --fg: #0A0908; --fg-dim: rgba(10,9,8,0.66); --fg-muted: rgba(10,9,8,0.38); --bdr: rgba(10,9,8,0.12); --bdr-strong: rgba(10,9,8,0.28); --ac: #DC2626; --ac-dim: rgba(220,38,38,0.12); --ac-text: #F7F2E6; } html[data-theme="gold"] { --bg2: #0E0E0F; --surface: #161617; --fg: #F2F0EA; --fg-dim: rgba(242,240,234,0.66); --fg-muted: rgba(242,240,234,0.40); --bdr: rgba(242,240,234,0.10); --bdr-strong: rgba(242,240,234,0.22); --ac: #E0A75E; --ac-dim: rgba(224,167,94,0.18); --ac-text: #0E0E0F; } html[data-theme="ember"] { --bg2: #0B0B0C; --surface: #141315; --fg: #F4F1EC; --fg-dim: rgba(244,241,236,0.66); --fg-muted: rgba(244,241,236,0.40); --bdr: rgba(244,241,236,0.10); --bdr-strong: rgba(244,241,236,0.22); --ac: #FF5C2E; --ac-dim: rgba(255,92,46,0.16); --ac-text: #0B0B0C; } html[data-theme="crimson"] { --bg2: #0C0B0B; --surface: #161313; --fg: #F1EEE8; --fg-dim: rgba(241,238,232,0.66); --fg-muted: rgba(241,238,232,0.40); --bdr: rgba(241,238,232,0.10); --bdr-strong: rgba(241,238,232,0.22); --ac: #E63946; --ac-dim: rgba(230,57,70,0.16); --ac-text: #F1EEE8; } html[data-theme="electric"] { --bg2: #0A0C10; --surface: #11141A; --fg: #EEF1F5; --fg-dim: rgba(238,241,245,0.66); --fg-muted: rgba(238,241,245,0.40); --bdr: rgba(238,241,245,0.10); --bdr-strong: rgba(238,241,245,0.22); --ac: #3B82F6; --ac-dim: rgba(59,130,246,0.18); --ac-text: #0A0C10; } html[data-theme="mono"] { --bg2: #0E0E0E; --surface: #161616; --fg: #F0EFEC; --fg-dim: rgba(240,239,236,0.66); --fg-muted: rgba(240,239,236,0.40); --bdr: rgba(240,239,236,0.10); --bdr-strong: rgba(240,239,236,0.24); --ac: #F0EFEC; --ac-dim: rgba(240,239,236,0.10); --ac-text: #0E0E0E; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg2); color: var(--fg); font-family: var(--font-sans); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; } ::selection { background: var(--ac); color: var(--ac-text); } a:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 2px; } .page { min-height: 100vh; padding-bottom: 96px; } /* skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ac); color: var(--ac-text); padding: 8px 14px; z-index: 100; font-family: var(--font-mono); font-size: 12px; text-decoration: none; } .skip-link:focus { left: 12px; top: 12px; } /* anchor scroll-margin so sections don't hide under sticky topbar */ #now, #projects, #usdq, #writing, #renders { scroll-margin-top: 64px; } /* ---------- Top bar -------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 28px; background: color-mix(in oklab, var(--bg2) 88%, transparent); border-bottom: 1px solid var(--bdr); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .topbar-l, .brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; } .topbar-mark { width: 6px; height: 6px; border-radius: 999px; background: var(--ac); display: inline-block; } .topbar-r { display: flex; align-items: center; gap: 22px; color: var(--fg-dim); } .topbar-r a { color: inherit; text-decoration: none; transition: color 150ms var(--ease-out); } .topbar-r a:hover { color: var(--fg); } /* ---------- Hero ----------------------------------------------- */ .hero { position: relative; padding: 120px 28px 64px; overflow: hidden; border-bottom: 1px solid var(--bdr-strong); } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--bdr) 1px, transparent 1px), linear-gradient(to bottom, var(--bdr) 1px, transparent 1px), radial-gradient(circle at center, var(--fg-muted) 0.8px, transparent 1.2px); background-size: 48px 48px, 48px 48px, 48px 48px; background-position: -1px -1px, -1px -1px, 23px 23px; opacity: 0.55; -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%); mask-image: linear-gradient(to bottom, black 50%, transparent 100%); pointer-events: none; } .hero-glow { position: absolute; inset: 0; background: radial-gradient(40% 30% at 50% 100%, var(--ac-dim), transparent 70%); pointer-events: none; } .reg-mark { position: absolute; width: 14px; height: 14px; color: var(--ac); opacity: 0.65; } .reg-mark.tl { top: 20px; left: 20px; } .reg-mark.br { bottom: 20px; right: 20px; } .hero-inner { position: relative; max-width: var(--maxw); margin: 0 auto; } .eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ac); margin: 0 0 28px; } .live-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ac); box-shadow: 0 0 0 4px var(--ac-dim); display: inline-block; flex: 0 0 auto; } .display { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 9vw, 120px); line-height: 0.95; letter-spacing: -0.025em; margin: 0; color: var(--fg); } .display-2 { font-family: var(--font-display); font-style: italic; color: var(--ac); font-size: clamp(40px, 6vw, 76px); letter-spacing: -0.015em; display: block; margin-top: -4px; } .tagline { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.4; color: var(--fg-dim); margin: 32px 0 0; max-width: 700px; } .tagline em { color: var(--ac); font-style: italic; } .hero-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 56px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: lowercase; } .hero-link { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--bdr-strong); padding-bottom: 2px; white-space: nowrap; transition: border-color 150ms var(--ease-out), color 150ms var(--ease-out); } .hero-link:hover { color: var(--ac); border-color: var(--ac); } /* ---------- Hero quick-link bar -------------------------------- */ .herobar { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0 0; border: 1px solid var(--bdr); border-radius: 4px; background: var(--surface); overflow: hidden; } .herobar-item { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px; text-decoration: none; color: var(--fg); border-left: 1px solid var(--bdr); transition: background 150ms var(--ease-out); } .herobar-item:first-child { border-left: none; } .herobar-item:hover { background: var(--bg2); } .herobar-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac); } .herobar-l { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.03em; color: var(--fg-dim); display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: color 150ms var(--ease-out); } .herobar-item:hover .herobar-l { color: var(--fg); } .herobar .arr { color: var(--fg-muted); transition: color 150ms var(--ease-out); } .herobar-item:hover .arr { color: var(--ac); } @media (max-width: 600px) { .herobar { grid-template-columns: 1fr; } .herobar-item { border-left: none; border-top: 1px solid var(--bdr); } .herobar-item:first-child { border-top: none; } } /* ---------- Body / shell --------------------------------------- */ .body, .shell { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .bio { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 38px); line-height: 1.3; color: var(--fg); margin: 40px 0 0; letter-spacing: -0.01em; max-width: 800px; } .bio-second { font-family: var(--font-sans); font-size: 16px; line-height: 1.7; color: var(--fg-dim); margin: 24px 0 0; max-width: 720px; } .bio-link { color: var(--ac); text-decoration: none; border-bottom: 1px solid var(--ac-dim); padding-bottom: 1px; transition: border-color 150ms var(--ease-out); } .bio-link:hover { border-color: var(--ac); } /* ---------- Section heads -------------------------------------- */ .section-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: baseline; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim); font-weight: 500; margin: 88px 0 24px; } .section-idx { font-family: var(--font-mono); color: var(--ac); letter-spacing: 0.10em; } .section-slash { color: var(--fg-muted); margin: 0 6px; } .section-sep { color: var(--fg-muted); margin: 0 12px; } .section-rule { height: 1px; background: var(--bdr); } .section-meta { color: var(--fg-muted); } /* ---------- Now rows ------------------------------------------- */ .now-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--bdr); } .now-row:last-child { border-bottom: none; } .now-date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.12em; text-transform: uppercase; } .now-title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; color: var(--fg); margin: 0; font-weight: 400; } .now-desc { font-size: 14.5px; line-height: 1.6; color: var(--fg-dim); margin-top: 6px; } /* ---------- Project cards -------------------------------------- */ .proj-grid { display: grid; gap: 16px; margin-top: 8px; } .proj-card { display: block; border: 1px solid var(--bdr); background: var(--surface); border-radius: 4px; padding: 32px 32px 26px; transition: border-color 200ms var(--ease-out); position: relative; overflow: hidden; color: inherit; text-decoration: none; } a.proj-card:hover { border-color: var(--bdr-strong); } a.proj-card:hover .proj-title { color: var(--ac); } .proj-card.featured { border: 1px solid var(--bdr-strong); } .proj-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ac); } .proj-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .proj-title-wrap { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; row-gap: 10px; } .proj-title { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--fg); margin: 0; font-weight: 400; letter-spacing: -0.015em; transition: color 200ms var(--ease-out); } .proj-domain { font-family: var(--font-mono); font-size: 12px; color: var(--ac); text-decoration: none; border-bottom: 1px solid var(--ac-dim); padding-bottom: 1px; } .proj-domain.muted { color: var(--fg-muted); border-color: transparent; } .proj-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; color: var(--fg-muted); display: flex; gap: 14px; align-items: center; text-transform: uppercase; } .proj-status { display: inline-flex; align-items: center; gap: 6px; } .proj-status .dot { width: 5px; height: 5px; border-radius: 999px; } .proj-status.live { color: var(--ac); } .proj-status.live .dot { background: var(--ac); } .proj-status.wip { color: var(--fg-dim); } .proj-status.wip .dot { background: var(--fg-dim); } .proj-desc { font-size: 15px; line-height: 1.7; color: var(--fg-dim); margin: 14px 0 20px; max-width: 720px; } .proj-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 16px; border-top: 1px solid var(--bdr); } .proj-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-dim); padding: 4px 10px; border-radius: 2px; background: transparent; border: 1px solid var(--bdr); } .proj-readmore { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: lowercase; color: var(--ac); white-space: nowrap; text-decoration: none; border-bottom: 1px solid var(--ac-dim); padding-bottom: 1px; transition: border-color 150ms var(--ease-out); } .proj-readmore:hover { border-color: var(--ac); } /* live-demo CTA button */ .try-demo { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; background: var(--ac); color: var(--ac-text); padding: 10px 16px; border-radius: 4px; text-decoration: none; transition: opacity 150ms var(--ease-out); } .try-demo:hover { opacity: 0.86; } /* ---------- Writing list --------------------------------------- */ .writing-list { display: grid; gap: 0; margin-top: 8px; } .writing-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--bdr); color: var(--fg); text-decoration: none; font-family: var(--font-display); font-size: 22px; line-height: 1.25; transition: color 150ms var(--ease-out); } .writing-list a:last-child { border-bottom: none; } .writing-list a:hover { color: var(--ac); } .writing-list a .w-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-muted); white-space: nowrap; } /* ---------- Footer --------------------------------------------- */ .footer { max-width: var(--maxw); margin: 96px auto 0; padding: 32px 28px 0; border-top: 1px solid var(--bdr); font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); letter-spacing: 0.10em; text-transform: uppercase; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--bdr); } .footer a:hover { color: var(--fg); } .footer-r { display: flex; align-items: center; gap: 8px; } /* ============================================================ Project / post pages ============================================================ */ .project-page { padding: 88px 28px 0; } .project-layout { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 56px; align-items: start; } .post-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ac); margin: 0 0 18px; } .project-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 7vw, 76px); line-height: 0.98; letter-spacing: -0.02em; margin: 0; color: var(--fg); } .project-subtitle { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; color: var(--fg-dim); margin: 20px 0 0; max-width: 640px; } /* install / pip line */ .install { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; } .install code { background: var(--ac-dim); color: var(--ac); padding: 5px 11px; border-radius: 3px; } .install a { color: var(--fg-dim); text-decoration: none; border-bottom: 1px solid var(--ac-dim); padding-bottom: 1px; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out); } .install a:hover { color: var(--ac); border-color: var(--ac); } .gallery figcaption .tag.codex, .gallery figcaption .tag.claude { color: var(--ac); } /* full-width rows for wide viewport screenshots (UI left in) */ .gallery figure.span2 { grid-column: 1 / -1; } .gallery figure.span2 img { aspect-ratio: auto; height: auto; } /* figure strip */ .figure-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 48px 0 8px; } .figure-panel { border: 1px solid var(--bdr); background: var(--surface); border-radius: 4px; padding: 18px 18px 16px; } .figure-panel b { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ac); margin-bottom: 10px; font-weight: 600; } .figure-panel p { font-size: 13.5px; line-height: 1.55; color: var(--fg-dim); margin: 0 0 14px; } .mini-table { display: grid; gap: 6px; border-top: 1px solid var(--bdr); padding-top: 12px; margin-top: 0; } .mini-table > div { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-mono); font-size: 11px; padding: 0; border: 0; } .mini-table strong { color: var(--fg-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } .mini-table span { color: var(--fg); } /* post body prose */ .post-body { margin-top: 48px; max-width: 660px; } .post-body .note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac); border: 1px solid var(--ac-dim); border-radius: 3px; padding: 10px 14px; margin: 0 0 32px; display: inline-block; } .post-body p { font-size: 16px; line-height: 1.75; color: var(--fg-dim); margin: 0 0 20px; } .post-body h2 { font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); margin: 40px 0 12px; } .post-body code { font-family: var(--font-mono); font-size: 0.86em; background: var(--ac-dim); color: var(--ac); padding: 1px 6px; border-radius: 3px; } /* meta panel */ .meta-panel { position: sticky; top: 72px; border: 1px solid var(--bdr); background: var(--surface); border-radius: 4px; padding: 22px; display: grid; gap: 20px; } .meta-item { display: grid; gap: 6px; font-size: 13px; color: var(--fg); padding: 0; border: 0; } .meta-item > span:first-child { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); } .link-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 0; } .project-link-pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ac); text-decoration: none; border: 1px solid var(--ac-dim); border-radius: 3px; padding: 6px 12px; transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out); } .project-link-pill:hover { border-color: var(--ac); background: var(--ac-dim); } /* image gallery (usdq renders) */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 28px 0 8px; } .gallery figure { margin: 0; border: 1px solid var(--bdr); border-radius: 4px; background: var(--surface); overflow: hidden; } .gallery img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg2); } .gallery figcaption { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-dim); padding: 10px 14px; border-top: 1px solid var(--bdr); display: flex; justify-content: space-between; gap: 10px; } .gallery figcaption .tag { color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.10em; white-space: nowrap; } .gallery-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fg-muted); margin: 14px 0 0; } @media (max-width: 600px) { .gallery { grid-template-columns: 1fr; } } .post-back { max-width: 980px; margin: 56px auto 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: lowercase; } .post-back a { color: var(--ac); text-decoration: none; border-bottom: 1px solid var(--ac-dim); padding-bottom: 1px; } .post-back a:hover { border-color: var(--ac); } /* ---------- Responsive ----------------------------------------- */ @media (max-width: 820px) { .project-layout { grid-template-columns: 1fr; gap: 32px; } .meta-panel { position: static; order: 2; } .figure-strip { grid-template-columns: 1fr; } } @media (max-width: 600px) { .hero { padding: 96px 20px 48px; } .body, .shell { padding: 0 20px; } .topbar { padding: 0 20px; gap: 12px; } .topbar-r { gap: 16px; } .now-row { grid-template-columns: 1fr; gap: 8px; } .proj-card { padding: 24px 22px 22px; } .proj-title { font-size: 36px; } .project-page { padding: 80px 20px 0; } .footer { flex-direction: column; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }