/* ============================================================ DESIGN TOKENS Change everything from here. Want a bolder, more creative look later? Mostly edit these variables + the fonts in index.html and the whole site follows. ============================================================ */ :root { color-scheme: light; /* Color — minimal monochrome with a single accent */ --bg: #f7f6f3; /* warm off-white */ --bg-alt: #efede8; /* subtle panel */ --bg-hero: #fcfbf9; /* landing: a hair lighter than --bg */ --ink: #14130f; /* near-black text */ --ink-soft: #57544d; /* muted text */ --line: #d9d6cf; /* hairlines / borders */ --accent: #2f4dff; /* the one pop of color — swap freely */ --accent-ink:#ffffff; /* Type */ --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Scale */ --step--2: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem); --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem); --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem); --step-2: clamp(1.6rem, 1.4rem + 1vw, 2.25rem); --step-3: clamp(2.2rem, 1.8rem + 2.2vw, 3.5rem); --step-4: clamp(2.8rem, 2rem + 5vw, 6rem); /* Spacing scale — for intra-section stacking */ --space-2: 1rem; --space-3: 1.5rem; --space-4: 2.5rem; /* Layout */ --container: 1140px; --gutter: clamp(1.25rem, 5vw, 4rem); --section-y: clamp(4.5rem, 10vw, 9rem); --radius: 14px; --rail: 220px; /* shared section label column */ --nav-h: 68px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* Dark theme — applied by the inline script + nav toggle. */ [data-theme="dark"] { color-scheme: dark; --bg:#0d0d0f; --bg-alt:#161618; --bg-hero:#131317; --ink:#f4f3ef; --ink-soft:#a3a097; --line:#2a2a2e; --accent:#7c8bff; --accent-ink:#0d0d0f; } /* ============================================================ RESET / BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero__scroll-line::after { width: 100%; } } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .35s var(--ease), color .35s var(--ease); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; padding: 0; } ::selection { background: var(--accent); color: var(--accent-ink); } /* Consistent, token-driven focus ring for keyboard users only */ :where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } .btn:focus-visible { outline-offset: 4px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--bg); padding: .6rem 1rem; z-index: 100; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: 50; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 80%, transparent); border-bottom: 1px solid transparent; transition: border-color .35s var(--ease), background-color .35s var(--ease); } .nav.is-scrolled { border-bottom-color: var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); } .nav__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; } .nav__dot { color: var(--accent); } .nav__right { display: flex; align-items: center; gap: 1.5rem; } .nav__links { display: flex; gap: 2rem; } .nav__links a { font-size: var(--step--1); color: var(--ink-soft); position: relative; transition: color .2s var(--ease); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: var(--ink); transition: width .25s var(--ease); } .nav__links a:hover, .nav__links a.is-active { color: var(--ink); } .nav__links a:hover::after, .nav__links a.is-active::after { width: 100%; } /* Theme toggle */ .nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 0; cursor: pointer; color: var(--ink-soft); transition: color .2s var(--ease); } .nav__theme:hover { color: var(--ink); } .nav__theme svg { display: block; } .nav__theme-moon { display: none; } [data-theme="dark"] .nav__theme-sun { display: none; } [data-theme="dark"] .nav__theme-moon { display: block; } .nav__toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav__toggle span { width: 24px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s var(--ease); } .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); } .nav.is-open .nav__toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); } /* ============================================================ HERO ============================================================ */ .hero { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: 8rem 4rem; position: relative; /* Landing reads a touch lighter than the content below, with a faint accent glow from the top for depth. The 1px border-top on the first section keeps the scroll transition crisp. */ background: radial-gradient(135% 95% at 50% 0%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 55%), var(--bg-hero); } .hero__eyebrow { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 1.5rem; } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-4); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 1.75rem; } .hero__lede { max-width: 48ch; font-size: var(--step-1); line-height: 1.45; color: var(--ink-soft); margin-bottom: var(--space-4); } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero__scroll { position: absolute; bottom: 2rem; left: var(--gutter); display: flex; align-items: center; gap: .75rem; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .hero__scroll-line { width: 50px; height: 1px; background: var(--line); position: relative; overflow: hidden; } .hero__scroll-line::after { content: ""; position: absolute; inset: 0; width: 50%; background: var(--ink); animation: scrollLine 2.2s var(--ease) infinite; } @keyframes scrollLine { 0%{transform:translateX(-100%);} 100%{transform:translateX(200%);} } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--step--1); font-weight: 500; padding: .85rem 1.5rem; border-radius: 999px; border: 1px solid var(--ink); transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--ink); color: var(--bg); } .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--bg); } /* ============================================================ SECTIONS (shared) ============================================================ */ .section { padding-block: var(--section-y); border-top: 1px solid var(--line); } .section__grid { display: grid; grid-template-columns: var(--rail) 1fr; gap: clamp(2rem, 5vw, 5rem); } .section__label, .section__num { font-family: var(--font-mono); font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); } .section__label { position: sticky; top: calc(var(--nav-h) + 2rem); height: max-content; } .section__num { display: block; font-size: var(--step-0); font-weight: 500; color: var(--accent); margin-bottom: .4rem; } .lead { font-family: var(--font-display); font-size: var(--step-2); line-height: 1.4; letter-spacing: -0.02em; color: var(--ink); margin-bottom: var(--space-3); font-weight: 400; } .section__body p { margin-bottom: var(--space-2); color: var(--ink-soft); max-width: 58ch; } .section__body p.lead { color: var(--ink); } /* About facts */ .facts { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; } .fact dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: .35rem; } .fact dd { font-weight: 500; } /* ============================================================ STAT PRIMITIVE One monospace key/value language in two tiers: the About "at a glance" strip (showcase — larger dd at --step-2) and the per-project metric rows (inline — dd at --step-1, with hairline dividers). Same vocabulary, deliberate size delta. ============================================================ */ .stat-strip { display: flex; flex-wrap: wrap; gap: 1.75rem 2rem; margin-top: var(--space-4); padding-top: 1.75rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; } .stat-strip > div { flex: 1 1 auto; min-width: max-content; } .stat-strip > div dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: .3rem; } .stat-strip > div dd { font-family: var(--font-mono); font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; line-height: 1; } .stats { display: flex; flex-wrap: wrap; gap: .9rem 0; margin-bottom: 1.25rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; } .stat { padding: .65rem 1.1rem .65rem 0; margin-right: 1.1rem; border-right: 1px solid var(--line); } .stat:last-child { border-right: 0; margin-right: 0; } .stat dt { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: .2rem; } .stat dd { font-family: var(--font-mono); font-size: var(--step-1); font-weight: 500; letter-spacing: -0.01em; color: var(--ink); } /* ============================================================ PROJECTS ============================================================ */ .projects { display: grid; border-block: 1px solid var(--line); } .project { position: relative; background: var(--bg); padding: clamp(2.25rem, 4vw, 3.25rem) 0; transition: background .3s var(--ease); } .project + .project { border-top: 1px solid var(--line); } /* Accent rail sits in the left gutter (clear of the text) and grows from the vertical centre outward on hover. */ .project::before { content: ""; position: absolute; left: -1rem; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: center; transition: transform .35s var(--ease); } .project:hover { background: var(--bg-alt); } .project:hover::before { transform: scaleY(1); } .project__meta { display: flex; flex-direction: row; align-items: baseline; gap: 1rem; margin-bottom: 1rem; } .project__body { min-width: 0; } .project__year { font-family: var(--font-mono); font-size: var(--step--1); } .project__badge { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); } .project__type { font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-left: auto; } .project__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 1rem; } .project__desc { color: var(--ink-soft); max-width: 58ch; margin-bottom: 1.25rem; } /* Tech stack — filled pill chips, token-relative so they adapt to dark mode. */ .tags { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.25rem; } .tags li { font-family: var(--font-mono); font-size: var(--step--1); line-height: 1; padding: .45rem .85rem; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-radius: 999px; color: var(--ink); white-space: nowrap; transition: border-color .2s var(--ease), background .2s var(--ease); } .tags li:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .project__links { display: flex; gap: 1.5rem; } .project__links a { font-size: var(--step--1); font-weight: 500; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .2s var(--ease), color .2s var(--ease); } .project__links a:hover { border-color: var(--accent); color: var(--accent); } /* "See more" link below the projects list */ .work__more { display: inline-block; margin-top: 2.5rem; font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-soft); border-bottom: 1px solid var(--line); padding-bottom: 3px; transition: color .2s var(--ease), border-color .2s var(--ease); } .work__more:hover { color: var(--accent); border-color: var(--accent); } /* ============================================================ EXPERIENCE / TIMELINE ============================================================ */ .timeline { display: grid; } /* Each item carries a segment of the spine via its left border; spacing lives in padding-bottom so the border stays continuous through the gap. The last item drops its border so the line ends exactly at the last node. */ .timeline__item { position: relative; margin-left: 6px; padding: 0 0 var(--space-4) 2rem; border-left: 2px solid var(--line); } .timeline__item:last-child { padding-bottom: 0; border-color: transparent; } .timeline__item::before { content: ""; position: absolute; left: -8px; top: .2rem; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--accent); transition: background .25s var(--ease); } .timeline__item:hover::before { background: var(--accent); } .timeline__when { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: .5rem; } .timeline__what h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; margin-bottom: .25rem; } .timeline__org { color: var(--ink-soft) !important; font-weight: 500; margin-bottom: .6rem !important; font-size: var(--step--1); } .timeline__what > p:last-child { margin-bottom: 0; } /* ============================================================ EDUCATION ============================================================ */ .edu__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1.5rem; margin-bottom: .6rem; } .edu__school { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; letter-spacing: -0.01em; } .edu__when { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); } .edu__degree { color: var(--ink) !important; font-weight: 500; margin-bottom: .6rem !important; } .edu__note { color: var(--ink-soft); max-width: 58ch; } /* ============================================================ SKILLS ============================================================ */ .skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 2rem; } .skills__group h4 { font-family: var(--font-mono); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-soft); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); } .skills__group ul { display: grid; gap: .5rem; } .skills__group li { font-weight: 500; } /* ============================================================ CONTACT ============================================================ */ .section--contact { text-align: left; } .contact__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.03em; line-height: 1.05; margin: 0 0 1rem; } .contact__lede { color: var(--ink-soft); max-width: 50ch; margin-bottom: 2rem; } .contact__email { display: inline-block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -0.02em; border-bottom: 2px solid var(--line); padding-bottom: 4px; transition: border-color .25s var(--ease), color .25s var(--ease); } .contact__email:hover { border-color: var(--accent); color: var(--accent); } .contact__socials { display: flex; gap: 2rem; margin-top: var(--space-4); flex-wrap: wrap; } .contact__socials a { font-size: var(--step--1); color: var(--ink-soft); transition: color .2s var(--ease); } .contact__socials a:hover { color: var(--ink); } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid var(--line); padding-block: 2rem; } .footer__inner { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.12em; } /* ============================================================ REVEAL ANIMATION (JS adds .is-visible) Hidden state is opt-in: only when JS is present (html.js) so no-JS / failed-script visitors always see content. Reduced motion forces everything visible (see media query above). ============================================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } html:not(.js) .reveal { opacity: 1; transform: none; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 820px) { .nav__links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 1rem var(--gutter) 2rem; transform: translateY(-120%); transition: transform .35s var(--ease); z-index: 40; } .nav.is-open .nav__links { transform: translateY(0); } .nav__links a { padding: .9rem 0; font-size: var(--step-1); border-bottom: 1px solid var(--line); } .nav__toggle { display: flex; } .section__grid { grid-template-columns: 1fr; gap: 1.5rem; } .section__label { position: static; } .facts { grid-template-columns: 1fr 1fr; } } @media (max-width: 460px) { .facts { grid-template-columns: 1fr; } .hero__actions { width: 100%; } .btn { flex: 1; justify-content: center; } .project__type { margin-left: 0; } .stat { border-right: 0; margin-right: 1.6rem; } }