/* ================================ THEME VARIABLES Default = DARK MODE ================================ */ :root { --bg-color: #121212; --text-color: #e0e0e0; --card-bg-color: #1e1e1e; --card-text-color: #c7c7c7; --navbar-bg-color: #1e1e1e; --navbar-text-color: #ffffff; --link-color: #bbbbbb; --hover-border-color: #ffffff; /* Brand gold used everywhere instead of red */ --brand-gold: #D4AF37; /* Buttons default to brand gold */ --button-bg-color: #C7A431; /* slightly deeper gold fits dark */ --button-text-color: #111111; --footer-bg-color: #2c2c2c; } /* Light mode overrides (toggle this by adding .light-mode on ) */ .light-mode { --bg-color: white; --text-color: black; --card-bg-color: #f8f9fa; --card-text-color: black; --navbar-bg-color: white; --navbar-text-color: black; --link-color: black; --hover-border-color: black; --button-bg-color: var(--brand-gold); --button-text-color: white; --footer-bg-color: #f0f0f0; } /* Utility */ .text-gold { color: var(--brand-gold) !important; } /* ================================ GLOBAL / RESETS ================================ */ .container-fluid { width: 100%; max-width: 100%; overflow-x: hidden; } html, body { overflow-x: hidden; width: 100%; } * { box-sizing: border-box; } img, video { max-width: 100%; height: auto; display: block; } /* Apply theme colors */ body { background-color: var(--bg-color) !important; color: var(--text-color) !important; transition: background-color 0.3s ease, color 0.3s ease; } .container, .navbar, .banner-card, .follow-us { background-color: var(--bg-color) !important; color: var(--text-color) !important; } /* Override Bootstrap card styles */ .card { background-color: var(--card-bg-color) !important; color: var(--card-text-color) !important; transition: background-color 0.3s ease, color 0.3s ease; } /* Service pictograms are light-on-dark by default; normalize in light-mode */ .service-box img { filter: invert(1) brightness(1.5); transition: filter 0.3s ease; } .light-mode .service-box img { filter: none; } /* Text-specific helpers */ .text-dark, .text-primary, .text-muted { color: var(--text-color) !important; } .text-danger { color: var(--brand-gold) !important; } /* “Our Services” label */ /* Tables adopt theme vars */ .table, .table th, .table td, .card-text, .card-title { color: var(--text-color) !important; } .table, .card, .table th, .table td { background-color: var(--card-bg-color) !important; border-color: var(--hover-border-color) !important; } .table-bordered th, .table-bordered td { border-color: var(--hover-border-color) !important; } /* ================================ NAVBAR ================================ */ .custom-navbar { position: fixed !important; top: 0; left: 0; right: 0; z-index: 9999; width: 100%; box-shadow: 0 4px 6px rgba(0,0,0,0.25); background-color: var(--navbar-bg-color); transition: background-color 0.3s ease, box-shadow 0.3s ease; } body { padding-top: 160px; } /* Link base */ .custom-navbar .nav-link { color: var(--navbar-text-color) !important; position: relative; transition: color 0.3s ease, transform 0.3s ease; font-weight: 600; } /* Gold underline on hover/active */ .custom-navbar .nav-link::after { content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px; background-color: var(--brand-gold); transition: width 0.25s ease; } .custom-navbar .nav-link:hover::after, .custom-navbar .nav-link.active::after { width: 100%; } /* Keep text readable on hover for each theme */ .light-mode .custom-navbar .nav-link { color: #000 !important; } .light-mode .custom-navbar .nav-link:hover { color: #000 !important; transform: scale(1.05); } .dark-mode .custom-navbar .nav-link { color: #fff !important; } .dark-mode .custom-navbar .nav-link:hover { color: #fff !important; transform: scale(1.05); } /* Navigation list and links (secondary nav pattern some pages use) */ .nav-list { margin: 20px auto !important; padding: 0 !important; display: flex !important; flex-wrap: wrap !important; gap: 30px !important; justify-content: center !important; } .nav-list li { display: inline !important; } .nav-list li a { text-decoration: none !important; font-weight: bold !important; font-family: 'Roboto', sans-serif !important; color: var(--link-color) !important; border-bottom: 2px solid transparent !important; padding: 5px 0 !important; font-size: 24px !important; letter-spacing: 1px !important; transition: color 0.3s ease, border-color 0.3s ease; } .nav-list li a:hover { border-bottom: 2px solid var(--brand-gold) !important; } /* Logo */ .logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* Responsive nav/logo */ @media (max-width: 768px) { .logo img { height: 100px; } .nav-list { flex-direction: column !important; align-items: center !important; gap: 15px !important; } .nav-list li a { font-size: 18px !important; } } /* ================================ HERO (full-width image + left copy) ================================ */ .hero { position: relative !important; width: 100%; height: 85vh; /* adjust 80–95vh as desired */ overflow: hidden; } .hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Softer overlay so the photo still shines */ .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.08) 100% ); pointer-events: none; } /* Keep copy left & centered vertically */ .hero-copy { position: absolute !important; top: 50% !important; left: 8% !important; transform: translateY(-50%) !important; z-index: 2; width: min(800px, 90%); text-align: left; padding: 0 0.5rem; } /* Force white for readability inside hero */ .hero-copy, .hero-copy h1 { color: #fff !important; } /* Headline style + readability helpers */ .hero-heading { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(2.2rem, 6vw, 5rem); line-height: 1.1; margin-bottom: 1rem; text-transform: uppercase; text-shadow: 2px 2px 8px rgba(0,0,0,0.6); -webkit-text-stroke: 0.5px rgba(0,0,0,0.2); /* subtle outline */ } /* Any accent spans inside hero become gold */ .hero-heading span { color: var(--brand-gold) !important; } /* Hero CTA button in gold */ .hero .schedule-btn { background-color: var(--button-bg-color) !important; border: none; font-size: 1.2rem; padding: 0.8rem 1.5rem; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.28); color: var(--button-text-color) !important; font-weight: 700; text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease, transform 0.1s ease; } .hero .schedule-btn:hover { background-color: #b8952d !important; color: #fff !important; transform: translateY(-1px); } /* ================================ BANNER CARD (non-hero cards) ================================ */ .banner-card { border-radius: 50px !important; overflow: hidden; position: relative; box-shadow: none !important; max-width: 1200px; margin: 0 auto; } .banner-card .card-img-top { border-radius: 50px !important; width: 100%; height: auto; object-fit: cover; object-position: center; max-width: 1200px; display: block; } .banner-card .card-img-overlay { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); max-width: 90%; padding: 0 10px; z-index: 2; } .banner-card .card-title { font-size: clamp(24px, 5vw, 50px); font-weight: bold; text-align: left; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); margin: 0; font-family: 'Roboto', sans-serif; width: 100%; } @media (max-width: 768px) { .banner-card { max-width: 90%; } .banner-card .card-title { font-size: 28px; } .banner-card .card-img-overlay { left: 10%; max-width: 80%; } .schedule-btn { font-size: 16px; padding: 12px 15px; } } @media (max-width: 576px) { .banner-card { max-width: 95%; } .banner-card .card-img-overlay { left: 10%; max-width: 85%; } .banner-card .card-title { font-size: 20px; } .schedule-btn { font-size: 14px; padding: 10px 12px; } } /* ================================ BUTTONS (generic outside hero) ================================ */ .schedule-btn { display: inline-block; background-color: var(--button-bg-color) !important; /* GOLD */ color: var(--button-text-color) !important; text-align: center; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: bold; padding: 15px 20px; text-decoration: none; border-radius: 8px; transition: background-color 0.3s ease, color 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.2); text-transform: uppercase; } .schedule-btn:hover { background-color: #b8952d !important; color: #ffffff !important; } /* APT button (kept grey per your design) */ .apt-btn { display: inline-block; background-color: #555555; color: white; text-align: center; font-family: 'Roboto', sans-serif; font-size: 20px; font-weight: bold; padding: 15px 20px; text-decoration: none; border-radius: 50px; margin-top: 15px; transition: background-color 0.3s ease, color 0.3s ease; box-shadow: 0 4px 8px rgba(0,0,0,0.2); text-transform: uppercase; } .apt-btn:hover { background-color: #1b1b1b; color: white; } @media (max-width: 768px) { .apt-btn { font-size: 18px; padding: 14px 18px; max-width: 250px; margin-top: -20px; } } @media (max-width: 576px) { .apt-btn { font-size: 16px; padding: 12px 15px; max-width: 220px; } } @media (max-width: 375px) { .apt-btn { font-size: 14px; padding: 10px 12px; max-width: 200px; } } /* ================================ SECTIONS / TITLES ================================ */ .gallery-container { width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 20px; } .gallery-title { text-align: left; margin-top: 5rem; letter-spacing: 2.5px; font-size: 3.5rem; font-weight: 900; text-transform: uppercase; } .sub-title { font-family: 'Poppins', sans-serif; font-size: 50px; font-weight: bold; color: var(--brand-gold) !important; } .transformation-title { font-family: 'Poppins', sans-serif; font-size: 50px; font-weight: bold; color: var(--brand-gold) !important; } .transformation-img { width: 100%; height: 500px; object-fit: cover; border-radius: 8px; } /* Who we are — background is now gold (text will use theme vars) */ .who-we-are-container { background-color: var(--brand-gold) !important; padding: 7% 5%; margin: 0 auto; width: 100%; min-height: 300px; display: flex; justify-content: center; align-items: center; text-align: center; } @media (max-width: 768px) { .who-we-are-container { padding: 10% 3%;} } .static-text { color: #333333; } /* used where you need fixed dark text */ /* ================================ FOOTER ================================ */ footer, footer .container, footer section { background-color: var(--footer-bg-color) !important; color: var(--text-color) !important; padding: 20px; transition: background-color 0.3s ease, color 0.3s ease; } footer p, footer a { color: var(--link-color) !important; text-decoration: none; transition: color 0.3s ease; } footer a:hover { color: var(--brand-gold) !important; } footer i { color: var(--link-color) !important; transition: color 0.3s ease; } footer a:hover i { color: var(--brand-gold) !important; } /* ================================ IFRAME EXEMPT (maps/instagram) ================================ */ .no-dark-mode { background-color: white !important; color: black !important; padding: 20px; border-radius: 10px; } .instagram-media{ background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); width: 100%; max-width: 100%; } /* ================================ IMAGE COMPARISON SLIDER / CAROUSEL ================================ */ :root { --image-comparison-slider-width: min(80vw, 100px); --image-comparison-slider-handle-width: 50px; --image-comparison-slider-height: 100px; } .slider-container { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 3rem; width: 100%; padding: 1rem 0; box-sizing: border-box; } @media (max-width: 1024px) { .slider-container { flex-wrap: wrap; } } .image-comparison-slider { position: relative; width: var(--image-comparison-slider-width); height: var(--image-comparison-slider-height); overflow: hidden; border-radius: 0.5rem; box-shadow: -7px 5px 16px 1px rgba(56, 86, 122, 0.6); cursor: col-resize; } .image-comparison-slider img { display: block; width: 100%; height: var(--image-comparison-slider-height); object-fit: cover; pointer-events: none; user-select: none; } .image-comparison-slider .img-wrapper { position: absolute; top: 0; right: 0; width: 50%; height: 100%; overflow: hidden; z-index: 1; } .image-comparison-slider .img-wrapper img { position: absolute; top: 0; right: 0; width: auto; height: 100%; object-fit: cover; object-position: right center; } .image-comparison-slider .label { position: absolute; top: 1rem; z-index: 3; color: #fff; background-color: rgba(0,0,0,0.33); border-radius: 0.25rem; padding: 0.5rem 0.75rem; font-size: 0.85rem; text-align: center; letter-spacing: 1px; user-select: none; opacity: 0; transition: 0.25s cubic-bezier(.68, .26, .58, 1.22); } .image-comparison-slider:hover .label { opacity: 1; } .image-comparison-slider .label.label-before { left: 1rem; } .image-comparison-slider .label.label-after { right: 1rem; background-color: #f95540; } .image-comparison-slider .handle { position: absolute; top: 0; left: 50%; width: var(--image-comparison-slider-handle-width); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; user-select: none; z-index: 2; } .image-comparison-slider .handle-line { width: 2px; flex-grow: 1; background-color: #fff; } #image-comparison-slider .handle-circle { width: var(--image-comparison-slider-handle-width); height: var(--image-comparison-slider-handle-width); color: #fff; border: 2px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: space-evenly; } /* Carousel */ .gallery-title { font-size: clamp(2.4rem, 5vw, 5rem); font-weight: bold; margin-bottom: 2rem; } #videoCarousel { max-width: 800px; margin: auto; border-radius: 10px; overflow: hidden; } .carousel video { border-radius: 10px; } /* Tiny screens */ @media (max-width: 200px) { :root { --image-comparison-slider-width: 90vw; --image-comparison-slider-height: 200px; } .schedule-btn:hover { background-color: #b8952d; color: var(--button-text-color); } } /* ================================ SERVICE TABS & CARDS ================================ */ /* Pills (neutral, not Bootstrap blue) */ .nav-pills .nav-link { background: transparent !important; color: var(--text-color) !important; border-radius: 6px; padding: 10px 18px; transition: all 0.2s ease; font-weight: 600; } /* Active tab — invert colors for contrast */ .nav-pills .nav-link.active { background-color: var(--text-color) !important; color: var(--bg-color) !important; box-shadow: 0 3px 6px rgba(0,0,0,0.25); } /* Hover per theme */ .light-mode .nav-pills .nav-link:hover { background: rgba(0,0,0,0.08) !important; } .dark-mode .nav-pills .nav-link:hover { background: rgba(255,255,255,0.12) !important; } /* Service Cards */ .card { border: none !important; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,0.15); } body.light-mode .card { background: #ffffff !important; color: #111 !important; } body.dark-mode .card { background: #1e1e1e !important; color: #f1f1f1 !important; } /* Page header (remove dark strip in light; keep gradient in dark) */ .services-header { padding: 3rem 0; text-align: center; } body.light-mode .services-header { background: #fff !important; color: #000 !important; border: none !important; } body.dark-mode .services-header { background: linear-gradient(180deg, #0f0f0f 0%, #161616 100%) !important; color: #fff !important; } /* ================================ CONTACT-US OUTLINE BUTTON VISIBILITY ================================ */ /* Light mode */ body.light-mode .btn-outline-light { color: #000 !important; border: 2px solid #000 !important; } body.light-mode .btn-outline-light:hover { background-color: #000 !important; color: #fff !important; } /* Dark mode */ body.dark-mode .btn-outline-light { color: #fff !important; border: 2px solid #fff !important; } body.dark-mode .btn-outline-light:hover { background-color: #fff !important; color: #000 !important; } /* ================================ FOOTER VISIBILITY FIX ================================ */ /* Make section headers (Quick Links, Contact) readable in both themes */ footer h5, footer strong, footer .fw-bold { color: var(--text-color) !important; font-weight: 600 !important; } /* Make sure footer links remain visible in light mode */ body.light-mode footer a { color: #000 !important; } body.light-mode footer a:hover { color: var(--brand-gold) !important; } /* Dark mode footer links */ body.dark-mode footer a { color: #e0e0e0 !important; } body.dark-mode footer a:hover { color: var(--brand-gold) !important; }