/* ========================================================== AALO INTERIORS — DESIGN SYSTEM Palette: sindoor red, peacock teal, temple gold, terracotta, shell ivory, ink. Type: Fraunces (display) + Tiro Bangla (Bengali accents) + Hind Siliguri (body — named for the WB city). Signature: hand-drawn alpona (আলপনা) dot-and-curve dividers. ========================================================== */ /* Google Fonts now loaded via in the HTML (not @import) so the browser can fetch them in parallel with this stylesheet instead of blocking on it. */ :root{ --sindoor:#B3202A; --sindoor-dark:#7E1620; --peacock:#0B4F4A; --gold:#C89B3C; --terracotta:#A85C32; --ivory:#FBF6EC; --ivory-deep:#F3EADA; --ink:#241F1B; --ink-soft:#4A423B; --radius:4px; --maxw:1200px; --shadow:0 12px 30px -12px rgba(36,31,27,.25); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:'Hind Siliguri',sans-serif; background:var(--ivory); color:var(--ink); line-height:1.6; overflow-x:hidden; } img{max-width:100%;display:block;object-fit:cover} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} button{font-family:inherit;cursor:pointer;border:none} h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:600;line-height:1.15;color:var(--ink)} .bn{font-family:'Tiro Bangla',serif;color:var(--sindoor);font-size:.95rem;letter-spacing:.02em} /* ---------- Alpona divider (signature element) ---------- */ .alpona-divider{ display:flex;align-items:center;justify-content:center;gap:10px; margin:0 auto 18px;width:100%;max-width:340px; } .alpona-divider svg{width:100%;height:22px} /* ---------- Section rhythm ---------- */ .section{padding:88px 0;position:relative;overflow:hidden} /* Testimonials' own bottom padding plus Instagram's top padding otherwise stack to a very large empty gap between them — tightened from both sides, at every screen width (not just mobile). */ #testimonials{padding-bottom:36px} section.section-insta{padding-top:36px} .section-alt{background:var(--ivory-deep)} .section-dark{background:var(--peacock);color:var(--ivory)} .section-dark h2, .section-dark h3{color:var(--ivory)} /* Bengal motif backgrounds — sit behind content (z-index 0), content sits above (z-index 1) */ .section::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background-repeat:repeat;opacity:.05; } .section > .wrap, .section > .alpona-divider{position:relative;z-index:1} /* Alpona lotus rosette + armchair motif — light sections. A six-petal Bengali alpona lotus (padma) paired with a small armchair silhouette, mixing the cultural motif with a nod to interior design. */ .section:not(.section-dark)::before{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23B3202A' stroke-width='1.3'%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(0 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(60 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(120 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(180 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(240 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(300 75 75)'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='5' fill='%23C89B3C' stroke='none'/%3E%3Cg stroke='%230B4F4A' stroke-width='1.1' fill='none' stroke-linecap='round'%3E%3Crect x='16' y='118' width='22' height='11' rx='2'/%3E%3Cpath d='M18 118 v-11 a3 3 0 0 1 3-3 h10 a3 3 0 0 1 3 3 v11'/%3E%3Cpath d='M18 129 v5 M38 129 v5'/%3E%3C/g%3E%3C/svg%3E"); background-size:150px 150px; } /* Peacock feather + armchair motif — dark/teal sections, same pairing of Bengali motif with an interior-design silhouette, in the dark palette. */ .section-dark::before{ opacity:.08; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-width='1.3'%3E%3Cpath d='M80 30c22 0 38 20 38 46s-16 46-38 46-38-20-38-46 16-46 38-46Z'/%3E%3Ccircle cx='80' cy='76' r='10' fill='%23FBF6EC' stroke='none' opacity='.5'/%3E%3Cpath d='M80 10v20M80 142v10'/%3E%3C/g%3E%3Cg stroke='%23FBF6EC' stroke-width='1.1' fill='none' stroke-linecap='round' opacity='.75'%3E%3Crect x='18' y='122' width='24' height='12' rx='2'/%3E%3Cpath d='M20 122 v-12 a3 3 0 0 1 3-3 h12 a3 3 0 0 1 3 3 v12'/%3E%3Cpath d='M20 134 v6 M40 134 v6'/%3E%3C/g%3E%3C/svg%3E"); background-size:160px 160px; } .hero::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cpath d='M10 60 Q30 30 60 30 Q90 30 110 60 Q90 90 60 90 Q30 90 10 60Z' fill='none' stroke='%23C89B3C' stroke-width='1'/%3E%3C/svg%3E"); background-size:120px 120px;opacity:.05;mix-blend-mode:overlay; } .eyebrow{ text-align:center;font-family:'Tiro Bangla',serif;color:var(--sindoor); font-size:1rem;margin-bottom:6px; } .section-dark .eyebrow{color:var(--gold)} .section-title{text-align:center;font-size:clamp(1.9rem,3.5vw,2.7rem);margin-bottom:8px} .section-desc{text-align:center;max-width:620px;margin:0 auto 44px;color:var(--ink-soft)} .section-dark .section-desc{color:#E7E2D8} /* ---------- Header ---------- */ /* backdrop-filter lives on ::before, not on header itself: filter/backdrop-filter creates a new containing block for position:fixed descendants, which was collapsing the full-height mobile drawer down to header's own ~64px box. */ /* z-index is above .drawer-overlay (240): the drawer (#navLinks, z-index 250) is nested inside header, so header's OWN z-index is what actually competes with the overlay at the page level — the drawer's z-index only matters locally within header. At 200 the overlay was painting (and catching clicks) on top of the drawer itself, not just behind it. */ header{ position:fixed;top:0;left:0;right:0;z-index:245; border-bottom:1px solid rgba(179,32,42,.12); } header::before{ content:"";position:absolute;inset:0;z-index:-1; background:rgba(251,246,236,.92);backdrop-filter:blur(8px); } .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:var(--maxw);margin:0 auto} .brand{display:flex;flex-direction:row;align-items:center;gap:10px} .brand-text{display:flex;flex-direction:column;line-height:1.1} .brand-logo{height:40px;width:auto;flex-shrink:0;display:block} .brand-en{font-family:'Fraunces',serif;font-weight:700;font-size:1.3rem;color:var(--sindoor)} .brand-bn{font-family:'Tiro Bangla',serif;font-size:.8rem;color:var(--peacock)} .nav-links{display:flex;gap:18px;list-style:none} .nav-links a{font-weight:500;font-size:.88rem;position:relative;white-space:nowrap} .nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--sindoor);transition:width .25s} .nav-links a:hover::after{width:100%} /* Drawer-only content: hidden on the desktop inline nav, revealed inside the drawer media query below. Without this it renders inline in the header row. */ .drawer-brand,.drawer-alpona,.drawer-actions{display:none} .nav-cta{display:flex;gap:8px;align-items:center} .nav-cta .btn-outline,.nav-cta .btn-primary{padding:9px 15px;font-size:.85rem} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 22px;border-radius:var(--radius);font-weight:600;font-size:.92rem; transition:transform .2s, box-shadow .2s; white-space:nowrap;line-height:1.2; } .btn-primary{background:var(--sindoor);color:#fff} .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow)} .btn-outline{border:1.5px solid var(--peacock);color:var(--peacock)} .btn-outline:hover{background:var(--peacock);color:#fff} .btn-gold{background:var(--gold);color:var(--ink)} .btn-instagram{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); color:#fff;box-shadow:0 8px 20px -8px rgba(214,36,159,.55); } .btn-instagram:hover{transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(214,36,159,.65)} .btn-lang{ background:transparent;border:1.5px solid var(--sindoor);color:var(--sindoor); padding:8px 16px;border-radius:20px;font-size:.85rem;font-family:'Tiro Bangla',serif; } .btn-lang:hover{background:var(--sindoor);color:#fff} .hamburger{display:none;flex-direction:column;gap:5px;background:none;padding:6px;z-index:250} .hamburger span{width:24px;height:2px;background:var(--ink);transition:transform .25s, opacity .25s} .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .hamburger.active span:nth-child(2){opacity:0} .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---------- Hero ---------- */ .hero{position:relative;height:100vh;min-height:680px;max-height:960px;overflow:hidden} .hero-slide{ position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease; } .hero-slide.active{opacity:1} .hero-slide img,.hero-slide video{width:100%;height:100%;object-fit:cover} .hero-overlay{ position:absolute;inset:0; background:linear-gradient(180deg,rgba(36,20,18,.35) 0%,rgba(36,20,18,.55) 100%); } .hero-content{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;color:#fff;padding:0 20px;z-index:5; } .hero-content .bn{color:var(--gold);margin-bottom:10px;font-size:1.15rem} .hero-content h1{font-size:clamp(2.3rem,5.5vw,4rem);color:#fff;max-width:820px;margin-bottom:14px} .hero-content p{font-size:1.15rem;color:#F0E9D8;margin-bottom:30px} .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;width:100%;max-width:520px} .hero-cta .btn{flex:1;min-width:200px;padding:14px 18px;white-space:nowrap} .hero-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:6} .hero-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45)} .hero-dots button.active{background:var(--gold);width:24px;border-radius:5px} /* Stats bar sits below the hero as its own section, not overlaid on the image. */ .hero-stats-bar{background:var(--peacock)} .hero-stats{ display:flex;justify-content:center;gap:60px;padding:28px 20px;color:#fff; } .hero-stats div{text-align:center} .hero-stats strong{display:block;font-family:'Fraunces',serif;font-size:1.6rem;color:var(--gold)} .hero-stats span{font-size:.8rem;letter-spacing:.03em;color:#E7E2D8} /* ---------- Portfolio gallery page (portfolio.html) ---------- */ /* Simpler than the main header — no hamburger/drawer, just logo + back link, sticky rather than fixed so no body-padding compensation is needed. */ .gallery-header{ position:sticky;top:0;z-index:245;background:rgba(251,246,236,.92);backdrop-filter:blur(8px); border-bottom:1px solid rgba(179,32,42,.12); } .gallery-header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:var(--maxw);margin:0 auto} .gallery-back-btn{padding:9px 18px;font-size:.85rem} .gallery-hero{ padding:64px 0 20px;text-align:center;position:relative;overflow:hidden; } .gallery-hero::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23B3202A' stroke-width='1.3'%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(0 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(60 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(120 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(180 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(240 75 75)'/%3E%3Cellipse cx='75' cy='58' rx='6' ry='17' transform='rotate(300 75 75)'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='5' fill='%23C89B3C' stroke='none'/%3E%3C/g%3E%3C/svg%3E"); background-size:150px 150px; } .gallery-hero .wrap{position:relative;z-index:1} .gallery-hero-stats{display:flex;justify-content:center;gap:50px;margin-top:26px;flex-wrap:wrap} .gallery-hero-stats div{text-align:center} .gallery-hero-stats strong{display:block;font-family:'Fraunces',serif;font-size:1.8rem;color:var(--sindoor)} .gallery-hero-stats span{font-size:.82rem;color:var(--ink-soft);letter-spacing:.03em} /* ---------- Category showcase: tabbed groups + pill cloud ---------- */ /* 90 categories won't fit in one grid without a huge scroll, so they're grouped into tabs — only one group's items show at a time. The TABS are genuinely clickable (they filter the view); the pills inside a group stay non-clickable (default cursor) — still just a showcase, not a gallery. */ .cat-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:32px} .cat-tab{ display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:30px; background:#fff;border:1.5px solid #E3D9C4;color:var(--ink-soft);font-weight:600;font-size:.88rem; transition:background .25s ease, color .25s ease, border-color .25s ease; } .cat-tab-icon{width:18px;height:18px;display:flex;flex-shrink:0} .cat-tab-icon svg{width:100%;height:100%} .cat-tab:hover:not(.active){border-color:var(--sindoor);color:var(--sindoor)} .cat-tab.active{background:var(--sindoor);border-color:var(--sindoor);color:#fff} .cat-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:900px;margin:0 auto} .cat-pill{ padding:10px 18px;border-radius:6px;background:#fff;border:1px solid #E3D9C4; font-size:.9rem;color:var(--ink);cursor:default; } /* ---------- Packages ---------- */ .pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .pkg-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border-top:3px solid var(--gold)} .pkg-card img{height:190px;width:100%} .pkg-body{padding:22px} .pkg-body h3{font-size:1.3rem;margin-bottom:4px} .pkg-price{color:var(--sindoor);font-weight:700;margin-bottom:14px} .pkg-body .btn{width:100%;justify-content:center} /* ---------- Portfolio masonry ---------- */ /* Cards ARE clickable here (unlike the category showcase) — click/tap pops the video or photo up larger; click/tap again shrinks it back in place. */ .portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .portfolio-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:pointer} .portfolio-card img,.portfolio-card video{height:260px;width:100%;object-fit:cover;display:block;transition:transform .5s} .portfolio-card:hover img,.portfolio-card:hover video{transform:scale(1.06)} .portfolio-card.is-expanded-source{visibility:hidden} .portfolio-info{position:absolute;left:0;right:0;bottom:0;padding:16px; background:linear-gradient(0deg,rgba(11,79,74,.92),transparent);color:#fff;pointer-events:none} .portfolio-info h4{color:#fff;font-size:1.05rem} .portfolio-info span{font-size:.82rem;color:var(--gold)} /* Play button badge — always visible on video cards so it's clear they're video, dims a little once actually playing so it doesn't fight the content. */ .video-play-badge{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:52px;height:52px;border-radius:50%;z-index:2;pointer-events:none; background:rgba(36,20,18,.55);display:flex;align-items:center;justify-content:center; transition:opacity .3s ease; } .portfolio-card.is-playing .video-play-badge{opacity:.4} /* Full gallery (portfolio.html) — masonry via CSS columns, not a uniform grid: photos/videos come in all shapes (vertical, horizontal, big, small), so each keeps its natural size instead of being cropped to a fixed box. */ .gallery-grid{display:block;column-count:3;column-gap:18px} .gallery-grid .portfolio-card{break-inside:avoid;margin-bottom:18px;width:100%} .gallery-grid .portfolio-card img,.gallery-grid .portfolio-card video{height:auto;object-fit:initial} /* Pop-up expand overlay: JS animates top/left/width/height from the clicked card's exact rect out to this centered size, then reverses on close. */ .portfolio-expand-scrim{ position:fixed;inset:0;background:rgba(20,16,14,0);z-index:500; opacity:0;pointer-events:none;transition:opacity .4s ease, background .4s ease; } .portfolio-expand-scrim.show{opacity:1;pointer-events:auto;background:rgba(20,16,14,.8)} .portfolio-expand{ position:fixed;z-index:501;overflow:hidden;border-radius:var(--radius); box-shadow:0 30px 70px rgba(0,0,0,.45);display:none;cursor:pointer; transition:top .48s cubic-bezier(.4,0,.2,1), left .48s cubic-bezier(.4,0,.2,1), width .48s cubic-bezier(.4,0,.2,1), height .48s cubic-bezier(.4,0,.2,1); } .portfolio-expand.active{display:block} .portfolio-expand img,.portfolio-expand video{width:100%;height:100%;object-fit:cover;display:block} .portfolio-expand-close{ position:absolute;top:12px;right:12px;z-index:3;width:36px;height:36px;border-radius:50%; background:rgba(0,0,0,.55);color:#fff;font-size:1.5rem;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background .2s ease; } .portfolio-expand-close:hover{background:var(--sindoor)} /* ---------- Process ---------- */ .process-row{display:flex;gap:0;flex-wrap:wrap;justify-content:center} .process-step{flex:1;min-width:190px;text-align:center;padding:0 18px;position:relative} .process-step .num{ width:52px;height:52px;border-radius:50%;border:2px solid var(--gold); display:flex;align-items:center;justify-content:center;margin:0 auto 16px; font-family:'Fraunces',serif;color:var(--gold);font-size:1.1rem; } .process-step h4{color:#fff;margin-bottom:8px;font-size:1.05rem} .process-step p{font-size:.88rem;color:#DCD5C6} /* ---------- Video testimonials ---------- */ /* These are landscape 16:9 YouTube uploads (verified against the source videos), not vertical Shorts — a 9:16 frame was stretching them badly. */ .video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .video-frame{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/9;border:3px solid var(--gold)} .video-frame iframe{width:100%;height:100%;border:0} /* ---------- Screenshot testimonials ---------- */ .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .review-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden} .review-card img{width:100%;display:block} /* ---------- Instagram grid ---------- */ /* Real Instagram posts via the official embed widget (script.js processes the .instagram-media blockquotes) — sizing/appearance of the post itself is native to Instagram, so no forced crop/frame/hover chrome here, just a scroll-triggered fade-up reveal on the wrapper. */ .insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start} /* On desktop this wrapper is invisible to layout — items act as direct grid children. On mobile (below) it becomes the sliding carousel strip. */ .insta-track{display:contents} .insta-item{ display:flex;justify-content:center; opacity:0;transform:translateY(28px); transition:opacity .6s ease, transform .6s ease; } /* Safety-net floor while Instagram's widget resizes its iframe via postMessage (briefly a fixed placeholder height before it settles to the real post size). */ .insta-item .instagram-media{min-height:420px} .insta-item.in-view{opacity:1;transform:translateY(0)} .insta-item:nth-child(1){transition-delay:0s} .insta-item:nth-child(2){transition-delay:.08s} .insta-item:nth-child(3){transition-delay:.16s} .insta-item:nth-child(4){transition-delay:.24s} .insta-item:nth-child(5){transition-delay:.32s} .insta-item:nth-child(6){transition-delay:.4s} /* Dots only appear when the carousel mode kicks in (see ≤600px below) */ .insta-dots{display:none;justify-content:center;gap:8px;margin-top:16px} .insta-dots button{width:8px;height:8px;border-radius:50%;background:rgba(179,32,42,.25);transition:background .3s ease, width .3s ease} .insta-dots button.active{background:var(--sindoor);width:22px;border-radius:5px} /* ---------- FAQ ---------- */ .faq-list{max-width:760px;margin:0 auto} .faq-item{border-bottom:1px solid rgba(36,31,27,.12)} .faq-q{ display:flex;justify-content:space-between;align-items:center; padding:20px 4px;font-weight:600;cursor:pointer;font-family:'Fraunces',serif;font-size:1.05rem; } .faq-q::after{content:"+";font-size:1.5rem;color:var(--sindoor);transition:transform .25s} .faq-item.open .faq-q::after{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;color:var(--ink-soft);font-size:.95rem} .faq-item.open .faq-a{max-height:300px;padding-bottom:18px} /* ---------- Booking form ---------- */ .booking-section{position:relative;overflow:hidden} .booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center} .booking-form{background:#fff;padding:36px;border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink)} /* .section-dark h3 (the enclosing booking section) sets a light/ivory color meant for the dark teal background — override it back to dark ink here since this card itself is white, or the heading is unreadable. */ .booking-form h3{margin-bottom:6px;color:var(--ink)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .form-row.full{grid-template-columns:1fr} input,select,textarea{ width:100%;padding:12px 14px;border:1.5px solid #DCD2BF;border-radius:var(--radius); font-family:inherit;font-size:.95rem;background:var(--ivory); } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sindoor)} label{font-size:.82rem;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:5px} .booking-form .btn{width:100%;justify-content:center;margin-top:18px;font-size:1rem;padding:14px} .form-note{font-size:.78rem;color:var(--ink-soft);margin-top:10px;text-align:center} .form-success{display:none;text-align:center;padding:40px 10px} .form-success.show{display:block} .form-success .bn{font-size:1.4rem;display:block;margin-bottom:8px} /* ---------- Footer ---------- */ footer{background:var(--ink);color:#E7E2D8;padding:70px 0 24px;position:relative;overflow:hidden} footer::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-width='1'%3E%3Cpath d='M50 10 90 50 50 90 10 50Z'/%3E%3Ccircle cx='50' cy='50' r='5'/%3E%3C/g%3E%3C/svg%3E"); background-size:100px 100px; } footer .wrap{position:relative;z-index:1} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px} footer h4{color:var(--gold);font-size:1rem;margin-bottom:16px} footer .brand-en{color:var(--gold)} footer .brand-bn{color:#E7E2D8} footer p{color:#B7AF9F;font-size:.9rem} footer ul{list-style:none} footer ul li{margin-bottom:9px} footer ul a{color:#D8D1C2;font-size:.92rem} footer ul a:hover{color:var(--gold)} .footer-address{color:#B7AF9F;font-size:.82rem;line-height:1.5;margin-top:4px} .footer-address strong{color:#D8D1C2;font-weight:600} .footer-social{display:flex;gap:12px;margin-top:14px} .footer-social a{width:36px;height:36px;border:1px solid #4A423B;border-radius:50%;display:flex;align-items:center;justify-content:center} .footer-social a:hover{background:var(--sindoor);border-color:var(--sindoor)} .footer-bottom{border-top:1px solid #3A332C;padding-top:22px;text-align:center;font-size:.82rem;color:#8A8175} /* ---------- Sticky action buttons ---------- */ /* Hidden until scrolled past the hero — the hero already has its own big CTA buttons, so showing the FAB bar too on first load is redundant clutter. */ .sticky-actions{ position:fixed;right:20px;bottom:22px;z-index:300;display:flex;flex-direction:column;align-items:flex-end;gap:12px; opacity:0;pointer-events:none;transform:translateY(12px); transition:opacity .3s ease, transform .3s ease; } .sticky-actions.show{opacity:1;pointer-events:auto;transform:translateY(0)} .fab{ width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,.28);color:#fff;font-size:1.5rem;position:relative; } .fab-whatsapp{background:#25D366} .fab-call{background:var(--sindoor)} .fab-quote{ background:var(--gold);color:var(--ink);border-radius:30px;width:auto;height:50px;padding:0 20px; font-weight:700;font-size:.9rem;white-space:nowrap;flex-shrink:0; } .fab:hover{transform:translateY(-3px)} /* ---------- Number picker modal ---------- */ .modal-overlay{ position:fixed;inset:0;background:rgba(36,20,18,.65);backdrop-filter:blur(3px); display:none;align-items:center;justify-content:center;z-index:400;padding:20px; } .modal-overlay.show{display:flex} .modal-box{background:var(--ivory);border-radius:var(--radius);max-width:420px;width:100%;padding:30px;position:relative;box-shadow:var(--shadow)} .modal-close{position:absolute;top:14px;right:16px;background:none;font-size:1.3rem;color:var(--ink-soft)} .modal-box h3{margin-bottom:4px} .modal-box .bn{display:block;margin-bottom:18px} .number-option{ display:flex;justify-content:space-between;align-items:center; padding:14px 16px;border:1.5px solid #E3D9C4;border-radius:var(--radius);margin-bottom:10px; } .number-option div strong{display:block;font-size:.95rem} .number-option div span{font-size:.82rem;color:var(--ink-soft)} .number-option .btn{padding:8px 16px;font-size:.82rem} /* ---------- Responsive ---------- */ /* ---------- Slide-in drawer (mobile/tablet nav) ---------- */ /* No dark scrim behind the drawer — background stays transparent, this is purely an invisible tap-outside-to-close hit area. */ .drawer-overlay{ position:fixed;inset:0;background:transparent;z-index:240; opacity:0;pointer-events:none; } .drawer-overlay.show{opacity:1;pointer-events:auto} .drawer-scrim-close{position:absolute;inset:0} /* Nav/drawer breakpoint is wider than the grid breakpoint below: the compact desktop header (brand + 6 links + lang/call/quote buttons) measures ~1150px and needs ~1200px of unbroken flex space to lay out on one line, so this triggers a bit above that with a safety margin — common 1280/1366/1440/1920 screens all get the full header; only narrower windows get the drawer. */ @media(max-width:1240px){ /* Only the language toggle stays in the header on mobile/tablet/laptop; Call and Get Free Quote move inside the drawer. */ .nav-cta .btn-outline, .nav-cta .btn-primary{display:none} .nav-links{ display:flex;flex-direction:column;gap:0;position:fixed; top:0;right:0;bottom:0;width:82%;max-width:340px; background: radial-gradient(circle at 85% 8%, rgba(179,32,42,.10), transparent 40%), radial-gradient(circle at 10% 92%, rgba(11,79,74,.12), transparent 45%), var(--ivory); padding:90px 26px 26px;overflow-y:auto;z-index:250; transform:translateX(105%); will-change:transform; transition:transform .42s cubic-bezier(.16,1,.3,1); box-shadow:-20px 0 40px rgba(0,0,0,.25); border-left:3px solid var(--gold); } .nav-links.open{transform:translateX(0)} /* Decorative crest filling the space above the brand name — a gold alpona lotus (padma) on a peacock-to-sindoor gradient, instead of blank ivory. */ .nav-links::before{ content:"";position:absolute;top:0;left:0;right:0;height:90px; background-color:var(--peacock); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23C89B3C' stroke-width='2'%3E%3Cellipse cx='40' cy='20' rx='7' ry='20' transform='rotate(0 40 40)'/%3E%3Cellipse cx='40' cy='20' rx='7' ry='20' transform='rotate(60 40 40)'/%3E%3Cellipse cx='40' cy='20' rx='7' ry='20' transform='rotate(120 40 40)'/%3E%3Cellipse cx='40' cy='20' rx='7' ry='20' transform='rotate(180 40 40)'/%3E%3Cellipse cx='40' cy='20' rx='7' ry='20' transform='rotate(240 40 40)'/%3E%3Cellipse cx='40' cy='20' rx='7' ry='20' transform='rotate(300 40 40)'/%3E%3C/g%3E%3Ccircle cx='40' cy='40' r='6' fill='%23FBF6EC'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--peacock) 0%, var(--sindoor-dark) 130%); background-repeat:no-repeat, no-repeat; background-position:center 48%, center; background-size:46px 46px, cover; border-bottom:3px solid var(--gold); } .drawer-brand{ display:block;position:relative;z-index:2;margin-bottom:22px;padding-bottom:18px; border-bottom:1px dashed rgba(179,32,42,.35); } .drawer-brand-logo{display:block;height:44px;width:auto;margin-bottom:10px} .drawer-brand .brand-en{font-size:1.3rem} .drawer-alpona{display:block;width:100%;height:16px;margin:2px 0 20px;opacity:.8} .nav-links li{border-bottom:1px solid rgba(36,31,27,.08);position:relative;z-index:2} .nav-links a{display:block;padding:15px 6px;font-size:1.08rem;font-family:'Fraunces',serif} .drawer-actions{display:flex;flex-direction:column;gap:12px;margin-top:22px;position:relative;z-index:2} .drawer-actions .btn{width:100%} .hamburger{display:flex} } @media(max-width:980px){ .pkg-grid{grid-template-columns:repeat(2,1fr)} .portfolio-grid{grid-template-columns:repeat(2,1fr)} .gallery-grid{column-count:2} .video-grid{grid-template-columns:repeat(2,1fr)} .review-grid{grid-template-columns:repeat(2,1fr)} .insta-grid{grid-template-columns:repeat(2,1fr);gap:18px} .booking-grid{grid-template-columns:1fr;gap:36px} .footer-grid{grid-template-columns:1fr 1fr} .hero-stats{gap:20px;flex-wrap:wrap;padding:14px} .hero-stats strong{font-size:1.3rem} } @media(max-width:600px){ .hero{height:88vh;min-height:520px} .brand-logo{height:32px} .brand-en{font-size:1.1rem} .cat-tabs{gap:8px;margin-bottom:24px} .cat-tab{padding:8px 14px;font-size:.82rem} .cat-pills{gap:8px} .cat-pill{padding:8px 14px;font-size:.85rem} .pkg-grid{grid-template-columns:1fr} .portfolio-grid{grid-template-columns:1fr} .gallery-grid{column-count:1} .video-grid{grid-template-columns:1fr} .review-grid{grid-template-columns:1fr} /* Below phone width, swap the grid for a one-at-a-time auto-advancing carousel (see script.js) instead of 3 rows of static tiles to scroll past. .insta-track is the sliding strip, explicitly transform-animated by JS rather than relying on native smooth-scroll for a clearer slide feel. */ .insta-grid{display:block;overflow:hidden} .insta-track{display:flex;flex-wrap:nowrap;transition:transform .5s cubic-bezier(.65,0,.35,1)} .insta-item{flex:0 0 100%;transition-delay:0s !important} .insta-dots{display:flex} .form-row{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr;gap:32px} .process-row{flex-direction:column;gap:30px} .section{padding:60px 0} .section-desc{margin-bottom:28px} .hero-content h1{font-size:1.9rem} .hero-content p{font-size:1rem} .hero-cta{flex-direction:column;width:100%;padding:0 20px} .hero-cta .btn{width:100%;justify-content:center} .booking-form{padding:24px} .sticky-actions{right:14px;bottom:14px} .fab-whatsapp,.fab-call{width:50px;height:50px} .fab-quote{height:44px;padding:0 16px;font-size:.82rem} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }