/* ============================================================ NATIONAL SHIPPING COMPANY — style.css Palette: #ACCE22 (lime), #A6A6A6 (grey), #30318B (navy) ============================================================ */ /* ---------- CSS Variables ---------- */ :root { --clr-accent: #ACCE22; --clr-accent-dk: #8aab12; --clr-grey: #A6A6A6; --clr-navy: #30318B; --clr-navy-dk: #222270; --clr-dark: #1a1a2e; --clr-white: #ffffff; --clr-light: #f4f5f9; --font-display: 'Montserrat', sans-serif; --font-body: 'Open Sans', sans-serif; --header-h: 80px; --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); --transition-slow: 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: #333; overflow-x: hidden; } /* ============================================================ HEADER ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-h); transition: background var(--transition), box-shadow var(--transition), backdrop-filter var(--transition); } /* Transparent state (over hero) */ .site-header .navbar { height: 100%; background: transparent; padding: 0; transition: inherit; } /* Scrolled state — added by JS */ .site-header.scrolled .navbar { background: rgba(255, 255, 255, 0.97); box-shadow: 0 2px 30px rgba(48, 49, 139, 0.12); backdrop-filter: blur(10px); } /* ── Halaman TANPA hero carousel ── Class .no-hero dipasang di via Blade (bukan JS) sehingga navbar langsung solid sejak paint pertama, tanpa flash transparan. ── */ body.no-hero .site-header .navbar, body.no-hero .site-header.scrolled .navbar { background: rgba(255, 255, 255, 0.97) !important; box-shadow: 0 2px 30px rgba(48, 49, 139, 0.12); backdrop-filter: blur(10px); } body.no-hero .site-header .logo-main { color: var(--clr-navy); } body.no-hero .site-header .navbar-logo { filter: none; } body.no-hero .site-header .navbar-nav .nav-link { color: var(--clr-navy) !important; } body.no-hero .site-header .toggler-bar { background: var(--clr-navy); } /* Logo — gambar */ .navbar-logo { height: 48px; width: auto; max-width: 180px; object-fit: contain; /* Filter putih saat di atas hero (transparan) */ filter: brightness(0) invert(1); transition: filter var(--transition), opacity var(--transition); } /* Saat header scrolled — kembalikan warna asli logo */ .site-header.scrolled .navbar-logo { filter: none; } /* Footer logo */ .footer-logo { height: 44px; width: auto; max-width: 160px; object-fit: contain; /* Kalau pakai logo-white.png tidak perlu filter */ filter: brightness(0) invert(1); opacity: 0.9; margin-bottom: 1rem; display: block; } /* Fallback icon (jika logo.png tidak ada) */ .logo-icon { width: 42px; height: 42px; background: var(--clr-accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--clr-navy); font-size: 1.2rem; flex-shrink: 0; transition: transform var(--transition); } .navbar-brand:hover .logo-icon { transform: rotate(-8deg) scale(1.05); } .logo-text { display: flex; flex-direction: column; line-height: 1; } .logo-main { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.12em; color: var(--clr-white); transition: color var(--transition); } .logo-sub { font-family: var(--font-display); font-weight: 500; font-size: 0.6rem; letter-spacing: 0.2em; color: var(--clr-accent); } .site-header.scrolled .logo-main { color: var(--clr-navy); } /* Nav links */ .navbar-nav .nav-link { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.9) !important; padding: 0.5rem 1rem !important; border-radius: 6px; transition: color var(--transition), background var(--transition); position: relative; } .navbar-nav .nav-link::after { content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%) scaleX(0); width: 20px; height: 2px; background: var(--clr-accent); border-radius: 2px; transition: transform var(--transition); } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: translateX(-50%) scaleX(1); } .site-header.scrolled .navbar-nav .nav-link { color: var(--clr-navy) !important; } .navbar-nav .nav-link:hover { background: rgba(172, 206, 34, 0.12); } /* Dropdown */ .dropdown-menu { border: none; box-shadow: 0 15px 40px rgba(48, 49, 139, 0.15); border-radius: 10px; padding: 0.5rem; margin-top: 0.5rem; min-width: 180px; } .dropdown-item { font-family: var(--font-display); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--clr-navy); border-radius: 6px; padding: 0.6rem 1rem; transition: background var(--transition), color var(--transition); } .dropdown-item:hover { background: var(--clr-accent); color: var(--clr-navy); } /* Accent Button */ .btn-accent { font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--clr-accent); color: var(--clr-navy); border: 2px solid var(--clr-accent); border-radius: 8px; padding: 0.6rem 1.4rem; transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn-accent:hover { background: var(--clr-navy); color: var(--clr-white); border-color: var(--clr-navy); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(172, 206, 34, 0.35); } /* Custom hamburger */ .navbar-toggler { border: none; padding: 0.5rem; background: transparent; } .navbar-toggler:focus { box-shadow: none; } .toggler-bar { display: block; width: 24px; height: 2px; background: var(--clr-white); margin: 5px 0; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, background var(--transition); transform-origin: center; } .site-header.scrolled .toggler-bar { background: var(--clr-navy); } /* ============================================================ HERO / CAROUSEL SECTION ============================================================ */ .hero-section { position: relative; width: 100%; /* Gunakan 100svh (short viewport) di browser modern, fallback ke --vh var yang diset JS untuk browser lama */ height: 100svh; height: calc(var(--vh, 1vh) * 100); min-height: 620px; overflow: hidden; } /* ---------- Slide ---------- */ .hero-carousel { position: relative; width: 100%; height: 100%; } .hero-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.1s; z-index: 1; } .hero-slide.active { opacity: 1; pointer-events: auto; z-index: 2; } /* ---------- Background ---------- */ .slide-bg { position: absolute; inset: 0; z-index: 0; background: #1a1a2e; /* fallback kalau gambar belum ada */ overflow: hidden; } /* Gambar background full cover — tanpa zoom */ .slide-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Dark overlay agar teks tetap terbaca */ .slide-bg-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10, 10, 30, 0.78) 0%, rgba(10, 10, 30, 0.55) 50%, rgba(10, 10, 30, 0.25) 100%); z-index: 1; } /* Geometric polygon overlay — pure CSS */ .geo-overlay { position: absolute; inset: 0; z-index: 2; opacity: 0.07; background-image: linear-gradient(60deg, #ffffff 1px, transparent 1px), linear-gradient(-60deg, #ffffff 1px, transparent 1px), linear-gradient(0deg, #ffffff 1px, transparent 1px); background-size: 120px 120px; } /* ---------- Slide Content ---------- */ .slide-content { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: calc(var(--header-h) + 2rem) 8% 8rem; height: 100%; gap: 3rem; } /* ---------- Text Side ---------- */ .slide-text { flex: 1; max-width: 560px; } .slide-eyebrow { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 1rem; } .slide-headline { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.1; color: var(--clr-white); margin-bottom: 1.5rem; } .slide-headline .text-accent { color: var(--clr-accent); } .slide-desc { font-family: var(--font-body); font-weight: 300; font-size: 1rem; line-height: 1.8; color: rgba(255, 255, 255, 0.7); margin-bottom: 2.2rem; } .slide-actions .btn { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 8px; padding: 0.8rem 1.8rem; transition: all var(--transition); } .slide-actions .btn-accent { border: 2px solid var(--clr-accent); } .slide-actions .btn-outline-light { border: 2px solid rgba(255, 255, 255, 0.4); color: var(--clr-white); } .slide-actions .btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--clr-white); } /* ---------- Visual Side (Image Reveal) ---------- */ .slide-visual { flex-shrink: 0; position: relative; width: clamp(320px, 42vw, 560px); height: clamp(320px, 42vw, 560px); } /* The outer ring / circle */ .visual-ring { width: 100%; height: 100%; border-radius: 50%; border: 3px solid rgba(172, 206, 34, 0.4); position: relative; overflow: hidden; box-shadow: 0 0 0 12px rgba(172, 206, 34, 0.06), 0 30px 80px rgba(0, 0, 0, 0.5); } .visual-ring--alt { border-color: rgba(172, 206, 34, 0.6); } /* The clip container — this is what slides in */ .visual-clip { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; /* clip-path diset via JS sebelum animasi dimulai */ } .visual-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 8s linear; } /* Badge floating */ .visual-badge { position: absolute; bottom: 14%; left: -8%; background: var(--clr-white); border-radius: 12px; padding: 0.8rem 1.2rem; display: flex; align-items: center; gap: 0.6rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateX(-20px); transition: opacity 0.5s ease, transform 0.5s ease; } .visual-badge i { font-size: 1.3rem; color: var(--clr-accent); } .visual-badge span { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--clr-navy); white-space: nowrap; } .visual-badge--alt { left: auto; right: -8%; bottom: 18%; } /* ---------- Stats Bar ---------- */ .slide-stats { position: absolute; bottom: 0; left: 0; right: 0; z-index: 4; display: flex; align-items: stretch; background: rgba(48, 49, 139, 0.85); backdrop-filter: blur(12px); border-top: 1px solid rgba(172, 206, 34, 0.3); padding: 1.4rem 8%; gap: 0; } .stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .stat-number { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--clr-accent); line-height: 1; } .stat-label { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } .stat-divider { width: 1px; background: rgba(255, 255, 255, 0.15); margin: 0 1rem; align-self: stretch; } /* ---------- Carousel Controls ---------- */ .hero-controls { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 2%; z-index: 10; pointer-events: none; } .hero-arrow { pointer-events: auto; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); color: var(--clr-white); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition); backdrop-filter: blur(6px); } .hero-arrow:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-navy); transform: scale(1.1); } /* ---------- Indicators ---------- */ .hero-indicators { position: absolute; bottom: 130px; left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; z-index: 10; } .hero-dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.35); cursor: pointer; padding: 0; transition: background var(--transition), width var(--transition), border-radius var(--transition); } .hero-dot.active { width: 28px; border-radius: 4px; background: var(--clr-accent); } /* ---------- Progress Bar ---------- */ .hero-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, 0.1); z-index: 10; } .hero-progress-bar { height: 100%; background: var(--clr-accent); width: 0%; transition: width 0.1s linear; } /* ---------- Scroll Hint ---------- */ .scroll-hint { position: absolute; bottom: 135px; right: 5%; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 10; } .scroll-line { width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(172, 206, 34, 0.8), transparent); animation: scrollPulse 2s ease-in-out infinite; } .scroll-hint span { font-family: var(--font-display); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); writing-mode: vertical-rl; transform: rotate(180deg); } @keyframes scrollPulse { 0%, 100% { opacity: 0.4; transform: scaleY(0.8); } 50% { opacity: 1; transform: scaleY(1); } } /* ============================================================ ANIMATIONS — triggered by JS adding .is-animating to .hero-slide.active ============================================================ */ /* Text items slide up */ .animate-item { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } .hero-slide.is-animating .animate-item[data-delay="0"] { opacity: 1; transform: none; transition-delay: 0.1s; } .hero-slide.is-animating .animate-item[data-delay="1"] { opacity: 1; transform: none; transition-delay: 0.25s; } .hero-slide.is-animating .animate-item[data-delay="2"] { opacity: 1; transform: none; transition-delay: 0.4s; } .hero-slide.is-animating .animate-item[data-delay="3"] { opacity: 1; transform: none; transition-delay: 0.55s; } .hero-slide.is-animating .animate-item[data-delay="4"] { opacity: 1; transform: none; transition-delay: 0.7s; } /* Visual — clip-path reveal dikontrol penuh oleh JS via inline style */ .animate-visual .visual-clip { transition: clip-path 1s cubic-bezier(0.77, 0, 0.18, 1); } /* Image slow zoom once revealed */ .hero-slide.is-animating .visual-img { transform: scale(1); transition-delay: 1.2s; } /* Badge pop-in */ .hero-slide.is-animating .visual-badge { opacity: 1; transform: translateX(0); transition-delay: 1s; } /* Stats bar */ .slide-stats.animate-item { transform: translateY(20px); } .hero-slide.is-animating .slide-stats.animate-item { opacity: 1; transform: none; transition-delay: 0.8s; } /* ============================================================ FOOTER ============================================================ */ .site-footer { background: var(--clr-dark); color: rgba(255, 255, 255, 0.75); font-family: var(--font-body); } /* Footer Top */ .footer-top { padding: 5rem 0 4rem; } .footer-desc { font-size: 0.88rem; line-height: 1.8; color: rgba(255, 255, 255, 0.55); margin-bottom: 1.8rem; max-width: 340px; } .footer-socials { display: flex; gap: 0.75rem; } .social-link { width: 38px; height: 38px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 0.95rem; transition: background var(--transition), border-color var(--transition), color var(--transition); } .social-link:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-navy); } /* Footer headings */ .footer-heading { font-family: var(--font-display); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-white); margin-bottom: 1.5rem; position: relative; padding-bottom: 0.75rem; } .footer-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 24px; height: 2px; background: var(--clr-accent); border-radius: 2px; } /* Footer links */ .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .footer-links a { font-size: 0.88rem; color: rgba(255, 255, 255, 0.5); text-decoration: none; transition: color var(--transition), padding-left var(--transition); display: inline-flex; align-items: center; gap: 0.4rem; } .footer-links a::before { content: '›'; color: var(--clr-accent); opacity: 0; transition: opacity var(--transition), transform var(--transition); transform: translateX(-6px); } .footer-links a:hover { color: var(--clr-accent); padding-left: 0.5rem; } .footer-links a:hover::before { opacity: 1; transform: translateX(0); } /* Footer contact */ .footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.9rem; } .footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.55); line-height: 1.6; } .footer-contact i { color: var(--clr-accent); font-size: 0.95rem; margin-top: 2px; flex-shrink: 0; } /* Newsletter */ .newsletter-label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 0.7rem; } .newsletter-form { display: flex; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; overflow: hidden; transition: border-color var(--transition); } .newsletter-form:focus-within { border-color: var(--clr-accent); } .newsletter-input { flex: 1; background: transparent; border: none; outline: none; padding: 0.7rem 1rem; font-family: var(--font-body); font-size: 0.85rem; color: var(--clr-white); } .newsletter-input::placeholder { color: rgba(255, 255, 255, 0.3); } .newsletter-btn { background: var(--clr-accent); border: none; color: var(--clr-navy); padding: 0 1.1rem; cursor: pointer; font-size: 0.95rem; transition: background var(--transition); } .newsletter-btn:hover { background: var(--clr-accent-dk); } /* Footer divider */ .footer-divider { padding: 0; } .divider-inner { height: 1px; background: linear-gradient(to right, transparent, rgba(172, 206, 34, 0.35), transparent); } /* Footer Bottom */ .footer-bottom { padding: 1.4rem 0; } .footer-copy { font-size: 0.8rem; color: rgba(255, 255, 255, 0.35); margin: 0; } .footer-legal { list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; gap: 1.5rem; } .footer-legal a { font-size: 0.78rem; color: rgba(255, 255, 255, 0.35); text-decoration: none; transition: color var(--transition); } .footer-legal a:hover { color: var(--clr-accent); } /* Logo icon footer fallback */ .logo-icon--footer { background: rgba(172, 206, 34, 0.15); border: 1px solid rgba(172, 206, 34, 0.4); color: var(--clr-accent); } /* ============================================================ TUGBOAT VECTOR ANIMATION ============================================================ */ /* Container kapal — posisi di bawah carousel */ .tugboat-scene { position: absolute; bottom: 68px; /* tepat di atas stats bar */ left: 0; right: 0; height: 90px; z-index: 3; pointer-events: none; overflow: hidden; } /* Gelombang laut */ .wave-layer { position: absolute; bottom: 0; left: 0; right: 0; height: 32px; overflow: hidden; } .wave-layer svg { position: absolute; bottom: 0; width: 200%; height: 100%; } .wave-layer--1 svg { animation: waveDrift 8s linear infinite; opacity: 0.35; } .wave-layer--2 svg { animation: waveDrift 12s linear infinite reverse; opacity: 0.2; bottom: 4px; } .wave-layer--3 svg { animation: waveDrift 6s linear infinite; opacity: 0.15; bottom: 8px; } @keyframes waveDrift { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Kapal tugboat SVG */ .tugboat-wrap { position: absolute; bottom: 20px; left: -220px; /* mulai dari luar layar kiri */ width: 200px; height: 65px; animation: tugboatSail 28s linear infinite; } /* Animasi kapal berlayar dari kiri ke kanan, lalu reset */ @keyframes tugboatSail { 0% { transform: translateX(0); opacity: 0; } 3% { opacity: 1; } 97% { opacity: 1; } 100% { transform: translateX(calc(100vw + 240px)); opacity: 0; } } /* Asap dari cerobong */ .smoke-puff { position: absolute; border-radius: 50%; background: rgba(200, 200, 200, 0.6); animation: smokeDrift 3s ease-out infinite; } .smoke-puff:nth-child(1) { width: 10px; height: 10px; top: -2px; left: 70px; animation-delay: 0s; } .smoke-puff:nth-child(2) { width: 8px; height: 8px; top: -8px; left: 74px; animation-delay: 0.8s; } .smoke-puff:nth-child(3) { width: 6px; height: 6px; top: -13px; left: 68px; animation-delay: 1.6s; } @keyframes smokeDrift { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; } 100% { transform: translateY(-30px) translateX(12px) scale(2.5); opacity: 0; } } /* Goyang kapal naik-turun mengikuti ombak */ .tugboat-svg { width: 100%; height: 100%; animation: boatBob 3s ease-in-out infinite; } @keyframes boatBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-3px) rotate(0.5deg); } 75% { transform: translateY(3px) rotate(-0.5deg); } } /* Ripple / cipratan air di bawah kapal */ .boat-ripple { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 180px; height: 10px; border-radius: 50%; border: 1px solid rgba(172, 206, 34, 0.3); animation: rippleExpand 2s ease-out infinite; } .boat-ripple:nth-child(2) { animation-delay: 0.7s; width: 160px; opacity: 0.6; } @keyframes rippleExpand { 0% { transform: translateX(-50%) scaleX(0.5); opacity: 0.8; } 100% { transform: translateX(-50%) scaleX(1.4); opacity: 0; } } /* ============================================================ RESPONSIVE — TABLET (≤ 991px) ============================================================ */ @media (max-width: 991.98px) { /* Header */ .site-header { height: auto; min-height: var(--header-h); } .navbar-collapse { background: rgba(15, 15, 50, 0.97); backdrop-filter: blur(16px); border-radius: 0 0 16px 16px; padding: 1rem 1.5rem 1.5rem; margin-top: 0.5rem; } .navbar-nav .nav-link { color: rgba(255, 255, 255, 0.9) !important; } .site-header.scrolled .navbar-collapse { background: rgba(255, 255, 255, 0.97); } .site-header.scrolled .navbar-collapse .nav-link { color: var(--clr-navy) !important; } /* Hero layout — stack vertikal */ .slide-content { flex-direction: column-reverse; /* circle di atas, teks di bawah */ justify-content: center; align-items: center; padding: calc(var(--header-h) + 0.5rem) 6% 7rem; text-align: center; gap: 1.5rem; } .slide-text { max-width: 100%; } .slide-desc br { display: none; } /* Circle lebih kecil di tablet */ .slide-visual { width: clamp(180px, 40vw, 280px); height: clamp(180px, 40vw, 280px); flex-shrink: 0; } .visual-badge { display: none; } /* Stats bar */ .slide-stats { padding: 0.8rem 4%; flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .stat-divider { display: none; } .stat-item { min-width: 70px; } .stat-number { font-size: 1.2rem; } .stat-label { font-size: 0.62rem; } /* Controls & indicators */ .hero-indicators { bottom: 100px; } .scroll-hint { display: none; } .hero-controls { padding: 0 1%; } .hero-arrow { width: 40px; height: 40px; font-size: 0.9rem; } /* Tugboat ukuran tablet */ .tugboat-scene { height: 70px; bottom: 60px; } .tugboat-wrap { width: 160px; height: 52px; } /* Footer */ .footer-legal { justify-content: flex-start; margin-top: 0.5rem; } } /* ============================================================ RESPONSIVE — MOBILE (≤ 767px) ============================================================ */ @media (max-width: 767.98px) { /* Hero height: biarkan natural, jangan paksa 100vh di HP kecil */ .hero-section { height: 100svh; min-height: 580px; } /* Slide content */ .slide-content { padding: calc(var(--header-h) + 0.5rem) 5% 6.5rem; gap: 1rem; } .slide-eyebrow { font-size: 0.65rem; margin-bottom: 0.5rem; } .slide-headline { font-size: clamp(1.6rem, 6vw, 2.4rem); margin-bottom: 0.8rem; } .slide-desc { font-size: 0.88rem; margin-bottom: 1.2rem; } /* Buttons: stack vertikal */ .slide-actions { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; } .slide-actions .btn { width: 100%; max-width: 260px; } .slide-actions .ms-3 { margin-left: 0 !important; } /* Circle image */ .slide-visual { width: clamp(140px, 38vw, 200px); height: clamp(140px, 38vw, 200px); } /* Stats — 2x2 grid di mobile */ .slide-stats { display: grid; grid-template-columns: 1fr 1fr; padding: 0.7rem 5%; gap: 0.6rem 0; } .stat-item { min-width: unset; padding: 0.3rem 0; } .stat-number { font-size: 1.1rem; } .stat-label { font-size: 0.6rem; } /* Arrows lebih kecil, sembunyikan di HP kecil */ .hero-arrow { width: 36px; height: 36px; font-size: 0.8rem; } .hero-indicators { bottom: 90px; } /* Tugboat lebih kecil */ .tugboat-scene { height: 55px; bottom: 52px; } .tugboat-wrap { width: 120px; height: 40px; } .smoke-puff:nth-child(1) { left: 52px; } .smoke-puff:nth-child(2) { left: 56px; } .smoke-puff:nth-child(3) { left: 50px; } } /* ============================================================ RESPONSIVE — SMALL MOBILE (≤ 575px) ============================================================ */ @media (max-width: 575.98px) { :root { --header-h: 64px; } /* Navbar toggler bar color tetap putih */ .toggler-bar { background: var(--clr-white); } .hero-section { min-height: 560px; } .slide-content { padding: calc(var(--header-h) + 0.25rem) 4% 6rem; gap: 0.75rem; } .slide-eyebrow { display: none; } /* hemat ruang di HP kecil */ .slide-headline { font-size: clamp(1.4rem, 7vw, 2rem); } .slide-visual { width: clamp(120px, 35vw, 175px); height: clamp(120px, 35vw, 175px); } /* Stats: sembunyikan label, tampilkan angka saja */ .slide-stats { gap: 0.4rem 0; padding: 0.6rem 4%; } .stat-label { display: none; } .stat-number { font-size: 1rem; } /* Sembunyikan arrows, pakai swipe */ .hero-arrow { display: none; } .hero-indicators { bottom: 76px; } .tugboat-scene { display: none; } /* terlalu sesak di HP kecil */ /* Footer */ .footer-top { padding: 3rem 0 2rem; } .footer-legal { flex-direction: column; gap: 0.5rem; } .footer-socials { flex-wrap: wrap; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .animate-item, .animate-visual .visual-clip, .visual-img, .visual-badge { transition-duration: 0.01ms !important; } .scroll-line { animation: none; } .tugboat-wrap, .tugboat-svg, .smoke-puff, .wave-layer svg, .boat-ripple { animation: none !important; } } /* ============================================================ GLOBAL SECTION UTILITIES ============================================================ */ .py-6 { padding-top: 5rem; padding-bottom: 5rem; } .mb-6 { margin-bottom: 4rem; } .mt-6 { margin-top: 4rem; } .section-label { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 0.6rem; display: block; } .section-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.8rem); color: var(--clr-navy); line-height: 1.15; margin-bottom: 1rem; } .section-desc { font-size: 1rem; color: #666; max-width: 600px; margin: 0 auto; line-height: 1.8; } .text-white-70 { color: rgba(255, 255, 255, 0.72); } /* Background helpers */ .bg-navy-soft { background: linear-gradient(135deg, #f4f5f9 0%, #eef0f8 100%); } .bg-navy-gradient { background: linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-navy-dk) 60%, #1a1a2e 100%); } /* Btn outline navy */ .btn-outline-navy { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid var(--clr-navy); color: var(--clr-navy); border-radius: 8px; padding: 0.6rem 1.4rem; text-decoration: none; display: inline-flex; align-items: center; transition: all var(--transition); } .btn-outline-navy:hover { background: var(--clr-navy); color: var(--clr-white); transform: translateY(-2px); } .visitor-stats-bar { background: linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-navy-dk) 60%, #1a1a2e 100%); padding: 1.6rem 0; border-top: 3px solid var(--clr-accent); position: relative; overflow: hidden; } /* Geometric bg accent */ .visitor-stats-bar::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(60deg, rgba(172, 206, 34, 0.04) 1px, transparent 1px), linear-gradient(-60deg, rgba(172, 206, 34, 0.04) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none; } .vsb-eyebrow-line { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--clr-accent); text-align: center; margin-bottom: 1rem; opacity: 0.85; } .vsb-grid { display: flex; align-items: center; justify-content: center; gap: 0; } .vsb-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0 1rem; max-width: 160px; } .vsb-divider { width: 1px; height: 40px; background: rgba(255, 255, 255, 0.15); flex-shrink: 0; } .vsb-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--clr-accent); line-height: 1; display: block; /* count-up akan set nilai via JS */ } .vsb-period { font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } /* Responsive */ @media (max-width: 575.98px) { .vsb-grid { gap: 0; } .vsb-cell { padding: 0 0.5rem; max-width: 80px; } .vsb-num { font-size: 1.3rem; } .vsb-period { font-size: 0.55rem; letter-spacing: 0.08em; } .vsb-divider { height: 32px; } } /* ============================================================ PAGE HERO — full image background ============================================================ */ .page-hero { position: relative; height: 420px; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; margin-top: var(--header-h); } /* Background image layer */ .page-hero-bg { position: absolute; inset: 0; z-index: 0; } .page-hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(8, 8, 35, 0.88) 0%, rgba(48, 49, 139, 0.65) 50%, rgba(8, 8, 35, 0.4) 100%); z-index: 1; } /* Animated wave bottom */ .page-hero-waves { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; line-height: 0; } .page-hero-waves svg { width: 100%; height: 70px; display: block; } /* Small ship silhouette */ .page-hero-ship { position: absolute; right: 8%; bottom: 70px; width: 180px; z-index: 3; animation: heroShipDrift 6s ease-in-out infinite; } @keyframes heroShipDrift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(0.5deg); } } /* Content */ .page-hero-content-wrap { position: relative; z-index: 4; } .page-hero-content { padding-bottom: 3.5rem; } .page-hero-eyebrow { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 0.5rem; } .page-hero-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.8rem, 4vw, 3rem); color: var(--clr-white); margin-bottom: 0.5rem; line-height: 1.1; } .page-hero-subtitle { color: rgba(255, 255, 255, 0.7); font-size: 1rem; margin-bottom: 0.75rem; } .page-hero-breadcrumb { margin: 0; background: transparent; padding: 0; } .page-hero-breadcrumb .breadcrumb-item, .page-hero-breadcrumb .breadcrumb-item a { font-size: 0.8rem; color: rgba(255, 255, 255, 0.6); text-decoration: none; } .page-hero-breadcrumb .breadcrumb-item.active { color: var(--clr-accent); } .page-hero-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color: rgba(255, 255, 255, 0.4); } /* ============================================================ DIRECTOR SECTION ============================================================ */ .director-photo-wrap { position: relative; display: inline-block; } .director-photo { width: 100%; max-width: 420px; border-radius: 20px; object-fit: cover; box-shadow: 0 20px 60px rgba(48, 49, 139, 0.2); } .director-photo-wrap--sm .director-photo { max-width: 360px; } .director-photo-badge { position: absolute; bottom: -20px; right: -20px; background: var(--clr-navy); color: white; border-radius: 14px; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.75rem; box-shadow: 0 10px 30px rgba(48, 49, 139, 0.3); } .director-photo-badge i { font-size: 1.8rem; color: var(--clr-accent); } .director-photo-badge .fw-bold { font-family: var(--font-display); font-size: 0.85rem; } .director-photo-badge .small { font-size: 0.72rem; color: var(--clr-accent); } .speech-quote i { font-size: 3rem; color: var(--clr-accent); opacity: 0.4; line-height: 1; display: block; margin-bottom: -0.5rem; } .director-speech-text { font-size: 1rem; line-height: 1.9; color: #555; font-style: italic; } .director-speech { border-left: 3px solid var(--clr-accent); padding-left: 1.5rem; margin: 1rem 0; } .director-sig { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; } /* ============================================================ SERVICE CARDS (homepage) ============================================================ */ .service-card { background: white; border-radius: 16px; padding: 2rem 1.8rem; height: 100%; border: 1px solid rgba(48, 49, 139, 0.08); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--clr-navy), var(--clr-accent)); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(48, 49, 139, 0.12); border-color: transparent; } .service-card:hover::before { transform: scaleX(1); } .service-card-icon { width: 60px; height: 60px; background: linear-gradient(135deg, var(--clr-navy), var(--clr-navy-dk)); border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; transition: transform var(--transition); } .service-card:hover .service-card-icon { transform: rotate(-8deg) scale(1.05); } .service-card-icon i { font-size: 1.5rem; color: var(--clr-accent); } .service-card-title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--clr-navy); margin-bottom: 0.75rem; } .service-card-desc { font-size: 0.88rem; color: #666; line-height: 1.7; margin-bottom: 1.5rem; } .service-card-link { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; color: var(--clr-navy); text-decoration: none; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.3rem; transition: color var(--transition), gap var(--transition); } .service-card-link:hover { color: var(--clr-accent); gap: 0.6rem; } /* Service detail (services page) */ .service-detail-row { display: flex; align-items: center; gap: 4rem; padding: 3rem 0; } .service-detail-row--reverse { flex-direction: row-reverse; } .service-detail-visual { flex-shrink: 0; position: relative; width: 180px; } .service-detail-icon-wrap { width: 120px; height: 120px; background: linear-gradient(135deg, var(--clr-navy), var(--clr-navy-dk)); border-radius: 24px; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(48, 49, 139, 0.25); } .service-detail-icon-wrap i { font-size: 3rem; color: var(--clr-accent); } .service-detail-number { position: absolute; top: -15px; right: -15px; font-family: var(--font-display); font-size: 4rem; font-weight: 900; color: var(--clr-accent); opacity: 0.15; line-height: 1; } .service-detail-body { flex: 1; } .service-detail-title { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--clr-navy); margin-bottom: 1rem; } .service-detail-desc { font-size: 0.95rem; color: #555; line-height: 1.9; margin-bottom: 1.5rem; } .service-divider { border-color: rgba(48, 49, 139, 0.1); margin: 0; } /* ============================================================ FLEET CARDS ============================================================ */ .fleet-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); transition: transform var(--transition), box-shadow var(--transition); height: 100%; } .fleet-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(48, 49, 139, 0.15); } .fleet-card-img-wrap { position: relative; height: 220px; overflow: hidden; } .fleet-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .fleet-card:hover .fleet-card-img { transform: scale(1.06); } .fleet-card-type-badge { position: absolute; top: 12px; left: 12px; background: var(--clr-navy); color: var(--clr-accent); font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; } .fleet-card-overlay { position: absolute; inset: 0; background: rgba(10, 10, 40, 0.6); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); } .fleet-card:hover .fleet-card-overlay { opacity: 1; } .fleet-card-body { padding: 1.4rem; } .fleet-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--clr-navy); margin-bottom: 0.75rem; } .fleet-card-specs { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1rem; } .fleet-spec-item { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: #666; } .fleet-spec-item i { color: var(--clr-accent); } .fleet-card-link { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--clr-navy); text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; display: inline-flex; align-items: center; gap: 0.3rem; transition: color var(--transition), gap var(--transition); } .fleet-card-link:hover { color: var(--clr-accent); gap: 0.6rem; } /* Fleet detail */ .fleet-gallery-main { border-radius: 16px; overflow: hidden; margin-bottom: 0.75rem; } .fleet-gallery-main-img { width: 100%; height: 400px; object-fit: cover; } .fleet-gallery-thumbs { display: flex; gap: 0.5rem; flex-wrap: wrap; } .fleet-gallery-thumb { width: 100px; height: 70px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; opacity: 0.7; transition: all var(--transition); } .fleet-gallery-thumb:hover, .fleet-gallery-thumb.active { border-color: var(--clr-accent); opacity: 1; } .fleet-specs-panel { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 30px rgba(48, 49, 139, 0.1); } .fleet-specs-name { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--clr-navy); } .fleet-specs-type { font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; color: var(--clr-accent); text-transform: uppercase; letter-spacing: 0.15em; display: block; margin-bottom: 1.5rem; } .fleet-specs-table { border-top: 1px solid rgba(48, 49, 139, 0.1); } .fleet-spec-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 0; border-bottom: 1px solid rgba(48, 49, 139, 0.07); } .fleet-spec-label { font-size: 0.85rem; color: #888; display: flex; align-items: center; gap: 0.4rem; } .fleet-spec-label i { color: var(--clr-accent); } .fleet-spec-value { font-family: var(--font-display); font-size: 0.88rem; font-weight: 700; color: var(--clr-navy); } /* ============================================================ AWARD CARDS ============================================================ */ .award-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); transition: transform var(--transition), box-shadow var(--transition); height: 100%; } .award-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(48, 49, 139, 0.12); } .award-img-wrap { position: relative; height: 200px; overflow: hidden; cursor: pointer; } .award-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); } .award-img-wrap:hover img { transform: scale(1.05); } /* Zoom hint overlay */ .award-img-zoom-hint { position: absolute; inset: 0; background: rgba(48, 49, 139, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); } .award-img-zoom-hint i { font-size: 2rem; color: var(--clr-accent); } .award-img-wrap:hover .award-img-zoom-hint { opacity: 1; } .award-img-clickable { cursor: zoom-in; } .award-year-badge { position: absolute; bottom: 12px; right: 12px; background: var(--clr-accent); color: var(--clr-navy); font-family: var(--font-display); font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 20px; } .award-body { padding: 1.4rem; } .award-kategori { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; color: var(--clr-accent); text-transform: uppercase; letter-spacing: 0.15em; display: block; margin-bottom: 0.5rem; } .award-title { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--clr-navy); margin-bottom: 0.4rem; } .award-penerbit { font-size: 0.8rem; color: #888; margin-bottom: 0.5rem; } .award-desc { font-size: 0.85rem; color: #666; line-height: 1.7; } /* ============================================================ NEWS CARDS ============================================================ */ .news-card-link { text-decoration: none; display: block; height: 100%; } .news-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); transition: transform var(--transition), box-shadow var(--transition); height: 100%; } .news-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(48, 49, 139, 0.12); } .news-card--featured .news-card-img-wrap { height: 380px; } .news-card--featured .news-card-title { font-size: 1.4rem; } .news-card--featured .news-card-body { padding: 2rem; } .news-card-img-wrap { position: relative; height: 220px; overflow: hidden; } .news-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .news-card:hover .news-card-img-wrap img { transform: scale(1.05); } .news-kategori-badge { position: absolute; top: 12px; left: 12px; background: var(--clr-accent); color: var(--clr-navy); font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border-radius: 20px; } .news-card-body { padding: 1.4rem; } .news-meta { display: flex; gap: 1rem; font-size: 0.78rem; color: #999; margin-bottom: 0.75rem; } .news-card-title { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--clr-navy); margin-bottom: 0.6rem; line-height: 1.4; } .news-card-excerpt { font-size: 0.85rem; color: #666; line-height: 1.7; margin-bottom: 1rem; } .news-card-readmore { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--clr-accent); text-transform: uppercase; letter-spacing: 0.05em; } /* News detail */ .news-article-main-img { width: 100%; border-radius: 12px; max-height: 450px; object-fit: cover; } .news-article-lead { font-size: 1.1rem; font-weight: 500; color: var(--clr-navy); border-left: 3px solid var(--clr-accent); padding-left: 1.2rem; margin-bottom: 1.5rem; } .news-article-body p { font-size: 0.95rem; line-height: 1.9; color: #555; margin-bottom: 1rem; } .news-share { border-top: 1px solid #eee; padding-top: 1.5rem; } .news-sidebar { background: white; border-radius: 16px; padding: 1.5rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); } .sidebar-title { font-family: var(--font-display); font-weight: 800; color: var(--clr-navy); margin-bottom: 1.2rem; border-bottom: 2px solid var(--clr-accent); padding-bottom: 0.5rem; } .sidebar-news-item { display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid #eee; text-decoration: none; } .sidebar-news-item img { width: 80px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; } .sidebar-news-kategori { font-size: 0.65rem; color: var(--clr-accent); text-transform: uppercase; font-weight: 700; display: block; } .sidebar-news-title { font-size: 0.82rem; color: var(--clr-navy); font-weight: 600; line-height: 1.4; margin: 0.2rem 0; } .sidebar-news-date { font-size: 0.75rem; color: #999; } /* ============================================================ CLIENTS MARQUEE ============================================================ */ .clients-marquee-wrap { overflow: hidden; } .clients-marquee { display: flex; gap: 2rem; animation: marqueeScroll 30s linear infinite; width: max-content; } .clients-marquee:hover { animation-play-state: paused; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .client-logo-item { flex-shrink: 0; width: 160px; height: 80px; background: white; border-radius: 12px; display: flex; align-items: center; justify-content: center; padding: 1rem; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: box-shadow var(--transition); } .client-logo-item:hover { box-shadow: 0 8px 25px rgba(48, 49, 139, 0.12); } .client-logo-item img { max-width: 120px; max-height: 50px; object-fit: contain; filter: grayscale(80%); opacity: 0.7; transition: all var(--transition); } .client-logo-item:hover img { filter: none; opacity: 1; } .client-logo-fallback { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; color: var(--clr-navy); text-align: center; } /* Client cards (company page) */ .client-card { background: white; border-radius: 12px; padding: 1.5rem; text-align: center; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); transition: transform var(--transition), box-shadow var(--transition); height: 100%; } .client-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(48, 49, 139, 0.1); } .client-card img { max-height: 60px; max-width: 140px; object-fit: contain; filter: grayscale(60%); transition: filter var(--transition); margin-bottom: 0.75rem; display: block; margin-inline: auto; } .client-card:hover img { filter: none; } .client-name { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; color: var(--clr-navy); } /* ============================================================ CTA SECTION ============================================================ */ .cta-eyebrow { font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-accent); margin-bottom: 0.5rem; } .cta-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.4rem); color: white; line-height: 1.2; margin-bottom: 1rem; } .cta-desc { font-size: 0.95rem; margin-bottom: 0; } .cta-contacts { background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 1.5rem; } .cta-contact-item { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); text-decoration: none; transition: padding-left var(--transition); } .cta-contact-item:last-of-type { border-bottom: none; } .cta-contact-item:hover { padding-left: 0.4rem; } .cta-contact-icon { width: 42px; height: 42px; background: var(--clr-accent); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--clr-navy); font-size: 1.1rem; flex-shrink: 0; } .cta-contact-label { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; } .cta-contact-value { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: white; } /* ============================================================ ABOUT HOME VISUAL GRID ============================================================ */ .about-home-visual { position: relative; padding: 1rem; } .about-home-img-grid { position: relative; } .about-grid-img { border-radius: 16px; object-fit: cover; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); } .about-grid-img--1 { width: 100%; max-width: 400px; height: 260px; } .about-grid-img--2 { width: 220px; height: 170px; position: absolute; bottom: -30px; right: 0; border: 4px solid white; } .about-mini-stat { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 1rem; text-align: center; } .about-mini-num { font-family: var(--font-display); font-size: 1.5rem; font-weight: 900; color: var(--clr-accent); display: block; } .about-mini-lbl { font-size: 0.75rem; color: rgba(255, 255, 255, 0.65); } /* About page stats */ .about-stat-card { background: white; border-radius: 16px; padding: 2rem; text-align: center; box-shadow: 0 4px 20px rgba(48, 49, 139, 0.08); transition: transform var(--transition); height: 100%; } .about-stat-card:hover { transform: translateY(-4px); } .about-stat-icon { font-size: 2rem; color: var(--clr-accent); margin-bottom: 0.75rem; } .about-stat-number { font-family: var(--font-display); font-size: 2rem; font-weight: 900; color: var(--clr-navy); display: block; } .about-stat-label { font-size: 0.85rem; color: #888; } .about-desc { font-size: 1rem; line-height: 1.9; color: #555; } /* ============================================================ VISION & MISSION ============================================================ */ .visi-card, .misi-card { background: white; border-radius: 20px; padding: 2.5rem; box-shadow: 0 8px 30px rgba(48, 49, 139, 0.1); height: 100%; position: relative; overflow: hidden; } .visi-card { border-top: 4px solid var(--clr-accent); } .misi-card { border-top: 4px solid var(--clr-navy); } .visi-card-header, .misi-card-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; } .visi-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--clr-navy), var(--clr-navy-dk)); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: 1.3rem; } .visi-card-header h3, .misi-card-header h3 { font-family: var(--font-display); font-weight: 800; color: var(--clr-navy); margin: 0; } .visi-text { font-size: 1rem; line-height: 1.9; color: #555; font-style: italic; } .visi-deco { position: absolute; bottom: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, rgba(172, 206, 34, 0.1), rgba(48, 49, 139, 0.05)); } .misi-list { padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; } .misi-list li { padding: 0.75rem 1rem 0.75rem 1.2rem; border-left: 3px solid var(--clr-accent); font-size: 0.9rem; line-height: 1.7; color: #555; background: rgba(172, 206, 34, 0.04); border-radius: 0 8px 8px 0; counter-increment: misi-counter; position: relative; } /* ============================================================ MILESTONE — HORIZONTAL RAIL SLIDER ============================================================ */ .milestone-slider-wrap { position: relative; } /* Nav arrows */ .milestone-nav { position: absolute; top: 36px; /* aligned with dot center */ z-index: 10; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(172, 206, 34, 0.5); background: rgba(48, 49, 139, 0.75); backdrop-filter: blur(6px); color: var(--clr-accent); font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), border-color var(--transition), transform var(--transition); transform: none; } .milestone-nav:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: var(--clr-navy); transform: scale(1.1); } .milestone-nav--prev { left: 0; } .milestone-nav--next { right: 0; } .milestone-nav:disabled { opacity: 0.25; cursor: default; pointer-events: none; } /* Scrollable track — uses native scroll-snap */ .milestone-track-outer { overflow-x: scroll; overflow-y: hidden; /* browser paksa ini saat overflow-x aktif */ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; padding: 0 3.5rem 1.5rem; /* bottom padding untuk shadow dot */ position: relative; scrollbar-width: none; -ms-overflow-style: none; } .milestone-track-outer::-webkit-scrollbar { display: none; } .milestone-track-outer:active { cursor: grabbing; } /* Rail line — on .milestone-track so it stretches with content */ .milestone-track { display: flex; align-items: flex-start; gap: 1.25rem; width: max-content; position: relative; } .milestone-track::before { content: ''; position: absolute; top: 26px; /* center of dot (52px / 2 = 26px) */ left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clr-accent), var(--clr-navy), var(--clr-accent)); z-index: 0; pointer-events: none; } } /* Single item */ .milestone-item-h { flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; padding: 0 0.6rem; scroll-snap-align: start; position: relative; z-index: 1; } /* Dot */ .milestone-dot-h { width: 48px; height: 48px; border-radius: 50%; background: var(--clr-dark); border: 2.5px solid var(--clr-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 1.2rem; box-shadow: 0 0 0 5px rgba(172, 206, 34, 0.1), 0 4px 14px rgba(0, 0, 0, 0.4); transition: transform var(--transition), box-shadow var(--transition), background var(--transition); cursor: default; position: relative; z-index: 2; } .milestone-dot-h:hover { transform: scale(1.15); background: var(--clr-navy); box-shadow: 0 0 0 8px rgba(172, 206, 34, 0.18), 0 8px 24px rgba(0, 0, 0, 0.5); } .milestone-dot-h span { font-family: var(--font-display); font-size: 0.58rem; font-weight: 900; color: var(--clr-accent); letter-spacing: 0.03em; } /* Card — compact, no image */ .milestone-card-h { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(172, 206, 34, 0.2); border-top: 3px solid var(--clr-accent); border-radius: 12px; width: 100%; padding: 1rem 1.1rem 1.1rem; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition); backdrop-filter: blur(6px); } .milestone-card-h:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.1); border-color: rgba(172, 206, 34, 0.5); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3); } /* Sembunyikan gambar — tidak dipakai di desain ini */ .milestone-card-img { display: none; } .milestone-card-body { padding: 0; } .milestone-year-badge { background: var(--clr-accent); color: var(--clr-navy); font-family: var(--font-display); font-size: 0.6rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; display: inline-block; margin-bottom: 0.6rem; letter-spacing: 0.05em; } .milestone-title { font-family: var(--font-display); font-weight: 800; font-size: 0.85rem; color: var(--clr-white); margin-bottom: 0.5rem; line-height: 1.3; } .milestone-desc { font-size: 0.76rem; color: rgba(255, 255, 255, 0.6); line-height: 1.6; margin: 0; } /* Dot indicators */ .milestone-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.8rem; } .milestone-dot-ind { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: none; cursor: pointer; padding: 0; transition: background var(--transition), width var(--transition), border-radius var(--transition); } .milestone-dot-ind.active { width: 24px; border-radius: 4px; background: var(--clr-accent); } /* Responsive */ @media (max-width: 767.98px) { .milestone-item-h { flex: 0 0 220px; } .milestone-nav { width: 36px; height: 36px; font-size: 0.85rem; } .milestone-track-outer { padding: 0 2.5rem 1rem; } .milestone-track-outer::before { left: 2.5rem; right: 2.5rem; } } @media (max-width: 575.98px) { .milestone-item-h { flex: 0 0 190px; } .milestone-track-outer { padding: 0 2rem 1rem; } .milestone-track-outer::before { left: 2rem; right: 2rem; } } /* ============================================================ ORG STRUCTURE ============================================================ */ .org-img-wrap { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 20px rgba(48, 49, 139, 0.08); } .org-img { width: 40%; border-radius: 8px; } /* ============================================================ CERTIFICATES ============================================================ */ .cert-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); transition: transform var(--transition); height: 100%; } .cert-card:hover { transform: translateY(-4px); } .cert-img-wrap { height: 160px; overflow: hidden; } .cert-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .cert-body { padding: 1.2rem; } .cert-title { font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; color: var(--clr-navy); margin-bottom: 0.4rem; } .cert-desc { font-size: 0.82rem; color: #666; line-height: 1.6; margin: 0; } /* ============================================================ GALLERY CARDS ============================================================ */ .gallery-card { border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); position: relative; cursor: zoom-in; } .gallery-card img { width: 100%; height: 220px; object-fit: cover; transition: transform var(--transition-slow); display: block; } .gallery-card:hover img { transform: scale(1.06); } .gallery-card-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(10, 10, 40, 0.85), transparent); color: white; font-size: 0.8rem; padding: 2rem 1rem 0.8rem; transform: translateY(100%); transition: transform var(--transition); } .gallery-card:hover .gallery-card-caption { transform: translateY(0); } /* Activity tabs */ .activity-tabs { gap: 0.5rem; flex-wrap: wrap; } .activity-tab-btn { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 2px solid rgba(48, 49, 139, 0.2); background: white; color: var(--clr-navy); border-radius: 8px; padding: 0.5rem 1.2rem; cursor: pointer; transition: all var(--transition); } .activity-tab-btn.active, .activity-tab-btn:hover { background: var(--clr-navy); color: var(--clr-accent); border-color: var(--clr-navy); } /* ============================================================ BRANCH OFFICES ============================================================ */ .branch-pusat-img { width: 100%; border-radius: 16px; max-height: 700px; object-fit: cover; } .branch-pusat-badge { display: inline-block; background: var(--clr-accent); color: var(--clr-navy); font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; padding: 4px 14px; border-radius: 20px; margin-bottom: 0.75rem; } .branch-pusat-name { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: var(--clr-navy); margin-bottom: 1rem; } .branch-info-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; } .branch-info-list li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; color: #555; } .branch-info-list i { color: var(--clr-accent); flex-shrink: 0; margin-top: 2px; } .branch-info-list--sm li { font-size: 0.82rem; } .branch-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); transition: transform var(--transition); height: 100%; } .branch-card:hover { transform: translateY(-4px); } .branch-card-img { width: 100%; height: 200px; object-fit: cover; } .branch-card-body { padding: 1.2rem; } .branch-card-name { font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; color: var(--clr-navy); margin-bottom: 0.75rem; } /* Contact Map */ .contact-map { height: 420px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } /* Contact form */ .contact-form-card { background: white; border-radius: 20px; padding: 2.5rem; box-shadow: 0 8px 40px rgba(48, 49, 139, 0.1); } .contact-form-title { font-family: var(--font-display); font-weight: 800; color: var(--clr-navy); margin-bottom: 1.5rem; } .form-label-custom { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clr-navy); margin-bottom: 0.4rem; display: block; } .form-input-custom { width: 100%; padding: 0.75rem 1rem; border: 2px solid rgba(48, 49, 139, 0.12); border-radius: 10px; font-family: var(--font-body); font-size: 0.9rem; color: #333; background: var(--clr-light); transition: border-color var(--transition), box-shadow var(--transition); outline: none; appearance: none; } .form-input-custom:focus { border-color: var(--clr-accent); box-shadow: 0 0 0 3px rgba(172, 206, 34, 0.15); background: white; } textarea.form-input-custom { resize: vertical; min-height: 120px; } /* Contact info */ .contact-info-list { display: flex; flex-direction: column; gap: 0.75rem; } .contact-info-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: white; border-radius: 12px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); text-decoration: none; transition: transform var(--transition), box-shadow var(--transition); } .contact-info-item:hover { transform: translateX(4px); box-shadow: 0 8px 25px rgba(48, 49, 139, 0.1); } .contact-info-icon { width: 44px; height: 44px; background: linear-gradient(135deg, var(--clr-navy), var(--clr-navy-dk)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--clr-accent); font-size: 1.1rem; flex-shrink: 0; } .contact-info-label { font-family: var(--font-display); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #888; display: block; } .contact-info-value { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--clr-navy); } /* ============================================================ CAREER ============================================================ */ .career-card { background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07); transition: transform var(--transition), box-shadow var(--transition); height: 100%; } .career-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(48, 49, 139, 0.12); } .career-card-img-wrap { position: relative; height: 220px; overflow: hidden; } .career-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .career-tipe-badge { position: absolute; top: 12px; right: 12px; background: var(--clr-accent); color: var(--clr-navy); font-family: var(--font-display); font-size: 0.65rem; font-weight: 800; padding: 4px 12px; border-radius: 20px; } .career-card-body { padding: 1.5rem; } .career-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.2rem; font-size: 0.78rem; color: #888; margin-bottom: 0.75rem; } .career-deadline { color: #e74c3c; } .career-posisi { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--clr-navy); margin-bottom: 0.6rem; } .career-desc { font-size: 0.85rem; color: #666; line-height: 1.7; margin-bottom: 1.2rem; } /* Career detail */ .career-desc-full { font-size: 0.95rem; color: #555; line-height: 1.9; } .career-syarat-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .career-syarat-list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9rem; color: #555; line-height: 1.6; } .career-syarat-list li i { color: var(--clr-accent); flex-shrink: 0; margin-top: 2px; } .career-apply-card { background: white; border-radius: 16px; padding: 2rem; box-shadow: 0 4px 30px rgba(48, 49, 139, 0.1); position: sticky; top: calc(var(--header-h) + 1.5rem); } .career-apply-title { font-family: var(--font-display); font-weight: 800; color: var(--clr-navy); border-bottom: 2px solid var(--clr-accent); padding-bottom: 0.75rem; margin-bottom: 1.2rem; } .career-detail-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; } .career-detail-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: #555; } .career-detail-list i { color: var(--clr-accent); width: 18px; } /* ============================================================ SERVICE CTA ============================================================ */ .section-cta-services { background: linear-gradient(135deg, var(--clr-navy) 0%, var(--clr-navy-dk) 100%); } /* ============================================================ SHIP BACKGROUND SECTIONS ============================================================ */ .section-ship-bg { position: relative; background: var(--clr-dark); } .section-ship-bg::before { content: ''; position: absolute; inset: 0; background: var(--ship-bg, none) center/cover no-repeat; z-index: 0; } .ship-bg-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(105deg, rgba(10, 10, 30, 0.82) 0%, rgba(48, 49, 139, 0.6) 55%, rgba(10, 10, 30, 0.4) 100%); } .ship-bg-overlay--dark { background: linear-gradient(135deg, rgba(5, 5, 20, 0.92) 0%, rgba(20, 20, 60, 0.8) 100%); } .ship-bg-overlay--navy { background: linear-gradient(135deg, rgba(48, 49, 139, 0.92) 0%, rgba(26, 26, 46, 0.88) 100%); } .section-ship-bg .position-relative { position: relative; } .z-2 { z-index: 2 !important; } .accent-label { color: var(--clr-accent) !important; } /* ============================================================ OCEAN DIVIDER ============================================================ */ .ocean-divider { position: relative; height: 90px; /* taller to give ship room */ overflow: hidden; background: transparent; } .ocean-divider--flip { transform: scaleY(-1); } /* SVG waves fill the container */ .ocean-divider-svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* ---- Wave path animations ---- */ .wave-path--1 { animation: waveAnim1 8s ease-in-out infinite; } .wave-path--2 { animation: waveAnim2 6s ease-in-out infinite 1s; } .wave-path--3 { animation: waveAnim3 10s ease-in-out infinite 0.5s; } @keyframes waveAnim1 { 0%, 100% { d: path("M0,40 C180,80 360,0 540,40 C720,80 900,0 1080,40 C1260,80 1380,20 1440,40 L1440,80 L0,80 Z"); } 50% { d: path("M0,50 C180,20 360,70 540,45 C720,20 900,65 1080,45 C1260,25 1380,55 1440,50 L1440,80 L0,80 Z"); } } @keyframes waveAnim2 { 0%, 100% { d: path("M0,55 C240,30 480,70 720,50 C960,30 1200,65 1440,50 L1440,80 L0,80 Z"); } 50% { d: path("M0,45 C240,65 480,35 720,55 C960,70 1200,40 1440,55 L1440,80 L0,80 Z"); } } @keyframes waveAnim3 { 0%, 100% { d: path("M0,65 C360,45 720,75 1080,55 C1260,45 1380,65 1440,60 L1440,80 L0,80 Z"); } 50% { d: path("M0,60 C360,75 720,50 1080,65 C1260,72 1380,55 1440,65 L1440,80 L0,80 Z"); } } /* ---- Floating buoys ---- */ .divider-nav-elements { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .divider-buoy { position: absolute; width: 8px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; bottom: 10px; } .divider-buoy--1 { left: 20%; background: var(--clr-accent); animation: buoyBob 3s ease-in-out infinite; } .divider-buoy--2 { right: 18%; background: rgba(255, 255, 255, 0.6); animation: buoyBob 4s ease-in-out infinite 1.5s; } @keyframes buoyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* ---- Ship sailing across ---- */ .divider-ship-wrap { position: absolute; /* sits just above the first wave crest */ bottom: 28px; left: -200px; /* start off-screen left */ z-index: 4; pointer-events: none; animation: dividerShipSail 22s linear infinite; } @keyframes dividerShipSail { 0% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { transform: translateX(calc(100vw + 220px)); opacity: 0; } } /* Bob wrapper — separate from horizontal travel */ .divider-ship-bob { position: relative; animation: dividerShipBob 2.8s ease-in-out infinite; } @keyframes dividerShipBob { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-4px) rotate(0.4deg); } 75% { transform: translateY(3px) rotate(-0.3deg); } } .divider-ship-svg { width: 160px; height: 52px; display: block; } /* ---- Smoke puffs ---- */ .divider-smoke { position: absolute; border-radius: 50%; background: rgba(200, 200, 200, 0.55); animation: dividerSmoke 2.5s ease-out infinite; } /* position relative to ship: funnel is at ~x:60-68 in the 160-wide SVG */ .divider-smoke--1 { width: 9px; height: 9px; top: -4px; left: 62px; animation-delay: 0s; } .divider-smoke--2 { width: 7px; height: 7px; top: -10px; left: 66px; animation-delay: 0.7s; } .divider-smoke--3 { width: 5px; height: 5px; top: -15px; left: 60px; animation-delay: 1.4s; } @keyframes dividerSmoke { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.65; } 100% { transform: translateY(-28px) translateX(10px) scale(2.4); opacity: 0; } } /* ---- Wake / water trail behind ship ---- */ .divider-wake { position: absolute; bottom: -4px; right: -30px; /* trails behind (ship moves left→right) */ width: 70px; height: 8px; border-radius: 50%; border: 1.5px solid rgba(172, 206, 34, 0.35); animation: dividerWake 1.8s ease-out infinite; } @keyframes dividerWake { 0% { transform: scaleX(0.4); opacity: 0.8; } 100% { transform: scaleX(1.6); opacity: 0; } } /* ============================================================ CTA COMPASS ANIMATION ============================================================ */ .cta-compass { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); width: 300px; pointer-events: none; z-index: 1; } .compass-svg { width: 100%; animation: compassRotateSlow 40s linear infinite; opacity: 0.4; } @keyframes compassRotateSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================================ MARITIME FLOATING ELEMENTS ============================================================ */ /* Anchor watermark on cards */ .service-card::after { content: '⚓'; position: absolute; bottom: -10px; right: -10px; font-size: 5rem; opacity: 0.03; pointer-events: none; line-height: 1; } /* Floating rope line decoration */ .section-director-home::before, .section-achievements-home::before { content: ''; display: block; width: 60px; height: 3px; background: linear-gradient(90deg, var(--clr-accent), transparent); margin: 0 auto 2rem; } /* ============================================================ PAGE HERO RESPONSIVE ============================================================ */ @media (max-width: 991.98px) { .page-hero { height: 340px; } .page-hero-title { font-size: clamp(1.5rem, 5vw, 2.2rem); } .page-hero-ship { display: none; } .cta-compass { display: none; } } @media (max-width: 575.98px) { .page-hero { height: 280px; } .page-hero-content { padding-bottom: 2.5rem; } .section-ship-bg::before { background-attachment: scroll; } } /* ============================================================ RESPONSIVE — inner pages ============================================================ */ @media (max-width: 991.98px) { .page-hero { height: 300px; } .page-hero-title { font-size: clamp(1.5rem, 5vw, 2.2rem); } .service-detail-row, .service-detail-row--reverse { flex-direction: column; gap: 2rem; } .service-detail-visual { width: auto; } .about-grid-img--2 { display: none; } } @media (max-width: 575.98px) { .py-6 { padding-top: 3rem; padding-bottom: 3rem; } .page-hero { height: 260px; } .cta-contacts { padding: 1rem; } } /* ============================================================ AWARD LIGHTBOX — image only ============================================================ */ .award-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .award-lightbox.is-open { opacity: 1; pointer-events: auto; } .award-lightbox-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 20, 0.92); backdrop-filter: blur(8px); cursor: pointer; } /* Image */ .award-lightbox-img-only { position: relative; z-index: 1; max-width: 90vw; max-height: 85vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: scale(0.9); transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: block; } .award-lightbox.is-open .award-lightbox-img-only { transform: scale(1); } /* Close button */ .award-lightbox-close { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.15); color: white; font-size: 1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition), transform var(--transition); backdrop-filter: blur(4px); } .award-lightbox-close:hover { background: var(--clr-accent); color: var(--clr-navy); transform: scale(1.1); } /* ============================================================ MOTTO CARD ============================================================ */ .moto-card { background: linear-gradient(135deg, var(--clr-navy), var(--clr-navy-dk)); border-radius: 14px; padding: 1.4rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; border-left: 4px solid var(--clr-accent); box-shadow: 0 8px 24px rgba(48, 49, 139, 0.15); position: relative; overflow: hidden; } .moto-card::after { content: '"'; position: absolute; right: 1rem; bottom: -1rem; font-size: 6rem; font-family: Georgia, serif; color: rgba(172, 206, 34, 0.08); line-height: 1; pointer-events: none; } .moto-icon { font-size: 1.2rem; color: var(--clr-accent); } .moto-text { font-family: var(--font-display); font-size: 1rem; font-weight: 700; font-style: italic; color: var(--clr-white); margin: 0; line-height: 1.6; border: none; padding: 0; } .moto-label { font-family: var(--font-display); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--clr-accent); } /* ============================================================ SERVICE IMAGE (services page) ============================================================ */ .svc-img-wrap { position: relative; border-radius: 16px; overflow: hidden; width: 100%; max-width: 380px; aspect-ratio: 4/3; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .svc-img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); display: block; } .svc-img-wrap:hover .svc-img { transform: scale(1.05); } .svc-img-zoom { position: absolute; inset: 0; background: rgba(48, 49, 139, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); } .svc-img-zoom i { font-size: 2rem; color: var(--clr-accent); } .svc-img-wrap:hover .svc-img-zoom { opacity: 1; } .svc-detail-icon { width: 48px; height: 48px; background: linear-gradient(135deg, var(--clr-navy), var(--clr-navy-dk)); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; } .svc-detail-icon i { font-size: 1.4rem; color: var(--clr-accent); } /* ============================================================ MILESTONE PHOTO THUMBNAILS ============================================================ */ .milestone-photos { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.8rem; } .milestone-photo-thumb { width: 60px; height: 45px; object-fit: cover; border-radius: 6px; cursor: zoom-in; border: 2px solid transparent; transition: border-color var(--transition), transform var(--transition); opacity: 0.85; } .milestone-photo-thumb:hover { border-color: var(--clr-accent); transform: scale(1.08); opacity: 1; } /* ============================================================ WHATSAPP WIDGET ============================================================ */ .wa-widget { position: fixed; bottom: 2rem; right: 2rem; z-index: 9990; /* Hanya selebar tombol — tidak memblokir elemen lain */ width: 58px; height: 58px; } /* Toggle button */ .wa-widget-toggle { width: 58px; height: 58px; border-radius: 50%; background: #25D366; border: none; color: white; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45); transition: transform var(--transition), box-shadow var(--transition); position: relative; z-index: 2; } .wa-widget-toggle:hover { transform: scale(1.1); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.55); } .wa-icon-open { display: block; } .wa-icon-close { display: none; } .wa-widget--open .wa-icon-open { display: none; } .wa-widget--open .wa-icon-close { display: block; } /* Panel — absolute, tumbuh ke atas dari tombol, tidak memakan ruang layout */ .wa-panel { position: absolute; bottom: calc(100% + 0.75rem); /* tepat di atas tombol */ right: 0; background: white; border-radius: 18px; width: 300px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18); overflow: hidden; transform: scale(0.85) translateY(10px); transform-origin: bottom right; opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease, visibility 0s linear 0.3s; } .wa-widget--open .wa-panel { transform: scale(1) translateY(0); opacity: 1; visibility: visible; pointer-events: auto; transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.3s ease, visibility 0s linear 0s; } /* Panel header */ .wa-panel-header { background: #075E54; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.75rem; } .wa-avatar { position: relative; flex-shrink: 0; } .wa-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.3); } .wa-avatar-dot { position: absolute; bottom: 1px; right: 1px; width: 10px; height: 10px; background: #25D366; border-radius: 50%; border: 2px solid #075E54; } .wa-header-info { flex: 1; } .wa-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 0.88rem; color: white; } .wa-subtitle { display: block; font-size: 0.72rem; color: rgba(255, 255, 255, 0.65); } .wa-panel-close { background: none; border: none; color: rgba(255, 255, 255, 0.7); font-size: 1.1rem; cursor: pointer; padding: 0; transition: color var(--transition); } .wa-panel-close:hover { color: white; } /* Body */ .wa-body { padding: 1.2rem; background: #ECE5DD; min-height: 80px; } .wa-bubble { background: white; border-radius: 0 12px 12px 12px; padding: 0.85rem 1rem; font-size: 0.85rem; color: #333; line-height: 1.6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); margin-bottom: 1rem; } .wa-menu { display: flex; flex-direction: column; gap: 0.4rem; } .wa-menu-item { display: flex; align-items: center; gap: 0.65rem; background: white; border-radius: 10px; padding: 0.65rem 0.9rem; font-size: 0.82rem; font-family: var(--font-display); font-weight: 600; color: #075E54; text-decoration: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: background var(--transition), transform var(--transition); } .wa-menu-item:hover { background: #f0fdf4; transform: translateX(3px); color: #075E54; } .wa-menu-item i:first-child { color: #25D366; font-size: 1rem; } /* Footer */ .wa-panel-footer { padding: 0.9rem 1.2rem; border-top: 1px solid #eee; background: white; } .wa-start-btn { display: flex; align-items: center; justify-content: center; background: #25D366; color: white; border-radius: 10px; padding: 0.65rem 1rem; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; text-decoration: none; transition: background var(--transition), transform var(--transition); } .wa-start-btn:hover { background: #1da851; color: white; transform: translateY(-1px); } /* Pulse ring animation on toggle */ .wa-widget-toggle::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.5); animation: waPulse 2s ease-out infinite; } @keyframes waPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } } .wa-widget--open .wa-widget-toggle::after { animation: none; } @media (max-width: 575.98px) { .wa-widget { bottom: 1rem; right: 1rem; } .wa-panel { width: calc(100vw - 2rem); max-width: 320px; } } /* ============================================================ SHIP PARTICULAR — fleet detail page ============================================================ */ .ship-particular { background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 40px rgba(48, 49, 139, 0.1); } /* Header */ .sp-header { background: linear-gradient(135deg, var(--clr-navy), var(--clr-navy-dk)); padding: 1.5rem 2rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .sp-type-badge { display: inline-block; background: var(--clr-accent); color: var(--clr-navy); font-family: var(--font-display); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 12px; border-radius: 20px; margin-bottom: 0.4rem; } .sp-vessel-name { font-family: var(--font-display); font-weight: 900; font-size: 1.4rem; color: white; margin: 0; line-height: 1.2; } .sp-flag { display: flex; align-items: center; gap: 0.4rem; color: rgba(255, 255, 255, 0.7); font-size: 0.82rem; white-space: nowrap; flex-shrink: 0; } .sp-flag i { color: var(--clr-accent); } /* Body */ .sp-body { padding: 0; } /* Section */ .sp-section { border-bottom: 1px solid rgba(48, 49, 139, 0.08); padding: 1.25rem 2rem; } .sp-section:last-child { border-bottom: none; } .sp-section-title { font-family: var(--font-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--clr-navy); margin-bottom: 0.9rem; display: flex; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--clr-accent); } .sp-section-title i { color: var(--clr-accent); font-size: 0.9rem; } /* Grid of rows */ .sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .sp-row { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.35rem 0; border-bottom: 1px dashed rgba(48, 49, 139, 0.06); } .sp-row:last-child { border-bottom: none; } .sp-row--full { grid-column: 1 / -1; /* span full width */ } .sp-label { font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; color: #888; min-width: 140px; flex-shrink: 0; } .sp-label::after { content: ':'; margin-left: 2px; } .sp-value { font-size: 0.85rem; color: var(--clr-navy); font-weight: 500; line-height: 1.4; } /* Responsive */ @media (max-width: 767.98px) { .sp-grid { grid-template-columns: 1fr; } .sp-row--full { grid-column: 1; } .sp-header { flex-direction: column; gap: 0.5rem; } .sp-section { padding: 1rem 1.2rem; } .sp-label { min-width: 120px; } .sp-vessel-name { font-size: 1.1rem; } }