feat(footer): arsitektur 4-kolom institusi, native svg social icons, dan opsi jam layanan
This commit is contained in:
Mas Budi Kusuma
+136
-65
@@ -1,65 +1,136 @@
|
||||
<!-- SEKSI LOGO MITRA / AKREDITASI -->
|
||||
<div class="partner-logos text-center" style="padding: 40px 0; background: #fff;">
|
||||
<div class="container" style="display: flex; justify-content: center; gap: 40px; flex-wrap: wrap;">
|
||||
<img src="<?php echo get_template_directory_uri(); ?>/assets/logo-kemdikbud.png" alt="Kemdikbud" style="height: 60px; filter: grayscale(100%);" onerror="this.style.display='none'">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MAIN FOOTER -->
|
||||
<footer style="background-color: var(--primary-color); color: #ffffff; padding: 60px 0 30px;">
|
||||
<div class="container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 40px;">
|
||||
<!-- Kolom 1: Kontak -->
|
||||
<div class="footer-col">
|
||||
<h3 style="color: #fff; margin-bottom: 20px;">Hubungi Kami</h3>
|
||||
<p style="font-size: 15px; opacity: 0.9; line-height: 1.8;">
|
||||
📍 <?php echo nl2br(esc_html(get_option('edukarsa_footer_alamat', 'Alamat belum diisi'))); ?><br>
|
||||
📞 <?php echo esc_html(get_option('edukarsa_footer_telp', '000-0000')); ?><br>
|
||||
✉️ <?php echo esc_html(get_option('edukarsa_footer_email', '[email protected]')); ?>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Kolom 2: Tautan -->
|
||||
<div class="footer-col">
|
||||
<h3 style="color: #fff; margin-bottom: 20px;">Tautan Penting</h3>
|
||||
<nav class="footer-navigation">
|
||||
<?php
|
||||
wp_nav_menu( array(
|
||||
'theme_location' => 'menu-footer',
|
||||
'fallback_cb' => false,
|
||||
'container' => false,
|
||||
'menu_class' => 'footer-links-custom'
|
||||
) );
|
||||
?>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Kolom 3: Sosial Media -->
|
||||
<div class="footer-col">
|
||||
<h3 style="color: #fff; margin-bottom: 20px;">Ikuti Kami</h3>
|
||||
<div class="social-icons" style="display: flex; gap: 20px;">
|
||||
<!-- Pengecekan Toggle Tampil dari Dashboard -->
|
||||
<?php if( get_option('edukarsa_tampil_fb', 1) == 1 ) : ?>
|
||||
<a href="<?php echo esc_url(get_option('edukarsa_footer_fb', '#')); ?>" target="_blank" style="color: #fff; font-size: 20px; font-weight:bold;">FB</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if( get_option('edukarsa_tampil_ig', 1) == 1 ) : ?>
|
||||
<a href="<?php echo esc_url(get_option('edukarsa_footer_ig', '#')); ?>" target="_blank" style="color: #fff; font-size: 20px; font-weight:bold;">IG</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if( get_option('edukarsa_tampil_yt', 1) == 1 ) : ?>
|
||||
<a href="<?php echo esc_url(get_option('edukarsa_footer_yt', '#')); ?>" target="_blank" style="color: #fff; font-size: 20px; font-weight:bold;">YT</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom" style="border-top: 1px solid rgba(255,255,255,0.1); padding-top: 20px; text-align: center;">
|
||||
<p style="margin: 0; font-size: 14px; opacity: 0.7;">
|
||||
© <?php echo date( 'Y' ); ?> <?php echo esc_html(get_option('edukarsa_footer_copyright', 'Semua Hak Dilindungi')); ?>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
<?php
|
||||
/**
|
||||
* Template Footer EduKarsa Modern 4-Kolom
|
||||
*/
|
||||
$footer_logo = get_option( 'edukarsa_footer_logo' );
|
||||
if ( empty( $footer_logo ) ) {
|
||||
$footer_logo = get_option( 'edukarsa_header_logo' );
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- MAIN FOOTER -->
|
||||
<footer class="site-footer">
|
||||
<div class="container footer-grid-wrapper">
|
||||
|
||||
<!-- Kolom 1: Identitas & Visi Kampus -->
|
||||
<div class="footer-col footer-col-brand">
|
||||
<div class="footer-brand-logo">
|
||||
<?php if ( ! empty( $footer_logo ) ) : ?>
|
||||
<img src="<?php echo esc_url( $footer_logo ); ?>" alt="<?php bloginfo( 'name' ); ?>" style="max-height: 52px; width: auto; object-fit: contain; margin-bottom: 15px;">
|
||||
<?php else : ?>
|
||||
<h3 style="color: #fff; margin-bottom: 12px; font-size: 22px; font-weight: 800;"><?php bloginfo( 'name' ); ?></h3>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<p class="footer-brand-desc">
|
||||
<?php echo nl2br( esc_html( get_option( 'edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.' ) ) ); ?>
|
||||
</p>
|
||||
<?php
|
||||
$jam = get_option( 'edukarsa_footer_jam' );
|
||||
if ( ! empty( $jam ) ) :
|
||||
?>
|
||||
<div class="footer-hours-box">
|
||||
<span class="hours-icon">🕒</span>
|
||||
<div>
|
||||
<div style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; opacity: 0.8;">Jam Layanan</div>
|
||||
<div style="font-weight: 600; font-size: 13px; color: #fff;"><?php echo esc_html( $jam ); ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<!-- Kolom 2: Kontak Resmi -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Hubungi Kami</h4>
|
||||
<ul class="footer-contact-list">
|
||||
<li>
|
||||
<span class="f-icon">📍</span>
|
||||
<span><?php echo nl2br( esc_html( get_option( 'edukarsa_footer_alamat', 'Alamat belum diatur di dashboard' ) ) ); ?></span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="f-icon">📞</span>
|
||||
<a href="tel:<?php echo esc_attr( preg_replace( '/[^0-9+]/', '', get_option( 'edukarsa_footer_telp', '' ) ) ); ?>">
|
||||
<?php echo esc_html( get_option( 'edukarsa_footer_telp', '(021) 000-0000' ) ); ?>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span class="f-icon">✉️</span>
|
||||
<a href="mailto:<?php echo esc_attr( get_option( 'edukarsa_footer_email', '[email protected]' ) ); ?>">
|
||||
<?php echo esc_html( get_option( 'edukarsa_footer_email', '[email protected]' ) ); ?>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Kolom 3: Tautan Penting -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Tautan Penting</h4>
|
||||
<nav class="footer-nav-clean">
|
||||
<?php
|
||||
wp_nav_menu( array(
|
||||
'theme_location' => 'menu-footer',
|
||||
'fallback_cb' => false,
|
||||
'container' => false,
|
||||
'menu_class' => 'footer-links-custom',
|
||||
'depth' => 1
|
||||
) );
|
||||
?>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Kolom 4: Media Sosial Institusi -->
|
||||
<div class="footer-col">
|
||||
<h4 class="footer-col-title">Media Sosial</h4>
|
||||
<p style="font-size: 13px; opacity: 0.85; margin-bottom: 18px; line-height: 1.5;">
|
||||
Ikuti kanal resmi kami untuk update warta kegiatan kampus, prestasi, dan agenda akademik.
|
||||
</p>
|
||||
<div class="footer-social-icons">
|
||||
<?php if ( get_option( 'edukarsa_tampil_fb', 1 ) == 1 && get_option( 'edukarsa_footer_fb' ) ) : ?>
|
||||
<a href="<?php echo esc_url( get_option( 'edukarsa_footer_fb' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="Facebook">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( get_option( 'edukarsa_tampil_ig', 1 ) == 1 && get_option( 'edukarsa_footer_ig' ) ) : ?>
|
||||
<a href="<?php echo esc_url( get_option( 'edukarsa_footer_ig' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="Instagram">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( get_option( 'edukarsa_tampil_yt', 1 ) == 1 && get_option( 'edukarsa_footer_yt' ) ) : ?>
|
||||
<a href="<?php echo esc_url( get_option( 'edukarsa_footer_yt' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="YouTube">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( get_option( 'edukarsa_tampil_tiktok', 0 ) == 1 && get_option( 'edukarsa_footer_tiktok' ) ) : ?>
|
||||
<a href="<?php echo esc_url( get_option( 'edukarsa_footer_tiktok' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="TikTok">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-1.01-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.24 1.07-.14 1.61.24 1.64 1.82 2.89 3.5 2.77 1.81-.05 3.29-1.52 3.36-3.33.04-3.78.02-7.57.02-11.35z"/></svg>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( get_option( 'edukarsa_tampil_x', 0 ) == 1 && get_option( 'edukarsa_footer_x' ) ) : ?>
|
||||
<a href="<?php echo esc_url( get_option( 'edukarsa_footer_x' ) ); ?>" target="_blank" rel="noopener" class="social-btn" title="X (Twitter)">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- COPYRIGHT BOTTOM BAR -->
|
||||
<div class="footer-bottom-bar">
|
||||
<div class="container footer-bottom-inner">
|
||||
<p class="copyright-text">
|
||||
© <?php echo date( 'Y' ); ?> <?php echo esc_html( get_option( 'edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.' ) ); ?>
|
||||
</p>
|
||||
<div class="footer-bottom-badge">
|
||||
<span>Terakreditasi BAN-PT • Kampus Merdeka</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+86
-58
@@ -111,10 +111,10 @@ function edukarsa_register_settings() {
|
||||
// Dynamic Appearance
|
||||
'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
|
||||
|
||||
// Toggle
|
||||
// Toggle Seksi Beranda
|
||||
'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_news',
|
||||
|
||||
// Logo
|
||||
// Header Logo
|
||||
'edukarsa_header_logo',
|
||||
|
||||
// Custom Teks
|
||||
@@ -129,18 +129,26 @@ function edukarsa_register_settings() {
|
||||
'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about',
|
||||
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
|
||||
|
||||
// Mid Section Parallax
|
||||
// Parallax Area
|
||||
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
|
||||
|
||||
// CTA & Footer
|
||||
// CTA
|
||||
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
|
||||
'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_footer_copyright', 'edukarsa_custom_css'
|
||||
|
||||
// Footer Lengkap
|
||||
'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
|
||||
'edukarsa_tampil_fb', 'edukarsa_footer_fb',
|
||||
'edukarsa_tampil_ig', 'edukarsa_footer_ig',
|
||||
'edukarsa_tampil_yt', 'edukarsa_footer_yt',
|
||||
'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok',
|
||||
'edukarsa_tampil_x', 'edukarsa_footer_x',
|
||||
'edukarsa_footer_copyright', 'edukarsa_custom_css'
|
||||
);
|
||||
foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
|
||||
}
|
||||
add_action( 'admin_init', 'edukarsa_register_settings' );
|
||||
|
||||
// 4. HALAMAN PENGATURAN DENGAN DESAIN MODERN 2-KOLOM
|
||||
// 4. HALAMAN PENGATURAN DENGAN DESAIN 2-KOLOM
|
||||
function edukarsa_settings_page_html() {
|
||||
if ( ! current_user_can( 'manage_options' ) ) return;
|
||||
$font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
|
||||
@@ -151,14 +159,11 @@ function edukarsa_settings_page_html() {
|
||||
<style>
|
||||
.edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
|
||||
.edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
|
||||
|
||||
/* Kartu & Panel */
|
||||
.edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: hidden; }
|
||||
.edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
|
||||
.edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
|
||||
.edukarsa-card-body { padding: 24px; }
|
||||
|
||||
/* Toggle Switch Ringkas Modern */
|
||||
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
|
||||
.switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 15px; }
|
||||
.switch-label { font-weight: 600; font-size: 13px; color: #334155; }
|
||||
@@ -169,7 +174,6 @@ function edukarsa_settings_page_html() {
|
||||
input:checked + .slider-round { background-color: #0b4a8e; }
|
||||
input:checked + .slider-round:before { transform: translateX(20px); }
|
||||
|
||||
/* Form Controls */
|
||||
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
|
||||
.form-field-group { margin-bottom: 15px; }
|
||||
.form-field-group label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 6px; }
|
||||
@@ -177,12 +181,10 @@ function edukarsa_settings_page_html() {
|
||||
.input-with-button { display: flex; gap: 8px; }
|
||||
.input-with-button input { flex-grow: 1; }
|
||||
|
||||
/* Mini Grid Statistik */
|
||||
.stats-config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
|
||||
.stat-config-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; }
|
||||
.stat-config-box h4 { margin: 0 0 12px; font-size: 13px; color: #0b4a8e; font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
|
||||
|
||||
/* Presets Warna */
|
||||
.preset-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
|
||||
.preset-pill { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; transition: all .2s; }
|
||||
.preset-pill:hover { border-color: #0b4a8e; transform: translateX(3px); }
|
||||
@@ -190,7 +192,6 @@ function edukarsa_settings_page_html() {
|
||||
.swatch-item { width: 18px; height: 18px; }
|
||||
.preset-name { font-size: 12px; font-weight: 600; color: #334155; }
|
||||
|
||||
/* Sidebar Kanan Sticky */
|
||||
.edukarsa-admin-sidebar { position: sticky; top: 45px; }
|
||||
.color-picker-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.color-picker-row input[type="color"] { border: none; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; background: transparent; }
|
||||
@@ -211,7 +212,7 @@ function edukarsa_settings_page_html() {
|
||||
|
||||
<div class="edukarsa-admin-layout">
|
||||
|
||||
<!-- KOLOM KIRI (PENGATURAN UTAMA) -->
|
||||
<!-- KOLOM KIRI (FORM UTAMA) -->
|
||||
<div class="edukarsa-admin-main">
|
||||
|
||||
<!-- 1. Header, Logo & Slider -->
|
||||
@@ -245,7 +246,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 Mini Card Statistik yang Rapi -->
|
||||
<div id="stats-settings-box">
|
||||
<div class="stats-config-grid">
|
||||
<?php for($i=1; $i<=3; $i++) : ?>
|
||||
@@ -398,7 +398,7 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>URL Video 1 (YouTube/Embed)</label>
|
||||
<label>URL Video 1</label>
|
||||
<input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>" placeholder="https://youtube.com/watch?v=...">
|
||||
</div>
|
||||
</div>
|
||||
@@ -413,7 +413,7 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>URL Video 2 (YouTube/Embed)</label>
|
||||
<label>URL Video 2</label>
|
||||
<input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>" placeholder="https://youtube.com/watch?v=...">
|
||||
</div>
|
||||
</div>
|
||||
@@ -478,32 +478,57 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. Footer & Kontak -->
|
||||
<!-- 6. FOOTER LENGKAP & FLEKSIBEL (UPGRADED) -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>📞 6. Informasi Kontak Footer & Media Sosial</h2>
|
||||
<h2>📞 6. Pengaturan Footer & Media Sosial Lengkap</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
|
||||
<!-- Identitas Footer -->
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="edukarsa_footer_logo" name="edukarsa_footer_logo" value="<?php echo esc_url(get_option('edukarsa_footer_logo')); ?>" placeholder="https://...">
|
||||
<button type="button" class="button btn-upload" data-target="#edukarsa_footer_logo">Pilih</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Jam Operasional / Layanan</label>
|
||||
<input type="text" name="edukarsa_footer_jam" value="<?php echo esc_attr(get_option('edukarsa_footer_jam', 'Senin – Jumat: 08.00 – 16.00 WIB')); ?>" placeholder="cth: Senin – Jumat: 08.00 – 16.00 WIB">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field-group">
|
||||
<label>Deskripsi Singkat Kampus / Visi Ringkas (Kolom 1)</label>
|
||||
<textarea name="edukarsa_footer_desc" rows="3" placeholder="Deskripsi singkat mengenai institusi..."><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak lulusan berkarakter, inovatif, dan berdaya saing global.')); ?></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-field-group">
|
||||
<label>Alamat Lengkap Institusi</label>
|
||||
<textarea name="edukarsa_footer_alamat" rows="2"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Nomor Telepon / WhatsApp</label>
|
||||
<input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>">
|
||||
<label>Nomor Telepon / WhatsApp Layanan</label>
|
||||
<input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>" placeholder="+62 ...">
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Alamat Email Resmi</label>
|
||||
<input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>">
|
||||
<input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>" placeholder="[email protected]">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field-group">
|
||||
<label>Teks Hak Cipta (Copyright)</label>
|
||||
<input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>">
|
||||
<label>Teks Hak Cipta (Copyright Bar)</label>
|
||||
<input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.')); ?>">
|
||||
</div>
|
||||
|
||||
<h4 style="margin: 20px 0 10px; font-size:13px; color:#0b4a8e;">Akun Media Sosial</h4>
|
||||
<h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4>
|
||||
|
||||
<!-- FB -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Facebook</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
@@ -514,6 +539,8 @@ function edukarsa_settings_page_html() {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IG -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Instagram</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
@@ -524,6 +551,8 @@ function edukarsa_settings_page_html() {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- YT -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">YouTube</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
@@ -534,15 +563,39 @@ function edukarsa_settings_page_html() {
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- TikTok -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">TikTok</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
<input type="text" name="edukarsa_footer_tiktok" value="<?php echo esc_attr(get_option('edukarsa_footer_tiktok')); ?>" placeholder="https://tiktok.com/@..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_tiktok" value="1" <?php checked(1, get_option('edukarsa_tampil_tiktok', 0)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- X / Twitter -->
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">X (Twitter)</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
<input type="text" name="edukarsa_footer_x" value="<?php echo esc_attr(get_option('edukarsa_footer_x')); ?>" placeholder="https://x.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_x" value="1" <?php checked(1, get_option('edukarsa_tampil_x', 0)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- KOLOM KANAN (SIDEBAR COMMAND PANEL) -->
|
||||
<!-- KOLOM KANAN (SIDEBAR ACTION PANEL) -->
|
||||
<div class="edukarsa-admin-sidebar">
|
||||
|
||||
<!-- Box Aksi Simpan -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>💾 Publikasi</h2>
|
||||
@@ -553,7 +606,6 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box Tipografi -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>🔤 Tipografi Font</h2>
|
||||
@@ -572,56 +624,36 @@ function edukarsa_settings_page_html() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box Palet Warna & Presets -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>🎨 Skema Warna</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
|
||||
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:10px;">Pilih Preset Instan</label>
|
||||
|
||||
<div class="preset-grid">
|
||||
<div class="preset-pill" data-p="#0b4a8e" data-s="#1a73e8" data-h="#0f172a">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#0b4a8e;"></span>
|
||||
<span class="swatch-item" style="background:#1a73e8;"></span>
|
||||
</div>
|
||||
<div class="swatch-group"><span class="swatch-item" style="background:#0b4a8e;"></span><span class="swatch-item" style="background:#1a73e8;"></span></div>
|
||||
<span class="preset-name">Classic Navy (Default)</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#065f46" data-s="#10b981" data-h="#064e3b">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#065f46;"></span>
|
||||
<span class="swatch-item" style="background:#10b981;"></span>
|
||||
</div>
|
||||
<div class="swatch-group"><span class="swatch-item" style="background:#065f46;"></span><span class="swatch-item" style="background:#10b981;"></span></div>
|
||||
<span class="preset-name">Islamic Emerald Green</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#881337" data-s="#e11d48" data-h="#4c0519">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#881337;"></span>
|
||||
<span class="swatch-item" style="background:#e11d48;"></span>
|
||||
</div>
|
||||
<div class="swatch-group"><span class="swatch-item" style="background:#881337;"></span><span class="swatch-item" style="background:#e11d48;"></span></div>
|
||||
<span class="preset-name">Prestige Maroon</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#0f766e" data-s="#06b6d4" data-h="#134e4a">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#0f766e;"></span>
|
||||
<span class="swatch-item" style="background:#06b6d4;"></span>
|
||||
</div>
|
||||
<div class="swatch-group"><span class="swatch-item" style="background:#0f766e;"></span><span class="swatch-item" style="background:#06b6d4;"></span></div>
|
||||
<span class="preset-name">Techno Teal</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#581c87" data-s="#8b5cf6" data-h="#3b0764">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#581c87;"></span>
|
||||
<span class="swatch-item" style="background:#8b5cf6;"></span>
|
||||
</div>
|
||||
<div class="swatch-group"><span class="swatch-item" style="background:#581c87;"></span><span class="swatch-item" style="background:#8b5cf6;"></span></div>
|
||||
<span class="preset-name">Royal Violet</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#b45309" data-s="#f59e0b" data-h="#78350f">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#b45309;"></span>
|
||||
<span class="swatch-item" style="background:#f59e0b;"></span>
|
||||
</div>
|
||||
<div class="swatch-group"><span class="swatch-item" style="background:#b45309;"></span><span class="swatch-item" style="background:#f59e0b;"></span></div>
|
||||
<span class="preset-name">Autumn Gold</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -663,7 +695,6 @@ function edukarsa_settings_page_html() {
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($){
|
||||
// 1. Logika Toggle Seksi Dinamis
|
||||
function syncToggles() {
|
||||
$('.section-toggle').each(function(){
|
||||
var target = $(this).data('target');
|
||||
@@ -677,7 +708,6 @@ function edukarsa_settings_page_html() {
|
||||
$('.section-toggle').change(syncToggles);
|
||||
syncToggles();
|
||||
|
||||
// 2. Klik Preset Palet Warna
|
||||
$('.preset-pill').click(function(){
|
||||
var p = $(this).data('p');
|
||||
var s = $(this).data('s');
|
||||
@@ -696,12 +726,10 @@ function edukarsa_settings_page_html() {
|
||||
$(this).css('border-color', '#0b4a8e');
|
||||
});
|
||||
|
||||
// 3. Listener Manual Picker
|
||||
$('#primary_picker').on('input change', function(){ $('#primary_code').text($(this).val()); });
|
||||
$('#secondary_picker').on('input change', function(){ $('#secondary_code').text($(this).val()); });
|
||||
$('#heading_picker').on('input change', function(){ $('#heading_code').text($(this).val()); });
|
||||
|
||||
// 4. Native WP Media Uploader
|
||||
var mediaUploader;
|
||||
$('.btn-upload').click(function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
@@ -4,7 +4,7 @@ Theme URI: https://edukarsa.masbudi.my.id
|
||||
Author: masbudikusuma
|
||||
Author URI: https://masbudi.my.id
|
||||
Description: Tema WordPress profesional untuk sekolah dan kampus (Gaya Modern Card Layout).
|
||||
Version: 1.1.2
|
||||
Version: 1.1.3
|
||||
*/
|
||||
|
||||
:root {
|
||||
@@ -35,14 +35,14 @@ img { max-width: 100%; height: auto; display: block; }
|
||||
a { text-decoration: none; color: var(--primary-color); transition: 0.3s; }
|
||||
h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-height: 1.3; }
|
||||
|
||||
/* 2. LAYOUT KOTAK UTAMA (PADDINGS TERKALIBRASI) */
|
||||
/* 2. LAYOUT UTAMA */
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||||
.text-center { text-align: center; }
|
||||
.text-white { color: #fff !important; }
|
||||
.edukarsa-section { padding: 50px 0; }
|
||||
.section-title { font-size: 30px; color: var(--heading-color); margin-bottom: 12px; font-weight: 800; letter-spacing: -0.5px; }
|
||||
|
||||
/* 3. HEADER & MENU NAVIGATION */
|
||||
/* 3. HEADER & NAV */
|
||||
.site-header { position: sticky; top: 0; z-index: 999; box-shadow: 0 4px 15px rgba(0,0,0,0.12); padding: 15px 0; background-color: var(--primary-color); }
|
||||
.header-container { display: flex; justify-content: space-between; align-items: center; }
|
||||
.logo-link { display: flex; align-items: center; gap: 15px; color: #fff; }
|
||||
@@ -51,7 +51,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.nav-menu-custom li a { display: block; color: #ffffff; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.8px; padding: 10px 0; }
|
||||
.nav-menu-custom li a:hover { color: #f39c12; }
|
||||
|
||||
/* DROPDOWN MENU */
|
||||
/* DROPDOWN */
|
||||
.nav-menu-custom li { position: relative; }
|
||||
.nav-menu-custom .sub-menu {
|
||||
position: absolute;
|
||||
@@ -74,7 +74,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.nav-menu-custom .sub-menu .sub-menu { top: 0; left: 100%; transform: translateX(15px); }
|
||||
.nav-menu-custom .sub-menu li:hover > .sub-menu { transform: translateX(0); }
|
||||
|
||||
/* 4. ANIMASI SLIDER */
|
||||
/* 4. SLIDER */
|
||||
.edukarsa-hero-slider { padding: 0; }
|
||||
.slider-container { position: relative; width: 100%; overflow: hidden; }
|
||||
.slider-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; }
|
||||
@@ -98,7 +98,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.btn-outline-primary:hover { background-color: var(--primary-color); color: #fff; }
|
||||
.badge-title { display: inline-block; color: var(--secondary-color); font-weight: 800; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
|
||||
|
||||
/* 6. GRID SYSTEM & SPASI DINAMIS */
|
||||
/* 6. GRID SYSTEM BERANDA */
|
||||
.edukarsa-stats { padding: 0; position: relative; z-index: 20; }
|
||||
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: -95px; margin-bottom: 0; }
|
||||
.stat-card-modern { padding: 32px 28px; text-align: left; border-radius: 18px; border-top: 5px solid var(--secondary-color); background: #fff; }
|
||||
@@ -108,7 +108,6 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.stat-card-modern .stat-title { font-size: 17px; font-weight: 800; color: var(--heading-color); margin-bottom: 6px; }
|
||||
.stat-card-modern .stat-desc { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; }
|
||||
|
||||
/* SEKSI SAMBUTAN */
|
||||
.edukarsa-sambutan { padding: 45px 0 50px; }
|
||||
.sambutan-grid { display: grid; grid-template-columns: 360px 1fr; gap: 50px; align-items: start; }
|
||||
.sambutan-text { color: #475569; font-size: 15px; line-height: 1.8; margin-bottom: 25px; }
|
||||
@@ -120,19 +119,19 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.video-item { position: relative; border-radius: var(--radius); overflow: hidden; border: 4px solid rgba(255,255,255,0.25); }
|
||||
.play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #e74c3c; color: white; padding: 18px; border-radius: 50%; font-size: 22px; cursor: pointer; }
|
||||
|
||||
/* PARALLAX (SINKRON WARNA TEMA) */
|
||||
/* PARALLAX */
|
||||
.parallax-section-wrapper { position: relative; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }
|
||||
.parallax-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: var(--primary-color); opacity: 0.92; }
|
||||
.relative-z2 { position: relative; z-index: 2; }
|
||||
|
||||
/* KEUNGGULAN (FLEXIBLE GRID AUTO-FIT) */
|
||||
/* KEUNGGULAN */
|
||||
.keunggulan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 25px; }
|
||||
.keunggulan-card { position: relative; padding: 25px 28px; display: flex; align-items: flex-start; overflow: hidden; }
|
||||
.keunggulan-number { position: absolute; top: 8px; right: 12px; font-size: 64px; font-weight: 900; color: rgba(11, 74, 142, 0.07); line-height: 1; z-index: 0; }
|
||||
.keunggulan-content-inner { position: relative; z-index: 1; }
|
||||
.keunggulan-content-inner h4 { color: var(--primary-color); margin-bottom: 8px; font-size: 17px; }
|
||||
|
||||
/* 8. FLOATING CTA SECTION (MENGHAPUS WALL OF BLUE) */
|
||||
/* FLOATING CTA */
|
||||
.edukarsa-cta-floating-section { position: relative; z-index: 15; margin-top: -45px; margin-bottom: 20px; }
|
||||
.cta-floating-card {
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
|
||||
@@ -151,7 +150,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.news-content { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; }
|
||||
.news-title { font-size: 17px; margin-bottom: 10px; line-height: 1.4; font-weight: 700; }
|
||||
|
||||
/* 7. IMAGE LOCKS & PLACEHOLDERS */
|
||||
/* 7. IMAGE LOCKS */
|
||||
.img-wrapper-slider { height: 580px; width: 100%; overflow: hidden; position: relative; }
|
||||
.img-wrapper-landscape { aspect-ratio: 16/10; width: 100%; overflow: hidden; position: relative; border-radius: 8px; }
|
||||
.img-wrapper-video { aspect-ratio: 16/9; width: 100%; overflow: hidden; position: relative; border-radius: 10px; }
|
||||
@@ -159,12 +158,96 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.img-wrapper-slider img, .img-wrapper-landscape img, .img-wrapper-video img, .img-wrapper-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
|
||||
.img-placeholder { width: 100%; height: 100%; background-color: #f1f5f9; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-muted); font-size: 14px; text-align: center; border: 2px dashed #cbd5e1; }
|
||||
|
||||
/* 9. SINGLE, PAGE & SIDEBAR LAYOUT */
|
||||
/* 8. FOOTER BARU (4-KOLOM INSTITUSI PROFESIONAL) */
|
||||
.site-footer {
|
||||
background: linear-gradient(180deg, var(--primary-color) 0%, #08284d 100%);
|
||||
color: #ffffff;
|
||||
padding: 70px 0 0;
|
||||
border-top: 5px solid var(--secondary-color);
|
||||
}
|
||||
.footer-grid-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1.4fr 1.1fr 0.9fr 1fr;
|
||||
gap: 40px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
.footer-col-title {
|
||||
color: #ffffff;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 22px;
|
||||
position: relative;
|
||||
padding-bottom: 10px;
|
||||
letter-spacing: -0.2px;
|
||||
}
|
||||
.footer-col-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 35px;
|
||||
height: 3px;
|
||||
background-color: var(--secondary-color);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Brand & Deskripsi */
|
||||
.footer-brand-desc { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 20px; }
|
||||
.footer-hours-box { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.06); padding: 12px 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); }
|
||||
.hours-icon { font-size: 22px; }
|
||||
|
||||
/* Kontak List */
|
||||
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
|
||||
.footer-contact-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.6; }
|
||||
.footer-contact-list li a { color: rgba(255,255,255,0.9); }
|
||||
.footer-contact-list li a:hover { color: #f39c12; }
|
||||
.f-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
|
||||
|
||||
/* Tautan Bersih */
|
||||
.footer-links-custom { list-style: none; padding: 0; margin: 0; }
|
||||
.footer-links-custom li { margin-bottom: 12px; }
|
||||
.footer-links-custom li a { color: rgba(255,255,255,0.82); font-size: 14px; transition: all 0.25s ease; display: inline-flex; align-items: center; gap: 8px; }
|
||||
.footer-links-custom li a::before { content: '›'; font-size: 16px; color: var(--secondary-color); font-weight: bold; transition: transform 0.2s; }
|
||||
.footer-links-custom li a:hover { color: #ffffff; padding-left: 5px; }
|
||||
.footer-links-custom li a:hover::before { transform: translateX(3px); color: #f39c12; }
|
||||
|
||||
/* Media Sosial SVG Buttons */
|
||||
.footer-social-icons { display: flex; gap: 10px; flex-wrap: wrap; }
|
||||
.social-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
color: #ffffff !important;
|
||||
border: 1px solid rgba(255,255,255,0.15);
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
.social-btn:hover {
|
||||
background: var(--secondary-color);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 8px 18px rgba(0,0,0,0.25);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Bottom Copyright Bar */
|
||||
.footer-bottom-bar {
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
padding: 22px 0;
|
||||
background: rgba(0,0,0,0.15);
|
||||
}
|
||||
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; }
|
||||
.copyright-text { margin: 0; font-size: 13px; color: rgba(255,255,255,0.65); }
|
||||
.footer-bottom-badge { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 500; }
|
||||
|
||||
/* 9. SINGLE & SIDEBAR */
|
||||
.single-layout-wrapper { display: grid; grid-template-columns: 2.6fr 1fr; gap: 35px; align-items: start; }
|
||||
.sidebar-widget { padding: 25px; margin-bottom: 25px; }
|
||||
.sidebar-widget-title { font-size: 18px; font-weight: 800; color: var(--heading-color); margin-bottom: 18px; border-bottom: 2px solid var(--primary-color); padding-bottom: 8px; }
|
||||
|
||||
/* 10. TYPOGRAPHY KONTEN ARTIKEL & HALAMAN */
|
||||
/* 10. TYPOGRAPHY KONTEN */
|
||||
.entry-content { font-size: 16px; color: #334155; line-height: 1.85; }
|
||||
.entry-content p { margin-bottom: 22px; }
|
||||
.entry-content h2 { font-size: 26px; margin: 35px 0 15px; color: var(--heading-color); }
|
||||
@@ -173,16 +256,16 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
.entry-content li { margin-bottom: 8px; }
|
||||
.entry-content blockquote { margin: 30px 0; padding: 20px 25px; background: #f8fafc; border-left: 4px solid var(--primary-color); font-style: italic; color: #475569; border-radius: 0 8px 8px 0; }
|
||||
|
||||
/* 11. FOOTER & PAGINATION */
|
||||
.footer-links-custom { list-style: none; padding: 0; margin: 0; line-height: 2.2; }
|
||||
.footer-links-custom li a { color: #ffffff; opacity: 0.85; font-size: 15px; }
|
||||
.footer-links-custom li a:hover { opacity: 1; color: #f39c12; padding-left: 5px; }
|
||||
/* 11. PAGINATION */
|
||||
.pagination { margin-top: 45px; text-align: center; }
|
||||
.pagination .nav-links { display: inline-flex; gap: 8px; align-items: center; }
|
||||
.pagination .page-numbers { display: inline-block; padding: 9px 16px; background: #fff; color: var(--text-color); border: 1px solid #e2e8f0; border-radius: 8px; font-weight: 600; font-size: 14px; }
|
||||
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
|
||||
|
||||
/* 12. RESPONSIVE MEDIA QUERIES */
|
||||
@media (max-width: 1024px) {
|
||||
.footer-grid-wrapper { grid-template-columns: repeat(2, 1fr); gap: 35px; }
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
.single-layout-wrapper { grid-template-columns: 1fr; }
|
||||
.program-grid, .milestone-grid, .news-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
@@ -193,6 +276,8 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
|
||||
@media (max-width: 768px) {
|
||||
.header-container { flex-direction: column; gap: 15px; }
|
||||
.nav-menu-custom { flex-wrap: wrap; justify-content: center; }
|
||||
.footer-grid-wrapper { grid-template-columns: 1fr; gap: 30px; }
|
||||
.footer-bottom-inner { flex-direction: column; text-align: center; }
|
||||
.program-grid, .milestone-grid, .news-grid { grid-template-columns: 1fr; }
|
||||
.stats-grid { grid-template-columns: 1fr; margin-top: -50px; gap: 16px; }
|
||||
.edukarsa-sambutan { padding: 35px 0 40px; }
|
||||
|
||||
Reference in New Issue
Block a user