/* ============================================== JULIAN MARTINI PORTFOLIO - DESIGN SYSTEM Inspired by dao for design (https://www.awwwards.com/sites/dao-for-design) ============================================== */ /* === GOOGLE FONTS === */ /* Font loaded via tags in HTML for non-blocking rendering. Weights 400-900 only (100-300 unused). */ /* === CSS VARIABLES === */ :root { --color-black: #000000; --color-white: #ffffff; --color-gray-light: #ebebeb; --color-gray-medium: #808080; --color-gray-dark: #333333; --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace; --max-width: 1400px; --padding-page: 40px; --transition-fast: 0.2s ease; --transition-medium: 0.3s ease; /* Typography scale */ --text-xs: 0.6875rem; /* 11px - bracket labels, meta */ --text-sm: 0.75rem; /* 12px - eyebrows, labels */ --text-base: 1rem; /* 16px - body text */ --text-lg: 1.125rem; /* 18px - lead text */ /* Label spacing */ --ls-tight: -0.04em; /* large headings */ --ls-normal: -0.02em; /* medium headings */ --ls-wide: 0.1em; /* labels */ --ls-wider: 0.14em; /* eyebrows */ /* Shared description/approach text size */ --text-description: clamp(1.3rem, 2.8vw, 2.2rem); } /* === RESET === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: var(--color-black); background: var(--color-white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Dark base on home page so white hero text is visible before fluid bg loads */ body.page-home { background: #0f1420; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } main { position: relative; z-index: 1; background: var(--color-white); } /* On home page, main background is transparent so the wave bg shows through the hero */ .page-home main, .page-ux-research main, .page-contact main { background: transparent; } .page-ux-research, .page-contact { background: transparent; } .page-ux-research .footer { background: transparent; border-top-color: rgba(255, 255, 255, 0.15); } /* Hero section is transparent to show wave background behind it */ .page-home .hero { background: transparent; } /* === ANIMATED FLUID GRADIENT BACKGROUND (Unicorn Studio embed) === */ /* Only visible on home page; other pages keep white background */ body:not(.page-home):not(.page-contact):not(.page-ux-research) .fluid-bg { display: none; } .fluid-bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100vh; opacity: 0; transition: opacity 0.6s ease; } .fluid-bg.ready { opacity: 1; } /* Hide Unicorn Studio watermark badge */ .fluid-bg a[href*="unicorn"], .fluid-bg > div:not([data-us-project]) { display: none !important; } /* Noise grain overlay — covers entire site on all pages (static, no animation for perf) */ .noise-bg { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; } /* === HEADER === */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; padding: 24px var(--padding-page); transition: opacity 0.4s ease, transform 0.4s ease; } .header.header-hidden { opacity: 0; pointer-events: none; transform: translateY(-100%); } /* === SCROLL REVEAL SYSTEM === */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .reveal.revealed { opacity: 1; transform: translateY(0); } /* Horizontal-scroll cards: fade only (no vertical shift) */ .horizontal-scroll .reveal { transform: none; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .horizontal-scroll .reveal.revealed { opacity: 1; } /* Staggered children */ .reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; } .reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.05s; } .reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.08s; } .reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.1s; } .reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.12s; } .header-inner { display: flex; justify-content: space-between; align-items: flex-start; } .logo { display: block; } .logo-text { font-size: 1.1rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; } /* Non-home pages: logo matches the morphed hero-title state (uppercase, bold) */ body:not(.page-home) .logo-text { font-weight: 900; text-transform: uppercase; letter-spacing: -0.04em; line-height: 0.85; } .nav { display: flex; gap: 32px; align-items: center; } .nav a { font-size: 1rem; font-weight: 700; transition: opacity var(--transition-fast); } .nav a:hover { opacity: 0.5; } .nav-cta { display: inline-flex; align-items: center; gap: 4px; padding: 12px 24px; border: 1px solid var(--color-black); border-radius: 50px; font-weight: 700; transition: all var(--transition-fast); } .nav-cta:hover { background: var(--color-black); color: var(--color-white); opacity: 1 !important; } .nav-cta .arrow { font-size: 0.9em; } /* === MOBILE NAV TOGGLE & OVERLAY === */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; width: 40px; height: 40px; position: relative; z-index: 1002; flex-direction: column; justify-content: center; align-items: center; gap: 6px; } .nav-toggle-bar { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; transform-origin: center; } .nav-toggle.is-open .nav-toggle-bar:first-child { transform: translateY(3.75px) rotate(45deg); } .nav-toggle.is-open .nav-toggle-bar:last-child { transform: translateY(-3.75px) rotate(-45deg); } .nav-toggle.is-open { color: var(--color-white); } .nav-overlay { position: fixed; inset: 0; z-index: 1001; background: rgba(0, 0, 0, 0.95); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s; } .nav-overlay.is-open { opacity: 1; visibility: visible; } .nav-overlay-links { display: flex; flex-direction: column; align-items: center; gap: 32px; } .nav-overlay-links a { color: var(--color-white); font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .nav-overlay.is-open .nav-overlay-links a { opacity: 1; transform: translateY(0); } .nav-overlay.is-open .nav-overlay-links a:nth-child(1) { transition-delay: 0.1s; } .nav-overlay.is-open .nav-overlay-links a:nth-child(2) { transition-delay: 0.15s; } .nav-overlay.is-open .nav-overlay-links a:nth-child(3) { transition-delay: 0.2s; } .nav-overlay.is-open .nav-overlay-links a:nth-child(4) { transition-delay: 0.3s; } .nav-overlay:not(.is-open) .nav-overlay-links a { transition-delay: 0s; } .nav-overlay-links a:hover { opacity: 0.5; } .nav-overlay-cta { display: inline-flex; align-items: center; gap: 6px; padding: 16px 32px; border: 1px solid var(--color-white); border-radius: 50px; margin-top: 16px; } .nav-overlay-cta:hover { background: var(--color-white); color: var(--color-black) !important; opacity: 1 !important; } body.nav-open { overflow: hidden; } /* Toggle icon color — matches nav text per page */ .page-home .header .nav-toggle, .page-about .header .nav-toggle, .page-contact .header .nav-toggle, .page-ux-research .header .nav-toggle { color: var(--color-white); } .page-about .header.header-dark .nav-toggle { color: var(--color-black); } .page-about .header .nav-toggle { transition: color 0.4s ease; } /* === HERO SECTION === */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--padding-page) 100px; position: relative; overflow: visible; } /* Extra scroll distance so the morph animation completes before content appears */ .page-home .hero { margin-bottom: 0; } /* Clip overflow only on non-home pages where grid is not fixed */ body:not(.page-home) .hero { overflow: hidden; } .hero-content, .hero-info, .scroll-indicator { position: relative; z-index: 1; } .hero-content { display: flex; align-items: flex-end; } .hero-title { font-size: clamp(4rem, 15vw, 12rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; text-transform: uppercase; transform-origin: top left; will-change: transform; } /* On home page, the hero-title becomes the single element that morphs from large bottom-left text into the small top-left logo. It is fixed so it stays visible during scroll. */ .page-home .hero-title { position: fixed; bottom: 60px; left: var(--padding-page); z-index: 1001; color: var(--color-white); } /* White text on dark wave background */ .page-home .hero-description { font-weight: 300; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.01em; } /* scroll-indicator color now set on base .scroll-indicator */ .page-home .header .nav a { color: var(--color-white); } .page-home .header .nav-cta { border-color: var(--color-white); color: var(--color-white); } .page-home .header .nav-cta:hover { background: var(--color-white); color: var(--color-black); } /* About page: start with white nav over dark hero, transition to black over white bg */ .page-about .header .logo-text, .page-about .header .nav a { color: var(--color-white); transition: color 0.4s ease; } .page-about .header .nav-cta { border-color: var(--color-white); color: var(--color-white); transition: all 0.4s ease; } .page-about .header .nav-cta:hover { background: var(--color-white); color: var(--color-black); } /* When scrolled over white background, switch to dark text */ .page-about .header.header-dark .logo-text, .page-about .header.header-dark .nav a { color: var(--color-black); } .page-about .header.header-dark .nav-cta { border-color: var(--color-black); color: var(--color-black); } .page-about .header.header-dark .nav-cta:hover { background: var(--color-black); color: var(--color-white); } .hero-title-line { display: block; } .hero-info { position: absolute; top: 50%; right: var(--padding-page); transform: translateY(-50%); max-width: 560px; } .hero-description { font-size: var(--text-description); line-height: 1.4; color: var(--color-gray-dark); } .scroll-indicator { position: fixed; bottom: 40px; right: var(--padding-page); display: flex; align-items: center; gap: 8px; font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); opacity: 0; transition: opacity 1s ease; pointer-events: none; z-index: 10; } .scroll-indicator.visible { opacity: 1; } .scroll-arrow { animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(5px); } 60% { transform: translateY(3px); } } /* === MANIFESTO / APPROACH SECTION (TIWIS style — over fluid bg) === */ .manifesto-section { position: relative; z-index: 1; min-height: 200vh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--padding-page); opacity: 0; will-change: opacity, transform; } body:not(.page-home) .manifesto-section { display: none; } .manifesto-spacer { height: 75vh; } .manifesto-content { max-width: 700px; margin-left: auto; text-align: left; } .manifesto-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 24px; } .manifesto-text { font-size: var(--text-description); font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.01em; } /* === SERVICES / OFFERS SECTION (mirrors manifesto layout) === */ .services-section { position: relative; z-index: 1; min-height: 150vh; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--padding-page); opacity: 0; will-change: opacity, transform; } body:not(.page-home) .services-section { display: none; } .services-spacer { height: 50vh; } .services-content { max-width: 700px; margin-left: auto; } .services-label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 24px; } .services-text { font-size: var(--text-description); font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.9); letter-spacing: -0.01em; } /* === SELECTED WORK HERO (Mason Wong style — sticky centered, fades out) === */ .selected-work-hero { position: relative; z-index: 3; background: transparent; height: 200vh; scroll-margin-top: 80px; } .selected-work-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 3; pointer-events: none; } .selected-work-title { font-size: clamp(3rem, 10vw, 9rem); font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; line-height: 0.95; text-align: center; will-change: opacity; } .page-home .selected-work-title { color: var(--color-white); } /* Scroll hint below "Selected Work" — fades in after 5s */ .selected-work-scroll-hint { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; font-size: 1.1rem; color: rgba(255, 255, 255, 0.7); opacity: 0; transition: opacity 1s ease; pointer-events: none; } .selected-work-scroll-hint.visible { opacity: 1; } /* === WORK SECTIONS === */ /* All sections on home page are transparent — fluid bg shows through */ .page-home .selected-work-hero, .page-home .work-section, .page-home .home-about-section { position: relative; z-index: 1; background: transparent; } .page-home .footer { position: relative; z-index: 1; background: transparent; color: var(--color-white); border-top-color: rgba(255, 255, 255, 0.15); margin-top: 120px; } .page-home .footer-right-box { border-left-color: rgba(255, 255, 255, 0.15); } .page-home .footer-label { color: rgba(255, 255, 255, 0.5); } .page-home .service-item { border-color: rgba(255, 255, 255, 0.15); } .page-home .footer-bottom { border-top-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.5); } .page-home .footer-legal a:hover { color: var(--color-white); } .page-home .social-icon:hover { background: rgba(255, 255, 255, 0.15); } .page-home .footer-cta { background: var(--color-white); color: var(--color-black); } .page-home .footer-cta:hover { background: rgba(255, 255, 255, 0.8); } /* On home page the hero-title IS the logo — always hide the header logo */ .page-home .header .logo { opacity: 0; pointer-events: none; } /* === UX RESEARCH PAGE (animated bg — white text, transparent sections) === */ .page-ux-research .page-hero, .page-ux-research .work-section, .page-ux-research .footer { position: relative; z-index: 1; background: transparent; } .page-ux-research .page-hero-title { color: var(--color-white); } .page-ux-research .page-hero-subtitle { color: rgba(255, 255, 255, 0.7); } .page-ux-research .work-section { color: var(--color-white); padding-bottom: 120px; } .page-ux-research .horizontal-scroll { padding-left: var(--padding-page); padding-right: var(--padding-page); } .page-ux-research .project-category, .page-ux-research .project-year { color: rgba(255, 255, 255, 0.5); } .page-ux-research .footer { color: var(--color-white); } .page-ux-research .tagline-text { color: var(--color-white); } .page-ux-research .footer-label { color: rgba(255, 255, 255, 0.5); } .page-ux-research .service-item { border-color: rgba(255, 255, 255, 0.15); } .page-ux-research .footer-right-box { border-left-color: rgba(255, 255, 255, 0.15); } .page-ux-research .footer-bottom { border-top-color: rgba(255, 255, 255, 0.15); } .page-ux-research .footer-legal a { color: rgba(255, 255, 255, 0.5); } .page-ux-research .footer-legal a:hover { color: var(--color-white); } .page-ux-research .footer-location { color: rgba(255, 255, 255, 0.5); } .page-ux-research .social-icon:hover { background: rgba(255, 255, 255, 0.15); } .page-ux-research .footer-cta { background: var(--color-white); color: var(--color-black); } .page-ux-research .footer-cta:hover { background: rgba(255, 255, 255, 0.8); } .page-ux-research .back-to-top { color: var(--color-white); } .page-ux-research .header .nav a { color: var(--color-white); } .page-ux-research .header .logo-text { color: var(--color-white); } .page-ux-research .nav-cta { border-color: var(--color-white); color: var(--color-white); } /* Contact page: white nav on fluid gradient background */ .page-contact .header .nav a { color: var(--color-white); } .page-contact .header .logo-text { color: var(--color-white); } .page-contact .nav-cta { border-color: var(--color-white); color: var(--color-white); } .page-contact .nav-cta:hover { background: var(--color-white); color: var(--color-black); } .page-ux-research .footer-bottom .separator { color: rgba(255, 255, 255, 0.3); } .selected-work-hero + .work-section { position: relative; z-index: 4; } .work-section { padding: 80px 0; } /* Snap cards into viewport on home page */ .page-home .work-section { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; } /* White text on transparent bg for home page */ .page-home .work-section { color: var(--color-white); } .page-home .section-label { color: rgba(255, 255, 255, 0.5); } .page-home .section-link { color: var(--color-white); } .page-home .project-title, .page-home .project-subtitle, .page-home .project-category, .page-home .project-year { color: var(--color-white); } .page-home .project-subtitle { color: rgba(255, 255, 255, 0.6); } .page-home .project-category { color: rgba(255, 255, 255, 0.5); } .page-home .project-year { color: rgba(255, 255, 255, 0.5); } .section-header { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--padding-page); margin-bottom: 40px; } .section-label { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); } .section-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 500; transition: opacity var(--transition-fast); } .section-link:hover { opacity: 0.5; } .section-link .arrow { font-size: 0.9em; } /* === HORIZONTAL SCROLL WITH SNAP === */ .horizontal-scroll-container { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; scroll-padding-left: var(--padding-page); scroll-padding-right: var(--padding-page); } .horizontal-scroll-container::-webkit-scrollbar { display: none; } .horizontal-scroll { display: flex; gap: 32px; padding-left: var(--padding-page); } .horizontal-scroll::after { content: ''; flex: 0 0 var(--padding-page); min-width: var(--padding-page); } .horizontal-scroll > .project-card { scroll-snap-align: start; } /* === PROJECT CARDS === */ .project-card { flex: 0 0 auto; width: 380px; display: block; transition: opacity var(--transition-medium); } .project-card:hover { opacity: 0.8; } .project-image { width: 100%; aspect-ratio: 4/5; margin-bottom: 16px; overflow: hidden; } .project-placeholder { width: 100%; height: 100%; } .project-card-image { width: 100%; height: 100%; object-fit: cover; display: block; } .ux-placeholder { background: var(--color-gray-light); } .photo-placeholder { background: var(--color-black); } /* Photography cards use 16:9 for landscape images */ .project-card.photo-card .project-image { aspect-ratio: 16/9; } /* Home: About section following Work */ .home-about-section { padding: 200px var(--padding-page) 120px; background: var(--color-white); } .page-home .home-about-section { background: transparent; color: var(--color-white); } .page-home .home-about-text { color: rgba(255, 255, 255, 0.7); } .page-home .home-about-link { color: var(--color-white); border-bottom-color: var(--color-white); } .home-about-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 56px; align-items: flex-start; } .home-about-title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; margin-bottom: 24px; } .home-about-text { font-size: 1rem; line-height: 1.8; color: var(--color-gray-dark); margin-bottom: 16px; } .home-about-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--color-black); padding-bottom: 4px; } .home-about-portrait-frame { width: 100%; max-width: 420px; aspect-ratio: 3/4; overflow: hidden; border-radius: 8px; background: var(--color-gray-light); } .home-about-portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Home: Contact teaser at bottom of landing page */ .home-contact-section { padding: 120px var(--padding-page) 160px; border-top: 1px solid var(--color-gray-light); background: var(--color-black); color: var(--color-white); } .home-contact-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr); gap: 64px; align-items: flex-start; } .home-contact-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; letter-spacing: -0.04em; margin-bottom: 16px; } .home-contact-text { font-size: 1.05rem; line-height: 1.8; color: rgba(255, 255, 255, 0.82); margin-bottom: 28px; } .home-contact-cta { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.6); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .home-contact-right { display: flex; flex-direction: column; gap: 18px; } .home-contact-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.6); margin-bottom: 4px; } .home-contact-value { font-size: 1rem; } @media (max-width: 900px) { .home-about-section { padding: 80px var(--padding-page); } .home-about-inner { grid-template-columns: 1fr; gap: 40px; } .home-contact-section { padding: 80px var(--padding-page) 120px; } .home-contact-inner { grid-template-columns: 1fr; gap: 40px; } } .project-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .project-category { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); } .project-year { font-size: 0.75rem; color: var(--color-gray-medium); } .project-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; text-transform: lowercase; } .project-title::first-letter { text-transform: uppercase; } .project-subtitle { font-size: 0.9375rem; color: var(--color-gray-medium); } /* === FOOTER === */ .footer { position: relative; z-index: 10; background: var(--color-white); border-top: 1px solid var(--color-gray-light); } .footer-main { padding: 0; } /* Two column footer layout */ .footer-two-col { display: grid; grid-template-columns: 1fr 420px; min-height: 500px; } .footer-left { padding: 80px var(--padding-page); display: flex; flex-direction: column; justify-content: space-between; } .footer-tagline { margin-bottom: 0; } .tagline-text { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; font-style: italic; } .footer-logo { margin-top: auto; } .logo-mark { font-size: 5rem; font-weight: 800; line-height: 1; letter-spacing: -0.05em; } /* Right side boxed area */ .footer-right-box { border-left: 1px solid var(--color-gray-light); padding: 40px; display: flex; flex-direction: column; } .footer-services { margin-bottom: 40px; } .footer-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 24px; } .services-list { display: flex; flex-direction: column; gap: 0; } .service-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--color-gray-light); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; } .service-item:first-child { border-top: none; } .service-item .bullet { font-size: 0.5rem; } .footer-social { margin-bottom: auto; } .social-icons { display: flex; gap: 12px; } .social-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: all var(--transition-fast); } .social-icon:hover { background: var(--color-gray-light); } .footer-actions { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 40px; } .back-to-top { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9375rem; font-weight: 500; transition: opacity var(--transition-fast); } .back-to-top:hover { opacity: 0.5; } .footer-left .footer-cta { margin-top: 32px; align-self: flex-start; } .footer-cta { display: inline-flex; align-items: center; gap: 4px; padding: 14px 28px; background: var(--color-black); color: var(--color-white); border-radius: 50px; font-size: 0.875rem; font-weight: 500; transition: all var(--transition-fast); } .footer-cta:hover { background: var(--color-gray-dark); } .footer-cta .arrow { font-size: 0.9em; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 24px var(--padding-page); border-top: 1px solid var(--color-gray-light); font-size: 0.75rem; color: var(--color-gray-medium); text-transform: uppercase; letter-spacing: 0.05em; } .footer-legal { display: flex; gap: 8px; } .footer-legal a { transition: color var(--transition-fast); } .footer-legal a:hover { color: var(--color-black); } .footer-legal .separator { color: var(--color-gray-light); } .footer-location { text-transform: uppercase; letter-spacing: 0.05em; } /* === LEGAL / IMPRESSUM PAGE === */ .legal-section { min-height: 100vh; padding: 160px var(--padding-page) 120px; } .legal-content { max-width: 720px; margin: 0 auto; } .legal-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 64px; } .legal-content h2 { font-size: 1.1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 48px; margin-bottom: 16px; } .legal-content p { font-size: 1rem; line-height: 1.7; color: var(--color-gray-dark); margin-bottom: 12px; } /* === RESPONSIVE === */ @media (max-width: 1024px) { :root { --padding-page: 24px; } .nav { gap: 24px; } .project-card { width: 320px; } .footer-two-col { grid-template-columns: 1fr 340px; } .footer-right-box { padding: 32px; } } @media (max-width: 900px) { .footer-two-col { grid-template-columns: 1fr; } .footer-left { padding-bottom: 40px; } .footer-logo { margin-top: 60px; } .footer-right-box { border-left: none; border-top: 1px solid var(--color-gray-light); } } @media (max-width: 768px) { .header { padding: 16px var(--padding-page); } .nav { display: none; } .nav-toggle { display: flex; } .hero { padding-top: 120px; justify-content: flex-start; min-height: auto; } .hero-title { font-size: clamp(3rem, 12vw, 6rem); } .page-home .hero { min-height: 100vh; justify-content: space-between; padding-top: 120px; padding-bottom: 60px; } .page-home .hero-content { order: 2; } .page-home .hero-info { order: 1; padding-top: 25vh; } .page-home .hero-title { position: relative; bottom: auto; left: auto; font-size: clamp(3.5rem, 16vw, 7rem); } .hero-info { position: relative; top: auto; right: auto; max-width: 100%; margin-top: 0; } .scroll-indicator { display: none; } .selected-work-hero { height: 200vh; } .project-card { width: 280px; } .horizontal-scroll { gap: 16px; } .footer-actions { flex-direction: column; gap: 24px; align-items: stretch; } .footer-cta { text-align: center; justify-content: center; } .footer-bottom { flex-direction: column; gap: 16px; text-align: center; } .logo-mark { font-size: 4rem; } /* On mobile, morph JS is disabled — show manifesto + services directly */ .page-home .manifesto-section, .page-home .services-section { opacity: 1 !important; transform: none !important; min-height: auto; } .page-home .manifesto-spacer { height: 20vh; } } /* === PAGE HERO === */ .page-hero { padding: 160px var(--padding-page) 80px; } .page-hero-title { /* sizing inherited from unified .page-hero-title rule */ } /* === PHOTOGRAPHY PAGE === */ .photography-hero { padding: 120px 0 0; text-align: center; position: relative; } .photography-hero-title { font-size: 11.5vw; font-weight: 900; line-height: 1; letter-spacing: -0.04em; text-transform: uppercase; color: var(--color-black); transition: color 0.6s ease; } .photography-hero-title.faded { color: #e0e0e0; } .photography-spacer { height: 30vh; } /* Category Banners */ .category-banners { scroll-snap-type: y mandatory; } .category-banner { height: 30vh; display: flex; align-items: center; justify-content: flex-start; padding-left: 48px; position: relative; overflow: hidden; scroll-snap-align: start; background-size: cover; background-position: center; text-decoration: none; color: var(--color-white); /* Slide-in: start clipped to zero width */ clip-path: inset(0 100% 0 0); transition: clip-path 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .category-banner.visible { clip-path: inset(0 0 0 0); } /* Staggered widths — shortest on top, longest on bottom */ .category-banner.banner-short { width: 50%; } .category-banner.banner-mid { width: 70%; transition-delay: 0.15s; } .category-banner.banner-long { width: 100%; transition-delay: 0.3s; } .category-banner::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); transition: background 0.3s ease; } .category-banner:hover::before { background: rgba(0, 0, 0, 0.15); } .category-banner-content { position: relative; z-index: 1; text-align: left; } .category-banner-title { font-size: clamp(2rem, 6vw, 5rem); font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; } .category-banner-meta { font-size: 0.875rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-top: 8px; } .page-hero-subtitle { font-size: 1.125rem; line-height: 1.7; color: var(--color-gray-dark); max-width: 600px; margin-top: 32px; } /* === ABOUT PAGE === */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; } .about-content { padding: 80px var(--padding-page); display: flex; flex-direction: column; justify-content: center; } .about-intro { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; margin-bottom: 32px; } .about-text { font-size: 1rem; line-height: 1.8; color: var(--color-gray-dark); } .about-text p { margin-bottom: 24px; } .about-image { background: var(--color-gray-light); display: flex; align-items: center; justify-content: center; } .about-image-placeholder { width: 70%; aspect-ratio: 3/4; background: var(--color-white); display: flex; align-items: center; justify-content: center; color: var(--color-gray-medium); font-size: 0.875rem; } /* === ABOUT HERO (Mason Wong-style parallax with scroll-driven reveals) === */ .about-hero { position: relative; height: 280vh; background: var(--color-black); overflow: hidden; isolation: isolate; } .about-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center 25%; background-repeat: no-repeat; z-index: 0; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translate3d(0, 0, 0) scale(1.01); contain: layout style paint; } .about-hero-bg::after { content: ""; position: absolute; inset: 0; background: rgb(0, 0, 0); opacity: var(--overlay-opacity, 0.3); will-change: opacity; backface-visibility: hidden; transform: translateZ(0); } /* Each "screen" is 100vh tall, scrolls naturally */ .about-hero-screen { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; z-index: 1; padding: 0 var(--padding-page); } .about-hero-screen-title { align-items: flex-end; justify-content: flex-start; padding-bottom: 10vh; } .about-hero-title { color: var(--color-white); text-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } /* ABOUT title fade-in on page load */ .about-fade-in { opacity: 0; transform: translateY(30px); animation: aboutFadeIn 1s ease forwards; animation-delay: 0.2s; } @keyframes aboutFadeIn { to { opacity: 1; transform: translateY(0); } } /* Role screen: left-aligned, same size as ABOUT title */ .about-hero-screen-role { align-items: center; justify-content: flex-start; } .about-hero-role-text { text-align: left; } .about-reveal-line { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--color-white); opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s ease; } .about-reveal-line.revealed { opacity: 1; transform: translateY(0); } .about-reveal-line em { font-style: italic; font-weight: 300; text-transform: lowercase; letter-spacing: 0.02em; } .about-reveal-small { font-size: clamp(1.2rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; } .about-reveal-small em { font-style: italic; text-transform: lowercase; font-weight: 300; } /* Origin screen: right-aligned (mirrors landing page approach structure) */ .about-hero-screen-origin { flex-direction: column; align-items: flex-end; justify-content: center; gap: 40px; } .about-hero-origin-text { display: flex; flex-direction: column; gap: 8px; text-align: right; } .about-hero-bio { max-width: 560px; opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s; text-align: right; } .about-hero-bio.revealed { opacity: 1; transform: translateY(0); } .about-hero-bio p { font-size: 0.95rem; line-height: 1.7; color: rgba(255, 255, 255, 0.8); margin-bottom: 16px; } .about-hero-bio p:last-child { margin-bottom: 0; } /* === ABOUT STATEMENT === */ .about-statement { position: relative; z-index: 3; background: var(--color-white); min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 120px var(--padding-page); } .about-statement-inner { max-width: 1100px; text-align: center; } .statement-bold { font-size: clamp(2.2rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; color: var(--color-black); } /* === ABOUT EXPERTISE (Mason Wong-style: sticky left + scrolling right) === */ .about-expertise { position: relative; z-index: 3; background: var(--color-white); padding: 120px var(--padding-page); } .about-expertise-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; max-width: 1200px; margin: 0 auto; } .about-expertise-left { position: sticky; top: 120px; align-self: start; } .about-expertise-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 16px; } .about-expertise-heading { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; color: var(--color-black); margin-bottom: 32px; } .about-expertise-body { font-size: 0.95rem; line-height: 1.8; color: var(--color-gray-dark); max-width: 380px; } .about-expertise-body p { margin-bottom: 16px; } .about-expertise-right { flex: 1; } .about-expertise-image { margin-bottom: 80px; border-radius: 8px; overflow: hidden; } .about-expertise-image img { width: 100%; height: auto; display: block; } /* Numbered skill items */ .about-skills-list { padding: 0; margin: 0; } .about-skill-item { display: grid; grid-template-columns: auto 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--color-gray-light); } .about-skill-item:last-child { border-bottom: 1px solid var(--color-gray-light); } .skill-number { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--ls-wide); color: var(--color-gray-medium); padding-top: 4px; } .skill-title { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 8px; color: var(--color-black); } .skill-desc { font-size: 0.9rem; line-height: 1.7; color: var(--color-gray-dark); max-width: 500px; } /* === ABOUT BANNER (full-width image with text overlay) === */ .about-banner { position: relative; z-index: 3; height: 70vh; min-height: 400px; overflow: hidden; } .about-banner-img { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .about-banner-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 60%); } .about-banner-text { position: absolute; bottom: 60px; left: var(--padding-page); right: var(--padding-page); max-width: 640px; z-index: 1; } .about-banner-text p { font-size: 1.05rem; line-height: 1.85; color: rgba(255, 255, 255, 0.92); } /* Photography section inside About */ .about-photo-section { padding: 120px var(--padding-page) 200px; border-top: 1px solid var(--color-gray-light); background: var(--color-white); scroll-snap-align: center; scroll-margin-top: 80px; content-visibility: auto; contain-intrinsic-size: auto 800px; } .about-photo-header { max-width: 820px; margin-bottom: 64px; } .about-photo-eyebrow { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 16px; } .about-photo-title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; margin-bottom: 20px; } .about-photo-text { font-size: 1rem; line-height: 1.8; color: var(--color-gray-dark); } @media (max-width: 900px) { .about-photo-section { padding: 80px var(--padding-page) 80px; } .about-expertise-inner { grid-template-columns: 1fr; gap: 40px; } .about-expertise-left { position: relative; top: 0; } .about-expertise-heading { font-size: clamp(2rem, 10vw, 3.5rem); } .about-statement { padding: 80px var(--padding-page); min-height: 60vh; } .about-hero { height: 320vh; } .about-reveal-line { font-size: clamp(1.8rem, 5vw, 2.5rem); } .about-hero-screen-origin { align-items: flex-start; } .about-hero-origin-text { text-align: left; } .about-hero-bio { text-align: left; } } /* === CV SECTION === */ .cv-section { padding: 80px var(--padding-page); border-top: 1px solid var(--color-gray-light); } .cv-section-title { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 40px; } .cv-list { max-width: 900px; } .cv-item { display: grid; grid-template-columns: 240px 1fr auto; gap: 40px; padding: 24px 0; border-bottom: 1px solid var(--color-gray-light); align-items: baseline; } .cv-item:first-child { border-top: 1px solid var(--color-gray-light); } .cv-company { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-dark); } .cv-date { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; } .cv-role { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; text-align: right; } /* === CONTACT PAGE === */ .contact-section { min-height: 80vh; display: flex; align-items: center; padding: 160px var(--padding-page) 80px; } .contact-fullpage { min-height: 100vh; align-items: flex-start; padding-top: 140px; } .contact-fullpage .contact-content { max-width: 100%; width: 100%; } .contact-fullpage .form-label { color: rgba(255, 255, 255, 0.6); } .contact-fullpage .form-input { color: var(--color-white); border-bottom-color: rgba(255, 255, 255, 0.3); } .contact-fullpage .form-input:focus { border-bottom-color: var(--color-white); } .contact-fullpage .form-textarea { border-color: rgba(255, 255, 255, 0.3); } .contact-fullpage .form-textarea:focus { border-color: var(--color-white); } .contact-fullpage .contact-send-btn { background: var(--color-white); color: var(--color-black); } .contact-content { max-width: 800px; } .contact-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; margin-bottom: 32px; } .contact-text { font-size: 1.125rem; line-height: 1.7; color: var(--color-gray-dark); margin-bottom: 48px; max-width: 500px; } .contact-email { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 600; display: inline-block; border-bottom: 2px solid var(--color-black); padding-bottom: 4px; margin-bottom: 48px; transition: opacity var(--transition-fast); } .contact-email:hover { opacity: 0.5; } .contact-socials { display: flex; gap: 32px; } .contact-social-link { font-size: 0.875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; transition: opacity var(--transition-fast); } .contact-social-link:hover { opacity: 0.5; } /* === CONTACT FORM === */ .contact-form { margin-top: 48px; } .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; } .contact-form-left { display: flex; flex-direction: column; gap: 32px; } .contact-form-right { display: flex; flex-direction: column; } .form-group { display: flex; flex-direction: column; } .form-group-message { height: 100%; } .form-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-dark); margin-bottom: 8px; } .form-input { background: transparent; border: none; border-bottom: 1px solid var(--color-gray-dark); padding: 12px 0; font-size: 1rem; font-family: inherit; color: var(--color-black); outline: none; transition: border-color 0.3s ease; } .form-input:focus { border-bottom-color: var(--color-black); } .form-textarea { resize: vertical; min-height: 120px; height: 100%; border: 1px solid var(--color-gray-dark); border-radius: 0; padding: 12px; } .form-textarea:focus { border-color: var(--color-black); } .contact-send-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 40px; padding: 16px 32px; background: var(--color-black); color: var(--color-white); border: none; border-radius: 50px; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: opacity 0.3s ease; } .contact-send-btn:hover { opacity: 0.7; } /* === POINTER HIGHLIGHT ANIMATION === */ .pointer-highlight { position: relative; display: inline-block; } /* Rectangle grows from 0×0 at top-left to full size — pointer drags it open */ .ph-rect { position: absolute; top: -4px; left: -8px; width: 0; height: 0; border: 1.5px solid var(--color-black); pointer-events: none; } .pointer-highlight.animate .ph-rect { animation: phRectGrow 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes phRectGrow { 0% { width: 0; height: 0; } 100% { width: calc(100% + 16px); height: calc(100% + 8px); } } /* Pointer starts at top-left, follows the expanding bottom-right corner */ .ph-pointer { position: absolute; top: -4px; left: -8px; width: 20px; height: 20px; color: #3b82f6; transform: rotate(-90deg); opacity: 0; pointer-events: none; } .pointer-highlight.animate .ph-pointer { animation: phPointerDrag 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes phPointerDrag { 0% { opacity: 0; top: -4px; left: -8px; } 8% { opacity: 1; } 100% { opacity: 1; top: calc(100% + 4px); left: calc(100% + 8px); } } /* === PHOTOGRAPHY/UX PAGES === */ .category-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 var(--padding-page) 80px; } .category-card { aspect-ratio: 4/5; background: var(--color-black); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 32px; transition: opacity var(--transition-medium); } .category-card:hover { opacity: 0.9; } .category-card-content { color: var(--color-white); } .category-card-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 8px; } .category-card-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } .category-card-meta { font-size: 0.875rem; opacity: 0.7; margin-top: 8px; } /* === DOCUMENTARY GRID === */ .documentary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 0 var(--padding-page) 80px; } .documentary-card { aspect-ratio: 16/9; background: var(--color-black); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 24px; transition: opacity var(--transition-medium); } .documentary-card:hover { opacity: 0.85; } .documentary-card-content { color: var(--color-white); } .documentary-card-label { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.6; margin-bottom: 6px; } .documentary-card-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .documentary-card-meta { font-size: 0.75rem; opacity: 0.6; margin-top: 6px; } /* === IMAGE TRACK (Camille Mormal-inspired) === */ .page-photography { overflow: hidden; } .image-track-viewport { height: 100vh; width: 100%; display: flex; align-items: center; overflow: hidden; position: relative; cursor: grab; user-select: none; } .image-track-viewport:active { cursor: grabbing; } /* Left fade so cards disappear under the category nav */ .image-track-viewport::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 260px; background: linear-gradient(to right, var(--color-white) 40%, rgba(255,255,255,0.85) 65%, transparent); z-index: 10; pointer-events: none; } .image-track { display: flex; gap: 4vmin; position: absolute; left: 50%; top: 50%; transform: translate(0%, -50%); transition: none; } .image-track.smooth { transition: transform 0.4s ease-out; } .track-image-wrap { width: 100%; height: 56vmin; overflow: hidden; position: relative; } .track-image { width: 120%; height: 100%; margin-left: -10%; background-size: cover; background-position: center; will-change: transform; transition: none; } .track-item:hover .track-image { filter: brightness(1.05); } .track-info { padding-top: 16px; } .track-label { display: block; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 6px; } .track-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 4px; } .track-meta { font-size: 0.8125rem; color: var(--color-gray-medium); } /* Drag hint */ .track-hint { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.5; transition: opacity 0.5s ease; pointer-events: none; } .track-hint.hidden { opacity: 0; } .track-hint-text { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-gray-medium); } .track-hint-arrow { font-size: 1rem; color: var(--color-gray-medium); letter-spacing: 0.3em; } /* Category nav (left side of track) */ .track-categories { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 16px; z-index: 20; } .track-cat { background: none; border: none; font-family: var(--font-primary); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-gray-medium); cursor: pointer; padding: 0; text-align: left; transition: color var(--transition-fast), opacity var(--transition-fast); opacity: 0.4; } .track-cat:hover { opacity: 0.7; } .track-cat.active { color: var(--color-black); opacity: 1; } /* Track item fade transitions for category switching */ .track-item { flex: 0 0 auto; display: block; width: 40vmin; position: relative; transition: opacity 0.5s ease, transform 0.5s ease; } /* Portrait photos: same width as landscape */ .track-item.portrait { width: 40vmin; } .track-item.fading-out { opacity: 0; transform: scale(0.96); pointer-events: none; } .track-item.fading-in { animation: fadeSlideIn 0.5s ease forwards; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Flip-clock counter */ .track-counter { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; z-index: 20; } .flip-cell { width: 28px; height: 32px; overflow: hidden; position: relative; } .flip-cell-inner { position: relative; width: 100%; height: 100%; } .flip-cell-inner .flip-old, .flip-cell-inner .flip-new { display: block; width: 100%; text-align: center; font-size: 1.125rem; font-weight: 600; line-height: 32px; color: var(--color-black); position: absolute; left: 0; } .flip-cell-inner .flip-old { top: 0; } .flip-cell-inner .flip-new { top: -100%; } .flip-cell-inner.flipping .flip-old { animation: flipOut 0.35s ease-in forwards; } .flip-cell-inner.flipping .flip-new { animation: flipIn 0.35s ease-out forwards; } @keyframes flipOut { 0% { top: 0; } 100% { top: 100%; } } @keyframes flipIn { 0% { top: -100%; } 100% { top: 0; } } .flip-separator { font-size: 0.875rem; font-weight: 400; color: var(--color-gray-medium); line-height: 32px; } .flip-total { display: block; font-size: 1.125rem; font-weight: 600; line-height: 32px; text-align: center; color: var(--color-black); } /* === PROJECT DETAIL PAGE (Camille Mormal-inspired) === */ /* Fixed back link */ .project-back { position: fixed; top: 32px; left: 40px; z-index: 100; font-size: 0.9375rem; font-weight: 500; color: var(--color-black); transition: opacity var(--transition-fast); } .project-back:hover { opacity: 0.5; } /* Fixed counter (left center, visible only in gallery) */ .project-counter { position: fixed; left: 40px; top: 50%; transform: translateY(-50%); z-index: 100; font-size: 0.9375rem; font-weight: 400; color: var(--color-white); opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } /* ---- PROJECT HERO (full viewport intro) ---- */ .project-hero { display: grid; grid-template-columns: 65% 35%; min-height: 100vh; } .project-hero-image { position: relative; overflow: hidden; } .project-hero-placeholder { width: 100%; height: 100%; min-height: 100vh; background: #1a1a1a; } .project-hero-image img { width: 100%; height: 100%; object-fit: cover; min-height: 100vh; } .project-hero-info { padding: 100px 60px 60px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; } .project-hero-title { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 80px; } .project-hero-role { font-size: 1rem; font-weight: 600; margin-bottom: 24px; } .project-hero-description { font-size: 0.9375rem; line-height: 1.7; color: var(--color-gray-dark); max-width: 380px; margin-bottom: 48px; } .project-hero-collab { margin-bottom: auto; } .project-hero-collab-label { display: block; font-size: 0.9375rem; font-weight: 500; margin-bottom: 4px; } .project-hero-collab-value { display: block; font-size: 0.9375rem; color: var(--color-gray-dark); } .project-hero-scroll { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 40px; } .project-hero-scroll-text { font-size: 0.9375rem; font-weight: 400; } .project-hero-scroll-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-gray-light); font-size: 1.25rem; transition: background var(--transition-fast); } .project-hero-scroll-btn:hover { background: var(--color-gray-light); } /* ---- PROJECT GALLERY (dark section) ---- */ .project-gallery { background: var(--color-black); position: relative; padding: 120px 0 200px; min-height: 100vh; } /* Gallery tag label */ .project-gallery-tag { display: flex; justify-content: center; margin-bottom: 80px; } .project-gallery-tag span { display: inline-block; padding: 6px 16px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } /* Large gallery images */ .project-gallery-images { max-width: 1200px; margin: 0 auto; padding: 0 80px; padding-right: 140px; display: flex; flex-direction: column; gap: 40px; } .gallery-img { width: 100%; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; } .gallery-img.revealed { opacity: 1; transform: translateY(0); } .gallery-img-placeholder { width: 100%; aspect-ratio: 16/10; background: #222; border-radius: 2px; } .gallery-img img { width: 100%; height: auto; max-height: 85vh; object-fit: contain; display: block; border-radius: 2px; } /* Thumbnail strip (fixed right side) */ .project-thumbnails { position: fixed; right: 24px; top: 55%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 6px; z-index: 50; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .project-thumbnails.visible { opacity: 1; pointer-events: auto; } .thumb { width: 56px; height: 40px; overflow: hidden; border-radius: 3px; cursor: pointer; opacity: 0.4; transition: opacity var(--transition-fast), outline-color var(--transition-fast); outline: 2px solid transparent; outline-offset: 2px; } .thumb:hover { opacity: 0.7; } .thumb.active { opacity: 1; outline-color: rgba(255, 255, 255, 0.8); } .thumb-placeholder { width: 100%; height: 100%; background: #333; } .thumb img { width: 100%; height: 100%; object-fit: cover; } /* Gallery section overrides for back/counter colors */ .page-project .project-back, .page-project .project-counter { transition: color 0.4s ease; } .page-project.in-gallery .project-back { color: var(--color-white); } /* White header when gallery (dark bg) is in view */ .page-project.in-gallery .header .nav a, .page-project.in-gallery .header .logo-text { color: var(--color-white); } .page-project.in-gallery .header .nav-cta { border-color: var(--color-white); color: var(--color-white); } .page-project.in-gallery .header .nav-cta:hover { background: var(--color-white); color: var(--color-black); } .page-project.in-gallery .pj-back { color: var(--color-white); } .page-project.in-gallery .project-counter { color: var(--color-white); opacity: 1; } /* Photo project pages: always show back button and counter */ .page-photo-project .pj-back { opacity: 1; } .page-photo-project .project-counter { opacity: 1; color: var(--color-black); } .page-photo-project.in-gallery .project-counter { color: var(--color-white); } /* === CASE STUDY PAGE === */ .cs-hero { padding: 160px var(--padding-page) 0; } .cs-hero-inner { max-width: 800px; margin-bottom: 60px; } .cs-hero-label { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 16px; } .cs-hero-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; margin-bottom: 24px; } .cs-hero-subtitle { font-size: 1.25rem; line-height: 1.6; color: var(--color-gray-dark); max-width: 600px; } .cs-hero-image { width: 100%; aspect-ratio: 16/9; background: var(--color-gray-light); overflow: hidden; } .cs-hero-image img { width: 100%; height: 100%; object-fit: cover; } .cs-section { padding: 80px var(--padding-page); } .cs-section-gray { background: #f7f7f7; } .cs-section-inner { max-width: 900px; } .cs-overview-grid { display: flex; gap: 60px; margin-bottom: 60px; padding-bottom: 40px; border-bottom: 1px solid var(--color-gray-light); } .cs-overview-label { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 6px; } .cs-overview-value { display: block; font-size: 1rem; font-weight: 600; } .cs-body p { font-size: 1rem; line-height: 1.8; color: var(--color-gray-dark); margin-bottom: 20px; max-width: 700px; } .cs-heading { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 24px; } .cs-subheading { font-size: 1.125rem; font-weight: 700; margin-top: 48px; margin-bottom: 24px; } .cs-image-placeholder { width: 100%; aspect-ratio: 16/9; background: var(--color-gray-light); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; color: var(--color-gray-medium); margin: 32px 0; } /* Insight cards */ .cs-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 32px 0; } .cs-insight-card { padding: 28px; border: 1px solid var(--color-gray-light); border-radius: 4px; } .cs-insight-card h3 { font-size: 0.9375rem; font-weight: 700; margin-bottom: 8px; } .cs-insight-card p { font-size: 0.875rem; line-height: 1.6; color: var(--color-gray-dark); margin-bottom: 0; } /* Personas */ .cs-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; } .cs-persona { padding: 28px; border: 1px solid var(--color-gray-light); border-radius: 4px; } .cs-persona h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 4px; } .cs-persona-meta { display: block; font-size: 0.8125rem; color: var(--color-gray-medium); margin-bottom: 12px; } .cs-persona p { font-size: 0.875rem; line-height: 1.6; color: var(--color-gray-dark); margin-bottom: 0; } /* Test meta */ .cs-test-meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-bottom: 40px; } .cs-test-item h3 { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 8px; } .cs-test-item p { font-size: 0.875rem; line-height: 1.6; margin-bottom: 0; } /* Findings */ .cs-findings { display: flex; flex-direction: column; gap: 20px; } .cs-finding { padding: 24px; border: 1px solid var(--color-gray-light); border-radius: 4px; background: var(--color-white); } .cs-finding-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .cs-finding-title { font-size: 1rem; font-weight: 700; } .cs-finding-severity { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 3px; white-space: nowrap; } .cs-severity-4 { background: #fee2e2; color: #991b1b; } .cs-severity-3 { background: #fef3c7; color: #92400e; } .cs-finding p { font-size: 0.875rem; line-height: 1.6; color: var(--color-gray-dark); margin-bottom: 8px; max-width: none; } .cs-finding p:last-child { margin-bottom: 0; } /* Next project link */ .cs-next { padding: 80px var(--padding-page); border-top: 1px solid var(--color-gray-light); text-align: center; } .cs-next-link { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; transition: opacity var(--transition-fast); } .cs-next-link:hover { opacity: 0.5; } .cs-next-arrow { font-size: 1.25em; } @media (max-width: 768px) { .cs-hero { padding-top: 120px; } .cs-overview-grid { flex-direction: column; gap: 20px; } .cs-insights, .cs-personas { grid-template-columns: 1fr; } .cs-test-meta { grid-template-columns: 1fr; } .cs-finding-header { flex-direction: column; align-items: flex-start; gap: 8px; } } /* === UNIFIED PAGE TITLES === */ .pj-title, .page-hero-title, .page-title-unified { font-size: clamp(4rem, 12vw, 10rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; } /* === BACK BUTTON (project pages) === */ .pj-back { position: fixed; top: 50%; left: 40px; transform: translateY(-50%); margin-top: -40px; z-index: 999; font-size: 1.25rem; font-weight: 400; color: var(--color-black); text-decoration: none; transition: opacity 0.3s ease, color 0.4s ease; } .pj-back:hover { opacity: 0.5; } /* === PROJECT PAGE V2 (mason-wong inspired) === */ .pj-hero { padding: 180px var(--padding-page) 60px; } .pj-title { margin-bottom: 40px; text-align: center; } .pj-meta { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; } .pj-meta-item { display: flex; flex-direction: column; } .pj-meta-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 4px; font-family: var(--font-mono); } .pj-meta-value { font-size: 1rem; font-weight: 600; } /* Full-width hero image */ /* Scroll-reveal for project page elements */ .pj-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.4s ease, transform 0.4s ease; } .pj-reveal.revealed { opacity: 1; transform: translateY(0); } .pj-hero-image { width: 100%; padding: 0 var(--padding-page); box-sizing: border-box; } .pj-hero-image img { width: 100%; display: block; } /* 3-column Overview / Objectives / Impact section */ .pj-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; padding: 120px var(--padding-page); } .pj-three-col-item h3 { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 16px; font-family: var(--font-mono); } .pj-three-col-item p, .pj-three-col-item li { font-size: 1rem; line-height: 1.7; color: var(--color-gray-dark); } .pj-three-col-item ul { list-style: none; padding: 0; } .pj-three-col-item li { padding-left: 1em; position: relative; margin-bottom: 8px; } .pj-three-col-item li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-gray-medium); } /* Challenge section with background image overlay */ .pj-challenge { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-white); padding: 120px var(--padding-page); overflow: hidden; } .pj-challenge-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; } .pj-challenge-bg::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); } .pj-challenge--no-image { background: #1a1a1a; } .pj-challenge-content { position: relative; z-index: 1; max-width: 1000px; } .pj-challenge-label { font-size: 0.8125rem; letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 28px; font-family: var(--font-mono); opacity: 0.8; } .pj-challenge-heading { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; text-transform: none; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 32px; } .pj-challenge-tag { display: inline-block; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.4); padding: 5px 14px; margin-bottom: 36px; } .pj-challenge-body { font-size: 0.9375rem; line-height: 1.9; color: rgba(255, 255, 255, 0.8); max-width: 700px; margin: 0 auto; } .pj-challenge-body p { margin-bottom: 20px; } .pj-challenge-body p:last-child { margin-bottom: 0; } /* Alternating content sections */ .pj-section { padding: 120px var(--padding-page); } .pj-section--gray { background: #f7f7f7; } .pj-section-inner { max-width: 1400px; margin: 0 auto; } /* Content row: text + image side by side */ .pj-content-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 120px; } .pj-content-row:last-child { margin-bottom: 0; } /* Reverse order for right-aligned text */ .pj-content-row.align-right { direction: rtl; } .pj-content-row.align-right > * { direction: ltr; } /* Text block inside content row */ .pj-content-row .pj-text-block { max-width: 100%; margin-bottom: 0; } /* Image inside content row */ .pj-content-image { width: 100%; } .pj-content-image img { width: 100%; display: block; } /* Legacy: solo text blocks (when no image pairing) */ .pj-text-block { max-width: 640px; margin-bottom: 80px; } .pj-text-block:last-child { margin-bottom: 0; } .pj-text-block.align-right { margin-left: auto; } .pj-text-block.align-left { margin-right: auto; } .pj-section-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 16px; font-family: var(--font-mono); } .pj-section-title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 24px; } .pj-section-title.large { font-size: clamp(1.75rem, 4vw, 2.75rem); } .pj-body { font-size: 1rem; line-height: 1.85; color: var(--color-gray-dark); } .pj-body p { margin-bottom: 20px; } .pj-body p:last-child { margin-bottom: 0; } .pj-body strong { font-weight: 700; color: var(--color-black); } /* Full-bleed image */ .pj-full-image { width: 100%; overflow: hidden; } .pj-full-image img { width: 100%; display: block; } /* Image with caption */ .pj-image-captioned { padding: 0 var(--padding-page); max-width: 1100px; margin: 80px auto; } .pj-image-captioned img { width: 100%; display: block; margin-bottom: 12px; } .pj-image-caption { font-size: 0.8125rem; color: var(--color-gray-medium); text-align: center; font-style: italic; } /* Slide carousel */ .slide-carousel { position: relative; border-radius: 12px; overflow: hidden; background: #000; } .slide-carousel-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .slide-carousel-track::-webkit-scrollbar { display: none; } .slide-carousel-track img { flex: 0 0 100%; width: 100%; height: auto; display: block; scroll-snap-align: start; } .slide-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.85); color: #000; font-size: 1.125rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity var(--transition-medium); z-index: 2; } .slide-carousel-nav:hover { background: #fff; } .slide-carousel-prev { left: 12px; } .slide-carousel-next { right: 12px; } .slide-carousel-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; font-size: 0.8125rem; color: var(--color-gray-medium); font-family: var(--font-mono); } .slide-carousel-counter { font-variant-numeric: tabular-nums; } .slide-carousel-download { color: var(--color-gray-medium); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-medium); } .slide-carousel-download:hover { color: var(--color-black); } /* Two-column image grid */ .pj-image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 0 var(--padding-page); max-width: 1100px; margin: 80px auto; } .pj-image-grid img { width: 100%; display: block; } /* Project sub-sections (for multi-project pages like SoundCloud) */ .pj-project-divider { padding: 0 var(--padding-page); max-width: 1100px; margin: 0 auto; } .pj-project-divider hr { border: none; border-top: 1px solid var(--color-gray-light); margin: 0; } .pj-project-number { font-size: 0.6875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 8px; font-family: var(--font-mono); } /* Next project link */ .pj-next { padding: 80px var(--padding-page); border-top: 1px solid var(--color-gray-light); text-align: center; } .pj-next-link { display: inline-flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; transition: opacity var(--transition-fast); } .pj-next-link:hover { opacity: 0.5; } /* Responsive */ @media (max-width: 768px) { .pj-hero { padding-top: 120px; } .pj-title { font-size: clamp(2rem, 11vw, 4rem); overflow-wrap: break-word; word-break: break-word; } .pj-meta { flex-direction: column; gap: 16px; } .pj-three-col { grid-template-columns: 1fr; gap: 32px; padding: 80px var(--padding-page); } .pj-challenge { padding: 80px var(--padding-page); min-height: 80vh; } .pj-challenge-heading { font-size: clamp(1.5rem, 5vw, 2.25rem); } .pj-section { padding: 60px var(--padding-page); } .pj-content-row { grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; } .pj-content-row.align-right { direction: ltr; } .pj-text-block { margin-bottom: 48px; } .pj-text-block.align-right, .pj-text-block.align-left { margin-left: 0; margin-right: 0; } .pj-image-grid { grid-template-columns: 1fr; } } /* === PHOTO PROJECT PAGES (Gilets Jaunes style) === */ /* Hero - matches UX project structure */ .ph-hero { padding: 180px var(--padding-page) 60px; } .ph-title { font-size: clamp(4rem, 12vw, 10rem); font-weight: 900; line-height: 0.9; letter-spacing: -0.04em; text-transform: uppercase; margin-bottom: 40px; text-align: center; } .ph-meta { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; } .ph-meta-item { display: flex; flex-direction: column; } .ph-meta-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 4px; font-family: var(--font-mono); } .ph-meta-value { font-size: 1rem; font-weight: 600; } /* Full-width hero image */ .ph-hero-image { width: 100%; overflow: hidden; } .ph-hero-image img { width: 100%; display: block; } /* Multi-image hero (e.g. 3 covers side by side) */ .ph-hero-image--multi { display: flex; gap: 16px; padding: 0 var(--padding-page); box-sizing: border-box; } .ph-hero-image--multi img { flex: 1 1 0; min-width: 0; width: 33.333%; height: auto; object-fit: cover; display: block; } /* Context section - single column with label */ .ph-context { padding: 120px var(--padding-page); } .ph-context-inner { max-width: 800px; margin: 0 auto; } .ph-context-label { font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-gray-medium); margin-bottom: 32px; font-family: var(--font-mono); } .ph-context-text { font-size: 1rem; line-height: 1.85; color: var(--color-gray-dark); } .ph-context-text p { margin-bottom: 20px; } .ph-context-text p:last-child { margin-bottom: 0; } /* Artist info table (4-column layout) */ .ph-artist-table { padding: 0 var(--padding-page) 80px; } .ph-artist-table-inner { max-width: 1000px; margin: 0 auto; } .ph-artist-row { display: grid; grid-template-columns: 2fr 1fr 2fr 2fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--color-gray-light); font-size: 0.85rem; color: var(--color-gray-dark); } .ph-artist-row.ph-artist-header { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.75rem; color: var(--color-black); border-bottom: 2px solid var(--color-black); padding-bottom: 8px; } /* Gallery: sticky background + stacking scroll images */ .ph-gallery { position: relative; background: #000; } .ph-gallery-bg { position: sticky; top: 0; width: 100%; height: 100vh; z-index: 0; overflow: hidden; } .ph-gallery-bg video, .ph-gallery-bg .ph-gallery-bg-fallback { width: 100%; height: 100%; object-fit: cover; display: block; } .ph-gallery-bg video { position: absolute; inset: 0; } /* Hide fallback image when video has a source and is playing */ .ph-gallery-bg video[data-playing] + .ph-gallery-bg-fallback { display: none; } .ph-gallery-scroll { position: relative; z-index: 1; } .ph-gallery-item { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 80px; background: #000; } .ph-gallery-item img { max-width: 85%; max-height: 85vh; object-fit: contain; opacity: 0; transform: scale(0.96); transition: opacity 0.6s ease, transform 0.6s ease; } .ph-gallery-item.revealed img { opacity: 1; transform: scale(1); display: block; box-shadow: 0 20px 80px rgba(0, 0, 0, 0.6); } /* Side overview navigation bar */ .ph-gallery-nav { position: fixed; right: 24px; top: 50%; transform: translateY(-50%); z-index: 100; display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; } .ph-gallery-nav.visible { opacity: 1; pointer-events: auto; } .ph-nav-counter { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 8px; } .ph-nav-current { font-size: 0.875rem; font-weight: 700; color: var(--color-white); font-family: var(--font-mono); } .ph-nav-separator { font-size: 0.625rem; color: rgba(255, 255, 255, 0.4); } .ph-nav-total { font-size: 0.75rem; font-weight: 400; color: rgba(255, 255, 255, 0.5); font-family: var(--font-mono); } .ph-nav-track { display: flex; flex-direction: column; align-items: center; gap: 6px; } .ph-nav-dot { width: 3px; height: 16px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; cursor: pointer; transition: background 0.3s ease, height 0.3s ease; } .ph-nav-dot:hover { background: rgba(255, 255, 255, 0.5); } .ph-nav-dot.active { background: var(--color-white); height: 28px; } /* Responsive */ @media (max-width: 768px) { .ph-hero { padding-top: 120px; height: auto; min-height: 40vh; } .ph-title { font-size: clamp(2rem, 10vw, 4rem); margin-bottom: 24px; } .ph-meta { gap: 24px; flex-wrap: wrap; } .ph-context-inner { grid-template-columns: 1fr; gap: 32px; } .ph-gallery-item { padding: 20px; } .ph-gallery-item img { max-width: 95%; max-height: 80vh; } .ph-gallery-nav { right: 12px; } .ph-nav-dot { height: 10px; } .ph-nav-dot.active { height: 20px; } } /* === UTILITY CLASSES === */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* === ADDITIONAL RESPONSIVE === */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; } .about-image { min-height: 400px; } .cv-item { grid-template-columns: 1fr; gap: 8px; } .category-grid, .documentary-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .category-grid, .documentary-grid { grid-template-columns: 1fr; } .contact-socials { flex-direction: column; gap: 16px; } .contact-form-grid { grid-template-columns: 1fr; gap: 32px; } .category-banner.banner-short { width: 70%; } .category-banner.banner-mid { width: 85%; } .category-banner.banner-long { width: 100%; } .category-banner { padding-left: 24px; } /* Image track mobile */ .image-track-viewport::before { display: none; } .track-item { width: 60vmin; } .track-image-wrap { height: 75vmin; } .track-hint { bottom: 24px; } .track-categories { left: var(--padding-page); top: auto; bottom: 80px; transform: none; flex-direction: row; gap: 20px; } .track-counter { bottom: 24px; } /* Project detail mobile */ .project-hero { grid-template-columns: 1fr; } .project-hero-image { height: 50vh; } .project-hero-placeholder { min-height: 50vh; } .project-hero-image img { min-height: 50vh; } .project-hero-info { padding: 40px var(--padding-page); } .project-hero-title { margin-bottom: 40px; } .project-back { left: var(--padding-page); color: var(--color-white); } .project-counter { left: var(--padding-page); color: var(--color-white); } .project-gallery-images { padding: 0 var(--padding-page); padding-right: var(--padding-page); } .project-thumbnails { display: none; } .pj-back { left: var(--padding-page); } } /* === EXPERIENCE STICKY SCROLL SECTION (About page) === */ .exp-section { border-top: 1px solid var(--color-gray-light); /* min-height set by JS based on entry count */ position: relative; } .exp-inner { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; position: sticky; top: 0; } .exp-left { display: flex; align-items: flex-start; padding: 15vh var(--padding-page) 0; } .exp-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; } .exp-right { padding: 15vh 40px 15vh 20px; display: flex; flex-direction: column; justify-content: center; } /* Each entry: two-column row (logo+location | dates+role) */ .exp-entry { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--color-gray-light); opacity: 0; transition: opacity 0.7s ease; background: var(--color-white); } .exp-entry:first-child { opacity: 1; } .exp-entry.visible { opacity: 1; } /* Left column: logo + location */ .exp-entry-left { display: flex; flex-direction: column; gap: 4px; } .exp-entry-logo { height: 80px; display: flex; align-items: center; } .exp-logo-icon { height: 56px; width: auto; color: var(--color-black); } .exp-logo-img { height: 72px; width: auto; object-fit: contain; border-radius: 3px; } .exp-logo-glucoglyde { height: 25px; } .exp-logo-row { display: flex; align-items: center; gap: 28px; height: auto; } .exp-logo-row .exp-logo-img { height: 90px; border-radius: 0; mix-blend-mode: multiply; } /* Remove Andy Wolf logo border by cropping it */ .exp-logo-row .exp-logo-img[alt="Andy Wolf"] { object-fit: cover; object-position: center; clip-path: inset(4px); } .exp-logo-text { font-size: 1.1rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1; } .exp-entry-location { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-gray-medium); } /* Right column: dates + role */ .exp-entry-right-col { text-align: right; } .exp-entry-dates { font-size: clamp(1rem, 2vw, 1.3rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 2px; font-variant-numeric: tabular-nums; } .exp-entry-role { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gray-dark); display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; } /* Blinking green dot for current position */ .exp-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: expBlink 1.4s ease-in-out infinite; flex-shrink: 0; } @keyframes expBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } } /* Responsive */ @media (max-width: 1024px) { .exp-section { min-height: auto !important; } .exp-inner { grid-template-columns: 1fr; height: auto; position: relative; } .exp-left { height: auto; padding: 60px var(--padding-page) 0; } .exp-right { padding: 40px var(--padding-page) 80px; } .exp-entry { opacity: 1; } } @media (max-width: 768px) { .exp-title { font-size: clamp(2rem, 10vw, 3rem); } .exp-entry { padding: 24px 0; } .exp-entry-dates { font-size: clamp(1rem, 4vw, 1.25rem); } .exp-logo-img { height: 48px; } .exp-logo-row .exp-logo-img { height: 56px; } }