/* ===================================================================== TEMA BASE - gaya bersama untuk semua tema (pratinjau & situs sungguhan) Hanya tampilan (CSS). Tidak menyentuh logika PHP. ===================================================================== */ /* Bar pembanding tema (hanya muncul di index_tema.php) */ .tm-switcher { position: sticky; top: 0; z-index: 3000; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; background: #111827; color: #e5e7eb; font: 600 12.5px/1.2 'Plus Jakarta Sans', system-ui, sans-serif; border-bottom: 1px solid rgba(255,255,255,.12); } .tm-switcher-label { opacity: .75; margin-right: 4px; } .tm-switcher-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: #e5e7eb; text-decoration: none; border: 1px solid rgba(255,255,255,.2); transition: all .2s ease; } .tm-switcher-btn:hover { background: rgba(255,255,255,.12); } .tm-switcher-btn.active { background: #fff; color: #111827; border-color: #fff; } /* Navbar tempel di bawah bar pembanding */ body[class*="tema-"] .navbar { top: 42px; } @media (max-width: 640px) { body[class*="tema-"] .navbar { top: 0; } .tm-switcher { position: static; } } /* Aksesibilitas: hormati preferensi kurangi animasi */ @media (prefers-reduced-motion: reduce) { body[class*="tema-"] *, body[class*="tema-"] *::before, body[class*="tema-"] *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Label pengelompokan di bar pembanding (Hari Besar) */ .tm-switcher-sep { flex-basis: 100%; justify-content: center; text-align: center; margin: 4px 0 0; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.2); color: #f6e3a1; opacity: 1; } /* Situs sungguhan (bukan pratinjau): tidak ada bar pembanding, jadi navbar tidak diberi offset */ body.tema-live .navbar { top: 0; } /* ===================================================================== NAVBAR & BRANDING GLOBAL (Merata ke semua tema) Nama sekolah tampil utuh tanpa terpotong (...), navigasi rapi tanpa tumpang tindih ===================================================================== */ .brand-text h1, body[class*="tema-"] .brand-text h1 { font-size: clamp(13px, 1.05vw, 15.5px) !important; max-width: clamp(260px, 36vw, 650px) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .nav-actions, body[class*="tema-"] .nav-actions { display: flex !important; align-items: center !important; gap: 8px !important; flex-shrink: 0 !important; margin-left: auto !important; } .nav-menu, body[class*="tema-"] .nav-menu { gap: clamp(4px, 0.75vw, 12px) !important; flex-shrink: 1 !important; } /* Tombol APK di navbar atas disembunyikan agar tidak dobel dengan floating banner di bawah */ .btn-download-apk-top { display: none !important; } /* ===================================================================== HERO 3-KOLOM GLOBAL (Merata ke semua tema yang memakai foto/figur) 1. Kolom Kiri : Teks sambutan, badge, dan tombol aksi 2. Kolom Tengah : Bingkai lengkung foto/figur 3D (Utuh & Mandiri) 3. Kolom Kanan : Kartu interaktif (Radar GPS atau Wakaf Santri) - Mandiri, tidak menutupi figur! ===================================================================== */ .hero-container-wide, body[class*="tema-"] .hero > .container, body[class*="tema-"] .hero-container-wide { position: relative; z-index: 2; max-width: 1420px !important; width: 95% !important; margin: 0 auto !important; } .hero-grid-3col, body[class*="tema-"] .hero-grid-3col { display: grid !important; grid-template-columns: 1.25fr 0.82fr 1fr !important; gap: clamp(16px, 2vw, 28px) !important; align-items: center !important; } .hero-grid-3col .hero-col-text { z-index: 2; text-align: left; } .hero-grid-3col .hero-col-figure { display: flex !important; justify-content: center !important; align-items: center !important; z-index: 2; } .hb-figure-arch, .hero-grid-3col .hb-figure-arch { position: relative; width: 100%; max-width: 320px; height: 480px; border-radius: 240px 240px 28px 28px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .42) 100%), var(--foto-hero) center 4% / cover no-repeat, var(--hb-frame-bg, rgba(255, 255, 255, .85)); border: 6px solid var(--hb-gold, #c9a24b); box-shadow: 0 0 0 8px rgba(255, 255, 255, .18), 0 35px 65px -18px rgba(0, 0, 0, .55); transition: transform .35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow .35s ease; } .hb-figure-arch:hover, .hero-grid-3col .hb-figure-arch:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 0 0 10px rgba(255, 255, 255, .25), 0 42px 75px -16px rgba(0, 0, 0, .65); } .hero-grid-3col .hero-col-card { z-index: 3; display: flex !important; justify-content: center !important; } .hero-grid-3col .hero-col-card .radar-card { width: 100%; max-width: 400px; border-radius: 22px; box-shadow: 0 20px 45px -12px rgba(0, 0, 0, .35); } /* RESPONSIF TABLET: < 960px (Teks di atas, Figur & Kartu sejajar 2 kolom di bawah) */ @media (max-width: 960px) { .hero-grid-3col, body[class*="tema-"] .hero-grid-3col { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .hero-grid-3col .hero-col-text { grid-column: 1 / -1 !important; text-align: center !important; } .hero-grid-3col .hero-subtitle { margin: 0 auto 20px !important; } .hero-grid-3col .hero-actions { justify-content: center !important; } .hb-figure-arch, .hero-grid-3col .hb-figure-arch { max-width: 290px; height: 420px; } } /* RESPONSIF HP: < 720px (1 Kolom Bersih Bertingkat: Teks -> Figur -> Kartu terpisah) */ @media (max-width: 720px) { .hero-grid-3col, body[class*="tema-"] .hero-grid-3col { grid-template-columns: 1fr !important; gap: 24px !important; } .hero-grid-3col .hero-col-text { order: 1 !important; } .hero-grid-3col .hero-col-figure { order: 2 !important; } .hero-grid-3col .hero-col-card { order: 3 !important; } .hb-figure-arch, .hero-grid-3col .hb-figure-arch { max-width: 260px; height: 380px; margin: 0 auto; } .hero-grid-3col .hero-col-card .radar-card { max-width: 420px; margin: 0 auto; } }