masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): optimasi jarak padding, floating CTA card, dan sinkronisasi warna dinamis

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-15 22:46:10 +07:00
parent 24b830b455
commit 8bcb046113
2 changed files with 102 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front-page.php
+36 -29
View File
@@ -32,7 +32,7 @@
</section>
<?php endif; ?>
<!-- 2. STATISTIK DESAIN KARTU (FLOATING OVERLAP) -->
<!-- 2. STATISTIK KARTU MELAYANG -->
<?php if ( get_option('edukarsa_tampil_stats', 1) == 1 ) : ?>
<section class="edukarsa-stats">
<div class="container stats-grid">
@@ -71,31 +71,31 @@
</div>
<div class="sambutan-content">
<span class="badge-title">ABOUT US</span>
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_nama_kepsek', 'Nama Kepala Sekolah') ); ?></h2>
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:15px; font-size:18px;"><?php echo esc_html( get_option('edukarsa_subtitle_about', 'Pimpinan Institusi') ); ?></h4>
<h2 class="section-title" style="margin-bottom: 6px;"><?php echo esc_html( get_option('edukarsa_nama_kepsek', 'Nama Kepala Sekolah') ); ?></h2>
<h4 class="section-subtitle-strong" style="color:var(--primary-color); margin-bottom:18px; font-size:17px; font-weight:700;"><?php echo esc_html( get_option('edukarsa_subtitle_about', 'Pimpinan Institusi') ); ?></h4>
<div class="sambutan-text"><?php echo wpautop( wp_kses_post( get_option('edukarsa_teks_sambutan') ) ); ?></div>
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary">Ketahui Lebih Lanjut</a>
<a href="<?php echo esc_url( get_option('edukarsa_link_about', '#') ); ?>" class="btn-primary" style="margin-top: 5px;">Ketahui Lebih Lanjut</a>
</div>
</div>
</section>
<?php endif; ?>
<!-- 4. MILESTONES (HANYA DITAMPILKAN JIKA ADA POSTINGAN) -->
<!-- 4. MILESTONES -->
<?php
if ( get_option('edukarsa_tampil_milestone', 1) == 1 ) :
$query_milestone = new WP_Query( array( 'post_type' => 'milestone', 'posts_per_page' => 4 ) );
if ( $query_milestone->have_posts() ) :
?>
<section class="edukarsa-section edukarsa-milestones bg-light-blue" style="padding: 50px 0;">
<section class="edukarsa-section edukarsa-milestones bg-light-blue" style="padding: 45px 0;">
<div class="container milestone-grid text-center">
<?php
while ( $query_milestone->have_posts() ) : $query_milestone->the_post();
?>
<div class="milestone-item card-style" style="padding: 30px 20px;">
<h3 class="milestone-title" style="color: var(--primary-color); font-size: 36px; font-weight: 800; margin-bottom: 6px; line-height: 1;">
<div class="milestone-item card-style" style="padding: 25px 20px;">
<h3 class="milestone-title" style="color: var(--primary-color); font-size: 34px; font-weight: 800; margin-bottom: 6px; line-height: 1;">
<?php the_title(); ?>
</h3>
<div class="milestone-desc" style="font-size: 14px; color: var(--text-muted); line-height: 1.5;">
<div class="milestone-desc" style="font-size: 13px; color: var(--text-muted); line-height: 1.5;">
<?php the_excerpt(); ?>
</div>
</div>
@@ -126,18 +126,18 @@
while ( $query_program->have_posts() ) : $query_program->the_post();
?>
<div class="program-card card-style text-center top-border-blue">
<div class="img-wrapper-landscape" style="margin-bottom: 20px;">
<div class="img-wrapper-landscape" style="margin-bottom: 18px;">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail( 'medium' ); ?>
<?php else: ?>
<div class="img-placeholder"><i>🏫</i><span>Gambar Program</span></div>
<?php endif; ?>
</div>
<h3 style="margin-bottom: 12px; font-size: 20px; color: var(--heading-color); font-weight: 700;">
<h3 style="margin-bottom: 10px; font-size: 19px; color: var(--heading-color); font-weight: 700;">
<?php the_title(); ?>
</h3>
<div class="program-desc" style="margin-bottom: 25px; font-size: 14px; color: var(--text-muted); line-height: 1.6;">
<?php echo wp_trim_words( get_the_excerpt(), 16, '...' ); ?>
<div class="program-desc" style="margin-bottom: 20px; font-size: 14px; color: var(--text-muted); line-height: 1.6;">
<?php echo wp_trim_words( get_the_excerpt(), 15, '...' ); ?>
</div>
<a href="<?php the_permalink(); ?>" class="btn-outline-primary">Lihat Detail</a>
</div>
@@ -151,19 +151,18 @@
</section>
<?php endif; ?>
<!-- WRAPPER PARALLAX -->
<!-- 6 & 7. WRAPPER PARALLAX (SINKRON DENGAN WARNA TEMA) -->
<?php
$mid_bg = get_option('edukarsa_mid_bg_image');
$mid_color = get_option('edukarsa_mid_bg_color', '#0b4a8e');
$parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background-color: '.esc_attr($mid_color).';';
$parallax_style = $mid_bg ? 'background-image: url('.esc_url($mid_bg).');' : 'background: linear-gradient(135deg, var(--primary-color), var(--heading-color));';
?>
<div class="parallax-section-wrapper" style="<?php echo $parallax_style; ?>">
<div class="parallax-overlay" style="background-color: <?php echo esc_attr($mid_color); ?>; opacity: <?php echo $mid_bg ? '0.9' : '1'; ?>;"></div>
<div class="parallax-overlay"></div>
<div class="parallax-content relative-z2">
<!-- 6. VIDEO -->
<?php if ( get_option('edukarsa_tampil_video', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-videos">
<section class="edukarsa-section edukarsa-videos" style="padding-bottom: 30px;">
<div class="container video-grid">
<?php for($i=1; $i<=2; $i++) : ?>
<div class="video-item">
@@ -186,7 +185,7 @@
<!-- 7. KEUNGGULAN DINAMIS -->
<?php if ( get_option('edukarsa_tampil_keunggulan', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 0; padding-bottom: 100px;">
<section class="edukarsa-section edukarsa-keunggulan" style="padding-top: 20px; padding-bottom: 80px;">
<div class="container">
<div class="section-header text-center">
<span class="badge-title text-white"><?php echo esc_html( get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US') ); ?></span>
@@ -222,25 +221,33 @@
</div>
</div>
<!-- 8. CTA SECTION -->
<!-- 8. CTA SECTION (FLOATING CARD DESIGN - PEMISAH ELEGAN) -->
<?php if ( get_option('edukarsa_tampil_cta', 1) == 1 ) : ?>
<?php $cta_bg = get_option('edukarsa_cta_bg'); ?>
<section class="edukarsa-section edukarsa-cta-bg" <?php if($cta_bg) echo 'style="background-image: url('.esc_url($cta_bg).');"'; ?>>
<div class="container text-center text-white relative-z2">
<h2 class="section-title text-white"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light" style="margin-top: 20px;">
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?>
</a>
<section class="edukarsa-cta-floating-section">
<div class="container">
<div class="cta-floating-card">
<div class="cta-floating-content">
<span class="badge-title" style="color: rgba(255,255,255,0.85);">PENDAFTARAN MAHASISWA BARU</span>
<h2 class="cta-floating-title"><?php echo esc_html( get_option('edukarsa_cta_title', 'Siap Bergabung Bersama Kami?') ); ?></h2>
</div>
<div class="cta-floating-action">
<a href="<?php echo esc_url( get_option('edukarsa_cta_btn_url', '#') ); ?>" class="btn-primary btn-light cta-btn-custom">
<?php echo esc_html( get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang') ); ?> &raquo;
</a>
</div>
</div>
</section>
</div>
</section>
<?php endif; ?>
<!-- 9. LATEST NEWS -->
<?php if ( get_option('edukarsa_tampil_news', 1) == 1 ) : ?>
<section class="edukarsa-section edukarsa-latest-news">
<section class="edukarsa-section edukarsa-latest-news" style="padding-top: 50px;">
<div class="container">
<div class="section-header text-center">
<span class="badge-title">INFORMASI TERKINI</span>
<h2 class="section-title"><?php echo esc_html( get_option('edukarsa_news_title', 'News & Update') ); ?></h2>
<hr class="title-underline">
</div>
<div class="news-grid">
<?php