/* ========================================================================== Elite Residencies - Master Design System & Stylesheet ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --font-heading: 'Playfair Display', serif; --font-body: 'Montserrat', sans-serif; --font-accent: 'Poppins', sans-serif; --color-gold: #c59d5f; --color-gold-light: #e5c388; --color-gold-dark: #9e793e; --color-gold-glow: rgba(197, 157, 95, 0.3); /* Deep green from the brand logo. Light surfaces only - it is near-black against the dark theme. */ --brand-green: #08321f; /* Beach-theme canvas. Lives on :root because the scrollbar track is styled on , which is outside body.theme-beach and cannot see its vars. */ --beach-canvas: #f4f5f8; --color-dark-1: #0d0d0d; --color-dark-2: #161616; --color-dark-3: #222222; --color-dark-4: #2d2d2d; --color-light-1: #ffffff; --color-light-2: #f8f9fa; --color-text-muted: rgba(255, 255, 255, 0.82); --color-border: rgba(197, 157, 95, 0.25); --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.3); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.4); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.6); --shadow-gold: 0 8px 25px rgba(197, 157, 95, 0.25); --transition-fast: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); --transition-smooth: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } /* Global Reset & Base */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); background-color: var(--color-dark-1); color: var(--color-light-1); line-height: 1.65; overflow-x: hidden; } /* High Contrast Description Typography */ p { color: rgba(255, 255, 255, 0.88); } .text-muted { color: rgba(255, 255, 255, 0.82) !important; } .form-control-dark::placeholder { color: rgba(255, 255, 255, 0.6) !important; } a { text-decoration: none; color: inherit; transition: var(--transition-fast); } ul { list-style: none; } img { max-width: 100%; height: auto; display: block; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-dark-1); } ::-webkit-scrollbar-thumb { background: var(--color-gold-dark); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--color-gold); } /* Typography Helpers */ .font-heading { font-family: var(--font-heading); } .text-gold { color: var(--color-gold) !important; } .text-gold-light { color: var(--color-gold-light) !important; } .section-title-wrap { text-align: center; margin-bottom: 3.5rem; position: relative; } .sub-title { font-family: var(--font-accent); text-transform: uppercase; letter-spacing: 3px; font-size: 0.85rem; color: var(--color-gold); font-weight: 600; display: inline-block; margin-bottom: 0.5rem; } .main-title { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 700; color: var(--color-light-1); letter-spacing: -0.5px; } .gold-divider { width: 60px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); margin: 1rem auto 0 auto; } /* Enquiry forms ----------------------------------------------------------- The honeypot is a real, focusable input that people never see: bots fill every field they find, so a value here marks the submission as automated. It must not be display:none - some bots skip hidden fields. */ .form-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .form-status { margin-bottom: 1rem; padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid rgba(46, 160, 96, 0.4); background: rgba(46, 160, 96, 0.12); color: #7ddba4; font-family: var(--font-accent); font-size: 0.9rem; line-height: 1.5; } .form-status.is-error { border-color: rgba(214, 84, 84, 0.45); background: rgba(214, 84, 84, 0.12); color: #f0a2a2; } /* On the light theme the dark-surface greens/reds above wash out. */ .theme-beach .form-status { color: #1d6b3f; } .theme-beach .form-status.is-error { color: #a33131; } /* Luxury Buttons */ .btn-gold { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-dark-1) !important; font-family: var(--font-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 0.85rem 2rem; border-radius: 4px; border: 1px solid var(--color-gold); display: inline-block; box-shadow: var(--shadow-gold); transition: var(--transition-fast); cursor: pointer; } .btn-gold:hover { background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(197, 157, 95, 0.4); color: #000 !important; } .btn-gold-outline { background: transparent; color: var(--color-gold) !important; border: 1px solid var(--color-gold); font-family: var(--font-accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; padding: 0.8rem 1.8rem; border-radius: 4px; transition: var(--transition-fast); cursor: pointer; } .btn-gold-outline:hover { background: var(--color-gold); color: var(--color-dark-1) !important; transform: translateY(-3px); box-shadow: var(--shadow-gold); } /* Header CTA: the "Get Quote" button in the sticky header on every page. Keeps the rounded shape and white bold label, but takes its colour from the brand gold - a deep enough gold that white text still reads cleanly on it. */ .btn-header-cta { background: linear-gradient(135deg, #8a6528 0%, #6f4f1e 100%); color: #ffffff !important; font-family: var(--font-accent); font-weight: 700; font-size: 1rem; letter-spacing: 0.2px; line-height: 1.2; padding: 0.7rem 1.9rem; border: none; border-radius: 10px; box-shadow: 0 0 0 3px rgba(197, 157, 95, 0.45), 0 6px 16px rgba(110, 79, 30, 0.3); display: inline-block; cursor: pointer; transition: var(--transition-fast); } .btn-header-cta:hover { background: linear-gradient(135deg, #9e793e 0%, #7d5a23 100%); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 0 0 3px rgba(197, 157, 95, 0.65), 0 10px 22px rgba(110, 79, 30, 0.4); } .btn-header-cta:active { transform: translateY(0); box-shadow: 0 0 0 3px rgba(197, 157, 95, 0.45), 0 4px 10px rgba(110, 79, 30, 0.3); } /* CTA closing the services grid in the brand gold. */ .btn-designers { display: inline-block; background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: #ffffff !important; font-family: var(--font-accent); font-weight: 600; font-size: 1.05rem; line-height: 1.2; padding: 0.95rem 2rem; border: none; border-radius: 12px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; cursor: pointer; transition: var(--transition-fast); } .btn-designers:hover { background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 20px var(--color-gold-glow); } /* Branded page loader */ .site-loader { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; background: #f7f6f2; opacity: 1; visibility: visible; transition: opacity 0.65s ease, visibility 0.65s ease; } .site-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .site-loader__logo { position: relative; z-index: 1; width: min(145px, 44vw); height: auto; animation: loader-logo-pulse 1.4s ease-in-out infinite; } .site-loader__ring { position: absolute; width: 180px; height: 180px; max-width: 55vw; max-height: 55vw; border: 2px solid rgba(197, 157, 95, 0.22); border-top-color: var(--color-gold); border-radius: 50%; animation: loader-ring-spin 1.5s linear infinite; } .site-loader__text { color: var(--color-gold-dark); font-family: var(--font-accent); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; animation: loader-text-fade 1.4s ease-in-out infinite; } @keyframes loader-ring-spin { to { transform: rotate(360deg); } } @keyframes loader-logo-pulse { 0%, 100% { opacity: 0.72; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } } @keyframes loader-text-fade { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .site-loader__ring, .site-loader__logo, .site-loader__text { animation: none; } } /* Header contact drawer */ .contact-drawer-toggle { position: relative; z-index: 2; flex: 0 0 auto; width: 46px; height: 46px; display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); place-content: center; gap: 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; background: #20232c; box-shadow: 0 8px 24px rgba(0,0,0,.24); } .contact-drawer-toggle span { width: 4px; height: 4px; border-radius: 50%; background: #fff; } .contact-drawer-toggle:hover { background: var(--color-gold-dark); transform: scale(1.05); } .header-action-group { display: flex; align-items: center; flex: 0 0 auto; } .contact-drawer { position: fixed; top: 0; right: 0; z-index: 1060; width: min(390px, 100vw); height: 100dvh; overflow-y: auto; color: #fff; background: #191919; transform: translateX(100%); transition: transform .4s ease; box-shadow: -15px 0 40px rgba(0,0,0,.35); } .contact-drawer.is-open { transform: translateX(0); } .contact-drawer-backdrop { position: fixed; inset: 0; z-index: 1055; border: 0; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: .35s ease; } .contact-drawer-backdrop.is-open { opacity: 1; visibility: visible; } .contact-drawer-close { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; color: #fff; background: transparent; font-size: 1.2rem; } .contact-drawer-inner { padding: 82px 28px 36px; } .contact-drawer-item { padding: 30px 8px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.14); } .contact-drawer-item > i { color: var(--color-gold); font-size: 2.1rem; margin-bottom: 12px; } .contact-drawer-item h3, .contact-drawer-social h3 { color: #fff; font-family: var(--font-accent); font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; } .contact-drawer-item a { color: rgba(255,255,255,.9); line-height: 1.65; text-decoration: none; } .contact-drawer-item a:hover { color: var(--color-gold-light); } .contact-drawer-social { padding: 28px 8px; text-align: center; } .contact-drawer-social > div { display: flex; justify-content: center; gap: 14px; margin-top: 16px; } .contact-drawer-social a { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--color-gold); border-radius: 50%; color: var(--color-gold-light); } .contact-drawer-social a:hover { color: #191919; background: var(--color-gold); } body.contact-drawer-open { overflow: hidden; } @media (max-width: 991.98px) { .header-action-group { width: 100%; justify-content: flex-end; align-items: center; } .header-action-group .btn-header-cta { margin-right: auto; } .contact-drawer-toggle { display: inline-grid; margin: 1rem .25rem 0 0 !important; vertical-align: middle; } .calculator-header-trigger { display: inline-grid; margin: 1rem 0 0 .25rem !important; vertical-align: middle; } } /* Renovation before-and-after showcase */ .renovation-before-after { padding: 5rem 0; background: var(--beach-bg-alt, #f5f4f1); } .transformation-card { height: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(197,157,95,.45); border-radius: 14px; background: #fff; box-shadow: 0 14px 35px rgba(30,24,16,.08); } .transformation-image { position: relative; height: 380px; overflow: hidden; } .transformation-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .transformation-card:hover img { transform: scale(1.035); } .transformation-label { position: absolute; top: 18px; left: 18px; padding: .55rem 1.15rem; border-radius: 30px; color: #fff; background: rgba(24,20,15,.88); font-family: var(--font-accent); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .transformation-card figcaption { padding: 1.15rem 1.4rem; color: var(--beach-ink, #201b16); font-family: var(--font-heading); font-size: 1.3rem; font-weight: 600; } @media (max-width: 767.98px) { .renovation-before-after { padding: 3.5rem 0; } .transformation-image { height: 270px; } } .btn-designers:active { transform: translateY(0); box-shadow: none; } .btn-header-cta:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 4px; } /* ========================================================================== 1. Top Announcement Bar ========================================================================== */ .top-bar { background-color: #070707; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 0.825rem; padding: 0.5rem 0; color: var(--color-text-muted); } .top-bar i { color: var(--color-gold); margin-right: 6px; } /* Social icons sit at the right of the top bar. Spacing comes from the flex gap, so the shared 6px icon margin above is cleared here. */ .top-bar-social { display: inline-flex; align-items: center; gap: 16px; } .top-bar-social-link { color: inherit; text-decoration: none; line-height: 1; } .top-bar-social-link i { margin-right: 0; font-size: 0.95rem; transition: var(--transition-fast); } .top-bar-social-link:hover i { transform: translateY(-2px); opacity: 0.75; } .top-bar-link:hover { color: var(--color-gold); } /* ========================================================================== 2. Main Header / Navigation ========================================================================== */ .main-header { position: sticky; top: 0; z-index: 1000; background: rgba(18, 18, 18, 0.92); backdrop-filter: blur(15px); border-bottom: 1px solid var(--color-border); transition: var(--transition-fast); } .navbar-brand-wrapper { display: flex; align-items: center; gap: 12px; } .brand-emblem { min-width: 46px; height: 46px; padding: 0 8px; background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-dark-1); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; box-shadow: 0 4px 15px rgba(197, 157, 95, 0.3); flex-shrink: 0; letter-spacing: 0.5px; overflow: hidden; white-space: nowrap; } .brand-text { display: flex; flex-direction: column; } .brand-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700; color: var(--color-light-1); letter-spacing: 0.5px; line-height: 1.1; } .brand-subtitle { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 2px; color: var(--color-gold); font-weight: 600; white-space: nowrap; } /* Keep the logo block narrow enough for the nav to stay on one line */ @media (min-width: 992px) and (max-width: 1399.98px) { .brand-subtitle { font-size: 0.55rem; letter-spacing: 1px; } } /* Elite Residencies brand artwork. The source is 2048x542 (~3.78:1), so set the display height and allow the width to follow without distortion. */ .brand-logo { height: 52px; width: auto; max-width: 100%; display: block; } @media (min-width: 992px) and (max-width: 1399.98px) { .brand-logo { height: 44px; } } @media (max-width: 575.98px) { .brand-logo { height: 40px; } } .footer-brand-logo { height: 58px; width: auto; max-width: 100%; display: block; margin-bottom: 1rem; } .nav-link { font-family: var(--font-accent); font-size: 0.88rem; font-weight: 500; color: rgba(255, 255, 255, 0.85) !important; padding: 1rem 0.9rem !important; letter-spacing: 0.5px; transition: var(--transition-fast); position: relative; } .nav-link:hover, .nav-link.active { color: var(--color-gold) !important; } .nav-link::after { content: ''; position: absolute; bottom: 8px; left: 50%; width: 0; height: 2px; background: var(--color-gold); transition: var(--transition-fast); transform: translateX(-50%); } .nav-link:hover::after, .nav-link.active::after { width: 60%; } /* Breathing room between the desktop menu items. Spaces the list rather than padding the links, so the hover underline stays tied to the label width. Tightened between 992-1400px, where the nav has least room to spare. */ @media (min-width: 992px) { .navbar-nav { gap: 0.85rem; } } @media (min-width: 992px) and (max-width: 1399.98px) { .navbar-nav { gap: 0.35rem; } } .dropdown-menu-dark { background-color: var(--color-dark-2); border: 1px solid var(--color-border); box-shadow: var(--shadow-md); border-radius: 6px; padding: 0.5rem 0; } .dropdown-item { color: rgba(255, 255, 255, 0.8); font-size: 0.85rem; padding: 0.6rem 1.25rem; transition: var(--transition-fast); } .dropdown-item:hover { background: rgba(197, 157, 95, 0.15); color: var(--color-gold); } /* -------------------------------------------------------------------------- Services Mega Menu The parent
  • goes position:static so the panel can span the full navbar instead of hanging off the link. The toggle carries data-bs-display="static" so Bootstrap skips Popper and our own top/left/right rules win. -------------------------------------------------------------------------- */ .nav-item.mega-parent { position: static; } .mega-menu { top: 100%; left: 0; right: 0; width: 100%; margin-top: 0; padding: 1.75rem 0; background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 0 0 14px 14px; box-shadow: var(--shadow-md); } .mega-menu-grid { display: grid; grid-template-columns: repeat(6, 1fr); } .mega-item { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 0.5rem 0.75rem; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.07); transition: var(--transition-fast); } .mega-item:last-child { border-right: none; } /* Circular photo thumbnails - swap the src to change a service image. Source files should be square crops (240x240 or larger) so the circular mask doesn't cut anything important. */ .mega-icon { width: 118px; height: 118px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: rgba(197, 157, 95, 0.12); border: 2px solid var(--color-border); transition: var(--transition-fast); } .mega-icon img { width: 100%; height: 100%; object-fit: cover; display: block; transition: var(--transition-smooth); } .mega-label { font-family: var(--font-accent); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: rgba(255, 255, 255, 0.85); transition: var(--transition-fast); } .mega-item:hover .mega-icon { border-color: var(--color-gold); transform: translateY(-4px); box-shadow: 0 10px 26px rgba(197, 157, 95, 0.35); } .mega-item:hover .mega-icon img { transform: scale(1.08); } .mega-item:hover .mega-label { color: var(--color-gold); } /* Collapsed navbar: the panel becomes part of the stacked menu */ @media (max-width: 991.98px) { .mega-menu { padding: 1.25rem 0.5rem; border-radius: 10px; } .mega-menu > .container { padding: 0; } .mega-menu-grid { grid-template-columns: repeat(3, 1fr); row-gap: 1.5rem; } .mega-item { border-right: none; gap: 0.6rem; } .mega-icon { width: 92px; height: 92px; } .mega-label { font-size: 0.72rem; } } @media (max-width: 575.98px) { .mega-menu-grid { grid-template-columns: repeat(2, 1fr); } .mega-icon { width: 84px; height: 84px; } } /* ========================================================================== 3. Hero Carousel Slider ========================================================================== */ .hero-section { position: relative; overflow: hidden; } .hero-slider .swiper-slide { height: 85vh; min-height: 550px; position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; align-items: center; } .hero-slider .hero-slide-kitchen { background-position: center center; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(13,13,13,0.5) 0%, rgba(13,13,13,0.2) 50%, rgba(13,13,13,0.7) 100%); } .hero-content { position: relative; z-index: 10; max-width: 750px; } .hero-badge { background: rgba(197, 157, 95, 0.2); border: 1px solid var(--color-gold); color: var(--color-gold-light); padding: 6px 16px; border-radius: 50px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; display: inline-block; margin-bottom: 1.25rem; backdrop-filter: blur(5px); } .hero-title { font-family: var(--font-heading); font-size: 3.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem; color: #ffffff; text-shadow: 0 4px 20px rgba(0,0,0,0.5); } .hero-desc { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 2rem; font-weight: 300; } .swiper-button-next, .swiper-button-prev { color: var(--color-gold) !important; width: 50px; height: 50px; background: rgba(22, 22, 22, 0.7); border: 1px solid var(--color-border); border-radius: 50%; backdrop-filter: blur(5px); transition: var(--transition-fast); } .swiper-button-next:hover, .swiper-button-prev:hover { background: var(--color-gold); color: var(--color-dark-1) !important; } .swiper-button-next::after, .swiper-button-prev::after { font-size: 1.2rem !important; } .swiper-pagination-bullet { background: #ffffff !important; opacity: 0.4; } .swiper-pagination-bullet-active { background: var(--color-gold) !important; opacity: 1; width: 24px; border-radius: 4px; } /* ========================================================================== 4. Consultation CTA Strip ========================================================================== */ /* Full-bleed banner: interior photo across the whole strip, with a dark brown slab laid over the left half to carry the headline and button. */ .cta-strip { position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: center; background: #271f14 url("../images/cta-interior.jpg") no-repeat right center; /* Source is 960x300 and the strip is 300 tall, so matching the height renders the photo at 1:1 and the whole room stays visible. `cover` would scale it ~2x on a desktop-width strip and crop away everything but the right half. */ background-size: auto 100%; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } /* Past ~2200px the 960-wide photo no longer reaches the slab, which would leave a flat brown band between the curve and the image - scale it up instead. */ @media (min-width: 2200px) { .cta-strip { background-size: cover; } } /* The slab's right corners take a 48px horizontal radius against a vertical radius of 50%, so the two arcs meet at mid-height and read as a single shallow half-ellipse bulging right - the curve in the approved design. */ .cta-strip::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 52%; background: #271f14; border-radius: 0 48px 48px 0 / 0 50% 50% 0; } .cta-strip > .container { position: relative; z-index: 1; } /* Held clear of the curve so the headline never crosses the arc. The centred .container starts further right as the viewport grows while the slab is a flat 52%, so a fixed max-width overruns the arc around 992-1199px - tie the cap to the viewport instead. */ .cta-strip-content { max-width: min(520px, 34vw); } .cta-strip-title { /* Sans, not the Playfair used by section headings - matches the approved banner artwork, where the headline is set in the geometric sans. */ font-family: var(--font-accent); font-size: clamp(1.5rem, 2.9vw, 2.75rem); font-weight: 400; line-height: 1.2; color: #ffffff; margin: 0 0 0.85rem 0; } /* Supporting line under the headline. Kept well below the title size - at the headline's clamp it would wrap to three lines and push the button past the 300px strip. Colour is hardcoded light like the title: the slab is dark in both themes, so there is no .theme-beach pair to add. */ .cta-strip-sub { font-family: var(--font-body); font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1.55; color: rgba(255, 255, 255, 0.85); margin: 0 0 1.75rem 0; } .cta-strip-btn { display: inline-flex; align-items: center; padding: 0.75rem 1.9rem; background: #745320; border: 2px solid #9c691a; border-radius: 10px; color: #f4efe8; font-family: var(--font-accent); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: var(--transition-fast); } .cta-strip-btn:hover, .cta-strip-btn:focus { background: var(--color-gold); border-color: var(--color-gold); color: #1a1a1a; transform: translateY(-2px); } @media (max-width: 991.98px) { .cta-strip { min-height: 250px; } .cta-strip::before { width: 72%; border-radius: 0 38px 38px 0 / 0 50% 50% 0; } } /* Too narrow to hold a slab and a photo side by side - let the slab cover the full width and sit the copy on top of the dimmed photo instead. */ @media (max-width: 767.98px) { .cta-strip { min-height: 0; padding: 3rem 0; text-align: center; } .cta-strip::before { width: 100%; border-radius: 0; background: rgba(39, 31, 20, 0.88); } .cta-strip-content { max-width: none; } .cta-strip-title br { display: none; } } /* ========================================================================== 5. Key Value Highlights Grid (6 Pillars) ========================================================================== */ .value-highlights { /* Tighter than the 6rem section rhythm elsewhere: this is a thin trust strip between the hero and the About block, not a full section. */ padding: 2.5rem 0; background: var(--color-dark-2); } /* Deliberately surface-less: the box sits directly on the section canvas, so the icon medallion carries the visual weight instead of a card. Nothing here may paint a background or shadow - either would redraw the card edge. */ .feature-box { background: transparent; border: none; /* Only side padding matters now there is no card - vertical padding here just stacks on top of the section's own and deepens the strip. */ padding: 0.75rem 1.5rem; text-align: center; transition: var(--transition-fast); height: 100%; } .feature-box:hover { transform: translateY(-8px); } .feature-icon-wrap { width: 86px; height: 86px; background: rgba(197, 157, 95, 0.16); border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem auto; color: var(--color-gold); font-size: 2.15rem; transition: var(--transition-fast); } .feature-box:hover .feature-icon-wrap { background: var(--color-gold); color: var(--color-dark-1); box-shadow: 0 0 20px rgba(197, 157, 95, 0.4); } .feature-title { font-family: var(--font-accent); font-size: 0.95rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-light-1); } /* ========================================================================== 6. About Section ========================================================================== */ .about-section { padding: 6rem 0; background: var(--color-dark-1); } .about-text-content { padding-right: 2rem; } .about-heading { font-family: var(--font-heading); font-size: 2.5rem; margin-bottom: 1rem; line-height: 1.2; } /* Short accent rule under the About heading. Left-aligned counterpart to the centred .gold-divider the other sections use. */ .about-divider { width: 64px; height: 4px; background: var(--color-gold); border-radius: 2px; margin-bottom: 1.35rem; } .about-highlight { font-size: 1rem; color: inherit; font-style: normal; font-weight: 400; margin-bottom: 1.5rem; } .about-desc { color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; margin-bottom: 2rem; } .about-carousel-frame { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); } .about-carousel img { border-radius: 12px; height: 420px; object-fit: cover; } /* ========================================================================== 6b. Design Categories ("Let's Design Your Abode") A quiet row of line-art categories that sits between About and Services. Icons are inline SVG so they inherit currentColor and stay crisp at any size. ========================================================================== */ .abode-section { padding: 5rem 0; background: var(--color-dark-1); } .abode-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; } .abode-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; padding: 1rem 0.5rem; } .abode-icon { color: var(--color-gold); transition: var(--transition-fast); } .abode-icon svg { display: block; width: 76px; height: 76px; } .abode-item:hover .abode-icon { color: var(--color-gold-light); transform: translateY(-4px); } .abode-label { font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; color: var(--color-light-1); line-height: 1.35; } @media (max-width: 991.98px) { .abode-grid { grid-template-columns: repeat(3, 1fr); } .abode-icon svg { width: 64px; height: 64px; } } @media (max-width: 575.98px) { .abode-section { padding: 3.5rem 0; } .abode-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } .abode-icon svg { width: 56px; height: 56px; } .abode-label { font-size: 0.85rem; } } /* ========================================================================== 7. Core Services Grid ========================================================================== */ .services-section { padding: 6rem 0; background: var(--color-dark-2); } .service-card { background: var(--color-dark-3); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; overflow: hidden; transition: var(--transition-fast); height: 100%; display: flex; flex-direction: column; } .service-card:hover { transform: translateY(-8px); border-color: var(--color-gold); box-shadow: var(--shadow-md); } .service-img-wrapper { position: relative; overflow: hidden; height: 220px; } .service-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .service-card:hover .service-img-wrapper img { transform: scale(1.08); } .service-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .service-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--color-light-1); } .service-desc { color: rgba(255, 255, 255, 0.88); font-size: 0.9rem; margin-bottom: 1.5rem; flex-grow: 1; } .service-btn-link { color: var(--color-gold); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; display: inline-flex; align-items: center; gap: 8px; } .service-btn-link:hover { color: var(--color-gold-light); gap: 12px; } /* ========================================================================== 8. Design to Delivery Process (4 Steps) ========================================================================== */ .process-section { /* Tighter than the 6rem section rhythm: the steps are a compact icon row, not a full content block, so the default padding left it floating. */ padding: 3rem 0; background: var(--color-dark-1); } /* Steps read as a row of illustration medallions with a caption underneath - no card, no border, no shadow. The circle is the only surface. */ .process-step { position: relative; } .process-card { height: 100%; display: flex; flex-direction: column; align-items: center; background: transparent; border: none; /* Side padding only - vertical padding here just stacks on the section's. */ padding: 0 0.75rem; text-align: center; transition: var(--transition-fast); } .process-card:hover { transform: translateY(-6px); } .process-icon { width: 168px; height: 168px; max-width: 100%; margin-bottom: 1.4rem; display: grid; place-items: center; font-size: 3.6rem; color: var(--color-gold); /* Neutral tint rather than a gold wash, so the glyph carries the colour */ background: rgba(255, 255, 255, 0.07); border-radius: 50%; transition: var(--transition-fast); } .process-card:hover .process-icon { transform: scale(1.04); } /* Illustrated step: the artwork carries its own green disc and gold ring, so the tinted circle behind it is dropped. */ .process-icon-img { background: none; padding: 0; } .process-icon-img img { display: block; width: 100%; height: 100%; object-fit: contain; } .process-title { font-family: var(--font-accent); font-size: 0.92rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.4; color: var(--color-light-1); margin: 0; } @media (max-width: 991.98px) { .process-icon { width: 140px; height: 140px; font-size: 3rem; } } @media (max-width: 575.98px) { .process-icon { width: 116px; height: 116px; font-size: 2.4rem; margin-bottom: 1rem; } .process-title { font-size: 0.8rem; } } /* ========================================================================== 9. Interactive Room Gallery / Space Showcase ========================================================================== */ .gallery-section { padding: 6rem 0; background: var(--color-dark-2); } .gallery-filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 3rem; } .filter-btn { background: var(--color-dark-3); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); padding: 0.5rem 1.25rem; border-radius: 50px; font-size: 0.85rem; cursor: pointer; transition: var(--transition-fast); } .filter-btn:hover, .filter-btn.active { background: var(--color-gold); color: var(--color-dark-1); border-color: var(--color-gold); font-weight: 600; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; height: 280px; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .gallery-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(13, 13, 13, 0.9) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; opacity: 0.9; transition: var(--transition-fast); } .gallery-item:hover img { transform: scale(1.1); } .gallery-item:hover .gallery-overlay { opacity: 1; background: linear-gradient(180deg, rgba(197, 157, 95, 0.2) 0%, rgba(13, 13, 13, 0.95) 100%); } .gallery-cat { font-size: 0.75rem; color: var(--color-gold); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; } .gallery-title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-light-1); margin-top: 4px; } /* ========================================================================== 10. Customer Spotlight & Accordion ========================================================================== */ .testimonial-accordion-section { padding: 6rem 0; background: var(--color-dark-1); } /* Feature image standing in for the old spotlight card. Height is set by the accordion in the adjacent column, so the photo crops to fill whatever that comes to - hence object-fit rather than a fixed ratio. */ .spotlight-media { /* Squared and top-aligned rather than stretched to the row. Matching the row meant the accordion opening a panel blew the photo up with it. */ aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); } .spotlight-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .spotlight-card { background: var(--color-dark-3); border: 1px solid var(--color-border); border-radius: 12px; padding: 2.5rem; box-shadow: var(--shadow-md); height: 100%; } .spotlight-quote { font-size: 1rem; font-style: italic; color: rgba(255, 255, 255, 0.85); margin-bottom: 2rem; line-height: 1.7; } .spotlight-client { display: flex; align-items: center; gap: 15px; } .spotlight-avatar { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--color-gold); object-fit: cover; } .spotlight-name { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; } .spotlight-role { font-size: 0.8rem; color: var(--color-gold); } .spotlight-stars { color: #fb8e28; font-size: 0.9rem; margin-top: 4px; } /* .main-title is centred everywhere else because it lives inside .section-title-wrap. Here it sits in a left-aligned column instead. */ .testimonial-accordion-section .main-title { text-align: left; font-size: 2.25rem; } .spotlight-lede { font-family: var(--font-accent); font-size: 1.05rem; color: var(--color-gold-light); margin: 0.75rem 0 2rem; } /* Custom Accordion */ .custom-accordion .accordion-item { background: var(--color-dark-3); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px !important; margin-bottom: 1rem; overflow: hidden; } .custom-accordion .accordion-button { background: var(--color-dark-3); color: var(--color-light-1); font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; padding: 1.25rem 1.5rem; box-shadow: none !important; } .custom-accordion .accordion-button:not(.collapsed) { background: rgba(197, 157, 95, 0.1); color: var(--color-gold); } .custom-accordion .accordion-button::after { filter: invert(1) sepia(1) saturate(5) hue-rotate(5deg); } .custom-accordion .accordion-body { color: rgba(255, 255, 255, 0.88); font-size: 0.95rem; line-height: 1.6; padding: 1.25rem 1.5rem; } /* ========================================================================== 11. Video Walkthrough Showcase ========================================================================== */ .video-section { padding: 6.5rem 0; background: var(--color-dark-2); border-top: 1px solid rgba(197, 157, 95, 0.15); border-bottom: 1px solid rgba(197, 157, 95, 0.15); } .video-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-md); background: var(--color-dark-3); position: relative; transition: var(--transition-fast); height: 250px; } .video-card:hover { border-color: var(--color-gold); transform: translateY(-6px); box-shadow: var(--shadow-gold); } .video-card video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; background: rgba(13, 13, 13, 0.7); border: 2px solid var(--color-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-gold); font-size: 1.2rem; pointer-events: none; transition: var(--transition-fast); backdrop-filter: blur(4px); z-index: 5; } .video-card:hover .video-play-overlay { background: var(--color-gold); color: var(--color-dark-1); transform: translate(-50%, -50%) scale(1.1); } .video-caption { position: absolute; bottom: 0; left: 0; width: 100%; padding: 1rem; background: linear-gradient(180deg, transparent 0%, rgba(13, 13, 13, 0.95) 100%); color: var(--color-light-1); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 600; text-align: center; z-index: 5; } /* ========================================================================== 12. Google Reviews & Motivation ========================================================================== */ .reviews-section { padding: 6.5rem 0; background: var(--color-dark-1); } .google-badge-box { background: var(--color-dark-2); border: 1px solid var(--color-gold); border-radius: 14px; padding: 1.5rem 2.25rem; display: inline-flex; align-items: center; gap: 20px; margin-bottom: 3.5rem; box-shadow: var(--shadow-md); } .google-score { font-size: 2.4rem; font-weight: 800; color: var(--color-gold); line-height: 1; } .google-stars-wrap i { color: #fb8e28; font-size: 1.15rem; } .reviews-carousel { padding-bottom: 55px !important; position: relative; } .reviews-carousel .swiper-wrapper { align-items: stretch; } .reviews-carousel .swiper-slide { height: auto; display: flex; flex-direction: column; } .review-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; padding: 2.25rem 1.85rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; transition: var(--transition-fast); box-shadow: var(--shadow-md); } .review-card:hover { border-color: var(--color-gold); transform: translateY(-6px); box-shadow: var(--shadow-gold); } .review-header { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; } .review-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, rgba(197, 157, 95, 0.2) 0%, rgba(197, 157, 95, 0.08) 100%); border: 1px solid var(--color-gold); color: var(--color-gold); font-weight: 700; font-size: 0.95rem; } .review-author { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-light-1); } .review-date { font-size: 0.78rem; color: var(--color-text-muted); } .review-text { color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; line-height: 1.65; margin-bottom: 0; flex-grow: 1; } .reviews-pagination { position: absolute; bottom: 10px !important; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 6px; z-index: 10; } .reviews-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background: rgba(255, 255, 255, 0.25) !important; opacity: 1; margin: 0 4px !important; transition: var(--transition-fast); } .reviews-pagination .swiper-pagination-bullet-active { background: var(--color-gold) !important; width: 28px; border-radius: 6px; } /* ========================================================================== 13. Brand Partners Logo Carousel ========================================================================== */ .brand-partners-section { padding: 4.5rem 0; background: var(--color-dark-2); border-top: 1px solid rgba(255, 255, 255, 0.05); } .brand-logo-item { background: var(--color-dark-3); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 1.5rem; height: 90px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .brand-logo-item:hover { border-color: var(--color-gold); transform: translateY(-3px); } .brand-logo-item img { max-height: 45px; max-width: 80%; filter: grayscale(100%) brightness(1.5); opacity: 0.65; transition: var(--transition-fast); } .brand-logo-item:hover img { filter: grayscale(0%) brightness(1); opacity: 1; } /* ========================================================================== 14. Quote Modal & Floating Contact Widgets ========================================================================== */ .modal-content-dark { background: var(--color-dark-2); border: 1px solid var(--color-border); color: var(--color-light-1); border-radius: 12px; } .modal-header-dark { border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 1.5rem; } .modal-title-dark { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-gold); } .form-control-dark { background: var(--color-dark-3); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff !important; padding: 0.75rem 1rem; border-radius: 6px; } .form-control-dark:focus { background: var(--color-dark-4); border-color: var(--color-gold); box-shadow: 0 0 10px rgba(197, 157, 95, 0.3); } .floating-sidebar { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 999; display: flex; flex-direction: column; gap: 6px; } .floating-tab { background: var(--color-dark-2); border: 1px solid var(--color-border); border-left: none; border-radius: 0 8px 8px 0; padding: 10px 14px; color: var(--color-light-1); display: flex; align-items: center; gap: 10px; font-size: 0.85rem; box-shadow: var(--shadow-md); transition: var(--transition-fast); cursor: pointer; } .floating-tab:hover { background: var(--color-gold); color: var(--color-dark-1); transform: translateX(5px); } .floating-tab i { font-size: 1.1rem; color: var(--color-gold); } .floating-tab:hover i { color: var(--color-dark-1); } /* Collapse the tabs to icons before they can reach the page container */ @media (max-width: 1600px) { .floating-sidebar .floating-tab span { display: none; } .floating-tab { padding: 12px; border-radius: 0 10px 10px 0; } } /* Below this the container is too narrow to clear the tabs - use the WhatsApp quick-action button instead (see .wa-float) */ @media (max-width: 1299.98px) { .floating-sidebar { display: none; } } /* ========================================================================== 15. Comprehensive Footer ========================================================================== */ .main-footer { background: #090909; border-top: 1px solid var(--color-border); padding: 6rem 0 2.5rem 0; margin-top: 4rem; color: rgba(255, 255, 255, 0.88); font-size: 0.9rem; } .footer-widget-title { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-light-1); margin-bottom: 1.5rem; position: relative; padding-bottom: 10px; } .footer-widget-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 2px; background: var(--color-gold); } .footer-links li { margin-bottom: 0.75rem; } .footer-links a:hover { color: var(--color-gold); padding-left: 5px; } .social-links { display: flex; gap: 12px; } .social-btn { width: 40px; height: 40px; background: var(--color-dark-3); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-gold); transition: var(--transition-fast); } .social-btn:hover { background: var(--color-gold); color: var(--color-dark-1); transform: translateY(-3px); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.06); margin-top: 3.5rem; padding-top: 1.5rem; font-size: 0.825rem; color: var(--color-text-muted); } /* Legal line: one row with gold pipes on desktop, a centred stack on phones (the separators are decorative, so they are dropped once it wraps) */ .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; column-gap: 8px; row-gap: 4px; } .footer-sep { color: var(--color-gold); opacity: 0.55; } .footer-tagline { white-space: nowrap; } /* The credit link carries the gold accent rather than the browser default, which would land as blue on the light footer. */ .footer-tagline a { color: var(--color-gold); text-decoration: none; transition: var(--transition-fast); } .footer-tagline a:hover, .footer-tagline a:focus { color: var(--color-gold-dark); text-decoration: underline; } /* Licence attribution line - deliberately quiet, but it must stay visible for the CC BY wardrobe photographs to be used legitimately. */ .footer-credits { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); font-size: 0.72rem; line-height: 1.6; opacity: 0.72; } .footer-credits a { color: inherit; text-decoration: underline; } @media (max-width: 767.98px) { .footer-legal { flex-direction: column; justify-content: center; text-align: center; row-gap: 6px; } .footer-sep { display: none; } .footer-tagline { white-space: normal; text-align: center; } } /* Responsive Media Queries */ @media (max-width: 991.98px) { .hero-title { font-size: 2.5rem; } .main-title { font-size: 2rem; } .about-text-content { padding-right: 0; margin-bottom: 2rem; } } @media (max-width: 767.98px) { .hero-slider .swiper-slide { height: 70vh; } .hero-slider .hero-slide-kitchen { background-position: 62% center; } .hero-title { font-size: 2rem; } .floating-sidebar { display: none; } } /* ========================================================================== 16. About Us Dedicated Page Styling ========================================================================== */ .about-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 420px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.75) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/hero_bg.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6rem 1rem 4rem 1rem; border-bottom: 1px solid var(--color-border); } .about-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 150px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .breadcrumb-custom { display: inline-flex; align-items: center; gap: 10px; background: rgba(22, 22, 22, 0.7); padding: 8px 22px; border-radius: 30px; border: 1px solid var(--color-border); font-size: 0.85rem; color: var(--color-gold-light); margin-bottom: 1.5rem; backdrop-filter: blur(10px); } .breadcrumb-custom a { color: var(--color-light-1); } .breadcrumb-custom a:hover { color: var(--color-gold); } /* Intro Section & Counters */ .about-intro-img-wrapper { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); } .about-intro-img-wrapper img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; transition: var(--transition-smooth); } .about-intro-img-wrapper:hover img { transform: scale(1.03); } .experience-badge { position: absolute; bottom: 25px; right: 25px; background: linear-gradient(135deg, var(--color-dark-2) 0%, var(--color-dark-3) 100%); border: 1px solid var(--color-gold); padding: 1.25rem 2rem; border-radius: 10px; box-shadow: var(--shadow-gold); text-align: center; } .experience-badge .badge-num { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 700; color: var(--color-gold); line-height: 1; } .experience-badge .badge-text { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-light-1); margin-top: 5px; } .counter-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.5rem; text-align: center; transition: var(--transition-fast); } .counter-card:hover { border-color: var(--color-gold); transform: translateY(-5px); box-shadow: var(--shadow-gold); } .counter-num { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; color: var(--color-gold); } .counter-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-muted); margin-top: 4px; } /* Highlight card (in-house capability / management) */ .association-card { background: linear-gradient(135deg, rgba(22, 22, 22, 0.9) 0%, rgba(34, 34, 34, 0.8) 100%); border: 1px solid var(--color-gold); border-radius: 16px; padding: 3rem 2.5rem; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); } .association-card::before { content: ''; position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); } .association-logo-box { background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--color-gold); padding: 1.5rem 2.5rem; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; } #in-house { padding-top: 5rem !important; padding-bottom: 5.5rem !important; margin-top: 2rem; margin-bottom: 3rem; } /* Vision & Mission Cards Section */ #vision-mission { padding-top: 6rem !important; padding-bottom: 6.5rem !important; margin-top: 3rem; margin-bottom: 4rem; border-top: 1px solid rgba(197, 157, 95, 0.12); border-bottom: 1px solid rgba(197, 157, 95, 0.12); } .vm-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 2.5rem 2rem; height: 100%; position: relative; transition: var(--transition-fast); } .vm-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .vm-icon-box { width: 65px; height: 65px; background: linear-gradient(135deg, rgba(197, 157, 95, 0.15) 0%, rgba(197, 157, 95, 0.05) 100%); border: 1px solid var(--color-gold); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--color-gold); margin-bottom: 1.5rem; } /* Team Section */ #team { padding-top: 6.5rem !important; padding-bottom: 6.5rem !important; margin-top: 3rem; margin-bottom: 4rem; } .team-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; transition: var(--transition-fast); height: 100%; } .team-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .team-img-wrapper { position: relative; width: 100%; height: 320px; overflow: hidden; } .team-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .team-card:hover .team-img-wrapper img { transform: scale(1.08); } .team-role-badge { position: absolute; top: 15px; right: 15px; background: rgba(13, 13, 13, 0.85); border: 1px solid var(--color-gold); color: var(--color-gold); padding: 5px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .team-content { padding: 1.75rem; text-align: center; } .team-name { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-light-1); margin-bottom: 4px; } .team-title { font-size: 0.85rem; color: var(--color-gold-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; } .team-social { display: flex; justify-content: center; gap: 10px; margin-top: 1rem; } .team-social a { width: 34px; height: 34px; background: var(--color-dark-3); border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-gold); font-size: 0.85rem; transition: var(--transition-fast); } .team-social a:hover { background: var(--color-gold); color: var(--color-dark-1); } .team-showcase-banner { background: linear-gradient(135deg, var(--color-dark-3) 0%, var(--color-dark-2) 100%); border: 1px solid var(--color-border); border-radius: 16px; padding: 2.5rem; text-align: center; margin-top: 3rem; } /* Why Choose Elite Residencies Cards */ .why-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 2.5rem 2rem; height: 100%; position: relative; transition: var(--transition-fast); } .why-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .why-num { font-family: var(--font-heading); font-size: 2.75rem; font-weight: 800; background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 1.25rem; } .why-title { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-light-1); margin-bottom: 0.75rem; } .why-desc { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; } /* Brand Partners Grid */ #brand-partners { padding-top: 6rem !important; padding-bottom: 6rem !important; margin-top: 2rem; margin-bottom: 3rem; border-top: 1px solid rgba(197, 157, 95, 0.15); border-bottom: 1px solid rgba(197, 157, 95, 0.15); } .partner-logo-item { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 10px; padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: center; height: 90px; transition: var(--transition-fast); color: var(--color-gold); font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; margin-bottom: 0.5rem; } .partner-logo-item:hover { border-color: var(--color-gold); background: var(--color-dark-3); transform: scale(1.05); box-shadow: var(--shadow-gold); } /* Newsletter CTA Section Spacing */ #newsletter { padding-top: 6rem !important; padding-bottom: 6rem !important; margin-top: 3rem; margin-bottom: 4rem; } .newsletter-cta-box { background: linear-gradient(135deg, rgba(22, 22, 22, 0.95) 0%, rgba(34, 34, 34, 0.95) 100%), url('../images/hero_bg.jpg') center/cover no-repeat; border: 1px solid var(--color-gold); border-radius: 20px; padding: 5rem 3rem; margin: 2rem 0; box-shadow: var(--shadow-lg); } /* -------------------------------------------------------------------------- Split Call-To-Action Banner Photo fills the whole banner; the copy sits on a dark panel whose right edge is an ellipse, so the image shows through the curve. -------------------------------------------------------------------------- */ .cta-banner { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); background: var(--color-dark-2); } .cta-banner-media { position: absolute; inset: 0; } .cta-banner-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .cta-banner-panel { position: relative; z-index: 2; width: 60%; min-height: 330px; padding: 3rem 7.5rem 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(115deg, #13100c 0%, #221b12 60%, #2e2517 100%); border-radius: 0 14% 14% 0 / 0 50% 50% 0; } .cta-banner-title { font-family: var(--font-heading); font-size: 2.35rem; font-weight: 700; line-height: 1.18; color: var(--color-light-1); margin-bottom: 0.75rem; } .cta-banner-sub { font-family: var(--font-accent); font-size: 1.1rem; font-weight: 300; color: rgba(255, 255, 255, 0.85); margin-bottom: 1.75rem; } .cta-banner-btn { align-self: flex-start; background: transparent; border: 1.5px solid var(--color-gold); color: var(--color-gold-light); border-radius: 50px; padding: 0.75rem 2rem; font-family: var(--font-accent); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; transition: var(--transition-fast); } .cta-banner-btn:hover { background: var(--color-gold); border-color: var(--color-gold); color: #1a1a1a; transform: translateY(-2px); box-shadow: var(--shadow-gold); } @media (max-width: 1199.98px) { .cta-banner-panel { width: 68%; padding-right: 6rem; } .cta-banner-title { font-size: 2rem; } } /* Stacked: the panel covers the photo, so the curve is dropped */ @media (max-width: 767.98px) { .cta-banner-panel { width: 100%; min-height: 260px; padding: 2.5rem 1.75rem; border-radius: 0; background: linear-gradient(180deg, rgba(19, 16, 12, 0.94) 0%, rgba(46, 37, 23, 0.9) 100%); text-align: center; align-items: center; } .cta-banner-title { font-size: 1.7rem; } .cta-banner-btn { align-self: center; } } /* ========================================================================== 17. Dedicated Blog Page Styling ========================================================================== */ .blog-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/hero_bg.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .blog-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .category-pill { background: var(--color-dark-2); border: 1px solid var(--color-border); color: var(--color-light-1); padding: 8px 20px; border-radius: 25px; font-size: 0.85rem; font-weight: 500; transition: var(--transition-fast); cursor: pointer; display: inline-block; } .category-pill:hover, .category-pill.active { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: var(--color-dark-1); border-color: var(--color-gold); box-shadow: var(--shadow-gold); } /* Featured Blog Card */ .featured-blog-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; transition: var(--transition-fast); box-shadow: var(--shadow-md); } .featured-blog-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-5px); } .featured-img-box { position: relative; height: 340px; overflow: hidden; } .featured-img-box img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .featured-blog-card:hover .featured-img-box img { transform: scale(1.05); } .blog-cat-badge { position: absolute; top: 20px; left: 20px; background: rgba(13, 13, 13, 0.85); border: 1px solid var(--color-gold); color: var(--color-gold); padding: 6px 16px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(8px); } /* Standard Blog Cards */ .blog-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: var(--transition-fast); } .blog-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .blog-card-img-wrapper { position: relative; height: 220px; overflow: hidden; } .blog-card-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .blog-card:hover .blog-card-img-wrapper img { transform: scale(1.08); } .blog-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .blog-meta { display: flex; align-items: center; gap: 15px; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 0.85rem; } .blog-meta i { color: var(--color-gold); } .blog-card-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--color-light-1); margin-bottom: 0.85rem; line-height: 1.4; transition: var(--transition-fast); } .blog-card:hover .blog-card-title { color: var(--color-gold); } .blog-card-excerpt { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; } .blog-card-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; } .author-info { display: flex; align-items: center; gap: 10px; } .author-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--color-gold); background: var(--color-gold-dark); color: #000; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; } .author-name { font-size: 0.8rem; color: var(--color-light-1); font-weight: 500; } .btn-read-more { color: var(--color-gold); font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: var(--transition-fast); } .btn-read-more:hover { color: var(--color-gold-light); transform: translateX(4px); } /* Sidebar Widgets */ .sidebar-widget { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.75rem; margin-bottom: 2rem; } .widget-title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-light-1); margin-bottom: 1.25rem; position: relative; padding-bottom: 8px; } .widget-title::after { content: ''; position: absolute; bottom: 0; left: 0; width: 35px; height: 2px; background: var(--color-gold); } .widget-category-list li { margin-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center; } .widget-category-list a { color: var(--color-text-muted); font-size: 0.9rem; transition: var(--transition-fast); } .widget-category-list a:hover { color: var(--color-gold); padding-left: 5px; } .widget-category-list .badge-count { background: var(--color-dark-3); border: 1px solid var(--color-border); color: var(--color-gold); font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; } .recent-post-item { display: flex; gap: 12px; margin-bottom: 1rem; align-items: center; } .recent-post-thumb { width: 65px; height: 65px; border-radius: 8px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--color-border); } .recent-post-thumb img { width: 100%; height: 100%; object-fit: cover; } .recent-post-title { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-light-1); line-height: 1.3; transition: var(--transition-fast); } .recent-post-title:hover { color: var(--color-gold); } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-pill { background: var(--color-dark-3); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.785rem; padding: 5px 12px; border-radius: 15px; transition: var(--transition-fast); } .tag-pill:hover { background: var(--color-gold); color: var(--color-dark-1); border-color: var(--color-gold); } /* Custom Pagination */ .pagination-custom .page-link { background: var(--color-dark-2); border: 1px solid var(--color-border); color: var(--color-light-1); width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 8px; margin: 0 4px; transition: var(--transition-fast); } .pagination-custom .page-link:hover, .pagination-custom .page-item.active .page-link { background: var(--color-gold); color: var(--color-dark-1); border-color: var(--color-gold); box-shadow: var(--shadow-gold); } /* Listing search/filter: cards hidden by the filter keep their grid slot out of the flow, so the remaining cards close up instead of leaving holes. */ .blog-post-item.is-hidden { display: none; } .blog-empty-state { border: 1px dashed var(--color-border); border-radius: 14px; padding: 3rem 1.5rem; text-align: center; color: var(--color-text-muted); } /* ========================================================================== 17b. Single Blog Article (post) Styling ========================================================================== */ .post-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold)); /* Above the sticky header (1000), below the Bootstrap modal (1055). */ z-index: 1030; pointer-events: none; } /* The hero sits on a dark photo on every theme, so its type stays light. */ .post-hero-title { max-width: 900px; margin-left: auto; margin-right: auto; line-height: 1.25; } .post-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.75); margin-top: 1.25rem; } .post-hero-meta i { color: var(--color-gold); } .post-article { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; } .post-article-inner { padding: 2rem; } @media (min-width: 768px) { .post-article-inner { padding: 3rem; } } .post-cover { height: 380px; overflow: hidden; } .post-cover img { width: 100%; height: 100%; object-fit: cover; } .post-lede { font-family: var(--font-accent); font-size: 1.15rem; line-height: 1.75; color: var(--color-light-1); border-left: 3px solid var(--color-gold); padding-left: 1.15rem; margin-bottom: 2rem; } /* --- Article body typography --- */ .post-body { font-size: 1rem; } .post-body h2 { font-family: var(--font-heading); font-size: 1.65rem; font-weight: 700; color: var(--color-light-1); margin: 2.75rem 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); } .post-body h3 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: var(--color-gold); margin: 1.85rem 0 0.75rem; } .post-body p { color: var(--color-text-muted); line-height: 1.85; margin-bottom: 1.15rem; } .post-body ul, .post-body ol { color: var(--color-text-muted); line-height: 1.85; padding-left: 1.25rem; margin-bottom: 1.5rem; } .post-body li { margin-bottom: 0.5rem; } .post-body li::marker { color: var(--color-gold); } .post-body strong { color: var(--color-light-1); font-weight: 600; } .post-body a { color: var(--color-gold); text-decoration: underline; text-underline-offset: 3px; } .post-body a:hover { color: var(--color-gold-light); } .post-figure { margin: 2rem 0; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; } .post-figure img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; } .post-figure figcaption { padding: 0.8rem 1.15rem; font-size: 0.8rem; color: var(--color-text-muted); background: var(--color-dark-3); border-top: 1px solid var(--color-border); } .post-quote { margin: 2rem 0; padding: 1.5rem 1.75rem; background: var(--color-dark-3); border-left: 3px solid var(--color-gold); border-radius: 0 12px 12px 0; font-family: var(--font-accent); font-size: 1.08rem; line-height: 1.7; color: var(--color-light-1); } .post-callout { margin: 2rem 0; padding: 1.5rem 1.65rem; background: var(--color-dark-3); border: 1px solid var(--color-border); border-left: 4px solid var(--color-gold); border-radius: 12px; } .post-callout-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.75rem; } .post-callout p:last-child, .post-callout ul:last-child { margin-bottom: 0; } /* Spec tables scroll on their own instead of stretching the page. */ .post-table-wrap { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--color-border); border-radius: 12px; } .post-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.9rem; } .post-table th, .post-table td { padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--color-border); } .post-table th { background: var(--color-dark-3); color: var(--color-gold); font-weight: 600; letter-spacing: 0.4px; } .post-table td { color: var(--color-text-muted); } .post-table tr:last-child td { border-bottom: 0; } /* --- Table of contents --- */ .post-toc { background: var(--color-dark-3); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem 1.65rem; margin-bottom: 2.25rem; } .post-toc-title { font-size: 0.78rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.9rem; } .post-toc ol { margin: 0; padding-left: 1.15rem; color: var(--color-text-muted); } .post-toc li { margin-bottom: 0.45rem; } .post-toc li::marker { color: var(--color-gold); } .post-toc a { color: var(--color-light-1); font-size: 0.92rem; transition: var(--transition-fast); } .post-toc a:hover { color: var(--color-gold); } /* --- Tags, share, author, prev/next --- */ .post-footer-bar { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; } .post-share { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: var(--color-text-muted); } .post-share-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-dark-3); color: var(--color-light-1); display: inline-flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .post-share-btn:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-dark-1); } .post-author-box { display: flex; gap: 1.25rem; align-items: center; margin-top: 2.5rem; padding: 1.65rem; background: var(--color-dark-3); border: 1px solid var(--color-border); border-radius: 14px; } .post-author-img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-gold); flex-shrink: 0; } .post-author-name { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-light-1); margin-bottom: 0.15rem; } .post-author-role { font-size: 0.8rem; color: var(--color-gold); margin-bottom: 0.5rem; } .post-author-bio { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.65; margin-bottom: 0; } .post-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2rem; } @media (max-width: 575.98px) { .post-nav { grid-template-columns: 1fr; } .post-author-box { flex-direction: column; text-align: center; } } .post-nav-link { display: block; padding: 1.25rem 1.4rem; background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 12px; transition: var(--transition-fast); } .post-nav-link:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-3px); } .post-nav-label { display: block; font-size: 0.72rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.4rem; } .post-nav-title { font-family: var(--font-heading); font-size: 1rem; color: var(--color-light-1); line-height: 1.45; } .post-nav-link.is-next { text-align: right; } /* --- Sticky sidebar on the article pages --- */ @media (min-width: 992px) { .post-sidebar-sticky { position: sticky; top: 110px; } } /* ========================================================================== 18. Dedicated Contact Us Page Styling ========================================================================== */ .contact-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/hero_bg.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .contact-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .contact-info-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 2.25rem 1.75rem; height: 100%; text-align: center; transition: var(--transition-fast); } .contact-info-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .contact-icon-box { width: 60px; height: 60px; background: linear-gradient(135deg, rgba(197, 157, 95, 0.15) 0%, rgba(197, 157, 95, 0.05) 100%); border: 1px solid var(--color-gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--color-gold); margin: 0 auto 1.25rem auto; } .contact-card-title { font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-light-1); margin-bottom: 0.75rem; } .contact-card-desc { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.6; } .contact-form-wrapper { background: linear-gradient(135deg, rgba(22, 22, 22, 0.95) 0%, rgba(34, 34, 34, 0.9) 100%); border: 1px solid var(--color-gold); border-radius: 18px; padding: 3rem 2.5rem; box-shadow: var(--shadow-lg); position: relative; } .contact-form-wrapper::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); } .map-container { border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-lg); position: relative; } .map-container iframe { width: 100%; height: 450px; border: 0; filter: grayscale(85%) invert(90%) contrast(120%); transition: var(--transition-smooth); } .map-container:hover iframe { filter: grayscale(0%) invert(0%) contrast(100%); } .social-contact-btn { background: var(--color-dark-2); border: 1px solid var(--color-border); color: var(--color-light-1); padding: 1rem 1.5rem; border-radius: 12px; display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; transition: var(--transition-fast); } .social-contact-btn:hover { border-color: var(--color-gold); background: var(--color-gold); color: var(--color-dark-1); transform: translateY(-3px); box-shadow: var(--shadow-gold); } .social-contact-btn i { font-size: 1.3rem; color: var(--color-gold); } .social-contact-btn:hover i { color: var(--color-dark-1); } /* ========================================================================== 19. Dedicated Projects Portfolio Page Styling ========================================================================== */ .projects-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/hero_bg.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .projects-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .project-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: var(--transition-fast); box-shadow: var(--shadow-md); } .project-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .project-img-wrapper { position: relative; height: 260px; overflow: hidden; } .project-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .project-card:hover .project-img-wrapper img { transform: scale(1.08); } .project-status-badge { position: absolute; top: 15px; right: 15px; padding: 5px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(8px); } .project-status-completed { background: rgba(40, 167, 69, 0.2); border: 1px solid #28a745; color: #28a745; } .project-status-ongoing { background: rgba(255, 193, 7, 0.2); border: 1px solid var(--color-gold); color: var(--color-gold-light); } .project-category-badge { position: absolute; bottom: 15px; left: 15px; background: rgba(13, 13, 13, 0.85); border: 1px solid var(--color-border); color: var(--color-gold); padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; } .project-body, .project-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .project-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-light-1); margin-bottom: 0.5rem; transition: var(--transition-fast); } .project-card:hover .project-title { color: var(--color-gold); } .project-location { font-size: 0.85rem; color: var(--color-gold-light); margin-bottom: 1rem; display: flex; align-items: center; gap: 6px; } .project-desc { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; } .project-specs-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.25rem; } .project-spec-item { background: var(--color-dark-3); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--color-text-muted); font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; } .project-spec-item i { color: var(--color-gold); margin-right: 4px; } /* ========================================================================== 20. Dedicated Architecture Page Styling ========================================================================== */ .arch-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/arch_facade.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .arch-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .arch-service-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; padding: 2.25rem 1.75rem; height: 100%; transition: var(--transition-fast); box-shadow: var(--shadow-md); position: relative; } .arch-service-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .arch-icon-box { width: 65px; height: 65px; background: linear-gradient(135deg, rgba(197, 157, 95, 0.15) 0%, rgba(197, 157, 95, 0.05) 100%); border: 1px solid var(--color-gold); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--color-gold); margin-bottom: 1.25rem; } .arch-process-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 2rem 1.5rem; height: 100%; position: relative; transition: var(--transition-fast); } .arch-process-card:hover { border-color: var(--color-gold); transform: translateY(-5px); box-shadow: var(--shadow-gold); } .arch-step-num { font-family: var(--font-heading); font-size: 2.5rem; font-weight: 800; background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold-dark) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 1rem; } .arch-blueprint-box { background: linear-gradient(135deg, rgba(22, 22, 22, 0.95) 0%, rgba(34, 34, 34, 0.9) 100%); border: 1px solid var(--color-gold); border-radius: 16px; padding: 2.5rem; box-shadow: var(--shadow-lg); } /* ========================================================================== 21. Dedicated Residential Interiors Page Styling ========================================================================== */ .res-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/res_living.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .res-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .res-room-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: var(--transition-fast); box-shadow: var(--shadow-md); } .res-room-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .res-img-wrapper { position: relative; height: 240px; overflow: hidden; } .res-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .res-room-card:hover .res-img-wrapper img { transform: scale(1.08); } .res-room-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .res-room-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-light-1); margin-bottom: 0.75rem; } .res-feature-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .res-feature-list li { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .res-feature-list li i { color: var(--color-gold); font-size: 0.8rem; } .res-spec-box { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; text-align: center; transition: var(--transition-fast); } .res-spec-box:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-5px); } /* ========================================================================== 22. Dedicated Commercial Interiors Page Styling ========================================================================== */ .com-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/arch_facade.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .com-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .com-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: var(--transition-fast); box-shadow: var(--shadow-md); } .com-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .com-img-wrapper { position: relative; height: 240px; overflow: hidden; } .com-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .com-card:hover .com-img-wrapper img { transform: scale(1.08); } .com-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .com-card-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-light-1); margin-bottom: 0.75rem; } .com-feature-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .com-feature-list li { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .com-feature-list li i { color: var(--color-gold); font-size: 0.8rem; } .com-spec-box { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; text-align: center; transition: var(--transition-fast); } .com-spec-box:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-5px); } /* ========================================================================== 23. Dedicated Turnkey Interiors Page Styling ========================================================================== */ .turnkey-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/proj_3bhk.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .turnkey-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } /* Matches .const-card / .renov-card so the service pages share one card look */ .turnkey-phase-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; padding: 2.25rem 1.75rem; display: flex; flex-direction: column; flex: 1 1 auto; transition: var(--transition-fast); box-shadow: var(--shadow-md); } .turnkey-phase-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .turnkey-phase-num { font-family: var(--font-accent); font-size: 1.3rem; font-weight: 700; color: var(--color-gold-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.75rem; } .turnkey-phase-card h4 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin-bottom: 0.75rem; } .turnkey-phase-card p { color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.6; } #turnkey-overview .row.g-4 > [class*='col-'] { display: flex; } /* Reserve two title lines so the body copy lines up across the grid */ @media (min-width: 768px) { #turnkey-overview .turnkey-phase-card > h4 { min-height: 3.5rem; } } .turnkey-guarantee-box { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.75rem 1.25rem; text-align: center; transition: var(--transition-fast); } .turnkey-guarantee-box:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-5px); } /* ========================================================================== 24. Dedicated Construction Page Styling ========================================================================== */ .const-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/arch_blueprint.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .const-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .const-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; padding: 2.25rem 1.75rem; display: flex; flex-direction: column; flex: 1 1 auto; transition: var(--transition-fast); box-shadow: var(--shadow-md); } /* Image variant supplies its own padding via .const-card-body */ .const-card:has(.const-img-wrapper) { padding: 0; } #const-overview .row.g-4 > [class*='col-'] { display: flex; } /* Reserve two title lines so the body copy lines up across the grid */ @media (min-width: 768px) { #const-overview .const-card > h4 { min-height: 3.7rem; } } .const-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .const-img-wrapper { position: relative; height: 240px; overflow: hidden; } .const-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .const-card:hover .const-img-wrapper img { transform: scale(1.08); } .const-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .const-card-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-light-1); margin-bottom: 0.75rem; } .const-feature-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .const-feature-list li { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .const-feature-list li i { color: var(--color-gold); font-size: 0.8rem; } .const-spec-box { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; text-align: center; transition: var(--transition-fast); } .const-spec-box:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-5px); } /* ========================================================================== 25. Dedicated Luxury Renovations Page Styling ========================================================================== */ .renov-hero-page { position: relative; margin-bottom: 3.5rem; min-height: 380px; background: linear-gradient(180deg, rgba(13, 13, 13, 0.8) 0%, rgba(13, 13, 13, 0.95) 100%), url('../images/ren_after_living.jpg') center/cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; padding: 5.5rem 1rem 3.5rem 1rem; border-bottom: 1px solid var(--color-border); } .renov-hero-page::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 140px; height: 3px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); } .renov-card { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; height: 100%; padding: 2.25rem 1.75rem; display: flex; flex-direction: column; transition: var(--transition-fast); box-shadow: var(--shadow-md); } /* Image variant supplies its own padding via .renov-card-body */ .renov-card:has(.renov-img-wrapper) { padding: 0; } .renov-card:hover { border-color: var(--color-gold); transform: translateY(-8px); box-shadow: var(--shadow-gold); } .renov-img-wrapper { position: relative; height: 240px; overflow: hidden; } .renov-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-smooth); } .renov-card:hover .renov-img-wrapper img { transform: scale(1.08); } .renov-card-body { padding: 1.75rem; display: flex; flex-direction: column; flex-grow: 1; } .renov-card-title { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-light-1); margin-bottom: 0.75rem; } .renov-feature-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; } .renov-feature-list li { font-size: 0.875rem; color: var(--color-text-muted); margin-bottom: 6px; display: flex; align-items: center; gap: 8px; } .renov-feature-list li i { color: var(--color-gold); font-size: 0.8rem; } .renov-spec-box { background: var(--color-dark-2); border: 1px solid var(--color-border); border-radius: 12px; padding: 1.5rem; text-align: center; transition: var(--transition-fast); } .renov-spec-box:hover { border-color: var(--color-gold); box-shadow: var(--shadow-gold); transform: translateY(-5px); } .project-tag { position: absolute; top: 15px; right: 15px; background: rgba(22, 22, 22, 0.85); border: 1px solid var(--color-gold); color: var(--color-gold-light); padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; backdrop-filter: blur(8px); } /* ========================================================================== WhatsApp Quick Action - shown at every width, including desktop ========================================================================== */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 1000; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: var(--transition-fast); } .wa-float:hover, .wa-float:focus { color: #ffffff; transform: translateY(-3px); } /* ========================================================================== Call Quick Action - right-hand counterpart of .wa-float, stacked above it so both sit together in the same corner at every width ========================================================================== */ .call-float { position: fixed; right: 18px; bottom: 84px; z-index: 1000; width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); color: #1a1a1a; display: flex; align-items: center; justify-content: center; font-size: 1.45rem; text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: var(--transition-fast); } .call-float:hover, .call-float:focus { background: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 100%); color: #000000; transform: translateY(-3px); } /* ========================================================================== Small-screen overflow guard A `.row.g-5` placed directly inside `.container` pulls -24px on each side, which is more than the container's 12px padding - that pushed the page wider than the viewport on phones. Match the gutter to the padding. ========================================================================== */ @media (max-width: 767.98px) { .container > .row.g-5 { --bs-gutter-x: 1.5rem; } } /* ========================================================================== Beach White Theme (`body.theme-beach` - applied to every page) Flips the content sections from the dark palette to a warm off-white ("beach white") canvas. The gold accents stay; the page hero banners and the newsletter CTA stay dark as contrast anchors, while the top bar, sticky header and footer share the light treatment. Only rules that would otherwise leave light-on-light (or dark-on-dark) text are overridden here - everything else keeps inheriting the base stylesheet, so removing the body class restores the dark theme. ========================================================================== */ body.theme-beach { --beach-bg: var(--beach-canvas); /* main canvas */ --beach-bg-alt: #ffffff; /* alternating band */ --beach-surface: #ffffff; /* cards */ --beach-surface-alt: #f8f3ea; /* card hover */ --beach-ink: #241f19; /* headings / body text */ --beach-ink-soft: rgba(36, 31, 25, 0.78); --beach-ink-muted: rgba(36, 31, 25, 0.62); --beach-line: rgba(36, 31, 25, 0.09); --gold-ink: #8a6528; /* readable gold for headings/accents on light bg */ --gold-ink-strong: #7a5620; /* deeper gold for body-size text (AA on canvas) */ --color-border: rgba(197, 157, 95, 0.38); --color-text-muted: rgba(36, 31, 25, 0.72); --shadow-sm: 0 4px 14px rgba(36, 31, 25, 0.06); --shadow-md: 0 10px 28px rgba(36, 31, 25, 0.09); --shadow-lg: 0 20px 45px rgba(36, 31, 25, 0.12); --shadow-gold: 0 10px 26px rgba(197, 157, 95, 0.3); background-color: var(--beach-bg); color: var(--beach-ink); } /* Base typography */ .theme-beach p { color: var(--beach-ink-soft); } .theme-beach .text-muted { color: var(--beach-ink-muted) !important; } .theme-beach .main-title, .theme-beach .feature-title, .theme-beach .service-title, .theme-beach .process-title, .theme-beach .spotlight-name, .theme-beach .review-author { color: var(--beach-ink); } .theme-beach .sub-title, .theme-beach .text-gold, .theme-beach .service-btn-link, .theme-beach .spotlight-role, .theme-beach .google-score, .theme-beach .about-highlight { color: var(--beach-ink-muted) !important; } .theme-beach .service-btn-link:hover { color: var(--color-gold-dark) !important; } /* Scrollbar track follows the canvas - shares the token, so it cannot drift */ html:has(body.theme-beach) ::-webkit-scrollbar-track { background: var(--beach-canvas); } /* Bootstrap colour utilities used across the pages */ .theme-beach .text-white { color: var(--beach-ink) !important; } .theme-beach .text-white-50 { color: var(--beach-ink-muted) !important; } /* `.bg-dark-2` is used as an alternating band wrapper on the inner pages */ .theme-beach .bg-dark-2 { background: var(--beach-bg-alt); } /* --- Zones that deliberately stay dark ---------------------------------- Every page hero banner and the photo-backed newsletter CTA keep the dark treatment, so any light text inside them has to be re-asserted after the flips above. ----------------------------------------------------------------------- */ .theme-beach :is(.hero-section, .newsletter-cta-box, .about-hero-page, .blog-hero-page, .contact-hero-page, .projects-hero-page, .arch-hero-page, .res-hero-page, .com-hero-page, .turnkey-hero-page, .const-hero-page, .renov-hero-page) p { color: rgba(255, 255, 255, 0.85); } .theme-beach :is(.hero-section, .newsletter-cta-box, .about-hero-page, .blog-hero-page, .contact-hero-page, .projects-hero-page, .arch-hero-page, .res-hero-page, .com-hero-page, .turnkey-hero-page, .const-hero-page, .renov-hero-page) .text-white { color: #ffffff !important; } .theme-beach :is(.hero-section, .newsletter-cta-box, .about-hero-page, .blog-hero-page, .contact-hero-page, .projects-hero-page, .arch-hero-page, .res-hero-page, .com-hero-page, .turnkey-hero-page, .const-hero-page, .renov-hero-page) .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } .theme-beach :is(.hero-section, .newsletter-cta-box, .about-hero-page, .blog-hero-page, .contact-hero-page, .projects-hero-page, .arch-hero-page, .res-hero-page, .com-hero-page, .turnkey-hero-page, .const-hero-page, .renov-hero-page) .text-muted { color: rgba(255, 255, 255, 0.75) !important; } .theme-beach :is(.hero-section, .newsletter-cta-box, .about-hero-page, .blog-hero-page, .contact-hero-page, .projects-hero-page, .arch-hero-page, .res-hero-page, .com-hero-page, .turnkey-hero-page, .const-hero-page, .renov-hero-page) :is(.text-gold, .sub-title) { color: var(--color-gold) !important; } .theme-beach :is(.hero-section, .newsletter-cta-box, .about-hero-page, .blog-hero-page, .contact-hero-page, .projects-hero-page, .arch-hero-page, .res-hero-page, .com-hero-page, .turnkey-hero-page, .const-hero-page, .renov-hero-page) .text-gold-light { color: var(--color-gold-light) !important; } .theme-beach .hero-desc { color: rgba(255, 255, 255, 0.9); } /* The pale `--color-gold-light` is only legible on the dark banners (re-asserted above). Everywhere else it lands on the beach canvas, so lead paragraphs get the deeper gold that still clears contrast at body size. */ .theme-beach .text-gold-light { color: var(--gold-ink-strong) !important; } /* --- 15. Footer: same light treatment as the sticky header ---------------- */ .theme-beach .main-footer { background: var(--beach-bg-alt); border-top-color: var(--color-border); color: var(--beach-ink-soft); } .theme-beach .main-footer p { color: var(--beach-ink-soft); } .theme-beach .main-footer .text-muted { color: var(--beach-ink-muted) !important; } .theme-beach .footer-widget-title { color: var(--beach-ink); } .theme-beach .footer-links a:hover { color: var(--gold-ink); } .theme-beach .main-footer .text-gold { color: var(--gold-ink) !important; } .theme-beach .social-btn { background: var(--beach-surface); border-color: var(--color-border); color: var(--gold-ink); } .theme-beach .social-btn:hover { background: var(--color-gold); color: var(--color-dark-1); } .theme-beach .footer-bottom { border-top-color: var(--beach-line); color: var(--beach-ink-muted); } .theme-beach .footer-sep { color: var(--gold-ink); } /* --- 1 & 2. Top bar, header, nav and mega menu --------------------------- */ .theme-beach .top-bar { background-color: var(--beach-bg-alt); border-bottom-color: rgba(36, 31, 25, 0.08); color: var(--beach-ink-soft); } .theme-beach .top-bar i, .theme-beach .top-bar-link:hover { color: var(--gold-ink); } .theme-beach .main-header { background: rgba(255, 255, 255, 0.94); border-bottom-color: var(--color-border); } .theme-beach .brand-title { color: var(--beach-ink); } .theme-beach .brand-subtitle { color: var(--gold-ink); } .theme-beach .nav-link { color: var(--beach-ink-soft) !important; } .theme-beach .nav-link:hover, .theme-beach .nav-link.active { color: var(--gold-ink) !important; } .theme-beach .nav-link::after { background: var(--gold-ink); } .theme-beach .navbar-toggler .text-gold { color: var(--gold-ink) !important; } .theme-beach .dropdown-menu-dark { background-color: var(--beach-surface); } .theme-beach .dropdown-item { color: var(--beach-ink-soft); } .theme-beach .dropdown-item:hover { color: var(--gold-ink); } .theme-beach .mega-menu { background: var(--beach-surface); border-color: var(--color-border); } .theme-beach .mega-item { border-right-color: rgba(36, 31, 25, 0.09); } .theme-beach .mega-item:last-child { border-right: none; } .theme-beach .mega-label { color: var(--beach-ink); } .theme-beach .mega-item:hover .mega-label { color: var(--gold-ink); } /* --- 4. Consultation CTA banner ----------------------------------------- */ /* No beach override: the banner is a dark slab over a photo by design, and stays dark on every theme. */ /* --- 5. Key value highlights -------------------------------------------- */ .theme-beach .value-highlights { background: var(--beach-bg-alt); } /* The box is transparent in the base sheet; no surface override here, or the white card comes back. */ .theme-beach .feature-icon-wrap { background: rgba(197, 157, 95, 0.16); color: var(--color-gold-dark); } /* --- 6. About ------------------------------------------------------------ */ /* Canvas tint, so it reads as a band against the white sections either side. */ .theme-beach .about-section { background: var(--beach-bg); } /* Brand green rather than the shared heading ink used by the other sections. */ .theme-beach .about-heading { color: var(--brand-green); } .theme-beach .about-divider { background: var(--gold-ink); } .theme-beach .about-desc { color: var(--beach-ink-soft); } /* --- 6b. Design categories ------------------------------------------------ */ /* Always white, independent of the alternating-band token. */ .theme-beach .abode-section { background: #ffffff; } .theme-beach .abode-icon { color: var(--gold-ink); } .theme-beach .abode-item:hover .abode-icon { color: var(--color-gold-dark); } .theme-beach .abode-label { color: var(--beach-ink); } /* --- 7. Services --------------------------------------------------------- */ .theme-beach .services-section { background: var(--beach-bg); } .theme-beach .service-card { background: var(--beach-surface); border-color: var(--beach-line); } .theme-beach .service-desc { color: var(--beach-ink-soft); } /* --- 8. Process ---------------------------------------------------------- */ .theme-beach .process-section { background: #ffffff; } /* No surface override here - the step is transparent in the base sheet, and painting a card back on would undo the medallion layout. */ .theme-beach .process-icon { background: rgba(8, 50, 31, 0.09); color: var(--brand-green); } /* Needed here too - the theme rule above outranks the plain .process-icon-img */ .theme-beach .process-icon-img { background: none; } /* --- 9. Gallery (overlays stay dark - they sit on photos) ---------------- */ .theme-beach .gallery-section { background: var(--beach-bg-alt); } .theme-beach .filter-btn { background: var(--beach-surface); border-color: var(--beach-line); color: var(--beach-ink-soft); } .theme-beach .filter-btn:hover, .theme-beach .filter-btn.active { background: var(--color-gold); color: #1a1a1a; border-color: var(--color-gold); } /* --- 10. Spotlight & accordion ------------------------------------------ */ .theme-beach .testimonial-accordion-section { background: var(--beach-bg); } .theme-beach .testimonial-accordion-section .main-title { color: var(--beach-ink); } .theme-beach .spotlight-lede { color: var(--gold-ink-strong); } .theme-beach .spotlight-card { background: var(--beach-surface); } .theme-beach .spotlight-quote { color: var(--beach-ink-soft); } .theme-beach .custom-accordion .accordion-item { background: var(--beach-surface); border-color: var(--beach-line); } .theme-beach .custom-accordion .accordion-button { background: var(--beach-surface); color: var(--beach-ink); } .theme-beach .custom-accordion .accordion-button:not(.collapsed) { background: rgba(197, 157, 95, 0.14); color: var(--gold-ink); } .theme-beach .custom-accordion .accordion-button::after { filter: none; } .theme-beach .custom-accordion .accordion-body { color: var(--beach-ink-soft); } /* --- 11. Video showcase (cards sit on video, captions stay dark) --------- */ .theme-beach .video-section { background: var(--beach-bg-alt); } /* --- 12. Google reviews -------------------------------------------------- */ .theme-beach .reviews-section { background: var(--beach-bg); } .theme-beach .google-badge-box { background: var(--beach-surface); } .theme-beach .review-card { background: var(--beach-surface); } .theme-beach .review-text { color: var(--beach-ink-soft); } .theme-beach .review-avatar, .theme-beach .review-avatar.text-gold { color: var(--gold-ink) !important; } .theme-beach .reviews-pagination .swiper-pagination-bullet { background: rgba(36, 31, 25, 0.22) !important; } /* --- 13. Brand partners -------------------------------------------------- */ .theme-beach .brand-partners-section { background: var(--beach-bg-alt); border-top-color: var(--beach-line); } .theme-beach .brand-logo-item { background: var(--beach-surface); border-color: var(--beach-line); } .theme-beach .brand-logo-item img { filter: grayscale(100%); opacity: 0.7; } /* The pale badge inside the dark newsletter box needs the ink gold back */ .theme-beach .newsletter-cta-box .badge.text-gold { color: var(--gold-ink) !important; } /* The CTA banner panel stays dark, so its copy stays light */ .theme-beach .cta-banner-sub { color: rgba(255, 255, 255, 0.85); } .theme-beach .cta-banner-title { color: var(--color-light-1); } /* --- 14. Quote modal, forms & floating widgets -------------------------- */ .theme-beach .modal-content-dark { background: var(--beach-surface); color: var(--beach-ink); } .theme-beach .modal-header-dark { border-bottom-color: var(--beach-line); } .theme-beach .modal-title-dark { color: var(--gold-ink); } .theme-beach .btn-close-white { filter: none; } .theme-beach .form-control-dark, .theme-beach .form-control-dark.bg-dark { background: var(--beach-surface) !important; border-color: rgba(36, 31, 25, 0.16) !important; color: var(--beach-ink) !important; } .theme-beach .form-control-dark:focus { border-color: var(--color-gold) !important; box-shadow: 0 0 0 3px rgba(197, 157, 95, 0.18) !important; } .theme-beach .form-control-dark::placeholder { color: rgba(36, 31, 25, 0.45) !important; } .theme-beach .floating-tab { background: var(--beach-surface); color: var(--beach-ink); } .theme-beach .floating-tab:hover { color: #1a1a1a; } /* --- 16. About Us page --------------------------------------------------- */ .theme-beach .counter-card, .theme-beach .vm-card, .theme-beach .team-card, .theme-beach .why-card, .theme-beach .partner-logo-item { background: var(--beach-surface); } .theme-beach .association-card, .theme-beach .team-showcase-banner { background: linear-gradient(135deg, #ffffff 0%, var(--beach-surface-alt) 100%); } .theme-beach .association-logo-box { background: rgba(197, 157, 95, 0.08); } .theme-beach .experience-badge { background: linear-gradient(135deg, #ffffff 0%, var(--beach-surface-alt) 100%); } .theme-beach .experience-badge .badge-text, .theme-beach .why-title, .theme-beach .team-name { color: var(--beach-ink); } .theme-beach .why-desc, .theme-beach .counter-label { color: var(--beach-ink-muted); } .theme-beach .team-title { color: var(--gold-ink); } .theme-beach .team-social a { background: var(--beach-surface-alt); } .theme-beach .team-social a:hover { color: #1a1a1a; } /* Gradient numerals: darken the top stop so they read on white */ .theme-beach .why-num, .theme-beach .arch-step-num { background: linear-gradient(135deg, var(--color-gold) 0%, #7a5720 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .theme-beach .counter-num, .theme-beach .partner-logo-item { color: var(--gold-ink); } .theme-beach .partner-logo-item:hover { background: var(--beach-surface-alt); } /* --- 17. Blog page ------------------------------------------------------- */ .theme-beach .category-pill, .theme-beach .featured-blog-card, .theme-beach .blog-card, .theme-beach .sidebar-widget, .theme-beach .pagination-custom .page-link { background: var(--beach-surface); } .theme-beach .category-pill, .theme-beach .blog-card-title, .theme-beach .widget-title, .theme-beach .recent-post-title, .theme-beach .author-name, .theme-beach .pagination-custom .page-link { color: var(--beach-ink); } /* The theme surface rule above outranks the base .category-pill.active gradient, so the selected state has to be repainted here or it reads as unselected. */ .theme-beach .category-pill:hover, .theme-beach .category-pill.active, .theme-beach .pagination-custom .page-link:hover, .theme-beach .pagination-custom .page-item.active .page-link { background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-dark) 100%); border-color: var(--color-gold); color: #1a1a1a; } .theme-beach .blog-card:hover .blog-card-title, .theme-beach .recent-post-title:hover { color: var(--gold-ink); } .theme-beach .blog-meta, .theme-beach .blog-card-excerpt, .theme-beach .widget-category-list a, .theme-beach .tag-pill { color: var(--beach-ink-muted); } .theme-beach .widget-category-list a:hover { color: var(--gold-ink); } .theme-beach .blog-card-footer { border-top-color: var(--beach-line); } .theme-beach .widget-category-list .badge-count, .theme-beach .tag-pill { background: var(--beach-surface-alt); } .theme-beach .widget-category-list .badge-count { color: var(--gold-ink); } .theme-beach .tag-pill:hover { background: var(--color-gold); color: #1a1a1a; } .theme-beach .btn-read-more { color: var(--gold-ink); } .theme-beach .btn-read-more:hover { color: var(--color-gold-dark); } .theme-beach .blog-empty-state { border-color: var(--beach-line); color: var(--beach-ink-muted); } /* --- 17b. Single article page ------------------------------------------- */ .theme-beach .post-article, .theme-beach .post-nav-link { background: var(--beach-surface); } /* The tinted blocks inside the article - callout, quote, TOC, table head, caption strip, author box - all share the warm off-white. */ .theme-beach .post-toc, .theme-beach .post-quote, .theme-beach .post-callout, .theme-beach .post-author-box, .theme-beach .post-share-btn, .theme-beach .post-figure figcaption, .theme-beach .post-table th { background: var(--beach-surface-alt); } .theme-beach .post-article, .theme-beach .post-nav-link, .theme-beach .post-toc, .theme-beach .post-callout, .theme-beach .post-author-box, .theme-beach .post-share-btn, .theme-beach .post-figure, .theme-beach .post-table-wrap { border-color: var(--beach-line); } .theme-beach .post-body h2 { border-bottom-color: var(--beach-line); } .theme-beach .post-figure figcaption, .theme-beach .post-table th, .theme-beach .post-table td { border-top-color: var(--beach-line); border-bottom-color: var(--beach-line); } .theme-beach .post-footer-bar { border-top-color: var(--beach-line); } .theme-beach .post-lede, .theme-beach .post-quote, .theme-beach .post-body h2, .theme-beach .post-toc a, .theme-beach .post-nav-title, .theme-beach .post-author-name, .theme-beach .post-share-btn, .theme-beach .post-body strong { color: var(--beach-ink); } .theme-beach .post-body p, .theme-beach .post-body ul, .theme-beach .post-body ol, .theme-beach .post-toc ol, .theme-beach .post-table td, .theme-beach .post-figure figcaption, .theme-beach .post-share, .theme-beach .post-author-bio { color: var(--beach-ink-soft); } .theme-beach .post-body h3, .theme-beach .post-body a, .theme-beach .post-callout-title, .theme-beach .post-toc-title, .theme-beach .post-nav-label, .theme-beach .post-author-role, .theme-beach .post-table th { color: var(--gold-ink); } .theme-beach .post-body a:hover, .theme-beach .post-toc a:hover { color: var(--color-gold-dark); } .theme-beach .post-share-btn:hover { color: #1a1a1a; } /* --- 18. Contact page ---------------------------------------------------- */ .theme-beach .contact-info-card, .theme-beach .social-contact-btn { background: var(--beach-surface); } .theme-beach .contact-card-title, .theme-beach .social-contact-btn { color: var(--beach-ink); } .theme-beach .social-contact-btn:hover { color: #1a1a1a; } .theme-beach .contact-card-desc { color: var(--beach-ink-muted); } .theme-beach .contact-form-wrapper, .theme-beach .arch-blueprint-box { background: linear-gradient(135deg, #ffffff 0%, var(--beach-surface-alt) 100%); } /* the base filter inverts the map for the dark theme - not needed on light */ .theme-beach .map-container iframe { filter: grayscale(25%); } .theme-beach .map-container:hover iframe { filter: grayscale(0%); } /* --- 19. Projects page --------------------------------------------------- */ .theme-beach .project-card { background: var(--beach-surface); } .theme-beach .project-title { color: var(--beach-ink); } .theme-beach .project-card:hover .project-title { color: var(--gold-ink); } .theme-beach .project-location { color: var(--gold-ink); } .theme-beach .project-desc { color: var(--beach-ink-muted); } .theme-beach .project-spec-item { background: var(--beach-surface-alt); border-color: var(--beach-line); color: var(--beach-ink-muted); } /* --- 20-25. Service pages (architecture, residential, commercial, turnkey, construction, renovations) ------------------------------------ */ .theme-beach .arch-service-card, .theme-beach .arch-process-card, .theme-beach .res-room-card, .theme-beach .res-spec-box, .theme-beach .com-card, .theme-beach .com-spec-box, .theme-beach .turnkey-phase-card, .theme-beach .turnkey-guarantee-box, .theme-beach .const-card, .theme-beach .const-spec-box, .theme-beach .renov-card, .theme-beach .renov-spec-box { background: var(--beach-surface); } .theme-beach .turnkey-phase-card p { color: var(--beach-ink-muted); } .theme-beach .turnkey-phase-num { color: var(--gold-ink); } .theme-beach .res-room-title, .theme-beach .com-card-title, .theme-beach .const-card-title, .theme-beach .renov-card-title { color: var(--beach-ink); } .theme-beach .res-feature-list li, .theme-beach .com-feature-list li, .theme-beach .const-feature-list li, .theme-beach .renov-feature-list li { color: var(--beach-ink-muted); } /* ======================================================================== Interior Cost Calculator ======================================================================== */ .calculator-header-trigger { flex: 0 0 56px; display: inline-grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 2px solid rgba(154,102,18,.38); border-radius: 50%; background: linear-gradient(145deg, #b6812d, #79500f); color: #fff; box-shadow: 0 8px 20px rgba(116,76,13,.25); font-size: 1.15rem; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; } .calculator-header-trigger:hover, .calculator-header-trigger:focus-visible { color: #fff; box-shadow: 0 10px 25px rgba(116,76,13,.38); transform: translateY(-2px); } .calculator-modal .modal-dialog { max-width: 920px; } .calculator-modal .modal-content { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: #f5f4f1; color: #294d48; box-shadow: 0 35px 80px rgba(12,42,38,.38); } .calculator-close { position: absolute; z-index: 5; top: 1rem; right: 1rem; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(47,93,87,.16); border-radius: 50%; background: rgba(255,255,255,.82); color: #294d48; } .calculator-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); min-height: 590px; } .calculator-aside { padding: 3.25rem 2.25rem; background: #2f5d57; color: #fff; } .calculator-kicker, .calculator-step-label { color: #aeb8b4; font-size: .65rem; font-weight: 700; letter-spacing: .17em; } .calculator-aside h2 { margin: 1rem 0; color: #fff; font-size: 2rem; line-height: 1.2; } .calculator-aside > p { color: rgba(255,255,255,.68); font-size: .84rem; } .calculator-progress { position: relative; margin: 3rem 0 0; padding: 0; list-style: none; } .calculator-progress::before { content: ''; position: absolute; left: 18px; top: 20px; bottom: 20px; width: 1px; background: rgba(255,255,255,.2); } .calculator-progress li { position: relative; display: flex; align-items: center; gap: .8rem; margin: 0 0 1.35rem; color: rgba(255,255,255,.5); } .calculator-progress b { z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: #2f5d57; font-size: .72rem; } .calculator-progress li.active { color: #fff; } .calculator-progress li.active b { background: #d3d5d3; color: #294d48; } .calculator-form { display: flex; flex-direction: column; padding: 3.4rem 3rem 2.2rem; } .calculator-step, .calculator-result { display: none; flex: 1; } .calculator-step.active, .calculator-result.active { display: block; } .calculator-step h3, .calculator-result h3 { margin: .75rem 0 1.75rem; color: #294d48; font-size: 1.55rem; } .calculator-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .calculator-grid label, .calculator-quality { color: #54615d; font-size: .76rem; font-weight: 650; } .calculator-full { grid-column: 1/-1; } .calculator-grid input, .calculator-grid select, .calculator-quality select { width: 100%; margin-top: .45rem; padding: .85rem 1rem; border: 1px solid #cdd4d1; border-radius: 9px; background: #fff; color: #294d48; outline: none; } .calculator-grid input:focus, .calculator-grid select:focus, .calculator-quality select:focus { border-color: #2f5d57; box-shadow: 0 0 0 3px rgba(47,93,87,.1); } .calculator-options { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; margin-bottom: 1.3rem; } .calculator-options input { position: absolute; opacity: 0; } .calculator-options span { display: flex; align-items: center; gap: .7rem; min-height: 58px; padding: .75rem 1rem; border: 1px solid #d4d9d6; border-radius: 10px; background: #fff; color: #56615e; font-size: .76rem; cursor: pointer; } .calculator-options i { color: #6f827d; font-size: 1rem; } .calculator-options input:focus-visible + span { outline: 3px solid rgba(47,93,87,.22); } .calculator-options input:checked + span { border-color: #2f5d57; background: #e1e9e6; color: #294d48; } .calculator-quality { display: block; } .calculator-consent { display: flex !important; align-items: center; gap: .65rem; font-weight: 500 !important; } .calculator-consent input { width: auto; margin: 0; } .calculator-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid #dde1df; } .calculator-actions button, .calculator-whatsapp { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .8rem 1.2rem; border-radius: 9px; font-size: .76rem; font-weight: 700; } .calculator-back { border: 1px solid #cbd2cf; background: transparent; color: #5c6864; } .calculator-next, .calculator-submit { margin-left: auto; border: 1px solid #2f5d57; background: #2f5d57; color: #fff; } .calculator-submit { display: none; } .calculator-estimate { display: block; margin: 1rem 0; color: #2f5d57; font-size: clamp(2.25rem,5vw,3.6rem); } .calculator-result p { color: #66716e; } .calculator-whatsapp { width: max-content; margin-top: 1rem; background: #1aa260; color: #fff; text-decoration: none; } .calculator-whatsapp:hover { color: #fff; background: #168a52; } @media (max-width: 767.98px) { .calculator-header-trigger { width: 48px; height: 48px; flex-basis: 48px; } .calculator-modal .modal-dialog { margin: .5rem; } .calculator-layout { grid-template-columns: 1fr; min-height: 0; } .calculator-aside { padding: 1.6rem 1.4rem; } .calculator-aside h2 { max-width: 80%; font-size: 1.35rem; } .calculator-aside > p { display: none; } .calculator-progress { display: flex; margin: 1.2rem 0 0; } .calculator-progress::before { left: 18px; right: 18px; top: 18px; bottom: auto; width: auto; height: 1px; } .calculator-progress li { flex: 1; flex-direction: column; gap: .35rem; margin: 0; font-size: .62rem; text-align: center; } .calculator-form { padding: 1.6rem 1.35rem; } .calculator-grid, .calculator-options { grid-template-columns: 1fr; } }