@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700;800;900&family=Barlow:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #0d0c0a; --bg2: #131210; --text: #f0ede6; --text-dim: #8a877f; /* Royal/burnt orange — deeper, less neon, more premium. Lower lightness + reduced chroma reads as warm amber rather than safety orange. */ --accent: oklch(0.62 0.13 48); --border: rgba(240,237,230,0.1); --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; } html { scroll-behavior: smooth; overflow-x: clip; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 300; } /* Hide native cursor on EVERYTHING, including links/buttons/inputs that browsers normally re-style. */ *, *::before, *::after, a, button, input, textarea, select, label { cursor: none !important; } /* ── CUSTOM CURSOR ── Both elements use position: fixed and live as direct children of . No transforms or filters on ancestors — those would create a new containing block and break fixed positioning during scroll. The ring uses mix-blend-mode: difference and MUST share a stacking context with the page content, so we do NOT isolate it. */ #cursor-dot { position: fixed; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); pointer-events: none; z-index: 2147483647; /* max int — sit above absolutely everything */ /* No transform offset — JS positions the dot's CENTER at the mouse point by subtracting half the dot size. That makes the visible dot align exactly with the system click point. */ } #cursor-ring { position: fixed; left: 0; top: 0; width: 45px; height: 45px; border-radius: 50%; pointer-events: none; z-index: 2147483646; mix-blend-mode: difference; /* Filled white circle. Difference of #ffffff with the page underneath: - over #0d0c0a (background) → #f2f3f5 (very light) — visible but soft - over light text/images → strong inversion We want the inversion strong everywhere, so a filled ring is correct. If you want the ring to vanish over the background, that requires the ring color to MATCH the background — but then it can't invert content either. So we keep it filled. */ background: #ffffff; } body.cursor-click #cursor-dot { width: 4px; height: 4px; } /* ── NAV ── */ nav.main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 28px 48px; transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94), background 0.4s ease; } nav.main-nav.hidden { transform: translateY(-100%); } nav.main-nav.scrolled { background: rgba(13,12,10,0.92); backdrop-filter: blur(12px); padding: 18px 48px; } /* ── SHARED PROJECT GALLERY ── Flexible blocks: full-width natural-height images for diagrams / masterplans (never cropped), and cover tiles for renders/photos. */ .pgallery { display: flex; flex-direction: column; gap: 2px; } .pg-row { display: grid; gap: 2px; } .pg-row.cols-2 { grid-template-columns: 1fr 1fr; } .pg-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .pg-tile { position: relative; overflow: hidden; background: var(--bg2); } .pg-tile.ar-wide { aspect-ratio: 16/10; } .pg-tile.ar-43 { aspect-ratio: 4/3; } .pg-tile.ar-34 { aspect-ratio: 3/4; } .pg-tile.ar-sq { aspect-ratio: 1/1; } .pg-tile.ar-tall { aspect-ratio: 4/5; } .pg-tile.ar-pano { aspect-ratio: 21/9; } /* whole-image tile (drawings) — contain on a light panel, nothing cropped */ .pg-tile.contain img { object-fit: contain; background: #f6f5f1; } .pg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.25,0.46,0.45,0.94); } .pg-tile:hover img { transform: scale(1.03); } /* full-width diagram block — natural height, fully visible on a panel */ .pg-full { background: #100f0d; border-block: 1px solid var(--border); } .pg-full img { width: 100%; height: auto; display: block; } .pg-cap { position: absolute; left: 16px; bottom: 14px; z-index: 2; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240,237,230,0.6); background: rgba(13,12,10,0.55); padding: 4px 10px; backdrop-filter: blur(4px); } .pg-full-cap { font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); padding: 12px 16px; } /* clickable affordance on gallery images */ .pg-tile img, .pg-full img, .project-hero-bg.zoomable { cursor: none; } /* ── IMAGE LIGHTBOX (detail pages) ── */ #img-lightbox { position: fixed; inset: 0; z-index: 4000; background: rgba(8,7,6,0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } #img-lightbox.open { opacity: 1; pointer-events: auto; } #img-lightbox img { max-width: 100%; max-height: 92vh; object-fit: contain; transform: scale(0.97); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1); box-shadow: 0 40px 120px rgba(0,0,0,0.6); } #img-lightbox.open img { transform: scale(1); } #img-lightbox .ilb-close { position: fixed; top: 28px; right: 36px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(240,237,230,0.3); background: rgba(13,12,10,0.6); color: var(--text); font-size: 20px; cursor: none; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; } #img-lightbox .ilb-close:hover { border-color: var(--accent); background: rgba(13,12,10,0.9); } #img-lightbox .ilb-hint { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); } .nav-logo { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--text); } /* Logo group + "Home" hint shown on inner pages so visitors know the VA mark returns to the landing page. */ .logo-group { display: flex; align-items: center; gap: 10px; } .home-hint { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; font-family: var(--font-body); font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); transition: color 0.2s; } .home-hint .hh-arrow { display: inline-block; color: var(--accent); transform: translateX(0); animation: hhNudge 1.8s ease-in-out infinite; } .home-hint:hover { color: var(--text); } @keyframes hhNudge { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(-3px); opacity: 1; } } .nav-links { display: flex; gap: 36px; list-style: none; } .nav-links a { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; transition: color 0.2s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .nav-links a:hover, .nav-links a.active { color: var(--text); } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* ── PAGE HEADER (inner pages) ── */ .page-header { padding: 160px 48px 80px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .page-header-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(200,160,90,0.05) 0%, transparent 60%); pointer-events: none; } .page-eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .page-eyebrow::before { content: ''; display: block; width: 24px; height: 1px; background: var(--accent); } .page-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 9vw, 130px); line-height: 0.88; letter-spacing: -0.02em; text-transform: uppercase; } /* ── SECTION BASE ── */ .page-section { padding: 80px 48px; position: relative; } .section-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; } .section-label::before { content: ''; display: block; width: 24px; height: 1px; background: var(--accent); } .section-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(42px, 6vw, 80px); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; margin-bottom: 64px; } /* ── REVEAL ── */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ── FOOTER ── */ footer { padding: 48px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .footer-name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .footer-copy { font-size: 0.75rem; color: var(--text-dim); letter-spacing: 0.05em; } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; transition: color 0.2s; } .footer-links a:hover { color: var(--text); } /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); } /* ── PAGE TRANSITION ── IMPORTANT: never put transform on — it breaks position: fixed for ALL descendants (including the cursor). Animate opacity only on body; if a slide-up is wanted, scope it to a content wrapper. */ body { animation: pageIn 0.5s cubic-bezier(0.16,1,0.3,1) both; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { to { transform: translateY(0); } } @keyframes scrollPulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* ── RESPONSIVE ── */ /* Hide custom cursor on touch devices */ @media (pointer: coarse) { #cursor-dot, #cursor-ring { display: none; } *, *::before, *::after, a, button, input, textarea, select, label { cursor: auto !important; } } /* ── HAMBURGER BUTTON (hidden on desktop) ── */ .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; padding: 4px; z-index: 200; } .nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: transform 0.3s ease, opacity 0.3s ease; } .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* ── PHONE LAYOUT (≤768px) — desktop above this breakpoint is untouched ── */ @media (max-width: 768px) { /* Nav → hamburger */ nav.main-nav { padding: 20px 24px; } nav.main-nav.scrolled { padding: 14px 24px; } .nav-toggle { display: flex; } .nav-links { position: fixed; inset: 0; background: rgba(13,12,10,0.97); backdrop-filter: blur(16px); flex-direction: column; align-items: center; justify-content: center; gap: 36px; z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .nav-links.open { opacity: 1; pointer-events: all; } .nav-links a { font-size: 1.3rem; letter-spacing: 0.12em; color: var(--text); } /* Inner page headers */ .page-header { padding: 110px 24px 48px; } .page-title { font-size: clamp(36px, 10vw, 80px); } .page-section { padding: 56px 24px; } .section-title { font-size: clamp(28px, 8vw, 56px); margin-bottom: 36px; } /* Footer — stack */ footer { padding: 32px 24px; flex-direction: column; align-items: flex-start; gap: 10px; } /* Work page */ .map-landing { padding: 100px 24px 40px; } .map-head { flex-direction: column; gap: 12px; } .experience-map { padding: 0 24px 48px; } .projects-header { padding: 36px 24px 16px; } .projects-h2 { font-size: clamp(28px, 8vw, 56px); } }