/* ========================================================================== jaskamalkainth.github.io: homepage Themes are pure CSS custom properties keyed on . To add a theme: copy a block below, then register it in js/site.js (THEMES). ========================================================================== */ :root, [data-theme="midnight"] { --bg: #0a0f1e; --surface: rgba(17, 24, 45, 0.72); --surface-2: rgba(28, 38, 68, 0.75); --border: #1f2b4d; --text: #e6ebf5; --muted: #8f9cbb; --accent: #5eead4; --accent-2: #fbbf24; --accent-ink: #04201c; --node: #5eead4; --edge: 94, 234, 212; --glow: rgba(94, 234, 212, 0.18); --font-body: 'Inter', system-ui, sans-serif; --font-head: 'Space Grotesk', 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --radius: 14px; color-scheme: dark; } [data-theme="terminal"] { --bg: #030703; --surface: rgba(6, 16, 6, 0.82); --surface-2: rgba(12, 30, 12, 0.85); --border: #1a3d1a; --text: #b9f7b1; --muted: #6aa865; --accent: #39ff14; --accent-2: #ffe14d; --accent-ink: #021002; --node: #39ff14; --edge: 57, 255, 20; --glow: rgba(57, 255, 20, 0.16); --font-body: 'JetBrains Mono', ui-monospace, monospace; --font-head: 'JetBrains Mono', ui-monospace, monospace; --radius: 4px; color-scheme: dark; } [data-theme="paper"] { --bg: #f5efe2; --surface: rgba(255, 252, 244, 0.86); --surface-2: rgba(240, 232, 214, 0.9); --border: #d9ceb6; --text: #221c14; --muted: #6e6352; --accent: #9b2c2c; --accent-2: #1d4e89; --accent-ink: #fff8ef; --node: #6e6352; --edge: 110, 99, 82; --glow: rgba(155, 44, 44, 0.10); --font-body: 'Inter', system-ui, sans-serif; --font-head: 'Fraunces', Georgia, serif; --radius: 6px; color-scheme: light; } [data-theme="synthwave"] { --bg: #12071f; --surface: rgba(34, 13, 58, 0.72); --surface-2: rgba(52, 20, 86, 0.75); --border: #3e1d69; --text: #f7ecff; --muted: #b89bd8; --accent: #ff4fd8; --accent-2: #22d3ee; --accent-ink: #2a0024; --node: #22d3ee; --edge: 255, 79, 216; --glow: rgba(255, 79, 216, 0.2); --font-body: 'Inter', system-ui, sans-serif; --font-head: 'Space Grotesk', system-ui, sans-serif; --radius: 16px; color-scheme: dark; } [data-theme="nord"] { --bg: #2b303b; --surface: rgba(59, 66, 82, 0.72); --surface-2: rgba(67, 76, 94, 0.8); --border: #4c566a; --text: #eceff4; --muted: #b3bccd; --accent: #88c0d0; --accent-2: #ebcb8b; --accent-ink: #1d2a30; --node: #88c0d0; --edge: 136, 192, 208; --glow: rgba(136, 192, 208, 0.16); --font-body: 'Inter', system-ui, sans-serif; --font-head: 'Space Grotesk', system-ui, sans-serif; --radius: 12px; color-scheme: dark; } [data-theme="ember"] { --bg: #140e0a; --surface: rgba(33, 23, 17, 0.76); --surface-2: rgba(48, 33, 24, 0.8); --border: #3d2b1f; --text: #f4e7d9; --muted: #b89f88; --accent: #ff8a3d; --accent-2: #e9c46a; --accent-ink: #2a1203; --node: #ff8a3d; --edge: 255, 138, 61; --glow: rgba(255, 138, 61, 0.16); --font-body: 'Inter', system-ui, sans-serif; --font-head: 'Fraunces', Georgia, serif; --radius: 10px; color-scheme: dark; } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .35s ease, color .35s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; } button { font: inherit; color: inherit; } kbd { font-family: var(--font-mono); font-size: .72em; padding: 1px 6px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2); color: var(--muted); } .mono { font-family: var(--font-mono); } .muted { color: var(--muted); } .accent { color: var(--accent); } .wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 16px; } @media (min-width: 720px) { .wrap { padding: 0 28px; } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---------- background ---------- */ #bg-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } .bg-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 20%, transparent 0%, transparent 45%, var(--bg) 100%); opacity: .75; } main, .footer, .topbar { position: relative; z-index: 1; } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 70%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .topbar-inner { display: flex; align-items: center; gap: 16px; height: 58px; } .brand { font-family: var(--font-mono); font-weight: 700; color: var(--text); white-space: nowrap; } .brand:hover { text-decoration: none; } .brand-prompt { color: var(--accent); } .caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .nav { display: flex; gap: 18px; margin-left: auto; font-family: var(--font-mono); font-size: 13.5px; } .nav a { color: var(--muted); } .nav a:hover, .nav a.is-active { color: var(--text); text-decoration: none; } .nav a.is-active::before { content: '#'; color: var(--accent); } .topbar-tools { display: flex; gap: 8px; } .tool-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); cursor: pointer; font-family: var(--font-mono); font-size: 13px; } .tool-btn:hover { border-color: var(--accent); } @media (max-width: 760px) { .nav { display: none; } .topbar-tools { margin-left: auto; } } /* theme panel */ .theme-panel { position: absolute; right: 16px; top: 64px; width: min(380px, calc(100vw - 32px)); padding: 16px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); box-shadow: 0 20px 60px rgba(0,0,0,.35), 0 0 0 1px var(--glow); } .theme-panel[hidden] { display: none; } @media (min-width: 1136px) { .theme-panel { right: calc((100vw - 1080px) / 2 + 28px); } } .panel-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 2px 0 8px; } .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .theme-swatch { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 8px; border-radius: 8px; cursor: pointer; text-align: left; border: 1px solid var(--border); background: var(--sw-bg); color: var(--sw-text); font-family: var(--font-mono); font-size: 12px; } .theme-swatch .dots { display: flex; gap: 4px; } .theme-swatch .dots i { width: 10px; height: 10px; border-radius: 50%; display: block; } .theme-swatch[aria-checked="true"] { outline: 2px solid var(--accent); outline-offset: 1px; } .theme-swatch .def { font-size: 10px; opacity: .7; } .seg { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; } .seg button { flex: 1; padding: 7px 4px; background: transparent; border: 0; cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .seg button + button { border-left: 1px solid var(--border); } .seg button[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); } .panel-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); } /* ---------- hero ---------- */ .hero { padding-top: clamp(56px, 12vh, 120px); padding-bottom: 72px; } .hero-kicker { color: var(--muted); margin: 0 0 10px; font-size: 14px; } .prompt { color: var(--accent); } .hero-name { font-family: var(--font-head); font-size: clamp(42px, 8vw, 88px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 18px; font-weight: 700; } [data-theme="terminal"] .hero-name { letter-spacing: -0.05em; } .hero-line { max-width: 640px; font-size: clamp(17px, 2.1vw, 20px); color: var(--muted); margin: 0 0 34px; } .hl { color: var(--text); background: linear-gradient(transparent 62%, var(--glow) 62%); } /* search engine */ .search { max-width: 720px; } .search-box { position: relative; display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 10px 40px rgba(0,0,0,.18); transition: border-color .2s, box-shadow .2s; } [data-theme="terminal"] .search-box, [data-theme="paper"] .search-box { border-radius: var(--radius); } .search-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--glow), 0 10px 40px rgba(0,0,0,.2); } .search-icon { color: var(--muted); flex: none; } #q { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-family: var(--font-mono); font-size: 16px; } #q::-webkit-search-cancel-button { display: none; } .search-ghost { position: absolute; left: 46px; right: 50px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; font-size: 16px; } .search-ghost::after { content: '▍'; color: var(--accent); animation: blink 1s steps(1) infinite; margin-left: 1px; } .search-kbd { flex: none; } .search-meta { min-height: 22px; margin: 12px 4px 4px; font-size: 12.5px; color: var(--muted); } .search-meta b { color: var(--accent); font-weight: 500; } .search-meta .dym a { color: var(--accent-2); cursor: pointer; } .results { list-style: none; margin: 0; padding: 0; } .results:empty { display: none; } .result { display: block; padding: 12px 14px; margin: 6px 0; border-radius: 10px; border: 1px solid transparent; cursor: pointer; background: var(--surface); } .result[aria-selected="true"], .result:hover { border-color: var(--accent); } .result-url { font-family: var(--font-mono); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 12px; } .result-url .score { color: var(--accent-2); white-space: nowrap; } .result-title { font-family: var(--font-head); font-size: 18px; color: var(--accent); margin: 2px 0; } .result-desc { font-size: 14px; color: var(--muted); margin: 0; } .result mark { background: transparent; color: var(--text); font-weight: 600; border-bottom: 2px solid var(--accent-2); } .search-try { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 12.5px; } .search-try button { padding: 4px 10px; border-radius: 999px; cursor: pointer; background: transparent; border: 1px dashed var(--border); color: var(--muted); } .search-try button:hover { border-color: var(--accent); color: var(--text); } /* ---------- sections ---------- */ .section { padding-top: 64px; padding-bottom: 32px; } .section-head { margin-bottom: 28px; max-width: 720px; } .section-idx { color: var(--accent); font-size: 13px; } .section-head h2 { font-family: var(--font-head); font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; margin: 2px 0 8px; line-height: 1.1; } .section-sub { color: var(--muted); margin: 0; } /* pipeline */ .pipeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .stage { position: relative; padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: border-color .3s, transform .3s, box-shadow .3s; } .stage.is-lit { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); transform: translateY(-2px); } .stage-n { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 8px; background: var(--surface-2); color: var(--accent); font-size: 13px; font-weight: 700; } .stage h3 { font-family: var(--font-head); font-size: 16px; margin: 12px 0 6px; } .stage p { font-size: 13.5px; color: var(--muted); margin: 0 0 10px; line-height: 1.5; } .chips { display: flex; flex-wrap: wrap; gap: 4px; } .chips span { font-family: var(--font-mono); font-size: 11px; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); } .packet { position: absolute; top: 30px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); pointer-events: none; transition: left .9s cubic-bezier(.6,0,.3,1), top .9s cubic-bezier(.6,0,.3,1); z-index: 2; } @media (max-width: 900px) { .pipeline { grid-template-columns: 1fr 1fr; } .stage:last-of-type { grid-column: span 2; } } @media (max-width: 520px) { .pipeline { grid-template-columns: 1fr; } .stage:last-of-type { grid-column: auto; } } .about-grid { display: grid; grid-template-columns: 1fr 260px; gap: 28px; margin-top: 32px; align-items: start; } .about-text p { margin: 0 0 14px; color: var(--muted); } .about-text p:first-child { color: var(--text); } .epicycle-card { margin: 0; padding: 10px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } #epicycle { display: block; width: 100%; aspect-ratio: 1; border-radius: calc(var(--radius) - 4px); } .epicycle-card figcaption { font-size: 11.5px; color: var(--muted); margin-top: 8px; } @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } .epicycle-card { max-width: 280px; } } /* git log */ .gitlog { list-style: none; margin: 0; padding: 0 0 0 6px; position: relative; } .gitlog::before { content: ''; position: absolute; left: 12px; top: 10px; bottom: 60px; width: 2px; background: linear-gradient(var(--accent), var(--border)); } .commit { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 18px; padding-bottom: 26px; } .commit-dot { width: 14px; height: 14px; margin-top: 6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); position: relative; z-index: 1; } .commit:first-child .commit-dot { background: var(--accent); box-shadow: 0 0 0 5px var(--glow); } .commit-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; min-width: 0; } .commit-head { font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .commit-head .hash { color: var(--accent-2); } .commit-head .ref { color: var(--accent-ink); background: var(--accent); padding: 0 7px; border-radius: 5px; } .commit-head .date { color: var(--muted); } .commit h3 { font-family: var(--font-head); font-size: 17px; margin: 8px 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; line-height: 1.35; } .org-logo { width: 26px; height: 26px; border-radius: 6px; object-fit: cover; background: #fff; } .commit ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; } .commit li { margin: 3px 0; } /* work */ .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; font-size: 13px; } .filters button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; } .filters button:hover { color: var(--text); } .filters button.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; } .card { display: flex; flex-direction: column; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform .25s, border-color .25s, box-shadow .25s; } .card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.18); } .card[hidden] { display: none; } .card-top { display: flex; justify-content: space-between; font-size: 11.5px; } .tag { color: var(--accent); } .tag::before { content: '#'; opacity: .6; } .card h3 { font-family: var(--font-head); font-size: 17px; margin: 8px 0 6px; line-height: 1.3; } .card h3 a { color: var(--text); } .card p { margin: 0 0 12px; font-size: 14px; color: var(--muted); flex: 1; } .card-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; } .card-links a::before { content: '→ '; opacity: .6; } /* beyond */ .beyond { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 900px) { .beyond { grid-template-columns: 1fr; } } .beyond-card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 300px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--text); transition: border-color .25s, transform .25s; } .beyond-card:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-3px); } .beyond-card h3 { font-family: var(--font-head); font-size: 22px; margin: 0 0 8px; position: relative; } .beyond-card p { color: var(--muted); margin: 0 0 14px; position: relative; font-size: 15px; } .beyond-more { margin-top: auto; font-size: 12.5px; color: var(--accent); position: relative; } .beyond-links { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; position: relative; } .beyond-glyph { position: absolute; right: 14px; top: -6px; font-family: var(--font-head); font-size: 120px; line-height: 1; color: var(--accent); opacity: .12; pointer-events: none; transition: opacity .4s; } .beyond-card:hover .beyond-glyph { opacity: .22; } .beyond-card blockquote { margin: 0 0 14px; position: relative; min-height: 84px; transition: opacity .5s; } .beyond-card blockquote p { font-family: var(--font-head); font-size: 19px; color: var(--text); margin: 0 0 4px; line-height: 1.4; } .beyond-card blockquote em { color: var(--accent); font-style: normal; } .beyond-card cite { font-family: var(--font-mono); font-size: 12px; color: var(--muted); font-style: normal; } .beyond-card cite::before { content: '— '; } .wave { position: absolute; inset: auto 0 52px 0; width: 100%; height: 80px; opacity: .55; pointer-events: none; } /* contact */ .contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; font-size: 14px; } .contact a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text); overflow-wrap: anywhere; } .contact a:hover { border-color: var(--accent); text-decoration: none; } .contact .k { color: var(--accent); font-size: 11.5px; } /* awards */ .awards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; } .award { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: border-color .25s, transform .25s; } .award:hover { border-color: var(--accent); transform: translateY(-2px); } .award-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); color: var(--accent-2); font-size: 16px; } .award h3 { font-family: var(--font-head); font-size: 16px; margin: 0 0 4px; line-height: 1.3; } .award-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; } .award-years { display: inline-flex; flex-wrap: wrap; gap: 6px; } .award-years a, .award-years span { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--accent); } .award-years a:hover { border-color: var(--accent); text-decoration: none; } @media (max-width: 400px) { .awards { grid-template-columns: 1fr; } } /* footer */ .footer { padding-top: 56px; padding-bottom: 40px; text-align: center; } .footer-tag { font-family: var(--font-head); font-size: 20px; margin: 0 0 8px; } .footer-keys { font-size: 12px; margin: 0; } @media (hover: none) { .footer-keys, .search-kbd, #search-jump kbd { display: none; } } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }