/* =================================================================== Skypark Kepler Lido JB — Design tokens =================================================================== */ :root{ --navy-950: #081524; --navy-900: #0B2338; --navy-800: #123354; --navy-700: #1A4570; --brand-blue: #1487C9; --brand-blue-dark: #0E6EA3; --teal-600: #127A79; --gold-500: #C7A15C; --gold-600: #B08A45; --gold-100: #F3E7CD; --sand-50: #F7F2E7; --sand-100: #F0E7D6; --sand-line: #E3D8C1; --ink-900: #16212C; --ink-700: #35424C; --ink-500: #5B6873; --line: #E2E6EA; --white: #FFFFFF; --font-display: "Fraunces", "Georgia", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --container-w: 1240px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --shadow-md: 0 12px 32px -12px rgba(11,35,56,0.22); --shadow-lg: 0 24px 60px -20px rgba(11,35,56,0.32); --dur: 220ms; --ease: cubic-bezier(.4,0,.2,1); } *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* =================================================================== Scroll-reveal animation system Scoped under .has-js so content stays fully visible if JS never runs (progressive enhancement — see inline script in ). =================================================================== */ .has-js [data-animate]{ opacity: 0; transition: opacity 700ms var(--ease), transform 700ms var(--ease); will-change: transform, opacity; } .has-js [data-animate="fade-up"]{ transform: translateY(28px); } .has-js [data-animate="fade-left"]{ transform: translateX(36px); } .has-js [data-animate="fade-right"]{ transform: translateX(-36px); } .has-js [data-animate="zoom-in"]{ transform: scale(0.93); } .has-js [data-animate].is-inview{ opacity: 1; transform: none; } body{ margin: 0; font-family: var(--font-body); color: var(--ink-900); background: var(--white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width: 100%; display: block; } a{ color: inherit; } h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; line-height: 1.15; } p{ margin: 0; } ul,ol{ margin: 0; padding: 0; list-style: none; } button{ font-family: inherit; } .container{ width: 100%; max-width: var(--container-w); margin-inline: auto; padding-inline: 20px; } @media (min-width: 768px){ .container{ padding-inline: 32px; } } .skip-link{ position: absolute; left: -999px; top: auto; background: var(--navy-900); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm); z-index: 999; } .skip-link:focus{ left: 20px; top: 20px; } :focus-visible{ outline: 3px solid var(--brand-blue); outline-offset: 2px; border-radius: 4px; } /* =================================================================== Buttons =================================================================== */ .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); touch-action: manipulation; } .btn:active{ transform: scale(0.97); } .btn-lg{ min-height: 52px; padding: 14px 30px; font-size: 1rem; } .btn-sm{ min-height: 40px; padding: 8px 20px; font-size: 0.875rem; } .btn-block{ width: 100%; } .btn-gold{ background: linear-gradient(135deg, var(--gold-500), var(--gold-600)); color: var(--navy-950); box-shadow: 0 10px 24px -8px rgba(199,161,92,0.55); } .btn-gold:hover{ box-shadow: 0 14px 30px -8px rgba(199,161,92,0.7); transform: translateY(-1px); } .btn-outline{ background: transparent; color: var(--navy-900); border-color: var(--line); } .btn-outline:hover{ border-color: var(--navy-900); background: var(--sand-50); } .btn-outline-light{ background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.55); backdrop-filter: blur(6px); } .btn-outline-light:hover{ background: rgba(255,255,255,0.16); border-color: #fff; } /* =================================================================== Header / Nav =================================================================== */ .site-header{ position: fixed; inset-inline: 0; top: 0; z-index: 100; transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .site-header.is-scrolled{ background: rgba(8,21,36,0.82); backdrop-filter: blur(10px); box-shadow: 0 4px 24px -8px rgba(0,0,0,0.35); } .nav-inner{ display: flex; align-items: center; justify-content: space-between; padding-block: 12px; } .brand{ display: inline-flex; text-decoration: none; } .brand-mark{ height: 52px; width: auto; border-radius: 10px; } .main-nav{ display: none; align-items: center; gap: 28px; } .main-nav a:not(.btn){ color: #fff; text-decoration: none; font-weight: 500; font-size: 0.95rem; padding: 8px 2px; } .main-nav a:not(.btn):hover{ color: var(--gold-500); } .nav-toggle{ display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.12); border: none; cursor: pointer; } .nav-toggle-bar{ width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } .mobile-menu{ display: flex; flex-direction: column; gap: 4px; padding: 0 20px; background: rgba(8,21,36,0.97); backdrop-filter: blur(10px); max-height: 0; overflow: hidden; transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease); } .mobile-menu.is-open{ max-height: 320px; padding: 10px 20px 22px; } .mobile-menu a:not(.btn){ color: #fff; text-decoration: none; padding: 12px 6px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.08); min-height: 44px; display: flex; align-items: center; } .mobile-menu a.btn{ margin-top: 10px; justify-content: center; } @media (min-width: 960px){ .main-nav{ display: flex; } .nav-toggle{ display: none; } .mobile-menu{ display: none; } } /* =================================================================== Hero =================================================================== */ .hero{ position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding-top: 90px; color: #fff; } .hero-bg{ position: absolute; inset: 0; background-size: cover; background-position: center right; transform: scale(1.02); } .hero-scrim{ position: absolute; inset: 0; background: linear-gradient(100deg, rgba(6,16,28,0.94) 0%, rgba(8,21,36,0.82) 32%, rgba(8,21,36,0.42) 58%, rgba(8,21,36,0.18) 78%, rgba(8,21,36,0.35) 100%), linear-gradient(to top, rgba(4,12,22,0.85) 0%, rgba(4,12,22,0.05) 45%); } .hero-inner{ position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px; padding-block: 60px 64px; width: 100%; } .hero-copy{ max-width: 700px; } .eyebrow{ font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; color: var(--brand-blue-dark); margin-bottom: 14px; } .eyebrow-light{ color: var(--gold-500); } .hero-title{ font-size: clamp(2.4rem, 7vw, 4.5rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 22px; } .hero-statement{ font-family: var(--font-display); font-size: clamp(1.15rem, 2.6vw, 1.5rem); font-weight: 500; font-style: italic; color: var(--gold-500); max-width: 56ch; margin-bottom: 20px; } .hero-lede{ font-size: 1.05rem; color: rgba(255,255,255,0.86); max-width: 60ch; margin-bottom: 30px; } .hero-actions{ display: flex; flex-wrap: wrap; gap: 14px; } .price-float{ align-self: flex-start; margin-left: auto; width: min(310px, 100%); background: rgba(16,32,50,0.6); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-lg); } .price-float-label{ font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.65); } .price-float-value{ font-family: var(--font-display); font-size: 2.3rem; font-weight: 600; color: var(--gold-500); margin: 2px 0 10px; } .price-float-desc{ font-size: 0.85rem; color: rgba(255,255,255,0.78); line-height: 1.5; } .hero-scroll-cue{ position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.75); z-index: 2; } .cue-dot{ animation: cueBob 1.8s ease-in-out infinite; } @keyframes cueBob{ 0%,100%{ transform: translateY(0); opacity: 1; } 50%{ transform: translateY(14px); opacity: 0.3; } } @media (prefers-reduced-motion: reduce){ .cue-dot{ animation: none; } } @media (min-width: 760px){ .hero-inner{ flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 40px; } } /* =================================================================== Sections (generic) =================================================================== */ .section{ padding-block: 72px; } @media (min-width: 768px){ .section{ padding-block: 108px; } } .section-navy{ background: linear-gradient(160deg, var(--navy-900), var(--navy-950)); color: #fff; } .section-sand{ background: var(--sand-50); } .section-final{ background: radial-gradient(circle at 20% 20%, var(--navy-800), var(--navy-950) 70%); color: #fff; } .section-head{ max-width: 760px; margin-bottom: 48px; } .section-title{ font-size: clamp(1.6rem, 3.6vw, 2.5rem); font-weight: 600; letter-spacing: -0.01em; margin-bottom: 16px; } .section-lede{ font-size: 1.05rem; color: var(--ink-500); max-width: 62ch; } .text-white{ color: #fff; } .text-light{ color: rgba(255,255,255,0.82); } /* =================================================================== Grid / Cards =================================================================== */ .grid-3{ display: grid; gap: 24px; grid-template-columns: 1fr; } @media (min-width: 720px){ .grid-3{ grid-template-columns: repeat(3, 1fr); } } .card{ background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .card-dark{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); color: #fff; } .card-dark:hover{ background: rgba(255,255,255,0.08); } .card-icon{ display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--sand-100); color: var(--brand-blue-dark); margin-bottom: 18px; } .card-icon svg{ width: 26px; height: 26px; } .card-dark .card-icon{ background: rgba(255,255,255,0.1); color: var(--gold-500); } .card-title{ font-size: 1.15rem; font-weight: 600; margin-bottom: 10px; } .card-title-note{ font-family: var(--font-body); font-weight: 400; font-size: 0.85em; color: var(--ink-500); } .card-dark .card-title-note{ color: rgba(255,255,255,0.65); } .card-text{ color: var(--ink-500); font-size: 0.96rem; } .card-dark .card-text{ color: rgba(255,255,255,0.75); } /* =================================================================== Solusi section =================================================================== */ .solusi-grid{ display: grid; gap: 40px; align-items: center; } @media (min-width: 900px){ .solusi-grid{ grid-template-columns: 1fr 1fr; gap: 64px; } } .check-list{ display: flex; flex-direction: column; gap: 16px; margin-top: 28px; } .check-list li{ display: flex; align-items: flex-start; gap: 14px; font-size: 1rem; color: rgba(255,255,255,0.9); } .check-icon{ flex: none; width: 26px; height: 26px; color: var(--gold-500); } .check-icon svg{ width: 100%; height: 100%; } .solusi-media img{ border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; height: auto; } /* =================================================================== Pricing =================================================================== */ .pricing-grid{ align-items: stretch; } .price-card{ background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; gap: 6px; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .price-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); } .price-card-featured{ border-color: var(--gold-500); box-shadow: var(--shadow-lg); position: relative; } .price-card-featured::before{ content: "Paling fleksibel"; position: absolute; top: -14px; left: 28px; background: var(--gold-500); color: var(--navy-950); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; } .price-card-tag{ font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-blue-dark); } .price-card-name{ font-size: 1.6rem; font-weight: 600; margin-top: 4px; } .price-card-sub{ color: var(--ink-500); font-size: 0.95rem; margin-bottom: 10px; } .price-card-rupiah{ font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--navy-900); } .price-card-rm{ color: var(--ink-500); font-size: 0.9rem; margin-bottom: 14px; } .price-card-specs{ display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; margin-bottom: auto; border-bottom: 1px dashed var(--line); } .price-card-specs li{ font-size: 0.9rem; color: var(--ink-700); } .price-card > .btn{ margin-top: 20px; } /* =================================================================== Rental projection =================================================================== */ .rental-grid{ display: grid; gap: 48px; } @media (min-width: 900px){ .rental-grid{ grid-template-columns: 1fr 1fr; align-items: center; } } .rental-number{ font-family: var(--font-display); font-size: clamp(4rem, 12vw, 7rem); font-weight: 600; color: var(--gold-600); line-height: 1; margin: 18px 0 6px; } .rental-number span{ font-size: 0.45em; } .rental-number-label{ font-weight: 600; color: var(--ink-700); margin-bottom: 18px; } .rental-breakdown{ display: flex; flex-direction: column; gap: 18px; } .rental-row{ display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; } .rental-row-type{ font-weight: 700; color: var(--navy-900); } .rental-row-bar{ height: 10px; border-radius: 999px; background: var(--sand-line); overflow: hidden; } .rental-row-bar span{ display: block; height: 100%; background: linear-gradient(90deg, var(--brand-blue), var(--teal-600)); border-radius: 999px; } .rental-row-value{ font-weight: 700; color: var(--navy-900); white-space: nowrap; } .rental-row-value small{ font-weight: 400; color: var(--ink-500); } .rental-note{ font-size: 0.82rem; color: var(--ink-500); margin-top: 6px; } /* =================================================================== Bento gallery =================================================================== */ .bento{ display: grid; gap: 16px; grid-template-columns: 1fr; } .bento-item{ position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; } .bento-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); } .bento-item:hover img{ transform: scale(1.05); } .bento-item figcaption{ position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; font-size: 0.85rem; font-weight: 500; color: #fff; background: linear-gradient(to top, rgba(6,16,28,0.82), rgba(6,16,28,0)); } @media (min-width: 720px){ .bento{ grid-template-columns: repeat(4, 1fr); grid-auto-rows: 160px; } .bento-a{ grid-column: span 2; grid-row: span 2; } .bento-b{ grid-column: span 2; grid-row: span 2; } .bento-d{ grid-column: span 1; grid-row: span 2; } .bento-e{ grid-column: span 3; grid-row: span 2; } .bento-item{ aspect-ratio: auto; } } /* Full, uncropped supporting images (plans / maps) */ .full-image{ margin: 32px 0 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--sand-50); } .full-image img{ width: 100%; height: auto; display: block; } .full-image figcaption{ padding: 14px 18px; font-size: 0.9rem; color: var(--ink-500); border-top: 1px solid var(--line); } .section-navy .full-image{ border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); } .section-navy .full-image figcaption{ color: rgba(255,255,255,0.75); border-top-color: rgba(255,255,255,0.16); } /* Facilities plan legend (crisp text alternative to the small labels on the plan image) */ .facilities-legend{ margin-top: 20px; padding: 24px 28px; display: grid; gap: 24px; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--sand-50); } @media (min-width: 700px){ .facilities-legend{ grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px){ .facilities-legend{ grid-template-columns: repeat(4, 1fr); } } .facilities-legend-title{ font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-600); margin-bottom: 12px; } .facilities-legend ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .facilities-legend li{ display: flex; align-items: baseline; gap: 10px; font-size: 0.88rem; line-height: 1.4; color: var(--ink-700); } .facilities-legend li span{ flex: none; min-width: 20px; font-weight: 700; color: var(--gold-600); } /* =================================================================== Map strip =================================================================== */ .map-strip{ margin-top: 56px; display: grid; gap: 20px; grid-template-columns: 1fr; } @media (min-width: 700px){ .map-strip{ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; } } .map-item{ margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255,255,255,0.14); } .map-item img{ width: 100%; height: auto; display: block; } .map-item figcaption{ padding: 12px 16px; font-size: 0.85rem; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.85); } /* =================================================================== Steps =================================================================== */ .steps{ display: grid; gap: 24px; grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 860px){ .steps{ grid-template-columns: repeat(4, 1fr); } } .step{ background: #fff; border: 1px solid var(--sand-line); border-radius: var(--radius-lg); padding: 28px 22px; } .step-number{ display: inline-flex; font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--gold-600); border: 1px solid var(--gold-500); width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 16px; } .step-title{ font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; } .step-text{ color: var(--ink-500); font-size: 0.92rem; } /* =================================================================== FAQ =================================================================== */ .faq-list{ display: flex; flex-direction: column; gap: 14px; max-width: 820px; } .faq-item{ border: 1px solid var(--line); border-radius: var(--radius-md); padding: 6px 22px; background: #fff; } .faq-item summary{ cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; font-size: 1.02rem; min-height: 44px; } .faq-item summary::-webkit-details-marker{ display: none; } .faq-chevron{ flex: none; width: 20px; height: 20px; color: var(--ink-500); transition: transform var(--dur) var(--ease); } .faq-item[open] .faq-chevron{ transform: rotate(180deg); color: var(--brand-blue-dark); } .faq-item p{ padding-bottom: 20px; color: var(--ink-500); font-size: 0.95rem; } /* =================================================================== Final call / form =================================================================== */ .final-grid{ display: grid; gap: 48px; } @media (min-width: 940px){ .final-grid{ grid-template-columns: 1.1fr 0.9fr; align-items: start; } } .lead-form{ background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(14px); border-radius: var(--radius-lg); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; } .lead-form-title{ color: #fff; font-size: 1.3rem; margin-bottom: 4px; } .form-field{ display: flex; flex-direction: column; gap: 8px; } .form-field label{ color: rgba(255,255,255,0.85); font-size: 0.9rem; font-weight: 500; } .form-field input{ min-height: 48px; border-radius: var(--radius-sm); border: 1.5px solid rgba(255,255,255,0.3); background: rgba(8,21,36,0.35); color: #fff; padding: 0 16px; font-size: 1rem; font-family: inherit; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .form-field input::placeholder{ color: rgba(255,255,255,0.45); } .form-field input:focus{ border-color: var(--gold-500); background: rgba(8,21,36,0.55); outline: none; } .form-field input:invalid[data-touched="true"]{ border-color: #E36A6A; } .form-error{ color: #FFB4B4; font-size: 0.82rem; min-height: 1.1em; } .lead-form-success{ background: rgba(199,161,92,0.18); border: 1px solid var(--gold-500); color: #fff; padding: 14px 16px; border-radius: var(--radius-sm); font-size: 0.92rem; line-height: 1.5; } /* =================================================================== Footer =================================================================== */ .site-footer{ background: var(--navy-950); color: rgba(255,255,255,0.72); padding-block: 48px 32px; font-size: 0.9rem; } .footer-inner{ display: flex; flex-direction: column; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); margin-bottom: 20px; } @media (min-width: 760px){ .footer-inner{ flex-direction: row; justify-content: space-between; align-items: center; } } .footer-brand{ display: flex; align-items: center; gap: 16px; } .footer-brand img{ border-radius: 8px; } .footer-brand p{ max-width: 320px; line-height: 1.5; } .footer-contact p{ margin-bottom: 4px; } .footer-disclaimer{ font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.6; max-width: 90ch; } /* =================================================================== Floating WhatsApp button =================================================================== */ .whatsapp-fab{ position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 200; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px -6px rgba(0,0,0,0.4); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .whatsapp-fab:hover{ transform: scale(1.06); box-shadow: 0 14px 30px -6px rgba(0,0,0,0.48); } .whatsapp-fab:active{ transform: scale(0.96); }