:root { --bg: #fbfaf7; --ink: #121212; --green: #97978F; --pad: clamp(1.25rem, 3vw, 2.5rem); --nav-size: clamp(0.85rem, 1.1vw, 1rem); } /* home page only: inverted palette (off-white <-> near-black), green kept */ body[data-page="home"] { --bg: #121212; --ink: #fbfaf7; } /* retro film grain over the dark home background; inline SVG turbulence, sits above the bg but below the hero (z-index:2) and never traps clicks */ body[data-page="home"]::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.13; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--ink); overflow: hidden; -webkit-font-smoothing: antialiased; } /* ---------- page transition overlay ---------- */ .page-transition { position: fixed; inset: 0; background: var(--green); z-index: 10; transform: scaleY(0); transform-origin: top; pointer-events: none; } /* When arriving via a transition, the incoming page is painted fully covered in green from the very first frame (class set by an inline script) so the destination never flashes before GSAP runs. */ html.is-entering .page-transition { transform: scaleY(1); transform-origin: bottom; /* CSS-only fallback: if GSAP/main.js never executes (CDN failure, JS error), the overlay still retracts on its own. The delay is long enough that GSAP normally takes over and removes the class first. */ animation: ll-overlay-retract 0.7s cubic-bezier(0.76, 0, 0.24, 1) 1.4s forwards; } @keyframes ll-overlay-retract { from { transform: scaleY(1); } to { transform: scaleY(0); } } /* ---------- corner navigation ---------- */ .corner { position: fixed; z-index: 5; } .corner--tr { top: calc(var(--pad) + env(safe-area-inset-top)); right: calc(var(--pad) + env(safe-area-inset-right)); } .corner--tl { top: calc(var(--pad) + env(safe-area-inset-top)); left: calc(var(--pad) + env(safe-area-inset-left)); } .corner--bl { bottom: calc(var(--pad) + env(safe-area-inset-bottom)); left: calc(var(--pad) + env(safe-area-inset-left)); } .corner--br { bottom: calc(var(--pad) + env(safe-area-inset-bottom)); right: calc(var(--pad) + env(safe-area-inset-right)); } .nav-link { position: relative; display: inline-block; padding: 0.5rem 0.25rem; /* generous touch target */ font-size: var(--nav-size); font-weight: 400; letter-spacing: 0.04em; color: var(--ink); text-decoration: none; transition: color 0.35s ease; } .nav-link::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.2rem; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .nav-link:hover, .nav-link:focus-visible { color: var(--green); } .nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); } .nav-link:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; } /* ---------- hero ---------- */ .hero { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--pad); } .hero__stack { position: relative; display: block; color: inherit; text-decoration: none; cursor: pointer; } .hero__title { display: flex; flex-wrap: wrap; justify-content: center; font-size: clamp(3.4rem, 12vw, 8.5rem); font-weight: 300; letter-spacing: 0.02em; line-height: 1.05; user-select: none; } /* thin green copy stacked on the title; hover crossfades between the two so weight and colour appear to morph without any per-frame reflow */ .hero__title--ghost { position: absolute; inset: 0; color: var(--green); font-weight: 230; opacity: 0; visibility: hidden; pointer-events: none; } .hero__word { display: inline-flex; white-space: nowrap; } .char { display: inline-block; will-change: transform; } .hero__rule { width: clamp(3.5rem, 8vw, 5.5rem); height: 1px; margin-top: clamp(1.5rem, 4vh, 2.75rem); background: var(--green); transform: scaleX(0); } /* ---------- inner (blank) pages ---------- */ .inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 var(--pad); text-align: center; } .inner__title { font-size: clamp(1.8rem, 6vw, 3.5rem); font-weight: 300; letter-spacing: 0.08em; text-transform: uppercase; } .inner__rule { width: clamp(2.5rem, 6vw, 4rem); height: 1px; margin-top: clamp(1.25rem, 3vh, 2rem); background: var(--green); transform: scaleX(0); } .inner__hint { margin-top: clamp(1.25rem, 3vh, 2rem); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: lowercase; color: rgba(18, 18, 18, 0.45); } /* ---------- globe gallery (projects) ---------- */ .globe-viewport { position: fixed; inset: 0; z-index: 1; perspective: 1100px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .globe-viewport.is-dragging { cursor: grabbing; } .globe { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform: translate(-50%, -50%); transform-style: preserve-3d; will-change: transform; } .globe-card { --card-w: clamp(169px, 19.4vw, 278px); --card-h: calc(var(--card-w) * 0.75 + 5.5rem); position: absolute; left: 0; top: 0; width: var(--card-w); height: var(--card-h); margin-left: calc(var(--card-w) * -0.5); margin-top: calc(var(--card-h) * -0.5); backface-visibility: hidden; -webkit-backface-visibility: hidden; cursor: pointer; } .globe-card__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #e7e9e0; } .globe-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .globe-card:hover .globe-card__media img { transform: scale(1.05); } .globe-card__caption { padding-top: 0.6rem; } .globe-card__caption h3 { font-size: 1.25rem; font-weight: 400; letter-spacing: 0.04em; transition: color 0.35s ease; } .globe-card:hover .globe-card__caption h3 { color: var(--green); } .globe-card__caption p { margin-top: 0.2rem; font-size: 1rem; letter-spacing: 0.08em; color: rgba(18, 18, 18, 0.55); } /* ---------- category selector ---------- */ /* full-width strip so the toggle centers without a transform (a transformed ancestor would trap the fixed overlay); empty areas let globe drags pass */ .cat-select { position: fixed; top: var(--pad); left: 0; right: 0; z-index: 6; display: flex; justify-content: center; pointer-events: none; } .cat-select__toggle { font-family: inherit; font-size: var(--nav-size); font-weight: 400; letter-spacing: 0.04em; color: var(--ink); background: none; border: 0; padding: 0.5rem 0.25rem; cursor: pointer; position: relative; z-index: 5; pointer-events: auto; transition: color 0.35s ease; } .cat-select__toggle::after { content: ""; position: absolute; left: 0.25rem; right: 0.25rem; bottom: 0.2rem; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .cat-select__toggle:hover, .cat-select__toggle:focus-visible, .cat-select[data-open="true"] .cat-select__toggle { color: var(--green); } .cat-select__toggle:hover::after, .cat-select__toggle:focus-visible::after, .cat-select[data-open="true"] .cat-select__toggle::after { transform: scaleX(1); } .cat-select__toggle:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; } /* open: full-screen overlay; globe stays visible behind */ .cat-select__menu { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.75rem, 2.5vh, 1.75rem); background: rgba(251, 250, 247, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: auto; } .cat-select__menu[hidden] { display: none; } .cat-select__option { font-family: inherit; font-size: clamp(1.8rem, 6vw, 3.5rem); font-weight: 300; letter-spacing: 0.04em; text-transform: lowercase; color: var(--ink); background: none; border: 0; padding: 0.1em 0.25em; cursor: pointer; position: relative; transition: color 0.35s ease; } .cat-select__option:hover, .cat-select__option:focus-visible { color: var(--green); } .cat-select__option:focus-visible { outline: 1px solid var(--green); outline-offset: 4px; } /* ---------- projects category intro ---------- */ .projcat { margin: auto auto auto clamp(1.5rem, 6vw, 7rem); } .projcat__list { list-style: none; display: flex; flex-direction: column; gap: clamp(0.3rem, 1vh, 0.9rem); } .projcat__item { font-family: inherit; font-size: clamp(3.4rem, 12vw, 8.5rem); font-weight: 300; letter-spacing: 0.01em; text-transform: lowercase; line-height: 1.05; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; display: inline-block; transition: color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .projcat__item:hover, .projcat__item:focus-visible { color: var(--green); transform: translateX(clamp(1.5rem, 4vw, 3.5rem)); } .projcat__item:focus-visible { outline: none; } /* "projects" corner button reuses the nav-link look but resets the native