<!–
MAISON D EVENTS & HOSPITALITY
Clean Luxury Homepage — HTML + CSS Together
Paste into a full custom HTML area that supports tags.
–>
:root {
–navy: #1C2433;
–deep-navy: #111722;
–champagne: #F5F1E8;
–gold: #D4AF6A;
–antique-gold: #B8964F;
–soft-white: #FFFDF8;
–muted: rgba(245, 241, 232, 0.74);
–border: rgba(212, 175, 106, 0.35);
}
.maison-home,
.maison-home * {
box-sizing: border-box;
}
.maison-home {
margin: 0;
width: 100%;
min-height: 100vh;
font-family: Georgia, “Times New Roman”, serif;
color: var(–champagne);
background:
linear-gradient(rgba(17, 23, 34, 0.78), rgba(17, 23, 34, 0.94)),
radial-gradient(circle at 18% 12%, rgba(212, 175, 106, 0.22), transparent 32%),
url(“
https://images.unsplash.com/photo-1511795409834-ef04bbd61622?auto=format&fit=crop&w=1800&q=85”) center/cover;
overflow: hidden;
position: relative;
}
.maison-home::before {
content: “”;
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 28%, transparent 72%, rgba(212, 175, 106, 0.055)),
radial-gradient(circle at 78% 24%, rgba(212, 175, 106, 0.12), transparent 30%);
pointer-events: none;
}
.maison-home a {
color: inherit;
text-decoration: none;
}
.maison-wrap {
width: min(1180px, calc(100% – 40px));
margin: 0 auto;
position: relative;
z-index: 2;
}
.maison-nav {
min-height: 92px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
animation: maisonFadeDown 0.9s ease both;
}
.maison-logo {
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.95rem;
line-height: 1.25;
}
.maison-logo span {
display: block;
margin-top: 4px;
color: var(–gold);
font-family: Arial, sans-serif;
font-size: 0.66rem;
letter-spacing: 0.32em;
}
.maison-links {
display: flex;
align-items: center;
gap: 28px;
font-family: Arial, sans-serif;
font-size: 0.76rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(–muted);
}
.maison-links a {
transition: 0.25s ease;
}
.maison-links a:hover {
color: var(–gold);
}
.maison-pill {
border: 1px solid var(–gold);
color: var(–gold) !important;
padding: 10px 16px;
border-radius: 999px;
box-shadow: 0 0 0 rgba(212, 175, 106, 0);
}
.maison-pill:hover {
background: var(–gold);
color: var(–deep-navy) !important;
box-shadow: 0 0 28px rgba(212, 175, 106, 0.34);
}
.maison-hero {
min-height: calc(100vh – 92px);
display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;
gap: 56px;
padding: 40px 0 96px;
}
.maison-hero-content {
animation: maisonFadeUp 1s ease 0.1s both;
}
.maison-eyebrow {
margin: 0 0 22px;
color: var(–gold);
font-family: Arial, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.maison-title {
margin: 0;
max-width: 800px;
font-size: clamp(3.4rem, 7vw, 7.4rem);
line-height: 0.92;
font-weight: 400;
letter-spacing: -0.065em;
}
.maison-copy {
max-width: 655px;
margin: 30px 0 0;
color: var(–muted);
font-family: Arial, sans-serif;
font-size: clamp(1rem, 1.5vw, 1.14rem);
line-height: 1.8;
}
.maison-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 36px;
}
.maison-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 15px 25px;
border-radius: 999px;
font-family: Arial, sans-serif;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: 0.28s ease;
}
.maison-btn-primary {
background: var(–gold);
border: 1px solid var(–gold);
color: var(–deep-navy) !important;
box-shadow: 0 18px 46px rgba(212, 175, 106, 0.24);
}
.maison-btn-primary:hover {
background: var(–champagne);
border-color: var(–champagne);
transform: translateY(-2px);
box-shadow: 0 0 34px rgba(212, 175, 106, 0.42), 0 18px 46px rgba(212, 175, 106, 0.24);
}
.maison-btn-secondary {
border: 1px solid var(–border);
color: var(–champagne) !important;
background: rgba(255, 255, 255, 0.04);
}
.maison-btn-secondary:hover {
border-color: var(–gold);
color: var(–gold) !important;
transform: translateY(-2px);
box-shadow: 0 0 28px rgba(212, 175, 106, 0.18);
}
.maison-card {
position: relative;
min-height: 560px;
border: 1px solid var(–border);
border-radius: 34px;
overflow: hidden;
background:
linear-gradient(rgba(17, 23, 34, 0.08), rgba(17, 23, 34, 0.52)),
url(“
https://images.unsplash.com/photo-1555244162-803834f70033?auto=format&fit=crop&w=1400&q=85”) center/cover;
box-shadow: 0 38px 100px rgba(0, 0, 0, 0.38);
animation: maisonFadeIn 1.15s ease 0.28s both, maisonFloat 7s ease-in-out 1.4s infinite;
transition: transform 0.45s ease, box-shadow 0.45s ease, border-color 0.45s ease;
}
.maison-card:hover {
transform: translateY(-8px) scale(1.012);
border-color: rgba(212, 175, 106, 0.65);
box-shadow: 0 48px 120px rgba(0, 0, 0, 0.44), 0 0 38px rgba(212, 175, 106, 0.18);
}
.maison-card::before {
content: “”;
position: absolute;
inset: 18px;
border: 1px solid rgba(245, 241, 232, 0.26);
border-radius: 26px;
pointer-events: none;
}
.maison-card::after {
content: “”;
position: absolute;
inset: 0;
background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, 0.14) 42%, transparent 58%);
transform: translateX(-120%);
transition: transform 0.9s ease;
pointer-events: none;
}
.maison-card:hover::after {
transform: translateX(120%);
}
.maison-floating {
position: absolute;
left: 28px;
right: 28px;
bottom: 28px;
padding: 24px;
border: 1px solid var(–border);
border-radius: 24px;
background: rgba(17, 23, 34, 0.78);
backdrop-filter: blur(14px);
}
.maison-floating small {
display: block;
margin-bottom: 8px;
color: var(–gold);
font-family: Arial, sans-serif;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.maison-floating p {
margin: 0;
font-size: 1.25rem;
line-height: 1.3;
}
.maison-bottom-bar {
border-top: 1px solid rgba(212, 175, 106, 0.22);
background: rgba(17, 23, 34, 0.72);
backdrop-filter: blur(14px);
position: relative;
z-index: 2;
}
.maison-bottom-inner {
width: min(1180px, calc(100% – 40px));
margin: 0 auto;
padding: 22px 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
font-family: Arial, sans-serif;
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(245, 241, 232, 0.7);
animation: maisonFadeUp 1s ease 0.45s both;
}
.maison-bottom-inner span {
color: var(–gold);
}
@keyframes maisonFadeUp {
from {
opacity: 0;
transform: translateY(22px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes maisonFadeDown {
from {
opacity: 0;
transform: translateY(-18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes maisonFadeIn {
from {
opacity: 0;
transform: scale(0.975);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes maisonFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-8px);
}
}
@media (max-width: 900px) {
.maison-links {
display: none;
}
.maison-hero {
grid-template-columns: 1fr;
padding-top: 36px;
gap: 42px;
}
.maison-card {
min-height: 430px;
animation: maisonFadeIn 1.15s ease 0.28s both;
}
.maison-bottom-inner {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.maison-wrap,
.maison-bottom-inner {
width: min(100% – 28px, 1180px);
}
.maison-title {
font-size: 3.15rem;
}
.maison-actions {
flex-direction: column;
}
.maison-btn {
width: 100%;
}
.maison-floating {
left: 18px;
right: 18px;
bottom: 18px;
padding: 20px;
}
}
Maison D
Events & Hospitality
Luxury Catering • Weddings • Private Events
Elevated experiences, designed with intention.
Maison D Events & Hospitality delivers refined catering and seamless event experiences for weddings, private gatherings, and corporate occasions — where every detail is thoughtfully executed and effortlessly felt.
Now Booking
Custom menus, polished presentation, and attentive service — crafted to create a smooth, elevated experience from start to finish.
01 Weddings
02 Private Events
03 Corporate Events
event6c97c0607d-oeizj 