/* ========================================================================== ENDJOY TRAVEL — MAIN STYLESHEET Design tokens, base, layout, and all component styles. ========================================================================== */ /* ---------- 1. DESIGN TOKENS ---------- */ :root { /* Brand colors (from logo) */ --color-primary: #0B2E74; --color-primary-dark: #061A45; --color-primary-light: #1A4FA8; --color-secondary: #F68B1F; --color-secondary-light: #FFAB4D; --color-bg: #FFFFFF; --color-bg-light: #F7F9FC; --color-text: #1E293B; --color-text-muted: #5B6B85; --color-border: #E5E7EB; --color-whatsapp: #25D366; /* Gradients */ --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 55%, var(--color-secondary) 130%); --gradient-cta: linear-gradient(120deg, var(--color-primary-dark) 0%, var(--color-primary) 45%, var(--color-secondary) 120%); /* Typography */ --font-display: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; --font-body: 'Inter', 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', monospace; /* Radii & shadows */ --radius-sm: 8px; --radius-md: 24px; --radius-lg: 28px; /* Vivid hero gradient */ --gradient-hero: linear-gradient(135deg, #0A3D91 0%, #1565C0 40%, #42A5F5 70%, #FF9800 100%); --shadow-sm: 0 2px 8px rgba(11, 46, 116, 0.06); --shadow-md: 0 12px 32px rgba(11, 46, 116, 0.10); --shadow-lg: 0 24px 60px rgba(11, 46, 116, 0.16); /* Layout */ --container-w: 1200px; --nav-h: 84px; } /* ---------- 2. RESET & BASE ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } /* MOBILE FIX: safety net so no element can ever force a horizontal scrollbar; identical on desktop since none exists there */ body { font-family: var(--font-body); color: var(--color-text); background: radial-gradient(rgba(11, 46, 116, 0.05) 1px, transparent 1px) 0 0 / 26px 26px, var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* MOBILE MENU FIX: toggled on by JS while the mobile nav panel is open, so the page behind the panel can't scroll. Only ever added when #navToggle is clicked, and that button is display:none on desktop (see .navbar__toggle in the >900px rules), so this never fires there. */ body.no-scroll { overflow: hidden; } img { max-width: 100%; display: block; } a { text-decoration: none; color: inherit; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-primary-dark); font-weight: 700; line-height: 1.2; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* Visible keyboard focus */ a:focus-visible, button:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 3px; border-radius: 4px; } .container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; } .container--narrow { max-width: 760px; } .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 12px; } .text-gradient { background: linear-gradient(100deg, var(--color-secondary) 0%, var(--color-secondary-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---------- 3. BUTTONS ---------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; font-family: var(--font-display); font-weight: 600; font-size: 15px; border-radius: 999px; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; white-space: nowrap; } .btn--lg { padding: 16px 34px; font-size: 16px; } .btn--primary { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-sm); } .btn--primary:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 32px rgba(255, 152, 0, 0.32), 0 8px 20px rgba(21, 101, 192, 0.24); } .btn--outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn--outline:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px) scale(1.04); } .btn--whatsapp { background: var(--color-whatsapp); color: #fff; } .btn--whatsapp svg { width: 22px; height: 22px; } .btn--whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 211, 102, 0.35); } /* Ripple effect */ .btn--ripple::after { content: ''; position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.55); border-radius: 50%; opacity: 0; transform: scale(1); top: var(--ripple-y, 50%); left: var(--ripple-x, 50%); translate: -50% -50%; pointer-events: none; } .btn--ripple.is-rippling::after { animation: ripple 0.6s ease-out; } @keyframes ripple { 0% { opacity: 0.5; scale: 1; } 100% { opacity: 0; scale: 40; } } /* ---------- 4. NAVBAR ---------- */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid transparent; transition: background 0.35s ease, backdrop-filter 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .navbar.is-scrolled { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); } .navbar__container { max-width: var(--container-w); margin: 0 auto; padding: 0 24px; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; transition: height 0.35s ease; } .navbar.is-scrolled .navbar__container { height: 66px; } .navbar__logo { height: 52px; width: auto; transition: height 0.35s ease, filter 0.35s ease; filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.25)); } .navbar.is-scrolled .navbar__logo { height: 40px; filter: none; } .navbar__list { display: flex; align-items: center; gap: 32px; } .navbar__link { position: relative; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); padding: 6px 0; transition: color 0.2s ease; } .navbar.is-scrolled .navbar__link { color: var(--color-text); text-shadow: none; } .navbar__link::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--gradient-brand); transition: width 0.25s ease; } .navbar__link:hover, .navbar__link.active { color: var(--color-secondary-light); } .navbar.is-scrolled .navbar__link:hover, .navbar.is-scrolled .navbar__link.active { color: var(--color-primary); } .navbar__link:hover::after, .navbar__link.active::after { width: 100%; } /* --- Dropdown: "Layanan" --- */ .navbar__dropdown { position: relative; } .navbar__dropdown-toggle { display: flex; align-items: center; gap: 6px; } .navbar__dropdown-caret { width: 14px; height: 14px; transition: transform 0.3s ease; } .navbar__dropdown.is-open .navbar__dropdown-caret { transform: rotate(180deg); } .navbar__submenu { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; min-width: 220px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden; transform: translateY(10px) translateX(-50%); transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s; z-index: 20; } .navbar__dropdown.is-open .navbar__submenu { opacity: 1; visibility: visible; transform: translateY(0) translateX(-50%); } .navbar__sublink { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-text); padding: 11px 14px; border-radius: var(--radius-sm); transition: background 0.2s ease, color 0.2s ease; } .navbar__sublink:hover { background: var(--color-bg-light); color: var(--color-primary); } .navbar__sublink.active { background: var(--color-bg-light); color: var(--color-primary); } .navbar__actions { display: flex; align-items: center; gap: 16px; } .navbar__cta { padding: 11px 22px; font-size: 14px; } .navbar__toggle { display: none; flex-direction: column; gap: 5px; width: 32px; padding: 4px; } .navbar__toggle span { width: 100%; height: 2.5px; background: #fff; border-radius: 2px; transition: all 0.3s ease; } .navbar.is-scrolled .navbar__toggle span { background: var(--color-primary-dark); } .navbar__toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .navbar__toggle.is-open span:nth-child(2) { opacity: 0; } .navbar__toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* Mobile-only nav panel header, close button, and backdrop overlay — hidden by default (their real styling lives in responsive.css's <=900px block) so they never appear in the desktop inline nav, which has no media query guarding it. */ .navbar__menu-head, .navbar__menu-close, .navbar__overlay { display: none; } /* ---------- 5. HERO ---------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--color-primary-dark); } .hero--photo { padding-top: 0; } /* Fullscreen photo slideshow: pure cross-fade (opacity) only — no zoom, scale, or parallax, per client request. The image itself never moves; only opacity animates between slides. */ .hero-slideshow { position: absolute; inset: 0; z-index: 0; } .hero-slideshow__slide { position: absolute; inset: 0; opacity: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transition: opacity 1.4s ease; } .hero-slideshow__slide.is-active { opacity: 1; z-index: 1; } .hero-slideshow__label { padding: 10px 20px; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; color: #fff; font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; transform: translateY(14px); opacity: 0; transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s; } .hero-slideshow__slide.is-active .hero-slideshow__label { opacity: 1; transform: translateY(0); } /* 45% dark overlay so hero text stays readable over any photo */ .hero__overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: rgba(6, 26, 69, 0.45); } .hero__container { position: relative; z-index: 2; max-width: var(--container-w); margin: 0 auto; padding: 60px 24px; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; } .hero__container--center { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 60px 24px; } .hero__container--center .hero__content { max-width: 780px; } .hero__container--center .hero__actions { justify-content: center; } .hero__title { font-size: clamp(32px, 4.6vw, 58px); margin-bottom: 20px; letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 24px rgba(6, 26, 69, 0.35); } .hero .text-gradient { background: linear-gradient(100deg, #FFD180 0%, var(--color-secondary-light) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero .eyebrow { color: var(--color-secondary-light); } .hero__subtitle { font-size: 17px; color: rgba(255, 255, 255, 0.9); max-width: 560px; margin: 0 auto 32px; } .hero__container--center .hero__subtitle { margin-left: auto; margin-right: auto; } .hero .btn--outline { border-color: rgba(255, 255, 255, 0.65); color: #fff; } .hero .btn--outline:hover { background: #fff; color: var(--color-primary-dark); } .hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; } /* Prev / next arrows */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.25s ease, transform 0.25s ease; } .hero-arrow:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-50%) scale(1.08); } .hero-arrow svg, .hero-arrow i { width: 22px; height: 22px; } .hero-arrow--prev { left: 20px; } .hero-arrow--next { right: 20px; } /* Slide indicators */ .hero-dots { position: absolute; bottom: 28px; left: 50%; translate: -50% 0; z-index: 3; display: flex; gap: 8px; } .hero-dots__dot { width: 8px; height: 8px; border-radius: 4px; border: none; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: all 0.35s ease; padding: 0; } .hero-dots__dot.is-active { width: 26px; background: #fff; } /* Abstract wave divider at the base of the hero */ .hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 70px; z-index: 2; pointer-events: none; } .ticket-card { position: relative; width: 100%; max-width: 380px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px 28px 24px; } .ticket-card__row { display: flex; align-items: center; justify-content: space-between; } .ticket-card__row > div { display: flex; flex-direction: column; } .ticket-card__row > div:last-child { align-items: flex-end; } .ticket-card__code { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--color-primary-dark); } .ticket-card__city { font-size: 13px; color: var(--color-text-muted); } .ticket-card__plane { width: 28px; height: 28px; color: var(--color-secondary); } .ticket-card__divider { height: 1px; background-image: linear-gradient(90deg, var(--color-border) 60%, transparent 0%); background-size: 12px 1px; background-repeat: repeat-x; margin: 24px 0; } .ticket-card__row--sub { font-size: 13px; color: var(--color-text-muted); font-family: var(--font-mono); } /* ---------- 6. SECTION SHELL ---------- */ .section { padding: 100px 0; } .section--tinted { background: var(--color-bg-light); position: relative; overflow: hidden; } /* Armada: soft sky-blue backdrop */ .section--sky { background: linear-gradient(180deg, #EAF3FF 0%, #DCEBFF 100%); position: relative; overflow: hidden; } /* Testimoni: vivid brand gradient backdrop, cards float on top in white */ .section--gradient { background: var(--gradient-hero); position: relative; overflow: hidden; } .section--gradient .section__title, .section--gradient .eyebrow { color: #fff; } .section--gradient .section__desc { color: rgba(255, 255, 255, 0.85); } .section--gradient::before, .section--gradient::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 70%); } .section--gradient::before { width: 420px; height: 420px; top: -160px; left: -120px; } .section--gradient::after { width: 380px; height: 380px; bottom: -160px; right: -110px; } .section--gradient > .container { position: relative; z-index: 1; } .section--tinted::before, .section--tinted::after, .section--sky::before, .section--sky::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; } .section--tinted::before { width: 420px; height: 420px; top: -160px; right: -120px; background: radial-gradient(circle, rgba(246, 139, 31, 0.12) 0%, transparent 70%); } .section--tinted::after { width: 380px; height: 380px; bottom: -160px; left: -110px; background: radial-gradient(circle, rgba(11, 46, 116, 0.10) 0%, transparent 70%); } .section--sky::before { width: 380px; height: 380px; top: -140px; right: -100px; background: radial-gradient(circle, rgba(21, 101, 192, 0.10) 0%, transparent 70%); } .section--sky::after { width: 340px; height: 340px; bottom: -140px; left: -100px; background: radial-gradient(circle, rgba(255, 152, 0, 0.08) 0%, transparent 70%); } .section--tinted > .container, .section--sky > .container { position: relative; z-index: 1; } .section__head { text-align: center; max-width: 640px; margin: 0 auto 56px; } .section__title { font-size: clamp(26px, 3vw, 38px); margin-bottom: 14px; } .section__desc { color: var(--color-text-muted); font-size: 16px; } /* ---------- 7. SERVICE CARDS ---------- */ .services { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .services--triple { grid-template-columns: repeat(3, 1fr); } .service-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 32px 26px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; } .service-card__icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .service-card__icon svg { width: 26px; height: 26px; } .service-card__icon--blue { background: rgba(11, 46, 116, 0.08); color: var(--color-primary); } .service-card__icon--orange { background: rgba(246, 139, 31, 0.12); color: var(--color-secondary); } .service-card__title { font-size: 19px; margin-bottom: 14px; } .service-card__list { margin-bottom: 20px; } .service-card__list li { font-size: 14px; color: var(--color-text-muted); padding: 5px 0 5px 18px; position: relative; } .service-card__list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); } .service-card__link { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-primary); transition: gap 0.2s ease; } .service-card__link:hover { color: var(--color-secondary); } /* ---------- 7B. TENTANG KAMI ---------- */ .about { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; } .about__visual { position: relative; display: flex; justify-content: center; } .about__card { position: relative; z-index: 1; width: 100%; max-width: 300px; background: var(--gradient-brand); color: #fff; border-radius: var(--radius-lg); padding: 40px 32px; box-shadow: var(--shadow-lg); text-align: center; } .about__card p { font-size: 14px; margin-top: 10px; opacity: 0.9; } .about__ring { position: absolute; top: -20px; right: 10%; width: 140px; height: 140px; border: 2px dashed rgba(246, 139, 31, 0.4); border-radius: 50%; z-index: 0; } .about__text { color: var(--color-text-muted); font-size: 15.5px; margin-bottom: 16px; } .about__points { margin-top: 20px; } .about__points li { position: relative; padding-left: 26px; font-size: 14.5px; color: var(--color-text); margin-bottom: 12px; } .about__points li::before { content: ''; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: rgba(246, 139, 31, 0.15); box-shadow: inset 0 0 0 4px var(--color-secondary); } /* ---------- 8. REASONS (Mengapa Memilih Kami) ---------- */ .reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .reason { background: #fff; border-radius: var(--radius-md); padding: 28px; box-shadow: var(--shadow-sm); transition: transform 0.3s ease; } .reason:hover { transform: translateY(-6px); } .reason__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .reason__icon svg { width: 20px; height: 20px; } .reason h3 { font-size: 16.5px; margin-bottom: 8px; } .reason p { font-size: 14px; color: var(--color-text-muted); } /* ---------- 9. TOUR CARDS (Paket Wisata Favorit) — premium redesign ---------- */ .tour-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; /* FIX: consistent, slightly more generous gap for a less cramped, premium grid */ } .tour-card { background: #fff; border-radius: var(--radius-lg); /* FIX: softer/rounder than before (24px -> 28px) — "radius lebih halus" */ overflow: hidden; box-shadow: 0 10px 28px -14px rgba(11, 46, 116, 0.22); /* FIX: layered, tinted resting shadow instead of the flat generic --shadow-sm — reads as "floating," more elegant */ transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .tour-card:hover { transform: translateY(-8px); box-shadow: 0 32px 56px -18px rgba(11, 46, 116, 0.32); /* FIX: deeper, softer-edged hover shadow for a smooth lift instead of an abrupt jump */ } .tour-card__media { height: 236px; /* FIX: taller media (was 210px) gives the real destination photos more presence */ position: relative; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); /* FIX: smooth image zoom on hover, see below */ } .tour-card:hover .tour-card__media { transform: scale(1.06); } /* FIX: subtle zoom-in on hover for a "smooth" premium feel; clipped cleanly by .tour-card's overflow:hidden */ /* FIX: bottom scrim so the white badge pill always stays legible regardless of how bright the underlying photo is, and adds a touch of depth. */ .tour-card__media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 60%; background: linear-gradient(to top, rgba(6, 26, 69, 0.45), transparent); pointer-events: none; } .tour-card__badge { position: absolute; top: 16px; left: 16px; z-index: 1; background: rgba(255, 255, 255, 0.94); color: var(--color-primary-dark); font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 6px 12px; border-radius: 999px; letter-spacing: 0.04em; } .tour-card__body { padding: 28px; } /* FIX: roomier padding (was 24px) */ .tour-card__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin-bottom: 10px; } /* FIX: 19px -> 20px, explicit weight for a more modern, confident heading */ .tour-card__body p { font-size: 14px; line-height: 1.65; color: var(--color-text-muted); margin-bottom: 22px; min-height: 62px; } /* FIX: 1.65 line-height reads less dense than the default */ .tour-card__foot { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--color-border); /* FIX: dashed -> solid, quieter and more premium */ } .tour-card__code { font-family: var(--font-mono); font-size: 13px; color: var(--color-text-muted); letter-spacing: 0.05em; } /* FIX: CTA upgraded from a bare text link to a proper pill button — "CTA lebih menarik." Text stays dark navy (12.7:1 contrast) rather than the brand orange directly on white, which measures only 2.43:1 and fails WCAG AA (same issue fixed in the mobile menu); orange is kept as a small icon accent instead, so the brand color is still clearly present. */ .tour-card__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--color-primary); background: var(--color-bg-light); padding: 9px 14px; border-radius: 999px; transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease; } .tour-card__cta i, .tour-card__cta svg { width: 14px; height: 14px; color: var(--color-secondary); transition: transform 0.25s ease, color 0.25s ease; } .tour-card__cta:hover { background: var(--color-primary); color: #fff; gap: 9px; } .tour-card__cta:hover i, .tour-card__cta:hover svg { color: #fff; transform: translateX(2px); } /* ---------- 10. FLEET SLIDER (Armada Kami) — premium redesign ---------- */ .fleet-slider { position: relative; } .fleet-slider__track { display: flex; gap: 26px; /* FIX: 24px -> 26px, closer to the tour-grid's rhythm for a more consistent feel across sections */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 8px; -ms-overflow-style: none; scrollbar-width: none; } .fleet-slider__track::-webkit-scrollbar { display: none; } .fleet-card { flex: 0 0 300px; /* FIX: 280px -> 300px, a bit more presence per the "ukuran card" request */ scroll-snap-align: start; background: #fff; border-radius: var(--radius-lg); /* FIX: matches the tour-card's softer radius for visual consistency between sections */ padding: 24px; text-align: center; /* FIX: centered layout reads cleaner/more symmetric for a single-vehicle product card */ box-shadow: 0 10px 28px -14px rgba(11, 46, 116, 0.22); transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .fleet-card:hover { transform: translateY(-8px); box-shadow: 0 28px 52px -16px rgba(11, 46, 116, 0.28); } .fleet-card__media { height: 190px; /* FIX: 140px -> 190px — real car photos need more room than the old gradient placeholders did */ border-radius: var(--radius-sm); margin-bottom: 18px; background-size: cover; background-position: center; background-color: var(--color-bg-light); /* shows briefly while the photo loads, instead of a flash of white */ position: relative; overflow: hidden; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .fleet-card:hover .fleet-card__media { transform: scale(1.05); } /* FIX: removed the flat blue/orange gradient tint that used to sit over the media (::after) — it was designed to make the old solid-color placeholders look intentional, but tinting real product photos of the actual vehicles looks unprofessional and muddies the car's real color. The photos are clear studio shots already; showing them as-is looks more professional. */ .fleet-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin-bottom: 6px; } /* FIX: 17px -> 18px, explicit weight to match the tour-card heading treatment */ .fleet-card p { font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 18px; } /* FIX: added — previously there was no per-vehicle call-to-action, only one generic button below the whole slider. Matches the "tombol" item in the brief and mirrors the tour-card CTA for visual consistency between the two redesigned sections. */ .fleet-card__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 13.5px; color: var(--color-primary); background: var(--color-bg-light); padding: 9px 16px; border-radius: 999px; transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease; } .fleet-card__cta i, .fleet-card__cta svg { width: 14px; height: 14px; color: var(--color-secondary); transition: transform 0.25s ease, color 0.25s ease; } .fleet-card__cta:hover { background: var(--color-primary); color: #fff; gap: 9px; } .fleet-card__cta:hover i, .fleet-card__cta:hover svg { color: #fff; transform: translateX(2px); } .fleet-slider__nav { display: flex; gap: 12px; justify-content: center; margin-top: 28px; } .fleet-slider__btn { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--color-border); color: var(--color-primary); font-size: 18px; display: flex; align-items: center; justify-content: center; transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); /* FIX: matches the new smoother easing used across both sections */ } .fleet-slider__btn:hover { background: var(--gradient-brand); color: #fff; border-color: transparent; transform: translateY(-2px); } /* ---------- 11. BOOKING TIMELINE (route-line signature) ---------- */ .booking-route { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .booking-route__line { position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px; background-image: linear-gradient(90deg, var(--color-secondary) 65%, transparent 0%); background-size: 14px 2px; background-repeat: repeat-x; z-index: 0; } .booking-step { position: relative; z-index: 1; text-align: center; } .booking-step__marker { width: 56px; height: 56px; margin: 0 auto 20px; border-radius: 50%; background: var(--gradient-brand); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 20px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); } .booking-step h3 { font-size: 17px; margin-bottom: 8px; } .booking-step p { font-size: 14px; color: var(--color-text-muted); } /* ---------- 12. TESTIMONIALS ---------- */ .testimonial-slider { overflow: hidden; padding: 8px 0; } .testimonial-slider__track { display: flex; gap: 24px; width: max-content; animation: scroll-testi 34s linear infinite; } .testimonial-slider:hover .testimonial-slider__track { animation-play-state: paused; } @keyframes scroll-testi { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testi-card { flex: 0 0 320px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 26px; } .testi-card__stars { color: var(--color-secondary); letter-spacing: 2px; margin-bottom: 14px; } .testi-card p { font-size: 14.5px; color: var(--color-text); margin-bottom: 18px; } .testi-card__name { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-primary); } /* ---------- 13. FAQ ACCORDION ---------- */ .accordion__item { border-bottom: 1px solid var(--color-border); } .accordion__header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 22px 4px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--color-primary-dark); text-align: left; } .accordion__icon { font-size: 20px; color: var(--color-secondary); transition: transform 0.3s ease; flex-shrink: 0; margin-left: 16px; } .accordion__item.is-open .accordion__icon { transform: rotate(45deg); } .accordion__body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; padding: 0 4px; } .accordion__item.is-open .accordion__body { padding-bottom: 20px; } .accordion__body p { font-size: 14.5px; color: var(--color-text-muted); line-height: 1.7; } /* ---------- 14. CTA ---------- */ .cta { background: var(--gradient-cta); padding: 90px 0; } .cta__container { text-align: center; } .cta h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); margin-bottom: 14px; } .cta p { color: rgba(255, 255, 255, 0.85); font-size: 16px; margin-bottom: 32px; } /* ---------- 15. FOOTER ---------- */ .footer { background: var(--color-primary-dark); color: rgba(255, 255, 255, 0.75); padding: 72px 0 0; } .footer__grid { display: grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1fr; gap: 40px; padding-bottom: 56px; } .footer__logo { height: 48px; margin-bottom: 16px; filter: brightness(0) invert(1); } .footer__col--brand p { font-size: 14px; line-height: 1.7; max-width: 320px; margin-bottom: 20px; } .footer__social { display: flex; gap: 12px; } .footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; transition: all 0.25s ease; } .footer__social svg { width: 18px; height: 18px; } .footer__social a:hover { background: var(--color-secondary); border-color: var(--color-secondary); } .footer__col h4 { color: #fff; font-size: 15px; margin-bottom: 20px; } .footer__col ul li { margin-bottom: 12px; font-size: 14px; } .footer__col ul li a:hover { color: var(--color-secondary); } .footer__contact li { color: rgba(255, 255, 255, 0.65); } .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 22px 0; text-align: center; font-size: 13px; } /* ---------- 16. FLOATING WHATSAPP ---------- */ .whatsapp-float { position: fixed; bottom: 26px; right: 26px; width: 58px; height: 58px; background: var(--color-whatsapp); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 10px 26px rgba(37, 211, 102, 0.4); z-index: 900; animation: float-pulse 2.6s ease-in-out infinite; } .whatsapp-float svg { width: 28px; height: 28px; } @keyframes float-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* ---------- 18. PAGE BANNER (inner-page hero) ---------- */ .page-banner{ position: relative; min-height: 360px; display: flex; align-items: center; justify-content: center; padding-top: var(--nav-h); overflow: hidden; background-image: url("../assets/cars/banner-rental.jpg"); background-size: cover; background-position: center; background-repeat: no-repeat; } .page-banner__route { position: absolute; inset: 0; opacity: 0.25; pointer-events: none; } .page-banner__inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; } /* CSS CLEANUP: this block previously declared the same 4 selectors twice (once here, again lower down, the second copy using !important) and one value was invalid CSS — `#FFB347(255, 255, 255, 0.85)` isn't valid syntax, so browsers dropped that whole declaration and `.page-banner p` silently fell back to inherited body text color, nearly invisible on the dark photo banner. Consolidated into one valid set of rules, same brand-orange intent, no !important needed since the conflicting duplicate is gone. This is a correctness fix so it applies at every breakpoint, including desktop. */ .page-banner__breadcrumb { font-family: var(--font-mono); font-size: 13px; color: var(--color-secondary); margin-bottom: 16px; letter-spacing: 0.02em; } .page-banner__breadcrumb a { color: var(--color-secondary); } .page-banner__breadcrumb a:hover { color: var(--color-secondary-light); } .page-banner h1 { color: var(--color-secondary); font-size: clamp(28px, 4vw, 46px); margin-bottom: 14px; } .page-banner__inner > p:last-child { color: var(--color-secondary); font-size: 16px; } /* ---------- 19. ROUTE CARDS (travel.html) ---------- */ .route-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .route-card { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 22px 26px; transition: box-shadow 0.3s ease, transform 0.3s ease; } .route-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .route-card__cities { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--color-primary-dark); } .route-card__arrow { color: var(--color-secondary); flex-shrink: 0; } .route-card__note { font-size: 12.5px; color: var(--color-text-muted); text-align: right; } /* ---------- 20. INFO CARDS (jadwal / door-to-door) ---------- */ .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .info-card { background: #fff; border-radius: var(--radius-md); padding: 30px; box-shadow: var(--shadow-sm); } .info-card__icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(11, 46, 116, 0.08); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .info-card__icon svg { width: 24px; height: 24px; } .info-card h3 { font-size: 18px; margin-bottom: 10px; } .info-card p { font-size: 14.5px; color: var(--color-text-muted); } /* ---------- 22. GALLERY GRID ---------- */ .gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .gallery-grid__item { aspect-ratio: 1 / 1; border-radius: var(--radius-sm); transition: transform 0.35s ease; } .gallery-grid__item:hover { transform: scale(1.045); } /* ---------- 23. PACKAGE DETAIL (wisata.html) ---------- */ .package-detail { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; margin-bottom: 88px; } .package-detail:last-child { margin-bottom: 0; } .package-detail:nth-child(even) .package-detail__media { order: 2; } .package-detail__media { border-radius: var(--radius-lg); height: 320px; box-shadow: var(--shadow-md); position: relative; overflow: hidden; } .package-detail__badge { position: absolute; top: 18px; left: 18px; background: rgba(255, 255, 255, 0.92); padding: 7px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--color-primary-dark); } .package-detail__price { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--color-secondary); margin: 6px 0 18px; } .package-detail__price span { font-size: 13px; color: var(--color-text-muted); font-weight: 500; margin-left: 4px; } .package-detail__itinerary { margin: 18px 0 24px; } .package-detail__itinerary li { font-size: 13.5px; color: var(--color-text); padding: 8px 0 8px 22px; border-left: 2px dashed var(--color-border); margin-left: 6px; position: relative; } .package-detail__itinerary li:last-child { border-left-color: transparent; } .package-detail__itinerary li::before { content: ''; position: absolute; left: -5px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-secondary); } .package-detail__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 22px 0 26px; } .package-detail__cols h4 { font-size: 13.5px; margin-bottom: 10px; color: var(--color-primary-dark); } .package-detail__cols ul li { font-size: 13.5px; color: var(--color-text-muted); padding: 5px 0 5px 20px; position: relative; } .package-detail__cols--include li::before { content: '\2713'; position: absolute; left: 0; color: var(--color-secondary); font-weight: 700; } .package-detail__cols--exclude li::before { content: '\2715'; position: absolute; left: 0; color: #B0B8C4; font-weight: 700; } /* ---------- 24. CONTACT PAGE ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .contact-cards { display: grid; gap: 16px; margin-bottom: 24px; } .contact-card { display: flex; gap: 16px; align-items: flex-start; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 20px; } .contact-card__icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(246, 139, 31, 0.12); color: var(--color-secondary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-card__icon svg { width: 22px; height: 22px; } .contact-card h4 { font-size: 15px; margin-bottom: 4px; } .contact-card p { font-size: 14px; color: var(--color-text-muted); } .contact-map { height: 220px; border-radius: var(--radius-md); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: #fff; text-align: center; padding: 20px; } .contact-map svg { width: 32px; height: 32px; } .contact-map span { font-family: var(--font-mono); font-size: 13px; opacity: 0.85; } .contact-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); } .contact-form h3 { font-size: 19px; margin-bottom: 6px; } .contact-form > p { font-size: 14px; color: var(--color-text-muted); margin-bottom: 24px; } .form-group { margin-bottom: 18px; } .form-group label { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-primary-dark); margin-bottom: 8px; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 14px; color: var(--color-text); transition: border-color 0.2s ease; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); } .form-group textarea { resize: vertical; min-height: 96px; } .form-note { font-size: 12.5px; color: var(--color-text-muted); margin-top: 4px; } /* ---------- 25. AOS OVERRIDE (subtle, premium timing) ---------- */ [data-aos] { transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important; }