File: /home/internet/public_html/haaus.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haaus — Smart Living. Simplified.</title>
<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=Space+Grotesk:wght@400;500;700&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root{
--blue-deep: #0E2A4A;
--blue-panel: #123455;
--blue-line: #1B4670;
--cyan-ink: #8FD8FF;
--paper: #F4F2EA;
--amber: #D9A24B;
--ink: #061320;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
background: var(--blue-deep);
color: var(--paper);
font-family: 'IBM Plex Sans', sans-serif;
min-height: 100vh;
overflow-x: hidden;
position: relative;
}
/* ---------- Blueprint grid backdrop ---------- */
.grid-bg{
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(0deg, rgba(143,216,255,0.07) 0 1px, transparent 1px 40px),
repeating-linear-gradient(90deg, rgba(143,216,255,0.07) 0 1px, transparent 1px 40px),
repeating-linear-gradient(0deg, rgba(143,216,255,0.14) 0 1.5px, transparent 1.5px 200px),
repeating-linear-gradient(90deg, rgba(143,216,255,0.14) 0 1.5px, transparent 1.5px 200px);
animation: drift 90s linear infinite;
}
@keyframes drift{
from{ background-position: 0 0, 0 0, 0 0, 0 0; }
to{ background-position: -200px 0, 0 -200px, -200px 0, 0 -200px; }
}
.mono{
font-family: 'IBM Plex Mono', monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* ---------- Sheet header ---------- */
.sheet-header{
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
padding: 22px clamp(20px, 5vw, 56px);
border-bottom: 1px solid rgba(143,216,255,0.22);
font-size: 11px;
color: rgba(244,242,234,0.55);
}
.sheet-header span{ display:block; }
.sheet-header .right{ text-align: right; }
/* ---------- Main layout ---------- */
main{
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(40px, 8vh, 80px) clamp(20px, 6vw, 56px) 0;
text-align: center;
}
.eyebrow{
font-size: 11px;
color: var(--cyan-ink);
margin-bottom: 22px;
opacity: 0.85;
}
.eyebrow::before{ content: "— "; }
.eyebrow::after{ content: " —"; }
h1.wordmark{
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
font-size: clamp(64px, 13vw, 148px);
line-height: 0.92;
margin: 0;
letter-spacing: -0.01em;
}
.tagline{
font-family: 'Space Grotesk', sans-serif;
font-weight: 500;
font-size: clamp(18px, 2.6vw, 26px);
color: var(--cyan-ink);
margin: 18px 0 14px;
letter-spacing: 0.01em;
}
.blurb{
max-width: 480px;
font-size: 15.5px;
line-height: 1.6;
color: rgba(244,242,234,0.78);
margin: 0 auto;
}
/* ---------- Drawing stage ---------- */
.stage{
position: relative;
width: min(880px, 92vw);
margin: clamp(28px, 5vw, 56px) auto 0;
}
.stage svg{ width: 100%; height: auto; display: block; }
.draw-path{
fill: none;
stroke: var(--cyan-ink);
stroke-width: 2.4;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke-dashoffset 1.6s cubic-bezier(.25,.8,.3,1);
}
.draw-fill{
transition: opacity 1s ease 1.2s;
opacity: 0;
}
.ready .draw-fill{ opacity: 1; }
.annot-text{
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
letter-spacing: 0.1em;
fill: var(--paper);
opacity: 0;
transition: opacity 0.8s ease 1.7s;
}
.ready .annot-text{ opacity: 0.85; }
.node-dot{
fill: var(--amber);
opacity: 0;
transition: opacity 0.6s ease 1.5s;
}
.ready .node-dot{ opacity: 1; }
/* ---------- Stamp ---------- */
.stamp{
position: absolute;
right: clamp(4%, 6vw, 8%);
bottom: -6px;
width: 132px;
height: 132px;
border: 2px dashed var(--amber);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-10deg) scale(0.85);
opacity: 0;
transition: opacity 0.7s ease 2s, transform 0.7s ease 2s;
color: var(--amber);
text-align: center;
}
.ready .stamp{ opacity: 1; transform: rotate(-10deg) scale(1); }
.stamp p{
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
line-height: 1.5;
margin: 0;
}
/* ---------- Title block / footer ---------- */
.titleblock{
position: relative;
z-index: 2;
margin-top: clamp(60px, 10vh, 110px);
border-top: 1px solid rgba(143,216,255,0.22);
background: var(--blue-panel);
}
.titleblock-inner{
display: flex;
flex-wrap: wrap;
}
.tb-field{
flex: 1 1 200px;
padding: 20px clamp(20px, 5vw, 56px);
border-right: 1px solid rgba(143,216,255,0.18);
}
.tb-field:last-child{ border-right: none; }
.tb-label{
font-size: 10.5px;
color: rgba(143,216,255,0.7);
margin-bottom: 6px;
display: block;
}
.tb-value{
font-family: 'IBM Plex Mono', monospace;
font-size: 14px;
color: var(--paper);
}
.tb-value a{
color: var(--amber);
text-decoration: none;
border-bottom: 1px solid rgba(217,162,75,0.5);
transition: border-color 0.2s ease, color 0.2s ease;
}
.tb-value a:hover{ border-color: var(--amber); color: #f0c27d; }
.tb-value a:focus-visible{
outline: 2px solid var(--cyan-ink);
outline-offset: 3px;
}
@media (max-width: 640px){
.titleblock-inner{ flex-direction: column; }
.tb-field{ border-right: none; border-bottom: 1px solid rgba(143,216,255,0.18); }
.tb-field:last-child{ border-bottom: none; }
.stamp{ width: 104px; height: 104px; right: 14px; bottom: 8px; }
.stamp p{ font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce){
.grid-bg{ animation: none; }
.draw-path, .draw-fill, .annot-text, .node-dot, .stamp{ transition: none !important; }
}
</style>
</head>
<body>
<div class="grid-bg" aria-hidden="true"></div>
<header class="sheet-header">
<span class="mono">Haaus — Residential Systems</span>
<span class="mono right">Status — Draft / Rev A</span>
</header>
<main>
<p class="eyebrow mono">Coming soon</p>
<h1 class="wordmark">Haaus</h1>
<p class="tagline">Smart Living. Simplified.</p>
<p class="blurb">We're creating intelligent solutions for tomorrow's homes.</p>
<div class="stage" id="stage">
<svg viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Line drawing of a house elevation with annotated smart-home features">
<!-- ground -->
<line x1="60" y1="480" x2="740" y2="480" class="draw-path" id="p-ground"/>
<!-- roof -->
<polyline points="200,260 360,140 520,260" class="draw-path" id="p-roof"/>
<!-- walls -->
<rect x="220" y="260" width="300" height="220" class="draw-path" id="p-walls"/>
<!-- chimney -->
<polyline points="438,200 438,168 462,168 462,210" class="draw-path" id="p-chimney"/>
<!-- door -->
<rect x="330" y="380" width="60" height="100" class="draw-path" id="p-door"/>
<!-- windows -->
<rect x="250" y="300" width="50" height="50" class="draw-path" id="p-win1"/>
<line x1="275" y1="300" x2="275" y2="350" class="draw-path" id="p-win1b"/>
<line x1="250" y1="325" x2="300" y2="325" class="draw-path" id="p-win1c"/>
<rect x="420" y="300" width="50" height="50" class="draw-path" id="p-win2"/>
<line x1="445" y1="300" x2="445" y2="350" class="draw-path" id="p-win2b"/>
<line x1="420" y1="325" x2="470" y2="325" class="draw-path" id="p-win2c"/>
<!-- signal arcs above roof apex -->
<path d="M 332,118 A 40,40 0 0 1 388,118" class="draw-path" id="p-arc1"/>
<path d="M 318,100 A 58,58 0 0 1 402,100" class="draw-path" id="p-arc2"/>
<!-- dimension line -->
<g class="draw-fill">
<line x1="60" y1="520" x2="740" y2="520" stroke="var(--cyan-ink)" stroke-width="1" opacity="0.5"/>
<line x1="60" y1="512" x2="60" y2="528" stroke="var(--cyan-ink)" stroke-width="1" opacity="0.5"/>
<line x1="740" y1="512" x2="740" y2="528" stroke="var(--cyan-ink)" stroke-width="1" opacity="0.5"/>
<rect x="360" y="508" width="58" height="20" fill="var(--blue-deep)"/>
<text x="389" y="523" text-anchor="middle" class="annot-text" style="opacity:0.6">11.4 M</text>
</g>
<!-- annotation: sense -->
<g class="draw-fill">
<circle cx="250" cy="325" r="4" class="node-dot"/>
<line x1="246" y1="325" x2="120" y2="325" stroke="var(--amber)" stroke-width="1" opacity="0.55"/>
<text x="118" y="321" text-anchor="end" class="annot-text">sense</text>
</g>
<!-- annotation: adapt -->
<g class="draw-fill">
<circle cx="360" cy="378" r="4" class="node-dot"/>
<line x1="364" y1="382" x2="600" y2="430" stroke="var(--amber)" stroke-width="1" opacity="0.55"/>
<text x="608" y="434" text-anchor="start" class="annot-text">adapt</text>
</g>
<!-- annotation: connect -->
<g class="draw-fill">
<circle cx="360" cy="100" r="4" class="node-dot"/>
<line x1="364" y1="96" x2="600" y2="70" stroke="var(--amber)" stroke-width="1" opacity="0.55"/>
<text x="608" y="74" text-anchor="start" class="annot-text">connect</text>
</g>
</svg>
<div class="stamp">
<p>Launching<br>soon</p>
</div>
</div>
</main>
<div class="titleblock">
<div class="titleblock-inner">
<div class="tb-field">
<span class="tb-label mono">Project</span>
<span class="tb-value">Haaus</span>
</div>
<div class="tb-field">
<span class="tb-label mono">Type</span>
<span class="tb-value">Smart Residential</span>
</div>
<div class="tb-field">
<span class="tb-label mono">Scale</span>
<span class="tb-value">1 : 50</span>
</div>
<div class="tb-field">
<span class="tb-label mono">Contact</span>
<span class="tb-value"><a href="mailto:hello@haaus.com">hello@haaus.com</a></span>
</div>
</div>
</div>
<script>
(function(){
var stage = document.getElementById('stage');
var paths = stage.querySelectorAll('.draw-path');
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if(reduce){
stage.classList.add('ready');
return;
}
paths.forEach(function(p, i){
var len = p.getTotalLength();
p.style.strokeDasharray = len;
p.style.strokeDashoffset = len;
// stagger the draw order slightly
setTimeout(function(){
p.style.strokeDashoffset = 0;
}, 60 * i + 40);
});
setTimeout(function(){
stage.classList.add('ready');
}, 80);
})();
</script>
</body>
</html>