/* ============================================================ jjw.sh — styles Themes are CSS variables keyed off ============================================================ */ :root, [data-theme="dark"] { --bg: #0a0e14; --bg-raised: #0f1420; --term-bg: #0d1119; --term-bar: #151b28; --border: #1f2733; --text: #c9d4e3; --text-dim: #6b7789; --accent: #50fa7b; --accent-2: #6cc7f5; --accent-3: #b18cf2; --glow: transparent; --scanline-opacity: 0.02; --selection: rgba(80, 250, 123, 0.25); } [data-theme="phosphor"] { --bg: #030905; --bg-raised: #06120a; --term-bg: #041007; --term-bar: #0a1a0f; --border: #12331c; --text: #4be97a; --text-dim: #1f7a3d; --accent: #6bff96; --accent-2: #4be97a; --accent-3: #4be97a; --glow: rgba(75, 233, 122, 0.35); --scanline-opacity: 0.08; --selection: rgba(107, 255, 150, 0.25); } [data-theme="amber"] { --bg: #0a0602; --bg-raised: #150d04; --term-bg: #100a03; --term-bar: #1d1306; --border: #3a2810; --text: #ffb64d; --text-dim: #8a6226; --accent: #ffcf7d; --accent-2: #ffb64d; --accent-3: #ffb64d; --glow: rgba(255, 182, 77, 0.3); --scanline-opacity: 0.08; --selection: rgba(255, 207, 125, 0.25); } [data-theme="paper"] { --bg: #f6f4ee; --bg-raised: #ffffff; --term-bg: #21252e; --term-bar: #2c313c; --border: #d8d3c6; --text: #2c2f35; --text-dim: #7c7f87; --accent: #1a7f4b; --accent-2: #1e66c5; --accent-3: #7a3fb8; --glow: transparent; --scanline-opacity: 0; --selection: rgba(26, 127, 75, 0.2); } /* paper theme keeps a dark terminal — it looks wrong light */ [data-theme="paper"] .term-screen, [data-theme="paper"] .term-window { --text: #d6dae2; --text-dim: #8a919e; --accent: #50fa7b; --accent-2: #6cc7f5; --accent-3: #b18cf2; } * { box-sizing: border-box; } ::selection { background: var(--selection); } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace; font-size: 15px; line-height: 1.65; transition: background 0.25s ease, color 0.25s ease; } a { color: var(--accent-2); text-decoration: none; } a:hover { text-decoration: underline; } .accent { color: var(--accent); } .muted { color: var(--text-dim); } /* ---------- nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 1.25rem; background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); font-size: 0.85rem; } .nav-brand { color: var(--text); font-weight: 600; } .nav-brand:hover { text-decoration: none; color: var(--accent); } .nav-links { display: flex; gap: 1.1rem; } .nav-links a { color: var(--text-dim); } .nav-links a:hover { color: var(--accent); text-decoration: none; } /* ---------- hero / terminal ---------- */ .hero { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; padding: 4.5rem 1rem 2rem; background: radial-gradient(ellipse 70% 45% at 50% 40%, color-mix(in srgb, var(--accent) 6%, transparent), transparent), radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-dim) 18%, transparent) 1px, transparent 0); background-size: 100% 100%, 28px 28px; } .term-window { width: min(880px, 100%); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--term-bg); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55), 0 0 40px color-mix(in srgb, var(--accent) 7%, transparent); } .term-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 0.9rem; background: var(--term-bar); border-bottom: 1px solid var(--border); } .term-dot { width: 12px; height: 12px; border-radius: 50%; } .dot-red { background: #ff5f56; } .dot-yellow { background: #ffbd2e; } .dot-green { background: #27c93f; } .term-title { margin-left: auto; margin-right: auto; transform: translateX(-21px); /* visually centered vs the dots */ font-size: 0.78rem; color: var(--text-dim); } .term-screen { position: relative; height: min(58vh, 520px); overflow-y: auto; padding: 1rem 1.1rem 1.25rem; font-size: 0.9rem; line-height: 1.55; cursor: text; text-shadow: 0 0 6px var(--glow); } /* CRT scanlines — nearly invisible on dark, stronger on phosphor/amber */ .term-screen::after { content: ""; position: sticky; display: block; top: 0; left: 0; margin-top: -100vh; height: 100vh; width: 100%; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0 2px, rgba(0, 0, 0, 0.9) 2px 3px); opacity: var(--scanline-opacity); } #term-output { white-space: pre-wrap; word-break: break-word; } #term-output a { color: var(--accent-2); } .t-line { min-height: 1.55em; } .t-cmd { color: var(--text); } .t-dim { color: var(--text-dim); } .t-accent { color: var(--accent); } .t-blue { color: var(--accent-2); } .t-purple { color: var(--accent-3); } .t-err { color: #ff6b6b; } .prompt { white-space: nowrap; } .p-user { color: var(--accent); } .p-host { color: var(--accent-2); } .p-path { color: var(--accent-3); } .term-input-line { display: flex; align-items: baseline; } #term-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font: inherit; caret-color: var(--accent); padding: 0; text-shadow: inherit; } .term-shake { animation: shake 0.4s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } } .scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 0; color: var(--text-dim); font-size: 0.78rem; } .scroll-hint:hover { color: var(--accent); text-decoration: none; } .chevron { animation: bob 2s ease-in-out infinite; font-size: 1rem; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } } /* ---------- content sections ---------- */ main { max-width: 860px; margin: 0 auto; padding: 0 1.25rem; } .section { padding: 4.5rem 0 1rem; } .section h2 { font-size: 1.15rem; margin: 0 0 1.5rem; letter-spacing: 0.02em; } .h-hash { color: var(--accent); margin-right: 0.4rem; } .about-head { margin-bottom: 1rem; } .about-name { font-size: 1.35rem; font-weight: 700; margin: 0; } .about-title { margin: 0.15rem 0 0; font-size: 0.9rem; } #about-body p { max-width: 68ch; } /* projects */ .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; } .project-card { display: block; border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; background: var(--bg-raised); color: var(--text); transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .project-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .project-name { color: var(--accent); font-weight: 600; margin: 0 0 0.4rem; } .project-name::before { content: "▸ "; color: var(--text-dim); } .project-desc { margin: 0 0 0.75rem; font-size: 0.88rem; color: var(--text); } .project-tags { font-size: 0.78rem; color: var(--text-dim); } .project-tags span { margin-right: 0.6rem; } .project-tags span::before { content: "#"; opacity: 0.7; } /* publications */ .pub-list { list-style: none; margin: 0; padding: 0; } .pub-item { border-left: 2px solid var(--border); padding: 0.15rem 0 0.15rem 1.1rem; margin-bottom: 1.5rem; transition: border-color 0.15s ease; } .pub-item:hover { border-left-color: var(--accent); } .pub-title { font-weight: 600; margin: 0; } .pub-authors { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--text-dim); } .pub-authors .me { color: var(--text); font-weight: 600; } .pub-venue { margin: 0.1rem 0 0.3rem; font-size: 0.85rem; font-style: italic; color: var(--text-dim); } .pub-links { font-size: 0.82rem; } .pub-links a { margin-right: 0.75rem; } /* contact */ .contact-list { list-style: none; padding: 0; margin: 0; } .contact-list li { margin-bottom: 0.5rem; } .contact-key { display: inline-block; min-width: 7ch; margin-right: 0.6ch; color: var(--text-dim); } .contact-key::after { content: " →"; } /* ---------- footer ---------- */ .footer { max-width: 860px; margin: 3rem auto 0; padding: 1.5rem 1.25rem 2.5rem; border-top: 1px solid var(--border); font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.75rem; } .theme-switch { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; } .theme-switch button { font: inherit; font-size: 0.8rem; background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 0.15rem 0.6rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-switch button:hover { color: var(--text); } .theme-switch button.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); } /* ---------- responsive & motion ---------- */ @media (max-width: 640px) { body { font-size: 14px; } .nav-brand { display: none; } .nav-links { width: 100%; justify-content: space-around; } .term-screen { height: min(62svh, 460px); font-size: 0.82rem; } .section { padding: 3rem 0 0.5rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .chevron { animation: none; } .term-shake { animation: none; } }