/* ═══════════════════════════════════════════════════════════════════════════ Baltermia Clopath — portfolio 1. Tokens 2. Base 3. Backdrop 4. Nav 5. Hero 6. Sections 7. About 8. Skills 9. Projects 10. Timeline 11. Contact 12. Footer 13. Motion 14. Responsive ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Tokens ──────────────────────────────────────────────────────────── */ :root { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* brand */ --violet: #7c5cff; --violet-deep: #512bd4; --cyan: #22d3ee; --blue: #3b82f6; --cpp: #00599c; --grad: linear-gradient(115deg, var(--violet-deep), var(--violet) 45%, var(--cyan)); /* --grad-name is per-theme, below: it has to read across a big two-line heading, so each theme needs its own contrast against the page. */ /* layout */ --wrap: 1140px; --wrap-narrow: 800px; --gutter: clamp(1.25rem, 5vw, 3rem); --radius: 18px; --radius-lg: 26px; --ease: cubic-bezier(.22, 1, .36, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --nav-h: 72px; } /* light (default) — the bare :root makes it the fallback when no data-theme attribute is set at all, e.g. with JavaScript disabled */ :root, :root[data-theme="light"] { color-scheme: light; --bg: #f7f7fb; --bg-elevated: #ffffff; --surface: rgba(255, 255, 255, .78); --surface-hover: #ffffff; --line: rgba(16, 18, 34, .12); --line-strong: rgba(16, 18, 34, .22); --text: #14161f; --text-soft: #414658; --text-muted: #6a7086; --glass: rgba(250, 250, 253, .72); --glass-solid: rgba(252, 252, 255, .97); --shadow: 0 22px 50px -24px rgba(24, 20, 60, .35); --card-shadow: 0 1px 2px rgba(20, 22, 40, .04), 0 10px 26px -18px rgba(20, 22, 40, .3); --grad-name: linear-gradient(118deg, #7c3aed 0%, #5b3ce0 32%, #3563e0 64%, #0891b2 100%); --orb-opacity: .38; --grid-opacity: .5; --noise-opacity: .025; } /* Every token above must be redeclared here, not just the ones that differ: the light block's bare :root also matches in dark mode, so anything this block leaves out would fall through to the light value. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #08080d; --bg-elevated: #0d0d15; --surface: rgba(255, 255, 255, .035); --surface-hover: rgba(255, 255, 255, .06); --line: rgba(255, 255, 255, .09); --line-strong: rgba(255, 255, 255, .16); --text: #eef0f7; --text-soft: #b3b8cc; --text-muted: #7b8199; --glass: rgba(10, 10, 16, .62); --glass-solid: rgba(11, 11, 18, .97); --shadow: 0 20px 60px -20px rgba(0, 0, 0, .9); --card-shadow: none; --grad-name: linear-gradient(118deg, #c4b5fd 0%, #8b6cff 28%, #5a6dff 58%, #22d3ee 100%); --orb-opacity: .5; --grid-opacity: .35; --noise-opacity: .035; } /* skill accents */ [data-accent="violet"] { --a: #8b6cff; --b: #512bd4; } [data-accent="cyan"] { --a: #22d3ee; --b: #0ea5e9; } [data-accent="blue"] { --a: #4c8dff; --b: #00599c; } [data-accent="slate"] { --a: #9aa6c4; --b: #4b5674; } /* ── 2. Base ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; } /* NOTE: no background here — body's background would paint over the fixed .backdrop (which sits at z-index:-1). The page background lives on . */ body { margin: 0; color: var(--text); font-family: var(--font-sans); font-size: 16px; line-height: 1.65; letter-spacing: -.011em; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color .5s var(--ease-soft), color .5s var(--ease-soft); } h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.035em; font-weight: 700; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } ::selection { background: var(--violet); color: #fff; } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; } .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: var(--wrap-narrow); } .skip-link { position: fixed; top: 12px; left: 12px; z-index: 200; padding: .6rem 1rem; background: var(--violet-deep); color: #fff; border-radius: 10px; transform: translateY(-160%); transition: transform .3s var(--ease); } .skip-link:focus { transform: none; } .gradient-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── 3. Backdrop ────────────────────────────────────────────────────────── */ .backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .backdrop__grid { position: absolute; inset: -2px; opacity: var(--grid-opacity); background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 10%, transparent 75%); } .backdrop__orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--orb-opacity); will-change: transform; } .backdrop__orb--a { width: 46vw; height: 46vw; min-width: 380px; min-height: 380px; top: -14vw; left: -8vw; background: radial-gradient(circle, #6d4bff, transparent 68%); animation: drift-a 24s var(--ease-soft) infinite alternate; } .backdrop__orb--b { width: 38vw; height: 38vw; min-width: 320px; min-height: 320px; top: 8vw; right: -10vw; background: radial-gradient(circle, #17b6d8, transparent 68%); animation: drift-b 30s var(--ease-soft) infinite alternate; } .backdrop__orb--c { width: 42vw; height: 42vw; min-width: 340px; min-height: 340px; top: 62vh; left: 32vw; background: radial-gradient(circle, #3f6fe0, transparent 70%); opacity: calc(var(--orb-opacity) * .6); animation: drift-c 36s var(--ease-soft) infinite alternate; } @keyframes drift-a { to { transform: translate3d(9vw, 7vh, 0) scale(1.15); } } @keyframes drift-b { to { transform: translate3d(-11vw, 10vh, 0) scale(1.2); } } @keyframes drift-c { to { transform: translate3d(-8vw, -12vh, 0) scale(.85); } } .backdrop__noise { position: absolute; inset: -50%; opacity: var(--noise-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 8s steps(6) infinite; } @keyframes grain { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-3%, 4%); } 40% { transform: translate(4%, -2%); } 60% { transform: translate(-2%, -4%); } 80% { transform: translate(3%, 3%); } } /* ── 4. Nav ─────────────────────────────────────────────────────────────── */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 100%; background: var(--grad); transform: scaleX(0); transform-origin: 0 50%; } .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background-color .4s var(--ease-soft), border-color .4s var(--ease-soft), backdrop-filter .4s; border-bottom: 1px solid transparent; } .nav.is-stuck { background: var(--glass); border-bottom-color: var(--line); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); } @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .nav.is-stuck { background: var(--glass-solid); } } .nav__inner { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 1rem; } .nav__brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; margin-right: auto; } .nav__mark { width: 26px; height: 26px; border-radius: 9px; background: var(--grad); box-shadow: 0 0 0 1px var(--line-strong), 0 6px 18px -6px var(--violet); transition: transform .5s var(--ease); } .nav__brand:hover .nav__mark { transform: rotate(135deg) scale(1.08); } .nav__brand-text { font-size: .98rem; } .nav__links { position: relative; display: flex; align-items: center; gap: .25rem; } .nav__links a { position: relative; z-index: 1; padding: .45rem .85rem; border-radius: 999px; font-size: .875rem; font-weight: 500; color: var(--text-muted); transition: color .3s var(--ease-soft); } .nav__links a:hover { color: var(--text); } .nav__links a.is-active { color: var(--text); } .nav__pill { position: absolute; z-index: 0; top: 50%; left: 0; height: 34px; width: var(--pill-w, 0px); transform: translate(var(--pill-x, 0), -50%); border-radius: 999px; background: var(--surface-hover); border: 1px solid var(--line); opacity: 0; transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s; } .nav__pill.is-on { opacity: 1; } .theme-toggle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text-soft); transition: color .3s, border-color .3s, background-color .3s, transform .3s var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--line-strong); transform: translateY(-2px); } .theme-toggle__icon { width: 19px; height: 19px; } .theme-toggle__icon > g { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transform-origin: 12px 12px; transition: opacity .35s var(--ease-soft), transform .55s var(--ease); } :root[data-theme="light"] .theme-toggle__moon { opacity: 0; transform: rotate(80deg) scale(.4); } :root[data-theme="dark"] .theme-toggle__sun { opacity: 0; transform: rotate(-80deg) scale(.4); } .nav__burger { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0; } .nav__burger span { display: block; width: 16px; height: 1.6px; margin: 3px auto; background: currentColor; border-radius: 2px; transition: transform .4s var(--ease), opacity .3s; } .nav__burger[aria-expanded="true"] span:first-child { transform: translateY(2.3px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-2.3px) rotate(-45deg); } /* ── 5. Hero ────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: calc(100svh - var(--nav-h)); display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 10vh, 7rem) 0 6rem; } /* .hero__inner keeps the page's --wrap width so hero text sits on the same left grid line as every section below; the blocks inside cap themselves. */ .hero__inner { position: relative; } .hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; padding: .38rem .9rem .38rem .7rem; margin-bottom: 1.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em; color: var(--text-soft); animation: rise .9s var(--ease) .05s both; } .hero__dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .hero__name { font-size: clamp(2.9rem, 9.5vw, 6.5rem); font-weight: 800; letter-spacing: -.045em; margin-bottom: .35em; max-width: 11ch; background: var(--grad-name); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Per-character entrance, injected by app.js. Each char animates, which makes it its own stacking context — so it cannot inherit the parent's clipped background. Instead every char paints the same gradient, sized to the whole heading and offset to its own position (those two custom properties are measured in app.js), which stitches back into one continuous gradient across the name. */ .hero__name .word { display: inline-block; white-space: nowrap; } .hero__name .char { display: inline-block; animation: char-in .85s var(--ease) both; animation-delay: calc(var(--i) * 34ms + 120ms); } .hero__name.is-split .char { background-image: var(--grad-name); background-size: var(--nw) var(--nh); background-position: calc(-1 * var(--cx)) calc(-1 * var(--cy)); background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; color: transparent; } /* no filter here on purpose — it breaks background-clip:text on the parent */ @keyframes char-in { from { opacity: 0; transform: translateY(.5em) rotate(5deg) scale(.94); } to { opacity: 1; transform: none; } } .hero__title { font-size: clamp(1.25rem, 3.4vw, 2rem); font-weight: 600; color: var(--text-soft); margin-bottom: 1.4rem; animation: rise 1s var(--ease) .5s both; } .hero__title-part { white-space: nowrap; } .hero__title-sep { display: inline-block; padding-inline: .42em; color: var(--text-muted); opacity: .65; } .hero__bio { max-width: 58ch; font-size: clamp(1rem, 1.6vw, 1.14rem); color: var(--text-muted); margin-bottom: 2.6rem; animation: rise 1s var(--ease) .62s both; } .hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; animation: rise 1s var(--ease) .74s both; } @keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } } .btn { position: relative; display: inline-flex; align-items: center; gap: .55rem; padding: .82rem 1.5rem; border-radius: 999px; font-size: .92rem; font-weight: 600; border: 1px solid transparent; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background-color .35s, color .35s; } .btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease); } .btn:hover { transform: translateY(-3px); } .btn:hover svg { transform: translateX(4px); } .btn:active { transform: translateY(-1px); } .btn--primary { background: var(--grad); background-size: 160% 100%; color: #fff; box-shadow: 0 12px 30px -12px rgba(109, 75, 255, .85); } .btn--primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .38) 50%, transparent 80%); transform: translateX(-120%); transition: transform .8s var(--ease); } .btn--primary:hover { box-shadow: 0 18px 40px -12px rgba(109, 75, 255, .95); } .btn--primary:hover::after { transform: translateX(120%); } .btn--ghost { border-color: var(--line-strong); background: var(--surface); color: var(--text); } .btn--ghost:hover { background: var(--surface-hover); border-color: var(--violet); } .hero__scroll-wrap { position: absolute; left: 0; right: 0; bottom: 2rem; } .hero__scroll { display: inline-flex; align-items: center; gap: .7rem; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-muted); animation: rise 1s var(--ease) 1s both; transition: color .3s; } .hero__scroll:hover { color: var(--text); } .hero__scroll-line { display: block; width: 52px; height: 1px; background: linear-gradient(90deg, var(--violet), transparent); position: relative; overflow: hidden; } .hero__scroll-line::after { content: ""; position: absolute; inset: 0; background: var(--text); animation: sweep 2.4s var(--ease-soft) infinite; } @keyframes sweep { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } /* ── 6. Sections ────────────────────────────────────────────────────────── */ .section { padding: clamp(4.5rem, 12vh, 8rem) 0; } .section__head { display: flex; align-items: center; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 3.6rem); } .section__index { font-family: var(--font-mono); font-size: .8rem; color: var(--violet); padding-top: .35em; } .section__title { font-size: clamp(1.7rem, 4.4vw, 2.7rem); font-weight: 700; white-space: nowrap; } .section__rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); } /* ── 7. About ───────────────────────────────────────────────────────────── */ .about { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } .about__text p { font-size: clamp(1rem, 1.5vw, 1.1rem); color: var(--text-soft); line-height: 1.8; } .about__text p + p { margin-top: 1.25rem; } .about__stats { display: grid; gap: .9rem; } .about__stats li { position: relative; padding: 1.15rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: transform .45s var(--ease), border-color .4s, background-color .4s; } .about__stats li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--grad); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease); } .about__stats li:hover { transform: translateX(6px); border-color: var(--line-strong); background: var(--surface-hover); } .about__stats li:hover::before { transform: scaleY(1); transform-origin: 50% 0; } .about__stat-value { display: block; font-size: 1.65rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; } .about__stat-label { font-size: .84rem; color: var(--text-muted); } /* ── 8. Skills ──────────────────────────────────────────────────────────── */ .skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 1.1rem; } .card { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--card-shadow); overflow: hidden; isolation: isolate; transition: transform .5s var(--ease), border-color .45s var(--ease-soft), background-color .45s, box-shadow .5s var(--ease); } /* cursor spotlight */ .card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--a, var(--violet)) 16%, transparent), transparent 62%); opacity: 0; transition: opacity .45s var(--ease-soft); } .card:hover::before { opacity: 1; } .card:hover { transform: translateY(-6px); border-color: var(--line-strong); box-shadow: var(--shadow); } .skill { padding: 1.6rem 1.5rem 1.75rem; } .skill__icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 1.15rem; border-radius: 16px; background: linear-gradient(140deg, var(--a), var(--b)); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: -.02em; box-shadow: 0 12px 26px -14px var(--a); transition: transform .55s var(--ease), box-shadow .55s var(--ease); } .skill__icon--emoji { font-size: 1.5rem; } .card:hover .skill__icon { transform: translateY(-3px) rotate(-6deg) scale(1.06); box-shadow: 0 18px 32px -14px var(--a); } .skill__name { font-size: 1.08rem; font-weight: 600; margin-bottom: .9rem; } .skill__list { display: grid; gap: .5rem; } .skill__list li { display: flex; gap: .6rem; font-size: .9rem; color: var(--text-muted); transition: color .3s var(--ease-soft), transform .4s var(--ease); } .skill__list li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: .62em; border-radius: 50%; background: var(--a); opacity: .75; transition: transform .4s var(--ease), opacity .3s; } .card:hover .skill__list li { color: var(--text-soft); } .skill__list li:hover::before { transform: scale(1.9); opacity: 1; } /* ── 9. Projects ────────────────────────────────────────────────────────── */ /* two up — an odd project count reads better in 2 columns than a lone 4th card */ .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.1rem; } @media (min-width: 900px) { .projects { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .project { --a: var(--violet); display: flex; flex-direction: column; padding: 1.65rem 1.6rem 1.5rem; min-height: 250px; } .project__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; } .project__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -.025em; } .project__year { flex: none; font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); } .project__desc { font-size: .93rem; color: var(--text-muted); margin-bottom: 1.3rem; flex: 1; } .project__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.3rem; } .tag { padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-hover); font-family: var(--font-mono); font-size: .72rem; color: var(--text-soft); transition: border-color .35s, color .35s, transform .35s var(--ease); } .card:hover .tag { border-color: var(--line-strong); } .tag:hover { color: var(--text); transform: translateY(-2px); } .project__links { display: flex; gap: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .project__link { display: inline-flex; align-items: center; gap: .4rem; font-size: .87rem; font-weight: 600; color: var(--text-soft); transition: color .3s; } .project__link svg { width: 15px; height: 15px; transition: transform .35s var(--ease); } .project__link:hover { color: var(--violet); } .project__link:hover svg { transform: translate(3px, -3px); } /* ── 10. Timeline ───────────────────────────────────────────────────────── */ .timeline { position: relative; padding-left: 2.1rem; } .timeline::before { content: ""; position: absolute; left: 5px; top: .55rem; bottom: .55rem; width: 1px; background: linear-gradient(180deg, var(--violet), var(--cyan)); transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.3s var(--ease); } .timeline.is-drawn::before { transform: scaleY(1); } .timeline__item { position: relative; } .timeline__item + .timeline__item { margin-top: 1rem; } .timeline__node { position: absolute; left: -2.1rem; top: 1.85rem; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 2px solid var(--violet); transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s; } .timeline__item:hover .timeline__node { transform: scale(1.35); background: var(--violet); box-shadow: 0 0 0 6px color-mix(in srgb, var(--violet) 18%, transparent); } .timeline__card { --a: var(--violet); padding: 1.5rem 1.55rem; } .timeline__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin-bottom: .8rem; } .timeline__title { font-size: 1.15rem; font-weight: 600; letter-spacing: -.025em; } .timeline__company { font-weight: 600; font-size: .95rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .timeline__period { margin-left: auto; font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); padding: .2rem .6rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; } .timeline__desc { font-size: .93rem; color: var(--text-muted); } /* pin the period top-right so a long job title can't push it onto its own row */ @media (min-width: 760px) { .timeline__head { padding-right: 8rem; } .timeline__period { position: absolute; top: 1.5rem; right: 1.55rem; margin-left: 0; } } /* ── 11. Contact ────────────────────────────────────────────────────────── */ .section--contact { padding-bottom: clamp(5rem, 14vh, 9rem); } .contact__lead { max-width: 52ch; font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--text-soft); margin-bottom: 2.2rem; } .contact { display: grid; gap: .8rem; } .contact__item { --a: var(--violet); display: flex; align-items: center; gap: 1.05rem; padding: 1.15rem 1.4rem; } .contact__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 13px; border: 1px solid var(--line); background: var(--surface-hover); color: var(--text-soft); transition: color .4s, border-color .4s, transform .5s var(--ease); } .contact__icon svg { width: 19px; height: 19px; fill: currentColor; } .contact__item:hover .contact__icon { color: var(--violet); border-color: var(--violet); transform: rotate(-8deg) scale(1.06); } .contact__meta { display: grid; min-width: 0; } .contact__name { font-weight: 600; font-size: .98rem; } .contact__handle { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; } .contact__arrow { margin-left: auto; flex: none; color: var(--text-muted); transition: transform .4s var(--ease), color .3s; } .contact__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .contact__item:hover .contact__arrow { transform: translate(4px, -4px); color: var(--violet); } /* ── 12. Footer ─────────────────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--line); padding: 2rem 0; font-size: .85rem; color: var(--text-muted); background: color-mix(in srgb, var(--bg-elevated) 55%, transparent); } .footer__inner { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between; align-items: center; } .footer__top { transition: color .3s; } .footer__top:hover { color: var(--text); } /* ── 13. Motion ─────────────────────────────────────────────────────────── */ /* uses `translate` rather than `transform` so hover transforms compose freely */ .reveal { opacity: 0; translate: 0 26px; filter: blur(7px); transition: opacity .8s var(--ease) var(--d, 0ms), translate .8s var(--ease) var(--d, 0ms), filter .8s var(--ease) var(--d, 0ms); will-change: opacity, translate; } .reveal.is-visible { opacity: 1; translate: none; filter: blur(0); will-change: auto; } /* theme switch: circular wipe (View Transitions API) */ ::view-transition-old(root) { animation: none; } ::view-transition-new(root) { animation: wipe .55s var(--ease); } @keyframes wipe { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 50%)); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1; translate: none; filter: none; } .timeline::before { transform: scaleY(1); } } /* ── 14. Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about__stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } } @media (max-width: 760px) { .nav__burger { display: block; } .nav__links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: .1rem; padding: 1rem var(--gutter) 1.4rem; /* near-opaque: the panel overlaps the hero, so it must stay readable even where backdrop-filter is unsupported or not composited */ background: var(--glass-solid); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); border-bottom: 1px solid var(--line); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: transform .4s var(--ease), opacity .3s, visibility .3s; } .nav__links.is-open { transform: none; opacity: 1; visibility: visible; } .nav__links a { padding: .8rem .4rem; font-size: 1rem; } .nav__pill { display: none; } .section__title { white-space: normal; } .hero__scroll-wrap { display: none; } .timeline__period { margin-left: 0; } } @media (max-width: 420px) { .projects, .skills { grid-template-columns: 1fr; } /* full-width stacked — side by side, "View Projects" wraps its own label */ .hero__actions { flex-direction: column; align-items: stretch; } .btn { justify-content: center; } }