diff --git a/sidebar.php b/sidebar.php index de37c36..ad8b180 100644 --- a/sidebar.php +++ b/sidebar.php @@ -89,16 +89,31 @@ defined( 'ABSPATH' ) || exit; diff --git a/style.css b/style.css index 1e11169..985b9d7 100644 --- a/style.css +++ b/style.css @@ -42,7 +42,13 @@ body { } 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; } +h1, h2, h3, h4, h5, h6 { + color: var(--heading-color); + font-weight: 800; + line-height: 1.3; + overflow-wrap: break-word; + word-break: break-word; +} /* Standar Kelas Wajib WordPress Theme Check */ .screen-reader-text { @@ -93,37 +99,62 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei .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 & 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; } +/* 3. HEADER & RESPONSIVE NAV */ +.site-header { position: sticky; top: 0; z-index: 999; box-shadow: 0 4px 15px rgba(0,0,0,0.12); padding: 12px 0; background-color: var(--primary-color); } +.header-container { display: flex; justify-content: space-between; align-items: center; gap: 15px; } +.site-branding { flex-shrink: 0; } .logo-link { display: flex; align-items: center; gap: 15px; color: #fff; } -.site-title { margin: 0; font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.5px; } -.header-nav-wrap { display: flex; align-items: center; gap: 20px; } -.nav-menu-custom { list-style: none; display: flex; gap: 25px; margin: 0; padding: 0; } -.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; } +.site-title { margin: 0; font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.5px; white-space: nowrap; } +.header-nav-wrap { display: flex; align-items: center; gap: 14px; justify-content: flex-end; flex: 1; min-width: 0; } +.main-navigation { min-width: 0; } +.nav-menu-custom { + list-style: none; + display: flex; + align-items: center; + gap: 16px; + margin: 0; + padding: 0; + flex-wrap: wrap; +} +.nav-menu-custom li { position: relative; } +.nav-menu-custom li a { + display: block; + color: #ffffff; + font-weight: 700; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 0.4px; + padding: 6px 0; + white-space: nowrap; +} .nav-menu-custom li a:hover { color: #f39c12; } -/* DROPDOWN */ -.nav-menu-custom li { position: relative; } +/* DROPDOWN MENU */ .nav-menu-custom .sub-menu { position: absolute; top: 100%; left: 0; background-color: var(--primary-color); min-width: 220px; - padding: 10px 0; + padding: 8px 0; border-radius: 0 0 8px 8px; - box-shadow: 0 10px 25px rgba(0,0,0,0.2); + box-shadow: 0 10px 25px rgba(0,0,0,0.25); opacity: 0; visibility: hidden; - transform: translateY(15px); - transition: all 0.3s ease; + transform: translateY(12px); + transition: all 0.25s ease; z-index: 1000; } .nav-menu-custom li:hover > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } -.nav-menu-custom .sub-menu li a { padding: 10px 20px; font-size: 14px; text-transform: none; border-bottom: 1px solid rgba(255,255,255,0.05); } +.nav-menu-custom .sub-menu li a { + padding: 8px 18px; + font-size: 13px; + text-transform: none; + border-bottom: 1px solid rgba(255,255,255,0.06); + white-space: nowrap; +} .nav-menu-custom .sub-menu li:last-child a { border-bottom: none; } -.nav-menu-custom .sub-menu .sub-menu { top: 0; left: 100%; transform: translateX(15px); } +.nav-menu-custom .sub-menu .sub-menu { top: 0; left: 100%; transform: translateX(12px); } .nav-menu-custom .sub-menu li:hover > .sub-menu { transform: translateX(0); } /* 4. SLIDER */ @@ -257,7 +288,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei .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 & COMMENTS */ -.entry-content { font-size: 16px; color: #334155; line-height: 1.85; } +.entry-content { font-size: 16px; color: #334155; line-height: 1.85; overflow-wrap: break-word; word-break: break-word; } .entry-content p { margin-bottom: 22px; } .entry-content h2 { font-size: 26px; margin: 35px 0 15px; color: var(--heading-color); } .entry-content h3 { font-size: 21px; margin: 28px 0 12px; color: var(--heading-color); } @@ -290,7 +321,6 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei } @media (max-width: 768px) { .header-container { flex-direction: row; } - .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; } @@ -301,19 +331,19 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei .cta-floating-title { font-size: 20px; } } -/* 13. MOBILE MENU TOGGLE & DRAWER */ -.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 10px; flex-direction: column; gap: 5px; z-index: 1001; } -.menu-toggle span { display: block; width: 26px; height: 3px; background-color: #ffffff; border-radius: 3px; transition: all 0.3s ease; } +/* 13. MOBILE MENU TOGGLE & DRAWER (SWITCH AT 992px) */ +.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; padding: 8px; flex-direction: column; gap: 5px; z-index: 1001; } +.menu-toggle span { display: block; width: 24px; height: 3px; background-color: #ffffff; border-radius: 3px; transition: all 0.3s ease; } .menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } -@media (max-width: 768px) { +@media (max-width: 992px) { .menu-toggle { display: flex; } .main-navigation { position: fixed; top: 0; right: -100%; - width: 280px; + width: 300px; height: 100vh; background: var(--primary-color); box-shadow: -5px 0 25px rgba(0,0,0,0.3); @@ -386,6 +416,7 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei padding: 3px 8px; border-radius: 20px; backdrop-filter: blur(4px); + flex-shrink: 0; } .lang-btn { background: transparent; @@ -651,7 +682,64 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl .nav-box:hover .nav-post-title { color: var(--primary-color); } .text-right { text-align: right; } -/* 20. KOMPONEN SIDEBAR */ +/* 20. SIDEBAR KATEGORI DENGAN LIMIT & SCROLLABLE CONTAINER */ +.sidebar-category-list { + list-style: none; + padding: 0; + margin: 0; + max-height: 380px; + overflow-y: auto; + padding-right: 6px; +} +.sidebar-category-list::-webkit-scrollbar { + width: 5px; +} +.sidebar-category-list::-webkit-scrollbar-track { + background: #f1f5f9; + border-radius: 4px; +} +.sidebar-category-list::-webkit-scrollbar-thumb { + background: #cbd5e1; + border-radius: 4px; +} +.sidebar-category-list::-webkit-scrollbar-thumb:hover { + background: #94a3b8; +} +.sidebar-category-list li { margin-bottom: 8px; } +.sidebar-cat-link { + display: flex; + justify-content: space-between; + align-items: center; + padding: 9px 14px; + background: #f8fafc; + border: 1px solid #f1f5f9; + border-radius: 6px; + font-size: 13px; + font-weight: 600; + color: var(--text-color); + transition: all 0.2s ease; + word-break: break-word; +} +.sidebar-cat-link:hover { + background: var(--primary-color); + color: #ffffff; + border-color: var(--primary-color); +} +.sidebar-cat-count { + padding: 2px 8px; + background: rgba(0,0,0,0.06); + border-radius: 12px; + font-size: 11px; + font-weight: 800; + flex-shrink: 0; + margin-left: 8px; +} +.sidebar-cat-link:hover .sidebar-cat-count { + background: rgba(255,255,255,0.25); + color: #ffffff; +} + +/* 21. SIDEBAR SEARCH & HTML BOX */ .sidebar-search-form { position: relative; } .sidebar-search-wrapper { display: flex; position: relative; } .sidebar-search-input { @@ -703,39 +791,7 @@ body.a11y-underline-links a { text-decoration: underline !important; text-underl .sidebar-recent-title { font-size: 14px; font-weight: 700; margin: 0; line-height: 1.4; } .sidebar-recent-title a { color: var(--heading-color); } .sidebar-recent-title a:hover { color: var(--primary-color); } -.sidebar-category-list { list-style: none; padding: 0; margin: 0; } -.sidebar-category-list li { margin-bottom: 8px; } -.sidebar-cat-link { - display: flex; - justify-content: space-between; - align-items: center; - padding: 9px 14px; - background: #f8fafc; - border: 1px solid #f1f5f9; - border-radius: 6px; - font-size: 13px; - font-weight: 600; - color: var(--text-color); - transition: all 0.2s ease; -} -.sidebar-cat-link:hover { - background: var(--primary-color); - color: #ffffff; - border-color: var(--primary-color); -} -.sidebar-cat-count { - padding: 2px 8px; - background: rgba(0,0,0,0.06); - border-radius: 12px; - font-size: 11px; - font-weight: 800; -} -.sidebar-cat-link:hover .sidebar-cat-count { - background: rgba(255,255,255,0.25); - color: #ffffff; -} -/* 21. SIDEBAR CUSTOM HTML BOX */ .sidebar-custom-html-box { padding: 25px; } .sidebar-html-rendered-content { font-size: 14px; line-height: 1.7; color: var(--text-color); } .sidebar-html-rendered-content iframe { width: 100% !important; border-radius: 8px; border: none; }