/* ====================================================== Palette variables & alternates — pick one set or mix ====================================================== HOW TO USE: - The stylesheet below uses the "DEFAULT LAVENDER" palette. - To try another look, replace the :root values with one of the alternate blocks. - Suggested uses: --primary : main brand color (buttons, links, highlights) --primary-700 : darker primary (hover, headings) --accent : soft background accent / gradients --bg : page background base --card-bg : card background color --muted : secondary text ALTERNATE PALETTES (copy the block you prefer and paste into :root) 1) LIGHT LAVENDER (airy / soft) --primary: #BFA6F0; --primary-700: #9A7ED9; --accent: #EDE6FB; --bg: #FBF9FF; --card-bg: #FFFFFF; --muted: #7E7692; 2) DEFAULT LAVENDER (balanced) <-- current used in stylesheet --primary: #8B6BD1; --primary-700: #6F55B2; --accent: #CDB8F2; --bg: #F5F3FB; --card-bg: #FFFFFF; --muted: #757095; 3) DEEP LAVENDER (luxury / contrast) --primary: #6A3FB0; --primary-700: #4F2E8A; --accent: #BDA0EA; --bg: #F1EEFA; --card-bg: #FFFFFF; --muted: #6B6480; 4) LAVENDER + TEAL ACCENT (modern contrast) --primary: #8B6BD1; --primary-700: #6F55B2; --accent: #CDEFF0; (teal accent for buttons/badges) --bg: #F6FBFB; --card-bg: #FFFFFF; --muted: #6D6A7D; TIP: For buttons use linear-gradient(90deg, var(--primary), var(--primary-700)) */ /* styles.css — Classy modern lavender theme for PG Finder */ :root{ --primary: #8b6bd1; /* lavender purple */ --primary-700: #6f55b2; --accent: #cdb8f2; /* soft lavender accent */ --bg: #f5f3fb; /* pale lilac background */ --card-bg: #ffffff; --muted: #757095; --muted-2: #9b95a8; --glass: rgba(255,255,255,0.6); --card-radius: 14px; --shadow-1: 0 6px 20px rgba(21,16,60,0.06); --shadow-2: 0 18px 50px rgba(21,16,60,0.08); --max-width: 1100px; --border: rgba(124,109,176,0.12); /* Footer dark defaults (light theme uses bg gradient) */ --footer-top: linear-gradient(180deg, #2a2440 0%, #241f36 100%); --footer-text: #ece7fb; } /* ---------------------------- Dark theme overrides (data-theme="dark" on ) ---------------------------- */ :root[data-theme="dark"]{ --primary: #bfb0ff; --primary-700: #9a80e6; --accent: #4b3b63; --bg: #0f1020; --card-bg: #121221; --muted: #bfb8d8; --muted-2: #aa9ec0; --glass: rgba(255,255,255,0.03); --card-radius: 14px; --shadow-1: 0 6px 20px rgba(4,6,20,0.6); --shadow-2: 0 18px 50px rgba(6,8,30,0.6); --max-width: 1100px; --border: rgba(255,255,255,0.04); --footer-top: linear-gradient(180deg, #0b0a15 0%, #090812 100%); --footer-text: #dcd7ff; } /* Smooth theme transitions */ body, .navbar, .card, .form-control, .modal-content, .btn, footer { transition: background-color .2s ease, color .2s ease, border-color .2s ease; } /* Reset & base */ * { box-sizing: border-box; } html,body { height:100%; } body { font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: #1f1b2e; margin: 0; padding: 0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45; } /* container */ .container-xxl { max-width: var(--max-width); margin: 0 auto; padding: 1rem; } /* NAVBAR */ .navbar { background: rgba(255,255,255,0.75); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } :root[data-theme="dark"] .navbar { background: rgba(10,10,18,0.6); border-bottom: 1px solid var(--border); } .navbar-brand { font-weight: 700; color: var(--primary); font-size: 1.15rem; letter-spacing: .2px; } .nav-link { color: var(--muted) !important; } .nav-link:hover { color: var(--primary-700) !important; } /* Search area */ .search-bar { margin-top: 18px; margin-bottom: 18px; } .search-input { min-width: 220px; border-radius: 10px; } /* Cards */ .card.pg { background: linear-gradient(180deg, var(--card-bg) 0%, #fbfbff 100%); border-radius: var(--card-radius); transition: transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .18s ease; overflow: hidden; border: 1px solid rgba(135,120,190,0.06); box-shadow: var(--shadow-1); } :root[data-theme="dark"] .card.pg { background: linear-gradient(180deg, var(--card-bg) 0%, rgba(18,18,33,0.8) 100%); border: 1px solid rgba(255,255,255,0.04); box-shadow: var(--shadow-1); } .card.pg:hover { transform: translateY(-8px); box-shadow: var(--shadow-2); } :root[data-theme="dark"] .card.pg:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); } /* Listing tile */ .listing-title { font-size: 1.04rem; font-weight: 700; color: var(--primary-700); margin-bottom: 0.15rem; } .listing-meta { color: var(--muted); font-size: .9rem; margin-bottom: .4rem; } .price { font-weight:800; color: var(--primary); font-size:1.02rem; } /* Listing Carousel Styles */ .listing-carousel { position: relative; width: 100%; border-radius: 12px 12px 0 0; overflow: hidden; } .carousel-container { position: relative; width: 100%; height: 180px; overflow: hidden; border-radius: 12px 12px 0 0; } .carousel-slide { transition: opacity 0.3s ease-in-out; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.95); border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 15; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); transition: all 0.2s ease; opacity: 0; } .listing-carousel:hover .carousel-btn { opacity: 1; } .carousel-btn:hover { background: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transform: translateY(-50%) scale(1.1); } .carousel-btn:active { transform: translateY(-50%) scale(0.95); } .carousel-prev { left: 12px; } .carousel-next { right: 12px; } .carousel-btn i { font-size: 18px; color: #333; } .carousel-badge { position: absolute; bottom: 12px; left: 12px; background: var(--primary); color: white; padding: 4px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 600; z-index: 15; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); pointer-events: none; } /* Top Rated card carousel */ .top-rated-carousel-wrapper { position: relative; padding: 0 2.75rem; } .top-rated-carousel-scroll { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; scroll-snap-type: x proximity; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .top-rated-carousel-scroll::-webkit-scrollbar { display: none; } .top-rated-card { flex: 0 0 calc(33.333% - 1rem); min-width: calc(33.333% - 1rem); scroll-snap-align: start; } @media (max-width: 991.98px) { .top-rated-card { flex-basis: calc(50% - 1rem); min-width: calc(50% - 1rem); } } @media (max-width: 575.98px) { .top-rated-carousel-wrapper { padding: 0 1.5rem; } .top-rated-card { flex-basis: 85%; min-width: 85%; } } .top-rated-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 999px; border: none; background: rgba(255, 255, 255, 0.95); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; z-index: 2; } .top-rated-carousel-nav:hover:not(:disabled) { transform: translateY(-50%) scale(1.05); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2); } .top-rated-carousel-nav:disabled { opacity: 0.45; cursor: not-allowed; } .top-rated-carousel-nav[data-carousel-prev] { left: 0; } .top-rated-carousel-nav[data-carousel-next] { right: 0; } .top-rated-carousel-nav i { font-size: 1.2rem; color: var(--primary-700); } /* Listing card buttons - ensure proper styling (only for listing cards) */ .listing-card-body { display: flex; flex-direction: column; } .listing-card-body .btn { text-align: center; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .listing-card-body .btn-outline-primary { background-color: transparent; border-color: var(--primary); color: var(--primary); } .listing-card-body .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: white !important; } /* Dark mode: ensure text is visible on hover for outline buttons in listing cards */ :root[data-theme="dark"] .listing-card-body .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #0f1020 !important; /* Dark text for better contrast on light purple background */ } /* Outline primary button hover states - override Bootstrap blue */ .btn-outline-primary { border-color: var(--primary); color: var(--primary); transition: background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease; } /* Override text-white class for outline buttons in light mode */ .btn-outline-primary.text-white { color: var(--primary) !important; } .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: white !important; transform: translateY(-1px); } /* Dark mode: ensure text is visible on hover for outline buttons */ :root[data-theme="dark"] .btn-outline-primary:hover { background-color: var(--primary); border-color: var(--primary); color: #0f1020 !important; /* Dark text for better contrast on light purple background */ } /* Dark mode: allow text-white for outline buttons (show border and text in dark mode) */ :root[data-theme="dark"] .btn-outline-primary.text-white { color: white !important; border-color: var(--primary) !important; } .btn-outline-primary:focus, .btn-outline-primary:active { background-color: var(--primary-700); border-color: var(--primary-700); color: white; box-shadow: 0 0 0 0.25rem rgba(139, 107, 209, 0.25); } /* Thumbnails */ .card .card-img-top { object-fit: cover; height: 180px; width: 100%; display: block; } :root[data-theme="dark"] .card .card-img-top { filter: none; } /* Buttons */ .btn-primary { background: linear-gradient(90deg, var(--primary) 0%, var(--primary-700) 100%); border: none; box-shadow: 0 8px 24px rgba(139,107,209,0.12); padding: 0.6rem 1rem; border-radius: 10px; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; color: #fff !important; } :root[data-theme="dark"] .btn-primary { background: linear-gradient(90deg, var(--primary) 0%, var(--primary-700) 100%) !important; box-shadow: 0 8px 30px rgba(191, 176, 255, 0.3) !important; color: #0f1020 !important; border: 1px solid rgba(191, 176, 255, 0.2); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(110,88,176,0.12); background: linear-gradient(90deg, var(--primary-700) 0%, var(--primary) 100%); color: #fff; } :root[data-theme="dark"] .btn-primary:hover { background: linear-gradient(90deg, var(--primary-700) 0%, var(--primary) 100%) !important; box-shadow: 0 16px 40px rgba(191, 176, 255, 0.4) !important; color: #0f1020 !important; } .btn-primary:focus, .btn-primary:active { background: linear-gradient(90deg, var(--primary-700) 0%, var(--primary) 100%); color: #fff; border: none; } :root[data-theme="dark"] .btn-primary:focus, :root[data-theme="dark"] .btn-primary:active { background: linear-gradient(90deg, var(--primary-700) 0%, var(--primary) 100%) !important; color: #0f1020 !important; border: 1px solid rgba(191, 176, 255, 0.3); } .btn-outline-secondary { border-radius: 10px; border-color: rgba(124,109,176,0.14); color: var(--primary-700); } :root[data-theme="dark"] .btn-outline-secondary { border-color: rgba(255,255,255,0.06); color: var(--primary-700); } /* Forms */ .form-control, .form-select { border-radius: 10px; border: 1.5px solid rgba(124,109,176,0.2); box-shadow: none; padding: .6rem .75rem; background: #fff; color: #1f1b2e; } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background: rgba(255,255,255,0.03); color: #efeaff; border: 1px solid rgba(255,255,255,0.04); } .form-control:focus { border-color: var(--primary); box-shadow: 0 6px 20px rgba(139,107,209,0.08); outline: none; } :root[data-theme="dark"] .form-control:focus, :root[data-theme="dark"] .form-select:focus { box-shadow: 0 6px 20px rgba(139,107,209,0.08); } /* Dark mode: ensure dropdown options are visible */ :root[data-theme="dark"] .form-select option, :root[data-theme="dark"] select option { background-color: var(--card-bg) !important; color: #efeaff !important; } /* Ensure select dropdown text is visible in dark mode */ :root[data-theme="dark"] .form-select, :root[data-theme="dark"] select { color: #efeaff !important; } /* Dark mode: style for when dropdown is open (some browsers) */ :root[data-theme="dark"] .form-select option:checked, :root[data-theme="dark"] select option:checked { background-color: var(--primary) !important; color: #0f1020 !important; } /* Footer (4-column) */ footer { color: var(--footer-text); } footer .fw-bold { color: #f6f3ff; } footer a { color: rgba(255,255,255,0.92); text-decoration: none; opacity: .95; } footer a:hover { color: #fff; text-decoration: underline; opacity: 1; } footer.bg-dark { background: var(--footer-top); border-top: 1px solid rgba(255,255,255,0.03); } footer .small { color: rgba(255,255,255,0.75); } /* Social icons area */ footer .bi { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); padding: 8px; border-radius: 8px; color: #fff; display:inline-block; width: 36px; height: 36px; text-align: center; line-height: 20px; } footer .d-flex.gap-3 a { opacity: .95; transition: transform .12s ease, opacity .12s ease; } footer .d-flex.gap-3 a:hover { transform: translateY(-4px); opacity: 1; } /* Utility / small components */ .kicker { font-size: .8rem; color: var(--muted-2); text-transform: uppercase; letter-spacing: .14em; } .badge-soft { background: linear-gradient(90deg, rgba(205,184,242,0.18), rgba(139,107,209,0.08)); color: var(--primary-700); padding: .2rem .5rem; border-radius: 999px; font-weight:600; } /* Modal styling */ .modal-content { background: var(--card-bg); border: 1px solid rgba(139, 107, 209, 0.16); border-radius: 20px; box-shadow: 0 22px 55px rgba(21, 16, 60, 0.18); color: var(--text, #1f193d); } .modal-header, .modal-body, .modal-footer { border-color: rgba(139, 107, 209, 0.12); background: transparent; } .modal-title { font-weight: 600; color: var(--text, #1f193d); } .modal-input { border: 1.25px solid rgba(139, 107, 209, 0.28); border-radius: 12px; padding: 0.8rem 1rem; background: rgba(255, 255, 255, 0.92); color: inherit; transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease; } .modal-input:hover, .modal-input:focus { border-color: rgba(139, 107, 209, 0.55); box-shadow: 0 0 0 3px rgba(139, 107, 209, 0.12); background: rgba(255, 255, 255, 0.98); } .modal-input::placeholder { color: rgba(31, 25, 61, 0.38); } .btn-close { filter: brightness(0.3); opacity: 0.7; transition: filter 0.2s ease, opacity 0.2s ease; } .btn-close:hover { opacity: 1; filter: brightness(0.1); } .btn-close:focus { box-shadow: none; } :root[data-theme="dark"] .modal-content { background: rgba(18, 18, 34, 0.96); border-color: rgba(191, 176, 255, 0.18); box-shadow: 0 30px 70px rgba(4, 6, 18, 0.65); color: #efeaff; } :root[data-theme="dark"] .modal-title, :root[data-theme="dark"] .modal .form-label, :root[data-theme="dark"] .modal .small, :root[data-theme="dark"] .modal .form-check-label { color: rgba(239, 234, 255, 0.92); } :root[data-theme="dark"] .modal-input { background: rgba(12, 12, 24, 0.85); border-color: rgba(191, 176, 255, 0.26); color: #efeaff; } :root[data-theme="dark"] .modal-input::placeholder { color: rgba(239, 234, 255, 0.45); } :root[data-theme="dark"] .modal-input:hover, :root[data-theme="dark"] .modal-input:focus { border-color: rgba(191, 176, 255, 0.5); box-shadow: 0 0 0 3px rgba(191, 176, 255, 0.18); background: rgba(18, 18, 34, 0.95); } :root[data-theme="dark"] .btn-close { filter: invert(1) brightness(1.4); opacity: 0.9; } :root[data-theme="dark"] .modal .link-light, :root[data-theme="dark"] .modal a { color: rgba(191, 176, 255, 0.88); } :root[data-theme="dark"] .modal .link-light:hover, :root[data-theme="dark"] .modal a:hover { color: rgba(213, 203, 255, 0.95); } /* End modal styling */ /* Themed alerts */ .alert-themed-success { background: linear-gradient(90deg, rgba(139, 107, 209, 0.1), rgba(111, 85, 178, 0.1)); border: 1px solid var(--primary); color: var(--primary-700); } .alert-themed-danger { background: rgba(220, 53, 69, 0.1); border: 1px solid #dc3545; color: #dc3545; } :root[data-theme="dark"] .alert-themed-success { background: linear-gradient(90deg, rgba(191, 176, 255, 0.15), rgba(154, 128, 230, 0.15)); border-color: var(--primary); color: var(--primary); } :root[data-theme="dark"] .alert-themed-danger { background: rgba(220, 53, 69, 0.2); border-color: #ff6b7a; color: #ff6b7a; } /* Utility: small text contrast in dark */ :root[data-theme="dark"] .small, :root[data-theme="dark"] p, :root[data-theme="dark"] .listing-meta { color: var(--muted); } /* Leaflet container neutral background (helps map look consistent) */ .leaflet-container { background: transparent; } /* Responsive adjustments */ @media (max-width: 991px) { .container-xxl { padding-left: .75rem; padding-right: .75rem; } .card.pg:hover { transform: none; box-shadow: var(--shadow-1); } } /* Mobile */ @media (max-width: 576px) { .card .card-img-top { height: 140px; } .search-input { width: 100%; } } /* Body dark background/text to eliminate light gradient bleed */ :root[data-theme="dark"] body { background: var(--bg); color: #efeaff; } /* Bootstrap variable overrides for dark theme */ :root[data-theme="dark"]{ --bs-body-bg: #0f1020; --bs-body-color: #efeaff; --bs-emphasis-color: #ffffff; --bs-secondary-color: #bfb8d8; --bs-link-color: #bfb0ff; --bs-link-hover-color: #d7ccff; --bs-border-color: rgba(255,255,255,0.12); } /* Generic text/link adjustments in dark */ :root[data-theme="dark"] a { color: var(--bs-link-color); } :root[data-theme="dark"] a:hover { color: var(--bs-link-hover-color); } :root[data-theme="dark"] .text-muted { color: var(--muted) !important; } /* Contact page - ensure lavender links */ .contact-page a.text-primary, .contact-page .text-primary { color: var(--primary) !important; } .contact-page a.text-primary:hover { color: var(--primary-700) !important; } /* Neutralize bright white utilities under dark */ :root[data-theme="dark"] .bg-white { background-color: var(--card-bg) !important; } :root[data-theme="dark"] .text-dark { color: #efeaff !important; } :root[data-theme="dark"] .border { border-color: var(--bs-border-color) !important; } /* Navbar link readability under dark */ :root[data-theme="dark"] .navbar .nav-link { color: var(--muted) !important; } :root[data-theme="dark"] .navbar .nav-link:hover { color: var(--primary-700) !important; } /* ====================================================== Listing Detail Page Styles ====================================================== */ /* Carousel container for 16:9 aspect ratio */ #listingImageGallery { aspect-ratio: 16 / 9; width: 100%; background-color: #f5f5f5; } .carousel-inner { height: 100%; } .carousel-item { height: 100%; } /* Listing detail image gallery */ .listing-detail-gallery { width: 100%; height: 100%; object-fit: contain; } /* Property Gallery Grid */ .property-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 1rem; } .gallery-item { position: relative; cursor: pointer; overflow: hidden; border-radius: 8px; aspect-ratio: 1; transition: transform 0.2s ease, box-shadow 0.2s ease; } .gallery-item:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } .gallery-item-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 8px; } .gallery-thumbnail { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .gallery-item:hover .gallery-thumbnail { transform: scale(1.1); } .gallery-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s ease; border-radius: 8px; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-overlay i { font-size: 2rem; color: white; } /* Image Zoom Modal */ #imageZoomModal .modal-content { background: rgba(0, 0, 0, 0.95) !important; } #imageZoomModal .modal-body { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: 2rem; } #zoomedImage { max-height: 85vh; object-fit: contain; border-radius: 8px; } .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.9); color: var(--primary-700); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1055; transition: all 0.2s ease; font-size: 1.5rem; } .gallery-nav-btn:hover { background: white; transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .gallery-nav-prev { left: 20px; } .gallery-nav-next { right: 20px; } .gallery-image-counter { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); color: white; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; } @media (max-width: 768px) { .property-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.75rem; } .gallery-nav-btn { width: 40px; height: 40px; font-size: 1.2rem; } .gallery-nav-prev { left: 10px; } .gallery-nav-next { right: 10px; } #zoomedImage { max-height: 70vh; } } /* Section headings with theme color */ .listing-section-heading { color: var(--primary-700); } /* Icon with primary color */ .icon-primary { color: var(--primary); } .icon-primary-700 { color: var(--primary-700); } /* Accent background boxes */ .accent-bg { background: var(--accent); } /* Theme border utilities */ .theme-border { border: 1px solid var(--border); } .theme-border-color { border-color: var(--border) !important; } /* Price display */ .price-display { color: var(--primary-700); font-weight: 700; } /* Room card nested styling */ .room-card-nested { border: 1px solid var(--border); } /* Badge with primary background */ .badge-primary { background: var(--primary); color: white; font-weight: 500; } /* Badge with success gradient */ .badge-success-gradient { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white; } /* Info item with icon */ .info-item-icon { color: var(--primary-700); font-size: 1.5rem; } /* Sticky sidebar card */ .sticky-sidebar-card { top: 20px; border: 1px solid var(--border); } /* Review profile image */ .review-profile-img { width: 50px; height: 50px; object-fit: cover; border: 2px solid var(--primary); } .review-profile-icon { font-size: 50px; color: var(--primary); } /* Rating input styles */ .rating-input { display: flex; gap: 0.25rem; align-items: center; flex-direction: row-reverse; justify-content: flex-end; } .rating-input input[type="radio"] { display: none; } .rating-input .rating-star { cursor: pointer; font-size: 1.75rem; color: #ddd; transition: color 0.2s, transform 0.1s; display: inline-block; } .rating-input .rating-star:hover, .rating-input .rating-star:hover ~ .rating-star { color: #ffc107; } .rating-input input[type="radio"]:checked ~ .rating-star { color: #ffc107; } .rating-input .rating-star i { display: block; } /* Review actions */ .review-actions { display: flex; gap: 0.5rem; } .review-item { position: relative; } /* Text line height utilities */ .text-line-height-lg { line-height: 1.8; } .text-line-height-md { line-height: 1.7; } /* Preserve whitespace */ .preserve-whitespace { white-space: pre-wrap; } /* Navbar brand logos (light/dark) */ .navbar .navbar-brand img.brand-logo { height: 45px; width: auto; display: inline-block; vertical-align: middle; } .navbar .navbar-brand img.brand-logo-dark { display: none; } :root[data-theme="dark"] .navbar .navbar-brand img.brand-logo-light { display: none; } :root[data-theme="dark"] .navbar .navbar-brand img.brand-logo-dark { display: inline-block; } /* ====================================================== Timeline Styles ====================================================== */ .timeline { position: relative; max-width: 920px; margin: 0 auto; padding: 2.5rem 0; } .timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: linear-gradient(180deg, var(--primary), var(--primary-700)); transform: translateX(-50%); border-radius: 999px; opacity: 0.65; } .timeline-item { position: relative; width: 50%; padding: 0 2.75rem; opacity: 0; transform: translateY(40px); } .timeline-item:not(:last-child) { margin-bottom: 3rem; } .timeline-item:nth-child(odd) { left: 0; text-align: right; } .timeline-item:nth-child(even) { left: 50%; text-align: left; } .timeline-dot { position: absolute; top: 1.1rem; width: 22px; height: 22px; border-radius: 50%; background: var(--card-bg); border: 5px solid var(--primary); box-shadow: 0 0 0 6px rgba(139, 107, 209, 0.18); transition: transform 0.3s ease, box-shadow 0.3s ease; } .timeline-item:nth-child(odd) .timeline-dot { right: -11px; } .timeline-item:nth-child(even) .timeline-dot { left: -11px; } .timeline-card { background: var(--card-bg); border-radius: 16px; padding: 1.75rem; border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(21, 16, 60, 0.08); transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .timeline-item:nth-child(odd) .timeline-card { margin-left: auto; } .timeline-item:nth-child(even) .timeline-card { margin-right: auto; } .timeline-item:hover .timeline-card { transform: translateY(-8px); box-shadow: 0 18px 45px rgba(21, 16, 60, 0.12); border-color: rgba(139, 107, 209, 0.45); } .timeline-item:hover .timeline-dot { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(139, 107, 209, 0.22); } .timeline-date { font-size: 0.9rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--primary); margin-bottom: 0.4rem; } .timeline-title { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text, #1f193d); } .timeline-description { font-size: 0.95rem; line-height: 1.7; color: var(--muted); margin: 0; } @media (max-width: 992px) { .timeline { max-width: 100%; padding: 2rem 0; } .timeline-item { width: 100%; left: 0 !important; text-align: left !important; padding: 0 0 0 3.5rem; opacity: 0; transform: translateY(40px); } .timeline-item:not(:last-child) { margin-bottom: 2.5rem; } .timeline::before { left: 22px; transform: none; } .timeline-dot { left: 11px !important; right: auto !important; } .timeline-card { margin: 0 !important; padding: 1.5rem; } } @keyframes timelineFadeUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } .timeline-item.is-visible { animation: timelineFadeUp 0.9s ease forwards; } .timeline-item.is-visible:nth-child(1) { animation-delay: 0.12s; } .timeline-item.is-visible:nth-child(2) { animation-delay: 0.32s; } .timeline-item.is-visible:nth-child(3) { animation-delay: 0.52s; } .timeline-item.is-visible:nth-child(4) { animation-delay: 0.72s; } :root[data-theme="dark"] .timeline::before { background: linear-gradient(180deg, rgba(139, 107, 209, 0.8), rgba(111, 85, 178, 0.8)); opacity: 0.9; } :root[data-theme="dark"] .timeline-dot { background: #0f1020; border-color: rgba(191, 176, 255, 0.95); box-shadow: 0 0 0 6px rgba(191, 176, 255, 0.18); } :root[data-theme="dark"] .timeline-item:hover .timeline-dot { box-shadow: 0 0 0 8px rgba(191, 176, 255, 0.24); } :root[data-theme="dark"] .timeline-card { background: rgba(18, 18, 34, 0.94); border-color: rgba(191, 176, 255, 0.12); box-shadow: 0 18px 45px rgba(10, 8, 20, 0.55); } :root[data-theme="dark"] .timeline-item:hover .timeline-card { border-color: rgba(191, 176, 255, 0.35); } :root[data-theme="dark"] .timeline-title { color: #efeaff; } :root[data-theme="dark"] .timeline-description { color: rgba(224, 218, 255, 0.78); } /* Team section */ .team-card .team-name { font-weight: 600; color: var(--text, #1f193d); } .team-card .team-role { font-size: 0.9rem; color: var(--muted); } :root[data-theme="dark"] .team-card .team-name { color: rgba(239, 234, 255, 0.95); } :root[data-theme="dark"] .team-card .team-role { color: rgba(224, 218, 255, 0.7); } :root[data-theme="dark"] .navbar .navbar-toggler { border-color: rgba(239, 234, 255, 0.4); } :root[data-theme="dark"] .navbar .navbar-toggler-icon { filter: invert(1) brightness(1.2); opacity: 0.9; } :root[data-theme="dark"] .navbar .navbar-toggler:hover .navbar-toggler-icon { opacity: 1; } /* ====================================================== WhatsApp Floating Button ====================================================== */ .whatsapp-float { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: #25D366; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); z-index: 1000; text-decoration: none; transition: all 0.3s ease; animation: pulse 2s infinite; } .whatsapp-float:hover { background: #20BA5A; transform: scale(1.1); box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6); color: white; text-decoration: none; } .whatsapp-float:active { transform: scale(0.95); } .whatsapp-float i { color: white; } @keyframes pulse { 0% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); } 50% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.8), 0 0 0 10px rgba(37, 211, 102, 0.1); } 100% { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); } } /* Responsive adjustments */ @media (max-width: 768px) { .whatsapp-float { width: 56px; height: 56px; font-size: 24px; bottom: 20px; right: 20px; } }