/* ===================== GOOGLE FONTS — Bauhaus-flavored display face for the K logo Rubik Mono One: heavy, geometric, block-letter sans. Loaded site-wide so every page's nav and footer K renders consistently. ===================== */ @import url('https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap'); /* ===================== CSS VARIABLES ===================== */ :root { --bg: #F7F7F2; --gunmetal: #1E2022; --gunmetal-light: #3A3D40; --red: #004225; --text: #1E2022; --text-muted: #6B6B6B; --font: Helvetica, Arial, sans-serif; } /* ===================== CROSS-DOCUMENT VIEW TRANSITIONS — hero image morph from index ===================== The landing page's centered card and each project's hero image share the view-transition-name `hero-morph`. With navigation: auto set on both pages, the browser snapshots the source image, snaps it over to the destination's hero position, and animates the FLIP between them — the image grows from the centered card and lands on the project page's real hero. Surrounding chrome crossfades. ===================== */ @view-transition { navigation: auto; } .project-hero-img { view-transition-name: hero-morph; } /* The transition needs to operate on a non-inline element for the capture to be reliable. .project-hero-img-wrap is the block-level container; the inside it inherits the morph naturally. */ .project-hero-img-wrap { contain: layout; } /* ---- INBOUND MORPH SETTLE-IN ---- When the destination page loads after a "click to morph" navigation from the index, script.js adds .is-morphing-in to (only when cross-document view transitions are NOT supported, to avoid double-animating on Chrome). The page then plays a brief settle-in: the hero image starts slightly zoomed (looking like the just-grown index card) and eases to its real position, while the surrounding chrome fades up underneath. */ @keyframes morph-hero-settle { from { transform: scale(1.18); opacity: 1; } to { transform: scale(1); opacity: 1; } } @keyframes morph-fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes morph-fade-in { from { opacity: 0; } to { opacity: 1; } } body.is-morphing-in .project-hero-img-wrap { animation: morph-hero-settle 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: center center; } body.is-morphing-in nav, body.is-morphing-in footer { animation: morph-fade-in 0.5s ease 0.05s both; } body.is-morphing-in .project-hero-titles, body.is-morphing-in .project-hero-bottom { animation: morph-fade-up 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both; } body.is-morphing-in .project-section, body.is-morphing-in .project-cta { animation: morph-fade-in 0.4s ease 0.25s both; } @media (prefers-reduced-motion: reduce) { body.is-morphing-in .project-hero-img-wrap, body.is-morphing-in nav, body.is-morphing-in footer, body.is-morphing-in .project-hero-titles, body.is-morphing-in .project-hero-bottom, body.is-morphing-in .project-section, body.is-morphing-in .project-cta { animation: none !important; } } /* ===================== RESET & BASE ===================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; cursor: none; } html { scroll-behavior: smooth; } body { background-color: var(--bg); font-family: var(--font); color: var(--text); overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; } a { color: inherit; text-decoration: none; } /* ===================== CUSTOM CURSOR ===================== */ .cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 3px solid white; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(6px) brightness(1.08); -webkit-backdrop-filter: blur(6px) brightness(1.08); transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 0.3s ease, background-color 0.3s ease, backdrop-filter 0.3s ease, opacity 0.3s ease; z-index: 9999; mix-blend-mode: difference; } .cursor-dot { display: none; } .cursor-ring.hover { width: 64px; height: 64px; border-color: white; background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .cursor-ring.text-hover { border-radius: 3px; border-color: #FFD600; background-color: rgba(255, 214, 0, 0.15); backdrop-filter: none; -webkit-backdrop-filter: none; mix-blend-mode: normal; } /* Custom text selection color */ ::selection { background-color: #FFD600; color: var(--gunmetal); } .cursor-dot.hover { background-color: var(--gunmetal-light); } .cursor-ring.hidden, .cursor-dot.hidden { opacity: 0; } /* ===================== NAVIGATION ===================== */ nav { position: absolute; top: 0; left: 0; right: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 28px 56px; z-index: 100; background-color: transparent; /* Color the whole nav white and blend it with whatever sits behind via `difference`. The result is always the inverse of the page background: dark text on light backgrounds, light text on dark ones — the same trick the custom cursor uses. No transform / will-change / opacity here on purpose — any of those would re-trap the blend and stop it from reaching the page bg. */ color: #fff; mix-blend-mode: difference; } .nav-logo { font-size: 0; /* Hides any whitespace; logo is the K glyph */ line-height: 0; /* Color is fixed white so the difference blend on