/* Royal Fade — Theme v10 */ :root{ --bg:#0f0f10; --bg-2:#151517; --text:#f2f2f2; --muted:#c8c8c8; --muted-strong:#d8d8d8; --gold:#d4a94c; --gold-2:#b98b2d; --card:#1a1b1e; --border:#26272b; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.45); } *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Montserrat,Poppins,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55} a{color:var(--gold);text-decoration:none} a:hover{filter:brightness(1.1)} .container{max-width:1100px;margin:0 auto;padding:0 20px} .sm{display:none}@media(max-width:720px){.sm{display:inline}} .logo{height:28px} /* Hero */ .hero{position:relative;min-height:78vh;background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.90)), url('img/hero-bg.jpg') center 38%/cover no-repeat} .hero .overlay{position:absolute;inset:0;background:radial-gradient(1200px 600px at 20% 10%, rgba(212,169,76,.12), transparent)} .nav{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:22px 24px;background:rgba(15,15,16,.55);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--border)} .brand{font-weight:800;letter-spacing:.1em;position:relative} /* Shimmer over brand */ .brand::after{content:"";position:absolute; top:0; left:-50%; width:32%; height:100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,230,150,.30) 50%, rgba(255,255,255,0) 100%); transform: skewX(-18deg); animation: shimmer 6.5s ease-in-out infinite; pointer-events:none; opacity:0} @keyframes shimmer{0%{left:-60%;opacity:0} 10%{opacity:.65} 25%{left:110%;opacity:0} 100%{left:110%;opacity:0}} .nav-cta{display:flex;gap:12px} .btn{background:var(--gold);color:#111;padding:12px 18px;border-radius:10px;border:1px solid var(--gold-2);box-shadow:var(--shadow);font-weight:700;display:inline-block} .btn:hover{transform:translateY(-1px)} .btn-outline{background:transparent;color:var(--text);border:1px solid var(--border)} .btn-lg{padding:14px 22px;border-radius:12px} .hero-content{position:relative;padding:120px 0;animation: heroFadeIn .9s ease-out both} .hero h1{font-size:clamp(28px,6vw,52px);margin:0 0 10px;letter-spacing:.02em} .hero p{color:var(--muted);max-width:560px;margin:0 0 28px} .cta-row{display:flex;gap:14px;flex-wrap:wrap} /* About */ .about{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;padding:80px 0} .about .lead{color:var(--muted)} .ticks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px} .about .ticks li{position:relative;padding-left:26px;color:#ddd} .about .ticks li:before{content:'✓';position:absolute;left:0;top:0;color:var(--gold)} .profile{width:100%;height:360px;object-fit:cover;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow)} @media(max-width:900px){.about{grid-template-columns:1fr}} /* Services */ .services{background:var(--bg-2);padding:80px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .services h2{margin:0 0 24px} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .card{background:var(--card);border:1px solid var(--border);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow)} .card h3{margin:0 0 8px} @media(max-width:900px){.grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.grid{grid-template-columns:1fr}} /* Gallery */ .gallery{padding:80px 0} .gallery-copy p{color:var(--muted)} .masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .tile .ph{height:200px;border-radius:12px;border:1px solid var(--border);background:linear-gradient(145deg,#0f0f10,#1a1b1e)} @media(max-width:900px){.masonry{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.masonry{grid-template-columns:1fr}} /* Contact & Subscribe */ .contact-grid{display:grid;grid-template-columns: 1.4fr 1fr;gap:24px;align-items:start} .map-wrap{border-radius:16px;overflow:hidden;box-shadow:0 6px 30px rgba(0,0,0,.35)} .map-embed{width:100%;height:360px;border:0;display:block} .map-dark{filter: grayscale(25%) brightness(.72) contrast(1.08) saturate(.7);} .contact-info{background:rgba(255,255,255,.02);border:1px solid rgba(212,169,76,.18);border-radius:14px;padding:18px 18px} .contact-info .brand-lite{letter-spacing:.08em;color:var(--gold)} .contact-list{list-style:none;margin:8px 0 0;padding:0} .contact-list li{margin:10px 0;color:var(--muted-strong)} .subscribe-form .form-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center} .subscribe-form input{background:#0f0f11;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 14px;color:#f3f3f3} .subscribe-form .btn-gold{border-radius:12px;padding:14px 18px;white-space:nowrap} .subscribe-form .consent{display:block;margin-top:14px;color:var(--muted);font-size:.95rem} .hidden{display:none} @media(max-width:900px){.contact-grid{grid-template-columns:1fr} .map-embed{height:280px} .subscribe-form .form-row{grid-template-columns:1fr;gap:10px}} /* Footer */ .footer{padding:28px 0;border-top:1px solid var(--border);text-align:center;color:#aaa;background:#0d0e10} /* WhatsApp Float */ .wa-float{position:fixed; right:18px; bottom:18px; z-index:9999; background:#25D366; color:#111; font-weight:800; padding:12px 16px; border-radius:999px; border:1px solid rgba(0,0,0,.2); box-shadow:0 10px 22px rgba(0,0,0,.35)} .wa-float:hover{ transform:translateY(-2px); } .wa-float::before{content:""; display:inline-block; width:18px; height:18px; margin-right:8px; background:url('data:image/svg+xml;utf8,') no-repeat center/contain;} @media (max-width:480px){ .wa-float{ padding:10px 14px; } } @keyframes heroFadeIn{from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)}}