/* ===== Nusa Store shared styles ===== */ body { font-family: 'Outfit', sans-serif; } ::selection { background: #EA580C; color: #fff; } /* Guard: decorative absolute/blur elements must never cause horizontal scroll. overflow-x: clip prevents scroll without creating a scroll container (keeps position:sticky working). */ html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; } .hero-grid-bg { background-image: linear-gradient(rgba(15,23,42,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,0.035) 1px, transparent 1px); background-size: 44px 44px; } /* * Animasi "muncul saat di-scroll". * * Sengaja hanya aktif bila JavaScript hidup: kelas .js dipasang di oleh * skrip inline di header.php. Tanpa penjaga ini, satu error JS atau peramban tanpa * JavaScript membuat seluruh bagian halaman HILANG PERMANEN — bukan sekadar tidak * beranimasi. Isi halaman tidak boleh bergantung pada animasi. */ .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; } .js .reveal.in { opacity: 1; transform: none; } /* Hormati pengguna yang meminta gerakan dikurangi. */ @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } } details.faq > summary { list-style: none; } details.faq > summary::-webkit-details-marker { display: none; } details.faq[open] .faq-chev { transform: rotate(180deg); } .marquee-track:hover { animation-play-state: paused; } .logo-pill { filter: grayscale(1); opacity: .55; transition: all .3s ease; } .logo-pill:hover { filter: grayscale(0); opacity: 1; } .tab-btn { color: #64748B; } .tab-btn.is-active { background: #fff; color: #EA580C; box-shadow: 0 4px 12px rgba(15,23,42,0.08); } .filter-btn { color: #64748B; background: #fff; } .filter-btn.is-active { background: #EA580C; color: #fff; border-color: #EA580C; } /* active nav link */ .nw-nav a.is-active { color: #EA580C; } /* ===== Article prose (single post + /artikel/ template) ===== */ .prose h2 { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; margin: 2.5rem 0 1rem; scroll-margin-top: 100px; } .prose h3 { font-size: 1.3rem; font-weight: 700; margin: 2rem 0 .75rem; scroll-margin-top: 100px; } .prose p { color: #334155; line-height: 1.8; margin-bottom: 1.25rem; font-size: 1.075rem; } .prose ul, .prose ol { margin: 0 0 1.25rem 1.25rem; color: #334155; line-height: 1.8; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: .5rem; } .prose a { color: #EA580C; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .prose strong { color: #0F172A; font-weight: 700; } /* table of contents active state */ .toc a { color: #64748B; border-left: 2px solid transparent; } .toc a.active { color: #EA580C; border-left-color: #EA580C; font-weight: 600; } /* ===== Mobile nav menu: make it scrollable so long lists are reachable ===== */ #nwMobileMenu { max-height: calc(100vh - 72px); /* fallback */ max-height: calc(100dvh - 72px); /* dynamic viewport (mobile URL bar aware) */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* ===== Logged-in: push fixed header below the WP admin bar so nav stays full ===== */ .admin-bar header.fixed { top: 32px; } .admin-bar #nwMobileMenu { max-height: calc(100vh - 72px - 32px); max-height: calc(100dvh - 72px - 32px); } @media screen and (max-width: 782px) { .admin-bar header.fixed { top: 46px; } .admin-bar #nwMobileMenu { max-height: calc(100vh - 72px - 46px); max-height: calc(100dvh - 72px - 46px); } }