/* * === GLOBAL STYLES === * Resets, basic typography, and common utility classes. */ /* Font Faces */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/Manrope.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Saira'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/saira/v21/mem9Ya2wxmKQyNGMb4Yccrg.woff2) format('woff2'); } /* Universal Box-Sizing */ *, ::before, ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; } /* HTML and Body Base Styles */ html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: "Saira", sans-serif; font-feature-settings: normal; } body { margin: 0; line-height: inherit; font-family: "Manrope", sans-serif; background: #fff; padding: 0; } /* Scrollbar Customization for Desktop */ @media (min-width: 769px) { ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #888, #666); border-radius: 10px; transition: all 0.3s ease; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(135deg, #555, #333); } ::-webkit-scrollbar-corner { background: transparent; } } /* Hide scrollbar on mobile/tablet */ @media (max-width: 768px) { ::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } * { scrollbar-width: none !important; -ms-overflow-style: none !important; } body { -webkit-overflow-scrolling: touch; } } /* Specific scrollbar hiding for Overflow X elements */ .overflow-x-auto::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; background: transparent !important; } .overflow-x-auto { scrollbar-width: none !important; -ms-overflow-style: none !important; } /* Selection Styles */ ::selection { color: #333; background: #eee; } /* HTML Elements */ hr { height: 0; color: inherit; border-top-width: 1px; } abbr[title] { text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { color: inherit; text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } table { text-indent: 0; border-color: inherit; border-collapse: collapse; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; background-color: transparent; background-image: none; } progress { vertical-align: baseline; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } textarea { resize: vertical; } /* Placeholder styles */ ::placeholder { opacity: 1; color: #9ca3af; } button, [role="button"] { cursor: pointer; } :disabled { cursor: default; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } [hidden] { display: none; } /* * === CUSTOM PROPERTIES (CSS Variables) === */ :root { --border-blue-500: #3b82f6; --border-green-500: #10b981; --border-purple-500: #8b5cf6; --border-orange-500: #f59e0b; --primary: #4361ee; --primary-light: #4cc9f0; --secondary: #3a0ca3; --dark: #1a1a2e; --light: #f8f9fa; --gray: #6c757d; --success: #4bb543; } /* * === ANIMATIONS === */ @keyframes float { 0%, 100% { transform: translateY(0) rotate(30deg); } 50% { transform: translateY(-20px) rotate(30deg); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } } @keyframes slideInLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* Loading Dots Animation */ @keyframes dotPulse { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1); } } /* Animation Utility Classes */ .animate-float { animation: float 6s ease-in-out infinite; } .animate-fadeIn { animation: fadeIn 0.5s ease-out forwards; opacity: 0; } .animate-fadeUp { animation: fadeInUp 0.8s ease-out forwards; } .animate-slideDown { animation: slideDown 0.3s ease-out; } .animate-count-up { animation: countUp 0.6s ease-out forwards; } .animate-spin-slow { animation: spin 8s linear infinite; } .animate-marquee { animation: marquee 30s linear infinite; } .animate-bounce { animation: bounce 1.2s infinite; } .animate-slideInLeft { animation: slideInLeft 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .animate-gradient { background-size: 200% 200%; animation: gradientFlow 3s ease infinite; } /* Shimmer Effect */ .shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } /* Loading Dots Component */ .dots { display: flex; justify-content: center; align-items: center; gap: 8px; } .circle { width: 7px; height: 7px; background-color: #9ca3af; border-radius: 50%; animation: dotPulse 1.2s ease-in-out infinite; } .circle:nth-child(1) { animation-delay: 0s; } .circle:nth-child(2) { animation-delay: 0.2s; } .circle:nth-child(3) { animation-delay: 0.4s; } /* Preloader */ .preloader { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.5s ease; } .spinner { width: 100px; height: 100px; border: 5px solid #ddd; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 0.6s linear infinite; } /* * === LAYOUT COMPONENTS === */ .header { position: relative; width: 100%; min-height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; } .header video { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -1; transform: translate(-50%, -50%); object-fit: cover; } .content { z-index: 1; text-align: left; padding-left: 5rem; } /* Hero Overlay */ .hero-overlay { transition: all 0.3s ease-in 0s; background: linear-gradient(99deg, rgba(26, 26, 26, 0.9) 0%, rgba(64, 64, 64, 0.1) 100%); } /* Poleng Section (Black & White pattern) */ .bg-poleng-700 { position: relative; padding: 50px 0; width: 100%; overflow: hidden; background: rgba(238, 238, 238, 0.35); } .poleng { position: relative; height: 100%; width: 100%; background-color: #333; } .poleng::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #333; background-image: url(../../assets/balivillamanager/poleng.png); background-position: bottom center; background-size: cover; background-repeat: no-repeat; opacity: 0.9; pointer-events: none; z-index: 1; } .poleng > * { position: relative; z-index: 2; } .poleng-h-screen { height: 100vh; width: 100%; margin: 0; } .step { position: relative; height: 100%; width: 100%; background-color: #111827; } .step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../../assets/balivillamanager/ketut.jpeg); background-position: bottom center; background-size: cover; background-repeat: no-repeat; opacity: 0.1; pointer-events: none; z-index: 1; } .step > * { position: relative; z-index: 2; } /* Glass Effect */ .glass { backdrop-filter: blur(10px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .glass-effect-black { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Backdrop Filters */ .backdrop-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .backdrop-blur-sm { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* Fixed Navigation */ .fixed-nav { position: fixed; width: 100%; z-index: 40; transition: all 0.3s ease; background-color: #fff; } .nav-transparent { background-color: transparent; } /* Navigation Links */ .nav a { position: relative; } .nav a:after { content: ''; position: absolute; width: 0; height: 3px; bottom: -2px; left: 0; background-color: #ff0080; transition: width 0.3s ease; } .nav a:hover:after { width: 100%; } /* Sidebar */ .sidebar { position: fixed; top: 0; right: -400px; width: 400px; height: 100%; background: #fff; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); transition: right 1.3s ease; z-index: 60; overflow: hidden; } .sidebar.open { right: 0; } .overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1999; display: none; } .overlay.active { display: block; } /* Language Switcher */ .language-switcher { width: 100%; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .language-btn { border: 1px solid #333; background-image: linear-gradient(310deg, #141727, #3a416f); padding: 8px 25px; border-radius: 9999px; cursor: pointer; font-weight: 500; font-size: 0.875rem; color: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(8px); } .language-btn.active { color: #2563eb; font-weight: 600; background: #fff; } /* * === SECTION STYLES === */ .ren-my-pro-screen { overflow: hidden; } .bg-img-full { height: 100vh; width: 100%; margin: 0; overflow: hidden; background-image: linear-gradient(to bottom, rgba(3, 7, 18, 0.95), rgba(3, 7, 18, 0.4), transparent), url(../../assets/header/property-marketings.jpg); background-position: bottom center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } .rent-your-room { position: relative; margin-top: 60px; margin-bottom: 60px; height: 100vh; } .investment { position: relative; background: url(../../assets/header/header-2.jpg) no-repeat center top; background-size: cover; height: 100vh; width: 100%; overflow: hidden; } .partners { position: relative; height: 100%; width: 100%; background: rgba(238, 238, 238, 0.35); background-image: url('../../assets/footer/footer-grow.png'); background-position: bottom center; background-size: cover; background-repeat: no-repeat; } .go-green { position: relative; width: 100%; margin: 50px auto; } .testimonial { background: transparent; height: 100%; } /* Carousel */ .carousel-container { width: 100%; position: relative; } .carousel-track { display: flex; width: 500%; animation: slide 25s infinite; } .carousel-slide { width: 20%; } @keyframes slide { 0%, 15% { transform: translateX(0); } 20%, 35% { transform: translateX(-20%); } 40%, 55% { transform: translateX(-40%); } 60%, 75% { transform: translateX(-60%); } 80%, 95% { transform: translateX(-80%); } 100% { transform: translateX(0); } } /* * === UTILITY CLASSES === */ /* Height Utilities */ .h-dekstop { height: 60vh; } .h-middle { height: 155px; } .h-half-s { height: 55vh; } /* Border Radius */ .br-top { border-top-right-radius: 85px; border-top-left-radius: 85px; } .rounded-b-xxl::before { right: 0; left: 0; bottom: -35px; background: #fff; border-bottom: 5px solid #fff; border-bottom-left-radius: 45px; border-bottom-right-radius: 45px; content: ""; display: block; height: 60px; position: absolute; width: 100%; z-index: 1; } /* Line Clamp Utilities */ .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .line-clamp-none { overflow: visible; display: block; -webkit-box-orient: horizontal; -webkit-line-clamp: none; } /* Text Gradients */ .text-gradient-primary { display: inline-block; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: linear-gradient(310deg, #7928ca, #ff0080); } .rainbow-text { background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #54a0ff, #5f27cd); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 200%; animation: gradientFlow 3s ease infinite; } /* Background Gradients */ .gradient-enzihost { background-image: linear-gradient(to bottom right, #4d21b7, #ff8080, #5c60f5, #8957ff, #ffbb00) !important; background-size: 300% 300% !important; animation: gradientFlow 6s ease infinite !important; } .bg-conic-gradient { background-image: conic-gradient(from 225deg, #ffc876, #79fff7, #9f53ff, #ff98e2, #ffc876) !important; } .bg-gradient-primary { background: linear-gradient(to right, rgba(240, 150, 255, 0.15), rgba(191, 200, 252, 0.15), rgba(187, 148, 255, 0.15)); border: 5px solid #fff; border-radius: 25px; } .bg-gradient-secondary { background-image: linear-gradient(310deg, #141727, #3a416f); } .bg-dark-800 { background-color: #111b21; } /* Button Styles */ .btn-gradient-primary { background-image: linear-gradient(310deg, #7928ca, #2563eb); } .btn-go-green { background-image: linear-gradient(45deg, #00e3b9, #00c749); } /* Card Hover Effects */ .service-card-hover { transition: all 0.25s ease; } .service-card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15); } .testimonial-card-hover { transition: all 0.2s ease; } .testimonial-card-hover:hover { transform: translateX(4px); } /* Modal Animation */ .modal-animate { animation: fadeInUp 0.3s ease-out; } /* * === MEDIA QUERIES === */ @media (min-width: 350px) and (max-width: 1300px) { .header { padding: 0; } .header video { padding: 0; } .poleng-h-screen { height: 100%; } .content { padding-left: 2rem; padding-right: 2rem; } .content h1 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 15px; } .content p { font-size: 1rem; } .ren-my-pro { padding: 0; } .ren-my-pro-screen { padding: 0; } .d-none-md { display: none !important; } .bg-h-screen { padding-right: 8px; } .bg-poleng-700 { padding-right: 0; padding-top: 0; padding-left: 0; } .poleng-h-screen { padding-right: 0; padding-top: 0; padding-left: 0; } .ren-my-pro { padding: 0 !important; } .ren-my-pro-screen { padding: 0 !important; border-radius: 0 !important; background-attachment: scroll !important; } .bg-img-full { height: 100%; background-attachment: scroll; } .h-dekstop { height: 55%; } .line-clamp-sm { overflow: hidden; font-size: 25px; font-weight: bold; color: #fff; } .sidebar { width: 100%; right: -100%; } .language-switcher { position: absolute; right: 40px; top: 20px; } .go-green { border-radius: 0 !important; margin: 20px auto; } .d-flex-card { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .rent-your-room { height: 100%; } .rent-your-room h1 { margin-top: 10px; } } @media (max-width: 480px) { .xs\:inline { display: inline; } .xs\:hidden { display: none; } }