/* * Ranbir Kumar portfolio. * Design language: dark engineer-minimal with startup energy. * Palette anchored on the iORA DocQA brand navy (#202B41); accents stay * desaturated on purpose per the "no flashy colors" constraint. */ :root { --bg: #070b13; --bg-alt: #0b1220; --surface: rgba(20, 28, 48, 0.92); --surface-2: rgba(24, 33, 54, 0.94); --brand-navy: #202b41; --line: rgba(148, 163, 198, 0.14); --line-strong: rgba(148, 163, 198, 0.28); --text: #e8edf7; --text-muted: #96a3bd; --accent: #5e82e8; --accent-soft: #8ba6f0; --accent-dim: rgba(94, 130, 232, 0.14); --live: #3fce8f; --amber: #d9a03f; --violet: #8d7fd4; --btn-ink: #0b1020; --nav-glass: rgba(10, 15, 27, 0.72); --glow-strength: 0.16; --radius: 14px; --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif; --font-head: "Space Grotesk", "Space Grotesk Fallback", var(--font-body); --font-mono: "JetBrains Mono", ui-monospace, monospace; } /* Light theme: same desaturated navy identity, inverted values. Toggled by data-theme on ; default (no attribute) stays dark. */ :root[data-theme="light"] { --bg: #eef3f9; --bg-alt: #e4ebf5; --surface: rgba(255, 255, 255, 0.92); --surface-2: rgba(240, 243, 249, 0.94); --brand-navy: #e4e9f4; --line: rgba(32, 43, 65, 0.12); --line-strong: rgba(32, 43, 65, 0.26); --text: #17203a; --text-muted: #4d5a75; --accent: #3d63d9; --accent-soft: #4a6de0; --accent-dim: rgba(61, 99, 217, 0.1); --live: #0e8f66; --amber: #a2690f; --violet: #6d5fc4; --btn-ink: #ffffff; --nav-glass: rgba(243, 245, 250, 0.78); --glow-strength: 0.1; } * { margin: 0; padding: 0; box-sizing: border-box; } /* scroll-behavior:smooth intentionally absent: it can no-op anchor and programmatic scrolls in some Chromium builds. script.js animates instead; scroll-padding covers the no-JS native jump fallback. */ html { scroll-padding-top: 84px; } body { background: linear-gradient(145deg, var(--bg) 0%, var(--bg-alt) 52%, var(--bg) 100%); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--accent); color: #fff; } .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; } .mono { font-family: var(--font-mono); } .accent { color: var(--accent-soft); } .accent-soft { color: var(--accent-soft); } h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.2; } h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); letter-spacing: -0.02em; } h3 { font-size: 1.22rem; } p { color: var(--text-muted); } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ---------- Nav ---------- */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 100; background: var(--nav-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.3s ease; } .nav.scrolled { border-bottom-color: var(--line); } .nav-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; height: 68px; display: flex; align-items: center; gap: 28px; } .brand { font-family: var(--font-head); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; margin-right: auto; } .brand-dot { color: var(--accent); } .nav-links { display: flex; gap: 22px; } .nav-links a { font-size: 0.86rem; color: var(--text-muted); transition: color 0.2s ease; position: relative; padding: 4px 0; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px; background: var(--accent); transition: right 0.25s ease; } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a:hover::after, .nav-links a.active::after { right: 0; } .nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; } .nav-burger span { width: 22px; height: 2px; background: var(--text); transition: transform 0.25s ease, opacity 0.25s ease; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Buttons, badges, tags ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 0.92rem; padding: 12px 22px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent); color: var(--btn-ink); } .btn-primary:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(94, 130, 232, 0.55); } .btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; } .btn-ghost:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); } .btn-small { padding: 9px 16px; font-size: 0.84rem; border-radius: 8px; } .btn-big { padding: 15px 28px; font-size: 1rem; } .badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--text-muted); white-space: nowrap; } .badge-live { color: var(--live); border-color: rgba(63, 206, 143, 0.35); } .badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); } .badge-local { color: var(--amber); border-color: rgba(217, 160, 63, 0.4); } .badge-offline { color: var(--text-muted); } .badge-award { color: var(--accent-soft); border-color: rgba(139, 166, 240, 0.4); } .badge-review { color: var(--accent-soft); border-color: rgba(139, 166, 240, 0.4); } .tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); background: var(--brand-navy); border: 1px solid var(--line); padding: 4px 10px; border-radius: 6px; transition: color 0.2s ease, border-color 0.2s ease; } .tag:hover { color: var(--accent-soft); border-color: var(--accent); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6); } /* ---------- Sections ---------- */ .section { padding: 96px 0; } .section-alt { background: var(--bg-alt); } .section-head { margin-bottom: 48px; max-width: 720px; } .section-kicker { display: block; color: var(--accent); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .section-sub { margin-top: 14px; font-size: 0.95rem; } .section-sub .badge { margin: 0 2px; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 170px 0 90px; overflow: hidden; } .hero-glow { position: absolute; top: -220px; right: -160px; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(94, 130, 232, var(--glow-strength)) 0%, rgba(32, 43, 65, 0.08) 45%, transparent 70%); animation: drift 14s ease-in-out infinite alternate; pointer-events: none; } @keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 40px) scale(1.08); } } .hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 56px; align-items: center; } .hero-copy { min-width: 0; } .hero-eyebrow { color: var(--accent); font-size: 0.9rem; margin-bottom: 18px; } .hero-title { font-size: clamp(2.1rem, 5vw, 3.4rem); letter-spacing: -0.03em; margin-bottom: 20px; } .hero-sub { font-size: 1.08rem; max-width: 560px; min-height: 3.6em; } .hero-rotator-wrap { display: inline-block; width: 19ch; white-space: nowrap; vertical-align: baseline; } .hero-rotator { font-weight: 600; border-bottom: 1px dashed var(--accent); transition: opacity 0.3s ease, transform 0.3s ease; display: inline-block; } .hero-rotator.swap { opacity: 0; transform: translateY(8px); } .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero-socials { display: flex; gap: 6px; margin-left: 4px; } .hero-socials a { display: inline-flex; padding: 10px; border-radius: 10px; color: var(--text-muted); transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease; } .hero-socials a:hover { color: var(--accent-soft); background: var(--accent-dim); transform: translateY(-2px); } .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); } .stat { display: flex; flex-direction: column; gap: 2px; } .stat-top { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--text); } .stat-bottom { font-size: 0.78rem; color: var(--text-muted); } .hero-proof-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; max-width: 100%; min-width: 0; } .hero-proof-rail a { display: grid; gap: 2px; min-height: 96px; padding: 13px 14px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 86%, transparent); border-radius: 10px 4px 10px 4px; position: relative; overflow: hidden; } .hero-proof-rail a::before { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--amber), transparent); opacity: 0.75; } .hero-proof-rail span { color: var(--amber); font-size: 0.66rem; letter-spacing: 0.16em; } .hero-proof-rail strong { color: var(--text); font-size: 0.78rem; letter-spacing: 0.04em; } .hero-proof-rail em { color: var(--text-muted); font-style: normal; font-size: 0.68rem; line-height: 1.45; } .hero-visual { display: flex; justify-content: center; } .portrait-frame { position: relative; width: 100%; max-width: 320px; display: grid; justify-items: center; gap: 12px; } .portrait-badge { position: relative; z-index: 4; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--text-muted); font-size: 0.68rem; padding: 8px 14px; border-radius: 999px; text-align: center; max-width: 100%; } /* ---------- Placeholders (images pending) ---------- */ .placeholder { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, rgba(94, 130, 232, 0.05) 0%, transparent 55%), var(--brand-navy); display: flex; align-items: center; justify-content: center; min-height: 240px; overflow: hidden; } .placeholder::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.35; } .ph-label { position: relative; color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.14em; text-align: center; line-height: 1.9; } .placeholder-portrait { aspect-ratio: 4 / 5; min-height: 0; } .placeholder-wide { min-height: 150px; margin-bottom: 18px; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; } .about-story { display: flex; flex-direction: column; gap: 16px; } .about-story p { font-size: 1.02rem; } .story-thesis { color: var(--amber); font-size: 0.78rem !important; letter-spacing: 0.06em; border: 1px solid var(--line); background: var(--surface-2); padding: 12px 14px; border-radius: 10px 4px 10px 4px; } .about-facts { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .fact-row { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 16px 20px; font-size: 0.92rem; border-bottom: 1px solid var(--line); background: var(--surface); } .fact-row:last-child { border-bottom: 0; } .fact-key { color: var(--accent); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 3px; } .fact-row span:last-child { color: var(--text-muted); } .fact-strong { background: color-mix(in srgb, var(--surface-2) 80%, var(--amber) 4%); } /* ---------- Experience timeline ---------- */ .timeline { position: relative; display: flex; flex-direction: column; gap: 28px; padding-left: 26px; } .timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1.5px; background: linear-gradient(to bottom, var(--accent), var(--line)); } .tl-item { position: relative; } .tl-item::before { content: ""; position: absolute; left: -26.5px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2.5px solid var(--accent); } .tl-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .tl-date { color: var(--accent-soft); font-size: 0.8rem; } .tl-org { color: var(--accent-soft); font-weight: 500; } .tl-org::before { content: "ยท "; color: var(--text-muted); } .tl-tagline { color: var(--text-muted); font-size: 0.76rem; margin: 8px 0 14px; letter-spacing: 0.04em; } .tl-body ul { display: flex; flex-direction: column; gap: 10px; } .tl-body li { color: var(--text-muted); padding-left: 18px; position: relative; font-size: 0.95rem; } .tl-body li::before { content: ">"; font-family: var(--font-mono); position: absolute; left: 0; color: var(--accent); } .impact-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; } .impact-strip span { border: 1px solid var(--line); background: var(--surface-2); padding: 8px 10px; border-radius: 8px 3px 8px 3px; color: var(--text-muted); font-size: 0.68rem; line-height: 1.45; } .impact-strip strong { display: block; color: var(--amber); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- Projects ---------- */ .project-category { padding-top: 12px; } .project-category + .project-category { margin-top: 64px; } .project-category-head { position: relative; margin-bottom: 10px; padding: 18px 0 6px 18px; border-top: 1px solid var(--line); } .project-category-head::before { content: ""; position: absolute; left: 0; top: 16px; width: 10px; height: 10px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); } .project-category-kicker { display: block; color: var(--amber); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; } .project-category-head h3 { font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -0.02em; } .project-category-grid { margin-top: 24px; } .project { display: grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items: center; padding: 44px 0; border-bottom: 1px solid var(--line); } .project:last-of-type { border-bottom: 0; } .project-flip .project-media { order: 2; } .project-flip .project-body { order: 1; } .project-media .placeholder { transition: transform 0.3s ease, border-color 0.3s ease; } .project:hover .project-media .placeholder { transform: translateY(-4px); border-color: var(--accent); } .project-topline { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; } .project-index { color: var(--accent); font-size: 0.8rem; letter-spacing: 0.1em; } .project h3 { font-size: 1.65rem; letter-spacing: -0.02em; margin-bottom: 6px; } .project-tagline { color: var(--text); font-weight: 500; margin-bottom: 12px; } .project-body > p:not(.project-tagline) { font-size: 0.96rem; } .project-links { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .github-meta { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.06em; border: 1px solid var(--line); border-radius: 8px 3px 8px 3px; background: var(--surface); padding: 7px 10px; } .github-meta::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); opacity: 0.65; } .github-meta-active { color: var(--text); border-color: rgba(63, 206, 143, 0.28); } .github-meta-active::before { background: var(--live); box-shadow: 0 0 7px var(--live); opacity: 1; } .github-meta-quiet { border-color: rgba(217, 160, 63, 0.3); } .github-meta-quiet::before { background: var(--amber); opacity: 0.9; } .github-meta-archived, .github-meta-unavailable { opacity: 0.78; } .proof-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; } .proof-metrics span, .research-proof span, .course-clusters span, .role-fit-grid span { border: 1px solid var(--line); background: var(--surface-2); border-radius: 8px 3px 8px 3px; } .proof-metrics span { padding: 9px 10px; color: var(--text-muted); font-size: 0.68rem; line-height: 1.45; } .proof-metrics strong { display: block; color: var(--amber); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } .field-ai-diagram { min-height: 330px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, rgba(217, 160, 63, 0.08), transparent 46%), linear-gradient(160deg, rgba(63, 206, 143, 0.07), transparent 60%), var(--brand-navy); position: relative; overflow: hidden; padding: 24px; } .field-ai-diagram::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px), repeating-linear-gradient(135deg, transparent 0 22px, rgba(217, 160, 63, 0.1) 23px, transparent 24px); background-size: 28px 28px, 28px 28px, auto; opacity: 0.38; } .field-grid, .field-readout { position: relative; z-index: 1; } .field-grid { display: grid; grid-template-columns: 1fr 22px 1fr; gap: 10px; align-items: center; } .field-node { display: flex; align-items: center; justify-content: center; min-height: 58px; border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--surface) 78%, transparent); border-radius: 10px 4px 10px 4px; color: var(--text); font-size: 0.7rem; letter-spacing: 0.08em; text-align: center; } .field-link { height: 1px; background: linear-gradient(90deg, var(--amber), transparent); } .field-readout { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .field-readout span { color: var(--amber); border: 1px solid var(--line); background: var(--surface-2); padding: 7px 10px; border-radius: 999px; font-size: 0.68rem; } /* ---------- Research ---------- */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .paper .badge { margin-bottom: 16px; } .paper h3 { margin-bottom: 10px; } .paper p { font-size: 0.94rem; } .paper .project-links { margin-top: 16px; } .research-proof { display: grid; gap: 8px; margin-top: 14px; } .research-proof span { padding: 8px 10px; color: var(--text-muted); font-size: 0.68rem; } .research-proof strong { color: var(--amber); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; } /* ---------- Robotics ---------- */ .robotics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .robo h3 { margin-bottom: 8px; } .robo p { font-size: 0.92rem; } .robo-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: -8px 0 28px; } .robo-proof { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; border-radius: 10px 4px 10px 4px; } .robo-proof strong { display: block; color: var(--amber); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; } .robo-proof span { color: var(--text-muted); font-size: 0.76rem; } .robo-diagram { min-height: 170px; margin-bottom: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, rgba(94, 130, 232, 0.08), transparent 58%), var(--brand-navy); position: relative; overflow: hidden; } .robo-diagram::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; opacity: 0.32; } .robo-caption { position: absolute; left: 14px; bottom: 12px; color: var(--amber); font-size: 0.62rem; letter-spacing: 0.18em; } .rover-body { position: absolute; left: 50%; top: 52%; width: 132px; height: 42px; transform: translate(-50%, -50%); border: 2px solid var(--accent-soft); border-radius: 12px 4px 12px 4px; background: rgba(94, 130, 232, 0.08); } .rover-wheel { position: absolute; top: 69%; width: 28px; height: 28px; border: 2px solid var(--amber); border-radius: 50%; } .rover-wheel.w1 { left: calc(50% - 74px); } .rover-wheel.w2 { left: calc(50% + 46px); } .rover-mast { position: absolute; left: 50%; top: 26%; width: 2px; height: 54px; background: var(--accent-soft); } .rover-mast::after { content: ""; position: absolute; top: -8px; left: -10px; width: 22px; height: 12px; border: 1px solid var(--accent-soft); border-radius: 4px; background: var(--surface-2); } .rover-scan { position: absolute; left: 50%; top: 22%; width: 118px; height: 78px; transform: translateX(-50%); border: 1px dashed rgba(139, 166, 240, 0.55); border-bottom: 0; border-radius: 100px 100px 0 0; } .rank-number { position: absolute; inset: 28px 0 auto; text-align: center; font-family: var(--font-head); font-size: 3.2rem; color: var(--accent-soft); } .rank-label, .score-label { position: absolute; inset: 88px 0 auto; text-align: center; color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.18em; } .rank-orbit { position: absolute; width: 122px; height: 122px; left: 50%; top: 22px; transform: translateX(-50%); border: 1px dashed var(--line-strong); border-radius: 50%; } .score-ring { position: absolute; left: 50%; top: 24px; width: 82px; height: 82px; transform: translateX(-50%); border: 2px solid var(--amber); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 1.4rem; } .score-court { position: absolute; left: 50%; bottom: 42px; width: 144px; height: 38px; transform: translateX(-50%); border: 1px solid var(--line-strong); border-radius: 50%; } /* ---------- Mini projects + WIP ---------- */ .mini-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .mini p { font-size: 0.93rem; } .mini-proof { margin-top: 12px; color: var(--amber); font-size: 0.7rem !important; letter-spacing: 0.04em; } /* ---------- Skills ---------- */ .skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .skill-group h3 { font-size: 0.82rem; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; } .skills-grid .skill-group:last-child { grid-column: 1 / -1; } /* ---------- Achievements ---------- */ .ach-list { display: flex; flex-direction: column; } .ach { display: grid; grid-template-columns: 90px 1fr; gap: 20px; padding: 22px 4px; border-bottom: 1px solid var(--line); align-items: baseline; } .ach:last-of-type { border-bottom: 1px solid var(--line); } .ach-year { color: var(--accent); font-size: 0.85rem; } .ach p { font-size: 0.98rem; } .ach strong { color: var(--text); font-weight: 600; } .proof-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 28px; } .proof-tile { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; } .proof-tile::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--amber), transparent); } .proof-rank { color: var(--amber); font-size: 0.72rem; letter-spacing: 0.12em; } .proof-tile h3 { margin: 8px 0 6px; font-size: 1.05rem; } .proof-tile p { font-size: 0.86rem; } /* ---------- Education ---------- */ .edu-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .edu-cgpa { display: flex; flex-direction: column; align-items: flex-end; } .edu-course { margin-top: 14px; font-size: 0.92rem; } .course-clusters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .course-clusters span { color: var(--text-muted); font-size: 0.7rem; padding: 7px 10px; } /* ---------- Contact + footer ---------- */ .contact { padding-bottom: 120px; } .contact-inner { text-align: center; max-width: 760px; } .contact h2 { font-size: clamp(2rem, 4.5vw, 3rem); margin: 14px 0 16px; } .contact-sub { font-size: 1.02rem; } .contact-actions { justify-content: center; margin-top: 34px; } .role-fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; } .role-fit-grid span { color: var(--text); font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; padding: 9px 8px; } .contact-form { position: relative; text-align: left; margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(135deg, rgba(214, 159, 74, 0.08), transparent 42%), var(--surface); box-shadow: 0 22px 48px -34px rgba(0, 0, 0, 0.65); } .contact-form::before { content: ""; position: absolute; top: 12px; right: 12px; width: 18px; height: 18px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); opacity: 0.75; } .contact-form-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .contact-form h3 { font-size: 1.2rem; margin: 0; } .contact-form-head span { color: var(--amber); font-size: 0.66rem; letter-spacing: 0.12em; } .contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .contact-form label { display: grid; gap: 8px; color: var(--text-muted); font-size: 0.72rem; letter-spacing: 0.06em; } .contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line-strong); border-radius: 10px 4px 10px 4px; background: color-mix(in srgb, var(--bg) 78%, transparent); color: var(--text); font: 500 0.95rem var(--font-body); letter-spacing: 0; padding: 12px 13px; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .contact-form textarea { margin-top: 14px; min-height: 132px; resize: vertical; line-height: 1.55; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: color-mix(in srgb, var(--text-muted) 68%, transparent); } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--accent); background: color-mix(in srgb, var(--surface-2) 88%, transparent); box-shadow: 0 0 0 3px var(--accent-dim); } .contact-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; } .contact-form button[disabled] { opacity: 0.62; cursor: wait; transform: none; } .contact-status { min-height: 1.4em; margin-top: 12px; color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.06em; } .contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .footer { border-top: 1px solid var(--line); padding: 26px 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.82rem; } /* ---------- Reveal animations ---------- */ /* Hidden-until-revealed only applies when JS is running (html.js set inline in ); otherwise every .reveal stays visible for no-JS visitors. */ .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; transition: none; } .hero-glow { animation: none; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---------- Accessibility ---------- */ .skip-link { position: fixed; top: -48px; left: 16px; z-index: 200; background: var(--accent); color: var(--btn-ink); font-family: var(--font-head); font-weight: 600; font-size: 0.85rem; padding: 10px 16px; border-radius: 0 0 10px 10px; transition: top 0.2s ease; } .skip-link:focus { top: 0; } :focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 3px; border-radius: 4px; } /* ---------- Scroll progress ---------- */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); z-index: 150; } /* ---------- Back to top ---------- */ .to-top { position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, color 0.2s ease, border-color 0.2s ease; } .to-top.show { opacity: 1; pointer-events: auto; transform: none; } .to-top:hover { color: var(--accent-soft); border-color: var(--accent); } /* ---------- Branded placeholder mockups ---------- */ /* photo-style */ .ph-photo { flex-direction: column; gap: 12px; color: var(--text-muted); } .ph-icon { position: relative; opacity: 0.7; } .ph-monogram { position: relative; font-family: var(--font-head); font-weight: 700; font-size: 3.6rem; letter-spacing: -0.02em; color: var(--accent-soft); opacity: 0.85; } .placeholder-portrait.ph-photo::after { content: ""; position: absolute; inset: 18px; border: 1px solid var(--line); border-radius: 10px; pointer-events: none; } /* real screenshot in a browser frame: same chrome as the placeholder, solid border because nothing is pending anymore */ .shot { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--brand-navy); overflow: hidden; display: flex; flex-direction: column; } .shot img { display: block; width: 100%; height: auto; } .project-media .shot { transition: transform 0.3s ease, border-color 0.3s ease; } .project:hover .project-media .shot { transform: translateY(-4px); border-color: var(--accent); } /* ---------- Interactive project scenes ---------- */ .motion-panel { position: relative; isolation: isolate; overflow: hidden; --scene-dx: 0px; --scene-dy: 0px; --scene-speed: 1; } .project-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.18; transform: translate3d(var(--scene-dx), var(--scene-dy), 0); transition: opacity 0.28s ease, transform 0.18s ease-out, filter 0.28s ease; } .scene-booted .project-scene { opacity: 0.34; } .scene-active .project-scene { --scene-speed: 0.58; opacity: 0.56; filter: saturate(1.12); } .ph-browser .project-scene { top: 40px; z-index: 3; mix-blend-mode: screen; } .ph-browser .phb-bar { z-index: 4; } .ph-browser > a { display: block; position: relative; z-index: 2; } .ph-diagram .project-scene, .field-ai-diagram .project-scene, .robo-diagram .project-scene { z-index: 1; } .phd-flow, .field-grid, .field-readout, .rover-body, .rover-wheel, .rover-mast, .rover-scan, .robo-caption { z-index: 2; } .scene-docqa { background: radial-gradient(circle at 68% 44%, rgba(94, 130, 232, 0.24), transparent 25%), linear-gradient(135deg, transparent 12%, rgba(217, 160, 63, 0.12), transparent 72%); } .doc-node, .doc-core, .doc-route, .doc-pulse { position: absolute; display: block; } .doc-node { min-width: 42px; padding: 5px 8px; border: 1px solid rgba(217, 160, 63, 0.48); border-radius: 8px 3px 8px 3px; color: var(--amber); background: rgba(7, 11, 19, 0.66); font-size: 0.58rem; letter-spacing: 0.12em; text-align: center; } .doc-upload { top: 14%; left: 12%; } .doc-table { top: 58%; left: 18%; } .doc-memory { top: 34%; right: 12%; } .doc-core { right: 28%; top: 25%; width: 50px; height: 50px; border: 1px solid rgba(139, 166, 240, 0.62); border-radius: 50%; color: var(--accent-soft); background: rgba(94, 130, 232, 0.12); display: grid; place-items: center; font-size: 0.58rem; letter-spacing: 0.12em; } .doc-core-sql { top: 58%; right: 22%; width: 44px; height: 44px; color: var(--amber); border-color: rgba(217, 160, 63, 0.62); background: rgba(217, 160, 63, 0.11); } .doc-route { height: 1px; width: 46%; left: 25%; background: linear-gradient(90deg, transparent, var(--amber), var(--accent-soft), transparent); transform-origin: left center; } .route-rag { top: 34%; transform: rotate(-8deg); } .route-sql { top: 66%; transform: rotate(9deg); } .doc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 16px rgba(139, 166, 240, 0.75); } .pulse-a { top: 32%; left: 28%; } .pulse-b { top: 64%; left: 35%; background: var(--amber); box-shadow: 0 0 16px rgba(217, 160, 63, 0.72); } .scene-cache { background: radial-gradient(circle at 50% 48%, rgba(94, 130, 232, 0.2), transparent 31%), radial-gradient(circle at 58% 46%, rgba(217, 160, 63, 0.16), transparent 18%); } .cache-ring, .cache-particle, .cache-hit { position: absolute; display: block; } .cache-ring { width: 160px; aspect-ratio: 1; left: 50%; top: 50%; border: 1px dashed rgba(139, 166, 240, 0.5); border-radius: 50%; transform: translate(-50%, -50%); } .cache-particle { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-soft); box-shadow: 0 0 12px rgba(139, 166, 240, 0.7); } .cp-a { left: 18%; top: 15%; } .cp-b { left: 74%; top: 36%; background: var(--amber); box-shadow: 0 0 12px rgba(217, 160, 63, 0.68); } .cp-c { left: 38%; top: 78%; } .cache-hit { right: 18%; top: 48%; color: var(--live); font-size: 0.6rem; letter-spacing: 0.14em; text-shadow: 0 0 12px rgba(63, 206, 143, 0.7); } .scene-field { background: linear-gradient(90deg, rgba(63, 206, 143, 0.12), transparent 36%), repeating-linear-gradient(0deg, transparent 0 28px, rgba(217, 160, 63, 0.08) 29px, transparent 30px); } .field-scan, .field-box, .gps-ping { position: absolute; display: block; } .field-scan { top: 0; bottom: 0; width: 26%; left: -30%; background: linear-gradient(90deg, transparent, rgba(63, 206, 143, 0.2), transparent); } .field-box { border: 1px solid rgba(63, 206, 143, 0.76); border-radius: 6px 2px 6px 2px; box-shadow: 0 0 14px rgba(63, 206, 143, 0.22); } .fb-a { width: 64px; height: 42px; left: 17%; top: 24%; } .fb-b { width: 48px; height: 54px; right: 22%; top: 31%; border-color: rgba(217, 160, 63, 0.8); } .fb-c { width: 72px; height: 34px; left: 44%; bottom: 20%; } .gps-ping { right: 16%; bottom: 24%; width: 16px; height: 16px; border: 2px solid var(--amber); border-radius: 50%; } .scene-crave { background: radial-gradient(circle at 78% 28%, rgba(217, 160, 63, 0.14), transparent 24%), linear-gradient(140deg, rgba(94, 130, 232, 0.16), transparent 58%); } .driver-bar, .decision-dot, .explain-path { position: absolute; display: block; } .driver-bar { left: 10%; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--amber), rgba(139, 166, 240, 0.76)); transform-origin: left center; } .db-a { top: 19%; width: 38%; } .db-b { top: 28%; width: 24%; } .db-c { top: 37%; width: 46%; } .db-d { top: 46%; width: 31%; } .decision-dot { right: 20%; top: 30%; width: 18px; height: 18px; border-radius: 50%; background: var(--live); box-shadow: 0 0 20px rgba(63, 206, 143, 0.72); } .explain-path { right: 18%; width: 1px; height: 38%; background: linear-gradient(180deg, transparent, rgba(217, 160, 63, 0.85), transparent); } .ep-a { top: 20%; transform: rotate(26deg); } .ep-b { top: 34%; right: 32%; transform: rotate(-34deg); } .scene-rover-run { background: linear-gradient(180deg, transparent 0 64%, rgba(217, 160, 63, 0.08) 65%, transparent 100%), repeating-linear-gradient(115deg, transparent 0 20px, rgba(139, 166, 240, 0.1) 21px, transparent 22px); } .terrain-strip, .runner-rover, .runner-rover span, .runner-dust { position: absolute; display: block; } .terrain-strip { left: 0; right: 0; bottom: 24px; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); } .runner-rover { left: -72px; bottom: 22px; width: 58px; height: 26px; } .runner-body { left: 8px; top: 5px; width: 42px; height: 13px; border: 1px solid var(--accent-soft); border-radius: 7px 2px 7px 2px; background: rgba(94, 130, 232, 0.14); } .runner-mast { left: 31px; top: -6px; width: 1px; height: 13px; background: var(--accent-soft); } .runner-wheel { bottom: 0; width: 12px; height: 12px; border: 2px solid var(--amber); border-radius: 50%; } .rw-a { left: 8px; } .rw-b { right: 8px; } .runner-dust { bottom: 26px; width: 22px; height: 1px; background: linear-gradient(90deg, transparent, rgba(217, 160, 63, 0.72), transparent); } .dust-a { left: 18%; } .dust-b { left: 54%; } .rover-wheel::after, .runner-wheel::after { content: ""; position: absolute; top: 2px; bottom: 2px; left: 50%; width: 1px; background: currentColor; transform-origin: center; } @media (pointer: fine) and (prefers-reduced-motion: no-preference) { .scene-docqa .doc-route { animation: routePulse calc(2.4s * var(--scene-speed)) ease-in-out infinite; } .scene-docqa .doc-pulse { animation: packetMove calc(3.4s * var(--scene-speed)) ease-in-out infinite; } .scene-docqa .pulse-b { animation-delay: 0.8s; } .scene-cache .cache-ring { animation: orbit calc(18s * var(--scene-speed)) linear infinite; } .scene-cache .cache-particle { animation: cacheFloat calc(5.8s * var(--scene-speed)) ease-in-out infinite; } .scene-cache .cp-b { animation-delay: -1.3s; } .scene-cache .cp-c { animation-delay: -2.4s; } .scene-cache .cache-hit { animation: cacheHit calc(2.8s * var(--scene-speed)) ease-in-out infinite; } .scene-field .field-scan { animation: fieldScan calc(4.8s * var(--scene-speed)) ease-in-out infinite; } .scene-field .field-box { animation: boxLock calc(2.8s * var(--scene-speed)) ease-in-out infinite; } .scene-field .fb-b { animation-delay: -0.9s; } .scene-field .fb-c { animation-delay: -1.5s; } .scene-field .gps-ping { animation: gpsPing calc(2.2s * var(--scene-speed)) ease-out infinite; } .scene-crave .driver-bar { animation: driverPulse calc(3.2s * var(--scene-speed)) ease-in-out infinite; } .scene-crave .db-b { animation-delay: -0.5s; } .scene-crave .db-c { animation-delay: -1.1s; } .scene-crave .db-d { animation-delay: -1.6s; } .scene-crave .decision-dot { animation: decisionBeat calc(2.4s * var(--scene-speed)) ease-in-out infinite; } .scene-crave .explain-path { animation: pathGlow calc(2.8s * var(--scene-speed)) ease-in-out infinite; } .scene-rover-run .runner-rover { animation: roverRun calc(8.5s * var(--scene-speed)) linear infinite; } .scene-rover-run .runner-wheel, .rover-diagram.scene-active .rover-wheel::after { animation: wheelSpin calc(0.8s * var(--scene-speed)) linear infinite; } .scene-rover-run .runner-dust { animation: dustDrift calc(2.2s * var(--scene-speed)) ease-in-out infinite; } .scene-rover-run .dust-b { animation-delay: -1.1s; } } html.scene-paused .project-scene, html.scene-paused .project-scene *, html.scene-paused .project-scene::before, html.scene-paused .project-scene::after { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce) { .project-scene { display: none; } } @keyframes routePulse { 0%, 100% { opacity: 0.2; filter: blur(0); } 50% { opacity: 0.85; filter: blur(0.2px); } } @keyframes packetMove { 0% { transform: translateX(0) scale(0.75); opacity: 0; } 18%, 70% { opacity: 1; } 100% { transform: translateX(150px) scale(1.05); opacity: 0; } } @keyframes cacheFloat { 0%, 100% { transform: translate(0, 0) scale(0.9); } 50% { transform: translate(34px, -24px) scale(1.18); } } @keyframes cacheHit { 0%, 58%, 100% { opacity: 0.25; transform: translateY(4px); } 68%, 84% { opacity: 1; transform: translateY(0); } } @keyframes fieldScan { 0%, 100% { transform: translateX(0); opacity: 0; } 15%, 80% { opacity: 1; } 100% { transform: translateX(520%); } } @keyframes boxLock { 0%, 100% { opacity: 0.35; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } } @keyframes gpsPing { 0% { box-shadow: 0 0 0 0 rgba(217, 160, 63, 0.52); opacity: 1; } 100% { box-shadow: 0 0 0 26px rgba(217, 160, 63, 0); opacity: 0.35; } } @keyframes driverPulse { 0%, 100% { transform: scaleX(0.62); opacity: 0.45; } 50% { transform: scaleX(1); opacity: 0.95; } } @keyframes decisionBeat { 0%, 100% { transform: scale(0.86); opacity: 0.65; } 50% { transform: scale(1.12); opacity: 1; } } @keyframes pathGlow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.9; } } @keyframes roverRun { from { transform: translateX(-10px); } to { transform: translateX(390px); } } @keyframes wheelSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes dustDrift { 0%, 100% { opacity: 0; transform: translateX(0); } 35%, 70% { opacity: 0.65; } 100% { transform: translateX(-34px); } } /* browser-frame style */ .ph-browser { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; min-height: 280px; } .phb-bar { position: relative; display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(10, 15, 27, 0.6); border-radius: var(--radius) var(--radius) 0 0; } .phb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); } .phb-url { margin-left: 10px; font-size: 0.66rem; color: var(--text-muted); background: var(--brand-navy); border: 1px solid var(--line); padding: 3px 10px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 75%; } /* diagram style */ .ph-diagram { min-height: 280px; padding: 28px 20px 44px; } .phd-flow { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; } .phd-node { font-size: 0.72rem; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--line-strong); padding: 7px 16px; border-radius: 8px; white-space: nowrap; } .phd-node-accent { color: var(--accent-soft); border-color: var(--accent); background: var(--accent-dim); } .phd-arrow { width: 1.5px; height: 14px; background: var(--line-strong); position: relative; } .phd-arrow::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--line-strong); } /* NOTE: content-visibility:auto was tried here and reverted; it breaks anchor jumps (nav links land mid-hero with unrendered sections). */ @media (prefers-reduced-motion: reduce) { .to-top { transition: none; } } /* ---------- Responsive ---------- */ @media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero-visual { order: -1; } .portrait-frame { max-width: 240px; } .hero { padding-top: 130px; } .hero-sub { min-height: 5.4em; } .about-grid { grid-template-columns: 1fr; } .project, .project-flip { grid-template-columns: 1fr; gap: 24px; } .project-flip .project-media { order: 0; } .robotics-grid { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } .skills-grid { grid-template-columns: 1fr; } .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (max-width: 980px) { .nav-links { position: fixed; top: 68px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: 12px 24px 20px; display: none; } .nav-links.open { display: flex; } .nav-links a { padding: 12px 0; font-size: 1rem; } .nav-burger { display: flex; } .nav-cta { display: none; } } @media (max-width: 760px) { .section { padding: 72px 0; } .ach { grid-template-columns: 64px 1fr; gap: 12px; } .contact-form { padding: 20px; } .contact-form-head { align-items: start; flex-direction: column; gap: 6px; } .contact-form-grid { grid-template-columns: 1fr; } .contact-form-actions .btn { width: 100%; } .footer-inner { flex-direction: column; gap: 8px; } } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-muted); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } .theme-toggle:hover { color: var(--accent-soft); border-color: var(--accent); background: var(--accent-dim); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ---------- Certifications ---------- */ .cert-block { margin-top: 48px; } .cert-heading { font-size: 1rem; color: var(--accent); margin-bottom: 20px; } .cert-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cert h4 { font-size: 1.05rem; margin-bottom: 4px; } .cert-issuer { font-size: 0.86rem; } /* ---------- Motion layer (gated on fine pointers / no-preference) ---------- */ /* rover-cam reticle cursor: corner brackets, center dot, live coords */ .reticle { position: fixed; top: 0; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; pointer-events: none; z-index: 300; opacity: 0; transition: width 0.22s ease, height 0.22s ease, margin 0.22s ease, opacity 0.3s ease; } .reticle.on { opacity: 0.75; } .reticle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: var(--accent); } .ret-corner { position: absolute; width: 9px; height: 9px; transition: border-color 0.2s ease; } .ret-tl { top: 0; left: 0; border-top: 2px solid var(--accent); border-left: 2px solid var(--accent); } .ret-tr { top: 0; right: 0; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); } .ret-bl { bottom: 0; left: 0; border-bottom: 2px solid var(--accent); border-left: 2px solid var(--accent); } .ret-br { bottom: 0; right: 0; border-bottom: 2px solid var(--accent); border-right: 2px solid var(--accent); } .ret-coords { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); font-size: 9px; line-height: 1.3; color: var(--text-muted); white-space: pre; } .reticle.hovering { width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 1; } .reticle.hovering .ret-corner { border-color: var(--accent-soft); } @media (pointer: coarse), (prefers-reduced-motion: reduce) { .reticle { display: none; } } /* hero portrait float */ @media (prefers-reduced-motion: no-preference) { .portrait-frame { animation: floaty 7s ease-in-out infinite; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* animated gradient on the hero accent word */ @media (prefers-reduced-motion: no-preference) { .hero-title .accent { background: linear-gradient(90deg, var(--accent-soft), var(--accent), var(--violet), var(--accent-soft)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: hueflow 9s linear infinite; } } @keyframes hueflow { from { background-position: 0% 0; } to { background-position: 300% 0; } } /* section heading underline sweep, runs when the head reveals */ .section-head h2 { position: relative; padding-bottom: 14px; } .section-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--accent), transparent); transition: width 0.9s cubic-bezier(0.2, 0.6, 0.2, 1) 0.15s; } .js .section-head.reveal.in h2::after, html:not(.js) .section-head h2::after { width: 72px; } /* pointer-tracked glow on cards (JS sets --mx/--my) */ @media (pointer: fine) and (prefers-reduced-motion: no-preference) { .card, .shot, .placeholder { position: relative; } .glow-track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(94, 130, 232, 0.1), transparent 65%); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } .glow-track:hover::before { opacity: 1; } } /* tilt targets get their transform from JS; keep transitions smooth */ .tilt { transform-style: preserve-3d; will-change: transform; transition: transform 0.18s ease-out; } /* experience timeline draws itself as you scroll (JS sets --tl-progress) */ .timeline::before { background: linear-gradient(to bottom, var(--line), var(--line)); } .timeline::after { content: ""; position: absolute; left: 5px; top: 8px; width: 1.5px; height: calc((100% - 16px) * var(--tl-progress, 0)); background: linear-gradient(to bottom, var(--accent-soft), var(--accent)); box-shadow: 0 0 12px rgba(94, 130, 232, 0.5); transition: height 0.15s linear; } /* staggered reveal: JS assigns --stagger per element inside a batch */ .js .reveal { transition-delay: var(--stagger, 0ms); } .js .reveal.in { transition-delay: var(--stagger, 0ms); } /* ---------- Mission telemetry (robotics) ---------- */ .telemetry { border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, rgba(94, 130, 232, 0.05) 0%, transparent 55%), var(--surface); padding: 18px 22px; margin-bottom: 32px; position: relative; overflow: hidden; } .telemetry::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.3; pointer-events: none; } .tel-head, .tel-row, .mission-log { position: relative; } .tel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.72rem; letter-spacing: 0.1em; margin-bottom: 10px; } .tel-title { color: var(--accent); font-weight: 500; } .tel-status { color: var(--live); display: inline-flex; align-items: center; gap: 7px; } .tel-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 8px var(--live); } @media (prefers-reduced-motion: no-preference) { .tel-dot { animation: telblink 1.6s ease-in-out infinite; } } @keyframes telblink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .tel-row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); } .tel-row #missionClock { color: var(--text); } .mission-log { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 0.76rem; color: var(--text-muted); } .mission-log li::before { content: "> "; color: var(--accent); } .mission-log .log-date { display: inline-block; min-width: 66px; color: var(--accent-soft); } /* faint topographic contours behind the robotics section */ #robotics { position: relative; } #robotics::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient( circle at 85% 20%, transparent 0, transparent 56px, var(--line) 57px, transparent 58px ); opacity: 0.5; pointer-events: none; } #robotics .container { position: relative; } /* ---------- Pending action + incoming cards ---------- */ .btn-pending { border: 1px dashed var(--line-strong); color: var(--text-muted); background: transparent; cursor: default; } .mini-incoming { border-style: dashed; } .incoming-line { font-size: 0.74rem; color: var(--accent-soft); margin-bottom: 8px; } /* ========================================================= Identity layer v2: mission-control amber + HUD system. Amber is the signature; blue stays for interactive states. ========================================================= */ /* amber signature moments */ .section-kicker { color: var(--amber); } .hero-eyebrow { color: var(--amber); } .project-index { color: var(--amber); } .tel-title { color: var(--amber); } .wip-title, .cert-heading { color: var(--amber); } .ph-label { color: var(--amber); letter-spacing: 0.18em; } .fact-key { color: var(--amber); } .mission-log li::before { color: var(--amber); } .ach-year { color: var(--amber); } .scroll-progress { background: linear-gradient(90deg, var(--accent), var(--amber)); } .brand-dot { color: var(--amber); } .footer-eot { color: var(--amber); font-size: 0.74rem; letter-spacing: 0.1em; } /* section heads: HUD corner ticks + amber index line */ .section-head { position: relative; padding-left: 18px; } .section-head::before, .section-head::after { content: ""; position: absolute; left: 0; width: 12px; height: 12px; transition: width 0.6s ease 0.2s, height 0.6s ease 0.2s; } .section-head::before { top: -6px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); } .section-head::after { bottom: -6px; border-bottom: 2px solid var(--line-strong); border-left: 2px solid var(--line-strong); } .js .section-head.reveal.in::before { width: 26px; height: 16px; } /* cards: single HUD tick, top right */ .card::after, .shot::after { content: ""; position: absolute; top: -1px; right: -1px; width: 14px; height: 14px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); border-radius: 0 var(--radius) 0 0; opacity: 0.55; transition: width 0.25s ease, height 0.25s ease, opacity 0.25s ease; pointer-events: none; } .card { position: relative; } .card:hover::after, .shot:hover::after { width: 26px; height: 26px; opacity: 1; } /* circuit-trace divider along every section top (masked so it themes) */ .section { position: relative; } .section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px; background: var(--line-strong); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='10'%3E%3Cpath d='M0 5h64l6-4h44l6 4h60' fill='none' stroke='black'/%3E%3Ccircle cx='190' cy='5' r='1.8' fill='black'/%3E%3Cpath d='M192 5h68' stroke='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='10'%3E%3Cpath d='M0 5h64l6-4h44l6 4h60' fill='none' stroke='black'/%3E%3Ccircle cx='190' cy='5' r='1.8' fill='black'/%3E%3Cpath d='M192 5h68' stroke='black'/%3E%3C/svg%3E"); -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; opacity: 0.7; pointer-events: none; } .hero + .section::before { opacity: 0.9; } /* asymmetric radii: mechanical, not bubbly */ .btn { border-radius: 10px 4px 10px 4px; } .btn-small { border-radius: 8px 3px 8px 3px; } .badge { border-radius: 999px; } /* hero domain spec-strip */ .hero-domains { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 18px; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } .hero-domains span { display: inline-flex; align-items: center; } .hero-domains span + span::before { content: ""; width: 4px; height: 4px; margin: 0 10px; background: var(--amber); transform: rotate(45deg); opacity: 0.7; } /* mission badge: the hero's identity panel */ .mission-badge { position: relative; width: 100%; aspect-ratio: 4 / 5; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(135deg, rgba(94, 130, 232, 0.05) 0%, transparent 55%), var(--brand-navy); display: flex; align-items: center; justify-content: center; overflow: hidden; } .mission-badge::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.35; z-index: 1; pointer-events: none; } .mission-badge::after { content: ""; position: absolute; inset: auto 0 0; height: 38%; background: linear-gradient(to top, rgba(7, 11, 19, 0.78), transparent); z-index: 1; pointer-events: none; } .mission-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: contrast(1.06) saturate(0.92) brightness(0.9); z-index: 0; } :root[data-theme="light"] .mission-photo { filter: contrast(1.04) saturate(0.9) brightness(0.95); } .mb-tick { position: absolute; width: 14px; height: 14px; z-index: 3; } .mb-tl { top: 10px; left: 10px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); } .mb-tr { top: 10px; right: 10px; border-top: 2px solid var(--amber); border-right: 2px solid var(--amber); } .mb-bl { bottom: 10px; left: 10px; border-bottom: 2px solid var(--amber); border-left: 2px solid var(--amber); } .mb-br { bottom: 10px; right: 10px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); } .mb-orbit { position: absolute; width: 62%; aspect-ratio: 1; border: 1.5px dashed rgba(148, 163, 198, 0.35); border-radius: 50%; z-index: 2; mix-blend-mode: screen; } :root[data-theme="light"] .mb-orbit { border-color: rgba(32, 43, 65, 0.3); } @media (prefers-reduced-motion: no-preference) { .mb-orbit { animation: orbit 26s linear infinite; } } @keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .mission-badge .ph-monogram { position: relative; z-index: 1; } .mb-meta { position: absolute; bottom: 34px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 0.6rem; letter-spacing: 0.22em; color: var(--text-muted); z-index: 3; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); } .mb-meta span:first-child { color: var(--amber); } .mb-scan { position: absolute; left: 0; right: 0; top: -10%; height: 34%; background: linear-gradient(to bottom, transparent, rgba(94, 130, 232, 0.08), transparent); pointer-events: none; z-index: 3; } @media (prefers-reduced-motion: no-preference) { .mb-scan { animation: mbscan 5.5s ease-in-out infinite; } } @keyframes mbscan { 0%, 100% { transform: translateY(-40%); } 50% { transform: translateY(320%); } } /* hero boot-scan sweep, one pass on load */ @media (prefers-reduced-motion: no-preference) { .hero::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: 0; animation: bootscan 1.6s ease-out 0.3s 1; pointer-events: none; } } @keyframes bootscan { 0% { opacity: 0.9; transform: translateY(0); } 100% { opacity: 0; transform: translateY(72vh); } } /* keep the old portrait placeholder rules harmless if unused */ .placeholder-portrait { aspect-ratio: 4 / 5; min-height: 0; } /* ---------- Audit pass: scannable points, notes, gates ---------- */ .proj-points { display: flex; flex-direction: column; gap: 9px; } .proj-points li { color: var(--text-muted); font-size: 0.95rem; padding-left: 18px; position: relative; } .proj-points li::before { content: ">"; font-family: var(--font-mono); position: absolute; left: 0; color: var(--amber); } .proj-points strong { color: var(--text); font-weight: 600; } .demo-note { margin-top: 10px; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-muted); opacity: 0.85; } .footer-building { color: var(--text-muted); font-size: 0.74rem; } .footer-inner { flex-wrap: wrap; gap: 8px; } /* reticle can occlude text in narrow fine-pointer contexts */ @media (max-width: 900px) { .reticle { display: none; } } /* health-check downgraded badge keeps layout, loses the live glow */ .badge[data-health].health-down { color: var(--text-muted); border-color: var(--line-strong); } .badge[data-health].health-down::before { display: none; } .badge[data-health].health-stale { color: var(--amber); border-color: rgba(217, 160, 63, 0.4); } .badge[data-health].health-stale::before { background: var(--amber); box-shadow: 0 0 7px var(--amber); } .contact-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; } .contact-proof li { font-size: 0.72rem; letter-spacing: 0.05em; color: var(--text-muted); border: 1px solid var(--line); background: var(--surface); padding: 6px 12px; border-radius: 8px 3px 8px 3px; } .contact-proof li::before { content: "> "; color: var(--amber); } /* ---------- Score pass: ownership, evidence, systems board ---------- */ .owned { margin-top: 12px; font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-muted); border-left: 2px solid var(--amber); padding-left: 10px; } .owned span { color: var(--amber); text-transform: uppercase; letter-spacing: 0.1em; } .proven { margin-top: 12px; font-size: 0.72rem; color: var(--text-muted); } .proven a { color: var(--accent-soft); border-bottom: 1px dashed var(--line-strong); } .proven a:hover { border-bottom-color: var(--accent); } .paper-share { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--amber); } .systems-board, .github-board { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px 4px 10px 4px; background: var(--surface); font-size: 0.7rem; letter-spacing: 0.06em; } .github-board { margin-top: 10px; } .systems-board .sys { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); } .systems-board .sys-dot { width: 7px; height: 7px; border-radius: 50%; } .systems-board .sys-up .sys-dot { background: var(--live); box-shadow: 0 0 7px var(--live); } .systems-board .sys-down .sys-dot { background: var(--text-muted); opacity: 0.6; } .systems-board .sys-stale .sys-dot { background: var(--amber); box-shadow: 0 0 7px var(--amber); } .systems-board .sys-checked { color: var(--text-muted); opacity: 0.75; margin-left: auto; } .github-board .gh { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); } .github-board .gh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); } .github-board .gh-checked { color: var(--text-muted); opacity: 0.75; margin-left: auto; } /* mobile: copy and CTA before the identity card */ @media (max-width: 920px) { .hero-visual { order: 0; } } /* font fallback metrics: shrink layout shift while webfonts load */ @font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"); size-adjust: 101%; ascent-override: 97%; descent-override: 27%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* ========================================================= Ambient background field: blueprint grid + contour map + signal traces. Fixed layer under everything; alt sections stay translucent so the field reads through the page. ========================================================= */ :root { --bgf-grid: rgba(148, 163, 198, 0.055); --bgf-major: rgba(148, 163, 198, 0.085); --bgf-dot: rgba(200, 214, 245, 0.42); --bgf-dot-op: 0.34; --bgf-trace: rgba(217, 160, 63, 0.18); --bgf-trace-2: rgba(94, 130, 232, 0.14); --bgf-contour: rgba(139, 166, 240, 0.09); } :root[data-theme="light"] { --bgf-grid: rgba(32, 43, 65, 0.05); --bgf-major: rgba(32, 43, 65, 0.08); --bgf-dot: rgba(32, 43, 65, 0.4); --bgf-dot-op: 0.15; --bgf-trace: rgba(162, 105, 15, 0.14); --bgf-trace-2: rgba(61, 99, 217, 0.12); --bgf-contour: rgba(61, 99, 217, 0.08); } .bg-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } /* blueprint grid, faded at the edges so it never feels like wallpaper */ .bg-field::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--bgf-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bgf-grid) 1px, transparent 1px), linear-gradient(var(--bgf-major) 1px, transparent 1px), linear-gradient(90deg, var(--bgf-major) 1px, transparent 1px); background-size: 34px 34px, 34px 34px, 170px 170px, 170px 170px; -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 8%, black 24%, rgba(0,0,0,0.7) 52%, transparent 88%); mask-image: radial-gradient(ellipse 120% 90% at 50% 8%, black 24%, rgba(0,0,0,0.7) 52%, transparent 88%); } /* sparse dust / sensor noise */ .bg-field::after { content: ""; position: absolute; inset: 0; opacity: var(--bgf-dot-op); background-image: radial-gradient(1px 1px at 22px 34px, var(--bgf-dot) 50%, transparent 51%), radial-gradient(1px 1px at 88px 112px, var(--bgf-dot) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 156px 58px, var(--bgf-dot) 50%, transparent 51%), radial-gradient(1px 1px at 205px 160px, var(--bgf-dot) 50%, transparent 51%); background-size: 240px 200px; } .bg-topo { position: absolute; inset: -20% -10%; background: repeating-radial-gradient(ellipse at 18% 26%, transparent 0 48px, var(--bgf-contour) 49px, transparent 51px), repeating-radial-gradient(ellipse at 88% 72%, transparent 0 58px, var(--bgf-contour) 59px, transparent 61px); opacity: 0.9; } .bg-trace { position: absolute; height: 1px; width: 74vmax; transform-origin: left center; background: linear-gradient(90deg, transparent, var(--bgf-trace), transparent 72%); opacity: 0.9; } .bg-trace::after { content: ""; position: absolute; left: 34%; top: -3px; width: 7px; height: 7px; border: 1px solid var(--bgf-trace); background: var(--bg); transform: rotate(45deg); } .bg-trace-a { top: 18%; left: -6%; transform: rotate(-14deg); } .bg-trace-b { right: -18%; bottom: 20%; transform: rotate(22deg); background: linear-gradient(90deg, transparent, var(--bgf-trace-2), transparent 72%); } .bg-trace-b::after { left: 54%; border-color: var(--bgf-trace-2); } @media (prefers-reduced-motion: no-preference) { .bg-trace-a { animation: tracedrift-a 34s ease-in-out infinite alternate; } .bg-trace-b { animation: tracedrift-b 42s ease-in-out infinite alternate; } } @keyframes tracedrift-a { from { transform: translateY(0) rotate(-14deg); } to { transform: translateY(12vmin) rotate(-11deg); } } @keyframes tracedrift-b { from { transform: translateY(0) rotate(22deg); } to { transform: translateY(-10vmin) rotate(18deg); } } /* let the field read through the alternating sections and footer */ .section-alt { background: color-mix(in srgb, var(--bg-alt) 86%, transparent); } .footer { background: color-mix(in srgb, var(--bg) 70%, transparent); } @media (max-width: 920px) { .impact-strip, .proof-metrics, .robo-proof-grid, .proof-wall, .role-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hero-proof-rail { display: flex; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .hero-proof-rail a { flex: 0 0 238px; scroll-snap-align: start; } .field-grid { grid-template-columns: 1fr; } .field-link { width: 1px; height: 16px; justify-self: center; background: linear-gradient(180deg, var(--amber), transparent); } } @media (max-width: 560px) { .hero-proof-rail a { min-height: auto; } .proof-metrics span, .impact-strip span, .research-proof span, .course-clusters span, .role-fit-grid span { font-size: 0.66rem; } .proof-tile { padding: 16px; } .field-ai-diagram { min-height: 360px; } .systems-board .sys-checked, .github-board .gh-checked { margin-left: 0; flex-basis: 100%; } }