/* ASP Performance Clinic — gaya tambahan ringan di atas Tailwind */ :root { --clinic: #29ABE2; } html { scroll-behavior: smooth; } /* ---- Reveal saat scroll (peningkatan progresif) ---- Konten TAMPIL secara bawaan. Hanya disembunyikan bila JavaScript aktif (kelas .js pada ), sehingga situs tetap terbaca walau skrip gagal. */ .reveal { opacity: 1; } html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } html.js .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---- Pola titik dekoratif untuk latar section ---- */ .dot-grid { background-image: radial-gradient(rgba(41,171,226,.18) 1.2px, transparent 1.2px); background-size: 22px 22px; } /* ---- Garis aksen ---- */ .accent-rule { width: 52px; height: 4px; background: var(--clinic); border-radius: 999px; } /* ---- Animasi pulsa lembut untuk badge promo ---- */ @keyframes soft-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } } .soft-pulse { animation: soft-pulse 2.4s ease-in-out infinite; } /* ---- Fokus aksesibilitas ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(41,171,226,.45); outline-offset: 2px; } /* ---- Form funnel: jaga keterbacaan teks input ---- Tailwind Preflight membuat input mewarisi color induk; pada section gelap teks input bisa ikut menjadi putih. Aturan ini memaksanya tetap gelap. */ .field-input, .field-input option { color: #0A0A0A; } .field-input { background-color: #ffffff; } .field-input::placeholder { color: #94A3B8; opacity: 1; }