210 lines
12 KiB
HTML
210 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="scroll-smooth">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>EIDOS | Architectural Studio</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--accent: #8B4513;
|
|
--bg: #F9F9F9;
|
|
--text: #1A1A1A;
|
|
}
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
}
|
|
h1, h2, h3, .serif {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
|
|
}
|
|
.reveal.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.project-card:hover .project-overlay {
|
|
opacity: 1;
|
|
}
|
|
.nav-blur {
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
background-color: rgba(249, 249, 249, 0.8);
|
|
}
|
|
.line-separator {
|
|
height: 1px;
|
|
background-color: rgba(0,0,0,0.1);
|
|
width: 100%;
|
|
}
|
|
.custom-cursor {
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 1px solid var(--text);
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
transition: transform 0.1s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased">
|
|
<div class="custom-cursor hidden md:block"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed top-0 w-full z-50 border-b border-transparent nav-blur transition-all duration-300" id="mainNav">
|
|
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
|
|
<a href="#" class="text-2xl font-bold tracking-tighter">EIDOS</a>
|
|
<div class="hidden md:flex space-x-10 text-xs uppercase tracking-widest font-medium">
|
|
<a href="#work" class="hover:text-orange-800 transition-colors">Work</a>
|
|
<a href="#studio" class="hover:text-orange-800 transition-colors">Studio</a>
|
|
<a href="#journal" class="hover:text-orange-800 transition-colors">Journal</a>
|
|
<a href="#contact" class="hover:text-orange-800 transition-colors">Contact</a>
|
|
</div>
|
|
<button class="md:hidden">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative h-screen w-full flex items-center justify-center overflow-hidden bg-white">
|
|
<div class="absolute inset-0 z-0">
|
|
<img src="https://images.pexels.com/photos/6614747/pexels-photo-6614747.jpeg?auto=compress&cs=tinysrgb&fit=crop&h=627&w=1200" alt="High-angle view of a desk with blueprints, sketches, and architectural tools." class="w-full h-full object-cover grayscale-[30%] opacity-90">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/40"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 text-center px-6 max-w-5xl">
|
|
<h1 class="text-6xl md:text-9xl font-bold mb-6 leading-tight tracking-tighter">Sculpting the Void.</h1>
|
|
<p class="text-lg md:text-xl max-w-2xl mx-auto mb-10 font-light tracking-wide">
|
|
A practice dedicated to the intersection of raw materiality, human movement, and the quietude of structural honesty.
|
|
</p>
|
|
<div class="flex justify-center">
|
|
<a href="#work" class="border border-black px-10 py-4 text-xs uppercase tracking-widest hover:bg-black hover:text-white transition-all duration-300">Explore Projects</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10">
|
|
<p class="text-[10px] uppercase tracking-widest text-gray-600">
|
|
Photo by <a href="https://www.pexels.com/photo/printed-designs-and-drawings-over-the-work-table-6614747/" class="underline decoration-dotted">Tima Miroshnichenko</a> on Pexels
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Philosophy / Intro -->
|
|
<section id="studio" class="py-32 px-6 bg-white">
|
|
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-20 items-center">
|
|
<div class="reveal">
|
|
<h2 class="text-4xl md:text-6xl mb-8">The Architecture of Silence.</h2>
|
|
<div class="line-separator mb-8"></div>
|
|
<p class="text-gray-600 leading-relaxed mb-6">
|
|
At Eidos, we believe that a building's primary function is to provide a vessel for experience. We don't just build structures; we curate the way light interacts with stone, the way air flows through corridors, and the way inhabitants perceive their own movement.
|
|
</p>
|
|
<p class="text-gray-600 leading-relaxed">
|
|
Our approach is rooted in "Quiet Brutalism"—the celebration of honest materials: exposed concrete, charred wood, and locally sourced limestone. We strip away the superfluous to reveal the essential.
|
|
</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 reveal">
|
|
<div class="aspect-square bg-gray-100 flex items-center justify-center p-8 text-center border border-gray-200">
|
|
<p class="text-xs uppercase tracking-widest">Materiality over<br>Ornament</p>
|
|
</div>
|
|
<div class="aspect-square bg-gray-200 mt-12 flex items-center justify-center p-8 text-center border border-gray-200">
|
|
<p class="text-xs uppercase tracking-widest">Spatial Flow<br>Dynamics</p>
|
|
</div>
|
|
<div class="aspect-square bg-gray-100 flex items-center justify-center p-8 text-center border border-gray-200">
|
|
<p class="text-xs uppercase tracking-widest">Sustainable<br>Integrity</p>
|
|
</div>
|
|
<div class="aspect-square bg-gray-200 mt-12 flex items-center justify-center p-8 text-center border border-gray-200">
|
|
<p class="text-xs uppercase tracking-widest">Contextual<br>Awareness</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Selected Works -->
|
|
<section id="work" class="py-32 bg-[#F2F2F2] px-6">
|
|
<div class="max-w-7xl mx-auto">
|
|
<div class="flex flex-col md:flex-row justify-between items-end mb-20 reveal">
|
|
<div>
|
|
<span class="text-xs uppercase tracking-[0.3em] text-gray-400">Selected Works</span>
|
|
<h2 class="text-5xl md:text-7xl mt-2">Portfolio.</h2>
|
|
</div>
|
|
<p class="max-w-xs text-sm text-gray-500 mt-4 md:mt-0">
|
|
A collection of projects that define our commitment to spatial innovation.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-16">
|
|
<!-- Project 1 -->
|
|
<div class="project-card group reveal">
|
|
<div class="relative aspect-[4/5] bg-gray-300 overflow-hidden mb-6">
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
|
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
|
<h3 class="text-3xl mb-4">The Obsidian Pavilion</h3>
|
|
<p class="text-sm tracking-widest">Residential / Norway</p>
|
|
</div>
|
|
<div class="w-full h-full bg-gray-400 flex items-center justify-center text-gray-600 italic">Image Placeholder</div>
|
|
</div>
|
|
<h3 class="text-2xl">The Obsidian Pavilion</h3>
|
|
<p class="text-sm text-gray-500">Norway, 2023</p>
|
|
</div>
|
|
|
|
<!-- Project 2 -->
|
|
<div class="project-card group reveal">
|
|
<div class="relative aspect-[4/5] bg-gray-400 overflow-hidden mb-6">
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
|
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
|
<h3 class="text-3xl mb-4">Looming Glass Library</h3>
|
|
<p class="text-sm tracking-widest">Berlin, 2022</p>
|
|
</div>
|
|
<div class="w-full h-full bg-gray-500 flex items-center justify-center text-gray-400 italic">Image Placeholder</div>
|
|
</div>
|
|
<h3 class="text-2xl">Looming Glass Library</h3>
|
|
<p class="text-sm text-gray-500">Germany, 2022</p>
|
|
</div>
|
|
|
|
<!-- Project 3 -->
|
|
<div class="project-card group reveal">
|
|
<div class="relative aspect-[4/5] bg-gray-300 overflow-hidden mb-6">
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
|
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
|
<h3 class="text-3xl mb-4">Silt Residence</h3>
|
|
<p class="text-sm tracking-widest">Kyoto, 2021</p>
|
|
</div>
|
|
<div class="w-full h-full bg-gray-400 flex items-center justify-center text-gray-600 italic">Image Placeholder</div>
|
|
</div>
|
|
<h3 class="text-2xl">Silt Residence</h3>
|
|
<p class="text-sm text-gray-500">Japan, 2021</p>
|
|
</div>
|
|
|
|
<!-- Project 4 -->
|
|
<div class="project-card group reveal">
|
|
<div class="relative aspect-[4/5] bg-gray-500 overflow-hidden mb-6">
|
|
<div class="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-500 z-10"></div>
|
|
<div class="project-overlay absolute inset-0 opacity-0 flex flex-col justify-center items-center text-white transition-opacity duration-500 z-20">
|
|
<h3 class="text-3xl mb-4">Monolith Gallery</h3>
|
|
<p class="text-sm tracking-widest">Paris, 2024</p>
|
|
</div>
|
|
<div class="w-full h-full bg-gray-600 flex items-center justify-center text-gray-400 italic">Image Placeholder</div>
|
|
</div>
|
|
<h3 class="text-2xl">Monolith Gallery</h3>
|
|
<p class="text-sm text-gray-500">France, 2024</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Process Section -->
|
|
<section class="py-32 bg-white px-6">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h2<div style="position:fixed;right:12px;bottom:12px;z-index:2147483647;background:rgba(17,24,39,.92);color:#fff;padding:8px 10px;border-radius:10px;font:12px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;box-shadow:0 8px 20px rgba(0,0,0,.28)">Generated in 64.07s</div> |