/* ═══════════════════════════════════════════════════════════ SPORSHO - Transitions & Motion v1.0 Loaded last in so overrides page-level styles ═══════════════════════════════════════════════════════════ */ /* --─ EXTENDED FONT FACES --------------------------------─ */ @font-face { font-family:'Europa Grotesk SH Lig'; src:url('Fonts/EuropaGroteskSH-Lig.otf') format('opentype'); font-weight:normal; font-style:normal; } @font-face { font-family:'Europa Grotesk SH Ex'; src:url('Fonts/EuropaGroteskSH-Ex.otf') format('opentype'); font-weight:normal; font-style:normal; } @font-face { font-family:'Europa Grotesk SH LigEx'; src:url('Fonts/EuropaGroteskSH-LigEx.otf') format('opentype'); font-weight:normal; font-style:normal; } /* --─ NAV & FOOTER FONT ----------------------------------─ */ .nav-name, .nav-links a, .nav-email { font-family: 'Europa Grotesk SH LigEx', sans-serif !important; } .hero-footer span, .hero-footer a, footer, footer span, footer a { font-family: 'Europa Grotesk SH LigEx', sans-serif !important; } /* --─ PAGE CURTAIN --------------------------------------─ */ #page-curtain { position : fixed; inset : 0; z-index : 99998; background : #0A0A0A; transform : translateY(0); /* starts covering */ will-change : transform; pointer-events : none; } /* --─ TEXT REVEAL MASK ----------------------------------─ */ /* Add data-reveal="" to a heading to get the line reveal */ [data-reveal] { overflow : hidden; display : block; } .t-inner { display : block; will-change : transform; } /* --─ SCROLL REVEAL --------------------------------------─ */ .sr { opacity : 0; transform : translateY(60px); transition: opacity 1.5s cubic-bezier(.16,1,.3,1), transform 1.5s cubic-bezier(.16,1,.3,1); } .sr.sr-d1 { transition-delay: .18s; } .sr.sr-d2 { transition-delay: .36s; } .sr.sr-d3 { transition-delay: .54s; } .sr.sr-d4 { transition-delay: .72s; } .sr.visible { opacity : 1; transform : translateY(0); } /* --─ PREMIUM PAGE ENTER ---------------------------------- */ /* Override per-page fadeUp - deeper travel, slower, cubic ease */ @keyframes fadeUp { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } } /* --─ NAV HOVER TEXT SLIDE ------------------------------─ */ .nh-wrap { position : relative; display : inline-flex; overflow : hidden; line-height : 1.3; vertical-align : middle; } .nh-a, .nh-b { display : block; transition : transform .8s cubic-bezier(.16,1,.3,1); } .nh-b { position : absolute; inset : 0; color : #FF4040; transform : translateY(110%); } .nav-links a:hover .nh-a, .nav-name:hover .nh-a { transform : translateY(-110%); } .nav-links a:hover .nh-b, .nav-name:hover .nh-b { transform : translateY(0); } /* Prevent parent color transition from overriding nh-b */ .nav-links a:hover { color: var(--off-white, #FFFBFC) !important; } .nav-name:hover { color: var(--off-white, #FFFBFC) !important; } /* --─ PROJECT CARD HOVER LIFT ----------------------------─ */ .project-item { transition : transform .8s cubic-bezier(.16,1,.3,1), box-shadow .8s cubic-bezier(.16,1,.3,1) !important; } .project-item:hover { transform : translateY(-6px); box-shadow : 0 28px 56px rgba(0,0,0,.4); z-index : 2; } /* --─ TICKER CARD HOVER LIFT ------------------------------ */ .ticker-card { transition : transform .65s cubic-bezier(.16,1,.3,1), border-color .4s !important; } .ticker-card:hover { transform : translateY(-5px); } /* --─ PROJ-NEXT HOVER ------------------------------------─ */ .proj-next-name { position : relative; display : inline-block; } .proj-next-name::after { content : ''; position : absolute; bottom : -4px; left : 0; width : 100%; height : 1px; background : currentColor; transform : scaleX(0); transform-origin : left; transition : transform .7s cubic-bezier(.16,1,.3,1); } .proj-next-name:hover::after { transform : scaleX(1); } /* --─ CURSOR SIZE ----------------------------------------─ */ .cursor { width: 56px !important; height: 56px !important; } .cursor-ring { width: 76px !important; height: 76px !important; } /* --─ CURSOR RING (magnetic transform transition) --------─ */ .cursor-ring { transition : width .5s cubic-bezier(.16,1,.3,1), height .5s cubic-bezier(.16,1,.3,1), border-color .4s, transform .25s ease !important; } /* --─ GLOBAL ANIMATION PACING ---------------------------- */ /* Slow all per-page CSS keyframe animations ~25-30% for a cinematic feel. Targets the common shorthand elements; transitions.css loads last so animation-duration !important beats any page-level animation: shorthand. */ nav, footer, .page-header, .filters, .hero-eyebrow, .hero-cta, .hero-stats, .contact-label, .form-row, .form-group, .contact-info, .proj-hero-label, .proj-hero-meta { animation-duration : 1.55s !important; } .hero-heading, .hero-sub, .projects-grid, .intro-left, .intro-right, .proj-hero, .proj-intro, .proj-brief, .proj-gallery-grid, .proj-approach, .proj-next { animation-duration : 1.85s !important; } /* --─ LENIS COMPAT ---------------------------------------- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* --─ MOBILE NAV ------------------------------------------─ */ .nav-toggle { display : none; flex-direction : column; align-items : flex-end; gap : 6px; background : none; border : none; cursor : pointer; padding : 6px 0 6px 20px; flex-shrink : 0; } .nav-toggle span { display : block; height : 1px; background : #FFFBFC; transition : width .5s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1), opacity .35s; } .nav-toggle span:nth-child(1) { width: 22px; } .nav-toggle span:nth-child(2) { width: 14px; } .nav-toggle.open span:nth-child(1) { width: 20px; transform: translateY(3.5px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { width: 20px; transform: translateY(-3.5px) rotate(-45deg); } .nav-mobile { position : fixed; inset : 0; background : #0A0A0A; z-index : 9989; display : flex; flex-direction : column; justify-content: flex-end; padding : 0 32px 72px; opacity : 0; pointer-events : none; overflow : hidden; transition : opacity .6s cubic-bezier(.16,1,.3,1); } .nav-mobile::before { content : ''; position : absolute; inset : 0; background-image : url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); background-size : 256px; pointer-events : none; opacity : .45; } .nav-mobile.open { opacity: 1; pointer-events: all; } .nav-mobile-links { display: flex; flex-direction: column; margin-bottom: 28px; } .nav-mobile-links a { font-family : 'Europa Grotesk SH LigEx', sans-serif; font-weight : 300; font-size : clamp(44px, 12vw, 68px); color : #FFFBFC; text-decoration : none; letter-spacing : -.01em; line-height : 1.1; display : block; padding : 10px 0; border-bottom : 1px solid rgba(255,255,255,.08); opacity : 0; transform : translateY(28px); transition : color .3s, opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .nav-mobile-links a:first-child { border-top: 1px solid rgba(255,255,255,.08); } .nav-mobile.open .nav-mobile-links a { opacity: 1; transform: translateY(0); } .nav-mobile.open .nav-mobile-links a:nth-child(1) { transition-delay: .07s; } .nav-mobile.open .nav-mobile-links a:nth-child(2) { transition-delay: .13s; } .nav-mobile.open .nav-mobile-links a:nth-child(3) { transition-delay: .19s; } .nav-mobile-links a:hover { color: #FF4040; } .nav-mobile-bottom { display : flex; gap : 24px; padding-top: 20px; opacity : 0; transform : translateY(10px); transition : opacity .65s cubic-bezier(.16,1,.3,1) .28s, transform .65s cubic-bezier(.16,1,.3,1) .28s; } .nav-mobile.open .nav-mobile-bottom { opacity: 1; transform: translateY(0); } .nav-mobile-bottom a { font-size : 10px; letter-spacing : .16em; text-transform : uppercase; color : rgba(255,251,252,.3); text-decoration: none; transition : color .3s; } .nav-mobile-bottom a:hover { color: #FF4040; } /* --─ MOBILE GLOBAL OVERRIDES ------------------------------ */ @media (max-width: 768px) { nav { position : fixed !important; top: 0; left: 0; right: 0; background : rgba(10,10,10,.92) !important; backdrop-filter : blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; z-index : 99990 !important; padding : 22px 24px !important; } .nav-toggle { display: flex; } .nav-links { display: none !important; } .nav-email { display: none !important; } .cursor, .cursor-ring { display: none !important; } /* -- hero stats line -- */ .hero-location { letter-spacing: .06em; } /* -- about page intro heading -- */ .intro-heading { font-size: clamp(32px, 9vw, 48px) !important; } .word-storyteller { white-space: normal !important; } .intro-left, .intro-right { min-width: 0; } .intro-right { max-width: 100% !important; } /* -- work page heading -- */ .page-title { font-size: clamp(44px, 11vw, 80px) !important; } /* -- work page project grid ------------------------------─ */ /* JS sets grid-column/row as inline styles; !important beats them */ .projects-grid { grid-template-columns : 1fr !important; gap : 2px !important; } .project-item { grid-column : 1 / -1 !important; grid-row : span 1 !important; } .project-inner, .project-item:nth-child(1) .project-inner, .project-item:nth-child(7) .project-inner { min-height : 280px !important; } /* -- work page filter bar -- */ .filters { gap : 14px !important; overflow-x : auto; flex-wrap : nowrap !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filter-btn { white-space: nowrap; flex-shrink: 0; } } @media (max-width: 420px) { .hero-location { font-size: 10px; letter-spacing: .04em; } }