/* ============================================================ PT Panca Putra Raharja — shared site styles Dipakai di semua halaman. Jangan hapus: dipakai untuk konsistensi navbar, language switcher, dan aksesibilitas. ============================================================ */ /* ------------------------------------------------------------ 1. LANGUAGE SWITCHER (menggantikan pill bendera mengambang) ------------------------------------------------------------ */ .nav-lang { display: flex; align-items: center; gap: 6px; margin-left: 14px; flex-shrink: 0; } .nav-lang a { display: inline-block; color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .nav-lang a:hover { color: #fff; border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.1); } .nav-lang a.active { background: #c8963e; border-color: #c8963e; color: #16281c; } .nav-lang a:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #f0d78c; outline-offset: 2px; } /* Mobile: navbar jadi 2 baris (nav-in pakai flex-direction: column) */ @media (max-width: 640px) { .nav-lang { margin: 0 0 10px; justify-content: center; width: 100%; } .nav-lang a { padding: 6px 12px; font-size: 0.72rem; } } /* ------------------------------------------------------------ 2. GOOGLE TRANSLATE — jangan sampai menggeser layout ------------------------------------------------------------ */ body { top: 0 !important; } .goog-te-banner-frame, iframe.goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame, .goog-tooltip, .goog-tooltip:hover { display: none !important; } .skiptranslate { visibility: hidden !important; height: 0 !important; } #google_translate_element { display: none !important; } /* ------------------------------------------------------------ 3. FALLBACK ANIMASI REVEAL Tanpa JS (atau kalau JS gagal), konten HARUS tetap terlihat. Halaman menandai lewat inline script di . ------------------------------------------------------------ */ html:not(.js) .fade-in, html:not(.js) .reveal { opacity: 1 !important; transform: none !important; } .no-anim .fade-in, .no-anim .reveal { opacity: 1 !important; transform: none !important; } /* ------------------------------------------------------------ 4. UTILITAS ------------------------------------------------------------ */ .nw { white-space: nowrap; } /* cegah pemenggalan kata (kinsoku) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Tombol CTA di hero: pastikan ada jarak & tidak menempel di mobile */ .hero-cta { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; } .hero-cta > a { margin: 0 !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }