/* ========================================================= Lodha Massimo Baner — custom theme Bootstrap 5.3.3 (local) utility-first; minimal overrides. Ultra-luxury: Lodha black + bronze-gold + warm ivory. ========================================================= */ /* ---------- CLS Prevention ---------- */ .hero-content { contain: layout style; } .gal-item { aspect-ratio: 4/3; background:#efe9dd; contain: layout; width:100%; } .gal-item img { display:block; width:100%; height:100%; object-fit:cover; } /* Font fallback metrics — prevents text resize/CLS */ @font-face { font-family: 'Cormorant Garamond Fallback'; src: local('Georgia'); size-adjust: 105%; ascent-override: 95%; } .hero h1, h2, h3, h4, h5, h6, .serif { font-family: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif; } :root { --brand:#141414; /* Lodha near-black */ --brand-d:#0a0a0a; --accent:#b8893f; /* bronze-gold (from logo) */ --accent-d:#9a6f30; --gold:#cda75c; /* lighter gold for dark bg accents */ --ink:#1c1a17; --mute:#6f675b; --paper:#f6f2ea; /* warm ivory */ --line:#e7ddcc; --shadow:0 10px 30px rgba(20,20,20,.10); } /* ---------- Base ---------- */ body { background:#fff; color:var(--ink); font-size:16px; } .section { padding: clamp(56px, 8vw, 100px) 0; } .section-paper { background:var(--paper); } .section-dark { background:var(--brand); color:#fff; } .section-dark p { color:rgba(255,255,255,.78); } .eyebrow { display:inline-block; font-size:.75rem; letter-spacing:3px; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:.6rem; padding-bottom:.4rem; border-bottom:1px solid var(--accent); } .eyebrow-light { color:var(--gold); border-color:var(--accent); } .section-title { font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height:1.12; margin:0 0 1rem; } .section-sub { color:var(--mute); max-width:42rem; margin:0 auto; } .text-white-70 { color: rgba(255,255,255,.78); } /* ---------- Buttons ---------- */ .btn-rivana { display:inline-block; background:var(--accent); color:#fff; padding:.85rem 1.8rem; border:0; border-radius:2px; cursor:pointer; font-weight:600; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; transition: background .2s, transform .2s; } .btn-rivana:hover { background:var(--accent-d); color:#fff; transform: translateY(-1px); } .btn-outline-rivana { display:inline-block; background:transparent; color:var(--brand); padding:.6rem 1.2rem; border:1.5px solid var(--brand); border-radius:2px; font-weight:600; font-size:.8rem; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; transition: all .2s; } .btn-outline-rivana:hover { background:var(--brand); color:#fff; } .btn-ghost { display:inline-flex; align-items:center; gap:.5rem; margin-left:.6rem; background:transparent; color:#fff; padding:.85rem 1.4rem; border:1px solid rgba(255,255,255,.45); border-radius:2px; font-weight:600; font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; text-decoration:none; transition: all .2s; } .btn-ghost:hover { background:#fff; color:var(--brand); border-color:#fff; } /* ---------- Header / Nav ---------- */ .navbar-rivana .primary-nav ul { list-style:none; display:flex; gap:1.6rem; margin:0; padding:0; } .navbar-rivana .primary-nav a { color:#fff; text-decoration:none; font-size:.92rem; font-weight:500; padding:.4rem 0; position:relative; } .navbar-rivana .primary-nav a:hover { color:var(--gold); } .navbar-rivana .primary-nav .cta-link { background:var(--accent); padding:.5rem 1rem; border-radius:2px; font-weight:600; color:#fff; } .navbar-rivana .primary-nav .cta-link:hover { background:var(--accent-d); color:#fff; } .navbar-toggler-rivana { background:transparent; border:0; padding:.5rem; cursor:pointer; width:42px; height:42px; display:flex; flex-direction:column; justify-content:space-around; } .navbar-toggler-rivana span { display:block; height:2px; background:#fff; transition: all .3s; } .navbar-toggler-rivana[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .navbar-toggler-rivana[aria-expanded="true"] span:nth-child(2) { opacity:0; } .navbar-toggler-rivana[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } @media (max-width: 991.98px) { .navbar-rivana .primary-nav { position:absolute; top:100%; left:0; right:0; background:var(--brand-d); padding:1rem 1.4rem; max-height:0; overflow:hidden; transition: max-height .35s ease; } .navbar-rivana .primary-nav.open { max-height: 520px; } .navbar-rivana .primary-nav ul { flex-direction:column; gap:.4rem; } .navbar-rivana .primary-nav a { padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.08); display:block; } } /* ---------- Hero ---------- */ .hero .kicker { display:inline-block; font-size:.78rem; letter-spacing:3px; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; font-weight:600; } .hero-cta { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem; } @media (max-width:575.98px) { .btn-ghost { margin-left:0; } .hero-cta { flex-direction:column; align-items:flex-start; } .btn-ghost, .hero .btn-rivana { width:auto; } } /* ---------- Quick facts ---------- */ .quickfacts { background:#fff; padding: 2rem 0; border-bottom:1px solid var(--line); } .qf-item { padding: 1rem; color:var(--mute); } .qf-item svg { color:var(--accent); margin-bottom:.5rem; } .qf-item strong { display:block; font-family:'Cormorant Garamond', Georgia, serif; font-size:1.4rem; color:var(--ink); font-weight:600; margin-bottom:.2rem; } .qf-item span { display:block; font-size:.85rem; } /* ---------- About ---------- */ .about-img-wrap { position:relative; overflow:hidden; border-radius:4px; box-shadow:var(--shadow); } .about-img-wrap::before { content:""; position:absolute; left:-12px; top:-12px; right:24px; bottom:24px; border:2px solid var(--accent); z-index:-1; border-radius:4px; } .about-img-wrap img { width:100%; height:auto; } .lead-p { color:var(--accent-d); font-size:1.05rem; margin-bottom:1rem; } .counters { display:flex; gap:2rem; flex-wrap:wrap; } .counter .num { display:block; font-family:'Cormorant Garamond', Georgia, serif; font-size:2.4rem; color:var(--brand); font-weight:700; line-height:1; } .counter .num small { font-size:1.4rem; color:var(--accent); } .counter .lab { display:block; font-size:.8rem; color:var(--mute); text-transform:uppercase; letter-spacing:1px; } /* ---------- Lifestyle pillars ---------- */ .pillar-card { background:rgba(255,255,255,.035); border:1px solid rgba(205,167,92,.18); padding:2rem 1.6rem; border-radius:4px; height:100%; transition: background .25s, transform .25s, border-color .25s; } .pillar-card:hover { background:rgba(184,137,63,.08); border-color:rgba(205,167,92,.4); transform: translateY(-3px); } .pillar-card h3 { color:#fff; font-size:1.4rem; margin-bottom:.8rem; } .pillar-card p { color:rgba(255,255,255,.72); font-size:.95rem; margin:0; } /* ---------- Gallery ---------- */ .gal-item { margin:0; overflow:hidden; border-radius:4px; aspect-ratio:4/3; box-shadow:var(--shadow); width:100%; height:auto; contain:layout; background:#efe9dd; } .gal-item img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; display:block; } .gal-item:hover img { transform: scale(1.05); } .ai-tag{position:absolute;right:8px;bottom:7px;font-size:.58rem;letter-spacing:.06em;color:#fff;background:rgba(35,20,16,.6);padding:3px 7px;border-radius:6px} /* ---------- Amenities ---------- */ .amenity { background:#fff; border:1px solid var(--line); border-radius:4px; padding:1.4rem 1rem; text-align:center; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; transition: all .25s; } .amenity:hover { border-color:var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); } .amenity svg { width:40px; height:40px; color:var(--accent-d); fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } .amenity span { font-size:.85rem; color:var(--ink); font-weight:500; } /* ---------- Floor plans ---------- */ .plan-card { background:#fff; border:1px solid var(--line); border-radius:4px; overflow:hidden; height:100%; transition: all .25s; position:relative; } .plan-card:hover { box-shadow:var(--shadow); transform: translateY(-3px); } .plan-card.featured { border-color: var(--accent); border-width:2px; } .plan-img { background:var(--paper); aspect-ratio: 3/2; overflow:hidden; position:relative; } .plan-img img { width:100%; height:100%; object-fit:cover; filter: blur(7px) contrast(1.05); transition: filter .3s ease; } .plan-view-btn { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff; border:2px solid #fff; padding:.7rem 1.4rem; border-radius:4px; font-size:.85rem; font-weight:700; letter-spacing:.5px; text-transform:uppercase; cursor:pointer; box-shadow: 0 4px 20px rgba(0,0,0,.35); transition: all .2s; z-index:2; font-family:inherit; } .plan-view-btn:hover { background:var(--accent); transform:translate(-50%,-50%) scale(1.05); } .plan-body { padding:1.4rem; } .plan-tag { display:inline-block; font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent); font-weight:600; } .plan-body h3 { font-size:1.3rem; margin-bottom:.6rem; } .plan-price { font-family:'Cormorant Garamond', Georgia, serif; font-size:1.6rem; color:var(--brand); font-weight:600; margin-bottom:1rem; } .plan-price small, .plan-body h3 small { font-size:.9rem; color:var(--mute); font-weight:400; } /* ---------- Location ---------- */ .loc-card { background:#fff; border:1px solid var(--line); border-radius:4px; padding:1.6rem 1.4rem; height:100%; } .loc-card h3 { font-size:1.15rem; color:var(--accent-d); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:1px solid var(--line); } .loc-card ul { list-style:none; padding:0; margin:0; } .loc-card li { display:flex; justify-content:space-between; align-items:baseline; gap:.8rem; padding:.5rem 0; font-size:.9rem; border-bottom:1px dashed var(--line); } .loc-card li:last-child { border-bottom:0; } .loc-card li b { color:var(--accent); white-space:nowrap; font-weight:600; font-size:.85rem; } .loc-card li span { color:var(--ink); } /* ---------- FAQ ---------- */ .faq-item { background:#fff; border:1px solid var(--line); border-radius:4px; margin-bottom:.8rem; overflow:hidden; } .faq-q { width:100%; text-align:left; background:transparent; border:0; cursor:pointer; padding:1.1rem 1.3rem; font-family:'Cormorant Garamond',Georgia,serif; font-size:1.2rem; font-weight:600; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:1rem; } .faq-q:hover { color:var(--accent-d); } .faq-q .faq-ico { flex-shrink:0; width:22px; height:22px; border:1.5px solid var(--accent); border-radius:50%; position:relative; transition: transform .3s; } .faq-q .faq-ico::before, .faq-q .faq-ico::after { content:""; position:absolute; background:var(--accent); left:50%; top:50%; transform:translate(-50%,-50%); } .faq-q .faq-ico::before { width:10px; height:2px; } .faq-q .faq-ico::after { width:2px; height:10px; transition: transform .3s; } .faq-item.open .faq-q .faq-ico::after { transform:translate(-50%,-50%) scaleY(0); } .faq-a { max-height:0; overflow:hidden; transition: max-height .3s ease; } .faq-a p { margin:0; padding:0 1.3rem 1.2rem; color:var(--mute); font-size:.95rem; } /* ---------- Contact form ---------- */ .contact-list { list-style:none; padding:0; margin:1.4rem 0 0; } .contact-list li { display:flex; align-items:center; gap:.8rem; padding:.5rem 0; color:rgba(255,255,255,.85); } .contact-list li svg { color:var(--gold); flex-shrink:0; } .contact-list a { color:#fff; text-decoration:none; } .contact-list a:hover { color:var(--gold); } .enquiry-form { background:#fff; padding: 2rem; border-radius:4px; color:var(--ink); } .enquiry-form h3 { font-size:1.5rem; color:var(--accent-d); padding-bottom:.6rem; border-bottom:2px solid var(--accent); display:inline-block; } .enquiry-form .form-label { font-size:.85rem; font-weight:600; margin-bottom:.3rem; } .enquiry-form .form-control, .enquiry-form .form-select { border-radius:2px; border:1px solid var(--line); padding:.65rem .9rem; } .enquiry-form .form-control:focus, .enquiry-form .form-select:focus { border-color:var(--accent); box-shadow: 0 0 0 .2rem rgba(184,137,63,.15); } .form-fineprint { font-size:.7rem; color:var(--mute); margin:.8rem 0 0; text-align:center; } /* ---------- Footer ---------- */ .rivana-footer { background:var(--brand-d); color:rgba(255,255,255,.7); padding: 3rem 0 1.5rem; } .rivana-footer h3 { color:var(--gold); font-size:1.6rem; margin-bottom:.8rem; } .rivana-footer h4 { color:#fff; font-size:1.05rem; margin-bottom:.8rem; } .rivana-footer a { color:var(--gold); text-decoration:none; } .rivana-footer a:hover { color:#fff; } .rivana-footer .small { font-size:.85rem; line-height:1.6; } .rivana-footer .tiny { font-size:.72rem; line-height:1.55; color:rgba(255,255,255,.5); } .footer-logo { background:#fff; padding:.5rem .7rem; border-radius:4px; display:inline-block; } .footer-bottom { border-top:1px solid rgba(255,255,255,.08); margin-top:2rem; padding-top:1.2rem; } /* ---------- Floating WhatsApp (desktop only) ---------- */ .float-wa { position:fixed; bottom:20px; right:20px; z-index:1020; background:#25d366; color:#fff; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 6px 20px rgba(37,211,102,.4); transition: transform .2s; } .float-wa:hover { transform: scale(1.08); color:#fff; } /* ---------- Mobile Sticky CTA Bar ---------- */ .mobile-cta-bar { position:fixed; bottom:0; left:0; right:0; z-index:1025; display:none; background:var(--brand); box-shadow: 0 -2px 12px rgba(0,0,0,.18); } .mcta { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:10px 6px; color:#fff; text-decoration:none; font-size:.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; transition: background .2s; border-right:1px solid rgba(255,255,255,.12); } .mcta:last-child { border-right:0; } .mcta:hover, .mcta:active { color:#fff; background:rgba(0,0,0,.18); } .mcta-enquire { background:var(--accent); } .mcta-wa { background:#25d366; } .mcta svg { flex-shrink:0; } @media (max-width: 767.98px) { .mobile-cta-bar { display:flex; } .float-wa { display:none !important; } body { padding-bottom:64px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } .consent { color: rgb(64 63 63 / 78%) !important; text-align:left !important; margin-bottom:1.2rem; } /* ===================== LEAD-MAGNET MODAL ===================== */ .modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:9999; display:flex; align-items:center; justify-content:center; padding:.75rem; opacity:0; transition:opacity .25s ease; } .modal-backdrop:not([hidden]) { opacity:1; } .modal-backdrop[hidden] { display:none; } .modal-box { background:#fff; border-radius:12px; width:100%; max-width:380px; max-height:95vh; overflow-y:auto; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.35); transform:scale(.95); transition:transform .25s ease; } .modal-backdrop:not([hidden]) .modal-box { transform:scale(1); } .modal-close { position:absolute; top:.5rem; right:.5rem; background:rgba(255,255,255,.2); border:none; border-radius:50%; width:30px; height:30px; font-size:22px; line-height:1; cursor:pointer; color:#fff; z-index:10; display:flex; align-items:center; justify-content:center; transition:background .2s; } .modal-close:hover { background:rgba(255,255,255,.35); } .modal-header { background:linear-gradient(135deg,#1c1a17 0%,#0a0a0a 100%); padding:1.25rem 1rem 1rem; text-align:center; color:#fff; border-radius:12px 12px 0 0; } .modal-header h3 { font-size:1.35rem; font-weight:700; margin:0 0 .25rem; line-height:1.25; color:#fff; display: flex;} .modal-subtitle { font-size:.8rem; margin:0; opacity:.95; color:var(--gold); font-weight:500; } .modal-form { padding:1rem; } .modal-form input[type="text"], .modal-form input[type="tel"] { width:100%; padding:.7rem .85rem; border:1.5px solid #e0e0e0; border-radius:8px; font-size:.9rem; margin-bottom:.65rem; transition:all .2s; font-family:inherit; box-sizing:border-box; } .modal-form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 2px rgba(184,137,63,.15); } .phone-group { display:flex; gap:.4rem; margin-bottom:.65rem; } .phone-group input { flex:1; margin-bottom:0; } .btn-submit { width:100%; background:var(--accent); color:#fff; border:0; border-radius:8px; padding:.8rem 1rem; font-size:.95rem; font-weight:700; letter-spacing:.3px; cursor:pointer; font-family:inherit; transition:background .2s, transform .2s; } .btn-submit:hover { background:var(--accent-d); transform:translateY(-1px); } .divider { display:flex; align-items:center; text-align:center; color:#aaa; font-size:.8rem; margin:.8rem 0; } .divider::before, .divider::after { content:""; flex:1; height:1px; background:#e6e6e6; } .divider span { padding:0 .7rem; } .btn-whatsapp { display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%; background:#25d366; color:#fff; border-radius:8px; padding:.75rem 1rem; font-size:.9rem; font-weight:600; text-decoration:none; transition:background .2s; } .btn-whatsapp:hover { background:#1ebe5b; color:#fff; } .trust-note { text-align:center; font-size:.72rem; color:var(--mute); margin:.8rem 0 0; } .tags{display:flex;gap:8px;flex-wrap:wrap;font-size:.68rem; align-items: center; margin-top: .8rem;} .tag{background:rgba(226,205,146,.16);border:1px solid rgba(226,205,146,.4);color:var(--gold-soft);padding:5px 11px;border-radius:50px;}