/* ─── Google Font: Josefin Sans (thin/light) ─── */ /* Loaded in via Google Fonts */ :root { --font: 'Josefin Sans', sans-serif; --transition: 1.4s; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--font); font-weight: 200; } /* ─── Background ─── */ .bg-wrapper { position: fixed; inset: 0; z-index: 0; } .bg-image { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── Slides ─── */ .slide { position: fixed; inset: 0; z-index: 2; opacity: 0; visibility: hidden; transition: opacity var(--transition) ease, visibility var(--transition); } .slide.active { opacity: 1; visibility: visible; } /* ─── Slide 1: Dark overlay ─── */ #slide1 .slide-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52); z-index: 1; } /* Slide 1 layout: text top-left, contact bottom-left */ .slide1-content { position: relative; z-index: 2; width: 100%; height: 100%; padding: 8vh 7vw; display: flex; flex-direction: column; justify-content: space-between; } .coming-soon { font-family: var(--font); font-weight: 100; font-size: clamp(2.4rem, 6vw, 5.5rem); letter-spacing: -4px; text-transform: lowercase; color: rgba(255, 255, 255, 0.92); line-height: 1; } .contact-block { display: flex; flex-direction: column; gap: 6px; } .contact-label { font-size: clamp(0.8rem, 1.5vw, 1.5rem); letter-spacing: 0.18em; text-transform: lowercase; color: rgba(255, 255, 255, 0.55); font-weight: 200; } .contact-email { font-size: clamp(0.75rem, 1.5vw, 1.25rem); color: rgba(255, 255, 255, 0.85); text-decoration: none; font-weight: 200; letter-spacing: 0.04em; transition: color 0.3s ease; } .contact-email:hover { color: #fff; } /* ─── Slide 2: No overlay, centered ─── */ #slide2 { /* no overlay — raw landscape */ } .slide2-content { position: relative; z-index: 2; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 18vh; text-align: center; } @media (max-width: 768px) { .slide2-content { padding-top: 14vh; } } @media (max-width: 480px) { .slide2-content { padding-top: 12vh; } } .studio-name { font-family: var(--font); font-weight: 400; font-size: clamp(3rem, 8vw, 5.5rem); letter-spacing: -4px; text-transform: lowercase; color: rgba(255, 255, 255, 0.93); line-height: 1; } .disciplines { margin-top: 0.8rem; font-size: clamp(1.25rem, 0.82vw, 0.75rem); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.78); font-weight: 200; } /* ─── Dot Navigation ─── */ .side-nav { position: fixed; right: 36px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 14px; } .dot { width: 5px; height: 5px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 50%; cursor: pointer; transition: background 0.4s ease, border-color 0.4s ease; } .dot.active { background: #fff; border-color: #fff; } /* ─── Animations ─── */ .reveal { opacity: 0; animation: fadeUp 1.5s ease 0.1s forwards; } .reveal-delay { opacity: 0; animation: fadeUp 1.5s ease 0.5s forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } /* ─── Responsive ─── */ @media (max-width: 768px) { .slide1-content { padding: 6vh 6vw; } .coming-soon { font-size: clamp(2rem, 9vw, 3rem); } .studio-name { font-size: clamp(1.6rem, 6vw, 3rem); letter-spacing: 0.06em; } .disciplines { font-size: clamp(0.45rem, 1.6vw, 0.65rem); letter-spacing: 0.14em; } .side-nav { right: 18px; } } @media (max-width: 480px) { .coming-soon { font-size: clamp(1.8rem, 11vw, 2.8rem); } .studio-name { font-size: clamp(1.4rem, 7.5vw, 2.4rem); letter-spacing: 0.05em; } .disciplines { font-size: clamp(0.4rem, 2vw, 0.6rem); letter-spacing: 0.1em; } }