My Untitled Site
There's nothing here yet (well, except for this message), but clicking on the "+" button in the menu above should change that. Have fun! :)
<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light only" />
<title>Nura & Amae — Interior Design Studio</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap');*, *::before, ::after { box-sizing: border-box; margin: 0; padding: 0; }:root { color-scheme: light only; }html, body {
background: #ffffff !important;
color: #2a2a2a !important;
}* {
-webkit-color-scheme: light !important;
color-scheme: light !important;
}:root {
--ink: #0a0a0a;
--stone: #ffffff;
--warm: #f5f5f5;
--plaster:#e0e0e0;
--terra: #0a0a0a;
--text: #2a2a2a;
--muted: #888888;
}html { scroll-behavior: smooth; }body {
background: var(--stone);
color: var(--text);
font-family: 'DM Sans', sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}/ ── NAV ── /
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 22px 48px;
background: #f5f5f5 !important;
backdrop-filter: blur(12px);
border-bottom: none;
margin-bottom: 0;
box-shadow: none;
}
.nav-logo {
font-family: 'Cormorant Garamond', serif;
font-size: 22px; font-weight: 300; letter-spacing: 0.18em;
text-transform: uppercase; color: var(--ink);
text-decoration: none;
}
.nav-links {
display: flex; gap: 36px; list-style: none;
}
.nav-links a {
font-size: 13px; font-weight: 400; letter-spacing: 0.06em;
color: var(--muted); text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
background: var(--ink); color: var(--stone) !important;
padding: 10px 22px; font-size: 12px !important;
letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-cta:hover { background: var(--terra); color: var(--stone) !important; }/ ── HERO ── /
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
padding-top: 80px;
margin-top: 0;
gap: 0;
}
.hero-left {
display: flex; flex-direction: column; justify-content: center;
padding: 80px 64px 80px 80px;
background: #ffffff !important;
}
.hero-eyebrow {
font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--terra);
margin-bottom: 28px;
}
.hero-headline {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(44px, 5vw, 72px);
font-weight: 300; line-height: 1.08;
color: var(--ink);
margin-bottom: 28px;
}
.hero-headline em {
font-style: italic; color: var(--terra);
}
.hero-sub {
font-size: 16px; color: var(--muted); line-height: 1.7;
max-width: 400px; margin-bottom: 48px;
}
.hero-actions {
display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.btn-primary {
background: var(--terra); color: #fff;
padding: 16px 36px; font-size: 13px; font-weight: 500;
letter-spacing: 0.08em; text-transform: uppercase;
text-decoration: none; transition: background 0.2s, transform 0.2s;
display: inline-block;
}
.btn-primary:hover { background: var(--ink); transform: translateY(-1px); }
.hero-note {
font-size: 13px; color: var(--muted); font-style: italic;
}
.hero-right {
position: relative; overflow: hidden; background: var(--warm);
}
.hero-right img {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
/ mosaic overlay: before = dark scrim /
.hero-right::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(120deg, rgba(26,24,20,0.08) 0%, transparent 60%);
}
/ floating price badge /
.price-badge {
position: absolute; bottom: 48px; left: -1px; z-index: 10;
background: var(--stone);
padding: 20px 32px;
border-left: 3px solid var(--terra);
}
.price-badge .amount {
font-family: 'Cormorant Garamond', serif;
font-size: 42px; font-weight: 300; color: var(--ink);
line-height: 1;
}
.price-badge .label {
font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--muted); margin-top: 4px;
}/ ── HOW IT WORKS ── /
.how {
background: var(--ink); color: var(--stone);
padding: 100px 80px;
}
.section-label {
font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--terra);
margin-bottom: 16px;
}
.how-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(32px, 4vw, 52px); font-weight: 300;
color: var(--stone); margin-bottom: 64px;
max-width: 560px;
}
.how-steps {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.step {
background: #231f1a;
padding: 48px 40px;
position: relative; overflow: hidden;
}
.step::before {
content: attr(data-n);
font-family: 'Cormorant Garamond', serif;
font-size: 120px; font-weight: 300; line-height: 1;
color: rgba(255,255,255,0.04);
position: absolute; top: 8px; right: 16px;
}
.step-icon {
width: 40px; height: 2px; background: var(--terra);
margin-bottom: 28px;
}
.step h3 {
font-family: 'Cormorant Garamond', serif;
font-size: 24px; font-weight: 300; color: var(--stone);
margin-bottom: 12px;
}
.step p {
font-size: 14px; color: rgba(240,236,228,0.55); line-height: 1.7;
}/ ── SERVICES ── */
.services {
padding: 100px 80px; background: var(--stone);
}
.services-header {
display: flex; justify-content: space-between;
align-items: flex-end; margin-bottom: 56px;
}
.services-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(32px, 4vw, 52px); font-weight: 300; color: var(--ink);
}
.services-note {
font-size: 14px; color: var(--muted); max-width: 280px; text-align: right;
font-style: italic;
}
.cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
}
.card {
background: var(--warm);
padding: 48px 40px;
position: relative; cursor: default;
transition: background 0.25s;
border-top: 2px solid transparent;
}
.card:hover { background: #e2dbd0; }
.card.featured {
background: var(--terra); color: #fff;
borde