diff --git a/css/style.css b/css/style.css index 410ca3a..4cb5fa6 100644 --- a/css/style.css +++ b/css/style.css @@ -49,6 +49,14 @@ html.lenis { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } +/* Hero entrance elements — hidden before preloader reveals them */ +.hero-title, +.hero-subtitle { + opacity: 0; + transform: translateY(60px); + will-change: transform, opacity; +} + /* Gallery Scroll */ .gallery-wrapper::-webkit-scrollbar { display: none; @@ -57,3 +65,100 @@ html.lenis { -ms-overflow-style: none; scrollbar-width: none; } + +/* ═══════════════════════════ + GRAIN / FILM OVERLAY +═══════════════════════════ */ +.grain-overlay { + position: fixed; + inset: 0; + z-index: 500; + pointer-events: none; + opacity: 0.045; + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); + background-repeat: repeat; + background-size: 180px 180px; +} + +/* ═══════════════════════════ + SCROLL PROGRESS BAR +═══════════════════════════ */ +#progress-bar { + position: fixed; + top: 0; + left: 0; + height: 2px; + width: 0%; + background: linear-gradient(90deg, #3b82f6, #93c5fd); + z-index: 600; + pointer-events: none; + transition: width 0.05s linear; +} + +/* ═══════════════════════════ + ACTIVE NAV LINK +═══════════════════════════ */ +.nav-link { + position: relative; + color: rgba(156, 163, 175, 1); + transition: color 0.3s ease; +} +.nav-link::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 0; + height: 1px; + background-color: #ffffff; + transition: width 0.4s cubic-bezier(0.76, 0, 0.24, 1); +} +.nav-link.active { + color: #ffffff; +} +.nav-link.active::after { + width: 100%; +} + +/* ═══════════════════════════ + MOBILE HAMBURGER & OVERLAY +═══════════════════════════ */ +#mobile-overlay.open { + transform: translateX(0); +} + +#hamburger.open .ham-line:first-child { + transform: translateY(4px) rotate(45deg); + width: 24px; +} +#hamburger.open .ham-line:last-child { + transform: translateY(-4px) rotate(-45deg); + width: 24px; +} + +/* Staggered mobile link entrance */ +#mobile-overlay .mobile-nav-link { + transform: translateX(-20px); + opacity: 0; + transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.6s ease; +} +#mobile-overlay.open .mobile-nav-link { transform: translateX(0); opacity: 1; } +#mobile-overlay.open .mobile-nav-link:nth-child(1) { transition-delay: 0.15s; } +#mobile-overlay.open .mobile-nav-link:nth-child(2) { transition-delay: 0.20s; } +#mobile-overlay.open .mobile-nav-link:nth-child(3) { transition-delay: 0.25s; } +#mobile-overlay.open .mobile-nav-link:nth-child(4) { transition-delay: 0.30s; } +#mobile-overlay.open .mobile-nav-link:nth-child(5) { transition-delay: 0.35s; } + +/* ═══════════════════════════ + EDITORIAL SECTION NUMBERS +═══════════════════════════ */ +.section-num { + font-size: 0.68rem; + letter-spacing: 0.3em; + color: #3b82f6; + text-transform: uppercase; + display: block; + margin-bottom: 1.25rem; + font-family: 'Inter', sans-serif; + font-weight: 500; +} diff --git a/index.html b/index.html index c1d2220..ded8690 100644 --- a/index.html +++ b/index.html @@ -30,9 +30,16 @@ } + + + + + + +
@@ -45,31 +52,64 @@ -