/* ============================================================ main.css — James Mark L. Lapido Structure: reset → base → primitives → nav → sections → responsive ============================================================ */ /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } /* ── Base ─────────────────────────────────────────────────── */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1.5rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--bg); color: var(--txt); font-family: var(--f-txt); font-size: var(--t-body); font-weight: 400; line-height: 1.65; -webkit-font-smoothing: antialiased; /* `clip`, never `hidden`. Setting overflow-x:hidden forces the browser to compute overflow-y as `auto`, which makes a scroll container — ScrollTrigger then reads scroll position from the wrong box, reports 0 forever, and every reveal stays stuck at opacity 0. `clip` suppresses horizontal overflow without creating a scroller. */ overflow-x: clip; /* Ambient depth: two soft cyan pools that never move, so the parallax layers above them read as travelling through space. */ background-image: radial-gradient(60rem 60rem at 78% 8%, rgba(34,211,238,.055), transparent 60%), radial-gradient(50rem 50rem at 12% 72%, rgba(34,211,238,.04), transparent 62%); background-attachment: fixed; } ::selection { background: var(--ac); color: #04191d; } :focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 3px; } .skip { position: absolute; left: 50%; top: -100px; transform: translateX(-50%); z-index: var(--z-top); background: var(--ac); color: #04191d; font-weight: 600; padding: .7rem 1.2rem; border-radius: 0 0 var(--r) var(--r); transition: top var(--d) var(--e-out); } .skip:focus { top: 0; } /* ── Type primitives ──────────────────────────────────────── */ .h2 { font-family: var(--f-dis); font-size: var(--t-h1); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; } .kicker { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ac); margin-bottom: var(--s-4); } .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2); border: 1px solid var(--line-2); background: rgba(255,255,255,.02); padding: .45rem .9rem; border-radius: var(--r-pill); margin-bottom: var(--s-5); } .lead { font-size: var(--t-lead); color: var(--txt-2); max-width: 46ch; text-wrap: pretty; } .prose p { color: var(--txt-2); max-width: 56ch; text-wrap: pretty; } .prose p + p { margin-top: var(--s-4); } .prose strong { color: var(--txt); font-weight: 600; } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 3px var(--ac-15); flex: none; } .live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52,211,153,.18); animation: pulse 2.4s var(--e-in-out) infinite; } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } } @media (prefers-reduced-motion: reduce) { .live { animation: none; } } .i { width: 1.05em; height: 1.05em; flex: none; } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--f-dis); font-size: .95rem; font-weight: 500; letter-spacing: -.01em; padding: .8rem 1.5rem; border-radius: var(--r-pill); background: var(--ac); color: #04191d; border: 1px solid var(--ac); transition: background var(--d) var(--e-out), box-shadow var(--d) var(--e-out), transform var(--d-fast) var(--e-out); white-space: nowrap; } .btn:hover { background: var(--ac-hi); box-shadow: 0 6px 28px -6px var(--ac-glow); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--ghost { background: transparent; color: var(--txt); border-color: var(--line-2); } .btn--ghost:hover { background: var(--ac-08); border-color: var(--ac-30); color: var(--txt); box-shadow: none; } .btn--sm { padding: .55rem 1.1rem; font-size: .875rem; } .btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; margin-top: var(--s-6); } /* ══════════════════════════════════════════════════════════ NAV ══════════════════════════════════════════════════════════ */ .nav { position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav); height: var(--nav-h); background: rgba(8,9,12,.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); transition: background var(--d) var(--e-out), border-color var(--d) var(--e-out); } .nav--solid { background: rgba(8,9,12,.94); border-bottom-color: var(--line-2); } .nav__in { height: var(--nav-h); max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s-5); } /* Vertical padding is deliberate: it lifts the hit area to the 44px minimum without changing the visual size of the mark. */ .brand { display: inline-flex; align-items: center; gap: .6rem; margin-right: auto; padding: .5rem 0; min-height: 44px; } .brand__mark { font-family: var(--f-dis); font-weight: 700; font-size: .82rem; letter-spacing: -.02em; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ac); color: #04191d; } .brand__txt { font-family: var(--f-dis); font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; } .brand__reg { color: var(--ac); font-size: .7em; vertical-align: super; } .nav__links { display: flex; align-items: center; gap: .15rem; } .nav__a { position: relative; display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--txt-2); padding: .5rem .7rem; border-radius: var(--r-sm); transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out); white-space: nowrap; } .nav__a:hover { color: var(--txt); background: rgba(255,255,255,.04); } .nav__a[aria-current="true"] { color: var(--ac); } .nav__caret { width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .6; transition: transform var(--d-fast) var(--e-out); } .nav__grp { position: relative; } .nav__grp[data-open="true"] .nav__caret { transform: rotate(180deg); } /* Submenus: driven by [data-open] so they work on click + keyboard, not hover alone. */ .nav__sub { position: absolute; top: calc(100% + .4rem); left: 0; min-width: 250px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-3); padding: .45rem; display: grid; gap: .1rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out), visibility var(--d-fast); } .nav__grp[data-open="true"] .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); } .nav__sub--wide { min-width: 340px; grid-template-columns: 1fr 1fr; } .nav__sub a { display: flex; align-items: baseline; gap: .55rem; font-size: .85rem; color: var(--txt-2); padding: .55rem .7rem; border-radius: var(--r-sm); transition: color var(--d-fast), background var(--d-fast); } .nav__sub a:hover { color: var(--txt); background: var(--ac-08); } .nav__sub-yr { font-family: var(--f-mono); font-size: .68rem; color: var(--ac); flex: none; } .nav__prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--ac-lo), var(--ac)); box-shadow: 0 0 12px var(--ac-glow); } .burger { display: none; width: 44px; height: 44px; position: relative; } .burger span { position: absolute; left: 12px; width: 20px; height: 1.5px; background: var(--txt); transition: transform var(--d) var(--e-out), opacity var(--d) var(--e-out); } .burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 25px; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); } /* Mobile drawer */ .drawer { position: fixed; inset: var(--nav-h) 0 0 0; z-index: var(--z-menu); background: rgba(8,9,12,.985); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow-y: auto; overscroll-behavior: contain; } .drawer[hidden] { display: none; } .drawer__in { padding: var(--s-6) var(--gutter) var(--s-9); display: grid; gap: .2rem; max-width: 520px; } .drawer__in > a, .drawer__in summary { font-family: var(--f-dis); font-size: 1.4rem; font-weight: 500; letter-spacing: -.02em; padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--txt); display: block; cursor: pointer; } .drawer__in summary { list-style: none; position: relative; } .drawer__in summary::-webkit-details-marker { display: none; } .drawer__in summary::after { content: '+'; position: absolute; right: 0; top: .7rem; color: var(--ac); font-size: 1.5rem; line-height: 1; transition: transform var(--d) var(--e-out); } .drawer__in details[open] summary::after { transform: rotate(45deg); } .drawer__in details a { display: block; font-family: var(--f-txt); font-size: 1rem; color: var(--txt-2); padding: .65rem 0 .65rem 1.1rem; border-left: 1px solid var(--line-2); margin-left: .15rem; } .drawer__in details a:hover { color: var(--ac); border-left-color: var(--ac); } /* ══════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════ */ .hero { position: relative; min-height: 100svh; display: grid; align-items: center; padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-9); overflow: hidden; isolation: isolate; } .hero__grid { position: absolute; inset: 0; z-index: var(--z-bg); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 68px 68px; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%); opacity: .8; } .hero__glow { position: absolute; z-index: var(--z-bg); right: 6%; top: 42%; width: min(46rem, 90vw); aspect-ratio: 1; transform: translateY(-50%); background: radial-gradient(circle, var(--ac-15), transparent 62%); filter: blur(40px); pointer-events: none; } .hero__body { position: relative; z-index: var(--z-content); max-width: var(--wrap); width: 100%; margin: 0 auto; } .hero__h1 { font-family: var(--f-dis); font-size: var(--t-hero); font-weight: 700; line-height: .92; letter-spacing: -.045em; margin-bottom: var(--s-5); } .hero__l1, .hero__l2 { display: block; } .hero__l2 { color: transparent; -webkit-text-stroke: 1.2px var(--txt-3); padding-left: .06em; } .hero__lead { font-family: var(--f-dis); font-size: var(--t-h3); font-weight: 500; color: var(--ac); letter-spacing: -.02em; margin-bottom: var(--s-4); } .hero__sub { color: var(--txt-2); max-width: 48ch; text-wrap: pretty; margin-bottom: var(--s-5); } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--s-5); font-family: var(--f-mono); font-size: var(--t-xs); color: var(--txt-3); margin-bottom: var(--s-6); } .hero__meta span { display: inline-flex; align-items: center; gap: .45rem; } .hero__meta .i { color: var(--ac); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); } /* The hero figure is the transition frame stack. Its geometry, edge feathering and frame stacking all live in motion.css alongside the rest of the morph — deliberately not duplicated here, because a `.hero__figure img` rule would out-specify `.morph__frame` and break the stacking. */ .scroller { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: var(--z-content); display: grid; justify-items: center; gap: .6rem; font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .22em; text-transform: uppercase; color: var(--txt-3); } .scroller__line { width: 1px; height: 42px; background: linear-gradient(var(--ac), transparent); animation: drop 2.2s var(--e-in-out) infinite; transform-origin: top; } @keyframes drop { 0% { transform: scaleY(0); opacity: 0; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(42px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .scroller__line { animation: none; } } /* ══════════════════════════════════════════════════════════ SECTION SHELL ══════════════════════════════════════════════════════════ */ .sec { position: relative; max-width: var(--wrap); margin: 0 auto; padding: var(--sec-y) var(--gutter); isolation: isolate; } .ghost { position: absolute; z-index: var(--z-bg); top: calc(var(--sec-y) * .3); right: var(--gutter); font-family: var(--f-dis); font-size: var(--t-ghost); font-weight: 700; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.045); pointer-events: none; user-select: none; } .sec--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: center; } .sec__body { position: relative; z-index: var(--z-content); } /* About's figure is the transition's last frame. It is given a little more room than a normal section figure so the desk reads clearly. */ .sec--about { align-items: center; } .sec--about .sec__figure { max-width: 34rem; margin-inline: auto; } .sec__figure { position: relative; z-index: var(--z-figure); } .sec__figure img { width: 100%; height: auto; border-radius: var(--r-xl); filter: drop-shadow(0 24px 60px rgba(0,0,0,.6)); } .sec__head { position: relative; z-index: var(--z-content); margin-bottom: var(--s-8); max-width: 60ch; } .sec__head--center { margin-inline: auto; text-align: center; } .sec__head--center .lead { margin-inline: auto; } .sec__head .h2 { margin-bottom: var(--s-4); } /* ── Stats ────────────────────────────────────────────────── */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--line); } .stat__k { font-family: var(--f-dis); font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 700; line-height: 1; letter-spacing: -.04em; color: var(--ac); font-variant-numeric: tabular-nums; } .stat__plus { color: var(--txt-3); } .stat__v { font-family: var(--f-mono); font-size: var(--t-2xs); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); margin-top: .55rem; } /* ══════════════════════════════════════════════════════════ 02 · JOURNEY RAIL ══════════════════════════════════════════════════════════ */ /* Fills the viewport because the whole section is pinned while the cards travel sideways: heading anchored at the top, rail centred in the space beneath it. Without the min-height the pinned section would be only as tall as its content and leave the screen mostly empty. */ .sec--journey { max-width: none; padding-inline: 0; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: var(--s-5); } .sec--journey .sec__head, .sec--journey .ghost { padding-inline: var(--gutter); } .sec--journey .sec__head { max-width: var(--wrap); margin-inline: auto; margin-bottom: 0; } .rail { /* Native horizontal scroller: works with touch, trackpad and keyboard even if GSAP never loads. JS layers the scroll-driven pin on top of this, it does not replace it. */ overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .rail::-webkit-scrollbar { display: none; } .rail__track { display: flex; gap: var(--s-5); padding: var(--s-3) var(--gutter) var(--s-6); width: max-content; } .tl { position: relative; flex: none; width: min(23rem, 78vw); scroll-snap-align: center; padding-top: 4.5rem; } .tl__yr { position: absolute; top: 0; left: 0; font-family: var(--f-dis); font-size: 3.4rem; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px var(--txt-4); transition: -webkit-text-stroke-color var(--d) var(--e-out); } .tl__card { position: relative; height: 100%; background: linear-gradient(160deg, var(--bg-2), var(--bg-1)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); transition: border-color var(--d) var(--e-out), transform var(--d) var(--e-out), box-shadow var(--d) var(--e-out); } /* The rail's connective tissue — a hairline running through every card. */ .tl__card::before { content: ''; position: absolute; top: -1.6rem; left: var(--s-5); width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--txt-4); transition: border-color var(--d), background var(--d), box-shadow var(--d); } .tl:hover .tl__yr { -webkit-text-stroke-color: var(--ac); } .tl:hover .tl__card { border-color: var(--ac-30); transform: translateY(-4px); box-shadow: var(--sh-2); } .tl:hover .tl__card::before { border-color: var(--ac); background: var(--ac); box-shadow: 0 0 0 4px var(--ac-15); } .tl__date { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ac); margin-bottom: .7rem; } .tl__h { font-family: var(--f-dis); font-size: 1.3rem; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; margin-bottom: .6rem; } .tl__p { font-size: .92rem; color: var(--txt-2); text-wrap: pretty; } .tl__tag { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--txt-3); margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); width: 100%; } .tl--now .tl__card { border-color: var(--ac-30); } .tl--now .tl__yr { -webkit-text-stroke-color: var(--ac); } .rail__hint { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-4); } /* ══════════════════════════════════════════════════════════ 03 · EXPERIENCE ══════════════════════════════════════════════════════════ */ .sec--exp, .sec--stack { position: relative; } .sec__figure--right { position: absolute; z-index: var(--z-bg); right: var(--gutter); top: var(--sec-y); width: clamp(16rem, 26vw, 24rem); opacity: .5; pointer-events: none; } .cards { display: grid; gap: var(--s-5); position: relative; z-index: var(--z-content); } .xp { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--bg-2), rgba(13,16,22,.75)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); transition: border-color var(--d) var(--e-out), box-shadow var(--d) var(--e-out); } .xp:hover { border-color: var(--ac-30); box-shadow: var(--sh-2); } .xp__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(var(--ac), transparent); opacity: .5; transition: opacity var(--d); } .xp:hover .xp__bar { opacity: 1; } .xp__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: start; padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); } .xp__n { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--txt-4); padding-top: .35rem; } .xp__role { font-family: var(--f-dis); font-size: var(--t-h3); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; } .xp__co { font-size: .95rem; color: var(--ac); margin-top: .2rem; } .xp__loc { color: var(--txt-3); } .xp__when { text-align: right; display: grid; gap: .4rem; justify-items: end; } .xp__dates { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--txt-3); white-space: nowrap; } .chip { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .08em; text-transform: uppercase; padding: .28rem .6rem; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--txt-2); } .chip--live { border-color: rgba(52,211,153,.35); color: #6ee7b7; } .xp__summary { color: var(--txt); font-size: 1.02rem; margin-bottom: var(--s-4); max-width: 72ch; } .xp__list { display: grid; gap: .7rem; margin-bottom: var(--s-5); } .xp__list li { position: relative; padding-left: 1.4rem; font-size: .93rem; color: var(--txt-2); text-wrap: pretty; } .xp__list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--ac); opacity: .7; } .tags { display: flex; flex-wrap: wrap; gap: .4rem; } .tags li { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .04em; color: var(--txt-2); background: var(--ac-08); border: 1px solid var(--ac-15); padding: .3rem .6rem; border-radius: var(--r-sm); transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast); } .tags li:hover { color: var(--ac-hi); border-color: var(--ac-30); background: var(--ac-15); } /* ══════════════════════════════════════════════════════════ 04 · CAPABILITIES ══════════════════════════════════════════════════════════ */ .caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: var(--s-4); position: relative; z-index: var(--z-content); /* Perspective lives on the container so the cards' rotateX entrance shares one vanishing point instead of each having its own. */ perspective: 1400px; } .cap { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); transition: border-color var(--d) var(--e-out), background var(--d) var(--e-out), transform var(--d) var(--e-out); } .cap:hover { border-color: var(--ac-30); background: var(--bg-2); transform: translateY(-3px); } .cap__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--ac-08); border: 1px solid var(--ac-15); color: var(--ac); margin-bottom: var(--s-4); } .cap__i .i { width: 20px; height: 20px; } .cap h3 { font-family: var(--f-dis); font-size: 1.02rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; margin-bottom: .4rem; } .cap p { font-size: .875rem; color: var(--txt-3); text-wrap: pretty; } /* ══════════════════════════════════════════════════════════ 05 · STACK ══════════════════════════════════════════════════════════ */ .stack { display: grid; gap: var(--s-6); position: relative; z-index: var(--z-content); } .grp__h { display: flex; align-items: center; gap: .7rem; font-family: var(--f-dis); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); } .grp__n { font-family: var(--f-mono); font-size: .72rem; color: var(--ac); font-weight: 500; } .logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; } .logos li { display: flex; align-items: center; gap: .7rem; padding: .7rem .85rem; border-radius: var(--r-sm); border: 1px solid var(--line); background: rgba(255,255,255,.015); font-size: .85rem; color: var(--txt-2); transition: border-color var(--d-fast), background var(--d-fast), color var(--d-fast); } .logos li:hover { border-color: var(--ac-30); background: var(--ac-08); color: var(--txt); } .logos img { width: 22px; height: 22px; object-fit: contain; flex: none; /* Brand logos arrive in many colours; desaturating at rest keeps the wall coherent and lets colour return as a hover reward. */ filter: grayscale(1) brightness(1.7); opacity: .72; transition: filter var(--d) var(--e-out), opacity var(--d) var(--e-out); } .logos li:hover img { filter: none; opacity: 1; } /* ══════════════════════════════════════════════════════════ 06 · CREDENTIALS ══════════════════════════════════════════════════════════ */ .cred { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-5); position: relative; z-index: var(--z-content); } .cred__col { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); } .cred__h { display: flex; align-items: center; gap: .6rem; font-family: var(--f-dis); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; color: var(--txt); padding-bottom: var(--s-3); margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); } .cred__h .i { color: var(--ac); } .cred__list { display: grid; gap: var(--s-4); } .cred__t { font-size: .95rem; font-weight: 500; color: var(--txt); line-height: 1.35; } .cred__note { color: var(--txt-3); font-weight: 400; } .cred__m { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--txt-3); margin-top: .3rem; line-height: 1.5; } /* ══════════════════════════════════════════════════════════ 07 · CONTACT ══════════════════════════════════════════════════════════ */ .sec--contact { display: grid; grid-template-columns: .8fr 1fr; gap: var(--s-8); align-items: center; } .contact { display: grid; gap: .5rem; margin-top: var(--s-6); } .contact a { position: relative; display: grid; grid-template-columns: auto 7.5rem 1fr auto; align-items: center; gap: var(--s-4); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); overflow: hidden; transition: border-color var(--d) var(--e-out), background var(--d) var(--e-out); } .contact a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ac); transform: scaleY(0); transform-origin: center; transition: transform var(--d) var(--e-out); } .contact a:hover { border-color: var(--ac-30); background: var(--bg-2); } .contact a:hover::before { transform: scaleY(1); } .contact__i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ac-08); border: 1px solid var(--ac-15); color: var(--ac); } .contact__i .i { width: 18px; height: 18px; } .contact__k { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); } .contact__v { font-size: .98rem; color: var(--txt); } .contact__go { width: 16px; height: 16px; border-top: 1.5px solid var(--txt-4); border-right: 1.5px solid var(--txt-4); transform: rotate(45deg) scale(.7); transition: border-color var(--d), transform var(--d) var(--e-out); } .contact a:hover .contact__go { border-color: var(--ac); transform: rotate(45deg) scale(.85) translate(2px, -2px); } /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ .foot { border-top: 1px solid var(--line); margin-top: var(--s-8); padding: var(--s-7) var(--gutter); background: var(--bg-1); } .foot__in { max-width: var(--wrap); margin: 0 auto; display: grid; gap: .3rem; } .foot__name { font-family: var(--f-dis); font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; } .foot__meta { font-size: .875rem; color: var(--txt-2); } .foot__cr { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--txt-4); margin-top: var(--s-3); } /* ══════════════════════════════════════════════════════════ ENTRANCE STATES Set by JS only when GSAP is present, so content is never left invisible if the script fails to load. ══════════════════════════════════════════════════════════ */ .js-anim [data-rise], .js-anim .cap, .js-anim .xp, .js-anim .cred__col, .js-anim .logos li, .js-anim .contact li { will-change: transform, opacity; } /* ══════════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════════ */ @media (max-width: 1180px) { .nav__links { display: none; } .nav__cta { display: none; } .burger { display: block; margin-left: auto; } .brand { margin-right: 0; } } @media (max-width: 900px) { :root { --nav-h: 60px; } .sec--split, .sec--contact { grid-template-columns: 1fr; gap: var(--s-6); } /* On phones the character renders sit above their content rather than beside it, and parallax is switched off in JS. */ .sec__figure { max-width: 22rem; margin-inline: auto; } .sec__figure--right { position: static; width: auto; max-width: 18rem; margin: 0 auto var(--s-6); opacity: .75; } .hero { min-height: auto; padding-bottom: var(--s-8); } /* Narrow-screen geometry for the hero figure lives in motion.css with the rest of the morph, so the two files cannot disagree. */ .hero__h1 { font-size: clamp(2.6rem, 14vw, 4.4rem); } .scroller { display: none; } .stats { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); } .xp { padding: var(--s-5); } .xp__head { grid-template-columns: auto 1fr; } .xp__when { grid-column: 1 / -1; text-align: left; justify-items: start; } .contact a { grid-template-columns: auto 1fr auto; } .contact__k { display: none; } .ghost { font-size: clamp(6rem, 34vw, 12rem); opacity: .8; } } @media (max-width: 560px) { .caps { grid-template-columns: 1fr; } .logos { grid-template-columns: 1fr; } .tl { width: 84vw; } .tl__yr { font-size: 2.6rem; } .btn { width: 100%; justify-content: center; } .hero__cta { flex-direction: column; align-items: stretch; } .btn--lg { width: 100%; justify-content: center; } } /* Touch devices: hover styles that shift layout are more annoying than useful, and :hover sticks after tap. */ @media (hover: none) { .tl:hover .tl__card, .cap:hover, .xp:hover { transform: none; } .logos img { filter: none; opacity: .95; } }