/* ============ TOKENS ============ */ :root { --bg: #0e0e11; --bg-soft: #141418; --ink: #f2f1ec; --muted: rgba(242, 241, 236, 0.55); --faint: rgba(242, 241, 236, 0.14); --accent: #c8f550; --font-display: "Clash Display", "Arial Black", sans-serif; --font-body: "General Sans", system-ui, sans-serif; --font-serif: "Fraunces", Georgia, serif; --font-mono: "JetBrains Mono", monospace; --pad: clamp(20px, 5vw, 96px); --ease: cubic-bezier(0.77, 0, 0.18, 1); } /* ============ BASE ============ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: no-preference) { /* "smooth-active" must NOT contain the substring "lenis" — Lenis regex-strips lenis-prefixed classes from and would destroy the token */ html.smooth-active { scroll-behavior: auto; } /* Lenis takes over */ } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } ::selection { background: var(--accent); color: var(--bg); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } ul, ol { list-style: none; } .mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .accent { color: var(--accent); } em { font-family: var(--font-serif); font-style: italic; font-weight: 400; } /* Masked line containers — overflow hidden enables y-translate reveals. JS wraps each [data-line]'s content in .line-inner and animates the inner. */ .line, [data-line] { display: block; overflow: hidden; } .line-inner { display: block; } /* Skip link — visually hidden until keyboard focus */ .skip-link { position: fixed; top: 12px; left: 12px; z-index: 110; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 0.8rem; padding: 10px 16px; border-radius: 6px; transform: translateY(-200%); transition: transform 0.2s; } .skip-link:focus { transform: translateY(0); } /* Fixed-nav offset for native anchor navigation (no-JS / reduced-motion path) */ .section, .hero, .contact { scroll-margin-top: 80px; } /* ============ PRELOADER (hidden unless JS enables) ============ */ .preloader { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: none; align-items: flex-end; justify-content: space-between; padding: var(--pad); } html.js-motion .preloader { display: flex; } .preloader-inner { display: flex; width: 100%; align-items: flex-end; justify-content: space-between; } .preloader-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 3vw, 2rem); } .preloader-count { font-size: clamp(3rem, 10vw, 8rem); color: var(--accent); line-height: 1; } /* ============ CURSOR (enabled by JS on fine pointers) ============ */ .cursor { position: fixed; top: 0; left: 0; z-index: 99; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); pointer-events: none; display: none; /* centering owned by JS (xPercent/yPercent) — see script.js */ mix-blend-mode: difference; transition: width 0.25s, height 0.25s; } html.js-cursor .cursor { display: block; } .cursor.is-hover { width: 48px; height: 48px; } /* ============ NAV ============ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); transition: transform 0.45s var(--ease), background 0.3s, backdrop-filter 0.3s; } .site-nav.is-hidden { transform: translateY(-110%); } .site-nav.is-scrolled { background: rgba(14, 14, 17, 0.7); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .nav-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; } .nav-links { display: flex; gap: clamp(14px, 3vw, 36px); } .nav-link { font-size: 0.85rem; color: var(--muted); transition: color 0.25s; position: relative; } .nav-link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.35s var(--ease); } .nav-link:hover { color: var(--ink); } .nav-link:hover::after { transform: scaleX(1); transform-origin: left; } .nav-cta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--faint); border-radius: 999px; padding: 9px 20px; transition: background 0.3s, color 0.3s, border-color 0.3s; } .nav-cta:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* ============ BUTTONS ============ */ .btn-pill { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--bg); font-weight: 600; font-size: 0.95rem; border-radius: 999px; padding: 16px 30px; transition: background 0.3s; will-change: transform; } .btn-pill .arrow { transition: transform 0.3s var(--ease); } .btn-pill:hover .arrow { transform: translateX(5px); } .btn-pill-lg { font-size: clamp(1rem, 2.4vw, 1.5rem); padding: 22px 44px; } /* ============ HERO ============ */ .hero { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--pad) 80px; position: relative; } .hero-eyebrow { color: var(--accent); margin-bottom: 18px; } .hero-name { font-family: var(--font-display); font-weight: 700; /* min 2.4rem: "NASARIWALA." must fit a 375px viewport minus padding */ font-size: clamp(2.4rem, 12vw, 11rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; } .hero-tagline { max-width: 560px; margin-top: 30px; font-size: clamp(1rem, 1.6vw, 1.25rem); color: var(--muted); } .hero-tagline em { color: var(--ink); } .hero-row { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; margin-top: 40px; } .hero-socials { display: flex; gap: 22px; } .hero-socials a { font-size: 0.85rem; color: var(--muted); transition: color 0.25s; } .hero-socials a:hover { color: var(--accent); } .hero-meta { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 60px; color: var(--muted); } /* Toptal badge: static below hero content on mobile, pinned right on desktop. No CSS transform here — GSAP animates transform on [data-reveal]. */ .hero-toptal { margin-top: 56px; align-self: center; } @media (min-width: 901px) { .hero-toptal { position: absolute; right: var(--pad); top: 52%; margin-top: 0; align-self: auto; } } .scroll-hint { position: absolute; bottom: 28px; right: var(--pad); display: flex; align-items: center; gap: 10px; color: var(--muted); } .scroll-hint-line { width: 56px; height: 1px; background: var(--muted); display: inline-block; position: relative; overflow: hidden; } .scroll-hint-line::after { content: ""; position: absolute; inset: 0; background: var(--accent); animation: hint-sweep 2.2s var(--ease) infinite; } @keyframes hint-sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } /* ============ STATS ============ */ .stats { border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); } .stats-row { display: grid; grid-template-columns: repeat(5, 1fr); } .stats-row li { padding: clamp(24px, 3.5vw, 48px) var(--pad); border-right: 1px solid var(--faint); display: flex; flex-direction: column; gap: 6px; } .stats-row li:last-child { border-right: none; } .stat-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1; color: var(--accent); } .stat-label { color: var(--muted); } /* ============ SECTIONS ============ */ .section { padding: clamp(90px, 12vw, 180px) var(--pad) 0; } .section-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(36px, 5vw, 72px); } .section-index { color: var(--accent); } .section-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; } /* ============ ABOUT ============ */ .about-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; } .about-lead { font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.45; font-weight: 500; } .about-lead .w { opacity: 1; } /* JS sets per-word opacity */ .about-card { border: 1px solid var(--faint); border-radius: 14px; background: var(--bg-soft); padding: clamp(20px, 2.5vw, 32px); } .about-facts li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--faint); } .about-facts li:last-child { border-bottom: none; } .about-facts span { color: var(--muted); flex: none; } .about-facts strong { font-weight: 500; text-align: right; } /* ============ EXPERIENCE ============ */ .xp-list { display: flex; flex-direction: column; } .xp-item { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: clamp(20px, 4vw, 64px); padding: clamp(36px, 5vw, 64px) 0; border-top: 1px solid var(--faint); } .xp-when { color: var(--accent); display: block; margin-bottom: 10px; } .xp-role { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 2rem); line-height: 1.15; } .xp-org { color: var(--muted); margin-top: 6px; font-size: 0.9rem; } .xp-bullets { display: flex; flex-direction: column; gap: 14px; } .xp-bullets li { color: var(--muted); padding-left: 22px; position: relative; } .xp-bullets li::before { content: "—"; position: absolute; left: 0; color: var(--accent); } .xp-bullets strong { color: var(--ink); font-weight: 600; } @media (min-width: 901px) { .xp-side { position: sticky; top: 110px; align-self: start; } } /* ============ SKILLS ============ */ .section-skills { padding-left: 0; padding-right: 0; } .section-skills .section-head, .skills-groups { padding-left: var(--pad); padding-right: var(--pad); } .skills-marquee { overflow: hidden; border-top: 1px solid var(--faint); border-bottom: 1px solid var(--faint); padding: 26px 0; display: flex; flex-direction: column; gap: 22px; } .marquee-track { display: flex; gap: 48px; width: max-content; white-space: nowrap; padding-right: 48px; } .marquee-track span { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.4rem); color: transparent; -webkit-text-stroke: 1px var(--muted); transition: color 0.3s; } .marquee-track span:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); } @supports not (-webkit-text-stroke: 1px #000) { .marquee-track span { color: var(--muted); } } /* CSS fallback animation; JS marquee replaces it when motion enabled */ @media (prefers-reduced-motion: no-preference) { [data-marquee="left"] { animation: m-left 30s linear infinite; } [data-marquee="right"] { animation: m-right 30s linear infinite; } } @keyframes m-left { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes m-right { from { transform: translateX(-50%); } to { transform: translateX(0); } } .skills-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: clamp(28px, 4vw, 56px); margin-top: clamp(40px, 6vw, 80px); } .skill-label { color: var(--accent); margin-bottom: 14px; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chips li { font-size: 0.82rem; color: var(--muted); border: 1px solid var(--faint); border-radius: 999px; padding: 7px 14px; transition: border-color 0.25s, color 0.25s; } .chips li:hover { border-color: var(--accent); color: var(--ink); } /* ============ WORK ============ */ .work-list { border-bottom: 1px solid var(--faint); } .work-row { display: grid; grid-template-columns: 70px 1fr auto 40px; align-items: center; gap: clamp(14px, 3vw, 40px); padding: clamp(26px, 4vw, 44px) 0; border-top: 1px solid var(--faint); transition: padding-left 0.4s var(--ease); } .work-row:hover { padding-left: 18px; } .work-num { color: var(--muted); } .work-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 4vw, 3.2rem); line-height: 1.05; transition: color 0.3s; } .work-row:hover .work-title { color: var(--accent); } .work-cat { color: var(--muted); } .work-arrow { font-size: clamp(1.3rem, 2.5vw, 2rem); transition: transform 0.35s var(--ease); } .work-row:hover .work-arrow { transform: translate(6px, -6px); } /* ============ NOW STRIP ============ */ .now-strip { margin: clamp(90px, 12vw, 180px) var(--pad) 0; border: 1px solid var(--faint); border-radius: 14px; padding: 22px 28px; display: flex; align-items: center; gap: 16px; background: var(--bg-soft); } .now-strip p { color: var(--muted); } .now-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 0 0 rgba(200, 245, 80, 0.5); animation: now-pulse 2s ease-out infinite; } @keyframes now-pulse { to { box-shadow: 0 0 0 12px rgba(200, 245, 80, 0); } } @media (prefers-reduced-motion: reduce) { .now-dot { animation: none; } } /* ============ EDUCATION ============ */ .edu-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 5vw, 72px); } .edu-card { border: 1px solid var(--faint); border-radius: 14px; padding: clamp(26px, 3.5vw, 44px); background: var(--bg-soft); } .edu-when { color: var(--muted); } .edu-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.8rem); margin-top: 12px; } .edu-sub { color: var(--muted); margin-top: 8px; font-size: 0.92rem; } .edu-note { margin-top: 18px; } .honors { display: flex; flex-direction: column; } .honors li { padding: 20px 0 20px 30px; border-top: 1px solid var(--faint); color: var(--muted); position: relative; } .honors li::before { content: "★"; position: absolute; left: 0; color: var(--accent); } .honors strong { color: var(--ink); font-weight: 600; } /* ============ CONTACT ============ */ .contact { min-height: 90vh; min-height: 90svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(90px, 12vw, 180px) var(--pad); gap: 30px; } .contact-eyebrow { color: var(--accent); } .contact-big { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 10vw, 9rem); line-height: 0.98; text-transform: uppercase; letter-spacing: -0.02em; } .contact-big em { text-transform: none; color: var(--accent); font-weight: 400; } .contact-big .line { padding-bottom: 0.12em; margin-bottom: -0.12em; } .contact-links { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; color: var(--muted); } .contact-links a { transition: color 0.25s; } .contact-links a:hover { color: var(--accent); } /* ============ FOOTER ============ */ .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 26px var(--pad); border-top: 1px solid var(--faint); color: var(--muted); } .to-top:hover { color: var(--accent); } /* ============ RESPONSIVE ============ */ @media (max-width: 900px) { .about-grid, .edu-grid { grid-template-columns: 1fr; } .about-card { max-width: 420px; } .xp-item { grid-template-columns: 1fr; gap: 18px; } .work-row { grid-template-columns: 1fr auto; } .work-num, .work-cat { display: none; } .stats-row { grid-template-columns: repeat(2, 1fr); } .stats-row li { border-bottom: 1px solid var(--faint); } .stats-row li:nth-child(even) { border-right: none; } .stats-row li:last-child { grid-column: 1 / -1; border-right: none; border-bottom: none; } } @media (max-width: 560px) { .nav-links { display: none; } .scroll-hint { display: none; } } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; } html { scroll-behavior: auto; } }