:root { --gold:#d4af37; --black:#171515; --white:#fff; --cream:#faf7f1; --pink:#f8edef; --rose:#c8988d; --gray:#5f5a58; --heading:'Playfair Display',Georgia,serif; --body:Poppins,Arial,sans-serif; --space:clamp(4rem,8vw,7rem); --radius:1rem; --shadow:0 16px 40px rgba(45,35,29,.08); --transition:220ms ease; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--black); background:var(--white); font:400 15px/1.75 var(--body); } body.menu-open { overflow:hidden; } img { max-width:100%; display:block; } a { color:inherit; text-decoration:none; } button { font:inherit; } .container { width:min(1120px,calc(100% - 3rem)); margin:auto; } .skip-link { position:fixed; left:1rem; top:-5rem; z-index:100; padding:.7rem 1rem; background:var(--black); color:var(--white); } .skip-link:focus { top:1rem; } :focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.site-header { position:sticky; top:0; z-index:20; transition:var(--transition); } .site-header.scrolled { background:rgba(255,255,255,.96); box-shadow:0 5px 24px rgba(25,20,18,.08); backdrop-filter:blur(10px); } .navbar { min-height:82px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .brand img { width:104px; max-height:58px; object-fit:contain; } .nav-links { display:flex; align-items:center; gap:1.25rem; font-size:.78rem; font-weight:600; } .nav-links > a { position:relative; white-space:nowrap; } .nav-links > a::after { content:''; position:absolute; bottom:-.45rem; left:0; width:0; height:1px; background:var(--gold); transition:var(--transition); } .nav-links > a:hover::after,.nav-links > a.active::after { width:100%; } .menu-toggle { display:none; border:0; padding:.5rem; background:transparent; cursor:pointer; } .menu-toggle span { display:block; width:25px; height:2px; margin:5px; background:var(--black); }
.button { border:1px solid transparent; border-radius:999px; padding:.78rem 1.35rem; font-size:.82rem; font-weight:700; cursor:pointer; transition:transform var(--transition),background var(--transition),box-shadow var(--transition); } .button:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(27,22,19,.16); } .button-gold { background:var(--gold); color:var(--black); } .button-dark { background:var(--black); color:var(--white); } .button-outline { border-color:rgba(255,255,255,.8); color:var(--white); background:transparent; }
.hero { position:relative; min-height:650px; display:grid; align-items:center; color:var(--white); overflow:hidden; } .hero-image,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; } .hero-image { object-fit:cover; z-index:-2; } .hero-overlay { background:linear-gradient(90deg,rgba(15,12,12,.72),rgba(15,12,12,.28)); z-index:-1; } .hero-content { padding:8rem 0 5rem; max-width:1120px; } .hero-content > * { max-width:710px; } .eyebrow { margin:0 0 .55rem; color:var(--gold); font-size:.73rem; letter-spacing:.16em; font-weight:700; text-transform:uppercase; } h1,h2,h3 { font-family:var(--heading); line-height:1.2; } h1 { margin:.2rem 0 1.15rem; font-size:clamp(2.7rem,5vw,4.8rem); } h2 { margin:.2rem 0 1rem; font-size:clamp(2rem,3.8vw,3.25rem); } h3 { margin:.3rem 0 .65rem; font-size:1.4rem; } .hero-content > p:not(.eyebrow) { font-size:1.04rem; max-width:650px; } .hero-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.section { padding:var(--space) 0; } .cream-bg { background:var(--cream); } .soft-pink-bg { background:var(--pink); } .split-layout { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,8vw,8rem); align-items:start; } .about-copy p:first-child { margin-top:0; } .value-grid,.service-grid,.testimonial-grid { display:grid; gap:1.25rem; } .value-grid { grid-template-columns:repeat(3,1fr); margin-top:3rem; } .value-card,.service-card,.testimonial-card { background:var(--white); border-radius:var(--radius); padding:1.65rem; box-shadow:var(--shadow); transition:transform var(--transition),box-shadow var(--transition); } .value-card:hover,.service-card:hover,.testimonial-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(45,35,29,.12); } .icon { display:grid; place-items:center; width:2.5rem; height:2.5rem; border:1px solid var(--gold); border-radius:50%; color:var(--gold); font-size:1.25rem; } .section-heading { max-width:780px; margin-bottom:2.7rem; } .section-heading > p:last-child { color:var(--gray); } .service-grid { grid-template-columns:repeat(3,1fr); } .service-card { border:1px solid rgba(212,175,55,.25); } .service-card p { min-height:3.5rem; color:var(--gray); } .service-card ul { margin:1rem 0 0; padding:0; list-style:none; } .service-card li { padding:.48rem 0; border-top:1px solid #eee7df; } .service-card small { display:block; margin-top:.25rem; color:var(--gray); font-size:.73rem; line-height:1.55; } .center-action { margin-top:2.5rem; text-align:center; }
.gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .gallery-grid img { width:100%; aspect-ratio:1/1.15; object-fit:cover; border-radius:var(--radius); transition:transform .35s ease,filter .35s ease; } .gallery-grid img:hover { transform:scale(1.025); filter:brightness(.92); } .testimonial-grid { grid-template-columns:repeat(4,1fr); } .testimonial-card { display:flex; flex-direction:column; } .testimonial-card p { flex:1; font-style:italic; } .testimonial-card span { color:var(--gray); font-size:.78rem; } .stars { color:var(--gold); letter-spacing:.08em; } .cta { padding:clamp(4.5rem,9vw,7rem) 0; background:var(--black); color:var(--white); text-align:center; } .cta .container { max-width:740px; } .cta p:not(.eyebrow) { margin:0 auto 1.7rem; color:#dfd8d4; }
.contact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; } .contact-grid h3 { font-size:1.2rem; } .contact-grid p { color:var(--gray); } address { font-style:normal; } .text-link { border:0; padding:0; background:transparent; color:var(--black); font-weight:700; cursor:pointer; } .text-link span { color:var(--gold); } .contact a { text-decoration:underline; text-underline-offset:3px; }
.site-footer { padding:3.5rem 0 1.5rem; background:#211e1d; color:var(--white); } .footer-grid { display:flex; justify-content:space-between; gap:3rem; } .footer-grid img { width:125px; max-height:72px; object-fit:contain; } .footer-grid p { max-width:280px; color:#c9c0bc; } .footer-grid h2 { font-size:1.1rem; } .footer-grid a { display:block; margin:.3rem 0; color:#d9d0cc; font-size:.84rem; } .footer-bottom { margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid #49413e; color:#b9b0ac; font-size:.75rem; }
.floating-whatsapp,.scroll-top { position:fixed; right:1.25rem; z-index:15; display:grid; place-items:center; border:0; cursor:pointer; box-shadow:var(--shadow); } .floating-whatsapp { bottom:1.25rem; width:52px; height:52px; border-radius:50%; background:var(--gold); color:var(--black); } .floating-whatsapp svg { width:28px; fill:currentColor; } .scroll-top { bottom:5.25rem; width:40px; height:40px; border-radius:50%; background:var(--black); color:var(--white); opacity:0; pointer-events:none; transform:translateY(8px); transition:var(--transition); } .scroll-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); } .reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; } .reveal.is-visible { opacity:1; transform:none; }
@media (max-width:900px) { .nav-links { gap:.8rem; } .nav-booking { padding:.65rem .85rem; } .service-grid { grid-template-columns:repeat(2,1fr); } .testimonial-grid { grid-template-columns:repeat(2,1fr); } .contact-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:720px) { .container { width:min(100% - 2rem,1120px); } .navbar { min-height:72px; } .menu-toggle { display:block; } .nav-links { position:absolute; top:100%; left:0; right:0; display:flex; visibility:hidden; flex-direction:column; align-items:stretch; gap:0; padding:1rem; background:var(--white); box-shadow:0 14px 24px rgba(25,20,18,.1); opacity:0; transform:translateY(-8px); transition:var(--transition); } .nav-links.open { visibility:visible; opacity:1; transform:none; } .nav-links > a,.nav-booking { padding:.7rem .4rem; } .nav-booking { margin:.4rem 0 0; } .hero { min-height:610px; } .hero-overlay { background:linear-gradient(90deg,rgba(15,12,12,.75),rgba(15,12,12,.45)); } .split-layout,.value-grid,.service-grid,.testimonial-grid,.contact-grid { grid-template-columns:1fr; } .service-card p { min-height:0; } .gallery-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; } .footer-grid { display:block; } .footer-grid > div + div { margin-top:2rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } .reveal { opacity:1; transform:none; } }