<!DOCTYPE html>
<html lang="en">
<head>
<style>
@font-face {
font-family: 'InterCustomThin';
src: url('sonapse_assets/Inter_18pt-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sonapse</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: white;
overflow-y: scroll;
}
header {
display: flex;
align-items: center;
padding: 10px;
gap: 10px;
background: white;
position: sticky;
top: 0;
z-index: 10;
}
header a {
background: #eee;
text-decoration: none;
color: black;
padding: 10px 20px;
font-size: 18px;
border-radius: 10px;
transition: background 0.3s;
font-family: sans-serif;
}
header a:hover {
background: #ddd;
}
.main-logo {
font-size: 150px;
font-weight: 100;
font-family: 'InterCustomThin', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 150px;
letter-spacing: -10px;
text-align: center;
}
.main-logo span {
font-size: inherit;
color: black;
}
.section-title {
font-size: 75px;
font-weight: 100;
font-family: 'Inter', sans-serif;
display: flex;
justify-content: flex-start;
align-items: center;
letter-spacing: 0px;
width: 100%;
max-width: 1152px;
padding-left: 40px;
margin-bottom: 20px;
}
.section-title span {
font-size: inherit;
color: black;
}
section {
padding: 60px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.video-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
width: 100%;
max-width: 1152px;
padding-left: 20px;
padding-right: 20px;
box-sizing: border-box;
}
.video-box {
position: relative;
width: 100%;
padding-top: 152.78%;
background: #ddd;
border-radius: 20px;
overflow: hidden;
}
.video-box video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
@media (max-width: 768px) {
.main-logo {
font-size: 72px;
height: auto;
padding: 40px 10px 20px 10px;
letter-spacing: -4px;
text-align: center;
}
.section-title {
font-size: 36px;
justify-content: center;
padding-left: 0;
padding: 0 10px;
text-align: center;
margin-bottom: 20px; /* Match "Work" section */
}
header {
flex-direction: row;
justify-content: center;
flex-wrap: nowrap;
padding: 10px;
gap: 10px;
}
header a {
font-size: 16px;
padding: 8px 12px;
white-space: nowrap;
}
.video-grid {
grid-template-columns: 1fr;
gap: 15px;
padding-left: 10px;
padding-right: 10px;
}
#process {
display: none !important; /* Hides Process section on mobile */
}
#inquire-form {
padding: 0 10px;
}
#inquire-form input[type="email"],
#inquire-form textarea,
#inquire-form input[type="file"],
#inquire-form button {
font-size: 14px;
padding: 10px;
}
}
</style>
<script>
window.addEventListener('load', function () {
const videos = document.querySelectorAll('video');
videos.forEach(video => {
video.muted = true; // required by Safari
video.autoplay = true;
video.playsInline = true;
video.setAttribute('muted', ''); // reinforce in HTML
video.setAttribute('playsinline', ''); // for iOS
video.play().catch(err => {
console.warn('Autoplay failed:', video.src, err);
});
});
});
</script>
</head>
<body>
<header>
<a href="#work">Work</a>
<a href="#process">Process</a>
<a href="#inquire">Inquire</a>
</header>
<div class="main-logo">
<span>Sonapse</span>
</div>
<section id="work">
<div class="section-title"><span>Work</span></div>
<div class="video-grid">
<div class="video-box">
<video src="sonapse_assets/balenciaga.mp4" autoplay muted playsinline loop preload="auto"></video>
</div>
<div class="video-box">
<video src="sonapse_assets/device.mp4" autoplay muted playsinline loop preload="auto"></video>
</div>
<div class="video-box">
<video src="sonapse_assets/purse.mp4" autoplay muted playsinline loop preload="auto"></video>
</div>
<div class="video-box">
<video src="sonapse_assets/snow.mp4" autoplay muted playsinline loop preload="auto"></video>
</div>
<div class="video-box">
<video src="sonapse_assets/desert.mp4" autoplay muted playsinline loop preload="auto"></video>
</div>
<div class="video-box">
<video src="sonapse_assets/rain.mp4" autoplay muted playsinline loop preload="auto"></video>
</div>
</div>
</section>
<section id="process" style="margin-top: 30px;">
<div class="section-title"><span>Process</span></div>
<div class="video-grid">
<div class="video-box" style="padding-top: 49%;">
<video src="sonapse_assets/process.mov" autoplay muted loop playsinline preload="auto"></video>
</div>
</div>
</section>
<section id="inquire" style="margin-top: 30px;">
<div class="section-title"><span>Inquire</span></div>
<form id="inquire-form" style="width: 100%; max-width: 1152px; padding: 0 20px; display: flex; flex-direction: column; gap: 20px;">
<input type="email" name="email" placeholder="Your email" required style="padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px;">
<textarea name="context" placeholder="Context" rows="5" required style="padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px;"></textarea>
<input type="file" name="images" accept="image/*" multiple style="padding: 10px; font-size: 16px; border-radius: 8px;">
<button type="submit" style="padding: 12px 20px; background-color: black; color: white; font-size: 16px; border: none; border-radius: 8px; cursor: pointer;">Submit</button>
</form>
<script>
document.getElementById('inquire-form').addEventListener('submit', async function(e) {
e.preventDefault();
alert('Form submission requires a backend server to handle emailing.');
// In production, you would use a server or service like EmailJS, Formspree, or custom Node.js/PHP/etc.
// to send form data including the file to neuronprolapse@gmail.com
});
</script>
</section>
</body>
</html>