/* ===== JasaMurahWeb — shared styles ===== Palet kanonik brand (sumber: sosmed/poster-bank prompts, dipakai 488 poster x 4 service): Latar putih bersih #FFFFFF (rata, lapang, TANPA tekstur ramai, TANPA glow/gradasi) Aksen amber #F5A524 (highlight, elemen, ikon chip) Headline biru royal #3B32C9 Paragraf abu #6B7280 Butuh token tailwind.config (brand.* = indigo #3B32C9, amber.* = #F5A524) + font Outfit di . */ body { font-family: 'Outfit', sans-serif; color: #6B7280; } ::selection { background: #3B32C9; color: #fff; } h1, h2, h3, h4 { color: #3B32C9; } /* scroll reveal (wired by nusa.js) — halus, tanpa gerakan berlebihan. Disembunyikan HANYA saat JS aktif (progressive enhancement): tanpa JS konten tetap terlihat penuh, jadi aman untuk SEO dan kalau script gagal dimuat. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.in { opacity: 1; transform: none; } /* FAQ accordion */ details.faq > summary { list-style: none; } details.faq > summary::-webkit-details-marker { display: none; } details.faq[open] .faq-chev { transform: rotate(180deg); } /* service tabs */ .tab-btn { color: #6B7280; } .tab-btn.is-active { background: #3B32C9; color: #fff; } /* portfolio / blog filter pills */ .filter-btn { color: #6B7280; background: #fff; } .filter-btn.is-active { background: #3B32C9; color: #fff; border-color: #3B32C9; } /* active nav link (set by nusa.js via data-page) */ .nw-nav a.is-active { color: #3B32C9; } /* SERP mockup highlight */ .serp-card mark { background: #FEF0D6; color: #A8660C; border-radius: 4px; padding: 0 3px; } /* ===== Article prose (single post) ===== */ .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: #6B7280; line-height: 1.8; margin-bottom: 1.25rem; font-size: 1.075rem; } .prose ul, .prose ol { margin: 0 0 1.25rem 1.25rem; color: #6B7280; line-height: 1.8; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin-bottom: .5rem; } .prose a { color: #3B32C9; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .prose strong { color: #3B32C9; font-weight: 700; } .prose blockquote { margin: 2rem 0; padding: 1.25rem 1.5rem; border-left: 4px solid #F5A524; background: #FFF9EC; border-radius: 0 0.75rem 0.75rem 0; color: #3B32C9; font-size: 1.125rem; font-weight: 600; line-height: 1.7; } .prose blockquote p:last-child { margin-bottom: 0; } .prose figure { margin: 2rem 0; } .prose figcaption { text-align: center; font-size: .875rem; color: #6B7280; margin-top: .75rem; } .prose hr { margin: 2.5rem 0; border: 0; border-top: 1px solid #E2E8F0; } /* table of contents active state */ .toc a { color: #6B7280; border-left: 2px solid transparent; } .toc a.active { color: #3B32C9; border-left-color: #F5A524; font-weight: 600; } /* fixed header offset di bawah WP admin bar (saat login). <=600px sengaja TIDAK di-offset: di sana admin bar position:absolute (ikut scroll). */ @media screen and (min-width: 783px) { .admin-bar header.fixed { top: 32px; } } @media screen and (min-width: 601px) and (max-width: 782px) { .admin-bar header.fixed { top: 46px; } }