/* ========================================================================== KUSMA STONE GALLERY - LUXURY ENTERPRISE CSS DESIGN SYSTEM Inspired by Kajaria, Somany, Asian Granito & Royal Italian Showrooms ========================================================================== */ /* Google Fonts moved to in header.php for non-blocking async preconnect performance */ :root { --ksg-gold: #C89B3C; --ksg-gold-light: #dfb867; --ksg-gold-dark: #9e7626; --ksg-gold-gradient: linear-gradient(135deg, #C89B3C 0%, #dfb867 50%, #9e7626 100%); --ksg-black: #111111; --ksg-charcoal: #1a1a1a; --ksg-dark-card: #222222; --ksg-brown: #3e2723; --ksg-white: #ffffff; --ksg-offwhite: #f8f9fa; --ksg-text: #333333; --ksg-text-muted: #6c757d; --ksg-border: rgba(200, 155, 60, 0.2); --ksg-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); --ksg-shadow-gold: 0 10px 25px rgba(200, 155, 60, 0.25); --ksg-glass: rgba(255, 255, 255, 0.85); --ksg-glass-dark: rgba(17, 17, 17, 0.85); --ksg-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); --ksg-radius: 12px; } /* Dark Mode Overrides */ [data-theme="dark"] { --ksg-black: #ffffff; --ksg-white: #111111; --ksg-offwhite: #181818; --ksg-text: #e0e0e0; --ksg-text-muted: #a0a0a0; --ksg-border: rgba(200, 155, 60, 0.3); --ksg-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); --ksg-glass: rgba(24, 24, 24, 0.9); } /* ========================================================================== Base Styles & Typography ========================================================================== */ html { overflow-x: hidden !important; max-width: 100% !important; width: 100%; } body { font-family: 'Poppins', sans-serif; color: var(--ksg-text); background-color: var(--ksg-offwhite); line-height: 1.7; overflow-x: hidden !important; max-width: 100% !important; width: 100%; position: relative; transition: background-color 0.3s ease, color 0.3s ease; } h1, h2, h3, .font-heading { font-family: 'Playfair Display', serif; color: var(--ksg-black); font-weight: 700; } h4, h5, h6, .font-subheading { font-family: 'Montserrat', sans-serif; font-weight: 600; color: var(--ksg-black); } a { color: var(--ksg-gold); text-decoration: none; transition: var(--ksg-transition); } a:hover { color: var(--ksg-gold-light); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #1a1a1a; } ::-webkit-scrollbar-thumb { background: var(--ksg-gold); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--ksg-gold-light); } /* ========================================================================== Luxury Buttons & Inputs ========================================================================== */ .btn-luxury { background: var(--ksg-gold-gradient); color: #111111 !important; font-weight: 600; font-family: 'Montserrat', sans-serif; padding: 12px 28px; border-radius: 50px; border: none; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; box-shadow: var(--ksg-shadow-gold); transition: var(--ksg-transition); position: relative; overflow: hidden; z-index: 1; } .btn-luxury::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #111111; transition: var(--ksg-transition); z-index: -1; opacity: 0; } .btn-luxury:hover { color: #ffffff !important; transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.4); } .btn-luxury:hover::before { opacity: 1; } .btn-outline-luxury { background: transparent; color: var(--ksg-gold) !important; border: 2px solid var(--ksg-gold); font-weight: 600; padding: 10px 26px; border-radius: 50px; text-transform: uppercase; letter-spacing: 1px; font-size: 0.85rem; transition: var(--ksg-transition); } .btn-outline-luxury:hover { background: var(--ksg-gold); color: #111 !important; box-shadow: var(--ksg-shadow-gold); } .form-control, .form-select { border-radius: 8px; border: 1px solid rgba(0,0,0,0.15); padding: 12px 18px; background: var(--ksg-white); color: var(--ksg-text); transition: var(--ksg-transition); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { border-color: rgba(255,255,255,0.15); } .form-control:focus, .form-select:focus { border-color: var(--ksg-gold); box-shadow: 0 0 0 0.25rem rgba(200, 155, 60, 0.25); background: var(--ksg-white); color: var(--ksg-text); } /* ========================================================================== Sticky Header & Mega Menu ========================================================================== */ .top-bar { background-color: #111111; color: #aaaaaa; font-size: 0.8rem; padding: 8px 0; border-bottom: 1px solid rgba(200, 155, 60, 0.3); } .top-bar a { color: #cccccc; } .top-bar a:hover { color: var(--ksg-gold); } .navbar-luxury { background: var(--ksg-glass); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); padding: 15px 0; border-bottom: 1px solid var(--ksg-border); transition: var(--ksg-transition); } .navbar-luxury.sticky-top { box-shadow: var(--ksg-shadow); } .navbar-brand img { height: 50px; transition: var(--ksg-transition); } .navbar-nav .nav-link { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.9rem; color: var(--ksg-black) !important; text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 18px !important; position: relative; } .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--ksg-gold); transition: var(--ksg-transition); transform: translateX(-50%); } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { width: 70%; } /* Mega Menu */ .mega-menu { position: static !important; } .mega-menu-content { position: absolute; left: 0; right: 0; width: 100%; background: var(--ksg-white); border-radius: 0 0 15px 15px; border: 1px solid var(--ksg-border); border-top: 3px solid var(--ksg-gold); box-shadow: 0 20px 40px rgba(0,0,0,0.15); padding: 35px; display: none; z-index: 1000; } .mega-menu:hover .mega-menu-content { display: block; animation: fadeInDown 0.3s ease; } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .mega-menu-title { font-family: 'Playfair Display', serif; color: var(--ksg-gold); font-size: 1.1rem; font-weight: 700; border-bottom: 1px solid var(--ksg-border); padding-bottom: 8px; margin-bottom: 15px; } .mega-menu-list { list-style: none; padding: 0; } .mega-menu-list li { margin-bottom: 10px; } .mega-menu-list a { color: var(--ksg-text); font-size: 0.9rem; transition: var(--ksg-transition); display: flex; align-items: center; } .mega-menu-list a:hover { color: var(--ksg-gold); transform: translateX(5px); } /* ========================================================================== Luxury Card & Grid System ========================================================================== */ .card-luxury { background: var(--ksg-white); border: 1px solid var(--ksg-border); border-radius: var(--ksg-radius); overflow: hidden; box-shadow: var(--ksg-shadow); transition: var(--ksg-transition); height: 100%; position: relative; } .card-luxury:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(200, 155, 60, 0.2); border-color: var(--ksg-gold); } .card-img-wrapper { position: relative; overflow: hidden; padding-top: 75%; /* 4:3 Aspect Ratio */ } .card-img-wrapper img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1); } .card-luxury:hover .card-img-wrapper img { transform: scale(1.12); } .badge-offer { position: absolute; top: 15px; left: 15px; background: var(--ksg-gold-gradient); color: #111; font-weight: 700; font-size: 0.75rem; padding: 5px 12px; border-radius: 50px; z-index: 2; box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .badge-new { position: absolute; top: 15px; right: 15px; background: #111; color: #fff; font-weight: 600; font-size: 0.75rem; padding: 5px 12px; border-radius: 50px; z-index: 2; } /* ========================================================================== Section Styling & Headers ========================================================================== */ .section-padding { padding: 90px 0; } .section-title { text-align: center; margin-bottom: 60px; } .section-title .subtitle { font-family: 'Montserrat', sans-serif; color: var(--ksg-gold); text-transform: uppercase; letter-spacing: 3px; font-size: 0.85rem; font-weight: 600; display: block; margin-bottom: 10px; } .section-title h2 { font-size: 2.5rem; position: relative; display: inline-block; padding-bottom: 15px; } .section-title h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 3px; background: var(--ksg-gold-gradient); } /* ========================================================================== Interactive Before & After Project Slider ========================================================================== */ .before-after-container { position: relative; overflow: hidden; border-radius: var(--ksg-radius); box-shadow: var(--ksg-shadow); user-select: none; aspect-ratio: 16 / 9; } .before-after-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .before-img-wrapper { position: absolute; top: 0; left: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1; } .before-img-wrapper img { position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; max-width: none !important; } .slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background: var(--ksg-gold); z-index: 2; cursor: ew-resize; } .slider-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: var(--ksg-gold); color: #111; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0,0,0,0.5); font-size: 14px; } /* ========================================================================== Footer & Floating Widgets ========================================================================== */ .footer-luxury { background-color: #111111; color: #aaaaaa; padding-top: 80px; border-top: 3px solid var(--ksg-gold); position: relative; } .footer-luxury h5 { color: #ffffff; font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 25px; position: relative; padding-bottom: 10px; } .footer-luxury h5::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background: var(--ksg-gold); } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: #aaaaaa; transition: var(--ksg-transition); } .footer-links a:hover { color: var(--ksg-gold); padding-left: 8px; } /* Sticky Mobile Quick-Call/Quote Bar */ .sticky-mobile-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(17, 17, 17, 0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(200, 155, 60, 0.4); display: flex; z-index: 1040; padding: 10px 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6); } .sticky-mobile-bar a { flex: 1; text-align: center; color: #ffffff; font-weight: 600; font-size: clamp(0.78rem, 3.2vw, 0.88rem); display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; text-decoration: none; transition: all 0.2s ease; } .sticky-mobile-bar a:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.15); } .sticky-mobile-bar a:first-child { color: var(--ksg-gold); } .sticky-mobile-bar a:nth-child(2) { color: #25D366; } .sticky-mobile-bar a i { font-size: 1.45rem; flex-shrink: 0; transition: transform 0.2s ease; } .sticky-mobile-bar a:active i, .sticky-mobile-bar a:hover i { transform: scale(1.15); } /* ========================================================================== Hero Banner Carousel Fixed Height Styling ========================================================================== */ .hero-slide-item { height: 580px !important; min-height: 580px !important; max-height: 580px !important; overflow: hidden; position: relative; background-color: #111; background-position: center center; background-repeat: no-repeat; background-size: cover; } .hero-slide-container { height: 100% !important; display: flex !important; align-items: center !important; z-index: 2; } .hero-slide-img-card { height: 440px !important; width: 100%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); border: 1px solid rgba(200, 155, 60, 0.5); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-radius: 1rem; padding: 0.5rem; box-shadow: 0 1rem 3rem rgba(0,0,0,0.5); } .hero-slide-img-card img { height: 410px !important; width: 100% !important; object-fit: contain !important; background: #ffffff; border-radius: 0.5rem; } /* ========================================================================== Comprehensive Responsive Adjustments for All Mobile Devices & Screens ========================================================================== */ @media (max-width: 991.98px) { .hero-slide-item { height: auto !important; min-height: 500px !important; max-height: none !important; padding: 40px 0; } .section-title h2 { font-size: 2rem; } .mega-menu-content { position: static; box-shadow: none; padding: 15px; } .navbar-nav .nav-link::after { display: none; } body { padding-bottom: 60px; /* Room for sticky mobile bar on tablet & mobile */ } } @media (max-width: 767.98px) { .section-padding { padding: 60px 0; } .hero-slide-container { padding-top: 1rem !important; padding-bottom: 1rem !important; } .display-3, .display-4 { font-size: 1.8rem !important; line-height: 1.3 !important; } .hero-slide-item .lead { font-size: 0.95rem !important; margin-bottom: 1.5rem !important; } .hero-slide-item .btn { padding: 10px 20px !important; font-size: 0.82rem !important; } .navbar-brand img { max-height: 48px !important; } /* Prevent any Bootstrap row or flex container from overflowing horizontally on mobile */ .row { max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .row > * { padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5); padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5); } /* Ensure images inside cards and sliders never overflow */ .card, .card-luxury, .before-after-container { max-width: 100%; overflow: hidden; } /* Optimize luxury cards for 2-column mobile viewports */ .card-luxury .card-body { padding: 0.85rem !important; } .card-luxury h6.font-heading, .card-luxury h5.font-heading { font-size: 0.88rem !important; margin-bottom: 0.35rem !important; } .card-luxury .fs-5 { font-size: 0.95rem !important; } .card-luxury .btn { padding: 0.4rem 0.6rem !important; font-size: 0.78rem !important; } .badge-offer, .badge-new { top: 8px !important; left: 8px !important; font-size: 0.65rem !important; padding: 3px 8px !important; } } @media (max-width: 575.98px) { .hero-slide-item { min-height: 440px !important; padding: 25px 0; } .display-3, .display-4 { font-size: 1.5rem !important; } .section-title h2 { font-size: 1.5rem !important; } .section-padding { padding: 45px 0 !important; } .navbar-brand img { max-height: 42px !important; } .top-bar { font-size: 0.75rem; } .sticky-mobile-bar a { font-size: 0.78rem; gap: 4px; padding: 0 2px; } .sticky-mobile-bar a i { font-size: 1.05rem !important; } .card-luxury .card-body { padding: 0.7rem !important; } .card-luxury h6.font-heading { font-size: 0.82rem !important; } .card-luxury .btn { padding: 0.35rem 0.5rem !important; font-size: 0.72rem !important; } } /* Custom Thin Scrollbar for Sidebar Filter Catalog */ .custom-sidebar-scroll, .filter-catalog-card { scrollbar-width: thin; scrollbar-color: rgba(200, 155, 60, 0.4) transparent; } .custom-sidebar-scroll::-webkit-scrollbar, .filter-catalog-card::-webkit-scrollbar { width: 5px; } .custom-sidebar-scroll::-webkit-scrollbar-track, .filter-catalog-card::-webkit-scrollbar-track { background: transparent; } .custom-sidebar-scroll::-webkit-scrollbar-thumb, .filter-catalog-card::-webkit-scrollbar-thumb { background: rgba(200, 155, 60, 0.4); border-radius: 10px; } .custom-sidebar-scroll::-webkit-scrollbar-thumb:hover, .filter-catalog-card::-webkit-scrollbar-thumb:hover { background: var(--ksg-gold); } /* Custom Luxury Sort Dropdown */ .sort-dropdown-menu .dropdown-item { transition: all 0.2s ease; } .sort-dropdown-menu .dropdown-item:hover:not(.active) { background-color: rgba(200, 155, 60, 0.15); color: #111; transform: translateX(3px); }