with a much shorter one while scrolled deep shrinks the scrollable height out from under the current position, and the browser's own anchoring logic (silently, without a script-visible cause) intervenes as part of that same reflow — a moving target that landOnTarget's own scroll-to-top correction (see script.js) can end up racing rather than reliably winning against. Scroll position after every internal navigation is already fully owned and explicitly set by that function (top of page, or a specific in-page anchor) — the browser guessing at a "preserve what the user was looking at" position was never a want here, on any page, so disabling it site-wide removes the actual competing mechanism instead of only reacting to it. */ html { overflow-anchor: none; } /* Set only for the initial paint of a cross-page arrival at #work/#contact (see the inline script in index.html's ) — makes the browser's native "scroll to fragment on load" instant instead of animating smoothly from the page top. Removed by script.js once that initial landing has settled, restoring normal smooth scrolling for every later interaction (in-page nav clicks, manual scrolling). */ html.hash-instant { scroll-behavior: auto !important; } /* Internal page-to-page navigation transitions. Two things were tried and removed before this: the native cross-document View Transitions API (genuinely activated, per the pageswap event, but no perceptible improvement in the user's own browser), and a body-wide exit-fade-then-real-navigate (still a hard document reload underneath, so the browser's own unload/reload mechanics — full re-parse, a fresh reveal-on-load cycle, momentary loss of scroll/DOM state — were still what the user actually felt, no matter how the moment right at the click was dressed up). This is a same-document content swap instead (see script.js's "Smooth internal page-to-page navigation" block): the destination's HTML is fetched and ready in memory BEFORE any visual change begins, then only

is replaced — header/footer, already identical markup on every page, are never touched at all, so nothing about them can jump regardless of destination. `main`, not `body`, is what fades, so the persistent header stays completely stable through every transition. */ /* Cross-page swap entrance (see script.js swapTo/finishSwap): the incoming

is inserted with this class applied, then it's removed a frame later so the content settles into place. Deliberately transform-only, never opacity —

sits directly over `body`'s own background (see body{background:var(--bg)} below), so animating its opacity exposes that background as a full-viewport flash the instant main isn't fully opaque. A previous version of this mechanism used opacity and produced exactly that flash; this replacement can't reproduce it because opacity is never touched. */ main.main-enter { transform: translateY(6px); } main { transition: transform 180ms cubic-bezier(0.16,1,0.3,1); } @media (prefers-reduced-motion: reduce) { main { transition: none; } main.main-enter { transform: none; } } body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3 { font-weight: 600; letter-spacing: -0.022em; line-height: 1.15; } a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; } a:hover { text-decoration: none; text-underline-offset: 3px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Modern arrow-CTA treatment for standalone body/content links (e.g. "More about me →"). Deliberately a new class, not a change to the bare `a`/`a:hover` rule above — that base rule is what styles footer link hover across every page (no dedicated `footer a` selector exists), so changing it would touch the footer, which stays locked. No underline anywhere, including on hover — `text-decoration:none` is repeated on the :hover rule specifically to override the base `a:hover{text-decoration:underline}`, which is what caused the earlier double-line bug (the custom underline layered on top of the browser's own). Negative margin matching the padding keeps the resting text in its normal inline position — the padding only becomes visible as the hover background chip, never as a layout shift. The translateX(3px) motion matches the site's own existing pattern for this exact kind of link (.card .read, .showcase-cta). */ .body-link { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; padding: 3px 7px; margin: -3px -7px; border-radius: 6px; background: transparent; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), background-color 0.2s ease; } .body-link:hover { transform: translateX(3px); text-decoration: none; background-color: rgba(37,99,235,0.08); } img { max-width: 100%; display: block; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; } .wrap.wide { max-width: 1320px; } ::selection { background: #DBEAFE; } /* ---------- Motion system ---------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.08s; } .reveal.d2 { transition-delay: 0.16s; } .reveal.d3 { transition-delay: 0.24s; } .reveal.d4 { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Header: floating pill navigation ---------- */ header { position: sticky; top: 0; z-index: 50; background: transparent; border-bottom: none; padding: 18px 0; pointer-events: none; /* let clicks pass through the transparent header band outside the pill */ } .nav { display: flex; align-items: center; gap: 10px; width: fit-content; margin: 0 auto; padding: 6px; padding-right: 8px; background: var(--nav-bg); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 14px 34px -18px rgba(17,24,39,0.18), 0 2px 10px -4px rgba(17,24,39,0.06); pointer-events: auto; } /* Dark mode only: --line (#232B3A) sits too close in brightness to the dark page background (#0B0F17) for the pill's own outline to read against page content behind/around it — scoped to just this one border, not the shared --line token itself, since --line is also the border color for many other components (cards, dividers, the brand avatar) that aren't part of this request and stay as they are. */ :root[data-theme="dark"] .nav { border-color: rgba(255,255,255,0.16); } /* Brand mark: a small circular avatar only — the name lives in the hero marquee, not the capsule */ .nav .brand { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); } .nav .brand:hover { text-decoration: none; } .nav .brand img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; display: block; } .nav ul { position: relative; display: flex; gap: 2px; list-style: none; align-items: center; } .nav ul a { display: inline-flex; align-items: center; position: relative; z-index: 1; color: var(--soft); font-size: 13.5px; font-weight: 500; padding: 8px 14px; border-radius: 999px; transition: color 0.18s ease, background-color 0.18s ease; white-space: nowrap; } .nav ul a:not(.active):hover { color: var(--ink); background: var(--surface); text-decoration: none; } .nav ul a.active { color: #fff; font-weight: 600; } /* One shared sliding highlight — links stay transparent; this single element travels underneath the active link via transform/width, never removed/recreated on change. */ .nav-active-pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; background: var(--accent); border-radius: 999px; z-index: 0; pointer-events: none; transform: translate3d(0,0,0); transition: transform 0.5s cubic-bezier(.22,1,.36,1), width 0.5s cubic-bezier(.22,1,.36,1); } /* Decorative cursor-trailing orb — positioned via JS translate3d each frame, never affects layout. */ .cursor-orb { position: fixed; top: 0; left: 0; width: 16px; height: 16px; margin-left: -8px; margin-top: -8px; border-radius: 99px; background: var(--accent); pointer-events: none; z-index: 9999; will-change: transform; } @media (hover: none), (pointer: coarse) { .cursor-orb { display: none; } } .nav .btn { padding: 8px 16px; border-radius: 999px; } /* ---------- Theme toggle ---------- */ /* Two instances of the same control share this styling (see markup comment in each page's ): `.theme-toggle-desktop`, a direct child of `.wrap.nav` visible only above the mobile breakpoint, and `.theme-toggle-mobile` inside the mobile dropdown's own

` in the component in either variant — no descendant-selector ambiguity here. */ .stat b { display: flex; align-items: flex-start; width: 100%; min-height: 82px; margin-bottom: 10px; color: var(--ink); } .stat.metric b { font-size: 36px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; } .stat.capability b { font-size: 19px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.35; } /* IMPORTANT: this must be a direct-child combinator, not a descendant selector. The metric variant nests its animated counter as `…` — a bare `.stat span` rule matches that inner span too and silently overrides the 52px/36px number styling with the supporting-text styling (this was the actual bug: numbers rendered small and gray because they were being styled as if they were the caption). Scoping to `.stat > span` targets only the supporting-text span, which is a direct child of `.stat` in every card, in both variants. */ .stat > span { font-size: 14px; color: var(--muted2); line-height: 1.45; display: block; } @media (max-width: 1080px) { .stats { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 880px) { .stats { grid-template-columns: 1fr 1fr; } .stat.metric b { font-size: 34px; } } /* ---------- Sections ---------- */ section { padding: 71px 0; } /* Case Studies listing page only (#work is shared with the homepage's Selected Work section, so this is scoped to .cs-listing, not #work itself). The generic 86px section padding put far more air above .cs-back than the case-study detail pages' .cs-hero (padding: 32px 0 32px) — matching that exact reference value here, top only. */ #work.cs-listing { padding-top: 32px; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } /* Hero-only name treatment — scoped so the shared .eyebrow class (used elsewhere, e.g. the Sneak Peek "Playground" label) is untouched. Reuses the same "Caveat" handwriting font already loaded for .connect-cursive/.hid-caption, just at a larger, name-signature size. */ .hero-signature { font-family: "Caveat", cursive; font-size: 25px; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 4px; } /* Compact "Open to work" status indicator, sat beside the handwritten greeting — replaces the old large availability pill that used to sit below the CTA row. Reuses the same pulsing-dot language as that former pill (var(--success), same statusPulse keyframe) so the status cue stays visually consistent with the rest of the site, just smaller. */ .hero-greeting-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; } .hero-greeting-row .hero-signature { margin-bottom: 0; } .hero-open-badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 12px; font-weight: 500; color: var(--soft); background: var(--surface); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; } .hero-open-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--success); box-shadow: 0 0 0 3px rgba(16,185,129,0.15); animation: statusPulse 2.5s ease-in-out infinite; } .hero-open-sep { color: var(--soft); opacity: 0.6; } @media (prefers-reduced-motion: reduce) { .hero-open-dot { animation: none; } } section h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; letter-spacing: -0.025em; } .lead { color: var(--soft); max-width: 680px; font-size: 16.5px; } /* ---------- Work cards ---------- */ .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; } /* Case-studies archive: hold 2 columns past the shared 880px reset, down to 700px */ @media (max-width: 880px) { .cards.archive { grid-template-columns: 1fr 1fr; } } @media (max-width: 700px) { .cards.archive { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.25s; color: var(--ink); display: block; } .card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 16px 40px -20px rgba(17,24,39,0.18); border-color: var(--border-hover); text-decoration: none; } .card .thumb { overflow: hidden; aspect-ratio: 16/9; background: var(--surface); } .card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .card:hover .thumb img { transform: scale(1.035); } .card .card-body { padding: 24px 26px 26px; } .card .tags { font-size: 11.5px; font-weight: 600; color: var(--soft); letter-spacing: 0.07em; margin-bottom: 10px; text-transform: uppercase; } .card h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.015em; } .card p { font-size: 14.5px; color: var(--soft); } .card .read { display: inline-block; margin-top: 14px; font-weight: 500; color: var(--accent); font-size: 14px; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); } .card:hover .read { transform: translateX(3px); } /* Six-track grid: a plain multiple-of-3 card count (e.g. 6) needs nothing extra. The .five modifier is only for a 5-card grid, where it fills the dangling last row evenly. */ .cards.three { grid-template-columns: repeat(6, 1fr); } .cards.three .card { grid-column: span 2; } .cards.three.five .card:nth-child(4), .cards.three.five .card:nth-child(5) { grid-column: span 3; } .cards.three .card h3 { font-size: 18px; } @media (max-width: 1100px) { .cards.three .card { grid-column: span 3; } .cards.three.five .card:nth-child(5) { grid-column: span 6; } } /* ---------- Selected Work: sticky cover-stack, reproducing the mechanism measured directly on portavia.framer.website's Featured Projects section (getComputedStyle read at 20+ scroll positions, every DOM depth: transform:none and opacity:1 on every card at every position — there is no JS-driven transform, scale, or fade there at all). Each card sits in its own `position: sticky` wrapper, one after another in normal document flow. As the user scrolls, each new card's wrapper rises from below the viewport up to the same pinned top offset as the one before it; being later in the DOM, it paints on top and progressively covers the previous card from the bottom up as it rises. No element here ever has its transform/opacity/scale written by JS — case-study-showcase.js only tracks which card currently reads as "active" for the 01/05 counter and for keyboard/screen-reader focus. Isolated entirely from the nav system: its own JS module, its own scroll listener, no shared state with script.js. */ .cs-section-head { text-align: center; margin-bottom: 56px; } .cs-view-all { text-align: center; margin-top: 28px; } .cs-track { position: relative; } .cs-index { display: none; position: sticky; top: 40px; z-index: 5; text-align: center; font-size: 13px; font-weight: 600; color: var(--soft); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } .cs-index-current { color: var(--ink); } .cs-index-sep { margin: 0 4px; color: #C7CBD2; } /* Reference's actual outer mechanism (framer-lyues5): display:flex, flex-direction: column, gap:120px, with each sticky card as a DIRECT flex child — verified via getComputedStyle on the live reference (a display:contents responsive-variant wrapper around each card is transparent to layout, so the effective parent is this flex container). This replaces the previous non-sticky height:100vh "slot" wrapper per card — the reference does not use a separate slot element at all; the gap between flex children is what creates the scroll slack between one card sticking and the next covering it. */ .cs-card-stack { display: flex; flex-direction: column; gap: 120px; } /* top:80px is the reference's own measured sticky offset (getComputedStyle on framer-gonwtm), not an approximation — reproduced exactly for this diagnostic phase. z-index:1 matches the reference's own explicit value on framer-gonwtm (confirmed via getComputedStyle); all four cards share this same value on the reference too, so stacking is still resolved by DOM order — this doesn't change that, it just matches the literal declaration. */ .cs-card-sticky { position: sticky; top: 80px; z-index: 1; } .cs-card { /* width:1120px and aspect-ratio:1.5/1 are the reference's own measured desktop values (getComputedStyle on framer-gonwtm, confirmed identical at both 1280px and 1920px viewports) — not approximated. Height is not set directly; it falls out of width ÷ aspect-ratio exactly as it does on the reference (1120 / 1.5 = 746.67px). */ position: relative; display: block; width: 1120px; aspect-ratio: 1.5 / 1; max-width: 100%; margin: 0 auto; border-radius: 20px; overflow: hidden; background: var(--surface); cursor: pointer; box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 26px 52px -24px rgba(17,24,39,0.32); /* Reference evidence showed a per-card inline scale (~0.926) tied to its custom hover cursor component (data-framer-cursor), not to scroll position — confirmed by polling transform on a fresh page load and at 40+ scroll offsets, which stayed transform:none throughout. Reproduced here as a plain CSS hover state; safe to transition because nothing else ever writes to this element's own transform (the scroll mechanism only ever touches position via native sticky, never this card's transform/opacity). */ transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); } .cs-card:hover { transform: scale(0.965); } .cs-card:focus-visible { outline: 2px solid #fff; outline-offset: -3px; box-shadow: 0 0 0 5px var(--accent); } /* Reference wrapper hierarchy inside the card link (framer-ensd48), reproduced level for level from its extracted markup: a cursor wrapper (framer-11gwpp8) containing an image wrapper, the overlay, and the info block — rather than flattening these into siblings of the card itself. */ .cs-card-cursor-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; } .cs-card-image-wrap { position: absolute; inset: 0; border-radius: inherit; } .cs-card-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: inherit; } /* Reference overlay gradient stops (framer-17rrz4o) kept exactly as measured; only the opacity multiplier is raised (0.6 → 0.74) so foreground text reads more clearly against busy project screenshots, without crushing the image to black. */ .cs-card-overlay { position: absolute; inset: 0; background: linear-gradient(rgba(12,12,13,0.65) 0%, rgba(12,12,13,1) 100%); opacity: 1; } .cs-card-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px; gap: 14px; } /* Reference splits the badge into two elements: framer-12o7i4v (the pill background) wrapping framer-1rmvwl7 (the text) — reproduced as .cs-badge wrapping .cs-category instead of one element carrying both the pill and the text styling. */ .cs-badge { display: inline-block; background: var(--accent); padding: 6px 14px; border-radius: 99px; } .cs-category { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; } .cs-text-wrap { display: flex; flex-direction: column; gap: 8px; } .cs-title { display: block; margin: 0; font-size: clamp(34px, 3.8vw, 58px); font-weight: 650; letter-spacing: -0.025em; color: #fff; text-wrap: balance; } .cs-desc { display: block; margin: 0; font-size: 16px; color: rgba(255,255,255,0.85); max-width: 46ch; } @media (max-width: 1023px) { .cs-card-sticky { top: 68px; } .cs-card { width: min(90%, 720px); aspect-ratio: 1.5 / 1; } .cs-card-info { padding: 32px; gap: 10px; } } @media (max-width: 700px) { .cs-card-sticky { top: 60px; } .cs-card { width: 92%; aspect-ratio: 4 / 5; } .cs-index { top: 32px; } .cs-title { font-size: clamp(28px, 8vw, 38px); } .cs-desc { max-width: none; font-size: 14.5px; } .cs-card-info { padding: 28px; gap: 8px; } } /* Personal & Systems Work — lighter, subordinate secondary section (not equal-weight with Selected Work) */ #personal-work { padding: 56px 0 80px; } #personal-work .pw-heading { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; margin-bottom: 10px; color: var(--ink); } #personal-work .lead { font-size: 15px; } /* .showcase reuses the exact .cards/.card/.thumb/.card-body/.tags system above — same grid, same 16:9 crop, same body padding — so these two cards read as the same reusable card component as the Case Studies grid, not a separate layout. */ .showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; } @media (max-width: 700px) { .showcase { grid-template-columns: 1fr; } } .showcase-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s, border-color 0.25s; color: var(--ink); display: block; } .showcase-item:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 16px 40px -20px rgba(17,24,39,0.18); border-color: var(--border-hover); } .showcase-media { display: block; overflow: hidden; aspect-ratio: 16/9; background: var(--surface); } .showcase-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); } .showcase-item:hover .showcase-media img { transform: scale(1.035); } .showcase-caption { padding: 24px 26px 26px; } .showcase-label { font-size: 11.5px; font-weight: 600; color: var(--soft); letter-spacing: 0.07em; margin-bottom: 10px; text-transform: uppercase; } .showcase-text h3 { font-size: 20px; margin-bottom: 8px; letter-spacing: -0.015em; } .showcase-text h3 a { color: inherit; text-decoration: none; } .showcase-text p { font-size: 14.5px; color: var(--soft); } .showcase-cta { display: inline-block; margin-top: 14px; font-weight: 500; color: var(--accent); font-size: 14px; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); text-decoration: none; } .showcase-item:hover .showcase-cta { transform: translateX(3px); } .mini-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 26px; } .mini-card { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; background: var(--surface); color: var(--ink); transition: border-color 0.2s, transform 0.2s; } .mini-card:hover { border-color: var(--border-hover); transform: translateY(-2px); text-decoration: none; } .mini-card .mini-tag { display: block; font-size: 11px; font-weight: 600; color: var(--soft); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; } .mini-card h4 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; margin-bottom: 4px; } .mini-card p { font-size: 13.5px; color: var(--soft); margin-bottom: 10px; } .mini-card .mini-read { font-size: 13px; font-weight: 500; color: var(--accent); } @media (max-width: 700px) { .mini-cards { grid-template-columns: 1fr; } } .support { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 28px 32px; margin-top: 24px; } /* ---------- Journey (compact accordion, replaces the old six-stacked-block timeline). Reuses the same interaction mechanism as the Capabilities accordion (.cap-toggle) — aria-expanded + max-height transition — via a shared JS selector, so no new JS controller was written; only the markup/CSS here is new to this section. */ /* Two-column layout: items stay in a single DOM sequence (1-6, chronological), split into two independent .jrny-col containers (1-3 left, 4-6 right) rather than a single CSS Grid with shared row tracks — this is deliberate, not just convenient. A shared-row grid would couple the two columns' heights (Grid sizes each row to its tallest item and, by default, stretches shorter items to match), so expanding one accordion item would visibly push/ stretch its neighbor in the other column. Two independent block-level columns behave exactly like the original single-list stacking, just duplicated side by side, so opening an item only ever affects its own column. This also means mobile (which collapses back to one column) naturally stacks column 1 then column 2 in the correct chronological order with no extra reordering CSS needed. */ .jrny-list { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: start; } .jrny-col { display: flex; flex-direction: column; gap: 10px; } /* Each row is now its own bordered, rounded card (matches the approved reference) instead of a continuous divider-line list — .jrny-col's own border-top and each row's border-bottom (a shared line between adjacent rows) are replaced by a full border per row plus the column's own gap, so cards read as separate rather than touching. */ .jrny-row { border: 1px solid #e0e7ff; border-radius: 14px; overflow: hidden; } :root[data-theme="dark"] .jrny-row { border-color: #232b3a; } @media (max-width: 880px) { .jrny-list { grid-template-columns: 1fr; column-gap: 0; } } .jrny-toggle { display: flex; align-items: center; gap: 16px; width: 100%; background: none; border: none; padding: 16px 14px; margin: 0; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: color 0.15s ease; /* Left/right column dividers are two independent stacks (see .jrny-list comment above), so any row whose own content is even fractionally taller than its counterpart makes every divider below it drift out of alignment between columns. min-height pins every row to the same closed-state height regardless of small content differences (the Mindteck status chip vs. plain-text dates elsewhere) — the structural fix, not a per-row offset hack. */ min-height: 76px; } .jrny-toggle:hover { color: var(--accent); } .jrny-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .jrny-logo { width: 34px; height: 34px; border-radius: 8px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); overflow: hidden; } .jrny-logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .jrny-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .jrny-role { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; transition: color 0.15s ease; } /* Company + date sit on one metadata line, wrapping independently of the row's own flex layout if a long company name + date can't both fit (e.g. narrow mobile widths) — this is what lets the date live "beside the company name" instead of pinned to the row's far edge, without ever colliding with the plus icon (which sits outside .jrny-id entirely). */ .jrny-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; row-gap: 2px; } .jrny-co { font-size: 14px; color: var(--soft); } /* Past-role dates: quiet metadata, deliberately a step further muted than the company name (tertiary tone already used site-wide for de-emphasized labels) so hierarchy reads as title > company > date at a glance. The current role (Mindteck) overrides this via .is-current into a small accent status chip instead — see below. */ .jrny-when { flex: none; font-size: 11px; font-weight: 400; line-height: 1.2; color: #6581B0; font-variant-numeric: tabular-nums; } .jrny-when.is-current { flex: none; font-size: 11px; font-weight: 400; line-height: 1.2; color: var(--accent); background: rgba(37,99,235,0.08); padding: 3px 6px; border-radius: 8px; } /* Plus/minus toggle — two thin bars forming "+" (slim, regular-weight glyph, no bold/heavy stroke); the vertical bar rotates flat onto the horizontal one on expand, becoming "−". No rotation of the whole glyph, no chevron, no circular background. #7a9cff in both states — a specific lighter blue for this icon only, not the shared --accent token (which stays #2563EB everywhere else, e.g. the current-role date chip just above). */ .jrny-toggle-icon { position: relative; flex: none; width: 18px; height: 18px; } .jrny-toggle-icon::before, .jrny-toggle-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 1.5px; background: #7a9cff; border-radius: 1px; transform: translate(-50%, -50%); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); } .jrny-toggle-icon::after { transform: translate(-50%, -50%) rotate(90deg); } .jrny-toggle[aria-expanded="true"] .jrny-toggle-icon::after { transform: translate(-50%, -50%) rotate(0deg); } .jrny-toggle[aria-expanded="true"] .jrny-role { color: var(--accent); } .jrny-desc-wrap { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1); } .jrny-desc-inner { padding: 6px 14px 24px; } .jrny-desc-inner .jrny-scope { font-size: 14.5px; color: var(--ink); font-weight: 500; margin-bottom: 10px; max-width: 640px; } .jrny-desc-inner ul { display: grid; gap: 6px; padding-left: 18px; max-width: 640px; } .jrny-desc-inner li { font-size: 14px; color: var(--soft); line-height: 1.5; } @media (prefers-reduced-motion: reduce) { .jrny-desc-wrap, .jrny-toggle-icon::before, .jrny-toggle-icon::after, .jrny-toggle { transition: none; } } /* ---------- Capabilities ---------- */ .caps { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; } .cap { border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; background: var(--card); transition: border-color 0.2s, box-shadow 0.2s; } .cap:hover { border-color: var(--border-hover); box-shadow: 0 8px 24px -12px rgba(17,24,39,0.12); } .cap h3 { font-size: 16.5px; margin-bottom: 8px; } .cap p { font-size: 14px; color: var(--soft); } /* Numbered editorial accordion — replaces the .caps card grid for "What I bring to a team" */ .cap-list { margin-top: 30px; border-top: 1px solid var(--line); } .cap-row { border-bottom: 1px solid var(--line); } .cap-toggle { display: flex; align-items: center; gap: 20px; width: 100%; background: none; border: none; padding: 20px 0; margin: 0; font: inherit; text-align: left; color: var(--ink); cursor: pointer; transition: color 0.15s ease; } .cap-toggle:hover { color: var(--accent); } .cap-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .cap-toggle .cap-num { font-size: 13px; font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; } .cap-toggle .cap-title { flex: 1; font-size: 17px; font-weight: 600; letter-spacing: -0.012em; } .cap-toggle .cap-chevron { flex: none; width: 18px; height: 18px; color: var(--muted); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1); } .cap-toggle[aria-expanded="true"] .cap-chevron { transform: rotate(180deg); color: var(--accent); } .cap-toggle[aria-expanded="true"] .cap-num { color: var(--accent); } .cap-row:has(.cap-toggle[aria-expanded="true"]) .cap-toggle { padding-left: 14px; padding-right: 14px; } .cap-desc-wrap { max-height: 0; overflow: hidden; transition: max-height 0.3s cubic-bezier(0.16,1,0.3,1); } .cap-desc-inner { padding: 6px 14px 22px; } .cap-desc-inner p { font-size: 14.5px; color: var(--soft); max-width: 640px; } @media (max-width: 700px) { .cap-toggle { gap: 14px; padding: 16px 0; } .cap-toggle .cap-title { font-size: 15.5px; } } /* Editorial proof matrix — "Why Teams Hire Me": a structured index, not another card wall, so it reads distinctly from the .stats "Impact Highlights" above it. */ .proof-matrix { margin-top: 26px; border-top: 1px solid var(--line); } .proof-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: padding-left 0.2s ease; } .proof-row:hover { padding-left: 6px; } .proof-row:hover .proof-num { color: var(--accent); } .proof-row:hover .proof-link { transform: translateX(3px); } .proof-num { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; color: #D1D5DB; font-variant-numeric: tabular-nums; line-height: 1; } .proof-row h3 { font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); margin-bottom: 3px; } .proof-row p { font-size: 14.5px; color: var(--soft); } .proof-link { display: inline-block; font-size: 13.5px; font-weight: 500; color: var(--accent); white-space: nowrap; transition: transform 0.2s cubic-bezier(0.16,1,0.3,1); } @media (max-width: 700px) { .proof-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; align-items: start; } .proof-link { justify-self: start; margin-top: 6px; } } /* ---------- How I Design: editorial image + overlapping principle cards, replacing the "Why Teams Hire Me" proof matrix above. Overlap/z-order is plain document flow (later card in the DOM paints over the one before it) — no JS, no absolute positioning, fully independent of the Featured Projects mechanism. */ .hid-head { text-align: center; max-width: 640px; margin: 0 auto 64px; } .hid-grid { display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: 56px; align-items: stretch; } .hid-image { border-radius: 20px; overflow: hidden; background: var(--surface); transform: translateY(-100px) rotate(-3deg) scale(0.617); } /* .hid-image also carries the site-wide .reveal class; once IntersectionObserver adds .in on scroll-into-view, .reveal.in's own `transform: none` (two classes) otherwise outranks .hid-image's single-class rule and wipes the tilt/scale right as the section becomes visible. Re-assert it here at higher specificity so it survives the reveal. */ .hid-image.reveal.in { transform: translateY(-100px) rotate(-3deg) scale(0.617); } /* Desktop-only gentle float, matching the slow idle motion of the .ai3d-* 3D shapes elsewhere on the page, but deliberately vertical-only — no rotation — per explicit request ("not dancing, just moving slowly upwards and downs"). The keyframes repeat .hid-image's own static tilt/scale transform and add an oscillating translateY on top of it (rather than replacing the transform outright, which would snap the photo out of its tilted/scaled position). The extra translateY is itself scaled down by the existing scale(0.617) since it comes later in the transform chain, so 22px here reads as ~14px of actual on-screen movement, matching the amplitude of the other floating shapes. Scoped to the same >700px range where the static tilt/scale itself is active (see the max-width:700px reset below) — mobile stays fully static, untouched. */ @keyframes hidImageFloat { 0%, 100% { transform: translateY(-100px) rotate(-3deg) scale(0.617) translateY(0); } 50% { transform: translateY(-100px) rotate(-3deg) scale(0.617) translateY(-22px); } } @media (min-width: 701px) { .hid-image, .hid-image.reveal.in { animation: hidImageFloat 8s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { .hid-image, .hid-image.reveal.in { animation: none; } } .hid-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; } /* Small handwritten annotation above the office photo. .hid-image-col is the new grid item (replacing bare .hid-image) so .hid-image itself — and its permanent tilt/scale transform above — is completely untouched; the caption is positioned against this wrapper's own (untransformed) box, not against the photo's transformed paint position. */ .hid-image-col { position: relative; } .hid-image-col .hid-image { height: 100%; } .hid-caption-wrap { position: absolute; top: -34px; left: 8px; z-index: 2; display: flex; align-items: flex-start; gap: 2px; transform: rotate(-2deg); pointer-events: none; } /* Same fix as .hid-image.reveal.in above: .reveal.in's own `transform: none` (two classes) otherwise outranks the single-class rule right above and wipes the tilt the moment this element reveals on scroll. */ .hid-caption-wrap.reveal.in { transform: rotate(-2deg); } .hid-caption { font-family: "Caveat", cursive; font-weight: 500; font-size: 20px; color: var(--soft); margin: 0; line-height: 1; white-space: nowrap; } .hid-caption-arrow { width: 28px; height: 24px; color: var(--soft); flex: none; margin-top: 10px; } .hid-cards { display: flex; flex-direction: column; } .hid-card { display: grid; grid-template-columns: 40px 1fr; gap: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 26px 26px; box-shadow: 0 1px 2px rgba(17,24,39,0.04), 0 20px 40px -24px rgba(17,24,39,0.22); transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s; } .hid-card:not(:first-child) { margin-top: -26px; } .hid-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(17,24,39,0.05), 0 24px 44px -20px rgba(17,24,39,0.28); background-color: var(--accent); border-color: var(--accent); } .hid-card:nth-child(1) { width: 92%; margin-left: 0; } .hid-card:nth-child(2) { width: 92%; margin-left: auto; } .hid-card:nth-child(3) { width: 92%; margin-left: 0; } .hid-card:nth-child(4) { width: 92%; margin-left: auto; } .hid-card:nth-child(5) { width: 92%; margin-left: 0; } .hid-num { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.2; } .hid-card:hover .hid-num { color: #fff; } .hid-card h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 6px; } .hid-card:hover h3 { color: #fff; } .hid-card p { font-size: 14px; color: var(--soft); line-height: 1.55; } .hid-card:hover p { color: rgba(255,255,255,0.85); } @media (max-width: 880px) { .hid-grid { grid-template-columns: minmax(0, 34%) 1fr; gap: 36px; } } @media (max-width: 700px) { .hid-head { margin-bottom: 40px; } .hid-grid { grid-template-columns: 1fr; gap: 28px; } /* .hid-image's own desktop tilt/offset/scale transform (translateY(-100px) rotate(-3deg) scale(0.617), asserted a second time at higher specificity via .hid-image.reveal.in — see the comment above that rule) was never reset here, so the image kept rendering shifted up and rotated over the paragraph text once the grid stacked to one column. Repeating both selectors at matching specificity, later in the cascade, is what actually overrides it. */ .hid-image, .hid-image.reveal.in { transform: none; } .hid-image img { height: auto; aspect-ratio: 16 / 10; } .hid-card:not(:first-child) { margin-top: 14px; } .hid-card:nth-child(1), .hid-card:nth-child(2), .hid-card:nth-child(3), .hid-card:nth-child(4), .hid-card:nth-child(5) { width: 100%; margin-left: 0; } } /* How I Design decorative objects (v6 — green/pyramid/cube source assets replaced with newly supplied, natively-transparent PNGs (3D_icon_1/2/3_transparent.png in chat), fully resolving the v5 AVIF-pipeline noise/brightness issue for these three the same way star was resolved (real clean asset, not a filter/reprocessing workaround). Confirmed clean before use: real alpha channel already present (corner alpha=0, interior alpha=255, no reconstruction needed), already trimmed to content, and an 8x zoomed edge check showed no speckle/block noise. Widths stay the approved caps (green/cube 150px, pyramid 172.5px +15%); heights recomputed from each new asset's own real content ratio to avoid distortion: green 277:280 (1.0108), pyramid 371:299 (0.8059), cube 335:326 (0.9731). hid-3d-star.png (the old noisy asset) is left in place, unreferenced, per no-unrelated- cleanup — star already points at assets/about-3d-star.png since v5. v7: pair gap increased +25% (left 27.4px->34.25px, right 27.25px->34.06px) by moving ONLY the top icon of each pair upward (green top 411->404.2px, star top 406->399.2px); pyramid/cube's top/height/width/left/right are untouched per "don't touch the bottom icons" — the extra gap comes entirely out of the space above the pair, not below. v8: green/star (top icons only) moved to top:250px; pyramid/cube untouched again. */ .hid-decor-green { top: 250px; right: 4px; width: min(150px, calc((100vw - 1120px) * 0.62)); height: min(151.6px, calc((100vw - 1120px) * 0.6267)); } .hid-decor-pyramid { top: 590px; left: 16px; width: min(172.5px, calc((100vw - 1120px) * 0.713)); height: min(139px, calc((100vw - 1120px) * 0.5746)); } .hid-decor-star { top: 250px; left: 0px; width: min(172.5px, calc((100vw - 1120px) * 0.713)); height: min(189.75px, calc((100vw - 1120px) * 0.7843)); } .hid-decor-cube { top: 623px; right: 16px; width: min(150px, calc((100vw - 1120px) * 0.62)); height: min(146px, calc((100vw - 1120px) * 0.6033)); } @media (max-width: 1279px) { .hid-decor-pyramid, .hid-decor-cube { display: none; } .hid-decor-green { top: 20px; right: 10px; width: 60px; height: 61px; } .hid-decor-star { top: 20px; left: 10px; width: 60px; height: 66px; } } @media (max-width: 900px) { .hid-decor-star { display: none; } .hid-decor-green { top: 20px; right: 12px; width: 44px; height: 48px; opacity: 0.7; } } /* padding-bottom overridden from the generic `section` rule (now 71px, see above) — this section was flagged as the worst offender for excess whitespace before Experience, so it gets a further cut below the new site-wide baseline (55px, ~25% below its own prior 73px) — scoped to this section only, top padding untouched so the heading's position relative to Featured Projects above is unaffected. margin-bottom: -126px added on top — a 200px reduction was requested, but the visible gap to Experience's heading (measured live) was only 126px total; -126px is the maximum that closes it to exactly 0 without the two sections' content actually overlapping. Uses margin (not touching Experience's own padding/rules at all) so this stays fully scoped to #how-i-design. padding-bottom cut further to 26px: the visible last-card-to-heading gap (measured live, 115px) was asked to shrink by 25%. Since margin-bottom pulls Experience up relative to this section's own border-box (which padding-bottom is part of), trimming padding-bottom here shifts Experience's heading up by the same amount, closing the gap directly — margin-bottom stays untouched and the two sections' boxes still meet at exactly 0. */ #how-i-design { position: relative; overflow: hidden; padding-bottom: 26px; margin-bottom: -126px; } #how-i-design .wrap { position: relative; z-index: 1; } /* "12+ Years of product and visual design experience" impact card: its resting/hover styling actually lives in index.html's own